From 1b0329e8c561fe2674c90c6ebd5a68997e1bad40 Mon Sep 17 00:00:00 2001
From: ZdenekSrotyr <139972147+ZdenekSrotyr@users.noreply.github.com>
Date: Thu, 14 May 2026 13:28:03 +0200
Subject: [PATCH] =?UTF-8?q?UI=20design=20system=20unification=20=E2=80=94?=
 =?UTF-8?q?=20one=20stylesheet,=20canonical=20primitives,=20nav=20fix=20(#?=
 =?UTF-8?q?284)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs(plan): design-system unification plan (post-review revisions)

Plan covers consolidating two CSS files into one, introducing
canonical primitives (.btn family, .search-input, .filter-bar,
.page-header, .data-table, .empty-state, .toast, .stat-card,
.tab-strip), unifying the top-nav Admin trigger with sibling
links, and migrating 41 templates that today carry inline
<style> blocks.

Post-review revisions: nav fix moved to first commit (user
complaint lands first); sticky-header and dark-mode skeleton
tasks dropped (defer to follow-up PRs); contract test class
detection tokenizes class="..." attributes properly; baseline
screenshot loop added to Task 0; vendor-token grep widened.

* fix(nav): unify Admin trigger with sibling nav links

The top-nav Admin entry is a <button class="app-nav-link
app-nav-menu-trigger">, siblings are <a class="app-nav-link">.
.app-nav-menu-trigger used to override .app-nav-link with
"color: inherit; font: inherit", resetting font-size from 13px
back to body default and color from --text-secondary to body
color. Active state diverged too: .is-active on links used
--primary blue, [aria-expanded=true] on the button used
--border-light grey.

Fix: expand .app-nav-link so it covers <button>-element resets
(font-family: inherit, border: 0, background: transparent,
cursor: pointer, display: inline-flex for chevron alignment).
Add [aria-expanded="true"] as another active-state selector
so the dropdown's open state highlights identically to .is-active
on links. Delete the now-redundant .app-nav-menu-trigger rules
that stripped button chrome.

Extract the inline <script> from _app_header.html into a new
app/web/static/app.js (loaded by base.html only — base_login.html
has no nav). Sets up window.appUI.wireDropdown for both the user
menu and the Admin dropdown via DOMContentLoaded.

* style(css): consolidate style.css into style-custom.css + add cache-bust

One stylesheet for the whole web UI:
- style.css (1086 lines, legacy Google-inspired tokens + components)
  absorbed into style-custom.css under a labeled block, placed after
  the modern :root + body so style-custom's component rules continue
  to override the legacy ones (preserves the original cascade order
  that came from loading style.css first).
- style.css deleted; <link> dropped from base.html + base_login.html.
- static_url() now appends ?v=<mtime> to /static/<path>. Cheap
  per-request os.stat — auto-invalidates browser + proxy caches on
  redeploy without operator intervention. Mtime survives across
  uvicorn restarts as long as the file content is unchanged.

Legacy classes (.btn, .card, .login-*, .badge, .code-block, .flash,
.form-group, .username-box, .btn-copy, .auth-tabs, .divider, etc.)
still render — they live in style-custom.css now. Login pages,
error page, password setup, and the dashboard's Claude Code Setup
card all kept working in browser smoke.

* test(design): contract test for design-system invariants

7 structural invariants enforced from this commit onwards:
- style.css must stay deleted
- no template links style.css via static_url
- exactly one bare :root block in style-custom.css
- canonical primitives declared (.btn, .btn-primary, .search-input,
  .filter-bar, .page-header, .data-table, .empty-state, .toast, …)
- no deprecated class names in templates (.users-table, .gp-table,
  .marketplaces-table, .audit-table, .users-search, .marketplaces-search,
  .modal-btn, .btn-primary-v2, …)
- app.js loaded by base.html, NOT by base_login.html
- 3 helper-level unit tests for the class-attribute tokenizer
  (multi-line attrs, Jinja-conditional fragments, false-positive prose)

