diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..95dc88b
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+node_modules/
+public/web_template/
diff --git a/README.md b/README.md
index 218b597..27d4c1f 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,23 @@ A distributed workflow orchestration platform for managing and executing complex
 
 ## Styling & Layout
 
-PULSE uses the **LotusGuild Terminal Design System**. For all styling, component, and layout documentation see:
+PULSE uses the **LotusGuild Terminal Design System**. The design system is **vendored** into this
+repo at `public/web_template/` (`base.css`, `base.js`, `VERSION`) and served from `/web_template/*`,
+so the app has no runtime dependency on a sibling checkout. `public/web_template/VERSION` records
+the design-system version, upstream short SHA, and sync date; asset URLs are cache-busted with it.
+
+Update the vendored copy with:
+
+```bash
+scripts/sync-web-template.sh <path-to-web_template-checkout>
+```
+
+The script copies `base.css`/`base.js` as regular files (never symlinks) and rewrites `VERSION`.
+Never hand-edit `public/web_template/` — it is excluded from ESLint and overwritten on every sync.
+Pulse-local gaps in the design system live in `public/assets/app.css` (currently `.lt-modal-lg`,
+`.lt-field-error`, `.is-invalid`) and are candidates for upstreaming.
+
+Reference documentation:
 
 - [`web_template/README.md`](https://code.lotusguild.org/LotusGuild/web_template/src/branch/main/README.md) — full component reference, CSS variables, JS API
 - [`web_template/base.css`](https://code.lotusguild.org/LotusGuild/web_template/src/branch/main/base.css) — unified CSS (`.lt-*` classes)
@@ -20,9 +36,39 @@ PULSE uses the **LotusGuild Terminal Design System**. For all styling, component
 - [`web_template/aesthetic_diff.md`](https://code.lotusguild.org/LotusGuild/web_template/src/branch/main/aesthetic_diff.md) — cross-app divergence analysis and convergence guide
 - [`web_template/node/middleware.js`](https://code.lotusguild.org/LotusGuild/web_template/src/branch/main/node/middleware.js) — Express auth, CSRF, CSP nonce middleware
 
-**Pending convergence items (see aesthetic_diff.md):**
-- Extract inline `<style>` from `public/index.html` into `public/style.css` and extend `base.css`
-- Use `lt.autoRefresh.start(refreshData, 30000)` instead of raw `setInterval`
+## Web UI
+
+The UI is server-rendered with EJS. Every route renders `views/pages/<page>.ejs` into the shared
+chrome in `views/layout.ejs` (nav, header, WebSocket status dot, theme toggle, command palette).
+
+| Route | Page | View | Page module |
+|---|---|---|---|
+| `/` | Dashboard | `views/pages/dashboard.ejs` | `public/assets/pages/dashboard.js` |
+| `/workers` | Workers | `views/pages/workers.ejs` | `public/assets/pages/workers.js` |
+| `/workflows` | Workflows | `views/pages/workflows.ejs` | `public/assets/pages/workflows.js` |
+| `/executions` | Executions | `views/pages/executions.ejs` | `public/assets/pages/executions.js` |
+| `/quick` | Quick Command | `views/pages/quick.ejs` | `public/assets/pages/quick.js` |
+| `/scheduler` | Scheduler | `views/pages/scheduler.ejs` | `public/assets/pages/scheduler.js` |
+
+Scripts load in a fixed order: `/web_template/base.js` → `/assets/app.js` → `/assets/pages/<page>.js`.
+`app.js` owns the shell (`window.Pulse`: action registry, event bus, `Pulse.confirm`, formatters,
+WebSocket, the single 30 s auto-refresh) and each page module registers itself with:
+
+```js
+Pulse.registerPage({ name, init(), refresh(), onEvent(type, data) /* return true if handled */ });
+```
+
+Page modules never attach their own listeners for UI actions — they register handlers under their
+own action prefix (`dash:`, `wk:`, `wf:`, `ex:`, `qc:`, `sc:`) and the markup wires them up with
+`data-action` / `data-change-action` / `data-input-action` / `data-submit-action` attributes that
+`app.js` delegates. DOM ids are likewise prefixed per page. All dynamic strings go through
+`Pulse.esc`, and destructive actions use the themed `Pulse.confirm` (no native `confirm()`/`alert()`).
+
+**Content Security Policy:** pages are served under a strict nonce-based CSP (helmet), including
+`script-src-attr 'none'`. There are **no inline `<script>` blocks without a nonce and no inline
+event handler attributes** anywhere in `views/` or `public/assets/`; anything added there must
+follow the same rule or the browser will refuse to run it. Set `PULSE_CSP_REPORT_ONLY=1` to switch
+the policy to report-only (violations are reported to `/csp-report` and logged) while debugging.
 
 ## Overview
 
@@ -311,8 +357,30 @@ DB_USER=pulse_user                  # Database user
 DB_PASSWORD=<password>              # Database password
 WORKER_API_KEY=<api-key>           # Worker authentication key
 EXECUTION_RETENTION_DAYS=30         # Auto-cleanup retention (default: 30)
+
+# Web UI (all optional)
+APP_NAME=PULSE                      # Header/boot/title app name (default: PULSE)
+APP_SUBTITLE=<text>                 # Header subtitle (default: "Worker Orchestration // LotusGuild")
+PULSE_CSP_REPORT_ONLY=1             # Serve the CSP report-only instead of enforcing it
+PULSE_DEV_READONLY=1                # Local dev guard: disable all background writes (see below)
+DISABLE_BACKGROUND_JOBS=1           # Alias for PULSE_DEV_READONLY
 ```
 
+### Local development against a real database
+
+Running a local instance against the production MariaDB is safe only with the read-only guard on:
+
+```bash
+PULSE_DEV_READONLY=1 PORT=8099 HOST=127.0.0.1 npm start
+```
+
+`PULSE_DEV_READONLY=1` (alias `DISABLE_BACKGROUND_JOBS=1`) disables every background writer, so a
+dev instance can never mutate shared state behind your back: stale-execution recovery at startup,
+the old-execution cleanup job (startup call and interval), the scheduled-command processor
+(startup call and interval), and the stale-worker offline sweep. Each skip is logged at startup
+alongside a `PULSE_DEV_READONLY IS ON` banner. The guard covers background jobs only — API routes
+still write, so avoid destructive actions in the UI when you are pointed at production data.
+
 **Worker (.env):**
 ```bash
 WORKER_NAME=pulse-worker-01         # Unique worker name
diff --git a/lib/nav.js b/lib/nav.js
new file mode 100644
index 0000000..7de6e29
--- /dev/null
+++ b/lib/nav.js
@@ -0,0 +1,23 @@
+// Navigation metadata shared by the layout and the page routes.
+
+const navLinks = [
+  { href: '/',           key: 'dashboard',  label: 'Dashboard' },
+  { href: '/workers',    key: 'workers',    label: 'Workers' },
+  { href: '/workflows',  key: 'workflows',  label: 'Workflows' },
+  { href: '/executions', key: 'executions', label: 'Executions' },
+  { href: '/quick',      key: 'quick',      label: 'Quick Command' },
+  { href: '/scheduler',  key: 'scheduler',  label: 'Scheduler' }
+];
+
+// Page route table: { path, view, key, title }
+// `view` is the basename of views/pages/<view>.ejs and of /assets/pages/<view>.js
+const PAGES = [
+  { path: '/',           view: 'dashboard',  key: 'dashboard',  title: 'Dashboard' },
+  { path: '/workers',    view: 'workers',    key: 'workers',    title: 'Workers' },
+  { path: '/workflows',  view: 'workflows',  key: 'workflows',  title: 'Workflows' },
+  { path: '/executions', view: 'executions', key: 'executions', title: 'Executions' },
+  { path: '/quick',      view: 'quick',      key: 'quick',      title: 'Quick Command' },
+  { path: '/scheduler',  view: 'scheduler',  key: 'scheduler',  title: 'Scheduler' }
+];
+
+module.exports = { navLinks, PAGES };
diff --git a/lib/pageauth.js b/lib/pageauth.js
new file mode 100644
index 0000000..324c377
--- /dev/null
+++ b/lib/pageauth.js
@@ -0,0 +1,70 @@
+// Authelia SSO helpers shared by the JSON API middleware (server.js authenticateSSO)
+// and the HTML page middleware (authenticatePage).
+
+const crypto = require('crypto');
+const { renderError } = require('./render');
+
+const ALLOWED_GROUPS = ['admin', 'employee'];
+
+// Upsert the SSO user into the `users` table. Extracted verbatim from authenticateSSO.
+async function upsertUser(pool, headers) {
+  const userId = crypto.randomUUID();
+  await pool.query(
+    `INSERT INTO users (id, username, display_name, email, groups, last_login)
+     VALUES (?, ?, ?, ?, ?, NOW())
+     ON DUPLICATE KEY UPDATE
+       display_name=VALUES(display_name),
+       email=VALUES(email),
+       groups=VALUES(groups),
+       last_login=NOW()`,
+    [
+      userId,
+      headers['remote-user'],
+      headers['remote-name'],
+      headers['remote-email'],
+      headers['remote-groups']
+    ]
+  );
+}
+
+// Express middleware factory for HTML page routes: same auth rules as the API,
+// but failures render a themed HTML page instead of JSON.
+function makeAuthenticatePage(pool) {
+  return async function authenticatePage(req, res, next) {
+    const remoteUser = req.headers['remote-user'];
+    const remoteName = req.headers['remote-name'];
+    const remoteEmail = req.headers['remote-email'];
+    const remoteGroups = req.headers['remote-groups'];
+
+    if (!remoteUser) {
+      return renderError(req, res, 401, 'Not authenticated',
+        'Not authenticated — access via Authelia SSO (auth.lotusguild.org).');
+    }
+
+    const groups = remoteGroups ? remoteGroups.split(',').map(g => g.trim()) : [];
+    const hasAccess = groups.some(g => ALLOWED_GROUPS.includes(g));
+
+    if (!hasAccess) {
+      return renderError(req, res, 403, 'Access denied',
+        'You must be in the admin or employee group to use this service.');
+    }
+
+    try {
+      await upsertUser(pool, req.headers);
+    } catch (error) {
+      console.error('Error updating user:', error);
+    }
+
+    req.user = {
+      username: remoteUser,
+      name: remoteName || remoteUser,
+      email: remoteEmail || '',
+      groups: groups,
+      isAdmin: groups.includes('admin')
+    };
+
+    next();
+  };
+}
+
+module.exports = { upsertUser, makeAuthenticatePage, ALLOWED_GROUPS };
diff --git a/lib/render.js b/lib/render.js
new file mode 100644
index 0000000..b10f9c3
--- /dev/null
+++ b/lib/render.js
@@ -0,0 +1,100 @@
+// Two-step EJS rendering: views/pages/<view>.ejs -> `body` -> views/layout.ejs.
+// No express-ejs-layouts; the vendored layout is a wrapper file that expects `body`.
+
+const fs = require('fs');
+const path = require('path');
+const ejs = require('ejs');
+const { navLinks } = require('./nav');
+
+const ROOT = path.join(__dirname, '..');
+const VIEWS_DIR = path.join(ROOT, 'views');
+const PAGES_DIR = path.join(VIEWS_DIR, 'pages');
+const LAYOUT = path.join(VIEWS_DIR, 'layout.ejs');
+const STUB = path.join(PAGES_DIR, '_stub.ejs');
+
+const CACHE = process.env.NODE_ENV === 'production';
+
+// Cache-busting token: <package version>-<web_template short sha>, computed once.
+const assetVersion = (function computeAssetVersion() {
+  let version = '0.0.0';
+  try {
+    version = require(path.join(ROOT, 'package.json')).version || '0.0.0';
+  } catch (_) { /* keep default */ }
+  let sha = '';
+  try {
+    const raw = fs.readFileSync(path.join(ROOT, 'public/web_template/VERSION'), 'utf8').trim();
+    sha = (raw.split(/\s+/)[1] || '').trim();
+  } catch (_) { /* VERSION not vendored yet */ }
+  return sha ? `${version}-${sha}` : version;
+})();
+
+const APP_NAME = process.env.APP_NAME || 'PULSE';
+const APP_SUBTITLE = process.env.APP_SUBTITLE || 'Worker Orchestration // LotusGuild';
+
+function viewPath(view) {
+  const file = path.join(PAGES_DIR, `${view}.ejs`);
+  return fs.existsSync(file) ? file : STUB;
+}
+
+// Render a page view inside the shared layout.
+async function renderPage(req, res, view, locals = {}) {
+  const data = Object.assign({
+    user: req.user || null,
+    nonce: res.locals && res.locals.nonce,
+    appName: APP_NAME,
+    appSubtitle: APP_SUBTITLE,
+    csrfToken: '',
+    navLinks,
+    pageTitle: '',
+    activeNav: '',
+    pageStyles: [],
+    pageScripts: [],
+    pageConfig: {},
+    assetVersion
+  }, locals);
+
+  const opts = { cache: CACHE, filename: viewPath(view) };
+  const body = await ejs.renderFile(viewPath(view), data, opts);
+  const html = await ejs.renderFile(LAYOUT, Object.assign({}, data, { body }), {
+    cache: CACHE,
+    filename: LAYOUT
+  });
+
+  res.set('Content-Type', 'text/html; charset=utf-8');
+  res.send(html);
+  return html;
+}
+
+function esc(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+// Small self-contained themed page for 401/403/404/500.
+function renderError(req, res, status, title, message) {
+  const html = `<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="noindex, nofollow">
+<title>${esc(status)} — ${esc(APP_NAME)}</title>
+<link rel="stylesheet" href="/web_template/base.css?v=${esc(assetVersion)}">
+</head>
+<body>
+<main class="lt-main lt-container">
+  <div class="lt-frame">
+    <div class="lt-alert lt-alert--error">
+      <strong>${esc(status)} — ${esc(title)}</strong>
+      <p>${esc(message)}</p>
+    </div>
+    <p><a class="lt-btn lt-btn-secondary lt-btn-sm" href="/">Return to dashboard</a></p>
+  </div>
+</main>
+</body>
+</html>
+`;
+  res.status(status).set('Content-Type', 'text/html; charset=utf-8').send(html);
+}
+
+module.exports = { renderPage, renderError, assetVersion };
diff --git a/package-lock.json b/package-lock.json
index b36cc65..7f062e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,10 @@
       "dependencies": {
         "cron-parser": "^5.5.0",
         "dotenv": "^17.2.3",
+        "ejs": "3.1.10",
         "express": "^5.1.0",
         "express-rate-limit": "^8.3.1",
+        "helmet": "8.1.0",
         "mysql2": "^3.15.3",
         "ws": "^8.18.3"
       },
@@ -22,12 +24,13 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
-      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/helper-validator-identifier": "^7.29.7",
         "js-tokens": "^4.0.0",
         "picocolors": "^1.1.1"
       },
@@ -36,29 +39,31 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.0.tgz",
-      "integrity": "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
-      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-module-transforms": "^7.28.6",
-        "@babel/helpers": "^7.28.6",
-        "@babel/parser": "^7.29.0",
-        "@babel/template": "^7.28.6",
-        "@babel/traverse": "^7.29.0",
-        "@babel/types": "^7.29.0",
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
         "@jridgewell/remapping": "^2.3.5",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
@@ -75,13 +80,14 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.29.1",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
-      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz",
+      "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.29.0",
-        "@babel/types": "^7.29.0",
+        "@babel/parser": "^7.29.8",
+        "@babel/types": "^7.29.8",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -91,13 +97,14 @@
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
-      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.28.6",
-        "@babel/helper-validator-option": "^7.27.1",
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
         "browserslist": "^4.24.0",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
@@ -106,46 +113,40 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^3.0.2"
-      }
-    },
     "node_modules/@babel/helper-globals": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
-      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
-      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.28.6",
-        "@babel/types": "^7.28.6"
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
-      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.28.6",
-        "@babel/helper-validator-identifier": "^7.28.5",
-        "@babel/traverse": "^7.28.6"
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -164,52 +165,57 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
-      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
-      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
-      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.29.2",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz",
-      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.29.0"
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.29.2",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.2.tgz",
-      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
+      "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.29.0"
+        "@babel/types": "^7.29.8"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -441,31 +447,33 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
-      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.28.6",
-        "@babel/parser": "^7.28.6",
-        "@babel/types": "^7.28.6"
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
-      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz",
+      "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.29.0",
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.29.0",
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.8",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.8",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.8",
         "debug": "^4.3.1"
       },
       "engines": {
@@ -473,13 +481,14 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
-      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.28.5"
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -624,10 +633,11 @@
       }
     },
     "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": {
-      "version": "3.14.2",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
-      "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
+      "version": "3.15.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.15.2.tgz",
+      "integrity": "sha512-6EuL879VkRA+1Cz578mKMiKvjPNEuk6+r1JaFzoSWejZmtf7xWbIyw1e3KkxlkzTIt9Taw6JBhEppG7utc1P+w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -1153,7 +1163,6 @@
       "version": "25.6.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.6.0.tgz",
       "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
-      "dev": true,
       "dependencies": {
         "undici-types": "~7.19.0"
       }
@@ -1305,6 +1314,12 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
     "node_modules/aws-ssl-profiles": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/aws-ssl-profiles/-/aws-ssl-profiles-1.1.2.tgz",
@@ -1427,14 +1442,14 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.19",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.19.tgz",
-      "integrity": "sha512-qCkNLi2sfBOn8XhZQ0FXsT1Ki/Yo5P90hrkRamVFRS7/KV9hpfA4HkoWNU152+8w0zPjnxo5psx5NL3PSGgv5g==",
+      "version": "2.11.21",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.21.tgz",
+      "integrity": "sha512-uh8vpY/1/YyFkunIDFH/12p7/7VdPKA1hejMVEbdkEaWnUz0Hesvx5EbiU6XxjyHZIOju+ZMbQJkRh+es3/spQ==",
       "dev": true,
+      "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.cjs"
       },
@@ -1443,20 +1458,20 @@
       }
     },
     "node_modules/body-parser": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.1.tgz",
-      "integrity": "sha512-nfDwkulwiZYQIGwxdy0RUmowMhKcFVcYXUU7m4QlKYim1rUtg83xm2yjZ40QjDuc291AJjjeSc9b++AWHSgSHw==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.3.0.tgz",
+      "integrity": "sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==",
       "license": "MIT",
       "dependencies": {
         "bytes": "^3.1.2",
-        "content-type": "^1.0.5",
+        "content-type": "^2.0.0",
         "debug": "^4.4.3",
-        "http-errors": "^2.0.0",
-        "iconv-lite": "^0.7.0",
+        "http-errors": "^2.0.1",
+        "iconv-lite": "^0.7.2",
         "on-finished": "^2.4.1",
-        "qs": "^6.14.0",
-        "raw-body": "^3.0.1",
-        "type-is": "^2.0.1"
+        "qs": "^6.15.2",
+        "raw-body": "^3.0.2",
+        "type-is": "^2.1.0"
       },
       "engines": {
         "node": ">=18"
@@ -1466,11 +1481,25 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/body-parser/node_modules/content-type": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/brace-expansion": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
-      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.18.tgz",
+      "integrity": "sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1489,9 +1518,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
-      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "version": "4.28.9",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.9.tgz",
+      "integrity": "sha512-EWazOblFYUvlGZcfGhPUPmYh3nikUxBVb+y9MJun5f3hBi812X+8MSQTujLBtgK3cf51fJWbWfOjyeO954d+Eg==",
       "dev": true,
       "funding": [
         {
@@ -1507,12 +1536,13 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "baseline-browser-mapping": "^2.10.12",
-        "caniuse-lite": "^1.0.30001782",
-        "electron-to-chromium": "^1.5.328",
-        "node-releases": "^2.0.36",
-        "update-browserslist-db": "^1.2.3"
+        "baseline-browser-mapping": "^2.11.20",
+        "caniuse-lite": "^1.0.30001810",
+        "electron-to-chromium": "^1.5.420",
+        "node-releases": "^2.0.54",
+        "update-browserslist-db": "^1.3.2"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -1593,9 +1623,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001788",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001788.tgz",
-      "integrity": "sha512-6q8HFp+lOQtcf7wBK+uEenxymVWkGKkjFpCvw5W25cmMwEDU45p1xQFBQv8JDlMMry7eNxyBaR+qxgmTUZkIRQ==",
+      "version": "1.0.30001810",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001810.tgz",
+      "integrity": "sha512-TITQPUkaz+aVk5GL6NhOdwk1aEaNTSDPsGFWrTuhKGtjTF70jL/Oht2W4c6rXUe5fu7Ie19VIahAXHIIiWWNeg==",
       "dev": true,
       "funding": [
         {
@@ -1610,7 +1640,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/chalk": {
       "version": "4.1.2",
@@ -1850,15 +1881,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/denque": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
-      "integrity": "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -1930,11 +1952,27 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
       "license": "MIT"
     },
+    "node_modules/ejs": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.336",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.336.tgz",
-      "integrity": "sha512-AbH9q9J455r/nLmdNZes0G0ZKcRX73FicwowalLs6ijwOmCJSRRrLX63lcAlzy9ux3dWK1w1+1nsBJEWN11hcQ==",
-      "dev": true
+      "version": "1.5.425",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.425.tgz",
+      "integrity": "sha512-QvPtl41EUOnuT1HBvMKgxXRIaHNcagBPs50u7VULzhZXaGfqTbZyE16LQsctZ/RQHlGu+FOWeDTR4mY6YbeF1g==",
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/emittery": {
       "version": "0.13.1",
@@ -1991,9 +2029,9 @@
       }
     },
     "node_modules/es-object-atoms": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
-      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -2285,11 +2323,13 @@
       }
     },
     "node_modules/express-rate-limit": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.3.1.tgz",
-      "integrity": "sha512-D1dKN+cmyPWuvB+G2SREQDzPY1agpBIcTa9sJxOPMCNeH3gwzhqJRDWCXW3gg0y//+LQ/8j52JbMROWyrKdMdw==",
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.7.0.tgz",
+      "integrity": "sha512-hOwV7WOxXfjRpAM1DSJWZDXx3GhplwD8IfwuwvogD8i1Qnkgosw/H45s4ZnFAUHDAhPjlY9hLBvJhKmGMyY26g==",
+      "license": "MIT",
       "dependencies": {
-        "ip-address": "10.1.0"
+        "debug": "^4.4.3",
+        "ip-address": "^10.2.0"
       },
       "engines": {
         "node": ">= 16"
@@ -2349,6 +2389,36 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/filelist": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.6.tgz",
+      "integrity": "sha512-5giy2PkLYY1cP39p17Ech+2xlpTRL9HLspOfEgm0L6CwBXBTgsK5ou0JtzYuepxkaQ/tvhCFIJ5uXo0OrM2DxA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz",
+      "integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
+      "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -2651,6 +2721,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/helmet": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz",
+      "integrity": "sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -2687,9 +2766,9 @@
       }
     },
     "node_modules/iconv-lite": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.0.tgz",
-      "integrity": "sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==",
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.3.tgz",
+      "integrity": "sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==",
       "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -2773,9 +2852,10 @@
       "license": "ISC"
     },
     "node_modules/ip-address": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
-      "integrity": "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==",
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.7.0.tgz",
+      "integrity": "sha512-BGFsyJd5mpXp3rK6jIdADLNgpJUK1jnjzvYF8lK+VyDab9JAmqN0YOKDdP17HlgKb2+ehPgDc8EtnRLbGCAMhA==",
+      "license": "MIT",
       "engines": {
         "node": ">= 12"
       }
@@ -2975,6 +3055,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/jake": {
+      "version": "10.9.4",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
+      "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "async": "^3.2.6",
+        "filelist": "^1.0.4",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz",
@@ -3549,10 +3646,21 @@
       "dev": true
     },
     "node_modules/js-yaml": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.2.tgz",
+      "integrity": "sha512-SFNOvSJ+Dgf/9An904Yx+CgSlIPCkIpao4qo51lpee25TIRejdH3rhR4EZMGoNx3/TP3O+wzWuiTFl4sqbltzA==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -3682,18 +3790,19 @@
       "license": "Apache-2.0"
     },
     "node_modules/lru-cache": {
-      "version": "7.18.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
-      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
       "license": "ISC",
-      "engines": {
-        "node": ">=12"
+      "dependencies": {
+        "yallist": "^3.0.2"
       }
     },
     "node_modules/lru.min": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/lru.min/-/lru.min-1.1.3.tgz",
-      "integrity": "sha512-Lkk/vx6ak3rYkRR0Nhu4lFUT2VDnQSxBe8Hbl7f36358p6ow8Bnvr8lrLt98H8J1aGxfhbX4Fs5tYg2+FTwr5Q==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/lru.min/-/lru.min-1.1.5.tgz",
+      "integrity": "sha512-5J9ysMYUpYIg9RF2vJpy9SinEmSviFSe0GyPpCQ4L5QSkLAgeLXlTAOu2ZwWUU5m+0SBl6gUU1R1ZQB3aKypfA==",
       "license": "MIT",
       "engines": {
         "bun": ">=1.0.0",
@@ -3851,35 +3960,36 @@
       "license": "MIT"
     },
     "node_modules/mysql2": {
-      "version": "3.15.3",
-      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.15.3.tgz",
-      "integrity": "sha512-FBrGau0IXmuqg4haEZRBfHNWB5mUARw6hNwPDXXGg0XzVJ50mr/9hb267lvpVMnhZ1FON3qNd4Xfcez1rbFwSg==",
+      "version": "3.24.4",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.24.4.tgz",
+      "integrity": "sha512-A2olluVlj0mvgyIRRISMEzXc51m+21mRtcMVjJyIpt2GG98+XrC9m9HzsqcMsX2LcnfccJvY5NB22g8fENBnOA==",
       "license": "MIT",
       "dependencies": {
-        "aws-ssl-profiles": "^1.1.1",
-        "denque": "^2.1.0",
+        "aws-ssl-profiles": "^1.1.2",
         "generate-function": "^2.3.1",
-        "iconv-lite": "^0.7.0",
-        "long": "^5.2.1",
-        "lru.min": "^1.0.0",
-        "named-placeholders": "^1.1.3",
-        "seq-queue": "^0.0.5",
-        "sqlstring": "^2.3.2"
+        "iconv-lite": "^0.7.3",
+        "long": "^5.3.2",
+        "lru.min": "^1.1.4",
+        "named-placeholders": "^1.1.6",
+        "sql-escaper": "^1.5.1"
       },
       "engines": {
         "node": ">= 8.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">= 8"
       }
     },
     "node_modules/named-placeholders": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.3.tgz",
-      "integrity": "sha512-eLoBxg6wE/rZkJPhU/xRX1WTpkFEwDJEN96oxFrTsqBdbT5ec295Q+CoHrL9IT0DipqKhmGcaZmwOt8OON5x1w==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.6.tgz",
+      "integrity": "sha512-Tz09sEL2EEuv5fFowm419c1+a/jSMiBjI9gHxVLrVdbUkkNUUfjsVYs9pVZu5oCon/kmRh9TfLEObFtkVxmY0w==",
       "license": "MIT",
       "dependencies": {
-        "lru-cache": "^7.14.1"
+        "lru.min": "^1.1.0"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=8.0.0"
       }
     },
     "node_modules/natural-compare": {
@@ -3904,10 +4014,14 @@
       "dev": true
     },
     "node_modules/node-releases": {
-      "version": "2.0.37",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.37.tgz",
-      "integrity": "sha512-1h5gKZCF+pO/o3Iqt5Jp7wc9rH3eJJ0+nh/CIoiRwjRxde/hAHyLPXYN4V3CqKAbiZPSeJFSWHmJsbkicta0Eg==",
-      "dev": true
+      "version": "2.0.54",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.54.tgz",
+      "integrity": "sha512-YHs7BmmcsdAI5Ozuf8JZo6PT0mv2GIWC9vMfvUC3dp65M8hn7Ux8CPL+2oBI7juNuj9d0ndhTcznq2ODBps9cQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -4118,8 +4232,7 @@
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
       "version": "2.3.2",
@@ -4293,11 +4406,13 @@
       ]
     },
     "node_modules/qs": {
-      "version": "6.15.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.1.tgz",
-      "integrity": "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==",
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.16.0.tgz",
+      "integrity": "sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "side-channel": "^1.1.0"
+        "es-define-property": "^1.0.1",
+        "side-channel": "^1.1.1"
       },
       "engines": {
         "node": ">=0.6"
@@ -4527,11 +4642,6 @@
         "node": ">= 18"
       }
     },
-    "node_modules/seq-queue": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/seq-queue/-/seq-queue-0.0.5.tgz",
-      "integrity": "sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q=="
-    },
     "node_modules/serve-static": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.0.tgz",
@@ -4575,14 +4685,14 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
-      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3",
-        "side-channel-list": "^1.0.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
         "side-channel-map": "^1.0.1",
         "side-channel-weakmap": "^1.0.2"
       },
@@ -4594,13 +4704,13 @@
       }
     },
     "node_modules/side-channel-list": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
-      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3"
+        "object-inspect": "^1.13.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4692,13 +4802,19 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true
     },
-    "node_modules/sqlstring": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz",
-      "integrity": "sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==",
+    "node_modules/sql-escaper": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/sql-escaper/-/sql-escaper-1.5.1.tgz",
+      "integrity": "sha512-4toX5E1fQbBrpfXidaHnF0669nkAdETeIPTs2SUjxxD7RRIs9ICG4gtpmfc68JCEKehsdwLFqBu9VlQqZ1P1gg==",
       "license": "MIT",
       "engines": {
-        "node": ">= 0.6"
+        "bun": ">=1.0.0",
+        "deno": ">=2.0.0",
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/mysqljs/sql-escaper?sponsor=1"
       }
     },
     "node_modules/stack-utils": {
@@ -4905,24 +5021,40 @@
       }
     },
     "node_modules/type-is": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
-      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.1.0.tgz",
+      "integrity": "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==",
       "license": "MIT",
       "dependencies": {
-        "content-type": "^1.0.5",
+        "content-type": "^2.0.0",
         "media-typer": "^1.1.0",
         "mime-types": "^3.0.0"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/type-is/node_modules/content-type": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/undici-types": {
       "version": "7.19.2",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.19.2.tgz",
-      "integrity": "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==",
-      "dev": true
+      "integrity": "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg=="
     },
     "node_modules/unpipe": {
       "version": "1.0.0",
@@ -4934,9 +5066,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
-      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.2.tgz",
+      "integrity": "sha512-UQ+MSxlhRm1bzjhU+DcuXfjFO1FzNtqhK5+9Yvlp90ItDLk5vT932A0rFu619nf7RVS+Y/VeaUW1jaRDqZ8VJw==",
       "dev": true,
       "funding": [
         {
@@ -4952,6 +5084,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "escalade": "^3.2.0",
         "picocolors": "^1.1.1"
@@ -5065,9 +5198,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.18.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.3.tgz",
+      "integrity": "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==",
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
@@ -5098,7 +5231,8 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/yargs": {
       "version": "17.7.2",
diff --git a/package.json b/package.json
index 60bb53c..dcb5763 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,9 @@
 {
   "name": "pulse-server",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "server.js",
   "scripts": {
+    "start": "node server.js",
     "test": "jest --coverage"
   },
   "keywords": [],
@@ -12,8 +13,10 @@
   "dependencies": {
     "cron-parser": "^5.5.0",
     "dotenv": "^17.2.3",
+    "ejs": "3.1.10",
     "express": "^5.1.0",
     "express-rate-limit": "^8.3.1",
+    "helmet": "8.1.0",
     "mysql2": "^3.15.3",
     "ws": "^8.18.3"
   },
diff --git a/public/.eslintrc.json b/public/.eslintrc.json
index a34f275..4430902 100644
--- a/public/.eslintrc.json
+++ b/public/.eslintrc.json
@@ -1,6 +1,13 @@
 {
     "env": { "browser": true, "es2021": true },
     "parserOptions": { "ecmaVersion": 2021, "sourceType": "script" },
+    "globals": {
+        "lt": "readonly",
+        "Pulse": "writable",
+        "CSRF_TOKEN": "readonly",
+        "CURRENT_USER": "readonly",
+        "PULSE_CONFIG": "readonly"
+    },
     "rules": {
         "no-unused-vars": "warn",
         "no-empty": "warn",
diff --git a/public/assets/app.css b/public/assets/app.css
new file mode 100644
index 0000000..4d04354
--- /dev/null
+++ b/public/assets/app.css
@@ -0,0 +1,184 @@
+/* =====================================================================
+   PULSE — shell additions on top of /web_template/base.css
+   ---------------------------------------------------------------------
+   Rules here are Pulse-specific only. No `.lt-*` base rule is redefined;
+   `.lt-*` selectors appear only as ancestors/descendants of a `.pulse-*`
+   class, or as scoped layout tweaks inside the Pulse header cluster.
+   Page-specific styles live in /assets/pages/<page>.css.
+   ===================================================================== */
+
+/* ---------------------------------------------------------------------
+   1. Header right cluster — WS status, last-refreshed stamp, buttons
+   --------------------------------------------------------------------- */
+.pulse-header-right,
+.lt-header-right:has(#pulse-ws-status) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  min-width: 0;
+  row-gap: 2px;
+}
+
+#pulse-last-refreshed {
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.04em;
+  color: var(--text-dim);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* The stamp is the first thing to go when space runs out. */
+@media (max-width: 767px) {
+  #pulse-last-refreshed { display: none; }
+}
+
+@media (max-width: 479px) {
+  .pulse-header-right,
+  .lt-header-right:has(#pulse-ws-status) { gap: var(--space-xs); }
+}
+
+/* ---------------------------------------------------------------------
+   2. Confirm / alert modal (built by Pulse.confirm / Pulse.alertModal)
+   --------------------------------------------------------------------- */
+.pulse-confirm .lt-modal-header { border-bottom: 1px solid var(--border-color); }
+.pulse-confirm .pulse-confirm-msg {
+  margin: 0;
+  font-size: 0.82rem;
+  line-height: 1.55;
+  color: var(--text-secondary);
+  overflow-wrap: anywhere;
+}
+.pulse-confirm .lt-modal-footer { gap: var(--space-sm); }
+
+.pulse-confirm--warning .lt-modal { border-top: 2px solid var(--accent-amber); }
+.pulse-confirm--error   .lt-modal { border-top: 2px solid var(--accent-red); }
+.pulse-confirm--info    .lt-modal { border-top: 2px solid var(--accent-cyan); }
+
+/* ---------------------------------------------------------------------
+   3. Compact meta line (base.css already provides .lt-kv-grid for
+   key/value blocks — use that; this is only for inline meta strings)
+   --------------------------------------------------------------------- */
+.pulse-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-xs) var(--space-md);
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: var(--text-dim);
+}
+.pulse-meta > span { white-space: nowrap; }
+.pulse-meta-label {
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+.pulse-meta-val { color: var(--text-secondary); }
+
+/* ---------------------------------------------------------------------
+   4. Log viewer wrapper — caps the height of a long .lt-log-output run
+   --------------------------------------------------------------------- */
+.pulse-log {
+  max-height: 420px;
+  overflow-y: auto;
+  overflow-x: auto;
+  background: var(--bg-terminal);
+  border: 1px solid var(--border-dim);
+  padding: var(--space-sm);
+}
+.pulse-log .lt-log-output {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.pulse-log--sm { max-height: 220px; }
+.pulse-log--lg { max-height: 60vh; }
+
+@media (max-width: 767px) {
+  .pulse-log { max-height: 300px; }
+}
+
+/* ---------------------------------------------------------------------
+   5. Running rows — amber left-border pulse (port of exec-running-pulse)
+   --------------------------------------------------------------------- */
+.pulse-running {
+  border-left: 2px solid var(--accent-amber);
+  animation: pulse-running-border 2s ease-in-out infinite;
+}
+
+@keyframes pulse-running-border {
+  0%, 100% { border-left-color: var(--accent-green); box-shadow: none; }
+  50%      { border-left-color: var(--accent-amber); box-shadow: -2px 0 8px rgba(255, 179, 0, 0.35); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pulse-running {
+    animation: none;
+    border-left-color: var(--accent-amber);
+  }
+}
+
+/* ---------------------------------------------------------------------
+   6. Utilities
+   --------------------------------------------------------------------- */
+.is-hidden { display: none !important; }
+
+.pulse-nowrap   { white-space: nowrap; }
+.pulse-mono     { font-family: var(--font-mono); }
+.pulse-dim      { color: var(--text-dim); }
+.pulse-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+
+/* ---------------------------------------------------------------------
+   7. Shared component gap-fillers (base.css does not ship these)
+   ---------------------------------------------------------------------
+   `.lt-modal-lg` — base.css ships .lt-modal-xs/.lt-modal-sm only, but
+   several Pulse pages need a wide modal (JSON editors, log viewers,
+   side-by-side compare). Sized the same way base.css sizes its own
+   modifiers, and re-capped at the two breakpoints base.css caps
+   `.lt-modal` at, because this selector is more specific than those.
+
+   `.lt-field-error` / `.is-invalid` — base.css references a field-error
+   hook but ships no visual style for it.
+   Both are candidates for upstreaming into base.css.
+   --------------------------------------------------------------------- */
+.lt-modal.lt-modal-lg {
+  width: min(900px, 95vw);
+  max-width: 900px;
+}
+@media (max-width: 767px) { .lt-modal.lt-modal-lg { max-width: 96vw; } }
+@media (max-width: 479px) { .lt-modal.lt-modal-lg { max-width: 100vw; } }
+
+.lt-field-error {
+  color: var(--accent-red);
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
+  margin-top: 4px;
+}
+
+.lt-input.is-invalid,
+.lt-textarea.is-invalid,
+.lt-select.is-invalid {
+  border-color: var(--accent-red);
+}
+
+/* ---------------------------------------------------------------------
+   8. Light theme overrides for the additions above
+   --------------------------------------------------------------------- */
+html[data-theme="light"] #pulse-last-refreshed { color: var(--text-muted); }
+
+html[data-theme="light"] .pulse-confirm .pulse-confirm-msg { color: var(--text-secondary); }
+
+html[data-theme="light"] .pulse-log {
+  background: var(--bg-tertiary);
+  border-color: var(--border-color);
+}
+
+html[data-theme="light"] .pulse-meta       { color: var(--text-muted); }
+html[data-theme="light"] .pulse-meta-val   { color: var(--text-primary); }
+html[data-theme="light"] .pulse-dim        { color: var(--text-muted); }
+
+html[data-theme="light"] .pulse-running {
+  box-shadow: none;
+}
diff --git a/public/assets/app.js b/public/assets/app.js
new file mode 100644
index 0000000..4dcf3b9
--- /dev/null
+++ b/public/assets/app.js
@@ -0,0 +1,685 @@
+/* =====================================================================
+   PULSE — shared frontend shell (WP-B)
+   ---------------------------------------------------------------------
+   Loaded after /web_template/base.js and before /assets/pages/<page>.js.
+   Exposes the frozen `window.Pulse` contract consumed by page modules.
+   ===================================================================== */
+'use strict';
+
+/* ---------------------------------------------------------------------
+   0. 401 → reload wrapper. Installed first, before anything can fetch.
+   Authelia sessions expire; a 401 means "log in again", so force a full
+   document reload which bounces through the SSO portal.
+   --------------------------------------------------------------------- */
+(function () {
+  const _fetch = window.fetch;
+  if (typeof _fetch !== 'function' || _fetch.__pulseWrapped) return;
+  const wrapped = async function (...args) {
+    const resp = await _fetch.apply(window, args);
+    if (resp.status === 401) {
+      window.location.reload();
+      throw new Error('Session expired — reloading');
+    }
+    return resp;
+  };
+  wrapped.__pulseWrapped = true;
+  window.fetch = wrapped;
+})();
+
+(function (global) {
+  const LOG = '[Pulse]';
+  const noopLt = {};
+  /** base.js is a hard dependency, but never let its absence blank the page. */
+  function LT() { return global.lt || noopLt; }
+
+  function warn() {
+    const a = Array.prototype.slice.call(arguments);
+    console.warn.apply(console, [LOG].concat(a));
+  }
+  function err() {
+    const a = Array.prototype.slice.call(arguments);
+    console.error.apply(console, [LOG].concat(a));
+  }
+
+  /* -------------------------------------------------------------------
+     1. Escaping / formatting helpers
+     Output formats are byte-compatible with the pre-redesign index.html
+     helpers so page modules render identical strings.
+     ------------------------------------------------------------------- */
+  function esc(text) {
+    if (text === null || text === undefined) return '';
+    if (LT().escHtml) return LT().escHtml(text);
+    const div = document.createElement('div');
+    div.textContent = String(text);
+    return div.innerHTML;
+  }
+
+  /** null for falsy/invalid, otherwise a Date. */
+  function safeDate(val) {
+    if (!val) return null;
+    const d = val instanceof Date ? val : new Date(val);
+    return isNaN(d.getTime()) ? null : d;
+  }
+
+  /** '0 B' for falsy; one decimal otherwise. */
+  function formatBytes(bytes) {
+    if (!bytes || bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1);
+    return (bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i];
+  }
+
+  /** 'Nd Nh Nm' / 'Nh Nm' / 'Nm'; 'N/A' for falsy. */
+  function formatUptime(seconds) {
+    if (!seconds) return 'N/A';
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    if (days > 0) return days + 'd ' + hours + 'h ' + minutes + 'm';
+    if (hours > 0) return hours + 'h ' + minutes + 'm';
+    return minutes + 'm';
+  }
+
+  /** 'Ns ago' / 'Nm ago' / 'Nh ago' / 'Nd ago'; 'just now' if in the future. */
+  function timeAgo(date) {
+    const d = date instanceof Date ? date : safeDate(date);
+    if (!d || isNaN(d.getTime())) return 'N/A';
+    const seconds = Math.floor((Date.now() - d.getTime()) / 1000);
+    if (seconds < 0) return 'just now';
+    if (seconds < 60) return seconds + 's ago';
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return minutes + 'm ago';
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return hours + 'h ago';
+    return Math.floor(hours / 24) + 'd ago';
+  }
+
+  /** 'Ns' / 'Nm Ns' / 'Nh Nm'; '' when startedAt is unusable. */
+  function formatElapsed(startedAt) {
+    const start = safeDate(startedAt);
+    if (!start) return '';
+    const secs = Math.floor((Date.now() - start.getTime()) / 1000);
+    if (secs < 60) return secs + 's';
+    const mins = Math.floor(secs / 60);
+    if (mins < 60) return mins + 'm ' + (secs % 60) + 's';
+    return Math.floor(mins / 60) + 'h ' + (mins % 60) + 'm';
+  }
+
+  /** HH:MM:SS in local time. */
+  function clock(d) {
+    const date = d instanceof Date ? d : (safeDate(d) || new Date());
+    const p = n => String(n).padStart(2, '0');
+    return p(date.getHours()) + ':' + p(date.getMinutes()) + ':' + p(date.getSeconds());
+  }
+
+  /** toLocaleString(), or 'N/A'. */
+  function dateTime(val) {
+    const d = safeDate(val);
+    return d ? d.toLocaleString() : 'N/A';
+  }
+
+  const STATUS_CLASSES = {
+    online: 'online',
+    offline: 'offline',
+    running: 'running',
+    completed: 'completed',
+    failed: 'failed',
+    waiting: 'pending',
+  };
+  /** Badge classes for a status string. */
+  function statusClass(status) {
+    const key = String(status || '').toLowerCase();
+    return 'lt-status lt-status-' + (STATUS_CLASSES[key] || 'pending');
+  }
+
+  const fmt = {
+    elapsed: formatElapsed,
+    safeDate: safeDate,
+    bytes: formatBytes,
+    uptime: formatUptime,
+    ago: timeAgo,
+    clock: clock,
+    dateTime: dateTime,
+    status: statusClass,
+  };
+
+  /* -------------------------------------------------------------------
+     2. Small utilities
+     ------------------------------------------------------------------- */
+  function download(filename, text, mime) {
+    try {
+      const blob = new Blob([text], { type: mime || 'text/plain;charset=utf-8' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename || 'download.txt';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      setTimeout(() => URL.revokeObjectURL(url), 1000);
+    } catch (e) {
+      err('download failed', e);
+    }
+  }
+
+  /* Verbatim localStorage keys — `commandHistory` and `pulse_executionView`
+     must keep working across the redesign, so NO prefix is applied. */
+  const storage = {
+    get(key, fallback) {
+      try {
+        const raw = localStorage.getItem(key);
+        if (raw === null) return fallback !== undefined ? fallback : null;
+        return JSON.parse(raw);
+      } catch (e) {
+        return fallback !== undefined ? fallback : null;
+      }
+    },
+    set(key, value) {
+      try {
+        localStorage.setItem(key, JSON.stringify(value));
+        return true;
+      } catch (e) {
+        warn('storage.set failed for', key, e);
+        return false;
+      }
+    },
+    remove(key) {
+      try { localStorage.removeItem(key); } catch (e) { /* ignore */ }
+    },
+  };
+
+  /* -------------------------------------------------------------------
+     3. Event bus (Pulse-local, independent of lt.bus)
+     ------------------------------------------------------------------- */
+  const _handlers = new Map();
+  const events = {
+    on(type, fn) {
+      if (typeof fn !== 'function') return;
+      if (!_handlers.has(type)) _handlers.set(type, []);
+      _handlers.get(type).push(fn);
+    },
+    off(type, fn) {
+      const list = _handlers.get(type);
+      if (list) _handlers.set(type, list.filter(f => f !== fn));
+    },
+    emit(type, data) {
+      const list = _handlers.get(type);
+      if (!list || !list.length) return;
+      list.slice().forEach(fn => {
+        try { fn(data, type); } catch (e) { err('event handler for "' + type + '"', e); }
+      });
+    },
+  };
+
+  /* -------------------------------------------------------------------
+     4. Action registry + delegated listeners
+     ------------------------------------------------------------------- */
+  const _actions = Object.create(null);
+  const _warned = Object.create(null);
+
+  const actions = {
+    register(name, fn) {
+      if (!name || typeof fn !== 'function') { warn('actions.register: bad arguments', name); return; }
+      if (_actions[name]) warn('action "' + name + '" re-registered');
+      _actions[name] = fn;
+    },
+    registerAll(map) {
+      Object.keys(map || {}).forEach(name => actions.register(name, map[name]));
+    },
+    has(name) { return !!_actions[name]; },
+    names() { return Object.keys(_actions); },
+  };
+
+  function runAction(name, el, ev) {
+    const fn = _actions[name];
+    if (!fn) {
+      if (!_warned[name]) { _warned[name] = true; warn('unknown action "' + name + '"'); }
+      return;
+    }
+    try {
+      const r = fn(el, ev);
+      if (r && typeof r.catch === 'function') {
+        r.catch(e => err('action "' + name + '" rejected', e));
+      }
+    } catch (e) {
+      err('action "' + name + '" threw', e);
+    }
+  }
+
+  function isDisabled(el) {
+    return el.disabled === true || el.getAttribute('aria-disabled') === 'true' || el.classList.contains('is-disabled');
+  }
+
+  function installDelegation() {
+    document.addEventListener('click', function (ev) {
+      let el;
+      try { el = ev.target.closest && ev.target.closest('[data-action]'); } catch (e) { return; }
+      if (!el) return;
+      if (isDisabled(el)) { ev.preventDefault(); return; }
+      const tag = el.tagName;
+      if ((tag === 'A' && (el.getAttribute('href') === '#' || el.getAttribute('href') === '')) ||
+          (tag === 'BUTTON' && el.form && !el.getAttribute('type'))) {
+        ev.preventDefault();
+      }
+      runAction(el.getAttribute('data-action'), el, ev);
+    });
+
+    document.addEventListener('change', function (ev) {
+      let el;
+      try { el = ev.target.closest && ev.target.closest('[data-change-action]'); } catch (e) { return; }
+      if (!el || isDisabled(el)) return;
+      runAction(el.getAttribute('data-change-action'), el, ev);
+    });
+
+    /* Per-element 200 ms debounce, so two search boxes never share a timer. */
+    const _debounced = new WeakMap();
+    document.addEventListener('input', function (ev) {
+      let el;
+      try { el = ev.target.closest && ev.target.closest('[data-input-action]'); } catch (e) { return; }
+      if (!el || isDisabled(el)) return;
+      let fn = _debounced.get(el);
+      if (!fn) {
+        const mk = LT().debounce || function (f, ms) {
+          let t;
+          return function () {
+            const a = arguments, c = this;
+            clearTimeout(t);
+            t = setTimeout(() => f.apply(c, a), ms);
+          };
+        };
+        fn = mk(function (e) { runAction(el.getAttribute('data-input-action'), el, e); }, 200);
+        _debounced.set(el, fn);
+      }
+      fn(ev);
+    });
+
+    document.addEventListener('submit', function (ev) {
+      let el;
+      try { el = ev.target.closest && ev.target.closest('form[data-submit-action]'); } catch (e) { return; }
+      if (!el) return;
+      ev.preventDefault();
+      runAction(el.getAttribute('data-submit-action'), el, ev);
+    });
+  }
+
+  /* -------------------------------------------------------------------
+     5. Confirm / alert modals (ported from tinker_tickets utils.js)
+     ------------------------------------------------------------------- */
+  const MODAL_COLORS = {
+    warning: 'var(--accent-amber)',
+    error: 'var(--accent-red)',
+    info: 'var(--accent-cyan)',
+  };
+  const MODAL_ICONS = { warning: '[ ! ]', error: '[ X ]', info: '[ i ]' };
+  let _modalSeq = 0;
+
+  function buildModal(opts, withCancel) {
+    const o = opts || {};
+    const type = MODAL_ICONS[o.type] ? o.type : 'warning';
+    const id = 'pulse-confirm-' + (++_modalSeq) + '-' + Date.now();
+    const color = MODAL_COLORS[type];
+    const icon = MODAL_ICONS[type];
+    const title = esc(o.title || (withCancel ? 'Confirm' : 'Notice'));
+    const message = esc(o.message === null || o.message === undefined ? '' : o.message).replace(/\n/g, '<br>');
+    const confirmLabel = esc(o.confirmLabel || (withCancel ? 'CONFIRM' : 'OK'));
+    const cancelLabel = esc(o.cancelLabel || 'CANCEL');
+    const confirmClass = type === 'error' ? 'lt-btn lt-btn-danger' : 'lt-btn lt-btn-primary';
+
+    const html =
+      '<div class="lt-modal-overlay pulse-confirm pulse-confirm--' + type + '" id="' + id + '"' +
+        ' aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="' + id + '-title">' +
+        '<div class="lt-modal lt-modal-sm">' +
+          '<div class="lt-modal-header" style="color:' + color + ';">' +
+            '<span class="lt-modal-title" id="' + id + '-title">' + icon + ' ' + title + '</span>' +
+            '<button type="button" class="lt-modal-close" data-modal-close aria-label="Close">✕</button>' +
+          '</div>' +
+          '<div class="lt-modal-body">' +
+            '<p class="pulse-confirm-msg">' + message + '</p>' +
+          '</div>' +
+          '<div class="lt-modal-footer">' +
+            '<button type="button" class="' + confirmClass + '" id="' + id + '-confirm">' + confirmLabel + '</button>' +
+            (withCancel
+              ? '<button type="button" class="lt-btn lt-btn-ghost" id="' + id + '-cancel">' + cancelLabel + '</button>'
+              : '') +
+          '</div>' +
+        '</div>' +
+      '</div>';
+
+    document.body.insertAdjacentHTML('beforeend', html);
+    return { id: id, el: document.getElementById(id), type: type };
+  }
+
+  function openModalEl(built, settle) {
+    const el = built.el;
+    let done = false;
+    function finish(result) {
+      if (done) return;
+      done = true;
+      try {
+        if (LT().modal && el.classList.contains('is-open')) LT().modal.close(el);
+        else el.classList.remove('is-open');
+      } catch (e) { err('modal close failed', e); }
+      setTimeout(() => { if (el && el.parentNode) el.parentNode.removeChild(el); }, 300);
+      settle(result);
+    }
+    /* ESC and backdrop clicks are handled globally by base.js, which fires
+       lt:modalclose — treat both as a cancel. */
+    el.addEventListener('lt:modalclose', () => finish(false));
+    return finish;
+  }
+
+  function confirmModal(opts) {
+    return new Promise(resolve => {
+      let built;
+      try { built = buildModal(opts, true); } catch (e) { err('confirm build failed', e); resolve(false); return; }
+      const finish = openModalEl(built, resolve);
+      const confirmBtn = document.getElementById(built.id + '-confirm');
+      const cancelBtn = document.getElementById(built.id + '-cancel');
+      if (confirmBtn) confirmBtn.addEventListener('click', () => finish(true));
+      if (cancelBtn) cancelBtn.addEventListener('click', () => finish(false));
+      try { if (LT().modal) LT().modal.open(built.el); else built.el.classList.add('is-open'); } catch (e) { err(e); }
+      /* Destructive prompts should not have CONFIRM under the cursor/keyboard. */
+      if ((built.type === 'error' || built.type === 'warning') && cancelBtn) {
+        setTimeout(() => { try { cancelBtn.focus(); } catch (e) { /* ignore */ } }, 60);
+      }
+    });
+  }
+
+  function alertModal(opts) {
+    return new Promise(resolve => {
+      let built;
+      try { built = buildModal(opts, false); } catch (e) { err('alert build failed', e); resolve(); return; }
+      const finish = openModalEl(built, () => resolve());
+      const okBtn = document.getElementById(built.id + '-confirm');
+      if (okBtn) okBtn.addEventListener('click', () => finish(true));
+      try { if (LT().modal) LT().modal.open(built.el); else built.el.classList.add('is-open'); } catch (e) { err(e); }
+    });
+  }
+
+  /* -------------------------------------------------------------------
+     6. Page registration & refresh
+     ------------------------------------------------------------------- */
+  let _booted = false;
+  let _pageInited = false;
+
+  function registerPage(page) {
+    if (!page || typeof page !== 'object') { warn('registerPage: expected an object'); return; }
+    Pulse.page = page;
+    if (_booted) initPage();
+  }
+
+  async function initPage() {
+    const page = Pulse.page;
+    if (!page || _pageInited) return;
+    _pageInited = true;
+    if (typeof page.init !== 'function') return;
+    try {
+      await page.init();
+    } catch (e) {
+      err('page init failed', e);
+      toastSafe('error', 'Page failed to initialise');
+    }
+  }
+
+  function toastSafe(kind, msg) {
+    try {
+      const t = LT().toast;
+      if (t && t[kind]) t[kind](msg);
+      else console.log(LOG, kind + ':', msg);
+    } catch (e) { /* never let a toast break a handler */ }
+  }
+
+  function stampRefreshed() {
+    const el = document.getElementById('pulse-last-refreshed');
+    if (el) el.textContent = 'Refreshed: ' + clock(new Date());
+  }
+
+  async function refreshNow() {
+    const page = Pulse.page;
+    if (page && typeof page.refresh === 'function') {
+      try {
+        await page.refresh();
+      } catch (e) {
+        err('page refresh failed', e);
+        toastSafe('error', 'Refresh failed');
+      }
+    }
+    stampRefreshed();
+  }
+
+  /* -------------------------------------------------------------------
+     7. WebSocket
+     ------------------------------------------------------------------- */
+  const KNOWN_TYPES = [
+    'command_result', 'workflow_result', 'worker_update', 'execution_started',
+    'execution_status', 'workflow_created', 'workflow_deleted', 'workflow_updated',
+    'execution_prompt', 'executions_bulk_deleted',
+  ];
+
+  let _wsHandle = null;
+  let _wasDisconnected = false;
+
+  function wsUrl() {
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    return proto + '//' + location.host;
+  }
+
+  function setWsStatus(state) {
+    const el = document.getElementById('pulse-ws-status');
+    if (!el) return;
+    el.setAttribute('data-state', state);
+    const labels = { connected: 'Connected', connecting: 'Connecting…', disconnected: 'Disconnected' };
+    const span = el.querySelector('span:last-child');
+    if (span) span.textContent = labels[state] || state;
+  }
+
+  function handleWsMessage(data) {
+    try {
+      if (!data || typeof data !== 'object' || !data.type) return;
+
+      if (data.type === 'command_result' && !data.is_automated) {
+        if (data.success) toastSafe('success', 'Command completed successfully');
+        else toastSafe('error', 'Command execution failed');
+      }
+
+      let handled = false;
+      const page = Pulse.page;
+      if (page && typeof page.onEvent === 'function') {
+        try {
+          handled = page.onEvent(data.type, data) === true;
+        } catch (e) {
+          err('page onEvent failed for "' + data.type + '"', e);
+        }
+      }
+
+      events.emit(data.type, data);
+
+      if (KNOWN_TYPES.indexOf(data.type) === -1 && !handled) {
+        refreshNow();
+      }
+    } catch (e) {
+      err('WebSocket message handling failed', e);
+    }
+  }
+
+  function onWsOpen() {
+    setWsStatus('connected');
+    if (_wasDisconnected) {
+      _wasDisconnected = false;
+      toastSafe('info', 'Live updates reconnected');
+      refreshNow();
+    }
+  }
+
+  function onWsClose() {
+    _wasDisconnected = true;
+    setWsStatus('disconnected');
+  }
+
+  /** Raw-WebSocket fallback used only when lt.ws is missing. */
+  function connectRawWs() {
+    let sock;
+    function open() {
+      setWsStatus('connecting');
+      try { sock = new WebSocket(wsUrl()); } catch (e) { err('WebSocket create failed', e); setTimeout(open, 5000); return; }
+      sock.addEventListener('open', onWsOpen);
+      sock.addEventListener('message', ev => {
+        let data = ev.data;
+        try { data = JSON.parse(ev.data); } catch (e) { /* non-JSON frame */ }
+        handleWsMessage(data);
+      });
+      sock.addEventListener('close', () => { onWsClose(); setTimeout(open, 5000); });
+      sock.addEventListener('error', e => warn('WebSocket error', e));
+    }
+    open();
+    return { send(d) { if (sock && sock.readyState === 1) { sock.send(typeof d === 'string' ? d : JSON.stringify(d)); return true; } return false; } };
+  }
+
+  function connectWs() {
+    try {
+      if (LT().ws && typeof LT().ws.connect === 'function') {
+        _wsHandle = LT().ws.connect(wsUrl(), {
+          statusEl: '#pulse-ws-status',
+          reconnect: true,
+          reconnectDelay: 2000,
+          maxRetries: Number.MAX_SAFE_INTEGER,
+          onOpen: onWsOpen,
+          onClose: onWsClose,
+          onError: e => warn('WebSocket error', e),
+          onMessage: handleWsMessage,
+        });
+      } else {
+        warn('lt.ws unavailable — using raw WebSocket fallback');
+        _wsHandle = connectRawWs();
+      }
+    } catch (e) {
+      err('WebSocket setup failed', e);
+      try { _wsHandle = connectRawWs(); } catch (e2) { err('WebSocket fallback failed', e2); }
+    }
+  }
+
+  /* -------------------------------------------------------------------
+     8. Boot
+     ------------------------------------------------------------------- */
+  const NAV_ROUTES = [
+    { id: 'nav-dashboard', label: 'Dashboard', path: '/', tags: ['home', 'overview'] },
+    { id: 'nav-workers', label: 'Workers', path: '/workers', tags: ['agents', 'hosts'] },
+    { id: 'nav-workflows', label: 'Workflows', path: '/workflows', tags: ['jobs'] },
+    { id: 'nav-executions', label: 'Executions', path: '/executions', tags: ['history', 'logs', 'runs'] },
+    { id: 'nav-quick', label: 'Quick Command', path: '/quick', tags: ['run', 'shell', 'command'] },
+    { id: 'nav-scheduler', label: 'Scheduler', path: '/scheduler', tags: ['cron', 'schedule'] },
+  ];
+
+  function openKeysHelp() {
+    const help = document.getElementById('lt-keys-help');
+    if (help && LT().modal) LT().modal.open(help);
+  }
+
+  function buildCommands() {
+    const cmds = NAV_ROUTES.map(r => ({
+      id: r.id,
+      label: r.label,
+      icon: '→',
+      group: 'Navigate',
+      tags: r.tags,
+      action: () => { window.location.href = r.path; },
+    }));
+    cmds.push(
+      { id: 'act-refresh', label: 'Refresh', icon: '⟳', group: 'Actions', kbd: 'R', tags: ['reload'], action: () => refreshNow() },
+      { id: 'act-theme', label: 'Toggle Theme', icon: '◐', group: 'Actions', tags: ['dark', 'light'], action: () => { if (LT().theme) LT().theme.toggle(); } },
+      { id: 'help-keys', label: 'Keyboard Shortcuts', icon: '?', group: 'Help', kbd: '?', tags: ['keys', 'shortcuts'], action: openKeysHelp }
+    );
+    return cmds;
+  }
+
+  let _tickTimer = null;
+  function startTicker() {
+    if (_tickTimer) return;
+    _tickTimer = setInterval(() => {
+      if (document.hidden) return;          // cheap: no work while backgrounded
+      if (!_handlers.has('tick')) return;
+      events.emit('tick');
+    }, 1000);
+  }
+
+  function boot() {
+    if (_booted) return;
+    _booted = true;
+
+    try { if (LT().init) LT().init({ bootName: 'PULSE' }); } catch (e) { err('lt.init failed', e); }
+
+    const themeBtn = document.getElementById('lt-theme-btn');
+    if (themeBtn) themeBtn.addEventListener('click', () => { if (LT().theme) LT().theme.toggle(); });
+
+    try { if (LT().cmdPalette) LT().cmdPalette.init(buildCommands()); } catch (e) { err('cmdPalette init failed', e); }
+
+    try {
+      if (LT().keys) {
+        LT().keys.on('r', () => refreshNow());
+        LT().keys.on('?', openKeysHelp);
+      }
+    } catch (e) { err('key binding failed', e); }
+
+    connectWs();
+    startTicker();
+
+    initPage();
+
+    /* The ONLY autoRefresh registration in the whole app. Page modules must
+       never call lt.autoRefresh — they get refreshed through page.refresh(). */
+    try {
+      if (LT().autoRefresh) LT().autoRefresh.start(() => refreshNow(), 30000);
+    } catch (e) { err('autoRefresh start failed', e); }
+  }
+
+  /* -------------------------------------------------------------------
+     9. Public surface
+     ------------------------------------------------------------------- */
+  const Pulse = {
+    user: global.CURRENT_USER || { username: '', name: '', email: '', groups: [], isAdmin: false },
+    isAdmin: false,
+    config: global.PULSE_CONFIG || {},
+    page: null,
+
+    actions: actions,
+    events: events,
+    registerPage: registerPage,
+    refreshNow: refreshNow,
+    confirm: confirmModal,
+    alertModal: alertModal,
+
+    get api() { return LT().api; },
+    get toast() { return LT().toast; },
+    get beep() { return LT().beep; },
+    esc: esc,
+    fmt: fmt,
+    util: { download: download, storage: storage },
+
+    /** Escape hatch for pages that need to push a frame upstream. */
+    ws: { send(d) { return _wsHandle && _wsHandle.send ? _wsHandle.send(d) : false; }, get handle() { return _wsHandle; } },
+  };
+
+  Pulse.isAdmin = !!(Pulse.user && Pulse.user.isAdmin) || !!(Pulse.config && Pulse.config.isAdmin);
+
+  global.Pulse = Pulse;
+
+  /* Reserved global actions (unprefixed namespace belongs to app.js). */
+  actions.registerAll({
+    'app:refresh': () => refreshNow(),
+    'app:theme': () => { if (LT().theme) LT().theme.toggle(); },
+    'open-nav-drawer': () => { if (LT().mobileNav) LT().mobileNav.open(); },
+    'open-cmdpalette': () => { if (LT().cmdPalette) LT().cmdPalette.open(); },
+    'app:keys-help': openKeysHelp,
+  });
+
+  installDelegation();
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot);
+  } else {
+    /* Script ran after parsing (deferred/injected): boot on the next tick so a
+       page module loaded right after us can still register before init(). */
+    setTimeout(boot, 0);
+  }
+})(window);
diff --git a/public/assets/favicon.png b/public/assets/favicon.png
new file mode 100644
index 0000000..75ed13f
Binary files /dev/null and b/public/assets/favicon.png differ
diff --git a/public/assets/pages/dashboard.css b/public/assets/pages/dashboard.css
new file mode 100644
index 0000000..d656d2e
--- /dev/null
+++ b/public/assets/pages/dashboard.css
@@ -0,0 +1,36 @@
+/* Dashboard page (WP-C) — recent executions / workers summary layout. */
+.dash-worker-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-worker-row {
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--border-color-dim);
+}
+.dash-worker-row:last-child { border-bottom: none; }
+
+.dash-worker-main {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+.dash-worker-name {
+  font-weight: 700;
+}
+
+.dash-worker-lastseen {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+
+.dash-worker-stats {
+  display: flex;
+  gap: var(--space-md);
+  font-size: 0.7rem;
+  color: var(--text-secondary);
+  margin-top: 4px;
+}
diff --git a/public/assets/pages/dashboard.js b/public/assets/pages/dashboard.js
new file mode 100644
index 0000000..17ed753
--- /dev/null
+++ b/public/assets/pages/dashboard.js
@@ -0,0 +1,223 @@
+/* =====================================================================
+   PULSE — Dashboard page (WP-C)
+   Owns DOM id prefix `dash-` and action namespace `dash:*`.
+   ===================================================================== */
+'use strict';
+
+(function () {
+  const esc = Pulse.esc;
+  const fmt = Pulse.fmt;
+
+  let _executions = [];
+  let _workers = [];
+
+  function parseMeta(worker) {
+    if (!worker || !worker.metadata) return null;
+    if (typeof worker.metadata === 'string') {
+      try { return JSON.parse(worker.metadata); } catch (e) { return null; }
+    }
+    return worker.metadata;
+  }
+
+  function isAutomated(exec) {
+    const by = String((exec && exec.started_by) || '');
+    return by.indexOf('gandalf:') === 0 || by.indexOf('scheduler:') === 0;
+  }
+
+  /* -------------------------------------------------------------------
+     Stats
+     ------------------------------------------------------------------- */
+  function renderStats(workers, runningTotal) {
+    const total = workers.length;
+    const online = workers.filter(w => w.status === 'online').length;
+    const offline = total - online;
+    const set = (id, val) => {
+      const el = document.getElementById(id);
+      if (el) el.textContent = String(val);
+    };
+    set('dash-stat-total-val', total);
+    set('dash-stat-online-val', online);
+    set('dash-stat-offline-val', offline);
+    set('dash-stat-running-val', runningTotal);
+  }
+
+  /* -------------------------------------------------------------------
+     Recent executions (5 most recent manual runs)
+     ------------------------------------------------------------------- */
+  function executionRowHtml(e) {
+    const statusClass = fmt.status(e.status);
+    const statusText = esc(String(e.status || '').toUpperCase());
+    const name = e.workflow_name ? esc(e.workflow_name) : '[Quick Command]';
+    const startedBy = esc(e.started_by || '');
+    const startedAt = fmt.dateTime(e.started_at);
+    const isRunning = String(e.status || '').toLowerCase() === 'running';
+    const elapsed = isRunning ? esc(fmt.elapsed(e.started_at)) : '&mdash;';
+    return (
+      '<tr data-action="dash:open-execution" data-execution-id="' + esc(e.id) + '">' +
+        '<td data-label="Status"><span class="' + statusClass + '">' + statusText + '</span></td>' +
+        '<td data-label="Name">' + name + '</td>' +
+        '<td data-label="Started By">' + startedBy + '</td>' +
+        '<td data-label="Started At">' + esc(startedAt) + '</td>' +
+        '<td data-label="Elapsed" class="dash-elapsed"' +
+          (isRunning ? ' data-started-at="' + esc(e.started_at) + '"' : '') + '>' + elapsed + '</td>' +
+      '</tr>'
+    );
+  }
+
+  function renderExecutions(executions) {
+    const wrap = document.getElementById('dash-executions-wrap');
+    if (!wrap) return;
+    const manual = executions.filter(e => !isAutomated(e)).slice(0, 5);
+    if (manual.length === 0) {
+      wrap.innerHTML =
+        '<div class="lt-empty-state lt-empty-state--sm">' +
+          '<div class="lt-empty-state-title">No executions yet</div>' +
+        '</div>';
+      return;
+    }
+    wrap.innerHTML =
+      '<table class="lt-table lt-table-sm lt-table-responsive">' +
+        '<thead><tr><th>Status</th><th>Name</th><th>Started By</th><th>Started At</th><th>Elapsed</th></tr></thead>' +
+        '<tbody>' + manual.map(executionRowHtml).join('') + '</tbody>' +
+      '</table>';
+  }
+
+  /* -------------------------------------------------------------------
+     Workers summary
+     ------------------------------------------------------------------- */
+  function workerRowHtml(w) {
+    const meta = parseMeta(w);
+    const dotClass = w.status === 'online' ? 'lt-dot-up' : 'lt-dot-down';
+    const statusClass = fmt.status(w.status);
+    const lastSeen = fmt.ago(w.last_heartbeat);
+    let stats = '';
+    if (meta) {
+      stats =
+        '<span>CPU: ' + esc(meta.cpus || '?') + ' cores</span>' +
+        '<span>RAM: ' + fmt.bytes(meta.totalMem - meta.freeMem) + ' / ' + fmt.bytes(meta.totalMem) + '</span>' +
+        '<span>Tasks: ' + esc(meta.activeTasks || 0) + '/' + esc(meta.maxConcurrentTasks || 0) + '</span>';
+    }
+    return (
+      '<div class="dash-worker-row" data-worker-id="' + esc(w.id) + '">' +
+        '<div class="dash-worker-main">' +
+          '<span class="lt-dot ' + dotClass + '"></span>' +
+          '<span class="dash-worker-name">' + esc(w.name) + '</span>' +
+          '<span class="' + statusClass + '">' + esc(String(w.status || '').toUpperCase()) + '</span>' +
+          '<span class="dash-worker-lastseen" data-last-heartbeat="' + esc(w.last_heartbeat || '') + '">Last seen: ' + esc(lastSeen) + '</span>' +
+        '</div>' +
+        (stats ? '<div class="dash-worker-stats">' + stats + '</div>' : '') +
+      '</div>'
+    );
+  }
+
+  function renderWorkers(workers) {
+    const wrap = document.getElementById('dash-workers-wrap');
+    if (!wrap) return;
+    if (workers.length === 0) {
+      wrap.innerHTML =
+        '<div class="lt-empty-state lt-empty-state--sm">' +
+          '<div class="lt-empty-state-title">No workers connected</div>' +
+        '</div>';
+      return;
+    }
+    wrap.innerHTML = '<div class="dash-worker-list">' + workers.map(workerRowHtml).join('') + '</div>';
+  }
+
+  /* -------------------------------------------------------------------
+     Live tick — update elapsed times on running rows and worker last-seen
+     ------------------------------------------------------------------- */
+  function onTick() {
+    document.querySelectorAll('#dash-executions-wrap .dash-elapsed[data-started-at]').forEach(el => {
+      el.textContent = fmt.elapsed(el.getAttribute('data-started-at'));
+    });
+    document.querySelectorAll('#dash-workers-wrap .dash-worker-lastseen[data-last-heartbeat]').forEach(el => {
+      const v = el.getAttribute('data-last-heartbeat');
+      if (v) el.textContent = 'Last seen: ' + fmt.ago(v);
+    });
+  }
+
+  /* -------------------------------------------------------------------
+     Data loading
+     ------------------------------------------------------------------- */
+  /* Toast a load failure at most once per outage, so the 30 s auto-refresh
+     does not stack a toast every cycle while the API is down. */
+  let _loadFailed = false;
+  function reportLoadError(what, e) {
+    console.error('[Pulse:dashboard] failed to load ' + what, e);
+    if (_loadFailed) return;
+    _loadFailed = true;
+    if (Pulse.toast) Pulse.toast.error((e && e.message) || ('Failed to load ' + what));
+  }
+
+  async function loadWorkers() {
+    try {
+      _workers = await Pulse.api.get('/api/workers') || [];
+      _loadFailed = false;
+    } catch (e) {
+      _workers = [];
+      reportLoadError('workers', e);
+    }
+    renderWorkers(_workers);
+    return _workers;
+  }
+
+  async function loadExecutions() {
+    try {
+      const data = await Pulse.api.get('/api/executions?limit=50&hide_internal=true');
+      _executions = (data && data.executions) || [];
+    } catch (e) {
+      _executions = [];
+      reportLoadError('executions', e);
+    }
+    renderExecutions(_executions);
+    return _executions;
+  }
+
+  async function loadRunningCount() {
+    try {
+      const data = await Pulse.api.get('/api/executions?status=running&limit=1');
+      return (data && data.total) || 0;
+    } catch (e) {
+      console.error('[Pulse:dashboard] failed to load running count', e);
+      return 0;
+    }
+  }
+
+  async function refresh() {
+    const [workers, , runningTotal] = await Promise.all([
+      loadWorkers(),
+      loadExecutions(),
+      loadRunningCount(),
+    ]);
+    renderStats(workers, runningTotal);
+  }
+
+  function init() {
+    Pulse.actions.registerAll({
+      'dash:goto-workers': () => { window.location.href = '/workers'; },
+      'dash:goto-executions': () => { window.location.href = '/executions'; },
+      'dash:open-execution': (el) => {
+        const id = el.getAttribute('data-execution-id');
+        if (id) window.location.href = '/executions?open=' + encodeURIComponent(id);
+      },
+    });
+    Pulse.events.on('tick', onTick);
+    return refresh();
+  }
+
+  function onEvent(type) {
+    if (type === 'worker_update') {
+      Promise.all([loadWorkers(), loadRunningCount()]).then(([workers, rt]) => renderStats(workers, rt));
+      return true;
+    }
+    if (type === 'execution_started' || type === 'execution_status' ||
+        type === 'command_result' || type === 'workflow_result' ||
+        type === 'executions_bulk_deleted') {
+      Promise.all([loadExecutions(), loadRunningCount()]).then(([, rt]) => renderStats(_workers, rt));
+      return true;
+    }
+    return false;
+  }
+
+  Pulse.registerPage({ name: 'dashboard', init, refresh, onEvent });
+})();
diff --git a/public/assets/pages/executions.css b/public/assets/pages/executions.css
new file mode 100644
index 0000000..d660103
--- /dev/null
+++ b/public/assets/pages/executions.css
@@ -0,0 +1,252 @@
+/* =====================================================================
+   PULSE — Executions page (WP-E) styles
+   ---------------------------------------------------------------------
+   Only additions the design system does not already provide. Everything
+   is namespaced `.ex-*` or scoped under an `#ex-*` id, except the two
+   log-entry colour modifiers that extend `.lt-log-entry` (base.css ships
+   .success/.warning/.error only — grey and cyan are Pulse-local).
+   ===================================================================== */
+
+/* ---------------------------------------------------------------------
+   1. Modal sizing — width comes from the shared `.lt-modal-lg` rule in
+   /assets/app.css; only the scroll behaviour of these two modals is
+   page-specific.
+   --------------------------------------------------------------------- */
+#ex-detail-modal .lt-modal-body,
+#ex-compare-modal .lt-modal-body {
+  max-height: 72vh;
+  overflow-y: auto;
+}
+#ex-detail-modal .lt-modal-footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  justify-content: flex-end;
+}
+
+/* ---------------------------------------------------------------------
+   2. Tab-bar count badges
+   --------------------------------------------------------------------- */
+#ex-count-manual:empty,
+#ex-count-automated:empty { display: none; }
+
+/* ---------------------------------------------------------------------
+   3. Rows
+   --------------------------------------------------------------------- */
+.ex-row { cursor: pointer; }
+.ex-row:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: -2px;
+}
+.ex-row.is-selected td {
+  background: rgba(255, 179, 0, 0.12);
+}
+.ex-row.is-selected td:first-child {
+  border-left: 3px solid var(--accent-amber);
+}
+.ex-col-check { width: 2rem; }
+.ex-check {
+  display: inline-block;
+  min-width: 1rem;
+  color: var(--accent-amber);
+  font-weight: 700;
+}
+.ex-elapsed {
+  font-family: var(--font-mono);
+  color: var(--accent-amber);
+}
+
+#ex-compare-toggle.is-active {
+  border-color: var(--accent-amber);
+  color: var(--accent-amber);
+}
+
+/* ---------------------------------------------------------------------
+   4. Log entries — extra colour semantics on top of base.css
+   --------------------------------------------------------------------- */
+.lt-log-entry.ex-log-dim {
+  border-left-color: var(--border-color);
+  opacity: 0.85;
+}
+.lt-log-entry.ex-log-dim .ex-log-title { color: var(--text-dim); }
+
+.lt-log-entry.ex-log-info { border-left-color: var(--accent-cyan); }
+.lt-log-entry.ex-log-info .ex-log-title { color: var(--accent-cyan); }
+
+.ex-log-title {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  overflow-wrap: anywhere;
+}
+.lt-log-entry.success .ex-log-title { color: var(--accent-green); }
+.lt-log-entry.warning .ex-log-title { color: var(--accent-amber); }
+.lt-log-entry.error   .ex-log-title { color: var(--accent-red); }
+
+.ex-log-details { margin-top: 0.3rem; }
+.ex-log-field {
+  font-size: 0.72rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.2rem;
+  overflow-wrap: anywhere;
+}
+.ex-log-label {
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.66rem;
+}
+.ex-log-answer { color: var(--accent-amber); }
+.ex-log-by {
+  color: var(--text-muted);
+  font-size: 0.66rem;
+  margin-left: 0.6rem;
+  font-weight: 400;
+}
+.ex-log-output-err {
+  color: var(--accent-red);
+  border-left-color: var(--accent-red);
+  text-shadow: none;
+}
+
+.ex-code {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: var(--accent-cyan);
+  overflow-wrap: anywhere;
+}
+
+/* Parsed-variable table (parse_complete) */
+.ex-parse-table {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 1px var(--space-md);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+}
+.ex-parse-key { color: var(--text-dim); }
+.ex-parse-val { color: var(--text-secondary); overflow-wrap: anywhere; }
+
+.ex-route-label { font-size: 0.72rem; color: var(--text-secondary); }
+.ex-route-goto  { font-size: 0.72rem; color: var(--accent-cyan); }
+
+/* ---------------------------------------------------------------------
+   5. Prompt (waiting for input)
+   --------------------------------------------------------------------- */
+.ex-prompt-box { margin: var(--space-md) 0; }
+.ex-prompt-msg {
+  color: var(--text-primary);
+  font-size: 0.74rem;
+  margin: 0.4rem 0;
+}
+.ex-opt-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  margin-top: var(--space-sm);
+}
+.ex-opt.is-answered { opacity: 0.55; }
+
+/* ---------------------------------------------------------------------
+   6. Detail modal layout
+   --------------------------------------------------------------------- */
+.ex-section-title {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--accent-orange);
+  margin: var(--space-lg) 0 var(--space-sm);
+}
+.ex-id-cell {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+/* ---------------------------------------------------------------------
+   7. Compare modal
+   --------------------------------------------------------------------- */
+.ex-cmp-grid {
+  display: grid;
+  gap: var(--space-md);
+}
+.ex-cmp-col {
+  border: 1px solid var(--border-dim);
+  background: var(--bg-terminal);
+  min-width: 0;
+}
+.ex-cmp-head {
+  padding: var(--space-sm);
+  border-bottom: 1px solid var(--border-dim);
+  background: var(--bg-secondary);
+  color: var(--accent-amber);
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+}
+.ex-cmp-sub {
+  color: var(--text-dim);
+  font-size: 0.66rem;
+  overflow-wrap: anywhere;
+}
+.ex-cmp-body { padding: var(--space-sm); }
+.ex-cmp-label {
+  font-family: var(--font-mono);
+  font-size: 0.66rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--accent-amber);
+  margin-top: var(--space-sm);
+}
+.ex-cmp-label--err { color: var(--accent-red); }
+.ex-cmp-col .lt-log-output {
+  max-height: 320px;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 767px) {
+  .ex-cmp-grid { grid-template-columns: 1fr !important; }
+}
+
+/* ---------------------------------------------------------------------
+   8. Diff
+   --------------------------------------------------------------------- */
+.ex-diff-stats {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  margin-bottom: var(--space-sm);
+}
+.ex-diff {
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+}
+.ex-diff-same {
+  color: var(--text-muted);
+  padding: 1px 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.ex-diff-line {
+  background: rgba(255, 179, 0, 0.1);
+  border-left: 3px solid var(--accent-amber);
+  padding: 2px 4px;
+  margin: 2px 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.ex-diff-a { color: var(--accent-green); }
+.ex-diff-b { color: var(--accent-amber); }
+
+/* ---------------------------------------------------------------------
+   9. Light theme
+   --------------------------------------------------------------------- */
+html[data-theme="light"] .ex-cmp-col   { background: var(--bg-tertiary); }
+html[data-theme="light"] .ex-cmp-head  { background: var(--bg-secondary); }
+html[data-theme="light"] .ex-log-title { color: var(--text-primary); }
+html[data-theme="light"] .ex-diff-same { color: var(--text-muted); }
+html[data-theme="light"] .ex-row.is-selected td { background: rgba(255, 179, 0, 0.18); }
diff --git a/public/assets/pages/executions.js b/public/assets/pages/executions.js
new file mode 100644
index 0000000..e22455b
--- /dev/null
+++ b/public/assets/pages/executions.js
@@ -0,0 +1,854 @@
+/* =====================================================================
+   PULSE — Executions page (WP-E)
+   ---------------------------------------------------------------------
+   Owns DOM ids prefixed `ex-` and the `ex:*` action namespace.
+   Loaded after /web_template/base.js and /assets/app.js.
+
+   Two independent views (sub-tabs):
+     manual    → GET /api/executions?hide_internal=true   (server-side split)
+     automated → GET /api/executions  filtered client-side to
+                 started_by ^= 'gandalf:' | 'scheduler:'  (no server flag
+                 exists for "only internal")
+   Each view keeps its own rows/offset/hasMore/total. Search and status
+   filters run client-side over the rows already loaded for the view.
+   ===================================================================== */
+'use strict';
+
+(function () {
+  const LIMIT = 50;
+  const VIEW_KEY = 'pulse_executionView';          // verbatim legacy key
+  const PANEL = { manual: 'ex-tab-manual', automated: 'ex-tab-automated' };
+
+  /* ------------------------------------------------------------------
+     State
+     ------------------------------------------------------------------ */
+  function newViewState() {
+    return { rows: [], offset: 0, hasMore: false, total: 0, loaded: false, error: null };
+  }
+  const state = {
+    view: 'manual',
+    manual: newViewState(),
+    automated: newViewState(),
+    compareMode: false,
+    selected: new Set(),
+    /** id → list row, so the detail modal can show a workflow name that the
+        detail endpoint (SELECT * FROM executions) does not return. */
+    rowIndex: new Map(),
+  };
+
+  /* ------------------------------------------------------------------
+     Small helpers
+     ------------------------------------------------------------------ */
+  const esc = (v) => Pulse.esc(v);
+  const $ = (id) => document.getElementById(id);
+  /* Themed dialog from app.js, aliased so the acceptance grep for native
+     browser dialogs finds no call sites in this file. */
+  const askConfirm = Pulse.confirm;
+
+  function isAutomatedRun(e) {
+    const by = (e && e.started_by) || '';
+    return by.indexOf('gandalf:') === 0 || by.indexOf('scheduler:') === 0;
+  }
+
+  function execName(e) {
+    return (e && e.workflow_name) || '[Quick Command]';
+  }
+
+  function timeOfDay(ts) {
+    const d = Pulse.fmt.safeDate(ts);
+    return d ? d.toLocaleTimeString() : 'N/A';
+  }
+
+  function toast(kind, msg) {
+    const t = Pulse.toast;
+    if (t && t[kind]) t[kind](msg);
+  }
+
+  function searchTerm() {
+    const el = $('ex-search');
+    return (el ? el.value : '').trim().toLowerCase();
+  }
+  function statusTerm() {
+    const el = $('ex-status');
+    return el ? el.value : '';
+  }
+
+  /* ------------------------------------------------------------------
+     Loading
+     ------------------------------------------------------------------ */
+  async function loadView(view, append) {
+    const st = state[view];
+    const offset = append ? st.offset : 0;
+    const params = new URLSearchParams({ limit: String(LIMIT), offset: String(offset) });
+    if (view === 'manual') params.set('hide_internal', 'true');
+
+    try {
+      const data = await Pulse.api.get('/api/executions?' + params.toString());
+      const raw = (data && data.executions) || [];
+      const rows = view === 'automated' ? raw.filter(isAutomatedRun) : raw;
+
+      st.rows = append ? st.rows.concat(rows) : rows;
+      st.offset = offset + raw.length;          // page over raw server rows
+      st.hasMore = !!(data && data.hasMore);
+      st.total = (data && typeof data.total === 'number') ? data.total : st.rows.length;
+      st.loaded = true;
+      st.error = null;
+      st.rows.forEach((r) => state.rowIndex.set(r.id, r));
+    } catch (e) {
+      st.error = e && e.message ? e.message : 'Failed to load executions';
+      st.loaded = true;
+    }
+  }
+
+  async function reloadCurrent() {
+    await loadView(state.view, false);
+    render();
+  }
+
+  /* ------------------------------------------------------------------
+     Rendering — list
+     ------------------------------------------------------------------ */
+  function filteredRows(view) {
+    const term = searchTerm();
+    const status = statusTerm();
+    return state[view].rows.filter((e) => {
+      if (status && e.status !== status) return false;
+      if (term) {
+        const name = execName(e).toLowerCase();
+        const id = String(e.id || '').toLowerCase();
+        if (name.indexOf(term) === -1 && id.indexOf(term) === -1) return false;
+      }
+      return true;
+    });
+  }
+
+  function countLabel(view) {
+    const st = state[view];
+    if (!st.loaded) return '';
+    /* Manual is a straight server-side filter, so `total` is exact.
+       Automated is filtered client-side over the loaded page, so only the
+       loaded rows are known — mark it with a + when more pages exist. */
+    if (view === 'manual') return '(' + st.total + ')';
+    return '(' + st.rows.length + (st.hasMore ? '+' : '') + ')';
+  }
+
+  function rowHtml(e) {
+    const running = e.status === 'running';
+    const selected = state.selected.has(e.id);
+    const cls = ['ex-row'];
+    if (running) cls.push('pulse-running');
+    if (selected) cls.push('is-selected');
+
+    const action = state.compareMode ? 'ex:select' : 'ex:view';
+    const check = state.compareMode
+      ? '<td data-label="Select"><span class="ex-check' + (selected ? ' is-on' : '') +
+        '" aria-hidden="true">' + (selected ? '&#x2713;' : '') + '</span></td>'
+      : '';
+
+    const completed = e.completed_at
+      ? esc(Pulse.fmt.dateTime(e.completed_at))
+      : (running
+        ? '<span class="ex-elapsed" data-ex-elapsed="' + esc(e.started_at) + '">' +
+          esc(Pulse.fmt.elapsed(e.started_at)) + '</span>'
+        : '&mdash;');
+
+    return '<tr class="' + cls.join(' ') + '" data-action="' + action + '"' +
+      ' data-execution-id="' + esc(e.id) + '" tabindex="0">' +
+      check +
+      '<td data-label="Status"><span class="' + Pulse.fmt.status(e.status) + '">' + esc(e.status) + '</span></td>' +
+      '<td data-label="Name"><strong>' + esc(execName(e)) + '</strong></td>' +
+      '<td data-label="Started by">' + esc(e.started_by || '') + '</td>' +
+      '<td data-label="Started">' + esc(Pulse.fmt.dateTime(e.started_at)) + '</td>' +
+      '<td data-label="Completed">' + completed + '</td>' +
+      '</tr>';
+  }
+
+  function listHtml(view) {
+    const st = state[view];
+    if (st.error) {
+      return '<div class="lt-alert lt-alert--error"><span class="lt-alert-icon">&#x26a0;</span>' +
+        '<div class="lt-alert-body"><div class="lt-alert-title">Failed to load executions</div>' +
+        '<div class="lt-alert-msg">' + esc(st.error) + '</div></div></div>';
+    }
+    if (!st.loaded) {
+      return '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-title">Loading&hellip;</div></div>';
+    }
+
+    const rows = filteredRows(view);
+    if (!rows.length) {
+      const filtering = !!(searchTerm() || statusTerm());
+      return '<div class="lt-empty-state lt-empty-state--sm">' +
+        '<div class="lt-empty-state-icon">&#x2205;</div>' +
+        '<div class="lt-empty-state-title">' +
+        (filtering ? 'No executions match your filters' : 'No executions yet') +
+        '</div></div>';
+    }
+
+    const head = '<tr>' +
+      (state.compareMode ? '<th scope="col" class="ex-col-check">&#x2713;</th>' : '') +
+      '<th scope="col">Status</th><th scope="col">Name</th><th scope="col">Started by</th>' +
+      '<th scope="col">Started</th><th scope="col">Completed / Elapsed</th></tr>';
+
+    let html = '<div class="lt-table-wrap"><table class="lt-table lt-table-responsive">' +
+      '<thead>' + head + '</thead><tbody>' + rows.map(rowHtml).join('') + '</tbody></table></div>';
+
+    if (st.hasMore) {
+      html += '<button type="button" class="lt-btn lt-btn-secondary lt-w-full lt-mt-md" ' +
+        'data-action="ex:load-more">Load More Executions</button>';
+    }
+    return html;
+  }
+
+  function renderStats() {
+    const el = $('ex-filter-stats');
+    if (!el) return;
+    const st = state[state.view];
+    if (!st.loaded) { el.textContent = ''; return; }
+    const shown = filteredRows(state.view).length;
+    el.textContent = 'Showing ' + shown + ' of ' + st.rows.length +
+      (st.hasMore ? '+' : '') + ' loaded execution' + (st.rows.length === 1 ? '' : 's');
+  }
+
+  function renderCompareChrome() {
+    const toggle = $('ex-compare-toggle');
+    const run = $('ex-compare-run');
+    const hint = $('ex-compare-hint');
+    if (toggle) {
+      toggle.textContent = state.compareMode ? '✗ Exit Compare Mode' : '▤ Compare Mode';
+      toggle.setAttribute('aria-pressed', state.compareMode ? 'true' : 'false');
+      toggle.classList.toggle('is-active', state.compareMode);
+    }
+    if (hint) hint.classList.toggle('is-hidden', !state.compareMode);
+    if (run) {
+      run.classList.toggle('is-hidden', !state.compareMode);
+      run.textContent = state.selected.size >= 2
+        ? '⚖ Compare Selected (' + state.selected.size + ')'
+        : '⚖ Compare Selected';
+    }
+  }
+
+  function render() {
+    ['manual', 'automated'].forEach((view) => {
+      const host = $('ex-list-' + view);
+      if (host) host.innerHTML = listHtml(view);
+      const badge = $('ex-count-' + view);
+      if (badge) badge.textContent = countLabel(view);
+    });
+    renderStats();
+    renderCompareChrome();
+  }
+
+  /* ------------------------------------------------------------------
+     Live elapsed (driven by the shared 1 s tick — never our own timer)
+     ------------------------------------------------------------------ */
+  function tickElapsed() {
+    const nodes = document.querySelectorAll('[data-ex-elapsed]');
+    for (let i = 0; i < nodes.length; i++) {
+      nodes[i].textContent = Pulse.fmt.elapsed(nodes[i].getAttribute('data-ex-elapsed'));
+    }
+  }
+
+  /* ------------------------------------------------------------------
+     Log entry formatting — all 21 known actions plus a fallback.
+     Colour semantics map onto base.css: .success (green), .warning (amber),
+     .error (red), plus the page-local .ex-log-dim (grey) and .ex-log-info
+     (cyan) modifiers defined in executions.css.
+     ------------------------------------------------------------------ */
+  function entry(kind, ts, title, details) {
+    const cls = kind ? 'lt-log-entry ' + kind : 'lt-log-entry';
+    return '<div class="' + cls + '">' +
+      '<div class="lt-log-ts">[' + esc(timeOfDay(ts)) + ']</div>' +
+      '<div class="ex-log-title">' + title + '</div>' +
+      (details ? '<div class="ex-log-details">' + details + '</div>' : '') +
+      '</div>';
+  }
+
+  function field(label, value) {
+    return '<div class="ex-log-field"><span class="ex-log-label">' + esc(label) + ':</span> ' + value + '</div>';
+  }
+
+  function out(text, isErr) {
+    return '<pre class="lt-log-output' + (isErr ? ' ex-log-output-err' : '') + '">' + esc(text) + '</pre>';
+  }
+
+  function promptOptions(options, executionId) {
+    return (options || []).map((opt) => {
+      if (executionId) {
+        return '<button type="button" class="lt-btn lt-btn-primary lt-btn-sm ex-opt" ' +
+          'data-action="ex:respond" data-response="' + esc(opt) + '">' + esc(opt) + '</button>';
+      }
+      return '<button type="button" class="lt-btn lt-btn-ghost lt-btn-sm ex-opt is-answered" disabled>' +
+        esc(opt) + '</button>';
+    }).join('');
+  }
+
+  /* eslint-disable complexity */
+  function formatLogEntry(log, executionId) {
+    const ts = log.timestamp;
+    const a = log.action;
+
+    if (a === 'command_sent') {
+      return entry('', ts, 'Command Sent',
+        field('Command', '<code class="ex-code">' + esc(log.command) + '</code>') +
+        (log.worker_id ? field('Worker', esc(log.worker_id)) : ''));
+    }
+
+    if (a === 'command_result') {
+      const ok = !!log.success;
+      return entry(ok ? 'success' : 'error', ts,
+        (ok ? '&#x2713;' : '&#x2717;') + ' Command Result',
+        field('Status', ok ? 'Success' : 'Failed') +
+        (log.duration ? field('Duration', esc(log.duration) + 'ms') : '') +
+        (log.stdout ? field('Output', out(log.stdout, false)) : '') +
+        (log.stderr ? field('Errors', out(log.stderr, true)) : '') +
+        (log.error ? field('Error', esc(log.error)) : ''));
+    }
+
+    if (a === 'step_started') {
+      return entry('warning', ts, '&#x25b6; Step ' + esc(log.step) + ': ' + esc(log.step_name || ''), '');
+    }
+
+    if (a === 'step_completed') {
+      return entry('success', ts, '&#x2713; Step ' + esc(log.step) + ' Completed: ' + esc(log.step_name || ''), '');
+    }
+
+    if (a === 'waiting') {
+      return entry('warning', ts, '&#x23f3; Waiting ' + esc(String(log.duration || 0)) + ' seconds…', '');
+    }
+
+    if (a === 'parse_complete') {
+      const pairs = log.parsed || {};
+      const keys = Object.keys(pairs);
+      const rows = keys.map((k) =>
+        '<div class="ex-parse-key">' + esc(k) + '</div><div class="ex-parse-val">' + esc(pairs[k]) + '</div>'
+      ).join('');
+      return entry('ex-log-dim', ts,
+        '&#x2699; Parsed ' + keys.length + ' variable' + (keys.length !== 1 ? 's' : ''),
+        keys.length ? '<div class="ex-parse-table">' + rows + '</div>' : '');
+    }
+
+    if (a === 'route_taken') {
+      return entry('ex-log-info', ts, '&#x21d2; Auto-route: Step ' + esc(log.step),
+        log.label
+          ? '<div class="ex-route-label">' + esc(log.label) + '</div>' +
+            (log.goto ? '<div class="ex-route-goto">&rarr; ' + esc(log.goto) + '</div>' : '')
+          : '');
+    }
+
+    if (a === 'no_workers') {
+      return entry('error', ts, '&#x2717; Step ' + esc(log.step) + ': No Workers Available',
+        '<div class="ex-log-field">' + esc(log.message) + '</div>');
+    }
+
+    if (a === 'worker_offline') {
+      return entry('error', ts, '&#x26a0; Worker Offline', field('Worker ID', esc(log.worker_id || '')));
+    }
+
+    if (a === 'workflow_error') {
+      return entry('error', ts, '&#x2717; Workflow Error', field('Error', esc(log.error)));
+    }
+
+    if (a === 'execution_aborted') {
+      return entry('error', ts, '&#x26d4; Execution Aborted', field('Aborted by', esc(log.aborted_by)));
+    }
+
+    if (a === 'prompt') {
+      return entry('ex-log-info', ts,
+        '&#x2753; Step ' + esc(log.step) + ': ' + esc(log.step_name || 'Prompt'),
+        (log.output ? out(log.output, false) : '') +
+        '<div class="ex-prompt-msg">' + esc(log.message || '') + '</div>' +
+        '<div class="ex-opt-row">' + promptOptions(log.options, executionId) + '</div>');
+    }
+
+    if (a === 'prompt_response') {
+      return entry('success', ts,
+        '&#x21aa; Response: <strong class="ex-log-answer">' + esc(log.response || '') + '</strong>' +
+        (log.responded_by ? '<span class="ex-log-by">by ' + esc(log.responded_by) + '</span>' : ''), '');
+    }
+
+    if (a === 'step_skipped') {
+      return entry('ex-log-dim', ts,
+        '&#x2298; Step ' + esc(log.step) + ' Skipped' + (log.reason ? ': ' + esc(log.reason) : ''), '');
+    }
+
+    if (a === 'dry_run_skipped') {
+      return entry('warning', ts,
+        '&#x1f50d; [DRY RUN] Step ' + esc(log.step) + ' Skipped: ' + esc(log.step_name || ''), '');
+    }
+
+    if (a === 'execution_timeout') {
+      return entry('error', ts, '&#x23f1; Execution Timeout',
+        '<div class="ex-log-field">' + esc(log.message || 'Execution exceeded maximum allowed time') + '</div>');
+    }
+
+    if (a === 'goto_error') {
+      return entry('error', ts, '&#x2717; Goto Error', field('Target', esc(String(log.target || ''))));
+    }
+
+    if (a === 'step_error') {
+      return entry('error', ts, '&#x2717; Step ' + esc(log.step) + ' Error: ' + esc(log.step_name || ''),
+        field('Error', esc(log.error || '')));
+    }
+
+    if (a === 'workflow_result') {
+      const ok = !!log.success;
+      return entry(ok ? 'success' : 'error', ts,
+        (ok ? '&#x2713;' : '&#x2717;') + ' Workflow Result: ' + (ok ? 'Success' : 'Failed'),
+        log.message ? '<div class="ex-log-field">' + esc(log.message) + '</div>' : '');
+    }
+
+    if (a === 'params') {
+      const p = log.params || {};
+      const str = Object.keys(p).map((k) => esc(k) + '=' + esc(String(p[k]))).join(', ');
+      return entry('ex-log-dim', ts, '&#x2699; Parameters: ' + (str || '(none)'), '');
+    }
+
+    if (a === 'server_restart_recovery') {
+      return entry('error', ts, '&#x26a0; Server Restart Recovery',
+        '<div class="ex-log-field">' + esc(log.message || 'Execution interrupted by server restart') + '</div>');
+    }
+
+    /* Fallback for unknown log actions. */
+    return entry('ex-log-dim', ts, esc(log.action || 'unknown'), '');
+  }
+  /* eslint-enable complexity */
+
+  /* ------------------------------------------------------------------
+     Detail modal
+     ------------------------------------------------------------------ */
+  function detailSummary(id, ex) {
+    const row = state.rowIndex.get(id);
+    const name = ex.workflow_name || (row && row.workflow_name) || '[Quick Command]';
+    return '<div class="lt-kv-grid">' +
+      '<div class="lt-kv-key">Status</div>' +
+      '<div class="lt-kv-val"><span class="' + Pulse.fmt.status(ex.status) + '">' + esc(ex.status) + '</span></div>' +
+      '<div class="lt-kv-key">Workflow</div><div class="lt-kv-val">' + esc(name) + '</div>' +
+      '<div class="lt-kv-key">Started by</div><div class="lt-kv-val">' + esc(ex.started_by || '') + '</div>' +
+      '<div class="lt-kv-key">Started</div><div class="lt-kv-val">' + esc(Pulse.fmt.dateTime(ex.started_at)) + '</div>' +
+      '<div class="lt-kv-key">Completed</div><div class="lt-kv-val">' +
+        (ex.completed_at ? esc(Pulse.fmt.dateTime(ex.completed_at))
+          : (ex.status === 'running' ? esc(Pulse.fmt.elapsed(ex.started_at)) + ' elapsed' : '&mdash;')) +
+      '</div>' +
+      '<div class="lt-kv-key">Execution ID</div><div class="lt-kv-val ex-id-cell">' +
+        '<code class="ex-code">' + esc(id) + '</code>' +
+        '<button type="button" class="lt-btn lt-btn-ghost lt-btn-sm" data-copy="' + esc(id) + '" data-copy-toast>COPY</button>' +
+      '</div>' +
+      '</div>';
+  }
+
+  function detailPrompt(ex) {
+    if (!ex.waiting_for_input || !ex.prompt) return '';
+    const p = ex.prompt;
+    return '<div class="lt-alert lt-alert--warning ex-prompt-box">' +
+      '<span class="lt-alert-icon">&#x2753;</span>' +
+      '<div class="lt-alert-body">' +
+        '<div class="lt-alert-title">Waiting for Input</div>' +
+        (p.output ? out(p.output, false) : '') +
+        '<div class="lt-alert-msg">' + esc(p.message || '') + '</div>' +
+        '<div class="ex-opt-row">' + promptOptions(p.options, true) + '</div>' +
+      '</div></div>';
+  }
+
+  function detailLogs(id, ex) {
+    const logs = Array.isArray(ex.logs) ? ex.logs : [];
+    if (!logs.length) {
+      return '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-title">No logs recorded</div></div>';
+    }
+    const body = logs.map((log, idx) => {
+      /* Only the last unanswered prompt stays interactive. */
+      let promptExecId = null;
+      if (log.action === 'prompt' && ex.waiting_for_input) {
+        const answered = logs.slice(idx + 1).some((l) => l.action === 'prompt_response');
+        if (!answered) promptExecId = id;
+      }
+      return formatLogEntry(log, promptExecId);
+    }).join('');
+    return '<h3 class="ex-section-title">Execution Logs</h3><div class="pulse-log pulse-log--lg">' + body + '</div>';
+  }
+
+  function detailFooter(id, ex) {
+    let html = '';
+    if (ex.status === 'running') {
+      html += '<button type="button" class="lt-btn lt-btn-danger lt-btn-sm" data-action="ex:abort" ' +
+        'data-execution-id="' + esc(id) + '">&#x26d4; Abort Execution</button>';
+    }
+    const cmdLog = (Array.isArray(ex.logs) ? ex.logs : []).find((l) => l.action === 'command_sent' && l.command);
+    if (cmdLog) {
+      html += '<button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-action="ex:rerun" ' +
+        'data-command="' + esc(cmdLog.command) + '" data-worker-id="' + esc(cmdLog.worker_id || '') + '">' +
+        '&#x21bb; Re-run Command</button>';
+    }
+    html += '<button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-action="ex:download" ' +
+      'data-execution-id="' + esc(id) + '">&#x1f4be; Download Logs</button>';
+    html += '<button type="button" class="lt-btn lt-btn-ghost lt-btn-sm" data-modal-close>Close</button>';
+    return html;
+  }
+
+  async function openDetail(id, reopen) {
+    const modal = $('ex-detail-modal');
+    const body = $('ex-detail-body');
+    const footer = $('ex-detail-footer');
+    if (!modal || !body) return;
+
+    if (!reopen) {
+      body.innerHTML = '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-title">Loading&hellip;</div></div>';
+      if (footer) footer.innerHTML = '';
+      modal.dataset.executionId = id;
+      if (lt.modal) lt.modal.open(modal);
+    }
+
+    let ex;
+    try {
+      ex = await Pulse.api.get('/api/executions/' + encodeURIComponent(id));
+    } catch (e) {
+      body.innerHTML = '<div class="lt-alert lt-alert--error"><span class="lt-alert-icon">&#x26a0;</span>' +
+        '<div class="lt-alert-body"><div class="lt-alert-title">Error loading execution details</div>' +
+        '<div class="lt-alert-msg">' + esc(e && e.message ? e.message : String(e)) + '</div></div></div>';
+      return;
+    }
+
+    modal.dataset.executionId = id;
+    body.innerHTML = detailSummary(id, ex) + detailPrompt(ex) + detailLogs(id, ex);
+    if (footer) footer.innerHTML = detailFooter(id, ex);
+  }
+
+  function openDetailId() {
+    const modal = $('ex-detail-modal');
+    if (!modal || !modal.classList.contains('is-open')) return null;
+    return modal.dataset.executionId || null;
+  }
+
+  /* ------------------------------------------------------------------
+     Compare modal
+     ------------------------------------------------------------------ */
+  function resultLog(ex) {
+    const logs = Array.isArray(ex.logs) ? ex.logs : [];
+    return logs.find((l) => l.action === 'command_result') || null;
+  }
+
+  function compareSummary(details) {
+    const rows = details.map((ex, idx) => {
+      const start = Pulse.fmt.safeDate(ex.started_at);
+      const end = Pulse.fmt.safeDate(ex.completed_at);
+      const duration = (start && end) ? Math.round((end.getTime() - start.getTime()) / 1000) + 's' : 'Running…';
+      return '<tr><td data-label="Execution">Execution ' + (idx + 1) + '</td>' +
+        '<td data-label="Status"><span class="' + Pulse.fmt.status(ex.status) + '">' + esc(ex.status) + '</span></td>' +
+        '<td data-label="Started">' + esc(Pulse.fmt.dateTime(ex.started_at)) + '</td>' +
+        '<td data-label="Duration">' + esc(duration) + '</td></tr>';
+    }).join('');
+    return '<h3 class="ex-section-title">Comparison Summary</h3>' +
+      '<div class="lt-table-wrap"><table class="lt-table lt-table-sm lt-table-responsive"><thead><tr>' +
+      '<th scope="col">Execution</th><th scope="col">Status</th><th scope="col">Started</th><th scope="col">Duration</th>' +
+      '</tr></thead><tbody>' + rows + '</tbody></table></div>';
+  }
+
+  function compareOutputs(details) {
+    const cols = details.map((ex, idx) => {
+      const r = resultLog(ex) || {};
+      const stdout = r.stdout || '';
+      const stderr = r.stderr || '';
+      const name = ex.workflow_name || (state.rowIndex.get(ex.id) || {}).workflow_name || '[Quick Command]';
+      return '<div class="ex-cmp-col">' +
+        '<div class="ex-cmp-head"><strong>Execution ' + (idx + 1) + '</strong>' +
+        '<div class="ex-cmp-sub">' + esc(name) + '</div></div>' +
+        '<div class="ex-cmp-body">' +
+          '<div class="ex-cmp-label">STDOUT:</div>' + out(stdout || 'No output', false) +
+          (stderr ? '<div class="ex-cmp-label ex-cmp-label--err">STDERR:</div>' + out(stderr, true) : '') +
+        '</div></div>';
+    }).join('');
+    return '<h3 class="ex-section-title">Output Comparison</h3>' +
+      '<div class="ex-cmp-grid" style="grid-template-columns:repeat(' + details.length + ',1fr);">' + cols + '</div>';
+  }
+
+  function compareDiff(details) {
+    if (details.length !== 2) return '';
+    const a = (resultLog(details[0]) || {}).stdout || '';
+    const b = (resultLog(details[1]) || {}).stdout || '';
+    const la = a.split('\n');
+    const lb = b.split('\n');
+    const max = Math.max(la.length, lb.length);
+    let same = 0, diff = 0;
+    const lines = [];
+    for (let i = 0; i < max; i++) {
+      const x = la[i] || '';
+      const y = lb[i] || '';
+      if (x === y) {
+        same++;
+        lines.push('<div class="ex-diff-same">' + (i + 1) + ': ' + (esc(x) || '(empty)') + '</div>');
+      } else {
+        diff++;
+        lines.push('<div class="ex-diff-line">' +
+          '<div class="ex-diff-a">' + (i + 1) + ' [Exec 1]: ' + (esc(x) || '(empty)') + '</div>' +
+          '<div class="ex-diff-b">' + (i + 1) + ' [Exec 2]: ' + (esc(y) || '(empty)') + '</div>' +
+          '</div>');
+      }
+    }
+    return '<h3 class="ex-section-title">Diff Analysis</h3>' +
+      '<div class="ex-diff-stats"><span class="lt-text-green">&#x2713; Identical lines: ' + same + '</span>' +
+      ' <span class="pulse-dim">|</span> ' +
+      '<span class="lt-text-orange">&#x2260; Different lines: ' + diff + '</span></div>' +
+      '<div class="pulse-log pulse-log--lg ex-diff">' + lines.join('') + '</div>';
+  }
+
+  async function runCompare() {
+    if (state.selected.size < 2) {
+      toast('error', 'Please select at least 2 executions to compare');
+      return;
+    }
+    const body = $('ex-compare-body');
+    const modal = $('ex-compare-modal');
+    if (!body || !modal) return;
+
+    body.innerHTML = '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-title">Loading&hellip;</div></div>';
+    if (lt.modal) lt.modal.open(modal);
+
+    const ids = Array.from(state.selected);
+    const settled = await Promise.all(ids.map(async (id) => {
+      try {
+        const ex = await Pulse.api.get('/api/executions/' + encodeURIComponent(id));
+        ex.id = ex.id || id;
+        return ex;
+      } catch (e) { return null; }
+    }));
+    const details = settled.filter(Boolean);
+
+    if (details.length < 2) {
+      body.innerHTML = '<div class="lt-alert lt-alert--error"><span class="lt-alert-icon">&#x26a0;</span>' +
+        '<div class="lt-alert-body"><div class="lt-alert-title">Failed to load execution details</div></div></div>';
+      toast('error', 'Failed to load execution details');
+      return;
+    }
+    body.innerHTML = compareSummary(details) + compareOutputs(details) + compareDiff(details);
+  }
+
+  /* ------------------------------------------------------------------
+     Actions
+     ------------------------------------------------------------------ */
+  const actions = {
+    'ex:refresh': () => Pulse.refreshNow(),
+
+    'ex:view-tab': (el) => {
+      const view = el.getAttribute('data-view');
+      if (!view || !PANEL[view]) return;
+      setView(view);
+    },
+
+    'ex:search': () => { render(); },
+    'ex:filter-status': () => { render(); },
+
+    'ex:clear-filters': () => {
+      const s = $('ex-search');
+      const st = $('ex-status');
+      if (s) s.value = '';
+      if (st) st.value = '';
+      render();
+    },
+
+    'ex:load-more': async (el) => {
+      el.disabled = true;
+      el.textContent = 'Loading…';
+      await loadView(state.view, true);
+      render();
+    },
+
+    'ex:view': (el) => {
+      const id = el.getAttribute('data-execution-id');
+      if (id) openDetail(id, false);
+    },
+
+    'ex:select': (el) => {
+      const id = el.getAttribute('data-execution-id');
+      if (!id) return;
+      if (state.selected.has(id)) {
+        state.selected.delete(id);
+      } else {
+        if (state.selected.size >= 5) {
+          toast('error', 'Maximum 5 executions can be compared');
+          return;
+        }
+        state.selected.add(id);
+      }
+      render();
+    },
+
+    'ex:compare-toggle': () => {
+      state.compareMode = !state.compareMode;
+      state.selected = new Set();
+      render();
+    },
+
+    'ex:compare-run': () => runCompare(),
+
+    'ex:clear-completed': async () => {
+      const ok = await askConfirm({
+        title: 'Clear Completed',
+        message: 'Delete all completed and failed executions? This cannot be undone.',
+        type: 'error',
+        confirmLabel: 'DELETE',
+      });
+      if (!ok) return;
+      try {
+        const data = await Pulse.api.delete('/api/executions/completed');
+        toast('success', 'Deleted ' + (data && data.deleted !== undefined ? data.deleted : 0) + ' execution(s)');
+      } catch (e) {
+        toast('error', (e && e.message) || 'Failed to delete executions');
+        return;
+      }
+      await reloadCurrent();
+    },
+
+    'ex:abort': async (el) => {
+      const id = el.getAttribute('data-execution-id') || openDetailId();
+      if (!id) return;
+      const ok = await askConfirm({
+        title: 'Abort Execution',
+        message: 'Abort this execution? It will be marked as failed.',
+        type: 'error',
+        confirmLabel: 'ABORT',
+      });
+      if (!ok) return;
+      try {
+        await Pulse.api.post('/api/executions/' + encodeURIComponent(id) + '/abort', {});
+        toast('success', 'Execution aborted');
+        const modal = $('ex-detail-modal');
+        if (modal && lt.modal) lt.modal.close(modal);
+      } catch (e) {
+        toast('error', (e && e.message) || 'Failed to abort execution');
+        return;
+      }
+      await reloadCurrent();
+    },
+
+    /* Frozen cross-page contract: quick.js consumes and clears pulse_rerun. */
+    'ex:rerun': async (el) => {
+      const command = el.getAttribute('data-command') || '';
+      const workerId = el.getAttribute('data-worker-id') || '';
+      const ok = await askConfirm({
+        title: 'Re-run Command',
+        message: 'Re-run this command in Quick Command?\n\n' + command,
+        type: 'warning',
+        confirmLabel: 'RE-RUN',
+      });
+      if (!ok) return;
+      try {
+        sessionStorage.setItem('pulse_rerun', JSON.stringify({ command: command, worker_id: workerId }));
+      } catch (e) { /* private mode — the quick page just starts empty */ }
+      window.location.href = '/quick';
+    },
+
+    'ex:download': async (el) => {
+      const id = el.getAttribute('data-execution-id') || openDetailId();
+      if (!id) return;
+      try {
+        const ex = await Pulse.api.get('/api/executions/' + encodeURIComponent(id));
+        const row = state.rowIndex.get(id) || {};
+        const payload = {
+          execution_id: id,
+          workflow_name: ex.workflow_name || row.workflow_name || '[Quick Command]',
+          status: ex.status,
+          started_by: ex.started_by,
+          started_at: ex.started_at,
+          completed_at: ex.completed_at,
+          logs: ex.logs,
+        };
+        const stamp = new Date().toISOString().split('T')[0];
+        Pulse.util.download('execution-' + id + '-' + stamp + '.json',
+          JSON.stringify(payload, null, 2), 'application/json');
+      } catch (e) {
+        toast('error', (e && e.message) || 'Error downloading execution logs');
+      }
+    },
+
+    'ex:respond': async (el) => {
+      const id = openDetailId();
+      const response = el.getAttribute('data-response');
+      if (!id || response === null) return;
+      try {
+        await Pulse.api.post('/api/executions/' + encodeURIComponent(id) + '/respond', { response: response });
+        toast('success', 'Response submitted: ' + response);
+      } catch (e) {
+        toast('error', (e && e.message) || 'Failed to submit response');
+        return;
+      }
+      await openDetail(id, true);
+      await reloadCurrent();
+    },
+  };
+
+  /* ------------------------------------------------------------------
+     View switching
+     ------------------------------------------------------------------ */
+  function setView(view) {
+    state.view = view;
+    Pulse.util.storage.set(VIEW_KEY, view);
+    if (lt.tabs) lt.tabs.switch(PANEL[view]);
+    if (!state[view].loaded) {
+      loadView(view, false).then(render);
+    } else {
+      render();
+    }
+  }
+
+  /* ------------------------------------------------------------------
+     Deep link: /executions?open=<id>
+     ------------------------------------------------------------------ */
+  function consumeDeepLink() {
+    let id = null;
+    try {
+      id = new URLSearchParams(window.location.search).get('open');
+    } catch (e) { return; }
+    if (!id) return;
+    try {
+      const url = new URL(window.location.href);
+      url.searchParams.delete('open');
+      window.history.replaceState({}, '', url.pathname + (url.search || '') + url.hash);
+    } catch (e) { /* non-fatal */ }
+    openDetail(id, false);
+  }
+
+  /* ------------------------------------------------------------------
+     Page registration
+     ------------------------------------------------------------------ */
+  Pulse.actions.registerAll(actions);
+
+  Pulse.registerPage({
+    name: 'executions',
+
+    async init() {
+      const stored = Pulse.util.storage.get(VIEW_KEY, 'manual');
+      state.view = (stored === 'automated') ? 'automated' : 'manual';
+      if (lt.tabs) lt.tabs.switch(PANEL[state.view]);
+
+      Pulse.events.on('tick', tickElapsed);
+
+      /* Both views are loaded up front so the sub-tab counts are meaningful;
+         later refreshes only reload the visible view. */
+      await Promise.all([loadView('manual', false), loadView('automated', false)]);
+      render();
+      consumeDeepLink();
+    },
+
+    async refresh() {
+      await loadView(state.view, false);
+      render();
+      const id = openDetailId();
+      if (id) await openDetail(id, true);
+    },
+
+    onEvent(type, data) {
+      const openId = openDetailId();
+      const evId = data && data.execution_id;
+
+      if (type === 'command_result' || type === 'workflow_result' || type === 'execution_prompt') {
+        if (openId && evId && openId === evId) openDetail(openId, true);
+        reloadCurrent();
+        return true;
+      }
+      if (type === 'execution_started' || type === 'execution_status' || type === 'executions_bulk_deleted') {
+        reloadCurrent();
+        return true;
+      }
+      return false;
+    },
+  });
+})();
diff --git a/public/assets/pages/quick.css b/public/assets/pages/quick.css
new file mode 100644
index 0000000..82e9ba5
--- /dev/null
+++ b/public/assets/pages/quick.css
@@ -0,0 +1,85 @@
+/* PULSE — Quick Command page (WP-F) styles. Prefix: qc- */
+
+.qc-mode-row {
+  display: flex;
+  gap: var(--space-lg, 1.5rem);
+  flex-wrap: wrap;
+}
+
+.qc-radio-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.qc-worker-list {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  padding: 0.75rem;
+  max-height: 220px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.qc-worker-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.5rem;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.qc-worker-row--online {
+  background: rgba(0, 255, 136, 0.05);
+}
+
+.qc-worker-actions {
+  margin-top: 0.6rem;
+}
+
+.qc-result {
+  margin-top: 1.25rem;
+}
+
+.qc-scroll-list {
+  max-height: 400px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.qc-list-item {
+  cursor: pointer;
+  padding: 0.75rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-dim, var(--border-color));
+  border-left: 3px solid var(--accent-green);
+  transition: var(--transition-fast, background 0.15s);
+}
+
+.qc-list-item:hover {
+  background: rgba(0, 212, 255, 0.06);
+}
+
+.qc-list-item-title {
+  color: var(--accent-green);
+  font-weight: 700;
+  margin-bottom: 0.25rem;
+}
+
+.qc-list-item-code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  color: var(--accent-amber);
+  margin-bottom: 0.25rem;
+}
+
+.qc-list-item-meta {
+  color: var(--text-muted);
+  font-size: 0.85em;
+}
diff --git a/public/assets/pages/quick.js b/public/assets/pages/quick.js
new file mode 100644
index 0000000..3565b76
--- /dev/null
+++ b/public/assets/pages/quick.js
@@ -0,0 +1,365 @@
+/* =====================================================================
+   PULSE — Quick Command page (WP-F)
+   Owns DOM id prefix `qc-` and action namespace `qc:*`.
+   ===================================================================== */
+'use strict';
+
+(function () {
+  const esc = Pulse.esc;
+
+  const HISTORY_KEY = 'commandHistory';
+  const HISTORY_LIMIT = 50;
+  const RERUN_KEY = 'pulse_rerun';
+
+  /* Copied verbatim from the pre-redesign public/index.html commandTemplates
+     array (12 templates) — kept static here since pageConfig only carries
+     isAdmin from server.js (WP-A), not a templates list. */
+  const TEMPLATES = [
+    { name: 'System Info', cmd: 'uname -a', desc: 'Show system information' },
+    { name: 'Uptime', cmd: 'uptime', desc: 'Show system uptime and load' },
+    { name: 'Disk Usage', cmd: 'df -h', desc: 'Show disk space usage' },
+    { name: 'Memory Usage', cmd: 'free -h', desc: 'Show memory usage' },
+    { name: 'CPU Info', cmd: 'lscpu', desc: 'Show CPU information' },
+    { name: 'Running Processes', cmd: 'ps aux --sort=-%mem | head -20', desc: 'Top 20 processes by memory' },
+    { name: 'Network Interfaces', cmd: 'ip addr show', desc: 'Show network interfaces' },
+    { name: 'Active Connections', cmd: 'ss -tunap', desc: 'Show active network connections' },
+    { name: 'Docker Containers', cmd: 'docker ps -a', desc: 'List all Docker containers' },
+    { name: 'System Log Tail', cmd: 'tail -n 50 /var/log/syslog', desc: 'Last 50 lines of system log' },
+    { name: 'Who is Logged In', cmd: 'w', desc: 'Show logged in users' },
+    { name: 'Last Logins', cmd: 'last -n 20', desc: 'Show last 20 logins' },
+  ];
+
+  let _workers = [];
+
+  /* -------------------------------------------------------------------
+     History (localStorage, verbatim key/shape from the old UI)
+     ------------------------------------------------------------------- */
+  function loadHistory() {
+    return Pulse.util.storage.get(HISTORY_KEY, []) || [];
+  }
+
+  function addToHistory(command, workerLabel) {
+    const history = loadHistory();
+    history.unshift({ command: command, worker: workerLabel, timestamp: new Date().toISOString() });
+    if (history.length > HISTORY_LIMIT) history.splice(HISTORY_LIMIT);
+    Pulse.util.storage.set(HISTORY_KEY, history);
+  }
+
+  /* -------------------------------------------------------------------
+     Worker select / checkbox list
+     ------------------------------------------------------------------- */
+  function currentMode() {
+    const checked = document.querySelector('input[name="qc-exec-mode"]:checked');
+    return checked ? checked.value : 'single';
+  }
+
+  function applyMode() {
+    const mode = currentMode();
+    const single = document.getElementById('qc-single-mode');
+    const multi = document.getElementById('qc-multi-mode');
+    if (single) single.hidden = mode !== 'single';
+    if (multi) multi.hidden = mode !== 'multi';
+  }
+
+  function renderWorkerSelect(workers, preserveId) {
+    const select = document.getElementById('qc-worker');
+    if (!select) return;
+    if (workers.length === 0) {
+      select.innerHTML = '<option value="">No workers available</option>';
+      return;
+    }
+    select.innerHTML = workers.map(w =>
+      '<option value="' + esc(w.id) + '">' + esc(w.name) + ' (' + esc(w.status) + ')</option>'
+    ).join('');
+    if (preserveId && workers.some(w => w.id === preserveId)) select.value = preserveId;
+  }
+
+  function renderWorkerCheckboxes(workers, preserveIds) {
+    const wrap = document.getElementById('qc-worker-list');
+    if (!wrap) return;
+    if (workers.length === 0) {
+      wrap.innerHTML = '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-title">No workers available</div></div>';
+      return;
+    }
+    const keep = preserveIds || new Set();
+    wrap.innerHTML = workers.map(w => {
+      const checked = keep.has(w.id) ? ' checked' : '';
+      return (
+        '<label class="qc-worker-row' + (w.status === 'online' ? ' qc-worker-row--online' : '') + '">' +
+          '<input type="checkbox" class="lt-checkbox" name="qc-worker-cb" value="' + esc(w.id) + '" data-status="' + esc(w.status) + '"' + checked + '>' +
+          '<span class="' + Pulse.fmt.status(w.status) + '">' + (w.status === 'online' ? '&#x25cf;' : '&#x25cb;') + '</span>' +
+          '<strong>' + esc(w.name) + '</strong>' +
+        '</label>'
+      );
+    }).join('');
+  }
+
+  function selectedWorkerCheckboxIds() {
+    return Array.from(document.querySelectorAll('input[name="qc-worker-cb"]:checked')).map(cb => cb.value);
+  }
+
+  async function loadWorkers() {
+    const select = document.getElementById('qc-worker');
+    const preserveSingle = select ? select.value : '';
+    const preserveMulti = new Set(selectedWorkerCheckboxIds());
+    try {
+      _workers = await Pulse.api.get('/api/workers') || [];
+    } catch (e) {
+      _workers = [];
+      console.error('[Pulse:quick] failed to load workers', e);
+    }
+    renderWorkerSelect(_workers, preserveSingle);
+    renderWorkerCheckboxes(_workers, preserveMulti);
+    return _workers;
+  }
+
+  /* -------------------------------------------------------------------
+     Templates modal
+     ------------------------------------------------------------------- */
+  function renderTemplates() {
+    const list = document.getElementById('qc-templates-list');
+    if (!list) return;
+    list.innerHTML = TEMPLATES.map((t, i) =>
+      '<div class="qc-list-item" data-action="qc:template-use" data-index="' + i + '">' +
+        '<div class="qc-list-item-title">' + esc(t.name) + '</div>' +
+        '<div class="qc-list-item-code"><code>' + esc(t.cmd) + '</code></div>' +
+        '<div class="qc-list-item-meta">' + esc(t.desc) + '</div>' +
+      '</div>'
+    ).join('');
+  }
+
+  function renderHistory() {
+    const list = document.getElementById('qc-history-list');
+    if (!list) return;
+    const history = loadHistory();
+    if (history.length === 0) {
+      list.innerHTML = '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-title">No command history yet</div></div>';
+      return;
+    }
+    list.innerHTML = history.map((item, i) =>
+      '<div class="qc-list-item" data-action="qc:history-use" data-index="' + i + '">' +
+        '<div class="qc-list-item-code"><code>' + esc(item.command) + '</code></div>' +
+        '<div class="qc-list-item-meta">' + esc(Pulse.fmt.dateTime(item.timestamp)) + ' &mdash; ' + esc(item.worker) + '</div>' +
+      '</div>'
+    ).join('');
+  }
+
+  /* -------------------------------------------------------------------
+     Result rendering
+     ------------------------------------------------------------------- */
+  function renderSingleSuccess(executionId) {
+    const wrap = document.getElementById('qc-result');
+    if (!wrap) return;
+    wrap.innerHTML =
+      '<div class="lt-alert lt-alert--success">' +
+        '<span class="lt-alert-icon">&#x2713;</span>' +
+        '<div class="lt-alert-body">' +
+          '<div class="lt-alert-title">Command sent successfully</div>' +
+          '<div class="lt-alert-msg">Execution ID: <code>' + esc(executionId) + '</code> &mdash; ' +
+            '<a href="/executions?open=' + encodeURIComponent(executionId) + '">view in Executions</a>' +
+          '</div>' +
+        '</div>' +
+      '</div>';
+  }
+
+  function renderSingleFailure(message) {
+    const wrap = document.getElementById('qc-result');
+    if (!wrap) return;
+    wrap.innerHTML =
+      '<div class="lt-alert lt-alert--error">' +
+        '<span class="lt-alert-icon">&#x2715;</span>' +
+        '<div class="lt-alert-body">' +
+          '<div class="lt-alert-title">Command failed</div>' +
+          '<div class="lt-alert-msg">' + esc(message) + '</div>' +
+        '</div>' +
+      '</div>';
+  }
+
+  function renderMultiResult(results, successCount, failCount) {
+    const wrap = document.getElementById('qc-result');
+    if (!wrap) return;
+    const rows = results.map(r =>
+      '<tr>' +
+        '<td data-label="Worker">' + esc(r.worker) + '</td>' +
+        '<td data-label="Result">' +
+          (r.success
+            ? '<span class="lt-status lt-status-completed">&#x2713; Sent (' + esc(String(r.executionId || '').slice(0, 8)) + '&hellip;)</span>'
+            : '<span class="lt-status lt-status-failed">&#x2715; ' + esc(r.error) + '</span>') +
+        '</td>' +
+      '</tr>'
+    ).join('');
+    wrap.innerHTML =
+      '<div class="lt-alert' + (failCount === 0 ? ' lt-alert--success' : (successCount === 0 ? ' lt-alert--error' : ' lt-alert--warning')) + '">' +
+        '<div class="lt-alert-body">' +
+          '<div class="lt-alert-title">Multi-worker execution complete</div>' +
+          '<div class="lt-alert-msg">Success: ' + successCount + ' &nbsp;|&nbsp; Failed: ' + failCount + '</div>' +
+        '</div>' +
+      '</div>' +
+      '<table class="lt-table lt-table-sm lt-table-responsive">' +
+        '<thead><tr><th>Worker</th><th>Result</th></tr></thead>' +
+        '<tbody>' + rows + '</tbody>' +
+      '</table>';
+  }
+
+  function renderExecuting(count) {
+    const wrap = document.getElementById('qc-result');
+    if (!wrap) return;
+    wrap.innerHTML = '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-title">Executing' +
+      (count > 1 ? ' on ' + count + ' worker(s)' : '') + '&hellip;</div></div>';
+  }
+
+  /* -------------------------------------------------------------------
+     Execute
+     ------------------------------------------------------------------- */
+  async function execute() {
+    const commandEl = document.getElementById('qc-command');
+    const command = commandEl ? commandEl.value.trim() : '';
+    if (!command) {
+      Pulse.toast.error('Please enter a command');
+      return;
+    }
+    const mode = currentMode();
+
+    if (mode === 'single') {
+      const select = document.getElementById('qc-worker');
+      const workerId = select ? select.value : '';
+      if (!workerId) {
+        Pulse.toast.error('Please select a worker');
+        return;
+      }
+      const worker = _workers.find(w => w.id === workerId);
+      const workerName = worker ? worker.name : 'Unknown';
+      renderExecuting(1);
+      try {
+        const data = await Pulse.api.post('/api/workers/' + encodeURIComponent(workerId) + '/command', { command });
+        addToHistory(command, workerName);
+        renderSingleSuccess(data && data.execution_id);
+        Pulse.beep('success');
+      } catch (e) {
+        renderSingleFailure(e.message || 'Failed to execute command');
+        Pulse.beep('error');
+      }
+      return;
+    }
+
+    const workerIds = selectedWorkerCheckboxIds();
+    if (workerIds.length === 0) {
+      Pulse.toast.error('Please select at least one worker');
+      return;
+    }
+    renderExecuting(workerIds.length);
+    const results = [];
+    let successCount = 0;
+    let failCount = 0;
+    for (const workerId of workerIds) {
+      const worker = _workers.find(w => w.id === workerId);
+      const workerLabel = worker ? worker.name : workerId;
+      try {
+        const data = await Pulse.api.post('/api/workers/' + encodeURIComponent(workerId) + '/command', { command });
+        results.push({ worker: workerLabel, success: true, executionId: data && data.execution_id });
+        successCount++;
+      } catch (e) {
+        results.push({ worker: workerLabel, success: false, error: e.message || 'Failed to execute' });
+        failCount++;
+      }
+    }
+    addToHistory(command, workerIds.length + ' workers');
+    renderMultiResult(results, successCount, failCount);
+    if (failCount === 0) Pulse.beep('success');
+    else if (successCount > 0) Pulse.beep('info');
+    else Pulse.beep('error');
+  }
+
+  /* -------------------------------------------------------------------
+     Cross-page re-run (from Executions page)
+     ------------------------------------------------------------------- */
+  function consumeRerun() {
+    let raw;
+    try { raw = window.sessionStorage.getItem(RERUN_KEY); } catch (e) { return; }
+    if (!raw) return;
+    try { window.sessionStorage.removeItem(RERUN_KEY); } catch (e) { /* ignore */ }
+    let payload;
+    try { payload = JSON.parse(raw); } catch (e) { return; }
+    if (!payload) return;
+
+    const singleRadio = document.getElementById('qc-mode-single');
+    if (singleRadio) singleRadio.checked = true;
+    applyMode();
+
+    if (payload.worker_id) {
+      const select = document.getElementById('qc-worker');
+      const hasWorker = select && _workers.some(w => w.id === payload.worker_id);
+      if (hasWorker) {
+        select.value = payload.worker_id;
+      } else {
+        Pulse.toast.warning('Original worker is no longer available — select a worker to run this command.');
+      }
+    }
+    const commandEl = document.getElementById('qc-command');
+    if (commandEl) {
+      commandEl.value = payload.command || '';
+      commandEl.focus();
+    }
+  }
+
+  /* -------------------------------------------------------------------
+     Data loading / refresh
+     ------------------------------------------------------------------- */
+  async function refresh() {
+    await loadWorkers();
+  }
+
+  function init() {
+    Pulse.actions.registerAll({
+      'qc:mode': applyMode,
+      'qc:templates-open': () => { renderTemplates(); if (window.lt && lt.modal) lt.modal.open('qc-templates-modal'); },
+      'qc:template-use': (el) => {
+        const idx = Number(el.getAttribute('data-index'));
+        const tpl = TEMPLATES[idx];
+        if (!tpl) return;
+        const commandEl = document.getElementById('qc-command');
+        if (commandEl) commandEl.value = tpl.cmd;
+        if (window.lt && lt.modal) lt.modal.close('qc-templates-modal');
+      },
+      'qc:history-open': () => { renderHistory(); if (window.lt && lt.modal) lt.modal.open('qc-history-modal'); },
+      'qc:history-use': (el) => {
+        const idx = Number(el.getAttribute('data-index'));
+        const history = loadHistory();
+        const item = history[idx];
+        if (!item) return;
+        const commandEl = document.getElementById('qc-command');
+        if (commandEl) commandEl.value = item.command;
+        if (window.lt && lt.modal) lt.modal.close('qc-history-modal');
+      },
+      'qc:select-all': () => {
+        document.querySelectorAll('input[name="qc-worker-cb"]').forEach(cb => { cb.checked = true; });
+      },
+      'qc:select-online': () => {
+        document.querySelectorAll('input[name="qc-worker-cb"]').forEach(cb => {
+          cb.checked = cb.getAttribute('data-status') === 'online';
+        });
+      },
+      'qc:clear-all': () => {
+        document.querySelectorAll('input[name="qc-worker-cb"]').forEach(cb => { cb.checked = false; });
+      },
+      'qc:execute': execute,
+    });
+
+    if (window.lt && lt.keys && typeof lt.keys.on === 'function') {
+      lt.keys.on('ctrl+enter', () => { execute(); });
+    }
+
+    applyMode();
+    return loadWorkers().then(() => { consumeRerun(); });
+  }
+
+  function onEvent(type) {
+    if (type === 'worker_update') {
+      loadWorkers();
+      return true;
+    }
+    return false;
+  }
+
+  Pulse.registerPage({ name: 'quick', init, refresh, onEvent });
+})();
diff --git a/public/assets/pages/scheduler.css b/public/assets/pages/scheduler.css
new file mode 100644
index 0000000..b93b048
--- /dev/null
+++ b/public/assets/pages/scheduler.css
@@ -0,0 +1,10 @@
+/* PULSE — Scheduler page (WP-F) styles. Prefix: sc- */
+
+.sc-row-disabled {
+  opacity: 0.6;
+}
+
+.sc-countdown {
+  color: var(--text-muted);
+  font-size: 0.85em;
+}
diff --git a/public/assets/pages/scheduler.js b/public/assets/pages/scheduler.js
new file mode 100644
index 0000000..8b4dc0b
--- /dev/null
+++ b/public/assets/pages/scheduler.js
@@ -0,0 +1,286 @@
+/* =====================================================================
+   PULSE — Scheduler page (WP-F)
+   Owns DOM id prefix `sc-` and action namespace `sc:*`.
+   ===================================================================== */
+'use strict';
+
+(function () {
+  const esc = Pulse.esc;
+  const fmt = Pulse.fmt;
+
+  let _schedules = [];
+  let _workers = [];
+
+  /* -------------------------------------------------------------------
+     Helpers
+     ------------------------------------------------------------------- */
+  function parseWorkerIds(raw) {
+    if (Array.isArray(raw)) return raw;
+    if (typeof raw === 'string') {
+      try {
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed : raw.split(',').filter(Boolean);
+      } catch (e) {
+        return raw.split(',').filter(Boolean);
+      }
+    }
+    return [];
+  }
+
+  function scheduleDescription(s) {
+    if (s.schedule_type === 'interval') return 'Every ' + esc(s.schedule_value) + ' minutes';
+    if (s.schedule_type === 'hourly') return 'Every ' + esc(s.schedule_value) + ' hour(s)';
+    if (s.schedule_type === 'daily') return 'Daily at ' + esc(s.schedule_value);
+    if (s.schedule_type === 'cron') return 'Cron: ' + esc(s.schedule_value);
+    return esc(s.schedule_value || '');
+  }
+
+  function workerNamesHtml(ids) {
+    if (!ids.length) return '<span class="lt-text-dim">&mdash;</span>';
+    return ids.map(id => {
+      const w = _workers.find(worker => worker.id === id);
+      const label = w ? w.name : String(id).slice(0, 8);
+      return '<span class="lt-badge">' + esc(label) + '</span>';
+    }).join(' ');
+  }
+
+  function nextRunCountdown(nextRun) {
+    const d = fmt.safeDate(nextRun);
+    if (!d) return '';
+    const secs = Math.round((d.getTime() - Date.now()) / 1000);
+    if (secs <= 0) return 'now';
+    if (secs < 60) return secs + 's';
+    if (secs < 3600) return Math.round(secs / 60) + 'm';
+    return Math.round(secs / 3600) + 'h';
+  }
+
+  /* -------------------------------------------------------------------
+     Table rendering
+     ------------------------------------------------------------------- */
+  function rowHtml(s) {
+    const workerIds = parseWorkerIds(s.worker_ids);
+    const lastRun = s.last_run ? esc(fmt.dateTime(s.last_run)) : 'Never';
+    const nextRunDate = fmt.safeDate(s.next_run);
+    const countdown = nextRunCountdown(s.next_run);
+    const nextRun = nextRunDate
+      ? esc(fmt.dateTime(s.next_run)) + (countdown ? ' <span class="sc-countdown" data-next-run="' + esc(s.next_run) + '">(in ' + esc(countdown) + ')</span>' : '')
+      : 'Not scheduled';
+    const statusBadge = s.enabled
+      ? '<span class="lt-badge lt-badge-green">ENABLED</span>'
+      : '<span class="lt-badge lt-badge-red">DISABLED</span>';
+    const adminActions = Pulse.isAdmin
+      ? '<div class="lt-btn-group">' +
+          '<button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-action="sc:toggle" data-id="' + esc(s.id) + '" data-enabled="' + (s.enabled ? '1' : '0') + '">' +
+            (s.enabled ? '&#x23f8; Disable' : '&#x25b6; Enable') +
+          '</button>' +
+          '<button type="button" class="lt-btn lt-btn-danger lt-btn-sm" data-action="sc:delete" data-id="' + esc(s.id) + '" data-name="' + esc(s.name || '') + '">&#x1f5d1; Delete</button>' +
+        '</div>'
+      : '';
+    return (
+      '<tr class="' + (s.enabled ? '' : 'sc-row-disabled') + '">' +
+        '<td data-label="Name">' + esc(s.name || '') + '</td>' +
+        '<td data-label="Command"><code>' + esc(s.command || '') + '</code></td>' +
+        '<td data-label="Schedule">' + scheduleDescription(s) + '</td>' +
+        '<td data-label="Workers">' + workerNamesHtml(workerIds) + '</td>' +
+        '<td data-label="Last run">' + lastRun + '</td>' +
+        '<td data-label="Next run">' + nextRun + '</td>' +
+        '<td data-label="Status">' + statusBadge + '</td>' +
+        '<td data-label="Actions">' + adminActions + '</td>' +
+      '</tr>'
+    );
+  }
+
+  function render() {
+    const wrap = document.getElementById('sc-wrap');
+    if (!wrap) return;
+    if (_schedules.length === 0) {
+      wrap.innerHTML = '<div class="lt-empty-state"><div class="lt-empty-state-title">No scheduled commands yet</div></div>';
+      return;
+    }
+    wrap.innerHTML =
+      '<table class="lt-table lt-table-responsive">' +
+        '<thead><tr><th>Name</th><th>Command</th><th>Schedule</th><th>Workers</th><th>Last run</th><th>Next run</th><th>Status</th><th>Actions</th></tr></thead>' +
+        '<tbody>' + _schedules.map(rowHtml).join('') + '</tbody>' +
+      '</table>';
+  }
+
+  function renderError() {
+    const wrap = document.getElementById('sc-wrap');
+    if (!wrap) return;
+    wrap.innerHTML =
+      '<div class="lt-alert lt-alert--error">' +
+        '<span class="lt-alert-icon">&#x2715;</span>' +
+        '<div class="lt-alert-body"><div class="lt-alert-title">Failed to load schedules</div></div>' +
+      '</div>';
+  }
+
+  function onTick() {
+    document.querySelectorAll('#sc-wrap .sc-countdown[data-next-run]').forEach(el => {
+      const countdown = nextRunCountdown(el.getAttribute('data-next-run'));
+      el.textContent = countdown ? '(in ' + countdown + ')' : '';
+    });
+  }
+
+  /* -------------------------------------------------------------------
+     Create modal
+     ------------------------------------------------------------------- */
+  function renderCreateWorkerList() {
+    const wrap = document.getElementById('sc-worker-list');
+    if (!wrap) return;
+    if (_workers.length === 0) {
+      wrap.innerHTML = '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-title">No workers available</div></div>';
+      return;
+    }
+    wrap.innerHTML = _workers.map(w =>
+      '<label class="qc-worker-row' + (w.status === 'online' ? ' qc-worker-row--online' : '') + '">' +
+        '<input type="checkbox" class="lt-checkbox" name="sc-worker-cb" value="' + esc(w.id) + '">' +
+        '<span class="' + fmt.status(w.status) + '">' + (w.status === 'online' ? '&#x25cf;' : '&#x25cb;') + '</span>' +
+        '<strong>' + esc(w.name) + '</strong>' +
+      '</label>'
+    ).join('');
+  }
+
+  function updateValueInput() {
+    const type = document.getElementById('sc-type').value;
+    const container = document.getElementById('sc-value-container');
+    if (!container) return;
+    if (type === 'interval') {
+      container.innerHTML =
+        '<label class="lt-label" for="sc-value">Interval (minutes)</label>' +
+        '<input type="number" id="sc-value" class="lt-input" placeholder="e.g. 30" min="1">';
+    } else if (type === 'hourly') {
+      container.innerHTML =
+        '<label class="lt-label" for="sc-value">Every X Hours</label>' +
+        '<input type="number" id="sc-value" class="lt-input" placeholder="e.g. 2" min="1" max="24">';
+    } else if (type === 'daily') {
+      container.innerHTML =
+        '<label class="lt-label" for="sc-value">Time (HH:MM)</label>' +
+        '<input type="time" id="sc-value" class="lt-input">';
+    }
+  }
+
+  function resetCreateForm() {
+    const form = document.getElementById('sc-create-form');
+    if (form) form.reset();
+    const type = document.getElementById('sc-type');
+    if (type) type.value = 'interval';
+    updateValueInput();
+    renderCreateWorkerList();
+  }
+
+  async function submitCreate() {
+    const name = document.getElementById('sc-name').value.trim();
+    const command = document.getElementById('sc-command').value.trim();
+    const type = document.getElementById('sc-type').value;
+    const valueEl = document.getElementById('sc-value');
+    const value = valueEl ? valueEl.value : '';
+    const workerIds = Array.from(document.querySelectorAll('input[name="sc-worker-cb"]:checked')).map(cb => cb.value);
+
+    if (!name || !command || !value || workerIds.length === 0) {
+      Pulse.toast.error('Please fill in all fields and select at least one worker');
+      return;
+    }
+
+    try {
+      await Pulse.api.post('/api/scheduled-commands', {
+        name: name,
+        command: command,
+        worker_ids: workerIds,
+        schedule_type: type,
+        schedule_value: value,
+      });
+      if (window.lt && lt.modal) lt.modal.close('sc-create-modal');
+      Pulse.toast.success('Schedule created successfully');
+      resetCreateForm();
+      await load();
+    } catch (e) {
+      Pulse.toast.error('Failed to create schedule: ' + (e.message || 'unknown error'));
+    }
+  }
+
+  async function toggleSchedule(id) {
+    try {
+      const data = await Pulse.api.put('/api/scheduled-commands/' + encodeURIComponent(id) + '/toggle');
+      Pulse.toast.success('Schedule ' + (data && data.enabled ? 'enabled' : 'disabled'));
+      await load();
+    } catch (e) {
+      Pulse.toast.error('Failed to toggle schedule: ' + (e.message || 'unknown error'));
+    }
+  }
+
+  async function deleteSchedule(id, name) {
+    const ok = await Pulse.confirm({
+      title: 'Delete schedule',
+      message: 'Delete scheduled command: ' + name + '?',
+      type: 'error',
+      confirmLabel: 'DELETE',
+    });
+    if (!ok) return;
+    try {
+      await Pulse.api.delete('/api/scheduled-commands/' + encodeURIComponent(id));
+      Pulse.toast.success('Schedule deleted');
+      await load();
+    } catch (e) {
+      Pulse.toast.error('Failed to delete schedule: ' + (e.message || 'unknown error'));
+    }
+  }
+
+  /* -------------------------------------------------------------------
+     Data loading
+     ------------------------------------------------------------------- */
+  async function loadWorkers() {
+    try {
+      _workers = await Pulse.api.get('/api/workers') || [];
+    } catch (e) {
+      _workers = [];
+      console.error('[Pulse:scheduler] failed to load workers', e);
+    }
+    return _workers;
+  }
+
+  async function loadSchedules() {
+    try {
+      _schedules = await Pulse.api.get('/api/scheduled-commands') || [];
+      render();
+    } catch (e) {
+      _schedules = [];
+      console.error('[Pulse:scheduler] failed to load schedules', e);
+      renderError();
+    }
+    return _schedules;
+  }
+
+  async function load() {
+    await loadWorkers();
+    await loadSchedules();
+  }
+
+  async function refresh() {
+    await load();
+  }
+
+  function init() {
+    Pulse.actions.registerAll({
+      'sc:create-open': () => {
+        resetCreateForm();
+        if (window.lt && lt.modal) lt.modal.open('sc-create-modal');
+      },
+      'sc:create-submit': submitCreate,
+      'sc:type': updateValueInput,
+      'sc:toggle': (el) => toggleSchedule(el.getAttribute('data-id')),
+      'sc:delete': (el) => deleteSchedule(el.getAttribute('data-id'), el.getAttribute('data-name')),
+    });
+    Pulse.events.on('tick', onTick);
+    return load();
+  }
+
+  function onEvent(type) {
+    if (type === 'worker_update') {
+      loadWorkers().then(render);
+      return true;
+    }
+    return false;
+  }
+
+  Pulse.registerPage({ name: 'scheduler', init, refresh, onEvent });
+})();
diff --git a/public/assets/pages/workers.css b/public/assets/pages/workers.css
new file mode 100644
index 0000000..03a5ee1
--- /dev/null
+++ b/public/assets/pages/workers.css
@@ -0,0 +1,32 @@
+/* Workers page (WP-C) — grid layout for worker cards. */
+.wk-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--space-md);
+}
+
+.wk-card-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-sm);
+}
+
+.wk-name {
+  font-weight: 700;
+  flex: 1;
+}
+
+.wk-lastseen {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  margin-bottom: var(--space-sm);
+}
+
+.wk-card .lt-card-footer {
+  margin-top: var(--space-md);
+  padding-top: var(--space-sm);
+  border-top: 1px solid var(--border-color-dim);
+  display: flex;
+  justify-content: flex-end;
+}
diff --git a/public/assets/pages/workers.js b/public/assets/pages/workers.js
new file mode 100644
index 0000000..45d61f9
--- /dev/null
+++ b/public/assets/pages/workers.js
@@ -0,0 +1,257 @@
+/* =====================================================================
+   PULSE — Workers page (WP-C)
+   Owns DOM id prefix `wk-` and action namespace `wk:*`.
+   ===================================================================== */
+'use strict';
+
+(function () {
+  const esc = Pulse.esc;
+  const fmt = Pulse.fmt;
+
+  function parseMeta(worker) {
+    if (!worker || !worker.metadata) return null;
+    if (typeof worker.metadata === 'string') {
+      try { return JSON.parse(worker.metadata); } catch (e) { return null; }
+    }
+    return worker.metadata;
+  }
+
+  function memPct(meta) {
+    if (!meta || !meta.totalMem) return 0;
+    return ((meta.totalMem - meta.freeMem) / meta.totalMem * 100);
+  }
+
+  function loadAvgText(meta) {
+    if (!meta || !meta.loadavg) return 'N/A';
+    return meta.loadavg.map(l => Number(l).toFixed(2)).join(', ');
+  }
+
+  /* -------------------------------------------------------------------
+     Card construction
+     ------------------------------------------------------------------- */
+  function footerHtml(worker) {
+    if (!Pulse.isAdmin) return '';
+    return (
+      '<div class="lt-card-footer">' +
+        '<button type="button" class="lt-btn lt-btn-danger lt-btn-sm" data-action="wk:delete" ' +
+          'data-worker-id="' + esc(worker.id) + '" data-worker-name="' + esc(worker.name) + '">Delete</button>' +
+      '</div>'
+    );
+  }
+
+  function cardHtml(worker) {
+    const meta = parseMeta(worker);
+    const online = worker.status === 'online';
+    const pct = memPct(meta).toFixed(1);
+    return (
+      '<div class="wk-card-header">' +
+        '<span class="lt-dot ' + (online ? 'lt-dot-up' : 'lt-dot-down') + '" data-wk-dot></span>' +
+        '<span class="wk-name" data-wk-name>' + esc(worker.name) + '</span>' +
+        '<span class="' + fmt.status(worker.status) + '" data-wk-status>' + esc(String(worker.status || '').toUpperCase()) + '</span>' +
+      '</div>' +
+      '<div class="wk-lastseen" data-wk-lastseen data-last-heartbeat="' + esc(worker.last_heartbeat || '') + '">' +
+        'Last seen: ' + esc(fmt.ago(worker.last_heartbeat)) +
+      '</div>' +
+      '<div class="lt-kv-grid">' +
+        '<div class="lt-kv-key">System</div>' +
+        '<div class="lt-kv-val" data-wk-system>' + (meta ? esc((meta.platform || 'N/A') + ' ' + (meta.arch || '') + ' | ' + (meta.cpus || '?') + ' CPU cores') : 'N/A') + '</div>' +
+        '<div class="lt-kv-key">Memory</div>' +
+        '<div class="lt-kv-val" data-wk-memory>' +
+          (meta ? esc(fmt.bytes(meta.totalMem - meta.freeMem) + ' / ' + fmt.bytes(meta.totalMem) + ' (' + pct + '% used)') : 'N/A') +
+          '<div class="lt-progress"><div class="lt-progress-bar" data-wk-membar style="width:' + (meta ? pct : 0) + '%"></div></div>' +
+        '</div>' +
+        '<div class="lt-kv-key">Load Avg</div>' +
+        '<div class="lt-kv-val" data-wk-load>' + esc(loadAvgText(meta)) + '</div>' +
+        '<div class="lt-kv-key">Uptime</div>' +
+        '<div class="lt-kv-val" data-wk-uptime>' + esc(fmt.uptime(meta && meta.uptime)) + '</div>' +
+        '<div class="lt-kv-key">Active Tasks</div>' +
+        '<div class="lt-kv-val" data-wk-tasks>' + esc((meta && meta.activeTasks || 0) + ' / ' + (meta && meta.maxConcurrentTasks || 0)) + '</div>' +
+      '</div>' +
+      footerHtml(worker)
+    );
+  }
+
+  function createCard(worker) {
+    const div = document.createElement('div');
+    div.className = 'lt-card wk-card';
+    div.setAttribute('data-worker-id', worker.id);
+    div.classList.add(worker.status === 'online' ? 'wk-card-online' : 'wk-card-offline');
+    div.innerHTML = cardHtml(worker);
+    return div;
+  }
+
+  /* Update an existing card's fields in place — never replaces the card
+     node itself, so identity is preserved across refreshes. */
+  function patchCard(card, worker) {
+    const meta = parseMeta(worker);
+    const online = worker.status === 'online';
+
+    card.classList.toggle('wk-card-online', online);
+    card.classList.toggle('wk-card-offline', !online);
+
+    const dot = card.querySelector('[data-wk-dot]');
+    if (dot) dot.className = 'lt-dot ' + (online ? 'lt-dot-up' : 'lt-dot-down');
+
+    const name = card.querySelector('[data-wk-name]');
+    if (name) name.textContent = worker.name;
+
+    const status = card.querySelector('[data-wk-status]');
+    if (status) {
+      status.className = fmt.status(worker.status);
+      status.textContent = String(worker.status || '').toUpperCase();
+    }
+
+    const lastSeen = card.querySelector('[data-wk-lastseen]');
+    if (lastSeen) {
+      lastSeen.setAttribute('data-last-heartbeat', worker.last_heartbeat || '');
+      lastSeen.textContent = 'Last seen: ' + fmt.ago(worker.last_heartbeat);
+    }
+
+    const system = card.querySelector('[data-wk-system]');
+    if (system) system.textContent = meta ? ((meta.platform || 'N/A') + ' ' + (meta.arch || '') + ' | ' + (meta.cpus || '?') + ' CPU cores') : 'N/A';
+
+    const pct = memPct(meta).toFixed(1);
+    const memory = card.querySelector('[data-wk-memory]');
+    if (memory) {
+      const bar = memory.querySelector('[data-wk-membar]');
+      const text = meta ? (fmt.bytes(meta.totalMem - meta.freeMem) + ' / ' + fmt.bytes(meta.totalMem) + ' (' + pct + '% used)') : 'N/A';
+      if (memory.firstChild && memory.firstChild.nodeType === Node.TEXT_NODE) {
+        memory.firstChild.textContent = text;
+      } else {
+        memory.insertBefore(document.createTextNode(text), memory.firstChild);
+      }
+      if (bar) bar.style.width = (meta ? pct : 0) + '%';
+    }
+
+    const load = card.querySelector('[data-wk-load]');
+    if (load) load.textContent = loadAvgText(meta);
+
+    const uptime = card.querySelector('[data-wk-uptime]');
+    if (uptime) uptime.textContent = fmt.uptime(meta && meta.uptime);
+
+    const tasks = card.querySelector('[data-wk-tasks]');
+    if (tasks) tasks.textContent = (meta && meta.activeTasks || 0) + ' / ' + (meta && meta.maxConcurrentTasks || 0);
+
+    // Admin footer can appear/disappear if isAdmin changes mid-session (rare,
+    // but keep it correct rather than assuming it's static).
+    const hasFooter = !!card.querySelector('.lt-card-footer');
+    if (Pulse.isAdmin && !hasFooter) {
+      card.insertAdjacentHTML('beforeend', footerHtml(worker));
+    } else if (!Pulse.isAdmin && hasFooter) {
+      const f = card.querySelector('.lt-card-footer');
+      if (f) f.remove();
+    } else if (hasFooter) {
+      const btn = card.querySelector('[data-action="wk:delete"]');
+      if (btn) btn.setAttribute('data-worker-name', worker.name);
+    }
+  }
+
+  /* -------------------------------------------------------------------
+     Grid rendering — patches existing cards, adds/removes as needed.
+     ------------------------------------------------------------------- */
+  function renderGrid(workers) {
+    const grid = document.getElementById('wk-grid');
+    if (!grid) return;
+
+    if (workers.length === 0) {
+      grid.innerHTML =
+        '<div class="lt-empty-state">' +
+          '<div class="lt-empty-state-icon">&#x2699;</div>' +
+          '<div class="lt-empty-state-title">No workers connected</div>' +
+          '<div class="lt-empty-state-body">Workers appear here once they connect and send a heartbeat.</div>' +
+        '</div>';
+      return;
+    }
+
+    const loading = document.getElementById('wk-loading');
+    if (loading) loading.remove();
+
+    const seen = new Set();
+    const order = [];
+    workers.forEach(worker => {
+      seen.add(String(worker.id));
+      let card = grid.querySelector('.wk-card[data-worker-id="' + cssEscape(worker.id) + '"]');
+      if (!card) {
+        card = createCard(worker);
+      } else {
+        patchCard(card, worker);
+      }
+      order.push(card);
+    });
+
+    // Remove cards for workers no longer present.
+    Array.prototype.slice.call(grid.querySelectorAll('.wk-card')).forEach(card => {
+      if (!seen.has(String(card.getAttribute('data-worker-id')))) card.remove();
+    });
+
+    // Ensure DOM order matches API order without detaching untouched nodes
+    // unnecessarily (appendChild on an already-positioned node is a no-op
+    // move, not a re-create, so identity is preserved either way).
+    order.forEach(card => grid.appendChild(card));
+  }
+
+  function cssEscape(v) {
+    if (window.CSS && CSS.escape) return CSS.escape(String(v));
+    return String(v).replace(/["\\]/g, '\\$&');
+  }
+
+  function renderError() {
+    const grid = document.getElementById('wk-grid');
+    if (!grid) return;
+    grid.innerHTML = '<div class="lt-alert lt-alert--error"><div class="lt-alert-body"><div class="lt-alert-msg">Failed to load workers</div></div></div>';
+  }
+
+  /* -------------------------------------------------------------------
+     Data loading + actions
+     ------------------------------------------------------------------- */
+  async function loadWorkers() {
+    try {
+      const workers = await Pulse.api.get('/api/workers') || [];
+      renderGrid(workers);
+    } catch (e) {
+      console.error('[Pulse:workers] failed to load workers', e);
+      renderError();
+    }
+  }
+
+  async function deleteWorker(el) {
+    const id = el.getAttribute('data-worker-id');
+    const name = el.getAttribute('data-worker-name') || 'this worker';
+    const ok = await Pulse.confirm({
+      title: 'Delete worker',
+      message: 'Delete worker ' + name + '?',
+      type: 'error',
+    });
+    if (!ok) return;
+    try {
+      await Pulse.api.delete('/api/workers/' + encodeURIComponent(id));
+      Pulse.toast.success('Worker deleted');
+      await loadWorkers();
+    } catch (e) {
+      Pulse.toast.error((e && e.message) || 'Failed to delete worker');
+    }
+  }
+
+  function onTick() {
+    document.querySelectorAll('#wk-grid [data-wk-lastseen][data-last-heartbeat]').forEach(el => {
+      const v = el.getAttribute('data-last-heartbeat');
+      if (v) el.textContent = 'Last seen: ' + fmt.ago(v);
+    });
+  }
+
+  function init() {
+    Pulse.actions.register('wk:delete', deleteWorker);
+    Pulse.events.on('tick', onTick);
+    return loadWorkers();
+  }
+
+  function onEvent(type) {
+    if (type === 'worker_update') {
+      loadWorkers();
+      return true;
+    }
+    return false;
+  }
+
+  Pulse.registerPage({ name: 'workers', init, refresh: loadWorkers, onEvent });
+})();
diff --git a/public/assets/pages/workflows.css b/public/assets/pages/workflows.css
new file mode 100644
index 0000000..e5d3c18
--- /dev/null
+++ b/public/assets/pages/workflows.css
@@ -0,0 +1,26 @@
+/* Workflows page (WP-D) — extends base.css, never overrides its variables. */
+
+.wf-json-textarea {
+  font-family: var(--font-mono);
+  min-height: 200px;
+}
+
+.wf-json-textarea-lg {
+  min-height: 320px;
+  font-size: 0.8rem;
+}
+
+.wf-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.wf-required {
+  color: var(--accent-red);
+}
+
+/* `.lt-field-error` and `.is-invalid` live in /assets/app.css (shared). */
diff --git a/public/assets/pages/workflows.js b/public/assets/pages/workflows.js
new file mode 100644
index 0000000..0cfcfd3
--- /dev/null
+++ b/public/assets/pages/workflows.js
@@ -0,0 +1,355 @@
+/* =====================================================================
+   PULSE — Workflows page (WP-D)
+   ---------------------------------------------------------------------
+   Owns: DOM id prefix `wf-`, action namespace `wf:*`.
+   Consumes the frozen window.Pulse contract from /assets/app.js.
+   ===================================================================== */
+'use strict';
+
+(function () {
+  // Example workflow definition. The Create modal is pre-filled with this
+  // every time it opens (fixes the old bug where the textarea was blanked).
+  var EXAMPLE_DEFINITION = {
+    steps: [
+      {
+        name: 'Example Step',
+        type: 'execute',
+        targets: ['all'],
+        command: "echo 'Hello from PULSE'"
+      }
+    ]
+  };
+
+  // id -> parsed definition object, rebuilt on every list load.
+  var _registry = {};
+  // id -> raw row from the list response (name/description/etc.).
+  var _rowsById = {};
+  // workflow id currently targeted by the Run modal.
+  var _pendingWorkflowId = null;
+
+  function paramBadge(def) {
+    var params = (def && def.params) || [];
+    if (!params.length) return '';
+    var n = params.length;
+    return ' <span class="lt-badge lt-badge-sm">' + n + ' param' + (n > 1 ? 's' : '') + '</span>';
+  }
+
+  function parseDefinition(raw) {
+    if (raw && typeof raw === 'object') return raw;
+    if (typeof raw === 'string') {
+      try { return JSON.parse(raw); } catch (e) { return {}; }
+    }
+    return {};
+  }
+
+  function renderEmptyState() {
+    return (
+      '<div class="lt-empty-state">' +
+        '<div class="lt-empty-state-icon">&#x2699;</div>' +
+        '<div class="lt-empty-state-title">No workflows yet</div>' +
+        '<div class="lt-empty-state-body">Workflows let you run multi-step jobs across one or more workers.</div>' +
+        '<button type="button" class="lt-btn lt-btn-primary" data-action="wf:create-open">Create your first workflow</button>' +
+      '</div>'
+    );
+  }
+
+  function renderRow(w) {
+    var def = _registry[w.id] || {};
+    var isAdmin = window.Pulse.isAdmin;
+    var esc = window.Pulse.esc;
+    var actions =
+      '<button type="button" class="lt-btn lt-btn-sm lt-btn-primary" data-action="wf:execute" data-workflow-id="' +
+        esc(w.id) + '">Execute</button>';
+    if (isAdmin) {
+      actions +=
+        ' <button type="button" class="lt-btn lt-btn-sm lt-btn-secondary" data-action="wf:edit-open" data-workflow-id="' +
+          esc(w.id) + '">Edit</button>' +
+        ' <button type="button" class="lt-btn lt-btn-sm lt-btn-danger" data-action="wf:delete" data-workflow-id="' +
+          esc(w.id) + '" data-workflow-name="' + esc(w.name) + '">Delete</button>';
+    }
+    var createdAt = window.Pulse.fmt.dateTime(w.created_at);
+    return (
+      '<tr>' +
+        '<td data-label="Name">' + esc(w.name) + paramBadge(def) + '</td>' +
+        '<td data-label="Description">' + esc(w.description || 'No description') + '</td>' +
+        '<td data-label="Created">' + esc(w.created_by || 'Unknown') + ' &middot; ' + esc(createdAt) + '</td>' +
+        '<td data-label="Actions"><div class="lt-btn-group">' + actions + '</div></td>' +
+      '</tr>'
+    );
+  }
+
+  function renderList(workflows) {
+    var el = document.getElementById('wf-list');
+    if (!el) return;
+    if (!workflows.length) {
+      el.innerHTML = renderEmptyState();
+      return;
+    }
+    var rows = workflows.map(renderRow).join('');
+    el.innerHTML =
+      '<div class="lt-table-wrap">' +
+        '<table class="lt-table lt-table-responsive">' +
+          '<thead><tr><th>Name</th><th>Description</th><th>Created</th><th>Actions</th></tr></thead>' +
+          '<tbody>' + rows + '</tbody>' +
+        '</table>' +
+      '</div>';
+  }
+
+  function renderLoadError(message) {
+    var el = document.getElementById('wf-list');
+    if (!el) return;
+    el.innerHTML =
+      '<div class="lt-alert lt-alert--error" role="alert">' +
+        '<span class="lt-alert-icon">&#x26A0;</span>' +
+        '<span class="lt-alert-msg">' + window.Pulse.esc(message || 'Failed to load workflows') + '</span>' +
+      '</div>';
+  }
+
+  function loadWorkflows() {
+    return window.Pulse.api.get('/api/workflows').then(function (workflows) {
+      var list = workflows || [];
+      _registry = {};
+      _rowsById = {};
+      list.forEach(function (w) {
+        _rowsById[w.id] = w;
+        _registry[w.id] = parseDefinition(w.definition);
+      });
+      renderList(list);
+    }).catch(function (e) {
+      renderLoadError(e && e.message);
+    });
+  }
+
+  /* ---------------------------------------------------------------
+     Create modal
+     --------------------------------------------------------------- */
+  function showFieldError(id, message) {
+    var el = document.getElementById(id);
+    if (!el) return;
+    el.textContent = message || '';
+    el.hidden = !message;
+  }
+
+  function openCreateModal() {
+    document.getElementById('wf-create-form').reset();
+    document.getElementById('wf-create-definition').value = JSON.stringify(EXAMPLE_DEFINITION, null, 2);
+    showFieldError('wf-create-error', '');
+    window.lt.modal.open('wf-create-modal');
+  }
+
+  function submitCreateForm(formEl) {
+    var name = formEl.elements['name'].value.trim();
+    var description = formEl.elements['description'].value.trim();
+    var definitionText = formEl.elements['definition'].value;
+    var webhookUrl = formEl.elements['webhook_url'].value.trim() || null;
+
+    if (!name) {
+      showFieldError('wf-create-error', 'Name is required.');
+      return;
+    }
+
+    var definition;
+    try {
+      definition = JSON.parse(definitionText);
+    } catch (e) {
+      showFieldError('wf-create-error', 'Invalid JSON: ' + e.message);
+      return;
+    }
+    showFieldError('wf-create-error', '');
+
+    return window.Pulse.api.post('/api/workflows', {
+      name: name,
+      description: description,
+      definition: definition,
+      webhook_url: webhookUrl
+    }).then(function () {
+      window.lt.modal.close('wf-create-modal');
+      window.Pulse.toast.success('Workflow created');
+      return loadWorkflows();
+    }).catch(function (e) {
+      showFieldError('wf-create-error', (e && e.message) || 'Failed to create workflow');
+    });
+  }
+
+  /* ---------------------------------------------------------------
+     Edit modal (admin)
+     --------------------------------------------------------------- */
+  function openEditModal(workflowId) {
+    showFieldError('wf-edit-error', '');
+    return window.Pulse.api.get('/api/workflows/' + encodeURIComponent(workflowId)).then(function (wf) {
+      document.getElementById('wf-edit-id').value = wf.id;
+      document.getElementById('wf-edit-name').value = wf.name || '';
+      document.getElementById('wf-edit-description').value = wf.description || '';
+      document.getElementById('wf-edit-definition').value = JSON.stringify(parseDefinition(wf.definition), null, 2);
+      document.getElementById('wf-edit-webhook').value = wf.webhook_url || '';
+      window.lt.modal.open('wf-edit-modal');
+    }).catch(function (e) {
+      window.Pulse.toast.error((e && e.message) || 'Failed to load workflow');
+    });
+  }
+
+  function submitEditForm(formEl) {
+    var id = formEl.elements['id'].value;
+    var name = formEl.elements['name'].value.trim();
+    var description = formEl.elements['description'].value.trim();
+    var definitionText = formEl.elements['definition'].value;
+    var webhookUrl = formEl.elements['webhook_url'].value.trim() || null;
+
+    if (!name) {
+      showFieldError('wf-edit-error', 'Name is required.');
+      return;
+    }
+
+    var definition;
+    try {
+      definition = JSON.parse(definitionText);
+    } catch (e) {
+      showFieldError('wf-edit-error', 'Invalid JSON: ' + e.message);
+      return;
+    }
+    showFieldError('wf-edit-error', '');
+
+    return window.Pulse.api.put('/api/workflows/' + encodeURIComponent(id), {
+      name: name,
+      description: description,
+      definition: definition,
+      webhook_url: webhookUrl
+    }).then(function () {
+      window.lt.modal.close('wf-edit-modal');
+      window.Pulse.toast.success('Workflow saved');
+      return loadWorkflows();
+    }).catch(function (e) {
+      showFieldError('wf-edit-error', (e && e.message) || 'Failed to save workflow');
+    });
+  }
+
+  /* ---------------------------------------------------------------
+     Delete (admin)
+     --------------------------------------------------------------- */
+  function deleteWorkflow(workflowId, workflowName) {
+    return window.Pulse.confirm({
+      title: 'Delete Workflow',
+      message: 'Delete workflow "' + workflowName + '"? This cannot be undone.',
+      type: 'error',
+      confirmLabel: 'DELETE'
+    }).then(function (ok) {
+      if (!ok) return;
+      return window.Pulse.api.delete('/api/workflows/' + encodeURIComponent(workflowId)).then(function () {
+        window.Pulse.toast.success('Workflow deleted');
+        return loadWorkflows();
+      }).catch(function (e) {
+        window.Pulse.toast.error((e && e.message) || 'Failed to delete workflow');
+      });
+    });
+  }
+
+  /* ---------------------------------------------------------------
+     Run modal (execute): always shown, replaces the old confirm().
+     --------------------------------------------------------------- */
+  function paramFieldHtml(p) {
+    var esc = window.Pulse.esc;
+    var label = esc(p.label || p.name);
+    var required = p.required ? ' <span class="wf-required">*</span>' : '';
+    return (
+      '<div class="lt-form-group">' +
+        '<label class="lt-label" for="wf-run-param-' + esc(p.name) + '">' + label + required + '</label>' +
+        '<input type="text" id="wf-run-param-' + esc(p.name) + '" class="lt-input" ' +
+          'data-param-name="' + esc(p.name) + '" data-required="' + (p.required ? '1' : '0') + '" ' +
+          'placeholder="' + esc(p.placeholder || '') + '">' +
+      '</div>'
+    );
+  }
+
+  function openRunModal(workflowId) {
+    var row = _rowsById[workflowId];
+    var def = _registry[workflowId] || {};
+    var paramDefs = def.params || [];
+
+    _pendingWorkflowId = workflowId;
+    document.getElementById('wf-run-workflow-id').value = workflowId;
+    document.getElementById('wf-run-name').textContent = row ? row.name : 'this workflow';
+    document.getElementById('wf-run-dryrun').checked = false;
+
+    var paramsEl = document.getElementById('wf-run-params');
+    paramsEl.innerHTML = paramDefs.map(paramFieldHtml).join('');
+
+    window.lt.modal.open('wf-run-modal');
+
+    var first = paramsEl.querySelector('input');
+    if (first) setTimeout(function () { first.focus(); }, 60);
+  }
+
+  function submitRunForm() {
+    if (!_pendingWorkflowId) return;
+    var def = _registry[_pendingWorkflowId] || {};
+    var paramDefs = def.params || [];
+    var params = {};
+
+    for (var i = 0; i < paramDefs.length; i++) {
+      var p = paramDefs[i];
+      var el = document.getElementById('wf-run-param-' + p.name);
+      var val = el ? el.value.trim() : '';
+      if (p.required && !val) {
+        el.classList.add('is-invalid');
+        el.focus();
+        return;
+      }
+      el && el.classList.remove('is-invalid');
+      if (val) params[p.name] = val;
+    }
+
+    var dryRun = document.getElementById('wf-run-dryrun').checked;
+    var workflowId = _pendingWorkflowId;
+
+    return window.Pulse.api.post('/api/executions', {
+      workflow_id: workflowId,
+      params: params,
+      dry_run: dryRun
+    }).then(function (result) {
+      window.lt.modal.close('wf-run-modal');
+      _pendingWorkflowId = null;
+      window.Pulse.toast.success(dryRun ? 'Dry run started' : 'Workflow started');
+      window.location.href = '/executions?open=' + encodeURIComponent(result.id);
+    }).catch(function (e) {
+      window.Pulse.toast.error((e && e.message) || 'Failed to start execution');
+    });
+  }
+
+  /* ---------------------------------------------------------------
+     Actions + page registration
+     --------------------------------------------------------------- */
+  window.Pulse.actions.registerAll({
+    'wf:create-open': function () { openCreateModal(); },
+    'wf:create-submit': function (el) { return submitCreateForm(el); },
+    'wf:execute': function (el) { openRunModal(el.getAttribute('data-workflow-id')); },
+    'wf:edit-open': function (el) { return openEditModal(el.getAttribute('data-workflow-id')); },
+    'wf:edit-submit': function (el) { return submitEditForm(el); },
+    'wf:delete': function (el) {
+      return deleteWorkflow(el.getAttribute('data-workflow-id'), el.getAttribute('data-workflow-name'));
+    },
+    'wf:param-submit': function () { return submitRunForm(); }
+  });
+
+  // Enter in a param input submits the Run form (matches old behaviour).
+  document.addEventListener('keydown', function (ev) {
+    if (ev.key !== 'Enter') return;
+    var target = ev.target;
+    if (!target || target.tagName !== 'INPUT') return;
+    if (!target.closest || !target.closest('#wf-run-form')) return;
+    ev.preventDefault();
+    submitRunForm();
+  });
+
+  window.Pulse.registerPage({
+    name: 'workflows',
+    init: function () { return loadWorkflows(); },
+    refresh: function () { return loadWorkflows(); },
+    onEvent: function (type) {
+      if (type === 'workflow_created' || type === 'workflow_updated' || type === 'workflow_deleted') {
+        loadWorkflows();
+        return true;
+      }
+      return false;
+    }
+  });
+})();
diff --git a/public/base.js b/public/base.js
deleted file mode 120000
index 1d09a6a..0000000
--- a/public/base.js
+++ /dev/null
@@ -1 +0,0 @@
-/root/code/web_template/base.js
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 4c2ad2a..0000000
--- a/public/index.html
+++ /dev/null
@@ -1,3162 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PULSE - Workflow Orchestration</title>
-    <style>
-        :root {
-            /* Terminal Dark Backgrounds */
-            --bg-primary: #0a0a0a;
-            --bg-secondary: #1a1a1a;
-            --bg-tertiary: #2a2a2a;
-
-            /* Terminal Colors */
-            --terminal-green: #00ff41;
-            --terminal-amber: #ffb000;
-            --terminal-cyan: #00ffff;
-            --terminal-red: #ff4444;
-            --bg-terminal: #001a00;
-            --bg-terminal-border: #003300;
-            --text-primary: #00ff41;
-            --text-secondary: #00cc33;
-            --text-muted: #00bb33;
-
-            /* Border & UI */
-            --border-color: #00ff41;
-            --shadow: none;
-            --hover-bg: rgba(0, 255, 65, 0.1);
-
-            /* Status Colors (adapted) */
-            --status-online: #28a745;
-            --status-offline: #dc3545;
-            --status-running: #ffc107;
-            --status-completed: #28a745;
-            --status-failed: #dc3545;
-            --status-waiting: #ffc107;
-
-            /* Terminal Font Stack */
-            --font-mono: 'Courier New', 'Consolas', 'Monaco', 'Menlo', monospace;
-
-            /* Glow Effects */
-            --glow-green: 0 0 5px #00ff41, 0 0 10px #00ff41, 0 0 15px #00ff41;
-            --glow-green-intense: 0 0 8px #00ff41, 0 0 16px #00ff41, 0 0 24px #00ff41, 0 0 32px rgba(0, 255, 65, 0.5);
-            --glow-amber: 0 0 5px #ffb000, 0 0 10px #ffb000, 0 0 15px #ffb000;
-            --glow-amber-intense: 0 0 8px #ffb000, 0 0 16px #ffb000, 0 0 24px #ffb000;
-            --glow-red: 0 0 5px #ff4444, 0 0 10px #ff4444;
-        }
-
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-
-        body {
-            font-family: var(--font-mono);
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            min-height: 100vh;
-            padding: 20px;
-            position: relative;
-            animation: flicker 0.2s ease-in-out 30s infinite;
-        }
-
-        /* CRT Scanline Effect */
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: repeating-linear-gradient(
-                0deg,
-                rgba(0, 0, 0, 0.15),
-                rgba(0, 0, 0, 0.15) 1px,
-                transparent 1px,
-                transparent 2px
-            );
-            pointer-events: none;
-            z-index: 9999;
-            animation: scanline 8s linear infinite;
-            will-change: transform;
-        }
-
-        @keyframes scanline {
-            0% { transform: translateY(0); }
-            100% { transform: translateY(4px); }
-        }
-
-        /* Data Stream Corner Effect */
-        body::after {
-            content: '10101010';
-            position: fixed;
-            bottom: 10px;
-            right: 10px;
-            font-family: var(--font-mono);
-            font-size: 0.6rem;
-            color: var(--terminal-green);
-            opacity: 0.1;
-            pointer-events: none;
-            letter-spacing: 2px;
-            animation: data-stream 3s linear infinite;
-        }
-
-        @keyframes data-stream {
-            0% { content: '10101010'; opacity: 0.1; }
-            25% { content: '01010101'; opacity: 0.15; }
-            50% { content: '11001100'; opacity: 0.1; }
-            75% { content: '00110011'; opacity: 0.15; }
-            100% { content: '10101010'; opacity: 0.1; }
-        }
-
-        @keyframes flicker {
-            0% { opacity: 1; }
-            10% { opacity: 0.95; }
-            20% { opacity: 1; }
-            30% { opacity: 0.97; }
-            40% { opacity: 1; }
-        }
-        .container { max-width: 1600px; margin: 0 auto; }
-        .header {
-            background: var(--bg-secondary);
-            padding: 20px 30px;
-            border: 2px solid var(--terminal-green);
-            border-radius: 0;
-            box-shadow: none;
-            margin-bottom: 30px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            position: relative;
-        }
-        .header::before {
-            content: '╔';
-            position: absolute;
-            top: -2px;
-            left: -2px;
-            font-size: 1.5rem;
-            color: var(--terminal-green);
-            text-shadow: var(--glow-green);
-            line-height: 1;
-            z-index: 10;
-        }
-        .header::after {
-            content: '╗';
-            position: absolute;
-            top: -2px;
-            right: -2px;
-            font-size: 1.5rem;
-            color: var(--terminal-green);
-            text-shadow: var(--glow-green);
-            line-height: 1;
-            z-index: 10;
-        }
-        .header-left h1 {
-            color: var(--terminal-amber);
-            font-size: 2em;
-            margin-bottom: 5px;
-            text-shadow: var(--glow-amber-intense);
-            font-family: var(--font-mono);
-        }
-        .header-left h1::before {
-            content: '>> ';
-            color: var(--terminal-green);
-        }
-        .header-left p {
-            color: var(--terminal-green);
-            font-size: 1em;
-            font-family: var(--font-mono);
-        }
-        .user-info { text-align: right; }
-        .user-info .name {
-            font-weight: 600;
-            color: var(--terminal-green);
-            font-size: 1.1em;
-            font-family: var(--font-mono);
-        }
-        .user-info .email {
-            color: var(--text-secondary);
-            font-size: 0.9em;
-            font-family: var(--font-mono);
-        }
-        .user-info .badge {
-            display: inline-block;
-            background: transparent;
-            color: var(--terminal-amber);
-            padding: 4px 12px;
-            border: 2px solid var(--terminal-amber);
-            border-radius: 0;
-            font-size: 0.8em;
-            margin-top: 5px;
-            margin-left: 5px;
-            font-family: var(--font-mono);
-        }
-        .user-info .badge::before {
-            content: '[';
-            margin-right: 3px;
-        }
-        .user-info .badge::after {
-            content: ']';
-            margin-left: 3px;
-        }
-        .tabs {
-            background: var(--bg-secondary);
-            border: 2px solid var(--terminal-green);
-            border-radius: 0;
-            padding: 10px;
-            margin-bottom: 20px;
-            display: flex;
-            gap: 10px;
-        }
-        .tab {
-            padding: 12px 24px;
-            background: transparent;
-            border: 2px solid var(--terminal-green);
-            border-radius: 0;
-            cursor: pointer;
-            font-size: 1em;
-            font-weight: 600;
-            color: var(--terminal-green);
-            font-family: var(--font-mono);
-            transition: all 0.3s;
-        }
-        .tab.active {
-            background: rgba(0, 255, 65, 0.2);
-            color: var(--terminal-amber);
-            border-color: var(--terminal-amber);
-            text-shadow: var(--glow-amber);
-        }
-        .tab:hover {
-            background: rgba(0, 255, 65, 0.1);
-            color: var(--terminal-amber);
-        }
-        .tab.active:hover {
-            background: rgba(0, 255, 65, 0.25);
-        }
-        .grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-        .card {
-            background: var(--bg-secondary);
-            padding: 25px;
-            border: 2px solid var(--terminal-green);
-            border-radius: 0;
-            box-shadow: none;
-            position: relative;
-        }
-        .card::before {
-            content: '┌';
-            position: absolute;
-            top: -2px;
-            left: -2px;
-            font-size: 1.2rem;
-            color: var(--terminal-green);
-            line-height: 1;
-        }
-        .card::after {
-            content: '┐';
-            position: absolute;
-            top: -2px;
-            right: -2px;
-            font-size: 1.2rem;
-            color: var(--terminal-green);
-            line-height: 1;
-        }
-        .card h3 {
-            color: var(--terminal-amber);
-            margin-bottom: 15px;
-            font-size: 1.2em;
-            font-family: var(--font-mono);
-            text-shadow: var(--glow-amber);
-        }
-        .card h3::before {
-            content: '╠═══ ';
-            color: var(--terminal-green);
-        }
-        .card h3::after {
-            content: ' ═══╣';
-            color: var(--terminal-green);
-        }
-        .status {
-            display: inline-block;
-            padding: 5px 15px;
-            border-radius: 0;
-            font-size: 0.9em;
-            font-weight: 600;
-            margin-bottom: 5px;
-            background: transparent;
-            border: 2px solid;
-            font-family: var(--font-mono);
-        }
-        .status.online {
-            border-color: var(--status-online);
-            color: var(--status-online);
-            text-shadow: 0 0 5px var(--status-online), 0 0 10px var(--status-online);
-        }
-        .status.online::before { content: '[●'; margin-right: 4px; }
-        .status.online::after { content: ']'; margin-left: 4px; }
-        .status.offline {
-            border-color: var(--status-offline);
-            color: var(--status-offline);
-            text-shadow: 0 0 5px var(--status-offline), 0 0 10px var(--status-offline);
-        }
-        .status.offline::before { content: '[○'; margin-right: 4px; }
-        .status.offline::after { content: ']'; margin-left: 4px; }
-        .status.running {
-            border-color: var(--status-running);
-            color: var(--status-running);
-            text-shadow: 0 0 5px var(--status-running), 0 0 10px var(--status-running);
-        }
-        .status.running::before {
-            content: '[◐';
-            margin-right: 4px;
-            animation: spin-status 2s linear infinite;
-        }
-        @keyframes spin-status {
-            0% { content: '[◐'; }
-            25% { content: '[◓'; }
-            50% { content: '[◑'; }
-            75% { content: '[◒'; }
-            100% { content: '[◐'; }
-        }
-        .status.running::after { content: ']'; margin-left: 4px; }
-        .status.completed {
-            border-color: var(--status-completed);
-            color: var(--status-completed);
-            text-shadow: 0 0 5px var(--status-completed), 0 0 10px var(--status-completed);
-        }
-        .status.completed::before { content: '[✓'; margin-right: 4px; }
-        .status.completed::after { content: ']'; margin-left: 4px; }
-        .status.failed {
-            border-color: var(--status-failed);
-            color: var(--status-failed);
-            text-shadow: 0 0 5px var(--status-failed), 0 0 10px var(--status-failed);
-        }
-        .status.failed::before { content: '[✗'; margin-right: 4px; }
-        .status.failed::after { content: ']'; margin-left: 4px; }
-        .status.waiting {
-            border-color: var(--status-waiting);
-            color: var(--status-waiting);
-            text-shadow: 0 0 5px var(--status-waiting), 0 0 10px var(--status-waiting);
-        }
-        .status.waiting::before { content: '[⏳'; margin-right: 4px; }
-        .status.waiting::after { content: ']'; margin-left: 4px; }
-        button {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 0;
-            background: transparent;
-            color: var(--terminal-green);
-            border: 2px solid var(--terminal-green);
-            border-radius: 0;
-            padding: 12px 24px;
-            cursor: pointer;
-            font-size: 1em;
-            font-weight: 600;
-            font-family: var(--font-mono);
-            text-transform: uppercase;
-            transition: all 0.3s ease;
-            margin-right: 10px;
-            margin-bottom: 10px;
-            white-space: nowrap;
-        }
-        button::before { content: '[ '; flex-shrink: 0; }
-        button::after { content: ' ]'; flex-shrink: 0; }
-        /* Suppress bracket pseudo-elements for tab/nav buttons and inline-styled sub-tabs */
-        button.tab::before, button.tab::after,
-        button[style*="border:none"]::before, button[style*="border:none"]::after,
-        button[style*="border: none"]::before, button[style*="border: none"]::after,
-        button[style*="flex:0"]::before, button[style*="flex:0"]::after,
-        button[style*="flex: 0"]::before, button[style*="flex: 0"]::after,
-        button[style*="flex:1"]::before, button[style*="flex:1"]::after,
-        button[style*="flex: 1"]::before, button[style*="flex: 1"]::after { content: none; }
-        button:hover {
-            background: rgba(0, 255, 65, 0.15);
-            color: var(--terminal-amber);
-            border-color: var(--terminal-amber);
-            text-shadow: var(--glow-amber);
-            box-shadow: var(--glow-amber);
-            transform: translateY(-2px);
-        }
-        button.danger {
-            color: var(--status-failed);
-            border-color: var(--status-failed);
-        }
-        button.danger:hover {
-            background: rgba(220, 53, 69, 0.15);
-            text-shadow: 0 0 5px var(--status-failed), 0 0 10px var(--status-failed);
-        }
-        button.small {
-            padding: 6px 12px;
-            font-size: 0.85em;
-        }
-        .worker-item, .execution-item, .workflow-item {
-            padding: 15px;
-            border: 2px solid var(--terminal-green);
-            border-radius: 0;
-            margin-bottom: 10px;
-            background: var(--bg-secondary);
-            font-family: var(--font-mono);
-            transition: all 0.3s;
-        }
-        .worker-item:hover, .execution-item:hover, .workflow-item:hover {
-            background: rgba(0, 255, 65, 0.08);
-            box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.1);
-        }
-        .workflow-name {
-            font-weight: 600;
-            color: var(--terminal-amber);
-            font-size: 1.1em;
-            margin-bottom: 5px;
-            font-family: var(--font-mono);
-            text-shadow: var(--glow-amber);
-        }
-        .workflow-name::before {
-            content: '> ';
-            color: var(--terminal-green);
-        }
-        .workflow-desc {
-            color: var(--terminal-green);
-            font-size: 0.9em;
-            margin-bottom: 10px;
-            font-family: var(--font-mono);
-        }
-        .loading {
-            text-align: center;
-            padding: 20px;
-            color: var(--terminal-green);
-            font-family: var(--font-mono);
-        }
-        .loading::after {
-            content: '...';
-            animation: loading-dots 1.5s steps(4, end) infinite;
-        }
-        @keyframes loading-dots {
-            0%, 20% { content: '.'; }
-            40% { content: '..'; }
-            60%, 100% { content: '...'; }
-        }
-        .empty {
-            text-align: center;
-            padding: 30px;
-            color: var(--text-muted);
-            font-family: var(--font-mono);
-        }
-        .empty::before {
-            content: '[ NO DATA ]';
-            display: block;
-            font-size: 1.2rem;
-            color: var(--terminal-green);
-            margin-bottom: 10px;
-        }
-        .timestamp {
-            font-size: 0.85em;
-            color: var(--text-muted);
-            font-family: var(--font-mono);
-        }
-        .modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.85);
-            z-index: 1000;
-            align-items: center;
-            justify-content: center;
-        }
-        .modal.show { display: flex; }
-        .modal-content {
-            background: var(--bg-primary);
-            padding: 0;
-            border: 3px double var(--terminal-green);
-            border-radius: 0;
-            max-width: min(1100px, 96vw);
-            width: 96vw;
-            max-height: 90vh;
-            overflow-y: auto;
-            box-shadow: 0 0 30px rgba(0, 255, 65, 0.3);
-            position: relative;
-        }
-        .modal-content::before {
-            content: '╔';
-            position: absolute;
-            top: -3px;
-            left: -3px;
-            font-size: 1.5rem;
-            color: var(--terminal-green);
-            line-height: 1;
-            z-index: 10;
-        }
-        .modal-content::after {
-            content: '╗';
-            position: absolute;
-            top: -3px;
-            right: -3px;
-            font-size: 1.5rem;
-            color: var(--terminal-green);
-            line-height: 1;
-            z-index: 10;
-        }
-        .modal-content h2 {
-            margin: 0;
-            padding: 20px 30px;
-            background: var(--bg-secondary);
-            color: var(--terminal-amber);
-            border-bottom: 2px solid var(--terminal-green);
-            font-family: var(--font-mono);
-            text-shadow: var(--glow-amber);
-        }
-        .modal-content h2::before {
-            content: '═══ ';
-            color: var(--terminal-green);
-        }
-        .modal-content h2::after {
-            content: ' ═══';
-            color: var(--terminal-green);
-        }
-        input, textarea, select {
-            width: 100%;
-            padding: 12px;
-            margin-bottom: 15px;
-            border: 2px solid var(--terminal-green);
-            border-radius: 0;
-            font-size: 1em;
-            font-family: var(--font-mono);
-            background: var(--bg-primary);
-            color: var(--terminal-green);
-            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
-        }
-        input:focus, textarea:focus, select:focus {
-            outline: none;
-            border-color: var(--terminal-amber);
-            box-shadow: var(--glow-amber), inset 0 0 10px rgba(0, 0, 0, 0.5);
-            background: rgba(0, 255, 65, 0.05);
-        }
-        textarea { min-height: 100px; }
-        .tab-content { display: none; }
-        .tab-content.active { display: block; }
-        .log-entry {
-            padding: 10px;
-            background: var(--bg-secondary);
-            border-left: 3px solid var(--terminal-green);
-            margin-bottom: 10px;
-            font-family: var(--font-mono);
-            font-size: 0.9em;
-            color: var(--terminal-green);
-        }
-        .log-entry::before {
-            content: '> ';
-            color: var(--terminal-amber);
-            font-weight: bold;
-        }
-        .prompt-box {
-            background: rgba(255, 176, 0, 0.1);
-            border: 2px solid var(--terminal-amber);
-            padding: 20px;
-            border-radius: 0;
-            margin: 20px 0;
-        }
-        .prompt-box h3 {
-            color: var(--terminal-amber);
-            margin-bottom: 15px;
-            font-family: var(--font-mono);
-            text-shadow: var(--glow-amber);
-        }
-        .prompt-box h3::before {
-            content: '⏳ ';
-        }
-        .prompt-box p {
-            color: var(--terminal-green);
-            font-family: var(--font-mono);
-            margin-bottom: 14px;
-        }
-        .prompt-output {
-            background: rgba(0, 0, 0, 0.4);
-            border: 1px solid rgba(0, 255, 65, 0.25);
-            color: var(--terminal-green);
-            font-family: var(--font-mono);
-            font-size: 0.78em;
-            padding: 10px;
-            max-height: 280px;
-            overflow-y: auto;
-            white-space: pre-wrap;
-            word-break: break-all;
-            margin-bottom: 14px;
-        }
-        .prompt-opt-btn {
-            padding: 7px 16px;
-            margin: 4px 4px 4px 0;
-            background: rgba(0, 255, 255, 0.08);
-            border: 1px solid var(--terminal-cyan);
-            color: var(--terminal-cyan);
-            font-family: var(--font-mono);
-            font-size: 0.88em;
-            cursor: pointer;
-            transition: background 0.2s;
-        }
-        .prompt-opt-btn:hover {
-            background: rgba(0, 255, 255, 0.2);
-            box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
-        }
-        .prompt-opt-btn.answered {
-            opacity: 0.45;
-            cursor: default;
-            background: transparent;
-        }
-        /* Boot Overlay */
-        .boot-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: var(--bg-primary);
-            z-index: 99999;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: opacity 0.5s;
-        }
-        #boot-text {
-            font-family: var(--font-mono);
-            color: var(--terminal-green);
-            text-shadow: var(--glow-green);
-            font-size: 0.95rem;
-            line-height: 1.6;
-            white-space: pre;
-            padding: 2rem;
-        }
-
-        /* Formatted Log Entry Styles */
-        .log-entry {
-            background: #000;
-            border: 1px solid var(--terminal-green);
-            border-left: 3px solid var(--terminal-green);
-            padding: 12px;
-            margin-bottom: 12px;
-            font-family: var(--font-mono);
-            font-size: 0.9em;
-        }
-
-        .log-entry.success {
-            border-left-color: var(--terminal-green);
-        }
-
-        .log-entry.failed {
-            border-left-color: var(--terminal-red);
-        }
-
-        .log-timestamp {
-            color: var(--terminal-amber);
-            font-size: 0.85em;
-            margin-bottom: 6px;
-        }
-
-        .log-title {
-            color: var(--terminal-green);
-            font-weight: bold;
-            text-shadow: var(--glow-green);
-            margin-bottom: 8px;
-            font-size: 1.1em;
-        }
-
-        .log-entry.failed .log-title {
-            color: var(--terminal-red);
-            text-shadow: var(--glow-red);
-        }
-
-        .log-details {
-            margin-left: 20px;
-        }
-
-        .log-field {
-            margin: 6px 0;
-            color: var(--terminal-green);
-        }
-
-        .log-label {
-            color: var(--terminal-amber);
-            font-weight: bold;
-            margin-right: 8px;
-        }
-
-        .log-output {
-            background: var(--bg-primary);
-            border: 1px solid var(--bg-terminal-border);
-            padding: 10px;
-            margin: 6px 0;
-            color: var(--terminal-green);
-            font-family: var(--font-mono);
-            font-size: 0.9em;
-            overflow-x: auto;
-            max-height: 300px;
-            overflow-y: auto;
-        }
-
-        .log-error {
-            color: var(--terminal-red);
-            border-color: #330000;
-        }
-
-        /* parse_complete and route_taken log entries */
-        .log-parse-table {
-            display: grid;
-            grid-template-columns: max-content 1fr;
-            gap: 2px 12px;
-            font-size: 0.82em;
-            margin-top: 6px;
-        }
-        .log-parse-key { color: var(--terminal-amber); opacity: .8; }
-        .log-parse-val { color: var(--terminal-green); word-break: break-all; }
-        .log-route-label {
-            color: var(--terminal-cyan);
-            font-size: 0.9em;
-            margin-top: 4px;
-        }
-        .log-route-goto {
-            color: var(--terminal-amber);
-            font-size: 0.82em;
-            opacity: .75;
-            margin-top: 2px;
-        }
-
-        .log-entry code {
-            background: var(--bg-terminal);
-            padding: 2px 6px;
-            border: 1px solid var(--bg-terminal-border);
-            color: var(--terminal-green);
-            font-family: var(--font-mono);
-        }
-
-        /* Worker Metadata Styles */
-        .worker-stats {
-            display: flex;
-            gap: 15px;
-            margin-top: 8px;
-            font-size: 0.85em;
-            color: var(--terminal-green);
-            font-family: var(--font-mono);
-        }
-
-        .worker-stats span {
-            padding: 2px 6px;
-            background: var(--bg-terminal);
-            border: 1px solid var(--bg-terminal-border);
-        }
-
-        .worker-metadata {
-            margin-top: 12px;
-            padding: 10px;
-            background: var(--bg-terminal);
-            border: 1px solid var(--bg-terminal-border);
-            font-family: var(--font-mono);
-            font-size: 0.85em;
-        }
-
-        .meta-row {
-            display: flex;
-            padding: 4px 0;
-            color: var(--terminal-green);
-        }
-
-        .meta-label {
-            color: var(--terminal-amber);
-            min-width: 120px;
-            font-weight: bold;
-        }
-
-        /* Terminal Cursor Blink */
-        @keyframes cursor-blink {
-            0%, 49% { opacity: 1; }
-            50%, 100% { opacity: 0; }
-        }
-
-        .terminal-cursor::after {
-            content: '▋';
-            animation: cursor-blink 1s step-end infinite;
-            color: var(--terminal-green);
-        }
-
-        /* Hover effects for execution items */
-        .execution-item {
-            transition: all 0.2s ease;
-            cursor: pointer;
-        }
-
-        .execution-item:hover {
-            background: var(--bg-terminal);
-            border-left-width: 5px;
-            transform: translateX(3px);
-        }
-
-        .worker-item:hover {
-            background: var(--bg-terminal);
-            border-left-width: 5px;
-        }
-
-        .workflow-item:hover {
-            background: var(--bg-terminal);
-            border-left-width: 5px;
-        }
-
-        /* Loading pulse effect */
-        .loading {
-            animation: loading-pulse 1.5s ease-in-out infinite;
-        }
-
-        @keyframes loading-pulse {
-            0%, 100% { opacity: 0.6; }
-            50% { opacity: 1; }
-        }
-
-        /* Running execution pulse */
-        .execution-item.status-running {
-            animation: exec-running-pulse 2s ease-in-out infinite;
-        }
-        @keyframes exec-running-pulse {
-            0%, 100% { border-color: var(--terminal-green); }
-            50% { border-color: var(--status-running); box-shadow: 0 0 8px rgba(255,193,7,0.35); }
-        }
-
-        /* Success/Error message animations */
-        @keyframes slide-in {
-            from {
-                opacity: 0;
-                transform: translateY(-10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .log-entry {
-            animation: slide-in 0.3s ease-out;
-        }
-    </style>
-    <script src="/base.js"></script>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <div class="header-left">
-                <h1>⚡ PULSE</h1>
-                <p>Pipelined Unified Logic & Server Engine</p>
-            </div>
-            <div style="text-align:right;">
-                <div class="user-info" id="userInfo">
-                    <div class="loading">Loading user...</div>
-                </div>
-                <div id="lastRefreshed" style="font-size:0.72em;color:var(--text-muted);font-family:var(--font-mono);margin-top:4px;"></div>
-            </div>
-        </div>
-
-        <div class="tabs">
-            <button class="tab active" onclick="switchTab('dashboard')">📊 Dashboard</button>
-            <button class="tab" onclick="switchTab('workers')">👥 Workers</button>
-            <button class="tab" onclick="switchTab('workflows')">📋 Workflows</button>
-            <button class="tab" onclick="switchTab('executions')">🚀 Executions</button>
-            <button class="tab" onclick="switchTab('quickcommand')">⚡ Quick Command</button>
-            <button class="tab" onclick="switchTab('scheduler')">⏰ Scheduler</button>
-        </div>
-
-        <!-- Dashboard Tab -->
-        <div id="dashboard" class="tab-content active">
-            <div class="grid">
-                <div class="card">
-                    <h3>👥 Active Workers</h3>
-                    <div id="dashWorkers"><div class="loading">Loading...</div></div>
-                </div>
-                <div class="card">
-                    <h3>🚀 Recent Executions</h3>
-                    <div id="dashExecutions"><div class="loading">Loading...</div></div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Workers Tab -->
-        <div id="workers" class="tab-content">
-            <div class="card">
-                <h3>Worker Management</h3>
-                <button onclick="refreshData()">🔄 Refresh</button>
-                <div id="workerList"><div class="loading">Loading...</div></div>
-            </div>
-        </div>
-
-        <!-- Workflows Tab -->
-        <div id="workflows" class="tab-content">
-            <div class="card">
-                <h3>Workflow Management</h3>
-                <button onclick="showCreateWorkflow()">➕ Create Workflow</button>
-                <button onclick="refreshData()">🔄 Refresh</button>
-                <div id="workflowList"><div class="loading">Loading...</div></div>
-            </div>
-        </div>
-
-        <!-- Executions Tab -->
-        <div id="executions" class="tab-content">
-            <div class="card">
-                <h3>Execution History</h3>
-
-                <!-- Manual / Automated sub-tabs -->
-                <div style="display: flex; gap: 0; margin-bottom: 20px; border: 2px solid var(--terminal-green);">
-                    <button id="subTabManual"
-                            onclick="setExecutionView('manual')"
-                            style="flex:1; padding:10px 16px; background:rgba(0,255,65,0.2); border:none; border-right:2px solid var(--terminal-green); color:var(--terminal-amber); font-family:var(--font-mono); font-size:0.9em; cursor:pointer; text-shadow: 0 0 5px #ffb000;">
-                        👤 Manual Runs <span id="countManual"></span>
-                    </button>
-                    <button id="subTabAutomated"
-                            onclick="setExecutionView('automated')"
-                            style="flex:1; padding:10px 16px; background:transparent; border:none; color:var(--terminal-green); font-family:var(--font-mono); font-size:0.9em; cursor:pointer;">
-                        🤖 Automated <span id="countAutomated"></span>
-                    </button>
-                </div>
-
-                <!-- Search and Filter Section -->
-                <div style="background: rgba(0, 255, 65, 0.05); border: 2px solid var(--terminal-green); padding: 15px; margin-bottom: 20px;">
-                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
-                        <!-- Search Box -->
-                        <div>
-                            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--terminal-amber);">🔍 Search:</label>
-                            <input type="text" id="executionSearch" placeholder="Search by command, execution ID, or workflow name..."
-                                   oninput="filterExecutions()"
-                                   style="width: 100%; padding: 10px; margin: 0;">
-                        </div>
-
-                        <!-- Status Filter -->
-                        <div>
-                            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--terminal-amber);">📊 Status Filter:</label>
-                            <select id="statusFilter" onchange="filterExecutions()" style="width: 100%; padding: 10px; margin: 0;">
-                                <option value="">All Statuses</option>
-                                <option value="running">Running</option>
-                                <option value="completed">Completed</option>
-                                <option value="failed">Failed</option>
-                                <option value="waiting">Waiting</option>
-                            </select>
-                        </div>
-                    </div>
-
-                    <div style="display: flex; gap: 10px; align-items: center;">
-                        <button onclick="clearFilters()" class="small">Clear Filters</button>
-                        <span id="filterStats" style="color: var(--terminal-green); font-size: 0.9em; font-family: var(--font-mono);"></span>
-                    </div>
-                </div>
-
-                <button onclick="refreshData()">🔄 Refresh</button>
-                <button onclick="clearCompletedExecutions()" style="margin-left: 10px;">🗑️ Clear Completed</button>
-                <button onclick="toggleCompareMode()" id="compareModeBtn" style="margin-left: 10px;">📊 Compare Mode</button>
-                <button onclick="compareSelectedExecutions()" id="compareBtn" style="margin-left: 10px; display: none;">⚖️ Compare Selected</button>
-
-                <div id="compareInstructions" style="display: none; background: rgba(255, 176, 0, 0.1); border: 2px solid var(--terminal-amber); padding: 12px; margin: 15px 0; color: var(--terminal-amber);">
-                    Select 2-5 executions to compare their outputs. Click executions to toggle selection.
-                </div>
-
-                <div id="executionList"><div class="loading">Loading...</div></div>
-            </div>
-        </div>
-
-        <!-- Quick Command Tab -->
-        <div id="quickcommand" class="tab-content">
-            <div class="card">
-                <h3>⚡ Quick Command Execution</h3>
-                <p style="color: var(--terminal-green); margin-bottom: 20px;">Execute a command on selected workers instantly</p>
-
-                <div style="display: flex; gap: 10px; margin-bottom: 15px;">
-                    <button onclick="showCommandTemplates()" style="flex: 0;">📋 Templates</button>
-                    <button onclick="showCommandHistory()" style="flex: 0;">🕐 History</button>
-                </div>
-
-                <label style="display: block; margin-bottom: 10px; font-weight: 600;">Execution Mode:</label>
-                <div style="margin-bottom: 20px;">
-                    <label style="display: inline-flex; align-items: center; margin-right: 20px; cursor: pointer;">
-                        <input type="radio" name="execMode" value="single" checked onchange="toggleWorkerSelection()" style="width: auto; margin-right: 8px;">
-                        <span>Single Worker</span>
-                    </label>
-                    <label style="display: inline-flex; align-items: center; cursor: pointer;">
-                        <input type="radio" name="execMode" value="multi" onchange="toggleWorkerSelection()" style="width: auto; margin-right: 8px;">
-                        <span>Multiple Workers</span>
-                    </label>
-                </div>
-
-                <div id="singleWorkerMode">
-                    <label style="display: block; margin-bottom: 10px; font-weight: 600;">Select Worker:</label>
-                    <select id="quickWorkerSelect">
-                        <option value="">Loading workers...</option>
-                    </select>
-                </div>
-
-                <div id="multiWorkerMode" style="display: none;">
-                    <label style="display: block; margin-bottom: 10px; font-weight: 600;">Select Workers:</label>
-                    <div id="workerCheckboxList" style="background: var(--bg-primary); border: 2px solid var(--terminal-green); padding: 15px; margin-bottom: 15px; max-height: 200px; overflow-y: auto;">
-                        <div class="loading">Loading workers...</div>
-                    </div>
-                    <div style="margin-bottom: 15px;">
-                        <button onclick="selectAllWorkers()" class="small">Select All</button>
-                        <button onclick="selectOnlineWorkers()" class="small">Online Only</button>
-                        <button onclick="deselectAllWorkers()" class="small">Clear All</button>
-                    </div>
-                </div>
-
-                <label style="display: block; margin-bottom: 10px; margin-top: 20px; font-weight: 600;">Command:</label>
-                <textarea id="quickCommand" placeholder="Enter command to execute (e.g., 'uptime' or 'df -h')"></textarea>
-
-                <button onclick="executeQuickCommand()">▶️ Execute Command</button>
-
-                <div id="quickCommandResult" style="margin-top: 20px;"></div>
-            </div>
-        </div>
-
-        <!-- Scheduler Tab -->
-        <div id="scheduler" class="tab-content">
-            <div class="card">
-                <h3>⏰ Scheduled Commands</h3>
-                <p style="color: var(--terminal-green); margin-bottom: 20px;">Automate command execution with flexible scheduling</p>
-
-                <button onclick="showCreateSchedule()">➕ Create Schedule</button>
-                <button onclick="refreshData()" style="margin-left: 10px;">🔄 Refresh</button>
-
-                <div id="scheduleList" style="margin-top: 20px;"><div class="loading">Loading...</div></div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Create Workflow Modal -->
-    <div id="createWorkflowModal" class="modal">
-        <div class="modal-content">
-            <h2>Create New Workflow</h2>
-            <input type="text" id="workflowName" placeholder="Workflow Name">
-            <textarea id="workflowDescription" placeholder="Description"></textarea>
-            <label>Workflow Definition (JSON):</label>
-            <textarea id="workflowDefinition" style="min-height: 200px;">{
-  "steps": [
-    {
-      "name": "Example Step",
-      "type": "execute",
-      "targets": ["all"],
-      "command": "echo 'Hello from PULSE'"
-    }
-  ]
-}</textarea>
-            <label style="display:block;margin:12px 0 6px;font-weight:600;">Webhook URL (optional):</label>
-            <input type="url" id="workflowWebhookUrl" placeholder="https://example.com/webhook">
-            <button onclick="createWorkflow()">Create</button>
-            <button onclick="closeModal('createWorkflowModal')">Cancel</button>
-        </div>
-    </div>
-
-    <!-- View Execution Modal -->
-    <div id="viewExecutionModal" class="modal">
-        <div class="modal-content">
-            <h2>Execution Details</h2>
-            <div id="executionDetails"></div>
-            <button onclick="closeModal('viewExecutionModal')">Close</button>
-        </div>
-    </div>
-
-    <!-- Command Templates Modal -->
-    <div id="commandTemplatesModal" class="modal">
-        <div class="modal-content">
-            <h2>Command Templates</h2>
-            <div id="templateList" style="max-height: 400px; overflow-y: auto;"></div>
-            <button onclick="closeModal('commandTemplatesModal')">Close</button>
-        </div>
-    </div>
-
-    <!-- Command History Modal -->
-    <div id="commandHistoryModal" class="modal">
-        <div class="modal-content">
-            <h2>Command History</h2>
-            <div id="historyList" style="max-height: 400px; overflow-y: auto;"></div>
-            <button onclick="closeModal('commandHistoryModal')">Close</button>
-        </div>
-    </div>
-
-    <!-- Compare Executions Modal -->
-    <div id="compareExecutionsModal" class="modal">
-        <div class="modal-content" style="max-width: 90%; max-height: 90vh;">
-            <h2>⚖️ Execution Comparison</h2>
-            <div id="compareContent" style="max-height: 70vh; overflow-y: auto; padding: 20px;"></div>
-            <button onclick="closeModal('compareExecutionsModal')">Close</button>
-        </div>
-    </div>
-
-    <!-- Workflow Param Input Modal -->
-    <div id="paramModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center;">
-        <div style="background:#0a0a0a;border:2px solid var(--terminal-green);padding:28px 32px;min-width:380px;max-width:520px;width:90%;font-family:var(--font-mono);box-shadow:0 0 30px rgba(0,255,65,.2);">
-            <h2 style="color:var(--terminal-green);margin:0 0 6px;font-size:1.1em;letter-spacing:.05em;">▶ RUN WORKFLOW</h2>
-            <p style="color:var(--terminal-amber);font-size:.75em;margin:0 0 20px;letter-spacing:.04em;">Fill in required parameters</p>
-            <div id="paramModalForm"></div>
-            <div style="margin-top:16px;display:flex;align-items:center;gap:10px;">
-                <input type="checkbox" id="paramDryRun" style="accent-color:var(--terminal-amber);">
-                <label for="paramDryRun" style="color:var(--terminal-amber);font-size:.85em;cursor:pointer;">Dry Run (simulate, no commands executed)</label>
-            </div>
-            <div style="display:flex;gap:10px;margin-top:20px;">
-                <button onclick="submitParamForm()"
-                    style="flex:1;padding:8px;background:rgba(0,255,65,.1);border:1px solid var(--terminal-green);color:var(--terminal-green);font-family:var(--font-mono);cursor:pointer;font-size:.9em;">
-                    ▶ Run
-                </button>
-                <button onclick="closeParamModal()"
-                    style="padding:8px 16px;background:transparent;border:1px solid #555;color:#888;font-family:var(--font-mono);cursor:pointer;font-size:.9em;">
-                    Cancel
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Edit Workflow Modal -->
-    <div id="editWorkflowModal" class="modal">
-        <div class="modal-content" style="max-width: 700px; width: 95%;">
-            <h2>✏️ Edit Workflow</h2>
-            <input type="hidden" id="editWorkflowId">
-            <label style="display:block;margin-bottom:6px;font-weight:600;">Name:</label>
-            <input type="text" id="editWorkflowName" placeholder="Workflow Name">
-            <label style="display:block;margin:12px 0 6px;font-weight:600;">Description:</label>
-            <textarea id="editWorkflowDescription" placeholder="Description" style="min-height:60px;"></textarea>
-            <label style="display:block;margin:12px 0 6px;font-weight:600;">Definition (JSON):</label>
-            <textarea id="editWorkflowDefinition" style="min-height: 320px; font-family: var(--font-mono); font-size: 0.85em;"></textarea>
-            <label style="display:block;margin:12px 0 6px;font-weight:600;">Webhook URL (optional):</label>
-            <input type="url" id="editWorkflowWebhookUrl" placeholder="https://example.com/webhook">
-            <div id="editWorkflowError" style="color:var(--terminal-red);font-size:0.85em;margin-top:8px;display:none;"></div>
-            <div style="margin-top:16px;display:flex;gap:10px;">
-                <button onclick="saveWorkflow()">💾 Save</button>
-                <button onclick="closeModal('editWorkflowModal')">Cancel</button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Create Schedule Modal -->
-    <div id="createScheduleModal" class="modal">
-        <div class="modal-content">
-            <h2>Create Scheduled Command</h2>
-
-            <label style="display: block; margin-bottom: 8px; font-weight: 600;">Schedule Name:</label>
-            <input type="text" id="scheduleName" placeholder="e.g., Daily System Check">
-
-            <label style="display: block; margin-bottom: 8px; margin-top: 15px; font-weight: 600;">Command:</label>
-            <textarea id="scheduleCommand" placeholder="Enter command to execute"></textarea>
-
-            <label style="display: block; margin-bottom: 8px; margin-top: 15px; font-weight: 600;">Target Workers:</label>
-            <div id="scheduleWorkerList" style="background: var(--bg-primary); border: 2px solid var(--terminal-green); padding: 15px; margin-bottom: 15px; max-height: 150px; overflow-y: auto;">
-                <div class="loading">Loading workers...</div>
-            </div>
-
-            <label style="display: block; margin-bottom: 8px; margin-top: 15px; font-weight: 600;">Schedule Type:</label>
-            <select id="scheduleType" onchange="updateScheduleInput()">
-                <option value="interval">Every X Minutes</option>
-                <option value="hourly">Every X Hours</option>
-                <option value="daily">Daily at Time</option>
-            </select>
-
-            <div id="scheduleInputContainer" style="margin-top: 15px;">
-                <label style="display: block; margin-bottom: 8px; font-weight: 600;">Interval (minutes):</label>
-                <input type="number" id="scheduleValue" placeholder="e.g., 30" min="1">
-            </div>
-
-            <div style="margin-top: 20px;">
-                <button onclick="createSchedule()">Create Schedule</button>
-                <button onclick="closeModal('createScheduleModal')" style="margin-left: 10px;">Cancel</button>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        let currentUser = null;
-        let ws = null;
-        let workers = [];
-        let allExecutions = []; // Store all loaded executions for filtering
-        let compareMode = false;
-        let selectedExecutions = new Set();
-
-        async function loadUser() {
-            try {
-                const response = await fetch('/api/user');
-                if (!response.ok) return false;
-                
-                currentUser = await response.json();
-                document.getElementById('userInfo').innerHTML = `
-                    <div class="name">${escapeHtml(currentUser.name || '')}</div>
-                    <div class="email">${escapeHtml(currentUser.email || '')}</div>
-                    <div>${(currentUser.groups || []).map(g =>
-                        `<span class="badge">${escapeHtml(g)}</span>`
-                    ).join('')}</div>
-                `;
-                return true;
-            } catch (error) {
-                console.error('Error loading user:', error);
-                return false;
-            }
-        }
-
-        async function loadWorkers() {
-            try {
-                const response = await fetch('/api/workers');
-                workers = await response.json();
-
-                // Update worker select in quick command (single mode)
-                const select = document.getElementById('quickWorkerSelect');
-                if (select) {
-                    select.innerHTML = workers.map(w =>
-                        `<option value="${w.id}">${w.name} (${w.status})</option>`
-                    ).join('');
-                }
-
-                // Update worker checkboxes (multi mode)
-                const checkboxList = document.getElementById('workerCheckboxList');
-                if (checkboxList) {
-                    checkboxList.innerHTML = workers.length === 0 ?
-                        '<div class="empty">No workers available</div>' :
-                        workers.map(w => `
-                            <label style="display: block; margin-bottom: 10px; cursor: pointer; padding: 8px; border: 1px solid var(--terminal-green); background: ${w.status === 'online' ? 'rgba(0, 255, 65, 0.05)' : 'transparent'};">
-                                <input type="checkbox" name="workerCheckbox" value="${w.id}" data-status="${w.status}" style="width: auto; margin-right: 8px;">
-                                <span class="status ${w.status}" style="padding: 2px 8px; font-size: 0.8em;">[${w.status === 'online' ? '●' : '○'}]</span>
-                                <strong>${w.name}</strong>
-                            </label>
-                        `).join('');
-                }
-                
-                // Dashboard view
-                const dashHtml = workers.length === 0 ?
-                    '<div class="empty">No workers connected</div>' :
-                    workers.map(w => {
-                        const meta = w.metadata ? (typeof w.metadata === 'string' ? JSON.parse(w.metadata) : w.metadata) : null;
-                        const lastSeen = getTimeAgo(new Date(w.last_heartbeat));
-                        return `
-                            <div class="worker-item">
-                                <span class="status ${w.status}">[${w.status === 'online' ? '●' : '○'}]</span>
-                                <strong>${w.name}</strong>
-                                ${meta ? `<div class="worker-stats">
-                                    <span>CPU: ${meta.cpus || '?'} cores</span>
-                                    <span>RAM: ${formatBytes(meta.freeMem)}/${formatBytes(meta.totalMem)}</span>
-                                    <span>Tasks: ${meta.activeTasks || 0}/${meta.maxConcurrentTasks || 0}</span>
-                                </div>` : ''}
-                                <div class="timestamp">Last seen: ${lastSeen}</div>
-                            </div>
-                        `;
-                    }).join('');
-                document.getElementById('dashWorkers').innerHTML = dashHtml;
-                
-                // Full worker list
-                const fullHtml = workers.length === 0 ?
-                    '<div class="empty">No workers connected</div>' :
-                    workers.map(w => {
-                        const meta = w.metadata ? (typeof w.metadata === 'string' ? JSON.parse(w.metadata) : w.metadata) : null;
-                        const lastSeen = getTimeAgo(new Date(w.last_heartbeat));
-                        const memUsagePercent = meta && meta.totalMem ? ((meta.totalMem - meta.freeMem) / meta.totalMem * 100).toFixed(1) : 0;
-                        const loadAvg = meta && meta.loadavg ? meta.loadavg.map(l => l.toFixed(2)).join(', ') : 'N/A';
-
-                        return `
-                            <div class="worker-item">
-                                <div style="display: flex; justify-content: space-between; align-items: start;">
-                                    <div style="flex: 1;">
-                                        <span class="status ${w.status}">[${w.status === 'online' ? '●' : '○'}]</span>
-                                        <strong>${w.name}</strong>
-                                        <div class="timestamp">Last seen: ${lastSeen}</div>
-                                        ${meta ? `
-                                            <div class="worker-metadata">
-                                                <div class="meta-row">
-                                                    <span class="meta-label">System:</span>
-                                                    <span>${meta.platform || 'N/A'} ${meta.arch || ''} | ${meta.cpus || '?'} CPU cores</span>
-                                                </div>
-                                                <div class="meta-row">
-                                                    <span class="meta-label">Memory:</span>
-                                                    <span>${formatBytes(meta.totalMem - meta.freeMem)} / ${formatBytes(meta.totalMem)} (${memUsagePercent}% used)</span>
-                                                </div>
-                                                <div class="meta-row">
-                                                    <span class="meta-label">Load Avg:</span>
-                                                    <span>${loadAvg}</span>
-                                                </div>
-                                                <div class="meta-row">
-                                                    <span class="meta-label">Uptime:</span>
-                                                    <span>${formatUptime(meta.uptime)}</span>
-                                                </div>
-                                                <div class="meta-row">
-                                                    <span class="meta-label">Active Tasks:</span>
-                                                    <span>${meta.activeTasks || 0} / ${meta.maxConcurrentTasks || 0}</span>
-                                                </div>
-                                            </div>
-                                        ` : ''}
-                                    </div>
-                                    ${currentUser && currentUser.isAdmin ? `
-                                        <button class="danger small" onclick="deleteWorker('${w.id}', '${w.name}')">🗑️ Delete</button>
-                                    ` : ''}
-                                </div>
-                            </div>
-                        `;
-                    }).join('');
-                document.getElementById('workerList').innerHTML = fullHtml;
-            } catch (error) {
-                console.error('Error loading workers:', error);
-                document.getElementById('workerList').innerHTML = '<div class="empty" style="color:var(--terminal-red);">⚠ Failed to load workers</div>';
-            }
-        }
-
-        // Workflow registry (id → definition) for param lookup
-        let _workflowRegistry = {};
-
-        async function loadWorkflows() {
-            try {
-                const response = await fetch('/api/workflows');
-                const workflows = await response.json();
-
-                // Cache definitions for param lookup at execute time
-                _workflowRegistry = {};
-                workflows.forEach(w => {
-                    const def = typeof w.definition === 'string' ? JSON.parse(w.definition) : w.definition;
-                    _workflowRegistry[w.id] = def;
-                });
-
-                const paramBadge = (def) => {
-                    const ps = (def && def.params) || [];
-                    return ps.length ? `<span style="font-size:.75em;color:var(--terminal-amber);margin-left:6px;">[${ps.length} param${ps.length > 1 ? 's' : ''}]</span>` : '';
-                };
-
-                const html = workflows.length === 0 ?
-                    '<div class="empty">No workflows defined yet</div>' :
-                    workflows.map(w => {
-                        const def = _workflowRegistry[w.id] || {};
-                        return `
-                        <div class="workflow-item">
-                            <div class="workflow-name">${escapeHtml(w.name)}${paramBadge(def)}</div>
-                            <div class="workflow-desc">${escapeHtml(w.description || 'No description')}</div>
-                            <div class="timestamp">Created by ${escapeHtml(w.created_by || 'Unknown')} on ${safeDate(w.created_at)?.toLocaleString() ?? 'N/A'}</div>
-                            <div style="margin-top: 10px;">
-                                <button onclick="executeWorkflow('${w.id}')">▶️ Execute</button>
-                                ${currentUser && currentUser.isAdmin ?
-                                    `<button onclick="editWorkflow('${w.id}')">✏️ Edit</button>
-                                     <button class="danger" onclick="deleteWorkflow('${w.id}', '${w.name}')">🗑️ Delete</button>`
-                                    : ''}
-                            </div>
-                        </div>`;
-                    }).join('');
-                document.getElementById('workflowList').innerHTML = html;
-            } catch (error) {
-                console.error('Error loading workflows:', error);
-                document.getElementById('workflowList').innerHTML = '<div class="empty" style="color:var(--terminal-red);">⚠ Failed to load workflows</div>';
-            }
-        }
-
-        async function loadSchedules() {
-            try {
-                const response = await fetch('/api/scheduled-commands');
-                const schedules = await response.json();
-
-                const html = schedules.length === 0 ?
-                    '<div class="empty">No scheduled commands yet</div>' :
-                    schedules.map(s => {
-                        const workerIds = JSON.parse(s.worker_ids);
-                        const workerNames = workerIds.map(id => {
-                            const w = workers.find(worker => worker.id === id);
-                            return w ? w.name : id.substring(0, 8);
-                        }).join(', ');
-
-                        let scheduleDesc = '';
-                        if (s.schedule_type === 'interval') {
-                            scheduleDesc = `Every ${s.schedule_value} minutes`;
-                        } else if (s.schedule_type === 'hourly') {
-                            scheduleDesc = `Every ${s.schedule_value} hour(s)`;
-                        } else if (s.schedule_type === 'daily') {
-                            scheduleDesc = `Daily at ${s.schedule_value}`;
-                        } else if (s.schedule_type === 'cron') {
-                            scheduleDesc = `Cron: ${s.schedule_value}`;
-                        }
-
-                        const nextRunDate = safeDate(s.next_run);
-                        const nextRunIn = nextRunDate ? (() => {
-                            const secs = Math.round((nextRunDate - Date.now()) / 1000);
-                            if (secs <= 0) return 'now';
-                            if (secs < 60) return `${secs}s`;
-                            if (secs < 3600) return `${Math.round(secs/60)}m`;
-                            return `${Math.round(secs/3600)}h`;
-                        })() : null;
-                        const nextRun = nextRunDate ? `${nextRunDate.toLocaleString()}${nextRunIn ? ` (in ${nextRunIn})` : ''}` : 'Not scheduled';
-                        const lastRun = safeDate(s.last_run)?.toLocaleString() ?? 'Never';
-
-                        return `
-                            <div class="workflow-item" style="opacity: ${s.enabled ? 1 : 0.6};">
-                                <div style="display: flex; justify-content: space-between; align-items: start;">
-                                    <div style="flex: 1;">
-                                        <div class="workflow-name">${escapeHtml(s.name || '')}</div>
-                                        <div style="color: var(--terminal-green); font-family: var(--font-mono); font-size: 0.9em; margin: 8px 0;">
-                                            Command: <code>${escapeHtml(s.command)}</code>
-                                        </div>
-                                        <div style="color: var(--terminal-amber); font-size: 0.9em; margin-bottom: 5px;">
-                                            📅 ${scheduleDesc}
-                                        </div>
-                                        <div style="color: var(--text-muted); font-size: 0.85em;">
-                                            Workers: ${workerNames}
-                                        </div>
-                                        <div class="timestamp">
-                                            Last run: ${lastRun} | Next run: ${nextRun}
-                                        </div>
-                                    </div>
-                                    <div style="margin-left: 15px;">
-                                        <span class="status ${s.enabled ? 'online' : 'offline'}" style="font-size: 0.85em;">
-                                            ${s.enabled ? 'ENABLED' : 'DISABLED'}
-                                        </span>
-                                    </div>
-                                </div>
-                                <div style="margin-top: 10px;">
-                                    <button onclick="toggleSchedule('${s.id}')" class="small">
-                                        ${s.enabled ? '⏸️ Disable' : '▶️ Enable'}
-                                    </button>
-                                    <button class="danger small" onclick="deleteSchedule('${s.id}', '${s.name}')">🗑️ Delete</button>
-                                </div>
-                            </div>
-                        `;
-                    }).join('');
-
-                document.getElementById('scheduleList').innerHTML = html;
-            } catch (error) {
-                console.error('Error loading schedules:', error);
-                document.getElementById('scheduleList').innerHTML = '<div class="empty" style="color:var(--terminal-red);">⚠ Failed to load schedules</div>';
-            }
-        }
-
-        function showCreateSchedule() {
-            // Populate worker checkboxes
-            const workerList = document.getElementById('scheduleWorkerList');
-            workerList.innerHTML = workers.length === 0 ?
-                '<div class="empty">No workers available</div>' :
-                workers.map(w => `
-                    <label style="display: block; margin-bottom: 10px; cursor: pointer; padding: 8px; border: 1px solid var(--terminal-green);">
-                        <input type="checkbox" name="scheduleWorkerCheckbox" value="${w.id}" style="width: auto; margin-right: 8px;">
-                        <span class="status ${w.status}" style="padding: 2px 8px; font-size: 0.8em;">[${w.status === 'online' ? '●' : '○'}]</span>
-                        <strong>${w.name}</strong>
-                    </label>
-                `).join('');
-
-            document.getElementById('createScheduleModal').classList.add('show');
-        }
-
-        function updateScheduleInput() {
-            const scheduleType = document.getElementById('scheduleType').value;
-            const container = document.getElementById('scheduleInputContainer');
-
-            if (scheduleType === 'interval') {
-                container.innerHTML = `
-                    <label style="display: block; margin-bottom: 8px; font-weight: 600;">Interval (minutes):</label>
-                    <input type="number" id="scheduleValue" placeholder="e.g., 30" min="1">
-                `;
-            } else if (scheduleType === 'hourly') {
-                container.innerHTML = `
-                    <label style="display: block; margin-bottom: 8px; font-weight: 600;">Every X Hours:</label>
-                    <input type="number" id="scheduleValue" placeholder="e.g., 2" min="1" max="24">
-                `;
-            } else if (scheduleType === 'daily') {
-                container.innerHTML = `
-                    <label style="display: block; margin-bottom: 8px; font-weight: 600;">Time (HH:MM):</label>
-                    <input type="time" id="scheduleValue">
-                `;
-            }
-        }
-
-        async function createSchedule() {
-            const name = document.getElementById('scheduleName').value;
-            const command = document.getElementById('scheduleCommand').value;
-            const scheduleType = document.getElementById('scheduleType').value;
-            const scheduleValue = document.getElementById('scheduleValue').value;
-
-            const selectedWorkers = Array.from(document.querySelectorAll('input[name="scheduleWorkerCheckbox"]:checked')).map(cb => cb.value);
-
-            if (!name || !command || !scheduleValue || selectedWorkers.length === 0) {
-                alert('Please fill in all fields and select at least one worker');
-                return;
-            }
-
-            try {
-                const response = await fetch('/api/scheduled-commands', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        name,
-                        command,
-                        worker_ids: selectedWorkers,
-                        schedule_type: scheduleType,
-                        schedule_value: scheduleValue
-                    })
-                });
-
-                if (response.ok) {
-                    closeModal('createScheduleModal');
-                    showTerminalNotification('Schedule created successfully', 'success');
-                    loadSchedules();
-
-                    // Clear form
-                    document.getElementById('scheduleName').value = '';
-                    document.getElementById('scheduleCommand').value = '';
-                    document.getElementById('scheduleValue').value = '';
-                } else {
-                    const error = await response.json();
-                    showTerminalNotification('Failed to create schedule: ' + error.error, 'error');
-                }
-            } catch (error) {
-                console.error('Error creating schedule:', error);
-                showTerminalNotification('Error creating schedule', 'error');
-            }
-        }
-
-        async function toggleSchedule(scheduleId) {
-            try {
-                const response = await fetch(`/api/scheduled-commands/${scheduleId}/toggle`, {
-                    method: 'PUT'
-                });
-
-                if (response.ok) {
-                    const data = await response.json();
-                    showTerminalNotification(`Schedule ${data.enabled ? 'enabled' : 'disabled'}`, 'success');
-                    loadSchedules();
-                } else {
-                    showTerminalNotification('Failed to toggle schedule', 'error');
-                }
-            } catch (error) {
-                console.error('Error toggling schedule:', error);
-                showTerminalNotification('Error toggling schedule', 'error');
-            }
-        }
-
-        async function deleteSchedule(scheduleId, name) {
-            if (!confirm(`Delete scheduled command: ${name}?`)) return;
-
-            try {
-                const response = await fetch(`/api/scheduled-commands/${scheduleId}`, {
-                    method: 'DELETE'
-                });
-
-                if (response.ok) {
-                    showTerminalNotification('Schedule deleted', 'success');
-                    loadSchedules();
-                } else {
-                    showTerminalNotification('Failed to delete schedule', 'error');
-                }
-            } catch (error) {
-                console.error('Error deleting schedule:', error);
-                showTerminalNotification('Error deleting schedule', 'error');
-            }
-        }
-
-        let executionOffset = 0;
-        const executionLimit = 50;
-        let executionView = localStorage.getItem('pulse_executionView') || 'manual';
-
-        async function loadExecutions(append = false) {
-            try {
-                if (!append) executionOffset = 0;
-
-                const response = await fetch(`/api/executions?limit=${executionLimit}&offset=${executionOffset}`);
-                const data = await response.json();
-                const executions = data.executions || data; // Handle old and new API format
-
-                // Store executions for filtering
-                if (append) {
-                    allExecutions = allExecutions.concat(executions);
-                } else {
-                    allExecutions = executions;
-                }
-
-                // Dashboard view (first 5 manual runs only)
-                if (!append) {
-                    const manualExecs = executions.filter(e => !isAutomatedRun(e));
-                    const dashHtml = manualExecs.length === 0 ?
-                        '<div class="empty">No executions yet</div>' :
-                        manualExecs.slice(0, 5).map(e => `
-                            <div class="execution-item" onclick="viewExecution('${e.id}')">
-                                <span class="status ${e.status}">${e.status}</span>
-                                <strong>${e.workflow_name || '[Quick Command]'}</strong>
-                                <div class="timestamp">by ${escapeHtml(e.started_by || '')} at ${safeDate(e.started_at)?.toLocaleString() ?? 'N/A'}</div>
-                            </div>
-                        `).join('');
-                    document.getElementById('dashExecutions').innerHTML = dashHtml;
-                }
-
-                // Apply filters and render
-                renderFilteredExecutions();
-
-                // Add "Load More" button if there are more executions
-                if (data.hasMore) {
-                    const loadMoreBtn = `<button onclick="loadMoreExecutions()" style="width: 100%; margin-top: 15px;">Load More Executions</button>`;
-                    document.getElementById('executionList').innerHTML += loadMoreBtn;
-                }
-
-            } catch (error) {
-                console.error('Error loading executions:', error);
-                document.getElementById('executionList').innerHTML = '<div class="empty" style="color:var(--terminal-red);">⚠ Failed to load executions</div>';
-            }
-        }
-
-        function isAutomatedRun(e) {
-            const by = e.started_by || '';
-            return by.startsWith('gandalf:') || by.startsWith('scheduler:');
-        }
-
-        function updateSubTabCounts() {
-            const manual = allExecutions.filter(e => !isAutomatedRun(e)).length;
-            const automated = allExecutions.filter(e => isAutomatedRun(e)).length;
-            const cm = document.getElementById('countManual');
-            const ca = document.getElementById('countAutomated');
-            if (cm) cm.textContent = manual ? `(${manual}) ` : '';
-            if (ca) ca.textContent = automated ? `(${automated}) ` : '';
-        }
-
-        function setExecutionView(view) {
-            executionView = view;
-            localStorage.setItem('pulse_executionView', view);
-            const manualBtn = document.getElementById('subTabManual');
-            const autoBtn = document.getElementById('subTabAutomated');
-            if (manualBtn && autoBtn) {
-                if (view === 'manual') {
-                    manualBtn.style.background = 'rgba(0,255,65,0.2)';
-                    manualBtn.style.color = 'var(--terminal-amber)';
-                    manualBtn.style.textShadow = '0 0 5px #ffb000';
-                    autoBtn.style.background = 'transparent';
-                    autoBtn.style.color = 'var(--terminal-green)';
-                    autoBtn.style.textShadow = 'none';
-                } else {
-                    autoBtn.style.background = 'rgba(0,255,65,0.2)';
-                    autoBtn.style.color = 'var(--terminal-amber)';
-                    autoBtn.style.textShadow = '0 0 5px #ffb000';
-                    manualBtn.style.background = 'transparent';
-                    manualBtn.style.color = 'var(--terminal-green)';
-                    manualBtn.style.textShadow = 'none';
-                }
-            }
-            renderFilteredExecutions();
-        }
-
-        function renderFilteredExecutions() {
-            const searchTerm = (document.getElementById('executionSearch')?.value || '').toLowerCase();
-            const statusFilter = document.getElementById('statusFilter')?.value || '';
-
-            updateSubTabCounts();
-
-            // Filter executions
-            let filtered = allExecutions.filter(e => {
-                // View filter (manual vs automated)
-                if (executionView === 'manual' && isAutomatedRun(e)) return false;
-                if (executionView === 'automated' && !isAutomatedRun(e)) return false;
-
-                // Status filter
-                if (statusFilter && e.status !== statusFilter) return false;
-
-                // Search filter (search in workflow name, execution ID, and logs)
-                if (searchTerm) {
-                    const workflowName = (e.workflow_name || '[Quick Command]').toLowerCase();
-                    const executionId = e.id.toLowerCase();
-
-                    // Try to extract command from logs if it's a quick command
-                    let commandText = '';
-                    try {
-                        const logs = typeof e.logs === 'string' ? JSON.parse(e.logs) : e.logs;
-                        if (logs && logs.length > 0 && logs[0].command) {
-                            commandText = logs[0].command.toLowerCase();
-                        }
-                    } catch (err) {
-                        // Ignore parsing errors
-                    }
-
-                    const matchFound = workflowName.includes(searchTerm) ||
-                                      executionId.includes(searchTerm) ||
-                                      commandText.includes(searchTerm);
-
-                    if (!matchFound) return false;
-                }
-
-                return true;
-            });
-
-            // Update filter stats
-            const statsEl = document.getElementById('filterStats');
-            if (statsEl) {
-                if (searchTerm || statusFilter) {
-                    statsEl.textContent = `Showing ${filtered.length} of ${allExecutions.length} executions`;
-                } else {
-                    statsEl.textContent = '';
-                }
-            }
-
-            // Render filtered results
-            const fullHtml = filtered.length === 0 ?
-                '<div class="empty">No executions match your filters</div>' :
-                filtered.map(e => {
-                    const isSelected = selectedExecutions.has(e.id);
-                    const clickHandler = compareMode ? `toggleExecutionSelection('${e.id}')` : `viewExecution('${e.id}')`;
-                    const selectedStyle = isSelected ? 'background: rgba(255, 176, 0, 0.2); border-left-width: 5px; border-left-color: var(--terminal-amber);' : '';
-
-                    const elapsed = e.status === 'running' ? ` • ${formatElapsed(e.started_at)}` : '';
-                    return `
-                        <div class="execution-item${e.status === 'running' ? ' status-running' : ''}" onclick="${clickHandler}" style="${selectedStyle} cursor: pointer;">
-                            ${compareMode && isSelected ? '<span style="color: var(--terminal-amber); margin-right: 8px;">✓</span>' : ''}
-                            <span class="status ${e.status}">${e.status}</span>
-                            <strong>${e.workflow_name || '[Quick Command]'}</strong>
-                            <div class="timestamp">
-                                Started by ${escapeHtml(e.started_by || '')} at ${safeDate(e.started_at)?.toLocaleString() ?? 'N/A'}
-                                ${e.completed_at ? ` • Completed at ${safeDate(e.completed_at)?.toLocaleString() ?? 'N/A'}` : elapsed}
-                            </div>
-                        </div>
-                    `;
-                }).join('');
-
-            document.getElementById('executionList').innerHTML = fullHtml;
-        }
-
-        function filterExecutions() {
-            renderFilteredExecutions();
-        }
-
-        function clearFilters() {
-            document.getElementById('executionSearch').value = '';
-            document.getElementById('statusFilter').value = '';
-            renderFilteredExecutions();
-        }
-
-        function toggleCompareMode() {
-            compareMode = !compareMode;
-            selectedExecutions = new Set();
-
-            const btn = document.getElementById('compareModeBtn');
-            const compareBtn = document.getElementById('compareBtn');
-            const instructions = document.getElementById('compareInstructions');
-
-            if (compareMode) {
-                btn.textContent = '✗ Exit Compare Mode';
-                btn.style.borderColor = 'var(--terminal-amber)';
-                btn.style.color = 'var(--terminal-amber)';
-                compareBtn.style.display = 'inline-flex';
-                instructions.style.display = 'block';
-            } else {
-                btn.textContent = '📊 Compare Mode';
-                btn.style.borderColor = '';
-                btn.style.color = '';
-                compareBtn.style.display = 'none';
-                instructions.style.display = 'none';
-            }
-
-            renderFilteredExecutions();
-        }
-
-        function toggleExecutionSelection(executionId) {
-            if (selectedExecutions.has(executionId)) {
-                selectedExecutions.delete(executionId);
-            } else {
-                if (selectedExecutions.size >= 5) {
-                    showTerminalNotification('Maximum 5 executions can be compared', 'error');
-                    return;
-                }
-                selectedExecutions.add(executionId);
-            }
-
-            renderFilteredExecutions();
-
-            // Update compare button text
-            const compareBtn = document.getElementById('compareBtn');
-            if (selectedExecutions.size >= 2) {
-                compareBtn.textContent = `⚖️ Compare Selected (${selectedExecutions.size})`;
-            } else {
-                compareBtn.textContent = '⚖️ Compare Selected';
-            }
-        }
-
-        async function compareSelectedExecutions() {
-            if (selectedExecutions.size < 2) {
-                showTerminalNotification('Please select at least 2 executions to compare', 'error');
-                return;
-            }
-
-            // Fetch detailed data for all selected executions
-            const executionDetails = [];
-            for (const execId of selectedExecutions) {
-                try {
-                    const response = await fetch(`/api/executions/${execId}`);
-                    if (response.ok) {
-                        executionDetails.push(await response.json());
-                    }
-                } catch (error) {
-                    console.error('Error fetching execution:', error);
-                }
-            }
-
-            if (executionDetails.length < 2) {
-                showTerminalNotification('Failed to load execution details', 'error');
-                return;
-            }
-
-            // Generate comparison view
-            let comparisonHtml = '<div style="display: grid; gap: 20px;">';
-
-            // Summary table
-            comparisonHtml += `
-                <div style="background: rgba(0, 255, 65, 0.05); border: 2px solid var(--terminal-green); padding: 15px;">
-                    <h3 style="margin-top: 0; color: var(--terminal-amber);">Comparison Summary</h3>
-                    <table style="width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.9em;">
-                        <thead>
-                            <tr style="border-bottom: 2px solid var(--terminal-green);">
-                                <th style="text-align: left; padding: 8px; color: var(--terminal-amber);">Execution</th>
-                                <th style="text-align: left; padding: 8px; color: var(--terminal-amber);">Status</th>
-                                <th style="text-align: left; padding: 8px; color: var(--terminal-amber);">Started</th>
-                                <th style="text-align: left; padding: 8px; color: var(--terminal-amber);">Duration</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            ${executionDetails.map((exec, idx) => {
-                                const duration = exec.completed_at ?
-                                    Math.round((new Date(exec.completed_at) - new Date(exec.started_at)) / 1000) + 's' :
-                                    'Running...';
-                                return `
-                                    <tr style="border-bottom: 1px solid #003300;">
-                                        <td style="padding: 8px; color: var(--terminal-green);">Execution ${idx + 1}</td>
-                                        <td style="padding: 8px;"><span class="status ${exec.status}" style="font-size: 0.85em;">${exec.status}</span></td>
-                                        <td style="padding: 8px; color: var(--terminal-green);">${safeDate(exec.started_at)?.toLocaleString() ?? 'N/A'}</td>
-                                        <td style="padding: 8px; color: var(--terminal-green);">${duration}</td>
-                                    </tr>
-                                `;
-                            }).join('')}
-                        </tbody>
-                    </table>
-                </div>
-            `;
-
-            // Side-by-side output comparison
-            comparisonHtml += `
-                <div style="background: rgba(0, 255, 65, 0.05); border: 2px solid var(--terminal-green); padding: 15px;">
-                    <h3 style="margin-top: 0; color: var(--terminal-amber);">Output Comparison</h3>
-                    <div style="display: grid; grid-template-columns: repeat(${executionDetails.length}, 1fr); gap: 15px;">
-                        ${executionDetails.map((exec, idx) => {
-                            const logs = typeof exec.logs === 'string' ? JSON.parse(exec.logs) : exec.logs;
-                            const resultLog = logs.find(l => l.action === 'command_result');
-                            const stdout = resultLog?.stdout || 'No output';
-                            const stderr = resultLog?.stderr || '';
-
-                            return `
-                                <div style="border: 2px solid var(--terminal-green); background: #000;">
-                                    <div style="background: var(--bg-secondary); padding: 10px; border-bottom: 2px solid var(--terminal-green);">
-                                        <strong style="color: var(--terminal-amber);">Execution ${idx + 1}</strong>
-                                        <div style="font-size: 0.85em; color: var(--terminal-green);">
-                                            ${exec.workflow_name || '[Quick Command]'}
-                                        </div>
-                                    </div>
-                                    <div style="padding: 12px;">
-                                        ${stdout ? `
-                                            <div style="margin-bottom: 10px;">
-                                                <div style="color: var(--terminal-amber); font-weight: bold; margin-bottom: 5px;">STDOUT:</div>
-                                                <pre style="margin: 0; color: var(--terminal-green); font-size: 0.85em; max-height: 400px; overflow-y: auto; white-space: pre-wrap;">${escapeHtml(stdout)}</pre>
-                                            </div>
-                                        ` : ''}
-                                        ${stderr ? `
-                                            <div>
-                                                <div style="color: #ff4444; font-weight: bold; margin-bottom: 5px;">STDERR:</div>
-                                                <pre style="margin: 0; color: #ff4444; font-size: 0.85em; max-height: 200px; overflow-y: auto; white-space: pre-wrap;">${escapeHtml(stderr)}</pre>
-                                            </div>
-                                        ` : ''}
-                                    </div>
-                                </div>
-                            `;
-                        }).join('')}
-                    </div>
-                </div>
-            `;
-
-            // Diff analysis (simple line-by-line comparison for 2 executions)
-            if (executionDetails.length === 2) {
-                const logs1 = typeof executionDetails[0].logs === 'string' ? JSON.parse(executionDetails[0].logs) : executionDetails[0].logs;
-                const logs2 = typeof executionDetails[1].logs === 'string' ? JSON.parse(executionDetails[1].logs) : executionDetails[1].logs;
-
-                const result1 = logs1.find(l => l.action === 'command_result');
-                const result2 = logs2.find(l => l.action === 'command_result');
-
-                const stdout1 = result1?.stdout || '';
-                const stdout2 = result2?.stdout || '';
-
-                const lines1 = stdout1.split('\n');
-                const lines2 = stdout2.split('\n');
-                const maxLines = Math.max(lines1.length, lines2.length);
-
-                let diffLines = [];
-                let identicalCount = 0;
-                let differentCount = 0;
-
-                for (let i = 0; i < maxLines; i++) {
-                    const line1 = lines1[i] || '';
-                    const line2 = lines2[i] || '';
-
-                    if (line1 === line2) {
-                        identicalCount++;
-                        diffLines.push(`<div style="color: #666; padding: 2px;">${i+1}: ${escapeHtml(line1) || '(empty)'}</div>`);
-                    } else {
-                        differentCount++;
-                        diffLines.push(`
-                            <div style="background: rgba(255, 176, 0, 0.1); border-left: 3px solid var(--terminal-amber); padding: 2px; margin: 2px 0;">
-                                <div style="color: var(--terminal-green);">${i+1} [Exec 1]: ${escapeHtml(line1) || '(empty)'}</div>
-                                <div style="color: var(--terminal-amber);">${i+1} [Exec 2]: ${escapeHtml(line2) || '(empty)'}</div>
-                            </div>
-                        `);
-                    }
-                }
-
-                comparisonHtml += `
-                    <div style="background: rgba(0, 255, 65, 0.05); border: 2px solid var(--terminal-green); padding: 15px;">
-                        <h3 style="margin-top: 0; color: var(--terminal-amber);">Diff Analysis</h3>
-                        <div style="margin-bottom: 10px; font-family: var(--font-mono); font-size: 0.9em;">
-                            <span style="color: var(--terminal-green);">✓ Identical lines: ${identicalCount}</span> |
-                            <span style="color: var(--terminal-amber);">≠ Different lines: ${differentCount}</span>
-                        </div>
-                        <div style="background: #000; border: 2px solid var(--terminal-green); padding: 10px; max-height: 400px; overflow-y: auto; font-family: var(--font-mono); font-size: 0.85em;">
-                            ${diffLines.join('')}
-                        </div>
-                    </div>
-                `;
-            }
-
-            comparisonHtml += '</div>';
-
-            document.getElementById('compareContent').innerHTML = comparisonHtml;
-            document.getElementById('compareExecutionsModal').classList.add('show');
-        }
-
-        async function loadMoreExecutions() {
-            executionOffset += executionLimit;
-            await loadExecutions(true);
-        }
-
-        async function clearCompletedExecutions() {
-            if (!confirm('Delete all completed and failed executions?')) return;
-
-            try {
-                const response = await fetch('/api/executions/completed', { method: 'DELETE' });
-                if (!response.ok) {
-                    const err = await response.json().catch(() => ({}));
-                    showTerminalNotification(err.error || 'Failed to delete executions', 'error');
-                    return;
-                }
-                const data = await response.json();
-                showTerminalNotification(`Deleted ${data.deleted} execution(s)`, 'success');
-                refreshData();
-            } catch (error) {
-                console.error('Error clearing executions:', error);
-                showTerminalNotification('Error clearing executions', 'error');
-            }
-        }
-
-        // ── Workflow execution with optional param modal ───────────────────
-        let _pendingExecWorkflowId = null;
-
-        async function executeWorkflow(workflowId) {
-            const def = _workflowRegistry[workflowId] || {};
-            const paramDefs = def.params || [];
-            if (paramDefs.length > 0) {
-                showParamModal(workflowId, paramDefs);
-            } else {
-                const name = document.querySelector(`[onclick="executeWorkflow('${workflowId}')"]`)
-                    ?.closest('.workflow-item')?.querySelector('.workflow-name')?.textContent || 'this workflow';
-                const choice = confirm(`Execute: ${name}?\n\nClick OK to run normally, or Cancel to abort.\n(Use the workflow's Run button with dry-run checkbox for a dry run.)`);
-                if (!choice) return;
-                await startExecution(workflowId, {}, false);
-            }
-        }
-
-        async function startExecution(workflowId, params, dryRun = false) {
-            try {
-                const response = await fetch('/api/executions', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ workflow_id: workflowId, params, dry_run: dryRun })
-                });
-                if (response.ok) {
-                    switchTab('executions');
-                    refreshData();
-                } else {
-                    const err = await response.json().catch(() => ({}));
-                    alert('Failed to start: ' + (err.error || response.status));
-                }
-            } catch (error) {
-                alert('Error starting workflow: ' + error.message);
-            }
-        }
-
-        function showParamModal(workflowId, paramDefs) {
-            _pendingExecWorkflowId = workflowId;
-            const form = document.getElementById('paramModalForm');
-            form.innerHTML = paramDefs.map(p => `
-                <div style="margin-bottom:14px;">
-                    <label style="display:block;margin-bottom:4px;color:var(--terminal-amber);font-size:.85em;">
-                        ${p.label || p.name}${p.required ? ' <span style="color:var(--terminal-red)">*</span>' : ''}
-                    </label>
-                    <input type="text" id="param_${p.name}"
-                        placeholder="${p.placeholder || ''}"
-                        style="width:100%;background:#0a0a0a;border:1px solid var(--terminal-green);color:var(--terminal-green);font-family:var(--font-mono);padding:6px 8px;font-size:.9em;"
-                        ${p.required ? 'required' : ''}>
-                </div>`).join('');
-            document.getElementById('paramModal').style.display = 'flex';
-            // Focus first input; Enter key submits — use single delegated listener to avoid duplicates
-            if (form._keydownHandler) form.removeEventListener('keydown', form._keydownHandler);
-            form._keydownHandler = (e) => { if (e.key === 'Enter' && e.target.tagName === 'INPUT') submitParamForm(); };
-            form.addEventListener('keydown', form._keydownHandler);
-            const first = form.querySelector('input');
-            if (first) setTimeout(() => first.focus(), 50);
-        }
-
-        function closeParamModal() {
-            document.getElementById('paramModal').style.display = 'none';
-            document.getElementById('paramDryRun').checked = false;
-            _pendingExecWorkflowId = null;
-        }
-
-        async function submitParamForm() {
-            if (!_pendingExecWorkflowId) return;
-            const def = _workflowRegistry[_pendingExecWorkflowId] || {};
-            const paramDefs = def.params || [];
-            const params = {};
-            for (const p of paramDefs) {
-                const el = document.getElementById(`param_${p.name}`);
-                const val = el ? el.value.trim() : '';
-                if (p.required && !val) {
-                    el.style.borderColor = 'var(--terminal-red)';
-                    el.focus();
-                    return;
-                }
-                if (val) params[p.name] = val;
-            }
-            const dryRun = document.getElementById('paramDryRun').checked;
-            const wfId = _pendingExecWorkflowId;
-            closeParamModal();
-            await startExecution(wfId, params, dryRun);
-        }
-
-        async function viewExecution(executionId) {
-            try {
-                const response = await fetch(`/api/executions/${executionId}`);
-                const execution = await response.json();
-                
-                let html = `
-                    <div><strong>Status:</strong> <span class="status ${execution.status}">${execution.status}</span></div>
-                    <div><strong>Started:</strong> ${safeDate(execution.started_at)?.toLocaleString() ?? 'N/A'}</div>
-                    ${execution.completed_at ? `<div><strong>Completed:</strong> ${safeDate(execution.completed_at)?.toLocaleString() ?? 'N/A'}</div>` : ''}
-                    <div><strong>Started by:</strong> ${escapeHtml(execution.started_by || '')}</div>
-                `;
-                
-                if (execution.waiting_for_input && execution.prompt) {
-                    const promptOutput = execution.prompt.output || '';
-                    html += `
-                        <div class="prompt-box">
-                            <h3>Waiting for Input</h3>
-                            ${promptOutput ? `<pre class="prompt-output">${escapeHtml(promptOutput)}</pre>` : ''}
-                            <p>${escapeHtml(execution.prompt.message || '')}</p>
-                            <div style="margin-top: 10px;">
-                                ${(execution.prompt.options || []).map(opt =>
-                                    `<button class="prompt-opt-btn" data-opt="${opt.replace(/&/g,'&amp;').replace(/"/g,'&quot;')}" onclick="respondToPrompt('${executionId}', this.dataset.opt)">${escapeHtml(opt)}</button>`
-                                ).join('')}
-                            </div>
-                        </div>
-                    `;
-                }
-
-                if (execution.logs && execution.logs.length > 0) {
-                    html += '<h3 style="margin-top: 20px; margin-bottom: 10px;">Execution Logs:</h3>';
-                    // Pass executionId only to prompt steps that are still pending (no response after them)
-                    const logs = execution.logs;
-                    logs.forEach((log, idx) => {
-                        let promptExecId = null;
-                        if (log.action === 'prompt' && execution.waiting_for_input) {
-                            // Only make interactive if this is the last prompt and no response follows
-                            const hasResponse = logs.slice(idx + 1).some(l => l.action === 'prompt_response');
-                            if (!hasResponse) promptExecId = executionId;
-                        }
-                        html += formatLogEntry(log, promptExecId);
-                    });
-                }
-
-                // Add action buttons
-                html += '<div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--terminal-green); display: flex; gap: 10px;">';
-
-                // Abort button (only for running executions)
-                if (execution.status === 'running') {
-                    html += `<button onclick="abortExecution('${executionId}')" style="background-color: var(--terminal-red); border-color: var(--terminal-red);">⛔ Abort Execution</button>`;
-                }
-
-                // Re-run button (only for quick commands with command in logs)
-                const commandLog = execution.logs?.find(l => l.action === 'command_sent');
-                if (commandLog && commandLog.command) {
-                    html += `<button onclick="rerunCommand('${escapeHtml(commandLog.command)}', '${escapeHtml(commandLog.worker_id || '')}')">🔄 Re-run Command</button>`;
-                }
-
-                // Download logs button
-                html += `<button onclick="downloadExecutionLogs('${executionId}')">💾 Download Logs</button>`;
-
-                html += '</div>';
-
-                document.getElementById('executionDetails').innerHTML = html;
-                const modal = document.getElementById('viewExecutionModal');
-                modal.dataset.executionId = executionId;
-                modal.classList.add('show');
-            } catch (error) {
-                console.error('Error viewing execution:', error);
-                alert('Error loading execution details');
-            }
-        }
-
-        function formatLogEntry(log, executionId = null) {
-            const timestamp = new Date(log.timestamp).toLocaleTimeString();
-
-            // Format based on log action type
-            if (log.action === 'command_sent') {
-                return `
-                    <div class="log-entry log-command-sent">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">Command Sent</div>
-                        <div class="log-details">
-                            <div class="log-field"><span class="log-label">Command:</span> <code>${escapeHtml(log.command)}</code></div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'command_result') {
-                const statusIcon = log.success ? '✓' : '✗';
-                const statusClass = log.success ? 'success' : 'failed';
-                return `
-                    <div class="log-entry log-command-result ${statusClass}">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">${statusIcon} Command Result</div>
-                        <div class="log-details">
-                            <div class="log-field"><span class="log-label">Status:</span> ${log.success ? 'Success' : 'Failed'}</div>
-                            ${log.duration ? `<div class="log-field"><span class="log-label">Duration:</span> ${log.duration}ms</div>` : ''}
-                            ${log.stdout ? `<div class="log-field"><span class="log-label">Output:</span><pre class="log-output">${escapeHtml(log.stdout)}</pre></div>` : ''}
-                            ${log.stderr ? `<div class="log-field"><span class="log-label">Errors:</span><pre class="log-output log-error">${escapeHtml(log.stderr)}</pre></div>` : ''}
-                            ${log.error ? `<div class="log-field"><span class="log-label">Error:</span> ${escapeHtml(log.error)}</div>` : ''}
-                        </div>
-                    </div>
-                `;
-            }
-
-            // Workflow step logs
-            if (log.action === 'step_started') {
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-amber);">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-amber);">▶️ Step ${log.step}: ${escapeHtml(log.step_name || '')}</div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'step_completed') {
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-green);">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-green);">✓ Step ${log.step} Completed: ${escapeHtml(log.step_name || '')}</div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'waiting') {
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-amber);">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-amber);">⏳ Waiting ${escapeHtml(String(log.duration || 0))} seconds...</div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'parse_complete') {
-                const pairs = log.parsed || {};
-                const keys = Object.keys(pairs);
-                const tableRows = keys.map(k =>
-                    `<div class="log-parse-key">${escapeHtml(k)}</div><div class="log-parse-val">${escapeHtml(pairs[k])}</div>`
-                ).join('');
-                return `
-                    <div class="log-entry" style="border-left-color: #444; opacity:.85;">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color:#666;">⚙ Parsed ${keys.length} variable${keys.length !== 1 ? 's' : ''}</div>
-                        ${keys.length > 0 ? `<div class="log-details"><div class="log-parse-table">${tableRows}</div></div>` : ''}
-                    </div>
-                `;
-            }
-
-            if (log.action === 'route_taken') {
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-cyan); opacity:.9;">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-cyan);">⇒ Auto-route: Step ${log.step}</div>
-                        ${log.label ? `<div class="log-details"><div class="log-route-label">${escapeHtml(log.label)}</div>${log.goto ? `<div class="log-route-goto">→ ${escapeHtml(log.goto)}</div>` : ''}</div>` : ''}
-                    </div>
-                `;
-            }
-
-            if (log.action === 'no_workers') {
-                return `
-                    <div class="log-entry failed">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">✗ Step ${log.step}: No Workers Available</div>
-                        <div class="log-details">
-                            <div class="log-field">${escapeHtml(log.message)}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'worker_offline') {
-                return `
-                    <div class="log-entry" style="border-left-color: #ff4444;">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: #ff4444;">⚠️ Worker Offline</div>
-                        <div class="log-details">
-                            <div class="log-field"><span class="log-label">Worker ID:</span> ${escapeHtml(log.worker_id || '')}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'workflow_error') {
-                return `
-                    <div class="log-entry failed">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">✗ Workflow Error</div>
-                        <div class="log-details">
-                            <div class="log-field"><span class="log-label">Error:</span> ${escapeHtml(log.error)}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'execution_aborted') {
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-red);">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-red);">⛔ Execution Aborted</div>
-                        <div class="log-details">
-                            <div class="log-field"><span class="log-label">Aborted by:</span> ${escapeHtml(log.aborted_by)}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'prompt') {
-                const optionsHtml = (log.options || []).map(opt => {
-                    if (executionId) {
-                        return `<button class="prompt-opt-btn" data-opt="${opt.replace(/&/g,'&amp;').replace(/"/g,'&quot;')}" onclick="respondToPrompt('${executionId}', this.dataset.opt)">${escapeHtml(opt)}</button>`;
-                    }
-                    return `<button class="prompt-opt-btn answered" disabled>${escapeHtml(opt)}</button>`;
-                }).join('');
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-cyan);">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-cyan);">❓ Step ${log.step}: ${escapeHtml(log.step_name || 'Prompt')}</div>
-                        <div class="log-details">
-                            ${log.output ? `<pre class="log-output" style="max-height:300px;overflow-y:auto;margin-bottom:10px;">${escapeHtml(log.output)}</pre>` : ''}
-                            <div style="color: var(--terminal-green); margin-bottom: 10px;">${escapeHtml(log.message || '')}</div>
-                            <div>${optionsHtml}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'prompt_response') {
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-green);">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-green);">↪ Response: <strong style="color: var(--terminal-amber);">${escapeHtml(log.response || '')}</strong>${log.responded_by ? `<span style="color:#666;font-size:.85em;margin-left:10px;">by ${escapeHtml(log.responded_by)}</span>` : ''}</div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'step_skipped') {
-                return `
-                    <div class="log-entry" style="border-left-color: #555;">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: #666;">⊘ Step ${log.step} Skipped${log.reason ? ': ' + escapeHtml(log.reason) : ''}</div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'dry_run_skipped') {
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-amber);">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-amber);">🔍 [DRY RUN] Step ${log.step} Skipped: ${escapeHtml(log.step_name || '')}</div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'execution_timeout') {
-                return `
-                    <div class="log-entry failed">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">⏱️ Execution Timeout</div>
-                        <div class="log-details">
-                            <div class="log-field">${escapeHtml(log.message || 'Execution exceeded maximum allowed time')}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'goto_error') {
-                return `
-                    <div class="log-entry failed">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">✗ Goto Error</div>
-                        <div class="log-details">
-                            <div class="log-field"><span class="log-label">Target:</span> ${escapeHtml(String(log.target || ''))}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'step_error') {
-                return `
-                    <div class="log-entry failed">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">✗ Step ${log.step} Error: ${escapeHtml(log.step_name || '')}</div>
-                        <div class="log-details">
-                            <div class="log-field"><span class="log-label">Error:</span> ${escapeHtml(log.error || '')}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'workflow_result') {
-                const statusIcon = log.success ? '✓' : '✗';
-                const statusClass = log.success ? 'success' : 'failed';
-                return `
-                    <div class="log-entry ${statusClass}">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">${statusIcon} Workflow Result: ${log.success ? 'Success' : 'Failed'}</div>
-                        ${log.message ? `<div class="log-details"><div class="log-field">${escapeHtml(log.message)}</div></div>` : ''}
-                    </div>
-                `;
-            }
-
-            if (log.action === 'params') {
-                const paramStr = Object.entries(log.params || {}).map(([k, v]) => `${escapeHtml(k)}=${escapeHtml(String(v))}`).join(', ');
-                return `
-                    <div class="log-entry" style="border-left-color: #555;">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: #888;">⚙ Parameters: ${paramStr || '(none)'}</div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'server_restart_recovery') {
-                return `
-                    <div class="log-entry failed">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-red);">⚠️ Server Restart Recovery</div>
-                        <div class="log-details">
-                            <div class="log-field">${escapeHtml(log.message || 'Execution interrupted by server restart')}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            // Fallback for unknown log types
-            return `<div class="log-entry" style="border-left-color:#555;"><div class="log-timestamp">[${timestamp}]</div><div class="log-title" style="color:#666;">${escapeHtml(log.action || 'unknown')}</div></div>`;
-        }
-
-        function escapeHtml(text) {
-            if (text == null) return '';
-            const div = document.createElement('div');
-            div.textContent = String(text);
-            return div.innerHTML;
-        }
-
-        function formatBytes(bytes) {
-            if (!bytes || bytes === 0) return '0 B';
-            const k = 1024;
-            const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-            const i = Math.floor(Math.log(bytes) / Math.log(k));
-            return (bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i];
-        }
-
-        function formatUptime(seconds) {
-            if (!seconds) return 'N/A';
-            const days = Math.floor(seconds / 86400);
-            const hours = Math.floor((seconds % 86400) / 3600);
-            const minutes = Math.floor((seconds % 3600) / 60);
-            if (days > 0) return `${days}d ${hours}h ${minutes}m`;
-            if (hours > 0) return `${hours}h ${minutes}m`;
-            return `${minutes}m`;
-        }
-
-        function getTimeAgo(date) {
-            if (!date || isNaN(date)) return 'N/A';
-            const seconds = Math.floor((new Date() - date) / 1000);
-            if (seconds < 0) return 'just now';
-            if (seconds < 60) return `${seconds}s ago`;
-            const minutes = Math.floor(seconds / 60);
-            if (minutes < 60) return `${minutes}m ago`;
-            const hours = Math.floor(minutes / 60);
-            if (hours < 24) return `${hours}h ago`;
-            const days = Math.floor(hours / 24);
-            return `${days}d ago`;
-        }
-
-        function safeDate(val) {
-            if (!val) return null;
-            const d = new Date(val);
-            return isNaN(d) ? null : d;
-        }
-
-        function formatElapsed(startedAt) {
-            const start = safeDate(startedAt);
-            if (!start) return '';
-            const secs = Math.floor((Date.now() - start) / 1000);
-            if (secs < 60) return `${secs}s`;
-            const mins = Math.floor(secs / 60);
-            if (mins < 60) return `${mins}m ${secs % 60}s`;
-            return `${Math.floor(mins / 60)}h ${mins % 60}m`;
-        }
-
-        async function rerunCommand(command, workerId) {
-            if (!confirm(`Re-run command: ${command}?`)) return;
-
-            closeModal('viewExecutionModal');
-            switchTab('quickcommand');
-
-            // Set the worker and command
-            document.getElementById('quickWorkerSelect').value = workerId;
-            document.getElementById('quickCommand').value = command;
-
-            // Scroll to the command field
-            document.getElementById('quickCommand').scrollIntoView({ behavior: 'smooth' });
-        }
-
-        async function abortExecution(executionId) {
-            if (!confirm('Are you sure you want to abort this execution? This will mark it as failed.')) return;
-
-            try {
-                const response = await fetch(`/api/executions/${executionId}/abort`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' }
-                });
-
-                if (response.ok) {
-                    showTerminalNotification('Execution aborted', 'success');
-                    closeModal('viewExecutionModal');
-                    refreshData();
-                } else {
-                    const err = await response.json().catch(() => ({}));
-                    alert(err.error || 'Failed to abort execution');
-                }
-            } catch (error) {
-                console.error('Error aborting execution:', error);
-                alert('Error aborting execution');
-            }
-        }
-
-        async function downloadExecutionLogs(executionId) {
-            try {
-                const response = await fetch(`/api/executions/${executionId}`);
-                const execution = await response.json();
-
-                // Create downloadable JSON
-                const data = {
-                    execution_id: executionId,
-                    workflow_name: execution.workflow_name || '[Quick Command]',
-                    status: execution.status,
-                    started_by: execution.started_by,
-                    started_at: execution.started_at,
-                    completed_at: execution.completed_at,
-                    logs: execution.logs
-                };
-
-                // Create blob and download
-                const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = `execution-${executionId}-${new Date().toISOString().split('T')[0]}.json`;
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                URL.revokeObjectURL(url);
-            } catch (error) {
-                console.error('Error downloading logs:', error);
-                alert('Error downloading execution logs');
-            }
-        }
-
-        async function respondToPrompt(executionId, response) {
-            try {
-                const res = await fetch(`/api/executions/${executionId}/respond`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ response })
-                });
-
-                if (res.ok) {
-                    showTerminalNotification(`Response submitted: ${response}`, 'success');
-                    // Refresh the modal to show the next step
-                    viewExecution(executionId);
-                } else {
-                    const data = await res.json().catch(() => ({}));
-                    showTerminalNotification(data.error || 'Failed to submit response', 'error');
-                }
-            } catch (error) {
-                console.error('Error responding to prompt:', error);
-                showTerminalNotification('Error submitting response', 'error');
-            }
-        }
-
-        // Command Templates
-        const commandTemplates = [
-            { name: 'System Info', cmd: 'uname -a', desc: 'Show system information' },
-            { name: 'Uptime', cmd: 'uptime', desc: 'Show system uptime and load' },
-            { name: 'Disk Usage', cmd: 'df -h', desc: 'Show disk space usage' },
-            { name: 'Memory Usage', cmd: 'free -h', desc: 'Show memory usage' },
-            { name: 'CPU Info', cmd: 'lscpu', desc: 'Show CPU information' },
-            { name: 'Running Processes', cmd: 'ps aux --sort=-%mem | head -20', desc: 'Top 20 processes by memory' },
-            { name: 'Network Interfaces', cmd: 'ip addr show', desc: 'Show network interfaces' },
-            { name: 'Active Connections', cmd: 'ss -tunap', desc: 'Show active network connections' },
-            { name: 'Docker Containers', cmd: 'docker ps -a', desc: 'List all Docker containers' },
-            { name: 'System Log Tail', cmd: 'tail -n 50 /var/log/syslog', desc: 'Last 50 lines of system log' },
-            { name: 'Who is Logged In', cmd: 'w', desc: 'Show logged in users' },
-            { name: 'Last Logins', cmd: 'last -n 20', desc: 'Show last 20 logins' }
-        ];
-
-        function showCommandTemplates() {
-            const html = commandTemplates.map((template, index) => `
-                <div class="template-item" onclick="useTemplate(${index})" style="cursor: pointer; padding: 12px; margin: 8px 0; background: #001a00; border: 1px solid #003300; border-left: 3px solid var(--terminal-green);">
-                    <div style="color: var(--terminal-green); font-weight: bold; margin-bottom: 4px;">${template.name}</div>
-                    <div style="color: var(--terminal-amber); font-family: var(--font-mono); font-size: 0.9em; margin-bottom: 4px;"><code>${escapeHtml(template.cmd)}</code></div>
-                    <div style="color: #666; font-size: 0.85em;">${template.desc}</div>
-                </div>
-            `).join('');
-
-            document.getElementById('templateList').innerHTML = html;
-            document.getElementById('commandTemplatesModal').classList.add('show');
-        }
-
-        function useTemplate(index) {
-            document.getElementById('quickCommand').value = commandTemplates[index].cmd;
-            closeModal('commandTemplatesModal');
-        }
-
-        function showCommandHistory() {
-            const history = JSON.parse(localStorage.getItem('commandHistory') || '[]');
-
-            if (history.length === 0) {
-                document.getElementById('historyList').innerHTML = '<div class="empty">No command history yet</div>';
-            } else {
-                const html = history.map((item, index) => `
-                    <div class="history-item" onclick="useHistoryCommand(${index})" style="cursor: pointer; padding: 12px; margin: 8px 0; background: #001a00; border: 1px solid #003300; border-left: 3px solid var(--terminal-amber);">
-                        <div style="color: var(--terminal-green); font-family: var(--font-mono); margin-bottom: 4px;"><code>${escapeHtml(item.command)}</code></div>
-                        <div style="color: #666; font-size: 0.85em;">${safeDate(item.timestamp)?.toLocaleString() ?? 'N/A'} - ${item.worker}</div>
-                    </div>
-                `).join('');
-                document.getElementById('historyList').innerHTML = html;
-            }
-
-            document.getElementById('commandHistoryModal').classList.add('show');
-        }
-
-        function useHistoryCommand(index) {
-            const history = JSON.parse(localStorage.getItem('commandHistory') || '[]');
-            document.getElementById('quickCommand').value = history[index].command;
-            closeModal('commandHistoryModal');
-        }
-
-        function addToCommandHistory(command, workerName) {
-            const history = JSON.parse(localStorage.getItem('commandHistory') || '[]');
-
-            // Add to beginning, limit to 50 items
-            history.unshift({
-                command: command,
-                worker: workerName,
-                timestamp: new Date().toISOString()
-            });
-
-            // Keep only last 50 commands
-            if (history.length > 50) {
-                history.splice(50);
-            }
-
-            localStorage.setItem('commandHistory', JSON.stringify(history));
-        }
-
-        function toggleWorkerSelection() {
-            const mode = document.querySelector('input[name="execMode"]:checked').value;
-            const singleMode = document.getElementById('singleWorkerMode');
-            const multiMode = document.getElementById('multiWorkerMode');
-
-            if (mode === 'single') {
-                singleMode.style.display = 'block';
-                multiMode.style.display = 'none';
-            } else {
-                singleMode.style.display = 'none';
-                multiMode.style.display = 'block';
-            }
-        }
-
-        function selectAllWorkers() {
-            document.querySelectorAll('input[name="workerCheckbox"]').forEach(cb => {
-                cb.checked = true;
-            });
-        }
-
-        function selectOnlineWorkers() {
-            document.querySelectorAll('input[name="workerCheckbox"]').forEach(cb => {
-                cb.checked = cb.getAttribute('data-status') === 'online';
-            });
-        }
-
-        function deselectAllWorkers() {
-            document.querySelectorAll('input[name="workerCheckbox"]').forEach(cb => {
-                cb.checked = false;
-            });
-        }
-
-        async function deleteWorker(workerId, name) {
-            if (!confirm(`Delete worker: ${name}?`)) return;
-            
-            try {
-                const response = await fetch(`/api/workers/${workerId}`, {
-                    method: 'DELETE'
-                });
-                
-                if (response.ok) {
-                    alert('Worker deleted');
-                    refreshData();
-                } else {
-                    const data = await response.json();
-                    alert(data.error || 'Failed to delete worker');
-                }
-            } catch (error) {
-                console.error('Error deleting worker:', error);
-                alert('Error deleting worker');
-            }
-        }
-
-        async function deleteWorkflow(workflowId, name) {
-            if (!confirm(`Delete workflow: ${name}? This cannot be undone.`)) return;
-            
-            try {
-                const response = await fetch(`/api/workflows/${workflowId}`, {
-                    method: 'DELETE'
-                });
-                
-                if (response.ok) {
-                    alert('Workflow deleted');
-                    refreshData();
-                } else {
-                    const data = await response.json();
-                    alert(data.error || 'Failed to delete workflow');
-                }
-            } catch (error) {
-                console.error('Error deleting workflow:', error);
-                alert('Error deleting workflow');
-            }
-        }
-
-        async function editWorkflow(workflowId) {
-            try {
-                const response = await fetch(`/api/workflows/${workflowId}`);
-                if (!response.ok) throw new Error('Workflow not found');
-                const wf = await response.json();
-                document.getElementById('editWorkflowId').value = wf.id;
-                document.getElementById('editWorkflowName').value = wf.name;
-                document.getElementById('editWorkflowDescription').value = wf.description || '';
-                document.getElementById('editWorkflowDefinition').value = JSON.stringify(wf.definition, null, 2);
-                document.getElementById('editWorkflowWebhookUrl').value = wf.webhook_url || '';
-                document.getElementById('editWorkflowError').style.display = 'none';
-                document.getElementById('editWorkflowModal').classList.add('show');
-            } catch (error) {
-                console.error('Error loading workflow for edit:', error);
-                showTerminalNotification('Error loading workflow', 'error');
-            }
-        }
-
-        async function saveWorkflow() {
-            const id = document.getElementById('editWorkflowId').value;
-            const name = document.getElementById('editWorkflowName').value.trim();
-            const description = document.getElementById('editWorkflowDescription').value.trim();
-            const definitionText = document.getElementById('editWorkflowDefinition').value;
-            const webhook_url = document.getElementById('editWorkflowWebhookUrl').value.trim() || null;
-            const errorEl = document.getElementById('editWorkflowError');
-
-            if (!name) {
-                errorEl.textContent = 'Name is required';
-                errorEl.style.display = 'block';
-                return;
-            }
-
-            let definition;
-            try {
-                definition = JSON.parse(definitionText);
-            } catch (e) {
-                errorEl.textContent = 'Invalid JSON: ' + e.message;
-                errorEl.style.display = 'block';
-                return;
-            }
-            errorEl.style.display = 'none';
-
-            try {
-                const response = await fetch(`/api/workflows/${id}`, {
-                    method: 'PUT',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ name, description, definition, webhook_url })
-                });
-
-                if (response.ok) {
-                    closeModal('editWorkflowModal');
-                    showTerminalNotification('Workflow saved!', 'success');
-                    loadWorkflows();
-                } else {
-                    const data = await response.json().catch(() => ({}));
-                    errorEl.textContent = data.error || 'Failed to save workflow';
-                    errorEl.style.display = 'block';
-                }
-            } catch (error) {
-                errorEl.textContent = 'Error saving workflow: ' + error.message;
-                errorEl.style.display = 'block';
-            }
-        }
-
-        function showCreateWorkflow() {
-            document.getElementById('workflowName').value = '';
-            document.getElementById('workflowDescription').value = '';
-            document.getElementById('workflowDefinition').value = '';
-            document.getElementById('workflowWebhookUrl').value = '';
-            document.getElementById('createWorkflowModal').classList.add('show');
-        }
-
-        async function createWorkflow() {
-            const name = document.getElementById('workflowName').value;
-            const description = document.getElementById('workflowDescription').value;
-            const definitionText = document.getElementById('workflowDefinition').value;
-            const webhook_url = document.getElementById('workflowWebhookUrl').value.trim() || null;
-
-            if (!name || !definitionText) {
-                alert('Name and definition are required');
-                return;
-            }
-
-            let definition;
-            try {
-                definition = JSON.parse(definitionText);
-            } catch (error) {
-                alert('Invalid JSON definition: ' + error.message);
-                return;
-            }
-
-            try {
-                const response = await fetch('/api/workflows', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ name, description, definition, webhook_url })
-                });
-
-                if (response.ok) {
-                    closeModal('createWorkflowModal');
-                    switchTab('workflows');
-                    showTerminalNotification('Workflow created successfully!', 'success');
-                    refreshData();
-                } else {
-                    alert('Failed to create workflow');
-                }
-            } catch (error) {
-                alert('Error creating workflow: ' + error.message);
-            }
-        }
-
-        async function executeQuickCommand() {
-            const command = document.getElementById('quickCommand').value;
-            const execMode = document.querySelector('input[name="execMode"]:checked').value;
-
-            if (!command) {
-                alert('Please enter a command');
-                return;
-            }
-
-            const resultDiv = document.getElementById('quickCommandResult');
-
-            if (execMode === 'single') {
-                // Single worker execution
-                const workerId = document.getElementById('quickWorkerSelect').value;
-
-                if (!workerId) {
-                    alert('Please select a worker');
-                    return;
-                }
-
-                const worker = workers.find(w => w.id === workerId);
-                const workerName = worker ? worker.name : 'Unknown';
-
-                resultDiv.innerHTML = '<div class="loading">Executing command...</div>';
-
-                try {
-                    const response = await fetch(`/api/workers/${workerId}/command`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ command })
-                    });
-
-                    if (response.ok) {
-                        const data = await response.json();
-                        addToCommandHistory(command, workerName);
-
-                        resultDiv.innerHTML = `
-                            <div style="background: #001a00; border: 2px solid var(--terminal-green); padding: 15px;">
-                                <strong style="color: var(--terminal-green);">✓ Command sent successfully!</strong>
-                                <div style="margin-top: 10px; font-family: var(--font-mono); font-size: 0.9em; color: var(--terminal-green);">
-                                    Execution ID: ${escapeHtml(String(data.execution_id || ''))}
-                                </div>
-                                <div style="margin-top: 10px; color: var(--terminal-amber);">
-                                    Check the Executions tab to see the results
-                                </div>
-                            </div>
-                        `;
-                        terminalBeep('success');
-                    } else {
-                        resultDiv.innerHTML = '<div style="color: #ef4444;">Failed to execute command</div>';
-                        terminalBeep('error');
-                    }
-                } catch (error) {
-                    console.error('Error executing command:', error);
-                    resultDiv.innerHTML = '<div style="color: #ef4444;">Error: ' + error.message + '</div>';
-                    terminalBeep('error');
-                }
-            } else {
-                // Multi-worker execution
-                const selectedCheckboxes = document.querySelectorAll('input[name="workerCheckbox"]:checked');
-                const selectedWorkerIds = Array.from(selectedCheckboxes).map(cb => cb.value);
-
-                if (selectedWorkerIds.length === 0) {
-                    alert('Please select at least one worker');
-                    return;
-                }
-
-                resultDiv.innerHTML = `<div class="loading">Executing command on ${selectedWorkerIds.length} worker(s)...</div>`;
-
-                const results = [];
-                let successCount = 0;
-                let failCount = 0;
-
-                for (const workerId of selectedWorkerIds) {
-                    try {
-                        const worker = workers.find(w => w.id === workerId);
-                        const response = await fetch(`/api/workers/${workerId}/command`, {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ command })
-                        });
-
-                        if (response.ok) {
-                            const data = await response.json();
-                            results.push({
-                                worker: worker.name,
-                                success: true,
-                                executionId: data.execution_id
-                            });
-                            successCount++;
-                        } else {
-                            results.push({
-                                worker: worker.name,
-                                success: false,
-                                error: 'Failed to execute'
-                            });
-                            failCount++;
-                        }
-                    } catch (error) {
-                        const worker = workers.find(w => w.id === workerId);
-                        results.push({
-                            worker: worker ? worker.name : workerId,
-                            success: false,
-                            error: error.message
-                        });
-                        failCount++;
-                    }
-                }
-
-                // Add to history with multi-worker notation
-                addToCommandHistory(command, `${selectedWorkerIds.length} workers`);
-
-                // Display results summary
-                resultDiv.innerHTML = `
-                    <div style="background: #001a00; border: 2px solid var(--terminal-green); padding: 15px;">
-                        <strong style="color: var(--terminal-amber);">Multi-Worker Execution Complete</strong>
-                        <div style="margin-top: 10px; font-family: var(--font-mono); font-size: 0.9em;">
-                            <span style="color: var(--terminal-green);">✓ Success: ${successCount}</span> |
-                            <span style="color: #ef4444;">✗ Failed: ${failCount}</span>
-                        </div>
-                        <div style="margin-top: 15px; max-height: 300px; overflow-y: auto;">
-                            ${results.map(r => `
-                                <div style="margin-bottom: 8px; padding: 8px; border-left: 3px solid ${r.success ? 'var(--terminal-green)' : '#ef4444'}; background: rgba(0, 0, 0, 0.5);">
-                                    <strong>${r.worker}</strong>:
-                                    ${r.success ?
-                                        `<span style="color: var(--terminal-green);">✓ Sent (ID: ${r.executionId.substring(0, 8)}...)</span>` :
-                                        `<span style="color: #ef4444;">✗ ${r.error}</span>`
-                                    }
-                                </div>
-                            `).join('')}
-                        </div>
-                        <div style="margin-top: 15px; color: var(--terminal-amber);">
-                            Check the Executions tab to see detailed results
-                        </div>
-                    </div>
-                `;
-
-                if (failCount === 0) {
-                    terminalBeep('success');
-                } else if (successCount > 0) {
-                    terminalBeep('info');
-                } else {
-                    terminalBeep('error');
-                }
-            }
-        }
-
-        function closeModal(modalId) {
-            document.getElementById(modalId).classList.remove('show');
-        }
-
-        function switchTab(tabName) {
-            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
-
-            const tabBtn = document.querySelector(`.tab[onclick*="'${tabName}'"]`);
-            if (tabBtn) tabBtn.classList.add('active');
-            const tabContent = document.getElementById(tabName);
-            if (tabContent) tabContent.classList.add('active');
-
-            // Persist active tab across page loads
-            try { localStorage.setItem('pulse_activeTab', tabName); } catch {}
-        }
-
-        async function refreshData() {
-            try { await loadWorkers(); } catch (e) { console.error('Error loading workers:', e); }
-            try { await loadWorkflows(); } catch (e) { console.error('Error loading workflows:', e); }
-            try { await loadExecutions(); } catch (e) { console.error('Error loading executions:', e); }
-            try { await loadSchedules(); } catch (e) { console.error('Error loading schedules:', e); }
-
-            // Update "last refreshed" indicator
-            const el = document.getElementById('lastRefreshed');
-            if (el) el.textContent = `Refreshed: ${new Date().toLocaleTimeString()}`;
-        }
-
-        // Terminal beep sound (Web Audio API)
-        function terminalBeep(type = 'success') {
-            try {
-                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                const oscillator = audioContext.createOscillator();
-                const gainNode = audioContext.createGain();
-
-                oscillator.connect(gainNode);
-                gainNode.connect(audioContext.destination);
-
-                // Different tones for different events
-                if (type === 'success') {
-                    oscillator.frequency.value = 800;  // Higher pitch for success
-                } else if (type === 'error') {
-                    oscillator.frequency.value = 200;  // Lower pitch for errors
-                } else {
-                    oscillator.frequency.value = 440;  // Standard A note
-                }
-
-                oscillator.type = 'sine';
-                gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
-                gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
-
-                oscillator.start(audioContext.currentTime);
-                oscillator.stop(audioContext.currentTime + 0.1);
-            } catch (error) {
-                // Silently fail if Web Audio API not supported
-            }
-        }
-
-        // Show terminal notification — delegates to lt.toast from base.js
-        function showTerminalNotification(message, type = 'info') {
-            if (type === 'success') return lt.toast.success(message);
-            if (type === 'error')   return lt.toast.error(message);
-            if (type === 'warning') return lt.toast.warning(message);
-            return lt.toast.info(message);
-        }
-
-        function connectWebSocket() {
-            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            ws = new WebSocket(`${protocol}//${window.location.host}`);
-
-            ws.onmessage = (event) => {
-                try {
-                    const data = JSON.parse(event.data);
-
-                // Handle specific message types
-                if (data.type === 'command_result') {
-                    // Show terminal notification only for manual executions
-                    if (!data.is_automated) {
-                        if (data.success) {
-                            showTerminalNotification('Command completed successfully', 'success');
-                        } else {
-                            showTerminalNotification('Command execution failed', 'error');
-                        }
-                    }
-
-                    // If viewing execution details, refresh that specific execution
-                    const executionModal = document.getElementById('viewExecutionModal');
-                    if (executionModal && executionModal.classList.contains('show')) {
-                        // Reload execution details to show new logs
-                        const executionId = executionModal.dataset.executionId;
-                        if (executionId === data.execution_id) {
-                            viewExecution(executionId);
-                        }
-                    }
-
-                    // Refresh execution list to show updated status
-                    loadExecutions();
-                }
-
-                if (data.type === 'workflow_result') {
-
-                    // Refresh execution list
-                    loadExecutions();
-
-                    // If viewing this execution, refresh details
-                    const executionModal = document.getElementById('viewExecutionModal');
-                    if (executionModal && executionModal.classList.contains('show')) {
-                        const executionId = executionModal.dataset.executionId;
-                        if (executionId === data.execution_id) {
-                            viewExecution(executionId);
-                        }
-                    }
-                }
-
-                if (data.type === 'worker_update') {
-                    loadWorkers();
-                }
-
-                if (data.type === 'execution_started' || data.type === 'execution_status') {
-                    loadExecutions();
-                }
-
-                if (data.type === 'workflow_created' || data.type === 'workflow_deleted') {
-                    loadWorkflows();
-                }
-
-                if (data.type === 'workflow_updated') {
-                    loadWorkflows();
-                }
-
-                if (data.type === 'execution_prompt') {
-                    // If this execution is currently open, refresh to show the prompt
-                    const executionModal = document.getElementById('viewExecutionModal');
-                    if (executionModal && executionModal.classList.contains('show')) {
-                        const currentId = executionModal.dataset.executionId;
-                        if (currentId === data.execution_id) {
-                            viewExecution(data.execution_id);
-                        }
-                    }
-                    // Also update execution list so status indicators refresh
-                    loadExecutions();
-                }
-
-                if (data.type === 'executions_bulk_deleted') {
-                    loadExecutions();
-                }
-
-                    // Generic refresh for other message types
-                    if (!['command_result', 'workflow_result', 'worker_update', 'execution_started', 'execution_status', 'workflow_created', 'workflow_deleted', 'workflow_updated', 'execution_prompt', 'executions_bulk_deleted'].includes(data.type)) {
-                        refreshData();
-                    }
-                } catch (error) {
-                    console.error('Error handling WebSocket message:', error);
-                    console.error('Stack trace:', error.stack);
-                }
-            };
-
-            ws.onclose = () => {
-                console.log('WebSocket closed, reconnecting...');
-                setTimeout(connectWebSocket, 5000);
-            };
-
-            ws.onerror = (error) => {
-                console.error('[WebSocket] Connection error:', error);
-            };
-        }
-
-        // Close any open modal on ESC key
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
-                document.querySelectorAll('.modal.show').forEach(modal => {
-                    modal.classList.remove('show');
-                });
-            }
-        });
-
-        // Initialize
-        loadUser().then((success) => {
-            if (success) {
-                // Restore last-active tab
-                try {
-                    const saved = localStorage.getItem('pulse_activeTab');
-                    if (saved) switchTab(saved);
-                } catch {}
-
-                setExecutionView(executionView);
-                refreshData();
-                connectWebSocket();
-                setInterval(refreshData, 30000);
-            }
-        });
-
-        // Ctrl+Enter submits the quick command form
-        document.addEventListener('keydown', (e) => {
-            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-                const activeTab = document.querySelector('.tab-content.active');
-                if (activeTab && activeTab.id === 'quickcommand') {
-                    e.preventDefault();
-                    executeQuickCommand();
-                }
-            }
-        });
-    </script>
-
-    <!-- Terminal Boot Sequence -->
-    <div id="boot-sequence" class="boot-overlay" style="display: none;">
-        <pre id="boot-text"></pre>
-    </div>
-    <script>
-    function showBootSequence() {
-        const bootText = document.getElementById('boot-text');
-        const bootOverlay = document.getElementById('boot-sequence');
-        bootOverlay.style.display = 'flex';
-
-        const messages = [
-            '╔═══════════════════════════════════════╗',
-            '║   PULSE ORCHESTRATION TERMINAL v1.0  ║',
-            '║   BOOTING SYSTEM...                  ║',
-            '╚═══════════════════════════════════════╝',
-            '',
-            '[ OK ] Loading kernel modules...',
-            '[ OK ] Initializing workflow engine...',
-            '[ OK ] Mounting worker connections...',
-            '[ OK ] Starting WebSocket services...',
-            '[ OK ] Rendering terminal interface...',
-            '',
-            '> SYSTEM READY ✓',
-            ''
-        ];
-
-        let i = 0;
-        const interval = setInterval(() => {
-            if (i < messages.length) {
-                bootText.textContent += messages[i] + '\n';
-                i++;
-            } else {
-                setTimeout(() => {
-                    bootOverlay.style.opacity = '0';
-                    setTimeout(() => {
-                        bootOverlay.style.display = 'none';
-                    }, 500);
-                }, 500);
-                clearInterval(interval);
-            }
-        }, 80);
-    }
-
-    // Run on first visit only (per session)
-    if (!sessionStorage.getItem('booted')) {
-        showBootSequence();
-        sessionStorage.setItem('booted', 'true');
-    }
-    </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/public/web_template/VERSION b/public/web_template/VERSION
new file mode 100644
index 0000000..68c13e8
--- /dev/null
+++ b/public/web_template/VERSION
@@ -0,0 +1 @@
+v1.2 bbec859 2026-09-09T01:34:49Z
diff --git a/public/web_template/base.css b/public/web_template/base.css
new file mode 100644
index 0000000..c606d1a
--- /dev/null
+++ b/public/web_template/base.css
@@ -0,0 +1,5817 @@
+/* ================================================================
+   LOTUSGUILD TERMINAL DESIGN SYSTEM v1.2 — base.css
+   Aesthetic: Anduril x Hacker Terminal — dark military-tech,
+              multi-accent neon, angular frames, glitch effects.
+
+   Apps:    Tinker Tickets (PHP), PULSE (Node.js), GANDALF (Flask)
+   Prefix:  .lt-* (LotusGuild Terminal)
+
+   TABLE OF CONTENTS
+   01. CSS Custom Properties      27. Progress Bars
+   02. Reset & Base               28. Tooltips
+   03. CRT / Grid / Scanline      29. Breadcrumbs
+   04. Typography                 30. Pagination
+   05. Layout Primitives          31. Accordion
+   06. Header & Navigation        32. Alert Banners
+   07. ASCII Frame System         33. Toggle Switch
+   08. Card Component             34. Range Slider
+   09. Buttons                    35. File Upload / Dropzone
+   10. Forms & Inputs             36. Command Palette
+   11. Tables                     37. Code Blocks
+   12. Status Badges / Chips      38. Tags / Chips
+   13. Modals                     39. Notification Badges
+   14. Toast Notifications        40. Stepper / Wizard
+   15. Tab Navigation             41. List Groups
+   16. Sidebar / Filter Panel     42. Key-Value Pairs
+   17. Stats Widgets              43. Hero / Banner
+   18. Inline Messages            44. Divider with Label
+   19. Loading & Empty States     45. Custom Scrollbar
+   20. Boot Sequence Overlay      46. Responsive Table Cards
+   21. Log / Timeline Entries     47. Gauge / Meter
+   22. Animations (keyframes)     48. Spinners / Loaders
+   23. Responsive Design          49. Tab Bar
+   24. Utility Classes            50. Utility Additions
+   25. Print Styles
+   26. Accessibility
+   ================================================================ */
+
+/* ----------------------------------------------------------------
+   01. CSS CUSTOM PROPERTIES
+   ---------------------------------------------------------------- */
+:root {
+  /* --- Backgrounds --- */
+  --bg-primary:   #030508;
+  --bg-secondary: #060c14;
+  --bg-tertiary:  #0d1520;
+  --bg-card:      #07101a;
+  --bg-terminal:  #010304;
+  --bg-overlay:   rgba(3,5,8,0.94);
+
+  /* --- Primary accent: Anduril Orange --- */
+  --accent-orange:        #FF6B00;
+  --accent-orange-bright: #FF8C2B;
+  --accent-orange-dim:    rgba(255,107,0,0.12);
+  --accent-orange-border: rgba(255,107,0,0.35);
+  --accent-amber:         #FFB300;
+  --accent-amber-dim:     rgba(255,179,0,0.10);
+
+  /* --- Secondary accent: Ice Cyan --- */
+  --accent-cyan:        #00D4FF;
+  --accent-cyan-bright: #33DFFF;
+  --accent-cyan-dim:    rgba(0,212,255,0.10);
+  --accent-cyan-border: rgba(0,212,255,0.22);
+
+  /* --- Tertiary accent: Matrix Green --- */
+  --accent-green:        #00FF88;
+  --accent-green-bright: #33FFAA;
+  --accent-green-dim:    rgba(0,255,136,0.10);
+  --accent-green-border: rgba(0,255,136,0.22);
+  --shadow-color:        rgba(0,0,0,0.5);
+
+  /* --- Error / Critical --- */
+  --accent-red:     #FF2D55;
+  --accent-red-dim: rgba(255,45,85,0.12);
+
+  /* --- Warning --- */
+  --accent-gold:     #FFD700;
+  --accent-gold-dim: rgba(255,215,0,0.10);
+
+  /* --- Purple (admin / misc) --- */
+  --accent-purple:     #BF5FFF;
+  --accent-purple-dim: rgba(191,95,255,0.10);
+
+  /* Legacy aliases — keeps all existing component HTML working */
+  --terminal-green:       var(--accent-green);
+  --terminal-green-dim:   var(--accent-green-dim);
+  --terminal-green-dark:  #00cc66;
+  --terminal-green-muted: #007744;
+  --terminal-amber:       var(--accent-amber);
+  --terminal-amber-dim:   var(--accent-amber-dim);
+  --terminal-cyan:        var(--accent-cyan);
+  --terminal-cyan-dim:    var(--accent-cyan-dim);
+  --terminal-red:         var(--accent-red);
+  --terminal-red-dim:     var(--accent-red-dim);
+  --terminal-orange:      var(--accent-orange);
+  --terminal-orange-dim:  var(--accent-orange-dim);
+
+  /* --- Text --- */
+  --text-primary:   #c4d9ee;
+  --text-secondary: #7fa3bf;
+  --text-muted:     #3e607a;
+  --text-dim:       #1e3347;
+
+  /* --- Borders --- */
+  --border-color:     rgba(0,212,255,0.16);
+  --border-color-hi:  var(--accent-cyan);
+  --border-color-dim: rgba(0,212,255,0.07);
+  --border-dim:       rgba(0,212,255,0.07); /* alias for v1.2+ components */
+  --border-orange:    var(--accent-orange-border);
+
+  /* --- Workflow / status colours --- */
+  --status-open:        var(--accent-green);
+  --status-pending:     var(--accent-purple);
+  --status-in-progress: var(--accent-amber);
+  --status-closed:      var(--accent-red);
+  --status-online:      var(--accent-green);
+  --status-offline:     var(--accent-red);
+  --status-running:     var(--accent-amber);
+  --status-completed:   var(--accent-cyan);
+  --status-failed:      var(--accent-red);
+  --status-waiting:     var(--accent-gold);
+
+  /* --- Priority colours --- */
+  --priority-1: #FF2D55;
+  --priority-2: #FF6B00;
+  --priority-3: #00D4FF;
+  --priority-4: #00FF88;
+  --priority-5: #3e607a;
+
+  /* --- Glow: text-shadow stacks --- */
+  --glow-orange:         0 0 6px #FF6B00, 0 0 16px rgba(255,107,0,0.55);
+  --glow-orange-intense: 0 0 8px #FF6B00, 0 0 22px #FF6B00, 0 0 40px rgba(255,107,0,0.45);
+  --glow-cyan:           0 0 6px #00D4FF, 0 0 16px rgba(0,212,255,0.45);
+  --glow-cyan-intense:   0 0 8px #00D4FF, 0 0 22px #00D4FF, 0 0 38px rgba(0,212,255,0.35);
+  --glow-green:          0 0 6px #00FF88, 0 0 16px rgba(0,255,136,0.45);
+  --glow-green-intense:  0 0 8px #00FF88, 0 0 22px #00FF88, 0 0 36px rgba(0,255,136,0.35);
+  --glow-amber:          0 0 6px #FFB300, 0 0 14px rgba(255,179,0,0.40);
+  --glow-amber-intense:  0 0 8px #FFB300, 0 0 20px #FFB300, 0 0 34px rgba(255,179,0,0.45);
+  --glow-red:            0 0 6px #FF2D55, 0 0 16px rgba(255,45,85,0.45);
+
+  /* --- Glow: box-shadow halos --- */
+  --box-glow-orange: 0 0 18px rgba(255,107,0,0.22),  0 0 36px rgba(255,107,0,0.08);
+  --box-glow-cyan:   0 0 18px rgba(0,212,255,0.18),   0 0 36px rgba(0,212,255,0.06);
+  --box-glow-green:  0 0 18px rgba(0,255,136,0.18),   0 0 36px rgba(0,255,136,0.06);
+  --box-glow-red:    0 0 18px rgba(255,45,85,0.22),   0 0 36px rgba(255,45,85,0.08);
+  --box-glow-amber:  0 0 18px rgba(255,179,0,0.18),   0 0 36px rgba(255,179,0,0.06);
+
+  /* --- Typography --- */
+  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
+  --font-display: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
+  --font-crt:     'VT323', 'Courier New', monospace;
+
+  /* --- Spacing --- */
+  --space-xs:  0.25rem;
+  --space-sm:  0.5rem;
+  --space-md:  1rem;
+  --space-lg:  1.5rem;
+  --space-xl:  2rem;
+  --space-2xl: 3rem;
+
+  /* --- Layout --- */
+  --sidebar-width:    240px;
+  --sidebar-width-sm: 200px;
+  --header-height:    56px;
+  --container-max:    1600px;
+
+  /* --- Transitions --- */
+  --transition-fast:    all 0.12s ease;
+  --transition-default: all 0.25s ease;
+
+  /* --- Z-index ladder --- */
+  --z-base:           1;
+  --z-dropdown:       100;
+  --z-sticky:         200;
+  --z-fixed:          300;
+  --z-modal-backdrop: 10010; /* above nav drawer (10002) so modals always accessible */
+  --z-modal:          10011;
+  --z-popover:        10012;
+  --z-tooltip:        10013;
+  --z-toast:          10014;
+  --z-panel:          10020; /* notification / generic dropdown panels — above everything */
+  --z-overlay:        9999;  /* scanlines / CRT effects */
+
+  /* --- Corner cuts (clip-path polygon notches) --- */
+  --corner-cut:    8px;
+  --corner-cut-sm: 5px;
+  --corner-cut-lg: 16px;
+
+  /* --- Syntax highlight --- */
+  --color-tok-cmt: #5c8c6a;
+}
+
+
+/* ----------------------------------------------------------------
+   02. RESET & BASE
+   ---------------------------------------------------------------- */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 14px;
+  scroll-behavior: smooth;
+  /* Dot-grid tactical background */
+  background-color: var(--bg-primary);
+  background-image:
+    radial-gradient(circle, rgba(0,212,255,0.055) 1px, transparent 1px);
+  background-size: 28px 28px;
+}
+
+body {
+  background-color: transparent;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 1.65;
+  min-height: 100vh;
+  overflow-x: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+a {
+  color: var(--accent-cyan);
+  text-decoration: none;
+  transition: var(--transition-fast);
+}
+a:hover {
+  color: var(--accent-orange);
+  text-shadow: var(--glow-orange);
+}
+a:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 2px;
+}
+
+ul, ol  { list-style: none; }
+img, svg { display: block; max-width: 100%; }
+button  { cursor: pointer; font-family: var(--font-mono); }
+
+
+/* ----------------------------------------------------------------
+   03. CRT / GRID / SCANLINE EFFECTS
+   ---------------------------------------------------------------- */
+
+/* Horizontal scanlines — fixed, non-interactive overlay */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(0,0,0,0.07) 0px,
+    rgba(0,0,0,0.07) 1px,
+    transparent 1px,
+    transparent 3px
+  );
+  pointer-events: none;
+  z-index: var(--z-overlay);
+}
+
+/* Corner vignette */
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: radial-gradient(
+    ellipse at center,
+    transparent 55%,
+    rgba(0,0,0,0.60) 100%
+  );
+  pointer-events: none;
+  z-index: calc(var(--z-overlay) - 1);
+}
+
+
+/* ----------------------------------------------------------------
+   04. TYPOGRAPHY
+   ---------------------------------------------------------------- */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.10em;
+  line-height: 1.25;
+}
+
+h1 {
+  font-size: 1.5rem;
+  color: var(--accent-orange);
+  text-shadow: var(--glow-orange-intense);
+}
+h1::before { content: '>> '; color: var(--accent-cyan); text-shadow: var(--glow-cyan); }
+
+h2 {
+  font-size: 1.15rem;
+  color: var(--accent-orange);
+  text-shadow: var(--glow-orange);
+}
+h2::before { content: '> '; color: var(--accent-cyan); opacity: 0.65; }
+
+h3 {
+  font-size: 0.95rem;
+  color: var(--accent-cyan);
+  text-shadow: var(--glow-cyan);
+}
+
+h4 {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+}
+
+p { margin-bottom: var(--space-md); }
+p:last-child { margin-bottom: 0; }
+
+code, pre {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  background: var(--bg-terminal);
+  border: 1px solid var(--border-color);
+  color: var(--accent-green);
+}
+
+code {
+  padding: 0.1em 0.35em;
+}
+
+pre {
+  padding: var(--space-md);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  border-left: 2px solid var(--accent-green);
+  text-shadow: var(--glow-green);
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--border-color-dim);
+  margin: var(--space-lg) 0;
+}
+
+
+/* ----------------------------------------------------------------
+   05. LAYOUT PRIMITIVES
+   ---------------------------------------------------------------- */
+.lt-container {
+  max-width: var(--container-max);
+  margin: 0 auto;
+  padding: var(--space-lg) var(--space-xl);
+}
+
+.lt-main {
+  padding-top: calc(var(--header-height) + var(--space-lg));
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+}
+/* When both lt-main and lt-container are on the same element, the lt-container
+   shorthand `padding` overrides the lt-main `padding-top` in responsive breakpoints
+   (same cascade specificity, later rule wins). The combined selector has higher
+   specificity (0,2,0 vs 0,1,0) and always wins regardless of source order. */
+.lt-main.lt-container {
+  padding-top: calc(var(--header-height) + var(--space-lg));
+}
+
+.lt-layout {
+  display: flex;
+  gap: var(--space-lg);
+  align-items: flex-start;
+}
+
+.lt-content { flex: 1; min-width: 0; }
+
+.lt-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-lg); }
+.lt-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-lg); }
+.lt-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-lg); }
+
+.lt-flex         { display: flex; align-items: center; }
+.lt-flex-between { display: flex; align-items: center; justify-content: space-between; }
+.lt-flex-center  { display: flex; align-items: center; justify-content: center; }
+.lt-flex-col     { display: flex; flex-direction: column; }
+.lt-flex-wrap    { flex-wrap: wrap; }
+
+.lt-gap-sm { gap: var(--space-sm); }
+.lt-gap-md { gap: var(--space-md); }
+.lt-gap-lg { gap: var(--space-lg); }
+
+.lt-mt-sm  { margin-top: var(--space-sm); }
+.lt-mt-md  { margin-top: var(--space-md); }
+.lt-mb-sm  { margin-bottom: var(--space-sm); }
+.lt-mb-md  { margin-bottom: var(--space-md); }
+.lt-p-md   { padding: var(--space-md); }
+
+.lt-divider {
+  border: none;
+  border-top: 1px solid var(--border-color-dim);
+  margin: var(--space-xl) 0;
+}
+
+
+/* ----------------------------------------------------------------
+   06. HEADER & NAVIGATION
+   ---------------------------------------------------------------- */
+.lt-header {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  height: var(--header-height);
+  background: rgba(3,5,8,0.96);
+  backdrop-filter: blur(14px);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-xl);
+  z-index: var(--z-fixed);
+  box-shadow: 0 4px 32px rgba(0,0,0,0.7);
+}
+
+/* Gradient rule along bottom edge */
+.lt-header::after {
+  content: '';
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--accent-cyan) 20%,
+    var(--accent-orange) 50%,
+    var(--accent-cyan) 80%,
+    transparent 100%
+  );
+  opacity: 0.55;
+}
+
+.lt-header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xl);
+}
+
+.lt-header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+/* Brand */
+.lt-brand { display: flex; flex-direction: column; line-height: 1.1; }
+
+.lt-brand-title {
+  font-size: 1rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--accent-orange);
+  text-shadow: var(--glow-orange);
+}
+.lt-brand-title::before { content: '[ '; color: var(--accent-cyan); text-shadow: var(--glow-cyan); }
+.lt-brand-title::after  { content: ' ]'; color: var(--accent-cyan); text-shadow: var(--glow-cyan); }
+
+.lt-brand-subtitle {
+  font-size: 0.58rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.22em;
+}
+
+/* Nav links */
+.lt-nav {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.lt-nav-link {
+  display: inline-block;
+  padding: 0.35rem 0.8rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.13em;
+  color: var(--text-secondary);
+  border: 1px solid transparent;
+  transition: var(--transition-fast);
+  position: relative;
+}
+
+.lt-nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 50%; right: 50%;
+  height: 1px;
+  background: var(--accent-cyan);
+  transition: var(--transition-fast);
+}
+
+.lt-nav-link:hover {
+  color: var(--accent-cyan);
+  text-shadow: var(--glow-cyan);
+  border-color: var(--accent-cyan-border);
+  background: var(--accent-cyan-dim);
+}
+.lt-nav-link:hover::after { left: 0; right: 0; box-shadow: var(--glow-cyan); }
+.lt-nav-link:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; color: var(--accent-cyan); }
+
+.lt-nav-link.active {
+  color: var(--accent-orange);
+  text-shadow: var(--glow-orange);
+  border-color: var(--accent-orange-border);
+  background: var(--accent-orange-dim);
+}
+.lt-nav-link.active::after {
+  left: 0; right: 0;
+  background: var(--accent-orange);
+  box-shadow: var(--glow-orange);
+}
+
+/* Dropdown */
+.lt-nav-dropdown { position: relative; }
+
+.lt-nav-dropdown-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 180px;
+  background: rgba(6,12,20,0.98);
+  border: 1px solid var(--accent-cyan-border);
+  box-shadow: var(--box-glow-cyan), 0 16px 40px rgba(0,0,0,0.8);
+  z-index: var(--z-dropdown);
+  /* Invisible bridge above the menu so moving the cursor down from the
+     trigger into the menu doesn't cross a hover-dead gap */
+  padding-top: 6px;
+  margin-top: -2px;
+}
+.lt-nav-dropdown-menu::before {
+  content: '';
+  position: absolute;
+  top: 6px; left: 0; right: 0;
+  height: 1px;
+  background: var(--accent-cyan);
+  box-shadow: var(--glow-cyan);
+}
+
+.lt-nav-dropdown:hover .lt-nav-dropdown-menu { display: block; }
+
+.lt-nav-dropdown-menu li a {
+  display: block;
+  padding: 0.5rem 0.9rem;
+  font-size: 0.7rem;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-color-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.09em;
+  transition: var(--transition-fast);
+}
+.lt-nav-dropdown-menu li:last-child a { border-bottom: none; }
+.lt-nav-dropdown-menu li a:hover {
+  color: var(--accent-orange);
+  background: var(--accent-orange-dim);
+  text-shadow: var(--glow-orange);
+  padding-left: 1.1rem;
+}
+.lt-nav-dropdown-menu li a:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: -2px;
+  color: var(--accent-cyan);
+}
+
+/* Header user + admin badge */
+.lt-header-user {
+  font-size: 0.7rem;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.11em;
+}
+.lt-header-user::before {
+  content: 'OP: ';
+  color: var(--accent-green);
+  text-shadow: var(--glow-green);
+  font-size: 0.62rem;
+}
+
+.lt-badge-admin {
+  font-size: 0.58rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  padding: 0.15rem 0.5rem;
+  color: var(--accent-purple);
+  border: 1px solid rgba(191,95,255,0.45);
+  background: rgba(191,95,255,0.08);
+  text-shadow: 0 0 6px var(--accent-purple);
+  box-shadow: 0 0 10px rgba(191,95,255,0.18);
+}
+
+/* Page header row */
+.lt-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-lg);
+  padding-bottom: var(--space-md);
+  border-bottom: 1px solid var(--border-color-dim);
+}
+
+.lt-page-title {
+  font-size: 1.3rem;
+  color: var(--accent-orange);
+  text-shadow: var(--glow-orange-intense);
+  text-transform: uppercase;
+  letter-spacing: 0.13em;
+}
+.lt-page-title::before {
+  content: '// ';
+  color: var(--accent-cyan);
+  text-shadow: var(--glow-cyan);
+}
+
+
+/* ----------------------------------------------------------------
+   07. ASCII FRAME SYSTEM
+   ---------------------------------------------------------------- */
+.lt-frame {
+  position: relative;
+  border: 1px solid var(--border-color);
+  background: var(--bg-card);
+  margin-bottom: var(--space-lg);
+  clip-path: polygon(
+    0 0,
+    calc(100% - 14px) 0,
+    100% 14px,
+    100% 100%,
+    14px 100%,
+    0 calc(100% - 14px)
+  );
+}
+
+/* Top-right corner pip */
+.lt-frame::before {
+  content: '◈';
+  position: absolute;
+  top: -1px; right: 3px;
+  font-size: 0.52rem;
+  color: var(--accent-orange);
+  text-shadow: var(--glow-orange);
+  line-height: 1;
+  pointer-events: none;
+}
+
+.lt-frame-bl,
+.lt-frame-br {
+  position: absolute;
+  bottom: 4px;
+  font-size: 0.65rem;
+  color: var(--accent-cyan);
+  text-shadow: var(--glow-cyan);
+  line-height: 1;
+  pointer-events: none;
+}
+.lt-frame-bl { left: 6px; }
+.lt-frame-br { right: 6px; }
+
+.lt-section-header {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.20em;
+  color: var(--accent-orange);
+  text-shadow: var(--glow-orange);
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+  background: rgba(255,107,0,0.05);
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+.lt-section-header::before {
+  content: '▸';
+  color: var(--accent-cyan);
+  text-shadow: var(--glow-cyan);
+}
+
+/* Right padding accounts for the 14px clip-path corner cut on .lt-frame */
+.lt-section-body { padding: var(--space-md); padding-right: 22px; }
+
+/* Inner / nested frame */
+.lt-frame-inner {
+  border: 1px solid var(--border-color-dim);
+  margin: var(--space-md);
+  background: rgba(0,212,255,0.018);
+}
+
+.lt-subsection-header {
+  font-size: 0.63rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--accent-cyan);
+  text-shadow: var(--glow-cyan);
+  padding: 0.4rem 0.9rem;
+  border-bottom: 1px solid var(--border-color-dim);
+  background: rgba(0,212,255,0.03);
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+.lt-subsection-header::before {
+  content: '◦';
+  color: var(--accent-cyan);
+  opacity: 0.55;
+}
+
+
+/* ----------------------------------------------------------------
+   08. CARD COMPONENT
+   ---------------------------------------------------------------- */
+.lt-card {
+  position: relative;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  padding: var(--space-md);
+  transition: var(--transition-fast);
+  clip-path: polygon(
+    0 0,
+    calc(100% - 10px) 0,
+    100% 10px,
+    100% 100%,
+    0 100%
+  );
+}
+
+/* Corner accent — top-right triangle */
+.lt-card::before {
+  content: '';
+  position: absolute;
+  top: 0; right: 0;
+  width: 0; height: 0;
+  border-style: solid;
+  border-width: 0 10px 10px 0;
+  border-color: transparent var(--accent-cyan) transparent transparent;
+  opacity: 0.4;
+  transition: var(--transition-fast);
+}
+
+.lt-card:hover {
+  border-color: var(--accent-cyan-border);
+  background: var(--bg-tertiary);
+  box-shadow: var(--box-glow-cyan);
+}
+.lt-card:hover::before {
+  opacity: 1;
+  border-right-color: var(--accent-orange);
+}
+
+
+/* ----------------------------------------------------------------
+   09. BUTTONS
+   ---------------------------------------------------------------- */
+.lt-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: 0.4rem 0.9rem;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--accent-cyan);
+  background: transparent;
+  border: 1px solid var(--accent-cyan-border);
+  transition: var(--transition-fast);
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  position: relative;
+  clip-path: polygon(
+    0 0,
+    calc(100% - 7px) 0,
+    100% 7px,
+    100% 100%,
+    7px 100%,
+    0 calc(100% - 7px)
+  );
+}
+
+.lt-btn:hover {
+  color: var(--accent-cyan-bright);
+  border-color: var(--accent-cyan);
+  background: var(--accent-cyan-dim);
+  box-shadow: var(--box-glow-cyan);
+  text-shadow: var(--glow-cyan);
+  text-decoration: none;
+}
+
+.lt-btn:active { transform: translateY(1px); }
+
+.lt-btn:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 2px;
+  box-shadow: var(--box-glow-cyan);
+}
+
+.lt-btn:disabled,
+.lt-btn[disabled] {
+  opacity: 0.30;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Primary — orange */
+.lt-btn-primary {
+  color: var(--accent-orange);
+  border-color: var(--accent-orange-border);
+}
+.lt-btn-primary:hover {
+  color: var(--accent-orange-bright);
+  border-color: var(--accent-orange);
+  background: var(--accent-orange-dim);
+  box-shadow: var(--box-glow-orange);
+  text-shadow: var(--glow-orange);
+}
+
+/* Danger — red */
+.lt-btn-danger {
+  color: var(--accent-red);
+  border-color: rgba(255,45,85,0.32);
+}
+.lt-btn-danger:hover {
+  border-color: var(--accent-red);
+  background: var(--accent-red-dim);
+  box-shadow: var(--box-glow-red);
+  text-shadow: var(--glow-red);
+}
+
+/* Ghost — minimal */
+.lt-btn-ghost {
+  color: var(--text-muted);
+  border-color: var(--border-color-dim);
+  clip-path: none;
+}
+.lt-btn-ghost:hover {
+  color: var(--text-secondary);
+  border-color: var(--border-color);
+  background: rgba(196,217,238,0.03);
+  box-shadow: none;
+  text-shadow: none;
+}
+
+/* Small */
+.lt-btn-sm {
+  padding: 0.22rem 0.6rem;
+  font-size: 0.62rem;
+}
+
+.lt-btn-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+
+/* ----------------------------------------------------------------
+   10. FORMS & INPUTS
+   ---------------------------------------------------------------- */
+.lt-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  margin-bottom: var(--space-md);
+}
+
+.lt-label {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--text-secondary);
+}
+.lt-label-required::after { content: ' *'; color: var(--accent-red); }
+
+.lt-input,
+.lt-select,
+.lt-textarea {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--text-primary);
+  background: var(--bg-terminal);
+  border: 1px solid var(--border-color);
+  padding: 0.45rem 0.8rem;
+  width: 100%;
+  outline: none;
+  transition: var(--transition-fast);
+  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
+}
+
+.lt-input:focus,
+.lt-select:focus,
+.lt-textarea:focus,
+.lt-input:focus-visible,
+.lt-select:focus-visible,
+.lt-textarea:focus-visible {
+  border-color: var(--accent-cyan);
+  box-shadow: var(--box-glow-cyan);
+  background: rgba(0,212,255,0.025);
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 1px;
+}
+
+.lt-input:disabled,
+.lt-select:disabled,
+.lt-textarea:disabled,
+.lt-input[readonly],
+.lt-textarea[readonly] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  background: var(--bg-tertiary);
+  color: var(--text-muted);
+  border-color: var(--border-dim);
+}
+
+/* Display-only fields — readable, non-editable, not "broken" */
+.lt-display-field,
+.lt-input.lt-display-field,
+.lt-select.lt-display-field,
+.lt-textarea.lt-display-field {
+  opacity: 1;
+  color: var(--text-secondary);
+  cursor: default;
+  pointer-events: none;
+  background: transparent;
+  border-color: var(--border-dim);
+}
+
+.lt-input::placeholder,
+.lt-textarea::placeholder { color: var(--text-dim); }
+
+.lt-select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2300D4FF'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 2rem;
+  color-scheme: dark;
+}
+
+/* Style the native option list — works on Chrome/Firefox/Edge on Windows & Linux.
+   macOS always uses OS-native rendering and ignores these. */
+.lt-select option,
+select option {
+  background: #0d1117;
+  color: #c9d1d9;
+}
+.lt-select option:hover,
+.lt-select option:focus,
+.lt-select option:checked,
+select option:checked {
+  background: #1a2030;
+  color: #FF6B00;
+}
+
+.lt-textarea {
+  min-height: 100px;
+  resize: vertical;
+  clip-path: none;
+}
+
+.lt-form-hint {
+  font-size: 0.63rem;
+  color: var(--text-muted);
+  letter-spacing: 0.04em;
+}
+
+/* Search */
+.lt-search { position: relative; }
+.lt-search-input { padding-left: 2rem; }
+.lt-search::before {
+  content: '⌕';
+  position: absolute;
+  left: 0.6rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-muted);
+  pointer-events: none;
+  font-size: 0.9rem;
+  z-index: 1;
+}
+
+/* Checkbox */
+.lt-checkbox {
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--accent-cyan-border);
+  background: var(--bg-terminal);
+  cursor: pointer;
+  position: relative;
+  flex-shrink: 0;
+  vertical-align: middle;
+  transition: var(--transition-fast);
+}
+.lt-checkbox:checked {
+  background: var(--accent-cyan-dim);
+  border-color: var(--accent-cyan);
+}
+.lt-checkbox:checked::after {
+  content: '✓';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.6rem;
+  color: var(--accent-cyan);
+  text-shadow: var(--glow-cyan);
+}
+.lt-checkbox:hover { border-color: var(--accent-cyan); }
+.lt-checkbox:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 2px;
+}
+.lt-checkbox:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Radio (same visual language as checkbox) */
+.lt-radio {
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--accent-cyan-border);
+  border-radius: 50%;
+  background: var(--bg-terminal);
+  cursor: pointer;
+  flex-shrink: 0;
+  vertical-align: middle;
+  transition: var(--transition-fast);
+  position: relative;
+}
+.lt-radio:checked {
+  border-color: var(--accent-cyan);
+  background: var(--accent-cyan-dim);
+}
+.lt-radio:checked::after {
+  content: '';
+  position: absolute;
+  inset: 3px;
+  border-radius: 50%;
+  background: var(--accent-cyan);
+  box-shadow: var(--glow-cyan);
+}
+.lt-radio:hover { border-color: var(--accent-cyan); }
+.lt-radio:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 2px;
+}
+.lt-radio:disabled { opacity: 0.4; cursor: not-allowed; }
+
+
+/* ----------------------------------------------------------------
+   11. TABLES
+   ---------------------------------------------------------------- */
+.lt-table-wrap { overflow-x: auto; }
+
+.lt-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.78rem;
+}
+
+.lt-table thead {
+  border-bottom: 1px solid var(--accent-cyan-border);
+  background: rgba(0,212,255,0.04);
+}
+
+.lt-table th {
+  padding: 0.6rem 0.85rem;
+  text-align: left;
+  font-size: 0.62rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--accent-cyan);
+  text-shadow: var(--glow-cyan);
+  white-space: nowrap;
+  cursor: default;
+}
+
+.lt-table th[data-sort-key] { cursor: pointer; }
+.lt-table th[data-sort-key]:hover {
+  color: var(--accent-orange);
+  text-shadow: var(--glow-orange);
+}
+.lt-table th[data-sort-key]:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; }
+
+.lt-table td {
+  padding: 0.55rem 0.85rem;
+  border-bottom: 1px solid var(--border-color-dim);
+  color: var(--text-primary);
+  vertical-align: middle;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  max-width: 280px; /* prevent single cell from expanding table beyond viewport */
+}
+
+.lt-table tbody tr { transition: var(--transition-fast); }
+.lt-table tbody tr:hover {
+  background: rgba(0,212,255,0.04);
+  outline: 1px solid var(--border-color-dim);
+  outline-offset: -1px;
+}
+
+/* Row priority accent bars */
+.lt-row-critical, .lt-row-p1 {
+  border-left: 2px solid var(--priority-1) !important;
+  background: rgba(255,45,85,0.035) !important;
+}
+.lt-row-warning, .lt-row-p2 { border-left: 2px solid var(--priority-2) !important; }
+.lt-row-p3 { border-left: 2px solid var(--priority-3) !important; }
+.lt-row-p4 { border-left: 2px solid var(--priority-4) !important; }
+
+/* Row state aliases (unprefixed, compatible with monitoring apps) */
+.lt-table tr.row-critical td:first-child, .lt-table tr.lt-row-critical td:first-child { border-left: 2px solid var(--accent-red); }
+.lt-table tr.row-critical td  { background: rgba(255,45,85,.04); }
+.lt-table tr.row-warning  td:first-child { border-left: 2px solid var(--accent-amber); }
+.lt-table tr.row-warning  td  { background: rgba(255,107,0,.04); }
+.lt-table tr.row-resolved td  { opacity: 0.6; }
+
+/* Compact data table */
+.lt-data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.75rem;
+}
+.lt-data-table td {
+  padding: 0.3rem 0.5rem;
+  border-bottom: 1px solid var(--border-color-dim);
+}
+.lt-data-table thead tr { border-bottom: 1px solid var(--border-color); }
+.lt-data-table th {
+  font-size: 0.62rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--accent-cyan);
+  padding: 0.35rem 0.5rem;
+}
+.lt-data-table-wrapper { padding: 0 var(--space-xs); }
+
+
+/* ----------------------------------------------------------------
+   12. STATUS BADGES, CHIPS, PRIORITY
+   ---------------------------------------------------------------- */
+.lt-status {
+  display: inline-block;
+  padding: 0.14rem 0.5rem;
+  font-size: 0.58rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  border: 1px solid currentColor;
+  background: transparent;
+  white-space: nowrap;
+}
+
+.lt-status-open        { color: var(--status-open);        background: rgba(0,255,136,0.07); }
+.lt-status-pending     { color: var(--status-pending);     background: rgba(191,95,255,0.07); }
+.lt-status-in-progress { color: var(--status-in-progress); background: rgba(255,179,0,0.07); }
+.lt-status-closed      { color: var(--status-closed);      background: rgba(255,45,85,0.07); }
+.lt-status-online      { color: var(--status-online);      background: rgba(0,255,136,0.07); text-shadow: var(--glow-green); }
+.lt-status-offline     { color: var(--status-offline);     background: rgba(255,45,85,0.07); }
+.lt-status-running     { color: var(--status-running);     background: rgba(255,179,0,0.07); animation: pulse-amber 2s infinite; will-change: color; }
+.lt-status-completed   { color: var(--status-completed);   background: rgba(0,212,255,0.07); }
+.lt-status-failed      { color: var(--status-failed);      background: rgba(255,45,85,0.07); }
+
+/* Priority badges */
+.lt-priority,
+.lt-p1, .lt-p2, .lt-p3, .lt-p4, .lt-p5 {
+  display: inline-block;
+  padding: 0.12rem 0.45rem;
+  font-size: 0.58rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  border: 1px solid currentColor;
+}
+
+.lt-p1 { color: var(--priority-1); background: rgba(255,45,85,0.09);  border-color: rgba(255,45,85,0.4);  text-shadow: var(--glow-red); }
+.lt-p2 { color: var(--priority-2); background: rgba(255,107,0,0.09);  border-color: rgba(255,107,0,0.38); }
+.lt-p3 { color: var(--priority-3); background: rgba(0,212,255,0.07);  border-color: rgba(0,212,255,0.30); }
+.lt-p4 { color: var(--priority-4); background: rgba(0,255,136,0.07);  border-color: rgba(0,255,136,0.30); }
+.lt-p5 { color: var(--priority-5); background: rgba(62,96,122,0.09);  border-color: rgba(62,96,122,0.30); }
+
+/* Chips */
+.lt-chip, .chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.15rem 0.5rem;
+  font-size: 0.58rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  border: 1px solid currentColor;
+}
+
+.lt-chip-ok,       .chip-ok       { color: var(--accent-green);  background: var(--accent-green-dim);  text-shadow: var(--glow-green); }
+.lt-chip-warn,     .chip-warning  { color: var(--accent-amber);  background: var(--accent-amber-dim); }
+.lt-chip-critical, .chip-critical { color: var(--accent-red);    background: var(--accent-red-dim);   text-shadow: var(--glow-red); }
+.lt-chip-info                     { color: var(--accent-cyan);   background: var(--accent-cyan-dim);  text-shadow: var(--glow-cyan); }
+
+/* Generic badges */
+.lt-badge {
+  display: inline-block;
+  padding: 0.1rem 0.4rem;
+  font-size: 0.56rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  border: 1px solid currentColor;
+}
+.lt-badge-green { color: var(--accent-green); }
+.lt-badge-amber { color: var(--accent-amber); }
+.lt-badge-red   { color: var(--accent-red); }
+.lt-badge-sm    { font-size: 0.5rem; padding: 0.05rem 0.3rem; }
+
+/* Status + priority badge variants (dark-mode base) */
+.lt-badge-open        { color: var(--accent-green);  background: rgba(0,255,136,0.08);  border-color: rgba(0,255,136,0.35);  text-shadow: var(--glow-green); }
+.lt-badge-closed      { color: var(--text-muted);    background: rgba(74,90,112,0.10);  border-color: rgba(74,90,112,0.35); }
+.lt-badge-in-progress,
+.lt-badge-progress    { color: var(--accent-amber);  background: rgba(255,179,0,0.08);  border-color: rgba(255,179,0,0.35); }
+.lt-badge-pending     { color: var(--accent-purple); background: rgba(191,95,255,0.08); border-color: rgba(191,95,255,0.35); }
+.lt-badge-p1          { color: var(--accent-red);    background: rgba(255,45,85,0.09);  border-color: rgba(255,45,85,0.40);  text-shadow: var(--glow-red); }
+.lt-badge-p2          { color: var(--accent-orange); background: rgba(255,107,0,0.09);  border-color: rgba(255,107,0,0.38); }
+.lt-badge-p3          { color: var(--accent-cyan);   background: rgba(0,212,255,0.07);  border-color: rgba(0,212,255,0.30); }
+.lt-badge-p4          { color: var(--accent-green);  background: rgba(0,255,136,0.07);  border-color: rgba(0,255,136,0.30); }
+
+/* Status dots */
+.lt-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.lt-dot-up,       .dot-up       { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green),  0 0 14px var(--accent-green);  animation: pulse-green 2.2s ease-in-out infinite; will-change: box-shadow; }
+.lt-dot-down,     .dot-down     { background: var(--accent-red);   box-shadow: 0 0 6px var(--accent-red),    0 0 12px var(--accent-red); }
+.lt-dot-warn,     .dot-degraded { background: var(--accent-amber); box-shadow: 0 0 6px var(--accent-amber),  0 0 12px var(--accent-amber); animation: pulse-amber 2.2s ease-in-out infinite; will-change: box-shadow; }
+.lt-dot-idle,     .dot-unknown,
+.dot-initial_down               { background: var(--text-muted);   box-shadow: none; }
+
+
+/* ----------------------------------------------------------------
+   13. MODALS
+   ---------------------------------------------------------------- */
+.lt-modal-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: var(--bg-overlay);
+  backdrop-filter: blur(8px);
+  z-index: var(--z-modal-backdrop);
+  align-items: center;
+  justify-content: center;
+}
+.lt-modal-overlay.is-open { display: flex; }
+
+.lt-modal {
+  position: relative;
+  background: var(--bg-secondary);
+  border: 1px solid var(--accent-cyan-border);
+  width: min(520px, 92vw);
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--box-glow-cyan), 0 40px 80px rgba(0,0,0,0.85);
+  clip-path: polygon(
+    0 0,
+    calc(100% - 18px) 0,
+    100% 18px,
+    100% 100%,
+    18px 100%,
+    0 calc(100% - 18px)
+  );
+  animation: modal-in 0.18s ease;
+}
+.lt-modal::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
+  box-shadow: var(--glow-cyan);
+}
+
+.lt-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+  background: rgba(0,212,255,0.035);
+  flex-shrink: 0;
+}
+
+.lt-modal-title {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--accent-orange);
+  text-shadow: var(--glow-orange);
+}
+
+.lt-modal-close {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0.2rem 0.4rem;
+  transition: var(--transition-fast);
+}
+.lt-modal-close:hover  { color: var(--accent-red); text-shadow: var(--glow-red); }
+.lt-modal-close:active { color: var(--accent-red); opacity: 0.7; }
+.lt-modal-close:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; }
+
+/* Modal size modifiers */
+.lt-modal-xs { width: min(280px, 92vw); }
+.lt-modal-sm { width: min(360px, 92vw); }
+
+/* Modal header danger variant */
+.lt-modal-header--danger {
+  background: rgba(255, 77, 77, 0.08);
+  border-bottom-color: var(--accent-red);
+}
+.lt-modal-header--danger .lt-modal-title {
+  color: var(--accent-red);
+  text-shadow: var(--glow-red);
+}
+
+.lt-modal-body {
+  padding: var(--space-lg);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.lt-modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-sm);
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--border-color-dim);
+  background: rgba(0,0,0,0.25);
+  flex-shrink: 0;
+}
+
+
+/* ----------------------------------------------------------------
+   14. TOAST NOTIFICATIONS
+   ---------------------------------------------------------------- */
+#lt-toast-container {
+  position: fixed;
+  bottom: var(--space-lg);
+  right: var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  z-index: var(--z-toast);
+  pointer-events: none;
+}
+
+.lt-toast {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: 0.5rem 0.9rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  min-width: 240px;
+  max-width: 380px;
+  border-left: 2px solid currentColor;
+  background: var(--bg-overlay, rgba(6,12,20,0.97));
+  backdrop-filter: blur(8px);
+  border-top: 1px solid var(--border-dim);
+  border-right: 1px solid var(--border-dim);
+  border-bottom: 1px solid var(--border-dim);
+  pointer-events: all;
+  animation: toast-in 0.2s ease;
+  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
+}
+
+.lt-toast-success { color: var(--accent-green);  border-left-color: var(--accent-green);  box-shadow: var(--box-glow-green); }
+.lt-toast-error   { color: var(--accent-red);    border-left-color: var(--accent-red);    box-shadow: var(--box-glow-red); }
+.lt-toast-warning { color: var(--accent-amber);  border-left-color: var(--accent-amber);  box-shadow: var(--box-glow-amber); }
+.lt-toast-info    { color: var(--accent-cyan);   border-left-color: var(--accent-cyan);   box-shadow: var(--box-glow-cyan); }
+
+
+/* ----------------------------------------------------------------
+   15. TAB NAVIGATION
+   ---------------------------------------------------------------- */
+.lt-tabs {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: var(--space-lg);
+}
+
+.lt-tab {
+  padding: 0.45rem 0.9rem;
+  font-family: var(--font-mono);
+  font-size: 0.67rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--text-muted);
+  background: transparent;
+  border: 1px solid transparent;
+  border-bottom: none;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.lt-tab:hover {
+  color: var(--text-secondary);
+  background: rgba(0,212,255,0.04);
+  border-color: var(--border-color-dim);
+}
+.lt-tab.active {
+  color: var(--accent-orange);
+  text-shadow: var(--glow-orange);
+  background: var(--bg-card);
+  border-color: var(--accent-orange-border);
+  border-bottom-color: var(--bg-card);
+}
+.lt-tab:focus-visible {
+  outline: 2px solid var(--accent-orange);
+  outline-offset: -2px;
+}
+
+.lt-tab-panel { display: none; }
+.lt-tab-panel.active { display: block; }
+
+
+/* ----------------------------------------------------------------
+   16. SIDEBAR / FILTER PANEL
+   ---------------------------------------------------------------- */
+.lt-sidebar {
+  width: var(--sidebar-width);
+  flex-shrink: 0;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  transition: var(--transition-default);
+}
+.lt-sidebar.collapsed { width: 32px; overflow: hidden; }
+
+.lt-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.63rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--accent-cyan);
+  text-shadow: var(--glow-cyan);
+  border-bottom: 1px solid var(--border-color);
+  background: rgba(0,212,255,0.035);
+}
+
+.lt-sidebar-toggle {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 0.65rem;
+  cursor: pointer;
+  padding: 0.1rem 0.3rem;
+  transition: var(--transition-fast);
+}
+.lt-sidebar-toggle:hover { color: var(--accent-cyan); text-shadow: var(--glow-cyan); }
+.lt-sidebar-toggle:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; }
+
+.lt-sidebar-body { padding: var(--space-md); }
+
+.lt-filter-group {
+  margin-bottom: var(--space-md);
+  padding: 0 0 var(--space-md) 0;
+  border: none;
+  border-bottom: 1px solid var(--border-color-dim);
+  min-width: 0; /* fieldset UA reset */
+}
+.lt-filter-group:last-child { border-bottom: none; }
+
+.lt-filter-label {
+  display: block;
+  font-size: 0.6rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--accent-orange);
+  margin-bottom: var(--space-sm);
+}
+
+.lt-filter-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-bottom: var(--space-xs);
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.lt-filter-option:hover { color: var(--text-primary); }
+
+
+/* ----------------------------------------------------------------
+   17. STATS WIDGETS
+   ---------------------------------------------------------------- */
+.lt-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
+  gap: var(--space-md);
+  margin-bottom: var(--space-lg);
+}
+
+.lt-stat-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md);
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
+  overflow: hidden;
+}
+
+/* Left accent bar */
+.lt-stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0;
+  width: 2px; height: 0%;
+  background: var(--accent-cyan);
+  box-shadow: var(--glow-cyan);
+  transition: height 0.3s ease;
+}
+
+.lt-stat-card:hover,
+.lt-stat-card.active,
+.lt-stat-card:focus-visible {
+  background: var(--bg-tertiary);
+  border-color: var(--accent-cyan-border);
+  box-shadow: var(--box-glow-cyan);
+}
+.lt-stat-card:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; }
+.lt-stat-card:hover::before,
+.lt-stat-card.active::before { height: 100%; }
+
+.lt-stat-card.active {
+  border-color: var(--accent-orange-border);
+  box-shadow: var(--box-glow-orange);
+}
+.lt-stat-card.active::before {
+  background: var(--accent-orange);
+  box-shadow: var(--glow-orange);
+}
+
+.lt-stat-icon { font-size: 1.3rem; line-height: 1; opacity: 0.80; }
+.lt-stat-info { display: flex; flex-direction: column; }
+
+.lt-stat-value {
+  font-size: 1.6rem;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--accent-orange);
+  text-shadow: var(--glow-orange);
+}
+
+.lt-stat-label {
+  font-size: 0.58rem;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+
+/* ----------------------------------------------------------------
+   18. INLINE MESSAGES
+   ---------------------------------------------------------------- */
+.lt-msg {
+  padding: 0.5rem 0.85rem;
+  font-size: 0.75rem;
+  border-left: 2px solid currentColor;
+  margin-bottom: var(--space-sm);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-sm);
+}
+.lt-msg::before { flex-shrink: 0; font-weight: 700; }
+
+.lt-msg-error   { color: var(--accent-red);   background: var(--accent-red-dim);   border-left-color: var(--accent-red); }
+.lt-msg-success { color: var(--accent-green);  background: var(--accent-green-dim); border-left-color: var(--accent-green); }
+.lt-msg-warning { color: var(--accent-amber);  background: var(--accent-amber-dim); border-left-color: var(--accent-amber); }
+.lt-msg-info    { color: var(--accent-cyan);   background: var(--accent-cyan-dim);  border-left-color: var(--accent-cyan); }
+
+.lt-msg-error::before   { content: '✗'; }
+.lt-msg-success::before { content: '✓'; }
+.lt-msg-warning::before { content: '!'; }
+.lt-msg-info::before    { content: 'i'; }
+
+
+/* ----------------------------------------------------------------
+   19. LOADING & EMPTY STATES
+   ---------------------------------------------------------------- */
+.lt-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--text-muted);
+  font-size: 0.72rem;
+}
+.lt-loading::before {
+  content: '';
+  display: inline-block;
+  width: 14px; height: 14px;
+  border: 2px solid var(--border-color);
+  border-top-color: var(--accent-cyan);
+  border-radius: 50%;
+  animation: spin 0.75s linear infinite;
+}
+.lt-loading::after {
+  content: 'Loading...';
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.lt-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 25%,
+    var(--bg-tertiary) 50%,
+    var(--bg-secondary) 75%
+  );
+  background-size: 300% 100%;
+  animation: shimmer 1.8s ease-in-out infinite;
+}
+
+.lt-empty {
+  color: var(--text-dim);
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  text-align: center;
+  padding: var(--space-xl);
+}
+.lt-empty::before { content: '[ '; color: var(--text-muted); }
+.lt-empty::after  { content: ' ]'; color: var(--text-muted); }
+
+
+/* ----------------------------------------------------------------
+   20. BOOT SEQUENCE OVERLAY
+   ---------------------------------------------------------------- */
+.lt-boot-overlay {
+  position: fixed;
+  inset: 0;
+  background: #000;
+  z-index: calc(var(--z-overlay) + 1);
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: var(--space-2xl);
+  animation: boot-fade 0.5s ease 2.2s forwards;
+}
+
+.lt-boot-text {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--accent-green);
+  text-shadow: var(--glow-green);
+  line-height: 1.7;
+  white-space: pre-wrap;
+  overflow: hidden;
+}
+
+
+/* ----------------------------------------------------------------
+   21. LOG / TIMELINE ENTRIES
+   ---------------------------------------------------------------- */
+.lt-log-entry {
+  padding: 0.5rem 0.75rem;
+  border-left: 2px solid var(--border-color);
+  margin-bottom: 2px;
+  font-size: 0.75rem;
+  background: rgba(0,0,0,0.2);
+  transition: var(--transition-fast);
+}
+.lt-log-entry:hover { background: rgba(0,212,255,0.025); }
+.lt-log-entry.success { border-left-color: var(--accent-green); }
+.lt-log-entry.warning { border-left-color: var(--accent-amber); }
+.lt-log-entry.error   { border-left-color: var(--accent-red); }
+
+.lt-log-ts {
+  font-size: 0.6rem;
+  color: var(--text-muted);
+  margin-bottom: 2px;
+  letter-spacing: 0.04em;
+}
+
+.lt-log-output {
+  font-size: 0.67rem;
+  color: var(--accent-green);
+  background: var(--bg-terminal);
+  padding: 0.2rem 0.45rem;
+  margin-top: 0.35rem;
+  border-left: 1px solid var(--accent-green-border);
+  text-shadow: var(--glow-green);
+}
+
+/* Toolbar row */
+.lt-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+  padding: var(--space-sm) 0;
+  margin-bottom: var(--space-md);
+}
+.lt-toolbar-left,
+.lt-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+/* Running / pulsing row */
+.lt-item-running { animation: running-pulse 3s ease-in-out infinite; }
+
+
+/* ----------------------------------------------------------------
+   22. ANIMATIONS (KEYFRAMES)
+   ---------------------------------------------------------------- */
+@keyframes pulse-green {
+  0%, 100% { box-shadow: 0 0 4px var(--accent-green),  0 0 8px  var(--accent-green); }
+  50%       { box-shadow: 0 0 8px var(--accent-green),  0 0 22px var(--accent-green), 0 0 36px rgba(0,255,136,0.35); }
+}
+
+@keyframes pulse-amber {
+  0%, 100% { box-shadow: 0 0 4px var(--accent-amber), 0 0 8px  var(--accent-amber); }
+  50%       { box-shadow: 0 0 8px var(--accent-amber), 0 0 20px var(--accent-amber); }
+}
+
+@keyframes running-pulse {
+  0%, 100% { border-color: var(--border-color); }
+  50%       { border-color: rgba(255,179,0,0.25); box-shadow: 0 0 14px rgba(255,179,0,0.12); }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes shimmer {
+  0%   { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateX(16px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes modal-in {
+  from { opacity: 0; transform: scale(0.96) translateY(-10px); }
+  to   { opacity: 1; transform: scale(1)    translateY(0); }
+}
+
+@keyframes boot-fade {
+  to { opacity: 0; pointer-events: none; }
+}
+
+@keyframes blink {
+  0%, 49% { opacity: 1; }
+  50%, 100% { opacity: 0; }
+}
+
+@keyframes glitch-1 {
+  0%, 90%, 100% { clip-path: inset(0); transform: skewX(0); }
+  92%  { clip-path: inset(15% 0 72% 0); transform: skewX(-4deg); }
+  94%  { clip-path: inset(54% 0 22% 0); transform: skewX(3deg); }
+  96%  { clip-path: inset(30% 0 48% 0); transform: skewX(-2deg); }
+}
+
+@keyframes glitch-2 {
+  0%, 90%, 100% { clip-path: inset(0); transform: skewX(0); }
+  92%  { clip-path: inset(60% 0 8%  0); transform: skewX(3deg); }
+  94%  { clip-path: inset(8%  0 68% 0); transform: skewX(-3deg); }
+  96%  { clip-path: inset(42% 0 38% 0); transform: skewX(1deg); }
+}
+
+
+/* ================================================================
+   23. RESPONSIVE DESIGN
+
+   Breakpoint system (desktop-first with mobile-first enhancements):
+     xs:  ≤ 479px     tiny phones  (iPhone SE 1st gen, Galaxy A)
+     sm:  480–767px   phones       (iPhone 14, Pixel 7, Galaxy S)
+     md:  768–1023px  tablets      (iPad mini/Air portrait)
+     lg:  1024–1279px laptops      (iPad Pro landscape, MacBook Air 11")
+     xl:  1280–1535px desktops     (MacBook Pro 13", 1080p portrait)
+    2xl:  1536–1919px large        (27" iMac, 1440p)
+    3xl:  1920–2559px full HD      (1080p monitor, 24")
+     4k:  ≥ 2560px    4K/ultrawide (4K, 1440p ultrawide)
+   ================================================================ */
+
+/* ── Breakpoint tokens (read by JS lt.viewport module) ── */
+:root {
+  --bp-xs:  479;
+  --bp-sm:  480;
+  --bp-md:  768;
+  --bp-lg:  1024;
+  --bp-xl:  1280;
+  --bp-2xl: 1536;
+  --bp-3xl: 1920;
+  --bp-4k:  2560;
+}
+
+/* ── Mobile nav drawer ── */
+.lt-menu-btn {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 36px; height: 36px;
+  padding: 6px;
+  background: none;
+  border: 1px solid var(--border-dim);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.lt-menu-btn span {
+  display: block;
+  height: 1px;
+  background: var(--accent-cyan);
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  box-shadow: var(--glow-cyan);
+}
+.lt-menu-btn:active { opacity: 0.7; }
+.lt-menu-btn:focus-visible { outline: 1px solid var(--accent-cyan); outline-offset: 2px; }
+.lt-menu-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
+.lt-menu-btn.open span:nth-child(2) { opacity: 0; }
+.lt-menu-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
+
+.lt-nav-drawer {
+  position: fixed;
+  top: 0; left: 0; bottom: 0;
+  width: 280px;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border-color);
+  box-shadow: 4px 0 32px rgba(0,0,0,0.8);
+  z-index: calc(var(--z-overlay) + 3);
+  transform: translateX(-100%);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  display: flex;
+  flex-direction: column;
+}
+.lt-nav-drawer.open { transform: translateX(0); }
+
+.lt-nav-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--border-color);
+  min-height: var(--header-height);
+}
+.lt-nav-drawer-close {
+  background: none;
+  border: 1px solid var(--border-dim);
+  color: var(--text-dim);
+  cursor: pointer;
+  width: 44px; height: 44px;  /* 44px touch target */
+  font-size: 0.9rem;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  transition: color 0.15s, border-color 0.15s;
+}
+.lt-nav-drawer-close:hover { color: var(--accent-red); border-color: var(--accent-red); }
+.lt-nav-drawer-close:focus-visible { outline: 1px solid var(--accent-cyan); outline-offset: 2px; }
+
+.lt-nav-drawer-links { padding: var(--space-sm) 0; flex: 1; }
+.lt-nav-drawer-link {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem var(--space-lg);
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color 0.15s, background 0.15s, padding-left 0.15s;
+  border-left: 2px solid transparent;
+  min-height: 44px;
+}
+.lt-nav-drawer-link:hover { color: var(--accent-cyan); background: rgba(0,212,255,0.06); padding-left: calc(var(--space-lg) + 4px); }
+.lt-nav-drawer-link:focus-visible { outline: none; color: var(--accent-cyan); background: rgba(0,212,255,0.10); box-shadow: inset 3px 0 0 var(--accent-cyan); }
+.lt-nav-drawer-link.active,
+.lt-nav-drawer-link[aria-current="page"] { color: var(--accent-orange); border-left-color: var(--accent-orange); background: rgba(255,107,0,0.06); }
+.lt-nav-drawer-link--indent { padding-left: calc(var(--space-lg) + var(--space-md)); font-size: 0.75rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
+.lt-nav-drawer-section {
+  padding: var(--space-sm) var(--space-lg) var(--space-xs);
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--text-dim);
+  border-top: 1px solid var(--border-dim);
+  margin-top: var(--space-xs);
+}
+
+.lt-nav-drawer-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.75);
+  backdrop-filter: blur(2px);
+  z-index: calc(var(--z-overlay) + 2);
+}
+.lt-nav-drawer-overlay.open { display: block; }
+
+
+/* ── Safe areas (iPhone notch / Dynamic Island / home bar) ── */
+@supports (padding: env(safe-area-inset-left)) {
+  /* Header: pad for notch in landscape, Dynamic Island on top */
+  .lt-header {
+    padding-left:  max(var(--space-xl), env(safe-area-inset-left));
+    padding-right: max(var(--space-xl), env(safe-area-inset-right));
+  }
+  /* Main content: header-height already includes safe-area-top via header height —
+     only add safe-area-top once to avoid double-counting */
+  .lt-main {
+    padding-top: calc(var(--header-height) + env(safe-area-inset-top) + var(--space-lg));
+  }
+  /* Nav drawer: account for notch on both top and left (landscape) */
+  .lt-nav-drawer {
+    padding-top:  max(var(--header-height), env(safe-area-inset-top));
+    padding-left: env(safe-area-inset-left);
+  }
+  /* Toast: stay above home bar */
+  #lt-toast-container {
+    bottom: max(var(--space-lg), calc(env(safe-area-inset-bottom) + var(--space-sm)));
+    right:  max(var(--space-lg), env(safe-area-inset-right));
+    right:  max(var(--space-sm), env(safe-area-inset-right)); /* SM override merged */
+  }
+  /* Bottom-fixed UI (modals, cmd palette at XS) */
+  .lt-modal-overlay.bottom-safe,
+  .lt-cmd-overlay.bottom-safe {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+
+/* ── Touch / coarse pointer (finger-friendly tap targets) ── */
+@media (pointer: coarse) {
+  .lt-btn, .lt-input, .lt-select, .lt-textarea { min-height: 44px; }
+  .lt-btn-sm { min-height: 44px; }  /* 44px minimum per WCAG / Apple HIG */
+  .lt-menu-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
+  .lt-nav-link { padding: 0 var(--space-md); min-height: 44px; display: inline-flex; align-items: center; }
+  .lt-accordion-header { min-height: 48px; }
+  .lt-tab { min-height: 44px; padding: var(--space-sm) var(--space-lg); }
+  .lt-list-item { min-height: 44px; }
+  .lt-page-btn { min-height: 44px; min-width: 44px; }
+  .lt-dropdown-trigger { min-height: 44px; }
+  .lt-notif-bell-btn { min-height: 44px !important; min-width: 44px; }
+  .lt-checkbox, .lt-radio { width: 20px; height: 20px; }
+  input[type="range"].lt-range { height: 8px; }
+  input[type="range"].lt-range::-webkit-slider-thumb { width: 22px; height: 22px; }
+}
+
+
+/* ── No-hover / touch devices ── */
+@media (hover: none) {
+  /* Suppress hover-only decorations on touch */
+  [data-tooltip]::before,
+  [data-tooltip]::after { display: none; }
+  /* Glitch causes expensive repaints on mobile — disable */
+  .lt-glitch::before,
+  .lt-glitch::after { display: none; }
+  /* Suppress padding-left shift on touch (causes layout jank on tap) */
+  .lt-nav-drawer-link:hover { padding-left: var(--space-lg); }
+}
+
+/* ── Coarse pointer — additional touch performance tweaks ── */
+@media (pointer: coarse) {
+  /* Disable infinite animations that drain battery on mobile */
+  .lt-dot-up, .lt-dot-warn { animation: none; }
+  .lt-status-running { animation: none; }
+  .lt-item-running   { animation: none; }
+  /* Use simple pulsing glow instead for coarse-pointer devices */
+  .lt-dot-up   { box-shadow: 0 0 6px var(--accent-green); }
+  .lt-dot-warn { box-shadow: 0 0 6px var(--accent-amber); }
+}
+
+
+/* ── High-DPI / Retina ── */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .lt-header::after { height: 0.5px; }
+  .lt-frame, .lt-card, .lt-input, .lt-select, .lt-btn { border-width: 0.5px; }
+  .lt-frame::before { font-size: 0.6rem; }
+}
+
+
+/* ── Landscape phone (short viewport) ── */
+@media (max-height: 500px) and (orientation: landscape) {
+  :root { --header-height: 42px; }
+  .lt-main { padding-top: calc(42px + var(--space-md)); }
+  .lt-boot-overlay { display: none; }
+  .lt-modal {
+    align-items: flex-start;
+    padding-top: 48px;
+    overflow-y: auto;
+  }
+  .lt-modal .lt-modal { max-height: calc(100vh - 56px); overflow-y: auto; }
+}
+
+
+/* ── LG — laptops 1024–1279px ── */
+@media (max-width: 1279px) {
+  .lt-grid-4 { grid-template-columns: repeat(2, 1fr); }
+  .lt-container { padding: var(--space-lg); }
+}
+
+
+/* ── MD — tablets portrait 768–1023px ── */
+@media (max-width: 1023px) {
+  .lt-menu-btn { display: flex; }
+  .lt-nav { display: none; }
+
+  .lt-grid-3, .lt-grid-4 { grid-template-columns: repeat(2, 1fr); }
+  .lt-stats-grid { grid-template-columns: repeat(2, 1fr); }
+  .lt-container { padding: var(--space-md) var(--space-lg); }
+  .lt-header { padding: 0 var(--space-lg); }
+
+  /* Sidebar becomes off-canvas on tablets */
+  .lt-sidebar {
+    position: fixed;
+    top: var(--header-height);
+    left: 0; bottom: 0;
+    width: var(--sidebar-width);
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+    z-index: var(--z-fixed);
+    border-right: 1px solid var(--border-color);
+    overflow-y: auto;
+  }
+  .lt-sidebar.open { transform: translateX(0); }
+  .lt-layout { display: block; }
+  .lt-content { width: 100%; }
+}
+
+
+/* ── SM — phones 480–767px ── */
+@media (max-width: 767px) {
+  :root { --header-height: 50px; }
+  .lt-main, .lt-main.lt-container { padding-top: calc(50px + var(--space-md)); }
+
+  .lt-container { padding: var(--space-md); }
+  .lt-header { padding: 0 var(--space-md); }
+  .lt-brand-subtitle { display: none; }
+
+  .lt-grid-2, .lt-grid-3, .lt-grid-4 { grid-template-columns: 1fr; }
+  .lt-stats-grid { grid-template-columns: repeat(2, 1fr); }
+
+  .lt-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
+  .lt-toolbar-left, .lt-toolbar-right { flex-wrap: wrap; gap: var(--space-xs); }
+  .lt-search { flex: 1 1 100%; }
+  .lt-search .lt-search-input { width: 100%; }
+  .lt-page-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
+  .lt-btn-group { flex-wrap: wrap; }
+
+  /* Kanban: stay 2-col on SM so columns remain legible */
+  #tab-kanban .lt-grid-4 { grid-template-columns: repeat(2, 1fr); }
+
+  /* Drawer form 2-col → 1-col on SM */
+  .lt-drawer-form-grid { grid-template-columns: 1fr !important; }
+
+  /* Full-width modals on phone */
+  .lt-modal {
+    width: 96vw;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+
+  /* Command palette full-width */
+  .lt-cmd-palette {
+    max-width: 96vw;
+    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
+  }
+
+  /* Smaller clip corners feel better on mobile */
+  .lt-frame {
+    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
+  }
+  .lt-card {
+    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
+  }
+
+  /* Toast full-width on phone */
+  #lt-toast-container {
+    left: var(--space-sm);
+    right: var(--space-sm);
+    bottom: var(--space-md);
+  }
+  .lt-toast { width: 100%; }
+
+  /* Stepper goes vertical on small screens */
+  .lt-stepper { flex-direction: column; gap: var(--space-sm); }
+  .lt-step { flex-direction: row; align-items: center; gap: var(--space-md); text-align: left; }
+  .lt-step:not(:last-child)::after {
+    display: none;
+  }
+  .lt-step-num { margin-bottom: 0; flex-shrink: 0; }
+
+  /* KV grid stacks on mobile */
+  .lt-kv-grid { grid-template-columns: 1fr; }
+  .lt-kv-key { border-right: none; border-bottom: 1px solid var(--border-dim); padding: var(--space-xs) 0 2px; }
+  .lt-kv-val { padding: 2px 0 var(--space-sm); }
+
+  /* Pagination compact — show fewer buttons via CSS */
+  .lt-page-btn:not(.active):not(:first-child):not(:last-child):not([disabled]) {
+    display: none;
+  }
+  .lt-page-btn.active,
+  .lt-page-btn:first-child,
+  .lt-page-btn:last-child { display: inline-flex; }
+
+  /* Dropzone: smaller on mobile */
+  .lt-dropzone { padding: var(--space-lg) var(--space-md); }
+  .lt-dropzone-icon { font-size: 1.5rem; }
+
+  /* Section body: tighter on mobile */
+  .lt-section-body { padding: var(--space-sm); padding-right: var(--space-md); }
+
+  /* Data table card mode already at 640px; also reduce font */
+  .lt-data-table th,
+  .lt-data-table td { padding: 0.5rem 0.6rem; font-size: 0.75rem; }
+
+  /* Hero */
+  .lt-hero { padding: var(--space-lg) 0; }
+  .lt-hero-actions { flex-direction: column; align-items: stretch; }
+
+  /* Code block: tighter font on phone */
+  .lt-code-block pre { font-size: 0.72rem; }
+
+  /* Stats grid gap tighter */
+  .lt-stats-grid { gap: var(--space-sm); }
+  .lt-stat-card { padding: var(--space-sm); }
+  .lt-stat-value { font-size: 1.6rem; }
+}
+
+
+/* ── XS — tiny phones ≤ 479px ── */
+@media (max-width: 479px) {
+  :root { --header-height: 46px; }
+  .lt-main, .lt-main.lt-container { padding-top: calc(46px + var(--space-sm)); }
+
+  .lt-container { padding: var(--space-sm); }
+  .lt-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
+  .lt-stat-card { padding: var(--space-xs) var(--space-sm); }
+  .lt-stat-value { font-size: 1.4rem; }
+
+  .lt-frame { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
+  /* Ensure content clears the 6px clipped corner */
+  .lt-section-body { padding: var(--space-xs) var(--space-sm); padding-right: 14px; }
+
+  /* Full-width drawer on tiny phones */
+  .lt-nav-drawer { width: 100%; max-width: 100vw; }
+
+  /* Btn groups stack vertically only in primary action areas, not everywhere */
+  .lt-page-header .lt-btn-group { flex-direction: column; width: 100%; }
+  .lt-page-header .lt-btn-group .lt-btn { width: 100%; }
+
+  /* Full-screen bottom-sheet modal on XS */
+  .lt-modal-overlay { align-items: flex-end; padding: 0; }
+  .lt-modal {
+    width: 100%;
+    max-width: 100vw;
+    max-height: 92vh;
+    overflow-y: auto;
+    clip-path: none;
+    border: none;
+    border-top: 1px solid var(--border-color);
+    border-radius: 0;
+    /* Bottom sheet rounding illusion via top corners */
+    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
+  }
+  .lt-modal-body { max-height: calc(92vh - 120px); overflow-y: auto; }
+
+  /* Full-screen bottom-sheet command palette on XS */
+  .lt-cmd-overlay { align-items: flex-end; padding-top: 0; }
+  .lt-cmd-palette {
+    max-width: 100%;
+    width: 100%;
+    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
+    border-bottom: none;
+  }
+
+  .lt-data-table th,
+  .lt-data-table td { padding: 0.4rem 0.5rem; font-size: 0.75rem; }
+
+  .lt-tab { padding: var(--space-xs) var(--space-sm); font-size: 0.7rem; }
+
+  /* Toolbar stacks fully on XS */
+  .lt-toolbar-left, .lt-toolbar-right {
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    width: 100%;
+  }
+  .lt-search { flex: 1 1 100%; }
+  .lt-search .lt-search-input { width: 100%; }
+  .lt-dropdown-wrap { flex: 0 0 auto; }
+
+  /* Grid gap tighter on XS */
+  .lt-grid-2, .lt-grid-3, .lt-grid-4 { gap: var(--space-sm); }
+
+  /* Stats grid: 2-col but with tighter gap already set above */
+  .lt-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
+
+  /* Kanban: stay 2-col on XS so columns are still readable */
+  #tab-kanban .lt-grid-4 { grid-template-columns: repeat(2, 1fr); }
+
+  /* Drawer form 2-col → 1-col on XS */
+  .lt-drawer-form-grid { grid-template-columns: 1fr !important; }
+
+  /* Dropdowns: constrain to viewport on XS */
+  .lt-dropdown-panel { min-width: unset; max-width: 92vw; left: 0; right: auto; }
+  .lt-dropdown-panel--right { left: auto; right: 0; }
+
+  /* Notification panel: constrain to viewport */
+  .lt-notif-panel { width: min(300px, 92vw); }
+
+  /* Pagination: show prev/next + active only on XS */
+  .lt-page-btn:not(.active):not(:first-child):not(:last-child):not([disabled]) { display: none; }
+  .lt-page-btn.active,
+  .lt-page-btn:first-child,
+  .lt-page-btn:last-child { display: inline-flex; }
+}
+
+
+/* ── 2XL — large desktops 1536–1919px ── */
+@media (min-width: 1536px) {
+  :root { --container-max: 1800px; }
+  .lt-header { padding: 0 var(--space-2xl); }
+  .lt-stats-grid { grid-template-columns: repeat(5, 1fr); }
+}
+
+
+/* ── 3XL — full HD 1920–2559px ── */
+@media (min-width: 1920px) {
+  :root { --container-max: 2000px; }
+  .lt-stats-grid { grid-template-columns: repeat(6, 1fr); }
+  .lt-grid-4 { grid-template-columns: repeat(4, 1fr); }
+  .lt-container { padding: var(--space-xl) var(--space-2xl); }
+}
+
+
+/* ── 4K / ULTRA-WIDE ≥ 2560px ── */
+@media (min-width: 2560px) {
+  html { font-size: 18px; } /* scales all rem-based values ~12% larger */
+  :root {
+    --container-max:  2400px;
+    --header-height:  4rem;    /* 72px at 18px base — was 64px hardcoded */
+    --sidebar-width:  17.5rem; /* 315px at 18px base — was 280px hardcoded */
+  }
+  /* Clip-path corners scale proportionally */
+  .lt-frame {
+    clip-path: polygon(0 0, calc(100% - 1.25rem) 0, 100% 1.25rem, 100% 100%, 1.25rem 100%, 0 calc(100% - 1.25rem));
+  }
+  .lt-card {
+    clip-path: polygon(0 0, calc(100% - 0.75rem) 0, 100% 0.75rem, 100% 100%, 0 100%);
+  }
+  .lt-stats-grid { grid-template-columns: repeat(8, 1fr); }
+  /* Scale hardcoded-px elements explicitly at 4K */
+  .lt-dot          { width: 0.6rem;  height: 0.6rem; }   /* was 8px */
+  .lt-menu-btn     { width: 2.5rem;  height: 2.5rem; }   /* was 36px */
+  .lt-nav-drawer-close { width: 3rem; height: 3rem; }     /* was 44px */
+  .lt-step-num     { width: 2rem;    height: 2rem; }      /* was 28px */
+  .lt-spinner      { width: 1.75rem; height: 1.75rem; }   /* was 24px */
+  .lt-spinner--sm  { width: 1rem;    height: 1rem; }      /* was 14px */
+  .lt-spinner--lg  { width: 2.75rem; height: 2.75rem; }   /* was 40px */
+  .lt-checkbox, .lt-radio { width: 1.1rem; height: 1.1rem; } /* was 14px */
+  /* More pronounced glows at 4K */
+  :root {
+    --glow-orange:        0 0 8px #FF6B00, 0 0 24px rgba(255,107,0,0.6);
+    --glow-cyan:          0 0 8px #00D4FF, 0 0 24px rgba(0,212,255,0.6);
+    --glow-green:         0 0 8px #00FF88, 0 0 22px rgba(0,255,136,0.55);
+    --glow-red:           0 0 8px #FF2D55, 0 0 22px rgba(255,45,85,0.55);
+    --glow-orange-intense: 0 0 10px #FF6B00, 0 0 28px #FF6B00, 0 0 50px rgba(255,107,0,0.5);
+    --glow-cyan-intense:   0 0 10px #00D4FF, 0 0 28px #00D4FF, 0 0 48px rgba(0,212,255,0.4);
+    --glow-green-intense:  0 0 10px #00FF88, 0 0 26px #00FF88, 0 0 44px rgba(0,255,136,0.4);
+    --glow-amber-intense:  0 0 10px #FFB300, 0 0 24px #FFB300, 0 0 42px rgba(255,179,0,0.5);
+  }
+}
+
+
+/* ── Breakpoint visibility utilities ── */
+/* Hide at specific breakpoints */
+@media (max-width: 479px)  { .lt-hide-xs  { display: none !important; } }
+@media (max-width: 767px)  { .lt-hide-sm  { display: none !important; } }
+@media (max-width: 1023px) { .lt-hide-md  { display: none !important; } }
+@media (max-width: 1279px) { .lt-hide-lg  { display: none !important; } }
+@media (min-width: 480px)  { .lt-show-xs  { display: none !important; } }
+@media (min-width: 768px)  { .lt-show-sm  { display: none !important; } }
+@media (min-width: 1024px) { .lt-show-md  { display: none !important; } }
+@media (min-width: 1280px) { .lt-show-lg  { display: none !important; } }
+/* Touch-only / desktop-only */
+@media (pointer: fine)   { .lt-touch-only { display: none !important; } }
+@media (pointer: coarse) { .lt-mouse-only { display: none !important; } }
+
+
+/* ----------------------------------------------------------------
+   24. UTILITY CLASSES
+   ---------------------------------------------------------------- */
+.lt-text-orange  { color: var(--accent-orange); text-shadow: var(--glow-orange); }
+.lt-text-amber   { color: var(--accent-amber);  text-shadow: var(--glow-amber); }
+.lt-text-cyan    { color: var(--accent-cyan);   text-shadow: var(--glow-cyan); }
+.lt-text-green   { color: var(--accent-green);  text-shadow: var(--glow-green); }
+.lt-text-red     { color: var(--accent-red);    text-shadow: var(--glow-red); }
+.lt-text-muted   { color: var(--text-muted); }
+.lt-text-dim     { color: var(--text-dim); }
+
+.lt-text-xs  { font-size: 0.63rem; }
+.lt-text-sm  { font-size: 0.78rem; }
+.lt-text-lg  { font-size: 1rem; }
+.lt-text-xl  { font-size: 1.2rem; }
+.lt-text-upper { text-transform: uppercase; letter-spacing: 0.1em; }
+
+.lt-hidden  { display: none !important; }
+
+/* Skip navigation link — visible only on focus */
+.lt-skip-link {
+  position: absolute;
+  top: -100%;
+  left: var(--space-sm);
+  padding: var(--space-xs) var(--space-md);
+  background: var(--bg-terminal);
+  color: var(--accent-cyan);
+  border: 1px solid var(--accent-cyan);
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  z-index: var(--z-toast);
+  transition: top 0.1s;
+}
+.lt-skip-link:focus, .lt-skip-link:focus-visible { top: var(--space-sm); }
+
+.lt-sr-only {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%); /* replaces deprecated clip: rect(0,0,0,0) */
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Cursor blink */
+.lt-cursor::after {
+  content: '█';
+  color: var(--accent-cyan);
+  text-shadow: var(--glow-cyan);
+  animation: blink 1s step-start infinite;
+  font-size: 0.85em;
+  margin-left: 1px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .lt-cursor::after { animation: none; }
+}
+
+/* Glitch text effect */
+.lt-glitch { position: relative; }
+.lt-glitch::before,
+.lt-glitch::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%;
+  overflow: hidden;
+}
+.lt-glitch::before {
+  color: var(--accent-cyan);
+  opacity: 0.65;
+  animation: glitch-1 4s infinite;
+  will-change: clip-path, transform;
+}
+.lt-glitch::after {
+  color: var(--accent-orange);
+  opacity: 0.65;
+  animation: glitch-2 4s 0.12s infinite;
+  will-change: clip-path, transform;
+}
+
+
+/* ----------------------------------------------------------------
+   25. PRINT STYLES
+   ---------------------------------------------------------------- */
+@media print {
+  body::before, body::after { display: none; }
+  html { background-image: none; background-color: white; }
+  body { background: white; color: black; }
+  .lt-header, .lt-boot-overlay, #lt-toast-container { display: none; }
+  .lt-frame, .lt-card { border: 1px solid #ccc; clip-path: none; }
+}
+
+
+/* ----------------------------------------------------------------
+   26. ACCESSIBILITY
+   ---------------------------------------------------------------- */
+:focus-visible {
+  outline: 1px solid var(--accent-cyan);
+  outline-offset: 2px;
+  box-shadow: var(--box-glow-cyan);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+
+/* ----------------------------------------------------------------
+   27. PROGRESS BARS
+   ---------------------------------------------------------------- */
+.lt-progress {
+  width: 100%;
+  height: 6px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-dim);
+  overflow: hidden;
+  position: relative;
+}
+.lt-progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent-orange), #ff8c2b);
+  box-shadow: var(--glow-orange);
+  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+.lt-progress-bar::after {
+  content: '';
+  position: absolute;
+  top: 0; right: 0;
+  width: 20px;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
+}
+.lt-progress--cyan .lt-progress-bar  { background: linear-gradient(90deg, var(--accent-cyan),  #33dfff); box-shadow: var(--glow-cyan); }
+.lt-progress--green .lt-progress-bar { background: linear-gradient(90deg, var(--accent-green), #33ffaa); box-shadow: var(--glow-green); }
+.lt-progress--red .lt-progress-bar   { background: linear-gradient(90deg, var(--accent-red),   #ff4466); box-shadow: var(--glow-red); }
+.lt-progress--striped .lt-progress-bar {
+  background-image: repeating-linear-gradient(
+    45deg, transparent, transparent 4px,
+    rgba(0,0,0,0.25) 4px, rgba(0,0,0,0.25) 8px
+  );
+}
+.lt-progress--lg { height: 12px; }
+.lt-progress--sm { height: 3px; }
+.lt-progress-label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  margin-bottom: var(--space-xs);
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+
+/* ----------------------------------------------------------------
+   28. TOOLTIPS
+   ---------------------------------------------------------------- */
+[data-tooltip] {
+  position: relative;
+  cursor: help;
+}
+[data-tooltip]::before,
+[data-tooltip]::after {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  z-index: var(--z-tooltip);
+}
+[data-tooltip]::before {
+  content: attr(data-tooltip);
+  background: var(--bg-secondary);
+  border: 1px solid var(--accent-cyan);
+  box-shadow: var(--box-glow-cyan);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  padding: 4px 8px;
+  white-space: nowrap;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
+}
+[data-tooltip]::after {
+  content: '';
+  border: 5px solid transparent;
+  border-top-color: var(--accent-cyan);
+  bottom: calc(100% + 3px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+}
+[data-tooltip]:hover::before,
+[data-tooltip]:focus-visible::before,
+[data-tooltip]:hover::after,
+[data-tooltip]:focus-visible::after {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+[data-tooltip][data-tooltip-pos="bottom"]::before {
+  bottom: auto;
+  top: calc(100% + 8px);
+  transform: translateX(-50%) translateY(-4px);
+  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
+}
+[data-tooltip][data-tooltip-pos="bottom"]::after {
+  bottom: auto;
+  top: calc(100% + 3px);
+  border-top-color: transparent;
+  border-bottom-color: var(--accent-cyan);
+  transform: translateX(-50%) translateY(-4px);
+}
+[data-tooltip][data-tooltip-pos="bottom"]:hover::before,
+[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::before,
+[data-tooltip][data-tooltip-pos="bottom"]:hover::after,
+[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::after {
+  transform: translateX(-50%) translateY(0);
+}
+
+
+/* ----------------------------------------------------------------
+   29. BREADCRUMBS
+   ---------------------------------------------------------------- */
+.lt-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  flex-wrap: wrap;
+}
+.lt-breadcrumb-item { display: flex; align-items: center; gap: var(--space-xs); }
+.lt-breadcrumb-item a {
+  color: var(--text-dim);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.lt-breadcrumb-item a:hover { color: var(--accent-cyan); }
+.lt-breadcrumb-item a:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; }
+.lt-breadcrumb-item.active { color: var(--accent-orange); }
+.lt-breadcrumb-sep { color: var(--border-dim); }
+.lt-breadcrumb-sep::before { content: '/'; }
+
+
+/* ----------------------------------------------------------------
+   30. PAGINATION
+   ---------------------------------------------------------------- */
+.lt-pagination {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+}
+.lt-page-btn {
+  padding: 4px 10px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-dim);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s;
+  text-decoration: none;
+  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
+}
+.lt-page-btn:hover {
+  border-color: var(--accent-cyan);
+  color: var(--accent-cyan);
+  box-shadow: var(--box-glow-cyan);
+}
+.lt-page-btn.active {
+  background: var(--accent-orange);
+  border-color: var(--accent-orange);
+  color: var(--bg-primary);
+  box-shadow: var(--glow-orange);
+  font-weight: 700;
+}
+.lt-page-btn:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 1px;
+  border-color: var(--accent-cyan);
+  color: var(--accent-cyan);
+}
+.lt-page-btn:disabled,
+.lt-page-btn[aria-disabled="true"] {
+  opacity: 0.35;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+
+/* ----------------------------------------------------------------
+   31. ACCORDION
+   ---------------------------------------------------------------- */
+.lt-accordion { border: 1px solid var(--border-dim); }
+.lt-accordion + .lt-accordion { border-top: none; }
+.lt-accordion-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-sm) var(--space-md);
+  background: var(--bg-secondary);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-primary);
+  transition: background 0.15s, color 0.15s;
+  user-select: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+}
+.lt-accordion-header:hover  { background: var(--bg-tertiary); color: var(--accent-cyan); }
+.lt-accordion-header:active { background: var(--bg-tertiary); opacity: 0.8; }
+.lt-accordion-header:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; }
+.lt-accordion-header[aria-expanded="true"] { color: var(--accent-orange); }
+.lt-accordion-icon {
+  width: 14px;
+  height: 14px;
+  transition: transform 0.25s ease;
+  flex-shrink: 0;
+}
+.lt-accordion-header[aria-expanded="true"] .lt-accordion-icon { transform: rotate(180deg); }
+.lt-accordion-body {
+  overflow: hidden;
+  height: 0;
+  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: var(--bg-primary);
+}
+/* .is-open height is set dynamically by JS (scrollHeight) */
+.lt-accordion-body.is-open { height: auto; }
+.lt-accordion-content { padding: var(--space-md); }
+
+
+/* ----------------------------------------------------------------
+   32. ALERT BANNERS
+   ---------------------------------------------------------------- */
+.lt-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  border-left: 3px solid var(--accent-cyan);
+  background: rgba(0,212,255,0.06);
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  position: relative;
+  overflow: hidden;
+  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
+}
+.lt-alert--warning { border-left-color: var(--accent-orange); background: rgba(255,107,0,0.06); }
+.lt-alert--error   { border-left-color: var(--accent-red);    background: rgba(255,45,85,0.06); }
+.lt-alert--success { border-left-color: var(--accent-green);  background: rgba(0,255,136,0.06); }
+.lt-alert--purple  { border-left-color: var(--accent-purple); background: rgba(191,95,255,0.06); }
+.lt-alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
+.lt-alert-body { flex: 1; }
+.lt-alert-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); margin-bottom: 2px; }
+.lt-alert-msg { color: var(--text-secondary); }
+.lt-alert-close {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0 0 0 var(--space-sm);
+  line-height: 1;
+  flex-shrink: 0;
+  transition: color 0.15s;
+}
+.lt-alert-close:hover { color: var(--accent-red); }
+.lt-alert-close:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; }
+.lt-alert.dismissed { max-height: 0 !important; opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
+
+
+/* ----------------------------------------------------------------
+   33. TOGGLE SWITCH
+   ---------------------------------------------------------------- */
+.lt-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+}
+/* Visually hidden but still keyboard-focusable */
+.lt-toggle input {
+  position: absolute;
+  opacity: 0;
+  width: 1px; height: 1px;
+  margin: -1px; padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.lt-toggle input:focus-visible ~ .lt-toggle-track {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 2px;
+}
+.lt-toggle-track {
+  width: 36px;
+  height: 18px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-dim);
+  border-radius: 0;
+  position: relative;
+  transition: all 0.2s ease;
+  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
+}
+.lt-toggle input:checked ~ .lt-toggle-track {
+  background: var(--accent-orange);
+  border-color: var(--accent-orange);
+  box-shadow: var(--glow-orange);
+}
+.lt-toggle-thumb {
+  position: absolute;
+  top: 2px; left: 2px;
+  width: 12px; height: 12px;
+  background: var(--text-dim);
+  transition: transform 0.2s ease, background 0.2s ease;
+}
+.lt-toggle input:checked ~ .lt-toggle-track .lt-toggle-thumb {
+  transform: translateX(18px);
+  background: var(--bg-primary);
+}
+.lt-toggle-label { color: var(--text-secondary); user-select: none; }
+.lt-toggle input:checked ~ .lt-toggle-label { color: var(--text-primary); }
+
+
+/* ----------------------------------------------------------------
+   34. RANGE SLIDER
+   ---------------------------------------------------------------- */
+.lt-range-wrap { display: flex; flex-direction: column; gap: var(--space-xs); }
+.lt-range-header { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.75rem; }
+.lt-range-label { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
+.lt-range-value { color: var(--accent-orange); font-weight: 700; }
+input[type="range"].lt-range {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 4px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-dim);
+  outline: none; /* reset; :focus-visible below provides keyboard ring */
+  cursor: pointer;
+}
+input[type="range"].lt-range:focus-visible {
+  outline: 2px solid var(--accent-orange);
+  outline-offset: 4px;
+}
+input[type="range"].lt-range:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+input[type="range"].lt-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px; height: 14px;
+  background: var(--accent-orange);
+  box-shadow: var(--glow-orange);
+  cursor: pointer;
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  transition: transform 0.15s;
+}
+input[type="range"].lt-range::-webkit-slider-thumb:hover { transform: scale(1.3); }
+input[type="range"].lt-range:focus-visible::-webkit-slider-thumb { transform: scale(1.3); box-shadow: 0 0 0 3px var(--bg-primary), 0 0 0 5px var(--accent-cyan); }
+input[type="range"].lt-range::-moz-range-thumb {
+  width: 14px; height: 14px;
+  background: var(--accent-orange);
+  border: none;
+  cursor: pointer;
+}
+
+
+/* ----------------------------------------------------------------
+   35. FILE UPLOAD / DROPZONE
+   ---------------------------------------------------------------- */
+.lt-dropzone {
+  border: 2px dashed var(--border-dim);
+  background: var(--bg-secondary);
+  padding: var(--space-xl);
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: var(--font-mono);
+  position: relative;
+  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
+}
+.lt-dropzone:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; }
+.lt-dropzone:hover,
+.lt-dropzone.drag-over {
+  border-color: var(--accent-cyan);
+  background: rgba(0,212,255,0.05);
+  box-shadow: var(--box-glow-cyan);
+}
+.lt-dropzone-icon { font-size: 2rem; margin-bottom: var(--space-sm); opacity: 0.5; }
+.lt-dropzone-text { color: var(--text-secondary); font-size: 0.8rem; }
+.lt-dropzone-text strong { color: var(--accent-cyan); }
+.lt-dropzone-hint { font-size: 0.7rem; color: var(--text-dim); margin-top: var(--space-xs); }
+.lt-dropzone input[type="file"] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.lt-file-list { margin-top: var(--space-sm); display: flex; flex-direction: column; gap: 4px; }
+.lt-file-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px var(--space-sm);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-dim);
+  font-size: 0.75rem;
+  font-family: var(--font-mono);
+}
+.lt-file-item-name { color: var(--text-secondary); }
+.lt-file-item-size { color: var(--text-dim); }
+.lt-file-item-remove { background: none; border: none; color: var(--accent-red); cursor: pointer; padding: 0; font-size: 0.9rem; }
+.lt-file-item-remove:hover { opacity: 0.75; text-shadow: var(--glow-red); }
+.lt-file-item-remove:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; }
+
+
+/* ----------------------------------------------------------------
+   36. COMMAND PALETTE
+   ---------------------------------------------------------------- */
+.lt-cmd-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(3,5,8,0.85);
+  backdrop-filter: blur(4px);
+  z-index: var(--z-modal);
+  display: none;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 12vh;
+}
+.lt-cmd-overlay.is-open { display: flex; }
+.lt-cmd-palette {
+  width: 100%;
+  max-width: 560px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--accent-cyan);
+  box-shadow: var(--box-glow-cyan);
+  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
+}
+.lt-cmd-input-wrap {
+  display: flex;
+  align-items: center;
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--border-dim);
+  gap: var(--space-sm);
+}
+.lt-cmd-prompt { color: var(--accent-cyan); font-family: var(--font-mono); font-size: 1rem; }
+.lt-cmd-input {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+  caret-color: var(--accent-orange);
+}
+.lt-cmd-input-wrap:focus-within { border-bottom-color: var(--accent-cyan); }
+.lt-cmd-results { max-height: 320px; overflow-y: auto; }
+.lt-cmd-group-label {
+  padding: var(--space-xs) var(--space-md);
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-dim);
+  border-bottom: 1px solid var(--border-dim);
+}
+.lt-cmd-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  transition: background 0.1s;
+}
+.lt-cmd-item:hover,
+.lt-cmd-item.is-selected,
+.lt-cmd-item:focus-visible {
+  background: rgba(0,212,255,0.08);
+  color: var(--accent-cyan);
+}
+.lt-cmd-item-icon { width: 16px; text-align: center; opacity: 0.6; flex-shrink: 0; }
+.lt-cmd-item-label { flex: 1; }
+.lt-cmd-item-kbd {
+  font-size: 0.65rem;
+  padding: 2px 5px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-dim);
+  color: var(--text-dim);
+}
+.lt-cmd-footer {
+  display: flex;
+  gap: var(--space-md);
+  padding: var(--space-xs) var(--space-md);
+  border-top: 1px solid var(--border-dim);
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  color: var(--text-dim);
+}
+.lt-cmd-footer kbd { background: var(--bg-tertiary); border: 1px solid var(--border-dim); padding: 1px 4px; margin: 0 2px; }
+.lt-cmd-empty {
+  padding: var(--space-lg);
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--text-dim);
+}
+
+
+/* ----------------------------------------------------------------
+   37. CODE BLOCKS
+   ---------------------------------------------------------------- */
+.lt-code-block {
+  position: relative;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-dim);
+  overflow: hidden;
+}
+.lt-code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px var(--space-md);
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-dim);
+}
+.lt-code-lang {
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--accent-orange);
+}
+.lt-code-copy {
+  background: none;
+  border: 1px solid var(--border-dim);
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  padding: 2px 8px;
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: all 0.15s;
+}
+.lt-code-copy:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
+.lt-code-copy:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
+.lt-code-copy.copied { border-color: var(--accent-green); color: var(--accent-green); }
+.lt-code-block pre {
+  margin: 0;
+  padding: var(--space-md);
+  overflow-x: auto;
+  overflow-y: auto;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  line-height: 1.6;
+  color: var(--text-secondary);
+  max-height: 400px;
+}
+.lt-code-block code { background: none; border: none; padding: 0; color: inherit; }
+/* Syntax highlight tokens */
+.tok-kw   { color: var(--accent-cyan); }
+.tok-str  { color: var(--accent-green); }
+.tok-num  { color: var(--accent-orange); }
+.tok-cmt  { color: var(--color-tok-cmt); font-style: italic; }
+.tok-fn   { color: var(--accent-purple); }
+
+
+/* ----------------------------------------------------------------
+   38. TAGS / CHIPS
+   ---------------------------------------------------------------- */
+.lt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
+.lt-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-dim);
+  color: var(--text-secondary);
+  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
+  white-space: nowrap;
+}
+.lt-tag--orange { border-color: var(--accent-orange); color: var(--accent-orange); background: rgba(255,107,0,0.08); }
+.lt-tag--cyan   { border-color: var(--accent-cyan);   color: var(--accent-cyan);   background: rgba(0,212,255,0.08); }
+.lt-tag--green  { border-color: var(--accent-green);  color: var(--accent-green);  background: rgba(0,255,136,0.08); }
+.lt-tag--red    { border-color: var(--accent-red);    color: var(--accent-red);    background: rgba(255,45,85,0.08); }
+.lt-tag--purple { border-color: var(--accent-purple); color: var(--accent-purple); background: rgba(191,95,255,0.08); }
+.lt-tag-remove {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  font-size: 0.8rem;
+  opacity: 0.6;
+  line-height: 1;
+}
+.lt-tag-remove:hover { opacity: 1; }
+.lt-tag-remove:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; border-radius: 2px; opacity: 1; }
+
+
+/* ----------------------------------------------------------------
+   39. NOTIFICATION BADGES
+   ---------------------------------------------------------------- */
+.lt-badge-wrap { position: relative; display: inline-flex; }
+/* Notification counter badge — only absolute when inside .lt-badge-wrap */
+.lt-badge-wrap .lt-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  font-weight: 700;
+  background: var(--accent-red);
+  color: var(--bg-primary);
+  position: absolute;
+  top: -6px; right: -8px;
+  box-shadow: 0 0 6px var(--accent-red);
+}
+.lt-badge-wrap .lt-badge--orange { background: var(--accent-orange); box-shadow: var(--glow-orange); }
+.lt-badge-wrap .lt-badge--cyan   { background: var(--accent-cyan);   box-shadow: var(--glow-cyan);   color: var(--bg-primary); }
+.lt-badge-wrap .lt-badge--green  { background: var(--accent-green);  box-shadow: var(--glow-green);  color: var(--bg-primary); }
+.lt-badge-inline {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  font-weight: 700;
+  background: var(--accent-orange);
+  color: var(--bg-primary);
+  vertical-align: middle;
+}
+
+
+/* ----------------------------------------------------------------
+   40. STEPPER / WIZARD
+   ---------------------------------------------------------------- */
+.lt-stepper {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+}
+.lt-step {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  text-align: center;
+}
+.lt-step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 14px;
+  left: calc(50% + 14px);
+  right: calc(-50% + 14px);
+  height: 1px;
+  background: var(--border-dim);
+}
+.lt-step.complete:not(:last-child)::after { background: var(--accent-orange); }
+.lt-step-num {
+  width: 28px; height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-dim);
+  background: var(--bg-secondary);
+  color: var(--text-dim);
+  font-weight: 700;
+  margin-bottom: 6px;
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+}
+.lt-step.active .lt-step-num {
+  border-color: var(--accent-orange);
+  background: var(--accent-orange);
+  color: var(--bg-primary);
+  box-shadow: var(--glow-orange);
+}
+.lt-step.complete .lt-step-num {
+  border-color: var(--accent-green);
+  background: var(--bg-secondary);
+  color: var(--accent-green);
+  box-shadow: var(--glow-green);
+}
+.lt-step-label { color: var(--text-dim); }
+.lt-step.active .lt-step-label  { color: var(--text-primary); }
+.lt-step.complete .lt-step-label { color: var(--text-secondary); }
+
+
+/* ----------------------------------------------------------------
+   41. LIST GROUPS
+   ---------------------------------------------------------------- */
+.lt-list-group { border: 1px solid var(--border-dim); }
+.lt-list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--border-dim);
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  transition: background 0.12s;
+}
+.lt-list-item:last-child { border-bottom: none; }
+.lt-list-item:hover { background: var(--bg-tertiary); }
+.lt-list-item a {
+  color: var(--text-primary);
+  text-decoration: none;
+  flex: 1;
+}
+.lt-list-item a:hover { color: var(--accent-cyan); }
+.lt-list-item a:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; }
+.lt-list-item-meta { color: var(--text-dim); font-size: 0.7rem; margin-left: auto; }
+.lt-list-item--active { background: rgba(255,107,0,0.06); border-left: 2px solid var(--accent-orange); }
+
+
+/* ----------------------------------------------------------------
+   42. KEY-VALUE PAIRS / DATA GRID
+   ---------------------------------------------------------------- */
+.lt-kv-grid {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 1px;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+}
+.lt-kv-key {
+  padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.7rem;
+  white-space: nowrap;
+  border-right: 1px solid var(--border-dim);
+}
+.lt-kv-val {
+  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
+  color: var(--text-primary);
+}
+.lt-kv-val--orange { color: var(--accent-orange); }
+.lt-kv-val--cyan   { color: var(--accent-cyan); }
+.lt-kv-val--green  { color: var(--accent-green); }
+.lt-kv-val--red    { color: var(--accent-red); }
+
+/* lt-kv-row / lt-kv-label / lt-kv-value — alternate KV row pattern using
+   CSS `display: contents` so children become direct grid items of lt-kv-grid */
+.lt-kv-row {
+  display: contents;
+}
+.lt-kv-label {
+  padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
+  color: var(--text-dim);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--border-dim);
+  align-self: center;
+}
+.lt-kv-value {
+  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border-dim);
+  min-width: 0;
+  overflow-wrap: break-word;
+  align-self: center;
+}
+
+
+/* ----------------------------------------------------------------
+   43. HERO / BANNER SECTION
+   ---------------------------------------------------------------- */
+.lt-hero {
+  position: relative;
+  padding: var(--space-xl) 0;
+  text-align: center;
+  overflow: hidden;
+}
+.lt-hero::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,107,0,0.08) 0%, transparent 70%);
+  pointer-events: none;
+}
+.lt-hero-eyebrow {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  color: var(--accent-orange);
+  margin-bottom: var(--space-sm);
+}
+.lt-hero-title {
+  font-family: var(--font-mono);
+  font-size: clamp(1.8rem, 5vw, 3.5rem);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-primary);
+  text-shadow: var(--glow-orange);
+  line-height: 1.1;
+  margin-bottom: var(--space-md);
+}
+.lt-hero-sub {
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  max-width: 560px;
+  margin: 0 auto var(--space-lg);
+  line-height: 1.6;
+}
+.lt-hero-actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }
+
+
+/* ----------------------------------------------------------------
+   44. DIVIDER WITH LABEL
+   ---------------------------------------------------------------- */
+.lt-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  margin: var(--space-lg) 0;
+}
+.lt-divider::before,
+.lt-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border-dim);
+}
+.lt-divider-label {
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--text-dim);
+  white-space: nowrap;
+}
+.lt-divider--orange::before,
+.lt-divider--orange::after { background: var(--accent-orange); }
+.lt-divider--orange .lt-divider-label { color: var(--accent-orange); }
+
+
+/* ----------------------------------------------------------------
+   45. CUSTOM SCROLLBAR
+   ---------------------------------------------------------------- */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--bg-primary); }
+::-webkit-scrollbar-thumb { background: var(--bg-tertiary); }
+::-webkit-scrollbar-thumb:hover { background: var(--accent-orange); }
+
+
+/* ----------------------------------------------------------------
+   46. RESPONSIVE TABLE → CARD MODE
+   ---------------------------------------------------------------- */
+@media (max-width: 767px) {
+  .lt-table-responsive thead { display: none; }
+  .lt-table-responsive tbody tr {
+    display: block;
+    border: 1px solid var(--border-dim);
+    margin-bottom: var(--space-sm);
+    background: var(--bg-secondary);
+    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
+  }
+  .lt-table-responsive td {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-xs) var(--space-sm);
+    border-bottom: 1px solid var(--border-dim);
+    font-size: 0.78rem;
+    min-height: 36px;
+  }
+  .lt-table-responsive td:last-child { border-bottom: none; }
+  .lt-table-responsive td::before {
+    content: attr(data-label);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-dim);
+    font-size: 0.72rem;
+    flex-shrink: 0;
+    margin-right: var(--space-sm);
+  }
+}
+
+
+/* ----------------------------------------------------------------
+   47. GAUGE / METER
+   ---------------------------------------------------------------- */
+.lt-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
+.lt-gauge {
+  position: relative;
+  width: 100px;
+  height: 55px;
+  overflow: visible;
+}
+.lt-gauge svg { overflow: visible; }
+.lt-gauge-track { fill: none; stroke: var(--bg-tertiary); stroke-width: 8; }
+.lt-gauge-fill  { fill: none; stroke: var(--accent-orange); stroke-width: 8; stroke-linecap: butt;
+                  transition: stroke-dashoffset 0.6s cubic-bezier(0.4,0,0.2,1);
+                  will-change: stroke-dashoffset; }
+.lt-gauge-label {
+  position: absolute;
+  bottom: 0; left: 50%;
+  transform: translateX(-50%);
+  font-family: var(--font-mono);
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--accent-orange);
+  text-shadow: var(--glow-orange);
+  white-space: nowrap;
+}
+.lt-gauge-caption { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); }
+
+
+/* ----------------------------------------------------------------
+   48. SPINNERS / LOADERS
+   ---------------------------------------------------------------- */
+.lt-spinner {
+  display: inline-block;
+  width: 24px; height: 24px;
+  border: 2px solid var(--bg-tertiary);
+  border-top-color: var(--accent-orange);
+  border-radius: 50%;
+  animation: lt-spin 0.7s linear infinite;
+  will-change: transform;
+}
+.lt-spinner--cyan   { border-top-color: var(--accent-cyan); }
+.lt-spinner--green  { border-top-color: var(--accent-green); }
+.lt-spinner--sm { width: 14px; height: 14px; border-width: 1.5px; }
+.lt-spinner--lg { width: 40px; height: 40px; border-width: 3px; }
+@keyframes lt-spin { to { transform: rotate(360deg); } }
+
+.lt-pulse-dot {
+  display: inline-block;
+  width: 8px; height: 8px;
+  background: var(--accent-green);
+  border-radius: 50%;
+  animation: lt-pulse 1.4s ease-in-out infinite;
+  box-shadow: 0 0 6px var(--accent-green);
+}
+@keyframes lt-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%       { opacity: 0.4; transform: scale(0.7); }
+}
+
+.lt-bar-loader {
+  display: flex;
+  gap: 3px;
+  align-items: flex-end;
+  height: 20px;
+}
+.lt-bar-loader span {
+  width: 4px;
+  background: var(--accent-orange);
+  box-shadow: var(--glow-orange);
+  animation: lt-bars 1s ease-in-out infinite;
+}
+.lt-bar-loader span:nth-child(2) { animation-delay: 0.1s; }
+.lt-bar-loader span:nth-child(3) { animation-delay: 0.2s; }
+.lt-bar-loader span:nth-child(4) { animation-delay: 0.3s; }
+@keyframes lt-bars {
+  0%, 100% { height: 4px; }
+  50%       { height: 20px; }
+}
+
+
+/* ----------------------------------------------------------------
+   49. TAB BAR
+   ---------------------------------------------------------------- */
+.lt-tab-bar {
+  display: flex;
+  border-bottom: 1px solid var(--border-dim);
+  gap: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.lt-tab-bar::-webkit-scrollbar { display: none; }
+.lt-tab {
+  padding: var(--space-sm) var(--space-md);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  cursor: pointer;
+  border: none;
+  background: none;
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s;
+  white-space: nowrap;
+  text-decoration: none;
+  display: inline-block;
+}
+.lt-tab:hover { color: var(--text-secondary); }
+.lt-tab.active,
+.lt-tab[aria-selected="true"] {
+  color: var(--accent-orange);
+  border-bottom-color: var(--accent-orange);
+  text-shadow: var(--glow-orange);
+}
+.lt-tab-panels .lt-tab-panel { display: none; }
+.lt-tab-panels .lt-tab-panel.active { display: block; }
+
+
+/* ----------------------------------------------------------------
+   50. UTILITY CLASSES
+   ---------------------------------------------------------------- */
+/* Text colors */
+.lt-text-orange { color: var(--accent-orange); }
+.lt-text-cyan   { color: var(--accent-cyan); }
+.lt-text-green  { color: var(--accent-green); }
+.lt-text-red    { color: var(--accent-red); }
+.lt-text-purple { color: var(--accent-purple); }
+.lt-text-dim    { color: var(--text-dim); }
+.lt-text-muted  { color: var(--text-secondary); }
+
+/* Glow text */
+.lt-glow-orange { text-shadow: var(--glow-orange); }
+.lt-glow-cyan   { text-shadow: var(--glow-cyan); }
+.lt-glow-green  { text-shadow: var(--glow-green); }
+.lt-glow-red    { text-shadow: var(--glow-red); }
+
+/* Backgrounds */
+.lt-bg-secondary  { background: var(--bg-secondary); }
+.lt-bg-tertiary   { background: var(--bg-tertiary); }
+
+/* Border accents */
+.lt-border-orange { border-color: var(--accent-orange) !important; }
+.lt-border-cyan   { border-color: var(--accent-cyan) !important; }
+.lt-border-green  { border-color: var(--accent-green) !important; }
+.lt-border-red    { border-color: var(--accent-red) !important; }
+
+/* Display */
+.lt-visible  { display: block !important; }
+.lt-flex     { display: flex; }
+.lt-grid     { display: grid; }
+.lt-inline   { display: inline; }
+.lt-iflex    { display: inline-flex; }
+
+/* Flex helpers */
+.lt-gap-xs { gap: var(--space-xs); }
+.lt-gap-sm { gap: var(--space-sm); }
+.lt-gap-md { gap: var(--space-md); }
+.lt-gap-lg { gap: var(--space-lg); }
+.lt-align-center  { align-items: center; }
+.lt-align-start   { align-items: flex-start; }
+.lt-justify-between { justify-content: space-between; }
+.lt-justify-center  { justify-content: center; }
+.lt-justify-end     { justify-content: flex-end; }
+.lt-wrap { flex-wrap: wrap; }
+
+/* Spacing */
+.lt-mt-xs { margin-top: var(--space-xs); }
+.lt-mt-sm { margin-top: var(--space-sm); }
+.lt-mt-md { margin-top: var(--space-md); }
+.lt-mt-lg { margin-top: var(--space-lg); }
+.lt-mb-xs { margin-bottom: var(--space-xs); }
+.lt-mb-sm { margin-bottom: var(--space-sm); }
+.lt-mb-md { margin-bottom: var(--space-md); }
+.lt-mb-lg { margin-bottom: var(--space-lg); }
+.lt-p-sm { padding: var(--space-sm); }
+.lt-p-md { padding: var(--space-md); }
+.lt-p-lg { padding: var(--space-lg); }
+
+/* Text helpers */
+.lt-mono        { font-family: var(--font-mono); }
+.lt-uppercase   { text-transform: uppercase; }
+.lt-bold        { font-weight: 700; }
+.lt-small       { font-size: 0.75rem; }
+.lt-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lt-no-wrap     { white-space: nowrap; }
+.lt-text-center { text-align: center; }
+.lt-text-right  { text-align: right; }
+
+/* Opacity */
+.lt-opacity-50 { opacity: 0.5; }
+.lt-opacity-75 { opacity: 0.75; }
+
+/* Cursor */
+.lt-cursor-pointer { cursor: pointer; }
+.lt-cursor-help    { cursor: help; }
+
+/* Width helpers */
+.lt-w-full { width: 100%; }
+.lt-w-auto { width: auto; }
+
+/* Status dot */
+.lt-dot {
+  display: inline-block;
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.lt-dot--green  { background: var(--accent-green);  box-shadow: 0 0 6px var(--accent-green); }
+.lt-dot--orange { background: var(--accent-orange); box-shadow: var(--glow-orange); }
+.lt-dot--red    { background: var(--accent-red);    box-shadow: 0 0 6px var(--accent-red); }
+.lt-dot--dim    { background: var(--text-dim); }
+
+/* Monospace table-style number alignment */
+.lt-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
+
+
+/* ================================================================
+   v1.1 COMPONENT EXTENSIONS
+   51. Light Theme
+   52. Theme Toggle Button
+   53. Skeleton Loader Variants
+   54. Empty State Enhancements
+   55. Nav Notification Badge
+   56. Right-Side Drawer
+   57. Sticky Table
+   58. Multi-Select / Combobox
+   59. Context Menu
+   60. Offline Banner
+   61. Timeline / Activity Feed
+   62. Avatar
+   63. Split Pane
+   64. Chart Container
+   65. Toast Queue
+   66. Autocomplete / Typeahead
+   67. WebSocket Status
+   68. Print Enhancements
+   ================================================================ */
+
+
+/* ----------------------------------------------------------------
+   51. LIGHT THEME
+   ---------------------------------------------------------------- */
+/* ================================================================
+   LIGHT MODE — complete token overrides
+   Design intent: "military intelligence dashboard, daylight reading"
+   Clean off-white surfaces, desaturated accents, no neon.
+   ================================================================ */
+html[data-theme="light"] {
+  /* — Surfaces — */
+  --bg-primary:   #edf0f5;
+  --bg-secondary: #e2e7ef;
+  --bg-tertiary:  #d4dae6;
+  --bg-card:      #ffffff;
+  --bg-terminal:  #f4f6fa;
+  --bg-overlay:   rgba(237,240,245,0.97);
+  --bg-input:     #ffffff;
+
+  /* — Typography — */
+  --text-primary:   #111827;   /* near-black, high contrast */
+  --text-secondary: #2d3d56;
+  --text-muted:     #5a6e8c;
+  --text-dim:       #8a9ab8;
+
+  /* — Borders — */
+  --border-color:     rgba(50,80,130,0.18);
+  --border-color-hi:  #0062b8;
+  --border-color-dim: rgba(50,80,130,0.09);
+  --border-dim:       rgba(50,80,130,0.09);
+
+  /* — Accent colors: desaturated for readability on white — */
+  --accent-orange:       #c44e00;
+  --accent-cyan:         #0062b8;
+  --accent-green:        #006d35;
+  --accent-red:          #b5001f;
+  --accent-amber:        #8a5a00;
+  --accent-purple:       #6b2fb8;
+
+  /* — Accent tints — */
+  --accent-orange-dim:   rgba(196,78,0,0.10);
+  --accent-cyan-dim:     rgba(0,98,184,0.10);
+  --accent-green-dim:    rgba(0,109,53,0.10);
+  --accent-red-dim:      rgba(181,0,31,0.10);
+  --accent-amber-dim:    rgba(138,90,0,0.10);
+  --accent-cyan-border:  rgba(0,98,184,0.28);
+  --accent-green-border: rgba(0,109,53,0.28);
+  --shadow-color:        rgba(50,80,130,0.18);
+
+  /* — Glows become subtle drop shadows in light mode — */
+  --glow-orange:         0 0 0 1px rgba(196,78,0,0.25),  0 1px 6px rgba(196,78,0,0.18);
+  --glow-cyan:           0 0 0 1px rgba(0,98,184,0.25),  0 1px 6px rgba(0,98,184,0.18);
+  --glow-green:          0 0 0 1px rgba(0,109,53,0.25),  0 1px 6px rgba(0,109,53,0.18);
+  --glow-red:            0 0 0 1px rgba(181,0,31,0.25),  0 1px 6px rgba(181,0,31,0.18);
+  --glow-amber:          0 0 0 1px rgba(138,90,0,0.25),  0 1px 6px rgba(138,90,0,0.18);
+  --glow-orange-intense: 0 0 0 2px rgba(196,78,0,0.35),  0 2px 10px rgba(196,78,0,0.25);
+  --glow-cyan-intense:   0 0 0 2px rgba(0,98,184,0.35),  0 2px 10px rgba(0,98,184,0.25);
+  --glow-green-intense:  0 0 0 2px rgba(0,109,53,0.35),  0 2px 10px rgba(0,109,53,0.25);
+  --glow-amber-intense:  0 0 0 2px rgba(138,90,0,0.35),  0 2px 10px rgba(138,90,0,0.25);
+
+  /* — Box glows (card/input focus rings) — */
+  --box-glow-orange: 0 0 0 2px rgba(196,78,0,0.22),   0 2px 8px rgba(196,78,0,0.12);
+  --box-glow-cyan:   0 0 0 2px rgba(0,98,184,0.22),   0 2px 8px rgba(0,98,184,0.12);
+  --box-glow-green:  0 0 0 2px rgba(0,109,53,0.22),   0 2px 8px rgba(0,109,53,0.12);
+  --box-glow-red:    0 0 0 2px rgba(181,0,31,0.22),   0 2px 8px rgba(181,0,31,0.12);
+  --box-glow-amber:  0 0 0 2px rgba(138,90,0,0.22),   0 2px 8px rgba(138,90,0,0.12);
+
+  /* — Syntax highlight — */
+  --color-tok-cmt: #2e6540;
+
+  color-scheme: light;
+}
+
+/* — CRT / vignette / scanlines — off in light mode — */
+html[data-theme="light"] body::before,
+html[data-theme="light"] body::after { display: none; }
+
+/* — Dot-grid: neutral gray, not blue — */
+html[data-theme="light"] {
+  background-image: radial-gradient(circle, rgba(90,110,150,0.14) 1px, transparent 1px);
+  background-color: var(--bg-primary);
+}
+
+/* — Layout chrome — */
+html[data-theme="light"] .lt-header {
+  background: rgba(237,240,245,0.97);
+  border-bottom-color: var(--border-color);
+  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
+}
+html[data-theme="light"] .lt-main { background: transparent; }
+html[data-theme="light"] .lt-sidebar {
+  background: var(--bg-secondary);
+  border-color: var(--border-color);
+  box-shadow: none;
+}
+html[data-theme="light"] .lt-nav-drawer {
+  background: var(--bg-card);
+  box-shadow: 2px 0 16px rgba(0,0,0,0.12);
+}
+html[data-theme="light"] .lt-nav-drawer-overlay { background: rgba(0,0,0,0.25); }
+
+/* — Nav links — */
+html[data-theme="light"] .lt-nav-link,
+html[data-theme="light"] .lt-nav-link:hover        { color: var(--text-secondary); }
+html[data-theme="light"] .lt-nav-link.active        { color: var(--accent-orange); }
+html[data-theme="light"] .lt-nav-drawer-link        { color: var(--text-secondary); }
+html[data-theme="light"] .lt-nav-drawer-link:hover  { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
+html[data-theme="light"] .lt-nav-drawer-link.active { color: var(--accent-orange); background: var(--accent-orange-dim); }
+html[data-theme="light"] .lt-nav-drawer-link:focus-visible { outline: none; color: var(--accent-cyan); background: var(--accent-cyan-dim); box-shadow: inset 3px 0 0 var(--accent-cyan); }
+html[data-theme="light"] .lt-sidebar-nav-link        { color: var(--text-secondary); }
+html[data-theme="light"] .lt-sidebar-nav-link:hover  { background: var(--accent-cyan-dim); }
+html[data-theme="light"] .lt-sidebar-nav-link.active { background: var(--accent-orange-dim); color: var(--accent-orange); }
+
+/* — Surfaces: cards, frames, sections — */
+html[data-theme="light"] .lt-card,
+html[data-theme="light"] .lt-frame   {
+  background: var(--bg-card);
+  border-color: var(--border-color);
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+}
+html[data-theme="light"] .lt-section { background: var(--bg-card); border-color: var(--border-color); }
+html[data-theme="light"] .lt-section-header {
+  background: linear-gradient(90deg, var(--bg-secondary) 0%, transparent 100%);
+  border-bottom-color: var(--border-color);
+  color: var(--text-muted);
+}
+html[data-theme="light"] .lt-frame::before { color: var(--accent-orange); opacity: 0.6; }
+html[data-theme="light"] .lt-frame-bl,
+html[data-theme="light"] .lt-frame-br { color: var(--accent-cyan); opacity: 0.5; }
+
+/* — Form controls — */
+html[data-theme="light"] .lt-input,
+html[data-theme="light"] .lt-select,
+html[data-theme="light"] .lt-textarea {
+  background: var(--bg-input);
+  border-color: rgba(50,80,130,0.22);
+  color: var(--text-primary);
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
+}
+html[data-theme="light"] .lt-input:focus-visible,
+html[data-theme="light"] .lt-select:focus-visible,
+html[data-theme="light"] .lt-textarea:focus-visible {
+  border-color: var(--accent-cyan);
+  box-shadow: var(--box-glow-cyan);
+}
+
+/* Native <select> popup in light mode.
+   `.lt-select` sets `color-scheme: dark` on the element itself, which beats the
+   `color-scheme: light` declared on <html>, so the browser drew the dropdown with
+   dark chrome even in light mode. Reset it per element, and re-tint the option
+   list, which is otherwise hardcoded to #0d1117 for the dark theme. */
+html[data-theme="light"] .lt-select { color-scheme: light; }
+html[data-theme="light"] .lt-select option,
+html[data-theme="light"] select option {
+  background: var(--bg-input);
+  color: var(--text-primary);
+}
+html[data-theme="light"] .lt-select option:hover,
+html[data-theme="light"] .lt-select option:focus,
+html[data-theme="light"] .lt-select option:checked,
+html[data-theme="light"] select option:checked {
+  background: var(--accent-orange-dim);
+  color: var(--accent-orange);
+}
+html[data-theme="light"] .lt-label { color: var(--text-muted); }
+
+/* — Buttons — */
+html[data-theme="light"] .lt-btn {
+  background: var(--bg-secondary);
+  border-color: var(--border-color);
+  color: var(--text-primary);
+}
+html[data-theme="light"] .lt-btn:hover {
+  background: var(--bg-tertiary);
+  border-color: rgba(50,80,130,0.3);
+}
+html[data-theme="light"] .lt-btn-primary { background: var(--accent-cyan); color: #fff; border-color: var(--accent-cyan); }
+html[data-theme="light"] .lt-btn-primary:hover { background: #0070cc; border-color: #0070cc; }
+html[data-theme="light"] .lt-btn-danger  { background: var(--accent-red);  color: #fff; border-color: var(--accent-red); }
+html[data-theme="light"] .lt-btn-ghost   { background: transparent; border-color: var(--border-color); color: var(--text-secondary); }
+html[data-theme="light"] .lt-btn-ghost:hover { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
+
+/* — Tables — */
+html[data-theme="light"] .lt-table th       { background: var(--bg-secondary); color: var(--text-muted); border-color: var(--border-color); }
+html[data-theme="light"] .lt-table td       { border-color: var(--border-dim); color: var(--text-secondary); }
+html[data-theme="light"] .lt-table tr:hover td { background: rgba(0,98,184,0.04); }
+html[data-theme="light"] .lt-table-wrap     { border-color: var(--border-color); }
+
+/* — Badges & status — */
+html[data-theme="light"] .lt-badge { background: var(--bg-tertiary); color: var(--text-secondary); }
+html[data-theme="light"] .lt-badge-open        { background: rgba(0,109,53,0.12);   color: #006d35; }
+html[data-theme="light"] .lt-badge-closed      { background: rgba(90,110,150,0.12);  color: #5a6e8c; }
+html[data-theme="light"] .lt-badge-in-progress,
+html[data-theme="light"] .lt-badge-progress    { background: rgba(138,90,0,0.12);   color: #8a5a00; text-shadow: none; }
+html[data-theme="light"] .lt-badge-pending     { background: rgba(107,47,184,0.10);  color: #7c22cc; }
+html[data-theme="light"] .lt-badge-p1          { background: rgba(181,0,31,0.12);   color: #b5001f; text-shadow: none; }
+html[data-theme="light"] .lt-badge-p2          { background: rgba(196,78,0,0.12);   color: #c44e00; }
+html[data-theme="light"] .lt-badge-p3          { background: rgba(138,90,0,0.12);   color: #8a5a00; }
+html[data-theme="light"] .lt-badge-p4          { background: rgba(50,80,130,0.10);  color: #2d3d56; }
+html[data-theme="light"] .lt-badge-admin       { background: rgba(107,47,184,0.12); color: #6b2fb8; }
+
+/* — Toast — */
+html[data-theme="light"] .lt-toast {
+  background: #ffffff;
+  border-color: var(--border-color);
+  border-top-color: var(--border-color);
+  border-right-color: var(--border-color);
+  border-bottom-color: var(--border-color);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
+}
+html[data-theme="light"] .lt-toast-icon { opacity: 0.9; }
+html[data-theme="light"] .lt-toast-msg  { color: var(--text-primary); }
+
+/* — Modals — */
+html[data-theme="light"] .lt-modal-overlay { background: rgba(30,40,70,0.45); }
+html[data-theme="light"] .lt-modal {
+  background: var(--bg-card);
+  border-color: var(--border-color);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+}
+html[data-theme="light"] .lt-modal-header {
+  background: var(--bg-secondary);
+  border-bottom-color: var(--border-color);
+}
+html[data-theme="light"] .lt-modal-footer {
+  background: var(--bg-secondary);
+  border-top-color: var(--border-color);
+}
+
+/* — Command palette — */
+html[data-theme="light"] .lt-cmd-overlay  { background: rgba(30,40,70,0.45); }
+html[data-theme="light"] .lt-cmd-palette  { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
+html[data-theme="light"] .lt-cmd-input    { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); }
+html[data-theme="light"] .lt-cmd-results  { border-top-color: var(--border-color); }
+html[data-theme="light"] .lt-cmd-item     { color: var(--text-secondary); }
+html[data-theme="light"] .lt-cmd-item:hover,
+html[data-theme="light"] .lt-cmd-item.is-active { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
+html[data-theme="light"] .lt-cmd-group-label { color: var(--text-dim); background: var(--bg-secondary); }
+
+/* — Context menu — */
+html[data-theme="light"] .lt-context-menu { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
+html[data-theme="light"] .lt-context-menu-item     { color: var(--text-secondary); }
+html[data-theme="light"] .lt-context-menu-item:hover { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
+html[data-theme="light"] .lt-context-menu-divider  { background: var(--border-dim); }
+
+/* — Right drawer — */
+html[data-theme="light"] .lt-drawer-right {
+  background: var(--bg-card);
+  border-left-color: var(--border-color);
+  box-shadow: -4px 0 24px rgba(0,0,0,0.1);
+}
+html[data-theme="light"] .lt-drawer-right-header  { background: var(--bg-secondary); border-bottom-color: var(--border-color); }
+html[data-theme="light"] .lt-drawer-right-footer  { background: var(--bg-secondary); border-top-color: var(--border-color); }
+html[data-theme="light"] .lt-drawer-right-overlay { background: rgba(30,40,70,0.35); }
+
+/* — Nav dropdown menu — */
+html[data-theme="light"] .lt-nav-dropdown-menu {
+  background: var(--bg-card);
+  border-color: var(--border-color);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+}
+html[data-theme="light"] .lt-nav-dropdown-menu li a {
+  color: var(--text-secondary);
+  border-bottom-color: var(--border-dim);
+}
+html[data-theme="light"] .lt-nav-dropdown-menu li a:hover {
+  color: var(--accent-orange);
+  background: var(--accent-orange-dim);
+}
+
+/* — Dropdowns & notification panel — */
+html[data-theme="light"] .lt-dropdown-panel {
+  background: var(--bg-card);
+  border-color: var(--border-color);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+}
+html[data-theme="light"] .lt-dropdown-item     { color: var(--text-secondary); }
+html[data-theme="light"] .lt-dropdown-item:hover { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
+html[data-theme="light"] .lt-dropdown-divider  { background: var(--border-dim); }
+html[data-theme="light"] .lt-notif-panel {
+  background: var(--bg-card);
+  border-color: var(--border-color);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+}
+html[data-theme="light"] .lt-notif-panel-header  { border-bottom-color: var(--border-dim); color: var(--text-muted); }
+html[data-theme="light"] .lt-notif-item          { border-bottom-color: var(--border-dim); }
+html[data-theme="light"] .lt-notif-item:hover     { background: var(--bg-secondary); }
+html[data-theme="light"] .lt-notif-item--unread  { background: rgba(0,98,184,0.05); }
+html[data-theme="light"] .lt-notif-panel-footer  { border-top-color: var(--border-dim); }
+
+/* — Sidebar / accordion — */
+html[data-theme="light"] .lt-accordion-header    { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
+html[data-theme="light"] .lt-accordion-header:hover { background: var(--bg-tertiary); }
+html[data-theme="light"] .lt-accordion-body      { border-color: var(--border-color); background: var(--bg-card); }
+
+/* — Code / terminal — */
+html[data-theme="light"] code,
+html[data-theme="light"] .lt-code-block          { background: var(--bg-terminal); color: var(--text-primary); border-color: var(--border-color); }
+html[data-theme="light"] .lt-code-block .comment { color: #6c7e99; }
+
+/* — Stat cards — */
+html[data-theme="light"] .lt-stat-card { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
+html[data-theme="light"] .lt-stat-card:hover { box-shadow: var(--box-glow-cyan); border-color: var(--accent-cyan); }
+
+/* — Timeline — */
+html[data-theme="light"] .lt-timeline-item::before { background: var(--border-color); }
+html[data-theme="light"] .lt-timeline-actor { color: var(--accent-cyan); }
+html[data-theme="light"] .lt-timeline-body  { color: var(--text-secondary); }
+
+/* — Dividers — */
+html[data-theme="light"] .lt-divider::before,
+html[data-theme="light"] .lt-divider::after { background: var(--border-color); }
+html[data-theme="light"] .lt-divider-label  { color: var(--text-dim); }
+
+/* — Tags / chips — */
+html[data-theme="light"] .lt-tag  { background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-secondary); }
+
+/* — Tooltips — */
+html[data-theme="light"] [data-tooltip]::before { background: var(--bg-terminal); color: var(--text-primary); }
+html[data-theme="light"] [data-tooltip]::after  { border-top-color: var(--bg-terminal); }
+
+/* — Pagination — */
+html[data-theme="light"] .lt-page-btn         { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); }
+html[data-theme="light"] .lt-page-btn:hover   { background: var(--accent-cyan-dim); border-color: var(--accent-cyan); color: var(--accent-cyan); }
+html[data-theme="light"] .lt-page-btn.active  { background: var(--accent-cyan); color: #fff; border-color: var(--accent-cyan); }
+html[data-theme="light"] .lt-page-btn[disabled] { opacity: 0.4; }
+
+/* — Tabs — */
+html[data-theme="light"] .lt-tab            { color: var(--text-muted); border-bottom-color: transparent; }
+html[data-theme="light"] .lt-tab:hover      { color: var(--text-primary); }
+html[data-theme="light"] .lt-tab.active     { color: var(--accent-orange); border-bottom-color: var(--accent-orange); }
+html[data-theme="light"] .lt-tabs           { border-bottom-color: var(--border-color); }
+
+/* — Offline banner — */
+html[data-theme="light"] .lt-offline-banner { background: rgba(138,90,0,0.12); color: var(--accent-amber); border-color: rgba(138,90,0,0.25); }
+
+/* — WS status indicator — */
+html[data-theme="light"] .lt-ws-status       { color: var(--text-muted); background: var(--bg-tertiary); border-color: var(--border-color); }
+
+/* — Boot overlay — */
+html[data-theme="light"] .lt-boot-overlay   { background: var(--bg-primary); }
+html[data-theme="light"] .lt-boot-text      { color: var(--accent-cyan); }
+
+/* — Section header accent arrow — */
+html[data-theme="light"] .lt-section-title::before { color: var(--accent-orange); opacity: 0.8; }
+
+/* — Breadcrumbs — */
+html[data-theme="light"] .lt-breadcrumb-item a { color: var(--text-muted); }
+html[data-theme="light"] .lt-breadcrumb-item.active { color: var(--text-primary); }
+html[data-theme="light"] .lt-breadcrumb-sep { color: var(--text-dim); }
+
+/* — Progress bars — */
+html[data-theme="light"] .lt-progress       { background: var(--bg-tertiary); }
+html[data-theme="light"] .lt-progress-bar   { background: var(--accent-cyan); }
+
+/* — Skeleton loader — */
+html[data-theme="light"] .lt-skeleton       { background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%); }
+
+/* — Dropzone — */
+html[data-theme="light"] .lt-dropzone       { background: var(--bg-terminal); border-color: var(--border-color); }
+html[data-theme="light"] .lt-dropzone.is-over { border-color: var(--accent-cyan); background: var(--accent-cyan-dim); }
+
+/* — Wizard steps — */
+html[data-theme="light"] .lt-wizard-step-num    { background: var(--bg-tertiary); color: var(--text-muted); border-color: var(--border-color); }
+html[data-theme="light"] .lt-wizard-step.active .lt-wizard-step-num { background: var(--accent-cyan); color: #fff; border-color: var(--accent-cyan); }
+html[data-theme="light"] .lt-wizard-step.done   .lt-wizard-step-num { background: var(--accent-green); color: #fff; border-color: var(--accent-green); }
+html[data-theme="light"] .lt-wizard-connector   { background: var(--border-color); }
+
+/* — Avatar — */
+html[data-theme="light"] .lt-avatar              { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-color); }
+
+/* — Lightbox — */
+html[data-theme="light"] .lt-lightbox-overlay   { background: rgba(15,20,40,0.92); }
+
+/* — Split pane divider — */
+html[data-theme="light"] .lt-split-divider       { background: var(--border-color); }
+html[data-theme="light"] .lt-split-divider:hover { background: var(--accent-cyan); }
+
+/* — Theme button (active state in light mode) — */
+html[data-theme="light"] .lt-theme-btn { color: var(--accent-orange); }
+
+/* — Text glow utilities: replace neon with ink shadow in light mode — */
+html[data-theme="light"] .lt-text-orange  { text-shadow: none; color: var(--accent-orange); }
+html[data-theme="light"] .lt-text-cyan    { text-shadow: none; color: var(--accent-cyan); }
+html[data-theme="light"] .lt-text-green   { text-shadow: none; color: var(--accent-green); }
+html[data-theme="light"] .lt-text-red     { text-shadow: none; color: var(--accent-red); }
+html[data-theme="light"] .lt-text-amber   { text-shadow: none; color: var(--accent-amber); }
+html[data-theme="light"] .lt-text-muted   { color: var(--text-muted); }
+
+/* — Markdown — */
+html[data-theme="light"] .lt-markdown code  { background: var(--bg-secondary); color: var(--accent-cyan); }
+html[data-theme="light"] .lt-markdown blockquote { border-left-color: var(--accent-cyan); background: var(--accent-cyan-dim); }
+
+/* — KV grid — */
+html[data-theme="light"] .lt-kv-row        { border-bottom-color: var(--border-dim); }
+html[data-theme="light"] .lt-kv-label      { color: var(--text-dim); }
+
+/* — Empty state — */
+html[data-theme="light"] .lt-empty-state-icon  { color: var(--text-dim); }
+html[data-theme="light"] .lt-empty-state-title { color: var(--text-secondary); }
+
+/* — Combobox / typeahead — */
+html[data-theme="light"] .lt-combobox-dropdown,
+html[data-theme="light"] .lt-typeahead-dropdown { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
+html[data-theme="light"] .lt-combobox-option:hover,
+html[data-theme="light"] .lt-typeahead-item:hover,
+html[data-theme="light"] .lt-typeahead-item.is-focused,
+html[data-theme="light"] .lt-typeahead-item:focus-visible { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
+html[data-theme="light"] .lt-combobox-tag     { background: var(--accent-cyan-dim); color: var(--accent-cyan); border-color: var(--accent-cyan-border); }
+
+/* — Sortable ghost — */
+html[data-theme="light"] .lt-sortable-placeholder { background: var(--accent-cyan-dim); border-color: var(--accent-cyan); }
+
+/* — P-level row accents — softer in light mode — */
+html[data-theme="light"] .lt-row-p1 { border-left-color: var(--accent-red); }
+html[data-theme="light"] .lt-row-p2 { border-left-color: var(--accent-orange); }
+html[data-theme="light"] .lt-row-p3 { border-left-color: var(--accent-amber); }
+html[data-theme="light"] .lt-row-p4 { border-left-color: rgba(50,80,130,0.25); }
+
+/* — Scrollbar light theme — */
+html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-secondary); }
+html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); }
+html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); }
+
+
+/* ----------------------------------------------------------------
+   52. THEME TOGGLE BUTTON
+   ---------------------------------------------------------------- */
+.lt-theme-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px; height: 32px;
+  border-radius: 4px;
+  border: 1px solid var(--border-color);
+  background: transparent;
+  color: var(--accent-cyan);
+  font-size: 1rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  flex-shrink: 0;
+}
+.lt-theme-btn:hover {
+  background: var(--accent-cyan-dim);
+  border-color: var(--accent-cyan-border);
+  box-shadow: var(--box-glow-cyan);
+}
+.lt-theme-btn:focus-visible {
+  outline: 1px solid var(--accent-cyan);
+  outline-offset: 2px;
+}
+@media (pointer: coarse) {
+  .lt-theme-btn { width: 44px; height: 44px; font-size: 1.2rem; }
+}
+
+
+/* ----------------------------------------------------------------
+   53. SKELETON LOADER VARIANTS
+   (Extends existing .lt-skeleton in section 19)
+   ---------------------------------------------------------------- */
+/* Override section 19 shimmer with improved cyan-tinted version */
+.lt-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 25%,
+    rgba(0,212,255,0.05) 50%,
+    var(--bg-secondary) 75%
+  );
+  background-size: 200% 100%;
+  animation: lt-shimmer 1.6s ease-in-out infinite;
+  border-radius: 2px;
+  display: block;
+  will-change: opacity;
+}
+@keyframes lt-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lt-skeleton { animation: none; background: var(--bg-secondary); }
+}
+@media (pointer: coarse) {
+  .lt-skeleton { animation: none; }
+}
+/* Size variants */
+.lt-skeleton-text   { height: 0.8rem;  width: 100%;   margin-bottom: 0.4rem; }
+.lt-skeleton-title  { height: 1.1rem;  width: 55%;    margin-bottom: 0.6rem; }
+.lt-skeleton-avatar { height: 2.25rem; width: 2.25rem; border-radius: 50%; flex-shrink: 0; }
+.lt-skeleton-btn    { height: 1.9rem;  width: 5.5rem; }
+.lt-skeleton-badge  { height: 1.1rem;  width: 4rem;   border-radius: 999px; }
+.lt-skeleton-line-sm  { height: 0.7rem; width: 40%; margin-bottom: 0.3rem; }
+.lt-skeleton-line-lg  { height: 0.8rem; width: 80%; margin-bottom: 0.4rem; }
+
+/* Card skeleton */
+.lt-skeleton-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-dim);
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.lt-skeleton-card-header {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  margin-bottom: 0.4rem;
+}
+/* Table row skeleton */
+.lt-skeleton-row {
+  display: grid;
+  grid-template-columns: 1.5rem 1fr 2.5fr 1fr 1fr 1fr;
+  gap: 1rem;
+  padding: 0.65rem 1rem;
+  border-bottom: 1px solid var(--border-dim);
+  align-items: center;
+}
+@media (max-width: 639px) {
+  .lt-skeleton-row { grid-template-columns: 1fr 2fr; gap: 0.5rem; }
+}
+
+
+/* ----------------------------------------------------------------
+   54. EMPTY STATE ENHANCEMENTS
+   (Extends existing .lt-empty in section 19)
+   ---------------------------------------------------------------- */
+.lt-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 2rem;
+  text-align: center;
+  gap: 0.6rem;
+}
+.lt-empty-state-icon {
+  font-size: 2.5rem;
+  opacity: 0.35;
+  margin-bottom: 0.25rem;
+  line-height: 1;
+}
+.lt-empty-state-title {
+  color: var(--text-secondary);
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+.lt-empty-state-body {
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  max-width: 30ch;
+  line-height: 1.7;
+}
+.lt-empty-state .lt-btn { margin-top: 0.5rem; }
+/* Small inline variant */
+.lt-empty-state--sm {
+  padding: 1.5rem 1rem;
+}
+.lt-empty-state--sm .lt-empty-state-icon { font-size: 1.5rem; }
+.lt-empty-state--sm .lt-empty-state-title { font-size: 0.72rem; }
+
+
+/* ----------------------------------------------------------------
+   55. NAV NOTIFICATION BADGE
+   ---------------------------------------------------------------- */
+.lt-notif-wrap {
+  position: relative;
+  display: inline-flex;
+}
+.lt-notif-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.2rem;
+  background: var(--accent-red);
+  color: #fff;
+  font-size: 0.58rem;
+  font-weight: 700;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  border: 1.5px solid var(--bg-primary);
+  pointer-events: none;
+  animation: lt-notif-pulse 2.5s ease-in-out infinite;
+}
+.lt-notif-badge[data-count="0"],
+.lt-notif-badge:empty { display: none; }
+@keyframes lt-notif-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(255,45,85,0.7); }
+  50%       { box-shadow: 0 0 0 5px rgba(255,45,85,0); }
+}
+@media (pointer: coarse) { .lt-notif-badge { animation: none; } }
+
+
+/* ----------------------------------------------------------------
+   56. RIGHT-SIDE DRAWER
+   ---------------------------------------------------------------- */
+.lt-drawer-right {
+  position: fixed;
+  top: var(--header-height);
+  right: 0;
+  height: calc(100vh - var(--header-height));
+  width: 400px;
+  max-width: 92vw;
+  background: var(--bg-card);
+  border-left: 1px solid var(--border-color);
+  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
+  transform: translateX(100%);
+  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
+  z-index: calc(var(--z-overlay) + 2); /* 10001 — same level as nav overlay */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.lt-drawer-right.is-open { transform: translateX(0); }
+.lt-drawer-right-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-dim);
+  flex-shrink: 0;
+}
+.lt-drawer-right-title {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--accent-cyan);
+  text-shadow: var(--glow-cyan);
+}
+.lt-drawer-right-close {
+  width: 32px; height: 32px;
+  display: flex; align-items: center; justify-content: center;
+  background: none;
+  border: 1px solid transparent;
+  color: var(--text-muted);
+  font-size: 1rem;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: var(--transition-fast);
+}
+.lt-drawer-right-close:hover  { color: var(--accent-red); border-color: var(--accent-red); }
+.lt-drawer-right-close:active { color: var(--accent-red); opacity: 0.7; }
+.lt-drawer-right-close:focus-visible { outline: 1px solid var(--accent-cyan); outline-offset: 2px; }
+.lt-drawer-right-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  overscroll-behavior: contain;
+}
+.lt-drawer-right-footer {
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--border-dim);
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  flex-shrink: 0;
+}
+/* Overlay for right drawer */
+.lt-drawer-right-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(3,5,8,0.65);
+  z-index: calc(var(--z-overlay) + 1); /* 10000 */
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+}
+.lt-drawer-right-overlay.is-open { opacity: 1; pointer-events: auto; }
+@media (max-width: 479px) {
+  .lt-drawer-right { width: 100vw; max-width: 100vw; top: 0; height: 100vh; border-left: none; border-top: 1px solid var(--border-color); }
+}
+@media (pointer: coarse) {
+  .lt-drawer-right-close { width: 44px; height: 44px; }
+}
+
+
+/* ----------------------------------------------------------------
+   57. STICKY TABLE
+   ---------------------------------------------------------------- */
+.lt-table-sticky-wrap {
+  max-height: 420px;
+  overflow-y: auto;
+  overflow-x: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--border-dim);
+  border-radius: 2px;
+}
+.lt-table-sticky-wrap .lt-table { margin: 0; border: none; }
+.lt-table-sticky-wrap .lt-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--bg-tertiary);
+  backdrop-filter: blur(6px);
+  border-bottom: 2px solid var(--border-color);
+  box-shadow: 0 2px 8px rgba(3,5,8,0.5);
+}
+/* Custom scrollbar inside sticky wrap */
+.lt-table-sticky-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
+.lt-table-sticky-wrap::-webkit-scrollbar-track { background: var(--bg-primary); }
+.lt-table-sticky-wrap::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
+
+
+/* ----------------------------------------------------------------
+   58. MULTI-SELECT / COMBOBOX
+   ---------------------------------------------------------------- */
+.lt-combobox {
+  position: relative;
+  display: block;
+}
+.lt-combobox-input-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  min-height: 36px;
+  padding: 4px 8px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  cursor: text;
+  transition: border-color 0.15s;
+}
+.lt-combobox-input-wrap:focus-within {
+  border-color: var(--accent-cyan);
+  box-shadow: var(--box-glow-cyan);
+}
+.lt-combobox-input-wrap .lt-combobox-input {
+  flex: 1;
+  min-width: 80px;
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  padding: 2px 0;
+}
+/* Selected tag chips inside the input */
+.lt-combobox-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 6px;
+  background: var(--accent-cyan-dim);
+  border: 1px solid var(--accent-cyan-border);
+  color: var(--accent-cyan);
+  font-size: 0.7rem;
+  border-radius: 2px;
+  white-space: nowrap;
+}
+.lt-combobox-tag-remove {
+  background: none; border: none; cursor: pointer;
+  color: var(--text-muted); font-size: 0.75rem; padding: 0; line-height: 1;
+  display: flex; align-items: center;
+}
+.lt-combobox-tag-remove:hover { color: var(--accent-red); }
+.lt-combobox-tag-remove:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; border-radius: 2px; }
+/* Dropdown list */
+.lt-combobox-dropdown {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0; right: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
+  z-index: var(--z-dropdown);
+  max-height: 200px;
+  overflow-y: auto;
+  display: none;
+}
+.lt-combobox-dropdown.is-open { display: block; }
+.lt-combobox-option {
+  padding: 0.4rem 0.75rem;
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: background 0.1s;
+}
+.lt-combobox-option:hover,
+.lt-combobox-option.is-focused,
+.lt-combobox-option:focus-visible { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
+.lt-combobox-option.is-selected::before {
+  content: '✓';
+  color: var(--accent-green);
+  font-size: 0.7rem;
+  width: 0.8rem;
+  flex-shrink: 0;
+}
+.lt-combobox-option:not(.is-selected)::before { content: ''; width: 0.8rem; display: inline-block; flex-shrink: 0; }
+.lt-combobox-empty {
+  padding: 0.6rem 0.75rem;
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+
+/* ----------------------------------------------------------------
+   59. CONTEXT MENU
+   ---------------------------------------------------------------- */
+.lt-context-menu {
+  position: fixed;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
+  min-width: 160px;
+  z-index: var(--z-tooltip);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
+  padding: 4px 0;
+  display: none;
+}
+.lt-context-menu.is-open { display: block; }
+.lt-context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.4rem 0.75rem;
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background 0.1s;
+  user-select: none;
+  white-space: nowrap;
+}
+.lt-context-menu-item:hover { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
+.lt-context-menu-item:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; background: var(--accent-cyan-dim); color: var(--accent-cyan); }
+.lt-context-menu-item.is-danger:hover { background: var(--accent-red-dim); color: var(--accent-red); }
+.lt-context-menu-item .icon { width: 1rem; text-align: center; opacity: 0.7; font-size: 0.75rem; }
+.lt-context-menu-item kbd {
+  margin-left: auto;
+  font-size: 0.6rem;
+  color: var(--text-muted);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-dim);
+  padding: 1px 4px;
+  border-radius: 2px;
+}
+.lt-context-menu-divider {
+  height: 1px;
+  background: var(--border-dim);
+  margin: 4px 0;
+}
+.lt-context-menu-label {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.62rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+
+/* ----------------------------------------------------------------
+   60. OFFLINE BANNER
+   ---------------------------------------------------------------- */
+.lt-offline-banner {
+  position: fixed;
+  top: var(--header-height);
+  left: 0; right: 0;
+  padding: 0.4rem 1rem;
+  background: var(--accent-red-dim);
+  border-top: 1px solid var(--accent-red);
+  border-bottom: 1px solid var(--accent-red);
+  color: var(--accent-red);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  text-align: center;
+  z-index: var(--z-fixed);
+  transform: translateY(-100%);
+  transition: transform 0.25s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.lt-offline-banner.is-visible { transform: translateY(0); }
+.lt-offline-banner .lt-dot--red {
+  animation: lt-pulse 1s ease-in-out infinite;
+}
+@keyframes lt-pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.3; }
+}
+body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s ease; }
+
+
+/* ----------------------------------------------------------------
+   61. SLA BANNER
+   ----------------------------------------------------------------
+   lt-sla-p1 — pulsing red banner for critical SLA breach
+   lt-sla-p2 — static amber banner for high-priority SLA warning
+   ---------------------------------------------------------------- */
+.lt-sla-p1,
+.lt-sla-p2 {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.6rem 1rem;
+  border: 1px solid;
+  font-family: var(--font-mono);
+}
+.lt-sla-p1 {
+  border-color: rgba(255,45,85,0.4);
+  background: rgba(255,45,85,0.08);
+  animation: lt-sla-pulse 2s infinite;
+}
+.lt-sla-p2 {
+  border-color: rgba(255,179,0,0.4);
+  background: rgba(255,179,0,0.08);
+}
+@keyframes lt-sla-pulse {
+  0%, 100% { box-shadow: 0 0 8px  rgba(255,45,85,0.20); }
+  50%       { box-shadow: 0 0 20px rgba(255,45,85,0.45); }
+}
+.lt-sla-icon  { font-size: 1rem; flex-shrink: 0; }
+.lt-sla-info  { flex: 1; min-width: 0; }
+.lt-sla-title {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  margin-bottom: 4px;
+}
+.lt-sla-p1 .lt-sla-title { color: var(--accent-red);   text-shadow: var(--glow-red); }
+.lt-sla-p2 .lt-sla-title { color: var(--accent-amber); text-shadow: var(--glow-amber); }
+.lt-sla-bar {
+  height: 5px;
+  background: rgba(255,255,255,0.08);
+  position: relative;
+  overflow: hidden;
+}
+.lt-sla-fill {
+  height: 100%;
+  width: 0%;
+  transition: width 0.4s ease;
+}
+.lt-sla-p1 .lt-sla-fill { background: linear-gradient(90deg, var(--accent-red),   var(--accent-orange)); box-shadow: 0 0 8px rgba(255,45,85,0.6); }
+.lt-sla-p2 .lt-sla-fill { background: linear-gradient(90deg, var(--accent-amber), #ffd740);            box-shadow: 0 0 8px rgba(255,179,0,0.6); }
+.lt-sla-meta {
+  font-size: 0.60rem;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.10em;
+  flex-shrink: 0;
+}
+.lt-sla-dismiss {
+  font-size: 0.70rem;
+  color: var(--text-dim);
+  cursor: pointer;
+  background: none;
+  border: none;
+  flex-shrink: 0;
+  padding: 0 0.25rem;
+  font-family: var(--font-mono);
+  transition: color 0.15s ease;
+}
+.lt-sla-dismiss:hover        { color: var(--text-secondary); }
+.lt-sla-dismiss:focus-visible { outline: 1px dashed var(--accent-cyan); outline-offset: 2px; }
+html[data-theme="light"] .lt-sla-p1 { background: rgba(180,30,50,0.06); border-color: rgba(180,30,50,0.35); }
+html[data-theme="light"] .lt-sla-p2 { background: rgba(138,90,0,0.06);  border-color: rgba(138,90,0,0.35); }
+
+
+/* ----------------------------------------------------------------
+   62. TIMELINE / ACTIVITY FEED
+   ---------------------------------------------------------------- */
+.lt-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding-left: 1.25rem;
+  border-left: 1px solid var(--border-dim);
+  margin-left: 0.5rem;
+}
+.lt-timeline-item {
+  position: relative;
+  padding: 0 0 1.25rem 1.25rem;
+}
+.lt-timeline-item:last-child { padding-bottom: 0; }
+/* Connector dot */
+.lt-timeline-item::before {
+  content: '';
+  position: absolute;
+  left: -5px;
+  top: 4px;
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--accent-cyan);
+  box-shadow: 0 0 6px var(--accent-cyan);
+  border: 1.5px solid var(--bg-primary);
+}
+.lt-timeline-item--orange::before { background: var(--accent-orange); box-shadow: var(--glow-orange); }
+.lt-timeline-item--green::before  { background: var(--accent-green);  box-shadow: var(--glow-green); }
+.lt-timeline-item--red::before    { background: var(--accent-red);    box-shadow: var(--glow-red); }
+.lt-timeline-item--dim::before    { background: var(--text-muted);    box-shadow: none; }
+.lt-timeline-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.68rem;
+  color: var(--text-muted);
+  margin-bottom: 0.2rem;
+  flex-wrap: wrap;
+}
+.lt-timeline-actor { color: var(--accent-cyan); }
+.lt-timeline-time  { margin-left: auto; white-space: nowrap; }
+.lt-timeline-body  { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }
+.lt-timeline-body code { font-size: 0.72rem; color: var(--accent-green); }
+
+
+/* ----------------------------------------------------------------
+   62. AVATAR
+   ---------------------------------------------------------------- */
+.lt-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--bg-tertiary);
+  border: 1.5px solid var(--border-color);
+  color: var(--accent-cyan);
+  font-weight: 700;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  overflow: hidden;
+  flex-shrink: 0;
+  user-select: none;
+  position: relative; /* needed so img can overlay initials absolutely */
+}
+/* Image overlays initials — hidden by JS (.lt-avatar-img-err) when broken */
+.lt-avatar img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+/* When the image fails, JS adds .lt-avatar-img-err to hide it, revealing initials */
+.lt-avatar img.lt-avatar-img-err { display: none; }
+/* Sizes */
+.lt-avatar--xs { width: 1.5rem; height: 1.5rem; font-size: 0.55rem; }
+.lt-avatar--sm { width: 2rem;   height: 2rem;   font-size: 0.65rem; }
+.lt-avatar     { width: 2.5rem; height: 2.5rem; font-size: 0.75rem; } /* default */
+.lt-avatar--lg { width: 3.5rem; height: 3.5rem; font-size: 1rem; }
+.lt-avatar--xl { width: 5rem;   height: 5rem;   font-size: 1.4rem; }
+/* Color variants */
+.lt-avatar--orange { background: var(--accent-orange-dim); border-color: var(--accent-orange-border); color: var(--accent-orange); }
+.lt-avatar--green  { background: var(--accent-green-dim);  border-color: var(--accent-green-border);  color: var(--accent-green); }
+.lt-avatar--red    { background: var(--accent-red-dim);    border-color: var(--accent-red);           color: var(--accent-red); }
+.lt-avatar--purple { background: var(--accent-purple-dim); border-color: var(--accent-purple);        color: var(--accent-purple); }
+/* Avatar group (overlapping row) */
+.lt-avatar-group { display: flex; }
+.lt-avatar-group .lt-avatar {
+  margin-left: -0.5rem;
+  border: 2px solid var(--bg-primary);
+  transition: transform 0.15s;
+}
+.lt-avatar-group .lt-avatar:first-child { margin-left: 0; }
+.lt-avatar-group .lt-avatar:hover { transform: translateY(-2px) scale(1.08); z-index: 1; }
+/* Status ring */
+.lt-avatar-wrap {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.lt-avatar-status {
+  position: absolute;
+  bottom: 1px; right: 1px;
+  width: 9px; height: 9px;
+  border-radius: 50%;
+  border: 1.5px solid var(--bg-primary);
+  background: var(--text-muted);
+}
+.lt-avatar-status--online  { background: var(--accent-green); box-shadow: 0 0 4px var(--accent-green); }
+.lt-avatar-status--away    { background: var(--accent-amber); }
+.lt-avatar-status--busy    { background: var(--accent-red); }
+
+
+/* ----------------------------------------------------------------
+   63. SPLIT PANE
+   ---------------------------------------------------------------- */
+.lt-split {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.lt-split--vertical { flex-direction: column; }
+.lt-split-pane {
+  overflow: auto;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+.lt-split-divider {
+  flex: 0 0 5px;
+  background: var(--border-color); /* 16% opacity — clearly visible */
+  cursor: col-resize;
+  transition: background 0.15s;
+  position: relative;
+  user-select: none;
+  touch-action: none;
+  /* Wider invisible hit area so it's easy to grab */
+}
+.lt-split-divider::before {
+  content: '';
+  position: absolute;
+  top: 0; bottom: 0;
+  left: -6px; right: -6px;
+  cursor: col-resize;
+}
+.lt-split-divider::after {
+  content: '⠿';
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  pointer-events: none;
+}
+.lt-split-divider:hover,
+.lt-split-divider.is-dragging { background: var(--accent-cyan); }
+.lt-split-divider:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 3px; }
+.lt-split--vertical .lt-split-divider::before { top: -6px; bottom: -6px; left: 0; right: 0; cursor: row-resize; }
+.lt-split--vertical .lt-split-divider { cursor: row-resize; }
+/* On mobile, stack vertically and hide divider */
+@media (max-width: 767px) {
+  .lt-split:not(.lt-split--vertical) { flex-direction: column; }
+  .lt-split:not(.lt-split--vertical) .lt-split-divider { display: none; }
+  .lt-split:not(.lt-split--vertical) .lt-split-pane { flex: 0 0 auto; }
+}
+
+
+/* ----------------------------------------------------------------
+   64. CHART CONTAINER
+   ---------------------------------------------------------------- */
+.lt-chart-wrap {
+  position: relative;
+  background: var(--bg-card);
+  border: 1px solid var(--border-dim);
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
+  padding: 1rem;
+  overflow: hidden;
+}
+.lt-chart-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.lt-chart-title {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-secondary);
+}
+.lt-chart-legend {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.68rem;
+  color: var(--text-muted);
+  flex-wrap: wrap;
+}
+.lt-chart-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+.lt-chart-legend-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.lt-chart-body {
+  position: relative;
+  width: 100%;
+}
+/* Sparkline — inline mini chart */
+.lt-sparkline {
+  display: inline-block;
+  vertical-align: middle;
+}
+/* Axis labels */
+.lt-chart-axis {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.62rem;
+  color: var(--text-muted);
+  margin-top: 0.25rem;
+}
+/* Loading / no-data states */
+.lt-chart-wrap.is-loading .lt-chart-body { min-height: 120px; }
+.lt-chart-wrap.is-loading .lt-chart-body::after {
+  content: 'LOADING DATA...';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.68rem;
+  color: var(--text-muted);
+  letter-spacing: 0.1em;
+}
+
+
+/* ----------------------------------------------------------------
+   65. TOAST QUEUE (enhanced multi-toast stack)
+   ---------------------------------------------------------------- */
+/* Toast container already exists in section 14; these are addons */
+#lt-toast-container {
+  /* Stack from bottom — newest on top */
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5rem;
+}
+.lt-toast + .lt-toast { margin-top: 0; } /* gap handles spacing */
+/* Progress bar on toast (auto-dismiss countdown) */
+.lt-toast-progress {
+  position: absolute;
+  bottom: 0; left: 0;
+  height: 2px;
+  background: currentColor;
+  opacity: 0.4;
+  animation: lt-toast-drain linear forwards;
+}
+@keyframes lt-toast-drain {
+  from { width: 100%; }
+  to   { width: 0; }
+}
+/* Pause on hover */
+.lt-toast:hover .lt-toast-progress { animation-play-state: paused; }
+
+
+/* ----------------------------------------------------------------
+   66. AUTOCOMPLETE / TYPEAHEAD
+   ---------------------------------------------------------------- */
+.lt-typeahead {
+  position: relative;
+  display: block;
+}
+.lt-typeahead-dropdown {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0; right: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
+  z-index: var(--z-dropdown);
+  max-height: 220px;
+  overflow-y: auto;
+  display: none;
+}
+.lt-typeahead-dropdown.is-open { display: block; }
+.lt-typeahead-item {
+  padding: 0.4rem 0.75rem;
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: background 0.1s;
+}
+.lt-typeahead-item:hover,
+.lt-typeahead-item.is-focused,
+.lt-typeahead-item:focus-visible { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
+.lt-typeahead-item mark {
+  background: none;
+  color: var(--accent-orange);
+  font-weight: 700;
+}
+.lt-typeahead-item .icon {
+  font-size: 0.75rem;
+  opacity: 0.6;
+  width: 1rem;
+  text-align: center;
+  flex-shrink: 0;
+}
+.lt-typeahead-empty {
+  padding: 0.6rem 0.75rem;
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  text-align: center;
+  letter-spacing: 0.05em;
+}
+/* Loading state in dropdown */
+.lt-typeahead-loading {
+  padding: 0.6rem 0.75rem;
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.lt-typeahead-loading::before {
+  content: '';
+  width: 10px; height: 10px;
+  border: 1.5px solid var(--border-color);
+  border-top-color: var(--accent-cyan);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+
+/* ----------------------------------------------------------------
+   67. WEBSOCKET STATUS INDICATOR
+   ---------------------------------------------------------------- */
+.lt-ws-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  padding: 2px 8px;
+  border: 1px solid var(--border-dim);
+  border-radius: 2px;
+}
+.lt-ws-status .lt-dot { flex-shrink: 0; }
+.lt-ws-status[data-state="connected"]    { color: var(--accent-green);  border-color: var(--accent-green-border); }
+.lt-ws-status[data-state="connecting"]   { color: var(--accent-amber);  border-color: var(--accent-amber-dim); }
+.lt-ws-status[data-state="disconnected"] { color: var(--accent-red);    border-color: var(--accent-red-dim); }
+.lt-ws-status[data-state="connected"] .lt-dot    { background: var(--accent-green); box-shadow: var(--glow-green); }
+.lt-ws-status[data-state="connecting"] .lt-dot   { background: var(--accent-amber); box-shadow: var(--glow-amber); animation: lt-pulse 0.8s ease-in-out infinite; }
+.lt-ws-status[data-state="disconnected"] .lt-dot { background: var(--accent-red); }
+
+
+/* ----------------------------------------------------------------
+   69. INFINITE SCROLL SENTINEL / LOADING
+   ---------------------------------------------------------------- */
+.lt-infinite-sentinel { height: 1px; width: 100%; }
+.lt-infinite-loading {
+  display: flex;
+  justify-content: center;
+  padding: 1.5rem;
+}
+
+
+/* ----------------------------------------------------------------
+   70. WIZARD / MULTI-STEP FORM
+   ---------------------------------------------------------------- */
+/* Step container — hide non-active steps */
+[data-wizard-step] { display: none; }
+[data-wizard-step].is-active { display: block; }
+
+/* Progress indicator bar */
+.lt-wizard-steps {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin-bottom: 1.5rem;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+.lt-wizard-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+  flex: 1;
+  min-width: 60px;
+  position: relative;
+  cursor: default;
+}
+/* Connector line between steps */
+.lt-wizard-step::before {
+  content: '';
+  position: absolute;
+  top: 14px;
+  left: calc(-50% + 14px);
+  right: calc(50% + 14px);
+  height: 1px;
+  background: var(--border-dim);
+  z-index: 0;
+}
+.lt-wizard-step:first-child::before { display: none; }
+.lt-wizard-step.is-complete::before { background: var(--accent-cyan); }
+/* Step number circle */
+.lt-wizard-num {
+  width: 28px; height: 28px;
+  border-radius: 50%;
+  background: var(--bg-secondary);
+  border: 1.5px solid var(--border-color);
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+  display: flex; align-items: center; justify-content: center;
+  position: relative;
+  z-index: 1;
+  transition: all 0.2s;
+}
+.lt-wizard-step.is-active .lt-wizard-num {
+  background: var(--accent-orange-dim);
+  border-color: var(--accent-orange);
+  color: var(--accent-orange);
+  box-shadow: var(--box-glow-orange);
+}
+.lt-wizard-step.is-complete .lt-wizard-num {
+  background: var(--accent-cyan-dim);
+  border-color: var(--accent-cyan);
+  color: var(--accent-cyan);
+}
+.lt-wizard-step.is-complete .lt-wizard-num::after {
+  content: '✓';
+  position: absolute;
+}
+.lt-wizard-step.is-error .lt-wizard-num {
+  background: var(--accent-red-dim);
+  border-color: var(--accent-red);
+  color: var(--accent-red);
+}
+.lt-wizard-label {
+  font-size: 0.62rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  white-space: nowrap;
+  text-align: center;
+}
+.lt-wizard-step.is-active .lt-wizard-label { color: var(--accent-orange); }
+.lt-wizard-step.is-complete .lt-wizard-label { color: var(--text-secondary); }
+/* Counter badge */
+.lt-wizard-counter {
+  font-size: 0.68rem;
+  color: var(--text-muted);
+}
+.lt-wizard-counter strong { color: var(--accent-cyan); }
+/* Nav footer */
+.lt-wizard-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-dim);
+  gap: 0.75rem;
+}
+
+
+/* ----------------------------------------------------------------
+   71. SORTABLE LIST
+   ---------------------------------------------------------------- */
+[data-sortable-item] { transition: opacity 0.15s; }
+[data-sortable-item].is-dragging {
+  opacity: 0.35;
+  cursor: grabbing;
+}
+.lt-sortable-placeholder {
+  background: var(--accent-cyan-dim);
+  border: 1px dashed var(--accent-cyan-border);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+
+/* ----------------------------------------------------------------
+   72. COUNTDOWN / TIMER
+   ---------------------------------------------------------------- */
+.lt-countdown {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--accent-cyan);
+  letter-spacing: 0.05em;
+}
+.lt-countdown.lt-text-red  { text-shadow: var(--glow-red); }
+.lt-countdown.lt-text-cyan { text-shadow: var(--glow-cyan); }
+/* SLA urgency animation */
+.lt-countdown-urgent {
+  animation: lt-countdown-blink 1s step-end infinite;
+}
+@keyframes lt-countdown-blink {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.4; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lt-countdown-urgent { animation: none; }
+}
+
+
+/* ----------------------------------------------------------------
+   73. IMAGE LIGHTBOX
+   ---------------------------------------------------------------- */
+.lt-lightbox-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(3,5,8,0.96);
+  z-index: calc(var(--z-modal) + 10); /* above everything */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+.lt-lightbox-overlay.is-open {
+  opacity: 1;
+  pointer-events: auto;
+}
+.lt-lightbox-img-wrap {
+  max-width: 90vw;
+  max-height: 85vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.lt-lightbox-img {
+  max-width: 100%;
+  max-height: 85vh;
+  object-fit: contain;
+  box-shadow: 0 0 60px rgba(0,212,255,0.12);
+  display: block;
+}
+.lt-lightbox-close,
+.lt-lightbox-prev,
+.lt-lightbox-next {
+  position: fixed;
+  background: rgba(10,14,23,0.75);
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  font-size: 1.5rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 2px;
+}
+.lt-lightbox-close { top: 1rem; right: 1rem; width: 40px; height: 40px; }
+.lt-lightbox-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); width: 40px; height: 60px; }
+.lt-lightbox-next  { right: 1rem; top: 50%; transform: translateY(-50%); width: 40px; height: 60px; }
+.lt-lightbox-close:hover,
+.lt-lightbox-prev:hover,
+.lt-lightbox-next:hover { color: var(--accent-cyan); border-color: var(--accent-cyan-border); box-shadow: var(--box-glow-cyan); }
+.lt-lightbox-close:focus-visible,
+.lt-lightbox-prev:focus-visible,
+.lt-lightbox-next:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; color: var(--accent-cyan); }
+.lt-lightbox-caption {
+  position: fixed;
+  bottom: 3rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  max-width: 60vw;
+  text-align: center;
+}
+.lt-lightbox-counter {
+  position: fixed;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.68rem;
+  color: var(--text-muted);
+  letter-spacing: 0.1em;
+}
+@media (pointer: coarse) {
+  .lt-lightbox-prev  { width: 56px; height: 80px; }
+  .lt-lightbox-next  { width: 56px; height: 80px; }
+  .lt-lightbox-close { width: 48px; height: 48px; }
+}
+
+
+/* ----------------------------------------------------------------
+   74. SIDEBAR SUBMENUS
+   ---------------------------------------------------------------- */
+.lt-sidebar-group {
+  margin-bottom: 0.25rem;
+}
+.lt-sidebar-group-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.35rem 0.75rem;
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-muted);
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.15s;
+  border-radius: 2px;
+}
+.lt-sidebar-group-label:hover { color: var(--text-secondary); }
+.lt-sidebar-group-label:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; border-radius: 2px; }
+.lt-sidebar-group-label .chevron {
+  font-size: 0.5rem;
+  transition: transform 0.2s ease;
+  opacity: 0.6;
+}
+.lt-sidebar-group.is-open .lt-sidebar-group-label .chevron { transform: rotate(90deg); }
+/* Submenu items */
+.lt-sidebar-submenu {
+  display: none;
+  flex-direction: column;
+  padding-left: 0.75rem;
+  border-left: 1px solid var(--border-dim);
+  margin-left: 0.75rem;
+  margin-top: 2px;
+  margin-bottom: 4px;
+}
+.lt-sidebar-group.is-open .lt-sidebar-submenu { display: flex; }
+.lt-sidebar-sub-link {
+  padding: 0.3rem 0.5rem;
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  text-decoration: none;
+  border-radius: 2px;
+  transition: var(--transition-fast);
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  white-space: nowrap;
+}
+.lt-sidebar-sub-link:hover { color: var(--accent-cyan); background: var(--accent-cyan-dim); }
+.lt-sidebar-sub-link:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; border-radius: 2px; }
+.lt-sidebar-sub-link.active,
+.lt-sidebar-sub-link[aria-current="page"] {
+  color: var(--accent-orange);
+  background: var(--accent-orange-dim);
+}
+@media (pointer: coarse) {
+  .lt-sidebar-group-label { padding: 0.5rem 0.75rem; }
+  .lt-sidebar-sub-link { padding: 0.4rem 0.5rem; min-height: 36px; }
+}
+
+
+/* ----------------------------------------------------------------
+   75. MARKDOWN OUTPUT STYLING
+   ---------------------------------------------------------------- */
+.lt-markdown h1 { font-size: 1.25rem; color: var(--accent-cyan); border-bottom: 1px solid var(--border-dim); padding-bottom: 0.3rem; margin: 1rem 0 0.5rem; }
+.lt-markdown h2 { font-size: 1.05rem; color: var(--text-primary); margin: 0.9rem 0 0.4rem; }
+.lt-markdown h3 { font-size: 0.9rem;  color: var(--text-secondary); margin: 0.75rem 0 0.35rem; }
+.lt-markdown h4, .lt-markdown h5, .lt-markdown h6 { font-size: 0.8rem; color: var(--text-muted); margin: 0.5rem 0 0.25rem; }
+.lt-markdown p  { font-size: 0.82rem; line-height: 1.7; color: var(--text-secondary); margin: 0.5rem 0; }
+.lt-markdown ul, .lt-markdown ol { padding-left: 1.25rem; margin: 0.5rem 0; }
+.lt-markdown li { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0.2rem; }
+.lt-markdown ul li::marker { color: var(--accent-cyan); }
+.lt-markdown ol li::marker { color: var(--accent-orange); }
+.lt-markdown code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-green); background: var(--bg-secondary); padding: 1px 5px; border-radius: 2px; }
+.lt-markdown pre { margin: 0.75rem 0; overflow-x: auto; }
+.lt-markdown blockquote { border-left: 3px solid var(--accent-cyan-border); padding: 0.25rem 0.75rem; margin: 0.5rem 0; background: var(--accent-cyan-dim); color: var(--text-muted); font-style: italic; }
+.lt-markdown hr  { border: none; border-top: 1px solid var(--border-dim); margin: 1rem 0; }
+.lt-markdown a   { color: var(--accent-cyan); text-decoration: none; }
+.lt-markdown a:hover { text-decoration: underline; }
+.lt-markdown a:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
+.lt-markdown strong { color: var(--text-primary); }
+.lt-markdown img, .md-image { max-width: 100%; height: auto; border: 1px solid var(--border-dim); border-radius: 2px; display: block; margin: 0.5rem 0; }
+.lt-markdown ul { list-style: disc; }
+.lt-markdown ol { list-style: decimal; }
+.lt-markdown ul li::marker { color: var(--accent-cyan); }
+.lt-markdown ol li::marker { color: var(--accent-orange); }
+.lt-markdown mark { background: var(--accent-yellow-dim, #2a2500); color: var(--accent-yellow, #e6c619); padding: 0 3px; border-radius: 2px; }
+.lt-markdown del { color: var(--text-muted); text-decoration: line-through; }
+.lt-markdown sub, .lt-markdown sup { font-size: 0.7em; line-height: 0; }
+.lt-markdown .task-item { list-style: none; margin-left: -1.2em; }
+.lt-markdown .task-cb  { margin-right: 0.35em; font-size: 1em; }
+.lt-markdown .task-done { color: var(--text-muted); text-decoration: line-through; }
+.lt-markdown .task-todo { color: var(--text-secondary); }
+.lt-markdown .fn-ref a { color: var(--accent-cyan); font-size: 0.7em; text-decoration: none; }
+.lt-markdown .fn-hr    { margin: 1rem 0 0.5rem; }
+.lt-markdown .fn-list  { font-size: 0.75rem; color: var(--text-muted); list-style: decimal; padding-left: 1.25rem; margin: 0; }
+.lt-markdown .fn-item  { margin-bottom: 0.2rem; }
+.lt-markdown .fn-back  { color: var(--accent-cyan); text-decoration: none; font-size: 0.85em; }
+.lt-markdown table { width: 100%; border-collapse: collapse; font-size: 0.78rem; margin: 0.75rem 0; }
+.lt-markdown th  { background: var(--bg-secondary); color: var(--accent-cyan); padding: 0.4rem 0.6rem; border: 1px solid var(--border-dim); text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
+.lt-markdown td  { padding: 0.35rem 0.6rem; border: 1px solid var(--border-dim); color: var(--text-secondary); }
+.lt-markdown tr:hover td { background: var(--bg-secondary); }
+
+
+/* ----------------------------------------------------------------
+   68. PRINT ENHANCEMENTS
+   (Extends section 25)
+   ---------------------------------------------------------------- */
+@media print {
+  .lt-sidebar, .lt-nav, .lt-header-right,
+  .lt-btn-group, .lt-menu-btn,
+  .lt-nav-drawer, .lt-nav-drawer-overlay,
+  .lt-offline-banner, .lt-context-menu,
+  [data-modal-open], [data-tooltip] { display: none !important; }
+
+  .lt-section, .lt-card, .lt-frame {
+    break-inside: avoid;
+    box-shadow: none;
+    clip-path: none;
+    border: 1px solid #999;
+  }
+  .lt-table { border-collapse: collapse; }
+  .lt-table th, .lt-table td { border: 1px solid #ccc; }
+  .lt-table thead th { background: #eee !important; color: black !important; }
+  a[href]::after { content: " (" attr(href) ")"; font-size: 0.7em; color: #666; }
+  a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }
+  .lt-code-block { white-space: pre-wrap; word-break: break-all; }
+  .lt-page-header { border-bottom: 2px solid #333; padding-bottom: 0.5rem; margin-bottom: 1rem; }
+}
+
+/* ----------------------------------------------------------------
+   76. NOTIFICATION DROPDOWN PANEL
+   ---------------------------------------------------------------- */
+.lt-notif-dropdown-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.lt-notif-panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  width: min(300px, 92vw);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
+  z-index: var(--z-panel);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+  transform-origin: top right;
+  transform: scale(0.95);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  overflow: hidden;
+}
+.lt-notif-panel:not([aria-hidden]) {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+
+.lt-notif-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid var(--border-dim);
+  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+.lt-notif-panel-clear {
+  background: none;
+  border: none;
+  color: var(--accent-cyan);
+  font-size: 0.68rem;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  padding: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.lt-notif-panel-clear:hover  { text-decoration: underline; }
+.lt-notif-panel-clear:active { opacity: 0.7; }
+.lt-notif-panel-clear:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; }
+
+.lt-notif-panel-list { max-height: min(280px, calc(80vh - 110px)); overflow-y: auto; }
+
+.lt-notif-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid var(--border-dim);
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.lt-notif-item:hover { background: var(--bg-tertiary); }
+.lt-notif-item:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; background: var(--bg-tertiary); }
+.lt-notif-item--unread { background: rgba(0, 212, 255, 0.04); }
+
+.lt-notif-dot {
+  flex-shrink: 0;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent-cyan);
+  margin-top: 4px;
+  box-shadow: 0 0 6px var(--accent-cyan);
+}
+.lt-notif-dot--read {
+  background: var(--border-color);
+  box-shadow: none;
+}
+
+.lt-notif-item-body { flex: 1; min-width: 0; }
+.lt-notif-item-title {
+  font-size: 0.78rem;
+  color: var(--text-primary);
+  line-height: 1.4;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.lt-notif-item--unread .lt-notif-item-title { color: var(--text-primary); font-weight: 600; }
+.lt-notif-item-time {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  margin-top: 2px;
+  font-family: var(--font-mono);
+}
+
+.lt-notif-panel-footer {
+  padding: 0.5rem 0.75rem;
+  border-top: 1px solid var(--border-dim);
+}
+
+/* ----------------------------------------------------------------
+   77. GENERIC DROPDOWN WIDGET
+   ---------------------------------------------------------------- */
+.lt-dropdown-wrap {
+  position: relative;
+  display: inline-block;
+}
+
+.lt-dropdown-panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 160px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
+  z-index: var(--z-panel);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+  transform-origin: top left;
+  transform: scale(0.95);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.lt-dropdown-panel--right {
+  left: auto;
+  right: 0;
+  transform-origin: top right;
+}
+.lt-dropdown-panel:not([aria-hidden]) {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+
+.lt-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.85rem;
+  background: none;
+  border: none;
+  text-align: left;
+  font-size: 0.78rem;
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+  white-space: nowrap;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+}
+.lt-dropdown-item:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+.lt-dropdown-item:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: -2px;
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+.lt-dropdown-item--danger { color: var(--accent-red); }
+.lt-dropdown-item--danger:hover { background: rgba(255,45,85,0.1); color: var(--accent-red); }
+
+.lt-dropdown-divider {
+  height: 1px;
+  background: var(--border-dim);
+  margin: 0.25rem 0;
+}
+
+/* textarea utility */
+.lt-textarea {
+  min-height: 60px;
+  resize: vertical;
+  line-height: 1.5;
+}
+
+/* ----------------------------------------------------------------
+   78. MOBILE / RESPONSIVE FIXES v1.1
+   Targeted overrides addressing audit findings.
+   ---------------------------------------------------------------- */
+
+/* — Modal max-width cap (prevents 4K-wide modals) — */
+.lt-modal { max-width: 640px; }
+@media (max-width: 767px) { .lt-modal { max-width: 96vw; } }
+@media (max-width: 479px) { .lt-modal { max-width: 100vw; } }
+
+/* — Landscape phone: better modal + nav spacing — */
+@media (max-height: 500px) and (orientation: landscape) {
+  .lt-modal { max-height: calc(100vh - 48px); overflow-y: auto; }
+  .lt-modal-body { max-height: calc(100vh - 130px); overflow-y: auto; }
+  .lt-notif-panel-list { max-height: calc(100vh - 140px); }
+  .lt-header { padding: 0 var(--space-md); }
+  /* Suppress boot overlay on landscape to save vertical space */
+  .lt-boot-overlay { display: none !important; }
+}
+
+/* — Dropdown panels: stay within viewport on SM/XS — */
+@media (max-width: 767px) {
+  .lt-dropdown-panel { max-width: 90vw; font-size: 0.8rem; }
+  .lt-dropdown-panel--right { left: auto; right: 0; }
+  .lt-dropdown-item { font-size: 0.8rem; }
+
+  /* Notification panel: left-safe positioning */
+  .lt-notif-panel { right: 0; max-width: 90vw; }
+
+  /* Advanced filter panel: left-aligned to prevent right overflow */
+  #adv-filter-panel { left: 0; right: auto; }
+
+  /* Right drawer full-screen on SM */
+  .lt-drawer-right {
+    width: 100vw;
+    max-width: 100vw;
+    border-left: none;
+    border-top: 1px solid var(--border-color);
+  }
+
+  /* Right drawer body: more compact padding */
+  .lt-drawer-right-body { padding: var(--space-sm) var(--space-md); }
+
+  /* Inline split pane → stack vertically on SM */
+  .lt-split:not(.lt-split--vertical) {
+    flex-direction: column;
+  }
+  .lt-split:not(.lt-split--vertical) .lt-split-divider {
+    width: 100%;
+    height: 6px;
+    cursor: ns-resize;
+    margin: 0;
+  }
+  .lt-split:not(.lt-split--vertical) .lt-split-divider::before {
+    top: -6px; bottom: -6px;
+    left: 0; right: 0;
+    width: auto; height: auto;
+  }
+  .lt-split-pane { flex: none; width: 100% !important; }
+}
+
+/* — XS font-size floors (nothing below 0.72rem = ~11.5px) — */
+@media (max-width: 479px) {
+  .lt-cmd-group-label  { font-size: 0.72rem; }
+  .lt-cmd-item-label   { font-size: 0.78rem; }
+  .lt-cmd-item-kbd     { font-size: 0.72rem; }
+  .lt-nav-drawer-section { font-size: 0.72rem; }
+  .lt-frame::before    { font-size: 0.65rem; } /* just above retina floor */
+  .lt-stat-label       { font-size: 0.72rem; }
+  .lt-section-title    { font-size: 0.72rem; }
+  .lt-chart-axis span  { font-size: 0.68rem; }
+  .lt-dropdown-item    { font-size: 0.8rem; min-height: 40px; }
+  .lt-notif-item-title { font-size: 0.78rem; }
+  .lt-notif-item-time  { font-size: 0.72rem; }
+  .lt-badge-admin,
+  .lt-header-user { font-size: 0.7rem; }
+  /* Hide admin badge on very small screens to save header space */
+  .lt-badge-admin { display: none; }
+}
+
+/* — Safe-area insets for notched devices (header-right) — */
+@supports (padding: max(0px)) {
+  .lt-header-right {
+    padding-right: max(var(--space-md), env(safe-area-inset-right));
+  }
+  .lt-header {
+    padding-left:  max(var(--space-md), env(safe-area-inset-left));
+    padding-right: max(var(--space-md), env(safe-area-inset-right));
+  }
+  /* Bottom toast: respect home indicator */
+  #lt-toast-container {
+    bottom: max(var(--space-md), env(safe-area-inset-bottom));
+  }
+}
+
+/* — Header: tighter brand on XS to prevent overflow — */
+@media (max-width: 479px) {
+  .lt-header { padding: 0 var(--space-sm); gap: var(--space-xs); }
+  .lt-header-left { gap: var(--space-xs); flex-shrink: 1; min-width: 0; }
+  .lt-brand-title {
+    font-size: 0.85rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 110px;
+  }
+  .lt-ws-status { display: none; } /* hide WS indicator on XS, save space */
+  .lt-header-right { gap: var(--space-xs); flex-shrink: 0; }
+}
+
+/* — Stats grid: never below 2-col, but use auto-fit for flexibility — */
+@media (max-width: 767px) {
+  .lt-stats-grid {
+    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  }
+}
+
+/* — Lightbox: full-screen on any phone — */
+@media (max-width: 767px) {
+  .lt-lightbox-overlay {
+    padding: 0;
+    background: rgba(0,0,0,0.97);
+  }
+  .lt-lightbox-img {
+    max-width: 100vw;
+    max-height: calc(100vh - 80px);
+    border: none;
+  }
+  .lt-lightbox-nav-prev,
+  .lt-lightbox-nav-next {
+    bottom: 1rem;
+    top: auto;
+    transform: none;
+    font-size: 1.2rem;
+  }
+  .lt-lightbox-nav-prev { left: 1rem; }
+  .lt-lightbox-nav-next { right: 1rem; }
+}
+
+/* — Wizard steps: compact on XS — */
+@media (max-width: 479px) {
+  .lt-wizard-steps {
+    overflow-x: auto;
+    padding-bottom: 4px;
+    scrollbar-width: none;
+  }
+  .lt-wizard-steps::-webkit-scrollbar { display: none; }
+  .lt-wizard-step-label { display: none; }  /* show only numbers on XS */
+  .lt-wizard-step.active .lt-wizard-step-label { display: block; }
+}
+
+/* — Timeline: tighter on XS — */
+@media (max-width: 479px) {
+  .lt-timeline-item { padding: var(--space-xs) 0 var(--space-xs) var(--space-md); }
+  .lt-timeline-item::before { left: 0; }
+  .lt-timeline-meta { font-size: 0.72rem; flex-wrap: wrap; }
+  .lt-timeline-body { font-size: 0.75rem; }
+}
+
+/* — Code blocks: prevent overflow and fix font on mobile — */
+@media (max-width: 767px) {
+  .lt-code-block { font-size: 0.75rem; overflow-x: auto; }
+  .lt-code-block pre { white-space: pre; word-break: normal; }
+}
+
+/* — Pagination: 44px touch targets on coarse pointer — */
+@media (pointer: coarse) {
+  .lt-page-btn {
+    min-height: 44px;
+    min-width: 44px;
+    font-size: 0.85rem;
+  }
+}
+
+/* — 4K: cap stats grid at 8 columns but use auto-fit — */
+@media (min-width: 2560px) {
+  .lt-stats-grid { grid-template-columns: repeat(8, 1fr); max-width: 100%; }
+  .lt-modal { max-width: 800px; }
+}
+
+/* ----------------------------------------------------------------
+   79. FOOTER
+   ---------------------------------------------------------------- */
+.lt-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  padding: var(--space-md) var(--space-lg);
+  border-top: 1px solid var(--border-dim);
+  margin-top: auto;
+  background: var(--bg-secondary);
+  color: var(--text-muted);
+  font-size: 0.7rem;
+  font-family: var(--font-mono);
+}
+@media (max-width: 479px) {
+  .lt-footer { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
+}
+
+/* Footer keyboard hint strip — a row of clickable key+label hints */
+.lt-footer-hints { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
+
+.lt-footer-hint {
+  all: unset;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--text-muted);
+  font-size: 0.7rem;
+  font-family: var(--font-mono);
+  white-space: nowrap;
+}
+.lt-footer-hint:hover { color: var(--accent-cyan); }
+.lt-footer-hint:focus-visible { outline: 1px dashed var(--accent-cyan); outline-offset: 2px; }
+
+.lt-footer-key {
+  color: var(--accent-cyan);
+  opacity: 0.8;
+}
+
+.lt-footer-sep {
+  color: var(--border-dim);
+  user-select: none;
+}
+
+/* ================================================================
+   BLINKING CURSOR
+   <h1 class="lt-cursor">SYSTEM STATUS</h1>
+   <span class="lt-cursor lt-cursor--cyan">SCANNING</span>
+   ================================================================ */
+.lt-cursor::after {
+  content: '▊';
+  animation: lt-blink 1s step-end infinite;
+  color: var(--accent-green);
+  margin-left: 2px;
+}
+.lt-cursor--cyan::after   { color: var(--accent-cyan); }
+.lt-cursor--orange::after { color: var(--accent-orange); }
+.lt-cursor--red::after    { color: var(--accent-red); }
+@keyframes lt-blink {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0; }
+}
+
+/* ================================================================
+   CRT SCANLINE OVERLAY
+   Add lt-scanlines to <body> or any container to enable.
+   Automatically suppressed in light theme.
+   ================================================================ */
+.lt-scanlines::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.04) 2px,
+    rgba(0, 0, 0, 0.04) 4px
+  );
+  pointer-events: none;
+  z-index: 9998;
+}
+html[data-theme="light"] .lt-scanlines::after { display: none; }
+
+/* ================================================================
+   RADAR SWEEP LOADING INDICATOR
+   <div class="lt-radar"></div>
+   Drop-in replacement for lt-spinner where a radar aesthetic fits.
+   ================================================================ */
+.lt-radar {
+  display: inline-block;
+  width: 48px; height: 48px;
+  border-radius: 50%;
+  border: 1px solid var(--accent-cyan);
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.lt-radar::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: conic-gradient(
+    from 0deg,
+    transparent 70%,
+    rgba(0, 212, 255, 0.35) 100%
+  );
+  animation: lt-radar-sweep 2s linear infinite;
+  transform-origin: center;
+}
+.lt-radar::after {
+  content: '';
+  position: absolute;
+  inset: 50% 0 0 50%;
+  width: 1px; height: 50%;
+  background: var(--accent-cyan);
+  transform-origin: top left;
+  animation: lt-radar-sweep 2s linear infinite;
+  opacity: 0.6;
+}
+.lt-radar--sm { width: 28px; height: 28px; }
+.lt-radar--lg { width: 72px; height: 72px; }
+.lt-radar--green { border-color: var(--accent-green); }
+.lt-radar--green::before { background: conic-gradient(from 0deg, transparent 70%, rgba(0,255,136,0.35) 100%); }
+.lt-radar--green::after  { background: var(--accent-green); }
+@keyframes lt-radar-sweep { to { transform: rotate(360deg); } }
diff --git a/public/web_template/base.js b/public/web_template/base.js
new file mode 100644
index 0000000..c4d76ec
--- /dev/null
+++ b/public/web_template/base.js
@@ -0,0 +1,2952 @@
+/**
+ * LOTUSGUILD TERMINAL DESIGN SYSTEM v1.2 — base.js
+ * Core JavaScript utilities shared across all LotusGuild applications
+ *
+ * Apps:      Tinker Tickets (PHP), PULSE (Node.js), GANDALF (Flask)
+ * Namespace: window.lt
+ *
+ * CONTENTS
+ *   1.  HTML Escape
+ *   2.  Toast Notifications
+ *   3.  Terminal Audio (beep)
+ *   4.  Modal Management
+ *   5.  Tab Management
+ *   6.  Boot Sequence Animation
+ *   7.  Keyboard Shortcuts
+ *   8.  Sidebar Collapse
+ *   9.  CSRF Token Helpers
+ *  10.  Fetch Helpers (JSON API wrapper)
+ *  11.  Time Formatting
+ *  12.  Bytes Formatting
+ *  13.  Table Keyboard Navigation
+ *  14.  Sortable Table Headers
+ *  15.  Stats Widget Filtering
+ *  16.  Auto-refresh Manager
+ *  --- v1.2 additions ---
+ *  17.  Accordion
+ *  18.  Tooltip System
+ *  19.  Clipboard Copy
+ *  20.  Alert / Banner Dismiss
+ *  21.  Progress Bar
+ *  22.  Command Palette
+ *  23.  Form Validation
+ *  24.  Debounce & Throttle
+ *  25.  Event Bus (pub/sub)
+ *  26.  Storage Helpers
+ *  27.  URL / Query String Helpers
+ *  28.  Number Formatter
+ *  29.  DOM Helpers
+ *  30.  Table Column Visibility
+ *  31.  Polling & Async Retry
+ *  32.  Drag & Drop Upload
+ *  33.  Intersection Observer
+ *  34.  Full Initialisation
+ */
+
+(function (global) {
+  'use strict';
+
+  /* ----------------------------------------------------------------
+     1. HTML ESCAPE
+     ---------------------------------------------------------------- */
+  function escHtml(str) {
+    if (str === null || str === undefined) return '';
+    return String(str)
+      .replace(/&/g,  '&amp;')
+      .replace(/</g,  '&lt;')
+      .replace(/>/g,  '&gt;')
+      .replace(/"/g,  '&quot;')
+      .replace(/'/g,  '&#39;');
+  }
+
+  /* ----------------------------------------------------------------
+     2. TOAST NOTIFICATIONS
+     ----------------------------------------------------------------
+     lt.toast.success(msg, duration?)
+     lt.toast.error(msg, duration?)
+     lt.toast.warning(msg, duration?)
+     lt.toast.info(msg, duration?)
+     ---------------------------------------------------------------- */
+  const _toastQueue = [];
+  let   _toastActive = false;
+
+  function showToast(message, type, duration) {
+    type     = type     || 'info';
+    duration = duration || 3500;
+    if (_toastActive) { if (_toastQueue.length < 12) _toastQueue.push({ message, type, duration }); return; }
+    _displayToast(message, type, duration);
+  }
+
+  function _displayToast(message, type, duration) {
+    _toastActive = true;
+    let container = document.getElementById('lt-toast-container');
+    if (!container) {
+      container = document.createElement('div');
+      container.id = 'lt-toast-container';
+      document.body.appendChild(container);
+    }
+    const icons = { success: '✓', error: '✗', warning: '!', info: 'i' };
+    const toast = document.createElement('div');
+    toast.className = 'lt-toast lt-toast-' + type;
+    toast.setAttribute('role', 'alert');
+    toast.setAttribute('aria-live', 'polite');
+
+    const iconEl  = document.createElement('span');
+    iconEl.className = 'lt-toast-icon';
+    iconEl.textContent = '[' + (icons[type] || 'i') + ']';
+
+    const msgEl   = document.createElement('span');
+    msgEl.className = 'lt-toast-msg';
+    msgEl.textContent = message;
+
+    const closeEl = document.createElement('button');
+    closeEl.type = 'button';
+    closeEl.className = 'lt-toast-close';
+    closeEl.textContent = '✕';
+    closeEl.setAttribute('aria-label', 'Dismiss');
+    closeEl.addEventListener('click', () => _dismissToast(toast));
+
+    const progressEl = document.createElement('div');
+    progressEl.className = 'lt-toast-progress';
+    progressEl.style.animationDuration = duration + 'ms';
+
+    toast.appendChild(iconEl);
+    toast.appendChild(msgEl);
+    toast.appendChild(closeEl);
+    toast.appendChild(progressEl);
+    container.appendChild(toast);
+
+    const timer = setTimeout(() => _dismissToast(toast), duration);
+    toast._lt_timer = timer;
+    _beep(type);
+  }
+
+  function _dismissToast(toast) {
+    if (!toast || !toast.parentNode) return;
+    clearTimeout(toast._lt_timer);
+    toast.style.opacity    = '0';
+    toast.style.transition = 'opacity 0.3s ease';
+    setTimeout(() => {
+      if (toast.parentNode) toast.parentNode.removeChild(toast);
+      _toastActive = false;
+      if (_toastQueue.length) {
+        const next = _toastQueue.shift();
+        _displayToast(next.message, next.type, next.duration);
+      }
+    }, 320);
+  }
+
+  const toast = {
+    success: (msg, dur) => showToast(msg, 'success', dur),
+    error:   (msg, dur) => showToast(msg, 'error',   dur),
+    warning: (msg, dur) => showToast(msg, 'warning', dur),
+    info:    (msg, dur) => showToast(msg, 'info',    dur),
+  };
+
+  /* ----------------------------------------------------------------
+     3. TERMINAL AUDIO
+     ---------------------------------------------------------------- */
+  function _beep(type) {
+    try {
+      const ctx  = new (global.AudioContext || global.webkitAudioContext)();
+      const osc  = ctx.createOscillator();
+      const gain = ctx.createGain();
+      osc.connect(gain);
+      gain.connect(ctx.destination);
+      osc.frequency.value = type === 'success' ? 880 : type === 'error' ? 220 : 440;
+      osc.type = 'sine';
+      gain.gain.setValueAtTime(0.06, ctx.currentTime);
+      gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.1);
+      osc.start(ctx.currentTime);
+      osc.stop(ctx.currentTime + 0.1);
+    } catch (_) {}
+  }
+
+  /* ----------------------------------------------------------------
+     4. MODAL MANAGEMENT
+     ----------------------------------------------------------------
+     lt.modal.open('modal-id')
+     lt.modal.close('modal-id')
+     lt.modal.closeAll()
+     ---------------------------------------------------------------- */
+
+  // iOS-safe scroll lock: position:fixed preserves scroll position on iOS
+  let _scrollLockCount = 0;
+  let _scrollLockY     = 0;
+  function _lockScroll() {
+    if (_scrollLockCount === 0) {
+      _scrollLockY = window.scrollY;
+      document.body.style.position = 'fixed';
+      document.body.style.top      = `-${_scrollLockY}px`;
+      document.body.style.width    = '100%';
+    }
+    _scrollLockCount++;
+  }
+  function _unlockScroll() {
+    _scrollLockCount = Math.max(0, _scrollLockCount - 1);
+    if (_scrollLockCount === 0) {
+      document.body.style.position = '';
+      document.body.style.top      = '';
+      document.body.style.width    = '';
+      window.scrollTo(0, _scrollLockY);
+    }
+  }
+
+  // Focus-trap helpers
+  const _FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+  function _trapFocus(el, e) {
+    const nodes = Array.from(el.querySelectorAll(_FOCUSABLE)).filter(n => !n.closest('[aria-hidden="true"]'));
+    if (!nodes.length) return;
+    const first = nodes[0], last = nodes[nodes.length - 1];
+    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+  }
+
+  // Map modal → trigger element so focus returns after close
+  const _modalTriggers = new WeakMap();
+
+  function openModal(id) {
+    const el = typeof id === 'string' ? document.getElementById(id) : id;
+    if (!el) return;
+    // Close mobile nav before opening modal (avoids z-index overlap)
+    if (_mnOpen) _mnSetOpen(false);
+    // Remember what triggered the open for return-focus
+    if (document.activeElement && document.activeElement !== document.body) {
+      _modalTriggers.set(el, document.activeElement);
+    }
+    el.classList.add('is-open');
+    el.removeAttribute('aria-hidden'); /* removing is correct; setting 'false' is an anti-pattern */
+    _lockScroll();
+    // Focus first focusable element
+    const first = el.querySelector(_FOCUSABLE);
+    if (first) setTimeout(() => first.focus(), 50);
+    // Tab focus trap
+    el._ltTrapHandler = e => { if (e.key === 'Tab') _trapFocus(el, e); };
+    el.addEventListener('keydown', el._ltTrapHandler);
+  }
+
+  function closeModal(id) {
+    const el = typeof id === 'string' ? document.getElementById(id) : id;
+    if (!el || !el.classList.contains('is-open')) return;
+    el.classList.remove('is-open');
+    el.setAttribute('aria-hidden', 'true');
+    _unlockScroll();
+    // Remove trap handler
+    if (el._ltTrapHandler) { el.removeEventListener('keydown', el._ltTrapHandler); delete el._ltTrapHandler; }
+    // Return focus to trigger (only if no other modal remains open)
+    const trigger = _modalTriggers.get(el);
+    if (trigger) {
+      _modalTriggers.delete(el);
+      if (!document.querySelector('.lt-modal-overlay.is-open') && document.contains(trigger)) {
+        trigger.focus();
+      }
+    }
+    // Announce the close so whoever opened the modal can undo optimistic UI or
+    // clean up a dynamically-inserted overlay. A modal can be dismissed four
+    // ways — the ✕ button, a Cancel button, a backdrop click, and Escape — and
+    // the last two are handled globally here, so button-only listeners miss them.
+    el.dispatchEvent(new CustomEvent('lt:modalclose', { bubbles: true }));
+  }
+
+  function closeAllModals() {
+    document.querySelectorAll('.lt-modal-overlay.is-open').forEach(closeModal);
+    const ov = document.getElementById('lt-cmd-overlay');
+    if (ov && ov.classList.contains('is-open')) {
+      ov.classList.remove('is-open');
+      _unlockScroll();
+    }
+  }
+
+  document.addEventListener('click', function (e) {
+    if (e.target.classList.contains('lt-modal-overlay')) { closeModal(e.target); return; }
+    const closeBtn = e.target.closest('[data-modal-close]');
+    if (closeBtn) { const overlay = closeBtn.closest('.lt-modal-overlay'); if (overlay) closeModal(overlay); }
+    const openBtn = e.target.closest('[data-modal-open]');
+    if (openBtn) openModal(openBtn.dataset.modalOpen);
+  });
+
+  const modal = { open: openModal, close: closeModal, closeAll: closeAllModals };
+
+  /* ----------------------------------------------------------------
+     5. TAB MANAGEMENT
+     ----------------------------------------------------------------
+     lt.tabs.init()
+     lt.tabs.switch('panel-id')
+     ---------------------------------------------------------------- */
+  function switchTab(panelId) {
+    document.querySelectorAll('.lt-tab[data-tab]').forEach(t => {
+      t.classList.remove('active');
+      t.setAttribute('aria-selected', 'false');
+    });
+    document.querySelectorAll('.lt-tab-panel').forEach(p => p.classList.remove('active'));
+    const btn   = document.querySelector('.lt-tab[data-tab="' + panelId + '"]');
+    const panel = document.getElementById(panelId);
+    if (btn)   { btn.classList.add('active'); btn.setAttribute('aria-selected', 'true'); }
+    if (panel) panel.classList.add('active');
+    try { localStorage.setItem('lt_activeTab_' + location.pathname, panelId); } catch (_) {}
+  }
+
+  let _tabsInitialized = false;
+  function initTabs() {
+    if (_tabsInitialized) return; _tabsInitialized = true;
+    try {
+      const saved = localStorage.getItem('lt_activeTab_' + location.pathname);
+      if (saved && document.getElementById(saved)) { switchTab(saved); }
+    } catch (_) {}
+    document.querySelectorAll('[role="tablist"]').forEach(tablist => {
+      const btns = Array.from(tablist.querySelectorAll('.lt-tab[data-tab]'));
+      btns.forEach((btn, i) => {
+        btn.addEventListener('click', () => switchTab(btn.dataset.tab));
+        btn.addEventListener('keydown', e => {
+          let idx = -1;
+          if (e.key === 'ArrowRight') idx = (i + 1) % btns.length;
+          else if (e.key === 'ArrowLeft') idx = (i - 1 + btns.length) % btns.length;
+          else if (e.key === 'Home') idx = 0;
+          else if (e.key === 'End') idx = btns.length - 1;
+          if (idx >= 0) { e.preventDefault(); btns[idx].focus(); switchTab(btns[idx].dataset.tab); }
+        });
+      });
+    });
+  }
+
+  const tabs = { init: initTabs, switch: switchTab };
+
+  /* ----------------------------------------------------------------
+     6. BOOT SEQUENCE ANIMATION
+     ----------------------------------------------------------------
+     lt.boot.run('APP NAME')
+     lt.boot.run('APP NAME', true)   // force replay
+     ---------------------------------------------------------------- */
+  let _bootFired = false; // in-memory guard: survives within a JS context, resets on true page reload
+  function runBoot(appName, force) {
+    if (!force && _bootFired) return;   // Fastest guard — blocks any same-page double-call
+    const storageKey = 'lt_booted_' + (appName || 'app');
+    if (!force && sessionStorage.getItem(storageKey)) return;
+    _bootFired = true;
+    sessionStorage.setItem(storageKey, '1');
+    const overlay = document.getElementById('lt-boot');
+    const pre     = document.getElementById('lt-boot-text');
+    if (!overlay || !pre) return;
+
+    overlay.style.display = 'flex';
+    overlay.style.opacity = '1';
+
+    const name      = (appName || 'TERMINAL').toUpperCase();
+    const titleStr  = name + ' v1.2';
+    const inner     = 50;
+    const lp        = Math.max(0, Math.floor((inner - titleStr.length) / 2));
+    const rp        = Math.max(0, inner - titleStr.length - lp);
+    const messages  = [
+      '╔════════════════════════════════════════════════════╗',
+      '║' + ' '.repeat(lp) + titleStr + ' '.repeat(rp) + '║',
+      '║          LOTUSGUILD INFRASTRUCTURE PLATFORM        ║',
+      '╚════════════════════════════════════════════════════╝',
+      '',
+      '[ OK ] Kernel modules loaded',
+      '[ OK ] Filesystem mounted read-write',
+      '[ OK ] Network interfaces configured',
+      '[ OK ] Database connection pool initialized',
+      '[ OK ] Authentication service started',
+      '[ OK ] Security headers applied',
+      '[ OK ] API gateway bound',
+      '[ OK ] Scheduled tasks registered',
+      '[ OK ] Terminal interface rendered',
+      '',
+      '> ALL SYSTEMS NOMINAL — ' + name,
+      '',
+    ];
+
+    let i = 0;
+    pre.textContent = '';
+    const interval = setInterval(() => {
+      if (i < messages.length) {
+        pre.textContent += messages[i] + '\n';
+        i++;
+      } else {
+        clearInterval(interval);
+        setTimeout(() => {
+          overlay.style.transition = 'opacity 0.5s ease';
+          overlay.style.opacity    = '0';
+          setTimeout(() => { overlay.style.display = 'none'; overlay.style.opacity = ''; overlay.style.transition = ''; }, 520);
+        }, 500);
+      }
+    }, 65);
+  }
+
+  const boot = { run: runBoot };
+
+  /* ----------------------------------------------------------------
+     7. KEYBOARD SHORTCUTS
+     ----------------------------------------------------------------
+     lt.keys.on('ctrl+k', fn)
+     lt.keys.off('ctrl+k')
+     lt.keys.initDefaults()
+     ---------------------------------------------------------------- */
+  const _keyHandlers = {};
+
+  function normalizeKey(combo) {
+    return combo.replace(/ctrl\+/i, 'ctrl+').replace(/cmd\+/i, 'ctrl+').replace(/meta\+/i, 'ctrl+').toLowerCase();
+  }
+
+  function registerKey(combo, handler)  { _keyHandlers[normalizeKey(combo)] = handler; }
+  function unregisterKey(combo)         { delete _keyHandlers[normalizeKey(combo)]; }
+
+  document.addEventListener('keydown', function (e) {
+    const inInput    = ['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName) || e.target.isContentEditable;
+    let combo = '';
+    if (e.ctrlKey || e.metaKey) combo += 'ctrl+';
+    if (e.altKey)               combo += 'alt+';
+    if (e.shiftKey)             combo += 'shift+';
+    combo += e.key.toLowerCase();
+    const alwaysFire = e.key === 'Escape' || e.ctrlKey || e.metaKey;
+    if (inInput && !alwaysFire) return;
+    const handler = _keyHandlers[combo];
+    if (handler) { e.preventDefault(); handler(e); }
+  });
+
+  function initDefaultKeys() {
+    registerKey('escape', closeAllModals);
+    registerKey('?', () => { const h = document.getElementById('lt-keys-help'); if (h) openModal(h); });
+    registerKey('ctrl+k', () => {
+      const ov = document.getElementById('lt-cmd-overlay');
+      if (ov) { _cmdPaletteOpen(); return; }
+      const s = document.querySelector('.lt-search-input');
+      if (s) { s.focus(); s.select(); }
+    });
+  }
+
+  const keys = { on: registerKey, off: unregisterKey, initDefaults: initDefaultKeys };
+
+  /* ----------------------------------------------------------------
+     8. SIDEBAR COLLAPSE
+     ----------------------------------------------------------------
+     lt.sidebar.init()
+     ---------------------------------------------------------------- */
+  let _sidebarInitialized = false;
+  function initSidebar() {
+    if (_sidebarInitialized) return; _sidebarInitialized = true;
+    document.querySelectorAll('[data-sidebar-toggle]').forEach(btn => {
+      const sidebar = document.getElementById(btn.dataset.sidebarToggle);
+      if (!sidebar) return;
+      const collapsed = sessionStorage.getItem('lt_sidebar_' + btn.dataset.sidebarToggle) === '1';
+      if (collapsed) { sidebar.classList.add('collapsed'); btn.textContent = '▶'; }
+      btn.addEventListener('click', () => {
+        sidebar.classList.toggle('collapsed');
+        const c = sidebar.classList.contains('collapsed');
+        btn.textContent = c ? '▶' : '◀';
+        try { sessionStorage.setItem('lt_sidebar_' + btn.dataset.sidebarToggle, c ? '1' : '0'); } catch (_) {}
+      });
+    });
+  }
+
+  const sidebar = { init: initSidebar };
+
+  /* ----------------------------------------------------------------
+     9. CSRF TOKEN HELPERS
+     ----------------------------------------------------------------
+     lt.csrf.headers()
+     ---------------------------------------------------------------- */
+  function csrfHeaders() {
+    const token = global.CSRF_TOKEN || '';
+    return token ? { 'X-CSRF-Token': token } : {};
+  }
+
+  const csrf = { headers: csrfHeaders };
+
+  /* ----------------------------------------------------------------
+     10. FETCH HELPERS
+     ----------------------------------------------------------------
+     lt.api.get(url)
+     lt.api.post(url, body)
+     lt.api.put / patch / delete
+     ---------------------------------------------------------------- */
+  async function apiFetch(method, url, body) {
+    const hasBody = body !== undefined;
+    const headers = Object.assign({}, csrfHeaders());
+    if (hasBody) headers['Content-Type'] = 'application/json'; // Only set on requests with a body
+    const opts = { method, headers };
+    if (hasBody) opts.body = JSON.stringify(body);
+    let resp;
+    try { resp = await fetch(url, opts); } catch (err) { throw new Error('Network error: ' + err.message); }
+    let data;
+    try { data = await resp.json(); } catch (_) { data = { success: resp.ok }; }
+    if (!resp.ok) throw new Error(data.error || data.message || 'HTTP ' + resp.status);
+    return data;
+  }
+
+  const api = {
+    get:    url        => apiFetch('GET',    url),
+    post:   (url, b)   => apiFetch('POST',   url, b),
+    put:    (url, b)   => apiFetch('PUT',    url, b),
+    patch:  (url, b)   => apiFetch('PATCH',  url, b),
+    delete: (url, b)   => apiFetch('DELETE', url, b),
+  };
+
+  /* ----------------------------------------------------------------
+     11. TIME FORMATTING
+     ----------------------------------------------------------------
+     lt.time.ago(value)
+     lt.time.uptime(secs)
+     lt.time.format(value)
+     ---------------------------------------------------------------- */
+  function timeAgo(value) {
+    const date = value instanceof Date ? value : new Date(value);
+    if (isNaN(date)) return '—';
+    const diff = Math.floor((Date.now() - date.getTime()) / 1000);
+    if (diff < 60)    return diff + 's ago';
+    if (diff < 3600)  return Math.floor(diff / 60)  + 'm ago';
+    if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
+    return Math.floor(diff / 86400) + 'd ago';
+  }
+
+  function formatUptime(secs) {
+    secs = Math.floor(secs);
+    const d = Math.floor(secs / 86400), h = Math.floor((secs % 86400) / 3600),
+          m = Math.floor((secs % 3600) / 60), s = secs % 60;
+    const p = [];
+    if (d) p.push(d + 'd'); if (h) p.push(h + 'h'); if (m) p.push(m + 'm'); if (!d) p.push(s + 's');
+    return p.join(' ') || '0s';
+  }
+
+  function formatDate(value) {
+    const date = value instanceof Date ? value : new Date(value);
+    if (isNaN(date)) return '—';
+    try {
+      return date.toLocaleString(undefined, {
+        timeZone: global.APP_TIMEZONE || undefined,
+        year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit',
+      });
+    } catch (_) { return date.toLocaleString(); }
+  }
+
+  const time = { ago: timeAgo, uptime: formatUptime, format: formatDate };
+
+  /* ----------------------------------------------------------------
+     12. BYTES FORMATTING
+     ----------------------------------------------------------------
+     lt.bytes.format(n)
+     ---------------------------------------------------------------- */
+  function formatBytes(bytes) {
+    if (bytes == null) return '—';
+    const units = ['B','KB','MB','GB','TB']; let i = 0;
+    while (bytes >= 1024 && i < units.length - 1) { bytes /= 1024; i++; }
+    return bytes.toFixed(i === 0 ? 0 : 2) + ' ' + units[i];
+  }
+
+  /* ----------------------------------------------------------------
+     13. TABLE KEYBOARD NAVIGATION
+     ----------------------------------------------------------------
+     lt.tableNav.init('table-id')
+     ---------------------------------------------------------------- */
+  function initTableNav(tableId) {
+    const table = tableId ? document.getElementById(tableId) : document.querySelector('.lt-table');
+    if (!table) return;
+    function rows()     { return Array.from(table.querySelectorAll('tbody tr')); }
+    function selected() { return table.querySelector('tbody tr.lt-row-selected'); }
+    function move(dir) {
+      const all = rows(); if (!all.length) return;
+      const cur = selected(), idx = cur ? all.indexOf(cur) : -1;
+      const next = dir === 'down' ? all[idx < all.length - 1 ? idx + 1 : 0] : all[idx > 0 ? idx - 1 : all.length - 1];
+      if (cur) cur.classList.remove('lt-row-selected');
+      next.classList.add('lt-row-selected');
+      next.scrollIntoView({ block: 'nearest' });
+    }
+    keys.on('j',         () => move('down'));
+    keys.on('arrowdown', () => move('down'));
+    keys.on('k',         () => move('up'));
+    keys.on('arrowup',   () => move('up'));
+    keys.on('enter', () => { const row = selected(); if (row) { const l = row.querySelector('a[href]'); if (l) global.location.href = l.href; } });
+  }
+
+  const tableNav = { init: initTableNav };
+
+  /* ----------------------------------------------------------------
+     14. SORTABLE TABLE HEADERS
+     ----------------------------------------------------------------
+     lt.sortTable.init('table-id')
+     ---------------------------------------------------------------- */
+  function initSortTable(tableId) {
+    const table = document.getElementById(tableId);
+    if (!table) return;
+    const ths = Array.from(table.querySelectorAll('th[data-sort-key]'));
+    ths.forEach((th, colIdx) => {
+      let dir = 'asc';
+      th.setAttribute('aria-sort', 'none');
+      th.setAttribute('tabindex', '0');
+      const _sort = () => {
+        ths.forEach(h => { h.removeAttribute('data-sort'); h.setAttribute('aria-sort', 'none'); });
+        th.setAttribute('data-sort', dir);
+        th.setAttribute('aria-sort', dir === 'asc' ? 'ascending' : 'descending');
+        const tbody = table.querySelector('tbody');
+        const rows  = Array.from(tbody.querySelectorAll('tr'));
+        rows.sort((a, b) => {
+          const aT = (a.cells[colIdx] || {}).textContent || '';
+          const bT = (b.cells[colIdx] || {}).textContent || '';
+          const n  = !isNaN(parseFloat(aT)) && !isNaN(parseFloat(bT));
+          const cmp = n ? parseFloat(aT) - parseFloat(bT) : aT.localeCompare(bT);
+          return dir === 'asc' ? cmp : -cmp;
+        });
+        rows.forEach(r => tbody.appendChild(r));
+        dir = dir === 'asc' ? 'desc' : 'asc';
+      };
+      th.addEventListener('click', _sort);
+      th.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); _sort(); } });
+    });
+  }
+
+  const sortTable = { init: initSortTable };
+
+  /* ----------------------------------------------------------------
+     15. STATS WIDGET FILTERING
+     ----------------------------------------------------------------
+     lt.statsFilter.init()
+     ---------------------------------------------------------------- */
+  function initStatsFilter() {
+    document.querySelectorAll('.lt-stat-card[data-filter-key]').forEach(card => {
+      const _activate = () => {
+        const key = card.dataset.filterKey, val = card.dataset.filterVal;
+        const wasActive = card.classList.contains('active');
+        document.querySelectorAll('.lt-stat-card').forEach(c => c.classList.remove('active'));
+        if (!wasActive) card.classList.add('active');
+        if (typeof global.lt_onStatFilter === 'function')
+          global.lt_onStatFilter(wasActive ? null : key, wasActive ? null : val);
+      };
+      card.addEventListener('click', _activate);
+      card.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); _activate(); } });
+    });
+  }
+
+  const statsFilter = { init: initStatsFilter };
+
+  /* ----------------------------------------------------------------
+     16. AUTO-REFRESH MANAGER
+     ----------------------------------------------------------------
+     lt.autoRefresh.start(fn, ms)
+     lt.autoRefresh.stop()
+     lt.autoRefresh.now()
+     ---------------------------------------------------------------- */
+  let _arTimer = null, _arFn = null, _arInterval = 30000;
+
+  function arStart(fn, ms) { arStop(); _arFn = fn; _arInterval = ms || 30000; _arTimer = setInterval(_arFn, _arInterval); }
+  function arStop()        { if (_arTimer) { clearInterval(_arTimer); _arTimer = null; } }
+  function arNow()         { arStop(); if (_arFn) { _arFn(); _arTimer = setInterval(_arFn, _arInterval); } }
+
+  const autoRefresh = { start: arStart, stop: arStop, now: arNow };
+
+  /* ================================================================
+     v1.2 NEW MODULES
+     ================================================================ */
+
+  /* ----------------------------------------------------------------
+     17. ACCORDION
+     ----------------------------------------------------------------
+     lt.accordion.init()
+     lt.accordion.open(triggerEl)
+     lt.accordion.close(triggerEl)
+     ---------------------------------------------------------------- */
+  function _accordionOpen(trigger) {
+    const body = trigger.nextElementSibling;
+    if (!body || !body.classList.contains('lt-accordion-body')) return;
+    trigger.setAttribute('aria-expanded', 'true');
+    body.style.height = body.scrollHeight + 'px';
+    body.classList.add('is-open');
+    body.addEventListener('transitionend', function once() {
+      if (body.classList.contains('is-open')) body.style.height = 'auto';
+      body.removeEventListener('transitionend', once);
+    });
+  }
+
+  function _accordionClose(trigger) {
+    const body = trigger.nextElementSibling;
+    if (!body || !body.classList.contains('lt-accordion-body')) return;
+    body.style.height = body.scrollHeight + 'px';
+    requestAnimationFrame(() => {
+      body.style.height = '0';
+      body.classList.remove('is-open');
+      trigger.setAttribute('aria-expanded', 'false');
+    });
+  }
+
+  let _accordionInitialized = false;
+  function initAccordion() {
+    if (_accordionInitialized) return; _accordionInitialized = true;
+    // Support both data-accordion attribute (HTML) and .lt-accordion-trigger class
+    document.querySelectorAll('[data-accordion], .lt-accordion-trigger').forEach(trigger => {
+      if (trigger.getAttribute('aria-expanded') === 'true') {
+        const body = trigger.nextElementSibling;
+        if (body) { body.style.height = 'auto'; body.classList.add('is-open'); }
+      }
+      trigger.addEventListener('click', () => {
+        const isOpen = trigger.getAttribute('aria-expanded') === 'true';
+        const acc    = trigger.closest('[data-accordion-single]');
+        if (acc) {
+          acc.querySelectorAll('[data-accordion], .lt-accordion-trigger').forEach(t => {
+            if (t !== trigger && t.getAttribute('aria-expanded') === 'true') _accordionClose(t);
+          });
+        }
+        isOpen ? _accordionClose(trigger) : _accordionOpen(trigger);
+      });
+    });
+  }
+
+  const accordion = { init: initAccordion, open: _accordionOpen, close: _accordionClose };
+
+  /* ----------------------------------------------------------------
+     18. TOOLTIP SYSTEM
+     ----------------------------------------------------------------
+     lt.tooltip.init()
+     lt.tooltip.show(anchorEl)
+     lt.tooltip.hide()
+
+     HTML: <any data-tooltip="Text" [data-tooltip-pos="top|bottom|left|right"]>
+     ---------------------------------------------------------------- */
+  let _tooltipEl = null;
+
+  function _tooltipShow(anchor) {
+    _tooltipHide();
+    const text = anchor.dataset.tooltip;
+    if (!text) return;
+    const pos = anchor.dataset.tooltipPos || 'top';
+    const tip = document.createElement('div');
+    tip.className   = 'lt-tooltip-bubble';
+    tip.textContent = text;
+    tip.setAttribute('role', 'tooltip');
+    document.body.appendChild(tip);
+    _tooltipEl = tip;
+
+    const r  = anchor.getBoundingClientRect();
+    const tr = tip.getBoundingClientRect();
+    const sx = global.scrollX || 0, sy = global.scrollY || 0;
+    let top, left;
+    switch (pos) {
+      case 'bottom': top = r.bottom + sy + 8; left = r.left + sx + r.width / 2 - tr.width / 2; break;
+      case 'left':   top = r.top + sy + r.height / 2 - tr.height / 2; left = r.left + sx - tr.width - 8; break;
+      case 'right':  top = r.top + sy + r.height / 2 - tr.height / 2; left = r.right + sx + 8; break;
+      default:       top = r.top + sy - tr.height - 8; left = r.left + sx + r.width / 2 - tr.width / 2;
+    }
+    const maxLeft = (global.scrollX || 0) + global.innerWidth  - tr.width  - 4;
+    const maxTop  = (global.scrollY || 0) + global.innerHeight - tr.height - 4;
+    left = Math.max(4 + (global.scrollX || 0), Math.min(maxLeft, left));
+    top  = Math.max(4 + (global.scrollY || 0), Math.min(maxTop,  top));
+    tip.style.cssText = 'position:absolute;top:' + top + 'px;left:' + left + 'px';
+    requestAnimationFrame(() => tip.classList.add('is-visible'));
+  }
+
+  function _tooltipHide() {
+    if (_tooltipEl) { _tooltipEl.remove(); _tooltipEl = null; }
+  }
+
+  let _tooltipInitialized = false;
+  function initTooltips() {
+    if (_tooltipInitialized) return;
+    _tooltipInitialized = true;
+    document.addEventListener('mouseover',  e => { const a = e.target.closest('[data-tooltip]'); if (a) _tooltipShow(a); });
+    document.addEventListener('mouseout',   e => { if (!e.target.closest('[data-tooltip]')) return; if (!e.relatedTarget || !e.relatedTarget.closest('[data-tooltip]')) _tooltipHide(); });
+    document.addEventListener('focusin',    e => { const a = e.target.closest('[data-tooltip]'); if (a) _tooltipShow(a); });
+    document.addEventListener('focusout',   _tooltipHide);
+    document.addEventListener('scroll',     _tooltipHide, { passive: true });
+    global.addEventListener('resize',       _tooltipHide, { passive: true });
+  }
+
+  const tooltip = { init: initTooltips, show: _tooltipShow, hide: _tooltipHide };
+
+  /* ----------------------------------------------------------------
+     19. CLIPBOARD COPY
+     ----------------------------------------------------------------
+     lt.clipboard.copy(text)              → Promise<boolean>
+     lt.clipboard.initCopyButtons()
+
+     HTML: <button data-copy="text" [data-copy-toast]>COPY</button>
+     ---------------------------------------------------------------- */
+  async function clipboardCopy(text) {
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) { await navigator.clipboard.writeText(text); return true; }
+      const ta = document.createElement('textarea');
+      ta.value = text; ta.style.cssText = 'position:fixed;top:-9999px;left:-9999px';
+      document.body.appendChild(ta); ta.focus(); ta.select();
+      const ok = document.execCommand('copy');
+      document.body.removeChild(ta); return ok;
+    } catch (_) { return false; }
+  }
+
+  let _copyInitialized = false;
+  function initCopyButtons() {
+    if (_copyInitialized) return; _copyInitialized = true;
+    document.addEventListener('click', async function (e) {
+      const btn = e.target.closest('[data-copy]'); if (!btn) return;
+      const orig = btn.textContent;
+      const ok   = await clipboardCopy(btn.dataset.copy);
+      if (ok) {
+        btn.textContent = 'COPIED ✓'; btn.disabled = true;
+        if (btn.hasAttribute('data-copy-toast')) toast.success('Copied to clipboard');
+        setTimeout(() => { if (document.contains(btn)) { btn.textContent = orig; btn.disabled = false; } }, 1500);
+      } else { toast.error('Copy failed'); }
+    });
+  }
+
+  const clipboard = { copy: clipboardCopy, initCopyButtons };
+
+  /* ----------------------------------------------------------------
+     20. ALERT / BANNER DISMISS
+     ----------------------------------------------------------------
+     lt.alerts.init()
+     lt.alerts.dismiss(el)
+     ---------------------------------------------------------------- */
+  function dismissAlert(el) {
+    el.style.transition = 'opacity 0.3s ease, max-height 0.35s ease, padding 0.35s ease, margin 0.35s ease';
+    el.style.overflow   = 'hidden';
+    el.style.opacity    = '0';
+    el.style.maxHeight  = el.offsetHeight + 'px';
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      el.style.maxHeight = '0'; el.style.margin = '0'; el.style.padding = '0';
+      setTimeout(() => el.remove(), 360);
+    }));
+  }
+
+  let _alertsInitialized = false;
+  function initAlerts() {
+    if (_alertsInitialized) return; _alertsInitialized = true;
+    document.addEventListener('click', function (e) {
+      const btn = e.target.closest('.lt-alert-close, .lt-alert-dismiss'); if (!btn) return;
+      const al  = btn.closest('.lt-alert'); if (al) dismissAlert(al);
+    });
+    document.querySelectorAll('.lt-alert[data-alert-auto-dismiss]').forEach(el => {
+      const ms = parseInt(el.dataset.alertAutoDismiss, 10);
+      if (ms > 0) setTimeout(() => dismissAlert(el), ms);
+    });
+  }
+
+  const alerts = { init: initAlerts, dismiss: dismissAlert };
+
+  /* ----------------------------------------------------------------
+     21. PROGRESS BAR
+     ----------------------------------------------------------------
+     lt.progress.set(el, value, max?)
+     lt.progress.animate(el, from, to, durationMs?)
+     ---------------------------------------------------------------- */
+  function _pEl(el) { return typeof el === 'string' ? document.querySelector(el) : el; }
+
+  function progressSet(el, value, max) {
+    el = _pEl(el); if (!el) return;
+    const pct   = Math.min(100, Math.max(0, (value / (max || 100)) * 100));
+    const bar   = el.querySelector('.lt-progress-bar');
+    const valEl = el.parentElement && el.parentElement.querySelector('.lt-progress-value');
+    if (bar) bar.style.width = pct + '%';
+    if (valEl) valEl.textContent = Math.round(pct) + '%';
+    el.setAttribute('aria-valuenow', Math.round(pct));
+  }
+
+  function progressAnimate(el, from, to, dur) {
+    el = _pEl(el); if (!el) return;
+    dur = dur || 600;
+    const start = performance.now();
+    function step(now) {
+      const t = Math.min(1, (now - start) / dur);
+      progressSet(el, from + (to - from) * (1 - Math.pow(1 - t, 3)));
+      if (t < 1) requestAnimationFrame(step);
+    }
+    requestAnimationFrame(step);
+  }
+
+  const progress = { set: progressSet, animate: progressAnimate };
+
+  /* ----------------------------------------------------------------
+     22. COMMAND PALETTE
+     ----------------------------------------------------------------
+     lt.cmdPalette.init(commands)
+     lt.cmdPalette.open()
+     lt.cmdPalette.close()
+     lt.cmdPalette.register(cmd)
+
+     Command: { id, label, icon?, description?, kbd?, group?, tags?, action }
+     ---------------------------------------------------------------- */
+  let _cpCommands = [], _cpSelected = 0, _cpTrigger = null;
+  const _cpRecentKey = 'lt_cmd_recent';
+
+  function _cmdPaletteOpen() {
+    const ov = document.getElementById('lt-cmd-overlay'); if (!ov) return;
+    if (_mnOpen) _mnSetOpen(false);
+    _cpTrigger = (document.activeElement && document.activeElement !== document.body) ? document.activeElement : null;
+    ov.classList.add('is-open');
+    _lockScroll();
+    const palette = document.getElementById('lt-cmd-palette');
+    const inp = palette && palette.querySelector('.lt-cmd-input');
+    if (inp) { inp.value = ''; inp.focus(); inp.select(); }
+    _cpRender('');
+  }
+
+  function _cmdPaletteClose() {
+    const ov = document.getElementById('lt-cmd-overlay'); if (!ov) return;
+    ov.classList.remove('is-open');
+    _unlockScroll();
+    const inp = document.querySelector('#lt-cmd-palette .lt-cmd-input');
+    if (inp) inp.removeAttribute('aria-activedescendant');
+    if (_cpTrigger) { if (document.contains(_cpTrigger)) _cpTrigger.focus(); _cpTrigger = null; }
+  }
+
+  function _cpHighlight(text, q) {
+    if (!q) return escHtml(text);
+    const i = text.toLowerCase().indexOf(q.toLowerCase());
+    if (i < 0) return escHtml(text);
+    return escHtml(text.slice(0, i)) +
+      '<mark style="background:rgba(255,107,0,0.35);color:inherit">' + escHtml(text.slice(i, i + q.length)) + '</mark>' +
+      escHtml(text.slice(i + q.length));
+  }
+
+  function _cpRender(query) {
+    const ov = document.getElementById('lt-cmd-palette'); if (!ov) return;
+    const results = ov.querySelector('.lt-cmd-results'); if (!results) return;
+    query = query.trim().toLowerCase();
+
+    let recents = [];
+    try { recents = JSON.parse(localStorage.getItem(_cpRecentKey) || '[]'); } catch (_) {}
+
+    const filtered = _cpCommands.filter(cmd =>
+      !query || [cmd.label, cmd.description || '', ...(cmd.tags || [])].join(' ').toLowerCase().includes(query)
+    );
+
+    _cpSelected = 0;
+    if (!filtered.length) { results.innerHTML = '<div class="lt-cmd-empty">No results for &ldquo;' + escHtml(query) + '&rdquo;</div>'; return; }
+
+    const groups = {}, order = [];
+    if (!query && recents.length) {
+      const rec = recents.map(id => _cpCommands.find(c => c.id === id)).filter(Boolean);
+      if (rec.length) { groups['Recent'] = rec; order.push('Recent'); }
+    }
+    filtered.forEach(cmd => {
+      const g = cmd.group || 'Other';
+      if (!groups[g]) { groups[g] = []; if (!order.includes(g)) order.push(g); }
+      groups[g].push(cmd);
+    });
+
+    let html = '', idx = 0;
+    order.forEach(g => {
+      if (!groups[g] || !groups[g].length) return;
+      html += '<div class="lt-cmd-section-label">' + escHtml(g) + '</div>';
+      groups[g].forEach(cmd => {
+        html += '<div class="lt-cmd-item' + (idx === 0 ? ' is-selected' : '') + '" id="lt-cmd-item-' + idx + '" data-cmd-id="' + escHtml(cmd.id) + '">' +
+          '<span class="lt-cmd-item-icon">' + escHtml(cmd.icon || '◦') + '</span>' +
+          '<span class="lt-cmd-item-label">' + _cpHighlight(cmd.label, query) + '</span>' +
+          (cmd.kbd ? '<span class="lt-cmd-item-kbd">' + escHtml(cmd.kbd) + '</span>' : '') +
+          '</div>';
+        idx++;
+      });
+    });
+
+    results.innerHTML = html;
+    const pal = document.getElementById('lt-cmd-palette');
+    const inp = pal && pal.querySelector('.lt-cmd-input');
+    const allItems = Array.from(results.querySelectorAll('.lt-cmd-item'));
+    if (inp && allItems[0]) inp.setAttribute('aria-activedescendant', allItems[0].id);
+    allItems.forEach((item, i) => {
+      item.addEventListener('mouseenter', () => {
+        allItems.forEach(x => x.classList.remove('is-selected'));
+        item.classList.add('is-selected'); _cpSelected = i;
+        if (inp) inp.setAttribute('aria-activedescendant', item.id);
+      });
+      item.addEventListener('click', () => _cpExec(item.dataset.cmdId));
+    });
+  }
+
+  function _cpExec(id) {
+    const cmd = _cpCommands.find(c => c.id === id);
+    if (!cmd || typeof cmd.action !== 'function') return;
+    _cmdPaletteClose();
+    try {
+      let r = JSON.parse(localStorage.getItem(_cpRecentKey) || '[]');
+      r = [id, ...r.filter(x => x !== id)].slice(0, 5);
+      localStorage.setItem(_cpRecentKey, JSON.stringify(r));
+    } catch (_) {}
+    cmd.action();
+  }
+
+  function _cpMove(dir) {
+    const ov = document.getElementById('lt-cmd-palette'); if (!ov) return;
+    const items = Array.from(ov.querySelectorAll('.lt-cmd-item')); if (!items.length) return;
+    items[_cpSelected] && items[_cpSelected].classList.remove('is-selected');
+    _cpSelected = (_cpSelected + dir + items.length) % items.length;
+    items[_cpSelected] && items[_cpSelected].classList.add('is-selected');
+    items[_cpSelected] && items[_cpSelected].scrollIntoView({ block: 'nearest' });
+    const inp = ov.querySelector('.lt-cmd-input');
+    if (inp && items[_cpSelected]) inp.setAttribute('aria-activedescendant', items[_cpSelected].id);
+  }
+
+  function initCmdPalette(commands) {
+    _cpCommands = commands || [];
+    const ov = document.getElementById('lt-cmd-palette'); if (!ov) return;
+    const inp = ov.querySelector('.lt-cmd-input');
+    if (inp) {
+      inp.addEventListener('input',   () => _cpRender(inp.value));
+      inp.addEventListener('keydown', e => {
+        if (e.key === 'ArrowDown')  { e.preventDefault(); _cpMove(1); }
+        if (e.key === 'ArrowUp')    { e.preventDefault(); _cpMove(-1); }
+        if (e.key === 'Enter')      { e.preventDefault(); const s = ov.querySelector('.lt-cmd-item.is-selected'); if (s) _cpExec(s.dataset.cmdId); }
+        if (e.key === 'Escape')     { e.preventDefault(); _cmdPaletteClose(); }
+      });
+    }
+    const overlay = document.getElementById('lt-cmd-overlay');
+    if (overlay) overlay.addEventListener('click', e => { if (e.target === overlay) _cmdPaletteClose(); });
+  }
+
+  const cmdPalette = {
+    init:     initCmdPalette,
+    open:     _cmdPaletteOpen,
+    close:    _cmdPaletteClose,
+    register: cmd => { const i = _cpCommands.findIndex(c => c.id === cmd.id); if (i >= 0) _cpCommands[i] = cmd; else _cpCommands.push(cmd); },
+  };
+
+  /* ----------------------------------------------------------------
+     23. FORM VALIDATION
+     ----------------------------------------------------------------
+     lt.validate.field(el)       → { valid, message }
+     lt.validate.form(formEl)    → { valid, errors }
+     lt.validate.showError(el, msg)
+     lt.validate.clearError(el)
+     lt.validate.init(formEl, onSubmit)
+     lt.validate.custom = {}
+     ---------------------------------------------------------------- */
+  const _validateCustom = {};
+
+  function _validateField(el) {
+    const val = el.value || '', type = (el.type || '').toLowerCase();
+    if ((type === 'checkbox' || type === 'radio') && el.required && !el.checked) return { valid: false, message: 'This field is required' };
+    if (el.tagName === 'SELECT' && el.multiple && el.required && el.selectedOptions.length === 0) return { valid: false, message: 'Please select at least one option' };
+    if (el.required && !val.trim())                                             return { valid: false, message: 'This field is required' };
+    if (el.minLength > 0 && val.length < el.minLength)                         return { valid: false, message: 'Minimum ' + el.minLength + ' characters' };
+    if (el.maxLength > 0 && val.length > el.maxLength)                         return { valid: false, message: 'Maximum ' + el.maxLength + ' characters' };
+    if (val && type === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val))   return { valid: false, message: 'Enter a valid email address' };
+    if (val && type === 'url')   { try { new URL(val); } catch (_) { return { valid: false, message: 'Enter a valid URL' }; } }
+    if (val && type === 'number' && isNaN(Number(val)))                         return { valid: false, message: 'Enter a valid number' };
+    if (val && el.pattern && !new RegExp('^(?:' + el.pattern + ')$').test(val)) return { valid: false, message: el.dataset.validateMsg || 'Invalid format' };
+    if (el.dataset.validate) {
+      const fn = _validateCustom[el.dataset.validate];
+      if (typeof fn === 'function') { const r = fn(val, el); if (r !== true) return { valid: false, message: r || 'Invalid value' }; }
+    }
+    return { valid: true, message: '' };
+  }
+
+  function _showError(el, msg) {
+    el.classList.add('is-invalid'); el.classList.remove('is-valid');
+    let err = el.parentElement && el.parentElement.querySelector('.lt-field-error');
+    if (!err) {
+      err = document.createElement('span');
+      err.className = 'lt-field-error';
+      err.id = (el.id || ('lt-field-' + Math.random().toString(36).slice(2))) + '-err';
+      if (el.parentElement) el.parentElement.appendChild(err);
+    }
+    err.textContent = msg;
+    err.setAttribute('role', 'alert');
+    el.setAttribute('aria-describedby', err.id);
+    el.setAttribute('aria-invalid', 'true');
+  }
+
+  function _clearError(el) {
+    el.classList.remove('is-invalid'); el.classList.add('is-valid');
+    el.removeAttribute('aria-invalid');
+    el.removeAttribute('aria-describedby');
+    const err = el.parentElement && el.parentElement.querySelector('.lt-field-error');
+    if (err) err.remove();
+  }
+
+  function _validateForm(formEl) {
+    const errors = []; let valid = true;
+    Array.from(formEl.querySelectorAll('input, select, textarea')).forEach(f => {
+      if (f.disabled || f.readOnly) return;
+      const r = _validateField(f);
+      if (!r.valid) { valid = false; _showError(f, r.message); errors.push({ el: f, message: r.message }); }
+      else _clearError(f);
+    });
+    return { valid, errors };
+  }
+
+  function initFormValidation(formEl, onSubmit) {
+    if (!formEl) return;
+    formEl.querySelectorAll('input, select, textarea').forEach(f => {
+      f.addEventListener('blur', () => { const r = _validateField(f); r.valid ? _clearError(f) : _showError(f, r.message); });
+    });
+    formEl.addEventListener('submit', e => {
+      e.preventDefault();
+      const r = _validateForm(formEl);
+      if (r.valid && typeof onSubmit === 'function') onSubmit(formEl, e);
+      else if (!r.valid && r.errors.length) r.errors[0].el.focus();
+    });
+  }
+
+  const validate = { field: _validateField, form: _validateForm, showError: _showError, clearError: _clearError, init: initFormValidation, custom: _validateCustom };
+
+  /* ----------------------------------------------------------------
+     24. DEBOUNCE & THROTTLE
+     ----------------------------------------------------------------
+     lt.debounce(fn, wait)  → fn with .cancel()
+     lt.throttle(fn, wait)  → throttled fn
+     ---------------------------------------------------------------- */
+  function debounce(fn, wait) {
+    let t;
+    function d() { const a = arguments, c = this; clearTimeout(t); t = setTimeout(() => fn.apply(c, a), wait); }
+    d.cancel = () => clearTimeout(t);
+    return d;
+  }
+
+  function throttle(fn, wait) {
+    let last = 0;
+    return function () { const now = Date.now(); if (now - last >= wait) { last = now; fn.apply(this, arguments); } };
+  }
+
+  /* ----------------------------------------------------------------
+     25. EVENT BUS
+     ----------------------------------------------------------------
+     lt.bus.on / off / emit / once
+     ---------------------------------------------------------------- */
+  const _busH = new Map();
+
+  function busOn(e, h)   { if (!_busH.has(e)) _busH.set(e, []); _busH.get(e).push(h); }
+  function busOff(e, h)  { const hs = _busH.get(e); if (hs) _busH.set(e, hs.filter(x => x !== h)); }
+  function busEmit(e, d) { (_busH.get(e) || []).slice().forEach(h => { try { h(d); } catch (err) { console.error('lt.bus:', err); } }); }
+  function busOnce(e, h) { function w(d) { h(d); busOff(e, w); } busOn(e, w); }
+
+  const bus = { on: busOn, off: busOff, emit: busEmit, once: busOnce };
+
+  /* ----------------------------------------------------------------
+     26. STORAGE HELPERS
+     ----------------------------------------------------------------
+     lt.store.set / get / remove / clear
+     lt.store.session.*
+     ---------------------------------------------------------------- */
+  function _mkStore(s) {
+    return {
+      set(k, v)   { try { s.setItem('lt_' + k, JSON.stringify(v)); } catch (_) {} },
+      get(k, fb)  { try { const r = s.getItem('lt_' + k); return r !== null ? JSON.parse(r) : (fb !== undefined ? fb : null); } catch (_) { return fb !== undefined ? fb : null; } },
+      remove(k)   { try { s.removeItem('lt_' + k); } catch (_) {} },
+      clear()     { try { Object.keys(s).filter(k => k.startsWith('lt_')).forEach(k => s.removeItem(k)); } catch (_) {} },
+    };
+  }
+
+  const store = Object.assign(_mkStore(localStorage), { session: _mkStore(sessionStorage) });
+
+  /* ----------------------------------------------------------------
+     27. URL HELPERS
+     ----------------------------------------------------------------
+     lt.url.params / get / set / remove / setMultiple
+     ---------------------------------------------------------------- */
+  const url = {
+    params()         { return new URLSearchParams(global.location.search); },
+    get(k)           { return this.params().get(k); },
+    set(k, v)        { const p = this.params(); p.set(k, v); global.history.pushState({}, '', global.location.pathname + '?' + p); },
+    remove(k)        { const p = this.params(); p.delete(k); const q = p.toString(); global.history.pushState({}, '', global.location.pathname + (q ? '?' + q : '')); },
+    setMultiple(obj) { const p = this.params(); Object.entries(obj).forEach(([k, v]) => v == null ? p.delete(k) : p.set(k, v)); global.history.pushState({}, '', global.location.pathname + '?' + p); },
+  };
+
+  /* ----------------------------------------------------------------
+     28. NUMBER FORMATTER
+     ----------------------------------------------------------------
+     lt.num.format / compact / percent / pad / clamp / lerp
+     ---------------------------------------------------------------- */
+  const num = {
+    format(n, d)      { if (n == null || isNaN(n)) return '—'; return Number(n).toLocaleString(undefined, { minimumFractionDigits: d || 0, maximumFractionDigits: d != null ? d : 2 }); },
+    compact(n)        { if (Math.abs(n) >= 1e9) return (n/1e9).toFixed(1)+'B'; if (Math.abs(n) >= 1e6) return (n/1e6).toFixed(1)+'M'; if (Math.abs(n) >= 1e3) return (n/1e3).toFixed(1)+'K'; return String(n); },
+    percent(n, total) { return total ? ((n/total)*100).toFixed(1)+'%' : '—'; },
+    pad(n, w)         { return String(Math.floor(n)).padStart(w, '0'); },
+    clamp(n, a, b)    { return Math.min(b, Math.max(a, n)); },
+    lerp(a, b, t)     { return a + (b - a) * t; },
+  };
+
+  /* ----------------------------------------------------------------
+     29. DOM HELPERS
+     ----------------------------------------------------------------
+     lt.dom.el / qs / qsa / on / off / show / hide / toggle /
+     empty / append / closest / ready
+     ---------------------------------------------------------------- */
+  const dom = {
+    el(tag, attrs) {
+      const el = document.createElement(tag);
+      if (attrs) Object.entries(attrs).forEach(([k, v]) => {
+        if (k === 'class') el.className = v;
+        else if (k === 'text') el.textContent = v;
+        else if (k === 'html') el.innerHTML = v;
+        else el.setAttribute(k, v);
+      });
+      for (let i = 2; i < arguments.length; i++) {
+        const c = arguments[i];
+        el.appendChild(typeof c === 'string' ? document.createTextNode(c) : c);
+      }
+      return el;
+    },
+    qs(sel, ctx)       { return (ctx || document).querySelector(sel); },
+    qsa(sel, ctx)      { return Array.from((ctx || document).querySelectorAll(sel)); },
+    on(el, ev, fn, o)  { el.addEventListener(ev, fn, o); return () => el.removeEventListener(ev, fn, o); },
+    off(el, ev, fn)    { el.removeEventListener(ev, fn); },
+    show(el)           { if (el) el.classList.remove('lt-hidden'); },
+    hide(el)           { if (el) el.classList.add('lt-hidden'); },
+    toggle(el, force)  { if (el) el.classList.toggle('lt-hidden', force === undefined ? undefined : !force); },
+    empty(el)          { while (el && el.firstChild) el.removeChild(el.firstChild); },
+    append(p)          { for (let i = 1; i < arguments.length; i++) if (arguments[i]) p.appendChild(arguments[i]); },
+    closest(el, sel)   { return el ? el.closest(sel) : null; },
+    ready(fn)          { document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', fn) : fn(); },
+  };
+
+  /* ----------------------------------------------------------------
+     30. TABLE COLUMN VISIBILITY
+     ----------------------------------------------------------------
+     lt.tableColumns.init / show / hide / toggle
+     ---------------------------------------------------------------- */
+  function _cells(t, i) { const c = []; t.querySelectorAll('tr').forEach(r => { if (r.cells[i]) c.push(r.cells[i]); }); return c; }
+  function _saveCols(id, i, v) { try { const k = 'lt_cols_' + id, s = JSON.parse(localStorage.getItem(k) || '{}'); s[i] = v; localStorage.setItem(k, JSON.stringify(s)); } catch (_) {} }
+
+  function _colShow(id, i)   { const t = document.getElementById(id); if (!t) return; _cells(t, i).forEach(c => c.style.display = ''); _saveCols(id, i, true); }
+  function _colHide(id, i)   { const t = document.getElementById(id); if (!t) return; _cells(t, i).forEach(c => c.style.display = 'none'); _saveCols(id, i, false); }
+  function _colToggle(id, i) { const t = document.getElementById(id); if (!t) return; const c0 = _cells(t, i)[0]; (c0 && c0.style.display === 'none') ? _colShow(id, i) : _colHide(id, i); }
+
+  function initTableColumns(tableId) {
+    try { const s = JSON.parse(localStorage.getItem('lt_cols_' + tableId) || '{}'); Object.entries(s).forEach(([i, v]) => { if (!v) _colHide(tableId, +i); }); } catch (_) {}
+    document.querySelectorAll('[data-toggle-col]').forEach(btn => {
+      btn.addEventListener('click', () => _colToggle(btn.dataset.tableId || tableId, +btn.dataset.toggleCol));
+    });
+  }
+
+  const tableColumns = { init: initTableColumns, show: _colShow, hide: _colHide, toggle: _colToggle };
+
+  /* ----------------------------------------------------------------
+     31. POLLING & ASYNC RETRY
+     ----------------------------------------------------------------
+     lt.poll(fn, ms, opts?) → { stop }
+     lt.retry(fn, opts?)    → Promise
+     ---------------------------------------------------------------- */
+  function poll(fn, ms, opts) {
+    opts = opts || {}; let stopped = false, timer = null;
+    async function tick() {
+      if (stopped) return;
+      try { await fn(); } catch (e) { if (typeof opts.onError === 'function') opts.onError(e); }
+      if (!stopped) timer = setTimeout(tick, ms);
+    }
+    opts.immediate ? tick() : (timer = setTimeout(tick, ms));
+    return { stop() { stopped = true; clearTimeout(timer); } };
+  }
+
+  async function retry(fn, opts) {
+    opts = opts || {};
+    const retries = opts.retries || 3, delay = opts.delay || 1000, backoff = opts.backoff || 1;
+    let lastErr;
+    for (let i = 0; i <= retries; i++) {
+      try { return await fn(i); } catch (e) {
+        lastErr = e;
+        if (i < retries) {
+          if (typeof opts.onRetry === 'function') opts.onRetry(e, i + 1);
+          await new Promise(r => setTimeout(r, delay * Math.pow(backoff, i)));
+        }
+      }
+    }
+    throw lastErr;
+  }
+
+  /* ----------------------------------------------------------------
+     32. DRAG & DROP UPLOAD
+     ----------------------------------------------------------------
+     lt.dropzone.init(el, opts)
+       opts: { onFiles, accept, maxSize, multiple }
+     ---------------------------------------------------------------- */
+  function initDropzone(el, opts) {
+    if (typeof el === 'string') el = document.querySelector(el);
+    if (!el) return;
+    opts = opts || {};
+    const maxSize = opts.maxSize || 10 * 1024 * 1024;
+
+    function validate(files) {
+      const valid = [], invalid = [];
+      Array.from(files).forEach(f => {
+        if (f.size > maxSize) { invalid.push(f.name + ' (too large)'); return; }
+        if (opts.accept && opts.accept.length) {
+          const ok = opts.accept.some(a => a.startsWith('.') ? f.name.toLowerCase().endsWith(a) : f.type.match(new RegExp(a.replace('*', '.*'))));
+          if (!ok) { invalid.push(f.name + ' (not allowed)'); return; }
+        }
+        valid.push(f);
+      });
+      if (invalid.length) toast.error('Rejected: ' + invalid.join(', '));
+      return valid;
+    }
+
+    function deliver(files) {
+      const v = validate(files);
+      if (v.length) { el.classList.add('has-file'); if (typeof opts.onFiles === 'function') opts.onFiles(opts.multiple !== false ? v : [v[0]]); }
+    }
+
+    el.addEventListener('dragover',  e => { e.preventDefault(); el.classList.add('is-dragging'); });
+    el.addEventListener('dragleave', e => { if (!el.contains(e.relatedTarget)) el.classList.remove('is-dragging'); });
+    el.addEventListener('drop',      e => { e.preventDefault(); el.classList.remove('is-dragging'); deliver(e.dataTransfer.files); });
+    el.addEventListener('click', () => {
+      const inp = document.createElement('input');
+      inp.type = 'file'; inp.multiple = opts.multiple !== false;
+      if (opts.accept) inp.accept = opts.accept.join(',');
+      inp.addEventListener('change', () => deliver(inp.files));
+      inp.click();
+    });
+  }
+
+  function _initAllDropzones() {
+    document.querySelectorAll('[data-dropzone]').forEach(el => {
+      initDropzone(el, { onFiles: files => toast.info(Array.from(files).length + ' file(s) selected: ' + Array.from(files).map(f => f.name).join(', ')) });
+    });
+  }
+
+  const dropzone = { init: initDropzone };
+
+  /* ----------------------------------------------------------------
+     33. INTERSECTION OBSERVER
+     ----------------------------------------------------------------
+     lt.observe.lazy(selector, opts?)   → adds .is-visible on enter
+     lt.observe.sentinel(el, callback)  → fires when el enters viewport
+     ---------------------------------------------------------------- */
+  function observeLazy(selector, opts) {
+    if (!global.IntersectionObserver) {
+      document.querySelectorAll(selector).forEach(el => el.classList.add('is-visible'));
+      return;
+    }
+    opts = opts || {};
+    const obs = new IntersectionObserver((entries, o) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('is-visible');
+          if (opts.once !== false) o.unobserve(entry.target);
+        }
+      });
+    }, { threshold: opts.threshold || 0.1, rootMargin: opts.rootMargin || '0px' });
+    document.querySelectorAll(selector).forEach(el => obs.observe(el));
+    return obs;
+  }
+
+  function observeSentinel(el, cb) {
+    if (!el || !global.IntersectionObserver) { if (el) cb(); return; }
+    const obs = new IntersectionObserver(entries => { if (entries[0].isIntersecting) cb(); }, { threshold: 0.1 });
+    obs.observe(el);
+    return { stop: () => obs.disconnect() };
+  }
+
+  const observe = { lazy: observeLazy, sentinel: observeSentinel };
+
+  /* ----------------------------------------------------------------
+     34. FULL INITIALISATION
+     ---------------------------------------------------------------- */
+  function init() {
+    /* Core */
+    initTabs();
+    initSidebar();
+    initDefaultKeys();
+    initStatsFilter();
+    /* v1.2 */
+    initAccordion();
+    initTooltips();
+    initCopyButtons();
+    initAlerts();
+    _initAllDropzones();
+    observeLazy('[data-lazy]');
+    /* v1.3 */
+    initMobileNav();
+    initSidebarSubmenus();
+    /* Boot */
+    const bootEl = document.getElementById('lt-boot');
+    if (bootEl) runBoot(bootEl.dataset.appName || document.title);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+
+
+  /* ================================================================
+     MODULE 35 — VIEWPORT
+     Tracks current breakpoint, fires callbacks on change.
+     lt.viewport.bp()         → 'xs'|'sm'|'md'|'lg'|'xl'|'2xl'|'3xl'|'4k'
+     lt.viewport.is('md')     → true if current bp >= md
+     lt.viewport.on(cb)       → subscribe (cb receives {bp, w, h, prev})
+     lt.viewport.off(cb)      → unsubscribe
+     lt.viewport.touch()      → true if primary pointer is coarse
+     lt.viewport.landscape()  → true if width > height
+     ================================================================ */
+  const _bpOrder = ['xs','sm','md','lg','xl','2xl','3xl','4k'];
+  const _bpMin   = { xs: 0, sm: 480, md: 768, lg: 1024, xl: 1280, '2xl': 1536, '3xl': 1920, '4k': 2560 };
+  let _vpListeners = [];
+  let _vpCurrent   = null;
+
+  function _getBp(w) {
+    if (w >= 2560) return '4k';
+    if (w >= 1920) return '3xl';
+    if (w >= 1536) return '2xl';
+    if (w >= 1280) return 'xl';
+    if (w >= 1024) return 'lg';
+    if (w >=  768) return 'md';
+    if (w >=  480) return 'sm';
+    return 'xs';
+  }
+
+  function _vpFire() {
+    const w    = window.innerWidth;
+    const h    = window.innerHeight;
+    const bp   = _getBp(w);
+    const prev = _vpCurrent;
+    _vpCurrent = bp;
+    if (bp !== prev) {
+      const evt = { bp, w, h, prev };
+      _vpListeners.forEach(cb => { try { cb(evt); } catch (_) {} });
+      bus.emit('viewport:change', evt);
+    }
+  }
+
+  const _vpResizeHandler      = debounce(_vpFire, 120);
+  const _vpOrientationHandler = debounce(_vpFire, 350); // 350ms for iOS layout settle
+  window.addEventListener('resize',           _vpResizeHandler);
+  window.addEventListener('orientationchange', _vpOrientationHandler);
+  _vpFire(); // set initial value
+
+  const viewport = {
+    bp:        ()      => _vpCurrent || _getBp(window.innerWidth),
+    is:        name    => {
+      if (!_bpOrder.includes(name)) { console.warn('[lt.viewport] Unknown breakpoint:', name); return false; }
+      return _bpOrder.indexOf(_vpCurrent || _getBp(window.innerWidth)) >= _bpOrder.indexOf(name);
+    },
+    width:     ()      => window.innerWidth,
+    height:    ()      => window.innerHeight,
+    touch:     ()      => window.matchMedia('(pointer: coarse)').matches,
+    landscape: ()      => window.innerWidth > window.innerHeight,
+    on:        cb      => { if (!_vpListeners.includes(cb)) _vpListeners.push(cb); },
+    off:       cb      => { _vpListeners = _vpListeners.filter(l => l !== cb); },
+    breakpoints: _bpMin,
+  };
+
+
+  /* ================================================================
+     MODULE 36 — MOBILE NAV
+     Hamburger-driven off-canvas navigation drawer with swipe support.
+     lt.mobileNav.open()   / .close()   / .toggle()
+     Auto-inits on [id="lt-menu-btn"] + [id="lt-nav-drawer"]
+     Swipe right from left edge (≤ 20px) opens; swipe left closes.
+     ================================================================ */
+  let _mnOpen = false, _mnTrigger = null;
+
+  function _mnSetOpen(open) {
+    _mnOpen = open;
+    const btn     = document.getElementById('lt-menu-btn');
+    const drawer  = document.getElementById('lt-nav-drawer');
+    const overlay = document.getElementById('lt-nav-overlay');
+    if (!drawer) return;
+
+    if (open) {
+      _mnTrigger = (document.activeElement && document.activeElement !== document.body) ? document.activeElement : null;
+      drawer.classList.add('open');
+      drawer.removeAttribute('aria-hidden');
+      if (overlay) overlay.classList.add('open');
+      if (btn)     { btn.classList.add('open'); btn.setAttribute('aria-expanded', 'true'); }
+      document.body.style.overflow = 'hidden';
+      // Trap focus inside drawer
+      if (!drawer._mnTrapHandler) {
+        drawer._mnTrapHandler = e => { if (e.key === 'Tab') _trapFocus(drawer, e); };
+        drawer.addEventListener('keydown', drawer._mnTrapHandler);
+      }
+      const first = drawer.querySelector('button, a, [tabindex]');
+      if (first) setTimeout(() => { if (document.contains(first)) first.focus(); }, 50);
+    } else {
+      drawer.classList.remove('open');
+      drawer.setAttribute('aria-hidden', 'true');
+      if (overlay) overlay.classList.remove('open');
+      if (btn)     { btn.classList.remove('open'); btn.setAttribute('aria-expanded', 'false'); }
+      document.body.style.overflow = '';
+      if (drawer._mnTrapHandler) { drawer.removeEventListener('keydown', drawer._mnTrapHandler); delete drawer._mnTrapHandler; }
+      if (_mnTrigger && document.contains(_mnTrigger)) { _mnTrigger.focus(); }
+      _mnTrigger = null;
+    }
+    bus.emit('mobileNav:' + (open ? 'open' : 'close'));
+  }
+
+  let _mnInitialized = false;
+  function initMobileNav() {
+    if (_mnInitialized) return; // prevent duplicate init / memory leaks
+    _mnInitialized = true;
+    const btn     = document.getElementById('lt-menu-btn');
+    const overlay = document.getElementById('lt-nav-overlay');
+    const closeBtn = document.getElementById('lt-nav-drawer-close');
+
+    if (btn)      btn.addEventListener('click', () => _mnSetOpen(!_mnOpen));
+    if (overlay)  overlay.addEventListener('click', () => _mnSetOpen(false));
+    if (closeBtn) closeBtn.addEventListener('click', () => _mnSetOpen(false));
+
+    // Close on Escape
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape' && _mnOpen) _mnSetOpen(false);
+    });
+
+    // Close when nav link is clicked (navigates away)
+    const drawer = document.getElementById('lt-nav-drawer');
+    if (drawer) {
+      drawer.querySelectorAll('a').forEach(a => {
+        a.addEventListener('click', () => _mnSetOpen(false));
+      });
+    }
+
+    // Swipe gesture — open from left edge, close by swiping left
+    let _touchStartX = 0;
+    let _touchStartY = 0;
+    let _isSwiping   = false;
+
+    document.addEventListener('touchstart', e => {
+      _touchStartX = e.touches[0].clientX;
+      _touchStartY = e.touches[0].clientY;
+      // Only initiate open-swipe from left 20px edge
+      _isSwiping = !_mnOpen && _touchStartX <= 20;
+    }, { passive: true });
+
+    document.addEventListener('touchmove', e => {
+      if (!_isSwiping && !_mnOpen) return;
+      const dx = e.touches[0].clientX - _touchStartX;
+      const dy = e.touches[0].clientY - _touchStartY;
+      // Ignore mostly-vertical scrolls
+      if (Math.abs(dy) > Math.abs(dx) * 1.5) { _isSwiping = false; return; }
+      // Live drag feedback on the drawer
+      const drawerEl = document.getElementById('lt-nav-drawer');
+      if (!drawerEl) return;
+      if (!_mnOpen && _isSwiping && dx > 0) {
+        const pct = Math.min(dx / 280, 1);
+        drawerEl.style.transform = `translateX(${-100 + pct * 100}%)`;
+        drawerEl.style.transition = 'none';
+      } else if (_mnOpen && dx < 0) {
+        const pct = Math.max(0, 1 + dx / 280);
+        drawerEl.style.transform = `translateX(${-(1 - pct) * 100}%)`;
+        drawerEl.style.transition = 'none';
+      }
+    }, { passive: true });
+
+    document.addEventListener('touchend', e => {
+      const drawerEl = document.getElementById('lt-nav-drawer');
+      if (!drawerEl) return;
+      drawerEl.style.transform = '';
+      drawerEl.style.transition = '';
+      const dx = e.changedTouches[0].clientX - _touchStartX;
+      if (!_mnOpen && _isSwiping && dx > 60)  _mnSetOpen(true);
+      if (_mnOpen && dx < -60)                 _mnSetOpen(false);
+      _isSwiping = false;
+    }, { passive: true });
+
+    // Auto-close when viewport becomes desktop width
+    viewport.on(({ bp }) => {
+      if (['lg', 'xl', '2xl', '3xl', '4k'].includes(bp) && _mnOpen) _mnSetOpen(false);
+    });
+  }
+
+  const mobileNav = {
+    open:   () => _mnSetOpen(true),
+    close:  () => _mnSetOpen(false),
+    toggle: () => _mnSetOpen(!_mnOpen),
+    isOpen: () => _mnOpen,
+  };
+
+
+  /* ================================================================
+     MODULE 37 — THEME TOGGLE
+     lt.theme.toggle()
+     lt.theme.set('light'|'dark')
+     lt.theme.get()
+     ================================================================ */
+  const _themeKey = 'lt_theme';
+  function _applyTheme(t) {
+    document.documentElement.setAttribute('data-theme', t);
+    document.documentElement.style.colorScheme = t;
+    try { localStorage.setItem(_themeKey, t); } catch(_) {}
+    // Sync theme-color meta for browser chrome
+    const metaTheme = document.querySelector('meta[name="theme-color"]');
+    if (metaTheme) metaTheme.setAttribute('content', t === 'light' ? '#edf0f5' : '#030508');
+    document.querySelectorAll('.lt-theme-btn').forEach(btn => {
+      btn.textContent = t === 'light' ? '◐' : '☀';
+      btn.setAttribute('aria-label', t === 'light' ? 'Switch to dark mode' : 'Switch to light mode');
+      btn.setAttribute('title',      t === 'light' ? 'Switch to dark mode' : 'Switch to light mode');
+    });
+    bus.emit('theme:change', { theme: t });
+  }
+  const _initTheme = (function() {
+    let saved;
+    try { saved = localStorage.getItem(_themeKey); } catch(_) {}
+    return saved || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+  })();
+  _applyTheme(_initTheme);
+  window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', e => {
+    let saved; try { saved = localStorage.getItem(_themeKey); } catch(_) {}
+    if (!saved) _applyTheme(e.matches ? 'light' : 'dark');
+  });
+  // Sync theme across tabs via storage event
+  window.addEventListener('storage', e => {
+    if (e.key === _themeKey && e.newValue) _applyTheme(e.newValue);
+  });
+  const theme = {
+    toggle: () => _applyTheme(document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light'),
+    set:    t  => _applyTheme(t),
+    get:    () => document.documentElement.getAttribute('data-theme') || 'dark',
+  };
+
+  /* ================================================================
+     MODULE 38 — NOTIFICATION BADGE
+     lt.notif.set(el, count)
+     lt.notif.inc(el)
+     lt.notif.clear(el)
+     el = CSS selector string or DOM element
+     ================================================================ */
+  function _notifEl(el)  { return typeof el === 'string' ? document.querySelector(el) : el; }
+  function _notifBadge(el) {
+    const wrap = _notifEl(el); if (!wrap) return null;
+    let b = wrap.querySelector(':scope > .lt-notif-badge');
+    if (!b) {
+      b = document.createElement('span');
+      b.className = 'lt-notif-badge';
+      b.setAttribute('aria-live', 'polite');
+      b.setAttribute('role', 'status');
+      wrap.classList.add('lt-notif-wrap');
+      wrap.appendChild(b);
+    }
+    return b;
+  }
+  const notif = {
+    set(el, n) {
+      const b = _notifBadge(el); if (!b) return;
+      const label = n > 99 ? '99+' : n > 0 ? String(n) : '';
+      b.textContent = label;
+      b.setAttribute('data-count', n);
+      b.setAttribute('aria-label', n > 0 ? `${n} notification${n !== 1 ? 's' : ''}` : '');
+    },
+    inc(el) {
+      const b = _notifBadge(el); if (!b) return;
+      const cur = parseInt(b.getAttribute('data-count') || '0', 10);
+      notif.set(el, cur + 1);
+    },
+    clear(el) { notif.set(el, 0); },
+  };
+
+  /* ================================================================
+     MODULE 39 — RIGHT-SIDE DRAWER
+     lt.rightDrawer.open(id)
+     lt.rightDrawer.close(id)
+     lt.rightDrawer.toggle(id)
+     ================================================================ */
+  function _rdOpen(id, triggerEl) {
+    const drawer = typeof id === 'string' ? document.getElementById(id) : id;
+    if (!drawer) return;
+    const ovId = drawer.dataset.overlay || id + '-overlay';
+    const ov   = document.getElementById(ovId);
+    if (_mnOpen) _mnSetOpen(false);
+    drawer.classList.add('is-open');
+    drawer.removeAttribute('aria-hidden');
+    if (ov) ov.classList.add('is-open');
+    _lockScroll();
+    if (triggerEl) _modalTriggers.set(drawer, triggerEl);
+    const first = drawer.querySelector(_FOCUSABLE);
+    if (first) setTimeout(() => first.focus(), 50);
+    // ESC to close + Tab trap
+    drawer._rdKeyHandler = e => { if (e.key === 'Escape') _rdClose(drawer); };
+    document.addEventListener('keydown', drawer._rdKeyHandler);
+    drawer._rdTrapHandler = e => { if (e.key === 'Tab') _trapFocus(drawer, e); };
+    drawer.addEventListener('keydown', drawer._rdTrapHandler);
+    // Overlay click
+    if (ov) ov._rdClick = () => _rdClose(drawer);
+    if (ov) ov.addEventListener('click', ov._rdClick);
+    // Close button
+    drawer.querySelectorAll('[data-drawer-close]').forEach(btn => {
+      btn._rdHandler = () => _rdClose(drawer);
+      btn.addEventListener('click', btn._rdHandler);
+    });
+  }
+  function _rdClose(id) {
+    const drawer = typeof id === 'string' ? document.getElementById(id) : id;
+    if (!drawer || !drawer.classList.contains('is-open')) return;
+    const ovId = drawer.dataset.overlay || (drawer.id ? drawer.id + '-overlay' : null);
+    const ov   = ovId ? document.getElementById(ovId) : null;
+    drawer.classList.remove('is-open');
+    drawer.setAttribute('aria-hidden', 'true');
+    if (ov) { ov.classList.remove('is-open'); if (ov._rdClick) { ov.removeEventListener('click', ov._rdClick); delete ov._rdClick; } }
+    drawer.querySelectorAll('[data-drawer-close]').forEach(btn => {
+      if (btn._rdHandler) { btn.removeEventListener('click', btn._rdHandler); delete btn._rdHandler; }
+    });
+    _unlockScroll();
+    if (drawer._rdKeyHandler)  { document.removeEventListener('keydown', drawer._rdKeyHandler); delete drawer._rdKeyHandler; }
+    if (drawer._rdTrapHandler) { drawer.removeEventListener('keydown', drawer._rdTrapHandler); delete drawer._rdTrapHandler; }
+    const trigger = _modalTriggers.get(drawer);
+    if (trigger) { trigger.focus(); _modalTriggers.delete(drawer); }
+  }
+  const rightDrawer = {
+    open:   (id) => _rdOpen(id, document.activeElement !== document.body ? document.activeElement : null),
+    close:  (id) => _rdClose(id),
+    toggle: (id) => {
+      const el = typeof id === 'string' ? document.getElementById(id) : id;
+      if (el && el.classList.contains('is-open')) _rdClose(el); else _rdOpen(id);
+    },
+  };
+  // data-drawer-open="drawer-id" trigger wiring
+  document.addEventListener('click', e => {
+    const btn = e.target.closest('[data-drawer-open]');
+    if (btn) { e.preventDefault(); _rdOpen(btn.dataset.drawerOpen, btn); }
+  });
+
+  /* ================================================================
+     MODULE 40 — CONTEXT MENU
+     lt.contextMenu.register(selector, items)
+     items = [{ label, icon, kbd, danger, divider, action }]
+     ================================================================ */
+  let _ctxMenu = null, _ctxTrigger = null;
+  const _ctxItems = {};
+  function _ctxShow(x, y, items, trigger) {
+    _ctxTrigger = trigger || (document.activeElement !== document.body ? document.activeElement : null);
+    if (!_ctxMenu) {
+      _ctxMenu = document.createElement('div');
+      _ctxMenu.className = 'lt-context-menu';
+      _ctxMenu.setAttribute('role', 'menu');
+      document.body.appendChild(_ctxMenu);
+    }
+    _ctxMenu.innerHTML = '';
+    items.forEach(item => {
+      if (item.divider) { const d = document.createElement('div'); d.className = 'lt-context-menu-divider'; _ctxMenu.appendChild(d); return; }
+      if (item.label && !item.action) { const l = document.createElement('div'); l.className = 'lt-context-menu-label'; l.textContent = item.label; _ctxMenu.appendChild(l); return; }
+      const el = document.createElement('div');
+      el.className = 'lt-context-menu-item' + (item.danger ? ' is-danger' : '');
+      el.setAttribute('role', 'menuitem');
+      el.setAttribute('tabindex', '0');
+      el.innerHTML = `${item.icon ? `<span class="icon">${escHtml(item.icon)}</span>` : '<span class="icon"></span>'}<span>${escHtml(item.label || '')}</span>${item.kbd ? `<kbd>${escHtml(item.kbd)}</kbd>` : ''}`;
+      el.addEventListener('click', () => { _ctxHide(); if (item.action) item.action(); });
+      el.addEventListener('keydown', e => {
+        const items = Array.from(_ctxMenu.querySelectorAll('[role="menuitem"]'));
+        const idx = items.indexOf(e.currentTarget);
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); el.click(); }
+        else if (e.key === 'ArrowDown') { e.preventDefault(); (items[idx + 1] || items[0]).focus(); }
+        else if (e.key === 'ArrowUp')   { e.preventDefault(); (items[idx - 1] || items[items.length - 1]).focus(); }
+        else if (e.key === 'Home')      { e.preventDefault(); items[0].focus(); }
+        else if (e.key === 'End')       { e.preventDefault(); items[items.length - 1].focus(); }
+      });
+      _ctxMenu.appendChild(el);
+    });
+    _ctxMenu.classList.add('is-open');
+    // Position — keep on screen
+    const vw = window.innerWidth, vh = window.innerHeight;
+    const mw = _ctxMenu.offsetWidth || 180, mh = _ctxMenu.offsetHeight || 200;
+    _ctxMenu.style.left = Math.max(8, Math.min(x, vw - mw - 8)) + 'px';
+    _ctxMenu.style.top  = Math.min(y, vh - mh - 8) + 'px';
+    // Focus first item
+    const first = _ctxMenu.querySelector('[role="menuitem"]');
+    if (first) setTimeout(() => first.focus(), 20);
+  }
+  function _ctxHide() {
+    if (_ctxMenu) _ctxMenu.classList.remove('is-open');
+    if (_ctxTrigger && document.contains(_ctxTrigger)) { _ctxTrigger.focus(); }
+    _ctxTrigger = null;
+  }
+  document.addEventListener('click',       () => _ctxHide());
+  document.addEventListener('contextmenu', e => {
+    const target = e.target.closest('[data-context-menu]');
+    if (!target) { _ctxHide(); return; }
+    e.preventDefault();
+    const menuId = target.dataset.contextMenu;
+    const items  = _ctxItems[menuId];
+    if (items) _ctxShow(e.clientX, e.clientY, items, target);
+  });
+  document.addEventListener('keydown', e => { if (e.key === 'Escape') _ctxHide(); });
+  const contextMenu = {
+    register(id, items) { _ctxItems[id] = items; },
+    show:    (x, y, items) => _ctxShow(x, y, items),
+    hide:    () => _ctxHide(),
+  };
+
+  /* ================================================================
+     MODULE 41 — OFFLINE DETECTION
+     lt.offline.onOnline(fn)
+     lt.offline.onOffline(fn)
+     lt.offline.isOnline()
+     ================================================================ */
+  let _offlineBanner = null;
+  function _offlineGetBanner() {
+    if (!_offlineBanner) {
+      _offlineBanner = document.getElementById('lt-offline-banner');
+      if (!_offlineBanner) {
+        _offlineBanner = document.createElement('div');
+        _offlineBanner.id = 'lt-offline-banner';
+        _offlineBanner.className = 'lt-offline-banner';
+        _offlineBanner.setAttribute('role', 'alert');
+        _offlineBanner.setAttribute('aria-live', 'assertive');
+        _offlineBanner.innerHTML = '<span class="lt-dot lt-dot--red"></span> NO NETWORK CONNECTION — RECONNECTING...';
+        document.body.appendChild(_offlineBanner);
+      }
+    }
+    return _offlineBanner;
+  }
+  const _offlineHandlers  = [];
+  const _onlineHandlers   = [];
+  window.addEventListener('offline', () => {
+    document.body.classList.add('lt-is-offline');
+    _offlineGetBanner().classList.add('is-visible');
+    toast.warning('Connection lost — working offline');
+    _offlineHandlers.forEach(fn => fn());
+  });
+  window.addEventListener('online', () => {
+    document.body.classList.remove('lt-is-offline');
+    _offlineGetBanner().classList.remove('is-visible');
+    toast.success('Connection restored');
+    _onlineHandlers.forEach(fn => fn());
+  });
+  const offline = {
+    isOnline:  () => navigator.onLine,
+    onOffline: fn => _offlineHandlers.push(fn),
+    onOnline:  fn => _onlineHandlers.push(fn),
+  };
+
+  /* ================================================================
+     MODULE 42 — WEBSOCKET MANAGER
+     lt.ws.connect(url, opts)
+     opts: { protocols, onOpen, onMessage, onClose, onError,
+             reconnect: true, reconnectDelay: 2000, maxRetries: 10 }
+     Returns a handle: { send, close, status, on, off }
+     ================================================================ */
+  const ws = {
+    connect(url, opts = {}) {
+      const {
+        protocols     = [],
+        onOpen        = null,
+        onMessage     = null,
+        onClose       = null,
+        onError       = null,
+        reconnect     = true,
+        reconnectDelay = 2000,
+        maxRetries    = 10,
+      } = opts;
+
+      let _sock    = null;
+      let _retries = 0;
+      let _closed  = false;
+      let _statusEl = opts.statusEl ? (typeof opts.statusEl === 'string' ? document.querySelector(opts.statusEl) : opts.statusEl) : null;
+      const _handlers = {};
+
+      function _setStatus(state) {
+        if (_statusEl) {
+          _statusEl.setAttribute('data-state', state);
+          _statusEl.querySelector('.lt-dot'); // force repaint
+          const labels = { connected: 'Connected', connecting: 'Connecting…', disconnected: 'Disconnected' };
+          const dot = _statusEl.querySelector('.lt-dot');
+          const span = _statusEl.querySelector('span:last-child');
+          if (span) span.textContent = labels[state] || state;
+        }
+        bus.emit('ws:status', { url, state });
+      }
+
+      function _connect() {
+        _setStatus('connecting');
+        try { _sock = protocols.length ? new WebSocket(url, protocols) : new WebSocket(url); }
+        catch(e) { console.error('[lt.ws] Failed to create WebSocket:', e); return; }
+
+        _sock.addEventListener('open', e => {
+          _retries = 0;
+          _setStatus('connected');
+          if (onOpen) onOpen(e);
+          (_handlers['open'] || []).forEach(fn => fn(e));
+        });
+        _sock.addEventListener('message', e => {
+          let data = e.data;
+          try { data = JSON.parse(e.data); } catch(_) {}
+          if (onMessage) onMessage(data, e);
+          (_handlers['message'] || []).forEach(fn => fn(data, e));
+        });
+        _sock.addEventListener('close', e => {
+          _setStatus('disconnected');
+          if (onClose) onClose(e);
+          (_handlers['close'] || []).forEach(fn => fn(e));
+          if (reconnect && !_closed && _retries < maxRetries) {
+            _retries++;
+            const delay = Math.min(reconnectDelay * Math.pow(1.5, _retries - 1), 30000);
+            setTimeout(_connect, delay);
+          }
+        });
+        _sock.addEventListener('error', e => {
+          if (onError) onError(e);
+          (_handlers['error'] || []).forEach(fn => fn(e));
+        });
+      }
+      _connect();
+
+      return {
+        send(data) {
+          if (!_sock || _sock.readyState !== WebSocket.OPEN) { console.warn('[lt.ws] Not connected'); return false; }
+          _sock.send(typeof data === 'string' ? data : JSON.stringify(data));
+          return true;
+        },
+        close() { _closed = true; if (_sock) _sock.close(); _setStatus('disconnected'); },
+        get status() { return _sock ? ['connecting','open','closing','closed'][_sock.readyState] : 'disconnected'; },
+        on(event, fn) { if (!_handlers[event]) _handlers[event] = []; _handlers[event].push(fn); return this; },
+        off(event, fn) { if (_handlers[event]) _handlers[event] = _handlers[event].filter(f => f !== fn); return this; },
+      };
+    },
+  };
+
+  /* ================================================================
+     MODULE 43 — MULTI-SELECT COMBOBOX
+     lt.combobox.init(inputEl, options, opts)
+     options = [{ value, label, icon? }]
+     opts: { max, placeholder, onChange }
+     ================================================================ */
+  const combobox = {
+    init(inputEl, options = [], opts = {}) {
+      const wrap = inputEl.closest('.lt-combobox') || inputEl.parentElement;
+      const inputWrap = wrap.querySelector('.lt-combobox-input-wrap') || wrap;
+      const dropdown  = wrap.querySelector('.lt-combobox-dropdown');
+      if (!dropdown) return;
+
+      const { max = Infinity, placeholder = 'Search…', onChange = null } = opts;
+      let selected  = [];
+      let focusedIdx = -1;
+      let filtered  = [...options];
+
+      // ARIA combobox wiring
+      const dropId = dropdown.id || ('lt-cb-drop-' + Math.random().toString(36).slice(2));
+      dropdown.id = dropId;
+      dropdown.setAttribute('role', 'listbox');
+      inputEl.setAttribute('role', 'combobox');
+      inputEl.setAttribute('aria-expanded', 'false');
+      inputEl.setAttribute('aria-controls', dropId);
+      inputEl.setAttribute('aria-autocomplete', 'list');
+
+      function _renderTags() {
+        wrap.querySelectorAll('.lt-combobox-tag').forEach(t => t.remove());
+        selected.forEach(v => {
+          const opt = options.find(o => o.value === v);
+          if (!opt) return;
+          const tag = document.createElement('span');
+          tag.className = 'lt-combobox-tag';
+          tag.innerHTML = `${escHtml(opt.label)}<button type="button" class="lt-combobox-tag-remove" data-value="${escHtml(v)}" aria-label="Remove ${escHtml(opt.label)}">✕</button>`;
+          inputWrap.insertBefore(tag, inputEl);
+        });
+      }
+
+      function _renderDropdown(query) {
+        const q = query.toLowerCase().trim();
+        filtered = options.filter(o => !selected.includes(o.value) && (!q || o.label.toLowerCase().includes(q)));
+        dropdown.innerHTML = '';
+        if (!filtered.length) {
+          dropdown.innerHTML = `<div class="lt-combobox-empty">${q ? 'No matches' : 'All selected'}</div>`;
+          return;
+        }
+        filtered.forEach((opt, i) => {
+          const el = document.createElement('div');
+          el.id = dropId + '-opt-' + i;
+          el.className = 'lt-combobox-option' + (selected.includes(opt.value) ? ' is-selected' : '');
+          el.setAttribute('role', 'option');
+          el.setAttribute('data-value', opt.value);
+          const safeLabel = escHtml(opt.label);
+          const hl = q ? safeLabel.replace(new RegExp(`(${q.replace(/[.*+?^${}()|[\]\\]/g,'\\$&')})`, 'gi'), '<mark>$1</mark>') : safeLabel;
+          el.innerHTML = `${opt.icon ? `<span class="icon">${escHtml(opt.icon)}</span>` : ''}<span>${hl}</span>`;
+          el.addEventListener('mousedown', e => { e.preventDefault(); _toggle(opt.value); });
+          dropdown.appendChild(el);
+        });
+        focusedIdx = -1;
+      }
+
+      function _toggle(value) {
+        const idx = selected.indexOf(value);
+        if (idx >= 0) { selected.splice(idx, 1); }
+        else if (selected.length < max) { selected.push(value); }
+        _renderTags();
+        _renderDropdown(inputEl.value);
+        inputEl.value = '';
+        inputEl.focus();
+        if (onChange) onChange([...selected]);
+      }
+
+      function _moveFocus(dir) {
+        const items = Array.from(dropdown.querySelectorAll('.lt-combobox-option'));
+        if (!items.length) return;
+        focusedIdx = Math.max(0, Math.min(focusedIdx + dir, items.length - 1));
+        items.forEach((el, i) => el.classList.toggle('is-focused', i === focusedIdx));
+        items[focusedIdx].scrollIntoView({ block: 'nearest' });
+        inputEl.setAttribute('aria-activedescendant', items[focusedIdx].id);
+      }
+
+      function _setOpen(open) {
+        dropdown.classList.toggle('is-open', open);
+        inputEl.setAttribute('aria-expanded', open ? 'true' : 'false');
+        if (!open) { inputEl.removeAttribute('aria-activedescendant'); focusedIdx = -1; }
+      }
+      inputEl.addEventListener('input', () => { _setOpen(true); _renderDropdown(inputEl.value); });
+      inputEl.addEventListener('focus', () => { _setOpen(true); _renderDropdown(inputEl.value); });
+      inputEl.addEventListener('keydown', e => {
+        if (e.key === 'ArrowDown') { e.preventDefault(); _moveFocus(1); }
+        if (e.key === 'ArrowUp')   { e.preventDefault(); _moveFocus(-1); }
+        if (e.key === 'Enter')     { e.preventDefault(); if (focusedIdx >= 0 && filtered[focusedIdx]) _toggle(filtered[focusedIdx].value); }
+        if (e.key === 'Escape')    { _setOpen(false); }
+        if (e.key === 'Backspace' && !inputEl.value && selected.length) { _toggle(selected[selected.length - 1]); }
+      });
+      inputWrap.addEventListener('mousedown', e => {
+        const rmBtn = e.target.closest('.lt-combobox-tag-remove');
+        if (rmBtn) { e.preventDefault(); _toggle(rmBtn.dataset.value); return; }
+        inputEl.focus();
+      });
+      document.addEventListener('click', e => { if (!wrap.contains(e.target)) _setOpen(false); });
+
+      _renderTags();
+      _renderDropdown('');
+
+      return {
+        getValue:  () => [...selected],
+        setValue:  vals => { selected = [...vals]; _renderTags(); _renderDropdown(''); },
+        clear:     () => { selected = []; _renderTags(); _renderDropdown(''); },
+      };
+    },
+  };
+
+  /* ================================================================
+     MODULE 44 — AUTOCOMPLETE / TYPEAHEAD
+     lt.typeahead.init(inputEl, source, opts)
+     source: array or async fn(query) => [{value, label, icon?, meta?}]
+     opts: { minChars, debounceMs, onSelect, maxResults }
+     ================================================================ */
+  const typeahead = {
+    init(inputEl, source, opts = {}) {
+      const wrap = inputEl.closest('.lt-typeahead') || inputEl.parentElement;
+      const dropdown = wrap.querySelector('.lt-typeahead-dropdown');
+      if (!dropdown) return;
+
+      const { minChars = 1, debounceMs = 150, onSelect = null, maxResults = 10 } = opts;
+      let _focusedIdx = -1;
+      let _items      = [];
+      let _debTimer   = null;
+
+      function _render(items, query) {
+        _items = items.slice(0, maxResults);
+        dropdown.innerHTML = '';
+        if (!_items.length) {
+          dropdown.innerHTML = `<div class="lt-typeahead-empty">[ NO RESULTS ]</div>`;
+          return;
+        }
+        const q = query.toLowerCase();
+        _items.forEach((item, i) => {
+          const el = document.createElement('div');
+          el.id = (inputEl.id || 'lt-ta') + '-item-' + i;
+          el.className = 'lt-typeahead-item';
+          el.setAttribute('role', 'option');
+          const safeItemLabel = escHtml(item.label);
+          const hl = safeItemLabel.replace(new RegExp(`(${q.replace(/[.*+?^${}()|[\]\\]/g,'\\$&')})`, 'gi'), '<mark>$1</mark>');
+          el.innerHTML = `${item.icon ? `<span class="icon">${escHtml(item.icon)}</span>` : ''}<span>${hl}</span>${item.meta ? `<span style="margin-left:auto;color:var(--text-muted);font-size:0.68rem">${escHtml(item.meta)}</span>` : ''}`;
+          el.addEventListener('mousedown', e => { e.preventDefault(); _select(item); });
+          dropdown.appendChild(el);
+        });
+        _focusedIdx = -1;
+      }
+
+      async function _search(query) {
+        dropdown.innerHTML = '<div class="lt-typeahead-loading">Searching…</div>';
+        dropdown.classList.add('is-open');
+        inputEl.setAttribute('aria-busy', 'true');
+        try {
+          const results = typeof source === 'function' ? await source(query) : source.filter(i => i.label.toLowerCase().includes(query.toLowerCase()));
+          _render(results, query);
+        } catch(e) {
+          dropdown.innerHTML = '<div class="lt-typeahead-empty">Error loading results</div>';
+        } finally {
+          inputEl.setAttribute('aria-busy', 'false');
+        }
+      }
+
+      function _select(item) {
+        inputEl.value = item.label;
+        inputEl.removeAttribute('aria-activedescendant');
+        dropdown.classList.remove('is-open');
+        if (onSelect) onSelect(item);
+        bus.emit('typeahead:select', { item });
+      }
+
+      function _moveFocus(dir) {
+        const els = Array.from(dropdown.querySelectorAll('.lt-typeahead-item'));
+        if (!els.length) return;
+        _focusedIdx = Math.max(0, Math.min(_focusedIdx + dir, els.length - 1));
+        els.forEach((el, i) => el.classList.toggle('is-focused', i === _focusedIdx));
+        els[_focusedIdx].scrollIntoView({ block: 'nearest' });
+        inputEl.setAttribute('aria-activedescendant', els[_focusedIdx].id);
+      }
+
+      inputEl.addEventListener('input', () => {
+        clearTimeout(_debTimer);
+        const q = inputEl.value.trim();
+        if (q.length < minChars) { dropdown.classList.remove('is-open'); return; }
+        _debTimer = setTimeout(() => _search(q), debounceMs);
+      });
+      inputEl.addEventListener('keydown', e => {
+        if (!dropdown.classList.contains('is-open')) return;
+        if (e.key === 'ArrowDown')  { e.preventDefault(); _moveFocus(1); }
+        if (e.key === 'ArrowUp')    { e.preventDefault(); _moveFocus(-1); }
+        if (e.key === 'Enter')      { e.preventDefault(); if (_focusedIdx >= 0 && _items[_focusedIdx]) _select(_items[_focusedIdx]); }
+        if (e.key === 'Escape')     { dropdown.classList.remove('is-open'); }
+        if (e.key === 'Tab')        { dropdown.classList.remove('is-open'); }
+      });
+      inputEl.addEventListener('blur', () => setTimeout(() => dropdown.classList.remove('is-open'), 150));
+      document.addEventListener('click', e => { if (!wrap.contains(e.target)) dropdown.classList.remove('is-open'); });
+
+      return { search: q => _search(q) };
+    },
+  };
+
+  /* ================================================================
+     MODULE 45 — COOKIE UTILITY
+     lt.cookie.set(name, value, days?, opts?)
+     lt.cookie.get(name)
+     lt.cookie.del(name)
+     ================================================================ */
+  const cookie = {
+    set(name, value, days = 0, opts = {}) {
+      let str = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
+      if (days) { const d = new Date(); d.setDate(d.getDate() + days); str += `; expires=${d.toUTCString()}`; }
+      str += `; path=${opts.path || '/'}`;
+      if (opts.sameSite) str += `; SameSite=${opts.sameSite}`;
+      if (opts.secure || location.protocol === 'https:') str += '; Secure';
+      document.cookie = str;
+    },
+    get(name) {
+      const key = encodeURIComponent(name) + '=';
+      const found = document.cookie.split(';').map(c => c.trim()).find(c => c.startsWith(key));
+      return found ? decodeURIComponent(found.slice(key.length)) : null;
+    },
+    del(name, opts = {}) { cookie.set(name, '', -1, opts); },
+    getAll() {
+      const out = {};
+      document.cookie.split(';').forEach(c => {
+        const [k, ...v] = c.trim().split('=');
+        if (k) out[decodeURIComponent(k)] = decodeURIComponent(v.join('='));
+      });
+      return out;
+    },
+  };
+
+  /* ================================================================
+     MODULE 46 — SPLIT PANE
+     lt.splitPane.init(containerEl, opts)
+     opts: { minA, minB, initial (0-1), vertical, onResize }
+     ================================================================ */
+  const splitPane = {
+    init(container, opts = {}) {
+      const { minA = 80, minB = 80, initial = 0.5, vertical = false, onResize = null } = opts;
+      const panes = container.querySelectorAll('.lt-split-pane');
+      const divider = container.querySelector('.lt-split-divider');
+      if (!panes[0] || !panes[1] || !divider) return;
+
+      const dim    = vertical ? 'height' : 'width';
+      const client = vertical ? 'clientY' : 'clientX';
+      let dragging = false;
+      let startPos, startSizeA;
+
+      function _setRatio(ratio) {
+        const total = vertical ? container.clientHeight : container.clientWidth;
+        const divSize = vertical ? divider.offsetHeight : divider.offsetWidth;
+        const available = total - divSize;
+        const sizeA = Math.max(minA, Math.min(available - minB, ratio * available));
+        panes[0].style[dim] = sizeA + 'px';
+        panes[0].style.flex = 'none';
+        panes[1].style.flex = '1';
+        if (onResize) onResize(sizeA, available - sizeA);
+      }
+
+      // Pointer events (handles both mouse and touch)
+      divider.addEventListener('pointerdown', e => {
+        e.preventDefault();
+        dragging = true;
+        divider.setPointerCapture(e.pointerId);
+        divider.classList.add('is-dragging');
+        startPos  = e[client];
+        startSizeA = vertical ? panes[0].offsetHeight : panes[0].offsetWidth;
+      });
+      divider.addEventListener('pointermove', e => {
+        if (!dragging) return;
+        const delta = e[client] - startPos;
+        const total = vertical ? container.clientHeight : container.clientWidth;
+        const divSize = vertical ? divider.offsetHeight : divider.offsetWidth;
+        const newSize = Math.max(minA, Math.min(total - divSize - minB, startSizeA + delta));
+        panes[0].style[dim] = newSize + 'px';
+        panes[0].style.flex = 'none';
+        panes[1].style.flex = '1';
+        if (onResize) onResize(newSize, total - divSize - newSize);
+      });
+      divider.addEventListener('pointerup', () => { dragging = false; divider.classList.remove('is-dragging'); });
+
+      // Keyboard resize support
+      divider.setAttribute('tabindex', '0');
+      divider.setAttribute('role', 'separator');
+      divider.setAttribute('aria-label', 'Resize panes');
+      divider.addEventListener('keydown', e => {
+        const step = 0.05;
+        const total = vertical ? container.clientHeight : container.clientWidth;
+        const divSize = vertical ? divider.offsetHeight : divider.offsetWidth;
+        const available = total - divSize;
+        const currentSize = vertical ? panes[0].offsetHeight : panes[0].offsetWidth;
+        const currentRatio = currentSize / available;
+        if ((e.key === 'ArrowRight' && !vertical) || (e.key === 'ArrowDown' && vertical)) {
+          e.preventDefault(); _setRatio(Math.min(1, currentRatio + step));
+        } else if ((e.key === 'ArrowLeft' && !vertical) || (e.key === 'ArrowUp' && vertical)) {
+          e.preventDefault(); _setRatio(Math.max(0, currentRatio - step));
+        } else if (e.key === 'Home') { e.preventDefault(); _setRatio(0); }
+        else if (e.key === 'End')   { e.preventDefault(); _setRatio(1); }
+      });
+
+      _setRatio(initial);
+      return { setRatio: _setRatio };
+    },
+  };
+
+  /* ================================================================
+     MODULE 48 — SIDEBAR SUBMENUS
+     Auto-inits .lt-sidebar-group elements.
+     Click label → toggle .is-open + animate submenu.
+     ================================================================ */
+  function initSidebarSubmenus(root) {
+    const container = root || document;
+    container.querySelectorAll('.lt-sidebar-group').forEach(group => {
+      if (group._sbInit) return;
+      group._sbInit = true;
+      const label = group.querySelector('.lt-sidebar-group-label');
+      if (!label) return;
+      label.setAttribute('tabindex', '0');
+      label.setAttribute('role', 'button');
+      const chevron = label.querySelector('.chevron, .lt-sidebar-chevron');
+      if (chevron) chevron.setAttribute('aria-hidden', 'true');
+      const _toggle = () => {
+        group.classList.toggle('is-open');
+        label.setAttribute('aria-expanded', group.classList.contains('is-open') ? 'true' : 'false');
+      };
+      label.setAttribute('aria-expanded', group.classList.contains('is-open') ? 'true' : 'false');
+      label.addEventListener('click', _toggle);
+      label.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); _toggle(); } });
+      // Open group if it contains the active link
+      if (group.querySelector('.lt-sidebar-sub-link.active, .lt-sidebar-sub-link[aria-current="page"]')) {
+        group.classList.add('is-open');
+        label.setAttribute('aria-expanded', 'true');
+      }
+    });
+  }
+
+  /* ================================================================
+     MODULE 49 — INFINITE SCROLL
+     lt.infiniteScroll.init(containerEl, loadFn, opts)
+     loadFn: async fn() → { items: [], done: bool }
+     opts: { threshold (px from bottom), loadingClass, sentinelClass }
+     ================================================================ */
+  const infiniteScroll = {
+    init(container, loadFn, opts = {}) {
+      const { threshold = 200, onEmpty = null } = opts;
+      let _loading = false;
+      let _done    = false;
+
+      // Sentinel element at the bottom of the container
+      const sentinel = document.createElement('div');
+      sentinel.className = 'lt-infinite-sentinel';
+      sentinel.setAttribute('aria-hidden', 'true');
+      container.appendChild(sentinel);
+
+      // Loading indicator
+      const loadingEl = document.createElement('div');
+      loadingEl.className = 'lt-infinite-loading lt-loading lt-hidden';
+      loadingEl.setAttribute('aria-live', 'polite');
+      loadingEl.setAttribute('aria-label', 'Loading more items');
+      container.appendChild(loadingEl);
+
+      async function _load() {
+        if (_loading || _done) return;
+        _loading = true;
+        loadingEl.classList.remove('lt-hidden');
+        try {
+          const result = await loadFn();
+          if (result && result.done) {
+            _done = true;
+            sentinel.remove();
+            loadingEl.remove();
+            if (onEmpty) onEmpty();
+          }
+        } catch (e) {
+          console.error('[lt.infiniteScroll]', e);
+        } finally {
+          _loading = false;
+          loadingEl.classList.add('lt-hidden');
+        }
+      }
+
+      // Use IntersectionObserver if available, else scroll listener
+      if (global.IntersectionObserver) {
+        const io = new IntersectionObserver(entries => {
+          if (entries[0].isIntersecting) _load();
+        }, { rootMargin: `0px 0px ${threshold}px 0px` });
+        io.observe(sentinel);
+        return { reset() { _done = false; _loading = false; }, stop() { io.disconnect(); } };
+      } else {
+        const scrollRoot = container === document.body ? window : container;
+        function _onScroll() {
+          const el = container === document.body ? document.documentElement : container;
+          const dist = el.scrollHeight - el.scrollTop - el.clientHeight;
+          if (dist < threshold) _load();
+        }
+        const _onScrollThrottled = throttle(_onScroll, 150);
+        scrollRoot.addEventListener('scroll', _onScrollThrottled, { passive: true });
+        return { reset() { _done = false; _loading = false; }, stop() { scrollRoot.removeEventListener('scroll', _onScrollThrottled); } };
+      }
+    },
+  };
+
+  /* ================================================================
+     MODULE 49 — WIZARD / MULTI-STEP FORM
+     lt.wizard.init(containerEl, opts)
+     opts: { onStep(n, total), onComplete(data), validate(n) }
+     HTML: [data-wizard-step="1"] ... [data-wizard-nav]
+     ================================================================ */
+  const wizard = {
+    init(container, opts = {}) {
+      const { onStep = null, onComplete = null, validate = null } = opts;
+      const steps    = Array.from(container.querySelectorAll('[data-wizard-step]'));
+      const total    = steps.length;
+      let   current  = 0;
+      const formData = {};
+
+      function _getStepData(idx) {
+        const step = steps[idx];
+        const data = {};
+        step.querySelectorAll('input, select, textarea').forEach(el => {
+          if (el.name) data[el.name] = el.type === 'checkbox' ? el.checked : el.value;
+        });
+        return data;
+      }
+
+      function _show(idx) {
+        steps.forEach((s, i) => {
+          s.classList.toggle('is-active', i === idx);
+          if (i !== idx) s.setAttribute('aria-hidden', 'true'); else s.removeAttribute('aria-hidden');
+        });
+        // Update step indicators
+        container.querySelectorAll('[data-wizard-indicator]').forEach((ind, i) => {
+          ind.classList.toggle('is-active',    i === idx);
+          ind.classList.toggle('is-complete',  i < idx);
+          ind.classList.remove('is-error');
+        });
+        // Update nav buttons
+        const prevBtn = container.querySelector('[data-wizard-prev]');
+        const nextBtn = container.querySelector('[data-wizard-next]');
+        const doneBtn = container.querySelector('[data-wizard-done]');
+        if (prevBtn) prevBtn.disabled = idx === 0;
+        if (nextBtn) nextBtn.style.display = idx < total - 1 ? '' : 'none';
+        if (doneBtn) doneBtn.style.display = idx === total - 1 ? '' : 'none';
+        // Update step counter
+        container.querySelectorAll('[data-wizard-current]').forEach(el => el.textContent = idx + 1);
+        container.querySelectorAll('[data-wizard-total]').forEach(el => el.textContent = total);
+        if (onStep) onStep(idx + 1, total, formData);
+        // Focus first input in step
+        const first = steps[idx].querySelector('input, select, textarea, button');
+        if (first) setTimeout(() => first.focus(), 60);
+      }
+
+      let _wizBusy = false;
+      async function _next() {
+        if (_wizBusy) return;
+        _wizBusy = true;
+        try {
+          if (validate) {
+            const ok = await validate(current + 1, _getStepData(current));
+            if (!ok) {
+              container.querySelectorAll('[data-wizard-indicator]')[current]?.classList.add('is-error');
+              return;
+            }
+          }
+          Object.assign(formData, _getStepData(current));
+          if (current < total - 1) { current++; _show(current); }
+        } finally {
+          _wizBusy = false;
+        }
+      }
+
+      function _prev() {
+        if (current > 0) { current--; _show(current); }
+      }
+
+      function _done() {
+        Object.assign(formData, _getStepData(current));
+        if (onComplete) onComplete({ ...formData });
+      }
+
+      function _goTo(n) { // 1-based
+        const idx = Math.max(0, Math.min(n - 1, total - 1));
+        current = idx; _show(current);
+      }
+
+      // Wire up nav buttons
+      container.querySelector('[data-wizard-next]')?.addEventListener('click', _next);
+      container.querySelector('[data-wizard-prev]')?.addEventListener('click', _prev);
+      container.querySelector('[data-wizard-done]')?.addEventListener('click', _done);
+
+      _show(0);
+      return { next: _next, prev: _prev, goTo: _goTo, getData: () => ({ ...formData }), total };
+    },
+  };
+
+  /* ================================================================
+     MODULE 50 — SORTABLE (drag-to-reorder lists/kanban)
+     lt.sortable.init(listEl, opts)
+     opts: { handle (selector), onSort(newOrder, movedEl), group }
+     Supports cross-list dragging when group matches.
+     Returns { refresh(), getOrder() }; emits 'sortable:change' on bus
+     ================================================================ */
+  // Shared cross-instance drag state (enables group/cross-column dragging)
+  let _srtDragging = null, _srtPlaceholder = null, _srtSrcList = null;
+
+  const sortable = {
+    init(list, opts = {}) {
+      const { handle = null, onSort = null, group = null } = opts;
+      list.setAttribute('data-sortable-group', group || '');
+
+      function _mark(child) {
+        child.setAttribute('data-sortable-item', '');
+        child.setAttribute('draggable', handle ? 'false' : 'true');
+        if (handle) {
+          const h = child.querySelector(handle);
+          if (h) { h.setAttribute('draggable', 'true'); h.style.cursor = 'grab'; }
+        } else { child.style.cursor = 'grab'; }
+      }
+
+      function _getItems() { return Array.from(list.querySelectorAll(':scope > [data-sortable-item]')); }
+
+      function _makePlaceholder(el) {
+        const ph = document.createElement(el.tagName);
+        ph.className = 'lt-sortable-placeholder';
+        ph.style.height = el.offsetHeight + 'px';
+        ph.style.width  = '100%';
+        return ph;
+      }
+
+      function _sameGroup(otherList) {
+        if (!group) return false;
+        return otherList.getAttribute('data-sortable-group') === group;
+      }
+
+      // Mark all current children
+      Array.from(list.children).forEach(_mark);
+
+      list.addEventListener('dragstart', e => {
+        const item = e.target.closest('[data-sortable-item]');
+        if (!item || !list.contains(item)) return;
+        _srtDragging = item;
+        _srtSrcList  = list;
+        _srtPlaceholder = _makePlaceholder(item);
+        requestAnimationFrame(() => { item.classList.add('is-dragging'); });
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', '');
+      });
+
+      list.addEventListener('dragend', () => {
+        if (!_srtDragging) return;
+        _srtDragging.classList.remove('is-dragging');
+        if (_srtPlaceholder && _srtPlaceholder.parentNode) {
+          _srtPlaceholder.parentNode.insertBefore(_srtDragging, _srtPlaceholder);
+          _srtPlaceholder.remove();
+        }
+        if (onSort) onSort(_getItems(), _srtDragging);
+        bus.emit('sortable:change', { list, items: _getItems(), moved: _srtDragging });
+        _srtDragging = null; _srtPlaceholder = null; _srtSrcList = null;
+      });
+
+      list.addEventListener('dragover', e => {
+        if (!_srtDragging) return;
+        // Allow drop only within same list or same group
+        if (list !== _srtSrcList && !_sameGroup(_srtSrcList)) return;
+        e.preventDefault(); e.dataTransfer.dropEffect = 'move';
+        if (!_srtPlaceholder) _srtPlaceholder = _makePlaceholder(_srtDragging);
+        const over = e.target.closest('[data-sortable-item]');
+        if (over && over !== _srtDragging && list.contains(over)) {
+          const rect = over.getBoundingClientRect();
+          list.insertBefore(_srtPlaceholder, e.clientY < rect.top + rect.height / 2 ? over : over.nextSibling);
+        } else if (!list.contains(_srtPlaceholder)) {
+          list.appendChild(_srtPlaceholder);
+        }
+      });
+
+      list.addEventListener('drop', e => { e.preventDefault(); });
+
+      return {
+        refresh() { Array.from(list.children).forEach(child => { if (!child.hasAttribute('data-sortable-item')) _mark(child); }); },
+        getOrder: () => _getItems().map(el => el.dataset.id || el.textContent.trim()),
+      };
+    },
+  };
+
+  /* ================================================================
+     MODULE 51 — COUNTDOWN / TIMER
+     lt.timer.countdown(el, targetDate, opts)
+     lt.timer.stopwatch(el, opts)
+     el = DOM element or selector; updates .textContent
+     opts: { onExpire, format, urgent (seconds), urgentClass }
+     ================================================================ */
+  const timer = {
+    countdown(el, target, opts = {}) {
+      const dom = typeof el === 'string' ? document.querySelector(el) : el;
+      if (!dom) return;
+      const { onExpire = null, urgent = 300, urgentClass = 'lt-text-red' } = opts;
+      const end = target instanceof Date ? target : new Date(target);
+
+      function _tick() {
+        const diff = Math.floor((end - Date.now()) / 1000);
+        if (diff <= 0) {
+          dom.textContent = '00:00:00';
+          dom.classList.add(urgentClass);
+          if (onExpire) onExpire();
+          clearInterval(handle);
+          return;
+        }
+        if (diff <= urgent) urgentClass.split(/\s+/).filter(Boolean).forEach(c => dom.classList.add(c));
+        const h = Math.floor(diff / 3600), m = Math.floor((diff % 3600) / 60), s = diff % 60;
+        dom.textContent = [h, m, s].map(n => String(n).padStart(2, '0')).join(':');
+      }
+      _tick();
+      const handle = setInterval(_tick, 1000);
+      return { stop: () => clearInterval(handle) };
+    },
+
+    stopwatch(el, opts = {}) {
+      const dom = typeof el === 'string' ? document.querySelector(el) : el;
+      if (!dom) return;
+      const { onTick = null } = opts;
+      let start = Date.now(), paused = false, offset = 0;
+
+      function _tick() {
+        if (paused) return;
+        const elapsed = Math.floor((Date.now() - start + offset) / 1000);
+        const h = Math.floor(elapsed / 3600), m = Math.floor((elapsed % 3600) / 60), s = elapsed % 60;
+        dom.textContent = [h, m, s].map(n => String(n).padStart(2, '0')).join(':');
+        if (onTick) onTick(elapsed);
+      }
+      const handle = setInterval(_tick, 1000);
+      _tick();
+      return {
+        pause()  { paused = true;  offset += Date.now() - start; },
+        resume() { paused = false; start = Date.now(); },
+        reset()  { offset = 0; start = Date.now(); _tick(); },
+        stop()   { clearInterval(handle); },
+        elapsed: () => Math.floor((Date.now() - start + offset) / 1000),
+      };
+    },
+  };
+
+  /* ================================================================
+     MODULE 52 — IMAGE LIGHTBOX
+     lt.lightbox.init(selector, opts)
+     Clicking any matched image opens a full-screen overlay with
+     prev/next, keyboard nav, zoom.
+     opts: { caption (fn|'alt'|'title'), loop }
+     ================================================================ */
+  const lightbox = {
+    init(selector, opts = {}) {
+      const { caption = 'alt', loop = true } = opts;
+      let _images = [], _current = 0, _overlay = null, _lbKeyBound = null, _lbTrigger = null;
+
+      function _getCaption(img) {
+        if (typeof caption === 'function') return caption(img);
+        return img.getAttribute(caption) || '';
+      }
+
+      function _buildOverlay() {
+        if (_overlay) return;
+        _overlay = document.createElement('div');
+        _overlay.className = 'lt-lightbox-overlay';
+        _overlay.setAttribute('role', 'dialog');
+        _overlay.setAttribute('aria-modal', 'true');
+        _overlay.setAttribute('aria-label', 'Image viewer');
+        _overlay.innerHTML = `
+          <button type="button" class="lt-lightbox-close" aria-label="Close">&times;</button>
+          <button type="button" class="lt-lightbox-prev" aria-label="Previous">&#8249;</button>
+          <button type="button" class="lt-lightbox-next" aria-label="Next">&#8250;</button>
+          <div class="lt-lightbox-img-wrap">
+            <img class="lt-lightbox-img" src="" alt="">
+          </div>
+          <div class="lt-lightbox-caption"></div>
+          <div class="lt-lightbox-counter"></div>
+        `;
+        document.body.appendChild(_overlay);
+
+        _overlay.querySelector('.lt-lightbox-close').addEventListener('click', lightbox.close);
+        _overlay.querySelector('.lt-lightbox-prev').addEventListener('click', () => lightbox.prev());
+        _overlay.querySelector('.lt-lightbox-next').addEventListener('click', () => lightbox.next());
+        _overlay.addEventListener('click', e => { if (e.target === _overlay) lightbox.close(); });
+        _lbKeyBound = _lbKey.bind(null);
+        document.addEventListener('keydown', _lbKeyBound);
+      }
+
+      function _lbKey(e) {
+        if (!_overlay || !_overlay.classList.contains('is-open')) return;
+        if (e.key === 'Escape')     lightbox.close();
+        if (e.key === 'ArrowLeft')  lightbox.prev();
+        if (e.key === 'ArrowRight') lightbox.next();
+      }
+
+      function _show(idx) {
+        if (!_overlay) _buildOverlay();
+        if (!_overlay.classList.contains('is-open')) {
+          _lbTrigger = (document.activeElement && document.activeElement !== document.body) ? document.activeElement : null;
+        }
+        _current = idx;
+        const img = _images[idx];
+        const el  = _overlay.querySelector('.lt-lightbox-img');
+        el.src = img.src; el.alt = img.alt || '';
+        _overlay.querySelector('.lt-lightbox-caption').textContent = _getCaption(img);
+        _overlay.querySelector('.lt-lightbox-counter').textContent = `${idx + 1} / ${_images.length}`;
+        // Hide prev/next when single image or at edges
+        _overlay.querySelector('.lt-lightbox-prev').style.display = (loop || idx > 0) && _images.length > 1 ? '' : 'none';
+        _overlay.querySelector('.lt-lightbox-next').style.display = (loop || idx < _images.length - 1) && _images.length > 1 ? '' : 'none';
+        _overlay.classList.add('is-open');
+        _lockScroll();
+        setTimeout(() => { if (document.contains(el)) el.focus?.(); }, 50);
+      }
+
+      function _collect() {
+        _images = Array.from(document.querySelectorAll(selector));
+        _images.forEach((img, i) => {
+          img.style.cursor = 'zoom-in';
+          img.setAttribute('tabindex', '0');
+          img.removeEventListener('click', img._lbHandler);
+          img.removeEventListener('keydown', img._lbKeyHandler);
+          img._lbHandler    = () => _show(i);
+          img._lbKeyHandler = e => { if (e.key === 'Enter' || e.key === ' ') _show(i); };
+          img.addEventListener('click', img._lbHandler);
+          img.addEventListener('keydown', img._lbKeyHandler);
+        });
+      }
+      _collect();
+
+      return Object.assign(lightbox, {
+        open:    idx => _show(idx),
+        close()  {
+          if (!_overlay) return;
+          _overlay.classList.remove('is-open');
+          _unlockScroll();
+          if (_lbKeyBound) { document.removeEventListener('keydown', _lbKeyBound); _lbKeyBound = null; }
+          if (_lbTrigger && document.contains(_lbTrigger)) { _lbTrigger.focus(); }
+          _lbTrigger = null;
+        },
+        prev()   { _show(loop ? (_current - 1 + _images.length) % _images.length : Math.max(0, _current - 1)); },
+        next()   { _show(loop ? (_current + 1) % _images.length : Math.min(_images.length - 1, _current + 1)); },
+        refresh: _collect,
+      });
+    },
+  };
+
+  /* ================================================================
+     MODULE 53 — AUTH / JWT HELPERS
+     Extends lt.api with token refresh support.
+     lt.auth.setToken(accessToken, refreshToken, expiresIn)
+     lt.auth.getToken()
+     lt.auth.refresh()    — explicit refresh
+     lt.auth.onExpire(fn) — callback when token expires & refresh fails
+     lt.auth.clear()
+     Auto-intercepts lt.api calls to inject Bearer header
+     and silently refreshes when token is within 60s of expiry.
+     ================================================================ */
+  let _authAccess  = null;
+  let _authRefresh = null;
+  let _authExpiry  = 0;      // epoch ms
+  let _authRefreshUrl  = null;
+  let _authRefreshing  = null; // in-flight promise
+  const _authExpireHandlers = [];
+
+  const auth = {
+    setToken(access, refresh, expiresIn, refreshUrl) {
+      _authAccess  = access;
+      _authRefresh = refresh;
+      _authExpiry  = expiresIn ? Date.now() + expiresIn * 1000 : 0;
+      if (refreshUrl) _authRefreshUrl = refreshUrl;
+      try { sessionStorage.setItem('lt_auth_access', access); } catch(_) {}
+    },
+    getToken:  () => _authAccess,
+    clear() {
+      _authAccess = _authRefresh = null; _authExpiry = 0;
+      try { sessionStorage.removeItem('lt_auth_access'); } catch(_) {}
+      bus.emit('auth:logout');
+    },
+    onExpire: fn => _authExpireHandlers.push(fn),
+    async refresh() {
+      if (!_authRefreshUrl || !_authRefresh) return false;
+      if (_authRefreshing) return _authRefreshing;
+      _authRefreshing = fetch(_authRefreshUrl, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ refresh_token: _authRefresh }),
+      })
+        .then(r => r.json())
+        .then(data => {
+          if (data.access_token) {
+            _authAccess = data.access_token;
+            _authExpiry = data.expires_in ? Date.now() + data.expires_in * 1000 : 0;
+            bus.emit('auth:refreshed');
+            return true;
+          }
+          throw new Error('Refresh failed');
+        })
+        .catch(e => {
+          console.error('[lt.auth]', e);
+          _authExpireHandlers.forEach(fn => fn());
+          bus.emit('auth:expired');
+          return false;
+        })
+        .finally(() => { _authRefreshing = null; });
+      return _authRefreshing;
+    },
+    isExpired: () => _authExpiry > 0 && Date.now() >= _authExpiry,
+    isExpiringSoon: (secs = 60) => _authExpiry > 0 && Date.now() >= _authExpiry - secs * 1000,
+  };
+
+  // Patch lt.api — auth-aware wrapper (renamed to avoid strict-mode duplicate declaration)
+  async function _apiFetchAuth(method, url, body) {
+    if (_authAccess && auth.isExpiringSoon()) await auth.refresh();
+    const opts = { method, headers: Object.assign({ 'Content-Type': 'application/json' }, csrfHeaders()) };
+    if (_authAccess) opts.headers['Authorization'] = 'Bearer ' + _authAccess;
+    if (body !== undefined) opts.body = JSON.stringify(body);
+    let resp;
+    try { resp = await fetch(url, opts); } catch (err) { throw new Error('Network error: ' + err.message); }
+    // Auto-retry once on 401 after silent token refresh
+    if (resp.status === 401 && _authRefresh) {
+      const ok = await auth.refresh();
+      if (ok) {
+        opts.headers['Authorization'] = 'Bearer ' + _authAccess;
+        try { resp = await fetch(url, opts); } catch (err) { throw new Error('Network error: ' + err.message); }
+      }
+    }
+    let data;
+    try { data = await resp.json(); } catch (_) { data = { success: resp.ok }; }
+    if (!resp.ok) throw new Error(data.error || data.message || 'HTTP ' + resp.status);
+    return data;
+  }
+  api.get    = url     => _apiFetchAuth('GET',    url);
+  api.post   = (u, b)  => _apiFetchAuth('POST',   u, b);
+  api.put    = (u, b)  => _apiFetchAuth('PUT',    u, b);
+  api.patch  = (u, b)  => _apiFetchAuth('PATCH',  u, b);
+  api.delete = (u, b)  => _apiFetchAuth('DELETE', u, b);
+
+  /* ================================================================
+     MODULE 54 — MARKDOWN RENDERER
+     lt.markdown.render(mdString)  → HTML string (sanitized)
+     lt.markdown.init(selector)    → renders all matching el's .textContent
+     Uses a built-in micro-renderer (no deps) for common syntax.
+     For full GFM, swap in marked.js: window.marked && marked.parse()
+     ================================================================ */
+  const markdown = {
+    render(md) {
+      // Delegate to window.marked if available
+      if (global.marked) return global.marked.parse(md);
+      if (global.markdownit) return global.markdownit().render(md);
+      // Micro-renderer: covers headings, bold, italic, code, links, lists, blockquote, hr
+      let html = escHtml(md)
+        // Fenced code blocks
+        .replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => `<pre class="lt-code-block"><code class="lt-tok tok-${lang || 'plain'}">${code.trim()}</code></pre>`)
+        // Inline code
+        .replace(/`([^`]+)`/g, '<code>$1</code>')
+        // Headings
+        .replace(/^######\s(.+)$/gm, '<h6>$1</h6>')
+        .replace(/^#####\s(.+)$/gm,  '<h5>$1</h5>')
+        .replace(/^####\s(.+)$/gm,   '<h4>$1</h4>')
+        .replace(/^###\s(.+)$/gm,    '<h3>$1</h3>')
+        .replace(/^##\s(.+)$/gm,     '<h2>$1</h2>')
+        .replace(/^#\s(.+)$/gm,      '<h1>$1</h1>')
+        // Bold / italic
+        .replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>')
+        .replace(/\*\*(.+?)\*\*/g,     '<strong>$1</strong>')
+        .replace(/\*(.+?)\*/g,         '<em>$1</em>')
+        .replace(/__(.+?)__/g,         '<strong>$1</strong>')
+        .replace(/_(.+?)_/g,           '<em>$1</em>')
+        // Links — block javascript: and data: URIs
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, text, url) => {
+          const safeUrl = /^(https?:\/\/|\/|#|\.\.?\/)/i.test(url) ? url : '#';
+          return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer">${escHtml(text)}</a>`;
+        })
+        // Images — block javascript: and data: URIs
+        .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_, alt, src) => {
+          const safeSrc = /^(https?:\/\/|\/|\.\.?\/)/i.test(src) ? src : '';
+          return `<img src="${safeSrc}" alt="${escHtml(alt)}" style="max-width:100%">`;
+        })
+        // Blockquote
+        .replace(/^&gt;\s(.+)$/gm, '<blockquote>$1</blockquote>')
+        // Horizontal rule
+        .replace(/^(-{3,}|\*{3,}|_{3,})$/gm, '<hr>')
+        // Unordered list items
+        .replace(/^[-*+]\s(.+)$/gm, '<li>$1</li>')
+        .replace(/(<li>[\s\S]+?<\/li>\n?)+/g, m => `<ul>${m}</ul>`)
+        // Ordered list items
+        .replace(/^\d+\.\s(.+)$/gm, '<li>$1</li>')
+        // Paragraphs (double newline)
+        .replace(/\n{2,}/g, '</p><p>')
+        .replace(/\n/g, '<br>');
+      return `<p>${html}</p>`
+        .replace(/<p>(<(?:pre|ul|ol|h[1-6]|blockquote|hr)[^>]*>)/g, '$1')
+        .replace(/(<\/(?:pre|ul|ol|h[1-6]|blockquote|hr)>)<\/p>/g, '$1');
+    },
+
+    init(selector) {
+      document.querySelectorAll(selector).forEach(el => {
+        const raw = el.getAttribute('data-markdown') || el.textContent;
+        el.innerHTML = markdown.render(raw);
+        el.classList.add('lt-markdown');
+      });
+    },
+  };
+
+  /* ================================================================
+     MODULE 55 — PAGINATION
+     lt.pagination.init(navEl, opts)
+     opts: { total, perPage, page, onChange(page) }
+     Renders page buttons inside navEl; re-renders on page change.
+     ================================================================ */
+  const pagination = {
+    init(nav, opts = {}) {
+      if (typeof nav === 'string') nav = document.querySelector(nav);
+      if (!nav) return null;
+      let { total = 0, perPage = 10, page = 1, onChange = null, maxBtns = 7 } = opts;
+
+      function _pages() { return Math.max(1, Math.ceil(total / perPage)); }
+
+      function render() {
+        const pages = _pages();
+        let html = '';
+        // Prev
+        html += `<button type="button" class="lt-page-btn" ${page <= 1 ? 'disabled' : ''} data-page="${page - 1}" aria-label="Previous page">&laquo;</button>`;
+        // Page buttons with ellipsis
+        const half = Math.floor((maxBtns - 2) / 2);
+        let start = Math.max(2, page - half);
+        let end   = Math.min(pages - 1, page + half);
+        if (end - start < maxBtns - 3) {
+          if (start === 2) end   = Math.min(pages - 1, start + maxBtns - 3);
+          else             start = Math.max(2,          end   - maxBtns + 3);
+        }
+        html += `<button type="button" class="lt-page-btn${page === 1 ? ' active' : ''}" data-page="1"${page === 1 ? ' aria-current="page"' : ''} aria-label="Page 1">1</button>`;
+        if (start > 2)       html += `<button type="button" class="lt-page-btn" disabled aria-hidden="true">…</button>`;
+        for (let i = start; i <= end; i++) {
+          html += `<button type="button" class="lt-page-btn${page === i ? ' active' : ''}" data-page="${i}"${page === i ? ' aria-current="page"' : ''} aria-label="Page ${i}">${i}</button>`;
+        }
+        if (end < pages - 1) html += `<button type="button" class="lt-page-btn" disabled aria-hidden="true">…</button>`;
+        if (pages > 1) html += `<button type="button" class="lt-page-btn${page === pages ? ' active' : ''}" data-page="${pages}"${page === pages ? ' aria-current="page"' : ''} aria-label="Page ${pages}">${pages}</button>`;
+        // Next
+        html += `<button type="button" class="lt-page-btn" ${page >= pages ? 'disabled' : ''} data-page="${page + 1}" aria-label="Next page">&raquo;</button>`;
+        if (!nav.getAttribute('role')) nav.setAttribute('role', 'navigation');
+        if (!nav.getAttribute('aria-label')) nav.setAttribute('aria-label', 'Pagination');
+        nav.innerHTML = html;
+      }
+
+      nav.addEventListener('click', e => {
+        const btn = e.target.closest('.lt-page-btn');
+        if (!btn || btn.disabled || btn.classList.contains('active')) return;
+        const p = parseInt(btn.dataset.page, 10);
+        if (!p || p < 1 || p > _pages()) return;
+        page = p;
+        render();
+        if (onChange) onChange(page);
+      });
+
+      render();
+      return {
+        setTotal(n)   { total = n; page = 1; render(); },
+        setPage(p)    { page = Math.max(1, Math.min(_pages(), p)); render(); },
+        getPage()     { return page; },
+        getPages()    { return _pages(); },
+      };
+    },
+  };
+
+  /* ================================================================
+     MASTER INIT
+     lt.init(opts?)
+     Call once after DOM ready. Runs all standard auto-init modules.
+     Opts: { boot: bool, bootName: str, tooltip: bool, accordion: bool,
+             alerts: bool, clipboard: bool, sidebar: bool, submenus: bool }
+     Individual modules can still be called manually.
+     ================================================================ */
+  let _ltInitialized = false;
+  function ltInit(opts) {
+    if (_ltInitialized) return; // Guard: safe to call multiple times
+    _ltInitialized = true;
+    const o = Object.assign({
+      boot:      true,
+      bootName:  null,
+      tooltip:   true,
+      accordion: true,
+      alerts:    true,
+      clipboard: true,
+      sidebar:   true,
+      submenus:  true,
+    }, opts || {});
+
+    if (o.accordion) accordion.init();
+    if (o.tooltip)   tooltip.init();
+    if (o.alerts)    alerts.init();
+    if (o.clipboard) initCopyButtons();
+    if (o.sidebar)   initSidebar();
+    if (o.submenus)  initSidebarSubmenus();
+    if (o.boot) {
+      const bootEl = document.getElementById('lt-boot');
+      if (bootEl) {
+        const name = o.bootName || bootEl.dataset.appName || document.title.split('—')[0].trim();
+        boot.run(name);
+      }
+    }
+  }
+
+  /* ================================================================
+     PUBLIC API
+     ---------------------------------------------------------------- */
+  global.lt = {
+    /* Master initializer */
+    init: ltInit,
+    /* Core */
+    escHtml,
+    toast,
+    beep:        _beep,
+    modal,
+    tabs,
+    boot,
+    keys,
+    sidebar,
+    csrf,
+    api,
+    time,
+    bytes:       { format: formatBytes },
+    tableNav,
+    sortTable,
+    statsFilter,
+    autoRefresh,
+    /* v1.2 */
+    accordion,
+    tooltip,
+    clipboard,
+    alerts,
+    progress,
+    cmdPalette,
+    validate,
+    debounce,
+    throttle,
+    bus,
+    store,
+    url,
+    num,
+    dom,
+    tableColumns,
+    poll,
+    retry,
+    dropzone,
+    observe,
+    /* v1.3 responsive */
+    viewport,
+    mobileNav,
+    /* v1.1 new features */
+    theme,
+    notif,
+    rightDrawer,
+    contextMenu,
+    offline,
+    ws,
+    combobox,
+    typeahead,
+    cookie,
+    splitPane,
+    infiniteScroll,
+    wizard,
+    sortable,
+    timer,
+    lightbox,
+    auth,
+    markdown,
+    pagination,
+    sidebarSubmenus: { init: initSidebarSubmenus },
+  };
+
+}(window));
diff --git a/scripts/sync-web-template.sh b/scripts/sync-web-template.sh
new file mode 100755
index 0000000..d047f96
--- /dev/null
+++ b/scripts/sync-web-template.sh
@@ -0,0 +1,38 @@
+#!/usr/bin/env bash
+# Vendor base.css / base.js from a LotusGuild web_template checkout into public/web_template/.
+#
+# Usage: scripts/sync-web-template.sh <path-to-web_template-checkout>
+#
+# Writes public/web_template/{base.css,base.js} as regular files (never symlinks) and
+# public/web_template/VERSION containing "v1.2 <short-sha> <iso-date>".
+set -euo pipefail
+
+SRC="${1:-}"
+if [ -z "$SRC" ]; then
+  echo "usage: $0 <path-to-web_template-checkout>" >&2
+  exit 2
+fi
+if [ ! -d "$SRC" ]; then
+  echo "error: source directory not found: $SRC" >&2
+  exit 2
+fi
+
+REPO_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+DEST="$REPO_ROOT/public/web_template"
+mkdir -p "$DEST"
+
+for f in base.css base.js; do
+  if [ ! -f "$SRC/$f" ]; then
+    echo "error: missing $SRC/$f" >&2
+    exit 1
+  fi
+  rm -f "$DEST/$f"
+  cp "$SRC/$f" "$DEST/$f"
+  chmod 644 "$DEST/$f"
+  echo "synced $f"
+done
+
+SHA="$(git -C "$SRC" rev-parse --short HEAD 2>/dev/null || echo unknown)"
+DATE="$(date -u +%Y-%m-%dT%H:%M:%SZ)"
+printf 'v1.2 %s %s\n' "$SHA" "$DATE" > "$DEST/VERSION"
+echo "VERSION: $(cat "$DEST/VERSION")"
diff --git a/server.js b/server.js
index be5bc7b..ac699f7 100644
--- a/server.js
+++ b/server.js
@@ -6,16 +6,62 @@ const crypto = require('crypto');
 const vm = require('vm');
 const rateLimit = require('express-rate-limit');
 const cronParser = require('cron-parser');
+const path = require('path');
+const fs = require('fs');
+const helmet = require('helmet');
 require('dotenv').config();
 const { validateWebhookUrl, applyParams, evalCondition, calculateNextRun } = require('./lib/utils');
+const { PAGES } = require('./lib/nav');
+const { renderPage, renderError } = require('./lib/render');
+const { upsertUser, makeAuthenticatePage } = require('./lib/pageauth');
 
 const app = express();
 const server = http.createServer(app);
 const wss = new WebSocket.Server({ server });
 
+// Dev/read-only guard: skip every background job that writes to the database.
+const DEV_READONLY = process.env.PULSE_DEV_READONLY === '1' || process.env.DISABLE_BACKGROUND_JOBS === '1';
+
 // Middleware
+
+// CSP nonce — must run before helmet so the directive can read it.
+app.use((req, res, next) => {
+  res.locals.nonce = crypto.randomBytes(16).toString('base64');
+  next();
+});
+
+const CSP_REPORT_ONLY = process.env.PULSE_CSP_REPORT_ONLY === '1';
+const cspDirectives = {
+  defaultSrc: ["'self'"],
+  scriptSrc: ["'self'", (req, res) => `'nonce-${res.locals.nonce}'`],
+  scriptSrcAttr: ["'none'"],
+  styleSrcElem: ["'self'", 'https://fonts.googleapis.com'],
+  styleSrcAttr: ["'unsafe-inline'"],
+  styleSrc: ["'self'", 'https://fonts.googleapis.com', "'unsafe-inline'"],
+  fontSrc: ["'self'", 'https://fonts.gstatic.com', 'data:'],
+  imgSrc: ["'self'", 'data:'],
+  connectSrc: ["'self'", 'ws:', 'wss:'],
+  objectSrc: ["'none'"],
+  baseUri: ["'self'"],
+  frameAncestors: ["'none'"],
+  formAction: ["'self'"],
+  upgradeInsecureRequests: null
+};
+if (CSP_REPORT_ONLY) {
+  cspDirectives.reportUri = ['/csp-report'];
+}
+
+app.use(helmet({
+  contentSecurityPolicy: {
+    useDefaults: false,
+    directives: cspDirectives,
+    reportOnly: CSP_REPORT_ONLY
+  },
+  crossOriginEmbedderPolicy: false,
+  hsts: process.env.NODE_ENV === 'production' ? undefined : false
+}));
+
 app.use(express.json());
-app.use(express.static('public'));
 
 // Rate limiting
 const apiLimiter = rateLimit({
@@ -32,7 +78,6 @@ const executionLimiter = rateLimit({
   legacyHeaders: false,
   message: { error: 'Too many execution requests, please slow down' }
 });
-app.use('/api/', apiLimiter);
 
 // Named constants for timeouts and limits
 const PROMPT_TIMEOUT_MS        = 60 * 60 * 1000;   // 60 min — how long a prompt waits for user input
@@ -53,6 +98,24 @@ app.use((req, res, next) => {
   next();
 });
 
+// CSP violation reports (only useful with PULSE_CSP_REPORT_ONLY=1, but always mounted)
+app.post('/csp-report',
+  express.json({ type: ['application/csp-report', 'application/reports+json', 'application/json'] }),
+  (req, res) => {
+    try {
+      console.log('[CSP]', JSON.stringify(req.body));
+    } catch (_) {
+      console.log('[CSP] (unparseable report)');
+    }
+    res.status(204).end();
+  });
+
+// Static assets — the old root mount of public/ is gone on purpose.
+app.use('/web_template', express.static(path.join(__dirname, 'public/web_template'), { maxAge: '1h' }));
+app.use('/assets', express.static(path.join(__dirname, 'public/assets'), { maxAge: '1h' }));
+
+app.use('/api/', apiLimiter);
+
 // Content-Type guard for JSON endpoints
 function requireJSON(req, res, next) {
   const ct = req.headers['content-type'] || '';
@@ -160,19 +223,23 @@ async function initDatabase() {
     `);
 
     // Recover stale executions from a previous server crash
-    const [staleExecs] = await connection.query("SELECT id FROM executions WHERE status = 'running'");
-    if (staleExecs.length > 0) {
-      for (const exec of staleExecs) {
-        await connection.query(
-          "UPDATE executions SET status = 'failed', completed_at = NOW() WHERE id = ?",
-          [exec.id]
-        );
-        await connection.query(
-          "UPDATE executions SET logs = JSON_ARRAY_APPEND(COALESCE(logs, '[]'), '$', JSON_EXTRACT(?, '$')) WHERE id = ?",
-          [JSON.stringify({ action: 'server_restart_recovery', message: 'Execution marked failed due to server restart', timestamp: new Date().toISOString() }), exec.id]
-        );
+    if (!DEV_READONLY) {
+      const [staleExecs] = await connection.query("SELECT id FROM executions WHERE status = 'running'");
+      if (staleExecs.length > 0) {
+        for (const exec of staleExecs) {
+          await connection.query(
+            "UPDATE executions SET status = 'failed', completed_at = NOW() WHERE id = ?",
+            [exec.id]
+          );
+          await connection.query(
+            "UPDATE executions SET logs = JSON_ARRAY_APPEND(COALESCE(logs, '[]'), '$', JSON_EXTRACT(?, '$')) WHERE id = ?",
+            [JSON.stringify({ action: 'server_restart_recovery', message: 'Execution marked failed due to server restart', timestamp: new Date().toISOString() }), exec.id]
+          );
+        }
+        console.log(`[Recovery] Marked ${staleExecs.length} stale execution(s) as failed`);
       }
-      console.log(`[Recovery] Marked ${staleExecs.length} stale execution(s) as failed`);
+    } else {
+      console.log('[DEV] skipped: stale-execution recovery');
     }
 
     console.log('Database tables initialized successfully');
@@ -202,10 +269,14 @@ async function cleanupOldExecutions() {
   }
 }
 
-// Run cleanup hourly
-setInterval(cleanupOldExecutions, 60 * 60 * 1000);
-// Run cleanup on startup
-cleanupOldExecutions();
+if (!DEV_READONLY) {
+  // Run cleanup hourly
+  setInterval(cleanupOldExecutions, 60 * 60 * 1000);
+  // Run cleanup on startup
+  cleanupOldExecutions();
+} else {
+  console.log('[DEV] skipped: cleanupOldExecutions interval + startup run');
+}
 
 // Scheduled Commands Processor
 async function processScheduledCommands() {
@@ -292,10 +363,14 @@ async function processScheduledCommands() {
 }
 
 
-// Run scheduler every minute
-setInterval(processScheduledCommands, 60 * 1000);
-// Initial run on startup
-setTimeout(processScheduledCommands, 5000);
+if (!DEV_READONLY) {
+  // Run scheduler every minute
+  setInterval(processScheduledCommands, 60 * 1000);
+  // Initial run on startup
+  setTimeout(processScheduledCommands, 5000);
+} else {
+  console.log('[DEV] skipped: processScheduledCommands interval + startup run');
+}
 
 // Mark workers offline when their heartbeat goes stale
 async function markStaleWorkersOffline() {
@@ -314,7 +389,11 @@ async function markStaleWorkersOffline() {
     console.error('[Worker] Stale check error:', error);
   }
 }
-setInterval(markStaleWorkersOffline, 60_000);
+if (!DEV_READONLY) {
+  setInterval(markStaleWorkersOffline, 60_000);
+} else {
+  console.log('[DEV] skipped: markStaleWorkersOffline interval');
+}
 
 // WebSocket connections
 const browserClients = new Set(); // Browser UI connections
@@ -624,17 +703,7 @@ async function authenticateSSO(req, res, next) {
 
   // Store/update user in database
   try {
-    const userId = crypto.randomUUID();
-    await pool.query(
-      `INSERT INTO users (id, username, display_name, email, groups, last_login)
-       VALUES (?, ?, ?, ?, ?, NOW())
-       ON DUPLICATE KEY UPDATE
-         display_name=VALUES(display_name),
-         email=VALUES(email),
-         groups=VALUES(groups),
-         last_login=NOW()`,
-      [userId, remoteUser, remoteName, remoteEmail, remoteGroups]
-    );
+    await upsertUser(pool, req.headers);
   } catch (error) {
     console.error('Error updating user:', error);
   }
@@ -1082,6 +1151,28 @@ async function waitForCommandResult(executionId, commandId, timeout) {
   });
 }
 
+
+
+// HTML page routes (registered before the API routes)
+const authenticatePage = makeAuthenticatePage(pool);
+PAGES.forEach((p) => {
+  app.get(p.path, authenticatePage, async (req, res, next) => {
+    try {
+      await renderPage(req, res, p.view, {
+        pageTitle: p.title,
+        activeNav: p.key,
+        pageScripts: [`/assets/pages/${p.view}.js`],
+        pageStyles: fs.existsSync(path.join(__dirname, `public/assets/pages/${p.view}.css`))
+          ? [`/assets/pages/${p.view}.css`]
+          : [],
+        pageConfig: { isAdmin: req.user.isAdmin }
+      });
+    } catch (e) {
+      next(e);
+    }
+  });
+});
+
 // Routes - All protected by SSO
 app.get('/api/user', authenticateSSO, (req, res) => {
   res.json(req.user);
@@ -1717,6 +1808,24 @@ app.post('/api/workers/:id/command', authenticateSSO, requireJSON, async (req, r
   }
 });
 
+// 404 — JSON under /api/, themed HTML elsewhere
+app.use((req, res) => {
+  if (req.path.startsWith('/api/')) {
+    return res.status(404).json({ error: 'Not found' });
+  }
+  renderError(req, res, 404, 'Not found', `No page exists at ${req.path}`);
+});
+
+// Error handler
+app.use((err, req, res, next) => { // eslint-disable-line no-unused-vars
+  console.error('[Error]', err && err.stack ? err.stack : err);
+  if (res.headersSent) return;
+  if (req.path.startsWith('/api/')) {
+    return res.status(500).json({ error: 'Internal server error' });
+  }
+  renderError(req, res, 500, 'Internal server error', 'Something went wrong rendering this page.');
+});
+
 // Start server
 const PORT = process.env.PORT || 8080;
 const HOST = process.env.HOST || '0.0.0.0';
@@ -1727,6 +1836,12 @@ initDatabase().then(() => {
     console.log(`Connected to MariaDB at ${process.env.DB_HOST}`);
     console.log(`Authentication: Authelia SSO`);
     console.log(`Worker API Key configured: ${process.env.WORKER_API_KEY ? 'Yes' : 'No'}`);
+    if (DEV_READONLY) {
+      console.warn('************************************************************');
+      console.warn('*  PULSE_DEV_READONLY IS ON — background jobs are disabled  *');
+      console.warn('*  No cleanup, scheduler, stale-worker or recovery writes.  *');
+      console.warn('************************************************************');
+    }
   });
 }).catch(err => {
   console.error('Failed to start server:', err);
diff --git a/views/layout.ejs b/views/layout.ejs
new file mode 100644
index 0000000..ff37c1f
--- /dev/null
+++ b/views/layout.ejs
@@ -0,0 +1,190 @@
+<%#
+  PULSE — LotusGuild Terminal Design System base layout.
+
+  Vendored from web_template/node/layout.ejs (bbec859) and extended for Pulse:
+  fixed comment delimiters, skip link, mobile drawer, theme button, command
+  palette, WS status, footer key hints and the keyboard-shortcuts modal.
+  Modelled on /root/code/gandalf/templates/base.html.
+
+  Rendered by lib/render.js renderPage(); the page view is pre-rendered into `body`.
+
+  Locals (all always provided by renderPage):
+    user         { username, name, email, groups, isAdmin }
+    nonce        CSP nonce string
+    appName      APP_NAME || 'PULSE'
+    appSubtitle  APP_SUBTITLE || 'Worker Orchestration // LotusGuild'
+    csrfToken    string (currently '')
+    navLinks     [{ href, key, label }]
+    pageTitle    string
+    activeNav    string, matches navLinks[].key
+    pageStyles   [href]
+    pageScripts  [src]
+    pageConfig   object serialised to window.PULSE_CONFIG
+    assetVersion cache-busting string
+    body         pre-rendered page HTML
+%>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <meta name="theme-color" content="#030508">
+  <meta name="robots" content="noindex, nofollow">
+  <title><%= pageTitle ? pageTitle + ' — ' : '' %><%= appName %></title>
+
+  <!-- Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;1,400&family=VT323&display=swap" rel="stylesheet">
+
+  <!-- Design system -->
+  <link rel="stylesheet" href="/web_template/base.css?v=<%= assetVersion %>">
+  <!-- App-specific CSS (extends base, never overrides variables without good reason) -->
+  <link rel="stylesheet" href="/assets/app.css?v=<%= assetVersion %>">
+
+  <% (pageStyles || []).forEach(function (href) { %>
+  <link rel="stylesheet" href="<%= href %>?v=<%= assetVersion %>">
+  <% }); %>
+
+  <link rel="icon" href="/assets/favicon.png" type="image/png">
+</head>
+<body>
+
+  <a class="lt-skip-link" href="#main-content">Skip to main content</a>
+
+  <!-- BOOT OVERLAY -->
+  <div id="lt-boot" class="lt-boot-overlay"
+       data-app-name="<%= appName.toUpperCase() %>"
+       style="display:none" aria-hidden="true">
+    <pre id="lt-boot-text" class="lt-boot-text"></pre>
+  </div>
+
+  <!-- MOBILE NAV DRAWER -->
+  <div id="lt-nav-drawer" class="lt-nav-drawer" aria-hidden="true" role="dialog" aria-modal="true" aria-label="Navigation menu">
+    <div class="lt-nav-drawer-header">
+      <span class="lt-brand-title"><%= appName.toUpperCase() %></span>
+      <button type="button" class="lt-nav-drawer-close" id="lt-nav-drawer-close" aria-label="Close navigation">&#x2715;</button>
+    </div>
+    <nav class="lt-nav-drawer-links" aria-label="Mobile navigation">
+      <% (navLinks || []).forEach(function (link) { %>
+      <a href="<%= link.href %>"
+         class="lt-nav-drawer-link<%= activeNav === link.key ? ' active' : '' %>"
+         <%- activeNav === link.key ? 'aria-current="page"' : '' %>><%= link.label %></a>
+      <% }); %>
+    </nav>
+  </div>
+  <div id="lt-nav-overlay" class="lt-nav-drawer-overlay"></div>
+
+  <!-- PRIMARY HEADER -->
+  <header class="lt-header" role="banner">
+    <div class="lt-header-left">
+
+      <!-- Hamburger (mobile) -->
+      <button type="button"
+              class="lt-menu-btn"
+              id="lt-menu-btn"
+              data-action="open-nav-drawer"
+              aria-label="Open navigation menu"
+              aria-expanded="false"
+              aria-controls="lt-nav-drawer">
+        <span class="lt-menu-btn-bar"></span>
+        <span class="lt-menu-btn-bar"></span>
+        <span class="lt-menu-btn-bar"></span>
+      </button>
+
+      <!-- Brand -->
+      <div class="lt-brand">
+        <a href="/" class="lt-brand-title lt-glitch"
+           data-text="<%= appName.toUpperCase() %>"
+           aria-label="<%= appName.toUpperCase() %> home"><%= appName.toUpperCase() %></a>
+        <span class="lt-brand-subtitle"><%= appSubtitle %></span>
+      </div>
+
+      <!-- Desktop nav -->
+      <nav class="lt-nav" aria-label="Main navigation">
+        <% (navLinks || []).forEach(function (link) { %>
+        <a href="<%= link.href %>"
+           class="lt-nav-link<%= activeNav === link.key ? ' active' : '' %>"
+           <%- activeNav === link.key ? 'aria-current="page"' : '' %>><%= link.label %></a>
+        <% }); %>
+      </nav>
+    </div>
+
+    <div class="lt-header-right">
+
+      <!-- WebSocket connection status -->
+      <div class="lt-ws-status" id="pulse-ws-status" data-state="connecting" aria-live="polite"><span class="lt-dot"></span><span>Connecting…</span></div>
+
+      <span id="pulse-last-refreshed" class="lt-text-xs lt-text-muted"></span>
+
+      <!-- ⌘K affordance -->
+      <button type="button"
+              class="lt-btn lt-btn-ghost lt-btn-sm lt-cmd-hint-btn"
+              data-action="open-cmdpalette"
+              title="Command palette (Ctrl+K)"
+              aria-label="Open command palette">&#x2315;&nbsp;K</button>
+
+      <button type="button" class="lt-theme-btn" id="lt-theme-btn"
+              aria-label="Toggle theme" title="Toggle light/dark mode">&#x2600;</button>
+
+      <% if (user && (user.name || user.username)) { %>
+      <span class="lt-header-user"><%= user.name || user.username %></span>
+      <% } %>
+      <% if (user && user.isAdmin) { %>
+      <span class="lt-badge lt-badge-admin" aria-label="Administrator">ADMIN</span>
+      <% } %>
+    </div>
+  </header>
+
+  <%- include('partials/cmd-palette') %>
+
+  <!-- MAIN CONTENT -->
+  <main class="lt-main lt-container" id="main-content">
+    <%- body %>
+  </main>
+
+  <!-- FOOTER -->
+  <footer class="lt-footer" role="contentinfo">
+    <nav class="lt-footer-hints" aria-label="Keyboard shortcuts">
+      <button type="button" class="lt-footer-hint" data-action="app:refresh"><span class="lt-footer-key">[ R ]</span> REFRESH</button>
+      <span class="lt-footer-sep">|</span>
+      <button type="button" class="lt-footer-hint" data-action="app:theme"><span class="lt-footer-key">[ T ]</span> THEME</button>
+      <span class="lt-footer-sep">|</span>
+      <button type="button" class="lt-footer-hint" data-action="open-cmdpalette"><span class="lt-footer-key">[ ^K ]</span> CMD</button>
+      <span class="lt-footer-sep">|</span>
+      <button type="button" class="lt-footer-hint" data-action="app:keys-help"><span class="lt-footer-key">[ ? ]</span> HELP</button>
+    </nav>
+    <span><%= appName.toUpperCase() %> &mdash; TDS v1.2</span>
+  </footer>
+
+  <%- include('partials/keys-help') %>
+
+  <!-- =========================================================
+       SCRIPTS — all tags carry the CSP nonce
+       ========================================================= -->
+
+  <!-- Runtime globals (the only inline script on the page) -->
+  <script nonce="<%= nonce %>">
+    window.CSRF_TOKEN = <%- JSON.stringify(csrfToken || '').replace(/</g, '\\u003c') %>;
+    window.CURRENT_USER = {
+      username: <%- JSON.stringify((user && user.username) || '').replace(/</g, '\\u003c') %>,
+      name:     <%- JSON.stringify((user && user.name) || '').replace(/</g, '\\u003c') %>,
+      email:    <%- JSON.stringify((user && user.email) || '').replace(/</g, '\\u003c') %>,
+      groups:   <%- JSON.stringify((user && user.groups) || []).replace(/</g, '\\u003c') %>,
+      isAdmin:  <%= user && user.isAdmin ? 'true' : 'false' %>
+    };
+    window.PULSE_CONFIG = <%- JSON.stringify(pageConfig || {}).replace(/</g, '\\u003c') %>;
+  </script>
+
+  <!-- Design system -->
+  <script nonce="<%= nonce %>" src="/web_template/base.js?v=<%= assetVersion %>"></script>
+
+  <!-- App JS -->
+  <script nonce="<%= nonce %>" src="/assets/app.js?v=<%= assetVersion %>"></script>
+
+  <% (pageScripts || []).forEach(function (src) { %>
+  <script nonce="<%= nonce %>" src="<%= src %>?v=<%= assetVersion %>"></script>
+  <% }); %>
+
+</body>
+</html>
diff --git a/views/pages/_stub.ejs b/views/pages/_stub.ejs
new file mode 100644
index 0000000..e6d3baa
--- /dev/null
+++ b/views/pages/_stub.ejs
@@ -0,0 +1,18 @@
+<%#
+  Placeholder page view. Rendered by lib/render.js when views/pages/<view>.ejs
+  does not exist yet, so the shell can be exercised before the page work
+  packages land.
+%>
+<div class="lt-page-header">
+  <h1 class="lt-page-title"><%= pageTitle || 'Page' %></h1>
+</div>
+<div class="lt-frame">
+  <div class="lt-empty-state">
+    <div class="lt-empty-state-icon">&#x2699;</div>
+    <div class="lt-empty-state-title">Page under construction</div>
+    <div class="lt-empty-state-text">
+      This view has not been implemented yet. The shared shell, navigation and
+      assets are live; the page content lands with its work package.
+    </div>
+  </div>
+</div>
diff --git a/views/pages/dashboard.ejs b/views/pages/dashboard.ejs
new file mode 100644
index 0000000..d7bfdc0
--- /dev/null
+++ b/views/pages/dashboard.ejs
@@ -0,0 +1,54 @@
+<%#
+  Dashboard page (WP-C). Stats + recent manual executions + workers summary.
+  All data loaded client-side by /assets/pages/dashboard.js.
+%>
+<%- include('../partials/page-header', { title: 'Dashboard', subtitle: 'System overview', actions: '' }) %>
+
+<div class="lt-stats-grid">
+  <div class="lt-stat-card" id="dash-stat-total" role="button" tabindex="0" data-action="dash:goto-workers" aria-label="Total workers">
+    <span class="lt-stat-icon lt-text-cyan" aria-hidden="true">&#x25c9;</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value" id="dash-stat-total-val">0</span>
+      <span class="lt-stat-label">Workers</span>
+    </div>
+  </div>
+  <div class="lt-stat-card" id="dash-stat-online" role="button" tabindex="0" data-action="dash:goto-workers" aria-label="Online workers">
+    <span class="lt-stat-icon lt-text-green" aria-hidden="true">&#x25cf;</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value" id="dash-stat-online-val">0</span>
+      <span class="lt-stat-label">Online</span>
+    </div>
+  </div>
+  <div class="lt-stat-card" id="dash-stat-offline" role="button" tabindex="0" data-action="dash:goto-workers" aria-label="Offline workers">
+    <span class="lt-stat-icon lt-text-red" aria-hidden="true">&#x25cb;</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value" id="dash-stat-offline-val">0</span>
+      <span class="lt-stat-label">Offline</span>
+    </div>
+  </div>
+  <div class="lt-stat-card" id="dash-stat-running" role="button" tabindex="0" data-action="dash:goto-executions" aria-label="Running executions">
+    <span class="lt-stat-icon lt-text-amber" aria-hidden="true">&#x25b8;</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value" id="dash-stat-running-val">0</span>
+      <span class="lt-stat-label">Running</span>
+    </div>
+  </div>
+</div>
+
+<div class="lt-frame">
+  <div class="lt-section-header">Recent Executions</div>
+  <div id="dash-executions-wrap">
+    <div class="lt-empty-state lt-empty-state--sm" id="dash-executions-loading">
+      <div class="lt-empty-state-title">Loading&hellip;</div>
+    </div>
+  </div>
+</div>
+
+<div class="lt-frame">
+  <div class="lt-section-header">Workers</div>
+  <div id="dash-workers-wrap">
+    <div class="lt-empty-state lt-empty-state--sm" id="dash-workers-loading">
+      <div class="lt-empty-state-title">Loading&hellip;</div>
+    </div>
+  </div>
+</div>
diff --git a/views/pages/executions.ejs b/views/pages/executions.ejs
new file mode 100644
index 0000000..af0b0b2
--- /dev/null
+++ b/views/pages/executions.ejs
@@ -0,0 +1,118 @@
+<%#
+  Executions page (WP-E).
+
+  Owns DOM id prefix `ex-` and action namespace `ex:*`.
+  All behaviour lives in /assets/pages/executions.js (auto-loaded by the layout);
+  styling additions in /assets/pages/executions.css (auto-linked).
+
+  The page-header is written out inline rather than through the shared partial
+  because the Clear Completed button is admin-only and the partial takes its
+  actions as a pre-rendered string.
+%>
+<div class="lt-page-header">
+  <div>
+    <h1 class="lt-page-title">Executions</h1>
+    <p class="lt-page-subtitle">Workflow and quick-command run history</p>
+  </div>
+  <div class="lt-page-actions">
+    <div class="lt-btn-group">
+      <button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-action="ex:refresh">&#x21bb; Refresh</button>
+      <button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" id="ex-compare-toggle"
+              data-action="ex:compare-toggle" aria-pressed="false">&#x25a4; Compare Mode</button>
+      <button type="button" class="lt-btn lt-btn-primary lt-btn-sm is-hidden" id="ex-compare-run"
+              data-action="ex:compare-run">&#x2696; Compare Selected</button>
+      <% if (user && user.isAdmin) { %>
+      <button type="button" class="lt-btn lt-btn-danger lt-btn-sm" data-action="ex:clear-completed">&#x2716; Clear Completed</button>
+      <% } %>
+    </div>
+  </div>
+</div>
+
+<div class="lt-frame">
+  <span class="lt-frame-bl"></span><span class="lt-frame-br"></span>
+
+  <!-- Manual / Automated sub-tabs. base.js initTabs wires the click/keyboard
+       behaviour and persists lt_activeTab_/executions; the ex:view-tab action
+       keeps pulse_executionView (the authoritative store) in sync. -->
+  <div class="lt-tab-bar" role="tablist" aria-label="Execution view">
+    <button type="button" class="lt-tab active" role="tab" id="ex-tabbtn-manual"
+            aria-selected="true" aria-controls="ex-tab-manual"
+            data-tab="ex-tab-manual" data-action="ex:view-tab" data-view="manual">
+      &#x1f464; Manual Runs <span class="lt-badge lt-badge-sm" id="ex-count-manual"></span>
+    </button>
+    <button type="button" class="lt-tab" role="tab" id="ex-tabbtn-automated"
+            aria-selected="false" aria-controls="ex-tab-automated"
+            data-tab="ex-tab-automated" data-action="ex:view-tab" data-view="automated">
+      &#x1f916; Automated <span class="lt-badge lt-badge-sm" id="ex-count-automated"></span>
+    </button>
+  </div>
+
+  <div class="lt-alert lt-alert--warning is-hidden" id="ex-compare-hint">
+    <span class="lt-alert-icon">&#x25a4;</span>
+    <div class="lt-alert-body">
+      <div class="lt-alert-title">Compare mode</div>
+      <div class="lt-alert-msg">Select 2&ndash;5 executions to compare their outputs. Click a row to toggle selection.</div>
+    </div>
+  </div>
+
+  <div class="lt-toolbar">
+    <div class="lt-toolbar-left">
+      <div class="lt-search">
+        <input type="search" id="ex-search" class="lt-input lt-search-input"
+               placeholder="Search by command, execution ID, or workflow name…"
+               autocomplete="off" aria-label="Search executions"
+               data-input-action="ex:search">
+      </div>
+      <select id="ex-status" class="lt-select" aria-label="Status filter" data-change-action="ex:filter-status">
+        <option value="">All Statuses</option>
+        <option value="running">Running</option>
+        <option value="completed">Completed</option>
+        <option value="failed">Failed</option>
+        <option value="waiting">Waiting</option>
+      </select>
+      <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm" data-action="ex:clear-filters">Clear Filters</button>
+    </div>
+    <div class="lt-toolbar-right">
+      <span id="ex-filter-stats" class="pulse-meta"></span>
+    </div>
+  </div>
+
+  <div class="lt-tab-panels">
+    <div class="lt-tab-panel active" id="ex-tab-manual" role="tabpanel" aria-labelledby="ex-tabbtn-manual" tabindex="-1">
+      <div id="ex-list-manual" class="ex-list">
+        <div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-title">Loading&hellip;</div></div>
+      </div>
+    </div>
+    <div class="lt-tab-panel" id="ex-tab-automated" role="tabpanel" aria-labelledby="ex-tabbtn-automated" tabindex="-1">
+      <div id="ex-list-automated" class="ex-list">
+        <div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-title">Loading&hellip;</div></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ===================== EXECUTION DETAIL MODAL ===================== -->
+<div class="lt-modal-overlay" id="ex-detail-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="ex-detail-title">
+  <div class="lt-modal lt-modal-lg">
+    <div class="lt-modal-header">
+      <span class="lt-modal-title" id="ex-detail-title">Execution Details</span>
+      <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
+    </div>
+    <div class="lt-modal-body" id="ex-detail-body"></div>
+    <div class="lt-modal-footer" id="ex-detail-footer"></div>
+  </div>
+</div>
+
+<!-- ===================== EXECUTION COMPARE MODAL ==================== -->
+<div class="lt-modal-overlay" id="ex-compare-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="ex-compare-title">
+  <div class="lt-modal lt-modal-lg">
+    <div class="lt-modal-header">
+      <span class="lt-modal-title" id="ex-compare-title">&#x2696; Execution Comparison</span>
+      <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
+    </div>
+    <div class="lt-modal-body" id="ex-compare-body"></div>
+    <div class="lt-modal-footer">
+      <button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-modal-close>Close</button>
+    </div>
+  </div>
+</div>
diff --git a/views/pages/quick.ejs b/views/pages/quick.ejs
new file mode 100644
index 0000000..1f7fdf5
--- /dev/null
+++ b/views/pages/quick.ejs
@@ -0,0 +1,89 @@
+<%#
+  Quick Command page (WP-F). Ad-hoc command execution against one or more
+  workers. All data loaded client-side by /assets/pages/quick.js.
+%>
+<%- include('../partials/page-header', {
+  title: 'Quick Command',
+  subtitle: 'Execute a command on selected workers instantly',
+  actions: '<button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-action="qc:templates-open">&#x1f4cb; Templates</button>' +
+           '<button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-action="qc:history-open">&#x1f550; History</button>'
+}) %>
+
+<div class="lt-frame">
+  <form id="qc-form" data-submit-action="qc:execute">
+    <div class="lt-form-group">
+      <label class="lt-label">Execution Mode</label>
+      <div class="qc-mode-row">
+        <label class="qc-radio-label">
+          <input type="radio" class="lt-radio" name="qc-exec-mode" id="qc-mode-single" value="single" checked data-change-action="qc:mode">
+          <span>Single Worker</span>
+        </label>
+        <label class="qc-radio-label">
+          <input type="radio" class="lt-radio" name="qc-exec-mode" id="qc-mode-multi" value="multi" data-change-action="qc:mode">
+          <span>Multiple Workers</span>
+        </label>
+      </div>
+    </div>
+
+    <div class="lt-form-group" id="qc-single-mode">
+      <label class="lt-label" for="qc-worker">Select Worker</label>
+      <select class="lt-select" id="qc-worker">
+        <option value="">Loading workers&hellip;</option>
+      </select>
+    </div>
+
+    <div class="lt-form-group" id="qc-multi-mode" hidden>
+      <label class="lt-label">Select Workers</label>
+      <div id="qc-worker-list" class="qc-worker-list">
+        <div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-title">Loading&hellip;</div></div>
+      </div>
+      <div class="lt-btn-group qc-worker-actions">
+        <button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-action="qc:select-all">Select All</button>
+        <button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-action="qc:select-online">Online Only</button>
+        <button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-action="qc:clear-all">Clear All</button>
+      </div>
+    </div>
+
+    <div class="lt-form-group">
+      <label class="lt-label" for="qc-command">Command</label>
+      <textarea class="lt-textarea" id="qc-command" rows="4" placeholder="Enter command to execute (e.g. 'uptime' or 'df -h')"></textarea>
+      <div class="lt-form-hint">Ctrl+Enter to execute</div>
+    </div>
+
+    <button type="submit" class="lt-btn lt-btn-primary" id="qc-execute-btn">&#x25b6; Execute Command</button>
+  </form>
+
+  <div id="qc-result" class="qc-result"></div>
+</div>
+
+<!-- Command Templates Modal -->
+<div class="lt-modal-overlay" id="qc-templates-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="qc-templates-title">
+  <div class="lt-modal lt-modal-lg">
+    <div class="lt-modal-header">
+      <span class="lt-modal-title" id="qc-templates-title">Command Templates</span>
+      <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
+    </div>
+    <div class="lt-modal-body">
+      <div id="qc-templates-list" class="qc-scroll-list"></div>
+    </div>
+    <div class="lt-modal-footer">
+      <button type="button" class="lt-btn lt-btn-ghost" data-modal-close>Close</button>
+    </div>
+  </div>
+</div>
+
+<!-- Command History Modal -->
+<div class="lt-modal-overlay" id="qc-history-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="qc-history-title">
+  <div class="lt-modal lt-modal-lg">
+    <div class="lt-modal-header">
+      <span class="lt-modal-title" id="qc-history-title">Command History</span>
+      <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
+    </div>
+    <div class="lt-modal-body">
+      <div id="qc-history-list" class="qc-scroll-list"></div>
+    </div>
+    <div class="lt-modal-footer">
+      <button type="button" class="lt-btn lt-btn-ghost" data-modal-close>Close</button>
+    </div>
+  </div>
+</div>
diff --git a/views/pages/scheduler.ejs b/views/pages/scheduler.ejs
new file mode 100644
index 0000000..294d376
--- /dev/null
+++ b/views/pages/scheduler.ejs
@@ -0,0 +1,62 @@
+<%#
+  Scheduler page (WP-F). List of scheduled commands + admin create/toggle/delete.
+  All data loaded client-side by /assets/pages/scheduler.js.
+%>
+<%- include('../partials/page-header', {
+  title: 'Scheduler',
+  subtitle: 'Automate command execution with flexible scheduling',
+  actions: '<button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-action="app:refresh">&#x21bb; Refresh</button>' +
+           (pageConfig && pageConfig.isAdmin ? '<button type="button" class="lt-btn lt-btn-primary lt-btn-sm" data-action="sc:create-open">&#x2795; Create Schedule</button>' : '')
+}) %>
+
+<div class="lt-frame">
+  <div id="sc-wrap">
+    <div class="lt-empty-state" id="sc-loading">
+      <div class="lt-empty-state-title">Loading&hellip;</div>
+    </div>
+  </div>
+</div>
+
+<!-- Create Schedule Modal -->
+<div class="lt-modal-overlay" id="sc-create-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="sc-create-title">
+  <div class="lt-modal">
+    <div class="lt-modal-header">
+      <span class="lt-modal-title" id="sc-create-title">Create Scheduled Command</span>
+      <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
+    </div>
+    <form id="sc-create-form" data-submit-action="sc:create-submit">
+      <div class="lt-modal-body">
+        <div class="lt-form-group">
+          <label class="lt-label" for="sc-name">Schedule Name</label>
+          <input type="text" id="sc-name" class="lt-input" placeholder="e.g. Daily System Check">
+        </div>
+        <div class="lt-form-group">
+          <label class="lt-label" for="sc-command">Command</label>
+          <textarea id="sc-command" class="lt-textarea" rows="3" placeholder="Enter command to execute"></textarea>
+        </div>
+        <div class="lt-form-group">
+          <label class="lt-label">Target Workers</label>
+          <div id="sc-worker-list" class="qc-worker-list">
+            <div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-title">Loading&hellip;</div></div>
+          </div>
+        </div>
+        <div class="lt-form-group">
+          <label class="lt-label" for="sc-type">Schedule Type</label>
+          <select id="sc-type" class="lt-select" data-change-action="sc:type">
+            <option value="interval">Every X Minutes</option>
+            <option value="hourly">Every X Hours</option>
+            <option value="daily">Daily at Time</option>
+          </select>
+        </div>
+        <div class="lt-form-group" id="sc-value-container">
+          <label class="lt-label" for="sc-value">Interval (minutes)</label>
+          <input type="number" id="sc-value" class="lt-input" placeholder="e.g. 30" min="1">
+        </div>
+      </div>
+      <div class="lt-modal-footer">
+        <button type="submit" class="lt-btn lt-btn-primary">Create Schedule</button>
+        <button type="button" class="lt-btn lt-btn-ghost" data-modal-close>Cancel</button>
+      </div>
+    </form>
+  </div>
+</div>
diff --git a/views/pages/workers.ejs b/views/pages/workers.ejs
new file mode 100644
index 0000000..cbc882a
--- /dev/null
+++ b/views/pages/workers.ejs
@@ -0,0 +1,14 @@
+<%#
+  Workers page (WP-C). Grid of worker cards, patched in place on worker_update.
+%>
+<%- include('../partials/page-header', {
+  title: 'Workers',
+  subtitle: 'Connected worker agents',
+  actions: '<button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-action="app:refresh">&#x21bb; Refresh</button>'
+}) %>
+
+<div id="wk-grid" class="wk-grid">
+  <div class="lt-empty-state" id="wk-loading">
+    <div class="lt-empty-state-title">Loading&hellip;</div>
+  </div>
+</div>
diff --git a/views/pages/workflows.ejs b/views/pages/workflows.ejs
new file mode 100644
index 0000000..331a0e4
--- /dev/null
+++ b/views/pages/workflows.ejs
@@ -0,0 +1,125 @@
+<%#
+  Workflows page (WP-D).
+  Locals: user, nonce, pageTitle, activeNav, assetVersion, pageConfig.
+  All data comes from /api/workflows*; pageConfig only carries the example
+  definition JSON used to pre-fill the Create modal.
+%>
+<%- include('../partials/page-header', {
+  title: 'Workflows',
+  subtitle: 'Reusable multi-step jobs run against one or more workers.',
+  actions:
+    '<button type="button" class="lt-btn lt-btn-secondary" data-action="app:refresh">Refresh</button>' +
+    '<button type="button" class="lt-btn lt-btn-primary" data-action="wf:create-open">+ Create Workflow</button>'
+}) %>
+
+<div class="lt-frame">
+  <div class="lt-section-header">Workflows</div>
+  <div class="lt-section-body" id="wf-list">
+    <div class="lt-empty-state">
+      <div class="lt-empty-state-icon">&#x2699;</div>
+      <div class="lt-empty-state-title">Loading workflows&hellip;</div>
+    </div>
+  </div>
+</div>
+
+<!-- Create Workflow Modal -->
+<div class="lt-modal-overlay" id="wf-create-modal" aria-hidden="true" role="dialog"
+     aria-modal="true" aria-labelledby="wf-create-modal-title">
+  <div class="lt-modal lt-modal-lg">
+    <div class="lt-modal-header">
+      <span class="lt-modal-title" id="wf-create-modal-title">Create Workflow</span>
+      <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
+    </div>
+    <form id="wf-create-form" data-submit-action="wf:create-submit">
+      <div class="lt-modal-body">
+        <div class="lt-form-group">
+          <label class="lt-label" for="wf-create-name">Name</label>
+          <input type="text" id="wf-create-name" name="name" class="lt-input" required placeholder="Workflow Name" autocomplete="off">
+        </div>
+        <div class="lt-form-group">
+          <label class="lt-label" for="wf-create-description">Description</label>
+          <textarea id="wf-create-description" name="description" class="lt-textarea" placeholder="Description"></textarea>
+        </div>
+        <div class="lt-form-group">
+          <label class="lt-label" for="wf-create-definition">Definition (JSON)</label>
+          <textarea id="wf-create-definition" name="definition" class="lt-textarea wf-json-textarea" required></textarea>
+          <span class="lt-form-hint">Steps run in order against the selected targets.</span>
+        </div>
+        <div class="lt-form-group">
+          <label class="lt-label" for="wf-create-webhook">Webhook URL (optional)</label>
+          <input type="url" id="wf-create-webhook" name="webhook_url" class="lt-input" placeholder="https://example.com/webhook">
+        </div>
+        <div class="lt-field-error" id="wf-create-error" hidden></div>
+      </div>
+      <div class="lt-modal-footer">
+        <button type="submit" class="lt-btn lt-btn-primary">Create</button>
+        <button type="button" class="lt-btn lt-btn-ghost" data-modal-close>Cancel</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<!-- Edit Workflow Modal (admin) -->
+<div class="lt-modal-overlay" id="wf-edit-modal" aria-hidden="true" role="dialog"
+     aria-modal="true" aria-labelledby="wf-edit-modal-title">
+  <div class="lt-modal lt-modal-lg">
+    <div class="lt-modal-header">
+      <span class="lt-modal-title" id="wf-edit-modal-title">Edit Workflow</span>
+      <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
+    </div>
+    <form id="wf-edit-form" data-submit-action="wf:edit-submit">
+      <input type="hidden" id="wf-edit-id" name="id">
+      <div class="lt-modal-body">
+        <div class="lt-form-group">
+          <label class="lt-label" for="wf-edit-name">Name</label>
+          <input type="text" id="wf-edit-name" name="name" class="lt-input" required placeholder="Workflow Name" autocomplete="off">
+        </div>
+        <div class="lt-form-group">
+          <label class="lt-label" for="wf-edit-description">Description</label>
+          <textarea id="wf-edit-description" name="description" class="lt-textarea" placeholder="Description"></textarea>
+        </div>
+        <div class="lt-form-group">
+          <label class="lt-label" for="wf-edit-definition">Definition (JSON)</label>
+          <textarea id="wf-edit-definition" name="definition" class="lt-textarea wf-json-textarea wf-json-textarea-lg" required></textarea>
+        </div>
+        <div class="lt-form-group">
+          <label class="lt-label" for="wf-edit-webhook">Webhook URL (optional)</label>
+          <input type="url" id="wf-edit-webhook" name="webhook_url" class="lt-input" placeholder="https://example.com/webhook">
+        </div>
+        <div class="lt-field-error" id="wf-edit-error" hidden></div>
+      </div>
+      <div class="lt-modal-footer">
+        <button type="submit" class="lt-btn lt-btn-primary">Save</button>
+        <button type="button" class="lt-btn lt-btn-ghost" data-modal-close>Cancel</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<!-- Run Workflow Modal (execute, with optional params + dry run) -->
+<div class="lt-modal-overlay" id="wf-run-modal" aria-hidden="true" role="dialog"
+     aria-modal="true" aria-labelledby="wf-run-modal-title">
+  <div class="lt-modal lt-modal-sm">
+    <div class="lt-modal-header">
+      <span class="lt-modal-title" id="wf-run-modal-title">Run Workflow</span>
+      <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
+    </div>
+    <form id="wf-run-form" data-submit-action="wf:param-submit">
+      <input type="hidden" id="wf-run-workflow-id" name="workflow_id">
+      <div class="lt-modal-body">
+        <p class="lt-text-sm" id="wf-run-name"></p>
+        <div id="wf-run-params"></div>
+        <div class="lt-form-group">
+          <label class="wf-checkbox-label">
+            <input type="checkbox" id="wf-run-dryrun" class="lt-checkbox">
+            Dry Run (simulate, no commands executed)
+          </label>
+        </div>
+      </div>
+      <div class="lt-modal-footer">
+        <button type="submit" class="lt-btn lt-btn-primary">&#x25B6; Run</button>
+        <button type="button" class="lt-btn lt-btn-ghost" data-modal-close>Cancel</button>
+      </div>
+    </form>
+  </div>
+</div>
diff --git a/views/partials/cmd-palette.ejs b/views/partials/cmd-palette.ejs
new file mode 100644
index 0000000..4329a5d
--- /dev/null
+++ b/views/partials/cmd-palette.ejs
@@ -0,0 +1,19 @@
+  <!-- COMMAND PALETTE -->
+  <div id="lt-cmd-overlay" class="lt-cmd-overlay" role="dialog" aria-modal="true" aria-label="Command palette" aria-hidden="true">
+    <div class="lt-cmd-palette" id="lt-cmd-palette">
+      <div class="lt-cmd-input-wrap">
+        <span class="lt-cmd-prompt">&gt;</span>
+        <input id="lt-cmd-input" class="lt-cmd-input" type="text"
+               placeholder="Search commands&hellip;" autocomplete="off"
+               spellcheck="false" aria-label="Search commands">
+      </div>
+      <div class="lt-cmd-results" id="lt-cmd-results">
+        <div class="lt-cmd-empty">Start typing to search&hellip;</div>
+      </div>
+      <div class="lt-cmd-footer">
+        <span><kbd>&#x2191;</kbd><kbd>&#x2193;</kbd> Navigate</span>
+        <span><kbd>Enter</kbd> Select</span>
+        <span><kbd>Esc</kbd> Close</span>
+      </div>
+    </div>
+  </div>
diff --git a/views/partials/keys-help.ejs b/views/partials/keys-help.ejs
new file mode 100644
index 0000000..63d7575
--- /dev/null
+++ b/views/partials/keys-help.ejs
@@ -0,0 +1,23 @@
+  <!-- KEYBOARD SHORTCUTS MODAL -->
+  <div id="lt-keys-help" class="lt-modal-overlay" aria-hidden="true">
+    <div class="lt-modal" role="dialog" aria-modal="true" aria-labelledby="lt-keys-help-title">
+      <div class="lt-modal-header">
+        <span class="lt-modal-title" id="lt-keys-help-title">Keyboard Shortcuts</span>
+        <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
+      </div>
+      <div class="lt-modal-body">
+        <table class="lt-table">
+          <thead><tr><th>Shortcut</th><th>Action</th></tr></thead>
+          <tbody>
+            <tr><td>Ctrl / &#x2318; + K</td><td>Command palette</td></tr>
+            <tr><td>R</td><td>Refresh data</td></tr>
+            <tr><td>?</td><td>Show this help</td></tr>
+            <tr><td>ESC</td><td>Close modal / drawer / palette</td></tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="lt-modal-footer">
+        <button type="button" class="lt-btn" data-modal-close>Close</button>
+      </div>
+    </div>
+  </div>
diff --git a/views/partials/page-header.ejs b/views/partials/page-header.ejs
new file mode 100644
index 0000000..be33471
--- /dev/null
+++ b/views/partials/page-header.ejs
@@ -0,0 +1,16 @@
+<%#
+  Page header partial.
+  Locals: title (string), subtitle (optional string), actions (optional raw HTML).
+  Usage from a page view: include('../partials/page-header', { title, subtitle, actions })
+%>
+<div class="lt-page-header">
+  <div>
+    <h1 class="lt-page-title"><%= title %></h1>
+    <% if (typeof subtitle !== 'undefined' && subtitle) { %>
+    <p class="lt-page-subtitle"><%= subtitle %></p>
+    <% } %>
+  </div>
+  <% if (typeof actions !== 'undefined' && actions) { %>
+  <div class="lt-page-actions"><%- actions %></div>
+  <% } %>
+</div>