diff --git a/css/style.css b/css/style.css
index f15b100..d2fee8e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,343 +1,1225 @@
-:root {
-  --bg: #0e1015; --bg2: #191d27; --text: #e2e6ea; --text2: #7f8a98;
-  --accent: #6b7280; --accent-rgb: 107,114,128;
-  --danger: #ef4444; --success: #22c55e; --warning: #f59e0b;
-  --border: rgba(255,255,255,0.12); --card: #212734;
-  --input: #11141a; --vault-bg: rgba(255,255,255,0.06);
-}
-.light {
-  --bg: #eef0f4; --bg2: #e2e5eb; --text: #161b24; --text2: #5f6a7a;
-  --accent: #6b7280; --accent-rgb: 107,114,128;
-  --card: #ffffff; --input: #ffffff;
-  --border: rgba(0,0,0,0.16); --vault-bg: rgba(255,255,255,0.7);
-}
+/* ============================================================
+   Vault — UI V2 (Linear/Notion design system)
+   Dark default, cyan/violet accent, glassmorphism subtil.
+   ============================================================ */
 
-* { margin:0; padding:0; box-sizing:border-box; }
+/* ---- 1. RESET & TOKENS ----------------------------------- */
+
+*,*::before,*::after { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; height: 100%; }
 body {
-  background: linear-gradient(145deg, var(--bg) 0%, var(--bg2) 100%);
-  font-family: 'Segoe UI', system-ui, sans-serif;
-  min-height: 100vh; display: flex; justify-content: center;
-  align-items: flex-start; padding: 1.2rem; color: var(--text);
-  transition: background 0.3s, color 0.3s;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--text);
+    background: var(--bg);
+    -webkit-font-smoothing: antialiased;
+    overflow: hidden;
 }
 