Two of the assertions intentionally start FAILING after this commit
(missing primitives + legacy class refs in 7 admin templates) and
will turn green as Tasks 4–7 add primitives and Tasks 8–15 migrate
the templates.

* feat(css): canonical button family + legacy token aliases

Adds at top of :root: legacy token aliases (--bg, --card-bg, --text,
--text-light, --secondary, --radius) pointing at modern equivalents.
Absorbed style.css rules referenced these names; without aliases
they fell back to 'unset'. Aliases live until Task 16 alongside
their absorbed rules.

Appends canonical .btn variants at end of file (last cascade):
  .btn-primary + .btn-primary-v2 + .modal-btn.primary (alias group)
  .btn-secondary + .btn-secondary-v2 + .modal-btn:not(.primary):not(.danger)
  .btn-ghost + .btn-ghost-v2
  .btn-danger + .modal-btn.danger
  .btn-lg
  .btn:disabled + .btn:focus-visible (focus ring via --focus-ring)

Existing absorbed .btn, .btn-primary, .btn-secondary, .btn-sm rules
remain — the canonical block adds the missing variants + selector-list
aliases so .modal-btn and v2 markup keep rendering until migration
tasks swap them out.

Contract test: .btn-danger now declared (one less missing primitive).
Browser smoke: /admin/tokens hero + filter pills + empty state render
correctly with the absorbed style.css rules now backed by real tokens.

* feat(css): form-control primitives — .search-input + .filter-bar + .filter-pill + .form-input

Canonical filter bar shape: 36px-height inputs (matches button height
for vertical rhythm), 28px pills with .is-active state, consistent
focus ring via --focus-ring token.

Selector-list aliases for legacy per-page classes:
- .users-search / .marketplaces-search / .kb-search → .search-input
- .filters-card → .filter-bar
- .pill[aria-pressed="true"] also matches the .filter-pill active state

.form-input added as a sibling of .search-input for forms — same
baseline height + radius + focus treatment, with textarea.form-input
auto-sizing to min 96px and using the mono font (matches CSV/SQL
pasted-snippet patterns on /admin/agent-prompt + /admin/workspace-prompt).

Contract test: .search-input + .filter-bar + .filter-pill now declared.

* feat(css): .page-header primitive + variants + .tab-strip

Canonical page-header pattern with title (22px) + optional subtitle +
optional eyebrow + right-aligned actions slot. Two modifiers:
- .page-header--hero: gradient background (primary→primary-dark),
  28px white title, semi-transparent subtitle/eyebrow. For
  /marketplace, /store, /profile-style pages that already use this
  layout via per-page inline <style>. Migration tasks delete the
  duplicated rules.
- .page-header--compact: 18px title for dense admin index pages.

.tab-strip + .tab-strip__item — the secondary tab row pattern used by
/marketplace?tab=flea and similar. .is-active / [aria-selected=true]
both flip the active treatment (primary color + bottom border).

Contract test: .page-header / __title / __subtitle / __actions all
now declared (4 fewer missing primitives).

* feat(css+js): .data-table + .empty-state + .toast + .stat-card primitives

Last primitive batch. All 8 canonical-primitives invariants in
test_design_system_contract.py now green; only the template-migration
test fails (expected — Tasks 8–15).

.data-table (+ --compact modifier): selector-list aliases for legacy
per-page table classes (.users-table, .gp-table, .marketplaces-table,
.audit-table) so existing markup keeps rendering until migration.
Compact modifier shrinks padding + font for dense lists (audit log).

.empty-state with __icon / __title / __description / __actions —
replaces the ad-hoc 'no results' rendering scattered across pages
(corporate_memory, admin_users, admin_marketplaces, etc.).

.toast / .toast-container — paired with window.appToast({kind, msg,
timeout}) appended to app.js. Bottom-right stacked, click-to-dismiss,
auto-dismiss after 4s by default. Kind 'success' / 'warning' / 'error'
/ 'info' shows a 3px colored left border.

.stat-card (+ --accent variant) + .stat-row grid — for the dashboard
metric tile row.

