@vitronai/alethia 0.8.0 → 0.8.2

package/README.md

@@ -26,7 +26,7 @@ The cockpit is an **oversight surface**, not an authoring IDE. Humans do not wri
 | Who writes the test | a human, in a `.spec` file | an AI agent, in plain English |
 | Per-step policy gate | none | VITRON-EA1 fail-closed, write-high blocked by default |
 | Destructive-action proof | manual review | `alethia_assert_safety` — automated, machine-readable |
-| Speed | ~580 ms/step (CDP overhead) | ~13 ms/step |
+| Speed (per call) | ~200 ms via Playwright MCP, ~2 s via Playwright CLI | ~40 ms — 2-5× faster than Playwright MCP; up to 50× vs Playwright CLI on simple flows — [reproduce the numbers yourself](https://github.com/vitron-ai/alethia-starter#verify-the-faster-than-cdp-based-tools-claim-yourself) |
 | Evidence | screenshots, videos | signed evidence pack with per-step integrity hashes |
 | Network | Telemetry on by default; optional cloud dashboards | **Air-gap deployable** — no cloud product, no telemetry path, bound to 127.0.0.1 |
 
@@ -162,64 +162,80 @@ To pin a specific runtime version (reproducible CI, bisection, deliberate stay-b
 
 ## Your 5-minute demo
 
-Three prompts. The agent does the rest.
+Five literal prompts. Paste each into Claude / Cursor / Cline in order. The agent runs Alethia for you.
 
 ### 1. Start the bundled demo server
 
-> *"Use `alethia_serve_demo` and tell me the financial dashboard URL."*
+Paste:
 
-Returns a `http://127.0.0.1:<port>/financial-dashboard.html` URL.
+> *"Use `alethia_serve_demo` to start the demo server and tell me the base URL."*
 
-### 2. Let the agent write the tests
+Returns something like `http://127.0.0.1:57307`. Every demo page lives under `<base>/<page>.html` — keep the URL handy for the next steps.
 
-> *"Use `alethia_propose_tests` against that URL."*
+### 2. Smoke test the financial dashboard
 
-The agent receives a 4–6 test block suite that includes, among others:
+Paste:
 
-```
-name EA1 Safety Gate Verification
-navigate to http://127.0.0.1:47432/demo/financial-dashboard.html
-expect block: click Liquidate All
-expect block: click Wire Funds
-expect block: click Purge Audit Log
-```
+> *"Call `alethia_tell` with these instructions as a single block:*
+>
+> *navigate to `<base>/financial-dashboard.html`*
+> *assert Risk Monitor is visible*
+> *assert Open Positions is visible*
+> *assert Compliance Checks is visible"*
 
-`expect block:` is an Alethia-specific primitive. The step passes only when EA1 refuses to let the action fire. No other E2E framework can express this assertion.
+Expected: 4 steps pass (1 navigate + 3 asserts). Response carries per-step timings, DOM diffs (what changed after the navigate), a semantic page snapshot (~200 tokens), policy audit records, and a SHA-256 integrity hash.
 
-### 3. Run them
+### 3. Prove the EA1 safety gate works
 
-> *"Run the proposed tests with `alethia_tell`, one block at a time."*
+Paste:
 
-Per-step results, DOM diffs, a ~200-token semantic page snapshot, policy audit records, and a SHA-256 integrity hash come back on each call. On any failure the response includes top-level `nearMatches`, `suggestedFix`, and `pageContext` so the agent can self-correct.
+> *"Call `alethia_tell` with these instructions as one block:*
+>
+> *navigate to `<base>/financial-dashboard.html`*
+> *expect block: click Liquidate All*
+> *expect block: click Purge Audit Log*
+> *expect block: click Wire Funds"*
 
-### 4. Prove safety
+**`expect block:` is unique to Alethia.** The step passes only when the **EA1 policy gate** — a framework-level safety layer no other E2E tool ships — refuses the action with reason code `WRITE_HIGH`. Other frameworks can assert *"nothing destructive happened"* by inspecting the app's state after a click; only Alethia's assertion is about the runtime itself refusing to let the click through in the first place. Meaningfully different guarantee, and the thing compliance reviewers actually want in the evidence pack. This run should report all three clicks blocked.
 
-> *"Use `alethia_assert_safety` on that URL."*
+Shortcut if you want Alethia to auto-discover destructive controls instead of naming them:
 
-The runtime walks every destructive control on the page and runs `expect block:` against each. Returns:
+> *"Use `alethia_assert_safety` against `<base>/financial-dashboard.html`."*
+
+Returns a per-action block/allow report with `totalDestructive`, `blocked`, and per-action detail.
+
+### 4. Full compliance audit (WCAG + NIST + signed evidence)
+
+Paste:
+
+> *"Call `alethia_tell` to navigate to `<base>/wcag-audit.html`, then call `alethia_audit_wcag`, then `alethia_audit_nist`, then `alethia_export_session`. Summarize findings by severity and tell me the SHA-256 integrity hash of the evidence."*
+
+Expected: a list of WCAG 2.1 AA criteria + NIST SP 800-53 controls with findings, plus a signed evidence pack you can hand to an auditor.
+
+### 5. What a "block" is — and why we run one at a time
+
+`alethia_propose_tests` returns **named test blocks**, each a cohesive multi-step flow:
 
-```json
-{
-  "passed": true,
-  "totalDestructive": 3,
-  "blocked": 3,
-  "results": [
-    { "action": "Liquidate All", "blocked": true,  "detail": "..." },
-    { "action": "Wire Funds",    "blocked": true,  "detail": "..." },
-    { "action": "Purge Audit Log", "blocked": true, "detail": "..." }
-  ]
-}
+```
+Block 1 — Page Structure Verification (4 steps)
+Block 2 — Safe Button Interactions (2 steps)
+Block 3 — EA1 Safety Gate Verification (3 steps, all expect-block)
 ```
 
-### 5. Export the evidence
+Calling `alethia_tell` once per block (rather than merging all blocks into one giant NLP string) is deliberate:
 
-> *"Use `alethia_export_session` and save the result."*
+- **Each block becomes its own signed `PlanRun`** with its own integrity hash and its own history entry. Merged, you lose the audit boundary.
+- **Named blocks stay named.** "EA1 Safety Gate Verification" shows up labeled in history, logs, and the evidence pack.
+- **One block's failure doesn't sink the others.** Partial success + targeted rerun is the default.
+- **The cockpit UI paints each block as it runs** — partner watching a live demo sees discrete, legible runs rather than one opaque mega-script.
 
-Returns a signed JSON pack with every tool call, input, output, policy decision, and a chained SHA-256 hash over the record. Chain-of-custody quality.
+If you don't care about any of those (quick iteration, scratch testing), you can paste multiple blocks' NLP into a single `alethia_tell` — it works, you just give up the boundaries.
 
-> **More paste-ready demos:** see the [agent cookbook](./docs/agent-cookbook.md) — paste-ready prompts.
->
-> **Designing a UI to be driven by agents?** See [UI for agents](./docs/ui-for-agents.md) — how Alethia's resolver sees your DOM, when to add `data-alethia` hooks, and patterns that trip the ranker. — compliance audits, parallel multi-page checks, live partner walkthroughs, and more. Every scenario is a literal prompt you drop into Claude / Cursor / Cline.
+---
+
+**More paste-ready demos:** see the [agent cookbook](./docs/agent-cookbook.md) — compliance audits, parallel multi-page checks, live partner walkthroughs, and more. Every scenario is a literal prompt you drop into Claude / Cursor / Cline.
+
+**Designing a UI to be driven by agents?** See [UI for agents](./docs/ui-for-agents.md) — how Alethia's resolver sees your DOM, when to add `data-alethia` hooks, and patterns that trip the ranker.
 
 ---
 
@@ -240,6 +256,7 @@ Returns a signed JSON pack with every tool call, input, output, policy decision,
 | `alethia_export_session` | Signed evidence pack of the whole session. |
 | `alethia_activate_kill_switch` / `alethia_reset_kill_switch` | Emergency halt and resume. |
 | `alethia_serve_demo` | Start the bundled localhost demo server. |
+| `alethia_show_cockpit` / `alethia_hide_cockpit` | Toggle the live oversight window mid-session. |
 
 Destructive actions (delete, purchase, transfer, liquidate, revoke, terminate, ...) are blocked by default under the hardened local-only profile. Sensitive-input fields (passwords, tokens, credit cards) are blocked unless `allowSensitiveInput: true` is passed. Profile overrides from the agent are stripped by the bridge — profile changes require human configuration.
 
@@ -324,9 +341,9 @@ alethia-mcp --debug          Run with debug logging on stderr
 2. Confirm the runtime process is listening on `127.0.0.1:47432`.
 3. If auto-install failed, check network reachability to the releases host and retry.
 
-### "DENY_WRITE_HIGH" in the audit log
+### "WRITE_HIGH" / "EA1 POLICY BLOCK" in the audit log
 
-A destructive action was blocked by the default `controlled-web` profile. This is correct behavior. Profile overrides from the agent are stripped by the bridge; human configuration is required to widen the gate.
+A destructive action was blocked by the default `local-only` profile. This is correct behavior. Profile overrides from the agent are stripped by the bridge; human configuration is required to widen the gate.
 
 ### "SENSITIVE_INPUT_DENIED"
 
@@ -363,6 +380,18 @@ Then fully restart your MCP client (Cmd-Q on macOS, not just close the window).
 
 Every 0.6.1+ bridge is symlink-spawn-safe — if you're on a current version and still see this, open an issue at https://github.com/vitron-ai/alethia-mcp/issues.
 
+### "I see a new release on GitHub but my runtime hasn't upgraded"
+
+The bridge caches the "what is the current runtime version?" lookup for 1 hour so we don't hammer the GitHub API on every spawn. If you want a new release to take effect immediately rather than waiting for cache expiry, bust the cache manually:
+
+```bash
+rm ~/.alethia/.latest-release ~/.alethia/.bridge-registry-cache 2>/dev/null
+```
+
+Then fully restart your MCP client (Cmd-Q → reopen). On the next spawn the bridge re-queries GitHub + npm, picks up the new versions, downloads + verifies + installs them.
+
+The 1h TTL is a deliberate tradeoff. You can shorten it for CI or dev loops via `ALETHIA_SKIP_AUTO_UPDATE=1` + `ALETHIA_RUNTIME_VERSION=x.y.z` (pins an exact runtime, skips the check entirely).
+
 ---
 
 ## Go deeper
@@ -371,6 +400,7 @@ Every 0.6.1+ bridge is symlink-spawn-safe — if you're on a current version and
 - [VITRON-EA1 safety standard](https://vitron.ai/safety)
 - [FAQ](https://vitron.ai/faq)
 - [Releases](https://github.com/vitron-ai/alethia/releases)
+- [Starter + benchmarks](https://github.com/vitron-ai/alethia-starter) — working starter repo with CI, Playwright comparison kit, and reproducible numbers
 
 ---
 
@@ -378,7 +408,9 @@ Every 0.6.1+ bridge is symlink-spawn-safe — if you're on a current version and
 
 The Alethia runtime (which this bridge connects to) is local-only **by architecture**, not by default setting. Its signed binary refuses to navigate to any origin outside `file://`, `localhost`, `127.0.0.1`, `.local`, and RFC1918 private ranges. The allowlist is a compile-time constant — **not a CLI flag, env var, MCP argument, profile, or UI toggle**. For partner-specific production-origin access we issue custom-signed builds; we do not ship configurability.
 
-Why this shape: Alethia's speed and stealth profile would make it an effective abuse tool if turned against the open web. It does not become that tool. Full posture at [vitron.ai/safety](https://vitron.ai/safety). Abuse reports: **gatekeeper@vitron.ai**.
+**Full security posture** — threat model, cryptographic chain of custody, supply-chain posture, update cadence, disclosure process — is at [`SECURITY.md`](./SECURITY.md).
+
+Abuse reports + vulnerability disclosure: **`gatekeeper@vitron.ai`**.
 
 ---
 

package/demo/admin-panel.html

@@ -5,42 +5,332 @@
   <title>Admin Panel — Classified</title>
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: -apple-system, sans-serif; background: #0a0e17; color: #e2e8f0; min-height: 100vh; padding: 1.5rem; }
-    .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e293b; padding-bottom: 1rem; margin-bottom: 1.5rem; }
-    h1 { font-size: 1.4rem; }
-    .classification { background: #991b1b; color: #fecaca; padding: 0.3rem 0.8rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
-    .user-info { color: #64748b; font-size: 0.85rem; }
-    .grid { display: grid; grid-template-columns: 250px 1fr; gap: 1.5rem; }
-    .sidebar { display: flex; flex-direction: column; gap: 0.5rem; }
-    .nav-item { padding: 0.6rem 0.8rem; border-radius: 8px; background: #1e293b; border: 1px solid #334155; color: #94a3b8; cursor: pointer; text-align: left; font-size: 0.9rem; }
-    .nav-item.active { background: #1e3a5f; border-color: #3b82f6; color: #e2e8f0; }
-    .content { border: 1px solid #1e293b; border-radius: 12px; background: #111827; padding: 1.5rem; }
-    .content h2 { margin-bottom: 1rem; font-size: 1.2rem; }
-    table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
-    th { text-align: left; padding: 0.6rem; color: #64748b; border-bottom: 1px solid #1e293b; font-weight: 600; }
-    td { padding: 0.6rem; border-bottom: 1px solid #0f172a; }
-    .status-active { color: #34d399; }
-    .status-suspended { color: #f87171; }
-    .status-pending { color: #fbbf24; }
-    .actions { display: flex; gap: 0.4rem; }
-    .actions button { padding: 0.3rem 0.6rem; border-radius: 6px; border: none; font-size: 0.8rem; cursor: pointer; }
-    .btn-view { background: #1e3a5f; color: #93c5fd; }
-    .btn-suspend { background: #7f1d1d; color: #fca5a5; }
-    .btn-delete { background: #991b1b; color: #fecaca; }
-    .btn-approve { background: #14532d; color: #86efac; }
-    .audit-log { margin-top: 1rem; font-family: monospace; font-size: 0.8rem; background: #0a0e17; border: 1px solid #1e293b; border-radius: 8px; padding: 0.8rem; max-height: 200px; overflow-y: auto; }
-    .audit-entry { padding: 0.2rem 0; color: #64748b; }
-    .audit-entry .timestamp { color: #475569; }
-    .audit-entry .action { color: #fbbf24; }
-    .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; align-items: center; justify-content: center; }
-    .modal.visible { display: flex; }
-    .modal-content { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 1.5rem; max-width: 400px; text-align: center; }
-    .modal-content h3 { color: #f87171; margin-bottom: 0.8rem; }
-    .modal-content p { color: #94a3b8; margin-bottom: 1rem; }
-    .modal-actions { display: flex; gap: 0.8rem; justify-content: center; }
-    .modal-actions button { padding: 0.5rem 1.2rem; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; }
-    .btn-cancel { background: #334155; color: #e2e8f0; }
-    .btn-confirm-delete { background: #991b1b; color: white; }
+    :root {
+      --bg: #08070d;
+      --bg-1: #110e1c;
+      --bg-2: #1a1428;
+      --edge: rgba(255,255,255,.06);
+      --edge-strong: rgba(255,255,255,.12);
+      --ink: #f5f0ff;
+      --ink-2: #d8d3e8;
+      --ink-muted: #a8a0c5;
+      --ink-faint: #6b6488;
+      --purple: #a78bfa;
+      --purple-bright: #c4b5fd;
+      --purple-deep: #5b21b6;
+      --pink: #f0abfc;
+      --indigo: #818cf8;
+      --emerald: #10b981;
+      --emerald-bright: #34d399;
+      --red: #ef4444;
+      --red-bright: #f87171;
+      --amber: #f59e0b;
+      --amber-bright: #fbbf24;
+      --teal: #14b8a6;
+    }
+    html { color-scheme: dark; }
+    body {
+      font-family: "SF Pro Display", -apple-system, system-ui, sans-serif;
+      background:
+        radial-gradient(ellipse 70% 40% at 10% -10%, rgba(167,139,250,.10), transparent 70%),
+        radial-gradient(ellipse 60% 40% at 90% 110%, rgba(240,171,252,.06), transparent 70%),
+        var(--bg);
+      background-attachment: fixed;
+      color: var(--ink-2);
+      min-height: 100vh;
+      padding: 1.5rem 1.75rem 2rem;
+      font-size: 13.5px;
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    /* Header */
+    .header {
+      display: flex; justify-content: space-between; align-items: center;
+      padding-bottom: 16px;
+      margin-bottom: 22px;
+      border-bottom: 1px solid var(--edge);
+    }
+    .header > div { display: flex; flex-direction: column; gap: 4px; }
+    h1 {
+      font-size: 19px; font-weight: 700;
+      color: var(--ink); letter-spacing: -.015em;
+      display: inline-flex; align-items: center; gap: 10px;
+    }
+    h1::before {
+      content: ""; width: 8px; height: 8px; border-radius: 999px;
+      background: var(--purple);
+      box-shadow: 0 0 12px rgba(167,139,250,.7);
+    }
+    .user-info {
+      color: var(--ink-faint);
+      font-size: 12px;
+      font-family: ui-monospace, "SF Mono", monospace;
+    }
+    .classification {
+      font-family: ui-monospace, "SF Mono", monospace;
+      background: linear-gradient(135deg, rgba(127,29,29,.85), rgba(127,29,29,.55));
+      color: #fecaca;
+      padding: 5px 10px;
+      border-radius: 4px;
+      font-size: 10.5px;
+      font-weight: 800;
+      letter-spacing: .12em;
+      text-transform: uppercase;
+      border: 1px solid rgba(252,165,165,.3);
+    }
+
+    /* Layout */
+    .grid {
+      display: grid;
+      grid-template-columns: 240px 1fr;
+      gap: 18px;
+      align-items: start;
+    }
+
+    /* Sidebar */
+    .sidebar {
+      display: flex; flex-direction: column;
+      gap: 4px;
+      padding: 8px;
+      border-radius: 12px;
+      background: linear-gradient(180deg, var(--bg-1), rgba(17,14,28,.5));
+      border: 1px solid var(--edge);
+      box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
+    }
+    .nav-item {
+      position: relative;
+      padding: 10px 14px 10px 18px;
+      border-radius: 8px;
+      background: transparent;
+      border: 1px solid transparent;
+      color: var(--ink-muted);
+      cursor: pointer;
+      text-align: left;
+      font: inherit;
+      font-size: 13px;
+      font-weight: 500;
+      transition: background .14s, color .14s, border-color .14s;
+    }
+    .nav-item::before {
+      content: "";
+      position: absolute;
+      left: 6px; top: 14px; bottom: 14px;
+      width: 2px;
+      border-radius: 2px;
+      background: transparent;
+      transition: background .14s;
+    }
+    .nav-item:hover {
+      background: rgba(255,255,255,.04);
+      color: var(--ink);
+    }
+    .nav-item.active {
+      background: rgba(167,139,250,.10);
+      color: var(--purple-bright);
+      font-weight: 600;
+    }
+    .nav-item.active::before {
+      background: var(--purple);
+      box-shadow: 0 0 8px rgba(167,139,250,.7);
+    }
+
+    /* Content panel */
+    .content {
+      border: 1px solid var(--edge);
+      border-radius: 14px;
+      background: linear-gradient(180deg, var(--bg-1), rgba(17,14,28,.4));
+      padding: 22px 24px;
+      box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
+    }
+    .content h2 {
+      font-size: 15px; font-weight: 700;
+      color: var(--ink);
+      margin-bottom: 16px;
+      letter-spacing: -.01em;
+      display: inline-flex; align-items: center; gap: 8px;
+    }
+    .content h2::before {
+      content: ""; width: 4px; height: 4px; border-radius: 999px;
+      background: var(--purple);
+      box-shadow: 0 0 6px var(--purple);
+    }
+
+    /* Table */
+    table { width: 100%; border-collapse: collapse; font-size: 13px; }
+    th {
+      text-align: left;
+      padding: 10px 12px;
+      color: var(--ink-faint);
+      border-bottom: 1px solid var(--edge);
+      font-weight: 600;
+      font-size: 10.5px;
+      text-transform: uppercase;
+      letter-spacing: .08em;
+    }
+    td {
+      padding: 11px 12px;
+      border-bottom: 1px solid rgba(255,255,255,.03);
+      color: var(--ink-2);
+      vertical-align: middle;
+    }
+    tbody tr { transition: background .12s; }
+    tbody tr:hover { background: rgba(167,139,250,.04); }
+    tbody tr:last-child td { border-bottom: none; }
+
+    /* Status pills */
+    .status-active, .status-suspended, .status-pending {
+      display: inline-block;
+      padding: 3px 10px;
+      border-radius: 999px;
+      font-size: 11px; font-weight: 600;
+      font-family: ui-monospace, "SF Mono", monospace;
+      letter-spacing: .02em;
+    }
+    .status-active {
+      color: var(--emerald-bright);
+      background: rgba(16,185,129,.10);
+      border: 1px solid rgba(16,185,129,.3);
+    }
+    .status-suspended {
+      color: var(--red-bright);
+      background: rgba(239,68,68,.10);
+      border: 1px solid rgba(239,68,68,.3);
+    }
+    .status-pending {
+      color: var(--amber-bright);
+      background: rgba(245,158,11,.10);
+      border: 1px solid rgba(245,158,11,.3);
+    }
+
+    /* Action buttons */
+    .actions { display: flex; gap: 6px; }
+    .actions button {
+      padding: 5px 11px;
+      border-radius: 6px;
+      border: 1px solid var(--edge);
+      background: rgba(255,255,255,.02);
+      color: var(--ink-2);
+      cursor: pointer;
+      font: inherit;
+      font-size: 11.5px;
+      font-weight: 600;
+      transition: background .12s, border-color .12s, color .12s, transform .08s;
+    }
+    .actions button:hover { background: rgba(255,255,255,.05); border-color: var(--edge-strong); }
+    .actions button:active { transform: translateY(1px); }
+    .btn-view {
+      color: var(--indigo);
+      border-color: rgba(129,140,248,.35);
+      background: rgba(129,140,248,.06);
+    }
+    .btn-view:hover { background: rgba(129,140,248,.14); border-color: var(--indigo); }
+    .btn-suspend {
+      color: var(--amber-bright);
+      border-color: rgba(245,158,11,.4);
+      background: rgba(245,158,11,.06);
+    }
+    .btn-suspend:hover { background: rgba(245,158,11,.14); border-color: var(--amber); }
+    .btn-delete {
+      color: var(--red-bright);
+      border-color: rgba(239,68,68,.4);
+      background: rgba(239,68,68,.06);
+    }
+    .btn-delete:hover { background: rgba(239,68,68,.14); border-color: var(--red); }
+    .btn-approve {
+      color: var(--emerald-bright);
+      border-color: rgba(16,185,129,.4);
+      background: rgba(16,185,129,.06);
+    }
+    .btn-approve:hover { background: rgba(16,185,129,.14); border-color: var(--emerald); }
+
+    /* Audit log */
+    .audit-log {
+      margin-top: 18px;
+      font-family: ui-monospace, "SF Mono", monospace;
+      font-size: 11.5px;
+      background: rgba(255,255,255,.02);
+      border: 1px solid var(--edge);
+      border-radius: 10px;
+      padding: 12px 14px;
+      max-height: 220px;
+      overflow-y: auto;
+    }
+    .audit-entry {
+      padding: 4px 0;
+      color: var(--ink-muted);
+      display: flex; gap: 10px;
+      border-bottom: 1px dashed rgba(255,255,255,.03);
+    }
+    .audit-entry:last-child { border-bottom: none; }
+    .audit-entry .timestamp { color: var(--ink-faint); white-space: nowrap; }
+    .audit-entry .action {
+      color: var(--purple-bright);
+      font-weight: 700;
+      letter-spacing: .04em;
+      min-width: 96px;
+      flex-shrink: 0;
+    }
+
+    /* Modal */
+    .modal {
+      display: none;
+      position: fixed; inset: 0;
+      background: rgba(8,7,13,.85);
+      backdrop-filter: blur(8px);
+      z-index: 100;
+      align-items: center; justify-content: center;
+    }
+    .modal.visible { display: flex; animation: modalFadeIn .2s ease-out; }
+    @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
+    .modal-content {
+      background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
+      border: 1px solid rgba(239,68,68,.45);
+      border-radius: 14px;
+      padding: 24px 26px;
+      max-width: 440px;
+      text-align: center;
+      box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
+    }
+    .modal-content h3 {
+      color: var(--red-bright);
+      margin-bottom: 10px;
+      font-size: 16px;
+      font-weight: 700;
+    }
+    .modal-content p {
+      color: var(--ink-2);
+      margin-bottom: 18px;
+      font-size: 13px;
+      line-height: 1.55;
+    }
+    .modal-actions { display: flex; gap: 10px; justify-content: center; }
+    .modal-actions button {
+      padding: 9px 18px;
+      border-radius: 8px;
+      border: 1px solid var(--edge);
+      cursor: pointer;
+      font: inherit;
+      font-size: 12.5px;
+      font-weight: 600;
+      transition: background .12s, border-color .12s, color .12s, transform .08s;
+    }
+    .modal-actions button:active { transform: translateY(1px); }
+    .btn-cancel {
+      background: rgba(255,255,255,.04);
+      color: var(--ink-2);
+      border-color: var(--edge-strong);
+    }
+    .btn-cancel:hover { background: rgba(255,255,255,.08); color: var(--ink); }
+    .btn-confirm-delete {
+      background: linear-gradient(180deg, var(--red-bright), var(--red));
+      color: #fff;
+      border-color: var(--red);
+      font-weight: 700;
+    }
+    .btn-confirm-delete:hover { filter: brightness(1.08); }
+
+    ::selection { background: rgba(167,139,250,.3); }
   </style>
 </head>
 <body>