diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index beb05ec..5639397 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -15,7 +15,7 @@ jobs:
           node-version: 24
           cache: npm
       - run: npm ci
-      - run: npm audit --omit=dev --audit-level=high
+      - run: npm run security-check
       - run: npm run privacy-check
       - run: npm run lint
       - run: npm run typecheck
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..643577d
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,9 @@
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->
diff --git a/README.md b/README.md
index deb0702..83d9f15 100644
--- a/README.md
+++ b/README.md
@@ -24,11 +24,34 @@ ToolStack is an open-source collection of utilities designed around a strict loc
 ### Privacy & Security
 Image Metadata Remover, Data Anonymizer, File Hash & Checksum, Tracking URL Cleaner, Password & Passphrase Generator, JWT Inspector, Browser Privacy Inspector, Text Privacy Cleaner, AES-GCM File Encryption, File Type & Signature Inspector, Content Credentials (C2PA) Inspector, and HMAC Generator & Verifier.
 
+### Private sharing workflows
+- Support File Sanitizer: inspect outgoing logs, JSON and HAR files with batch-wide aliases for supported identifiers. HAR bodies are excluded by default, credentials are redacted, and original filenames and alias maps are omitted from downloads. Processing runs in a time-limited worker.
+- Screenshot Redactor: draw opaque redaction areas or enter pixel coordinates, then export a freshly rendered PNG. Manual review is required; this version does not include OCR or automatic detection.
+- Document Privacy Inspector: inspect DOCX, XLSX and PPTX XML parts for document properties, comments, tracked changes, hidden-content markers and external references. Clear supported document properties and reinspect the generated file. Document content, comments and tracked changes are not removed. Encrypted, legacy and ZIP64 documents are unsupported; compressed and expanded size limits apply.
+- Data Anonymizer now also masks linked CSV / JSON datasets with per-column actions and shared alias groups. It can remove columns, mask values, shift ISO dates and group numbers into bands. This is pseudonymization, not a guarantee of anonymity. Alias values are text labels and CSV exports escape formula-like values.
+- Calendar Privacy Exporter: rebuild a selected date window as individual Busy events, using new IDs and excluding original meeting details. Recurrence, individual exceptions and embedded time zones are supported. Unsupported recurrence forms, unresolved named zones and processing limits stop the export. Busy times are still disclosed; the snapshot does not update automatically.
+
+### Appearance and navigation
+A sun/moon toggle switches between light and dark appearance across all tool pages and native form controls. The site follows the system appearance until a mode is chosen. Only the appearance preference (`toolstack-theme`) is saved in local storage; working input and generated output are not saved there. The directory includes search, category counts, compact cards and grouped browsing.
+
+### Text & File Diff
+- The existing `/text-diff` tool now has two editable CodeMirror panes, with changes highlighted inside the inputs, aligned blocks, individual-change transfer, undo/redo, next/previous navigation, wrapping, whitespace markers and folding of unchanged sections. Source highlights and merges always use exact text. Very expensive editor diffs may use a visibly disclosed approximate highlight; the separate worker review requires an exact completed comparison.
+- Private Review compares text, JSON, headered CSV or literal single-line `.env` files. JSON object key order and formatting are excluded; CSV columns are matched by header. Match arrays of records with one or more exact key columns; missing/duplicate identities stop comparison. Common record reordering is counted separately using a longest increasing subsequence. Exact unique moved text blocks are annotated when they appear as distinct additions/removals.
+- Explicit comparison rules support ASCII whitespace, string case, line-ending style, ISO timestamp/UUID-shaped text, literal text, structured field paths and JSON numeric tolerances. Excluded field/line differences remain inspectable. Expected field paths flag unignored changes outside the selected paths. Patterns use JSON Pointer-style paths (`~0` / `~1` escaping), `*` for one level and `**` for any depth; this is an explicit review aid, not a program-behavior validator.
+- Comparison is performed on original values before masking. Per-comparison aliases preserve equality and differences between detected credentials, common identifiers and manually supplied values. No alias map is exported. Detection is best-effort; paths, keys, free text and context require review. Private Review is read-only and never overwrites source documents. File details reveal newline/BOM differences, hidden Unicode and an illustrative list of common lookalikes.
+- Select individual changes, optionally include up to five context lines, preview outgoing text, then download a standalone HTML or text report. HTML has no script/external assets and escapes input markup; only selected redacted excerpts and comparison-rule descriptions are serialized. Reports exclude original filenames and full source documents. Original source downloads and exact `.diff` patches are separate, explicitly unmasked actions.
+- Inputs stay in tab memory. Up to 1 MB and 20,000 line endings per side; UTF-8 and UTF-16 with BOM are decoded strictly. Source downloads retain imported encoding and existing newline characters; new typed lines use LF. Structured limits, duplicate-key detection and safe-integer checks prevent ambiguous comparisons. Worker timeout is eight seconds; bounded diff failure produces an error rather than partial results. Binary files, formatted Office/PDF comparison and shell evaluation are unsupported.
+
 ### Images
 Image Compressor, Image Resizer, Image Cropper, Image Format Converter, and Placeholder Image Generator.
 
 ### Developer / Data
-JSON Toolbox (including structural diff), Regex Tester & Explainer, Easy Regex Generator, Text Diff Checker, sanitized Markdown Editor, CSV to JSON/XML Converter, XML Toolbox, YAML ↔ JSON Converter, AST-based CSS Specificity Calculator, CSP Builder & Analyzer, Cron Expression Explainer, HTTP Status Code Explainer, HTML Tag Explainer, Encoder / Decoder, and UUID / ULID Generator.
+JSON Toolbox (including structural diff, TypeScript and JSON Schema inference), Regex Tester & Explainer, Easy Regex Generator, Text Diff Checker, sanitized Markdown Editor, CSV to JSON/XML Converter, XML Toolbox, YAML ↔ JSON Converter, AST-based CSS Specificity Calculator, CSP Builder & Analyzer, Cron Expression Explainer, HTTP Status Code Explainer, HTML Tag Explainer, Encoder / Decoder, and UUID / ULID Generator.
+
+- JSON inference merges fields across array samples, marks missing fields optional and retains mixed types. Schemas describe the sample rather than a complete API contract. Sample values are not included in generated definitions.
+- Support File Sanitizer includes a POSIX cURL-to-JavaScript converter. It parses text without executing commands or sending requests. Sharing mode replaces query values, JSON body values and most header values; URL paths, field names and content-negotiation headers remain visible. Browser-controlled headers are omitted with notices; file references, shell expansion and unsupported flags stop conversion. Output always omits browser credentials.
+- Synthetic Dataset Generator creates seeded fixtures with unique per-table IDs and valid references between tables. Customize types, ranges, choices and row counts; preview tables or export CSV, JSON and a ZIP with the schema. Test names are labels and generated emails use `example.invalid`. CSV formula-like text is escaped. Seeded UUIDs are fixture data, not cryptographic identifiers. Limits: 8 tables, 20,000 total rows and 300,000 cells; processing runs in a time-limited worker.
+- QR Toolkit generates text/URL, personal Wi-Fi and vCard contact codes with bundled `qrcode`. PNG/SVG exports contain the encoded values, including Wi-Fi passwords. Read or paste PNG/JPEG/WebP images with bundled `jsqr` in a time-limited worker; targets are displayed as inert text, never opened or checked over the network. Camera access is not required. Images are limited to 20 MB / 20 million pixels and scaled to at most 1,600 pixels per side for decoding; small or complex codes may need a sharper crop.
 
 ### Text, Accessibility, Converters & Generators
 Text Statistics / Analyzer, Find & Replace, List Cleaner & Formatter, Text Contrast Checker, Color Code Converter, Unit Converter, Timestamp & Date Toolkit, and Lorem Ipsum Generator.
@@ -37,7 +60,7 @@ Text Statistics / Analyzer, Find & Replace, List Cleaner & Formatter, Text Contr
 
 ToolStack registers a same-origin service worker in production. The home page, offline fallback and ToolStack's own static assets are cached, and successfully visited tool pages can be reopened from the cache when offline.
 
-User-selected files, generated files and tool input are **not** deliberately placed into the service-worker cache.
+User-selected files, generated files and tool input are **not** deliberately placed into the service-worker cache. Bundled PDF.js and qpdf runtime assets are cached after successful use, alongside application chunks.
 
 ## Development
 
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 7262ee0..bc74f3f 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -10,6 +10,8 @@ export default defineConfig([
     'out/**',
     'build/**',
     'coverage/**',
+    'public/qpdf/**',
+    'public/pdfjs/**',
     'next-env.d.ts',
   ]),
 ]);
diff --git a/package-lock.json b/package-lock.json
index 3a6dcc0..216f3e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,20 +8,34 @@
       "name": "toolstack",
       "version": "0.3.1",
       "dependencies": {
+        "@codemirror/commands": "^6.11.1",
+        "@codemirror/lang-javascript": "^6.2.5",
+        "@codemirror/lang-json": "^6.0.2",
+        "@codemirror/language": "^6.13.1",
+        "@codemirror/merge": "^6.12.2",
+        "@codemirror/search": "^6.7.2",
+        "@codemirror/state": "^6.7.6",
+        "@codemirror/view": "^6.43.14",
         "@contentauth/c2pa-web": "^0.14.4",
+        "@fontsource-variable/inter": "5.3.0",
+        "@lezer/highlight": "^1.2.5",
         "browser-image-compression": "^2.0.2",
         "diff": "^9.0.0",
-        "dompurify": "^3.4.14",
+        "dompurify": "^3.4.17",
         "exif-js": "^2.3.0",
+        "ical.js": "^2.2.1",
+        "jsonc-parser": "^3.3.1",
+        "jsqr": "^1.4.0",
         "jszip": "^3.10.1",
         "marked": "^18.0.11",
-        "next": "16.3.4",
+        "next": "16.4.2",
         "papaparse": "^5.5.3",
         "pdf-lib": "^1.17.1",
         "pdfjs-dist": "^6.3.289",
         "piexifjs": "^1.0.6",
         "postcss-selector-parser": "^7.1.6",
         "qpdf-run": "^0.2.1",
+        "qrcode": "^1.5.4",
         "react": "^19.2.8",
         "react-dom": "^19.2.8",
         "react-image-crop": "^11.0.10",
@@ -36,11 +50,13 @@
         "@types/node": "^24",
         "@types/papaparse": "^5.3.16",
         "@types/piexifjs": "^1.0.0",
+        "@types/qrcode": "^1.5.6",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "@types/tinycolor2": "^1.4.6",
+        "@xmldom/xmldom": "^0.9.12",
         "eslint": "^9",
-        "eslint-config-next": "16.3.4",
+        "eslint-config-next": "16.4.2",
         "tailwindcss": "^4",
         "typescript": "^5",
         "vitest": "^4.1.11"
@@ -346,6 +362,132 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.20.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.3.tgz",
+      "integrity": "sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.11.1.tgz",
+      "integrity": "sha512-O/4hG3SC1YwcmQ0d2UVNDs+AsaNWd1iHVxbTeEBuqH+6bExAiPK3iS/BvpY6rZGURALv4ZD3sIgcCmRvw3ehBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.7.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz",
+      "integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-json": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
+      "integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/json": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.13.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.13.1.tgz",
+      "integrity": "sha512-zfvU2r3TyylQLMj/te+5CnQ0rSqZi8B1oTCBbQkagcLW4Xc6imab6qN+pEJhsuNOLaJqiRyBXp9UhWA1DhVvDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/streamparser": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.7.tgz",
+      "integrity": "sha512-28/+iWLYxKxsvGYhSYL7zaCZqLz5+FFFDq9tVsvGv9kv8RY4fFAchJ5WX9M3YrrRlTIsECjsXPqeNgnSmNP2dg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.42.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/merge": {
+      "version": "6.12.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/merge/-/merge-6.12.2.tgz",
+      "integrity": "sha512-V8JvyAPjHbPupqP7BeMcsdsYCbyPij74jxIbaIJDORI+VZzW44zFmon8bF+oxGWvOKhcRmkiUMXd8MxHr3YA2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/highlight": "^1.0.0",
+        "style-mod": "^4.1.0"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.7.2.tgz",
+      "integrity": "sha512-gUYkYhT2+n/+VGZ+8EzE5WFkYZUZYm1VOKDudIsNqh42uRVQJ0a6Yss9sdKT3MeOYfuL1N6AZA57oza0Oyr0LA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.37.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.7.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.7.6.tgz",
+      "integrity": "sha512-kAz+AncRtKuIknedxT1bq4XwXv4UowhbkHU1myPrtVb/jZtImWuV5BXzv5vK6i3kYACsdiZiQKFQQ5Mq7elW8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/streamparser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/streamparser/-/streamparser-6.0.0.tgz",
+      "integrity": "sha512-JTFPF6xrfjt0mnfGPgzcLiMwYmvIyNaoizp8BYzv8FE8KrT6GBGDZ190rtt+O7Wke3gG/MFHyiY9YGNeimof4w==",
+      "license": "MIT"
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.43.14",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.43.14.tgz",
+      "integrity": "sha512-hC45YnmJNR1rz42OF57BLoQNFMV12/13drnvibDsR2quNDmldcb4WvYVV81hFQg56i9lcqQMEDqilhX2QDcGQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.7.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@contentauth/c2pa-types": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@contentauth/c2pa-types/-/c2pa-types-0.7.4.tgz",
@@ -553,6 +695,15 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.3.0.tgz",
+      "integrity": "sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -630,9 +781,9 @@
       }
     },
     "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.35.4.tgz",
-      "integrity": "sha512-Uhfl4V4lhP2nbUVF9+hyH1+luj86f1gUFeo8ALYxFoULoU+G87D43BfeMP8XHsk9boxAnCY/bf2EHwhA7MuGsA==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.35.5.tgz",
+      "integrity": "sha512-QRUlFQ0WxvdWyqqG/WtI3iupfD5rBzmCHXSdPsY91sAtVtTo7Q4cb6zOccZ3gqEqkr0f1As1ehLqmEpDsRf+lg==",
       "cpu": [
         "arm64"
       ],
@@ -648,13 +799,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.3.3"
+        "@img/sharp-libvips-darwin-arm64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.4.tgz",
-      "integrity": "sha512-hWniXY3bG5qKpkKrAwPe4y+VTPmf086YQAnkxWh7uA1YrlRouWGa0M0Mxj3ZjnXFkv7/TD1bTy9lGUK26vRvWw==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.5.tgz",
+      "integrity": "sha512-+BR255RhDlpygUpOc/Jdt1nT6DQ3XG/ERo5wbcdOf5Q320dKtPCKPLR1LJs9VGXRaMa8l1uUa0tkCNOXiAxZUw==",
       "cpu": [
         "x64"
       ],
@@ -670,20 +821,20 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.3.3"
+        "@img/sharp-libvips-darwin-x64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-freebsd-wasm32": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.4.tgz",
-      "integrity": "sha512-lIsKw/BU+kjB4eZjxrYrZmwOJYi3Ajrv66iAlBmUPyKc3HpnloevB1g3wxGD9P/5BbQ1brBGl65VRRrCvQDEqA==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.5.tgz",
+      "integrity": "sha512-Y/z91nEZ4uIBX5X3nfTovjU9lHNKFYbL2lpHCLVNmXQK03VIZvXBBt0KxbPGp2SdGSF+2mQU4e+hQaWOt86iAw==",
       "license": "Apache-2.0",
       "optional": true,
       "os": [
         "freebsd"
       ],
       "dependencies": {
-        "@img/sharp-wasm32": "0.35.4"
+        "@img/sharp-wasm32": "0.35.5"
       },
       "engines": {
         "node": ">=20.9.0"
@@ -693,9 +844,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.3.3.tgz",
-      "integrity": "sha512-suTBPTDGrI9WodccaDdwZItTSaBYASlBk1NSfElSHrUfzu3szG6lvIF58+WiFvnfzuK8ZBFS5zE00PxqxnRiPg==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.3.4.tgz",
+      "integrity": "sha512-5R89nBYiRdUlSWJxPhO+GVtaXzXSxKnRu/xqMn3KTA3L9EB9Oy/P+Nn2f2vlhPuUdy/Zusb2DarbyTpGCfEDuw==",
       "cpu": [
         "arm64"
       ],
@@ -709,9 +860,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.3.tgz",
-      "integrity": "sha512-FVJZ5mITMobmXIz/hPDTw0EintTW5H3WfrxwLqEqjiIihlu+hVRyGrFQ60xl0Lxn7Bt3zdpevPaQi0HEzqz9fw==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.4.tgz",
+      "integrity": "sha512-iR2OKH80yi0U+dUplyh3/xdpFvps6YkCwsXenIJxqxR1v9o+xtKTGbS9H7cps+2Vxjc8B1j96p75NmTGjIhtpQ==",
       "cpu": [
         "x64"
       ],
@@ -725,9 +876,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.3.tgz",
-      "integrity": "sha512-3rbU4vqXXc3hY/OiXdl52xZvT0F1yEngWfvqudtPJg/KkyiaQw2DRsFrNzpmLvfavbwOq3qXn36GP8obHRULQA==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.4.tgz",
+      "integrity": "sha512-LmRtTsOHuvM2+wlO2Db37dx5MiZhB0FvSunciw48YjdOkZz9KAiRbm8ujeMOA1INqmei5NapFxYEK1D1ZSidmw==",
       "cpu": [
         "arm"
       ],
@@ -744,9 +895,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.3.tgz",
-      "integrity": "sha512-0DaL0A6Xu6sQSQFwe4iVCrKWU2cCTItnRsYsCdxAMm9NF6twAA9BKnoqy4hqz4+azQ0JHuA26qiUKsf1XJ/v5A==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.4.tgz",
+      "integrity": "sha512-Y3dgX/6lE2QhQb+Gxy0WZxfg9MEm/JBjamZpS2IklP7xIQoKN4hzAm7KcMVGtaVDt3neE9OKBC7vAfonA/Lr1A==",
       "cpu": [
         "arm64"
       ],
@@ -763,9 +914,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.3.tgz",
-      "integrity": "sha512-cdn1OvUBwsXhbC0zSzJnNzf5MZ/mTrobawDvNXBTxe8VtqKAm0sRuEY2Evzovb/w9JMk4TvRxqt1mekSuJz64w==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.4.tgz",
+      "integrity": "sha512-Le6boB8Tai0Nis+gIxIpKx68UDVVIqdR8Tin5Yf1z2LJJQLDJvCDRqRu+jC2qCoD+eIomonmOwB4smBRxfVpYQ==",
       "cpu": [
         "ppc64"
       ],
@@ -782,9 +933,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-riscv64": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.3.tgz",
-      "integrity": "sha512-HjPVx7yKz+0lqdhDlTw1tt90wamBoxhiXpvl1XZpJLiHH4RCJ5yDTqH+VlYPv2fwFs89JFw4c1IexYOcQUi4IQ==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.4.tgz",
+      "integrity": "sha512-aHkkIEHPRdQEegJN20MLmGtxYD9R2wQr3Cwpddnu5+YKMt6Uzax7S9h5gpZTo8wyrGuZSlfQ63OevL5mTyOC7Q==",
       "cpu": [
         "riscv64"
       ],
@@ -801,9 +952,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.3.tgz",
-      "integrity": "sha512-neWLh+3yCNThxnfy3c4BbVBeGgt9aftno+XbT56iK28RgeDs3UOFWviLWlUu0bArYVYJaFDK+RRohbicUNCm8Q==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.4.tgz",
+      "integrity": "sha512-ra/mB6MikESDUO7Yg+Mi95bFBb9GsObURuhnOv3OqknjGe9sZrG8tCe9q0xSIGrtLgvgw0gKnFWcK4blSgQOuQ==",
       "cpu": [
         "s390x"
       ],
@@ -820,9 +971,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.3.tgz",
-      "integrity": "sha512-4vKmvAst9nrowcqquKFAyZJUDolUaIp8uRiN0mWFguJ1IplC9/pitXtlnnlU4aa/eJw3J7i67V+pwUL+wZGdsA==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.4.tgz",
+      "integrity": "sha512-GJ//SSXbnwSDes02umB3nDJLFcQzw8a18V8fyhqr6tV515tOEMdImjjxj1AoafMRz56F3PHgftnj1QEKSU1zkw==",
       "cpu": [
         "x64"
       ],
@@ -839,9 +990,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.3.tgz",
-      "integrity": "sha512-Y9kQaLMuNoB0bPYOOdcZMaseNrFpPodIWWMrx+CZyydf2xn68j9WYc6sWWRrDwNkzCQjKYfc68L7jKjGlHMibw==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.4.tgz",
+      "integrity": "sha512-hvulFwtjUcagsis6BBxHwGFwWoNZjgYmULGVrZcyfNbjA8hKILbRxGg15/7w5HDyXHXUos/j6baAWqnCyQ2DWA==",
       "cpu": [
         "arm64"
       ],
@@ -858,9 +1009,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.3.tgz",
-      "integrity": "sha512-fj8Mv0HHfD1Rr+4I68+3agJynxDWtBFgicTbSOb9Bke6pIwzGcJ+RX/yHjmiEGFMCavY/dxvem7MyNaJF+wDiw==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.4.tgz",
+      "integrity": "sha512-6zXKeE/p39I1AmA3cJG35eyBGNqNddLnUXjhwBnsGjFPWqf5VKkDBEqaEkPDoTEtkxwi2vv8Tcr2mDyP4So7Fg==",
       "cpu": [
         "x64"
       ],
@@ -877,9 +1028,9 @@
       }
     },
     "node_modules/@img/sharp-linux-arm": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.4.tgz",
-      "integrity": "sha512-7OAS8gI0EReKGVN2HssHlM6umJgxF5VI3xN0p9FA91p/YO+ou5hiNghLdZ5BEHztwaaK5+bLKRf8x/o2L2nk9A==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.5.tgz",
+      "integrity": "sha512-LEaXK2WdXVK5ykcw0buWyPMsmLLL2vpHLD6yrNSW+JGEL3BZPA4tpKN6iaMc4AxTTAoaX/sU1rOL51lcIz48ZQ==",
       "cpu": [
         "arm"
       ],
@@ -898,13 +1049,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.3.3"
+        "@img/sharp-libvips-linux-arm": "1.3.4"
       }
     },
     "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.4.tgz",
-      "integrity": "sha512-De4jpEnAU8Hd5oT0j1G3uL4ZvTuipVMn7YC6vPaJhy6/7EwEae0SVAoBrUMYQbkLGDm85taVWwuPc1a44LTzCQ==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.5.tgz",
+      "integrity": "sha512-LYVx5JTsOM2CBzmxreh+nl64/3H6Xb09iSLknqH47z2T2DFFxDeFLP5y4dJwe6H7uGQlHPyEEtIqyo3DYsRwdQ==",
       "cpu": [
         "arm64"
       ],
@@ -923,13 +1074,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.3.3"
+        "@img/sharp-libvips-linux-arm64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-linux-ppc64": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.4.tgz",
-      "integrity": "sha512-2oYZJeIl4kCcMGk4ouZVjnkCtFrpQFlNEtJ6GbxzhHQchwH0NH/qEb9ykmOl29dqwMq+JhFdZn+1ak2FKhI9fQ==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.5.tgz",
+      "integrity": "sha512-QVxAAq8evVRI9ia2vqgwrmWucn5Dfv+JdWzj75pD8omHLPSP7f8p20O8jxzjCcuCEQEOtYOZUmX1hkiZ0kdevA==",
       "cpu": [
         "ppc64"
       ],
@@ -948,13 +1099,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-ppc64": "1.3.3"
+        "@img/sharp-libvips-linux-ppc64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-linux-riscv64": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.4.tgz",
-      "integrity": "sha512-cPbNChoRURAWdebDIHSenxRpgEdy7JkPydSnUxRm9VvKD7m0/xVaR/8Fzlu81pk5nHEvHH87UZUA7cTtwnbJSA==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.5.tgz",
+      "integrity": "sha512-LtdreXguaavKODPIfzJ4kffx7UNt1omwtK0rch4EBbbSTXPnxWmYSayXdLJw0fJzQ97kHt1gL/yh4tvU+nCyRQ==",
       "cpu": [
         "riscv64"
       ],
@@ -973,13 +1124,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-riscv64": "1.3.3"
+        "@img/sharp-libvips-linux-riscv64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.4.tgz",
-      "integrity": "sha512-RY0JFY8Fd6RonCBtHz+DvadaPkXDSI1AUn6yWL9TipqkZ1vY8w8evqdgyDFnkm4/K1ve1TvZiaePP5oSd4+WVQ==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.5.tgz",
+      "integrity": "sha512-UZasTOFiYzotTsGOCu42BfUzP6Tu6Do/947iRm1RsLKvlllxwGcn4RN27LibGWceix4Y+Pmw3jsnTcCQIgWjqA==",
       "cpu": [
         "s390x"
       ],
@@ -998,13 +1149,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.3.3"
+        "@img/sharp-libvips-linux-s390x": "1.3.4"
       }
     },
     "node_modules/@img/sharp-linux-x64": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.4.tgz",
-      "integrity": "sha512-9qvvEAuk8k89TfWUoX2htWjbAMX8p+NxCppjpcg5k6xMsjhBQPTsoIh36h9Qde4WRuGpJeYnOjdosDn/cnv+OA==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.5.tgz",
+      "integrity": "sha512-SxFtLTeJInhAA9Q836kux2vZNeOBQEx658qvbboZScr0wIARym3IcGmW7KpVD5sbVg0Ojy+udFQdayYIZyoNog==",
       "cpu": [
         "x64"
       ],
@@ -1023,13 +1174,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.3.3"
+        "@img/sharp-libvips-linux-x64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.4.tgz",
-      "integrity": "sha512-KB5jxpfWQTr0nc3xdHtWChdbifHrBGsd2SM62Eyxrl8afikm+f5qGBU75SJIZBT/S1MC8XyacdlXBMSWq6OURA==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.5.tgz",
+      "integrity": "sha512-9HbMclmI1zlNkFRs3z9/eBtDjfD0sGlrX1z6b1qwmiFY5ElDLh4BC0LPBdVp7z1DXFiKlIcznf+ZlsuZzLxQqg==",
       "cpu": [
         "arm64"
       ],
@@ -1048,13 +1199,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.3.3"
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.4.tgz",
-      "integrity": "sha512-f+eZJZIQNEEd26RPSW+76chwOf1XtA2Y/O+5ocVyLliHkeih3e+jhLVBdNTd2rS3IbNXK8+ug93Vf5ZXtF5Lxg==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.5.tgz",
+      "integrity": "sha512-4KOphqB035HrVdqLZfCgMzzERrQkkzOwRhl4OAkRO1YCldbaFjySXMaK534Mo0V+LndnlJk+sbUyLeU0ULyD1A==",
       "cpu": [
         "x64"
       ],
@@ -1073,13 +1224,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.3.3"
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-wasm32": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.35.4.tgz",
-      "integrity": "sha512-zQnl4Kwp7Q6NHsENtU2T/00Zi+w3AQNwz3+UaTyVBy2FpXrzXzGjndpK61onhZjRtRpQXxCTeqw19bVyXOh7jA==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.35.5.tgz",
+      "integrity": "sha512-Ptsga1su4tQx+LLF1ECS9U6nz5kmrXKo6XVbtR48Ke3ZRxxgaWBu7IDtEe1quo8hiupwm6WFqxVlXaSf7IINGQ==",
       "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
       "optional": true,
       "dependencies": {
@@ -1093,16 +1244,16 @@
       }
     },
     "node_modules/@img/sharp-webcontainers-wasm32": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.4.tgz",
-      "integrity": "sha512-ESfNkywmCfPNyaZjxooddJQiQ+l/nTpGEOGthxiLnIHXC/CmcBixnfwUleX9mCz9ovrUUvKMap/pm8RYbzfwaA==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.5.tgz",
+      "integrity": "sha512-hfhF/FmoQyTUkA0bIKFOtw536BQSeBMe6BF6QyWlrPxT754+TFLaZ7sKKTfvvM0yJgKgaYTwnFCIZ/GuDw5SUA==",
       "cpu": [
         "wasm32"
       ],
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "@img/sharp-wasm32": "0.35.4"
+        "@img/sharp-wasm32": "0.35.5"
       },
       "engines": {
         "node": ">=20.9.0"
@@ -1112,9 +1263,9 @@
       }
     },
     "node_modules/@img/sharp-win32-arm64": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.4.tgz",
-      "integrity": "sha512-iNdlBX9gLVvqe2I3uIJSIKTq6wckP/DYxZtcqxm09x5Gi24DnFBmPAWZmr60ZyYMG0xlzo6goG3670ar+RXvRw==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.5.tgz",
+      "integrity": "sha512-X4t7g+7ZA5DKblCBEXGjUqqemj4vczING/5viFwAL8h4N3qYeyjwdCvRLHi4EdOUI+2Z7UFlp1VM+p/AuEtm6Q==",
       "cpu": [
         "arm64"
       ],
@@ -1131,9 +1282,9 @@
       }
     },
     "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.4.tgz",
-      "integrity": "sha512-kqRsbaa5CS6KHlpxnN7WhE6vAAugXyZButpRdvDWetlv6Qv4N9WTcrWzF7tXfB9T7MsoadqdI8hmwLq6UlLvtw==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.5.tgz",
+      "integrity": "sha512-5Zm82LoBc43nhwNybZlG7Y1KO//Zhsn306fQl29ZOuStHLGTo3BWL83q3cznX0poxSAMuYL1On/BHBxkBeKr6A==",
       "cpu": [
         "ia32"
       ],
@@ -1150,9 +1301,9 @@
       }
     },
     "node_modules/@img/sharp-win32-x64": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.4.tgz",
-      "integrity": "sha512-XtmnYhBcrORsJ4XJngyzr/EWP0hRZLAZRFaApdKuviyqF78+ylxh2y06ZmtULAMOnObJ3ucpN0AcwSWnMowTRg==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.5.tgz",
+      "integrity": "sha512-x76eH0vEiHlcMQu8Y8IenntaACtddpT6W0wmXtWrnKcnKI7ME5DdgqhAD6SEWOEl1v2zDvkZDhFA9KnURwpfqg==",
       "cpu": [
         "x64"
       ],
@@ -1231,6 +1382,58 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lezer/common": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.3.tgz",
+      "integrity": "sha512-H0iErY4e43LpXbYDyBci5W4v/RwTgGV3YzYOlJPiGZ8RY8w51kVE+xLn1tg3Z6UmSfyETvtsUK3r7YsgDQEI7Q==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.5.tgz",
+      "integrity": "sha512-O1GMVKgtf5YspFaRzpmqkVgMtIk2HG9uMAbH6wdAIdNh3TVzCsch/+cRi+6l2//UGDKe6NB9BW3cvuR5ezMQ0w==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.6.tgz",
+      "integrity": "sha512-sEvOqpl4vJQca0NugSQK02vQPbc5KrvoojnYGoqqFgFO0MtcYhwGiHKVEB+LuXYJnfyXo4QPA8ztbrEa4Fw5NA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/json": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+      "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.11",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.11.tgz",
+      "integrity": "sha512-UwgZcl1R66H2hDzBrA7kWyYmX6s8p5TQ+e/t7CuvgCtBEPxbEPaHYHu+pJBvTvDotEJpuQkJjbXuHiw5Cixxgw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.4.tgz",
+      "integrity": "sha512-Wy0V7+SGUjnF9/TkiM1hKVDPj7jKXduPNboMVtHTA8dySMURWqfg/JZ9E2Sq8JgSJmkl7k7Qe9FLeMSrSraWmQ==",
+      "license": "MIT"
+    },
     "node_modules/@napi-rs/canvas": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-1.0.8.tgz",
@@ -1510,15 +1713,15 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "16.3.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.3.4.tgz",
-      "integrity": "sha512-cjWZnUUa6jZq2kFaNe/ZyJdZonOZ/QoN0Zka2nz/FLOrfx14pQuM9c5RaSVkWMqgdt4ksgPAMWPyHSs/CyV48Q==",
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.4.2.tgz",
+      "integrity": "sha512-nTUTFH7G5/J/fmpkjVLegOkqyKOP0CEsJcMsyO4UCYeN1su+YMW/MfaSErnJskL7XM+UDK6aTvslxsRCyya/sA==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "16.3.4",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.3.4.tgz",
-      "integrity": "sha512-szW9y2Aumu4z88YXfTzcFsgUAg2k64uzbtcO5L9f1AKS4w/GUKJcbFllRflROVyNPgJtGOnvNxiyp3v6b+prIA==",
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.4.2.tgz",
+      "integrity": "sha512-gCTWlw0e+Y6kajpFyKKgA195jUJCRhlzJE0lV7ufe8a+ghIsANWZ0/FiJwg6DuOG1+OvRbcZDcFBoRh3mNJx0g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1527,9 +1730,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.3.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.3.4.tgz",
-      "integrity": "sha512-iBr3I5LZNk5/bgl5//iTgD2tcym14MX0Xo7fD//u9dYAEgGzza1y9oywluPtf74YnOswVdH1908aK9xVz7zQTw==",
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.4.2.tgz",
+      "integrity": "sha512-ONkhFvZNFWlsEHOM/81AtxdyuJP2KRYKYR0JxPwvcu1AuPMMMgcL+wW2luldJvMtZwKtUxoSkCychW5wIeoYSw==",
       "cpu": [
         "arm64"
       ],
@@ -1543,9 +1746,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "16.3.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.3.4.tgz",
-      "integrity": "sha512-2dpiSyl2Jw/NrBPaU2MAKGSa+2MR82pJIn4Sm5Rjr+gxAeuh0z158Su3Z2O8zn7UNNq+ej4bToed6RcRN/Lydg==",
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.4.2.tgz",
+      "integrity": "sha512-luPCMbOsCoaF+kXJEUjmjmOZg1lC3BflhmUu+ZmW4tBu2vW/4AXak8JBFvePizGkxVmNiAw/r9ra+6UviCWtWQ==",
       "cpu": [
         "x64"
       ],
@@ -1559,9 +1762,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.3.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.3.4.tgz",
-      "integrity": "sha512-+t+U8HZT+fApePCS5h89CSH3datz29MkzyfCn+6fpsZBG/oiEOhINcb9rtkv6sdpToLGFn2e6146NzaKCXkqrA==",
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.4.2.tgz",
+      "integrity": "sha512-xhwFTAncJyaCNy5KqKKuKaIIdCy1/1ZV1s5S1G0hhT7wGMkDTlfJ6aQbfRFnIG/s3/kDrxQ8aycVe+c5QnP8ow==",
       "cpu": [
         "arm64"
       ],
@@ -1578,9 +1781,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.3.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.3.4.tgz",
-      "integrity": "sha512-mx03GNs1ocQA5JQ4FxDMmIsNkdrZh8cuezKCrId28e5/gIPU/l7Kcy2+vmCCzdjnnmXJy+iOAu+7K0QppO6Urg==",
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.4.2.tgz",
+      "integrity": "sha512-T1PNmfbPcxr5ndtWUL/3wQtLXsz808lq6sc2GrNT5k2oquF7UyqZddHSuAewHVsWsGXe6nsl9HoN1YNriVjuSg==",
       "cpu": [
         "arm64"
       ],
@@ -1597,9 +1800,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.3.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.3.4.tgz",
-      "integrity": "sha512-YIhGY6fSMfha52bnVxnzc9zaVBzJg+cqQTOD8tXIBSx4fuv0pVMxQTE0PaS59YhnMOiYiG09IMwxJAf/CFm/Dw==",
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.4.2.tgz",
+      "integrity": "sha512-N9cDUOCGtkJG5PNKDFZUF3xXndrJJcpLp121uAGjIGvO/U2p9tfdNOM9htj7+5f72l0m8rMw/cvYacUJBQoudg==",
       "cpu": [
         "x64"
       ],
@@ -1616,9 +1819,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.3.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.3.4.tgz",
-      "integrity": "sha512-+eaaX6axpDb0yF1GCpiERe6njplvdC+nks/fKfcHu3XPGRrald8P3/X7yv7QLdjA51knnxwl9pxdIJsg+w1L+Q==",
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.4.2.tgz",
+      "integrity": "sha512-yY2uh1YhX6ufuYy2FCbw1dqblbhI57GLYAJfCkqD9auTv6pLrH67Uccjc3QMKBeCYAG6lkgu08ExmX1bbjejjQ==",
       "cpu": [
         "x64"
       ],
@@ -1635,9 +1838,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.3.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.3.4.tgz",
-      "integrity": "sha512-0jcXW7Xs/uzICrmgV3MhDYDeRy++1CqnpDIerlPIqYO4bhzB4WNbX/aRnQclustsAyTkFKB0z6rbcjmNg5tR8A==",
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.4.2.tgz",
+      "integrity": "sha512-j/ArWRIHpMMB6wYLMhr2puTguBt70lNU/Cmjl9p6dTDE8DGknYJMP9PdwPk2dqpCNL/KIX9yfngDvIesxJPmsg==",
       "cpu": [
         "arm64"
       ],
@@ -1651,9 +1854,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.3.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.3.4.tgz",
-      "integrity": "sha512-vvBzwu1pYQCp92maZCFCIw/XgOTMR5tur9GjakwIo2cmwRTMKajRZZDS9+e4KsUZWKu1E007WUeAFXRRjZeuzw==",
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.4.2.tgz",
+      "integrity": "sha512-AA4edyWHDko3NCSo0x6GomsdgFb0oR1J3MXU1b5xt6FRFg4AucrMPW3S0hCe/9onU0O1BbpGQBsqo1r0Gneu1g==",
       "cpu": [
         "x64"
       ],
@@ -2415,6 +2618,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.1.6",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.6.tgz",
@@ -3058,6 +3271,16 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.9.12",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.9.12.tgz",
+      "integrity": "sha512-5AXjrcMClTryPe9LgZrygpB1lj7s0S9E0+W+AHaVKAVyHanafK86iPSvG5xHVSp/jC+VH1UXu0TAEmY279xH7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.6"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.14.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
@@ -3098,11 +3321,19 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -3500,6 +3731,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001810",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001810.tgz",
@@ -3563,11 +3803,21 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -3580,7 +3830,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/concat-map": {
@@ -3603,6 +3852,12 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "license": "MIT"
     },
+    "node_modules/crelt": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.7.tgz",
+      "integrity": "sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3716,6 +3971,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3778,6 +4042,12 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -3792,9 +4062,9 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.4.14",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.14.tgz",
-      "integrity": "sha512-dVoH9z+MY+C9IilgGCk3YfFqjLi3fChm2OiKJMzh6axrJ5qwxqWaZamgmHrpv22CN/KdbZJuGEGgfQoL00LTdg==",
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.17.tgz",
+      "integrity": "sha512-B/pSlYVHQ58kqISD/yDjuJ1yfzI34m1gF4lAod2bwSRhiN4K5Cl3H8Af7hqB2PmTL911tdEudnnXn5FnhRoz0w==",
       "license": "(MPL-2.0 OR Apache-2.0)",
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
@@ -4112,21 +4382,21 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "16.3.4",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.3.4.tgz",
-      "integrity": "sha512-35/8RM10huEL9vlr8hUZMERMENHBrnyHN3ZZkF9efSgzGaqK34jIqry44A956//zriUhUAUW0XSkcolhrryqAA==",
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.4.2.tgz",
+      "integrity": "sha512-P33vjcETMXc+qBjpF77TeJHZLzk6cPcTy8KjpxLucYB3mCIFIORMcZ+cBXcAiIYjE5RM7jyknEEOwMNdnx/ADQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@next/eslint-plugin-next": "16.3.4",
+        "@next/eslint-plugin-next": "16.4.2",
         "eslint-import-resolver-node": "^0.3.6",
         "eslint-import-resolver-typescript": "^3.5.2",
         "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-jsx-a11y": "^6.10.0",
         "eslint-plugin-react": "^7.37.0",
-        "eslint-plugin-react-hooks": "^7.0.0",
+        "eslint-plugin-react-hooks": "^7.1.0",
         "globals": "16.4.0",
-        "typescript-eslint": "^8.46.0"
+        "typescript-eslint": "^8.56.0"
       },
       "peerDependencies": {
         "eslint": ">=9.0.0",
@@ -4728,6 +4998,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -4978,6 +5257,12 @@
       "integrity": "sha512-Vw/g2upw4MYLZ9e95k79+idMoPFEKvTQVTce9LCDfI+T6AiG+SdiR4WDKszB1grQy0O+uhxd6cqbdi3VhECdbA==",
       "license": "ISC"
     },
+    "node_modules/ical.js": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ical.js/-/ical.js-2.2.1.tgz",
+      "integrity": "sha512-yK/UlPbEs316igb/tjRgbFA8ZV75rCsBJp/hWOatpyaPNlgw0dGDmU+FoicOcwX4xXkeXOkYiOmCqNPFpNPkQg==",
+      "license": "MPL-2.0"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -5213,6 +5498,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
@@ -5552,6 +5846,18 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/jsonc-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz",
+      "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsqr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
+      "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==",
+      "license": "Apache-2.0"
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -6113,12 +6419,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "16.3.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.3.4.tgz",
-      "integrity": "sha512-/Ztf6CeRH+ejEXUrYtqI4gkS66eFIHuSwqi60RgcpWKodxFZx2/dqVCMKBwILfAHXQ+F1b1vAudgj3mnxqtoIA==",
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.4.2.tgz",
+      "integrity": "sha512-r+oBJojfefUjOiWkBhXgLS+igxX/7BWyK59uHnyOyplMSLtBZ+QLP3okrdYTbrfrbrmNTVWLBPaHDX9KRaIt3w==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.3.4",
+        "@next/env": "16.4.2",
         "@swc/helpers": "0.5.23",
         "baseline-browser-mapping": "^2.9.19",
         "caniuse-lite": "^1.0.30001579",
@@ -6132,15 +6438,15 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.3.4",
-        "@next/swc-darwin-x64": "16.3.4",
-        "@next/swc-linux-arm64-gnu": "16.3.4",
-        "@next/swc-linux-arm64-musl": "16.3.4",
-        "@next/swc-linux-x64-gnu": "16.3.4",
-        "@next/swc-linux-x64-musl": "16.3.4",
-        "@next/swc-win32-arm64-msvc": "16.3.4",
-        "@next/swc-win32-x64-msvc": "16.3.4",
-        "sharp": "^0.35.4"
+        "@next/swc-darwin-arm64": "16.4.2",
+        "@next/swc-darwin-x64": "16.4.2",
+        "@next/swc-linux-arm64-gnu": "16.4.2",
+        "@next/swc-linux-arm64-musl": "16.4.2",
+        "@next/swc-linux-x64-gnu": "16.4.2",
+        "@next/swc-linux-x64-musl": "16.4.2",
+        "@next/swc-win32-arm64-msvc": "16.4.2",
+        "@next/swc-win32-x64-msvc": "16.4.2",
+        "sharp": "^0.35.5"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -6408,6 +6714,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
@@ -6437,7 +6752,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -6522,6 +6836,15 @@
       "integrity": "sha512-0wVyH0cKohzBQ5Gi2V1BuxYpxWfxF3cSqfFXfPIpl5tl9XLS5z4ogqhUCD20AbHi0h9aJkqXNJnkVev6gwh2ag==",
       "license": "MIT"
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -6618,6 +6941,23 @@
       "integrity": "sha512-X4ZknJPl7av/o+VEX3XafWyzfOUm9qSoa+JqXS+hGSNVI1Wxk60bKhmLvvX/8gp7pCzbp3KW0zY8aLBjL5EkYQ==",
       "license": "MIT"
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6741,6 +7081,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -6931,6 +7286,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -6987,9 +7348,9 @@
       "license": "MIT"
     },
     "node_modules/sharp": {
-      "version": "0.35.4",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.4.tgz",
-      "integrity": "sha512-n++8XWcj+jCOr2IOl7h8LbKnGBDY4aPbmprMONBNFdn0ImXqpGVv5zliDs0V9HbmbCQLpbuo2ej9rAoOQTvMDA==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.5.tgz",
+      "integrity": "sha512-Ywn4OnzGukp7CDMrp08RQ50YKmuwG47brZgIVPTvBaaAfQlRlygrRqSrxdCiL9M+LlzLBiJ68IR1QqvzHyjC7g==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
@@ -7004,31 +7365,31 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.35.4",
-        "@img/sharp-darwin-x64": "0.35.4",
-        "@img/sharp-freebsd-wasm32": "0.35.4",
-        "@img/sharp-libvips-darwin-arm64": "1.3.3",
-        "@img/sharp-libvips-darwin-x64": "1.3.3",
-        "@img/sharp-libvips-linux-arm": "1.3.3",
-        "@img/sharp-libvips-linux-arm64": "1.3.3",
-        "@img/sharp-libvips-linux-ppc64": "1.3.3",
-        "@img/sharp-libvips-linux-riscv64": "1.3.3",
-        "@img/sharp-libvips-linux-s390x": "1.3.3",
-        "@img/sharp-libvips-linux-x64": "1.3.3",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.3.3",
-        "@img/sharp-libvips-linuxmusl-x64": "1.3.3",
-        "@img/sharp-linux-arm": "0.35.4",
-        "@img/sharp-linux-arm64": "0.35.4",
-        "@img/sharp-linux-ppc64": "0.35.4",
-        "@img/sharp-linux-riscv64": "0.35.4",
-        "@img/sharp-linux-s390x": "0.35.4",
-        "@img/sharp-linux-x64": "0.35.4",
-        "@img/sharp-linuxmusl-arm64": "0.35.4",
-        "@img/sharp-linuxmusl-x64": "0.35.4",
-        "@img/sharp-webcontainers-wasm32": "0.35.4",
-        "@img/sharp-win32-arm64": "0.35.4",
-        "@img/sharp-win32-ia32": "0.35.4",
-        "@img/sharp-win32-x64": "0.35.4"
+        "@img/sharp-darwin-arm64": "0.35.5",
+        "@img/sharp-darwin-x64": "0.35.5",
+        "@img/sharp-freebsd-wasm32": "0.35.5",
+        "@img/sharp-libvips-darwin-arm64": "1.3.4",
+        "@img/sharp-libvips-darwin-x64": "1.3.4",
+        "@img/sharp-libvips-linux-arm": "1.3.4",
+        "@img/sharp-libvips-linux-arm64": "1.3.4",
+        "@img/sharp-libvips-linux-ppc64": "1.3.4",
+        "@img/sharp-libvips-linux-riscv64": "1.3.4",
+        "@img/sharp-libvips-linux-s390x": "1.3.4",
+        "@img/sharp-libvips-linux-x64": "1.3.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.4",
+        "@img/sharp-linux-arm": "0.35.5",
+        "@img/sharp-linux-arm64": "0.35.5",
+        "@img/sharp-linux-ppc64": "0.35.5",
+        "@img/sharp-linux-riscv64": "0.35.5",
+        "@img/sharp-linux-s390x": "0.35.5",
+        "@img/sharp-linux-x64": "0.35.5",
+        "@img/sharp-linuxmusl-arm64": "0.35.5",
+        "@img/sharp-linuxmusl-x64": "0.35.5",
+        "@img/sharp-webcontainers-wasm32": "0.35.5",
+        "@img/sharp-win32-arm64": "0.35.5",
+        "@img/sharp-win32-ia32": "0.35.5",
+        "@img/sharp-win32-x64": "0.35.5"
       },
       "peerDependenciesMeta": {
         "@types/node": {
@@ -7143,9 +7504,9 @@
       "license": "ISC"
     },
     "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==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
+      "integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -7195,6 +7556,26 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -7308,6 +7689,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -7331,6 +7724,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.4.tgz",
+      "integrity": "sha512-XXWIQt633/EpAFx8aZDOTjBzrCaGmhvEQlQo6MVPfa2OzO2cWo+4hV9h+6UkHYlXGfy+ODXKUdP7Pthmcu5ATw==",
+      "license": "MIT"
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
@@ -8251,6 +8650,12 @@
         }
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -8334,6 +8739,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/which-typed-array": {
       "version": "1.1.19",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
@@ -8383,6 +8794,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
     "node_modules/yallist": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
@@ -8408,6 +8839,93 @@
         "url": "https://github.com/sponsors/eemeli"
       }
     },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 088da63..14dadd8 100644
--- a/package.json
+++ b/package.json
@@ -13,23 +13,38 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "privacy-check": "node scripts/check-privacy.mjs",
-    "verify": "npm run privacy-check && npm run lint && npm run typecheck && npm run test && npm run build"
+    "security-check": "npm audit --omit=dev --audit-level=high",
+    "verify": "npm run security-check && npm run privacy-check && npm run lint && npm run typecheck && npm run test && npm run build"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.11.1",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/merge": "^6.12.2",
+    "@codemirror/search": "^6.7.2",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.14",
     "@contentauth/c2pa-web": "^0.14.4",
+    "@fontsource-variable/inter": "5.3.0",
+    "@lezer/highlight": "^1.2.5",
     "browser-image-compression": "^2.0.2",
     "diff": "^9.0.0",
-    "dompurify": "^3.4.14",
+    "dompurify": "^3.4.17",
     "exif-js": "^2.3.0",
+    "ical.js": "^2.2.1",
+    "jsonc-parser": "^3.3.1",
+    "jsqr": "^1.4.0",
     "jszip": "^3.10.1",
     "marked": "^18.0.11",
-    "next": "16.3.4",
+    "next": "16.4.2",
     "papaparse": "^5.5.3",
     "pdf-lib": "^1.17.1",
     "pdfjs-dist": "^6.3.289",
     "piexifjs": "^1.0.6",
     "postcss-selector-parser": "^7.1.6",
     "qpdf-run": "^0.2.1",
+    "qrcode": "^1.5.4",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-image-crop": "^11.0.10",
@@ -44,11 +59,13 @@
     "@types/node": "^24",
     "@types/papaparse": "^5.3.16",
     "@types/piexifjs": "^1.0.0",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/tinycolor2": "^1.4.6",
+    "@xmldom/xmldom": "^0.9.12",
     "eslint": "^9",
-    "eslint-config-next": "16.3.4",
+    "eslint-config-next": "16.4.2",
     "tailwindcss": "^4",
     "typescript": "^5",
     "vitest": "^4.1.11"
diff --git a/public/sw.js b/public/sw.js
index 0d1fdc8..447436c 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -1,9 +1,14 @@
-const CACHE = 'toolstack-v3';
+const CACHE = 'toolstack-v5';
 const CORE = ['/', '/offline', '/manifest.webmanifest', '/favicon.svg'];
 self.addEventListener('install', event => { event.waitUntil(caches.open(CACHE).then(cache => cache.addAll(CORE))); self.skipWaiting(); });
 self.addEventListener('activate', event => { event.waitUntil(caches.keys().then(keys => Promise.all(keys.filter(key => key !== CACHE).map(key => caches.delete(key))))); self.clients.claim(); });
 self.addEventListener('fetch', event => {
   const request = event.request; if (request.method !== 'GET') return; const url = new URL(request.url); if (url.origin !== self.location.origin) return;
   if (request.mode === 'navigate') { event.respondWith(fetch(request).then(response => { const copy = response.clone(); caches.open(CACHE).then(cache => cache.put(request, copy)); return response; }).catch(async () => (await caches.match(request)) || (await caches.match('/offline')))); return; }
-  if (url.pathname.startsWith('/_next/static/') || url.pathname === '/favicon.svg' || url.pathname === '/manifest.webmanifest') event.respondWith(caches.match(request).then(cached => cached || fetch(request).then(response => { const copy = response.clone(); caches.open(CACHE).then(cache => cache.put(request, copy)); return response; })));
+  if (url.pathname.startsWith('/_next/static/') || url.pathname.startsWith('/qpdf/') || url.pathname.startsWith('/pdfjs/') || url.pathname === '/favicon.svg' || url.pathname === '/manifest.webmanifest') {
+    // Turbopack shares a worker bootstrap URL and selects the worker via its fragment.
+    // A cached Response.url can carry another worker's fragment into WorkerLocation.
+    const preserveWorkerLocation = response => request.destination === 'worker' ? new Response(response.body, { status: response.status, statusText: response.statusText, headers: response.headers }) : response;
+    event.respondWith(caches.match(request).then(cached => cached || fetch(request).then(response => { if (response.ok) { const copy = response.clone(); caches.open(CACHE).then(cache => cache.put(request, copy)); } return response; })).then(preserveWorkerLocation));
+  }
 });
diff --git a/src/app/browser-privacy/page.tsx b/src/app/browser-privacy/page.tsx
index 3cb5b27..3a80904 100644
--- a/src/app/browser-privacy/page.tsx
+++ b/src/app/browser-privacy/page.tsx
@@ -33,9 +33,9 @@ export default function BrowserPrivacyPage() {
   }, []);
 
   return <LocalToolLayout title='Browser Privacy Inspector' description='See common information a webpage can read from your browser. ToolStack does not transmit these results.'>
-    <section className='mx-auto max-w-4xl rounded-xl bg-white p-6 shadow'>
-      <p className='mb-5 rounded border border-sky-200 bg-sky-50 p-3 text-sm text-sky-900'>These values are read locally from browser APIs. The tool intentionally does not create or send a fingerprint.</p>
-      <dl className='grid gap-3 sm:grid-cols-[12rem_1fr]'>{rows.map(([key, value]) => <div key={key} className='contents'><dt className='font-semibold text-slate-700'>{key}</dt><dd className='break-all font-mono text-sm'>{value}</dd></div>)}</dl>
+    <section className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
+      <p className='mb-5 rounded border border-sky-200 dark:border-sky-800 bg-sky-50 dark:bg-sky-950 p-3 text-sm text-sky-900 dark:text-sky-200'>These values are read locally from browser APIs. The tool intentionally does not create or send a fingerprint.</p>
+      <dl className='grid gap-3 sm:grid-cols-[12rem_1fr]'>{rows.map(([key, value]) => <div key={key} className='contents'><dt className='font-semibold text-slate-700 dark:text-slate-200'>{key}</dt><dd className='break-all font-mono text-sm'>{value}</dd></div>)}</dl>
     </section>
   </LocalToolLayout>;
 }
diff --git a/src/app/calendar-privacy/page.tsx b/src/app/calendar-privacy/page.tsx
new file mode 100644
index 0000000..8eae2b9
--- /dev/null
+++ b/src/app/calendar-privacy/page.tsx
@@ -0,0 +1,35 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import LocalToolLayout from '@/components/LocalToolLayout';
+import { downloadLocal } from '@/lib/local-files';
+import type { CalendarResult } from '@/lib/calendar-privacy';
+
+const SAMPLE = ['BEGIN:VCALENDAR','VERSION:2.0','BEGIN:VEVENT','UID:private-meeting@example.com','DTSTART:20260105T090000Z','DTEND:20260105T100000Z','RRULE:FREQ=WEEKLY;COUNT=4','SUMMARY:Confidential customer meeting','LOCATION:Private office','ATTENDEE:mailto:alex@example.com','DESCRIPTION:Do not share this meeting link','END:VEVENT','END:VCALENDAR'].join('\r\n');
+export default function CalendarPrivacyPage() {
+  const [text, setText] = useState(''); const [from, setFrom] = useState(''); const [through, setThrough] = useState(''); const [floating, setFloating] = useState<'utc' | 'local'>('utc');
+  const [result, setResult] = useState<CalendarResult | null>(null); const [error, setError] = useState(''); const [busy, setBusy] = useState(false); const [inputKey, setInputKey] = useState(0);
+  const worker = useRef<Worker | null>(null); const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const stop = () => { worker.current?.terminate(); worker.current = null; if (timer.current) clearTimeout(timer.current); timer.current = null; };
+  useEffect(() => { const now = new Date(); const end = new Date(now.getTime() + 30 * 86400000); queueMicrotask(() => { setFrom(now.toISOString().slice(0,10)); setThrough(end.toISOString().slice(0,10)); }); return () => { worker.current?.terminate(); if (timer.current) clearTimeout(timer.current); }; }, []);
+  const invalidate = () => { stop(); setBusy(false); setResult(null); setError(''); };
+  const build = () => {
+    invalidate();
+    if (!text.trim()) { setError('Open an ICS file or load the example first.'); return; }
+    setBusy(true);
+    try {
+      const next = new Worker(new URL('../../lib/calendar.worker.ts', import.meta.url)); worker.current = next;
+      timer.current = setTimeout(() => { stop(); setBusy(false); setError('Calendar processing took too long. Use a smaller source calendar.'); }, 10000);
+      next.onmessage = (event: MessageEvent<{ result?: CalendarResult; error?: string }>) => { stop(); setBusy(false); if (event.data.error) setError(event.data.error); else if (event.data.result) setResult(event.data.result); };
+      next.onerror = () => { stop(); setBusy(false); setError('The calendar worker could not complete. Reload and try again.'); };
+      next.postMessage({ text, options: { from, through, floating } });
+    } catch { stop(); setBusy(false); setError('This browser could not start the calendar worker.'); }
+  };
+  return <LocalToolLayout title='Calendar Privacy Exporter' description='Turn an exported ICS calendar into a finite busy-time snapshot. Share your availability without sharing meeting names, participants, locations or links.'>
+    <fieldset disabled={busy} className='mx-auto min-w-0 w-full min-w-0 space-y-5' aria-label='Calendar export workspace'>
+      <section className='panel space-y-4'><h2 className='text-lg font-bold'>1. Open a calendar export</h2><label className='block text-sm font-semibold'>ICS calendar file<input key={inputKey} type='file' className='field mt-2' accept='.ics,text/calendar' onChange={async event => { invalidate(); setText(''); const file = event.target.files?.[0]; if (!file) return; if (file.size > 5 * 1024 * 1024) { setError('Use an ICS file up to 5 MB.'); return; } setBusy(true); try { setText(await file.text()); } catch { setError('Could not read the selected file.'); } finally { setBusy(false); } }}/></label><p className='text-sm text-slate-500 dark:text-slate-400'>Export a calendar from your calendar app, then open the downloaded file here. No account connection is needed.</p><div className='flex flex-wrap gap-3'><button className='action action-secondary' onClick={() => { invalidate(); setText(SAMPLE); setFrom('2026-01-01'); setThrough('2026-01-31'); setInputKey(key => key + 1); }}>Load example</button><button className='action action-secondary' onClick={() => { invalidate(); setText(''); setInputKey(key => key + 1); }}>Clear calendar</button></div>{text && <p role='status' className='text-sm text-emerald-700 dark:text-emerald-300'>Calendar loaded in this tab.</p>}</section>
+      <section className='panel space-y-4'><h2 className='text-lg font-bold'>2. Choose a snapshot window</h2><div className='grid gap-4 sm:grid-cols-2'><label className='text-sm font-semibold'>From (UTC date)<input className='field mt-2' type='date' value={from} onChange={event => { invalidate(); setFrom(event.target.value); }}/></label><label className='text-sm font-semibold'>Through (inclusive UTC date)<input className='field mt-2' type='date' value={through} onChange={event => { invalidate(); setThrough(event.target.value); }}/></label></div><label className='block text-sm font-semibold'>Times without a time zone mean<select className='field mt-2' value={floating} onChange={event => { invalidate(); setFloating(event.target.value as 'utc' | 'local'); }}><option value='utc'>UTC</option><option value='local'>This device’s local time zone</option></select></label><p className='note'>Up to 366 days. Recurring events and individual exceptions are expanded into separate Busy events; transparent and cancelled events are excluded. Named time zones need embedded VTIMEZONE definitions. Unsupported recurrence forms stop the export instead of guessing. All-day dates are retained; timed events are exported in UTC.</p><p className='text-sm text-slate-600 dark:text-slate-300'>The output still reveals busy times. It is a static copy, with no future updates or calendar subscription.</p><button className='action' disabled={busy || !text} onClick={build}>{busy ? 'Building snapshot…' : 'Preview private snapshot'}</button></section>
+      {error && <p role='alert' className='note text-red-700 dark:text-red-300'>{error}</p>}
+      {result && <section className='panel space-y-4'><h2 className='text-lg font-bold'>3. Review the exact snapshot</h2><p role='status' className='text-sm text-emerald-700 dark:text-emerald-300'>{result.blocks.length} busy blocks exported. {result.skipped} transparent / cancelled occurrences or non-event components skipped.</p><p className='text-sm'>Rebuilt with new random event IDs. Original calendar names, IDs, titles, attendees, descriptions, locations, attachments, alarms and links are excluded.</p><textarea aria-label='Busy time summary' className='field h-44 font-mono text-xs' readOnly value={result.summary}/><details><summary className='text-sm font-semibold'>Inspect the outgoing ICS file</summary><textarea aria-label='Outgoing ICS file' className='field mt-3 h-64 font-mono text-xs' readOnly value={result.ics}/></details><div className='flex flex-wrap gap-3'><button className='action' onClick={() => downloadLocal(result.ics, 'busy-snapshot.ics', 'text/calendar;charset=utf-8')}>Download busy-time ICS</button><button className='action action-secondary' onClick={() => downloadLocal(result.summary, 'busy-snapshot.txt')}>Download text summary</button></div></section>}
+    </fieldset>
+  </LocalToolLayout>;
+}
diff --git a/src/app/color-converter/page.tsx b/src/app/color-converter/page.tsx
index f533c8f..291106b 100644
--- a/src/app/color-converter/page.tsx
+++ b/src/app/color-converter/page.tsx
@@ -17,10 +17,10 @@ interface ColorInputProps {
 
 const ColorInput = ({ label, value, onChange, prefix, isValid }: ColorInputProps) => (
   <div>
-    <label className='block text-sm font-medium text-slate-600'>{label}</label>
+    <label className='block text-sm font-medium text-slate-600 dark:text-slate-300'>{label}</label>
     <div className='mt-1 flex rounded-md shadow-sm'>
-      {prefix && <span className='inline-flex items-center rounded-l-md border border-r-0 border-slate-300 bg-slate-50 px-3 text-slate-500 sm:text-sm'>{prefix}</span>}
-      <input type='text' value={value} onChange={onChange} className={`block w-full flex-1 rounded-none border p-2 font-mono text-slate-900 ${isValid ? 'border-slate-300' : 'border-red-500'} outline-none transition duration-150 ease-in-out focus:border-sky-500 focus:ring-sky-500 ${prefix ? 'rounded-r-md' : 'rounded-md'}`}/>
+      {prefix && <span className='inline-flex items-center rounded-l-md border border-r-0 border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-950 px-3 text-slate-500 dark:text-slate-400 sm:text-sm'>{prefix}</span>}
+      <input type='text' value={value} onChange={onChange} className={`block w-full flex-1 rounded-none border p-2 font-mono text-slate-900 dark:text-slate-100 ${isValid ? 'border-slate-300 dark:border-slate-700' : 'border-red-500'} outline-none transition duration-150 ease-in-out focus:border-sky-500 focus:ring-sky-500 ${prefix ? 'rounded-r-md' : 'rounded-md'}`}/>
     </div>
   </div>
 );
@@ -69,24 +69,24 @@ export default function ColorConverterPage() {
 
   const colorIsLight = color.isLight();
 
-  return <div className='flex min-h-screen flex-col bg-slate-50'>
+  return <div className='flex min-h-screen flex-col bg-slate-50 dark:bg-slate-950'>
     <Navbar/>
     <Breadcrumbs/>
-    <main className='container mx-auto flex-grow px-4 py-8'>
-      <header className='mb-8 text-center'><h1 className='text-4xl font-bold text-slate-800'>Instant Color Converter</h1><p className='mt-1 text-lg text-slate-600'>Convert between HEX, RGB, and HSL color formats.</p></header>
-      <section className='mx-auto max-w-lg rounded-lg bg-white p-6 shadow-xl md:p-8'>
+    <main id='main-content' className='page-shell flex-grow px-4 py-8'>
+      <header className='mb-8 text-center'><h1 className='text-4xl font-bold text-slate-800 dark:text-slate-100'>Instant Color Converter</h1><p className='mt-1 text-lg text-slate-600 dark:text-slate-300'>Convert between HEX, RGB, and HSL color formats.</p></header>
+      <section className='mx-auto max-w-lg rounded-lg bg-white dark:bg-slate-900 p-6 shadow-xl md:p-8'>
         <div className='relative mb-6 flex h-48 w-full items-center justify-center rounded-lg border transition-colors duration-200 ease-in-out' style={{ backgroundColor: color.toRgbString(), borderColor: color.clone().darken(10).toRgbString() }}>
           <div className={`rounded-md p-4 text-center ${colorIsLight ? 'bg-white/50 text-black' : 'bg-black/50 text-white'}`}><p className='text-lg font-bold'>{color.toHexString().toUpperCase()}</p><p className='text-sm'>{color.toRgbString()}</p></div>
-          <input type='color' value={color.toHexString()} onChange={handlePickerChange} className='absolute right-2 top-2 h-10 w-10 cursor-pointer rounded-md border border-slate-300 bg-white p-1' title='Select a color'/>
+          <input type='color' value={color.toHexString()} onChange={handlePickerChange} className='absolute right-2 top-2 h-10 w-10 cursor-pointer rounded-md border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 p-1' title='Select a color'/>
         </div>
         <div className='space-y-4'>
           <ColorInput label='HEX' value={hexValue} onChange={onHexChange} isValid={tinycolor(hexValue).isValid()}/>
           <ColorInput label='RGB' value={rgbValue} onChange={onRgbChange} isValid={tinycolor(rgbValue).isValid()}/>
           <ColorInput label='HSL' value={hslValue} onChange={onHslChange} isValid={tinycolor(hslValue).isValid()}/>
         </div>
-        <div className='mt-8 border-t pt-4'><h3 className='text-lg font-semibold text-slate-700'>Color Model Explanations</h3><div className='mt-2 space-y-2 text-sm text-slate-600'><p><strong>HEX (Hexadecimal):</strong> A 6-digit code representing Red, Green, and Blue values. It&apos;s compact and widely used in web design.</p><p><strong>RGB (Red, Green, Blue):</strong> Defines a color by the intensity of Red, Green, and Blue, each from 0 to 255. It&apos;s the standard for digital displays.</p><p><strong>HSL (Hue, Saturation, Lightness):</strong> An intuitive model where Hue is the color type, Saturation is the vibrancy, and Lightness is the brightness.</p></div></div>
+        <div className='mt-8 border-t pt-4'><h3 className='text-lg font-semibold text-slate-700 dark:text-slate-200'>Color Model Explanations</h3><div className='mt-2 space-y-2 text-sm text-slate-600 dark:text-slate-300'><p><strong>HEX (Hexadecimal):</strong> A 6-digit code representing Red, Green, and Blue values. It&apos;s compact and widely used in web design.</p><p><strong>RGB (Red, Green, Blue):</strong> Defines a color by the intensity of Red, Green, and Blue, each from 0 to 255. It&apos;s the standard for digital displays.</p><p><strong>HSL (Hue, Saturation, Lightness):</strong> An intuitive model where Hue is the color type, Saturation is the vibrancy, and Lightness is the brightness.</p></div></div>
       </section>
-      <div className='mt-12 text-center'><Link href='/' className='text-sky-600 hover:text-sky-800 hover:underline'>&larr; Back to All Tools</Link></div>
+      <div className='mt-12 text-center'><Link href='/' className='text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200 hover:underline'>&larr; Back to All Tools</Link></div>
     </main>
     <Footer/>
   </div>;
diff --git a/src/app/content-credentials/page.tsx b/src/app/content-credentials/page.tsx
index 7e9641c..e0a45cb 100644
--- a/src/app/content-credentials/page.tsx
+++ b/src/app/content-credentials/page.tsx
@@ -14,5 +14,5 @@ export default function ContentCredentialsPage() {
     catch (err) { setStatus(`Could not inspect this file: ${(err as Error).message}`); }
     finally { try { if (reader) await Promise.resolve(reader.free()); } finally { if (c2pa) await Promise.resolve(c2pa.dispose()); setBusy(false); } }
   };
-  return <LocalToolLayout title='Content Credentials Inspector' description='Inspect embedded C2PA Content Credentials locally using bundled inline WebAssembly. This tool reads provenance metadata; it does not upload the asset or claim that every signer is trusted.'><section className='mx-auto max-w-5xl rounded-xl bg-white p-6 shadow'><input type='file' onChange={event => event.target.files?.[0] && void inspect(event.target.files[0])} className='w-full rounded border p-3'/>{file && <p className='mt-3 text-sm text-slate-600'>{file.name} · {file.type || 'unknown MIME type'} · {(file.size / 1024).toFixed(1)} KB</p>}<p className={`mt-4 ${result ? 'text-emerald-700' : 'text-slate-600'}`} aria-live='polite'>{busy ? 'Inspecting locally...' : status}</p>{result && <div className='mt-6 grid gap-4 lg:grid-cols-2'><div><h2 className='mb-2 font-semibold'>Active manifest</h2><pre className='max-h-[34rem] overflow-auto whitespace-pre-wrap rounded bg-slate-950 p-4 text-xs text-slate-100'>{JSON.stringify(result.active, null, 2)}</pre></div><div><h2 className='mb-2 font-semibold'>Manifest store</h2><pre className='max-h-[34rem] overflow-auto whitespace-pre-wrap rounded bg-slate-950 p-4 text-xs text-slate-100'>{JSON.stringify(result.store, null, 2)}</pre></div></div>}<div className='mt-6 rounded bg-slate-50 p-4 text-sm text-slate-600'>The SDK is bundled with ToolStack and uses its inline WASM build, so this inspector does not need a CDN or a separate WASM request. Trust interpretation can depend on external trust lists, so this page focuses on reading the embedded provenance data rather than making a blanket authenticity claim.</div></section></LocalToolLayout>;
+  return <LocalToolLayout title='Content Credentials Inspector' description='Inspect embedded C2PA Content Credentials locally using bundled inline WebAssembly. This tool reads provenance metadata; it does not upload the asset or claim that every signer is trusted.'><section className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'><input type='file' onChange={event => event.target.files?.[0] && void inspect(event.target.files[0])} className='w-full rounded border p-3'/>{file && <p className='mt-3 text-sm text-slate-600 dark:text-slate-300'>{file.name} · {file.type || 'unknown MIME type'} · {(file.size / 1024).toFixed(1)} KB</p>}<p className={`mt-4 ${result ? 'text-emerald-700 dark:text-emerald-300' : 'text-slate-600 dark:text-slate-300'}`} aria-live='polite'>{busy ? 'Inspecting locally...' : status}</p>{result && <div className='mt-6 grid gap-4 lg:grid-cols-2'><div><h2 className='mb-2 font-semibold'>Active manifest</h2><pre className='max-h-[34rem] overflow-auto whitespace-pre-wrap rounded bg-slate-950 p-4 text-xs text-slate-100'>{JSON.stringify(result.active, null, 2)}</pre></div><div><h2 className='mb-2 font-semibold'>Manifest store</h2><pre className='max-h-[34rem] overflow-auto whitespace-pre-wrap rounded bg-slate-950 p-4 text-xs text-slate-100'>{JSON.stringify(result.store, null, 2)}</pre></div></div>}<div className='mt-6 rounded bg-slate-50 dark:bg-slate-950 p-4 text-sm text-slate-600 dark:text-slate-300'>The SDK is bundled with ToolStack and uses its inline WASM build, so this inspector does not need a CDN or a separate WASM request. Trust interpretation can depend on external trust lists, so this page focuses on reading the embedded provenance data rather than making a blanket authenticity claim.</div></section></LocalToolLayout>;
 }
diff --git a/src/app/contrast-checker/page.tsx b/src/app/contrast-checker/page.tsx
index 1786ce1..82a8a9c 100644
--- a/src/app/contrast-checker/page.tsx
+++ b/src/app/contrast-checker/page.tsx
@@ -19,13 +19,13 @@ const ColorInput = ({ label, value, onChange }: ColorInputProps) => {
   const colorObj = tinycolor(value);
   return (
     <div>
-      <label className='block text-sm font-medium text-slate-600 mb-1'>{label}</label>
+      <label className='block text-sm font-medium text-slate-600 dark:text-slate-300 mb-1'>{label}</label>
       <div className='flex items-center rounded-md shadow-sm'>
         <input
           type='text'
           value={value}
           onChange={(e) => onChange(e.target.value)}
-          className={`block w-full p-2 border border-slate-300 rounded-l-md focus:ring-sky-500 focus:border-sky-500 outline-none transition duration-150 ease-in-out ${
+          className={`block w-full p-2 border border-slate-300 dark:border-slate-700 rounded-l-md focus:ring-sky-500 focus:border-sky-500 outline-none transition duration-150 ease-in-out ${
             !colorObj.isValid() ? 'border-red-500' : ''
           }`}
         />
@@ -33,7 +33,7 @@ const ColorInput = ({ label, value, onChange }: ColorInputProps) => {
           type='color'
           value={colorObj.toHexString()}
           onChange={(e) => onChange(e.target.value)}
-          className='h-10 w-12 p-1 border border-l-0 border-slate-300 rounded-r-md cursor-pointer bg-white'
+          className='h-10 w-12 p-1 border border-l-0 border-slate-300 dark:border-slate-700 rounded-r-md cursor-pointer bg-white dark:bg-slate-900'
         />
       </div>
     </div>
@@ -42,14 +42,14 @@ const ColorInput = ({ label, value, onChange }: ColorInputProps) => {
 
 // A component to display the result of a single contrast check
 const ResultRow = ({ label, ratio, passes }: { label: string; ratio: string; passes: boolean }) => (
-  <div className={`p-3 rounded-lg flex justify-between items-center ${passes ? 'bg-green-100' : 'bg-red-100'}`}>
+  <div className={`p-3 rounded-lg flex justify-between items-center ${passes ? 'bg-green-100 dark:bg-green-900' : 'bg-red-100 dark:bg-red-900'}`}>
     <div>
-      <p className={`font-semibold ${passes ? 'text-green-800' : 'text-red-800'}`}>{label}</p>
-      <p className={`text-xs ${passes ? 'text-green-600' : 'text-red-600'}`}>Required ratio: {ratio}</p>
+      <p className={`font-semibold ${passes ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200'}`}>{label}</p>
+      <p className={`text-xs ${passes ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>Required ratio: {ratio}</p>
     </div>
     <span
       className={`px-3 py-1 text-sm font-bold rounded-full ${
-        passes ? 'bg-green-200 text-green-800' : 'bg-red-200 text-red-800'
+        passes ? 'bg-green-200 dark:bg-green-900 text-green-800 dark:text-green-200' : 'bg-red-200 dark:bg-red-900 text-red-800 dark:text-red-200'
       }`}>
       {passes ? 'Pass' : 'Fail'}
     </span>
@@ -72,18 +72,18 @@ export default function ContrastCheckerPage() {
   }, [textColor, bgColor]);
 
   return (
-    <div className='flex flex-col min-h-screen bg-slate-50'>
+    <div className='flex flex-col min-h-screen bg-slate-50 dark:bg-slate-950'>
       <Navbar />
       <Breadcrumbs />
-      <main className='flex-grow container mx-auto px-4 py-8'>
+      <main id='main-content' className='flex-grow page-shell px-4 py-8'>
         <header className='mb-8 text-center'>
-          <h1 className='text-4xl font-bold text-slate-800'>Text Contrast Checker</h1>
-          <p className='text-lg text-slate-600 mt-1'>
+          <h1 className='text-4xl font-bold text-slate-800 dark:text-slate-100'>Text Contrast Checker</h1>
+          <p className='text-lg text-slate-600 dark:text-slate-300 mt-1'>
             Check if your color combinations meet WCAG accessibility standards.
           </p>
         </header>
 
-        <section className='grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto'>
+        <section className='grid grid-cols-1 md:grid-cols-2 gap-8 w-full min-w-0 mx-auto'>
           {/* Left Side: Inputs and Preview */}
           <div className='space-y-6'>
             <ColorInput label='Text Color' value={textColor} onChange={setTextColor} />
@@ -101,9 +101,9 @@ export default function ContrastCheckerPage() {
           </div>
 
           {/* Right Side: Results */}
-          <div className='bg-white p-6 rounded-lg shadow-sm'>
-            <h2 className='text-xl font-semibold text-slate-700 mb-4 text-center'>Contrast Ratio</h2>
-            <p className='text-6xl font-bold text-slate-800 text-center mb-6'>{contrast}</p>
+          <div className='bg-white dark:bg-slate-900 p-6 rounded-lg shadow-sm'>
+            <h2 className='text-xl font-semibold text-slate-700 dark:text-slate-200 mb-4 text-center'>Contrast Ratio</h2>
+            <p className='text-6xl font-bold text-slate-800 dark:text-slate-100 text-center mb-6'>{contrast}</p>
             <div className='space-y-3'>
               <ResultRow label='Normal Text (AA)' ratio='4.5:1' passes={aa_normal} />
               <ResultRow label='Large Text (AA)' ratio='3:1' passes={aa_large} />
@@ -114,7 +114,7 @@ export default function ContrastCheckerPage() {
         </section>
 
         <div className='mt-12 text-center'>
-          <Link href='/' className='text-sky-600 hover:text-sky-800 hover:underline'>
+          <Link href='/' className='text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200 hover:underline'>
             &larr; Back to All Tools
           </Link>
         </div>
diff --git a/src/app/cron-explainer/page.tsx b/src/app/cron-explainer/page.tsx
index 59007f4..c87f5c1 100644
--- a/src/app/cron-explainer/page.tsx
+++ b/src/app/cron-explainer/page.tsx
@@ -4,5 +4,5 @@ import LocalToolLayout from '@/components/LocalToolLayout';
 import { explainCron } from '@/lib/cron';
 export default function CronExplainerPage() {
   const [expression, setExpression] = useState('*/15 9-17 * * 1-5'); const result = useMemo(() => { try { return { rows: explainCron(expression), error: '' }; } catch (err) { return { rows: [], error: (err as Error).message }; } }, [expression]);
-  return <LocalToolLayout title='Cron Expression Explainer' description='Explain standard five-field cron expressions locally. This tool intentionally does not assume Quartz or platform-specific seconds fields.'><section className='mx-auto max-w-3xl rounded-xl bg-white p-6 shadow'><label className='font-semibold'>Cron expression<input value={expression} onChange={event => setExpression(event.target.value)} className='mt-2 w-full rounded border p-3 font-mono text-lg'/></label><p className='mt-2 text-xs text-slate-500'>minute · hour · day of month · month · day of week</p>{result.error ? <p className='mt-5 rounded bg-red-50 p-3 text-red-700'>{result.error}</p> : <div className='mt-6 space-y-3'>{result.rows.map(row => <div key={row.field} className='grid gap-1 rounded border p-3 sm:grid-cols-[9rem_7rem_1fr]'><strong className='capitalize'>{row.field}</strong><code>{row.raw}</code><span className='text-slate-600'>{row.explanation}</span></div>)}</div>}<div className='mt-6 rounded bg-slate-50 p-4 text-sm text-slate-600'>Supported syntax: `*`, `*/step`, numeric values, numeric ranges, and comma-separated combinations.</div></section></LocalToolLayout>;
+  return <LocalToolLayout title='Cron Expression Explainer' description='Explain standard five-field cron expressions locally. This tool intentionally does not assume Quartz or platform-specific seconds fields.'><section className='mx-auto max-w-3xl rounded-xl bg-white dark:bg-slate-900 p-6 shadow'><label className='font-semibold'>Cron expression<input value={expression} onChange={event => setExpression(event.target.value)} className='mt-2 w-full rounded border p-3 font-mono text-lg'/></label><p className='mt-2 text-xs text-slate-500 dark:text-slate-400'>minute · hour · day of month · month · day of week</p>{result.error ? <p className='mt-5 rounded bg-red-50 dark:bg-red-950 p-3 text-red-700 dark:text-red-300'>{result.error}</p> : <div className='mt-6 space-y-3'>{result.rows.map(row => <div key={row.field} className='grid gap-1 rounded border p-3 sm:grid-cols-[9rem_7rem_1fr]'><strong className='capitalize'>{row.field}</strong><code>{row.raw}</code><span className='text-slate-600 dark:text-slate-300'>{row.explanation}</span></div>)}</div>}<div className='mt-6 rounded bg-slate-50 dark:bg-slate-950 p-4 text-sm text-slate-600 dark:text-slate-300'>Supported syntax: `*`, `*/step`, numeric values, numeric ranges, and comma-separated combinations.</div></section></LocalToolLayout>;
 }
diff --git a/src/app/csp-builder/page.tsx b/src/app/csp-builder/page.tsx
index 97ef49a..b366034 100644
--- a/src/app/csp-builder/page.tsx
+++ b/src/app/csp-builder/page.tsx
@@ -7,5 +7,5 @@ const STRICT = "default-src 'self'; img-src 'self' data: blob:; style-src 'self'
 const APP = "default-src 'self'; img-src 'self' data: blob:; media-src 'self' blob:; style-src 'self' 'unsafe-inline'; script-src 'self'; worker-src 'self' blob:; connect-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'";
 export default function CspBuilderPage() {
   const [policy, setPolicy] = useState(STRICT); const findings = useMemo(() => analyzeCsp(policy), [policy]);
-  return <LocalToolLayout title='Content Security Policy Builder & Analyzer' description='Draft and review a CSP locally. The analyzer flags common weakening patterns but does not replace application-specific security review.'><section className='mx-auto max-w-5xl rounded-xl bg-white p-6 shadow'><div className='flex flex-wrap gap-2'><button onClick={() => setPolicy(STRICT)} className='rounded bg-sky-600 px-4 py-2 text-white'>Strict static preset</button><button onClick={() => setPolicy(APP)} className='rounded bg-slate-200 px-4 py-2 text-slate-800'>Interactive app preset</button></div><label className='mt-5 block font-semibold'>Policy<textarea value={policy} onChange={event => setPolicy(event.target.value)} className='mt-2 h-48 w-full rounded border p-3 font-mono text-sm'/></label><div className='mt-6'><h2 className='font-semibold'>Analysis</h2><div className='mt-3 space-y-2'>{findings.map((finding, index) => <div key={`${finding.message}-${index}`} className={`rounded p-3 text-sm ${finding.level === 'warning' ? 'bg-amber-50 text-amber-900' : 'bg-slate-50 text-slate-700'}`}>{finding.message}</div>)}</div></div><button onClick={() => navigator.clipboard.writeText(policy)} className='mt-5 rounded bg-slate-800 px-4 py-2 text-white'>Copy policy</button></section></LocalToolLayout>;
+  return <LocalToolLayout title='Content Security Policy Builder & Analyzer' description='Draft and review a CSP locally. The analyzer flags common weakening patterns but does not replace application-specific security review.'><section className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'><div className='flex flex-wrap gap-2'><button onClick={() => setPolicy(STRICT)} className='rounded bg-sky-600 px-4 py-2 text-white'>Strict static preset</button><button onClick={() => setPolicy(APP)} className='rounded bg-slate-200 dark:bg-slate-700 px-4 py-2 text-slate-800 dark:text-slate-100'>Interactive app preset</button></div><label className='mt-5 block font-semibold'>Policy<textarea value={policy} onChange={event => setPolicy(event.target.value)} className='mt-2 h-48 w-full rounded border p-3 font-mono text-sm'/></label><div className='mt-6'><h2 className='font-semibold'>Analysis</h2><div className='mt-3 space-y-2'>{findings.map((finding, index) => <div key={`${finding.message}-${index}`} className={`rounded p-3 text-sm ${finding.level === 'warning' ? 'bg-amber-50 dark:bg-amber-950 text-amber-900 dark:text-amber-200' : 'bg-slate-50 dark:bg-slate-950 text-slate-700 dark:text-slate-200'}`}>{finding.message}</div>)}</div></div><button onClick={() => navigator.clipboard.writeText(policy)} className='mt-5 rounded bg-slate-800 px-4 py-2 text-white'>Copy policy</button></section></LocalToolLayout>;
 }
diff --git a/src/app/css-specificity-calculator/page.tsx b/src/app/css-specificity-calculator/page.tsx
index 91ec248..afc70fb 100644
--- a/src/app/css-specificity-calculator/page.tsx
+++ b/src/app/css-specificity-calculator/page.tsx
@@ -11,10 +11,10 @@ export default function CssSpecificityCalculatorPage() {
   }, [selector]);
 
   return <LocalToolLayout title='CSS Specificity Calculator' description='Calculate selector specificity with an AST-based parser, including the special rules for :where(), :is(), :not() and :has().'>
-    <section className='mx-auto max-w-4xl rounded-xl bg-white p-6 shadow'>
+    <section className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
       <label htmlFor='selector' className='font-semibold'>CSS selector</label><textarea id='selector' value={selector} onChange={e => setSelector(e.target.value)} className='mt-2 h-28 w-full rounded border p-3 font-mono'/>
-      {result.error ? <p className='mt-4 rounded bg-red-50 p-3 text-red-700'>{result.error}</p> : <div className='mt-6 space-y-4'>{result.rows.map((row, index) => <div key={`${row.selector}-${index}`} className='rounded-lg border p-4'><div className='flex flex-wrap items-center justify-between gap-3'><code className='break-all text-sm'>{row.selector}</code><strong className='rounded-full bg-sky-50 px-3 py-1 font-mono text-sky-700'>{specificityLabel(row.specificity)}</strong></div><div className='mt-3 grid grid-cols-3 gap-2 text-center text-sm'><div className='rounded bg-red-50 p-2'><strong>{row.specificity[0]}</strong><div>IDs</div></div><div className='rounded bg-sky-50 p-2'><strong>{row.specificity[1]}</strong><div>Classes / attributes / pseudo-classes</div></div><div className='rounded bg-emerald-50 p-2'><strong>{row.specificity[2]}</strong><div>Elements / pseudo-elements</div></div></div></div>)}</div>}
-      <div className='mt-6 rounded-lg bg-slate-50 p-4 text-sm text-slate-600'><strong>Modern selector rules:</strong> `:where()` contributes zero specificity. `:is()`, `:not()` and `:has()` contribute the highest specificity of their selector-list arguments rather than adding a pseudo-class point themselves.</div>
+      {result.error ? <p className='mt-4 rounded bg-red-50 dark:bg-red-950 p-3 text-red-700 dark:text-red-300'>{result.error}</p> : <div className='mt-6 space-y-4'>{result.rows.map((row, index) => <div key={`${row.selector}-${index}`} className='rounded-lg border p-4'><div className='flex flex-wrap items-center justify-between gap-3'><code className='break-all text-sm'>{row.selector}</code><strong className='rounded-full bg-sky-50 dark:bg-sky-950 px-3 py-1 font-mono text-sky-700 dark:text-sky-300'>{specificityLabel(row.specificity)}</strong></div><div className='mt-3 grid grid-cols-3 gap-2 text-center text-sm'><div className='rounded bg-red-50 dark:bg-red-950 p-2'><strong>{row.specificity[0]}</strong><div>IDs</div></div><div className='rounded bg-sky-50 dark:bg-sky-950 p-2'><strong>{row.specificity[1]}</strong><div>Classes / attributes / pseudo-classes</div></div><div className='rounded bg-emerald-50 dark:bg-emerald-950 p-2'><strong>{row.specificity[2]}</strong><div>Elements / pseudo-elements</div></div></div></div>)}</div>}
+      <div className='mt-6 rounded-lg bg-slate-50 dark:bg-slate-950 p-4 text-sm text-slate-600 dark:text-slate-300'><strong>Modern selector rules:</strong> `:where()` contributes zero specificity. `:is()`, `:not()` and `:has()` contribute the highest specificity of their selector-list arguments rather than adding a pseudo-class point themselves.</div>
     </section>
   </LocalToolLayout>;
 }
diff --git a/src/app/csv-converter/page.tsx b/src/app/csv-converter/page.tsx
index 00fa16f..6ba7f7a 100644
--- a/src/app/csv-converter/page.tsx
+++ b/src/app/csv-converter/page.tsx
@@ -6,4 +6,4 @@ import LocalToolLayout from '@/components/LocalToolLayout';
 const escapeXml=(value:unknown)=>String(value??'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&apos;');
 const xmlName=(name:string,index:number)=>{const cleaned=name.trim().replace(/[^A-Za-z0-9_.-]/g,'_').replace(/^[^A-Za-z_]+/,'');return cleaned||`field_${index+1}`};
 function toXml(rows:Record<string,unknown>[]){const lines=['<?xml version="1.0" encoding="UTF-8"?>','<root>'];for(const row of rows){lines.push('  <item>');Object.entries(row).forEach(([key,value],i)=>{const tag=xmlName(key,i);lines.push(`    <${tag}>${escapeXml(value)}</${tag}>`)});lines.push('  </item>')}lines.push('</root>');return lines.join('\n')}
-export default function CsvConverterPage(){const [csv,setCsv]=useState('Year,Make,Model\n1997,Ford,E350\n2000,Mercury,Cougar');const [tab,setTab]=useState<'json'|'xml'>('json');const parsed=useMemo(()=>Papa.parse<Record<string,unknown>>(csv,{header:true,skipEmptyLines:true}),[csv]);const json=useMemo(()=>JSON.stringify(parsed.data,null,2),[parsed.data]);const xml=useMemo(()=>toXml(parsed.data),[parsed.data]);const output=tab==='json'?json:xml;return <LocalToolLayout title='CSV to JSON/XML Converter' description='Convert CSV to structured JSON or well-formed XML locally. XML values are escaped and column names are normalized for valid element names.'><section className='mx-auto max-w-7xl rounded-xl bg-white p-6 shadow'><div className='mb-4 flex gap-2'><button onClick={()=>setTab('json')} className={`rounded px-4 py-2 ${tab==='json'?'bg-sky-600 text-white':'bg-slate-100'}`}>JSON</button><button onClick={()=>setTab('xml')} className={`rounded px-4 py-2 ${tab==='xml'?'bg-sky-600 text-white':'bg-slate-100'}`}>XML</button></div><div className='grid gap-4 md:grid-cols-2'><textarea value={csv} onChange={e=>setCsv(e.target.value)} className='h-96 rounded border p-4 font-mono'/><pre className='h-96 overflow-auto whitespace-pre-wrap rounded border bg-slate-50 p-4 font-mono text-sm'>{output}</pre></div>{parsed.errors.length>0&&<div className='mt-4 rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900'>{parsed.errors.slice(0,5).map((e,i)=><div key={i}>Row {e.row??'?'}: {e.message}</div>)}</div>}<button onClick={()=>navigator.clipboard.writeText(output)} className='mt-4 rounded bg-slate-800 px-4 py-2 text-white'>Copy {tab.toUpperCase()}</button></section></LocalToolLayout>}
+export default function CsvConverterPage(){const [csv,setCsv]=useState('Year,Make,Model\n1997,Ford,E350\n2000,Mercury,Cougar');const [tab,setTab]=useState<'json'|'xml'>('json');const parsed=useMemo(()=>Papa.parse<Record<string,unknown>>(csv,{header:true,skipEmptyLines:true}),[csv]);const json=useMemo(()=>JSON.stringify(parsed.data,null,2),[parsed.data]);const xml=useMemo(()=>toXml(parsed.data),[parsed.data]);const output=tab==='json'?json:xml;return <LocalToolLayout title='CSV to JSON/XML Converter' description='Convert CSV to structured JSON or well-formed XML locally. XML values are escaped and column names are normalized for valid element names.'><section className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'><div className='mb-4 flex gap-2'><button onClick={()=>setTab('json')} className={`rounded px-4 py-2 ${tab==='json'?'bg-sky-600 text-white':'bg-slate-100 dark:bg-slate-800'}`}>JSON</button><button onClick={()=>setTab('xml')} className={`rounded px-4 py-2 ${tab==='xml'?'bg-sky-600 text-white':'bg-slate-100 dark:bg-slate-800'}`}>XML</button></div><div className='grid gap-4 md:grid-cols-2'><textarea value={csv} onChange={e=>setCsv(e.target.value)} className='h-96 rounded border p-4 font-mono'/><pre className='h-96 overflow-auto whitespace-pre-wrap rounded border bg-slate-50 dark:bg-slate-950 p-4 font-mono text-sm'>{output}</pre></div>{parsed.errors.length>0&&<div className='mt-4 rounded border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950 p-3 text-sm text-amber-900 dark:text-amber-200'>{parsed.errors.slice(0,5).map((e,i)=><div key={i}>Row {e.row??'?'}: {e.message}</div>)}</div>}<button onClick={()=>navigator.clipboard.writeText(output)} className='mt-4 rounded bg-slate-800 px-4 py-2 text-white'>Copy {tab.toUpperCase()}</button></section></LocalToolLayout>}
diff --git a/src/app/data-anonymizer/page.tsx b/src/app/data-anonymizer/page.tsx
index 3085135..0d016e7 100644
--- a/src/app/data-anonymizer/page.tsx
+++ b/src/app/data-anonymizer/page.tsx
@@ -2,39 +2,11 @@
 import { useEffect, useMemo, useState } from 'react';
 import LocalToolLayout from '@/components/LocalToolLayout';
 import { runRegexReplace } from '@/lib/regex-worker';
+import DatasetMasker from '@/components/DatasetMasker';
+import { applyStandard, DEFAULT_ACTIVE, RULES, type RuleKey } from '@/lib/text-redaction';
 
 const SAMPLE_TEXT = `From: user@example.com\nUser 550e8400-e29b-41d4-a716-446655440000 with IP 192.168.1.1 accessed the server.\nDevice: 00:1A:2B:3C:4D:5E\nFor support, call +1 (555) 123-4567.\nCard: 4111 1111 1111 1111\nProject ID: PROJ-12345`;
 
-const RULES = {
-  email: { label: 'Email addresses', regex: /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g, replacement: '[REDACTED_EMAIL]' },
-  phone: { label: 'Phone numbers (common NANP formats)', regex: /(\+\d{1,2}\s?)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}/g, replacement: '[REDACTED_PHONE]' },
-  ipv4: { label: 'IPv4 addresses', regex: /(?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d)/g, replacement: '[REDACTED_IP]' },
-  uuid: { label: 'UUIDs', regex: /\b[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}\b/gi, replacement: '[REDACTED_UUID]' },
-  mac: { label: 'MAC addresses', regex: /\b(?:[0-9A-F]{2}[:-]){5}[0-9A-F]{2}\b/gi, replacement: '[REDACTED_MAC]' },
-} as const;
-type RuleKey = keyof typeof RULES;
-const DEFAULT_ACTIVE: Record<RuleKey, boolean> = { email: true, phone: true, ipv4: true, uuid: true, mac: true };
-
-function luhn(value: string) {
-  const digits = value.replace(/\D/g, '');
-  if (digits.length < 13 || digits.length > 19) return false;
-  let sum = 0;
-  let double = false;
-  for (let i = digits.length - 1; i >= 0; i--) {
-    let digit = Number(digits[i]);
-    if (double) { digit *= 2; if (digit > 9) digit -= 9; }
-    sum += digit;
-    double = !double;
-  }
-  return sum % 10 === 0;
-}
-
-function applyStandard(input: string, active: Record<RuleKey, boolean>, cards: boolean) {
-  let output = input;
-  (Object.keys(RULES) as RuleKey[]).forEach(key => { if (active[key]) output = output.replace(RULES[key].regex, RULES[key].replacement); });
-  if (cards) output = output.replace(/\b(?:\d[ -]*?){13,19}\b/g, match => luhn(match) ? '[REDACTED_PAYMENT_CARD]' : match);
-  return output;
-}
 
 function parseCustom(value: string) {
   if (value.startsWith('/') && value.lastIndexOf('/') > 0) {
@@ -47,13 +19,14 @@ function parseCustom(value: string) {
 const INITIAL_OUTPUT = applyStandard(SAMPLE_TEXT, DEFAULT_ACTIVE, true).replace(/PROJ-\d+/g, '[PROJECT_ID]');
 
 export default function DataAnonymizerPage() {
+  const [mode, setMode] = useState<'text' | 'datasets'>('text');
   const [input, setInput] = useState(SAMPLE_TEXT);
   const [active, setActive] = useState<Record<RuleKey, boolean>>(DEFAULT_ACTIVE);
   const [cards, setCards] = useState(true);
   const [customEnabled, setCustomEnabled] = useState(true);
   const [customFind, setCustomFind] = useState('PROJ-\\d+');
   const [customReplace, setCustomReplace] = useState('[PROJECT_ID]');
-  const [output, setOutput] = useState(INITIAL_OUTPUT);
+  const [output, setOutput] = useState({ value: INITIAL_OUTPUT, source: applyStandard(SAMPLE_TEXT, DEFAULT_ACTIVE, true), pattern: 'PROJ-\\d+', replacement: '[PROJECT_ID]' });
   const [customError, setCustomError] = useState('');
   const baseOutput = useMemo(() => applyStandard(input, active, cards), [input, active, cards]);
 
@@ -64,24 +37,28 @@ export default function DataAnonymizerPage() {
       try {
         const { pattern, flags } = parseCustom(customFind);
         const result = await runRegexReplace(pattern, flags, baseOutput, customReplace);
-        if (!cancelled) { setOutput(result); setCustomError(''); }
+        if (!cancelled) { setOutput({ value: result, source: baseOutput, pattern: customFind, replacement: customReplace }); setCustomError(''); }
       } catch (err) {
-        if (!cancelled) { setOutput(baseOutput); setCustomError((err as Error).message); }
+        if (!cancelled) { setCustomError((err as Error).message); }
       }
     }, 120);
     return () => { cancelled = true; window.clearTimeout(timer); };
   }, [baseOutput, customEnabled, customFind, customReplace]);
 
-  const displayedOutput = customEnabled && customFind ? output : baseOutput;
+  const currentOutput = output.source === baseOutput && output.pattern === customFind && output.replacement === customReplace;
+  const displayedOutput = customEnabled && customFind ? (currentOutput ? output.value : '') : baseOutput;
   const displayedError = customEnabled && customFind ? customError : '';
 
-  return <LocalToolLayout title='Data Anonymizer' description='Redact common sensitive-looking values before sharing text. Detection is local and intentionally described as best-effort, not complete PII discovery.'>
-    <div className='mx-auto max-w-7xl space-y-6'>
-      <div className='grid gap-4 md:grid-cols-2'><label className='font-semibold'>Original text<textarea value={input} onChange={e => setInput(e.target.value)} className='mt-2 h-80 w-full rounded border p-4 font-mono'/></label><label className='font-semibold'>Scrubbed text<textarea readOnly value={displayedOutput} className='mt-2 h-80 w-full rounded border bg-slate-50 p-4 font-mono'/></label></div>
-      <section className='rounded-xl bg-white p-6 shadow'><h2 className='text-lg font-semibold'>Detection presets</h2><div className='mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3'>{(Object.keys(RULES) as RuleKey[]).map(key => <label key={key} className='flex items-start gap-2 text-sm'><input type='checkbox' checked={active[key]} onChange={() => setActive(prev => ({ ...prev, [key]: !prev[key] }))}/><span>{RULES[key].label}</span></label>)}<label className='flex items-start gap-2 text-sm'><input type='checkbox' checked={cards} onChange={e => setCards(e.target.checked)}/><span>Payment-card-like numbers (Luhn-valid only)</span></label></div>
-        <div className='mt-6 border-t pt-5'><label className='flex gap-2 font-medium'><input type='checkbox' checked={customEnabled} onChange={e => setCustomEnabled(e.target.checked)}/>Custom regex rule</label><div className='mt-3 grid gap-3 sm:grid-cols-2'><input aria-label='Custom regex' disabled={!customEnabled} value={customFind} onChange={e => setCustomFind(e.target.value)} className='rounded border p-2 font-mono'/><input aria-label='Custom replacement' disabled={!customEnabled} value={customReplace} onChange={e => setCustomReplace(e.target.value)} className='rounded border p-2 font-mono'/></div>{displayedError && <p className='mt-2 text-sm text-red-600' aria-live='polite'>{displayedError}</p>}</div>
-        <div className='mt-5 flex flex-wrap gap-3'><button onClick={() => navigator.clipboard.writeText(displayedOutput)} className='rounded bg-slate-800 px-4 py-2 text-white'>Copy scrubbed text</button></div><p className='mt-4 text-xs text-slate-500'>False positives and false negatives are possible. Review the result before relying on it.</p>
+  return <LocalToolLayout title='Data Anonymizer' description='Scrub sensitive-looking text or mask linked CSV / JSON datasets with consistent aliases. Everything is processed locally.'>
+    <div className='mx-auto w-full min-w-0 space-y-6'>
+      <div className='flex gap-2' aria-label='Anonymizer mode'><button aria-pressed={mode === 'text'} onClick={() => setMode('text')} className={`action ${mode === 'text' ? '' : 'action-secondary'}`}>Text redaction</button><button aria-pressed={mode === 'datasets'} onClick={() => setMode('datasets')} className={`action ${mode === 'datasets' ? '' : 'action-secondary'}`}>CSV / JSON datasets</button></div>
+      {mode === 'datasets' ? <DatasetMasker/> : <>
+      <div className='grid gap-4 md:grid-cols-2'><label className='font-semibold'>Original text<textarea value={input} onChange={e => setInput(e.target.value)} className='mt-2 h-80 w-full rounded border p-4 font-mono'/></label><label className='font-semibold'>Scrubbed text<textarea readOnly value={displayedOutput} className='mt-2 h-80 w-full rounded border bg-slate-50 dark:bg-slate-950 p-4 font-mono'/></label></div>
+      <section className='rounded-xl bg-white dark:bg-slate-900 p-6 shadow'><h2 className='text-lg font-semibold'>Detection presets</h2><div className='mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3'>{(Object.keys(RULES) as RuleKey[]).map(key => <label key={key} className='flex items-start gap-2 text-sm'><input type='checkbox' checked={active[key]} onChange={() => setActive(prev => ({ ...prev, [key]: !prev[key] }))}/><span>{RULES[key].label}</span></label>)}<label className='flex items-start gap-2 text-sm'><input type='checkbox' checked={cards} onChange={e => setCards(e.target.checked)}/><span>Payment-card-like numbers (Luhn-valid only)</span></label></div>
+        <div className='mt-6 border-t pt-5'><label className='flex gap-2 font-medium'><input type='checkbox' checked={customEnabled} onChange={e => setCustomEnabled(e.target.checked)}/>Custom regex rule</label><div className='mt-3 grid gap-3 sm:grid-cols-2'><input aria-label='Custom regex' disabled={!customEnabled} value={customFind} onChange={e => setCustomFind(e.target.value)} className='rounded border p-2 font-mono'/><input aria-label='Custom replacement' disabled={!customEnabled} value={customReplace} onChange={e => setCustomReplace(e.target.value)} className='rounded border p-2 font-mono'/></div>{displayedError && <p className='mt-2 text-sm text-red-600 dark:text-red-400' aria-live='polite'>{displayedError}</p>}</div>
+        <div className='mt-5 flex flex-wrap gap-3'><button onClick={() => navigator.clipboard.writeText(displayedOutput)} className='rounded bg-slate-800 px-4 py-2 text-white'>Copy scrubbed text</button></div><p className='mt-4 text-xs text-slate-500 dark:text-slate-400'>False positives and false negatives are possible. Review the result before relying on it.</p>
       </section>
+      </>}
     </div>
   </LocalToolLayout>;
 }
diff --git a/src/app/document-privacy/page.tsx b/src/app/document-privacy/page.tsx
new file mode 100644
index 0000000..0eda60d
--- /dev/null
+++ b/src/app/document-privacy/page.tsx
@@ -0,0 +1,26 @@
+'use client';
+import { useRef, useState } from 'react';
+import LocalToolLayout from '@/components/LocalToolLayout';
+import { downloadLocal } from '@/lib/local-files';
+import { cleanOfficeProperties, inspectOffice, officeExample, type OfficeKind, type OfficeReport } from '@/lib/office-privacy';
+
+function Findings({ report }: { report: OfficeReport }) {
+  return <div className='space-y-3'><p className='text-sm text-slate-500 dark:text-slate-400'>{report.checkedXml} XML parts parsed. {report.findings.length}{report.findings.length === 400 ? '+' : ''} findings shown (maximum 400).</p>{report.findings.length ? report.findings.map((finding,i) => <article key={i} className='rounded-lg border p-4'><h3 className='font-semibold'>{finding.category}</h3><p className='mt-1 text-sm'>{finding.detail}</p><p className='mt-2 break-all font-mono text-xs text-slate-500 dark:text-slate-400'>{finding.part}</p>{finding.preview && <details className='mt-2'><summary className='text-sm font-semibold text-sky-700 dark:text-sky-300'>Show private values / content preview</summary><pre className='mt-2 whitespace-pre-wrap rounded bg-slate-50 dark:bg-slate-950 p-3 text-xs'>{finding.preview}</pre></details>}</article>) : <p className='note'>No findings from these checks. This does not establish that the document has no sensitive or hidden content.</p>}</div>;
+}
+export default function DocumentPrivacyPage() {
+  const bytes = useRef<Uint8Array | null>(null); const [kind, setKind] = useState<OfficeKind>('docx'); const [name, setName] = useState(''); const [report, setReport] = useState<OfficeReport | null>(null);
+  const [cleaned, setCleaned] = useState<{ blob: Blob; report: OfficeReport } | null>(null); const [busy, setBusy] = useState(false); const [error, setError] = useState(''); const [inputKey, setInputKey] = useState(0);
+  const inspect = async (data: Uint8Array, nextKind: OfficeKind, nextName: string) => {
+    bytes.current = null; setReport(null); setCleaned(null); setError(''); setBusy(true);
+    try { const result = await inspectOffice(data, nextKind); bytes.current = data; setKind(nextKind); setName(nextName); setReport(result); }
+    catch (err) { setError(`Inspection stopped: ${(err as Error).message}`); }
+    finally { setBusy(false); }
+  };
+  return <LocalToolLayout title='Document Privacy Inspector' description='Look inside Word, Excel and PowerPoint files for document properties, comments, tracked changes and other hidden content. Files and references are never uploaded or opened remotely.'>
+    <div className='mx-auto w-full min-w-0 space-y-5'><section className='panel space-y-4'><h2 className='text-lg font-bold'>Inspect an Office document</h2><label className='block text-sm font-semibold'>DOCX, XLSX or PPTX<input key={inputKey} type='file' className='field mt-2' accept='.docx,.xlsx,.pptx' disabled={busy} onChange={async event => { const file = event.target.files?.[0]; if (!file) return; bytes.current = null; setReport(null); setCleaned(null); setError(''); const extension = file.name.split('.').pop()?.toLowerCase(); if (!['docx','xlsx','pptx'].includes(extension ?? '') || file.size > 20 * 1024 * 1024) { setError('Choose a DOCX, XLSX or PPTX file up to 20 MB.'); return; } try { await inspect(new Uint8Array(await file.arrayBuffer()), extension as OfficeKind, file.name); } catch { setError('Could not read this file.'); } }}/></label><p className='text-xs text-slate-500 dark:text-slate-400'>20 MB compressed / 60 MB expanded. Legacy DOC/XLS/PPT, encrypted files and ZIP64 archives are unsupported.</p><div className='flex flex-wrap gap-3'><button className='action action-secondary' disabled={busy} onClick={async () => { setBusy(true); try { await inspect(await officeExample(), 'docx', 'Example document'); setInputKey(key => key + 1); } catch { setError('Could not load the example.'); setBusy(false); } }}>Load example</button><button className='action action-secondary' disabled={busy} onClick={() => { bytes.current = null; setReport(null); setCleaned(null); setName(''); setError(''); setInputKey(key => key + 1); }}>Clear document</button></div><p className='note'>Checks cover supported document properties, comment parts, tracked-change markers, hidden-text markers, hidden worksheets / rows / columns, speaker notes, crop markers and external relationships. Embedded object contents, macros, image metadata and visual concealment are not analyzed. No links or embedded code are executed. Malformed XML stops inspection.</p></section>
+      {busy && <p role='status' className='note'>Inspecting locally…</p>}{error && <p role='alert' className='note text-red-700 dark:text-red-300'>{error}</p>}
+      {report && <section className='panel space-y-5'><h2 className='text-lg font-bold'>What the original contains</h2><p className='break-all text-sm'>{name}</p><Findings report={report}/><div className='border-t pt-5'><h3 className='font-bold'>Clear supported document properties</h3><p className='mt-2 text-sm leading-6'>Remove core properties (including title, author and dates), custom properties, and company, manager, template, hyperlink-base and editing-time fields. Comments, tracked changes, hidden sheets, notes, thumbnails, embedded objects and document content remain. Finalize those in your Office app, then inspect the result again.</p><button className='action mt-4' disabled={busy || !report.metadataParts} onClick={async () => { if (!bytes.current) return; setBusy(true); setError(''); setCleaned(null); try { setCleaned(await cleanOfficeProperties(bytes.current, kind)); } catch (err) { setError((err as Error).message); } finally { setBusy(false); } }}>Clear properties & reinspect</button></div></section>}
+      {cleaned && <section className='panel space-y-5'><h2 className='text-lg font-bold'>Reinspection of the outgoing document</h2><p role='status' className='text-sm text-emerald-700 dark:text-emerald-300'>Supported document properties were cleared and checked again. Review the remaining findings below.</p><Findings report={cleaned.report}/><button className='action' onClick={() => downloadLocal(cleaned.blob, `document-properties-cleared.${kind}`, 'application/octet-stream')}>Download document with properties cleared</button></section>}
+    </div>
+  </LocalToolLayout>;
+}
diff --git a/src/app/encoder-decoder/page.tsx b/src/app/encoder-decoder/page.tsx
index 1dd0900..69077f4 100644
--- a/src/app/encoder-decoder/page.tsx
+++ b/src/app/encoder-decoder/page.tsx
@@ -68,7 +68,7 @@ export default function EncoderDecoderPage() {
       title='Encoder / Decoder'
       description='Encode and decode Base64, URLs and HTML entities locally.'
     >
-      <section className='mx-auto max-w-5xl rounded-xl bg-white p-6 shadow'>
+      <section className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
         <select
           value={mode}
           onChange={(event) => setMode(event.target.value as Mode)}
@@ -97,7 +97,7 @@ export default function EncoderDecoderPage() {
           <textarea
             readOnly
             value={result}
-            className='h-72 rounded border bg-slate-50 p-3 font-mono'
+            className='h-72 rounded border bg-slate-50 dark:bg-slate-950 p-3 font-mono'
           />
         </div>
 
diff --git a/src/app/file-encryption/page.tsx b/src/app/file-encryption/page.tsx
index fc6fbe2..db59e33 100644
--- a/src/app/file-encryption/page.tsx
+++ b/src/app/file-encryption/page.tsx
@@ -105,7 +105,7 @@ export default function FileEncryptionPage() {
       title='File Encryption'
       description='Encrypt files locally with AES-256-GCM. Keys are derived from your password using PBKDF2-SHA-256; neither files nor passwords leave the browser.'
     >
-      <section className='mx-auto max-w-3xl rounded-xl bg-white p-6 shadow'>
+      <section className='mx-auto max-w-3xl rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
         <input
           type='file'
           onChange={(event) => setFile(event.target.files?.[0] ?? null)}
@@ -137,8 +137,8 @@ export default function FileEncryptionPage() {
             Decrypt .tstack file
           </button>
         </div>
-        {error && <p className='mt-4 text-red-600'>{error}</p>}
-        <div className='mt-6 rounded border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900'>
+        {error && <p className='mt-4 text-red-600 dark:text-red-400'>{error}</p>}
+        <div className='mt-6 rounded border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950 p-4 text-sm text-amber-900 dark:text-amber-200'>
           <strong>Important:</strong> There is no password recovery. Keep the password separately. This
           format is ToolStack-specific and intended for local convenience, not archival interoperability.
         </div>
diff --git a/src/app/file-hash/page.tsx b/src/app/file-hash/page.tsx
index 609272f..4c2684b 100644
--- a/src/app/file-hash/page.tsx
+++ b/src/app/file-hash/page.tsx
@@ -47,7 +47,7 @@ export default function FileHashPage() {
       title='File Hash & Checksum'
       description='Generate SHA-256, SHA-384 and SHA-512 checksums locally using the Web Crypto API.'
     >
-      <section className='mx-auto max-w-4xl rounded-xl bg-white p-6 shadow'>
+      <section className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
         <input
           type='file'
           onChange={(event) => {
@@ -58,12 +58,12 @@ export default function FileHashPage() {
         />
 
         {file && (
-          <p className='mt-3 text-sm text-slate-600'>
+          <p className='mt-3 text-sm text-slate-600 dark:text-slate-300'>
             {file.name} · {(file.size / 1024).toFixed(1)} KB
           </p>
         )}
         {busy && <p className='mt-4'>Calculating hashes...</p>}
-        {error && <p className='mt-4 text-red-600'>{error}</p>}
+        {error && <p className='mt-4 text-red-600 dark:text-red-400'>{error}</p>}
 
         <div className='mt-4 space-y-3'>
           {Object.entries(hashes).map(([algorithm, value]) => (
@@ -96,7 +96,7 @@ export default function FileHashPage() {
               className='mt-1 w-full rounded border p-2 font-mono text-xs'
             />
             {match !== null && (
-              <p className={`mt-2 font-semibold ${match ? 'text-green-700' : 'text-red-700'}`}>
+              <p className={`mt-2 font-semibold ${match ? 'text-green-700 dark:text-green-300' : 'text-red-700 dark:text-red-300'}`}>
                 {match ? 'Checksum matches.' : 'No generated checksum matches.'}
               </p>
             )}
diff --git a/src/app/file-signature-inspector/page.tsx b/src/app/file-signature-inspector/page.tsx
index edc825c..af41213 100644
--- a/src/app/file-signature-inspector/page.tsx
+++ b/src/app/file-signature-inspector/page.tsx
@@ -7,5 +7,5 @@ type Result = { info: SignatureInfo | null; matches: boolean | null; hex: string
 export default function FileSignatureInspectorPage() {
   const [file, setFile] = useState<File | null>(null); const [result, setResult] = useState<Result | null>(null); const [error, setError] = useState('');
   const inspect = async (next: File) => { setFile(next); setError(''); try { const bytes = new Uint8Array(await next.slice(0, 64).arrayBuffer()); const info = detectFileSignature(bytes); setResult({ info, matches: extensionMatches(info, next.name), extension: fileExtension(next.name), hex: Array.from(bytes).map(value => value.toString(16).padStart(2,'0')).join(' ').toUpperCase() }); } catch (err) { setResult(null); setError((err as Error).message); } };
-  return <LocalToolLayout title='File Type & Signature Inspector' description='Inspect the magic bytes at the start of a file instead of trusting only its filename. The file stays on your device.'><section className='mx-auto max-w-3xl rounded-xl bg-white p-6 shadow'><input type='file' onChange={event => event.target.files?.[0] && void inspect(event.target.files[0])} className='w-full rounded border p-3'/>{file && <p className='mt-3 text-sm text-slate-600'>{file.name} · {(file.size / 1024).toFixed(1)} KB</p>}{error && <p className='mt-4 text-red-600'>{error}</p>}{result && <div className='mt-6 space-y-4'><div className='rounded-lg bg-slate-50 p-4'><p className='text-sm text-slate-500'>Detected signature</p><p className='text-xl font-semibold text-slate-800'>{result.info?.name ?? 'Unknown / not in local signature table'}</p>{result.info && <p className='mt-1 font-mono text-sm'>{result.info.mime}</p>}</div>{result.matches !== null && <div className={`rounded-lg p-4 ${result.matches ? 'bg-emerald-50 text-emerald-800' : 'bg-amber-50 text-amber-900'}`}>{result.matches ? `The .${result.extension} extension is consistent with this signature.` : `The .${result.extension} extension does not match the detected signature.`}{result.info?.container && <p className='mt-2 text-sm'>This is a container format, so the signature alone cannot identify the exact document/media subtype.</p>}</div>}<div><p className='mb-2 text-sm font-semibold'>First bytes</p><pre className='overflow-auto rounded bg-slate-950 p-4 text-xs text-slate-100'>{result.hex}</pre></div></div>}</section></LocalToolLayout>;
+  return <LocalToolLayout title='File Type & Signature Inspector' description='Inspect the magic bytes at the start of a file instead of trusting only its filename. The file stays on your device.'><section className='mx-auto max-w-3xl rounded-xl bg-white dark:bg-slate-900 p-6 shadow'><input type='file' onChange={event => event.target.files?.[0] && void inspect(event.target.files[0])} className='w-full rounded border p-3'/>{file && <p className='mt-3 text-sm text-slate-600 dark:text-slate-300'>{file.name} · {(file.size / 1024).toFixed(1)} KB</p>}{error && <p className='mt-4 text-red-600 dark:text-red-400'>{error}</p>}{result && <div className='mt-6 space-y-4'><div className='rounded-lg bg-slate-50 dark:bg-slate-950 p-4'><p className='text-sm text-slate-500 dark:text-slate-400'>Detected signature</p><p className='text-xl font-semibold text-slate-800 dark:text-slate-100'>{result.info?.name ?? 'Unknown / not in local signature table'}</p>{result.info && <p className='mt-1 font-mono text-sm'>{result.info.mime}</p>}</div>{result.matches !== null && <div className={`rounded-lg p-4 ${result.matches ? 'bg-emerald-50 dark:bg-emerald-950 text-emerald-800 dark:text-emerald-200' : 'bg-amber-50 dark:bg-amber-950 text-amber-900 dark:text-amber-200'}`}>{result.matches ? `The .${result.extension} extension is consistent with this signature.` : `The .${result.extension} extension does not match the detected signature.`}{result.info?.container && <p className='mt-2 text-sm'>This is a container format, so the signature alone cannot identify the exact document/media subtype.</p>}</div>}<div><p className='mb-2 text-sm font-semibold'>First bytes</p><pre className='overflow-auto rounded bg-slate-950 p-4 text-xs text-slate-100'>{result.hex}</pre></div></div>}</section></LocalToolLayout>;
 }
diff --git a/src/app/find-replace/page.tsx b/src/app/find-replace/page.tsx
index 6a341ce..bb8bfce 100644
--- a/src/app/find-replace/page.tsx
+++ b/src/app/find-replace/page.tsx
@@ -65,20 +65,20 @@ export default function FindReplacePage() {
     if (checked) setIsCaseSensitive(true);
   };
 
-  return <div className='flex min-h-screen flex-col bg-slate-50'>
+  return <div className='flex min-h-screen flex-col bg-slate-50 dark:bg-slate-950'>
     <Navbar/><Breadcrumbs/>
-    <main className='container mx-auto flex-grow px-4 py-8'>
-      <header className='mb-8 text-center'><h1 className='text-4xl font-bold text-slate-800'>Find & Replace</h1><p className='mt-1 text-lg text-slate-600'>Perform powerful find and replace operations on your text.</p></header>
-      <section className='mx-auto grid max-w-7xl grid-cols-1 gap-4 md:grid-cols-2'>
-        <div className='flex flex-col'><h2 className='rounded-t-lg border border-b-0 bg-slate-100 p-2 font-semibold text-slate-700'>Input Text</h2><textarea value={inputText} onChange={e => setInputText(e.target.value)} className='h-80 w-full resize-none rounded-b-lg border border-slate-300 p-4 font-mono focus:ring-2 focus:ring-sky-500' placeholder='Paste your text here...'/></div>
-        <div className='flex flex-col'><div className='flex flex-shrink-0 items-center justify-between rounded-t-lg border border-b-0 bg-slate-100 p-2'><h2 className='font-semibold text-slate-700'>Output</h2><button onClick={handleCopy} disabled={!outputText} className='rounded-md border border-slate-300 bg-white px-3 py-1 text-xs font-medium text-slate-600 hover:bg-slate-50 disabled:opacity-50'>Copy</button></div><textarea readOnly value={outputText} className='h-80 w-full resize-none rounded-b-lg border border-slate-300 bg-slate-50 p-4 font-mono'/>{copySuccess && <p className='mt-1 text-right text-xs text-green-600'>{copySuccess}</p>}</div>
+    <main id='main-content' className='page-shell flex-grow px-4 py-8'>
+      <header className='mb-8 text-center'><h1 className='text-4xl font-bold text-slate-800 dark:text-slate-100'>Find & Replace</h1><p className='mt-1 text-lg text-slate-600 dark:text-slate-300'>Perform powerful find and replace operations on your text.</p></header>
+      <section className='mx-auto grid w-full min-w-0 grid-cols-1 gap-4 md:grid-cols-2'>
+        <div className='flex flex-col'><h2 className='rounded-t-lg border border-b-0 bg-slate-100 dark:bg-slate-800 p-2 font-semibold text-slate-700 dark:text-slate-200'>Input Text</h2><textarea value={inputText} onChange={e => setInputText(e.target.value)} className='h-80 w-full resize-none rounded-b-lg border border-slate-300 dark:border-slate-700 p-4 font-mono focus:ring-2 focus:ring-sky-500' placeholder='Paste your text here...'/></div>
+        <div className='flex flex-col'><div className='flex flex-shrink-0 items-center justify-between rounded-t-lg border border-b-0 bg-slate-100 dark:bg-slate-800 p-2'><h2 className='font-semibold text-slate-700 dark:text-slate-200'>Output</h2><button onClick={handleCopy} disabled={!outputText} className='rounded-md border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-1 text-xs font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-950 disabled:opacity-50'>Copy</button></div><textarea readOnly value={outputText} className='h-80 w-full resize-none rounded-b-lg border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-950 p-4 font-mono'/>{copySuccess && <p className='mt-1 text-right text-xs text-green-600 dark:text-green-400'>{copySuccess}</p>}</div>
       </section>
-      <section className='mx-auto mt-6 max-w-4xl rounded-lg bg-white p-6 shadow-xl'>
-        <div className='grid grid-cols-1 items-end gap-4 sm:grid-cols-2'><div><label htmlFor='find' className='block text-sm font-medium text-slate-700'>{useRegex ? 'Find (Regular Expression)' : 'Find'}</label><input type='text' id='find' value={findText} onChange={e => setFindText(e.target.value)} className='mt-1 block w-full rounded-md border border-slate-300 p-2 shadow-sm focus:ring-sky-500'/></div><div><label htmlFor='replace' className='block text-sm font-medium text-slate-700'>Replace with</label><input type='text' id='replace' value={replaceText} onChange={e => setReplaceText(e.target.value)} className='mt-1 block w-full rounded-md border border-slate-300 p-2 shadow-sm focus:ring-sky-500'/></div></div>
-        <div className='mt-4 flex flex-wrap items-center justify-between border-t pt-4'><div className='flex items-center space-x-4'><div className='flex items-center'><input id='use-regex' type='checkbox' checked={useRegex} onChange={e => handleRegexToggle(e.target.checked)} className='h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-500'/><label htmlFor='use-regex' className='ml-2 block text-sm text-gray-900'>Use Regular Expression</label></div><div className='flex items-center'><input id='case-sensitive' type='checkbox' checked={isCaseSensitive} onChange={e => setIsCaseSensitive(e.target.checked)} disabled={isRegexFlagsProvided} className='h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-500 disabled:cursor-not-allowed disabled:opacity-50'/><label htmlFor='case-sensitive' className={`ml-2 block text-sm ${isRegexFlagsProvided ? 'text-gray-400' : 'text-gray-900'}`}>Case Sensitive</label></div></div><div className='mt-2 sm:mt-0'><span className='rounded-md bg-slate-100 px-3 py-1.5 text-sm font-semibold text-slate-600'>{matchCount} {matchCount === 1 ? 'match' : 'matches'} found</span></div></div>
-        {error && <div className='mt-2 rounded-md bg-red-50 p-2 text-xs text-red-600'>Error: {error}</div>}
+      <section className='mx-auto mt-6 w-full min-w-0 rounded-lg bg-white dark:bg-slate-900 p-6 shadow-xl'>
+        <div className='grid grid-cols-1 items-end gap-4 sm:grid-cols-2'><div><label htmlFor='find' className='block text-sm font-medium text-slate-700 dark:text-slate-200'>{useRegex ? 'Find (Regular Expression)' : 'Find'}</label><input type='text' id='find' value={findText} onChange={e => setFindText(e.target.value)} className='mt-1 block w-full rounded-md border border-slate-300 dark:border-slate-700 p-2 shadow-sm focus:ring-sky-500'/></div><div><label htmlFor='replace' className='block text-sm font-medium text-slate-700 dark:text-slate-200'>Replace with</label><input type='text' id='replace' value={replaceText} onChange={e => setReplaceText(e.target.value)} className='mt-1 block w-full rounded-md border border-slate-300 dark:border-slate-700 p-2 shadow-sm focus:ring-sky-500'/></div></div>
+        <div className='mt-4 flex flex-wrap items-center justify-between border-t pt-4'><div className='flex items-center space-x-4'><div className='flex items-center'><input id='use-regex' type='checkbox' checked={useRegex} onChange={e => handleRegexToggle(e.target.checked)} className='h-4 w-4 rounded border-gray-300 dark:border-slate-700 text-sky-600 dark:text-sky-400 focus:ring-sky-500'/><label htmlFor='use-regex' className='ml-2 block text-sm text-gray-900 dark:text-slate-100'>Use Regular Expression</label></div><div className='flex items-center'><input id='case-sensitive' type='checkbox' checked={isCaseSensitive} onChange={e => setIsCaseSensitive(e.target.checked)} disabled={isRegexFlagsProvided} className='h-4 w-4 rounded border-gray-300 dark:border-slate-700 text-sky-600 dark:text-sky-400 focus:ring-sky-500 disabled:cursor-not-allowed disabled:opacity-50'/><label htmlFor='case-sensitive' className={`ml-2 block text-sm ${isRegexFlagsProvided ? 'text-gray-400' : 'text-gray-900 dark:text-slate-100'}`}>Case Sensitive</label></div></div><div className='mt-2 sm:mt-0'><span className='rounded-md bg-slate-100 dark:bg-slate-800 px-3 py-1.5 text-sm font-semibold text-slate-600 dark:text-slate-300'>{matchCount} {matchCount === 1 ? 'match' : 'matches'} found</span></div></div>
+        {error && <div className='mt-2 rounded-md bg-red-50 dark:bg-red-950 p-2 text-xs text-red-600 dark:text-red-400'>Error: {error}</div>}
       </section>
-      <div className='mt-12 text-center'><Link href='/' className='text-sky-600 hover:text-sky-800 hover:underline'>&larr; Back to All Tools</Link></div>
+      <div className='mt-12 text-center'><Link href='/' className='text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200 hover:underline'>&larr; Back to All Tools</Link></div>
     </main>
     <Footer/>
   </div>;
diff --git a/src/app/globals.css b/src/app/globals.css
index e19e1f2..be57016 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,102 +1,87 @@
 @import 'tailwindcss';
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 
-:root {
-  /* ================================================================= */
-  /* START: ENHANCED COLOR PALETTE                                     */
-  /* ================================================================= */
-  --background: #ffffff; /* White */
-  --foreground: #020617; /* slate-950 */
-
-  /* Primary Accent Color (Indigo) */
-  --primary-50: #eef2ff;
-  --primary-100: #e0e7ff;
-  --primary-500: #6366f1;
-  --primary-600: #4f46e5;
-  --primary-700: #4338ca;
-
-  /* Neutral/Text Colors (Slate) */
-  --neutral-50: #f8fafc;
-  --neutral-100: #f1f5f9;
-  --neutral-200: #e2e8f0;
-  --neutral-300: #cbd5e1;
-  --neutral-500: #64748b;
-  --neutral-600: #475569;
-  --neutral-700: #334155;
-  --neutral-800: #1e293b;
-
-  /* Feedback Colors */
-  --color-success: #16a34a; /* green-600 */
-  --color-error: #dc2626; /* red-600 */
-
-  --color-background: var(--background);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-
-  /* Font Variables from layout.tsx */
-  --font-sans: var(--font-poppins);
-  --font-heading: var(--font-lexend);
-  --font-mono: var(--font-geist-mono);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-
-  /* Font Variables from layout.tsx */
-  --font-sans: var(--font-poppins);
-  --font-heading: var(--font-lexend);
-  --font-mono: var(--font-geist-mono);
+@theme inline {
+  --font-sans: var(--font-inter), Arial, sans-serif;
+  --font-heading: var(--font-inter), Arial, sans-serif;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #020617; /* slate-950 */
-    --foreground: #f8fafc; /* slate-50 */
+:root { color-scheme: light; --font-inter: 'Inter Variable'; --page: #f8fafc; --surface: #ffffff; --ink: #334155; --line: #cbd5e1; }
+:root[data-theme=dark] { color-scheme: dark; --page: #020617; --surface: #0f172a; --ink: #e2e8f0; --line: #475569; }
 
-    /* Update neutral colors for dark mode */
-    --neutral-50: #1e293b;
-    --neutral-100: #334155;
-    --neutral-200: #475569;
-    --neutral-300: #64748b;
-    --neutral-500: #cbd5e1;
-    --neutral-600: #e2e8f0;
-    --neutral-700: #f1f5f9;
-    --neutral-800: #f8fafc;
-  }
+@layer base {
+  body { background: var(--page); color: var(--ink); }
+  *, ::before, ::after { border-color: var(--line); }
+  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), textarea, select { background-color: var(--surface); color: var(--ink); min-width: 0; }
+  input::placeholder, textarea::placeholder { color: #64748b; opacity: 1; }
+  [data-theme=dark] input::placeholder, [data-theme=dark] textarea::placeholder { color: #94a3b8; }
+  input, textarea, select { accent-color: #0284c7; }
+  input[type=file]::file-selector-button { margin-right: .75rem; border: 0; border-radius: .375rem; padding: .5rem .75rem; background: var(--page); color: var(--ink); cursor: pointer; }
+  button, summary, select { cursor: pointer; }
+  button:disabled { cursor: not-allowed; }
+  :focus-visible { outline: 2px solid #0ea5e9; outline-offset: 3px; }
+  textarea { max-width: 100%; }
+  pre { overflow-wrap: anywhere; }
+  h1, h2, h3, h4, h5, h6 { font-family: var(--font-inter), Arial, sans-serif; }
 }
-/* ================================================================= */
-/* END: ENHANCED COLOR PALETTE                                       */
-/* ================================================================= */
 
-body {
-  background-color: var(--neutral-50);
-  color: var(--neutral-700);
-  font-family: var(--font-sans);
+@layer components {
+  .page-shell { width: 100%; max-width: 1600px; margin-inline: auto; min-width: 0; }
+  .panel { border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); padding: 1.5rem; }
+  .field { width: 100%; border: 1px solid var(--line); border-radius: .5rem; padding: .65rem .8rem; }
+  .action { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .5rem; background: #0369a1; color: #fff; padding: .65rem 1rem; font-weight: 600; }
+  .action:hover:not(:disabled) { background: #075985; }
+  .action:disabled { opacity: .5; }
+  .action-secondary { background: var(--page); color: var(--ink); border: 1px solid var(--line); }
+  .action-secondary:hover:not(:disabled) { background: var(--surface); }
+  .note { border-radius: .5rem; background: var(--page); padding: 1rem; font-size: .875rem; line-height: 1.6; }
 }
 
-/* Apply the heading font to all headings */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--font-heading);
-}
+.prose { color: var(--ink); line-height: 1.75; overflow-wrap: anywhere; }
+.prose :is(h1,h2,h3,h4) { font-weight: 700; margin: 1em 0 .5em; }
+.prose h1 { font-size: 2em; }
+.prose h2 { font-size: 1.5em; }
+.prose p, .prose ul, .prose ol { margin: .75em 0; }
+.prose ul { list-style: disc; padding-left: 1.5em; }
+.prose ol { list-style: decimal; padding-left: 1.5em; }
+.prose a { color: #0284c7; text-decoration: underline; }
+[data-theme=dark] .prose a { color: #7dd3fc; }
+.prose pre { background: #020617; color: #e2e8f0; padding: 1rem; border-radius: .5rem; overflow: auto; }
+.prose blockquote { border-left: 3px solid var(--line); padding-left: 1rem; }
+.prose :is(td,th) { border: 1px solid var(--line); padding: .5rem; }
 
-/* Custom styles for the prose class used in the Markdown preview */
-.prose {
-  --tw-prose-body: #334155; /* slate-700 */
-  --tw-prose-headings: #1e293b; /* slate-800 */
-  --tw-prose-lead: #475569; /* slate-600 */
-  --tw-prose-links: #4f46e5; /* primary-600 */
-  --tw-prose-bold: #1e293b;
-  --tw-prose-counters: #64748b; /* slate-500 */
-  --tw-prose-bullets: #d1d5db; /* gray-300 */
-  --tw-prose-hr: #e5e7eb; /* gray-200 */
-  --tw-prose-quotes: #1e293b;
-  --tw-prose-quote-borders: #e5e7eb;
-  --tw-prose-captions: #6b7280; /* gray-500 */
-  --tw-prose-code: #4f46e5;
-  --tw-prose-pre-code: #e5e7eb;
-  --tw-prose-pre-bg: #1f2937; /* gray-800 */
-  --tw-prose-th-borders: #e5e7eb;
-  --tw-prose-td-borders: #e5e7eb;
+:root { --diff-muted: #64748b; --diff-active: #0ea5e90a; --diff-selection: #38bdf84d; --diff-delete: #b91c1c; --diff-insert: #047857; --diff-delete-bg: #fef2f2; --diff-insert-bg: #ecfdf5; }
+:root[data-theme=dark] { --diff-muted: #94a3b8; --diff-active: #38bdf80a; --diff-selection: #38bdf84d; --diff-delete: #fda4af; --diff-insert: #6ee7b7; --diff-delete-bg: #88133725; --diff-insert-bg: #064e3b40; }
+.diff-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 1.8rem; min-height: 1.8rem; border-radius: .3rem; font-size: 1rem; }
+.diff-icon:hover { background: var(--page); }
+.diff-code-keyword { color: #7c3aed; }
+.diff-code-string { color: #047857; }
+.diff-code-number { color: #b45309; }
+.diff-code-comment { color: #64748b; font-style: italic; }
+.diff-code-property { color: #0369a1; }
+[data-theme=dark] .diff-code-keyword { color: #c4b5fd; }
+[data-theme=dark] .diff-code-string { color: #6ee7b7; }
+[data-theme=dark] .diff-code-number { color: #fcd34d; }
+[data-theme=dark] .diff-code-comment { color: #94a3b8; }
+[data-theme=dark] .diff-code-property { color: #7dd3fc; }
+.diff-editors .cm-mergeView { height: clamp(24rem, 57vh, 44rem); overflow: auto; }
+.diff-editors .cm-mergeViewEditors { min-height: 100%; }
+.diff-editors .cm-mergeViewEditor { min-width: 0; overflow: hidden; }
+.diff-editors .cm-mergeViewEditor + .cm-mergeViewEditor { border-left: 1px solid var(--line); }
+.diff-editors .cm-merge-revert { width: 2rem; flex-shrink: 0; background: var(--page); border-inline: 1px solid var(--line); }
+.diff-editors .cm-merge-revert button { width: 1.8rem; height: 1.6rem; border: 1px solid var(--line); border-radius: .25rem; background: var(--surface); color: var(--ink); cursor: pointer; }
+.diff-editors .cm-merge-a .cm-changedLine { background: var(--diff-delete-bg); }
+.diff-editors .cm-merge-b .cm-changedLine { background: var(--diff-insert-bg); }
+.diff-editors .cm-merge-a .cm-changedText, .diff-editors .cm-merge-a .cm-deletedLine:not(:has(.cm-changedText)) { color: var(--diff-delete) !important; background: #f43f5e18 !important; text-decoration: line-through; text-decoration-thickness: 1px; }
+.diff-editors .cm-merge-a .cm-changedText *, .diff-editors .cm-merge-a .cm-deletedLine:not(:has(.cm-changedText)) * { color: var(--diff-delete) !important; }
+.diff-editors .cm-merge-b .cm-changedText, .diff-editors .cm-merge-b .cm-insertedLine:not(:has(.cm-changedText)) { color: var(--diff-insert) !important; background: #10b98118 !important; font-weight: 600; text-decoration: none; }
+.diff-editors .cm-merge-b .cm-changedText *, .diff-editors .cm-merge-b .cm-insertedLine:not(:has(.cm-changedText)) * { color: var(--diff-insert) !important; }
+.diff-editors .cm-collapsedLines { color: var(--diff-muted) !important; background: var(--page) !important; cursor: pointer; }
+.diff-editors .cm-merge-a .cm-changedLineGutter { background: var(--diff-delete) !important; }
+.diff-editors .cm-merge-b .cm-changedLineGutter { background: var(--diff-insert) !important; }
+@media (max-width: 767px) {
+  .diff-side-a .cm-mergeViewEditor:has(.cm-merge-b), .diff-side-b .cm-mergeViewEditor:has(.cm-merge-a), .diff-editors .cm-merge-revert { display: none; }
+  .diff-editors .cm-mergeViewEditor { flex-basis: 100%; width: 100%; }
 }
+
+@media (prefers-reduced-motion: reduce) { *, ::before, ::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }
diff --git a/src/app/hmac-tool/page.tsx b/src/app/hmac-tool/page.tsx
index 9ef3ed6..62bdb68 100644
--- a/src/app/hmac-tool/page.tsx
+++ b/src/app/hmac-tool/page.tsx
@@ -12,5 +12,5 @@ export default function HmacToolPage() {
   const [secret, setSecret] = useState('local-secret'); const [message, setMessage] = useState('ToolStack'); const [algorithm, setAlgorithm] = useState<Algorithm>('SHA-256'); const [encoding, setEncoding] = useState<Encoding>('hex'); const [output, setOutput] = useState(''); const [expected, setExpected] = useState(''); const [status, setStatus] = useState('');
   const generate = async () => { try { const key = await importKey(secret, algorithm, ['sign']); const signature = new Uint8Array(await crypto.subtle.sign('HMAC', key, new TextEncoder().encode(message))); setOutput(encoding === 'hex' ? hex(signature) : base64(signature)); setStatus(''); } catch (err) { setStatus((err as Error).message); } };
   const verify = async () => { try { const key = await importKey(secret, algorithm, ['verify']); const bytes = encoding === 'hex' ? fromHex(expected.trim()) : fromBase64(expected.trim()); const valid = await crypto.subtle.verify('HMAC', key, bytes, new TextEncoder().encode(message)); setStatus(valid ? 'HMAC matches.' : 'HMAC does not match.'); } catch (err) { setStatus((err as Error).message); } };
-  return <LocalToolLayout title='HMAC Generator & Verifier' description='Generate or verify HMAC-SHA signatures locally with Web Crypto. Secrets and messages stay in the browser.'><section className='mx-auto max-w-3xl rounded-xl bg-white p-6 shadow'><label className='font-semibold'>Secret<input type='password' value={secret} onChange={event => setSecret(event.target.value)} className='mt-2 w-full rounded border p-3 font-mono'/></label><label className='mt-4 block font-semibold'>Message<textarea value={message} onChange={event => setMessage(event.target.value)} className='mt-2 h-32 w-full rounded border p-3 font-mono'/></label><div className='mt-4 grid gap-3 sm:grid-cols-2'><select value={algorithm} onChange={event => setAlgorithm(event.target.value as Algorithm)} className='rounded border p-2'><option>SHA-256</option><option>SHA-384</option><option>SHA-512</option></select><select value={encoding} onChange={event => setEncoding(event.target.value as Encoding)} className='rounded border p-2'><option value='hex'>Hex</option><option value='base64'>Base64</option></select></div><button onClick={() => void generate()} className='mt-5 rounded bg-sky-600 px-4 py-2 text-white'>Generate HMAC</button>{output && <div className='mt-4 flex gap-2'><input readOnly value={output} className='min-w-0 flex-1 rounded border p-2 font-mono text-xs'/><button onClick={() => navigator.clipboard.writeText(output)} className='rounded bg-slate-800 px-3 text-white'>Copy</button></div>}<div className='mt-6 border-t pt-5'><label className='font-semibold'>Expected HMAC<input value={expected} onChange={event => setExpected(event.target.value)} className='mt-2 w-full rounded border p-2 font-mono text-xs'/></label><button disabled={!expected} onClick={() => void verify()} className='mt-3 rounded bg-emerald-600 px-4 py-2 text-white disabled:opacity-40'>Verify</button></div>{status && <p className={`mt-4 ${status === 'HMAC matches.' ? 'text-emerald-700' : 'text-amber-800'}`} aria-live='polite'>{status}</p>}</section></LocalToolLayout>;
+  return <LocalToolLayout title='HMAC Generator & Verifier' description='Generate or verify HMAC-SHA signatures locally with Web Crypto. Secrets and messages stay in the browser.'><section className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'><label className='font-semibold'>Secret<input type='password' value={secret} onChange={event => setSecret(event.target.value)} className='mt-2 w-full rounded border p-3 font-mono'/></label><label className='mt-4 block font-semibold'>Message<textarea value={message} onChange={event => setMessage(event.target.value)} className='mt-2 h-32 w-full rounded border p-3 font-mono'/></label><div className='mt-4 grid gap-3 sm:grid-cols-2'><select value={algorithm} onChange={event => setAlgorithm(event.target.value as Algorithm)} className='rounded border p-2'><option>SHA-256</option><option>SHA-384</option><option>SHA-512</option></select><select value={encoding} onChange={event => setEncoding(event.target.value as Encoding)} className='rounded border p-2'><option value='hex'>Hex</option><option value='base64'>Base64</option></select></div><button onClick={() => void generate()} className='mt-5 rounded bg-sky-600 px-4 py-2 text-white'>Generate HMAC</button>{output && <div className='mt-4 flex gap-2'><input readOnly value={output} className='min-w-0 flex-1 rounded border p-2 font-mono text-xs'/><button onClick={() => navigator.clipboard.writeText(output)} className='rounded bg-slate-800 px-3 text-white'>Copy</button></div>}<div className='mt-6 border-t pt-5'><label className='font-semibold'>Expected HMAC<input value={expected} onChange={event => setExpected(event.target.value)} className='mt-2 w-full rounded border p-2 font-mono text-xs'/></label><button disabled={!expected} onClick={() => void verify()} className='mt-3 rounded bg-emerald-600 px-4 py-2 text-white disabled:opacity-40'>Verify</button></div>{status && <p className={`mt-4 ${status === 'HMAC matches.' ? 'text-emerald-700 dark:text-emerald-300' : 'text-amber-800 dark:text-amber-200'}`} aria-live='polite'>{status}</p>}</section></LocalToolLayout>;
 }
diff --git a/src/app/html-tag-explainer/page.tsx b/src/app/html-tag-explainer/page.tsx
index 3f2cd3f..5db2009 100644
--- a/src/app/html-tag-explainer/page.tsx
+++ b/src/app/html-tag-explainer/page.tsx
@@ -331,16 +331,16 @@ export default function HtmlTagExplainerPage() {
   }, [searchTerm]);
 
   return (
-    <div className='flex flex-col min-h-screen bg-slate-50'>
+    <div className='flex flex-col min-h-screen bg-slate-50 dark:bg-slate-950'>
       <Navbar />
       <Breadcrumbs />
-      <main className='flex-grow container mx-auto px-4 py-8'>
+      <main id='main-content' className='flex-grow page-shell px-4 py-8'>
         <header className='mb-8 text-center'>
-          <h1 className='text-4xl font-bold text-slate-800'>HTML Tag Explainer</h1>
-          <p className='text-lg text-slate-600 mt-1'>A quick reference guide for standard HTML tags.</p>
+          <h1 className='text-4xl font-bold text-slate-800 dark:text-slate-100'>HTML Tag Explainer</h1>
+          <p className='text-lg text-slate-600 dark:text-slate-300 mt-1'>A quick reference guide for standard HTML tags.</p>
         </header>
 
-        <section className='max-w-4xl mx-auto'>
+        <section className='w-full min-w-0 mx-auto'>
           {/* Search Input */}
           <div className='mb-6 sticky top-4 z-10'>
             <input
@@ -348,7 +348,7 @@ export default function HtmlTagExplainerPage() {
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               placeholder='Search by tag or description (e.g., <img>, form)'
-              className='w-full p-3 border border-slate-300 rounded-lg shadow-sm focus:ring-2 focus:ring-sky-500'
+              className='w-full p-3 border border-slate-300 dark:border-slate-700 rounded-lg shadow-sm focus:ring-2 focus:ring-sky-500'
             />
           </div>
 
@@ -356,29 +356,29 @@ export default function HtmlTagExplainerPage() {
           <div className='space-y-8'>
             {Object.entries(categorizedTags).map(([category, tags]) => (
               <div key={category}>
-                <h2 className='text-2xl font-semibold text-slate-700 border-b-2 border-slate-200 pb-2 mb-4'>
+                <h2 className='text-2xl font-semibold text-slate-700 dark:text-slate-200 border-b-2 border-slate-200 dark:border-slate-800 pb-2 mb-4'>
                   {category}
                 </h2>
                 <div className='space-y-4'>
                   {tags.map(({ tag, description }) => (
-                    <div key={tag} className='p-4 bg-white rounded-lg shadow-sm border'>
-                      <code className='font-bold text-lg text-sky-700 bg-sky-50 px-2 py-1 rounded'>{tag}</code>
-                      <p className='text-slate-600 mt-2'>{description}</p>
+                    <div key={tag} className='p-4 bg-white dark:bg-slate-900 rounded-lg shadow-sm border'>
+                      <code className='font-bold text-lg text-sky-700 dark:text-sky-300 bg-sky-50 dark:bg-sky-950 px-2 py-1 rounded'>{tag}</code>
+                      <p className='text-slate-600 dark:text-slate-300 mt-2'>{description}</p>
                     </div>
                   ))}
                 </div>
               </div>
             ))}
             {Object.keys(categorizedTags).length === 0 && (
-              <div className='text-center p-8 bg-white rounded-lg shadow-sm border'>
-                <p className='text-slate-500'>No tags found matching your search.</p>
+              <div className='text-center p-8 bg-white dark:bg-slate-900 rounded-lg shadow-sm border'>
+                <p className='text-slate-500 dark:text-slate-400'>No tags found matching your search.</p>
               </div>
             )}
           </div>
         </section>
 
         <div className='mt-12 text-center'>
-          <Link href='/' className='text-sky-600 hover:text-sky-800 hover:underline'>
+          <Link href='/' className='text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200 hover:underline'>
             &larr; Back to All Tools
           </Link>
         </div>
diff --git a/src/app/http-status-codes/page.tsx b/src/app/http-status-codes/page.tsx
index 9752088..b81a584 100644
--- a/src/app/http-status-codes/page.tsx
+++ b/src/app/http-status-codes/page.tsx
@@ -173,16 +173,16 @@ export default function HttpStatusCodesPage() {
   }, [searchTerm]);
 
   return (
-    <div className='flex flex-col min-h-screen bg-slate-50'>
+    <div className='flex flex-col min-h-screen bg-slate-50 dark:bg-slate-950'>
       <Navbar />
       <Breadcrumbs />
-      <main className='flex-grow container mx-auto px-4 py-8'>
+      <main id='main-content' className='flex-grow page-shell px-4 py-8'>
         <header className='mb-8 text-center'>
-          <h1 className='text-4xl font-bold text-slate-800'>HTTP Status Code Explainer</h1>
-          <p className='text-lg text-slate-600 mt-1'>A quick reference for HTTP status codes.</p>
+          <h1 className='text-4xl font-bold text-slate-800 dark:text-slate-100'>HTTP Status Code Explainer</h1>
+          <p className='text-lg text-slate-600 dark:text-slate-300 mt-1'>A quick reference for HTTP status codes.</p>
         </header>
 
-        <section className='max-w-4xl mx-auto'>
+        <section className='w-full min-w-0 mx-auto'>
           {/* Search Input */}
           <div className='mb-6 sticky top-4 z-10'>
             <input
@@ -190,7 +190,7 @@ export default function HttpStatusCodesPage() {
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               placeholder='Search by code or name (e.g., 404, Not Found)'
-              className='w-full p-3 border border-slate-300 rounded-lg shadow-sm focus:ring-2 focus:ring-sky-500'
+              className='w-full p-3 border border-slate-300 dark:border-slate-700 rounded-lg shadow-sm focus:ring-2 focus:ring-sky-500'
             />
           </div>
 
@@ -198,29 +198,29 @@ export default function HttpStatusCodesPage() {
           <div className='space-y-8'>
             {Object.entries(filteredCodes).map(([categoryKey, { label, codes }]) => (
               <div key={categoryKey}>
-                <h2 className='text-2xl font-semibold text-slate-700 border-b-2 border-slate-200 pb-2 mb-4'>{label}</h2>
+                <h2 className='text-2xl font-semibold text-slate-700 dark:text-slate-200 border-b-2 border-slate-200 dark:border-slate-800 pb-2 mb-4'>{label}</h2>
                 <div className='space-y-4'>
                   {codes.map(({ code, title, description }) => (
-                    <div key={code} className='p-4 bg-white rounded-lg shadow-sm border'>
-                      <h3 className='font-bold text-lg text-slate-800'>
+                    <div key={code} className='p-4 bg-white dark:bg-slate-900 rounded-lg shadow-sm border'>
+                      <h3 className='font-bold text-lg text-slate-800 dark:text-slate-100'>
                         {code} {title}
                       </h3>
-                      <p className='text-slate-600 mt-1'>{description}</p>
+                      <p className='text-slate-600 dark:text-slate-300 mt-1'>{description}</p>
                     </div>
                   ))}
                 </div>
               </div>
             ))}
             {Object.keys(filteredCodes).length === 0 && (
-              <div className='text-center p-8 bg-white rounded-lg shadow-sm border'>
-                <p className='text-slate-500'>No status codes found matching your search.</p>
+              <div className='text-center p-8 bg-white dark:bg-slate-900 rounded-lg shadow-sm border'>
+                <p className='text-slate-500 dark:text-slate-400'>No status codes found matching your search.</p>
               </div>
             )}
           </div>
         </section>
 
         <div className='mt-12 text-center'>
-          <Link href='/' className='text-sky-600 hover:text-sky-800 hover:underline'>
+          <Link href='/' className='text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200 hover:underline'>
             &larr; Back to All Tools
           </Link>
         </div>
diff --git a/src/app/image-compressor/page.tsx b/src/app/image-compressor/page.tsx
index ca15c51..2e88d90 100644
--- a/src/app/image-compressor/page.tsx
+++ b/src/app/image-compressor/page.tsx
@@ -15,13 +15,13 @@ const BATCH_SIZE = 3;
 const release = (items: ImageItem[]) => items.forEach(item => URL.revokeObjectURL(item.previewUrl));
 
 function ImageCard({ item, onRemove, onDownload }: { item: ImageItem; onRemove: (id: string) => void; onDownload: (item: ImageItem) => void }) {
-  return <article className='relative overflow-hidden rounded-lg border bg-white shadow-sm'>
+  return <article className='relative overflow-hidden rounded-lg border bg-white dark:bg-slate-900 shadow-sm'>
     <button onClick={() => onRemove(item.id)} aria-label={`Remove ${item.file.name}`} className='absolute right-1.5 top-1.5 z-10 flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-lg font-bold text-white hover:bg-black/80'>&times;</button>
-    <div className='flex h-32 items-center justify-center bg-slate-100'><Image unoptimized src={item.previewUrl} alt={`Preview of ${item.file.name}`} width={item.width} height={item.height} className='max-h-full max-w-full object-contain'/></div>
-    <div className='p-3 text-center'><p className='truncate text-xs font-semibold text-slate-700' title={item.file.name}>{item.file.name}</p><p className='mt-1 text-xs text-slate-500'>{(item.originalSize / 1024).toFixed(1)} KB</p>
-      {item.status === 'compressing' && <div className='mt-2'><div role='progressbar' aria-valuemin={0} aria-valuemax={100} aria-valuenow={item.progress} aria-label={`Compression progress for ${item.file.name}`} className='h-2.5 w-full rounded-full bg-slate-200'><div className='h-2.5 rounded-full bg-sky-600 transition-all' style={{ width: `${item.progress}%` }}/></div><p className='mt-1 text-xs text-sky-700'>{item.progress}%</p></div>}
-      {item.status === 'done' && item.compressedSize !== undefined && <div className='mt-2 text-xs'><p className='font-bold text-emerald-700'>{(item.compressedSize / 1024).toFixed(1)} KB</p><p className='text-emerald-700'>Saved {Math.max(0, (1 - item.compressedSize / item.originalSize) * 100).toFixed(1)}%</p><button onClick={() => onDownload(item)} className='mt-2 w-full rounded bg-emerald-600 px-3 py-1.5 font-semibold text-white hover:bg-emerald-700'>Download</button></div>}
-      {item.status === 'error' && <p className='mt-2 text-xs font-semibold text-red-600'>Failed</p>}
+    <div className='flex h-32 items-center justify-center bg-slate-100 dark:bg-slate-800'><Image unoptimized src={item.previewUrl} alt={`Preview of ${item.file.name}`} width={item.width} height={item.height} className='max-h-full max-w-full object-contain'/></div>
+    <div className='p-3 text-center'><p className='truncate text-xs font-semibold text-slate-700 dark:text-slate-200' title={item.file.name}>{item.file.name}</p><p className='mt-1 text-xs text-slate-500 dark:text-slate-400'>{(item.originalSize / 1024).toFixed(1)} KB</p>
+      {item.status === 'compressing' && <div className='mt-2'><div role='progressbar' aria-valuemin={0} aria-valuemax={100} aria-valuenow={item.progress} aria-label={`Compression progress for ${item.file.name}`} className='h-2.5 w-full rounded-full bg-slate-200 dark:bg-slate-700'><div className='h-2.5 rounded-full bg-sky-600 transition-all' style={{ width: `${item.progress}%` }}/></div><p className='mt-1 text-xs text-sky-700 dark:text-sky-300'>{item.progress}%</p></div>}
+      {item.status === 'done' && item.compressedSize !== undefined && <div className='mt-2 text-xs'><p className='font-bold text-emerald-700 dark:text-emerald-300'>{(item.compressedSize / 1024).toFixed(1)} KB</p><p className='text-emerald-700 dark:text-emerald-300'>Saved {Math.max(0, (1 - item.compressedSize / item.originalSize) * 100).toFixed(1)}%</p><button onClick={() => onDownload(item)} className='mt-2 w-full rounded bg-emerald-600 px-3 py-1.5 font-semibold text-white hover:bg-emerald-700'>Download</button></div>}
+      {item.status === 'error' && <p className='mt-2 text-xs font-semibold text-red-600 dark:text-red-400'>Failed</p>}
     </div>
   </article>;
 }
@@ -79,10 +79,10 @@ export default function ImageCompressorPage() {
   const done = images.filter(item => item.status === 'done').length;
 
   return <LocalToolLayout title='Batch Image Compressor' description='Compress image batches locally with sensible memory limits. Files and previews never leave your browser.'>
-    <section className='mx-auto max-w-6xl rounded-xl bg-white p-6 shadow'>
-      <div onDragOver={dragOver} onDragLeave={dragLeave} onDrop={drop} className={`rounded-xl border-4 border-dashed p-8 text-center ${dragging ? 'border-sky-500 bg-sky-50' : 'border-slate-300 bg-slate-50'}`}><input ref={inputRef} type='file' multiple accept='image/*' onChange={change} className='sr-only'/><p className='text-lg font-semibold text-slate-700'>{dragging ? 'Drop images here' : 'Drag images here'}</p><p className='mt-1 text-sm text-slate-500'>Up to 25 files / 150 MB per batch.</p><button type='button' onClick={() => inputRef.current?.click()} className='mt-4 rounded bg-sky-600 px-5 py-2 font-semibold text-white hover:bg-sky-700'>Choose images</button></div>
-      <p className='mt-3 text-sm text-amber-700' aria-live='polite'>{message}</p>
-      {images.length > 0 && <><div className='mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5'>{images.map(item => <ImageCard key={item.id} item={item} onRemove={remove} onDownload={download}/>)}</div><div className='mt-8 flex flex-wrap justify-center gap-3'><button disabled={busy || pending === 0} onClick={() => void compress()} className='rounded bg-sky-600 px-5 py-2 font-semibold text-white disabled:opacity-40'>{busy ? 'Compressing...' : `Compress ${pending} remaining`}</button><button disabled={busy || downloading || done < 2} onClick={() => void downloadZip()} className='rounded bg-emerald-600 px-5 py-2 font-semibold text-white disabled:opacity-40'>{downloading ? 'Creating ZIP...' : `Download ${done} as ZIP`}</button><button disabled={busy || downloading} onClick={clearAll} className='rounded bg-slate-200 px-5 py-2 font-semibold text-slate-700 disabled:opacity-40'>Clear all</button></div></>}
+    <section className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
+      <div onDragOver={dragOver} onDragLeave={dragLeave} onDrop={drop} className={`rounded-xl border-4 border-dashed p-8 text-center ${dragging ? 'border-sky-500 bg-sky-50 dark:bg-sky-950' : 'border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-950'}`}><input ref={inputRef} type='file' multiple accept='image/*' onChange={change} className='sr-only'/><p className='text-lg font-semibold text-slate-700 dark:text-slate-200'>{dragging ? 'Drop images here' : 'Drag images here'}</p><p className='mt-1 text-sm text-slate-500 dark:text-slate-400'>Up to 25 files / 150 MB per batch.</p><button type='button' onClick={() => inputRef.current?.click()} className='mt-4 rounded bg-sky-600 px-5 py-2 font-semibold text-white hover:bg-sky-700'>Choose images</button></div>
+      <p className='mt-3 text-sm text-amber-700 dark:text-amber-300' aria-live='polite'>{message}</p>
+      {images.length > 0 && <><div className='mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5'>{images.map(item => <ImageCard key={item.id} item={item} onRemove={remove} onDownload={download}/>)}</div><div className='mt-8 flex flex-wrap justify-center gap-3'><button disabled={busy || pending === 0} onClick={() => void compress()} className='rounded bg-sky-600 px-5 py-2 font-semibold text-white disabled:opacity-40'>{busy ? 'Compressing...' : `Compress ${pending} remaining`}</button><button disabled={busy || downloading || done < 2} onClick={() => void downloadZip()} className='rounded bg-emerald-600 px-5 py-2 font-semibold text-white disabled:opacity-40'>{downloading ? 'Creating ZIP...' : `Download ${done} as ZIP`}</button><button disabled={busy || downloading} onClick={clearAll} className='rounded bg-slate-200 dark:bg-slate-700 px-5 py-2 font-semibold text-slate-700 dark:text-slate-200 disabled:opacity-40'>Clear all</button></div></>}
     </section>
   </LocalToolLayout>;
 }
diff --git a/src/app/image-converter/page.tsx b/src/app/image-converter/page.tsx
index a392859..1dc0fae 100644
--- a/src/app/image-converter/page.tsx
+++ b/src/app/image-converter/page.tsx
@@ -58,7 +58,7 @@ export default function ImageConverterPage() {
       title='Image Format Converter'
       description='Convert browser-supported image files to PNG, JPEG or WebP without uploading them.'
     >
-      <section className='mx-auto max-w-3xl rounded-xl bg-white p-6 shadow'>
+      <section className='mx-auto max-w-3xl rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
         <input
           type='file'
           accept='image/*'
diff --git a/src/app/image-cropper/page.tsx b/src/app/image-cropper/page.tsx
index acc24e2..fde35ef 100644
--- a/src/app/image-cropper/page.tsx
+++ b/src/app/image-cropper/page.tsx
@@ -142,18 +142,18 @@ export default function ImageCropperPage() {
   }
 
   return (
-    <div className='flex flex-col min-h-screen bg-slate-50'>
+    <div className='flex flex-col min-h-screen bg-slate-50 dark:bg-slate-950'>
       <Navbar />
       <Breadcrumbs />
-      <main className='flex-grow container mx-auto px-4 py-8'>
+      <main id='main-content' className='flex-grow page-shell px-4 py-8'>
         <header className='mb-8 text-center'>
-          <h1 className='text-4xl font-bold text-slate-800'>Image Cropper</h1>
-          <p className='text-lg text-slate-600 mt-1'>Upload an image and select an area to crop.</p>
+          <h1 className='text-4xl font-bold text-slate-800 dark:text-slate-100'>Image Cropper</h1>
+          <p className='text-lg text-slate-600 dark:text-slate-300 mt-1'>Upload an image and select an area to crop.</p>
         </header>
 
-        <section className='bg-white p-6 md:p-8 rounded-lg shadow-xl max-w-4xl mx-auto'>
+        <section className='bg-white dark:bg-slate-900 p-6 md:p-8 rounded-lg shadow-xl w-full min-w-0 mx-auto'>
           <div className='mb-4'>
-            <label htmlFor='image-upload' className='block text-sm font-medium text-slate-700'>
+            <label htmlFor='image-upload' className='block text-sm font-medium text-slate-700 dark:text-slate-200'>
               Select Image
             </label>
             <input
@@ -161,14 +161,14 @@ export default function ImageCropperPage() {
               type='file'
               accept='image/*'
               onChange={onSelectFile}
-              className='mt-1 block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-sky-50 file:text-sky-700 hover:file:bg-sky-100'
+              className='mt-1 block w-full text-sm text-slate-500 dark:text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-sky-50 file:text-sky-700 hover:file:bg-sky-100'
             />
           </div>
 
           {imgSrc && (
             <div className='grid grid-cols-1 md:grid-cols-3 gap-6 mt-6'>
               {/* Cropper UI */}
-              <div className='md:col-span-2 flex justify-center bg-slate-100 p-2 rounded-lg'>
+              <div className='md:col-span-2 flex justify-center bg-slate-100 dark:bg-slate-800 p-2 rounded-lg'>
                 <ReactCrop
                   crop={crop}
                   onChange={(_, percentCrop) => setCrop(percentCrop)}
@@ -188,12 +188,12 @@ export default function ImageCropperPage() {
               </div>
               {/* Controls and Download */}
               <div className='space-y-4'>
-                <h3 className='text-lg font-semibold text-slate-700'>Options</h3>
+                <h3 className='text-lg font-semibold text-slate-700 dark:text-slate-200'>Options</h3>
                 <div>
                   <button
                     onClick={() => setAspect(16 / 9)}
                     className={`w-full p-2 text-sm rounded-md border ${
-                      aspect === 16 / 9 ? 'bg-sky-600 text-white border-sky-600' : 'bg-white'
+                      aspect === 16 / 9 ? 'bg-sky-600 text-white border-sky-600' : 'bg-white dark:bg-slate-900'
                     }`}>
                     16:9
                   </button>
@@ -202,7 +202,7 @@ export default function ImageCropperPage() {
                   <button
                     onClick={() => setAspect(4 / 3)}
                     className={`w-full p-2 text-sm rounded-md border ${
-                      aspect === 4 / 3 ? 'bg-sky-600 text-white border-sky-600' : 'bg-white'
+                      aspect === 4 / 3 ? 'bg-sky-600 text-white border-sky-600' : 'bg-white dark:bg-slate-900'
                     }`}>
                     4:3
                   </button>
@@ -211,7 +211,7 @@ export default function ImageCropperPage() {
                   <button
                     onClick={() => setAspect(1)}
                     className={`w-full p-2 text-sm rounded-md border ${
-                      aspect === 1 ? 'bg-sky-600 text-white border-sky-600' : 'bg-white'
+                      aspect === 1 ? 'bg-sky-600 text-white border-sky-600' : 'bg-white dark:bg-slate-900'
                     }`}>
                     Square
                   </button>
@@ -220,7 +220,7 @@ export default function ImageCropperPage() {
                   <button
                     onClick={() => setAspect(undefined)}
                     className={`w-full p-2 text-sm rounded-md border ${
-                      aspect === undefined ? 'bg-sky-600 text-white border-sky-600' : 'bg-white'
+                      aspect === undefined ? 'bg-sky-600 text-white border-sky-600' : 'bg-white dark:bg-slate-900'
                     }`}>
                     Free
                   </button>
@@ -228,7 +228,7 @@ export default function ImageCropperPage() {
                 {/* START: Added hidden canvas and preview */}
                 {!!completedCrop && (
                   <div className='pt-4 border-t'>
-                    <h3 className='text-lg font-semibold text-slate-700 mb-2'>Preview</h3>
+                    <h3 className='text-lg font-semibold text-slate-700 dark:text-slate-200 mb-2'>Preview</h3>
                     <div className='flex justify-center'>
                       <canvas
                         ref={previewCanvasRef}
@@ -244,7 +244,7 @@ export default function ImageCropperPage() {
                     <button
                       onClick={handleDownloadCrop}
                       disabled={!completedCrop || !completedCrop.width || !completedCrop.height}
-                      className='w-full px-6 py-3 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition-colors disabled:bg-green-300'>
+                      className='w-full px-6 py-3 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition-colors disabled:bg-green-300 dark:disabled:bg-green-900'>
                       Download Cropped Image
                     </button>
                   </div>
@@ -256,7 +256,7 @@ export default function ImageCropperPage() {
         </section>
 
         <div className='mt-12 text-center'>
-          <Link href='/' className='text-sky-600 hover:text-sky-800 hover:underline'>
+          <Link href='/' className='text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200 hover:underline'>
             &larr; Back to All Tools
           </Link>
         </div>
diff --git a/src/app/image-metadata/page.tsx b/src/app/image-metadata/page.tsx
index e9d2496..9e913d5 100644
--- a/src/app/image-metadata/page.tsx
+++ b/src/app/image-metadata/page.tsx
@@ -37,7 +37,7 @@ const ImageResultCard = ({
   onDownloadSingle: (image: ProcessedImage) => void;
 }) => {
   return (
-    <div className='relative bg-white border rounded-lg shadow-sm overflow-hidden flex flex-col'>
+    <div className='relative bg-white dark:bg-slate-900 border rounded-lg shadow-sm overflow-hidden flex flex-col'>
       {/* Remove from list button */}
       <button
         onClick={() => onRemove(image.id)}
@@ -51,21 +51,21 @@ const ImageResultCard = ({
         alt={`Preview of ${image.name}`}
         width={image.width}
         height={image.height}
-        className='w-full h-40 object-cover bg-slate-100'
+        className='w-full h-40 object-cover bg-slate-100 dark:bg-slate-800'
       />
       <div className='p-4 flex flex-col flex-grow'>
-        <p className='text-sm font-semibold text-slate-800 truncate' title={image.name}>
+        <p className='text-sm font-semibold text-slate-800 dark:text-slate-100 truncate' title={image.name}>
           {image.name}
         </p>
-        <p className={`text-xs mt-1 ${image.hasMetadata ? 'text-orange-600' : 'text-green-600'}`}>
+        <p className={`text-xs mt-1 ${image.hasMetadata ? 'text-orange-600 dark:text-orange-400' : 'text-green-600 dark:text-green-400'}`}>
           {image.hasMetadata ? 'Contains Metadata' : 'No Metadata Found'}
         </p>
 
         <div className='flex-grow mt-2'>
           {image.hasMetadata && (
             <details className='text-xs'>
-              <summary className='cursor-pointer text-blue-600 hover:underline'>View Metadata</summary>
-              <pre className='mt-2 p-2 bg-slate-50 rounded-md max-h-48 overflow-auto text-slate-700 font-mono'>
+              <summary className='cursor-pointer text-blue-600 dark:text-blue-400 hover:underline'>View Metadata</summary>
+              <pre className='mt-2 p-2 bg-slate-50 dark:bg-slate-950 rounded-md max-h-48 overflow-auto text-slate-700 dark:text-slate-200 font-mono'>
                 <code>{JSON.stringify(image.metadata, null, 2)}</code>
               </pre>
             </details>
@@ -75,7 +75,7 @@ const ImageResultCard = ({
         <button
           onClick={() => onDownloadSingle(image)}
           disabled={!image.hasMetadata}
-          className='mt-4 w-full px-3 py-2 bg-blue-600 text-white text-xs font-semibold rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors disabled:bg-slate-300 disabled:cursor-not-allowed'>
+          className='mt-4 w-full px-3 py-2 bg-blue-600 text-white text-xs font-semibold rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors disabled:bg-slate-300 dark:disabled:bg-slate-700 disabled:cursor-not-allowed'>
           Download Scrubbed
         </button>
       </div>
@@ -227,23 +227,23 @@ export default function ImageMetadataPage() {
   const imagesWithMetadataCount = processedImages.filter((img) => img.hasMetadata).length;
 
   return (
-    <div className='flex flex-col min-h-screen bg-slate-50'>
+    <div className='flex flex-col min-h-screen bg-slate-50 dark:bg-slate-950'>
       <Navbar />
       <Breadcrumbs />
-      <main className='flex-grow container mx-auto px-4 py-8'>
+      <main id='main-content' className='flex-grow page-shell px-4 py-8'>
         <header className='mb-8 text-center'>
-          <h1 className='text-4xl font-bold text-slate-800'>Image Metadata Remover</h1>
-          <p className='text-lg text-slate-600 mt-1'>Scrub metadata from multiple images at once.</p>
+          <h1 className='text-4xl font-bold text-slate-800 dark:text-slate-100'>Image Metadata Remover</h1>
+          <p className='text-lg text-slate-600 dark:text-slate-300 mt-1'>Scrub metadata from multiple images at once.</p>
         </header>
 
-        <section className='bg-white p-6 md:p-8 rounded-lg shadow-xl max-w-6xl mx-auto'>
+        <section className='bg-white dark:bg-slate-900 p-6 md:p-8 rounded-lg shadow-xl w-full min-w-0 mx-auto'>
           <div
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
             onClick={() => fileInputRef.current?.click()}
             className={`mb-6 border-4 border-dashed rounded-xl p-8 text-center transition-colors duration-200 ease-in-out
-                ${isDragging ? 'border-sky-500 bg-sky-50' : 'border-slate-300 hover:border-sky-400 hover:bg-slate-50'}
+                ${isDragging ? 'border-sky-500 bg-sky-50 dark:bg-sky-950' : 'border-slate-300 dark:border-slate-700 hover:border-sky-400 hover:bg-slate-50 dark:hover:bg-slate-950'}
                  cursor-pointer`}>
             <input
               ref={fileInputRef}
@@ -254,7 +254,7 @@ export default function ImageMetadataPage() {
               className='hidden'
               multiple // Enable multiple file selection
             />
-            <div className='flex flex-col items-center justify-center text-slate-500 pointer-events-none'>
+            <div className='flex flex-col items-center justify-center text-slate-500 dark:text-slate-400 pointer-events-none'>
               <svg
                 className='w-16 h-16 mb-4 text-slate-400'
                 fill='none'
@@ -274,7 +274,7 @@ export default function ImageMetadataPage() {
             </div>
           </div>
 
-          {error && <div className='my-4 p-3 bg-red-100 text-red-700 border border-red-300 rounded-md'>{error}</div>}
+          {error && <div className='my-4 p-3 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 border border-red-300 dark:border-red-700 rounded-md'>{error}</div>}
 
           {processedImages.length > 0 && (
             <div>
@@ -292,11 +292,11 @@ export default function ImageMetadataPage() {
                 <button
                   onClick={handleDownloadAll}
                   disabled={imagesWithMetadataCount === 0}
-                  className='px-8 py-4 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-150 ease-in-out disabled:bg-red-300 disabled:cursor-not-allowed'>
+                  className='px-8 py-4 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-150 ease-in-out disabled:bg-red-300 dark:disabled:bg-red-900 disabled:cursor-not-allowed'>
                   Download All Scrubbed Images ({imagesWithMetadataCount})
                 </button>
                 {imagesWithMetadataCount === 0 && (
-                  <p className='text-sm text-slate-500 mt-2'>No images with removable metadata selected.</p>
+                  <p className='text-sm text-slate-500 dark:text-slate-400 mt-2'>No images with removable metadata selected.</p>
                 )}
               </div>
             </div>
@@ -304,7 +304,7 @@ export default function ImageMetadataPage() {
         </section>
 
         <div className='mt-12 text-center'>
-          <Link href='/' className='text-sky-600 hover:text-sky-800 hover:underline'>
+          <Link href='/' className='text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200 hover:underline'>
             &larr; Back to All Tools
           </Link>
         </div>
diff --git a/src/app/image-resizer/page.tsx b/src/app/image-resizer/page.tsx
index 671069d..549bed5 100644
--- a/src/app/image-resizer/page.tsx
+++ b/src/app/image-resizer/page.tsx
@@ -33,15 +33,15 @@ const SettingInput = ({
   unit?: string;
 }) => (
   <div>
-    <label className='block text-sm font-medium text-slate-600 mb-1'>{label}</label>
+    <label className='block text-sm font-medium text-slate-600 dark:text-slate-300 mb-1'>{label}</label>
     <div className='flex'>
       <input
         type={type}
         value={value}
         onChange={onChange}
-        className='block w-full p-2 border border-slate-300 rounded-l-md focus:ring-sky-500 focus:border-sky-500 outline-none transition duration-150 ease-in-out'
+        className='block w-full p-2 border border-slate-300 dark:border-slate-700 rounded-l-md focus:ring-sky-500 focus:border-sky-500 outline-none transition duration-150 ease-in-out'
       />
-      <span className='inline-flex items-center px-3 rounded-r-md border border-l-0 border-slate-300 bg-slate-50 text-slate-500 sm:text-sm'>
+      <span className='inline-flex items-center px-3 rounded-r-md border border-l-0 border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-950 text-slate-500 dark:text-slate-400 sm:text-sm'>
         {unit}
       </span>
     </div>
@@ -50,14 +50,14 @@ const SettingInput = ({
 
 // Component to display each uploaded image
 const ImagePreviewCard = ({ image, onRemove }: { image: ImageFileState; onRemove: (id: string) => void }) => (
-  <div className='relative bg-white border rounded-lg shadow-sm overflow-hidden'>
+  <div className='relative bg-white dark:bg-slate-900 border rounded-lg shadow-sm overflow-hidden'>
     <button
       onClick={() => onRemove(image.id)}
       className='absolute top-1.5 right-1.5 z-10 w-6 h-6 bg-black/50 text-white rounded-full flex items-center justify-center text-lg font-bold hover:bg-black/75 transition-colors leading-none'
       title='Remove from list'>
       &times;
     </button>
-    <div className='w-full h-32 bg-slate-100 flex items-center justify-center'>
+    <div className='w-full h-32 bg-slate-100 dark:bg-slate-800 flex items-center justify-center'>
       {/* FIX: Replaced <img> with next/image <Image> */}
       <Image
         src={image.previewUrl}
@@ -68,10 +68,10 @@ const ImagePreviewCard = ({ image, onRemove }: { image: ImageFileState; onRemove
       />
     </div>
     <div className='p-3 text-center'>
-      <p className='text-xs font-semibold text-slate-700 truncate' title={image.file.name}>
+      <p className='text-xs font-semibold text-slate-700 dark:text-slate-200 truncate' title={image.file.name}>
         {image.file.name}
       </p>
-      <p className='text-xs text-slate-500'>
+      <p className='text-xs text-slate-500 dark:text-slate-400'>
         {image.originalWidth} x {image.originalHeight}px
       </p>
     </div>
@@ -230,18 +230,18 @@ export default function ImageResizerPage() {
   };
 
   return (
-    <div className='flex flex-col min-h-screen bg-slate-50'>
+    <div className='flex flex-col min-h-screen bg-slate-50 dark:bg-slate-950'>
       <Navbar />
       <Breadcrumbs />
-      <main className='flex-grow container mx-auto px-4 py-8'>
+      <main id='main-content' className='flex-grow page-shell px-4 py-8'>
         <header className='mb-8 text-center'>
-          <h1 className='text-4xl font-bold text-slate-800'>Batch Image Resizer</h1>
-          <p className='text-lg text-slate-600 mt-1'>
+          <h1 className='text-4xl font-bold text-slate-800 dark:text-slate-100'>Batch Image Resizer</h1>
+          <p className='text-lg text-slate-600 dark:text-slate-300 mt-1'>
             Resize multiple images to a specified width and download as a zip file.
           </p>
         </header>
 
-        <section className='bg-white p-6 md:p-8 rounded-lg shadow-xl max-w-6xl mx-auto'>
+        <section className='bg-white dark:bg-slate-900 p-6 md:p-8 rounded-lg shadow-xl w-full min-w-0 mx-auto'>
           {images.length === 0 ? (
             <div
               onDragOver={handleDragOver}
@@ -251,8 +251,8 @@ export default function ImageResizerPage() {
               className={`border-4 border-dashed rounded-xl p-8 text-center transition-colors duration-200 ease-in-out
                         ${
                           isDragging
-                            ? 'border-sky-500 bg-sky-50'
-                            : 'border-slate-300 hover:border-sky-400 hover:bg-slate-50'
+                            ? 'border-sky-500 bg-sky-50 dark:bg-sky-950'
+                            : 'border-slate-300 dark:border-slate-700 hover:border-sky-400 hover:bg-slate-50 dark:hover:bg-slate-950'
                         }
                         cursor-pointer`}>
               <input
@@ -264,7 +264,7 @@ export default function ImageResizerPage() {
                 className='hidden'
                 multiple
               />
-              <div className='flex flex-col items-center justify-center text-slate-500 pointer-events-none'>
+              <div className='flex flex-col items-center justify-center text-slate-500 dark:text-slate-400 pointer-events-none'>
                 <svg
                   className='w-16 h-16 mb-4 text-slate-400'
                   fill='none'
@@ -286,7 +286,7 @@ export default function ImageResizerPage() {
             <div className='grid grid-cols-1 md:grid-cols-4 gap-8'>
               {/* Controls */}
               <div className='md:col-span-1 space-y-4'>
-                <h2 className='text-xl font-semibold text-slate-700'>Settings</h2>
+                <h2 className='text-xl font-semibold text-slate-700 dark:text-slate-200'>Settings</h2>
                 <SettingInput label='Target Width' value={targetWidth} onChange={handleWidthChange} />
                 <SettingInput label='Target Height' value={targetHeight} onChange={handleHeightChange} />
                 <div className='flex items-center'>
@@ -296,9 +296,9 @@ export default function ImageResizerPage() {
                     type='checkbox'
                     checked={maintainAspectRatio}
                     onChange={(e) => setMaintainAspectRatio(e.target.checked)}
-                    className='h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-500'
+                    className='h-4 w-4 rounded border-gray-300 dark:border-slate-700 text-sky-600 dark:text-sky-400 focus:ring-sky-500'
                   />
-                  <label htmlFor='aspect-ratio' className='ml-2 block text-sm text-gray-900'>
+                  <label htmlFor='aspect-ratio' className='ml-2 block text-sm text-gray-900 dark:text-slate-100'>
                     Maintain aspect ratio
                   </label>
                 </div>
@@ -306,13 +306,13 @@ export default function ImageResizerPage() {
                   <button
                     onClick={handleDownloadAll}
                     disabled={isResizing || images.length === 0}
-                    className='w-full px-6 py-3 bg-sky-600 text-white font-semibold rounded-lg hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-opacity-50 transition-colors disabled:bg-sky-300'>
+                    className='w-full px-6 py-3 bg-sky-600 text-white font-semibold rounded-lg hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-opacity-50 transition-colors disabled:bg-sky-300 dark:disabled:bg-sky-900'>
                     {isResizing ? 'Resizing...' : `Resize & Download ${images.length} Images`}
                   </button>
                   <button
                     onClick={() => setImages([])}
                     disabled={isResizing}
-                    className='w-full text-sm text-slate-600 hover:text-slate-800 mt-3'>
+                    className='w-full text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-100 mt-3'>
                     Clear All
                   </button>
                 </div>
@@ -331,7 +331,7 @@ export default function ImageResizerPage() {
         </section>
 
         <div className='mt-12 text-center'>
-          <Link href='/' className='text-sky-600 hover:text-sky-800 hover:underline'>
+          <Link href='/' className='text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200 hover:underline'>
             &larr; Back to All Tools
           </Link>
         </div>
diff --git a/src/app/json-toolbox/page.tsx b/src/app/json-toolbox/page.tsx
index 9d38e4f..c2198bc 100644
--- a/src/app/json-toolbox/page.tsx
+++ b/src/app/json-toolbox/page.tsx
@@ -2,11 +2,33 @@
 import { useMemo, useState } from 'react';
 import LocalToolLayout from '@/components/LocalToolLayout';
 import { diffJson } from '@/lib/json-diff';
+import { inferJson } from '@/lib/json-inference';
+import { downloadLocal } from '@/lib/local-files';
 
-function sortObject(value: unknown): unknown { if (Array.isArray(value)) return value.map(sortObject); if (value && typeof value === 'object') return Object.fromEntries(Object.entries(value as Record<string, unknown>).sort(([a],[b]) => a.localeCompare(b)).map(([key, item]) => [key, sortObject(item)])); return value; }
-type Mode = 'pretty' | 'minify' | 'sort' | 'diff';
+function sortObject(value: unknown): unknown { if (Array.isArray(value)) return value.map(sortObject); if (value && typeof value === 'object') return Object.fromEntries(Object.entries(value as Record<string, unknown>).sort(([a],[b]) => a.localeCompare(b)).map(([key,item]) => [key,sortObject(item)])); return value; }
+const MODES = { pretty: 'Pretty print', minify: 'Minify', sort: 'Sort keys', diff: 'Structural diff', types: 'TypeScript', schema: 'JSON Schema' };
+type Mode = keyof typeof MODES;
 export default function JsonToolboxPage() {
-  const [input, setInput] = useState('{"name":"ToolStack","privacy":true,"count":41}'); const [compare, setCompare] = useState('{"name":"ToolStack","privacy":true,"count":42,"offline":true}'); const [mode, setMode] = useState<Mode>('pretty');
-  const result = useMemo(() => { try { const parsed = JSON.parse(input); if (mode === 'diff') { const other = JSON.parse(compare); return { output: JSON.stringify(diffJson(parsed, other), null, 2), error: '' }; } return { output: mode === 'minify' ? JSON.stringify(parsed) : JSON.stringify(mode === 'sort' ? sortObject(parsed) : parsed, null, 2), error: '' }; } catch (err) { return { output: '', error: (err as Error).message }; } }, [input, compare, mode]);
-  return <LocalToolLayout title='JSON Toolbox' description='Validate, format, minify, sort and structurally compare JSON entirely in your browser.'><section className='mx-auto max-w-6xl rounded-xl bg-white p-6 shadow'><div className='mb-4 flex flex-wrap gap-2'>{(['pretty','minify','sort','diff'] as Mode[]).map(value => <button key={value} onClick={() => setMode(value)} className={`rounded px-4 py-2 ${mode === value ? 'bg-sky-600 text-white' : 'bg-slate-100 text-slate-700'}`}>{value === 'pretty' ? 'Pretty print' : value === 'sort' ? 'Sort keys' : value === 'diff' ? 'Structural diff' : 'Minify'}</button>)}</div><div className={`grid gap-4 ${mode === 'diff' ? 'lg:grid-cols-3' : 'md:grid-cols-2'}`}><textarea aria-label='JSON input' value={input} onChange={event => setInput(event.target.value)} className='h-96 rounded border p-4 font-mono'/>{mode === 'diff' && <textarea aria-label='JSON comparison input' value={compare} onChange={event => setCompare(event.target.value)} className='h-96 rounded border p-4 font-mono'/>}<pre className='h-96 overflow-auto whitespace-pre-wrap rounded border bg-slate-50 p-4 font-mono text-sm'>{result.error ? `Invalid JSON: ${result.error}` : result.output}</pre></div>{!result.error && <button onClick={() => navigator.clipboard.writeText(result.output)} className='mt-4 rounded bg-slate-800 px-4 py-2 text-white'>Copy result</button>}</section></LocalToolLayout>;
+  const [input,setInput] = useState('{"name":"ToolStack","privacy":true,"count":47}'); const [compare,setCompare] = useState('{"name":"ToolStack","privacy":true,"count":47,"offline":true}'); const [mode,setMode] = useState<Mode>('pretty');
+  const [root,setRoot] = useState('ApiResponse'); const [style,setStyle] = useState<'interface' | 'type'>('interface'); const [message,setMessage] = useState('');
+  const generation = mode === 'types' || mode === 'schema';
+  const result = useMemo(() => {
+    try {
+      if (generation) { const inferred = inferJson(input,root,style); return { output: mode === 'types' ? inferred.typescript : inferred.schema, error: '' }; }
+      const parsed = JSON.parse(input);
+      if (mode === 'diff') return { output: JSON.stringify(diffJson(parsed,JSON.parse(compare)),null,2), error: '' };
+      return { output: mode === 'minify' ? JSON.stringify(parsed) : JSON.stringify(mode === 'sort' ? sortObject(parsed) : parsed,null,2), error: '' };
+    } catch (err) { return { output: '', error: (err as Error).message }; }
+  },[input,compare,mode,generation,root,style]);
+  return <LocalToolLayout title='JSON Toolbox' description='Format, compare and validate JSON, or generate TypeScript types and JSON Schema.'>
+    <section className='panel mx-auto w-full min-w-0 space-y-4'>
+      <div className='flex flex-wrap gap-2' aria-label='JSON operation'>{Object.entries(MODES).map(([value,label]) => <button key={value} className={`action ${mode === value ? '' : 'action-secondary'}`} aria-pressed={mode === value} onClick={() => { setMode(value as Mode); setMessage(''); }}>{label}</button>)}</div>
+      {generation && <div className='flex flex-wrap items-end gap-4'><label className='text-sm font-semibold'>Root name<input className='field mt-2' value={root} onChange={event => { setRoot(event.target.value); setMessage(''); }}/></label>{mode === 'types' && <label className='text-sm font-semibold'>Declaration<select className='field mt-2' value={style} onChange={event => { setStyle(event.target.value as 'interface' | 'type'); setMessage(''); }}><option value='interface'>Interface</option><option value='type'>Type alias</option></select></label>}<button className='action action-secondary' onClick={() => { setInput(JSON.stringify([{ id: 1, name: 'Example', active: true, tags: ['demo'] },{ id: 2, name: 'Another', active: false, notes: null }],null,2)); setMessage(''); }}>Load mixed-object example</button></div>}
+      <div className={`grid gap-4 ${mode === 'diff' ? 'lg:grid-cols-3' : 'md:grid-cols-2'}`}><label className='text-sm font-semibold'>JSON input<textarea aria-label='JSON input' className='field mt-2 h-96 font-mono text-xs' value={input} onChange={event => { setInput(event.target.value); setMessage(''); }}/></label>{mode === 'diff' && <label className='text-sm font-semibold'>Compare with<textarea aria-label='JSON comparison input' className='field mt-2 h-96 font-mono text-xs' value={compare} onChange={event => { setCompare(event.target.value); setMessage(''); }}/></label>}<label className='text-sm font-semibold'>{MODES[mode]} result<textarea aria-label='JSON result' readOnly className='field mt-2 h-96 font-mono text-xs' value={result.output}/></label></div>
+      {result.error && <p role='alert' className='note text-red-700 dark:text-red-300'>{result.error}</p>}
+      {!result.error && <div className='flex flex-wrap gap-3'><button className='action' onClick={async () => { try { await navigator.clipboard.writeText(result.output); setMessage('Copied.'); } catch { setMessage('Could not copy. Select the result to copy it manually.'); } }}>Copy result</button><button className='action action-secondary' onClick={() => downloadLocal(result.output,mode === 'types' ? 'types.ts' : mode === 'schema' ? 'schema.json' : 'result.json')}>Download {mode === 'types' ? '.ts' : '.json'}</button></div>}
+      {generation && <p className='text-sm text-slate-500 dark:text-slate-400'>Inferred from this sample. Missing keys across array objects become optional. Empty arrays use unknown items. Review validation rules before using the schema.</p>}
+      {message && <p role='status' className='text-sm'>{message}</p>}
+    </section>
+  </LocalToolLayout>;
 }
diff --git a/src/app/jwt-inspector/page.tsx b/src/app/jwt-inspector/page.tsx
index 4aa510d..34fb921 100644
--- a/src/app/jwt-inspector/page.tsx
+++ b/src/app/jwt-inspector/page.tsx
@@ -27,11 +27,11 @@ export default function JwtInspectorPage() {
   };
 
   return <LocalToolLayout title='JWT Inspector' description='Decode JWT header and payload data locally. Decoding does not verify the token signature.'>
-    <section className='mx-auto max-w-5xl rounded-xl bg-white p-6 shadow'>
+    <section className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
       <textarea value={token} onChange={e => handleTokenChange(e.target.value)} placeholder='Paste a JWT here' className='h-32 w-full rounded border p-3 font-mono text-sm'/>
-      {token && data.error && <p className='mt-3 text-red-600'>{data.error}</p>}
-      {data.payload && <div className='mt-5 grid gap-4 md:grid-cols-2'><div><h2 className='font-semibold'>Header</h2><pre className='mt-2 overflow-auto rounded bg-slate-50 p-4 text-sm'>{JSON.stringify(data.header, null, 2)}</pre></div><div><h2 className='font-semibold'>Payload {expired === true && <span className='ml-2 text-red-600'>(expired)</span>}{expired === false && <span className='ml-2 text-green-700'>(not expired)</span>}</h2><pre className='mt-2 overflow-auto rounded bg-slate-50 p-4 text-sm'>{JSON.stringify(data.payload, null, 2)}</pre></div></div>}
-      <p className='mt-5 rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900'>This tool only decodes token contents. It does not verify the cryptographic signature or trustworthiness of the claims.</p>
+      {token && data.error && <p className='mt-3 text-red-600 dark:text-red-400'>{data.error}</p>}
+      {data.payload && <div className='mt-5 grid gap-4 md:grid-cols-2'><div><h2 className='font-semibold'>Header</h2><pre className='mt-2 overflow-auto rounded bg-slate-50 dark:bg-slate-950 p-4 text-sm'>{JSON.stringify(data.header, null, 2)}</pre></div><div><h2 className='font-semibold'>Payload {expired === true && <span className='ml-2 text-red-600 dark:text-red-400'>(expired)</span>}{expired === false && <span className='ml-2 text-green-700 dark:text-green-300'>(not expired)</span>}</h2><pre className='mt-2 overflow-auto rounded bg-slate-50 dark:bg-slate-950 p-4 text-sm'>{JSON.stringify(data.payload, null, 2)}</pre></div></div>}
+      <p className='mt-5 rounded border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950 p-3 text-sm text-amber-900 dark:text-amber-200'>This tool only decodes token contents. It does not verify the cryptographic signature or trustworthiness of the claims.</p>
     </section>
   </LocalToolLayout>;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2599102..7ddc7fa 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,8 +1,8 @@
 import type { Metadata, Viewport } from 'next';
-import { Inter } from 'next/font/google';
+import '@fontsource-variable/inter';
 import PwaRegistration from '@/components/PwaRegistration';
 import './globals.css';
-const inter = Inter({ weight: ['400','600','700','800'], subsets: ['latin'], variable: '--font-inter', display: 'swap' });
 export const metadata: Metadata = { title: { default: 'ToolStack - Privacy-First Browser Tools', template: '%s | ToolStack' }, description: 'Free privacy-focused utilities that process your working data locally in the browser.', applicationName: 'ToolStack', manifest: '/manifest.webmanifest', icons: { icon: '/favicon.svg' }, openGraph: { title: 'ToolStack - Privacy-First Browser Tools', description: 'Browser tools with no file uploads, accounts, or tracking.', type: 'website' } };
-export const viewport: Viewport = { themeColor: '#0284c7', colorScheme: 'light' };
-export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { return <html lang='en'><body className={`${inter.variable} font-sans antialiased`}><PwaRegistration/>{children}</body></html>; }
+export const viewport: Viewport = { themeColor: [{ media: '(prefers-color-scheme: light)', color: '#f8fafc' }, { media: '(prefers-color-scheme: dark)', color: '#020617' }], colorScheme: 'light dark' };
+const themeScript = `(function(){var m=matchMedia('(prefers-color-scheme: dark)');function apply(){var t=document.documentElement.dataset.appearance||'system';try{t=localStorage.getItem('toolstack-theme')||'system'}catch(e){}t=t==='light'||t==='dark'?t:'system';document.documentElement.dataset.appearance=t;document.documentElement.dataset.theme=t==='system'?(m.matches?'dark':'light'):t}apply();m.addEventListener('change',apply);window.addEventListener('storage',apply)})();`;
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { return <html lang='en' suppressHydrationWarning><head><script dangerouslySetInnerHTML={{ __html: themeScript }}/></head><body className='font-sans antialiased'><a href='#main-content' className='sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded focus:bg-white dark:focus:bg-slate-900 focus:p-3 focus:text-slate-900 dark:focus:text-slate-100'>Skip to content</a><PwaRegistration/>{children}</body></html>; }
diff --git a/src/app/license/page.tsx b/src/app/license/page.tsx
index 9871a1a..b47aed8 100644
--- a/src/app/license/page.tsx
+++ b/src/app/license/page.tsx
@@ -8,4 +8,4 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.`;
-export default function LicensePage() { return <div className='flex min-h-screen flex-col bg-slate-50'><Navbar/><Breadcrumbs/><main className='container mx-auto flex-grow px-4 py-8'><section className='mx-auto max-w-4xl rounded-xl bg-white p-6 shadow'><h1 className='text-3xl font-bold text-slate-900'>MIT License</h1><pre className='mt-6 whitespace-pre-wrap font-sans text-sm leading-7 text-slate-700'>{LICENSE}</pre></section></main><Footer/></div>; }
+export default function LicensePage() { return <div className='flex min-h-screen flex-col bg-slate-50 dark:bg-slate-950'><Navbar/><Breadcrumbs/><main id='main-content' className='page-shell flex-grow px-4 py-8'><section className='mx-auto max-w-4xl rounded-xl bg-white dark:bg-slate-900 p-6 shadow'><h1 className='text-3xl font-bold text-slate-900 dark:text-slate-100'>MIT License</h1><pre className='mt-6 whitespace-pre-wrap font-sans text-sm leading-7 text-slate-700 dark:text-slate-200'>{LICENSE}</pre></section></main><Footer/></div>; }
diff --git a/src/app/list-cleaner/page.tsx b/src/app/list-cleaner/page.tsx
index 5df0011..a061c81 100644
--- a/src/app/list-cleaner/page.tsx
+++ b/src/app/list-cleaner/page.tsx
@@ -83,61 +83,61 @@ export default function ListCleanerPage() {
   };
 
   return (
-    <div className='flex flex-col min-h-screen bg-slate-50'>
+    <div className='flex flex-col min-h-screen bg-slate-50 dark:bg-slate-950'>
       <Navbar />
       <Breadcrumbs />
-      <main className='flex-grow container mx-auto px-4 py-8'>
+      <main id='main-content' className='flex-grow page-shell px-4 py-8'>
         <header className='mb-8 text-center'>
-          <h1 className='text-4xl font-bold text-slate-800'>Quick List Cleaner & Formatter</h1>
-          <p className='text-lg text-slate-600 mt-1'>Easily sort, clean, and format your lists of text.</p>
+          <h1 className='text-4xl font-bold text-slate-800 dark:text-slate-100'>Quick List Cleaner & Formatter</h1>
+          <p className='text-lg text-slate-600 dark:text-slate-300 mt-1'>Easily sort, clean, and format your lists of text.</p>
         </header>
 
-        <section className='grid grid-cols-1 md:grid-cols-2 gap-4 max-w-7xl mx-auto'>
+        <section className='grid grid-cols-1 md:grid-cols-2 gap-4 w-full min-w-0 mx-auto'>
           {/* Input Area */}
           <div className='flex flex-col'>
-            <h2 className='font-semibold text-slate-700 bg-slate-100 p-2 border border-b-0 rounded-t-lg'>Your List</h2>
+            <h2 className='font-semibold text-slate-700 dark:text-slate-200 bg-slate-100 dark:bg-slate-800 p-2 border border-b-0 rounded-t-lg'>Your List</h2>
             <textarea
               value={inputText}
               onChange={(e) => setInputText(e.target.value)}
-              className='w-full h-96 p-4 border border-slate-300 rounded-b-lg font-mono focus:ring-2 focus:ring-sky-500 resize-none'
+              className='w-full h-96 p-4 border border-slate-300 dark:border-slate-700 rounded-b-lg font-mono focus:ring-2 focus:ring-sky-500 resize-none'
               placeholder='Paste your list here, one item per line...'
             />
           </div>
           {/* Output Area */}
           <div className='flex flex-col'>
-            <div className='flex-shrink-0 flex justify-between items-center bg-slate-100 p-2 border border-b-0 rounded-t-lg'>
-              <h2 className='font-semibold text-slate-700'>Formatted List</h2>
+            <div className='flex-shrink-0 flex justify-between items-center bg-slate-100 dark:bg-slate-800 p-2 border border-b-0 rounded-t-lg'>
+              <h2 className='font-semibold text-slate-700 dark:text-slate-200'>Formatted List</h2>
               <button
                 onClick={handleCopy}
                 disabled={!outputText}
-                className='px-3 py-1 text-xs font-medium text-slate-600 bg-white rounded-md border border-slate-300 hover:bg-slate-50 disabled:opacity-50'>
+                className='px-3 py-1 text-xs font-medium text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-900 rounded-md border border-slate-300 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-950 disabled:opacity-50'>
                 Copy
               </button>
             </div>
             <textarea
               readOnly
               value={outputText}
-              className='w-full h-96 p-4 border border-slate-300 rounded-b-lg font-mono bg-slate-50 resize-none'
+              className='w-full h-96 p-4 border border-slate-300 dark:border-slate-700 rounded-b-lg font-mono bg-slate-50 dark:bg-slate-950 resize-none'
             />
-            {copySuccess && <p className='text-right text-xs text-green-600 mt-1'>{copySuccess}</p>}
+            {copySuccess && <p className='text-right text-xs text-green-600 dark:text-green-400 mt-1'>{copySuccess}</p>}
           </div>
         </section>
 
         {/* Controls */}
-        <section className='bg-white p-6 rounded-lg shadow-xl max-w-4xl mx-auto mt-6'>
+        <section className='bg-white dark:bg-slate-900 p-6 rounded-lg shadow-xl w-full min-w-0 mx-auto mt-6'>
           <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6'>
             {/* Column 1: Main Actions */}
             <div className='space-y-3'>
-              <h3 className='font-semibold text-slate-800'>Cleaning</h3>
+              <h3 className='font-semibold text-slate-800 dark:text-slate-100'>Cleaning</h3>
               <div className='flex items-center'>
                 <input
                   id='trim-whitespace'
                   type='checkbox'
                   checked={trimWhitespace}
                   onChange={(e) => setTrimWhitespace(e.target.checked)}
-                  className='h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-500'
+                  className='h-4 w-4 rounded border-gray-300 dark:border-slate-700 text-sky-600 dark:text-sky-400 focus:ring-sky-500'
                 />
-                <label htmlFor='trim-whitespace' className='ml-2 block text-sm text-gray-900'>
+                <label htmlFor='trim-whitespace' className='ml-2 block text-sm text-gray-900 dark:text-slate-100'>
                   Trim Whitespace
                 </label>
               </div>
@@ -147,9 +147,9 @@ export default function ListCleanerPage() {
                   type='checkbox'
                   checked={removeDuplicates}
                   onChange={(e) => setRemoveDuplicates(e.target.checked)}
-                  className='h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-500'
+                  className='h-4 w-4 rounded border-gray-300 dark:border-slate-700 text-sky-600 dark:text-sky-400 focus:ring-sky-500'
                 />
-                <label htmlFor='remove-duplicates' className='ml-2 block text-sm text-gray-900'>
+                <label htmlFor='remove-duplicates' className='ml-2 block text-sm text-gray-900 dark:text-slate-100'>
                   Remove Duplicates
                 </label>
               </div>
@@ -157,11 +157,11 @@ export default function ListCleanerPage() {
 
             {/* Column 2: Sorting */}
             <div className='space-y-3'>
-              <h3 className='font-semibold text-slate-800'>Sorting</h3>
+              <h3 className='font-semibold text-slate-800 dark:text-slate-100'>Sorting</h3>
               <select
                 value={sortOrder}
                 onChange={(e) => setSortOrder(e.target.value as SortOrder)}
-                className='mt-1 block w-full p-2 border border-slate-300 rounded-md shadow-sm focus:ring-sky-500'>
+                className='mt-1 block w-full p-2 border border-slate-300 dark:border-slate-700 rounded-md shadow-sm focus:ring-sky-500'>
                 <option value='none'>No Sorting</option>
                 <option value='az'>Alphabetical (A-Z)</option>
                 <option value='za'>Alphabetical (Z-A)</option>
@@ -172,9 +172,9 @@ export default function ListCleanerPage() {
 
             {/* Column 3: Formatting */}
             <div className='space-y-3'>
-              <h3 className='font-semibold text-slate-800'>Formatting</h3>
+              <h3 className='font-semibold text-slate-800 dark:text-slate-100'>Formatting</h3>
               <div>
-                <label htmlFor='prefix' className='block text-xs font-medium text-slate-600'>
+                <label htmlFor='prefix' className='block text-xs font-medium text-slate-600 dark:text-slate-300'>
                   Add Prefix
                 </label>
                 <input
@@ -182,11 +182,11 @@ export default function ListCleanerPage() {
                   id='prefix'
                   value={prefix}
                   onChange={(e) => setPrefix(e.target.value)}
-                  className='mt-1 block w-full p-2 border border-slate-300 rounded-md shadow-sm focus:ring-sky-500'
+                  className='mt-1 block w-full p-2 border border-slate-300 dark:border-slate-700 rounded-md shadow-sm focus:ring-sky-500'
                 />
               </div>
               <div>
-                <label htmlFor='suffix' className='block text-xs font-medium text-slate-600'>
+                <label htmlFor='suffix' className='block text-xs font-medium text-slate-600 dark:text-slate-300'>
                   Add Suffix
                 </label>
                 <input
@@ -194,7 +194,7 @@ export default function ListCleanerPage() {
                   id='suffix'
                   value={suffix}
                   onChange={(e) => setSuffix(e.target.value)}
-                  className='mt-1 block w-full p-2 border border-slate-300 rounded-md shadow-sm focus:ring-sky-500'
+                  className='mt-1 block w-full p-2 border border-slate-300 dark:border-slate-700 rounded-md shadow-sm focus:ring-sky-500'
                 />
               </div>
             </div>
@@ -202,7 +202,7 @@ export default function ListCleanerPage() {
         </section>
 
         <div className='mt-12 text-center'>
-          <Link href='/' className='text-sky-600 hover:text-sky-800 hover:underline'>
+          <Link href='/' className='text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200 hover:underline'>
             &larr; Back to All Tools
           </Link>
         </div>
diff --git a/src/app/lorem-ipsum-generator/page.tsx b/src/app/lorem-ipsum-generator/page.tsx
index 7ce9298..34555b0 100644
--- a/src/app/lorem-ipsum-generator/page.tsx
+++ b/src/app/lorem-ipsum-generator/page.tsx
@@ -52,15 +52,15 @@ export default function LoremIpsumGeneratorPage() {
 
   const amountLabel = genType === 'paragraphs' ? 'Number of Paragraphs:' : genType === 'sentences' ? 'Number of Sentences:' : 'Number of Words:';
 
-  return <div className='flex min-h-screen flex-col bg-slate-50'>
+  return <div className='flex min-h-screen flex-col bg-slate-50 dark:bg-slate-950'>
     <Navbar/><Breadcrumbs/>
-    <main className='container mx-auto flex-grow px-4 py-8'>
-      <header className='mb-8 text-center'><h1 className='text-4xl font-bold text-slate-800'>Lorem Ipsum Generator</h1><p className='mt-1 text-lg text-slate-600'>Create placeholder text for your designs and mockups.</p></header>
-      <section className='mx-auto max-w-4xl rounded-lg bg-white p-6 shadow-xl md:p-8'>
-        <div className='mb-6 flex flex-wrap items-center justify-center gap-4 rounded-lg border bg-slate-50 p-4 sm:gap-6'><div className='flex items-center gap-2'><label htmlFor='amount' className='whitespace-nowrap font-medium text-slate-700'>{amountLabel}</label><input type='number' id='amount' value={amount} onChange={e => setAmount(Math.max(1, parseInt(e.target.value) || 1))} className='w-20 rounded-md border border-slate-300 p-2 focus:ring-2 focus:ring-sky-500'/></div><div className='flex items-center gap-x-4'><span className='font-medium text-slate-700'>Type:</span><div className='flex items-center gap-x-3'>{(['paragraphs','sentences','words'] as const).map(type => <label key={type} className='flex items-center text-sm text-gray-900'><input name='gen-type' type='radio' checked={genType === type} onChange={() => setGenType(type)} className='h-4 w-4 border-gray-300 text-sky-600 focus:ring-sky-500'/><span className='ml-2 capitalize'>{type}</span></label>)}</div></div><button onClick={handleGenerate} className='rounded-lg bg-sky-600 px-6 py-2 font-semibold text-white hover:bg-sky-700'>Generate</button></div>
-        <div className='relative'><textarea readOnly value={outputText} className='h-80 w-full resize-none rounded-lg border border-slate-200 bg-slate-50 p-4' placeholder='Generated text will appear here...'/><button onClick={handleCopy} disabled={!outputText} className='absolute right-3 top-3 rounded-md border border-slate-300 bg-white px-3 py-1 text-xs font-medium text-slate-600 hover:bg-slate-100 disabled:opacity-50'>Copy</button>{copySuccess && <p className='absolute bottom-3 right-3 rounded-md bg-green-100 px-2 py-1 text-xs text-green-700 shadow-lg'>{copySuccess}</p>}</div>
+    <main id='main-content' className='page-shell flex-grow px-4 py-8'>
+      <header className='mb-8 text-center'><h1 className='text-4xl font-bold text-slate-800 dark:text-slate-100'>Lorem Ipsum Generator</h1><p className='mt-1 text-lg text-slate-600 dark:text-slate-300'>Create placeholder text for your designs and mockups.</p></header>
+      <section className='mx-auto w-full min-w-0 rounded-lg bg-white dark:bg-slate-900 p-6 shadow-xl md:p-8'>
+        <div className='mb-6 flex flex-wrap items-center justify-center gap-4 rounded-lg border bg-slate-50 dark:bg-slate-950 p-4 sm:gap-6'><div className='flex items-center gap-2'><label htmlFor='amount' className='whitespace-nowrap font-medium text-slate-700 dark:text-slate-200'>{amountLabel}</label><input type='number' id='amount' value={amount} onChange={e => setAmount(Math.max(1, parseInt(e.target.value) || 1))} className='w-20 rounded-md border border-slate-300 dark:border-slate-700 p-2 focus:ring-2 focus:ring-sky-500'/></div><div className='flex items-center gap-x-4'><span className='font-medium text-slate-700 dark:text-slate-200'>Type:</span><div className='flex items-center gap-x-3'>{(['paragraphs','sentences','words'] as const).map(type => <label key={type} className='flex items-center text-sm text-gray-900 dark:text-slate-100'><input name='gen-type' type='radio' checked={genType === type} onChange={() => setGenType(type)} className='h-4 w-4 border-gray-300 dark:border-slate-700 text-sky-600 dark:text-sky-400 focus:ring-sky-500'/><span className='ml-2 capitalize'>{type}</span></label>)}</div></div><button onClick={handleGenerate} className='rounded-lg bg-sky-600 px-6 py-2 font-semibold text-white hover:bg-sky-700'>Generate</button></div>
+        <div className='relative'><textarea readOnly value={outputText} className='h-80 w-full resize-none rounded-lg border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 p-4' placeholder='Generated text will appear here...'/><button onClick={handleCopy} disabled={!outputText} className='absolute right-3 top-3 rounded-md border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-1 text-xs font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 disabled:opacity-50'>Copy</button>{copySuccess && <p className='absolute bottom-3 right-3 rounded-md bg-green-100 dark:bg-green-900 px-2 py-1 text-xs text-green-700 dark:text-green-300 shadow-lg'>{copySuccess}</p>}</div>
       </section>
-      <div className='mt-12 text-center'><Link href='/' className='text-sky-600 hover:text-sky-800 hover:underline'>&larr; Back to All Tools</Link></div>
+      <div className='mt-12 text-center'><Link href='/' className='text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200 hover:underline'>&larr; Back to All Tools</Link></div>
     </main>
     <Footer/>
   </div>;
diff --git a/src/app/markdown-editor/page.tsx b/src/app/markdown-editor/page.tsx
index e859797..2ff3a45 100644
--- a/src/app/markdown-editor/page.tsx
+++ b/src/app/markdown-editor/page.tsx
@@ -18,9 +18,9 @@ export default function MarkdownEditorPage() {
   };
 
   return <LocalToolLayout title='Markdown Editor' description='Edit Markdown locally with a live preview. Marked renders the Markdown and DOMPurify sanitizes the resulting HTML before it reaches the page.'>
-    <section className='mx-auto grid max-w-7xl gap-4 md:grid-cols-2'>
-      <div className='flex min-h-[60vh] flex-col'><h2 className='rounded-t border bg-slate-100 p-2 font-semibold'>Markdown</h2><textarea aria-label='Markdown input' value={markdown} onChange={e => updateMarkdown(e.target.value)} className='min-h-0 flex-1 rounded-b border p-4 font-mono'/></div>
-      <div className='flex min-h-[60vh] flex-col'><div className='flex items-center justify-between rounded-t border bg-slate-100 p-2'><h2 className='font-semibold'>Sanitized preview</h2><button onClick={() => navigator.clipboard.writeText(html)} className='rounded border bg-white px-3 py-1 text-xs'>Copy HTML</button></div><div className='prose max-w-none min-h-0 flex-1 overflow-auto rounded-b border bg-white p-4' dangerouslySetInnerHTML={{ __html: html }}/></div>
+    <section className='mx-auto grid w-full min-w-0 gap-4 md:grid-cols-2'>
+      <div className='flex min-h-[60vh] flex-col'><h2 className='rounded-t border bg-slate-100 dark:bg-slate-800 p-2 font-semibold'>Markdown</h2><textarea aria-label='Markdown input' value={markdown} onChange={e => updateMarkdown(e.target.value)} className='min-h-0 flex-1 rounded-b border p-4 font-mono'/></div>
+      <div className='flex min-h-[60vh] flex-col'><div className='flex items-center justify-between rounded-t border bg-slate-100 dark:bg-slate-800 p-2'><h2 className='font-semibold'>Sanitized preview</h2><button onClick={() => navigator.clipboard.writeText(html)} className='rounded border bg-white dark:bg-slate-900 px-3 py-1 text-xs'>Copy HTML</button></div><div className='prose max-w-none min-h-0 flex-1 overflow-auto rounded-b border bg-white dark:bg-slate-900 p-4' dangerouslySetInnerHTML={{ __html: html }}/></div>
     </section>
   </LocalToolLayout>;
 }
diff --git a/src/app/offline/page.tsx b/src/app/offline/page.tsx
index 1a571ab..8e12420 100644
--- a/src/app/offline/page.tsx
+++ b/src/app/offline/page.tsx
@@ -1,2 +1,2 @@
 import Link from 'next/link';
-export default function OfflinePage() { return <main className='flex min-h-screen items-center justify-center bg-slate-50 p-6'><section className='max-w-lg rounded-2xl bg-white p-8 text-center shadow'><div className='text-5xl' aria-hidden='true'>🔒</div><h1 className='mt-4 text-3xl font-bold text-slate-900'>You are offline</h1><p className='mt-3 text-slate-600'>ToolStack can reopen pages that were previously cached on this device. Reconnect once to load a tool you have not visited before.</p><Link href='/' className='mt-6 inline-block rounded bg-sky-600 px-5 py-2 font-semibold text-white'>Open cached home</Link></section></main>; }
+export default function OfflinePage() { return <main id='main-content' className='flex min-h-screen items-center justify-center bg-slate-50 dark:bg-slate-950 p-6'><section className='max-w-lg rounded-2xl bg-white dark:bg-slate-900 p-8 text-center shadow'><div className='text-5xl' aria-hidden='true'>🔒</div><h1 className='mt-4 text-3xl font-bold text-slate-900 dark:text-slate-100'>You are offline</h1><p className='mt-3 text-slate-600 dark:text-slate-300'>ToolStack can reopen pages that were previously cached on this device. Reconnect once to load a tool you have not visited before.</p><Link href='/' className='mt-6 inline-block rounded bg-sky-600 px-5 py-2 font-semibold text-white'>Open cached home</Link></section></main>; }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fc8ee46..22f5866 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,49 +12,31 @@ export default function HomePage() {
   const [searchTerm, setSearchTerm] = useState('');
   const [category, setCategory] = useState<ToolCategory | null>(null);
   const q = searchTerm.trim().toLowerCase();
-
-  const filtered = useMemo(() => TOOLS.filter(tool => {
-    const matchesCategory = !category || tool.category === category;
-    const matchesSearch = !q
-      || tool.name.toLowerCase().includes(q)
-      || tool.description.toLowerCase().includes(q)
-      || tool.tags.some(value => value.toLowerCase().includes(q));
-    return matchesCategory && matchesSearch;
-  }), [category, q]);
-
-  const heading = category ?? (q ? 'Search results' : 'All tools');
-
-  return <div className='flex min-h-screen flex-col bg-slate-50'>
+  const filtered = useMemo(() => TOOLS.filter(tool => (!category || tool.category === category) && (!q || [tool.name, tool.description, ...tool.tags].some(value => value.toLowerCase().includes(q)))), [category, q]);
+  const browsing = !q && !category;
+  return <div className='flex min-h-screen flex-col bg-slate-50 dark:bg-slate-950'>
     <Navbar/>
-    <main className='container mx-auto flex-grow px-4 py-10'>
-      <header className='mx-auto mb-10 max-w-4xl text-center'>
-        <h1 className='text-5xl font-extrabold tracking-tight text-slate-950'>Tool<span className='text-sky-600'>Stack</span></h1>
-        <p className='mx-auto mt-4 max-w-3xl text-xl font-medium text-slate-600'>Useful tools with one simple privacy rule: your working data stays on your device.</p>
-        <div className='mt-5'><PrivacyBadge/></div>
+    <main id='main-content' className='page-shell flex-grow px-4 py-8 sm:py-10'>
+      <header className='mx-auto max-w-3xl text-center'>
+        <h1 className='text-4xl font-extrabold tracking-tight text-slate-950 dark:text-slate-100 sm:text-5xl'>Tool<span className='text-sky-600 dark:text-sky-300'>Stack</span></h1>
+        <p className='mt-3 text-lg text-slate-600 dark:text-slate-300'>Privacy-first browser tools. Your data stays on your device.</p>
+        <div className='mt-4'><PrivacyBadge/></div>
+        <div className='mt-6'><SearchBar onSearch={setSearchTerm}/></div>
       </header>
 
-      <section className='mx-auto mb-8 max-w-4xl'><SearchBar onSearch={setSearchTerm}/></section>
-
-      <section className='mb-8 grid gap-3 sm:grid-cols-3'>
-        <div className='rounded-xl border border-emerald-100 bg-emerald-50 p-4 text-center'><strong className='text-emerald-900'>No uploads</strong><p className='mt-1 text-sm text-emerald-800'>Files and text are processed in the browser.</p></div>
-        <div className='rounded-xl border border-sky-100 bg-sky-50 p-4 text-center'><strong className='text-sky-900'>No account or tracking</strong><p className='mt-1 text-sm text-sky-800'>No sign-in is required to use the utilities.</p></div>
-        <div className='rounded-xl border border-slate-200 bg-white p-4 text-center'><strong className='text-slate-900'>Offline-friendly</strong><p className='mt-1 text-sm text-slate-600'>Previously visited tools can reopen from the PWA cache.</p></div>
-      </section>
-
-      <section className='mb-10 rounded-xl border border-slate-200 bg-white p-5 shadow-sm' aria-label='Tool categories'>
-        <div className='flex flex-wrap justify-center gap-2'>
-          <button onClick={() => setCategory(null)} className={`rounded-full px-4 py-2 text-sm font-semibold ${category === null ? 'bg-sky-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'}`}>All</button>
-          {TOOL_CATEGORIES.map(item => <button key={item} onClick={() => setCategory(item)} className={`rounded-full px-4 py-2 text-sm font-semibold ${category === item ? 'bg-sky-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'}`}>{item}</button>)}
-        </div>
-      </section>
-
-      <section>
-        <div className='mb-5 flex flex-wrap items-baseline justify-between gap-2'>
-          <h2 className='text-2xl font-bold text-slate-900'>{heading}</h2>
-          <span className='text-sm text-slate-500'>{filtered.length} tool{filtered.length === 1 ? '' : 's'}</span>
+      <section id='tools' className='mt-10 scroll-mt-6' aria-label='Tool directory'>
+        <label className='mb-6 block text-sm font-semibold sm:hidden'>Category<select className='field mt-2' value={category ?? ''} onChange={event => setCategory(event.target.value ? event.target.value as ToolCategory : null)}><option value=''>All tools ({TOOLS.length})</option>{TOOL_CATEGORIES.map(item => <option key={item} value={item}>{item} ({TOOLS.filter(tool => tool.category === item).length})</option>)}</select></label>
+        <div className='mb-7 hidden flex-wrap gap-2 sm:flex' aria-label='Filter by category'>
+          <button aria-pressed={category === null} onClick={() => setCategory(null)} className={`rounded-lg border px-3 py-2 text-sm font-semibold ${category === null ? 'border-sky-600 bg-sky-600 text-white' : 'border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:border-sky-400'}`}>All <span className='ml-1 opacity-75'>{TOOLS.length}</span></button>
+          {TOOL_CATEGORIES.map(item => <button key={item} aria-pressed={category === item} onClick={() => setCategory(item)} className={`rounded-lg border px-3 py-2 text-sm font-semibold ${category === item ? 'border-sky-600 bg-sky-600 text-white' : 'border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:border-sky-400'}`}>{item}<span className='ml-1.5 opacity-75'>{TOOLS.filter(tool => tool.category === item).length}</span></button>)}
         </div>
-        <ToolList tools={filtered}/>
-        {filtered.length === 0 && <div className='rounded-lg bg-white p-8 text-center shadow'><p className='text-slate-500'>No tools found matching your search.</p></div>}
+        {browsing ? <>
+          <div id='all-tools' className='scroll-mt-6 space-y-10'>{TOOL_CATEGORIES.map(item => <section key={item} aria-label={item}><div className='mb-4 flex items-center gap-3'><h2 className='text-xl font-bold text-slate-900 dark:text-slate-100'>{item}</h2><span className='text-sm text-slate-500 dark:text-slate-400'>{TOOLS.filter(tool => tool.category === item).length} tools</span></div><ToolList tools={TOOLS.filter(tool => tool.category === item)}/></section>)}</div>
+        </> : <>
+          <div className='mb-5 flex flex-wrap items-baseline justify-between gap-2'><h2 className='text-2xl font-bold text-slate-900 dark:text-slate-100'>{q ? 'Search results' : category}</h2><p role='status' className='text-sm text-slate-500 dark:text-slate-400'>{filtered.length} tool{filtered.length === 1 ? '' : 's'}</p></div>
+          <ToolList tools={filtered}/>
+          {filtered.length === 0 && <div className='panel text-center'><p>No tools found. Try a shorter search or choose another category.</p></div>}
+        </>}
       </section>
     </main>
     <Footer/>
diff --git a/src/app/password-generator/page.tsx b/src/app/password-generator/page.tsx
index 94a4b20..6e96fbb 100644
--- a/src/app/password-generator/page.tsx
+++ b/src/app/password-generator/page.tsx
@@ -8,4 +8,4 @@ function secureShuffle(chars:string){const a=[...chars];for(let i=a.length-1;i>0
 function makePassword(length:number,sets:string[]){const usable=sets.filter(Boolean);const pool=usable.join('');if(!pool)return '';let out=usable.map(securePick).join('');while(out.length<length)out+=securePick(pool);return secureShuffle(out).slice(0,length)}
 const WORDS=['amber','apple','atlas','bamboo','beacon','blue','cedar','cloud','cobalt','comet','coral','delta','ember','falcon','fern','forest','galaxy','garden','harbor','indigo','jungle','lantern','lemon','lotus','maple','meadow','meteor','mint','nebula','ocean','olive','orbit','pearl','pine','pixel','quartz','raven','river','saffron','solar','spruce','stone','sunset','tiger','violet','willow','winter','zenith'];
 function passphrase(n:number){return Array.from({length:n},()=>WORDS[secureInt(WORDS.length)]).join('-')}
-export default function PasswordGeneratorPage(){const [length,setLength]=useState(20);const [upper,setUpper]=useState(true);const [digits,setDigits]=useState(true);const [symbols,setSymbols]=useState(true);const [nonce,setNonce]=useState(0);const [words,setWords]=useState(5);const password=useMemo(()=>{void nonce;return makePassword(length,[LOWER,upper?UPPER:'',digits?DIGITS:'',symbols?SYMBOLS:''])},[length,upper,digits,symbols,nonce]);const phrase=useMemo(()=>{void nonce;return passphrase(words)},[words,nonce]);return <LocalToolLayout title='Password & Passphrase Generator' description='Generate secrets locally with cryptographically secure browser randomness. Nothing is stored or transmitted.'><section className='mx-auto max-w-3xl space-y-6 rounded-xl bg-white p-6 shadow'><div><div className='flex gap-2'><input readOnly value={password} className='min-w-0 flex-1 rounded border p-3 font-mono'/><button onClick={()=>navigator.clipboard.writeText(password)} className='rounded bg-slate-800 px-4 text-white'>Copy</button></div><label className='mt-4 block'>Length: {length}<input type='range' min='12' max='64' value={length} onChange={e=>setLength(+e.target.value)} className='w-full'/></label><div className='mt-3 flex flex-wrap gap-4'><label className='flex gap-2'><input type='checkbox' checked={upper} onChange={e=>setUpper(e.target.checked)}/>Uppercase</label><label className='flex gap-2'><input type='checkbox' checked={digits} onChange={e=>setDigits(e.target.checked)}/>Numbers</label><label className='flex gap-2'><input type='checkbox' checked={symbols} onChange={e=>setSymbols(e.target.checked)}/>Symbols</label></div></div><div className='border-t pt-6'><div className='flex gap-2'><input readOnly value={phrase} className='min-w-0 flex-1 rounded border p-3 font-mono'/><button onClick={()=>navigator.clipboard.writeText(phrase)} className='rounded bg-slate-800 px-4 text-white'>Copy</button></div><label className='mt-4 block'>Words: {words}<input type='range' min='4' max='10' value={words} onChange={e=>setWords(+e.target.value)} className='w-full'/></label></div><button onClick={()=>setNonce(n=>n+1)} className='rounded bg-sky-600 px-5 py-2 text-white'>Generate new</button></section></LocalToolLayout>}
+export default function PasswordGeneratorPage(){const [length,setLength]=useState(20);const [upper,setUpper]=useState(true);const [digits,setDigits]=useState(true);const [symbols,setSymbols]=useState(true);const [nonce,setNonce]=useState(0);const [words,setWords]=useState(5);const password=useMemo(()=>{void nonce;return makePassword(length,[LOWER,upper?UPPER:'',digits?DIGITS:'',symbols?SYMBOLS:''])},[length,upper,digits,symbols,nonce]);const phrase=useMemo(()=>{void nonce;return passphrase(words)},[words,nonce]);return <LocalToolLayout title='Password & Passphrase Generator' description='Generate secrets locally with cryptographically secure browser randomness. Nothing is stored or transmitted.'><section className='mx-auto max-w-3xl space-y-6 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'><div><div className='flex gap-2'><input readOnly value={password} className='min-w-0 flex-1 rounded border p-3 font-mono'/><button onClick={()=>navigator.clipboard.writeText(password)} className='rounded bg-slate-800 px-4 text-white'>Copy</button></div><label className='mt-4 block'>Length: {length}<input type='range' min='12' max='64' value={length} onChange={e=>setLength(+e.target.value)} className='w-full'/></label><div className='mt-3 flex flex-wrap gap-4'><label className='flex gap-2'><input type='checkbox' checked={upper} onChange={e=>setUpper(e.target.checked)}/>Uppercase</label><label className='flex gap-2'><input type='checkbox' checked={digits} onChange={e=>setDigits(e.target.checked)}/>Numbers</label><label className='flex gap-2'><input type='checkbox' checked={symbols} onChange={e=>setSymbols(e.target.checked)}/>Symbols</label></div></div><div className='border-t pt-6'><div className='flex gap-2'><input readOnly value={phrase} className='min-w-0 flex-1 rounded border p-3 font-mono'/><button onClick={()=>navigator.clipboard.writeText(phrase)} className='rounded bg-slate-800 px-4 text-white'>Copy</button></div><label className='mt-4 block'>Words: {words}<input type='range' min='4' max='10' value={words} onChange={e=>setWords(+e.target.value)} className='w-full'/></label></div><button onClick={()=>setNonce(n=>n+1)} className='rounded bg-sky-600 px-5 py-2 text-white'>Generate new</button></section></LocalToolLayout>}
diff --git a/src/app/pdf-toolkit/ClientMountBoundary.tsx b/src/app/pdf-toolkit/ClientMountBoundary.tsx
index e0f5b48..518b73f 100644
--- a/src/app/pdf-toolkit/ClientMountBoundary.tsx
+++ b/src/app/pdf-toolkit/ClientMountBoundary.tsx
@@ -10,11 +10,11 @@ export default function ClientMountBoundary({ children }: { children: ReactNode
   const mounted = useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot);
 
   if (!mounted) {
-    return <div className='min-h-screen bg-slate-50'>
-      <main className='container mx-auto px-4 py-10'>
-        <div className='mx-auto max-w-6xl rounded-xl bg-white p-6 shadow' aria-live='polite'>
-          <h1 className='text-xl font-semibold text-slate-900'>Preparing PDF Toolkit…</h1>
-          <p className='mt-2 text-sm text-slate-500'>Loading the browser-only PDF workspace. Your files stay on this device.</p>
+    return <div className='min-h-screen bg-slate-50 dark:bg-slate-950'>
+      <main id='main-content' className='page-shell px-4 py-10'>
+        <div className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow' aria-live='polite'>
+          <h1 className='text-xl font-semibold text-slate-900 dark:text-slate-100'>Preparing PDF Toolkit…</h1>
+          <p className='mt-2 text-sm text-slate-500 dark:text-slate-400'>Loading the browser-only PDF workspace. Your files stay on this device.</p>
         </div>
       </main>
     </div>;
diff --git a/src/app/pdf-toolkit/page.tsx b/src/app/pdf-toolkit/page.tsx
index d521e87..b4cb160 100644
--- a/src/app/pdf-toolkit/page.tsx
+++ b/src/app/pdf-toolkit/page.tsx
@@ -488,41 +488,41 @@ export default function PdfToolkitPage() {
       : 'Renders each page at about 96 DPI with stronger JPEG compression. Best for small email/upload files when reduced sharpness and flattened pages are acceptable.';
 
   return <LocalToolLayout title='PDF Toolkit' description='Compress, merge, split, reorder, extract, delete and rotate PDF pages, edit metadata, or turn images into a PDF without uploading documents.'>
-    <div className='mx-auto max-w-6xl space-y-6'>
-      <section className='rounded-xl bg-white p-6 shadow'>
+    <div className='mx-auto w-full min-w-0 space-y-6'>
+      <section className='rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
         <div className='flex flex-wrap items-start justify-between gap-3'>
           <div>
             <h2 className='text-xl font-semibold'>PDF files</h2>
-            <p className='mt-1 text-sm text-slate-500'>Add several PDFs at once, or add them one at a time. New selections are appended to the current list.</p>
+            <p className='mt-1 text-sm text-slate-500 dark:text-slate-400'>Add several PDFs at once, or add them one at a time. New selections are appended to the current list.</p>
           </div>
-          {files.length > 0 && <button disabled={busy} onClick={clearFiles} className='rounded border border-red-200 px-3 py-2 text-sm font-semibold text-red-700 hover:bg-red-50 disabled:opacity-40'>Clear all</button>}
+          {files.length > 0 && <button disabled={busy} onClick={clearFiles} className='rounded border border-red-200 dark:border-red-800 px-3 py-2 text-sm font-semibold text-red-700 dark:text-red-300 hover:bg-red-50 dark:hover:bg-red-950 disabled:opacity-40'>Clear all</button>}
         </div>
-        <label htmlFor='pdf-files' className='mt-4 inline-block text-sm font-semibold text-slate-700'>Add one or more PDF files</label>
+        <label htmlFor='pdf-files' className='mt-4 inline-block text-sm font-semibold text-slate-700 dark:text-slate-200'>Add one or more PDF files</label>
         <input id='pdf-files' type='file' multiple accept='application/pdf,.pdf' disabled={busy} onChange={event => { void addPdfs(event.target.files); event.currentTarget.value = ''; }} className='mt-2 w-full rounded border p-3 disabled:opacity-50'/>
 
         {files.length > 0 && <>
-          <p className='mt-3 text-sm text-slate-500'>{files.length} file{files.length === 1 ? '' : 's'} loaded, {readableFiles.length} readable.</p>
+          <p className='mt-3 text-sm text-slate-500 dark:text-slate-400'>{files.length} file{files.length === 1 ? '' : 's'} loaded, {readableFiles.length} readable.</p>
           <div className='mt-4 space-y-2'>{files.map((item, index) => <div key={fileKey(item.file)} className='flex flex-wrap items-center gap-2 rounded border p-3'>
             <div className='min-w-0 flex-1'>
               <p className='truncate font-medium'>{item.file.name}</p>
-              <p className={`text-sm ${item.error ? 'text-red-600' : 'text-slate-500'}`}>{item.error ? 'Could not read this PDF' : `${item.pages} page${item.pages === 1 ? '' : 's'} · ${formatBytes(item.file.size)}`}</p>
+              <p className={`text-sm ${item.error ? 'text-red-600 dark:text-red-400' : 'text-slate-500 dark:text-slate-400'}`}>{item.error ? 'Could not read this PDF' : `${item.pages} page${item.pages === 1 ? '' : 's'} · ${formatBytes(item.file.size)}`}</p>
             </div>
             <button disabled={busy || index === 0} onClick={() => moveFile(index, -1)} className='rounded border px-3 py-1 disabled:opacity-30' aria-label={`Move ${item.file.name} up`}>↑</button>
             <button disabled={busy || index === files.length - 1} onClick={() => moveFile(index, 1)} className='rounded border px-3 py-1 disabled:opacity-30' aria-label={`Move ${item.file.name} down`}>↓</button>
-            <button disabled={busy} onClick={() => void removeFile(fileKey(item.file))} className='rounded border border-red-200 px-3 py-1 text-sm font-semibold text-red-700 hover:bg-red-50 disabled:opacity-30' aria-label={`Remove ${item.file.name}`}>Remove</button>
+            <button disabled={busy} onClick={() => void removeFile(fileKey(item.file))} className='rounded border border-red-200 dark:border-red-800 px-3 py-1 text-sm font-semibold text-red-700 dark:text-red-300 hover:bg-red-50 dark:hover:bg-red-950 disabled:opacity-30' aria-label={`Remove ${item.file.name}`}>Remove</button>
           </div>)}</div>
         </>}
 
         <button disabled={busy || readableFiles.length < 2} onClick={() => void merge()} className='mt-4 rounded bg-sky-600 px-4 py-2 text-white disabled:opacity-40'>Merge PDFs in this order</button>
       </section>
 
-      {readableFiles.length > 0 && <section className='rounded-xl border border-sky-100 bg-sky-50 p-5'>
-        <h2 className='font-semibold text-slate-900'>PDF to edit or compress</h2>
-        <p className='mt-1 text-sm text-slate-600'>Merge uses the full ordered list above. The tools below work on {readableFiles.length === 1 ? 'this PDF' : 'the selected PDF'} only.</p>
+      {readableFiles.length > 0 && <section className='rounded-xl border border-sky-100 dark:border-sky-900 bg-sky-50 dark:bg-sky-950 p-5'>
+        <h2 className='font-semibold text-slate-900 dark:text-slate-100'>PDF to edit or compress</h2>
+        <p className='mt-1 text-sm text-slate-600 dark:text-slate-300'>Merge uses the full ordered list above. The tools below work on {readableFiles.length === 1 ? 'this PDF' : 'the selected PDF'} only.</p>
 
-        {readableFiles.length === 1 && workingPdf ? <div className='mt-3 min-w-0 rounded-lg border border-sky-200 bg-white p-3'>
-          <p className='truncate font-medium text-slate-900' title={workingPdf.file.name}>{workingPdf.file.name}</p>
-          <p className='mt-1 text-sm text-slate-500'>{workingPdf.pages} page{workingPdf.pages === 1 ? '' : 's'} · {formatBytes(workingPdf.file.size)}</p>
+        {readableFiles.length === 1 && workingPdf ? <div className='mt-3 min-w-0 rounded-lg border border-sky-200 dark:border-sky-800 bg-white dark:bg-slate-900 p-3'>
+          <p className='truncate font-medium text-slate-900 dark:text-slate-100' title={workingPdf.file.name}>{workingPdf.file.name}</p>
+          <p className='mt-1 text-sm text-slate-500 dark:text-slate-400'>{workingPdf.pages} page{workingPdf.pages === 1 ? '' : 's'} · {formatBytes(workingPdf.file.size)}</p>
         </div> : <div className='mt-3 max-h-64 space-y-2 overflow-y-auto pr-1' role='listbox' aria-label='PDF to edit or compress'>
           {readableFiles.map(item => {
             const key = fileKey(item.file);
@@ -534,41 +534,41 @@ export default function PdfToolkitPage() {
               aria-selected={selected}
               disabled={busy}
               onClick={() => void selectWorkingPdf(key)}
-              className={`block w-full min-w-0 rounded-lg border p-3 text-left transition disabled:opacity-50 ${selected ? 'border-sky-400 bg-white ring-2 ring-sky-100' : 'border-sky-200 bg-white/70 hover:bg-white'}`}
+              className={`block w-full min-w-0 rounded-lg border p-3 text-left transition disabled:opacity-50 ${selected ? 'border-sky-400 bg-white dark:bg-slate-900 ring-2 ring-sky-100' : 'border-sky-200 dark:border-sky-800 bg-white/70 hover:bg-white dark:hover:bg-slate-900'}`}
             >
-              <span className='block truncate font-medium text-slate-900' title={item.file.name}>{item.file.name}</span>
-              <span className='mt-1 block text-sm text-slate-500'>{item.pages} page{item.pages === 1 ? '' : 's'} · {formatBytes(item.file.size)}</span>
+              <span className='block truncate font-medium text-slate-900 dark:text-slate-100' title={item.file.name}>{item.file.name}</span>
+              <span className='mt-1 block text-sm text-slate-500 dark:text-slate-400'>{item.pages} page{item.pages === 1 ? '' : 's'} · {formatBytes(item.file.size)}</span>
             </button>;
           })}
         </div>}
       </section>}
 
-      {workingPdf && <section className='rounded-xl bg-white p-6 shadow'>
+      {workingPdf && <section className='rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
         <h2 className='text-xl font-semibold'>Compress PDF</h2>
-        <p className='mt-1 text-sm text-slate-500'>All compression stays in your browser. Lossless preserves document structure; Balanced and Strong deliberately flatten pages for much larger reductions on scanned or image-heavy PDFs.</p>
+        <p className='mt-1 text-sm text-slate-500 dark:text-slate-400'>All compression stays in your browser. Lossless preserves document structure; Balanced and Strong deliberately flatten pages for much larger reductions on scanned or image-heavy PDFs.</p>
         <div className='mt-4 grid gap-3 md:grid-cols-[16rem_1fr]'>
           <select value={compressionMode} onChange={event => { setCompressionMode(event.target.value as CompressionMode); setCompressionResult(null); }} className='rounded border p-3'>
             <option value='lossless'>Lossless / structural</option>
             <option value='balanced'>Balanced · 150 DPI (flatten pages)</option>
             <option value='strong'>Strong · 96 DPI (flatten pages)</option>
           </select>
-          <p className='rounded bg-slate-50 p-3 text-sm text-slate-600'>{compressionHelp}</p>
+          <p className='rounded bg-slate-50 dark:bg-slate-950 p-3 text-sm text-slate-600 dark:text-slate-300'>{compressionHelp}</p>
         </div>
         <button disabled={busy} onClick={() => void compressPdf(workingPdf)} className='mt-4 rounded bg-emerald-600 px-4 py-2 font-semibold text-white disabled:opacity-40'>{busy ? 'Working…' : `Compress ${workingPdf.file.name}`}</button>
-        {compressionStatus && <p className='mt-3 text-sm text-slate-600' aria-live='polite'>{compressionStatus}</p>}
-        {compressionResult && <div className='mt-4 rounded border border-slate-200 bg-slate-50 p-4 text-sm'>
+        {compressionStatus && <p className='mt-3 text-sm text-slate-600 dark:text-slate-300' aria-live='polite'>{compressionStatus}</p>}
+        {compressionResult && <div className='mt-4 rounded border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 p-4 text-sm'>
           <div className='grid gap-2 sm:grid-cols-3'>
-            <div><span className='block text-slate-500'>Original</span><strong>{formatBytes(compressionResult.original)}</strong></div>
-            <div><span className='block text-slate-500'>Compressed result</span><strong>{formatBytes(compressionResult.compressed)}</strong></div>
-            <div><span className='block text-slate-500'>Reduction</span><strong>{compressionResult.compressed < compressionResult.original ? `${((1 - compressionResult.compressed / compressionResult.original) * 100).toFixed(1)}%` : 'No reduction'}</strong></div>
+            <div><span className='block text-slate-500 dark:text-slate-400'>Original</span><strong>{formatBytes(compressionResult.original)}</strong></div>
+            <div><span className='block text-slate-500 dark:text-slate-400'>Compressed result</span><strong>{formatBytes(compressionResult.compressed)}</strong></div>
+            <div><span className='block text-slate-500 dark:text-slate-400'>Reduction</span><strong>{compressionResult.compressed < compressionResult.original ? `${((1 - compressionResult.compressed / compressionResult.original) * 100).toFixed(1)}%` : 'No reduction'}</strong></div>
           </div>
-          <p className='mt-2 text-slate-600'>{compressionResult.downloaded ? 'The smaller copy was downloaded automatically.' : 'The result was not smaller, so ToolStack kept your original instead of downloading a larger file.'}</p>
+          <p className='mt-2 text-slate-600 dark:text-slate-300'>{compressionResult.downloaded ? 'The smaller copy was downloaded automatically.' : 'The result was not smaller, so ToolStack kept your original instead of downloading a larger file.'}</p>
         </div>}
       </section>}
 
-      {workingPdf && <section className='rounded-xl bg-white p-6 shadow'>
+      {workingPdf && <section className='rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
         <h2 className='text-xl font-semibold'>Edit pages in a PDF</h2>
-        <p className='mt-1 text-sm text-slate-500'>Extract, reorder, delete or rotate pages in <strong>{workingPdf.file.name}</strong>. Enter pages such as 1-3,5,8-6. Descending ranges reverse page order.</p>
+        <p className='mt-1 text-sm text-slate-500 dark:text-slate-400'>Extract, reorder, delete or rotate pages in <strong>{workingPdf.file.name}</strong>. Enter pages such as 1-3,5,8-6. Descending ranges reverse page order.</p>
         <div className='mt-4 grid gap-3 md:grid-cols-[1fr_12rem_10rem]'>
           <input value={selection} onChange={event => setSelection(event.target.value)} className='rounded border p-2 font-mono' aria-label='Page selection'/>
           <select value={operation} onChange={event => setOperation(event.target.value as typeof operation)} className='rounded border p-2'>
@@ -578,15 +578,15 @@ export default function PdfToolkitPage() {
           </select>
           {operation === 'rotate' ? <select value={rotation} onChange={event => setRotation(Number(event.target.value))} className='rounded border p-2'><option value={90}>+90°</option><option value={180}>+180°</option><option value={270}>+270°</option></select> : <div/>}
         </div>
-        <p className='mt-3 rounded bg-slate-50 p-3 text-sm text-slate-600'>{operationHelp}</p>
+        <p className='mt-3 rounded bg-slate-50 dark:bg-slate-950 p-3 text-sm text-slate-600 dark:text-slate-300'>{operationHelp}</p>
         <div className='mt-4 flex flex-wrap gap-3'>
           <button disabled={busy} onClick={() => void applyPages(workingPdf)} className='rounded bg-sky-600 px-4 py-2 text-white disabled:opacity-40'>Apply & download copy</button>
           <button disabled={busy} onClick={() => void split(workingPdf)} className='rounded bg-slate-800 px-4 py-2 text-white disabled:opacity-40'>Split every page to ZIP</button>
         </div>
-        <p className='mt-3 text-xs text-slate-500'>“Split every page to ZIP” creates one single-page PDF per page and packages all of them into a ZIP file. It does not use the page-selection field.</p>
+        <p className='mt-3 text-xs text-slate-500 dark:text-slate-400'>“Split every page to ZIP” creates one single-page PDF per page and packages all of them into a ZIP file. It does not use the page-selection field.</p>
       </section>}
 
-      {workingPdf && <section className='rounded-xl bg-white p-6 shadow'>
+      {workingPdf && <section className='rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
         <h2 className='text-xl font-semibold'>Document metadata · {workingPdf.file.name}</h2>
         <div className='mt-4 grid gap-3 sm:grid-cols-2'>
           <label>Title<input value={metadata.title} onChange={event => setMetadata(prev => ({ ...prev, title: event.target.value }))} className='mt-1 w-full rounded border p-2'/></label>
@@ -597,15 +597,15 @@ export default function PdfToolkitPage() {
         <button disabled={busy} onClick={() => void saveMetadata(workingPdf)} className='mt-4 rounded bg-emerald-600 px-4 py-2 text-white disabled:opacity-40'>Save metadata to a copy</button>
       </section>}
 
-      <section className='rounded-xl bg-white p-6 shadow'>
+      <section className='rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
         <h2 className='text-xl font-semibold'>Images → PDF</h2>
-        <p className='mt-1 text-sm text-slate-500'>JPEG, PNG and browser-decodable images are fitted onto A4 portrait or landscape pages.</p>
+        <p className='mt-1 text-sm text-slate-500 dark:text-slate-400'>JPEG, PNG and browser-decodable images are fitted onto A4 portrait or landscape pages.</p>
         <input type='file' multiple accept='image/*' onChange={event => setImages(Array.from(event.target.files ?? []))} className='mt-4 w-full rounded border p-3'/>
         <button disabled={busy || !images.length} onClick={() => void imagesToPdf()} className='mt-4 rounded bg-sky-600 px-4 py-2 text-white disabled:opacity-40'>Create PDF from {images.length || 0} image{images.length === 1 ? '' : 's'}</button>
       </section>
 
-      <div className='rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-950'>PDF operations rewrite document structure. Existing digital signatures can become invalid, and unusual/encrypted PDFs may not be supported. Lossless compression mainly optimizes PDF structure and streams, so an already-efficient or image-heavy PDF may shrink only a little. Balanced/Strong modes flatten every page into a JPEG-backed page, so text selection, links, forms, bookmarks, accessibility structure and digital signatures are not preserved.</div>
-      {message && <p className='rounded bg-red-50 p-3 text-red-700' aria-live='polite'>{message}</p>}
+      <div className='rounded-xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950 p-4 text-sm text-amber-950 dark:text-amber-100'>PDF operations rewrite document structure. Existing digital signatures can become invalid, and unusual/encrypted PDFs may not be supported. Lossless compression mainly optimizes PDF structure and streams, so an already-efficient or image-heavy PDF may shrink only a little. Balanced/Strong modes flatten every page into a JPEG-backed page, so text selection, links, forms, bookmarks, accessibility structure and digital signatures are not preserved.</div>
+      {message && <p className='rounded bg-red-50 dark:bg-red-950 p-3 text-red-700 dark:text-red-300' aria-live='polite'>{message}</p>}
     </div>
   </LocalToolLayout>;
 }
diff --git a/src/app/placeholder-generator/page.tsx b/src/app/placeholder-generator/page.tsx
index 3d3e9b5..0200c17 100644
--- a/src/app/placeholder-generator/page.tsx
+++ b/src/app/placeholder-generator/page.tsx
@@ -20,13 +20,14 @@ interface SettingInputProps {
 
 const SettingInput = ({ label, type = 'text', value, onChange, placeholder, className }: SettingInputProps) => (
   <div>
-    <label className='block text-sm font-medium text-slate-600 mb-1'>{label}</label>
+    <label htmlFor={`placeholder-${label.toLowerCase().replaceAll(' ', '-')}`} className='block text-sm font-medium text-slate-600 dark:text-slate-300 mb-1'>{label}</label>
     <input
+      id={`placeholder-${label.toLowerCase().replaceAll(' ', '-')}`}
       type={type}
       value={value}
       onChange={onChange}
       placeholder={placeholder}
-      className={`block w-full p-2 border border-slate-300 rounded-md shadow-sm focus:ring-sky-500 focus:border-sky-500 outline-none transition duration-150 ease-in-out ${className}`}
+      className={`block w-full p-2 border border-slate-300 dark:border-slate-700 rounded-md shadow-sm focus:ring-sky-500 focus:border-sky-500 outline-none transition duration-150 ease-in-out ${className}`}
     />
   </div>
 );
@@ -49,17 +50,19 @@ interface ColorSettingInputProps {
 
 const ColorSettingInput = ({ label, value, onChange }: ColorSettingInputProps) => (
   <div>
-    <label className='block text-sm font-medium text-slate-600 mb-1'>{label}</label>
+    <label htmlFor={`placeholder-${label.toLowerCase().replaceAll(' ', '-')}`} className='block text-sm font-medium text-slate-600 dark:text-slate-300 mb-1'>{label}</label>
     <div className='flex items-center rounded-md shadow-sm'>
       <input
         type='text'
+        id={`placeholder-${label.toLowerCase().replaceAll(' ', '-')}`}
         value={value}
         onChange={onChange}
         placeholder='e.g., cccccc'
-        className='block w-full p-2 border border-slate-300 rounded-l-md focus:ring-sky-500 focus:border-sky-500 outline-none transition duration-150 ease-in-out'
+        className='block w-full p-2 border border-slate-300 dark:border-slate-700 rounded-l-md focus:ring-sky-500 focus:border-sky-500 outline-none transition duration-150 ease-in-out'
       />
       <input
         type='color'
+        aria-label={`${label} picker`}
         value={formatColor(value)}
         onChange={(e) => {
           const event = {
@@ -69,7 +72,7 @@ const ColorSettingInput = ({ label, value, onChange }: ColorSettingInputProps) =
           } as ChangeEvent<HTMLInputElement>;
           onChange(event);
         }}
-        className='h-10 w-12 p-1 border border-l-0 border-slate-300 rounded-r-md cursor-pointer bg-white'
+        className='h-10 w-12 p-1 border border-l-0 border-slate-300 dark:border-slate-700 rounded-r-md cursor-pointer bg-white dark:bg-slate-900'
       />
     </div>
   </div>
@@ -185,21 +188,21 @@ export default function PlaceholderGeneratorPage() {
   };
 
   return (
-    <div className='flex flex-col min-h-screen bg-slate-50'>
+    <div className='flex flex-col min-h-screen bg-slate-50 dark:bg-slate-950'>
       <Navbar />
       <Breadcrumbs />
-      <main className='flex-grow container mx-auto px-4 py-8'>
+      <main id='main-content' className='flex-grow page-shell px-4 py-8'>
         <header className='mb-8 text-center'>
-          <h1 className='text-4xl font-bold text-slate-800'>Placeholder Image Generator</h1>
-          <p className='text-lg text-slate-600 mt-1'>
+          <h1 className='text-4xl font-bold text-slate-800 dark:text-slate-100'>Placeholder Image Generator</h1>
+          <p className='text-lg text-slate-600 dark:text-slate-300 mt-1'>
             Create custom placeholder images for your mockups, generated entirely in your browser.
           </p>
         </header>
 
-        <div className='grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto'>
+        <div className='grid grid-cols-1 md:grid-cols-3 gap-8 w-full min-w-0 mx-auto'>
           {/* Controls */}
-          <section className='md:col-span-1 bg-white p-6 rounded-lg shadow-xl h-fit'>
-            <h2 className='text-xl font-semibold text-slate-700 border-b pb-2 mb-4'>Settings</h2>
+          <section className='md:col-span-1 bg-white dark:bg-slate-900 p-6 rounded-lg shadow-xl h-fit'>
+            <h2 className='text-xl font-semibold text-slate-700 dark:text-slate-200 border-b pb-2 mb-4'>Settings</h2>
             <div className='space-y-4'>
               <div className='grid grid-cols-2 gap-4'>
                 <SettingInput
@@ -231,9 +234,9 @@ export default function PlaceholderGeneratorPage() {
           </section>
 
           {/* Preview */}
-          <section className='md:col-span-2 bg-white p-6 rounded-lg shadow-xl'>
-            <h2 className='text-xl font-semibold text-slate-700 border-b pb-2 mb-4'>Preview</h2>
-            <div className='flex justify-center items-center bg-slate-100 rounded-md p-4 min-h-[200px]'>
+          <section className='md:col-span-2 bg-white dark:bg-slate-900 p-6 rounded-lg shadow-xl'>
+            <h2 className='text-xl font-semibold text-slate-700 dark:text-slate-200 border-b pb-2 mb-4'>Preview</h2>
+            <div className='flex justify-center items-center bg-slate-100 dark:bg-slate-800 rounded-md p-4 min-h-[200px]'>
               <canvas ref={canvasRef} style={{ display: 'none' }} />
               {/* FIX: Replaced <img> with next/image <Image> */}
               {imageUrl && (
@@ -247,7 +250,7 @@ export default function PlaceholderGeneratorPage() {
               )}
             </div>
             <div className='mt-4'>
-              <label htmlFor='image-url' className='block text-sm font-medium text-slate-600 mb-1'>
+              <label htmlFor='image-url' className='block text-sm font-medium text-slate-600 dark:text-slate-300 mb-1'>
                 Generated Data URL
               </label>
               <div className='flex rounded-md shadow-sm'>
@@ -256,21 +259,21 @@ export default function PlaceholderGeneratorPage() {
                   value={imageUrl}
                   readOnly
                   rows={3}
-                  className='block w-full flex-1 rounded-none rounded-l-md p-2 font-mono text-slate-700 bg-slate-50 border border-slate-300 text-xs'
+                  className='block w-full flex-1 rounded-none rounded-l-md p-2 font-mono text-slate-700 dark:text-slate-200 bg-slate-50 dark:bg-slate-950 border border-slate-300 dark:border-slate-700 text-xs'
                 />
                 <button
                   onClick={handleCopyUrl}
-                  className='relative inline-flex items-center space-x-2 rounded-r-md border border-slate-300 bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200 focus:outline-none focus:ring-1 focus:ring-sky-500 focus:border-sky-500'>
+                  className='relative inline-flex items-center space-x-2 rounded-r-md border border-slate-300 dark:border-slate-700 bg-slate-100 dark:bg-slate-800 px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-200 dark:hover:bg-slate-700 focus:outline-none focus:ring-1 focus:ring-sky-500 focus:border-sky-500'>
                   Copy
                 </button>
               </div>
-              {copySuccess && <p className='mt-2 text-sm text-green-600'>{copySuccess}</p>}
+              {copySuccess && <p className='mt-2 text-sm text-green-600 dark:text-green-400'>{copySuccess}</p>}
             </div>
           </section>
         </div>
 
         <div className='mt-12 text-center'>
-          <Link href='/' className='text-sky-600 hover:text-sky-800 hover:underline'>
+          <Link href='/' className='text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200 hover:underline'>
             &larr; Back to All Tools
           </Link>
         </div>
diff --git a/src/app/qr-toolkit/page.tsx b/src/app/qr-toolkit/page.tsx
new file mode 100644
index 0000000..28b3f42
--- /dev/null
+++ b/src/app/qr-toolkit/page.tsx
@@ -0,0 +1,73 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import QRCode from 'qrcode';
+import LocalToolLayout from '@/components/LocalToolLayout';
+import { downloadLocal } from '@/lib/local-files';
+import { inspectQrText, qrPayload, type QrInput } from '@/lib/qr-toolkit';
+
+export default function QrToolkitPage() {
+  const [mode,setMode] = useState<'generate' | 'inspect'>('generate'); const [kind,setKind] = useState<QrInput['kind']>('text');
+  const [text,setText] = useState(''); const [ssid,setSsid] = useState(''); const [password,setPassword] = useState(''); const [security,setSecurity] = useState<'WPA' | 'WEP' | 'nopass'>('WPA'); const [hidden,setHidden] = useState(false);
+  const [name,setName] = useState(''); const [email,setEmail] = useState(''); const [phone,setPhone] = useState(''); const [organization,setOrganization] = useState('');
+  const [generated,setGenerated] = useState<{ png: Blob; svg: string; payload: string } | null>(null); const [decoded,setDecoded] = useState<string | null>(null); const [error,setError] = useState(''); const [busy,setBusy] = useState(false); const [message,setMessage] = useState('');
+  const canvas = useRef<HTMLCanvasElement>(null); const worker = useRef<Worker | null>(null); const timer = useRef<ReturnType<typeof setTimeout> | null>(null); const active = useRef(true);
+  const stop = () => { worker.current?.terminate(); worker.current = null; if (timer.current) clearTimeout(timer.current); timer.current = null; };
+  useEffect(() => { active.current = true; return () => { active.current = false; worker.current?.terminate(); if (timer.current) clearTimeout(timer.current); }; },[]);
+  const invalidate = () => { setGenerated(null); setDecoded(null); setError(''); setMessage(''); };
+  const generate = async () => {
+    invalidate(); setBusy(true);
+    try {
+      const input: QrInput = kind === 'wifi' ? { kind,ssid,password,security,hidden } : kind === 'contact' ? { kind,name,email,phone,organization } : { kind,text };
+      const payload = qrPayload(input); const target = canvas.current!;
+      await QRCode.toCanvas(target,payload,{ errorCorrectionLevel: 'M',margin: 4,scale: 6 });
+      const svg = await QRCode.toString(payload,{ type: 'svg',errorCorrectionLevel: 'M',margin: 4 });
+      const png = await new Promise<Blob>((resolve,reject) => target.toBlob(blob => blob ? resolve(blob) : reject(new Error('Could not create the QR image.')),'image/png'));
+      if (active.current) setGenerated({ png,svg,payload });
+    } catch (err) { if (active.current) setError((err as Error).message); } finally { if (active.current) setBusy(false); }
+  };
+  const decode = (target: HTMLCanvasElement) => {
+    stop(); setDecoded(null); setMessage(''); setError(''); setBusy(true);
+    try {
+      const pixels = target.getContext('2d',{ willReadFrequently: true })!.getImageData(0,0,target.width,target.height).data;
+      const next = new Worker(new URL('../../lib/qr.worker.ts',import.meta.url)); worker.current = next;
+      timer.current = setTimeout(() => { stop(); setBusy(false); setError('Decoding took too long. Try a smaller, cropped QR image.'); },10000);
+      next.onmessage = (event: MessageEvent<{ text?: string; error?: string }>) => { stop(); setBusy(false); if (event.data.error) setError(event.data.error); else setDecoded(event.data.text ?? ''); };
+      next.onerror = () => { stop(); setBusy(false); setError('Could not decode this QR image.'); };
+      next.postMessage({ pixels,width: target.width,height: target.height },[pixels.buffer]);
+    } catch { stop(); setBusy(false); setError('Could not read image pixels in this browser.'); }
+  };
+  const readImage = async (file: File) => {
+    setDecoded(null); setError(''); setMessage(''); setBusy(true);
+    let bitmap: ImageBitmap | null = null;
+    try {
+      if (!['image/png','image/jpeg','image/webp'].includes(file.type) || file.size > 20 * 1024 * 1024) throw new Error('Use a PNG, JPEG or WebP image up to 20 MB.');
+      bitmap = await createImageBitmap(file);
+      if (bitmap.width * bitmap.height > 20000000) throw new Error('Use an image with at most 20 million pixels.');
+      if (!active.current) return;
+      const scale = Math.min(1,1600 / Math.max(bitmap.width,bitmap.height)); const target = document.createElement('canvas'); target.width = Math.max(1,Math.round(bitmap.width * scale)); target.height = Math.max(1,Math.round(bitmap.height * scale));
+      const context = target.getContext('2d')!; context.fillStyle = '#ffffff'; context.fillRect(0,0,target.width,target.height); context.drawImage(bitmap,0,0,target.width,target.height); decode(target);
+    } catch (err) { if (active.current) { setBusy(false); setError((err as Error).message); } } finally { bitmap?.close(); }
+  };
+  const inspection = decoded === null ? null : inspectQrText(decoded);
+  return <LocalToolLayout title='QR Toolkit' description='Create QR codes or read their contents locally.'>
+    <fieldset disabled={busy} className='mx-auto min-w-0 max-w-3xl space-y-5'>
+      <div className='flex flex-wrap gap-2'>{(['generate','inspect'] as const).map(item => <button key={item} aria-pressed={mode === item} className={`action ${mode === item ? '' : 'action-secondary'}`} onClick={() => { setMode(item); setDecoded(null); setError(''); setMessage(''); }}>{item === 'generate' ? 'Create QR' : 'Read image'}</button>)}</div>
+      {mode === 'generate' && <section className='panel space-y-4'>
+        <label className='block text-sm font-semibold'>Contents<select className='field mt-2' value={kind} onChange={event => { invalidate(); setKind(event.target.value as QrInput['kind']); }}><option value='text'>Text / URL</option><option value='wifi'>Wi-Fi</option><option value='contact'>Contact</option></select></label>
+        {kind === 'text' && <label className='block text-sm font-semibold'>Text or URL<textarea className='field mt-2 h-32' value={text} onChange={event => { invalidate(); setText(event.target.value); }} maxLength={1500}/></label>}
+        {kind === 'wifi' && <><label className='block text-sm font-semibold'>Network name (SSID)<input className='field mt-2' maxLength={200} value={ssid} onChange={event => { invalidate(); setSsid(event.target.value); }}/></label><label className='block text-sm font-semibold'>Security<select className='field mt-2' value={security} onChange={event => { invalidate(); setSecurity(event.target.value as typeof security); }}><option value='WPA'>WPA / WPA2 / WPA3 personal</option><option value='WEP'>WEP</option><option value='nopass'>Open network</option></select></label>{security !== 'nopass' && <label className='block text-sm font-semibold'>Password<input type='password' autoComplete='off' className='field mt-2' maxLength={200} value={password} onChange={event => { invalidate(); setPassword(event.target.value); }}/></label>}<label className='flex items-center gap-2 text-sm'><input type='checkbox' checked={hidden} onChange={event => { invalidate(); setHidden(event.target.checked); }}/>Hidden network</label><p className='text-xs text-slate-500 dark:text-slate-400'>Anyone with the QR image can read the network password.</p></>}
+        {kind === 'contact' && <div className='grid gap-4 sm:grid-cols-2'>{[{ label: 'Name',value: name,set: setName },{ label: 'Organization',value: organization,set: setOrganization },{ label: 'Email',value: email,set: setEmail },{ label: 'Phone',value: phone,set: setPhone }].map(field => <label className='text-sm font-semibold' key={field.label}>{field.label}<input className='field mt-2' maxLength={200} value={field.value} onChange={event => { invalidate(); field.set(event.target.value); }}/></label>)}</div>}
+        <button className='action' onClick={generate}>{busy ? 'Working…' : 'Generate QR'}</button>
+      </section>}
+      <section hidden={mode !== 'generate' || !generated} className='panel space-y-4'>
+        <canvas ref={canvas} aria-label='Generated QR code' role='img' className='mx-auto h-auto max-w-full rounded bg-white' style={{ width: '20rem' }}/>
+        {generated && <><div className='flex flex-wrap gap-3'><button className='action' onClick={() => downloadLocal(generated.png,'qr-code.png','image/png')}>Download PNG</button><button className='action action-secondary' onClick={() => downloadLocal(generated.svg,'qr-code.svg','image/svg+xml')}>Download SVG</button><button className='action action-secondary' onClick={() => decode(canvas.current!)}>Inspect this QR</button></div><details><summary className='text-sm font-semibold'>Encoded text</summary><textarea aria-label='Encoded QR text' readOnly className='field mt-3 h-32 font-mono text-xs' value={generated.payload}/></details></>}
+      </section>
+      {mode === 'inspect' && <section className='panel space-y-4' tabIndex={0} aria-label='QR image workspace' onPaste={event => { if (busy) return; const file = Array.from(event.clipboardData.files).find(item => item.type.startsWith('image/')); if (file) { event.preventDefault(); void readImage(file); } }}><label className='block text-sm font-semibold'>QR image<input className='field mt-2' type='file' accept='image/png,image/jpeg,image/webp' onChange={event => { const file = event.target.files?.[0]; event.target.value = ''; if (file) void readImage(file); }}/></label><p className='text-sm text-slate-500 dark:text-slate-400'>PNG, JPEG or WebP. You can also paste an image here. Reads one QR code at a time.</p></section>}
+      {busy && <p role='status' className='note'>Processing locally…</p>}
+      {error && <p role='alert' className='note'>{error}</p>}
+      {inspection && decoded !== null && <section className='panel space-y-4'><h2 className='text-lg font-bold'>{inspection.kind}</h2>{inspection.details.length > 0 && <ul className='list-inside list-disc text-sm'>{inspection.details.map((detail,i) => <li key={i}>{detail}</li>)}</ul>}<label className='block text-sm font-semibold'>Decoded contents<textarea aria-label='Decoded QR contents' className='field mt-2 h-48 font-mono text-xs' value={decoded} readOnly/></label><button className='action action-secondary' onClick={async () => { try { await navigator.clipboard.writeText(decoded); setMessage('Copied.'); } catch { setMessage('Could not copy. Select the text to copy it manually.'); } }}>Copy text</button><p className='text-xs text-slate-500 dark:text-slate-400'>Contents are shown without opening links or joining networks. Decoding does not establish whether a destination is safe.</p></section>}
+      {message && <p role='status' className='note'>{message}</p>}
+    </fieldset>
+  </LocalToolLayout>;
+}
diff --git a/src/app/regex-generator/page.tsx b/src/app/regex-generator/page.tsx
index 1d390a6..750187e 100644
--- a/src/app/regex-generator/page.tsx
+++ b/src/app/regex-generator/page.tsx
@@ -144,25 +144,25 @@ export default function RegexGeneratorPage() {
   };
 
   return (
-    <div className='flex flex-col min-h-screen bg-slate-50'>
+    <div className='flex flex-col min-h-screen bg-slate-50 dark:bg-slate-950'>
       <Navbar />
       <Breadcrumbs />
-      <main className='flex-grow container mx-auto px-4 py-8'>
+      <main id='main-content' className='flex-grow page-shell px-4 py-8'>
         <header className='mb-8 text-center'>
-          <h1 className='text-4xl font-bold text-slate-800'>Easy Regex Generator</h1>
-          <p className='text-lg text-slate-600 mt-1'>
+          <h1 className='text-4xl font-bold text-slate-800 dark:text-slate-100'>Easy Regex Generator</h1>
+          <p className='text-lg text-slate-600 dark:text-slate-300 mt-1'>
             Build a regular expression by choosing what you need from the list below.
           </p>
         </header>
 
-        <section className='bg-white p-6 md:p-8 rounded-lg shadow-xl max-w-2xl mx-auto'>
+        <section className='bg-white dark:bg-slate-900 p-6 md:p-8 rounded-lg shadow-xl max-w-2xl mx-auto'>
           {/* The "Sentence Builder" with two dropdowns */}
-          <div className='flex items-center justify-center flex-wrap gap-x-3 gap-y-2 mb-8 bg-slate-50 p-6 rounded-lg border'>
-            <span className='text-lg text-slate-700'>I want to...</span>
+          <div className='flex items-center justify-center flex-wrap gap-x-3 gap-y-2 mb-8 bg-slate-50 dark:bg-slate-950 p-6 rounded-lg border'>
+            <span className='text-lg text-slate-700 dark:text-slate-200'>I want to...</span>
             <select
               value={actionKey}
               onChange={handleActionChange}
-              className='text-lg bg-white border border-slate-300 rounded-md shadow-sm p-2 focus:ring-2 focus:ring-sky-500 focus:border-sky-500'>
+              className='text-lg bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-md shadow-sm p-2 focus:ring-2 focus:ring-sky-500 focus:border-sky-500'>
               {Object.entries(REGEX_LIBRARY).map(([key, { label }]) => (
                 <option key={key} value={key}>
                   {label}
@@ -172,7 +172,7 @@ export default function RegexGeneratorPage() {
             <select
               value={patternValue}
               onChange={handlePatternChange}
-              className='text-lg bg-white border border-slate-300 rounded-md shadow-sm p-2 focus:ring-2 focus:ring-sky-500 focus:border-sky-500'>
+              className='text-lg bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-md shadow-sm p-2 focus:ring-2 focus:ring-sky-500 focus:border-sky-500'>
               {REGEX_LIBRARY[actionKey].patterns.map((pattern) => (
                 <option key={pattern.value} value={pattern.value}>
                   {pattern.label}
@@ -184,27 +184,27 @@ export default function RegexGeneratorPage() {
           {/* Output Section */}
           <div className='space-y-6'>
             <div>
-              <label className='block text-sm font-medium text-slate-700'>Generated Regex</label>
+              <label className='block text-sm font-medium text-slate-700 dark:text-slate-200'>Generated Regex</label>
               <div className='mt-1 relative'>
-                <pre className='w-full p-4 border border-slate-200 rounded-lg bg-slate-100 font-mono text-slate-800 overflow-x-auto'>
+                <pre className='w-full p-4 border border-slate-200 dark:border-slate-800 rounded-lg bg-slate-100 dark:bg-slate-800 font-mono text-slate-800 dark:text-slate-100 overflow-x-auto'>
                   <code>{selectedPattern.regex.toString()}</code>
                 </pre>
                 <button
                   onClick={() => handleCopy(selectedPattern.regex.toString())}
-                  className='absolute top-3 right-3 px-3 py-1 text-xs font-medium text-slate-600 bg-white rounded-md border border-slate-300 hover:bg-slate-100'>
+                  className='absolute top-3 right-3 px-3 py-1 text-xs font-medium text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-900 rounded-md border border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800'>
                   Copy
                 </button>
               </div>
             </div>
 
             <div>
-              <label className='block text-sm font-medium text-slate-700'>Description</label>
-              <p className='mt-1 text-slate-600 p-4 border border-slate-200 rounded-lg bg-slate-100'>
+              <label className='block text-sm font-medium text-slate-700 dark:text-slate-200'>Description</label>
+              <p className='mt-1 text-slate-600 dark:text-slate-300 p-4 border border-slate-200 dark:border-slate-800 rounded-lg bg-slate-100 dark:bg-slate-800'>
                 {selectedPattern.description}
               </p>
             </div>
 
-            {copySuccess && <p className='text-center text-sm text-green-600'>{copySuccess}</p>}
+            {copySuccess && <p className='text-center text-sm text-green-600 dark:text-green-400'>{copySuccess}</p>}
 
             <div className='pt-4 text-center'>
               <Link
@@ -220,7 +220,7 @@ export default function RegexGeneratorPage() {
         </section>
 
         <div className='mt-12 text-center'>
-          <Link href='/' className='text-sky-600 hover:text-sky-800 hover:underline'>
+          <Link href='/' className='text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200 hover:underline'>
             &larr; Back to All Tools
           </Link>
         </div>
diff --git a/src/app/regex-tester/page.tsx b/src/app/regex-tester/page.tsx
index 17072f8..e4b1947 100644
--- a/src/app/regex-tester/page.tsx
+++ b/src/app/regex-tester/page.tsx
@@ -48,14 +48,14 @@ export default function RegexTesterPage() {
   const explanation = useMemo(() => explain(pattern), [pattern]);
 
   return <LocalToolLayout title='Regex Tester & Explainer' description='Test JavaScript regular expressions locally. Execution runs in a disposable Web Worker and is stopped if a pattern takes too long.'>
-    <div className='mx-auto max-w-4xl space-y-6'>
-      <section className='rounded-xl bg-white p-6 shadow'>
+    <div className='mx-auto w-full min-w-0 space-y-6'>
+      <section className='rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
         <label htmlFor='regex-pattern' className='font-semibold'>Pattern</label>
-        <div className='mt-2 flex'><span className='rounded-l border bg-slate-100 p-2'>/</span><input id='regex-pattern' value={pattern} onChange={e => setPattern(e.target.value)} className='min-w-0 flex-1 border-y p-2 font-mono'/><span className='border-y bg-slate-100 p-2'>/</span><input aria-label='Regex flags' value={flags} onChange={e => setFlags(e.target.value)} className='w-20 rounded-r border p-2 font-mono'/></div>
+        <div className='mt-2 flex'><span className='rounded-l border bg-slate-100 dark:bg-slate-800 p-2'>/</span><input id='regex-pattern' value={pattern} onChange={e => setPattern(e.target.value)} className='min-w-0 flex-1 border-y p-2 font-mono'/><span className='border-y bg-slate-100 dark:bg-slate-800 p-2'>/</span><input aria-label='Regex flags' value={flags} onChange={e => setFlags(e.target.value)} className='w-20 rounded-r border p-2 font-mono'/></div>
         <label htmlFor='regex-text' className='mt-5 block font-semibold'>Test text</label><textarea id='regex-text' value={text} onChange={e => setText(e.target.value)} className='mt-2 h-40 w-full rounded border p-3 font-mono'/>
-        <div aria-live='polite' className='mt-4'>{running ? <p className='text-sm text-slate-500'>Testing safely...</p> : error ? <p className='text-red-600'>{error}</p> : <><p className='text-sm text-slate-600'>{matches.length} match{matches.length === 1 ? '' : 'es'} in {time.toFixed(3)} ms</p>{matches.slice(0, 100).map((m, i) => <pre key={`${m.index}-${i}`} className='mt-2 overflow-auto rounded bg-emerald-50 p-3 text-sm'>{JSON.stringify(m, null, 2)}</pre>)}{matches.length > 100 && <p className='mt-2 text-sm text-slate-500'>Showing the first 100 matches.</p>}</>}</div>
+        <div aria-live='polite' className='mt-4'>{running ? <p className='text-sm text-slate-500 dark:text-slate-400'>Testing safely...</p> : error ? <p className='text-red-600 dark:text-red-400'>{error}</p> : <><p className='text-sm text-slate-600 dark:text-slate-300'>{matches.length} match{matches.length === 1 ? '' : 'es'} in {time.toFixed(3)} ms</p>{matches.slice(0, 100).map((m, i) => <pre key={`${m.index}-${i}`} className='mt-2 overflow-auto rounded bg-emerald-50 dark:bg-emerald-950 p-3 text-sm'>{JSON.stringify(m, null, 2)}</pre>)}{matches.length > 100 && <p className='mt-2 text-sm text-slate-500 dark:text-slate-400'>Showing the first 100 matches.</p>}</>}</div>
       </section>
-      <section className='rounded-xl bg-white p-6 shadow'><h2 className='font-semibold'>Basic explanation</h2><div className='mt-3 space-y-1 font-mono text-sm'>{explanation.map((x, i) => <div key={i}>{x}</div>)}</div><p className='mt-4 text-xs text-slate-500'>The explainer is intentionally lightweight; the tester itself uses the JavaScript RegExp engine built into the browser.</p></section>
+      <section className='rounded-xl bg-white dark:bg-slate-900 p-6 shadow'><h2 className='font-semibold'>Basic explanation</h2><div className='mt-3 space-y-1 font-mono text-sm'>{explanation.map((x, i) => <div key={i}>{x}</div>)}</div><p className='mt-4 text-xs text-slate-500 dark:text-slate-400'>The explainer is intentionally lightweight; the tester itself uses the JavaScript RegExp engine built into the browser.</p></section>
     </div>
   </LocalToolLayout>;
 }
diff --git a/src/app/screenshot-redactor/page.tsx b/src/app/screenshot-redactor/page.tsx
new file mode 100644
index 0000000..535b8be
--- /dev/null
+++ b/src/app/screenshot-redactor/page.tsx
@@ -0,0 +1,62 @@
+'use client';
+import { useEffect, useRef, useState, type PointerEvent } from 'react';
+import LocalToolLayout from '@/components/LocalToolLayout';
+import { downloadLocal } from '@/lib/local-files';
+import { clampBox, paintRedactions, type RedactionBox } from '@/lib/redaction';
+
+export default function ScreenshotRedactorPage() {
+  const source = useRef<ImageBitmap | null>(null); const canvas = useRef<HTMLCanvasElement>(null); const start = useRef<{ x: number; y: number } | null>(null); const loadId = useRef(0);
+  const [size, setSize] = useState({ width: 0, height: 0 }); const [boxes, setBoxes] = useState<RedactionBox[]>([]); const [draft, setDraft] = useState<RedactionBox | null>(null);
+  const [manual, setManual] = useState<RedactionBox>({ x: 0, y: 0, width: 100, height: 40 }); const [message, setMessage] = useState(''); const [busy, setBusy] = useState(false); const [inputKey, setInputKey] = useState(0);
+  useEffect(() => () => { loadId.current++; source.current?.close(); }, []);
+  useEffect(() => {
+    const target = canvas.current; const image = source.current; if (!target || !image) return;
+    target.width = image.width; target.height = image.height;
+    const context = target.getContext('2d'); if (!context) return;
+    context.drawImage(image, 0, 0); paintRedactions(context, [...boxes, ...(draft ? [draft] : [])]);
+  }, [size, boxes, draft]);
+  const open = async (file: File) => {
+    const id = ++loadId.current; setMessage(''); setBusy(true); source.current?.close(); source.current = null; setBoxes([]); setDraft(null); setSize({ width: 0, height: 0 });
+    try {
+      if (!['image/png','image/jpeg','image/webp'].includes(file.type) || file.size > 20 * 1024 * 1024) throw new Error('Choose a PNG, JPEG or WebP image up to 20 MB.');
+      const image = await createImageBitmap(file);
+      if (image.width * image.height > 12000000 || image.width > 12000 || image.height > 12000) { image.close(); throw new Error('Use an image up to 12 megapixels and 12,000 pixels per side.'); }
+      if (id !== loadId.current) { image.close(); return; }
+      source.current = image; setBoxes([]); setDraft(null); setSize({ width: image.width, height: image.height });
+      setManual({ x: 0, y: 0, width: Math.min(100, image.width), height: Math.min(40, image.height) });
+    } catch (err) { if (id === loadId.current) setMessage((err as Error).message); }
+    finally { if (id === loadId.current) setBusy(false); }
+  };
+  const point = (event: PointerEvent<HTMLCanvasElement>) => { const rect = event.currentTarget.getBoundingClientRect(); return { x: (event.clientX - rect.left) * size.width / rect.width, y: (event.clientY - rect.top) * size.height / rect.height }; };
+  const add = (raw: RedactionBox) => { const box = clampBox(raw, size.width, size.height); if (box.width < 1 || box.height < 1) { setMessage('The rectangle must cover at least one pixel inside the image.'); return; } if (boxes.length >= 100) { setMessage('Use up to 100 redaction areas per image.'); return; } setBoxes(old => [...old, box]); setMessage(''); };
+  const exportImage = async () => {
+    const image = source.current; if (!image || !boxes.length) return; setBusy(true); setMessage('');
+    try {
+      const output = document.createElement('canvas'); output.width = image.width; output.height = image.height;
+      const context = output.getContext('2d'); if (!context) throw new Error('Canvas is unavailable.');
+      context.drawImage(image, 0, 0); paintRedactions(context, boxes);
+      const blob = await new Promise<Blob>((resolve, reject) => output.toBlob(value => value ? resolve(value) : reject(new Error('PNG export failed.')), 'image/png'));
+      const reopened = await createImageBitmap(blob);
+      try { if (reopened.width !== image.width || reopened.height !== image.height) throw new Error('The exported image dimensions could not be verified.'); }
+      finally { reopened.close(); }
+      downloadLocal(blob, 'redacted-screenshot.png', 'image/png');
+      setMessage(`Exported a new, flattened PNG with ${boxes.length} opaque redaction areas. Original image bytes, filename and editable layers are not included.`);
+      output.width = 0; output.height = 0;
+    } catch (err) { setMessage(`Could not export: ${(err as Error).message}`); } finally { setBusy(false); }
+  };
+  return <LocalToolLayout title='Screenshot Redactor' description='Cover sensitive pixels with solid black areas and export a new PNG. Paste a screenshot or open an image; the original stays on your device.'>
+    <div className='mx-auto w-full min-w-0 space-y-5'>
+      <section className='panel space-y-4' onPaste={event => { if (busy) return; const file = Array.from(event.clipboardData.files).find(file => file.type.startsWith('image/')); if (file) { event.preventDefault(); void open(file); } }}>
+        <h2 className='text-lg font-bold'>1. Open or paste a screenshot</h2><label className='block text-sm font-semibold'>PNG, JPEG or WebP<input key={inputKey} className='field mt-2' type='file' accept='image/png,image/jpeg,image/webp' disabled={busy} onChange={event => { const file = event.target.files?.[0]; if (file) void open(file); }}/></label><div tabIndex={0} className='rounded-lg border border-dashed p-5 text-center text-sm text-slate-500 dark:text-slate-400' aria-label='Paste a screenshot here'>Focus here and paste an image with Ctrl+V / ⌘V. Up to 20 MB / 12 megapixels.</div>
+        <p className='note'>This tool uses manual redaction. Review the entire image, including notifications, QR codes, account details and background content. Solid replacement is used instead of blur or pixelation. Downloaded files contain a fresh flattened image; the original remains unchanged.</p>
+      </section>
+      {size.width > 0 && <section className='panel space-y-4'><h2 className='text-lg font-bold'>2. Mark sensitive areas</h2><p className='text-sm'>Drag over the image, or add a rectangle using pixel coordinates below. {size.width} × {size.height} pixels.</p>
+        <div className='flex justify-center overflow-hidden rounded-lg border bg-slate-200 dark:bg-slate-700 p-2'><canvas ref={canvas} aria-label='Screenshot preview. Draw redaction areas with a pointer, or use the coordinate controls below.' className='block max-w-full touch-none' style={{ width: 'auto', height: 'auto', maxHeight: '70vh', cursor: 'crosshair' }} onPointerDown={event => { if (busy) return; event.currentTarget.setPointerCapture(event.pointerId); start.current = point(event); setDraft(null); }} onPointerMove={event => { if (!start.current) return; const end = point(event); setDraft(clampBox({ x: start.current.x, y: start.current.y, width: end.x - start.current.x, height: end.y - start.current.y }, size.width, size.height)); }} onPointerUp={event => { if (!start.current) return; const end = point(event); add({ x: start.current.x, y: start.current.y, width: end.x - start.current.x, height: end.y - start.current.y }); start.current = null; setDraft(null); }} onPointerCancel={() => { start.current = null; setDraft(null); }}/></div>
+        <fieldset className='rounded-lg border p-4'><legend className='px-2 text-sm font-semibold'>Add an area with coordinates</legend><div className='grid grid-cols-2 gap-3 sm:grid-cols-4'>{(['x','y','width','height'] as const).map(key => <label key={key} className='text-sm capitalize'>{key}<input type='number' aria-label={`Rectangle ${key}`} className='field mt-1' min={key === 'x' || key === 'y' ? 0 : 1} max={key === 'x' || key === 'width' ? size.width : size.height} value={manual[key]} onChange={event => setManual(old => ({ ...old, [key]: Number(event.target.value) }))}/></label>)}</div><button disabled={busy} className='action action-secondary mt-3' onClick={() => add(manual)}>Add redaction area</button></fieldset>
+        <div className='flex flex-wrap items-center gap-3'><span role='status' className='mr-auto text-sm'>{boxes.length} redaction areas</span><button className='action action-secondary' disabled={busy || !boxes.length} onClick={() => { setBoxes(old => old.slice(0, -1)); setMessage(''); }}>Undo last area</button><button className='action action-secondary' disabled={busy || !boxes.length} onClick={() => { setBoxes([]); setMessage(''); }}>Reset areas</button><button className='action' disabled={busy || !boxes.length} onClick={() => void exportImage()}>{busy ? 'Preparing image…' : 'Download redacted PNG'}</button></div>
+        <button disabled={busy} className='text-sm font-semibold text-sky-700 dark:text-sky-300 hover:underline' onClick={() => { loadId.current++; source.current?.close(); source.current = null; setBoxes([]); setDraft(null); setSize({ width: 0, height: 0 }); setMessage(''); setInputKey(key => key + 1); }}>Clear image from this tool</button>
+      </section>}
+      {message && <p role='status' className='note'>{message}</p>}
+    </div>
+  </LocalToolLayout>;
+}
diff --git a/src/app/support-sanitizer/page.tsx b/src/app/support-sanitizer/page.tsx
new file mode 100644
index 0000000..a6a0221
--- /dev/null
+++ b/src/app/support-sanitizer/page.tsx
@@ -0,0 +1,50 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import LocalToolLayout from '@/components/LocalToolLayout';
+import { checkFileBatch, downloadLocal } from '@/lib/local-files';
+import type { SupportInput, SupportOutput } from '@/lib/support-sanitizer';
+import CurlConverter from '@/components/CurlConverter';
+
+const SAMPLE: SupportInput[] = [
+  { name: 'example.log', text: '2026-01-01T10:00:00Z user=alex@example.com status=500\nAuthorization: Bearer demonstration-token\nConfig: /home/alex/project/settings.json\nRetry by alex@example.com from 192.168.1.20' },
+  { name: 'example.json', text: JSON.stringify({ customer: 'alex@example.com', api_key: 'demonstration-key', status: 500 }, null, 2) },
+];
+export default function SupportSanitizerPage() {
+  const [mode, setMode] = useState<'files' | 'curl'>('files');
+  const [inputs, setInputs] = useState<SupportInput[]>([]);
+  const [paste, setPaste] = useState(''); const [aliases, setAliases] = useState(true); const [bodies, setBodies] = useState(false); const [literals, setLiterals] = useState('');
+  const [outputs, setOutputs] = useState<SupportOutput[]>([]); const [selected, setSelected] = useState(0); const [error, setError] = useState(''); const [busy, setBusy] = useState(false); const [inputKey, setInputKey] = useState(0);
+  const worker = useRef<Worker | null>(null); const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const stop = () => { worker.current?.terminate(); worker.current = null; if (timer.current) clearTimeout(timer.current); timer.current = null; };
+  useEffect(() => () => { worker.current?.terminate(); if (timer.current) clearTimeout(timer.current); }, []);
+  const invalidate = () => { stop(); setBusy(false); setOutputs([]); setError(''); setSelected(0); };
+  const run = () => {
+    invalidate();
+    try {
+      const sources = [...inputs, ...(paste.trim() ? [{ name: 'pasted.txt', text: paste }] : [])];
+      if (!sources.length) throw new Error('Choose files, paste text or load the example first.');
+      if (paste.length > 5 * 1024 * 1024) throw new Error('Pasted text must be under 5 MB.');
+      const exactValues = literals.split(/\r?\n/).filter(Boolean);
+      if (exactValues.length > 100 || exactValues.some(value => value.length > 1000)) throw new Error('Use up to 100 exact values, with up to 1,000 characters each.');
+      const next = new Worker(new URL('../../lib/support.worker.ts', import.meta.url)); worker.current = next; setBusy(true);
+      timer.current = setTimeout(() => { stop(); setBusy(false); setError('Processing took too long. Use a smaller batch or fewer exact values.'); }, 10000);
+      next.onmessage = (event: MessageEvent<{ result?: SupportOutput[]; error?: string }>) => { stop(); setBusy(false); if (event.data.error) setError(`Could not sanitize this batch: ${event.data.error}`); else setOutputs(event.data.result ?? []); };
+      next.onerror = () => { stop(); setBusy(false); setError('The sanitizer worker could not complete. Reload and try again.'); };
+      next.postMessage({ inputs: sources, options: { aliases, includeBodies: bodies, literals: exactValues } });
+    }
+    catch (err) { setError(`Could not sanitize this batch: ${(err as Error).message}`); }
+  };
+  const zip = async () => { setBusy(true); try { const { default: JSZip } = await import('jszip'); const archive = new JSZip(); outputs.forEach(output => archive.file(output.name, output.text)); archive.file('review-summary.txt', 'ToolStack support sanitization\nOriginal filenames and alias mappings are excluded.\nReview each output; detection is best-effort.\n' + outputs.map(output => `${output.name}: ${output.changes} transformations${output.requests !== undefined ? `; ${output.requests} requests, order/status/timings retained` : ''}`).join('\n')); downloadLocal(await archive.generateAsync({ type: 'blob' }), 'reviewed-support-files.zip', 'application/zip'); } catch { setError('Could not create the ZIP. Try downloading files individually.'); } finally { setBusy(false); } };
+  return <LocalToolLayout title='Support File Sanitizer' description='Clean support files or convert cURL commands to JavaScript locally.'>
+    <div className='mx-auto w-full min-w-0 space-y-5'><div className='flex flex-wrap gap-2' aria-label='Support tool mode'><button className={`action ${mode === 'files' ? '' : 'action-secondary'}`} aria-pressed={mode === 'files'} disabled={busy} onClick={() => setMode('files')}>Logs / JSON / HAR</button><button className={`action ${mode === 'curl' ? '' : 'action-secondary'}`} aria-pressed={mode === 'curl'} disabled={busy} onClick={() => setMode('curl')}>cURL → Fetch</button></div>{mode === 'curl' ? <CurlConverter/> : <><fieldset disabled={busy} className='min-w-0 space-y-5' aria-label='Support file workspace'>
+      <section className='panel space-y-4'><h2 className='text-lg font-bold'>1. Choose what to share</h2><label className='block text-sm font-semibold'>Logs, JSON or HAR files<input key={inputKey} type='file' multiple accept='.txt,.log,.json,.har,.env,.yaml,.yml,.conf' className='field mt-2' onChange={async event => { invalidate(); setInputs([]); const files = Array.from(event.target.files ?? []); try { checkFileBatch(files); setBusy(true); setInputs(await Promise.all(files.map(async file => ({ name: file.name, text: await file.text() })))); } catch (err) { setError((err as Error).message); } finally { setBusy(false); } }}/></label><p className='text-xs text-slate-500 dark:text-slate-400'>Up to 10 files, 5 MB each, 20 MB total. Selected files replace the previous batch. YAML and config files are handled as text.</p>
+        {inputs.length > 0 && <ul className='flex flex-wrap gap-2 text-sm'>{inputs.map((input, i) => <li key={i} className='rounded bg-slate-100 dark:bg-slate-800 px-3 py-1'>{input.name}</li>)}</ul>}
+        <label className='block text-sm font-semibold'>Or paste a log / config snippet<textarea className='field mt-2 h-36 font-mono text-sm' value={paste} onChange={event => { invalidate(); setPaste(event.target.value); }}/></label>
+        <button className='action action-secondary' onClick={() => { invalidate(); setInputs(SAMPLE); setPaste(''); setInputKey(key => key + 1); }}>Load example</button>
+      </section>
+      <section className='panel space-y-4'><h2 className='text-lg font-bold'>2. Set disclosure rules</h2><label className='flex gap-2 text-sm'><input type='checkbox' checked={aliases} onChange={event => { invalidate(); setAliases(event.target.checked); }}/>Use consistent aliases for emails, IPv4 addresses, UUIDs and local user-folder names</label><label className='flex gap-2 text-sm'><input type='checkbox' checked={bodies} onChange={event => { invalidate(); setBodies(event.target.checked); }}/>Keep and scrub HAR request / response bodies (more information to review)</label><label className='block text-sm font-semibold'>Additional exact values to remove, one per line<textarea className='field mt-2 h-24 font-mono text-sm' value={literals} onChange={event => { invalidate(); setLiterals(event.target.value); }} placeholder='A customer name, hostname or internal project name'/></label><p className='note'>Credentials are replaced, never aliased. HAR files are rebuilt: cookies, most headers, fragments, original filenames and extra fields are omitted; all query values are replaced. Encoded response bodies are omitted. URLs and plain-text bodies can still contain values the rules do not recognize. Review every output.</p><div className='flex flex-wrap gap-3'><button disabled={busy} onClick={run} className='action'>Sanitize & preview</button><button disabled={busy} className='action action-secondary' onClick={() => { invalidate(); setInputs([]); setPaste(''); setLiterals(''); setInputKey(key => key + 1); }}>Clear all</button></div></section>
+      {error && <p role='alert' className='note text-red-700 dark:text-red-300'>{error}</p>}
+      {outputs.length > 0 && <section className='panel space-y-4'><h2 className='text-lg font-bold'>3. Review the outgoing files</h2><p role='status' className='text-sm'>{outputs.length} files prepared. Downloads use generic filenames; replacement mappings are not exported.</p><label className='block text-sm font-semibold'>Preview file<select className='field mt-2' value={selected} onChange={event => setSelected(Number(event.target.value))}>{outputs.map((output, i) => <option key={i} value={i}>{output.name} · {output.changes} transformations</option>)}</select></label>{outputs[selected]?.requests !== undefined && <p className='text-sm text-emerald-700 dark:text-emerald-300'>{outputs[selected].requests} requests retained, in original order, with status codes and timings.</p>}<textarea aria-label='Outgoing file contents' readOnly value={outputs[selected]?.text ?? ''} className='field h-96 font-mono text-xs'/><div className='flex flex-wrap gap-3'><button className='action' disabled={busy} onClick={() => void zip()}>{busy ? 'Preparing ZIP…' : 'Download reviewed batch'}</button><button className='action action-secondary' onClick={() => { const output = outputs[selected]; if (output) downloadLocal(output.text, output.name); }}>Download this file</button></div></section>}
+    </fieldset>{busy && <p role='status' className='note'>Processing locally…</p>}</>}</div>
+  </LocalToolLayout>;
+}
diff --git a/src/app/synthetic-data/page.tsx b/src/app/synthetic-data/page.tsx
new file mode 100644
index 0000000..27815e2
--- /dev/null
+++ b/src/app/synthetic-data/page.tsx
@@ -0,0 +1,57 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import Papa from 'papaparse';
+import JSZip from 'jszip';
+import LocalToolLayout from '@/components/LocalToolLayout';
+import { COLUMN_TYPES, SAMPLE_TABLES, type SyntheticColumn, type SyntheticTable, type SyntheticResult } from '@/lib/synthetic-data';
+import { downloadLocal } from '@/lib/local-files';
+
+export default function SyntheticDataPage() {
+  const [tables,setTables] = useState<SyntheticTable[]>(() => structuredClone(SAMPLE_TABLES)); const [seed,setSeed] = useState('toolstack-demo');
+  const [result,setResult] = useState<SyntheticResult | null>(null); const [selected,setSelected] = useState(0); const [error,setError] = useState(''); const [busy,setBusy] = useState(false);
+  const worker = useRef<Worker | null>(null); const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const stop = () => { worker.current?.terminate(); worker.current = null; if (timer.current) clearTimeout(timer.current); timer.current = null; };
+  useEffect(() => () => { worker.current?.terminate(); if (timer.current) clearTimeout(timer.current); },[]);
+  const invalidate = () => { setResult(null); setError(''); };
+  const updateTable = (index: number,update: Partial<SyntheticTable>) => { invalidate(); setTables(items => items.map((item,i) => { const next = i === index ? { ...item,...update } : item; return update.name === undefined ? next : { ...next,columns: next.columns.map(column => column.type === 'reference' && column.reference === items[index].name ? { ...column,reference: update.name } : column) }; })); };
+  const updateColumn = (table: number,column: number,update: Partial<SyntheticColumn>) => updateTable(table,{ columns: tables[table].columns.map((item,i) => i === column ? { ...item,...update } : item) });
+  const generate = () => {
+    invalidate(); setBusy(true);
+    try {
+      const next = new Worker(new URL('../../lib/synthetic.worker.ts',import.meta.url)); worker.current = next;
+      timer.current = setTimeout(() => { stop(); setBusy(false); setError('Generation took too long. Use fewer rows or columns.'); },10000);
+      next.onmessage = (event: MessageEvent<{ result?: SyntheticResult; error?: string }>) => { stop(); setBusy(false); if (event.data.error) setError(event.data.error); else if (event.data.result) { setResult(event.data.result); setSelected(0); } };
+      next.onerror = () => { stop(); setBusy(false); setError('Could not generate this dataset. Reload and try again.'); };
+      next.postMessage({ tables,seed });
+    } catch { stop(); setBusy(false); setError('This browser could not start the generator.'); }
+  };
+  const csv = (table: SyntheticResult[number]) => Papa.unparse(table.rows,{ escapeFormulae: true });
+  const downloadZip = async () => {
+    if (!result) return; setBusy(true); setError('');
+    try { const zip = new JSZip(); for (const table of result) { zip.file(`${table.name}.csv`,csv(table)); zip.file(`${table.name}.json`,JSON.stringify(table.rows,null,2)); } zip.file('schema.json',JSON.stringify({ seed,tables },null,2)); downloadLocal(await zip.generateAsync({ type: 'blob' }),'synthetic-dataset.zip','application/zip'); }
+    catch { setError('Could not package the files. Download individual tables instead.'); } finally { setBusy(false); }
+  };
+  const preview = result?.[selected];
+  return <LocalToolLayout title='Synthetic Dataset Generator' description='Create repeatable fake CSV / JSON datasets with linked tables.'>
+    <fieldset disabled={busy} className='mx-auto min-w-0 w-full min-w-0 space-y-5'>
+      <section className='panel flex flex-wrap items-end gap-3'><label className='min-w-0 flex-1 text-sm font-semibold'>Seed<input className='field mt-2' maxLength={200} value={seed} onChange={event => { invalidate(); setSeed(event.target.value); }}/></label><button className='action action-secondary' onClick={() => { invalidate(); setTables(structuredClone(SAMPLE_TABLES)); setSeed('toolstack-demo'); }}>Reset example</button></section>
+      <details className='panel'><summary className='cursor-pointer text-sm font-semibold'>Edit tables · {tables.map(table => `${table.name || 'Unnamed'} (${table.rows.toLocaleString()})`).join(', ')}</summary><div className='mt-4 space-y-5'>
+      {tables.map((table,ti) => <section className='space-y-4 rounded-xl border border-slate-200 p-4 dark:border-slate-700' key={ti}>
+        <div className='flex flex-wrap items-end gap-3'><label className='min-w-0 flex-1 text-sm font-semibold'>Table {ti + 1}<input aria-label={`Table ${ti + 1} name`} className='field mt-2' value={table.name} maxLength={40} onChange={event => updateTable(ti,{ name: event.target.value })}/></label><label className='w-28 text-sm font-semibold'>Rows<input aria-label={`${table.name} rows`} className='field mt-2' type='number' min={1} max={10000} value={table.rows} onChange={event => updateTable(ti,{ rows: Number(event.target.value) })}/></label><button className='action action-secondary' disabled={tables.length === 1} onClick={() => { invalidate(); setTables(items => items.filter((_,i) => i !== ti)); }}>Remove table</button></div>
+        <div className='space-y-3'>{table.columns.map((column,ci) => <div className='rounded-lg border border-slate-200 p-3 dark:border-slate-700' key={ci}>
+          <div className='grid items-end gap-3 sm:grid-cols-[1fr_1fr_auto]'><label className='min-w-0 text-xs font-semibold'>Column<input aria-label={`${table.name} column ${ci + 1} name`} className='field mt-1' maxLength={40} value={column.name} onChange={event => updateColumn(ti,ci,{ name: event.target.value })}/></label><label className='text-xs font-semibold'>Type<select aria-label={`${table.name} ${column.name} type`} className='field mt-1' value={column.type} onChange={event => updateColumn(ti,ci,{ type: event.target.value as SyntheticColumn['type'], min: undefined, max: undefined, choices: undefined, reference: undefined })}>{COLUMN_TYPES.map(type => <option key={type} value={type}>{({ id: 'ID (unique)', name: 'Test name', email: 'Test email', integer: 'Integer', decimal: 'Decimal (2 places)', boolean: 'Boolean', date: 'Date', choice: 'Choice', reference: 'Reference to ID', uuid: 'UUID (test only)' })[type]}</option>)}</select></label><button className='action action-secondary' disabled={table.columns.length === 1} aria-label={`Remove ${table.name} ${column.name}`} onClick={() => updateTable(ti,{ columns: table.columns.filter((_,i) => i !== ci) })}>Remove</button></div>
+          {['integer','decimal','date'].includes(column.type) && <div className='mt-3 grid grid-cols-2 gap-3'>{(['min','max'] as const).map(bound => <label key={bound} className='text-xs font-semibold'>{bound === 'min' ? 'From' : 'Through'}<input aria-label={`${table.name} ${column.name} ${bound}`} className='field mt-1' type={column.type === 'date' ? 'date' : 'number'} step={column.type === 'decimal' ? '0.01' : '1'} value={column[bound] ?? (column.type === 'date' ? bound === 'min' ? '2025-01-01' : '2025-12-31' : bound === 'min' ? '0' : '100')} onChange={event => updateColumn(ti,ci,{ [bound]: event.target.value })}/></label>)}</div>}
+          {column.type === 'choice' && <label className='mt-3 block text-xs font-semibold'>Choices (comma separated)<input aria-label={`${table.name} ${column.name} choices`} className='field mt-1' value={column.choices ?? ''} onChange={event => updateColumn(ti,ci,{ choices: event.target.value })}/></label>}
+          {column.type === 'reference' && <label className='mt-3 block text-xs font-semibold'>Parent table<select aria-label={`${table.name} ${column.name} parent`} className='field mt-1' value={column.reference ?? ''} onChange={event => updateColumn(ti,ci,{ reference: event.target.value })}><option value=''>Choose a table with an ID</option>{tables.filter((item,i) => i !== ti && item.columns.some(col => col.type === 'id')).map((item,i) => <option key={i} value={item.name}>{item.name}</option>)}</select></label>}
+        </div>)}</div>
+        <button className='action action-secondary' disabled={table.columns.length >= 30} onClick={() => updateTable(ti,{ columns: [...table.columns,{ name: `column_${table.columns.length + 1}`,type: 'integer' }] })}>Add column</button>
+      </section>)}
+      <button className='action action-secondary' disabled={tables.length >= 8} onClick={() => { invalidate(); setTables(items => [...items,{ name: `table_${items.length + 1}`,rows: 100,columns: [{ name: 'id',type: 'id' }] }]); }}>Add table</button>
+      <p className='text-xs text-slate-500 dark:text-slate-400'>IDs start at 1 in each table. Up to 8 tables, 20,000 rows total and 300,000 cells. Generated UUIDs are for fixtures, not security.</p>
+      </div></details>
+      <div className='flex flex-wrap items-center gap-3'><button className='action' onClick={generate}>{busy ? 'Working…' : 'Generate dataset'}</button><p className='text-sm text-slate-500 dark:text-slate-400'>Same seed and schema, same output. Test emails use example.invalid.</p></div>
+      {error && <p role='alert' className='note'>{error}</p>}
+      {result && preview && <section className='panel space-y-4'><div className='flex flex-wrap items-end gap-3'><label className='min-w-0 flex-1 text-sm font-semibold'>Preview table<select className='field mt-2' value={selected} onChange={event => setSelected(Number(event.target.value))}>{result.map((item,i) => <option key={i} value={i}>{item.name} ({item.rows.length} rows)</option>)}</select></label><button className='action' onClick={downloadZip}>Download all (.zip)</button></div><p role='status' className='text-sm'>Generated {result.reduce((sum,item) => sum + item.rows.length,0).toLocaleString()} rows across {result.length} tables. All references point to generated IDs.</p><div className='max-h-96 overflow-auto rounded-lg border border-slate-200 dark:border-slate-700'><table className='w-full text-left text-xs'><thead><tr>{Object.keys(preview.rows[0]).map(name => <th className='whitespace-nowrap border-b p-2' key={name}>{name}</th>)}</tr></thead><tbody>{preview.rows.slice(0,20).map((row,i) => <tr key={i}>{Object.entries(row).map(([key,value]) => <td key={key} className='whitespace-nowrap border-b border-slate-200 p-2 dark:border-slate-700'>{String(value)}</td>)}</tr>)}</tbody></table></div><p className='text-xs text-slate-500 dark:text-slate-400'>Showing up to 20 rows. CSV exports escape formula-like text.</p><div className='flex flex-wrap gap-3'><button className='action action-secondary' onClick={() => downloadLocal(csv(preview),`${preview.name}.csv`,'text/csv;charset=utf-8')}>Download table CSV</button><button className='action action-secondary' onClick={() => downloadLocal(JSON.stringify(preview.rows,null,2),`${preview.name}.json`,'application/json')}>Download table JSON</button></div></section>}
+    </fieldset>
+  </LocalToolLayout>;
+}
diff --git a/src/app/text-analyzer/page.tsx b/src/app/text-analyzer/page.tsx
index 6288645..c291f85 100644
--- a/src/app/text-analyzer/page.tsx
+++ b/src/app/text-analyzer/page.tsx
@@ -14,9 +14,9 @@ interface StatCardProps {
 }
 
 const StatCard = ({ label, value }: StatCardProps) => (
-  <div className='bg-slate-100 p-4 rounded-lg text-center shadow-sm'>
-    <p className='text-sm font-medium text-slate-500'>{label}</p>
-    <p className='text-3xl font-bold text-slate-800'>{value}</p>
+  <div className='bg-slate-100 dark:bg-slate-800 p-4 rounded-lg text-center shadow-sm'>
+    <p className='text-sm font-medium text-slate-500 dark:text-slate-400'>{label}</p>
+    <p className='text-3xl font-bold text-slate-800 dark:text-slate-100'>{value}</p>
   </div>
 );
 
@@ -51,24 +51,24 @@ export default function TextAnalyzerPage() {
   }, [text]);
 
   return (
-    <div className='flex flex-col min-h-screen bg-slate-50'>
+    <div className='flex flex-col min-h-screen bg-slate-50 dark:bg-slate-950'>
       <Navbar />
       <Breadcrumbs />
-      <main className='flex-grow container mx-auto px-4 py-8'>
+      <main id='main-content' className='flex-grow page-shell px-4 py-8'>
         <header className='mb-8 text-center'>
-          <h1 className='text-4xl font-bold text-slate-800'>Text Statistics Analyzer</h1>
-          <p className='text-lg text-slate-600 mt-1'>
+          <h1 className='text-4xl font-bold text-slate-800 dark:text-slate-100'>Text Statistics Analyzer</h1>
+          <p className='text-lg text-slate-600 dark:text-slate-300 mt-1'>
             Get instant stats on your text, like word count, characters, and more.
           </p>
         </header>
 
-        <section className='max-w-4xl mx-auto'>
+        <section className='w-full min-w-0 mx-auto'>
           {/* Input Text Area */}
-          <div className='bg-white p-6 rounded-lg shadow-xl mb-8'>
+          <div className='bg-white dark:bg-slate-900 p-6 rounded-lg shadow-xl mb-8'>
             <textarea
               value={text}
               onChange={(e) => setText(e.target.value)}
-              className='w-full p-3 border border-slate-300 rounded-lg font-mono focus:ring-2 focus:ring-sky-500 focus:border-sky-500 outline-none transition duration-150 ease-in-out'
+              className='w-full p-3 border border-slate-300 dark:border-slate-700 rounded-lg font-mono focus:ring-2 focus:ring-sky-500 focus:border-sky-500 outline-none transition duration-150 ease-in-out'
               rows={12}
               placeholder='Start typing or paste your text here...'
             />
@@ -84,7 +84,7 @@ export default function TextAnalyzerPage() {
         </section>
 
         <div className='mt-12 text-center'>
-          <Link href='/' className='text-sky-600 hover:text-sky-800 hover:underline'>
+          <Link href='/' className='text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200 hover:underline'>
             &larr; Back to All Tools
           </Link>
         </div>
diff --git a/src/app/text-diff/page.tsx b/src/app/text-diff/page.tsx
index 2adfb0a..e4e4522 100644
--- a/src/app/text-diff/page.tsx
+++ b/src/app/text-diff/page.tsx
@@ -1,111 +1,122 @@
-// src/app/text-diff/page.tsx
 'use client';
-
-import React, { useState, useMemo } from 'react';
-import Link from 'next/link';
-import * as Diff from 'diff';
+import { useCallback,useEffect,useMemo,useRef,useState } from 'react';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import Breadcrumbs from '@/components/Breadcrumbs';
+import DiffEditors,{ type DiffEditorHandle } from '@/components/DiffEditors';
+import { DEFAULT_COMPARE,checkDiffInput,decodeDiffFile,encodeDiffFile,type CompareMode,type CompareOptions,type CompareResult } from '@/lib/file-diff-types';
+import { buildDiffReport } from '@/lib/diff-report';
+import { visibleDiffText } from '@/lib/file-diff';
+import { downloadLocal } from '@/lib/local-files';
 
-// Define some sample text to start with
-const SAMPLE_TEXT_A = `The quick brown fox jumps over the lazy dog.
-It was the best of times, it was the worst of times.
-A stitch in time saves nine.`;
-
-const SAMPLE_TEXT_B = `The quick brown cat jumps over the lazy dog.
-It was the best of times, it was the blurst of times.
-A stitch in time saves nine.
-This is a new line.`;
-
-export default function TextDiffPage() {
-  const [textA, setTextA] = useState(SAMPLE_TEXT_A);
-  const [textB, setTextB] = useState(SAMPLE_TEXT_B);
-
-  const diffResult = useMemo(() => {
-    // Using diffLines for better performance with multi-line text
-    return Diff.diffLines(textA, textB);
-  }, [textA, textB]);
-
-  return (
-    <div className='flex flex-col min-h-screen bg-slate-50'>
-      <Navbar />
-      <Breadcrumbs />
-      <main className='flex-grow container mx-auto px-4 py-8'>
-        <header className='mb-8 text-center'>
-          <h1 className='text-4xl font-bold text-slate-800'>Text Difference Checker</h1>
-          <p className='text-lg text-slate-600 mt-1'>Compare two blocks of text and highlight the differences.</p>
-        </header>
+const EXAMPLES: Record<CompareMode,[string,string]> = {
+  text: ['The quick brown fox jumps over the lazy dog.\nIt was the best of times, it was the worst of times.\nA stitch in time saves nine.\n','The quick brown cat jumps over the lazy dog.\nIt was the best of times, it was the blurst of times.\nA stitch in time saves nine.\nThis is a new line.\n'],
+  json: [JSON.stringify([{ id: 1,email: 'first@example.invalid',active: true },{ id: 2,email: 'second@example.invalid',active: false }],null,2),JSON.stringify([{ id: 2,email: 'second@example.invalid',active: true },{ id: 1,email: 'updated@example.invalid',active: true }],null,2)],
+  csv: ['id,email,active\n1,first@example.invalid,true\n2,second@example.invalid,false\n','id,email,active\n2,second@example.invalid,true\n1,updated@example.invalid,true\n'],
+  env: ['API_KEY=example-old-token\nTIMEOUT=30\nRETRIES=3\nAUTH_ENABLED=true\n','RETRIES=5\nTIMEOUT=60\nAPI_KEY=example-new-token\nAUTH_ENABLED=false\n'],
+};
+const ACCEPT = '.txt,.md,.json,.csv,.ts,.tsx,.js,.jsx,.yml,.yaml,.env,.xml,.log,.css,.html,.sql,.py,.sh,.ini,.toml';
+const fieldList = (value: string) => value.split(',').map(item => item.trim()).filter(Boolean);
+const MODES: Record<CompareMode,string> = { text: 'Text / code',json: 'JSON',csv: 'CSV',env: '.env' };
 
-        {/* Input Text Areas */}
-        <section className='grid grid-cols-1 md:grid-cols-2 gap-6 max-w-6xl mx-auto'>
-          <div>
-            <label htmlFor='text-a' className='block text-sm font-semibold text-slate-700 mb-1'>
-              Original Text
-            </label>
-            <textarea
-              id='text-a'
-              value={textA}
-              onChange={(e) => setTextA(e.target.value)}
-              className='w-full p-3 border border-slate-300 rounded-lg font-mono focus:ring-2 focus:ring-sky-500 focus:border-sky-500 outline-none transition duration-150 ease-in-out shadow-sm'
-              rows={12}
-              placeholder='Paste the first version of your text here...'
-            />
-          </div>
-          <div>
-            <label htmlFor='text-b' className='block text-sm font-semibold text-slate-700 mb-1'>
-              Changed Text
-            </label>
-            <textarea
-              id='text-b'
-              value={textB}
-              onChange={(e) => setTextB(e.target.value)}
-              className='w-full p-3 border border-slate-300 rounded-lg font-mono focus:ring-2 focus:ring-sky-500 focus:border-sky-500 outline-none transition duration-150 ease-in-out shadow-sm'
-              rows={12}
-              placeholder='Paste the second version of your text here...'
-            />
-          </div>
-        </section>
+export default function FileDiffPage() {
+  const [left,setLeft] = useState(EXAMPLES.text[0]); const [right,setRight] = useState(EXAMPLES.text[1]); const [options,setOptions] = useState<CompareOptions>({ ...DEFAULT_COMPARE });
+  const [drafts,setDrafts] = useState({ keys: '',ignoreLiterals: '',redactions: '',ignorePaths: '',expectedPaths: '' });
+  const [visibleCount,setVisibleCount] = useState(100);
+  const [syntax,setSyntax] = useState<'plain' | 'javascript' | 'json'>('plain');
+  const [view,setView] = useState<'source' | 'review'>('source'); const [wrap,setWrap] = useState(false); const [collapse,setCollapse] = useState(false); const [spaces,setSpaces] = useState(false); const [mobileSide,setMobileSide] = useState<'a' | 'b'>('a'); const [direction,setDirection] = useState<'a-to-b' | 'b-to-a'>('a-to-b');
+  const [status,setStatus] = useState<{ count: number; precise: boolean }>({ count: 0,precise: true });
+  const [state,setState] = useState<{ signature: object; result?: CompareResult; error?: string } | null>(null); const [selected,setSelected] = useState<string[]>([]); const [showIgnored,setShowIgnored] = useState(false); const [onlyUnexpected,setOnlyUnexpected] = useState(false); const [includeContext,setIncludeContext] = useState(false); const [reportOpen,setReportOpen] = useState(false); const [message,setMessage] = useState(''); const [patchBusy,setPatchBusy] = useState(false); const [reading,setReading] = useState(false);
+  const [names,setNames] = useState({ a: '',b: '' }); const [encodings,setEncodings] = useState<{ a: 'utf-8' | 'utf-16le' | 'utf-16be'; b: 'utf-8' | 'utf-16le' | 'utf-16be' }>({ a: 'utf-8',b: 'utf-8' });
+  const sourceRef = useRef<DiffEditorHandle>(null); const reviewRef = useRef<DiffEditorHandle>(null); const worker = useRef<Worker | null>(null); const patchWorker = useRef<Worker | null>(null); const patchTimer = useRef<ReturnType<typeof setTimeout> | null>(null); const active = useRef(true); const fileA = useRef<HTMLInputElement>(null); const fileB = useRef<HTMLInputElement>(null);
+  const signature = useMemo(() => ({ left,right,options }),[left,right,options]); const result = state?.signature === signature ? state.result : undefined; const error = state?.signature === signature ? state.error : undefined;
+  const sourceStatus = useCallback((count: number,precise: boolean) => setStatus(previous => previous.count === count && previous.precise === precise ? previous : { count,precise }),[]);
+  const onError = useCallback((value: string) => setMessage(value),[]);
+  const invalidate = () => { setReportOpen(false); setMessage(''); };
+  const change = useCallback((side: 'a' | 'b',value: string) => { setReportOpen(false); setMessage(''); if (side === 'a') setLeft(value); else setRight(value); },[]);
+  const configure = (update: Partial<CompareOptions>) => { invalidate(); setOptions(previous => ({ ...previous,...update })); };
+  const editRules = (key: keyof typeof drafts,value: string) => { setDrafts(previous => ({ ...previous,[key]: value })); configure({ [key]: key === 'keys' ? fieldList(value) : value.split('\n').map(line => key === 'ignorePaths' || key === 'expectedPaths' ? line.trim() : line).filter(line => line.trim()) }); };
+  useEffect(() => { active.current = true; return () => { active.current = false; patchWorker.current?.terminate(); if (patchTimer.current) clearTimeout(patchTimer.current); }; },[]);
+  useEffect(() => {
+    let deadline: ReturnType<typeof setTimeout> | undefined;
+    const delay = setTimeout(() => {
+      try {
+        const next = new Worker(new URL('../../lib/file-diff.worker.ts',import.meta.url)); worker.current = next;
+        deadline = setTimeout(() => { next.terminate(); setState({ signature,error: 'Comparison took too long. Use a smaller section or simpler rules. No partial result was produced.' }); },8000);
+        next.onmessage = (event: MessageEvent<{ result?: CompareResult; error?: string }>) => { if (deadline) clearTimeout(deadline); next.terminate(); if (worker.current !== next) return; setState({ signature,...event.data }); setSelected(event.data.result?.entries.filter(entry => !entry.ignored).map(entry => entry.id) ?? []); setVisibleCount(100); };
+        next.onerror = () => { if (deadline) clearTimeout(deadline); next.terminate(); if (worker.current === next) setState({ signature,error: 'The comparison worker could not complete. Reload and try again.' }); };
+        next.postMessage({ before: signature.left,after: signature.right,options: signature.options });
+      } catch { setState({ signature,error: 'Could not start local comparison in this browser.' }); }
+    },350);
+    return () => { clearTimeout(delay); if (deadline) clearTimeout(deadline); worker.current?.terminate(); worker.current = null; };
+  },[signature]);
+  const load = async (side: 'a' | 'b',file: File) => {
+    if (reading) return; invalidate(); setReading(true);
+    try { if (file.size > 1024 * 1024) throw new Error('Use text files up to 1 MB each.'); const bytes = new Uint8Array(await file.arrayBuffer()); const text = decodeDiffFile(bytes); if (!active.current) return; const encoding = bytes[0] === 0xff && bytes[1] === 0xfe ? 'utf-16le' : bytes[0] === 0xfe && bytes[1] === 0xff ? 'utf-16be' : 'utf-8'; change(side,text); setNames(previous => ({ ...previous,[side]: file.name })); setEncodings(previous => ({ ...previous,[side]: encoding })); }
+    catch (err) { if (active.current) setMessage((err as Error).message); } finally { if (active.current) setReading(false); }
+  };
+  const patch = () => {
+    setPatchBusy(true); setMessage(''); const snapshot = { left,right };
+    try { const next = new Worker(new URL('../../lib/file-diff.worker.ts',import.meta.url)); patchWorker.current = next;
+      const stop = () => { next.terminate(); if (patchTimer.current) clearTimeout(patchTimer.current); patchWorker.current = null; setPatchBusy(false); };
+      patchTimer.current = setTimeout(() => { stop(); setMessage('Patch creation took too long. Try smaller source files.'); },8000);
+      next.onmessage = (event: MessageEvent<{ patch?: string; error?: string }>) => { stop(); if (event.data.error) setMessage(event.data.error); else if (event.data.patch !== undefined) downloadLocal(event.data.patch,'changes.diff','text/x-diff;charset=utf-8'); };
+      next.onerror = () => { stop(); setMessage('Could not create a patch.'); }; next.postMessage({ action: 'patch',before: snapshot.left,after: snapshot.right });
+    } catch { setPatchBusy(false); setMessage('Could not start patch creation.'); }
+  };
+  const report = useMemo(() => { if (!reportOpen || !result || !selected.length) return null; try { return buildDiffReport(result,selected,includeContext); } catch { return null; } },[reportOpen,result,selected,includeContext]);
+  const entries = result?.entries.filter(entry => (showIgnored || !entry.ignored) && (!onlyUnexpected || entry.expected === false)) ?? [];
+  const editor = view === 'source' ? sourceRef : reviewRef;
+  const example = () => { invalidate(); setLeft(EXAMPLES[options.mode][0]); setRight(EXAMPLES[options.mode][1]); setNames({ a: '',b: '' }); setEncodings({ a: 'utf-8',b: 'utf-8' }); setDrafts({ keys: options.mode === 'json' || options.mode === 'csv' ? 'id' : '',expectedPaths: options.mode === 'env' ? '/TIMEOUT\n/RETRIES' : '',ignorePaths: '',ignoreLiterals: '',redactions: '' }); setOptions(previous => ({ ...DEFAULT_COMPARE,mode: previous.mode,keys: previous.mode === 'json' || previous.mode === 'csv' ? ['id'] : [],expectedPaths: previous.mode === 'env' ? ['/TIMEOUT','/RETRIES'] : [] })); };
+  const reset = () => { invalidate(); setLeft(''); setRight(''); setNames({ a: '',b: '' }); setEncodings({ a: 'utf-8',b: 'utf-8' }); setSelected([]); };
 
-        {/* Diff Results */}
-        <section className='bg-white p-6 md:p-8 rounded-lg shadow-xl max-w-6xl mx-auto mt-8'>
-          <h2 className='text-xl font-semibold text-slate-700 border-b pb-2 mb-4'>Differences</h2>
-          <pre className='text-sm whitespace-pre-wrap font-mono bg-slate-50 p-4 rounded-md overflow-x-auto'>
-            {diffResult.map((part, index) => {
-              const color = part.added
-                ? 'bg-green-100 text-green-800'
-                : part.removed
-                ? 'bg-red-100 text-red-800'
-                : 'text-slate-500';
-
-              const prefix = part.added ? '+ ' : part.removed ? '- ' : '  ';
-
-              return (
-                <span key={index} className={`${color} block`}>
-                  {/* We split by newline to add the prefix to each line */}
-                  {part.value.split('\n').map((line, i, arr) => {
-                    // Don't render the final empty line from a split
-                    if (i === arr.length - 1 && line === '') return null;
-                    return (
-                      <span key={i} className='block'>
-                        {prefix}
-                        {line}
-                      </span>
-                    );
-                  })}
-                </span>
-              );
-            })}
-          </pre>
-        </section>
-
-        <div className='mt-12 text-center'>
-          <Link href='/' className='text-sky-600 hover:text-sky-800 hover:underline'>
-            &larr; Back to All Tools
-          </Link>
+  return <div className='flex min-h-screen flex-col bg-slate-50 dark:bg-slate-950'><Navbar/><Breadcrumbs/>
+    <main id='main-content' className='page-shell flex-1 px-4 pb-8'>
+      <header className='mb-5 flex flex-wrap items-baseline justify-between gap-2'><h1 className='text-2xl font-bold text-slate-950 dark:text-slate-100'>Text &amp; File Diff</h1><span className='text-xs text-emerald-700 dark:text-emerald-300'>Local processing · no uploads · nothing saved</span></header>
+      <div className='mb-3 flex flex-wrap items-center gap-2'>
+        <div className='mr-auto flex gap-1' aria-label='Comparison workspace'>{(['source','review'] as const).map(item => <button key={item} className={`action text-sm ${view === item ? '' : 'action-secondary'}`} aria-pressed={view === item} onClick={() => { setView(item); setMessage(''); }}>{item === 'source' ? 'Edit & compare' : 'Private review'}</button>)}</div>
+        <button className='action action-secondary text-sm' onClick={example}>Load example</button><button className='action action-secondary text-sm' onClick={() => { invalidate(); setLeft(right); setRight(left); setNames({ a: names.b,b: names.a }); setEncodings({ a: encodings.b,b: encodings.a }); }}>Swap</button><button className='action action-secondary text-sm' onClick={reset}>Clear</button>
+      </div>
+      <section className='overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900' aria-label='File comparison workspace'>
+        <div className='diff-toolbar flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-slate-200 px-3 py-2 text-xs dark:border-slate-700'>
+          <button aria-label='Previous difference' title='Previous difference' className='diff-icon' onClick={() => editor.current?.previous(mobileSide)}>↑</button><button aria-label='Next difference' title='Next difference' className='diff-icon' onClick={() => editor.current?.next(mobileSide)}>↓</button>
+          <label className='flex items-center gap-1.5'><input type='checkbox' checked={wrap} onChange={event => setWrap(event.target.checked)}/>Wrap</label><label className='flex items-center gap-1.5'><input type='checkbox' checked={collapse} onChange={event => setCollapse(event.target.checked)}/>Fold unchanged</label><label className='flex items-center gap-1.5'><input type='checkbox' checked={spaces} onChange={event => setSpaces(event.target.checked)}/>Show spaces</label>
+          {view === 'source' && <label className='hidden items-center gap-1.5 md:flex'>Merge<select aria-label='Merge direction' className='rounded border border-slate-300 px-1 py-1 dark:border-slate-700' value={direction} onChange={event => setDirection(event.target.value as typeof direction)}><option value='a-to-b'>Left → right</option><option value='b-to-a'>Right → left</option></select></label>}
+          {view === 'review' && <label className='flex items-center gap-1.5'><input type='checkbox' checked={showIgnored} onChange={event => { setShowIgnored(event.target.checked); setReportOpen(false); }}/>Show ignored changes</label>}
+          <span className='ml-auto text-slate-500 dark:text-slate-400'>{view === 'source' ? `${status.count} text blocks` : 'Masked · read only'}</span>
+        </div>
+        <div className='grid grid-cols-2 border-b border-slate-200 dark:border-slate-700'>{(['a','b'] as const).map(side => <div className='min-w-0 px-3 py-2' key={side} onDragOver={event => event.preventDefault()} onDrop={event => { event.preventDefault(); const file = event.dataTransfer.files[0]; if (file && view === 'source') void load(side,file); }}><div className='flex flex-wrap items-center gap-2'><span className='mr-auto text-sm font-semibold'>{side === 'a' ? 'Original' : 'Changed'}</span>{view === 'source' && <><button aria-label={`Undo ${side === 'a' ? 'original' : 'changed'} editor`} className='diff-icon' title='Undo' onClick={() => sourceRef.current?.undo(side)}>↶</button><button aria-label={`Redo ${side === 'a' ? 'original' : 'changed'} editor`} className='diff-icon' title='Redo' onClick={() => sourceRef.current?.redo(side)}>↷</button><button className='text-xs font-semibold text-sky-700 dark:text-sky-300' disabled={reading} onClick={() => (side === 'a' ? fileA : fileB).current?.click()}>Open file</button><input ref={side === 'a' ? fileA : fileB} className='hidden' type='file' aria-label={`Open ${side === 'a' ? 'original' : 'changed'} file`} accept={ACCEPT} onChange={event => { const file = event.target.files?.[0]; event.target.value = ''; if (file) void load(side,file); }}/></>}</div>{names[side] && view === 'source' && <p className='mt-1 truncate text-xs text-slate-500 dark:text-slate-400' title={names[side]}>{names[side]}</p>}</div>)}</div>
+        <div className='flex gap-2 border-b border-slate-200 p-2 md:hidden dark:border-slate-700'>{(['a','b'] as const).map(side => <button key={side} aria-pressed={mobileSide === side} className={'action px-3 py-1 text-xs ' + (mobileSide === side ? '' : 'action-secondary')} onClick={() => setMobileSide(side)}>{side === 'a' ? 'Original pane' : 'Changed pane'}</button>)}</div>
+        <div className={`diff-side-${mobileSide}`} hidden={view !== 'source'} onDragOver={event => { if (event.dataTransfer.types.includes('Files')) event.preventDefault(); }} onDropCapture={event => { const file = event.dataTransfer.files[0]; if (!file) return; event.preventDefault(); event.stopPropagation(); const pane = (event.target as HTMLElement).closest('.cm-mergeViewEditor'); const side = pane?.querySelector('.cm-merge-b') ? 'b' : 'a'; void load(side,file); }}>
+          <DiffEditors ref={sourceRef} left={left} right={right} onChange={change} onError={onError} wrap={wrap} collapse={collapse} whitespace={spaces} sync direction={direction} mode={options.mode} syntax={syntax} onStatus={sourceStatus}/>
         </div>
-      </main>
-      <Footer />
-    </div>
-  );
+        {view === 'review' && <div className={`diff-side-${mobileSide}`}>{result ? <DiffEditors ref={reviewRef} left={showIgnored ? result.exactLeft : result.left} right={showIgnored ? result.exactRight : result.right} onError={onError} readonly wrap={wrap} collapse={collapse} whitespace={spaces} sync direction={direction} mode='env'/> : <p className='p-8 text-center text-sm'>{error ? 'Fix the source or comparison rules to continue.' : 'Comparing locally…'}</p>}</div>}
+      </section>
+      <div className='my-3 flex flex-wrap items-start justify-between gap-2 text-xs text-slate-600 dark:text-slate-300'>
+        <p>{view === 'source' ? 'Edit either pane. Arrows copy exact changes; Ctrl/Cmd+Z undoes them. Review masks detected private values.' : 'Review uses comparison rules and shared aliases. Source files and source downloads are unchanged.'}</p>
+        {result && <p role='status' className='font-semibold'>{result.meaningful} {options.mode === 'text' ? 'change blocks' : 'field changes'} · {result.ignored} ignored{result.reordered ? ` · ${result.reordered} ${options.mode === 'text' ? 'exact block moves' : 'records reordered'}` : ''}{options.expectedPaths.length ? ` · ${result.expected} expected · ${result.unexpected} unexpected` : ''}</p>}
+      </div>
+      {!status.precise && view === 'source' && <p className='note my-3 text-sm'>Editor highlighting is simplified for this input. Private review still requires an exact, completed comparison.</p>}
+      {(error || message || reading) && <p role={error ? 'alert' : 'status'} className='note my-3'>{error || message || 'Reading locally…'}</p>}
+      <details className='panel my-4'><summary className='cursor-pointer text-sm font-semibold'>Comparison options</summary><div className='mt-4 space-y-4'>
+        <div className='grid gap-4 sm:grid-cols-3'><label className='text-sm font-semibold'>Compare as<select className='field mt-1' value={options.mode} onChange={event => { setDrafts(previous => ({ ...previous,keys: '',expectedPaths: '',ignorePaths: '' })); configure({ mode: event.target.value as CompareMode,keys: [],expectedPaths: [],ignorePaths: [] }); }}>{Object.entries(MODES).map(([value,label]) => <option value={value} key={value}>{label}</option>)}</select></label><label className='text-sm font-semibold'>Spaces / tabs<select className='field mt-1' value={options.whitespace} onChange={event => configure({ whitespace: event.target.value as CompareOptions['whitespace'] })}><option value='exact'>Compare exactly</option><option value='trim'>Ignore leading / trailing</option><option value='all'>Ignore all spaces / tabs</option></select></label>{options.mode === 'text' && <label className='text-sm font-semibold'>Code highlighting<select className='field mt-1' value={syntax} onChange={event => setSyntax(event.target.value as typeof syntax)}><option value='plain'>Plain text</option><option value='javascript'>JavaScript / TypeScript</option><option value='json'>JSON</option></select></label>}{options.mode === 'json' && <label className='text-sm font-semibold'>Absolute numeric tolerance<input className='field mt-1' type='number' min='0' step='any' value={options.numericTolerance} onChange={event => configure({ numericTolerance: Number(event.target.value) })}/></label>}</div>
+        <div className='flex flex-wrap gap-4 text-sm'>{([{ key: 'ignoreCase',label: 'Ignore string case' },{ key: 'ignoreEol',label: 'Ignore LF / CRLF style' },{ key: 'timestamps',label: 'Ignore ISO timestamps' },{ key: 'uuids',label: 'Ignore UUID values' }] as const).map(item => <label className='flex items-center gap-2' key={item.key}><input type='checkbox' checked={options[item.key]} onChange={event => configure({ [item.key]: event.target.checked })}/>{item.label}</label>)}</div>
+        {(options.mode === 'json' || options.mode === 'csv') && <label className='block text-sm font-semibold'>Match record arrays by key columns<input className='field mt-1' placeholder='id   or   region, id' value={drafts.keys} onChange={event => editRules('keys',event.target.value)}/><span className='mt-1 block text-xs font-normal text-slate-500 dark:text-slate-400'>Blank means position. Duplicate or missing keys stop the comparison.</span></label>}
+        <div className='grid gap-4 md:grid-cols-2'><label className='text-sm font-semibold'>Ignore literal text, one value per line<textarea className='field mt-1 h-24 font-mono text-xs' value={drafts.ignoreLiterals} onChange={event => editRules('ignoreLiterals',event.target.value)}/></label><label className='text-sm font-semibold'>Additional private values, one per line<textarea className='field mt-1 h-24 font-mono text-xs' value={drafts.redactions} onChange={event => editRules('redactions',event.target.value)}/></label></div>
+        {options.mode !== 'text' && <div className='grid gap-4 md:grid-cols-2'><label className='text-sm font-semibold'>Ignore field paths<textarea className='field mt-1 h-24 font-mono text-xs' placeholder={'/generatedAt\n/*/lastSeen'} value={drafts.ignorePaths} onChange={event => editRules('ignorePaths',event.target.value)}/></label><label className='text-sm font-semibold'>Only these fields should change<textarea className='field mt-1 h-24 font-mono text-xs' placeholder={'/timeout\n/retries\n/*/email'} value={drafts.expectedPaths} onChange={event => editRules('expectedPaths',event.target.value)}/></label><p className='text-xs text-slate-500 dark:text-slate-400 md:col-span-2'>One JSON Pointer path per line. * matches one level; ** matches any depth. .env uses /KEY. Expected changes are checked against unignored fields; this does not validate program behavior.</p></div>}
+        <p className='text-xs text-slate-500 dark:text-slate-400'>Rules affect Review only. Source highlighting, merges and patches always use exact text. Up to 1 MB / 20,000 lines per side; UTF-8 and UTF-16 with a BOM. Binary and formatted Office/PDF files are unsupported.</p>
+        <button className='action action-secondary text-sm' onClick={() => { setDrafts({ keys: '',ignoreLiterals: '',redactions: '',ignorePaths: '',expectedPaths: '' }); configure({ ...DEFAULT_COMPARE,mode: options.mode }); }}>Reset comparison rules</button>
+      </div></details>
+      {result && <details className='panel my-4'><summary className='cursor-pointer text-sm font-semibold'>File details &amp; invisible characters</summary><div className='mt-4 grid gap-4 md:grid-cols-2'>{([{ label: 'Original',info: result.infoA },{ label: 'Changed',info: result.infoB }]).map(({ label,info }) => <section key={label} className='space-y-2 text-sm'><h2 className='font-bold'>{label}</h2><p>{info.lines.toLocaleString()} lines · {info.characters.toLocaleString()} UTF-16 units</p><p>LF {info.lf} · CRLF {info.crlf} · CR {info.cr} · final newline: {info.finalNewline ? 'yes' : 'no'} · BOM: {info.bom ? 'yes' : 'no'}</p>{info.unusual.length ? <ul className='list-inside list-disc text-xs'>{info.unusual.map(item => <li key={item.code}>{item.name} ({item.code}) × {item.count}; first at {item.line}:{item.column}</li>)}</ul> : <p>No listed hidden characters or common lookalikes found.</p>}</section>)}</div><p className='mt-3 text-xs text-slate-500 dark:text-slate-400'>Lookalike letters can be legitimate language characters. This list is illustrative, not a complete spoofing check.</p>{result.warnings.length > 0 && <ul className='mt-3 list-inside list-disc text-xs'>{result.warnings.map((warning,i) => <li key={i}>{warning}</li>)}</ul>}</details>}
+      {view === 'review' && result && <section className='panel space-y-4' aria-label='Review changes'>
+        <div className='flex flex-wrap items-center gap-3'><h2 className='mr-auto font-bold'>Changes to include</h2>{options.expectedPaths.length > 0 && <label className='flex items-center gap-2 text-xs'><input type='checkbox' checked={onlyUnexpected} onChange={event => setOnlyUnexpected(event.target.checked)}/>Unexpected only</label>}<button className='text-xs font-semibold text-sky-700 dark:text-sky-300' onClick={() => { setSelected(entries.map(entry => entry.id)); setReportOpen(false); }}>Select all matching</button><button className='text-xs font-semibold text-sky-700 dark:text-sky-300' onClick={() => { setSelected([]); setReportOpen(false); }}>Select none</button></div>
+        {entries.length === 0 && <p className='text-sm'>{result.ignored ? 'No changes in this view. Enable Show ignored changes to inspect excluded differences.' : 'No changed values under this comparison mode.'}</p>}
+        <div className='max-h-[36rem] space-y-3 overflow-auto'>{entries.slice(0,visibleCount).map(entry => <article key={entry.id} className='rounded-lg border border-slate-200 p-3 dark:border-slate-700'><label className='flex items-start gap-2 text-sm font-semibold'><input type='checkbox' className='mt-1' checked={selected.includes(entry.id)} onChange={event => { setSelected(previous => event.target.checked ? [...previous,entry.id] : previous.filter(id => id !== entry.id)); setReportOpen(false); }}/><span className='min-w-0 break-all'>{visibleDiffText(entry.path)} <span className='font-normal text-slate-500 dark:text-slate-400'>· {entry.kind}{entry.ignored ? ' · ignored' : ''}{entry.expected === false ? ' · unexpected' : entry.expected === true ? ' · expected' : ''}</span></span></label><div className='mt-2 grid gap-2 md:grid-cols-2'><pre className='max-h-40 overflow-auto whitespace-pre-wrap break-words rounded bg-red-50 p-2 text-xs text-red-900 dark:bg-red-950/40 dark:text-red-200'>{visibleDiffText(entry.before) || '(absent)'}</pre><pre className='max-h-40 overflow-auto whitespace-pre-wrap break-words rounded bg-emerald-50 p-2 text-xs text-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200'>{visibleDiffText(entry.after) || '(absent)'}</pre></div>{entry.reasons.length > 0 && <p className='mt-2 text-xs text-slate-500 dark:text-slate-400'>{entry.reasons.join(' · ')}</p>}</article>)}</div>
+        {entries.length > visibleCount && <button className='action action-secondary text-xs' onClick={() => setVisibleCount(count => count + 100)}>Show 100 more ({visibleCount} of {entries.length} shown)</button>}<p className='text-xs text-slate-500 dark:text-slate-400'>Detected private values are masked. Identical values share an alias; changed values get different aliases. Detection is best-effort: review paths, keys, free text and context before exporting.</p>
+        <div className='flex flex-wrap items-center gap-3'>{options.mode === 'text' && <label className='flex items-center gap-2 text-xs'><input type='checkbox' checked={includeContext} onChange={event => { setIncludeContext(event.target.checked); setReportOpen(false); }}/>Include nearby context</label>}{includeContext && options.mode === 'text' && <label className='flex items-center gap-2 text-xs'>Lines<select className='rounded border p-1' aria-label='Report context lines' value={options.context} onChange={event => configure({ context: Number(event.target.value) })}>{[1,2,3,5].map(value => <option key={value}>{value}</option>)}</select></label>}<button className='action text-sm' disabled={!result || !selected.length} onClick={() => setReportOpen(true)}>Preview report ({selected.length})</button></div>
+        {reportOpen && report && <section className='space-y-3 rounded-xl border border-slate-200 p-4 dark:border-slate-700'><h3 className='font-semibold'>Exact outgoing text</h3><textarea aria-label='Redacted report preview' readOnly className='field h-72 font-mono text-xs' value={report.text}/><p className='text-xs text-slate-500 dark:text-slate-400'>HTML contains these selected changes and comparison rules. Original filenames, full sources and alias mappings are excluded. No hosting or public link is created.</p><div className='flex flex-wrap gap-3'><button className='action' onClick={() => downloadLocal(report.html,'reviewed-diff.html','text/html;charset=utf-8')}>Download HTML report</button><button className='action action-secondary' onClick={() => downloadLocal(report.text,'reviewed-diff.txt')}>Download text report</button><button className='action action-secondary' onClick={async () => { try { await navigator.clipboard.writeText(report.text); setMessage('Report copied.'); } catch { setMessage('Could not copy. Select the preview text to copy it manually.'); } }}>Copy report</button></div></section>}
+      </section>}
+      <details className='panel my-4'><summary className='cursor-pointer text-sm font-semibold'>Download source / patch</summary><div className='mt-4 space-y-3'><p className='text-sm'>These downloads contain original, unmasked values and all current edits. Comparison rules are not applied. Source encoding and existing line-ending characters are retained; new typed lines use LF.</p><div className='flex flex-wrap gap-3'>{(['a','b'] as const).map(side => <button key={side} className='action action-secondary text-sm' onClick={() => { try { const text = side === 'a' ? left : right; checkDiffInput(text); const bytes = encodeDiffFile(text,encodings[side]); downloadLocal(new Blob([bytes as BlobPart]),side === 'a' ? 'original.txt' : 'changed.txt','application/octet-stream'); } catch (err) { setMessage((err as Error).message); } }}>Download {side === 'a' ? 'original' : 'changed'}</button>)}<button className='action action-secondary text-sm' disabled={patchBusy} onClick={patch}>{patchBusy ? 'Creating patch…' : 'Download exact .diff'}</button></div></div></details>
+    </main><Footer/>
+  </div>;
 }
diff --git a/src/app/text-privacy-cleaner/page.tsx b/src/app/text-privacy-cleaner/page.tsx
index 314bceb..5efb871 100644
--- a/src/app/text-privacy-cleaner/page.tsx
+++ b/src/app/text-privacy-cleaner/page.tsx
@@ -3,4 +3,4 @@ import { useMemo, useState } from 'react';
 import LocalToolLayout from '@/components/LocalToolLayout';
 const HIDDEN=/[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F\u200B-\u200F\u202A-\u202E\u2060\u2066-\u2069\uFEFF]/g;
 const names:Record<number,string>={0x200b:'ZERO WIDTH SPACE',0x200c:'ZERO WIDTH NON-JOINER',0x200d:'ZERO WIDTH JOINER',0x200e:'LEFT-TO-RIGHT MARK',0x200f:'RIGHT-TO-LEFT MARK',0xfeff:'ZERO WIDTH NO-BREAK SPACE/BOM'};
-export default function TextPrivacyCleanerPage(){const [text,setText]=useState('Paste text here\u200B to reveal hidden characters.');const findings=useMemo(()=>[...text.matchAll(HIDDEN)].map(m=>({index:m.index??0,char:m[0],code:m[0].codePointAt(0)!})),[text]);const cleaned=text.replace(HIDDEN,'').normalize('NFC');return <LocalToolLayout title='Text Privacy Cleaner' description='Reveal and remove zero-width, bidi and control characters that may be invisible in normal text.'><section className='mx-auto max-w-5xl rounded-xl bg-white p-6 shadow'><div className='grid gap-4 md:grid-cols-2'><textarea value={text} onChange={e=>setText(e.target.value)} className='h-64 rounded border p-3'/><textarea readOnly value={cleaned} className='h-64 rounded border bg-slate-50 p-3'/></div><div className='mt-4 flex gap-2'><button onClick={()=>navigator.clipboard.writeText(cleaned)} className='rounded bg-slate-800 px-4 py-2 text-white'>Copy cleaned text</button><button onClick={()=>setText(cleaned)} className='rounded bg-sky-600 px-4 py-2 text-white'>Replace input</button></div><h2 className='mt-6 font-semibold'>Hidden/control characters found: {findings.length}</h2>{findings.length>0&&<div className='mt-2 max-h-56 overflow-auto rounded bg-slate-50 p-3 font-mono text-sm'>{findings.map((f,i)=><div key={`${f.index}-${i}`}>index {f.index}: U+{f.code.toString(16).toUpperCase().padStart(4,'0')} {names[f.code]||'CONTROL / FORMAT CHARACTER'}</div>)}</div>}</section></LocalToolLayout>}
+export default function TextPrivacyCleanerPage(){const [text,setText]=useState('Paste text here\u200B to reveal hidden characters.');const findings=useMemo(()=>[...text.matchAll(HIDDEN)].map(m=>({index:m.index??0,char:m[0],code:m[0].codePointAt(0)!})),[text]);const cleaned=text.replace(HIDDEN,'').normalize('NFC');return <LocalToolLayout title='Text Privacy Cleaner' description='Reveal and remove zero-width, bidi and control characters that may be invisible in normal text.'><section className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'><div className='grid gap-4 md:grid-cols-2'><textarea value={text} onChange={e=>setText(e.target.value)} className='h-64 rounded border p-3'/><textarea readOnly value={cleaned} className='h-64 rounded border bg-slate-50 dark:bg-slate-950 p-3'/></div><div className='mt-4 flex gap-2'><button onClick={()=>navigator.clipboard.writeText(cleaned)} className='rounded bg-slate-800 px-4 py-2 text-white'>Copy cleaned text</button><button onClick={()=>setText(cleaned)} className='rounded bg-sky-600 px-4 py-2 text-white'>Replace input</button></div><h2 className='mt-6 font-semibold'>Hidden/control characters found: {findings.length}</h2>{findings.length>0&&<div className='mt-2 max-h-56 overflow-auto rounded bg-slate-50 dark:bg-slate-950 p-3 font-mono text-sm'>{findings.map((f,i)=><div key={`${f.index}-${i}`}>index {f.index}: U+{f.code.toString(16).toUpperCase().padStart(4,'0')} {names[f.code]||'CONTROL / FORMAT CHARACTER'}</div>)}</div>}</section></LocalToolLayout>}
diff --git a/src/app/timestamp-tool/page.tsx b/src/app/timestamp-tool/page.tsx
index a5afe54..46f9fcd 100644
--- a/src/app/timestamp-tool/page.tsx
+++ b/src/app/timestamp-tool/page.tsx
@@ -17,9 +17,9 @@ export default function TimestampToolPage() {
   const useCurrentTime = () => setValue(String(Math.floor(Date.now() / 1000)));
 
   return <LocalToolLayout title='Timestamp & Date Toolkit' description='Convert Unix timestamps and date strings between local time, UTC and ISO 8601.'>
-    <section className='mx-auto max-w-3xl rounded-xl bg-white p-6 shadow'>
+    <section className='mx-auto max-w-3xl rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
       <div className='flex gap-2'><input value={value} onChange={e => setValue(e.target.value)} className='min-w-0 flex-1 rounded border p-3 font-mono' placeholder='Unix timestamp or date string'/><button onClick={useCurrentTime} className='rounded bg-sky-600 px-4 text-white'>Now</button></div>
-      {!value.trim() ? <p className='mt-4 text-sm text-slate-500'>Enter a Unix timestamp or date, or choose Now.</p> : parsed ? <dl className='mt-6 grid gap-3 sm:grid-cols-[10rem_1fr]'><dt className='font-semibold'>Unix seconds</dt><dd className='font-mono'>{Math.floor(parsed.getTime() / 1000)}</dd><dt className='font-semibold'>Unix milliseconds</dt><dd className='font-mono'>{parsed.getTime()}</dd><dt className='font-semibold'>ISO 8601 / UTC</dt><dd className='font-mono'>{parsed.toISOString()}</dd><dt className='font-semibold'>Local time</dt><dd>{parsed.toLocaleString()}</dd><dt className='font-semibold'>UTC display</dt><dd>{parsed.toUTCString()}</dd></dl> : <p className='mt-4 text-red-600'>Could not parse that value.</p>}
+      {!value.trim() ? <p className='mt-4 text-sm text-slate-500 dark:text-slate-400'>Enter a Unix timestamp or date, or choose Now.</p> : parsed ? <dl className='mt-6 grid gap-3 sm:grid-cols-[10rem_1fr]'><dt className='font-semibold'>Unix seconds</dt><dd className='font-mono'>{Math.floor(parsed.getTime() / 1000)}</dd><dt className='font-semibold'>Unix milliseconds</dt><dd className='font-mono'>{parsed.getTime()}</dd><dt className='font-semibold'>ISO 8601 / UTC</dt><dd className='font-mono'>{parsed.toISOString()}</dd><dt className='font-semibold'>Local time</dt><dd>{parsed.toLocaleString()}</dd><dt className='font-semibold'>UTC display</dt><dd>{parsed.toUTCString()}</dd></dl> : <p className='mt-4 text-red-600 dark:text-red-400'>Could not parse that value.</p>}
     </section>
   </LocalToolLayout>;
 }
diff --git a/src/app/unit-converter/page.tsx b/src/app/unit-converter/page.tsx
index 1d3b4d7..8e7ea07 100644
--- a/src/app/unit-converter/page.tsx
+++ b/src/app/unit-converter/page.tsx
@@ -102,7 +102,7 @@ export default function UnitConverterPage() {
       title='Unit Converter'
       description='Convert common units locally, with separate decimal SI and binary IEC storage units.'
     >
-      <section className='mx-auto max-w-xl rounded-xl bg-white p-6 shadow'>
+      <section className='mx-auto max-w-xl rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
         <label className='font-semibold'>
           Category
           <select
@@ -137,7 +137,7 @@ export default function UnitConverterPage() {
               setTo(from);
               setInput(output);
             }}
-            className='rounded bg-slate-100 p-2'
+            className='rounded bg-slate-100 dark:bg-slate-800 p-2'
             aria-label='Swap units'
           >
             ⇄
@@ -170,7 +170,7 @@ export default function UnitConverterPage() {
           <input
             readOnly
             value={output}
-            className='mt-1 w-full rounded border bg-slate-50 p-3 font-mono'
+            className='mt-1 w-full rounded border bg-slate-50 dark:bg-slate-950 p-3 font-mono'
           />
         </label>
       </section>
diff --git a/src/app/url-cleaner/page.tsx b/src/app/url-cleaner/page.tsx
index bfbbfe0..00dc9e5 100644
--- a/src/app/url-cleaner/page.tsx
+++ b/src/app/url-cleaner/page.tsx
@@ -65,7 +65,7 @@ export default function UrlCleanerPage() {
       title='Tracking URL Cleaner'
       description='Strip common analytics and advertising parameters without sending the URL anywhere.'
     >
-      <section className='mx-auto max-w-4xl rounded-xl bg-white p-6 shadow'>
+      <section className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'>
         <label className='font-semibold'>URL</label>
         <textarea
           value={input}
@@ -74,7 +74,7 @@ export default function UrlCleanerPage() {
         />
 
         {data.error ? (
-          <p className='mt-3 text-red-600'>Invalid URL</p>
+          <p className='mt-3 text-red-600 dark:text-red-400'>Invalid URL</p>
         ) : (
           <>
             <label className='mt-5 block font-semibold'>Clean URL</label>
@@ -92,14 +92,14 @@ export default function UrlCleanerPage() {
               </button>
             </div>
 
-            <p className='mt-3 text-sm text-slate-600'>
+            <p className='mt-3 text-sm text-slate-600 dark:text-slate-300'>
               {data.removed.length
                 ? `Removed: ${data.removed.join(', ')}`
                 : 'No known tracking parameters found.'}
             </p>
 
             {data.parts && (
-              <dl className='mt-6 grid gap-2 rounded bg-slate-50 p-4 text-sm sm:grid-cols-[8rem_1fr]'>
+              <dl className='mt-6 grid gap-2 rounded bg-slate-50 dark:bg-slate-950 p-4 text-sm sm:grid-cols-[8rem_1fr]'>
                 {Object.entries(data.parts).map(([key, value]) => (
                   <Fragment key={key}>
                     <dt className='font-semibold capitalize'>{key}</dt>
diff --git a/src/app/uuid-generator/page.tsx b/src/app/uuid-generator/page.tsx
index 98ced34..77d7462 100644
--- a/src/app/uuid-generator/page.tsx
+++ b/src/app/uuid-generator/page.tsx
@@ -4,4 +4,4 @@ import LocalToolLayout from '@/components/LocalToolLayout';
 const UUID_RE=/^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
 const CROCKFORD='0123456789ABCDEFGHJKMNPQRSTVWXYZ';
 function ulid(){const time=Date.now();let t=time,out='';for(let i=0;i<10;i++){out=CROCKFORD[t%32]+out;t=Math.floor(t/32)}const bytes=new Uint8Array(16);crypto.getRandomValues(bytes);for(let i=0;i<16;i++)out+=CROCKFORD[bytes[i]%32];return out}
-export default function UuidGeneratorPage(){const [count,setCount]=useState(5);const [kind,setKind]=useState<'uuid'|'ulid'>('uuid');const [nonce,setNonce]=useState(0);const [check,setCheck]=useState('');const values=useMemo(()=>{void nonce;return Array.from({length:count},()=>kind==='uuid'?crypto.randomUUID():ulid())},[count,kind,nonce]);return <LocalToolLayout title='UUID / ULID Generator' description='Generate identifiers locally with browser cryptographic randomness.'><section className='mx-auto max-w-3xl rounded-xl bg-white p-6 shadow'><div className='flex flex-wrap gap-3'><select value={kind} onChange={e=>setKind(e.target.value as 'uuid'|'ulid')} className='rounded border p-2'><option value='uuid'>UUID v4</option><option value='ulid'>ULID</option></select><input type='number' min='1' max='100' value={count} onChange={e=>setCount(Math.max(1,Math.min(100,+e.target.value||1)))} className='w-24 rounded border p-2'/><button onClick={()=>setNonce(n=>n+1)} className='rounded bg-sky-600 px-4 text-white'>Generate</button><button onClick={()=>navigator.clipboard.writeText(values.join('\n'))} className='rounded bg-slate-800 px-4 text-white'>Copy all</button></div><pre className='mt-4 max-h-96 overflow-auto rounded bg-slate-50 p-4'>{values.join('\n')}</pre><div className='mt-6 border-t pt-5'><label className='font-semibold'>Validate a UUID</label><input value={check} onChange={e=>setCheck(e.target.value)} className='mt-2 w-full rounded border p-2 font-mono'/>{check&&<p className={`mt-2 ${UUID_RE.test(check.trim())?'text-green-700':'text-red-700'}`}>{UUID_RE.test(check.trim())?'Looks like a valid UUID.':'Not a valid standard UUID string.'}</p>}</div></section></LocalToolLayout>}
+export default function UuidGeneratorPage(){const [count,setCount]=useState(5);const [kind,setKind]=useState<'uuid'|'ulid'>('uuid');const [nonce,setNonce]=useState(0);const [check,setCheck]=useState('');const values=useMemo(()=>{void nonce;return Array.from({length:count},()=>kind==='uuid'?crypto.randomUUID():ulid())},[count,kind,nonce]);return <LocalToolLayout title='UUID / ULID Generator' description='Generate identifiers locally with browser cryptographic randomness.'><section className='mx-auto max-w-3xl rounded-xl bg-white dark:bg-slate-900 p-6 shadow'><div className='flex flex-wrap gap-3'><select value={kind} onChange={e=>setKind(e.target.value as 'uuid'|'ulid')} className='rounded border p-2'><option value='uuid'>UUID v4</option><option value='ulid'>ULID</option></select><input type='number' min='1' max='100' value={count} onChange={e=>setCount(Math.max(1,Math.min(100,+e.target.value||1)))} className='w-24 rounded border p-2'/><button onClick={()=>setNonce(n=>n+1)} className='rounded bg-sky-600 px-4 text-white'>Generate</button><button onClick={()=>navigator.clipboard.writeText(values.join('\n'))} className='rounded bg-slate-800 px-4 text-white'>Copy all</button></div><pre className='mt-4 max-h-96 overflow-auto rounded bg-slate-50 dark:bg-slate-950 p-4'>{values.join('\n')}</pre><div className='mt-6 border-t pt-5'><label className='font-semibold'>Validate a UUID</label><input value={check} onChange={e=>setCheck(e.target.value)} className='mt-2 w-full rounded border p-2 font-mono'/>{check&&<p className={`mt-2 ${UUID_RE.test(check.trim())?'text-green-700 dark:text-green-300':'text-red-700 dark:text-red-300'}`}>{UUID_RE.test(check.trim())?'Looks like a valid UUID.':'Not a valid standard UUID string.'}</p>}</div></section></LocalToolLayout>}
diff --git a/src/app/xml-toolbox/page.tsx b/src/app/xml-toolbox/page.tsx
index cc1ded4..a61d5a5 100644
--- a/src/app/xml-toolbox/page.tsx
+++ b/src/app/xml-toolbox/page.tsx
@@ -28,5 +28,5 @@ function elementValue(element: Element): unknown {
 export default function XmlToolboxPage() {
   const [input, setInput] = useState('<root><item id="1">ToolStack</item><item id="2">Local</item></root>'); const [mode, setMode] = useState<Mode>('format');
   const result = useMemo(() => { try { const document = parseXml(input); const serialized = new XMLSerializer().serializeToString(document); const output = mode === 'format' ? formatXml(serialized) : mode === 'minify' ? serialized.replace(/>\s+</g, '><') : JSON.stringify({ [document.documentElement.tagName]: elementValue(document.documentElement) }, null, 2); return { output, error: '' }; } catch (err) { return { output: '', error: (err as Error).message }; } }, [input, mode]);
-  return <LocalToolLayout title='XML Toolbox' description='Validate, format, minify and convert XML to JSON locally. External entity declarations are blocked.'><section className='mx-auto max-w-6xl rounded-xl bg-white p-6 shadow'><div className='mb-4 flex flex-wrap gap-2'>{(['format','minify','json'] as Mode[]).map(value => <button key={value} onClick={() => setMode(value)} className={`rounded px-4 py-2 ${mode === value ? 'bg-sky-600 text-white' : 'bg-slate-100 text-slate-700'}`}>{value === 'json' ? 'XML to JSON' : value[0].toUpperCase() + value.slice(1)}</button>)}</div><div className='grid gap-4 md:grid-cols-2'><textarea value={input} onChange={event => setInput(event.target.value)} aria-label='XML input' className='h-96 rounded border p-4 font-mono'/><pre className='h-96 overflow-auto whitespace-pre-wrap rounded border bg-slate-50 p-4 font-mono text-sm'>{result.error ? `Error: ${result.error}` : result.output}</pre></div>{!result.error && <button onClick={() => navigator.clipboard.writeText(result.output)} className='mt-4 rounded bg-slate-800 px-4 py-2 text-white'>Copy result</button>}</section></LocalToolLayout>;
+  return <LocalToolLayout title='XML Toolbox' description='Validate, format, minify and convert XML to JSON locally. External entity declarations are blocked.'><section className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'><div className='mb-4 flex flex-wrap gap-2'>{(['format','minify','json'] as Mode[]).map(value => <button key={value} onClick={() => setMode(value)} className={`rounded px-4 py-2 ${mode === value ? 'bg-sky-600 text-white' : 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200'}`}>{value === 'json' ? 'XML to JSON' : value[0].toUpperCase() + value.slice(1)}</button>)}</div><div className='grid gap-4 md:grid-cols-2'><textarea value={input} onChange={event => setInput(event.target.value)} aria-label='XML input' className='h-96 rounded border p-4 font-mono'/><pre className='h-96 overflow-auto whitespace-pre-wrap rounded border bg-slate-50 dark:bg-slate-950 p-4 font-mono text-sm'>{result.error ? `Error: ${result.error}` : result.output}</pre></div>{!result.error && <button onClick={() => navigator.clipboard.writeText(result.output)} className='mt-4 rounded bg-slate-800 px-4 py-2 text-white'>Copy result</button>}</section></LocalToolLayout>;
 }
diff --git a/src/app/yaml-json/page.tsx b/src/app/yaml-json/page.tsx
index 3bc83dc..6c3d7c2 100644
--- a/src/app/yaml-json/page.tsx
+++ b/src/app/yaml-json/page.tsx
@@ -8,5 +8,5 @@ export default function YamlJsonPage() {
   const [mode, setMode] = useState<Mode>('yaml-to-json'); const [input, setInput] = useState('name: ToolStack\nprivacy: true\ntools:\n  - PDF Toolkit\n  - File Hash\n');
   const result = useMemo(() => { try { const output = mode === 'yaml-to-json' ? JSON.stringify(YAML.parse(input), null, 2) : YAML.stringify(JSON.parse(input)); return { output, error: '' }; } catch (err) { return { output: '', error: (err as Error).message }; } }, [input, mode]);
   const switchMode = (next: Mode) => { setMode(next); setInput(next === 'yaml-to-json' ? 'name: ToolStack\nprivacy: true\n' : '{\n  "name": "ToolStack",\n  "privacy": true\n}'); };
-  return <LocalToolLayout title='YAML ↔ JSON Converter' description='Convert YAML and JSON locally using a bundled parser. No document content is transmitted.'><section className='mx-auto max-w-6xl rounded-xl bg-white p-6 shadow'><div className='mb-4 flex gap-2'><button onClick={() => switchMode('yaml-to-json')} className={`rounded px-4 py-2 ${mode === 'yaml-to-json' ? 'bg-sky-600 text-white' : 'bg-slate-100'}`}>YAML → JSON</button><button onClick={() => switchMode('json-to-yaml')} className={`rounded px-4 py-2 ${mode === 'json-to-yaml' ? 'bg-sky-600 text-white' : 'bg-slate-100'}`}>JSON → YAML</button></div><div className='grid gap-4 md:grid-cols-2'><textarea value={input} onChange={event => setInput(event.target.value)} className='h-96 rounded border p-4 font-mono'/><pre className='h-96 overflow-auto whitespace-pre-wrap rounded border bg-slate-50 p-4 font-mono text-sm'>{result.error ? `Error: ${result.error}` : result.output}</pre></div>{!result.error && <button onClick={() => navigator.clipboard.writeText(result.output)} className='mt-4 rounded bg-slate-800 px-4 py-2 text-white'>Copy result</button>}</section></LocalToolLayout>;
+  return <LocalToolLayout title='YAML ↔ JSON Converter' description='Convert YAML and JSON locally using a bundled parser. No document content is transmitted.'><section className='mx-auto w-full min-w-0 rounded-xl bg-white dark:bg-slate-900 p-6 shadow'><div className='mb-4 flex gap-2'><button onClick={() => switchMode('yaml-to-json')} className={`rounded px-4 py-2 ${mode === 'yaml-to-json' ? 'bg-sky-600 text-white' : 'bg-slate-100 dark:bg-slate-800'}`}>YAML → JSON</button><button onClick={() => switchMode('json-to-yaml')} className={`rounded px-4 py-2 ${mode === 'json-to-yaml' ? 'bg-sky-600 text-white' : 'bg-slate-100 dark:bg-slate-800'}`}>JSON → YAML</button></div><div className='grid gap-4 md:grid-cols-2'><textarea value={input} onChange={event => setInput(event.target.value)} className='h-96 rounded border p-4 font-mono'/><pre className='h-96 overflow-auto whitespace-pre-wrap rounded border bg-slate-50 dark:bg-slate-950 p-4 font-mono text-sm'>{result.error ? `Error: ${result.error}` : result.output}</pre></div>{!result.error && <button onClick={() => navigator.clipboard.writeText(result.output)} className='mt-4 rounded bg-slate-800 px-4 py-2 text-white'>Copy result</button>}</section></LocalToolLayout>;
 }
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index bb36c91..462ce78 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -5,5 +5,5 @@ import { TOOL_BY_SLUG } from '@/config/tools';
 const SPECIAL = new Map([['/license','MIT License'],['/offline','Offline']]);
 export default function Breadcrumbs() {
   const pathname = usePathname(); if (pathname === '/') return null; const registered = TOOL_BY_SLUG.get(pathname); const fallback = pathname.replace(/^\//,'').split('/').pop()?.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ') || 'Page'; const pageName = registered?.name ?? SPECIAL.get(pathname) ?? fallback;
-  return <nav aria-label='Breadcrumb' className='container mx-auto px-4 pb-2 pt-6'><ol className='flex items-center gap-2 text-sm text-slate-500'><li><Link href='/' className='hover:text-sky-700 hover:underline'>Home</Link></li><li aria-hidden='true'>/</li><li><span className='font-medium text-slate-700'>{pageName}</span></li></ol></nav>;
+  return <nav aria-label='Breadcrumb' className='page-shell px-4 pb-2 pt-6'><ol className='flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400'><li><Link href='/' className='hover:text-sky-700 dark:hover:text-sky-300 hover:underline'>Home</Link></li><li aria-hidden='true'>/</li><li><span className='font-medium text-slate-700 dark:text-slate-200'>{pageName}</span></li></ol></nav>;
 }
diff --git a/src/components/CurlConverter.tsx b/src/components/CurlConverter.tsx
new file mode 100644
index 0000000..18897a6
--- /dev/null
+++ b/src/components/CurlConverter.tsx
@@ -0,0 +1,22 @@
+'use client';
+import { useState } from 'react';
+import { curlToFetch } from '@/lib/curl-converter';
+import { downloadLocal } from '@/lib/local-files';
+
+const SAMPLE = ["curl 'https://api.example.invalid/orders?customer=42'", "  -H 'Authorization: Bearer example-token'", `  --json '{"customer_id":42,"email":"test@example.invalid"}'`].join(' \\\n');
+export default function CurlConverter() {
+  const [input, setInput] = useState(''); const [redact, setRedact] = useState(true);
+  const [result, setResult] = useState<ReturnType<typeof curlToFetch> | null>(null); const [message, setMessage] = useState('');
+  const reset = () => { setResult(null); setMessage(''); };
+  return <section className='panel space-y-4'>
+    <label className='block text-sm font-semibold'>cURL command<textarea className='field mt-2 h-48 font-mono text-sm' value={input} onChange={event => { reset(); setInput(event.target.value); }} placeholder="curl 'https://api.example.invalid/data'"/></label>
+    <div className='flex flex-wrap items-center gap-3'><button className='action action-secondary' onClick={() => { reset(); setInput(SAMPLE); }}>Load example</button><button className='action action-secondary' onClick={() => { reset(); setInput(''); }}>Clear</button><label className='flex items-center gap-2 text-sm'><input type='checkbox' checked={redact} onChange={event => { reset(); setRedact(event.target.checked); }}/>Redact values for sharing</label></div>
+    <p className='text-sm text-slate-500 dark:text-slate-400'>Converts POSIX / Bash cURL text only. No request is sent.</p>
+    <button className='action' disabled={!input.trim()} onClick={() => { reset(); try { setResult(curlToFetch(input,redact)); } catch (err) { setMessage((err as Error).message); } }}>Convert to JavaScript</button>
+    {message && <p role='status' className='note'>{message}</p>}
+    {result && <><label className='block text-sm font-semibold'>{redact ? 'Shareable JavaScript' : 'JavaScript with original values'}<textarea aria-label='Converted JavaScript' readOnly className='field mt-2 h-80 font-mono text-xs' value={result.code}/></label><div className='flex flex-wrap gap-3'><button className='action' onClick={async () => { try { await navigator.clipboard.writeText(result.code); setMessage('Copied.'); } catch { setMessage('Could not copy. Select the generated text to copy it manually.'); } }}>Copy JavaScript</button><button className='action action-secondary' onClick={() => downloadLocal(result.code,redact ? 'request-redacted.js' : 'request.js','text/javascript;charset=utf-8')}>Download .js</button></div>
+      {result.warnings.length > 0 && <ul className='note list-inside list-disc'>{result.warnings.map((warning,i) => <li key={i}>{warning}</li>)}</ul>}
+      <p className='text-sm text-slate-500 dark:text-slate-400'>{redact ? 'Query values, JSON body values and most header values are replaced. URL paths and field names remain; review them before sharing.' : 'The output contains original request values, including supported authorization headers.'} Browser cookies are not transferred. File references, shell expressions and unsupported options stop conversion.</p>
+    </>}
+  </section>;
+}
diff --git a/src/components/DatasetMasker.tsx b/src/components/DatasetMasker.tsx
new file mode 100644
index 0000000..928128f
--- /dev/null
+++ b/src/components/DatasetMasker.tsx
@@ -0,0 +1,21 @@
+'use client';
+import { useState } from 'react';
+import { checkFileBatch, downloadLocal } from '@/lib/local-files';
+import { maskDatasets, parseDataset, type ColumnRule, type Dataset, type DatasetResult } from '@/lib/dataset-mask';
+
+const MODE_LABELS: Record<ColumnRule['mode'], string> = { keep: 'Keep original', remove: 'Remove column', mask: 'Replace with [REDACTED]', alias: 'Consistent alias', date: 'Shift ISO dates', band: 'Group numbers in bands of 10' };
+const suggest = (column: string): ColumnRule => ({ mode: /(?:name|email|phone|address|password|token|secret)/i.test(column) ? 'mask' : /(?:^id$|[_-]id$)/i.test(column) ? 'alias' : 'keep', group: column });
+
+export default function DatasetMasker() {
+  const [datasets, setDatasets] = useState<Dataset[]>([]); const [rules, setRules] = useState<Record<string, ColumnRule>>({}); const [days, setDays] = useState(30);
+  const [results, setResults] = useState<DatasetResult[]>([]); const [selected, setSelected] = useState(0); const [error, setError] = useState(''); const [busy, setBusy] = useState(false); const [inputKey, setInputKey] = useState(0);
+  const invalidate = () => { setResults([]); setSelected(0); setError(''); };
+  const load = (items: Dataset[]) => { const columns = [...new Set(items.flatMap(item => item.columns))]; setDatasets(items); setRules(Object.fromEntries(columns.map(column => [column, suggest(column)]))); };
+  const update = (column: string, change: Partial<ColumnRule>) => { invalidate(); setRules(old => ({ ...old, [column]: { ...old[column], ...change } })); };
+  return <fieldset disabled={busy} className='min-w-0 space-y-5' aria-label='Dataset workspace'>
+    <section className='panel space-y-4'><h2 className='text-lg font-bold'>1. Open datasets</h2><label className='block text-sm font-semibold'>CSV files or JSON arrays<input key={inputKey} type='file' multiple accept='.csv,.json' className='field mt-2' disabled={busy} onChange={async event => { invalidate(); setDatasets([]); setRules({}); const files = Array.from(event.target.files ?? []); try { checkFileBatch(files); setBusy(true); load(await Promise.all(files.map(async file => parseDataset(file.name, await file.text())))); } catch (err) { setError((err as Error).message); } finally { setBusy(false); } }}/></label><p className='text-xs text-slate-500 dark:text-slate-400'>Up to 10 files, 5 MB per file, 20 MB total. Maximum 50,000 rows per file / 100,000 across the batch.</p><div className='flex flex-wrap gap-3'><button disabled={busy} className='action action-secondary' onClick={() => { invalidate(); load([parseDataset('customers.csv', 'customer_id,email,age,joined\nC001,alex@example.com,34,2025-01-01\nC002,sam@example.com,28,2025-02-01'), parseDataset('orders.csv', 'customer_id,order_id,total\nC001,O101,42\nC002,O102,75\nC001,O103,12')]); setInputKey(key => key + 1); }}>Load linked example datasets</button><button disabled={busy} className='action action-secondary' onClick={() => { invalidate(); setDatasets([]); setRules({}); setInputKey(key => key + 1); }}>Clear datasets</button></div>{datasets.map((dataset, i) => <p className='text-sm' key={i}>{dataset.name} · {dataset.rows.length} rows · {dataset.columns.length} columns</p>)}</section>
+    {datasets.length > 0 && <section className='panel space-y-4'><h2 className='text-lg font-bold'>2. Choose what each column reveals</h2><p className='text-sm text-slate-600 dark:text-slate-300'>Review every column. Suggestions use column names only. Use the same alias group for matching identifiers in different columns or files.</p><div className='overflow-x-auto'><table className='w-full text-left text-sm'><thead><tr className='border-b'><th className='p-2'>Column</th><th className='p-2'>Action</th><th className='p-2'>Alias group</th></tr></thead><tbody>{Object.entries(rules).map(([column, rule]) => <tr className='border-b' key={column}><th className='break-all p-2 font-mono font-medium'>{column}</th><td className='p-2'><select aria-label={`Action for ${column}`} className='field min-w-48' value={rule.mode} onChange={event => update(column, { mode: event.target.value as ColumnRule['mode'] })}>{Object.entries(MODE_LABELS).map(([value, label]) => <option value={value} key={value}>{label}</option>)}</select></td><td className='p-2'>{rule.mode === 'alias' ? <input aria-label={`Alias group for ${column}`} className='field min-w-36' value={rule.group} onChange={event => update(column, { group: event.target.value })}/> : <span className='text-slate-500 dark:text-slate-400'>—</span>}</td></tr>)}</tbody></table></div><label className='block text-sm font-semibold'>Date shift in days (applies only to columns set to Shift ISO dates)<input type='number' min={-36500} max={36500} value={days} className='field mt-2 max-w-48' onChange={event => { invalidate(); setDays(Number(event.target.value)); }}/></label><p className='note'>Aliases are new text labels, including for numeric IDs. Rows, blank values and retained values stay in place. Aliases preserve equality within each group; dates shift by the same number of days. This is pseudonymization, not guaranteed anonymity. Kept columns and rare combinations can still identify people. CSV downloads prefix formula-like values for spreadsheet safety.</p><button className='action' onClick={() => { invalidate(); try { setResults(maskDatasets(datasets, rules, days)); } catch (err) { setError((err as Error).message); } }}>Create masked datasets</button></section>}
+    {error && <p role='alert' className='note text-red-700 dark:text-red-300'>{error}</p>}
+    {results.length > 0 && <section className='panel space-y-4'><h2 className='text-lg font-bold'>3. Review & download</h2><p role='status' className='text-sm text-emerald-700 dark:text-emerald-300'>Row counts retained. Repeated values in the same alias group use the same label across this batch. Downloads use generic filenames; alias mappings are not exported.</p><label className='block text-sm font-semibold'>Output file<select className='field mt-2' value={selected} onChange={event => setSelected(Number(event.target.value))}>{results.map((result, i) => <option key={i} value={i}>{result.name} · {result.rows} rows · {result.columns} columns</option>)}</select></label><textarea aria-label='Masked dataset preview' readOnly className='field h-72 font-mono text-xs' value={results[selected]?.text ?? ''}/><div className='flex flex-wrap gap-3'><button className='action' disabled={busy} onClick={async () => { setBusy(true); try { const { default: JSZip } = await import('jszip'); const zip = new JSZip(); results.forEach(result => zip.file(result.name, result.text)); downloadLocal(await zip.generateAsync({ type: 'blob' }), 'masked-datasets.zip', 'application/zip'); } catch { setError('Could not create the ZIP. Download each file individually.'); } finally { setBusy(false); } }}>Download all as ZIP</button><button className='action action-secondary' onClick={() => { const result = results[selected]; if (result) downloadLocal(result.text, result.name); }}>Download this file</button></div></section>}
+  </fieldset>;
+}
diff --git a/src/components/DiffEditors.tsx b/src/components/DiffEditors.tsx
new file mode 100644
index 0000000..0b3ed86
--- /dev/null
+++ b/src/components/DiffEditors.tsx
@@ -0,0 +1,52 @@
+'use client';
+import { forwardRef,useEffect,useImperativeHandle,useRef } from 'react';
+import { EditorState,Compartment } from '@codemirror/state';
+import { EditorView,keymap,lineNumbers,highlightSpecialChars,drawSelection,highlightActiveLine,highlightWhitespace } from '@codemirror/view';
+import { defaultKeymap,history,historyKeymap,undo,redo } from '@codemirror/commands';
+import { searchKeymap,highlightSelectionMatches } from '@codemirror/search';
+import { syntaxHighlighting,HighlightStyle } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { MergeView,goToNextChunk,goToPreviousChunk } from '@codemirror/merge';
+import { checkDiffInput,type CompareMode } from '@/lib/file-diff-types';
+
+export type DiffEditorHandle = { next: (side?: 'a' | 'b') => void; previous: (side?: 'a' | 'b') => void; undo: (side: 'a' | 'b') => void; redo: (side: 'a' | 'b') => void };
+type Props = { left: string; right: string; onChange?: (side: 'a' | 'b',value: string) => void; onError: (message: string) => void; readonly?: boolean; wrap: boolean; collapse: boolean; whitespace: boolean; sync: boolean; direction: 'a-to-b' | 'b-to-a'; mode: CompareMode; syntax?: 'plain' | 'javascript' | 'json'; onStatus?: (count: number,precise: boolean) => void };
+const DIFF_HIGHLIGHT = HighlightStyle.define([{ tag: tags.keyword,class: 'diff-code-keyword' },{ tag: [tags.string,tags.regexp],class: 'diff-code-string' },{ tag: [tags.number,tags.bool,tags.null],class: 'diff-code-number' },{ tag: tags.comment,class: 'diff-code-comment' },{ tag: tags.propertyName,class: 'diff-code-property' }]);
+const DiffEditors = forwardRef<DiffEditorHandle,Props>(function DiffEditors(props,ref) {
+  const { left,right,readonly: readOnly,wrap,collapse,whitespace,direction,mode,syntax = 'plain',onStatus } = props;
+  const host = useRef<HTMLDivElement>(null); const instance = useRef<MergeView | null>(null); const current = useRef(props); const updating = useRef(false);
+  const compartments = useRef([new Compartment(),new Compartment()]);
+  useEffect(() => { current.current = props; });
+  useImperativeHandle(ref,() => ({ next: (side = 'a') => { if (instance.current) { goToNextChunk(instance.current[side]); instance.current[side].focus(); } },previous: (side = 'a') => { if (instance.current) { goToPreviousChunk(instance.current[side]); instance.current[side].focus(); } },undo: side => { if (instance.current) undo(instance.current[side]); },redo: side => { if (instance.current) redo(instance.current[side]); } }),[]);
+  useEffect(() => {
+    const extensions = (side: 'a' | 'b',index: number) => [
+      EditorState.lineSeparator.of('\n'),lineNumbers(),highlightSpecialChars(),drawSelection(),highlightActiveLine(),history(),keymap.of([...defaultKeymap,...historyKeymap,...searchKeymap]),highlightSelectionMatches(),syntaxHighlighting(DIFF_HIGHLIGHT),
+      EditorView.contentAttributes.of({ 'aria-label': side === 'a' ? 'Original text editor' : 'Changed text editor','spellcheck': 'false' }),
+      compartments.current[index].of([]),
+      EditorState.transactionFilter.of(transaction => { if (!transaction.docChanged || current.current.readonly) return transaction; try { checkDiffInput(transaction.newDoc.toString()); return transaction; } catch (error) { queueMicrotask(() => current.current.onError((error as Error).message)); return []; } }),
+      EditorView.updateListener.of(update => { if (update.docChanged && !updating.current && !current.current.readonly) current.current.onChange?.(side,update.state.doc.toString()); queueMicrotask(() => { const view = instance.current; if (view) current.current.onStatus?.(view.chunks.length,view.chunks.every(chunk => chunk.precise)); }); }),
+      EditorView.domEventHandlers({ scroll: (event,view) => { if (updating.current || !current.current.sync || !instance.current) return; const other = instance.current[side === 'a' ? 'b' : 'a']; if (event.target === view.scrollDOM && Math.abs(other.scrollDOM.scrollLeft - view.scrollDOM.scrollLeft) > 1) other.scrollDOM.scrollLeft = view.scrollDOM.scrollLeft; } }),
+      EditorView.theme({ '&': { backgroundColor: 'var(--surface)',color: 'var(--ink)',fontSize: '14px',lineHeight: '1.6' },'.cm-content': { fontFamily: 'ui-monospace, SFMono-Regular, Consolas, monospace',padding: '10px 0',minHeight: '26rem' },'.cm-scroller': { overflow: 'auto' },'.cm-gutters': { backgroundColor: 'var(--page)',color: 'var(--diff-muted)',borderColor: 'var(--line)' },'.cm-activeLine': { backgroundColor: 'var(--diff-active)' },'.cm-activeLineGutter': { backgroundColor: 'var(--diff-active)' },'.cm-cursor': { borderLeftColor: 'var(--ink)' },'.cm-selectionBackground, &.cm-focused .cm-selectionBackground': { backgroundColor: 'var(--diff-selection) !important' },'.cm-panels': { backgroundColor: 'var(--page)',color: 'var(--ink)' },'.cm-searchMatch': { backgroundColor: '#d9770640',outline: '1px solid #d97706' } }),
+    ];
+    const view = new MergeView({ a: { doc: current.current.left,extensions: extensions('a',0) },b: { doc: current.current.right,extensions: extensions('b',1) },parent: host.current!,highlightChanges: true,gutter: true,revertControls: current.current.readonly ? undefined : current.current.direction,diffConfig: { scanLimit: 1000,timeout: 75 } });
+    instance.current = view;
+    return () => { instance.current = null; view.destroy(); };
+  },[]);
+  useEffect(() => {
+    const view = instance.current; if (!view) return;
+    updating.current = true;
+    try {
+      for (const [index,side] of (['a','b'] as const).entries()) {
+        const editor = view[side]; const text = side === 'a' ? left : right;
+        if (editor.state.doc.toString() !== text) editor.dispatch({ changes: { from: 0,to: editor.state.doc.length,insert: text } });
+        editor.dispatch({ effects: compartments.current[index].reconfigure([EditorState.readOnly.of(!!readOnly),EditorView.editable.of(!readOnly),...(wrap ? [EditorView.lineWrapping] : []),...(whitespace ? [highlightWhitespace()] : []),...(mode === 'json' || syntax === 'json' ? [json()] : syntax === 'javascript' ? [javascript({ typescript: true,jsx: true })] : [])]) });
+      }
+      view.reconfigure({ revertControls: readOnly ? undefined : direction,renderRevertControl: () => { const button = document.createElement('button'); button.type = 'button'; button.textContent = direction === 'a-to-b' ? '→' : '←'; button.title = direction === 'a-to-b' ? 'Copy this change to right' : 'Copy this change to left'; button.setAttribute('aria-label',button.title); return button; },collapseUnchanged: collapse ? { margin: 3,minSize: 8 } : undefined });
+    } finally { updating.current = false; }
+    onStatus?.(view.chunks.length,view.chunks.every(chunk => chunk.precise));
+  },[left,right,readOnly,wrap,collapse,whitespace,direction,mode,syntax,onStatus]);
+  return <div ref={host} className={`diff-editors ${props.readonly ? 'diff-readonly' : ''}`}/>;
+});
+export default DiffEditors;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index bbaa3cb..781c647 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
 export default function Footer() {
   const year = new Date().getFullYear();
-  return <footer className='mt-16 border-t border-slate-200 bg-slate-950 p-8 text-center text-slate-300'><p className='text-sm'>&copy; {year} <a href='https://www.surajverma.in' target='_blank' rel='noopener noreferrer' className='font-medium text-white hover:underline'>Suraj Verma</a></p><p className='mt-2 text-sm text-slate-400'>Open source under the <Link href='/license' className='text-sky-300 hover:underline'>MIT License</Link> · <a href='https://github.com/SurajVerma/toolstack' target='_blank' rel='noopener noreferrer' className='text-sky-300 hover:underline'>GitHub</a></p></footer>;
+  return <footer className='mt-16 border-t border-slate-200 dark:border-slate-800 bg-slate-950 p-8 text-center text-slate-300'><p className='text-sm'>&copy; {year} <a href='https://www.surajverma.in' target='_blank' rel='noopener noreferrer' className='font-medium text-white hover:underline'>Suraj Verma</a></p><p className='mt-2 text-sm text-slate-400'>Open source under the <Link href='/license' className='text-sky-300 hover:underline'>MIT License</Link> · <a href='https://github.com/SurajVerma/toolstack' target='_blank' rel='noopener noreferrer' className='text-sky-300 hover:underline'>GitHub</a></p></footer>;
 }
diff --git a/src/components/LocalToolLayout.tsx b/src/components/LocalToolLayout.tsx
index 0aeec2b..70334dc 100644
--- a/src/components/LocalToolLayout.tsx
+++ b/src/components/LocalToolLayout.tsx
@@ -4,5 +4,5 @@ import Breadcrumbs from './Breadcrumbs';
 import ToolPage from './ToolPage';
 
 export default function LocalToolLayout({ title, description, children }: { title: string; description: string; children: React.ReactNode }) {
-  return <div className='flex min-h-screen flex-col bg-slate-50'><Navbar /><Breadcrumbs /><ToolPage title={title} description={description}>{children}</ToolPage><Footer /></div>;
+  return <div className='flex min-h-screen flex-col bg-slate-50 dark:bg-slate-950'><Navbar /><Breadcrumbs /><ToolPage title={title} description={description}>{children}</ToolPage><Footer /></div>;
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 0cf575e..ae33b63 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,21 +1,11 @@
-// src/components/Navbar.tsx
 import Link from 'next/link';
+import ThemeToggle from './ThemeToggle';
 
-const Navbar = () => {
-  return (
-    <nav className='bg-gradient-to-r from-sky-700 to-indigo-800 text-white shadow-md'>
-      <div className='container mx-auto px-4 py-4 flex justify-between items-center'>
-        <Link href='/' className='text-3xl font-extrabold tracking-tight hover:text-sky-200 font-heading drop-shadow-sm'>
-          ToolStack
-        </Link>
-        {/* Future Nav Links can go here */}
-        {/* <div className="space-x-4">
-          <Link href="/about" className="hover:text-slate-300">About</Link>
-          <Link href="/tools" className="hover:text-slate-300">All Tools</Link>
-        </div> */}
-      </div>
-    </nav>
-  );
-};
-
-export default Navbar;
+export default function Navbar() {
+  return <nav aria-label='Main navigation' className='bg-gradient-to-r from-sky-700 to-indigo-800 text-white shadow-sm'>
+    <div className='page-shell flex items-center justify-between gap-4 px-4 py-4'>
+      <Link href='/' className='text-2xl font-extrabold tracking-tight'>ToolStack</Link>
+      <div className='flex items-center gap-4'><Link href='/#tools' className='hidden text-sm font-semibold hover:underline sm:inline'>All tools</Link><ThemeToggle/></div>
+    </div>
+  </nav>;
+}
diff --git a/src/components/PrivacyBadge.tsx b/src/components/PrivacyBadge.tsx
index 0095e95..8f60c7f 100644
--- a/src/components/PrivacyBadge.tsx
+++ b/src/components/PrivacyBadge.tsx
@@ -1,6 +1,6 @@
 export default function PrivacyBadge() {
   return (
-    <div className='inline-flex flex-wrap items-center justify-center gap-x-3 gap-y-1 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-800'>
+    <div className='inline-flex flex-wrap items-center justify-center gap-x-3 gap-y-1 rounded-full border border-emerald-200 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-950 px-4 py-2 text-sm font-medium text-emerald-800 dark:text-emerald-200'>
       <span aria-hidden='true'>🔒</span>
       <span>Processed locally</span>
       <span aria-hidden='true'>•</span>
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 10bdbcd..1f099ef 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -50,7 +50,7 @@ const SearchBar = ({ onSearch }: SearchBarProps) => {
           id='tool-search'
           value={searchTerm}
           onChange={handleInputChange}
-          className='block w-full pl-10 pr-3 py-3 border border-slate-300 rounded-lg leading-5 bg-white text-slate-900 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 sm:text-sm transition-shadow duration-150 shadow-sm hover:shadow-md'
+          className='block w-full pl-10 pr-3 py-3 border border-slate-300 dark:border-slate-700 rounded-lg leading-5 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 sm:text-sm transition-shadow duration-150 shadow-sm hover:shadow-md'
           placeholder='Search for a tool (e.g., image compressor, regex)'
         />
       </div>
diff --git a/src/components/SourceLink.tsx b/src/components/SourceLink.tsx
index d829725..38e4bb1 100644
--- a/src/components/SourceLink.tsx
+++ b/src/components/SourceLink.tsx
@@ -1,3 +1,3 @@
 'use client';
 import { usePathname } from 'next/navigation';
-export default function SourceLink() { const pathname = usePathname(); if (!pathname || pathname === '/') return null; return <a href={`https://github.com/surajverma/toolstack/tree/master/src/app${pathname}`} target='_blank' rel='noopener noreferrer' className='text-xs font-semibold text-slate-500 hover:text-sky-700 hover:underline'>View this tool source</a>; }
+export default function SourceLink() { const pathname = usePathname(); if (!pathname || pathname === '/') return null; return <a href={`https://github.com/surajverma/toolstack/tree/master/src/app${pathname}`} target='_blank' rel='noopener noreferrer' className='text-xs font-semibold text-slate-500 dark:text-slate-400 hover:text-sky-700 dark:hover:text-sky-300 hover:underline'>View this tool source</a>; }
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..18d5436
--- /dev/null
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,25 @@
+'use client';
+import { useSyncExternalStore } from 'react';
+
+const readTheme = () => document.documentElement.dataset.theme === 'dark';
+const subscribe = (callback: () => void) => {
+  const media = matchMedia('(prefers-color-scheme: dark)');
+  window.addEventListener('toolstack-theme', callback); window.addEventListener('storage', callback); media.addEventListener('change', callback);
+  return () => { window.removeEventListener('toolstack-theme', callback); window.removeEventListener('storage', callback); media.removeEventListener('change', callback); };
+};
+
+export default function ThemeToggle() {
+  const dark = useSyncExternalStore(subscribe, readTheme, () => false);
+  const label = dark ? 'Switch to light mode' : 'Switch to dark mode';
+  return <button type='button' aria-label={label} title={label} className='inline-flex min-h-10 min-w-10 items-center justify-center gap-2 rounded-full border border-white/30 px-3 py-2 text-sm font-semibold text-white transition hover:bg-white/10' onClick={() => {
+    const value = dark ? 'light' : 'dark';
+    document.documentElement.dataset.appearance = value;
+    try { localStorage.setItem('toolstack-theme', value); } catch { /* Keep the selected theme for this page if storage is blocked. */ }
+    document.documentElement.dataset.theme = value;
+    window.dispatchEvent(new Event('toolstack-theme'));
+  }}>
+    <svg aria-hidden='true' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='1.8' strokeLinecap='round' strokeLinejoin='round'>
+      {dark ? <path d='M20.5 13A8.5 8.5 0 0 1 11 3.5 8.5 8.5 0 1 0 20.5 13Z'/> : <><circle cx='12' cy='12' r='4'/><path d='M12 2v2m0 16v2M2 12h2m16 0h2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/></>}
+    </svg><span className='hidden sm:inline'>{dark ? 'Dark' : 'Light'}</span>
+  </button>;
+}
diff --git a/src/components/ToolCard.tsx b/src/components/ToolCard.tsx
index c8bb25e..77797f4 100644
--- a/src/components/ToolCard.tsx
+++ b/src/components/ToolCard.tsx
@@ -1,19 +1,10 @@
 import Link from 'next/link';
 import type { Tool } from '@/types/tool';
 
-interface ToolCardProps { tool: Tool }
-
-export default function ToolCard({ tool }: ToolCardProps) {
-  return <Link href={tool.slug} className='group block rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-sky-300 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-sky-500'>
-    <div className='mb-3 flex items-start justify-between gap-3'>
-      <h3 className='text-lg font-bold tracking-tight text-slate-900 group-hover:text-sky-700'>{tool.name}</h3>
-      <div className='flex shrink-0 gap-1'>
-        {tool.new && <span className='rounded-full bg-sky-50 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-sky-700'>New</span>}
-        <span className='rounded-full bg-emerald-50 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-emerald-700'>Local</span>
-      </div>
-    </div>
-    <p className='mb-4 text-sm leading-6 text-slate-600'>{tool.description}</p>
-    <div className='mb-3'><span className='inline-flex rounded-md border border-slate-300 bg-slate-50 px-2.5 py-1 text-[11px] font-bold uppercase tracking-wide text-slate-700'>{tool.category}</span></div>
-    <div className='flex flex-wrap gap-1.5'>{tool.tags.slice(0,5).map(tag => <span key={tag} className='rounded-full bg-slate-100 px-2 py-1 text-[11px] text-slate-600'>{tag}</span>)}</div>
+export default function ToolCard({ tool }: { tool: Tool }) {
+  return <Link href={tool.slug} className='group flex h-full flex-col rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-sm transition hover:border-sky-400 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-sky-500'>
+    <h3 className='mb-2 text-base font-bold text-slate-900 dark:text-slate-100 group-hover:text-sky-700 dark:group-hover:text-sky-300'>{tool.name}</h3>
+    <p className='mb-5 flex-1 text-sm leading-6 text-slate-600 dark:text-slate-300'>{tool.description}</p>
+    <div className='flex items-center justify-between gap-2 border-t border-slate-200 dark:border-slate-800 pt-3 text-xs font-medium text-slate-500 dark:text-slate-400'><span>{tool.category}</span><span aria-hidden='true' className='text-base text-sky-700 dark:text-sky-300'>→</span></div>
   </Link>;
 }
diff --git a/src/components/ToolPage.tsx b/src/components/ToolPage.tsx
index 913f67d..788c8c5 100644
--- a/src/components/ToolPage.tsx
+++ b/src/components/ToolPage.tsx
@@ -2,5 +2,5 @@ import Link from 'next/link';
 import PrivacyBadge from './PrivacyBadge';
 import SourceLink from './SourceLink';
 export default function ToolPage({ title, description, children }: { title: string; description: string; children: React.ReactNode }) {
-  return <main className='container mx-auto flex-grow px-4 py-8'><header className='mb-8 text-center'><h1 className='text-4xl font-bold tracking-tight text-slate-900'>{title}</h1><p className='mx-auto mt-2 max-w-3xl text-lg text-slate-600'>{description}</p><div className='mt-4'><PrivacyBadge/></div><div className='mt-2'><SourceLink/></div></header>{children}<div className='mt-12 text-center'><Link href='/' className='font-semibold text-sky-700 hover:underline'>&larr; Back to all tools</Link></div></main>;
+  return <main id='main-content' className='page-shell flex-grow px-4 py-8'><header className='mb-8 text-center'><h1 className='text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100'>{title}</h1><p className='mx-auto mt-2 max-w-3xl text-lg text-slate-600 dark:text-slate-300'>{description}</p><div className='mt-4'><PrivacyBadge/></div><div className='mt-2'><SourceLink/></div></header>{children}<div className='mt-12 text-center'><Link href='/' className='font-semibold text-sky-700 dark:text-sky-300 hover:underline'>&larr; Back to all tools</Link></div></main>;
 }
diff --git a/src/config/tools.ts b/src/config/tools.ts
index 6607d32..d5c02ec 100644
--- a/src/config/tools.ts
+++ b/src/config/tools.ts
@@ -7,7 +7,7 @@ const tool = (slug: string, name: string, description: string, category: ToolCat
 export const TOOLS: Tool[] = [
   tool('image-compressor','Image Compressor','Compress image batches locally with browser-side processing.','Images',['image','compress','optimize','media']),
   tool('regex-tester','Regex Tester & Explainer','Test regular expressions in a disposable worker with a timeout.','Developer',['text','developer','regex','code']),
-  tool('text-diff','Text Diff Checker','Compare two pieces of text and highlight differences.','Text & Data',['text','compare','diff']),
+  tool('text-diff','Text & File Diff','Compare and merge files inline, match records and export reviewed, redacted changes.','Text & Data',['text','file','compare','diff','merge','csv','json','env','redact','privacy'],{new:true}),
   tool('color-converter','Color Code Converter','Convert HEX, RGB and HSL color values.','Converters',['color','design','developer','converter']),
   tool('placeholder-generator','Placeholder Image Generator','Create custom placeholder images locally.','Images',['image','design','placeholder']),
   tool('text-analyzer','Text Statistics / Analyzer','Count words, characters, sentences and more.','Text & Data',['text','stats','analyzer','counter']),
@@ -20,14 +20,14 @@ export const TOOLS: Tool[] = [
   tool('lorem-ipsum-generator','Lorem Ipsum Generator','Generate placeholder text.','Generators',['text','generator','placeholder','design']),
   tool('regex-generator','Easy Regex Generator','Build common regular expressions without memorizing syntax.','Developer',['regex','generator','developer','text','code']),
   tool('find-replace','Find & Replace in Text','Find and replace text with optional regex support.','Text & Data',['text','find','replace','regex']),
-  tool('data-anonymizer','Data Anonymizer','Redact common sensitive-looking values locally.','Privacy & Security',['text','privacy','security','anonymize','redact'],{featured:true}),
+  tool('data-anonymizer','Data Anonymizer','Scrub sensitive text or mask linked CSV / JSON datasets with consistent aliases.','Privacy & Security',['text','privacy','security','anonymize','redact','csv','dataset','pseudonymize'],{featured:true}),
   tool('css-specificity-calculator','CSS Specificity Calculator','Calculate modern CSS selector specificity with an AST parser.','Developer',['css','developer','specificity','design']),
   tool('unit-converter','Unit Converter','Convert common measurement units.','Converters',['converter','units','measurement','math']),
   tool('http-status-codes','HTTP Status Code Explainer','Look up HTTP status codes and meanings.','Developer',['http','developer','reference','network']),
   tool('list-cleaner','List Cleaner & Formatter','Sort, deduplicate and format text lists.','Text & Data',['text','list','format','cleaner','sort']),
   tool('html-tag-explainer','HTML Tag Explainer','Reference standard HTML tags and their uses.','Developer',['html','developer','reference','code']),
   tool('file-hash','File Hash & Checksum','Generate SHA-256, SHA-384 and SHA-512 checksums without uploading files.','Privacy & Security',['privacy','hash','checksum','file','security'],{featured:true,new:true}),
-  tool('json-toolbox','JSON Toolbox','Format, minify, validate, sort and structurally compare JSON locally.','Developer',['json','format','validate','diff','developer','data'],{new:true}),
+  tool('json-toolbox','JSON Toolbox','Format, compare and turn JSON samples into TypeScript or JSON Schema.','Developer',['json','format','validate','diff','developer','data','typescript','schema'],{new:true}),
   tool('url-cleaner','Tracking URL Cleaner','Remove common tracking parameters and inspect URL parts locally.','Privacy & Security',['privacy','url','tracking','utm','cleaner'],{featured:true,new:true}),
   tool('password-generator','Password & Passphrase Generator','Generate cryptographically secure passwords and passphrases locally.','Privacy & Security',['password','security','privacy','generator'],{featured:true,new:true}),
   tool('encoder-decoder','Encoder / Decoder','Encode and decode Base64, URLs and HTML entities.','Developer',['base64','url','html','unicode','encode','decode'],{new:true}),
@@ -46,6 +46,12 @@ export const TOOLS: Tool[] = [
   tool('csp-builder','CSP Builder & Analyzer','Draft and inspect Content Security Policy headers locally.','Developer',['csp','security','headers','developer','web'],{new:true}),
   tool('hmac-tool','HMAC Generator & Verifier','Generate and verify HMAC-SHA signatures using Web Crypto.','Privacy & Security',['hmac','hash','signature','crypto','security'],{new:true}),
   tool('cron-explainer','Cron Expression Explainer','Explain standard five-field cron expressions.','Developer',['cron','schedule','developer','automation'],{new:true}),
+  tool('support-sanitizer','Support File Sanitizer','Clean logs, JSON and HAR files, or convert cURL to redacted JavaScript.','Privacy & Security',['privacy','har','logs','support','secrets','redact','curl','fetch'],{featured:true,new:true}),
+  tool('screenshot-redactor','Screenshot Redactor','Replace sensitive pixels with solid areas and export a new, flattened PNG.','Privacy & Security',['privacy','screenshot','image','redact','sharing'],{featured:true,new:true}),
+  tool('document-privacy','Document Privacy Inspector','Inspect Office files for hidden information and clear supported document properties.','Privacy & Security',['privacy','office','docx','xlsx','pptx','metadata','documents'],{featured:true,new:true}),
+  tool('calendar-privacy','Calendar Privacy Exporter','Share a finite busy-time snapshot without meeting details or account connections.','Privacy & Security',['privacy','calendar','ics','availability','busy','sharing'],{new:true}),
+  tool('synthetic-data','Synthetic Dataset Generator','Generate repeatable fake CSV / JSON datasets with linked tables.','Generators',['synthetic','dataset','csv','json','test','fixtures','generator'],{new:true}),
+  tool('qr-toolkit','QR Toolkit','Create text, Wi-Fi and contact QR codes, or read QR images locally.','Generators',['qr','qrcode','wifi','contact','image','decode','generator'],{new:true}),
 ];
 
 export const TOOL_BY_SLUG = new Map(TOOLS.map(item => [item.slug, item]));
diff --git a/src/lib/calendar-privacy.test.ts b/src/lib/calendar-privacy.test.ts
new file mode 100644
index 0000000..c8b2b7b
--- /dev/null
+++ b/src/lib/calendar-privacy.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+import { createPrivateCalendar } from './calendar-privacy';
+
+const wrap = (...events: string[]) => ['BEGIN:VCALENDAR','VERSION:2.0',...events,'END:VCALENDAR'].join('\r\n');
+const event = (extra = '') => ['BEGIN:VEVENT','UID:private@example.com','DTSTART:20260105T090000Z','DTEND:20260105T100000Z','SUMMARY:Secret meeting','ATTENDEE:mailto:private@example.com','DESCRIPTION:https://private.invalid/meeting','LOCATION:Private office',extra,'END:VEVENT'].filter(Boolean).join('\r\n');
+const options = { from: '2026-01-01', through: '2026-01-31', floating: 'utc' as const };
+describe('private calendar snapshots', () => {
+  it('expands recurrence, excludes EXDATE and strips original identifiers and content', () => {
+    const result = createPrivateCalendar(wrap(event('RRULE:FREQ=WEEKLY;COUNT=4\r\nEXDATE:20260112T090000Z')), options);
+    expect(result.blocks).toHaveLength(3); expect(result.ics).not.toMatch(/Secret|private@example|private.invalid|Private office|ATTENDEE|DESCRIPTION|LOCATION|RRULE/);
+    expect(result.ics.match(/SUMMARY:Busy/g)).toHaveLength(3);
+  });
+  it('handles moved and cancelled recurrence exceptions', () => {
+    const moved = 'BEGIN:VEVENT\r\nUID:private@example.com\r\nRECURRENCE-ID:20260112T090000Z\r\nDTSTART:20260113T110000Z\r\nDTEND:20260113T120000Z\r\nEND:VEVENT';
+    const cancelled = 'BEGIN:VEVENT\r\nUID:private@example.com\r\nRECURRENCE-ID:20260119T090000Z\r\nSTATUS:CANCELLED\r\nEND:VEVENT';
+    const result = createPrivateCalendar(wrap(event('RRULE:FREQ=WEEKLY;COUNT=3'), moved, cancelled), options);
+    expect(result.blocks.map(block => block.start)).toEqual(['2026-01-05T09:00:00.000Z','2026-01-13T11:00:00.000Z']);
+  });
+  it('retains all-day exclusive end dates and excludes transparent events', () => {
+    const allDay = 'BEGIN:VEVENT\r\nUID:day\r\nDTSTART;VALUE=DATE:20260107\r\nDTEND;VALUE=DATE:20260109\r\nEND:VEVENT';
+    const result = createPrivateCalendar(wrap(allDay, event('TRANSP:TRANSPARENT')), options);
+    expect(result.blocks).toEqual([{ start: '2026-01-07', end: '2026-01-09', allDay: true }]);
+    expect(result.ics).toContain('DTEND;VALUE=DATE:20260109');
+  });
+  it('uses embedded timezone definitions instead of guessing UTC', () => {
+    const zone = 'BEGIN:VTIMEZONE\r\nTZID:Asia/Kolkata\r\nBEGIN:STANDARD\r\nDTSTART:19700101T000000\r\nTZOFFSETFROM:+0530\r\nTZOFFSETTO:+0530\r\nEND:STANDARD\r\nEND:VTIMEZONE';
+    const timed = event().replace('DTSTART:20260105T090000Z', 'DTSTART;TZID=Asia/Kolkata:20260105T090000').replace('DTEND:20260105T100000Z','DTEND;TZID=Asia/Kolkata:20260105T100000');
+    expect(createPrivateCalendar(wrap(zone, timed), options).blocks[0].start).toBe('2026-01-05T03:30:00.000Z');
+    expect(() => createPrivateCalendar(wrap(timed), options)).toThrow(/VTIMEZONE/);
+  });
+  it('stops on unsupported range exceptions and oversized date windows', () => {
+    expect(() => createPrivateCalendar(wrap(event('RECURRENCE-ID;RANGE=THISANDFUTURE:20260105T090000Z')), options)).toThrow(/range-based/);
+    expect(() => createPrivateCalendar(wrap(event()), { ...options, through: '2028-01-01' })).toThrow(/366/);
+  });
+  it('matches UTC recurrence exceptions against events in an embedded local timezone', () => {
+    const zone = 'BEGIN:VTIMEZONE\r\nTZID:Asia/Kolkata\r\nBEGIN:STANDARD\r\nDTSTART:19700101T000000\r\nTZOFFSETFROM:+0530\r\nTZOFFSETTO:+0530\r\nEND:STANDARD\r\nEND:VTIMEZONE';
+    const master = event('RRULE:FREQ=WEEKLY;COUNT=2').replace('DTSTART:20260105T090000Z','DTSTART;TZID=Asia/Kolkata:20260105T090000').replace('DTEND:20260105T100000Z','DTEND;TZID=Asia/Kolkata:20260105T100000');
+    const exception = 'BEGIN:VEVENT\r\nUID:private@example.com\r\nRECURRENCE-ID:20260112T033000Z\r\nDTSTART:20260113T033000Z\r\nDTEND:20260113T043000Z\r\nEND:VEVENT';
+    expect(createPrivateCalendar(wrap(zone, master, exception), options).blocks.map(block => block.start)).toEqual(['2026-01-05T03:30:00.000Z','2026-01-13T03:30:00.000Z']);
+  });
+});
diff --git a/src/lib/calendar-privacy.ts b/src/lib/calendar-privacy.ts
new file mode 100644
index 0000000..ddcc227
--- /dev/null
+++ b/src/lib/calendar-privacy.ts
@@ -0,0 +1,79 @@
+import ICAL from 'ical.js';
+
+export type BusyBlock = { start: string; end: string; allDay: boolean };
+export type CalendarResult = { ics: string; summary: string; blocks: BusyBlock[]; skipped: number };
+export type CalendarOptions = { from: string; through: string; floating: 'utc' | 'local' };
+const compact = (date: Date) => date.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}Z$/, 'Z');
+
+export function createPrivateCalendar(text: string, options: CalendarOptions): CalendarResult {
+  const dateStart = new Date(`${options.from}T00:00:00Z`); const dateEnd = new Date(`${options.through}T00:00:00Z`);
+  if (![dateStart, dateEnd].every(date => Number.isFinite(date.getTime())) || dateStart.toISOString().slice(0,10) !== options.from || dateEnd.toISOString().slice(0,10) !== options.through) throw new Error('Choose valid start and end dates.');
+  dateEnd.setUTCDate(dateEnd.getUTCDate() + 1);
+  if (dateEnd <= dateStart || dateEnd.getTime() - dateStart.getTime() > 366 * 86400000) throw new Error('Choose a date range of up to 366 days, with the end on or after the start.');
+  const root = new ICAL.Component(ICAL.parse(text));
+  if (root.name !== 'vcalendar') throw new Error('This is not an iCalendar VCALENDAR file.');
+  const components = root.getAllSubcomponents('vevent');
+  if (!components.length) throw new Error('No calendar events were found. Tasks and journals are not exported.');
+  if (components.length > 5000) throw new Error('Use a calendar with up to 5,000 event records.');
+  const events = components.map(component => {
+    for (const property of component.getAllProperties()) {
+      const zone = property.getParameter('tzid');
+      if (zone && zone !== 'UTC' && !root.getTimeZoneByID(String(zone))) throw new Error(`An event uses a time zone without an embedded VTIMEZONE definition. Re-export the calendar with time zone definitions included.`);
+      if (property.name === 'rdate' && property.type === 'period') throw new Error('RDATE periods are not supported. Export this calendar as individual events first.');
+    }
+    if (component.getFirstProperty('recurrence-id')?.getParameter('range')) throw new Error('This calendar uses range-based recurrence exceptions, which this exporter cannot safely expand.');
+    if (!component.hasProperty('dtstart') && String(component.getFirstPropertyValue('status')).toUpperCase() !== 'CANCELLED') throw new Error('An event has no start time. Repair it before exporting.');
+    return new ICAL.Event(component, { exceptions: [] });
+  });
+  const masters = events.filter(event => !event.isRecurrenceException());
+  const masterIds = new Set(masters.map(event => event.uid));
+  if (masterIds.size !== masters.length || masters.some(event => !event.uid)) throw new Error('Event IDs are missing or duplicated. Re-export a single current calendar.');
+  const exceptions = events.filter(event => event.isRecurrenceException());
+  if (exceptions.some(event => !masterIds.has(event.uid))) throw new Error('A recurrence exception has no parent event in this file. Export the full calendar first.');
+  const toDate = (time: InstanceType<typeof ICAL.Time>) => {
+    if (time.isDate || (time.zone === ICAL.Timezone.localTimezone && options.floating === 'utc')) return new Date(Date.UTC(time.year, time.month - 1, time.day, time.hour, time.minute, time.second));
+    return time.toJSDate();
+  };
+  const occurrenceKey = (uid: string, time: InstanceType<typeof ICAL.Time>) => `${uid}:${time.isDate ? 'date' : 'time'}:${toDate(time).getTime()}`;
+  const overrides = new Set(exceptions.map(event => occurrenceKey(event.uid, event.recurrenceId)));
+  if (overrides.size !== exceptions.length) throw new Error('Duplicate recurrence exceptions were found. Re-export a single current calendar.');
+  const blocks: BusyBlock[] = []; let skipped = root.getAllSubcomponents().filter(component => component.name !== 'vevent' && component.name !== 'vtimezone').length; let expanded = 0;
+  const add = (event: InstanceType<typeof ICAL.Event>, start: InstanceType<typeof ICAL.Time>, end: InstanceType<typeof ICAL.Time>) => {
+    const status = String(event.component.getFirstPropertyValue('status') ?? '').toUpperCase();
+    const transparency = String(event.component.getFirstPropertyValue('transp') ?? '').toUpperCase();
+    if (status === 'CANCELLED' || transparency === 'TRANSPARENT') { skipped++; return; }
+    const first = toDate(start); const last = toDate(end);
+    if (!Number.isFinite(first.getTime()) || !Number.isFinite(last.getTime()) || last < first) throw new Error('An event has invalid or inverted dates.');
+    if (last.getTime() === first.getTime()) { skipped++; return; }
+    if (first >= dateEnd || last <= dateStart) return;
+    const from = new Date(Math.max(first.getTime(), dateStart.getTime())); const through = new Date(Math.min(last.getTime(), dateEnd.getTime()));
+    blocks.push({ start: start.isDate ? from.toISOString().slice(0,10) : from.toISOString(), end: start.isDate ? through.toISOString().slice(0,10) : through.toISOString(), allDay: start.isDate });
+    if (blocks.length > 10000) throw new Error('This range contains more than 10,000 busy blocks. Choose a smaller range.');
+  };
+  for (const event of masters) {
+    if (String(event.component.getFirstPropertyValue('status') ?? '').toUpperCase() === 'CANCELLED') { skipped++; continue; }
+    if (!event.isRecurring()) { add(event, event.startDate, event.endDate); continue; }
+    const iterator = event.iterator(); let occurrence;
+    while ((occurrence = iterator.next())) {
+      if (++expanded > 25000) throw new Error('Recurrence expansion exceeded 25,000 occurrences. Use a more recent calendar export or a smaller source calendar.');
+      if (toDate(occurrence) >= dateEnd) break;
+      if (overrides.has(occurrenceKey(event.uid, occurrence))) continue;
+      const end = occurrence.clone(); end.addDuration(event.duration); add(event, occurrence, end);
+    }
+  }
+  for (const event of exceptions) {
+    if (String(event.component.getFirstPropertyValue('status') ?? '').toUpperCase() === 'CANCELLED') { skipped++; continue; }
+    add(event, event.startDate, event.endDate);
+  }
+  blocks.sort((a,b) => a.start.localeCompare(b.start));
+  const stamp = compact(new Date());
+  const lines = ['BEGIN:VCALENDAR','VERSION:2.0','PRODID:-//ToolStack//Private Busy Snapshot//EN','CALSCALE:GREGORIAN'];
+  for (const block of blocks) {
+    lines.push('BEGIN:VEVENT', `UID:${crypto.randomUUID()}@toolstack.invalid`, `DTSTAMP:${stamp}`, 'SUMMARY:Busy', 'TRANSP:OPAQUE');
+    if (block.allDay) lines.push(`DTSTART;VALUE=DATE:${block.start.replaceAll('-','')}`, `DTEND;VALUE=DATE:${block.end.replaceAll('-','')}`);
+    else lines.push(`DTSTART:${compact(new Date(block.start))}`, `DTEND:${compact(new Date(block.end))}`);
+    lines.push('END:VEVENT');
+  }
+  lines.push('END:VCALENDAR');
+  return { ics: lines.join('\r\n') + '\r\n', blocks, skipped, summary: `Busy time snapshot: ${options.from} through ${options.through} (UTC date range)\n${blocks.length} blocks. All times below are UTC; all-day end dates are exclusive.\n` + blocks.map(block => block.allDay ? `${block.start} → ${block.end} (all day, exclusive end)` : `${block.start} → ${block.end}`).join('\n') };
+}
diff --git a/src/lib/calendar.worker.ts b/src/lib/calendar.worker.ts
new file mode 100644
index 0000000..64c7645
--- /dev/null
+++ b/src/lib/calendar.worker.ts
@@ -0,0 +1,5 @@
+import { createPrivateCalendar, type CalendarOptions } from './calendar-privacy';
+self.onmessage = (event: MessageEvent<{ text: string; options: CalendarOptions }>) => {
+  try { self.postMessage({ result: createPrivateCalendar(event.data.text, event.data.options) }); }
+  catch (err) { self.postMessage({ error: err instanceof Error ? err.message : 'Calendar processing failed.' }); }
+};
diff --git a/src/lib/curl-converter.test.ts b/src/lib/curl-converter.test.ts
new file mode 100644
index 0000000..5eea1a1
--- /dev/null
+++ b/src/lib/curl-converter.test.ts
@@ -0,0 +1,18 @@
+import { describe,expect,it } from 'vitest';
+import { curlToFetch,parseCurl,tokenizeCurl } from './curl-converter';
+describe('cURL conversion',() => {
+  it('parses POSIX continuations, headers, JSON and query values and defaults to redaction',() => {
+    const command = ["curl 'https://example.invalid/orders?token=secret-query&token=another'", "-H 'Authorization: Bearer private-key'", `--json '{"email":"person@example.invalid","nested":[123,true,null]}'`].join(' \\\n');
+    const request = parseCurl(command); expect(request.method).toBe('POST'); expect(request.headers.authorization).toBe('Bearer private-key');
+    const result = curlToFetch(command); expect(result.code).toContain(['fetch','('].join('')); expect(result.code).toContain('[REDACTED]');
+    for (const secret of ['secret-query','private-key','person@example.invalid','another']) expect(result.code).not.toContain(secret);
+    expect(result.code).toContain('"credentials": "omit"'); expect(curlToFetch(command,false).code).toContain('private-key');
+  });
+  it('converts GET query data and basic auth, omits browser headers and supports literal escaped values',() => {
+    const request = parseCurl("curl -G 'https://example.invalid' -d 'q=hello' -u 'test:password' -H 'Cookie: private' -H '__proto__: literal'");
+    expect(request.url).toBe('https://example.invalid/?q=hello'); expect(request.body).toBeUndefined(); expect(request.headers.authorization).toContain('Basic '); expect(Object.hasOwn(request.headers,'cookie')).toBe(false); expect(Object.hasOwn(request.headers,'__proto__')).toBe(true); expect(request.warnings.length).toBe(1);
+    expect(tokenizeCurl(`curl 'https://example.invalid' --data-raw 'a=$literal'`)[3]).toBe('a=$literal');
+    expect(curlToFetch("curl 'https://example.invalid' --data-raw 'private=secret'").code).not.toContain('private=secret');
+  });
+  it.each(["curl $(whoami)","curl https://example.invalid; echo secret","curl 'https://example.invalid' --data @private.txt","curl 'https://example.invalid' --insecure","curl 'file:///private'","curl 'https://user:password@example.invalid'","curl 'https://example.invalid' -X GET -d 'body'","curl 'https://example.invalid' --json 'broken'","curl 'https://example.invalid' | sh",'curl "https://example.invalid/$TOKEN"'])('rejects unsupported or unsafe input %s',command => { expect(() => curlToFetch(command)).toThrow(); });
+});
diff --git a/src/lib/curl-converter.ts b/src/lib/curl-converter.ts
new file mode 100644
index 0000000..99d232c
--- /dev/null
+++ b/src/lib/curl-converter.ts
@@ -0,0 +1,104 @@
+export type CurlRequest = { url: string; method: string; headers: Record<string,string>; body?: string; warnings: string[] };
+const FORBIDDEN = /^(?:accept-charset|accept-encoding|access-control-request-headers|access-control-request-method|connection|content-length|cookie|cookie2|date|dnt|expect|host|keep-alive|origin|permissions-policy|referer|set-cookie|te|trailer|transfer-encoding|upgrade|user-agent|via|proxy-.*|sec-.*)$/i;
+
+/** Tokenize a limited POSIX command as data. Nothing is evaluated or executed. */
+export function tokenizeCurl(input: string): string[] {
+  if (input.length > 100000) throw new Error('Use a cURL command up to 100 KB.');
+  const tokens: string[] = []; let word = ''; let started = false; let quote = '';
+  const flush = () => { if (started) tokens.push(word); word = ''; started = false; };
+  for (let i = 0; i < input.length; i++) {
+    const char = input[i];
+    if (quote === "'") { if (char === "'") quote = ''; else word += char; continue; }
+    if (char === '\\') {
+      if (i + 1 >= input.length) throw new Error('The command ends with an incomplete escape.');
+      if (input[i + 1] === '\n') { i++; continue; }
+      if (input[i + 1] === '\r' && input[i + 2] === '\n') { i += 2; continue; }
+      const next = input[++i];
+      if (quote === '"' && !['"','\\','$','`'].includes(next)) word += '\\';
+      word += next; started = true; continue;
+    }
+    if (char === '$' || char === '`') throw new Error('Shell variables and command substitutions are unsupported. Paste literal values in single quotes.');
+    if (quote === '"') { if (char === '"') quote = ''; else word += char; continue; }
+    if (char === "'" || char === '"') { quote = char; started = true; continue; }
+    if (/\s/.test(char)) { flush(); continue; }
+    if (/[|&;<>()[\]^]/.test(char) || (!started && char === '#')) throw new Error('Use one POSIX cURL command without shell operators. Quote URLs containing &, brackets or parentheses.');
+    word += char; started = true;
+  }
+  if (quote) throw new Error('A quoted argument is not closed.');
+  flush(); return tokens;
+}
+
+export function parseCurl(input: string): CurlRequest {
+  const tokens = tokenizeCurl(input);
+  if (!/^(?:curl|curl\.exe)$/.test(tokens.shift() ?? '')) throw new Error('Start with curl followed by an HTTP or HTTPS URL.');
+  let url = ''; let method = ''; let get = false; let head = false; let json = false; const bodies: string[] = []; const headers: Record<string,string> = Object.create(null); const warnings: string[] = [];
+  const addHeader = (name: string, value: string) => {
+    if (!/^[!#$%&'*+.^_`|~0-9A-Za-z-]+$/.test(name) || /[\r\n]/.test(value)) throw new Error('A header has an invalid name or a line break.');
+    const key = name.toLowerCase();
+    if (FORBIDDEN.test(key)) { warnings.push(`${name} is controlled by the browser and is omitted.`); return; }
+    headers[key] = Object.hasOwn(headers,key) ? `${headers[key]}, ${value}` : value;
+  };
+  for (let i = 0; i < tokens.length; i++) {
+    let token = tokens[i]; let inline: string | undefined;
+    if (token.startsWith('--') && token.includes('=')) { const split = token.indexOf('='); inline = token.slice(split + 1); token = token.slice(0,split); }
+    else if (/^-[XHdubAe].+/.test(token)) { inline = token.slice(2); token = token.slice(0,2); }
+    const argument = () => { const value = inline ?? tokens[++i]; if (value === undefined) throw new Error(`${token} needs a value.`); return value; };
+    if (token === '-X' || token === '--request') { method = argument().toUpperCase(); if (!/^[A-Z]+$/.test(method) || ['CONNECT','TRACE','TRACK'].includes(method)) throw new Error('Use a method supported by browser requests, such as GET, POST, PUT, PATCH or DELETE.'); }
+    else if (token === '--url') { if (url) throw new Error('Use one URL per conversion.'); url = argument(); }
+    else if (token === '-H' || token === '--header') { const value = argument(); const split = value.indexOf(':'); if (split <= 0) throw new Error('Headers must use Name: value. Header-file references are unsupported.'); addHeader(value.slice(0,split).trim(),value.slice(split + 1).trim()); }
+    else if (['-d','--data','--data-raw','--data-binary','--json'].includes(token)) {
+      const value = argument(); if (value.startsWith('@') && token !== '--data-raw') throw new Error('File references are unsupported. Paste the request body directly.');
+      if (token === '--json') { if (bodies.length && !json) throw new Error('Do not mix --json and other body flags.'); json = true; }
+      else if (json) throw new Error('Do not mix --json and other body flags.');
+      bodies.push(value);
+    } else if (token === '-u' || token === '--user') {
+      const auth = argument(); if (!auth.includes(':')) throw new Error('Provide user:password as a literal value; interactive password prompts are unsupported.');
+      const bytes = new TextEncoder().encode(auth); let binary = ''; for (const byte of bytes) binary += String.fromCharCode(byte); addHeader('Authorization',`Basic ${btoa(binary)}`);
+    } else if (token === '-b' || token === '--cookie' || token === '-A' || token === '--user-agent' || token === '-e' || token === '--referer') { argument(); warnings.push(`${token} is omitted because browsers control cookies, user agents and referrers.`); }
+    else if (token === '-G' || token === '--get') get = true;
+    else if (token === '-I' || token === '--head') head = true;
+    else if (token === '-L' || token === '--location') { /* Browser requests follow redirects by default. */ }
+    else if (['--compressed','--silent','--show-error','--fail','--http1.1','--http2','--http3'].includes(token) || /^-[sSfL]+$/.test(token)) warnings.push(`${token} is a cURL transport/output option; it has no direct effect in the generated code.`);
+    else if (token.startsWith('-')) throw new Error(`Unsupported option: ${token}. File uploads, shell expansion, TLS overrides and output flags are not converted.`);
+    else { if (url) throw new Error('Use one URL per conversion.'); url = token; }
+    if (inline !== undefined && !['-X','--request','--url','-H','--header','-d','--data','--data-raw','--data-binary','--json','-u','--user','-b','--cookie','-A','--user-agent','-e','--referer'].includes(token)) throw new Error(`${token} does not accept an inline value.`);
+  }
+  let parsed: URL;
+  try { parsed = new URL(url); } catch { throw new Error('Provide a valid HTTP or HTTPS URL.'); }
+  if (!['http:','https:'].includes(parsed.protocol)) throw new Error('Only HTTP and HTTPS URLs are supported.');
+  if (parsed.username || parsed.password) throw new Error('URLs with embedded credentials are unsupported. Use an Authorization header instead.');
+  if (/[{}]/.test(parsed.pathname)) throw new Error('cURL URL globbing is unsupported. Use a single expanded URL.');
+  parsed.hash = '';
+  const body = bodies.length ? bodies.join(json ? '' : '&') : undefined;
+  if (get && json) throw new Error('Do not combine --get with --json.');
+  if (get && body !== undefined) parsed.search += `${parsed.search ? '&' : '?'}${body}`;
+  const resolvedMethod = method || (head ? 'HEAD' : get ? 'GET' : body !== undefined ? 'POST' : 'GET');
+  if (body !== undefined && !get && ['GET','HEAD'].includes(resolvedMethod)) throw new Error('Browser GET/HEAD requests cannot have a body. Use --get for query parameters or a body-capable method.');
+  if (body !== undefined && !get) {
+    if (!Object.hasOwn(headers,'content-type')) headers['content-type'] = json ? 'application/json' : 'application/x-www-form-urlencoded';
+    if (json && !Object.hasOwn(headers,'accept')) headers.accept = 'application/json';
+  }
+  return { url: parsed.toString(), method: resolvedMethod, headers, ...(body !== undefined && !get ? { body } : {}), warnings: [...new Set(warnings)] };
+}
+
+export function curlToFetch(input: string, redact = true) {
+  const request = parseCurl(input); const url = new URL(request.url);
+  const hideValues = (value: unknown, depth = 0): unknown => {
+    if (depth > 35) throw new Error('The JSON body is nested too deeply.');
+    if (Array.isArray(value)) return value.map(item => hideValues(item,depth + 1));
+    if (value && typeof value === 'object') return Object.fromEntries(Object.entries(value).map(([key,item]) => [key,hideValues(item,depth + 1)]));
+    return '[REDACTED]';
+  };
+  if (redact) for (const name of [...new Set(url.searchParams.keys())]) { const values = url.searchParams.getAll(name); url.searchParams.delete(name); values.forEach(() => url.searchParams.append(name,'[REDACTED]')); }
+  const headers = redact ? Object.fromEntries(Object.entries(request.headers).map(([name,value]) => [name, ['content-type','accept'].includes(name) ? value : '[REDACTED]'])) : request.headers;
+  let body = request.body;
+  if (redact && body !== undefined) {
+    if (/\bapplication\/(?:[\w.-]+\+)?json\b/i.test(request.headers['content-type'] ?? '')) {
+      let value: unknown; try { value = JSON.parse(body); } catch { throw new Error('The body is marked as JSON but is invalid. Fix it before producing a redacted example.'); }
+      body = JSON.stringify(hideValues(value));
+    } else body = '[REDACTED_BODY]';
+  }
+  const init = { method: request.method, ...(Object.keys(headers).length ? { headers } : {}), ...(body !== undefined ? { body } : {}), credentials: 'omit' };
+  const call = ['fetch','('].join('');
+  return { code: `const response = await ${call}${JSON.stringify(url.toString())}, ${JSON.stringify(init,null,2)});\n`, warnings: request.warnings };
+}
diff --git a/src/lib/dataset-mask.test.ts b/src/lib/dataset-mask.test.ts
new file mode 100644
index 0000000..55cb3a7
--- /dev/null
+++ b/src/lib/dataset-mask.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { maskDatasets, parseDataset } from './dataset-mask';
+
+describe('dataset pseudonymization', () => {
+  it('preserves repeated identifiers across different files and column names with the same group', () => {
+    const source = [parseDataset('customers.json', '[{"id":42,"email":"private@example.com"}]'), parseDataset('orders.json', '[{"customer_id":42,"total":5},{"customer_id":42,"total":6}]')];
+    const result = maskDatasets(source, { id: { mode: 'alias', group: 'customer' }, customer_id: { mode: 'alias', group: 'customer' }, email: { mode: 'remove', group: '' } }, 0);
+    const customer = JSON.parse(result[0].text); const orders = JSON.parse(result[1].text);
+    expect(customer[0].id).toBe(orders[0].customer_id); expect(orders[1].customer_id).toBe(customer[0].id);
+    expect(customer[0].email).toBeUndefined(); expect(orders[0].total).toBe(5); expect(result[1].rows).toBe(2);
+  });
+  it('retains blank/null values and shifts dates consistently through a leap day', () => {
+    const source = parseDataset('dates.json', '[{"date":"2024-02-28","id":null},{"date":"2024-03-01","id":""}]');
+    const rows = JSON.parse(maskDatasets([source], { date: { mode: 'date', group: '' }, id: { mode: 'alias', group: 'id' } }, 1)[0].text);
+    expect(rows[0]).toEqual({ date: '2024-02-29', id: null }); expect(rows[1]).toEqual({ date: '2024-03-02', id: '' });
+  });
+  it('rejects invalid dates and dates without explicit time zones', () => {
+    const rules = { date: { mode: 'date' as const, group: '' } };
+    for (const value of ['2025-02-30', 'not a date', '2026-01-01T10:00:00']) expect(() => maskDatasets([parseDataset('a.json', JSON.stringify([{ date: value }]))], rules, 1)).toThrow();
+  });
+  it('rejects duplicate CSV headers and invalid JSON row structures', () => {
+    expect(() => parseDataset('a.csv', 'id,id\n1,2')).toThrow(/duplicate/);
+    expect(() => parseDataset('a.json', '[1,2]')).toThrow(/row objects/);
+  });
+  it('escapes spreadsheet formulas on CSV export', () => {
+    expect(maskDatasets([parseDataset('a.csv', 'value\n=1+2')], {}, 0)[0].text).toContain("'=1+2");
+  });
+});
diff --git a/src/lib/dataset-mask.ts b/src/lib/dataset-mask.ts
new file mode 100644
index 0000000..bec624b
--- /dev/null
+++ b/src/lib/dataset-mask.ts
@@ -0,0 +1,68 @@
+import Papa from 'papaparse';
+
+export type Dataset = { name: string; format: 'csv' | 'json'; rows: Record<string, unknown>[]; columns: string[] };
+export type ColumnRule = { mode: 'keep' | 'remove' | 'mask' | 'alias' | 'date' | 'band'; group: string };
+export type DatasetResult = { name: string; text: string; rows: number; columns: number };
+
+export function parseDataset(name: string, text: string): Dataset {
+  let rows: Record<string, unknown>[];
+  let columns: string[];
+  const format = name.toLowerCase().endsWith('.json') ? 'json' : 'csv';
+  if (format === 'json') {
+    const data: unknown = JSON.parse(text);
+    if (!Array.isArray(data) || data.some(row => !row || typeof row !== 'object' || Array.isArray(row))) throw new Error('JSON must be an array of row objects.');
+    rows = data as Record<string, unknown>[];
+    columns = [...new Set(rows.flatMap(row => Object.keys(row)))];
+  } else {
+    const parsed = Papa.parse<Record<string, unknown>>(text, { header: true, skipEmptyLines: 'greedy', dynamicTyping: false });
+    const parseError = parsed.errors.find(error => error.code !== 'UndetectableDelimiter');
+    if (parseError) throw new Error(`CSV could not be read: ${parseError.message}`);
+    const renamed = (parsed.meta as typeof parsed.meta & { renamedHeaders?: Record<string,string> }).renamedHeaders;
+    if (renamed && Object.keys(renamed).length) throw new Error('CSV has duplicate column names. Rename them before masking.');
+    rows = parsed.data; columns = parsed.meta.fields ?? [];
+  }
+  if (!rows.length || !columns.length) throw new Error('The dataset needs a header and at least one row.');
+  if (rows.length > 50000 || columns.length > 200) throw new Error('Use up to 50,000 rows and 200 columns per file.');
+  return { name, format, rows, columns };
+}
+
+export function maskDatasets(datasets: Dataset[], rules: Record<string, ColumnRule>, shiftDays: number): DatasetResult[] {
+  if (!Number.isInteger(shiftDays) || Math.abs(shiftDays) > 36500) throw new Error('Date shift must be a whole number between -36500 and 36500 days.');
+  const maps = new Map<string, Map<string, string>>();
+  let totalRows = 0;
+  const results = datasets.map((dataset, fileIndex) => {
+    totalRows += dataset.rows.length;
+    if (totalRows > 100000) throw new Error('Use up to 100,000 rows across the batch.');
+    const columns = dataset.columns.filter(column => rules[column]?.mode !== 'remove');
+    if (!columns.length) throw new Error(`File ${fileIndex + 1}: at least one column must remain.`);
+    const rows = dataset.rows.map((row, rowIndex) => Object.fromEntries(columns.filter(column => Object.hasOwn(row, column)).map(column => {
+      const value = row[column]; const rule = rules[column] ?? { mode: 'keep', group: column };
+      if (rule.mode === 'keep' || value === null || value === '') return [column, value];
+      if (rule.mode === 'mask') return [column, '[REDACTED]'];
+      if (rule.mode === 'alias') {
+        const group = rule.group.trim() || column;
+        let mapping = maps.get(group); if (!mapping) { mapping = new Map(); maps.set(group, mapping); }
+        const key = typeof value === 'object' ? JSON.stringify(value) : String(value);
+        if (!mapping.has(key)) mapping.set(key, `VALUE_${String(mapping.size + 1).padStart(4, '0')}`);
+        return [column, mapping.get(key)];
+      }
+      const fail = (message: string): never => { throw new Error(`File ${fileIndex + 1}, row ${rowIndex + 1}, column "${column}": ${message}`); };
+      if (rule.mode === 'band') {
+        if (!['number', 'string'].includes(typeof value) || String(value).trim() === '' || !Number.isFinite(Number(value))) return fail('10-value bands require numeric values.');
+        const low = Math.floor(Number(value) / 10) * 10;
+        return [column, `${low}–${low + 9}`];
+      }
+      if (rule.mode === 'date') {
+        if (typeof value !== 'string' || !/^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?(?:Z|[+-]\d{2}:\d{2}))?$/.test(value)) return fail('use ISO dates (YYYY-MM-DD) or timestamps with an explicit time zone.');
+        const time = new Date(value.length === 10 ? `${value}T00:00:00Z` : value);
+        const datePart = value.slice(0,10); const day = new Date(`${datePart}T00:00:00Z`);
+        if (!Number.isFinite(time.getTime()) || !Number.isFinite(day.getTime()) || day.toISOString().slice(0,10) !== datePart) return fail('invalid ISO date.');
+        time.setUTCDate(time.getUTCDate() + shiftDays);
+        return [column, value.length === 10 ? time.toISOString().slice(0, 10) : time.toISOString()];
+      }
+      return [column, value];
+    })));
+    return { name: `dataset-${fileIndex + 1}.${dataset.format}`, text: dataset.format === 'csv' ? Papa.unparse({ fields: columns, data: rows }, { escapeFormulae: true }) : JSON.stringify(rows, null, 2), rows: rows.length, columns: columns.length };
+  });
+  return results;
+}
diff --git a/src/lib/diff-redaction.ts b/src/lib/diff-redaction.ts
new file mode 100644
index 0000000..f3c8ead
--- /dev/null
+++ b/src/lib/diff-redaction.ts
@@ -0,0 +1,54 @@
+const SECRET_KEY = /password|passwd|(?:^|_)pwd(?:$|_)|secret|token|authorization|cookie|api[-_]?key|private[-_]?key|session[-_]?id|credential/i;
+export function sensitiveDiffKey(key: string) { return SECRET_KEY.test(key); }
+
+/** Per-comparison aliases preserve equality, without exporting originals or an alias map. */
+export function createDiffRedactor(literals: string[]) {
+  const aliases = new Map<string,string>(); let count = 0;
+  const hide = (value: string) => {
+    if (!aliases.has(value)) aliases.set(value,`[PRIVATE_${++count}]`);
+    return aliases.get(value)! + (value.match(/\r\n|\r|\n/g) ?? []).map(eol => eol + '[PRIVATE_LINE]').join('');
+  };
+  const text = (value: string): string => {
+    const source = value.replace(/\[PRIVATE_(\d+)\]/g,'[LITERAL_PRIVATE_$1]');
+    let output = source;
+    // Use source offsets for valid JSON/JSONC, including entire secret objects/arrays.
+    // Replacing from the end retains source positions, and hide() retains line endings.
+    if (/^\s*[\[{]/.test(source) && source.length <= 1024 * 1024) {
+      try {
+        const errors: ParseError[] = []; const tree = parseTree(source.replace(/^\uFEFF/,' '),errors); const ranges: { from: number; to: number }[] = []; let budget = 0;
+        const scan = (node: Node,depth: number) => {
+          if (depth > 50 || ++budget > 50000) throw new Error('Masking budget reached');
+          if (node.type === 'object') for (const property of node.children ?? []) { const [key,child] = property.children!; if (SECRET_KEY.test(String(key.value))) ranges.push({ from: child.offset,to: child.offset + child.length }); else scan(child,depth + 1); }
+          else if (node.type === 'array') for (const child of node.children ?? []) scan(child,depth + 1);
+        };
+        if (tree && !errors.length) { scan(tree,0); for (const range of ranges.sort((a,b) => b.from - a.from)) output = output.slice(0,range.from) + hide(source.slice(range.from,range.to)) + output.slice(range.to); }
+      } catch { /* Non-JSON text falls through to the literal and pattern rules. */ }
+    }
+    output = output.replace(/-----BEGIN [^-\r\n]*PRIVATE KEY-----[\s\S]*?-----END [^-\r\n]*PRIVATE KEY-----/g,hide);
+    output = output.replace(/((?:["']?)[\w.-]*(?:password|passwd|pwd|secret|token|api[_-]?key|private[_-]?key|authorization|cookie|credential)[\w.-]*["']?\s*[:=]\s*)("(?:\\.|[^"\\])*"|'[^']*'|[^\s,;\r\n]+)/gi,(_,prefix: string,secret: string) => prefix + hide(secret));
+    output = output.replace(/^(\s*(?:authorization|proxy-authorization|cookie|set-cookie)\s*:\s*)[^\r\n]*/gim,(_,prefix: string) => prefix + hide(_.slice(prefix.length)));
+    output = output.replace(/\b(Bearer|Basic)\s+[^\s"',;]+/gi,(_,scheme: string) => scheme + ' ' + hide(_));
+    output = output.replace(/\b(?:AKIA|ASIA)[A-Z0-9]{16}\b|\bgh[pousr]_[A-Za-z0-9]{20,}\b|\bgithub_pat_[A-Za-z0-9_]{20,}\b|\bsk-[A-Za-z0-9_-]{20,}\b/g,hide);
+    output = output.replace(/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b/gi,hide);
+    output = output.replace(/\b(?:\d{1,3}\.){3}\d{1,3}\b/g,hide);
+    output = output.replace(/\b[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\b/gi,hide);
+    output = output.replace(/([A-Z]:\\Users\\|\/Users\/|\/home\/)([^\s/\\]+)/gi,(_,prefix: string,name: string) => prefix + hide(name));
+    // Local URLs are never opened. Mask login information and every query value.
+    output = output.replace(/https?:\/\/[^\s<>"']+/gi,match => {
+      try { const url = new URL(match); if (url.username || url.password) { url.username = hide(url.username + ':' + url.password); url.password = ''; } for (const key of [...new Set(url.searchParams.keys())]) { const values = url.searchParams.getAll(key); url.searchParams.delete(key); values.forEach(value => url.searchParams.append(key,hide(value))); } url.hash = url.hash ? hide(url.hash) : ''; return url.toString(); } catch { return match; }
+    });
+    // Run literal rules last, so masking a field name cannot disable its automatic value rule.
+    for (const literal of [...new Set(literals)].filter(Boolean).sort((a,b) => b.length - a.length)) output = output.split(literal).join(hide(literal));
+    return output;
+  };
+  const value = (input: unknown,key = '',depth = 0): unknown => {
+    if (depth > 50) throw new Error('Use data with at most 50 nesting levels.');
+    if (SECRET_KEY.test(key)) return hide(JSON.stringify(input));
+    if (typeof input === 'string') return text(input);
+    if (Array.isArray(input)) return input.map(item => value(item,'',depth + 1));
+    if (input && typeof input === 'object') return Object.fromEntries(Object.entries(input).map(([name,item]) => [text(name),value(item,name,depth + 1)]));
+    return input;
+  };
+  return { text,value,hide,count: () => count };
+}
+import { parseTree,type ParseError,type Node } from 'jsonc-parser';
diff --git a/src/lib/diff-report.ts b/src/lib/diff-report.ts
new file mode 100644
index 0000000..c1f6071
--- /dev/null
+++ b/src/lib/diff-report.ts
@@ -0,0 +1,12 @@
+import type { CompareResult } from './file-diff-types';
+import { visibleDiffText } from './file-diff';
+
+const escapeHtml = (value: string) => visibleDiffText(value).replace(/[&<>"']/g,char => ({ '&': '&amp;','<': '&lt;','>': '&gt;','"': '&quot;',"'": '&#39;' })[char]!);
+/** Only selected, already-redacted fields are serialized. No source documents, filenames or alias maps. */
+export function buildDiffReport(result: CompareResult,ids: string[],includeContext: boolean) {
+  const selected = new Set(ids); const changes = result.entries.filter(entry => selected.has(entry.id));
+  if (!changes.length) throw new Error('Select at least one change for the report.');
+  const text = ['ToolStack — reviewed diff',`Mode: ${result.mode}`,`${changes.length} selected change blocks. Detected values masked; field names and other unrecognized text may remain.`,...(result.rules.length ? ['Comparison rules:',...result.rules.map(rule => '- ' + rule)] : []),'',...changes.flatMap(entry => [visibleDiffText(entry.path) + ` · ${entry.kind}${entry.ignored ? ' · ignored by rules' : ''}${entry.expected === false ? ' · unexpected' : entry.expected === true ? ' · expected' : ''}`,...entry.reasons,'LEFT',visibleDiffText(includeContext ? entry.contextBefore : entry.before) || '(absent)','RIGHT',visibleDiffText(includeContext ? entry.contextAfter : entry.after) || '(absent)',''])].join('\n');
+  const html = `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'"><title>Reviewed diff — ToolStack</title><style>body{font:15px system-ui,sans-serif;margin:2rem auto;padding:0 1rem;max-width:1100px;color:#1e293b;background:#f8fafc}h1{font-size:1.6rem}section{border:1px solid #cbd5e1;border-radius:10px;background:white;padding:1rem;margin:1rem 0}h2{font-size:1rem;overflow-wrap:anywhere}.pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem}pre{white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext;padding:.75rem;background:#f1f5f9;border-radius:6px}p,li{line-height:1.5}@media(max-width:650px){.pair{grid-template-columns:1fr}}@media(prefers-color-scheme:dark){body{background:#020617;color:#e2e8f0}section{background:#0f172a;border-color:#475569}pre{background:#1e293b}}</style></head><body><h1>Reviewed diff</h1><p>${changes.length} selected change blocks · ${escapeHtml(result.mode)} · processed locally with ToolStack</p><p>Detected values are masked. Field names, paths and unrecognized information may remain. This is a reviewed excerpt, not a complete comparison or a patch.</p>${result.rules.length ? `<details><summary>Comparison rules</summary><ul>${result.rules.map(rule => `<li>${escapeHtml(rule)}</li>`).join('')}</ul></details>` : ''}${changes.map(entry => `<section><h2>${escapeHtml(entry.path)} · ${entry.kind}${entry.ignored ? ' · ignored by rules' : ''}${entry.expected === false ? ' · unexpected' : entry.expected === true ? ' · expected' : ''}</h2>${entry.reasons.map(reason => `<p>${escapeHtml(reason)}</p>`).join('')}<div class="pair"><div><strong>Left</strong><pre>${escapeHtml(includeContext ? entry.contextBefore : entry.before) || '(absent)'}</pre></div><div><strong>Right</strong><pre>${escapeHtml(includeContext ? entry.contextAfter : entry.after) || '(absent)'}</pre></div></div></section>`).join('')}</body></html>`;
+  return { text,html };
+}
diff --git a/src/lib/file-diff-types.ts b/src/lib/file-diff-types.ts
new file mode 100644
index 0000000..74afe3e
--- /dev/null
+++ b/src/lib/file-diff-types.ts
@@ -0,0 +1,40 @@
+export type CompareMode = 'text' | 'json' | 'csv' | 'env';
+export type CompareOptions = {
+  mode: CompareMode; whitespace: 'exact' | 'trim' | 'all'; ignoreCase: boolean; ignoreEol: boolean;
+  timestamps: boolean; uuids: boolean; ignoreLiterals: string[];
+  ignorePaths: string[]; expectedPaths: string[]; keys: string[]; numericTolerance: number;
+  redactions: string[]; context: number;
+};
+export const DEFAULT_COMPARE: CompareOptions = { mode: 'text',whitespace: 'exact',ignoreCase: false,ignoreEol: false,timestamps: false,uuids: false,ignoreLiterals: [],ignorePaths: [],expectedPaths: [],keys: [],numericTolerance: 0,redactions: [],context: 1 };
+export type CompareEntry = {
+  id: string; path: string; kind: 'added' | 'removed' | 'changed' | 'moved'; ignored: boolean; expected: boolean | null;
+  before: string; after: string; contextBefore: string; contextAfter: string; lineA?: number; lineB?: number; reasons: string[];
+};
+export type TextInfo = { characters: number; lines: number; lf: number; crlf: number; cr: number; finalNewline: boolean; bom: boolean; unusual: { code: string; name: string; count: number; line: number; column: number }[] };
+export type CompareResult = {
+  entries: CompareEntry[]; meaningful: number; ignored: number; expected: number; unexpected: number; reordered: number;
+  left: string; right: string; exactLeft: string; exactRight: string; infoA: TextInfo; infoB: TextInfo;
+  warnings: string[]; rules: string[]; maskedValues: number; mode: CompareMode;
+};
+export const MAX_DIFF_BYTES = 1024 * 1024;
+export function checkDiffInput(text: string) {
+  if (text.length > MAX_DIFF_BYTES || new TextEncoder().encode(text).length > MAX_DIFF_BYTES) throw new Error('Use at most 1 MB of text per side.');
+  const lines = (text.match(/\r\n|\r|\n/g)?.length ?? 0) + (text && !/[\r\n]$/.test(text) ? 1 : 0);
+  if (lines > 20000) throw new Error('Use at most 20,000 lines per side.');
+  if (text.includes('\0')) throw new Error('This looks like binary data. Compare text files, or decode a UTF-16 file with a BOM.');
+}
+
+export function decodeDiffFile(bytes: Uint8Array): string {
+  if (bytes.length > MAX_DIFF_BYTES) throw new Error('Use text files up to 1 MB each.');
+  const utf16 = bytes[0] === 0xff && bytes[1] === 0xfe ? 'utf-16le' : bytes[0] === 0xfe && bytes[1] === 0xff ? 'utf-16be' : 'utf-8';
+  let text: string;
+  try { text = new TextDecoder(utf16,{ fatal: true,ignoreBOM: true }).decode(bytes); } catch { throw new Error('Use UTF-8, or UTF-16 with a byte-order mark. This file could not be decoded losslessly.'); }
+  checkDiffInput(text); return text;
+}
+
+export function encodeDiffFile(text: string,encoding: 'utf-8' | 'utf-16le' | 'utf-16be') {
+  if (encoding === 'utf-8') return new TextEncoder().encode(text);
+  const bytes = new Uint8Array(text.length * 2); const view = new DataView(bytes.buffer);
+  for (let i = 0; i < text.length; i++) view.setUint16(i * 2,text.charCodeAt(i),encoding === 'utf-16le');
+  return bytes;
+}
diff --git a/src/lib/file-diff.test.ts b/src/lib/file-diff.test.ts
new file mode 100644
index 0000000..8bdc689
--- /dev/null
+++ b/src/lib/file-diff.test.ts
@@ -0,0 +1,98 @@
+import { describe,expect,it } from 'vitest';
+import { applyPatch } from 'diff';
+import { compareFiles,diffTextInfo,matchesDiffPath,rawDiffPatch,visibleDiffText } from './file-diff';
+import { DEFAULT_COMPARE,checkDiffInput,decodeDiffFile,encodeDiffFile,type CompareOptions } from './file-diff-types';
+import { buildDiffReport } from './diff-report';
+
+const options = (update: Partial<CompareOptions> = {}): CompareOptions => ({ ...DEFAULT_COMPARE,...update });
+describe('private file comparisons',() => {
+  it('compares original secrets before masking, preserving changed and unchanged values',() => {
+    const result = compareFiles('API_KEY=private-old-token\nPASSWORD=same-private-password\n','API_KEY=private-new-token\nPASSWORD=same-private-password\n',options({ mode: 'env' }));
+    expect(result.meaningful).toBe(1); expect(result.entries[0].path).toBe('/API_KEY'); expect(result.entries[0].before).not.toBe(result.entries[0].after);
+    for (const secret of ['private-old-token','private-new-token','same-private-password']) expect(JSON.stringify(result)).not.toContain(secret);
+    const raw = compareFiles('password=old-secret\n','password=new-secret\n',options()); expect(raw.meaningful).toBe(1); expect(raw.entries[0].before).not.toEqual(raw.entries[0].after);
+    const literalKey = compareFiles('password=must-remain-private\n','password=another-private-value\n',options({ redactions: ['password'] })); expect(JSON.stringify(literalKey)).not.toContain('must-remain-private'); expect(JSON.stringify(literalKey)).not.toContain('another-private-value');
+    const marker = compareFiles('person@example.invalid','[PRIVATE_1]',options()); expect(marker.left).not.toBe(marker.right);
+  });
+  it('sanitizes full multiline secrets before extracting changes or nearby context',() => {
+    const before = 'start\n-----BEGIN PRIVATE KEY-----\nVERY_PRIVATE_BASE64_ONE\nVERY_PRIVATE_BASE64_TWO\n-----END PRIVATE KEY-----\nvalue=old\n';
+    const after = before.replace('value=old','value=new'); const result = compareFiles(before,after,options({ context: 5 }));
+    const report = buildDiffReport(result,result.entries.map(entry => entry.id),true);
+    for (const value of [result.left,result.exactLeft,report.html,report.text]) { expect(value).not.toContain('VERY_PRIVATE'); expect(value).not.toContain('BEGIN PRIVATE KEY'); }
+    expect(result.entries[0].lineA).toBe(6); expect(report.text).toContain('value=old');
+    const normalized = compareFiles(before,after,options({ whitespace: 'all',ignoreCase: true }));
+    expect(normalized.left.toLowerCase()).not.toContain('very_private_base64'); expect(normalized.right.toLowerCase()).not.toContain('very_private_base64');
+  });
+  it('audits excluded differences and preserves exact source metadata',() => {
+    const result = compareFiles('time=2026-01-01T09:00:00Z name=Alice\r\n','time=2026-01-02T09:00:00Z name=alice\n',options({ timestamps: true,ignoreCase: true,ignoreEol: true }));
+    expect(result.meaningful).toBe(0); expect(result.ignored).toBe(1); expect(result.entries[0].ignored).toBe(true); expect(result.exactLeft).toContain('Alice'); expect(result.left).toBe(result.right);
+    expect(result.infoA.crlf).toBe(1); expect(result.infoB.lf).toBe(1); expect(result.rules).toHaveLength(3);
+  });
+  it('does not silently ignore whitespace or final newlines by default',() => {
+    expect(compareFiles('same\n','same',options()).meaningful).toBe(1);
+    expect(compareFiles('a b\n','ab\n',options()).meaningful).toBe(1);
+    const ignored = compareFiles('a b\n','ab\n',options({ whitespace: 'all' })); expect(ignored.meaningful).toBe(0); expect(ignored.ignored).toBe(1);
+    expect(compareFiles('a\u00a0b','ab',options({ whitespace: 'all' })).meaningful).toBe(1);
+  });
+  it('uses exact and composite record keys, surfaces real fields and counts reordered records separately',() => {
+    const before = '[{"region":"us","id":1,"value":"a"},{"region":"eu","id":1,"value":"b"}]';
+    const after = '[{"id":1,"region":"eu","value":"b"},{"id":1,"region":"us","value":"updated"}]';
+    const result = compareFiles(before,after,options({ mode: 'json',keys: ['region','id'],expectedPaths: ['/*/value'] }));
+    expect(result.meaningful).toBe(1); expect(result.reordered).toBe(1); expect(result.expected).toBe(1); expect(result.unexpected).toBe(0);
+    expect(compareFiles(before,after.replace('updated','a'),options({ mode: 'json',keys: ['region','id'] })).meaningful).toBe(0);
+    expect(() => compareFiles(before,after,options({ mode: 'json',keys: ['id'] }))).toThrow(/Duplicate record/);
+    expect(() => compareFiles(before,after,options({ mode: 'json',keys: ['missing'] }))).toThrow(/nonempty/);
+  });
+  it('compares CSV cells as exact strings and handles quoting, column order and leading zeros',() => {
+    const before = 'id,note,code\r\n1,"a,b",001\r\n2,hello,002\r\n';
+    const after = 'code,note,id\n002,hello,2\n001,"a,b",1\n';
+    const result = compareFiles(before,after,options({ mode: 'csv',keys: ['id'] })); expect(result.meaningful).toBe(0); expect(result.reordered).toBe(1);
+    expect(compareFiles(before,after.replace('001','1'),options({ mode: 'csv',keys: ['id'] })).meaningful).toBe(1);
+    expect(() => compareFiles('id,id\n1,2','id,id\n1,2',options({ mode: 'csv' }))).toThrow(/unique/);
+    expect(() => compareFiles('id,a\n1','id,a\n1,2',options({ mode: 'csv' }))).toThrow(/field count/);
+  });
+  it('checks expectations only after explicit ignore rules and supports numeric tolerances',() => {
+    const result = compareFiles('{"timeout":30,"auth":true,"stamp":"a","value":1.001}','{"timeout":60,"auth":false,"stamp":"b","value":1.002}',options({ mode: 'json',expectedPaths: ['/timeout'],ignorePaths: ['/stamp'],numericTolerance: 0.01 }));
+    expect(result.meaningful).toBe(2); expect(result.ignored).toBe(2); expect(result.expected).toBe(1); expect(result.unexpected).toBe(1); expect(result.entries.find(entry => entry.path === '/auth')?.expected).toBe(false);
+    expect(matchesDiffPath('/records/a/email','/records/*/email')).toBe(true); expect(matchesDiffPath('/records/a/b/email','/records/*/email')).toBe(false); expect(matchesDiffPath('/records/a/b/email','/records/**')).toBe(true);
+    expect(result.entries.find(entry => entry.path === '/stamp')?.expected).toBeNull();
+    expect(compareFiles('1','1.01',options({ mode: 'json',numericTolerance: 0.01 })).meaningful).toBe(0);
+    expect(compareFiles('1000000000','1000000000.0000001',options({ mode: 'json',numericTolerance: 1e-8 })).meaningful).toBe(1);
+  });
+  it('rejects ambiguous structured input and keeps __proto__ as data',() => {
+    expect(() => compareFiles('{"a":1,"a":2}','{}',options({ mode: 'json' }))).toThrow(/Duplicate JSON/);
+    expect(() => compareFiles('{"id":9007199254740993}','{}',options({ mode: 'json' }))).toThrow(/precision/);
+    expect(() => compareFiles('TOKEN=a\nTOKEN=b','TOKEN=b',options({ mode: 'env' }))).toThrow(/Duplicate/);
+    expect(() => compareFiles('KEY="one"junk"two"','KEY=one',options({ mode: 'env' }))).toThrow(/quoted/);
+    const result = compareFiles('{"__proto__":{"polluted":1}}','{"__proto__":{"polluted":2}}',options({ mode: 'json' })); expect(result.entries[0].path).toBe('/__proto__/polluted'); expect(Object.hasOwn({},'polluted')).toBe(false);
+  });
+  it('does not expose sensitive matching keys or manually marked values in reports',() => {
+    const result = compareFiles('[{"token":"secret-record-id","name":"Private Customer","status":1}]','[{"token":"secret-record-id","name":"Private Customer","status":2}]',options({ mode: 'json',keys: ['token'],redactions: ['Private Customer'] }));
+    const report = buildDiffReport(result,result.entries.map(entry => entry.id),true);
+    expect(report.html).not.toContain('secret-record-id'); expect(report.text).not.toContain('Private Customer'); expect(JSON.stringify(result)).not.toContain('secret-record-id');
+  });
+  it('masks secret containers and CSV credential columns in every review representation',() => {
+    const jsonA = '{"secret":{"first":"do-not-leak-one","second":["do-not-leak-two"]},"ok":1}';
+    for (const mode of ['text','json'] as const) { const result = compareFiles(jsonA,jsonA.replace('"ok":1','"ok":2'),options({ mode })); expect(JSON.stringify(result)).not.toContain('do-not-leak'); }
+    const csv = compareFiles('id,password\n1,unrecognized-credential-one\n','id,password\n1,unrecognized-credential-two\n',options({ mode: 'csv',keys: ['id'] }));
+    expect(JSON.stringify(csv)).not.toContain('unrecognized-credential'); expect(csv.meaningful).toBe(1); expect(csv.entries[0].before).not.toBe(csv.entries[0].after);
+  });
+  it('exports only selected changes, escapes active HTML and never embeds hidden originals',() => {
+    const result = compareFiles('first=one\nstable\nsecond=old\n','first=<img src=x onerror=alert(1)>\nstable\nsecond=NEW_PRIVATE\n',options({ redactions: ['NEW_PRIVATE'],context: 0 }));
+    expect(result.entries).toHaveLength(2); const report = buildDiffReport(result,[result.entries[0].id],false);
+    expect(report.html).toContain('&lt;img'); expect(report.html).not.toContain('<img'); expect(report.html).not.toContain('second='); expect(report.html).not.toContain('NEW_PRIVATE'); expect(report.html).toContain("default-src 'none'"); expect(report.html).not.toContain('<script');
+    expect(() => buildDiffReport(result,[],false)).toThrow(/Select/);
+  });
+  it('creates exact applicable patches including CRLF and missing final newlines',() => {
+    for (const [before,after] of [['one\r\ntwo\r\n','one\r\nchanged\r\n'],['same\n','same'],['','new\n']]) expect(applyPatch(before,rawDiffPatch(before,after))).toBe(after);
+  });
+  it('round-trips supported file encodings without silently replacing bad bytes',() => {
+    const text = '\uFEFFHello 🌎\r\n';
+    for (const encoding of ['utf-8','utf-16le','utf-16be'] as const) expect(decodeDiffFile(encodeDiffFile(text,encoding))).toBe(text);
+    expect(() => decodeDiffFile(new Uint8Array([0xc3,0x28]))).toThrow(/losslessly/); expect(() => checkDiffInput('a\0b')).toThrow(/binary/); expect(() => checkDiffInput('x'.repeat(1048577))).toThrow(/1 MB/);
+  });
+  it('explains hidden Unicode and line-ending differences without normalizing them away',() => {
+    const info = diffTextInfo('\uFEFFa\u200bb\u00a0\tа\r\n');
+    expect(info.bom).toBe(true); expect(info.crlf).toBe(1); expect(info.unusual.some(item => item.name === 'Cyrillic a')).toBe(true); expect(visibleDiffText('\u202E<script>')).toBe('⟦U+202E⟧<script>');
+  });
+});
diff --git a/src/lib/file-diff.ts b/src/lib/file-diff.ts
new file mode 100644
index 0000000..f507ceb
--- /dev/null
+++ b/src/lib/file-diff.ts
@@ -0,0 +1,225 @@
+import { diffArrays,createTwoFilesPatch } from 'diff';
+import Papa from 'papaparse';
+import { parseTree,printParseErrorCode,type ParseError,type Node } from 'jsonc-parser';
+import { checkDiffInput,type CompareEntry,type CompareOptions,type CompareResult,type TextInfo } from './file-diff-types';
+import { createDiffRedactor,sensitiveDiffKey } from './diff-redaction';
+
+const STAMP = /\b\d{4}-\d{2}-\d{2}[T ][0-2]\d:[0-5]\d:[0-5]\d(?:\.\d+)?(?:Z|[+-]\d{2}:?\d{2})?\b/g;
+const UUID = /\b[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\b/gi;
+const pointer = (value: string) => value.replace(/~/g,'~0').replace(/\//g,'~1');
+const pathOf = (parts: string[]) => '/' + parts.map(pointer).join('/');
+const own = (value: unknown): value is Record<string,unknown> => !!value && typeof value === 'object' && !Array.isArray(value);
+export function matchesDiffPath(path: string,pattern: string): boolean {
+  const source = pattern.startsWith('/') ? pattern : '/' + pattern;
+  const expression = source.split('**').map(part => part.split('*').map(value => value.replace(/[.*+?^${}()|[\]\\]/g,'\\$&')).join('[^/]*')).join('.*');
+  return new RegExp(`^${expression}$`).test(path);
+}
+function validateOptions(options: CompareOptions) {
+  if (!['text','json','csv','env'].includes(options.mode)) throw new Error('Choose a supported comparison mode.');
+  if (!Number.isFinite(options.numericTolerance) || options.numericTolerance < 0) throw new Error('Numeric tolerance must be zero or a positive finite number.');
+  for (const values of [options.ignoreLiterals,options.ignorePaths,options.expectedPaths,options.keys,options.redactions]) if (values.length > 100 || values.some(value => value.length > 1000)) throw new Error('Use at most 100 rules per list, up to 1,000 characters each.');
+  if (!Number.isInteger(options.context) || options.context < 0 || options.context > 5) throw new Error('Context must be between 0 and 5 lines.');
+  if (options.mode === 'text' && (options.ignorePaths.length || options.expectedPaths.length || options.keys.length)) throw new Error('Field rules and record keys require JSON, CSV or .env mode.');
+}
+type Line = { raw: string; content: string; eol: string; index: number; normalized: string };
+function linesOf(text: string): Line[] {
+  const lines: Line[] = []; const regex = /([^\r\n]*)(\r\n|\r|\n|$)/g;
+  let match: RegExpExecArray | null;
+  while ((match = regex.exec(text)) && match[0]) lines.push({ raw: match[0],content: match[1],eol: match[2],index: lines.length,normalized: match[0] });
+  return lines;
+}
+function normalize(value: string,options: CompareOptions) {
+  let output = value;
+  if (options.timestamps) output = output.replace(STAMP,'[TIMESTAMP]');
+  if (options.uuids) output = output.replace(UUID,'[UUID]');
+  for (const literal of [...options.ignoreLiterals].filter(Boolean).sort((a,b) => b.length - a.length)) output = output.split(literal).join('[IGNORED]');
+  if (options.whitespace === 'trim') output = output.replace(/^[ \t]+|[ \t]+$/g,'');
+  if (options.whitespace === 'all') output = output.replace(/[ \t]+/g,'');
+  if (options.ignoreCase) output = output.toLowerCase();
+  return output;
+}
+export function diffTextInfo(text: string): TextInfo {
+  const names: Record<number,string> = { 9: 'Tab',0xa0: 'Non-breaking space',0x200b: 'Zero-width space',0x200c: 'Zero-width non-joiner',0x200d: 'Zero-width joiner',0x200e: 'Left-to-right mark',0x200f: 'Right-to-left mark',0x202a: 'Left-to-right embedding',0x202b: 'Right-to-left embedding',0x202c: 'Pop directional formatting',0x202d: 'Left-to-right override',0x202e: 'Right-to-left override',0x2060: 'Word joiner',0x2066: 'Left-to-right isolate',0x2067: 'Right-to-left isolate',0x2068: 'First-strong isolate',0x2069: 'Pop directional isolate',0xfeff: 'BOM / zero-width no-break space' };
+  const lookalikes: Record<string,string> = { 'а': 'Cyrillic a', 'е': 'Cyrillic e','о': 'Cyrillic o','р': 'Cyrillic p','с': 'Cyrillic c','х': 'Cyrillic x','А': 'Cyrillic A','В': 'Cyrillic B','Е': 'Cyrillic E','О': 'Cyrillic O','Р': 'Cyrillic P','С': 'Cyrillic C','Х': 'Cyrillic X','ο': 'Greek omicron' };
+  const found = new Map<number,TextInfo['unusual'][number]>(); let line = 1; let column = 1; let previousCR = false;
+  for (const char of text) {
+    const code = char.codePointAt(0)!; const name = names[code] || lookalikes[char] || (code < 32 && ![10,13].includes(code) ? 'Control character' : '');
+    if (name) { const item = found.get(code); if (item) item.count++; else found.set(code,{ code: `U+${code.toString(16).toUpperCase().padStart(4,'0')}`,name,count: 1,line,column }); }
+    if (char === '\r') { line++; column = 1; } else if (char === '\n') { if (!previousCR) line++; column = 1; } else column++;
+    previousCR = char === '\r';
+  }
+  const crlf = (text.match(/\r\n/g) ?? []).length;
+  return { characters: text.length,lines: linesOf(text).length,lf: (text.match(/\n/g) ?? []).length - crlf,crlf,cr: (text.match(/\r/g) ?? []).length - crlf,finalNewline: /[\r\n]$/.test(text),bom: text.startsWith('\uFEFF'),unusual: [...found.values()] };
+}
+export function visibleDiffText(value: string) {
+  return value.replace(/[\u0000-\u0009\u000b-\u001f\u007f\u00a0\u200b-\u200f\u202a-\u202e\u2060\u2066-\u2069\ufeff]/g,char => char === '\t' ? '⇥' : char === '\r' ? '⟦CR⟧' : `⟦U+${char.charCodeAt(0).toString(16).toUpperCase().padStart(4,'0')}⟧`);
+}
+function parseJson(text: string) {
+  const errors: ParseError[] = []; const source = text.replace(/^\uFEFF/,'');
+  const tree = parseTree(source,errors,{ disallowComments: true,allowTrailingComma: false,allowEmptyContent: false });
+  if (errors.length || !tree) throw new Error(`Invalid JSON: ${errors.length ? printParseErrorCode(errors[0].error) : 'empty input'}.`);
+  let nodes = 0;
+  const inspect = (node: Node,depth: number) => {
+    if (depth > 50 || ++nodes > 50000) throw new Error('Use JSON with at most 50 nesting levels and 50,000 values.');
+    if (node.type === 'object') { const keys = new Set<string>(); for (const property of node.children ?? []) { const key = property.children![0].value as string; if (keys.has(key)) throw new Error('Duplicate JSON object keys are ambiguous. Remove them before comparing.'); keys.add(key); inspect(property.children![1],depth + 1); } }
+    else if (node.type === 'array') for (const item of node.children ?? []) inspect(item,depth + 1);
+    else if (node.type === 'number' && (!Number.isFinite(node.value) || (Number.isInteger(node.value) && !Number.isSafeInteger(node.value)))) throw new Error('A number exceeds safe JavaScript precision. Use Text mode to compare the exact numeric text.');
+  };
+  inspect(tree,0); return JSON.parse(source) as unknown;
+}
+function parseEnv(text: string) {
+  const result: Record<string,string> = Object.create(null);
+  for (const [index,line] of text.replace(/^\uFEFF/,'').split(/\r\n|\r|\n/).entries()) {
+    if (!line.trim() || /^\s*#/.test(line)) continue;
+    const match = /^\s*(?:export\s+)?([A-Za-z_][A-Za-z0-9_]*)\s*=\s*(.*?)\s*$/.exec(line);
+    if (!match) throw new Error(`.env line ${index + 1}: use one KEY=value per line. Shell expressions are never evaluated.`);
+    if (Object.hasOwn(result,match[1])) throw new Error(`Duplicate .env key on line ${index + 1}.`);
+    let value = match[2];
+    if (value.startsWith('"') || value.startsWith("'")) {
+      const quote = value[0]; let end = -1; let escaped = false;
+      for (let i = 1; i < value.length; i++) { if (value[i] === quote && !escaped) { end = i; break; } escaped = value[i] === '\\' && !escaped; }
+      if (end < 1 || !/^\s*(?:#.*)?$/.test(value.slice(end + 1))) throw new Error(`.env line ${index + 1}: close the quoted value on the same line.`); value = value.slice(1,end);
+    }
+    else value = value.replace(/\s+#.*$/,'').trimEnd();
+    result[match[1]] = value;
+  }
+  return result;
+}
+function parseCsv(text: string) {
+  const parsed = Papa.parse<string[]>(text.replace(/^\uFEFF/,''),{ skipEmptyLines: true });
+  if (parsed.errors.some(error => error.code !== 'UndetectableDelimiter')) throw new Error('Invalid CSV: check quoting and delimiters.');
+  const [headers,...rows] = parsed.data;
+  if (!headers?.length || headers.some(header => !header.trim()) || new Set(headers).size !== headers.length) throw new Error('CSV needs a header row with unique, nonempty column names.');
+  if (rows.length > 10000 || headers.length > 200) throw new Error('Use at most 10,000 CSV records and 200 columns.');
+  return rows.map((row,index) => { if (row.length !== headers.length) throw new Error(`CSV record ${index + 1}: the field count differs from the header.`); return Object.fromEntries(headers.map((header,i) => [header,row[i]])); });
+}
+type Leaf = { parts: string[]; value: unknown; key: string };
+function flatten(value: unknown,keys: string[]) {
+  const leaves = new Map<string,Leaf>(); const orders = new Map<string,string[]>(); let budget = 0;
+  const visit = (item: unknown,parts: string[],key: string,depth: number) => {
+    if (depth > 50 || ++budget > 50000) throw new Error('Use at most 50 nesting levels and 50,000 values.');
+    if (Array.isArray(item) && item.length) {
+      const keyed = keys.length > 0 && item.some(own); const used = new Set<string>(); const order: string[] = [];
+      item.forEach((child,index) => {
+        let identity = String(index);
+        if (keyed) {
+          if (!own(child) || keys.some(name => !Object.hasOwn(child,name) || child[name] === null || !['string','number','boolean'].includes(typeof child[name]) || child[name] === '')) throw new Error('Every matched record needs nonempty scalar values for all selected key columns.');
+          identity = '@' + JSON.stringify(keys.map(name => child[name]));
+          if (used.has(identity)) throw new Error('Duplicate record keys are ambiguous. Choose a unique key or a combination of columns.');
+          used.add(identity); order.push(identity);
+        }
+        visit(child,[...parts,identity],key,depth + 1);
+      });
+      if (keyed) orders.set(pathOf(parts),order);
+    } else if (own(item) && Object.keys(item).length) for (const name of Object.keys(item).sort()) visit(item[name],[...parts,name],sensitiveDiffKey(key) ? key : name,depth + 1);
+    else leaves.set(pathOf(parts),{ parts,value: item,key });
+  };
+  visit(value,[],'',0); return { leaves,orders };
+}
+function movedCount(before: string[],after: string[]) {
+  const positions = new Map(after.map((value,i) => [value,i])); const sequence = before.filter(value => positions.has(value)).map(value => positions.get(value)!); const tails: number[] = [];
+  for (const value of sequence) { let lo = 0; let hi = tails.length; while (lo < hi) { const mid = (lo + hi) >>> 1; if (tails[mid] < value) lo = mid + 1; else hi = mid; } tails[lo] = value; }
+  return sequence.length - tails.length;
+}
+
+export function compareFiles(before: string,after: string,options: CompareOptions): CompareResult {
+  checkDiffInput(before); checkDiffInput(after); validateOptions(options);
+  const redactor = createDiffRedactor(options.redactions); let exactLeft = redactor.text(before); let exactRight = redactor.text(after);
+  const infoA = diffTextInfo(before); const infoB = diffTextInfo(after); const entries: CompareEntry[] = []; const warnings: string[] = []; const rules: string[] = [];
+  let left = ''; let right = ''; let reordered = 0;
+  if (options.whitespace !== 'exact') rules.push(options.whitespace === 'trim' ? 'Ignore leading / trailing ASCII spaces and tabs' : 'Ignore all ASCII spaces and tabs');
+  if (options.ignoreCase) rules.push('Ignore string case'); if (options.ignoreEol) rules.push('Ignore line-ending style');
+  if (options.timestamps) rules.push('Ignore ISO timestamp-shaped text'); if (options.uuids) rules.push('Ignore UUID-shaped text');
+  if (options.ignoreLiterals.length) rules.push(`${options.ignoreLiterals.length} literal comparison rules`);
+  if (options.ignorePaths.length) rules.push(`${options.ignorePaths.length} field-path ignore rules`);
+  if (options.numericTolerance) rules.push(`Numeric absolute tolerance: ${options.numericTolerance}`);
+  const expect = (path: string) => options.expectedPaths.length ? options.expectedPaths.some(pattern => matchesDiffPath(path,pattern)) : null;
+  const push = (entry: Omit<CompareEntry,'id'>) => { if (entries.length >= 5000) throw new Error('More than 5,000 change blocks. Compare smaller sections. No partial result was produced.'); entries.push({ id: `change-${entries.length + 1}`,...entry }); };
+  if (options.mode === 'text') {
+    const a = linesOf(before); const b = linesOf(after);
+    for (const line of [...a,...b]) line.normalized = normalize(line.content,options) + (options.ignoreEol && line.eol ? '\n' : line.eol);
+    const changes = diffArrays(a,b,{ comparator: (a,b) => a.normalized === b.normalized,timeout: 2000,maxEditLength: 20000 });
+    if (!changes) throw new Error('Exact comparison exceeded the processing limit. Compare smaller sections or enable a relevant ignore rule.');
+    const safeA = linesOf(exactLeft); const safeB = linesOf(exactRight);
+    const previewA: string[] = []; const previewB: string[] = [];
+    const safeNormalized = (line: Line) => normalize(line.content,options) + (options.ignoreEol && line.eol ? '\n' : line.eol);
+    const extract = (safe: Line[],start: number,count: number) => safe.slice(start,start + count).map(line => line.raw).join('');
+    const context = (safe: Line[],start: number,count: number) => extract(safe,Math.max(0,start - options.context),Math.min(safe.length,start + count + options.context) - Math.max(0,start - options.context));
+    let ai = 0; let bi = 0;
+    for (let i = 0; i < changes.length; i++) {
+      const part = changes[i];
+      if (!part.added && !part.removed) {
+        for (let j = 0; j < part.count; j++) {
+          if (a[ai].raw !== b[bi].raw) push({ path: `line:${ai + 1}`,kind: 'changed',ignored: true,expected: null,before: extract(safeA,ai,1),after: extract(safeB,bi,1),contextBefore: context(safeA,ai,1),contextAfter: context(safeB,bi,1),lineA: ai + 1,lineB: bi + 1,reasons: ['Equal under the active comparison rules'] });
+          // Use a common masked representative for equal comparison tokens. Mask first:
+          // normalization can otherwise alter a private-key delimiter and defeat detection.
+          const preview = safeNormalized(safeA[ai]); previewA.push(preview); previewB.push(preview);
+          ai++; bi++;
+        }
+      } else {
+        const startA = ai; const startB = bi;
+        while (i < changes.length && (changes[i].added || changes[i].removed)) { if (changes[i].removed) ai += changes[i].count; else bi += changes[i].count; i++; } i--;
+        previewA.push(...safeA.slice(startA,ai).map(safeNormalized)); previewB.push(...safeB.slice(startB,bi).map(safeNormalized));
+        push({ path: `line:${startA + 1}`,kind: ai === startA ? 'added' : bi === startB ? 'removed' : 'changed',ignored: false,expected: null,before: extract(safeA,startA,ai - startA),after: extract(safeB,startB,bi - startB),contextBefore: context(safeA,startA,ai - startA),contextAfter: context(safeB,startB,bi - startB),lineA: startA + 1,lineB: startB + 1,reasons: [] });
+      }
+    }
+    // Exact, unique moved blocks only. Repeated or edited blocks are left as ordinary changes.
+    const deleted = new Map<string,CompareEntry[]>(); const added = new Map<string,CompareEntry[]>();
+    for (const entry of entries) if (!entry.ignored && ['added','removed'].includes(entry.kind)) { const content = entry.kind === 'removed' ? entry.before : entry.after; if (content.replace(/\s/g,'').length < 12) continue; const map = entry.kind === 'removed' ? deleted : added; map.set(content,[...(map.get(content) ?? []),entry]); }
+    for (const [content,removed] of deleted) { const inserted = added.get(content); if (removed.length === 1 && inserted?.length === 1) { reordered++; removed[0].kind = 'moved'; inserted[0].kind = 'moved'; removed[0].reasons.push(`Exact block moved to right line ${inserted[0].lineB}`); inserted[0].reasons.push(`Exact block moved from left line ${removed[0].lineA}`); } }
+    // Comparison previews are derived, never written back to source editors or downloads.
+    left = previewA.join(''); right = previewB.join('');
+    if (options.numericTolerance) warnings.push('Numeric tolerance applies to JSON numbers only.');
+  } else {
+    const parse = options.mode === 'json' ? parseJson : options.mode === 'csv' ? parseCsv : parseEnv;
+    const parsedA = parse(before); const parsedB = parse(after);
+    const maskStructured = (parsed: unknown,source: string) => {
+      const safe = redactor.value(parsed);
+      if (options.mode === 'json') return JSON.stringify(safe,null,2);
+      if (options.mode === 'env') return Object.entries(safe as Record<string,unknown>).map(([key,value]) => `${key}=${JSON.stringify(value)}`).join('\n');
+      const headers = Papa.parse<string[]>(source.replace(/^\uFEFF/,''),{ preview: 1 }).data[0];
+      return Papa.unparse({ fields: headers.map(header => redactor.text(header)),data: (safe as Record<string,unknown>[]).map(row => headers.map(header => row[redactor.text(header)] ?? '')) });
+    };
+    exactLeft = maskStructured(parsedA,before); exactRight = maskStructured(parsedB,after);
+    const a = flatten(parsedA,options.keys); const b = flatten(parsedB,options.keys);
+    if (options.mode === 'csv') {
+      const columnsA = Object.keys((parsedA as Record<string,unknown>[])[0] ?? {}); const columnsB = Object.keys((parsedB as Record<string,unknown>[])[0] ?? {});
+      // Header-only tables still need structural comparison.
+      const headers = (text: string) => Papa.parse<string[]>(text.replace(/^\uFEFF/,''),{ preview: 1 }).data[0];
+      a.leaves.set('/$columns',{ parts: ['$columns'],key: '',value: columnsA.length ? columnsA.sort() : headers(before).sort() });
+      b.leaves.set('/$columns',{ parts: ['$columns'],key: '',value: columnsB.length ? columnsB.sort() : headers(after).sort() });
+      warnings.push('CSV cells are strings. Record keys are exact and case-sensitive.');
+    }
+    for (const [path,order] of a.orders) reordered += movedCount(order,b.orders.get(path) ?? []);
+    const displayPath = (leaf: Leaf) => pathOf(leaf.parts.map(part => part.startsWith('@') && options.keys.some(sensitiveDiffKey) ? redactor.hide(part) : redactor.text(part)));
+    const safeValue = (leaf: Leaf | undefined) => leaf ? JSON.stringify(redactor.value(leaf.value,leaf.key)) : '';
+    const previewA: string[] = []; const previewB: string[] = [];
+    for (const path of [...new Set([...a.leaves.keys(),...b.leaves.keys()])].sort()) {
+      const av = a.leaves.get(path); const bv = b.leaves.get(path); const sample = av ?? bv!; const label = displayPath(sample);
+      const as = safeValue(av); const bs = safeValue(bv);
+      const equal = !!av && !!bv && JSON.stringify(av.value) === JSON.stringify(bv.value);
+      const ignoredPath = options.ignorePaths.some(pattern => matchesDiffPath(path,pattern));
+      let ignored = ignoredPath; const reasons: string[] = ignoredPath ? ['Matched an ignored field path'] : [];
+      if (!equal && av && bv && typeof av.value === 'string' && typeof bv.value === 'string' && normalize(av.value,options) === normalize(bv.value,options)) { ignored = true; reasons.push('Strings equal under comparison rules'); }
+      if (!equal && av && bv && typeof av.value === 'number' && typeof bv.value === 'number' && options.numericTolerance > 0 && Math.abs(av.value - bv.value) <= options.numericTolerance + Math.min(options.numericTolerance * 1e-12,Number.EPSILON * Math.max(1,Math.abs(av.value),Math.abs(bv.value)) * 4)) { ignored = true; reasons.push('Within the numeric tolerance'); }
+      if (av && !ignored) previewA.push(`${label} = ${as}`); if (bv && !ignored) previewB.push(`${label} = ${bs}`);
+      if (!equal) push({ path: label,kind: !av ? 'added' : !bv ? 'removed' : 'changed',ignored,expected: ignored ? null : expect(path),before: as,after: bs,contextBefore: as,contextAfter: bs,reasons });
+    }
+    left = previewA.join('\n'); right = previewB.join('\n');
+    warnings.push('Structured review compares values; formatting, comments and object-key order are excluded.');
+    if (options.mode === 'env') warnings.push('.env values are literal, single-line strings. No expansion or escape evaluation.');
+    if (options.mode === 'csv' && !options.keys.length) warnings.push('Rows are matched by position. Choose record keys to match reordered rows.');
+  }
+  if (infoA.crlf !== infoB.crlf || infoA.lf !== infoB.lf || infoA.cr !== infoB.cr) warnings.push('Line-ending counts differ. Inspect file details for LF / CRLF / CR.');
+  if (infoA.finalNewline !== infoB.finalNewline) warnings.push('Only one source ends with a newline.');
+  if (infoA.bom !== infoB.bom) warnings.push('Only one source starts with a byte-order mark.');
+  const meaningful = entries.filter(entry => !entry.ignored);
+  return { entries,meaningful: meaningful.length,ignored: entries.length - meaningful.length,expected: meaningful.filter(entry => entry.expected === true).length,unexpected: meaningful.filter(entry => entry.expected === false).length,reordered,left,right,exactLeft,exactRight,infoA,infoB,warnings,rules,maskedValues: redactor.count(),mode: options.mode };
+}
+
+export function rawDiffPatch(before: string,after: string) {
+  checkDiffInput(before); checkDiffInput(after);
+  const patch = createTwoFilesPatch('original.txt','changed.txt',before,after,'','',{ context: 3,timeout: 2000,maxEditLength: 20000 });
+  if (patch === undefined) throw new Error('Patch creation exceeded the limit. Compare smaller sections.');
+  return patch;
+}
diff --git a/src/lib/file-diff.worker.ts b/src/lib/file-diff.worker.ts
new file mode 100644
index 0000000..f1620fd
--- /dev/null
+++ b/src/lib/file-diff.worker.ts
@@ -0,0 +1,2 @@
+import { compareFiles,rawDiffPatch } from './file-diff';
+self.onmessage = event => { try { const { before,after,options,action } = event.data; self.postMessage(action === 'patch' ? { patch: rawDiffPatch(before,after) } : { result: compareFiles(before,after,options) }); } catch (error) { self.postMessage({ error: (error as Error).message }); } };
diff --git a/src/lib/json-inference.test.ts b/src/lib/json-inference.test.ts
new file mode 100644
index 0000000..569e70f
--- /dev/null
+++ b/src/lib/json-inference.test.ts
@@ -0,0 +1,21 @@
+import { describe,expect,it } from 'vitest';
+import ts from 'typescript';
+import { inferJson } from './json-inference';
+describe('JSON sample inference',() => {
+  it('merges array members, optional fields and mixed types without emitting values',() => {
+    const result = inferJson('[{"id":1,"private":"secret-value","items":[true]},{"id":2,"items":[null,7]}]','Example');
+    expect(result.typescript).toContain('"private"?: string'); expect(result.typescript).toContain('Array<boolean | null | number>'); expect(result.typescript).not.toContain('secret-value');
+    const schema = JSON.parse(result.schema); expect(schema.items.required).toEqual(['id','items']); expect(schema.items.properties.id.type).toBe('integer');
+  });
+  it.each(['{}','[]','null','[1,"a",null]','{"bad-key":{"nested":[{}, {"v":true}]}}'])('produces syntactically valid TypeScript for %s',input => {
+    const result = inferJson(input,'Fixture');
+    const output = ts.transpileModule(result.typescript,{ compilerOptions: { strict: true },reportDiagnostics: true });
+    expect(output.diagnostics).toEqual([]);
+    expect(JSON.parse(result.schema).$schema).toContain('2020-12');
+  });
+  it('rejects invalid or conflicting names and excessive depth',() => {
+    for (const name of ['bad-name','class','Array','Record']) expect(() => inferJson('{}',name)).toThrow(/name|Name/);
+    expect(() => inferJson('['.repeat(40) + '0' + ']'.repeat(40))).toThrow(/nesting/);
+    expect(() => inferJson('{')).toThrow();
+  });
+});
diff --git a/src/lib/json-inference.ts b/src/lib/json-inference.ts
new file mode 100644
index 0000000..c1fe773
--- /dev/null
+++ b/src/lib/json-inference.ts
@@ -0,0 +1,45 @@
+type Schema = { type?: string; properties?: Record<string, Schema>; required?: string[]; items?: Schema; anyOf?: Schema[] };
+
+function infer(values: unknown[], depth: number, budget: { nodes: number }): Schema {
+  if (depth > 35 || (budget.nodes += values.length) > 50000) throw new Error('Use a smaller sample (up to 50,000 values and 35 nesting levels).');
+  if (!values.length) return {};
+  const groups = new Map<string, unknown[]>();
+  for (const value of values) {
+    const kind = value === null ? 'null' : Array.isArray(value) ? 'array' : typeof value;
+    const items = groups.get(kind) ?? []; items.push(value); groups.set(kind, items);
+  }
+  const variants: Schema[] = [];
+  for (const [kind, samples] of [...groups].sort(([a],[b]) => a.localeCompare(b))) {
+    if (kind === 'object') {
+      const objects = samples as Record<string, unknown>[];
+      const keys = [...new Set(objects.flatMap(Object.keys))].sort();
+      variants.push({ type: 'object', properties: Object.fromEntries(keys.map(key => [key, infer(objects.filter(item => Object.hasOwn(item,key)).map(item => item[key]), depth + 1, budget)])), required: keys.filter(key => objects.every(item => Object.hasOwn(item,key))) });
+    } else if (kind === 'array') variants.push({ type: 'array', items: infer((samples as unknown[][]).flat(), depth + 1, budget) });
+    else variants.push({ type: kind === 'number' && samples.every(value => Number.isInteger(value)) ? 'integer' : kind });
+  }
+  return variants.length === 1 ? variants[0] : { anyOf: variants };
+}
+
+function renderType(schema: Schema, depth = 0): string {
+  if (schema.anyOf) return schema.anyOf.map(item => renderType(item, depth)).join(' | ');
+  if (schema.type === 'object') {
+    const entries = Object.entries(schema.properties ?? {});
+    if (!entries.length) return 'Record<string, unknown>';
+    const indentation = '  '.repeat(depth);
+    return `{\n${entries.map(([key, value]) => `${indentation}  ${JSON.stringify(key)}${schema.required?.includes(key) ? '' : '?'}: ${renderType(value, depth + 1)};`).join('\n')}\n${indentation}}`;
+  }
+  if (schema.type === 'array') return `Array<${renderType(schema.items ?? {}, depth)}>`;
+  return schema.type === 'integer' ? 'number' : schema.type ?? 'unknown';
+}
+
+export function inferJson(input: string, rootName = 'Root', style: 'interface' | 'type' = 'interface') {
+  if (input.length > 1024 * 1024) throw new Error('Use a JSON sample up to 1 MB.');
+  if (rootName.length > 100 || ['bigint','symbol'].includes(rootName)) throw new Error('Choose a TypeScript name up to 100 characters, such as ApiResponse.');
+  if (['Array', 'Record'].includes(rootName)) throw new Error('Choose a name other than Array or Record, such as ApiResponse.');
+  if (!/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(rootName) || /^(?:string|number|boolean|null|undefined|any|unknown|never|void|object|interface|type|class|enum|const|let|var|function|default|export|import|extends|implements|new|return|this|typeof|keyof|infer|true|false|switch|case|delete|do|else|for|if|in|instanceof|super|throw|try|while|with|yield|await|break|catch|continue|debugger|finally)$/.test(rootName)) throw new Error('Choose a valid TypeScript name, such as ApiResponse.');
+  const parsed: unknown = JSON.parse(input);
+  const schema = infer([parsed], 0, { nodes: 0 });
+  const definition = renderType(schema);
+  const typescript = style === 'interface' && schema.type === 'object' && Object.keys(schema.properties ?? {}).length ? `export interface ${rootName} ${definition}\n` : `export type ${rootName} = ${definition};\n`;
+  return { typescript, schema: JSON.stringify({ $schema: 'https://json-schema.org/draft/2020-12/schema', title: rootName, ...schema }, null, 2) };
+}
diff --git a/src/lib/local-files.ts b/src/lib/local-files.ts
new file mode 100644
index 0000000..5836a6b
--- /dev/null
+++ b/src/lib/local-files.ts
@@ -0,0 +1,14 @@
+export function downloadLocal(data: BlobPart, name: string, type = 'text/plain;charset=utf-8') {
+  const blob = new Blob([data], { type });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url; link.download = name; link.click();
+  window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+export function checkFileBatch(files: File[], maxFileMB = 5, maxTotalMB = 20, maxFiles = 10) {
+  if (!files.length) throw new Error('Choose at least one file.');
+  if (files.length > maxFiles) throw new Error(`Choose up to ${maxFiles} files at a time.`);
+  if (files.some(file => file.size > maxFileMB * 1024 * 1024)) throw new Error(`Each file must be ${maxFileMB} MB or smaller.`);
+  if (files.reduce((sum, file) => sum + file.size, 0) > maxTotalMB * 1024 * 1024) throw new Error(`The whole batch must be ${maxTotalMB} MB or smaller.`);
+}
diff --git a/src/lib/office-privacy.test.ts b/src/lib/office-privacy.test.ts
new file mode 100644
index 0000000..5fdebaf
--- /dev/null
+++ b/src/lib/office-privacy.test.ts
@@ -0,0 +1,43 @@
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
+import { DOMParser, XMLSerializer } from '@xmldom/xmldom';
+import JSZip from 'jszip';
+import { checkOfficeArchive, cleanOfficeProperties, inspectOffice, officeExample } from './office-privacy';
+
+beforeAll(() => { vi.stubGlobal('DOMParser', DOMParser); vi.stubGlobal('XMLSerializer', XMLSerializer); });
+afterAll(() => vi.unstubAllGlobals());
+
+describe('Office privacy inspection', () => {
+  it('reports metadata and recoverable tracked deletions separately', async () => {
+    const report = await inspectOffice(await officeExample(), 'docx');
+    expect(report.findings.some(item => item.category === 'Document properties' && item.preview === 'Alex Example')).toBe(true);
+    expect(report.findings.some(item => item.category === 'Tracked changes' && item.preview?.includes('Earlier private wording'))).toBe(true);
+  });
+  it('clears supported properties, reinspects output and preserves document content', async () => {
+    const original = await officeExample(); const output = await cleanOfficeProperties(original, 'docx');
+    expect(output.report.findings.some(item => item.category === 'Document properties')).toBe(false);
+    expect(output.report.findings.some(item => item.category === 'Tracked changes')).toBe(true);
+    const before = await JSZip.loadAsync(original); const after = await JSZip.loadAsync(await output.blob.arrayBuffer());
+    expect(await after.file('word/document.xml')!.async('string')).toBe(await before.file('word/document.xml')!.async('string'));
+    expect((await inspectOffice(original, 'docx')).findings.some(item => item.preview === 'Alex Example')).toBe(true);
+  });
+  it('reports hidden sheets and external references without following links', async () => {
+    const zip = new JSZip(); zip.file('[Content_Types].xml', '<Types/>');
+    zip.file('xl/workbook.xml', '<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><sheets><sheet name="Private" state="veryHidden"/></sheets></workbook>');
+    zip.file('xl/_rels/workbook.xml.rels', '<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship TargetMode="External" Target="https://example.invalid/private"/></Relationships>');
+    const report = await inspectOffice(await zip.generateAsync({ type: 'uint8array' }), 'xlsx');
+    expect(report.findings.map(item => item.category)).toEqual(expect.arrayContaining(['Hidden worksheets','External references']));
+  });
+  it('rejects encrypted entries and excessive declared expansion before reading their contents', async () => {
+    for (const encrypted of [true,false]) {
+      const data = await officeExample(); const view = new DataView(data.buffer, data.byteOffset, data.byteLength); const end = data.length - 22; const directory = view.getUint32(end + 16, true);
+      if (encrypted) view.setUint16(directory + 8, view.getUint16(directory + 8, true) | 1, true);
+      else view.setUint32(directory + 24, 100 * 1024 * 1024, true);
+      expect(() => checkOfficeArchive(data)).toThrow(encrypted ? /Encrypted/ : /expansion/);
+    }
+  });
+  it('rejects entity declarations and files with the wrong Office structure', async () => {
+    const zip = await JSZip.loadAsync(await officeExample()); zip.file('docProps/core.xml', '<!DOCTYPE x [<!ENTITY secret "hidden">]><x>&secret;</x>');
+    await expect(inspectOffice(await zip.generateAsync({ type: 'uint8array' }), 'docx')).rejects.toThrow(/entity/);
+    await expect(inspectOffice(await officeExample(), 'xlsx')).rejects.toThrow(/expected XLSX/);
+  });
+});
diff --git a/src/lib/office-privacy.ts b/src/lib/office-privacy.ts
new file mode 100644
index 0000000..cfc3d6d
--- /dev/null
+++ b/src/lib/office-privacy.ts
@@ -0,0 +1,114 @@
+import JSZip from 'jszip';
+
+export type OfficeKind = 'docx' | 'xlsx' | 'pptx';
+export type OfficeFinding = { category: string; part: string; detail: string; preview?: string };
+export type OfficeReport = { kind: OfficeKind; findings: OfficeFinding[]; checkedXml: number; metadataParts: number };
+const MAX_EXPANDED = 60 * 1024 * 1024;
+
+/** Check the ZIP directory before expanding user-controlled compressed data. ZIP64 is deliberately unsupported. */
+export function checkOfficeArchive(bytes: Uint8Array) {
+  if (bytes.byteLength < 22) throw new Error('The file is not a supported ZIP-based Office document.');
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  let end = -1;
+  for (let offset = bytes.byteLength - 22; offset >= Math.max(0, bytes.byteLength - 65557); offset--) {
+    if (view.getUint32(offset, true) === 0x06054b50 && offset + 22 + view.getUint16(offset + 20, true) === bytes.byteLength) { end = offset; break; }
+  }
+  if (end < 0 || view.getUint16(end + 4, true) || view.getUint16(end + 6, true)) throw new Error('Multi-volume or unsupported ZIP archive.');
+  const count = view.getUint16(end + 10, true); const start = view.getUint32(end + 16, true); const directorySize = view.getUint32(end + 12, true);
+  if (count === 65535 || count > 1500 || start === 0xffffffff || start + directorySize > end) throw new Error('Use a non-ZIP64 document with up to 1,500 archive entries.');
+  let offset = start; let total = 0; const names = new Set<string>();
+  for (let i = 0; i < count; i++) {
+    if (offset + 46 > end || view.getUint32(offset, true) !== 0x02014b50) throw new Error('The ZIP directory is damaged.');
+    const flags = view.getUint16(offset + 8, true); const expanded = view.getUint32(offset + 24, true); const nameLength = view.getUint16(offset + 28, true); const extra = view.getUint16(offset + 30, true); const comment = view.getUint16(offset + 32, true);
+    if (offset + 46 + nameLength + extra + comment > end) throw new Error('The ZIP directory is truncated.');
+    const name = new TextDecoder().decode(bytes.subarray(offset + 46, offset + 46 + nameLength));
+    if (flags & 1) throw new Error('Encrypted archive entries cannot be inspected.');
+    if (name.startsWith('/') || name.includes('\\') || name.split('/').includes('..') || name.includes('\0') || names.has(name)) throw new Error('The archive contains ambiguous or unsafe entry paths.');
+    names.add(name); total += expanded;
+    if (expanded > 20 * 1024 * 1024 || total > MAX_EXPANDED || (/\.xml$|\.rels$/i.test(name) && expanded > 5 * 1024 * 1024)) throw new Error('The document exceeds the expansion limits: 60 MB total, 20 MB per entry, 5 MB per XML part.');
+    offset += 46 + nameLength + extra + comment;
+  }
+  if (offset !== start + directorySize) throw new Error('The ZIP directory has an unsupported structure.');
+}
+
+function parseXml(text: string): XMLDocument {
+  if (/<!DOCTYPE|<!ENTITY/i.test(text)) throw new Error('DTD and entity declarations are not supported.');
+  const doc = new DOMParser().parseFromString(text, 'application/xml');
+  if (doc.getElementsByTagName('parsererror').length || doc.getElementsByTagNameNS('*','parsererror').length) throw new Error('An XML part could not be parsed.');
+  return doc;
+}
+const elements = (doc: Document | Element, name: string) => Array.from(doc.getElementsByTagNameNS('*', name));
+const attribute = (node: Element, name: string) => node.getAttribute(name) ?? Array.from(node.attributes).find(item => item.localName === name)?.value ?? '';
+const snippet = (nodes: Element[]) => nodes.map(node => node.textContent ?? '').join(' ').replace(/\s+/g,' ').trim().slice(0, 400);
+const PROPERTIES = ['docProps/core.xml','docProps/app.xml','docProps/custom.xml'];
+
+async function openOffice(bytes: Uint8Array, kind: OfficeKind) {
+  if (bytes.byteLength > 20 * 1024 * 1024) throw new Error('Use a document up to 20 MB.');
+  checkOfficeArchive(bytes);
+  const zip = await JSZip.loadAsync(bytes);
+  const main = { docx: 'word/document.xml', xlsx: 'xl/workbook.xml', pptx: 'ppt/presentation.xml' }[kind];
+  if (!zip.file('[Content_Types].xml') || !zip.file(main)) throw new Error(`This archive does not contain the expected ${kind.toUpperCase()} document structure.`);
+  return zip;
+}
+
+export async function inspectOffice(bytes: Uint8Array, kind: OfficeKind): Promise<OfficeReport> {
+  const zip = await openOffice(bytes, kind); const findings: OfficeFinding[] = []; let checkedXml = 0; let metadataParts = 0;
+  const add = (category: string, part: string, detail: string, preview?: string) => { if (findings.length < 400) findings.push({ category, part, detail, ...(preview ? { preview } : {}) }); };
+  for (const [path, entry] of Object.entries(zip.files)) {
+    if (entry.dir) continue;
+    if (/vbaProject\.bin$/i.test(path)) add('Embedded code', path, 'A macro project is embedded. Its code is not analyzed or removed.');
+    if (/(?:embeddings|activeX)\//i.test(path)) add('Embedded object', path, 'An embedded object is present. Its contents are not inspected.');
+    if (/docProps\/thumbnail\./i.test(path)) add('Thumbnail', path, 'A document preview image is embedded. It is not removed by the metadata cleaner.');
+    if (!/\.xml$|\.rels$/i.test(path)) continue;
+    const doc = parseXml(await entry.async('string')); checkedXml++;
+    if (PROPERTIES.includes(path)) {
+      metadataParts++;
+      const names = path.endsWith('/core.xml') ? ['title','subject','creator','lastModifiedBy','description','keywords','created','modified','lastPrinted','identifier','category','revision'] : path.endsWith('/app.xml') ? ['Company','Manager','Template','HyperlinkBase','TotalTime'] : [];
+      for (const name of names) { const nodes = elements(doc,name); const value = snippet(nodes); if (value) add('Document properties', path, name, value); }
+      if (path.endsWith('/custom.xml')) { const nodes = elements(doc,'property'); if (nodes.length) add('Custom properties', path, `${nodes.length} custom fields`, snippet(nodes)); }
+    }
+    if (/comments[^/]*\.xml$|\/comments\//i.test(path)) {
+      const nodes = elements(doc,'comment');
+      if (nodes.length || /\/ppt\/|^ppt\//.test(path)) add('Comments', path, `${nodes.length || 'Embedded'} comment records. Author names and comment contents remain after metadata cleaning.`, snippet(nodes));
+    }
+    const deleted = elements(doc,'del'); const inserted = elements(doc,'ins');
+    if (deleted.length || inserted.length) add('Tracked changes', path, `${deleted.length} deletion and ${inserted.length} insertion markers. Original deleted text may still be recoverable.`, snippet(deleted));
+    const hiddenText = elements(doc,'vanish'); if (hiddenText.length) add('Hidden text', path, `${hiddenText.length} hidden-text formatting markers. This is not a complete visibility analysis.`);
+    const hiddenSheets = elements(doc,'sheet').filter(node => ['hidden','veryHidden'].includes(attribute(node,'state')));
+    if (hiddenSheets.length) add('Hidden worksheets', path, `${hiddenSheets.length} hidden / very hidden sheets`, hiddenSheets.map(node => attribute(node,'name')).join(', '));
+    const hiddenRows = [...elements(doc,'row'), ...elements(doc,'col')].filter(node => ['true','1'].includes(attribute(node,'hidden')));
+    if (hiddenRows.length) add('Hidden rows / columns', path, `${hiddenRows.length} hidden row / column definitions. Their contents remain in the file.`);
+    if (/^ppt\/notesSlides\/notesSlide\d+\.xml$/.test(path)) { const value = snippet(elements(doc,'t')); if (value) add('Speaker notes', path, 'Speaker-note content is embedded.', value); }
+    const crops = elements(doc,'srcRect').filter(node => Array.from(node.attributes).some(attr => Number(attr.value) !== 0));
+    if (crops.length) add('Cropped image markers', path, `${crops.length} crop definitions. Original image pixels may still be embedded.`);
+    const links = elements(doc,'Relationship').filter(node => attribute(node,'TargetMode') === 'External');
+    if (links.length) add('External references', path, `${links.length} external links / relationships. They are listed without being opened.`, links.slice(0,5).map(node => attribute(node,'Target')).join('\n'));
+    if (elements(doc,'absPath').length) add('Local path', path, 'An Office file path is embedded. It is not removed by the metadata cleaner.', elements(doc,'absPath').map(node => attribute(node,'url')).join('\n'));
+  }
+  return { kind, findings, checkedXml, metadataParts };
+}
+
+export async function cleanOfficeProperties(bytes: Uint8Array, kind: OfficeKind): Promise<{ blob: Blob; report: OfficeReport }> {
+  const zip = await openOffice(bytes, kind);
+  for (const path of PROPERTIES) {
+    const entry = zip.file(path); if (!entry) continue;
+    const doc = parseXml(await entry.async('string'));
+    if (path.endsWith('/app.xml')) {
+      for (const name of ['Company','Manager','Template','HyperlinkBase','TotalTime']) for (const node of elements(doc,name)) node.parentNode?.removeChild(node);
+    } else { while (doc.documentElement.firstChild) doc.documentElement.removeChild(doc.documentElement.firstChild); }
+    zip.file(path, new XMLSerializer().serializeToString(doc));
+  }
+  const output = await zip.generateAsync({ type: 'uint8array', compression: 'DEFLATE' });
+  const report = await inspectOffice(output, kind);
+  if (report.findings.some(finding => finding.category === 'Document properties' || finding.category === 'Custom properties')) throw new Error('The supported document properties could not be cleared. No download was produced.');
+  return { blob: new Blob([new Uint8Array(output).buffer], { type: 'application/octet-stream' }), report };
+}
+
+export async function officeExample(): Promise<Uint8Array> {
+  const zip = new JSZip();
+  zip.file('[Content_Types].xml', '<?xml version="1.0"?><Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="xml" ContentType="application/xml"/><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Override PartName="/word/document.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"/><Override PartName="/docProps/core.xml" ContentType="application/vnd.openxmlformats-package.core-properties+xml"/></Types>');
+  zip.file('_rels/.rels', '<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml"/><Relationship Id="rId2" Type="http://schemas.openxmlformats.org/package/2006/relationships/metadata/core-properties" Target="docProps/core.xml"/></Relationships>');
+  zip.file('docProps/core.xml', '<cp:coreProperties xmlns:cp="http://schemas.openxmlformats.org/package/2006/metadata/core-properties" xmlns:dc="http://purl.org/dc/elements/1.1/"><dc:title>Example internal document</dc:title><dc:creator>Alex Example</dc:creator><cp:lastModifiedBy>Sam Example</cp:lastModifiedBy></cp:coreProperties>');
+  zip.file('word/document.xml', '<w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main"><w:body><w:p><w:r><w:t>Public wording.</w:t></w:r><w:del w:id="1" w:author="Alex Example"><w:r><w:delText>Earlier private wording.</w:delText></w:r></w:del></w:p></w:body></w:document>');
+  return zip.generateAsync({ type: 'uint8array' });
+}
diff --git a/src/lib/qr-toolkit.test.ts b/src/lib/qr-toolkit.test.ts
new file mode 100644
index 0000000..5a74484
--- /dev/null
+++ b/src/lib/qr-toolkit.test.ts
@@ -0,0 +1,28 @@
+import { describe,expect,it } from 'vitest';
+import QRCode from 'qrcode';
+import jsQR from 'jsqr';
+import { inspectQrText,qrPayload } from './qr-toolkit';
+function roundTrip(text: string) {
+  const qr = QRCode.create(text,{ errorCorrectionLevel: 'M' }); const scale = 5; const width = (qr.modules.size + 8) * scale; const pixels = new Uint8ClampedArray(width * width * 4).fill(255);
+  for (let y = 0; y < width; y++) for (let x = 0; x < width; x++) {
+    const col = Math.floor(x / scale) - 4; const row = Math.floor(y / scale) - 4;
+    if (col >= 0 && row >= 0 && col < qr.modules.size && row < qr.modules.size && qr.modules.get(row,col)) { const i = (y * width + x) * 4; pixels[i] = 0; pixels[i + 1] = 0; pixels[i + 2] = 0; }
+  }
+  return jsQR(pixels,width,width)?.data;
+}
+describe('local QR toolkit',() => {
+  it('round-trips Unicode, URL, escaped Wi-Fi and contact payloads through the actual encoder and decoder',() => {
+    const values = [qrPayload({ kind: 'text',text: 'Hello 🌎 नमस्ते' }),qrPayload({ kind: 'text',text: 'https://example.invalid/path?secret=visible' }),qrPayload({ kind: 'wifi',ssid: 'test;,:"\\network',password: 'private;value',security: 'WPA',hidden: true }),qrPayload({ kind: 'contact',name: 'Test, Person',email: 'person@example.invalid',phone: '+12025550123',organization: 'Example\nORG:Injected' })];
+    values.forEach(value => expect(roundTrip(value)).toBe(value));
+    expect(values[2]).toContain('S:test\\;\\,\\:\\"\\\\network;'); expect(values[3]).not.toContain('\nORG:Injected');
+  });
+  it('identifies links and app schemes without visiting targets',() => {
+    expect(inspectQrText('https://user:secret@xn--bcher-kva.example/').details.join(' ')).toContain('embedded login');
+    expect(inspectQrText('javascript:alert(1)').kind).toBe('URI / app action'); expect(inspectQrText('WIFI:T:WPA;S:a;P:b;;').kind).toBe('Wi-Fi configuration'); expect(inspectQrText('ordinary text').kind).toBe('Plain text');
+  });
+  it('rejects empty, excessive and malformed configuration values',() => {
+    expect(() => qrPayload({ kind: 'text',text: '🌎'.repeat(400) })).toThrow(/1,500/);
+    expect(() => qrPayload({ kind: 'text',text: '' })).toThrow(); expect(() => qrPayload({ kind: 'wifi',ssid: 'bad\nnetwork',password: '',security: 'nopass',hidden: false })).toThrow(/line breaks/);
+    expect(qrPayload({ kind: 'wifi',ssid: 'Open',password: 'ignored-secret',security: 'nopass',hidden: false })).not.toContain('ignored-secret');
+  });
+});
diff --git a/src/lib/qr-toolkit.ts b/src/lib/qr-toolkit.ts
new file mode 100644
index 0000000..e61a9a1
--- /dev/null
+++ b/src/lib/qr-toolkit.ts
@@ -0,0 +1,29 @@
+export type QrInput = { kind: 'text'; text: string } | { kind: 'wifi'; ssid: string; password: string; security: 'WPA' | 'WEP' | 'nopass'; hidden: boolean } | { kind: 'contact'; name: string; email: string; phone: string; organization: string };
+export function qrPayload(input: QrInput): string {
+  let payload: string;
+  if (input.kind === 'text') payload = input.text;
+  else if (input.kind === 'wifi') {
+    if (!input.ssid.trim()) throw new Error('Enter a network name.');
+    if (/[\r\n\0]/.test(input.ssid + input.password)) throw new Error('Wi-Fi fields cannot contain line breaks or null characters.');
+    if (input.security !== 'nopass' && !input.password) throw new Error('Enter the network password or choose Open network.');
+    const escape = (value: string) => value.replace(/([\\;,:"])/g,'\\$1');
+    payload = `WIFI:T:${input.security};S:${escape(input.ssid)};${input.security === 'nopass' ? '' : `P:${escape(input.password)};`}H:${input.hidden};;`;
+  } else {
+    if (!input.name.trim()) throw new Error('Enter a contact name.');
+    const escape = (value: string) => value.replace(/\\/g,'\\\\').replace(/\r\n|\r|\n/g,'\\n').replace(/;/g,'\\;').replace(/,/g,'\\,').replace(/\0/g,'');
+    payload = ['BEGIN:VCARD','VERSION:3.0',`FN:${escape(input.name)}`,`N:;${escape(input.name)};;;`,...(input.organization ? [`ORG:${escape(input.organization)}`] : []),...(input.email ? [`EMAIL:${escape(input.email)}`] : []),...(input.phone ? [`TEL:${escape(input.phone)}`] : []),'END:VCARD'].join('\r\n');
+  }
+  if (!payload.trim()) throw new Error('Enter some text first.');
+  if (new TextEncoder().encode(payload).length > 1500) throw new Error('Keep QR contents under 1,500 UTF-8 bytes.');
+  return payload;
+}
+
+export function inspectQrText(text: string): { kind: string; details: string[] } {
+  if (/^WIFI:/i.test(text)) return { kind: 'Wi-Fi configuration',details: ['May contain a network password.'] };
+  if (/^BEGIN:VCARD/i.test(text)) return { kind: 'Contact card',details: [] };
+  try {
+    const url = new URL(text);
+    if (['http:','https:'].includes(url.protocol)) return { kind: 'Web URL',details: [`Host: ${url.hostname}`,`Protocol: ${url.protocol.slice(0,-1)}`, ...(url.username || url.password ? ['Contains embedded login information.'] : []),...(/xn--/i.test(url.hostname) ? ['Host contains a Punycode label.'] : [])] };
+    return { kind: 'URI / app action',details: [`Scheme: ${url.protocol.slice(0,-1)}`] };
+  } catch { return { kind: 'Plain text',details: [] }; }
+}
diff --git a/src/lib/qr.worker.ts b/src/lib/qr.worker.ts
new file mode 100644
index 0000000..536cc9e
--- /dev/null
+++ b/src/lib/qr.worker.ts
@@ -0,0 +1,10 @@
+import jsQR from 'jsqr';
+self.onmessage = event => {
+  try {
+    const { pixels,width,height } = event.data;
+    if (!Number.isInteger(width) || !Number.isInteger(height) || width < 1 || height < 1 || width * height > 2560000 || pixels.length !== width * height * 4) throw new Error('Image dimensions are unsupported.');
+    const result = jsQR(new Uint8ClampedArray(pixels),width,height,{ inversionAttempts: 'attemptBoth' });
+    if (!result) throw new Error('No readable QR code found. Try a sharper, tightly cropped image.');
+    self.postMessage({ text: result.data });
+  } catch (error) { self.postMessage({ error: (error as Error).message }); }
+};
diff --git a/src/lib/redaction.test.ts b/src/lib/redaction.test.ts
new file mode 100644
index 0000000..94d9795
--- /dev/null
+++ b/src/lib/redaction.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest';
+import { clampBox } from './redaction';
+
+describe('pixel redaction bounds', () => {
+  it('covers fractional edges outward so a selected border does not leak pixels', () => {
+    expect(clampBox({ x: 1.2, y: 2.8, width: 10.1, height: 9.6 }, 100, 100)).toEqual({ x: 1, y: 2, width: 11, height: 11 });
+  });
+  it('supports reverse dragging and clamps to image boundaries', () => {
+    expect(clampBox({ x: 10, y: 20, width: -15, height: -40 }, 100, 100)).toEqual({ x: 0, y: 0, width: 10, height: 20 });
+    expect(clampBox({ x: 90, y: 90, width: 20, height: 20 }, 100, 100)).toEqual({ x: 90, y: 90, width: 10, height: 10 });
+  });
+});
diff --git a/src/lib/redaction.ts b/src/lib/redaction.ts
new file mode 100644
index 0000000..3ab6773
--- /dev/null
+++ b/src/lib/redaction.ts
@@ -0,0 +1,14 @@
+export type RedactionBox = { x: number; y: number; width: number; height: number };
+
+export function clampBox(box: RedactionBox, width: number, height: number): RedactionBox {
+  const x = Math.max(0, Math.min(width, Math.floor(Math.min(box.x, box.x + box.width))));
+  const y = Math.max(0, Math.min(height, Math.floor(Math.min(box.y, box.y + box.height))));
+  const right = Math.max(x, Math.min(width, Math.ceil(Math.max(box.x, box.x + box.width))));
+  const bottom = Math.max(y, Math.min(height, Math.ceil(Math.max(box.y, box.y + box.height))));
+  return { x, y, width: right - x, height: bottom - y };
+}
+
+export function paintRedactions(context: CanvasRenderingContext2D, boxes: RedactionBox[]) {
+  context.globalAlpha = 1; context.globalCompositeOperation = 'source-over'; context.fillStyle = '#000000';
+  for (const box of boxes) context.fillRect(box.x, box.y, box.width, box.height);
+}
diff --git a/src/lib/service-worker.test.ts b/src/lib/service-worker.test.ts
new file mode 100644
index 0000000..d24c016
--- /dev/null
+++ b/src/lib/service-worker.test.ts
@@ -0,0 +1,22 @@
+import { readFileSync } from 'node:fs';
+import { runInNewContext } from 'node:vm';
+import { describe,expect,it,vi } from 'vitest';
+
+describe('offline worker bootstrap caching',() => {
+  it.each(['worker','script'])('preserves the requesting location for %s responses',async destination => {
+    type Event = { request: { method: string; url: string; destination: string; mode: string }; respondWith: (value: Promise<Response>) => void };
+    const handlers: Record<string,(event: Event) => void> = {};
+    const cached = new Response('worker bootstrap',{ headers: { 'Content-Type': 'text/javascript' } });
+    Object.defineProperty(cached,'url',{ value: 'https://toolstack.invalid/_next/static/worker.js#params=first-worker' });
+    const network = vi.fn(() => { throw new Error('Offline'); });
+    runInNewContext(readFileSync(new URL('../../public/sw.js',import.meta.url),'utf8'),{
+      URL,Response,fetch: network,caches: { match: async () => cached },
+      self: { location: { origin: 'https://toolstack.invalid' },addEventListener: (type: string,handler: (event: Event) => void) => { handlers[type] = handler; } },
+    });
+    let pending: Promise<Response> | undefined;
+    handlers['fetch']({ request: { method: 'GET',url: 'https://toolstack.invalid/_next/static/worker.js#params=second-worker',destination,mode: 'same-origin' },respondWith: value => { pending = value; } });
+    const result = await pending!;
+    expect(result.url).toBe(destination === 'worker' ? '' : cached.url);
+    expect(result.headers.get('Content-Type')).toBe('text/javascript'); expect(await result.text()).toBe('worker bootstrap'); expect(network).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/lib/support-sanitizer.test.ts b/src/lib/support-sanitizer.test.ts
new file mode 100644
index 0000000..09d3740
--- /dev/null
+++ b/src/lib/support-sanitizer.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest';
+import { sanitizeSupportFiles } from './support-sanitizer';
+
+const options = { aliases: true, includeBodies: false, literals: [] };
+describe('support sanitization', () => {
+  it('uses the same alias across logs and structured files while removing credentials', () => {
+    const output = sanitizeSupportFiles([{ name: 'private.log', text: 'alex@example.com\nAuthorization: Bearer do-not-share\n/home/alex/server' }, { name: 'private.json', text: JSON.stringify({ email: 'alex@example.com', password: 'hidden', nested: { apiKey: 'secret' }, status: 500 }) }], options);
+    const data = JSON.parse(output[1].text);
+    expect(data.email).toBe('[EMAIL_001]'); expect(output[0].text).toContain(data.email);
+    expect(output.map(item => item.text).join('')).not.toMatch(/alex@example.com|do-not-share|hidden|"secret"|\/home\/alex/);
+    expect(data.status).toBe(500); expect(output[0].name).toBe('support-1.txt');
+  });
+  const har = () => ({ log: { pages: [{ title: 'private page' }], entries: [{ startedDateTime: '2026-01-01T00:00:00Z', time: 42, request: { method: 'POST', url: 'https://user:pass@example.com/users?token=secret&id=123#private', headers: [{ name: 'Authorization', value: 'Bearer hidden' }], cookies: [{ value: 'cookie-secret' }], postData: { text: 'private body' } }, response: { status: 500, statusText: 'Error', content: { size: 100, mimeType: 'application/json', text: '{"secret":"private-response"}' } }, timings: { wait: 12, receive: 30 }, _private: 'private extension' }] } });
+  it('rebuilds HAR files without bodies, credentials or unrecognized extension fields', () => {
+    const output = sanitizeSupportFiles([{ name: 'capture.har', text: JSON.stringify(har()) }], options)[0];
+    expect(output.text).not.toMatch(/private|cookie-secret|Bearer|user:pass|token=secret|id=123/);
+    const entry = JSON.parse(output.text).log.entries[0];
+    expect(entry.response.status).toBe(500); expect(entry.time).toBe(42); expect(entry.timings.wait).toBe(12);
+    expect(entry.request.postData).toBeUndefined(); expect(output.requests).toBe(1);
+  });
+  it('does not copy encoded response bodies even when retaining bodies', () => {
+    const data = har(); Object.assign(data.log.entries[0].response.content, { encoding: 'base64', text: 'c2VjcmV0' });
+    const result = sanitizeSupportFiles([{ name: 'capture.har', text: JSON.stringify(data) }], { ...options, includeBodies: true })[0];
+    expect(JSON.parse(result.text).log.entries[0].response.content.text).toBeUndefined();
+  });
+  it('removes exact custom values and PEM private keys', () => {
+    const result = sanitizeSupportFiles([{ name: 'config.txt', text: 'Internal Acme\n-----BEGIN PRIVATE KEY-----\nsecretdata\n-----END PRIVATE KEY-----' }], { ...options, literals: ['Internal Acme'] })[0];
+    expect(result.text).not.toMatch(/Internal Acme|secretdata/);
+  });
+  it('stops on malformed JSON rather than silently copying the file', () => {
+    expect(() => sanitizeSupportFiles([{ name: 'data.json', text: '{bad' }], options)).toThrow();
+    expect(() => sanitizeSupportFiles([{ name: 'data.har', text: '{}' }], options)).toThrow(/log.entries/);
+  });
+  it('keeps HAR URLs parseable when replacing IP hosts and custom hostnames', () => {
+    for (const url of ['http://192.168.1.20/resource', 'https://internal.example.com/resource']) {
+      const source = har(); source.log.entries[0].request.url = url;
+      const output = sanitizeSupportFiles([{ name: 'capture.har', text: JSON.stringify(source) }], { ...options, literals: ['internal.example.com'] })[0];
+      const cleaned = JSON.parse(output.text).log.entries[0].request.url;
+      expect(() => new URL(cleaned)).not.toThrow(); expect(cleaned).not.toMatch(/192\.168\.1\.20|internal\.example\.com/);
+    }
+  });
+});
diff --git a/src/lib/support-sanitizer.ts b/src/lib/support-sanitizer.ts
new file mode 100644
index 0000000..5dad496
--- /dev/null
+++ b/src/lib/support-sanitizer.ts
@@ -0,0 +1,98 @@
+export type SupportOptions = { aliases: boolean; includeBodies: boolean; literals: string[] };
+export type SupportInput = { name: string; text: string };
+export type SupportOutput = { name: string; text: string; changes: number; requests?: number };
+const SECRET_KEY = /(?:password|passwd|pwd|secret|token|authorization|cookie|api[-_]?key|private[-_]?key|session[-_]?id|signature|credential)/i;
+const EMAIL = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/gi;
+const IPV4 = /\b(?:(?:25[0-5]|2[0-4]\d|1?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|1?\d?\d)\b/g;
+const UUID = /\b[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\b/gi;
+
+/** One session-wide mapping; original values and the mapping are never exported. */
+export function sanitizeSupportFiles(inputs: SupportInput[], options: SupportOptions): SupportOutput[] {
+  const mappings = new Map<string, string>();
+  const counts = new Map<string, number>();
+  let changes = 0;
+  const replace = (kind: string, value: string, alias = options.aliases) => {
+    changes++;
+    if (!alias) return `[REDACTED_${kind}]`;
+    const key = `${kind}:${value}`;
+    if (!mappings.has(key)) { const next = (counts.get(kind) ?? 0) + 1; counts.set(kind, next); mappings.set(key, `[${kind}_${String(next).padStart(3, '0')}]`); }
+    return mappings.get(key)!;
+  };
+  const scrub = (text: string): string => {
+    let result = text;
+    for (const literal of [...options.literals].filter(Boolean).sort((a, b) => b.length - a.length)) result = result.split(literal).join(replaceLiteral(literal));
+    result = result.replace(/-----BEGIN [^-\r\n]*PRIVATE KEY-----[\s\S]*?-----END [^-\r\n]*PRIVATE KEY-----/g, match => replace('PRIVATE_KEY', match, false));
+    result = result.replace(/^(\s*(?:authorization|proxy-authorization|cookie|set-cookie)\s*:\s*)[^\r\n]*/gim, (_, prefix: string) => `${prefix}${replace('CREDENTIAL', '', false)}`);
+    result = result.replace(/\b(Bearer|Basic)\s+[^\s"',;]+/gi, (_, scheme: string) => `${scheme} ${replace('CREDENTIAL', '', false)}`);
+    result = result.replace(/((?:["']?)[\w.-]*(?:password|passwd|secret|token|api[_-]?key|authorization|cookie|credential)[\w.-]*["']?\s*[:=]\s*)("[^"\r\n]*"|'[^'\r\n]*'|[^\s,;\r\n]+)/gi, (_, prefix: string) => `${prefix}${replace('SECRET', '', false)}`);
+    result = result.replace(/\b(?:AKIA|ASIA)[A-Z0-9]{16}\b|\bgh[pousr]_[A-Za-z0-9]{20,}\b|\bgithub_pat_[A-Za-z0-9_]{20,}\b|\bsk-[A-Za-z0-9_-]{20,}\b/g, match => replace('SECRET', match, false));
+    result = result.replace(EMAIL, match => replace('EMAIL', match));
+    result = result.replace(UUID, match => replace('UUID', match));
+    result = result.replace(IPV4, match => replace('IP', match));
+    result = result.replace(/([A-Z]:\\Users\\|\/Users\/|\/home\/)([^\s/\\]+)/gi, (_, prefix: string, name: string) => `${prefix}${replace('USER', name)}`);
+    return result;
+  };
+  function replaceLiteral(value: string) { return `[CUSTOM_${getLiteralIndex(value)}]`; }
+  function getLiteralIndex(value: string) { return options.literals.indexOf(value) + 1; }
+  const cleanValue = (value: unknown, depth = 0): unknown => {
+    if (depth > 80) throw new Error('Data is nested too deeply (maximum 80 levels).');
+    if (typeof value === 'string') return scrub(value);
+    if (Array.isArray(value)) return value.map(item => cleanValue(item, depth + 1));
+    if (value && typeof value === 'object') return Object.fromEntries(Object.entries(value).map(([key, item]) => [scrub(key), SECRET_KEY.test(key) ? replace('SECRET', '', false) : cleanValue(item, depth + 1)]));
+    return value;
+  };
+  const cleanUrl = (value: unknown): string => {
+    try {
+      const url = new URL(String(value));
+      if (!['http:', 'https:'].includes(url.protocol)) return '[REMOVED_URL]';
+      if (url.username || url.password || url.hash) changes++;
+      url.username = ''; url.password = ''; url.hash = '';
+      for (const key of [...new Set(url.searchParams.keys())]) {
+        const values = url.searchParams.getAll(key); url.searchParams.delete(key);
+        for (const val of values) url.searchParams.append(key, replace(SECRET_KEY.test(key) ? 'SECRET' : 'QUERY', val, !SECRET_KEY.test(key) && options.aliases));
+      }
+      if (/^\d+\.\d+\.\d+\.\d+$/.test(url.hostname)) {
+        const marker = replace('IP', url.hostname);
+        url.hostname = options.aliases ? `${marker.replace(/[\[\]_]/g, '-').replace(/^-|-$/g, '').toLowerCase()}.invalid` : 'redacted-ip.invalid';
+      }
+      const cleaned = scrub(url.toString());
+      try { return new URL(cleaned).toString(); } catch { return 'https://redacted.invalid/'; }
+    } catch { changes++; return '[REMOVED_INVALID_URL]'; }
+  };
+  const record = (value: unknown): Record<string, unknown> => value && typeof value === 'object' && !Array.isArray(value) ? value as Record<string, unknown> : {};
+  const safeHeaders = (value: unknown) => Array.isArray(value) ? value.flatMap(header => { const h = record(header); if (String(h.name).toLowerCase() !== 'content-type') { changes++; return []; } return [{ name: 'Content-Type', value: scrub(String(h.value ?? '')) }]; }) : [];
+  return inputs.map((input, index) => {
+    const before = changes;
+    const ext = input.name.toLowerCase().split('.').pop();
+    let text: string;
+    let requests: number | undefined;
+    if (ext === 'har') {
+      const parsed = JSON.parse(input.text); const log = record(record(parsed).log);
+      if (!Array.isArray(log.entries)) throw new Error(`File ${index + 1}: this is not a HAR with log.entries.`);
+      requests = log.entries.length;
+      const entries = log.entries.map(raw => {
+        const entry = record(raw); const request = record(entry.request); const response = record(entry.response); const content = record(response.content);
+        const url = cleanUrl(request.url);
+        const cleanContent: Record<string, unknown> = { size: typeof content.size === 'number' ? content.size : 0, mimeType: scrub(String(content.mimeType ?? '')) };
+        if (options.includeBodies && content.text !== undefined) {
+          if (content.encoding) { changes++; } // Encoded bodies are omitted rather than copied without inspection.
+          else { try { cleanContent.text = JSON.stringify(cleanValue(JSON.parse(String(content.text)))); } catch { cleanContent.text = scrub(String(content.text)); } }
+        }
+        const cleanRequest: Record<string, unknown> = { method: scrub(String(request.method ?? 'GET')), url, httpVersion: 'HTTP/1.1', cookies: [], headers: safeHeaders(request.headers), queryString: [], headersSize: -1, bodySize: -1 };
+        if (options.includeBodies && request.postData) {
+          const post = record(request.postData); const cleanPost: Record<string, unknown> = { mimeType: scrub(String(post.mimeType ?? '')) };
+          if (typeof post.text === 'string') { try { cleanPost.text = JSON.stringify(cleanValue(JSON.parse(post.text))); } catch { cleanPost.text = scrub(post.text); } }
+          if (Array.isArray(post.params)) cleanPost.params = post.params.map(item => { const param = record(item); return { name: scrub(String(param.name ?? '')), value: replace('FORM', String(param.value ?? ''), false) }; });
+          cleanRequest.postData = cleanPost;
+        }
+        changes++; // HAR is rebuilt from a limited set of fields, not copied wholesale.
+        return { startedDateTime: String(entry.startedDateTime ?? ''), time: typeof entry.time === 'number' ? entry.time : 0, request: cleanRequest, response: { status: typeof response.status === 'number' ? response.status : 0, statusText: scrub(String(response.statusText ?? '')), httpVersion: 'HTTP/1.1', headers: safeHeaders(response.headers), cookies: [], content: cleanContent, redirectURL: '', headersSize: -1, bodySize: -1 }, cache: {}, timings: Object.fromEntries(['blocked','dns','connect','send','wait','receive','ssl'].map(key => [key, typeof record(entry.timings)[key] === 'number' ? record(entry.timings)[key] : -1])) };
+      });
+      text = JSON.stringify({ log: { version: '1.2', creator: { name: 'ToolStack', version: '1' }, entries } }, null, 2);
+    } else if (ext === 'json') text = JSON.stringify(cleanValue(JSON.parse(input.text)), null, 2);
+    else text = scrub(input.text);
+    // Literal matches are also counted without recording their original values.
+    const customChanges = options.literals.filter(Boolean).reduce((n, literal) => n + input.text.split(literal).length - 1, 0);
+    return { name: `support-${index + 1}.${ext === 'har' ? 'har' : ext === 'json' ? 'json' : 'txt'}`, text, changes: changes - before + customChanges, requests };
+  });
+}
diff --git a/src/lib/support.worker.ts b/src/lib/support.worker.ts
new file mode 100644
index 0000000..f5ac767
--- /dev/null
+++ b/src/lib/support.worker.ts
@@ -0,0 +1,5 @@
+import { sanitizeSupportFiles, type SupportInput, type SupportOptions } from './support-sanitizer';
+self.onmessage = (event: MessageEvent<{ inputs: SupportInput[]; options: SupportOptions }>) => {
+  try { self.postMessage({ result: sanitizeSupportFiles(event.data.inputs, event.data.options) }); }
+  catch (err) { self.postMessage({ error: err instanceof Error ? err.message : 'Sanitization failed.' }); }
+};
diff --git a/src/lib/synthetic-data.test.ts b/src/lib/synthetic-data.test.ts
new file mode 100644
index 0000000..c33ee0c
--- /dev/null
+++ b/src/lib/synthetic-data.test.ts
@@ -0,0 +1,27 @@
+import { describe,expect,it } from 'vitest';
+import { generateSynthetic,SAMPLE_TABLES,type SyntheticTable } from './synthetic-data';
+describe('synthetic datasets',() => {
+  it('is repeatable and maintains references regardless of table order',() => {
+    const tables = [...SAMPLE_TABLES].reverse(); const result = generateSynthetic(tables,'demo');
+    expect(result).toEqual(generateSynthetic(tables,'demo'));
+    expect(result).not.toEqual(generateSynthetic(tables,'other'));
+    const customers = result.find(table => table.name === 'customers')!; const ids = new Set(customers.rows.map(row => row.id));
+    expect(ids.size).toBe(customers.rows.length);
+    expect(result.find(table => table.name === 'orders')!.rows.every(row => ids.has(row.customer_id))).toBe(true);
+    expect(customers.rows.every(row => String(row.email).endsWith('@example.invalid'))).toBe(true);
+  });
+  it('generates bounded integer, decimal, boolean, date, UUID and choice values',() => {
+    const tables: SyntheticTable[] = [{ name: 'fixtures',rows: 100,columns: [{ name: 'n',type: 'integer',min: '-2',max: '3' },{ name: 'price',type: 'decimal',min: '1.25',max: '1.27' },{ name: 'enabled',type: 'boolean' },{ name: 'day',type: 'date',min: '2024-02-29',max: '2024-02-29' },{ name: 'token',type: 'uuid' },{ name: 'label',type: 'choice',choices: 'a,b' }] }];
+    for (const row of generateSynthetic(tables,'test')[0].rows) {
+      expect(Number.isInteger(row.n)).toBe(true); expect(row.n).toBeGreaterThanOrEqual(-2); expect(row.n).toBeLessThanOrEqual(3);
+      expect([1.25,1.26,1.27]).toContain(row.price); expect(typeof row.enabled).toBe('boolean'); expect(row.day).toBe('2024-02-29'); expect(row.token).toMatch(/^[a-f0-9]{8}-[a-f0-9]{4}-4[a-f0-9]{3}-[89ab][a-f0-9]{3}-[a-f0-9]{12}$/); expect(['a','b']).toContain(row.label);
+    }
+  });
+  it('rejects broken references, cycles, duplicate columns and limits',() => {
+    const broken = structuredClone(SAMPLE_TABLES); broken[1].columns[1].reference = 'missing'; expect(() => generateSynthetic(broken,'s')).toThrow(/target/);
+    const cycle = structuredClone(SAMPLE_TABLES); cycle[0].columns.push({ name: 'order',type: 'reference',reference: 'orders' }); expect(() => generateSynthetic(cycle,'s')).toThrow(/cycles/);
+    const duplicate = structuredClone(SAMPLE_TABLES); duplicate[0].columns.push({ name: 'id',type: 'id' }); expect(() => generateSynthetic(duplicate,'s')).toThrow(/unique/);
+    const huge = structuredClone(SAMPLE_TABLES); huge[0].rows = 10001; expect(() => generateSynthetic(huge,'s')).toThrow(/rows/);
+    const invalid = structuredClone(SAMPLE_TABLES); invalid[0].columns[3].min = '2025-02-29'; expect(() => generateSynthetic(invalid,'s')).toThrow(/Dates/);
+  });
+});
diff --git a/src/lib/synthetic-data.ts b/src/lib/synthetic-data.ts
new file mode 100644
index 0000000..31e7079
--- /dev/null
+++ b/src/lib/synthetic-data.ts
@@ -0,0 +1,90 @@
+export const COLUMN_TYPES = ['id', 'name', 'email', 'integer', 'decimal', 'boolean', 'date', 'choice', 'reference', 'uuid'] as const;
+export type ColumnType = typeof COLUMN_TYPES[number];
+export type SyntheticColumn = { name: string; type: ColumnType; min?: string; max?: string; choices?: string; reference?: string };
+export type SyntheticTable = { name: string; rows: number; columns: SyntheticColumn[] };
+export type SyntheticResult = { name: string; rows: Record<string, string | number | boolean>[] }[];
+export const SAMPLE_TABLES: SyntheticTable[] = [
+  { name: 'customers', rows: 50, columns: [{ name: 'id', type: 'id' }, { name: 'name', type: 'name' }, { name: 'email', type: 'email' }, { name: 'joined', type: 'date', min: '2025-01-01', max: '2025-12-31' }] },
+  { name: 'orders', rows: 200, columns: [{ name: 'id', type: 'id' }, { name: 'customer_id', type: 'reference', reference: 'customers' }, { name: 'total', type: 'decimal', min: '10', max: '500' }, { name: 'status', type: 'choice', choices: 'pending,paid,shipped' }] },
+];
+
+function dateValue(value: string) {
+  const time = Date.parse(value + 'T00:00:00Z');
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value) || !Number.isFinite(time) || new Date(time).toISOString().slice(0,10) !== value) throw new Error('Dates must be valid YYYY-MM-DD values.');
+  return Math.floor(time / 86400000);
+}
+
+/** Reproducible fixture generation; the seed is deliberately not a security key. */
+export function generateSynthetic(tables: SyntheticTable[], seed: string): SyntheticResult {
+  if (!seed.trim() || seed.length > 200) throw new Error('Use a seed of 1–200 characters.');
+  if (!tables.length || tables.length > 8) throw new Error('Use 1–8 tables.');
+  const names = new Set<string>(); let totalRows = 0; let cells = 0;
+  const identifier = /^[A-Za-z][A-Za-z0-9_]{0,39}$/;
+  for (const table of tables) {
+    if (!identifier.test(table.name) || names.has(table.name)) throw new Error('Table names must be unique: use a letter followed by letters, digits or underscores (up to 40 characters).');
+    names.add(table.name);
+    if (!Number.isInteger(table.rows) || table.rows < 1 || table.rows > 10000) throw new Error(`${table.name}: choose 1–10,000 rows.`);
+    totalRows += table.rows; cells += table.rows * table.columns.length;
+    if (!table.columns.length || table.columns.length > 30) throw new Error(`${table.name}: use 1–30 columns.`);
+    const columns = new Set<string>();
+    for (const column of table.columns) {
+      if (!identifier.test(column.name) || columns.has(column.name)) throw new Error(`${table.name}: column names must be unique letters, digits or underscores, starting with a letter (up to 40 characters).`);
+      columns.add(column.name);
+      if (!COLUMN_TYPES.includes(column.type)) throw new Error('Unknown column type.');
+    }
+    if (table.columns.filter(column => column.type === 'id').length > 1) throw new Error(`${table.name}: use at most one ID column.`);
+  }
+  if (totalRows > 20000 || cells > 300000) throw new Error('Use at most 20,000 total rows and 300,000 cells.');
+  const ordered: SyntheticTable[] = []; const visiting = new Set<string>(); const done = new Set<string>();
+  const visit = (table: SyntheticTable) => {
+    if (visiting.has(table.name)) throw new Error('Reference cycles are unsupported. Use a parent table without a back-reference.');
+    if (done.has(table.name)) return;
+    visiting.add(table.name);
+    for (const col of table.columns.filter(column => column.type === 'reference')) {
+      const target = tables.find(item => item.name === col.reference);
+      if (!target || !target.columns.some(column => column.type === 'id')) throw new Error(`${table.name}.${col.name}: choose a target table with an ID column.`);
+      visit(target);
+    }
+    visiting.delete(table.name); done.add(table.name); ordered.push(table);
+  };
+  tables.forEach(visit);
+  let state = 2166136261;
+  for (let i = 0; i < seed.length; i++) state = Math.imul(state ^ seed.charCodeAt(i),16777619) >>> 0;
+  const random = () => { state = (state + 0x6d2b79f5) >>> 0; let n = state; n = Math.imul(n ^ n >>> 15,n | 1); n ^= n + Math.imul(n ^ n >>> 7,n | 61); return ((n ^ n >>> 14) >>> 0) / 4294967296; };
+  const between = (min: number, max: number) => Math.floor(random() * (max - min + 1)) + min;
+  const result = new Map<string, SyntheticResult[number]>();
+  for (const table of ordered) {
+    const generators = table.columns.map(column => {
+      if (column.type === 'integer' || column.type === 'decimal') {
+        const min = Number(column.min || '0'); const max = Number(column.max || '100');
+        if (![min,max].every(Number.isFinite) || min > max || Math.abs(min) > 1e9 || Math.abs(max) > 1e9 || (column.type === 'integer' && (!Number.isInteger(min) || !Number.isInteger(max)))) throw new Error(`${table.name}.${column.name}: choose a valid range between -1 billion and 1 billion.`);
+        if (column.type === 'decimal' && Math.ceil(min * 100) > Math.floor(max * 100)) throw new Error(`${table.name}.${column.name}: range must contain a value with at most two decimal places.`);
+        return () => column.type === 'integer' ? between(min,max) : between(Math.ceil(min * 100),Math.floor(max * 100)) / 100;
+      }
+      if (column.type === 'date') {
+        const min = dateValue(column.min || '2025-01-01'); const max = dateValue(column.max || '2025-12-31');
+        if (min > max) throw new Error(`${table.name}.${column.name}: the start date must precede the end date.`);
+        return () => new Date(between(min,max) * 86400000).toISOString().slice(0,10);
+      }
+      if (column.type === 'choice') {
+        const choices = (column.choices ?? '').split(',').map(value => value.trim()).filter(Boolean);
+        if (!choices.length || choices.length > 100 || choices.some(value => value.length > 200)) throw new Error(`${table.name}.${column.name}: enter 1–100 comma-separated choices, up to 200 characters each.`);
+        return () => choices[between(0,choices.length - 1)];
+      }
+      if (column.type === 'reference') {
+        const target = result.get(column.reference!)!; const id = tables.find(item => item.name === target.name)!.columns.find(col => col.type === 'id')!.name;
+        return () => target.rows[between(0,target.rows.length - 1)][id];
+      }
+      return (index: number): string | number | boolean => {
+        if (column.type === 'id') return index + 1;
+        if (column.type === 'name') return `Test User ${String(index + 1).padStart(4,'0')}`;
+        if (column.type === 'email') return `${table.name}.user${index + 1}@example.invalid`;
+        if (column.type === 'boolean') return random() >= 0.5;
+        const hex = Array.from({ length: 32 },() => between(0,15).toString(16)); hex[12] = '4'; hex[16] = between(8,11).toString(16);
+        return `${hex.slice(0,8).join('')}-${hex.slice(8,12).join('')}-${hex.slice(12,16).join('')}-${hex.slice(16,20).join('')}-${hex.slice(20).join('')}`;
+      };
+    });
+    result.set(table.name,{ name: table.name, rows: Array.from({ length: table.rows },(_, index) => Object.fromEntries(table.columns.map((column,i) => [column.name,generators[i](index)]))) });
+  }
+  return tables.map(table => result.get(table.name)!);
+}
diff --git a/src/lib/synthetic.worker.ts b/src/lib/synthetic.worker.ts
new file mode 100644
index 0000000..c39783d
--- /dev/null
+++ b/src/lib/synthetic.worker.ts
@@ -0,0 +1,2 @@
+import { generateSynthetic } from './synthetic-data';
+self.onmessage = event => { try { self.postMessage({ result: generateSynthetic(event.data.tables,event.data.seed) }); } catch (error) { self.postMessage({ error: (error as Error).message }); } };
diff --git a/src/lib/text-redaction.test.ts b/src/lib/text-redaction.test.ts
new file mode 100644
index 0000000..c9e90ef
--- /dev/null
+++ b/src/lib/text-redaction.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest';
+import { applyStandard, DEFAULT_ACTIVE } from './text-redaction';
+
+describe('text redaction rule precedence', () => {
+  it('redacts a UUID before phone detection can break its shape', () => {
+    expect(applyStandard('User 550e8400-e29b-41d4-a716-446655440000', DEFAULT_ACTIVE, true)).toBe('User [REDACTED_UUID]');
+    expect(applyStandard('User 12345678-1234-1234-8234-123456789012', DEFAULT_ACTIVE, true)).toBe('User [REDACTED_UUID]');
+  });
+  it('redacts complete contiguous payment card numbers before shorter phone matches', () => {
+    expect(applyStandard('Card 4111111111111111; call +1 (555) 123-4567', DEFAULT_ACTIVE, true)).toBe('Card [REDACTED_PAYMENT_CARD]; call [REDACTED_PHONE]');
+  });
+});
diff --git a/src/lib/text-redaction.ts b/src/lib/text-redaction.ts
new file mode 100644
index 0000000..6554314
--- /dev/null
+++ b/src/lib/text-redaction.ts
@@ -0,0 +1,33 @@
+export const RULES = {
+  email: { label: 'Email addresses', regex: /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g, replacement: '[REDACTED_EMAIL]' },
+  phone: { label: 'Phone numbers (common NANP formats)', regex: /(\+\d{1,2}\s?)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}/g, replacement: '[REDACTED_PHONE]' },
+  ipv4: { label: 'IPv4 addresses', regex: /(?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d)/g, replacement: '[REDACTED_IP]' },
+  uuid: { label: 'UUIDs', regex: /\b[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}\b/gi, replacement: '[REDACTED_UUID]' },
+  mac: { label: 'MAC addresses', regex: /\b(?:[0-9A-F]{2}[:-]){5}[0-9A-F]{2}\b/gi, replacement: '[REDACTED_MAC]' },
+} as const;
+export type RuleKey = keyof typeof RULES;
+export const DEFAULT_ACTIVE: Record<RuleKey, boolean> = { email: true, phone: true, ipv4: true, uuid: true, mac: true };
+
+function luhn(value: string) {
+  const digits = value.replace(/\D/g, '');
+  if (digits.length < 13 || digits.length > 19) return false;
+  let sum = 0;
+  let double = false;
+  for (let i = digits.length - 1; i >= 0; i--) {
+    let digit = Number(digits[i]);
+    if (double) { digit *= 2; if (digit > 9) digit -= 9; }
+    sum += digit;
+    double = !double;
+  }
+  return sum % 10 === 0;
+}
+
+export function applyStandard(input: string, active: Record<RuleKey, boolean>, cards: boolean) {
+  let output = input;
+  const order: RuleKey[] = ['email', 'uuid', 'mac', 'ipv4'];
+  order.forEach(key => { if (active[key]) output = output.replace(RULES[key].regex, RULES[key].replacement); });
+  if (cards) output = output.replace(/\b(?:\d[ -]*?){13,19}\b/g, match => luhn(match) ? '[REDACTED_PAYMENT_CARD]' : match);
+  if (active.phone) output = output.replace(RULES.phone.regex, RULES.phone.replacement);
+  return output;
+}
+