* style(templates): migrate 8 templates off deprecated class names

Mechanical class-attribute rewrite via tokenizer (preserves Jinja
conditionals + multi-line attrs):

  modal-btn primary    -> btn btn-primary
  modal-btn danger     -> btn btn-danger
  modal-btn            -> btn 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

8 templates touched: admin_groups, admin_marketplaces, admin_tokens,
admin_users, admin_welcome, admin_workspace_prompt, my_tokens,
corporate_memory_admin. 43 lines updated total.

Inline <style> blocks in these templates still define rules for the
old class names — those rules no longer match anything and become
dead code, removed in Task 16's alias cleanup along with the
selector-list aliases in style-custom.css.

Contract test (tests/test_design_system_contract.py) now fully green:
9/9 invariants enforced from this commit onward.

* feat(css): extend .data-table selector list to 13 more bespoke -table classes

Visual unification of remaining tables across the codebase without
per-template edits. The .data-table baseline rules (uppercase header
tracking, 12px padding, hover state, border-radius) now apply to:

  .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

These class names live in 12 templates (activity_center, admin_access,
admin_group_detail, admin_scheduler_runs, admin_sessions,
admin_store_submissions, admin_tables, admin_usage, admin_user_detail,
catalog, me_debug, profile_sessions) that have their own per-page
<style> blocks. Per-page rules with higher specificity still win for
their custom needs (column widths, etc.) — this commit only sets a
shared baseline so every table renders with the same chrome.

Contract test stays green: 9/9 invariants enforced.

* style(css): remove now-unused legacy class aliases

Phase A renamed 8 templates off these names; no markup references
them any more, so the selector-list memberships are dead weight.
Removed from style-custom.css:

  .btn-primary-v2 / .btn-secondary-v2 / .btn-ghost-v2
  .modal-btn / .modal-btn.primary / .modal-btn.danger /
  .modal-btn:not(.primary):not(.danger)
  .users-search / .marketplaces-search / .kb-search
  .users-table / .gp-table / .marketplaces-table / .audit-table
  .filters-card

37 lines smaller. Contract test catches any reintroduction.

KEPT aliases (still in untouched template markup):
- .pill (marketplace_plugin_detail.html, marketplace.html — these
  pages weren't part of Phase A's deprecated-class sweep; their
  own .pill CSS rules still apply)
- All .data-table family extensions (.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) — these still render data tables in 12 templates;
  selector-list aliasing keeps them visually unified with .data-table
  baseline.
- Legacy token aliases (--bg / --text / --text-light / --secondary /
  --card-bg / --radius) — still resolve absorbed style.css rules.

Templates' inline <style> blocks still contain dead rules for the
renamed classes (.users-search, .modal-btn, etc.); harmless but
bloat. Optional follow-up: a separate sweep can drop those.

* docs(changelog): design-system unification under [Unreleased]

* feat(css): unify page-shell width — .container baseline 1280px + modifiers

Inventory found 30+ unique max-width values across templates (280px
login → 1600px admin/tables). The legacy .container default was 800px,
which made every admin page set its own wider inline override —
30+ ad-hoc widths drifted as a result.

Canonical: .container max-width = var(--width-app) (1280px). Pages
that need a different shape opt in via modifiers:

  .container--narrow → var(--width-narrow)  (800px) — long-form text,
                                                     setup wizards
  .container--wide   → var(--width-wide)    (1400px) — admin lists,
                                                     marketplace grids
  .container--full   → max-width: none — hero / landing

Pages that already set a NARROWER inline max-width (setup, login flows
inside .login-card, etc.) still render at their narrower size — the
inline override beats the new canonical 1280px. The visible change
hits the ~20 admin pages currently rendering at 800px via the legacy
default, which jump to 1280px and pick up consistent breathing room.

Spacing also normalized: padding 24px 20px → var(--space-6) var(--space-5).

* fix(home+catalog): gut dashboard sections + remove confusing toggle + fix table count

