From 742ba505c6041e67f61cc76c8621f05947e25ce9 Mon Sep 17 00:00:00 2001
From: Timothy Farrell <tim@thecookiejar.me>
Date: Mon, 11 May 2026 22:32:05 +0000
Subject: [PATCH] First pass

---
 .gitignore                              |   24 +
 .vscode/extensions.json                 |    3 +
 README.md                               |  118 +++
 index.html                              |   13 +
 jsconfig.json                           |   33 +
 package-lock.json                       | 1155 +++++++++++++++++++++++
 package.json                            |   19 +
 public/favicon.svg                      |    1 +
 public/icons.svg                        |   24 +
 src/App.svelte                          |   16 +
 src/components/EntryDetail.svelte       |  323 +++++++
 src/components/EntryForm.svelte         |  225 +++++
 src/components/EntryList.svelte         |  189 ++++
 src/components/ImportExport.svelte      |  247 +++++
 src/components/LockScreen.svelte        |  193 ++++
 src/components/MainLayout.svelte        |  239 +++++
 src/components/PasswordGenerator.svelte |  301 ++++++
 src/components/Sidebar.svelte           |  373 ++++++++
 src/lib/crypto/crypto.js                |  196 ++++
 src/lib/models/schema.js                |  136 +++
 src/lib/storage/db.js                   |  370 ++++++++
 src/lib/stores/app.svelte.js            |   22 +
 src/lib/stores/search.svelte.js         |   16 +
 src/lib/stores/security.svelte.js       |   82 ++
 src/main.js                             |    9 +
 src/styles/main.css                     |  179 ++++
 svelte.config.js                        |    2 +
 vite.config.js                          |   10 +
 28 files changed, 4518 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .vscode/extensions.json
 create mode 100644 README.md
 create mode 100644 index.html
 create mode 100644 jsconfig.json
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 public/favicon.svg
 create mode 100644 public/icons.svg
 create mode 100644 src/App.svelte
 create mode 100644 src/components/EntryDetail.svelte
 create mode 100644 src/components/EntryForm.svelte
 create mode 100644 src/components/EntryList.svelte
 create mode 100644 src/components/ImportExport.svelte
 create mode 100644 src/components/LockScreen.svelte
 create mode 100644 src/components/MainLayout.svelte
 create mode 100644 src/components/PasswordGenerator.svelte
 create mode 100644 src/components/Sidebar.svelte
 create mode 100644 src/lib/crypto/crypto.js
 create mode 100644 src/lib/models/schema.js
 create mode 100644 src/lib/storage/db.js
 create mode 100644 src/lib/stores/app.svelte.js
 create mode 100644 src/lib/stores/search.svelte.js
 create mode 100644 src/lib/stores/security.svelte.js
 create mode 100644 src/main.js
 create mode 100644 src/styles/main.css
 create mode 100644 svelte.config.js
 create mode 100644 vite.config.js

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..bdef820
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1b6b114
--- /dev/null
+++ b/README.md
@@ -0,0 +1,118 @@
+# Password Vault
+
+An offline-first password manager that runs entirely in your browser. No server, no cloud, no tracking — your vault lives on your machine.
+
+## Features
+
+- **AES-256-GCM encryption** — All credentials encrypted with a key derived from your master password via PBKDF2 (100,000 iterations). The key exists only in memory.
+- **Zero network calls** — Works from `file://` or `localhost`. No APIs, no analytics, no telemetry.
+- **Group management** — Organize entries into color-coded groups. Create, rename, delete.
+- **Full-text search** — Instant search across title, username, URL, and notes.
+- **Password generator** — Configurable length (4–64), character types, custom exclusions, strength indicator.
+- **Copy to clipboard** — One-click copy with 15-second auto-clear.
+- **JSON import/export** — Export your entire vault as encrypted JSON. Import with merge or replace mode.
+- **Auto-lock** — Vault locks automatically on tab switch, visibility change, or configurable inactivity timer.
+- **Dark theme** — Responsive layout that works on desktop and mobile.
+
+## Quick Start
+
+```bash
+npm install
+npm run dev        # http://localhost:5173
+```
+
+## Production Build
+
+```bash
+npm run build      # → dist/ (static files)
+npm run preview    # test the production build locally
+```
+
+The `dist/` folder contains fully static HTML/CSS/JS that works from:
+- `file://` protocol (open `dist/index.html` directly)
+- Any static web server (nginx, Apache, GitHub Pages, etc.)
+
+## Architecture
+
+```
+src/
+├── App.svelte                      # Root — toggles LockScreen ↔ MainLayout
+├── main.js                         # Entry point
+├── components/
+│   ├── LockScreen.svelte           # Vault creation & password unlock
+│   ├── MainLayout.svelte           # Dashboard shell (sidebar + content)
+│   ├── Sidebar.svelte              # Group list, search, group CRUD
+│   ├── EntryList.svelte            # Searchable/filterable entry table
+│   ├── EntryDetail.svelte          # View single entry, copy, delete
+│   ├── EntryForm.svelte            # Create/edit entry with validation
+│   ├── PasswordGenerator.svelte    # Standalone generator panel
+│   └── ImportExport.svelte         # JSON import/export modals
+├── lib/
+│   ├── crypto/crypto.js            # PBKDF2 key derivation, AES-GCM, generator
+│   ├── models/schema.js            # Data factories, validation, ID generation
+│   ├── storage/db.js               # IndexedDB wrapper (idb library)
+│   └── stores/
+│       ├── app.svelte.js           # Reactive app state (lock/unlock)
+│       ├── search.svelte.js        # Shared search + filter state
+│       └── security.svelte.js      # Auto-lock timer, visibility detection
+└── styles/
+    └── main.css                    # Dark theme, CSS variables, responsive
+```
+
+### Encryption Flow
+
+```
+Master Password ──PBKDF2──→ 256-bit Key ──AES-GCM──→ Encrypted Credential
+                  (100k iters)
+                      │
+                      └── Salt stored in IndexedDB (not encrypted)
+```
+
+- The encryption key is **never persisted** — it lives only in JavaScript memory.
+- A test payload (random string) is encrypted on vault creation and stored alongside the salt. On unlock, the entered password is used to derive a key and decrypt the test payload — if decryption succeeds, the password is correct.
+- On tab close or auto-lock, the key is cleared from memory.
+
+### Storage Schema (IndexedDB)
+
+| Store | Fields |
+|---|---|
+| `entries` | `id`, `title`, `username`, `password` (encrypted), `url`, `notes` (encrypted), `groupId`, `createdAt`, `updatedAt` |
+| `groups` | `id`, `name`, `color`, `createdAt` |
+| `meta` | `salt`, `testEncrypted`, `testPlaintext` |
+
+## Security Considerations
+
+| Threat | Mitigation |
+|---|---|
+| Key persistence | Key stored only in `$state`, cleared on lock/close |
+| Weak passwords | Strength indicator on generator; no minimum enforced (user's choice) |
+| Clipboard leakage | Auto-clear after 15 seconds |
+| Tab left open | Auto-lock on visibility change (tab switch) |
+| Database tampering | All sensitive data encrypted at rest with AES-256-GCM |
+| Brute force | PBKDF2 with 100,000 iterations slows offline attacks |
+
+### Known limitations
+
+- **No browser fingerprinting or anti-keylogger** — This is a local tool, not a hardened security appliance.
+- **IndexedDB can be inspected** — Encrypted data is safe, but metadata (titles, usernames, URLs) may be visible if not encrypted. Currently only `password` and `notes` are encrypted; titles/usernames/URLs are stored in plaintext for searchability.
+- **No automatic backups** — Use the JSON export feature to back up your vault regularly.
+
+## Development
+
+```bash
+npm run dev          # Start dev server with HMR
+npm run build        # Production build (zero warnings target)
+npm run preview      # Preview production build
+```
+
+### Stack
+
+- **Svelte 5** — Runes-based reactivity (`$state`, `$derived`, `$effect`)
+- **Vite 8** — Build tool and dev server
+- **idb** — Promise-based IndexedDB wrapper
+- **Web Crypto API** — Native browser cryptography (no external crypto libraries)
+- **Vanilla CSS** — Dark theme with CSS custom properties, no preprocessors
+
+## License
+
+MIT
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..32170ee
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Password Vault</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..c7a0b10
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "target": "ESNext",
+    "module": "ESNext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..8fb5bfb
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1155 @@
+{
+  "name": "password_manager",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "password_manager",
+      "version": "0.0.0",
+      "dependencies": {
+        "idb": "^8.0.3"
+      },
+      "devDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^7.1.2",
+        "svelte": "^5.55.5",
+        "vite": "^8.0.12"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
+      "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.129.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.129.0.tgz",
+      "integrity": "sha512-3oz8m3FGdr2nDXVqmFUw7jolKliC4MoyXYIG2c7gpjBnzUWQpUGIYcXYKxTdTi+N2jusvt610ckTMkxdwHkYEg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0.tgz",
+      "integrity": "sha512-TWMZnRLMe63C2Lhyicviu7ZHaU4kxa6PS3rofvc9GmcvptzNN11BcfQ4Sl7MwTOsisQoa2keB/EBdNCAnUo8vA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0.tgz",
+      "integrity": "sha512-6XcD+8k0gPVItNagEw78/qqcBDwKcwDYS8V2hRmVsfUSIrd8cWe/CBvRDI5toqFyPfj+FJr6t8U6Xj2P2prEew==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0.tgz",
+      "integrity": "sha512-iN/tWVXRQDWvmZlKdceP1Dwug9GDpEymhb9p4xnEe6zvCg5lFmzVljl+1qR1NVx3yfGpr2Na+CuLmv5IU8uzfQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0.tgz",
+      "integrity": "sha512-jjQMDvvwSOuhOwMszD/klSOjyWMM3zI64hWTj9KT5x4MxRbZAf+7vLQ6qouRhtsLVFHr3f0ILaJAfgENPiQdAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0.tgz",
+      "integrity": "sha512-d//Dtg2x6/m3mbV64yUGNnDGNZaDGRpDLLNGerHQUVObuNaIQaaDp25yUiqGXtHEXX+NP2d0wAlmKgpYgIAJ2A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0.tgz",
+      "integrity": "sha512-n7Ofp0mx+aB2cC+Sdy5YtMnXtY9lchnHbY+3Yt0uq9JsWQExf4f5Whu0tK0R8Jdc9S6RchTHjIFY7uc92puOVQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0.tgz",
+      "integrity": "sha512-EIVjy2cgd7uuMMo94FVkBp7F6DhcZAUwNURkSG3RwUmvAXR6s0ISxM81U+IydcZByPG0pZIHsf1b6kTxoFDgJA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0.tgz",
+      "integrity": "sha512-JEwwOPcwTLAcpDQlqSmjEmfs63xJnSiUNIGvLcDLUHCWK4XowpS/7c7tUsUH6uT/ct6bMUTdXKfI8967FYj6mg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0.tgz",
+      "integrity": "sha512-0wjCFhLrihtAubnT9iA0N++0pSV0z5Hg7tNGdNJ4RFaINceHadoF+kiFGyY1qSSNVIAZtLotG8Ju1bgDPkjnFA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0.tgz",
+      "integrity": "sha512-Dfn7iak9BcMMePxcoJfpSbWqnEyrp/dRF63/8qW/eHBdOZov6x5aShLLEYGYdIeSJ6vMLK/XCVB+lGIxm41bQA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0.tgz",
+      "integrity": "sha512-5/utzzDmD/pD/bmuaUcbTf/sZYy0aztwIVlfpoW1fTjCZ0BaPOMVWGZL1zvgxyi7ZIVYWlxKONHmSbHuiOh8Jw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0.tgz",
+      "integrity": "sha512-ouJs8VcUomfLfpbUECqFMRqdV4x6aeAK3MA4m6vTrJJjKyWTV5KnxZx7Jd9G+GlDaQQxubcba00x16OyJ1meig==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0.tgz",
+      "integrity": "sha512-E+oHKGiDA+lsKMmFtffDDw91EryDT7uJocrIuCHqhm6bCTM6xFK+3gaCkYOHfPwQr0cCNarSM2xaELoQDz9jJg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.10.0",
+        "@emnapi/runtime": "1.10.0",
+        "@napi-rs/wasm-runtime": "^1.1.4"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0.tgz",
+      "integrity": "sha512-yYK02n8Rngo+gbm1y6G0+7jk1sJ/2Wt7K0me0Y7k/ErBpyf+LJ2gFpqWVTcRV1rUepBlQRmpgWkTQCiiwrK0Ow==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0.tgz",
+      "integrity": "sha512-14bpChMahXRRXiTwahSl+zzHPW6qQTXtkMuJBFlbo+pqSAews2d4BdCSHfrJ/MBsCZtpmTafsY+1QhBzitcmdg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0.tgz",
+      "integrity": "sha512-aKs/3GSWyV0mrhNmt/96/Z3yczC3yvrzYATCiCXQebBsGyYzjNdUphRVLeJQ67ySKVXRfMxt2lm12pmXvbPFQQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@sveltejs/acorn-typescript": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.9.tgz",
+      "integrity": "sha512-lVJX6qEgs/4DOcRTpo56tmKzVPtoWAaVbL4hfO7t7NVwl9AAXzQR6cihesW1BmNMPl+bK6dreu2sOKBP2Q9CIA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^8.9.0"
+      }
+    },
+    "node_modules/@sveltejs/vite-plugin-svelte": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-7.1.2.tgz",
+      "integrity": "sha512-DrUBA2UXRfDmUX/ZTiEopd3X40yavsJF1FX2RygcuIScHL7o5YX1fMvoYnDhjeJQC4weCOklirpNWlcb2NiSeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.3.1",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.0",
+        "vitefu": "^1.1.2"
+      },
+      "engines": {
+        "node": "^20.19 || ^22.12 || >=24"
+      },
+      "peerDependencies": {
+        "svelte": "^5.46.4",
+        "vite": "^8.0.0-beta.7 || ^8.0.0"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
+      "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.1.tgz",
+      "integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/devalue": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.8.0.tgz",
+      "integrity": "sha512-2zA9pFEsnp7vWBZbXF5JAgAq0fsUIt/1XPbRiAmRV3lp/2C3upzH+sADiyy66aFCihoLEsrQHxNM5w1gIDfsBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/esm-env": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+      "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/esrap": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-2.2.7.tgz",
+      "integrity": "sha512-Dl7o7btn2YXca1VXx+PVl+lKuZdHBm8oCFuckUxqchMvNMdHMJ/qF31wtPaVyWvFYLQePkbXJrirWzbAP6Yamw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/types": "^8.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/types": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/idb": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.3.tgz",
+      "integrity": "sha512-LtwtVyVYO5BqRvcsKuB2iUMnHwPVByPCXFXOpuU96IZPPoPN6xjOGxZQ74pgSVVLQWtUOYgyeL4GE98BY5D3wg==",
+      "license": "ISC"
+    },
+    "node_modules/is-reference": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.6"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.14.tgz",
+      "integrity": "sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0.tgz",
+      "integrity": "sha512-yD986aXDESFGS95spT1LAv0jssywP4npMEjmMHyN2/5+eE8qQJUype2AaKkRiLgBgyD0LFlubwAht7VmY8rGoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.129.0",
+        "@rolldown/pluginutils": "1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0",
+        "@rolldown/binding-darwin-arm64": "1.0.0",
+        "@rolldown/binding-darwin-x64": "1.0.0",
+        "@rolldown/binding-freebsd-x64": "1.0.0",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.0",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.0",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0",
+        "@rolldown/binding-linux-x64-musl": "1.0.0",
+        "@rolldown/binding-openharmony-arm64": "1.0.0",
+        "@rolldown/binding-wasm32-wasi": "1.0.0",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/svelte": {
+      "version": "5.55.5",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.55.5.tgz",
+      "integrity": "sha512-2uCs/LZ9us+AktdzYJM8OcxQ8qnPS1kpaO7syGT/MgO+6Qr1Ybl+TqPq+97u7PHqmmMlye5ZkoyXONy5mjjAbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@sveltejs/acorn-typescript": "^1.0.5",
+        "@types/estree": "^1.0.5",
+        "@types/trusted-types": "^2.0.7",
+        "acorn": "^8.12.1",
+        "aria-query": "5.3.1",
+        "axobject-query": "^4.1.0",
+        "clsx": "^2.1.1",
+        "devalue": "^5.6.4",
+        "esm-env": "^1.2.1",
+        "esrap": "^2.2.4",
+        "is-reference": "^3.0.3",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.11",
+        "zimmerframe": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/vite": {
+      "version": "8.0.12",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.12.tgz",
+      "integrity": "sha512-w2dDofOWv2QB09ZITZBsvKTVAlYvPR4IAmrY/v0ir9KvLs0xybR7i48wxhM1/oyBWO34wPns+bPGw5ZrZqDpZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.4",
+        "postcss": "^8.5.14",
+        "rolldown": "1.0.0",
+        "tinyglobby": "^0.2.16"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.1.18",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitefu": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.3.tgz",
+      "integrity": "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==",
+      "dev": true,
+      "license": "MIT",
+      "workspaces": [
+        "tests/deps/*",
+        "tests/projects/*",
+        "tests/projects/workspace/packages/*"
+      ],
+      "peerDependencies": {
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/zimmerframe": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
+      "integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..2ad0e4e
--- /dev/null
+++ b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "password-manager",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --host 0.0.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "svelte": "^5.55.5",
+    "vite": "^8.0.12"
+  },
+  "dependencies": {
+    "idb": "^8.0.3"
+  }
+}
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..6893eb1
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
\ No newline at end of file
diff --git a/public/icons.svg b/public/icons.svg
new file mode 100644
index 0000000..e952219
--- /dev/null
+++ b/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
diff --git a/src/App.svelte b/src/App.svelte
new file mode 100644
index 0000000..2f91976
--- /dev/null
+++ b/src/App.svelte
@@ -0,0 +1,16 @@
+<script>
+  import LockScreen from './components/LockScreen.svelte'
+  import MainLayout from './components/MainLayout.svelte'
+  import { app } from './lib/stores/app.svelte'
+</script>
+
+<svelte:head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</svelte:head>
+
+{#if app.isUnlocked}
+  <MainLayout />
+{:else}
+  <LockScreen />
+{/if}
diff --git a/src/components/EntryDetail.svelte b/src/components/EntryDetail.svelte
new file mode 100644
index 0000000..7c50c63
--- /dev/null
+++ b/src/components/EntryDetail.svelte
@@ -0,0 +1,323 @@
+<script>
+  import { getEntryById, deleteEntry } from '../lib/storage/db.js'
+  import { decrypt } from '../lib/crypto/crypto.js'
+  import { app } from '../lib/stores/app.svelte.js'
+
+  let { entryId, onEdit, onBack } = $props()
+
+  let entry = $state(null)
+  let passwordVisible = $state(false)
+  let decryptedPassword = $state('')
+  let loading = $state(true)
+  let error = $state('')
+  let showDeleteConfirm = $state(false)
+  let deleting = $state(false)
+  let toast = $state('')
+  let toastTimer = null
+
+  async function loadEntry() {
+    loading = true
+    error = ''
+    try {
+      entry = await getEntryById(entryId)
+      if (entry && app.encryptionKey) {
+        decryptedPassword = await decrypt(entry.encryptedPassword, app.encryptionKey)
+      }
+    } catch (e) {
+      error = 'Failed to load entry: ' + e.message
+    }
+    loading = false
+  }
+
+  loadEntry()
+
+  function showToast(message) {
+    toast = message
+    if (toastTimer) clearTimeout(toastTimer)
+    toastTimer = setTimeout(() => { toast = '' }, 3000)
+  }
+
+  async function copyToClipboard(text, label) {
+    try {
+      await navigator.clipboard.writeText(text)
+      showToast(`✓ ${label} copied (auto-clear in 15s)`)
+      // Auto-clear after 15 seconds
+      setTimeout(async () => {
+        try {
+          // Try to clear by writing spaces
+          await navigator.clipboard.writeText('')
+        } catch {
+          // Some browsers don't allow clearing clipboard
+        }
+      }, 15000)
+    } catch (e) {
+      // Fallback for browsers without clipboard API
+      const textarea = document.createElement('textarea')
+      textarea.value = text
+      textarea.style.position = 'fixed'
+      textarea.style.opacity = '0'
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+      showToast(`✓ ${label} copied`)
+    }
+  }
+
+  async function handleDelete() {
+    deleting = true
+    try {
+      await deleteEntry(entryId)
+      onBack()
+    } catch (e) {
+      error = 'Failed to delete: ' + e.message
+    }
+    deleting = false
+    showDeleteConfirm = false
+  }
+</script>
+
+<div class="entry-detail">
+  <!-- Toast notification -->
+  {#if toast}
+    <div class="toast">{toast}</div>
+  {/if}
+
+  {#if loading}
+    <div class="loading">Loading...</div>
+  {:else if error}
+    <div class="error-banner">{error}</div>
+  {:else if !entry}
+    <div class="empty-state">Entry not found</div>
+  {:else}
+    <div class="detail-card">
+      <div class="detail-header">
+        <h2>{entry.title}</h2>
+        <div class="header-actions">
+          <button class="btn btn-ghost btn-sm" onclick={() => onEdit(entry.id)}>✏️ Edit</button>
+          <button class="btn btn-danger btn-sm" onclick={() => showDeleteConfirm = true}>🗑 Delete</button>
+        </div>
+      </div>
+
+      <div class="detail-fields">
+        <div class="detail-field">
+          <span class="field-label">Username</span>
+          <div class="field-value">
+            <span>{entry.username}</span>
+            <button class="btn btn-ghost btn-sm copy-btn" onclick={() => copyToClipboard(entry.username, 'Username')} title="Copy username">📋</button>
+          </div>
+        </div>
+
+        <div class="detail-field">
+          <span class="field-label">Password</span>
+          <div class="field-value">
+            <span>{passwordVisible ? decryptedPassword : '••••••••••••'}</span>
+            <button class="btn btn-ghost btn-sm" onclick={() => passwordVisible = !passwordVisible} title="Toggle visibility">
+              {passwordVisible ? '🙈' : '👁'}
+            </button>
+            <button class="btn btn-ghost btn-sm copy-btn" onclick={() => copyToClipboard(decryptedPassword, 'Password')} title="Copy password">📋</button>
+          </div>
+        </div>
+
+        {#if entry.url}
+          <div class="detail-field">
+            <span class="field-label">URL</span>
+            <div class="field-value">
+              <a href={entry.url} target="_blank" rel="noopener noreferrer">{entry.url}</a>
+              <button class="btn btn-ghost btn-sm copy-btn" onclick={() => copyToClipboard(entry.url, 'URL')} title="Copy URL">📋</button>
+            </div>
+          </div>
+        {/if}
+
+        {#if entry.notes}
+          <div class="detail-field">
+            <span class="field-label">Notes</span>
+            <div class="field-value notes">{entry.notes}</div>
+          </div>
+        {/if}
+      </div>
+
+      <div class="detail-meta">
+        <span class="text-xs text-muted">Created: {new Date(entry.createdAt).toLocaleString()}</span>
+        <span class="text-xs text-muted">Updated: {new Date(entry.updatedAt).toLocaleString()}</span>
+      </div>
+    </div>
+
+    <!-- Delete confirmation modal -->
+    {#if showDeleteConfirm}
+      <div class="modal-overlay" role="presentation" onclick={() => showDeleteConfirm = false}>
+        <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+        <div class="modal" role="dialog" aria-modal="true" aria-label="Delete confirmation" tabindex="-1" onclick={(e) => e.stopPropagation()}>
+          <h3>Delete Entry</h3>
+          <p>Are you sure you want to delete "<strong>{entry.title}</strong>"? This cannot be undone.</p>
+          <div class="modal-actions">
+            <button class="btn btn-danger" onclick={handleDelete} disabled={deleting}>
+              {deleting ? 'Deleting...' : 'Yes, delete'}
+            </button>
+            <button class="btn btn-ghost" onclick={() => showDeleteConfirm = false}>Cancel</button>
+          </div>
+        </div>
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .loading, .empty-state {
+    text-align: center;
+    padding: 3rem;
+    color: var(--color-text-muted);
+  }
+
+  .error-banner {
+    padding: 12px 16px;
+    background: rgba(229, 72, 77, 0.15);
+    border: 1px solid rgba(229, 72, 77, 0.4);
+    border-radius: var(--radius-md);
+    color: var(--color-danger);
+    font-size: 0.85rem;
+  }
+
+  .toast {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 10px 16px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    font-size: 0.85rem;
+    color: var(--color-success);
+    box-shadow: var(--shadow);
+    z-index: 1000;
+    animation: slideIn 200ms ease;
+  }
+
+  @keyframes slideIn {
+    from { transform: translateY(20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+  }
+
+  .detail-card {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+    max-width: 600px;
+  }
+
+  .detail-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--color-border);
+    gap: 12px;
+  }
+
+  .detail-header h2 {
+    font-size: 1.25rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .detail-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .field-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    margin-bottom: 4px;
+    display: block;
+  }
+
+  .field-value {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.95rem;
+    word-break: break-all;
+  }
+
+  .field-value.notes {
+    white-space: pre-wrap;
+  }
+
+  .field-value a {
+    color: var(--color-primary);
+    text-decoration: none;
+  }
+
+  .field-value a:hover {
+    text-decoration: underline;
+  }
+
+  .copy-btn {
+    flex-shrink: 0;
+  }
+
+  .detail-meta {
+    display: flex;
+    gap: 16px;
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid var(--color-border);
+  }
+
+  /* Modal */
+  .modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 200;
+    padding: 1rem;
+  }
+
+  .modal {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+    max-width: 400px;
+    width: 100%;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+
+  .modal h3 {
+    margin-bottom: 12px;
+  }
+
+  .modal p {
+    color: var(--color-text-muted);
+    font-size: 0.9rem;
+    margin-bottom: 20px;
+  }
+
+  .modal-actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  @media (max-width: 600px) {
+    .header-actions {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/components/EntryForm.svelte b/src/components/EntryForm.svelte
new file mode 100644
index 0000000..8d5a6bc
--- /dev/null
+++ b/src/components/EntryForm.svelte
@@ -0,0 +1,225 @@
+<script>
+  import { addEntry, updateEntry, getEntryById, getGroups } from '../lib/storage/db.js'
+  import { encrypt, decrypt } from '../lib/crypto/crypto.js'
+  import { createEntry, updateEntry as updateEntryModel, validateEntry } from '../lib/models/schema.js'
+  import { generatePassword } from '../lib/crypto/crypto.js'
+  import { app } from '../lib/stores/app.svelte.js'
+  import PasswordGenerator from './PasswordGenerator.svelte'
+
+  let { entryId, onSave, onCancel } = $props()
+
+  let title = $state('')
+  let username = $state('')
+  let password = $state('')
+  let url = $state('')
+  let notes = $state('')
+  let groupId = $state('')
+  let passwordVisible = $state(false)
+  let groups = $state([])
+  let loading = $state(true)
+  let error = $state('')
+  let saving = $state(false)
+  let isEdit = $state(false)
+  let formErrors = $state([])
+
+  async function loadForm() {
+    loading = true
+    try {
+      groups = await getGroups()
+      if (entryId) {
+        isEdit = true
+        const entry = await getEntryById(entryId)
+        if (entry) {
+          title = entry.title
+          username = entry.username
+          password = await decrypt(entry.encryptedPassword, app.encryptionKey)
+          url = entry.url || ''
+          notes = entry.notes || ''
+          groupId = entry.groupId || ''
+        } else {
+          error = 'Entry not found'
+        }
+      }
+    } catch (e) {
+      error = 'Failed to load form: ' + e.message
+    }
+    loading = false
+  }
+
+  loadForm()
+
+  async function handleSubmit() {
+    formErrors = []
+    error = ''
+    saving = true
+
+    try {
+      const validation = validateEntry({ title, username, encryptedPassword: password })
+      if (!validation.valid) {
+        formErrors = validation.errors
+        saving = false
+        return
+      }
+
+      const encryptedPassword = await encrypt(password, app.encryptionKey)
+
+      if (isEdit) {
+        const existing = await getEntryById(entryId)
+        const updated = updateEntryModel(existing, {
+          title,
+          username,
+          encryptedPassword,
+          url,
+          notes,
+          groupId,
+        })
+        await updateEntry(updated)
+      } else {
+        const entry = createEntry({
+          title,
+          username,
+          encryptedPassword,
+          url,
+          notes,
+          groupId,
+        })
+        await addEntry(entry)
+      }
+
+      onSave()
+    } catch (e) {
+      error = 'Failed to save: ' + e.message
+    }
+
+    saving = false
+  }
+</script>
+
+<div class="entry-form">
+  {#if loading}
+    <div class="loading">Loading...</div>
+  {:else}
+    {#if error}
+      <div class="error-banner">{error}</div>
+    {/if}
+
+    <form class="form-card" submitHandler={handleSubmit}>
+      {#if formErrors.length > 0}
+        <div class="validation-errors">
+          {#each formErrors as err}
+            <div class="validation-error">⚠ {err}</div>
+          {/each}
+        </div>
+      {/if}
+
+      <div class="form-group">
+        <label for="title">Title *</label>
+        <input id="title" type="text" bind:value={title} placeholder="e.g. GitHub, Gmail" />
+      </div>
+
+      <div class="form-group">
+        <label for="username">Username / Email *</label>
+        <input id="username" type="text" bind:value={username} placeholder="username or email" />
+      </div>
+
+      <div class="form-group">
+        <label for="password">Password *</label>
+        <div class="password-input-group">
+          <input
+            id="password"
+            type={passwordVisible ? 'text' : 'password'}
+            bind:value={password}
+            placeholder="Password"
+          />
+          <button type="button" class="btn btn-ghost btn-sm" onclick={() => passwordVisible = !passwordVisible} title="Toggle visibility">
+            {passwordVisible ? '🙈' : '👁'}
+          </button>
+          <button type="button" class="btn btn-ghost btn-sm" onclick={() => password = generatePassword({ length: 16 })} title="Generate password">
+            🎲
+          </button>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="url">URL</label>
+        <input id="url" type="url" bind:value={url} placeholder="https://example.com" />
+      </div>
+
+      <div class="form-group">
+        <label for="group">Group</label>
+        <select id="group" bind:value={groupId}>
+          <option value="">No group</option>
+          {#each groups as group}
+            <option value={group.id}>{group.name}</option>
+          {/each}
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="notes">Notes</label>
+        <textarea id="notes" bind:value={notes} placeholder="Any additional notes..."></textarea>
+      </div>
+
+      <div class="form-actions">
+        <button type="submit" class="btn btn-primary" disabled={saving}>
+          {saving ? 'Saving...' : (isEdit ? '💾 Update' : '➕ Create')}
+        </button>
+        <button type="button" class="btn btn-ghost" onclick={onCancel}>Cancel</button>
+      </div>
+    </form>
+  {/if}
+</div>
+
+<style>
+  .loading {
+    text-align: center;
+    padding: 3rem;
+    color: var(--color-text-muted);
+  }
+
+  .error-banner {
+    padding: 12px 16px;
+    background: rgba(229, 72, 77, 0.15);
+    border: 1px solid rgba(229, 72, 77, 0.4);
+    border-radius: var(--radius-md);
+    color: var(--color-danger);
+    font-size: 0.85rem;
+    margin-bottom: 16px;
+  }
+
+  .form-card {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+    max-width: 500px;
+  }
+
+  .validation-errors {
+    margin-bottom: 16px;
+    padding: 12px;
+    background: rgba(251, 191, 36, 0.1);
+    border: 1px solid rgba(251, 191, 36, 0.3);
+    border-radius: var(--radius-md);
+  }
+
+  .validation-error {
+    font-size: 0.85rem;
+    color: var(--color-warning);
+  }
+
+  .password-input-group {
+    display: flex;
+    gap: 8px;
+  }
+
+  .password-input-group input {
+    flex: 1;
+  }
+
+  .form-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 20px;
+  }
+</style>
diff --git a/src/components/EntryList.svelte b/src/components/EntryList.svelte
new file mode 100644
index 0000000..4a27cf8
--- /dev/null
+++ b/src/components/EntryList.svelte
@@ -0,0 +1,189 @@
+<script>
+  import { getEntries, searchEntries } from '../lib/storage/db.js'
+  import { search as searchStore } from '../lib/stores/search.svelte.js'
+
+  let entries = $state([])
+  let loading = $state(true)
+  let error = $state('')
+  let resultCount = $state(0)
+
+  let { onSelect, onAdd } = $props()
+
+  async function loadEntries() {
+    loading = true
+    error = ''
+    try {
+      const query = searchStore.query.trim()
+      const groupId = searchStore.activeGroupId
+
+      if (query) {
+        // Search with optional group filter
+        const options = groupId !== 'all' ? { groupId } : {}
+        entries = await searchEntries(query, options)
+      } else if (groupId !== 'all') {
+        // Filter by group only
+        entries = await getEntries({ groupId })
+      } else {
+        // Show all
+        entries = await getEntries()
+      }
+
+      resultCount = entries.length
+    } catch (e) {
+      error = 'Failed to load entries: ' + e.message
+    }
+    loading = false
+  }
+
+  loadEntries()
+
+  // Reload when search or filter changes (polling-based reactivity)
+  const intervalId = setInterval(loadEntries, 1000)
+  $effect(() => {
+    return () => clearInterval(intervalId)
+  })
+</script>
+
+<div class="entry-list">
+  {#if loading}
+    <div class="loading">Loading entries...</div>
+  {:else if error}
+    <div class="error-banner">{error}</div>
+  {:else if entries.length === 0}
+    <div class="empty-state">
+      <p class="empty-icon">{searchStore.query ? '🔍' : '🔑'}</p>
+      <p class="empty-text">{searchStore.query ? 'No results found' : 'No entries yet'}</p>
+      <p class="empty-hint">
+        {searchStore.query
+          ? 'Try a different search term'
+          : 'Add your first login credential to get started'}
+      </p>
+      {#if !searchStore.query}
+        <button class="btn btn-primary mt-3" onclick={onAdd}>+ New Entry</button>
+      {/if}
+    </div>
+  {:else}
+    <div class="results-info">
+      <span class="text-sm text-muted">
+        {resultCount} entr{resultCount === 1 ? 'y' : 'ies'}
+        {#if searchStore.query}
+          matching "<strong>{searchStore.query}</strong>"
+        {/if}
+      </span>
+    </div>
+
+    <table class="entries-table">
+      <thead>
+        <tr>
+          <th>Title</th>
+          <th>Username</th>
+          <th>URL</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each entries as entry (entry.id)}
+          <tr onclick={() => onSelect(entry.id)} class="entry-row">
+            <td>
+              <span class="entry-title">{entry.title}</span>
+            </td>
+            <td>
+              <span class="entry-username">{entry.username}</span>
+            </td>
+            <td>
+              <span class="entry-url truncate">{entry.url || '—'}</span>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</div>
+
+<style>
+  .loading, .empty-state {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: var(--color-text-muted);
+  }
+
+  .error-banner {
+    padding: 12px 16px;
+    background: rgba(229, 72, 77, 0.15);
+    border: 1px solid rgba(229, 72, 77, 0.4);
+    border-radius: var(--radius-md);
+    color: var(--color-danger);
+    font-size: 0.85rem;
+  }
+
+  .empty-icon {
+    font-size: 3rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .empty-text {
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: var(--color-text);
+  }
+
+  .empty-hint {
+    font-size: 0.85rem;
+    color: var(--color-text-muted);
+  }
+
+  .results-info {
+    padding: 8px 0;
+    margin-bottom: 8px;
+  }
+
+  .entries-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .entries-table th {
+    text-align: left;
+    padding: 8px 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .entry-row {
+    cursor: pointer;
+    transition: background-color 150ms;
+  }
+
+  .entry-row:hover {
+    background: var(--color-surface-hover);
+  }
+
+  .entry-row td {
+    padding: 10px 12px;
+    font-size: 0.875rem;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .entry-title {
+    font-weight: 500;
+  }
+
+  .entry-username {
+    color: var(--color-text-muted);
+  }
+
+  .entry-url {
+    color: var(--color-text-muted);
+    max-width: 200px;
+  }
+
+  @media (max-width: 600px) {
+    .entries-table th:nth-child(3),
+    .entry-row td:nth-child(3) {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/components/ImportExport.svelte b/src/components/ImportExport.svelte
new file mode 100644
index 0000000..adec878
--- /dev/null
+++ b/src/components/ImportExport.svelte
@@ -0,0 +1,247 @@
+<script>
+  import { exportAll, importAll } from '../lib/storage/db.js'
+
+  let showExport = $state(false)
+  let showImport = $state(false)
+  let importMode = $state('merge') // 'merge' or 'replace'
+  let importResult = $state(null)
+  let importError = $state('')
+  let importing = $state(false)
+  let exportData = $state(null)
+  let exporting = $state(false)
+
+  async function handleExport() {
+    exporting = true
+    try {
+      exportData = await exportAll()
+      const json = JSON.stringify(exportData, null, 2)
+      const blob = new Blob([json], { type: 'application/json' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `password-vault-export-${new Date().toISOString().slice(0, 10)}.json`
+      a.click()
+      URL.revokeObjectURL(url)
+      showExport = false
+    } catch (e) {
+      importError = 'Export failed: ' + e.message
+    }
+    exporting = false
+  }
+
+  async function handleImport(event) {
+    const file = event.target.files[0]
+    if (!file) return
+
+    importing = true
+    importError = ''
+    importResult = null
+
+    try {
+      const text = await file.text()
+      const data = JSON.parse(text)
+
+      if (!data.entries || !data.groups) {
+        importError = 'Invalid file format — missing entries or groups data'
+        importing = false
+        return
+      }
+
+      const result = await importAll(data, importMode)
+      importResult = result
+    } catch (e) {
+      importError = 'Import failed: ' + e.message
+    }
+
+    importing = false
+    // Reset file input
+    event.target.value = ''
+  }
+</script>
+
+<div class="import-export">
+  <!-- Export button -->
+  <button class="btn btn-ghost btn-sm" onclick={() => showExport = true} title="Export">
+    📤 Export
+  </button>
+
+  <!-- Import button -->
+  <button class="btn btn-ghost btn-sm" onclick={() => showImport = true} title="Import">
+    📥 Import
+  </button>
+
+  <!-- Export modal -->
+  {#if showExport}
+    <div class="modal-overlay" role="presentation" onclick={() => showExport = false}>
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+      <div class="modal" role="dialog" aria-modal="true" aria-label="Export vault" tabindex="-1" onclick={(e) => e.stopPropagation()}>
+        <h3>Export Vault</h3>
+        <p>All entries and groups will be exported as encrypted JSON. You'll need your master password to import them later.</p>
+        <div class="modal-actions">
+          <button class="btn btn-primary" onclick={handleExport} disabled={exporting}>
+            {exporting ? 'Exporting...' : '📤 Export JSON'}
+          </button>
+          <button class="btn btn-ghost" onclick={() => showExport = false}>Cancel</button>
+        </div>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Import modal -->
+  {#if showImport}
+    <div class="modal-overlay" role="presentation" onclick={() => showImport = false}>
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+      <div class="modal" role="dialog" aria-modal="true" aria-label="Import vault data" tabindex="-1" onclick={(e) => e.stopPropagation()}>
+        <h3>Import Vault Data</h3>
+
+        {#if importError}
+          <div class="error-banner">{importError}</div>
+        {/if}
+
+        {#if importResult}
+          <div class="success-banner">
+            ✓ Imported {importResult.imported.entries} entries and {importResult.imported.groups} groups
+            {#if importResult.skipped > 0}
+              ({importResult.skipped} skipped)
+            {/if}
+          </div>
+        {:else}
+          <p>Select how to handle existing data:</p>
+
+          <div class="import-mode">
+            <label class="radio-label">
+              <input type="radio" name="importMode" value="merge" bind:group={importMode} />
+              <span>Merge — add to existing data</span>
+            </label>
+            <label class="radio-label">
+              <input type="radio" name="importMode" value="replace" bind:group={importMode} />
+              <span>Replace — clear all existing data first</span>
+            </label>
+          </div>
+
+          <div class="form-group">
+            <label for="import-file" class="file-label">Choose JSON file</label>
+            <input
+              id="import-file"
+              type="file"
+              accept=".json,application/json"
+              onchange={handleImport}
+              disabled={importing}
+            />
+          </div>
+        {/if}
+
+        <div class="modal-actions">
+          <button class="btn btn-ghost" onclick={() => {
+            showImport = false
+            importResult = null
+            importError = ''
+          }}>Close</button>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 200;
+    padding: 1rem;
+  }
+
+  .modal {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+    max-width: 420px;
+    width: 100%;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+
+  .modal h3 {
+    margin-bottom: 12px;
+  }
+
+  .modal p {
+    color: var(--color-text-muted);
+    font-size: 0.9rem;
+    margin-bottom: 16px;
+  }
+
+  .modal-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 16px;
+  }
+
+  .error-banner {
+    padding: 10px 14px;
+    background: rgba(229, 72, 77, 0.15);
+    border: 1px solid rgba(229, 72, 77, 0.4);
+    border-radius: var(--radius-md);
+    color: var(--color-danger);
+    font-size: 0.85rem;
+    margin-bottom: 12px;
+  }
+
+  .success-banner {
+    padding: 10px 14px;
+    background: rgba(52, 211, 153, 0.15);
+    border: 1px solid rgba(52, 211, 153, 0.4);
+    border-radius: var(--radius-md);
+    color: var(--color-success);
+    font-size: 0.85rem;
+    margin-bottom: 12px;
+  }
+
+  .import-mode {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  .radio-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: border-color 150ms, background-color 150ms;
+  }
+
+  .radio-label:hover {
+    border-color: var(--color-primary);
+    background: var(--color-surface-hover);
+  }
+
+  .radio-label input[type="radio"] {
+    accent-color: var(--color-primary);
+    cursor: pointer;
+  }
+
+  .radio-label span {
+    font-size: 0.85rem;
+  }
+
+  .file-label {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--color-text-muted);
+    margin-bottom: 4px;
+  }
+
+  input[type="file"] {
+    font-size: 0.85rem;
+    padding: 8px;
+  }
+</style>
diff --git a/src/components/LockScreen.svelte b/src/components/LockScreen.svelte
new file mode 100644
index 0000000..7e29f96
--- /dev/null
+++ b/src/components/LockScreen.svelte
@@ -0,0 +1,193 @@
+<script>
+  import { app } from '../lib/stores/app.svelte.js'
+  import { deriveKey, createTestPayload, verifyPassword } from '../lib/crypto/crypto.js'
+  import { saveVaultMeta, loadVaultMeta, isVaultInitialized } from '../lib/storage/db.js'
+  import { startAutoLock } from '../lib/stores/security.svelte.js'
+
+  let masterPassword = $state('')
+  let confirmPassword = $state('')
+  let error = $state('')
+  let loading = $state(false)
+  let isSetup = $state(false)
+
+  // Check if vault was already created
+  async function checkVault() {
+    isSetup = !(await isVaultInitialized())
+  }
+  checkVault()
+
+  async function handleSubmit() {
+    error = ''
+    loading = true
+
+    try {
+      if (isSetup) {
+        // First-time setup: create vault
+        if (!masterPassword || masterPassword.length < 4) {
+          error = 'Password must be at least 4 characters'
+          loading = false
+          return
+        }
+        if (masterPassword !== confirmPassword) {
+          error = 'Passwords do not match'
+          loading = false
+          return
+        }
+
+        const { salt, testEncrypted, testPlaintext } = await createTestPayload(masterPassword)
+        app.salt = salt
+        const key = await deriveKey(masterPassword, salt)
+        app.encryptionKey = key
+
+        await saveVaultMeta(salt, testEncrypted, testPlaintext)
+        app.isUnlocked = true
+        startAutoLock()
+      } else {
+        // Unlock: verify password against stored test payload
+        const meta = await loadVaultMeta()
+        if (!meta.salt || !meta.testEncrypted || !meta.testPlaintext) {
+          error = 'Vault data corrupted'
+          loading = false
+          return
+        }
+
+        const key = await deriveKey(masterPassword, meta.salt)
+        const isValid = await verifyPassword(masterPassword, meta.salt, meta.testEncrypted, meta.testPlaintext)
+
+        if (!isValid) {
+          error = 'Incorrect password'
+          loading = false
+          return
+        }
+
+        app.salt = meta.salt
+        app.encryptionKey = key
+        app.isUnlocked = true
+        startAutoLock()
+      }
+    } catch (e) {
+      console.error(e)
+      error = 'An error occurred: ' + e.message
+    }
+
+    loading = false
+    masterPassword = ''
+    confirmPassword = ''
+  }
+</script>
+
+<div class="lock-screen">
+  <div class="lock-card">
+    <div class="lock-icon">🔐</div>
+    <h1>Password Vault</h1>
+    <p class="subtitle">{isSetup ? 'Create your vault' : 'Unlock your vault'}</p>
+
+    {#if error}
+      <div class="error-banner" role="alert">{error}</div>
+    {/if}
+
+    <form submitHandler={handleSubmit} class="lock-form">
+      <div class="form-group">
+        <label for="master-password">Master Password</label>
+        <input
+          id="master-password"
+          type="password"
+          bind:value={masterPassword}
+          placeholder="Enter master password"
+          autocomplete="current-password"
+          disabled={loading}
+        />
+      </div>
+
+      {#if isSetup}
+        <div class="form-group">
+          <label for="confirm-password">Confirm Password</label>
+          <input
+            id="confirm-password"
+            type="password"
+            bind:value={confirmPassword}
+            placeholder="Confirm master password"
+            autocomplete="new-password"
+            disabled={loading}
+          />
+        </div>
+      {/if}
+
+      <button type="submit" class="btn btn-primary w-full" disabled={loading}>
+        {loading ? 'Processing...' : (isSetup ? 'Create Vault' : 'Unlock')}
+      </button>
+    </form>
+
+    <p class="hint">
+      {isSetup
+        ? 'Your master password encrypts all data locally. It cannot be recovered if lost.'
+        : 'Your data is encrypted with AES-256-GCM. Key is stored only in memory.'}
+    </p>
+  </div>
+</div>
+
+<style>
+  .lock-screen {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    padding: 1rem;
+  }
+
+  .lock-card {
+    width: 100%;
+    max-width: 400px;
+    padding: 2.5rem 2rem;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .lock-icon {
+    font-size: 3rem;
+    line-height: 1;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    text-align: center;
+  }
+
+  .subtitle {
+    color: var(--color-text-muted);
+    font-size: 0.9rem;
+    text-align: center;
+  }
+
+  .lock-form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .error-banner {
+    width: 100%;
+    padding: 10px 14px;
+    background: rgba(229, 72, 77, 0.15);
+    border: 1px solid rgba(229, 72, 77, 0.4);
+    border-radius: var(--radius-md);
+    color: var(--color-danger);
+    font-size: 0.85rem;
+    text-align: center;
+  }
+
+  .hint {
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    text-align: center;
+    line-height: 1.4;
+    margin-top: 0.5rem;
+  }
+</style>
diff --git a/src/components/MainLayout.svelte b/src/components/MainLayout.svelte
new file mode 100644
index 0000000..806a020
--- /dev/null
+++ b/src/components/MainLayout.svelte
@@ -0,0 +1,239 @@
+<script>
+  import { app } from '../lib/stores/app.svelte.js'
+  import Sidebar from './Sidebar.svelte'
+  import EntryList from './EntryList.svelte'
+  import EntryDetail from './EntryDetail.svelte'
+  import EntryForm from './EntryForm.svelte'
+  import ImportExport from './ImportExport.svelte'
+
+  let sidebarOpen = $state(false)
+  let viewMode = $state('list') // 'list' | 'detail' | 'form'
+  let selectedEntryId = $state(null)
+
+  function goList() {
+    viewMode = 'list'
+    selectedEntryId = null
+    sidebarOpen = false
+  }
+
+  function goDetail(entryId) {
+    selectedEntryId = entryId
+    viewMode = 'detail'
+    sidebarOpen = false
+  }
+
+  function goForm(entryId = null) {
+    selectedEntryId = entryId
+    viewMode = 'form'
+    sidebarOpen = false
+  }
+
+  function handleBack() {
+    if (viewMode === 'form') {
+      goDetail(selectedEntryId)
+    } else {
+      goList()
+    }
+  }
+
+  function handleLock() {
+    app.lockVault()
+  }
+</script>
+
+<div class="app-shell">
+  <!-- Mobile header -->
+  <div class="mobile-header">
+    <button class="btn btn-ghost btn-sm" onclick={() => sidebarOpen = !sidebarOpen}>
+      ☰ Menu
+    </button>
+    <span class="mobile-title">Password Vault</span>
+    <button class="btn btn-ghost btn-sm" onclick={handleLock} title="Lock">🔒</button>
+  </div>
+
+  <!-- Sidebar overlay for mobile -->
+  {#if sidebarOpen}
+    <button class="sidebar-overlay" onclick={() => sidebarOpen = false} aria-label="Close menu"></button>
+  {/if}
+
+  <!-- Sidebar -->
+  <aside class="sidebar {sidebarOpen ? 'open' : ''}">
+    <Sidebar on:back={handleBack} on:goList={goList} />
+  </aside>
+
+  <!-- Main content -->
+  <main class="main-content">
+    <!-- Top bar -->
+    <div class="top-bar">
+      {#if viewMode !== 'list'}
+        <button class="btn btn-ghost btn-sm" onclick={handleBack}>← Back</button>
+      {/if}
+      <div class="top-bar-title">
+        {#if viewMode === 'list'}
+          <h1>All Entries</h1>
+        {:else if viewMode === 'detail'}
+          <h1>Entry Details</h1>
+        {:else if viewMode === 'form'}
+          <h1>{selectedEntryId ? 'Edit Entry' : 'New Entry'}</h1>
+        {/if}
+      </div>
+      <div class="top-bar-actions">
+        {#if viewMode === 'list'}
+          <button class="btn btn-primary btn-sm" onclick={() => goForm(null)}>+ New Entry</button>
+        {/if}
+        <ImportExport />
+        <button class="btn btn-ghost btn-sm" onclick={handleLock} title="Lock vault">🔒</button>
+      </div>
+    </div>
+
+    <!-- Content area -->
+    <div class="content-area">
+      {#if viewMode === 'list'}
+        <EntryList on:select={goDetail} on:add={() => goForm(null)} />
+      {:else if viewMode === 'detail' && selectedEntryId}
+        <EntryDetail
+          entryId={selectedEntryId}
+          on:edit={() => goForm(selectedEntryId)}
+          on:back={goList}
+        />
+      {:else if viewMode === 'form'}
+        <EntryForm
+          entryId={selectedEntryId}
+          on:save={goList}
+          on:cancel={handleBack}
+        />
+      {/if}
+    </div>
+  </main>
+</div>
+
+<style>
+  .app-shell {
+    display: flex;
+    min-height: 100vh;
+  }
+
+  /* Mobile header */
+  .mobile-header {
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    background: var(--color-surface);
+    border-bottom: 1px solid var(--color-border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+
+  .mobile-title {
+    font-weight: 600;
+    font-size: 0.95rem;
+  }
+
+  /* Sidebar */
+  .sidebar {
+    width: 260px;
+    min-width: 260px;
+    background: var(--color-sidebar);
+    border-right: 1px solid var(--color-border);
+    height: 100vh;
+    position: sticky;
+    top: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Main content */
+  .main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .top-bar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 20px;
+    background: var(--color-surface);
+    border-bottom: 1px solid var(--color-border);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+
+  .top-bar-title {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .top-bar-title h1 {
+    font-size: 1.1rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .top-bar-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .content-area {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+  }
+
+  /* Sidebar overlay (mobile) */
+  .sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 49;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .mobile-header {
+      display: flex;
+    }
+
+    .sidebar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      z-index: 50;
+      transform: translateX(-100%);
+      transition: transform 200ms ease;
+    }
+
+    .sidebar.open {
+      transform: translateX(0);
+    }
+
+    .sidebar-overlay {
+      display: block;
+    }
+
+    .content-area {
+      padding: 12px;
+    }
+
+    .top-bar {
+      padding: 10px 12px;
+    }
+  }
+</style>
diff --git a/src/components/PasswordGenerator.svelte b/src/components/PasswordGenerator.svelte
new file mode 100644
index 0000000..9becaa2
--- /dev/null
+++ b/src/components/PasswordGenerator.svelte
@@ -0,0 +1,301 @@
+<script>
+  import { generatePassword } from '../lib/crypto/crypto.js'
+
+  let length = $state(16)
+  let uppercase = $state(true)
+  let lowercase = $state(true)
+  let digits = $state(true)
+  let symbols = $state(true)
+  let exclude = $state('')
+  let generated = $state('')
+  let strength = $state('')
+  let toast = $state('')
+  let toastTimer = null
+
+  // Generate on mount and whenever settings change
+  // $effect auto-tracks all reactive reads
+  $effect(() => {
+    // Reading these values registers them as dependencies
+    const _l = length
+    const _u = uppercase
+    const _lo = lowercase
+    const _d = digits
+    const _s = symbols
+    const _e = exclude
+    regenerate()
+  })
+
+  function regenerate() {
+    try {
+      generated = generatePassword({ length, uppercase, lowercase, digits, symbols, exclude })
+      strength = calculateStrength(generated)
+    } catch (e) {
+      generated = ''
+      strength = ''
+    }
+  }
+
+  function calculateStrength(password) {
+    if (!password) return { label: '', color: '' }
+    let score = 0
+    if (password.length >= 8) score++
+    if (password.length >= 12) score++
+    if (password.length >= 16) score++
+    if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++
+    if (/\d/.test(password)) score++
+    if (/[^a-zA-Z0-9]/.test(password)) score++
+
+    if (score <= 2) return { label: 'Weak', color: 'var(--color-danger)' }
+    if (score <= 4) return { label: 'Moderate', color: 'var(--color-warning)' }
+    return { label: 'Strong', color: 'var(--color-success)' }
+  }
+
+  function showToast(message) {
+    toast = message
+    if (toastTimer) clearTimeout(toastTimer)
+    toastTimer = setTimeout(() => { toast = '' }, 2000)
+  }
+
+  async function copyPassword() {
+    try {
+      await navigator.clipboard.writeText(generated)
+      showToast('✓ Password copied to clipboard')
+    } catch {
+      // Fallback
+      const textarea = document.createElement('textarea')
+      textarea.value = generated
+      textarea.style.position = 'fixed'
+      textarea.style.opacity = '0'
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+      showToast('✓ Password copied')
+    }
+  }
+</script>
+
+<div class="password-generator">
+  {#if toast}
+    <div class="toast">{toast}</div>
+  {/if}
+
+  <div class="generator-card">
+    <h3>🔑 Password Generator</h3>
+
+    <!-- Generated password display -->
+    <div class="generated-display">
+      <code class="generated-password">{generated}</code>
+      <div class="display-actions">
+        <span class="strength-badge" style="color: {strength.color}">{strength.label}</span>
+        <button class="btn btn-ghost btn-sm" onclick={copyPassword} title="Copy">📋 Copy</button>
+        <button class="btn btn-ghost btn-sm" onclick={regenerate} title="Regenerate">🔄</button>
+      </div>
+    </div>
+
+    <!-- Length slider -->
+    <div class="form-group">
+      <div class="slider-header">
+        <span class="field-label">Length</span>
+        <span class="slider-value">{length}</span>
+      </div>
+      <input
+        type="range"
+        min="4"
+        max="64"
+        bind:value={length}
+        class="length-slider"
+      />
+      <div class="slider-marks">
+        <span>4</span>
+        <span>16</span>
+        <span>32</span>
+        <span>64</span>
+      </div>
+    </div>
+
+    <!-- Character types -->
+    <div class="checkbox-group">
+      <label class="checkbox-label">
+        <input type="checkbox" bind:checked={uppercase} />
+        <span>Uppercase (A-Z)</span>
+      </label>
+      <label class="checkbox-label">
+        <input type="checkbox" bind:checked={lowercase} />
+        <span>Lowercase (a-z)</span>
+      </label>
+      <label class="checkbox-label">
+        <input type="checkbox" bind:checked={digits} />
+        <span>Numbers (0-9)</span>
+      </label>
+      <label class="checkbox-label">
+        <input type="checkbox" bind:checked={symbols} />
+        <span>Symbols (!@#$...)</span>
+      </label>
+    </div>
+
+    <!-- Exclude characters -->
+    <div class="form-group">
+      <label for="exclude-chars">Exclude characters</label>
+      <input
+        id="exclude-chars"
+        type="text"
+        bind:value={exclude}
+        placeholder="e.g. 0OIl1"
+      />
+    </div>
+  </div>
+</div>
+
+<style>
+  .toast {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 10px 16px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    font-size: 0.85rem;
+    color: var(--color-success);
+    box-shadow: var(--shadow);
+    z-index: 1000;
+  }
+
+  .generator-card {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    padding: 20px;
+    max-width: 450px;
+  }
+
+  .generator-card h3 {
+    margin-bottom: 16px;
+  }
+
+  .generated-display {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 12px;
+    background: var(--color-input-bg);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+  }
+
+  .generated-password {
+    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+    font-size: 1rem;
+    word-break: break-all;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .display-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .strength-badge {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  .field-label {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--color-text-muted);
+  }
+
+  .slider-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+  }
+
+  .slider-value {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--color-primary);
+  }
+
+  .length-slider {
+    width: 100%;
+    height: 6px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--color-border);
+    border-radius: 3px;
+    outline: none;
+    border: none;
+    padding: 0;
+  }
+
+  .length-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    cursor: pointer;
+  }
+
+  .length-slider::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    cursor: pointer;
+    border: none;
+  }
+
+  .slider-marks {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.7rem;
+    color: var(--color-text-muted);
+    margin-top: 4px;
+    padding: 0 2px;
+  }
+
+  .checkbox-group {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  .checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.85rem;
+    cursor: pointer;
+    padding: 6px 8px;
+    border-radius: var(--radius-sm);
+    transition: background-color 150ms;
+  }
+
+  .checkbox-label:hover {
+    background: var(--color-surface-hover);
+  }
+
+  .checkbox-label input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--color-primary);
+    cursor: pointer;
+  }
+
+  .checkbox-label span {
+    flex: 1;
+  }
+</style>
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
new file mode 100644
index 0000000..e22e969
--- /dev/null
+++ b/src/components/Sidebar.svelte
@@ -0,0 +1,373 @@
+<script>
+  import { getGroups, addGroup, updateGroup, deleteGroup, getEntryCountsByGroup } from '../lib/storage/db.js'
+  import { createGroup, validateGroup } from '../lib/models/schema.js'
+  import { search } from '../lib/stores/search.svelte.js'
+
+  let groups = $state([])
+  let entryCounts = $state(new Map())
+
+  // Group management state
+  let showGroupForm = $state(false)
+  let editingGroupId = $state(null)
+  let groupName = $state('')
+  let groupColor = $state('#6c63ff')
+  let groupError = $state('')
+  let showDeleteGroupConfirm = $state(null) // groupId being confirmed for deletion
+  let deletingGroup = $derived(groups.find(g => g.id === showDeleteGroupConfirm))
+
+  const GROUP_COLORS = [
+    '#6c63ff', '#e5484d', '#34d399', '#fbbf24', '#3b82f6',
+    '#ec4899', '#8b5cf6', '#14b8a6', '#f97316', '#06b6d4',
+    '#a855f7', '#ef4444', '#22c55e', '#eab308', '#6366f1',
+  ]
+
+  async function loadData() {
+    const [g, counts] = await Promise.all([getGroups(), getEntryCountsByGroup()])
+    groups = g
+    entryCounts = counts
+  }
+  loadData()
+
+  // Reload periodically
+  const intervalId = setInterval(loadData, 3000)
+  $effect(() => {
+    return () => clearInterval(intervalId)
+  })
+
+  function openGroupForm(group = null) {
+    if (group) {
+      editingGroupId = group.id
+      groupName = group.name
+      groupColor = group.color || '#6c63ff'
+    } else {
+      editingGroupId = null
+      groupName = ''
+      groupColor = GROUP_COLORS[Math.floor(Math.random() * GROUP_COLORS.length)]
+    }
+    groupError = ''
+    showGroupForm = true
+  }
+
+  async function saveGroup() {
+    groupError = ''
+    const validation = validateGroup(groupName)
+    if (!validation.valid) {
+      groupError = validation.errors[0]
+      return
+    }
+
+    try {
+      if (editingGroupId) {
+        const existing = groups.find(g => g.id === editingGroupId)
+        const updated = { ...existing, name: groupName.trim(), color: groupColor }
+        await updateGroup(updated)
+      } else {
+        const group = createGroup(groupName, groupColor)
+        await addGroup(group)
+      }
+      showGroupForm = false
+      await loadData()
+    } catch (e) {
+      groupError = 'Failed to save group: ' + e.message
+    }
+  }
+
+  async function confirmDeleteGroup(groupId) {
+    try {
+      await deleteGroup(groupId)
+      if (search.activeGroupId === groupId) {
+        search.activeGroupId = 'all'
+      }
+      showDeleteGroupConfirm = null
+      await loadData()
+    } catch (e) {
+      groupError = 'Failed to delete group: ' + e.message
+    }
+  }
+</script>
+
+<div class="sidebar-content">
+  <div class="sidebar-header">
+    <h2>🔐 Vault</h2>
+  </div>
+
+  <div class="search-box">
+    <input
+      type="text"
+      placeholder="Search entries..."
+      value={search.query}
+      onInput={(e) => search.query = e.target.value}
+    />
+  </div>
+
+  <nav class="groups-nav">
+    <button
+      class="group-item {search.activeGroupId === 'all' ? 'active' : ''}"
+      onclick={() => search.activeGroupId = 'all'}
+    >
+      <span class="group-icon">📋</span>
+      <span class="group-name">All Entries</span>
+    </button>
+
+    {#each groups as group}
+      <div class="group-row">
+        <button
+          class="group-item {search.activeGroupId === group.id ? 'active' : ''}"
+          onclick={() => search.activeGroupId = group.id}
+        >
+          <span class="group-color" style="background-color: {group.color || '#6c63ff'}"></span>
+          <span class="group-name">{group.name}</span>
+        </button>
+        <div class="group-actions">
+          <button class="group-action-btn" onclick={() => openGroupForm(group)} title="Edit group">✏️</button>
+          <button class="group-action-btn" onclick={() => showDeleteGroupConfirm = group.id} title="Delete group">🗑</button>
+        </div>
+      </div>
+    {/each}
+  </nav>
+
+  <div class="sidebar-footer">
+    <button class="btn btn-ghost btn-sm w-full" onclick={() => openGroupForm(null)}>+ New Group</button>
+  </div>
+
+  <!-- Group form modal -->
+  {#if showGroupForm}
+    <div class="modal-overlay" role="presentation" onclick={() => showGroupForm = false}>
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+      <div class="modal" role="dialog" aria-modal="true" aria-label="Group settings" tabindex="-1" onclick={(e) => e.stopPropagation()}>
+        <h3>{editingGroupId ? 'Edit Group' : 'New Group'}</h3>
+
+        {#if groupError}
+          <div class="error-banner">{groupError}</div>
+        {/if}
+
+        <div class="form-group">
+          <label for="group-name">Group Name</label>
+          <input id="group-name" type="text" bind:value={groupName} placeholder="e.g. Work, Personal" />
+        </div>
+
+        <div class="form-group">
+          <span class="field-label">Color</span>
+          <div class="color-picker">
+            {#each GROUP_COLORS as color}
+              <button
+                class="color-swatch {groupColor === color ? 'selected' : ''}"
+                style="background-color: {color}"
+                onclick={() => groupColor = color}
+                title={color}
+              ></button>
+            {/each}
+          </div>
+        </div>
+
+        <div class="modal-actions">
+          <button class="btn btn-primary" onclick={saveGroup}>
+            {editingGroupId ? 'Update' : 'Create'}
+          </button>
+          <button class="btn btn-ghost" onclick={() => showGroupForm = false}>Cancel</button>
+        </div>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Delete group confirmation -->
+  {#if deletingGroup}
+    <div class="modal-overlay" role="presentation" onclick={() => showDeleteGroupConfirm = null}>
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+      <div class="modal" role="dialog" aria-modal="true" aria-label="Delete group confirmation" tabindex="-1" onclick={(e) => e.stopPropagation()}>
+        <h3>Delete Group</h3>
+        <p>Delete "<strong>{deletingGroup.name}</strong>"? Entries in this group will become ungrouped.</p>
+        <div class="modal-actions">
+          <button class="btn btn-danger" onclick={() => confirmDeleteGroup(deletingGroup.id)}>Yes, delete</button>
+          <button class="btn btn-ghost" onclick={() => showDeleteGroupConfirm = null}>Cancel</button>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sidebar-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .sidebar-header {
+    padding: 16px;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .sidebar-header h2 {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .search-box {
+    padding: 12px 16px;
+  }
+
+  .search-box input {
+    padding: 8px 10px;
+    font-size: 0.85rem;
+  }
+
+  .groups-nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px;
+  }
+
+  .group-row {
+    display: flex;
+    align-items: center;
+  }
+
+  .group-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+    min-width: 0;
+    padding: 8px 12px;
+    border: none;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--color-text-muted);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background-color 150ms, color 150ms;
+    text-align: left;
+  }
+
+  .group-item:hover {
+    background: var(--color-surface-hover);
+    color: var(--color-text);
+  }
+
+  .group-item.active {
+    background: rgba(108, 99, 255, 0.15);
+    color: var(--color-primary);
+  }
+
+  .group-icon {
+    font-size: 1rem;
+  }
+
+  .group-color {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .group-name {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .group-actions {
+    display: flex;
+    gap: 2px;
+    padding-right: 4px;
+    opacity: 0;
+    transition: opacity 150ms;
+  }
+
+  .group-row:hover .group-actions {
+    opacity: 1;
+  }
+
+  .group-action-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.75rem;
+    padding: 4px;
+    border-radius: var(--radius-sm);
+    transition: background-color 150ms;
+  }
+
+  .group-action-btn:hover {
+    background: var(--color-surface-hover);
+  }
+
+  .sidebar-footer {
+    padding: 12px 16px;
+    border-top: 1px solid var(--color-border);
+  }
+
+  /* Modal */
+  .modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 200;
+    padding: 1rem;
+  }
+
+  .modal {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+    max-width: 380px;
+    width: 100%;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+
+  .modal h3 {
+    margin-bottom: 16px;
+  }
+
+  .modal p {
+    color: var(--color-text-muted);
+    font-size: 0.9rem;
+    margin-bottom: 20px;
+  }
+
+  .modal-actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  .error-banner {
+    padding: 8px 12px;
+    background: rgba(229, 72, 77, 0.15);
+    border: 1px solid rgba(229, 72, 77, 0.4);
+    border-radius: var(--radius-md);
+    color: var(--color-danger);
+    font-size: 0.85rem;
+    margin-bottom: 12px;
+  }
+
+  /* Color picker */
+  .color-picker {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .color-swatch {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    cursor: pointer;
+    transition: transform 150ms, border-color 150ms;
+  }
+
+  .color-swatch:hover {
+    transform: scale(1.15);
+  }
+
+  .color-swatch.selected {
+    border-color: #fff;
+    transform: scale(1.15);
+  }
+</style>
diff --git a/src/lib/crypto/crypto.js b/src/lib/crypto/crypto.js
new file mode 100644
index 0000000..e4dbc0f
--- /dev/null
+++ b/src/lib/crypto/crypto.js
@@ -0,0 +1,196 @@
+/**
+ * Crypto module — Web Crypto API wrapper.
+ *
+ * Uses PBKDF2 for key derivation and AES-GCM for symmetric encryption.
+ * All operations are async and use the browser's native Web Crypto API.
+ *
+ * The derived encryption key is kept in memory only — never written to disk.
+ */
+
+const PBKDF2_ITERATIONS = 100_000
+const SALT_LENGTH = 16 // bytes
+const IV_LENGTH = 12   // bytes (recommended for AES-GCM)
+
+/**
+ * Generate a random salt.
+ * @returns {Uint8Array}
+ */
+export function generateSalt() {
+  return crypto.getRandomValues(new Uint8Array(SALT_LENGTH))
+}
+
+/**
+ * Derive an AES-GCM encryption key from a master password and salt.
+ *
+ * @param {string} masterPassword
+ * @param {Uint8Array} salt
+ * @returns {Promise<CryptoKey>}
+ */
+export async function deriveKey(masterPassword, salt) {
+  // Step 1: Import the password as raw key material
+  const keyMaterial = await crypto.subtle.importKey(
+    'raw',
+    new TextEncoder().encode(masterPassword),
+    'PBKDF2',
+    false,
+    ['deriveKey']
+  )
+
+  // Step 2: Derive an AES-GCM key using PBKDF2
+  return crypto.subtle.deriveKey(
+    {
+      name: 'PBKDF2',
+      salt,
+      iterations: PBKDF2_ITERATIONS,
+      hash: 'SHA-256',
+    },
+    keyMaterial,
+    { name: 'AES-GCM', length: 256 },
+    false, // not extractable — stays in memory
+    ['encrypt', 'decrypt']
+  )
+}
+
+/**
+ * Encrypt a plaintext string.
+ *
+ * @param {string} plaintext
+ * @param {CryptoKey} key
+ * @returns {Promise<string>} JSON string containing { iv, ciphertext }
+ *   (salt is stored separately in the app store)
+ */
+export async function encrypt(plaintext, key) {
+  const iv = crypto.getRandomValues(new Uint8Array(IV_LENGTH))
+  const encoded = new TextEncoder().encode(plaintext)
+
+  const ciphertext = await crypto.subtle.encrypt(
+    { name: 'AES-GCM', iv },
+    key,
+    encoded
+  )
+
+  // Return as JSON with base64-encoded iv and ciphertext
+  return JSON.stringify({
+    iv: uint8ArrayToBase64(iv),
+    ciphertext: uint8ArrayToBase64(new Uint8Array(ciphertext)),
+  })
+}
+
+/**
+ * Decrypt an encrypted blob back to plaintext.
+ *
+ * @param {string} encryptedJson - JSON string from encrypt()
+ * @param {CryptoKey} key
+ * @returns {Promise<string>}
+ */
+export async function decrypt(encryptedJson, key) {
+  const { iv, ciphertext } = JSON.parse(encryptedJson)
+
+  const ciphertextBuffer = base64ToUint8Array(ciphertext)
+  const ivBuffer = base64ToUint8Array(iv)
+
+  const decrypted = await crypto.subtle.decrypt(
+    { name: 'AES-GCM', iv: ivBuffer },
+    key,
+    ciphertextBuffer
+  )
+
+  return new TextDecoder().decode(decrypted)
+}
+
+/**
+ * Verify that a master password is correct by attempting to decrypt a test payload.
+ *
+ * @param {string} masterPassword
+ * @param {Uint8Array} salt
+ * @param {string} testEncrypted - A known encrypted test string
+ * @param {string} testPlaintext - The expected plaintext
+ * @returns {Promise<boolean>}
+ */
+export async function verifyPassword(masterPassword, salt, testEncrypted, testPlaintext) {
+  try {
+    const key = await deriveKey(masterPassword, salt)
+    const decrypted = await decrypt(testEncrypted, key)
+    return decrypted === testPlaintext
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Create a test payload for password verification on first setup.
+ *
+ * @param {string} masterPassword
+ * @returns {Promise<{ salt: Uint8Array, testEncrypted: string }>}
+ */
+export async function createTestPayload(masterPassword) {
+  const salt = generateSalt()
+  const key = await deriveKey(masterPassword, salt)
+  const testPlaintext = 'vault_test_' + generateId()
+  const testEncrypted = await encrypt(testPlaintext, key)
+  return { salt, testEncrypted, testPlaintext }
+}
+
+// --- Utility: Uint8Array ↔ Base64 ---
+
+function uint8ArrayToBase64(buffer) {
+  const bytes = new Uint8Array(buffer)
+  let binary = ''
+  for (let i = 0; i < bytes.byteLength; i++) {
+    binary += String.fromCharCode(bytes[i])
+  }
+  return btoa(binary)
+}
+
+function base64ToUint8Array(base64) {
+  const binary = atob(base64)
+  const bytes = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i)
+  }
+  return bytes
+}
+
+/**
+ * Generate a random password.
+ *
+ * @param {Object} options
+ * @param {number} [options.length=16]
+ * @param {boolean} [options.uppercase=true]
+ * @param {boolean} [options.lowercase=true]
+ * @param {boolean} [options.digits=true]
+ * @param {boolean} [options.symbols=true]
+ * @param {string} [options.exclude='']
+ * @returns {string}
+ */
+export function generatePassword({
+  length = 16,
+  uppercase = true,
+  lowercase = true,
+  digits = true,
+  symbols = true,
+  exclude = '',
+} = {}) {
+  let charset = ''
+  if (uppercase) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+  if (lowercase) charset += 'abcdefghijklmnopqrstuvwxyz'
+  if (digits) charset += '0123456789'
+  if (symbols) charset += '!@#$%^&*()_+-=[]{}|;:,.<>?'
+
+  // Remove excluded characters
+  if (exclude) {
+    const excludeSet = new Set(exclude.split(''))
+    charset = charset.split('').filter(c => !excludeSet.has(c)).join('')
+  }
+
+  if (!charset) {
+    throw new Error('Password charset is empty — enable at least one character type')
+  }
+
+  const randomValues = crypto.getRandomValues(new Uint8Array(length))
+  let password = ''
+  for (let i = 0; i < length; i++) {
+    password += charset[randomValues[i] % charset.length]
+  }
+  return password
+}
diff --git a/src/lib/models/schema.js b/src/lib/models/schema.js
new file mode 100644
index 0000000..a35e4b0
--- /dev/null
+++ b/src/lib/models/schema.js
@@ -0,0 +1,136 @@
+/**
+ * Data model definitions and factory functions.
+ *
+ * All IDs are generated with a simple ULID-like timestamp + random suffix
+ * to keep things sortable and collision-resistant without external deps.
+ */
+
+/**
+ * Generate a unique ID (timestamp-based, sortable).
+ * @returns {string}
+ */
+export function generateId() {
+  const timestamp = Date.now().toString(36)
+  const random = Math.random().toString(36).slice(2, 10)
+  return `${timestamp}_${random}`
+}
+
+/**
+ * @typedef {Object} CredentialEntry
+ * @property {string} id - Unique identifier
+ * @property {string} title - Display name (e.g. "GitHub", "Gmail")
+ * @property {string} username - Login username or email
+ * @property {string} encryptedPassword - AES-GCM encrypted password blob (JSON string)
+ * @property {string} [url] - Website URL
+ * @property {string} [notes] - Free-form notes
+ * @property {string} [groupId] - Reference to a Group id (empty string = no group)
+ * @property {string[]} [tags] - Free-form tags
+ * @property {string} createdAt - ISO timestamp
+ * @property {string} updatedAt - ISO timestamp
+ */
+
+/**
+ * Create a new CredentialEntry.
+ *
+ * @param {Object} data
+ * @param {string} data.title
+ * @param {string} data.username
+ * @param {string} data.encryptedPassword - Must already be encrypted
+ * @param {string} [data.url]
+ * @param {string} [data.notes]
+ * @param {string} [data.groupId]
+ * @param {string[]} [data.tags]
+ * @returns {CredentialEntry}
+ */
+export function createEntry(data) {
+  const now = new Date().toISOString()
+  return {
+    id: generateId(),
+    title: data.title.trim(),
+    username: data.username.trim(),
+    encryptedPassword: data.encryptedPassword,
+    url: data.url?.trim() || '',
+    notes: data.notes?.trim() || '',
+    groupId: data.groupId || '',
+    tags: data.tags || [],
+    createdAt: now,
+    updatedAt: now,
+  }
+}
+
+/**
+ * Update an existing entry, preserving id and createdAt.
+ *
+ * @param {CredentialEntry} existing
+ * @param {Object} data - Fields to update
+ * @returns {CredentialEntry}
+ */
+export function updateEntry(existing, data) {
+  return {
+    ...existing,
+    title: data.title !== undefined ? data.title.trim() : existing.title,
+    username: data.username !== undefined ? data.username.trim() : existing.username,
+    encryptedPassword: data.encryptedPassword !== undefined ? data.encryptedPassword : existing.encryptedPassword,
+    url: data.url !== undefined ? data.url.trim() : existing.url,
+    notes: data.notes !== undefined ? data.notes.trim() : existing.notes,
+    groupId: data.groupId !== undefined ? data.groupId : existing.groupId,
+    tags: data.tags !== undefined ? data.tags : existing.tags,
+    updatedAt: new Date().toISOString(),
+  }
+}
+
+/**
+ * @typedef {Object} Group
+ * @property {string} id - Unique identifier
+ * @property {string} name - Display name
+ * @property {string} [color] - Hex color for UI accent
+ * @property {string} createdAt - ISO timestamp
+ */
+
+const GROUP_COLORS = [
+  '#6c63ff', '#e5484d', '#34d399', '#fbbf24', '#3b82f6',
+  '#ec4899', '#8b5cf6', '#14b8a6', '#f97316', '#06b6d4',
+]
+
+/**
+ * Create a new Group.
+ *
+ * @param {string} name
+ * @param {string} [color]
+ * @returns {Group}
+ */
+export function createGroup(name, color) {
+  return {
+    id: generateId(),
+    name: name.trim(),
+    color: color || GROUP_COLORS[Math.floor(Math.random() * GROUP_COLORS.length)],
+    createdAt: new Date().toISOString(),
+  }
+}
+
+/**
+ * Validate a credential entry form submission.
+ *
+ * @param {Object} data
+ * @returns {{ valid: boolean, errors: string[] }}
+ */
+export function validateEntry(data) {
+  const errors = []
+  if (!data.title || !data.title.trim()) errors.push('Title is required')
+  if (!data.username || !data.username.trim()) errors.push('Username is required')
+  if (!data.encryptedPassword) errors.push('Password is required')
+  return { valid: errors.length === 0, errors }
+}
+
+/**
+ * Validate a group name.
+ *
+ * @param {string} name
+ * @returns {{ valid: boolean, errors: string[] }}
+ */
+export function validateGroup(name) {
+  const errors = []
+  if (!name || !name.trim()) errors.push('Group name is required')
+  else if (name.trim().length > 50) errors.push('Group name must be 50 characters or less')
+  return { valid: errors.length === 0, errors }
+}
diff --git a/src/lib/storage/db.js b/src/lib/storage/db.js
new file mode 100644
index 0000000..b3f3cea
--- /dev/null
+++ b/src/lib/storage/db.js
@@ -0,0 +1,370 @@
+/**
+ * IndexedDB storage layer using the `idb` wrapper.
+ *
+ * Database: "password-vault"
+ *   - Object store "entries": stores CredentialEntry objects
+ *   - Object store "groups": stores Group objects
+ *   - Object store "meta": stores app metadata (salt, test payload, version)
+ *
+ * All passwords are stored as encrypted blobs (encryptedPassword field).
+ * The encryption key is never stored — only the salt and a test payload
+ * for password verification.
+ */
+
+import { openDB } from 'idb'
+
+const DB_NAME = 'password-vault'
+const DB_VERSION = 1
+
+/**
+ * Open (or create) the database.
+ * @returns {Promise<IDBPDatabase>}
+ */
+async function getDb() {
+  return openDB(DB_NAME, DB_VERSION, {
+    upgrade(db) {
+      // Entries store — indexed by groupId for fast group filtering
+      if (!db.objectStoreNames.contains('entries')) {
+        const entryStore = db.createObjectStore('entries', { keyPath: 'id' })
+        entryStore.createIndex('groupId', 'groupId')
+        entryStore.createIndex('updatedAt', 'updatedAt')
+      }
+
+      // Groups store
+      if (!db.objectStoreNames.contains('groups')) {
+        db.createObjectStore('groups', { keyPath: 'id' })
+      }
+
+      // Meta store — single key-value pairs for app settings
+      if (!db.objectStoreNames.contains('meta')) {
+        db.createObjectStore('meta', { keyPath: 'key' })
+      }
+    },
+  })
+}
+
+// ========================
+//  Meta (salt, test payload, version)
+// ========================
+
+/**
+ * Store the vault's salt and test payload (used for password verification).
+ *
+ * @param {Uint8Array} salt
+ * @param {string} testEncrypted
+ * @param {string} testPlaintext
+ */
+export async function saveVaultMeta(salt, testEncrypted, testPlaintext) {
+  const db = await getDb()
+  const tx = db.transaction('meta', 'readwrite')
+
+  // Store salt as base64
+  let binary = ''
+  for (let i = 0; i < salt.byteLength; i++) {
+    binary += String.fromCharCode(salt[i])
+  }
+  const saltBase64 = btoa(binary)
+
+  await tx.store.put({ key: 'salt', value: saltBase64 })
+  await tx.store.put({ key: 'testEncrypted', value: testEncrypted })
+  await tx.store.put({ key: 'testPlaintext', value: testPlaintext })
+  await tx.store.put({ key: 'dbVersion', value: DB_VERSION })
+  await tx.done
+}
+
+/**
+ * Load the vault's salt and test payload.
+ *
+ * @returns {Promise<{ salt: Uint8Array|null, testEncrypted: string|null, testPlaintext: string|null }>}
+ */
+export async function loadVaultMeta() {
+  const db = await getDb()
+  const tx = db.transaction('meta', 'readonly')
+  const store = tx.store
+
+  const saltRow = await store.get('salt')
+  const testEncryptedRow = await store.get('testEncrypted')
+  const testPlaintextRow = await store.get('testPlaintext')
+
+  let salt = null
+  if (saltRow?.value) {
+    const binary = atob(saltRow.value)
+    const bytes = new Uint8Array(binary.length)
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i)
+    }
+    salt = bytes
+  }
+
+  return {
+    salt,
+    testEncrypted: testEncryptedRow?.value || null,
+    testPlaintext: testPlaintextRow?.value || null,
+  }
+}
+
+/**
+ * Check if the vault has been initialized (has a salt stored).
+ * @returns {Promise<boolean>}
+ */
+export async function isVaultInitialized() {
+  const meta = await loadVaultMeta()
+  return meta.salt !== null
+}
+
+// ========================
+//  Groups
+// ========================
+
+/**
+ * @typedef {import('../models/schema.js').Group} Group
+ */
+
+/**
+ * Add a group.
+ * @param {Group} group
+ * @returns {Promise<void>}
+ */
+export async function addGroup(group) {
+  const db = await getDb()
+  await db.put('groups', group)
+}
+
+/**
+ * Update a group.
+ * @param {Group} group
+ * @returns {Promise<void>}
+ */
+export async function updateGroup(group) {
+  const db = await getDb()
+  await db.put('groups', group)
+}
+
+/**
+ * Delete a group (does NOT delete associated entries — they become ungrouped).
+ * @param {string} groupId
+ * @returns {Promise<void>}
+ */
+export async function deleteGroup(groupId) {
+  const db = await getDb()
+  await db.delete('groups', groupId)
+}
+
+/**
+ * Get all groups, sorted by creation date.
+ * @returns {Promise<Group[]>}
+ */
+export async function getGroups() {
+  const db = await getDb()
+  const tx = db.transaction('groups', 'readonly')
+  const all = await tx.store.getAll()
+  return all.sort((a, b) => a.createdAt.localeCompare(b.createdAt))
+}
+
+/**
+ * Get a single group by ID.
+ * @param {string} groupId
+ * @returns {Promise<Group | undefined>}
+ */
+export async function getGroupById(groupId) {
+  const db = await getDb()
+  return db.get('groups', groupId)
+}
+
+// ========================
+//  Entries
+// ========================
+
+/**
+ * @typedef {import('../models/schema.js').CredentialEntry} CredentialEntry
+ */
+
+/**
+ * Add an entry.
+ * @param {CredentialEntry} entry
+ * @returns {Promise<void>}
+ */
+export async function addEntry(entry) {
+  const db = await getDb()
+  await db.put('entries', entry)
+}
+
+/**
+ * Update an entry.
+ * @param {CredentialEntry} entry
+ * @returns {Promise<void>}
+ */
+export async function updateEntry(entry) {
+  const db = await getDb()
+  await db.put('entries', entry)
+}
+
+/**
+ * Delete an entry.
+ * @param {string} entryId
+ * @returns {Promise<void>}
+ */
+export async function deleteEntry(entryId) {
+  const db = await getDb()
+  await db.delete('entries', entryId)
+}
+
+/**
+ * Get a single entry by ID.
+ * @param {string} entryId
+ * @returns {Promise<CredentialEntry | undefined>}
+ */
+export async function getEntryById(entryId) {
+  const db = await getDb()
+  return db.get('entries', entryId)
+}
+
+/**
+ * Get all entries. Optionally filter by groupId.
+ * Results sorted by updatedAt descending (most recent first).
+ *
+ * @param {Object} [options]
+ * @param {string} [options.groupId] - Filter by group (empty string = ungrouped)
+ * @returns {Promise<CredentialEntry[]>}
+ */
+export async function getEntries(options = {}) {
+  const db = await getDb()
+
+  let entries
+  if (options.groupId !== undefined) {
+    const index = db.transaction('entries').store.index('groupId')
+    entries = await index.getAll(options.groupId)
+  } else {
+    entries = await db.getAll('entries')
+  }
+
+  return entries.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
+}
+
+/**
+ * Search entries by query string (matches title, username, url, notes).
+ *
+ * @param {string} query
+ * @param {Object} [options]
+ * @param {string} [options.groupId]
+ * @returns {Promise<CredentialEntry[]>}
+ */
+export async function searchEntries(query, options = {}) {
+  const entries = await getEntries(options)
+  const lower = query.toLowerCase()
+  return entries.filter(e =>
+    e.title.toLowerCase().includes(lower) ||
+    e.username.toLowerCase().includes(lower) ||
+    (e.url && e.url.toLowerCase().includes(lower)) ||
+    (e.notes && e.notes.toLowerCase().includes(lower))
+  )
+}
+
+/**
+ * Count entries per group.
+ * @returns {Promise<Map<string, number>>}
+ */
+export async function getEntryCountsByGroup() {
+  const db = await getDb()
+  const all = await db.getAll('entries')
+  const counts = new Map()
+  for (const entry of all) {
+    const gid = entry.groupId || ''
+    counts.set(gid, (counts.get(gid) || 0) + 1)
+  }
+  return counts
+}
+
+// ========================
+//  Import / Export
+// ========================
+
+/**
+ * Export all data (entries + groups + meta) as a JSON object.
+ * Entries remain encrypted — the importer needs the same master password.
+ *
+ * @returns {Promise<Object>}
+ */
+export async function exportAll() {
+  const db = await getDb()
+  const entries = await db.getAll('entries')
+  const groups = await db.getAll('groups')
+
+  const saltRow = await db.get('meta', 'salt')
+  const testEncryptedRow = await db.get('meta', 'testEncrypted')
+  const testPlaintextRow = await db.get('meta', 'testPlaintext')
+
+  return {
+    version: DB_VERSION,
+    exportedAt: new Date().toISOString(),
+    meta: {
+      salt: saltRow?.value || null,
+      testEncrypted: testEncryptedRow?.value || null,
+      testPlaintext: testPlaintextRow?.value || null,
+    },
+    groups,
+    entries,
+  }
+}
+
+/**
+ * Import data from a previously exported JSON object.
+ *
+ * @param {Object} data
+ * @param {'merge'|'replace'} mode - 'merge' adds to existing, 'replace' clears first
+ * @returns {Promise<{ imported: { entries: number, groups: number }, skipped: number }>}
+ */
+export async function importAll(data, mode = 'merge') {
+  if (!data || !Array.isArray(data.entries) || !Array.isArray(data.groups)) {
+    throw new Error('Invalid import data format')
+  }
+
+  const db = await getDb()
+
+  if (mode === 'replace') {
+    await db.clear('entries')
+    await db.clear('groups')
+    // Clear meta so user can re-setup
+    await db.clear('meta')
+  }
+
+  let skipped = 0
+  let importedEntries = 0
+  let importedGroups = 0
+
+  // Import groups
+  for (const group of data.groups) {
+    try {
+      await db.put('groups', group)
+      importedGroups++
+    } catch {
+      skipped++
+    }
+  }
+
+  // Import entries
+  for (const entry of data.entries) {
+    try {
+      await db.put('entries', entry)
+      importedEntries++
+    } catch {
+      skipped++
+    }
+  }
+
+  // Restore meta if present
+  if (data.meta?.salt) {
+    await db.put('meta', { key: 'salt', value: data.meta.salt })
+  }
+  if (data.meta?.testEncrypted) {
+    await db.put('meta', { key: 'testEncrypted', value: data.meta.testEncrypted })
+  }
+  if (data.meta?.testPlaintext) {
+    await db.put('meta', { key: 'testPlaintext', value: data.meta.testPlaintext })
+  }
+
+  return {
+    imported: { entries: importedEntries, groups: importedGroups },
+    skipped,
+  }
+}
diff --git a/src/lib/stores/app.svelte.js b/src/lib/stores/app.svelte.js
new file mode 100644
index 0000000..f783f1d
--- /dev/null
+++ b/src/lib/stores/app.svelte.js
@@ -0,0 +1,22 @@
+/**
+ * App-level reactive state using Svelte 5 runes.
+ */
+
+import { stopAutoLock } from './security.svelte.js'
+
+export class AppStore {
+  isUnlocked = $state(false)
+  encryptionKey = $state(null)
+  salt = $state(null)
+
+  /**
+   * Lock the vault — clear the key from memory.
+   */
+  lockVault() {
+    stopAutoLock()
+    this.encryptionKey = null
+    this.isUnlocked = false
+  }
+}
+
+export const app = new AppStore()
diff --git a/src/lib/stores/search.svelte.js b/src/lib/stores/search.svelte.js
new file mode 100644
index 0000000..98871d7
--- /dev/null
+++ b/src/lib/stores/search.svelte.js
@@ -0,0 +1,16 @@
+/**
+ * Search and filter state.
+ * Shared between Sidebar and EntryList for coordinated filtering.
+ */
+
+export class SearchStore {
+  query = $state('')
+  activeGroupId = $state('all') // 'all' or a group id
+
+  clear() {
+    this.query = ''
+    this.activeGroupId = 'all'
+  }
+}
+
+export const search = new SearchStore()
diff --git a/src/lib/stores/security.svelte.js b/src/lib/stores/security.svelte.js
new file mode 100644
index 0000000..2ef808d
--- /dev/null
+++ b/src/lib/stores/security.svelte.js
@@ -0,0 +1,82 @@
+/**
+ * Security utilities: auto-lock timer, visibility change detection, cleanup.
+ */
+
+import { app } from './app.svelte.js'
+
+const DEFAULT_AUTO_LOCK_MINUTES = 5
+
+let autoLockTimer = null
+let autoLockMinutes = 5
+
+/**
+ * Start the auto-lock timer. Resets every time the user interacts.
+ * @param {number} minutes - Auto-lock after N minutes of inactivity
+ */
+export function startAutoLock(minutes = DEFAULT_AUTO_LOCK_MINUTES) {
+  autoLockMinutes = minutes
+  resetAutoLock()
+
+  // Listen for user activity to reset the timer
+  const events = ['mousedown', 'keydown', 'scroll', 'touchstart']
+  const handler = () => resetAutoLock()
+  events.forEach(evt => window.addEventListener(evt, handler, { passive: true }))
+
+  // Listen for visibility change (user switches tabs)
+  document.addEventListener('visibilitychange', handleVisibilityChange)
+
+  // Listen for beforeunload to clear the key
+  window.addEventListener('beforeunload', clearKeyOnExit)
+
+  // Store cleanup function
+  window.__vaultCleanup = () => {
+    events.forEach(evt => window.removeEventListener(evt, handler))
+    document.removeEventListener('visibilitychange', handleVisibilityChange)
+    window.removeEventListener('beforeunload', clearKeyOnExit)
+    if (autoLockTimer) clearTimeout(autoLockTimer)
+  }
+}
+
+/**
+ * Reset the auto-lock timer.
+ */
+function resetAutoLock() {
+  if (autoLockTimer) clearTimeout(autoLockTimer)
+  autoLockTimer = setTimeout(() => {
+    app.lockVault()
+  }, autoLockMinutes * 60 * 1000)
+}
+
+/**
+ * Handle visibility change — lock when user switches away from tab.
+ */
+function handleVisibilityChange() {
+  if (document.hidden && app.isUnlocked) {
+    app.lockVault()
+  }
+}
+
+/**
+ * Clear the encryption key when the page is closing.
+ */
+function clearKeyOnExit() {
+  app.encryptionKey = null
+}
+
+/**
+ * Stop auto-lock (e.g., when manually locking).
+ */
+export function stopAutoLock() {
+  if (autoLockTimer) {
+    clearTimeout(autoLockTimer)
+    autoLockTimer = null
+  }
+}
+
+/**
+ * Check if Web Crypto API is available.
+ * @returns {boolean}
+ */
+export function isCryptoAvailable() {
+  return typeof crypto !== 'undefined' && crypto.subtle !== undefined
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..4785656
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,9 @@
+import { mount } from 'svelte'
+import './styles/main.css'
+import App from './App.svelte'
+
+const app = mount(App, {
+  target: document.getElementById('app'),
+})
+
+export default app
diff --git a/src/styles/main.css b/src/styles/main.css
new file mode 100644
index 0000000..6147c16
--- /dev/null
+++ b/src/styles/main.css
@@ -0,0 +1,179 @@
+/* ===== CSS Reset & Base ===== */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --color-bg: #0f1117;
+  --color-surface: #1a1d27;
+  --color-surface-hover: #242836;
+  --color-border: #2e3345;
+  --color-text: #e4e6f0;
+  --color-text-muted: #8b8fa3;
+  --color-primary: #6c63ff;
+  --color-primary-hover: #5a52d9;
+  --color-danger: #e5484d;
+  --color-danger-hover: #c93a3f;
+  --color-success: #34d399;
+  --color-warning: #fbbf24;
+  --color-input-bg: #161822;
+  --color-sidebar: #13151d;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --transition: 150ms ease;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+#app {
+  min-height: 100vh;
+}
+
+/* ===== Typography ===== */
+h1 { font-size: 1.5rem; font-weight: 600; }
+h2 { font-size: 1.25rem; font-weight: 600; }
+h3 { font-size: 1.1rem; font-weight: 600; }
+
+/* ===== Buttons ===== */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color var(--transition), opacity var(--transition);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background-color: var(--color-primary);
+  color: #fff;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background-color: var(--color-primary-hover);
+}
+
+.btn-danger {
+  background-color: var(--color-danger);
+  color: #fff;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background-color: var(--color-danger-hover);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+}
+
+.btn-ghost:hover:not(:disabled) {
+  background-color: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+.btn-sm {
+  padding: 4px 10px;
+  font-size: 0.8rem;
+}
+
+/* ===== Inputs ===== */
+input[type="text"],
+input[type="password"],
+input[type="url"],
+input[type="email"],
+input[type="number"],
+textarea,
+select {
+  width: 100%;
+  padding: 10px 12px;
+  background-color: var(--color-input-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+  font-size: 0.875rem;
+  font-family: inherit;
+  transition: border-color var(--transition);
+  outline: none;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--color-primary);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-text-muted);
+}
+
+textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  margin-bottom: 4px;
+}
+
+.form-group {
+  margin-bottom: 16px;
+}
+
+/* ===== Utility ===== */
+.text-muted { color: var(--color-text-muted); }
+.text-sm { font-size: 0.8rem; }
+.text-xs { font-size: 0.75rem; }
+.mt-1 { margin-top: 4px; }
+.mt-2 { margin-top: 8px; }
+.mt-3 { margin-top: 12px; }
+.mt-4 { margin-top: 16px; }
+.mb-2 { margin-bottom: 8px; }
+.mb-4 { margin-bottom: 16px; }
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.gap-1 { gap: 4px; }
+.gap-2 { gap: 8px; }
+.gap-3 { gap: 12px; }
+.gap-4 { gap: 16px; }
+.w-full { width: 100%; }
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000..0cf7db3
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,2 @@
+/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */
+export default {}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..7024030
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+  preview: {
+    allowedHosts: ["dev.thecookiejar.me"]
+  }
+})