-.toast-container { position:fixed; top:1rem; right:1rem; z-index:9999; display:flex; flex-direction:column; gap:0.5rem; }
-.toast { padding:0.7rem 1.2rem; border-radius:0.8rem; font-size:0.85rem; animation:slideIn 0.3s ease; color:#fff; }
-.toast.error { background:var(--danger); }
-.toast.success { background:var(--success); }
-.toast { display:flex; align-items:center; gap:0.6rem; max-width:400px; }
-.toast-action { background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.4); color:#fff; font-weight:700; font-size:0.8rem; padding:0.25rem 0.7rem; border-radius:1rem; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:0.15s; }
-.toast-action:hover { background:rgba(0,0,0,0.5); }
-@keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
-
-.vault {
-  width:96%; max-width:1700px; background:var(--vault-bg);
-  backdrop-filter:blur(20px); border:1px solid var(--border);
-  border-radius:2rem; padding:1.8rem; margin:0.5rem auto;
-  box-shadow:0 30px 50px rgba(0,0,0,0.4);
-  user-select:none; -webkit-user-drag:none;
+button { font-family: inherit; cursor: pointer; }
+input, select, textarea { font-family: inherit; font-size: inherit; }
+kbd {
+    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
+    font-size: 11px;
+    padding: 2px 6px;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    background: var(--bg-elev);
+    color: var(--text-dim);
 }
-h1 { font-size:2rem; margin-bottom:0.6rem; display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
-h1 span { background:var(--accent); padding:0.2rem 0.7rem; border-radius:3rem; font-size:0.8rem; color:#fff; }
 
-/* Auth */
-.auth-section { background:rgba(0,0,0,0.25); border-radius:1.5rem; padding:1.3rem; margin-bottom:1rem; border:1px solid var(--border); }
-.auth-tabs { display:flex; gap:1rem; margin-bottom:0.8rem; }
-.auth-tab { background:none; border:none; color:var(--text2); padding:0.4rem 0.8rem; cursor:pointer; border-bottom:2px solid transparent; font-size:0.9rem; }
-.auth-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
-
-input, select, textarea {
-  flex:1; min-width:130px; background:var(--input); border:1px solid #2d3748;
-  padding:0.65rem 1rem; border-radius:2rem; color:var(--text); font-size:0.85rem;
-  outline:none; font-family:inherit;
+:root, [data-theme="dark"] {
+    /* Slightly lighter surfaces + warmer tones, brighter text-dim/faint
+       and more visible borders. Less "black hole" feel. */
+    --bg:           #15151c;
+    --bg-elev:      #1d1d26;
+    --bg-elev-2:    #292932;
+    --bg-glass:     rgba(29,29,38,0.78);
+    --border:       #353541;
+    --border-soft:  #25252e;
+    --text:         #f1f1f5;
+    --text-dim:     #b8b8c4;
+    --text-faint:   #82828f;
+    --accent:       #06b6d4;
+    --accent-hover: #22d3ee;
+    --accent-soft:  rgba(6,182,212,0.12);
+    --accent-2:     #a78bfa;
+    --danger:       #f43f5e;
+    --danger-soft:  rgba(244,63,94,0.12);
+    --success:      #10b981;
+    --warning:      #f59e0b;
+    --shadow:       0 8px 24px rgba(0,0,0,0.4);
+    --shadow-lg:    0 24px 48px rgba(0,0,0,0.55);
+    --blur:         saturate(140%) blur(20px);
+    --radius:       12px;
+    --radius-sm:    8px;
+    --radius-lg:    16px;
+    --t-fast:       120ms cubic-bezier(0.16,1,0.3,1);
+    --t-base:       200ms cubic-bezier(0.16,1,0.3,1);
 }
-input:focus, select:focus { border-color:var(--accent); }
+
+[data-theme="light"] {
+    --bg:           #f7f7f5;
+    --bg-elev:      #ffffff;
+    --bg-elev-2:    #efefec;
+    --bg-glass:     rgba(255,255,255,0.92);
+    --border:       #dcdcd7;
+    --border-soft:  #ebebe6;
+    --text:         #1a1a1f;
+    --text-dim:     #57575e;
+    --text-faint:   #8e8e96;
+    --accent:       #0891b2;       /* cyan-600 — darker for better contrast on white */
+    --accent-hover: #0e7490;
+    --accent-soft:  rgba(8,145,178,0.10);
+    --accent-2:     #7c3aed;
+    --shadow:       0 4px 16px rgba(0,0,0,0.06);
+    --shadow-lg:    0 16px 36px rgba(0,0,0,0.08);
+    --blur:         saturate(160%) blur(16px);
+}
+[data-theme="light"] .auth-screen {
+    background:
+        radial-gradient(ellipse at top, rgba(8,145,178,0.08), transparent 50%),
+        radial-gradient(ellipse at bottom right, rgba(124,58,237,0.06), transparent 50%),
+        var(--bg);
+}
+
+svg { width: 16px; height: 16px; flex-shrink: 0; }
+
+/* ---- 2. UTILITIES ---------------------------------------- */
+
+.is-hidden { display: none !important; }
+.hint { color: var(--text-faint); font-weight: 400; font-size: 12px; margin-left: 4px; }
+
+/* ---- 3. BUTTONS ------------------------------------------ */
 
 .btn {
-  background:linear-gradient(135deg, #6b7280, #4b5563); border:none; color:#fff;
-  font-weight:600; padding:0.65rem 1.3rem; border-radius:2rem; cursor:pointer;
-  font-size:0.85rem; transition:0.2s; white-space:nowrap;
+    display: inline-flex; align-items: center; justify-content: center;
+    gap: 6px;
+    padding: 8px 14px;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    font-size: 13px; font-weight: 500; line-height: 1;
+    transition: all var(--t-fast);
+    white-space: nowrap;
 }
-.btn:hover { filter:brightness(1.15); transform:scale(1.02); }
-.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
-.btn-outline { background:transparent; border:1px solid #475569; color:var(--text2); }
-.btn-sm { padding:0.35rem 0.9rem; font-size:0.75rem; }
-.btn-xs { padding:0.2rem 0.5rem; font-size:0.7rem; }
-.btn-danger { background:var(--danger); }
-
-.input-group { display:flex; gap:0.5rem; margin:0.7rem 0; flex-wrap:wrap; align-items:center; }
-
-/* Toolbar */
-.toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.7rem; }
-.view-dropdown { position:relative; }
-.view-dropdown-menu { position:absolute; top:100%; right:0; margin-top:4px; min-width:155px; background:var(--bg2); border:1px solid var(--border); border-radius:0.6rem; padding:0.3rem; box-shadow:0 8px 24px rgba(0,0,0,0.3); z-index:100; display:flex; flex-direction:column; gap:2px; }
-.view-opt { background:none; border:none; color:var(--text); padding:0.45rem 0.8rem; border-radius:0.4rem; cursor:pointer; font-size:0.8rem; text-align:left; transition:0.12s; white-space:nowrap; }
-.view-opt:hover { background:var(--accent); color:#fff; }
-.view-opt.active { background:var(--accent); color:#fff; font-weight:600; }
-
-.toggles-row { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; }
-.toggle-item { display:flex; align-items:center; gap:0.4rem; font-size:0.75rem; color:var(--text2); }
-.toggle-switch { position:relative; width:36px; height:20px; background:#334155; border-radius:10px; cursor:pointer; transition:0.2s; }
-.toggle-switch.active { background:var(--accent); }
-.toggle-switch::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:0.2s; }
-.toggle-switch.active::after { left:18px; }
-
-.status-badge { background:var(--bg2); padding:0.25rem 0.8rem; border-radius:2rem; font-size:0.75rem; white-space:nowrap; }
-.hidden { display:none !important; }
-
-/* Strength */
-.strength-bar { height:4px; border-radius:2px; transition:0.3s; margin-top:0.2rem; }
-.s0 { background:var(--danger); width:20%; }
-.s1 { background:var(--warning); width:40%; }
-.s2 { background:#eab308; width:60%; }
-.s3 { background:#84cc16; width:80%; }
-.s4 { background:var(--success); width:100%; }
-
-/* ========== SEARCH BOX WITH CLEAR BUTTON (FIXED) ========== */
-.search-box {
-    position: relative;
-    width: 240px;          /* fixed width – adjust if needed */
-    flex-shrink: 0;
+.btn-primary { background: var(--accent); color: white; }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn.is-danger { background: var(--danger); color: white; }
+.btn.is-danger:hover { background: #e11d48; }
+.btn-ghost {
+    background: transparent;
+    color: var(--text-dim);
+    border-color: var(--border);
 }
-.search-box input {
+.btn-ghost:hover { background: var(--bg-elev-2); color: var(--text); }
+.btn-block { width: 100%; }
+.btn-sm { padding: 6px 10px; font-size: 12px; }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.icon-btn {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 32px; height: 32px;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    color: var(--text-dim);
+    transition: all var(--t-fast);
+}
+.icon-btn:hover { background: var(--bg-elev-2); color: var(--text); }
+.icon-btn-sm { width: 24px; height: 24px; }
+.icon-btn-sm svg { width: 14px; height: 14px; }
+
+/* ---- 4. FORM CONTROLS ------------------------------------ */
+
+.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
+.field > span {
+    font-size: 12px; font-weight: 500; color: var(--text-dim);
+    display: flex; align-items: center;
+}
+.field input[type="text"],
+.field input[type="password"],
+.field input[type="search"],
+.field input[type="email"],
+.field select {
     width: 100%;
-    box-sizing: border-box;
-    padding-right: 30px;   /* space for the ✕ button */
-}
-.clear-search-btn {
-    position: absolute;
-    right: 6px;
-    top: 50%;
-    transform: translateY(-50%);
-    background: none;
-    border: none;
-    color: var(--text2);
-    cursor: pointer;
-    font-size: 0.9rem;
-    line-height: 1;
-    padding: 6px;
-    display: none;
-}
-
-/* Folders */
-.folders-bar { display:flex; gap:0.4rem; margin-bottom:0.8rem; flex-wrap:wrap; align-items:center; padding:0.4rem 0.6rem; background:rgba(0,0,0,0.2); border-radius:1rem; }
-.folder-chip { background:var(--bg2); border:1px solid var(--border); color:var(--text2); padding:0.3rem 0.8rem; border-radius:2rem; cursor:pointer; font-size:0.78rem; transition:0.2s; white-space:nowrap; }
-.folder-chip:hover { background:var(--chip-color, var(--accent)); color:#fff; border-color:var(--chip-color, var(--accent)); }
-.folder-chip.active { background:var(--chip-color, var(--accent)); color:#fff; border-color:var(--chip-color, var(--accent)); }
-.folder-chip.drag-over { border-color:var(--accent)!important; box-shadow:0 0 12px rgba(var(--accent-rgb),0.5); transform:scale(1.05); }
-.pw-display.pw-hover { cursor:pointer; }
-.folder-count { background:rgba(0,0,0,0.3); padding:0.1rem 0.4rem; border-radius:1rem; margin-left:0.3rem; font-size:0.7rem; }
-.folder-delete-btn { background:transparent; border:none; color:var(--danger); cursor:pointer; font-size:0.7rem; margin-left:0.2rem; opacity:0.7; }
-.folder-delete-btn:hover { opacity:1; }
-.folder-add-btn { background:transparent; border:1px dashed #475569; color:var(--text2); padding:0.3rem 0.6rem; border-radius:2rem; cursor:pointer; font-size:0.75rem; transition:0.2s; }
-.folder-add-btn:hover { border-color:var(--accent); color:var(--accent); }
-
-.light .entry-card, .light .entry-row, .light .entry-compact { box-shadow:0 1px 4px rgba(0,0,0,0.08); }
-#addFolderSelect { min-width:110px; max-width:150px; background:var(--input); border:1px solid #2d3748; color:var(--text); padding:0.5rem 0.8rem; border-radius:2rem; font-size:0.8rem; cursor:pointer; }
-
-/* Entries */
-#entriesContainer { user-select:none; -webkit-user-drag:none; }
-#entriesContainer.grid-view { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:0.6rem; }
-#entriesContainer.list-view { display:flex; flex-direction:column; gap:0.4rem; }
-#entriesContainer.compact-view { display:flex; flex-direction:column; gap:0.2rem; }
-#entriesContainer.table-view { overflow-x:auto; }
-#entriesContainer.table-view table { width:100%; border-collapse:collapse; }
-#entriesContainer.table-view th { text-align:left; padding:0.4rem 0.6rem; color:var(--text2); font-size:0.75rem; border-bottom:1px solid var(--border); }
-#entriesContainer.table-view td { padding:0.4rem 0.6rem; font-size:0.8rem; border-bottom:1px solid rgba(255,255,255,0.03); }
-
-.entry-card, .entry-row, .entry-compact, .table-row-drag { cursor:pointer; user-select:none; }
-.entry-card.drag-over, .entry-row.drag-over, .entry-compact.drag-over, .table-row-drag.drag-over { border-color:var(--accent)!important; box-shadow:0 0 15px rgba(var(--accent-rgb),0.3); }
-.entry-card.selected { border-color:var(--accent)!important; box-shadow:0 0 0 2px var(--accent),0 0 18px rgba(var(--accent-rgb),0.35); background:rgba(var(--accent-rgb),0.18); }
-.entry-row.selected, .entry-compact.selected { border-color:var(--accent)!important; box-shadow:0 0 0 2px var(--accent),0 0 18px rgba(var(--accent-rgb),0.35); background:rgba(var(--accent-rgb),0.14); border-left:3px solid var(--accent); }
-.table-row-drag.selected td { background:rgba(var(--accent-rgb),0.14)!important; box-shadow:inset 0 0 0 1px var(--accent); border-bottom:1px solid var(--accent); }
-.entry-card { background:var(--card); border:1px solid var(--border); border-radius:0.8rem; padding:0.9rem 2.8rem 0.9rem 0.9rem; transition:0.2s; position:relative; word-break:break-word; box-shadow:0 2px 6px rgba(0,0,0,0.2); }
-.entry-card:hover { border-color:rgba(255,255,255,0.15); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.3); }
-.card-site { font-weight:700; font-size:0.9rem; color:var(--text); margin-bottom:0.2rem; }
-.card-user { color:var(--text2); font-size:0.75rem; margin-bottom:0.3rem; }
-.card-folder { font-size:0.65rem; color:var(--accent); margin-bottom:0.3rem; background:rgba(var(--accent-rgb),0.15); display:inline-block; padding:0.1rem 0.5rem; border-radius:1rem; }
-.card-password { background:var(--bg2); padding:0.3rem 0.5rem; border-radius:0.6rem; display:flex; align-items:center; justify-content:space-between; font-family:monospace; font-size:0.75rem; gap:0.2rem; }
-#entriesContainer.card-view .entry-card { padding:1.2rem 3rem 1.2rem 1.2rem; }
-#entriesContainer.card-view .card-site { font-size:1.05rem; }
-#entriesContainer.card-view .card-password { font-size:0.9rem; }
-#entriesContainer.card-view .entry-card:hover { transform:translateY(-3px); }
-.entry-row { background:var(--card); border:1px solid var(--border); border-radius:0.8rem; padding:0.7rem 2.8rem 0.7rem 0.9rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.4rem; position:relative; box-shadow:0 2px 6px rgba(0,0,0,0.15); }
-.entry-compact { display:flex; align-items:center; gap:0.5rem; padding:0.35rem 2.8rem 0.35rem 0.7rem; background:var(--card); border-radius:0.5rem; border:1px solid var(--border); font-size:0.8rem; position:relative; box-shadow:0 1px 4px rgba(0,0,0,0.12); }
-.action-btns { position:absolute; top:4px; right:6px; display:flex; gap:4px; z-index:1; }
-.delete-btn { width:20px; height:20px; background:transparent; color:var(--danger); border:none; cursor:pointer; font-size:0.9rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
-.delete-btn:hover { color:#fff; transform:scale(1.2); }
-.light .delete-btn:hover { color:#000!important; }
-.edit-btn { width:20px; height:20px; background:transparent; color:var(--accent); border:none; cursor:pointer; font-size:0.75rem; display:flex; align-items:center; justify-content:center; }
-.edit-btn:hover { color:#fff; transform:scale(1.2); }
-.light .edit-btn:hover { color:#000!important; }
-.star-btn { width:20px; height:20px; background:transparent; border:none; cursor:pointer; font-size:0.85rem; display:flex; align-items:center; justify-content:center; color:var(--text2); }
-.star-btn:hover { transform:scale(1.3); }
-.entry-card.favorite { border-color:rgba(255,200,0,0.3); background:rgba(255,200,0,0.05); }
-.entry-row.favorite { border-color:rgba(255,200,0,0.3); background:rgba(255,200,0,0.05); }
-.entry-compact.favorite { border-color:rgba(255,200,0,0.3); background:rgba(255,200,0,0.05); }
-.table-row-drag.favorite td { background:rgba(255,200,0,0.05); }
-
-/* Grouped view */
-#entriesContainer.grouped-view { display:flex; flex-direction:column; gap:0.15rem; }
-.grouped-header { position:sticky; top:0; z-index:2; background:var(--bg); padding:0.55rem 0.8rem; border-radius:0.5rem; font-weight:600; font-size:0.9rem; color:var(--accent); display:flex; align-items:center; gap:0.5rem; border-bottom:2px solid var(--accent); margin-top:0.4rem; }
-.grouped-header:first-child { margin-top:0; }
-#entriesContainer.grouped-view .entry-row { border-left:3px solid transparent; transition:0.15s; padding-left:1rem; }
-#entriesContainer.grouped-view .entry-row:hover { border-left-color:var(--accent); }
-
-/* Detail view */
-#entriesContainer.detail-view { display:flex; flex-direction:column; gap:1rem; }
-.detail-nav { display:flex; align-items:center; justify-content:center; gap:1rem; padding:0.5rem 0; position:sticky; top:0; z-index:2; background:var(--bg); }
-.detail-nav button { background:var(--bg2); border:1px solid var(--border); color:var(--text); padding:0.4rem 1rem; border-radius:0.5rem; cursor:pointer; transition:0.15s; font-size:0.85rem; }
-.detail-nav button:hover { border-color:var(--accent); color:var(--accent); }
-.detail-nav button:disabled { opacity:0.4; cursor:default; }
-.detail-nav .detail-counter { font-size:0.8rem; color:var(--text2); min-width:80px; text-align:center; }
-.detail-card { background:var(--bg2); border:1px solid var(--border); border-radius:1rem; padding:1.5rem; display:flex; flex-direction:column; gap:0.9rem; max-width:520px; margin:0 auto; width:100%; }
-.detail-field { display:flex; flex-direction:column; gap:0.15rem; }
-.detail-label { font-size:0.7rem; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; }
-.detail-value { font-size:1.2rem; word-break:break-all; }
-.detail-value.pw-display { font-family:monospace; letter-spacing:2px; font-size:1.3rem; cursor:default; }
-.detail-folder { display:flex; gap:0.5rem; align-items:center; }
-.detail-actions { display:flex; gap:0.5rem; margin-top:0.3rem; }
-.detail-actions button { flex:1; padding:0.5rem; border-radius:0.5rem; border:1px solid var(--border); background:var(--bg); cursor:pointer; transition:0.15s; font-size:0.85rem; }
-.detail-actions button:hover { border-color:var(--accent); background:var(--bg2); }
-
-
-.entry-info { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; flex:1; }
-.entry-site { font-weight:700; color:var(--text); }
-.entry-user { color:var(--text2); }
-.entry-folder { font-size:0.7rem; color:var(--accent); background:rgba(var(--accent-rgb),0.15); padding:0.1rem 0.5rem; border-radius:1rem; }
-.password-field { display:flex; align-items:center; gap:0.3rem; background:var(--bg2); padding:0.2rem 0.5rem; border-radius:2rem; }
-.password-text { font-family:monospace; color:var(--text2); font-size:0.8rem; }
-.icon-btn { background:none; border:1px solid #475569; color:var(--text2); border-radius:2rem; padding:0.2rem 0.5rem; font-size:0.65rem; cursor:pointer; }
-.icon-btn:hover { background:rgba(var(--accent-rgb),0.2); }
-
-/* Settings Dropdown */
-.settings-dropdown { position:relative; display:inline-block; }
-.settings-menu { position:absolute; top:100%; right:0; background:var(--bg2); border:1px solid var(--border); border-radius:0.8rem; padding:0.5rem; min-width:200px; z-index:1000; box-shadow:0 10px 25px rgba(0,0,0,0.4); }
-.settings-item { display:flex; justify-content:space-between; align-items:center; padding:0.4rem 0.6rem; border-radius:0.5rem; font-size:0.8rem; color:var(--text2); cursor:pointer; }
-.settings-item:hover { background:rgba(255,255,255,0.05); }
-.settings-item select { background:var(--input); border:1px solid #334155; color:var(--text); padding:0.2rem 0.5rem; border-radius:1rem; font-size:0.75rem; }
-
-/* Trash */
-.trash-badge { background:var(--danger); color:#fff; padding:0.15rem 0.5rem; border-radius:1rem; font-size:0.65rem; margin-left:0.3rem; }
-.trash-info { font-size:0.7rem; color:var(--text2); margin-top:0.2rem; }
-.restore-btn { background:none; color:#fff; border:none; padding:0.2rem 0.6rem; border-radius:1.5rem; cursor:pointer; font-size:0.7rem; }
-.restore-btn:hover { filter:brightness(1.2); }
-.empty-trash-btn { background:var(--danger); color:#fff; border:none; padding:0.3rem 0.8rem; border-radius:1.5rem; cursor:pointer; font-size:0.75rem; }
-.empty-trash-btn:hover { filter:brightness(1.2); }
-
-/* Edit Modal */
-.edit-modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); display:none; justify-content:center; align-items:center; z-index:1001; }
-.edit-modal.show { display:flex; }
-.edit-box { background:var(--bg2); border-radius:1.5rem; padding:1.5rem; min-width:380px; max-width:90%; }
-.edit-box h3 { margin-bottom:1rem; color:var(--text); }
-.edit-box label { color:var(--text2); font-size:0.8rem; display:block; margin-bottom:0.2rem; }
-.edit-box input, .edit-box select { width:100%; margin-bottom:0.5rem; }
-
-/* Custom modals */
-.custom-modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); display:flex; justify-content:center; align-items:center; z-index:10001; display:none; }
-.custom-modal-overlay.show { display:flex; }
-.custom-modal { background:var(--bg2); border:1px solid var(--border); border-radius:1.2rem; padding:1.5rem; min-width:300px; max-width:90%; }
-.custom-modal h3 { margin-bottom:1rem; color:var(--text); }
-.custom-modal input { width:100%; margin-bottom:1rem; }
-.custom-modal .modal-actions { display:flex; gap:0.5rem; justify-content:flex-end; }
-
-/* Confirm popup near element */
-.custom-confirm { position:fixed; background:var(--bg2); border:1px solid var(--accent); border-radius:0.8rem; padding:0.7rem 1rem; z-index:9999; box-shadow:0 10px 30px rgba(0,0,0,0.5); display:none; font-size:0.8rem; color:var(--text); white-space:nowrap; }
-.custom-confirm.show { display:block; }
-.custom-confirm .confirm-text { margin-bottom:0.5rem; }
-.custom-confirm .confirm-btns { display:flex; gap:0.4rem; }
-.custom-confirm .confirm-yes { background:var(--danger); color:#fff; border:none; padding:0.3rem 0.8rem; border-radius:1.5rem; cursor:pointer; font-size:0.75rem; }
-.custom-confirm .confirm-no { background:#334155; color:#fff; border:none; padding:0.3rem 0.8rem; border-radius:1.5rem; cursor:pointer; font-size:0.75rem; }
-
-/* Zigzag toast */
-.toast-zigzag { position:fixed; z-index:9998; padding:0.4rem 0.7rem; border-radius:0.5rem; font-size:0.72rem; font-weight:600; pointer-events:none; animation:zigzagUp 1.2s ease-out forwards; white-space:nowrap; }
-.toast-zigzag.success { background:rgba(34,197,94,0.95); color:#fff; }
-.toast-zigzag.error { background:rgba(239,68,68,0.95); color:#fff; }
-@keyframes zigzagUp { 0%{opacity:1;transform:translate(0,0) scale(1)} 20%{opacity:0.9;transform:translate(-10px,-14px) scale(0.9)} 40%{opacity:0.65;transform:translate(12px,-28px) scale(0.75)} 70%{opacity:0.3;transform:translate(-8px,-42px) scale(0.6)} 100%{opacity:0;transform:translate(0,-60px) scale(0.4)} }
-
-.idle-warning { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.95); color:#fff; padding:2rem; border-radius:2rem; z-index:10000; text-align:center; display:none; }
-.idle-warning.show { display:block; }
-
-@media(max-width:700px) {
-  .vault { padding:1rem; border-radius:1.5rem; width:98%; }
-  .entry-row { flex-direction:column; }
-  #entriesContainer.grid-view { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
-  .toolbar { flex-direction:column; }
-  .folders-bar { flex-direction:column; align-items:stretch; }
-}
-
-/* Floating action button */
-.fab {
-  position: fixed; bottom: 2rem; right: 2rem;
-  width: 56px; height: 56px; border-radius: 50%;
-  background: var(--accent); color: #fff; border: none;
-  font-size: 1.8rem; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,0.4);
-  display: flex; align-items: center; justify-content: center;
-  transition: 0.2s; z-index: 100;
-}
-.fab:hover { transform: scale(1.1); filter: brightness(1.1); }
-.fab-trash { left: 2rem; right: auto; font-size:1.4rem; background:transparent; box-shadow:none; }
-.fab-trash.active { box-shadow:0 0 18px rgba(var(--accent-rgb),0.5); }
-
-/* Generic modal overlay (if you don’t already have it) */
-.modal-overlay {
-  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(0,0,0,0.7); display: none;
-  justify-content: center; align-items: center; z-index: 1001;
-}
-.modal-overlay.show { display: flex; }
-
-/* Modal box (used by both edit and add modals) */
-.modal-box {
-  background: var(--bg2); border-radius: 1.5rem; padding: 1.5rem;
-  min-width: 380px; max-width: 90%;
-}
-.modal-box h3 { margin-bottom: 1rem; color: var(--text); }
-.modal-box label { color: var(--text2); font-size: 0.8rem; display: block; margin-bottom: 0.2rem; }
-.modal-box input, .modal-box select { width: 100%; margin-bottom: 0.5rem; }
-/* Batch select */
-.select-checkbox {
-    position: absolute;
-    top: 6px;
-    left: 6px;
-    z-index: 2;
-    accent-color: var(--accent);
-}
-.batch-actions {
-    position: fixed;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--bg2);
-    border: 1px solid var(--accent);
-    border-radius: 2rem;
-    padding: 0.5rem 1.5rem;
-    display: flex;
-    gap: 0.8rem;
-    align-items: center;
-    z-index: 1000;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
-    font-size: 0.85rem;
+    padding: 10px 12px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
     color: var(--text);
+    transition: all var(--t-fast);
 }
-.batch-actions button {
-    font-size: 0.78rem;
-    padding: 0.35rem 0.8rem;
+.field input:focus, .field select:focus {
+    outline: none;
+    border-color: var(--accent);
+    background: var(--bg);
+    box-shadow: 0 0 0 3px var(--accent-soft);
 }
-.selected-count {
-    font-weight: 600;
+
+.input-with-action { position: relative; display: flex; align-items: center; gap: 4px; }
+.input-with-action input { padding-right: 80px; }
+.input-with-action .icon-btn {
+    position: absolute;
+    top: 50%; transform: translateY(-50%);
+}
+.input-with-action .icon-btn:nth-of-type(1) { right: 38px; }
+.input-with-action .icon-btn:nth-of-type(2) { right: 4px; }
+
+.strength-bar {
+    height: 4px;
+    background: var(--border);
+    border-radius: 2px;
+    position: relative;
+    overflow: hidden;
+    margin-top: 4px;
+}
+.strength-bar::after {
+    content: '';
+    position: absolute; inset: 0;
+    width: var(--strength, 0%);
+    background: linear-gradient(90deg, var(--danger), var(--warning) 50%, var(--success));
+    transition: width var(--t-base);
+}
+
+input[type="range"] {
+    -webkit-appearance: none; appearance: none;
+    width: 100%; height: 4px;
+    background: var(--border);
+    border-radius: 2px;
+}
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none; appearance: none;
+    width: 16px; height: 16px;
+    background: var(--accent);
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.check {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 6px 10px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    font-size: 12px;
+    cursor: pointer;
+    user-select: none;
+    transition: all var(--t-fast);
+}
+.check:has(input:checked) {
+    background: var(--accent-soft);
+    border-color: var(--accent);
     color: var(--accent);
 }
-#rectSelect {
-    position:fixed; pointer-events:none; z-index:999;
-    border:1px solid var(--accent);
-    background:rgba(var(--accent-rgb),0.1);
-    display:none;
+.check input { display: none; }
+
+/* ---- 5. AUTH SCREEN -------------------------------------- */
+
+.auth-screen {
+    position: fixed; inset: 0;
+    display: grid; place-items: center;
+    padding: 24px;
+    background:
+        radial-gradient(ellipse at top, var(--accent-soft), transparent 50%),
+        radial-gradient(ellipse at bottom right, rgba(167,139,250,0.08), transparent 50%),
+        var(--bg);
 }
-#trashBtn.drag-over {
-    border-color:var(--danger)!important;
-    box-shadow:0 0 15px rgba(239,68,68,0.4);
-    background:rgba(239,68,68,0.15);
+.auth-card {
+    width: 100%; max-width: 400px;
+    padding: 32px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+}
+.auth-brand { text-align: center; margin-bottom: 24px; }
+.auth-brand-icon {
+    width: 40px; height: 40px;
+    padding: 10px;
+    background: var(--accent-soft);
+    color: var(--accent);
+    border-radius: var(--radius);
+    margin-bottom: 12px;
+}
+.auth-brand h1 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
+.auth-brand p { color: var(--text-dim); font-size: 13px; margin: 0; }
+.auth-tabs {
+    display: flex;
+    padding: 4px;
+    background: var(--bg);
+    border-radius: var(--radius-sm);
+    margin-bottom: 20px;
+}
+.auth-tab {
+    flex: 1;
+    padding: 8px 12px;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    color: var(--text-dim);
+    font-size: 13px; font-weight: 500;
+    transition: all var(--t-fast);
+}
+.auth-tab.is-active {
+    background: var(--bg-elev);
+    color: var(--text);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+.auth-form { display: flex; flex-direction: column; }
+.auth-form .btn-block { margin-top: 8px; }
+
+.auth-hint {
+    padding: 10px 12px;
+    margin-bottom: 14px;
+    background: var(--accent-soft);
+    border: 1px solid var(--accent);
+    border-radius: var(--radius-sm);
+    color: var(--accent);
+    font-size: 12px;
+    text-align: center;
+}
+.auth-hint:empty { display: none; }
+
+/* Tag chip input */
+.chip-input {
+    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
+    padding: 6px 8px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    min-height: 38px;
+    transition: all var(--t-fast);
+}
+.chip-input:focus-within {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-soft);
+    background: var(--bg);
+}
+.chip-input input {
+    flex: 1;
+    min-width: 80px;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--text);
+    font-size: 13px;
+    padding: 2px 4px;
+}
+.chip {
+    display: inline-flex; align-items: center; gap: 4px;
+    padding: 2px 4px 2px 8px;
+    background: var(--accent-soft);
+    color: var(--accent);
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 500;
+}
+.chip button {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 16px; height: 16px;
+    background: transparent;
+    border: none;
+    border-radius: 50%;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.6;
+}
+.chip button:hover { opacity: 1; background: rgba(0,0,0,0.1); }
+.chip button svg { width: 10px; height: 10px; }
+
+/* Tag suggestions dropdown */
+.chip-suggestions {
+    position: absolute;
+    z-index: 50;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow);
+    padding: 4px;
+    max-height: 200px;
+    overflow-y: auto;
+    min-width: 160px;
+}
+.chip-suggestion {
+    padding: 6px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    cursor: pointer;
+}
+.chip-suggestion:hover, .chip-suggestion.is-active { background: var(--bg-elev-2); color: var(--text); }
+.chip-suggestion-empty { padding: 6px 10px; color: var(--text-faint); font-size: 12px; }
+
+/* Settings rows */
+.setting-row {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 12px;
+    padding: 10px 12px;
+    background: var(--bg);
+    border: 1px solid var(--border-soft);
+    border-radius: var(--radius-sm);
+    margin-bottom: 6px;
+    font-size: 13px;
+}
+.setting-row > span { display: flex; flex-direction: column; gap: 2px; }
+.setting-hint {
+    color: var(--text-faint);
+    font-size: 11px;
+    font-weight: normal;
+    line-height: 1.35;
+    max-width: 320px;
+}
+.setting-row select {
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+    padding: 4px 8px;
+    font-size: 12px;
+}
+.setting-row select:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+/* iOS-style toggle switch */
+.toggle {
+    position: relative;
+    display: inline-block;
+    width: 36px; height: 20px;
+    flex-shrink: 0;
+}
+.toggle input { opacity: 0; width: 0; height: 0; }
+.toggle-slider {
+    position: absolute; inset: 0;
+    background: var(--bg-elev-2);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all var(--t-fast);
+}
+.toggle-slider::before {
+    content: '';
+    position: absolute;
+    left: 2px; top: 1px;
+    width: 14px; height: 14px;
+    background: var(--text-dim);
+    border-radius: 50%;
+    transition: all var(--t-fast);
+}
+.toggle input:checked + .toggle-slider {
+    background: var(--accent);
+    border-color: var(--accent);
+}
+.toggle input:checked + .toggle-slider::before {
+    background: white;
+    transform: translateX(16px);
+}
+
+/* ---- 6. APP SHELL ---------------------------------------- */
+
+.app-shell {
+    display: grid;
+    grid-template-columns: 240px 1fr;
+    height: 100vh;
+    background: var(--bg);
+}
+
+/* ---- 7. SIDEBAR ------------------------------------------ */
+
+.sidebar {
+    display: flex; flex-direction: column;
+    padding: 16px 12px;
+    background: var(--bg-elev);
+    border-right: 1px solid var(--border);
+    overflow-y: auto;
+}
+.sidebar-brand {
+    display: flex; align-items: center; gap: 10px;
+    padding: 6px 8px 18px;
+    font-size: 15px; font-weight: 600;
+}
+.sidebar-brand svg { color: var(--accent); width: 18px; height: 18px; }
+
+.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
+.nav-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 7px 10px;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    color: var(--text-dim);
+    font-size: 13px; font-weight: 500;
+    text-align: left;
+    width: 100%;
+    transition: all var(--t-fast);
+}
+.nav-item:hover { background: var(--bg-elev-2); color: var(--text); }
+.nav-item.is-active {
+    background: var(--accent-soft);
+    color: var(--accent);
+}
+.nav-item.is-active svg { color: var(--accent); }
+.nav-item svg { color: var(--text-faint); }
+.nav-item > span:first-of-type { flex: 1; }
+.nav-count {
+    font-size: 11px;
+    color: var(--text-faint);
+    background: var(--bg-elev-2);
+    padding: 1px 6px;
+    border-radius: 8px;
+    min-width: 18px;
+    text-align: center;
+}
+.nav-item.is-active .nav-count { background: var(--accent); color: white; }
+
+.sidebar-section { margin-top: 18px; }
+.sidebar-section-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 4px 10px 6px;
+    font-size: 11px; font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-faint);
+}
+.sidebar-bottom {
+    margin-top: auto;
+    padding-top: 12px;
+    border-top: 1px solid var(--border-soft);
+    display: flex; flex-direction: column; gap: 2px;
+}
+
+.folder-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.nav-item.drag-over {
+    background: var(--accent-soft);
+    box-shadow: inset 0 0 0 2px var(--accent);
+}
+
+/* ---- 8. MAIN --------------------------------------------- */
+
+.main { display: flex; flex-direction: column; overflow: hidden; }
+.topbar {
+    display: flex; align-items: center; gap: 12px;
+    padding: 12px 24px;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur);
+    -webkit-backdrop-filter: var(--blur);
+}
+.search { flex: 1; max-width: 480px; position: relative; display: flex; align-items: center; }
+.search svg {
+    position: absolute; left: 10px;
+    color: var(--text-faint);
+    pointer-events: none;
+}
+.search input {
+    width: 100%;
+    padding: 8px 60px 8px 34px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text);
+    transition: all var(--t-fast);
+}
+.search input:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.search kbd { position: absolute; right: 8px; }
+.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
+
+/* View toggle (Cards / List) */
+.view-toggle {
+    display: inline-flex;
+    padding: 2px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+}
+.view-btn {
+    width: 28px; height: 28px;
+    display: grid; place-items: center;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    color: var(--text-dim);
+    transition: all var(--t-fast);
+}
+.view-btn:hover { color: var(--text); }
+.view-btn.is-active {
+    background: var(--accent-soft);
+    color: var(--accent);
+}
+
+[data-theme="dark"]  .theme-icon-light { display: none; }
+[data-theme="light"] .theme-icon-dark  { display: none; }
+
+.user-menu { position: relative; }
+.user-chip {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 6px 12px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    color: var(--text);
+    font-size: 12px;
+    transition: all var(--t-fast);
+}
+.user-chip:hover { background: var(--bg-elev-2); }
+.user-dropdown {
+    position: absolute; top: calc(100% + 6px); right: 0;
+    min-width: 180px;
+    padding: 4px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow);
+    z-index: 50;
+}
+.dropdown-item {
+    display: flex; align-items: center; gap: 8px;
+    width: 100%;
+    padding: 8px 10px;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    color: var(--text);
+    font-size: 13px;
+    text-align: left;
+}
+.dropdown-item:hover { background: var(--bg-elev-2); }
+.dropdown-item svg { color: var(--text-dim); }
+
+.content { flex: 1; padding: 24px 32px; overflow-y: auto; }
+.content-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
+.content-header h2 { font-size: 22px; font-weight: 600; margin: 0; }
+.content-meta { color: var(--text-faint); font-size: 12px; }
+
+/* ---- 9. ENTRY GRID --------------------------------------- */
+
+.entry-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 12px;
+    position: relative;
+    user-select: none;       /* avoid native text-selection during marquee */
+}
+
+/* Marquee rectangle for rubber-band selection */
+.marquee {
+    position: fixed;
+    z-index: 5;
+    background: var(--accent-soft);
+    border: 1px solid var(--accent);
+    border-radius: 2px;
+    pointer-events: none;
+}
+
+.entry-card {
+    position: relative;
+    padding: 14px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    transition: all var(--t-fast);
+    cursor: pointer;
+}
+.entry-card:hover {
+    transform: translateY(-1px);
+    border-color: var(--accent);
+    box-shadow: var(--shadow);
+}
+.entry-card.is-selected {
+    border-color: var(--accent);
+    background: var(--accent-soft);
+}
+.entry-card.is-checked {
+    border-color: var(--accent);
+    background: var(--accent-soft);
+    box-shadow: inset 0 0 0 2px var(--accent);
+}
+
+/* === List view layout === */
+/* Cards are flattened into a single horizontal row using flexbox + `order`.
+   `.entry-head` and `.entry-pw-row` get display:contents so their children
+   participate directly in the card flex container — no wrapping, ever. */
+.entry-grid.is-list {
+    grid-template-columns: 1fr;
+    gap: 4px;
+}
+.entry-grid.is-list .entry-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+}
+.entry-grid.is-list .entry-card:hover { transform: none; }
+
+.entry-grid.is-list .entry-head      { display: contents; }
+.entry-grid.is-list .entry-pw-row    { display: contents; }
+
+.entry-grid.is-list .entry-avatar {
+    order: 1;
+    width: 28px; height: 28px;
+    font-size: 12px;
+    margin: 0;
+}
+.entry-grid.is-list .entry-title {
+    order: 2;
+    flex: 1;
+    min-width: 0;
+    display: flex; flex-direction: column;
+}
+.entry-grid.is-list .entry-title b     { font-size: 13px; }
+.entry-grid.is-list .entry-title small { font-size: 11px; }
+
+.entry-grid.is-list .entry-pw {
+    order: 3;
+    font-size: 11px;
+    width: 110px;
+    flex-shrink: 0;
+    padding: 4px 8px;
+    background: var(--bg);
+    border-radius: 6px;
+    border: 1px solid var(--border-soft);
+}
+.entry-grid.is-list .entry-pw-row .icon-btn {
+    order: 4;
+    flex-shrink: 0;
+}
+
+.entry-grid.is-list .entry-meta {
+    order: 5;
+    margin: 0;
+    flex-shrink: 0;
+    max-width: 220px;
+    overflow: hidden;
+    flex-wrap: nowrap;
+}
+.entry-grid.is-list .entry-meta .entry-chip {
+    flex-shrink: 0;
+    font-size: 10px;
+}
+
+/* Right-side action buttons: favorite + delete (normal view),
+   restore + purge (trash view), or kebab (compact mode). Same order slot. */
+.entry-grid.is-list .entry-fav,
+.entry-grid.is-list .entry-del,
+.entry-grid.is-list .entry-kebab-wrap,
+.entry-grid.is-list .entry-head .icon-btn {
+    order: 6;
+    flex-shrink: 0;
+}
+.entry-avatar.is-checkable {
+    position: relative;
+    cursor: pointer;
+}
+.entry-avatar.is-checkable:hover::after {
+    content: '';
+    position: absolute; inset: 0;
+    border-radius: var(--radius-sm);
+    background: var(--accent-soft);
+    border: 2px solid var(--accent);
+}
+.entry-card.is-checked .entry-avatar {
+    background: var(--accent);
+    color: white;
+}
+
+/* Batch action bar (appears when selection is non-empty) */
+.batch-bar {
+    position: sticky;
+    top: -1px;
+    z-index: 10;
+    display: flex; align-items: center; gap: 8px;
+    padding: 10px 14px;
+    margin-bottom: 16px;
+    background: var(--bg-elev);
+    border: 1px solid var(--accent);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    animation: toastIn var(--t-base);
+}
+.batch-bar-count {
+    font-weight: 600;
+    color: var(--accent);
+    margin-right: 8px;
+}
+.batch-bar select {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+    padding: 4px 8px;
+    font-size: 12px;
+}
+.batch-bar .grow { flex: 1; }
+
+.entry-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+.entry-avatar {
+    width: 32px; height: 32px;
+    display: grid; place-items: center;
+    background: var(--bg-elev-2);
+    border-radius: var(--radius-sm);
+    font-weight: 600; font-size: 14px;
+    color: var(--text);
+    flex-shrink: 0;
+}
+.entry-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.entry-title b {
+    font-size: 14px; font-weight: 600;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.entry-title small {
+    color: var(--text-dim);
+    font-size: 12px;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.entry-fav, .entry-del {
+    color: var(--text-faint);
+    background: transparent; border: none;
+    padding: 4px;
+    transition: all var(--t-fast);
+    cursor: pointer;
+}
+.entry-fav.is-on { color: var(--warning); }
+.entry-fav:hover { color: var(--warning); transform: scale(1.1); }
+
+/* Delete button — always visible, brightens on hover */
+.entry-del {
+    color: var(--text-dim);
+    opacity: 0.8;
+}
+.entry-del:hover {
+    opacity: 1;
+    color: var(--danger);
+    background: var(--danger-soft);
+    border-radius: 6px;
+    transform: scale(1.1);
+}
+
+/* Username row with inline copy button (visible on card hover) */
+.entry-user-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+.entry-user-row > span {
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.entry-copy-user {
+    background: transparent; border: none;
+    padding: 2px;
+    color: var(--text-faint);
+    opacity: 0;
+    cursor: pointer;
+    transition: all var(--t-fast);
+    border-radius: 4px;
+}
+.entry-copy-user svg { width: 11px; height: 11px; }
+.entry-card:hover .entry-copy-user { opacity: 0.7; }
+.entry-copy-user:hover {
+    opacity: 1 !important;
+    color: var(--accent);
+    background: var(--accent-soft);
+}
+
+/* Kebab (⋯) menu */
+.entry-kebab-wrap {
+    position: relative;
+}
+.entry-kebab {
+    background: transparent; border: none;
+    padding: 4px;
+    color: var(--text-dim);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all var(--t-fast);
+}
+.entry-kebab:hover { color: var(--text); background: var(--bg-elev-2); }
+
+.entry-kebab-menu {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    min-width: 180px;
+    padding: 4px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow);
+    z-index: 60;
+    display: none;
+    animation: modalIn var(--t-fast);
+}
+.entry-kebab-menu.is-open { display: block; }
+
+.kebab-item {
+    display: flex; align-items: center; gap: 10px;
+    width: 100%;
+    padding: 8px 10px;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    color: var(--text);
+    font-size: 13px;
+    text-align: left;
+    cursor: pointer;
+    transition: all var(--t-fast);
+}
+.kebab-item:hover { background: var(--bg-elev-2); }
+.kebab-item svg { color: var(--text-dim); }
+.kebab-item.is-danger { color: var(--danger); }
+.kebab-item.is-danger:hover { background: var(--danger-soft); }
+.kebab-item.is-danger svg { color: var(--danger); }
+
+.entry-pw-row {
+    display: flex; align-items: center; gap: 6px;
+    padding: 6px 8px;
+    background: var(--bg);
+    border: 1px solid var(--border-soft);
+    border-radius: 6px;
+    margin-bottom: 8px;
+}
+.entry-pw {
+    flex: 1;
+    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
+    font-size: 12px;
+    color: var(--text-dim);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    user-select: none;
+}
+.entry-pw.is-revealed { color: var(--text); }
+.entry-pw.is-error { color: var(--danger); }
+
+.entry-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.entry-chip {
+    display: inline-flex; align-items: center; gap: 4px;
+    padding: 2px 8px;
+    background: var(--bg-elev-2);
+    border-radius: 10px;
+    font-size: 11px;
+    color: var(--text-dim);
+}
+.entry-chip svg { width: 11px; height: 11px; }
+.entry-chip.is-folder { color: var(--accent); background: var(--accent-soft); }
+.entry-chip.is-pwned {
+    color: #fff;
+    background: #dc2626;     /* solid red — high-attention signal */
+    font-weight: 600;
+}
+.entry-chip.is-pwned svg { stroke: #fff; }
+
+/* ---- 10. SLIDE-OVER -------------------------------------- */
+
+.slideover {
+    position: fixed; top: 0; right: 0; bottom: 0;
+    width: 420px;
+    background: var(--bg-elev);
+    border-left: 1px solid var(--border);
+    box-shadow: var(--shadow-lg);
+    transform: translateX(100%);
+    transition: transform var(--t-base);
+    display: flex; flex-direction: column;
+    z-index: 30;
+}
+.slideover.is-open { transform: translateX(0); }
+.slideover-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border);
+}
+.slideover-header h3 {
+    font-size: 15px; font-weight: 600;
+    margin: 0;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.slideover-body { padding: 20px; overflow-y: auto; flex: 1; }
+.slideover-field { margin-bottom: 16px; }
+.slideover-field-label { font-size: 11px; font-weight: 500; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
+.slideover-field-value {
+    display: flex; align-items: center; gap: 6px;
+    padding: 10px 12px;
+    background: var(--bg);
+    border: 1px solid var(--border-soft);
+    border-radius: var(--radius-sm);
+    font-size: 13px;
+    word-break: break-all;
+}
+.so-input {
+    width: 100%;
+    padding: 10px 12px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text);
+    font-size: 13px;
+    transition: all var(--t-fast);
+}
+.so-input:focus {
+    outline: none;
+    border-color: var(--accent);
+    background: var(--bg);
+    box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.so-pw-row {
+    display: flex; align-items: center; gap: 4px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 2px 4px 2px 10px;
+}
+.so-pw-row:focus-within {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.so-pw-row .so-input {
+    background: transparent;
+    border: none;
+    padding: 8px 4px;
+}
+.so-pw-row .so-input:focus { box-shadow: none; }
+.slideover-actions { display: flex; gap: 8px; margin-top: 24px; }
+
+/* ---- 11. MODALS ------------------------------------------ */
+
+.modal {
+    position: fixed; inset: 0;
+    z-index: 100;
+    display: grid; place-items: center;
+    padding: 24px;
+}
+.modal-backdrop {
+    position: absolute; inset: 0;
+    background: rgba(0,0,0,0.5);
+    backdrop-filter: blur(4px);
+}
+.modal-panel {
+    position: relative;
+    width: 100%; max-width: 480px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+    animation: modalIn var(--t-base);
+}
+.modal-panel-sm { max-width: 360px; }
+@keyframes modalIn {
+    from { opacity: 0; transform: scale(0.96) translateY(8px); }
+    to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+.modal-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border);
+}
+.modal-header h3 { font-size: 15px; font-weight: 600; margin: 0; }
+.modal-body { padding: 20px; }
+.modal-footer {
+    display: flex; gap: 8px; justify-content: flex-end;
+    padding: 14px 20px;
+    background: var(--bg);
+    border-top: 1px solid var(--border);
+}
+
+.gen-preview {
+    padding: 12px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 13px;
+    word-break: break-all;
+    margin-bottom: 16px;
+    min-height: 42px;
+    display: flex; align-items: center;
+}
+.gen-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+
+/* ---- 12. COMMAND PALETTE -------------------------------- */
+
+.cmd-palette {
+    position: fixed; inset: 0;
+    z-index: 200;
+    display: grid; place-items: start center;
+    padding-top: 15vh;
+}
+.cmd-panel {
+    position: relative;
+    width: 100%; max-width: 560px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+    animation: modalIn var(--t-base);
+}
+.cmd-input {
+    display: flex; align-items: center; gap: 10px;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--border);
+}
+.cmd-input svg { color: var(--text-faint); }
+.cmd-input input {
+    flex: 1;
+    background: transparent; border: none; outline: none;
+    color: var(--text);
+    font-size: 15px;
+}
+.cmd-results { max-height: 360px; overflow-y: auto; padding: 8px; }
+.cmd-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 10px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    color: var(--text);
+    font-size: 13px;
+}
+.cmd-item:hover, .cmd-item.is-active { background: var(--bg-elev-2); }
+
+/* ---- 13. EMPTY STATE ------------------------------------ */
+
+.empty-state {
+    display: flex; flex-direction: column; align-items: center; gap: 8px;
+    padding: 80px 20px;
+    color: var(--text-dim);
+    animation: fadeIn var(--t-base);
+}
+.empty-illustration {
+    width: 140px; height: 140px;
+    margin-bottom: 12px;
+}
+.empty-icon {
+    width: 48px; height: 48px;
+    padding: 12px;
+    background: var(--bg-elev);
+    border-radius: var(--radius);
+    color: var(--text-faint);
+}
+.empty-state h3 { margin: 8px 0 0; font-size: 18px; color: var(--text); font-weight: 600; }
+.empty-state p { margin: 0; font-size: 13px; max-width: 320px; text-align: center; }
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ---- Skeleton loaders ----------------------------------- */
+.skeleton-card {
+    padding: 14px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    position: relative;
+}
+.skeleton-card::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: linear-gradient(90deg, transparent, var(--bg-elev-2), transparent);
+    animation: shimmer 1.4s infinite;
+}
+.skeleton-line {
+    height: 12px;
+    background: var(--bg-elev-2);
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+.skeleton-line.w-40 { width: 40%; }
+.skeleton-line.w-60 { width: 60%; }
+.skeleton-line.w-80 { width: 80%; }
+.skeleton-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+.skeleton-circle {
+    width: 32px; height: 32px;
+    background: var(--bg-elev-2);
+    border-radius: var(--radius-sm);
+    flex-shrink: 0;
+}
+
+@keyframes shimmer {
+    from { transform: translateX(-100%); }
+    to   { transform: translateX(100%); }
+}
+
+/* ---- Idle warning ---------------------------------------- */
+.idle-warning {
+    position: fixed;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 400;
+    width: 320px;
+    padding: 24px;
+    background: var(--bg-elev);
+    border: 1px solid var(--warning);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    text-align: center;
+    animation: modalIn var(--t-base);
+}
+.idle-warning .idle-icon {
+    width: 36px; height: 36px;
+    padding: 8px;
+    background: rgba(245,158,11,0.12);
+    color: var(--warning);
+    border-radius: 50%;
+    margin: 0 auto 8px;
+    display: block;
+}
+.idle-warning h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
+.idle-warning p  { color: var(--text-dim); font-size: 13px; margin: 0 0 16px; }
+.idle-warning b  { color: var(--warning); font-size: 20px; }
+
+/* ---- 14. TOASTS ----------------------------------------- */
+
+.toast-container {
+    position: fixed; bottom: 20px; right: 20px;
+    z-index: 300;
+    display: flex; flex-direction: column-reverse; gap: 8px;
+    pointer-events: none;
+}
+.toast {
+    pointer-events: auto;
+    display: flex; align-items: center; gap: 8px;
+    padding: 10px 14px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--accent);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow);
+    font-size: 13px;
+    min-width: 240px;
+    animation: toastIn var(--t-base);
+}
+.toast.is-success { border-left-color: var(--success); }
+.toast.is-error { border-left-color: var(--danger); }
+.toast.is-warning { border-left-color: var(--warning); }
+@keyframes toastIn {
+    from { opacity: 0; transform: translateX(20px); }
+    to   { opacity: 1; transform: translateX(0); }
+}
+
+/* ---- 15. SCROLLBARS ------------------------------------- */
+
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
+
+/* ---- 16. RESPONSIVE ------------------------------------- */
+
+@media (max-width: 900px) {
+    .app-shell { grid-template-columns: 60px 1fr; }
+    .sidebar { padding: 12px 6px; }
+    .sidebar-brand span,
+    .nav-item > span:first-of-type,
+    .nav-count,
+    .sidebar-section-header { display: none; }
+    .nav-item { justify-content: center; padding: 8px; }
+    .topbar { padding: 12px 16px; }
+    .content { padding: 16px; }
+    .slideover { width: 100%; }
 }
-/* Batch confirm modal backdrop */
-.batch-confirm-overlay { background:rgba(0,0,0,0.3); }
\ No newline at end of file
diff --git a/delphi-backend/Source/PM.HTTPServer.pas b/delphi-backend/Source/PM.HTTPServer.pas
index 1ac68d6..4b2949a 100644
--- a/delphi-backend/Source/PM.HTTPServer.pas
+++ b/delphi-backend/Source/PM.HTTPServer.pas
@@ -138,9 +138,22 @@ var
 begin
   AResponse.CustomHeaders.Values['Strict-Transport-Security'] :=
     'max-age=31536000; includeSubDomains';
+  // Content-Security-Policy — tightened May 2026:
+  //   - script-src: removed 'unsafe-inline'. No <script> tags inline in the
+  //     served HTML — only external js/app.js. Real XSS defense.
+  //   - style-src: KEPT 'unsafe-inline' because index.html has inline
+  //     style="" attributes and app.js sets element.style.cssText
+  //     extensively. Refactoring that to use CSS classes would be a
+  //     separate cleanup pass. Style injection alone cannot execute code,
+  //     so the risk is bounded to visual manipulation / data exfil via
+  //     CSS selectors (low impact in a single-user loopback app).
+  //   - connect-src: 'self' + api.pwnedpasswords.com to allow the HIBP
+  //     range API. Only the SHA-1[0..5] prefix ever leaves the machine.
   AResponse.CustomHeaders.Values['Content-Security-Policy'] :=
-    'default-src ''self''; script-src ''self'' ''unsafe-inline''; ' +
-    'style-src ''self'' ''unsafe-inline''; connect-src ''self''; ' +
+    'default-src ''self''; ' +
+    'script-src ''self''; ' +
+    'style-src ''self'' ''unsafe-inline''; ' +
+    'connect-src ''self'' https://api.pwnedpasswords.com; ' +
     'img-src ''self'' data:; font-src ''self''; form-action ''self''; ' +
     'frame-ancestors ''none''; base-uri ''self''; object-src ''none''';
   AResponse.CustomHeaders.Values['X-Content-Type-Options'] := 'nosniff';
diff --git a/index.html b/index.html
index fe96486..9b328d1 100644
--- a/index.html
+++ b/index.html
@@ -1,218 +1,512 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>🔐 Vault</title>
+    <title>Vault</title>
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
-    <div class="toast-container" id="toastContainer"></div>
-    <div class="idle-warning" id="idleWarning">
-        <h3>⏰ Auto-lock</h3>
-        <p>Vault locks in <span id="idleCountdown">30</span>s</p>
-        <button class="btn btn-sm" onclick="resetIdle()">Stay Unlocked</button>
+
+<!-- ============================================================ -->
+<!-- ICON SPRITE (Lucide subset)                                  -->
+<!-- ============================================================ -->
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+    <symbol id="i-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></symbol>
+    <symbol id="i-unlock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/></symbol>
+    <symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></symbol>
+    <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5v14"/></symbol>
+    <symbol id="i-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></symbol>
+    <symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></symbol>
+    <symbol id="i-trash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></symbol>
+    <symbol id="i-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></symbol>
+    <symbol id="i-eye-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61M2 2l20 20"/></symbol>
+    <symbol id="i-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></symbol>
+    <symbol id="i-edit" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></symbol>
+    <symbol id="i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></symbol>
+    <symbol id="i-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z"/></symbol>
+    <symbol id="i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></symbol>
+    <symbol id="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z"/></symbol>
+    <symbol id="i-globe" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10Z"/></symbol>
+    <symbol id="i-dice" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="16" cy="8" r="1.2" fill="currentColor"/><circle cx="12" cy="12" r="1.2" fill="currentColor"/><circle cx="8" cy="16" r="1.2" fill="currentColor"/><circle cx="16" cy="16" r="1.2" fill="currentColor"/></symbol>
+    <symbol id="i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z"/><line x1="7" y1="7" x2="7.01" y2="7"/></symbol>
+    <symbol id="i-alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></symbol>
+    <symbol id="i-rotate-ccw" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></symbol>
+    <symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></symbol>
+    <symbol id="i-command" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3Z"/></symbol>
+    <symbol id="i-log-out" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></symbol>
+    <symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></symbol>
+    <symbol id="i-list" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></symbol>
+    <symbol id="i-more" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1.4" fill="currentColor"/><circle cx="12" cy="12" r="1.4" fill="currentColor"/><circle cx="12" cy="19" r="1.4" fill="currentColor"/></symbol>
+    <symbol id="i-user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
+    <symbol id="i-empty-vault" viewBox="0 0 120 120" fill="none">
+        <circle cx="60" cy="60" r="50" fill="var(--accent-soft)"/>
+        <rect x="40" y="50" width="40" height="35" rx="4" fill="var(--bg-elev)" stroke="var(--accent)" stroke-width="2"/>
+        <path d="M48 50V40a12 12 0 0 1 24 0v10" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round"/>
+        <circle cx="60" cy="65" r="3" fill="var(--accent)"/>
+        <line x1="60" y1="68" x2="60" y2="74" stroke="var(--accent)" stroke-width="2" stroke-linecap="round"/>
+    </symbol>
+    <symbol id="i-empty-trash" viewBox="0 0 120 120" fill="none">
+        <circle cx="60" cy="60" r="50" fill="var(--accent-soft)"/>
+        <path d="M40 45h40M48 45v-5a3 3 0 0 1 3-3h18a3 3 0 0 1 3 3v5M44 45v35a4 4 0 0 0 4 4h24a4 4 0 0 0 4-4V45" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" fill="none"/>
+        <path d="M54 55v22M66 55v22" stroke="var(--accent)" stroke-width="2" stroke-linecap="round"/>
+    </symbol>
+    <symbol id="i-empty-search" viewBox="0 0 120 120" fill="none">
+        <circle cx="60" cy="60" r="50" fill="var(--accent-soft)"/>
+        <circle cx="55" cy="55" r="14" stroke="var(--accent)" stroke-width="2.5" fill="none"/>
+        <path d="m66 66 11 11" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round"/>
+    </symbol>
+</svg>
+
+<!-- ============================================================ -->
+<!-- TOAST CONTAINER                                              -->
+<!-- ============================================================ -->
+<div id="toastContainer" class="toast-container"></div>
+
+<!-- ============================================================ -->
+<!-- IDLE WARNING (auto-lock countdown)                            -->
+<!-- ============================================================ -->
+<div id="idleWarning" class="idle-warning is-hidden">
+    <svg class="idle-icon"><use href="#i-lock"/></svg>
+    <h3>Auto-lock</h3>
+    <p>Vault locks in <b id="idleCountdown">30</b>s due to inactivity</p>
+    <button class="btn btn-primary btn-block" id="idleStayBtn">Stay unlocked</button>
+</div>
+
+<!-- ============================================================ -->
+<!-- AUTH SCREEN (login + register)                                -->
+<!-- ============================================================ -->
+<section id="authScreen" class="auth-screen">
+    <div class="auth-card">
+        <div class="auth-brand">
+            <svg class="auth-brand-icon"><use href="#i-lock"/></svg>
+            <h1>Vault</h1>
+            <p>Your passwords, encrypted locally.</p>
+        </div>
+
+        <div class="auth-tabs">
+            <button class="auth-tab is-active" data-tab="login">Login</button>
+            <button class="auth-tab" data-tab="register">Register</button>
+        </div>
+
+        <div id="authHint" class="auth-hint"></div>
+
+        <form id="loginForm" class="auth-form" autocomplete="off">
+            <label class="field">
+                <span>Username</span>
+                <input id="loginUsername" type="text" required>
+            </label>
+            <label class="field">
+                <span>Master password</span>
+                <input id="loginPassword" type="password" required>
+            </label>
+            <button id="loginBtn" type="submit" class="btn btn-primary btn-block">
+                <svg><use href="#i-unlock"/></svg>
+                Unlock
+            </button>
+            <button id="passkeyBtn" type="button" class="btn btn-ghost btn-block">
+                <svg><use href="#i-lock"/></svg>
+                Use a passkey
+            </button>
+        </form>
+
+        <form id="registerForm" class="auth-form is-hidden" autocomplete="off">
+            <label class="field">
+                <span>Username <span class="hint">min 3 chars</span></span>
+                <input id="regUsername" type="text" required minlength="3">
+            </label>
+            <label class="field">
+                <span>Master password <span class="hint">min 8 chars</span></span>
+                <input id="regPassword" type="password" required minlength="8">
+                <div class="strength-bar" id="regStrengthBar"></div>
+            </label>
+            <button id="registerBtn" type="submit" class="btn btn-primary btn-block">
+                <svg><use href="#i-plus"/></svg>
+                Create vault
+            </button>
+        </form>
     </div>
+</section>
 
-    <div class="edit-modal" id="editModal">
-        <div class="edit-box">
-            <h3>✏️ Edit Entry</h3>
-            <label>Website / App</label><input type="text" id="editSite" placeholder="example.com">
-            <label style="margin-top:.6rem">Username / Email</label><input type="text" id="editUsername" placeholder="user@example.com">
-            <label style="margin-top:.6rem">Password</label>
-            <div style="position:relative">
-                <input type="password" id="editPassword" placeholder="Password" style="width:100%;padding-right:40px">
-                <button type="button" onclick="toggleEditPassword()" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text2);cursor:pointer;font-size:.9rem">👁️</button>
-            </div>
-            <label style="margin-top:.6rem">Folder</label>
-            <select id="editFolder" style="width:100%;margin-bottom:.4rem"></select>
-            <input type="hidden" id="editId">
-            <div style="display:flex;gap:.5rem;margin-top:1rem">
-                <button class="btn" onclick="saveEdit()">💾 Save</button>
-                <button class="btn btn-outline" onclick="closeEdit()">Cancel</button>
-            </div>
-        </div>
-    </div>
-    <!-- Add Password Modal -->
-	<div class="modal-overlay" id="addModal">
-	  <div class="modal-box">
-		<h3>➕ New Password</h3>
-		<label>Website / App</label><input type="text" id="addSite" placeholder="example.com">
-		<label style="margin-top:.6rem">Username / Email (optional)</label><input type="text" id="addUsername" placeholder="user@example.com">
-		<label style="margin-top:.6rem">Password</label>
-		<div style="position:relative">
-		  <input type="password" id="addPassword" placeholder="Password" style="width:100%;padding-right:40px" oninput="checkAddStrength()">
-		  <button type="button" onclick="openGen()" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text2);cursor:pointer;font-size:1.1rem;line-height:1" title="Generate">🎲</button>
-		</div>
-		<div class="strength-bar s0" id="addStrengthBar" style="margin-top:0.2rem;"></div>
-		<label style="margin-top:.6rem">Folder</label>
-		<select id="addFolder" style="width:100%;margin-bottom:.4rem"></select>
-		<div style="display:flex;gap:.5rem;margin-top:1rem">
-		  <button class="btn" id="addEntryBtn" onclick="addEntry()">💾 Save</button>
-		  <button class="btn btn-outline" onclick="closeAdd()">Cancel</button>
-		</div>
-	  </div>
-	</div>
+<!-- ============================================================ -->
+<!-- APP SHELL (sidebar + main + slide-over)                       -->
+<!-- ============================================================ -->
+<div id="appShell" class="app-shell is-hidden">
 
-<!-- Floating action buttons -->
-<button class="fab" onclick="openAdd()" title="Add password">+</button>
-<button class="fab fab-trash" id="trashBtn" onclick="toggleTrash()" title="Trash">🗑️</button>
-    <div class="vault">
-        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.6rem">
-            <h1 style="margin-bottom:0">🔐 Vault <span>XAMPP</span></h1>
-            <button class="btn btn-outline btn-xs" onclick="toggleTheme()" title="Toggle theme">🌓</button>
+    <!-- ---- SIDEBAR ----------------------------------------- -->
+    <aside class="sidebar">
+        <div class="sidebar-brand">
+            <svg><use href="#i-lock"/></svg>
+            <span>Vault</span>
         </div>
 
-        <!-- Auth Section -->
-        <div id="authSection" class="auth-section">
-            <div class="auth-tabs">
-                <button class="auth-tab active" onclick="switchTab('login')">Login</button>
-                <button class="auth-tab" onclick="switchTab('register')">Register</button>
-            </div>
-            <div id="loginForm">
-                <div class="input-group">
-                    <input type="text" id="loginUsername" placeholder="Username" autocomplete="off">
-                    <input type="password" id="loginPassword" placeholder="Master Password" autocomplete="off">
-                    <button class="btn" id="loginBtn" onclick="login()">🔓 Unlock</button>
-                    <button class="btn btn-outline btn-sm" onclick="loginWithPasskey()" title="Use passkey" style="white-space:nowrap">🔐 Passkey</button>
-                </div>
-            </div>
-            <div id="registerForm" class="hidden">
-                <div class="input-group">
-                    <input type="text" id="regUsername" placeholder="Username (min 3)" autocomplete="off">
-                    <input type="password" id="regPassword" placeholder="Password (min 8)" autocomplete="off" oninput="checkRegStrength()">
-                    <button class="btn" id="registerBtn" onclick="register()">✨ Create</button>
-                </div>
-                <div class="strength-bar s0" id="regStrengthBar" style="margin-top:0.4rem;margin-bottom:0.2rem;flex-basis:100%"></div>
+        <nav class="sidebar-nav">
+            <button class="nav-item is-active" data-view="all">
+                <svg><use href="#i-globe"/></svg>
+                <span>All items</span>
+                <span class="nav-count" id="countAll">0</span>
+            </button>
+            <button class="nav-item" data-view="favorites">
+                <svg><use href="#i-star"/></svg>
+                <span>Favorites</span>
+                <span class="nav-count" id="countFav">0</span>
+            </button>
+        </nav>
+
+        <div class="sidebar-section">
+            <div class="sidebar-section-header">
+                <span>Folders</span>
+                <button class="icon-btn icon-btn-sm" id="addFolderBtn" title="New folder">
+                    <svg><use href="#i-plus"/></svg>
+                </button>
             </div>
+            <nav class="sidebar-nav" id="foldersList"></nav>
         </div>
 
-        <!-- Vault Section -->
-        <div id="vaultSection" class="hidden">
-            <!-- Top bar -->
-            <div style="display:flex;justify-content:space-between;margin-bottom:.5rem;align-items:center;flex-wrap:wrap;gap:.4rem">
-                <span class="status-badge" id="connectionStatus">🟢 Connected</span>
-                <span id="entryCount" style="color:var(--text2);font-size:.8rem"></span>
-                <div style="display:flex;gap:.4rem;align-items:center">
-                    <span id="currentUser" style="color:var(--text2);font-size:.8rem"></span>
-                    <div class="settings-dropdown">
-                        <button class="btn btn-outline btn-sm" id="settingsBtn" onclick="toggleSettings()">⚙️</button>
-                        <div class="settings-menu hidden" id="settingsMenu">
-                            <div class="settings-item">
-                                <span>Auto-lock</span>
-                                <select id="autoLockTimer" onchange="setAutoLock()">
-                                    <option value="0">No lock</option>
-                                    <option value="1">1 min</option>
-                                    <option value="5" selected>5 min</option>
-                                    <option value="15">15 min</option>
-                                    <option value="30">30 min</option>
-                                    <option value="60">1 hour</option>
-                                </select>
-                            </div>
-                            <div class="settings-item" onclick="toggleSound();event.stopPropagation();">
-                                <span>Sound</span>
-                                <div class="toggle-switch" id="soundToggleSwitch"></div>
-                            </div>
-                            <div class="settings-item" onclick="toggleTheme();event.stopPropagation();">
-                                <span>Theme</span>
-                                <div class="toggle-switch" id="themeToggleSwitch"></div>
-                            </div>
-                            <div class="settings-item" onclick="toggleViewBtn();event.stopPropagation();">
-                                <span>👁️ View password</span>
-                                <div class="toggle-switch active" id="showViewBtnToggle"></div>
-                            </div>
-                            <div class="settings-item" onclick="toggleShowEmail();event.stopPropagation();">
-                                <span>📧 Show email</span>
-                                <div class="toggle-switch active" id="showEmailToggle"></div>
-                            </div>
-                            <div class="settings-item" onclick="if(window.PublicKeyCredential){registerPasskey()}else{toast('Passkeys not supported','error')};event.stopPropagation();">
-                                <span>🔐 Set up passkey</span>
-                                <span style="color:var(--accent);font-size:0.7rem">⇗</span>
-                            </div>
-                        </div>
-                    </div>
-                    <button class="btn btn-outline btn-sm" onclick="doLogout()">🔒 Lock</button>
-                </div>
+        <div class="sidebar-section">
+            <div class="sidebar-section-header"><span>Tags</span></div>
+            <nav class="sidebar-nav" id="tagsList"></nav>
+        </div>
+
+        <div class="sidebar-section">
+            <div class="sidebar-section-header"><span>Tools</span></div>
+            <nav class="sidebar-nav">
+                <button class="nav-item" id="sidebarGenBtn">
+                    <svg><use href="#i-dice"/></svg>
+                    <span>Generator</span>
+                </button>
+                <button class="nav-item" id="sidebarExportBtn">
+                    <svg><use href="#i-log-out"/></svg>
+                    <span>Export vault</span>
+                </button>
+            </nav>
+        </div>
+
+        <div class="sidebar-bottom">
+            <button class="nav-item" data-view="trash">
+                <svg><use href="#i-trash"/></svg>
+                <span>Trash</span>
+                <span class="nav-count" id="countTrash">0</span>
+            </button>
+            <button class="nav-item" id="settingsBtn">
+                <svg><use href="#i-settings"/></svg>
+                <span>Settings</span>
+            </button>
+        </div>
+    </aside>
+
+    <!-- ---- MAIN -------------------------------------------- -->
+    <main class="main">
+        <header class="topbar">
+            <div class="search">
+                <svg><use href="#i-search"/></svg>
+                <input id="searchInput" type="search" placeholder="Search…" autocomplete="off">
+                <kbd>Ctrl+K</kbd>
             </div>
-
-            <!-- Add Entry Form -->
-            <!-- <form onsubmit="return false" class="input-group" autocomplete="off"> -->
-                <!-- <input type="text" id="siteInput" placeholder="Website *" autocomplete="off"> -->
-                <!-- <input type="text" id="usernameInput" placeholder="Username (optional)" autocomplete="off"> -->
-                <!-- <div style="flex:1;min-width:130px;position:relative"> -->
-                    <!-- <input type="password" id="passwordInput" placeholder="Password *" autocomplete="new-password" style="width:100%;padding-right:40px" oninput="checkStrength()"> -->
-                    <!-- <button type="button" onclick="openGen()" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text2);cursor:pointer;font-size:1.1rem;line-height:1" title="Generate password">🎲</button> -->
-                <!-- </div> -->
-                <!-- <div class="strength-bar s0" id="strengthBar" style="flex-basis:100%;margin-top:-0.3rem;margin-bottom:0.3rem"></div> -->
-                <!-- <select id="addFolderSelect"></select> -->
-                <!-- <button type="button" class="btn" id="addBtn" onclick="addEntry()">➕ Add</button> -->
-            <!-- </form> -->
-
-            <!-- Toolbar with search + trash + views -->
-            <div class="toolbar">
-                <div class="search-box">
-                    <input type="text" id="searchInput" placeholder="🔍 Search..." oninput="searchEntries()" autocomplete="off">
-                    <button type="button" class="clear-search-btn" id="clearSearchBtn" onclick="clearSearch()" title="Clear search">✕</button>
+            <div class="topbar-actions">
+                <div class="view-toggle">
+                    <button class="view-btn is-active" id="viewCardsBtn" data-view="cards" title="Cards view">
+                        <svg><use href="#i-grid"/></svg>
+                    </button>
+                    <button class="view-btn" id="viewListBtn" data-view="list" title="List view">
+                        <svg><use href="#i-list"/></svg>
+                    </button>
                 </div>
-                <div style="display:flex;gap:.4rem;align-items:center;flex-wrap:wrap">
-					<button class="btn btn-outline btn-sm" onclick="showShortcutsHelp()" title="Shortcuts">⌨️</button>
-                    <div class="view-dropdown" id="viewDropdown">
-                        <button class="btn btn-outline btn-sm" id="viewDropdownBtn">🟫 Grid ▾</button>
-                        <div class="view-dropdown-menu hidden" id="viewDropdownMenu">
-                            <button class="view-opt" data-view="grid">🟫 Grid</button>
-                            <button class="view-opt" data-view="compact">📝 Compact</button>
-                            <button class="view-opt" data-view="list">📋 List</button>
-                            <button class="view-opt" data-view="table">📊 Table</button>
-                            <button class="view-opt" data-view="card">🃏 Card</button>
-                            <button class="view-opt" data-view="grouped">📂 Grouped</button>
-                            <button class="view-opt" data-view="detail">🔍 Detail</button>
-                        </div>
+                <button class="icon-btn" id="themeBtn" title="Toggle theme">
+                    <svg class="theme-icon theme-icon-dark"><use href="#i-sun"/></svg>
+                    <svg class="theme-icon theme-icon-light"><use href="#i-moon"/></svg>
+                </button>
+                <button class="btn btn-primary btn-sm" id="newEntryBtn">
+                    <svg><use href="#i-plus"/></svg>
+                    New
+                </button>
+                <div class="user-menu">
+                    <button class="user-chip" id="userChip">
+                        <span id="userName">user</span>
+                    </button>
+                    <div class="user-dropdown is-hidden" id="userDropdown">
+                        <button class="dropdown-item" id="lockBtn">
+                            <svg><use href="#i-lock"/></svg> Lock vault
+                        </button>
+                        <button class="dropdown-item" id="logoutBtn">
+                            <svg><use href="#i-log-out"/></svg> Sign out
+                        </button>
                     </div>
                 </div>
             </div>
+        </header>
 
-            <div class="folders-bar" id="foldersBar"></div>
-            <div id="trashActions" class="hidden" style="margin-bottom:.5rem;text-align:right;">
-                <button class="empty-trash-btn" onclick="emptyTrash()">🗑️ Empty Trash</button>
+        <div class="content">
+            <div class="content-header">
+                <h2 id="contentTitle">All items</h2>
+                <span class="content-meta" id="contentMeta">0 items</span>
             </div>
-            <div id="entriesContainer" class="grid-view">
-                <div style="text-align:center;color:var(--text2);padding:2rem;grid-column:1/-1">📭 No entries</div>
-            </div>
-            <div style="margin-top:.6rem;text-align:right">
-                <button class="btn btn-outline btn-sm" onclick="showExportModal()">📤 Export</button>
+
+            <!-- Entry grid -->
+            <div id="entryGrid" class="entry-grid"></div>
+
+            <!-- Empty state — illustration + message are filled dynamically -->
+            <div id="emptyState" class="empty-state is-hidden">
+                <svg class="empty-illustration" id="emptyIllustration"><use href="#i-empty-vault"/></svg>
+                <h3 id="emptyTitle">Nothing here yet</h3>
+                <p id="emptyMessage">Click <b>+ New</b> to add your first password.</p>
             </div>
         </div>
-    </div>
+    </main>
 
-    <!-- Generator Modal -->
-    <div id="genModal" style="position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:none;justify-content:center;align-items:center;z-index:2000">
-        <div style="background:var(--bg2);border-radius:1.5rem;padding:1.5rem;min-width:320px;max-width:90%">
-            <h3 style="margin-bottom:.8rem;color:var(--text)">🎲 Generator</h3>
-            <div style="background:var(--input);padding:.8rem;border-radius:1rem;font-family:monospace;text-align:center;color:#4ade80;margin:.6rem 0;word-break:break-all" id="genPreview">Click Generate</div>
-            <div style="display:flex;align-items:center;gap:.6rem;margin:.8rem 0">
-                <span>Length:</span>
-                <input type="range" id="pwdLen" min="8" max="64" value="16" oninput="onLenChange()" style="flex:1">
-                <span id="lenVal" style="background:var(--input);padding:.2rem .6rem;border-radius:1rem;min-width:30px;text-align:center">16</span>
+    <!-- ---- SLIDE-OVER DETAIL ------------------------------- -->
+    <aside class="slideover" id="slideover">
+        <header class="slideover-header">
+            <h3 id="slideoverTitle">Entry</h3>
+            <button class="icon-btn" id="slideoverClose"><svg><use href="#i-x"/></svg></button>
+        </header>
+        <div class="slideover-body" id="slideoverBody"></div>
+    </aside>
+
+    <!-- ---- SETTINGS SLIDE-OVER ----------------------------- -->
+    <aside class="slideover" id="settingsPanel">
+        <header class="slideover-header">
+            <h3>Settings</h3>
+            <button class="icon-btn" id="settingsClose"><svg><use href="#i-x"/></svg></button>
+        </header>
+        <div class="slideover-body">
+            <div class="slideover-field">
+                <div class="slideover-field-label">Appearance</div>
+                <div class="setting-row">
+                    <span>Theme</span>
+                    <select id="settingTheme">
+                        <option value="dark">Dark</option>
+                        <option value="light">Light</option>
+                    </select>
+                </div>
+                <div class="setting-row">
+                    <span>Compact action menu (⋯)</span>
+                    <label class="toggle">
+                        <input type="checkbox" id="settingCompact">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+                <div class="setting-row">
+                    <span>Mask usernames (ab***)</span>
+                    <label class="toggle">
+                        <input type="checkbox" id="settingMaskUser">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
             </div>
-            <div style="display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0">
-                <label style="font-size:.8rem;color:var(--text2)"><input type="checkbox" id="useUpper" checked onchange="genPwd()"> A-Z</label>
-                <label style="font-size:.8rem;color:var(--text2)"><input type="checkbox" id="useLower" checked onchange="genPwd()"> a-z</label>
-                <label style="font-size:.8rem;color:var(--text2)"><input type="checkbox" id="useNum" checked onchange="genPwd()"> 0-9</label>
-                <label style="font-size:.8rem;color:var(--text2)"><input type="checkbox" id="useSym" checked onchange="genPwd()"> !@#$</label>
+
+            <div class="slideover-field">
+                <div class="slideover-field-label">Security</div>
+                <div class="setting-row">
+                    <span>Auto-lock after (minutes)</span>
+                    <select id="settingAutoLock">
+                        <option value="0">Never</option>
+                        <option value="1">1</option>
+                        <option value="5">5</option>
+                        <option value="15">15</option>
+                        <option value="30">30</option>
+                        <option value="60">60</option>
+                    </select>
+                </div>
+                <div class="setting-row">
+                    <span>Ask before moving to trash</span>
+                    <label class="toggle">
+                        <input type="checkbox" id="settingAskDelete">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+                <div class="setting-row">
+                    <span>
+                        Check passwords against breach database (HIBP)
+                        <small class="setting-hint">Only the first 5 chars of the SHA-1 are sent — your passwords never leave the machine.</small>
+                    </span>
+                    <label class="toggle">
+                        <input type="checkbox" id="settingHIBP">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
             </div>
-            <div style="display:flex;gap:0.3rem;margin-top:0.8rem;flex-wrap:wrap">
-                <button class="btn btn-sm" onclick="genPreset(16,'upper+lower+num+sym')" style="flex:1;min-width:70px">🔒 Strong 16</button>
-                <button class="btn btn-sm" onclick="genPreset(20,'upper+lower+num+sym')" style="flex:1;min-width:70px">🔒 Strong 20</button>
-                <button class="btn btn-sm btn-danger" onclick="genPreset(32,'upper+lower+num+sym')" style="flex:1;min-width:70px">🛡️ Paranoid 32</button>
+
+            <div class="slideover-field">
+                <div class="slideover-field-label">Clipboard privacy</div>
+                <p style="font-size:12px;color:var(--text-dim);margin:0 0 8px;line-height:1.5">
+                    Windows keeps copied passwords in <b>clipboard history (Win+V)</b>.
+                    To prevent that, disable history in <i>Settings → System → Clipboard</i>.
+                </p>
+                <button class="btn btn-ghost btn-sm" id="openClipboardSettings">Why?</button>
             </div>
-            <div style="display:flex;gap:.4rem;margin-top:.6rem">
-                <button class="btn" onclick="genPwd()" style="flex:1">🔄</button>
-                <button class="btn" onclick="useGen()" style="flex:1">✅ Use</button>
-                <button class="btn btn-outline" onclick="closeGen()">Cancel</button>
+
+            <div class="slideover-field">
+                <div class="slideover-field-label">Export</div>
+                <p style="font-size:12px;color:var(--text-dim);margin:0 0 8px;line-height:1.5">
+                    Download all your passwords as JSON. Requires your master password — file is plaintext.
+                </p>
+                <button class="btn btn-ghost btn-sm" id="exportBtn">
+                    <svg><use href="#i-log-out"/></svg> Export vault
+                </button>
+            </div>
+
+            <div class="slideover-field">
+                <div class="slideover-field-label">Account</div>
+                <p style="font-size:12px;color:var(--text-dim);margin:0 0 8px">
+                    Signed in as <b id="settingUser"></b>
+                </p>
             </div>
         </div>
-    </div>
+    </aside>
 
-    <script src="js/app.js"></script>
+<!-- ============================================================ -->
+<!-- MODAL: Re-auth (for export and other sensitive ops)           -->
+<!-- ============================================================ -->
+<div id="reauthModal" class="modal is-hidden" role="dialog" aria-modal="true">
+    <div class="modal-backdrop" data-close></div>
+    <div class="modal-panel modal-panel-sm">
+        <header class="modal-header">
+            <h3 id="reauthTitle">Confirm master password</h3>
+            <button class="icon-btn" data-close><svg><use href="#i-x"/></svg></button>
+        </header>
+        <form id="reauthForm" class="modal-body" autocomplete="off">
+            <p style="margin:0 0 12px;color:var(--text-dim);font-size:13px" id="reauthMessage">
+                This action requires your master password.
+            </p>
+            <label class="field">
+                <span>Master password</span>
+                <input id="reauthPassword" type="password" required autofocus>
+            </label>
+        </form>
+        <footer class="modal-footer">
+            <button type="button" class="btn btn-ghost" data-close>Cancel</button>
+            <button type="submit" form="reauthForm" class="btn btn-primary" id="reauthConfirm">
+                <svg><use href="#i-check"/></svg> Confirm
+            </button>
+        </footer>
+    </div>
+</div>
+
+</div>
+
+<!-- ============================================================ -->
+<!-- MODAL: New / Edit Entry                                       -->
+<!-- ============================================================ -->
+<div id="entryModal" class="modal is-hidden" role="dialog" aria-modal="true">
+    <div class="modal-backdrop" data-close></div>
+    <div class="modal-panel">
+        <header class="modal-header">
+            <h3 id="entryModalTitle">New entry</h3>
+            <button class="icon-btn" data-close><svg><use href="#i-x"/></svg></button>
+        </header>
+        <form id="entryForm" class="modal-body" autocomplete="off">
+            <input type="hidden" id="entryId">
+            <label class="field">
+                <span>Website / App</span>
+                <input id="entrySite" type="text" required placeholder="example.com">
+            </label>
+            <label class="field">
+                <span>Username / Email</span>
+                <input id="entryUsername" type="text" placeholder="me@example.com">
+            </label>
+            <label class="field">
+                <span>Password</span>
+                <div class="input-with-action">
+                    <input id="entryPassword" type="password" required placeholder="••••••••">
+                    <button type="button" class="icon-btn" id="entryPwToggle"><svg><use href="#i-eye"/></svg></button>
+                    <button type="button" class="icon-btn" id="entryPwGen" title="Generate"><svg><use href="#i-dice"/></svg></button>
+                </div>
+                <div class="strength-bar" id="entryStrengthBar"></div>
+            </label>
+            <label class="field">
+                <span>Folder</span>
+                <select id="entryFolder"></select>
+            </label>
+            <label class="field">
+                <span>Tags <span class="hint">enter to add</span></span>
+                <div class="chip-input" id="entryTagsInput">
+                    <input id="entryTagsField" type="text" placeholder="add a tag…" autocomplete="off">
+                </div>
+                <input type="hidden" id="entryTags">
+            </label>
+        </form>
+        <footer class="modal-footer">
+            <button class="btn btn-ghost" data-close>Cancel</button>
+            <button class="btn btn-primary" id="entrySaveBtn">
+                <svg><use href="#i-check"/></svg> Save
+            </button>
+        </footer>
+    </div>
+</div>
+
+<!-- ============================================================ -->
+<!-- MODAL: Password Generator                                     -->
+<!-- ============================================================ -->
+<div id="genModal" class="modal is-hidden" role="dialog" aria-modal="true">
+    <div class="modal-backdrop" data-close></div>
+    <div class="modal-panel modal-panel-sm">
+        <header class="modal-header">
+            <h3>Password generator</h3>
+            <button class="icon-btn" data-close><svg><use href="#i-x"/></svg></button>
+        </header>
+        <div class="modal-body">
+            <div class="gen-preview" id="genPreview">click regenerate</div>
+            <label class="field">
+                <span>Length <b id="genLenLabel">16</b></span>
+                <input id="genLen" type="range" min="6" max="128" value="16">
+            </label>
+            <div class="gen-options">
+                <label class="check"><input type="checkbox" id="genUpper" checked><span>A-Z</span></label>
+                <label class="check"><input type="checkbox" id="genLower" checked><span>a-z</span></label>
+                <label class="check"><input type="checkbox" id="genNum" checked><span>0-9</span></label>
+                <label class="check"><input type="checkbox" id="genSym" checked><span>!@#</span></label>
+            </div>
+        </div>
+        <footer class="modal-footer">
+            <button class="btn btn-ghost" id="genRegen"><svg><use href="#i-rotate-ccw"/></svg> Regenerate</button>
+            <button class="btn btn-ghost" id="genCopy"><svg><use href="#i-copy"/></svg> Copy</button>
+            <button class="btn btn-primary" id="genUse"><svg><use href="#i-check"/></svg> Use</button>
+        </footer>
+    </div>
+</div>
+
+<!-- ============================================================ -->
+<!-- CONFIRM / PROMPT MODAL (replaces native confirm/prompt)       -->
+<!-- ============================================================ -->
+<div id="confirmModal" class="modal is-hidden" role="dialog" aria-modal="true">
+    <div class="modal-backdrop" data-confirm-cancel></div>
+    <div class="modal-panel modal-panel-sm">
+        <header class="modal-header">
+            <h3 id="confirmTitle">Confirm</h3>
+            <button class="icon-btn" data-confirm-cancel><svg><use href="#i-x"/></svg></button>
+        </header>
+        <form id="confirmForm" class="modal-body">
+            <p id="confirmMessage" style="margin:0 0 12px;color:var(--text-dim);font-size:13px;line-height:1.5">
+                Are you sure?
+            </p>
+            <label class="field is-hidden" id="confirmInputField">
+                <input id="confirmInput" type="text" autocomplete="off">
+            </label>
+        </form>
+        <footer class="modal-footer">
+            <button type="button" class="btn btn-ghost" data-confirm-cancel id="confirmCancelBtn">Cancel</button>
+            <button type="submit" form="confirmForm" class="btn btn-primary" id="confirmOkBtn">
+                <svg><use href="#i-check"/></svg> Confirm
+            </button>
+        </footer>
+    </div>
+</div>
+
+<!-- ============================================================ -->
+<!-- COMMAND PALETTE (Cmd+K) — phase 3, shell only for now         -->
+<!-- ============================================================ -->
+<div id="cmdPalette" class="cmd-palette is-hidden" role="dialog" aria-modal="true">
+    <div class="modal-backdrop" data-close></div>
+    <div class="cmd-panel">
+        <div class="cmd-input">
+            <svg><use href="#i-command"/></svg>
+            <input id="cmdInput" type="text" placeholder="Type a command or search…">
+        </div>
+        <div class="cmd-results" id="cmdResults"></div>
+    </div>
+</div>
+
+<script src="js/app.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/js/app.js b/js/app.js
index 94b576d..cc615d9 100644
--- a/js/app.js
+++ b/js/app.js
@@ -82,6 +82,9 @@ const state = {
     compactActions:  localStorage.getItem('compactActions')  === '1',  // default false
     viewMode:  localStorage.getItem('viewMode') || 'cards',  // 'cards' | 'list'
     checked:   new Set(),    // entry IDs checked for batch operations
+    hibpEnabled: localStorage.getItem('hibpEnabled') === '1', // default OFF
+    // entry.id → count from HIBP (0 = clean, >0 = pwned, undefined = unchecked)
+    hibpResults: new Map(),
 };
 
 // ============================================================
@@ -174,6 +177,90 @@ async function api(path, opts) {
     return body;
 }
 
+// ============================================================
+// HIBP — Have I Been Pwned breach check (k-anonymity)
+// ============================================================
+//
+// HIBP's range API exposes pwned password counts without ever seeing the
+// password (or even its full hash):
+//   1. Client computes SHA-1 of the password.
+//   2. Client sends ONLY the first 5 hex chars to api.pwnedpasswords.com/range/XXXXX
+//   3. Server returns up to ~500 suffixes (35 chars each) with counts.
+//   4. Client searches the response for its own suffix locally.
+//
+// This means the network observer (and HIBP itself) sees only the 5-char
+// prefix — which matches ~3,000 of the ~half-billion known pwned passwords.
+// Information leakage is bounded by design.
+//
+// Toggle is OFF by default. When enabled, all entries are checked once
+// after vault load, then individual entries are re-checked when the user
+// edits the password. Results cached in state.hibpResults keyed by entry id.
+
+async function sha1Hex(text) {
+    const buf = new TextEncoder().encode(text);
+    const hashBuf = await crypto.subtle.digest('SHA-1', buf);
+    const bytes = new Uint8Array(hashBuf);
+    let hex = '';
+    for (const b of bytes) hex += b.toString(16).padStart(2, '0');
+    return hex.toUpperCase();
+}
+
+// Returns the breach count (0 if not found, >0 if pwned). Throws on
+// network failure — caller decides whether to silently skip or alert.
+async function hibpCheckPassword(plaintext) {
+    if (!plaintext) return 0;
+    const hash   = await sha1Hex(plaintext);
+    const prefix = hash.substring(0, 5);
+    const suffix = hash.substring(5);
+
+    const resp = await fetch('https://api.pwnedpasswords.com/range/' + prefix, {
+        // Padding mitigates side-channel attacks where an observer counts
+        // bytes in the response to narrow down the prefix queried.
+        headers: { 'Add-Padding': 'true' },
+    });
+    if (!resp.ok) throw new Error('HIBP HTTP ' + resp.status);
+    const body = await resp.text();
+    // Body lines: "SUFFIX:COUNT\r\n" — search for our suffix.
+    for (const line of body.split('\n')) {
+        const colonAt = line.indexOf(':');
+        if (colonAt <= 0) continue;
+        if (line.substring(0, colonAt).trim() === suffix) {
+            return parseInt(line.substring(colonAt + 1).trim(), 10) || 0;
+        }
+    }
+    return 0;
+}
+
+// Batch-check every entry currently in state.entries. Awaits all in
+// parallel but with a small concurrency cap so we don't hammer HIBP
+// or trip browser connection limits. Mutates state.hibpResults and
+// re-renders to show the new badges.
+async function hibpCheckAllEntries() {
+    if (!state.hibpEnabled || !state.entries.length) return;
+    const CONCURRENCY = 6;
+    const queue = state.entries.slice();
+    const workers = [];
+
+    for (let w = 0; w < CONCURRENCY; w++) {
+        workers.push((async () => {
+            while (queue.length) {
+                const entry = queue.shift();
+                try {
+                    const pwd = await decryptPwd(entry.encrypted_password, entry.iv);
+                    if (pwd === '[ERROR]') continue;
+                    const count = await hibpCheckPassword(pwd);
+                    state.hibpResults.set(entry.id, count);
+                } catch (e) {
+                    // Network or decrypt failure: skip silently. Will retry
+                    // next time the user opens the vault.
+                }
+            }
+        })());
+    }
+    await Promise.all(workers);
+    render();
+}
+
 // ============================================================
 // KDF MIGRATION (PBKDF2 100k → 600k re-encryption)
 // ============================================================
@@ -942,6 +1029,19 @@ function renderCard(e) {
         chip.appendChild(el('span', null, t));
         meta.appendChild(chip);
     });
+    // HIBP pwned badge — only shown when the user enabled HIBP and the
+    // background scan completed with count > 0 for this entry.
+    const pwnedCount = state.hibpResults.get(e.id);
+    if (state.hibpEnabled && pwnedCount && pwnedCount > 0) {
+        const chip = el('span', {
+            class: 'entry-chip is-pwned',
+            title: 'This password appeared in ' + pwnedCount.toLocaleString() +
+                   ' known data breaches. Consider changing it.',
+        });
+        chip.appendChild(icon('i-alert'));
+        chip.appendChild(el('span', null, 'Pwned'));
+        meta.appendChild(chip);
+    }
     card.appendChild(meta);
 
     return card;
@@ -2086,6 +2186,7 @@ function openSettings() {
     $('#settingAskDelete').checked = state.askBeforeDelete;
     $('#settingCompact').checked   = state.compactActions;
     $('#settingMaskUser').checked  = state.maskUsernames;
+    $('#settingHIBP').checked      = state.hibpEnabled;
     $('#settingUser').textContent = state.username;
     $('#settingsPanel').classList.add('is-open');
 }
@@ -2159,6 +2260,9 @@ async function enterApp() {
     await loadEntries();
     render();
     resetAutoLock();
+    // Fire-and-forget HIBP scan if the user opted in. Runs in background,
+    // re-renders when done to show badges.
+    if (state.hibpEnabled) hibpCheckAllEntries();
 }
 
 // ============================================================
@@ -2351,6 +2455,18 @@ async function init() {
         localStorage.setItem('maskUsernames', state.maskUsernames ? '1' : '0');
         render();
     });
+    $('#settingHIBP').addEventListener('change', e => {
+        state.hibpEnabled = e.target.checked;
+        localStorage.setItem('hibpEnabled', state.hibpEnabled ? '1' : '0');
+        if (state.hibpEnabled) {
+            toast('Checking passwords against breach database…');
+            hibpCheckAllEntries();
+        } else {
+            state.hibpResults.clear();
+            render();
+            toast('Breach check disabled');
+        }
+    });
     $('#openClipboardSettings').addEventListener('click', () => {
         toast('Open Windows Settings → System → Clipboard → turn off "Clipboard history"', 'warning');
     });