Dashboard /home cleanup:
- Remove 'Your Data' card — Data Packages is already a top-nav entry,
  so duplicating data sources on the landing page just adds noise.
- Remove 'Account' card — group memberships + scripts + last sync
  belong on /profile, not on the welcome screen.
- Remove entire right-column (Corporate Memory + Activity Center
  widgets) — both surfaces have dedicated admin pages reachable from
  the Admin dropdown.
- Keep stats row (Tables/Columns/Rows/Data Size/Unstructured),
  env-setup-CTA, and Notifications card.

/catalog cleanup:
- Strip the 'Always included' badge + the locked toggle-switch from
  Core Business Data and Business Metrics cards. The toggle was
  always 'checked disabled' — it visually looked like a switch but
  could not be toggled, which was confusing. The 'Always included'
  copy itself was redundant once the toggle was gone. Agnes Internal
  already rendered without these, so the three cards are now visually
  consistent.

Catalog data_stats fix:
- 'total_tables' was len(sync_state) — counted only tables that had
  ever synced, so a 30-row table_registry with 0 ever synced rendered
  as '0 tables'. Switched to len(tables) — the registered
  business-data table list — so the count reflects what's actually
  available, not what's been touched.

* fix(home): real stat numbers + drop unstructured tile + cleanup dead CSS

Dashboard stats were hardcoded zeros (columns: 0, size_display:
'0 MB', unstructured_display: '0 MB') and the table counter pulled
from sync_state (synced) instead of table_registry (registered).
On a fresh deployment with 30 registered tables and 0 ever synced,
the page rendered '0 / 0 / 0 / 0 MB / 0 MB' — useless.

Now:
- Tables: COUNT(*) FROM table_registry WHERE source_type != 'internal'.
  Matches the /catalog Core Business Data counter.
- Columns: SUM(sync_state.columns). Zero only when nothing's synced yet.
- Rows: unchanged (SUM(sync_state.rows), already correct).
- Data Size: SUM(sync_state.file_size_bytes), human-formatted via
  inline _fmt_bytes helper (KB/MB/GB).
- Unstructured: tile dropped — was always '0 MB' and had no source.
- last_updated: now derived from sync_state max(last_sync), wasn't set
  before so the 'Synced …' tag never rendered.

Dashboard.html cleanup: ~725 lines of orphan inline <style> removed —
.section-title, .data-source*, .toggle-switch*, .catalog-cta*,
.memory-card / .memory-stat / .memory-description / .memory-footer
/ .btn-memory, .activity-card / .activity-stat / .activity-text
/ .btn-activity, .account-grid / .account-row / .account-scripts
/ .badge-role / .badge-group / .cron-line, .badge-included /
.badge-beta / .badge-demo. All matched markup deleted in the
previous commit; the CSS was dead code until now.

* ui(catalog): rename page heading 'Data Catalog' → 'Data Packages'

The top-nav entry says 'Data Packages' but the page itself said
'Data Catalog' — confusing two-name product. Aligns the heading and
<title> with the nav label. Subtitle trimmed too: 'manage your
subscriptions' was a vestige of the toggle UI that just got removed,
replaced with a one-liner describing what the page is for.

Two other 'Data Catalog' strings stay: they live inside the table-
profiler overlay JS and refer to an EXTERNAL catalog system (e.g.
OpenMetadata / Atlan) that an operator may link to per table — that
is a generic term for any external data-catalog product, not our
page name.

* fix(nav): dropdown clicks always work + mutual-exclusion close

Two bugs in the wireDropdown helper:

1. Clicking trigger B while trigger A's menu was open left both open.
   e.stopPropagation() in trigger.click prevented the document-click
   handler from firing, so trigger A's open menu had no way to learn
   that something else was clicked. Net effect: state diverged across
   the two dropdowns the more you clicked.

2. The target-vs-trigger equality check (e.target !== trigger) was
   strict. Clicking the chevron <svg> inside the button reports the
   svg or its <path> child as e.target — not the button — so removing
   stopPropagation alone would trip the close branch in the same
   click that just opened the panel.

