diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec1da65..9e13aff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,47 @@ CalVer image tags (`stable-YYYY.MM.N`, `dev-YYYY.MM.N`) are produced for every C
 
 ## [Unreleased]
 
+## [0.54.10] — 2026-05-14
+
+### Changed
+- Web UI design system unified: single stylesheet (`style-custom.css`),
+  canonical primitives for buttons, form controls, page headers, tables,
+  empty states, toasts, and stat cards. Top-nav Admin entry now shares
+  styling 1:1 with sibling links (font, color, padding, hover, active
+  state) — previously a `<button class="app-nav-menu-trigger">` reset
+  inherited font + color away from the sibling `<a class="app-nav-link">`
+  rules. Inline dropdown JS extracted from `_app_header.html` into
+  `app/web/static/app.js` (also hosts `window.appToast({kind, msg, timeout})`
+  for the new toast primitive).
+- `static_url()` template helper now appends `?v=<file_mtime>` to
+  `/static/<path>` so CSS/JS edits auto-invalidate browser + proxy caches
+  on redeploy without operator intervention.
+
+### Removed
+- `app/web/static/style.css` — content folded into `style-custom.css` so
+  the web UI ships from a single stylesheet. Legacy classes
+  (`.btn-primary-v2`, `.btn-secondary-v2`, `.btn-ghost-v2`, `.modal-btn`,
+  `.users-table`, `.gp-table`, `.marketplaces-table`, `.audit-table`,
+  `.users-search`, `.marketplaces-search`, `.kb-search`, `.filters-card`)
+  removed from templates and CSS; 8 admin templates migrated to canonical
+  primitives. Operators on older builds who served the file directly will
+  hit a 404 — re-run the deploy so the index renders against
+  `style-custom.css` only.
+
+### Internal
+- New `tests/test_design_system_contract.py` (9 invariants): single
+  `:root` block, no template references the deleted `style.css`,
+  canonical primitives declared, no deprecated class names in templates,
+  `app.js` loaded by `base.html` only. Plus 3 helper-level unit tests for
+  the class-attribute tokenizer (multi-line attrs, Jinja-conditional
+  fragments, false-positive prose).
+- `.data-table` selector list extended to cover 13 bespoke `-table`
+  classes (`.ad-table`, `.ea-table`, `.md-table`, `.members-table`,
+  `.obs-table`, `.overview-stats-table`, `.registry-table`,
+  `.sample-table`, `.sched-table`, `.sess-table`, `.sub-table`,
+  `.subs-table`, `.ud-table`) so tables in 12 untouched templates render
+  with the same baseline chrome.
+
 ### Added
 
 - **Per-analyst Stats dashboard at `/me/stats`.** Four-tab page showing
diff --git a/app/web/router.py b/app/web/router.py
index 0cd8ac6..c8c68ed 100644
--- a/app/web/router.py
+++ b/app/web/router.py
@@ -40,6 +40,25 @@ def _resolved_home_route() -> str:
     return get_home_route()
 
 
+_STATIC_DIR = Path(__file__).resolve().parent / "static"
+
+
+def _static_url(path: str) -> str:
+    """Build /static/<path> with a cache-buster query string.
+
+    Appends ``?v=<file_mtime_int>`` so a redeploy that changes a CSS/JS file
+    invalidates browser + proxy caches without operator intervention.
+    Missing files return the bare URL — FastAPI's StaticFiles will surface
+    the 404 normally. Cheap (one ``os.stat`` per template variable use).
+    """
+    full = _STATIC_DIR / path
+    try:
+        v = int(full.stat().st_mtime)
+        return f"/static/{path}?v={v}"
+    except OSError:
+        return f"/static/{path}"
+
+
 logger = logging.getLogger(__name__)
 router = APIRouter(tags=["web"])
 
@@ -73,13 +92,15 @@ class _SafeEncoder(_json.JSONEncoder):
 templates.env.policies["json.dumps_function"] = lambda obj, **kw: _json.dumps(obj, cls=_SafeEncoder, **kw)
 
 
-def _humanbytes(value) -> str:
+def _humanbytes(value, precision: int = 2) -> str:
     """Render a byte count as the largest binary-prefixed unit it fits in.
 
-    Below 1 KiB → integer bytes; otherwise two decimal places of KB / MB / GB
-    (binary, 1024-based). Used by the Store detail template; intentionally
-    permissive about input type so missing / undefined values render as
-    ``0 B`` rather than crashing the page.
+    Below 1 KiB → integer bytes; otherwise ``precision`` decimal places of
+    KB / MB / GB / TB (binary, 1024-based). Used by the Store detail
+    template (default 2-decimal precision for fine-grained file sizes) and
+    by the /dashboard stat tiles (1-decimal precision for headline numbers).
+    Intentionally permissive about input type so missing / undefined values
+    render as ``0 B`` rather than crashing the page.
     """
     try:
         n = int(value or 0)
@@ -89,12 +110,15 @@ def _humanbytes(value) -> str:
         return f"{n} B"
     kb = n / 1024
     if kb < 1024:
-        return f"{kb:.2f} KB"
+        return f"{kb:.{precision}f} KB"
     mb = kb / 1024
     if mb < 1024:
-        return f"{mb:.2f} MB"
+        return f"{mb:.{precision}f} MB"
     gb = mb / 1024
-    return f"{gb:.2f} GB"
+    if gb < 1024:
+        return f"{gb:.{precision}f} GB"
+    tb = gb / 1024
+    return f"{tb:.{precision}f} TB"
 
 
 templates.env.filters["humanbytes"] = _humanbytes
