From 4aca3b2fb92ec4c03d49847fa4f724bf2319f97e Mon Sep 17 00:00:00 2001
From: Nguyen Ngo <ngodanguyen@gmail.com>
Date: Sat, 18 Apr 2026 14:46:49 -0400
Subject: [PATCH] 04/18 Enhance app, make sidebar collapsible

---
 app/static/css/app.css         | 1339 ++++++++++++++----
 app/static/js/vault.js         | 2374 +++++++++++++++++++++-----------
 app/templates/vault/index.html |  690 ++++++++--
 3 files changed, 3228 insertions(+), 1175 deletions(-)

diff --git a/app/static/css/app.css b/app/static/css/app.css
index e3f90ab..d0300bb 100644
--- a/app/static/css/app.css
+++ b/app/static/css/app.css
@@ -1,5 +1,11 @@
 /* ── Reset & base ──────────────────────────────────────────────────── */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 
 :root {
   --color-bg: #f4f5f7;
@@ -14,24 +20,59 @@
   --color-sidebar-hover: #2d3250;
   --color-sidebar-active: #d0021b;
   --radius: 8px;
-  --shadow: 0 1px 4px rgba(0,0,0,.08), 0 2px 12px rgba(0,0,0,.05);
+  --shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 2px 12px rgba(0, 0, 0, 0.05);
   --transition: 150ms ease;
 }
 
-html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; color: var(--color-text); background: var(--color-bg); }
-a { color: var(--color-primary); text-decoration: none; }
-a:hover { text-decoration: underline; }
-button { cursor: pointer; font: inherit; border: none; background: none; }
-input, select, textarea { font: inherit; }
-ul { list-style: none; }
+html,
+body {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 14px;
+  color: var(--color-text);
+  background: var(--color-bg);
+}
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+button {
+  cursor: pointer;
+  font: inherit;
+  border: none;
+  background: none;
+}
+input,
+select,
+textarea {
+  font: inherit;
+}
+ul {
+  list-style: none;
+}
 
 /* ── Utilities ───────────────────────────────────────────────────── */
-.hidden { display: none !important; }
+.hidden {
+  display: none !important;
+}
 
 /* ── Auth pages ──────────────────────────────────────────────────── */
-.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--color-bg); }
+.auth-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: var(--color-bg);
+}
 
-.auth-container { width: 100%; max-width: 420px; padding: 16px; }
+.auth-container {
+  width: 100%;
+  max-width: 420px;
+  padding: 16px;
+}
 
 .auth-card {
   background: var(--color-surface);
@@ -40,18 +81,48 @@ ul { list-style: none; }
   padding: 40px 36px;
 }
 
-.auth-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }
-.auth-logo .logo-icon { font-size: 28px; }
-.auth-logo .logo-text { font-size: 20px; font-weight: 700; color: var(--color-text); }
+.auth-logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 28px;
+}
+.auth-logo .logo-icon {
+  font-size: 28px;
+}
+.auth-logo .logo-text {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--color-text);
+}
 
-.auth-title { font-size: 22px; font-weight: 600; margin-bottom: 24px; }
+.auth-title {
+  font-size: 22px;
+  font-weight: 600;
+  margin-bottom: 24px;
+}
 
-.auth-footer { margin-top: 20px; text-align: center; color: var(--color-text-muted); }
+.auth-footer {
+  margin-top: 20px;
+  text-align: center;
+  color: var(--color-text-muted);
+}
 
 /* ── Form elements ──────────────────────────────────────────────── */
-.form-group { margin-bottom: 16px; }
-.form-group label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--color-text); }
-.form-group label .hint { font-weight: 400; color: var(--color-text-muted); font-size: 12px; }
+.form-group {
+  margin-bottom: 16px;
+}
+.form-group label {
+  display: block;
+  margin-bottom: 6px;
+  font-weight: 500;
+  color: var(--color-text);
+}
+.form-group label .hint {
+  font-weight: 400;
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
 
 .form-group input,
 .form-group select,
@@ -69,66 +140,166 @@ ul { list-style: none; }
 .form-group textarea:focus {
   outline: none;
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(208,2,27,.12);
+  box-shadow: 0 0 0 3px rgba(208, 2, 27, 0.12);
 }
 
-.input-with-toggle { position: relative; }
-.input-with-toggle input { padding-right: 40px; }
+.input-with-toggle {
+  position: relative;
+}
+.input-with-toggle input {
+  padding-right: 40px;
+}
 .btn-show-pass {
-  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
-  background: none; border: none; cursor: pointer; font-size: 16px; opacity: .6;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  opacity: 0.6;
   transition: opacity var(--transition);
 }
-.btn-show-pass:hover { opacity: 1; }
+.btn-show-pass:hover {
+  opacity: 1;
+}
 
-.form-error { color: #c00; background: #fff0f0; border: 1px solid #fcc; border-radius: var(--radius); padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }
+.form-error {
+  color: #c00;
+  background: #fff0f0;
+  border: 1px solid #fcc;
+  border-radius: var(--radius);
+  padding: 8px 12px;
+  margin-bottom: 12px;
+  font-size: 13px;
+}
 
 /* Buttons */
 .btn-primary {
-  display: inline-flex; align-items: center; justify-content: center;
-  background: var(--color-primary); color: #fff;
-  padding: 10px 20px; border-radius: var(--radius); font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-primary);
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: var(--radius);
+  font-weight: 600;
   transition: background var(--transition);
 }
-.btn-primary:hover { background: var(--color-primary-dark); }
-.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
-.btn-full { width: 100%; }
+.btn-primary:hover {
+  background: var(--color-primary-dark);
+}
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.btn-full {
+  width: 100%;
+}
 
 .btn-secondary {
-  display: inline-flex; align-items: center; justify-content: center;
-  background: var(--color-border); color: var(--color-text);
-  padding: 10px 20px; border-radius: var(--radius); font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-border);
+  color: var(--color-text);
+  padding: 10px 20px;
+  border-radius: var(--radius);
+  font-weight: 500;
   transition: background var(--transition);
 }