Fix both at once: drop e.stopPropagation() AND switch the doc-handler
guard to trigger.contains(e.target). Now any click outside both the
trigger subtree and the panel subtree closes; any click on another
trigger closes via the OTHER dropdown's doc handler; clicks inside
the trigger (button OR svg child) are fully ignored by the doc
handler and only the trigger's own toggle handler fires.

* feat(ui): canonical blue-gradient hero on every admin page

The UI had a per-page hero pattern on ~10 onboarding/marketing pages
(admin_tokens / profile / install / setup_advanced / marketplace /
my_tokens / store_upload / home_*), each with its own ad-hoc CSS
(.tokens-hero, .profile-hero, .install-hero, .upload-hero, …). The
admin section's index + detail pages had plain H1/H2 with their own
.users-title / .gp-title / .obs-title / .cfg-title / … inline styling.
Net effect: half the app felt like a product, half felt like a
spreadsheet.

Now:
- .page-header--hero CSS upgraded to match the look analysts already
  liked from admin_tokens: 28px/32px/24px padding, 14px radius, soft
  primary-tinted box-shadow (0 4px 16px rgba(0,115,209,0.2)), 28px
  semibold title, optional uppercase eyebrow + 13.5px subtitle.
  Narrow-viewport breakpoint included.
- New _page_hero.html partial wraps the boilerplate. Usage:
    {% set page_hero_eyebrow  = "Users & Access" %}
    {% set page_hero_title    = "Users" %}
    {% set page_hero_subtitle = "…" %}
    {% include "_page_hero.html" %}
- 15 admin templates migrated to it: admin_users / admin_groups /
  admin_marketplaces / admin_access / admin_sessions /
  admin_session_detail / admin_store_submissions /
  admin_scheduler_runs / admin_usage / admin_user_detail /
  admin_welcome / admin_workspace_prompt / admin_server_config /
  activity_center / admin/news_editor. Each gets a grouped eyebrow
  (Users & Access / Data / Agent Experience / Activity Center /
  Server) matching the Admin dropdown sections so the page identity
  is unambiguous at a glance.

Legacy *-title H2/H1 + adjacent subtitle paragraphs deleted; their
per-page CSS rules are dead now (harmless, retire in a follow-up
sweep alongside other inline-style cleanup the reviewers flagged).

admin_tables.html intentionally NOT migrated — it's a standalone
HTML page that doesn't extend base.html; a separate refactor.

Test: test_admin_users_page_renders_for_admin assertion updated
from .users-title to .page-header__title + .page-header--hero (the
canonical pair). All other web/template tests stay green.

* refactor(ui): dedup _humanbytes, drop 267 lines of dead inline CSS

(1) _humanbytes consolidation:
- Add TB branch + optional precision param (default 2 preserves existing
  Store detail callers; dashboard uses precision=1 for headline tiles).
- Delete inline _fmt_bytes from dashboard handler — was a copy of
  _humanbytes with different rounding. One canonical helper now.

(2) Dead inline-CSS sweep across 17 migrated templates:
- Conservative regex: a CSS rule is deleted only when its primary class
  matches one of the known-dead names AND that name is NOT referenced
  from any class= attribute in the same file's markup.
- Per-file 'in-use' guard saved several false positives that the deny
  list would have nuked (e.g. .users-toolbar, .gp-search, .obs-subtitle,
  .marketplaces-toolbar are still in use; only .users-table, .users-search,
  .users-title, .modal-btn, etc. that have NO markup left went away).
- Removed: -267 lines across admin_users (-42), admin_marketplaces (-45),
  admin_groups (-31), my_tokens (-38), admin_tokens (-29), admin_access
  (-9), admin_user_detail (-6), admin_welcome (-8), admin_workspace_prompt
  (-8), admin_server_config (-2), admin_sessions (-1), admin_session_detail
  (-1), admin_usage (-1), admin_store_submissions (-3), admin_scheduler_runs
  (-3), activity_center (-4), corporate_memory_admin (-36).

Contract test stays green (9/9); all web/template/render/user_management
tests pass.

