diff --git a/.agents/coding-style.md b/.agents/coding-style.md
index ddee45ae28ec..75ab026c80ed 100644
--- a/.agents/coding-style.md
+++ b/.agents/coding-style.md
@@ -70,3 +70,37 @@ The project documentation is located in `docs/content`. When adding new features
 - **Configuration**: If you modify configuration options, update the relevant sections in `docs/content/`.
 - **Examples**: providing concrete examples (like YAML configuration blocks) is highly encouraged to help users get started quickly.
 - **Shortcodes**: Use `{{% notice note %}}`, `{{% notice tip %}}`, or `{{% notice warning %}}` for callout boxes. Do **not** use `{{% alert %}}` — that shortcode does not exist in this project's Hugo theme and will break the docs build.
+
+## React UI styling
+
+The React UI ships a design system in `core/http/react-ui/src/App.css`: design
+tokens, form grids, data tables, stat cards, callouts, plus a small semantic
+primitive layer (`.stack`, `.hstack`, `.text-note`, `.text-meta`, `.tone-*`,
+`.icon-chip`). **Use it instead of `style={{ ... }}`.** Inline styles are a
+spacing or colour decision made in one file, so no two pages end up sharing a
+rhythm, which is the main reason the app reads as unfinished.
+
+Inline styles are still correct for values that are genuinely computed at
+runtime: `width: ${pct}%`, a data-driven `background`, a tooltip's coordinates.
+Everything else belongs in a class.
+
+A ratchet enforces this:
+
+```sh
+cd core/http/react-ui
+npm run lint:inline-styles          # fails if the count went UP
+npm run lint:inline-styles:report   # per-file counts, worst first
+npm run lint:inline-styles:write    # refresh the baseline after converting
+```
+
+The gate also fails on **duplicate `className` attributes on one element**. JSX
+keeps the last and silently drops the first, so `<i className={icon}
+className="text-xs" />` loses its icon while passing lint, the build and the e2e
+suite. Converting a style to a class on an element that already has a
+`className` is the usual way to introduce one; merge them into a single
+attribute instead.
+
+When converting a page, prefer naming the shapes it actually has
+(`.p2p-diagram`, `.usage-tile`) over adding more utilities, and check whether an
+existing block already covers it: the Nodes page reuses the P2P setup shapes,
+and Model Editor reuses the Settings section rail.
diff --git a/core/http/react-ui/inline-style-baseline.txt b/core/http/react-ui/inline-style-baseline.txt
new file mode 100644
index 000000000000..d27f552128d0
--- /dev/null
+++ b/core/http/react-ui/inline-style-baseline.txt
@@ -0,0 +1 @@
+624
diff --git a/core/http/react-ui/package.json b/core/http/react-ui/package.json
index 73291961541f..401a5fc5bf0d 100644
--- a/core/http/react-ui/package.json
+++ b/core/http/react-ui/package.json
@@ -8,6 +8,9 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint .",
+    "lint:inline-styles": "node scripts/inline-style-gate.mjs",
+    "lint:inline-styles:write": "node scripts/inline-style-gate.mjs --write",
+    "lint:inline-styles:report": "node scripts/inline-style-gate.mjs --report",
     "i18n:extract": "i18next-parser",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
diff --git a/core/http/react-ui/scripts/inline-style-gate.mjs b/core/http/react-ui/scripts/inline-style-gate.mjs
new file mode 100644
index 000000000000..91fe7d7dba7b
--- /dev/null
+++ b/core/http/react-ui/scripts/inline-style-gate.mjs
@@ -0,0 +1,117 @@
+#!/usr/bin/env node
+/**
+ * Inline-style ratchet.
+ *
+ * The React UI ships a full design system (tokens, form grids, data tables,
+ * stat cards, callouts) that the pages largely bypassed: at the time this gate
+ * was written there were ~1,700 `style={{...}}` literals across src/pages and
+ * src/components. Each one is a spacing or colour decision made locally, so no
+ * two pages share a rhythm, which is the main reason the app reads as
+ * unfinished rather than as one product.
+ *
+ * This gate does not try to forbid inline styles. Some are legitimate: a width
+ * driven by a runtime percentage, a CSS custom property passed to a chart. It
+ * only enforces that the total never goes UP, the same ratchet discipline as
+ * the coverage baseline. Converting a page lowers the number; you then refresh
+ * the baseline in the same commit.
+ *
+ *   node scripts/inline-style-gate.mjs            # check against baseline
+ *   node scripts/inline-style-gate.mjs --write    # save current as baseline
+ *   node scripts/inline-style-gate.mjs --report   # per-file counts, worst first
+ */
+import { readFileSync, writeFileSync, readdirSync, statSync, existsSync } from 'node:fs'
+import { join, relative, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..')
+const SCAN = ['src/pages', 'src/components']
+const BASELINE = join(ROOT, 'inline-style-baseline.txt')
+const PATTERN = /style=\{\{/g
+
+function walk(dir, out = []) {
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry)
+    if (statSync(full).isDirectory()) walk(full, out)
+    else if (entry.endsWith('.jsx') || entry.endsWith('.js')) out.push(full)
+  }
+  return out
+}
+
+/* Two className attributes on one element is always a bug: JSX keeps the last
+   and silently drops the first, so an `<i className={icon} className="text-xs">`
+   loses its icon. This is exactly what a careless style-to-class conversion
+   produces, so the check lives next to the thing that causes it. eslint would
+   catch it via react/jsx-props-no-duplicate-props, but that needs
+   eslint-plugin-react, which this project does not depend on. */
+const DUPE = /className=(?:\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*\}|"[^"]*")(?:\s+[a-zA-Z-]+=(?:"[^"]*"|\{[^{}]*\}))*\s+className=/g
+
+const counts = []
+const dupes = []
+let total = 0
+for (const rel of SCAN) {
+  const dir = join(ROOT, rel)
+  if (!existsSync(dir)) continue
+  for (const file of walk(dir)) {
+    const src = readFileSync(file, 'utf8')
+    const n = (src.match(PATTERN) || []).length
+    if (n > 0) counts.push([relative(ROOT, file), n])
+    total += n
+    for (const m of src.matchAll(DUPE)) {
+      dupes.push([relative(ROOT, file), src.slice(0, m.index).split('\n').length])
+    }
+  }
+}
+counts.sort((a, b) => b[1] - a[1])
+
+if (dupes.length > 0 && process.argv[2] !== '--report') {
+  console.error(`Duplicate className attributes (${dupes.length}). JSX keeps the last and drops the first:`)
+  for (const [file, line] of dupes.slice(0, 20)) console.error(`  ${file}:${line}`)
+  console.error('')
+  console.error('Merge them: className={`${expr} the-class`}')
+  process.exit(1)
+}
+
+const mode = process.argv[2]
+
+if (mode === '--report') {
+  for (const [file, n] of counts) console.log(String(n).padStart(4), file)
+  console.log(String(total).padStart(4), 'TOTAL across', counts.length, 'files')
+  process.exit(0)
+}
+
+if (mode === '--write') {
+  writeFileSync(BASELINE, `${total}\n`)
+  console.log(`Saved inline-style baseline: ${total}`)
+  process.exit(0)
+}
+
+if (!existsSync(BASELINE)) {
+  console.error(`No baseline at ${BASELINE}. Run with --write to create one.`)
+  process.exit(1)
+}
+
+const baseline = Number(readFileSync(BASELINE, 'utf8').trim())
+if (Number.isNaN(baseline)) {
+  console.error(`Baseline file is not a number: ${BASELINE}`)
+  process.exit(1)
+}
+
+if (total > baseline) {
+  console.error(`Inline styles went UP: ${total} (baseline ${baseline}, +${total - baseline}).`)
+  console.error('')
+  console.error('Use a class from src/App.css instead. The layout and text primitives')
+  console.error('(.stack, .hstack, .text-note, .text-meta, .loading-center) cover most')
+  console.error('cases; give genuinely page-specific shapes their own named class.')
+  console.error('')
+  console.error('Worst files right now:')
+  for (const [file, n] of counts.slice(0, 5)) console.error(`  ${String(n).padStart(4)} ${file}`)
+  process.exit(1)
+}
+
+if (total < baseline) {
+  console.log(`Inline styles: ${total} (baseline ${baseline}, -${baseline - total}).`)
+  console.log('Refresh the baseline in this commit: npm run lint:inline-styles:write')
+  process.exit(0)
+}
+
+console.log(`Inline styles: ${total}, at baseline.`)
diff --git a/core/http/react-ui/src/App.css b/core/http/react-ui/src/App.css
index b27ec01a762b..b9e5838ab64a 100644
--- a/core/http/react-ui/src/App.css
+++ b/core/http/react-ui/src/App.css
@@ -9962,3 +9962,1605 @@ button.collapsible-header:focus-visible {
   line-height: 16px;
   font-size: 0.5625rem;
 }
+/* ===========================================================================
+   Fine-tuning
+   Page-scoped classes for the shapes the shared system does not already cover:
+   the metric charts, the job rows, the GRPO reward pickers and the key/value
+   editor. Everything else on the page (form groups, stat grid, data table,
+   progress bar, callouts) uses the shared classes above rather than restating
+   them inline.
+   =========================================================================== */
+
+/* --- charts ------------------------------------------------------------- */
+.ft-chart-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
+.ft-chart__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin-bottom: var(--spacing-xs);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
+}
+.ft-chart__key {
+  display: inline-block;
+  width: 12px;
+  height: 3px;
+  border-radius: var(--radius-sm);
+  background: var(--ft-chart-color, var(--color-primary));
+}
+.ft-chart__svg {
+  width: 100%;
+  height: auto;
+  max-height: 220px;
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-sm);
+}
+.ft-chart-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  min-height: 120px;
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}
+
+/* --- job rows ----------------------------------------------------------- */
+.ft-jobs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+.ft-job { cursor: pointer; }
+.ft-job__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+.ft-job__title { min-width: 0; }
+.ft-job__backend {
+  margin-left: var(--spacing-sm);
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}
+.ft-job__meta,
+.ft-job__path,
+.ft-job__message {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  margin-top: var(--spacing-xs);
+}
+.ft-job__path {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+.ft-job__message--failed { color: var(--color-error); }
+
+/* --- banners ------------------------------------------------------------ */
+.ft-banner {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+}
+.ft-banner__icon { color: var(--color-primary); }
+.ft-banner__spacer { margin-left: auto; }
+
+/* --- GRPO reward pickers ------------------------------------------------ */
+.ft-rewards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+}
+.ft-reward {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-sm);
+}
+.ft-reward--on {
+  border-color: var(--color-primary);
+  background: var(--color-bg-secondary);
+}
+.ft-reward__label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  cursor: pointer;
+}
+.ft-reward__name {
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--text-sm);
+}
+.ft-reward__desc {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+.ft-reward__params {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  margin-top: var(--spacing-sm);
+  padding-left: var(--spacing-lg);
+}
+.ft-reward__param {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+.ft-reward__param-label {
+  font-size: var(--text-xs);
+  min-width: 80px;
+}
+.ft-reward__param .input {
+  width: 100px;
+  font-size: var(--text-sm);
+}
+.ft-reward__code {
+  margin: 0;
+  font-size: var(--text-xs);
+  white-space: pre-wrap;
+  color: var(--color-text-muted);
+}
+.ft-reward-draft {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-sm);
+  padding: var(--spacing-md);
+  border: 1px dashed var(--color-border-default);
+  border-radius: var(--radius-sm);
+}
+.ft-reward-draft .textarea { font-family: var(--font-mono); }
+
+/* --- key/value editor --------------------------------------------------- */
+.ft-kv {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  align-items: flex-start;
+}
+.ft-kv__row {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: center;
+  width: 100%;
+}
+.ft-kv__key { flex: 1; }
+.ft-kv__value { flex: 2; }
+
+/* --- advanced disclosure ------------------------------------------------ */
+.ft-disclosure {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  padding: 0 0 var(--spacing-sm);
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--color-border-subtle);
+  font: inherit;
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+.ft-disclosure__chevron {
+  width: 0.75rem;
+  font-size: var(--text-xs);
+  color: var(--color-primary);
+}
+.ft-disclosure__icon { color: var(--color-primary); }
+.ft-advanced {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-md);
+}
+
+/* --- export ------------------------------------------------------------- */
+.ft-export-status {
+  margin-top: var(--spacing-sm);
+  font-size: var(--text-sm);
+  color: var(--color-success);
+}
+.ft-export-status--error { color: var(--color-error); }
+.ft-export-status__links {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-left: var(--spacing-sm);
+}
+
+/* --- misc --------------------------------------------------------------- */
+.ft-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+.ft-actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+}
+.ft-hint {
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+  margin-bottom: var(--spacing-md);
+}
+.ft-checkbox {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  cursor: pointer;
+  align-self: end;
+  font-size: var(--text-sm);
+}
+.ft-toggle-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Fine-tuning form grids. Named for the group they lay out rather than for
+   their column counts, so the ratios can change without renaming callers. */
+.ft-grid-auto {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: var(--spacing-md);
+}
+.ft-grid-auto-sm {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: var(--spacing-md);
+}
+.ft-grid-model {
+  display: grid;
+  grid-template-columns: 1fr 1fr 2fr;
+  gap: var(--spacing-md);
+}
+.ft-grid-dataset {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  gap: var(--spacing-md);
+}
+.ft-grid-liquid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: var(--spacing-sm);
+}
+@media (max-width: 720px) {
+  .ft-grid-model,
+  .ft-grid-dataset { grid-template-columns: minmax(0, 1fr); }
+}
+
+/* Native file inputs carry their own button and filename text, so the standard
+   .input padding pushes "No file chosen" past the right edge and truncates it.
+   Also affects ImageGen and VideoGen, which hit this today. */
+.input--file { padding: 6px; }
+
+/* The new-job form is followed directly by the jobs list, which needs the
+   same separation the section rhythm uses everywhere else. .card carries no
+   margin of its own by design. */
+.ft-form { margin-bottom: var(--spacing-lg); }
+
+/* ===========================================================================
+   Layout and text primitives
+   These exist because ~1,700 inline styles across the pages were re-deriving
+   the same handful of intents: vertical rhythm, a row of related controls, a
+   line of secondary text. Each of those is a decision that should be made once
+   for the whole app, not per JSX node. Keep this list SHORT and semantic; it
+   is deliberately not a utility framework. If a page needs a shape that is not
+   here, give that shape a name in its own block rather than growing this one.
+   =========================================================================== */
+
+/* Vertical rhythm. Replaces chains of marginBottom on siblings, which collapse
+   and double in ways that are invisible until two pages sit side by side. */
+.stack { display: flex; flex-direction: column; gap: var(--spacing-md); }
+.stack--sm { gap: var(--spacing-sm); }
+.stack--lg { gap: var(--spacing-lg); }
+
+/* A row of related things: label + control, button groups, icon + text. Wraps
+   by default because every one of these eventually meets a narrow viewport. */
+.hstack {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.hstack--md { gap: var(--spacing-md); }
+.hstack--nowrap { flex-wrap: nowrap; }
+.hstack--between { justify-content: space-between; }
+.hstack--end { justify-content: flex-end; }
+.hstack--top { align-items: flex-start; }
+
+/* Secondary and tertiary text. The pages had eleven different combinations of
+   font-size and muted colour for what is the same two roles. */
+.text-note { font-size: var(--text-sm); color: var(--color-text-muted); }
+.text-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
+.text-mono { font-family: var(--font-mono); }
+
+/* The "waiting for the first response" wrapper, previously repeated inline in
+   25 places with identical values. */
+.loading-center {
+  display: flex;
+  justify-content: center;
+  padding: var(--spacing-xl);
+}
+
+/* Grow-to-fill inside a .hstack. Named rather than inline because "which child
+   absorbs the slack" is a layout decision worth being able to grep for. */
+.flex-1 { flex: 1; }
+/* Same, plus the min-width:0 that lets a flex child actually shrink and
+   ellipsis instead of overflowing its row. */
+.flex-1-min { flex: 1; min-width: 0; }
+
+/* Semantic tones. Sets three custom properties so a component can be tinted by
+   meaning without every call site naming colours. Pair with .icon-chip, or any
+   block that reads --tone / --tone-soft / --tone-line. */
+.tone-primary { --tone: var(--color-primary); --tone-soft: var(--color-primary-light); --tone-line: var(--color-primary-border); }
+.tone-accent  { --tone: var(--color-accent);  --tone-soft: var(--color-accent-light);  --tone-line: var(--color-accent-border); }
+.tone-success { --tone: var(--color-success); --tone-soft: var(--color-success-light); --tone-line: var(--color-success-border); }
+.tone-warning { --tone: var(--color-warning); --tone-soft: var(--color-warning-light); --tone-line: var(--color-warning-border); }
+.tone-error   { --tone: var(--color-error);   --tone-soft: var(--color-error-light);   --tone-line: var(--color-error-border); }
+.tone-muted   { --tone: var(--color-text-muted); --tone-soft: var(--color-bg-tertiary); --tone-line: var(--color-border-subtle); }
+
+/* The tinted rounded square holding a single icon. Appears on P2P, Home,
+   Manage and Nodes, previously rebuilt inline each time with its own size. */
+.icon-chip {
+  width: 40px; height: 40px;
+  border-radius: var(--radius-md);
+  display: grid; place-items: center;
+  flex: none;
+  background: var(--tone-soft, var(--color-bg-tertiary));
+  color: var(--tone, var(--color-text-muted));
+  font-size: 1rem;
+}
+.icon-chip--sm { width: 36px; height: 36px; font-size: 0.75rem; }
+.icon-chip--lg { width: 48px; height: 48px; }
+.icon-chip--ring { border: 2px solid var(--tone); }
+
+/* ===========================================================================
+   P2P / distributed
+   The page explains three architectures (federation, llama.cpp RPC sharding,
+   MLX pipeline) using the same four shapes each time: a diagram, a live count,
+   a node grid and a setup card. Those shapes are named once here.
+   =========================================================================== */
+
+.p2p-panel {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-accent-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.p2p-section {
+  padding: var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border-subtle);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+.p2p-section:last-child { border-bottom: 0; }
+
+/* Token */
+.p2p-token {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-accent-border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  margin-bottom: var(--spacing-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+.p2p-token__value {
+  margin: 0;
+  background: var(--color-bg-primary);
+  color: var(--color-warning);
+  padding: var(--spacing-md);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border-subtle);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  word-break: break-all;
+  white-space: pre-wrap;
+  cursor: pointer;
+}
+
+/* Tabs */
+.p2p-tabs {
+  display: flex;
+  gap: 2px;
+  border-bottom: 2px solid var(--color-border-subtle);
+  margin-bottom: var(--spacing-xl);
+}
+.p2p-tab {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  font: inherit;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  transition: background var(--duration-fast) var(--ease-default),
+              border-color var(--duration-fast) var(--ease-default);
+}
+.p2p-tab--on {
+  background: var(--color-bg-secondary);
+  border-bottom-color: var(--tone, var(--color-primary));
+  color: var(--color-text-primary);
+}
+.p2p-tab__text { text-align: left; }
+.p2p-tab__label { font-size: var(--text-base); font-weight: var(--font-weight-semibold); }
+.p2p-tab__count { font-size: var(--text-xs); color: var(--color-text-muted); }
+.p2p-tab--on .p2p-tab__count { color: var(--tone); }
+.p2p-tab:not(.p2p-tab--on) .icon-chip { background: var(--color-bg-tertiary); color: var(--color-text-muted); }
+
+/* Architecture diagrams */
+.p2p-diagram {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+.p2p-diagram__row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
+}
+.p2p-diagram__item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); }
+.p2p-diagram__label { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); }
+.p2p-diagram__sub { font-size: 0.625rem; color: var(--color-text-muted); }
+.p2p-diagram__arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--color-text-muted); }
+.p2p-diagram__arrow span { font-size: 0.625rem; }
+.p2p-diagram__group { display: flex; gap: var(--spacing-xs); }
+.p2p-diagram__shard {
+  width: 56px; height: 36px;
+  border-radius: var(--radius-sm);
+  display: grid; place-items: center;
+  background: var(--tone-soft); color: var(--tone);
+  border: 1px solid var(--tone-line);
+  font-size: var(--text-xs);
+}
+.p2p-diagram__shard--wide { width: 64px; }
+.p2p-diagram__shard-label { font-size: 0.5625rem; color: var(--color-text-muted); margin-top: 2px; }
+.p2p-diagram__note {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  text-align: center;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* Live counts */
+.p2p-count { font-size: var(--text-xl); font-weight: var(--font-weight-bold, 700); }
+.p2p-count__online { color: var(--color-error); }
+.p2p-count__online--up { color: var(--color-success); }
+.p2p-count__total { color: var(--color-text-secondary); font-size: var(--text-base); }
+
+/* Node grid + card */
+.p2p-nodes {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: var(--spacing-md);
+}
+.p2p-node {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-error-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  transition: border-color var(--duration-normal) var(--ease-default);
+}
+.p2p-node--online { border-color: var(--color-success-border); }
+.p2p-node__name { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); margin: 0; }
+.p2p-node__id {
+  margin: 0;
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--color-text-secondary);
+  word-break: break-all;
+}
+.p2p-node__state {
+  display: flex; align-items: center; gap: 6px;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  padding: 4px 10px;
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-error);
+  white-space: nowrap;
+}
+.p2p-node--online .p2p-node__state { color: var(--color-success); }
+.p2p-node__state i { font-size: 0.5rem; }
+.p2p-node__foot {
+  display: flex; align-items: center; gap: 6px;
+  padding-top: var(--spacing-sm);
+  border-top: 1px solid var(--color-border-subtle);
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+/* Repeated "nothing connected yet" box */
+.p2p-empty {
+  text-align: center;
+  padding: var(--spacing-lg);
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+}
+.p2p-empty i { font-size: 2rem; color: var(--color-text-muted); }
+.p2p-empty p { margin: var(--spacing-sm) 0 0; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
+.p2p-empty p + p { margin-top: var(--spacing-xs); font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); }
+
+/* Copyable command */
+.p2p-cmd { position: relative; }
+.p2p-cmd pre {
+  margin: 0;
+  background: var(--color-bg-primary);
+  padding: var(--spacing-md);
+  padding-right: var(--spacing-xl);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border-subtle);
+  font-size: var(--text-sm);
+  font-family: var(--font-mono);
+  color: var(--color-warning);
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow: auto;
+}
+.p2p-cmd__copy { position: absolute; top: 8px; right: 8px; }
+
+/* Numbered setup steps */
+.p2p-step {
+  width: 28px; height: 28px;
+  border-radius: 50%;
+  display: grid; place-items: center;
+  background: var(--tone-soft); color: var(--tone);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-bold, 700);
+  flex-shrink: 0;
+}
+.p2p-setup {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+.p2p-setup--warning { border-color: var(--color-warning-border); }
+.p2p-setup__title { font-size: var(--text-base); font-weight: var(--font-weight-semibold); margin: 0; }
+
+/* Callout distinguishing federation from sharding */
+.p2p-note {
+  background: var(--color-accent-light);
+  border: 1px solid var(--color-accent-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+}
+.p2p-note i { color: var(--color-accent); margin-right: 6px; }
+
+/* Disabled state */
+.p2p-hero { text-align: center; padding: var(--spacing-xl) 0; }
+.p2p-hero > i { font-size: 3rem; color: var(--color-primary); }
+.p2p-hero h1 { font-size: var(--text-2xl); font-weight: var(--font-weight-semibold); margin: var(--spacing-md) 0 var(--spacing-sm); }
+.p2p-hero > p { color: var(--color-text-secondary); max-width: 600px; margin: 0 auto var(--spacing-xl); }
+.p2p-features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  gap: var(--spacing-md);
+  text-align: center;
+}
+.p2p-feature { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); }
+.p2p-feature h3 { font-size: var(--text-base); font-weight: var(--font-weight-semibold); margin: var(--spacing-sm) 0 0; }
+.p2p-feature p { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }
+.p2p-enable {
+  max-width: 700px;
+  margin: 0 auto var(--spacing-xl);
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+/* Centre a row of controls, e.g. a pair of documentation buttons. */
+.hstack--center { justify-content: center; }
+
+/* An icon that takes the colour of its nearest .tone-* ancestor. Section
+   headings across the app pair an icon with a semantic colour; this stops each
+   one naming the colour again. */
+.tone-icon { color: var(--tone, var(--color-text-muted)); }
+
+/* Occasional extra separation between two steps inside a setup card, where the
+   normal .stack gap would under-sell the break. */
+.push-lg { margin-top: var(--spacing-lg); }
+
+/* Secondary text at the sm step. Distinct from .text-note: --color-text-secondary
+   is for content, --color-text-muted is for metadata about content. */
+.text-sub { font-size: var(--text-sm); color: var(--color-text-secondary); }
+/* Colour only, when the size is already right. */
+.text-muted { color: var(--color-text-muted); }
+
+/* Type scale steps. Named so that a size which is NOT on the scale stays an
+   inline style and therefore stays visible: 0.75rem was used ~100 times and
+   sits between --text-xs and --text-sm. */
+.text-xs { font-size: var(--text-xs); }
+.text-sm { font-size: var(--text-sm); }
+.text-base { font-size: var(--text-base); }
+
+/* Semantic text colours. */
+.text-primary { color: var(--color-primary); }
+.text-secondary { color: var(--color-text-secondary); }
+.text-error { color: var(--color-error); }
+
+/* An icon sitting immediately before a label, where the parent is not a flex
+   row with a gap. */
+.icon-before { margin-right: var(--spacing-xs); }
+
+.text-right { text-align: right; }
+.clickable { cursor: pointer; }
+.m-0 { margin: 0; }
+.mb-0 { margin-bottom: 0; }
+
+/* Bold title inside a card or panel, with its icon inline. Thirteen pages
+   rebuilt this same heading with the same six declarations. */
+.panel-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-bold, 700);
+  margin: 0 0 var(--spacing-md);
+}
+
+/* A row in a plain divided list (settings, details, key/value readouts). */
+.list-row {
+  padding: var(--spacing-sm) 0;
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+.list-row:last-child { border-bottom: 0; }
+
+/* Spacing and weight steps, locked to the scale.
+   PREFER .stack on the parent over margins on siblings: it cannot collapse or
+   double. These exist for the one-off cases where a single element needs to be
+   pushed off its neighbour, and their real value is that they make an
+   off-scale value (marginBottom: 13) stay visible as an inline style. */
+.mb-xs { margin-bottom: var(--spacing-xs); }
+.mb-sm { margin-bottom: var(--spacing-sm); }
+.mb-md { margin-bottom: var(--spacing-md); }
+.mb-lg { margin-bottom: var(--spacing-lg); }
+.mb-xl { margin-bottom: var(--spacing-xl); }
+.mt-xs { margin-top: var(--spacing-xs); }
+.mt-sm { margin-top: var(--spacing-sm); }
+.mt-md { margin-top: var(--spacing-md); }
+.pad-sm { padding: var(--spacing-sm); }
+.pad-md { padding: var(--spacing-md); }
+.pad-lg { padding: var(--spacing-lg); }
+.fw-medium { font-weight: var(--font-weight-medium); }
+.fw-semibold { font-weight: var(--font-weight-semibold); }
+
+/* Centred "nothing to show" text inside an already-bounded container, where the
+   full .empty-state would be too heavy. */
+.inline-empty {
+  text-align: center;
+  color: var(--color-text-muted);
+  padding: var(--spacing-md);
+}
+
+/* Remaining shared shapes found while converting the pages. */
+.hstack--xs { gap: var(--spacing-xs); }
+.stack--xs { gap: var(--spacing-xs); }
+.mt-lg { margin-top: var(--spacing-lg); }
+.text-accent { color: var(--color-accent); }
+.text-center { text-align: center; }
+.hidden { display: none; }
+.p-0 { padding: 0; }
+.w-full { width: 100%; }
+/* A heading immediately above a group it labels. */
+.group-label { font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-md); }
+.group-label--tight { margin-bottom: var(--spacing-sm); }
+
+.text-lg { font-size: var(--text-lg); }
+.text-success { color: var(--color-success); }
+.text-warning { color: var(--color-warning); }
+
+/* Table column widths. Per-table CSS is the better home for these, but pulling
+   them out of the JSX first makes the ladder visible: there are currently
+   thirteen distinct column widths across the app where three or four would do.
+   Normalising them is a follow-up; this pass only stops them being inline. */
+.col-w-30 { width: 30px; }
+.col-w-40 { width: 40px; }
+.col-w-64 { width: 64px; }
+.col-w-80 { width: 80px; }
+.col-w-90 { width: 90px; }
+.col-w-100 { width: 100px; }
+.col-w-110 { width: 110px; }
+.col-w-120 { width: 120px; }
+.col-w-130 { width: 130px; }
+.col-w-140 { width: 140px; }
+.col-w-170 { width: 170px; }
+.col-w-200 { width: 200px; }
+.col-w-220 { width: 220px; }
+.col-w-240 { width: 240px; }
+.col-w-320 { width: 320px; }
+
+/* Small uppercase pill used for statuses and counts inside dense tables. */
+.pill-xs {
+  font-size: var(--text-xs);
+  padding: 2px 8px;
+}
+
+/* Chart legend swatch. Takes its colour from a .tone-* ancestor or an explicit
+   --tone, so a legend entry never names a data colour twice. */
+.legend-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-sm);
+  background: var(--tone, var(--color-primary));
+  margin-right: var(--spacing-xs);
+  vertical-align: middle;
+}
+
+/* Uppercase micro-label above a value or a chart. */
+.overline {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.ml-xs { margin-left: var(--spacing-xs); }
+.d-block { display: block; }
+.icon-xl { font-size: 2rem; }
+/* Neutral chip for a value with no semantic state of its own. */
+.chip-neutral { background: var(--color-bg-tertiary); color: var(--color-text-muted); }
+
+.self-start { align-self: flex-start; }
+.wrap-anywhere { white-space: pre-wrap; word-break: break-word; }
+.min-h-control { min-height: 32px; }
+.gap-xs { gap: var(--spacing-xs); }
+
+/* ===========================================================================
+   Usage dashboard
+   Stat tiles, the token chart with its legend and tooltip, the per-model bar
+   list and the pricing editor. Each was rebuilt inline; named once here.
+   =========================================================================== */
+.usage-tile { padding: var(--spacing-sm) var(--spacing-md); flex: 1 1 0; min-width: 120px; }
+.usage-tile--muted { opacity: 0.7; }
+.usage-tile__value {
+  font-size: 1.375rem;
+  font-weight: var(--font-weight-bold, 700);
+  font-family: var(--font-mono);
+  color: var(--color-text-primary);
+}
+.usage-tile--muted .usage-tile__value { color: var(--color-text-secondary); }
+.usage-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: var(--spacing-sm);
+}
+.usage-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--spacing-xs); }
+
+/* Panels that hang off the top of the chart, squared where they meet it. */
+.usage-panel {
+  padding: var(--spacing-md);
+  border-top: 2px solid var(--color-primary);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.usage-panel--muted { opacity: 0.6; }
+
+.usage-bar {
+  width: 100%;
+  height: 6px;
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-primary);
+  overflow: hidden;
+}
+.usage-bar__fill {
+  height: 100%;
+  border-radius: var(--radius-sm);
+  background: var(--tone, var(--color-primary));
+  transition: width 0.3s ease;
+}
+.usage-split {
+  flex: 1;
+  background: var(--color-bg-primary);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  display: flex;
+}
+.usage-split__seg { height: 100%; transition: width 0.3s ease; background: var(--tone, var(--color-primary)); }
+.usage-split__label {
+  width: 120px;
+  min-width: 120px;
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--color-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.usage-split__value {
+  min-width: 60px;
+  text-align: right;
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--color-text-muted);
+  font-weight: var(--font-weight-semibold);
+}
+
+.chart-host { position: relative; width: 100%; }
+.chart-legend {
+  display: flex;
+  gap: var(--spacing-md);
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+.legend-dot--outline { background: transparent; border: 1.5px dashed var(--tone, var(--color-primary)); opacity: 0.6; }
+.chart-tooltip {
+  position: absolute;
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--color-text-primary);
+  pointer-events: none;
+  z-index: 10;
+  box-shadow: var(--shadow-md);
+  white-space: nowrap;
+}
+.chart-tooltip__total {
+  color: var(--color-text-muted);
+  border-top: 1px solid var(--color-border);
+  margin-top: 2px;
+  padding-top: 2px;
+}
+
+.usage-price__label { min-width: 70px; font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-mono); }
+.usage-price__input { flex: 1; max-width: 200px; }
+.usage-price__out { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--color-text-muted); min-width: 100px; }
+
+.toolbar-divider { width: 1px; height: 20px; background: var(--color-border-subtle); margin: 0 var(--spacing-xs); }
+.usage-filters {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
+  padding: var(--spacing-md);
+}
+
+.tone-data-3 { --tone: var(--color-data-3); }
+.text-data-3 { color: var(--color-data-3); }
+.text-italic { font-style: italic; }
+.cursor-default { cursor: default; }
+.fw-normal { font-weight: 400; }
+.bg-secondary { background: var(--color-bg-secondary); }
+
+/* ===========================================================================
+   Middleware
+   Four near-identical badge components, the router score bars and the score
+   histogram. Backgrounds stay inline because they are data-driven.
+   =========================================================================== */
+.mw-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  color: #fff;
+  background: var(--color-bg-tertiary);
+}
+.mw-noop {
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-warning);
+  white-space: nowrap;
+  cursor: help;
+}
+
+/* Router candidate score bars */
+.mw-score { display: flex; align-items: center; gap: var(--spacing-sm); font-family: var(--font-mono); font-size: var(--text-xs); }
+.mw-score__label {
+  width: 160px;
+  color: var(--color-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mw-score__label--active { color: var(--color-text); font-weight: var(--font-weight-semibold); }
+.mw-score__track { flex: 1; position: relative; height: 14px; background: var(--color-border); border-radius: 2px; }
+.mw-score__fill { height: 100%; border-radius: 2px; background: var(--color-text-muted); opacity: 0.45; }
+.mw-score__fill--active { background: var(--color-success); opacity: 1; }
+.mw-score__threshold {
+  position: absolute;
+  top: -3px;
+  width: 2px;
+  height: 20px;
+  background: var(--color-warning);
+  transform: translateX(-1px);
+  pointer-events: none;
+}
+.mw-score__value { width: 56px; text-align: right; color: var(--color-text-muted); }
+
+/* Score histogram under the cache stats */
+.mw-hist { display: flex; align-items: flex-end; gap: 1px; margin-top: var(--spacing-xs); height: 18px; }
+.mw-hist__bar { width: 6px; background: var(--color-border); opacity: 0.3; }
+.mw-hist__bar--hit { background: var(--color-success); opacity: 1; }
+.mw-hist__bar--miss { background: var(--color-warning); opacity: 1; }
+
+.mw-alert { padding: var(--spacing-md); border-left: 3px solid var(--color-error); }
+.mw-list { margin: 0; padding-left: 20px; }
+.mw-list--mono { font-family: var(--font-mono); }
+.mw-field-input {
+  width: 100%;
+  padding: 8px 12px;
+  font-family: var(--font-mono);
+  font-size: var(--text-base);
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-default);
+}
+.bg-muted { background: var(--color-bg-muted, var(--color-bg-secondary)); }
+.w-160 { width: 160px; }
+.min-w-100 { min-width: 100px; }
+.mt-0 { margin-top: 0; }
+.mw-badge--off { color: var(--color-text-muted); }
+.mw-badge--nowrap { white-space: nowrap; }
+.mw-field-input { border-radius: var(--radius-sm); color: var(--color-text-primary); }
+.w-12 { width: 12px; }
+
+/* ===========================================================================
+   Traces
+   The request/response inspector: field trees, code blocks, metadata grids and
+   the settings banner. The code block in particular appeared five times.
+   =========================================================================== */
+.tr-code {
+  margin: 0;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-sm);
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow: auto;
+  max-height: 50vh;
+}
+.tr-well {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm);
+}
+.tr-panel {
+  padding: var(--spacing-md);
+  background: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border);
+}
+.tr-error {
+  background: var(--color-error-light);
+  border: 1px solid var(--color-error-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+.tr-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: var(--spacing-xs);
+  font-size: var(--text-xs);
+}
+.tr-metrics--fixed { grid-template-columns: repeat(4, 1fr); }
+.tr-metric {
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-xs);
+}
+.tr-metric--outlined { background: var(--color-bg-primary); border: 1px solid var(--color-border-subtle); }
+.tr-meta-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.25rem var(--spacing-md);
+  align-items: baseline;
+  font-size: var(--text-sm);
+}
+.tr-fields { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
+.tr-field { border-bottom: 1px solid var(--color-border); }
+.tr-field__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--text-sm);
+  cursor: default;
+}
+.tr-field__head--expandable { cursor: pointer; }
+.tr-field__chevron { width: 12px; flex-shrink: 0; font-size: 0.6rem; color: var(--color-text-secondary); }
+.tr-field__key { font-family: var(--font-mono); color: var(--color-primary); flex-shrink: 0; }
+.tr-field__nested { padding: 0 0 var(--spacing-xs) var(--spacing-md); }
+.tr-field__body { padding: 0 var(--spacing-sm) var(--spacing-sm); }
+
+/* Settings banner at the top, tinted by whether tracing is fully on. */
+.tr-settings { border: 1px solid var(--color-warning-border); border-radius: var(--radius-md); overflow: hidden; }
+.tr-settings--ok { border-color: var(--color-success-border); }
+.tr-settings__toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-warning-light);
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-primary);
+  font: inherit;
+}
+.tr-settings--ok .tr-settings__toggle { background: var(--color-success-light); }
+.tr-settings__body {
+  padding: 0 var(--spacing-md) var(--spacing-md);
+  background: var(--color-bg-secondary);
+  border-top: 1px solid var(--color-border-subtle);
+}
+.tr-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
+.sortable-th { cursor: pointer; user-select: none; }
+.cell-clip { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cell-clip--wide { max-width: 300px; }
+.nowrap { white-space: nowrap; }
+.shrink-0 { flex-shrink: 0; }
+.op-60 { opacity: 0.6; }
+.op-70 { opacity: 0.7; }
+.pad-xs { padding: var(--spacing-xs); }
+.text-left { text-align: left; }
+
+/* ===========================================================================
+   Backends
+   Tinted notice banners, the summary counters, the backend table's icon /
+   description / badge cells and the detail table under an expanded row.
+   =========================================================================== */
+.bk-notice {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+  background: var(--tone-soft);
+  border: 1px solid var(--tone-line);
+}
+.bk-notice--between { justify-content: space-between; }
+.bk-notice__text { color: var(--tone); font-weight: var(--font-weight-medium); font-size: var(--text-sm); }
+.bk-counts { display: flex; gap: var(--spacing-md); font-size: var(--text-sm); }
+.bk-count { font-size: var(--text-xl); font-weight: var(--font-weight-bold, 700); color: var(--tone, var(--color-primary)); }
+.bk-icon-fallback {
+  width: 28px; height: 28px;
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-tertiary);
+  display: grid; place-items: center;
+}
+.bk-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); object-fit: cover; }
+.bk-desc {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  display: inline-block;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-manual-grid { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--spacing-sm); align-items: end; }
+.bk-toggles {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  border-left: 1px solid var(--color-border-subtle);
+  padding-left: var(--spacing-md);
+}
+.bk-check {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+.bk-detail { padding: var(--spacing-md) var(--spacing-lg); background: var(--color-bg-primary); border-top: 1px solid var(--color-border-subtle); }
+.bk-detail__table { width: 100%; border-collapse: collapse; }
+.bk-detail__label {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  vertical-align: top;
+  padding: 6px 12px 6px 0;
+}
+.bk-detail__value { font-size: var(--text-sm); padding: 6px 0; }
+.bk-progress { flex: none; width: 120px; margin-top: var(--spacing-xs); }
+.bk-split-btn { padding: 0 8px; border-left: 1px solid rgba(0, 0, 0, 0.15); border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.badge--soft { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
+.badge--tiny { font-size: 0.625rem; }
+.badge--outline { background: var(--color-surface-sunken); color: var(--color-text-muted); border: 1px solid var(--color-border-subtle); }
+.icon-tiny { font-size: 0.5rem; margin-right: 2px; }
+.pagination-row { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); }
+.inline-flex { display: inline-flex; }
+.search-grow { flex: 1; min-width: 200px; }
+.badge--warn-soft { background: var(--color-warning-light); color: var(--color-warning); }
+
+/* The .p2p-* setup shapes above (hero, feature chips, numbered steps, command
+   block, setup card) are shared with the Nodes page, which presents the same
+   "you have no workers yet, here is how to add one" flow. Renaming them to a
+   neutral prefix is a worthwhile follow-up; reusing them is what stops the
+   shapes diverging again in the meantime. */
+.nodes-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); }
+@media (max-width: 720px) { .nodes-features { grid-template-columns: minmax(0, 1fr); } }
+/* Centre an icon chip above its label in a feature grid. */
+.icon-chip--centred { margin: 0 auto var(--spacing-sm); }
+
+/* ===========================================================================
+   Talk (realtime voice)
+   Status banner, the pipeline-model summary, the transcript pane and the
+   diagnostics panel. Status colour stays inline because it is state-driven.
+   =========================================================================== */
+.talk-page { display: flex; flex-direction: column; align-items: center; }
+.talk-col { width: 100%; max-width: 48rem; }
+.talk-status {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--radius-md);
+}
+.talk-hint {
+  background: var(--color-primary-light);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+}
+.talk-check {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--text-sm);
+  cursor: pointer;
+  color: var(--color-text);
+}
+.talk-check--locked { cursor: not-allowed; color: var(--color-text-secondary); }
+.talk-chip {
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: 1px solid var(--color-border);
+  font-size: var(--text-xs);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+.talk-slots { display: flex; flex-direction: column; gap: var(--spacing-xs); font-size: var(--text-xs); }
+.talk-slot {
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-xs);
+  border: 1px solid var(--color-border);
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-sm);
+}
+.talk-slot__value { font-family: var(--font-mono); min-width: 0; margin-left: auto; text-align: right; overflow-wrap: anywhere; }
+.talk-details { border: 1px solid var(--color-border); border-radius: var(--radius-md); }
+.talk-details > summary {
+  cursor: pointer;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  font-size: var(--text-base);
+}
+.talk-details__body {
+  padding: var(--spacing-md);
+  padding-top: var(--spacing-xs);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+.talk-transcript {
+  max-height: 24rem;
+  overflow-y: auto;
+  min-height: 6rem;
+  padding: var(--spacing-sm);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+.talk-line { display: flex; align-items: flex-start; gap: var(--spacing-xs); }
+.talk-line__icon { margin-top: 3px; flex-shrink: 0; font-size: var(--text-xs); }
+.talk-line__text { margin: 0; }
+.talk-line__text--tool { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-secondary); }
+.talk-line__text--result { white-space: pre-wrap; }
+.talk-diag { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-md); }
+.talk-diag__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-xs); font-size: var(--text-xs); }
+.talk-diag__cell { background: var(--color-bg-secondary); border-radius: var(--radius-sm); padding: var(--spacing-xs); }
+.talk-diag__raw {
+  margin: 0;
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-xs);
+  max-height: 8rem;
+  overflow-y: auto;
+  font-family: var(--font-mono);
+  white-space: pre-wrap;
+}
+.talk-canvas { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-sunken); }
+.talk-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); }
+.btn--accent { background: var(--color-accent); color: var(--color-primary-text); border: none; }
+.btn--error { background: var(--color-error); color: var(--color-text-inverse); border: none; }
+.ml-auto { margin-left: auto; }
+
+/* ===========================================================================
+   Import model
+   The URI-format reference, the preferences panel and its disclosure buttons.
+   `hintStyle` was a shared style object; it is .form-hint-sm now.
+   =========================================================================== */
+.form-hint-sm { margin-top: var(--spacing-xs); font-size: var(--text-xs); color: var(--color-text-muted); }
+.im-well {
+  padding: var(--spacing-md);
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+}
+.im-well--grid { display: grid; gap: var(--spacing-md); }
+.im-disclosure {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font: inherit;
+}
+.im-fmt__title { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-xs); display: flex; align-items: center; gap: var(--spacing-xs); }
+.im-fmt__body { padding-left: 20px; font-size: var(--text-xs); font-family: var(--font-mono); }
+.im-pref-label { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; }
+.im-pref-name { font-size: var(--text-base); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
+.im-indent { margin-left: 28px; }
+.im-yaml-head {
+  padding: var(--spacing-md);
+  border-top: 1px solid var(--color-border-default);
+  border-bottom: 1px solid var(--color-border-default);
+}
+.pill-sm { font-size: var(--text-xs); padding: 3px 8px; }
+
+/* ===========================================================================
+   Node detail
+   The state pill (colours are data-driven), the small inline tag next to a
+   model name, and the section headers above each table.
+   =========================================================================== */
+.state-pill {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium);
+}
+.state-pill--system { background: var(--color-bg-tertiary); color: var(--color-text-muted); border: 1px solid var(--color-border-subtle); }
+.state-pill--gallery { background: var(--color-primary-light); color: var(--color-primary); border: 1px solid var(--color-primary-border); }
+.inline-tag {
+  margin-left: var(--spacing-sm);
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-subtle);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+}
+.table--flush { margin: 0; }
+.link-plain { cursor: pointer; color: var(--color-primary); }
+
+/* ===========================================================================
+   Config field renderer
+   Repeated across every model-config form: key/value list rows, the marker
+   tags next to a field label, and the compact numeric/text controls.
+   =========================================================================== */
+.cfr-list { display: flex; flex-direction: column; gap: var(--spacing-xs); width: 100%; }
+.cfr-row { display: flex; gap: var(--spacing-xs); align-items: center; }
+.cfr-input { flex: 1; font-size: var(--text-sm); }
+.cfr-tag { font-size: var(--text-xs); padding: 1px 4px; border-radius: var(--radius-sm); }
+.cfr-tag--vram { background: var(--color-warning-light); color: var(--color-warning); }
+.cfr-tag--advanced { background: var(--color-bg-tertiary); color: var(--color-text-muted); }
+.cfr-clear {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px 4px;
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  font: inherit;
+}
+.cfr-textarea { width: 100%; min-height: 80px; font-size: var(--text-sm); resize: vertical; }
+.cfr-textarea--mono { font-family: var(--font-mono); }
+.cfr-slider-value { font-size: var(--text-sm); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
+.cfr-num { width: 120px; font-size: var(--text-sm); }
+.cfr-select { width: 220px; font-size: var(--text-sm); }
+.cfr-radio { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--text-sm); cursor: pointer; }
+.pill-tiny { padding: 2px 6px; font-size: var(--text-xs); }
+
+/* ===========================================================================
+   Settings
+   The sticky section rail, the scrolling content column, the branding asset
+   preview and the resource meters. Meter colour is computed from usage.
+   =========================================================================== */
+.set-layout { display: flex; gap: 0; min-height: calc(100vh - 180px); }
+.set-rail {
+  width: 180px;
+  flex-shrink: 0;
+  padding: 0 var(--spacing-sm);
+  position: sticky;
+  top: 0;
+  align-self: flex-start;
+}
+.set-rail__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  border-left: 2px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  font: inherit;
+  font-size: var(--text-sm);
+  text-align: left;
+  margin-bottom: 2px;
+  transition: background var(--duration-fast) var(--ease-default),
+              color var(--duration-fast) var(--ease-default);
+}
+.set-rail__item--on {
+  background: var(--color-primary-light);
+  color: var(--color-primary);
+  font-weight: var(--font-weight-semibold);
+  border-left-color: var(--color-primary);
+}
+.set-rail__icon { width: 16px; text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); }
+.set-content {
+  flex: 1;
+  overflow: auto;
+  padding: 0 var(--spacing-lg) var(--spacing-xl) var(--spacing-md);
+  max-height: calc(100vh - 180px);
+}
+.set-asset {
+  width: 56px;
+  height: 56px;
+  display: grid;
+  place-items: center;
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+.set-asset img { max-width: 100%; max-height: 100%; object-fit: contain; }
+.set-meters {
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm);
+  font-size: var(--text-xs);
+}
+.set-meter { display: flex; align-items: center; gap: var(--spacing-xs); }
+.set-meter__label { color: var(--color-text-muted); min-width: 60px; }
+.set-meter__track { flex: 1; height: 6px; background: var(--color-bg-primary); border-radius: var(--radius-sm); overflow: hidden; }
+.set-meter__fill { height: 100%; border-radius: var(--radius-sm); }
+.set-meter__value { min-width: 40px; text-align: right; }
+.set-pct { font-size: var(--text-base); font-weight: var(--font-weight-semibold); min-width: 40px; text-align: right; }
+.set-head { padding: var(--spacing-lg) var(--spacing-lg) 0; }
+.w-280 { width: 280px; }
+
+/* ===========================================================================
+   Model editor
+   Reuses .set-rail* from Settings, which has the identical sticky section rail.
+   These are the shapes unique to this page: the tab strip, the blocked-field
+   warning strip and the collapsible section headers.
+   =========================================================================== */
+.me-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
+}
+.me-tabs { display: flex; gap: 0; padding: 0 var(--spacing-lg); border-bottom: 1px solid var(--color-border); }
+.me-tab {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  background: transparent;
+  font: inherit;
+  font-size: var(--text-base);
+  color: var(--color-text-secondary);
+}
+.me-tab--on { font-weight: var(--font-weight-semibold); color: var(--color-primary); border-bottom-color: var(--color-primary); }
+.me-tab--blocked { cursor: not-allowed; opacity: 0.5; }
+.me-warn {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-lg);
+  font-size: var(--text-sm);
+  color: var(--color-warning);
+  background: var(--color-warning-light);
+}
+.me-body { flex: 1; padding: 0 var(--spacing-lg) var(--spacing-xl) var(--spacing-md); }
+.me-section-head {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-bold, 700);
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+}
+.me-section-head--collapsed { margin-bottom: 0; }
+.me-chevron { font-size: var(--text-xs); width: 12px; color: var(--color-text-muted); }
+.me-pad { padding: 0 var(--spacing-lg); }
+.me-pad--bottom { padding: 0 var(--spacing-lg) var(--spacing-lg); }
+.max-w-400 { max-width: 400px; }
+
+/* ===========================================================================
+   Node install picker
+   Modal chrome (header / body / footer bars), the warning cards, and the
+   label chips on each node row.
+   =========================================================================== */
+.nip-bar {
+  padding: var(--spacing-md) var(--spacing-lg);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+}
+.nip-bar--head { border-bottom: 1px solid var(--color-border-subtle); justify-content: space-between; }
+.nip-bar--foot { border-top: 1px solid var(--color-border-subtle); }
+.nip-body { padding: var(--spacing-md) var(--spacing-lg); }
+.nip-warn {
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-warning-light);
+  border: 1px solid var(--color-warning-border);
+  border-radius: var(--radius-md);
+  display: flex;
+}
+.nip-warn--block { display: block; padding: var(--spacing-md); }
+.nip-labels { display: flex; flex-wrap: wrap; gap: 3px; }
+.nip-label {
+  padding: 1px 5px;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-subtle);
+}
+.nip-scroll { max-height: 40vh; overflow-y: auto; }
+.btn--warning { background: var(--color-warning); border-color: var(--color-warning); }
+.badge-success--soft { background: var(--color-success-light); color: var(--color-success); }
+.sr-offscreen { position: absolute; left: -9999px; }
+.btn-help { border: none; cursor: help; }
+.w-28 { width: 28px; }
+.min-w-180 { min-width: 180px; }
+
+/* ===========================================================================
+   Agent job details
+   The collapsible trace steps (tinted by trace kind, so colours stay inline)
+   and the code blocks for prompt / result / error payloads.
+   =========================================================================== */
+.ajd-trace { border-radius: var(--radius-md); overflow: hidden; }
+.ajd-trace__toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-primary);
+  text-align: left;
+  font: inherit;
+}
+.ajd-trace__index {
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--color-text-muted);
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-sm);
+  padding: 2px 6px;
+  min-width: 24px;
+  text-align: center;
+}
+.ajd-trace__body { padding: 0 var(--spacing-md) var(--spacing-sm); font-size: var(--text-sm); }
+.ajd-pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+}
+.ajd-pre--nested { margin: var(--spacing-xs) 0 0; line-height: 1.5; }
+.ajd-code {
+  background: var(--color-bg-primary);
+  padding: var(--spacing-sm);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  white-space: pre-wrap;
+  overflow: auto;
+  max-height: 200px;
+}
+.ajd-polling { text-align: center; padding: var(--spacing-md); color: var(--color-text-muted); font-size: var(--text-sm); }
+.ajd-webhook {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  background: var(--color-bg-primary);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm);
+}
+.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); }
+@media (max-width: 720px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }
+.badge--md { font-size: var(--text-base); padding: 4px 12px; }
+.ajd-code--tall { max-height: 300px; }
+.ajd-code--taller { max-height: 500px; }
+.ajd-code--error { background: var(--color-error-light); color: var(--color-error); max-height: none; }
diff --git a/core/http/react-ui/src/components/AmbiguityAlert.jsx b/core/http/react-ui/src/components/AmbiguityAlert.jsx
index fd252344a743..10b1828294b3 100644
--- a/core/http/react-ui/src/components/AmbiguityAlert.jsx
+++ b/core/http/react-ui/src/components/AmbiguityAlert.jsx
@@ -73,10 +73,9 @@ export default function AmbiguityAlert({ modality, candidates = [], knownBackend
                     <span>{name}</span>
                     {!isInstalled && (
                       <i
-                        className="fas fa-download"
+                        className="fas fa-download text-meta"
                         aria-hidden="true"
                         title="Not installed yet — LocalAI will download it"
-                        style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}
                       />
                     )}
                   </button>
diff --git a/core/http/react-ui/src/components/CanvasPanel.jsx b/core/http/react-ui/src/components/CanvasPanel.jsx
index b09bce35de52..0ba0eb1ba5a2 100644
--- a/core/http/react-ui/src/components/CanvasPanel.jsx
+++ b/core/http/react-ui/src/components/CanvasPanel.jsx
@@ -103,7 +103,7 @@ export default function CanvasPanel({ artifacts, selectedId, onSelect, onClose }
         <div className="canvas-audio-wrapper">
           <i className="fas fa-music canvas-audio-icon" />
           <p>{current.title}</p>
-          <audio controls src={current.url} style={{ width: '100%' }} />
+          <audio controls src={current.url} className="w-full" />
         </div>
       )
     }
@@ -229,7 +229,7 @@ export default function CanvasPanel({ artifacts, selectedId, onSelect, onClose }
             >Preview</button>
           </div>
         )}
-        <div style={{ flex: 1 }} />
+        <div className="flex-1" />
         <button className="btn btn-secondary btn-sm" onClick={handleCopy} title="Copy">
           <i className={`fas ${copySuccess ? 'fa-check' : 'fa-copy'}`} />
         </button>
diff --git a/core/http/react-ui/src/components/ClientMCPDropdown.jsx b/core/http/react-ui/src/components/ClientMCPDropdown.jsx
index 7be97ba9df4f..4e52ea393610 100644
--- a/core/http/react-ui/src/components/ClientMCPDropdown.jsx
+++ b/core/http/react-ui/src/components/ClientMCPDropdown.jsx
@@ -76,33 +76,30 @@ export default function ClientMCPDropdown({
             <div style={{ padding: '8px 10px', borderBottom: '1px solid var(--color-border)' }}>
               <input
                 type="text"
-                className="input input-sm"
+                className="input input-sm w-full mb-xs"
                 placeholder="Server URL (e.g. https://mcp.example.com/sse)"
                 value={url}
                 onChange={e => setUrl(e.target.value)}
-                style={{ width: '100%', marginBottom: 'var(--spacing-xs)' }}
               />
               <input
                 type="text"
-                className="input input-sm"
+                className="input input-sm w-full mb-xs"
                 placeholder="Name (optional)"
                 value={name}
                 onChange={e => setName(e.target.value)}
-                style={{ width: '100%', marginBottom: 'var(--spacing-xs)' }}
               />
               <input
                 type="password"
-                className="input input-sm"
+                className="input input-sm w-full mb-xs"
                 placeholder="Auth token (optional)"
                 value={authToken}
                 onChange={e => setAuthToken(e.target.value)}
-                style={{ width: '100%', marginBottom: 'var(--spacing-xs)' }}
               />
               <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.8rem', marginBottom: '6px' }}>
                 <input type="checkbox" checked={useProxy} onChange={e => setUseProxy(e.target.checked)} />
                 Use CORS proxy
               </label>
-              <div style={{ display: 'flex', gap: 'var(--spacing-xs)', justifyContent: 'flex-end' }}>
+              <div className="hstack hstack--xs hstack--end">
                 <button type="button" className="btn btn-sm btn-secondary" onClick={() => setAddDialog(false)}>Cancel</button>
                 <button type="button" className="btn btn-sm btn-primary" onClick={handleAdd} disabled={!url.trim()}>Add</button>
               </div>
@@ -122,7 +119,7 @@ export default function ClientMCPDropdown({
                     checked={isActive}
                     onChange={() => onToggleServer(server.id)}
                   />
-                  <div className="chat-mcp-server-info" style={{ flex: 1 }}>
+                  <div className="chat-mcp-server-info flex-1">
                     <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                       <span className={`chat-client-mcp-status chat-client-mcp-status-${status}`} />
                       <span className="chat-mcp-server-name">{server.name}</span>
diff --git a/core/http/react-ui/src/components/ConfigFieldRenderer.jsx b/core/http/react-ui/src/components/ConfigFieldRenderer.jsx
index 13e5680a4733..4e93e1e5a5b9 100644
--- a/core/http/react-ui/src/components/ConfigFieldRenderer.jsx
+++ b/core/http/react-ui/src/components/ConfigFieldRenderer.jsx
@@ -46,9 +46,9 @@ function StringListEditor({ value, onChange, options }) {
     : null
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, width: '100%' }}>
+    <div className="cfr-list">
       {items.map((item, i) => (
-        <div key={i} style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+        <div key={i} className="cfr-row">
           {options ? (
             <SearchableSelect
               value={item}
@@ -59,21 +59,18 @@ function StringListEditor({ value, onChange, options }) {
                 ...availableOptions,
               ]}
               placeholder="Select..."
-              style={{ flex: 1 }}
+              className="flex-1"
             />
           ) : (
-            <input className="input" value={item} onChange={e => update(i, e.target.value)}
-              style={{ flex: 1, fontSize: '0.8125rem' }} />
+            <input className="input cfr-input" value={item} onChange={e => update(i, e.target.value)} />
           )}
-          <button type="button" className="btn btn-secondary btn-sm" onClick={() => remove(i)}
-            style={{ padding: '2px 6px', fontSize: '0.75rem' }}>
+          <button type="button" className="btn btn-secondary btn-sm pill-tiny" onClick={() => remove(i)}>
             <i className="fas fa-times" />
           </button>
         </div>
       ))}
       {(!options || availableOptions.length > 0) && (
-        <button type="button" className="btn btn-secondary btn-sm" onClick={add}
-          style={{ alignSelf: 'flex-start', fontSize: '0.75rem' }}>
+        <button type="button" className="btn btn-secondary btn-sm self-start text-xs" onClick={add}>
           <i className="fas fa-plus" /> Add
         </button>
       )}
@@ -97,23 +94,17 @@ function MapEditor({ value, onChange }) {
   }
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, width: '100%' }}>
+    <div className="cfr-list">
       {entries.map(([k, v], i) => (
-        <div key={i} style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-          <input className="input" value={k} placeholder="key"
-            onChange={e => update(i, e.target.value, v)}
-            style={{ flex: 1, fontSize: '0.8125rem' }} />
-          <input className="input" value={typeof v === 'string' ? v : JSON.stringify(v)} placeholder="value"
-            onChange={e => update(i, k, e.target.value)}
-            style={{ flex: 1, fontSize: '0.8125rem' }} />
-          <button type="button" className="btn btn-secondary btn-sm" onClick={() => remove(i)}
-            style={{ padding: '2px 6px', fontSize: '0.75rem' }}>
+        <div key={i} className="cfr-row">
+          <input className="input cfr-input" value={k} placeholder="key" onChange={e => update(i, e.target.value, v)} />
+          <input className="input cfr-input" value={typeof v === 'string' ? v : JSON.stringify(v)} placeholder="value" onChange={e => update(i, k, e.target.value)} />
+          <button type="button" className="btn btn-secondary btn-sm pill-tiny" onClick={() => remove(i)}>
             <i className="fas fa-times" />
           </button>
         </div>
       ))}
-      <button type="button" className="btn btn-secondary btn-sm" onClick={add}
-        style={{ alignSelf: 'flex-start', fontSize: '0.75rem' }}>
+      <button type="button" className="btn btn-secondary btn-sm self-start text-xs" onClick={add}>
         <i className="fas fa-plus" /> Add
       </button>
     </div>
@@ -138,31 +129,28 @@ function JsonEditor({ value, onChange }) {
   }
 
   return (
-    <div style={{ width: '100%' }}>
+    <div className="w-full">
       <textarea
-        className="input"
+        className="input cfr-textarea cfr-textarea--mono"
         value={text}
         onChange={e => handleChange(e.target.value)}
-        style={{ width: '100%', minHeight: 80, fontFamily: 'var(--font-mono)', fontSize: '0.8125rem', resize: 'vertical' }}
       />
-      {parseError && <div style={{ color: 'var(--color-error)', fontSize: '0.75rem', marginTop: 2 }}>{parseError}</div>}
+      {parseError && <div className="text-error text-xs mt-xs">{parseError}</div>}
     </div>
   )
 }
 
 function FieldLabel({ field }) {
   return (
-    <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+    <span className="hstack hstack--xs">
       {field.label}
       {field.vram_impact && (
-        <span style={{ fontSize: '0.625rem', padding: '1px 4px', borderRadius: 'var(--radius-sm)',
-          background: 'var(--color-warning-light, rgba(245,158,11,0.15))', color: 'var(--color-warning)' }}>
+        <span className="cfr-tag cfr-tag--vram">
           VRAM
         </span>
       )}
       {field.advanced && (
-        <span style={{ fontSize: '0.625rem', padding: '1px 4px', borderRadius: 'var(--radius-sm)',
-          background: 'var(--color-bg-tertiary)', color: 'var(--color-text-muted)' }}>
+        <span className="cfr-tag cfr-tag--advanced">
           Advanced
         </span>
       )}
@@ -178,16 +166,13 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
   const removeBtn = (
     <button type="button" onClick={() => onRemove(field.path)}
       title="Remove field"
-      style={{
-        background: 'none', border: 'none', cursor: 'pointer', padding: '2px 4px',
-        color: 'var(--color-text-muted)', fontSize: '0.75rem',
-      }}>
+      className="cfr-clear">
       <i className="fas fa-times" />
     </button>
   )
 
   const description = (
-    <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+    <span className="hstack hstack--xs">
       {field.description || field.path}
       {removeBtn}
     </span>
@@ -214,7 +199,7 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
           onChange={handleChange}
           capability={cap}
           placeholder={field.placeholder || 'Select model...'}
-          style={{ width: 220 }}
+          className="col-w-220"
         />
       </SettingRow>
     )
@@ -229,7 +214,7 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
           onChange={handleChange}
           provider={field.autocomplete_provider}
           placeholder={field.placeholder || 'Type or select...'}
-          style={{ width: 220 }}
+          className="col-w-220"
         />
       </SettingRow>
     )
@@ -244,7 +229,7 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
           onChange={handleChange}
           options={field.options.map(o => ({ value: o.value, label: o.label }))}
           placeholder={field.placeholder || 'Select...'}
-          style={{ width: 220 }}
+          className="col-w-220"
         />
       </SettingRow>
     )
@@ -257,13 +242,13 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
     const step = field.step ?? 0.1
     return (
       <SettingRow label={<FieldLabel field={field} />} description={description}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <div className="hstack">
           <input type="range" min={min} max={max} step={step}
             value={value ?? min}
             onChange={e => handleChange(parseFloat(e.target.value))}
-            style={{ width: 120 }}
+            className="col-w-120"
           />
-          <span style={{ fontSize: '0.8125rem', minWidth: 40, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>
+          <span className="cfr-slider-value">
             {value ?? min}
           </span>
         </div>
@@ -276,12 +261,11 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
     return (
       <SettingRow label={<FieldLabel field={field} />} description={description}>
         <>
-          <input className="input" type="number"
+          <input className="input cfr-num" type="number"
             value={value ?? ''}
             onChange={e => handleChange(e.target.value)}
             min={field.min} max={field.max} step={field.step}
             placeholder={field.placeholder}
-            style={{ width: 120, fontSize: '0.8125rem' }}
           />
           {annotation}
         </>
@@ -292,17 +276,16 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
   // Textarea
   if (component === 'textarea') {
     return (
-      <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+      <div className="list-row">
+        <div className="hstack hstack--between mb-xs">
           <div>
-            <div style={{ fontSize: '0.875rem', fontWeight: 500 }}><FieldLabel field={field} /></div>
-            <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>
+            <div className="text-base fw-medium"><FieldLabel field={field} /></div>
+            <div className="text-meta mt-xs">{description}</div>
           </div>
         </div>
-        <textarea className="input" value={value || ''}
+        <textarea className="input cfr-textarea" value={value || ''}
           onChange={e => handleChange(e.target.value)}
           placeholder={field.placeholder}
-          style={{ width: '100%', minHeight: 80, fontSize: '0.8125rem', resize: 'vertical' }}
         />
       </div>
     )
@@ -320,11 +303,11 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
   if (component === 'code-editor') {
     const isStructured = value !== null && value !== undefined && typeof value !== 'string'
     return (
-      <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+      <div className="list-row">
+        <div className="hstack hstack--between mb-xs">
           <div>
-            <div style={{ fontSize: '0.875rem', fontWeight: 500 }}><FieldLabel field={field} /></div>
-            <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>
+            <div className="text-base fw-medium"><FieldLabel field={field} /></div>
+            <div className="text-meta mt-xs">{description}</div>
           </div>
         </div>
         {isStructured
@@ -337,11 +320,11 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
   // String list
   if (component === 'string-list') {
     return (
-      <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+      <div className="list-row">
+        <div className="hstack hstack--between mb-xs">
           <div>
-            <div style={{ fontSize: '0.875rem', fontWeight: 500 }}><FieldLabel field={field} /></div>
-            <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>
+            <div className="text-base fw-medium"><FieldLabel field={field} /></div>
+            <div className="text-meta mt-xs">{description}</div>
           </div>
         </div>
         <StringListEditor value={value} onChange={handleChange} options={field.options?.length > 0 ? field.options : null} />
@@ -352,11 +335,11 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
   // JSON editor
   if (component === 'json-editor') {
     return (
-      <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+      <div className="list-row">
+        <div className="hstack hstack--between mb-xs">
           <div>
-            <div style={{ fontSize: '0.875rem', fontWeight: 500 }}><FieldLabel field={field} /></div>
-            <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>
+            <div className="text-base fw-medium"><FieldLabel field={field} /></div>
+            <div className="text-meta mt-xs">{description}</div>
           </div>
         </div>
         <JsonEditor value={value} onChange={handleChange} />
@@ -369,11 +352,11 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
   // via FormContext so candidate labels match the declared vocabulary.
   if (component === 'router-candidates') {
     return (
-      <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+      <div className="list-row">
+        <div className="hstack hstack--between mb-xs">
           <div>
-            <div style={{ fontSize: '0.875rem', fontWeight: 500 }}><FieldLabel field={field} /></div>
-            <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>
+            <div className="text-base fw-medium"><FieldLabel field={field} /></div>
+            <div className="text-meta mt-xs">{description}</div>
           </div>
         </div>
         <RouterCandidatesEditor value={value} onChange={handleChange} />
@@ -386,11 +369,11 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
   // routing system prompt sent to the classifier model.
   if (component === 'router-policies') {
     return (
-      <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+      <div className="list-row">
+        <div className="hstack hstack--between mb-xs">
           <div>
-            <div style={{ fontSize: '0.875rem', fontWeight: 500 }}><FieldLabel field={field} /></div>
-            <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>
+            <div className="text-base fw-medium"><FieldLabel field={field} /></div>
+            <div className="text-meta mt-xs">{description}</div>
           </div>
         </div>
         <RouterPoliciesEditor value={value} onChange={handleChange} />
@@ -403,11 +386,11 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
   if (component === 'model-multi-select') {
     const cap = PROVIDER_TO_CAPABILITY[field.autocomplete_provider] || undefined
     return (
-      <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+      <div className="list-row">
+        <div className="hstack hstack--between mb-xs">
           <div>
-            <div style={{ fontSize: '0.875rem', fontWeight: 500 }}><FieldLabel field={field} /></div>
-            <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>
+            <div className="text-base fw-medium"><FieldLabel field={field} /></div>
+            <div className="text-meta mt-xs">{description}</div>
           </div>
         </div>
         <ModelMultiSelect value={value} onChange={handleChange} capability={cap} placeholder={field.placeholder} />
@@ -419,11 +402,11 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
   // pii_detection.entity_actions (entity group -> mask|block|allow).
   if (component === 'entity-action-list') {
     return (
-      <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+      <div className="list-row">
+        <div className="hstack hstack--between mb-xs">
           <div>
-            <div style={{ fontSize: '0.875rem', fontWeight: 500 }}><FieldLabel field={field} /></div>
-            <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>
+            <div className="text-base fw-medium"><FieldLabel field={field} /></div>
+            <div className="text-meta mt-xs">{description}</div>
           </div>
         </div>
         <EntityActionListEditor value={value} onChange={handleChange} />
@@ -439,14 +422,14 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
       handleChange(selected.includes(name) ? selected.filter(n => n !== name) : [...selected, name])
     }
     return (
-      <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
-        <div style={{ marginBottom: 4 }}>
-          <div style={{ fontSize: '0.875rem', fontWeight: 500 }}><FieldLabel field={field} /></div>
-          <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>
+      <div className="list-row">
+        <div className="mb-xs">
+          <div className="text-base fw-medium"><FieldLabel field={field} /></div>
+          <div className="text-meta mt-xs">{description}</div>
         </div>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <div className="stack stack--xs">
           {(field.options || []).map(opt => (
-            <label key={opt.value} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '0.8125rem', cursor: 'pointer' }}>
+            <label key={opt.value} className="cfr-radio">
               <input type="checkbox" checked={selected.includes(opt.value)} onChange={() => toggle(opt.value)} />
               {opt.label || opt.value}
             </label>
@@ -460,10 +443,10 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
   // (pii_detection.patterns). value is an array of {name, match, action, min_len}.
   if (component === 'pii-pattern-list') {
     return (
-      <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
-        <div style={{ marginBottom: 4 }}>
-          <div style={{ fontSize: '0.875rem', fontWeight: 500 }}><FieldLabel field={field} /></div>
-          <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>
+      <div className="list-row">
+        <div className="mb-xs">
+          <div className="text-base fw-medium"><FieldLabel field={field} /></div>
+          <div className="text-meta mt-xs">{description}</div>
         </div>
         <PatternListEditor value={value} onChange={handleChange} />
       </div>
@@ -473,11 +456,11 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
   // Map editor
   if (component === 'map-editor') {
     return (
-      <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+      <div className="list-row">
+        <div className="hstack hstack--between mb-xs">
           <div>
-            <div style={{ fontSize: '0.875rem', fontWeight: 500 }}><FieldLabel field={field} /></div>
-            <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>
+            <div className="text-base fw-medium"><FieldLabel field={field} /></div>
+            <div className="text-meta mt-xs">{description}</div>
           </div>
         </div>
         <MapEditor value={value} onChange={handleChange} />
@@ -488,10 +471,9 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
   // Default: text input
   return (
     <SettingRow label={<FieldLabel field={field} />} description={description}>
-      <input className="input" value={value ?? ''}
+      <input className="input cfr-select" value={value ?? ''}
         onChange={e => handleChange(e.target.value)}
         placeholder={field.placeholder}
-        style={{ width: 220, fontSize: '0.8125rem' }}
       />
     </SettingRow>
   )
diff --git a/core/http/react-ui/src/components/EntityActionListEditor.jsx b/core/http/react-ui/src/components/EntityActionListEditor.jsx
index 796e4f0590cc..0ebdae39d9e3 100644
--- a/core/http/react-ui/src/components/EntityActionListEditor.jsx
+++ b/core/http/react-ui/src/components/EntityActionListEditor.jsx
@@ -56,7 +56,7 @@ export default function EntityActionListEditor({ value, onChange }) {
       </datalist>
 
       {entries.length === 0 && (
-        <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+        <div className="text-meta">
           No per-entity actions — every detected group uses the default action. Add a row to
           block or allow-log a specific entity group (e.g. <code>PASSWORD</code> → block).
         </div>
@@ -89,8 +89,7 @@ export default function EntityActionListEditor({ value, onChange }) {
         </div>
       ))}
 
-      <button type="button" className="btn btn-secondary btn-sm" onClick={add}
-        style={{ alignSelf: 'flex-start', fontSize: '0.75rem' }}>
+      <button type="button" className="btn btn-secondary btn-sm self-start text-xs" onClick={add}>
         <i className="fas fa-plus" /> Add entity action
       </button>
     </div>
diff --git a/core/http/react-ui/src/components/FilterBar.jsx b/core/http/react-ui/src/components/FilterBar.jsx
index 95f7b213518f..d1a39da4f576 100644
--- a/core/http/react-ui/src/components/FilterBar.jsx
+++ b/core/http/react-ui/src/components/FilterBar.jsx
@@ -58,7 +58,7 @@ export default function FilterBar({
                   className={`filter-btn ${activeFilter === f.key ? 'active' : ''}`}
                   onClick={() => onFilterChange(f.key)}
                 >
-                  {f.icon && <i className={`fas ${f.icon}`} style={{ marginRight: 4 }} />}
+                  {f.icon && <i className={`fas ${f.icon} icon-before`} />}
                   {f.label}
                   {typeof f.count === 'number' && (
                     <span className="filter-btn__count">{f.count}</span>
diff --git a/core/http/react-ui/src/components/GalleryLoader.jsx b/core/http/react-ui/src/components/GalleryLoader.jsx
index 304784b05ea7..06731192a4fb 100644
--- a/core/http/react-ui/src/components/GalleryLoader.jsx
+++ b/core/http/react-ui/src/components/GalleryLoader.jsx
@@ -35,7 +35,7 @@ export default function GalleryLoader() {
       justifyContent: 'center', padding: 'var(--spacing-xl) var(--spacing-md)',
       minHeight: '280px', gap: 'var(--spacing-lg)',
     }}>
-      <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
+      <div className="hstack">
         {[0, 1, 2, 3, 4].map(i => (
           <div key={i} style={{
             width: 10, height: 10, borderRadius: '50%',
diff --git a/core/http/react-ui/src/components/ImageSelector.jsx b/core/http/react-ui/src/components/ImageSelector.jsx
index 323301b61e2d..14c14cb0e2ea 100644
--- a/core/http/react-ui/src/components/ImageSelector.jsx
+++ b/core/http/react-ui/src/components/ImageSelector.jsx
@@ -40,7 +40,7 @@ export default function ImageSelector({ selected, onSelect, dev, onDevChange })
               transition: 'all 150ms',
             }}
           >
-            <i className={`fas ${opt.icon}`} style={{ fontSize: '0.75rem' }} />
+            <i className={`fas ${opt.icon} text-xs`} />
             {opt.label}
           </button>
         )
@@ -62,7 +62,7 @@ export default function ImageSelector({ selected, onSelect, dev, onDevChange })
           }}
           title="Use development (master) images instead of stable releases"
         >
-          <i className="fas fa-flask" style={{ fontSize: '0.75rem' }} />
+          <i className="fas fa-flask text-xs" />
           Dev
         </button>
       )}
diff --git a/core/http/react-ui/src/components/MediaHistory.jsx b/core/http/react-ui/src/components/MediaHistory.jsx
index 9d98b54167f5..a87e1c6b5670 100644
--- a/core/http/react-ui/src/components/MediaHistory.jsx
+++ b/core/http/react-ui/src/components/MediaHistory.jsx
@@ -22,7 +22,7 @@ export default memo(function MediaHistory({ entries, selectedId, onSelect, onDel
         style={{ display: 'flex', alignItems: 'center' }}
       >
         <i className="fas fa-chevron-right" />
-        <span style={{ flex: 1 }}>{t('history.title')} ({entries.length})</span>
+        <span className="flex-1">{t('history.title')} ({entries.length})</span>
         {entries.length > 0 && (
           <button
             className="media-history-clear-btn"
diff --git a/core/http/react-ui/src/components/ModelMultiSelect.jsx b/core/http/react-ui/src/components/ModelMultiSelect.jsx
index 5bf25ea0e00c..b3cf2e167635 100644
--- a/core/http/react-ui/src/components/ModelMultiSelect.jsx
+++ b/core/http/react-ui/src/components/ModelMultiSelect.jsx
@@ -21,7 +21,7 @@ export default function ModelMultiSelect({ value, onChange, capability, placehol
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 6, width: '100%' }}>
       {items.length === 0 ? (
-        <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+        <div className="text-meta">
           No detectors — PII is enabled but nothing scans requests. Add a token-classification
           (NER) model below; its <code>pii_detection</code> block supplies the policy.
         </div>
diff --git a/core/http/react-ui/src/components/NodeInstallPicker.jsx b/core/http/react-ui/src/components/NodeInstallPicker.jsx
index 517d7156ce85..6ca27ea12ae2 100644
--- a/core/http/react-ui/src/components/NodeInstallPicker.jsx
+++ b/core/http/react-ui/src/components/NodeInstallPicker.jsx
@@ -425,46 +425,29 @@ export default function NodeInstallPicker({
 
   return (
     <Modal onClose={onClose} maxWidth="780px">
-      <div style={{
-        padding: 'var(--spacing-md) var(--spacing-lg)',
-        borderBottom: '1px solid var(--color-border-subtle)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 'var(--spacing-sm)',
-      }}>
-        <h2 style={{ margin: 0, fontSize: '1rem', display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
-          <i className="fas fa-cog" style={{ color: 'var(--color-primary)' }} />
-          Install <span style={{ fontFamily: 'var(--font-mono)' }}>{backend.name}</span>
+      <div className="nip-bar nip-bar--head">
+        <h2 className="hstack text-lg m-0">
+          <i className="fas fa-cog text-primary" />
+          Install <span className="text-mono">{backend.name}</span>
           {backend.isMeta ? (
-            <span className="badge badge-info" style={{ fontSize: '0.6875rem' }}>Auto-resolving</span>
+            <span className="badge badge-info text-xs">Auto-resolving</span>
           ) : (
-            <span className="badge badge-warning" style={{ fontSize: '0.6875rem' }}>Hardware-specific</span>
+            <span className="badge badge-warning text-xs">Hardware-specific</span>
           )}
         </h2>
         <button
           type="button"
-          className="btn btn-ghost btn-sm"
+          className="btn btn-ghost btn-sm pill-tiny"
           onClick={onClose}
           aria-label="Close"
-          style={{ fontSize: '1.125rem', lineHeight: 1, padding: '4px 10px' }}
         >×</button>
       </div>
 
-      <div style={{ padding: 'var(--spacing-md) var(--spacing-lg)' }}>
+      <div className="nip-body">
         {!backend.isMeta && (
-          <div className="card" style={{
-            marginBottom: 'var(--spacing-md)',
-            padding: 'var(--spacing-sm) var(--spacing-md)',
-            background: 'var(--color-warning-light)',
-            border: '1px solid var(--color-warning-border)',
-            borderRadius: 'var(--radius-md)',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 'var(--spacing-sm)',
-          }}>
-            <i className="fas fa-microchip" style={{ color: 'var(--color-warning)' }} />
-            <span style={{ color: 'var(--color-warning)', fontSize: '0.8125rem' }}>
+          <div className="card nip-warn mb-md">
+            <i className="fas fa-microchip text-warning" />
+            <span className="text-warning text-sm">
               {targetLabel}. Install only on nodes where you want this build to run.
               {hardwareTarget && ` Targets: ${humanTargetLabel(hardwareTarget).replace(' build', '')}.`}
             </span>
@@ -472,7 +455,7 @@ export default function NodeInstallPicker({
         )}
 
         {noNodes ? (
-          <div className="empty-state" style={{ padding: 'var(--spacing-xl) 0' }}>
+          <div className="empty-state">
             <div className="empty-state-icon"><i className="fas fa-server" /></div>
             <h3 className="empty-state-title">No backend nodes available</h3>
             <p className="empty-state-text">
@@ -486,8 +469,8 @@ export default function NodeInstallPicker({
         ) : (
           <>
             {/* Filter row */}
-            <div style={{ display: 'flex', gap: 'var(--spacing-sm)', alignItems: 'center', marginBottom: 'var(--spacing-sm)', flexWrap: 'wrap' }}>
-              <div className="search-bar" style={{ flex: 1, minWidth: 180 }}>
+            <div className="hstack mb-sm">
+              <div className="search-bar flex-1 min-w-180">
                 <i className="fas fa-search search-icon" />
                 <input
                   ref={headerInputRef}
@@ -512,20 +495,19 @@ export default function NodeInstallPicker({
 
             {/* Variant override (auto-resolving only) */}
             {backend.isMeta && concreteVariants.length > 0 && (
-              <div style={{ marginBottom: 'var(--spacing-sm)' }}>
+              <div className="mb-sm">
                 <button
                   type="button"
-                  className="btn btn-ghost btn-sm"
+                  className="btn btn-ghost btn-sm pill-tiny"
                   onClick={() => setOverrideExpanded(v => !v)}
                   aria-expanded={overrideExpanded}
-                  style={{ padding: '4px 8px' }}
                 >
-                  <i className={`fas fa-chevron-${overrideExpanded ? 'down' : 'right'}`} style={{ marginRight: 4, fontSize: '0.625rem' }} />
+                  <i className={`fas fa-chevron-${overrideExpanded ? 'down' : 'right'} icon-before text-xs`} />
                   Override variant for selected nodes…
                 </button>
                 {overrideExpanded && (
-                  <div className="card" style={{ marginTop: 4, padding: 'var(--spacing-sm) var(--spacing-md)' }}>
-                    <p style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)', marginTop: 0, marginBottom: 'var(--spacing-xs)' }}>
+                  <div className="card mt-xs" style={{ padding: 'var(--spacing-sm) var(--spacing-md)' }}>
+                    <p className="text-xs text-secondary mt-0 mb-xs">
                       By default each node picks its own variant. Override to install one specific variant on every selected node — useful when GPU detection fails on a node and you want the CPU build there instead.
                     </p>
                     <SearchableSelect
@@ -541,11 +523,11 @@ export default function NodeInstallPicker({
             )}
 
             {/* Node table */}
-            <div className="table-container" style={{ marginBottom: 'var(--spacing-sm)', maxHeight: '40vh', overflowY: 'auto' }}>
-              <table className="table" style={{ margin: 0 }}>
+            <div className="table-container nip-scroll mb-sm">
+              <table className="table m-0">
                 <thead>
                   <tr>
-                    <th style={{ width: 28 }}>
+                    <th className="w-28">
                       <input
                         type="checkbox"
                         aria-label="Select all visible"
@@ -591,18 +573,15 @@ export default function NodeInstallPicker({
                           />
                         </td>
                         <td>
-                          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-                            <span style={{ fontWeight: 500, fontSize: '0.875rem' }}>{node.name}</span>
+                          <div className="stack stack--xs">
+                            <span className="text-base fw-medium">{node.name}</span>
                             {node.labels && Object.keys(node.labels).length > 0 && (
-                              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
+                              <div className="nip-labels">
                                 {Object.entries(node.labels).slice(0, 3).map(([k, v]) => (
-                                  <span key={k} className="cell-mono" style={{
-                                    padding: '1px 5px', borderRadius: 'var(--radius-sm)', fontSize: '0.6875rem',
-                                    background: 'var(--color-bg-tertiary)', border: '1px solid var(--color-border-subtle)',
-                                  }}>{k}={v}</span>
+                                  <span key={k} className="cell-mono nip-label">{k}={v}</span>
                                 ))}
                                 {Object.keys(node.labels).length > 3 && (
-                                  <span className="cell-muted" style={{ fontSize: '0.6875rem' }}>
+                                  <span className="cell-muted text-xs">
                                     +{Object.keys(node.labels).length - 3}
                                   </span>
                                 )}
@@ -611,13 +590,13 @@ export default function NodeInstallPicker({
                           </div>
                         </td>
                         <td>
-                          <span style={{ fontSize: '0.8125rem' }}>
+                          <span className="text-sm">
                             {STATUS_LABELS[node.status] || node.status}
                           </span>
                         </td>
-                        <td style={{ fontSize: '0.8125rem', fontFamily: 'var(--font-mono)', color: 'var(--color-text-secondary)' }}>
+                        <td className="cell-mono text-secondary">
                           {totalVRAM ? (
-                            <>{vendor && <span style={{ marginRight: 4 }}>{vendor}</span>}{totalVRAM}</>
+                            <>{vendor && <span className="icon-before">{vendor}</span>}{totalVRAM}</>
                           ) : totalRAM ? (
                             <span>CPU · {totalRAM}</span>
                           ) : <span className="cell-muted">—</span>}
@@ -625,11 +604,11 @@ export default function NodeInstallPicker({
                         <td>
                           {rowState?.status === 'installing' ? (
                             <span className="badge badge-info">
-                              <i className="fas fa-spinner fa-spin" style={{ marginRight: 4 }} />Installing
+                              <i className="fas fa-spinner fa-spin icon-before" />Installing
                             </span>
                           ) : rowState?.status === 'done' ? (
                             <span className="badge badge-success">
-                              <i className="fas fa-check" style={{ marginRight: 4 }} />Installed
+                              <i className="fas fa-check icon-before" />Installed
                             </span>
                           ) : rowState?.status === 'error' ? (
                             <button
@@ -637,21 +616,21 @@ export default function NodeInstallPicker({
                               className="badge badge-error"
                               title={rowState.error}
                               aria-describedby={`err-${node.id}`}
-                              style={{ border: 'none', cursor: 'help' }}
+                              className="btn-help"
                             >
-                              <i className="fas fa-exclamation-triangle" style={{ marginRight: 4 }} />Failed
-                              <span id={`err-${node.id}`} style={{ position: 'absolute', left: -9999 }}>{rowState.error}</span>
+                              <i className="fas fa-exclamation-triangle icon-before" />Failed
+                              <span id={`err-${node.id}`} className="sr-offscreen">{rowState.error}</span>
                             </button>
                           ) : suit === 'installed' ? (
-                            <span className="badge" style={{ background: 'var(--color-bg-tertiary)', color: 'var(--color-text-muted)' }}>
+                            <span className="badge chip-neutral">
                               Installed
                             </span>
                           ) : suit === 'override' ? (
                             <span className="badge badge-warning">
-                              <i className="fas fa-exclamation-circle" style={{ marginRight: 4 }} />Override
+                              <i className="fas fa-exclamation-circle icon-before" />Override
                             </span>
                           ) : (
-                            <span className="badge badge-success" style={{ background: 'var(--color-success-light)', color: 'var(--color-success)' }}>
+                            <span className="badge badge-success badge-success--soft">
                               Compatible
                             </span>
                           )}
@@ -661,7 +640,7 @@ export default function NodeInstallPicker({
                   })}
                   {filteredNodes.length === 0 && (
                     <tr>
-                      <td colSpan={5} style={{ textAlign: 'center', padding: 'var(--spacing-md)', color: 'var(--color-text-muted)' }}>
+                      <td colSpan={5} className="inline-empty">
                         No nodes match the current filters.
                       </td>
                     </tr>
@@ -671,29 +650,22 @@ export default function NodeInstallPicker({
             </div>
 
             {pendingCount > 0 && (
-              <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 0, marginBottom: 'var(--spacing-sm)' }}>
-                +{pendingCount} awaiting approval — <a href="/app/nodes" style={{ color: 'var(--color-primary)' }}>approve from Nodes</a>.
+              <p className="text-meta mt-0 mb-sm">
+                +{pendingCount} awaiting approval — <a href="/app/nodes" className="text-primary">approve from Nodes</a>.
               </p>
             )}
 
             {/* Mismatch confirm */}
             {showMismatchConfirm && (
-              <div className="card" style={{
-                marginBottom: 'var(--spacing-sm)',
-                padding: 'var(--spacing-md)',
-                background: 'var(--color-warning-light)',
-                border: '1px solid var(--color-warning-border)',
-                borderRadius: 'var(--radius-md)',
-              }}>
-                <p style={{ marginTop: 0, marginBottom: 'var(--spacing-sm)', color: 'var(--color-warning)', fontSize: '0.875rem' }}>
+              <div className="card nip-warn nip-warn--block mb-sm">
+                <p className="text-base text-warning mt-0 mb-sm">
                   Installing {targetLabel.toLowerCase()} on {counts.overrides} node{counts.overrides === 1 ? '' : 's'} that don't match. Those nodes will run inference on the chosen build, not their native GPU. Continue?
                 </p>
-                <div style={{ display: 'flex', gap: 'var(--spacing-sm)', justifyContent: 'flex-end' }}>
+                <div className="hstack hstack--end">
                   <button className="btn btn-secondary btn-sm" type="button" onClick={() => setShowMismatchConfirm(false)}>
                     Cancel
                   </button>
-                  <button className="btn btn-primary btn-sm" type="button" onClick={submit}
-                    style={{ background: 'var(--color-warning)', borderColor: 'var(--color-warning)' }}>
+                  <button className="btn btn-primary btn-sm btn--warning" type="button" onClick={submit}>
                     Install on {targetLabel.replace(' build', '')}
                   </button>
                 </div>
@@ -704,20 +676,13 @@ export default function NodeInstallPicker({
       </div>
 
       {!noNodes && (
-        <div style={{
-          padding: 'var(--spacing-md) var(--spacing-lg)',
-          borderTop: '1px solid var(--color-border-subtle)',
-          display: 'flex',
-          alignItems: 'center',
-          gap: 'var(--spacing-sm)',
-          flexWrap: 'wrap',
-        }}>
-          <div style={{ flex: 1, fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>
+        <div className="nip-bar nip-bar--foot">
+          <div className="flex-1 text-sub">
             {totalAttempted > 0 ? (
               <>
                 {doneCount} of {totalAttempted} done
                 {errorCount > 0 && (
-                  <> · <span className="badge badge-error" style={{ fontSize: '0.6875rem' }}>{errorCount} failed</span></>
+                  <> · <span className="badge badge-error text-xs">{errorCount} failed</span></>
                 )}
               </>
             ) : (
diff --git a/core/http/react-ui/src/components/PatternListEditor.jsx b/core/http/react-ui/src/components/PatternListEditor.jsx
index a8965246cd99..e0122286ac35 100644
--- a/core/http/react-ui/src/components/PatternListEditor.jsx
+++ b/core/http/react-ui/src/components/PatternListEditor.jsx
@@ -30,14 +30,14 @@ export default function PatternListEditor({ value, onChange }) {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: '100%' }}>
-      <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+      <div className="text-meta">
         Restricted regex: literals, <code>[…]</code> classes, <code>\w \d \s</code>, <code>?*+{'{m,n}'}</code>, anchors.
         Each pattern must contain a fixed literal run of ≥3 characters (e.g. <code>sk-prefix-</code>);
         <code>.</code> and capturing groups are not allowed. Matches report under the pattern name.
       </div>
 
       {rows.length === 0 && (
-        <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+        <div className="text-meta">
           No custom patterns. Enable built-ins above, or add a pattern for an internal credential
           format (e.g. <code>tok-[A-Za-z0-9]{'{32,64}'}</code>).
         </div>
@@ -98,8 +98,7 @@ export default function PatternListEditor({ value, onChange }) {
         </div>
       ))}
 
-      <button type="button" className="btn btn-secondary btn-sm" onClick={add}
-        style={{ alignSelf: 'flex-start', fontSize: '0.75rem' }}>
+      <button type="button" className="btn btn-secondary btn-sm self-start text-xs" onClick={add}>
         <i className="fas fa-plus" /> Add pattern
       </button>
     </div>
diff --git a/core/http/react-ui/src/components/ResourceMonitor.jsx b/core/http/react-ui/src/components/ResourceMonitor.jsx
index c4555af1daf5..ea5198e7fde3 100644
--- a/core/http/react-ui/src/components/ResourceMonitor.jsx
+++ b/core/http/react-ui/src/components/ResourceMonitor.jsx
@@ -5,7 +5,7 @@ export default function ResourceMonitor() {
   const { resources, loading } = useResources()
 
   if (loading || !resources) {
-    return <div className="resource-monitor" style={{ color: 'var(--color-text-muted)', fontSize: '0.8125rem' }}>Loading resources...</div>
+    return <div className="resource-monitor text-note">Loading resources...</div>
   }
 
   const gpus = resources.gpus || []
@@ -15,8 +15,8 @@ export default function ResourceMonitor() {
 
   return (
     <div className="resource-monitor">
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-sm)' }}>
-        <h3 className="resource-monitor-title" style={{ margin: 0 }}>
+      <div className="hstack hstack--between mb-sm">
+        <h3 className="resource-monitor-title m-0">
           <i className="fas fa-chart-bar" /> System Resources
         </h3>
         <div style={{ display: 'flex', gap: 'var(--spacing-xs)', alignItems: 'center' }}>
@@ -48,7 +48,7 @@ export default function ResourceMonitor() {
                   )}
                 </div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-xs)' }}>
-                  <div className="resource-bar-container" style={{ flex: 1 }}>
+                  <div className="resource-bar-container flex-1">
                     <div className="resource-bar" style={{ width: `${pct}%`, background: color }} />
                   </div>
                   <span style={{ fontSize: '0.8125rem', fontWeight: 600, fontFamily: 'var(--font-mono)', color, minWidth: '3em', textAlign: 'right' }}>
@@ -73,7 +73,7 @@ export default function ResourceMonitor() {
             </span>
           </div>
           <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-xs)' }}>
-            <div className="resource-bar-container" style={{ flex: 1 }}>
+            <div className="resource-bar-container flex-1">
               <div className="resource-bar" style={{ width: `${ram.usage_percent || 0}%`, background: percentColor(ram.usage_percent || 0) }} />
             </div>
             <span style={{ fontSize: '0.8125rem', fontWeight: 600, fontFamily: 'var(--font-mono)', color: percentColor(ram.usage_percent || 0), minWidth: '3em', textAlign: 'right' }}>
@@ -91,7 +91,7 @@ export default function ResourceMonitor() {
       {isGpu && aggregate.gpu_count > 1 && (
         <div style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)', marginTop: 'var(--spacing-sm)', display: 'flex', justifyContent: 'space-between' }}>
           <span>Total VRAM</span>
-          <span style={{ fontFamily: 'var(--font-mono)' }}>
+          <span className="text-mono">
             {formatBytes(aggregate.used_memory)} / {formatBytes(aggregate.total_memory)} ({aggregate.usage_percent?.toFixed(1)}%)
           </span>
         </div>
diff --git a/core/http/react-ui/src/components/RouterCandidatesEditor.jsx b/core/http/react-ui/src/components/RouterCandidatesEditor.jsx
index 5d744c8d4639..a90bc3a587d0 100644
--- a/core/http/react-ui/src/components/RouterCandidatesEditor.jsx
+++ b/core/http/react-ui/src/components/RouterCandidatesEditor.jsx
@@ -60,9 +60,8 @@ export default function RouterCandidatesEditor({ value, onChange }) {
 
       <button
         type="button"
-        className="btn btn-secondary btn-sm"
+        className="btn btn-secondary btn-sm self-start"
         onClick={add}
-        style={{ alignSelf: 'flex-start' }}
       >
         <i className="fas fa-plus" /> Add candidate
       </button>
@@ -95,7 +94,7 @@ function CandidateRow({ index, total, row, knownLabels, knownLabelSet, onChange,
       }}
     >
       <div style={{ display: 'flex', gap: 4, alignItems: 'center', fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
-        <span style={{ fontWeight: 600 }}>#{index + 1}</span>
+        <span className="fw-semibold">#{index + 1}</span>
         <button
           type="button"
           className="btn btn-secondary btn-sm"
diff --git a/core/http/react-ui/src/components/RouterPoliciesEditor.jsx b/core/http/react-ui/src/components/RouterPoliciesEditor.jsx
index b323bc288737..7b5416370b57 100644
--- a/core/http/react-ui/src/components/RouterPoliciesEditor.jsx
+++ b/core/http/react-ui/src/components/RouterPoliciesEditor.jsx
@@ -55,9 +55,8 @@ export default function RouterPoliciesEditor({ value, onChange }) {
 
       <button
         type="button"
-        className="btn btn-secondary btn-sm"
+        className="btn btn-secondary btn-sm self-start"
         onClick={add}
-        style={{ alignSelf: 'flex-start' }}
       >
         <i className="fas fa-plus" /> Add policy
       </button>
@@ -79,21 +78,19 @@ function PolicyRow({ row, duplicate, onChange, onRemove }) {
       }}
     >
       <input
-        className="input"
+        className="input text-mono text-sm"
         type="text"
         placeholder="label (e.g. code-generation)"
         value={row?.label || ''}
         onChange={(e) => onChange((r) => ({ ...r, label: e.target.value }))}
-        style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}
         title={duplicate ? 'Duplicate label — candidates won\'t be able to distinguish them' : ''}
       />
       <input
-        className="input"
+        className="input text-sm"
         type="text"
         placeholder="short description fed verbatim to the classifier prompt"
         value={row?.description || ''}
         onChange={(e) => onChange((r) => ({ ...r, description: e.target.value }))}
-        style={{ fontSize: '0.8125rem' }}
       />
       <button
         type="button"
diff --git a/core/http/react-ui/src/components/SearchableSelect.jsx b/core/http/react-ui/src/components/SearchableSelect.jsx
index 52430adabc27..9f154e1c366a 100644
--- a/core/http/react-ui/src/components/SearchableSelect.jsx
+++ b/core/http/react-ui/src/components/SearchableSelect.jsx
@@ -160,7 +160,7 @@ export default function SearchableSelect({
                 style={itemStyle(!value, focusIndex === -1 && enterTarget?.type === 'all')}
                 onMouseEnter={focusIndex !== -1 ? () => setFocusIndex(-1) : undefined}
               >
-                <span style={{ flex: 1 }}>{allOption}</span>
+                <span className="flex-1">{allOption}</span>
                 {enterTarget?.type === 'all' && (
                   <span style={{ marginLeft: 'auto', color: 'var(--color-text-muted)', fontSize: '0.75rem' }}>↵</span>
                 )}
@@ -201,7 +201,7 @@ export default function SearchableSelect({
                   style={itemStyle(isActive, isFocused)}
                   onMouseEnter={focusIndex !== i ? () => setFocusIndex(i) : undefined}
                 >
-                  <span style={{ flex: 1 }}>{o.label}</span>
+                  <span className="flex-1">{o.label}</span>
                   {o.badge && (
                     <span
                       title={o.badgeTooltip || undefined}
diff --git a/core/http/react-ui/src/components/SimplePowerSwitch.jsx b/core/http/react-ui/src/components/SimplePowerSwitch.jsx
index 0393b11cf855..7cd1f171661d 100644
--- a/core/http/react-ui/src/components/SimplePowerSwitch.jsx
+++ b/core/http/react-ui/src/components/SimplePowerSwitch.jsx
@@ -13,11 +13,10 @@ export default function SimplePowerSwitch({ value, onChange, disabled = false })
 
   return (
     <div
-      className="segmented"
+      className="segmented mb-0"
       role="tablist"
       aria-label="Import form mode"
       data-testid="simple-power-switch"
-      style={{ marginBottom: 0 }}
     >
       <button
         type="button"
diff --git a/core/http/react-ui/src/components/UnifiedMCPDropdown.jsx b/core/http/react-ui/src/components/UnifiedMCPDropdown.jsx
index 26983a496f7c..7482f6c6e759 100644
--- a/core/http/react-ui/src/components/UnifiedMCPDropdown.jsx
+++ b/core/http/react-ui/src/components/UnifiedMCPDropdown.jsx
@@ -183,33 +183,30 @@ export default function UnifiedMCPDropdown({
                 <div style={{ padding: '8px 10px', borderBottom: '1px solid var(--color-border)' }}>
                   <input
                     type="text"
-                    className="input input-sm"
+                    className="input input-sm w-full mb-xs"
                     placeholder="Server URL (e.g. https://mcp.example.com/sse)"
                     value={url}
                     onChange={e => setUrl(e.target.value)}
-                    style={{ width: '100%', marginBottom: 'var(--spacing-xs)' }}
                   />
                   <input
                     type="text"
-                    className="input input-sm"
+                    className="input input-sm w-full mb-xs"
                     placeholder="Name (optional)"
                     value={name}
                     onChange={e => setName(e.target.value)}
-                    style={{ width: '100%', marginBottom: 'var(--spacing-xs)' }}
                   />
                   <input
                     type="password"
-                    className="input input-sm"
+                    className="input input-sm w-full mb-xs"
                     placeholder="Auth token (optional)"
                     value={authToken}
                     onChange={e => setAuthToken(e.target.value)}
-                    style={{ width: '100%', marginBottom: 'var(--spacing-xs)' }}
                   />
                   <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.8rem', marginBottom: '6px' }}>
                     <input type="checkbox" checked={useProxy} onChange={e => setUseProxy(e.target.checked)} />
                     Use CORS proxy
                   </label>
-                  <div style={{ display: 'flex', gap: 'var(--spacing-xs)', justifyContent: 'flex-end' }}>
+                  <div className="hstack hstack--xs hstack--end">
                     <button type="button" className="btn btn-sm btn-secondary" onClick={() => setAddDialog(false)}>Cancel</button>
                     <button type="button" className="btn btn-sm btn-primary" onClick={handleAddClient} disabled={!url.trim()}>Add</button>
                   </div>
@@ -229,7 +226,7 @@ export default function UnifiedMCPDropdown({
                         checked={isActive}
                         onChange={() => onClientToggle(server.id)}
                       />
-                      <div className="chat-mcp-server-info" style={{ flex: 1 }}>
+                      <div className="chat-mcp-server-info flex-1">
                         <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                           <span className={`chat-client-mcp-status chat-client-mcp-status-${status}`} />
                           <span className="chat-mcp-server-name">{server.name}</span>
@@ -272,8 +269,7 @@ export default function UnifiedMCPDropdown({
                       </label>
                       <input
                         type="text"
-                        className="input input-sm"
-                        style={{ width: '100%' }}
+                        className="input input-sm w-full"
                         placeholder={arg.description || arg.name}
                         value={promptArgsValues[arg.name] || ''}
                         onChange={e => onPromptArgsChange(arg.name, e.target.value)}
diff --git a/core/http/react-ui/src/components/UserGroupSection.jsx b/core/http/react-ui/src/components/UserGroupSection.jsx
index 42b8e30f3b02..14af2a2e471b 100644
--- a/core/http/react-ui/src/components/UserGroupSection.jsx
+++ b/core/http/react-ui/src/components/UserGroupSection.jsx
@@ -22,7 +22,7 @@ export default function UserGroupSection({ title, userGroups, userMap, currentUs
   const totalUsers = userIds.length
 
   return (
-    <div style={{ marginTop: 'var(--spacing-lg)' }}>
+    <div className="mt-lg">
       <style>{`
         .ugs-header {
           display: flex;
@@ -155,7 +155,7 @@ function UserSubSection({ uid, displayName, initials, avatarUrl, count, itemKey,
         onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpen(v => !v) } }}
         aria-expanded={open}
       >
-        <i className={`fas fa-chevron-right ugs-chevron ${open ? 'open' : ''}`} style={{ fontSize: '0.625rem' }} />
+        <i className={`fas fa-chevron-right ugs-chevron ${open ? 'open' : ''} text-xs`} />
         <div className="ugs-avatar">
           {avatarUrl ? <img src={avatarUrl} alt="" /> : initials}
         </div>
diff --git a/core/http/react-ui/src/components/nodes/CapacityEditor.jsx b/core/http/react-ui/src/components/nodes/CapacityEditor.jsx
index ffe79b86234b..2501d8127b89 100644
--- a/core/http/react-ui/src/components/nodes/CapacityEditor.jsx
+++ b/core/http/react-ui/src/components/nodes/CapacityEditor.jsx
@@ -144,7 +144,7 @@ export default function CapacityEditor({ node, loadedModelCounts, onUpdate, conf
   }, [node, onUpdate, addToast])
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-md)' }}>
+    <div className="stack">
     <div style={{
       display: 'flex', alignItems: 'flex-start', gap: 'var(--spacing-md)',
     }}>
@@ -177,19 +177,17 @@ export default function CapacityEditor({ node, loadedModelCounts, onUpdate, conf
                 }}
               />
               <button
-                className="btn btn-primary btn-sm"
+                className="btn btn-primary btn-sm min-h-control"
                 onClick={save}
                 disabled={saving}
-                style={{ minHeight: 32 }}
                 aria-label="Save replica capacity"
               >
                 {saving ? <LoadingSpinner size="xs" /> : <><i className="fas fa-check" /> Save</>}
               </button>
               <button
-                className="btn btn-secondary btn-sm"
+                className="btn btn-secondary btn-sm min-h-control"
                 onClick={cancel}
                 disabled={saving}
-                style={{ minHeight: 32 }}
                 aria-label="Cancel"
               >
                 Cancel
@@ -198,8 +196,7 @@ export default function CapacityEditor({ node, loadedModelCounts, onUpdate, conf
           ) : (
             <>
               <span
-                className="cell-mono"
-                style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}
+                className="cell-mono text-sub"
               >
                 {current}
               </span>
@@ -236,8 +233,7 @@ export default function CapacityEditor({ node, loadedModelCounts, onUpdate, conf
                   disabled={resetting}
                   aria-label="Clear admin override and let the worker flag apply"
                   title="Clear override; the worker's --max-replicas-per-model flag will apply on the next re-registration"
-                  className="btn btn-secondary btn-sm"
-                  style={{ minHeight: 32 }}
+                  className="btn btn-secondary btn-sm min-h-control"
                 >
                   {resetting ? <LoadingSpinner size="xs" /> : <><i className="fas fa-undo" /> Reset</>}
                 </button>
@@ -288,19 +284,17 @@ export default function CapacityEditor({ node, loadedModelCounts, onUpdate, conf
                 }}
               />
               <button
-                className="btn btn-primary btn-sm"
+                className="btn btn-primary btn-sm min-h-control"
                 onClick={saveBudget}
                 disabled={budgetSaving}
-                style={{ minHeight: 32 }}
                 aria-label="Save VRAM budget"
               >
                 {budgetSaving ? <LoadingSpinner size="xs" /> : <><i className="fas fa-check" /> Save</>}
               </button>
               <button
-                className="btn btn-secondary btn-sm"
+                className="btn btn-secondary btn-sm min-h-control"
                 onClick={cancelBudget}
                 disabled={budgetSaving}
-                style={{ minHeight: 32 }}
                 aria-label="Cancel"
               >
                 Cancel
@@ -309,16 +303,14 @@ export default function CapacityEditor({ node, loadedModelCounts, onUpdate, conf
           ) : (
             <>
               <span
-                className="cell-mono"
-                style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}
+                className="cell-mono text-sub"
               >
                 {hasBudget ? currentBudget : 'none'}
               </span>
               {hasBudget && budgetBytes > 0 && (
                 <span
-                  className="cell-mono"
+                  className="cell-mono text-meta"
                   title="Resolved allocation ceiling out of this node's total VRAM"
-                  style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}
                 >
                   {formatVRAM(budgetBytes)} / {formatVRAM(node.total_vram)}
                 </span>
@@ -342,8 +334,7 @@ export default function CapacityEditor({ node, loadedModelCounts, onUpdate, conf
                   disabled={budgetClearing}
                   aria-label="Clear the VRAM budget for this node"
                   title="Clear the VRAM budget; this node's full VRAM becomes available again"
-                  className="btn btn-secondary btn-sm"
-                  style={{ minHeight: 32 }}
+                  className="btn btn-secondary btn-sm min-h-control"
                 >
                   {budgetClearing ? <LoadingSpinner size="xs" /> : <><i className="fas fa-undo" /> Clear</>}
                 </button>
diff --git a/core/http/react-ui/src/components/nodes/ClusterPulse.jsx b/core/http/react-ui/src/components/nodes/ClusterPulse.jsx
index c465f3b7213e..f66ffa1ed437 100644
--- a/core/http/react-ui/src/components/nodes/ClusterPulse.jsx
+++ b/core/http/react-ui/src/components/nodes/ClusterPulse.jsx
@@ -10,8 +10,8 @@ export default function ClusterPulse({ nodes }) {
   return (
     <p className="cluster-pulse">
       <span className="cluster-pulse__strong">{total} {total === 1 ? 'node' : 'nodes'}</span>
-      {' · '}<span style={{ color: 'var(--color-success)' }}>{healthy} healthy</span>
-      {draining > 0 && <>{' · '}<span style={{ color: 'var(--color-warning)' }}>{draining} draining</span></>}
+      {' · '}<span className="text-success">{healthy} healthy</span>
+      {draining > 0 && <>{' · '}<span className="text-warning">{draining} draining</span></>}
       {vramStr && <>{' · '}{vramStr} VRAM in use</>}
     </p>
   )
diff --git a/core/http/react-ui/src/components/nodes/KeyValueChips.jsx b/core/http/react-ui/src/components/nodes/KeyValueChips.jsx
index f4b53a7c76ed..8dcc926c2423 100644
--- a/core/http/react-ui/src/components/nodes/KeyValueChips.jsx
+++ b/core/http/react-ui/src/components/nodes/KeyValueChips.jsx
@@ -66,22 +66,20 @@ export default function KeyValueChips({ pairs, onAdd, onRemove, placeholderKey =
       )}
       <div style={{ display: 'flex', gap: 'var(--spacing-xs)', alignItems: 'stretch' }}>
         <input
-          className="input"
+          className="input flex-1"
           type="text"
           placeholder={placeholderKey}
           value={k}
           onChange={e => setK(e.target.value)}
           onKeyDown={onKeyDown}
-          style={{ flex: 1 }}
         />
         <input
-          className="input"
+          className="input flex-1"
           type="text"
           placeholder={placeholderValue}
           value={v}
           onChange={e => setV(e.target.value)}
           onKeyDown={onKeyDown}
-          style={{ flex: 1 }}
         />
         <button
           type="button"
diff --git a/core/http/react-ui/src/pages/Account.jsx b/core/http/react-ui/src/pages/Account.jsx
index 84d48c5787fa..a269fdd7b2cd 100644
--- a/core/http/react-ui/src/pages/Account.jsx
+++ b/core/http/react-ui/src/pages/Account.jsx
@@ -214,7 +214,7 @@ function SecurityTab({ addToast }) {
         </SettingRow>
         {weakWarning && (
           <SettingRow label="" description="">
-            <div role="alert" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)' }}>
+            <div role="alert" className="stack stack--xs">
               <div className="login-warning">{weakWarning}</div>
               <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)', fontSize: '0.875rem' }}>
                 <input
@@ -337,7 +337,7 @@ function ApiKeysTab({ addToast }) {
   return (
     <div>
       {/* Create key form */}
-      <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
+      <div className="card mb-md">
         <form onSubmit={handleCreate}>
           <SettingRow label={t('account.apiKeys.create')} description={t('account.apiKeys.createDescription')}>
             <div className="account-input-row">
diff --git a/core/http/react-ui/src/pages/AgentChat.jsx b/core/http/react-ui/src/pages/AgentChat.jsx
index 4ccea33a89b8..34ccb5b6f5fe 100644
--- a/core/http/react-ui/src/pages/AgentChat.jsx
+++ b/core/http/react-ui/src/pages/AgentChat.jsx
@@ -44,7 +44,7 @@ function AgentActivityGroup({ items }) {
 
   return (
     <div className="chat-message chat-message-assistant">
-      <div className="chat-message-avatar" style={{ background: 'var(--color-bg-tertiary)', color: 'var(--color-text-muted)' }}>
+      <div className="chat-message-avatar chip-neutral">
         <i className="fas fa-cogs" />
       </div>
       <div className="chat-activity-group">
@@ -60,7 +60,7 @@ function AgentActivityGroup({ items }) {
             {items.map((item, idx) => (
               <div key={idx} className="chat-activity-item">
                 <span className="chat-activity-item-label">{new Date(item.timestamp).toLocaleTimeString()}</span>
-                <div className="chat-activity-item-content" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{item.content}</div>
+                <div className="chat-activity-item-content wrap-anywhere">{item.content}</div>
               </div>
             ))}
           </div>
@@ -456,7 +456,7 @@ export default function AgentChat() {
       {/* Conversation sidebar */}
       <div className={`chat-sidebar${sidebarOpen ? '' : ' hidden'}`}>
         <div className="chat-sidebar-header">
-          <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={() => addConversation()}>
+          <button className="btn btn-primary btn-sm flex-1" onClick={() => addConversation()}>
             <i className="fas fa-plus" /> New Chat
           </button>
           <button
@@ -570,7 +570,7 @@ export default function AgentChat() {
           <i className={`fas fa-${sidebarOpen ? 'angles-left' : 'angles-right'}`} />
         </button>
         <span className="chat-header-title">
-          <i className="fas fa-robot" style={{ marginRight: 'var(--spacing-xs)' }} />
+          <i className="fas fa-robot icon-before" />
           {name}
         </span>
         <div className="chat-header-actions">
@@ -648,7 +648,7 @@ export default function AgentChat() {
                 <div className="chat-message-bubble">
                   <div className="chat-message-content">
                     {role === 'user' ? (
-                      <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{msg.content}</div>
+                      <div className="wrap-anywhere">{msg.content}</div>
                     ) : (
                       <div dangerouslySetInnerHTML={{
                         __html: canvasMode
@@ -688,7 +688,7 @@ export default function AgentChat() {
             <div className="chat-message-bubble">
               {streamReasoning && (
                 <details className="chat-activity-group" open={!streamContent} style={{ marginBottom: streamContent ? 'var(--spacing-sm)' : 0 }}>
-                  <summary className="chat-activity-toggle" style={{ cursor: 'pointer' }}>
+                  <summary className="chat-activity-toggle clickable">
                     <span className={`chat-activity-summary${!streamContent ? ' chat-activity-shimmer' : ''}`}>
                       {streamContent ? 'Thinking' : 'Thinking...'}
                     </span>
@@ -702,7 +702,7 @@ export default function AgentChat() {
                 </details>
               )}
               {streamToolCalls.length > 0 && (
-                <div className="chat-activity-group" style={{ marginBottom: 'var(--spacing-sm)' }}>
+                <div className="chat-activity-group mb-sm">
                   {streamToolCalls.map((tc, idx) => (
                     <details key={idx} className="chat-activity-item chat-activity-tool-call" style={{ padding: 'var(--spacing-xs) var(--spacing-sm)' }} open={!tc.result}>
                       <summary className="chat-activity-item-label" style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)' }}>
@@ -737,7 +737,7 @@ export default function AgentChat() {
         )}
         {processing && !streamReasoning && !streamContent && streamToolCalls.length === 0 && (
           <div className="chat-message chat-message-assistant">
-            <div className="chat-message-avatar" style={{ background: 'var(--color-bg-tertiary)', color: 'var(--color-text-muted)' }}>
+            <div className="chat-message-avatar chip-neutral">
               <i className="fas fa-cogs" />
             </div>
             <div className="chat-activity-group chat-activity-streaming">
diff --git a/core/http/react-ui/src/pages/AgentCreate.jsx b/core/http/react-ui/src/pages/AgentCreate.jsx
index 533b45e0f049..ef11a99d55b4 100644
--- a/core/http/react-ui/src/pages/AgentCreate.jsx
+++ b/core/http/react-ui/src/pages/AgentCreate.jsx
@@ -60,7 +60,7 @@ function buildStdioJson(list) {
 function FormField({ field, value, onChange, disabled }) {
   const id = `field-${field.name}`
   const label = field.required
-    ? <>{field.label} <span style={{ color: 'var(--color-error)' }}>*</span></>
+    ? <>{field.label} <span className="text-error">*</span></>
     : field.label
 
   switch (field.type) {
@@ -77,7 +77,7 @@ function FormField({ field, value, onChange, disabled }) {
     case 'select':
       return (
         <SettingRow label={label} description={field.helpText}>
-          <select id={id} className="input" style={{ width: 200 }} value={value ?? ''} onChange={(e) => onChange(field.name, e.target.value)} disabled={disabled}>
+          <select id={id} className="input col-w-200" value={value ?? ''} onChange={(e) => onChange(field.name, e.target.value)} disabled={disabled}>
             <option value="">— Select —</option>
             {(field.options || []).map(opt => (
               <option key={opt.value} value={opt.value}>{opt.label}</option>
@@ -87,7 +87,7 @@ function FormField({ field, value, onChange, disabled }) {
       )
     case 'textarea':
       return (
-        <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
+        <div className="list-row">
           <div style={{ fontSize: '0.875rem', fontWeight: 500, marginBottom: 4 }}>{label}</div>
           {field.helpText && <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginBottom: 'var(--spacing-xs)' }}>{field.helpText}</div>}
           <textarea
@@ -107,7 +107,7 @@ function FormField({ field, value, onChange, disabled }) {
       return (
         <SettingRow label={label} description={field.helpText}>
           <input
-            id={id} className="input" type="number" style={{ width: 120 }}
+            id={id} className="input col-w-120" type="number"
             value={value ?? ''} onChange={(e) => onChange(field.name, e.target.value)}
             placeholder={field.placeholder || ''} min={field.min} max={field.max} step={field.step}
             disabled={disabled}
@@ -184,8 +184,8 @@ function ConfigForm({ items, fieldGroups, onChange, onRemove, onAdd, itemType, t
         const fieldGroup = fieldGroups.find(g => g.name === typeName)
         const config = parseConfig(item)
         return (
-          <div key={index} className="card" style={{ marginBottom: 'var(--spacing-md)', padding: 'var(--spacing-md)' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--spacing-md)' }}>
+          <div key={index} className="card pad-md mb-md">
+            <div className="hstack hstack--between mb-md">
               <h4 style={{ margin: 0, fontWeight: 600 }}>{label} #{index + 1}</h4>
               <button type="button" className="btn btn-danger btn-sm" onClick={() => onRemove(index)}>
                 <i className="fas fa-times" />
@@ -199,7 +199,7 @@ function ConfigForm({ items, fieldGroups, onChange, onRemove, onAdd, itemType, t
             </div>
             {fieldGroup?.fields?.map(f => {
               const val = config[f.name] ?? ''
-              const fieldLabel = <>{f.label}{f.required && <span style={{ color: 'var(--color-error)' }}> *</span>}</>
+              const fieldLabel = <>{f.label}{f.required && <span className="text-error"> *</span>}</>
               if (f.type === 'checkbox') {
                 return (
                   <SettingRow key={f.name} label={fieldLabel} description={f.helpText}>
@@ -209,7 +209,7 @@ function ConfigForm({ items, fieldGroups, onChange, onRemove, onAdd, itemType, t
               }
               if (f.type === 'textarea') {
                 return (
-                  <div key={f.name} style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
+                  <div key={f.name} className="list-row">
                     <div style={{ fontSize: '0.875rem', fontWeight: 500, marginBottom: 4 }}>{fieldLabel}</div>
                     {f.helpText && <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginBottom: 'var(--spacing-xs)' }}>{f.helpText}</div>}
                     <textarea className="textarea" value={val} onChange={(e) => handleConfigFieldChange(index, f.name, e.target.value, 'text')} rows={3} placeholder={f.placeholder} />
@@ -219,7 +219,7 @@ function ConfigForm({ items, fieldGroups, onChange, onRemove, onAdd, itemType, t
               if (f.type === 'select') {
                 return (
                   <SettingRow key={f.name} label={fieldLabel} description={f.helpText}>
-                    <select className="input" style={{ width: 200 }} value={val} onChange={(e) => handleConfigFieldChange(index, f.name, e.target.value, 'text')}>
+                    <select className="input col-w-200" value={val} onChange={(e) => handleConfigFieldChange(index, f.name, e.target.value, 'text')}>
                       <option value="">— Select —</option>
                       {(f.options || []).map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
                     </select>
@@ -499,11 +499,11 @@ export default function AgentCreate() {
             {activeSection === 'AdvancedSettings' && form.enable_skills && availableSkills.length > 0 && (
               <div style={{ marginTop: 'var(--spacing-lg)', borderTop: '1px solid var(--color-border)', paddingTop: 'var(--spacing-lg)' }}>
                 <h4 className="agent-subsection-title">
-                  <i className="fas fa-puzzle-piece" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} />
+                  <i className="fas fa-puzzle-piece text-primary icon-before" />
                   Select Skills
                 </h4>
                 <p className="agent-section-desc">Choose which skills this agent can use. If none selected, all available skills are included.</p>
-                <div style={{ marginBottom: 'var(--spacing-sm)' }}>
+                <div className="mb-sm">
                   <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)', cursor: 'pointer', fontWeight: 600, fontSize: '0.85rem' }}>
                     <input
                       type="checkbox"
@@ -543,7 +543,7 @@ export default function AgentCreate() {
                         style={{ marginTop: '2px' }}
                       />
                       <div>
-                        <div style={{ fontWeight: 600, fontSize: '0.85rem' }}>{skill.name}</div>
+                        <div className="fw-semibold text-base">{skill.name}</div>
                         {skill.description && (
                           <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: '2px' }}>
                             {skill.description.length > 80 ? skill.description.slice(0, 80) + '...' : skill.description}
@@ -639,16 +639,16 @@ export default function AgentCreate() {
                 {renderFieldSection('MCP')}
 
             {/* STDIO Servers */}
-            <div style={{ marginTop: 'var(--spacing-lg)' }}>
+            <div className="mt-lg">
               <h4 className="agent-subsection-title">
-                <i className="fas fa-terminal" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} />
+                <i className="fas fa-terminal text-primary icon-before" />
                 STDIO Servers
               </h4>
               <p className="agent-section-desc">Local command-based MCP servers (e.g. docker run).</p>
               {stdioServers.map((server, idx) => (
-                <div key={idx} className="card" style={{ marginBottom: 'var(--spacing-md)', padding: 'var(--spacing-md)' }}>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--spacing-sm)' }}>
-                    <span style={{ fontWeight: 600, fontSize: '0.85rem' }}>Server #{idx + 1}</span>
+                <div key={idx} className="card pad-md mb-md">
+                  <div className="hstack hstack--between mb-sm">
+                    <span className="fw-semibold text-base">Server #{idx + 1}</span>
                     <button type="button" className="btn btn-danger btn-sm" onClick={() => removeStdioServer(idx)}>
                       <i className="fas fa-times" />
                     </button>
@@ -673,7 +673,7 @@ export default function AgentCreate() {
                     {(server.args || []).length === 0 && <p style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>No arguments.</p>}
                     {(server.args || []).map((arg, ai) => (
                       <div key={ai} style={{ display: 'flex', gap: 'var(--spacing-xs)', marginBottom: 'var(--spacing-xs)' }}>
-                        <input className="input" value={arg} onChange={(e) => updateArg(idx, ai, e.target.value)} placeholder="argument" style={{ flex: 1 }} />
+                        <input className="input flex-1" value={arg} onChange={(e) => updateArg(idx, ai, e.target.value)} placeholder="argument" />
                         <button type="button" className="btn btn-danger btn-sm" onClick={() => removeArg(idx, ai)}><i className="fas fa-times" /></button>
                       </div>
                     ))}
@@ -688,7 +688,7 @@ export default function AgentCreate() {
                     {(server.env || []).length === 0 && <p style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>No environment variables.</p>}
                     {(server.env || []).map((env, ei) => (
                       <div key={ei} style={{ display: 'flex', gap: 'var(--spacing-xs)', marginBottom: 'var(--spacing-xs)' }}>
-                        <input className="input" value={env} onChange={(e) => updateEnv(idx, ei, e.target.value)} placeholder="KEY=VALUE" style={{ flex: 1 }} />
+                        <input className="input flex-1" value={env} onChange={(e) => updateEnv(idx, ei, e.target.value)} placeholder="KEY=VALUE" />
                         <button type="button" className="btn btn-danger btn-sm" onClick={() => removeEnv(idx, ei)}><i className="fas fa-times" /></button>
                       </div>
                     ))}
@@ -701,23 +701,23 @@ export default function AgentCreate() {
             </div>
 
             {/* HTTP Servers */}
-            <div style={{ marginTop: 'var(--spacing-lg)' }}>
+            <div className="mt-lg">
               <h4 className="agent-subsection-title">
-                <i className="fas fa-globe" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} />
+                <i className="fas fa-globe text-primary icon-before" />
                 HTTP Servers
               </h4>
               <p className="agent-section-desc">MCP servers connected over HTTP.</p>
               {mcpHttpServers.map((server, idx) => (
-                <div key={idx} className="card" style={{ marginBottom: 'var(--spacing-md)', padding: 'var(--spacing-md)' }}>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--spacing-sm)' }}>
-                    <span style={{ fontWeight: 600, fontSize: '0.85rem' }}>HTTP Server #{idx + 1}</span>
+                <div key={idx} className="card pad-md mb-md">
+                  <div className="hstack hstack--between mb-sm">
+                    <span className="fw-semibold text-base">HTTP Server #{idx + 1}</span>
                     <button type="button" className="btn btn-danger btn-sm" onClick={() => removeMcpHttp(idx)}>
                       <i className="fas fa-times" />
                     </button>
                   </div>
                   {(meta?.MCPServers || [{ name: 'url', label: 'URL', type: 'text' }, { name: 'token', label: 'API Key', type: 'password' }]).map(f => (
                     <div key={f.name} className="form-group">
-                      <label className="form-label">{f.label}{f.required && <span style={{ color: 'var(--color-error)' }}> *</span>}</label>
+                      <label className="form-label">{f.label}{f.required && <span className="text-error"> *</span>}</label>
                       <input
                         className="input" type={f.type === 'password' ? 'password' : 'text'}
                         value={server[f.name] || ''} onChange={(e) => updateMcpHttp(idx, f.name, e.target.value)}
@@ -805,7 +805,7 @@ export default function AgentCreate() {
               className="btn btn-primary"
               style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none' }}
             >
-              <i className="fas fa-download" style={{ marginRight: 'var(--spacing-xs)' }} /> Export Agent
+              <i className="fas fa-download icon-before" /> Export Agent
             </a>
           </div>
         )
@@ -817,8 +817,8 @@ export default function AgentCreate() {
 
   if (loading) {
     return (
-      <div className="page page--narrow" style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}>
-        <i className="fas fa-spinner fa-spin" style={{ fontSize: '2rem', color: 'var(--color-primary)' }} />
+      <div className="page page--narrow loading-center">
+        <i className="fas fa-spinner fa-spin icon-xl text-primary" />
       </div>
     )
   }
@@ -942,8 +942,8 @@ export default function AgentCreate() {
       <PageHeader
         title={isEdit ? `Edit Agent: ${name}` : importedConfig ? 'Import Agent' : 'Create Agent'}
         actions={
-          <button className="btn btn-secondary btn-sm" onClick={() => navigate('/app/agents')}>
-            <i className="fas fa-arrow-left" /> Back
+          <button className="btn btn-secondary btn-sm fas fa-arrow-left" onClick={() => navigate('/app/agents')}>
+            <i /> Back
           </button>
         }
       />
@@ -951,7 +951,7 @@ export default function AgentCreate() {
       <form onSubmit={handleSubmit} noValidate>
         <div className="agent-form-container">
           <div className="agent-wizard-sidebar">
-            <div className="card" style={{ padding: 'var(--spacing-sm)' }}>
+            <div className="card pad-sm">
               <ul className="agent-wizard-nav">
                 {visibleSections.map(s => {
                   let count = 0
@@ -976,9 +976,9 @@ export default function AgentCreate() {
           </div>
 
           <div className="agent-form-content">
-            <div className="card" style={{ padding: 'var(--spacing-lg)' }}>
+            <div className="card pad-lg">
               <h3 className="agent-section-title">
-                <i className={`fas ${visibleSections.find(s => s.id === activeSection)?.icon || 'fa-cog'}`} style={{ color: 'var(--color-primary)' }} />
+                <i className={`fas ${visibleSections.find(s => s.id === activeSection)?.icon || 'fa-cog'} text-primary`} />
                 {visibleSections.find(s => s.id === activeSection)?.label || activeSection}
               </h3>
               {renderSection()}
diff --git a/core/http/react-ui/src/pages/AgentJobDetails.jsx b/core/http/react-ui/src/pages/AgentJobDetails.jsx
index 52854a4d4900..b4a7cefce00a 100644
--- a/core/http/react-ui/src/pages/AgentJobDetails.jsx
+++ b/core/http/react-ui/src/pages/AgentJobDetails.jsx
@@ -19,62 +19,43 @@ function TraceCard({ trace, index }) {
   const style = traceColors[trace.type] || traceColors.status
 
   return (
-    <div style={{
-      background: style.bg, border: `1px solid ${style.border}`,
-      borderRadius: 'var(--radius-md)', marginBottom: 'var(--spacing-sm)', overflow: 'hidden',
-    }}>
+    <div className="ajd-trace mb-sm" style={{ background: style.bg, border: `1px solid ${style.border}` }}>
       <button
         onClick={() => setExpanded(!expanded)}
-        style={{
-          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-          padding: 'var(--spacing-sm) var(--spacing-md)', background: 'none', border: 'none',
-          cursor: 'pointer', color: 'var(--color-text-primary)', textAlign: 'left',
-        }}
+        className="ajd-trace__toggle"
       >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
-          <span style={{
-            fontSize: '0.6875rem', fontWeight: 700, color: 'var(--color-text-muted)',
-            background: 'var(--color-bg-secondary)', borderRadius: 'var(--radius-sm)',
-            padding: '2px 6px', minWidth: 24, textAlign: 'center',
-          }}>
+        <div className="hstack">
+          <span className="ajd-trace__index">
             {index + 1}
           </span>
-          <i className={`fas ${style.icon}`} style={{ color: style.color, fontSize: '0.875rem' }} />
-          <span className="badge" style={{ background: style.border, color: style.color, fontSize: '0.6875rem' }}>
+          <i className={`fas ${style.icon} text-base`} style={{ color: style.color }} />
+          <span className="badge text-xs" style={{ background: style.border, color: style.color }}>
             {trace.type || 'unknown'}
           </span>
           {trace.tool_name && (
-            <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--color-text-secondary)' }}>
+            <span className="text-mono text-xs text-secondary">
               {trace.tool_name}
             </span>
           )}
           {trace.timestamp && (
-            <span style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
+            <span className="text-meta">
               {new Date(trace.timestamp).toLocaleTimeString()}
             </span>
           )}
         </div>
-        <i className={`fas fa-chevron-${expanded ? 'up' : 'down'}`} style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }} />
+        <i className={`fas fa-chevron-${expanded ? 'up' : 'down'} text-meta`} />
       </button>
       {expanded && (
-        <div style={{ padding: '0 var(--spacing-md) var(--spacing-sm)', fontSize: '0.8125rem' }}>
+        <div className="ajd-trace__body">
           {trace.content && (
-            <pre style={{
-              whiteSpace: 'pre-wrap', wordBreak: 'break-word', margin: 0,
-              fontFamily: 'var(--font-mono)', fontSize: '0.75rem',
-              color: 'var(--color-text-secondary)', lineHeight: 1.6,
-            }}>
+            <pre className="ajd-pre">
               {trace.content}
             </pre>
           )}
           {trace.arguments && (
-            <div style={{ marginTop: 'var(--spacing-xs)' }}>
-              <span style={{ fontSize: '0.6875rem', fontWeight: 600, color: 'var(--color-text-muted)' }}>Arguments:</span>
-              <pre style={{
-                whiteSpace: 'pre-wrap', wordBreak: 'break-word', margin: '4px 0 0',
-                fontFamily: 'var(--font-mono)', fontSize: '0.75rem',
-                color: 'var(--color-text-secondary)', lineHeight: 1.5,
-              }}>
+            <div className="mt-xs">
+              <span className="text-meta fw-semibold">Arguments:</span>
+              <pre className="ajd-pre ajd-pre--nested">
                 {typeof trace.arguments === 'string' ? trace.arguments : JSON.stringify(trace.arguments, null, 2)}
               </pre>
             </div>
@@ -147,8 +128,8 @@ export default function AgentJobDetails() {
     }
     const m = map[status] || { cls: '', icon: 'fa-question' }
     return (
-      <span className={`badge ${m.cls}`} style={{ fontSize: '0.875rem', padding: '4px 12px' }}>
-        <i className={`fas ${m.icon}`} style={{ marginRight: 4 }} /> {status || 'unknown'}
+      <span className={`badge ${m.cls} badge--md`}>
+        <i className={`fas ${m.icon} icon-before`} /> {status || 'unknown'}
       </span>
     )
   }
@@ -163,7 +144,7 @@ export default function AgentJobDetails() {
     return rendered
   }
 
-  if (loading) return <div className="page page--narrow" style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}><LoadingSpinner size="lg" /></div>
+  if (loading) return <div className="page page--narrow loading-center"><LoadingSpinner size="lg" /></div>
   if (!job) return (
     <div className="page page--narrow">
       <div className="empty-state">
@@ -183,38 +164,38 @@ export default function AgentJobDetails() {
         title="Job Details"
         supporting="Live status and reasoning traces"
         actions={
-          <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
+          <div className="hstack btn btn-danger fas fa-stop btn-secondary fa-arrow-left">
             {(job.status === 'running' || job.status === 'pending') && (
-              <button className="btn btn-danger" onClick={handleCancel}>
-                <i className="fas fa-stop" /> Cancel
+              <button onClick={handleCancel}>
+                <i /> Cancel
               </button>
             )}
-            <button className="btn btn-secondary" onClick={() => navigate('/app/agent-jobs')}>
-              <i className="fas fa-arrow-left" /> Back
+            <button onClick={() => navigate('/app/agent-jobs')}>
+              <i /> Back
             </button>
           </div>
         }
       />
 
       {/* Status Card */}
-      <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-md)' }}>
-          <h3 style={{ fontWeight: 600 }}>
-            <i className="fas fa-circle-info" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} />
+      <div className="card mb-md">
+        <div className="hstack hstack--between mb-md">
+          <h3 className="fw-semibold">
+            <i className="fas fa-circle-info text-primary icon-before" />
             Job Status
           </h3>
           {statusBadge(job.status)}
         </div>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--spacing-md)' }}>
+        <div className="grid-3">
           <div>
             <span className="form-label">Job ID</span>
-            <p style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem', wordBreak: 'break-all' }}>{job.id}</p>
+            <p className="cell-mono wrap-anywhere">{job.id}</p>
           </div>
           <div>
             <span className="form-label">Task</span>
             <p>
               {job.task_id ? (
-                <a onClick={() => navigate(`/app/agent-jobs/tasks/${job.task_id}`)} style={{ cursor: 'pointer', color: 'var(--color-primary)' }}>
+                <a onClick={() => navigate(`/app/agent-jobs/tasks/${job.task_id}`)} className="link-plain">
                   {job.task_id}
                 </a>
               ) : '-'}
@@ -222,35 +203,31 @@ export default function AgentJobDetails() {
           </div>
           <div>
             <span className="form-label">Triggered By</span>
-            <p style={{ fontSize: '0.875rem' }}>{job.triggered_by || 'manual'}</p>
+            <p className="text-base">{job.triggered_by || 'manual'}</p>
           </div>
           <div>
             <span className="form-label">Created</span>
-            <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>{formatDate(job.created_at)}</p>
+            <p className="text-sub">{formatDate(job.created_at)}</p>
           </div>
           <div>
             <span className="form-label">Started</span>
-            <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>{formatDate(job.started_at)}</p>
+            <p className="text-sub">{formatDate(job.started_at)}</p>
           </div>
           <div>
             <span className="form-label">Completed</span>
-            <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>{formatDate(job.completed_at)}</p>
+            <p className="text-sub">{formatDate(job.completed_at)}</p>
           </div>
         </div>
       </div>
 
       {/* Prompt Template */}
       {task?.prompt && (
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-sm)' }}>
-            <i className="fas fa-file-lines" style={{ color: 'var(--color-accent)', marginRight: 'var(--spacing-xs)' }} />
+        <div className="card mb-md">
+          <h3 className="group-label group-label--tight">
+            <i className="fas fa-file-lines text-accent icon-before" />
             Agent Prompt Template
           </h3>
-          <pre style={{
-            background: 'var(--color-bg-primary)', padding: 'var(--spacing-sm)',
-            borderRadius: 'var(--radius-md)', fontSize: '0.8125rem',
-            whiteSpace: 'pre-wrap', overflow: 'auto', maxHeight: 200,
-          }}>
+          <pre className="ajd-code">
             {task.prompt}
           </pre>
         </div>
@@ -258,14 +235,14 @@ export default function AgentJobDetails() {
 
       {/* Cron Parameters */}
       {job.triggered_by === 'cron' && job.cron_parameters && Object.keys(job.cron_parameters).length > 0 && (
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-sm)' }}>
-            <i className="fas fa-clock" style={{ color: 'var(--color-warning)', marginRight: 'var(--spacing-xs)' }} />
+        <div className="card mb-md">
+          <h3 className="group-label group-label--tight">
+            <i className="fas fa-clock text-warning icon-before" />
             Cron Parameters
           </h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-xs)' }}>
+          <div className="hstack hstack--xs">
             {Object.entries(job.cron_parameters).map(([k, v]) => (
-              <span key={k} className="badge badge-info" style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>
+              <span key={k} className="badge badge-info text-mono text-xs">
                 {k}={v}
               </span>
             ))}
@@ -275,14 +252,14 @@ export default function AgentJobDetails() {
 
       {/* Job Parameters */}
       {job.parameters && Object.keys(job.parameters).length > 0 && (
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-sm)' }}>
-            <i className="fas fa-sliders-h" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} />
+        <div className="card mb-md">
+          <h3 className="group-label group-label--tight">
+            <i className="fas fa-sliders-h text-primary icon-before" />
             Job Parameters
           </h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-xs)' }}>
+          <div className="hstack hstack--xs">
             {Object.entries(job.parameters).map(([k, v]) => (
-              <span key={k} className="badge badge-info" style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>
+              <span key={k} className="badge badge-info text-mono text-xs">
                 {k}={v}
               </span>
             ))}
@@ -292,16 +269,12 @@ export default function AgentJobDetails() {
 
       {/* Rendered Prompt */}
       {renderedPrompt && renderedPrompt !== task?.prompt && (
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-sm)' }}>
-            <i className="fas fa-spell-check" style={{ color: 'var(--color-success)', marginRight: 'var(--spacing-xs)' }} />
+        <div className="card mb-md">
+          <h3 className="group-label group-label--tight">
+            <i className="fas fa-spell-check text-success icon-before" />
             Rendered Prompt
           </h3>
-          <pre style={{
-            background: 'var(--color-bg-primary)', padding: 'var(--spacing-sm)',
-            borderRadius: 'var(--radius-md)', fontSize: '0.8125rem',
-            whiteSpace: 'pre-wrap', overflow: 'auto', maxHeight: 300,
-          }}>
+          <pre className="ajd-code ajd-code--tall">
             {renderedPrompt}
           </pre>
         </div>
@@ -309,16 +282,12 @@ export default function AgentJobDetails() {
 
       {/* Result */}
       {job.result && (
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-sm)' }}>
-            <i className="fas fa-check-circle" style={{ color: 'var(--color-success)', marginRight: 'var(--spacing-xs)' }} />
+        <div className="card mb-md">
+          <h3 className="group-label group-label--tight">
+            <i className="fas fa-check-circle text-success icon-before" />
             Result
           </h3>
-          <pre style={{
-            background: 'var(--color-bg-primary)', padding: 'var(--spacing-sm)',
-            borderRadius: 'var(--radius-md)', fontSize: '0.8125rem',
-            whiteSpace: 'pre-wrap', overflow: 'auto', maxHeight: 500,
-          }}>
+          <pre className="ajd-code ajd-code--taller">
             {typeof job.result === 'string' ? job.result : JSON.stringify(job.result, null, 2)}
           </pre>
         </div>
@@ -326,16 +295,12 @@ export default function AgentJobDetails() {
 
       {/* Error */}
       {job.error && (
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)', borderColor: 'var(--color-error)' }}>
-          <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-sm)', color: 'var(--color-error)' }}>
-            <i className="fas fa-exclamation-triangle" style={{ marginRight: 'var(--spacing-xs)' }} />
+        <div className="card mb-md" style={{ borderColor: 'var(--color-error)' }}>
+          <h3 className="fw-semibold text-error mb-sm">
+            <i className="fas fa-exclamation-triangle icon-before" />
             Error
           </h3>
-          <pre style={{
-            background: 'var(--color-error-light)', padding: 'var(--spacing-sm)',
-            borderRadius: 'var(--radius-md)', fontSize: '0.8125rem',
-            whiteSpace: 'pre-wrap', overflow: 'auto', color: 'var(--color-error)',
-          }}>
+          <pre className="ajd-code ajd-code--error">
             {typeof job.error === 'string' ? job.error : JSON.stringify(job.error, null, 2)}
           </pre>
         </div>
@@ -343,9 +308,9 @@ export default function AgentJobDetails() {
 
       {/* Execution Traces */}
       {traces.length > 0 && (
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-md)' }}>
-            <i className="fas fa-wave-square" style={{ color: 'var(--color-accent)', marginRight: 'var(--spacing-xs)' }} />
+        <div className="card mb-md">
+          <h3 className="group-label">
+            <i className="fas fa-wave-square text-accent icon-before" />
             Execution Traces ({traces.length} steps)
           </h3>
           {traces.map((trace, i) => (
@@ -356,11 +321,8 @@ export default function AgentJobDetails() {
 
       {/* Running indicator */}
       {(job.status === 'running' || job.status === 'pending') && (
-        <div style={{
-          textAlign: 'center', padding: 'var(--spacing-md)',
-          color: 'var(--color-text-muted)', fontSize: '0.8125rem',
-        }}>
-          <i className="fas fa-spinner fa-spin" style={{ marginRight: 'var(--spacing-xs)' }} />
+        <div className="ajd-polling">
+          <i className="fas fa-spinner fa-spin icon-before" />
           Polling for updates every 2 seconds...
         </div>
       )}
@@ -368,20 +330,16 @@ export default function AgentJobDetails() {
       {/* Webhook Status */}
       {(job.webhook_sent !== undefined || job.webhook_error) && (
         <div className="card">
-          <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-md)' }}>
-            <i className="fas fa-globe" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} />
+          <h3 className="group-label">
+            <i className="fas fa-globe text-primary icon-before" />
             Webhook Status
           </h3>
-          <div style={{
-            display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)',
-            background: 'var(--color-bg-primary)', borderRadius: 'var(--radius-md)',
-            padding: 'var(--spacing-sm)',
-          }}>
+          <div className="ajd-webhook">
             {job.webhook_sent ? (
               <>
                 <span className="badge badge-success"><i className="fas fa-check" /> Delivered</span>
                 {job.webhook_sent_at && (
-                  <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+                  <span className="text-meta">
                     at {formatDate(job.webhook_sent_at)}
                   </span>
                 )}
@@ -389,7 +347,7 @@ export default function AgentJobDetails() {
             ) : job.webhook_error ? (
               <>
                 <span className="badge badge-error"><i className="fas fa-xmark" /> Failed</span>
-                <span style={{ fontSize: '0.75rem', color: 'var(--color-error)' }}>{job.webhook_error}</span>
+                <span className="text-xs text-error">{job.webhook_error}</span>
               </>
             ) : (
               <span className="badge badge-warning"><i className="fas fa-clock" /> Pending</span>
diff --git a/core/http/react-ui/src/pages/AgentJobs.jsx b/core/http/react-ui/src/pages/AgentJobs.jsx
index 907f5e81d26b..75d954829827 100644
--- a/core/http/react-ui/src/pages/AgentJobs.jsx
+++ b/core/http/react-ui/src/pages/AgentJobs.jsx
@@ -220,11 +220,11 @@ export default function AgentJobs() {
         <PageHeader title="Agent Jobs" supporting="Manage agent tasks and automated workflows" />
         <div className="card" style={{ textAlign: 'center', padding: 'var(--spacing-xl)' }}>
           <i className="fas fa-exclamation-triangle" style={{ fontSize: '3rem', color: 'var(--color-warning)', marginBottom: 'var(--spacing-md)' }} />
-          <h2 style={{ marginBottom: 'var(--spacing-sm)' }}>No Models Installed</h2>
+          <h2 className="mb-sm">No Models Installed</h2>
           <p style={{ color: 'var(--color-text-secondary)', marginBottom: 'var(--spacing-md)', maxWidth: 500, margin: '0 auto var(--spacing-md)' }}>
             Agent Jobs require at least one model with MCP (Model Context Protocol) support. Install a model first, then configure MCP in the model settings.
           </p>
-          <div style={{ display: 'flex', gap: 'var(--spacing-sm)', justifyContent: 'center' }}>
+          <div className="hstack hstack--center">
             <button className="btn btn-primary" onClick={() => navigate('/app/models')}>
               <i className="fas fa-store" /> Browse Models
             </button>
@@ -244,19 +244,19 @@ export default function AgentJobs() {
         <PageHeader title="Agent Jobs" supporting="Manage agent tasks and automated workflows" />
         <div className="card" style={{ textAlign: 'center', padding: 'var(--spacing-xl)' }}>
           <i className="fas fa-plug" style={{ fontSize: '3rem', color: 'var(--color-primary)', marginBottom: 'var(--spacing-md)' }} />
-          <h2 style={{ marginBottom: 'var(--spacing-sm)' }}>MCP Not Configured</h2>
+          <h2 className="mb-sm">MCP Not Configured</h2>
           <p style={{ color: 'var(--color-text-secondary)', marginBottom: 'var(--spacing-md)', maxWidth: 600, margin: '0 auto var(--spacing-md)' }}>
             You have models installed, but none have MCP (Model Context Protocol) enabled. Agent Jobs require MCP to interact with tools and external services. Edit a model configuration to add MCP servers.
           </p>
           <div style={{ background: 'var(--color-bg-primary)', borderRadius: 'var(--radius-md)', padding: 'var(--spacing-md)', maxWidth: 500, margin: '0 auto var(--spacing-md)', textAlign: 'left' }}>
-            <p style={{ fontSize: '0.8125rem', fontWeight: 600, marginBottom: 'var(--spacing-xs)' }}>Example MCP configuration (YAML):</p>
+            <p className="text-sm fw-semibold mb-xs">Example MCP configuration (YAML):</p>
             <pre style={{ fontSize: '0.75rem', fontFamily: 'var(--font-mono)', color: 'var(--color-text-secondary)', whiteSpace: 'pre-wrap' }}>{`mcp:
   stdio:
     - name: my-tool
       command: /path/to/tool
       args: ["--flag"]`}</pre>
           </div>
-          <div style={{ display: 'flex', gap: 'var(--spacing-sm)', justifyContent: 'center' }}>
+          <div className="hstack hstack--center">
             <button className="btn btn-primary" onClick={() => navigate('/app/manage')}>
               <i className="fas fa-cog" /> Manage Models
             </button>
@@ -275,8 +275,8 @@ export default function AgentJobs() {
         title="Agent Jobs"
         supporting="Manage agent tasks and automated workflows"
         actions={
-          <button className="btn btn-primary" onClick={() => navigate('/app/agent-jobs/tasks/new')}>
-            <i className="fas fa-plus" /> New Task
+          <button className="btn btn-primary fas fa-plus" onClick={() => navigate('/app/agent-jobs/tasks/new')}>
+            <i /> New Task
           </button>
         }
       />
@@ -291,7 +291,7 @@ export default function AgentJobs() {
       </div>
 
       {loading ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}><LoadingSpinner size="lg" /></div>
+        <div className="loading-center"><LoadingSpinner size="lg" /></div>
       ) : activeTab === 'tasks' ? (
         tasks.length === 0 && !taskUserGroups ? (
           <div className="empty-state">
@@ -304,7 +304,7 @@ export default function AgentJobs() {
           </div>
         ) : (
           <>
-            {taskUserGroups && <h2 style={{ fontSize: '1.1rem', fontWeight: 600, marginBottom: 'var(--spacing-md)' }}>Your Tasks</h2>}
+            {taskUserGroups && <h2 className="text-lg fw-semibold mb-md">Your Tasks</h2>}
             {tasks.length === 0 ? (
               <p style={{ color: 'var(--color-text-secondary)', marginBottom: 'var(--spacing-md)' }}>You have no tasks yet.</p>
             ) : (
@@ -317,7 +317,7 @@ export default function AgentJobs() {
                     <th>Model</th>
                     <th>Cron</th>
                     <th>Status</th>
-                    <th style={{ textAlign: 'right' }}>Actions</th>
+                    <th className="text-right">Actions</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -342,20 +342,20 @@ export default function AgentJobs() {
                       </td>
                       <td>
                         {task.cron ? (
-                          <span className="badge badge-info" style={{ fontFamily: 'var(--font-mono)', fontSize: '0.6875rem' }}>
+                          <span className="badge badge-info text-mono text-xs">
                             {task.cron}
                           </span>
                         ) : '-'}
                       </td>
                       <td>
                         {task.enabled === false ? (
-                          <span className="badge" style={{ background: 'var(--color-bg-tertiary)', color: 'var(--color-text-muted)' }}>Disabled</span>
+                          <span className="badge chip-neutral">Disabled</span>
                         ) : (
                           <span className="badge badge-success">Enabled</span>
                         )}
                       </td>
                       <td>
-                        <div style={{ display: 'flex', gap: 'var(--spacing-xs)', justifyContent: 'flex-end' }}>
+                        <div className="hstack hstack--xs hstack--end">
                           <button className="btn btn-primary btn-sm" onClick={() => openExecuteModal(task)} title="Execute">
                             <i className="fas fa-play" />
                           </button>
@@ -378,10 +378,10 @@ export default function AgentJobs() {
         )
       ) : (
         <>
-          {jobUserGroups && <h2 style={{ fontSize: '1.1rem', fontWeight: 600, marginBottom: 'var(--spacing-md)' }}>Your Jobs</h2>}
+          {jobUserGroups && <h2 className="text-lg fw-semibold mb-md">Your Jobs</h2>}
           {/* Job History Controls */}
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-md)' }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
+          <div className="hstack hstack--between mb-md">
+            <div className="hstack">
               <select className="input" value={jobFilter} onChange={(e) => setJobFilter(e.target.value)} style={{ width: 'auto', minWidth: 140 }}>
                 <option value="all">All Status</option>
                 <option value="pending">Pending</option>
@@ -390,7 +390,7 @@ export default function AgentJobs() {
                 <option value="failed">Failed</option>
                 <option value="cancelled">Cancelled</option>
               </select>
-              <span style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>
+              <span className="text-note">
                 {filteredJobs.length} job{filteredJobs.length !== 1 ? 's' : ''}
               </span>
             </div>
@@ -416,7 +416,7 @@ export default function AgentJobs() {
                     <th>Task</th>
                     <th>Status</th>
                     <th>Created</th>
-                    <th style={{ textAlign: 'right' }}>Actions</th>
+                    <th className="text-right">Actions</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -429,11 +429,11 @@ export default function AgentJobs() {
                       </td>
                       <td>{job.task_id || '-'}</td>
                       <td>{statusBadge(job.status)}</td>
-                      <td style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>
+                      <td className="text-sub">
                         {formatDate(job.created_at)}
                       </td>
                       <td>
-                        <div style={{ display: 'flex', gap: 'var(--spacing-xs)', justifyContent: 'flex-end' }}>
+                        <div className="hstack hstack--xs hstack--end">
                           <button className="btn btn-secondary btn-sm" onClick={() => navigate(`/app/agent-jobs/jobs/${job.id}`)} title="View">
                             <i className="fas fa-eye" />
                           </button>
@@ -462,8 +462,8 @@ export default function AgentJobs() {
           currentUserId={user?.id}
           itemKey="tasks"
           renderGroup={(items) => (
-            <div className="table-container">
-              <table className="table">
+            <div className="table-container table fw-medium text-sub text-sm">
+              <table>
                 <thead>
                   <tr>
                     <th>Name</th>
@@ -474,9 +474,9 @@ export default function AgentJobs() {
                 <tbody>
                   {(items || []).map(task => (
                     <tr key={task.id || task.name}>
-                      <td style={{ fontWeight: 500 }}>{task.name || task.id}</td>
-                      <td style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>{task.description || '-'}</td>
-                      <td style={{ fontSize: '0.8125rem' }}>{task.model || '-'}</td>
+                      <td>{task.name || task.id}</td>
+                      <td>{task.description || '-'}</td>
+                      <td>{task.model || '-'}</td>
                     </tr>
                   ))}
                 </tbody>
@@ -494,8 +494,8 @@ export default function AgentJobs() {
           currentUserId={user?.id}
           itemKey="jobs"
           renderGroup={(items) => (
-            <div className="table-container">
-              <table className="table">
+            <div className="table-container table text-mono text-sm text-sub">
+              <table>
                 <thead>
                   <tr>
                     <th>Job ID</th>
@@ -507,10 +507,10 @@ export default function AgentJobs() {
                 <tbody>
                   {(items || []).map(job => (
                     <tr key={job.id}>
-                      <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}>{job.id?.slice(0, 12)}...</td>
+                      <td>{job.id?.slice(0, 12)}...</td>
                       <td>{job.task_id || '-'}</td>
                       <td>{statusBadge(job.status)}</td>
-                      <td style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>{formatDate(job.created_at)}</td>
+                      <td>{formatDate(job.created_at)}</td>
                     </tr>
                   ))}
                 </tbody>
@@ -533,10 +533,10 @@ export default function AgentJobs() {
       {/* Execute Task Modal */}
       {executeModal && (
         <Modal onClose={() => setExecuteModal(null)}>
-          <div style={{ padding: 'var(--spacing-md)' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--spacing-md)' }}>
-              <h3 style={{ fontWeight: 600 }}>
-                <i className="fas fa-play" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} />
+          <div className="pad-md">
+            <div className="hstack hstack--between mb-md">
+              <h3 className="fw-semibold">
+                <i className="fas fa-play text-primary icon-before" />
                 Execute: {executeModal.name}
               </h3>
               <button className="btn btn-secondary btn-sm" onClick={() => setExecuteModal(null)}>
@@ -545,7 +545,7 @@ export default function AgentJobs() {
             </div>
 
             {/* Tabs */}
-            <div className="tabs" style={{ marginBottom: 'var(--spacing-md)' }}>
+            <div className="tabs mb-md">
               <button className={`tab ${executeTab === 'parameters' ? 'tab-active' : ''}`} onClick={() => setExecuteTab('parameters')}>
                 <i className="fas fa-sliders-h" /> Parameters
               </button>
@@ -558,24 +558,23 @@ export default function AgentJobs() {
               <div>
                 <label className="form-label">Parameters (key=value, one per line)</label>
                 <textarea
-                  className="textarea"
+                  className="textarea text-mono text-sm"
                   value={executeParams}
                   onChange={(e) => setExecuteParams(e.target.value)}
                   rows={5}
                   placeholder={`topic=AI trends\nformat=markdown`}
-                  style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}
                 />
-                <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 'var(--spacing-xs)' }}>
+                <p className="text-meta mt-xs">
                   These will be available as {'{{.parameter_name}}'} in the prompt template.
                 </p>
               </div>
             ) : (
               <div>
                 {['images', 'videos', 'audios', 'files'].map(type => (
-                  <div key={type} style={{ marginBottom: 'var(--spacing-md)' }}>
+                  <div key={type} className="mb-md">
                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-xs)' }}>
                       <label className="form-label" style={{ marginBottom: 0, textTransform: 'capitalize' }}>
-                        <i className={`fas ${type === 'images' ? 'fa-image' : type === 'videos' ? 'fa-video' : type === 'audios' ? 'fa-headphones' : 'fa-file'}`} style={{ marginRight: 4 }} />
+                        <i className={`fas ${type === 'images' ? 'fa-image' : type === 'videos' ? 'fa-video' : type === 'audios' ? 'fa-headphones' : 'fa-file'} icon-before`} />
                         {type} ({executeMultimedia[type].length})
                       </label>
                       <button className="btn btn-secondary btn-sm" onClick={() => { fileTypeRef.current = type; fileInputRef.current?.click() }}>
@@ -599,7 +598,7 @@ export default function AgentJobs() {
                     )}
                   </div>
                 ))}
-                <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={(e) => handleFileUpload(e, fileTypeRef.current)} />
+                <input ref={fileInputRef} type="file" multiple className="hidden" onChange={(e) => handleFileUpload(e, fileTypeRef.current)} />
               </div>
             )}
 
diff --git a/core/http/react-ui/src/pages/AgentTaskDetails.jsx b/core/http/react-ui/src/pages/AgentTaskDetails.jsx
index c07ddfd6fe24..531ab4bb43e0 100644
--- a/core/http/react-ui/src/pages/AgentTaskDetails.jsx
+++ b/core/http/react-ui/src/pages/AgentTaskDetails.jsx
@@ -160,7 +160,7 @@ export default function AgentTaskDetails() {
 
   const formatDate = (d) => d ? new Date(d).toLocaleString() : '-'
 
-  if (loading) return <div className="page page--narrow" style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}><LoadingSpinner size="lg" /></div>
+  if (loading) return <div className="page page--narrow loading-center"><LoadingSpinner size="lg" /></div>
 
   // View mode
   if (!isNew && !isEdit) {
@@ -170,27 +170,27 @@ export default function AgentTaskDetails() {
           title={task.name || 'Task Details'}
           supporting={task.description || undefined}
           actions={
-            <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
-              <button className="btn btn-primary btn-sm" onClick={() => navigate(`/app/agent-jobs/tasks/${id}/edit`)}>
-                <i className="fas fa-edit" /> Edit
+            <div className="hstack btn btn-primary btn-sm fas fa-edit btn-secondary fa-arrow-left">
+              <button onClick={() => navigate(`/app/agent-jobs/tasks/${id}/edit`)}>
+                <i /> Edit
               </button>
-              <button className="btn btn-secondary btn-sm" onClick={() => navigate('/app/agent-jobs')}>
-                <i className="fas fa-arrow-left" /> Back
+              <button onClick={() => navigate('/app/agent-jobs')}>
+                <i /> Back
               </button>
             </div>
           }
         />
 
         {/* Task Info */}
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-md)' }}>
-            <i className="fas fa-info-circle" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} />
+        <div className="card mb-md">
+          <h3 className="group-label">
+            <i className="fas fa-info-circle text-primary icon-before" />
             Task Information
           </h3>
           <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-md)' }}>
             <div>
               <span className="form-label">Model</span>
-              <p style={{ fontSize: '0.875rem' }}>{task.model || '-'}</p>
+              <p className="text-base">{task.model || '-'}</p>
             </div>
             <div>
               <span className="form-label">Status</span>
@@ -199,12 +199,12 @@ export default function AgentTaskDetails() {
             {task.cron && (
               <div>
                 <span className="form-label">Cron Schedule</span>
-                <p style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}>{task.cron}</p>
+                <p className="text-mono text-sm">{task.cron}</p>
               </div>
             )}
           </div>
           {task.prompt && (
-            <div style={{ marginTop: 'var(--spacing-md)' }}>
+            <div className="mt-md">
               <span className="form-label">Prompt Template</span>
               <pre style={{ background: 'var(--color-bg-primary)', padding: 'var(--spacing-sm)', borderRadius: 'var(--radius-md)', fontSize: '0.8125rem', whiteSpace: 'pre-wrap', overflow: 'auto', maxHeight: 300 }}>
                 {task.prompt}
@@ -212,7 +212,7 @@ export default function AgentTaskDetails() {
             </div>
           )}
           {task.context && (
-            <div style={{ marginTop: 'var(--spacing-md)' }}>
+            <div className="mt-md">
               <span className="form-label">Context</span>
               <pre style={{ background: 'var(--color-bg-primary)', padding: 'var(--spacing-sm)', borderRadius: 'var(--radius-md)', fontSize: '0.8125rem', whiteSpace: 'pre-wrap' }}>
                 {task.context}
@@ -222,12 +222,12 @@ export default function AgentTaskDetails() {
         </div>
 
         {/* API Usage Examples */}
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-md)' }}>
+        <div className="card mb-md">
+          <h3 className="group-label">
             <i className="fas fa-code" style={{ color: 'var(--color-accent)', marginRight: 'var(--spacing-xs)' }} />
             API Usage
           </h3>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-md)' }}>
+          <div className="stack">
             <div>
               <span className="form-label">Execute by name</span>
               <pre style={{ background: 'var(--color-bg-primary)', padding: 'var(--spacing-sm)', borderRadius: 'var(--radius-md)', fontSize: '0.75rem', fontFamily: 'var(--font-mono)', whiteSpace: 'pre-wrap', overflow: 'auto' }}>
@@ -253,16 +253,16 @@ export default function AgentTaskDetails() {
 
         {/* Webhooks */}
         {task.webhooks && task.webhooks.length > 0 && (
-          <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-            <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-globe" style={{ color: 'var(--color-success)', marginRight: 'var(--spacing-xs)' }} />
+          <div className="card mb-md">
+            <h3 className="group-label">
+              <i className="fas fa-globe text-success icon-before" />
               Webhooks ({task.webhooks.length})
             </h3>
             {task.webhooks.map((wh, i) => (
               <div key={i} style={{ background: 'var(--color-bg-primary)', borderRadius: 'var(--radius-md)', padding: 'var(--spacing-sm)', marginBottom: 'var(--spacing-sm)' }}>
                 <div style={{ display: 'flex', gap: 'var(--spacing-sm)', fontSize: '0.8125rem' }}>
                   <span className="badge badge-info">{wh.method || 'POST'}</span>
-                  <span style={{ fontFamily: 'var(--font-mono)' }}>{wh.url}</span>
+                  <span className="text-mono">{wh.url}</span>
                 </div>
               </div>
             ))}
@@ -272,8 +272,8 @@ export default function AgentTaskDetails() {
         {/* Job History */}
         {jobHistory.length > 0 && (
           <div className="card">
-            <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-clock-rotate-left" style={{ color: 'var(--color-warning)', marginRight: 'var(--spacing-xs)' }} />
+            <h3 className="group-label">
+              <i className="fas fa-clock-rotate-left text-warning icon-before" />
               Recent Jobs ({jobHistory.length})
             </h3>
             <div className="table-container">
@@ -284,11 +284,11 @@ export default function AgentTaskDetails() {
                 <tbody>
                   {jobHistory.map(job => (
                     <tr key={job.id}>
-                      <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}>
+                      <td className="text-mono text-sm">
                         {job.id?.slice(0, 12)}...
                       </td>
                       <td>{statusBadge(job.status)}</td>
-                      <td style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>{formatDate(job.created_at)}</td>
+                      <td className="text-sub">{formatDate(job.created_at)}</td>
                       <td>
                         <button className="btn btn-secondary btn-sm" onClick={() => navigate(`/app/agent-jobs/jobs/${job.id}`)}>
                           <i className="fas fa-eye" /> View
@@ -311,16 +311,16 @@ export default function AgentTaskDetails() {
       <PageHeader
         title={isNew ? 'Create Task' : 'Edit Task'}
         actions={
-          <button className="btn btn-secondary btn-sm" onClick={() => navigate('/app/agent-jobs')}>
-            <i className="fas fa-arrow-left" /> Back
+          <button className="btn btn-secondary btn-sm fas fa-arrow-left" onClick={() => navigate('/app/agent-jobs')}>
+            <i /> Back
           </button>
         }
       />
 
       <form onSubmit={handleSave}>
         {/* Basic Info */}
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-md)' }}>Basic Information</h3>
+        <div className="card mb-md">
+          <h3 className="group-label">Basic Information</h3>
           <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-md)' }}>
             <div className="form-group">
               <label className="form-label">Task Name *</label>
@@ -338,25 +338,24 @@ export default function AgentTaskDetails() {
           <div className="form-group">
             <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', cursor: 'pointer' }}>
               <input type="checkbox" checked={task.enabled} onChange={(e) => updateField('enabled', e.target.checked)} />
-              <span className="form-label" style={{ marginBottom: 0 }}>Enabled</span>
+              <span className="form-label mb-0">Enabled</span>
             </label>
           </div>
         </div>
 
         {/* Prompt Template */}
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-md)' }}>Prompt Template</h3>
+        <div className="card mb-md">
+          <h3 className="group-label">Prompt Template</h3>
           <div className="form-group">
             <label className="form-label">Prompt</label>
             <textarea
-              className="textarea"
+              className="textarea text-mono text-sm"
               value={task.prompt}
               onChange={(e) => updateField('prompt', e.target.value)}
               rows={8}
               placeholder={`Write a summary about {{.topic}} in {{.format}} format.`}
-              style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}
             />
-            <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 'var(--spacing-xs)' }}>
+            <p className="text-meta mt-xs">
               Use {'{{.parameter_name}}'} for dynamic parameters. Parameters are provided when executing the task.
             </p>
           </div>
@@ -367,22 +366,21 @@ export default function AgentTaskDetails() {
         </div>
 
         {/* Cron Schedule */}
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-md)' }}>
-            <i className="fas fa-clock" style={{ marginRight: 'var(--spacing-xs)' }} />
+        <div className="card mb-md">
+          <h3 className="group-label">
+            <i className="fas fa-clock icon-before" />
             Cron Schedule (optional)
           </h3>
           <div className="form-group">
             <label className="form-label">Cron Expression</label>
             <input
-              className="input"
+              className="input text-mono"
               value={task.cron}
               onChange={(e) => { updateField('cron', e.target.value); validateCron(e.target.value) }}
               placeholder="0 */6 * * *"
-              style={{ fontFamily: 'var(--font-mono)' }}
             />
             {cronError && <p style={{ color: 'var(--color-error)', fontSize: '0.75rem', marginTop: 4 }}>{cronError}</p>}
-            <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 'var(--spacing-xs)' }}>
+            <p className="text-meta mt-xs">
               Format: minute hour day month weekday (e.g., "0 */6 * * *" = every 6 hours)
             </p>
           </div>
@@ -390,14 +388,13 @@ export default function AgentTaskDetails() {
             <div className="form-group">
               <label className="form-label">Cron Parameters (key=value, one per line)</label>
               <textarea
-                className="textarea"
+                className="textarea text-mono text-sm"
                 value={task.cron_parameters}
                 onChange={(e) => updateField('cron_parameters', e.target.value)}
                 rows={3}
                 placeholder={`topic=daily news\nformat=bullet points`}
-                style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}
               />
-              <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 'var(--spacing-xs)' }}>
+              <p className="text-meta mt-xs">
                 Default parameters used when the cron triggers the task.
               </p>
             </div>
@@ -405,10 +402,10 @@ export default function AgentTaskDetails() {
         </div>
 
         {/* Multimedia Sources */}
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--spacing-md)' }}>
-            <h3 style={{ fontWeight: 600 }}>
-              <i className="fas fa-photo-film" style={{ marginRight: 'var(--spacing-xs)' }} />
+        <div className="card mb-md">
+          <div className="hstack hstack--between mb-md">
+            <h3 className="fw-semibold">
+              <i className="fas fa-photo-film icon-before" />
               Multimedia Sources (optional)
             </h3>
             <button type="button" className="btn btn-secondary btn-sm" onClick={addMultimediaSource}>
@@ -416,7 +413,7 @@ export default function AgentTaskDetails() {
             </button>
           </div>
           {task.multimedia_sources.length === 0 ? (
-            <p style={{ color: 'var(--color-text-muted)', fontSize: '0.8125rem' }}>No multimedia sources configured.</p>
+            <p className="text-note">No multimedia sources configured.</p>
           ) : (
             task.multimedia_sources.map((ms, i) => (
               <div key={i} style={{ background: 'var(--color-bg-primary)', borderRadius: 'var(--radius-md)', padding: 'var(--spacing-sm)', marginBottom: 'var(--spacing-sm)' }}>
@@ -430,7 +427,7 @@ export default function AgentTaskDetails() {
                       <option value="file">File</option>
                     </select>
                   </div>
-                  <div className="form-group" style={{ flex: 1 }}>
+                  <div className="form-group flex-1">
                     <label className="form-label">URL</label>
                     <input className="input" value={ms.url} onChange={(e) => updateMultimediaSource(i, 'url', e.target.value)} placeholder="https://example.com/media.jpg" />
                   </div>
@@ -438,9 +435,9 @@ export default function AgentTaskDetails() {
                     <i className="fas fa-trash" />
                   </button>
                 </div>
-                <div className="form-group" style={{ marginTop: 'var(--spacing-xs)' }}>
+                <div className="form-group mt-xs">
                   <label className="form-label">Headers (JSON)</label>
-                  <input className="input" value={ms.headers} onChange={(e) => updateMultimediaSource(i, 'headers', e.target.value)} placeholder='{"Authorization": "Bearer ..."}' style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }} />
+                  <input className="input text-mono text-sm" value={ms.headers} onChange={(e) => updateMultimediaSource(i, 'headers', e.target.value)} placeholder='{"Authorization": "Bearer ..."}' />
                 </div>
               </div>
             ))
@@ -448,10 +445,10 @@ export default function AgentTaskDetails() {
         </div>
 
         {/* Webhooks */}
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--spacing-md)' }}>
-            <h3 style={{ fontWeight: 600 }}>
-              <i className="fas fa-globe" style={{ marginRight: 'var(--spacing-xs)' }} />
+        <div className="card mb-md">
+          <div className="hstack hstack--between mb-md">
+            <h3 className="fw-semibold">
+              <i className="fas fa-globe icon-before" />
               Webhooks (optional)
             </h3>
             <button type="button" className="btn btn-secondary btn-sm" onClick={addWebhook}>
@@ -459,7 +456,7 @@ export default function AgentTaskDetails() {
             </button>
           </div>
           {task.webhooks.length === 0 ? (
-            <p style={{ color: 'var(--color-text-muted)', fontSize: '0.8125rem' }}>No webhooks configured.</p>
+            <p className="text-note">No webhooks configured.</p>
           ) : (
             task.webhooks.map((wh, i) => (
               <div key={i} style={{ background: 'var(--color-bg-primary)', borderRadius: 'var(--radius-md)', padding: 'var(--spacing-sm)', marginBottom: 'var(--spacing-sm)' }}>
@@ -472,7 +469,7 @@ export default function AgentTaskDetails() {
                       <option value="PATCH">PATCH</option>
                     </select>
                   </div>
-                  <div className="form-group" style={{ flex: 1 }}>
+                  <div className="form-group flex-1">
                     <label className="form-label">URL</label>
                     <input className="input" value={wh.url} onChange={(e) => updateWebhook(i, 'url', e.target.value)} placeholder="https://hooks.slack.com/..." />
                   </div>
@@ -480,21 +477,20 @@ export default function AgentTaskDetails() {
                     <i className="fas fa-trash" />
                   </button>
                 </div>
-                <div className="form-group" style={{ marginTop: 'var(--spacing-xs)' }}>
+                <div className="form-group mt-xs">
                   <label className="form-label">Headers (JSON)</label>
-                  <input className="input" value={wh.headers} onChange={(e) => updateWebhook(i, 'headers', e.target.value)} placeholder='{"Content-Type": "application/json"}' style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }} />
+                  <input className="input text-mono text-sm" value={wh.headers} onChange={(e) => updateWebhook(i, 'headers', e.target.value)} placeholder='{"Content-Type": "application/json"}' />
                 </div>
-                <div className="form-group" style={{ marginTop: 'var(--spacing-xs)' }}>
+                <div className="form-group mt-xs">
                   <label className="form-label">Payload Template (Go template syntax)</label>
                   <textarea
-                    className="textarea"
+                    className="textarea text-mono text-sm"
                     value={wh.payload_template}
                     onChange={(e) => updateWebhook(i, 'payload_template', e.target.value)}
                     rows={3}
                     placeholder={`{"text": "Job {{.Status}}: {{if .Error}}Error: {{.Error}}{{else}}{{.Result}}{{end}}"}`}
-                    style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}
                   />
-                  <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>
+                  <p className="text-meta mt-xs">
                     Available: {'{{.Job}}'} {'{{.Task}}'} {'{{.Result}}'} {'{{.Error}}'} {'{{.Status}}'}
                   </p>
                 </div>
@@ -503,7 +499,7 @@ export default function AgentTaskDetails() {
           )}
         </div>
 
-        <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
+        <div className="hstack">
           <button type="submit" className="btn btn-primary" disabled={saving}>
             {saving ? <><i className="fas fa-spinner fa-spin" /> Saving...</> : <><i className="fas fa-save" /> {isNew ? 'Create Task' : 'Save Changes'}</>}
           </button>
diff --git a/core/http/react-ui/src/pages/Agents.jsx b/core/http/react-ui/src/pages/Agents.jsx
index 95bbc9afad09..218e0ee6ebf9 100644
--- a/core/http/react-ui/src/pages/Agents.jsx
+++ b/core/http/react-ui/src/pages/Agents.jsx
@@ -188,24 +188,24 @@ export default function Agents() {
         actions={
           <div style={{ display: 'flex', gap: 'var(--spacing-sm)', alignItems: 'center' }}>
             {agentHubURL && (
-              <a className="btn btn-secondary" href={agentHubURL} target="_blank" rel="noopener noreferrer">
-                <i className="fas fa-store" /> {t('actions.agentHub')}
+              <a className="btn btn-secondary fas fa-store fa-file-import agents-import-input btn-primary fa-plus" href={agentHubURL} target="_blank" rel="noopener noreferrer">
+                <i /> {t('actions.agentHub')}
               </a>
             )}
-            <label className="btn btn-secondary">
-              <i className="fas fa-file-import" /> {t('actions.import')}
-              <input type="file" accept=".json" className="agents-import-input" onChange={handleImport} />
+            <label>
+              <i /> {t('actions.import')}
+              <input type="file" accept=".json" onChange={handleImport} />
             </label>
-            <button className="btn btn-primary" onClick={() => navigate('/app/agents/new')}>
-              <i className="fas fa-plus" /> {t('actions.createAgent')}
+            <button onClick={() => navigate('/app/agents/new')}>
+              <i /> {t('actions.createAgent')}
             </button>
           </div>
         }
       />
 
       {loading ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}>
-          <i className="fas fa-spinner fa-spin" style={{ fontSize: '2rem', color: 'var(--color-primary)' }} />
+        <div className="loading-center">
+          <i className="fas fa-spinner fa-spin icon-xl text-primary" />
         </div>
       ) : agents.length === 0 && !userGroups ? (
         <div className="empty-state">
@@ -240,7 +240,7 @@ export default function Agents() {
         </div>
       ) : (
         <>
-          {userGroups && <h2 style={{ fontSize: '1.1rem', fontWeight: 600, marginBottom: 'var(--spacing-md)' }}>{t('sections.yourAgents')}</h2>}
+          {userGroups && <h2 className="text-lg fw-semibold mb-md">{t('sections.yourAgents')}</h2>}
           <div className="agents-toolbar">
             <div className="agents-search">
               <i className="fas fa-search" />
@@ -252,7 +252,7 @@ export default function Agents() {
                 onChange={(e) => setSearch(e.target.value)}
               />
             </div>
-            <span style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>
+            <span className="text-note">
               {t('search.summary', { shown: filtered.length, total: agents.length, count: agents.length })}
             </span>
           </div>
@@ -271,7 +271,7 @@ export default function Agents() {
                     <th>{t('table.name')}</th>
                     <th>{t('table.status')}</th>
                     <th>{t('table.events')}</th>
-                    <th style={{ textAlign: 'right' }}>{t('table.actions')}</th>
+                    <th className="text-right">{t('table.actions')}</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -353,13 +353,13 @@ export default function Agents() {
           currentUserId={user?.id}
           itemKey="agents"
           renderGroup={(items, userId) => (
-            <div className="table-container">
-              <table className="table">
+            <div className={`table-container table text-right agents-name agents-action-group btn btn-sm ${isActive ? 'btn-warning' : 'btn-success'} fas ${isActive ? 'fa-pause' : 'fa-play'} btn btn-secondary btn-sm fas fa-edit btn btn-secondary btn-sm fas fa-comment btn btn-secondary btn-sm fas fa-download btn btn-danger btn-sm fas fa-trash`}>
+              <table>
                 <thead>
                   <tr>
                     <th>{t('table.name')}</th>
                     <th>{t('table.status')}</th>
-                    <th style={{ textAlign: 'right' }}>{t('table.actions')}</th>
+                    <th>{t('table.actions')}</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -368,47 +368,42 @@ export default function Agents() {
                     return (
                       <tr key={a.name}>
                         <td>
-                          <a className="agents-name" onClick={() => navigate(`/app/agents/${encodeURIComponent(a.name)}/chat?user_id=${encodeURIComponent(userId)}`)}>
+                          <a onClick={() => navigate(`/app/agents/${encodeURIComponent(a.name)}/chat?user_id=${encodeURIComponent(userId)}`)}>
                             {a.name}
                           </a>
                         </td>
                         <td>{statusBadge(isActive ? 'active' : 'paused')}</td>
                         <td>
-                          <div className="agents-action-group">
+                          <div>
                             <button
-                              className={`btn btn-sm ${isActive ? 'btn-warning' : 'btn-success'}`}
                               onClick={() => handlePauseResume(a, userId)}
                               title={isActive ? t('actions.pause') : t('actions.resume')}
                             >
-                              <i className={`fas ${isActive ? 'fa-pause' : 'fa-play'}`} />
+                              <i />
                             </button>
                             <button
-                              className="btn btn-secondary btn-sm"
                               onClick={() => navigate(`/app/agents/${encodeURIComponent(a.name)}/edit?user_id=${encodeURIComponent(userId)}`)}
                               title={t('actions.edit')}
                             >
-                              <i className="fas fa-edit" />
+                              <i />
                             </button>
                             <button
-                              className="btn btn-secondary btn-sm"
                               onClick={() => navigate(`/app/agents/${encodeURIComponent(a.name)}/chat?user_id=${encodeURIComponent(userId)}`)}
                               title={t('actions.chat')}
                             >
-                              <i className="fas fa-comment" />
+                              <i />
                             </button>
                             <button
-                              className="btn btn-secondary btn-sm"
                               onClick={() => handleExport(a.name, userId)}
                               title={t('actions.export')}
                             >
-                              <i className="fas fa-download" />
+                              <i />
                             </button>
                             <button
-                              className="btn btn-danger btn-sm"
                               onClick={() => handleDelete(a.name, userId)}
                               title={t('actions.delete')}
                             >
-                              <i className="fas fa-trash" />
+                              <i />
                             </button>
                           </div>
                         </td>
diff --git a/core/http/react-ui/src/pages/AudioTransform.jsx b/core/http/react-ui/src/pages/AudioTransform.jsx
index 0814934f365a..b33b8fcf88b3 100644
--- a/core/http/react-ui/src/pages/AudioTransform.jsx
+++ b/core/http/react-ui/src/pages/AudioTransform.jsx
@@ -438,7 +438,7 @@ function AudioInput({ label, help, file, onChange }) {
                   </div>
                 )}
                 {hasFile && !cap.recording && (
-                  <div className="audio-transform-drop__file" style={{ marginTop: 'var(--spacing-sm)' }}>
+                  <div className="audio-transform-drop__file mt-sm">
                     <i className="fas fa-file-audio" /> {file.name}
                     <button type="button" className="btn btn-secondary btn-sm" onClick={() => onChange(null)}>{t('audioTransform.input.clear')}</button>
                   </div>
diff --git a/core/http/react-ui/src/pages/BackendLogs.jsx b/core/http/react-ui/src/pages/BackendLogs.jsx
index 1f7c2fed1bb5..c21c37ca232d 100644
--- a/core/http/react-ui/src/pages/BackendLogs.jsx
+++ b/core/http/react-ui/src/pages/BackendLogs.jsx
@@ -188,7 +188,7 @@ function BackendLogsDetail({ modelId }) {
             borderRadius: '50%',
             background: wsConnected ? 'var(--color-success)' : 'var(--color-text-muted)',
           }} />
-          <span style={{ color: 'var(--color-text-secondary)' }}>
+          <span className="text-secondary">
             {wsConnected ? 'Live' : 'Reconnecting...'}
           </span>
           <label style={{ display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer', marginLeft: 'var(--spacing-sm)' }}>
@@ -197,14 +197,14 @@ function BackendLogsDetail({ modelId }) {
               checked={autoScroll}
               onChange={(e) => setAutoScroll(e.target.checked)}
             />
-            <span style={{ color: 'var(--color-text-secondary)' }}>Auto-scroll</span>
+            <span className="text-secondary">Auto-scroll</span>
           </label>
         </div>
       </div>
 
       {/* Log output */}
       {loading ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}>
+        <div className="loading-center">
           <LoadingSpinner size="lg" />
         </div>
       ) : filteredLines.length === 0 ? (
@@ -321,7 +321,7 @@ function DistributedBackendLogsResolver({ modelId, fromTimestamp }) {
 
   if (hits === null) {
     return (
-      <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}>
+      <div className="loading-center">
         <LoadingSpinner size="lg" />
       </div>
     )
@@ -334,8 +334,8 @@ function DistributedBackendLogsResolver({ modelId, fromTimestamp }) {
           <div className="empty-state-icon"><i className="fas fa-terminal" /></div>
           <h2 className="empty-state-title">Model not loaded on any worker</h2>
           <p className="empty-state-text">
-            <span style={{ fontFamily: 'var(--font-mono)' }}>{modelId}</span> isn't currently loaded on any node in the cluster.
-            Check the <Link to="/app/nodes" style={{ color: 'var(--color-primary)' }}>Nodes page</Link> to see which models are running where.
+            <span className="text-mono">{modelId}</span> isn't currently loaded on any node in the cluster.
+            Check the <Link to="/app/nodes" className="text-primary">Nodes page</Link> to see which models are running where.
           </p>
         </div>
       </div>
@@ -361,7 +361,7 @@ function DistributedBackendLogsResolver({ modelId, fromTimestamp }) {
         title={<><i className="fas fa-terminal" style={{ fontSize: '0.8em', marginRight: 'var(--spacing-sm)' }} />{modelId}</>}
         supporting={`Hosted on ${hits.length} workers — pick one to view its logs.`}
       />
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)' }}>
+      <div className="stack stack--xs">
         {hits.map(({ node, model }) => (
           <Link
             key={`${node.id}#${model.replica_index ?? 0}`}
@@ -374,12 +374,12 @@ function DistributedBackendLogsResolver({ modelId, fromTimestamp }) {
             }}
           >
             <div>
-              <div style={{ fontWeight: 500 }}>{node.name || node.id}</div>
+              <div className="fw-medium">{node.name || node.id}</div>
               <div style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)', fontFamily: 'var(--font-mono)' }}>
                 {node.id}{model.replica_index ? ` · replica ${model.replica_index}` : ''} · {model.state}
               </div>
             </div>
-            <i className="fas fa-chevron-right" style={{ color: 'var(--color-text-muted)' }} />
+            <i className="fas fa-chevron-right text-muted" />
           </Link>
         ))}
       </div>
@@ -398,7 +398,7 @@ function BackendLogsRouter({ modelId }) {
 
   if (loading) {
     return (
-      <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}>
+      <div className="loading-center">
         <LoadingSpinner size="lg" />
       </div>
     )
@@ -426,7 +426,7 @@ export default function BackendLogs() {
         <h2 className="empty-state-title">No model selected</h2>
         <p className="empty-state-text">
           View backend logs for a specific model from the{' '}
-          <Link to="/app/manage" style={{ color: 'var(--color-primary)' }}>System page</Link>.
+          <Link to="/app/manage" className="text-primary">System page</Link>.
         </p>
       </div>
     </div>
diff --git a/core/http/react-ui/src/pages/Backends.jsx b/core/http/react-ui/src/pages/Backends.jsx
index c19ca9637f01..59eab4ea3486 100644
--- a/core/http/react-ui/src/pages/Backends.jsx
+++ b/core/http/react-ui/src/pages/Backends.jsx
@@ -312,11 +312,11 @@ export default function Backends() {
   const SortHeader = ({ col, children }) => (
     <th
       onClick={() => handleSort(col)}
-      style={{ cursor: 'pointer', userSelect: 'none', whiteSpace: 'nowrap' }}
+      className="sortable-th nowrap"
     >
       {children}
       {sortBy === col && (
-        <i className={`fas fa-sort-${sortOrder === 'asc' ? 'up' : 'down'}`} style={{ marginLeft: 4, fontSize: '0.6875rem', color: 'var(--color-primary)' }} />
+        <i className={`fas fa-sort-${sortOrder === 'asc' ? 'up' : 'down'} ml-xs text-xs text-primary`} />
       )}
     </th>
   )
@@ -328,17 +328,9 @@ export default function Backends() {
           give a fast way to clear it. Visually a primary-tinted strip so the
           user knows they're in a special mode without it feeling alarming. */}
       {targetNode && (
-        <div className="card" style={{
-          marginBottom: 'var(--spacing-md)',
-          padding: 'var(--spacing-sm) var(--spacing-md)',
-          background: 'var(--color-primary-light)',
-          border: '1px solid var(--color-primary-border)',
-          borderRadius: 'var(--radius-md)',
-          display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)',
-          flexWrap: 'wrap',
-        }}>
+        <div className="card bk-notice tone-primary mb-md">
           <i className="fas fa-bullseye" style={{ color: 'var(--color-primary)' }} />
-          <span style={{ color: 'var(--color-primary)', fontWeight: 500, fontSize: 'var(--text-sm)' }}>
+          <span className="bk-notice__text">
             Installing only on <span style={{ fontFamily: 'var(--font-mono)' }}>{targetNode.name}</span>
           </span>
           <span style={{ flex: 1 }} />
@@ -353,21 +345,21 @@ export default function Backends() {
         title={t('backends.title')}
         supporting={t('backends.subtitle')}
         actions={
-        <div style={{ display: 'flex', gap: 'var(--spacing-md)', alignItems: 'center' }}>
-          <div style={{ display: 'flex', gap: 'var(--spacing-md)', fontSize: '0.8125rem' }}>
+        <div className="hstack hstack--md">
+          <div className="bk-counts">
             <div style={{ textAlign: 'center' }}>
-              <div style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--color-primary)' }}>{filteredBackends.length}</div>
+              <div className="bk-count tone-primary">{filteredBackends.length}</div>
               <div style={{ color: 'var(--color-text-muted)' }}>Available</div>
             </div>
             <div style={{ textAlign: 'center' }}>
               <a onClick={() => navigate('/app/manage')} style={{ cursor: 'pointer' }}>
-                <div style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--color-success)' }}>{installedCount}</div>
+                <div className="bk-count tone-success">{installedCount}</div>
                 <div style={{ color: 'var(--color-text-muted)' }}>Installed</div>
               </a>
             </div>
             {Object.keys(upgrades).length > 0 && (
               <div style={{ textAlign: 'center' }}>
-                <div style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--color-warning)' }}>
+                <div className="bk-count tone-warning">
                   {Object.keys(upgrades).length}
                 </div>
                 <div style={{ color: 'var(--color-text-muted)' }}>Updates</div>
@@ -383,17 +375,10 @@ export default function Backends() {
 
       {/* Upgrade Banner */}
       {Object.keys(upgrades).length > 0 && (
-        <div className="card" style={{
-          marginBottom: 'var(--spacing-md)',
-          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-          padding: 'var(--spacing-sm) var(--spacing-md)',
-          background: 'var(--color-warning-light)',
-          border: '1px solid var(--color-warning-border)',
-          borderRadius: 'var(--radius-md)',
-        }}>
+        <div className="card bk-notice bk-notice--between tone-warning mb-md">
           <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
             <i className="fas fa-arrow-up" style={{ color: 'var(--color-warning)' }} />
-            <span style={{ color: 'var(--color-warning)', fontWeight: 500, fontSize: 'var(--text-sm)' }}>
+            <span className="bk-notice__text">
               {Object.keys(upgrades).length} backend{Object.keys(upgrades).length > 1 ? 's have' : ' has'} updates available
             </span>
           </div>
@@ -417,11 +402,11 @@ export default function Backends() {
 
       {showManualInstall && (
         <form onSubmit={handleManualInstall} className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <h3 style={{ fontSize: '0.9375rem', fontWeight: 600, marginBottom: 'var(--spacing-sm)' }}>
+          <h3 className="text-base fw-semibold mb-sm">
             <i className="fas fa-download" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} />
             Install External Backend
           </h3>
-          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr auto', gap: 'var(--spacing-sm)', alignItems: 'end' }}>
+          <div className="bk-manual-grid">
             <div className="form-group" style={{ margin: 0 }}>
               <label className="form-label">OCI Image / URL / Path *</label>
               <input className="input" value={manualUri} onChange={(e) => setManualUri(e.target.value)} placeholder="oci://quay.io/example/backend:latest" />
@@ -442,15 +427,15 @@ export default function Backends() {
       )}
 
       {/* Search + Filters */}
-      <div style={{ display: 'flex', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)', flexWrap: 'wrap', alignItems: 'center' }}>
-        <div className="search-bar" style={{ flex: 1, minWidth: 200 }}>
+      <div className="hstack mb-md">
+        <div className="search-bar search-grow">
           <i className="fas fa-search search-icon" />
           <input className="input" placeholder="Search backends by name, description, or type..." value={search} onChange={(e) => handleSearch(e.target.value)} />
         </div>
       </div>
 
-      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)', flexWrap: 'wrap' }}>
-        <div className="filter-bar" style={{ margin: 0, flex: 1 }}>
+      <div className="hstack hstack--md mb-md">
+        <div className="filter-bar m-0 flex-1">
           {FILTERS.map(f => (
             <button
               key={f.key}
@@ -463,7 +448,7 @@ export default function Backends() {
         ))}
         </div>
 
-        <div style={{ display: 'flex', gap: 'var(--spacing-md)', alignItems: 'center', borderLeft: '1px solid var(--color-border-subtle)', paddingLeft: 'var(--spacing-md)' }}>
+        <div className="bk-toggles">
           <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)', fontSize: '0.75rem', color: 'var(--color-text-secondary)', cursor: 'pointer', userSelect: 'none', whiteSpace: 'nowrap' }}>
             <Toggle checked={showAllBackends} onChange={handleToggleAllBackends} />
             <i className="fas fa-cubes" style={{ fontSize: '0.625rem' }} />
@@ -526,13 +511,9 @@ export default function Backends() {
                     {/* Icon */}
                     <td>
                       {b.icon ? (
-                        <img src={b.icon} alt="" style={{ width: 28, height: 28, borderRadius: 'var(--radius-sm)', objectFit: 'cover' }} />
+                        <img src={b.icon} alt="" className="bk-icon" />
                       ) : (
-                        <div style={{
-                          width: 28, height: 28, borderRadius: 'var(--radius-sm)',
-                          background: 'var(--color-bg-tertiary)', display: 'flex',
-                          alignItems: 'center', justifyContent: 'center',
-                        }}>
+                        <div className="bk-icon-fallback">
                           <i className="fas fa-cog" style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }} />
                         </div>
                       )}
@@ -542,7 +523,7 @@ export default function Backends() {
                     <td>
                       <span style={{ fontWeight: 500 }}>{b.name || b.id}</span>
                       {b.version && (
-                        <span className="badge" style={{ fontSize: '0.625rem', marginLeft: 4, background: 'var(--color-bg-tertiary)', color: 'var(--color-text-secondary)' }}>
+                        <span className="badge badge--tiny badge--soft ml-xs">
                           v{b.version}
                         </span>
                       )}
@@ -556,11 +537,7 @@ export default function Backends() {
                         // the full Markdown is rendered in the detail panel instead.
                         const desc = stripMarkdown(b.description)
                         return (
-                          <span style={{
-                            fontSize: '0.8125rem', color: 'var(--color-text-secondary)',
-                            display: 'inline-block', maxWidth: 300, overflow: 'hidden',
-                            textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-                          }} title={desc}>
+                          <span className="bk-desc" title={desc}>
                             {desc || '-'}
                           </span>
                         )
@@ -577,7 +554,7 @@ export default function Backends() {
                     {/* License */}
                     <td>
                       {b.license ? (
-                        <span className="badge" style={{ fontSize: '0.6875rem', background: 'var(--color-bg-tertiary)' }}>{b.license}</span>
+                        <span className="badge badge--soft text-xs">{b.license}</span>
                       ) : '-'}
                     </td>
 
@@ -595,33 +572,33 @@ export default function Backends() {
                             </span>
                           </div>
                           {op.progress > 0 && (
-                            <div className="operation-bar-container" style={{ flex: 'none', width: '120px', marginTop: 4 }}>
+                            <div className="operation-bar-container bk-progress">
                               <div className="operation-bar" style={{ width: `${op.progress}%` }} />
                             </div>
                           )}
                         </div>
                       ) : b.installed ? (
-                        <div style={{ display: 'flex', gap: 4, alignItems: 'center', flexWrap: 'wrap' }}>
+                        <div className="hstack hstack--xs">
                           {!distributedEnabled && (
                             <span className="badge badge-success">
-                              <i className="fas fa-check" style={{ fontSize: '0.5rem', marginRight: 2 }} /> Installed
+                              <i className="fas fa-check icon-tiny" /> Installed
                             </span>
                           )}
                           {b.version && (
-                            <span className="badge" style={{ fontSize: '0.625rem', background: 'var(--color-bg-tertiary)', color: 'var(--color-text-secondary)' }}>
+                            <span className="badge badge--tiny badge--soft">
                               v{b.version}
                             </span>
                           )}
                           {upgrades[b.name] && (
-                            <span className="badge" style={{ fontSize: '0.625rem', background: 'var(--color-warning-light)', color: 'var(--color-warning)' }}>
-                              <i className="fas fa-arrow-up" style={{ fontSize: '0.5rem', marginRight: 2 }} />
+                            <span className="badge badge--tiny badge--warn-soft">
+                              <i className="fas fa-arrow-up icon-tiny" />
                               {upgrades[b.name].available_version ? `v${upgrades[b.name].available_version}` : 'Update'}
                             </span>
                           )}
                         </div>
                       ) : (
                         <span className="badge" style={{ background: 'var(--color-surface-sunken)', color: 'var(--color-text-muted)', border: '1px solid var(--color-border-default)' }}>
-                          <i className="fas fa-circle" style={{ fontSize: '0.5rem', marginRight: 2 }} /> Not Installed
+                          <i className="fas fa-circle icon-tiny" /> Not Installed
                         </span>
                       )}
                     </td>
@@ -646,7 +623,7 @@ export default function Backends() {
                                 onClick={(e) => { e.stopPropagation(); openPicker(b, missing) }}
                                 title={`Install on ${missing.length} more node${missing.length === 1 ? '' : 's'}`}
                                 aria-label="Install on more nodes"
-                                style={{ padding: '2px 6px' }}
+                                className="pill-xs"
                               >
                                 <i className="fas fa-plus" style={{ fontSize: '0.6875rem' }} />
                               </button>
@@ -709,19 +686,18 @@ export default function Backends() {
                           // to prevent. Both share a chevron menu for the
                           // alternate path.
                           b.isMeta ? (
-                            <div style={{ display: 'inline-flex' }}>
+                            <div className="inline-flex">
                               <button className="btn btn-primary btn-sm" onClick={() => handleInstall(b.name || b.id)} disabled={isProcessing} title="Install on all nodes" style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}>
                                 <i className={`fas ${isProcessing ? 'fa-spinner fa-spin' : 'fa-download'}`} /> Install on all
                               </button>
                               <button
                                 ref={splitMenuFor === idx ? splitMenuAnchorRef : undefined}
-                                className="btn btn-primary btn-sm"
+                                className="btn btn-primary btn-sm bk-split-btn"
                                 onClick={() => setSplitMenuFor(splitMenuFor === idx ? null : idx)}
                                 aria-haspopup="menu"
                                 aria-expanded={splitMenuFor === idx}
                                 aria-label="More install options"
                                 disabled={isProcessing}
-                                style={{ padding: '0 8px', borderLeft: '1px solid rgba(0,0,0,0.15)', borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
                               >
                                 <i className={`fas fa-chevron-${splitMenuFor === idx ? 'up' : 'down'}`} style={{ fontSize: '0.6875rem' }} />
                               </button>
@@ -762,10 +738,7 @@ export default function Backends() {
 
       {/* Pagination */}
       {totalPages > 1 && (
-        <div style={{
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          gap: 'var(--spacing-sm)', marginTop: 'var(--spacing-md)',
-        }}>
+        <div className="pagination-row mt-md">
           <button className="btn btn-secondary btn-sm" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page <= 1}>
             <i className="fas fa-chevron-left" /> Previous
           </button>
@@ -832,18 +805,18 @@ function BackendDetailRow({ label, children }) {
   if (!children) return null
   return (
     <tr>
-      <td style={{ fontWeight: 500, fontSize: '0.8125rem', color: 'var(--color-text-secondary)', whiteSpace: 'nowrap', verticalAlign: 'top', padding: '6px 12px 6px 0' }}>
+      <td className="bk-detail__label">
         {label}
       </td>
-      <td style={{ fontSize: '0.8125rem', padding: '6px 0' }}>{children}</td>
+      <td className="bk-detail__value">{children}</td>
     </tr>
   )
 }
 
 function BackendDetail({ backend }) {
   return (
-    <div style={{ padding: 'var(--spacing-md) var(--spacing-lg)', background: 'var(--color-bg-primary)', borderTop: '1px solid var(--color-border-subtle)' }}>
-      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+    <div className="bk-detail">
+      <table className="bk-detail__table">
         <tbody>
           <BackendDetailRow label="Description">
             {backend.description && (
@@ -865,7 +838,7 @@ function BackendDetail({ backend }) {
           </BackendDetailRow>
           <BackendDetailRow label="Tags">
             {backend.tags?.length > 0 && (
-              <div style={{ display: 'flex', gap: 'var(--spacing-xs)', flexWrap: 'wrap' }}>
+              <div className="hstack hstack--xs">
                 {backend.tags.map(tag => (
                   <span key={tag} className="badge badge-info" style={{ fontSize: '0.6875rem' }}>{tag}</span>
                 ))}
@@ -874,10 +847,10 @@ function BackendDetail({ backend }) {
           </BackendDetailRow>
           <BackendDetailRow label="Links">
             {backend.urls?.length > 0 && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+              <div className="stack stack--xs">
                 {backend.urls.map((url, i) => (
-                  <a key={i} href={safeHref(url)} target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.8125rem', color: 'var(--color-primary)', wordBreak: 'break-all' }}>
-                    <i className="fas fa-external-link-alt" style={{ marginRight: 4, fontSize: '0.6875rem' }} />{url}
+                  <a key={i} href={safeHref(url)} target="_blank" rel="noopener noreferrer" className="text-sm text-primary wrap-anywhere">
+                    <i className="fas fa-external-link-alt icon-before text-xs" />{url}
                   </a>
                 ))}
               </div>
diff --git a/core/http/react-ui/src/pages/Chat.jsx b/core/http/react-ui/src/pages/Chat.jsx
index df867ef433b9..4ab8a864aa57 100644
--- a/core/http/react-ui/src/pages/Chat.jsx
+++ b/core/http/react-ui/src/pages/Chat.jsx
@@ -266,7 +266,7 @@ function UserMessageContent({ content, files }) {
   const text = typeof content === 'string' ? content : content?.[0]?.text || ''
   return (
     <>
-      <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{text}</div>
+      <div className="wrap-anywhere">{text}</div>
       {files && files.length > 0 && (
         <div className="chat-message-files">
           {files.map((f, i) => (
@@ -945,7 +945,7 @@ export default function Chat() {
           <div id="chat-model-info-panel" className="chat-model-info-panel">
             <div className="chat-model-info-header">
               <span>{t('header.modelInfoTitle', { model: activeChat.model })}</span>
-              <div style={{ display: 'flex', gap: 'var(--spacing-xs)' }}>
+              <div className="hstack hstack--xs">
                 {isAdmin && activeChat.model && (
                   <button
                     type="button"
@@ -1417,7 +1417,7 @@ export default function Chat() {
               type="file"
               multiple
               accept="image/*,audio/*,video/*,application/pdf,.txt,.md,.csv,.json"
-              style={{ display: 'none' }}
+              className="hidden"
               onChange={handleFileChange}
             />
             <textarea
diff --git a/core/http/react-ui/src/pages/CollectionDetails.jsx b/core/http/react-ui/src/pages/CollectionDetails.jsx
index 49ddf647ab55..0469df0781b8 100644
--- a/core/http/react-ui/src/pages/CollectionDetails.jsx
+++ b/core/http/react-ui/src/pages/CollectionDetails.jsx
@@ -308,8 +308,8 @@ export default function CollectionDetails() {
       </div>
 
       {loading ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}>
-          <i className="fas fa-spinner fa-spin" style={{ fontSize: '2rem', color: 'var(--color-primary)' }} />
+        <div className="loading-center">
+          <i className="fas fa-spinner fa-spin icon-xl text-primary" />
         </div>
       ) : activeTab === 'entries' ? (
         <>
@@ -336,7 +336,7 @@ export default function CollectionDetails() {
                 <thead>
                   <tr>
                     <th>Entry</th>
-                    <th style={{ textAlign: 'right' }}>Actions</th>
+                    <th className="text-right">Actions</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -382,13 +382,12 @@ export default function CollectionDetails() {
               <label htmlFor="search-max">Max Results</label>
               <input
                 id="search-max"
-                className="input"
+                className="input col-w-100"
                 type="number"
                 min={1}
                 max={100}
                 value={searchMaxResults}
                 onChange={(e) => setSearchMaxResults(parseInt(e.target.value, 10) || 10)}
-                style={{ width: 100 }}
               />
             </div>
             <button className="btn btn-primary" type="submit" disabled={!searchQuery.trim() || searching}>
@@ -456,7 +455,7 @@ export default function CollectionDetails() {
                   <tr>
                     <th>URL</th>
                     <th>Interval</th>
-                    <th style={{ textAlign: 'right' }}>Actions</th>
+                    <th className="text-right">Actions</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -465,7 +464,7 @@ export default function CollectionDetails() {
                       <td style={{ fontSize: '0.8125rem', wordBreak: 'break-all' }}>
                         {typeof source === 'string' ? source : (source.url || JSON.stringify(source))}
                       </td>
-                      <td style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>
+                      <td className="text-sub">
                         {(typeof source === 'object' && source.update_interval) ? source.update_interval : '-'}
                       </td>
                       <td>
@@ -503,7 +502,7 @@ export default function CollectionDetails() {
         <div className="collection-detail-modal-overlay" onClick={() => setViewEntry(null)}>
           <div className="collection-detail-modal" onClick={(e) => e.stopPropagation()}>
             <div className="collection-detail-modal-header">
-              <h3 title={viewEntry}><i className="fas fa-file-alt" style={{ marginRight: 'var(--spacing-xs)' }} />{viewEntry}</h3>
+              <h3 title={viewEntry}><i className="fas fa-file-alt icon-before" />{viewEntry}</h3>
               <button className="btn btn-secondary btn-sm" onClick={() => setViewEntry(null)}>
                 <i className="fas fa-times" />
               </button>
@@ -516,8 +515,8 @@ export default function CollectionDetails() {
               ) : viewContent ? (
                 <>
                   <div style={{ display: 'flex', gap: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)' }}>
-                    <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>
-                      <i className="fas fa-puzzle-piece" style={{ marginRight: 4 }} />
+                    <div className="text-note">
+                      <i className="fas fa-puzzle-piece icon-before" />
                       Chunks: <strong style={{ color: 'var(--color-text-primary)' }}>{viewContent.chunk_count ?? '-'}</strong>
                     </div>
                   </div>
@@ -526,7 +525,7 @@ export default function CollectionDetails() {
                   </div>
                 </>
               ) : (
-                <p style={{ color: 'var(--color-text-muted)' }}>No content available.</p>
+                <p className="text-muted">No content available.</p>
               )}
             </div>
           </div>
diff --git a/core/http/react-ui/src/pages/Explorer.jsx b/core/http/react-ui/src/pages/Explorer.jsx
index 527691ee3d5b..3a79a4c68576 100644
--- a/core/http/react-ui/src/pages/Explorer.jsx
+++ b/core/http/react-ui/src/pages/Explorer.jsx
@@ -7,18 +7,18 @@ export default function Explorer() {
   return (
     <div style={{ minHeight: '100vh', background: 'var(--color-bg-primary)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 'var(--spacing-xl)' }}>
       <h1 style={{ fontSize: '2rem', fontWeight: 700, marginBottom: 'var(--spacing-md)' }}>
-        <span style={{ color: 'var(--color-primary)' }}>LocalAI Explorer</span>
+        <span className="text-primary">LocalAI Explorer</span>
       </h1>
       <p style={{ color: 'var(--color-text-secondary)', marginBottom: 'var(--spacing-xl)', textAlign: 'center' }}>
         Network visualization and node explorer
       </p>
       <div className="card" style={{ width: '100%', maxWidth: '800px', minHeight: '400px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <div style={{ textAlign: 'center', color: 'var(--color-text-muted)' }}>
+        <div className="text-center text-muted">
           <i className="fas fa-network-wired" style={{ fontSize: '3rem', marginBottom: 'var(--spacing-md)' }} />
           <p>Explorer visualization</p>
         </div>
       </div>
-      <button className="btn btn-secondary" onClick={() => navigate('/app')} style={{ marginTop: 'var(--spacing-lg)' }}>
+      <button className="btn btn-secondary mt-lg" onClick={() => navigate('/app')}>
         <i className="fas fa-arrow-left" /> Back to Home
       </button>
     </div>
diff --git a/core/http/react-ui/src/pages/FineTune.jsx b/core/http/react-ui/src/pages/FineTune.jsx
index 5518bf7e1699..21c2d06c2a31 100644
--- a/core/http/react-ui/src/pages/FineTune.jsx
+++ b/core/http/react-ui/src/pages/FineTune.jsx
@@ -2,6 +2,11 @@ import { useState, useEffect, useRef, useCallback } from 'react'
 import { fineTuneApi } from '../utils/api'
 import LoadingSpinner from '../components/LoadingSpinner'
 import PageHeader from '../components/PageHeader'
+import SectionHeading from '../components/SectionHeading'
+import StatCard from '../components/StatCard'
+import EmptyState from '../components/EmptyState'
+import Toggle from '../components/Toggle'
+import ResponsiveTable from '../components/ResponsiveTable'
 import UnsavedChangesGuard from '../components/UnsavedChangesGuard'
 
 const TRAINING_METHODS = ['sft', 'dpo', 'grpo', 'rloo', 'reward', 'kto', 'orpo']
@@ -19,6 +24,9 @@ const BUILTIN_REWARDS = [
   { name: 'code_execution_reward', description: 'Checks Python code block syntax validity', params: [] },
 ]
 
+const ACTIVE_STATUSES = ['queued', 'loading_model', 'loading_dataset', 'training', 'saving']
+const TERMINAL_STATUSES = ['completed', 'stopped', 'failed']
+
 const statusBadgeClass = {
   queued: '',
   loading_model: 'badge-warning',
@@ -30,21 +38,19 @@ const statusBadgeClass = {
   stopped: '',
 }
 
+function StatusBadge({ status }) {
+  return <span className={`badge ${statusBadgeClass[status] || ''}`}>{status}</span>
+}
+
 function FormSection({ icon, title, children }) {
   return (
-    <div style={{ marginBottom: 'var(--spacing-lg)' }}>
-      <h4 style={{
-        fontSize: '0.8125rem', fontWeight: 600, textTransform: 'uppercase',
-        letterSpacing: '0.05em', color: 'var(--color-text-secondary)',
-        display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)',
-        marginBottom: 'var(--spacing-md)', paddingBottom: 'var(--spacing-sm)',
-        borderBottom: '1px solid var(--color-border-subtle)',
-      }}>
-        <i className={icon} style={{ color: 'var(--color-primary)' }} />
+    <section className="form-group">
+      <h4 className="form-group__title">
+        <i className={icon} />
         {title}
       </h4>
-      {children}
-    </div>
+      <div className="form-group__body">{children}</div>
+    </section>
   )
 }
 
@@ -52,36 +58,34 @@ function KeyValueEditor({ entries, onChange }) {
   const addEntry = () => onChange([...entries, { key: '', value: '' }])
   const removeEntry = (i) => onChange(entries.filter((_, idx) => idx !== i))
   const updateEntry = (i, field, val) => {
-    const updated = entries.map((e, idx) => idx === i ? { ...e, [field]: val } : e)
-    onChange(updated)
+    onChange(entries.map((e, idx) => idx === i ? { ...e, [field]: val } : e))
   }
 
   return (
-    <div>
+    <div className="ft-kv">
       {entries.map((entry, i) => (
-        <div key={i} style={{ display: 'flex', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-sm)', alignItems: 'center' }}>
+        <div key={i} className="ft-kv__row">
           <input
-            className="input"
+            className="input ft-kv__key"
             value={entry.key}
             onChange={e => updateEntry(i, 'key', e.target.value)}
             placeholder="Key"
-            style={{ flex: 1 }}
+            aria-label={`Extra option ${i + 1} key`}
           />
           <input
-            className="input"
+            className="input ft-kv__value"
             value={entry.value}
             onChange={e => updateEntry(i, 'value', e.target.value)}
             placeholder="Value"
-            style={{ flex: 2 }}
+            aria-label={`Extra option ${i + 1} value`}
           />
-          <button type="button" className="btn btn-danger" style={{ padding: 'var(--spacing-xs) var(--spacing-sm)' }} onClick={() => removeEntry(i)}>
+          <button type="button" className="btn btn-danger btn-sm" onClick={() => removeEntry(i)} aria-label={`Remove extra option ${i + 1}`}>
             <i className="fas fa-times" />
           </button>
         </div>
       ))}
-      <button type="button" className="btn" onClick={addEntry} style={{ fontSize: '0.8125rem' }}>
-        <i className="fas fa-plus" style={{ marginRight: 'var(--spacing-xs)' }} />
-        Add option
+      <button type="button" className="btn btn-sm" onClick={addEntry}>
+        <i className="fas fa-plus" /> Add option
       </button>
     </div>
   )
@@ -97,69 +101,54 @@ function CopyButton({ text }) {
     })
   }
   return (
-    <button className="btn" style={{ padding: '1px 4px', fontSize: '0.7rem' }} onClick={handleCopy} title="Copy to clipboard">
+    <button className="btn btn-sm btn-ghost" onClick={handleCopy} title="Copy to clipboard" aria-label="Copy to clipboard">
       <i className={`fas fa-${copied ? 'check' : 'copy'}`} />
     </button>
   )
 }
 
-function JobCard({ job, isSelected, onSelect, onUseConfig, onDelete }) {
+function JobCard({ job, onSelect, onUseConfig, onDelete }) {
   return (
-    <div
-      className="card"
-      style={{
-        cursor: 'pointer', marginBottom: 'var(--spacing-sm)',
-        border: isSelected ? '2px solid var(--color-primary)' : undefined,
-      }}
-      onClick={() => onSelect(job)}
-    >
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <div>
+    <div className="card ft-job" onClick={() => onSelect(job)}>
+      <div className="ft-job__head">
+        <div className="ft-job__title">
           <strong>{job.model}</strong>
-          <span style={{ marginLeft: 'var(--spacing-sm)', fontSize: '0.875rem', color: 'var(--color-text-muted)' }}>
-            {job.backend} / {job.training_method || 'sft'}
-          </span>
+          <span className="ft-job__backend">{job.backend} / {job.training_method || 'sft'}</span>
         </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
+        <div className="row-actions">
           <button
-            className="btn"
-            style={{ fontSize: '0.75rem', padding: '2px 6px' }}
+            className="btn btn-sm"
             onClick={(e) => { e.stopPropagation(); onUseConfig(job) }}
             title="Use this job's configuration for a new job"
           >
             <i className="fas fa-copy" /> Reuse
           </button>
-          {['completed', 'stopped', 'failed'].includes(job.status) && (
+          {TERMINAL_STATUSES.includes(job.status) && (
             <button
-              className="btn btn-danger"
-              style={{ fontSize: '0.75rem', padding: '2px 6px' }}
+              className="btn btn-danger btn-sm"
               onClick={(e) => { e.stopPropagation(); onDelete(job.id) }}
               title="Delete this job and its data"
+              aria-label="Delete job"
             >
               <i className="fas fa-trash" />
             </button>
           )}
-          <span className={`badge ${statusBadgeClass[job.status] || ''}`}>
-            {job.status}
-          </span>
+          <StatusBadge status={job.status} />
         </div>
       </div>
-      <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)', marginTop: 'var(--spacing-xs)' }}>
+      <div className="ft-job__meta">
         ID: {job.id?.slice(0, 8)}... | Created: {job.created_at}
       </div>
       {job.output_dir && (
-        <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: '2px', display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)' }}>
+        <div className="ft-job__path">
           <i className="fas fa-folder" />
-          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '300px' }} title={job.output_dir}>
-            {job.output_dir}
-          </span>
+          <span className="cell-truncate" title={job.output_dir}>{job.output_dir}</span>
           <CopyButton text={job.output_dir} />
         </div>
       )}
       {job.message && (
-        <div style={{ fontSize: '0.75rem', color: job.status === 'failed' ? 'var(--color-error)' : 'var(--color-text-muted)', marginTop: '2px' }}>
-          <i className="fas fa-info-circle" style={{ marginRight: '2px' }} />
-          {job.message}
+        <div className={`ft-job__message${job.status === 'failed' ? ' ft-job__message--failed' : ''}`}>
+          <i className="fas fa-info-circle" /> {job.message}
         </div>
       )}
     </div>
@@ -241,15 +230,17 @@ function SingleMetricChart({ data, valueKey, label, color, formatValue, events }
   }
 
   return (
-    <div>
-      <div style={{ fontSize: '0.8125rem', fontWeight: 600, marginBottom: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
-        <span style={{ display: 'inline-block', width: 12, height: 3, background: color, borderRadius: "var(--radius-sm)" }} />
+    <div className="ft-chart" style={{ '--ft-chart-color': color }}>
+      <div className="ft-chart__head">
+        <span className="ft-chart__key" />
         {label}
       </div>
       <svg
         ref={svgRef}
+        className="ft-chart__svg"
         viewBox={`0 0 ${W} ${H}`}
-        style={{ width: '100%', height: 'auto', maxHeight: 220, background: 'var(--color-bg-secondary)', borderRadius: 'var(--radius-sm)' }}
+        role="img"
+        aria-label={`${label} over training steps`}
         onMouseMove={handleMouseMove}
         onMouseLeave={() => setTooltip(null)}
       >
@@ -258,10 +249,8 @@ function SingleMetricChart({ data, valueKey, label, color, formatValue, events }
             stroke="currentColor" strokeOpacity={0.08} strokeDasharray="3 3" />
         ))}
         {epochBoundaries.map((eb, i) => (
-          <g key={i}>
-            <line x1={x(eb.step)} x2={x(eb.step)} y1={pad.top} y2={H - pad.bottom}
-              stroke="currentColor" strokeOpacity={0.15} strokeDasharray="4 3" />
-          </g>
+          <line key={i} x1={x(eb.step)} x2={x(eb.step)} y1={pad.top} y2={H - pad.bottom}
+            stroke="currentColor" strokeOpacity={0.15} strokeDasharray="4 3" />
         ))}
         <polyline points={points} fill="none" stroke={color} strokeWidth={1.5} strokeLinejoin="round" />
         <line x1={pad.left} x2={W - pad.right} y1={H - pad.bottom} y2={H - pad.bottom}
@@ -309,16 +298,14 @@ function ChartsGrid({ events }) {
   if (lossData.length < 2 && lrData.length < 2 && gradNormData.length < 2) return null
 
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)' }}>
+    <div className="ft-chart-grid">
       <SingleMetricChart data={lossData} valueKey="loss" label="Training Loss" color="var(--color-data-7)" events={events} />
       {evalData.length >= 1 ? (
         <SingleMetricChart data={evalData} valueKey="eval_loss" label="Eval Loss" color="var(--color-data-2)" events={events} />
       ) : (
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--color-bg-secondary)', borderRadius: 'var(--radius-sm)', minHeight: 120 }}>
-          <span style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>
-            <i className="fas fa-chart-area" style={{ marginRight: 6 }} />
-            Eval Loss — waiting for eval data
-          </span>
+        <div className="ft-chart-empty">
+          <i className="fas fa-chart-area" />
+          Eval loss, waiting for eval data
         </div>
       )}
       <SingleMetricChart data={lrData} valueKey="learning_rate" label="Learning Rate" color="var(--color-data-3)" formatValue={fmtExp} events={events} />
@@ -334,7 +321,7 @@ function TrainingMonitor({ job, onStop }) {
   const eventSourceRef = useRef(null)
 
   useEffect(() => {
-    if (!job || !['queued', 'loading_model', 'loading_dataset', 'training', 'saving'].includes(job.status)) {
+    if (!job || !ACTIVE_STATUSES.includes(job.status)) {
       setConnecting(false)
       return
     }
@@ -355,7 +342,7 @@ function TrainingMonitor({ job, onStop }) {
         if (data.loss > 0) {
           setEvents(prev => [...prev, data])
         }
-        if (['completed', 'failed', 'stopped'].includes(data.status)) {
+        if (TERMINAL_STATUSES.includes(data.status)) {
           es.close()
         }
       } catch (_) {}
@@ -373,89 +360,64 @@ function TrainingMonitor({ job, onStop }) {
 
   if (!job) return null
 
+  const progress = Math.min(latest?.progress_percent || 0, 100)
+
   return (
-    <div className="card" style={{ marginTop: 'var(--spacing-md)' }}>
-      <h3 style={{ margin: '0 0 var(--spacing-md) 0' }}>
-        <i className="fas fa-chart-line" style={{ marginRight: 'var(--spacing-sm)' }} />
-        Training Monitor
-      </h3>
+    <section className="card">
+      <SectionHeading>
+        <i className="fas fa-chart-line" /> Training monitor
+      </SectionHeading>
 
       {connecting && !latest && (
-        <div style={{ textAlign: 'center', padding: 'var(--spacing-lg)', color: 'var(--color-text-muted)' }}>
-          <LoadingSpinner size="sm" /> Connecting to training stream...
-        </div>
+        <EmptyState
+          icon="fas fa-satellite-dish"
+          title="Connecting to training stream"
+          body="Waiting for the first progress event from the backend."
+        />
       )}
 
       {latest && (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(130px, 1fr))', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-          <div className="card" style={{ padding: 'var(--spacing-sm)', textAlign: 'center' }}>
-            <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>Status</div>
-            <div style={{ fontWeight: 'bold' }}>{latest.status}</div>
-          </div>
-          <div className="card" style={{ padding: 'var(--spacing-sm)', textAlign: 'center' }}>
-            <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>Progress</div>
-            <div style={{ fontWeight: 'bold' }}>{latest.progress_percent?.toFixed(1)}%</div>
-          </div>
-          <div className="card" style={{ padding: 'var(--spacing-sm)', textAlign: 'center' }}>
-            <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>Step</div>
-            <div style={{ fontWeight: 'bold' }}>{latest.current_step} / {latest.total_steps}</div>
-          </div>
-          <div className="card" style={{ padding: 'var(--spacing-sm)', textAlign: 'center' }}>
-            <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>Loss</div>
-            <div style={{ fontWeight: 'bold' }}>{latest.loss?.toFixed(4)}</div>
-          </div>
-          <div className="card" style={{ padding: 'var(--spacing-sm)', textAlign: 'center' }}>
-            <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>Epoch</div>
-            <div style={{ fontWeight: 'bold' }}>{latest.current_epoch?.toFixed(2)} / {latest.total_epochs?.toFixed(0)}</div>
-          </div>
-          <div className="card" style={{ padding: 'var(--spacing-sm)', textAlign: 'center' }}>
-            <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>Learning Rate</div>
-            <div style={{ fontWeight: 'bold' }}>{latest.learning_rate?.toExponential(2)}</div>
-          </div>
-          <div className="card" style={{ padding: 'var(--spacing-sm)', textAlign: 'center' }}>
-            <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>ETA</div>
-            <div style={{ fontWeight: 'bold' }}>{formatEta(latest.eta_seconds)}</div>
+        <>
+          <div className="stat-grid">
+            <StatCard icon="fas fa-circle-notch" label="Status" value={latest.status} accentVar="--color-info" />
+            <StatCard icon="fas fa-percent" label="Progress" value={`${latest.progress_percent?.toFixed(1)}%`} accentVar="--color-primary" />
+            <StatCard icon="fas fa-shoe-prints" label="Step" value={`${latest.current_step} / ${latest.total_steps}`} />
+            <StatCard icon="fas fa-arrow-trend-down" label="Loss" value={latest.loss?.toFixed(4)} accentVar="--color-data-7" />
+            <StatCard icon="fas fa-repeat" label="Epoch" value={`${latest.current_epoch?.toFixed(2)} / ${latest.total_epochs?.toFixed(0)}`} />
+            <StatCard icon="fas fa-gauge-high" label="Learning rate" value={latest.learning_rate?.toExponential(2)} accentVar="--color-data-3" />
+            <StatCard icon="fas fa-hourglass-half" label="ETA" value={formatEta(latest.eta_seconds)} />
+            {latest.extra_metrics?.tokens_per_second > 0 && (
+              <StatCard icon="fas fa-bolt" label="Tokens/sec" value={latest.extra_metrics.tokens_per_second.toFixed(0)} accentVar="--color-success" />
+            )}
           </div>
-          {latest.extra_metrics?.tokens_per_second > 0 && (
-            <div className="card" style={{ padding: 'var(--spacing-sm)', textAlign: 'center' }}>
-              <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>Tokens/sec</div>
-              <div style={{ fontWeight: 'bold' }}>{latest.extra_metrics.tokens_per_second.toFixed(0)}</div>
-            </div>
-          )}
-        </div>
-      )}
 
-      {/* Progress bar */}
-      {latest && (
-        <div style={{ background: 'var(--color-bg-secondary)', borderRadius: 'var(--radius-sm)', height: '8px', marginBottom: 'var(--spacing-md)' }}>
-          <div style={{
-            background: 'var(--color-primary)', borderRadius: 'var(--radius-sm)', height: '100%',
-            width: `${Math.min(latest.progress_percent || 0, 100)}%`, transition: 'width 0.3s'
-          }} />
-        </div>
+          <div
+            className="progress-bar"
+            role="progressbar"
+            aria-valuenow={Math.round(progress)}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-label="Training progress"
+          >
+            <div className="progress-bar__fill" style={{ width: `${progress}%` }} />
+          </div>
+        </>
       )}
 
-      {/* Training charts (2x2 grid) */}
       <ChartsGrid events={events} />
 
       {latest?.message && (
-        <div style={{ fontSize: '0.875rem', color: 'var(--color-text-muted)' }}>
-          <i className="fas fa-info-circle" style={{ marginRight: 'var(--spacing-xs)' }} />
-          {latest.message}
-        </div>
+        <p className="form-hint">
+          <i className="fas fa-info-circle" /> {latest.message}
+        </p>
       )}
 
-      {['queued', 'loading_model', 'loading_dataset', 'training', 'saving'].includes(latest?.status || job.status) && (
-        <button
-          className="btn btn-danger"
-          style={{ marginTop: 'var(--spacing-sm)' }}
-          onClick={() => onStop(job.id)}
-        >
-          <i className="fas fa-stop" style={{ marginRight: 'var(--spacing-xs)' }} />
-          Stop Training
+      {ACTIVE_STATUSES.includes(latest?.status || job.status) && (
+        <button className="btn btn-danger" onClick={() => onStop(job.id)}>
+          <i className="fas fa-stop" /> Stop training
         </button>
       )}
-    </div>
+    </section>
   )
 }
 
@@ -472,53 +434,58 @@ function CheckpointsPanel({ job, onResume, onExportCheckpoint }) {
   }, [job?.id])
 
   if (!job) return null
-  if (loading) return <div style={{ padding: 'var(--spacing-md)', fontSize: '0.875rem' }}><LoadingSpinner size="sm" /> Loading checkpoints...</div>
+  if (loading) {
+    return (
+      <section className="card">
+        <SectionHeading><i className="fas fa-save" /> Checkpoints</SectionHeading>
+        <p className="form-hint"><LoadingSpinner size="sm" /> Loading checkpoints...</p>
+      </section>
+    )
+  }
   if (checkpoints.length === 0) return null
 
   return (
-    <div className="card" style={{ marginTop: 'var(--spacing-md)' }}>
-      <h3 style={{ margin: '0 0 var(--spacing-md) 0' }}>
-        <i className="fas fa-save" style={{ marginRight: 'var(--spacing-sm)' }} />
-        Checkpoints
-      </h3>
-      <div style={{ overflowX: 'auto' }}>
-        <table style={{ width: '100%', fontSize: '0.8125rem', borderCollapse: 'collapse' }}>
+    <section className="card">
+      <SectionHeading><i className="fas fa-save" /> Checkpoints</SectionHeading>
+      <ResponsiveTable>
+        <table className="data-table">
           <thead>
-            <tr style={{ borderBottom: '1px solid var(--color-border-subtle)', textAlign: 'left' }}>
-              <th style={{ padding: 'var(--spacing-xs) var(--spacing-sm)' }}>Step</th>
-              <th style={{ padding: 'var(--spacing-xs) var(--spacing-sm)' }}>Epoch</th>
-              <th style={{ padding: 'var(--spacing-xs) var(--spacing-sm)' }}>Loss</th>
-              <th style={{ padding: 'var(--spacing-xs) var(--spacing-sm)' }}>Created</th>
-              <th style={{ padding: 'var(--spacing-xs) var(--spacing-sm)' }}>Path</th>
-              <th style={{ padding: 'var(--spacing-xs) var(--spacing-sm)' }}>Actions</th>
+            <tr>
+              <th>Step</th>
+              <th>Epoch</th>
+              <th>Loss</th>
+              <th>Created</th>
+              <th>Path</th>
+              <th>Actions</th>
             </tr>
           </thead>
           <tbody>
             {checkpoints.map(cp => (
-              <tr key={cp.path} style={{ borderBottom: '1px solid var(--color-border-subtle)' }}>
-                <td style={{ padding: 'var(--spacing-xs) var(--spacing-sm)' }}>{cp.step}</td>
-                <td style={{ padding: 'var(--spacing-xs) var(--spacing-sm)' }}>{cp.epoch?.toFixed(2)}</td>
-                <td style={{ padding: 'var(--spacing-xs) var(--spacing-sm)' }}>{cp.loss?.toFixed(4)}</td>
-                <td style={{ padding: 'var(--spacing-xs) var(--spacing-sm)' }}>{cp.created_at}</td>
-                <td style={{ padding: 'var(--spacing-xs) var(--spacing-sm)', maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={cp.path}>
-                  {cp.path} <CopyButton text={cp.path} />
+              <tr key={cp.path}>
+                <td>{cp.step}</td>
+                <td>{cp.epoch?.toFixed(2)}</td>
+                <td>{cp.loss?.toFixed(4)}</td>
+                <td>{cp.created_at}</td>
+                <td>
+                  <span className="cell-truncate cell-mono" title={cp.path}>{cp.path}</span>
+                  <CopyButton text={cp.path} />
                 </td>
-                <td style={{ padding: 'var(--spacing-xs) var(--spacing-sm)', whiteSpace: 'nowrap' }}>
-                  <button className="btn" style={{ fontSize: '0.7rem', padding: '2px 6px', marginRight: 'var(--spacing-xs)' }}
-                    onClick={() => onResume(cp)} title="Resume training from this checkpoint">
-                    <i className="fas fa-play" /> Resume
-                  </button>
-                  <button className="btn" style={{ fontSize: '0.7rem', padding: '2px 6px' }}
-                    onClick={() => onExportCheckpoint(cp)} title="Export this checkpoint">
-                    <i className="fas fa-file-export" /> Export
-                  </button>
+                <td>
+                  <div className="row-actions">
+                    <button className="btn btn-sm" onClick={() => onResume(cp)} title="Resume training from this checkpoint">
+                      <i className="fas fa-play" /> Resume
+                    </button>
+                    <button className="btn btn-sm" onClick={() => onExportCheckpoint(cp)} title="Export this checkpoint">
+                      <i className="fas fa-file-export" /> Export
+                    </button>
+                  </div>
                 </td>
               </tr>
             ))}
           </tbody>
         </table>
-      </div>
-    </div>
+      </ResponsiveTable>
+    </section>
   )
 }
 
@@ -611,90 +578,95 @@ function ExportPanel({ job, prefilledCheckpoint }) {
   }
 
   // Show export panel for completed, stopped, and failed jobs (checkpoints may exist)
-  if (!job || !['completed', 'stopped', 'failed'].includes(job.status)) return null
+  if (!job || !TERMINAL_STATUSES.includes(job.status)) return null
+
+  const failed = message.includes('failed')
 
   return (
-    <div className="card" style={{ marginTop: 'var(--spacing-md)' }}>
-      <h3 style={{ margin: '0 0 var(--spacing-md) 0' }}>
-        <i className="fas fa-file-export" style={{ marginRight: 'var(--spacing-sm)' }} />
-        Export Model
-      </h3>
-
-      {checkpoints.length > 0 && (
-        <div style={{ marginBottom: 'var(--spacing-md)' }}>
-          <label className="form-label">Checkpoint</label>
-          <select value={selectedCheckpoint} onChange={e => setSelectedCheckpoint(e.target.value)} className="input">
-            <option value="">Final model (output directory)</option>
-            {checkpoints.map(cp => (
-              <option key={cp.path} value={cp.path}>
-                Step {cp.step} (loss: {cp.loss?.toFixed(4)})
-              </option>
-            ))}
-          </select>
-        </div>
-      )}
+    <section className="card">
+      <SectionHeading><i className="fas fa-file-export" /> Export model</SectionHeading>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)' }}>
-        <div>
-          <label className="form-label">Export Format</label>
-          <select value={exportFormat} onChange={e => setExportFormat(e.target.value)} className="input">
-            <option value="lora">LoRA Adapter</option>
-            <option value="merged_16bit">Merged (16-bit)</option>
-            <option value="merged_4bit">Merged (4-bit)</option>
-            <option value="gguf">GGUF</option>
-          </select>
-        </div>
-        {exportFormat === 'gguf' && (
+      <div className="ft-stack">
+        {checkpoints.length > 0 && (
           <div>
-            <label className="form-label">Quantization</label>
-            <input
-              list="quant-presets"
-              value={quantMethod}
-              onChange={e => setQuantMethod(e.target.value)}
-              placeholder="e.g. q4_k_m, bf16, f32"
-              className="input"
-            />
-            <datalist id="quant-presets">
-              {QUANT_PRESETS.map(q => (
-                <option key={q} value={q} />
+            <label className="form-label" htmlFor="ft-export-checkpoint">Checkpoint</label>
+            <select id="ft-export-checkpoint" value={selectedCheckpoint} onChange={e => setSelectedCheckpoint(e.target.value)} className="input">
+              <option value="">Final model (output directory)</option>
+              {checkpoints.map(cp => (
+                <option key={cp.path} value={cp.path}>
+                  Step {cp.step} (loss: {cp.loss?.toFixed(4)})
+                </option>
               ))}
-            </datalist>
+            </select>
           </div>
         )}
-      </div>
 
-      <div style={{ marginBottom: 'var(--spacing-md)' }}>
-        <label className="form-label">Model Name (leave blank to auto-generate)</label>
-        <input
-          type="text"
-          value={modelName}
-          onChange={e => setModelName(e.target.value)}
-          placeholder="e.g. my-finetuned-model"
-          className="input"
-        />
-      </div>
+        <div className="form-grid-2col">
+          <div>
+            <label className="form-label" htmlFor="ft-export-format">Export format</label>
+            <select id="ft-export-format" value={exportFormat} onChange={e => setExportFormat(e.target.value)} className="input">
+              <option value="lora">LoRA adapter</option>
+              <option value="merged_16bit">Merged (16-bit)</option>
+              <option value="merged_4bit">Merged (4-bit)</option>
+              <option value="gguf">GGUF</option>
+            </select>
+          </div>
+          {exportFormat === 'gguf' && (
+            <div>
+              <label className="form-label" htmlFor="ft-export-quant">Quantization</label>
+              <input
+                id="ft-export-quant"
+                list="quant-presets"
+                value={quantMethod}
+                onChange={e => setQuantMethod(e.target.value)}
+                placeholder="e.g. q4_k_m, bf16, f32"
+                className="input"
+              />
+              <datalist id="quant-presets">
+                {QUANT_PRESETS.map(q => <option key={q} value={q} />)}
+              </datalist>
+            </div>
+          )}
+        </div>
 
-      <button className="btn btn-primary" onClick={handleExport} disabled={exporting}>
-        {exporting ? <><LoadingSpinner size="sm" /> Exporting...</> :
-          <><i className="fas fa-download" style={{ marginRight: 'var(--spacing-xs)' }} /> Export</>}
-      </button>
+        <div>
+          <label className="form-label" htmlFor="ft-export-name">Model name</label>
+          <input
+            id="ft-export-name"
+            type="text"
+            value={modelName}
+            onChange={e => setModelName(e.target.value)}
+            placeholder="e.g. my-finetuned-model"
+            className="input"
+          />
+          <p className="form-hint">Leave blank to generate one from the job.</p>
+        </div>
 
-      {message && (
-        <div style={{ marginTop: 'var(--spacing-sm)', fontSize: '0.875rem', color: message.includes('failed') ? 'var(--color-error)' : 'var(--color-success)' }}>
-          {exporting && <LoadingSpinner size="sm" />} {message}
-          {exportedModelName && !message.includes('failed') && (
-            <span style={{ marginLeft: 'var(--spacing-sm)' }}>
-              <a href={`/app/chat/${encodeURIComponent(exportedModelName)}`} style={{ color: 'var(--color-primary)', textDecoration: 'underline' }}>
-                Chat with {exportedModelName}
-              </a>
-              <a href={fineTuneApi.downloadUrl(job.id)} download className="btn" style={{ marginLeft: 'var(--spacing-sm)', fontSize: '0.8125rem', padding: '2px 8px' }}>
-                <i className="fas fa-download" /> Download Archive
-              </a>
-            </span>
-          )}
+        <div className="ft-actions">
+          <button className="btn btn-primary" onClick={handleExport} disabled={exporting}>
+            {exporting
+              ? <><LoadingSpinner size="sm" /> Exporting...</>
+              : <><i className="fas fa-download" /> Export</>}
+          </button>
         </div>
-      )}
-    </div>
+
+        {message && (
+          <div className={`ft-export-status${failed ? ' ft-export-status--error' : ''}`} role="status">
+            {exporting && <LoadingSpinner size="sm" />} {message}
+            {exportedModelName && !failed && (
+              <span className="ft-export-status__links">
+                <a href={`/app/chat/${encodeURIComponent(exportedModelName)}`} className="badge badge-link">
+                  Chat with {exportedModelName}
+                </a>
+                <a href={fineTuneApi.downloadUrl(job.id)} download className="btn btn-sm">
+                  <i className="fas fa-download" /> Download archive
+                </a>
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
   )
 }
 
@@ -815,7 +787,7 @@ export default function FineTune() {
         if (liquidAudioValDataset.trim()) extra.val_dataset = liquidAudioValDataset.trim()
       }
 
-      const isAdapter = ['lora', 'loha', 'lokr'].includes(trainingType)
+      const isAdapterType = ['lora', 'loha', 'lokr'].includes(trainingType)
 
       const req = {
         model,
@@ -827,10 +799,10 @@ export default function FineTune() {
         num_epochs: numEpochs,
         batch_size: batchSize,
         learning_rate: learningRate,
-        adapter_rank: isAdapter ? adapterRank : 0,
-        adapter_alpha: isAdapter ? adapterAlpha : 0,
-        adapter_dropout: isAdapter && adapterDropout > 0 ? adapterDropout : undefined,
-        target_modules: isAdapter && targetModules.trim() ? targetModules.split(',').map(s => s.trim()) : undefined,
+        adapter_rank: isAdapterType ? adapterRank : 0,
+        adapter_alpha: isAdapterType ? adapterAlpha : 0,
+        adapter_dropout: isAdapterType && adapterDropout > 0 ? adapterDropout : undefined,
+        target_modules: isAdapterType && targetModules.trim() ? targetModules.split(',').map(s => s.trim()) : undefined,
         gradient_accumulation_steps: gradAccum,
         warmup_steps: warmupSteps,
         max_steps: maxSteps > 0 ? maxSteps : undefined,
@@ -1070,47 +1042,45 @@ export default function FineTune() {
     <div className="page page--wide">
       <UnsavedChangesGuard when={dirty && showForm && !loading} />
       <PageHeader
-        title={<>Fine-Tuning <span className="badge badge-warning" style={{ fontSize: '0.45em', verticalAlign: 'middle' }}>Experimental</span></>}
+        title={<>Fine-tuning <span className={`badge badge-warning ft-actions btn fas fa-upload btn btn-primary fas fa-${showForm ? 'times' : 'plus'}`}>Experimental</span></>}
         supporting="Create and manage fine-tuning jobs"
         actions={
-          <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
-            <button className="btn" onClick={handleImportConfig}>
-              <i className="fas fa-upload" style={{ marginRight: 'var(--spacing-xs)' }} /> Import Config
+          <div>
+            <button onClick={handleImportConfig}>
+              <i /> Import config
             </button>
-            <button className="btn btn-primary" onClick={() => setShowForm(!showForm)}>
-              <i className={`fas fa-${showForm ? 'times' : 'plus'}`} style={{ marginRight: 'var(--spacing-xs)' }} />
-              {showForm ? 'Cancel' : 'New Job'}
+            <button onClick={() => setShowForm(!showForm)}>
+              <i />
+              {showForm ? 'Cancel' : 'New job'}
             </button>
           </div>
         }
       />
 
       {error && (
-        <div className="card" style={{ background: 'var(--color-error-light)', borderColor: 'var(--color-error-border)', color: 'var(--color-error)', marginBottom: 'var(--spacing-md)', padding: 'var(--spacing-md)' }}>
-          <i className="fas fa-exclamation-triangle" style={{ marginRight: 'var(--spacing-xs)' }} /> {error}
+        <div className="attention-callout attention-callout--error" role="alert">
+          <span><i className="fas fa-exclamation-triangle" /> {error}</span>
         </div>
       )}
 
       {showForm && (
-        <form onSubmit={handleSubmit} className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
+        <form onSubmit={handleSubmit} className="card ft-form">
 
           {resumeFromCheckpoint && (
-            <div style={{ marginBottom: 'var(--spacing-md)', padding: 'var(--spacing-sm) var(--spacing-md)', background: 'var(--color-bg-secondary)', borderRadius: 'var(--radius-sm)', display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
-              <i className="fas fa-redo" style={{ color: 'var(--color-primary)' }} />
-              <span style={{ fontSize: '0.875rem' }}>
-                Resuming from checkpoint: <code style={{ fontSize: '0.8rem' }}>{resumeFromCheckpoint}</code>
-              </span>
-              <button type="button" className="btn" style={{ padding: '2px 6px', fontSize: '0.75rem', marginLeft: 'auto' }} onClick={() => setResumeFromCheckpoint('')}>
+            <div className="ft-banner">
+              <i className="fas fa-redo ft-banner__icon" />
+              <span>Resuming from checkpoint: <code>{resumeFromCheckpoint}</code></span>
+              <button type="button" className="btn btn-sm ft-banner__spacer" onClick={() => setResumeFromCheckpoint('')}>
                 <i className="fas fa-times" /> Clear
               </button>
             </div>
           )}
 
-          <FormSection icon="fas fa-server" title="Model & Backend">
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 2fr', gap: 'var(--spacing-md)' }}>
+          <FormSection icon="fas fa-server" title="Model and backend">
+            <div className="ft-grid-model">
               <div>
-                <label className="form-label">Backend</label>
-                <select value={backend} onChange={e => setBackend(e.target.value)} className="input">
+                <label className="form-label" htmlFor="ft-backend">Backend</label>
+                <select id="ft-backend" value={backend} onChange={e => setBackend(e.target.value)} className="input">
                   {backends.length === 0 ? (
                     <option value="" disabled>No backends available</option>
                   ) : (
@@ -1119,91 +1089,89 @@ export default function FineTune() {
                 </select>
               </div>
               <div>
-                <label className="form-label">Training Method</label>
-                <select value={trainingMethod} onChange={e => setTrainingMethod(e.target.value)} className="input">
+                <label className="form-label" htmlFor="ft-method">Training method</label>
+                <select id="ft-method" value={trainingMethod} onChange={e => setTrainingMethod(e.target.value)} className="input">
                   {TRAINING_METHODS.map(m => <option key={m} value={m}>{m.toUpperCase()}</option>)}
                 </select>
               </div>
               <div>
-                <label className="form-label">Model (HuggingFace ID or local path)</label>
-                <input type="text" value={model} onChange={e => setModel(e.target.value)} placeholder="e.g. TinyLlama/TinyLlama-1.1B-Chat-v1.0" className="input" required />
+                <label className="form-label" htmlFor="ft-model">Model</label>
+                <input id="ft-model" type="text" value={model} onChange={e => setModel(e.target.value)} placeholder="e.g. TinyLlama/TinyLlama-1.1B-Chat-v1.0" className="input" required />
+                <p className="form-hint">A HuggingFace ID or a local path.</p>
               </div>
             </div>
-            <div style={{ marginTop: 'var(--spacing-md)' }}>
-              <label className="form-label">HuggingFace Token (for gated models)</label>
-              <input type="password" value={hfToken} onChange={e => setHfToken(e.target.value)} placeholder="hf_..." className="input" />
+            <div>
+              <label className="form-label" htmlFor="ft-hf-token">HuggingFace token</label>
+              <input id="ft-hf-token" type="password" value={hfToken} onChange={e => setHfToken(e.target.value)} placeholder="hf_..." className="input" />
+              <p className="form-hint">Only needed for gated models.</p>
             </div>
           </FormSection>
 
-          <FormSection icon="fas fa-layer-group" title="Training Type & Adapter">
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))', gap: 'var(--spacing-md)' }}>
+          <FormSection icon="fas fa-layer-group" title="Training type and adapter">
+            <div className="ft-grid-auto">
               <div>
-                <label className="form-label">Training Type</label>
-                <select value={trainingType} onChange={e => setTrainingType(e.target.value)} className="input">
+                <label className="form-label" htmlFor="ft-type">Training type</label>
+                <select id="ft-type" value={trainingType} onChange={e => setTrainingType(e.target.value)} className="input">
                   {TRAINING_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
                 </select>
               </div>
               {isAdapter && (
                 <>
                   <div>
-                    <label className="form-label">Rank</label>
-                    <input type="number" value={adapterRank} onChange={e => setAdapterRank(Number(e.target.value))} className="input" min={1} />
+                    <label className="form-label" htmlFor="ft-rank">Rank</label>
+                    <input id="ft-rank" type="number" value={adapterRank} onChange={e => setAdapterRank(Number(e.target.value))} className="input" min={1} />
                   </div>
                   <div>
-                    <label className="form-label">Alpha</label>
-                    <input type="number" value={adapterAlpha} onChange={e => setAdapterAlpha(Number(e.target.value))} className="input" min={1} />
+                    <label className="form-label" htmlFor="ft-alpha">Alpha</label>
+                    <input id="ft-alpha" type="number" value={adapterAlpha} onChange={e => setAdapterAlpha(Number(e.target.value))} className="input" min={1} />
                   </div>
                   <div>
-                    <label className="form-label">Dropout</label>
-                    <input type="number" value={adapterDropout} onChange={e => setAdapterDropout(Number(e.target.value))} className="input" min={0} max={1} step={0.05} />
+                    <label className="form-label" htmlFor="ft-dropout">Dropout</label>
+                    <input id="ft-dropout" type="number" value={adapterDropout} onChange={e => setAdapterDropout(Number(e.target.value))} className="input" min={0} max={1} step={0.05} />
                   </div>
                 </>
               )}
             </div>
             {isAdapter && (
-              <div style={{ marginTop: 'var(--spacing-md)' }}>
-                <label className="form-label">Target Modules (comma-separated, blank for default)</label>
-                <input type="text" value={targetModules} onChange={e => setTargetModules(e.target.value)} placeholder="e.g. q_proj, v_proj, k_proj, o_proj" className="input" />
+              <div>
+                <label className="form-label" htmlFor="ft-target-modules">Target modules</label>
+                <input id="ft-target-modules" type="text" value={targetModules} onChange={e => setTargetModules(e.target.value)} placeholder="e.g. q_proj, v_proj, k_proj, o_proj" className="input" />
+                <p className="form-hint">Comma-separated. Leave blank for the backend default.</p>
               </div>
             )}
           </FormSection>
 
           <FormSection icon="fas fa-database" title="Dataset">
-            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 'var(--spacing-md)' }}>
+            <div className="ft-grid-dataset">
               <div>
-                <label className="form-label">Source (HuggingFace ID or leave blank to upload)</label>
-                <input type="text" value={datasetSource} onChange={e => setDatasetSource(e.target.value)} placeholder="e.g. tatsu-lab/alpaca" className="input" />
+                <label className="form-label" htmlFor="ft-dataset">Source</label>
+                <input id="ft-dataset" type="text" value={datasetSource} onChange={e => setDatasetSource(e.target.value)} placeholder="e.g. tatsu-lab/alpaca" className="input" />
+                <p className="form-hint">A HuggingFace ID, or leave blank and upload a file.</p>
               </div>
               <div>
-                <label className="form-label">Split</label>
-                <input type="text" value={datasetSplit} onChange={e => setDatasetSplit(e.target.value)} placeholder="e.g. train" className="input" />
+                <label className="form-label" htmlFor="ft-split">Split</label>
+                <input id="ft-split" type="text" value={datasetSplit} onChange={e => setDatasetSplit(e.target.value)} placeholder="e.g. train" className="input" />
               </div>
               <div>
-                <label className="form-label">Upload File</label>
-                <input type="file" onChange={e => setDatasetFile(e.target.files[0])} accept=".json,.jsonl,.csv" className="input" style={{ padding: '6px' }} />
+                <label className="form-label" htmlFor="ft-dataset-file">Upload file</label>
+                <input id="ft-dataset-file" type="file" onChange={e => setDatasetFile(e.target.files[0])} accept=".json,.jsonl,.csv" className="input input--file" />
               </div>
             </div>
           </FormSection>
 
           {trainingMethod === 'grpo' && (
-            <FormSection icon="fas fa-trophy" title="Reward Functions (GRPO)">
-              <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)', marginBottom: 'var(--spacing-md)' }}>
+            <FormSection icon="fas fa-trophy" title="Reward functions (GRPO)">
+              <p className="ft-hint">
                 GRPO requires at least one reward function. Select built-in functions or add custom ones.
-              </div>
+              </p>
 
-              {/* Built-in reward functions */}
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
+              <div className="ft-rewards">
                 {BUILTIN_REWARDS.map(builtin => {
                   const isSelected = rewardFunctions.some(rf => rf.type === 'builtin' && rf.name === builtin.name)
                   const selectedRf = rewardFunctions.find(rf => rf.type === 'builtin' && rf.name === builtin.name)
                   return (
-                    <div key={builtin.name} style={{
-                      padding: 'var(--spacing-sm) var(--spacing-md)',
-                      border: `1px solid ${isSelected ? 'var(--color-primary)' : 'var(--color-border-subtle)'}`,
-                      borderRadius: 'var(--radius-sm)',
-                      background: isSelected ? 'var(--color-bg-secondary)' : 'transparent',
-                    }}>
-                      <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', cursor: 'pointer' }}>
+                    <div key={builtin.name} className={`ft-reward${isSelected ? ' ft-reward--on' : ''}`}>
+                      <label className="ft-reward__label">
                         <input
                           type="checkbox"
                           checked={isSelected}
@@ -1215,20 +1183,22 @@ export default function FineTune() {
                             }
                           }}
                         />
-                        <div>
-                          <div style={{ fontWeight: 600, fontSize: '0.8125rem' }}>{builtin.name}</div>
-                          <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>{builtin.description}</div>
-                        </div>
+                        <span>
+                          <span className="ft-reward__name">{builtin.name}</span>
+                          <span className="ft-reward__desc">{builtin.description}</span>
+                        </span>
                       </label>
                       {isSelected && builtin.params.length > 0 && (
-                        <div style={{ marginTop: 'var(--spacing-sm)', paddingLeft: 'var(--spacing-lg)' }}>
+                        <div className="ft-reward__params">
                           {builtin.params.map(param => (
-                            <div key={param.key} style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-xs)' }}>
-                              <label style={{ fontSize: '0.75rem', minWidth: '80px' }}>{param.label}:</label>
+                            <div key={param.key} className="ft-reward__param">
+                              <label className="ft-reward__param-label" htmlFor={`ft-reward-${builtin.name}-${param.key}`}>
+                                {param.label}
+                              </label>
                               <input
+                                id={`ft-reward-${builtin.name}-${param.key}`}
                                 type="text"
                                 className="input"
-                                style={{ width: '100px', fontSize: '0.8125rem', padding: '2px 6px' }}
                                 value={selectedRf?.params?.[param.key] || param.default}
                                 onChange={e => {
                                   setRewardFunctions(prev => prev.map(rf =>
@@ -1247,62 +1217,50 @@ export default function FineTune() {
                 })}
               </div>
 
-              {/* Custom inline reward functions */}
               {rewardFunctions.filter(rf => rf.type === 'inline').map((rf, idx) => (
-                <div key={`inline-${idx}`} style={{
-                  padding: 'var(--spacing-sm) var(--spacing-md)',
-                  border: '1px solid var(--color-primary)',
-                  borderRadius: 'var(--radius-sm)',
-                  background: 'var(--color-bg-secondary)',
-                  marginBottom: 'var(--spacing-sm)',
-                }}>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--spacing-xs)' }}>
-                    <span style={{ fontWeight: 600, fontSize: '0.8125rem' }}>
-                      <i className="fas fa-code" style={{ marginRight: 'var(--spacing-xs)' }} />
-                      {rf.name}
+                <div key={`inline-${idx}`} className="ft-reward ft-reward--on">
+                  <div className="ft-job__head">
+                    <span className="ft-reward__name">
+                      <i className="fas fa-code" /> {rf.name}
                     </span>
-                    <button type="button" className="btn btn-danger" style={{ padding: '2px 6px', fontSize: '0.75rem' }}
-                      onClick={() => setRewardFunctions(prev => prev.filter((_, i) => i !== rewardFunctions.indexOf(rf)))}>
+                    <button
+                      type="button"
+                      className="btn btn-danger btn-sm"
+                      aria-label={`Remove ${rf.name}`}
+                      onClick={() => setRewardFunctions(prev => prev.filter((_, i) => i !== rewardFunctions.indexOf(rf)))}
+                    >
                       <i className="fas fa-times" />
                     </button>
                   </div>
-                  <pre style={{ fontSize: '0.75rem', margin: 0, whiteSpace: 'pre-wrap', color: 'var(--color-text-muted)' }}>
-                    {rf.code}
-                  </pre>
+                  <pre className="ft-reward__code">{rf.code}</pre>
                 </div>
               ))}
 
-              {/* Add custom reward button / form */}
               {showAddCustomReward ? (
-                <div style={{
-                  padding: 'var(--spacing-md)',
-                  border: '1px dashed var(--color-border)',
-                  borderRadius: 'var(--radius-sm)',
-                  marginTop: 'var(--spacing-sm)',
-                }}>
-                  <div style={{ marginBottom: 'var(--spacing-sm)' }}>
-                    <label className="form-label">Function Name</label>
-                    <input type="text" className="input" value={customRewardName} onChange={e => setCustomRewardName(e.target.value)}
-                      placeholder="e.g. my_custom_reward" style={{ maxWidth: '300px' }} />
+                <div className="ft-reward-draft">
+                  <div>
+                    <label className="form-label" htmlFor="ft-reward-name">Function name</label>
+                    <input id="ft-reward-name" type="text" className="input" value={customRewardName} onChange={e => setCustomRewardName(e.target.value)} placeholder="e.g. my_custom_reward" />
                   </div>
-                  <div style={{ marginBottom: 'var(--spacing-sm)' }}>
-                    <label className="form-label">
-                      Function Body
-                      <span style={{ fontWeight: 'normal', fontSize: '0.75rem', color: 'var(--color-text-muted)', marginLeft: 'var(--spacing-sm)' }}>
-                        (receives: completions, **kwargs; must return list[float]; available: re, math, json, string)
-                      </span>
-                    </label>
+                  <div>
+                    <label className="form-label" htmlFor="ft-reward-code">Function body</label>
                     <textarea
-                      className="input"
+                      id="ft-reward-code"
+                      className="textarea"
                       value={customRewardCode}
                       onChange={e => setCustomRewardCode(e.target.value)}
                       placeholder={"return [1.0 if '<think>' in c else 0.0 for c in completions]"}
                       rows={4}
-                      style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}
                     />
+                    <p className="form-hint">
+                      Receives <code>completions, **kwargs</code> and must return <code>list[float]</code>.
+                      Available: re, math, json, string.
+                    </p>
                   </div>
-                  <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
-                    <button type="button" className="btn btn-primary" style={{ fontSize: '0.8125rem' }}
+                  <div className="ft-actions">
+                    <button
+                      type="button"
+                      className="btn btn-primary btn-sm"
                       disabled={!customRewardName.trim() || !customRewardCode.trim()}
                       onClick={() => {
                         setRewardFunctions(prev => [...prev, {
@@ -1313,174 +1271,164 @@ export default function FineTune() {
                         setCustomRewardName('')
                         setCustomRewardCode('')
                         setShowAddCustomReward(false)
-                      }}>
-                      <i className="fas fa-plus" style={{ marginRight: 'var(--spacing-xs)' }} /> Add
+                      }}
+                    >
+                      <i className="fas fa-plus" /> Add
                     </button>
-                    <button type="button" className="btn" style={{ fontSize: '0.8125rem' }}
-                      onClick={() => { setShowAddCustomReward(false); setCustomRewardName(''); setCustomRewardCode('') }}>
+                    <button
+                      type="button"
+                      className="btn btn-sm"
+                      onClick={() => { setShowAddCustomReward(false); setCustomRewardName(''); setCustomRewardCode('') }}
+                    >
                       Cancel
                     </button>
                   </div>
                 </div>
               ) : (
-                <button type="button" className="btn" onClick={() => setShowAddCustomReward(true)} style={{ fontSize: '0.8125rem' }}>
-                  <i className="fas fa-plus" style={{ marginRight: 'var(--spacing-xs)' }} />
-                  Add Custom Reward Function
+                <button type="button" className="btn btn-sm" onClick={() => setShowAddCustomReward(true)}>
+                  <i className="fas fa-plus" /> Add custom reward function
                 </button>
               )}
             </FormSection>
           )}
 
           <FormSection icon="fas fa-sliders-h" title="Hyperparameters">
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))', gap: 'var(--spacing-md)' }}>
+            <div className="ft-grid-auto-sm">
               <div>
-                <label className="form-label">Epochs</label>
-                <input type="number" value={numEpochs} onChange={e => setNumEpochs(Number(e.target.value))} className="input" min={1} />
+                <label className="form-label" htmlFor="ft-epochs">Epochs</label>
+                <input id="ft-epochs" type="number" value={numEpochs} onChange={e => setNumEpochs(Number(e.target.value))} className="input" min={1} />
               </div>
               <div>
-                <label className="form-label">Batch Size</label>
-                <input type="number" value={batchSize} onChange={e => setBatchSize(Number(e.target.value))} className="input" min={1} />
+                <label className="form-label" htmlFor="ft-batch">Batch size</label>
+                <input id="ft-batch" type="number" value={batchSize} onChange={e => setBatchSize(Number(e.target.value))} className="input" min={1} />
               </div>
               <div>
-                <label className="form-label">Learning Rate</label>
-                <input type="text" value={learningRateText} onChange={e => {
-                  setLearningRateText(e.target.value)
-                  const parsed = Number(e.target.value)
-                  if (!isNaN(parsed) && parsed > 0) setLearningRate(parsed)
-                }} className="input" placeholder="e.g. 5e-5 or 0.00005" />
+                <label className="form-label" htmlFor="ft-lr">Learning rate</label>
+                <input
+                  id="ft-lr"
+                  type="text"
+                  value={learningRateText}
+                  onChange={e => {
+                    setLearningRateText(e.target.value)
+                    const parsed = Number(e.target.value)
+                    if (!isNaN(parsed) && parsed > 0) setLearningRate(parsed)
+                  }}
+                  className="input"
+                  placeholder="e.g. 5e-5 or 0.00005"
+                />
               </div>
               <div>
-                <label className="form-label">Grad Accum Steps</label>
-                <input type="number" value={gradAccum} onChange={e => setGradAccum(Number(e.target.value))} className="input" min={1} />
+                <label className="form-label" htmlFor="ft-grad-accum">Grad accum steps</label>
+                <input id="ft-grad-accum" type="number" value={gradAccum} onChange={e => setGradAccum(Number(e.target.value))} className="input" min={1} />
               </div>
               <div>
-                <label className="form-label">Warmup Steps</label>
-                <input type="number" value={warmupSteps} onChange={e => setWarmupSteps(Number(e.target.value))} className="input" min={0} />
+                <label className="form-label" htmlFor="ft-warmup">Warmup steps</label>
+                <input id="ft-warmup" type="number" value={warmupSteps} onChange={e => setWarmupSteps(Number(e.target.value))} className="input" min={0} />
               </div>
               <div>
-                <label className="form-label">Max Seq Length</label>
-                <input type="number" value={maxSeqLength} onChange={e => setMaxSeqLength(Number(e.target.value))} className="input" min={64} />
+                <label className="form-label" htmlFor="ft-seq-len">Max seq length</label>
+                <input id="ft-seq-len" type="number" value={maxSeqLength} onChange={e => setMaxSeqLength(Number(e.target.value))} className="input" min={64} />
               </div>
               <div>
-                <label className="form-label">Optimizer</label>
-                <select value={optimizer} onChange={e => setOptimizer(e.target.value)} className="input">
+                <label className="form-label" htmlFor="ft-optimizer">Optimizer</label>
+                <select id="ft-optimizer" value={optimizer} onChange={e => setOptimizer(e.target.value)} className="input">
                   {OPTIMIZERS.map(o => <option key={o} value={o}>{o}</option>)}
                 </select>
               </div>
-              <div style={{ display: 'flex', alignItems: 'end' }}>
-                <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', cursor: 'pointer' }}>
-                  <input type="checkbox" checked={gradCheckpointing} onChange={e => setGradCheckpointing(e.target.checked)} />
-                  <span style={{ fontSize: '0.875rem' }}>Grad Checkpointing</span>
-                </label>
-              </div>
+              <label className="ft-checkbox">
+                <input type="checkbox" checked={gradCheckpointing} onChange={e => setGradCheckpointing(e.target.checked)} />
+                Grad checkpointing
+              </label>
             </div>
           </FormSection>
 
-          {/* Collapsible advanced section */}
-          <div style={{ marginBottom: 'var(--spacing-lg)' }}>
+          <section className="form-group">
             <button
               type="button"
+              className="ft-disclosure"
               onClick={() => setShowAdvanced(!showAdvanced)}
-              style={{
-                background: 'none', border: 'none', cursor: 'pointer', padding: 0,
-                fontSize: '0.8125rem', fontWeight: 600, textTransform: 'uppercase',
-                letterSpacing: '0.05em', color: 'var(--color-text-secondary)',
-                display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)',
-                marginBottom: showAdvanced ? 'var(--spacing-md)' : 0,
-                paddingBottom: 'var(--spacing-sm)',
-                borderBottom: '1px solid var(--color-border-subtle)',
-                width: '100%', fontFamily: 'inherit',
-              }}
+              aria-expanded={showAdvanced}
             >
-              <i className={`fas fa-chevron-${showAdvanced ? 'down' : 'right'}`} style={{ color: 'var(--color-primary)', fontSize: '0.75rem', width: '0.75rem' }} />
-              <i className="fas fa-cog" style={{ color: 'var(--color-primary)' }} />
-              Advanced Options
+              <i className={`fas fa-chevron-${showAdvanced ? 'down' : 'right'} ft-disclosure__chevron`} />
+              <i className="fas fa-cog ft-disclosure__icon" />
+              Advanced options
             </button>
 
             {showAdvanced && (
-              <div>
-                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))', gap: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)' }}>
+              <div className="ft-advanced">
+                <div className="ft-grid-auto">
                   <div>
-                    <label className="form-label">Max Steps (0 = auto)</label>
-                    <input type="number" value={maxSteps} onChange={e => setMaxSteps(Number(e.target.value))} className="input" min={0} />
+                    <label className="form-label" htmlFor="ft-max-steps">Max steps</label>
+                    <input id="ft-max-steps" type="number" value={maxSteps} onChange={e => setMaxSteps(Number(e.target.value))} className="input" min={0} />
+                    <p className="form-hint">0 for automatic.</p>
                   </div>
                   <div>
-                    <label className="form-label">Save Steps</label>
-                    <input type="number" value={saveSteps} onChange={e => setSaveSteps(Number(e.target.value))} className="input" min={0} />
+                    <label className="form-label" htmlFor="ft-save-steps">Save steps</label>
+                    <input id="ft-save-steps" type="number" value={saveSteps} onChange={e => setSaveSteps(Number(e.target.value))} className="input" min={0} />
                   </div>
                   <div>
-                    <label className="form-label">Save Total Limit (0 = unlimited)</label>
-                    <input type="number" value={saveTotalLimit} onChange={e => setSaveTotalLimit(Number(e.target.value))} className="input" min={0} />
+                    <label className="form-label" htmlFor="ft-save-limit">Save total limit</label>
+                    <input id="ft-save-limit" type="number" value={saveTotalLimit} onChange={e => setSaveTotalLimit(Number(e.target.value))} className="input" min={0} />
+                    <p className="form-hint">0 keeps every checkpoint.</p>
                   </div>
                   <div>
-                    <label className="form-label">Weight Decay</label>
-                    <input type="number" value={weightDecay} onChange={e => setWeightDecay(Number(e.target.value))} className="input" min={0} step={0.01} />
+                    <label className="form-label" htmlFor="ft-weight-decay">Weight decay</label>
+                    <input id="ft-weight-decay" type="number" value={weightDecay} onChange={e => setWeightDecay(Number(e.target.value))} className="input" min={0} step={0.01} />
                   </div>
                   <div>
-                    <label className="form-label">Seed (0 = random)</label>
-                    <input type="number" value={seed} onChange={e => setSeed(Number(e.target.value))} className="input" min={0} />
+                    <label className="form-label" htmlFor="ft-seed">Seed</label>
+                    <input id="ft-seed" type="number" value={seed} onChange={e => setSeed(Number(e.target.value))} className="input" min={0} />
+                    <p className="form-hint">0 picks a random seed.</p>
                   </div>
                   <div>
-                    <label className="form-label">Mixed Precision</label>
-                    <select value={mixedPrecision} onChange={e => setMixedPrecision(e.target.value)} className="input">
+                    <label className="form-label" htmlFor="ft-precision">Mixed precision</label>
+                    <select id="ft-precision" value={mixedPrecision} onChange={e => setMixedPrecision(e.target.value)} className="input">
                       {MIXED_PRECISION_OPTS.map(o => <option key={o} value={o}>{o || 'Auto'}</option>)}
                     </select>
                   </div>
                 </div>
 
-                <div style={{ marginBottom: 'var(--spacing-md)' }}>
-                  <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', cursor: 'pointer', marginBottom: 'var(--spacing-sm)' }}>
-                    <div
-                      onClick={() => setEvalEnabled(!evalEnabled)}
-                      style={{
-                        width: 36, height: 20, borderRadius: "var(--radius-xl)", position: 'relative',
-                        background: evalEnabled ? 'var(--color-primary)' : 'var(--color-border)',
-                        transition: 'background 0.2s', cursor: 'pointer', flexShrink: 0,
-                      }}
-                    >
-                      <div style={{
-                        width: 16, height: 16, borderRadius: '50%', background: '#fff',
-                        position: 'absolute', top: 2, left: evalEnabled ? 18 : 2,
-                        transition: 'left 0.2s', boxShadow: '0 1px 2px rgba(0,0,0,0.2)',
-                      }} />
-                    </div>
-                    <span style={{ fontSize: '0.875rem', fontWeight: 600 }}>Enable Evaluation</span>
-                  </label>
+                <div>
+                  <div className="ft-toggle-row">
+                    <Toggle checked={evalEnabled} onChange={setEvalEnabled} />
+                    <span>Enable evaluation</span>
+                  </div>
                   {evalEnabled && (
-                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))', gap: 'var(--spacing-md)', paddingLeft: 'var(--spacing-sm)' }}>
+                    <div className="ft-grid-auto">
                       <div>
-                        <label className="form-label">Eval Strategy</label>
-                        <select value={evalStrategy} onChange={e => setEvalStrategy(e.target.value)} className="input">
+                        <label className="form-label" htmlFor="ft-eval-strategy">Eval strategy</label>
+                        <select id="ft-eval-strategy" value={evalStrategy} onChange={e => setEvalStrategy(e.target.value)} className="input">
                           <option value="steps">Steps</option>
                           <option value="epoch">Epoch</option>
                         </select>
                       </div>
                       <div>
-                        <label className="form-label">Eval Steps (0 = same as save)</label>
-                        <input type="number" value={evalSteps} onChange={e => setEvalSteps(Number(e.target.value))} className="input" min={0} />
+                        <label className="form-label" htmlFor="ft-eval-steps">Eval steps</label>
+                        <input id="ft-eval-steps" type="number" value={evalSteps} onChange={e => setEvalSteps(Number(e.target.value))} className="input" min={0} />
+                        <p className="form-hint">0 matches save steps.</p>
                       </div>
                       <div>
-                        <label className="form-label">Eval Split</label>
-                        <input type="text" value={evalSplit} onChange={e => setEvalSplit(e.target.value)} placeholder="e.g. validation" className="input" />
+                        <label className="form-label" htmlFor="ft-eval-split">Eval split</label>
+                        <input id="ft-eval-split" type="text" value={evalSplit} onChange={e => setEvalSplit(e.target.value)} placeholder="e.g. validation" className="input" />
                       </div>
                       <div>
-                        <label className="form-label">Eval Dataset Source</label>
-                        <input type="text" value={evalDatasetSource} onChange={e => setEvalDatasetSource(e.target.value)} placeholder="Separate HF dataset" className="input" />
+                        <label className="form-label" htmlFor="ft-eval-dataset">Eval dataset source</label>
+                        <input id="ft-eval-dataset" type="text" value={evalDatasetSource} onChange={e => setEvalDatasetSource(e.target.value)} placeholder="Separate HF dataset" className="input" />
                       </div>
                       <div>
-                        <label className="form-label">Auto-split Ratio</label>
-                        <input type="number" value={evalSplitRatio} onChange={e => setEvalSplitRatio(Number(e.target.value))} className="input" min={0.01} max={0.5} step={0.01} />
+                        <label className="form-label" htmlFor="ft-eval-ratio">Auto-split ratio</label>
+                        <input id="ft-eval-ratio" type="number" value={evalSplitRatio} onChange={e => setEvalSplitRatio(Number(e.target.value))} className="input" min={0.01} max={0.5} step={0.01} />
                       </div>
                     </div>
                   )}
                 </div>
 
                 {resumeFromCheckpoint && (
-                  <div style={{ marginBottom: 'var(--spacing-md)' }}>
-                    <label className="form-label">Resume from Checkpoint</label>
-                    <div style={{ display: 'flex', gap: 'var(--spacing-sm)', alignItems: 'center' }}>
-                      <input type="text" value={resumeFromCheckpoint} onChange={e => setResumeFromCheckpoint(e.target.value)} className="input" style={{ flex: 1 }} />
-                      <button type="button" className="btn" style={{ padding: 'var(--spacing-xs) var(--spacing-sm)' }} onClick={() => setResumeFromCheckpoint('')}>
+                  <div>
+                    <label className="form-label" htmlFor="ft-resume">Resume from checkpoint</label>
+                    <div className="ft-kv__row">
+                      <input id="ft-resume" type="text" value={resumeFromCheckpoint} onChange={e => setResumeFromCheckpoint(e.target.value)} className="input ft-kv__key" />
+                      <button type="button" className="btn btn-sm" onClick={() => setResumeFromCheckpoint('')} aria-label="Clear checkpoint">
                         <i className="fas fa-times" />
                       </button>
                     </div>
@@ -1488,16 +1436,18 @@ export default function FineTune() {
                 )}
 
                 {backend === 'liquid-audio' && (
-                  <div style={{ marginBottom: 'var(--spacing-md)' }}>
-                    <label className="form-label">Liquid Audio</label>
-                    <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)', marginBottom: 'var(--spacing-sm)' }}>
-                      Dataset must be preprocessed by <code>LFM2AudioChatMapper</code> (a directory of LFM2DataLoader-ready arrow files). See <code>liquid_audio/examples/preprocess_jenny_tts.py</code> for the conversion recipe.
-                    </div>
-                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 'var(--spacing-sm)' }}>
+                  <div>
+                    <SectionHeading>Liquid Audio</SectionHeading>
+                    <p className="ft-hint">
+                      Dataset must be preprocessed by <code>LFM2AudioChatMapper</code> (a directory of
+                      LFM2DataLoader-ready arrow files). See <code>liquid_audio/examples/preprocess_jenny_tts.py</code>
+                      {' '}for the conversion recipe.
+                    </p>
+                    <div className="ft-grid-liquid">
                       <div>
-                        <label className="form-label">TTS Voice (optional)</label>
-                        <select value={liquidAudioVoice} onChange={e => setLiquidAudioVoice(e.target.value)} className="input">
-                          <option value="">— inherit from system prompt —</option>
+                        <label className="form-label" htmlFor="ft-la-voice">TTS voice</label>
+                        <select id="ft-la-voice" value={liquidAudioVoice} onChange={e => setLiquidAudioVoice(e.target.value)} className="input">
+                          <option value="">Inherit from system prompt</option>
                           <option value="us_male">us_male</option>
                           <option value="us_female">us_female</option>
                           <option value="uk_male">uk_male</option>
@@ -1505,53 +1455,54 @@ export default function FineTune() {
                         </select>
                       </div>
                       <div>
-                        <label className="form-label">Validation Dataset (path)</label>
-                        <input type="text" value={liquidAudioValDataset} onChange={e => setLiquidAudioValDataset(e.target.value)} placeholder="e.g. /data/jenny_tts/val" className="input" />
+                        <label className="form-label" htmlFor="ft-la-val">Validation dataset</label>
+                        <input id="ft-la-val" type="text" value={liquidAudioValDataset} onChange={e => setLiquidAudioValDataset(e.target.value)} placeholder="e.g. /data/jenny_tts/val" className="input" />
                       </div>
                     </div>
                   </div>
                 )}
 
                 <div>
-                  <label className="form-label">Extra Options (backend-specific key-value pairs)</label>
+                  <label className="form-label">Extra options</label>
+                  <p className="form-hint">Backend-specific key/value pairs.</p>
                   <KeyValueEditor entries={extraOptions} onChange={setExtraOptions} />
                 </div>
               </div>
             )}
-          </div>
+          </section>
 
-          <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
+          <div className="ft-actions">
             <button type="submit" className="btn btn-primary" disabled={loading || (!datasetSource && !datasetFile)}>
-              {loading ? <><LoadingSpinner size="sm" /> Starting...</> :
-                resumeFromCheckpoint ?
-                  <><i className="fas fa-redo" style={{ marginRight: 'var(--spacing-xs)' }} /> Resume Training</> :
-                  <><i className="fas fa-play" style={{ marginRight: 'var(--spacing-xs)' }} /> Start Fine-Tuning</>}
+              {loading
+                ? <><LoadingSpinner size="sm" /> Starting...</>
+                : resumeFromCheckpoint
+                  ? <><i className="fas fa-redo" /> Resume training</>
+                  : <><i className="fas fa-play" /> Start fine-tuning</>}
             </button>
             <button type="button" className="btn" onClick={handleExportConfig}>
-              <i className="fas fa-download" style={{ marginRight: 'var(--spacing-xs)' }} /> Export Config
+              <i className="fas fa-download" /> Export config
             </button>
           </div>
         </form>
       )}
 
-      {/* Either show job detail OR job list — not side-by-side */}
+      {/* Either show job detail OR job list, not side-by-side */}
       {selectedJob ? (
-        <div>
-          <button className="btn" onClick={() => setSelectedJob(null)} style={{ marginBottom: 'var(--spacing-md)' }}>
-            <i className="fas fa-arrow-left" style={{ marginRight: 'var(--spacing-xs)' }} />
-            Back to Jobs
-          </button>
-          <div className="card" style={{ marginBottom: 'var(--spacing-md)', padding: 'var(--spacing-md)' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-              <div>
-                <h3 style={{ margin: 0 }}>{selectedJob.model}</h3>
-                <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)', marginTop: 'var(--spacing-xs)' }}>
+        <div className="ft-stack">
+          <div>
+            <button className="btn" onClick={() => setSelectedJob(null)}>
+              <i className="fas fa-arrow-left" /> Back to jobs
+            </button>
+          </div>
+          <div className="card">
+            <div className="ft-job__head">
+              <div className="ft-job__title">
+                <strong>{selectedJob.model}</strong>
+                <div className="ft-job__meta">
                   {selectedJob.backend} / {selectedJob.training_method || 'sft'} | ID: {selectedJob.id?.slice(0, 8)}... | {selectedJob.created_at}
                 </div>
               </div>
-              <span className={`badge ${statusBadgeClass[selectedJob.status] || ''}`}>
-                {selectedJob.status}
-              </span>
+              <StatusBadge status={selectedJob.status} />
             </div>
           </div>
           <TrainingMonitor job={selectedJob} onStop={handleStop} />
@@ -1560,17 +1511,30 @@ export default function FineTune() {
         </div>
       ) : (
         <div>
-          <h3 style={{ margin: '0 0 var(--spacing-sm) 0' }}>Jobs</h3>
+          <SectionHeading>Jobs</SectionHeading>
           {jobs.length === 0 ? (
-            <div className="empty-state">
-              <div className="empty-state-icon"><i className="fas fa-graduation-cap" /></div>
-              <h2 className="empty-state-title">No fine-tuning jobs yet</h2>
-              <p className="empty-state-text">Click "New Job" to get started</p>
-            </div>
+            <EmptyState
+              icon="fas fa-graduation-cap"
+              title="No fine-tuning jobs yet"
+              body="Start one to train an adapter on your own data, then export it as a model you can chat with."
+              actions={
+                <button className="btn btn-primary fas fa-plus" onClick={() => setShowForm(true)}>
+                  <i /> New job
+                </button>
+              }
+            />
           ) : (
-            jobs.map(job => (
-              <JobCard key={job.id} job={job} isSelected={false} onSelect={setSelectedJob} onUseConfig={handleUseConfig} onDelete={handleDelete} />
-            ))
+            <div className="ft-jobs">
+              {jobs.map(job => (
+                <JobCard
+                  key={job.id}
+                  job={job}
+                  onSelect={setSelectedJob}
+                  onUseConfig={handleUseConfig}
+                  onDelete={handleDelete}
+                />
+              ))}
+            </div>
           )}
         </div>
       )}
diff --git a/core/http/react-ui/src/pages/Home.jsx b/core/http/react-ui/src/pages/Home.jsx
index 52753bdf8915..78b53f513556 100644
--- a/core/http/react-ui/src/pages/Home.jsx
+++ b/core/http/react-ui/src/pages/Home.jsx
@@ -414,9 +414,9 @@ export default function Home() {
                     <i className="fas fa-arrow-up" />
                   </button>
                 </div>
-                <input ref={imageInputRef} type="file" multiple accept="image/*" style={{ display: 'none' }} onChange={(e) => addFiles(e.target.files, setImageFiles)} />
-                <input ref={audioInputRef} type="file" multiple accept="audio/*" style={{ display: 'none' }} onChange={(e) => addFiles(e.target.files, setAudioFiles)} />
-                <input ref={fileInputRef} type="file" multiple accept=".txt,.md,.pdf" style={{ display: 'none' }} onChange={(e) => addFiles(e.target.files, setTextFiles)} />
+                <input ref={imageInputRef} type="file" multiple accept="image/*" className="hidden" onChange={(e) => addFiles(e.target.files, setImageFiles)} />
+                <input ref={audioInputRef} type="file" multiple accept="audio/*" className="hidden" onChange={(e) => addFiles(e.target.files, setAudioFiles)} />
+                <input ref={fileInputRef} type="file" multiple accept=".txt,.md,.pdf" className="hidden" onChange={(e) => addFiles(e.target.files, setTextFiles)} />
               </div>
             </form>
           </div>
diff --git a/core/http/react-ui/src/pages/ImageGen.jsx b/core/http/react-ui/src/pages/ImageGen.jsx
index 8204b9c15776..d274dcc66d02 100644
--- a/core/http/react-ui/src/pages/ImageGen.jsx
+++ b/core/http/react-ui/src/pages/ImageGen.jsx
@@ -169,7 +169,7 @@ export default function ImageGen() {
               ))}
             </div>
           ) : (
-            <div style={{ textAlign: 'center', color: 'var(--color-text-muted)' }}>
+            <div className="text-center text-muted">
               <i className="fas fa-image" style={{ fontSize: '3rem', marginBottom: 'var(--spacing-md)', opacity: 0.4 }} />
               <p>{t('image.empty')}</p>
             </div>
diff --git a/core/http/react-ui/src/pages/ImportModel.jsx b/core/http/react-ui/src/pages/ImportModel.jsx
index 5adc823032b0..c91c351cb7e1 100644
--- a/core/http/react-ui/src/pages/ImportModel.jsx
+++ b/core/http/react-ui/src/pages/ImportModel.jsx
@@ -120,7 +120,6 @@ const ADVANCED_PREF_KEYS = [
   'pipeline_type', 'scheduler_type', 'enable_parameters', 'cuda',
 ]
 
-const hintStyle = { marginTop: 'var(--spacing-xs)', fontSize: '0.75rem', color: 'var(--color-text-muted)' }
 
 // hasCustomPrefs returns true when the user has set any preference beyond
 // backend/name/description, added a custom key-value pref with a non-empty
@@ -149,11 +148,10 @@ function PowerTabs({ value, onChange }) {
   const { t } = useTranslation('importModel')
   return (
     <div
-      className="segmented"
+      className="segmented mb-md"
       role="tablist"
       aria-label={t('powerTabs.ariaLabel')}
       data-testid="power-tabs"
-      style={{ marginBottom: 'var(--spacing-md)' }}
     >
       <button
         type="button"
@@ -551,13 +549,13 @@ export default function ImportModel() {
       )}
 
       <div className="form-group">
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--spacing-xs)' }}>
-          <label className="form-label" style={{ marginBottom: 0 }}>
+        <div className="hstack hstack--between mb-xs">
+          <label className="form-label mb-0">
             {t('form.modelUri')}
           </label>
           <a href="https://huggingface.co/models?sort=trending" target="_blank" rel="noreferrer"
-            className="btn btn-secondary" style={{ fontSize: '0.7rem', padding: '3px 8px' }}>
-            {t('actions.browseHF')} <i className="fas fa-external-link-alt" aria-hidden="true" style={{ marginLeft: 'var(--spacing-xs)' }} />
+            className="btn btn-secondary pill-sm">
+            {t('actions.browseHF')} <i className="fas fa-external-link-alt ml-xs" aria-hidden="true" />
           </a>
         </div>
         <input
@@ -568,31 +566,31 @@ export default function ImportModel() {
           placeholder={t('form.uriPlaceholder')}
           disabled={isSubmitting}
         />
-        <p style={hintStyle}>{t('form.uriHint')}</p>
+        <p className="form-hint-sm">{t('form.uriHint')}</p>
 
         <button
           type="button"
           onClick={() => setShowGuide(!showGuide)}
-          style={{ marginTop: 'var(--spacing-sm)', background: 'none', border: 'none', color: 'var(--color-text-secondary)', cursor: 'pointer', fontSize: '0.8125rem', display: 'flex', alignItems: 'center', gap: '6px', padding: 0 }}
+          className="im-disclosure mt-sm"
         >
           <i className={`fas ${showGuide ? 'fa-chevron-down' : 'fa-chevron-right'}`} aria-hidden="true" />
           <i className="fas fa-info-circle" aria-hidden="true" />
           {t('form.supportedFormats')}
         </button>
         {showGuide && (
-          <div style={{ marginTop: 'var(--spacing-sm)', padding: 'var(--spacing-md)', background: 'var(--color-bg-primary)', border: '1px solid var(--color-border-default)', borderRadius: 'var(--radius-md)' }}>
+          <div className="im-well mt-sm">
             {URI_FORMATS.map((fmt, i) => (
-              <div key={i} style={{ marginBottom: i < URI_FORMATS.length - 1 ? 'var(--spacing-md)' : 0 }}>
-                <h4 style={{ fontSize: '0.8125rem', fontWeight: 600, marginBottom: '6px', display: 'flex', alignItems: 'center', gap: '6px' }}>
+              <div key={i} className={i < URI_FORMATS.length - 1 ? 'mb-md' : undefined}>
+                <h4 className="im-fmt__title">
                   <i className={fmt.icon} aria-hidden="true" style={{ color: fmt.color }} />
                   {t(fmt.titleKey)}
                 </h4>
-                <div style={{ paddingLeft: '20px', fontSize: '0.75rem', fontFamily: 'var(--font-mono)' }}>
+                <div className="im-fmt__body">
                   {fmt.examples.map((ex, j) => (
-                    <div key={j} style={{ marginBottom: 'var(--spacing-xs)' }}>
-                      <code style={{ color: 'var(--color-success)' }}>{ex.prefix}</code>
-                      <span style={{ color: 'var(--color-text-secondary)' }}>{ex.suffix}</span>
-                      <p style={{ color: 'var(--color-text-muted)', marginTop: '1px', fontFamily: 'inherit' }}>{t(ex.descKey)}</p>
+                    <div key={j} className="mb-xs">
+                      <code className="text-success">{ex.prefix}</code>
+                      <span className="text-secondary">{ex.suffix}</span>
+                      <p className="text-muted">{t(ex.descKey)}</p>
                     </div>
                   ))}
                 </div>
@@ -607,7 +605,7 @@ export default function ImportModel() {
   // Backend dropdown + auto-install note — shared between Simple/Options
   // and Power/Preferences.
   const renderBackendField = () => (
-    <div className="form-group" style={{ marginBottom: 0 }}>
+    <div className="form-group mb-0">
       <label className="form-label">{t('form.backend')}</label>
       <SearchableSelect
         value={prefs.backend}
@@ -618,10 +616,10 @@ export default function ImportModel() {
         searchPlaceholder={t('form.backendSearch')}
         disabled={isSubmitting || backendsLoading}
       />
-      <p style={hintStyle}>
+      <p className="form-hint-sm">
         {t('form.backendHint')}
         {backendsError && (
-          <span style={{ color: 'var(--color-warning)', marginLeft: '6px' }}>
+          <span className="text-warning ml-xs">
             {t('form.backendErrorHint')}
           </span>
         )}
@@ -633,7 +631,7 @@ export default function ImportModel() {
         return (
           <p
             data-testid="auto-install-note"
-            style={{ ...hintStyle, display: 'flex', alignItems: 'center', gap: '6px', marginTop: '6px' }}
+            className="form-hint-sm hstack hstack--xs"
           >
             <i className="fas fa-download" aria-hidden="true" />
             {t('form.backendNotInstalled')}
@@ -644,26 +642,26 @@ export default function ImportModel() {
   )
 
   const renderNameField = () => (
-    <div className="form-group" style={{ marginBottom: 0 }}>
+    <div className="form-group mb-0">
       <label className="form-label">{t('form.modelName')}</label>
       <input className="input" type="text" value={prefs.name} onChange={e => updatePref('name', e.target.value)} placeholder={t('form.modelNamePlaceholder')} disabled={isSubmitting} />
-      <p style={hintStyle}>{t('form.modelNameHint')}</p>
+      <p className="form-hint-sm">{t('form.modelNameHint')}</p>
     </div>
   )
 
   const renderDescriptionField = () => (
-    <div className="form-group" style={{ marginBottom: 0 }}>
+    <div className="form-group mb-0">
       <label className="form-label">{t('form.description')}</label>
       <textarea className="textarea" rows={2} value={prefs.description} onChange={e => updatePref('description', e.target.value)} placeholder={t('form.descriptionPlaceholder')} disabled={isSubmitting} />
-      <p style={hintStyle}>{t('form.descriptionHint')}</p>
+      <p className="form-hint-sm">{t('form.descriptionHint')}</p>
     </div>
   )
 
   // Full preferences panel — identical to the previous Simple-mode panel.
   const renderFullPreferences = () => (
-    <div style={{ marginTop: 'var(--spacing-lg)' }}>
-      <div style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--color-text-secondary)', marginBottom: 'var(--spacing-sm)' }}>
-        <i className="fas fa-cog" aria-hidden="true" style={{ marginRight: '6px' }} />{t('form.preferences')}
+    <div className="mt-lg">
+      <div className="im-pref-name mb-sm">
+        <i className="fas fa-cog icon-before" aria-hidden="true" />{t('form.preferences')}
       </div>
 
       <ModalityChips
@@ -672,76 +670,76 @@ export default function ImportModel() {
         disabled={isSubmitting || backendsLoading}
       />
 
-      <div style={{ padding: 'var(--spacing-md)', background: 'var(--color-bg-primary)', border: '1px solid var(--color-border-default)', borderRadius: 'var(--radius-md)' }}>
-        <h3 style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--color-text-secondary)', marginBottom: 'var(--spacing-md)', display: 'flex', alignItems: 'center', gap: '6px' }}>
-          <i className="fas fa-sliders" style={{ color: 'var(--color-primary)' }} aria-hidden="true" />
+      <div className="im-well">
+        <h3 className="hstack text-sm fw-semibold text-secondary mb-md">
+          <i className="fas fa-sliders text-primary" aria-hidden="true" />
           {t('form.commonPreferences')}
         </h3>
 
-        <div style={{ display: 'grid', gap: 'var(--spacing-md)' }}>
+        <div className="im-well--grid">
           {renderBackendField()}
           {renderNameField()}
           {renderDescriptionField()}
 
           {showQuantizations && (
-            <div className="form-group" style={{ marginBottom: 0 }}>
+            <div className="form-group mb-0">
               <label className="form-label">{t('form.quantizations')}</label>
               <input className="input" type="text" value={prefs.quantizations} onChange={e => updatePref('quantizations', e.target.value)} placeholder={t('form.quantizationsPlaceholder')} disabled={isSubmitting} />
-              <p style={hintStyle}>{t('form.quantizationsHint')}</p>
+              <p className="form-hint-sm">{t('form.quantizationsHint')}</p>
             </div>
           )}
 
           {showMmprojQuantizations && (
-            <div className="form-group" style={{ marginBottom: 0 }}>
+            <div className="form-group mb-0">
               <label className="form-label">{t('form.mmprojQuantizations')}</label>
               <input className="input" type="text" value={prefs.mmproj_quantizations} onChange={e => updatePref('mmproj_quantizations', e.target.value)} placeholder={t('form.mmprojQuantizationsPlaceholder')} disabled={isSubmitting} />
-              <p style={hintStyle}>{t('form.mmprojQuantizationsHint')}</p>
+              <p className="form-hint-sm">{t('form.mmprojQuantizationsHint')}</p>
             </div>
           )}
 
           <div>
-            <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', cursor: 'pointer' }}>
+            <label className="im-pref-label">
               <input type="checkbox" checked={prefs.embeddings} onChange={e => updatePref('embeddings', e.target.checked)} disabled={isSubmitting} />
-              <span style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--color-text-secondary)' }}>
+              <span className="im-pref-name">
                 {t('form.embeddings')}
               </span>
             </label>
-            <p style={{ ...hintStyle, marginLeft: '28px' }}>{t('form.embeddingsHint')}</p>
+            <p className="form-hint-sm im-indent">{t('form.embeddingsHint')}</p>
           </div>
 
           {showModelType && (
-            <div className="form-group" style={{ marginBottom: 0 }}>
+            <div className="form-group mb-0">
               <label className="form-label">{t('form.modelType')}</label>
               <input className="input" type="text" value={prefs.type} onChange={e => updatePref('type', e.target.value)} placeholder={t('form.modelTypePlaceholder')} disabled={isSubmitting} />
-              <p style={hintStyle}>{t('form.modelTypeHint')}</p>
+              <p className="form-hint-sm">{t('form.modelTypeHint')}</p>
             </div>
           )}
 
           {prefs.backend === 'diffusers' && (
             <>
-              <div className="form-group" style={{ marginBottom: 0 }}>
+              <div className="form-group mb-0">
                 <label className="form-label">{t('form.pipelineType')}</label>
                 <input className="input" type="text" value={prefs.pipeline_type} onChange={e => updatePref('pipeline_type', e.target.value)} placeholder="StableDiffusionPipeline" disabled={isSubmitting} />
-                <p style={hintStyle}>{t('form.pipelineTypeHint')}</p>
+                <p className="form-hint-sm">{t('form.pipelineTypeHint')}</p>
               </div>
-              <div className="form-group" style={{ marginBottom: 0 }}>
+              <div className="form-group mb-0">
                 <label className="form-label">{t('form.schedulerType')}</label>
                 <input className="input" type="text" value={prefs.scheduler_type} onChange={e => updatePref('scheduler_type', e.target.value)} placeholder={t('form.schedulerTypePlaceholder')} disabled={isSubmitting} />
-                <p style={hintStyle}>{t('form.schedulerTypeHint')}</p>
+                <p className="form-hint-sm">{t('form.schedulerTypeHint')}</p>
               </div>
-              <div className="form-group" style={{ marginBottom: 0 }}>
+              <div className="form-group mb-0">
                 <label className="form-label">{t('form.enableParameters')}</label>
                 <input className="input" type="text" value={prefs.enable_parameters} onChange={e => updatePref('enable_parameters', e.target.value)} placeholder={t('form.enableParametersPlaceholder')} disabled={isSubmitting} />
-                <p style={hintStyle}>{t('form.enableParametersHint')}</p>
+                <p className="form-hint-sm">{t('form.enableParametersHint')}</p>
               </div>
               <div>
-                <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', cursor: 'pointer' }}>
+                <label className="im-pref-label">
                   <input type="checkbox" checked={prefs.cuda} onChange={e => updatePref('cuda', e.target.checked)} disabled={isSubmitting} />
-                  <span style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--color-text-secondary)' }}>
+                  <span className="im-pref-name">
                     {t('form.cuda')}
                   </span>
                 </label>
-                <p style={{ ...hintStyle, marginLeft: '28px' }}>{t('form.cudaHint')}</p>
+                <p className="form-hint-sm im-indent">{t('form.cudaHint')}</p>
               </div>
             </>
           )}
@@ -749,50 +747,47 @@ export default function ImportModel() {
       </div>
 
       {/* Custom Preferences */}
-      <div style={{ marginTop: 'var(--spacing-md)' }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--spacing-sm)' }}>
-          <span style={{ fontSize: '0.875rem', fontWeight: 500, color: 'var(--color-text-secondary)' }}>
-            <i className="fas fa-plus-circle" style={{ marginRight: '6px' }} aria-hidden="true" />{t('form.customPreferences')}
+      <div className="mt-md">
+        <div className="hstack hstack--between mb-sm">
+          <span className="im-pref-name">
+            <i className="fas fa-plus-circle icon-before" aria-hidden="true" />{t('form.customPreferences')}
           </span>
-          <button className="btn btn-secondary" onClick={addCustomPref} disabled={isSubmitting} style={{ fontSize: '0.75rem' }}>
+          <button className="btn btn-secondary text-xs" onClick={addCustomPref} disabled={isSubmitting}>
             <i className="fas fa-plus" aria-hidden="true" /> {t('actions.addCustom')}
           </button>
         </div>
         {customPrefs.map((cp, i) => (
-          <div key={i} style={{ display: 'flex', gap: 'var(--spacing-sm)', alignItems: 'center', marginBottom: 'var(--spacing-xs)' }}>
+          <div key={i} className="hstack mb-xs">
             <input
-              className="input"
+              className="input flex-1"
               type="text"
               value={cp.key}
               onChange={e => updateCustomPref(i, 'key', e.target.value)}
               placeholder={t('form.key')}
               aria-label={t('form.preferenceKey', { index: i + 1 })}
               disabled={isSubmitting}
-              style={{ flex: 1 }}
             />
-            <span style={{ color: 'var(--color-text-secondary)' }}>:</span>
+            <span className="text-secondary">:</span>
             <input
-              className="input"
+              className="input flex-1"
               type="text"
               value={cp.value}
               onChange={e => updateCustomPref(i, 'value', e.target.value)}
               placeholder={t('form.value')}
               aria-label={t('form.preferenceValue', { index: i + 1 })}
               disabled={isSubmitting}
-              style={{ flex: 1 }}
             />
             <button
-              className="btn btn-secondary"
+              className="btn btn-secondary text-error"
               onClick={() => removeCustomPref(i)}
               disabled={isSubmitting}
               aria-label={t('form.removePref')}
-              style={{ color: 'var(--color-error)' }}
             >
               <i className="fas fa-trash" aria-hidden="true" />
             </button>
           </div>
         ))}
-        <p style={hintStyle}>{t('form.customKeyValueHint')}</p>
+        <p className="form-hint-sm">{t('form.customKeyValueHint')}</p>
       </div>
     </div>
   )
@@ -803,15 +798,15 @@ export default function ImportModel() {
         title={t('title')}
         supporting={subtitle}
         actions={
-          <div style={{ display: 'flex', gap: 'var(--spacing-sm)', flexWrap: 'wrap', alignItems: 'center' }}>
+          <div className="hstack">
             <SimplePowerSwitch value={mode} onChange={requestModeSwitch} disabled={isSubmitting} />
             {isPowerYaml ? (
-              <button className="btn btn-primary" onClick={handleAdvancedImport} disabled={isSubmitting}>
-                {isSubmitting ? <><LoadingSpinner size="sm" /> {t('actions.saving')}</> : <><i className="fas fa-save" aria-hidden="true" /> {t('actions.create')}</>}
+              <button className="btn btn-primary fas fa-save fa-upload" onClick={handleAdvancedImport} disabled={isSubmitting}>
+                {isSubmitting ? <><LoadingSpinner size="sm" /> {t('actions.saving')}</> : <><i aria-hidden="true" /> {t('actions.create')}</>}
               </button>
             ) : (
-              <button className="btn btn-primary" onClick={() => handleSimpleImport()} disabled={isSubmitting || !importUri.trim()}>
-                {isSubmitting ? <><LoadingSpinner size="sm" /> {t('actions.importing')}</> : <><i className="fas fa-upload" aria-hidden="true" /> {t('actions.import')}</>}
+              <button onClick={() => handleSimpleImport()} disabled={isSubmitting || !importUri.trim()}>
+                {isSubmitting ? <><LoadingSpinner size="sm" /> {t('actions.importing')}</> : <><i aria-hidden="true" /> {t('actions.import')}</>}
               </button>
             )}
           </div>
@@ -820,15 +815,15 @@ export default function ImportModel() {
 
       {/* Estimate banner */}
       {!isPowerYaml && estimate && (
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)', padding: 'var(--spacing-md)', borderColor: 'var(--color-primary)' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', fontSize: '0.875rem', flexWrap: 'wrap' }}>
-            <i className="fas fa-memory" aria-hidden="true" style={{ color: 'var(--color-primary)' }} />
+        <div className="card pad-md mb-md" style={{ borderColor: 'var(--color-primary)' }}>
+          <div className="hstack text-base">
+            <i className="fas fa-memory text-primary" aria-hidden="true" />
             <strong>{t('estimate.title')}</strong>
             {estimate.sizeDisplay && estimate.sizeDisplay !== '0 B' && (
-              <span><i className="fas fa-download" aria-hidden="true" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} />{t('estimate.download', { size: estimate.sizeDisplay })}</span>
+              <span><i className="fas fa-download text-primary icon-before" aria-hidden="true" />{t('estimate.download', { size: estimate.sizeDisplay })}</span>
             )}
             {estimate.vramDisplay && estimate.vramDisplay !== '0 B' && (
-              <span><i className="fas fa-microchip" aria-hidden="true" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} />{t('estimate.vram', { vram: estimate.vramDisplay })}</span>
+              <span><i className="fas fa-microchip text-primary icon-before" aria-hidden="true" />{t('estimate.vram', { vram: estimate.vramDisplay })}</span>
             )}
           </div>
         </div>
@@ -836,8 +831,8 @@ export default function ImportModel() {
 
       {/* Job progress */}
       {jobProgress && (
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)', padding: 'var(--spacing-md)' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', fontSize: '0.875rem' }}>
+        <div className="card pad-md mb-md">
+          <div className="hstack text-base">
             <LoadingSpinner size="sm" />
             <span>{jobProgress}</span>
           </div>
@@ -846,7 +841,7 @@ export default function ImportModel() {
 
       {/* Simple mode */}
       {isSimple && (
-        <div className="card" style={{ padding: 'var(--spacing-lg)' }}>
+        <div className="card pad-lg">
           {/* Wrapping the Simple-mode content in a <form> gives us Enter-to-
               submit for free: focus in the URI input triggers onSubmit without
               a keyDown handler. The Import button in the page header submits
@@ -858,24 +853,14 @@ export default function ImportModel() {
           >
             {renderUriAndAmbiguity()}
 
-            <div style={{ marginTop: 'var(--spacing-md)' }}>
+            <div className="mt-md">
               <button
                 type="button"
                 onClick={() => setShowOptions(v => !v)}
                 data-testid="simple-options-toggle"
                 aria-expanded={showOptions}
                 aria-controls="simple-options-panel"
-                style={{
-                  background: 'none',
-                  border: 'none',
-                  color: 'var(--color-text-secondary)',
-                  cursor: 'pointer',
-                  fontSize: '0.8125rem',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '6px',
-                  padding: 0,
-                }}
+                className="im-disclosure p-0"
               >
                 <i className={`fas ${showOptions ? 'fa-chevron-down' : 'fa-chevron-right'}`} aria-hidden="true" />
                 <i className="fas fa-sliders" aria-hidden="true" />
@@ -886,15 +871,7 @@ export default function ImportModel() {
                 <div
                   id="simple-options-panel"
                   data-testid="simple-options-panel"
-                  style={{
-                    marginTop: 'var(--spacing-sm)',
-                    padding: 'var(--spacing-md)',
-                    background: 'var(--color-bg-primary)',
-                    border: '1px solid var(--color-border-default)',
-                    borderRadius: 'var(--radius-md)',
-                    display: 'grid',
-                    gap: 'var(--spacing-md)',
-                  }}
+                  className="im-well im-well--grid mt-sm"
                 >
                   <ModalityChips
                     value={modalityFilter}
@@ -912,7 +889,7 @@ export default function ImportModel() {
                 only trigger implicit Enter submit when the form contains at
                 least one submit-capable element; this keeps the behaviour
                 consistent even if the form ever holds a single text input. */}
-            <button type="submit" aria-hidden="true" tabIndex={-1} style={{ display: 'none' }} />
+            <button type="submit" aria-hidden="true" tabIndex={-1} className="hidden" />
           </form>
         </div>
       )}
@@ -929,15 +906,15 @@ export default function ImportModel() {
           )}
           {isPowerYaml && (
             <>
-              <div style={{ padding: 'var(--spacing-md)' }}>
+              <div className="pad-md">
                 <PowerTabs value={powerTab} onChange={setPowerTab} />
               </div>
-              <div style={{ padding: 'var(--spacing-md)', borderTop: '1px solid var(--color-border-default)', borderBottom: '1px solid var(--color-border-default)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <h2 style={{ fontSize: '1.125rem', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
-                  <i className="fas fa-code" aria-hidden="true" style={{ color: 'var(--color-data-3)' }} />
+              <div className="im-yaml-head">
+                <h2 className="hstack text-lg fw-semibold">
+                  <i className="fas fa-code text-data-3" aria-hidden="true" />
                   {t('form.yamlEditor')}
                 </h2>
-                <button className="btn btn-secondary" style={{ fontSize: '0.75rem' }} onClick={() => { navigator.clipboard.writeText(yamlContent); addToast(t('toasts.copied'), 'success') }}>
+                <button className="btn btn-secondary text-xs" onClick={() => { navigator.clipboard.writeText(yamlContent); addToast(t('toasts.copied'), 'success') }}>
                   <i className="fas fa-copy" aria-hidden="true" /> {t('actions.copy')}
                 </button>
               </div>
diff --git a/core/http/react-ui/src/pages/Manage.jsx b/core/http/react-ui/src/pages/Manage.jsx
index 5c871bf6c78d..57fda264a6aa 100644
--- a/core/http/react-ui/src/pages/Manage.jsx
+++ b/core/http/react-ui/src/pages/Manage.jsx
@@ -511,7 +511,7 @@ export default function Manage() {
       />
 
       {/* Tabs */}
-      <div className="tabs" style={{ marginBottom: 'var(--spacing-md)' }}>
+      <div className="tabs mb-md">
         {TABS.map(t => {
           const upgradeCount = t.key === 'backends' ? Object.keys(upgrades).length : 0
           return (
@@ -520,7 +520,7 @@ export default function Manage() {
               className={`tab ${activeTab === t.key ? 'tab-active' : ''}`}
               onClick={() => handleTabChange(t.key)}
             >
-              <i className={`fas ${t.icon}`} style={{ marginRight: 6 }} />
+              <i className={`fas ${t.icon} icon-before`} />
               {t.label}
               {t.key === 'models' && !modelsLoading && ` (${models.length})`}
               {t.key === 'backends' && !backendsLoading && ` (${backends.length})`}
@@ -567,12 +567,12 @@ export default function Manage() {
           rightSlot={(
             <>
               {distributedMode && (
-                <span className="cell-muted" title="Auto-refreshes every 10s in distributed mode so ghost models clear promptly">
-                  <i className="fas fa-rotate" /> Last synced {lastSyncedAgo}
+                <span className={`cell-muted fas fa-rotate btn btn-secondary btn-sm fas ${reloading ? 'fa-spinner fa-spin' : 'fa-rotate'}`} title="Auto-refreshes every 10s in distributed mode so ghost models clear promptly">
+                  <i /> Last synced {lastSyncedAgo}
                 </span>
               )}
-              <button className="btn btn-secondary btn-sm" onClick={handleReload} disabled={reloading}>
-                <i className={`fas ${reloading ? 'fa-spinner fa-spin' : 'fa-rotate'}`} />
+              <button onClick={handleReload} disabled={reloading}>
+                <i />
                 {reloading ? ' Updating...' : ' Update'}
               </button>
             </>
@@ -582,13 +582,13 @@ export default function Manage() {
         {modelsLoading ? (
           <GalleryLoader />
         ) : models.length === 0 ? (
-          <div className="card" style={{ padding: 'var(--spacing-xl)', textAlign: 'center' }}>
+          <div className="card loading-center text-center">
             <i className="fas fa-exclamation-triangle" style={{ fontSize: '2rem', color: 'var(--color-warning)', marginBottom: 'var(--spacing-md)' }} />
-            <h3 style={{ marginBottom: 'var(--spacing-sm)' }}>No models installed yet</h3>
-            <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.875rem', marginBottom: 'var(--spacing-md)' }}>
+            <h3 className="mb-sm">No models installed yet</h3>
+            <p className="text-base text-secondary mb-md">
               Install a model from the gallery to get started.
             </p>
-            <div style={{ display: 'flex', gap: 'var(--spacing-sm)', justifyContent: 'center' }}>
+            <div className="hstack hstack--center">
               <button className="btn btn-primary btn-sm" onClick={() => navigate('/app/models')}>
                 <i className="fas fa-store" /> Browse Gallery
               </button>
@@ -610,13 +610,13 @@ export default function Manage() {
           <ResponsiveTable>
               <thead>
                 <tr>
-                  <th style={{ width: 30 }}></th>
-                  <th style={{ width: 64 }}></th>
+                  <th className="col-w-30"></th>
+                  <th className="col-w-64"></th>
                   <th>Model</th>
                   <th>Status</th>
                   <th>Backend</th>
                   <th>Use cases</th>
-                  <th style={{ width: 40 }}></th>
+                  <th className="col-w-40"></th>
                 </tr>
               </thead>
               <tbody>
@@ -656,7 +656,7 @@ export default function Manage() {
                       <td>
                         <div className="cell-stack">
                           {model.disabled ? (
-                            <span className="badge" style={{ background: 'var(--color-bg-tertiary)', color: 'var(--color-text-muted)' }}>
+                            <span className="badge chip-neutral">
                               <i className="fas fa-ban" /> Disabled
                             </span>
                           ) : Array.isArray(model.loaded_on) && model.loaded_on.length > 0 ? (
@@ -666,7 +666,7 @@ export default function Manage() {
                               <i className="fas fa-circle" style={{ fontSize: '6px' }} /> Running
                             </span>
                           ) : (
-                            <span className="badge" style={{ background: 'var(--color-bg-tertiary)', color: 'var(--color-text-muted)' }}>
+                            <span className="badge chip-neutral">
                               <i className="fas fa-circle" style={{ fontSize: '6px' }} /> Idle
                             </span>
                           )}
@@ -706,7 +706,7 @@ export default function Manage() {
                           ))}
                         </div>
                       </td>
-                      <StopPropagationCell style={{ textAlign: 'right' }}>
+                      <StopPropagationCell className="text-right">
                         <ActionMenu
                           ariaLabel={`Actions for ${model.id}`}
                           triggerLabel={`Actions for ${model.id}`}
@@ -774,13 +774,13 @@ export default function Manage() {
         {backendsLoading ? (
           <GalleryLoader />
         ) : backends.length === 0 ? (
-          <div className="card" style={{ padding: 'var(--spacing-xl)', textAlign: 'center' }}>
+          <div className="card loading-center text-center">
             <i className="fas fa-server" style={{ fontSize: '2rem', color: 'var(--color-text-muted)', marginBottom: 'var(--spacing-md)' }} />
-            <h3 style={{ marginBottom: 'var(--spacing-sm)' }}>No backends installed yet</h3>
-            <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.875rem', marginBottom: 'var(--spacing-md)' }}>
+            <h3 className="mb-sm">No backends installed yet</h3>
+            <p className="text-base text-secondary mb-md">
               Install backends from the gallery to extend functionality.
             </p>
-            <div style={{ display: 'flex', gap: 'var(--spacing-sm)', justifyContent: 'center' }}>
+            <div className="hstack hstack--center">
               <button className="btn btn-primary btn-sm" onClick={() => navigate('/app/backends')}>
                 <i className="fas fa-server" /> Browse Backend Gallery
               </button>
@@ -911,13 +911,13 @@ export default function Manage() {
             <ResponsiveTable>
               <thead>
                 <tr>
-                  <th style={{ width: 30 }}></th>
-                  <th style={{ width: 64 }}></th>
+                  <th className="col-w-30"></th>
+                  <th className="col-w-64"></th>
                   <th>Backend</th>
                   <th>Version</th>
                   {distributedMode && <th>Nodes</th>}
                   <th>Installed</th>
-                  <th style={{ width: 40 }}></th>
+                  <th className="col-w-40"></th>
                 </tr>
               </thead>
               <tbody>
@@ -1006,7 +1006,7 @@ export default function Manage() {
                           {backend.Metadata?.installed_at ? formatInstalledAt(backend.Metadata.installed_at) : '—'}
                         </span>
                       </td>
-                      <StopPropagationCell style={{ textAlign: 'right' }}>
+                      <StopPropagationCell className="text-right">
                         {backend.IsSystem ? (
                           <span className="badge" title="System backends are managed outside the gallery">
                             <i className="fas fa-lock" /> Protected
@@ -1135,11 +1135,11 @@ function ModelDetail({ model, enriched, matchedCaps, distributedMode, onNavigate
         {urls.length > 0 && (<>
           <dt>Links</dt>
           <dd>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <div className="stack stack--xs">
               {urls.map((url, i) => (
                 <a key={i} href={safeHref(url)} target="_blank" rel="noopener noreferrer"
                   style={{ color: 'var(--color-primary)', wordBreak: 'break-all', fontSize: 'var(--text-xs)' }}>
-                  <i className="fas fa-external-link-alt" style={{ marginRight: 4, fontSize: '0.625rem' }} />{url}
+                  <i className="fas fa-external-link-alt icon-before text-xs" />{url}
                 </a>
               ))}
             </div>
@@ -1221,11 +1221,11 @@ function BackendDetail({ backend, enriched, upgradeInfo, nodes, distributedMode
         {urls.length > 0 && (<>
           <dt>Links</dt>
           <dd>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <div className="stack stack--xs">
               {urls.map((url, i) => (
                 <a key={i} href={safeHref(url)} target="_blank" rel="noopener noreferrer"
                   style={{ color: 'var(--color-primary)', wordBreak: 'break-all', fontSize: 'var(--text-xs)' }}>
-                  <i className="fas fa-external-link-alt" style={{ marginRight: 4, fontSize: '0.625rem' }} />{url}
+                  <i className="fas fa-external-link-alt icon-before text-xs" />{url}
                 </a>
               ))}
             </div>
diff --git a/core/http/react-ui/src/pages/Middleware.jsx b/core/http/react-ui/src/pages/Middleware.jsx
index 027967f694d8..b325d1539288 100644
--- a/core/http/react-ui/src/pages/Middleware.jsx
+++ b/core/http/react-ui/src/pages/Middleware.jsx
@@ -36,17 +36,7 @@ function actionBadge(action) {
     allow: 'var(--color-warning)',
   }
   return (
-    <span style={{
-      display: 'inline-block',
-      padding: '2px 8px',
-      fontSize: '0.6875rem',
-      fontWeight: 600,
-      borderRadius: 'var(--radius-sm)',
-      background: colors[action] || 'var(--color-bg-tertiary)',
-      color: 'white',
-      fontFamily: 'var(--font-mono)',
-      textTransform: 'uppercase',
-    }}>
+    <span className="mw-badge" style={{ background: colors[action] || 'var(--color-bg-tertiary)' }}>
       {action}
     </span>
   )
@@ -54,17 +44,10 @@ function actionBadge(action) {
 
 function enabledBadge(enabled) {
   return (
-    <span style={{
-      display: 'inline-block',
-      padding: '2px 8px',
-      fontSize: '0.6875rem',
-      fontWeight: 600,
-      borderRadius: 'var(--radius-sm)',
-      background: enabled ? 'var(--color-success, #22c55e)' : 'var(--color-bg-tertiary)',
-      color: enabled ? 'white' : 'var(--color-text-muted)',
-      fontFamily: 'var(--font-mono)',
-      textTransform: 'uppercase',
-    }}>
+    <span
+      className={`mw-badge${enabled ? '' : ' mw-badge--off'}`}
+      style={{ background: enabled ? 'var(--color-success)' : 'var(--color-bg-tertiary)' }}
+    >
       {enabled ? 'on' : 'off'}
     </span>
   )
@@ -136,25 +119,25 @@ export default function Middleware() {
       />
 
       {/* Tab bar */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)', marginBottom: 'var(--spacing-md)', flexWrap: 'wrap' }}>
+      <div className="hstack hstack--xs mb-md">
         {TABS.map(tab => (
           <button
             key={tab.id}
             className={`btn btn-sm ${activeTab === tab.id ? 'btn-primary' : 'btn-secondary'}`}
             onClick={() => selectTab(tab.id)}
           >
-            <i className={`fas ${tab.icon}`} style={{ marginRight: 4 }} />
+            <i className={`fas ${tab.icon} icon-before`} />
             {tab.label}
           </button>
         ))}
-        <div style={{ flex: 1 }} />
+        <div className="flex-1" />
         <button className="btn btn-secondary btn-sm" onClick={fetchAll} disabled={loading}>
           <i className={`fas fa-rotate${loading ? ' fa-spin' : ''}`} /> Refresh
         </button>
       </div>
 
       {loading && !status ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}>
+        <div className="loading-center">
           <LoadingSpinner size="lg" />
         </div>
       ) : activeTab === 'filtering' ? (
@@ -200,12 +183,12 @@ function FilteringTab({ status, addToast, onChanged }) {
   return (
     <>
       {/* Default rule banner */}
-      <div className="card" style={{ padding: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)' }}>
-        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 'var(--spacing-sm)' }}>
-          <i className="fas fa-info-circle" style={{ color: 'var(--color-text-muted)', marginTop: 2 }} />
+      <div className="card pad-md mb-md">
+        <div className="hstack hstack--top hstack--nowrap">
+          <i className="fas fa-info-circle text-muted mt-xs" />
           <div>
-            <div style={{ fontWeight: 600, marginBottom: 4 }}>NER-based PII redaction</div>
-            <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>
+            <div className="fw-semibold mb-xs">NER-based PII redaction</div>
+            <div className="text-sub">
               Redaction is per-model and runs request-side. It is OFF by default; backends matching <code>{(pii.default_enabled_for_backends || []).join(', ')}</code> default to ON (cloud passthroughs). A model opts in with <code>pii: {'{'} enabled: true, detectors: [&hellip;] {'}'}</code>; each detector is a <code>token_classify</code> model whose <code>pii_detection</code> block defines the policy (which entities, what action, min score). Edit a detector model to change its policy.
             </div>
           </div>
@@ -216,10 +199,10 @@ function FilteringTab({ status, addToast, onChanged }) {
       <DetectorModels pii={pii} addToast={addToast} onChanged={onChanged} />
 
       {/* Per-model resolved state */}
-      <div className="card" style={{ padding: 'var(--spacing-md)' }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-sm)' }}>
-          <span style={{ fontSize: '0.875rem', fontWeight: 600 }}>Per-model state</span>
-          <span style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
+      <div className="card pad-md">
+        <div className="hstack hstack--between mb-sm">
+          <span className="text-base fw-semibold">Per-model state</span>
+          <span className="text-meta">
             Toggle PII inline; edit a row for detectors and policy.
           </span>
         </div>
@@ -228,20 +211,20 @@ function FilteringTab({ status, addToast, onChanged }) {
             <thead>
               <tr>
                 <th>Model</th>
-                <th style={{ width: 120 }}>Backend</th>
-                <th style={{ width: 120 }}>PII</th>
-                <th style={{ width: 110 }}>Source</th>
+                <th className="col-w-120">Backend</th>
+                <th className="col-w-120">PII</th>
+                <th className="col-w-110">Source</th>
                 <th>Detectors</th>
-                <th style={{ width: 80 }}>Edit</th>
+                <th className="col-w-80">Edit</th>
               </tr>
             </thead>
             <tbody>
               {(pii.models || []).map(m => (
                 <tr key={m.name}>
-                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}>{m.name}</td>
-                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>{m.backend || '—'}</td>
+                  <td className="text-mono text-sm">{m.name}</td>
+                  <td className="text-mono text-meta">{m.backend || '—'}</td>
                   <td>
-                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+                    <span className="hstack hstack--xs">
                       <Toggle
                         checked={!!m.enabled}
                         disabled={piiBusy.has(m.name)}
@@ -250,27 +233,26 @@ function FilteringTab({ status, addToast, onChanged }) {
                       {m.enabled && (!m.detectors || m.detectors.length === 0) && (
                         <span
                           title="Enabled but no detector resolved — nothing is scanned. Toggle a detector's Default on above, or add pii.detectors to the model."
-                          style={{ fontSize: '0.6875rem', fontWeight: 600, color: 'var(--color-warning)', whiteSpace: 'nowrap', cursor: 'help' }}
+                          className="mw-noop"
                         >
-                          <i className="fas fa-triangle-exclamation" style={{ marginRight: 3 }} />no-op
+                          <i className="fas fa-triangle-exclamation icon-before" />no-op
                         </span>
                       )}
                     </span>
                   </td>
-                  <td style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
+                  <td className="text-meta">
                     {m.explicit ? 'YAML' : (m.default_for_backend ? 'backend default' : 'default off')}
                   </td>
-                  <td style={{ fontSize: '0.75rem', fontFamily: 'var(--font-mono)' }}>
+                  <td className="cell-mono text-xs">
                     {m.detectors && m.detectors.length > 0
-                      ? <>{m.detectors.join(', ')}{m.detectors_from_default && <span style={{ color: 'var(--color-text-muted)', fontFamily: 'var(--font-sans)' }}> (default)</span>}</>
-                      : <span style={{ color: 'var(--color-text-muted)' }}>—</span>}
+                      ? <>{m.detectors.join(', ')}{m.detectors_from_default && <span className="text-muted"> (default)</span>}</>
+                      : <span className="text-muted">—</span>}
                   </td>
                   <td>
                     <Link
                       to={`/app/model-editor/${encodeURIComponent(m.name)}`}
                       state={fromState(location, 'Middleware')}
-                      className="btn btn-secondary btn-sm"
-                      style={{ fontSize: '0.6875rem', padding: '2px 8px' }}
+                      className="btn btn-secondary btn-sm pill-xs"
                       title={`Edit ${m.name}.yaml`}
                     >
                       <i className="fas fa-pen-to-square" /> Edit
@@ -280,7 +262,7 @@ function FilteringTab({ status, addToast, onChanged }) {
               ))}
               {(!pii.models || pii.models.length === 0) && (
                 <tr>
-                  <td colSpan={6} style={{ textAlign: 'center', color: 'var(--color-text-muted)', padding: 'var(--spacing-md)' }}>
+                  <td colSpan={6} className="inline-empty">
                     No models loaded.
                   </td>
                 </tr>
@@ -304,17 +286,7 @@ function detectorTypeBadge(type) {
   }
   const t = map[type] || map.unknown
   return (
-    <span style={{
-      display: 'inline-block',
-      padding: '2px 8px',
-      fontSize: '0.6875rem',
-      fontWeight: 600,
-      borderRadius: 'var(--radius-sm)',
-      background: t.color,
-      color: 'white',
-      fontFamily: 'var(--font-mono)',
-      textTransform: 'uppercase',
-    }}>
+    <span className="mw-badge" style={{ background: t.color }}>
       {t.label}
     </span>
   )
@@ -356,9 +328,9 @@ function DetectorModels({ pii, addToast, onChanged }) {
   }
 
   return (
-    <div className="card" style={{ padding: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)' }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-sm)', gap: 'var(--spacing-sm)', flexWrap: 'wrap' }}>
-        <span style={{ fontSize: '0.875rem', fontWeight: 600 }}>Detector models</span>
+    <div className="card pad-md mb-md">
+      <div className="hstack hstack--between mb-sm">
+        <span className="text-base fw-semibold">Detector models</span>
         <button
           className="btn btn-secondary btn-sm"
           onClick={() => navigate('/app/model-editor?template=secret-filter', { state: fromState(location, 'Middleware') })}
@@ -367,7 +339,7 @@ function DetectorModels({ pii, addToast, onChanged }) {
           <i className="fas fa-plus" /> Add detector model
         </button>
       </div>
-      <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)', marginBottom: 'var(--spacing-sm)' }}>
+      <div className="text-sub mb-sm">
         These token_classify models do the scanning. Toggle <strong>Default</strong> on to apply a
         detector to any PII-enabled model that names none of its own (chiefly cloud-proxy / MITM models).
         Per-model <code>pii.detectors</code> always overrides. Edit a detector to change which entities it
@@ -379,22 +351,22 @@ function DetectorModels({ pii, addToast, onChanged }) {
           <thead>
             <tr>
               <th>Detector model</th>
-              <th style={{ width: 110 }}>Type</th>
-              <th style={{ width: 120 }}>Backend</th>
-              <th style={{ width: 110 }}>Default</th>
-              <th style={{ width: 80 }}>Edit</th>
+              <th className="col-w-110">Type</th>
+              <th className="col-w-120">Backend</th>
+              <th className="col-w-110">Default</th>
+              <th className="col-w-80">Edit</th>
             </tr>
           </thead>
           <tbody>
             {rows.map(d => (
               <tr key={d.name}>
-                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem', fontWeight: 600 }}>
+                <td className="text-mono text-sm fw-semibold">
                   {d.missing
                     ? <span title="This default detector names a model that is not loaded.">{d.name}</span>
                     : <Link to={`/app/model-editor/${encodeURIComponent(d.name)}`} state={fromState(location, 'Middleware')} title={`Edit ${d.name}.yaml`}>{d.name}</Link>}
                 </td>
                 <td>{detectorTypeBadge(d.type)}</td>
-                <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>{d.backend || '—'}</td>
+                <td className="text-mono text-meta">{d.backend || '—'}</td>
                 <td>
                   <Toggle
                     checked={!!d.default}
@@ -404,13 +376,12 @@ function DetectorModels({ pii, addToast, onChanged }) {
                 </td>
                 <td>
                   {d.missing ? (
-                    <span style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>—</span>
+                    <span className="text-meta">—</span>
                   ) : (
                     <Link
                       to={`/app/model-editor/${encodeURIComponent(d.name)}`}
                       state={fromState(location, 'Middleware')}
-                      className="btn btn-secondary btn-sm"
-                      style={{ fontSize: '0.6875rem', padding: '2px 8px' }}
+                      className="btn btn-secondary btn-sm pill-xs"
                       title={`Edit ${d.name}.yaml`}
                     >
                       <i className="fas fa-pen-to-square" /> Edit
@@ -421,7 +392,7 @@ function DetectorModels({ pii, addToast, onChanged }) {
             ))}
             {rows.length === 0 && (
               <tr>
-                <td colSpan={5} style={{ textAlign: 'center', color: 'var(--color-text-muted)', padding: 'var(--spacing-md)' }}>
+                <td colSpan={5} className="inline-empty">
                   No detector models loaded. Add one with the button above (a token_classify NER model
                   or a built-in secret pattern model).
                 </td>
@@ -461,42 +432,20 @@ function LabelBar({ label, score, threshold, active }) {
   const scorePct = Math.max(0, Math.min(100, score * 100))
   const thresholdPct = Math.max(0, Math.min(100, (threshold || 0) * 100))
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>
-      <div style={{
-        width: 160,
-        color: active ? 'var(--color-text)' : 'var(--color-text-muted)',
-        fontWeight: active ? 600 : 400,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-      }} title={label}>
+    <div className="mw-score">
+      <div className={`mw-score__label${active ? ' mw-score__label--active' : ''}`} title={label}>
         {label}
       </div>
-      <div style={{ flex: 1, position: 'relative', height: 14, background: 'var(--color-border, #e5e7eb)', borderRadius: 2 }}>
-        <div style={{
-          width: `${scorePct}%`,
-          height: '100%',
-          background: active ? 'var(--color-success, #2da44e)' : 'var(--color-text-muted)',
-          opacity: active ? 1 : 0.45,
-          borderRadius: 2,
-        }} />
+      <div className="mw-score__track">
+        <div className={`mw-score__fill${active ? ' mw-score__fill--active' : ''}`} style={{ width: `${scorePct}%` }} />
         {threshold > 0 && (
           <div
             title={`Activation threshold ${thresholdPct.toFixed(0)}%`}
-            style={{
-              position: 'absolute',
-              top: -3,
-              left: `${thresholdPct}%`,
-              width: 2,
-              height: 20,
-              background: 'var(--color-warning, #d97706)',
-              transform: 'translateX(-1px)',
-              pointerEvents: 'none',
-            }}
+            className="mw-score__threshold" style={{ left: `${thresholdPct}%` }}
           />
         )}
       </div>
-      <div style={{ width: 56, textAlign: 'right', color: 'var(--color-text-muted)' }}>
+      <div className="mw-score__value">
         {scorePct.toFixed(1)}%
       </div>
     </div>
@@ -509,7 +458,7 @@ function LabelBar({ label, score, threshold, active }) {
 function DecisionDetail({ d }) {
   if (!d.label_scores?.length) {
     return (
-      <div style={{ color: 'var(--color-text-muted)', fontSize: '0.75rem', fontStyle: 'italic' }}>
+      <div className="text-meta text-italic">
         {d.cached
           ? 'Cached decision — per-label scores not recorded (the cache stores only the resulting label set).'
           : 'No per-label scores recorded for this decision (likely a fallback row).'}
@@ -519,10 +468,10 @@ function DecisionDetail({ d }) {
   const threshold = d.activation_threshold || 0
   const active = decisionActiveSet(d)
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, maxWidth: 720 }}>
-      <div style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
+    <div className="stack stack--xs" style={{ maxWidth: 720 }}>
+      <div className="text-meta">
         Activation threshold:&nbsp;
-        <span style={{ color: 'var(--color-warning, #d97706)', fontWeight: 600 }}>
+        <span className="text-warning fw-semibold">
           {(threshold * 100).toFixed(0)}%
         </span>
         &nbsp;(orange marker on each bar)
@@ -575,8 +524,7 @@ function RoutingTab({ status, decisions }) {
           {router.note || 'Add a `router:` block to a model YAML to enable intelligent routing. The classifier picks one of the listed candidates per request and the standard model-resolution path runs against the chosen target.'}
         </p>
         <button
-          className="btn btn-primary"
-          style={{ marginTop: 'var(--spacing-md)' }}
+          className="btn btn-primary mt-md"
           onClick={() => navigate('/app/model-editor?template=router', { state: fromState(location, 'Middleware') })}
         >
           <i className="fas fa-plus" /> Create routing model
@@ -588,11 +536,11 @@ function RoutingTab({ status, decisions }) {
   return (
     <>
       {/* Configured router models */}
-      <div className="card" style={{ padding: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)' }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-sm)' }}>
-          <span style={{ fontSize: '0.875rem', fontWeight: 600 }}>Active routers</span>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
-            <span style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
+      <div className="card pad-md mb-md">
+        <div className="hstack hstack--between mb-sm">
+          <span className="text-base fw-semibold">Active routers</span>
+          <div className="hstack">
+            <span className="text-meta">
               Edit the router model YAML to change candidates or rules.
             </span>
             <button
@@ -608,33 +556,33 @@ function RoutingTab({ status, decisions }) {
           <table className="table">
             <thead>
               <tr>
-                <th style={{ width: 160 }}>Model</th>
-                <th style={{ width: 110 }}>Classifier</th>
+                <th className="w-160">Model</th>
+                <th className="col-w-110">Classifier</th>
                 <th>Candidates</th>
-                <th style={{ width: 200 }}>Embedding cache</th>
-                <th style={{ width: 140 }}>Fallback</th>
+                <th className="col-w-200">Embedding cache</th>
+                <th className="col-w-140">Fallback</th>
               </tr>
             </thead>
             <tbody>
               {router.models.map(m => (
                 <tr key={m.name}>
-                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem', fontWeight: 600 }}>
+                  <td className="text-mono text-sm fw-semibold">
                     <Link to={`/app/model-editor/${encodeURIComponent(m.name)}`} state={fromState(location, 'Middleware')} title="Edit this router model's config">{m.name}</Link>
                   </td>
-                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>{m.classifier}</td>
-                  <td style={{ fontSize: '0.75rem' }}>
+                  <td className="text-mono text-xs">{m.classifier}</td>
+                  <td className="text-xs">
                     {(m.candidates || []).map((c, i) => (
-                      <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)' }}>
-                        <span style={{ minWidth: 100, color: 'var(--color-primary)' }}>{(c.labels || []).join(', ') || '—'}</span>
-                        <span style={{ color: 'var(--color-text-muted)' }}>→</span>
+                      <div key={i} className="hstack hstack--xs text-mono">
+                        <span className="min-w-100 text-primary">{(c.labels || []).join(', ') || '—'}</span>
+                        <span className="text-muted">→</span>
                         <span>{c.model}</span>
                       </div>
                     ))}
                   </td>
-                  <td style={{ fontSize: '0.75rem' }}>
+                  <td className="text-xs">
                     <RouterCacheCell cache={m.embedding_cache} />
                   </td>
-                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+                  <td className="text-mono text-meta">
                     {m.fallback || '—'}
                   </td>
                 </tr>
@@ -645,15 +593,15 @@ function RoutingTab({ status, decisions }) {
       </div>
 
       {/* Recent decisions */}
-      <div className="card" style={{ padding: 'var(--spacing-md)' }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-sm)' }}>
-          <span style={{ fontSize: '0.875rem', fontWeight: 600 }}>Recent decisions</span>
-          <span style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
+      <div className="card pad-md">
+        <div className="hstack hstack--between mb-sm">
+          <span className="text-base fw-semibold">Recent decisions</span>
+          <span className="text-meta">
             Newest first, capped at 100.
           </span>
         </div>
         {(!decisions || decisions.length === 0) ? (
-          <div style={{ padding: 'var(--spacing-md)', textAlign: 'center', color: 'var(--color-text-muted)', fontSize: '0.8125rem' }}>
+          <div className="inline-empty text-sm">
             No routing decisions yet. Send a request to a router model to populate this log.
           </div>
         ) : (
@@ -661,11 +609,11 @@ function RoutingTab({ status, decisions }) {
             <table className="table">
               <thead>
                 <tr>
-                  <th style={{ width: 170 }}>Time</th>
-                  <th style={{ width: 130 }}>Router</th>
-                  <th style={{ width: 80 }}>Label</th>
-                  <th style={{ width: 130 }}>Served</th>
-                  <th style={{ width: 90 }}>Latency</th>
+                  <th className="col-w-170">Time</th>
+                  <th className="col-w-130">Router</th>
+                  <th className="col-w-80">Label</th>
+                  <th className="col-w-130">Served</th>
+                  <th className="col-w-90">Latency</th>
                   <th>Correlation</th>
                 </tr>
               </thead>
@@ -676,29 +624,29 @@ function RoutingTab({ status, decisions }) {
                     <Fragment key={d.id}>
                       <tr
                         onClick={() => toggleExpanded(d.id)}
-                        style={{ cursor: 'pointer' }}
+                        className="clickable"
                         title={isExpanded ? 'Click to collapse' : 'Click to see per-label score breakdown'}
                       >
-                        <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
-                          <span style={{ display: 'inline-block', width: 12, color: 'var(--color-text-muted)' }}>
+                        <td className="text-mono text-meta">
+                          <span className="d-block text-muted w-12">
                             {isExpanded ? '▼' : '▶'}
                           </span>
                           {d.created_at}
                         </td>
-                        <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>{d.router_model}</td>
-                        <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', fontWeight: 600 }}>
+                        <td className="text-mono text-xs">{d.router_model}</td>
+                        <td className="cell-mono text-xs fw-semibold">
                           {d.label}
                           {d._scoreSuffix}
                         </td>
-                        <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>{d.served_model}</td>
-                        <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>{d.latency_ms}ms</td>
-                        <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
+                        <td className="text-mono text-xs">{d.served_model}</td>
+                        <td className="text-mono text-meta">{d.latency_ms}ms</td>
+                        <td className="text-mono text-meta">
                           {d.correlation_id || '—'}
                         </td>
                       </tr>
                       {isExpanded && (
                         <tr>
-                          <td colSpan={6} style={{ background: 'var(--color-bg-muted, #f6f8fa)', padding: 'var(--spacing-md)' }}>
+                          <td colSpan={6} className="bg-muted pad-md">
                             <DecisionDetail d={d} />
                           </td>
                         </tr>
@@ -767,23 +715,23 @@ function ProxyTab({ status, addToast, onChanged }) {
   const mitmModels = mitm.models || []
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-md)' }}>
+    <div className="stack">
       {conflictHosts.length > 0 && (
-        <div className="card" style={{ padding: 'var(--spacing-md)', borderLeft: '3px solid var(--color-error)' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-xs)' }}>
-            <i className="fas fa-triangle-exclamation" style={{ color: 'var(--color-error)' }} />
-            <span style={{ fontWeight: 600 }}>MITM listener disabled — duplicate host claims</span>
+        <div className="card mw-alert">
+          <div className="hstack mb-xs">
+            <i className="fas fa-triangle-exclamation text-error" />
+            <span className="fw-semibold">MITM listener disabled — duplicate host claims</span>
           </div>
-          <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)', margin: 0 }}>
+          <p className="text-sub m-0">
             Each MITM intercept host must be owned by exactly one model config. Resolve by editing the conflicting model YAMLs.
           </p>
-          <ul style={{ margin: 'var(--spacing-xs) 0 0', paddingLeft: 20, fontSize: '0.8125rem' }}>
+          <ul className="mw-list text-sm mt-xs">
             {conflictHosts.map(h => (
               <li key={h}>
-                <code style={{ fontFamily: 'var(--font-mono)' }}>{h}</code>
+                <code className="text-mono">{h}</code>
                 {' claimed by: '}
                 {(conflicts[h] || []).map(name => (
-                  <Link key={name} to={`/app/model-editor/${encodeURIComponent(name)}`} state={fromState(location, 'Middleware')} style={{ marginRight: 6, fontFamily: 'var(--font-mono)' }}>
+                  <Link key={name} to={`/app/model-editor/${encodeURIComponent(name)}`} state={fromState(location, 'Middleware')} className="icon-before text-mono">
                     {name}
                   </Link>
                 ))}
@@ -793,26 +741,26 @@ function ProxyTab({ status, addToast, onChanged }) {
         </div>
       )}
 
-      <div className="card" style={{ padding: 'var(--spacing-lg)' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)' }}>
-          <h2 style={{ fontSize: '1rem', fontWeight: 600, margin: 0 }}>State</h2>
+      <div className="card pad-lg">
+        <div className="hstack hstack--md mb-md">
+          <h2 className="text-lg fw-semibold m-0">State</h2>
           {enabledBadge(mitm.running)}
           {mitm.running && (
-            <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>
+            <span className="text-mono text-sub">
               listening on {mitm.listen_addr}
             </span>
           )}
         </div>
-        <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)', marginBottom: 'var(--spacing-sm)' }}>
+        <p className="text-sub mb-sm">
           The MITM proxy terminates TLS for allowlisted hosts so PII redaction
           can run on traffic from clients that authenticate via OAuth /
           subscription (Claude Code, Codex CLI). Non-allowlisted hosts get a
           plain CONNECT tunnel — no inspection, no CA-trust required.
         </p>
         {ownerEntries.length > 0 ? (
-          <div style={{ marginBottom: 'var(--spacing-sm)', fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
-            <div style={{ marginBottom: 4 }}>Hosts claimed by model configs (PII settings flow from the owning config):</div>
-            <ul style={{ margin: 0, paddingLeft: 20, fontFamily: 'var(--font-mono)' }}>
+          <div className="text-meta mb-sm">
+            <div className="mb-xs">Hosts claimed by model configs (PII settings flow from the owning config):</div>
+            <ul className="mw-list mw-list--mono">
               {ownerEntries.map(([host, name]) => (
                 <li key={host}>
                   {host} → <Link to={`/app/model-editor/${encodeURIComponent(name)}`} state={fromState(location, 'Middleware')}>{name}</Link>
@@ -821,7 +769,7 @@ function ProxyTab({ status, addToast, onChanged }) {
             </ul>
           </div>
         ) : (
-          <div style={{ marginBottom: 'var(--spacing-sm)', fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+          <div className="text-meta mb-sm">
             No model config declares an MITM intercept host. Without one, every CONNECT tunnels through unmodified. Create one from the Add Model page using the MITM Intercept template.
           </div>
         )}
@@ -834,15 +782,15 @@ function ProxyTab({ status, addToast, onChanged }) {
             <i className="fas fa-download" /> Download CA cert
           </a>
         ) : (
-          <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+          <span className="text-meta">
             CA not generated yet — start the listener to generate it.
           </span>
         )}
       </div>
 
-      <div className="card" style={{ padding: 'var(--spacing-lg)' }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-sm)' }}>
-          <h2 style={{ fontSize: '1rem', fontWeight: 600, margin: 0 }}>MITM Models</h2>
+      <div className="card pad-lg">
+        <div className="hstack hstack--between mb-sm">
+          <h2 className="text-lg fw-semibold m-0">MITM Models</h2>
           <button
             className="btn btn-secondary btn-sm"
             onClick={() => navigate('/app/model-editor?template=mitm', { state: fromState(location, 'Middleware') })}
@@ -852,7 +800,7 @@ function ProxyTab({ status, addToast, onChanged }) {
           </button>
         </div>
         {mitmModels.length === 0 ? (
-          <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>
+          <div className="text-note">
             No model config declares <code>mitm.hosts</code>. Use the Add MITM model button above — the template defaults to <code>api.anthropic.com</code> with PII filtering on.
           </div>
         ) : (
@@ -861,15 +809,15 @@ function ProxyTab({ status, addToast, onChanged }) {
               <tr>
                 <th>Model</th>
                 <th>Hosts</th>
-                <th style={{ width: 80 }}>PII</th>
-                <th style={{ width: 80 }}>Edit</th>
+                <th className="col-w-80">PII</th>
+                <th className="col-w-80">Edit</th>
               </tr>
             </thead>
             <tbody>
               {mitmModels.map(m => (
                 <tr key={m.name}>
-                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem', fontWeight: 600 }}>{m.name}</td>
-                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>
+                  <td className="text-mono text-sm fw-semibold">{m.name}</td>
+                  <td className="text-mono text-xs">
                     {(m.hosts || []).join(', ')}
                   </td>
                   <td>{enabledBadge(m.pii_enabled)}</td>
@@ -877,8 +825,7 @@ function ProxyTab({ status, addToast, onChanged }) {
                     <Link
                       to={`/app/model-editor/${encodeURIComponent(m.name)}`}
                       state={fromState(location, 'Middleware')}
-                      className="btn btn-secondary btn-sm"
-                      style={{ fontSize: '0.6875rem', padding: '2px 8px' }}
+                      className="btn btn-secondary btn-sm pill-xs"
                     >
                       <i className="fas fa-pen-to-square" /> Edit
                     </Link>
@@ -890,31 +837,31 @@ function ProxyTab({ status, addToast, onChanged }) {
         )}
       </div>
 
-      <div className="card" style={{ padding: 'var(--spacing-lg)' }}>
-        <h2 style={{ fontSize: '1rem', fontWeight: 600, marginTop: 0, marginBottom: 'var(--spacing-md)' }}>Configuration</h2>
+      <div className="card pad-lg">
+        <h2 className="text-lg fw-semibold mb-md mt-0">Configuration</h2>
 
-        <label style={{ display: 'block', marginBottom: 'var(--spacing-md)' }}>
-          <div style={{ fontSize: '0.875rem', fontWeight: 500, marginBottom: 'var(--spacing-xs)' }}>Listen address</div>
+        <label className="d-block mb-md">
+          <div className="text-base fw-medium mb-xs">Listen address</div>
           <input
             type="text"
             value={listen}
             onChange={e => setListen(e.target.value)}
             placeholder=":8443  (leave empty to disable)"
-            style={{ width: '100%', padding: '8px 12px', fontFamily: 'var(--font-mono)', fontSize: '0.875rem', background: 'var(--color-bg-tertiary)', border: '1px solid var(--color-border-default)', borderRadius: 'var(--radius-sm)', color: 'var(--color-text-primary)' }}
+            className="mw-field-input"
           />
-          <div style={{ marginTop: 'var(--spacing-xs)', fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+          <div className="text-meta mt-xs">
             Bind address for the proxy listener. Empty disables it. Bind to <code>127.0.0.1:port</code> unless the listener is reachable only from clients you control — there is no auth on the CONNECT port. Clients connect to the proxy over plain HTTP (use <code>http://</code>, even for the <code>HTTPS_PROXY</code> env var); the proxy terminates TLS for allowlisted hosts inside the CONNECT tunnel.
           </div>
         </label>
 
-        <div style={{ marginBottom: 'var(--spacing-md)', fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>
+        <div className="text-sub mb-md">
           Intercept hosts are declared per-model in the model YAML's
-          {' '}<code style={{ fontFamily: 'var(--font-mono)' }}>mitm.hosts:</code>{' '}
+          {' '}<code className="text-mono">mitm.hosts:</code>{' '}
           block. Each host is owned by exactly one model config; PII filtering and
           pattern overrides flow from the owning config when the host is intercepted.
         </div>
 
-        <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
+        <div className="hstack">
           <button
             className="btn btn-primary btn-sm"
             onClick={save}
@@ -934,12 +881,12 @@ function ProxyTab({ status, addToast, onChanged }) {
         </div>
       </div>
 
-      <div className="card" style={{ padding: 'var(--spacing-md)', background: 'var(--color-bg-secondary)' }}>
-        <h2 style={{ fontSize: '0.875rem', fontWeight: 600, marginTop: 0, marginBottom: 'var(--spacing-sm)' }}>Client setup</h2>
-        <ol style={{ margin: 0, paddingLeft: 20, fontSize: '0.8125rem', color: 'var(--color-text-secondary)', lineHeight: 1.7 }}>
+      <div className="card pad-md bg-secondary">
+        <h2 className="text-base fw-semibold mb-sm mt-0">Client setup</h2>
+        <ol className="mw-list text-sub">
           <li>Download the CA cert (button above).</li>
-          <li>Trust it on the client. For Node-based CLIs (Claude Code, Codex): <code style={{ fontFamily: 'var(--font-mono)' }}>export NODE_EXTRA_CA_CERTS=$(pwd)/localai-mitm-ca.crt</code></li>
-          <li>Point the client at the proxy: <code style={{ fontFamily: 'var(--font-mono)' }}>export HTTPS_PROXY=http://&lt;host&gt;:&lt;port&gt;</code> (yes, <code>http://</code> — clients speak plain HTTP to the proxy, which then terminates TLS for allowlisted hosts on the inner connection).</li>
+          <li>Trust it on the client. For Node-based CLIs (Claude Code, Codex): <code className="text-mono">export NODE_EXTRA_CA_CERTS=$(pwd)/localai-mitm-ca.crt</code></li>
+          <li>Point the client at the proxy: <code className="text-mono">export HTTPS_PROXY=http://&lt;host&gt;:&lt;port&gt;</code> (yes, <code>http://</code> — clients speak plain HTTP to the proxy, which then terminates TLS for allowlisted hosts on the inner connection).</li>
         </ol>
       </div>
     </div>
@@ -1007,18 +954,7 @@ function kindBadge(kind) {
     admission: 'var(--color-error)',
   }
   return (
-    <span style={{
-      display: 'inline-block',
-      padding: '2px 8px',
-      fontSize: '0.6875rem',
-      fontWeight: 600,
-      borderRadius: 'var(--radius-sm)',
-      background: colors[kind] || 'var(--color-bg-tertiary)',
-      color: 'white',
-      fontFamily: 'var(--font-mono)',
-      textTransform: 'uppercase',
-      whiteSpace: 'nowrap',
-    }}>
+    <span className="mw-badge mw-badge--nowrap" style={{ background: colors[kind] || 'var(--color-bg-tertiary)' }}>
       {kind.replace(/_/g, ' ')}
     </span>
   )
@@ -1029,15 +965,15 @@ function EventsTab({ events }) {
   const filtered = kindFilter ? events.filter(e => eventKind(e) === kindFilter) : events
 
   return (
-    <div className="card" style={{ padding: 'var(--spacing-md)' }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-sm)', gap: 'var(--spacing-sm)', flexWrap: 'wrap' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)' }}>
-          <span style={{ fontSize: '0.875rem', fontWeight: 600 }}>Recent events</span>
-          <span style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
+    <div className="card pad-md">
+      <div className="hstack hstack--between mb-sm">
+        <div className="hstack hstack--xs">
+          <span className="text-base fw-semibold">Recent events</span>
+          <span className="text-meta">
             shared by PII filter and MITM proxy · newest first · capped at 100
           </span>
         </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)' }}>
+        <div className="hstack hstack--xs">
           {EVENT_KINDS.map(k => (
             <button
               key={k.id || 'all'}
@@ -1064,29 +1000,29 @@ function EventsTab({ events }) {
           <table className="table">
             <thead>
               <tr>
-                <th style={{ width: 170 }}>Time</th>
-                <th style={{ width: 130 }}>Kind</th>
-                <th style={{ width: 200 }}>Subject</th>
+                <th className="col-w-170">Time</th>
+                <th className="col-w-130">Kind</th>
+                <th className="col-w-200">Subject</th>
                 <th>Details</th>
-                <th style={{ width: 110 }}>Action</th>
+                <th className="col-w-110">Action</th>
                 <th>Correlation</th>
               </tr>
             </thead>
             <tbody>
               {filtered.map(e => (
                 <tr key={e.id}>
-                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+                  <td className="text-mono text-meta">
                     {e.created_at}
                   </td>
                   <td>{kindBadge(eventKind(e))}</td>
-                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem', fontWeight: 600 }}>
+                  <td className="text-mono text-sm fw-semibold">
                     {eventSubject(e)}
                   </td>
-                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+                  <td className="text-mono text-meta">
                     {eventDetails(e)}
                   </td>
                   <td>{e.action ? actionBadge(e.action) : '—'}</td>
-                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
+                  <td className="text-mono text-meta">
                     {e.correlation_id || '—'}
                   </td>
                 </tr>
@@ -1106,7 +1042,7 @@ function EventsTab({ events }) {
 // admins can tell at a glance whether the threshold is well-placed.
 function RouterCacheCell({ cache }) {
   if (!cache) {
-    return <span style={{ color: 'var(--color-text-muted)' }}>—</span>
+    return <span className="text-muted">—</span>
   }
   const stats = cache.stats || {}
   const hits = stats.hits || 0
@@ -1121,25 +1057,25 @@ function RouterCacheCell({ cache }) {
   const threshold = cache.similarity_threshold || 0.80
   const thresholdBucket = Math.max(0, Math.min(9, Math.floor(threshold * 10)))
   return (
-    <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.6875rem', lineHeight: 1.3 }}>
-      <div style={{ fontWeight: 600 }}>{cache.embedding_model}</div>
-      <div style={{ color: 'var(--color-text-muted)' }}>
+    <div className="text-mono text-xs">
+      <div className="fw-semibold">{cache.embedding_model}</div>
+      <div className="text-muted">
         {totalLookups === 0 ? (
           <span>no traffic yet</span>
         ) : (
           <>
-            <span style={{ color: hitRate >= 50 ? 'var(--color-success, #2da44e)' : 'var(--color-text-muted)' }}>
+            <span className={hitRate >= 50 ? 'text-success' : 'text-muted'}>
               {hitRate}% hit
             </span>
             <span> · {hits}h/{nearMisses}n/{misses}m</span>
             {lowConf > 0 && <span> · {lowConf} skipped</span>}
-            {errors > 0 && <span style={{ color: 'var(--color-warning, #d97706)' }}> · {errors} err</span>}
+            {errors > 0 && <span className="text-warning"> · {errors} err</span>}
           </>
         )}
       </div>
       {buckets.length === 10 && buckets.some(v => v > 0) && (
         <div title={`Cosine similarity histogram, threshold=${threshold}`}
-             style={{ display: 'flex', alignItems: 'flex-end', gap: 1, marginTop: 4, height: 18 }}>
+             className="mw-hist">
           {buckets.map((count, i) => {
             const h = bucketMax > 0 ? Math.max(2, Math.round((count / bucketMax) * 18)) : 2
             const inHitZone = i >= thresholdBucket
@@ -1147,20 +1083,11 @@ function RouterCacheCell({ cache }) {
               <div
                 key={i}
                 title={`[${(i/10).toFixed(1)}, ${((i+1)/10).toFixed(1)}): ${count}`}
-                style={{
-                  width: 6,
-                  height: h,
-                  background: count === 0
-                    ? 'var(--color-border, #e5e7eb)'
-                    : inHitZone
-                      ? 'var(--color-success, #2da44e)'
-                      : 'var(--color-warning, #d97706)',
-                  opacity: count === 0 ? 0.3 : 1,
-                }}
+                className={`mw-hist__bar${count === 0 ? '' : inHitZone ? ' mw-hist__bar--hit' : ' mw-hist__bar--miss'}`} style={{ height: h }}
               />
             )
           })}
-          <div style={{ marginLeft: 4, fontSize: '0.625rem', color: 'var(--color-text-muted)' }}>
+          <div className="ml-xs text-meta">
             sim ≥ {threshold}
           </div>
         </div>
diff --git a/core/http/react-ui/src/pages/ModelEditor.jsx b/core/http/react-ui/src/pages/ModelEditor.jsx
index a5d11c8d4ff8..fddc3edfcd90 100644
--- a/core/http/react-ui/src/pages/ModelEditor.jsx
+++ b/core/http/react-ui/src/pages/ModelEditor.jsx
@@ -266,16 +266,16 @@ export default function ModelEditor() {
     if (isCreateMode) return null
     if (vramEstimate.loading) {
       return (
-        <div style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)', marginTop: 4 }}>
-          <i className="fas fa-spinner fa-spin" style={{ marginRight: 4 }} />
+        <div className="text-meta mt-xs">
+          <i className="fas fa-spinner fa-spin icon-before" />
           Estimating VRAM...
         </div>
       )
     }
     if (vramEstimate.vramDisplay) {
       return (
-        <div style={{ fontSize: '0.6875rem', color: 'var(--color-warning)', marginTop: 4, fontWeight: 500 }}>
-          <i className="fas fa-memory" style={{ marginRight: 4 }} />
+        <div className="text-xs text-warning fw-medium mt-xs">
+          <i className="fas fa-memory icon-before" />
           ~{vramEstimate.vramDisplay} VRAM
         </div>
       )
@@ -421,7 +421,7 @@ export default function ModelEditor() {
   const loading = metaLoading || configLoading
   const showTemplateSelector = isCreateMode && !selectedTemplate
 
-  if (loading) return <div className="page page--medium" style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}><LoadingSpinner size="lg" /></div>
+  if (loading) return <div className="page page--medium loading-center"><LoadingSpinner size="lg" /></div>
   if (metaError) return <div className="page page--medium"><div className="empty-state"><p className="empty-state-text">Failed to load config metadata: {metaError}</p></div></div>
 
   const backPage = isCreateMode && selectedTemplate ? t('actions.templates')
@@ -430,12 +430,9 @@ export default function ModelEditor() {
 
   return (
     <FormContextProvider formData={values}>
-    <div className="page page--medium" style={{ padding: 0 }}>
+    <div className="page page--medium p-0">
       {/* Header */}
-      <div style={{
-        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-        padding: 'var(--spacing-lg) var(--spacing-lg) var(--spacing-md)',
-      }}>
+      <div className="me-head">
         <div>
           <h1 className="page-title">{isCreateMode ? t('title.add') : t('title.edit')}</h1>
           <p className="page-subtitle">
@@ -444,7 +441,7 @@ export default function ModelEditor() {
               : decodeURIComponent(name)}
           </p>
         </div>
-        <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
+        <div className="hstack">
           <button className="btn btn-secondary" onClick={() => {
             if (isCreateMode && selectedTemplate) { setSelectedTemplate(null); setValues({}); setActiveFieldPaths(new Set()) }
             else if (backState) navigate(backState.from)
@@ -471,10 +468,7 @@ export default function ModelEditor() {
       {/* Tabs (hidden during template selection) */}
       {!showTemplateSelector && (
         <div>
-          <div style={{
-            display: 'flex', gap: 0, padding: '0 var(--spacing-lg)',
-            borderBottom: '1px solid var(--color-border)',
-          }}>
+          <div className="me-tabs">
             {['interactive', 'yaml'].map(tb => {
               const active = tab === tb
               const blocked = !active && isDirty
@@ -487,35 +481,20 @@ export default function ModelEditor() {
                     setTabSwitchWarning(false)
                     setTab(tb)
                   }}
-                  style={{
-                    padding: 'var(--spacing-sm) var(--spacing-md)', border: 'none',
-                    cursor: blocked ? 'not-allowed' : 'pointer',
-                    background: 'transparent', fontSize: '0.875rem',
-                    fontWeight: active ? 600 : 400,
-                    opacity: blocked ? 0.5 : 1,
-                    color: active ? 'var(--color-primary)' : 'var(--color-text-secondary)',
-                    borderBottom: active ? '2px solid var(--color-primary)' : '2px solid transparent',
-                    transition: 'all 150ms',
-                  }}
+                  className={`me-tab${active ? ' me-tab--on' : ''}${blocked ? ' me-tab--blocked' : ''}`}
                 >
-                  <i className={`fas ${tb === 'interactive' ? 'fa-sliders' : 'fa-code'}`} style={{ marginRight: 6 }} />
+                  <i className={`fas ${tb === 'interactive' ? 'fa-sliders' : 'fa-code'} icon-before`} />
                   {tb === 'interactive' ? t('tabs.interactive') : t('tabs.yaml')}
                 </button>
               )
             })}
           </div>
           {tabSwitchWarning && isDirty && (
-            <div style={{
-              display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)',
-              padding: 'var(--spacing-sm) var(--spacing-lg)',
-              fontSize: '0.8125rem', color: 'var(--color-warning, #f59e0b)',
-              background: 'var(--color-warning-light, rgba(245, 158, 11, 0.08))',
-            }}>
+            <div className="me-warn">
               <i className="fas fa-exclamation-triangle" />
               <span>{t('actions.switchWarning')}</span>
               <button
-                className="btn btn-secondary"
-                style={{ marginLeft: 'auto', padding: '2px 10px', fontSize: '0.75rem' }}
+                className="btn btn-secondary ml-auto pill-tiny"
                 onClick={() => {
                   if (tab === 'yaml') {
                     setYamlText(savedYamlText)
@@ -536,9 +515,9 @@ export default function ModelEditor() {
 
       {/* YAML Tab */}
       {!showTemplateSelector && tab === 'yaml' && (
-        <div style={{ padding: '0 var(--spacing-lg) var(--spacing-lg)' }}>
+        <div className="me-pad--bottom">
           {isCreateMode && (
-            <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)', marginBottom: 'var(--spacing-sm)' }}>
+            <p className="text-sub mb-sm">
               {t('tabs.yamlDescription')}
             </p>
           )}
@@ -556,21 +535,20 @@ export default function ModelEditor() {
         <>
           {/* Model name input (create mode) */}
           {isCreateMode && (
-            <div style={{ padding: '0 var(--spacing-lg)', marginBottom: 'var(--spacing-md)' }}>
-              <div className="card" style={{ padding: 'var(--spacing-md)' }}>
-                <label className="form-label" style={{ fontWeight: 600 }}>
-                  <i className="fas fa-tag" style={{ marginRight: '6px', color: 'var(--color-primary)' }} />
+            <div className="me-pad mb-md">
+              <div className="card pad-md">
+                <label className="form-label fw-semibold">
+                  <i className="fas fa-tag icon-before text-primary" />
                   {t('forms.modelName.label')}
                 </label>
                 <input
-                  className="input"
+                  className="input max-w-400"
                   type="text"
                   value={values['name'] || ''}
                   onChange={e => handleFieldChange('name', e.target.value)}
                   placeholder={t('forms.modelName.placeholder')}
-                  style={{ maxWidth: 400 }}
                 />
-                <p style={{ marginTop: 'var(--spacing-xs)', fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+                <p className="text-meta mt-xs">
                   {t('forms.modelName.hint')}
                 </p>
               </div>
@@ -578,7 +556,7 @@ export default function ModelEditor() {
           )}
 
           {/* Field browser */}
-          <div style={{ padding: '0 var(--spacing-lg)' }}>
+          <div className="me-pad">
             <FieldBrowser
               fields={fields}
               activeFieldPaths={activeFieldPaths}
@@ -590,39 +568,27 @@ export default function ModelEditor() {
               no inner overflow:auto here, so the global footer ends up
               below the content (like every other page) instead of pinned
               to the viewport bottom, eating editing space on short screens. */}
-          <div style={{ display: 'flex', gap: 0 }}>
+          <div className="set-layout">
             {/* Sidebar — sticks to the top of the viewport as the body scrolls. */}
-            <nav style={{
-              width: 180, flexShrink: 0, padding: '0 var(--spacing-sm)',
-              position: 'sticky', top: 'var(--spacing-md)', alignSelf: 'flex-start',
-            }}>
+            <nav className="set-rail">
               {activeSections.map(s => (
                 <button
                   key={s.id}
                   onClick={() => scrollTo(s.id)}
-                  style={{
-                    display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)',
-                    width: '100%', padding: '8px 12px',
-                    background: activeSection === s.id ? 'var(--color-primary-light)' : 'transparent',
-                    border: 'none', borderRadius: 'var(--radius-md)', cursor: 'pointer',
-                    color: activeSection === s.id ? 'var(--color-primary)' : 'var(--color-text-secondary)',
-                    fontSize: '0.8125rem', fontWeight: activeSection === s.id ? 600 : 400,
-                    textAlign: 'left', transition: 'all 150ms', marginBottom: 2,
-                    borderLeft: activeSection === s.id ? '2px solid var(--color-primary)' : '2px solid transparent',
-                  }}
+                  className={`set-rail__item${activeSection === s.id ? ' set-rail__item--on' : ''}`}
                 >
-                  <i className={`fas ${SECTION_ICONS[s.id] || 'fa-cog'}`} style={{
-                    width: 16, textAlign: 'center', fontSize: '0.75rem',
-                    color: activeSection === s.id ? (SECTION_COLORS[s.id] || 'var(--color-primary)') : 'var(--color-text-muted)',
-                  }} />
+                  <i
+                    className={`fas ${SECTION_ICONS[s.id] || 'fa-cog'} set-rail__icon`}
+                    style={activeSection === s.id ? { color: SECTION_COLORS[s.id] || 'var(--color-primary)' } : undefined}
+                  />
                   {s.label}
-                  <span style={{ marginLeft: 'auto', fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
+                  <span className="ml-auto text-meta">
                     {fieldsBySection[s.id]?.length || 0}
                   </span>
                 </button>
               ))}
               {activeSections.length === 0 && (
-                <div style={{ padding: '12px', fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>
+                <div className="text-note pad-sm">
                   {t('forms.empty.nav')}
                 </div>
               )}
@@ -630,15 +596,13 @@ export default function ModelEditor() {
 
             {/* Content */}
             <div
-              style={{
-                flex: 1, padding: '0 var(--spacing-lg) var(--spacing-xl) var(--spacing-md)',
-              }}
+              className="me-body"
             >
               {activeSections.length === 0 && (
-                <div className="card" style={{ padding: 'var(--spacing-xl)', textAlign: 'center' }}>
-                  <i className="fas fa-sliders" style={{ fontSize: '2rem', color: 'var(--color-text-muted)', marginBottom: 'var(--spacing-md)' }} />
-                  <h3 style={{ marginBottom: 'var(--spacing-sm)' }}>{t('forms.empty.title')}</h3>
-                  <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.875rem' }}>
+                <div className="card loading-center text-center">
+                  <i className="fas fa-sliders icon-xl text-muted mb-md" />
+                  <h3 className="mb-sm">{t('forms.empty.title')}</h3>
+                  <p className="text-base text-secondary">
                     {t('forms.empty.text')}
                   </p>
                 </div>
@@ -648,21 +612,16 @@ export default function ModelEditor() {
                 const sectionFields = fieldsBySection[s.id] || []
                 const isCollapsed = collapsedSections.has(s.id)
                 return (
-                  <div key={s.id} ref={el => sectionRefs.current[s.id] = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
+                  <div key={s.id} ref={el => sectionRefs.current[s.id] = el} className="mb-xl">
                     <h3
                       onClick={() => toggleSection(s.id)}
-                      style={{
-                        fontSize: '1rem', fontWeight: 700, cursor: 'pointer', userSelect: 'none',
-                        display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)',
-                        marginBottom: isCollapsed ? 0 : 'var(--spacing-md)',
-                      }}
+                      className={`me-section-head${isCollapsed ? ' me-section-head--collapsed' : ''}`}
                     >
-                      <i className={`fas ${isCollapsed ? 'fa-chevron-right' : 'fa-chevron-down'}`}
-                        style={{ fontSize: '0.625rem', width: 12, color: 'var(--color-text-muted)' }} />
+                      <i className={`fas ${isCollapsed ? 'fa-chevron-right' : 'fa-chevron-down'} me-chevron`} />
                       <i className={`fas ${SECTION_ICONS[s.id] || 'fa-cog'}`}
                         style={{ color: SECTION_COLORS[s.id] || 'var(--color-primary)' }} />
                       {s.label}
-                      <span style={{ fontSize: '0.75rem', fontWeight: 400, color: 'var(--color-text-muted)' }}>
+                      <span className="text-xs fw-normal text-muted">
                         ({sectionFields.length})
                       </span>
                     </h3>
diff --git a/core/http/react-ui/src/pages/NodeBackendLogs.jsx b/core/http/react-ui/src/pages/NodeBackendLogs.jsx
index e1dd7641092f..98faf465d895 100644
--- a/core/http/react-ui/src/pages/NodeBackendLogs.jsx
+++ b/core/http/react-ui/src/pages/NodeBackendLogs.jsx
@@ -163,7 +163,7 @@ export default function NodeBackendLogs() {
           <h2 className="empty-state-title">No node/model selected</h2>
           <p className="empty-state-text">
             View backend logs from the{' '}
-            <Link to="/app/nodes" style={{ color: 'var(--color-primary)' }}>Nodes page</Link>.
+            <Link to="/app/nodes" className="text-primary">Nodes page</Link>.
           </p>
         </div>
       </div>
@@ -180,11 +180,10 @@ export default function NodeBackendLogs() {
       <PageHeader
         title={
           <>
-            <i className="fas fa-terminal" style={{ fontSize: '0.8em', marginRight: 'var(--spacing-sm)' }} />
+            <i className="fas fa-terminal cell-mono" style={{ fontSize: '0.8em', marginRight: 'var(--spacing-sm)' }} />
             {baseModelName}
             {!isMerged && (
               <span
-                className="cell-mono"
                 style={{
                   marginLeft: 'var(--spacing-sm)',
                   fontSize: '0.6875rem',
@@ -202,7 +201,6 @@ export default function NodeBackendLogs() {
             )}
             {isMerged && replicas.length > 1 && (
               <span
-                className="cell-mono"
                 style={{
                   marginLeft: 'var(--spacing-sm)',
                   fontSize: '0.6875rem',
@@ -229,7 +227,7 @@ export default function NodeBackendLogs() {
       />
 
       {showReplicaToggle && (
-        <div role="radiogroup" aria-label="Replica scope" className="segmented" style={{ marginBottom: 'var(--spacing-sm)' }}>
+        <div role="radiogroup" aria-label="Replica scope" className="segmented mb-sm">
           {replicas.map(idx => (
             <button
               key={idx}
@@ -285,7 +283,7 @@ export default function NodeBackendLogs() {
             borderRadius: '50%',
             background: wsConnected ? 'var(--color-success)' : 'var(--color-text-muted)',
           }} />
-          <span style={{ color: 'var(--color-text-secondary)' }}>
+          <span className="text-secondary">
             {wsConnected ? 'Live' : 'Reconnecting...'}
           </span>
           <label style={{ display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer', marginLeft: 'var(--spacing-sm)' }}>
@@ -294,14 +292,14 @@ export default function NodeBackendLogs() {
               checked={autoScroll}
               onChange={(e) => setAutoScroll(e.target.checked)}
             />
-            <span style={{ color: 'var(--color-text-secondary)' }}>Auto-scroll</span>
+            <span className="text-secondary">Auto-scroll</span>
           </label>
         </div>
       </div>
 
       {/* Log output */}
       {loading ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}>
+        <div className="loading-center">
           <LoadingSpinner size="lg" />
         </div>
       ) : filteredLines.length === 0 ? (
diff --git a/core/http/react-ui/src/pages/NodeDetail.jsx b/core/http/react-ui/src/pages/NodeDetail.jsx
index ea62c5ecffa9..bff7db526ad2 100644
--- a/core/http/react-ui/src/pages/NodeDetail.jsx
+++ b/core/http/react-ui/src/pages/NodeDetail.jsx
@@ -48,7 +48,7 @@ export default function NodeDetail() {
     setConfirmShrinkState({ ...ctx, resolve })
   }), [])
 
-  if (loading) return <div className="page page--wide" style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}><LoadingSpinner size="lg" /></div>
+  if (loading) return <div className="page page--wide loading-center"><LoadingSpinner size="lg" /></div>
   if (!node) return <div className="page page--wide"><PageHeader title="Node not found" /></div>
 
   const drain = async () => { try { await nodesApi.drain(id); addToast('Node set to draining', 'success'); refresh() } catch (e) { addToast(e.message, 'error') } }
@@ -76,7 +76,7 @@ export default function NodeDetail() {
   return (
     <div className="page page--wide">
       <PageHeader
-        eyebrow={<a onClick={() => navigate('/app/nodes')} style={{ cursor: 'pointer', color: 'var(--color-primary)' }}><i className="fas fa-arrow-left" style={{ marginRight: 6 }} aria-hidden="true" />Cluster</a>}
+        eyebrow={<a onClick={() => navigate('/app/nodes')} className="link-plain"><i className="fas fa-arrow-left icon-before" aria-hidden="true" />Cluster</a>}
         title={<><StatusPill status={node.status} /> {node.name}</>}
         supporting={node.address}
         actions={
@@ -118,7 +118,7 @@ export default function NodeDetail() {
           <span className="cell-mono">{node.in_flight_count || 0}</span>
         </div>
         {node.node_type !== 'agent' && (
-          <div style={{ minWidth: 0 }}>
+          <div className="flex-1-min">
             <div className="drawer-eyebrow">Capacity</div>
             <CapacityEditor
               node={node}
@@ -132,22 +132,22 @@ export default function NodeDetail() {
       </div>
 
       {/* Running models */}
-      <div style={{ marginTop: 'var(--spacing-lg)' }}>
+      <div className="mt-lg">
         <div className="drawer-eyebrow">Running models</div>
         {models.length === 0 ? (
-          <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)', margin: '0 0 var(--spacing-md) 0' }}>
-            <i className="fas fa-cube" style={{ marginRight: 6, opacity: 0.6 }} aria-hidden="true" />
+          <p className="text-note m-0 mb-md">
+            <i className="fas fa-cube icon-before op-60" aria-hidden="true" />
             No models loaded yet - they'll appear here when scheduled to this node.
           </p>
         ) : (
-          <table className="table" style={{ margin: 0 }}>
+          <table className="table table--flush">
             <thead>
               <tr>
                 <th>Model</th>
                 <th>State</th>
                 <th>In-Flight</th>
-                <th style={{ width: 40 }}>Logs</th>
-                <th style={{ textAlign: 'right' }}>Actions</th>
+                <th className="col-w-40">Logs</th>
+                <th className="text-right">Actions</th>
               </tr>
             </thead>
             <tbody>
@@ -165,35 +165,28 @@ export default function NodeDetail() {
                   const processKey = `${m.model_name}#${m.replica_index ?? 0}`
                   return (
                     <tr key={m.id || `${m.model_name}#${m.replica_index ?? 0}`}>
-                      <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}>
+                      <td className="cell-mono">
                         {m.model_name}
                         {showReplica && (
                           <span
                             className="cell-mono"
                             aria-label={`replica ${m.replica_index ?? 0}`}
                             title={`Replica ${m.replica_index ?? 0} on this node`}
-                            style={{
-                              marginLeft: 8, padding: '1px 6px', borderRadius: 'var(--radius-sm)',
-                              background: 'var(--color-bg-tertiary)',
-                              border: '1px solid var(--color-border-subtle)',
-                              fontSize: '0.6875rem', fontWeight: 500,
-                              color: 'var(--color-text-secondary)',
-                            }}
+                            className="inline-tag"
                           >
                             rep {m.replica_index ?? 0}
                           </span>
                         )}
                       </td>
                       <td>
-                        <span style={{
-                          display: 'inline-block', padding: '2px 8px', borderRadius: 'var(--radius-sm)',
-                          fontSize: '0.75rem', fontWeight: 500,
-                          background: stCfg.bg, color: stCfg.color, border: `1px solid ${stCfg.border}`,
-                        }}>
+                        <span
+                          className="state-pill"
+                          style={{ background: stCfg.bg, color: stCfg.color, border: `1px solid ${stCfg.border}` }}
+                        >
                           {m.state}
                         </span>
                       </td>
-                      <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}>
+                      <td className="cell-mono">
                         {m.in_flight ?? 0}
                       </td>
                       <td>
@@ -204,13 +197,13 @@ export default function NodeDetail() {
                             // Send the replica-scoped process key (modelName#replicaIndex).
                             navigate(`/app/node-backend-logs/${id}/${encodeURIComponent(processKey)}`)
                           }}
-                          style={{ fontSize: '0.75rem', color: 'var(--color-primary)' }}
+                          className="text-xs text-primary"
                           title={showReplica ? `View backend logs for replica ${m.replica_index ?? 0}` : 'View backend logs'}
                         >
                           <i className="fas fa-terminal" />
                         </a>
                       </td>
-                      <td style={{ textAlign: 'right' }}>
+                      <td className="text-right">
                         <button
                           className="btn btn-danger btn-sm"
                           title={m.in_flight > 0 ? 'Unload model (has in-flight requests)' : 'Unload model'}
@@ -229,12 +222,9 @@ export default function NodeDetail() {
       </div>
 
       {/* Installed backends */}
-      <div style={{ marginTop: 'var(--spacing-lg)' }}>
-        <div style={{
-          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-          marginBottom: 'var(--spacing-sm)',
-        }}>
-          <div className="drawer-eyebrow" style={{ margin: 0 }}>Installed backends</div>
+      <div className="mt-lg">
+        <div className="hstack hstack--between mb-sm">
+          <div className="drawer-eyebrow m-0">Installed backends</div>
           <button
             type="button"
             className="btn btn-secondary btn-sm"
@@ -245,42 +235,36 @@ export default function NodeDetail() {
           </button>
         </div>
         {backends.length === 0 ? (
-          <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)', margin: 0 }}>
-            None installed. <a href="#" style={{ color: 'var(--color-primary)' }} onClick={(e) => { e.preventDefault(); navigate(`/app/backends?target=${encodeURIComponent(id)}`) }}>Install one from the gallery</a> to schedule models here.
+          <p className="text-note m-0">
+            None installed. <a href="#" className="text-primary" onClick={(e) => { e.preventDefault(); navigate(`/app/backends?target=${encodeURIComponent(id)}`) }}>Install one from the gallery</a> to schedule models here.
           </p>
         ) : (
-          <table className="table" style={{ margin: 0 }}>
+          <table className="table table--flush">
             <thead>
               <tr>
                 <th>Name</th>
                 <th>Type</th>
                 <th>Installed At</th>
-                <th style={{ textAlign: 'right' }}>Actions</th>
+                <th className="text-right">Actions</th>
               </tr>
             </thead>
             <tbody>
               {backends.map(b => (
                 <tr key={b.name}>
-                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}>
+                  <td className="cell-mono">
                     {b.name}
                   </td>
                   <td>
-                    <span style={{
-                      display: 'inline-block', padding: '2px 8px', borderRadius: 'var(--radius-sm)',
-                      fontSize: '0.75rem', fontWeight: 500,
-                      background: b.is_system ? 'var(--color-bg-tertiary)' : 'var(--color-primary-light)',
-                      color: b.is_system ? 'var(--color-text-muted)' : 'var(--color-primary)',
-                      border: `1px solid ${b.is_system ? 'var(--color-border-subtle)' : 'var(--color-primary-border)'}`,
-                    }}>
+                    <span className={`state-pill ${b.is_system ? 'state-pill--system' : 'state-pill--gallery'}`}>
                       {b.is_system ? 'system' : 'gallery'}
                     </span>
                   </td>
-                  <td style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>
+                  <td className="text-note">
                     {b.installed_at ? timeAgo(b.installed_at) : '-'}
                   </td>
-                  <td style={{ textAlign: 'right' }}>
+                  <td className="text-right">
                     {!b.is_system && (
-                      <div style={{ display: 'inline-flex', gap: 'var(--spacing-xs)' }}>
+                      <div className="inline-flex gap-xs">
                         <button
                           className="btn btn-secondary btn-sm"
                           onClick={() => upgradeBackend(b.name)}
@@ -307,7 +291,7 @@ export default function NodeDetail() {
 
       {/* Labels - node.replica-slots is filtered out so the Capacity editor
           stays the single source of truth for that label. */}
-      <div style={{ marginTop: 'var(--spacing-lg)' }}>
+      <div className="mt-lg">
         <div className="drawer-eyebrow">Labels</div>
         <KeyValueChips
           pairs={Object.fromEntries(Object.entries(node.labels || {}).filter(([k]) => k !== 'node.replica-slots'))}
diff --git a/core/http/react-ui/src/pages/Nodes.jsx b/core/http/react-ui/src/pages/Nodes.jsx
index c6eb9b2943f7..769371854254 100644
--- a/core/http/react-ui/src/pages/Nodes.jsx
+++ b/core/http/react-ui/src/pages/Nodes.jsx
@@ -13,11 +13,7 @@ import NodePanel from '../components/nodes/NodePanel'
 
 function StepNumber({ n, bg, color }) {
   return (
-    <span style={{
-      width: 28, height: 28, borderRadius: '50%', background: bg,
-      color, display: 'flex', alignItems: 'center', justifyContent: 'center',
-      fontSize: '0.8125rem', fontWeight: 700, flexShrink: 0,
-    }}>{n}</span>
+    <span className="p2p-step" style={{ background: bg, color }}>{n}</span>
   )
 }
 
@@ -27,25 +23,11 @@ function CommandBlock({ command, addToast }) {
     addToast('Copied to clipboard', 'success', 2000)
   }
   return (
-    <div style={{ position: 'relative' }}>
-      <pre style={{
-        background: 'var(--color-bg-primary)', padding: 'var(--spacing-md)',
-        paddingRight: 'var(--spacing-xl)', borderRadius: 'var(--radius-md)',
-        fontSize: '0.8125rem', fontFamily: 'var(--font-mono)',
-        whiteSpace: 'pre-wrap', wordBreak: 'break-all',
-        color: 'var(--color-warning)', overflow: 'auto',
-        border: '1px solid var(--color-border-subtle)',
-      }}>
-        {command}
-      </pre>
+    <div className="p2p-cmd">
+      <pre>{command}</pre>
       <button
         onClick={copy}
-        style={{
-          position: 'absolute', top: 8, right: 8,
-          background: 'var(--color-bg-secondary)', border: '1px solid var(--color-border-subtle)',
-          borderRadius: 'var(--radius-sm)', padding: 'var(--spacing-xs) var(--spacing-sm)', cursor: 'pointer',
-          color: 'var(--color-text-secondary)', fontSize: '0.75rem',
-        }}
+        className="btn btn-sm p2p-cmd__copy"
         title="Copy"
       >
         <i className="fas fa-copy" />
@@ -67,30 +49,30 @@ function WorkerHintCard({ addToast, activeTab, hasWorkers }) {
     : (isAgent ? 'No agent workers registered yet' : 'No workers registered yet')
 
   return (
-    <div className="card" style={{ padding: 'var(--spacing-lg)', marginBottom: 'var(--spacing-xl)' }}>
-      <h3 style={{ fontSize: '1rem', fontWeight: 700, marginBottom: 'var(--spacing-md)', display: 'flex', alignItems: 'center' }}>
-        <i className={`fas ${hasWorkers ? 'fa-plus-circle' : 'fa-info-circle'}`} style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-sm)' }} />
+    <div className="card pad-lg mb-xl">
+      <h3 className="panel-title">
+        <i className={`fas ${hasWorkers ? 'fa-plus-circle' : 'fa-info-circle'} text-primary`} />
         {title}
       </h3>
-      <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.875rem', marginBottom: 'var(--spacing-md)' }}>
+      <p className="text-base text-secondary mb-md">
         {isAgent
           ? 'Start agent worker nodes to execute MCP tools and agent tasks. Agent workers self-register with this frontend.'
           : 'Start worker nodes to scale inference across multiple machines. Workers self-register with this frontend.'}
       </p>
 
-      <p style={{ fontWeight: 600, fontSize: '0.8125rem', marginBottom: 'var(--spacing-xs)' }}>Select your hardware</p>
+      <p className="form-label">Select your hardware</p>
       <ImageSelector selected={selected} onSelect={setSelected} dev={dev} onDevChange={setDev} />
 
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-md)' }}>
+      <div className="stack">
         <div>
-          <p style={{ fontWeight: 600, fontSize: '0.8125rem', marginBottom: 'var(--spacing-xs)' }}>CLI</p>
+          <p className="form-label">CLI</p>
           <CommandBlock
             command={`local-ai ${workerCmd} \\\n  --register-to "${frontendUrl}" \\\n  --nats-url "nats://nats:4222" \\\n  --registration-token "$LOCALAI_REGISTRATION_TOKEN"`}
             addToast={addToast}
           />
         </div>
         <div>
-          <p style={{ fontWeight: 600, fontSize: '0.8125rem', marginBottom: 'var(--spacing-xs)' }}>Docker</p>
+          <p className="form-label">Docker</p>
           <CommandBlock
             command={`docker run --net host ${flagsStr}\\\n  -e LOCALAI_REGISTER_TO="${frontendUrl}" \\\n  -e LOCALAI_NATS_URL="nats://nats:4222" \\\n  -e LOCALAI_REGISTRATION_TOKEN="$TOKEN" \\\n  ${dockerImage(option, dev)} ${workerCmd}`}
             addToast={addToast}
@@ -98,10 +80,10 @@ function WorkerHintCard({ addToast, activeTab, hasWorkers }) {
         </div>
       </div>
 
-      <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)', marginTop: 'var(--spacing-md)' }}>
+      <p className="text-note mt-md">
         For full setup instructions, architecture details, and Kubernetes deployment, see the{' '}
         <a href="https://localai.io/features/distributed-mode/" target="_blank" rel="noopener noreferrer"
-          style={{ color: 'var(--color-primary)' }}>Distributed Mode documentation <i className="fas fa-external-link-alt" style={{ fontSize: '0.625rem' }} /></a>.
+          className="text-primary">Distributed Mode documentation <i className="fas fa-external-link-alt text-xs" /></a>.
       </p>
     </div>
   )
@@ -203,7 +185,7 @@ export default function Nodes() {
 
   if (loading) {
     return (
-      <div className="page page--wide" style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}>
+      <div className="page page--wide loading-center">
         <LoadingSpinner size="lg" />
       </div>
     )
@@ -213,88 +195,79 @@ export default function Nodes() {
   if (!enabled) {
     return (
       <div className="page page--wide">
-        <div style={{ textAlign: 'center', padding: 'var(--spacing-xl) 0' }}>
-          <i className="fas fa-network-wired" style={{ fontSize: '3rem', color: 'var(--color-primary)', marginBottom: 'var(--spacing-md)' }} />
-          <h1 style={{ fontSize: '1.5rem', fontWeight: 600, marginBottom: 'var(--spacing-sm)' }}>
+        <div className="p2p-hero">
+          <i className="fas fa-network-wired text-primary" />
+          <h1 className="text-xl fw-semibold mb-sm">
             Distributed Mode Not Enabled
           </h1>
-          <p style={{ color: 'var(--color-text-secondary)', maxWidth: 600, margin: '0 auto var(--spacing-xl)' }}>
+          <p className="text-secondary" style={{ maxWidth: 600, margin: '0 auto var(--spacing-xl)' }}>
             Enable distributed mode to manage backend nodes across multiple machines. Nodes self-register and are monitored for health, enabling horizontal scaling of model inference.
           </p>
 
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--spacing-md)', marginBottom: 'var(--spacing-xl)' }}>
-            <div className="card" style={{ textAlign: 'center', padding: 'var(--spacing-md)' }}>
-              <div style={{
-                width: 40, height: 40, borderRadius: 'var(--radius-md)', margin: '0 auto var(--spacing-sm)',
-                background: 'var(--color-primary-light)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              }}>
-                <i className="fas fa-server" style={{ color: 'var(--color-primary)', fontSize: '1.25rem' }} />
+          <div className="nodes-features mb-xl">
+            <div className="card text-center pad-md">
+              <div className="icon-chip icon-chip--centred tone-primary">
+                <i className="fas fa-server" />
               </div>
-              <h3 style={{ fontSize: '0.9375rem', fontWeight: 600, marginBottom: 'var(--spacing-xs)' }}>Horizontal Scaling</h3>
-              <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>Add backend nodes to scale inference capacity</p>
+              <h3 className="text-base fw-semibold mb-xs">Horizontal Scaling</h3>
+              <p className="text-sub">Add backend nodes to scale inference capacity</p>
             </div>
-            <div className="card" style={{ textAlign: 'center', padding: 'var(--spacing-md)' }}>
-              <div style={{
-                width: 40, height: 40, borderRadius: 'var(--radius-md)', margin: '0 auto var(--spacing-sm)',
-                background: 'var(--color-accent-light)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              }}>
-                <i className="fas fa-route" style={{ color: 'var(--color-accent)', fontSize: '1.25rem' }} />
+            <div className="card text-center pad-md">
+              <div className="icon-chip icon-chip--centred tone-accent">
+                <i className="fas fa-route" />
               </div>
-              <h3 style={{ fontSize: '0.9375rem', fontWeight: 600, marginBottom: 'var(--spacing-xs)' }}>Smart Routing</h3>
-              <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>Route requests to the best available node</p>
+              <h3 className="text-base fw-semibold mb-xs">Smart Routing</h3>
+              <p className="text-sub">Route requests to the best available node</p>
             </div>
-            <div className="card" style={{ textAlign: 'center', padding: 'var(--spacing-md)' }}>
-              <div style={{
-                width: 40, height: 40, borderRadius: 'var(--radius-md)', margin: '0 auto var(--spacing-sm)',
-                background: 'var(--color-success-light)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              }}>
-                <i className="fas fa-heart-pulse" style={{ color: 'var(--color-success)', fontSize: '1.25rem' }} />
+            <div className="card text-center pad-md">
+              <div className="icon-chip icon-chip--centred tone-success">
+                <i className="fas fa-heart-pulse" />
               </div>
-              <h3 style={{ fontSize: '0.9375rem', fontWeight: 600, marginBottom: 'var(--spacing-xs)' }}>Health Monitoring</h3>
-              <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>Automatic heartbeat checks and failover</p>
+              <h3 className="text-base fw-semibold mb-xs">Health Monitoring</h3>
+              <p className="text-sub">Automatic heartbeat checks and failover</p>
             </div>
           </div>
         </div>
 
-        <div className="card" style={{ maxWidth: 700, margin: '0 auto var(--spacing-xl)', padding: 'var(--spacing-lg)', textAlign: 'left' }}>
-          <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: 'var(--spacing-md)', display: 'flex', alignItems: 'center' }}>
-            <i className="fas fa-rocket" style={{ color: 'var(--color-accent)', marginRight: 'var(--spacing-sm)' }} />
+        <div className="card p2p-enable pad-lg">
+          <h3 className="panel-title">
+            <i className="fas fa-rocket text-accent" />
             How to Enable Distributed Mode
           </h3>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-md)' }}>
-            <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
+          <div className="stack">
+            <div className="hstack">
               <StepNumber n={1} bg="var(--color-accent-light)" color="var(--color-accent)" />
-              <div style={{ flex: 1 }}>
-                <p style={{ fontWeight: 500, marginBottom: 'var(--spacing-xs)' }}>Start LocalAI with distributed mode</p>
+              <div className="flex-1">
+                <p className="fw-medium mb-xs">Start LocalAI with distributed mode</p>
                 <CommandBlock
                   command={`local-ai run --distributed \\\n  --distributed-db "postgres://user:pass@host/db" \\\n  --distributed-nats "nats://host:4222"`}
                   addToast={addToast}
                 />
               </div>
             </div>
-            <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
+            <div className="hstack">
               <StepNumber n={2} bg="var(--color-accent-light)" color="var(--color-accent)" />
-              <div style={{ flex: 1 }}>
-                <p style={{ fontWeight: 500, marginBottom: 'var(--spacing-xs)' }}>Register backend nodes</p>
+              <div className="flex-1">
+                <p className="fw-medium mb-xs">Register backend nodes</p>
                 <CommandBlock
                   command={`local-ai worker \\\n  --register-to "http://localai-host:8080" \\\n  --nats-url "nats://nats:4222" \\\n  --node-name "gpu-node-1"`}
                   addToast={addToast}
                 />
               </div>
             </div>
-            <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
+            <div className="hstack">
               <StepNumber n={3} bg="var(--color-accent-light)" color="var(--color-accent)" />
-              <div style={{ flex: 1 }}>
-                <p style={{ fontWeight: 500 }}>Manage nodes from this dashboard</p>
-                <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.8125rem', marginTop: 'var(--spacing-xs)' }}>
+              <div className="flex-1">
+                <p className="fw-medium">Manage nodes from this dashboard</p>
+                <p className="text-sub mt-xs">
                   Once enabled, refresh this page to see registered nodes and their health status.
                 </p>
               </div>
             </div>
-          <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)', marginTop: 'var(--spacing-md)' }}>
+          <p className="text-note mt-md">
             For full setup instructions, architecture details, and Kubernetes deployment, see the{' '}
             <a href="https://localai.io/features/distributed-mode/" target="_blank" rel="noopener noreferrer"
-              style={{ color: 'var(--color-primary)' }}>Distributed Mode documentation <i className="fas fa-external-link-alt" style={{ fontSize: '0.625rem' }} /></a>.
+              className="text-primary">Distributed Mode documentation <i className="fas fa-external-link-alt text-xs" /></a>.
           </p>
           </div>
         </div>
@@ -313,7 +286,7 @@ export default function Nodes() {
       <PageHeader
         title={
           <>
-            <i className="fas fa-network-wired" style={{ marginRight: 'var(--spacing-sm)' }} />
+            <i className="fas fa-network-wired icon-before" />
             {t('nodes.title')}
           </>
         }
diff --git a/core/http/react-ui/src/pages/P2P.jsx b/core/http/react-ui/src/pages/P2P.jsx
index b67d84110fc2..b7742324edc9 100644
--- a/core/http/react-ui/src/pages/P2P.jsx
+++ b/core/http/react-ui/src/pages/P2P.jsx
@@ -6,53 +6,23 @@ import LoadingSpinner from '../components/LoadingSpinner'
 import PageHeader from '../components/PageHeader'
 import ImageSelector, { useImageSelector, dockerImage, dockerFlags } from '../components/ImageSelector'
 
-function NodeCard({ node, label, iconColor, iconBg }) {
+function NodeCard({ node, label, tone }) {
   return (
-    <div style={{
-      background: 'var(--color-bg-primary)',
-      border: `1px solid ${node.isOnline ? 'var(--color-success-border)' : 'var(--color-error-border)'}`,
-      borderRadius: 'var(--radius-md)',
-      padding: 'var(--spacing-md)',
-      transition: 'border-color 200ms',
-    }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-sm)' }}>
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <div style={{
-            width: 40, height: 40, borderRadius: 'var(--radius-md)',
-            background: iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center',
-            marginRight: 'var(--spacing-sm)',
-          }}>
-            <i className="fas fa-server" style={{ color: iconColor, fontSize: '1rem' }} />
+    <div className={`p2p-node ${tone}${node.isOnline ? ' p2p-node--online' : ''}`}>
+      <div className="hstack hstack--between hstack--nowrap">
+        <div className="hstack hstack--nowrap">
+          <span className="icon-chip"><i className="fas fa-server" /></span>
+          <div className="flex-1-min">
+            <h4 className="p2p-node__name">{label}</h4>
+            <p className="p2p-node__id">{node.id}</p>
           </div>
-          <div>
-            <h4 style={{ fontSize: '0.875rem', fontWeight: 600 }}>{label}</h4>
-            <p style={{ fontSize: '0.75rem', fontFamily: 'var(--font-mono)', color: 'var(--color-text-secondary)', wordBreak: 'break-all' }}>
-              {node.id}
-            </p>
-          </div>
-        </div>
-        <div style={{
-          display: 'flex', alignItems: 'center', gap: '6px',
-          background: 'var(--color-bg-primary)', borderRadius: 'var(--radius-md)',
-          padding: '4px 10px', border: '1px solid var(--color-border-subtle)',
-        }}>
-          <i className="fas fa-circle" style={{
-            fontSize: '0.5rem',
-            color: node.isOnline ? 'var(--color-success)' : 'var(--color-error)',
-          }} />
-          <span style={{
-            fontSize: '0.75rem', fontWeight: 500,
-            color: node.isOnline ? 'var(--color-success)' : 'var(--color-error)',
-          }}>
-            {node.isOnline ? 'Online' : 'Offline'}
-          </span>
         </div>
+        <span className="p2p-node__state">
+          <i className="fas fa-circle" />
+          {node.isOnline ? 'Online' : 'Offline'}
+        </span>
       </div>
-      <div style={{
-        fontSize: '0.75rem', color: 'var(--color-text-muted)',
-        paddingTop: 'var(--spacing-sm)', borderTop: '1px solid var(--color-border-subtle)',
-        display: 'flex', alignItems: 'center', gap: '6px',
-      }}>
+      <div className="p2p-node__foot">
         <i className="fas fa-clock" />
         <span>Updated: {new Date().toLocaleTimeString()}</span>
       </div>
@@ -66,40 +36,36 @@ function CommandBlock({ command, addToast }) {
     addToast('Copied to clipboard', 'success', 2000)
   }
   return (
-    <div style={{ position: 'relative' }}>
-      <pre style={{
-        background: 'var(--color-bg-primary)', padding: 'var(--spacing-md)',
-        paddingRight: 'var(--spacing-xl)', borderRadius: 'var(--radius-md)',
-        fontSize: '0.8125rem', fontFamily: 'var(--font-mono)',
-        whiteSpace: 'pre-wrap', wordBreak: 'break-all',
-        color: 'var(--color-warning)', overflow: 'auto',
-        border: '1px solid var(--color-border-subtle)',
-      }}>
-        {command}
-      </pre>
-      <button
-        onClick={copy}
-        style={{
-          position: 'absolute', top: 8, right: 8,
-          background: 'var(--color-bg-secondary)', border: '1px solid var(--color-border-subtle)',
-          borderRadius: 'var(--radius-sm)', padding: 'var(--spacing-xs) var(--spacing-sm)', cursor: 'pointer',
-          color: 'var(--color-text-secondary)', fontSize: '0.75rem',
-        }}
-        title="Copy"
-      >
+    <div className="p2p-cmd">
+      <pre>{command}</pre>
+      <button className="btn btn-sm p2p-cmd__copy" onClick={copy} title="Copy" aria-label="Copy command">
         <i className="fas fa-copy" />
       </button>
     </div>
   )
 }
 
-function StepNumber({ n, bg, color }) {
+function StepNumber({ n, tone }) {
+  return <span className={`p2p-step ${tone}`}>{n}</span>
+}
+
+/* Live "online / total" readout, repeated once per architecture. */
+function NodeCount({ online, total }) {
   return (
-    <span style={{
-      width: 28, height: 28, borderRadius: '50%', background: bg,
-      color, display: 'flex', alignItems: 'center', justifyContent: 'center',
-      fontSize: '0.8125rem', fontWeight: 700, flexShrink: 0,
-    }}>{n}</span>
+    <div className="p2p-count">
+      <span className={`p2p-count__online${online > 0 ? ' p2p-count__online--up' : ''}`}>{online}</span>
+      <span className="p2p-count__total">/{total}</span>
+    </div>
+  )
+}
+
+function NoNodes({ icon, title, hint }) {
+  return (
+    <div className="p2p-empty">
+      <i className={icon} />
+      <p>{title}</p>
+      <p>{hint}</p>
+    </div>
   )
 }
 
@@ -171,9 +137,15 @@ export default function P2P() {
     }
   }
 
+  const runCmd = (suffix, name = 'local-ai') =>
+    `docker run -ti --net host ${dockerFlags(imgSelector.option) ? dockerFlags(imgSelector.option) + ' ' : ''}\\\n  --name ${name} \\\n  ${dockerImage(imgSelector.option, imgSelector.dev)} ${suffix}`
+
+  const tokenCmd = (suffix, name) =>
+    `docker run -ti --net host ${dockerFlags(imgSelector.option) ? dockerFlags(imgSelector.option) + ' ' : ''}\\\n  -e TOKEN="${token}" \\\n  --name ${name} \\\n  ${dockerImage(imgSelector.option, imgSelector.dev)} ${suffix}`
+
   if (loading) {
     return (
-      <div className="page page--narrow" style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}>
+      <div className="page page--narrow loading-center">
         <LoadingSpinner size="lg" />
       </div>
     )
@@ -183,103 +155,79 @@ export default function P2P() {
   if (!enabled) {
     return (
       <div className="page page--narrow">
-        <div style={{ textAlign: 'center', padding: 'var(--spacing-xl) 0' }}>
-          <i className="fas fa-network-wired" style={{ fontSize: '3rem', color: 'var(--color-primary)', marginBottom: 'var(--spacing-md)' }} />
-          <h1 style={{ fontSize: '1.5rem', fontWeight: 600, marginBottom: 'var(--spacing-sm)' }}>
-            P2P Distribution Not Enabled
-          </h1>
-          <p style={{ color: 'var(--color-text-secondary)', maxWidth: 600, margin: '0 auto var(--spacing-xl)' }}>
-            Enable peer-to-peer distribution to scale your AI workloads across multiple devices. Share instances, shard models, and pool computational resources across your network.
+        <div className="p2p-hero">
+          <i className="fas fa-network-wired" />
+          <h1>P2P distribution not enabled</h1>
+          <p>
+            Enable peer-to-peer distribution to scale your AI workloads across multiple devices. Share instances,
+            shard models, and pool computational resources across your network.
           </p>
 
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--spacing-md)', marginBottom: 'var(--spacing-xl)' }}>
-            <div className="card" style={{ textAlign: 'center', padding: 'var(--spacing-md)' }}>
-              <div style={{
-                width: 40, height: 40, borderRadius: 'var(--radius-md)', margin: '0 auto var(--spacing-sm)',
-                background: 'var(--color-primary-light)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              }}>
-                <i className="fas fa-network-wired" style={{ color: 'var(--color-primary)', fontSize: '1.25rem' }} />
-              </div>
-              <h3 style={{ fontSize: '0.9375rem', fontWeight: 600, marginBottom: 'var(--spacing-xs)' }}>Instance Federation</h3>
-              <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>Load balance across multiple instances</p>
+          <div className="p2p-features">
+            <div className="card p2p-feature tone-primary">
+              <span className="icon-chip"><i className="fas fa-network-wired" /></span>
+              <h3>Instance federation</h3>
+              <p>Load balance across multiple instances</p>
             </div>
-            <div className="card" style={{ textAlign: 'center', padding: 'var(--spacing-md)' }}>
-              <div style={{
-                width: 40, height: 40, borderRadius: 'var(--radius-md)', margin: '0 auto var(--spacing-sm)',
-                background: 'var(--color-accent-light)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              }}>
-                <i className="fas fa-puzzle-piece" style={{ color: 'var(--color-accent)', fontSize: '1.25rem' }} />
-              </div>
-              <h3 style={{ fontSize: '0.9375rem', fontWeight: 600, marginBottom: 'var(--spacing-xs)' }}>Model Sharding</h3>
-              <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>Split large models across workers</p>
+            <div className="card p2p-feature tone-accent">
+              <span className="icon-chip"><i className="fas fa-puzzle-piece" /></span>
+              <h3>Model sharding</h3>
+              <p>Split large models across workers</p>
             </div>
-            <div className="card" style={{ textAlign: 'center', padding: 'var(--spacing-md)' }}>
-              <div style={{
-                width: 40, height: 40, borderRadius: 'var(--radius-md)', margin: '0 auto var(--spacing-sm)',
-                background: 'var(--color-success-light)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              }}>
-                <i className="fas fa-share-alt" style={{ color: 'var(--color-success)', fontSize: '1.25rem' }} />
-              </div>
-              <h3 style={{ fontSize: '0.9375rem', fontWeight: 600, marginBottom: 'var(--spacing-xs)' }}>Resource Sharing</h3>
-              <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>Pool resources from multiple devices</p>
+            <div className="card p2p-feature tone-success">
+              <span className="icon-chip"><i className="fas fa-share-alt" /></span>
+              <h3>Resource sharing</h3>
+              <p>Pool resources from multiple devices</p>
             </div>
           </div>
         </div>
 
-        {/* How to Enable */}
-        <div className="card" style={{ maxWidth: 700, margin: '0 auto var(--spacing-xl)', padding: 'var(--spacing-lg)', textAlign: 'left' }}>
-          <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: 'var(--spacing-md)', display: 'flex', alignItems: 'center' }}>
-            <i className="fas fa-rocket" style={{ color: 'var(--color-accent)', marginRight: 'var(--spacing-sm)' }} />
-            How to Enable P2P
+        <div className="card p2p-enable">
+          <h3 className="hstack tone-accent">
+            <i className="fas fa-rocket tone-icon" />
+            How to enable P2P
           </h3>
-          <p style={{ fontWeight: 600, fontSize: '0.8125rem', marginBottom: 'var(--spacing-xs)' }}>Select your hardware</p>
-          <ImageSelector selected={imgSelector.selected} onSelect={imgSelector.setSelected} dev={imgSelector.dev} onDevChange={imgSelector.setDev} />
-
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-md)' }}>
-            <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
-              <StepNumber n={1} bg="var(--color-accent-light)" color="var(--color-accent)" />
-              <div style={{ flex: 1 }}>
-                <p style={{ fontWeight: 500, marginBottom: 'var(--spacing-xs)' }}>Start LocalAI with P2P enabled</p>
-                <CommandBlock
-                  command={`docker run -ti --net host ${dockerFlags(imgSelector.option) ? dockerFlags(imgSelector.option) + ' ' : ''}\\\n  --name local-ai \\\n  ${dockerImage(imgSelector.option, imgSelector.dev)} run --p2p`}
-                  addToast={addToast}
-                />
-                <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.8125rem', marginTop: 'var(--spacing-xs)' }}>
-                  This will automatically generate a network token for you.
-                </p>
+          <div>
+            <p className="form-label">Select your hardware</p>
+            <ImageSelector selected={imgSelector.selected} onSelect={imgSelector.setSelected} dev={imgSelector.dev} onDevChange={imgSelector.setDev} />
+          </div>
+
+          <div className="stack">
+            <div className="hstack hstack--top hstack--nowrap tone-accent">
+              <StepNumber n={1} tone="tone-accent" />
+              <div className="flex-1 stack stack--sm">
+                <p className="form-label">Start LocalAI with P2P enabled</p>
+                <CommandBlock command={runCmd('run --p2p')} addToast={addToast} />
+                <p className="text-note">This will automatically generate a network token for you.</p>
               </div>
             </div>
-            <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
-              <StepNumber n={2} bg="var(--color-accent-light)" color="var(--color-accent)" />
-              <div style={{ flex: 1 }}>
-                <p style={{ fontWeight: 500, marginBottom: 'var(--spacing-xs)' }}>Or use an existing token</p>
+            <div className="hstack hstack--top hstack--nowrap tone-accent">
+              <StepNumber n={2} tone="tone-accent" />
+              <div className="flex-1 stack stack--sm">
+                <p className="form-label">Or use an existing token</p>
                 <CommandBlock
                   command={`docker run -ti --net host ${dockerFlags(imgSelector.option) ? dockerFlags(imgSelector.option) + ' ' : ''}\\\n  -e TOKEN="your-token-here" \\\n  --name local-ai \\\n  ${dockerImage(imgSelector.option, imgSelector.dev)} run --p2p`}
                   addToast={addToast}
                 />
-                <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.8125rem', marginTop: 'var(--spacing-xs)' }}>
-                  If you already have a token from another instance, you can reuse it.
-                </p>
+                <p className="text-note">If you already have a token from another instance, you can reuse it.</p>
               </div>
             </div>
-            <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
-              <StepNumber n={3} bg="var(--color-accent-light)" color="var(--color-accent)" />
-              <div style={{ flex: 1 }}>
-                <p style={{ fontWeight: 500 }}>Access the P2P dashboard</p>
-                <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.8125rem', marginTop: 'var(--spacing-xs)' }}>
-                  Once enabled, refresh this page to see your network token and start connecting nodes.
-                </p>
+            <div className="hstack hstack--top hstack--nowrap tone-accent">
+              <StepNumber n={3} tone="tone-accent" />
+              <div className="flex-1 stack stack--sm">
+                <p className="form-label">Access the P2P dashboard</p>
+                <p className="text-note">Once enabled, refresh this page to see your network token and start connecting nodes.</p>
               </div>
             </div>
           </div>
         </div>
 
-        <div style={{ textAlign: 'center', display: 'flex', gap: 'var(--spacing-md)', justifyContent: 'center', flexWrap: 'wrap' }}>
+        <div className="hstack hstack--md hstack--center">
           <a className="btn btn-primary" href="https://localai.io/features/distribute/" target="_blank" rel="noopener noreferrer">
-            <i className="fas fa-book" /> Documentation <i className="fas fa-external-link-alt" style={{ fontSize: '0.75rem', marginLeft: 4 }} />
+            <i className="fas fa-book" /> Documentation <i className="fas fa-external-link-alt text-meta" />
           </a>
           <a className="btn btn-secondary" href="https://localai.io/basics/getting_started/" target="_blank" rel="noopener noreferrer">
-            <i className="fas fa-graduation-cap" /> Getting Started <i className="fas fa-external-link-alt" style={{ fontSize: '0.75rem', marginLeft: 4 }} />
+            <i className="fas fa-graduation-cap" /> Getting started <i className="fas fa-external-link-alt text-meta" />
           </a>
         </div>
       </div>
@@ -297,272 +245,146 @@ export default function P2P() {
   return (
     <div className="page page--narrow">
       <PageHeader
-        title={
-          <>
-            <i className="fas fa-circle-nodes" style={{ marginRight: 'var(--spacing-sm)' }} />
-            {t('p2p.title')}
-          </>
-        }
+        title={<><i className="fas fa-circle-nodes fa-circle-info" /> {t('p2p.title')}</>}
         supporting={
           <>
             {t('p2p.subtitle')}
             {' '}
-            <a href="https://localai.io/features/distribute/" target="_blank" rel="noopener noreferrer"
-              style={{ color: 'var(--color-primary)' }}>
-              <i className="fas fa-circle-info" />
+            <a href="https://localai.io/features/distribute/" target="_blank" rel="noopener noreferrer">
+              <i />
             </a>
           </>
         }
       />
 
-      {/* Network Token */}
-      <div style={{
-        background: 'var(--color-bg-secondary)', border: '1px solid var(--color-accent-border)',
-        borderRadius: 'var(--radius-lg)', padding: 'var(--spacing-lg)', marginBottom: 'var(--spacing-xl)',
-      }}>
-        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 'var(--spacing-md)' }}>
-          <i className="fas fa-key" style={{ color: 'var(--color-warning)', fontSize: '1.25rem', marginRight: 'var(--spacing-sm)' }} />
-          <h3 style={{ fontSize: '1.125rem', fontWeight: 700, flex: 1 }}>Network Token</h3>
-          <button className="btn btn-secondary btn-sm" onClick={copyToken} title="Copy token">
+      <section className="p2p-token">
+        <div className="hstack hstack--nowrap tone-warning">
+          <i className="fas fa-key tone-icon" />
+          <h3 className="flex-1-min">Network token</h3>
+          <button className="btn btn-secondary btn-sm" onClick={copyToken} title="Copy token" aria-label="Copy token">
             <i className="fas fa-copy" />
           </button>
         </div>
-        <pre
-          onClick={copyToken}
-          style={{
-            background: 'var(--color-bg-primary)', color: 'var(--color-warning)',
-            padding: 'var(--spacing-md)', borderRadius: 'var(--radius-md)',
-            wordBreak: 'break-all', whiteSpace: 'pre-wrap',
-            border: '1px solid var(--color-border-subtle)', cursor: 'pointer',
-            fontFamily: 'var(--font-mono)', fontSize: '0.8125rem',
-          }}
-        >
-          {token || 'Loading...'}
-        </pre>
-        <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.8125rem', marginTop: 'var(--spacing-sm)' }}>
-          All nodes (federated servers, instances, and workers) use the same token to join the network. Pass it via the <code>TOKEN</code> environment variable.
+        <pre className="p2p-token__value" onClick={copyToken}>{token || 'Loading...'}</pre>
+        <p className="text-note">
+          All nodes (federated servers, instances, and workers) use the same token to join the network.
+          Pass it via the <code>TOKEN</code> environment variable.
         </p>
-      </div>
+      </section>
 
-      {/* Tab bar */}
-      <div style={{
-        display: 'flex', borderBottom: '2px solid var(--color-border-subtle)',
-        marginBottom: 'var(--spacing-xl)', gap: '2px',
-      }}>
+      <div className="p2p-tabs" role="tablist">
         <button
+          role="tab"
+          aria-selected={activeTab === 'federation'}
           onClick={() => setActiveTab('federation')}
-          style={{
-            flex: 1, padding: 'var(--spacing-md)',
-            background: activeTab === 'federation' ? 'var(--color-bg-secondary)' : 'transparent',
-            border: 'none', cursor: 'pointer',
-            borderBottom: activeTab === 'federation' ? '2px solid var(--color-primary)' : '2px solid transparent',
-            marginBottom: '-2px',
-            borderRadius: 'var(--radius-md) var(--radius-md) 0 0',
-            transition: 'all 150ms',
-          }}
+          className={`p2p-tab tone-primary${activeTab === 'federation' ? ' p2p-tab--on' : ''}`}
         >
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-sm)' }}>
-            <div style={{
-              width: 36, height: 36, borderRadius: 'var(--radius-md)',
-              background: activeTab === 'federation' ? 'var(--color-primary-light)' : 'var(--color-bg-tertiary)',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-            }}>
-              <i className="fas fa-circle-nodes" style={{
-                color: activeTab === 'federation' ? 'var(--color-primary)' : 'var(--color-text-muted)',
-                fontSize: '1rem',
-              }} />
-            </div>
-            <div style={{ textAlign: 'left' }}>
-              <div style={{
-                fontSize: '0.9375rem', fontWeight: 600,
-                color: activeTab === 'federation' ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',
-              }}>
-                Federation
-              </div>
-              <div style={{
-                fontSize: '0.75rem',
-                color: activeTab === 'federation' ? 'var(--color-primary)' : 'var(--color-text-muted)',
-              }}>
-                {fedOnline}/{fedTotal} instances
-              </div>
-            </div>
-          </div>
+          <span className="icon-chip"><i className="fas fa-circle-nodes" /></span>
+          <span className="p2p-tab__text">
+            <span className="p2p-tab__label">Federation</span>
+            <span className="p2p-tab__count">{fedOnline}/{fedTotal} instances</span>
+          </span>
         </button>
         <button
+          role="tab"
+          aria-selected={activeTab === 'sharding'}
           onClick={() => setActiveTab('sharding')}
-          style={{
-            flex: 1, padding: 'var(--spacing-md)',
-            background: activeTab === 'sharding' ? 'var(--color-bg-secondary)' : 'transparent',
-            border: 'none', cursor: 'pointer',
-            borderBottom: activeTab === 'sharding' ? '2px solid var(--color-accent)' : '2px solid transparent',
-            marginBottom: '-2px',
-            borderRadius: 'var(--radius-md) var(--radius-md) 0 0',
-            transition: 'all 150ms',
-          }}
+          className={`p2p-tab tone-accent${activeTab === 'sharding' ? ' p2p-tab--on' : ''}`}
         >
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-sm)' }}>
-            <div style={{
-              width: 36, height: 36, borderRadius: 'var(--radius-md)',
-              background: activeTab === 'sharding' ? 'var(--color-accent-light)' : 'var(--color-bg-tertiary)',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-            }}>
-              <i className="fas fa-puzzle-piece" style={{
-                color: activeTab === 'sharding' ? 'var(--color-accent)' : 'var(--color-text-muted)',
-                fontSize: '1rem',
-              }} />
-            </div>
-            <div style={{ textAlign: 'left' }}>
-              <div style={{
-                fontSize: '0.9375rem', fontWeight: 600,
-                color: activeTab === 'sharding' ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',
-              }}>
-                Model Sharding
-              </div>
-              <div style={{
-                fontSize: '0.75rem',
-                color: activeTab === 'sharding' ? 'var(--color-accent)' : 'var(--color-text-muted)',
-              }}>
-                {llamaOnline + mlxOnline}/{llamaTotal + mlxTotal} workers
-              </div>
-            </div>
-          </div>
+          <span className="icon-chip"><i className="fas fa-puzzle-piece" /></span>
+          <span className="p2p-tab__text">
+            <span className="p2p-tab__label">Model sharding</span>
+            <span className="p2p-tab__count">{llamaOnline + mlxOnline}/{llamaTotal + mlxTotal} workers</span>
+          </span>
         </button>
       </div>
 
       {/* ── Federation Tab ── */}
       {activeTab === 'federation' && (
-        <div style={{
-          background: 'var(--color-bg-secondary)', border: '1px solid var(--color-accent-border)',
-          borderRadius: 'var(--radius-lg)', overflow: 'hidden',
-        }}>
-          <div style={{ padding: 'var(--spacing-lg)', borderBottom: '1px solid var(--color-border-subtle)' }}>
-            {/* Architecture diagram */}
-            <div style={{
-              background: 'var(--color-bg-primary)', border: '1px solid var(--color-border-subtle)',
-              borderRadius: 'var(--radius-lg)', padding: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)',
-            }}>
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-md)', flexWrap: 'wrap' }}>
-                <div style={{ textAlign: 'center' }}>
-                  <div style={{
-                    width: 48, height: 48, borderRadius: 'var(--radius-md)',
-                    background: 'var(--color-warning-light)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    margin: '0 auto var(--spacing-xs)',
-                  }}>
-                    <i className="fas fa-user" style={{ color: 'var(--color-warning)', fontSize: '1rem' }} />
-                  </div>
-                  <div style={{ fontSize: '0.75rem', fontWeight: 600 }}>API Client</div>
+        <div className="p2p-panel">
+          <div className="p2p-section">
+            <div className="p2p-diagram">
+              <div className="p2p-diagram__row">
+                <div className="p2p-diagram__item tone-warning">
+                  <span className="icon-chip icon-chip--lg"><i className="fas fa-user" /></span>
+                  <span className="p2p-diagram__label">API client</span>
                 </div>
-                <i className="fas fa-arrow-right" style={{ color: 'var(--color-text-muted)', fontSize: '1rem' }} />
-                <div style={{ textAlign: 'center' }}>
-                  <div style={{
-                    width: 48, height: 48, borderRadius: 'var(--radius-md)',
-                    background: 'var(--color-success-light)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    margin: '0 auto var(--spacing-xs)', border: '2px solid var(--color-success)',
-                  }}>
-                    <i className="fas fa-scale-balanced" style={{ color: 'var(--color-success)', fontSize: '1rem' }} />
-                  </div>
-                  <div style={{ fontSize: '0.75rem', fontWeight: 600 }}>Federated Server</div>
-                  <div style={{ fontSize: '0.625rem', color: 'var(--color-text-muted)' }}>Load balancer</div>
+                <i className="fas fa-arrow-right p2p-diagram__arrow" />
+                <div className="p2p-diagram__item tone-success">
+                  <span className="icon-chip icon-chip--lg icon-chip--ring"><i className="fas fa-scale-balanced" /></span>
+                  <span className="p2p-diagram__label">Federated server</span>
+                  <span className="p2p-diagram__sub">Load balancer</span>
                 </div>
-                <i className="fas fa-arrow-right" style={{ color: 'var(--color-text-muted)', fontSize: '1rem' }} />
-                <div style={{ textAlign: 'center' }}>
-                  <div style={{ display: 'flex', gap: 'var(--spacing-xs)', marginBottom: 'var(--spacing-xs)' }}>
+                <i className="fas fa-arrow-right p2p-diagram__arrow" />
+                <div className="p2p-diagram__item tone-primary">
+                  <span className="p2p-diagram__group">
                     {[1, 2, 3].map(n => (
-                      <div key={n} style={{
-                        width: 36, height: 36, borderRadius: 'var(--radius-sm)',
-                        background: 'var(--color-primary-light)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                      }}>
-                        <i className="fas fa-server" style={{ color: 'var(--color-primary)', fontSize: '0.75rem' }} />
-                      </div>
+                      <span key={n} className="icon-chip icon-chip--sm"><i className="fas fa-server" /></span>
                     ))}
-                  </div>
-                  <div style={{ fontSize: '0.75rem', fontWeight: 600 }}>Federated Instances</div>
-                  <div style={{ fontSize: '0.625rem', color: 'var(--color-text-muted)' }}>Workers</div>
+                  </span>
+                  <span className="p2p-diagram__label">Federated instances</span>
+                  <span className="p2p-diagram__sub">Workers</span>
                 </div>
               </div>
-              <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)', textAlign: 'center', marginTop: 'var(--spacing-sm)', lineHeight: 1.5 }}>
-                The <strong>Federated Server</strong> acts as a load balancer — it receives API requests and distributes them across <strong>Federated Instances</strong> (workers running your models).
+              <p className="p2p-diagram__note">
+                The <strong>federated server</strong> acts as a load balancer: it receives API requests and
+                distributes them across <strong>federated instances</strong> (workers running your models).
               </p>
             </div>
 
-            {/* Status + nodes */}
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-md)' }}>
-              <h3 style={{ fontSize: '1rem', fontWeight: 700 }}>Connected Instances</h3>
-              <div style={{ fontSize: '1.25rem', fontWeight: 700 }}>
-                <span style={{ color: fedOnline > 0 ? 'var(--color-success)' : 'var(--color-error)' }}>{fedOnline}</span>
-                <span style={{ color: 'var(--color-text-secondary)', fontSize: '1rem' }}>/{fedTotal}</span>
-              </div>
+            <div className="hstack hstack--between">
+              <h3>Connected instances</h3>
+              <NodeCount online={fedOnline} total={fedTotal} />
             </div>
 
             {federation.length === 0 ? (
-              <div style={{
-                textAlign: 'center', padding: 'var(--spacing-lg)',
-                background: 'var(--color-bg-primary)', border: '1px solid var(--color-border-subtle)',
-                borderRadius: 'var(--radius-lg)',
-              }}>
-                <i className="fas fa-server" style={{ fontSize: '2rem', color: 'var(--color-text-muted)', marginBottom: 'var(--spacing-sm)' }} />
-                <p style={{ fontWeight: 500, color: 'var(--color-text-secondary)' }}>No federated instances connected</p>
-                <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)', marginTop: 'var(--spacing-xs)' }}>Follow the setup steps below</p>
-              </div>
+              <NoNodes icon="fas fa-server" title="No federated instances connected" hint="Follow the setup steps below" />
             ) : (
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 'var(--spacing-md)' }}>
+              <div className="p2p-nodes">
                 {federation.map((node, i) => (
-                  <NodeCard key={node.id || i} node={node} label="Instance" iconColor="var(--color-primary)" iconBg="var(--color-primary-light)" />
+                  <NodeCard key={node.id || i} node={node} label="Instance" tone="tone-primary" />
                 ))}
               </div>
             )}
           </div>
 
-          {/* Setup Guide */}
-          <div style={{ padding: 'var(--spacing-lg)' }}>
-            <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-book" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-sm)' }} />
-              Setup Guide
+          <div className="p2p-section">
+            <h3 className="hstack tone-primary">
+              <i className="fas fa-book tone-icon" />
+              Setup guide
             </h3>
 
-            <div style={{
-              background: 'var(--color-bg-primary)', borderRadius: 'var(--radius-lg)',
-              border: '1px solid var(--color-border-subtle)', padding: 'var(--spacing-lg)',
-            }}>
-              <p style={{ fontWeight: 600, fontSize: '0.8125rem', marginBottom: 'var(--spacing-xs)' }}>Select your hardware</p>
+            <div className="p2p-setup">
+              <p className="form-label">Select your hardware</p>
               <ImageSelector selected={imgSelector.selected} onSelect={imgSelector.setSelected} dev={imgSelector.dev} onDevChange={imgSelector.setDev} />
 
-              {/* Step 1 */}
-              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-sm)' }}>
-                <StepNumber n={1} bg="var(--color-success-light)" color="var(--color-success)" />
-                <h4 style={{ fontSize: '1rem', fontWeight: 700 }}>
-                  Start the Federated Server <span style={{ fontSize: '0.8125rem', fontWeight: 400, color: 'var(--color-text-muted)' }}>(load balancer)</span>
+              <div className="hstack tone-success">
+                <StepNumber n={1} tone="tone-success" />
+                <h4 className="p2p-setup__title">
+                  Start the federated server <span className="text-note">(load balancer)</span>
                 </h4>
               </div>
-              <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.875rem', marginBottom: 'var(--spacing-sm)' }}>
-                This is the entry point for your API clients. It receives requests and distributes them to federated instances.
+              <p className="text-note">
+                This is the entry point for your API clients. It receives requests and distributes them to
+                federated instances.
               </p>
-              <CommandBlock
-                command={`docker run -ti --net host ${dockerFlags(imgSelector.option) ? dockerFlags(imgSelector.option) + ' ' : ''}\\\n  -e TOKEN="${token}" \\\n  --name local-ai-federated \\\n  ${dockerImage(imgSelector.option, imgSelector.dev)} federated`}
-                addToast={addToast}
-              />
-              <p style={{ color: 'var(--color-text-muted)', fontSize: '0.8125rem', marginTop: 'var(--spacing-sm)' }}>
+              <CommandBlock command={tokenCmd('federated', 'local-ai-federated')} addToast={addToast} />
+              <p className="text-meta">
                 Listens on port <code>8080</code> by default. To change it, add <code>-e ADDRESS=:9090</code>.
               </p>
 
-              {/* Step 2 */}
-              <div style={{
-                display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)',
-                marginTop: 'var(--spacing-xl)', marginBottom: 'var(--spacing-sm)',
-              }}>
-                <StepNumber n={2} bg="var(--color-primary-light)" color="var(--color-primary)" />
-                <h4 style={{ fontSize: '1rem', fontWeight: 700 }}>
-                  Start Federated Instances <span style={{ fontSize: '0.8125rem', fontWeight: 400, color: 'var(--color-text-muted)' }}>(workers)</span>
+              <div className="hstack tone-primary push-lg">
+                <StepNumber n={2} tone="tone-primary" />
+                <h4 className="p2p-setup__title">
+                  Start federated instances <span className="text-note">(workers)</span>
                 </h4>
               </div>
-              <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.875rem', marginBottom: 'var(--spacing-sm)' }}>
-                Run this on each machine you want to add as a worker. Each instance runs your models and receives tasks from the federated server.
+              <p className="text-note">
+                Run this on each machine you want to add as a worker. Each instance runs your models and receives
+                tasks from the federated server.
               </p>
-              <CommandBlock
-                command={`docker run -ti --net host ${dockerFlags(imgSelector.option) ? dockerFlags(imgSelector.option) + ' ' : ''}\\\n  -e TOKEN="${token}" \\\n  --name local-ai \\\n  ${dockerImage(imgSelector.option, imgSelector.dev)} run --federated --p2p`}
-                addToast={addToast}
-              />
-              <p style={{ color: 'var(--color-text-muted)', fontSize: '0.8125rem', marginTop: 'var(--spacing-sm)' }}>
+              <CommandBlock command={tokenCmd('run --federated --p2p', 'local-ai')} addToast={addToast} />
+              <p className="text-meta">
                 Listens on port <code>8080</code> by default. To change it, add <code>-e ADDRESS=:9090</code>.
               </p>
             </div>
@@ -572,219 +394,147 @@ export default function P2P() {
 
       {/* ── Model Sharding Tab ── */}
       {activeTab === 'sharding' && (
-        <div style={{
-          background: 'var(--color-bg-secondary)', border: '1px solid var(--color-accent-border)',
-          borderRadius: 'var(--radius-lg)', overflow: 'hidden',
-        }}>
-          <div style={{ padding: 'var(--spacing-lg)', borderBottom: '1px solid var(--color-border-subtle)' }}>
-            <div style={{
-              background: 'var(--color-accent-light)', border: '1px solid var(--color-accent-border)',
-              borderRadius: 'var(--radius-md)', padding: 'var(--spacing-sm) var(--spacing-md)',
-              fontSize: '0.8125rem', color: 'var(--color-text-secondary)', marginBottom: 'var(--spacing-md)',
-            }}>
-              <i className="fas fa-info-circle" style={{ color: 'var(--color-accent)', marginRight: 6 }} />
-              <strong>Different from federation:</strong> Federation distributes whole requests across instances. Model sharding splits a single model across machines for joint inference.
-            </div>
+        <div className="p2p-panel">
+          <div className="p2p-section">
+            <p className="p2p-note">
+              <i className="fas fa-info-circle" />
+              <strong>Different from federation:</strong> federation distributes whole requests across instances.
+              Model sharding splits a single model across machines for joint inference.
+            </p>
 
-            {/* ── llama.cpp RPC Workers Section ── */}
-            <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: 'var(--spacing-sm)', display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
-              <i className="fas fa-microchip" style={{ color: 'var(--color-accent)' }} />
-              llama.cpp RPC Workers
+            <h3 className="hstack tone-accent">
+              <i className="fas fa-microchip tone-icon" />
+              llama.cpp RPC workers
             </h3>
 
-            {/* Architecture diagram */}
-            <div style={{
-              background: 'var(--color-bg-primary)', border: '1px solid var(--color-border-subtle)',
-              borderRadius: 'var(--radius-lg)', padding: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)',
-            }}>
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-md)', flexWrap: 'wrap' }}>
-                <div style={{ textAlign: 'center' }}>
-                  <div style={{
-                    width: 48, height: 48, borderRadius: 'var(--radius-md)',
-                    background: 'var(--color-primary-light)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    margin: '0 auto var(--spacing-xs)', border: '2px solid var(--color-primary)',
-                  }}>
-                    <i className="fas fa-server" style={{ color: 'var(--color-primary)', fontSize: '1rem' }} />
-                  </div>
-                  <div style={{ fontSize: '0.75rem', fontWeight: 600 }}>LocalAI Instance</div>
-                  <div style={{ fontSize: '0.625rem', color: 'var(--color-text-muted)' }}>Orchestrator</div>
+            <div className="p2p-diagram">
+              <div className="p2p-diagram__row">
+                <div className="p2p-diagram__item tone-primary">
+                  <span className="icon-chip icon-chip--lg icon-chip--ring"><i className="fas fa-server" /></span>
+                  <span className="p2p-diagram__label">LocalAI instance</span>
+                  <span className="p2p-diagram__sub">Orchestrator</span>
                 </div>
-                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '2px' }}>
-                  <i className="fas fa-arrow-right" style={{ color: 'var(--color-text-muted)', fontSize: '0.875rem' }} />
-                  <span style={{ fontSize: '0.625rem', color: 'var(--color-text-muted)' }}>RPC</span>
-                </div>
-                <div style={{ textAlign: 'center' }}>
-                  <div style={{ display: 'flex', gap: 'var(--spacing-xs)', marginBottom: 'var(--spacing-xs)' }}>
-                    {['Layer 1-10', 'Layer 11-20', 'Layer 21-30'].map((label, i) => (
-                      <div key={i} style={{ textAlign: 'center' }}>
-                        <div style={{
-                          width: 56, height: 36, borderRadius: 'var(--radius-sm)',
-                          background: 'var(--color-accent-light)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                          border: '1px solid var(--color-accent-border)',
-                        }}>
-                          <i className="fas fa-microchip" style={{ color: 'var(--color-accent)', fontSize: '0.75rem' }} />
-                        </div>
-                        <div style={{ fontSize: '0.5625rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{label}</div>
-                      </div>
+                <span className="p2p-diagram__arrow">
+                  <i className="fas fa-arrow-right" />
+                  <span>RPC</span>
+                </span>
+                <div className="p2p-diagram__item tone-accent">
+                  <span className="p2p-diagram__group">
+                    {['Layer 1-10', 'Layer 11-20', 'Layer 21-30'].map(label => (
+                      <span key={label}>
+                        <span className="p2p-diagram__shard"><i className="fas fa-microchip" /></span>
+                        <span className="p2p-diagram__shard-label">{label}</span>
+                      </span>
                     ))}
-                  </div>
-                  <div style={{ fontSize: '0.75rem', fontWeight: 600 }}>RPC Workers</div>
-                  <div style={{ fontSize: '0.625rem', color: 'var(--color-text-muted)' }}>Distributed memory</div>
+                  </span>
+                  <span className="p2p-diagram__label">RPC workers</span>
+                  <span className="p2p-diagram__sub">Distributed memory</span>
                 </div>
               </div>
-              <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)', textAlign: 'center', marginTop: 'var(--spacing-sm)', lineHeight: 1.5 }}>
-                Model weights are <strong>split across RPC workers</strong>. Each worker holds a portion of the model layers in its memory (GPU or CPU).
+              <p className="p2p-diagram__note">
+                Model weights are <strong>split across RPC workers</strong>. Each worker holds a portion of the
+                model layers in its memory (GPU or CPU).
               </p>
             </div>
 
-            {/* llama.cpp Status + nodes */}
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-md)' }}>
-              <h4 style={{ fontSize: '1rem', fontWeight: 600 }}>Connected Workers</h4>
-              <div style={{ fontSize: '1.25rem', fontWeight: 700 }}>
-                <span style={{ color: llamaOnline > 0 ? 'var(--color-success)' : 'var(--color-error)' }}>{llamaOnline}</span>
-                <span style={{ color: 'var(--color-text-secondary)', fontSize: '1rem' }}>/{llamaTotal}</span>
-              </div>
+            <div className="hstack hstack--between">
+              <h4>Connected workers</h4>
+              <NodeCount online={llamaOnline} total={llamaTotal} />
             </div>
 
             {workers.length === 0 ? (
-              <div style={{
-                textAlign: 'center', padding: 'var(--spacing-lg)',
-                background: 'var(--color-bg-primary)', border: '1px solid var(--color-border-subtle)',
-                borderRadius: 'var(--radius-lg)',
-              }}>
-                <i className="fas fa-puzzle-piece" style={{ fontSize: '2rem', color: 'var(--color-text-muted)', marginBottom: 'var(--spacing-sm)' }} />
-                <p style={{ fontWeight: 500, color: 'var(--color-text-secondary)' }}>No llama.cpp workers connected</p>
-                <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)', marginTop: 'var(--spacing-xs)' }}>Start workers to see them here</p>
-              </div>
+              <NoNodes icon="fas fa-puzzle-piece" title="No llama.cpp workers connected" hint="Start workers to see them here" />
             ) : (
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 'var(--spacing-md)' }}>
+              <div className="p2p-nodes">
                 {workers.map((node, i) => (
-                  <NodeCard key={node.id || i} node={node} label="Worker" iconColor="var(--color-accent)" iconBg="var(--color-accent-light)" />
+                  <NodeCard key={node.id || i} node={node} label="Worker" tone="tone-accent" />
                 ))}
               </div>
             )}
           </div>
 
-          {/* ── MLX Distributed Workers Section ── */}
-          <div style={{ padding: 'var(--spacing-lg)', borderBottom: '1px solid var(--color-border-subtle)' }}>
-            <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: 'var(--spacing-sm)', display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
-              <i className="fas fa-apple-whole" style={{ color: 'var(--color-warning)' }} />
-              MLX Distributed Workers
+          <div className="p2p-section">
+            <h3 className="hstack tone-warning">
+              <i className="fas fa-apple-whole tone-icon" />
+              MLX distributed workers
             </h3>
 
-            {/* MLX Architecture diagram */}
-            <div style={{
-              background: 'var(--color-bg-primary)', border: '1px solid var(--color-border-subtle)',
-              borderRadius: 'var(--radius-lg)', padding: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)',
-            }}>
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-md)', flexWrap: 'wrap' }}>
-                <div style={{ textAlign: 'center' }}>
-                  <div style={{
-                    width: 48, height: 48, borderRadius: 'var(--radius-md)',
-                    background: 'var(--color-primary-light)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    margin: '0 auto var(--spacing-xs)', border: '2px solid var(--color-primary)',
-                  }}>
-                    <i className="fas fa-server" style={{ color: 'var(--color-primary)', fontSize: '1rem' }} />
-                  </div>
-                  <div style={{ fontSize: '0.75rem', fontWeight: 600 }}>LocalAI</div>
-                  <div style={{ fontSize: '0.625rem', color: 'var(--color-text-muted)' }}>Rank 0</div>
-                </div>
-                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '2px' }}>
-                  <i className="fas fa-arrows-left-right" style={{ color: 'var(--color-text-muted)', fontSize: '0.875rem' }} />
-                  <span style={{ fontSize: '0.625rem', color: 'var(--color-text-muted)' }}>Ring / JACCL</span>
+            <div className="p2p-diagram">
+              <div className="p2p-diagram__row">
+                <div className="p2p-diagram__item tone-primary">
+                  <span className="icon-chip icon-chip--lg icon-chip--ring"><i className="fas fa-server" /></span>
+                  <span className="p2p-diagram__label">LocalAI</span>
+                  <span className="p2p-diagram__sub">Rank 0</span>
                 </div>
-                <div style={{ textAlign: 'center' }}>
-                  <div style={{ display: 'flex', gap: 'var(--spacing-xs)', marginBottom: 'var(--spacing-xs)' }}>
-                    {['Layers 1-16', 'Layers 17-32'].map((label, i) => (
-                      <div key={i} style={{ textAlign: 'center' }}>
-                        <div style={{
-                          width: 64, height: 36, borderRadius: 'var(--radius-sm)',
-                          background: 'var(--color-warning-light)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                          border: '1px solid var(--color-warning-border)',
-                        }}>
-                          <i className="fas fa-microchip" style={{ color: 'var(--color-warning)', fontSize: '0.75rem' }} />
-                        </div>
-                        <div style={{ fontSize: '0.5625rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{label}</div>
-                      </div>
+                <span className="p2p-diagram__arrow">
+                  <i className="fas fa-arrows-left-right" />
+                  <span>Ring / JACCL</span>
+                </span>
+                <div className="p2p-diagram__item tone-warning">
+                  <span className="p2p-diagram__group">
+                    {['Layers 1-16', 'Layers 17-32'].map(label => (
+                      <span key={label}>
+                        <span className="p2p-diagram__shard p2p-diagram__shard--wide"><i className="fas fa-microchip" /></span>
+                        <span className="p2p-diagram__shard-label">{label}</span>
+                      </span>
                     ))}
-                  </div>
-                  <div style={{ fontSize: '0.75rem', fontWeight: 600 }}>MLX Workers</div>
-                  <div style={{ fontSize: '0.625rem', color: 'var(--color-text-muted)' }}>Pipeline parallel</div>
+                  </span>
+                  <span className="p2p-diagram__label">MLX workers</span>
+                  <span className="p2p-diagram__sub">Pipeline parallel</span>
                 </div>
               </div>
-              <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)', textAlign: 'center', marginTop: 'var(--spacing-sm)', lineHeight: 1.5 }}>
-                MLX distributed uses <strong>native Apple Silicon communication</strong>. All nodes execute model code simultaneously via pipeline or tensor parallelism.
+              <p className="p2p-diagram__note">
+                MLX distributed uses <strong>native Apple Silicon communication</strong>. All nodes execute model
+                code simultaneously via pipeline or tensor parallelism.
               </p>
             </div>
 
-            {/* MLX Status + nodes */}
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-md)' }}>
-              <h4 style={{ fontSize: '1rem', fontWeight: 600 }}>Connected MLX Workers</h4>
-              <div style={{ fontSize: '1.25rem', fontWeight: 700 }}>
-                <span style={{ color: mlxOnline > 0 ? 'var(--color-success)' : 'var(--color-error)' }}>{mlxOnline}</span>
-                <span style={{ color: 'var(--color-text-secondary)', fontSize: '1rem' }}>/{mlxTotal}</span>
-              </div>
+            <div className="hstack hstack--between">
+              <h4>Connected MLX workers</h4>
+              <NodeCount online={mlxOnline} total={mlxTotal} />
             </div>
 
             {mlxWorkers.length === 0 ? (
-              <div style={{
-                textAlign: 'center', padding: 'var(--spacing-lg)',
-                background: 'var(--color-bg-primary)', border: '1px solid var(--color-border-subtle)',
-                borderRadius: 'var(--radius-lg)',
-              }}>
-                <i className="fas fa-apple-whole" style={{ fontSize: '2rem', color: 'var(--color-text-muted)', marginBottom: 'var(--spacing-sm)' }} />
-                <p style={{ fontWeight: 500, color: 'var(--color-text-secondary)' }}>No MLX workers connected</p>
-                <p style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)', marginTop: 'var(--spacing-xs)' }}>Start MLX workers on Apple Silicon Macs</p>
-              </div>
+              <NoNodes icon="fas fa-apple-whole" title="No MLX workers connected" hint="Start MLX workers on Apple Silicon Macs" />
             ) : (
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 'var(--spacing-md)' }}>
+              <div className="p2p-nodes">
                 {mlxWorkers.map((node, i) => (
-                  <NodeCard key={node.id || i} node={node} label={`MLX Rank ${i + 1}`} iconColor="var(--color-warning)" iconBg="var(--color-warning-light)" />
+                  <NodeCard key={node.id || i} node={node} label={`MLX rank ${i + 1}`} tone="tone-warning" />
                 ))}
               </div>
             )}
           </div>
 
-          {/* Setup Guides */}
-          <div style={{ padding: 'var(--spacing-lg)' }}>
-            <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-book" style={{ color: 'var(--color-accent)', marginRight: 'var(--spacing-sm)' }} />
-              Setup Workers
+          <div className="p2p-section">
+            <h3 className="hstack tone-accent">
+              <i className="fas fa-book tone-icon" />
+              Setup workers
             </h3>
 
-            <div style={{
-              background: 'var(--color-bg-primary)', borderRadius: 'var(--radius-lg)',
-              border: '1px solid var(--color-border-subtle)', padding: 'var(--spacing-lg)',
-              marginBottom: 'var(--spacing-md)',
-            }}>
-              <h4 style={{ fontSize: '1rem', fontWeight: 600, marginBottom: 'var(--spacing-sm)' }}>llama.cpp RPC Worker</h4>
-              <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.875rem', marginBottom: 'var(--spacing-sm)' }}>
+            <div className="p2p-setup">
+              <h4 className="p2p-setup__title">llama.cpp RPC worker</h4>
+              <p className="text-note">
                 Each worker exposes its GPU/CPU memory as a shard for distributed model inference.
               </p>
-              <p style={{ fontWeight: 600, fontSize: '0.8125rem', marginBottom: 'var(--spacing-xs)' }}>Select your hardware</p>
+              <p className="form-label">Select your hardware</p>
               <ImageSelector selected={imgSelector.selected} onSelect={imgSelector.setSelected} dev={imgSelector.dev} onDevChange={imgSelector.setDev} />
-              <CommandBlock
-                command={`docker run -ti --net host ${dockerFlags(imgSelector.option) ? dockerFlags(imgSelector.option) + ' ' : ''}\\\n  -e TOKEN="${token}" \\\n  --name local-ai-worker \\\n  ${dockerImage(imgSelector.option, imgSelector.dev)} worker p2p-llama-cpp-rpc`}
-                addToast={addToast}
-              />
+              <CommandBlock command={tokenCmd('worker p2p-llama-cpp-rpc', 'local-ai-worker')} addToast={addToast} />
             </div>
 
-            <div style={{
-              background: 'var(--color-bg-primary)', borderRadius: 'var(--radius-lg)',
-              border: '1px solid var(--color-warning-border)', padding: 'var(--spacing-lg)',
-            }}>
-              <h4 style={{ fontSize: '1rem', fontWeight: 600, marginBottom: 'var(--spacing-sm)' }}>MLX Distributed Worker</h4>
-              <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.875rem', marginBottom: 'var(--spacing-sm)' }}>
+            <div className="p2p-setup p2p-setup--warning">
+              <h4 className="p2p-setup__title">MLX distributed worker</h4>
+              <p className="text-note">
                 Run on Apple Silicon Macs to participate in distributed MLX inference via pipeline parallelism.
               </p>
               <CommandBlock
                 command={`docker run -ti --net host \\\n  -e TOKEN="${token}" \\\n  --name local-ai-mlx-worker \\\n  localai/localai:latest-metal-darwin-arm64 worker p2p-mlx`}
                 addToast={addToast}
               />
-              <p style={{ color: 'var(--color-text-muted)', fontSize: '0.8125rem', marginTop: 'var(--spacing-sm)' }}>
+              <p className="text-meta">
                 For more information, see the{' '}
-                <a href="https://localai.io/features/mlx-distributed/" target="_blank" rel="noopener noreferrer"
-                  style={{ color: 'var(--color-warning)' }}>MLX Distributed</a> docs.
+                <a href="https://localai.io/features/mlx-distributed/" target="_blank" rel="noopener noreferrer">
+                  MLX distributed
+                </a> docs.
               </p>
             </div>
           </div>
diff --git a/core/http/react-ui/src/pages/Quantize.jsx b/core/http/react-ui/src/pages/Quantize.jsx
index 4d833f3fc831..bc03a6f64963 100644
--- a/core/http/react-ui/src/pages/Quantize.jsx
+++ b/core/http/react-ui/src/pages/Quantize.jsx
@@ -415,7 +415,7 @@ export default function Quantize() {
                   <th>Quant</th>
                   <th>Status</th>
                   <th>Created</th>
-                  <th style={{ textAlign: 'right' }}>Actions</th>
+                  <th className="text-right">Actions</th>
                 </tr>
               </thead>
               <tbody>
@@ -425,16 +425,15 @@ export default function Quantize() {
                   return (
                     <tr
                       key={job.id}
-                      className={isSelected ? 'is-selected' : ''}
+                      className={`${isSelected ? 'is-selected' : ''} clickable`}
                       onClick={() => setSelectedJob(job)}
-                      style={{ cursor: 'pointer' }}
                     >
                       <td className="data-table__truncate">{job.model}</td>
                       <td><code>{job.quantization_type}</code></td>
                       <td>
                         <span className={`badge ${statusBadgeClass[job.status] || ''}`}>{job.status}</span>
                         {job.import_status === 'completed' && (
-                          <span className="badge badge-success" style={{ marginLeft: 'var(--spacing-xs)' }}>imported</span>
+                          <span className="badge badge-success ml-xs">imported</span>
                         )}
                       </td>
                       <td style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)' }}>
diff --git a/core/http/react-ui/src/pages/Scheduling.jsx b/core/http/react-ui/src/pages/Scheduling.jsx
index 576b2215b477..c311080717bb 100644
--- a/core/http/react-ui/src/pages/Scheduling.jsx
+++ b/core/http/react-ui/src/pages/Scheduling.jsx
@@ -14,7 +14,7 @@ import KeyValueChips from '../components/nodes/KeyValueChips'
 // precision/special-value problems (e.g. MaxReplicas=0 = "no limit").
 function ReplicaInput({ id, label, value, onChange, presets }) {
   return (
-    <div style={{ flex: 1 }}>
+    <div className="flex-1">
       <label className="form-label" htmlFor={id}>{label}</label>
       <input
         id={id}
@@ -97,7 +97,7 @@ function SchedulingForm({ onSave, onCancel }) {
       {/* Mode selector — uses the project's segmented control instead of two
           50%-width filled buttons that competed visually with the actual
           primary action (Save). */}
-      <div role="radiogroup" aria-label="Scheduling mode" className="segmented" style={{ marginBottom: 'var(--spacing-xs)' }}>
+      <div role="radiogroup" aria-label="Scheduling mode" className="segmented mb-xs">
         <button
           type="button" role="radio" aria-checked={mode === 'placement'}
           className={`segmented__item${mode === 'placement' ? ' is-active' : ''}`}
@@ -131,7 +131,7 @@ function SchedulingForm({ onSave, onCancel }) {
       {/* Linear vertical flow — model picker is the visual focus, then the
           mode-specific fields below. No 2-column grid (the mismatched widths
           made the form look raw). */}
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-md)' }}>
+      <div className="stack">
         <div>
           <label className="form-label" htmlFor="sched-model">Model</label>
           {/* Searchable combobox so a long gallery doesn't force the operator
@@ -158,7 +158,7 @@ function SchedulingForm({ onSave, onCancel }) {
             placeholderValue="value (e.g. nvidia)"
             ariaLabel="Node selector"
           />
-          <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', display: 'block', marginTop: 6 }}>
+          <span className="text-meta d-block mt-xs">
             {mode === 'placement'
               ? 'Models will load only on nodes that match all listed labels.'
               : (hasSelector ? 'Replicas land only on matching nodes.' : 'Empty = any healthy node.')}
@@ -166,7 +166,7 @@ function SchedulingForm({ onSave, onCancel }) {
         </div>
 
         {mode === 'autoscaling' && (
-          <div style={{ display: 'flex', gap: 'var(--spacing-md)' }}>
+          <div className="hstack hstack--md">
             <ReplicaInput
               id="sched-min"
               label="Min replicas"
@@ -199,14 +199,14 @@ function SchedulingForm({ onSave, onCancel }) {
             <option value="round_robin">Round Robin</option>
             <option value="prefix_cache">Prefix Cache</option>
           </select>
-          <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', display: 'block', marginTop: 6 }}>
+          <span className="text-meta d-block mt-xs">
             Prefix Cache routes shared-prefix requests to the same replica to reuse its KV cache, falling back to round-robin when replicas are imbalanced.
           </span>
         </div>
 
         {routePolicy === 'prefix_cache' && (
-          <div style={{ display: 'flex', gap: 'var(--spacing-md)' }}>
-            <div style={{ flex: 1 }}>
+          <div className="hstack hstack--md">
+            <div className="flex-1">
               <label className="form-label" htmlFor="sched-min-prefix-match">Min prefix match</label>
               <input
                 id="sched-min-prefix-match"
@@ -218,11 +218,11 @@ function SchedulingForm({ onSave, onCancel }) {
                 value={minPrefixMatch}
                 onChange={e => setMinPrefixMatch(parseFloat(e.target.value) || 0)}
               />
-              <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', display: 'block', marginTop: 6 }}>
+              <span className="text-meta d-block mt-xs">
                 Fraction of the prompt (0..1) that must match a cached prefix before affinity kicks in. 0 inherits the default.
               </span>
             </div>
-            <div style={{ flex: 1 }}>
+            <div className="flex-1">
               <label className="form-label" htmlFor="sched-balance-abs">Balance abs threshold</label>
               <input
                 id="sched-balance-abs"
@@ -232,11 +232,11 @@ function SchedulingForm({ onSave, onCancel }) {
                 value={balanceAbsThreshold}
                 onChange={e => setBalanceAbsThreshold(parseInt(e.target.value) || 0)}
               />
-              <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', display: 'block', marginTop: 6 }}>
+              <span className="text-meta d-block mt-xs">
                 Max absolute in-flight gap allowed before falling back to round-robin. 0 inherits the default.
               </span>
             </div>
-            <div style={{ flex: 1 }}>
+            <div className="flex-1">
               <label className="form-label" htmlFor="sched-balance-rel">Balance rel threshold</label>
               <input
                 id="sched-balance-rel"
@@ -247,7 +247,7 @@ function SchedulingForm({ onSave, onCancel }) {
                 value={balanceRelThreshold}
                 onChange={e => setBalanceRelThreshold(parseFloat(e.target.value) || 0)}
               />
-              <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', display: 'block', marginTop: 6 }}>
+              <span className="text-meta d-block mt-xs">
                 Max relative in-flight ratio (&gt;= 1) allowed before falling back to round-robin. 0 inherits the default.
               </span>
             </div>
@@ -309,9 +309,9 @@ export default function Scheduling() {
         supporting={t('scheduling.subtitle')}
       />
       <div>
-        <button className="btn btn-primary btn-sm" style={{ marginBottom: 'var(--spacing-md)' }}
+        <button className="btn btn-primary btn-sm mb-md"
           onClick={() => setShowForm(f => !f)}>
-          <i className="fas fa-plus" style={{ marginRight: 6 }} />
+          <i className="fas fa-plus icon-before" />
           Add Scheduling Rule
         </button>
         {showForm && <SchedulingForm onSave={handleSave} onCancel={() => setShowForm(false)} />}
@@ -330,7 +330,7 @@ export default function Scheduling() {
                 <th>Routing</th>
                 <th>Thresholds</th>
                 <th>Status</th>
-                <th style={{ textAlign: 'right' }}>Actions</th>
+                <th className="text-right">Actions</th>
               </tr></thead>
               <tbody>
                 {schedulingConfigs.map(cfg => {
@@ -365,10 +365,10 @@ export default function Scheduling() {
                               fontFamily: 'var(--font-mono)', marginRight: 4,
                             }}>{k}={v}</span>
                           ))
-                        } catch { return <span style={{ color: 'var(--color-text-muted)', fontSize: '0.8125rem' }}>{cfg.node_selector}</span> }
-                      })() : <span style={{ color: 'var(--color-text-muted)', fontSize: '0.8125rem' }}>Any node</span>}
+                        } catch { return <span className="text-note">{cfg.node_selector}</span> }
+                      })() : <span className="text-note">Any node</span>}
                     </td>
-                    <td style={{ fontFamily: 'var(--font-mono)' }}>
+                    <td className="text-mono">
                       {isSpread
                         ? <span style={{
                             display: 'inline-block', fontSize: '0.75rem', padding: '2px 8px', borderRadius: "var(--radius-sm)",
@@ -377,13 +377,13 @@ export default function Scheduling() {
                           }}>Spread: all matching nodes</span>
                         : isAutoScaling ? cfg.min_replicas : '-'}
                     </td>
-                    <td style={{ fontFamily: 'var(--font-mono)' }}>
+                    <td className="text-mono">
                       {isSpread ? '-' : isAutoScaling ? (cfg.max_replicas || 'no limit') : '-'}
                     </td>
-                    <td style={{ fontSize: '0.8125rem' }}>
+                    <td className="text-sm">
                       {cfg.route_policy || 'default'}
                     </td>
-                    <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+                    <td className="text-mono text-meta">
                       {cfg.route_policy === 'prefix_cache' ? (
                         <>
                           <div>match: {cfg.min_prefix_match ? cfg.min_prefix_match : 'inherit'}</div>
@@ -404,14 +404,14 @@ export default function Scheduling() {
                             color: 'var(--color-warning, #d97706)',
                           }}
                         >
-                          <i className="fas fa-exclamation-triangle" style={{ marginRight: 4 }} />
+                          <i className="fas fa-exclamation-triangle icon-before" />
                           Unsatisfiable until {unsatisfiableUntil.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                         </span>
                       ) : (
-                        <span style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>OK</span>
+                        <span className="text-note">OK</span>
                       )}
                     </td>
-                    <td style={{ textAlign: 'right' }}>
+                    <td className="text-right">
                       <button className="btn btn-danger btn-sm" onClick={() => setConfirmDelete(cfg.model_name)}>
                         <i className="fas fa-trash" />
                       </button>
diff --git a/core/http/react-ui/src/pages/Settings.jsx b/core/http/react-ui/src/pages/Settings.jsx
index 5299454f6492..b67067822531 100644
--- a/core/http/react-ui/src/pages/Settings.jsx
+++ b/core/http/react-ui/src/pages/Settings.jsx
@@ -153,55 +153,42 @@ export default function Settings() {
     return () => container.removeEventListener('scroll', onScroll)
   }, [loading])
 
-  if (loading) return <div className="page page--medium" style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}><LoadingSpinner size="lg" /></div>
+  if (loading) return <div className="page page--medium loading-center"><LoadingSpinner size="lg" /></div>
   if (!settings) return <div className="page page--medium"><div className="empty-state"><p className="empty-state-text">Settings not available</p></div></div>
 
   const isDirty = settings && initialSettings && JSON.stringify(settings) !== JSON.stringify(initialSettings)
   const watchdogEnabled = settings.watchdog_idle_enabled || settings.watchdog_busy_enabled
 
   return (
-    <div className="page page--medium" style={{ padding: 0 }}>
+    <div className="page page--medium p-0">
       <UnsavedChangesGuard when={isDirty} />
       {/* Header */}
-      <div style={{ padding: 'var(--spacing-lg) var(--spacing-lg) 0' }}>
+      <div className="set-head">
         <PageHeader
           title={t('settings.title')}
           supporting={t('settings.subtitle')}
           actions={
-            <button className={`btn ${isDirty ? 'btn-primary' : 'btn-secondary'}`} onClick={handleSave} disabled={saving || !isDirty}>
-              {saving ? <><LoadingSpinner size="sm" /> Saving...</> : <><i className="fas fa-save" /> {isDirty ? 'Save Changes' : 'Saved'}</>}
+            <button className={`btn ${isDirty ? 'btn-primary' : 'btn-secondary'} fas fa-save`} onClick={handleSave} disabled={saving || !isDirty}>
+              {saving ? <><LoadingSpinner size="sm" /> Saving...</> : <><i /> {isDirty ? 'Save Changes' : 'Saved'}</>}
             </button>
           }
         />
       </div>
 
       {/* Two-column layout */}
-      <div style={{ display: 'flex', gap: 0, minHeight: 'calc(100vh - 180px)' }}>
+      <div className="set-layout">
         {/* Sidebar nav */}
-        <nav style={{
-          width: 180, flexShrink: 0, padding: '0 var(--spacing-sm)',
-          position: 'sticky', top: 0, alignSelf: 'flex-start',
-        }}>
+        <nav className="set-rail">
           {SECTIONS.map(s => (
             <button
               key={s.id}
               onClick={() => scrollTo(s.id)}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)',
-                width: '100%', padding: '8px 12px',
-                background: activeSection === s.id ? 'var(--color-primary-light)' : 'transparent',
-                border: 'none', borderRadius: 'var(--radius-md)', cursor: 'pointer',
-                color: activeSection === s.id ? 'var(--color-primary)' : 'var(--color-text-secondary)',
-                fontSize: '0.8125rem', fontWeight: activeSection === s.id ? 600 : 400,
-                textAlign: 'left', transition: 'all 150ms',
-                marginBottom: 2,
-                borderLeft: activeSection === s.id ? '2px solid var(--color-primary)' : '2px solid transparent',
-              }}
+              className={`set-rail__item${activeSection === s.id ? ' set-rail__item--on' : ''}`}
             >
-              <i className={`fas ${s.icon}`} style={{
-                width: 16, textAlign: 'center', fontSize: '0.75rem',
-                color: activeSection === s.id ? s.color : 'var(--color-text-muted)',
-              }} />
+              <i
+                className={`fas ${s.icon} set-rail__icon`}
+                style={activeSection === s.id ? { color: s.color } : undefined}
+              />
               {t(`settings.sections.${s.id}`)}
             </button>
           ))}
@@ -210,21 +197,17 @@ export default function Settings() {
         {/* Content area */}
         <div
           ref={contentRef}
-          style={{
-            flex: 1, overflow: 'auto', padding: '0 var(--spacing-lg) var(--spacing-xl) var(--spacing-md)',
-            maxHeight: 'calc(100vh - 180px)',
-          }}
+          className="set-content"
         >
           {/* Branding / Whitelabeling */}
-          <div ref={el => sectionRefs.current.branding = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-palette" style={{ color: 'var(--color-primary)' }} /> Branding
+          <div ref={el => sectionRefs.current.branding = el} className="mb-xl">
+            <h3 className="panel-title">
+              <i className="fas fa-palette text-primary" /> Branding
             </h3>
             <div className="card">
               <SettingRow label="Instance Name" description="Replaces &quot;LocalAI&quot; in the sidebar, footer, and browser tab. Visible on the login screen.">
                 <input
-                  className="input"
-                  style={{ width: 240 }}
+                  className="input col-w-240"
                   value={settings.instance_name || ''}
                   onChange={(e) => update('instance_name', e.target.value)}
                   placeholder="LocalAI"
@@ -232,8 +215,7 @@ export default function Settings() {
               </SettingRow>
               <SettingRow label="Tagline" description="Optional short subtitle shown beneath the instance name.">
                 <input
-                  className="input"
-                  style={{ width: 240 }}
+                  className="input col-w-240"
                   value={settings.instance_tagline || ''}
                   onChange={(e) => update('instance_tagline', e.target.value)}
                   placeholder="(none)"
@@ -245,25 +227,20 @@ export default function Settings() {
                 const busy = brandingBusy === asset.kind
                 return (
                   <SettingRow key={asset.kind} label={asset.label} description={asset.description}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
-                      <div style={{
-                        width: 56, height: 56, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                        background: 'var(--color-surface-elevated)',
-                        border: '1px solid var(--color-border)',
-                        borderRadius: 'var(--radius-md)', overflow: 'hidden',
-                      }}>
+                    <div className="hstack">
+                      <div className="set-asset">
                         {url ? (
-                          <img src={url} alt="" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
+                          <img src={url} alt="" />
                         ) : (
-                          <i className="fas fa-image" style={{ color: 'var(--color-text-muted)' }} />
+                          <i className="fas fa-image text-muted" />
                         )}
                       </div>
-                      <label className="btn btn-secondary" style={{ cursor: busy ? 'wait' : 'pointer', margin: 0 }}>
+                      <label className="btn btn-secondary m-0" style={{ cursor: busy ? 'wait' : 'pointer' }}>
                         <i className="fas fa-upload" /> {busy ? 'Uploading…' : 'Upload'}
                         <input
                           type="file"
                           accept="image/png,image/jpeg,image/svg+xml,image/webp,image/x-icon,.ico"
-                          style={{ display: 'none' }}
+                          className="hidden"
                           disabled={busy}
                           onChange={(e) => {
                             const file = e.target.files?.[0]
@@ -291,9 +268,9 @@ export default function Settings() {
           </div>
 
           {/* Watchdog */}
-          <div ref={el => sectionRefs.current.watchdog = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-shield-halved" style={{ color: 'var(--color-primary)' }} /> Watchdog
+          <div ref={el => sectionRefs.current.watchdog = el} className="mb-xl">
+            <h3 className="panel-title">
+              <i className="fas fa-shield-halved text-primary" /> Watchdog
             </h3>
             <div className="card">
               <SettingRow label="Enable Watchdog" description="Automatically monitor and manage backend processes">
@@ -303,16 +280,16 @@ export default function Settings() {
                 <Toggle checked={settings.watchdog_idle_enabled} onChange={(v) => update('watchdog_idle_enabled', v)} disabled={!watchdogEnabled} />
               </SettingRow>
               <SettingRow label="Idle Timeout" description="Time before an idle backend is stopped (e.g. 15m, 1h)">
-                <input className="input" style={{ width: 120 }} value={settings.watchdog_idle_timeout || ''} onChange={(e) => update('watchdog_idle_timeout', e.target.value)} placeholder="15m" disabled={!settings.watchdog_idle_enabled} />
+                <input className="input col-w-120" value={settings.watchdog_idle_timeout || ''} onChange={(e) => update('watchdog_idle_timeout', e.target.value)} placeholder="15m" disabled={!settings.watchdog_idle_enabled} />
               </SettingRow>
               <SettingRow label="Enable Busy Check" description="Stop stuck/busy processes that exceed timeout">
                 <Toggle checked={settings.watchdog_busy_enabled} onChange={(v) => update('watchdog_busy_enabled', v)} disabled={!watchdogEnabled} />
               </SettingRow>
               <SettingRow label="Busy Timeout" description="Time before a busy backend is stopped (e.g. 5m)">
-                <input className="input" style={{ width: 120 }} value={settings.watchdog_busy_timeout || ''} onChange={(e) => update('watchdog_busy_timeout', e.target.value)} placeholder="5m" disabled={!settings.watchdog_busy_enabled} />
+                <input className="input col-w-120" value={settings.watchdog_busy_timeout || ''} onChange={(e) => update('watchdog_busy_timeout', e.target.value)} placeholder="5m" disabled={!settings.watchdog_busy_enabled} />
               </SettingRow>
               <SettingRow label="Check Interval" description="How often the watchdog checks backends (e.g. 2s)">
-                <input className="input" style={{ width: 120 }} value={settings.watchdog_interval || ''} onChange={(e) => update('watchdog_interval', e.target.value)} placeholder="2s" />
+                <input className="input col-w-120" value={settings.watchdog_interval || ''} onChange={(e) => update('watchdog_interval', e.target.value)} placeholder="2s" />
               </SettingRow>
               <SettingRow label="Force Eviction When Busy" description="Allow model eviction even during active API calls">
                 <Toggle checked={settings.force_eviction_when_busy} onChange={(v) => update('force_eviction_when_busy', v)} />
@@ -321,19 +298,19 @@ export default function Settings() {
                 <Toggle checked={settings.size_aware_eviction} onChange={(v) => update('size_aware_eviction', v)} />
               </SettingRow>
               <SettingRow label="LRU Eviction Max Retries" description="Maximum retries waiting for busy models before eviction">
-                <input className="input" type="number" style={{ width: 120 }} value={settings.lru_eviction_max_retries ?? ''} onChange={(e) => update('lru_eviction_max_retries', parseInt(e.target.value) || 0)} placeholder="30" />
+                <input className="input col-w-120" type="number" value={settings.lru_eviction_max_retries ?? ''} onChange={(e) => update('lru_eviction_max_retries', parseInt(e.target.value) || 0)} placeholder="30" />
               </SettingRow>
               <SettingRow label="LRU Eviction Retry Interval" description="Wait between eviction retries (e.g. 1s)">
-                <input className="input" style={{ width: 120 }} value={settings.lru_eviction_retry_interval || ''} onChange={(e) => update('lru_eviction_retry_interval', e.target.value)} placeholder="1s" />
+                <input className="input col-w-120" value={settings.lru_eviction_retry_interval || ''} onChange={(e) => update('lru_eviction_retry_interval', e.target.value)} placeholder="1s" />
               </SettingRow>
             </div>
           </div>
 
           {/* Memory Reclaimer */}
-          <div ref={el => sectionRefs.current.memory = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-md)' }}>
-              <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
-                <i className="fas fa-memory" style={{ color: 'var(--color-accent)' }} /> Memory Reclaimer
+          <div ref={el => sectionRefs.current.memory = el} className="mb-xl">
+            <div className="hstack hstack--between mb-md">
+              <h3 className="hstack text-lg fw-semibold">
+                <i className="fas fa-memory text-accent" /> Memory Reclaimer
               </h3>
               <button className="btn btn-secondary btn-sm" onClick={fetchResources} title="Refresh resource status">
                 <i className="fas fa-sync-alt" />
@@ -341,34 +318,31 @@ export default function Settings() {
             </div>
             <div className="card">
               {resources && (
-                <div style={{
-                  background: 'var(--color-bg-tertiary)', borderRadius: 'var(--radius-md)',
-                  padding: 'var(--spacing-sm)', marginBottom: 'var(--spacing-sm)', fontSize: '0.75rem',
-                }}>
+                <div className="set-meters mb-sm">
                   {resources.gpus?.length > 0 ? resources.gpus.map((gpu, i) => {
                     const usedPct = gpu.total > 0 ? Math.round((gpu.used / gpu.total) * 100) : 0
                     return (
-                      <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)', marginBottom: i < resources.gpus.length - 1 ? 4 : 0 }}>
-                        <span style={{ color: 'var(--color-text-muted)', minWidth: 60 }}>GPU {i}</span>
-                        <div style={{ flex: 1, height: 6, background: 'var(--color-bg-primary)', borderRadius: "var(--radius-sm)", overflow: 'hidden' }}>
-                          <div style={{ width: `${usedPct}%`, height: '100%', background: percentColor(usedPct), borderRadius: "var(--radius-sm)" }} />
+                      <div key={i} className="set-meter">
+                        <span className="set-meter__label">GPU {i}</span>
+                        <div className="set-meter__track">
+                          <div className="set-meter__fill" style={{ width: `${usedPct}%`, background: percentColor(usedPct) }} />
                         </div>
-                        <span style={{ color: percentColor(usedPct), minWidth: 40, textAlign: 'right' }}>{usedPct}%</span>
-                        <span style={{ color: 'var(--color-text-muted)' }}>{formatBytes(gpu.used)} / {formatBytes(gpu.total)}</span>
+                        <span className="set-meter__value" style={{ color: percentColor(usedPct) }}>{usedPct}%</span>
+                        <span className="text-muted">{formatBytes(gpu.used)} / {formatBytes(gpu.total)}</span>
                       </div>
                     )
                   }) : (
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)' }}>
-                      <span style={{ color: 'var(--color-text-muted)', minWidth: 60 }}>RAM</span>
+                    <div className="hstack hstack--xs">
+                      <span className="set-meter__label">RAM</span>
                       {resources.ram && (() => {
                         const usedPct = resources.ram.total > 0 ? Math.round((resources.ram.used / resources.ram.total) * 100) : 0
                         return (
                           <>
-                            <div style={{ flex: 1, height: 6, background: 'var(--color-bg-primary)', borderRadius: "var(--radius-sm)", overflow: 'hidden' }}>
-                              <div style={{ width: `${usedPct}%`, height: '100%', background: percentColor(usedPct), borderRadius: "var(--radius-sm)" }} />
+                            <div className="set-meter__track">
+                              <div className="set-meter__fill" style={{ width: `${usedPct}%`, background: percentColor(usedPct) }} />
                             </div>
-                            <span style={{ color: percentColor(usedPct), minWidth: 40, textAlign: 'right' }}>{usedPct}%</span>
-                            <span style={{ color: 'var(--color-text-muted)' }}>{formatBytes(resources.ram.used)} / {formatBytes(resources.ram.total)}</span>
+                            <span className="set-meter__value" style={{ color: percentColor(usedPct) }}>{usedPct}%</span>
+                            <span className="text-muted">{formatBytes(resources.ram.used)} / {formatBytes(resources.ram.total)}</span>
                           </>
                         )
                       })()}
@@ -380,9 +354,9 @@ export default function Settings() {
                 <Toggle checked={settings.memory_reclaimer_enabled} onChange={(v) => update('memory_reclaimer_enabled', v)} />
               </SettingRow>
               <SettingRow label="Memory Threshold (%)" description="Eviction triggers when usage exceeds this percentage">
-                <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
-                  <input type="range" min="50" max="100" value={Math.round((settings.memory_reclaimer_threshold || 0.8) * 100)} onChange={(e) => update('memory_reclaimer_threshold', parseInt(e.target.value) / 100)} disabled={!settings.memory_reclaimer_enabled} style={{ width: 120 }} />
-                  <span style={{ fontSize: '0.875rem', fontWeight: 600, minWidth: 40, textAlign: 'right', color: percentColor(Math.round((settings.memory_reclaimer_threshold || 0.8) * 100)) }}>
+                <div className="hstack">
+                  <input type="range" min="50" max="100" value={Math.round((settings.memory_reclaimer_threshold || 0.8) * 100)} onChange={(e) => update('memory_reclaimer_threshold', parseInt(e.target.value) / 100)} disabled={!settings.memory_reclaimer_enabled} className="col-w-120" />
+                  <span className="set-pct" style={{ color: percentColor(Math.round((settings.memory_reclaimer_threshold || 0.8) * 100)) }}>
                     {Math.round((settings.memory_reclaimer_threshold || 0.8) * 100)}%
                   </span>
                 </div>
@@ -391,13 +365,13 @@ export default function Settings() {
           </div>
 
           {/* Backends */}
-          <div ref={el => sectionRefs.current.backends = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-cogs" style={{ color: 'var(--color-accent)' }} /> Backend Management
+          <div ref={el => sectionRefs.current.backends = el} className="mb-xl">
+            <h3 className="panel-title">
+              <i className="fas fa-cogs text-accent" /> Backend Management
             </h3>
             <div className="card">
               <SettingRow label="Max Active Backends" description="Maximum models to keep loaded simultaneously (0 = unlimited)">
-                <input className="input" type="number" style={{ width: 120 }} value={settings.max_active_backends ?? ''} onChange={(e) => update('max_active_backends', parseInt(e.target.value) || 0)} placeholder="0" />
+                <input className="input col-w-120" type="number" value={settings.max_active_backends ?? ''} onChange={(e) => update('max_active_backends', parseInt(e.target.value) || 0)} placeholder="0" />
               </SettingRow>
               <SettingRow label="Auto-upgrade Backends" description="Automatically upgrade backends when new versions are detected">
                 <Toggle checked={settings.auto_upgrade_backends} onChange={(v) => update('auto_upgrade_backends', v)} />
@@ -409,19 +383,19 @@ export default function Settings() {
           </div>
 
           {/* Performance */}
-          <div ref={el => sectionRefs.current.performance = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-gauge-high" style={{ color: 'var(--color-success)' }} /> Performance
+          <div ref={el => sectionRefs.current.performance = el} className="mb-xl">
+            <h3 className="panel-title">
+              <i className="fas fa-gauge-high text-success" /> Performance
             </h3>
             <div className="card">
               <SettingRow label="Default Threads" description="CPU threads for inference (0 = auto-detect)">
-                <input className="input" type="number" style={{ width: 120 }} value={settings.threads ?? ''} onChange={(e) => update('threads', parseInt(e.target.value) || 0)} placeholder="0" />
+                <input className="input col-w-120" type="number" value={settings.threads ?? ''} onChange={(e) => update('threads', parseInt(e.target.value) || 0)} placeholder="0" />
               </SettingRow>
               <SettingRow label="Default Context Size" description="Default context window size for models">
-                <input className="input" type="number" style={{ width: 120 }} value={settings.context_size ?? ''} onChange={(e) => update('context_size', parseInt(e.target.value) || 0)} placeholder="2048" />
+                <input className="input col-w-120" type="number" value={settings.context_size ?? ''} onChange={(e) => update('context_size', parseInt(e.target.value) || 0)} placeholder="2048" />
               </SettingRow>
               <SettingRow label="VRAM Budget" description="Cap VRAM used for model allocation on this node. Percentage (e.g. 80%) or absolute (e.g. 12GB). Empty uses all detected VRAM.">
-                <input className="input" type="text" style={{ width: 120 }} value={settings.vram_budget ?? ''} onChange={(e) => update('vram_budget', e.target.value)} placeholder="e.g. 80% or 12GB" />
+                <input className="input col-w-120" type="text" value={settings.vram_budget ?? ''} onChange={(e) => update('vram_budget', e.target.value)} placeholder="e.g. 80% or 12GB" />
               </SettingRow>
               <SettingRow label="F16 Precision" description="Use 16-bit floating point for reduced memory usage">
                 <Toggle checked={settings.f16} onChange={(v) => update('f16', v)} />
@@ -433,19 +407,19 @@ export default function Settings() {
           </div>
 
           {/* Tracing */}
-          <div ref={el => sectionRefs.current.tracing = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-bug" style={{ color: 'var(--color-warning)' }} /> Tracing
+          <div ref={el => sectionRefs.current.tracing = el} className="mb-xl">
+            <h3 className="panel-title">
+              <i className="fas fa-bug text-warning" /> Tracing
             </h3>
             <div className="card">
               <SettingRow label="Enable Tracing" description="Record API requests, responses, and backend operations for debugging">
                 <Toggle checked={settings.enable_tracing} onChange={(v) => update('enable_tracing', v)} />
               </SettingRow>
               <SettingRow label="Max Items" description="Maximum number of trace items to retain (0 = unlimited)">
-                <input className="input" type="number" style={{ width: 120 }} value={settings.tracing_max_items ?? ''} onChange={(e) => update('tracing_max_items', parseInt(e.target.value) || 0)} placeholder="100" disabled={!settings.enable_tracing} />
+                <input className="input col-w-120" type="number" value={settings.tracing_max_items ?? ''} onChange={(e) => update('tracing_max_items', parseInt(e.target.value) || 0)} placeholder="100" disabled={!settings.enable_tracing} />
               </SettingRow>
               <SettingRow label="Max Body Bytes" description="Per-field cap (bytes) for captured request/response bodies and backend trace Data fields. Prevents large LLM histories or TTS audio snippets from locking the Traces UI. 0 = uncapped.">
-                <input className="input" type="number" style={{ width: 120 }} value={settings.tracing_max_body_bytes ?? ''} onChange={(e) => update('tracing_max_body_bytes', parseInt(e.target.value) || 0)} placeholder="65536" disabled={!settings.enable_tracing} />
+                <input className="input col-w-120" type="number" value={settings.tracing_max_body_bytes ?? ''} onChange={(e) => update('tracing_max_body_bytes', parseInt(e.target.value) || 0)} placeholder="65536" disabled={!settings.enable_tracing} />
               </SettingRow>
               <SettingRow label="Enable Backend Logging" description="Capture backend process output per model (without requiring debug mode)">
                 <Toggle checked={settings.enable_backend_logging} onChange={(v) => update('enable_backend_logging', v)} />
@@ -454,16 +428,16 @@ export default function Settings() {
           </div>
 
           {/* API & CORS */}
-          <div ref={el => sectionRefs.current.api = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-globe" style={{ color: 'var(--color-warning)' }} /> API & CORS
+          <div ref={el => sectionRefs.current.api = el} className="mb-xl">
+            <h3 className="panel-title">
+              <i className="fas fa-globe text-warning" /> API & CORS
             </h3>
             <div className="card">
               <SettingRow label="Enable CORS" description="Enable Cross-Origin Resource Sharing">
                 <Toggle checked={settings.cors} onChange={(v) => update('cors', v)} />
               </SettingRow>
               <SettingRow label="CORS Allow Origins" description="Comma-separated list of allowed origins">
-                <input className="input" style={{ width: 200 }} value={settings.cors_allow_origins || ''} onChange={(e) => update('cors_allow_origins', e.target.value)} placeholder="*" disabled={!settings.cors} />
+                <input className="input col-w-200" value={settings.cors_allow_origins || ''} onChange={(e) => update('cors_allow_origins', e.target.value)} placeholder="*" disabled={!settings.cors} />
               </SettingRow>
               <SettingRow label="Enable CSRF Protection" description="Enable Cross-Site Request Forgery protection">
                 <Toggle checked={settings.csrf} onChange={(v) => update('csrf', v)} />
@@ -472,26 +446,26 @@ export default function Settings() {
           </div>
 
           {/* P2P */}
-          <div ref={el => sectionRefs.current.p2p = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-network-wired" style={{ color: 'var(--color-accent)' }} /> P2P Network
+          <div ref={el => sectionRefs.current.p2p = el} className="mb-xl">
+            <h3 className="panel-title">
+              <i className="fas fa-network-wired text-accent" /> P2P Network
             </h3>
             <div className="card">
               <SettingRow label="P2P Token" description="Generate a new token or paste an existing one to join a network">
-                <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)' }}>
-                  <input className="input" style={{ width: 200 }} value={settings.p2p_token || ''} onChange={(e) => update('p2p_token', e.target.value)} placeholder="No token set" />
+                <div className="hstack hstack--xs">
+                  <input className="input col-w-200" value={settings.p2p_token || ''} onChange={(e) => update('p2p_token', e.target.value)} placeholder="No token set" />
                   <button className="btn btn-primary btn-sm" onClick={() => update('p2p_token', '0')} title="Generate a new P2P token (applied on save)">
                     <i className="fas fa-rotate" /> Generate
                   </button>
                   {settings.p2p_token && (
-                    <button className="btn btn-secondary btn-sm" onClick={() => update('p2p_token', '')} title="Clear token (disables P2P on save)" style={{ color: 'var(--color-error)' }}>
+                    <button className="btn btn-secondary btn-sm text-error" onClick={() => update('p2p_token', '')} title="Clear token (disables P2P on save)">
                       <i className="fas fa-times" />
                     </button>
                   )}
                 </div>
               </SettingRow>
               <SettingRow label="P2P Network ID" description="Network identifier for grouping instances">
-                <input className="input" style={{ width: 200 }} value={settings.p2p_network_id || ''} onChange={(e) => update('p2p_network_id', e.target.value)} placeholder="Network ID" />
+                <input className="input col-w-200" value={settings.p2p_network_id || ''} onChange={(e) => update('p2p_network_id', e.target.value)} placeholder="Network ID" />
               </SettingRow>
               <SettingRow label="Federated Mode" description="Enable federated instance mode for load balancing">
                 <Toggle checked={settings.federated} onChange={(v) => update('federated', v)} />
@@ -500,9 +474,9 @@ export default function Settings() {
           </div>
 
           {/* Galleries */}
-          <div ref={el => sectionRefs.current.galleries = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-images" style={{ color: 'var(--color-accent)' }} /> Galleries
+          <div ref={el => sectionRefs.current.galleries = el} className="mb-xl">
+            <h3 className="panel-title">
+              <i className="fas fa-images text-accent" /> Galleries
             </h3>
             <div className="card">
               <SettingRow label="Autoload Galleries" description="Automatically load model galleries on startup">
@@ -511,68 +485,65 @@ export default function Settings() {
               <SettingRow label="Autoload Backend Galleries" description="Automatically load backend galleries on startup">
                 <Toggle checked={settings.autoload_backend_galleries} onChange={(v) => update('autoload_backend_galleries', v)} />
               </SettingRow>
-              <div style={{ marginTop: 'var(--spacing-sm)' }}>
+              <div className="mt-sm">
                 <label className="form-label">Model Galleries (JSON)</label>
                 <textarea
-                  className="textarea"
+                  className="textarea text-mono text-sm"
                   value={settings.galleries_json || (settings.galleries ? JSON.stringify(settings.galleries, null, 2) : '')}
                   onChange={(e) => update('galleries_json', e.target.value)}
                   rows={4}
                   placeholder={'[\n  { "url": "https://...", "name": "my-gallery" }\n]'}
-                  style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}
                 />
               </div>
-              <div style={{ marginTop: 'var(--spacing-sm)' }}>
+              <div className="mt-sm">
                 <label className="form-label">Backend Galleries (JSON)</label>
                 <textarea
-                  className="textarea"
+                  className="textarea text-mono text-sm"
                   value={settings.backend_galleries_json || (settings.backend_galleries ? JSON.stringify(settings.backend_galleries, null, 2) : '')}
                   onChange={(e) => update('backend_galleries_json', e.target.value)}
                   rows={4}
                   placeholder={'[\n  { "url": "https://...", "name": "my-backends" }\n]'}
-                  style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}
                 />
               </div>
             </div>
           </div>
 
           {/* API Keys */}
-          <div ref={el => sectionRefs.current.apikeys = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-key" style={{ color: 'var(--color-error)' }} /> API Keys
+          <div ref={el => sectionRefs.current.apikeys = el} className="mb-xl">
+            <h3 className="panel-title">
+              <i className="fas fa-key text-error" /> API Keys
             </h3>
             <div className="card">
-              <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)', marginBottom: 'var(--spacing-sm)' }}>
-                <i className="fas fa-exclamation-triangle" style={{ color: 'var(--color-warning)', marginRight: 'var(--spacing-xs)' }} />
+              <div className="text-note mb-sm">
+                <i className="fas fa-exclamation-triangle text-warning icon-before" />
                 API keys are sensitive. One key per line or comma-separated.
               </div>
               <textarea
-                className="textarea"
+                className="textarea text-mono text-sm"
                 value={settings.api_keys?.join('\n') || (typeof settings.api_keys_text === 'string' ? settings.api_keys_text : '')}
                 onChange={(e) => update('api_keys_text', e.target.value)}
                 rows={4}
                 placeholder="sk-key-1&#10;sk-key-2"
-                style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}
               />
             </div>
           </div>
 
           {/* Agent Jobs */}
-          <div ref={el => sectionRefs.current.agents = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-tasks" style={{ color: 'var(--color-primary)' }} /> Agent Jobs
+          <div ref={el => sectionRefs.current.agents = el} className="mb-xl">
+            <h3 className="panel-title">
+              <i className="fas fa-tasks text-primary" /> Agent Jobs
             </h3>
             <div className="card">
               <SettingRow label="Job Retention Days" description="Number of days to keep job history">
-                <input className="input" type="number" style={{ width: 120 }} value={settings.agent_job_retention_days ?? ''} onChange={(e) => update('agent_job_retention_days', parseInt(e.target.value) || 0)} placeholder="30" />
+                <input className="input col-w-120" type="number" value={settings.agent_job_retention_days ?? ''} onChange={(e) => update('agent_job_retention_days', parseInt(e.target.value) || 0)} placeholder="30" />
               </SettingRow>
             </div>
           </div>
 
           {/* Agent Pool */}
-          <div ref={el => sectionRefs.current.agentpool = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-robot" style={{ color: 'var(--color-primary)' }} /> Agent Pool
+          <div ref={el => sectionRefs.current.agentpool = el} className="mb-xl">
+            <h3 className="panel-title">
+              <i className="fas fa-robot text-primary" /> Agent Pool
             </h3>
             <div className="card">
               <SettingRow label="Enabled" description="Enable or disable the agent pool feature (requires restart)">
@@ -585,21 +556,20 @@ export default function Settings() {
                 <SearchableModelSelect value={settings.agent_pool_embedding_model || ''} onChange={(v) => update('agent_pool_embedding_model', v)} placeholder="granite-embedding-107m-multilingual" />
               </SettingRow>
               <SettingRow label="Max Chunking Size" description="Maximum chunk size for knowledge base documents (default: 400)">
-                <input className="input" type="number" style={{ width: 120 }} value={settings.agent_pool_max_chunking_size ?? 400} onChange={(e) => update('agent_pool_max_chunking_size', parseInt(e.target.value, 10) || 0)} min={0} />
+                <input className="input col-w-120" type="number" value={settings.agent_pool_max_chunking_size ?? 400} onChange={(e) => update('agent_pool_max_chunking_size', parseInt(e.target.value, 10) || 0)} min={0} />
               </SettingRow>
               <SettingRow label="Chunk Overlap" description="Overlap between chunks for knowledge base documents (default: 0)">
-                <input className="input" type="number" style={{ width: 120 }} value={settings.agent_pool_chunk_overlap ?? 0} onChange={(e) => update('agent_pool_chunk_overlap', parseInt(e.target.value, 10) || 0)} min={0} />
+                <input className="input col-w-120" type="number" value={settings.agent_pool_chunk_overlap ?? 0} onChange={(e) => update('agent_pool_chunk_overlap', parseInt(e.target.value, 10) || 0)} min={0} />
               </SettingRow>
               <SettingRow label="Enable Logs" description="Enable agent logging (requires restart)">
                 <Toggle checked={settings.agent_pool_enable_logs ?? false} onChange={(v) => update('agent_pool_enable_logs', v)} />
               </SettingRow>
               <SettingRow label="Collection DB Path" description="Database path for agent collections">
-                <input className="input" style={{ width: 280 }} value={settings.agent_pool_collection_db_path || ''} onChange={(e) => update('agent_pool_collection_db_path', e.target.value)} placeholder="Leave empty for default" />
+                <input className="input w-280" value={settings.agent_pool_collection_db_path || ''} onChange={(e) => update('agent_pool_collection_db_path', e.target.value)} placeholder="Leave empty for default" />
               </SettingRow>
               <SettingRow label="Vector Engine" description="Backend store for collection embeddings. chromem is in-memory; postgres uses pgvector and requires Database URL.">
                 <select
-                  className="input"
-                  style={{ width: 160 }}
+                  className="input w-160"
                   value={settings.agent_pool_vector_engine || 'chromem'}
                   onChange={(e) => update('agent_pool_vector_engine', e.target.value)}
                 >
@@ -609,8 +579,7 @@ export default function Settings() {
               </SettingRow>
               <SettingRow label="Database URL" description="PostgreSQL DSN used when Vector Engine is postgres (e.g. postgres://user:pass@host:5432/db).">
                 <input
-                  className="input"
-                  style={{ width: 320 }}
+                  className="input col-w-320"
                   value={settings.agent_pool_database_url || ''}
                   onChange={(e) => update('agent_pool_database_url', e.target.value)}
                   placeholder="postgres://..."
@@ -619,8 +588,7 @@ export default function Settings() {
               </SettingRow>
               <SettingRow label="Agent Hub URL" description="Override the default https://agenthub.localai.io endpoint (custom or self-hosted hub).">
                 <input
-                  className="input"
-                  style={{ width: 320 }}
+                  className="input col-w-320"
                   value={settings.agent_pool_agent_hub_url || ''}
                   onChange={(e) => update('agent_pool_agent_hub_url', e.target.value)}
                   placeholder="https://agenthub.localai.io"
@@ -630,9 +598,9 @@ export default function Settings() {
           </div>
 
           {/* LocalAI Assistant */}
-          <div ref={el => sectionRefs.current.assistant = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-user-shield" style={{ color: 'var(--color-accent)' }} /> LocalAI Assistant
+          <div ref={el => sectionRefs.current.assistant = el} className="mb-xl">
+            <h3 className="panel-title">
+              <i className="fas fa-user-shield text-accent" /> LocalAI Assistant
             </h3>
             <div className="card">
               <SettingRow label="Enabled" description="Allow admins to opt chat sessions into the in-process admin tool surface. Disabling refuses new requests with the localai_assistant flag; takes effect without restart.">
@@ -642,9 +610,9 @@ export default function Settings() {
           </div>
 
           {/* Distributed mode */}
-          <div ref={el => sectionRefs.current.distributed = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-server" style={{ color: 'var(--color-accent)' }} /> {t('settings.sections.distributed')}
+          <div ref={el => sectionRefs.current.distributed = el} className="mb-xl">
+            <h3 className="panel-title">
+              <i className="fas fa-server text-accent" /> {t('settings.sections.distributed')}
             </h3>
             <div className="card">
               <SettingRow label="Disk headroom check" description="Reject worker nodes that lack free space to store the model, at scheduling time rather than partway through staging. Free space is measured on each worker's models filesystem and compared against the model's own size plus a small margin. Turning this off restores selection that ignores free disk; the check still runs and warns when it would have rejected every node. Takes effect without restart.">
@@ -654,13 +622,13 @@ export default function Settings() {
           </div>
 
           {/* Open Responses */}
-          <div ref={el => sectionRefs.current.responses = el} style={{ marginBottom: 'var(--spacing-xl)' }}>
-            <h3 style={{ fontSize: '1rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-database" style={{ color: 'var(--color-accent)' }} /> Open Responses
+          <div ref={el => sectionRefs.current.responses = el} className="mb-xl">
+            <h3 className="panel-title">
+              <i className="fas fa-database text-accent" /> Open Responses
             </h3>
             <div className="card">
               <SettingRow label="Response Store TTL" description="Time-to-live for stored responses (e.g. 1h, 30m, 0 = no expiration)">
-                <input className="input" style={{ width: 120 }} value={settings.open_responses_store_ttl || ''} onChange={(e) => update('open_responses_store_ttl', e.target.value)} placeholder="1h" />
+                <input className="input col-w-120" value={settings.open_responses_store_ttl || ''} onChange={(e) => update('open_responses_store_ttl', e.target.value)} placeholder="1h" />
               </SettingRow>
             </div>
           </div>
diff --git a/core/http/react-ui/src/pages/SkillEdit.jsx b/core/http/react-ui/src/pages/SkillEdit.jsx
index 887bfd5adf0a..70dbad5dacaa 100644
--- a/core/http/react-ui/src/pages/SkillEdit.jsx
+++ b/core/http/react-ui/src/pages/SkillEdit.jsx
@@ -12,15 +12,15 @@ function ResourceGroup({ title, icon, items, readOnly, pathPrefix, onView, onDel
   const [collapsed, setCollapsed] = useState(false)
 
   return (
-    <div style={{ marginBottom: 'var(--spacing-lg)' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--spacing-sm)' }}>
+    <div className="mb-lg">
+      <div className="hstack hstack--between mb-sm">
         <h3
           style={{ margin: 0, fontWeight: 600, fontSize: '0.95rem', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)' }}
           onClick={() => setCollapsed((v) => !v)}
         >
-          <i className={`fas fa-chevron-${collapsed ? 'right' : 'down'}`} style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }} />
-          <i className={`fas fa-${icon}`} style={{ color: 'var(--color-primary)' }} /> {title}
-          <span className="badge" style={{ marginLeft: 'var(--spacing-xs)' }}>{items.length}</span>
+          <i className={`fas fa-chevron-${collapsed ? 'right' : 'down'} text-meta`} />
+          <i className={`fas fa-${icon} text-primary`} /> {title}
+          <span className="badge ml-xs">{items.length}</span>
         </h3>
         {!readOnly && (
           <button className="btn btn-primary btn-sm" onClick={() => onUpload(pathPrefix)}>
@@ -41,12 +41,12 @@ function ResourceGroup({ title, icon, items, readOnly, pathPrefix, onView, onDel
                 className="skilledit-resource-item"
               >
                 <div style={{ minWidth: 0 }}>
-                  <span style={{ fontWeight: 500 }}>{res.name}</span>
+                  <span className="fw-medium">{res.name}</span>
                   <span style={{ color: 'var(--color-text-secondary)', fontSize: '0.8rem', marginLeft: 'var(--spacing-sm)' }}>
                     {res.mime_type} &middot; {(res.size || 0).toLocaleString()} B
                   </span>
                 </div>
-                <div style={{ display: 'flex', gap: 'var(--spacing-xs)' }}>
+                <div className="hstack hstack--xs">
                   <button className="btn btn-secondary btn-sm" onClick={() => onView(res)} title="View/Edit">
                     <i className="fas fa-edit" /> View/Edit
                   </button>
@@ -161,10 +161,10 @@ function ResourcesSection({ skillName, addToast }) {
 
   return (
     <>
-      <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-sm)' }}>
-        <i className="fas fa-folder" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} /> Resources
+      <h3 className="group-label group-label--tight">
+        <i className="fas fa-folder text-primary icon-before" /> Resources
       </h3>
-      <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.875rem', marginBottom: 'var(--spacing-md)' }}>
+      <p className="text-base text-secondary mb-md">
         Scripts, references, and assets for this skill. Paths must start with scripts/, references/, or assets/.
       </p>
       {loading ? (
@@ -182,8 +182,8 @@ function ResourcesSection({ skillName, addToast }) {
       {editor.open && (
         <div className="skilledit-modal-overlay" onClick={() => !editor.saving && setEditor((e) => ({ ...e, open: false }))}>
           <div className="card skilledit-modal-card" style={{ maxWidth: '700px' }} onClick={(e) => e.stopPropagation()}>
-            <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-edit" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} /> Edit {editor.name}
+            <h3 className="group-label">
+              <i className="fas fa-edit text-primary icon-before" /> Edit {editor.name}
             </h3>
             {editor.readable ? (
               <>
@@ -202,7 +202,7 @@ function ResourcesSection({ skillName, addToast }) {
                 </div>
               </>
             ) : (
-              <p style={{ color: 'var(--color-text-secondary)' }}>Binary file. Download via API or export skill.</p>
+              <p className="text-secondary">Binary file. Download via API or export skill.</p>
             )}
           </div>
         </div>
@@ -211,8 +211,8 @@ function ResourcesSection({ skillName, addToast }) {
       {upload.open && (
         <div className="skilledit-modal-overlay" onClick={() => !upload.uploading && setUpload((u) => ({ ...u, open: false }))}>
           <div className="card skilledit-modal-card" style={{ maxWidth: '400px' }} onClick={(e) => e.stopPropagation()}>
-            <h3 style={{ fontWeight: 600, marginBottom: 'var(--spacing-md)' }}>
-              <i className="fas fa-upload" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} /> Upload to {upload.pathPrefix}
+            <h3 className="group-label">
+              <i className="fas fa-upload text-primary icon-before" /> Upload to {upload.pathPrefix}
             </h3>
             <div className="form-group">
               <label className="form-label">File</label>
@@ -245,7 +245,7 @@ function ResourcesSection({ skillName, addToast }) {
       {deletePath && (
         <div className="skilledit-modal-overlay" onClick={() => setDeletePath(null)}>
           <div className="card skilledit-modal-card" style={{ maxWidth: '360px' }} onClick={(e) => e.stopPropagation()}>
-            <p style={{ marginBottom: 'var(--spacing-md)' }}>Delete resource <strong>{deletePath}</strong>?</p>
+            <p className="mb-md">Delete resource <strong>{deletePath}</strong>?</p>
             <div style={{ display: 'flex', gap: 'var(--spacing-sm)', justifyContent: 'flex-end' }}>
               <button className="btn btn-secondary" onClick={() => setDeletePath(null)}>Cancel</button>
               <button className="btn btn-danger" onClick={handleDeleteConfirm}>
@@ -345,8 +345,8 @@ export default function SkillEdit() {
 
   if (loading) {
     return (
-      <div className="page page--narrow" style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}>
-        <i className="fas fa-spinner fa-spin" style={{ fontSize: '2rem', color: 'var(--color-primary)' }} />
+      <div className="page page--narrow loading-center">
+        <i className="fas fa-spinner fa-spin icon-xl text-primary" />
       </div>
     )
   }
@@ -502,12 +502,12 @@ export default function SkillEdit() {
       <PageHeader
         title={
           <>
-            <i className="fas fa-book" style={{ marginRight: 'var(--spacing-xs)' }} /> {isNew ? 'New skill' : `Edit: ${name}`}
+            <i className="fas fa-book icon-before" /> {isNew ? 'New skill' : `Edit: ${name}`}
           </>
         }
       />
 
-      <div className="card" style={{ marginTop: 'var(--spacing-md)' }}>
+      <div className="card mt-md">
         <div className="skilledit-layout">
           <div className="skilledit-sidebar">
             <ul className="skilledit-sidebar-nav">
@@ -607,7 +607,7 @@ export default function SkillEdit() {
                   {isNew || !name ? (
                     <div>
                       <h3 className="skilledit-section-title">Resources</h3>
-                      <p style={{ color: 'var(--color-text-secondary)' }}>
+                      <p className="text-secondary">
                         Save the skill first to add scripts, references, and assets. After creating the skill, use this tab to upload files and manage resources.
                       </p>
                     </div>
diff --git a/core/http/react-ui/src/pages/Talk.jsx b/core/http/react-ui/src/pages/Talk.jsx
index b25643aa7e0b..57a01025dd05 100644
--- a/core/http/react-ui/src/pages/Talk.jsx
+++ b/core/http/react-ui/src/pages/Talk.jsx
@@ -619,55 +619,47 @@ export default function Talk() {
 
   // ── Render ──
   return (
-    <div className="page page--narrow" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-      <div style={{ width: '100%', maxWidth: '48rem' }}>
-        <div style={{ textAlign: 'center', marginBottom: 'var(--spacing-lg)' }}>
+    <div className="page page--narrow talk-page">
+      <div className="talk-col">
+        <div className="text-center mb-lg">
           <h1 className="page-title">Talk</h1>
           <p className="page-subtitle">Real-time voice conversation via WebRTC</p>
         </div>
 
-        <div className="card" style={{ padding: 'var(--spacing-lg)', marginBottom: 'var(--spacing-md)' }}>
+        <div className="card pad-lg mb-md">
           {/* Voice visualizer (hero) */}
           <VoiceVisualizer audioRef={audioRef} micStreamRef={localStreamRef} status={status} active={isConnected} />
 
           {/* Connection status */}
-          <div style={{
-            display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)',
-            padding: 'var(--spacing-sm) var(--spacing-md)',
-            borderRadius: 'var(--radius-md)',
-            background: statusStyle.bg,
-            border: '1px solid color-mix(in srgb, ' + statusStyle.color + ' 30%, transparent)',
-            marginBottom: 'var(--spacing-md)',
-          }}>
+          <div
+            className="talk-status mb-md"
+            style={{
+              background: statusStyle.bg,
+              border: '1px solid color-mix(in srgb, ' + statusStyle.color + ' 30%, transparent)',
+            }}
+          >
             <i className={statusStyle.icon} style={{ color: statusStyle.color }} />
-            <span style={{ fontWeight: 500, color: statusStyle.color }}>{statusText}</span>
+            <span className="fw-medium" style={{ color: statusStyle.color }}>{statusText}</span>
             {status === 'error' && (
-              <a href="/app/traces?tab=backend" className="chat-error-trace-link" style={{ marginLeft: 'auto' }}>
+              <a href="/app/traces?tab=backend" className="chat-error-trace-link ml-auto">
                 <i className="fas fa-wave-square" /> View traces
               </a>
             )}
           </div>
 
           {/* Info note */}
-          <div style={{
-            background: 'var(--color-primary-light)',
-            border: '1px solid color-mix(in srgb, var(--color-primary) 20%, transparent)',
-            borderRadius: 'var(--radius-md)',
-            padding: 'var(--spacing-sm) var(--spacing-md)',
-            marginBottom: 'var(--spacing-md)',
-            display: 'flex', alignItems: 'flex-start', gap: 'var(--spacing-sm)',
-          }}>
-            <i className="fas fa-info-circle" style={{ color: 'var(--color-primary)', marginTop: 2, flexShrink: 0 }} />
-            <p style={{ color: 'var(--color-text-secondary)', fontSize: '0.8125rem', margin: 0 }}>
-              <strong style={{ color: 'var(--color-primary)' }}>Note:</strong> Select a pipeline model and click Connect.
+          <div className="talk-hint mb-md">
+            <i className="fas fa-info-circle text-primary mt-xs shrink-0" />
+            <p className="text-sub m-0">
+              <strong className="text-primary">Note:</strong> Select a pipeline model and click Connect.
               Your microphone streams continuously; the server detects speech and responds automatically.
             </p>
           </div>
 
           {/* Pipeline model selector */}
-          <div style={{ marginBottom: 'var(--spacing-md)' }}>
-            <label className="form-label" style={{ fontSize: '0.8125rem' }}>
-              <i className="fas fa-brain" style={{ color: 'var(--color-primary)', marginRight: 4 }} /> Pipeline Model
+          <div className="mb-md">
+            <label className="form-label text-sm">
+              <i className="fas fa-brain text-primary icon-before" /> Pipeline Model
             </label>
             <ModelSelector
               value={selectedModel}
@@ -681,16 +673,15 @@ export default function Talk() {
               disabled={isConnected}
               searchPlaceholder="Search pipeline models..."
             />
-            <button className="btn btn-secondary btn-sm" onClick={() => navigate('/app/model-editor?template=pipeline', { state: fromState(location, 'Talk') })}
-              style={{ marginTop: 'var(--spacing-xs)' }}>
-              <i className="fas fa-plus" style={{ marginRight: 'var(--spacing-xs)' }} /> Create Pipeline Model
+            <button className="btn btn-secondary btn-sm mt-xs" onClick={() => navigate('/app/model-editor?template=pipeline', { state: fromState(location, 'Talk') })}>
+              <i className="fas fa-plus icon-before" /> Create Pipeline Model
             </button>
           </div>
 
           {/* Tools (client-side MCP servers, mirroring the chat page) */}
-          <div style={{ marginBottom: 'var(--spacing-md)' }}>
-            <label className="form-label" style={{ fontSize: '0.8125rem' }}>
-              <i className="fas fa-screwdriver-wrench" style={{ color: 'var(--color-primary)', marginRight: 4 }} /> Tools
+          <div className="mb-md">
+            <label className="form-label text-sm">
+              <i className="fas fa-screwdriver-wrench text-primary icon-before" /> Tools
             </label>
             <ClientMCPDropdown
               activeServerIds={activeMCPIds}
@@ -701,21 +692,16 @@ export default function Talk() {
               getConnectedTools={getConnectedTools}
             />
             {isAdmin && (
-              <label style={{
-                display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)',
-                marginTop: 'var(--spacing-xs)', fontSize: '0.8125rem',
-                cursor: isConnected ? 'not-allowed' : 'pointer',
-                color: isConnected ? 'var(--color-text-secondary)' : 'var(--color-text)',
-              }}>
+              <label className={`talk-check mt-xs${isConnected ? ' talk-check--locked' : ''}`}>
                 <input
                   type="checkbox"
                   checked={manageMode}
                   disabled={isConnected}
                   onChange={(e) => setManageMode(e.target.checked)}
                 />
-                <i className="fas fa-user-shield" style={{ color: 'var(--color-primary)' }} />
+                <i className="fas fa-user-shield text-primary" />
                 Manage Mode
-                <span style={{ color: 'var(--color-text-secondary)', fontSize: '0.75rem' }}>
+                <span className="text-secondary text-xs">
                   — let the model query LocalAI (models, backends, system info)
                 </span>
               </label>
@@ -724,112 +710,83 @@ export default function Talk() {
 
           {/* Pipeline details */}
           {selectedModelInfo && selectedModelInfo.self_contained && (
-            <div style={{
-              background: 'var(--color-bg-secondary)', borderRadius: 'var(--radius-sm)',
-              padding: 'var(--spacing-xs) var(--spacing-sm)', border: '1px solid var(--color-border)',
-              marginBottom: 'var(--spacing-xs)', fontSize: '0.75rem',
-              display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)',
-            }}>
-              <i className="fas fa-tower-broadcast" style={{ color: 'var(--color-primary)' }} />
-              <span style={{ color: 'var(--color-text-secondary)' }}>Self-contained any-to-any —</span>
-              <span style={{ fontFamily: 'var(--font-mono)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            <div className="talk-chip mb-xs">
+              <i className="fas fa-tower-broadcast text-primary" />
+              <span className="text-secondary">Self-contained any-to-any —</span>
+              <span className="text-mono cell-clip">
                 {selectedModelInfo.name}
               </span>
-              <span style={{ color: 'var(--color-text-secondary)', marginLeft: 'auto' }}>handles VAD · STT · LLM · TTS</span>
+              <span className="text-secondary ml-auto">handles VAD · STT · LLM · TTS</span>
             </div>
           )}
           {selectedModelInfo && !selectedModelInfo.self_contained && (
-            <div style={{
-              display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)',
-              marginBottom: 'var(--spacing-xs)', fontSize: '0.75rem',
-            }}>
+            <div className="talk-slots mb-xs">
               {[
                 { label: 'VAD', value: selectedModelInfo.vad },
                 { label: 'Transcription', value: selectedModelInfo.transcription },
                 { label: 'LLM', value: selectedModelInfo.llm },
                 { label: 'TTS', value: selectedModelInfo.tts },
               ].map(item => (
-                <div key={item.label} style={{
-                  background: 'var(--color-bg-secondary)', borderRadius: 'var(--radius-sm)',
-                  padding: 'var(--spacing-xs)', border: '1px solid var(--color-border)',
-                  display: 'flex', alignItems: 'baseline', gap: 'var(--spacing-sm)',
-                }}>
-                  <div style={{ color: 'var(--color-text-secondary)', whiteSpace: 'nowrap' }}>{item.label}</div>
+                <div key={item.label} className="talk-slot">
+                  <div className="text-secondary nowrap">{item.label}</div>
                   {/* full width for the value; wrap rather than overflow when the
                       model name is long (minWidth:0 lets the flex item shrink) */}
-                  <div style={{ fontFamily: 'var(--font-mono)', minWidth: 0, marginLeft: 'auto', textAlign: 'right', overflowWrap: 'anywhere' }}>{item.value || '—'}</div>
+                  <div className="talk-slot__value">{item.value || '—'}</div>
                 </div>
               ))}
             </div>
           )}
           {selectedModelInfo && !isConnected && (
-            <div style={{ marginBottom: 'var(--spacing-md)' }}>
+            <div className="mb-md">
               <button className="btn btn-secondary btn-sm" onClick={() => navigate(`/app/model-editor/${encodeURIComponent(selectedModel)}`, { state: fromState(location, 'Talk') })}>
-                <i className="fas fa-pen-to-square" style={{ marginRight: 'var(--spacing-xs)' }} />
+                <i className="fas fa-pen-to-square icon-before" />
                 {selectedModelInfo.self_contained ? ' Edit Model Config' : ' Edit Pipeline'}
               </button>
             </div>
           )}
 
           {/* Session settings */}
-          <details style={{
-            marginBottom: 'var(--spacing-md)', border: '1px solid var(--color-border)',
-            borderRadius: 'var(--radius-md)',
-          }}>
-            <summary style={{
-              cursor: 'pointer', padding: 'var(--spacing-sm) var(--spacing-md)',
-              fontWeight: 500, color: 'var(--color-text-secondary)', fontSize: '0.875rem',
-            }}>
-              <i className="fas fa-sliders" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} />
+          <details className="talk-details mb-md">
+            <summary>
+              <i className="fas fa-sliders text-primary icon-before" />
               Session Settings
             </summary>
-            <div style={{ padding: 'var(--spacing-md)', paddingTop: 'var(--spacing-xs)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-sm)' }}>
-              <div className="form-group" style={{ margin: 0 }}>
-                <label className="form-label" style={{ fontSize: '0.75rem' }}>Instructions</label>
+            <div className="talk-details__body">
+              <div className="form-group m-0">
+                <label className="form-label text-xs">Instructions</label>
                 <textarea
-                  className="textarea"
+                  className="textarea text-sm"
                   rows={3}
                   value={instructions}
                   onChange={e => setInstructions(e.target.value)}
                   placeholder="System instructions for the model"
-                  style={{ fontSize: '0.8125rem' }}
                 />
               </div>
-              <div className="form-group" style={{ margin: 0 }}>
-                <label className="form-label" style={{ fontSize: '0.75rem' }}>Voice</label>
+              <div className="form-group m-0">
+                <label className="form-label text-xs">Voice</label>
                 <input
-                  className="input"
+                  className="input text-sm"
                   value={voice}
                   onChange={e => { setVoice(e.target.value); setVoiceEdited(true) }}
                   placeholder="Voice name (leave blank for model default)"
-                  style={{ fontSize: '0.8125rem' }}
                 />
               </div>
-              <div className="form-group" style={{ margin: 0 }}>
-                <label className="form-label" style={{ fontSize: '0.75rem' }}>Transcription Language</label>
+              <div className="form-group m-0">
+                <label className="form-label text-xs">Transcription Language</label>
                 <input
-                  className="input"
+                  className="input text-sm"
                   value={language}
                   onChange={e => setLanguage(e.target.value)}
                   placeholder="Language code (e.g. 'en') — leave blank for auto-detect"
-                  style={{ fontSize: '0.8125rem' }}
                 />
               </div>
             </div>
           </details>
 
           {/* Transcript */}
-          <div style={{
-            marginBottom: 'var(--spacing-md)',
-            maxHeight: '24rem', overflowY: 'auto', minHeight: '6rem',
-            padding: 'var(--spacing-sm)',
-            background: 'var(--color-bg-secondary)',
-            border: '1px solid var(--color-border)',
-            borderRadius: 'var(--radius-md)',
-            display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)',
-          }}>
+          <div className="talk-transcript mb-md">
             {transcript.length === 0 && (
-              <p style={{ color: 'var(--color-text-secondary)', fontStyle: 'italic', margin: 0 }}>
+              <p className="text-secondary text-italic m-0">
                 Conversation will appear here...
               </p>
             )}
@@ -843,15 +800,9 @@ export default function Talk() {
               const iconColor = isToolCall || isToolResult ? 'var(--color-text-secondary)'
                               : isUser ? 'var(--color-primary)' : 'var(--color-accent)'
               return (
-                <div key={entry.id || i} style={{ display: 'flex', alignItems: 'flex-start', gap: 'var(--spacing-xs)' }}>
-                  <i className={iconClass} style={{ color: iconColor, marginTop: 3, flexShrink: 0, fontSize: '0.75rem' }} />
-                  <p style={{
-                    margin: 0,
-                    fontFamily: (isToolCall || isToolResult) ? 'var(--font-mono)' : undefined,
-                    fontSize: (isToolCall || isToolResult) ? '0.8125rem' : undefined,
-                    color: (isToolCall || isToolResult) ? 'var(--color-text-secondary)' : undefined,
-                    whiteSpace: isToolResult ? 'pre-wrap' : undefined,
-                  }}>{entry.text}</p>
+                <div key={entry.id || i} className="talk-line">
+                  <i className={`${iconClass} talk-line__icon`} style={{ color: iconColor }} />
+                  <p className={`talk-line__text${(isToolCall || isToolResult) ? ' talk-line__text--tool' : ''}${isToolResult ? ' talk-line__text--result' : ''}`}>{entry.text}</p>
                 </div>
               )
             })}
@@ -859,62 +810,55 @@ export default function Talk() {
           </div>
 
           {/* Buttons */}
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
+          <div className="hstack hstack--between">
+            <div className="hstack">
               {!isConnected ? (
                 <button className="btn btn-primary" onClick={connect} disabled={modelsLoading || !selectedModel}>
-                  <i className="fas fa-plug" style={{ marginRight: 'var(--spacing-xs)' }} /> Connect
+                  <i className="fas fa-plug icon-before" /> Connect
                 </button>
               ) : (
                 <>
-                  <button className="btn" onClick={sendTestTone}
-                    style={{ background: 'var(--color-accent)', color: 'var(--color-primary-text)', border: 'none' }}>
-                    <i className="fas fa-wave-square" style={{ marginRight: 'var(--spacing-xs)' }} /> Test Tone
+                  <button className="btn btn--accent" onClick={sendTestTone}>
+                    <i className="fas fa-wave-square icon-before" /> Test Tone
                   </button>
                   <button className="btn btn-secondary" onClick={toggleDiagnostics}>
-                    <i className="fas fa-chart-line" style={{ marginRight: 'var(--spacing-xs)' }} /> Diag
+                    <i className="fas fa-chart-line icon-before" /> Diag
                   </button>
                 </>
               )}
             </div>
             {isConnected && (
-              <button className="btn" onClick={disconnect}
-                style={{ background: 'var(--color-error)', color: 'var(--color-text-inverse)', border: 'none' }}>
-                <i className="fas fa-plug-circle-xmark" style={{ marginRight: 'var(--spacing-xs)' }} /> Disconnect
+              <button className="btn btn--error" onClick={disconnect}>
+                <i className="fas fa-plug-circle-xmark icon-before" /> Disconnect
               </button>
             )}
           </div>
 
           {/* Hidden audio element for WebRTC playback */}
-          <audio ref={audioRef} autoPlay style={{ display: 'none' }} />
+          <audio ref={audioRef} autoPlay className="hidden" />
 
           {/* Diagnostics panel */}
           {diagVisible && (
-            <div style={{
-              marginTop: 'var(--spacing-md)',
-              border: '1px solid var(--color-border)',
-              borderRadius: 'var(--radius-md)',
-              padding: 'var(--spacing-md)',
-            }}>
-              <h3 style={{ fontSize: '0.875rem', fontWeight: 600, marginBottom: 'var(--spacing-sm)' }}>
-                <i className="fas fa-chart-line" style={{ color: 'var(--color-primary)', marginRight: 'var(--spacing-xs)' }} />
+            <div className="talk-diag mt-md">
+              <h3 className="text-base fw-semibold mb-sm">
+                <i className="fas fa-chart-line text-primary icon-before" />
                 Audio Diagnostics
               </h3>
 
-              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-sm)' }}>
+              <div className="talk-split mb-sm">
                 <div>
-                  <p style={{ fontSize: '0.6875rem', color: 'var(--color-text-secondary)', marginBottom: 2 }}>Waveform</p>
+                  <p className="text-xs text-secondary mb-xs">Waveform</p>
                   <canvas ref={waveCanvasRef} width={400} height={120}
-                    style={{ width: '100%', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)', background: 'var(--color-surface-sunken)' }} />
+                    className="talk-canvas" />
                 </div>
                 <div>
-                  <p style={{ fontSize: '0.6875rem', color: 'var(--color-text-secondary)', marginBottom: 2 }}>Spectrum (FFT)</p>
+                  <p className="text-xs text-secondary mb-xs">Spectrum (FFT)</p>
                   <canvas ref={specCanvasRef} width={400} height={120}
-                    style={{ width: '100%', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)', background: 'var(--color-surface-sunken)' }} />
+                    className="talk-canvas" />
                 </div>
               </div>
 
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--spacing-xs)', marginBottom: 'var(--spacing-sm)', fontSize: '0.75rem' }}>
+              <div className="talk-diag__grid mb-sm">
                 {[
                   { label: 'Peak Freq', value: diagStats.peakFreq },
                   { label: 'THD', value: diagStats.thd },
@@ -925,21 +869,14 @@ export default function Talk() {
                   { label: 'Jitter', value: diagStats.jitter },
                   { label: 'Concealed', value: diagStats.concealed },
                 ].map(item => (
-                  <div key={item.label} style={{
-                    background: 'var(--color-bg-secondary)', borderRadius: 'var(--radius-sm)', padding: 'var(--spacing-xs)',
-                  }}>
-                    <div style={{ color: 'var(--color-text-secondary)', fontSize: '0.6875rem' }}>{item.label}</div>
-                    <div style={{ fontFamily: 'var(--font-mono)' }}>{item.value}</div>
+                  <div key={item.label} className="talk-diag__cell">
+                    <div className="text-secondary text-xs">{item.label}</div>
+                    <div className="text-mono">{item.value}</div>
                   </div>
                 ))}
               </div>
 
-              <pre style={{
-                fontSize: '0.6875rem', color: 'var(--color-text-secondary)',
-                background: 'var(--color-bg-secondary)', borderRadius: 'var(--radius-sm)',
-                padding: 'var(--spacing-xs)', maxHeight: '8rem', overflowY: 'auto',
-                fontFamily: 'var(--font-mono)', whiteSpace: 'pre-wrap', margin: 0,
-              }}>
+              <pre className="talk-diag__raw">
                 {diagStats.raw || 'Waiting for stats...'}
               </pre>
             </div>
diff --git a/core/http/react-ui/src/pages/Traces.jsx b/core/http/react-ui/src/pages/Traces.jsx
index fc9d50beaac5..f1bfc76bd774 100644
--- a/core/http/react-ui/src/pages/Traces.jsx
+++ b/core/http/react-ui/src/pages/Traces.jsx
@@ -137,21 +137,21 @@ function AudioSnippet({ data }) {
     { label: 'DC Offset', value: data.audio_dc_offset },
   ]
   return (
-    <div style={{ marginBottom: 'var(--spacing-md)' }}>
-      <h4 style={{ fontSize: '0.8125rem', fontWeight: 600, marginBottom: 'var(--spacing-xs)', display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)' }}>
-        <i className="fas fa-headphones" style={{ color: 'var(--color-primary)' }} /> Audio Snippet
+    <div className="mb-md">
+      <h4 className="hstack hstack--xs text-sm fw-semibold mb-xs">
+        <i className="fas fa-headphones text-primary" /> Audio Snippet
       </h4>
-      <div style={{ background: 'var(--color-bg-primary)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-md)', padding: 'var(--spacing-sm)' }}>
+      <div className="tr-well">
         {audioUrl
           ? <WaveformPlayer src={audioUrl} height={64} />
-          : <div data-testid="audio-snippet-unavailable" style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)', padding: 'var(--spacing-xs)' }}>
+          : <div data-testid="audio-snippet-unavailable" className="text-xs text-secondary pad-xs">
               <i className="fas fa-triangle-exclamation" /> Audio clip not playable — it was truncated when recorded (raise Max Body Bytes in the tracing settings).
             </div>}
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: 'var(--spacing-xs)', fontSize: '0.75rem', marginTop: 'var(--spacing-sm)' }}>
+        <div className="tr-metrics mt-sm">
           {metrics.map(m => (
-            <div key={m.label} style={{ background: 'var(--color-bg-secondary)', borderRadius: 'var(--radius-sm)', padding: 'var(--spacing-xs)' }}>
-              <div style={{ color: 'var(--color-text-secondary)' }}>{m.label}</div>
-              <div style={{ fontFamily: 'var(--font-mono)' }}>{m.value}</div>
+            <div key={m.label} className="tr-metric">
+              <div className="text-secondary">{m.label}</div>
+              <div className="text-mono">{m.value}</div>
             </div>
           ))}
         </div>
@@ -181,47 +181,37 @@ function DataFields({ data, nested }) {
 
   return (
     <div>
-      {!nested && <h4 style={{ fontSize: '0.8125rem', fontWeight: 600, marginBottom: 'var(--spacing-xs)' }}>Data Fields</h4>}
-      <div style={{ border: '1px solid var(--color-border)', borderRadius: 'var(--radius-md)', overflow: 'hidden' }}>
+      {!nested && <h4 className="text-sm fw-semibold mb-xs">Data Fields</h4>}
+      <div className="tr-fields">
         {filtered.map(([key, value]) => {
           const objValue = isPlainObject(value)
           const large = !objValue && isLargeValue(value)
           const expandable = objValue || large
           const expanded = expandedFields[key]
           return (
-            <div key={key} style={{ borderBottom: '1px solid var(--color-border)' }}>
+            <div key={key} className="tr-field">
               <div
                 onClick={expandable ? () => toggleField(key) : undefined}
-                style={{
-                  display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)',
-                  padding: 'var(--spacing-xs) var(--spacing-sm)',
-                  cursor: expandable ? 'pointer' : 'default',
-                  fontSize: '0.8125rem',
-                }}
+                className={`tr-field__head${expandable ? ' tr-field__head--expandable' : ''}`}
               >
                 {expandable ? (
-                  <i className={`fas fa-chevron-${expanded ? 'down' : 'right'}`} style={{ fontSize: '0.6rem', color: 'var(--color-text-secondary)', width: 12, flexShrink: 0 }} />
+                  <i className={`fas fa-chevron-${expanded ? 'down' : 'right'} tr-field__chevron`} />
                 ) : (
-                  <span style={{ width: 12, flexShrink: 0 }} />
+                  <span className="tr-field__chevron" />
                 )}
-                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-primary)', flexShrink: 0 }}>{key}</span>
-                {objValue && !expanded && <span style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)' }}>{fieldSummary(value)}</span>}
-                {!objValue && !large && <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--color-text-secondary)' }}>{formatValue(value)}</span>}
-                {!objValue && large && !expanded && <span style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{truncateValue(value, 120)}</span>}
+                <span className="tr-field__key">{key}</span>
+                {objValue && !expanded && <span className="text-xs text-secondary">{fieldSummary(value)}</span>}
+                {!objValue && !large && <span className="text-mono text-xs text-secondary">{formatValue(value)}</span>}
+                {!objValue && large && !expanded && <span className="text-xs text-secondary cell-clip">{truncateValue(value, 120)}</span>}
               </div>
               {expanded && objValue && (
-                <div style={{ padding: '0 0 var(--spacing-xs) var(--spacing-md)' }}>
+                <div className="tr-field__nested">
                   <DataFields data={value} nested />
                 </div>
               )}
               {expanded && large && (
-                <div style={{ padding: '0 var(--spacing-sm) var(--spacing-sm)' }}>
-                  <pre style={{
-                    background: 'var(--color-bg-primary)', border: '1px solid var(--color-border)',
-                    borderRadius: 'var(--radius-sm)', padding: 'var(--spacing-sm)',
-                    fontSize: '0.75rem', fontFamily: 'var(--font-mono)', whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-                    overflow: 'auto', maxHeight: '50vh', margin: 0,
-                  }}>
+                <div className="tr-field__body">
+                  <pre className="tr-code">
                     {formatLargeValue(value)}
                   </pre>
                 </div>
@@ -244,26 +234,22 @@ function BackendTraceDetail({ trace }) {
   ]
 
   return (
-    <div style={{ padding: 'var(--spacing-md)', background: 'var(--color-bg-secondary)', borderBottom: '1px solid var(--color-border)' }}>
+    <div className="tr-panel">
       {/* Summary cards */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--spacing-xs)', marginBottom: 'var(--spacing-md)', fontSize: '0.75rem' }}>
+      <div className="tr-metrics tr-metrics--fixed mb-md">
         {infoItems.map(item => (
-          <div key={item.label} style={{ background: 'var(--color-bg-primary)', borderRadius: 'var(--radius-sm)', padding: 'var(--spacing-xs)', border: '1px solid var(--color-border)' }}>
-            <div style={{ color: 'var(--color-text-secondary)' }}>{item.label}</div>
-            <div style={{ fontWeight: 500 }}>{item.label === 'Type' ? <span style={typeBadgeStyle(item.value)}>{item.value}</span> : item.value}</div>
+          <div key={item.label} className="tr-metric tr-metric--outlined">
+            <div className="text-secondary">{item.label}</div>
+            <div className="fw-medium">{item.label === 'Type' ? <span style={typeBadgeStyle(item.value)}>{item.value}</span> : item.value}</div>
           </div>
         ))}
       </div>
 
       {/* Error banner */}
       {trace.error && (
-        <div style={{
-          background: 'var(--color-error-light)', border: '1px solid var(--color-error-border)',
-          borderRadius: 'var(--radius-md)', padding: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)',
-          display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)',
-        }}>
-          <i className="fas fa-exclamation-triangle" style={{ color: 'var(--color-error)' }} />
-          <span style={{ color: 'var(--color-error)', fontSize: '0.8125rem' }}>{trace.error}</span>
+        <div className="tr-error mb-md">
+          <i className="fas fa-exclamation-triangle text-error" />
+          <span className="text-error text-sm">{trace.error}</span>
         </div>
       )}
 
@@ -272,10 +258,10 @@ function BackendTraceDetail({ trace }) {
           it resolves the model to the host worker(s) and either redirects to
           /app/node-backend-logs/<nodeId>/<modelId> or shows a node picker. */}
       {trace.model_name && (
-        <div style={{ marginBottom: 'var(--spacing-md)' }}>
+        <div className="mb-md">
           <a
             href={`/app/backend-logs/${encodeURIComponent(trace.model_name)}${trace.timestamp ? `?from=${encodeURIComponent(trace.timestamp)}` : ''}`}
-            style={{ fontSize: '0.8125rem', color: 'var(--color-primary)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 'var(--spacing-xs)' }}
+            className="hstack hstack--xs text-sm text-primary"
           >
             <i className="fas fa-terminal" /> View backend logs
           </a>
@@ -289,14 +275,9 @@ function BackendTraceDetail({ trace }) {
           payload here (capped to ~1MB upstream); pretty-print when
           it parses as JSON, otherwise show the raw text. */}
       {trace.body && (
-        <div style={{ marginBottom: 'var(--spacing-md)' }}>
-          <h4 style={{ fontSize: '0.8125rem', fontWeight: 600, marginBottom: 'var(--spacing-xs)' }}>Request Body</h4>
-          <pre style={{
-            background: 'var(--color-bg-primary)', border: '1px solid var(--color-border)',
-            borderRadius: 'var(--radius-sm)', padding: 'var(--spacing-sm)',
-            fontSize: '0.75rem', fontFamily: 'var(--font-mono)', whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-            overflow: 'auto', maxHeight: '50vh', margin: 0,
-          }}>
+        <div className="mb-md">
+          <h4 className="text-sm fw-semibold mb-xs">Request Body</h4>
+          <pre className="tr-code">
             {formatLargeValue(trace.body)}
           </pre>
         </div>
@@ -317,50 +298,33 @@ function ApiTraceDetail({ trace }) {
     ['User Agent', trace.user_agent],
   ].filter(([, v]) => v)
   return (
-    <div style={{ padding: 'var(--spacing-md)', background: 'var(--color-bg-secondary)', borderBottom: '1px solid var(--color-border)' }}>
+    <div className="tr-panel">
       {meta.length > 0 && (
-        <div style={{
-          display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '0.25rem var(--spacing-md)',
-          alignItems: 'baseline', marginBottom: 'var(--spacing-md)', fontSize: '0.8125rem',
-        }}>
+        <div className="tr-meta-grid mb-md">
           {meta.map(([label, value]) => (
             <React.Fragment key={label}>
-              <span style={{ fontWeight: 600, color: 'var(--color-text-secondary)' }}>{label}</span>
-              <span style={{ fontFamily: 'var(--font-mono)', wordBreak: 'break-all' }}>{value}</span>
+              <span className="fw-semibold text-secondary">{label}</span>
+              <span className="text-mono wrap-anywhere">{value}</span>
             </React.Fragment>
           ))}
         </div>
       )}
       {trace.error && (
-        <div style={{
-          background: 'var(--color-error-light)', border: '1px solid var(--color-error-border)',
-          borderRadius: 'var(--radius-md)', padding: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)',
-          display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)',
-        }}>
-          <i className="fas fa-exclamation-triangle" style={{ color: 'var(--color-error)' }} />
-          <span style={{ color: 'var(--color-error)', fontSize: '0.8125rem', fontFamily: 'var(--font-mono)', wordBreak: 'break-all' }}>{trace.error}</span>
+        <div className="tr-error mb-md">
+          <i className="fas fa-exclamation-triangle text-error" />
+          <span className="text-error text-sm text-mono wrap-anywhere">{trace.error}</span>
         </div>
       )}
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-md)' }}>
+      <div className="tr-split">
         <div>
-          <h4 style={{ fontSize: '0.8125rem', fontWeight: 600, marginBottom: 'var(--spacing-xs)' }}>Request Body</h4>
-          <pre style={{
-            background: 'var(--color-bg-primary)', border: '1px solid var(--color-border)',
-            borderRadius: 'var(--radius-sm)', padding: 'var(--spacing-sm)',
-            fontSize: '0.75rem', fontFamily: 'var(--font-mono)', whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-            overflow: 'auto', maxHeight: '50vh', margin: 0,
-          }}>
+          <h4 className="text-sm fw-semibold mb-xs">Request Body</h4>
+          <pre className="tr-code">
             {decodeTraceBody(trace.request?.body)}
           </pre>
         </div>
         <div>
-          <h4 style={{ fontSize: '0.8125rem', fontWeight: 600, marginBottom: 'var(--spacing-xs)' }}>Response Body</h4>
-          <pre style={{
-            background: 'var(--color-bg-primary)', border: '1px solid var(--color-border)',
-            borderRadius: 'var(--radius-sm)', padding: 'var(--spacing-sm)',
-            fontSize: '0.75rem', fontFamily: 'var(--font-mono)', whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-            overflow: 'auto', maxHeight: '50vh', margin: 0,
-          }}>
+          <h4 className="text-sm fw-semibold mb-xs">Response Body</h4>
+          <pre className="tr-code">
             {decodeTraceBody(trace.response?.body)}
           </pre>
         </div>
@@ -407,9 +371,9 @@ export default function Traces() {
       aria-sort={sort.key === key ? (sort.dir === 'asc' ? 'ascending' : 'descending') : 'none'}
       onClick={() => toggleSort(key)}
       onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleSort(key) } }}
-      style={{ cursor: 'pointer', userSelect: 'none', ...(props.style || {}) }}
+      className="sortable-th" style={props.style}
     >
-      {label}{sort.key === key && <i className={`fas fa-caret-${sort.dir === 'asc' ? 'up' : 'down'}`} style={{ marginLeft: 4, opacity: 0.7 }} aria-hidden="true" />}
+      {label}{sort.key === key && <i className={`fas fa-caret-${sort.dir === 'asc' ? 'up' : 'down'} ml-xs op-70`} aria-hidden="true" />}
     </th>
   )
   const [backendLoggingEnabled, setBackendLoggingEnabled] = useState(null)
@@ -548,21 +512,21 @@ export default function Traces() {
 
       <div className="tabs">
         <button className={`tab ${activeTab === 'api' ? 'tab-active' : ''}`} onClick={() => setActiveTab('api')}>
-          <i className="fas fa-exchange-alt" style={{ marginRight: 'var(--spacing-xs)', fontSize: '0.75rem' }} />
+          <i className="fas fa-exchange-alt icon-before text-xs" />
           API Traces
-          <span style={{ marginLeft: 'var(--spacing-xs)', opacity: 0.6, fontSize: '0.75rem' }}>({apiCount})</span>
+          <span className="ml-xs op-60 text-xs">({apiCount})</span>
         </button>
         <button className={`tab ${activeTab === 'backend' ? 'tab-active' : ''}`} onClick={() => setActiveTab('backend')}>
-          <i className="fas fa-cogs" style={{ marginRight: 'var(--spacing-xs)', fontSize: '0.75rem' }} />
+          <i className="fas fa-cogs icon-before text-xs" />
           Backend Traces
-          <span style={{ marginLeft: 'var(--spacing-xs)', opacity: 0.6, fontSize: '0.75rem' }}>({backendCount})</span>
+          <span className="ml-xs op-60 text-xs">({backendCount})</span>
         </button>
       </div>
 
-      <div style={{ display: 'flex', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)', alignItems: 'center' }}>
+      <div className="hstack mb-md">
         <button className="btn btn-secondary btn-sm" onClick={fetchTraces}><i className="fas fa-rotate" /> Refresh</button>
         <button className="btn btn-secondary btn-sm" onClick={handleExport} disabled={traces.length === 0}><i className="fas fa-download" /> Export</button>
-        <div style={{ flex: 1 }} />
+        <div className="flex-1" />
         <button
           className="btn btn-danger btn-sm"
           onClick={handleClear}
@@ -577,36 +541,23 @@ export default function Traces() {
       {settings && (() => {
         const allEnabled = tracingEnabled && backendLoggingEnabled
         return (
-        <div style={{
-          border: `1px solid ${allEnabled ? 'var(--color-success-border)' : 'var(--color-warning-border)'}`,
-          borderRadius: 'var(--radius-md)',
-          marginBottom: 'var(--spacing-md)',
-          overflow: 'hidden',
-        }}>
+        <div className={`tr-settings mb-md${allEnabled ? ' tr-settings--ok' : ''}`}>
           <button
             onClick={() => setSettingsExpanded(!settingsExpanded)}
-            style={{
-              width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-              padding: 'var(--spacing-sm) var(--spacing-md)',
-              background: allEnabled ? 'var(--color-success-light)' : 'var(--color-warning-light)',
-              border: 'none', cursor: 'pointer',
-              color: 'var(--color-text-primary)',
-            }}
+            className="tr-settings__toggle"
           >
-            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
-              <i className={`fas ${allEnabled ? 'fa-circle-check' : 'fa-exclamation-triangle'}`}
-                style={{ color: allEnabled ? 'var(--color-success)' : 'var(--color-warning)', flexShrink: 0 }} />
-              <span style={{ fontSize: '0.8125rem', textAlign: 'left' }}>
+            <div className="hstack">
+              <i className={`fas ${allEnabled ? 'fa-circle-check' : 'fa-exclamation-triangle'} shrink-0 ${allEnabled ? 'text-success' : 'text-warning'}`} />
+              <span className="text-sm text-left">
                 Tracing is <strong>{tracingEnabled ? 'enabled' : 'disabled'}</strong>
                 {' · Backend logging is '}<strong>{backendLoggingEnabled ? 'enabled' : 'disabled'}</strong>
                 {!tracingEnabled && ' — new requests will not be recorded'}
               </span>
             </div>
-            <i className={`fas fa-chevron-${settingsExpanded ? 'up' : 'down'}`}
-              style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', flexShrink: 0 }} />
+            <i className={`fas fa-chevron-${settingsExpanded ? 'up' : 'down'} text-meta shrink-0`} />
           </button>
           {settingsExpanded && (
-            <div style={{ padding: '0 var(--spacing-md) var(--spacing-md)', background: 'var(--color-bg-secondary)', borderTop: '1px solid var(--color-border-subtle)' }}>
+            <div className="tr-settings__body">
               <SettingRow label="Enable Tracing" description="Record API requests, responses, and backend operations">
                 <Toggle
                   checked={settings.enable_tracing}
@@ -615,9 +566,8 @@ export default function Traces() {
               </SettingRow>
               <SettingRow label="Max Items" description="Maximum trace items to retain (0 = unlimited)">
                 <input
-                  className="input"
+                  className="input col-w-120"
                   type="number"
-                  style={{ width: 120 }}
                   value={settings.tracing_max_items ?? ''}
                   onChange={(e) => setSettings(prev => ({ ...prev, tracing_max_items: parseInt(e.target.value) || 0 }))}
                   placeholder="100"
@@ -626,9 +576,8 @@ export default function Traces() {
               </SettingRow>
               <SettingRow label="Max Body Bytes" description="Per-field cap for captured bodies and backend trace Data (0 = uncapped). Prevents oversized LLM histories or TTS snippets from locking this page in loading.">
                 <input
-                  className="input"
+                  className="input col-w-120"
                   type="number"
-                  style={{ width: 120 }}
                   value={settings.tracing_max_body_bytes ?? ''}
                   onChange={(e) => setSettings(prev => ({ ...prev, tracing_max_body_bytes: parseInt(e.target.value) || 0 }))}
                   placeholder="65536"
@@ -641,7 +590,7 @@ export default function Traces() {
                   onChange={(v) => setSettings(prev => ({ ...prev, enable_backend_logging: v }))}
                 />
               </SettingRow>
-              <div className="form-group__actions" style={{ justifyContent: 'flex-end' }}>
+              <div className="form-group__actions hstack--end">
                 <button className="btn btn-primary btn-sm" onClick={handleSaveSettings} disabled={saving}>
                   {saving ? <><LoadingSpinner size="sm" /> Saving...</> : <><i className="fas fa-save" /> Save</>}
                 </button>
@@ -653,7 +602,7 @@ export default function Traces() {
       })()}
 
       {loading ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}><LoadingSpinner size="lg" /></div>
+        <div className="loading-center"><LoadingSpinner size="lg" /></div>
       ) : traces.length === 0 ? (
         <div className="empty-state">
           <div className="empty-state-icon"><i className="fas fa-wave-square" /></div>
@@ -676,32 +625,32 @@ export default function Traces() {
         <ResponsiveTable>
             <thead>
               <tr>
-                <th style={{ width: '30px' }}></th>
+                <th className="col-w-30"></th>
                 {sortableTh('method', 'Method')}
                 {sortableTh('path', 'Path')}
                 {sortableTh('user', 'User')}
                 {sortableTh('status', 'Status')}
-                <th style={{ width: '40px' }}>Result</th>
+                <th className="col-w-40">Result</th>
               </tr>
             </thead>
             <tbody>
               {sortedTraces.map((trace, i) => (
                 <React.Fragment key={i}>
-                  <tr onClick={() => toggleRow(i, trace)} style={{ cursor: 'pointer' }}>
-                    <td><i className={`fas fa-chevron-${expandedRow === i ? 'down' : 'right'}`} style={{ fontSize: '0.7rem' }} /></td>
+                  <tr onClick={() => toggleRow(i, trace)} className="clickable">
+                    <td><i className={`fas fa-chevron-${expandedRow === i ? 'down' : 'right'} text-xs`} /></td>
                     <td><span className="badge badge-info">{trace.request?.method || '-'}</span></td>
-                    <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}>{trace.request?.path || '-'}</td>
-                    <td style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)', maxWidth: '160px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={trace.user_name || trace.user_id || ''}>{trace.user_name || trace.user_id || '-'}</td>
+                    <td className="text-mono text-sm">{trace.request?.path || '-'}</td>
+                    <td className="text-sub cell-clip" title={trace.user_name || trace.user_id || ''}>{trace.user_name || trace.user_id || '-'}</td>
                     <td><span className={`badge ${(trace.response?.status || 0) < 400 ? 'badge-success' : 'badge-error'}`}>{trace.response?.status || '-'}</span></td>
-                    <td style={{ textAlign: 'center' }}>
+                    <td className="text-center">
                       {trace.error
-                        ? <i className="fas fa-times-circle" style={{ color: 'var(--color-error)' }} title={trace.error} />
-                        : <i className="fas fa-check-circle" style={{ color: 'var(--color-success)' }} />}
+                        ? <i className="fas fa-times-circle text-error" title={trace.error} />
+                        : <i className="fas fa-check-circle text-success" />}
                     </td>
                   </tr>
                   {expandedRow === i && (
                     <tr>
-                      <td colSpan="6" style={{ padding: 0 }}>
+                      <td colSpan="6" className="p-0">
                         <ApiTraceDetail trace={detail && detail.id === trace.id ? detail : trace} />
                       </td>
                     </tr>
@@ -714,36 +663,36 @@ export default function Traces() {
         <ResponsiveTable>
             <thead>
               <tr>
-                <th style={{ width: '30px' }}></th>
+                <th className="col-w-30"></th>
                 {sortableTh('type', 'Type')}
                 {sortableTh('time', 'Time')}
                 {sortableTh('model', 'Model')}
                 <th>Summary</th>
                 {sortableTh('duration', 'Duration')}
-                <th style={{ width: '40px' }}>Status</th>
+                <th className="col-w-40">Status</th>
               </tr>
             </thead>
             <tbody>
               {sortedTraces.map((trace, i) => (
                 <React.Fragment key={i}>
-                  <tr onClick={() => toggleRow(i, trace)} style={{ cursor: 'pointer' }}>
-                    <td><i className={`fas fa-chevron-${expandedRow === i ? 'down' : 'right'}`} style={{ fontSize: '0.7rem' }} /></td>
+                  <tr onClick={() => toggleRow(i, trace)} className="clickable">
+                    <td><i className={`fas fa-chevron-${expandedRow === i ? 'down' : 'right'} text-xs`} /></td>
                     <td><span style={typeBadgeStyle(trace.type)}>{trace.type || '-'}</span></td>
-                    <td style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)', whiteSpace: 'nowrap' }}>{formatDateTime(trace.timestamp)}</td>
-                    <td style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }}>{trace.model_name || '-'}</td>
-                    <td style={{ maxWidth: '300px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    <td className="text-sub nowrap">{formatDateTime(trace.timestamp)}</td>
+                    <td className="text-mono text-sm">{trace.model_name || '-'}</td>
+                    <td className="cell-clip cell-clip--wide">
                       {trace.summary || '-'}
                     </td>
-                    <td style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>{formatDuration(trace.duration)}</td>
-                    <td style={{ textAlign: 'center' }}>
+                    <td className="text-sub">{formatDuration(trace.duration)}</td>
+                    <td className="text-center">
                       {trace.error
-                        ? <i className="fas fa-times-circle" style={{ color: 'var(--color-error)' }} title={trace.error} />
-                        : <i className="fas fa-check-circle" style={{ color: 'var(--color-success)' }} />}
+                        ? <i className="fas fa-times-circle text-error" title={trace.error} />
+                        : <i className="fas fa-check-circle text-success" />}
                     </td>
                   </tr>
                   {expandedRow === i && (
                     <tr>
-                      <td colSpan="7" style={{ padding: 0 }}>
+                      <td colSpan="7" className="p-0">
                         <BackendTraceDetail trace={detail && detail.id === trace.id ? detail : trace} />
                       </td>
                     </tr>
diff --git a/core/http/react-ui/src/pages/Usage.jsx b/core/http/react-ui/src/pages/Usage.jsx
index a7a38ca46686..8b8d7df77f61 100644
--- a/core/http/react-ui/src/pages/Usage.jsx
+++ b/core/http/react-ui/src/pages/Usage.jsx
@@ -56,12 +56,12 @@ function formatCost(n) {
 
 function StatCard({ icon, label, value, muted, text }) {
   return (
-    <div className="card" style={{ padding: 'var(--spacing-sm) var(--spacing-md)', flex: '1 1 0', minWidth: 120, opacity: muted ? 0.7 : 1 }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
-        <i className={icon} style={{ color: 'var(--color-text-muted)', fontSize: '0.75rem' }} />
-        <span style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.03em' }}>{label}</span>
+    <div className={`card usage-tile${muted ? ' usage-tile--muted' : ''}`}>
+      <div className="hstack hstack--xs mb-xs">
+        <i className={`${icon} text-meta`} />
+        <span className="overline fw-medium">{label}</span>
       </div>
-      <div style={{ fontSize: '1.375rem', fontWeight: 700, fontFamily: 'var(--font-mono)', color: muted ? 'var(--color-text-secondary)' : 'var(--color-text-primary)' }}>
+      <div className="usage-tile__value">
         {text != null ? text : `${muted ? '~' : ''}${formatNumber(value)}`}
       </div>
     </div>
@@ -71,16 +71,8 @@ function StatCard({ icon, label, value, muted, text }) {
 function UsageBar({ value, max }) {
   const pct = max > 0 ? Math.min((value / max) * 100, 100) : 0
   return (
-    <div style={{
-      width: '100%', height: 6, borderRadius: "var(--radius-sm)",
-      background: 'var(--color-bg-primary)',
-      overflow: 'hidden',
-    }}>
-      <div style={{
-        width: `${pct}%`, height: '100%', borderRadius: "var(--radius-sm)",
-        background: 'var(--color-primary)',
-        transition: 'width 0.3s ease',
-      }} />
+    <div className="usage-bar">
+      <div className="usage-bar__fill" style={{ width: `${pct}%` }} />
     </div>
   )
 }
@@ -329,8 +321,8 @@ function computeQuotaExhaustion(quotas, timeSeries, period) {
 function PredictionCards({ predictions, quotaExhaustion, period }) {
   if (!predictions) {
     return (
-      <div className="card" style={{ padding: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)', borderTop: '2px solid var(--color-primary)', borderTopLeftRadius: 0, borderTopRightRadius: 0, opacity: 0.6 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: '0.8125rem', color: 'var(--color-text-muted)' }}>
+      <div className="card usage-panel usage-panel--muted mb-md">
+        <div className="hstack hstack--xs text-note">
           <i className="fas fa-chart-line" />
           <span>Not enough data to predict trends (need at least 2 data points)</span>
         </div>
@@ -342,18 +334,18 @@ function PredictionCards({ predictions, quotaExhaustion, period }) {
   const periodLabel = period === 'all' ? '(next 3 months)' : `end of ${period}`
 
   return (
-    <div style={{ marginBottom: 'var(--spacing-md)' }}>
-      <div className="card" style={{ padding: 'var(--spacing-md)', borderTop: '2px solid var(--color-primary)', borderTopLeftRadius: 0, borderTopRightRadius: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 'var(--spacing-sm)' }}>
-          <i className="fas fa-chart-line" style={{ color: 'var(--color-primary)', fontSize: '0.8125rem' }} />
-          <span style={{ fontSize: '0.875rem', fontWeight: 600, color: 'var(--color-text-primary)' }}>
+    <div className="mb-md">
+      <div className="card usage-panel">
+        <div className="hstack hstack--xs mb-sm">
+          <i className="fas fa-chart-line text-primary text-sm" />
+          <span className="text-base fw-semibold">
             Projected {periodLabel}
           </span>
-          <span style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)', fontStyle: 'italic' }}>
+          <span className="text-meta text-italic">
             based on linear trend
           </span>
         </div>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: 'var(--spacing-sm)' }}>
+        <div className="usage-grid">
           <StatCard icon="fas fa-arrow-right-arrow-left" label="Proj. Requests" value={projectedTotals.request_count} muted />
           <StatCard icon="fas fa-arrow-up" label="Proj. Prompt" value={projectedTotals.prompt_tokens} muted />
           <StatCard icon="fas fa-arrow-down" label="Proj. Completion" value={projectedTotals.completion_tokens} muted />
@@ -362,35 +354,35 @@ function PredictionCards({ predictions, quotaExhaustion, period }) {
       </div>
 
       {quotaExhaustion.length > 0 && (
-        <div className="card" style={{ padding: 'var(--spacing-md)', marginTop: 'var(--spacing-sm)' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 'var(--spacing-sm)' }}>
-            <i className="fas fa-gauge-high" style={{ color: 'var(--color-text-muted)', fontSize: '0.8125rem' }} />
-            <span style={{ fontSize: '0.875rem', fontWeight: 600, color: 'var(--color-text-primary)' }}>Quota forecast</span>
+        <div className="card pad-md mt-sm">
+          <div className="hstack hstack--xs mb-sm">
+            <i className="fas fa-gauge-high text-note" />
+            <span className="text-base fw-semibold">Quota forecast</span>
           </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-sm)' }}>
+          <div className="stack stack--sm">
             {quotaExhaustion.map((q, qi) => (
               <div key={qi}>
-                <div style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--color-text-secondary)', marginBottom: 4 }}>
-                  {q.model} <span style={{ fontWeight: 400, color: 'var(--color-text-muted)' }}>({q.window} window)</span>
+                <div className="text-xs fw-semibold text-secondary mb-xs">
+                  {q.model} <span className="fw-normal text-muted">({q.window} window)</span>
                 </div>
                 {q.items.map((item, ii) => (
-                  <div key={ii} style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 4 }}>
-                    <span style={{ minWidth: 70, fontSize: '0.75rem', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
+                  <div key={ii} className="hstack mb-xs">
+                    <span className="usage-price__label">
                       {item.label}
                     </span>
-                    <div style={{ flex: 1, maxWidth: 200 }}>
+                    <div className="usage-price__input">
                       <UsageBar value={item.current} max={item.max} />
                     </div>
-                    <span style={{ fontSize: '0.75rem', fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', minWidth: 100 }}>
+                    <span className="usage-price__out">
                       {formatNumber(item.current)}/{formatNumber(item.max)}
                     </span>
                     {item.withinLimits ? (
-                      <span style={{ fontSize: '0.6875rem', color: 'var(--color-success, #22c55e)' }}>
-                        <i className="fas fa-check" style={{ marginRight: 4 }} />Within limits
+                      <span className="text-xs text-success">
+                        <i className="fas fa-check icon-before" />Within limits
                       </span>
                     ) : (
-                      <span style={{ fontSize: '0.6875rem', color: 'var(--color-warning, #f59e0b)' }}>
-                        <i className="fas fa-exclamation-triangle" style={{ marginRight: 4 }} />{formatDuration(item.hoursLeft)} left
+                      <span className="text-xs text-warning">
+                        <i className="fas fa-exclamation-triangle icon-before" />{formatDuration(item.hoursLeft)} left
                       </span>
                     )}
                   </div>
@@ -438,26 +430,22 @@ function UsageTimeChart({ data, predictedData, period }) {
   const ticks = [0, 1, 2, 3, 4].map(i => Math.round(maxVal * i / 4))
 
   return (
-    <div className="card" style={{ padding: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)' }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-sm)' }}>
-        <span style={{ fontSize: '0.875rem', fontWeight: 600, color: 'var(--color-text-primary)' }}>Tokens over time</span>
-        <div style={{ display: 'flex', gap: 'var(--spacing-md)', fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
-          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: "var(--radius-sm)", background: 'var(--color-primary)', marginRight: 4, verticalAlign: 'middle' }} />Prompt</span>
-          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: "var(--radius-sm)", background: 'var(--color-data-3)', marginRight: 4, verticalAlign: 'middle' }} />Completion</span>
+    <div className="card pad-md mb-md">
+      <div className="hstack hstack--between mb-sm">
+        <span className="text-base fw-semibold">Tokens over time</span>
+        <div className="chart-legend">
+          <span><span className="legend-dot tone-primary" />Prompt</span>
+          <span><span className="legend-dot tone-data-3" />Completion</span>
           {predictedData && predictedData.length > 0 && (
             <span>
-              <span style={{
-                display: 'inline-block', width: 8, height: 8, borderRadius: "var(--radius-sm)",
-                border: '1.5px dashed var(--color-primary)', background: 'transparent',
-                marginRight: 4, verticalAlign: 'middle', opacity: 0.6,
-              }} />
+              <span className="legend-dot legend-dot--outline tone-primary" />
               Predicted
             </span>
           )}
         </div>
       </div>
-      <div ref={containerRef} style={{ position: 'relative', width: '100%' }}>
-        <svg width={width} height={height} style={{ display: 'block' }}>
+      <div ref={containerRef} className="chart-host">
+        <svg width={width} height={height} className="d-block">
           <g transform={`translate(${margin.left},${margin.top})`}>
             {/* Grid lines and Y labels */}
             {ticks.map((t, i) => {
@@ -465,7 +453,7 @@ function UsageTimeChart({ data, predictedData, period }) {
               return (
                 <g key={i}>
                   <line x1={0} y1={y} x2={chartW} y2={y} stroke="var(--color-border)" strokeOpacity={0.5} strokeDasharray={i === 0 ? 'none' : '3,3'} />
-                  <text x={-8} y={y + 4} textAnchor="end" fontSize="10" fill="var(--color-text-muted)" style={{ fontFamily: 'var(--font-mono)' }}>
+                  <text x={-8} y={y + 4} textAnchor="end" fontSize="10" fill="var(--color-text-muted)" className="text-mono">
                     {formatYLabel(t)}
                   </text>
                 </g>
@@ -495,7 +483,7 @@ function UsageTimeChart({ data, predictedData, period }) {
                     } : null)
                   }}
                   onMouseLeave={() => setTooltip(null)}
-                  style={{ cursor: 'default' }}
+                  className="cursor-default"
                 >
                   {/* Invisible hit area */}
                   <rect x={x} y={0} width={barWidth} height={chartH} fill="transparent" />
@@ -541,7 +529,7 @@ function UsageTimeChart({ data, predictedData, period }) {
                     } : null)
                   }}
                   onMouseLeave={() => setTooltip(null)}
-                  style={{ cursor: 'default' }}
+                  className="cursor-default"
                 >
                   {/* Invisible hit area */}
                   <rect x={x} y={0} width={barWidth} height={chartH} fill="transparent" />
@@ -570,7 +558,7 @@ function UsageTimeChart({ data, predictedData, period }) {
               return (
                 <text key={d.bucket} x={x} y={chartH + 16} textAnchor="middle" fontSize="10"
                   fill={d.predicted ? 'var(--color-text-muted)' : 'var(--color-text-secondary)'}
-                  style={{ fontFamily: 'var(--font-mono)' }}
+                  className="text-mono"
                   fontStyle={d.predicted ? 'italic' : 'normal'}
                 >
                   {formatBucket(d.bucket, period)}
@@ -580,29 +568,14 @@ function UsageTimeChart({ data, predictedData, period }) {
           </g>
         </svg>
         {tooltip && (
-          <div style={{
-            position: 'absolute',
-            left: tooltip.x + 12,
-            top: tooltip.y - 8,
-            background: 'var(--color-bg-tertiary)',
-            border: '1px solid var(--color-border)',
-            borderRadius: 'var(--radius-md)',
-            padding: 'var(--spacing-xs) var(--spacing-sm)',
-            fontSize: '0.75rem',
-            fontFamily: 'var(--font-mono)',
-            color: 'var(--color-text-primary)',
-            pointerEvents: 'none',
-            zIndex: 10,
-            boxShadow: 'var(--shadow-md)',
-            whiteSpace: 'nowrap',
-          }}>
-            <div style={{ fontWeight: 600, marginBottom: 2 }}>
-              {tooltip.predicted && <span style={{ color: 'var(--color-text-muted)', fontStyle: 'italic', marginRight: 4 }}>Predicted</span>}
+          <div className="chart-tooltip" style={{ left: tooltip.x + 12, top: tooltip.y - 8 }}>
+            <div className="fw-semibold mb-xs">
+              {tooltip.predicted && <span className="text-muted text-italic icon-before">Predicted</span>}
               {formatBucket(tooltip.data.bucket, period)}
             </div>
-            <div><span style={{ color: 'var(--color-primary)' }}>Prompt:</span> {tooltip.predicted ? '~' : ''}{tooltip.data.prompt_tokens.toLocaleString()}</div>
-            <div><span style={{ color: 'var(--color-data-3)' }}>Completion:</span> {tooltip.predicted ? '~' : ''}{tooltip.data.completion_tokens.toLocaleString()}</div>
-            <div style={{ color: 'var(--color-text-muted)', borderTop: '1px solid var(--color-border)', marginTop: 2, paddingTop: 2 }}>
+            <div><span className="text-primary">Prompt:</span> {tooltip.predicted ? '~' : ''}{tooltip.data.prompt_tokens.toLocaleString()}</div>
+            <div><span className="text-data-3">Completion:</span> {tooltip.predicted ? '~' : ''}{tooltip.data.completion_tokens.toLocaleString()}</div>
+            <div className="chart-tooltip__total">
               {tooltip.predicted ? '~' : ''}{tooltip.data.request_count} requests
             </div>
           </div>
@@ -621,34 +594,28 @@ function ModelDistChart({ rows }) {
   const height = rows.length * (barH + gap) + gap
 
   return (
-    <div className="card" style={{ padding: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)' }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--spacing-sm)' }}>
-        <span style={{ fontSize: '0.875rem', fontWeight: 600, color: 'var(--color-text-primary)' }}>Token distribution by model</span>
-        <div style={{ display: 'flex', gap: 'var(--spacing-md)', fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
-          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: "var(--radius-sm)", background: 'var(--color-primary)', marginRight: 4, verticalAlign: 'middle' }} />Prompt</span>
-          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: "var(--radius-sm)", background: 'var(--color-data-3)', marginRight: 4, verticalAlign: 'middle' }} />Completion</span>
+    <div className="card pad-md mb-md">
+      <div className="hstack hstack--between mb-sm">
+        <span className="text-base fw-semibold">Token distribution by model</span>
+        <div className="chart-legend">
+          <span><span className="legend-dot tone-primary" />Prompt</span>
+          <span><span className="legend-dot tone-data-3" />Completion</span>
         </div>
       </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: gap }}>
+      <div className="stack" style={{ gap }}>
         {rows.map(row => {
           const promptPct = (row.prompt_tokens / maxVal) * 100
           const compPct = (row.completion_tokens / maxVal) * 100
           return (
-            <div key={row.model} style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
-              <div style={{
-                width: 120, minWidth: 120, fontSize: '0.75rem', fontFamily: 'var(--font-mono)',
-                color: 'var(--color-text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-              }} title={row.model}>
+            <div key={row.model} className="hstack">
+              <div className="usage-split__label" title={row.model}>
                 {row.model}
               </div>
-              <div style={{ flex: 1, height: barH, background: 'var(--color-bg-primary)', borderRadius: "var(--radius-sm)", overflow: 'hidden', display: 'flex' }}>
-                <div style={{ width: `${promptPct}%`, height: '100%', background: 'var(--color-primary)', transition: 'width 0.3s ease' }} />
-                <div style={{ width: `${compPct}%`, height: '100%', background: 'var(--color-data-3)', transition: 'width 0.3s ease' }} />
+              <div className="usage-split" style={{ height: barH }}>
+                <div className="usage-split__seg tone-primary" style={{ width: `${promptPct}%` }} />
+                <div className="usage-split__seg tone-data-3" style={{ width: `${compPct}%` }} />
               </div>
-              <div style={{
-                minWidth: 60, textAlign: 'right', fontSize: '0.75rem', fontFamily: 'var(--font-mono)',
-                color: 'var(--color-text-muted)', fontWeight: 600,
-              }}>
+              <div className="usage-split__value">
                 {formatNumber(row.total_tokens)}
               </div>
             </div>
@@ -738,14 +705,13 @@ export default function Usage() {
   const quotaExhaustion = computeQuotaExhaustion(quotas, timeSeries, period)
   const userPredictions = isAdmin && userRows.length > 0 ? generateUserPredictions(adminUsage, userRows, period) : {}
 
-  const monoCell = { fontFamily: 'var(--font-mono)', fontSize: '0.8125rem' }
 
   return (
     <div className="page page--wide">
       <PageHeader title={t('usage.title')} supporting={t('usage.subtitle')} />
 
       {/* Period selector + tabs */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)', marginBottom: 'var(--spacing-md)', flexWrap: 'wrap' }}>
+      <div className="hstack hstack--xs mb-md">
         {PERIODS.map(p => (
           <button
             key={p.key}
@@ -755,80 +721,79 @@ export default function Usage() {
             {p.label}
           </button>
         ))}
-        <div style={{ width: 1, height: 20, background: 'var(--color-border-subtle)', margin: '0 var(--spacing-xs)' }} />
+        <div className="toolbar-divider" />
         <button
           className={`btn btn-sm ${activeTab === 'models' ? 'btn-primary' : 'btn-secondary'}`}
           onClick={() => setActiveTab('models')}
         >
-          <i className="fas fa-cube" style={{ fontSize: '0.7rem' }} /> Models
+          <i className="fas fa-cube text-xs" /> Models
         </button>
         {isAdmin && (
           <button
             className={`btn btn-sm ${activeTab === 'users' ? 'btn-primary' : 'btn-secondary'}`}
             onClick={() => setActiveTab('users')}
           >
-            <i className="fas fa-users" style={{ fontSize: '0.7rem' }} /> Users
+            <i className="fas fa-users text-xs" /> Users
           </button>
         )}
         <button
           className={`btn btn-sm ${activeTab === 'sources' ? 'btn-primary' : 'btn-secondary'}`}
           onClick={() => setActiveTab('sources')}
         >
-          <i className="fas fa-key" style={{ fontSize: '0.7rem' }} /> {t('usage.sources.tab')}
+          <i className="fas fa-key text-xs" /> {t('usage.sources.tab')}
         </button>
-        <div style={{ flex: 1 }} />
+        <div className="flex-1" />
         <button
-          className={`btn btn-sm ${costEnabled ? 'btn-primary' : 'btn-secondary'}`}
+          className={`btn btn-sm ${costEnabled ? 'btn-primary' : 'btn-secondary'} gap-xs`}
           onClick={() => setShowPricing(v => !v)}
-          style={{ gap: 4 }}
           title="Set token pricing to estimate cost"
         >
           <i className="fas fa-dollar-sign" /> {costEnabled ? 'Pricing' : 'Set pricing'}
         </button>
-        <button className="btn btn-secondary btn-sm" onClick={fetchUsage} disabled={loading} style={{ gap: 4 }}>
+        <button className="btn btn-secondary btn-sm gap-xs" onClick={fetchUsage} disabled={loading}>
           <i className={`fas fa-rotate${loading ? ' fa-spin' : ''}`} /> Refresh
         </button>
       </div>
 
       {showPricing && (
-        <div className="card" style={{ display: 'flex', alignItems: 'flex-end', gap: 'var(--spacing-md)', flexWrap: 'wrap', padding: 'var(--spacing-md)', marginBottom: 'var(--spacing-md)' }}>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            <label style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>Prompt $/1M tokens</label>
+        <div className="card usage-filters mb-md">
+          <div className="stack stack--xs">
+            <label className="overline">Prompt $/1M tokens</label>
             <input
-              className="input" type="number" min="0" step="0.01" style={{ width: 140 }}
+              className="input col-w-140" type="number" min="0" step="0.01"
               value={pricing.prompt || ''}
               placeholder="0.00"
               onChange={e => setPricing({ ...pricing, prompt: Number(e.target.value) || 0 })}
             />
           </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            <label style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>Completion $/1M tokens</label>
+          <div className="stack stack--xs">
+            <label className="overline">Completion $/1M tokens</label>
             <input
-              className="input" type="number" min="0" step="0.01" style={{ width: 140 }}
+              className="input col-w-140" type="number" min="0" step="0.01"
               value={pricing.completion || ''}
               placeholder="0.00"
               onChange={e => setPricing({ ...pricing, completion: Number(e.target.value) || 0 })}
             />
           </div>
           {costEnabled && (
-            <button className="btn btn-secondary btn-sm" onClick={() => setPricing({ prompt: 0, completion: 0 })} style={{ gap: 4 }}>
+            <button className="btn btn-secondary btn-sm gap-xs" onClick={() => setPricing({ prompt: 0, completion: 0 })}>
               <i className="fas fa-times" /> Clear
             </button>
           )}
-          <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', flex: '1 1 200px' }}>
+          <span className="text-meta flex-1">
             Estimated cost only. Prices are stored in this browser and applied to recorded token counts.
           </span>
         </div>
       )}
 
       {loading ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}>
+        <div className="loading-center">
           <LoadingSpinner size="lg" />
         </div>
       ) : (
         <>
           {/* Summary cards */}
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
+          <div className="usage-grid mb-md">
             <StatCard icon="fas fa-arrow-right-arrow-left" label="Requests" value={displayTotals.request_count} />
             <StatCard icon="fas fa-arrow-up" label="Prompt" value={displayTotals.prompt_tokens} />
             <StatCard icon="fas fa-arrow-down" label="Completion" value={displayTotals.completion_tokens} />
@@ -861,23 +826,23 @@ export default function Usage() {
                   <thead>
                     <tr>
                       <th>Model</th>
-                      <th style={{ width: 90 }}>Requests</th>
-                      <th style={{ width: 110 }}>Prompt</th>
-                      <th style={{ width: 110 }}>Completion</th>
-                      <th style={{ width: 110 }}>Total</th>
-                      {costEnabled && <th style={{ width: 100 }}>Est. Cost</th>}
-                      <th style={{ width: 140 }}></th>
+                      <th className="col-w-90">Requests</th>
+                      <th className="col-w-110">Prompt</th>
+                      <th className="col-w-110">Completion</th>
+                      <th className="col-w-110">Total</th>
+                      {costEnabled && <th className="col-w-100">Est. Cost</th>}
+                      <th className="col-w-140"></th>
                     </tr>
                   </thead>
                   <tbody>
                     {modelRows.map(row => (
                       <tr key={row.model}>
-                        <td style={monoCell}>{row.model}</td>
-                        <td style={monoCell}>{formatNumber(row.request_count)}</td>
-                        <td style={monoCell}>{formatNumber(row.prompt_tokens)}</td>
-                        <td style={monoCell}>{formatNumber(row.completion_tokens)}</td>
-                        <td style={{ ...monoCell, fontWeight: 600 }}>{formatNumber(row.total_tokens)}</td>
-                        {costEnabled && <td style={monoCell}>{formatCost(costOf(row, pricing))}</td>}
+                        <td className="cell-mono">{row.model}</td>
+                        <td className="cell-mono">{formatNumber(row.request_count)}</td>
+                        <td className="cell-mono">{formatNumber(row.prompt_tokens)}</td>
+                        <td className="cell-mono">{formatNumber(row.completion_tokens)}</td>
+                        <td className="cell-mono fw-semibold">{formatNumber(row.total_tokens)}</td>
+                        {costEnabled && <td className="cell-mono">{formatCost(costOf(row, pricing))}</td>}
                         <td><UsageBar value={row.total_tokens} max={maxTokens} /></td>
                       </tr>
                     ))}
@@ -901,13 +866,13 @@ export default function Usage() {
                     <tr>
                       <th></th>
                       <th>User</th>
-                      <th style={{ width: 90 }}>Requests</th>
-                      <th style={{ width: 110 }}>Prompt</th>
-                      <th style={{ width: 110 }}>Completion</th>
-                      <th style={{ width: 110 }}>Total</th>
-                      {costEnabled && <th style={{ width: 100 }}>Est. Cost</th>}
-                      <th style={{ width: 110 }}>Proj. Total</th>
-                      <th style={{ width: 140 }}></th>
+                      <th className="col-w-90">Requests</th>
+                      <th className="col-w-110">Prompt</th>
+                      <th className="col-w-110">Completion</th>
+                      <th className="col-w-110">Total</th>
+                      {costEnabled && <th className="col-w-100">Est. Cost</th>}
+                      <th className="col-w-110">Proj. Total</th>
+                      <th className="col-w-140"></th>
                     </tr>
                   </thead>
                   <tbody>
@@ -918,28 +883,28 @@ export default function Usage() {
                         <Fragment key={row.user_id}>
                           <tr
                             onClick={() => setSelectedUserId(isExpanded ? null : row.user_id)}
-                            style={{ cursor: 'pointer' }}
+                            className="clickable"
                           >
-                            <td style={{ width: 28, textAlign: 'center', color: 'var(--color-text-muted)', fontSize: '0.7rem' }}>
+                            <td className="text-center text-muted text-xs col-w-30">
                               <i className={`fas fa-chevron-${isExpanded ? 'down' : 'right'}`} />
                             </td>
-                            <td style={{ fontSize: '0.8125rem' }}>{row.user_name}</td>
-                            <td style={monoCell}>{formatNumber(row.request_count)}</td>
-                            <td style={monoCell}>{formatNumber(row.prompt_tokens)}</td>
-                            <td style={monoCell}>{formatNumber(row.completion_tokens)}</td>
-                            <td style={{ ...monoCell, fontWeight: 600 }}>{formatNumber(row.total_tokens)}</td>
-                            {costEnabled && <td style={monoCell}>{formatCost(costOf(row, pricing))}</td>}
-                            <td style={{ ...monoCell, color: 'var(--color-text-muted)', fontStyle: 'italic' }}>
+                            <td className="text-sm">{row.user_name}</td>
+                            <td className="cell-mono">{formatNumber(row.request_count)}</td>
+                            <td className="cell-mono">{formatNumber(row.prompt_tokens)}</td>
+                            <td className="cell-mono">{formatNumber(row.completion_tokens)}</td>
+                            <td className="cell-mono fw-semibold">{formatNumber(row.total_tokens)}</td>
+                            {costEnabled && <td className="cell-mono">{formatCost(costOf(row, pricing))}</td>}
+                            <td className="cell-mono text-muted text-italic">
                               {up?.predictions ? `~${formatNumber(up.predictions.projectedTotals.total_tokens)}` : '-'}
                             </td>
                             <td><UsageBar value={row.total_tokens} max={maxUserTokens} /></td>
                           </tr>
                           {isExpanded && up && (
                             <tr>
-                              <td colSpan={costEnabled ? 9 : 8} style={{ padding: 0, background: 'var(--color-bg-secondary)' }}>
-                                <div style={{ padding: 'var(--spacing-md)' }}>
+                              <td colSpan={costEnabled ? 9 : 8} className="p-0 bg-secondary">
+                                <div className="pad-md">
                                   {up.predictions && (
-                                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))', gap: 'var(--spacing-xs)', marginBottom: 'var(--spacing-sm)' }}>
+                                    <div className="usage-grid--narrow mb-sm">
                                       <StatCard icon="fas fa-arrow-right-arrow-left" label="Proj. Requests" value={up.predictions.projectedTotals.request_count} muted />
                                       <StatCard icon="fas fa-arrow-up" label="Proj. Prompt" value={up.predictions.projectedTotals.prompt_tokens} muted />
                                       <StatCard icon="fas fa-arrow-down" label="Proj. Completion" value={up.predictions.projectedTotals.completion_tokens} muted />
@@ -949,7 +914,7 @@ export default function Usage() {
                                   {up.timeSeries.length > 0 ? (
                                     <UsageTimeChart data={up.timeSeries} predictedData={up.predictions?.predictedBuckets} period={period} />
                                   ) : (
-                                    <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-muted)', padding: 'var(--spacing-sm)' }}>
+                                    <div className="text-note pad-sm">
                                       No time series data for this user.
                                     </div>
                                   )}
diff --git a/core/http/react-ui/src/pages/Usage/SourceMixRibbon.jsx b/core/http/react-ui/src/pages/Usage/SourceMixRibbon.jsx
index 007f54939f83..9b59fe20c051 100644
--- a/core/http/react-ui/src/pages/Usage/SourceMixRibbon.jsx
+++ b/core/http/react-ui/src/pages/Usage/SourceMixRibbon.jsx
@@ -37,9 +37,9 @@ export default function SourceMixRibbon({ bySource = {}, keyCount = 0, onSelectS
     <div
       role="group"
       aria-label={t('usage.sources.ribbonAria', { apikey: apiPct, web: webPct, legacy: legacyPct })}
-      style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)' }}
+      className="stack stack--xs"
     >
-      <div style={{ fontSize: '0.875rem', fontWeight: 600, color: 'var(--color-text-primary)' }}>
+      <div className="text-base fw-semibold">
         {t('usage.sources.mixTitle')}
       </div>
       <div
diff --git a/core/http/react-ui/src/pages/Usage/SourceTimeChart.jsx b/core/http/react-ui/src/pages/Usage/SourceTimeChart.jsx
index 3e123250a1b9..64e4fc6ca0ec 100644
--- a/core/http/react-ui/src/pages/Usage/SourceTimeChart.jsx
+++ b/core/http/react-ui/src/pages/Usage/SourceTimeChart.jsx
@@ -92,8 +92,8 @@ export default function SourceTimeChart({ buckets = [], selectedKey, totals }) {
   const width = Math.max(series.length * slotWidth, 200)
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)' }}>
-      <div style={{ fontSize: '0.875rem', fontWeight: 600, color: 'var(--color-text-primary)' }}>
+    <div className="stack stack--xs">
+      <div className="text-base fw-semibold">
         {t('usage.sources.topSources')}
       </div>
 
diff --git a/core/http/react-ui/src/pages/Usage/SourcesTab.jsx b/core/http/react-ui/src/pages/Usage/SourcesTab.jsx
index 56695f31ff9e..8bcb6499908d 100644
--- a/core/http/react-ui/src/pages/Usage/SourcesTab.jsx
+++ b/core/http/react-ui/src/pages/Usage/SourcesTab.jsx
@@ -74,7 +74,7 @@ export default function SourcesTab({ period, adminUserId }) {
 
   if (loading) {
     return (
-      <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}>
+      <div className="loading-center">
         <LoadingSpinner size="lg" />
       </div>
     )
@@ -101,8 +101,8 @@ export default function SourcesTab({ period, adminUserId }) {
   }
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-md)' }}>
-      <div className="card" style={{ padding: 'var(--spacing-md)' }}>
+    <div className="stack">
+      <div className="card pad-md">
         <SourceMixRibbon
           bySource={totals.by_source}
           keyCount={(totals.by_key || []).length}
@@ -111,7 +111,7 @@ export default function SourcesTab({ period, adminUserId }) {
       </div>
 
       {selectedKey && (
-        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)' }}>
+        <div className="hstack hstack--xs">
           <span
             style={{
               display: 'inline-flex',
@@ -125,7 +125,7 @@ export default function SourcesTab({ period, adminUserId }) {
               border: '1px solid var(--color-border-subtle)',
             }}
           >
-            <i className="fas fa-filter" style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)' }} aria-hidden />
+            <i className="fas fa-filter text-meta" aria-hidden />
             {t('usage.sources.filteredTo', { name: labelForSelected(totals, selectedKey, t) })}
             <button
               type="button"
@@ -148,11 +148,11 @@ export default function SourcesTab({ period, adminUserId }) {
         </div>
       )}
 
-      <div className="card" style={{ padding: 'var(--spacing-md)' }}>
+      <div className="card pad-md">
         <SourceTimeChart buckets={buckets} selectedKey={selectedKey} totals={totals} />
       </div>
 
-      <div className="card" style={{ padding: 'var(--spacing-md)' }}>
+      <div className="card pad-md">
         <SourcesTable
           totals={totals}
           selectedKey={selectedKey}
diff --git a/core/http/react-ui/src/pages/Usage/SourcesTable.jsx b/core/http/react-ui/src/pages/Usage/SourcesTable.jsx
index 4056c6a467e9..b82500c7de75 100644
--- a/core/http/react-ui/src/pages/Usage/SourcesTable.jsx
+++ b/core/http/react-ui/src/pages/Usage/SourcesTable.jsx
@@ -134,7 +134,7 @@ export default function SourcesTable({
     kind === 'apikey' ? 'fas fa-key' : kind === 'web' ? 'fas fa-globe' : 'fas fa-gear'
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-sm)' }}>
+    <div className="stack stack--sm">
       <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', flexWrap: 'wrap' }}>
         <input
           type="search"
@@ -180,7 +180,7 @@ export default function SourcesTable({
             <tr>
               <th>{t('usage.sources.sortName')}</th>
               {showUserColumn && <th style={{ width: 180 }}>{t('usage.sources.sortUser')}</th>}
-              <th style={{ width: 110 }}>Prefix</th>
+              <th className="col-w-110">Prefix</th>
               <th style={{ width: 100, textAlign: 'right' }}>{t('usage.sources.sortRequests')}</th>
               <th style={{ width: 100, textAlign: 'right' }}>{t('usage.sources.sortTokens')}</th>
               <th style={{ width: 120, textAlign: 'right' }}>{t('usage.sources.sortLastUsed')}</th>
@@ -202,8 +202,7 @@ export default function SourcesTable({
                   <td>
                     <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                       <i
-                        className={iconFor(r.kind)}
-                        style={{ color: 'var(--color-text-muted)', fontSize: '0.8125rem' }}
+                        className={`${iconFor(r.kind)} text-note`}
                       />
                       <span>{r.name}</span>
                       {r.revoked && (
@@ -220,11 +219,11 @@ export default function SourcesTable({
                     </span>
                   </td>
                   {showUserColumn && (
-                    <td style={{ color: 'var(--color-text-secondary)', fontSize: '0.8125rem' }}>
+                    <td className="text-sub">
                       {r.userName || r.userID || '-'}
                     </td>
                   )}
-                  <td style={{ color: 'var(--color-text-muted)', fontSize: '0.75rem' }}>{r.prefix || '-'}</td>
+                  <td className="text-meta">{r.prefix || '-'}</td>
                   <td style={{ textAlign: 'right', fontFamily: 'var(--font-mono)' }}>
                     {Number(r.requests || 0).toLocaleString()}
                   </td>
diff --git a/core/http/react-ui/src/pages/Users.jsx b/core/http/react-ui/src/pages/Users.jsx
index 191c6c4016af..a286d1b06d47 100644
--- a/core/http/react-ui/src/pages/Users.jsx
+++ b/core/http/react-ui/src/pages/Users.jsx
@@ -35,7 +35,7 @@ function StatusBadge({ status }) {
 
 function ProviderBadge({ provider }) {
   return (
-    <span className="badge badge-secondary" style={{ fontSize: '0.7rem' }}>
+    <span className="badge badge-secondary text-xs">
       {provider || 'local'}
     </span>
   )
@@ -290,7 +290,7 @@ function PermissionsModal({ user, featureMeta, availableModels, onClose, onSave,
               Model Access
             </strong>
           </div>
-          <div style={{ marginBottom: 'var(--spacing-sm)' }}>
+          <div className="mb-sm">
             <label className="perm-toggle-label">
               <Toggle
                 checked={allowedModels.enabled}
@@ -301,7 +301,7 @@ function PermissionsModal({ user, featureMeta, availableModels, onClose, onSave,
           </div>
           {allowedModels.enabled ? (
             <>
-              <div className="action-group" style={{ marginBottom: 'var(--spacing-sm)' }}>
+              <div className="action-group mb-sm">
                 <button className="btn btn-sm btn-secondary perm-btn-all-none" onClick={() => setAllModels(true)}>All</button>
                 <button className="btn btn-sm btn-secondary perm-btn-all-none" onClick={() => setAllModels(false)}>None</button>
               </div>
@@ -1017,7 +1017,7 @@ export default function Users() {
                 </label>
               </div>
             )}
-            <div className="perm-modal-actions" style={{ marginTop: 'var(--spacing-md)' }}>
+            <div className="perm-modal-actions mt-md">
               <button className="btn btn-secondary" onClick={() => setPasswordResetUser(null)}>Cancel</button>
               <button
                 className="btn btn-primary"
diff --git a/core/http/react-ui/src/pages/VideoGen.jsx b/core/http/react-ui/src/pages/VideoGen.jsx
index d676b0fdc977..f59560d37eda 100644
--- a/core/http/react-ui/src/pages/VideoGen.jsx
+++ b/core/http/react-ui/src/pages/VideoGen.jsx
@@ -188,7 +188,7 @@ export default function VideoGen() {
               ))}
             </div>
           ) : (
-            <div style={{ textAlign: 'center', color: 'var(--color-text-muted)' }}>
+            <div className="text-center text-muted">
               <i className="fas fa-video" style={{ fontSize: '3rem', marginBottom: 'var(--spacing-md)', opacity: 0.4 }} />
               <p>{t('video.empty')}</p>
             </div>
diff --git a/core/http/react-ui/src/pages/VoiceLibrary.jsx b/core/http/react-ui/src/pages/VoiceLibrary.jsx
index 4879cbff0dcf..0cfc7d3e6c97 100644
--- a/core/http/react-ui/src/pages/VoiceLibrary.jsx
+++ b/core/http/react-ui/src/pages/VoiceLibrary.jsx
@@ -194,11 +194,11 @@ JSON` : ''
   return (
     <main className="voice-library-page">
       <PageHeader
-        title={<><i className="fas fa-wave-square" aria-hidden="true" /> {t('voiceLibrary.title')}</>}
+        title={<><i className="fas fa-wave-square btn btn-primary fa-plus" aria-hidden="true" /> {t('voiceLibrary.title')}</>}
         supporting={t('voiceLibrary.subtitle')}
         actions={(
-          <Link className="btn btn-primary" to="/app/voice-library/new">
-            <i className="fas fa-plus" aria-hidden="true" /> {t('voiceLibrary.actions.create')}
+          <Link to="/app/voice-library/new">
+            <i aria-hidden="true" /> {t('voiceLibrary.actions.create')}
           </Link>
         )}
       />
@@ -251,8 +251,7 @@ JSON` : ''
                 icon="fa-microphone-lines"
                 title={t('voiceLibrary.empty.title')}
                 body={t('voiceLibrary.empty.body')}
-                actions={<Link className="btn btn-primary" to="/app/voice-library/new">{t('voiceLibrary.actions.createFirst')}</Link>}
-                className="voice-library-empty"
+                actions={<Link className="btn btn-primary voice-library-empty" to="/app/voice-library/new">{t('voiceLibrary.actions.createFirst')}</Link>}
               />
             )}
             {!loading && !error && profiles.length > 0 && filteredProfiles.length === 0 && (
@@ -260,8 +259,7 @@ JSON` : ''
                 icon="fa-filter-circle-xmark"
                 title={t('voiceLibrary.noResults.title')}
                 body={t('voiceLibrary.noResults.body')}
-                actions={<button type="button" className="btn btn-secondary" onClick={() => { setSearch(''); setLanguage('all') }}>{t('voiceLibrary.actions.clearFilters')}</button>}
-                className="voice-library-empty"
+                actions={<button type="button" className="btn btn-secondary voice-library-empty" onClick={() => { setSearch(''); setLanguage('all') }}>{t('voiceLibrary.actions.clearFilters')}</button>}
               />
             )}
             {!loading && !error && filteredProfiles.map(profile => (
diff --git a/core/http/react-ui/src/pages/VoiceProfileCreate.jsx b/core/http/react-ui/src/pages/VoiceProfileCreate.jsx
index 14d1caa02c66..5dec84c7b149 100644
--- a/core/http/react-ui/src/pages/VoiceProfileCreate.jsx
+++ b/core/http/react-ui/src/pages/VoiceProfileCreate.jsx
@@ -137,9 +137,9 @@ export default function VoiceProfileCreate() {
       />
       <PageHeader
         eyebrow={t('voiceCreate.eyebrow')}
-        title={<><i className="fas fa-microphone-lines" aria-hidden="true" /> {t('voiceCreate.title')}</>}
+        title={<><i className="fas fa-microphone-lines btn btn-secondary fa-arrow-left" aria-hidden="true" /> {t('voiceCreate.title')}</>}
         supporting={t('voiceCreate.subtitle')}
-        actions={<Link className="btn btn-secondary" to="/app/voice-library"><i className="fas fa-arrow-left" aria-hidden="true" /> {t('voiceCreate.actions.back')}</Link>}
+        actions={<Link to="/app/voice-library"><i aria-hidden="true" /> {t('voiceCreate.actions.back')}</Link>}
       />
 
       <form className="voice-create-grid" onSubmit={submit}>