-.btn-secondary:hover { background: #d1d5dc; }
+.btn-secondary:hover {
+  background: #d1d5dc;
+}
 
-.btn-text { background: none; border: none; color: inherit; padding: 0; }
+.btn-text {
+  background: none;
+  border: none;
+  color: inherit;
+  padding: 0;
+}
 
 /* Notices */
-.notice-success { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }
-.notice-info { background: #e3f2fd; border: 1px solid #90caf9; color: #1565c0; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }
+.notice-success {
+  background: #e8f5e9;
+  border: 1px solid #a5d6a7;
+  color: #2e7d32;
+  border-radius: var(--radius);
+  padding: 10px 14px;
+  margin-bottom: 16px;
+  font-size: 13px;
+}
+.notice-info {
+  background: #e3f2fd;
+  border: 1px solid #90caf9;
+  color: #1565c0;
+  border-radius: var(--radius);
+  padding: 10px 14px;
+  margin-bottom: 16px;
+  font-size: 13px;
+}
 
 /* ── Password Generator modal ────────────────────────────────────────── */
-.gen-opt { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
-.gen-opt input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; }
-#gen-output { letter-spacing: .5px; font-family: 'Courier New', monospace; }
+.gen-opt {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  font-size: 13px;
+}
+.gen-opt input[type="checkbox"] {
+  width: 15px;
+  height: 15px;
+  accent-color: var(--color-primary);
+  cursor: pointer;
+}
+#gen-output {
+  letter-spacing: 0.5px;
+  font-family: "Courier New", monospace;
+}
 
 /* Launch (open URL) button — distinct colour so it reads as navigation */
-.btn-icon[data-action="launch"] { color: #1a73e8; }
-.btn-icon[data-action="launch"]:hover { background: #e8f0fe; color: #1558b0; }
+.btn-icon[data-action="launch"] {
+  color: #1a73e8;
+}
+.btn-icon[data-action="launch"]:hover {
+  background: #e8f0fe;
+  color: #1558b0;
+}
 
 /* Password strength */
-.password-strength { margin-top: 6px; font-size: 12px; font-weight: 500; }
-.strength-1 { color: #c62828; }
-.strength-2 { color: #e65100; }
-.strength-3 { color: #f57f17; }
-.strength-4 { color: #2e7d32; }
-.strength-5 { color: #1b5e20; }
+.password-strength {
+  margin-top: 6px;
+  font-size: 12px;
+  font-weight: 500;
+}
+.strength-1 {
+  color: #c62828;
+}
+.strength-2 {
+  color: #e65100;
+}
+.strength-3 {
+  color: #f57f17;
+}
+.strength-4 {
+  color: #2e7d32;
+}
+.strength-5 {
+  color: #1b5e20;
+}
 
 /* ── App layout (vault) ──────────────────────────────────────────── */
-.vault-page { height: 100vh; overflow: hidden; }
+.vault-page {
+  height: 100vh;
+  overflow: hidden;
+}
 
-.app-layout { display: flex; height: 100vh; }
+.app-layout {
+  display: flex;
+  height: 100vh;
+}
 
 /* ── Sidebar ─────────────────────────────────────────────────────── */
 .sidebar {
@@ -138,7 +309,14 @@ ul { list-style: none; }
   color: var(--color-sidebar-text);
   display: flex;
   flex-direction: column;
+  overflow: hidden;
   overflow-y: auto;
+  transition: width 0.22s ease;
+}
+
+.sidebar.collapsed {
+  width: 56px;
+  overflow-y: visible;
 }
 
 .sidebar-header {
@@ -146,19 +324,71 @@ ul { list-style: none; }
   align-items: center;
   gap: 8px;
   padding: 18px 16px;
-  border-bottom: 1px solid rgba(255,255,255,.08);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  flex-shrink: 0;
+  min-height: 60px;
+}
+.sidebar-header .logo-icon {
+  font-size: 22px;
+  flex-shrink: 0;
+}
+.sidebar-header .logo-text {
+  font-size: 16px;
+  font-weight: 700;
+  color: #fff;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  transition:
+    opacity 0.15s ease,
+    width 0.15s ease;
+}
+.sidebar.collapsed .sidebar-header .logo-text {
+  opacity: 0;
+  width: 0;
 }
-.sidebar-header .logo-icon { font-size: 22px; }
-.sidebar-header .logo-text { font-size: 16px; font-weight: 700; color: #fff; }
 
-.sidebar-nav { flex: 1; padding: 8px 0; }
+/* Toggle button */
+.btn-sidebar-toggle {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 13px;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 4px;
+  line-height: 1;
+  flex-shrink: 0;
+  transition:
+    color var(--transition),
+    transform 0.22s ease;
+}
+.btn-sidebar-toggle:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
+}
+.sidebar.collapsed .btn-sidebar-toggle {
+  transform: rotate(180deg);
+}
+
+.sidebar-nav {
+  flex: 1;
+  padding: 8px 0;
+}
 
 .sidebar-section-header {
   padding: 12px 16px 4px;
   font-size: 11px;
   text-transform: uppercase;
-  letter-spacing: .08em;
-  color: rgba(255,255,255,.35);
+  letter-spacing: 0.08em;
+  color: rgba(255, 255, 255, 0.35);
+  white-space: nowrap;
+  overflow: hidden;
+  transition: opacity 0.15s ease;
+}
+.sidebar.collapsed .sidebar-section-header {
+  opacity: 0;
+  pointer-events: none;
 }
 
 .sidebar-item {
@@ -173,42 +403,144 @@ ul { list-style: none; }
   font-size: 14px;
   width: 100%;
   text-align: left;
+  position: relative;
+  white-space: nowrap;
+}
+.sidebar-item:hover {
+  background: var(--color-sidebar-hover);
+}
+.sidebar-item.active {
+  background: var(--color-sidebar-active);
+  color: #fff;
+}
+.sidebar-icon {
+  font-size: 16px;
+  flex-shrink: 0;
 }
-.sidebar-item:hover { background: var(--color-sidebar-hover); }
-.sidebar-item.active { background: var(--color-sidebar-active); color: #fff; }
-.sidebar-icon { font-size: 16px; flex-shrink: 0; }
 
-.sidebar-footer { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
+/* Hide labels and show tooltip when collapsed */
+.sidebar-label {
+  overflow: hidden;
+  transition:
+    opacity 0.15s ease,
+    width 0.15s ease;
+}
+.sidebar.collapsed .sidebar-label {
+  opacity: 0;
+  width: 0;
+}
+.sidebar.collapsed .sidebar-item {
+  justify-content: center;
+  padding: 9px 0;
+}
 
-.folder-item { justify-content: space-between; }
-.folder-label { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; }
+/* Tooltip — shown on hover in collapsed state */
+.sidebar.collapsed .sidebar-item::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+  background: #111827;
+  color: #fff;
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+  z-index: 200;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+}
+.sidebar.collapsed .sidebar-item:hover::after {
+  opacity: 1;
+}
+
+.sidebar-footer {
+  padding: 12px 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.folder-item {
+  justify-content: space-between;
+}
+.folder-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  cursor: pointer;
+}
 .btn-delete-folder {
-  background: none; border: none; cursor: pointer;
-  font-size: 13px; opacity: 0; color: rgba(255,255,255,.6);
-  transition: opacity var(--transition), color var(--transition);
-  padding: 2px 4px; border-radius: 4px; flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 13px;
+  opacity: 0;
+  color: rgba(255, 255, 255, 0.6);
+  transition:
+    opacity var(--transition),
+    color var(--transition);
+  padding: 2px 4px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+.folder-item:hover .btn-delete-folder {
+  opacity: 1;
+}
+.btn-delete-folder:hover {
+  color: #ff6b6b;
 }
-.folder-item:hover .btn-delete-folder { opacity: 1; }
-.btn-delete-folder:hover { color: #ff6b6b; }
 
 .btn-new-folder {
-  float: right; margin-right: 4px;
-  background: none; border: none; color: rgba(255,255,255,.5);
-  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px;
+  float: right;
+  margin-right: 4px;
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 4px;
   transition: color var(--transition);
 }
-.btn-new-folder:hover { color: #fff; }
-
-.new-folder-row { padding: 4px 10px 4px 16px; }
-.new-folder-row form { display: flex; align-items: center; gap: 4px; }
-.new-folder-row input {
-  flex: 1; padding: 5px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,.2);
-  background: rgba(255,255,255,.1); color: #fff; font-size: 13px;
+.btn-new-folder:hover {
+  color: #fff;
+}
+
+.new-folder-row {
+  padding: 4px 10px 4px 16px;
+}
+.new-folder-row form {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.new-folder-row input {
+  flex: 1;
+  padding: 5px 8px;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  font-size: 13px;
+}
+.new-folder-row input::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+.new-folder-row input:focus {
+  outline: none;
+  border-color: rgba(255, 255, 255, 0.5);
+}
+.new-folder-row .btn-icon {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+}
+.new-folder-row .btn-icon:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
 }
-.new-folder-row input::placeholder { color: rgba(255,255,255,.4); }
-.new-folder-row input:focus { outline: none; border-color: rgba(255,255,255,.5); }
-.new-folder-row .btn-icon { color: rgba(255,255,255,.7); font-size: 14px; }
-.new-folder-row .btn-icon:hover { color: #fff; background: rgba(255,255,255,.1); }
 
 /* ── Vault main ──────────────────────────────────────────────────── */
 .vault-main {
@@ -219,7 +551,8 @@ ul { list-style: none; }
   background: var(--color-bg);
 }
 
-#view-vault, #view-security {
+#view-vault,
+#view-security {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -227,7 +560,10 @@ ul { list-style: none; }
   min-height: 0;
   position: relative;
 }
-#view-vault.hidden, #view-security.hidden { display: none; }
+#view-vault.hidden,
+#view-security.hidden {
+  display: none;
+}
 
 .vault-header {
   display: flex;
@@ -239,187 +575,441 @@ ul { list-style: none; }
   gap: 16px;
 }
 
-.vault-title { font-size: 18px; font-weight: 600; white-space: nowrap; }
+.vault-title {
+  font-size: 18px;
+  font-weight: 600;
+  white-space: nowrap;
+}
 
-.vault-toolbar { display: flex; align-items: center; gap: 12px; flex: 1; justify-content: flex-end; }
+.vault-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  justify-content: flex-end;
+}
 
 .search-wrapper {
-  display: flex; align-items: center;
-  background: var(--color-bg); border: 1px solid var(--color-border);
-  border-radius: 20px; padding: 6px 14px; gap: 8px; flex: 1; max-width: 360px;
+  display: flex;
+  align-items: center;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 20px;
+  padding: 6px 14px;
+  gap: 8px;
+  flex: 1;
+  max-width: 360px;
+}
+.search-icon {
+  color: var(--color-text-muted);
+}
+#search-input {
+  border: none;
+  background: none;
+  outline: none;
+  flex: 1;
+  font-size: 14px;
 }
-.search-icon { color: var(--color-text-muted); }
-#search-input { border: none; background: none; outline: none; flex: 1; font-size: 14px; }
 
 .btn-fab {
-  width: 40px; height: 40px; border-radius: 50%;
-  background: var(--color-primary); color: #fff;
-  font-size: 24px; font-weight: 300;
-  display: flex; align-items: center; justify-content: center;
-  box-shadow: 0 2px 8px rgba(208,2,27,.35);
-  transition: background var(--transition), box-shadow var(--transition);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  color: #fff;
+  font-size: 24px;
+  font-weight: 300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(208, 2, 27, 0.35);
+  transition:
+    background var(--transition),
+    box-shadow var(--transition);
   flex-shrink: 0;
 }
-.btn-fab:hover { background: var(--color-primary-dark); box-shadow: 0 4px 14px rgba(208,2,27,.45); }
+.btn-fab:hover {
+  background: var(--color-primary-dark);
+  box-shadow: 0 4px 14px rgba(208, 2, 27, 0.45);
+}
 
 /* ── Vault list ──────────────────────────────────────────────────── */
-.vault-list { flex: 1; overflow-y: auto; padding: 12px 24px 24px; }
+.vault-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 24px 24px;
+}
 
 .vault-group-header {
-  font-size: 12px; font-weight: 600; text-transform: uppercase;
-  letter-spacing: .06em; color: var(--color-text-muted);
-  padding: 16px 0 6px; border-bottom: 1px solid var(--color-border);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-text-muted);
+  padding: 16px 0 6px;
+  border-bottom: 1px solid var(--color-border);
   margin-bottom: 4px;
 }
 
 .vault-empty {
-  text-align: center; color: var(--color-text-muted); padding: 60px 0; font-size: 15px;
+  text-align: center;
+  color: var(--color-text-muted);
+  padding: 60px 0;
+  font-size: 15px;
 }
 
 .vault-item {
-  display: flex; align-items: center; gap: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 12px 14px;
   margin-bottom: 6px;
   cursor: pointer;
-  transition: box-shadow var(--transition), border-color var(--transition);
+  transition:
+    box-shadow var(--transition),
+    border-color var(--transition);
+}
+.vault-item:hover {
+  box-shadow: var(--shadow);
+  border-color: #c9ccd4;
 }
-.vault-item:hover { box-shadow: var(--shadow); border-color: #c9ccd4; }
 
-.item-icon { font-size: 22px; flex-shrink: 0; }
+.item-icon {
+  font-size: 22px;
+  flex-shrink: 0;
+}
 
-.item-info { flex: 1; min-width: 0; }
-.item-name { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.item-sub { display: block; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.item-info {
+  flex: 1;
+  min-width: 0;
+}
+.item-name {
+  display: block;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.item-sub {
+  display: block;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-.item-actions { display: flex; gap: 4px; opacity: 0; transition: opacity var(--transition); }
-.vault-item:hover .item-actions { opacity: 1; }
+.item-actions {
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity var(--transition);
+}
+.vault-item:hover .item-actions {
+  opacity: 1;
+}
 
 .btn-icon {
-  width: 30px; height: 30px; border-radius: 6px;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 15px; color: var(--color-text-muted);
-  transition: background var(--transition), color var(--transition);
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  color: var(--color-text-muted);
+  transition:
+    background var(--transition),
+    color var(--transition);
+}
+.btn-icon:hover {
+  background: var(--color-bg);
+  color: var(--color-text);
 }
-.btn-icon:hover { background: var(--color-bg); color: var(--color-text); }
 
 /* ── Spinner ─────────────────────────────────────────────────────── */
 .spinner-overlay {
-  position: absolute; inset: 0;
-  display: flex; align-items: center; justify-content: center;
-  background: rgba(255,255,255,.7);
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.7);
   z-index: 10;
 }
-.spinner-overlay.hidden { display: none; }
+.spinner-overlay.hidden {
+  display: none;
+}
 .spinner {
-  width: 36px; height: 36px;
+  width: 36px;
+  height: 36px;
   border: 3px solid var(--color-border);
   border-top-color: var(--color-primary);
   border-radius: 50%;
-  animation: spin .7s linear infinite;
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
-@keyframes spin { to { transform: rotate(360deg); } }
 
 /* ── Modal ───────────────────────────────────────────────────────── */
 .modal-overlay {
-  position: fixed; inset: 0;
-  background: rgba(0,0,0,.45);
-  display: none; align-items: center; justify-content: center;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: none;
+  align-items: center;
+  justify-content: center;
   z-index: 100;
   padding: 16px;
 }
-.modal-overlay.open { display: flex; }
+.modal-overlay.open {
+  display: flex;
+}
 
 .modal {
   background: var(--color-surface);
   border-radius: var(--radius);
-  box-shadow: 0 8px 40px rgba(0,0,0,.2);
-  width: 100%; max-width: 480px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
+  width: 100%;
+  max-width: 480px;
   max-height: 90vh;
   overflow-y: auto;
   padding: 28px;
 }
 
 .modal-header {
-  display: flex; align-items: center; justify-content: space-between;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   margin-bottom: 20px;
 }
-.modal-header h3 { font-size: 18px; font-weight: 600; }
+.modal-header h3 {
+  font-size: 18px;
+  font-weight: 600;
+}
 
-.btn-close { font-size: 18px; color: var(--color-text-muted); padding: 4px; border-radius: 4px; }
-.btn-close:hover { background: var(--color-bg); color: var(--color-text); }
+.btn-close {
+  font-size: 18px;
+  color: var(--color-text-muted);
+  padding: 4px;
+  border-radius: 4px;
+}
+.btn-close:hover {
+  background: var(--color-bg);
+  color: var(--color-text);
+}
 
-.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
+.modal-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
 
-.required { color: var(--color-primary); }
+.required {
+  color: var(--color-primary);
+}
 
 /* ── Toast ───────────────────────────────────────────────────────── */
 .toast {
-  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
-  background: #1a1a2e; color: #fff;
-  padding: 10px 20px; border-radius: 20px;
-  font-size: 14px; font-weight: 500;
-  opacity: 0; transition: opacity .25s, transform .25s;
-  pointer-events: none; z-index: 200; white-space: nowrap;
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
+  background: #1a1a2e;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  opacity: 0;
+  transition:
+    opacity 0.25s,
+    transform 0.25s;
+  pointer-events: none;
+  z-index: 200;
+  white-space: nowrap;
+}
+.toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+.toast.toast-error {
+  background: #c00;
 }
-.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
-.toast.toast-error { background: #c00; }
 
 /* ── Unlock overlay ──────────────────────────────────────────────── */
-.modal-unlock { max-width: 380px; }
-.unlock-logo { margin-bottom: 16px; }
-.unlock-title { margin-bottom: 4px; }
-.unlock-subtitle { color: var(--color-text-muted); font-size: 13px; margin-bottom: 20px; }
-.btn-link { padding: 10px 20px; border-radius: var(--radius); text-decoration: none; }
+.modal-unlock {
+  max-width: 380px;
+}
+.unlock-logo {
+  margin-bottom: 16px;
+}
+.unlock-title {
+  margin-bottom: 4px;
+}
+.unlock-subtitle {
+  color: var(--color-text-muted);
+  font-size: 13px;
+  margin-bottom: 20px;
+}
+.btn-link {
+  padding: 10px 20px;
+  border-radius: var(--radius);
+  text-decoration: none;
+}
 
 /* ── Auth step hint ─────────────────────────────────────────────── */
-.auth-step-hint { color: var(--color-text-muted); font-size: 13px; margin-bottom: 16px; }
-#mfa-code { font-size: 22px; letter-spacing: .2em; text-align: center; }
+.auth-step-hint {
+  color: var(--color-text-muted);
+  font-size: 13px;
+  margin-bottom: 16px;
+}
+#mfa-code {
+  font-size: 22px;
+  letter-spacing: 0.2em;
+  text-align: center;
+}
 
 /* ── Panel body (sharing / emergency) ───────────────────────────── */
-.panel-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
+.panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+}
 
 /* ── Tabs ────────────────────────────────────────────────────────── */
-.panel-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--color-border); padding-bottom: 0; }
-.tab-btn {
-  padding: 8px 16px; border-radius: 6px 6px 0 0; font-size: 13px;
-  font-weight: 500; color: var(--color-text-muted);
-  border-bottom: 2px solid transparent; margin-bottom: -2px;
-  transition: color var(--transition), border-color var(--transition);
+.panel-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 16px;
+  border-bottom: 2px solid var(--color-border);
+  padding-bottom: 0;
+}
+.tab-btn {
+  padding: 8px 16px;
+  border-radius: 6px 6px 0 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  transition:
+    color var(--transition),
+    border-color var(--transition);
+}
+.tab-btn:hover {
+  color: var(--color-text);
+}
+.tab-btn.active {
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
 }
-.tab-btn:hover { color: var(--color-text); }
-.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
 
 /* ── Share / Emergency lists ────────────────────────────────────── */
-.share-list { display: flex; flex-direction: column; gap: 8px; }
+.share-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 .share-item {
-  display: flex; align-items: center; gap: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius); padding: 12px 14px;
+  border-radius: var(--radius);
+  padding: 12px 14px;
+}
+.share-icon {
+  font-size: 22px;
+  flex-shrink: 0;
+}
+.share-info {
+  flex: 1;
+  min-width: 0;
+}
+.share-name {
+  display: block;
+  font-weight: 500;
+}
+.share-meta {
+  display: block;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  margin-top: 2px;
+}
+.share-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  flex-shrink: 0;
 }
-.share-icon { font-size: 22px; flex-shrink: 0; }
-.share-info { flex: 1; min-width: 0; }
-.share-name { display: block; font-weight: 500; }
-.share-meta { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
-.share-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
 
 /* ── Badges ──────────────────────────────────────────────────────── */
-.badge { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; }
-.badge-warn { background: #fff8e1; color: #e65100; border: 1px solid #ffb74d; }
-.badge-info { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
+.badge {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+.badge-warn {
+  background: #fff8e1;
+  color: #e65100;
+  border: 1px solid #ffb74d;
+}
+.badge-info {
+  background: #e3f2fd;
+  color: #1565c0;
+  border: 1px solid #90caf9;
+}
 
 /* ── Settings modal ──────────────────────────────────────────────── */
-.modal-settings { max-width: 520px; }
-.settings-section { padding: 16px 0; border-bottom: 1px solid var(--color-border); }
-.settings-section:last-child { border-bottom: none; }
-.settings-section-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
-.settings-desc { font-size: 13px; color: var(--color-text-muted); margin-bottom: 10px; line-height: 1.5; }
-.mfa-qr { display: block; margin: 12px auto; max-width: 180px; border: 1px solid var(--color-border); border-radius: 4px; }
-.mfa-secret-text { font-family: monospace; font-size: 12px; }
-.mfa-secret-text code { background: var(--color-bg); padding: 2px 6px; border-radius: 4px; user-select: all; }
+.modal-settings {
+  max-width: 520px;
+}
+.settings-section {
+  padding: 16px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+.settings-section:last-child {
+  border-bottom: none;
+}
+.settings-section-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.settings-desc {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  margin-bottom: 10px;
+  line-height: 1.5;
+}
+.mfa-qr {
+  display: block;
+  margin: 12px auto;
+  max-width: 180px;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+}
+.mfa-secret-text {
+  font-family: monospace;
+  font-size: 12px;
+}
+.mfa-secret-text code {
+  background: var(--color-bg);
+  padding: 2px 6px;
+  border-radius: 4px;
+  user-select: all;
+}
 
 /* ── Sort control ────────────────────────────────────────────────── */
 .sort-wrapper select {
@@ -432,21 +1022,35 @@ ul { list-style: none; }
   cursor: pointer;
   outline: none;
 }
-.sort-wrapper select:focus { border-color: var(--color-primary); }
+.sort-wrapper select:focus {
+  border-color: var(--color-primary);
+}
 
 /* ── Modal item (wider for address/card forms) ───────────────────── */
-.modal-item { max-width: 540px; }
+.modal-item {
+  max-width: 540px;
+}
 
 /* ── Multi-column form rows ──────────────────────────────────────── */
-.form-row { display: flex; gap: 12px; }
-.form-row .form-group { flex: 1; }
+.form-row {
+  display: flex;
+  gap: 12px;
+}
+.form-row .form-group {
+  flex: 1;
+}
 
 /* ── Btn small ───────────────────────────────────────────────────── */
-.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 6px; }
+.btn-sm {
+  padding: 5px 12px;
+  font-size: 12px;
+  border-radius: 6px;
+}
 
 /* ── Security dashboard ──────────────────────────────────────────── */
 .security-dashboard {
-  flex: 1; overflow-y: auto;
+  flex: 1;
+  overflow-y: auto;
   padding: 24px;
   display: flex;
   flex-direction: column;
@@ -454,8 +1058,10 @@ ul { list-style: none; }
 }
 
 .sec-notice {
-  text-align: center; color: var(--color-text-muted);
-  padding: 40px 0; font-size: 15px;
+  text-align: center;
+  color: var(--color-text-muted);
+  padding: 40px 0;
+  font-size: 15px;
 }
 
 .security-summary {
@@ -469,17 +1075,40 @@ ul { list-style: none; }
   flex-wrap: wrap;
 }
 
-.sec-score-card { text-align: center; flex-shrink: 0; }
-.sec-score {
-  font-size: 56px; font-weight: 700; line-height: 1;
+.sec-score-card {
+  text-align: center;
+  flex-shrink: 0;
+}
+.sec-score {
+  font-size: 56px;
+  font-weight: 700;
+  line-height: 1;
+}
+.sec-score.score-good {
+  color: #2e7d32;
+}
+.sec-score.score-fair {
+  color: #e65100;
+}
+.sec-score.score-poor {
+  color: #c62828;
+}
+.sec-score-label {
+  font-size: 16px;
+  font-weight: 600;
+  margin-top: 4px;
+}
+.sec-score-desc {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  margin-top: 2px;
 }
-.sec-score.score-good  { color: #2e7d32; }
-.sec-score.score-fair  { color: #e65100; }
-.sec-score.score-poor  { color: #c62828; }
-.sec-score-label { font-size: 16px; font-weight: 600; margin-top: 4px; }
-.sec-score-desc  { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
 
-.sec-stats { display: flex; gap: 16px; flex-wrap: wrap; }
+.sec-stats {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
 .sec-stat {
   text-align: center;
   background: var(--color-bg);
@@ -488,11 +1117,29 @@ ul { list-style: none; }
   padding: 12px 20px;
   min-width: 80px;
 }
-.sec-stat-warn { border-color: #ffb74d; background: #fff8e1; }
-.sec-stat-info { border-color: #90caf9; background: #e3f2fd; }
-.sec-stat-ok   { border-color: #a5d6a7; background: #e8f5e9; }
-.sec-stat-num   { display: block; font-size: 28px; font-weight: 700; }
-.sec-stat-label { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
+.sec-stat-warn {
+  border-color: #ffb74d;
+  background: #fff8e1;
+}
+.sec-stat-info {
+  border-color: #90caf9;
+  background: #e3f2fd;
+}
+.sec-stat-ok {
+  border-color: #a5d6a7;
+  background: #e8f5e9;
+}
+.sec-stat-num {
+  display: block;
+  font-size: 28px;
+  font-weight: 700;
+}
+.sec-stat-label {
+  display: block;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  margin-top: 2px;
+}
 
 .sec-section {
   background: var(--color-surface);
@@ -501,74 +1148,260 @@ ul { list-style: none; }
   overflow: hidden;
 }
 .sec-section-header {
-  display: flex; align-items: flex-start; gap: 12px;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
   padding: 16px 20px;
   border-bottom: 1px solid var(--color-border);
   background: var(--color-bg);
 }
-.sec-section-icon { font-size: 20px; flex-shrink: 0; }
-.sec-section-title { font-weight: 600; font-size: 15px; }
-.sec-section-desc { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
+.sec-section-icon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+.sec-section-title {
+  font-weight: 600;
+  font-size: 15px;
+}
+.sec-section-desc {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  margin-top: 2px;
+}
 
-.sec-item-list { padding: 0; }
+.sec-item-list {
+  padding: 0;
+}
 .sec-item {
-  display: flex; align-items: center; gap: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
   padding: 10px 20px;
   border-bottom: 1px solid var(--color-border);
 }
-.sec-item:last-child { border-bottom: none; }
-.sec-item-name { font-weight: 500; flex: 1; }
-.sec-item-sub  { font-size: 12px; color: var(--color-text-muted); flex: 1; }
+.sec-item:last-child {
+  border-bottom: none;
+}
+.sec-item-name {
+  font-weight: 500;
+  flex: 1;
+}
+.sec-item-sub {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  flex: 1;
+}
 
 /* ── Item Detail Modal ───────────────────────────────────────────── */
-.modal-detail { max-height: 80vh; display: flex; flex-direction: column; }
-.detail-body { flex: 1; overflow-y: auto; padding: 4px 0; }
-.detail-field { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
-.detail-field:last-child { border-bottom: none; }
-.detail-label { font-size: 12px; color: var(--color-text-muted); width: 140px; flex-shrink: 0; padding-top: 4px; }
-.detail-val-row { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; }
-.detail-val { font-size: 14px; word-break: break-all; }
-.detail-sensitive { display: inline-flex; align-items: center; font-family: monospace; font-size: 14px; }
-.detail-masked { letter-spacing: 2px; }
-.detail-actual { word-break: break-all; }
-.btn-reveal, .btn-copy-field { background: none; border: none; cursor: pointer; padding: 2px 4px; font-size: 14px; color: var(--color-text-muted); flex-shrink: 0; }
-.btn-reveal:hover, .btn-copy-field:hover { color: var(--color-primary); }
+.modal-detail {
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+.detail-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+.detail-field {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+.detail-field:last-child {
+  border-bottom: none;
+}
+.detail-label {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  width: 140px;
+  flex-shrink: 0;
+  padding-top: 4px;
+}
+.detail-val-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  flex-wrap: wrap;
+}
+.detail-val {
+  font-size: 14px;
+  word-break: break-all;
+}
+.detail-sensitive {
+  display: inline-flex;
+  align-items: center;
+  font-family: monospace;
+  font-size: 14px;
+}
+.detail-masked {
+  letter-spacing: 2px;
+}
+.detail-actual {
+  word-break: break-all;
+}
+.btn-reveal,
+.btn-copy-field {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px 4px;
+  font-size: 14px;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+.btn-reveal:hover,
+.btn-copy-field:hover {
+  color: var(--color-primary);
+}
 
 /* ── Emergency Vault Panel ───────────────────────────────────────── */
-.em-vault-panel { padding: 8px 0; }
-.em-vault-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 16px; border-bottom: 2px solid var(--color-border); margin-bottom: 8px; }
-.em-vault-header h4 { margin: 0; font-size: 15px; font-weight: 600; }
-.em-vault-list { list-style: none; padding: 0; margin: 0; }
-.em-vault-item { border-bottom: 1px solid var(--color-border); }
-.em-vault-item:last-child { border-bottom: none; }
-.em-vault-item-header { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 12px 4px; cursor: pointer; text-align: left; }
-.em-vault-item-header:hover { background: var(--color-sidebar-hover); border-radius: var(--radius); }
-.em-vault-icon { font-size: 18px; flex-shrink: 0; }
-.em-vault-name { font-weight: 500; flex: 1; }
-.em-vault-type { font-size: 12px; color: var(--color-text-muted); }
-.em-vault-chevron { font-size: 12px; color: var(--color-text-muted); flex-shrink: 0; }
-.em-vault-item-body { padding: 0 8px 12px 36px; }
-.em-detail-body .detail-field { padding: 8px 0; }
+.em-vault-panel {
+  padding: 8px 0;
+}
+.em-vault-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 0 16px;
+  border-bottom: 2px solid var(--color-border);
+  margin-bottom: 8px;
+}
+.em-vault-header h4 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+.em-vault-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.em-vault-item {
+  border-bottom: 1px solid var(--color-border);
+}
+.em-vault-item:last-child {
+  border-bottom: none;
+}
+.em-vault-item-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 12px 4px;
+  cursor: pointer;
+  text-align: left;
+}
+.em-vault-item-header:hover {
+  background: var(--color-sidebar-hover);
+  border-radius: var(--radius);
+}
+.em-vault-icon {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+.em-vault-name {
+  font-weight: 500;
+  flex: 1;
+}
+.em-vault-type {
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+.em-vault-chevron {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+.em-vault-item-body {
+  padding: 0 8px 12px 36px;
+}
+.em-detail-body .detail-field {
+  padding: 8px 0;
+}
 
 /* ── Responsive ──────────────────────────────────────────────────── */
 @media (max-width: 640px) {
-  .sidebar { width: 60px; }
+  .sidebar {
+    width: 56px;
+    overflow-y: visible;
+  }
   .sidebar-header .logo-text,
   .sidebar-label,
-  .sidebar-section-header { display: none; }
-  .sidebar-item { justify-content: center; padding: 12px 0; }
-  .vault-header { padding: 12px 16px; }
-  .vault-list { padding: 8px 16px 16px; }
-  .sort-wrapper { display: none; }
-  .form-row { flex-direction: column; gap: 0; }
+  .sidebar-section-header {
+    opacity: 0;
+    width: 0;
+  }
+  .sidebar-item {
+    justify-content: center;
+    padding: 12px 0;
+  }
+  .vault-header {
+    padding: 12px 16px;
+  }
+  .vault-list {
+    padding: 8px 16px 16px;
+  }
+  .sort-wrapper {
+    display: none;
+  }
+  .form-row {
+    flex-direction: column;
+    gap: 0;
+  }
 }
 
 /* ── Settings — new sections (Phase 6) ──────────────────────────── */
-.settings-section-danger { border-top: 2px solid var(--color-danger, #e53e3e); margin-top: 8px; padding-top: 16px; }
-.settings-section-danger .settings-section-title { color: var(--color-danger, #e53e3e); }
-.btn-danger { background: var(--color-danger, #e53e3e); color: #fff; border: none; border-radius: var(--radius); padding: 8px 18px; font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity .15s; }
-.btn-danger:hover { opacity: .85; }
-.btn-danger:disabled { opacity: .5; cursor: not-allowed; }
-.recovery-code-box { display: flex; align-items: center; gap: 8px; background: var(--color-bg-secondary, #f7f7f7); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px 14px; margin: 8px 0; }
-.recovery-code-box code { font-family: monospace; font-size: 15px; letter-spacing: .08em; word-break: break-all; flex: 1; }
-.warning-text { color: var(--color-danger, #e53e3e); font-size: 13px; font-weight: 500; }
+.settings-section-danger {
+  border-top: 2px solid var(--color-danger, #e53e3e);
+  margin-top: 8px;
+  padding-top: 16px;
+}
+.settings-section-danger .settings-section-title {
+  color: var(--color-danger, #e53e3e);
+}
+.btn-danger {
+  background: var(--color-danger, #e53e3e);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius);
+  padding: 8px 18px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.btn-danger:hover {
+  opacity: 0.85;
+}
+.btn-danger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.recovery-code-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--color-bg-secondary, #f7f7f7);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 12px 14px;
+  margin: 8px 0;
+}
+.recovery-code-box code {
+  font-family: monospace;
+  font-size: 15px;
+  letter-spacing: 0.08em;
+  word-break: break-all;
+  flex: 1;
+}
+.warning-text {
+  color: var(--color-danger, #e53e3e);
+  font-size: 13px;
+  font-weight: 500;
+}
diff --git a/app/static/js/vault.js b/app/static/js/vault.js
index 03d57d9..3fc5a5d 100644
--- a/app/static/js/vault.js
+++ b/app/static/js/vault.js
@@ -8,33 +8,60 @@
 const Vault = (() => {
   let _items = [];
   let _folders = [];
-  let _currentView = 'vault';
+  let _currentView = "vault";
   let _activeFilter = null;
-  let _sortOrder = 'name-asc';
+  let _sortOrder = "name-asc";
 
   const FIELD_LABELS = {
-    url: 'Website URL', username: 'Username', password: 'Password', notes: 'Notes',
-    note_body: 'Note', cardholder_name: 'Cardholder Name', card_number: 'Card Number',
-    expiry_month: 'Expiry Month', expiry_year: 'Expiry Year', cvv: 'CVV',
-    bank_name: 'Bank Name', account_type: 'Account Type', routing_number: 'Routing Number',
-    account_number: 'Account Number', first_name: 'First Name', last_name: 'Last Name',
-    company: 'Company', address_line: 'Street Address', city: 'City', state: 'State',
-    zip: 'ZIP', country: 'Country', phone: 'Phone', email: 'Email',
-    ssn_number: 'Social Security Number',
+    url: "Website URL",
+    username: "Username",
+    password: "Password",
+    notes: "Notes",
+    note_body: "Note",
+    cardholder_name: "Cardholder Name",
+    card_number: "Card Number",
+    expiry_month: "Expiry Month",
+    expiry_year: "Expiry Year",
+    cvv: "CVV",
+    bank_name: "Bank Name",
+    account_type: "Account Type",
+    routing_number: "Routing Number",
+    account_number: "Account Number",
+    first_name: "First Name",
+    last_name: "Last Name",
+    company: "Company",
+    address_line: "Street Address",
+    city: "City",
+    state: "State",
+    zip: "ZIP",
+    country: "Country",
+    phone: "Phone",
+    email: "Email",
+    ssn_number: "Social Security Number",
   };
-  const SENSITIVE_FIELDS = new Set(['password', 'cvv', 'card_number', 'account_number', 'routing_number', 'ssn_number']);
+  const SENSITIVE_FIELDS = new Set([
+    "password",
+    "cvv",
+    "card_number",
+    "account_number",
+    "routing_number",
+    "ssn_number",
+  ]);
 
   // ── API helpers ───────────────────────────────────────────────────────────
 
   async function apiFetch(path, options = {}) {
-    let token = sessionStorage.getItem('access_token');
-    if (!token) { redirectToLogin(); return null; }
+    let token = sessionStorage.getItem("access_token");
+    if (!token) {
+      redirectToLogin();
+      return null;
+    }
 
     const defaults = {
       headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${token}`,
-        'X-CSRFToken': csrfToken(),
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+        "X-CSRFToken": csrfToken(),
       },
     };
     const merged = { ...defaults, ...options };
@@ -44,8 +71,12 @@ const Vault = (() => {
 
     if (res.status === 401) {
       const refreshed = await tryRefreshToken();
-      if (!refreshed) { redirectToLogin(); return null; }
-      merged.headers['Authorization'] = `Bearer ${sessionStorage.getItem('access_token')}`;
+      if (!refreshed) {
+        redirectToLogin();
+        return null;
+      }
+      merged.headers["Authorization"] =
+        `Bearer ${sessionStorage.getItem("access_token")}`;
       res = await fetch(path, merged);
     }
 
@@ -62,64 +93,85 @@ const Vault = (() => {
     // don't each fire a separate rotation (which would blacklist each other's tokens).
     if (_refreshPromise) return _refreshPromise;
     _refreshPromise = (async () => {
-      const refreshToken = localStorage.getItem('refresh_token');
+      const refreshToken = localStorage.getItem("refresh_token");
       if (!refreshToken) return false;
       try {
-        const res = await fetch('/api/auth/refresh', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken() },
+        const res = await fetch("/api/auth/refresh", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-CSRFToken": csrfToken(),
+          },
           body: JSON.stringify({ refresh_token: refreshToken }),
         });
         if (!res.ok) return false;
         const data = await res.json();
-        sessionStorage.setItem('access_token', data.access_token);
-        if (data.refresh_token) localStorage.setItem('refresh_token', data.refresh_token);
+        sessionStorage.setItem("access_token", data.access_token);
+        if (data.refresh_token)
+          localStorage.setItem("refresh_token", data.refresh_token);
         return true;
-      } catch { return false; }
-    })().finally(() => { _refreshPromise = null; });
+      } catch {
+        return false;
+      }
+    })().finally(() => {
+      _refreshPromise = null;
+    });
     return _refreshPromise;
   }
 
   function csrfToken() {
-    return document.querySelector('meta[name="csrf-token"]')?.content || '';
+    return document.querySelector('meta[name="csrf-token"]')?.content || "";
   }
 
   function redirectToLogin() {
     VaultSession.clear();
     SharingSession.clear();
-    sessionStorage.removeItem('access_token');
-    window.dispatchEvent(new CustomEvent('passkeeper:logout'));
-    window.location.href = '/login';
+    sessionStorage.removeItem("access_token");
+    window.dispatchEvent(new CustomEvent("passkeeper:logout"));
+    window.location.href = "/login";
   }
 
   // ── Load ──────────────────────────────────────────────────────────────────
 
   async function loadVault() {
     const vaultKey = VaultSession.getKey();
-    if (!vaultKey) { showUnlockOverlay(); return; }
+    if (!vaultKey) {
+      showUnlockOverlay();
+      return;
+    }
     showLoadingState(true);
     try {
       const [itemsRes, foldersRes] = await Promise.all([
-        apiFetch('/api/vault'), apiFetch('/api/folders'),
+        apiFetch("/api/vault"),
+        apiFetch("/api/folders"),
       ]);
-      if (!itemsRes || !foldersRes) { showUnlockOverlay(); return; }
+      if (!itemsRes || !foldersRes) {
+        showUnlockOverlay();
+        return;
+      }
 
       const rawItems = await itemsRes.json();
       _folders = await foldersRes.json();
 
-      _items = await Promise.all(rawItems.map(async item => {
-        try {
-          const plain = await Crypto.decryptItem(vaultKey, item.enc_data, item.iv);
-          return { ...item, plain };
-        } catch {
-          return { ...item, plain: null, decryptError: true };
-        }
-      }));
+      _items = await Promise.all(
+        rawItems.map(async (item) => {
+          try {
+            const plain = await Crypto.decryptItem(
+              vaultKey,
+              item.enc_data,
+              item.iv,
+            );
+            return { ...item, plain };
+          } catch {
+            return { ...item, plain: null, decryptError: true };
+          }
+        }),
+      );
 
       renderFolderList();
       applyCurrentFilter();
     } catch (err) {
-      showToast('Failed to load vault: ' + err.message, 'error');
+      showToast("Failed to load vault: " + err.message, "error");
     } finally {
       showLoadingState(false);
     }
@@ -127,12 +179,12 @@ const Vault = (() => {
 
   async function loadFolders() {
     try {
-      const res = await apiFetch('/api/folders');
+      const res = await apiFetch("/api/folders");
       if (!res) return;
       _folders = await res.json();
       renderFolderList();
     } catch (err) {
-      showToast('Could not refresh folders: ' + err.message, 'error');
+      showToast("Could not refresh folders: " + err.message, "error");
     }
   }
 
@@ -140,43 +192,53 @@ const Vault = (() => {
 
   function switchView(view) {
     _currentView = view;
-    ['vault', 'security', 'sharing', 'emergency'].forEach(v => {
-      document.getElementById(`view-${v}`)?.classList.toggle('hidden', v !== view);
+    ["vault", "security", "sharing", "emergency"].forEach((v) => {
+      document
+        .getElementById(`view-${v}`)
+        ?.classList.toggle("hidden", v !== view);
     });
-    document.querySelectorAll('.sidebar-item[data-view]').forEach(el => {
-      el.classList.toggle('active', el.dataset.view === view);
+    document.querySelectorAll(".sidebar-item[data-view]").forEach((el) => {
+      el.classList.toggle("active", el.dataset.view === view);
     });
-    if (view !== 'vault') {
-      document.querySelectorAll('.sidebar-item[data-type-filter], .sidebar-item[data-folder-id]')
-        .forEach(el => el.classList.remove('active'));
+    if (view !== "vault") {
+      document
+        .querySelectorAll(
+          ".sidebar-item[data-type-filter], .sidebar-item[data-folder-id]",
+        )
+        .forEach((el) => el.classList.remove("active"));
     }
 
-    if (view === 'security') renderSecurityDashboard();
-    if (view === 'sharing') loadSharingView();
-    if (view === 'emergency') loadEmergencyView();
+    if (view === "security") renderSecurityDashboard();
+    if (view === "sharing") loadSharingView();
+    if (view === "emergency") loadEmergencyView();
   }
 
   // ── Vault render ──────────────────────────────────────────────────────────
 
   function renderFolderList() {
-    const ul = document.getElementById('sidebar-folders');
+    const ul = document.getElementById("sidebar-folders");
     if (!ul) return;
-    ul.innerHTML = '';
-    _folders.forEach(folder => {
-      const li = document.createElement('li');
-      li.className = 'sidebar-item folder-item';
+    ul.innerHTML = "";
+    _folders.forEach((folder) => {
+      const li = document.createElement("li");
+      li.className = "sidebar-item folder-item";
       li.dataset.folderId = folder.id;
 
-      const label = document.createElement('span');
-      label.className = 'folder-label';
+      const label = document.createElement("span");
+      label.className = "folder-label";
       label.innerHTML = `<span class="sidebar-icon">📁</span> <span class="sidebar-label">${escHtml(folder.name)}</span>`;
-      label.addEventListener('click', () => filterByFolder(folder.id, folder.name));
+      label.addEventListener("click", () =>
+        filterByFolder(folder.id, folder.name),
+      );
 
-      const delBtn = document.createElement('button');
-      delBtn.className = 'btn-delete-folder';
-      delBtn.title = 'Delete folder';
-      delBtn.textContent = '🗑';
-      delBtn.addEventListener('click', e => { e.stopPropagation(); confirmDeleteFolder(folder); });
+      const delBtn = document.createElement("button");
+      delBtn.className = "btn-delete-folder";
+      delBtn.title = "Delete folder";
+      delBtn.textContent = "🗑";
+      delBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        confirmDeleteFolder(folder);
+      });
 
       li.appendChild(label);
       li.appendChild(delBtn);
@@ -187,75 +249,124 @@ const Vault = (() => {
   function getSortedItems(items) {
     const sorted = [...items];
     switch (_sortOrder) {
-      case 'name-asc': sorted.sort((a, b) => a.name.localeCompare(b.name)); break;
-      case 'name-desc': sorted.sort((a, b) => b.name.localeCompare(a.name)); break;
-      case 'date-desc': sorted.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); break;
-      case 'date-asc': sorted.sort((a, b) => new Date(a.created_at) - new Date(b.created_at)); break;
-      case 'folder': sorted.sort((a, b) => folderName(a.folder_id).localeCompare(folderName(b.folder_id)) || a.name.localeCompare(b.name)); break;
+      case "name-asc":
+        sorted.sort((a, b) => a.name.localeCompare(b.name));
+        break;
+      case "name-desc":
+        sorted.sort((a, b) => b.name.localeCompare(a.name));
+        break;
+      case "date-desc":
+        sorted.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+        break;
+      case "date-asc":
+        sorted.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+        break;
+      case "folder":
+        sorted.sort(
+          (a, b) =>
+            folderName(a.folder_id).localeCompare(folderName(b.folder_id)) ||
+            a.name.localeCompare(b.name),
+        );
+        break;
     }
     return sorted;
   }
 
   function folderName(id) {
-    if (!id) return '(No folder)';
-    return _folders.find(f => f.id === id)?.name || 'Unknown';
+    if (!id) return "(No folder)";
+    return _folders.find((f) => f.id === id)?.name || "Unknown";
   }
 
   function renderItemList(items) {
-    const list = document.getElementById('vault-list');
+    const list = document.getElementById("vault-list");
     if (!list) return;
-    list.innerHTML = '';
+    list.innerHTML = "";
     if (items.length === 0) {
-      list.innerHTML = '<li class="vault-empty">No items found. Click + to add one.</li>';
+      list.innerHTML =
+        '<li class="vault-empty">No items found. Click + to add one.</li>';
       return;
     }
 
     const sorted = getSortedItems(items);
     const groups = {};
-    sorted.forEach(item => {
+    sorted.forEach((item) => {
       const key = folderName(item.folder_id);
       if (!groups[key]) groups[key] = [];
       groups[key].push(item);
     });
 
-    const keys = _sortOrder === 'folder'
-      ? Object.keys(groups).sort()
-      : ['(No folder)', ..._folders.map(f => f.name)].filter(k => groups[k]);
-    Object.keys(groups).forEach(k => { if (!keys.includes(k)) keys.push(k); });
+    const keys =
+      _sortOrder === "folder"
+        ? Object.keys(groups).sort()
+        : ["(No folder)", ..._folders.map((f) => f.name)].filter(
+            (k) => groups[k],
+          );
+    Object.keys(groups).forEach((k) => {
+      if (!keys.includes(k)) keys.push(k);
+    });
 
-    keys.forEach(groupName => {
+    keys.forEach((groupName) => {
       if (!groups[groupName]) return;
-      const header = document.createElement('li');
-      header.className = 'vault-group-header';
+      const header = document.createElement("li");
+      header.className = "vault-group-header";
       header.textContent = groupName;
       list.appendChild(header);
-      groups[groupName].forEach(item => list.appendChild(createItemElement(item)));
+      groups[groupName].forEach((item) =>
+        list.appendChild(createItemElement(item)),
+      );
     });
   }
 
   function createItemElement(item) {
-    const li = document.createElement('li');
-    li.className = 'vault-item';
+    const li = document.createElement("li");
+    li.className = "vault-item";
     li.dataset.id = item.id;
 
-    const iconMap = { password: '🔑', note: '📝', card: '💳', bank: '🏦', address: '🏠', ssn: '🪪', passkey: '🔐' };
-    const icon = iconMap[item.item_type] || '🔑';
+    const iconMap = {
+      password: "🔑",
+      note: "📝",
+      card: "💳",
+      bank: "🏦",
+      address: "🏠",
+      ssn: "🪪",
+      passkey: "🔐",
+    };
+    const icon = iconMap[item.item_type] || "🔑";
 
-    let subText = '';
+    let subText = "";
     if (item.plain) {
       switch (item.item_type) {
-        case 'password': subText = item.plain.username || item.plain.url || ''; break;
-        case 'note': subText = (item.plain.note_body || '').slice(0, 60); break;
-        case 'card': subText = item.plain.card_number ? '•••• ' + String(item.plain.card_number).replace(/\s/g, '').slice(-4) : ''; break;
-        case 'bank': subText = item.plain.bank_name || ''; break;
-        case 'address': subText = [item.plain.first_name, item.plain.last_name].filter(Boolean).join(' '); break;
-        case 'ssn': subText = '•••-••-••••'; break;
+        case "password":
+          subText = item.plain.username || item.plain.url || "";
+          break;
+        case "note":
+          subText = (item.plain.note_body || "").slice(0, 60);
+          break;
+        case "card":
+          subText = item.plain.card_number
+            ? "•••• " +
+              String(item.plain.card_number).replace(/\s/g, "").slice(-4)
+            : "";
+          break;
+        case "bank":
+          subText = item.plain.bank_name || "";
+          break;
+        case "address":
+          subText = [item.plain.first_name, item.plain.last_name]
+            .filter(Boolean)
+            .join(" ");
+          break;
+        case "ssn":
+          subText = "•••-••-••••";
+          break;
       }
     }
 
-    const showCopyUser = item.item_type === 'password';
-    const showCopyPass = ['password', 'card', 'bank', 'ssn'].includes(item.item_type);
-    const showLaunch = item.item_type === 'password' && item.plain?.url;
+    const showCopyUser = item.item_type === "password";
+    const showCopyPass = ["password", "card", "bank", "ssn"].includes(
+      item.item_type,
+    );
+    const showLaunch = item.item_type === "password" && item.plain?.url;
 
     li.innerHTML = `
       <div class="item-icon">${icon}</div>
@@ -264,394 +375,535 @@ const Vault = (() => {
         <span class="item-sub">${escHtml(subText)}</span>
       </div>
       <div class="item-actions">
-        ${showLaunch ? `<button class="btn-icon" title="Open URL" data-action="launch">🌐</button>` : ''}
-        ${showCopyUser ? `<button class="btn-icon" title="Copy username" data-action="copy-user">👤</button>` : ''}
-        ${showCopyPass ? `<button class="btn-icon" title="Copy secret" data-action="copy-pass">📋</button>` : ''}
+        ${showLaunch ? `<button class="btn-icon" title="Open URL" data-action="launch">🌐</button>` : ""}
+        ${showCopyUser ? `<button class="btn-icon" title="Copy username" data-action="copy-user">👤</button>` : ""}
+        ${showCopyPass ? `<button class="btn-icon" title="Copy secret" data-action="copy-pass">📋</button>` : ""}
         <button class="btn-icon" title="Edit" data-action="edit">✏️</button>
         <button class="btn-icon" title="Delete" data-action="delete">🗑️</button>
       </div>`;
 
     if (showLaunch) {
-      li.querySelector('[data-action="launch"]').addEventListener('click', e => {
-        e.stopPropagation();
-        let url = item.plain?.url || '';
-        if (url && !/^https?:\/\//i.test(url)) url = 'https://' + url;
-        window.open(url, '_blank', 'noopener,noreferrer');
-      });
+      li.querySelector('[data-action="launch"]').addEventListener(
+        "click",
+        (e) => {
+          e.stopPropagation();
+          let url = item.plain?.url || "";
+          if (url && !/^https?:\/\//i.test(url)) url = "https://" + url;
+          window.open(url, "_blank", "noopener,noreferrer");
+        },
+      );
     }
     if (showCopyUser) {
-      li.querySelector('[data-action="copy-user"]').addEventListener('click', e => {
-        e.stopPropagation(); copyToClipboard(item.plain?.username || '', 'Username copied');
-      });
+      li.querySelector('[data-action="copy-user"]').addEventListener(
+        "click",
+        (e) => {
+          e.stopPropagation();
+          copyToClipboard(item.plain?.username || "", "Username copied");
+        },
+      );
     }
     if (showCopyPass) {
-      li.querySelector('[data-action="copy-pass"]').addEventListener('click', e => {
-        e.stopPropagation();
-        const s = item.item_type === 'password' ? item.plain?.password
-          : item.item_type === 'card' ? item.plain?.cvv
-            : item.item_type === 'bank' ? item.plain?.account_number
-              : item.plain?.ssn_number;
-        copyToClipboard(s || '', 'Copied to clipboard');
-      });
+      li.querySelector('[data-action="copy-pass"]').addEventListener(
+        "click",
+        (e) => {
+          e.stopPropagation();
+          const s =
+            item.item_type === "password"
+              ? item.plain?.password
+              : item.item_type === "card"
+                ? item.plain?.cvv
+                : item.item_type === "bank"
+                  ? item.plain?.account_number
+                  : item.plain?.ssn_number;
+          copyToClipboard(s || "", "Copied to clipboard");
+        },
+      );
     }
-    li.querySelector('[data-action="edit"]').addEventListener('click', e => { e.stopPropagation(); openModal('edit', item); });
-    li.querySelector('[data-action="delete"]').addEventListener('click', e => { e.stopPropagation(); confirmDeleteItem(item); });
-    li.addEventListener('click', () => openModal('edit', item));
+    li.querySelector('[data-action="edit"]').addEventListener("click", (e) => {
+      e.stopPropagation();
+      openModal("edit", item);
+    });
+    li.querySelector('[data-action="delete"]').addEventListener(
+      "click",
+      (e) => {
+        e.stopPropagation();
+        confirmDeleteItem(item);
+      },
+    );
+    li.addEventListener("click", () => openModal("edit", item));
     return li;
   }
 
   // ── Security Dashboard ────────────────────────────────────────────────────
 
   function renderSecurityDashboard() {
-    const summaryEl = document.getElementById('security-summary');
-    const sectionsEl = document.getElementById('security-sections');
+    const summaryEl = document.getElementById("security-summary");
+    const sectionsEl = document.getElementById("security-sections");
     if (!summaryEl || !sectionsEl) return;
 
     // If vault hasn't loaded yet, wait for it then re-render
     if (!_items.length && VaultSession.getKey()) {
       summaryEl.innerHTML = '<div class="sec-notice">Loading…</div>';
-      sectionsEl.innerHTML = '';
+      sectionsEl.innerHTML = "";
       loadVault().then(() => renderSecurityDashboard());
       return;
     }
 
-    const pwItems = _items.filter(i => i.item_type === 'password' && i.plain?.password);
+    const pwItems = _items.filter(
+      (i) => i.item_type === "password" && i.plain?.password,
+    );
     if (!pwItems.length) {
-      summaryEl.innerHTML = '<div class="sec-notice">No passwords to analyze.</div>';
-      sectionsEl.innerHTML = '';
+      summaryEl.innerHTML =
+        '<div class="sec-notice">No passwords to analyze.</div>';
+      sectionsEl.innerHTML = "";
       return;
     }
 
-    const weak = pwItems.filter(i => {
+    const weak = pwItems.filter((i) => {
       const p = i.plain.password;
       if (p.length < 10) return true;
-      return [/[A-Z]/, /[a-z]/, /[0-9]/, /[^A-Za-z0-9]/].filter(r => r.test(p)).length < 2;
+      return (
+        [/[A-Z]/, /[a-z]/, /[0-9]/, /[^A-Za-z0-9]/].filter((r) => r.test(p))
+          .length < 2
+      );
     });
 
     const passCounts = {};
-    pwItems.forEach(i => { const p = i.plain.password; (passCounts[p] = passCounts[p] || []).push(i); });
-    const reused = Object.values(passCounts).filter(a => a.length > 1).flat();
+    pwItems.forEach((i) => {
+      const p = i.plain.password;
+      (passCounts[p] = passCounts[p] || []).push(i);
+    });
+    const reused = Object.values(passCounts)
+      .filter((a) => a.length > 1)
+      .flat();
 
     const cutoff = Date.now() - 180 * 86400000;
-    const old = pwItems.filter(i => new Date(i.created_at).getTime() < cutoff);
+    const old = pwItems.filter(
+      (i) => new Date(i.created_at).getTime() < cutoff,
+    );
 
     const total = pwItems.length;
-    const score = Math.max(0, Math.round(100 - (weak.length / total) * 40 - (reused.length / total) * 30 - (old.length / total) * 15));
-    const cls = score >= 80 ? 'score-good' : score >= 50 ? 'score-fair' : 'score-poor';
-    const label = score >= 80 ? 'Good' : score >= 50 ? 'Fair' : 'Needs attention';
+    const score = Math.max(
+      0,
+      Math.round(
+        100 -
+          (weak.length / total) * 40 -
+          (reused.length / total) * 30 -
+          (old.length / total) * 15,
+      ),
+    );
+    const cls =
+      score >= 80 ? "score-good" : score >= 50 ? "score-fair" : "score-poor";
+    const label =
+      score >= 80 ? "Good" : score >= 50 ? "Fair" : "Needs attention";
 
     summaryEl.innerHTML = `
       <div class="sec-score-card">
         <div class="sec-score ${cls}">${score}</div>
         <div class="sec-score-label">${label}</div>
-        <div class="sec-score-desc">Based on ${total} password${total !== 1 ? 's' : ''}</div>
+        <div class="sec-score-desc">Based on ${total} password${total !== 1 ? "s" : ""}</div>
       </div>
       <div class="sec-stats">
-        <div class="sec-stat ${weak.length ? 'sec-stat-warn' : 'sec-stat-ok'}"><span class="sec-stat-num">${weak.length}</span><span class="sec-stat-label">Weak</span></div>
-        <div class="sec-stat ${reused.length ? 'sec-stat-warn' : 'sec-stat-ok'}"><span class="sec-stat-num">${reused.length}</span><span class="sec-stat-label">Reused</span></div>
-        <div class="sec-stat ${old.length ? 'sec-stat-info' : 'sec-stat-ok'}"><span class="sec-stat-num">${old.length}</span><span class="sec-stat-label">Old (&gt;180d)</span></div>
+        <div class="sec-stat ${weak.length ? "sec-stat-warn" : "sec-stat-ok"}"><span class="sec-stat-num">${weak.length}</span><span class="sec-stat-label">Weak</span></div>
+        <div class="sec-stat ${reused.length ? "sec-stat-warn" : "sec-stat-ok"}"><span class="sec-stat-num">${reused.length}</span><span class="sec-stat-label">Reused</span></div>
+        <div class="sec-stat ${old.length ? "sec-stat-info" : "sec-stat-ok"}"><span class="sec-stat-num">${old.length}</span><span class="sec-stat-label">Old (&gt;180d)</span></div>
       </div>`;
 
-    sectionsEl.innerHTML = '';
+    sectionsEl.innerHTML = "";
     const makeSection = (title, icon, items, desc) => {
       if (!items.length) return;
-      const sec = document.createElement('div');
-      sec.className = 'sec-section';
+      const sec = document.createElement("div");
+      sec.className = "sec-section";
       sec.innerHTML = `
         <div class="sec-section-header"><span class="sec-section-icon">${icon}</span>
           <div><div class="sec-section-title">${title} (${items.length})</div><div class="sec-section-desc">${desc}</div></div>
         </div>
         <ul class="sec-item-list">
-          ${items.map(i => `<li class="sec-item">
+          ${items
+            .map(
+              (i) => `<li class="sec-item">
             <span class="sec-item-name">${escHtml(i.name)}</span>
-            <span class="sec-item-sub">${escHtml(i.plain?.username || '')}</span>
+            <span class="sec-item-sub">${escHtml(i.plain?.username || "")}</span>
             <button class="btn-secondary btn-sm" data-sec-edit="${i.id}">Edit</button>
-          </li>`).join('')}
+          </li>`,
+            )
+            .join("")}
         </ul>`;
-      sec.querySelectorAll('[data-sec-edit]').forEach(btn => {
-        btn.addEventListener('click', () => {
-          const item = _items.find(it => it.id === parseInt(btn.dataset.secEdit));
-          if (item) { switchView('vault'); openModal('edit', item); }
+      sec.querySelectorAll("[data-sec-edit]").forEach((btn) => {
+        btn.addEventListener("click", () => {
+          const item = _items.find(
+            (it) => it.id === parseInt(btn.dataset.secEdit),
+          );
+          if (item) {
+            switchView("vault");
+            openModal("edit", item);
+          }
         });
       });
       sectionsEl.appendChild(sec);
     };
 
-    makeSection('Weak Passwords', '⚠️', weak, 'Short or low-complexity passwords.');
-    makeSection('Reused Passwords', '♻️', [...new Set(reused.map(i => i.id))].map(id => _items.find(i => i.id === id)).filter(Boolean), 'Same password used on multiple sites.');
-    makeSection('Old Passwords', '🕐', old, 'Not changed in over 180 days.');
+    makeSection(
+      "Weak Passwords",
+      "⚠️",
+      weak,
+      "Short or low-complexity passwords.",
+    );
+    makeSection(
+      "Reused Passwords",
+      "♻️",
+      [...new Set(reused.map((i) => i.id))]
+        .map((id) => _items.find((i) => i.id === id))
+        .filter(Boolean),
+      "Same password used on multiple sites.",
+    );
+    makeSection("Old Passwords", "🕐", old, "Not changed in over 180 days.");
   }
 
   // ── Sharing View ──────────────────────────────────────────────────────────
 
   async function loadSharingView() {
     try {
-      const keysRes = await apiFetch('/api/sharing/keys');
+      const keysRes = await apiFetch("/api/sharing/keys");
       if (!keysRes) return;
       const keysData = await keysRes.json();
 
-      const notice = document.getElementById('sharing-keys-notice');
+      const notice = document.getElementById("sharing-keys-notice");
       if (!keysData.keys_setup) {
-        notice.classList.remove('hidden');
+        notice.classList.remove("hidden");
       } else {
-        notice.classList.add('hidden');
+        notice.classList.add("hidden");
         // Load sharing private key into SharingSession if vault key available
         const vaultKey = VaultSession.getKey();
         if (vaultKey && !SharingSession.isReady()) {
           try {
             const privKey = await SharingCrypto.decryptPrivateKey(
-              vaultKey, keysData.private_key_enc, keysData.private_key_iv
+              vaultKey,
+              keysData.private_key_enc,
+              keysData.private_key_iv,
             );
             SharingSession.setKey(privKey);
           } catch (err) {
-            console.warn('[PassKeeper] Could not load sharing private key:', err);
+            console.warn(
+              "[PassKeeper] Could not load sharing private key:",
+              err,
+            );
           }
         }
       }
 
       await Promise.all([loadSharedOut(), loadSharedIn()]);
     } catch (err) {
-      showToast('Could not load sharing data: ' + err.message, 'error');
+      showToast("Could not load sharing data: " + err.message, "error");
     }
   }
 
   async function loadSharedOut() {
     try {
-      const res = await apiFetch('/api/sharing');
+      const res = await apiFetch("/api/sharing");
       if (!res) return;
       const shares = await res.json();
       renderSharedOut(shares);
     } catch (err) {
-      console.error('loadSharedOut:', err);
+      console.error("loadSharedOut:", err);
     }
   }
 
   async function loadSharedIn() {
     try {
-      const res = await apiFetch('/api/sharing/inbox');
+      const res = await apiFetch("/api/sharing/inbox");
       if (!res) return;
       const shares = await res.json();
       renderSharedIn(shares);
     } catch (err) {
-      console.error('loadSharedIn:', err);
+      console.error("loadSharedIn:", err);
     }
   }
 
   function renderSharedOut(shares) {
-    const ul = document.getElementById('shared-out-list');
+    const ul = document.getElementById("shared-out-list");
     if (!ul) return;
     if (!shares.length) {
-      ul.innerHTML = '<li class="vault-empty">You haven\'t shared any items yet.</li>';
+      ul.innerHTML =
+        '<li class="vault-empty">You haven\'t shared any items yet.</li>';
       return;
     }
-    ul.innerHTML = shares.map(s => `
+    ul.innerHTML = shares
+      .map(
+        (s) => `
       <li class="share-item">
         <div class="share-icon">${itemIcon(s.item_type)}</div>
         <div class="share-info">
           <span class="share-name">${escHtml(s.item_name)}</span>
-          <span class="share-meta">Shared with ${escHtml(s.recipient_email)} · ${s.accepted ? '✅ Accepted' : '⏳ Pending'}</span>
+          <span class="share-meta">Shared with ${escHtml(s.recipient_email)} · ${s.accepted ? "✅ Accepted" : "⏳ Pending"}</span>
         </div>
         <button class="btn-icon" title="Revoke share" data-revoke="${s.id}">🗑️</button>
-      </li>`).join('');
+      </li>`,
+      )
+      .join("");
 
-    ul.querySelectorAll('[data-revoke]').forEach(btn => {
-      btn.addEventListener('click', async () => {
-        if (!confirm('Remove this share?')) return;
+    ul.querySelectorAll("[data-revoke]").forEach((btn) => {
+      btn.addEventListener("click", async () => {
+        if (!confirm("Remove this share?")) return;
         try {
-          await apiFetch(`/api/sharing/${btn.dataset.revoke}`, { method: 'DELETE' });
-          showToast('Share removed');
+          await apiFetch(`/api/sharing/${btn.dataset.revoke}`, {
+            method: "DELETE",
+          });
+          showToast("Share removed");
           loadSharedOut();
-        } catch (err) { showToast(err.message, 'error'); }
+        } catch (err) {
+          showToast(err.message, "error");
+        }
       });
     });
   }
 
   function renderSharedIn(shares) {
-    const ul = document.getElementById('shared-in-list');
+    const ul = document.getElementById("shared-in-list");
     if (!ul) return;
     if (!shares.length) {
-      ul.innerHTML = '<li class="vault-empty">No items have been shared with you.</li>';
+      ul.innerHTML =
+        '<li class="vault-empty">No items have been shared with you.</li>';
       return;
     }
-    ul.innerHTML = shares.map(s => `
+    ul.innerHTML = shares
+      .map(
+        (s) => `
       <li class="share-item">
         <div class="share-icon">${itemIcon(s.item_type)}</div>
         <div class="share-info">
           <span class="share-name">${escHtml(s.item_name)}</span>
           <span class="share-meta">From ${escHtml(s.owner_email)}</span>
         </div>
-        ${!s.accepted
-        ? `<button class="btn-primary btn-sm" data-accept="${s.id}">Accept</button>`
-        : `<button class="btn-secondary btn-sm" data-view-share="${s.id}" data-owner-key="${escHtml(s.owner_public_key || '')}" data-enc="${escHtml(s.enc_data)}" data-iv="${escHtml(s.iv)}" data-name="${escHtml(s.item_name)}" data-type="${escHtml(s.item_type || '')}">View</button>`
-      }
-      </li>`).join('');
+        ${
+          !s.accepted
+            ? `<button class="btn-primary btn-sm" data-accept="${s.id}">Accept</button>`
+            : `<button class="btn-secondary btn-sm" data-view-share="${s.id}" data-owner-key="${escHtml(s.owner_public_key || "")}" data-enc="${escHtml(s.enc_data)}" data-iv="${escHtml(s.iv)}" data-name="${escHtml(s.item_name)}" data-type="${escHtml(s.item_type || "")}">View</button>`
+        }
+      </li>`,
+      )
+      .join("");
 
-    ul.querySelectorAll('[data-accept]').forEach(btn => {
-      btn.addEventListener('click', async () => {
+    ul.querySelectorAll("[data-accept]").forEach((btn) => {
+      btn.addEventListener("click", async () => {
         try {
-          await apiFetch(`/api/sharing/inbox/${btn.dataset.accept}/accept`, { method: 'POST' });
-          showToast('Share accepted');
+          await apiFetch(`/api/sharing/inbox/${btn.dataset.accept}/accept`, {
+            method: "POST",
+          });
+          showToast("Share accepted");
           loadSharedIn();
-        } catch (err) { showToast(err.message, 'error'); }
+        } catch (err) {
+          showToast(err.message, "error");
+        }
       });
     });
 
-    ul.querySelectorAll('[data-view-share]').forEach(btn => {
-      btn.addEventListener('click', async () => {
-        if (!SharingSession.isReady()) { showToast('Sharing keys not loaded. Check Settings.', 'error'); return; }
+    ul.querySelectorAll("[data-view-share]").forEach((btn) => {
+      btn.addEventListener("click", async () => {
+        if (!SharingSession.isReady()) {
+          showToast("Sharing keys not loaded. Check Settings.", "error");
+          return;
+        }
         try {
-          const ownerPubKey = await SharingCrypto.importPublicKey(btn.dataset.ownerKey);
-          const sharedKey = await SharingCrypto.deriveSharedKey(SharingSession.getKey(), ownerPubKey);
-          const plain = await SharingCrypto.decryptShare(sharedKey, btn.dataset.enc, btn.dataset.iv);
+          const ownerPubKey = await SharingCrypto.importPublicKey(
+            btn.dataset.ownerKey,
+          );
+          const sharedKey = await SharingCrypto.deriveSharedKey(
+            SharingSession.getKey(),
+            ownerPubKey,
+          );
+          const plain = await SharingCrypto.decryptShare(
+            sharedKey,
+            btn.dataset.enc,
+            btn.dataset.iv,
+          );
           showSharedItemDetails(btn.dataset.name, btn.dataset.type, plain);
-        } catch (err) { showToast('Could not decrypt: ' + err.message, 'error'); }
+        } catch (err) {
+          showToast("Could not decrypt: " + err.message, "error");
+        }
       });
     });
   }
 
   function showSharedItemDetails(name, itemType, plain) {
-    document.getElementById('detail-modal-title').textContent = `${itemIcon(itemType || 'password')} ${name}`;
-    renderDetailFields(document.getElementById('detail-modal-body'), plain);
-    document.getElementById('detail-modal').classList.add('open');
+    document.getElementById("detail-modal-title").textContent =
+      `${itemIcon(itemType || "password")} ${name}`;
+    renderDetailFields(document.getElementById("detail-modal-body"), plain);
+    document.getElementById("detail-modal").classList.add("open");
   }
 
   function renderDetailFields(container, plain) {
-    container.innerHTML = Object.entries(plain)
-      .filter(([, v]) => v)
-      .map(([k, v]) => {
-        const label = FIELD_LABELS[k] || k.replace(/_/g, ' ');
-        const val = String(v);
-        const sensitive = SENSITIVE_FIELDS.has(k);
-        const valHtml = sensitive
-          ? `<span class="detail-sensitive">
+    container.innerHTML =
+      Object.entries(plain)
+        .filter(([, v]) => v)
+        .map(([k, v]) => {
+          const label = FIELD_LABELS[k] || k.replace(/_/g, " ");
+          const val = String(v);
+          const sensitive = SENSITIVE_FIELDS.has(k);
+          const valHtml = sensitive
+            ? `<span class="detail-sensitive">
                <span class="detail-masked">••••••••</span>
                <span class="detail-actual hidden">${escHtml(val)}</span>
              </span>
              <button type="button" class="btn-icon btn-reveal" title="Show/hide">👁</button>`
-          : `<span class="detail-val">${escHtml(val)}</span>`;
-        return `<div class="detail-field">
+            : `<span class="detail-val">${escHtml(val)}</span>`;
+          return `<div class="detail-field">
           <span class="detail-label">${escHtml(label)}</span>
           <div class="detail-val-row">
             ${valHtml}
             <button type="button" class="btn-icon btn-copy-field" data-copy="${escHtml(val)}" title="Copy">📋</button>
           </div>
         </div>`;
-      }).join('') || '<p class="vault-empty">No fields to display.</p>';
+        })
+        .join("") || '<p class="vault-empty">No fields to display.</p>';
 
-    container.querySelectorAll('.btn-reveal').forEach(btn => {
-      btn.addEventListener('click', () => {
+    container.querySelectorAll(".btn-reveal").forEach((btn) => {
+      btn.addEventListener("click", () => {
         const span = btn.previousElementSibling;
-        const revealed = span.dataset.revealed === 'true';
+        const revealed = span.dataset.revealed === "true";
         span.dataset.revealed = String(!revealed);
-        span.querySelector('.detail-masked').classList.toggle('hidden', !revealed);
-        span.querySelector('.detail-actual').classList.toggle('hidden', revealed);
+        span
+          .querySelector(".detail-masked")
+          .classList.toggle("hidden", !revealed);
+        span
+          .querySelector(".detail-actual")
+          .classList.toggle("hidden", revealed);
       });
     });
-    container.querySelectorAll('.btn-copy-field').forEach(btn => {
-      btn.addEventListener('click', () => {
-        navigator.clipboard.writeText(btn.dataset.copy).then(() => showToast('Copied!'));
+    container.querySelectorAll(".btn-copy-field").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        navigator.clipboard
+          .writeText(btn.dataset.copy)
+          .then(() => showToast("Copied!"));
       });
     });
   }
 
   async function handleShareFormSubmit(e) {
     e.preventDefault();
-    const errEl = document.getElementById('share-error');
-    errEl.classList.add('hidden');
+    const errEl = document.getElementById("share-error");
+    errEl.classList.add("hidden");
 
     if (!SharingSession.isReady()) {
-      showToast('Set up sharing keys first (Settings)', 'error');
+      showToast("Set up sharing keys first (Settings)", "error");
       return;
     }
 
-    const itemId = parseInt(document.getElementById('share-item-select').value);
-    const recipientEmail = document.getElementById('share-recipient-email').value.trim().toLowerCase();
+    const itemId = parseInt(document.getElementById("share-item-select").value);
+    const recipientEmail = document
+      .getElementById("share-recipient-email")
+      .value.trim()
+      .toLowerCase();
 
     if (!itemId || !recipientEmail) {
-      errEl.textContent = 'Please select an item and enter a recipient email.';
-      errEl.classList.remove('hidden');
+      errEl.textContent = "Please select an item and enter a recipient email.";
+      errEl.classList.remove("hidden");
       return;
     }
 
     try {
       // Fetch recipient's public key
-      const pkRes = await apiFetch(`/api/sharing/public-key?email=${encodeURIComponent(recipientEmail)}`);
+      const pkRes = await apiFetch(
+        `/api/sharing/public-key?email=${encodeURIComponent(recipientEmail)}`,
+      );
       if (!pkRes) return;
       const pkData = await pkRes.json();
 
-      const recipientPubKey = await SharingCrypto.importPublicKey(pkData.public_key);
-      const sharedKey = await SharingCrypto.deriveSharedKey(SharingSession.getKey(), recipientPubKey);
+      const recipientPubKey = await SharingCrypto.importPublicKey(
+        pkData.public_key,
+      );
+      const sharedKey = await SharingCrypto.deriveSharedKey(
+        SharingSession.getKey(),
+        recipientPubKey,
+      );
 
       // Find item plaintext
-      const item = _items.find(i => i.id === itemId);
-      if (!item?.plain) { showToast('Item not found or not decrypted', 'error'); return; }
+      const item = _items.find((i) => i.id === itemId);
+      if (!item?.plain) {
+        showToast("Item not found or not decrypted", "error");
+        return;
+      }
 
-      const { enc_data, iv } = await SharingCrypto.encryptForShare(sharedKey, item.plain);
+      const { enc_data, iv } = await SharingCrypto.encryptForShare(
+        sharedKey,
+        item.plain,
+      );
 
-      const res = await apiFetch('/api/sharing', {
-        method: 'POST',
+      const res = await apiFetch("/api/sharing", {
+        method: "POST",
         body: JSON.stringify({
           item_id: itemId,
           recipient_email: recipientEmail,
-          enc_data, iv,
+          enc_data,
+          iv,
           item_name: item.name,
           item_type: item.item_type,
         }),
       });
       if (!res) return;
 
-      closeModal('share-modal');
-      showToast('Item shared successfully');
+      closeModal("share-modal");
+      showToast("Item shared successfully");
       loadSharedOut();
     } catch (err) {
       errEl.textContent = err.message;
-      errEl.classList.remove('hidden');
+      errEl.classList.remove("hidden");
     }
   }
 
   function openShareModal() {
-    const sel = document.getElementById('share-item-select');
-    sel.innerHTML = _items.map(i =>
-      `<option value="${i.id}">${escHtml(i.name)} (${i.item_type})</option>`
-    ).join('');
-    document.getElementById('share-recipient-email').value = '';
-    document.getElementById('share-error').classList.add('hidden');
-    document.getElementById('share-modal').classList.add('open');
+    const sel = document.getElementById("share-item-select");
+    sel.innerHTML = _items
+      .map(
+        (i) =>
+          `<option value="${i.id}">${escHtml(i.name)} (${i.item_type})</option>`,
+      )
+      .join("");
+    document.getElementById("share-recipient-email").value = "";
+    document.getElementById("share-error").classList.add("hidden");
+    document.getElementById("share-modal").classList.add("open");
   }
 
   // ── Emergency Access View ─────────────────────────────────────────────────
 
   async function loadEmergencyView() {
     try {
-      const res = await apiFetch('/api/emergency');
+      const res = await apiFetch("/api/emergency");
       if (!res) return;
       const data = await res.json();
       renderEmergencyGrants(data.grants);
       renderEmergencyAccess(data.access);
     } catch (err) {
-      showToast('Could not load emergency access data: ' + err.message, 'error');
+      showToast(
+        "Could not load emergency access data: " + err.message,
+        "error",
+      );
     }
   }
 
   function renderEmergencyGrants(grants) {
-    const ul = document.getElementById('em-grants-list');
+    const ul = document.getElementById("em-grants-list");
     if (!ul) return;
     if (!grants.length) {
-      ul.innerHTML = '<li class="vault-empty">No trusted contacts set up yet.</li>';
+      ul.innerHTML =
+        '<li class="vault-empty">No trusted contacts set up yet.</li>';
       return;
     }
 
-    ul.innerHTML = grants.map(g => {
-      let actions = '';
-      if (g.status === 'accepted') {
-        actions = `<button class="btn-primary btn-sm" data-provide="${g.id}">Provide Recovery Data</button>`;
-      }
-      if (g.status === 'pending') {
-        const waitInfo = g.wait_elapsed ? 'Wait period elapsed' : 'Access requested';
-        actions = `<span class="badge badge-warn">${waitInfo}</span>
+    ul.innerHTML = grants
+      .map((g) => {
+        let actions = "";
+        if (g.status === "accepted") {
+          actions = `<button class="btn-primary btn-sm" data-provide="${g.id}">Provide Recovery Data</button>`;
+        }
+        if (g.status === "pending") {
+          const waitInfo = g.wait_elapsed
+            ? "Wait period elapsed"
+            : "Access requested";
+          actions = `<span class="badge badge-warn">${waitInfo}</span>
           <button class="btn-secondary btn-sm" data-deny="${g.id}">Deny</button>`;
-      }
-      return `<li class="share-item">
+        }
+        return `<li class="share-item">
         <div class="share-icon">🚨</div>
         <div class="share-info">
           <span class="share-name">${escHtml(g.grantee_email)}</span>
@@ -662,136 +914,193 @@ const Vault = (() => {
           <button class="btn-icon" title="Remove" data-remove-ea="${g.id}">🗑️</button>
         </div>
       </li>`;
-    }).join('');
+      })
+      .join("");
 
-    ul.querySelectorAll('[data-provide]').forEach(btn => {
-      btn.addEventListener('click', () => handleProvideEmergencyData(parseInt(btn.dataset.provide)));
+    ul.querySelectorAll("[data-provide]").forEach((btn) => {
+      btn.addEventListener("click", () =>
+        handleProvideEmergencyData(parseInt(btn.dataset.provide)),
+      );
     });
-    ul.querySelectorAll('[data-deny]').forEach(btn => {
-      btn.addEventListener('click', async () => {
-        if (!confirm('Deny this access request?')) return;
+    ul.querySelectorAll("[data-deny]").forEach((btn) => {
+      btn.addEventListener("click", async () => {
+        if (!confirm("Deny this access request?")) return;
         try {
-          await apiFetch(`/api/emergency/${btn.dataset.deny}/deny`, { method: 'POST' });
-          showToast('Access request denied');
+          await apiFetch(`/api/emergency/${btn.dataset.deny}/deny`, {
+            method: "POST",
+          });
+          showToast("Access request denied");
           loadEmergencyView();
-        } catch (err) { showToast(err.message, 'error'); }
+        } catch (err) {
+          showToast(err.message, "error");
+        }
       });
     });
-    ul.querySelectorAll('[data-remove-ea]').forEach(btn => {
-      btn.addEventListener('click', async () => {
-        if (!confirm('Remove this emergency access grant?')) return;
+    ul.querySelectorAll("[data-remove-ea]").forEach((btn) => {
+      btn.addEventListener("click", async () => {
+        if (!confirm("Remove this emergency access grant?")) return;
         try {
-          await apiFetch(`/api/emergency/${btn.dataset.removeEa}`, { method: 'DELETE' });
-          showToast('Emergency access removed');
+          await apiFetch(`/api/emergency/${btn.dataset.removeEa}`, {
+            method: "DELETE",
+          });
+          showToast("Emergency access removed");
           loadEmergencyView();
-        } catch (err) { showToast(err.message, 'error'); }
+        } catch (err) {
+          showToast(err.message, "error");
+        }
       });
     });
   }
 
   async function handleProvideEmergencyData(eaId) {
     if (!SharingSession.isReady()) {
-      showToast('Set up sharing keys first (Settings → Sharing Keys)', 'error');
+      showToast("Set up sharing keys first (Settings → Sharing Keys)", "error");
       return;
     }
-    if (!confirm('This will create an encrypted snapshot of all your vault items for your trusted contact. Continue?')) return;
+    if (
+      !confirm(
+        "This will create an encrypted snapshot of all your vault items for your trusted contact. Continue?",
+      )
+    )
+      return;
 
     try {
       // Get grantee's public key from the emergency record
-      const listRes = await apiFetch('/api/emergency');
+      const listRes = await apiFetch("/api/emergency");
       const listData = await listRes.json();
-      const ea = listData.grants.find(g => g.id === eaId);
-      if (!ea) { showToast('Emergency access record not found', 'error'); return; }
+      const ea = listData.grants.find((g) => g.id === eaId);
+      if (!ea) {
+        showToast("Emergency access record not found", "error");
+        return;
+      }
 
       // Fetch grantee's public key
-      const pkRes = await apiFetch(`/api/sharing/public-key?email=${encodeURIComponent(ea.grantee_email)}`);
+      const pkRes = await apiFetch(
+        `/api/sharing/public-key?email=${encodeURIComponent(ea.grantee_email)}`,
+      );
       if (!pkRes) return;
       const pkData = await pkRes.json();
 
-      const granteePubKey = await SharingCrypto.importPublicKey(pkData.public_key);
-      const sharedKey = await SharingCrypto.deriveSharedKey(SharingSession.getKey(), granteePubKey);
+      const granteePubKey = await SharingCrypto.importPublicKey(
+        pkData.public_key,
+      );
+      const sharedKey = await SharingCrypto.deriveSharedKey(
+        SharingSession.getKey(),
+        granteePubKey,
+      );
 
       // Re-encrypt all decrypted vault items
       const encItems = await Promise.all(
-        _items.filter(i => i.plain).map(async i => {
-          const { enc_data, iv } = await SharingCrypto.encryptForShare(sharedKey, i.plain);
-          return { id: i.id, name: i.name, item_type: i.item_type, enc_data, iv };
-        })
+        _items
+          .filter((i) => i.plain)
+          .map(async (i) => {
+            const { enc_data, iv } = await SharingCrypto.encryptForShare(
+              sharedKey,
+              i.plain,
+            );
+            return {
+              id: i.id,
+              name: i.name,
+              item_type: i.item_type,
+              enc_data,
+              iv,
+            };
+          }),
       );
 
       await apiFetch(`/api/emergency/${eaId}/provide`, {
-        method: 'POST',
+        method: "POST",
         body: JSON.stringify({ enc_vault: JSON.stringify(encItems) }),
       });
 
-      showToast('Recovery data provided');
+      showToast("Recovery data provided");
       loadEmergencyView();
     } catch (err) {
-      showToast('Failed to provide recovery data: ' + err.message, 'error');
+      showToast("Failed to provide recovery data: " + err.message, "error");
     }
   }
 
   function renderEmergencyAccess(access) {
-    const ul = document.getElementById('em-access-list');
+    const ul = document.getElementById("em-access-list");
     if (!ul) return;
     if (!access.length) {
-      ul.innerHTML = '<li class="vault-empty">No one has designated you as an emergency contact.</li>';
+      ul.innerHTML =
+        '<li class="vault-empty">No one has designated you as an emergency contact.</li>';
       return;
     }
 
-    ul.innerHTML = access.map(a => {
-      let actions = '';
-      if (a.status === 'invited') {
-        actions = `<button class="btn-primary btn-sm" data-accept-ea="${a.id}">Accept</button>`;
-      } else if (a.status === 'ready') {
-        actions = `<button class="btn-primary btn-sm" data-request-ea="${a.id}">Request Access</button>`;
-      } else if (a.status === 'pending') {
-        let daysLeft = a.wait_days;
-        if (a.request_initiated_at) {
-          const elapsed = (Date.now() - new Date(a.request_initiated_at).getTime()) / 86400000;
-          daysLeft = Math.max(0, Math.ceil(a.wait_days - elapsed));
+    ul.innerHTML = access
+      .map((a) => {
+        let actions = "";
+        if (a.status === "invited") {
+          actions = `<button class="btn-primary btn-sm" data-accept-ea="${a.id}">Accept</button>`;
+        } else if (a.status === "ready") {
+          actions = `<button class="btn-primary btn-sm" data-request-ea="${a.id}">Request Access</button>`;
+        } else if (a.status === "pending") {
+          let daysLeft = a.wait_days;
+          if (a.request_initiated_at) {
+            const elapsed =
+              (Date.now() - new Date(a.request_initiated_at).getTime()) /
+              86400000;
+            daysLeft = Math.max(0, Math.ceil(a.wait_days - elapsed));
+          }
+          actions = a.wait_elapsed
+            ? `<button class="btn-primary btn-sm" data-get-vault="${a.id}">View Vault</button>`
+            : `<span class="badge badge-info">Waiting (~${daysLeft} day${daysLeft !== 1 ? "s" : ""} left)</span>`;
         }
-        actions = a.wait_elapsed
-          ? `<button class="btn-primary btn-sm" data-get-vault="${a.id}">View Vault</button>`
-          : `<span class="badge badge-info">Waiting (~${daysLeft} day${daysLeft !== 1 ? 's' : ''} left)</span>`;
-      }
-      return `<li class="share-item">
+        return `<li class="share-item">
         <div class="share-icon">🔐</div>
         <div class="share-info">
-          <span class="share-name">${escHtml(a.grantor_email || 'Unknown')}</span>
+          <span class="share-name">${escHtml(a.grantor_email || "Unknown")}</span>
           <span class="share-meta">Status: ${escHtml(a.status)} · Wait: ${a.wait_days} day(s)</span>
         </div>
         <div class="share-actions">${actions}</div>
       </li>`;
-    }).join('');
+      })
+      .join("");
 
-    ul.querySelectorAll('[data-accept-ea]').forEach(btn => {
-      btn.addEventListener('click', async () => {
+    ul.querySelectorAll("[data-accept-ea]").forEach((btn) => {
+      btn.addEventListener("click", async () => {
         try {
-          await apiFetch(`/api/emergency/${btn.dataset.acceptEa}/accept`, { method: 'POST' });
-          showToast('Emergency access accepted');
+          await apiFetch(`/api/emergency/${btn.dataset.acceptEa}/accept`, {
+            method: "POST",
+          });
+          showToast("Emergency access accepted");
           loadEmergencyView();
-        } catch (err) { showToast(err.message, 'error'); }
+        } catch (err) {
+          showToast(err.message, "error");
+        }
       });
     });
-    ul.querySelectorAll('[data-request-ea]').forEach(btn => {
-      btn.addEventListener('click', async () => {
-        if (!confirm('Request emergency access? This will start the waiting period. The vault owner will be notified.')) return;
+    ul.querySelectorAll("[data-request-ea]").forEach((btn) => {
+      btn.addEventListener("click", async () => {
+        if (
+          !confirm(
+            "Request emergency access? This will start the waiting period. The vault owner will be notified.",
+          )
+        )
+          return;
         try {
-          await apiFetch(`/api/emergency/${btn.dataset.requestEa}/request`, { method: 'POST' });
-          showToast('Access request sent — wait period has started');
+          await apiFetch(`/api/emergency/${btn.dataset.requestEa}/request`, {
+            method: "POST",
+          });
+          showToast("Access request sent — wait period has started");
           loadEmergencyView();
-        } catch (err) { showToast(err.message, 'error'); }
+        } catch (err) {
+          showToast(err.message, "error");
+        }
       });
     });
-    ul.querySelectorAll('[data-get-vault]').forEach(btn => {
-      btn.addEventListener('click', () => handleGetEmergencyVault(parseInt(btn.dataset.getVault)));
+    ul.querySelectorAll("[data-get-vault]").forEach((btn) => {
+      btn.addEventListener("click", () =>
+        handleGetEmergencyVault(parseInt(btn.dataset.getVault)),
+      );
     });
   }
 
   async function handleGetEmergencyVault(eaId) {
     if (!SharingSession.isReady()) {
-      showToast('Set up sharing keys first (Settings → Sharing Keys)', 'error');
+      showToast("Set up sharing keys first (Settings → Sharing Keys)", "error");
       return;
     }
     try {
@@ -799,43 +1108,57 @@ const Vault = (() => {
       if (!res) return;
       const data = await res.json();
 
-      const grantorPubKey = await SharingCrypto.importPublicKey(data.grantor_public_key);
-      const sharedKey = await SharingCrypto.deriveSharedKey(SharingSession.getKey(), grantorPubKey);
+      const grantorPubKey = await SharingCrypto.importPublicKey(
+        data.grantor_public_key,
+      );
+      const sharedKey = await SharingCrypto.deriveSharedKey(
+        SharingSession.getKey(),
+        grantorPubKey,
+      );
 
       const encItems = JSON.parse(data.enc_vault);
-      const decItems = await Promise.all(encItems.map(async i => {
-        try {
-          const plain = await SharingCrypto.decryptShare(sharedKey, i.enc_data, i.iv);
-          return { ...i, plain };
-        } catch {
-          return { ...i, plain: null };
-        }
-      }));
+      const decItems = await Promise.all(
+        encItems.map(async (i) => {
+          try {
+            const plain = await SharingCrypto.decryptShare(
+              sharedKey,
+              i.enc_data,
+              i.iv,
+            );
+            return { ...i, plain };
+          } catch {
+            return { ...i, plain: null };
+          }
+        }),
+      );
 
       renderEmergencyVaultPanel(decItems);
     } catch (err) {
-      showToast('Could not retrieve vault: ' + err.message, 'error');
+      showToast("Could not retrieve vault: " + err.message, "error");
     }
   }
 
   function renderEmergencyVaultPanel(items) {
-    const list = document.getElementById('em-access-list');
-    const panel = document.getElementById('em-vault-panel');
-    const vaultList = document.getElementById('em-vault-list');
+    const list = document.getElementById("em-access-list");
+    const panel = document.getElementById("em-vault-panel");
+    const vaultList = document.getElementById("em-vault-list");
     if (!panel || !vaultList) return;
 
-    list.classList.add('hidden');
-    panel.classList.remove('hidden');
+    list.classList.add("hidden");
+    panel.classList.remove("hidden");
 
     if (!items.length) {
-      vaultList.innerHTML = '<li class="vault-empty">No items in emergency vault.</li>';
+      vaultList.innerHTML =
+        '<li class="vault-empty">No items in emergency vault.</li>';
       return;
     }
 
-    vaultList.innerHTML = items.map((item, idx) => {
-      const icon = itemIcon(item.item_type);
-      const hasFields = item.plain && Object.values(item.plain).some(v => v);
-      return `<li class="em-vault-item">
+    vaultList.innerHTML = items
+      .map((item, idx) => {
+        const icon = itemIcon(item.item_type);
+        const hasFields =
+          item.plain && Object.values(item.plain).some((v) => v);
+        return `<li class="em-vault-item">
         <button type="button" class="em-vault-item-header" data-em-idx="${idx}" aria-expanded="false">
           <span class="em-vault-icon">${icon}</span>
           <span class="em-vault-name">${escHtml(item.name)}</span>
@@ -843,50 +1166,72 @@ const Vault = (() => {
           <span class="em-vault-chevron">▸</span>
         </button>
         <div class="em-vault-item-body hidden" id="em-vault-body-${idx}">
-          ${hasFields
-          ? '<div class="detail-body em-detail-body"></div>'
-          : '<p class="vault-empty">Could not decrypt this item.</p>'}
+          ${
+            hasFields
+              ? '<div class="detail-body em-detail-body"></div>'
+              : '<p class="vault-empty">Could not decrypt this item.</p>'
+          }
         </div>
       </li>`;
-    }).join('');
+      })
+      .join("");
 
     // Populate detail fields and wire expand/collapse
     items.forEach((item, idx) => {
       const header = vaultList.querySelector(`[data-em-idx="${idx}"]`);
       const body = document.getElementById(`em-vault-body-${idx}`);
-      const detailBody = body?.querySelector('.em-detail-body');
+      const detailBody = body?.querySelector(".em-detail-body");
       if (detailBody && item.plain) renderDetailFields(detailBody, item.plain);
 
-      header?.addEventListener('click', () => {
-        const expanded = header.getAttribute('aria-expanded') === 'true';
-        header.setAttribute('aria-expanded', String(!expanded));
-        header.querySelector('.em-vault-chevron').textContent = expanded ? '▸' : '▾';
-        body?.classList.toggle('hidden', expanded);
+      header?.addEventListener("click", () => {
+        const expanded = header.getAttribute("aria-expanded") === "true";
+        header.setAttribute("aria-expanded", String(!expanded));
+        header.querySelector(".em-vault-chevron").textContent = expanded
+          ? "▸"
+          : "▾";
+        body?.classList.toggle("hidden", expanded);
       });
     });
 
-    document.getElementById('btn-em-vault-back')?.addEventListener('click', () => {
-      panel.classList.add('hidden');
-      list.classList.remove('hidden');
-    });
+    document
+      .getElementById("btn-em-vault-back")
+      ?.addEventListener("click", () => {
+        panel.classList.add("hidden");
+        list.classList.remove("hidden");
+      });
   }
 
   // ── Password Generator ────────────────────────────────────────────────
 
   const GEN_CHARSETS = {
-    upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
-    lower: 'abcdefghijklmnopqrstuvwxyz',
-    digits: '0123456789',
-    symbols: '!@#$%^&*()-_=+[]{}|;:,.<>?',
+    upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+    lower: "abcdefghijklmnopqrstuvwxyz",
+    digits: "0123456789",
+    symbols: "!@#$%^&*()-_=+[]{}|;:,.<>?",
   };
 
-  function generatePassword(length = 20, opts = { upper: true, lower: true, digits: true, symbols: true }) {
-    let pool = '';
+  function generatePassword(
+    length = 20,
+    opts = { upper: true, lower: true, digits: true, symbols: true },
+  ) {
+    let pool = "";
     const required = [];
-    if (opts.upper) { pool += GEN_CHARSETS.upper; required.push(GEN_CHARSETS.upper); }
-    if (opts.lower) { pool += GEN_CHARSETS.lower; required.push(GEN_CHARSETS.lower); }
-    if (opts.digits) { pool += GEN_CHARSETS.digits; required.push(GEN_CHARSETS.digits); }
-    if (opts.symbols) { pool += GEN_CHARSETS.symbols; required.push(GEN_CHARSETS.symbols); }
+    if (opts.upper) {
+      pool += GEN_CHARSETS.upper;
+      required.push(GEN_CHARSETS.upper);
+    }
+    if (opts.lower) {
+      pool += GEN_CHARSETS.lower;
+      required.push(GEN_CHARSETS.lower);
+    }
+    if (opts.digits) {
+      pool += GEN_CHARSETS.digits;
+      required.push(GEN_CHARSETS.digits);
+    }
+    if (opts.symbols) {
+      pool += GEN_CHARSETS.symbols;
+      required.push(GEN_CHARSETS.symbols);
+    }
     if (!pool) pool = GEN_CHARSETS.lower;
 
     const arr = new Uint32Array(length + required.length);
@@ -904,11 +1249,11 @@ const Vault = (() => {
       const j = shuffle[i] % (i + 1);
       [chars[i], chars[j]] = [chars[j], chars[i]];
     }
-    return chars.slice(0, length).join('');
+    return chars.slice(0, length).join("");
   }
 
   function scorePassword(pw) {
-    if (!pw) return { score: 0, label: '', cls: '' };
+    if (!pw) return { score: 0, label: "", cls: "" };
     let score = 0;
     if (pw.length >= 8) score++;
     if (pw.length >= 12) score++;
@@ -918,60 +1263,69 @@ const Vault = (() => {
     if (/[0-9]/.test(pw)) score++;
     if (/[^A-Za-z0-9]/.test(pw)) score++;
     // clamp to 5 bands
-    const band = Math.min(5, Math.ceil(score / 7 * 5));
-    const labels = ['', 'Very Weak', 'Weak', 'Fair', 'Strong', 'Very Strong'];
-    const clses = ['', 'strength-1', 'strength-2', 'strength-3', 'strength-4', 'strength-5'];
+    const band = Math.min(5, Math.ceil((score / 7) * 5));
+    const labels = ["", "Very Weak", "Weak", "Fair", "Strong", "Very Strong"];
+    const clses = [
+      "",
+      "strength-1",
+      "strength-2",
+      "strength-3",
+      "strength-4",
+      "strength-5",
+    ];
     return { score: band, label: labels[band], cls: clses[band] };
   }
 
   // Attach strength meter + generate button to the password field in the item modal
   function initPasswordFieldEnhancements() {
-    const pwInput = document.getElementById('field-password');
+    const pwInput = document.getElementById("field-password");
     if (!pwInput) return;
 
     // Strength bar below the password field
-    if (!document.getElementById('field-password-strength')) {
-      const bar = document.createElement('div');
-      bar.id = 'field-password-strength';
-      bar.className = 'password-strength';
-      pwInput.closest('.input-with-toggle').insertAdjacentElement('afterend', bar);
+    if (!document.getElementById("field-password-strength")) {
+      const bar = document.createElement("div");
+      bar.id = "field-password-strength";
+      bar.className = "password-strength";
+      pwInput
+        .closest(".input-with-toggle")
+        .insertAdjacentElement("afterend", bar);
     }
 
-    pwInput.addEventListener('input', () => {
+    pwInput.addEventListener("input", () => {
       const { label, cls } = scorePassword(pwInput.value);
-      const bar = document.getElementById('field-password-strength');
-      bar.textContent = pwInput.value ? label : '';
-      bar.className = 'password-strength ' + (pwInput.value ? cls : '');
+      const bar = document.getElementById("field-password-strength");
+      bar.textContent = pwInput.value ? label : "";
+      bar.className = "password-strength " + (pwInput.value ? cls : "");
     });
 
     // Generate button — add only once
-    if (!document.getElementById('btn-generate-pass')) {
-      const btn = document.createElement('button');
-      btn.type = 'button';
-      btn.id = 'btn-generate-pass';
-      btn.className = 'btn-secondary btn-sm';
-      btn.textContent = '⚡ Generate';
-      btn.style.marginTop = '6px';
-      pwInput.closest('.form-group').appendChild(btn);
+    if (!document.getElementById("btn-generate-pass")) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.id = "btn-generate-pass";
+      btn.className = "btn-secondary btn-sm";
+      btn.textContent = "⚡ Generate";
+      btn.style.marginTop = "6px";
+      pwInput.closest(".form-group").appendChild(btn);
     }
 
-    document.getElementById('btn-generate-pass').onclick = () => {
+    document.getElementById("btn-generate-pass").onclick = () => {
       const pw = generatePassword(20);
       pwInput.value = pw;
-      pwInput.type = 'text';   // reveal so user can see what was generated
-      pwInput.dispatchEvent(new Event('input')); // trigger strength bar
+      pwInput.type = "text"; // reveal so user can see what was generated
+      pwInput.dispatchEvent(new Event("input")); // trigger strength bar
     };
   }
 
   function openPasswordGeneratorModal() {
     // Build modal content dynamically — keeps the HTML lean
-    let modal = document.getElementById('gen-modal');
+    let modal = document.getElementById("gen-modal");
     if (!modal) {
-      modal = document.createElement('div');
-      modal.id = 'gen-modal';
-      modal.className = 'modal-overlay';
-      modal.setAttribute('role', 'dialog');
-      modal.setAttribute('aria-modal', 'true');
+      modal = document.createElement("div");
+      modal.id = "gen-modal";
+      modal.className = "modal-overlay";
+      modal.setAttribute("role", "dialog");
+      modal.setAttribute("aria-modal", "true");
       modal.innerHTML = `
         <div class="modal" style="max-width:420px">
           <div class="modal-header">
@@ -1003,57 +1357,68 @@ const Vault = (() => {
         </div>`;
       document.body.appendChild(modal);
 
-      const lengthSlider = document.getElementById('gen-length');
-      const lengthDisplay = document.getElementById('gen-length-display');
-      const output = document.getElementById('gen-output');
-      const strengthEl = document.getElementById('gen-strength');
+      const lengthSlider = document.getElementById("gen-length");
+      const lengthDisplay = document.getElementById("gen-length-display");
+      const output = document.getElementById("gen-output");
+      const strengthEl = document.getElementById("gen-strength");
 
       function refreshGen() {
         const pw = generatePassword(parseInt(lengthSlider.value), {
-          upper: document.getElementById('gen-upper').checked,
-          lower: document.getElementById('gen-lower').checked,
-          digits: document.getElementById('gen-digits').checked,
-          symbols: document.getElementById('gen-symbols').checked,
+          upper: document.getElementById("gen-upper").checked,
+          lower: document.getElementById("gen-lower").checked,
+          digits: document.getElementById("gen-digits").checked,
+          symbols: document.getElementById("gen-symbols").checked,
         });
         output.value = pw;
         const { label, cls } = scorePassword(pw);
         strengthEl.textContent = label;
-        strengthEl.className = 'password-strength ' + cls;
+        strengthEl.className = "password-strength " + cls;
       }
 
-      lengthSlider.addEventListener('input', () => {
+      lengthSlider.addEventListener("input", () => {
         lengthDisplay.textContent = lengthSlider.value;
         refreshGen();
       });
-      ['gen-upper', 'gen-lower', 'gen-digits', 'gen-symbols'].forEach(id => {
-        document.getElementById(id).addEventListener('change', refreshGen);
+      ["gen-upper", "gen-lower", "gen-digits", "gen-symbols"].forEach((id) => {
+        document.getElementById(id).addEventListener("change", refreshGen);
       });
-      document.getElementById('btn-regenerate').addEventListener('click', refreshGen);
-      document.getElementById('btn-gen-copy').addEventListener('click', () => {
-        navigator.clipboard.writeText(output.value).then(() => showToast('Password copied'));
+      document
+        .getElementById("btn-regenerate")
+        .addEventListener("click", refreshGen);
+      document.getElementById("btn-gen-copy").addEventListener("click", () => {
+        navigator.clipboard
+          .writeText(output.value)
+          .then(() => showToast("Password copied"));
+      });
+      const closeGen = () => modal.classList.remove("open");
+      document
+        .getElementById("btn-close-gen-modal")
+        .addEventListener("click", closeGen);
+      document
+        .getElementById("btn-close-gen-modal2")
+        .addEventListener("click", closeGen);
+      modal.addEventListener("click", (e) => {
+        if (e.target === modal) closeGen();
       });
-      const closeGen = () => modal.classList.remove('open');
-      document.getElementById('btn-close-gen-modal').addEventListener('click', closeGen);
-      document.getElementById('btn-close-gen-modal2').addEventListener('click', closeGen);
-      modal.addEventListener('click', e => { if (e.target === modal) closeGen(); });
 
       refreshGen();
     }
-    modal.classList.add('open');
+    modal.classList.add("open");
     // Regenerate fresh password each time modal opens
-    const lengthSlider = document.getElementById('gen-length');
-    document.getElementById('gen-length-display').textContent = lengthSlider.value;
+    const lengthSlider = document.getElementById("gen-length");
+    document.getElementById("gen-length-display").textContent =
+      lengthSlider.value;
     const pw = generatePassword(parseInt(lengthSlider.value), {
-      upper: document.getElementById('gen-upper').checked,
-      lower: document.getElementById('gen-lower').checked,
-      digits: document.getElementById('gen-digits').checked,
-      symbols: document.getElementById('gen-symbols').checked,
+      upper: document.getElementById("gen-upper").checked,
+      lower: document.getElementById("gen-lower").checked,
+      digits: document.getElementById("gen-digits").checked,
+      symbols: document.getElementById("gen-symbols").checked,
     });
-    document.getElementById('gen-output').value = pw;
+    document.getElementById("gen-output").value = pw;
     const { label, cls } = scorePassword(pw);
-    const strengthEl = document.getElementById('gen-strength');
+    const strengthEl = document.getElementById("gen-strength");
     strengthEl.textContent = label;
-    strengthEl.className = 'password-strength ' + cls;
+    strengthEl.className = "password-strength " + cls;
   }
 
   // ── Account Settings ──────────────────────────────────────────────────────
@@ -1061,139 +1426,165 @@ const Vault = (() => {
   let _pendingMfaSecret = null;
 
   async function openSettingsModal() {
-    document.getElementById('settings-modal').classList.add('open');
+    document.getElementById("settings-modal").classList.add("open");
     // Reset change password fields
-    ['cp-current', 'cp-new', 'cp-confirm'].forEach(id => {
-      const el = document.getElementById(id); if (el) el.value = '';
+    ["cp-current", "cp-new", "cp-confirm"].forEach((id) => {
+      const el = document.getElementById(id);
+      if (el) el.value = "";
     });
-    document.getElementById('cp-error')?.classList.add('hidden');
+    document.getElementById("cp-error")?.classList.add("hidden");
     // Reset delete account area
-    document.getElementById('delete-confirm-area')?.classList.add('hidden');
-    document.getElementById('btn-delete-account')?.classList.remove('hidden');
-    document.getElementById('delete-password').value = '';
-    document.getElementById('delete-error')?.classList.add('hidden');
+    document.getElementById("delete-confirm-area")?.classList.add("hidden");
+    document.getElementById("btn-delete-account")?.classList.remove("hidden");
+    document.getElementById("delete-password").value = "";
+    document.getElementById("delete-error")?.classList.add("hidden");
     // Reset recovery display
-    document.getElementById('recovery-code-display')?.classList.add('hidden');
-    await Promise.all([loadMfaStatus(), loadSharingKeysStatus(), loadRecoveryStatus()]);
+    document.getElementById("recovery-code-display")?.classList.add("hidden");
+    await Promise.all([
+      loadMfaStatus(),
+      loadSharingKeysStatus(),
+      loadRecoveryStatus(),
+    ]);
   }
 
   async function loadMfaStatus() {
     try {
-      const res = await apiFetch('/api/auth/mfa/status');
+      const res = await apiFetch("/api/auth/mfa/status");
       if (!res) return;
       const data = await res.json();
       renderMfaStatus(data.totp_enabled);
     } catch (err) {
-      console.error('loadMfaStatus:', err);
+      console.error("loadMfaStatus:", err);
     }
   }
 
   function renderMfaStatus(enabled) {
-    const statusText = document.getElementById('mfa-status-text');
-    const actions = document.getElementById('mfa-actions');
-    document.getElementById('mfa-setup-area').classList.add('hidden');
-    document.getElementById('mfa-disable-area').classList.add('hidden');
+    const statusText = document.getElementById("mfa-status-text");
+    const actions = document.getElementById("mfa-actions");
+    document.getElementById("mfa-setup-area").classList.add("hidden");
+    document.getElementById("mfa-disable-area").classList.add("hidden");
 
     if (enabled) {
-      statusText.textContent = '✅ Two-factor authentication is enabled.';
-      actions.innerHTML = '<button class="btn-secondary" id="btn-mfa-disable">Disable MFA</button>';
-      document.getElementById('btn-mfa-disable')?.addEventListener('click', () => {
-        document.getElementById('mfa-disable-area').classList.remove('hidden');
-        document.getElementById('mfa-actions').innerHTML = '';
-        document.getElementById('mfa-disable-code').focus();
-      });
+      statusText.textContent = "✅ Two-factor authentication is enabled.";
+      actions.innerHTML =
+        '<button class="btn-secondary" id="btn-mfa-disable">Disable MFA</button>';
+      document
+        .getElementById("btn-mfa-disable")
+        ?.addEventListener("click", () => {
+          document
+            .getElementById("mfa-disable-area")
+            .classList.remove("hidden");
+          document.getElementById("mfa-actions").innerHTML = "";
+          document.getElementById("mfa-disable-code").focus();
+        });
     } else {
-      statusText.textContent = 'Two-factor authentication is not enabled.';
-      actions.innerHTML = '<button class="btn-primary" id="btn-mfa-setup">Set up MFA</button>';
-      document.getElementById('btn-mfa-setup')?.addEventListener('click', handleMfaSetup);
+      statusText.textContent = "Two-factor authentication is not enabled.";
+      actions.innerHTML =
+        '<button class="btn-primary" id="btn-mfa-setup">Set up MFA</button>';
+      document
+        .getElementById("btn-mfa-setup")
+        ?.addEventListener("click", handleMfaSetup);
     }
   }
 
   async function handleMfaSetup() {
     try {
-      const res = await apiFetch('/api/auth/mfa/setup');
+      const res = await apiFetch("/api/auth/mfa/setup");
       if (!res) return;
       const data = await res.json();
       _pendingMfaSecret = data.secret;
 
-      document.getElementById('mfa-qr-img').src = data.qr_code;
-      document.getElementById('mfa-secret-display').textContent = data.secret;
-      document.getElementById('mfa-setup-area').classList.remove('hidden');
-      document.getElementById('mfa-actions').innerHTML = '';
-      document.getElementById('mfa-status-text').textContent = 'Scan the QR code below with your authenticator app.';
-      document.getElementById('mfa-verify-code').value = '';
-      document.getElementById('mfa-verify-code').focus();
+      document.getElementById("mfa-qr-img").src = data.qr_code;
+      document.getElementById("mfa-secret-display").textContent = data.secret;
+      document.getElementById("mfa-setup-area").classList.remove("hidden");
+      document.getElementById("mfa-actions").innerHTML = "";
+      document.getElementById("mfa-status-text").textContent =
+        "Scan the QR code below with your authenticator app.";
+      document.getElementById("mfa-verify-code").value = "";
+      document.getElementById("mfa-verify-code").focus();
     } catch (err) {
-      showToast('Could not start MFA setup: ' + err.message, 'error');
+      showToast("Could not start MFA setup: " + err.message, "error");
     }
   }
 
   async function handleMfaConfirm() {
-    const code = document.getElementById('mfa-verify-code').value.trim();
+    const code = document.getElementById("mfa-verify-code").value.trim();
     if (!code || !_pendingMfaSecret) return;
     try {
-      const res = await apiFetch('/api/auth/mfa/enable', {
-        method: 'POST',
+      const res = await apiFetch("/api/auth/mfa/enable", {
+        method: "POST",
         body: JSON.stringify({ secret: _pendingMfaSecret, totp_code: code }),
       });
       if (!res) return;
       _pendingMfaSecret = null;
-      showToast('MFA enabled successfully');
+      showToast("MFA enabled successfully");
       renderMfaStatus(true);
     } catch (err) {
-      showToast('Failed to enable MFA: ' + err.message, 'error');
+      showToast("Failed to enable MFA: " + err.message, "error");
     }
   }
 
   async function handleMfaDisableConfirm() {
-    const code = document.getElementById('mfa-disable-code').value.trim();
+    const code = document.getElementById("mfa-disable-code").value.trim();
     if (!code) return;
     try {
-      const res = await apiFetch('/api/auth/mfa/disable', {
-        method: 'POST',
+      const res = await apiFetch("/api/auth/mfa/disable", {
+        method: "POST",
         body: JSON.stringify({ totp_code: code }),
       });
       if (!res) return;
-      showToast('MFA disabled');
+      showToast("MFA disabled");
       renderMfaStatus(false);
     } catch (err) {
-      showToast('Failed to disable MFA: ' + err.message, 'error');
+      showToast("Failed to disable MFA: " + err.message, "error");
     }
   }
 
   async function loadSharingKeysStatus() {
     try {
-      const res = await apiFetch('/api/sharing/keys');
+      const res = await apiFetch("/api/sharing/keys");
       if (!res) return;
       const data = await res.json();
-      const statusEl = document.getElementById('sharing-keys-status');
-      const actionsEl = document.getElementById('sharing-keys-actions');
+      const statusEl = document.getElementById("sharing-keys-status");
+      const actionsEl = document.getElementById("sharing-keys-actions");
 
       if (data.keys_setup) {
-        statusEl.textContent = '✅ Sharing keys are set up. You can share items and use emergency access.';
-        actionsEl.innerHTML = '<button class="btn-secondary" id="btn-regen-keys">Regenerate keys</button>';
-        document.getElementById('btn-regen-keys')?.addEventListener('click', handleGenerateKeys);
+        statusEl.textContent =
+          "✅ Sharing keys are set up. You can share items and use emergency access.";
+        actionsEl.innerHTML =
+          '<button class="btn-secondary" id="btn-regen-keys">Regenerate keys</button>';
+        document
+          .getElementById("btn-regen-keys")
+          ?.addEventListener("click", handleGenerateKeys);
       } else {
-        statusEl.textContent = 'No sharing keys set up. Generate keys to enable item sharing and emergency access.';
-        actionsEl.innerHTML = '<button class="btn-primary" id="btn-gen-keys">Generate sharing keys</button>';
-        document.getElementById('btn-gen-keys')?.addEventListener('click', handleGenerateKeys);
+        statusEl.textContent =
+          "No sharing keys set up. Generate keys to enable item sharing and emergency access.";
+        actionsEl.innerHTML =
+          '<button class="btn-primary" id="btn-gen-keys">Generate sharing keys</button>';
+        document
+          .getElementById("btn-gen-keys")
+          ?.addEventListener("click", handleGenerateKeys);
       }
     } catch (err) {
-      console.error('loadSharingKeysStatus:', err);
+      console.error("loadSharingKeysStatus:", err);
     }
   }
 
   async function handleGenerateKeys() {
     const vaultKey = VaultSession.getKey();
-    if (!vaultKey) { showToast('Vault is locked. Unlock first.', 'error'); return; }
+    if (!vaultKey) {
+      showToast("Vault is locked. Unlock first.", "error");
+      return;
+    }
 
     try {
       const keyPair = await SharingCrypto.generateKeyPair();
       const public_key = await SharingCrypto.exportPublicKey(keyPair.publicKey);
-      const { private_key_enc, private_key_iv } = await SharingCrypto.encryptPrivateKey(vaultKey, keyPair.privateKey);
+      const { private_key_enc, private_key_iv } =
+        await SharingCrypto.encryptPrivateKey(vaultKey, keyPair.privateKey);
 
-      const res = await apiFetch('/api/sharing/keys', {
-        method: 'POST',
+      const res = await apiFetch("/api/sharing/keys", {
+        method: "POST",
         body: JSON.stringify({ public_key, private_key_enc, private_key_iv }),
       });
       if (!res) return;
@@ -1201,58 +1592,62 @@ const Vault = (() => {
       // Cache private key in session
       SharingSession.setKey(keyPair.privateKey);
 
-      showToast('Sharing keys generated');
+      showToast("Sharing keys generated");
       await loadSharingKeysStatus();
     } catch (err) {
-      showToast('Key generation failed: ' + err.message, 'error');
+      showToast("Key generation failed: " + err.message, "error");
     }
   }
 
   // ── Change Password ───────────────────────────────────────────────────────
 
   async function handleChangePassword() {
-    const cpError = document.getElementById('cp-error');
-    cpError.classList.add('hidden');
+    const cpError = document.getElementById("cp-error");
+    cpError.classList.add("hidden");
 
-    const currentPass = document.getElementById('cp-current').value;
-    const newPass = document.getElementById('cp-new').value;
-    const confirmPass = document.getElementById('cp-confirm').value;
+    const currentPass = document.getElementById("cp-current").value;
+    const newPass = document.getElementById("cp-new").value;
+    const confirmPass = document.getElementById("cp-confirm").value;
 
     if (!currentPass || !newPass || !confirmPass) {
-      cpError.textContent = 'All fields are required.';
-      cpError.classList.remove('hidden');
+      cpError.textContent = "All fields are required.";
+      cpError.classList.remove("hidden");
       return;
     }
     if (newPass !== confirmPass) {
-      cpError.textContent = 'New passwords do not match.';
-      cpError.classList.remove('hidden');
+      cpError.textContent = "New passwords do not match.";
+      cpError.classList.remove("hidden");
       return;
     }
     if (newPass.length < 12) {
-      cpError.textContent = 'New password must be at least 12 characters.';
-      cpError.classList.remove('hidden');
+      cpError.textContent = "New password must be at least 12 characters.";
+      cpError.classList.remove("hidden");
       return;
     }
     if (currentPass === newPass) {
-      cpError.textContent = 'New password must be different from the current password.';
-      cpError.classList.remove('hidden');
+      cpError.textContent =
+        "New password must be different from the current password.";
+      cpError.classList.remove("hidden");
       return;
     }
 
-    const btn = document.getElementById('btn-change-password');
+    const btn = document.getElementById("btn-change-password");
     const originalText = btn.textContent;
     btn.disabled = true;
-    btn.textContent = 'Re-encrypting vault…';
+    btn.textContent = "Re-encrypting vault…";
 
     try {
       const vaultKey = VaultSession.getKey();
-      if (!vaultKey) { showToast('Vault is locked. Reload and unlock first.', 'error'); return; }
+      if (!vaultKey) {
+        showToast("Vault is locked. Reload and unlock first.", "error");
+        return;
+      }
 
       // Fetch current user email from session storage
-      const encKeySalt = sessionStorage.getItem('enc_key_salt');
+      const encKeySalt = sessionStorage.getItem("enc_key_salt");
 
       // We need the email to derive auth hashes — fetch it from the profile
-      const profileRes = await apiFetch('/api/auth/me');
+      const profileRes = await apiFetch("/api/auth/me");
       if (!profileRes) return;
       const profile = await profileRes.json();
       const email = profile.email;
@@ -1264,7 +1659,7 @@ const Vault = (() => {
       const newVaultKey = await Crypto.deriveVaultKey(newPass, newEncKeySalt);
 
       // Fetch all vault items and re-encrypt
-      const itemsRes = await apiFetch('/api/vault');
+      const itemsRes = await apiFetch("/api/vault");
       if (!itemsRes) return;
       const items = await itemsRes.json();
 
@@ -1272,14 +1667,18 @@ const Vault = (() => {
 
       const reEncrypted = [];
       for (const item of items) {
-        const plain = await Crypto.decryptItem(vaultKey, item.enc_data, item.iv);
+        const plain = await Crypto.decryptItem(
+          vaultKey,
+          item.enc_data,
+          item.iv,
+        );
         const { enc_data, iv } = await Crypto.encryptItem(newVaultKey, plain);
         reEncrypted.push({ id: item.id, enc_data, iv });
       }
 
       // Submit atomic password change
-      const res = await apiFetch('/api/auth/change-password', {
-        method: 'POST',
+      const res = await apiFetch("/api/auth/change-password", {
+        method: "POST",
         body: JSON.stringify({
           current_auth_hash: currentAuthHash,
           new_auth_hash: newAuthHash,
@@ -1290,16 +1689,16 @@ const Vault = (() => {
       if (!res) return;
       const data = await res.json();
       if (!res.ok) {
-        cpError.textContent = data.error || 'Password change failed.';
-        cpError.classList.remove('hidden');
+        cpError.textContent = data.error || "Password change failed.";
+        cpError.classList.remove("hidden");
         return;
       }
 
-      showToast('Password changed. Please log in again.');
+      showToast("Password changed. Please log in again.");
       setTimeout(() => redirectToLogin(), 1500);
     } catch (err) {
-      cpError.textContent = 'An error occurred: ' + err.message;
-      cpError.classList.remove('hidden');
+      cpError.textContent = "An error occurred: " + err.message;
+      cpError.classList.remove("hidden");
       console.error(err);
     } finally {
       btn.disabled = false;
@@ -1311,70 +1710,86 @@ const Vault = (() => {
 
   async function loadRecoveryStatus() {
     try {
-      const res = await apiFetch('/api/auth/recovery/status');
+      const res = await apiFetch("/api/auth/recovery/status");
       if (!res) return;
       const data = await res.json();
-      const statusEl = document.getElementById('recovery-status-text');
-      const actionsEl = document.getElementById('recovery-actions');
+      const statusEl = document.getElementById("recovery-status-text");
+      const actionsEl = document.getElementById("recovery-actions");
 
       if (data.recovery_configured) {
-        statusEl.textContent = '✅ A recovery code is configured for your account.';
-        actionsEl.innerHTML = '<button class="btn-secondary" id="btn-regen-recovery">Generate new recovery code</button>';
+        statusEl.textContent =
+          "✅ A recovery code is configured for your account.";
+        actionsEl.innerHTML =
+          '<button class="btn-secondary" id="btn-regen-recovery">Generate new recovery code</button>';
       } else {
-        statusEl.textContent = 'No recovery code set up. If you forget your master password, your vault cannot be recovered.';
-        actionsEl.innerHTML = '<button class="btn-primary" id="btn-gen-recovery">Generate recovery code</button>';
+        statusEl.textContent =
+          "No recovery code set up. If you forget your master password, your vault cannot be recovered.";
+        actionsEl.innerHTML =
+          '<button class="btn-primary" id="btn-gen-recovery">Generate recovery code</button>';
       }
-      document.getElementById('btn-gen-recovery')?.addEventListener('click', handleSetupRecovery);
-      document.getElementById('btn-regen-recovery')?.addEventListener('click', handleSetupRecovery);
+      document
+        .getElementById("btn-gen-recovery")
+        ?.addEventListener("click", handleSetupRecovery);
+      document
+        .getElementById("btn-regen-recovery")
+        ?.addEventListener("click", handleSetupRecovery);
     } catch (err) {
-      console.error('loadRecoveryStatus:', err);
+      console.error("loadRecoveryStatus:", err);
     }
   }
 
   async function handleSetupRecovery() {
     const vaultKey = VaultSession.getKey();
-    if (!vaultKey) { showToast('Vault is locked. Unlock first.', 'error'); return; }
+    if (!vaultKey) {
+      showToast("Vault is locked. Unlock first.", "error");
+      return;
+    }
 
     try {
-      const encKeySalt = sessionStorage.getItem('enc_key_salt');
-      if (!encKeySalt) { showToast('Session error. Please reload.', 'error'); return; }
+      const encKeySalt = sessionStorage.getItem("enc_key_salt");
+      if (!encKeySalt) {
+        showToast("Session error. Please reload.", "error");
+        return;
+      }
 
       // Generate a random 128-bit (16-byte) recovery code displayed as hex
       const rawBytes = window.crypto.getRandomValues(new Uint8Array(16));
-      const recoveryCode = Array.from(rawBytes).map(b => b.toString(16).padStart(2, '0')).join('');
+      const recoveryCode = Array.from(rawBytes)
+        .map((b) => b.toString(16).padStart(2, "0"))
+        .join("");
 
       // Derive recovery key from the code
       const recoveryKeyMaterial = await window.crypto.subtle.importKey(
-        'raw',
+        "raw",
         new TextEncoder().encode(recoveryCode),
-        'PBKDF2',
+        "PBKDF2",
         false,
-        ['deriveKey']
+        ["deriveKey"],
       );
       const recoveryKey = await window.crypto.subtle.deriveKey(
         {
-          name: 'PBKDF2',
-          salt: new TextEncoder().encode('passkeeper-recovery'),
+          name: "PBKDF2",
+          salt: new TextEncoder().encode("passkeeper-recovery"),
           iterations: 200_000,
-          hash: 'SHA-256',
+          hash: "SHA-256",
         },
         recoveryKeyMaterial,
-        { name: 'AES-GCM', length: 256 },
+        { name: "AES-GCM", length: 256 },
         false,
-        ['encrypt']
+        ["encrypt"],
       );
 
       // Encrypt enc_key_salt with recovery key
       const iv = window.crypto.getRandomValues(new Uint8Array(12));
       const ciphertext = await window.crypto.subtle.encrypt(
-        { name: 'AES-GCM', iv },
+        { name: "AES-GCM", iv },
         recoveryKey,
-        new TextEncoder().encode(encKeySalt)
+        new TextEncoder().encode(encKeySalt),
       );
 
       function bytesToBase64(bytes) {
-        let bin = '';
-        new Uint8Array(bytes).forEach(b => (bin += String.fromCharCode(b)));
+        let bin = "";
+        new Uint8Array(bytes).forEach((b) => (bin += String.fromCharCode(b)));
         return btoa(bin);
       }
 
@@ -1382,21 +1797,23 @@ const Vault = (() => {
       const recovery_iv = bytesToBase64(iv);
 
       // Store on server
-      const res = await apiFetch('/api/auth/recovery/setup', {
-        method: 'POST',
+      const res = await apiFetch("/api/auth/recovery/setup", {
+        method: "POST",
         body: JSON.stringify({ recovery_enc_salt, recovery_iv }),
       });
       if (!res) return;
 
       // Display the code to the user — formatted in groups of 4
-      const formatted = recoveryCode.match(/.{1,4}/g).join('-');
-      document.getElementById('recovery-code-value').textContent = formatted;
-      document.getElementById('recovery-code-display').classList.remove('hidden');
-      document.getElementById('recovery-actions').innerHTML = '';
-      document.getElementById('recovery-status-text').textContent = 'Your new recovery code is shown below.';
-
+      const formatted = recoveryCode.match(/.{1,4}/g).join("-");
+      document.getElementById("recovery-code-value").textContent = formatted;
+      document
+        .getElementById("recovery-code-display")
+        .classList.remove("hidden");
+      document.getElementById("recovery-actions").innerHTML = "";
+      document.getElementById("recovery-status-text").textContent =
+        "Your new recovery code is shown below.";
     } catch (err) {
-      showToast('Recovery code generation failed: ' + err.message, 'error');
+      showToast("Recovery code generation failed: " + err.message, "error");
       console.error(err);
     }
   }
@@ -1404,45 +1821,45 @@ const Vault = (() => {
   // ── Delete Account ────────────────────────────────────────────────────────
 
   async function handleDeleteAccount() {
-    const deleteError = document.getElementById('delete-error');
-    deleteError.classList.add('hidden');
-    const password = document.getElementById('delete-password').value;
+    const deleteError = document.getElementById("delete-error");
+    deleteError.classList.add("hidden");
+    const password = document.getElementById("delete-password").value;
     if (!password) {
-      deleteError.textContent = 'Please enter your master password.';
-      deleteError.classList.remove('hidden');
+      deleteError.textContent = "Please enter your master password.";
+      deleteError.classList.remove("hidden");
       return;
     }
 
-    const btn = document.getElementById('btn-delete-confirm');
+    const btn = document.getElementById("btn-delete-confirm");
     const originalText = btn.textContent;
     btn.disabled = true;
-    btn.textContent = 'Deleting…';
+    btn.textContent = "Deleting…";
 
     try {
-      const profileRes = await apiFetch('/api/auth/me');
+      const profileRes = await apiFetch("/api/auth/me");
       if (!profileRes) return;
       const profile = await profileRes.json();
       const authHash = await Crypto.deriveAuthHash(password, profile.email);
 
-      const res = await apiFetch('/api/auth/account', {
-        method: 'DELETE',
+      const res = await apiFetch("/api/auth/account", {
+        method: "DELETE",
         body: JSON.stringify({ auth_hash: authHash }),
       });
       if (!res) return;
       const data = await res.json();
       if (!res.ok) {
-        deleteError.textContent = data.error || 'Deletion failed.';
-        deleteError.classList.remove('hidden');
+        deleteError.textContent = data.error || "Deletion failed.";
+        deleteError.classList.remove("hidden");
         return;
       }
 
       // Clear all local state and redirect
       sessionStorage.clear();
       localStorage.clear();
-      window.location.href = '/login';
+      window.location.href = "/login";
     } catch (err) {
-      deleteError.textContent = 'An error occurred: ' + err.message;
-      deleteError.classList.remove('hidden');
+      deleteError.textContent = "An error occurred: " + err.message;
+      deleteError.classList.remove("hidden");
       console.error(err);
     } finally {
       btn.disabled = false;
@@ -1453,155 +1870,289 @@ const Vault = (() => {
   // ── Folder CRUD ───────────────────────────────────────────────────────────
 
   function showNewFolderRow() {
-    document.getElementById('new-folder-row').classList.remove('hidden');
-    document.getElementById('new-folder-input').focus();
+    document.getElementById("new-folder-row").classList.remove("hidden");
+    document.getElementById("new-folder-input").focus();
   }
 
   function hideNewFolderRow() {
-    document.getElementById('new-folder-row').classList.add('hidden');
-    document.getElementById('new-folder-input').value = '';
+    document.getElementById("new-folder-row").classList.add("hidden");
+    document.getElementById("new-folder-input").value = "";
   }
 
   async function handleNewFolder(e) {
     e.preventDefault();
-    const name = document.getElementById('new-folder-input').value.trim();
+    const name = document.getElementById("new-folder-input").value.trim();
     if (!name) return;
     try {
-      const res = await apiFetch('/api/folders', { method: 'POST', body: JSON.stringify({ name }) });
+      const res = await apiFetch("/api/folders", {
+        method: "POST",
+        body: JSON.stringify({ name }),
+      });
       if (!res) return;
       hideNewFolderRow();
       await loadFolders();
-      showToast('Folder created');
+      showToast("Folder created");
     } catch (err) {
-      showToast('Could not create folder: ' + err.message, 'error');
+      showToast("Could not create folder: " + err.message, "error");
     }
   }
 
   async function confirmDeleteFolder(folder) {
-    if (!confirm(`Delete folder "${folder.name}"?\nItems will be moved to No Folder.`)) return;
+    if (
+      !confirm(
+        `Delete folder "${folder.name}"?\nItems will be moved to No Folder.`,
+      )
+    )
+      return;
     try {
-      const res = await apiFetch(`/api/folders/${folder.id}`, { method: 'DELETE' });
+      const res = await apiFetch(`/api/folders/${folder.id}`, {
+        method: "DELETE",
+      });
       if (!res) return;
-      _items = _items.map(i => i.folder_id === folder.id ? { ...i, folder_id: null } : i);
-      if (_activeFilter?.type === 'folder' && _activeFilter.value === folder.id) {
+      _items = _items.map((i) =>
+        i.folder_id === folder.id ? { ...i, folder_id: null } : i,
+      );
+      if (
+        _activeFilter?.type === "folder" &&
+        _activeFilter.value === folder.id
+      ) {
         _activeFilter = null;
-        updateVaultTitle('All Items');
+        updateVaultTitle("All Items");
       }
       await loadFolders();
       applyCurrentFilter();
-      showToast('Folder deleted');
+      showToast("Folder deleted");
     } catch (err) {
-      showToast('Could not delete folder: ' + err.message, 'error');
+      showToast("Could not delete folder: " + err.message, "error");
     }
   }
 
   // ── Filtering / Search ────────────────────────────────────────────────────
 
   function applyCurrentFilter() {
-    if (!_activeFilter) { renderItemList(_items); return; }
-    if (_activeFilter.type === 'itemType') renderItemList(_items.filter(i => i.item_type === _activeFilter.value));
-    else if (_activeFilter.type === 'folder') renderItemList(_items.filter(i => i.folder_id === _activeFilter.value));
+    if (!_activeFilter) {
+      renderItemList(_items);
+      return;
+    }
+    if (_activeFilter.type === "itemType")
+      renderItemList(_items.filter((i) => i.item_type === _activeFilter.value));
+    else if (_activeFilter.type === "folder")
+      renderItemList(_items.filter((i) => i.folder_id === _activeFilter.value));
   }
 
   function filterByFolder(folderId, name) {
-    _activeFilter = { type: 'folder', value: folderId };
-    switchView('vault');
-    document.querySelectorAll('.sidebar-item').forEach(el => el.classList.remove('active'));
-    document.querySelector(`[data-folder-id="${folderId}"]`)?.classList.add('active');
+    _activeFilter = { type: "folder", value: folderId };
+    switchView("vault");
+    document
+      .querySelectorAll(".sidebar-item")
+      .forEach((el) => el.classList.remove("active"));
+    document
+      .querySelector(`[data-folder-id="${folderId}"]`)
+      ?.classList.add("active");
     updateVaultTitle(name);
-    renderItemList(_items.filter(i => i.folder_id === folderId));
+    renderItemList(_items.filter((i) => i.folder_id === folderId));
   }
 
   function handleSearch(e) {
     const q = e.target.value.trim().toLowerCase();
-    if (!q) { applyCurrentFilter(); return; }
-    const pool = _activeFilter ? (_activeFilter.type === 'itemType' ? _items.filter(i => i.item_type === _activeFilter.value) : _items.filter(i => i.folder_id === _activeFilter.value)) : _items;
-    renderItemList(pool.filter(item =>
-      item.name.toLowerCase().includes(q) ||
-      (item.plain?.username || '').toLowerCase().includes(q) ||
-      (item.plain?.url || '').toLowerCase().includes(q) ||
-      (item.plain?.note_body || '').toLowerCase().includes(q)
-    ));
+    if (!q) {
+      applyCurrentFilter();
+      return;
+    }
+    const pool = _activeFilter
+      ? _activeFilter.type === "itemType"
+        ? _items.filter((i) => i.item_type === _activeFilter.value)
+        : _items.filter((i) => i.folder_id === _activeFilter.value)
+      : _items;
+    renderItemList(
+      pool.filter(
+        (item) =>
+          item.name.toLowerCase().includes(q) ||
+          (item.plain?.username || "").toLowerCase().includes(q) ||
+          (item.plain?.url || "").toLowerCase().includes(q) ||
+          (item.plain?.note_body || "").toLowerCase().includes(q),
+      ),
+    );
   }
 
   function updateVaultTitle(text) {
-    const el = document.getElementById('vault-title');
+    const el = document.getElementById("vault-title");
     if (el) el.textContent = text;
   }
 
   // ── Item Modal ────────────────────────────────────────────────────────────
 
-  const TYPE_LABELS = { password: '🔑 Password', note: '📝 Secure Note', card: '💳 Payment Card', bank: '🏦 Bank Account', address: '🏠 Address', ssn: '🪪 Identity (SSN)' };
+  const TYPE_LABELS = {
+    password: "🔑 Password",
+    note: "📝 Secure Note",
+    card: "💳 Payment Card",
+    bank: "🏦 Bank Account",
+    address: "🏠 Address",
+    ssn: "🪪 Identity (SSN)",
+  };
 
   function switchModalType(type) {
-    document.querySelectorAll('.type-fields').forEach(el => {
-      el.classList.toggle('hidden', !el.dataset.forTypes.split(' ').includes(type));
+    document.querySelectorAll(".type-fields").forEach((el) => {
+      el.classList.toggle(
+        "hidden",
+        !el.dataset.forTypes.split(" ").includes(type),
+      );
     });
   }
 
   function openModal(mode, item = null) {
-    const form = document.getElementById('item-form');
+    const form = document.getElementById("item-form");
     form.reset();
     form.dataset.mode = mode;
-    form.dataset.itemId = item ? item.id : '';
+    form.dataset.itemId = item ? item.id : "";
 
-    const folderSel = document.getElementById('field-folder');
+    const folderSel = document.getElementById("field-folder");
     folderSel.innerHTML = '<option value="">— No folder —</option>';
-    _folders.forEach(f => {
-      const opt = document.createElement('option');
+    _folders.forEach((f) => {
+      const opt = document.createElement("option");
       opt.value = f.id;
       opt.textContent = f.name;
       folderSel.appendChild(opt);
     });
 
-    if (mode === 'add') {
-      document.getElementById('type-selector-group').classList.remove('hidden');
-      document.getElementById('modal-title').textContent = 'Add Item';
-      switchModalType(document.getElementById('field-type').value || 'password');
+    if (mode === "add") {
+      document.getElementById("type-selector-group").classList.remove("hidden");
+      document.getElementById("modal-title").textContent = "Add Item";
+      switchModalType(
+        document.getElementById("field-type").value || "password",
+      );
     } else {
-      document.getElementById('type-selector-group').classList.add('hidden');
-      const t = item.item_type || 'password';
-      document.getElementById('modal-title').textContent = `Edit ${TYPE_LABELS[t] || 'Item'}`;
+      document.getElementById("type-selector-group").classList.add("hidden");
+      const t = item.item_type || "password";
+      document.getElementById("modal-title").textContent =
+        `Edit ${TYPE_LABELS[t] || "Item"}`;
       switchModalType(t);
       form.dataset.itemType = t;
-      setVal('field-name', item.name);
-      setVal('field-folder', item.folder_id || '');
+      setVal("field-name", item.name);
+      setVal("field-folder", item.folder_id || "");
       if (item.plain) {
         const p = item.plain;
         switch (t) {
-          case 'password': setVal('field-url', p.url); setVal('field-username', p.username); setVal('field-password', p.password); setVal('field-notes', p.notes); break;
-          case 'note': setVal('field-note-body', p.note_body); break;
-          case 'card': setVal('field-cardholder', p.cardholder_name); setVal('field-card-number', p.card_number); setVal('field-expiry-month', p.expiry_month); setVal('field-expiry-year', p.expiry_year); setVal('field-cvv', p.cvv); setVal('field-notes', p.notes); break;
-          case 'bank': setVal('field-bank-name', p.bank_name); setVal('field-account-type', p.account_type); setVal('field-routing', p.routing_number); setVal('field-account-number', p.account_number); setVal('field-notes', p.notes); break;
-          case 'address': ['first_name', 'last_name', 'company', 'address_line', 'city', 'state', 'zip', 'country', 'phone', 'email'].forEach(k => setVal('field-' + k.replace(/_/g, '-'), p[k])); setVal('field-notes', p.notes); break;
-          case 'ssn': setVal('field-ssn-number', p.ssn_number); setVal('field-notes', p.notes); break;
+          case "password":
+            setVal("field-url", p.url);
+            setVal("field-username", p.username);
+            setVal("field-password", p.password);
+            setVal("field-notes", p.notes);
+            break;
+          case "note":
+            setVal("field-note-body", p.note_body);
+            break;
+          case "card":
+            setVal("field-cardholder", p.cardholder_name);
+            setVal("field-card-number", p.card_number);
+            setVal("field-expiry-month", p.expiry_month);
+            setVal("field-expiry-year", p.expiry_year);
+            setVal("field-cvv", p.cvv);
+            setVal("field-notes", p.notes);
+            break;
+          case "bank":
+            setVal("field-bank-name", p.bank_name);
+            setVal("field-account-type", p.account_type);
+            setVal("field-routing", p.routing_number);
+            setVal("field-account-number", p.account_number);
+            setVal("field-notes", p.notes);
+            break;
+          case "address":
+            [
+              "first_name",
+              "last_name",
+              "company",
+              "address_line",
+              "city",
+              "state",
+              "zip",
+              "country",
+              "phone",
+              "email",
+            ].forEach((k) => setVal("field-" + k.replace(/_/g, "-"), p[k]));
+            setVal("field-notes", p.notes);
+            break;
+          case "ssn":
+            setVal("field-ssn-number", p.ssn_number);
+            setVal("field-notes", p.notes);
+            break;
         }
       }
     }
-    document.getElementById('item-modal').classList.add('open');
-    document.getElementById('field-name').focus();
-    if ((mode === 'add' && (document.getElementById('field-type').value || 'password') === 'password') ||
-      (mode === 'edit' && (item?.item_type || 'password') === 'password')) {
+    document.getElementById("item-modal").classList.add("open");
+    document.getElementById("field-name").focus();
+    if (
+      (mode === "add" &&
+        (document.getElementById("field-type").value || "password") ===
+          "password") ||
+      (mode === "edit" && (item?.item_type || "password") === "password")
+    ) {
       initPasswordFieldEnhancements();
     }
   }
 
-  function setVal(id, val) { const el = document.getElementById(id); if (el) el.value = val || ''; }
-  function getVal(id) { const el = document.getElementById(id); return el ? el.value : ''; }
+  function setVal(id, val) {
+    const el = document.getElementById(id);
+    if (el) el.value = val || "";
+  }
+  function getVal(id) {
+    const el = document.getElementById(id);
+    return el ? el.value : "";
+  }
 
-  function closeModal(id = 'item-modal') {
-    document.getElementById(id)?.classList.remove('open');
+  function closeModal(id = "item-modal") {
+    document.getElementById(id)?.classList.remove("open");
   }
 
   function buildPlainData(t) {
     switch (t) {
-      case 'password': return { url: getVal('field-url').trim(), username: getVal('field-username').trim(), password: getVal('field-password'), notes: getVal('field-notes').trim() };
-      case 'note': return { note_body: getVal('field-note-body') };
-      case 'card': return { cardholder_name: getVal('field-cardholder').trim(), card_number: getVal('field-card-number').trim(), expiry_month: getVal('field-expiry-month'), expiry_year: getVal('field-expiry-year').trim(), cvv: getVal('field-cvv').trim(), notes: getVal('field-notes').trim() };
-      case 'bank': return { bank_name: getVal('field-bank-name').trim(), account_type: getVal('field-account-type'), routing_number: getVal('field-routing').trim(), account_number: getVal('field-account-number').trim(), notes: getVal('field-notes').trim() };
-      case 'address': return { first_name: getVal('field-first-name').trim(), last_name: getVal('field-last-name').trim(), company: getVal('field-company').trim(), address_line: getVal('field-address-line').trim(), city: getVal('field-city').trim(), state: getVal('field-state').trim(), zip: getVal('field-zip').trim(), country: getVal('field-country').trim(), phone: getVal('field-phone').trim(), email: getVal('field-email').trim(), notes: getVal('field-notes').trim() };
-      case 'ssn': return { ssn_number: getVal('field-ssn-number'), notes: getVal('field-notes').trim() };
-      default: return {};
+      case "password":
+        return {
+          url: getVal("field-url").trim(),
+          username: getVal("field-username").trim(),
+          password: getVal("field-password"),
+          notes: getVal("field-notes").trim(),
+        };
+      case "note":
+        return { note_body: getVal("field-note-body") };
+      case "card":
+        return {
+          cardholder_name: getVal("field-cardholder").trim(),
+          card_number: getVal("field-card-number").trim(),
+          expiry_month: getVal("field-expiry-month"),
+          expiry_year: getVal("field-expiry-year").trim(),
+          cvv: getVal("field-cvv").trim(),
+          notes: getVal("field-notes").trim(),
+        };
+      case "bank":
+        return {
+          bank_name: getVal("field-bank-name").trim(),
+          account_type: getVal("field-account-type"),
+          routing_number: getVal("field-routing").trim(),
+          account_number: getVal("field-account-number").trim(),
+          notes: getVal("field-notes").trim(),
+        };
+      case "address":
+        return {
+          first_name: getVal("field-first-name").trim(),
+          last_name: getVal("field-last-name").trim(),
+          company: getVal("field-company").trim(),
+          address_line: getVal("field-address-line").trim(),
+          city: getVal("field-city").trim(),
+          state: getVal("field-state").trim(),
+          zip: getVal("field-zip").trim(),
+          country: getVal("field-country").trim(),
+          phone: getVal("field-phone").trim(),
+          email: getVal("field-email").trim(),
+          notes: getVal("field-notes").trim(),
+        };
+      case "ssn":
+        return {
+          ssn_number: getVal("field-ssn-number"),
+          notes: getVal("field-notes").trim(),
+        };
+      default:
+        return {};
     }
   }
 
@@ -1609,131 +2160,184 @@ const Vault = (() => {
     e.preventDefault();
     try {
       const vaultKey = VaultSession.getKey();
-      if (!vaultKey) { closeModal(); showUnlockOverlay(); return; }
+      if (!vaultKey) {
+        closeModal();
+        showUnlockOverlay();
+        return;
+      }
       const form = e.target;
       const mode = form.dataset.mode;
       const itemId = form.dataset.itemId;
-      const name = getVal('field-name').trim();
-      if (!name) { showToast('Name is required', 'error'); return; }
+      const name = getVal("field-name").trim();
+      if (!name) {
+        showToast("Name is required", "error");
+        return;
+      }
 
-      const itemType = mode === 'add' ? getVal('field-type') : (form.dataset.itemType || 'password');
-      const { enc_data, iv } = await Crypto.encryptItem(vaultKey, buildPlainData(itemType));
-      const folderVal = getVal('field-folder');
-      const payload = { name, item_type: itemType, folder_id: folderVal ? parseInt(folderVal) : null, enc_data, iv };
+      const itemType =
+        mode === "add"
+          ? getVal("field-type")
+          : form.dataset.itemType || "password";
+      const { enc_data, iv } = await Crypto.encryptItem(
+        vaultKey,
+        buildPlainData(itemType),
+      );
+      const folderVal = getVal("field-folder");
+      const payload = {
+        name,
+        item_type: itemType,
+        folder_id: folderVal ? parseInt(folderVal) : null,
+        enc_data,
+        iv,
+      };
 
-      if (mode === 'add') {
-        const res = await apiFetch('/api/vault', { method: 'POST', body: JSON.stringify(payload) });
+      if (mode === "add") {
+        const res = await apiFetch("/api/vault", {
+          method: "POST",
+          body: JSON.stringify(payload),
+        });
         if (!res) return;
-        showToast('Item added');
+        showToast("Item added");
       } else {
-        const res = await apiFetch(`/api/vault/${itemId}`, { method: 'PUT', body: JSON.stringify(payload) });
+        const res = await apiFetch(`/api/vault/${itemId}`, {
+          method: "PUT",
+          body: JSON.stringify(payload),
+        });
         if (!res) return;
-        showToast('Item updated');
+        showToast("Item updated");
       }
       closeModal();
       await loadVault();
     } catch (err) {
-      showToast('Save failed: ' + err.message, 'error');
+      showToast("Save failed: " + err.message, "error");
     }
   }
 
   async function confirmDeleteItem(item) {
     if (!confirm(`Delete "${item.name}"? This cannot be undone.`)) return;
     try {
-      const res = await apiFetch(`/api/vault/${item.id}`, { method: 'DELETE' });
+      const res = await apiFetch(`/api/vault/${item.id}`, { method: "DELETE" });
       if (!res) return;
-      showToast('Item deleted');
+      showToast("Item deleted");
       await loadVault();
     } catch (err) {
-      showToast('Delete failed: ' + err.message, 'error');
+      showToast("Delete failed: " + err.message, "error");
     }
   }
 
   // ── Logout ────────────────────────────────────────────────────────────────
 
   async function handleLogout() {
-    const refreshToken = localStorage.getItem('refresh_token');
-    await fetch('/api/auth/logout', {
-      method: 'POST',
-      headers: { 'Authorization': `Bearer ${sessionStorage.getItem('access_token') || ''}`, 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken() },
+    const refreshToken = localStorage.getItem("refresh_token");
+    await fetch("/api/auth/logout", {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${sessionStorage.getItem("access_token") || ""}`,
+        "Content-Type": "application/json",
+        "X-CSRFToken": csrfToken(),
+      },
       body: JSON.stringify({ refresh_token: refreshToken }),
-    }).catch(() => { });
+    }).catch(() => {});
     VaultSession.clear();
     SharingSession.clear();
-    sessionStorage.removeItem('access_token');
-    localStorage.removeItem('refresh_token');
-    window.dispatchEvent(new CustomEvent('passkeeper:logout'));
-    window.location.href = '/login';
+    sessionStorage.removeItem("access_token");
+    localStorage.removeItem("refresh_token");
+    window.dispatchEvent(new CustomEvent("passkeeper:logout"));
+    window.location.href = "/login";
   }
 
   // ── Utilities ─────────────────────────────────────────────────────────────
 
-  function copyToClipboard(text, msg = 'Copied') {
-    navigator.clipboard.writeText(text).then(() => showToast(msg)).catch(() => { });
+  function copyToClipboard(text, msg = "Copied") {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => showToast(msg))
+      .catch(() => {});
   }
 
   function escHtml(str) {
-    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    return String(str)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
   }
 
   function itemIcon(type) {
-    return { password: '🔑', note: '📝', card: '💳', bank: '🏦', address: '🏠', ssn: '🪪' }[type] || '🔑';
+    return (
+      {
+        password: "🔑",
+        note: "📝",
+        card: "💳",
+        bank: "🏦",
+        address: "🏠",
+        ssn: "🪪",
+      }[type] || "🔑"
+    );
   }
 
-  function showToast(message, type = 'success') {
-    const toast = document.getElementById('toast');
+  function showToast(message, type = "success") {
+    const toast = document.getElementById("toast");
     if (!toast) return;
     toast.textContent = message;
     toast.className = `toast toast-${type} show`;
     clearTimeout(toast._timer);
-    toast._timer = setTimeout(() => toast.classList.remove('show'), 2500);
+    toast._timer = setTimeout(() => toast.classList.remove("show"), 2500);
   }
 
   function showLoadingState(loading) {
-    document.getElementById('vault-spinner')?.classList.toggle('hidden', !loading);
+    document
+      .getElementById("vault-spinner")
+      ?.classList.toggle("hidden", !loading);
   }
 
   // ── Unlock overlay ────────────────────────────────────────────────────────
 
   function showUnlockOverlay() {
-    document.getElementById('unlock-overlay').classList.add('open');
-    document.getElementById('unlock-password').focus();
+    document.getElementById("unlock-overlay").classList.add("open");
+    document.getElementById("unlock-password").focus();
   }
 
   async function handleUnlock(e) {
     e.preventDefault();
-    const password = document.getElementById('unlock-password').value;
-    const enc_key_salt = sessionStorage.getItem('enc_key_salt');
+    const password = document.getElementById("unlock-password").value;
+    const enc_key_salt = sessionStorage.getItem("enc_key_salt");
     const btn = e.target.querySelector('[type="submit"]');
-    const errEl = document.getElementById('unlock-error');
-    if (!enc_key_salt) { redirectToLogin(); return; }
+    const errEl = document.getElementById("unlock-error");
+    if (!enc_key_salt) {
+      redirectToLogin();
+      return;
+    }
 
-    btn.disabled = true; btn.textContent = 'Unlocking…'; errEl.classList.add('hidden');
+    btn.disabled = true;
+    btn.textContent = "Unlocking…";
+    errEl.classList.add("hidden");
     try {
       const vaultKey = await Crypto.deriveVaultKey(password, enc_key_salt);
       VaultSession.setKey(vaultKey);
-      document.getElementById('unlock-overlay').classList.remove('open');
+      document.getElementById("unlock-overlay").classList.remove("open");
       await loadFolders();
       await loadVault();
     } catch {
-      errEl.classList.remove('hidden');
+      errEl.classList.remove("hidden");
     } finally {
-      btn.disabled = false; btn.textContent = 'Unlock';
-      document.getElementById('unlock-password').value = '';
+      btn.disabled = false;
+      btn.textContent = "Unlock";
+      document.getElementById("unlock-password").value = "";
     }
   }
 
   // ── Tabs ──────────────────────────────────────────────────────────────────
 
   function initTabs(container) {
-    const tabs = container.querySelectorAll('.tab-btn');
-    tabs.forEach(btn => {
-      btn.addEventListener('click', () => {
-        tabs.forEach(t => t.classList.remove('active'));
-        btn.classList.add('active');
+    const tabs = container.querySelectorAll(".tab-btn");
+    tabs.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        tabs.forEach((t) => t.classList.remove("active"));
+        btn.classList.add("active");
         const target = btn.dataset.tab;
-        container.querySelectorAll('.tab-pane').forEach(pane => {
-          pane.classList.toggle('hidden', !pane.id.endsWith(target));
+        container.querySelectorAll(".tab-pane").forEach((pane) => {
+          pane.classList.toggle("hidden", !pane.id.endsWith(target));
         });
       });
     });
@@ -1742,157 +2346,345 @@ const Vault = (() => {
   // ── Init ──────────────────────────────────────────────────────────────────
 
   async function init() {
-    if (!sessionStorage.getItem('access_token')) {
+    if (!sessionStorage.getItem("access_token")) {
       // Give the extension bridge up to 800 ms to inject a session before redirecting
-      await new Promise(resolve => {
+      await new Promise((resolve) => {
         const timer = setTimeout(resolve, 800);
-        window.addEventListener('passkeeper:ext-login', () => { clearTimeout(timer); resolve(); }, { once: true });
+        window.addEventListener(
+          "passkeeper:ext-login",
+          () => {
+            clearTimeout(timer);
+            resolve();
+          },
+          { once: true },
+        );
       });
 
       // Still no token — try a silent refresh using the persisted refresh_token
       // before giving up and redirecting. This handles hard-refresh / new-tab scenarios.
-      if (!sessionStorage.getItem('access_token')) {
+      if (!sessionStorage.getItem("access_token")) {
         const refreshed = await tryRefreshToken();
-        if (!refreshed) { window.location.href = '/login'; return; }
+        if (!refreshed) {
+          window.location.href = "/login";
+          return;
+        }
       }
     }
 
     // Vault
-    document.getElementById('unlock-form')?.addEventListener('submit', handleUnlock);
-    document.getElementById('btn-new-folder')?.addEventListener('click', showNewFolderRow);
-    document.getElementById('btn-cancel-folder')?.addEventListener('click', hideNewFolderRow);
-    document.getElementById('new-folder-form')?.addEventListener('submit', handleNewFolder);
-    document.getElementById('search-input')?.addEventListener('input', handleSearch);
-    document.getElementById('btn-add-item')?.addEventListener('click', () => openModal('add'));
-    document.getElementById('btn-close-modal')?.addEventListener('click', () => closeModal());
-    document.getElementById('btn-cancel-modal')?.addEventListener('click', () => closeModal());
-    document.getElementById('item-form')?.addEventListener('submit', handleFormSubmit);
-    document.getElementById('btn-logout')?.addEventListener('click', handleLogout);
+    document
+      .getElementById("unlock-form")
+      ?.addEventListener("submit", handleUnlock);
+    document
+      .getElementById("btn-new-folder")
+      ?.addEventListener("click", showNewFolderRow);
+    document
+      .getElementById("btn-cancel-folder")
+      ?.addEventListener("click", hideNewFolderRow);
+    document
+      .getElementById("new-folder-form")
+      ?.addEventListener("submit", handleNewFolder);
+    document
+      .getElementById("search-input")
+      ?.addEventListener("input", handleSearch);
+    document
+      .getElementById("btn-add-item")
+      ?.addEventListener("click", () => openModal("add"));
+    document
+      .getElementById("btn-close-modal")
+      ?.addEventListener("click", () => closeModal());
+    document
+      .getElementById("btn-cancel-modal")
+      ?.addEventListener("click", () => closeModal());
+    document
+      .getElementById("item-form")
+      ?.addEventListener("submit", handleFormSubmit);
+    document
+      .getElementById("btn-logout")
+      ?.addEventListener("click", handleLogout);
 
-    document.getElementById('sort-select')?.addEventListener('change', e => { _sortOrder = e.target.value; applyCurrentFilter(); });
-    document.getElementById('field-type')?.addEventListener('change', e => {
-      switchModalType(e.target.value);
-      if (e.target.value === 'password') initPasswordFieldEnhancements();
+    document.getElementById("sort-select")?.addEventListener("change", (e) => {
+      _sortOrder = e.target.value;
+      applyCurrentFilter();
+    });
+    document.getElementById("field-type")?.addEventListener("change", (e) => {
+      switchModalType(e.target.value);
+      if (e.target.value === "password") initPasswordFieldEnhancements();
+    });
+    document
+      .getElementById("btn-toggle-pass")
+      ?.addEventListener("click", () => {
+        const el = document.getElementById("field-password");
+        el.type = el.type === "password" ? "text" : "password";
+      });
+    document.getElementById("btn-toggle-ssn")?.addEventListener("click", () => {
+      const el = document.getElementById("field-ssn-number");
+      el.type = el.type === "password" ? "text" : "password";
     });
-    document.getElementById('btn-toggle-pass')?.addEventListener('click', () => { const el = document.getElementById('field-password'); el.type = el.type === 'password' ? 'text' : 'password'; });
-    document.getElementById('btn-toggle-ssn')?.addEventListener('click', () => { const el = document.getElementById('field-ssn-number'); el.type = el.type === 'password' ? 'text' : 'password'; });
 
     // Sidebar navigation
-    document.getElementById('sidebar-all')?.addEventListener('click', () => {
-      _activeFilter = null; switchView('vault');
-      document.querySelectorAll('.sidebar-item').forEach(el => el.classList.remove('active'));
-      document.getElementById('sidebar-all').classList.add('active');
-      updateVaultTitle('All Items'); renderItemList(_items);
+    document.getElementById("sidebar-all")?.addEventListener("click", () => {
+      _activeFilter = null;
+      switchView("vault");
+      document
+        .querySelectorAll(".sidebar-item")
+        .forEach((el) => el.classList.remove("active"));
+      document.getElementById("sidebar-all").classList.add("active");
+      updateVaultTitle("All Items");
+      renderItemList(_items);
     });
-    document.getElementById('sidebar-security')?.addEventListener('click', () => switchView('security'));
-    document.getElementById('sidebar-sharing')?.addEventListener('click', () => switchView('sharing'));
-    document.getElementById('sidebar-emergency')?.addEventListener('click', () => switchView('emergency'));
-    document.getElementById('sidebar-generator')?.addEventListener('click', () => openPasswordGeneratorModal());
+    document
+      .getElementById("sidebar-security")
+      ?.addEventListener("click", () => switchView("security"));
+    document
+      .getElementById("sidebar-sharing")
+      ?.addEventListener("click", () => switchView("sharing"));
+    document
+      .getElementById("sidebar-emergency")
+      ?.addEventListener("click", () => switchView("emergency"));
+    document
+      .getElementById("sidebar-generator")
+      ?.addEventListener("click", () => openPasswordGeneratorModal());
 
-    document.querySelectorAll('[data-type-filter]').forEach(el => {
-      el.addEventListener('click', () => {
+    document.querySelectorAll("[data-type-filter]").forEach((el) => {
+      el.addEventListener("click", () => {
         const type = el.dataset.typeFilter;
-        const labels = { password: 'Passwords', note: 'Secure Notes', card: 'Payment Cards', bank: 'Bank Accounts', address: 'Addresses', ssn: 'Identities' };
-        _activeFilter = { type: 'itemType', value: type };
-        switchView('vault');
-        document.querySelectorAll('.sidebar-item').forEach(s => s.classList.remove('active'));
-        el.classList.add('active');
+        const labels = {
+          password: "Passwords",
+          note: "Secure Notes",
+          card: "Payment Cards",
+          bank: "Bank Accounts",
+          address: "Addresses",
+          ssn: "Identities",
+        };
+        _activeFilter = { type: "itemType", value: type };
+        switchView("vault");
+        document
+          .querySelectorAll(".sidebar-item")
+          .forEach((s) => s.classList.remove("active"));
+        el.classList.add("active");
         updateVaultTitle(labels[type] || type);
-        renderItemList(_items.filter(i => i.item_type === type));
+        renderItemList(_items.filter((i) => i.item_type === type));
       });
     });
 
-    document.getElementById('item-modal')?.addEventListener('click', e => { /* backdrop click intentionally disabled — modal closes only via Cancel or Save */ });
-    document.addEventListener('keydown', e => { if (e.key === 'Escape') { closeModal('share-modal'); closeModal('emergency-modal'); closeModal('settings-modal'); closeModal('detail-modal'); closeModal('gen-modal'); } });
+    document.getElementById("item-modal")?.addEventListener("click", (e) => {
+      /* backdrop click intentionally disabled — modal closes only via Cancel or Save */
+    });
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        closeModal("share-modal");
+        closeModal("emergency-modal");
+        closeModal("settings-modal");
+        closeModal("detail-modal");
+        closeModal("gen-modal");
+      }
+    });
 
     // Detail modal (shared item view)
-    const closeDetailModal = () => closeModal('detail-modal');
-    document.getElementById('btn-close-detail-modal')?.addEventListener('click', closeDetailModal);
-    document.getElementById('btn-detail-done')?.addEventListener('click', closeDetailModal);
-    document.getElementById('detail-modal')?.addEventListener('click', e => { if (e.target.id === 'detail-modal') closeDetailModal(); });
-
-    document.getElementById('field-card-number')?.addEventListener('input', e => {
-      let v = e.target.value.replace(/\D/g, '').slice(0, 16);
-      e.target.value = v.replace(/(.{4})/g, '$1 ').trim();
+    const closeDetailModal = () => closeModal("detail-modal");
+    document
+      .getElementById("btn-close-detail-modal")
+      ?.addEventListener("click", closeDetailModal);
+    document
+      .getElementById("btn-detail-done")
+      ?.addEventListener("click", closeDetailModal);
+    document.getElementById("detail-modal")?.addEventListener("click", (e) => {
+      if (e.target.id === "detail-modal") closeDetailModal();
     });
 
+    document
+      .getElementById("field-card-number")
+      ?.addEventListener("input", (e) => {
+        let v = e.target.value.replace(/\D/g, "").slice(0, 16);
+        e.target.value = v.replace(/(.{4})/g, "$1 ").trim();
+      });
+
     // Settings modal
-    document.getElementById('btn-settings')?.addEventListener('click', openSettingsModal);
-    document.getElementById('btn-close-settings')?.addEventListener('click', () => closeModal('settings-modal'));
-    document.getElementById('settings-modal')?.addEventListener('click', e => { if (e.target.id === 'settings-modal') closeModal('settings-modal'); });
-    document.getElementById('btn-mfa-confirm')?.addEventListener('click', handleMfaConfirm);
-    document.getElementById('btn-mfa-cancel-setup')?.addEventListener('click', () => { document.getElementById('mfa-setup-area').classList.add('hidden'); loadMfaStatus(); });
-    document.getElementById('btn-mfa-disable-confirm')?.addEventListener('click', handleMfaDisableConfirm);
-    document.getElementById('btn-mfa-disable-cancel')?.addEventListener('click', () => { document.getElementById('mfa-disable-area').classList.add('hidden'); loadMfaStatus(); });
-    document.getElementById('btn-change-password')?.addEventListener('click', handleChangePassword);
-    document.getElementById('btn-delete-account')?.addEventListener('click', () => {
-      document.getElementById('btn-delete-account').classList.add('hidden');
-      document.getElementById('delete-confirm-area').classList.remove('hidden');
-      document.getElementById('delete-password').focus();
-    });
-    document.getElementById('btn-delete-cancel')?.addEventListener('click', () => {
-      document.getElementById('delete-confirm-area').classList.add('hidden');
-      document.getElementById('btn-delete-account').classList.remove('hidden');
-      document.getElementById('delete-password').value = '';
-      document.getElementById('delete-error').classList.add('hidden');
-    });
-    document.getElementById('btn-delete-confirm')?.addEventListener('click', handleDeleteAccount);
-    document.getElementById('btn-copy-recovery-code')?.addEventListener('click', () => {
-      const code = document.getElementById('recovery-code-value').textContent;
-      navigator.clipboard.writeText(code).then(() => showToast('Recovery code copied'));
-    });
-    document.getElementById('btn-recovery-done')?.addEventListener('click', () => {
-      document.getElementById('recovery-code-display').classList.add('hidden');
-      loadRecoveryStatus();
-    });
+    document
+      .getElementById("btn-settings")
+      ?.addEventListener("click", openSettingsModal);
+    document
+      .getElementById("btn-close-settings")
+      ?.addEventListener("click", () => closeModal("settings-modal"));
+    document
+      .getElementById("settings-modal")
+      ?.addEventListener("click", (e) => {
+        if (e.target.id === "settings-modal") closeModal("settings-modal");
+      });
+    document
+      .getElementById("btn-mfa-confirm")
+      ?.addEventListener("click", handleMfaConfirm);
+    document
+      .getElementById("btn-mfa-cancel-setup")
+      ?.addEventListener("click", () => {
+        document.getElementById("mfa-setup-area").classList.add("hidden");
+        loadMfaStatus();
+      });
+    document
+      .getElementById("btn-mfa-disable-confirm")
+      ?.addEventListener("click", handleMfaDisableConfirm);
+    document
+      .getElementById("btn-mfa-disable-cancel")
+      ?.addEventListener("click", () => {
+        document.getElementById("mfa-disable-area").classList.add("hidden");
+        loadMfaStatus();
+      });
+    document
+      .getElementById("btn-change-password")
+      ?.addEventListener("click", handleChangePassword);
+    document
+      .getElementById("btn-delete-account")
+      ?.addEventListener("click", () => {
+        document.getElementById("btn-delete-account").classList.add("hidden");
+        document
+          .getElementById("delete-confirm-area")
+          .classList.remove("hidden");
+        document.getElementById("delete-password").focus();
+      });
+    document
+      .getElementById("btn-delete-cancel")
+      ?.addEventListener("click", () => {
+        document.getElementById("delete-confirm-area").classList.add("hidden");
+        document
+          .getElementById("btn-delete-account")
+          .classList.remove("hidden");
+        document.getElementById("delete-password").value = "";
+        document.getElementById("delete-error").classList.add("hidden");
+      });
+    document
+      .getElementById("btn-delete-confirm")
+      ?.addEventListener("click", handleDeleteAccount);
+    document
+      .getElementById("btn-copy-recovery-code")
+      ?.addEventListener("click", () => {
+        const code = document.getElementById("recovery-code-value").textContent;
+        navigator.clipboard
+          .writeText(code)
+          .then(() => showToast("Recovery code copied"));
+      });
+    document
+      .getElementById("btn-recovery-done")
+      ?.addEventListener("click", () => {
+        document
+          .getElementById("recovery-code-display")
+          .classList.add("hidden");
+        loadRecoveryStatus();
+      });
 
     // Share modal
-    document.getElementById('btn-share-item')?.addEventListener('click', openShareModal);
-    document.getElementById('btn-close-share-modal')?.addEventListener('click', () => closeModal('share-modal'));
-    document.getElementById('btn-cancel-share')?.addEventListener('click', () => closeModal('share-modal'));
-    document.getElementById('share-modal')?.addEventListener('click', e => { if (e.target.id === 'share-modal') closeModal('share-modal'); });
-    document.getElementById('share-form')?.addEventListener('submit', handleShareFormSubmit);
-    document.getElementById('btn-setup-keys-from-sharing')?.addEventListener('click', () => { closeModal('share-modal'); openSettingsModal(); });
+    document
+      .getElementById("btn-share-item")
+      ?.addEventListener("click", openShareModal);
+    document
+      .getElementById("btn-close-share-modal")
+      ?.addEventListener("click", () => closeModal("share-modal"));
+    document
+      .getElementById("btn-cancel-share")
+      ?.addEventListener("click", () => closeModal("share-modal"));
+    document.getElementById("share-modal")?.addEventListener("click", (e) => {
+      if (e.target.id === "share-modal") closeModal("share-modal");
+    });
+    document
+      .getElementById("share-form")
+      ?.addEventListener("submit", handleShareFormSubmit);
+    document
+      .getElementById("btn-setup-keys-from-sharing")
+      ?.addEventListener("click", () => {
+        closeModal("share-modal");
+        openSettingsModal();
+      });
 
     // Emergency modal
-    document.getElementById('btn-add-emergency')?.addEventListener('click', () => {
-      document.getElementById('emergency-error').classList.add('hidden');
-      document.getElementById('emergency-modal').classList.add('open');
-    });
-    document.getElementById('btn-close-emergency-modal')?.addEventListener('click', () => closeModal('emergency-modal'));
-    document.getElementById('btn-cancel-emergency')?.addEventListener('click', () => closeModal('emergency-modal'));
-    document.getElementById('emergency-modal')?.addEventListener('click', e => { if (e.target.id === 'emergency-modal') closeModal('emergency-modal'); });
-    document.getElementById('emergency-form')?.addEventListener('submit', handleEmergencyFormSubmit);
+    document
+      .getElementById("btn-add-emergency")
+      ?.addEventListener("click", () => {
+        document.getElementById("emergency-error").classList.add("hidden");
+        document.getElementById("emergency-modal").classList.add("open");
+      });
+    document
+      .getElementById("btn-close-emergency-modal")
+      ?.addEventListener("click", () => closeModal("emergency-modal"));
+    document
+      .getElementById("btn-cancel-emergency")
+      ?.addEventListener("click", () => closeModal("emergency-modal"));
+    document
+      .getElementById("emergency-modal")
+      ?.addEventListener("click", (e) => {
+        if (e.target.id === "emergency-modal") closeModal("emergency-modal");
+      });
+    document
+      .getElementById("emergency-form")
+      ?.addEventListener("submit", handleEmergencyFormSubmit);
 
     // Tabs
-    document.querySelectorAll('.panel-tabs').forEach(c => initTabs(c));
+    document.querySelectorAll(".panel-tabs").forEach((c) => initTabs(c));
 
-    if (!VaultSession.getKey()) { showUnlockOverlay(); } else { loadVault(); }
+    // Sidebar collapse toggle (persisted in localStorage)
+    const sidebar = document.getElementById("sidebar");
+    const toggleBtn = document.getElementById("btn-sidebar-toggle");
+    if (sidebar && toggleBtn) {
+      const STORAGE_KEY = "sidebar_collapsed";
+      // Restore saved state immediately (before paint)
+      if (localStorage.getItem(STORAGE_KEY) === "1") {
+        sidebar.classList.add("collapsed");
+        toggleBtn.setAttribute("aria-label", "Expand sidebar");
+        toggleBtn.setAttribute("title", "Expand sidebar");
+      }
+      toggleBtn.addEventListener("click", () => {
+        const isCollapsed = sidebar.classList.toggle("collapsed");
+        localStorage.setItem(STORAGE_KEY, isCollapsed ? "1" : "0");
+        toggleBtn.setAttribute(
+          "aria-label",
+          isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+        );
+        toggleBtn.setAttribute(
+          "title",
+          isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+        );
+      });
+    }
+
+    if (!VaultSession.getKey()) {
+      showUnlockOverlay();
+    } else {
+      loadVault();
+    }
   }
 
   async function handleEmergencyFormSubmit(e) {
     e.preventDefault();
-    const errEl = document.getElementById('emergency-error');
-    errEl.classList.add('hidden');
-    const email = document.getElementById('emergency-email').value.trim().toLowerCase();
-    const waitDays = document.getElementById('emergency-wait-days').value;
-    if (!email) { errEl.textContent = 'Email is required.'; errEl.classList.remove('hidden'); return; }
+    const errEl = document.getElementById("emergency-error");
+    errEl.classList.add("hidden");
+    const email = document
+      .getElementById("emergency-email")
+      .value.trim()
+      .toLowerCase();
+    const waitDays = document.getElementById("emergency-wait-days").value;
+    if (!email) {
+      errEl.textContent = "Email is required.";
+      errEl.classList.remove("hidden");
+      return;
+    }
     try {
-      const res = await apiFetch('/api/emergency', {
-        method: 'POST',
-        body: JSON.stringify({ grantee_email: email, wait_days: parseInt(waitDays) }),
+      const res = await apiFetch("/api/emergency", {
+        method: "POST",
+        body: JSON.stringify({
+          grantee_email: email,
+          wait_days: parseInt(waitDays),
+        }),
       });
       if (!res) return;
-      closeModal('emergency-modal');
-      showToast('Invitation sent');
+      closeModal("emergency-modal");
+      showToast("Invitation sent");
       loadEmergencyView();
     } catch (err) {
       errEl.textContent = err.message;
-      errEl.classList.remove('hidden');
+      errEl.classList.remove("hidden");
     }
   }
 
   return { init };
 })();
 
-document.addEventListener('DOMContentLoaded', Vault.init);
\ No newline at end of file
+document.addEventListener("DOMContentLoaded", Vault.init);
diff --git a/app/templates/vault/index.html b/app/templates/vault/index.html
index 47d8a07..cf086b8 100644
--- a/app/templates/vault/index.html
+++ b/app/templates/vault/index.html
@@ -1,63 +1,140 @@
-{% extends "base.html" %}
-{% block title %}My Vault — PassKeeper{% endblock %}
-{% block body_class %}vault-page{% endblock %}
-
-{% block body %}
+{% extends "base.html" %} {% block title %}My Vault — PassKeeper{% endblock %}
+{% block body_class %}vault-page{% endblock %} {% block body %}
 <div class="app-layout">
-
   <!-- ── Sidebar ─────────────────────────────────────────────────── -->
-  <aside class="sidebar">
+  <aside class="sidebar" id="sidebar">
     <div class="sidebar-header">
       <span class="logo-icon">🔒</span>
       <span class="logo-text">PassKeeper</span>
+      <button
+        class="btn-sidebar-toggle"
+        id="btn-sidebar-toggle"
+        aria-label="Collapse sidebar"
+        title="Collapse sidebar"
+      >
+        &#x276E;
+      </button>
     </div>
 
     <nav class="sidebar-nav">
       <ul>
-        <li class="sidebar-item active" id="sidebar-all" data-view="vault">
-          <span class="sidebar-icon">🏠</span> <span class="sidebar-label">All Items</span>
+        <li
+          class="sidebar-item active"
+          id="sidebar-all"
+          data-view="vault"
+          data-tooltip="All Items"
+        >
+          <span class="sidebar-icon">🏠</span>
+          <span class="sidebar-label">All Items</span>
         </li>
         <li class="sidebar-section-header">Item Types</li>
-        <li class="sidebar-item" data-type-filter="password">
-          <span class="sidebar-icon">🔑</span> <span class="sidebar-label">Passwords</span>
+        <li
+          class="sidebar-item"
+          data-type-filter="password"
+          data-tooltip="Passwords"
+        >
+          <span class="sidebar-icon">🔑</span>
+          <span class="sidebar-label">Passwords</span>
         </li>
-        <li class="sidebar-item" data-type-filter="note">
-          <span class="sidebar-icon">📝</span> <span class="sidebar-label">Secure Notes</span>
+        <li
+          class="sidebar-item"
+          data-type-filter="note"
+          data-tooltip="Secure Notes"
+        >
+          <span class="sidebar-icon">📝</span>
+          <span class="sidebar-label">Secure Notes</span>
         </li>
-        <li class="sidebar-item" data-type-filter="card">
-          <span class="sidebar-icon">💳</span> <span class="sidebar-label">Payment Cards</span>
+        <li
+          class="sidebar-item"
+          data-type-filter="card"
+          data-tooltip="Payment Cards"
+        >
+          <span class="sidebar-icon">💳</span>
+          <span class="sidebar-label">Payment Cards</span>
         </li>
-        <li class="sidebar-item" data-type-filter="bank">
-          <span class="sidebar-icon">🏦</span> <span class="sidebar-label">Bank Accounts</span>
+        <li
+          class="sidebar-item"
+          data-type-filter="bank"
+          data-tooltip="Bank Accounts"
+        >
+          <span class="sidebar-icon">🏦</span>
+          <span class="sidebar-label">Bank Accounts</span>
         </li>
-        <li class="sidebar-item" data-type-filter="address">
-          <span class="sidebar-icon">🏠</span> <span class="sidebar-label">Addresses</span>
+        <li
+          class="sidebar-item"
+          data-type-filter="address"
+          data-tooltip="Addresses"
+        >
+          <span class="sidebar-icon">🏠</span>
+          <span class="sidebar-label">Addresses</span>
         </li>
-        <li class="sidebar-item" data-type-filter="ssn">
-          <span class="sidebar-icon">🪪</span> <span class="sidebar-label">Identities</span>
+        <li
+          class="sidebar-item"
+          data-type-filter="ssn"
+          data-tooltip="Identities"
+        >
+          <span class="sidebar-icon">🪪</span>
+          <span class="sidebar-label">Identities</span>
         </li>
         <li class="sidebar-section-header">Tools</li>
-        <li class="sidebar-item" id="sidebar-security" data-view="security">
-          <span class="sidebar-icon">🛡️</span> <span class="sidebar-label">Security</span>
+        <li
+          class="sidebar-item"
+          id="sidebar-security"
+          data-view="security"
+          data-tooltip="Security"
+        >
+          <span class="sidebar-icon">🛡️</span>
+          <span class="sidebar-label">Security</span>
         </li>
-        <li class="sidebar-item" id="sidebar-sharing" data-view="sharing">
-          <span class="sidebar-icon">🔗</span> <span class="sidebar-label">Sharing</span>
+        <li
+          class="sidebar-item"
+          id="sidebar-sharing"
+          data-view="sharing"
+          data-tooltip="Sharing"
+        >
+          <span class="sidebar-icon">🔗</span>
+          <span class="sidebar-label">Sharing</span>
         </li>
-        <li class="sidebar-item" id="sidebar-emergency" data-view="emergency">
-          <span class="sidebar-icon">🚨</span> <span class="sidebar-label">Emergency Access</span>
+        <li
+          class="sidebar-item"
+          id="sidebar-emergency"
+          data-view="emergency"
+          data-tooltip="Emergency Access"
+        >
+          <span class="sidebar-icon">🚨</span>
+          <span class="sidebar-label">Emergency Access</span>
         </li>
-        <li class="sidebar-item" id="sidebar-generator">
-          <span class="sidebar-icon">⚡</span> <span class="sidebar-label">Password Generator</span>
+        <li
+          class="sidebar-item"
+          id="sidebar-generator"
+          data-tooltip="Password Generator"
+        >
+          <span class="sidebar-icon">⚡</span>
+          <span class="sidebar-label">Password Generator</span>
         </li>
         <li class="sidebar-section-header">
           Folders
-          <button class="btn-new-folder" id="btn-new-folder" title="New folder">+</button>
+          <button class="btn-new-folder" id="btn-new-folder" title="New folder">
+            +
+          </button>
         </li>
         <li id="new-folder-row" class="new-folder-row hidden">
           <form id="new-folder-form">
-            <input type="text" id="new-folder-input" placeholder="Folder name" maxlength="128">
+            <input
+              type="text"
+              id="new-folder-input"
+              placeholder="Folder name"
+              maxlength="128"
+            />
             <button type="submit" class="btn-icon" title="Save">✓</button>
-            <button type="button" class="btn-icon" id="btn-cancel-folder" title="Cancel">✕</button>
+            <button
+              type="button"
+              class="btn-icon"
+              id="btn-cancel-folder"
+              title="Cancel"
+            >
+              ✕
+            </button>
           </form>
         </li>
         <ul id="sidebar-folders"></ul>
@@ -65,18 +142,27 @@
     </nav>
 
     <div class="sidebar-footer">
-      <button class="sidebar-item btn-text" id="btn-settings">
-        <span class="sidebar-icon">⚙️</span> <span class="sidebar-label">Settings</span>
+      <button
+        class="sidebar-item btn-text"
+        id="btn-settings"
+        data-tooltip="Settings"
+      >
+        <span class="sidebar-icon">⚙️</span>
+        <span class="sidebar-label">Settings</span>
       </button>
-      <button class="sidebar-item btn-text" id="btn-logout">
-        <span class="sidebar-icon">🚪</span> <span class="sidebar-label">Sign out</span>
+      <button
+        class="sidebar-item btn-text"
+        id="btn-logout"
+        data-tooltip="Sign out"
+      >
+        <span class="sidebar-icon">🚪</span>
+        <span class="sidebar-label">Sign out</span>
       </button>
     </div>
   </aside>
 
   <!-- ── Main ───────────────────────────────────────────────────── -->
   <main class="vault-main">
-
     <!-- Vault view -->
     <div id="view-vault">
       <header class="vault-header">
@@ -84,7 +170,12 @@
         <div class="vault-toolbar">
           <div class="search-wrapper">
             <span class="search-icon">🔍</span>
-            <input type="search" id="search-input" placeholder="Search vault…" autocomplete="off">
+            <input
+              type="search"
+              id="search-input"
+              placeholder="Search vault…"
+              autocomplete="off"
+            />
           </div>
           <div class="sort-wrapper">
             <select id="sort-select" title="Sort by">
@@ -98,13 +189,17 @@
           <button class="btn-fab" id="btn-add-item" title="Add item">+</button>
         </div>
       </header>
-      <div id="vault-spinner" class="spinner-overlay hidden"><div class="spinner"></div></div>
+      <div id="vault-spinner" class="spinner-overlay hidden">
+        <div class="spinner"></div>
+      </div>
       <ul id="vault-list" class="vault-list"></ul>
     </div>
 
     <!-- Security dashboard view -->
     <div id="view-security" class="hidden">
-      <header class="vault-header"><h2 class="vault-title">Security Dashboard</h2></header>
+      <header class="vault-header">
+        <h2 class="vault-title">Security Dashboard</h2>
+      </header>
       <div class="security-dashboard">
         <div class="security-summary" id="security-summary"></div>
         <div class="security-sections" id="security-sections"></div>
@@ -116,16 +211,22 @@
       <header class="vault-header">
         <h2 class="vault-title">Sharing</h2>
         <div class="vault-toolbar">
-          <button class="btn-primary btn-sm" id="btn-share-item">+ Share an item</button>
+          <button class="btn-primary btn-sm" id="btn-share-item">
+            + Share an item
+          </button>
         </div>
       </header>
       <div class="panel-body">
         <div id="sharing-keys-notice" class="notice-info hidden">
           You need to set up sharing keys before you can share items.
-          <button class="btn-primary btn-sm" id="btn-setup-keys-from-sharing">Set up keys</button>
+          <button class="btn-primary btn-sm" id="btn-setup-keys-from-sharing">
+            Set up keys
+          </button>
         </div>
         <div class="panel-tabs">
-          <button class="tab-btn active" data-tab="shared-out">Shared by me</button>
+          <button class="tab-btn active" data-tab="shared-out">
+            Shared by me
+          </button>
           <button class="tab-btn" data-tab="shared-in">Shared with me</button>
         </div>
         <div id="tab-shared-out" class="tab-pane">
@@ -142,13 +243,19 @@
       <header class="vault-header">
         <h2 class="vault-title">Emergency Access</h2>
         <div class="vault-toolbar">
-          <button class="btn-primary btn-sm" id="btn-add-emergency">+ Add trusted contact</button>
+          <button class="btn-primary btn-sm" id="btn-add-emergency">
+            + Add trusted contact
+          </button>
         </div>
       </header>
       <div class="panel-body">
         <div class="panel-tabs">
-          <button class="tab-btn active" data-tab="em-grants">My trusted contacts</button>
-          <button class="tab-btn" data-tab="em-access">I'm a trusted contact</button>
+          <button class="tab-btn active" data-tab="em-grants">
+            My trusted contacts
+          </button>
+          <button class="tab-btn" data-tab="em-access">
+            I'm a trusted contact
+          </button>
         </div>
         <div id="tab-em-grants" class="tab-pane">
           <ul id="em-grants-list" class="share-list"></ul>
@@ -158,28 +265,44 @@
           <div id="em-vault-panel" class="em-vault-panel hidden">
             <div class="em-vault-header">
               <h4>Emergency Vault — Decrypted Items</h4>
-              <button class="btn-secondary btn-sm" id="btn-em-vault-back">← Back</button>
+              <button class="btn-secondary btn-sm" id="btn-em-vault-back">
+                ← Back
+              </button>
             </div>
             <ul id="em-vault-list" class="em-vault-list"></ul>
           </div>
         </div>
       </div>
     </div>
-
   </main>
 </div>
 
 <!-- ── Unlock overlay ──────────────────────────────────────────────── -->
-<div id="unlock-overlay" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="unlock-title">
+<div
+  id="unlock-overlay"
+  class="modal-overlay"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="unlock-title"
+>
   <div class="modal modal-unlock">
-    <div class="auth-logo unlock-logo"><span class="logo-icon">🔒</span><span class="logo-text">PassKeeper</span></div>
+    <div class="auth-logo unlock-logo">
+      <span class="logo-icon">🔒</span><span class="logo-text">PassKeeper</span>
+    </div>
     <h3 id="unlock-title" class="unlock-title">Unlock your vault</h3>
     <p class="unlock-subtitle">Re-enter your master password to continue.</p>
-    <p id="unlock-error" class="form-error hidden">Incorrect master password.</p>
+    <p id="unlock-error" class="form-error hidden">
+      Incorrect master password.
+    </p>
     <form id="unlock-form" novalidate>
       <div class="form-group">
         <label for="unlock-password">Master password</label>
-        <input type="password" id="unlock-password" autocomplete="current-password" placeholder="Enter master password">
+        <input
+          type="password"
+          id="unlock-password"
+          autocomplete="current-password"
+          placeholder="Enter master password"
+        />
       </div>
       <div class="modal-actions">
         <a href="/login" class="btn-secondary btn-link">Sign out</a>
@@ -190,11 +313,23 @@
 </div>
 
 <!-- ── Add / Edit Item Modal ─────────────────────────────────────────── -->
-<div id="item-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+<div
+  id="item-modal"
+  class="modal-overlay"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="modal-title"
+>
   <div class="modal modal-item">
     <div class="modal-header">
       <h3 id="modal-title">Add Item</h3>
-      <button class="btn-icon btn-close" id="btn-close-modal" aria-label="Close">✕</button>
+      <button
+        class="btn-icon btn-close"
+        id="btn-close-modal"
+        aria-label="Close"
+      >
+        ✕
+      </button>
     </div>
     <form id="item-form" novalidate>
       <div class="form-group" id="type-selector-group">
@@ -210,82 +345,260 @@
       </div>
       <div class="form-group">
         <label for="field-name">Name <span class="required">*</span></label>
-        <input type="text" id="field-name" name="name" required placeholder="e.g. Gmail">
+        <input
+          type="text"
+          id="field-name"
+          name="name"
+          required
+          placeholder="e.g. Gmail"
+        />
       </div>
       <div class="type-fields" data-for-types="password">
-        <div class="form-group"><label for="field-url">Website URL</label><input type="url" id="field-url" placeholder="https://example.com"></div>
-        <div class="form-group"><label for="field-username">Username / Email</label><input type="text" id="field-username" autocomplete="off" placeholder="username or email"></div>
+        <div class="form-group">
+          <label for="field-url">Website URL</label
+          ><input type="url" id="field-url" placeholder="https://example.com" />
+        </div>
+        <div class="form-group">
+          <label for="field-username">Username / Email</label
+          ><input
+            type="text"
+            id="field-username"
+            autocomplete="off"
+            placeholder="username or email"
+          />
+        </div>
         <div class="form-group">
           <label for="field-password">Password</label>
           <div class="input-with-toggle">
-            <input type="password" id="field-password" autocomplete="new-password" placeholder="Enter password">
-            <button type="button" class="btn-show-pass" id="btn-toggle-pass" aria-label="Toggle">👁</button>
+            <input
+              type="password"
+              id="field-password"
+              autocomplete="new-password"
+              placeholder="Enter password"
+            />
+            <button
+              type="button"
+              class="btn-show-pass"
+              id="btn-toggle-pass"
+              aria-label="Toggle"
+            >
+              👁
+            </button>
           </div>
         </div>
       </div>
       <div class="type-fields hidden" data-for-types="note">
-        <div class="form-group"><label for="field-note-body">Note</label><textarea id="field-note-body" rows="6" placeholder="Enter your secure note…"></textarea></div>
+        <div class="form-group">
+          <label for="field-note-body">Note</label
+          ><textarea
+            id="field-note-body"
+            rows="6"
+            placeholder="Enter your secure note…"
+          ></textarea>
+        </div>
       </div>
       <div class="type-fields hidden" data-for-types="card">
-        <div class="form-group"><label for="field-cardholder">Cardholder Name</label><input type="text" id="field-cardholder" placeholder="Name on card"></div>
-        <div class="form-group"><label for="field-card-number">Card Number</label><input type="text" id="field-card-number" autocomplete="off" placeholder="•••• •••• •••• ••••" maxlength="19"></div>
+        <div class="form-group">
+          <label for="field-cardholder">Cardholder Name</label
+          ><input
+            type="text"
+            id="field-cardholder"
+            placeholder="Name on card"
+          />
+        </div>
+        <div class="form-group">
+          <label for="field-card-number">Card Number</label
+          ><input
+            type="text"
+            id="field-card-number"
+            autocomplete="off"
+            placeholder="•••• •••• •••• ••••"
+            maxlength="19"
+          />
+        </div>
         <div class="form-row">
-          <div class="form-group"><label for="field-expiry-month">Expiry Month</label>
-            <select id="field-expiry-month"><option value="">MM</option>
-              <option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option>
-              <option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option>
-              <option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
+          <div class="form-group">
+            <label for="field-expiry-month">Expiry Month</label>
+            <select id="field-expiry-month">
+              <option value="">MM</option>
+              <option value="01">01</option>
+              <option value="02">02</option>
+              <option value="03">03</option>
+              <option value="04">04</option>
+              <option value="05">05</option>
+              <option value="06">06</option>
+              <option value="07">07</option>
+              <option value="08">08</option>
+              <option value="09">09</option>
+              <option value="10">10</option>
+              <option value="11">11</option>
+              <option value="12">12</option>
             </select>
           </div>
-          <div class="form-group"><label for="field-expiry-year">Year</label><input type="text" id="field-expiry-year" placeholder="YYYY" maxlength="4"></div>
-          <div class="form-group"><label for="field-cvv">CVV</label><input type="text" id="field-cvv" autocomplete="off" placeholder="•••" maxlength="4"></div>
+          <div class="form-group">
+            <label for="field-expiry-year">Year</label
+            ><input
+              type="text"
+              id="field-expiry-year"
+              placeholder="YYYY"
+              maxlength="4"
+            />
+          </div>
+          <div class="form-group">
+            <label for="field-cvv">CVV</label
+            ><input
+              type="text"
+              id="field-cvv"
+              autocomplete="off"
+              placeholder="•••"
+              maxlength="4"
+            />
+          </div>
         </div>
       </div>
       <div class="type-fields hidden" data-for-types="bank">
-        <div class="form-group"><label for="field-bank-name">Bank Name</label><input type="text" id="field-bank-name" placeholder="e.g. Chase"></div>
-        <div class="form-group"><label for="field-account-type">Account Type</label>
-          <select id="field-account-type"><option value="">— Select —</option><option value="checking">Checking</option><option value="savings">Savings</option><option value="money_market">Money Market</option><option value="other">Other</option></select>
+        <div class="form-group">
+          <label for="field-bank-name">Bank Name</label
+          ><input type="text" id="field-bank-name" placeholder="e.g. Chase" />
+        </div>
+        <div class="form-group">
+          <label for="field-account-type">Account Type</label>
+          <select id="field-account-type">
+            <option value="">— Select —</option>
+            <option value="checking">Checking</option>
+            <option value="savings">Savings</option>
+            <option value="money_market">Money Market</option>
+            <option value="other">Other</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="field-routing">Routing Number</label
+          ><input
+            type="text"
+            id="field-routing"
+            autocomplete="off"
+            placeholder="9-digit routing number"
+            maxlength="9"
+          />
+        </div>
+        <div class="form-group">
+          <label for="field-account-number">Account Number</label
+          ><input
+            type="text"
+            id="field-account-number"
+            autocomplete="off"
+            placeholder="Account number"
+          />
         </div>
-        <div class="form-group"><label for="field-routing">Routing Number</label><input type="text" id="field-routing" autocomplete="off" placeholder="9-digit routing number" maxlength="9"></div>
-        <div class="form-group"><label for="field-account-number">Account Number</label><input type="text" id="field-account-number" autocomplete="off" placeholder="Account number"></div>
       </div>
       <div class="type-fields hidden" data-for-types="address">
         <div class="form-row">
-          <div class="form-group"><label for="field-first-name">First Name</label><input type="text" id="field-first-name" placeholder="First name"></div>
-          <div class="form-group"><label for="field-last-name">Last Name</label><input type="text" id="field-last-name" placeholder="Last name"></div>
+          <div class="form-group">
+            <label for="field-first-name">First Name</label
+            ><input
+              type="text"
+              id="field-first-name"
+              placeholder="First name"
+            />
+          </div>
+          <div class="form-group">
+            <label for="field-last-name">Last Name</label
+            ><input type="text" id="field-last-name" placeholder="Last name" />
+          </div>
         </div>
-        <div class="form-group"><label for="field-company">Company</label><input type="text" id="field-company" placeholder="Company (optional)"></div>
-        <div class="form-group"><label for="field-address-line">Street Address</label><input type="text" id="field-address-line" placeholder="123 Main St"></div>
-        <div class="form-row">
-          <div class="form-group"><label for="field-city">City</label><input type="text" id="field-city" placeholder="City"></div>
-          <div class="form-group"><label for="field-state">State</label><input type="text" id="field-state" placeholder="State"></div>
+        <div class="form-group">
+          <label for="field-company">Company</label
+          ><input
+            type="text"
+            id="field-company"
+            placeholder="Company (optional)"
+          />
+        </div>
+        <div class="form-group">
+          <label for="field-address-line">Street Address</label
+          ><input
+            type="text"
+            id="field-address-line"
+            placeholder="123 Main St"
+          />
         </div>
         <div class="form-row">
-          <div class="form-group"><label for="field-zip">ZIP</label><input type="text" id="field-zip" placeholder="ZIP"></div>
-          <div class="form-group"><label for="field-country">Country</label><input type="text" id="field-country" placeholder="Country"></div>
+          <div class="form-group">
+            <label for="field-city">City</label
+            ><input type="text" id="field-city" placeholder="City" />
+          </div>
+          <div class="form-group">
+            <label for="field-state">State</label
+            ><input type="text" id="field-state" placeholder="State" />
+          </div>
         </div>
         <div class="form-row">
-          <div class="form-group"><label for="field-phone">Phone</label><input type="tel" id="field-phone" placeholder="+1 555-000-0000"></div>
-          <div class="form-group"><label for="field-email">Email</label><input type="email" id="field-email" placeholder="email@example.com"></div>
+          <div class="form-group">
+            <label for="field-zip">ZIP</label
+            ><input type="text" id="field-zip" placeholder="ZIP" />
+          </div>
+          <div class="form-group">
+            <label for="field-country">Country</label
+            ><input type="text" id="field-country" placeholder="Country" />
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-group">
+            <label for="field-phone">Phone</label
+            ><input type="tel" id="field-phone" placeholder="+1 555-000-0000" />
+          </div>
+          <div class="form-group">
+            <label for="field-email">Email</label
+            ><input
+              type="email"
+              id="field-email"
+              placeholder="email@example.com"
+            />
+          </div>
         </div>
       </div>
       <div class="type-fields hidden" data-for-types="ssn">
-        <div class="form-group"><label for="field-ssn-number">Social Security Number</label>
+        <div class="form-group">
+          <label for="field-ssn-number">Social Security Number</label>
           <div class="input-with-toggle">
-            <input type="password" id="field-ssn-number" autocomplete="off" placeholder="•••-••-••••" maxlength="11">
-            <button type="button" class="btn-show-pass" id="btn-toggle-ssn" aria-label="Toggle">👁</button>
+            <input
+              type="password"
+              id="field-ssn-number"
+              autocomplete="off"
+              placeholder="•••-••-••••"
+              maxlength="11"
+            />
+            <button
+              type="button"
+              class="btn-show-pass"
+              id="btn-toggle-ssn"
+              aria-label="Toggle"
+            >
+              👁
+            </button>
           </div>
         </div>
       </div>
       <div class="form-group">
         <label for="field-folder">Folder</label>
-        <select id="field-folder"><option value="">— No folder —</option></select>
+        <select id="field-folder">
+          <option value="">— No folder —</option>
+        </select>
       </div>
       <div class="type-fields" data-for-types="password card bank address ssn">
-        <div class="form-group"><label for="field-notes">Notes</label><textarea id="field-notes" rows="3" placeholder="Optional notes…"></textarea></div>
+        <div class="form-group">
+          <label for="field-notes">Notes</label
+          ><textarea
+            id="field-notes"
+            rows="3"
+            placeholder="Optional notes…"
+          ></textarea>
+        </div>
       </div>
       <div class="modal-actions">
-        <button type="button" class="btn-secondary" id="btn-cancel-modal">Cancel</button>
+        <button type="button" class="btn-secondary" id="btn-cancel-modal">
+          Cancel
+        </button>
         <button type="submit" class="btn-primary">Save</button>
       </div>
     </form>
@@ -297,7 +610,13 @@
   <div class="modal modal-settings">
     <div class="modal-header">
       <h3>Account Settings</h3>
-      <button class="btn-icon btn-close" id="btn-close-settings" aria-label="Close">✕</button>
+      <button
+        class="btn-icon btn-close"
+        id="btn-close-settings"
+        aria-label="Close"
+      >
+        ✕
+      </button>
     </div>
 
     <!-- MFA Section -->
@@ -306,23 +625,48 @@
       <div id="mfa-status-area">
         <p id="mfa-status-text" class="settings-desc"></p>
         <div id="mfa-setup-area" class="hidden">
-          <img id="mfa-qr-img" src="" alt="QR Code" class="mfa-qr">
-          <p class="settings-desc">Scan with Google Authenticator or Authy, then enter the 6-digit code below.</p>
-          <p class="settings-desc mfa-secret-text">Manual key: <code id="mfa-secret-display"></code></p>
+          <img id="mfa-qr-img" src="" alt="QR Code" class="mfa-qr" />
+          <p class="settings-desc">
+            Scan with Google Authenticator or Authy, then enter the 6-digit code
+            below.
+          </p>
+          <p class="settings-desc mfa-secret-text">
+            Manual key: <code id="mfa-secret-display"></code>
+          </p>
           <div class="form-group">
             <label for="mfa-verify-code">Verification code</label>
-            <input type="text" id="mfa-verify-code" inputmode="numeric" maxlength="6" placeholder="000000">
+            <input
+              type="text"
+              id="mfa-verify-code"
+              inputmode="numeric"
+              maxlength="6"
+              placeholder="000000"
+            />
           </div>
           <button class="btn-primary" id="btn-mfa-confirm">Enable MFA</button>
-          <button class="btn-secondary" id="btn-mfa-cancel-setup">Cancel</button>
+          <button class="btn-secondary" id="btn-mfa-cancel-setup">
+            Cancel
+          </button>
         </div>
         <div id="mfa-disable-area" class="hidden">
           <div class="form-group">
-            <label for="mfa-disable-code">Enter your current code to disable MFA</label>
-            <input type="text" id="mfa-disable-code" inputmode="numeric" maxlength="6" placeholder="000000">
+            <label for="mfa-disable-code"
+              >Enter your current code to disable MFA</label
+            >
+            <input
+              type="text"
+              id="mfa-disable-code"
+              inputmode="numeric"
+              maxlength="6"
+              placeholder="000000"
+            />
           </div>
-          <button class="btn-primary" id="btn-mfa-disable-confirm">Disable MFA</button>
-          <button class="btn-secondary" id="btn-mfa-disable-cancel">Cancel</button>
+          <button class="btn-primary" id="btn-mfa-disable-confirm">
+            Disable MFA
+          </button>
+          <button class="btn-secondary" id="btn-mfa-disable-cancel">
+            Cancel
+          </button>
         </div>
         <div id="mfa-actions"></div>
       </div>
@@ -330,7 +674,9 @@
 
     <!-- Sharing Keys Section -->
     <div class="settings-section">
-      <h4 class="settings-section-title">🔗 Sharing &amp; Emergency Access Keys</h4>
+      <h4 class="settings-section-title">
+        🔗 Sharing &amp; Emergency Access Keys
+      </h4>
       <p id="sharing-keys-status" class="settings-desc"></p>
       <div id="sharing-keys-actions"></div>
     </div>
@@ -338,37 +684,70 @@
     <!-- Change Password Section -->
     <div class="settings-section">
       <h4 class="settings-section-title">🔑 Change Master Password</h4>
-      <p class="settings-desc">Your vault will be automatically re-encrypted with the new password.</p>
+      <p class="settings-desc">
+        Your vault will be automatically re-encrypted with the new password.
+      </p>
       <div id="change-password-area">
         <div class="form-group">
           <label for="cp-current">Current master password</label>
-          <input type="password" id="cp-current" autocomplete="current-password" placeholder="Current password">
+          <input
+            type="password"
+            id="cp-current"
+            autocomplete="current-password"
+            placeholder="Current password"
+          />
         </div>
         <div class="form-group">
           <label for="cp-new">New master password</label>
-          <input type="password" id="cp-new" autocomplete="new-password" placeholder="Minimum 12 characters">
+          <input
+            type="password"
+            id="cp-new"
+            autocomplete="new-password"
+            placeholder="Minimum 12 characters"
+          />
         </div>
         <div class="form-group">
           <label for="cp-confirm">Confirm new password</label>
-          <input type="password" id="cp-confirm" autocomplete="new-password" placeholder="Repeat new password">
+          <input
+            type="password"
+            id="cp-confirm"
+            autocomplete="new-password"
+            placeholder="Repeat new password"
+          />
         </div>
         <p id="cp-error" class="form-error hidden"></p>
-        <button class="btn-primary" id="btn-change-password">Change Password</button>
+        <button class="btn-primary" id="btn-change-password">
+          Change Password
+        </button>
       </div>
     </div>
 
     <!-- Recovery Code Section -->
     <div class="settings-section">
       <h4 class="settings-section-title">🆘 Account Recovery</h4>
-      <p class="settings-desc">A recovery code lets you regain access if you forget your master password. Store it somewhere safe — it is shown only once and never stored on our servers.</p>
+      <p class="settings-desc">
+        A recovery code lets you regain access if you forget your master
+        password. Store it somewhere safe — it is shown only once and never
+        stored on our servers.
+      </p>
       <p id="recovery-status-text" class="settings-desc"></p>
       <div id="recovery-code-display" class="hidden">
         <div class="recovery-code-box">
           <code id="recovery-code-value"></code>
-          <button class="btn-icon" id="btn-copy-recovery-code" title="Copy to clipboard">📋</button>
+          <button
+            class="btn-icon"
+            id="btn-copy-recovery-code"
+            title="Copy to clipboard"
+          >
+            📋
+          </button>
         </div>
-        <p class="settings-desc warning-text">⚠️ Copy this code now. It will not be shown again.</p>
-        <button class="btn-secondary" id="btn-recovery-done">I've saved my recovery code</button>
+        <p class="settings-desc warning-text">
+          ⚠️ Copy this code now. It will not be shown again.
+        </p>
+        <button class="btn-secondary" id="btn-recovery-done">
+          I've saved my recovery code
+        </button>
       </div>
       <div id="recovery-actions"></div>
     </div>
@@ -376,23 +755,36 @@
     <!-- Danger Zone -->
     <div class="settings-section settings-section-danger">
       <h4 class="settings-section-title">⚠️ Danger Zone</h4>
-      <p class="settings-desc">Permanently delete your account and all vault data. This cannot be undone.</p>
+      <p class="settings-desc">
+        Permanently delete your account and all vault data. This cannot be
+        undone.
+      </p>
       <div id="delete-account-area">
         <div id="delete-confirm-area" class="hidden">
           <div class="form-group">
-            <label for="delete-password">Enter your master password to confirm</label>
-            <input type="password" id="delete-password" autocomplete="current-password" placeholder="Master password">
+            <label for="delete-password"
+              >Enter your master password to confirm</label
+            >
+            <input
+              type="password"
+              id="delete-password"
+              autocomplete="current-password"
+              placeholder="Master password"
+            />
           </div>
           <p id="delete-error" class="form-error hidden"></p>
           <div class="modal-actions">
             <button class="btn-secondary" id="btn-delete-cancel">Cancel</button>
-            <button class="btn-danger" id="btn-delete-confirm">Permanently Delete Account</button>
+            <button class="btn-danger" id="btn-delete-confirm">
+              Permanently Delete Account
+            </button>
           </div>
         </div>
-        <button class="btn-danger" id="btn-delete-account">Delete My Account</button>
+        <button class="btn-danger" id="btn-delete-account">
+          Delete My Account
+        </button>
       </div>
     </div>
-
   </div>
 </div>
 
@@ -401,7 +793,13 @@
   <div class="modal">
     <div class="modal-header">
       <h3>Share an Item</h3>
-      <button class="btn-icon btn-close" id="btn-close-share-modal" aria-label="Close">✕</button>
+      <button
+        class="btn-icon btn-close"
+        id="btn-close-share-modal"
+        aria-label="Close"
+      >
+        ✕
+      </button>
     </div>
     <form id="share-form" novalidate>
       <p id="share-error" class="form-error hidden"></p>
@@ -411,10 +809,16 @@
       </div>
       <div class="form-group">
         <label for="share-recipient-email">Recipient's email</label>
-        <input type="email" id="share-recipient-email" placeholder="recipient@example.com">
+        <input
+          type="email"
+          id="share-recipient-email"
+          placeholder="recipient@example.com"
+        />
       </div>
       <div class="modal-actions">
-        <button type="button" class="btn-secondary" id="btn-cancel-share">Cancel</button>
+        <button type="button" class="btn-secondary" id="btn-cancel-share">
+          Cancel
+        </button>
         <button type="submit" class="btn-primary">Share</button>
       </div>
     </form>
@@ -426,17 +830,27 @@
   <div class="modal">
     <div class="modal-header">
       <h3>Add Emergency Contact</h3>
-      <button class="btn-icon btn-close" id="btn-close-emergency-modal" aria-label="Close">✕</button>
+      <button
+        class="btn-icon btn-close"
+        id="btn-close-emergency-modal"
+        aria-label="Close"
+      >
+        ✕
+      </button>
     </div>
     <form id="emergency-form" novalidate>
       <p id="emergency-error" class="form-error hidden"></p>
       <p class="settings-desc">
-        Your trusted contact will be able to request access to your vault after a waiting period
-        if you are unable to access your account.
+        Your trusted contact will be able to request access to your vault after
+        a waiting period if you are unable to access your account.
       </p>
       <div class="form-group">
         <label for="emergency-email">Trusted contact's email</label>
-        <input type="email" id="emergency-email" placeholder="contact@example.com">
+        <input
+          type="email"
+          id="emergency-email"
+          placeholder="contact@example.com"
+        />
       </div>
       <div class="form-group">
         <label for="emergency-wait-days">Wait period (days)</label>
@@ -449,7 +863,9 @@
         </select>
       </div>
       <div class="modal-actions">
-        <button type="button" class="btn-secondary" id="btn-cancel-emergency">Cancel</button>
+        <button type="button" class="btn-secondary" id="btn-cancel-emergency">
+          Cancel
+        </button>
         <button type="submit" class="btn-primary">Send Invitation</button>
       </div>
     </form>
@@ -457,22 +873,34 @@
 </div>
 
 <!-- ── Item Detail Modal (read-only: shared items) ────────────────────── -->
-<div id="detail-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="detail-modal-title">
+<div
+  id="detail-modal"
+  class="modal-overlay"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="detail-modal-title"
+>
   <div class="modal modal-detail">
     <div class="modal-header">
       <h3 id="detail-modal-title">Item Details</h3>
-      <button class="btn-icon btn-close" id="btn-close-detail-modal" aria-label="Close">✕</button>
+      <button
+        class="btn-icon btn-close"
+        id="btn-close-detail-modal"
+        aria-label="Close"
+      >
+        ✕
+      </button>
     </div>
     <div id="detail-modal-body" class="detail-body"></div>
     <div class="modal-actions">
-      <button type="button" class="btn-secondary" id="btn-detail-done">Close</button>
+      <button type="button" class="btn-secondary" id="btn-detail-done">
+        Close
+      </button>
     </div>
   </div>
 </div>
 
-{% endblock %}
-
-{% block scripts %}
+{% endblock %} {% block scripts %}
 <script src="{{ url_for('static', filename='js/crypto.js') }}"></script>
 <script src="{{ url_for('static', filename='js/auth.js') }}"></script>
 <script src="{{ url_for('static', filename='js/sharing.js') }}"></script>