* feat(ui): canonical hero on /catalog (Data Packages)

Same .page-header--hero treatment as the admin pages — Data eyebrow,
Data Packages title, Browse-the-data-sources subtitle. Removes the
ad-hoc .page-title block (h1 / p / wrapper-div) and its CSS rules
(now dead, 3 rule blocks deleted).

* fix(nav): load app.js from _app_header.html — works on standalone pages

The previous nav-fix commit moved the inline dropdown script from
_app_header.html into app/web/static/app.js + added <script src=…>
to base.html. That broke EVERY page that includes _app_header.html
WITHOUT extending base.html (catalog, corporate_memory*,
admin_tables, install). They got the nav markup but no JS → both
Admin and AD dropdowns dead on those pages.

Fix: emit the <script src=app.js defer> directly inside the
_app_header.html partial. Any page that includes the header now
gets the script automatically — base.html-extenders AND standalone
HTML pages alike. base.html's duplicate <script> line removed.

Also fixes the wide-hero on /catalog: .page-header--hero now sets
its own max-width: var(--width-app) (1280px) so standalone pages
without a .container parent don't render the gradient edge-to-edge.
catalog's .source-cards bumped from 900px → 1280px to match the
hero, otherwise the page reads two-tier (wide blue band, narrow
content) which the user flagged.

Verified locally via agent-browser: Admin + AD dropdowns now click
through on /catalog, /admin/tables, /corporate-memory.

* docs(plan): standalone pages → base.html framework migration plan

Plan + Plan-agent review (8 must-fix items applied) for converting
the 5 templates that ship their own <html><head><body> scaffold
(catalog, install, corporate_memory, corporate_memory_admin,
admin_tables) to extend base.html. Root cause of yesterday's
'dropdown dead on /catalog' regression: shared infrastructure in
base.html doesn't propagate to standalones.

* feat(base): body_attrs block + migrate install.html to extend base

base.html: new {% block body_attrs %}{% endblock %} slot so pages
that need <body> attributes (admin_tables has data-source-type)
can carry them through extends.

install.html: convert from standalone <html><head><body> scaffold
to {% extends "base.html" %} with title / body_attrs / head_extra
/ layout / scripts blocks. Drops:
- <!DOCTYPE>, <html>, </html>, <head>, </head>
- <meta charset>, <meta viewport>
- Duplicate <link rel="stylesheet" href="...style-custom.css">
  (base.html already provides one)
- <body> opening + closing tags
- Leading _app_header.html include + _version_badge.html include
  (base.html handles both)

Preserves per-page CSS (in head_extra), per-page JS (in scripts),
the Inter font preconnect (kept inline; not hoisted to base in
this PR — separate decision).

Pilots the migration recipe before the 4 larger pages.

* refactor(memory): extend base.html

Same recipe as install.html. corporate_memory.html now inherits
<html>/<head>/<body> + nav + app.js script tag from base.html.
Page-specific CSS and JS preserved in head_extra + scripts blocks.

* refactor(memory-admin): extend base.html

Same recipe as install/corporate_memory. Curation page now in the
shared rendering pipeline.

* refactor(catalog): extend base.html

catalog.html had the most complexity: 7 head-level assets (chart.js,
Prism, prism-sql, metric_modal.css link + 2 preconnects + Inter
stylesheet), 5 body-level <script> blocks including a <script type=
"module"> for the metric modal, 2 duplicate style-custom.css links
in <head>. The migration script preserved all of them — head-level
externals hoisted to {% block head_extra %} in source order, body
scripts relocated to {% block scripts %} in source order (so chart.js
loads before the IIFE that builds Chart instances), duplicate
style-custom.css links dropped (base.html provides one).

* refactor(admin-tables): extend base.html + carry data-source-type

The biggest of the 5 standalones at 3563 lines. <body data-source-
type="{{ data_source_type }}"> attribute carried through via the
new {% block body_attrs %} slot (admin_tables JS reads
document.body.dataset.sourceType to switch between keboola and
bigquery rendering paths).