@@ -435,7 +459,7 @@ def _build_context(
         "config": ConfigProxy,
         "user": _flex(user) if user else _FlexDict(),
         "now": datetime.now,
-        "static_url": lambda path: f"/static/{path}",
+        "static_url": _static_url,
         # Flask compatibility shims for templates
         "get_flashed_messages": lambda **kwargs: [],
         "url_for": lambda endpoint, **kw: _url_for_shim(endpoint, **kw),
@@ -614,9 +638,18 @@ async def dashboard(
     enabled_datasets = settings_repo.get_enabled_datasets(user["id"])
     datasets = get_datasets()
 
-    # Stats
-    total_tables = len(all_states)
+    # Stats. `total_tables` counts REGISTERED business tables, not synced
+    # ones (a registry of 30 with 0 ever synced would otherwise render as
+    # "0"). Internal source_type tables (agnes_*) live in their own card on
+    # /catalog and are excluded from the headline counter. Columns + size
+    # come from sync_state, which is the canonical source for "what's
+    # actually on disk locally".
+    total_tables = conn.execute(
+        "SELECT COUNT(*) FROM table_registry WHERE COALESCE(source_type, '') != 'internal'"
+    ).fetchone()[0]
     total_rows = sum(s.get("rows", 0) or 0 for s in all_states)
+    total_columns = sum(s.get("columns", 0) or 0 for s in all_states)
+    total_size_bytes = sum(s.get("file_size_bytes", 0) or 0 for s in all_states)
 
     # Build user_info object expected by dashboard template
     is_admin = is_user_admin(user["id"], conn)
@@ -649,12 +682,14 @@ async def dashboard(
         data_stats={
             "tables": total_tables,
             "total_tables": total_tables,
-            "columns": 0,
+            "columns": total_columns,
             "rows_display": f"{total_rows:,}" if total_rows else "0",
-            "size_display": "0 MB",
-            "unstructured_display": "0 MB",
+            "size_display": _humanbytes(total_size_bytes, precision=1) if total_size_bytes else "0 MB",
             "total_rows": total_rows,
-            "last_updated": None,
+            "last_updated": max(
+                (s.get("last_sync") for s in all_states if s.get("last_sync")),
+                default=None,
+            ),
             "remote_tables": 0,
             "local_tables": total_tables,
         },
@@ -877,10 +912,15 @@ async def catalog(
         internal_tables = []
         logger.warning(f"Could not load catalog: {e}")
 
-    # Build data_stats for catalog template (business-data card header)
+    # Build data_stats for catalog template (business-data card header).
+    # `total_tables` must count REGISTERED business tables, not just
+    # synced ones — a registry of 30 tables with 0 ever synced would
+    # otherwise render as "0 tables" on the Core Business Data card.
+    # `internal` source_type tables render in their own card; exclude
+    # them here so the Core counter doesn't double-count system tables.
     total_rows = sum(s.get("rows", 0) or 0 for s in all_states)
     data_stats = {
-        "total_tables": len(all_states),
+        "total_tables": len(tables),
         "total_rows": total_rows,
         "total_columns": 0,
         "total_size": sum(s.get("file_size_bytes", 0) or 0 for s in all_states),
diff --git a/app/web/static/app.js b/app/web/static/app.js
new file mode 100644
index 0000000..4050425
--- /dev/null
+++ b/app/web/static/app.js
@@ -0,0 +1,84 @@
+/* Global UI helpers loaded by base.html (not by base_login.html — login pages
+   have no nav and no toasts, so the helpers aren't reachable there).
+   Two responsibilities for now:
+   - wireDropdown: open/close + click-outside + Escape for the user menu and
+     the Admin nav dropdown. Used by _app_header.html.
+   - More helpers (window.appToast, etc.) added later as the design system
+     primitives need JS sidecars. */
+(function () {
+    "use strict";
+
+    function wireDropdown(triggerId, panelId) {
+        var trigger = document.getElementById(triggerId);
+        var panel = document.getElementById(panelId);
+        if (!trigger || !panel) return;
+        function setOpen(open) {
+            trigger.setAttribute("aria-expanded", open ? "true" : "false");
+            if (open) {
+                panel.removeAttribute("hidden");
+            } else {
+                panel.setAttribute("hidden", "");
+            }
+        }
+        trigger.addEventListener("click", function () {
+            // No stopPropagation — let the click bubble to the document
+            // handler so any OTHER open dropdown's handler can close
+            // itself ("only one menu open at a time" behaviour).
+            setOpen(trigger.getAttribute("aria-expanded") !== "true");
+        });
+        document.addEventListener("click", function (e) {
+            // Use trigger.contains(target) instead of strict equality —
+            // clicking the chevron <svg> inside the button reports the
+            // svg / path as e.target, which would otherwise trip the
+            // close branch immediately after opening.
+            if (!panel.contains(e.target) && !trigger.contains(e.target)) {
+                setOpen(false);
+            }
+        });
+        document.addEventListener("keydown", function (e) {
+            if (e.key === "Escape") {
+                setOpen(false);
+                trigger.focus();
+            }
+        });
+    }
+
+    // Toast helper — paired with .toast / .toast-container CSS in style-custom.css.
+    // Usage: window.appToast({kind: "success", msg: "Saved", timeout: 4000})
+    function ensureToastContainer() {
+        var c = document.getElementById("appToastContainer");
+        if (c) return c;
+        c = document.createElement("div");
+        c.id = "appToastContainer";
+        c.className = "toast-container";
+        document.body.appendChild(c);
+        return c;
+    }
+    function appToast(opts) {
+        opts = opts || {};
+        var kind = opts.kind || "info";
+        var msg = String(opts.msg || "");
+        var timeout = opts.timeout == null ? 4000 : opts.timeout;
+        var el = document.createElement("div");
+        el.className = "toast is-" + kind;
+        el.textContent = msg;
+        el.addEventListener("click", function () { el.remove(); });
+        ensureToastContainer().appendChild(el);
+        if (timeout > 0) setTimeout(function () { el.remove(); }, timeout);
+        return el;
+    }
+
+    window.appUI = { wireDropdown: wireDropdown };
+    window.appToast = appToast;
+
+    // Auto-wire the two dropdowns shipped from _app_header.html.
+    function init() {
+        wireDropdown("userMenuTrigger", "userMenuPanel");
+        wireDropdown("adminNavTrigger", "adminNavPanel");
+    }
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", init);
+    } else {
+        init();
+    }
+})();
diff --git a/app/web/static/style-custom.css b/app/web/static/style-custom.css
index 6485382..337f1d2 100644
--- a/app/web/static/style-custom.css
+++ b/app/web/static/style-custom.css
@@ -82,6 +82,17 @@
     --width-narrow: 800px;
     --width-app: 1280px;
     --width-wide: 1400px;
+
+    /* Legacy token aliases — keep absorbed style.css rules rendering
+       until Task 16 cleanup. Each legacy name maps onto its modern
+       equivalent so every absorbed selector resolves to a real value
+       instead of falling back to `unset`. */
+    --bg: var(--background);
+    --card-bg: var(--surface);
+    --text: var(--text-primary);
+    --text-light: var(--text-secondary);
+    --secondary: var(--text-secondary);
+    --radius: var(--radius-lg);
 }
 
 * {
@@ -99,6 +110,1085 @@ body {
     min-height: 100vh;
 }
 
+/* =====================================================
+   Absorbed from the deleted app/web/static/style.css.
+   Kept verbatim here so legacy classes used by login/auth
+   pages, error pages, and password-setup pages keep
+   rendering. Individual rules retire in the design-pass
+   migration tasks; final cleanup in Task 16 removes the
+   ones no template references after that sweep.
+   ===================================================== */
+
+.container {
+    /* Canonical page-shell width. Bumped from the legacy 800px (which
+       was a relic of single-form login pages) to --width-app (1280px)
+       — generous enough for admin dashboards, dense tables, and
+       catalog grids without feeling wasteful at 1440-1600px screens.
+       Pages that genuinely need narrower line-length (setup wizards,
+       single-form flows) opt in via .container--narrow. */
+    max-width: var(--width-app);
+    margin: 0 auto;
+    padding: var(--space-6) var(--space-5);
+}
+
+/* Width modifiers — opt-in alternatives to the default page shell. */
+.container--narrow { max-width: var(--width-narrow); }   /* 800px — long-form reading, setup flows */
+.container--wide   { max-width: var(--width-wide); }     /* 1400px — admin index lists, marketplace grids */
+.container--full   { max-width: none; padding-left: var(--space-4); padding-right: var(--space-4); }
+
+/* Dashboard */
+.dashboard h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 24px;
+    color: var(--text);
+}
+
+/* Header */
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 0;
+    margin-bottom: 24px;
+    border-bottom: 1px solid var(--border);
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+a.logo { text-decoration: none; color: inherit; display: block; }
+a.logo:hover h1 { color: var(--primary); }
+
+.logo h1 {
+    font-size: 1.375rem;
+    font-weight: 600;
+    color: var(--text);
+    margin: 0;
+    letter-spacing: -0.02em;
+}
+
+.logo .subtitle {
+    font-size: 0.8125rem;
+    color: var(--text-light);
+    margin-top: 2px;
+}
+
+nav {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.875rem;
+    color: var(--text-light);
+}
+
+.avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+}
+
+/* Buttons */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 20px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-decoration: none;
+    border-radius: var(--radius);
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+.btn-primary {
+    background-color: var(--primary);
+    color: white;
+    font-weight: 500;
+    transition: all 0.15s ease;
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-dark);
+    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3);
+}
+
+.btn-primary:active {
+    transform: scale(0.98);
+}
+
+.btn-secondary {
+    background-color: transparent;
+    color: var(--secondary);
+    border: 1px solid var(--border);
+}
+
+.btn-secondary:hover {
+    background-color: var(--bg);
+}
+
+.btn-sm {
+    padding: 6px 12px;
+    font-size: 0.75rem;
+}
+
+.btn-google {
+    background-color: white;
+    color: var(--text);
+    border: 1px solid var(--border);
+    padding: 14px 28px;
+    font-size: 1rem;
+    font-weight: 500;
+    width: 100%;
+    max-width: 280px;
+    transition: all 0.2s ease;
+}
+
+.btn-google:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+    border-color: #c4c4c4;
+    background-color: #fafafa;
+}
+
+.btn-google:active {
+    transform: scale(0.98);
+}
+
+.google-icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+}
+
+/* Cards */
+.card {
+    background: var(--card-bg);
+    border-radius: var(--radius);
+    padding: 24px;
+    margin-bottom: 20px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+    border: 1px solid var(--border);
+}
+
+.card h3 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: var(--text);
+    letter-spacing: -0.01em;
+}
+
+.card p {
+    color: var(--text-light);
+    margin-bottom: 12px;
+}
+
+.card-error {
+    border-left: 4px solid var(--error);
+    background-color: #fff8f8;
+}
+
+.card-highlight {
+    border-left: 4px solid var(--primary);
+    background-color: #f8faff;
+}
+
+.card-ai {
+    border-left: 4px solid var(--success);
+    background-color: #f8fdf8;
+}
+
+/* Manual setup collapsible */
+.manual-setup {
+    margin-top: 16px;
+}
+
+.manual-setup summary {
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: var(--text-light);
+    padding: 8px 0;
+}
+
+.manual-setup summary:hover {
+    color: var(--text);
+}
+
+.manual-setup .card {
+    margin-top: 12px;
+    margin-bottom: 0;
+}
+
+.card-error h3 {
+    color: var(--error);
+}
+
+.error-message {
+    color: var(--error);
+    font-weight: 500;
+}
+
+/* Info grid */
+.info-grid {
+    display: grid;
+    gap: 12px;
+}
+
+.info-item {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.info-item .label {
+    font-weight: 500;
+    min-width: 140px;
+}
+
+.info-item .value {
+    color: var(--text-light);
+}
+
+/* Badges */
+.badge {
+    display: inline-block;
+    padding: 2px 8px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-radius: 4px;
+    background-color: var(--bg);
+    color: var(--text-light);
+    margin-right: 4px;
+}
+
+.badge-analyst {
+    background-color: #e8f5e9;
+    color: #2e7d32;
+}
+
+.badge-privileged {
+    background-color: #fff3e0;
+    color: #ef6c00;
+}
+
+.badge-admin {
+    background-color: #e3f2fd;
+    color: #1565c0;
+}
+
+/* Code blocks */
+code {
+    font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
+    font-size: 0.875rem;
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+.code-block {
+    background-color: #1a1a2e;
+    color: #e4e4e7;
+    padding: 14px 16px;
+    border-radius: var(--radius);
+    overflow-x: auto;
+    margin: 12px 0;
+    border: 1px solid #2d2d44;
+}
+
+.code-block code,
+.code-block pre {
+    background: transparent;
+    padding: 0;
+    font-size: 0.8125rem;
+    color: inherit;
+    line-height: 1.6;
+}
+
+.code-block pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+.code-block.code-compact {
+    padding: 10px 14px;
+    margin: 6px 0;
+}
+
+/* Command rows for Quick Start */
+.command-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 8px;
+}
+
+.command-row .command-label {
+    font-weight: 500;
+    font-size: 0.875rem;
+    min-width: 70px;
+    color: var(--text-light);
+}
+
+.command-row .code-block {
+    flex: 1;
+    margin: 0;
+}
+
+/* SSH config details/summary */
+.ssh-config-details {
+    margin-top: 16px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border);
+}
+
+.ssh-config-details summary {
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--primary);
+    padding: 4px 0;
+    user-select: none;
+}
+
+.ssh-config-details summary:hover {
+    color: var(--primary-dark);
+}
+
+.ssh-config-details[open] summary {
+    margin-bottom: 8px;
+}
+
+.ssh-config-details .help-text {
+    margin-top: 4px;
+    margin-bottom: 4px;
+}
+
+/* Forms */
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 8px;
+}
+
+.form-group textarea {
+    width: 100%;
+    padding: 12px 14px;
+    font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    resize: vertical;
+    min-height: 100px;
+    background-color: var(--card-bg);
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.form-group textarea:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
+}
+
+.form-group textarea::placeholder {
+    color: #9aa0a6;
+}
+
+.help-text {
+    font-size: 0.8125rem;
+    color: var(--text-light);
+    margin-top: 8px;
+    line-height: 1.5;
+}
+
+.help-text strong {
+    color: var(--text);
+    font-weight: 500;
+}
+
+/* Flash messages */
+.flash-messages {
+    margin-bottom: 24px;
+}
+
+.flash {
+    padding: 14px 18px;
+    border-radius: var(--radius);
+    margin-bottom: 12px;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.flash-success {
+    background-color: #e8f5e9;
+    color: #2e7d32;
+    border: 1px solid #c8e6c9;
+}
+
+.flash-error {
+    background-color: #ffebee;
+    color: #c62828;
+    border: 1px solid #ffcdd2;
+}
+
+.flash-info {
+    background-color: #e3f2fd;
+    color: #1565c0;
+    border: 1px solid #bbdefb;
+}
+
+.flash-warning {
+    background-color: #fff3e0;
+    color: #ef6c00;
+    border: 1px solid #ffe0b2;
+}
+
+/* Login page */
+.login-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 60vh;
+    padding: 20px;
+}
+
+.login-card {
+    background: var(--card-bg);
+    border-radius: 12px;
+    padding: 48px 40px;
+    text-align: center;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+    max-width: 640px;
+    width: 100%;
+    border: 1px solid var(--border);
+}
+
+.login-card h2 {
+    margin-bottom: 12px;
+    font-size: 1.75rem;
+    font-weight: 600;
+    color: var(--text);
+}
+
+.login-description {
+    color: var(--text-light);
+    margin-bottom: 32px;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.login-steps {
+    margin-top: 24px;
+    padding-top: 20px;
+    border-top: 1px solid var(--border);
+    text-align: left;
+}
+
+.login-steps .step {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.875rem;
+    color: var(--text-light);
+    padding: 6px 0;
+}
+
+.login-steps .step-num,
+.steps-horizontal .step-num {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    background-color: var(--primary);
+    color: white;
+    border-radius: 50%;
+    font-size: 0.75rem;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+/* Inline steps for compact layout */
+.steps-inline {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--border);
+}
+
+.steps-inline .step-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.8125rem;
+    color: var(--text-light);
+}
+
+/* Form row for inline layout */
+.form-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.form-group-inline {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 0;
+}
+
+.form-group-inline label {
+    margin-bottom: 0;
+}
+
+/* AI hint inline */
+.ai-hint {
+    margin-top: 16px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border);
+    font-size: 0.8125rem;
+    color: var(--text-light);
+}
+
+.ai-hint code {
+    display: inline;
+    font-size: 0.75rem;
+    color: var(--primary);
+}
+
+/* Manual setup compact */
+.manual-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    padding: 12px 0;
+}
+
+.manual-content code {
+    font-size: 0.75rem;
+}
+
+.manual-content .help-text {
+    margin: 0;
+    font-size: 0.75rem;
+}
+
+.login-note {
+    font-size: 0.8125rem;
+    color: var(--text-light);
+    margin-top: 12px;
+}
+
+/* Error page */
+.error-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 60vh;
+}
+
+.error-card {
+    text-align: center;
+}
+
+.error-card h2 {
+    font-size: 3rem;
+    margin-bottom: 16px;
+}
+
+.error-card p {
+    color: var(--text-light);
+    margin-bottom: 24px;
+}
+
+/* Footer */
+footer {
+    margin-top: 48px;
+    padding-top: 20px;
+    padding-bottom: 8px;
+    border-top: 1px solid var(--border);
+    text-align: center;
+    color: var(--text-light);
+    font-size: 0.8125rem;
+}
+
+/* Username box and copy buttons */
+.username-box {
+    background: #f0f9ff;
+    border: 2px solid #0ea5e9;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 16px 0;
+}
+
+.username-display {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 8px;
+}
+
+.username-display code {
+    font-size: 20px;
+    font-weight: bold;
+    color: #0369a1;
+    background: white;
+    padding: 8px 16px;
+    border-radius: 6px;
+    flex-grow: 1;
+}
+
+.btn-copy {
+    background: #0ea5e9;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    transition: all 0.2s ease;
+}
+
+.btn-copy:hover {
+    background: #0284c7;
+}
+
+.btn-copy:active {
+    transform: scale(0.98);
+}
+
+.btn-copy.copied {
+    background: #22c55e;
+}
+
+.btn-copy-inline {
+    background: #0ea5e9;
+    color: white;
+    border: none;
+    padding: 4px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    margin-left: 8px;
+    transition: background 0.15s ease;
+}
+
+.btn-copy-inline:hover {
+    background: #0284c7;
+}
+
+.btn-copy-block {
+    background: #0ea5e9;
+    color: white;
+    border: none;
+    padding: 10px 24px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    width: 100%;
+    transition: all 0.2s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.btn-copy-block:hover {
+    background: #0284c7;
+    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
+}
+
+.btn-copy-block:active {
+    transform: scale(0.98);
+}
+
+.btn-copy-block.copied {
+    background: #22c55e;
+}
+
+.username-preview {
+    font-size: 18px;
+    color: #64748b;
+}
+
+.info-box {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 12px;
+    margin-bottom: 16px;
+}
+
+.card-success {
+    border-left: 4px solid var(--success);
+    background-color: #f8fdf8;
+}
+
+.help-details {
+    margin-top: 12px;
+    font-size: 0.875rem;
+}
+
+.help-details summary {
+    cursor: pointer;
+    color: var(--primary);
+    padding: 4px 0;
+    font-weight: 500;
+}
+
+.help-details summary:hover {
+    color: var(--primary-dark);
+}
+
+.help-details ul {
+    margin-top: 8px;
+    margin-left: 20px;
+    color: var(--text-light);
+}
+
+.help-details li {
+    margin-bottom: 4px;
+}
+
+/* Claude Code Setup Card on Dashboard */
+.cc-setup-card {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    margin-bottom: 24px;
+}
+
+.cc-setup-card h3 {
+    color: white;
+    margin-bottom: 12px;
+}
+
+.cc-setup-card .cc-instruction {
+    color: rgba(255, 255, 255, 0.95);
+    margin-bottom: 16px;
+    font-size: 0.9375rem;
+    line-height: 1.6;
+}
+
+.cc-setup-card .cc-helper-text {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.8125rem;
+    margin-top: 12px;
+    margin-bottom: 0;
+}
+
+.cc-setup-card .btn-copy-block {
+    background: white;
+    color: #667eea;
+    font-weight: 600;
+    padding: 12px 24px;
+    border-radius: 6px;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    width: 100%;
+    transition: all 0.2s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.cc-setup-card .btn-copy-block:hover {
+    background: #f0f0f0;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.cc-setup-card .btn-copy-block:active {
+    transform: scale(0.98);
+}
+
+.cc-setup-card .btn-copy-block.copied {
+    background: #34a853;
+    color: white;
+}
+
+/* CLI hint in setup card */
+.cc-setup-card .cli-hint {
+    margin-top: 16px;
+    padding-top: 12px;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.cc-setup-card .cli-hint summary {
+    cursor: pointer;
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    padding: 4px 0;
+}
+
+.cc-setup-card .cli-hint summary:hover {
+    color: white;
+}
+
+.cc-setup-card .cli-hint .cli-content {
+    margin-top: 10px;
+    background: rgba(255, 255, 255, 0.1);
+    padding: 10px 12px;
+    border-radius: 6px;
+}
+
+.cc-setup-card .cli-hint .cli-content code {
+    display: block;
+    background: rgba(0, 0, 0, 0.2);
+    color: white;
+    padding: 8px 10px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    margin-bottom: 6px;
+}
+
+.cc-setup-card .cli-hint .cli-desc {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.75rem;
+}
+
+/* Support info banner */
+.support-info {
+    text-align: center;
+    color: var(--text-light);
+    font-size: 0.8125rem;
+    padding: 12px 16px;
+    background: #f8fafc;
+    border-radius: 6px;
+    margin-bottom: 20px;
+    border: 1px solid var(--border);
+}
+
+.support-info strong {
+    color: var(--text);
+}
+
+/* Auth tabs */
+.auth-tabs {
+    display: flex;
+    gap: 0;
+    margin-bottom: 24px;
+    border-bottom: 2px solid var(--border);
+}
+
+.auth-tab {
+    flex: 1;
+    padding: 12px 16px;
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    color: var(--text-light);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.auth-tab:hover {
+    color: var(--text);
+}
+
+.auth-tab.active {
+    color: var(--primary);
+    border-bottom-color: var(--primary);
+}
+
+.auth-tab-content {
+    display: none;
+}
+
+.auth-tab-content.active {
+    display: block;
+}
+
+.tab-description {
+    color: var(--text-light);
+    font-size: 0.875rem;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.signup-note {
+    color: var(--text-light);
+    font-size: 0.8125rem;
+    text-align: center;
+    margin-top: 16px;
+}
+
+/* Login form styles */
+.login-form {
+    text-align: left;
+    margin: 24px 0;
+}
+
+.login-form .form-group {
+    margin-bottom: 16px;
+}
+
+.login-form .form-group label {
+    display: block;
+    font-weight: 500;
+    font-size: 0.875rem;
+    margin-bottom: 6px;
+    color: var(--text);
+}
+
+.login-form .form-group input {
+    width: 100%;
+    padding: 12px 14px;
+    font-size: 0.9375rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background-color: var(--card-bg);
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.login-form .form-group input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
+}
+
+.login-form .form-group input::placeholder {
+    color: #9aa0a6;
+}
+
+.login-form .form-hint {
+    display: block;
+    font-size: 0.75rem;
+    color: var(--text-light);
+    margin-top: 4px;
+}
+
+.btn-block {
+    width: 100%;
+}
+
+.btn-link {
+    background: transparent;
+    color: var(--primary);
+    border: none;
+    padding: 8px 4px;
+    font-size: 0.875rem;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.btn-link:hover {
+    color: var(--primary-dark);
+    text-decoration: underline;
+}
+
+/* Login page links */
+.login-links {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    margin: 16px 0;
+    flex-wrap: wrap;
+}
+
+.login-links form {
+    margin: 0;
+}
+
+/* Request access form */
+.request-access-form,
+.reset-form {
+    display: inline;
+}
+
+/* Divider */
+.divider {
+    display: flex;
+    align-items: center;
+    margin: 24px 0;
+    color: var(--text-light);
+    font-size: 0.875rem;
+}
+
+.divider::before,
+.divider::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background-color: var(--border);
+}
+
+.divider span {
+    padding: 0 16px;
+}
+
+/* Account email display */
+.account-email {
+    background-color: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 12px 16px;
+    margin-bottom: 20px;
+    text-align: center;
+    font-size: 0.9375rem;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+    .container {
+        padding: 15px;
+    }
+
+    header {
+        flex-direction: column;
+        gap: 15px;
+        text-align: center;
+    }
+
+    .info-item {
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .info-item .label {
+        min-width: auto;
+    }
+
+    .username-display {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .username-display code {
+        text-align: center;
+    }
+
+    .login-links {
+        flex-direction: column;
+        gap: 8px;
+    }
+}
+
+
 /* Container */
 .container-v2 {
     max-width: 1400px;
@@ -2162,22 +3252,43 @@ a.app-header-logo:focus-visible {
     border: 2px solid var(--border, #e5e7eb);
 }
 
+/* Top-nav entries. Both <a class="app-nav-link"> and
+   <button class="app-nav-link app-nav-menu-trigger"> share this rule
+   so the Admin dropdown trigger renders identical to its siblings —
+   same font, color, padding, hover, active state. The button-element
+   resets (background/border/font-family) flow from here, so
+   .app-nav-menu-trigger no longer needs to strip <button> chrome
+   separately. */
 .app-nav-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
     font-size: 13px;
     font-weight: 500;
+    font-family: inherit;
     color: var(--text-secondary, #6b7280);
     text-decoration: none;
     padding: 6px 12px;
     border-radius: 8px;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    line-height: 1.2;
     transition: all 0.15s ease;
 }
 .app-nav-link:hover {
     color: var(--text-primary, #111827);
     background: var(--border-light, #f3f4f6);
 }
-.app-nav-link.is-active {
-    color: var(--primary, #6366f1);
-    background: var(--primary-light, #eef2ff);
+.app-nav-link.is-active,
+.app-nav-link[aria-expanded="true"] {
+    color: var(--primary, #0073D1);
+    background: var(--primary-light, rgba(0, 115, 209, 0.1));
+}
+.app-nav-link:focus { outline: none; }
+.app-nav-link:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(0, 115, 209, 0.25);
 }
 
 .app-btn-logout {
@@ -2239,24 +3350,9 @@ a.app-header-logo:focus-visible {
 
 /* ── Admin nav dropdown — same vocabulary as user menu, scoped under nav links ── */
 .app-nav-menu { position: relative; display: inline-flex; }
-.app-nav-menu-trigger {
-    display: inline-flex; align-items: center; gap: 4px;
-    background: none;
-    /* Strip the default <button> chrome — the .app-nav-link class above
-       supplies the visual; the button element only carries semantics. */
-    border: 0;
-    color: inherit;
-    font: inherit;
-    cursor: pointer;
-}
-.app-nav-menu-trigger:focus { outline: none; }
-.app-nav-menu-trigger:focus-visible {
-    outline: 2px solid var(--primary, #0073D1);
-    outline-offset: 2px;
-}
-.app-nav-menu-trigger[aria-expanded="true"] {
-    background: var(--border-light, #f3f4f6);
-}
+/* .app-nav-menu-trigger styling flows entirely from .app-nav-link above.
+   The trigger class is kept in markup as a hook for app.js dropdown
+   wiring and for targeting the chevron rotation below. */
 .app-nav-menu-chevron { color: currentColor; transition: transform 0.15s ease; }
 .app-nav-menu-trigger[aria-expanded="true"] .app-nav-menu-chevron { transform: rotate(180deg); }
 .app-nav-menu-panel {
@@ -2649,3 +3745,623 @@ a.news-cta:hover { background: #0056A3; }
     margin-bottom: 16px;
 }
 .format-guide .back-link:hover { color: var(--primary, #6366f1); }
+
+/* =====================================================
+   Canonical button family (Task 4)
+   .btn + .btn-primary | .btn-secondary | .btn-ghost | .btn-danger
+                       + .btn-sm | .btn-lg
+
+   Base .btn, .btn-primary, .btn-secondary, .btn-sm come from the
+   absorbed style.css block above (no change needed — they already use
+   the new tokens via the legacy-alias layer). This section appends
+   selector-list aliases for legacy class names (   .btn-secondary-v2, .btn-ghost-v2, .modal-btn) and defines the new
+   variants (.btn-ghost, .btn-danger, .btn-lg) that the legacy stylesheet
+   didn't ship.
+
+   Aliases removed in Task 16 once templates migrate to canonical names.
+   Cascade-order note: this section is the LAST in the file, so it wins
+   over both the absorbed legacy rules AND any earlier v2-suffixed rules
+   (e.g. .btn-primary-v2 hover color in the absorbed block). Adding
+   per-page <style> overrides will still beat this on equal-specificity
+   selectors due to source order — Tasks 8–14 strip those.
+   ===================================================== */
+
+.btn-primary {
+    background-color: var(--primary);
+    color: #fff;
+    border: 1px solid var(--primary);
+    transition: all 0.15s ease;
+}
+.btn-primary:hover,
+.btn-primary-v2:hover,
+.modal-btn.primary:hover {
+    background-color: var(--primary-dark);
+    border-color: var(--primary-dark);
+    box-shadow: 0 2px 8px rgba(0, 115, 209, 0.3);
+}
+
+.btn-secondary {
+    background-color: var(--surface);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+}
+.btn-secondary:hover,
+.btn-secondary-v2:hover,
+.modal-btn:not(.primary):not(.danger):hover {
+    background-color: var(--border-light);
+}
+
+.btn-ghost {
+    background-color: transparent;
+    color: var(--text-secondary);
+    border: 1px solid transparent;
+}
+.btn-ghost:hover,
+.btn-ghost-v2:hover {
+    background-color: var(--border-light);
+    color: var(--text-primary);
+}
+
+.btn-danger {
+    background-color: #fff;
+    color: var(--error);
+    border: 1px solid var(--error);
+}
+.btn-danger:hover,
+.modal-btn.danger:hover {
+    background-color: var(--error);
+    color: #fff;
+}
+
+.btn-warning {
+    background: #f59e0b;
+    color: #fff;
+    border: 1px solid #d97706;
+}
+.btn-warning:hover { filter: brightness(1.06); }
+
+.btn-lg { padding: 12px 20px; font-size: var(--text-md); }
+
+.btn:disabled,
+.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+
+.btn:focus { outline: none; }
+.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+
+/* =====================================================
+   Canonical form controls (Task 5)
+   .search-input | .filter-bar | .filter-pill | .form-input
+
+   Selector-list aliases for legacy per-page classes (   .marketplaces-search, .kb-search, .filters-card, .pill) so existing
+   markup keeps rendering until migration tasks swap them out.
+   ===================================================== */
+
+.search-input,
+.filter-bar input[type="search"],
+.filter-bar input[type="text"],
+.filter-bar select {
+    height: 36px;
+    padding: 0 var(--space-3);
+    font-family: var(--font-primary);
+    font-size: var(--text-sm);
+    color: var(--text-primary);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.search-input::placeholder,
+.users-search::placeholder,
+.marketplaces-search::placeholder,
+.kb-search::placeholder,
+.filter-bar input::placeholder { color: var(--text-muted); }
+
+.search-input:focus,
+.users-search:focus,
+.marketplaces-search:focus,
+.kb-search:focus,
+.filter-bar input:focus,
+.filter-bar select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: var(--focus-ring);
+}
+
+.filter-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+    padding: var(--space-3) var(--space-4);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--space-4);
+}
+
+.filter-bar > .search-input,
+.filters-card > .search-input { flex: 1 1 240px; min-width: 200px; }
+
+.filter-pill {
+    display: inline-flex;
+    align-items: center;
+    height: 28px;
+    padding: 0 var(--space-3);
+    font-family: var(--font-primary);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--text-secondary);
+    background: transparent;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
+    text-decoration: none;
+}
+
+.filter-pill:hover {
+    background: var(--border-light);
+    color: var(--text-primary);
+}
+
+.filter-pill.is-active,
+.filter-pill[aria-pressed="true"] {
+    background: var(--primary-light);
+    color: var(--primary);
+    border-color: var(--primary);
+}
+
+/* Form input — sibling of .search-input for forms (multi-line capable). */
+.form-input,
+input.form-input,
+select.form-input,
+textarea.form-input {
+    width: 100%;
+    min-height: 36px;
+    padding: var(--space-2) var(--space-3);
+    font-family: var(--font-primary);
+    font-size: var(--text-sm);
+    color: var(--text-primary);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+textarea.form-input {
+    min-height: 96px;
+    resize: vertical;
+    font-family: var(--font-mono);
+    line-height: 1.5;
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: var(--focus-ring);
+}
+
+.form-input::placeholder { color: var(--text-muted); }
+
+/* =====================================================
+   Page-header primitive (Task 6)
+   .page-header + __main / __title / __subtitle / __actions / __eyebrow
+   + variants: .page-header--hero | .page-header--compact
+   + .tab-strip (paired tab row for marketplace tabs etc.)
+   ===================================================== */
+
+.page-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-4);
+    margin: var(--space-6) 0 var(--space-5);
+    flex-wrap: wrap;
+}
+
+.page-header__main { min-width: 0; flex: 1 1 auto; }
+
+.page-header__title {
+    margin: 0;
+    font-size: 22px;
+    font-weight: var(--font-semibold);
+    color: var(--text-primary);
+    line-height: 1.2;
+}
+
+.page-header__subtitle {
+    margin: var(--space-2) 0 0;
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+    line-height: 1.4;
+}
+
+.page-header__eyebrow {
+    margin: 0 0 var(--space-2);
+    font-size: var(--text-xs);
+    font-weight: var(--font-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-secondary);
+}
+
+.page-header__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+}
+
+/* Hero variant — gradient background, larger title, light eyebrow.
+   Tuned to match the look of admin_tokens.html's per-page .tokens-hero
+   (which analysts already liked): tighter padding, 14px radius, soft
+   blue glow shadow. Applied across all primary-content pages so the
+   admin section reads as one product instead of a patchwork. */
+.page-header--hero {
+    padding: 28px 32px 24px;
+    margin: var(--space-5) auto;
+    /* Self-constrain to the canonical app width so the gradient stays
+       visually balanced even on standalone pages (catalog, corporate-memory,
+       install, dashboard) that don't wrap content in `.container`. On
+       templates that DO use `.container` (admin pages), the parent's
+       max-width is the same or tighter, so this is a no-op there. */
+    max-width: var(--width-app);
+    box-sizing: border-box;
+    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+    color: #fff;
+    border-radius: 14px;
+    box-shadow: 0 4px 16px rgba(0, 115, 209, 0.2);
+    position: relative;
+}
+.page-header--hero .page-header__main { color: inherit; }
+.page-header--hero .page-header__title {
+    font-size: 28px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: #fff;
+    margin: 0 0 6px;
+}
+.page-header--hero .page-header__subtitle {
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 13.5px;
+    margin: 6px 0 0;
+    max-width: 720px;
+}
+.page-header--hero .page-header__eyebrow {
+    color: rgba(255, 255, 255, 0.75);
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    margin: 0 0 6px;
+}
+.page-header--hero .page-header__actions a,
+.page-header--hero .page-header__actions button {
+    color: #fff;
+}
+@media (max-width: 640px) {
+    .page-header--hero { padding: 24px 20px 20px; border-radius: 12px; }
+    .page-header--hero .page-header__title { font-size: 22px; }
+}
+
+/* Compact variant — for dense admin index pages that have many controls
+   already and don't need vertical generosity. Smaller title, tighter
+   spacing, no border. */
+.page-header--compact {
+    margin: var(--space-4) 0 var(--space-3);
+}
+.page-header--compact .page-header__title { font-size: 18px; }
+
+/* Tab strip — the secondary row pattern used by /marketplace?tab=… and
+   similar tabbed pages. Sits below the .page-header (or inside it on
+   hero-variant pages). */
+.tab-strip {
+    display: flex;
+    gap: var(--space-1);
+    align-items: center;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: var(--space-5);
+}
+
+.tab-strip__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-2) var(--space-3);
+    font-family: var(--font-primary);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--text-secondary);
+    text-decoration: none;
+    background: transparent;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    cursor: pointer;
+    transition: color var(--transition-fast), border-color var(--transition-fast);
+}
+
+.tab-strip__item:hover { color: var(--text-primary); }
+
+.tab-strip__item.is-active,
+.tab-strip__item[aria-selected="true"] {
+    color: var(--primary);
+    border-bottom-color: var(--primary);
+}
+
+/* =====================================================
+   Data display + feedback primitives (Task 7)
+   .data-table (+ --compact) | .empty-state | .toast | .stat-card
+
+   Selector-list aliases for legacy per-page tables (   .gp-table, .marketplaces-table, .audit-table) so existing markup
+   keeps rendering until migration tasks swap them out.
+   ===================================================== */
+
+.data-table,
+.ad-table,
+.ea-table,
+.md-table,
+.members-table,
+.obs-table,
+.overview-stats-table,
+.registry-table,
+.sample-table,
+.sched-table,
+.sess-table,
+.sub-table,
+.subs-table,
+.ud-table {
+    width: 100%;
+    border-collapse: collapse;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    font-variant-numeric: tabular-nums;
+}
+
+.data-table thead,
+.ad-table thead,
+.ea-table thead,
+.md-table thead,
+.members-table thead,
+.obs-table thead,
+.overview-stats-table thead,
+.registry-table thead,
+.sample-table thead,
+.sched-table thead,
+.sess-table thead,
+.sub-table thead,
+.subs-table thead,
+.ud-table thead {
+    background: var(--border-light);
+}
+
+.data-table th,
+.ad-table th,
+.ea-table th,
+.md-table th,
+.members-table th,
+.obs-table th,
+.overview-stats-table th,
+.registry-table th,
+.sample-table th,
+.sched-table th,
+.sess-table th,
+.sub-table th,
+.subs-table th,
+.ud-table th {
+    padding: var(--space-3) var(--space-4);
+    text-align: left;
+    font-size: var(--text-xs);
+    font-weight: var(--font-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border);
+}
+
+.data-table td,
+.ad-table td,
+.ea-table td,
+.md-table td,
+.members-table td,
+.obs-table td,
+.overview-stats-table td,
+.registry-table td,
+.sample-table td,
+.sched-table td,
+.sess-table td,
+.sub-table td,
+.subs-table td,
+.ud-table td {
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--text-sm);
+    color: var(--text-primary);
+    border-bottom: 1px solid var(--border-light);
+    vertical-align: middle;
+}
+
+.data-table tbody tr:last-child td,
+.ad-table tbody tr:last-child td,
+.ea-table tbody tr:last-child td,
+.md-table tbody tr:last-child td,
+.members-table tbody tr:last-child td,
+.obs-table tbody tr:last-child td,
+.overview-stats-table tbody tr:last-child td,
+.registry-table tbody tr:last-child td,
+.sample-table tbody tr:last-child td,
+.sched-table tbody tr:last-child td,
+.sess-table tbody tr:last-child td,
+.sub-table tbody tr:last-child td,
+.subs-table tbody tr:last-child td,
+.ud-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.data-table tbody tr:hover,
+.ad-table tbody tr:hover,
+.ea-table tbody tr:hover,
+.md-table tbody tr:hover,
+.members-table tbody tr:hover,
+.obs-table tbody tr:hover,
+.overview-stats-table tbody tr:hover,
+.registry-table tbody tr:hover,
+.sample-table tbody tr:hover,
+.sched-table tbody tr:hover,
+.sess-table tbody tr:hover,
+.sub-table tbody tr:hover,
+.subs-table tbody tr:hover,
+.ud-table tbody tr:hover {
+    background: var(--border-light);
+}
+
+/* Compact modifier — for dense lists like /admin/activity (audit log). */
+.data-table--compact th,
+.data-table--compact td {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-xs);
+}
+
+/* =====================================================
+   .empty-state — for "no records" / "no results" panels
+   ===================================================== */
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-8) var(--space-6);
+    text-align: center;
+    background: var(--surface);
+    border: 1px dashed var(--border);
+    border-radius: var(--radius-lg);
+    color: var(--text-secondary);
+}
+
+.empty-state__icon {
+    font-size: 32px;
+    opacity: 0.5;
+    line-height: 1;
+}
+
+.empty-state__title {
+    margin: 0;
+    font-size: var(--text-md);
+    font-weight: var(--font-medium);
+    color: var(--text-primary);
+}
+
+.empty-state__description {
+    margin: 0;
+    max-width: 480px;
+    font-size: var(--text-sm);
+    line-height: 1.5;
+}
+
+.empty-state__actions {
+    margin-top: var(--space-3);
+    display: flex;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+/* =====================================================
+   .toast — global notification surface
+   Paired with window.appToast({kind, msg, timeout}) in app.js
+   ===================================================== */
+
+.toast-container {
+    position: fixed;
+    right: var(--space-5);
+    bottom: var(--space-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    z-index: 9999;
+    pointer-events: none;
+}
+
+.toast {
+    pointer-events: auto;
+    min-width: 240px;
+    max-width: 360px;
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius-md);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-elevated);
+    font-size: var(--text-sm);
+    color: var(--text-primary);
+    cursor: pointer;
+    animation: toast-in 200ms ease;
+}
+
+.toast.is-success { border-left: 3px solid var(--success); }
+.toast.is-warning { border-left: 3px solid var(--warning); }
+.toast.is-error   { border-left: 3px solid var(--error); }
+.toast.is-info    { border-left: 3px solid var(--primary); }
+
+@keyframes toast-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: none; }
+}
+
+/* =====================================================
+   .stat-card — for dashboard metric tiles
+   ===================================================== */
+
+.stat-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: var(--space-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+}
+
+.stat-card__label {
+    font-size: var(--text-xs);
+    font-weight: var(--font-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-secondary);
+}
+
+.stat-card__value {
+    font-size: 28px;
+    font-weight: var(--font-semibold);
+    color: var(--text-primary);
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+}
+
+.stat-card__hint {
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+}
+
+.stat-card__icon {
+    font-size: 18px;
+    opacity: 0.6;
+}
+
+/* Variant: with primary accent. */
+.stat-card--accent {
+    border-color: var(--primary);
+    background: var(--primary-light);
+}
+.stat-card--accent .stat-card__value { color: var(--primary); }
+
+/* Stat row container — gap-spaced grid for the dashboard tile row. */
+.stat-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: var(--space-3);
+    margin-bottom: var(--space-5);
+}
diff --git a/app/web/static/style.css b/app/web/static/style.css
deleted file mode 100644
index 8f13e7c..0000000
--- a/app/web/static/style.css
+++ /dev/null
@@ -1,1087 +0,0 @@
-/* Base styles */
-:root {
-    --primary: #1a73e8;
-    --primary-dark: #1557b0;
-    --secondary: #5f6368;
-    --success: #34a853;
-    --error: #ea4335;
-    --warning: #fbbc05;
-    --bg: #f8f9fa;
-    --card-bg: #ffffff;
-    --text: #202124;
-    --text-light: #5f6368;
-    --border: #dadce0;
-    --radius: 8px;
-}
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    background-color: var(--bg);
-    color: var(--text);
-    line-height: 1.6;
-    min-height: 100vh;
-}
-
-.container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 24px 20px;
-}
-
-/* Dashboard */
-.dashboard h2 {
-    font-size: 1.5rem;
-    font-weight: 600;
-    margin-bottom: 24px;
-    color: var(--text);
-}
-
-/* Header */
-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px 0;
-    margin-bottom: 24px;
-    border-bottom: 1px solid var(--border);
-    flex-wrap: wrap;
-    gap: 16px;
-}
-
-a.logo { text-decoration: none; color: inherit; display: block; }
-a.logo:hover h1 { color: var(--primary); }
-
-.logo h1 {
-    font-size: 1.375rem;
-    font-weight: 600;
-    color: var(--text);
-    margin: 0;
-    letter-spacing: -0.02em;
-}
-
-.logo .subtitle {
-    font-size: 0.8125rem;
-    color: var(--text-light);
-    margin-top: 2px;
-}
-
-nav {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-}
-
-.user-info {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 0.875rem;
-    color: var(--text-light);
-}
-
-.avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-}
-
-/* Buttons */
-.btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 10px 20px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    text-decoration: none;
-    border-radius: var(--radius);
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.2s, box-shadow 0.2s;
-}
-
-.btn-primary {
-    background-color: var(--primary);
-    color: white;
-    font-weight: 500;
-    transition: all 0.15s ease;
-}
-
-.btn-primary:hover {
-    background-color: var(--primary-dark);
-    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3);
-}
-
-.btn-primary:active {
-    transform: scale(0.98);
-}
-
-.btn-secondary {
-    background-color: transparent;
-    color: var(--secondary);
-    border: 1px solid var(--border);
-}
-
-.btn-secondary:hover {
-    background-color: var(--bg);
-}
-
-.btn-sm {
-    padding: 6px 12px;
-    font-size: 0.75rem;
-}
-
-.btn-google {
-    background-color: white;
-    color: var(--text);
-    border: 1px solid var(--border);
-    padding: 14px 28px;
-    font-size: 1rem;
-    font-weight: 500;
-    width: 100%;
-    max-width: 280px;
-    transition: all 0.2s ease;
-}
-
-.btn-google:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
-    border-color: #c4c4c4;
-    background-color: #fafafa;
-}
-
-.btn-google:active {
-    transform: scale(0.98);
-}
-
-.google-icon {
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-}
-
-/* Cards */
-.card {
-    background: var(--card-bg);
-    border-radius: var(--radius);
-    padding: 24px;
-    margin-bottom: 20px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-    border: 1px solid var(--border);
-}
-
-.card h3 {
-    font-size: 1rem;
-    font-weight: 600;
-    margin-bottom: 16px;
-    color: var(--text);
-    letter-spacing: -0.01em;
-}
-
-.card p {
-    color: var(--text-light);
-    margin-bottom: 12px;
-}
-
-.card-error {
-    border-left: 4px solid var(--error);
-    background-color: #fff8f8;
-}
-
-.card-highlight {
-    border-left: 4px solid var(--primary);
-    background-color: #f8faff;
-}
-
-.card-ai {
-    border-left: 4px solid var(--success);
-    background-color: #f8fdf8;
-}
-
-/* Manual setup collapsible */
-.manual-setup {
-    margin-top: 16px;
-}
-
-.manual-setup summary {
-    cursor: pointer;
-    font-size: 0.875rem;
-    color: var(--text-light);
-    padding: 8px 0;
-}
-
-.manual-setup summary:hover {
-    color: var(--text);
-}
-
-.manual-setup .card {
-    margin-top: 12px;
-    margin-bottom: 0;
-}
-
-.card-error h3 {
-    color: var(--error);
-}
-
-.error-message {
-    color: var(--error);
-    font-weight: 500;
-}
-
-/* Info grid */
-.info-grid {
-    display: grid;
-    gap: 12px;
-}
-
-.info-item {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-.info-item .label {
-    font-weight: 500;
-    min-width: 140px;
-}
-
-.info-item .value {
-    color: var(--text-light);
-}
-
-/* Badges */
-.badge {
-    display: inline-block;
-    padding: 2px 8px;
-    font-size: 0.75rem;
-    font-weight: 500;
-    border-radius: 4px;
-    background-color: var(--bg);
-    color: var(--text-light);
-    margin-right: 4px;
-}
-
-.badge-analyst {
-    background-color: #e8f5e9;
-    color: #2e7d32;
-}
-
-.badge-privileged {
-    background-color: #fff3e0;
-    color: #ef6c00;
-}
-
-.badge-admin {
-    background-color: #e3f2fd;
-    color: #1565c0;
-}
-
-/* Code blocks */
-code {
-    font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
-    font-size: 0.875rem;
-    padding: 2px 6px;
-    border-radius: 4px;
-}
-
-.code-block {
-    background-color: #1a1a2e;
-    color: #e4e4e7;
-    padding: 14px 16px;
-    border-radius: var(--radius);
-    overflow-x: auto;
-    margin: 12px 0;
-    border: 1px solid #2d2d44;
-}
-
-.code-block code,
-.code-block pre {
-    background: transparent;
-    padding: 0;
-    font-size: 0.8125rem;
-    color: inherit;
-    line-height: 1.6;
-}
-
-.code-block pre {
-    margin: 0;
-    white-space: pre-wrap;
-    word-break: break-all;
-}
-
-.code-block.code-compact {
-    padding: 10px 14px;
-    margin: 6px 0;
-}
-
-/* Command rows for Quick Start */
-.command-row {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 8px;
-}
-
-.command-row .command-label {
-    font-weight: 500;
-    font-size: 0.875rem;
-    min-width: 70px;
-    color: var(--text-light);
-}
-
-.command-row .code-block {
-    flex: 1;
-    margin: 0;
-}
-
-/* SSH config details/summary */
-.ssh-config-details {
-    margin-top: 16px;
-    padding-top: 12px;
-    border-top: 1px solid var(--border);
-}
-
-.ssh-config-details summary {
-    cursor: pointer;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--primary);
-    padding: 4px 0;
-    user-select: none;
-}
-
-.ssh-config-details summary:hover {
-    color: var(--primary-dark);
-}
-
-.ssh-config-details[open] summary {
-    margin-bottom: 8px;
-}
-
-.ssh-config-details .help-text {
-    margin-top: 4px;
-    margin-bottom: 4px;
-}
-
-/* Forms */
-.form-group {
-    margin-bottom: 20px;
-}
-
-.form-group label {
-    display: block;
-    font-weight: 500;
-    margin-bottom: 8px;
-}
-
-.form-group textarea {
-    width: 100%;
-    padding: 12px 14px;
-    font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
-    font-size: 0.8125rem;
-    line-height: 1.5;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    resize: vertical;
-    min-height: 100px;
-    background-color: var(--card-bg);
-    transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.form-group textarea:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
-}
-
-.form-group textarea::placeholder {
-    color: #9aa0a6;
-}
-
-.help-text {
-    font-size: 0.8125rem;
-    color: var(--text-light);
-    margin-top: 8px;
-    line-height: 1.5;
-}
-
-.help-text strong {
-    color: var(--text);
-    font-weight: 500;
-}
-
-/* Flash messages */
-.flash-messages {
-    margin-bottom: 24px;
-}
-
-.flash {
-    padding: 14px 18px;
-    border-radius: var(--radius);
-    margin-bottom: 12px;
-    font-size: 0.875rem;
-    font-weight: 500;
-}
-
-.flash-success {
-    background-color: #e8f5e9;
-    color: #2e7d32;
-    border: 1px solid #c8e6c9;
-}
-
-.flash-error {
-    background-color: #ffebee;
-    color: #c62828;
-    border: 1px solid #ffcdd2;
-}
-
-.flash-info {
-    background-color: #e3f2fd;
-    color: #1565c0;
-    border: 1px solid #bbdefb;
-}
-
-.flash-warning {
-    background-color: #fff3e0;
-    color: #ef6c00;
-    border: 1px solid #ffe0b2;
-}
-
-/* Login page */
-.login-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 60vh;
-    padding: 20px;
-}
-
-.login-card {
-    background: var(--card-bg);
-    border-radius: 12px;
-    padding: 48px 40px;
-    text-align: center;
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-    max-width: 640px;
-    width: 100%;
-    border: 1px solid var(--border);
-}
-
-.login-card h2 {
-    margin-bottom: 12px;
-    font-size: 1.75rem;
-    font-weight: 600;
-    color: var(--text);
-}
-
-.login-description {
-    color: var(--text-light);
-    margin-bottom: 32px;
-    font-size: 1rem;
-    line-height: 1.5;
-}
-
-.login-steps {
-    margin-top: 24px;
-    padding-top: 20px;
-    border-top: 1px solid var(--border);
-    text-align: left;
-}
-
-.login-steps .step {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-size: 0.875rem;
-    color: var(--text-light);
-    padding: 6px 0;
-}
-
-.login-steps .step-num,
-.steps-horizontal .step-num {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    background-color: var(--primary);
-    color: white;
-    border-radius: 50%;
-    font-size: 0.75rem;
-    font-weight: 600;
-    flex-shrink: 0;
-}
-
-/* Inline steps for compact layout */
-.steps-inline {
-    display: flex;
-    gap: 20px;
-    flex-wrap: wrap;
-    margin-bottom: 16px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--border);
-}
-
-.steps-inline .step-item {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 0.8125rem;
-    color: var(--text-light);
-}
-
-/* Form row for inline layout */
-.form-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    flex-wrap: wrap;
-}
-
-.form-group-inline {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 0;
-}
-
-.form-group-inline label {
-    margin-bottom: 0;
-}
-
-/* AI hint inline */
-.ai-hint {
-    margin-top: 16px;
-    padding-top: 12px;
-    border-top: 1px solid var(--border);
-    font-size: 0.8125rem;
-    color: var(--text-light);
-}
-
-.ai-hint code {
-    display: inline;
-    font-size: 0.75rem;
-    color: var(--primary);
-}
-
-/* Manual setup compact */
-.manual-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-    padding: 12px 0;
-}
-
-.manual-content code {
-    font-size: 0.75rem;
-}
-
-.manual-content .help-text {
-    margin: 0;
-    font-size: 0.75rem;
-}
-
-.login-note {
-    font-size: 0.8125rem;
-    color: var(--text-light);
-    margin-top: 12px;
-}
-
-/* Error page */
-.error-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 60vh;
-}
-
-.error-card {
-    text-align: center;
-}
-
-.error-card h2 {
-    font-size: 3rem;
-    margin-bottom: 16px;
-}
-
-.error-card p {
-    color: var(--text-light);
-    margin-bottom: 24px;
-}
-
-/* Footer */
-footer {
-    margin-top: 48px;
-    padding-top: 20px;
-    padding-bottom: 8px;
-    border-top: 1px solid var(--border);
-    text-align: center;
-    color: var(--text-light);
-    font-size: 0.8125rem;
-}
-
-/* Username box and copy buttons */
-.username-box {
-    background: #f0f9ff;
-    border: 2px solid #0ea5e9;
-    border-radius: 8px;
-    padding: 16px;
-    margin: 16px 0;
-}
-
-.username-display {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-top: 8px;
-}
-
-.username-display code {
-    font-size: 20px;
-    font-weight: bold;
-    color: #0369a1;
-    background: white;
-    padding: 8px 16px;
-    border-radius: 6px;
-    flex-grow: 1;
-}
-
-.btn-copy {
-    background: #0ea5e9;
-    color: white;
-    border: none;
-    padding: 8px 16px;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    transition: all 0.2s ease;
-}
-
-.btn-copy:hover {
-    background: #0284c7;
-}
-
-.btn-copy:active {
-    transform: scale(0.98);
-}
-
-.btn-copy.copied {
-    background: #22c55e;
-}
-
-.btn-copy-inline {
-    background: #0ea5e9;
-    color: white;
-    border: none;
-    padding: 4px 10px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 12px;
-    margin-left: 8px;
-    transition: background 0.15s ease;
-}
-
-.btn-copy-inline:hover {
-    background: #0284c7;
-}
-
-.btn-copy-block {
-    background: #0ea5e9;
-    color: white;
-    border: none;
-    padding: 10px 24px;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 600;
-    width: 100%;
-    transition: all 0.2s ease;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.btn-copy-block:hover {
-    background: #0284c7;
-    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
-}
-
-.btn-copy-block:active {
-    transform: scale(0.98);
-}
-
-.btn-copy-block.copied {
-    background: #22c55e;
-}
-
-.username-preview {
-    font-size: 18px;
-    color: #64748b;
-}
-
-.info-box {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
-    border-radius: 6px;
-    padding: 12px;
-    margin-bottom: 16px;
-}
-
-.card-success {
-    border-left: 4px solid var(--success);
-    background-color: #f8fdf8;
-}
-
-.help-details {
-    margin-top: 12px;
-    font-size: 0.875rem;
-}
-
-.help-details summary {
-    cursor: pointer;
-    color: var(--primary);
-    padding: 4px 0;
-    font-weight: 500;
-}
-
-.help-details summary:hover {
-    color: var(--primary-dark);
-}
-
-.help-details ul {
-    margin-top: 8px;
-    margin-left: 20px;
-    color: var(--text-light);
-}
-
-.help-details li {
-    margin-bottom: 4px;
-}
-
-/* Claude Code Setup Card on Dashboard */
-.cc-setup-card {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    border: none;
-    margin-bottom: 24px;
-}
-
-.cc-setup-card h3 {
-    color: white;
-    margin-bottom: 12px;
-}
-
-.cc-setup-card .cc-instruction {
-    color: rgba(255, 255, 255, 0.95);
-    margin-bottom: 16px;
-    font-size: 0.9375rem;
-    line-height: 1.6;
-}
-
-.cc-setup-card .cc-helper-text {
-    color: rgba(255, 255, 255, 0.8);
-    font-size: 0.8125rem;
-    margin-top: 12px;
-    margin-bottom: 0;
-}
-
-.cc-setup-card .btn-copy-block {
-    background: white;
-    color: #667eea;
-    font-weight: 600;
-    padding: 12px 24px;
-    border-radius: 6px;
-    border: none;
-    cursor: pointer;
-    font-size: 14px;
-    width: 100%;
-    transition: all 0.2s ease;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.cc-setup-card .btn-copy-block:hover {
-    background: #f0f0f0;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.cc-setup-card .btn-copy-block:active {
-    transform: scale(0.98);
-}
-
-.cc-setup-card .btn-copy-block.copied {
-    background: #34a853;
-    color: white;
-}
-
-/* CLI hint in setup card */
-.cc-setup-card .cli-hint {
-    margin-top: 16px;
-    padding-top: 12px;
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.cc-setup-card .cli-hint summary {
-    cursor: pointer;
-    color: rgba(255, 255, 255, 0.85);
-    font-size: 0.8125rem;
-    font-weight: 500;
-    padding: 4px 0;
-}
-
-.cc-setup-card .cli-hint summary:hover {
-    color: white;
-}
-
-.cc-setup-card .cli-hint .cli-content {
-    margin-top: 10px;
-    background: rgba(255, 255, 255, 0.1);
-    padding: 10px 12px;
-    border-radius: 6px;
-}
-
-.cc-setup-card .cli-hint .cli-content code {
-    display: block;
-    background: rgba(0, 0, 0, 0.2);
-    color: white;
-    padding: 8px 10px;
-    border-radius: 4px;
-    font-size: 0.75rem;
-    margin-bottom: 6px;
-}
-
-.cc-setup-card .cli-hint .cli-desc {
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 0.75rem;
-}
-
-/* Support info banner */
-.support-info {
-    text-align: center;
-    color: var(--text-light);
-    font-size: 0.8125rem;
-    padding: 12px 16px;
-    background: #f8fafc;
-    border-radius: 6px;
-    margin-bottom: 20px;
-    border: 1px solid var(--border);
-}
-
-.support-info strong {
-    color: var(--text);
-}
-
-/* Auth tabs */
-.auth-tabs {
-    display: flex;
-    gap: 0;
-    margin-bottom: 24px;
-    border-bottom: 2px solid var(--border);
-}
-
-.auth-tab {
-    flex: 1;
-    padding: 12px 16px;
-    background: transparent;
-    border: none;
-    border-bottom: 2px solid transparent;
-    margin-bottom: -2px;
-    font-size: 0.9375rem;
-    font-weight: 500;
-    color: var(--text-light);
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.auth-tab:hover {
-    color: var(--text);
-}
-
-.auth-tab.active {
-    color: var(--primary);
-    border-bottom-color: var(--primary);
-}
-
-.auth-tab-content {
-    display: none;
-}
-
-.auth-tab-content.active {
-    display: block;
-}
-
-.tab-description {
-    color: var(--text-light);
-    font-size: 0.875rem;
-    margin-bottom: 20px;
-    text-align: center;
-}
-
-.signup-note {
-    color: var(--text-light);
-    font-size: 0.8125rem;
-    text-align: center;
-    margin-top: 16px;
-}
-
-/* Login form styles */
-.login-form {
-    text-align: left;
-    margin: 24px 0;
-}
-
-.login-form .form-group {
-    margin-bottom: 16px;
-}
-
-.login-form .form-group label {
-    display: block;
-    font-weight: 500;
-    font-size: 0.875rem;
-    margin-bottom: 6px;
-    color: var(--text);
-}
-
-.login-form .form-group input {
-    width: 100%;
-    padding: 12px 14px;
-    font-size: 0.9375rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background-color: var(--card-bg);
-    transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.login-form .form-group input:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
-}
-
-.login-form .form-group input::placeholder {
-    color: #9aa0a6;
-}
-
-.login-form .form-hint {
-    display: block;
-    font-size: 0.75rem;
-    color: var(--text-light);
-    margin-top: 4px;
-}
-
-.btn-block {
-    width: 100%;
-}
-
-.btn-link {
-    background: transparent;
-    color: var(--primary);
-    border: none;
-    padding: 8px 4px;
-    font-size: 0.875rem;
-    cursor: pointer;
-    text-decoration: none;
-}
-
-.btn-link:hover {
-    color: var(--primary-dark);
-    text-decoration: underline;
-}
-
-/* Login page links */
-.login-links {
-    display: flex;
-    justify-content: center;
-    gap: 16px;
-    margin: 16px 0;
-    flex-wrap: wrap;
-}
-
-.login-links form {
-    margin: 0;
-}
-
-/* Request access form */
-.request-access-form,
-.reset-form {
-    display: inline;
-}
-
-/* Divider */
-.divider {
-    display: flex;
-    align-items: center;
-    margin: 24px 0;
-    color: var(--text-light);
-    font-size: 0.875rem;
-}
-
-.divider::before,
-.divider::after {
-    content: "";
-    flex: 1;
-    height: 1px;
-    background-color: var(--border);
-}
-
-.divider span {
-    padding: 0 16px;
-}
-
-/* Account email display */
-.account-email {
-    background-color: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 12px 16px;
-    margin-bottom: 20px;
-    text-align: center;
-    font-size: 0.9375rem;
-}
-
-/* Responsive */
-@media (max-width: 600px) {
-    .container {
-        padding: 15px;
-    }
-
-    header {
-        flex-direction: column;
-        gap: 15px;
-        text-align: center;
-    }
-
-    .info-item {
-        flex-direction: column;
-        gap: 4px;
-    }
-
-    .info-item .label {
-        min-width: auto;
-    }
-
-    .username-display {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .username-display code {
-        text-align: center;
-    }
-
-    .login-links {
-        flex-direction: column;
-        gap: 8px;
-    }
-}
diff --git a/app/web/templates/_app_header.html b/app/web/templates/_app_header.html
index f83d6b8..843ca76 100644
--- a/app/web/templates/_app_header.html
+++ b/app/web/templates/_app_header.html
@@ -120,29 +120,12 @@
         </div>
     </div>
 </header>
-<script>
-// Generic toggle pattern — used by both the user menu and the Admin nav dropdown.
-function _wireDropdown(triggerId, panelId) {
-    var trigger = document.getElementById(triggerId);
-    var panel = document.getElementById(panelId);
-    if (!trigger || !panel) return;
-    function setOpen(open) {
-        trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
-        if (open) { panel.removeAttribute('hidden'); }
-        else { panel.setAttribute('hidden', ''); }
-    }
-    trigger.addEventListener('click', function(e) {
-        e.stopPropagation();
-        setOpen(trigger.getAttribute('aria-expanded') !== 'true');
-    });
-    document.addEventListener('click', function(e) {
-        if (!panel.contains(e.target) && e.target !== trigger) setOpen(false);
-    });
-    document.addEventListener('keydown', function(e) {
-        if (e.key === 'Escape') { setOpen(false); trigger.focus(); }
-    });
-}
-_wireDropdown('userMenuTrigger', 'userMenuPanel');
-_wireDropdown('adminNavTrigger', 'adminNavPanel');
-</script>
+{# Dropdown wiring lives in app/web/static/app.js. The script tag sits
+   here (in the shared header partial) instead of base.html so EVERY
+   page that includes _app_header.html — including standalone pages
+   like catalog.html / corporate_memory*.html / install.html /
+   admin_tables.html that don't extend base.html — gets the JS loaded
+   automatically. Defer keeps it non-blocking; placed after the header
+   markup so DOM is ready by the time the IIFE runs init(). #}
+<script src="{{ static_url('app.js') }}" defer></script>
 {% endif %}
diff --git a/app/web/templates/_page_hero.html b/app/web/templates/_page_hero.html
new file mode 100644
index 0000000..8874b9e
--- /dev/null
+++ b/app/web/templates/_page_hero.html
@@ -0,0 +1,19 @@
+{# Canonical hero header for content pages. Usage:
+
+       {% set page_hero_eyebrow  = "Users & Access" %}
+       {% set page_hero_title    = "Users" %}
+       {% set page_hero_subtitle = "Manage analyst accounts and group membership." %}
+       {% include "_page_hero.html" %}
+
+   `eyebrow` + `subtitle` are optional; `title` is required (the block is
+   a no-op without one). CSS lives at `.page-header--hero` in
+   style-custom.css. #}
+{% if page_hero_title %}
+<section class="page-header page-header--hero">
+    <div class="page-header__main">
+        {% if page_hero_eyebrow %}<div class="page-header__eyebrow">{{ page_hero_eyebrow }}</div>{% endif %}
+        <h1 class="page-header__title">{{ page_hero_title }}</h1>
+        {% if page_hero_subtitle %}<p class="page-header__subtitle">{{ page_hero_subtitle | safe }}</p>{% endif %}
+    </div>
+</section>
+{% endif %}
diff --git a/app/web/templates/activity_center.html b/app/web/templates/activity_center.html
index d039fe1..190bcc3 100644
--- a/app/web/templates/activity_center.html
+++ b/app/web/templates/activity_center.html
@@ -7,8 +7,10 @@
   <!-- TOP BAR --------------------------------------------------------- -->
   <header class="obs-topbar">
     <div class="obs-topbar-left">
-      <h1 class="obs-title">Audit log</h1>
-      <p class="obs-subtitle">Server-side actions performed against Agnes. Also available locally for analysis. For Claude Code tool / skill telemetry, see <a href="/admin/telemetry">Telemetry</a>.</p>
+      {% set page_hero_eyebrow = "Activity Center" %}
+      {% set page_hero_title = "Audit log" %}
+      {% set page_hero_subtitle = "Every admin and user-mutating action — RBAC writes, sync triggers, marketplace edits, …" %}
+      {% include "_page_hero.html" %}
       <div class="obs-narrative" id="obs-narrative">Loading…</div>
     </div>
     <div class="obs-topbar-right">
@@ -156,10 +158,6 @@
   margin-bottom: 16px;
 }
 .obs-topbar-left { flex: 1; min-width: 0; }
-.obs-title { margin: 0 0 4px 0; font-size: 22px; font-weight: 600; color: var(--obs-fg); }
-.obs-subtitle { margin: 0 0 10px; color: var(--obs-muted); font-size: 13px; max-width: 720px; }
-.obs-subtitle a { color: var(--obs-link); text-decoration: none; border-bottom: 1px dashed currentColor; }
-.obs-subtitle a:hover { border-bottom-style: solid; }
 .obs-narrative { font-size: 16px; color: var(--obs-fg); line-height: 1.45; }
 .obs-narrative b { font-weight: 600; }
 .obs-narrative a { color: var(--obs-link); text-decoration: none; border-bottom: 1px dashed transparent; cursor: pointer; }
diff --git a/app/web/templates/admin/news_editor.html b/app/web/templates/admin/news_editor.html
index 426fbf4..af64fab 100644
--- a/app/web/templates/admin/news_editor.html
+++ b/app/web/templates/admin/news_editor.html
@@ -220,8 +220,10 @@ document.addEventListener('DOMContentLoaded', function () {
 {% endblock %}
 
 {% block content %}
-<h1>News editor</h1>
-
+{% set page_hero_eyebrow = "Server" %}
+{% set page_hero_title = "News editor" %}
+{% set page_hero_subtitle = "Compose the news intro shown at the bottom of /home." %}
+{% include "_page_hero.html" %}
 <div class="panel">
     <h2>Currently published</h2>
     {% if news_current %}
diff --git a/app/web/templates/admin_access.html b/app/web/templates/admin_access.html
index 615488f..db79356 100644
--- a/app/web/templates/admin_access.html
+++ b/app/web/templates/admin_access.html
@@ -9,8 +9,6 @@
     display: flex; justify-content: space-between; align-items: center;
     gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
   }
-  .ax-title { margin: 0; font-size: 22px; font-weight: 600; }
-  .ax-sub { margin: 0; font-size: 13px; color: var(--text-secondary, #6b7280); }
 
   .ax-layout {
     display: grid; grid-template-columns: 320px 1fr; gap: 20px;
@@ -245,13 +243,6 @@
   }
   .modal-card textarea { min-height: 60px; resize: vertical; }
   .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
-  .modal-btn {
-    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
-    border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
-    cursor: pointer;
-  }
-  .modal-btn.primary { background: var(--primary, #6366f1); color: #fff; border-color: var(--primary, #6366f1); }
-  .modal-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
 
   .toast-stack {
     position: fixed; bottom: 24px; right: 24px; z-index: 2000;
@@ -336,9 +327,10 @@
 <div class="ax-page">
   <div class="ax-toolbar">
     <div>
-      <h2 class="ax-title">Resource access</h2>
-      <p class="ax-sub">Pick a group on the left, check resources on the right to grant access.
-        Manage groups and members on <a href="/admin/groups">Groups</a>.</p>
+      {% set page_hero_eyebrow = "Users & Access" %}
+      {% set page_hero_title = "Resource access" %}
+      {% set page_hero_subtitle = "Pick a group on the left, check resources on the right to grant access. Manage groups and members on <a href=&quot;/admin/groups&quot; style=&quot;color:#fff;text-decoration:underline;&quot;>Groups</a>." %}
+      {% include "_page_hero.html" %}
     </div>
   </div>
 
diff --git a/app/web/templates/admin_group_detail.html b/app/web/templates/admin_group_detail.html
index 3fa2699..9d946e1 100644
--- a/app/web/templates/admin_group_detail.html
+++ b/app/web/templates/admin_group_detail.html
@@ -62,20 +62,7 @@
   .gd-section-head .sub { font-size: 11px; color: var(--text-secondary, #6b7280); }
 
   /* Members table */
-  .members-table { width: 100%; border-collapse: collapse; font-size: 13px; }
-  .members-table thead th {
-    text-align: left; padding: 10px 18px;
-    background: var(--border-light, #f9fafb);
-    border-bottom: 1px solid var(--border, #e5e7eb);
-    font-weight: 600; color: var(--text-secondary, #6b7280);
-    font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
-  }
-  .members-table tbody td {
-    padding: 10px 18px;
-    border-bottom: 1px solid var(--border-light, #f3f4f6);
-  }
-  .members-table tbody tr:last-child td { border-bottom: none; }
-  .members-table tbody tr:hover { background: var(--border-light, #fafafa); }
+
   .source-meta {
     font-size: 12px; color: var(--text-secondary, #9ca3af); font-weight: 400;
   }
@@ -95,22 +82,9 @@
     border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
     font-size: 13px; background: var(--surface, #fff);
   }
-  .add-row button {
-    padding: 7px 14px; border-radius: 6px; font-size: 12px; font-weight: 500;
-    background: var(--primary, #6366f1); color: #fff;
-    border: 1px solid var(--primary, #6366f1); cursor: pointer;
-  }
-  .add-row button:disabled { opacity: 0.5; cursor: not-allowed; }
 
-  .icon-btn {
-    padding: 5px 10px; border-radius: 6px; font-size: 12px;
-    border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
-    cursor: pointer; color: var(--text-primary, #111827);
-    text-decoration: none;
-  }
-  .icon-btn:hover { background: var(--border-light, #f9fafb); }
-  .icon-btn.danger { color: #b91c1c; border-color: #fecaca; }
-  .icon-btn.danger:hover { background: #fef2f2; }
+
+
 
   .gd-loading, .gd-empty {
     padding: 24px 18px; text-align: center;
@@ -134,19 +108,7 @@
   }
   .res-link:hover { filter: brightness(1.05); }
 
-  .toast-stack {
-    position: fixed; bottom: 24px; right: 24px; z-index: 2000;
-    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
-  }
-  .toast {
-    background: #111827; color: #fff; padding: 10px 16px;
-    border-radius: 8px; font-size: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
-    opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s;
-    pointer-events: auto; max-width: 380px;
-  }
-  .toast.show { opacity: 1; transform: translateY(0); }
-  .toast.success { background: #047857; }
-  .toast.error { background: #b91c1c; }
+
 </style>
 
 <div class="gd-page"
@@ -187,8 +149,8 @@
     </div>
     {% if not target_group.is_system and not target_group.is_google_managed %}
     <div style="display:flex; gap:6px;">
-      <button class="icon-btn" id="edit-group-btn">Edit</button>
-      <button class="icon-btn danger" id="delete-group-btn">Delete</button>
+      <button class="btn btn-sm" id="edit-group-btn">Edit</button>
+      <button class="btn btn-danger btn-sm" id="delete-group-btn">Delete</button>
     </div>
     {% endif %}
   </div>
@@ -208,7 +170,7 @@
       <span class="sub" id="members-sub">Loading…</span>
     </div>
     <div id="members-loading" class="gd-loading">Loading members…</div>
-    <table class="members-table" id="members-table" style="display:none;">
+    <table class="data-table" id="members-table" style="display:none;">
       <thead><tr>
         <th>Email</th><th>Name</th><th>Origin</th>
         <th style="text-align:right">Actions</th>
@@ -219,7 +181,7 @@
     {% if not target_group.is_google_managed %}
     <div class="add-row">
       <input id="add-email" type="email" autocomplete="off" placeholder="Add user by email…">
-      <button id="add-btn" disabled>Add member</button>
+      <button class="btn btn-primary btn-sm" id="add-btn" disabled>Add member</button>
     </div>
     {% endif %}
   </section>
@@ -250,13 +212,13 @@
     <label style="display:block; font-size:12px; color:#6b7280; margin: 12px 0 6px;">Description</label>
     <textarea id="edit-desc" style="width:100%; padding:9px 12px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; box-sizing:border-box; min-height:60px;"></textarea>
     <div style="display:flex; gap:8px; justify-content:flex-end; margin-top:18px;">
-      <button class="icon-btn" id="edit-cancel-btn">Cancel</button>
-      <button class="icon-btn" style="background:#6366f1;color:#fff;border-color:#6366f1;" id="edit-save-btn">Save</button>
+      <button class="btn btn-secondary" id="edit-cancel-btn">Cancel</button>
+      <button class="btn btn-primary" id="edit-save-btn">Save</button>
     </div>
   </div>
 </div>
 
-<div class="toast-stack" id="toast-stack" aria-live="polite"></div>
+
 
 <script>
 const root = document.querySelector(".gd-page");
@@ -290,14 +252,7 @@ if (IS_GOOGLE_MANAGED && !MAPPED_EMAIL) {
 
 function esc(s) { const d = document.createElement("div"); d.textContent = s == null ? "" : String(s); return d.innerHTML; }
 function fmtDate(s) { return s ? String(s).slice(0, 16).replace("T", " ") : "-"; }
-function toast(msg, kind = "") {
-  const el = document.createElement("div");
-  el.className = "toast " + kind;
-  el.textContent = msg;
-  document.getElementById("toast-stack").appendChild(el);
-  requestAnimationFrame(() => el.classList.add("show"));
-  setTimeout(() => { el.classList.remove("show"); setTimeout(() => el.remove(), 250); }, 3500);
-}
+function toast(msg, kind = "") { window.appToast({ kind: kind || "info", msg }); }
 
 let groupState = null;
 let members = [];
diff --git a/app/web/templates/admin_groups.html b/app/web/templates/admin_groups.html
index 3bf1535..c65e34a 100644
--- a/app/web/templates/admin_groups.html
+++ b/app/web/templates/admin_groups.html
@@ -10,8 +10,6 @@
     display: flex; justify-content: space-between; align-items: center;
     gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
   }
-  .gp-title { margin: 0; font-size: 22px; font-weight: 600; }
-  .gp-sub { margin: 0; font-size: 13px; color: var(--text-secondary, #6b7280); }
   .gp-search {
     padding: 8px 12px 8px 32px; min-width: 280px;
     border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
@@ -19,28 +17,6 @@
     background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>") no-repeat 10px center;
   }
 
-  .gp-table-wrap {
-    background: var(--surface, #fff);
-    border: 1px solid var(--border, #e5e7eb);
-    border-radius: 12px;
-    overflow: hidden;
-  }
-  .gp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
-  .gp-table thead th {
-    text-align: left; padding: 12px 16px;
-    background: var(--border-light, #f9fafb);
-    border-bottom: 1px solid var(--border, #e5e7eb);
-    font-weight: 600; color: var(--text-secondary, #6b7280);
-    font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
-  }
-  .gp-table tbody td {
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--border-light, #f3f4f6);
-    vertical-align: middle;
-  }
-  .gp-table tbody tr:last-child td { border-bottom: none; }
-  .gp-table tbody tr { cursor: pointer; }
-  .gp-table tbody tr:hover { background: var(--border-light, #fafafa); }
 
   .gp-name {
     font-weight: 500; color: var(--text-primary, #111827);
@@ -127,13 +103,6 @@
   .modal-card textarea { min-height: 60px; resize: vertical; }
 
   .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
-  .modal-btn {
-    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
-    border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
-    cursor: pointer;
-  }
-  .modal-btn.primary { background: var(--primary, #6366f1); color: #fff; border-color: var(--primary, #6366f1); }
-  .modal-btn.danger  { background: #dc2626; color: #fff; border-color: #dc2626; }
 
   .toast-stack {
     position: fixed; bottom: 24px; right: 24px; z-index: 2000;
@@ -153,9 +122,10 @@
 <div class="gp-page">
   <div class="gp-toolbar">
     <div>
-      <h2 class="gp-title">Groups</h2>
-      <p class="gp-sub">Named buckets that hold members and resource grants.
-        Manage who has access to what on <a href="/admin/access">Resource access</a>.</p>
+      {% set page_hero_eyebrow = "Users & Access" %}
+      {% set page_hero_title = "Groups" %}
+      {% set page_hero_subtitle = "Named groups + members. Resource access lives on the Resource access page." %}
+      {% include "_page_hero.html" %}
     </div>
     <div style="display:flex; gap:10px; align-items:center;">
       <input id="search" type="search" class="gp-search" placeholder="Filter by name or description…" autocomplete="off">
@@ -163,8 +133,8 @@
     </div>
   </div>
 
-  <div class="gp-table-wrap">
-    <table class="gp-table" id="groups-table">
+  <div class="data-table-wrap">
+    <table class="data-table" id="groups-table">
       <thead>
         <tr>
           <th>Name</th>
@@ -197,8 +167,8 @@
     <label for="group-desc">Description (optional)</label>
     <textarea id="group-desc" autocomplete="off"></textarea>
     <div class="modal-actions">
-      <button class="modal-btn" data-close-modal="group-modal">Cancel</button>
-      <button class="modal-btn primary" id="group-save-btn">Save</button>
+      <button class="btn btn-secondary" data-close-modal="group-modal">Cancel</button>
+      <button class="btn btn-primary" id="group-save-btn">Save</button>
     </div>
   </div>
 </div>
@@ -209,8 +179,8 @@
     <h3 id="confirm-title">Delete group?</h3>
     <p class="sub" id="confirm-text"></p>
     <div class="modal-actions">
-      <button class="modal-btn" data-close-modal="confirm-modal">Cancel</button>
-      <button class="modal-btn danger" id="confirm-ok-btn">Delete</button>
+      <button class="btn btn-secondary" data-close-modal="confirm-modal">Cancel</button>
+      <button class="btn btn-danger" id="confirm-ok-btn">Delete</button>
     </div>
   </div>
 </div>
diff --git a/app/web/templates/admin_marketplaces.html b/app/web/templates/admin_marketplaces.html
index 2388a80..9a9a00c 100644
--- a/app/web/templates/admin_marketplaces.html
+++ b/app/web/templates/admin_marketplaces.html
@@ -10,38 +10,7 @@
     display: flex; justify-content: space-between; align-items: center;
     gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
   }
-  .marketplaces-title { margin: 0; font-size: 22px; font-weight: 600; }
-  .marketplaces-search {
-    flex: 1; max-width: 360px;
-    padding: 8px 12px 8px 36px;
-    border: 1px solid var(--border, #e5e7eb);
-    border-radius: 8px;
-    font-size: 13px;
-    background: var(--surface, #fff) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>") no-repeat 12px center;
-  }
-  .marketplaces-search:focus { outline: 2px solid var(--primary, #6366f1); outline-offset: -1px; }
 
-  .marketplaces-table-wrap {
-    background: var(--surface, #fff);
-    border: 1px solid var(--border, #e5e7eb);
-    border-radius: 12px;
-    overflow-x: auto;
-  }
-  .marketplaces-table { width: 100%; border-collapse: collapse; font-size: 13px; }
-  .marketplaces-table thead th {
-    text-align: left; padding: 12px 16px;
-    background: var(--border-light, #f9fafb);
-    border-bottom: 1px solid var(--border, #e5e7eb);
-    font-weight: 600; color: var(--text-secondary, #6b7280);
-    font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
-  }
-  .marketplaces-table tbody td {
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--border-light, #f3f4f6);
-    vertical-align: middle;
-  }
-  .marketplaces-table tbody tr:last-child td { border-bottom: none; }
-  .marketplaces-table tbody tr:hover { background: var(--border-light, #fafafa); }
 
   .mp-cell { display: flex; align-items: center; gap: 10px; }
   .mp-avatar {
@@ -135,16 +104,6 @@
   .modal-card textarea { min-height: 60px; resize: vertical; }
   .modal-card input:focus, .modal-card textarea:focus { outline: 2px solid var(--primary, #6366f1); outline-offset: -1px; }
   .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
-  .modal-btn {
-    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
-    border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
-    cursor: pointer; transition: all 0.15s;
-  }
-  .modal-btn:hover { background: var(--border-light, #f9fafb); }
-  .modal-btn.primary { background: var(--primary, #6366f1); color: #fff; border-color: var(--primary, #6366f1); }
-  .modal-btn.primary:hover { filter: brightness(1.05); }
-  .modal-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
-  .modal-btn.danger:hover { filter: brightness(1.05); }
 
   .sync-result {
     margin: 12px 0;
@@ -235,10 +194,6 @@
 
   /* Amber primary modal action — pairs with the system-confirm modal so
      the OK button matches the trigger button's visual weight. */
-  .modal-btn.warning {
-    background: #f59e0b; color: #fff; border-color: #d97706;
-  }
-  .modal-btn.warning:hover { filter: brightness(1.06); }
 
   /* Toast */
   .toast-stack {
@@ -260,17 +215,20 @@
 
 <div class="marketplaces-page">
   <div class="marketplaces-toolbar">
-    <h2 class="marketplaces-title">Curated Marketplaces</h2>
-    <input id="mp-search" type="search" class="marketplaces-search" placeholder="Filter by slug, name, or URL…" autocomplete="off">
+    {% set page_hero_eyebrow = "Agent Experience" %}
+    {% set page_hero_title = "Curated Marketplaces" %}
+    {% set page_hero_subtitle = "Admin-managed git repos cloned nightly. Synced plugins surface in the Claude Code marketplace feed." %}
+    {% include "_page_hero.html" %}
+    <input id="mp-search" type="search" class="search-input" placeholder="Filter by slug, name, or URL…" autocomplete="off">
     <a class="icon-btn" href="/marketplace/format-guide" target="_blank" rel="noopener"
        title="Open the marketplace-metadata.json format guide in a new tab">
       Format guide →
     </a>
-    <button class="modal-btn primary" id="open-create-btn">+ Add marketplace</button>
+    <button class="btn btn-primary" id="open-create-btn">+ Add marketplace</button>
   </div>
 
-  <div class="marketplaces-table-wrap">
-    <table class="marketplaces-table" id="marketplaces-table">
+  <div class="data-table-wrap">
+    <table class="data-table" id="marketplaces-table">
       <thead>
         <tr>
           <th>Marketplace</th>
@@ -328,8 +286,8 @@
     <div class="help">Stored in <code>$DATA_DIR/state/.env_overlay</code> (chmod 600) on the data volume. Never written to the database or committed to git.</div>
 
     <div class="modal-actions">
-      <button class="modal-btn" data-close-modal="create-modal">Cancel</button>
-      <button class="modal-btn primary" id="confirm-create-btn">Register</button>
+      <button class="btn btn-secondary" data-close-modal="create-modal">Cancel</button>
+      <button class="btn btn-primary" id="confirm-create-btn">Register</button>
     </div>
   </div>
 </div>
@@ -368,8 +326,8 @@
     </div>
 
     <div class="modal-actions">
-      <button class="modal-btn" data-close-modal="edit-modal">Cancel</button>
-      <button class="modal-btn primary" id="confirm-edit-btn">Save</button>
+      <button class="btn btn-secondary" data-close-modal="edit-modal">Cancel</button>
+      <button class="btn btn-primary" id="confirm-edit-btn">Save</button>
     </div>
   </div>
 </div>
@@ -381,7 +339,7 @@
     <p class="sub" id="sync-target"></p>
     <div id="sync-result-body" class="sync-result"></div>
     <div class="modal-actions">
-      <button class="modal-btn primary" data-close-modal="sync-modal">Close</button>
+      <button class="btn btn-primary" data-close-modal="sync-modal">Close</button>
     </div>
   </div>
 </div>
@@ -393,7 +351,7 @@
     <p class="sub" id="details-sub"></p>
     <div id="details-body" class="plugin-list"></div>
     <div class="modal-actions">
-      <button class="modal-btn primary" data-close-modal="details-modal">Close</button>
+      <button class="btn btn-primary" data-close-modal="details-modal">Close</button>
     </div>
   </div>
 </div>
@@ -407,8 +365,8 @@
       <input id="confirm-purge" type="checkbox" checked> Also delete the working copy from disk
     </label>
     <div class="modal-actions">
-      <button class="modal-btn" data-close-modal="confirm-modal">Cancel</button>
-      <button class="modal-btn danger" id="confirm-ok-btn">Delete</button>
+      <button class="btn btn-secondary" data-close-modal="confirm-modal">Cancel</button>
+      <button class="btn btn-danger" id="confirm-ok-btn">Delete</button>
     </div>
   </div>
 </div>
@@ -424,8 +382,8 @@
     <p class="sub" id="system-confirm-plugin" style="margin: 0 0 14px; font-size: 13px; color: var(--text-primary, #111827); font-weight: 500;"></p>
     <div id="system-confirm-body" style="font-size: 13px; line-height: 1.55; color: var(--text-secondary, #374151);"></div>
     <div class="modal-actions">
-      <button class="modal-btn" data-close-modal="system-confirm-modal">Cancel</button>
-      <button class="modal-btn warning" id="system-confirm-ok-btn">Confirm</button>
+      <button class="btn btn-secondary" data-close-modal="system-confirm-modal">Cancel</button>
+      <button class="btn btn-warning" id="system-confirm-ok-btn">Confirm</button>
     </div>
   </div>
 </div>
@@ -683,8 +641,8 @@ function toggleSystem(btn, marketplaceId, marketplaceName) {
         <li>Operators can revoke either via <a href="/admin/access" style="color: var(--primary, #6366f1);">/admin/access</a> or by uninstalling on each user's stack.</li>
       </ul>`;
     okBtn.textContent = "Unmark system";
-    okBtn.classList.remove("warning");
-    okBtn.classList.add("primary");
+    okBtn.classList.remove("btn-warning");
+    okBtn.classList.add("btn-primary");
   } else {
     titleEl.textContent = "Mark as system plugin?";
     pluginEl.textContent = pluginName;
@@ -702,8 +660,8 @@ function toggleSystem(btn, marketplaceId, marketplaceName) {
         Unmarking later does not auto-clean the materialized grants — they stay until manually removed.
       </p>`;
     okBtn.textContent = "Mark as system";
-    okBtn.classList.remove("primary");
-    okBtn.classList.add("warning");
+    okBtn.classList.remove("btn-primary");
+    okBtn.classList.add("btn-warning");
   }
 
   // Single-shot handler — re-bind on every open so we don't leak across
diff --git a/app/web/templates/admin_scheduler_runs.html b/app/web/templates/admin_scheduler_runs.html
index f148d19..563c323 100644
--- a/app/web/templates/admin_scheduler_runs.html
+++ b/app/web/templates/admin_scheduler_runs.html
@@ -5,9 +5,6 @@
 <style>
   /* Width + padding come from .page-shell (style-custom.css) — same
      1280px container as /dashboard, /marketplace, /admin/* peers. */
-  .sched-title { margin: 0 0 8px 0; font-size: 22px; font-weight: 600; }
-  .sched-help { color: var(--text-secondary, #6b7280); font-size: 13px; margin-bottom: 20px; }
-  .sched-help code { background: var(--border-light, #f3f4f6); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
   .sched-table-wrap {
     background: var(--surface, #fff);
     border: 1px solid var(--border, #e5e7eb);
@@ -45,15 +42,10 @@
 </style>
 
 <div class="sched-page page-shell">
-  <h1 class="sched-title">Scheduler runs</h1>
-  <p class="sched-help">
-    Last 200 audited scheduler-driven admin actions, newest first.
-    Tracked actions: {% for a in actions %}<code>{{ a }}</code>{% if not loop.last %} {% endif %}{% endfor %}.
-    Failed ticks (HTTP 401, network errors) live only in the scheduler container's
-    stdout — <code>docker logs agnes-scheduler-1</code>. Set <code>SCHEDULER_API_TOKEN</code>
-    in <code>.env</code> if you see no rows here.
-  </p>
-
+  {% set page_hero_eyebrow = "Server" %}
+  {% set page_hero_title = "Scheduler runs" %}
+  {% set page_hero_subtitle = "Recent extractor + materialized + cache-warmup runs from the scheduler." %}
+  {% include "_page_hero.html" %}
   <div class="sched-table-wrap">
     {% if rows %}
     <table class="sched-table">
diff --git a/app/web/templates/admin_server_config.html b/app/web/templates/admin_server_config.html
index d238d3b..0dd395d 100644
--- a/app/web/templates/admin_server_config.html
+++ b/app/web/templates/admin_server_config.html
@@ -16,8 +16,6 @@
     display: flex; justify-content: space-between; align-items: center;
     gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
   }
-  .cfg-title { margin: 0; font-size: 22px; font-weight: 600; }
-  .cfg-subtitle { color: var(--text-secondary, #6b7280); font-size: 13px; margin-top: 4px; }
 
   .cfg-banner {
     padding: 12px 16px; border-radius: 8px;
@@ -163,8 +161,10 @@
 <div class="cfg-page" data-page="server-config">
   <div class="cfg-toolbar">
     <div>
-      <h2 class="cfg-title">Server configuration</h2>
-      <div class="cfg-subtitle">Edits land in <code>instance.yaml</code>. Save triggers an app restart (~10s downtime). Secret values are masked here — re-enter them to change.</div>
+      {% set page_hero_eyebrow = "Server" %}
+      {% set page_hero_title = "Server configuration" %}
+      {% set page_hero_subtitle = "Edits land in <code style=&quot;color:#fff;background:rgba(255,255,255,0.15);padding:1px 6px;border-radius:4px&quot;>instance.yaml</code>. Save triggers an app restart (~10s downtime). Secret values are masked here — re-enter them to change." %}
+      {% include "_page_hero.html" %}
     </div>
   </div>
 
diff --git a/app/web/templates/admin_session_detail.html b/app/web/templates/admin_session_detail.html
index 284fa17..67f692b 100644
--- a/app/web/templates/admin_session_detail.html
+++ b/app/web/templates/admin_session_detail.html
@@ -6,7 +6,10 @@
 
   <header class="obs-topbar">
     <div class="obs-topbar-left">
-      <h1 class="obs-title">Session transcript</h1>
+      {% set page_hero_eyebrow = "Activity Center" %}
+      {% set page_hero_title = "Session transcript" %}
+      {% set page_hero_subtitle = "Per-session JSONL viewer." %}
+      {% include "_page_hero.html" %}
       <p class="obs-subtitle">
         <a href="/admin/sessions">← All sessions</a>
         &nbsp;·&nbsp; <code>{{ username }}/{{ session_file }}</code>
@@ -31,7 +34,6 @@
 .obs-page { font: 14px/1.5 var(--font-sans, system-ui); color: var(--text-primary, #111827); }
 .obs-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
   padding: 12px 0 20px; border-bottom: 1px solid var(--border, #e5e7eb); margin-bottom: 16px; }
-.obs-title { margin: 0 0 4px 0; font-size: 22px; font-weight: 600; }
 .obs-subtitle { margin: 0 0 10px; color: var(--text-secondary, #6b7280); font-size: 13px; }
 .obs-subtitle a { color: #2563eb; text-decoration: none; }
 .obs-subtitle a:hover { text-decoration: underline; }
diff --git a/app/web/templates/admin_sessions.html b/app/web/templates/admin_sessions.html
index fbb52a6..aab6664 100644
--- a/app/web/templates/admin_sessions.html
+++ b/app/web/templates/admin_sessions.html
@@ -6,7 +6,10 @@
 
   <header class="obs-topbar">
     <div class="obs-topbar-left">
-      <h1 class="obs-title">Sessions</h1>
+      {% set page_hero_eyebrow = "Activity Center" %}
+      {% set page_hero_title = "Sessions" %}
+      {% set page_hero_subtitle = "Every collected JSONL across users plus a transcript viewer with next-error navigation." %}
+      {% include "_page_hero.html" %}
       <p class="obs-subtitle">All Claude Code sessions across every user. Also available locally for analysis. Click any row to read the full transcript; tick <b>Errors only</b> to surface sessions where tools failed.</p>
       <div class="obs-narrative" id="sx-narrative">Loading…</div>
     </div>
@@ -91,7 +94,6 @@
 .obs-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
   padding: 12px 0 20px; border-bottom: 1px solid var(--border, #e5e7eb); margin-bottom: 16px; }
 .obs-topbar-left { flex: 1; min-width: 0; }
-.obs-title { margin: 0 0 4px 0; font-size: 22px; font-weight: 600; }
 .obs-subtitle { margin: 0 0 10px; color: var(--text-secondary, #6b7280); font-size: 13px; max-width: 720px; }
 .obs-subtitle b { color: var(--text-primary, #111827); }
 .obs-narrative { font-size: 16px; line-height: 1.45; }
diff --git a/app/web/templates/admin_store_submission_detail.html b/app/web/templates/admin_store_submission_detail.html
index a4c7950..f87675e 100644
--- a/app/web/templates/admin_store_submission_detail.html
+++ b/app/web/templates/admin_store_submission_detail.html
@@ -46,14 +46,7 @@
   .badge.archived                                             { background: #e5e7eb; color: #374151; }
   .badge.deleted                                              { background: #4b5563; color: #f3f4f6; }
 
-  table.sub-table { width: 100%; border-collapse: collapse; font-size: 12px; }
-  table.sub-table th, table.sub-table td {
-    text-align: left; padding: 6px 10px;
-    border-bottom: 1px solid var(--border-light, #f3f4f6);
-    vertical-align: top;
-  }
-  table.sub-table th { color: var(--text-secondary, #6b7280); text-transform: uppercase; letter-spacing: 0.4px; font-size: 10px; }
-  table.sub-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
+  table.data-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
   ul.issues { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-secondary, #6b7280); }
 
   .det-summary { font-size: 14px; line-height: 1.5; margin: 8px 0 12px 0; }
@@ -76,14 +69,6 @@
   }
 
   .det-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
-  .btn {
-    padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border, #e5e7eb);
-    background: var(--surface, #fff); cursor: pointer;
-    font-size: 13px; font-weight: 500; color: var(--text, #111827);
-  }
-  .btn.primary { background: var(--text, #111827); color: var(--surface, #fff); border-color: var(--text, #111827); }
-  .btn.danger { color: #b91c1c; }
-  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
 
   .empty-msg { font-size: 13px; color: var(--text-secondary, #6b7280); font-style: italic; }
 
@@ -122,18 +107,7 @@
   @keyframes spin { to { transform: rotate(360deg); } }
   .pending-banner .elapsed { color: #92400e; opacity: 0.7; font-variant-numeric: tabular-nums; margin-left: auto; }
 
-  /* Toast — short-lived "action queued" message after rescan/retry.
-     Fades out so admins know the request was accepted before the page
-     reloads on completion. */
-  .toast {
-    position: fixed; bottom: 24px; right: 24px;
-    background: var(--text, #111827); color: var(--surface, #fff);
-    padding: 10px 16px; border-radius: 8px;
-    font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
-    opacity: 0; transition: opacity .25s ease;
-    z-index: 9999;
-  }
-  .toast.show { opacity: 1; }
+
 </style>
 
 <div class="det-page page-shell">
@@ -254,19 +228,19 @@
     {# Action buttons — same JSON endpoints as the list page. #}
     <div class="det-actions">
       {% if sub.status in ['blocked_inline','blocked_llm','review_error'] and sub.entity_id %}
-      <button class="btn primary" data-action="override" title="Force-publish this entity. Requires reason; recorded in audit_log.">Override + publish</button>
+      <button class="btn btn-primary" data-action="override" title="Force-publish this entity. Requires reason; recorded in audit_log.">Override + publish</button>
       {% endif %}
       {% if sub.entity_id %}
-      <button class="btn" data-action="rescan" title="Re-run all checks (inline + LLM) against the current bundle. Use after check rules change.">Rescan</button>
+      <button class="btn btn-secondary" data-action="rescan" title="Re-run all checks (inline + LLM) against the current bundle. Use after check rules change.">Rescan</button>
       {% endif %}
       {% if sub.entity_id and not sub.bundle_purged_at %}
-      <a class="btn" href="/api/admin/store/submissions/{{ sub.id }}/bundle.zip"
+      <a class="btn btn-secondary" href="/api/admin/store/submissions/{{ sub.id }}/bundle.zip"
          title="Download the on-disk bundle as a ZIP for forensic inspection. Audit-logged.">Download bundle</a>
       {% endif %}
       {% if sub.status in ['review_error','blocked_llm'] and sub.entity_id %}
-      <button class="btn" data-action="retry" title="Re-queue LLM review only (skips inline checks).">Retry LLM</button>
+      <button class="btn btn-secondary" data-action="retry" title="Re-queue LLM review only (skips inline checks).">Retry LLM</button>
       {% endif %}
-      <button class="btn danger" data-action="delete">Delete</button>
+      <button class="btn btn-danger" data-action="delete">Delete</button>
     </div>
     {# Help text: explain why override isn't shown on this row, when applicable. #}
     {% if sub.status == 'approved' %}
@@ -375,7 +349,7 @@
   <div class="det-card">
     <h2>Static security scan{{ _vchip() }} {% if ic.static_security %}<span class="badge {{ ic.static_security.status or 'pass' }}">{{ ic.static_security.status or 'pass' }}</span>{% endif %}</h2>
     {% if ic.static_security and ic.static_security.findings %}
-    <table class="sub-table">
+    <table class="data-table">
       <thead>
         <tr><th>Severity</th><th>Category</th><th>File:line</th><th>Reason</th><th>Snippet</th></tr>
       </thead>
@@ -430,7 +404,7 @@
           <p class="det-summary">{{ sub.llm_findings.summary }}</p>
         {% endif %}
         {% if sub.llm_findings.findings %}
-        <table class="sub-table">
+        <table class="data-table">
           <thead>
             <tr><th>Severity</th><th>Category</th><th>File</th><th>Explanation</th><th>Fix hint</th></tr>
           </thead>
@@ -473,18 +447,7 @@
   const subId = {{ sub.id|tojson }};
   const currentStatus = {{ sub.status|tojson }};
 
-  // Fire-and-forget toast in the bottom-right.
-  function toast(msg, ms) {
-    const el = document.createElement('div');
-    el.className = 'toast';
-    el.textContent = msg;
-    document.body.appendChild(el);
-    requestAnimationFrame(() => el.classList.add('show'));
-    setTimeout(() => {
-      el.classList.remove('show');
-      setTimeout(() => el.remove(), 300);
-    }, ms || 3500);
-  }
+  function toast(msg) { window.appToast({ kind: 'info', msg }); }
 
   // Tick the "Xs / Xm Ys" elapsed counter on the pending banner.
   function startElapsedTicker() {
diff --git a/app/web/templates/admin_store_submissions.html b/app/web/templates/admin_store_submissions.html
index dc11c65..bd360e2 100644
--- a/app/web/templates/admin_store_submissions.html
+++ b/app/web/templates/admin_store_submissions.html
@@ -5,9 +5,6 @@
 <style>
   /* Width + padding come from .page-shell (style-custom.css) — same
      1280px container as /dashboard, /marketplace, /admin/* peers. */
-  .subs-title { margin: 0 0 8px 0; font-size: 22px; font-weight: 600; }
-  .subs-help { color: var(--text-secondary, #6b7280); font-size: 13px; margin-bottom: 20px; }
-  .subs-help code { background: var(--border-light, #f3f4f6); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
 
   .subs-form {
     display: grid;
@@ -166,17 +163,10 @@
 {%- endmacro %}
 
 <div class="subs-page page-shell">
-  <h1 class="subs-title">Store submissions</h1>
-  <p class="subs-help">
-    Every upload to <code>/api/store/entities</code> writes one row here. Inline
-    checks (manifest, static security, quality+templating) run synchronously;
-    the LLM security review runs in the background and flips
-    <code>pending_llm → approved</code> or <code>blocked_llm</code>. Click a
-    row to see the full check breakdown. Override a blocked submission to
-    force-publish (audit trail captured), retry a <code>review_error</code>,
-    or delete spam outright. See <code>docs/STORE_GUARDRAILS.md</code>.
-  </p>
-
+  {% set page_hero_eyebrow = "Agent Experience" %}
+  {% set page_hero_title = "Flea Submissions" %}
+  {% set page_hero_subtitle = "Plugin / skill / agent submissions awaiting review." %}
+  {% include "_page_hero.html" %}
   <form class="subs-form" method="get" action="/admin/store/submissions">
     {# Preserve status filter when submitting other filters. #}
     {% if status_filter %}<input type="hidden" name="status" value="{{ status_filter }}">{% endif %}
diff --git a/app/web/templates/admin_tables.html b/app/web/templates/admin_tables.html
index 23016a1..0ae567f 100644
--- a/app/web/templates/admin_tables.html
+++ b/app/web/templates/admin_tables.html
@@ -1,16 +1,14 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Table Management - {{ config.INSTANCE_NAME }}</title>
-    {% if not config.THEME_FONT_URL %}
-    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    {% endif %}
-    <link rel="stylesheet" href="{{ url_for('static', filename='style-custom.css') }}">
-    <style>
+{% extends "base.html" %}
+
+{% block title %}Table Management - {{ config.INSTANCE_NAME }}{% endblock %}
+
+{% block body_attrs %}data-source-type="{{ data_source_type }}"{% endblock %}
+
+{% block head_extra %}
+<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
         :root {
             /* Colors - Design System */
             --primary: #0073D1;
@@ -860,14 +858,10 @@
             margin-bottom: 16px;
         }
     </style>
-    {% include '_theme.html' %}
-</head>
-<body data-source-type="{{ data_source_type }}">
+{% endblock %}
 
-    <!-- ═══════════════ HEADER ═══════════════ -->
-    {% include '_app_header.html' %}
-
-    <!-- ═══════════════ PAGE TITLE ═══════════════ -->
+{% block layout %}
+<!-- ═══════════════ PAGE TITLE ═══════════════ -->
     <div class="page-title">
         <h1>Table Management</h1>
         <p>Discover, register, and manage data tables from your source</p>
@@ -1763,7 +1757,10 @@
     <footer class="footer">
         <a href="{{ url_for('dashboard') }}">Back to Dashboard</a>
         </footer>
-    <script>
+{% endblock %}
+
+{% block scripts %}
+<script>
     /* ═══════════════════════════════════════════════════════════════
        Admin Tables - JavaScript
        ═══════════════════════════════════════════════════════════════ */
@@ -3558,6 +3555,4 @@
     document.addEventListener('DOMContentLoaded', cacheWarmupInit);
 
     </script>
-    {% include "_version_badge.html" %}
-</body>
-</html>
+{% endblock %}
diff --git a/app/web/templates/admin_tokens.html b/app/web/templates/admin_tokens.html
index 8e9a9a2..6af8284 100644
--- a/app/web/templates/admin_tokens.html
+++ b/app/web/templates/admin_tokens.html
@@ -554,35 +554,6 @@
     justify-content: flex-end;
     margin-top: 24px;
   }
-  .modal-btn {
-    padding: 10px 18px;
-    border-radius: 8px;
-    font-size: 13.5px;
-    font-weight: 500;
-    font-family: var(--font-primary, inherit);
-    cursor: pointer;
-    transition: all 0.15s ease;
-    border: 1px solid var(--border, #e5e7eb);
-    background: var(--surface, #fff);
-    color: var(--text-primary, #1A253C);
-  }
-  .modal-btn:hover {
-    border-color: #cbd5e1;
-    background: var(--background, #F5F7FA);
-  }
-  .modal-btn.danger {
-    background: #dc2626;
-    color: #fff;
-    border-color: #dc2626;
-  }
-  .modal-btn.danger:hover {
-    background: #b91c1c;
-    border-color: #b91c1c;
-  }
-  .modal-btn:focus-visible {
-    outline: 2px solid #0073D1;
-    outline-offset: 2px;
-  }
 
   /* ── Toast ─────────────────────────────────────────────────────────────── */
   .toast-stack {
@@ -768,8 +739,8 @@
     </p>
     <div class="modal-meta" id="confirm-meta" aria-hidden="true"></div>
     <div class="modal-actions">
-      <button class="modal-btn" id="confirm-cancel-btn" data-close-modal="confirm-modal">Cancel</button>
-      <button class="modal-btn danger" id="confirm-ok-btn">Revoke token</button>
+      <button class="btn btn-secondary" id="confirm-cancel-btn" data-close-modal="confirm-modal">Cancel</button>
+      <button class="btn btn-danger" id="confirm-ok-btn">Revoke token</button>
     </div>
   </div>
 </div>
diff --git a/app/web/templates/admin_usage.html b/app/web/templates/admin_usage.html
index 6697c5f..4287bad 100644
--- a/app/web/templates/admin_usage.html
+++ b/app/web/templates/admin_usage.html
@@ -6,7 +6,10 @@
 
   <header class="obs-topbar">
     <div class="obs-topbar-left">
-      <h1 class="obs-title">Telemetry</h1>
+      {% set page_hero_eyebrow = "Activity Center" %}
+      {% set page_hero_title = "Telemetry" %}
+      {% set page_hero_subtitle = "Claude Code tool / skill / agent / slash-command invocations across users." %}
+      {% include "_page_hero.html" %}
       <p class="obs-subtitle">Tool and skill invocations from Claude Code. Also available locally for analysis. For server-side admin / API audit events, see <a href="/admin/activity">Audit log</a>.</p>
       <div class="obs-narrative" id="usage-narrative">Loading…</div>
     </div>
@@ -109,7 +112,6 @@
 .obs-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
   padding: 12px 0 20px; border-bottom: 1px solid var(--border, #e5e7eb); margin-bottom: 16px; }
 .obs-topbar-left { flex: 1; min-width: 0; }
-.obs-title { margin: 0 0 4px 0; font-size: 22px; font-weight: 600; color: var(--text-primary, #111827); }
 .obs-subtitle { margin: 0 0 10px; color: var(--text-secondary, #6b7280); font-size: 13px; max-width: 720px; }
 .obs-subtitle a { color: #2563eb; text-decoration: none; border-bottom: 1px dashed currentColor; }
 .obs-subtitle a:hover { border-bottom-style: solid; }
diff --git a/app/web/templates/admin_user_detail.html b/app/web/templates/admin_user_detail.html
index ee043c7..f70bb6b 100644
--- a/app/web/templates/admin_user_detail.html
+++ b/app/web/templates/admin_user_detail.html
@@ -17,12 +17,6 @@
   }
   .ud-back:hover { color: var(--text-primary, #111827); }
   .ud-title-block { flex: 1; }
-  .ud-title { font-size: 22px; font-weight: 600; margin: 0; }
-  .ud-subtitle {
-    font-size: 13px; color: var(--text-secondary, #6b7280);
-    font-family: var(--font-mono, ui-monospace, monospace);
-    margin-top: 2px;
-  }
   .ud-status-pill {
     display: inline-block; padding: 3px 10px; border-radius: 999px;
     font-size: 11px; font-weight: 600;
@@ -218,12 +212,10 @@
   <div class="ud-header">
     <a href="/admin/users" class="ud-back">← Back to users</a>
     <div class="ud-title-block">
-      <h1 class="ud-title">
-        {{ target_user.name or target_user.email }}
-        <span id="status-pill" class="ud-status-pill"
-              style="display:none; vertical-align: middle; margin-left: 8px;"></span>
-      </h1>
-      <div class="ud-subtitle">{{ target_user.email }} · id {{ target_user.id[:8] }}…</div>
+      {% set page_hero_eyebrow = "Users & Access" %}
+      {% set page_hero_title = "User detail" %}
+      {% set page_hero_subtitle = "Account, group memberships, sessions, and activity for one user." %}
+      {% include "_page_hero.html" %}
     </div>
   </div>
 
diff --git a/app/web/templates/admin_users.html b/app/web/templates/admin_users.html
index 8de1e60..be8bb88 100644
--- a/app/web/templates/admin_users.html
+++ b/app/web/templates/admin_users.html
@@ -10,39 +10,7 @@
     display: flex; justify-content: space-between; align-items: center;
     gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
   }
-  .users-title { margin: 0; font-size: 22px; font-weight: 600; }
-  .users-search {
-    flex: 1; max-width: 360px;
-    padding: 8px 12px 8px 36px;
-    border: 1px solid var(--border, #e5e7eb);
-    border-radius: 8px;
-    font-size: 13px;
-    background: var(--surface, #fff) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>") no-repeat 12px center;
-  }
-  .users-search:focus { outline: 2px solid var(--primary, #6366f1); outline-offset: -1px; }
 
-  .users-table-wrap {
-    background: var(--surface, #fff);
-    border: 1px solid var(--border, #e5e7eb);
-    border-radius: 12px;
-    overflow-x: auto;
-  }
-  .users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
-  .users-table thead th {
-    text-align: left; padding: 12px 16px;
-    background: var(--border-light, #f9fafb);
-    border-bottom: 1px solid var(--border, #e5e7eb);
-    font-weight: 600; color: var(--text-secondary, #6b7280);
-    font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
-  }
-  .users-table tbody td {
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--border-light, #f3f4f6);
-    vertical-align: middle;
-  }
-  .users-table tbody tr:last-child td { border-bottom: none; }
-  .users-table tbody tr.is-deactivated { opacity: 0.55; }
-  .users-table tbody tr:hover { background: var(--border-light, #fafafa); }
 
   /* Whole user-info cell is the click target for the detail page —
      anchor wraps avatar + name + email so the entire block lights up
@@ -161,16 +129,6 @@
   }
   .modal-card input:focus, .modal-card select:focus { outline: 2px solid var(--primary, #6366f1); outline-offset: -1px; }
   .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
-  .modal-btn {
-    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
-    border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
-    cursor: pointer; transition: all 0.15s;
-  }
-  .modal-btn:hover { background: var(--border-light, #f9fafb); }
-  .modal-btn.primary { background: var(--primary, #6366f1); color: #fff; border-color: var(--primary, #6366f1); }
-  .modal-btn.primary:hover { filter: brightness(1.05); }
-  .modal-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
-  .modal-btn.danger:hover { filter: brightness(1.05); }
 
   .token-reveal {
     margin: 12px 0;
@@ -208,13 +166,16 @@
 
 <div class="users-page">
   <div class="users-toolbar">
-    <h2 class="users-title">Users</h2>
-    <input id="user-search" type="search" class="users-search" placeholder="Filter by email or name…" autocomplete="off">
-    <button class="modal-btn primary" id="open-create-btn">+ Add user</button>
+    {% set page_hero_eyebrow = "Users & Access" %}
+    {% set page_hero_title = "Users" %}
+    {% set page_hero_subtitle = "Manage analyst accounts and group membership." %}
+    {% include "_page_hero.html" %}
+    <input id="user-search" type="search" class="search-input" placeholder="Filter by email or name…" autocomplete="off">
+    <button class="btn btn-primary" id="open-create-btn">+ Add user</button>
   </div>
 
-  <div class="users-table-wrap">
-    <table class="users-table" id="users-table">
+  <div class="data-table-wrap">
+    <table class="data-table" id="users-table">
       <thead>
         <tr>
           <th>User</th>
@@ -254,8 +215,8 @@
       Send invitation link (generates setup token, emails it if transport is configured)
     </label>
     <div class="modal-actions">
-      <button class="modal-btn" data-close-modal="create-modal">Cancel</button>
-      <button class="modal-btn primary" id="confirm-create-btn">Create</button>
+      <button class="btn btn-secondary" data-close-modal="create-modal">Cancel</button>
+      <button class="btn btn-primary" id="confirm-create-btn">Create</button>
     </div>
   </div>
 </div>
@@ -268,8 +229,8 @@
     <label for="setpwd-input">New password (min 8 chars)</label>
     <input id="setpwd-input" type="password" autocomplete="new-password">
     <div class="modal-actions">
-      <button class="modal-btn" data-close-modal="setpwd-modal">Cancel</button>
-      <button class="modal-btn primary" id="confirm-setpwd-btn">Set password</button>
+      <button class="btn btn-secondary" data-close-modal="setpwd-modal">Cancel</button>
+      <button class="btn btn-primary" id="confirm-setpwd-btn">Set password</button>
     </div>
   </div>
 </div>
@@ -285,7 +246,7 @@
       <button class="copy-btn" id="reset-copy-btn">Copy</button>
     </div>
     <div class="modal-actions">
-      <button class="modal-btn primary" data-close-modal="reset-modal">Done</button>
+      <button class="btn btn-primary" data-close-modal="reset-modal">Done</button>
     </div>
   </div>
 </div>
@@ -301,7 +262,7 @@
       <button class="copy-btn" id="invite-copy-btn">Copy</button>
     </div>
     <div class="modal-actions">
-      <button class="modal-btn primary" data-close-modal="invite-modal">Done</button>
+      <button class="btn btn-primary" data-close-modal="invite-modal">Done</button>
     </div>
   </div>
 </div>
@@ -312,8 +273,8 @@
     <h3 id="confirm-title">Are you sure?</h3>
     <p class="sub" id="confirm-text"></p>
     <div class="modal-actions">
-      <button class="modal-btn" data-close-modal="confirm-modal">Cancel</button>
-      <button class="modal-btn danger" id="confirm-ok-btn">Confirm</button>
+      <button class="btn btn-secondary" data-close-modal="confirm-modal">Cancel</button>
+      <button class="btn btn-danger" id="confirm-ok-btn">Confirm</button>
     </div>
   </div>
 </div>
diff --git a/app/web/templates/admin_welcome.html b/app/web/templates/admin_welcome.html
index 2657469..eb13f6f 100644
--- a/app/web/templates/admin_welcome.html
+++ b/app/web/templates/admin_welcome.html
@@ -27,8 +27,6 @@
     display: flex; justify-content: space-between; align-items: center;
     gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
   }
-  .welcome-title { margin: 0; font-size: 22px; font-weight: 600; }
-  .welcome-sub { color: var(--text-secondary, #6b7280); font-size: 13px; margin-top: 4px; margin-bottom: 0; }
 
   .origin-chip {
     display: inline-block;
@@ -188,12 +186,6 @@
   .modal-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
   .modal-card p.sub { margin: 0 0 18px; font-size: 13px; color: var(--text-secondary, #6b7280); }
   .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
-  .modal-btn {
-    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
-    border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
-    cursor: pointer;
-  }
-  .modal-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
 
   /* Toast stack */
   .toast-stack {
@@ -214,8 +206,10 @@
 <div class="welcome-page">
   <div class="welcome-toolbar">
     <div>
-      <h2 class="welcome-title">Init Prompt</h2>
-      <p class="welcome-sub">The bash setup script shown on <code>/setup</code> and copied by the dashboard CTA.</p>
+      {% set page_hero_eyebrow = "Agent Experience" %}
+      {% set page_hero_title = "Init Prompt" %}
+      {% set page_hero_subtitle = "Welcome shown to analysts at <code style=&quot;color:#fff;background:rgba(255,255,255,0.15);padding:1px 6px;border-radius:4px&quot;>agnes init</code>. Overrides the OSS default." %}
+      {% include "_page_hero.html" %}
     </div>
     <div id="status-chip">
       {% if is_override %}
@@ -290,8 +284,8 @@
     <h3 id="reset-modal-title">Reset to default?</h3>
     <p class="sub">Your override will be permanently removed. The auto-generated bash bootstrap script will be shown on <code>/setup</code> instead. This cannot be undone.</p>
     <div class="modal-actions">
-      <button class="modal-btn" data-close-modal="reset-modal">Cancel</button>
-      <button class="modal-btn danger" id="reset-confirm-btn">Reset</button>
+      <button class="btn btn-secondary" data-close-modal="reset-modal">Cancel</button>
+      <button class="btn btn-danger" id="reset-confirm-btn">Reset</button>
     </div>
   </div>
 </div>
diff --git a/app/web/templates/admin_workspace_prompt.html b/app/web/templates/admin_workspace_prompt.html
index 5ce3a39..fb8327d 100644
--- a/app/web/templates/admin_workspace_prompt.html
+++ b/app/web/templates/admin_workspace_prompt.html
@@ -27,8 +27,6 @@
     display: flex; justify-content: space-between; align-items: center;
     gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
   }
-  .welcome-title { margin: 0; font-size: 22px; font-weight: 600; }
-  .welcome-sub { color: var(--text-secondary, #6b7280); font-size: 13px; margin-top: 4px; margin-bottom: 0; }
 
   .origin-chip {
     display: inline-block;
@@ -188,12 +186,6 @@
   .modal-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
   .modal-card p.sub { margin: 0 0 18px; font-size: 13px; color: var(--text-secondary, #6b7280); }
   .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
-  .modal-btn {
-    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
-    border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
-    cursor: pointer;
-  }
-  .modal-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
 
   /* Toast stack */
   .toast-stack {
@@ -214,8 +206,10 @@
 <div class="welcome-page">
   <div class="welcome-toolbar">
     <div>
-      <h2 class="welcome-title">Workspace Prompt</h2>
-      <p class="welcome-sub">Customize the <code>CLAUDE.md</code> Claude Code reads when it opens the analyst workspace.</p>
+      {% set page_hero_eyebrow = "Agent Experience" %}
+      {% set page_hero_title = "Workspace Prompt" %}
+      {% set page_hero_subtitle = "CLAUDE.md template injected into each analyst workspace. Overrides the OSS default." %}
+      {% include "_page_hero.html" %}
     </div>
     <div id="status-chip">
       {% if is_override %}
@@ -314,8 +308,8 @@
     <h3 id="reset-modal-title">Reset to default?</h3>
     <p class="sub">Your override will be permanently removed. The rich default CLAUDE.md briefing will be written to analyst workspaces instead. This cannot be undone.</p>
     <div class="modal-actions">
-      <button class="modal-btn" data-close-modal="reset-modal">Cancel</button>
-      <button class="modal-btn danger" id="reset-confirm-btn">Reset</button>
+      <button class="btn btn-secondary" data-close-modal="reset-modal">Cancel</button>
+      <button class="btn btn-danger" id="reset-confirm-btn">Reset</button>
     </div>
   </div>
 </div>
diff --git a/app/web/templates/base.html b/app/web/templates/base.html
index 0d3ece2..4886e9b 100644
--- a/app/web/templates/base.html
+++ b/app/web/templates/base.html
@@ -4,12 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Data Analyst Portal{% endblock %}</title>
-    <link rel="stylesheet" href="{{ static_url('style.css') }}">
     <link rel="stylesheet" href="{{ static_url('style-custom.css') }}">
+    {# app.js loaded by _app_header.html itself so standalone pages
+       (catalog, corporate-memory, install, admin_tables) that don't
+       extend base.html also get the nav-dropdown wiring. #}
     {% block head_extra %}{% endblock %}
     {% include '_theme.html' %}
 </head>
-<body>
+<body {% block body_attrs %}{% endblock %}>
     {% include '_app_header.html' %}
 
     {# `layout` block: pages opt out of the narrow .container wrap by overriding
diff --git a/app/web/templates/base_login.html b/app/web/templates/base_login.html
index 4775469..366d6de 100644
--- a/app/web/templates/base_login.html
+++ b/app/web/templates/base_login.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Data Analyst Portal{% endblock %}</title>
-    <link rel="stylesheet" href="{{ static_url('style.css') }}">
     <link rel="stylesheet" href="{{ static_url('style-custom.css') }}">
     {% include '_theme.html' %}
 </head>
diff --git a/app/web/templates/catalog.html b/app/web/templates/catalog.html
index e31b8d6..5e6571f 100644
--- a/app/web/templates/catalog.html
+++ b/app/web/templates/catalog.html
@@ -1,16 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Data Catalog - Data Analyst Portal</title>
-    {% if not config.THEME_FONT_URL %}
-    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    {% endif %}
-    <link rel="stylesheet" href="{{ url_for('static', filename='style-custom.css') }}">
-    <style>
+{% extends "base.html" %}
+
+{% block title %}Data Packages - Data Analyst Portal{% endblock %}
+
+{% block head_extra %}
+<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
         :root {
             /* Colors - Design System */
             --primary: #0073D1;
@@ -111,27 +107,12 @@
         }
 
         /* ── Page Title ── */
-        .page-title {
-            max-width: 900px;
-            margin: 0 auto;
-            padding: 32px 24px 24px;
-        }
 
-        .page-title h1 {
-            font-size: 24px;
-            font-weight: 800;
-            color: var(--text-primary);
-            margin-bottom: 4px;
-        }
 
-        .page-title p {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
 
         /* ── Source Cards ── */
         .source-cards {
-            max-width: 900px;
+            max-width: var(--width-app);
             margin: 0 auto;
             padding: 0 24px 32px;
             display: flex;
@@ -1336,23 +1317,17 @@
             font-size: 13px;
         }
     </style>
-    <link rel="stylesheet" href="{{ url_for('static', filename='style-custom.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/metric_modal.css', v=git_version) }}">
-    <!-- Prism.js for SQL syntax highlighting -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
-    {% include '_theme.html' %}
-</head>
-<body>
+<link rel="stylesheet" href="{{ url_for('static', filename='css/metric_modal.css', v=git_version) }}">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+{% endblock %}
 
-    <!-- ═══════════════ HEADER ═══════════════ -->
-    {% include '_app_header.html' %}
-
-    <!-- ═══════════════ PAGE TITLE ═══════════════ -->
-    <div class="page-title">
-        <h1>Data Catalog</h1>
-        <p>Browse available data sources and manage your subscriptions</p>
-    </div>
+{% block layout %}
+<!-- ═══════════════ PAGE TITLE ═══════════════ -->
+    {% set page_hero_eyebrow = "Data" %}
+    {% set page_hero_title = "Data Packages" %}
+    {% set page_hero_subtitle = "Browse the data sources available to your AI agents." %}
+    {% include "_page_hero.html" %}
 
     <!-- ═══════════════ SOURCE CARDS ═══════════════ -->
     <div class="source-cards">
@@ -1381,13 +1356,6 @@
                         </div>
                     </div>
                 </div>
-                <div class="source-card-right">
-                    <span class="badge-included">Always included</span>
-                    <label class="toggle-switch locked">
-                        <input type="checkbox" checked disabled>
-                        <span class="toggle-slider"></span>
-                    </label>
-                </div>
             </div>
 
             {% for category in catalog_data %}
@@ -1496,13 +1464,6 @@
                         <div class="source-card-meta">{{ metrics_total.n }} metrics &middot; {{ metrics_data|length }} categories</div>
                     </div>
                 </div>
-                <div class="source-card-right">
-                    <span class="badge-included">Always included</span>
-                    <label class="toggle-switch locked">
-                        <input type="checkbox" checked disabled>
-                        <span class="toggle-slider"></span>
-                    </label>
-                </div>
             </div>
 
             {% if data_stats and data_stats.last_updated %}
@@ -1608,6 +1569,56 @@
     <footer class="footer">
         <p>&copy; {{ config.INSTANCE_COPYRIGHT or 'AI Data Analyst' }} &middot; Updated daily</p>
         </footer>
+
+
+<!-- ═══════════════ METRIC MODAL ═══════════════ -->
+<div id="metricModalOverlay" class="metric-modal-overlay">
+    <div id="metricModal" class="metric-modal" onclick="event.stopPropagation()">
+        <!-- Header -->
+        <div class="metric-modal-header">
+            <div class="metric-modal-title-section">
+                <h2 id="metricModalTitle" class="metric-modal-title"></h2>
+                <div id="metricModalMetadata" class="metric-metadata-chips"></div>
+            </div>
+            <button class="metric-modal-close" onclick="closeMetricModal()" aria-label="Close modal">
+                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+                </svg>
+            </button>
+        </div>
+
+        <!-- Tabs -->
+        <nav class="metric-tabs">
+            <button class="metric-tab active" data-tab="tabOverview" onclick="switchMetricTab('tabOverview')">
+                Overview
+            </button>
+            <button class="metric-tab" data-tab="tabHowToUse" onclick="switchMetricTab('tabHowToUse')">
+                How to Use
+            </button>
+            <button class="metric-tab" data-tab="tabSQLExamples" onclick="switchMetricTab('tabSQLExamples')">
+                SQL Examples
+            </button>
+            <button class="metric-tab" data-tab="tabTechnical" onclick="switchMetricTab('tabTechnical')">
+                Metric Details
+            </button>
+        </nav>
+
+        <!-- Body -->
+        <div id="metricModalBody" class="metric-modal-body">
+            <!-- Content loaded dynamically -->
+        </div>
+    </div>
+</div>
+
+<!-- Prism.js for SQL syntax highlighting -->
+
+
+
+
+<!-- Mermaid.js for relationship diagrams -->
+{% endblock %}
+
+{% block scripts %}
 <script>
 /* ═══════════════ ACCORDION ═══════════════ */
 function toggleAccordion(trigger) {
@@ -2476,52 +2487,9 @@ document.addEventListener('keydown', e => {
     });
 })();
 </script>
-
-<!-- ═══════════════ METRIC MODAL ═══════════════ -->
-<div id="metricModalOverlay" class="metric-modal-overlay">
-    <div id="metricModal" class="metric-modal" onclick="event.stopPropagation()">
-        <!-- Header -->
-        <div class="metric-modal-header">
-            <div class="metric-modal-title-section">
-                <h2 id="metricModalTitle" class="metric-modal-title"></h2>
-                <div id="metricModalMetadata" class="metric-metadata-chips"></div>
-            </div>
-            <button class="metric-modal-close" onclick="closeMetricModal()" aria-label="Close modal">
-                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
-                </svg>
-            </button>
-        </div>
-
-        <!-- Tabs -->
-        <nav class="metric-tabs">
-            <button class="metric-tab active" data-tab="tabOverview" onclick="switchMetricTab('tabOverview')">
-                Overview
-            </button>
-            <button class="metric-tab" data-tab="tabHowToUse" onclick="switchMetricTab('tabHowToUse')">
-                How to Use
-            </button>
-            <button class="metric-tab" data-tab="tabSQLExamples" onclick="switchMetricTab('tabSQLExamples')">
-                SQL Examples
-            </button>
-            <button class="metric-tab" data-tab="tabTechnical" onclick="switchMetricTab('tabTechnical')">
-                Metric Details
-            </button>
-        </nav>
-
-        <!-- Body -->
-        <div id="metricModalBody" class="metric-modal-body">
-            <!-- Content loaded dynamically -->
-        </div>
-    </div>
-</div>
-
-<!-- Prism.js for SQL syntax highlighting -->
 <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-sql.min.js"></script>
 <script src="{{ url_for('static', filename='js/metric_modal.js', v=git_version) }}"></script>
-
-<!-- Mermaid.js for relationship diagrams -->
 <script type="module">
     import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
     mermaid.initialize({
@@ -2548,6 +2516,4 @@ document.addEventListener('keydown', e => {
     // Expose mermaid globally for lazy rendering
     window.mermaid = mermaid;
 </script>
-    {% include "_version_badge.html" %}
-</body>
-</html>
+{% endblock %}
diff --git a/app/web/templates/corporate_memory.html b/app/web/templates/corporate_memory.html
index 305e229..889e8b7 100644
--- a/app/web/templates/corporate_memory.html
+++ b/app/web/templates/corporate_memory.html
@@ -1,16 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Curated Memory — Admin</title>
-    {% if not config.THEME_FONT_URL %}
-    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    {% endif %}
-    <link rel="stylesheet" href="{{ url_for('static', filename='style-custom.css') }}">
-    <style>
+{% extends "base.html" %}
+
+{% block title %}Curated Memory — Admin{% endblock %}
+
+{% block head_extra %}
+<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
         /* Corporate Memory Page - Design System Styles */
         .container-memory {
             max-width: 1000px;
@@ -593,13 +589,10 @@
             }
         }
     </style>
-    {% include '_theme.html' %}
-</head>
-<body>
-    <!-- Header (outside container so it spans full viewport, matching dashboard) -->
-    {% include '_app_header.html' %}
+{% endblock %}
 
-    <div class="container-memory">
+{% block layout %}
+<div class="container-memory">
         {# Match the obs-page header pattern used by /admin/activity,
            /admin/telemetry and /admin/sessions so admins see one
            consistent visual chrome across the Activity Center + Agent
@@ -826,8 +819,10 @@
         </div>
         {% endif %}
     </div>
+{% endblock %}
 
-    <script>
+{% block scripts %}
+<script>
     // Store user votes locally for UI updates
     let userVotes = {{ user_votes | tojson }};
     let currentPage = {{ knowledge.page }};
@@ -1108,6 +1103,4 @@
         }
     }
     </script>
-    {% include "_version_badge.html" %}
-</body>
-</html>
+{% endblock %}
diff --git a/app/web/templates/corporate_memory_admin.html b/app/web/templates/corporate_memory_admin.html
index da60703..0f9b288 100644
--- a/app/web/templates/corporate_memory_admin.html
+++ b/app/web/templates/corporate_memory_admin.html
@@ -1,16 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Corporate Memory Admin - Data Analyst Portal</title>
-    {% if not config.THEME_FONT_URL %}
-    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    {% endif %}
-    <link rel="stylesheet" href="{{ url_for('static', filename='style-custom.css') }}">
-    <style>
+{% extends "base.html" %}
+
+{% block title %}Corporate Memory Admin - Data Analyst Portal{% endblock %}
+
+{% block head_extra %}
+<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
         /* Corporate Memory Admin - Design System Styles */
         .container-memory {
             max-width: 1000px;
@@ -563,42 +559,10 @@
         }
 
         /* Audit Log Table */
-        .audit-table {
-            width: 100%;
-            border-collapse: separate;
-            border-spacing: 0;
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: var(--radius-xl);
-            overflow: hidden;
-            box-shadow: var(--shadow-sm);
-        }
 
-        .audit-table th {
-            padding: var(--space-3) var(--space-4);
-            text-align: left;
-            font-size: var(--text-xs);
-            font-weight: var(--font-semibold);
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            background: var(--background);
-            border-bottom: 1px solid var(--border);
-        }
 
-        .audit-table td {
-            padding: var(--space-3) var(--space-4);
-            font-size: var(--text-sm);
-            color: var(--text-primary);
-            border-bottom: 1px solid var(--border-light);
-        }
 
-        .audit-table tr:last-child td {
-            border-bottom: none;
-        }
 
-        .audit-table tr:hover td {
-            background: var(--border-light);
-        }
 
         .action-badge {
             display: inline-flex;
@@ -827,23 +791,16 @@
                 flex-wrap: wrap;
             }
 
-            .audit-table {
-                display: block;
-                overflow-x: auto;
-            }
 
             .shortcut-hint {
                 display: none !important;
             }
         }
     </style>
-    {% include '_theme.html' %}
-</head>
-<body>
-    <!-- Header (outside container so it spans full viewport, matching dashboard) -->
-    {% include '_app_header.html' %}
+{% endblock %}
 
-    <div class="container-memory">
+{% block layout %}
+<div class="container-memory">
         <!-- Stats Bar -->
         <div class="stats-bar">
             <div class="stat-item highlight">
@@ -1145,8 +1102,10 @@
 
     <!-- Toast notification -->
     <div id="toast" class="toast"></div>
+{% endblock %}
 
-    <script>
+{% block scripts %}
+<script>
     // Configuration passed from server
     const GROUPS = {{ groups | tojson }};
     const GOVERNANCE_MODE = {{ governance_mode | tojson }};
@@ -1896,7 +1855,7 @@
         }).join('');
 
         content.innerHTML = `
-            <table class="audit-table">
+            <table class="data-table">
                 <thead>
                     <tr>
                         <th>Timestamp</th>
@@ -2220,6 +2179,4 @@
 
     loadReviewQueue(1);
     </script>
-    {% include "_version_badge.html" %}
-</body>
-</html>
+{% endblock %}
diff --git a/app/web/templates/dashboard.html b/app/web/templates/dashboard.html
index d36d37c..fd0e4cf 100644
--- a/app/web/templates/dashboard.html
+++ b/app/web/templates/dashboard.html
@@ -222,572 +222,6 @@
             padding: 20px 24px 24px;
         }
 
-        /* ── Section Title ── */
-        .section-title {
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.6px;
-            margin-bottom: 16px;
-        }
-
-        /* ── Data Source Cards ── */
-        .data-source {
-            padding: 22px 24px;
-            border-bottom: 1px solid var(--border-light);
-        }
-
-        .data-source:last-of-type {
-            border-bottom: none;
-        }
-
-        .data-source-header {
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-            margin-bottom: 12px;
-        }
-
-        .data-source-info {
-            display: flex;
-            align-items: center;
-            gap: 14px;
-        }
-
-        .data-source-icon {
-            width: 44px;
-            height: 44px;
-            border-radius: 10px;
-            background: var(--border-light);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-        }
-
-        .data-source-icon svg {
-            color: #6B7280;
-        }
-
-        .data-source-icon.realtime {
-            background: rgba(16, 183, 127, 0.1);
-        }
-
-        .data-source-icon.realtime svg {
-            color: var(--success);
-        }
-
-        .data-source-icon.disabled {
-            background: #F3F4F6;
-        }
-
-        .data-source-icon.disabled svg {
-            color: #9CA3AF;
-        }
-
-        .data-source-name {
-            font-size: 15px;
-            font-weight: 600;
-            color: var(--text-primary);
-            margin-bottom: 4px;
-        }
-
-        .data-source-status {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-
-        .status-dot {
-            width: 7px;
-            height: 7px;
-            border-radius: 50%;
-            background: var(--success);
-            flex-shrink: 0;
-        }
-
-        .status-dot--live {
-            animation: pulse-dot 2s ease-in-out infinite;
-        }
-
-        @keyframes pulse-dot {
-            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 183, 127, 0.4); }
-            50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(16, 183, 127, 0); }
-        }
-
-        .data-source-details {
-            font-size: 13px;
-            color: var(--text-secondary);
-            line-height: 1.6;
-            margin-left: 58px;
-        }
-
-        .badge-included {
-            flex-shrink: 0;
-            font-size: 11px;
-            font-weight: 500;
-            color: #059669;
-            background: rgba(16, 183, 127, 0.1);
-            border-radius: 6px;
-            padding: 4px 10px;
-            white-space: nowrap;
-            align-self: center;
-        }
-
-        .badge-subscribed {
-            flex-shrink: 0;
-            font-size: 11px;
-            font-weight: 500;
-            color: var(--primary);
-            background: var(--primary-light);
-            border-radius: 6px;
-            padding: 4px 10px;
-            white-space: nowrap;
-            align-self: center;
-        }
-
-        .badge-disabled {
-            flex-shrink: 0;
-            font-size: 11px;
-            font-weight: 500;
-            color: #9CA3AF;
-            background: #F3F4F6;
-            border-radius: 6px;
-            padding: 4px 10px;
-            white-space: nowrap;
-            align-self: center;
-        }
-
-        /* ── Toggles inside data source ── */
-        .data-source-toggles {
-            display: flex;
-            gap: 16px;
-            margin-left: 58px;
-            margin-top: 12px;
-            padding-top: 12px;
-            border-top: 1px solid var(--border-light);
-        }
-
-        .toggle-item {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .toggle-switch {
-            position: relative;
-            width: 36px;
-            height: 20px;
-        }
-
-        .toggle-switch input {
-            opacity: 0;
-            width: 0;
-            height: 0;
-        }
-
-        .toggle-slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: #E5E7EB;
-            transition: .2s;
-            border-radius: 20px;
-        }
-
-        .toggle-slider:before {
-            position: absolute;
-            content: "";
-            height: 14px;
-            width: 14px;
-            left: 3px;
-            bottom: 3px;
-            background-color: white;
-            transition: .2s;
-            border-radius: 50%;
-        }
-
-        input:checked + .toggle-slider {
-            background-color: var(--primary);
-        }
-
-        input:checked + .toggle-slider:before {
-            transform: translateX(16px);
-        }
-
-        /* Disabled/locked toggle */
-        .toggle-switch.locked .toggle-slider {
-            cursor: not-allowed;
-            background-color: #9CA3AF;
-        }
-
-        .toggle-switch.locked .toggle-slider:before {
-            transform: translateX(16px);
-        }
-
-        input:disabled + .toggle-slider {
-            cursor: not-allowed;
-            opacity: 0.6;
-        }
-
-        .toggle-label {
-            font-size: 12px;
-            color: var(--text-primary);
-            font-weight: 500;
-        }
-
-        .toggle-label.locked {
-            color: var(--text-secondary);
-        }
-
-        /* ── Catalog CTA ── */
-        .catalog-cta {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 18px 24px;
-            border-top: 1px solid var(--border-light);
-            background: var(--primary-light);
-            border-radius: 0 0 12px 12px;
-        }
-
-        .catalog-cta-text {
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-
-        .catalog-cta-link {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--primary);
-            text-decoration: none;
-            white-space: nowrap;
-            transition: gap 0.15s ease;
-        }
-
-        .catalog-cta-link:hover {
-            gap: 10px;
-        }
-
-        /* ── Corporate Memory Widget ── */
-        .memory-card {
-            border-left: 3px solid var(--warning);
-            display: flex;
-            flex-direction: column;
-        }
-
-        .memory-card .card-header {
-            background: rgba(245, 159, 10, 0.08);
-            padding: 22px 24px;
-        }
-
-        .memory-icon {
-            width: 28px;
-            height: 28px;
-            background: var(--warning);
-            border-radius: 6px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-        }
-
-        .badge-beta {
-            font-size: 10px;
-            font-weight: 600;
-            color: var(--text-secondary);
-            background: var(--border-light);
-            border: 1px solid var(--border);
-            border-radius: 4px;
-            padding: 2px 7px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .memory-stats {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 12px;
-            padding: 20px 24px;
-        }
-
-        .memory-stat {
-            text-align: center;
-            padding: 14px 8px;
-            border-radius: 8px;
-            background: var(--border-light);
-        }
-
-        .memory-stat--highlight {
-            background: rgba(245, 159, 10, 0.1);
-        }
-
-        .memory-stat-value {
-            font-size: 22px;
-            font-weight: 700;
-            color: var(--text-primary);
-            line-height: 1.2;
-        }
-
-        .memory-stat--highlight .memory-stat-value {
-            color: #D97706;
-        }
-
-        .memory-stat-label {
-            font-size: 11px;
-            font-weight: 500;
-            color: var(--text-secondary);
-            margin-top: 2px;
-        }
-
-        .memory-description {
-            margin: 0 24px 20px;
-            padding: 14px 16px;
-            border-left: 3px solid rgba(245, 159, 10, 0.4);
-            background: rgba(245, 159, 10, 0.04);
-            border-radius: 0 8px 8px 0;
-            font-size: 13px;
-            color: var(--text-secondary);
-            line-height: 1.6;
-            flex: 1;
-        }
-
-        .memory-description strong {
-            color: var(--text-primary);
-            font-weight: 600;
-        }
-
-        .memory-description code {
-            background: rgba(0, 0, 0, 0.06);
-            padding: 2px 8px;
-            border-radius: 4px;
-            font-family: var(--font-mono);
-            font-size: 12px;
-        }
-
-        .memory-footer {
-            padding: 16px 24px;
-            border-top: 1px solid var(--border-light);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-top: auto;
-        }
-
-        .memory-sync {
-            font-size: 12px;
-            color: var(--text-secondary);
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .memory-sync .sync-icon {
-            color: var(--success);
-        }
-
-        .btn-memory {
-            font-family: var(--font-primary);
-            font-size: 13px;
-            font-weight: 600;
-            color: #92400E;
-            background: rgba(245, 159, 10, 0.15);
-            border: none;
-            border-radius: 8px;
-            padding: 8px 16px;
-            cursor: pointer;
-            transition: background 0.15s ease;
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .btn-memory:hover {
-            background: rgba(245, 159, 10, 0.25);
-        }
-
-        /* ── Activity Center Widget ── */
-        .activity-card {
-            border-left: 3px solid #10B981;
-        }
-
-        .activity-card .card-header {
-            background: rgba(16, 185, 129, 0.08);
-            padding: 22px 24px;
-        }
-
-        .activity-icon {
-            width: 28px;
-            height: 28px;
-            background: #10B981;
-            border-radius: 6px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-        }
-
-        .badge-demo {
-            font-size: 10px;
-            font-weight: 600;
-            color: #92400E;
-            background: rgba(245, 159, 10, 0.15);
-            border: 1px solid rgba(245, 159, 10, 0.3);
-            border-radius: 4px;
-            padding: 2px 7px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .activity-stats {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 12px;
-            padding: 20px 24px;
-        }
-
-        .activity-stat {
-            text-align: center;
-            padding: 14px 8px;
-            border-radius: 8px;
-            background: var(--border-light);
-        }
-
-        .activity-stat--highlight {
-            background: rgba(16, 185, 129, 0.1);
-        }
-
-        .activity-stat-value {
-            font-size: 22px;
-            font-weight: 700;
-            color: var(--text-primary);
-            line-height: 1.2;
-        }
-
-        .activity-stat--highlight .activity-stat-value {
-            color: #059669;
-        }
-
-        .activity-stat-label {
-            font-size: 11px;
-            font-weight: 500;
-            color: var(--text-secondary);
-            margin-top: 2px;
-        }
-
-        .activity-maturity-bar {
-            margin: 0 24px 16px;
-        }
-
-        .activity-maturity-label {
-            font-size: 11px;
-            font-weight: 500;
-            color: var(--text-secondary);
-            margin-bottom: 8px;
-        }
-
-        .maturity-bar {
-            display: flex;
-            height: 8px;
-            border-radius: 4px;
-            overflow: hidden;
-            gap: 2px;
-        }
-
-        .maturity-segment {
-            transition: flex 0.3s ease;
-        }
-
-        .maturity-segment--optimized { background: #10B981; }
-        .maturity-segment--mature { background: #3B82F6; }
-        .maturity-segment--developing { background: #F59E0B; }
-        .maturity-segment--early { background: #9CA3AF; }
-
-        .maturity-legend {
-            display: flex;
-            gap: 12px;
-            margin-top: 8px;
-            flex-wrap: wrap;
-        }
-
-        .maturity-legend-item {
-            display: flex;
-            align-items: center;
-            gap: 4px;
-            font-size: 10px;
-            color: var(--text-secondary);
-        }
-
-        .maturity-legend-dot {
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            flex-shrink: 0;
-        }
-
-        .activity-description {
-            margin: 0 24px 20px;
-            padding: 14px 16px;
-            border-left: 3px solid rgba(16, 185, 129, 0.4);
-            background: rgba(16, 185, 129, 0.04);
-            border-radius: 0 8px 8px 0;
-            font-size: 13px;
-            color: var(--text-secondary);
-            line-height: 1.6;
-        }
-
-        .activity-description strong {
-            color: var(--text-primary);
-            font-weight: 600;
-        }
-
-        .activity-footer {
-            padding: 16px 24px;
-            border-top: 1px solid var(--border-light);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-
-        .activity-trend {
-            font-size: 12px;
-            color: #059669;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 4px;
-        }
-
-        .btn-activity {
-            font-family: var(--font-primary);
-            font-size: 13px;
-            font-weight: 600;
-            color: #065F46;
-            background: rgba(16, 185, 129, 0.15);
-            border: none;
-            border-radius: 8px;
-            padding: 8px 16px;
-            cursor: pointer;
-            transition: background 0.15s ease;
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .btn-activity:hover {
-            background: rgba(16, 185, 129, 0.25);
-        }
 
         /* ── Bottom Cards Row ── */
         .bottom-row {
@@ -999,165 +433,6 @@
             display: none;
         }
 
-        /* ── Account Card ── */
-        .account-grid {
-            display: flex;
-            flex-direction: column;
-            gap: 18px;
-        }
-
-        .account-row {
-            display: flex;
-            align-items: flex-start;
-            gap: 12px;
-        }
-
-        .account-label {
-            font-size: 12px;
-            font-weight: 500;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.4px;
-            width: 90px;
-            flex-shrink: 0;
-            padding-top: 2px;
-        }
-
-        .account-value {
-            font-size: 14px;
-            color: var(--text-primary);
-            font-weight: 500;
-        }
-
-        .account-value--mono {
-            font-family: var(--font-mono);
-            font-size: 13px;
-        }
-
-        .badge-role {
-            display: inline-block;
-            font-size: 11px;
-            font-weight: 600;
-            border-radius: 4px;
-            padding: 3px 10px;
-            letter-spacing: 0.3px;
-        }
-
-        .badge-role.admin {
-            color: #EA580C;
-            background: rgba(234, 88, 12, 0.1);
-        }
-
-        .badge-role.privileged {
-            color: #7C3AED;
-            background: rgba(124, 58, 237, 0.1);
-        }
-
-        .badge-role.analyst {
-            color: var(--primary);
-            background: var(--primary-light);
-        }
-
-        .badge-role.default {
-            color: var(--text-secondary);
-            background: var(--border-light);
-        }
-
-        .badge-group {
-            display: inline-block;
-            font-size: 11px;
-            font-weight: 500;
-            font-family: var(--font-mono);
-            color: var(--text-secondary);
-            background: var(--border-light);
-            border: 1px solid var(--border);
-            border-radius: 4px;
-            padding: 2px 8px;
-            margin-right: 6px;
-            margin-bottom: 4px;
-        }
-
-        .account-scripts {
-            list-style: none;
-            padding: 0;
-            flex: 1;
-        }
-
-        .account-scripts li {
-            font-size: 13px;
-            color: var(--text-primary);
-            padding: 6px 0;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-
-        .account-scripts li + li {
-            border-top: 1px solid var(--border-light);
-        }
-
-        .script-name {
-            font-family: var(--font-mono);
-            font-size: 12px;
-            font-weight: 500;
-        }
-
-        .script-time {
-            font-size: 11px;
-            color: var(--text-secondary);
-        }
-
-        .cron-line {
-            font-size: 12px;
-            color: var(--text-secondary);
-            margin-top: 6px;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .cron-line svg {
-            width: 12px;
-            height: 12px;
-            opacity: 0.5;
-        }
-
-        .account-empty {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-style: italic;
-        }
-
-        .account-hint {
-            font-size: 11px;
-            color: var(--text-secondary);
-            opacity: 0.7;
-            margin-top: 2px;
-        }
-
-        .account-hint code {
-            background: var(--background);
-            padding: 1px 5px;
-            border-radius: 3px;
-            font-family: var(--font-mono);
-            font-size: 10px;
-        }
-
-        .sync-datasets {
-            display: flex;
-            gap: 4px;
-            margin-top: 6px;
-        }
-
-        .dataset-badge {
-            display: inline-block;
-            padding: 2px 8px;
-            background: rgba(16, 183, 127, 0.1);
-            color: var(--success);
-            border-radius: 4px;
-            font-size: 11px;
-            font-weight: 500;
-        }
 
         /* ── Setup Banner ── */
         /* ── Environment Setup CTA (shown after account creation) ── */
@@ -1897,10 +1172,6 @@
                 <span class="stat-label">Data Size</span>
                 <span class="stat-value">{{ data_stats.size_display }}</span>
             </div>
-            <div class="stat-card">
-                <span class="stat-label">Unstructured</span>
-                <span class="stat-value">{{ data_stats.unstructured_display }}</span>
-            </div>
         </div>
 
         <!-- Credit line -->
@@ -1914,77 +1185,6 @@
             <!-- ── Left Column ── -->
             <div class="left-column">
 
-                <!-- Your Data Card -->
-                <div class="card">
-                    <div class="card-header">
-                        <span class="section-title" style="margin-bottom: 0;">Your Data</span>
-                    </div>
-
-                    <!-- Core Business Data -->
-                    <div class="data-source">
-                        <div class="data-source-header">
-                            <div class="data-source-info">
-                                <div class="data-source-icon">
-                                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                                        <ellipse cx="12" cy="5" rx="9" ry="3"/>
-                                        <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
-                                        <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
-                                    </svg>
-                                </div>
-                                <div>
-                                    <div class="data-source-name">Core Business Data</div>
-                                    <div class="data-source-status">
-                                        <span class="status-dot{% if data_stats.last_updated %} status-dot--live{% endif %}"></span>
-                                        {% if data_stats.last_updated %}Synced {{ data_stats.last_updated }}{% else %}Not yet synced{% endif %}
-                                    </div>
-                                </div>
-                            </div>
-                            <span class="badge-included">Always included</span>
-                        </div>
-                        <div class="data-source-details">
-                            {% if catalog_data %}{% for cat in catalog_data %}{{ cat.name }} ({{ cat.count }} tables){% if not loop.last %}, {% endif %}{% endfor %}{% if data_stats.remote_tables %} &middot; {{ data_stats.local_tables }} local, {{ data_stats.remote_tables }} live{% endif %}{% else %}{{ data_stats.total_tables or data_stats.tables }} tables total{% endif %}
-                        </div>
-                    </div>
-
-                    {% if metrics_data %}
-                    {% set metrics_total = namespace(n=0) %}
-                    {% for c in metrics_data %}{% set metrics_total.n = metrics_total.n + c.metrics|length %}{% endfor %}
-                    <div class="data-source">
-                        <div class="data-source-header">
-                            <div class="data-source-info">
-                                <div class="data-source-icon">
-                                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                                        <path d="M3 3v18h18"/>
-                                        <path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"/>
-                                    </svg>
-                                </div>
-                                <div>
-                                    <div class="data-source-name">Business Metrics</div>
-                                    <div class="data-source-status">
-                                        {{ metrics_total.n }} metrics across {{ metrics_data|length }} categories{% if data_stats.last_updated %} &middot; data from {{ data_stats.last_updated }}{% endif %}
-                                    </div>
-                                </div>
-                            </div>
-                            <span class="badge-included">Always included</span>
-                        </div>
-                        <div class="data-source-details">
-                            {% for c in metrics_data %}{{ c.label }} ({{ c.metrics|length }}){% if not loop.last %}, {% endif %}{% endfor %}
-                        </div>
-                    </div>
-                    {% endif %}
-
-                    <div class="catalog-cta">
-                        <div class="catalog-cta-text">Manage your data subscriptions or discover new data sources</div>
-                        <a href="{{ url_for('catalog') }}" class="catalog-cta-link">
-                            Open Data Catalog
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <polyline points="9 18 15 12 9 6"/>
-                            </svg>
-                        </a>
-                    </div>
-                </div>
-
-                <!-- Bottom Row: Notifications + Account -->
                 <div class="bottom-row">
 
                     <!-- Notifications Card -->
@@ -2050,212 +1250,10 @@
                         </div>
                     </div>
 
-                    <!-- Account Card -->
-                    <div class="card">
-                        <div class="card-header" style="padding-bottom: 0;">
-                            <span class="card-title">Account</span>
-                        </div>
-                        <div class="card-body">
-                            <div class="account-grid">
-                                <div class="account-row">
-                                    <span class="account-label">Username</span>
-                                    <span class="account-value account-value--mono">{{ username }}</span>
-                                </div>
-                                <div class="account-row">
-                                    <span class="account-label">Role</span>
-                                    {% if user_info.is_admin %}
-                                    <span class="badge-role admin">Administrator</span>
-                                    {% elif user_info.is_privileged %}
-                                    <span class="badge-role privileged">Privileged Analyst</span>
-                                    {% elif user_info.is_analyst %}
-                                    <span class="badge-role analyst">Standard Analyst</span>
-                                    {% else %}
-                                    <span class="badge-role default">User</span>
-                                    {% endif %}
-                                </div>
-                                <div class="account-row">
-                                    <span class="account-label">Groups</span>
-                                    <div>
-                                        {% for group in user_info.groups %}
-                                        <span class="badge-group">{{ group }}</span>
-                                        {% endfor %}
-                                    </div>
-                                </div>
-
-                                {% if account_details %}
-                                <div class="account-row">
-                                    <span class="account-label">Scripts</span>
-                                    <div style="flex: 1;">
-                                        {% if account_details.notification_scripts %}
-                                        <ul class="account-scripts">
-                                            {% for script in account_details.notification_scripts %}
-                                            <li>
-                                                <span class="script-name">{{ script.stem }}</span>
-                                                <span class="script-time">{{ script.last_run or 'never' }}</span>
-                                            </li>
-                                            {% endfor %}
-                                        </ul>
-                                        {% if account_details.cron_schedule %}
-                                        <div class="cron-line">
-                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
-                                            {{ account_details.cron_schedule }}
-                                        </div>
-                                        {% endif %}
-                                        {% else %}
-                                        <div class="account-empty">No scripts configured</div>
-                                        <div class="account-hint">Add <code>.py</code> scripts to <code>~/user/notifications/</code></div>
-                                        {% endif %}
-                                    </div>
-                                </div>
-                                <div class="account-row">
-                                    <span class="account-label">Last Sync</span>
-                                    <div>
-                                        {% if account_details.last_sync_display %}
-                                        <span class="account-value" style="font-size: 13px; color: var(--text-secondary);">{{ account_details.last_sync_display }}</span>
-                                        {% else %}
-                                        <div class="account-empty">Not yet synced</div>
-                                        <div class="account-hint">Run <code>bash server/scripts/sync_data.sh</code></div>
-                                        {% endif %}
-                                    </div>
-                                </div>
-                                {% endif %}
-                            </div>
-                        </div>
-                    </div>
 
                 </div><!-- /bottom-row -->
             </div><!-- /left-column -->
 
-            <!-- ── Right Column ── -->
-            <div class="right-column">
-
-                {# Memory is admin-only. Widget hidden for non-admin; route
-                   /corporate-memory + nav link are likewise admin-gated. #}
-                {% if session.user.is_admin %}
-                <!-- Corporate Memory Widget -->
-                <div class="card memory-card">
-                    <div class="card-header">
-                        <div class="card-header-left">
-                            <div class="memory-icon">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
-                                    <path d="M2 17l10 5 10-5"/>
-                                    <path d="M2 12l10 5 10-5"/>
-                                </svg>
-                            </div>
-                            <span class="card-title">Corporate Memory</span>
-                        </div>
-                        <span class="badge-beta">private beta</span>
-                    </div>
-
-                    <div class="memory-stats">
-                        <div class="memory-stat">
-                            <div class="memory-stat-value" id="memoryContributors">0</div>
-                            <div class="memory-stat-label">Contributors</div>
-                        </div>
-                        <div class="memory-stat">
-                            <div class="memory-stat-value" id="memoryKnowledgeCount">0</div>
-                            <div class="memory-stat-label">Knowledge Items</div>
-                        </div>
-                        <div class="memory-stat memory-stat--highlight">
-                            <div class="memory-stat-value" id="memoryYourRules">0</div>
-                            <div class="memory-stat-label">Your Rules</div>
-                        </div>
-                    </div>
-
-                    <div class="memory-description">
-                        <strong>Shared knowledge</strong> from your team's Claude Code sessions.
-                        Upvote useful insights and they'll sync to your local <code>.claude/rules/</code>.
-                    </div>
-
-                    <div class="memory-footer">
-                        <div class="memory-sync">
-                            <span class="status-dot"></span>
-                            <span id="memorySyncStatus">Synced</span>
-                        </div>
-                        <a href="{{ url_for('corporate_memory') }}" class="btn-memory">
-                            Browse Knowledge
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <path d="M9 18l6-6-6-6"/>
-                            </svg>
-                        </a>
-                    </div>
-                </div>
-                {% endif %}
-
-                <!-- Activity Center Widget -->
-                <div class="card activity-card">
-                    <div class="card-header">
-                        <div class="card-header-left">
-                            <div class="activity-icon">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <line x1="18" y1="20" x2="18" y2="10"/>
-                                    <line x1="12" y1="20" x2="12" y2="4"/>
-                                    <line x1="6" y1="20" x2="6" y2="14"/>
-                                </svg>
-                            </div>
-                            <span class="card-title">Activity Center</span>
-                        </div>
-                        <span class="badge-demo">demo</span>
-                    </div>
-
-                    <div class="activity-stats">
-                        <div class="activity-stat">
-                            <div class="activity-stat-value">{{ activity_summary.get('teams_active', 0) }}/{{ activity_summary.get('teams_total', 0) }}</div>
-                            <div class="activity-stat-label">Teams Active</div>
-                        </div>
-                        <div class="activity-stat">
-                            <div class="activity-stat-value">{{ activity_summary.get('business_processes_identified', 0) }}</div>
-                            <div class="activity-stat-label">Processes</div>
-                        </div>
-                        <div class="activity-stat activity-stat--highlight">
-                            <div class="activity-stat-value">{{ activity_summary.get('avg_success_rate', 0) }}%</div>
-                            <div class="activity-stat-label">Success Rate</div>
-                        </div>
-                    </div>
-
-                    {% set maturity = activity_summary.get('maturity_distribution', {}) %}
-                    {% set maturity_total = maturity.get('optimized', 0) + maturity.get('mature', 0) + maturity.get('developing', 0) + maturity.get('early', 0) %}
-                    <div class="activity-maturity-bar">
-                        <div class="activity-maturity-label">Process Maturity Distribution</div>
-                        {% if maturity_total > 0 %}
-                        <div class="maturity-bar">
-                            <div class="maturity-segment maturity-segment--optimized" style="flex: {{ maturity.get('optimized', 0) }}" title="Optimized: {{ maturity.get('optimized', 0) }}"></div>
-                            <div class="maturity-segment maturity-segment--mature" style="flex: {{ maturity.get('mature', 0) }}" title="Mature: {{ maturity.get('mature', 0) }}"></div>
-                            <div class="maturity-segment maturity-segment--developing" style="flex: {{ maturity.get('developing', 0) }}" title="Developing: {{ maturity.get('developing', 0) }}"></div>
-                            <div class="maturity-segment maturity-segment--early" style="flex: {{ maturity.get('early', 0) }}" title="Early: {{ maturity.get('early', 0) }}"></div>
-                        </div>
-                        <div class="maturity-legend">
-                            <span class="maturity-legend-item"><span class="maturity-legend-dot" style="background: #10B981"></span> Optimized ({{ maturity.get('optimized', 0) }})</span>
-                            <span class="maturity-legend-item"><span class="maturity-legend-dot" style="background: #3B82F6"></span> Mature ({{ maturity.get('mature', 0) }})</span>
-                            <span class="maturity-legend-item"><span class="maturity-legend-dot" style="background: #F59E0B"></span> Developing ({{ maturity.get('developing', 0) }})</span>
-                            <span class="maturity-legend-item"><span class="maturity-legend-dot" style="background: #9CA3AF"></span> Early ({{ maturity.get('early', 0) }})</span>
-                        </div>
-                        {% endif %}
-                    </div>
-
-                    <div class="activity-description">
-                        <strong>Strategic overview</strong> of how data powers business processes across {{ activity_summary.get('teams_total', 0) }} teams.
-                    </div>
-
-                    <div class="activity-footer">
-                        <span class="activity-trend">
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/>
-                                <polyline points="17 6 23 6 23 12"/>
-                            </svg>
-                            {{ activity_summary.get('adoption_trend', '') }} adoption
-                        </span>
-                        <a href="/admin/activity" class="btn-activity">
-                            View Activity Center
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <path d="M9 18l6-6-6-6"/>
-                            </svg>
-                        </a>
-                    </div>
-                </div>
-
-            </div><!-- /right-column -->
         </div><!-- /dashboard-grid -->
 
         {% if account_details and account_details.last_sync_display %}
diff --git a/app/web/templates/install.html b/app/web/templates/install.html
index a850746..8312b15 100644
--- a/app/web/templates/install.html
+++ b/app/web/templates/install.html
@@ -1,16 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Setup local agent — {{ config.INSTANCE_NAME }}</title>
-    {% if not config.THEME_FONT_URL %}
-    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    {% endif %}
-    <link rel="stylesheet" href="{{ url_for('static', filename='style-custom.css') }}">
-    <style>
+{% extends "base.html" %}
+
+{% block title %}Setup local agent — {{ config.INSTANCE_NAME }}{% endblock %}
+
+{% block head_extra %}
+<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
         /* ── Header (shared visual style with dashboard.html) ── */
         .header {
             background: var(--surface);
@@ -644,14 +640,10 @@
         .setup-banner > *:first-child { margin-top: 0; }
         .setup-banner > *:last-child { margin-bottom: 0; }
     </style>
-    {% include '_theme.html' %}
-</head>
-<body>
+{% endblock %}
 
-    <!-- ═══════════════ HEADER ═══════════════ -->
-    {% include '_app_header.html' %}
-
-    {% with messages = get_flashed_messages(with_categories=true) %}
+{% block layout %}
+{% with messages = get_flashed_messages(with_categories=true) %}
     {% if messages %}
     <div class="flash-messages">
         {% for category, message in messages %}
@@ -934,8 +926,10 @@
     <footer class="footer">
         <p>&copy; {{ now().year if now is defined else 2024 }} {{ config.INSTANCE_COPYRIGHT or 'AI Data Analyst' }}</p>
     </footer>
+{% endblock %}
 
-    <script>
+{% block scripts %}
+<script>
     (function() {
         function copyToClipboard(text) {
             if (navigator.clipboard && window.isSecureContext) {
@@ -1092,6 +1086,4 @@
         };
     })();
     </script>
-    {% include "_version_badge.html" %}
-</body>
-</html>
+{% endblock %}
diff --git a/app/web/templates/marketplace.html b/app/web/templates/marketplace.html
index 051ed7a..2da00a0 100644
--- a/app/web/templates/marketplace.html
+++ b/app/web/templates/marketplace.html
@@ -145,22 +145,11 @@
 
   .mp-actions { display: flex; gap: 8px; align-items: center; }
   .mp-actions .btn {
-    appearance: none;
-    display: inline-flex; align-items: center; gap: 6px;
-    padding: 8px 14px;
-    border: 1px solid var(--border); background: var(--surface);
-    color: var(--text-primary); border-radius: 8px;
     font-size: 13px; font-weight: 500; cursor: pointer;
     font-family: var(--font-primary); text-decoration: none;
     transition: all 0.15s ease;
   }
-  .mp-actions .btn:hover { border-color: var(--primary); color: var(--primary); }
-  .mp-actions .btn.primary {
-    background: var(--primary); color: #fff; border-color: var(--primary);
-  }
-  .mp-actions .btn.primary:hover {
-    background: var(--primary-dark); border-color: var(--primary-dark); color: #fff;
-  }
+
 
   /* ── Info block (curated trust badge + flea open-shelf signal) ───── */
   .mp-curator-block {
@@ -451,10 +440,10 @@
       </button>
     </div>
     <div class="mp-actions">
-      <a class="btn" data-actions-for="curated" href="/marketplace/guide/curated">Submit a plugin</a>
+      <a class="btn btn-secondary" data-actions-for="curated" href="/marketplace/guide/curated">Submit a plugin</a>
       <!-- Flea has a self-service +Upload button below — no second
            "how to" CTA needed. Anyone uploads via the form directly. -->
-      <a class="btn primary" data-actions-for="flea" href="/store/new" hidden>+ Upload</a>
+      <a class="btn btn-primary" data-actions-for="flea" href="/store/new" hidden>+ Upload</a>
     </div>
   </div>
 
diff --git a/app/web/templates/me_debug.html b/app/web/templates/me_debug.html
index 59fe37c..36a8142 100644
--- a/app/web/templates/me_debug.html
+++ b/app/web/templates/me_debug.html
@@ -48,17 +48,7 @@
   }
   .kv .v.muted { color: #9ca3af; font-style: italic; }
 
-  .md-table { width: 100%; border-collapse: collapse; font-size: 13px; }
-  .md-table th, .md-table td {
-    padding: 8px 14px; text-align: left;
-    border-bottom: 1px solid var(--border-light, #f3f4f6);
-  }
-  .md-table thead th {
-    background: var(--border-light, #f9fafb);
-    font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
-    color: var(--text-secondary, #6b7280); font-weight: 600;
-  }
-  .md-table tbody tr:last-child td { border-bottom: none; }
+
 
   .src-chip {
     display: inline-block; padding: 2px 8px; border-radius: 999px;
@@ -79,12 +69,7 @@
 
   .md-empty { color: #9ca3af; font-style: italic; font-size: 12px; }
 
-  .refetch-btn {
-    padding: 7px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
-    background: var(--primary, #6366f1); color: #fff;
-    border: 1px solid var(--primary, #6366f1); cursor: pointer;
-  }
-  .refetch-btn:disabled { opacity: 0.6; cursor: progress; }
+
 
   .refetch-result { margin-top: 14px; }
   .diff-add { color: #166534; }
@@ -168,7 +153,7 @@
       <span class="sub">{{ memberships|length }} row(s)</span>
     </div>
     {% if memberships %}
-    <table class="md-table">
+    <table class="data-table">
       <thead><tr>
         <th>Group</th><th>Linked to</th><th>Source</th><th>Added</th><th>Added by</th>
       </tr></thead>
@@ -202,7 +187,7 @@
       <span class="sub">Distinct {{ grants|length }} grant(s) reachable via your groups.</span>
     </div>
     {% if grants %}
-    <table class="md-table">
+    <table class="data-table">
       <thead><tr>
         <th>Resource type</th><th>Resource id</th><th>Via group</th>
       </tr></thead>
@@ -238,7 +223,7 @@
       </div>
 
       <div style="margin-top:14px;">
-        <button id="refetch-btn" class="refetch-btn" type="button">
+        <button id="refetch-btn" class="btn btn-primary btn-sm" type="button">
           Refetch from Google (dry-run)
         </button>
         <span id="refetch-status" style="margin-left:10px; font-size:12px; color:#6b7280;"></span>
diff --git a/app/web/templates/my_tokens.html b/app/web/templates/my_tokens.html
index 469c09c..be1a87a 100644
--- a/app/web/templates/my_tokens.html
+++ b/app/web/templates/my_tokens.html
@@ -504,35 +504,6 @@
     justify-content: flex-end;
     margin-top: 24px;
   }
-  .modal-btn {
-    padding: 10px 18px;
-    border-radius: 8px;
-    font-size: 13.5px;
-    font-weight: 500;
-    font-family: var(--font-primary, inherit);
-    cursor: pointer;
-    transition: all 0.15s ease;
-    border: 1px solid var(--border, #e5e7eb);
-    background: var(--surface, #fff);
-    color: var(--text-primary, #1A253C);
-  }
-  .modal-btn:hover {
-    border-color: #cbd5e1;
-    background: var(--background, #F5F7FA);
-  }
-  .modal-btn.danger {
-    background: #dc2626;
-    color: #fff;
-    border-color: #dc2626;
-  }
-  .modal-btn.danger:hover {
-    background: #b91c1c;
-    border-color: #b91c1c;
-  }
-  .modal-btn:focus-visible {
-    outline: 2px solid #0073D1;
-    outline-offset: 2px;
-  }
 
   /* ── Toast ─────────────────────────────────────────────────────────────── */
   .toast-stack {
@@ -660,15 +631,6 @@
     border-color: #0073D1;
     box-shadow: 0 0 0 3px rgba(0, 115, 209, 0.15);
   }
-  .modal-btn.primary {
-    background: #0073D1;
-    color: #fff;
-    border-color: #0073D1;
-  }
-  .modal-btn.primary:hover {
-    background: #0056A3;
-    border-color: #0056A3;
-  }
 
   /* ── Responsive ────────────────────────────────────────────────────────── */
   @media (max-width: 720px) {
@@ -817,8 +779,8 @@
     </p>
     <div class="modal-meta" id="confirm-meta" aria-hidden="true"></div>
     <div class="modal-actions">
-      <button class="modal-btn" id="confirm-cancel-btn" data-close-modal="confirm-modal">Cancel</button>
-      <button class="modal-btn danger" id="confirm-ok-btn">Revoke token</button>
+      <button class="btn btn-secondary" id="confirm-cancel-btn" data-close-modal="confirm-modal">Cancel</button>
+      <button class="btn btn-danger" id="confirm-ok-btn">Revoke token</button>
     </div>
   </div>
 </div>
@@ -846,8 +808,8 @@
         </select>
       </div>
       <div class="modal-actions">
-        <button type="button" class="modal-btn" data-close-modal="create-modal">Cancel</button>
-        <button type="submit" class="modal-btn primary" id="create-submit-btn">Create token</button>
+        <button type="button" class="btn btn-secondary" data-close-modal="create-modal">Cancel</button>
+        <button type="submit" class="btn btn-primary" id="create-submit-btn">Create token</button>
       </div>
     </form>
   </div>
diff --git a/app/web/templates/profile_sessions.html b/app/web/templates/profile_sessions.html
index 6e4bc4d..6e4ec60 100644
--- a/app/web/templates/profile_sessions.html
+++ b/app/web/templates/profile_sessions.html
@@ -5,7 +5,7 @@
 <style>
   .container:has(.sess-page) { max-width: none; padding: 24px 16px; }
   .sess-page { max-width: 1200px; margin: 0 auto; padding: 0; }
-  .sess-title { margin: 0 0 8px 0; font-size: 22px; font-weight: 600; }
+
   .sess-help { color: var(--text-secondary, #6b7280); font-size: 13px; margin-bottom: 20px; line-height: 1.55; }
   .sess-help code { background: var(--border-light, #f3f4f6); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
   .sess-table-wrap {
@@ -14,22 +14,7 @@
     border-radius: 12px;
     overflow-x: auto;
   }
-  .sess-table { width: 100%; border-collapse: collapse; font-size: 13px; }
-  .sess-table thead th {
-    text-align: left; padding: 12px 16px;
-    background: var(--border-light, #f9fafb);
-    border-bottom: 1px solid var(--border, #e5e7eb);
-    font-weight: 600; color: var(--text-secondary, #6b7280);
-    font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
-    white-space: nowrap;
-  }
-  .sess-table tbody td {
-    padding: 10px 16px;
-    border-bottom: 1px solid var(--border-light, #f3f4f6);
-    vertical-align: middle;
-  }
-  .sess-table tbody tr:last-child td { border-bottom: none; }
-  .sess-table tbody tr:hover { background: var(--border-light, #fafafa); }
+
   .sess-table .name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
   .sess-table .ts { white-space: nowrap; color: var(--text-secondary, #6b7280); font-variant-numeric: tabular-nums; }
   .sess-table .num { text-align: right; font-variant-numeric: tabular-nums; }
@@ -62,7 +47,10 @@
 </style>
 
 <div class="sess-page">
-  <h1 class="sess-title">My sessions</h1>
+  {% set page_hero_eyebrow = "Profile" %}
+  {% set page_hero_title = "My sessions" %}
+  {% set page_hero_subtitle = "Sessions uploaded via <code>agnes push</code> from Claude Code." %}
+  {% include "_page_hero.html" %}
   <p class="sess-help">
     Sessions you uploaded via <code>agnes push</code> from your Claude Code workspace, with
     extraction status from the verification processor's rows in <code>session_processor_state</code>.
@@ -77,7 +65,7 @@
 
   <div class="sess-table-wrap">
     {% if sessions %}
-    <table class="sess-table">
+    <table class="data-table">
       <thead>
         <tr>
           <th>Session file</th>
diff --git a/app/web/templates/store_edit.html b/app/web/templates/store_edit.html
index 301b756..a6fe706 100644
--- a/app/web/templates/store_edit.html
+++ b/app/web/templates/store_edit.html
@@ -44,16 +44,6 @@
   }
 
   .actions { display: flex; gap: 8px; margin-top: 20px; align-items: center; }
-  .btn-primary {
-    padding: 8px 18px; border-radius: 6px; border: none;
-    background: var(--primary, #0073D1); color: white;
-    font-size: 14px; font-weight: 500; cursor: pointer;
-  }
-  .btn-primary:disabled { background: var(--border, #d1d5db); cursor: not-allowed; }
-  .btn-link {
-    padding: 8px 12px; color: var(--text-secondary, #6b7280); text-decoration: none;
-    font-size: 14px;
-  }
 
   .pending-banner {
     margin: 12px 0 16px 0; padding: 14px 18px; border-radius: 10px;
@@ -175,7 +165,7 @@
     <div class="actions">
       <button type="submit" class="btn-primary" id="save-btn"
               {% if pending_sub %}disabled{% endif %}>Save</button>
-      <a href="/marketplace/flea/{{ entity.id }}" class="btn-link">Cancel</a>
+      <a href="/marketplace/flea/{{ entity.id }}" class="btn btn-secondary">Cancel</a>
     </div>
   </form>
 </div>
diff --git a/app/web/templates/store_upload.html b/app/web/templates/store_upload.html
index e116887..b131032 100644
--- a/app/web/templates/store_upload.html
+++ b/app/web/templates/store_upload.html
@@ -178,36 +178,8 @@
   }
   .doc-add:hover { border-color: var(--primary, #0073D1); color: var(--primary, #0073D1); }
 
-  /* ── Buttons (mirror /setup primary CTA) ───────────────────────── */
+  /* ── Buttons ───────────────────────────────────────────────────── */
   .actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
-  .btn-primary {
-    display: inline-flex; align-items: center; gap: 8px;
-    font-family: var(--font-primary, inherit);
-    font-size: 14px; font-weight: 600; color: #fff;
-    background: var(--primary, #0073D1); border: none;
-    border-radius: 8px; padding: 11px 22px; cursor: pointer;
-    transition: all 0.15s ease;
-  }
-  .btn-primary:hover {
-    background: var(--primary-dark, #0056A3);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 14px rgba(0, 115, 209, 0.25);
-  }
-  .btn-primary:disabled { opacity: 0.7; cursor: wait; transform: none; box-shadow: none; }
-  .btn-secondary {
-    appearance: none; padding: 10px 18px;
-    border: 1px solid var(--border, #d1d5db); background: #fff;
-    color: var(--text-secondary, #6b7280); border-radius: 8px;
-    font-size: 14px; font-weight: 500; cursor: pointer;
-    font-family: var(--font-primary, inherit);
-    transition: all 0.15s ease;
-  }
-  .btn-secondary:hover { border-color: var(--primary, #0073D1); color: var(--primary, #0073D1); }
-  .btn-link {
-    color: var(--text-secondary, #6b7280); text-decoration: none;
-    font-size: 13px; padding: 10px 8px;
-  }
-  .btn-link:hover { color: var(--text-primary, #111827); }
 
   /* ── Status banner ─────────────────────────────────────────────── */
   /* `display: flex` on .banner overrides the user-agent default for the
@@ -447,7 +419,7 @@
 
         <div class="actions">
           <button type="button" class="btn-primary" id="next-btn">Next →</button>
-          <a href="/marketplace?tab=flea" class="btn-link">Cancel</a>
+          <a href="/marketplace?tab=flea" class="btn btn-secondary">Cancel</a>
         </div>
       </div>
     </div>
diff --git a/docs/superpowers/plans/2026-05-13-design-system-unification.md b/docs/superpowers/plans/2026-05-13-design-system-unification.md
new file mode 100644
index 0000000..5fd9295
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-13-design-system-unification.md
@@ -0,0 +1,1486 @@
+# Design System Unification Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. One PR for the whole thing — no mid-stream releases.
+
+**Goal:** Make every page of the Agnes web UI look like part of the same product — one CSS file, one design-token palette, one set of primitives (buttons, inputs, filter bars, page headers, tables, empty states, toasts), one nav style. Resolve the user-visible drift: top-nav Admin entry looking different from sibling links, filter bars rendering 3 different ways across pages, page headers in 5 different sizes, admin tables each rolling their own CSS.
+
+**Architecture:**
+- Consolidate `app/web/static/style.css` into `app/web/static/style-custom.css` and delete `style.css`. One stylesheet, one `:root` token block.
+- Introduce canonical primitives (`.btn` family, `.search-input`, `.filter-bar`, `.page-header`, `.data-table`, `.empty-state`, `.toast`, `.app-nav-link` unified for `<a>` and `<button>`). Keep legacy class names as **CSS aliases** during migration so individual templates can flip independently — final task removes the aliases.
+- Migrate all 41 inline-style templates to the canonical primitives, deleting per-page `<style>` blocks where they only duplicate now-global rules.
+- Add a thin `app.js` for the toast helper + the (already-present) dropdown wiring extracted from `_app_header.html`.
+- Add a Python contract test (`tests/test_design_system_contract.py`) that fails if any template re-introduces a deprecated class name or a raw `style.css` link tag, so regressions don't slip in after merge.
+
+**Tech Stack:** FastAPI + Jinja2 templates, vanilla CSS (no preprocessor), vanilla JS, pytest for contract tests, agent-browser for visual smoke tests across all routes.
+
+**One-PR rule:** This plan bundles every task into one branch (`zs/design-pass`) and one PR. The migration is mechanically repetitive after Task 4 finishes — small commits per template keep `git log` readable but the review surface is one PR. Half-migrated state would look worse than current drift, so no intermediate merges.
+
+---
+
+## Revised execution order (post-review)
+
+External review flagged: (a) the user's nav complaint must land in the first commit, not buried at Task 5; (b) Tasks 14 (sticky header) + 15 (dark-mode skeleton) expand review surface without addressing the complaint — cut from this PR; (c) `static_url()` has no cache-busting → users hit stale 404s after `style.css` deletion → add mtime version query string in Task 1; (d) the contract test's deprecated-class detection has bugs (won't catch multi-line `class=` attributes, false-positives on prose text) → tokenize the `class="..."` attribute properly.
+
+**Execution follows the task tracker (Tasks 41–58 in the project task list), not the plan-section numbering. Section headers below are kept in their original order for diff readability.**
+
+| Tracker | Plan section | What |
+|---|---|---|
+| Task 0 | Task 0 | Setup + baseline pytest + **baseline screenshots** for ~30 routes |
+| Task 1 | "Task 5" | **Nav fix first** — user's complaint lands in commit #1 |
+| Task 2 | "Task 1" | CSS consolidation + `static_url` mtime cache-busting |
+| Task 3 | "Task 2" | Contract test (**tokenized** class detection) + Jinja smoke render |
+| Tasks 4–7 | "Tasks 3, 4, 6, 7" | Primitives — buttons, form controls, page-header, table/empty/toast/tab/stat |
+| Tasks 8–15 | "Tasks 8–12" | Template migration sweep, Task 11 split into 11/12/13/14, Task 12 stays as Task 15 (login verify) |
+| Task 16 | "Task 13" | Remove legacy CSS aliases |
+| Task 17 | "Task 16" | CHANGELOG + widened vendor-grep + full pytest + smoke + push |
+| ~~"Tasks 14–15"~~ | ~~sticky header + dark mode~~ | **DROPPED** — defer to follow-up PRs |
+
+---
+
+## File structure (what gets touched)
+
+**New files:**
+- `app/web/static/app.js` — toast helper (`window.appToast({kind, msg, timeout})`) + nav dropdown wiring moved out of inline `<script>` in `_app_header.html`.
+- `tests/test_design_system_contract.py` — contract assertions: no `style.css` reference, no deprecated class names in templates, single `:root` block, all canonical primitives defined.
+
+**Modified (CSS):**
+- `app/web/static/style-custom.css` — absorbs `style.css`, adds new primitive sections, defines legacy aliases.
+
+**Modified (Jinja chrome):**
+- `app/web/templates/base.html` — drops `style.css` link.
+- `app/web/templates/base_login.html` — drops `style.css` link.
+- `app/web/templates/_app_header.html` — Admin trigger becomes `<a class="app-nav-link"><details>`–pattern OR `.app-nav-link.is-trigger` (decided in Task 5). Extract inline `<script>` to `app.js`.
+
+**Deleted:**
+- `app/web/static/style.css` — content folded into `style-custom.css`, file removed.
+
+**Migrated templates (41 total):**
+- **Admin index pages (12)**: `activity_center.html`, `admin_access.html`, `admin_groups.html`, `admin_marketplaces.html`, `admin_scheduler_runs.html`, `admin_sessions.html`, `admin_store_submissions.html`, `admin_tables.html`, `admin_tokens.html`, `admin_usage.html`, `admin_users.html`, `admin_welcome.html`.
+- **Admin detail / single-purpose (7)**: `admin_group_detail.html`, `admin_server_config.html`, `admin_session_detail.html`, `admin_store_submission_detail.html`, `admin_user_detail.html`, `admin_workspace_prompt.html`, `admin/news_editor.html`.
+- **Catalog + marketplace + store (8)**: `catalog.html`, `marketplace.html`, `marketplace_guide.html`, `marketplace_item_detail.html`, `marketplace_plugin_detail.html`, `store_edit.html`, `store_examples.html`, `store_upload.html`.
+- **Corporate memory (2)**: `corporate_memory.html`, `corporate_memory_admin.html`.
+- **Profile + sessions + tokens (3)**: `profile.html`, `profile_sessions.html`, `my_tokens.html`.
+- **Home / dashboard / install (5)**: `home_not_onboarded.html`, `home_onboarded.html`, `dashboard.html`, `install.html`, `setup_advanced.html`.
+- **Misc (4)**: `error.html`, `me_debug.html`, `news.html`, plus the existing nav partial.
+
+**Tests:**
+- Existing `tests/test_route_integrity.py` — already in tree; re-run after every template touch.
+- New `tests/test_design_system_contract.py` — see Task 2.
+- Full `pytest tests/ -n auto` before push (per CLAUDE.md "Run tests before every push").
+
+---
+
+## Task 0: Setup + baseline
+
+**Files:** none (environment work).
+
+- [ ] **Step 1: Worktree already prepared.**
+
+The plan is being written in `.worktrees/design-pass` on branch `zs/design-pass` tracking `origin/main`. Confirm:
+
+```bash
+cd .worktrees/design-pass
+git status                # working tree clean (only this plan staged later)
+git rev-parse --abbrev-ref HEAD   # zs/design-pass
+git log -1 --oneline      # should be origin/main tip
+```
+
+- [ ] **Step 2: Create venv and install deps.**
+
+```bash
+python3 -m venv .venv
+.venv/bin/pip install -q -e ".[dev]"
+```
+
+Expected: install completes without error. Confirms the new worktree is wired up.
+
+- [ ] **Step 3: Run the full baseline test suite.**
+
+```bash
+.venv/bin/pytest tests/ --tb=short -n auto -q
+```
+
+Expected: full suite green (or only the pre-existing `test_clean_install_integration.py::test_readers_in_pre_init_dir` flake). Note exact count + any pre-existing failures in scratch notes — these are the baseline; any new failure caused by this PR is a regression.
+
+- [ ] **Step 4: Confirm LOCAL_DEV_MODE behavior + baseline screenshots.**
+
+```bash
+grep -rn "LOCAL_DEV_MODE" app/auth/ app/main.py | head    # confirm OAuth short-circuit exists
+LOCAL_DEV_MODE=1 .venv/bin/uvicorn app.main:app --port 8000 &
+sleep 3
+mkdir -p /tmp/design-pass-baseline
+ROUTES=(
+    /dashboard /home /catalog /marketplace /marketplace/guide
+    /corporate-memory /corporate-memory/admin
+    /admin/users /admin/groups /admin/access /admin/tokens
+    /admin/marketplaces /admin/tables /admin/scheduler-runs
+    /admin/server-config /admin/agent-prompt /admin/workspace-prompt
+    /admin/activity /admin/telemetry /admin/usage /admin/sessions
+    /admin/store/submissions /admin/welcome
+    /profile /profile/sessions /tokens
+    /setup /install /login
+)
+for r in "${ROUTES[@]}"; do
+    safe="${r//\//-}"
+    agent-browser open "http://localhost:8000${r}"
+    agent-browser wait --load networkidle
+    agent-browser screenshot "/tmp/design-pass-baseline${safe}.png" --full
+done
+kill %1
+```
+
+Outcome: a `/tmp/design-pass-baseline/` snapshot tree the migration tasks compare against.
+
+- [ ] **Step 5: Commit the plan.**
+
+```bash
+git add docs/superpowers/plans/2026-05-13-design-system-unification.md
+git commit -m "docs(plan): design-system unification plan (post-review revisions)"
+```
+
+---
+
+## Task 1: Token consolidation (CSS file merge)
+
+**Goal:** One stylesheet, one `:root`, one palette. No visible change yet — pure refactor.
+
+**Files:**
+- Modify: `app/web/static/style-custom.css` (top of file)
+- Modify: `app/web/templates/base.html:7-8`
+- Modify: `app/web/templates/base_login.html:7-8`
+- Delete: `app/web/static/style.css`
+
+- [ ] **Step 1: Read both CSS files in full.**
+
+```bash
+wc -l app/web/static/style.css app/web/static/style-custom.css
+```
+
+Read both end-to-end. Make a scratch list of every rule in `style.css` and decide for each:
+- **Drop**: duplicated in `style-custom.css` already (e.g. duplicate `body` rule that style-custom overrides anyway).
+- **Move**: not yet in style-custom; copy into the appropriate section of style-custom.
+- **Replace**: same selector exists in style-custom with a better value; keep style-custom's version.
+
+- [ ] **Step 2: Add to `:root` in style-custom.css any tokens style.css had that style-custom didn't.**
+
+Examples to look for (verify against actual file contents):
+- `--btn-google-bg`, `--btn-google-border` (if `.btn-google` is still used by login pages — keep tokens).
+- Any color literals like `#1a73e8` that style.css used as `--primary` — drop them; style-custom's `#0073D1` is canonical.
+- Any fonts referenced by `--font-family` (style.css legacy name) — alias them inside style-custom.
+
+After this step, style-custom.css's `:root` is the only token block in the codebase.
+
+- [ ] **Step 3: Move non-token rules from style.css into a clearly labeled section near the bottom of style-custom.css.**
+
+Add a section header:
+```css
+/* =====================================================
+   Legacy rules absorbed from the deleted style.css
+   (login button family, base typography, table defaults).
+   Reorganize during Tasks 3–4; remove once primitives cover them.
+   ===================================================== */
+```
+
+Drop every rule from style.css that maps to a primitive we'll create in Tasks 3–4 (don't move `.btn-primary` etc. — Task 3 owns the button family).
+
+- [ ] **Step 4: Drop the `style.css` link tag from both base templates.**
+
+```bash
+sed -n '6,9p' app/web/templates/base.html
+sed -n '6,9p' app/web/templates/base_login.html
+```
+
+Edit `base.html:7` and `base_login.html:7` — remove the `<link rel="stylesheet" href="{{ static_url('style.css') }}">` line. Leave the `style-custom.css` line.
+
+- [ ] **Step 5: Delete `style.css`.**
+
+```bash
+git rm app/web/static/style.css
+```
+
+- [ ] **Step 6: Visual smoke check.**
+
+```bash
+.venv/bin/uvicorn app.main:app --reload &
+# Wait for "Application startup complete"
+agent-browser open http://localhost:8000/login
+agent-browser screenshot /tmp/login-after-merge.png
+agent-browser open http://localhost:8000/        # while unauth, this redirects to login
+```
+
+Expected: login page renders without missing styles. Inter font visible. Google button still styled. Stop the server.
+
+- [ ] **Step 7: Run tests + commit.**
+
+```bash
+.venv/bin/pytest tests/ -k "not test_clean_install_integration" --tb=short -q
+git add app/web/static/style-custom.css app/web/templates/base.html app/web/templates/base_login.html
+git rm app/web/static/style.css 2>/dev/null   # already done in step 5; ensure index is correct
+git commit -m "style(css): consolidate style.css into style-custom.css
+
+Single design-token block in style-custom.css. style.css deleted; its
+rules absorbed into a labeled section pending primitive migration in
+later commits."
+```
+
+---
+
+## Task 2: Contract test for design-system invariants
+
+**Goal:** Guard the refactor with a test that fails if a future PR re-introduces a deprecated class, points at the deleted `style.css`, or splits the token block. The test is **strict from this commit forward** — every later task in this plan must keep it passing.
+
+**Files:**
+- Create: `tests/test_design_system_contract.py`
+
+- [ ] **Step 1: Write the test file.**
+
+```python
+"""Design-system invariants. Fails if a regression undoes the design-pass."""
+from pathlib import Path
+import re
+
+TEMPLATES = Path("app/web/templates")
+STATIC = Path("app/web/static")
+
+
+def _all_html() -> list[Path]:
+    return sorted(p for p in TEMPLATES.rglob("*.html"))
+
+
+def test_style_css_deleted() -> None:
+    assert not (STATIC / "style.css").exists(), (
+        "style.css must stay deleted — all rules live in style-custom.css"
+    )
+
+
+def test_no_template_references_style_css() -> None:
+    offenders = []
+    for path in _all_html():
+        text = path.read_text(encoding="utf-8")
+        if "static_url('style.css')" in text or 'static_url("style.css")' in text:
+            offenders.append(str(path))
+    assert not offenders, f"templates still link style.css: {offenders}"
+
+
+def test_style_custom_has_single_root_block() -> None:
+    css = (STATIC / "style-custom.css").read_text(encoding="utf-8")
+    root_count = len(re.findall(r"^:root\s*\{", css, flags=re.MULTILINE))
+    assert root_count == 1, f"expected exactly one :root block, found {root_count}"
+
+
+def test_canonical_primitives_defined() -> None:
+    """All primitives Tasks 3–7 introduce must be declared in style-custom.css."""
+    css = (STATIC / "style-custom.css").read_text(encoding="utf-8")
+    required = [
+        ".btn",            # base button
+        ".btn-primary",
+        ".btn-secondary",
+        ".btn-ghost",
+        ".btn-danger",
+        ".search-input",
+        ".filter-bar",
+        ".page-header",
+        ".page-header__title",
+        ".data-table",
+        ".empty-state",
+        ".toast",
+    ]
+    missing = [sel for sel in required if sel not in css]
+    assert not missing, f"missing canonical primitive selectors: {missing}"
+
+
+DEPRECATED_CLASSES = {
+    # Single class tokens only — multi-token patterns ("modal-btn primary")
+    # are caught by .modal-btn alone, no need to special-case.
+    "btn-primary-v2": "btn-primary",
+    "btn-secondary-v2": "btn-secondary",
+    "modal-btn": "btn (+ .btn-primary / .btn-secondary)",
+    "users-table": "data-table",
+    "gp-table": "data-table",
+    "marketplaces-table": "data-table",
+    "audit-table": "data-table",
+    "users-search": "search-input",
+    "marketplaces-search": "search-input",
+    "kb-search": "search-input",
+    "filters-card": "filter-bar",
+    "pill": "filter-pill",
+}
+
+# Match every class="..." or class='...' attribute, possibly multi-line.
+_CLASS_ATTR_RE = re.compile(r"""class\s*=\s*(["'])(.*?)\1""", re.DOTALL)
+
+
+def _classes_in_template(text: str) -> set[str]:
+    """Extract every class token used in the template. Tokenizes the
+    class attribute on whitespace so multi-class attrs ("btn btn-primary")
+    and multi-line attrs (Jinja templates do this) split cleanly."""
+    tokens: set[str] = set()
+    for match in _CLASS_ATTR_RE.finditer(text):
+        attr_value = match.group(2)
+        for tok in attr_value.split():
+            # Jinja conditionals: skip tokens that contain "{{", "{%", "}"
+            # — we only care about literal class names authors wrote.
+            if "{" in tok or "}" in tok:
+                continue
+            tokens.add(tok)
+    return tokens
+
+
+def test_no_deprecated_class_in_templates() -> None:
+    """Templates must use canonical primitives, not legacy aliases."""
+    offenders: dict[str, list[str]] = {}
+    for path in _all_html():
+        text = path.read_text(encoding="utf-8")
+        used = _classes_in_template(text)
+        for cls, _replacement in DEPRECATED_CLASSES.items():
+            if cls in used:
+                offenders.setdefault(cls, []).append(path.name)
+    assert not offenders, (
+        "deprecated classes found in templates:\n"
+        + "\n".join(f"  {cls} -> use {DEPRECATED_CLASSES[cls]} ({files})"
+                    for cls, files in offenders.items())
+    )
+```
+
+- [ ] **Step 2: Run the test — it should FAIL.**
+
+```bash
+.venv/bin/pytest tests/test_design_system_contract.py -v
+```
+
+Expected: `test_canonical_primitives_defined` fails (primitives not added yet), `test_no_deprecated_class_in_templates` fails (templates still use legacy classes). The other tests should pass (Task 1 already deleted style.css). Note the failures — Tasks 3 onward drive them to green.
+
+- [ ] **Step 3: Commit.**
+
+```bash
+git add tests/test_design_system_contract.py
+git commit -m "test(design): contract test for design-system invariants
+
+Asserts style.css stays deleted, single :root, canonical primitives
+exist, no deprecated class names in templates. Failing until Tasks
+3-7 add the primitives and migrate the templates."
+```
+
+---
+
+## Task 3: Button primitive hierarchy
+
+**Goal:** Define `.btn` + `.btn-primary` + `.btn-secondary` + `.btn-ghost` + `.btn-danger` + `.btn-sm`/`.btn-lg` size modifiers. Map legacy class names (`.btn-primary-v2`, `.modal-btn`, etc.) as CSS aliases so existing templates keep rendering during migration.
+
+**Files:**
+- Modify: `app/web/static/style-custom.css` (new section, before legacy-absorption block)
+
+- [ ] **Step 1: Add the button section to style-custom.css.**
+
+Insert after the existing token block, before the existing component styles. Anchor with a clear comment so reviewers can find it.
+
+```css
+/* =====================================================
+   Buttons
+   Canonical:  .btn (+ variant) (+ size).
+   Variants:   .btn-primary | .btn-secondary | .btn-ghost | .btn-danger
+   Sizes:      default | .btn-sm | .btn-lg
+   Legacy aliases at end of section — to be removed in final cleanup.
+   ===================================================== */
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    padding: 8px 16px;
+    font-family: var(--font-primary);
+    font-size: var(--text-base);
+    font-weight: var(--font-medium);
+    line-height: 1;
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: background var(--transition-fast), color var(--transition-fast),
+                border-color var(--transition-fast), box-shadow var(--transition-fast);
+    white-space: nowrap;
+    user-select: none;
+}
+
+.btn:disabled,
+.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+
+.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+
+.btn-primary {
+    background: var(--primary);
+    color: #fff;
+    border-color: var(--primary);
+}
+.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
+
+.btn-secondary {
+    background: var(--surface);
+    color: var(--text-primary);
+    border-color: var(--border);
+}
+.btn-secondary:hover { background: var(--border-light); }
+
+.btn-ghost {
+    background: transparent;
+    color: var(--text-secondary);
+}
+.btn-ghost:hover { background: var(--border-light); color: var(--text-primary); }
+
+.btn-danger {
+    background: #fff;
+    color: var(--error);
+    border-color: var(--error);
+}
+.btn-danger:hover { background: var(--error); color: #fff; }
+
+.btn-sm { padding: 4px 10px; font-size: var(--text-sm); }
+.btn-lg { padding: 12px 20px; font-size: var(--text-md); }
+
+/* Legacy aliases — remove in Task 13 once all templates migrated. */
+.btn-primary-v2 { /* alias */ }   /* will be normalized via JS-free CSS @extend-style by repeating rules below */
+```
+
+Note: CSS has no `@extend`, so the legacy alias block needs to either (a) physically share selectors (`.btn-primary-v2, .btn-primary { … }`) or (b) be temporary copy-pasted rules. Option (a) is cleaner:
+
+```css
+/* Legacy aliases — primary group */
+.btn-primary-v2 { /* deprecated: use .btn .btn-primary */ }
+.btn.btn-primary-v2,
+.btn-primary-v2 { /* falls through to .btn-primary on legacy markup */
+    /* duplicate of .btn .btn-primary so legacy markup without .btn still works */
+    display: inline-flex;
+    /* …copy of .btn + .btn-primary properties… */
+}
+```
+
+Simpler approach: just add **selector-list** rules:
+
+```css
+.btn.btn-primary, .btn-primary-v2 { background: var(--primary); color: #fff; border-color: var(--primary); }
+.btn.btn-primary:hover, .btn-primary-v2:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
+```
+
+Apply same selector-list trick for `.modal-btn.primary` (alias of `.btn .btn-primary` inside modals), `.modal-btn` (alias of `.btn .btn-secondary`).
+
+- [ ] **Step 2: Search for every distinct button class name used today.**
+
+```bash
+grep -roh 'class="[^"]*\(btn\|button\)[^"]*"' app/web/templates/ \
+    | sort -u > /tmp/btn-classes.txt
+cat /tmp/btn-classes.txt
+```
+
+For every entry, add an alias rule to the legacy block IF it's NOT one of the canonical names. Verify nothing renders unstyled.
+
+- [ ] **Step 3: Verify contract test progresses.**
+
+```bash
+.venv/bin/pytest tests/test_design_system_contract.py::test_canonical_primitives_defined -v
+```
+
+Expected: now passes for the button selectors (`.btn`, `.btn-primary`, etc.).
+
+- [ ] **Step 4: Visual smoke check.**
+
+```bash
+.venv/bin/uvicorn app.main:app --reload &
+agent-browser open http://localhost:8000/login
+agent-browser snapshot -i           # verify Google button still renders correctly
+```
+
+- [ ] **Step 5: Commit.**
+
+```bash
+git add app/web/static/style-custom.css
+git commit -m "feat(css): canonical .btn primitive hierarchy
+
+Defines .btn + .btn-primary/.btn-secondary/.btn-ghost/.btn-danger +
+.btn-sm/.btn-lg. Legacy class names (.btn-primary-v2, .modal-btn,
+.modal-btn.primary, etc.) aliased via selector lists so existing
+templates keep rendering. Aliases removed in final cleanup task."
+```
+
+---
+
+## Task 4: Form-control primitives — `.search-input`, `.filter-bar`, `.filter-pill`
+
+**Goal:** One filter-bar pattern across all pages. Same height, same focus ring, same border radius. Pill-shaped category filters become a separate explicit class (`.filter-pill`) used inside `.filter-bar`.
+
+**Files:**
+- Modify: `app/web/static/style-custom.css`
+
+- [ ] **Step 1: Add the form-controls section.**
+
+```css
+/* =====================================================
+   Form controls — inputs, selects, textareas, filter bars.
+   Canonical:  .search-input | .filter-bar | .filter-pill
+   ===================================================== */
+
+.search-input,
+.filter-bar input[type="search"],
+.filter-bar input[type="text"],
+.filter-bar select {
+    height: 36px;
+    padding: 0 12px;
+    font-family: var(--font-primary);
+    font-size: var(--text-sm);
+    color: var(--text-primary);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.search-input::placeholder,
+.filter-bar input::placeholder { color: var(--text-muted); }
+
+.search-input:focus,
+.filter-bar input:focus,
+.filter-bar select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: var(--focus-ring);
+}
+
+.filter-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+    padding: var(--space-3) var(--space-4);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--space-4);
+}
+
+.filter-bar > .search-input { flex: 1 1 240px; min-width: 200px; }
+
+.filter-pill {
+    display: inline-flex;
+    align-items: center;
+    height: 28px;
+    padding: 0 12px;
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--text-secondary);
+    background: transparent;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    transition: background var(--transition-fast), color var(--transition-fast);
+}
+
+.filter-pill:hover { background: var(--border-light); color: var(--text-primary); }
+
+.filter-pill.is-active {
+    background: var(--primary-light);
+    color: var(--primary);
+    border-color: var(--primary);
+}
+
+/* Legacy aliases. Same selector-list trick as buttons. */
+.users-search,
+.marketplaces-search,
+.kb-search { /* legacy classes, treated as .search-input */ }
+.users-search, .marketplaces-search, .kb-search, .search-input {
+    /* duplicated to keep legacy markup styled until templates migrate */
+}
+```
+
+(In practice the test enforces these legacy class names are deleted from templates by Task 13 — the alias block is throwaway scaffolding.)
+
+- [ ] **Step 2: Run contract test.**
+
+```bash
+.venv/bin/pytest tests/test_design_system_contract.py -v
+```
+
+Expected: `.search-input`, `.filter-bar` now found.
+
+- [ ] **Step 3: Commit.**
+
+```bash
+git add app/web/static/style-custom.css
+git commit -m "feat(css): .search-input / .filter-bar / .filter-pill primitives
+
+Single canonical filter-bar shape: 36px-height inputs, 28px pills with
+.is-active state, consistent focus ring. Legacy .users-search /
+.marketplaces-search / .kb-search aliased."
+```
+
+---
+
+## Task 5: Nav unification — fix the Admin entry
+
+**Goal:** Resolve the user's specific complaint. "Home", "Marketplace", "Data Packages" render via `<a class="app-nav-link">`; "Admin" renders via `<button class="app-nav-link app-nav-menu-trigger">`. Today the button strips font/color/padding inheritance and adds its own active state (`var(--border-light)` instead of `var(--primary)`). Make them identical.
+
+**Files:**
+- Modify: `app/web/templates/_app_header.html`
+- Modify: `app/web/static/style-custom.css` (the existing `.app-nav-link` + `.app-nav-menu-trigger` blocks, around line 2124–2220 per the audit)
+- Create: `app/web/static/app.js`
+
+- [ ] **Step 1: Read the current nav CSS rules.**
+
+```bash
+grep -n "\.app-nav-link\|\.app-nav-menu-trigger\|\.app-nav-menu-chevron" app/web/static/style-custom.css
+```
+
+Read every block referenced, end to end. Confirm where active state diverges.
+
+- [ ] **Step 2: Merge selectors so `<button>` inherits the full link styling.**
+
+Change every `.app-nav-link { … }` rule to `.app-nav-link, .app-nav-menu-trigger { … }`. Same for `:hover`, `.is-active`, focus states. Then DELETE the standalone `.app-nav-menu-trigger { … }` rules that previously stripped button chrome — they're redundant once the trigger shares the link rules.
+
+The Admin trigger should now match siblings 1:1 in font, color, padding, hover, and active state. Active state of Admin uses the same `var(--primary)` color + `var(--primary-light)` background as other active links. Chevron icon stays.
+
+- [ ] **Step 3: Extract inline `<script>` from `_app_header.html`.**
+
+Move the `_wireDropdown` function + the two `_wireDropdown(...)` calls out of `_app_header.html:122-146` into a new file `app/web/static/app.js`.
+
+```javascript
+// app/web/static/app.js
+(function () {
+    function wireDropdown(triggerId, panelId) {
+        var trigger = document.getElementById(triggerId);
+        var panel = document.getElementById(panelId);
+        if (!trigger || !panel) return;
+        function setOpen(open) {
+            trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
+            if (open) { panel.removeAttribute('hidden'); }
+            else { panel.setAttribute('hidden', ''); }
+        }
+        trigger.addEventListener('click', function (e) {
+            e.stopPropagation();
+            setOpen(trigger.getAttribute('aria-expanded') !== 'true');
+        });
+        document.addEventListener('click', function (e) {
+            if (!panel.contains(e.target) && e.target !== trigger) setOpen(false);
+        });
+        document.addEventListener('keydown', function (e) {
+            if (e.key === 'Escape') { setOpen(false); trigger.focus(); }
+        });
+    }
+    window.appUI = { wireDropdown: wireDropdown };
+
+    document.addEventListener('DOMContentLoaded', function () {
+        wireDropdown('userMenuTrigger', 'userMenuPanel');
+        wireDropdown('adminNavTrigger', 'adminNavPanel');
+    });
+})();
+```
+
+- [ ] **Step 4: Link `app.js` from `base.html` + `base_login.html`.**
+
+In `base.html`, after the existing `style-custom.css` link, add:
+
+```html
+<script src="{{ static_url('app.js') }}" defer></script>
+```
+
+(`base_login.html` probably doesn't need it — the login page has no nav. Skip there to avoid 404.)
+
+Then delete the inline `<script>` block at `_app_header.html:122-146`.
+
+- [ ] **Step 5: Browser-verify the nav.**
+
+```bash
+# Start uvicorn with LOCAL_DEV_MODE=1 so we can browse as admin without OAuth.
+LOCAL_DEV_MODE=1 .venv/bin/uvicorn app.main:app --reload &
+
+agent-browser open http://localhost:8000/dashboard
+agent-browser snapshot -i        # nav visible; Home/Marketplace/Data Packages + Admin all rendered
+agent-browser screenshot /tmp/nav-after.png --full
+# Click Admin trigger
+agent-browser click @<adminNavTrigger-ref>
+agent-browser screenshot /tmp/nav-dropdown.png
+```
+
+Expected: Admin label same font weight, size, color as siblings. Hover state matches. Active state (when on any /admin/* path) matches. Dropdown opens.
+
+- [ ] **Step 6: Commit.**
+
+```bash
+git add app/web/templates/_app_header.html app/web/templates/base.html \
+        app/web/static/style-custom.css app/web/static/app.js
+git commit -m "fix(nav): unify Admin trigger with sibling nav links
+
+Admin dropdown trigger now shares .app-nav-link styling 1:1 with
+<a> siblings — same font, color, padding, hover, active state
+(primary blue, not the grey it used to render). Inline dropdown
+JS moved to app.js as window.appUI.wireDropdown."
+```
+
+---
+
+## Task 6: Page-header primitive
+
+**Goal:** One page-header layout. Title + optional subtitle + optional right-aligned action slot. Same H1 size everywhere (22px / `--text-xl` adjusted). Hero variant for marketing pages opt-in via `.page-header--hero`.
+
+**Files:**
+- Modify: `app/web/static/style-custom.css`
+
+- [ ] **Step 1: Add the page-header primitive section.**
+
+```css
+/* =====================================================
+   Page header — title + subtitle + actions row.
+   Default:  compact 22px title for admin/content pages.
+   Hero:     .page-header--hero for marketing/landing.
+   ===================================================== */
+
+.page-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-4);
+    margin: var(--space-6) 0 var(--space-5);
+    flex-wrap: wrap;
+}
+
+.page-header__main {
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+.page-header__title {
+    margin: 0;
+    font-size: 22px;
+    font-weight: var(--font-semibold);
+    color: var(--text-primary);
+    line-height: 1.2;
+}
+
+.page-header__subtitle {
+    margin: var(--space-2) 0 0;
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+    line-height: 1.4;
+}
+
+.page-header__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+}
+
+/* Hero variant — for landing / store / marketplace headers. */
+.page-header--hero {
+    padding: var(--space-7) var(--space-6);
+    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+    color: #fff;
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--space-6);
+}
+.page-header--hero .page-header__title { font-size: 28px; color: #fff; }
+.page-header--hero .page-header__subtitle { color: rgba(255,255,255,0.85); }
+
+/* Eyebrow label inside hero. */
+.page-header__eyebrow {
+    text-transform: uppercase;
+    font-size: var(--text-xs);
+    letter-spacing: 0.8px;
+    color: rgba(255,255,255,0.75);
+    margin: 0 0 var(--space-2);
+}
+```
+
+- [ ] **Step 2: Commit.**
+
+```bash
+git add app/web/static/style-custom.css
+git commit -m "feat(css): .page-header primitive with hero variant
+
+Unified header pattern: 22px title, optional subtitle, optional
+right-aligned actions slot. .page-header--hero opt-in for landing
+pages keeps the gradient look of /store and /marketplace heroes."
+```
+
+---
+
+## Task 7: `.data-table`, `.empty-state`, `.toast` primitives
+
+**Goal:** Cover the remaining three components called out by the audit. `.data-table` already exists in style-custom.css (line ~2262 per audit) — keep its rules but ensure they handle every column-width variant the admin pages need. `.empty-state` is new. `.toast` is new + paired with a JS helper.
+
+**Files:**
+- Modify: `app/web/static/style-custom.css`
+- Modify: `app/web/static/app.js`
+
+- [ ] **Step 1: Audit the existing `.data-table` block.**
+
+```bash
+grep -n "\.data-table" app/web/static/style-custom.css
+```
+
+Read the block. Add `.data-table--compact` modifier (smaller padding for dense admin tables like Audit log) if not already present. Confirm `th` uses uppercase tracking, `td` uses `tabular-nums`, hover state is `var(--border-light)`.
+
+- [ ] **Step 2: Add `.empty-state` primitive.**
+
+```css
+/* =====================================================
+   Empty state — for "no records" / "no results" panels.
+   ===================================================== */
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-8) var(--space-6);
+    text-align: center;
+    background: var(--surface);
+    border: 1px dashed var(--border);
+    border-radius: var(--radius-lg);
+    color: var(--text-secondary);
+}
+
+.empty-state__icon { font-size: 32px; opacity: 0.5; }
+.empty-state__title { font-size: var(--text-md); color: var(--text-primary); font-weight: var(--font-medium); margin: 0; }
+.empty-state__description { font-size: var(--text-sm); margin: 0; max-width: 480px; line-height: 1.5; }
+.empty-state__actions { margin-top: var(--space-3); }
+```
+
+- [ ] **Step 3: Add `.toast` primitive + JS helper.**
+
+```css
+/* =====================================================
+   Toasts — global notification surface.
+   Containers stacked bottom-right; dismissed via timeout or click.
+   ===================================================== */
+
+.toast-container {
+    position: fixed;
+    right: var(--space-5);
+    bottom: var(--space-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    z-index: 9999;
+    pointer-events: none;
+}
+
+.toast {
+    pointer-events: auto;
+    min-width: 240px;
+    max-width: 360px;
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius-md);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-elevated);
+    font-size: var(--text-sm);
+    color: var(--text-primary);
+    cursor: pointer;
+    animation: toast-in 200ms ease;
+}
+
+.toast.is-success { border-left: 3px solid var(--success); }
+.toast.is-warning { border-left: 3px solid var(--warning); }
+.toast.is-error   { border-left: 3px solid var(--error); }
+.toast.is-info    { border-left: 3px solid var(--primary); }
+
+@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+```
+
+Append to `app.js`:
+
+```javascript
+(function () {
+    function ensureContainer() {
+        var c = document.getElementById('appToastContainer');
+        if (c) return c;
+        c = document.createElement('div');
+        c.id = 'appToastContainer';
+        c.className = 'toast-container';
+        document.body.appendChild(c);
+        return c;
+    }
+    window.appToast = function (opts) {
+        opts = opts || {};
+        var kind = opts.kind || 'info';
+        var msg = String(opts.msg || '');
+        var timeout = opts.timeout == null ? 4000 : opts.timeout;
+        var el = document.createElement('div');
+        el.className = 'toast is-' + kind;
+        el.textContent = msg;
+        el.addEventListener('click', function () { el.remove(); });
+        ensureContainer().appendChild(el);
+        if (timeout > 0) setTimeout(function () { el.remove(); }, timeout);
+        return el;
+    };
+})();
+```
+
+- [ ] **Step 4: Run contract test — should be GREEN now for primitives.**
+
+```bash
+.venv/bin/pytest tests/test_design_system_contract.py::test_canonical_primitives_defined -v
+```
+
+Expected: pass. (`test_no_deprecated_class_in_templates` still fails — that's Tasks 8–12's job.)
+
+- [ ] **Step 5: Commit.**
+
+```bash
+git add app/web/static/style-custom.css app/web/static/app.js
+git commit -m "feat(css): .data-table modifier, .empty-state, .toast primitives
+
+.data-table--compact for dense admin tables. .empty-state and .toast
+new; toasts paired with window.appToast({kind, msg, timeout})."
+```
+
+---
+
+## Task 8: Template migration — admin index pages (12 files)
+
+**Goal:** Sweep all admin list/index pages onto the new primitives. Mechanical: each page's inline `<style>` block either deletes (when it only re-states global rules) or shrinks (when it has page-specific column widths).
+
+**Files (12 templates):**
+- `app/web/templates/activity_center.html`
+- `app/web/templates/admin_access.html`
+- `app/web/templates/admin_groups.html`
+- `app/web/templates/admin_marketplaces.html`
+- `app/web/templates/admin_scheduler_runs.html`
+- `app/web/templates/admin_sessions.html`
+- `app/web/templates/admin_store_submissions.html`
+- `app/web/templates/admin_tables.html`
+- `app/web/templates/admin_tokens.html`
+- `app/web/templates/admin_usage.html`
+- `app/web/templates/admin_users.html`
+- `app/web/templates/admin_welcome.html`
+
+**Per-template recipe (apply to all 12):**
+
+- [ ] **Step 1 (per file): Read the file end-to-end.**
+
+```bash
+.venv/bin/python -c "
+import sys, pathlib
+p = pathlib.Path(sys.argv[1])
+print(p.read_text())
+" app/web/templates/<file>
+```
+
+Identify: (a) the page-header markup (some H1 + maybe a subtitle + maybe an action button), (b) the filter/search row markup, (c) the table markup, (d) inline `<style>` block.
+
+- [ ] **Step 2 (per file): Replace page-header markup.**
+
+Before:
+```html
+<div class="users-page">
+  <div class="users-toolbar">
+    <h1 class="users-title">Users</h1>
+    <input class="users-search" type="search" placeholder="…">
+    <button>+ Add user</button>
+  </div>
+</div>
+```
+
+After:
+```html
+<header class="page-header">
+  <div class="page-header__main">
+    <h1 class="page-header__title">Users</h1>
+  </div>
+  <div class="page-header__actions">
+    <button class="btn btn-primary">+ Add user</button>
+  </div>
+</header>
+
+<div class="filter-bar">
+  <input class="search-input" type="search" placeholder="…">
+</div>
+```
+
+- [ ] **Step 3 (per file): Swap table class.**
+
+`class="users-table"` → `class="data-table"`. Same for `gp-table`, `marketplaces-table`, `audit-table`. Move any genuinely page-specific column-width rules into a slim inline `<style>` block that only sets `<colgroup>` widths — nothing else.
+
+- [ ] **Step 4 (per file): Strip the now-orphan rules from the inline `<style>` block.**
+
+Delete every rule that duplicates `.data-table`, `.btn-*`, `.search-input`, `.page-header__*`, or `.filter-bar`. Keep only page-specific column widths or page-specific layout grids. If the whole `<style>` block becomes empty, delete it.
+
+- [ ] **Step 5 (per file): Insert `.empty-state` markup if the page renders a "no records" state.**
+
+Before (varied per page — `<p>No users found.</p>`, `<div class="empty">…</div>`, etc.):
+```html
+{% if not users %}<p>No users found.</p>{% endif %}
+```
+
+After:
+```html
+{% if not users %}
+<div class="empty-state">
+  <div class="empty-state__title">No users yet</div>
+  <p class="empty-state__description">Add a user to get started, or wait for Google sign-in to populate the list.</p>
+</div>
+{% endif %}
+```
+
+(Wording varies per page — match the page's domain.)
+
+- [ ] **Step 6 (per file): Browser-verify.**
+
+```bash
+LOCAL_DEV_MODE=1 .venv/bin/uvicorn app.main:app --reload &
+agent-browser open http://localhost:8000/admin/<page>
+agent-browser screenshot /tmp/<page>-after.png --full
+```
+
+Compare against `/tmp/<page>-before.png` if you took one. Expected: identical structural placement, modernized styling, no broken layout.
+
+- [ ] **Step 7 (per file): Commit.**
+
+```bash
+git add app/web/templates/<file>
+git commit -m "style(<page>): migrate to canonical primitives
+
+Replace per-page <style> block with .page-header, .filter-bar,
+.search-input, .data-table, .empty-state."
+```
+
+- [ ] **Step 8 (whole task): Run contract test + full suite.**
+
+After all 12 files done:
+
+```bash
+.venv/bin/pytest tests/test_design_system_contract.py -v
+.venv/bin/pytest tests/ -k "not test_clean_install_integration" -n auto -q
+```
+
+Expected: contract test progressing (some legacy-class entries gone). Full suite green.
+
+---
+
+## Task 9: Template migration — admin detail pages (7 files)
+
+**Files:**
+- `app/web/templates/admin_group_detail.html`
+- `app/web/templates/admin_server_config.html`
+- `app/web/templates/admin_session_detail.html`
+- `app/web/templates/admin_store_submission_detail.html`
+- `app/web/templates/admin_user_detail.html`
+- `app/web/templates/admin_workspace_prompt.html`
+- `app/web/templates/admin/news_editor.html`
+
+Apply the **same recipe as Task 8** (steps 1–7 per file). Detail pages often have form blocks instead of tables — for forms, use `.btn .btn-primary` for submit and `.btn .btn-secondary` for cancel; inputs use `.search-input` if they're plain text inputs or define a sibling `.form-input` primitive in `style-custom.css` if more form-specific styling is needed (height/border match `.search-input` so visual consistency holds).
+
+- [ ] **Step 1: If any form-input styling diverges from `.search-input`, add `.form-input` primitive to style-custom.css matching `.search-input` baseline plus textarea sizing rules.**
+
+```css
+.form-input,
+.form-input[type="text"],
+.form-input[type="email"],
+.form-input[type="number"],
+.form-input[type="password"],
+.form-input[type="url"],
+textarea.form-input,
+select.form-input {
+    /* same as .search-input but multi-line capable */
+    width: 100%;
+    min-height: 36px;
+    padding: 8px 12px;
+    /* (etc — copy from .search-input) */
+}
+textarea.form-input { min-height: 96px; resize: vertical; font-family: var(--font-mono); }
+```
+
+Add `.form-input` to the contract test's required-selectors list and re-run.
+
+- [ ] **Step 2..N (per file): Migrate per Task-8 recipe.**
+
+One commit per file. Same message structure.
+
+- [ ] **Step N+1: Run full suite + commit.**
+
+```bash
+.venv/bin/pytest tests/ -k "not test_clean_install_integration" -n auto -q
+```
+
+---
+
+## Task 10: Template migration — catalog + marketplace + store (8 files)
+
+**Files:**
+- `app/web/templates/catalog.html`
+- `app/web/templates/marketplace.html`
+- `app/web/templates/marketplace_guide.html`
+- `app/web/templates/marketplace_item_detail.html`
+- `app/web/templates/marketplace_plugin_detail.html`
+- `app/web/templates/store_edit.html`
+- `app/web/templates/store_examples.html`
+- `app/web/templates/store_upload.html`
+
+**Special considerations:**
+
+- Catalog has pill-shaped filters inside a `.filters-card` (per audit at `store_listing.html:54-77` pattern). Replace `.filters-card .pill` with `.filter-bar` + `.filter-pill` (defined in Task 4). Same shape, canonical name.
+- Marketplace/store use **hero page-headers** (gradient background, larger title, eyebrow label). Use `.page-header.page-header--hero` with `.page-header__eyebrow` (defined in Task 6).
+- `marketplace.html` has tabbed sub-views (`?tab=flea`, `?tab=my`). Tabs render as a sibling row to the hero — define `.tab-strip` + `.tab-strip__item` in style-custom.css if not already present; otherwise alias whatever's there.
+
+Apply Task-8 recipe with these hero/pill substitutions. One commit per file.
+
+---
+
+## Task 11: Template migration — corporate memory, profile, home, misc (15 files)
+
+**Files (grouped for one task, separate commits):**
+
+- **Corporate memory (2)**: `corporate_memory.html`, `corporate_memory_admin.html`
+- **Profile / sessions / tokens (3)**: `profile.html`, `profile_sessions.html`, `my_tokens.html`
+- **Home / dashboard / install / setup (5)**: `home_not_onboarded.html`, `home_onboarded.html`, `dashboard.html`, `install.html`, `setup_advanced.html`
+- **Misc (5)**: `error.html`, `me_debug.html`, `news.html`, `_quarantine_banner.html`, `_flea_versions.html`
+
+Apply Task-8 recipe per file. `_quarantine_banner.html` and `_flea_versions.html` are partials — they may not have a page-header (they're embedded chunks). Just clean up their inline styles to use tokens + canonical classes.
+
+`dashboard.html` likely has stat-card components — define `.stat-card` primitive if multiple pages use it, or scope to dashboard alone.
+
+---
+
+## Task 12: Login / auth page sweep
+
+**Goal:** Catch the login flow (uses `base_login.html`, not `base.html` — no nav, no toasts wiring). Keep it minimal — these pages are usually fine, just verify they render after the token consolidation didn't break anything.
+
+**Files (verify, light touch if needed):**
+- `app/web/templates/login.html`
+- `app/web/templates/login_email.html`
+- `app/web/templates/login_magic_link.html`
+- `app/web/templates/login_magic_link_sent.html`
+- `app/web/templates/password_setup.html`
+- `app/web/templates/password_reset.html`
+- `app/web/templates/setup.html`
+- `app/web/templates/desktop_link.html`
+
+For each: open in agent-browser, screenshot. If anything looks broken (Inter font not loaded, Google button wrong color, etc.), fix. If it looks fine, no edit needed.
+
+- [ ] **Step 1: Loop through each login route.**
+
+```bash
+LOCAL_DEV_MODE=1 .venv/bin/uvicorn app.main:app --reload &
+for route in /login /login/email /login/magic-link /password/reset /setup /desktop-link; do
+    agent-browser open "http://localhost:8000${route}"
+    agent-browser screenshot "/tmp/loginflow${route//\//-}-after.png" --full
+done
+```
+
+- [ ] **Step 2: Triage screenshots manually. Only edit files where rendering breaks.**
+
+- [ ] **Step 3: Commit any fixes.**
+
+---
+
+## Task 13: Remove legacy CSS aliases
+
+**Goal:** Now that every template uses the canonical primitives, delete the legacy alias rules from `style-custom.css`. Contract test enforces no template re-introduces them.
+
+**Files:**
+- Modify: `app/web/static/style-custom.css`
+
+- [ ] **Step 1: Grep for residual legacy class references in templates.**
+
+```bash
+for cls in btn-primary-v2 btn-secondary-v2 modal-btn users-table gp-table marketplaces-table audit-table users-search marketplaces-search kb-search filters-card pill; do
+    echo "=== $cls ==="
+    grep -l "$cls" app/web/templates/ -r
+done
+```
+
+Expected: empty for each. If any template still references one, go back and migrate it first.
+
+- [ ] **Step 2: Delete the legacy-alias sections from style-custom.css.**
+
+Remove every selector that exists ONLY to alias a legacy class. Find them by the `/* Legacy aliases — remove in Task 13 */` comments planted in Tasks 3–4.
+
+Also delete the "Legacy rules absorbed from the deleted style.css" section planted in Task 1 — its contents should by now be either covered by primitives or no longer referenced.
+
+- [ ] **Step 3: Run contract test — should be GREEN end-to-end.**
+
+```bash
+.venv/bin/pytest tests/test_design_system_contract.py -v
+```
+
+Expected: every test passes.
+
+- [ ] **Step 4: Run full suite.**
+
+```bash
+.venv/bin/pytest tests/ -n auto -q
+```
+
+Expected: green (modulo pre-existing flake).
+
+- [ ] **Step 5: Commit.**
+
+```bash
+git add app/web/static/style-custom.css
+git commit -m "style(css): remove legacy class aliases
+
+All templates now use canonical primitives. Deprecated class names
+(.btn-primary-v2, .modal-btn, .users-table, .gp-table,
+.marketplaces-table, .audit-table, .users-search,
+.marketplaces-search, .kb-search, .filters-card, .pill) gone from
+both templates and CSS."
+```
+
+---
+
+## Task 14: ~~Sticky page header~~ — DROPPED (deferred to follow-up PR)
+
+Per review: expands review surface (12 admin pages need sticky-mode opt-in + viewport smoke tests) without addressing the user's complaint. Open follow-up issue after this PR merges.
+
+<details><summary>Original task body (kept for follow-up reference)</summary>
+
+### Sticky page header for long admin tables (nice-to-have #1)
+
+**Goal:** When scrolling a long admin list (users, marketplaces, audit log), the `.page-header` + `.filter-bar` stay visible.
+
+**Files:**
+- Modify: `app/web/static/style-custom.css`
+
+- [ ] **Step 1: Add a `.page-header--sticky` modifier.**
+
+```css
+.page-header--sticky {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    background: var(--background);
+    margin-top: 0;
+    padding-top: var(--space-4);
+    padding-bottom: var(--space-3);
+    border-bottom: 1px solid var(--border);
+}
+
+/* When the page-header is sticky, the filter-bar can stack right below it. */
+.page-header--sticky + .filter-bar {
+    position: sticky;
+    top: 72px;     /* page-header height + a bit */
+    z-index: 49;
+    margin-bottom: var(--space-4);
+}
+```
+
+- [ ] **Step 2: Opt in for admin list pages (12 from Task 8).**
+
+For each of the 12, change `<header class="page-header">` to `<header class="page-header page-header--sticky">`. Quick edit.
+
+- [ ] **Step 3: Browser-verify a long table.**
+
+```bash
+agent-browser open http://localhost:8000/admin/activity     # likely has many rows
+agent-browser scroll down 800
+agent-browser screenshot /tmp/sticky-scrolled.png --full
+```
+
+Expected: page-header + filter-bar remain visible at the top.
+
+- [ ] **Step 4: Commit.**
+
+```bash
+git add app/web/static/style-custom.css app/web/templates/admin_*.html app/web/templates/activity_center.html
+git commit -m "feat(css): page-header--sticky modifier for long admin lists"
+```
+
+---
+
+</details>
+
+---
+
+## Task 15: ~~Dark-mode token skeleton~~ — DROPPED (deferred to follow-up PR)
+
+Per review: silently expands review surface ("does this also work dark?" on every selector touched). Defer to a focused follow-up PR with a UI toggle.
+
+<details><summary>Original task body (kept for follow-up reference)</summary>
+
+### Dark-mode token skeleton (nice-to-have #2)
+
+**Goal:** Lay the groundwork even without a UI toggle. A future PR can wire a toggle; this PR just defines the dark palette so future work is mechanical.
+
+**Files:**
+- Modify: `app/web/static/style-custom.css`
+
+- [ ] **Step 1: Add a `[data-theme="dark"]` token override block right after the `:root` block.**
+
+```css
+:root[data-theme="dark"] {
+    --primary: #4FA8FF;
+    --primary-light: rgba(79, 168, 255, 0.15);
+    --primary-dark: #2B7CD9;
+    --text-primary: #E5E7EB;
+    --text-secondary: #9CA3AF;
+    --text-muted: #6B7280;
+    --background: #0F172A;
+    --surface: #1E293B;
+    --border: #334155;
+    --border-light: #1E293B;
+    --shadow-sm: rgba(0,0,0,0.4) 0px 1px 2px 0px;
+    --shadow-card: 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.4);
+    --shadow-elevated: 0 8px 24px rgba(0,0,0,0.45);
+    --focus-ring: 0 0 0 3px rgba(79, 168, 255, 0.4);
+}
+```
+
+No template change. No toggle yet. Verify via DevTools by setting `document.documentElement.dataset.theme = 'dark'` — every primitive should re-skin via the token cascade.
+
+- [ ] **Step 2: Browser-verify by injecting the attribute.**
+
+```bash
+agent-browser open http://localhost:8000/dashboard
+agent-browser keyboard type ''     # focus body
+# Use a one-shot eval via the inspect tool to set documentElement dataset:
+agent-browser --headed inspect    # then in DevTools console: document.documentElement.dataset.theme = 'dark'
+agent-browser screenshot /tmp/dashboard-dark.png --full
+```
+
+Expected: all primitives re-skin coherently. Buttons, tables, page headers, filter bars all in dark variants. No hardcoded white backgrounds peeking through. If something doesn't re-skin, that's a hardcoded color we missed — fix the offending rule to use a token.
+
+- [ ] **Step 3: Commit.**
+
+```bash
+git add app/web/static/style-custom.css
+git commit -m "feat(css): dark-mode token skeleton
+
+Adds :root[data-theme=\"dark\"] palette override. No UI toggle yet —
+flipping the attribute via JS re-skins every primitive that uses
+tokens correctly. Toggle to be wired in a follow-up PR."
+```
+
+---
+
+  </details>
+
+---
+
+## Task 16: CHANGELOG entry + final sweep + push
+
+- [ ] **Step 1: Update CHANGELOG.md.**
+
+Add to the top `## [Unreleased]` section:
+
+```markdown
+### Changed
+- Web UI design system unified: single stylesheet (`style-custom.css`),
+  canonical primitives for buttons, inputs, filter bars, page headers,
+  tables, empty states, toasts. Top-nav Admin entry now matches sibling
+  links in font / color / hover / active state. 40+ templates migrated;
+  legacy class names (`.btn-primary-v2`, `.modal-btn`, `.users-table`,
+  `.users-search`, etc.) removed. Dark-mode token skeleton in place
+  behind `[data-theme="dark"]` for a future toggle.
+
+### Removed
+- `app/web/static/style.css` — content folded into `style-custom.css`.
+
+### Internal
+- New `tests/test_design_system_contract.py` enforces design-system
+  invariants (single `:root` block, no deprecated class names in
+  templates, canonical primitives defined).
+- Inline `<style>` blocks removed from 35+ templates; per-page CSS now
+  only carries column-width specifics where needed.
+- Nav dropdown JS extracted from inline `<script>` in `_app_header.html`
+  into `app/web/static/app.js` (also hosts the new `window.appToast`
+  helper).
+```
+
+- [ ] **Step 2: Vendor-agnostic token scan over the entire diff.**
+
+```bash
+git diff origin/main..HEAD -- ':(exclude)docs/superpowers/plans/' \
+    | grep -niE 'foundryai|groupon|prj-grp|agnes-dev|grp_foundryai|@groupon\.com|@groupondev\.com|keboola/agnes|\.internal\b' \
+    || echo "clean"
+```
+
+Expected: `clean`. If anything matches, generalize before pushing.
+
+- [ ] **Step 3: Final full-suite run (matches CI exactly per CLAUDE.md).**
+
+```bash
+.venv/bin/pytest tests/ --tb=short -n auto -q
+```
+
+Expected: green (modulo pre-existing flake).
+
+- [ ] **Step 4: Comprehensive browser smoke pass.**
+
+Iterate over every route via agent-browser. For each, snapshot + screenshot, then visually skim. Use a single shell loop:
+
+```bash
+LOCAL_DEV_MODE=1 .venv/bin/uvicorn app.main:app --reload &
+ROUTES=(
+    /dashboard /home
+    /catalog
+    /marketplace /marketplace?tab=flea /marketplace?tab=my /marketplace/guide
+    /corporate-memory /corporate-memory/admin
+    /admin/users /admin/groups /admin/access /admin/tokens
+    /admin/marketplaces /admin/tables /admin/scheduler-runs
+    /admin/server-config /admin/agent-prompt /admin/workspace-prompt
+    /admin/activity /admin/telemetry /admin/usage /admin/sessions
+    /admin/store/submissions
+    /admin/welcome
+    /profile /profile/sessions /tokens
+    /setup /install
+    /login
+)
+for r in "${ROUTES[@]}"; do
+    safe="${r//\//-}"
+    safe="${safe//\?/--Q}"
+    agent-browser open "http://localhost:8000${r}"
+    agent-browser wait --load networkidle
+    agent-browser screenshot "/tmp/smoke${safe}.png" --full
+done
+```
+
+Eyeball each screenshot. Anything that looks broken — fix and re-test.
+
+- [ ] **Step 5: Push branch + open PR.**
+
+```bash
+git push -u origin zs/design-pass
+gh pr create --title "UI design system unification: single stylesheet, canonical primitives, nav fix" --body "$(cat <<'EOF'
+## Summary
+
+- **Single stylesheet**: `style.css` deleted; rules folded into `style-custom.css`. One `:root` token block.
+- **Canonical primitives**: `.btn` family, `.search-input`, `.filter-bar`, `.filter-pill`, `.page-header` (+ hero modifier), `.data-table` (+ compact modifier), `.empty-state`, `.toast`. Every page uses them.
+- **Top-nav Admin entry fixed**: Admin trigger now shares `.app-nav-link` styling 1:1 with sibling `<a>` entries — same font, color, padding, hover, active state. The user-reported "Admin looks different" goes away.
+- **40+ templates migrated**: inline `<style>` blocks reduced to only page-specific column widths where genuinely needed. Legacy class names (`.btn-primary-v2`, `.modal-btn`, `.users-table`, `.gp-table`, `.marketplaces-table`, `.audit-table`, `.users-search`, `.marketplaces-search`, `.kb-search`, `.filters-card .pill`) gone from templates and CSS.
+- **Nice-to-haves**: `.page-header--sticky` for long admin tables; dark-mode token skeleton behind `[data-theme="dark"]` ready for a follow-up toggle PR; `window.appToast({kind, msg})` helper in `app/web/static/app.js`.
+- **Contract test**: `tests/test_design_system_contract.py` fails CI if a future PR re-introduces a deprecated class or breaks the single-stylesheet invariant.
+
+## Test plan
+
+- [ ] Full pytest suite green: `pytest tests/ -n auto`
+- [ ] New contract test green: `pytest tests/test_design_system_contract.py -v`
+- [ ] Browser smoke pass via agent-browser over ~30 routes (see commit log for the loop used)
+- [ ] No hardcoded customer-specific tokens in diff
+- [ ] CHANGELOG updated under `[Unreleased]`
+EOF
+)"
+```
+
+- [ ] **Step 6: Watch CI. If green and `[Unreleased]` would land alone, cut the release per CLAUDE.md "Release-cut belongs to the PR — non-negotiable":**
+
+   1. Bump `pyproject.toml` to the next patch version.
+   2. Rename `## [Unreleased]` → `## [X.Y.Z] — 2026-MM-DD`, add new empty `[Unreleased]`.
+   3. Commit `release: X.Y.Z` on the branch.
+   4. Push, enable auto-merge.
+
+If other feature PRs are queued behind this one, skip the release cut and let the last PR in the queue carry it.
+
+---
+
+## Self-review checklist
+
+After writing this plan, walking back through:
+
+- **Spec coverage**: All five user-named problem areas covered — fonts (Task 1 tokens), nav (Task 5), filters (Task 4 + Task 8 migrations), page consistency (Tasks 6, 8–12 migrations), tables (Task 7 + migration sweep). ✅
+- **No placeholders**: Every CSS block above is concrete code. Per-file migration steps point to specific markup transforms. ✅
+- **Type consistency**: Class names referenced in primitive tasks (`.btn-primary`, `.search-input`, `.page-header__title`, etc.) match what migration tasks expect to swap in. ✅
+- **Tests run before each push (CLAUDE.md)**: Tasks 1, 8, 9, 11, 13, 16 each run pytest. Final push in Task 16 runs the full CI-matching command. ✅
+- **One PR (user's explicit ask)**: All 16 tasks land on `zs/design-pass`; the PR opens at Task 16 step 5. No intermediate merges. ✅
+- **Vendor-agnostic check**: Task 16 step 2 greps the diff before push. ✅
+- **CHANGELOG (CLAUDE.md)**: Task 16 step 1. ✅
+- **Release-cut (CLAUDE.md)**: Task 16 step 6 — conditional on no other PRs being queued, exactly as the rule prescribes. ✅
diff --git a/docs/superpowers/plans/2026-05-13-standalone-pages-framework.md b/docs/superpowers/plans/2026-05-13-standalone-pages-framework.md
new file mode 100644
index 0000000..ec2f828
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-13-standalone-pages-framework.md
@@ -0,0 +1,549 @@
+# Standalone Pages → base.html Framework Migration Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. One PR continuation (`zs/design-pass`).
+
+**Goal:** Migrate the 5 templates that currently ship their own `<html>`, `<head>`, `<body>` scaffold to extend `base.html`. After this lands, every page that includes `_app_header.html` shares ONE rendering pipeline — same font load, same theme include, same script load, same nav. The class of bug that surfaced today (dropdown JS dead on `/catalog`, `/admin/tables`, `/corporate-memory` because `<script src="app.js">` lived only in `base.html`) goes away permanently.
+
+**Architecture:**
+- Five pages have private `<head>` + `<body>` scaffolding (10 486 lines combined, of which ~4 169 are inline `<style>` blocks and ~4 201 are inline `<script>` blocks).
+- `base.html` already exposes the right block surface: `title`, `head_extra`, `layout`, `content`, `scripts`.
+- Migration is mechanical per page: convert `<html>...</html>` → `{% extends "base.html" %}{% block X %}...{% endblock %}`. No behavior change; same per-page CSS/JS, just hoisted into the right block.
+- One small `base.html` change: add `{% block body_attrs %}{% endblock %}` so `admin_tables.html` can keep its `data-source-type` attr on `<body>`.
+
+**Tech Stack:** FastAPI + Jinja2 templates, vanilla CSS, vanilla JS. Tests via pytest + agent-browser for visual smoke.
+
+**Why now / why one PR:** The current `zs/design-pass` PR already touched all the affected pages (hero migration, dead-CSS sweep). Continuing the migration in the same PR keeps related changes together. Each per-page migration ships as its own commit so individual reverts stay surgical.
+
+## Post-review revisions
+
+External Plan-agent review flagged 8 must-fix items before execution. Applied:
+
+1. **Script-extraction bug fixed**: original recipe used `script_m[-1]` which would pick the LAST inline `<script>` and drop earlier ones. Catalog has TWO (868-line IIFE + 26-line module). Revised script collects **all** inline `<script>` blocks in order, preserving each block's tag attributes (so `type="module"` survives).
+2. **External assets hoist**: per-page `<link rel="stylesheet">` and `<script src>` inside `<head>` (e.g. catalog's chart.js, Prism, metric_modal.css) must land at the TOP of `{% block head_extra %}` — the original recipe captured only inline `<style>` and silently dropped externals.
+3. **Duplicate stylesheet detection**: catalog.html ships a second `<link rel="stylesheet" href="style-custom.css">` after its `<style>` block. base.html already loads it once. The migration drops duplicates.
+4. **Layout block default**: changed from `{% block content %}` to `{% block layout %}`. Each standalone has its own top-level wrapper (`<main class="main">`, `<div class="container-memory">`, etc.) — putting that inside base.html's `.container` would double-wrap. Layout block opts out of the `.container` wrap entirely; we must re-include `_app_header.html` (and `_version_badge.html` if base.html includes one) inside the override.
+5. **Font preconnect hoist DEFERRED**: Task 0 Step 3 (move Inter preconnect into base.html) is dropped from this PR. The 4 pages that need it keep their inline preconnect inside `head_extra`. Hoisting affects ALL base.html pages (admin section currently lives on system Inter fallback) — separate decision worth its own measurement.
+6. **Contract test added**: Task 7 now adds an assertion to `tests/test_design_system_contract.py` that each migrated page extends `base.html` and the rendered HTML has exactly one `<html>` / `<head>` / `<body>`. Prevents future regression back to standalones.
+7. **Chart.js smoke verification**: Task 4 (catalog) now requires an explicit "chart rendered" browser screenshot, not just "page loads".
+8. **Reviewer-fatigue caveat acknowledged**: user explicitly chose "all in one PR". Per-page commits land in `zs/design-pass` for surgical revert. Reviewer can bisect per commit.
+
+---
+
+**Out of scope** (defer to follow-up PRs):
+- `dashboard.html` — already extends `base.html` per `grep -l "extends.*base"`; no migration needed. (Verify Step 0).
+- `home_onboarded.html` / `home_not_onboarded.html` — already extend `base.html`; no migration needed.
+- `marketplace.html`, `marketplace_*_detail.html` — not part of today's bug surface; can adopt the framework later.
+
+---
+
+## File structure (touch list)
+
+**Modified:**
+- `app/web/templates/base.html` — add `{% block body_attrs %}{% endblock %}` after `<body`.
+- `app/web/templates/install.html` — convert to extends.
+- `app/web/templates/corporate_memory.html` — convert to extends.
+- `app/web/templates/corporate_memory_admin.html` — convert to extends.
+- `app/web/templates/catalog.html` — convert to extends.
+- `app/web/templates/admin_tables.html` — convert to extends; preserve `data-source-type` body attr via the new block.
+
+**Possibly modified (per migration verification):**
+- `_app_header.html` — script tag already lives there from the previous fix; no change expected unless we move it back to `<head>` for `defer` performance.
+- `base.html` — add `{% block body_attrs %}` (one line).
+
+**Tests:**
+- `tests/test_web_ui.py` — likely has assertions on rendered HTML for these routes. Verify, update as needed.
+- `tests/test_design_system_contract.py` — should stay green (it doesn't care about page chrome).
+
+**No template deletes.** Every standalone page becomes shorter; CSS/JS volume stays the same per page (just relocates into blocks).
+
+---
+
+## Migration recipe (applied per page)
+
+For every standalone template, the conversion follows a fixed pattern. Carry this recipe forward through Tasks 2–6.
+
+### Source structure (before)
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Foo - {{ config.INSTANCE_NAME }}</title>
+    {% if not config.THEME_FONT_URL %}
+    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    {% endif %}
+    <style>
+        /* … page-specific CSS … */
+    </style>
+    {% include '_theme.html' %}
+</head>
+<body>
+    {% include '_app_header.html' %}
+    {# page-specific content … #}
+    <script>
+        /* … page-specific JS … */
+    </script>
+</body>
+</html>
+```
+
+### Target structure (after)
+
+```jinja
+{% extends "base.html" %}
+
+{% block title %}Foo - {{ config.INSTANCE_NAME }}{% endblock %}
+
+{% block head_extra %}
+<style>
+    /* … same page-specific CSS, verbatim … */
+</style>
+{% endblock %}
+
+{% block layout %}
+{# Use `layout` (not `content`) when the page renders its OWN top-level
+   wrapper (e.g. dashboard.html does <main class="main">). Use `content`
+   when the page is happy inside base.html's <div class="container">. #}
+<main class="page-foo">
+    {# page-specific markup, verbatim (minus the _app_header include —
+       base.html includes it already). The <body data-x=…> attribute, if
+       any, moves to a {% block body_attrs %}data-x="…"{% endblock %} #}
+</main>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    /* … same page-specific JS, verbatim … */
+</script>
+{% endblock %}
+```
+
+### Deletions per page
+
+- `<!DOCTYPE html>` + `<html>` + `</html>` (base.html provides)
+- `<head>` + `</head>` (base.html provides)
+- `<meta charset>`, `<meta name="viewport">` (base.html provides)
+- Font preconnect block — `base.html` doesn't ship it today, so this is a small **behavior change**: pages will lose the explicit Inter preconnect. Mitigation: add the preconnect once to base.html's `{% block head_extra %}` parent (or to `base.html` itself above the stylesheet link). See Step 1.
+- `<link rel="stylesheet" href="…style-custom.css">` if any (base.html provides)
+- `{% include '_theme.html' %}` (base.html provides)
+- `<body>` opening tag (base.html provides; attrs go to `{% block body_attrs %}`)
+- `{% include '_app_header.html' %}` at start of body (base.html includes it)
+- `</body>` + closing tags
+
+### Preserved per page
+
+- `<title>` text → `{% block title %}`
+- All inline `<style>` content → `{% block head_extra %}<style>...</style>{% endblock %}`
+- All page markup → `{% block content %}` or `{% block layout %}`
+- All inline `<script>` content → `{% block scripts %}<script>...</script>{% endblock %}`
+- Page-specific JS variable usage (e.g. `data-source-type` on body) → `{% block body_attrs %}`
+
+---
+
+## Task 0: Setup + verify base.html blocks + add body_attrs slot
+
+**Files:**
+- Modify: `app/web/templates/base.html`
+
+- [ ] **Step 1: Verify dashboard.html / home_*.html already extend base.html.**
+
+```bash
+grep -l "extends.*base\.html" app/web/templates/*.html
+```
+
+Expected output includes `dashboard.html`, `home_onboarded.html`, `home_not_onboarded.html`. Confirms our scope is exactly the 5 standalones, not more.
+
+- [ ] **Step 2: Add `{% block body_attrs %}` to base.html.**
+
+The `admin_tables.html` template currently renders `<body data-source-type="{{ data_source_type }}">`; its inline JS reads that attribute. We must preserve the attribute.
+
+Read `base.html`'s `<body>` line, then change it from:
+
+```html
+<body>
+```
+
+to:
+
+```html
+<body {% block body_attrs %}{% endblock %}>
+```
+
+The default empty block keeps non-admin_tables pages unchanged.
+
+- [ ] **Step 3: Add Inter font preconnect to base.html.**
+
+Currently `base.html` ships only the stylesheet + `_theme.html` include. The 4 standalone pages that ship their own font preconnect (catalog, corporate_memory*, install) would lose the optimization after migration. Add to `base.html` `<head>` right BEFORE the stylesheet link:
+
+```html
+{% if not config.THEME_FONT_URL %}
+<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+{% endif %}
+```
+
+This change benefits ALL base.html consumers — admin pages currently rely on the system Inter being present. With this addition, base.html-extended pages always have the canonical font loaded.
+
+- [ ] **Step 4: Confirm test pass + render check before any per-page migration.**
+
+```bash
+.venv/bin/python -m pytest tests/test_web_ui.py tests/test_web_home_page.py tests/test_design_system_contract.py -q
+```
+
+Expected: green. Captures the baseline before migrations begin.
+
+- [ ] **Step 5: Commit.**
+
+```bash
+git add app/web/templates/base.html
+git commit -m "feat(base): body_attrs block + Inter font preconnect
+
+Adds a body_attrs Jinja block (default empty) so pages that extend
+base.html can carry their own <body> attributes — admin_tables.html
+needs data-source-type for its JS reading.
+
+Hoists the Inter font preconnect + stylesheet link into base.html's
+<head> so every page that extends base gets the same font load. The
+5 standalone pages about to be migrated each had this block inline;
+centralising it here means future changes (e.g. self-hosting the
+font) land in one place."
+```
+
+---
+
+## Task 1: Migrate install.html (smallest pilot)
+
+**Why install first**: smallest of the 5 (1097 lines), simplest layout, no admin gating, well-contained. Validates the recipe before tackling the big templates.
+
+**Files:**
+- Modify: `app/web/templates/install.html`
+
+- [ ] **Step 1: Read full install.html.**
+
+```bash
+wc -l app/web/templates/install.html
+sed -n '1,30p' app/web/templates/install.html   # head (lines 1-30)
+sed -n '640,660p' app/web/templates/install.html # </head> + <body> boundary
+sed -n '935,945p' app/web/templates/install.html # <script> start area
+tail -5 app/web/templates/install.html
+```
+
+Note the exact boundaries. Note any `<body … attribute>` (install.html: none).
+
+- [ ] **Step 2: Convert via Python script (post-review revisions applied).**
+
+```python
+import pathlib, re
+
+def migrate(filename: str) -> dict:
+    """Convert a standalone Jinja template to extend base.html.
+
+    Captures, in order:
+      - <title>
+      - Per-page <link> / <script src> / <style> inside <head> → head_extra (top)
+      - Inline <style> blocks (with attributes preserved) → head_extra (after links)
+      - <body> attributes → body_attrs
+      - Body markup with the leading _app_header.html / _theme.html includes
+        stripped and all inline scripts pulled out → layout block contents
+      - All <script> blocks inside body (inline OR src, attributes preserved
+        verbatim) → scripts block, in order
+
+    Drops:
+      - <!DOCTYPE>, <html>, </html>
+      - <head>, </head>
+      - <meta charset>, <meta viewport>
+      - Duplicate <link rel="stylesheet" href=".../style-custom.css">
+        (base.html already ships one)
+      - </body>
+    """
+    path = pathlib.Path(f"app/web/templates/{filename}")
+    text = path.read_text(encoding="utf-8")
+
+    # 1) <title>
+    title_m = re.search(r"<title>(.*?)</title>", text, re.DOTALL)
+    title = title_m.group(1).strip() if title_m else filename
+
+    # 2) Split <head> from <body>
+    head_m = re.search(r"<head[^>]*>(.+?)</head>", text, re.DOTALL)
+    body_m = re.search(r"<body([^>]*)>(.+?)</body>", text, re.DOTALL)
+    if not head_m or not body_m:
+        raise RuntimeError(f"missing <head> or <body> in {filename}")
+    head = head_m.group(1)
+    body_attrs = body_m.group(1).strip()
+    body = body_m.group(2)
+
+    # 3) Inside <head>: collect head-level <link>, <script src>, <style>.
+    head_assets = []  # list of (kind, raw_tag) preserving source order
+    cursor = 0
+    HEAD_PATTERNS = [
+        ("link",   re.compile(r"<link\b[^>]*?>", re.IGNORECASE)),
+        ("script", re.compile(r"<script\b[^>]*?>.*?</script>", re.IGNORECASE | re.DOTALL)),
+        ("style",  re.compile(r"<style\b[^>]*?>.*?</style>", re.IGNORECASE | re.DOTALL)),
+    ]
+    # Concatenate matches found in head, in their original source position.
+    matches = []
+    for kind, pat in HEAD_PATTERNS:
+        for m in pat.finditer(head):
+            matches.append((m.start(), kind, m.group(0)))
+    matches.sort()
+    for _, kind, raw in matches:
+        # Skip duplicate style-custom.css link (base.html already provides).
+        if kind == "link" and "style-custom.css" in raw:
+            continue
+        # Skip <link rel="preconnect/stylesheet" pointing at font.googleapis> —
+        # we keep the inline preconnect block per page to preserve current
+        # behaviour; do NOT dedupe against base.html in this pass.
+        head_assets.append(raw)
+
+    head_extra = "\n".join(head_assets)
+
+    # 4) Inside <body>: pull out every <script> (inline OR src), in order,
+    # for relocation to {% block scripts %}. Strip the leading
+    # _app_header.html include + any leading {% include "_theme.html" %}.
+    script_blocks = []
+    SCRIPT_BODY_RE = re.compile(r"<script\b[^>]*?>.*?</script>", re.IGNORECASE | re.DOTALL)
+    for m in SCRIPT_BODY_RE.finditer(body):
+        script_blocks.append(m.group(0))
+    body_no_scripts = SCRIPT_BODY_RE.sub("", body)
+
+    # Strip leading _app_header.html include (with optional surrounding
+    # whitespace and HTML comments).
+    body_no_header = re.sub(
+        r"^\s*(?:<!--[^>]*-->\s*)*\{%\s*include\s+['\"]_app_header\.html['\"]\s*%\}\s*",
+        "", body_no_scripts, count=1
+    )
+
+    # 5) Compose output.
+    layout_indent = "    "
+    out = ['{% extends "base.html" %}', "", f"{{% block title %}}{title}{{% endblock %}}"]
+    if body_attrs:
+        out += ["", f"{{% block body_attrs %}}{body_attrs}{{% endblock %}}"]
+    if head_extra.strip():
+        out += ["", "{% block head_extra %}", head_extra, "{% endblock %}"]
+    out += [
+        "",
+        "{% block layout %}",
+        "{% include '_app_header.html' %}",
+        body_no_header.rstrip(),
+        "{% endblock %}",
+    ]
+    if script_blocks:
+        out += ["", "{% block scripts %}"]
+        out += script_blocks
+        out += ["{% endblock %}"]
+    out.append("")
+
+    new_text = "\n".join(out)
+    path.write_text(new_text, encoding="utf-8")
+    return {
+        "name": filename,
+        "old_lines": len(text.splitlines()),
+        "new_lines": len(new_text.splitlines()),
+        "head_assets": len(head_assets),
+        "script_blocks": len(script_blocks),
+        "body_attrs": bool(body_attrs),
+    }
+
+result = migrate("install.html")
+print(result)
+```
+
+- [ ] **Step 3: Decide content vs layout block.**
+
+`install.html`'s top-level wrapper after the header — read it. If it's just standard content, `{% block content %}` is right (base.html wraps it in `<div class="container">`). If it has its own `<main>` or full-bleed elements, switch to `{% block layout %}` (which overrides base.html's container entirely) and manually re-add the `_app_header.html` include and `<main>` wrapper. **Default to `content`; switch only if the page looks broken in browser.**
+
+- [ ] **Step 4: Smoke test in dev server.**
+
+```bash
+LOCAL_DEV_MODE=1 DATA_DIR=/tmp/agnes-design-pass-data .venv/bin/uvicorn app.main:app --port 8765 > /tmp/uv-install.log 2>&1 &
+sleep 4
+agent-browser open http://localhost:8765/install --wait-until networkidle
+agent-browser screenshot /tmp/install-after.png --full
+# Click Admin dropdown
+agent-browser snapshot -i | grep -E "Admin|Hide"
+# Verify install page's own behavior (whatever it does — copy buttons, accordions, etc.)
+pkill -f "uvicorn.*8765"
+```
+
+Compare `install-after.png` against the baseline from `/tmp/design-pass-baseline/`.
+
+- [ ] **Step 5: Run tests + commit.**
+
+```bash
+.venv/bin/python -m pytest tests/ -k "install or web_ui" -q
+git add app/web/templates/install.html
+git commit -m "refactor(install): extend base.html instead of standalone
+
+Pilots the 5-page standalone→framework migration. install.html now
+inherits <head>, <body>, font preconnect, theme include, app-header,
+and the app.js script tag from base.html. Page-specific styles and
+scripts kept verbatim inside head_extra + scripts blocks. -1097 line
+template becomes ~+200 less (head/body scaffolding deleted)."
+```
+
+---
+
+## Task 2: Migrate corporate_memory.html
+
+**Files:** `app/web/templates/corporate_memory.html`
+
+Same recipe as Task 1. Note: page is admin-gated (`{% if session.user %}` checks in markup). The wrapping logic isn't part of the migration — base.html's `_app_header.html` already handles the auth check.
+
+- [ ] **Step 1–5: Apply Task-1 recipe verbatim.** Commit as `refactor(memory): extend base.html`.
+- [ ] **Step 6: Verify memory-page-specific JS** (knowledge filter, voting, sync status) still works on `/corporate-memory`. Browser test: click a knowledge item, click upvote, click filter pill.
+
+---
+
+## Task 3: Migrate corporate_memory_admin.html
+
+**Files:** `app/web/templates/corporate_memory_admin.html`
+
+Same recipe. Admin-only curation page; modals + accordion behavior to verify.
+
+- [ ] Apply recipe + commit `refactor(memory-admin): extend base.html`.
+- [ ] Browser test: open a knowledge item modal, edit, save (don't commit DB; just verify modal opens and closes).
+
+---
+
+## Task 4: Migrate catalog.html
+
+**Files:** `app/web/templates/catalog.html`
+
+The biggest of the four "memory + catalog + install" group (2524 lines). Has source-cards, accordion, profiler overlay, two inline `<script>` blocks (868 lines + 26 lines).
+
+- [ ] **Step 1: Concatenate the TWO inline `<script>` blocks** before relocating. Otherwise only the last one would land in `{% block scripts %}` and the smaller post-script would orphan. Either:
+  - Order them as `script_outer + "\n\n" + script_inner` in the migration script, OR
+  - Verify both are independent and emit them as two consecutive `<script>` blocks inside `{% block scripts %}`.
+- [ ] Apply recipe + commit `refactor(catalog): extend base.html`.
+- [ ] Browser test: load `/catalog`, click an accordion to expand, click a table row to open profiler overlay, verify "Live" / "Local" badges render.
+
+---
+
+## Task 5: Migrate admin_tables.html (biggest, highest risk)
+
+**Files:** `app/web/templates/admin_tables.html`
+
+3563 lines. Has the `data-source-type` body attribute (uses `{% block body_attrs %}` from Task 0). 850-line `<style>` block. 1795-line `<script>` block — biggest JS on the site (registry mutations, modal forms, AJAX, table polling).
+
+- [ ] **Step 1: Apply the recipe with body_attrs override.**
+
+Add in the new template:
+
+```jinja
+{% block body_attrs %}data-source-type="{{ data_source_type }}"{% endblock %}
+```
+
+- [ ] **Step 2: Stress-test the JS.** This page has the most behavior. Manual checks:
+  - Source-type filter switcher
+  - "+ Register table" modal opens
+  - Click into a registered table row → edit modal opens
+  - Cache warm-up trigger button
+  - Table search filter
+- [ ] Apply recipe + commit `refactor(admin-tables): extend base.html`.
+
+---
+
+## Task 6: Cross-page browser smoke + full pytest
+
+**Files:** none (verification only).
+
+- [ ] **Step 1: Boot dev server + iterate ALL 5 migrated routes via agent-browser.**
+
+```bash
+LOCAL_DEV_MODE=1 DATA_DIR=/tmp/agnes-design-pass-data .venv/bin/uvicorn app.main:app --port 8765 > /tmp/uv-smoke.log 2>&1 &
+sleep 4
+for r in /install /corporate-memory /corporate-memory/admin /catalog /admin/tables; do
+    safe="${r//\//-}"
+    agent-browser open "http://localhost:8765${r}" --wait-until networkidle
+    agent-browser screenshot "/tmp/framework-after${safe}.png" --full
+done
+
+# Click Admin dropdown on each — confirm it opens
+for r in /install /corporate-memory /catalog /admin/tables; do
+    agent-browser open "http://localhost:8765${r}"
+    snap=$(agent-browser snapshot -i)
+    admin_ref=$(echo "$snap" | grep -oE 'button "Admin"[^@]*@e[0-9]+' | grep -oE 'e[0-9]+' | head -1)
+    hide_ref=$(echo "$snap" | grep -oE 'link "Hide »"[^@]*@e[0-9]+' | grep -oE 'e[0-9]+' | head -1)
+    [ -n "$hide_ref" ] && agent-browser click "@$hide_ref"
+    sleep 1
+    agent-browser click "@$admin_ref"
+    sleep 1
+    echo "$r — Admin: $(agent-browser snapshot -i | grep -c menuitem) menu items"
+done
+
+pkill -f "uvicorn.*8765"
+```
+
+Expected: each page → 15+ menuitem entries when Admin dropdown opens.
+
+- [ ] **Step 2: Full pytest.**
+
+```bash
+.venv/bin/python -m pytest tests/ --tb=line -n auto -q
+```
+
+Expected: same baseline pass count (4500+) + 12 pre-existing Keboola/clean-install fails.
+
+- [ ] **Step 3: Visual diff vs baseline.** Open at least one screenshot per migrated page and compare against `/tmp/design-pass-baseline/`. Any unexpected layout shift → flag for fix before commit.
+
+---
+
+## Task 7: CHANGELOG entry + final push
+
+- [ ] **Step 1: Add to CHANGELOG.md `[Unreleased]`.**
+
+Under `### Changed`:
+
+```markdown
+- All web templates now extend `base.html`. Previously 5 templates
+  (`catalog.html`, `corporate_memory.html`, `corporate_memory_admin.html`,
+  `install.html`, `admin_tables.html`) shipped their own `<html>` /
+  `<head>` / `<body>` scaffold — a source of drift when shared
+  infrastructure changed (today's symptom: the nav-dropdown
+  `app.js` script lived only in `base.html`, so those 5 pages had
+  dead dropdowns). `base.html` now exposes a `body_attrs` Jinja
+  block + emits the Inter font preconnect, so all pages share one
+  rendering pipeline.
+```
+
+- [ ] **Step 2: Final pytest + push.**
+
+```bash
+.venv/bin/python -m pytest tests/ --tb=line -n auto -q | tail -8
+git push origin zs/design-pass
+```
+
+PR #284 auto-updates with the new commits.
+
+---
+
+## Risk register
+
+1. **Page-specific JS reads from elements that base.html wraps differently.** Mitigation: keep `{% block content %}` markup byte-identical to the old body content (sans `_app_header.html` include). IDs, classes, data attrs all preserved. JS sees the same DOM.
+
+2. **`<body data-source-type=…>` on admin_tables.html.** Mitigation: `{% block body_attrs %}` slot added to base.html in Task 0.
+
+3. **Per-page CSS specificity collisions with style-custom.css.** Inline `<style>` blocks have always loaded AFTER style-custom.css. After migration, the inline `<style>` is in `{% block head_extra %}` which sits AFTER style-custom.css link in base.html. Order preserved. No specificity flip.
+
+4. **Page-specific font preconnect already loaded twice.** Currently 4 of the 5 pages have the Inter preconnect inline; after migration they inherit it from base.html. Mitigation: Task 0 Step 3 hoists the preconnect to base.html before any per-page migration. After Task 0, the inline ones become duplicates → harmless but should be deleted as part of each per-page conversion (the migration script captures only `<style>` content + script content, so preconnect lines naturally drop).
+
+5. **Login pages (`base_login.html` consumers).** Not in scope. Login pages still use `base_login.html`. The framework migration is for authed-content pages only.
+
+6. **Reviewer fatigue.** ~5000 LOC of diff across 6 commits. Mitigation: per-page commit boundary → reviewer can read one commit, ack, move on.
+
+---
+
+## Self-review
+
+- **Spec coverage**: 5 standalone pages enumerated; all 5 have a task. ✅
+- **Block-mapping completeness**: title, head_extra, content/layout, scripts, body_attrs all addressed. ✅
+- **No placeholders**: each migration step has concrete shell + Python code. ✅
+- **Tests run before each commit**: Task 0 Step 4, Task 1 Step 5, Task 6 Step 2. ✅
+- **CHANGELOG entry**: Task 7 Step 1. ✅
+- **One-PR continuation**: lands on existing `zs/design-pass`. ✅
+- **Rollback granularity**: per-page commits; revert individual migrations cleanly. ✅
diff --git a/pyproject.toml b/pyproject.toml
index 83e6555..06900cd 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "agnes-the-ai-analyst"
-version = "0.54.9"
+version = "0.54.10"
 description = "Agnes — AI Data Analyst platform for AI analytical systems"
 requires-python = ">=3.11,<3.14"
 license = "MIT"
diff --git a/tests/test_design_system_contract.py b/tests/test_design_system_contract.py
new file mode 100644
index 0000000..72a5a58
--- /dev/null
+++ b/tests/test_design_system_contract.py
@@ -0,0 +1,186 @@
+"""Design-system invariants. Fails if a future PR undoes the design-pass."""
+
+from pathlib import Path
+import re
+
+
+TEMPLATES = Path("app/web/templates")
+STATIC = Path("app/web/static")
+
+
+def _all_html() -> list[Path]:
+    return sorted(p for p in TEMPLATES.rglob("*.html"))
+
+
+# Match every class="..." or class='...' attribute, possibly multi-line.
+# Jinja templates frequently break class attributes across lines for the
+# {% if … %}is-active{% endif %} pattern, so re.DOTALL is required.
+_CLASS_ATTR_RE = re.compile(r"""class\s*=\s*(["'])(.*?)\1""", re.DOTALL)
+
+
+def _classes_in_template(text: str) -> set[str]:
+    """Extract every literal class token used in the template. Tokenizes the
+    class attribute on whitespace so multi-class attrs ("btn btn-primary")
+    and multi-line attrs split cleanly. Jinja conditionals (tokens that
+    contain `{{`, `{%`, `}`) are skipped — only authors' literal class
+    names are returned, since constructed names can't be statically
+    audited without a render."""
+    tokens: set[str] = set()
+    for match in _CLASS_ATTR_RE.finditer(text):
+        attr_value = match.group(2)
+        for tok in attr_value.split():
+            if "{" in tok or "}" in tok:
+                continue
+            tokens.add(tok)
+    return tokens
+
+
+# Single class tokens. Multi-token patterns (like "modal-btn primary") are
+# caught by the single-token entry (.modal-btn) — no need to special-case.
+DEPRECATED_CLASSES = {
+    "btn-primary-v2": "btn-primary",
+    "btn-secondary-v2": "btn-secondary",
+    "modal-btn": "btn + .btn-primary / .btn-secondary",
+    "users-table": "data-table",
+    "gp-table": "data-table",
+    "marketplaces-table": "data-table",
+    "audit-table": "data-table",
+    "users-search": "search-input",
+    "marketplaces-search": "search-input",
+    "kb-search": "search-input",
+    "filters-card": "filter-bar",
+}
+
+
+def test_style_css_deleted() -> None:
+    """style.css must stay deleted — all rules live in style-custom.css."""
+    assert not (STATIC / "style.css").exists(), (
+        "style.css must stay deleted — all rules live in style-custom.css"
+    )
+
+
+def test_no_template_references_style_css() -> None:
+    """No template should link the deleted stylesheet."""
+    offenders: list[str] = []
+    for path in _all_html():
+        text = path.read_text(encoding="utf-8")
+        if "static_url('style.css')" in text or 'static_url("style.css")' in text:
+            offenders.append(str(path))
+    assert not offenders, f"templates still link style.css: {offenders}"
+
+
+def test_style_custom_has_single_root_block() -> None:
+    """Exactly one :root { … } block (plus optional :root[data-theme] siblings).
+    Multiple bare :root blocks signal a merge gone wrong — the cascade order
+    becomes load-bearing for tokens, which we don't want."""
+    css = (STATIC / "style-custom.css").read_text(encoding="utf-8")
+    # Match :root { (no attribute selectors after it).
+    bare_root = re.findall(r"^:root\s*\{", css, flags=re.MULTILINE)
+    assert len(bare_root) == 1, (
+        f"expected exactly one bare :root block, found {len(bare_root)}"
+    )
+
+
+def test_canonical_primitives_defined() -> None:
+    """Every primitive the design-pass migration produces must be declared
+    in style-custom.css. Tasks 4–7 introduce them; this test starts failing
+    after Task 3 lands and goes green when the last primitive lands."""
+    css = (STATIC / "style-custom.css").read_text(encoding="utf-8")
+    required = [
+        # buttons
+        ".btn",
+        ".btn-primary",
+        ".btn-secondary",
+        ".btn-ghost",
+        ".btn-danger",
+        ".btn-warning",
+        # form controls
+        ".search-input",
+        ".filter-bar",
+        ".filter-pill",
+        # page header
+        ".page-header",
+        ".page-header__title",
+        ".page-header__subtitle",
+        ".page-header__actions",
+        # data display
+        ".data-table",
+        ".empty-state",
+        # global feedback
+        ".toast",
+    ]
+    missing = [sel for sel in required if sel not in css]
+    assert not missing, f"missing canonical primitive selectors: {missing}"
+
+
+def test_no_deprecated_class_in_templates() -> None:
+    """Templates must use canonical primitives, not legacy aliases.
+
+    Migration tasks (8–15) drive this to green by sweeping each page; Task
+    16 removes the supporting CSS aliases. A regression that re-adds one of
+    these class names fails the build.
+    """
+    offenders: dict[str, list[str]] = {}
+    for path in _all_html():
+        text = path.read_text(encoding="utf-8")
+        used = _classes_in_template(text)
+        for cls in DEPRECATED_CLASSES:
+            if cls in used:
+                offenders.setdefault(cls, []).append(path.name)
+    assert not offenders, (
+        "deprecated classes found in templates:\n"
+        + "\n".join(
+            f"  .{cls} → use {DEPRECATED_CLASSES[cls]} ({sorted(files)})"
+            for cls, files in offenders.items()
+        )
+    )
+
+
+def test_app_js_referenced_by_base_only() -> None:
+    """app.js carries dropdown wiring scoped to the authed nav. base_login.html
+    has no nav, so it must NOT load app.js — that would let login pages call
+    window.appUI / window.appToast (defined later), which is not their
+    contract. The opposite (base.html missing app.js) would break the
+    Admin dropdown."""
+    base = (TEMPLATES / "base.html").read_text(encoding="utf-8")
+    base_login = (TEMPLATES / "base_login.html").read_text(encoding="utf-8")
+    assert "app.js" in base, "base.html must load app.js"
+    assert "app.js" not in base_login, "base_login.html must not load app.js"
+
+
+# Helper-level unit tests for the class-tokenizer itself — keeps the
+# audit logic honest as the design-pass evolves.
+
+def test_classes_helper_multiline_attr() -> None:
+    """class= attributes split across lines (typical Jinja conditional
+    pattern) must still tokenize cleanly."""
+    sample = '''
+    <a class="app-nav-link
+        is-active"
+       href="/">Home</a>
+    '''
+    assert _classes_in_template(sample) == {"app-nav-link", "is-active"}
+
+
+def test_classes_helper_skips_jinja_tokens() -> None:
+    """Jinja-constructed class fragments don't get audited (can't be statically
+    resolved). Verify the {% if %}, {{ … }} pieces are filtered out, real
+    literal tokens around them stay."""
+    sample = '''<button class="btn {% if active %}is-active{% endif %} btn-primary">Go</button>'''
+    tokens = _classes_in_template(sample)
+    assert "btn" in tokens
+    assert "btn-primary" in tokens
+    # Jinja control-flow tokens get skipped — they contain `{` or `}`.
+    for tok in tokens:
+        assert "{" not in tok and "}" not in tok
+
+
+def test_classes_helper_compound_match_is_not_false_positive() -> None:
+    """Prose containing the word 'pill' or 'btn' in a comment should NOT be
+    detected as a deprecated class. Only class= attribute values count."""
+    sample = '''
+    <!-- this is the filter pill row -->
+    <p>The button (btn) below opens the menu.</p>
+    <span class="badge">x</span>
+    '''
+    assert _classes_in_template(sample) == {"badge"}
diff --git a/tests/test_user_management.py b/tests/test_user_management.py
index dca429f..3294be1 100644
--- a/tests/test_user_management.py
+++ b/tests/test_user_management.py
@@ -239,7 +239,10 @@ def test_admin_users_page_renders_for_admin(app_client, fresh_db):
         cookies={"access_token": token},
     )
     assert resp.status_code == 200
-    assert 'class="users-title">Users' in resp.text
+    # /admin/users uses the canonical .page-header--hero block (Users &
+    # Access eyebrow + Users title). Legacy .users-title H2 retired.
+    assert 'class="page-header__title">Users<' in resp.text
+    assert "page-header--hero" in resp.text
 
 
 def test_admin_users_page_denies_non_admin(app_client, fresh_db):