* release: 0.54.10 — UI design system unification + homepage status frame + initial workspace override + store guardrails

Co-Authored-By: zdenek.srotyr <zdenek.srotyr@keboola.com>

* refactor(web): migrate remaining templates to canonical design primitives

- admin_group_detail: .data-table, .btn family, appToast(), remove duplicate table/button/toast CSS
- admin_store_submission_detail: .data-table, .btn family, appToast(), remove duplicate btn/toast CSS
- profile_sessions: .data-table, _page_hero.html, remove duplicate table/title CSS
- me_debug: .data-table, .btn family, remove duplicate table/button CSS
- marketplace: .btn-primary/.btn-secondary, remove duplicate button CSS
- store_edit: remove duplicate .btn-primary/.btn-link CSS, canonical button classes
- store_upload: remove duplicate .btn-primary/.btn-secondary/.btn-link CSS

Co-Authored-By: zdenek.srotyr <zdenek.srotyr@keboola.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 CHANGELOG.md                                  |   41 +
 app/web/router.py                             |   74 +-
 app/web/static/app.js                         |   84 +
 app/web/static/style-custom.css               | 1758 ++++++++++++++++-
 app/web/static/style.css                      | 1087 ----------
 app/web/templates/_app_header.html            |   33 +-
 app/web/templates/_page_hero.html             |   19 +
 app/web/templates/activity_center.html        |   10 +-
 app/web/templates/admin/news_editor.html      |    6 +-
 app/web/templates/admin_access.html           |   16 +-
 app/web/templates/admin_group_detail.html     |   69 +-
 app/web/templates/admin_groups.html           |   50 +-
 app/web/templates/admin_marketplaces.html     |   86 +-
 app/web/templates/admin_scheduler_runs.html   |   16 +-
 app/web/templates/admin_server_config.html    |    8 +-
 app/web/templates/admin_session_detail.html   |    6 +-
 app/web/templates/admin_sessions.html         |    6 +-
 .../admin_store_submission_detail.html        |   57 +-
 .../templates/admin_store_submissions.html    |   18 +-
 app/web/templates/admin_tables.html           |   43 +-
 app/web/templates/admin_tokens.html           |   33 +-
 app/web/templates/admin_usage.html            |    6 +-
 app/web/templates/admin_user_detail.html      |   16 +-
 app/web/templates/admin_users.html            |   71 +-
 app/web/templates/admin_welcome.html          |   18 +-
 app/web/templates/admin_workspace_prompt.html |   18 +-
 app/web/templates/base.html                   |    6 +-
 app/web/templates/base_login.html             |    1 -
 app/web/templates/catalog.html                |  176 +-
 app/web/templates/corporate_memory.html       |   39 +-
 app/web/templates/corporate_memory_admin.html |   77 +-
 app/web/templates/dashboard.html              | 1002 ----------
 app/web/templates/install.html                |   40 +-
 app/web/templates/marketplace.html            |   17 +-
 app/web/templates/me_debug.html               |   25 +-
 app/web/templates/my_tokens.html              |   46 +-
 app/web/templates/profile_sessions.html       |   26 +-
 app/web/templates/store_edit.html             |   12 +-
 app/web/templates/store_upload.html           |   32 +-
 .../2026-05-13-design-system-unification.md   | 1486 ++++++++++++++
 .../2026-05-13-standalone-pages-framework.md  |  549 +++++
 pyproject.toml                                |    2 +-
 tests/test_design_system_contract.py          |  186 ++
 tests/test_user_management.py                 |    5 +-
 44 files changed, 4461 insertions(+), 2915 deletions(-)
 create mode 100644 app/web/static/app.js
 delete mode 100644 app/web/static/style.css
 create mode 100644 app/web/templates/_page_hero.html
 create mode 100644 docs/superpowers/plans/2026-05-13-design-system-unification.md
 create mode 100644 docs/superpowers/plans/2026-05-13-standalone-pages-framework.md
 create mode 100644 tests/test_design_system_contract.py

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):