diff --git a/openless-all/app/scripts/aura-skin-contract.test.mjs b/openless-all/app/scripts/aura-skin-contract.test.mjs
index 015d9c3e..22b5baab 100644
--- a/openless-all/app/scripts/aura-skin-contract.test.mjs
+++ b/openless-all/app/scripts/aura-skin-contract.test.mjs
@@ -1,4 +1,6 @@
-import { readFile } from 'node:fs/promises';
+import { readFile, readdir } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
 import assert from 'node:assert/strict';
 
 const root = new URL('../', import.meta.url);
@@ -11,6 +13,132 @@ function escapeRegExp(value) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
+function extractCssBlock(css, selector) {
+  const escapedSelector = escapeRegExp(selector);
+  const match = css.match(new RegExp(`${escapedSelector}\\s*\\{([\\s\\S]*?)\\n\\}`));
+  assert.ok(match, `tokens.css must contain ${selector} block`);
+  return match[1];
+}
+
+function parseCustomProperties(block) {
+  const tokens = new Map();
+  const re = /^\s*(--[\w-]+)\s*:\s*([^;]+);/gm;
+  let match;
+  while ((match = re.exec(block)) !== null) {
+    tokens.set(match[1], match[2].trim());
+  }
+  return tokens;
+}
+
+function resolveTokenValue(name, tokens, stack = new Set()) {
+  const raw = tokens.get(name);
+  assert.ok(raw, `missing token ${name}`);
+  if (!raw.startsWith('var(')) {
+    return raw;
+  }
+  const inner = raw.slice(4, -1).trim();
+  const refName = inner.split(',')[0].trim();
+  assert.ok(refName.startsWith('--'), `unsupported var() reference in ${name}: ${raw}`);
+  if (stack.has(refName)) {
+    throw new Error(`circular var() reference: ${[...stack, refName].join(' -> ')}`);
+  }
+  stack.add(refName);
+  return resolveTokenValue(refName, tokens, stack);
+}
+
+function parseCssColor(value) {
+  const hexMatch = value.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (hexMatch) {
+    let hex = hexMatch[1];
+    if (hex.length === 3) {
+      hex = hex
+        .split('')
+        .map((ch) => ch + ch)
+        .join('');
+    }
+    return {
+      r: Number.parseInt(hex.slice(0, 2), 16),
+      g: Number.parseInt(hex.slice(2, 4), 16),
+      b: Number.parseInt(hex.slice(4, 6), 16),
+      a: 1,
+    };
+  }
+
+  const rgbaMatch = value.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i);
+  if (rgbaMatch) {
+    return {
+      r: Number(rgbaMatch[1]),
+      g: Number(rgbaMatch[2]),
+      b: Number(rgbaMatch[3]),
+      a: rgbaMatch[4] === undefined ? 1 : Number(rgbaMatch[4]),
+    };
+  }
+
+  throw new Error(`unsupported color format: ${value}`);
+}
+
+function srgbChannel(value) {
+  const normalized = value / 255;
+  return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+
+function relativeLuminance({ r, g, b }) {
+  const R = srgbChannel(r);
+  const G = srgbChannel(g);
+  const B = srgbChannel(b);
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+}
+
+function contrastRatio(foreground, background) {
+  const fg = parseCssColor(foreground);
+  const bg = parseCssColor(background);
+  assert.equal(fg.a, 1, `foreground must be opaque for contrast checks: ${foreground}`);
+  assert.equal(bg.a, 1, `background must be opaque for contrast checks: ${background}`);
+  const lighter = Math.max(relativeLuminance(fg), relativeLuminance(bg));
+  const darker = Math.min(relativeLuminance(fg), relativeLuminance(bg));
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+function compositeOverBackground(fgValue, bgValue) {
+  const fg = parseCssColor(fgValue);
+  const bg = parseCssColor(bgValue);
+  if (fg.a === 1) {
+    return fgValue;
+  }
+  const alpha = fg.a;
+  const r = Math.round(fg.r * alpha + bg.r * (1 - alpha));
+  const g = Math.round(fg.g * alpha + bg.g * (1 - alpha));
+  const b = Math.round(fg.b * alpha + bg.b * (1 - alpha));
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+function contrastRatioOverBackground(foreground, background) {
+  const effectiveFg = compositeOverBackground(foreground, background);
+  return contrastRatio(effectiveFg, background);
+}
+
+function assertSolidContrast(tokens, label, bgToken, inkToken, minRatio = 4.5) {
+  const bg = resolveTokenValue(bgToken, tokens);
+  const ink = resolveTokenValue(inkToken, tokens);
+  const ratio = contrastRatio(ink, bg);
+  assert.ok(
+    ratio >= minRatio,
+    `${label}: ${inkToken} on ${bgToken} must meet WCAG AA (${ratio.toFixed(2)}:1 < ${minRatio}:1)`,
+  );
+  return ratio;
+}
+
+function assertMutedContrast(tokens, label, bgToken, inkToken, minRatio = 4.5) {
+  const bg = resolveTokenValue(bgToken, tokens);
+  const ink = resolveTokenValue(inkToken, tokens);
+  const ratio = contrastRatioOverBackground(ink, bg);
+  assert.ok(
+    ratio >= minRatio,
+    `${label}: ${inkToken} on ${bgToken} must meet WCAG AA (${ratio.toFixed(2)}:1 < ${minRatio}:1)`,
+  );
+  return ratio;
+}
+
 function assertUsesClassName(source, className, message) {
   const escapedClassName = escapeRegExp(className);
   const patterns = [
@@ -22,6 +150,23 @@ function assertUsesClassName(source, className, message) {
   assert.ok(patterns.some((pattern) => pattern.test(source)), message);
 }
 
+const srcRoot = fileURLToPath(new URL('src/', root));
+
+async function walkSourceFiles(dirPath, files = []) {
+  const entries = await readdir(dirPath, { withFileTypes: true });
+  for (const entry of entries) {
+    const entryPath = path.join(dirPath, entry.name);
+    if (entry.isDirectory()) {
+      await walkSourceFiles(entryPath, files);
+      continue;
+    }
+    if (/\.(tsx?|css)$/.test(entry.name)) {
+      files.push(path.relative(srcRoot, entryPath).replace(/\\/g, '/'));
+    }
+  }
+  return files;
+}
+
 assert.throws(
   () => assertUsesClassName('<div>ol-app-shell-bg</div>', 'ol-app-shell-bg', 'sample must require className usage'),
   /sample must require className usage/,
@@ -41,22 +186,165 @@ assertUsesClassName(
   'sample should accept className usage',
 );
 
-const [tokens, globalCss, shell, settingsModal, overview] = await Promise.all([
+const [tokens, globalCss, shell, settingsModal, overview, sourceFiles, remoteStyle] = await Promise.all([
   read('src/styles/tokens.css'),
   read('src/styles/global.css'),
   read('src/components/FloatingShell.tsx'),
   read('src/components/SettingsModal.tsx'),
   read('src/pages/Overview.tsx'),
+  walkSourceFiles(srcRoot),
+  read('src-tauri/src/remote_server/assets/style.css'),
 ]);
 
 assert.match(tokens, /--ol-shell-radius:/, 'tokens.css must define --ol-shell-radius');
 assert.match(tokens, /--ol-panel-radius:/, 'tokens.css must define --ol-panel-radius');
 assert.match(tokens, /--ol-aura-shadow:/, 'tokens.css must define --ol-aura-shadow');
 assert.match(tokens, /--ol-font-display:/, 'tokens.css must define --ol-font-display');
+assert.match(tokens, /--ol-on-accent:/, 'tokens.css must define --ol-on-accent');
+assert.match(tokens, /--ol-primary-solid-bg:/, 'tokens.css must define --ol-primary-solid-bg');
+assert.match(tokens, /--ol-primary-solid-ink:/, 'tokens.css must define --ol-primary-solid-ink');
+assert.match(tokens, /--ol-control-radius:/, 'tokens.css must define --ol-control-radius');
+assert.match(tokens, /--ol-accent-solid-bg:/, 'tokens.css must define --ol-accent-solid-bg');
+assert.match(tokens, /--ol-accent-solid-bg-hover:/, 'tokens.css must define --ol-accent-solid-bg-hover');
+assert.match(tokens, /--ol-accent-solid-ink:/, 'tokens.css must define --ol-accent-solid-ink');
+assert.match(tokens, /--ol-danger-solid-bg:/, 'tokens.css must define --ol-danger-solid-bg');
+assert.match(tokens, /--ol-danger-solid-ink:/, 'tokens.css must define --ol-danger-solid-ink');
+
+assert.match(
+  tokens,
+  /\[data-ol-theme='dark'\][\s\S]*--ol-accent-solid-bg:/,
+  'tokens.css must define --ol-accent-solid-bg in dark theme',
+);
+assert.match(
+  tokens,
+  /\[data-ol-theme='dark'\][\s\S]*--ol-accent-solid-bg-hover:/,
+  'tokens.css must define --ol-accent-solid-bg-hover in dark theme',
+);
+assert.match(
+  tokens,
+  /\[data-ol-theme='dark'\][\s\S]*--ol-accent-solid-ink:/,
+  'tokens.css must define --ol-accent-solid-ink in dark theme',
+);
+assert.match(
+  tokens,
+  /\[data-ol-theme='dark'\][\s\S]*--ol-danger-solid-bg:/,
+  'tokens.css must define --ol-danger-solid-bg in dark theme',
+);
+assert.match(
+  tokens,
+  /\[data-ol-theme='dark'\][\s\S]*--ol-danger-solid-ink:/,
+  'tokens.css must define --ol-danger-solid-ink in dark theme',
+);
+
+assert.match(
+  tokens,
+  /\[data-ol-theme='dark'\][\s\S]*--ol-primary-solid-bg:/,
+  'tokens.css must define --ol-primary-solid-bg in dark theme',
+);
+assert.match(
+  tokens,
+  /\[data-ol-theme='dark'\][\s\S]*--ol-primary-solid-ink:/,
+  'tokens.css must define --ol-primary-solid-ink in dark theme',
+);
+
+const lightTokens = parseCustomProperties(extractCssBlock(tokens, ':root'));
+const darkTokens = parseCustomProperties(extractCssBlock(tokens, "[data-ol-theme='dark']"));
+
+const contrastPairs = [
+  {
+    label: 'light accent-solid',
+    tokens: lightTokens,
+    bg: '--ol-accent-solid-bg',
+    ink: '--ol-accent-solid-ink',
+  },
+  {
+    label: 'light primary-solid',
+    tokens: lightTokens,
+    bg: '--ol-primary-solid-bg',
+    ink: '--ol-primary-solid-ink',
+  },
+  {
+    label: 'dark accent-solid',
+    tokens: darkTokens,
+    bg: '--ol-accent-solid-bg',
+    ink: '--ol-accent-solid-ink',
+  },
+  {
+    label: 'dark primary-solid',
+    tokens: darkTokens,
+    bg: '--ol-primary-solid-bg',
+    ink: '--ol-primary-solid-ink',
+  },
+  {
+    label: 'light danger-solid',
+    tokens: lightTokens,
+    bg: '--ol-danger-solid-bg',
+    ink: '--ol-danger-solid-ink',
+  },
+  {
+    label: 'dark danger-solid',
+    tokens: darkTokens,
+    bg: '--ol-danger-solid-bg',
+    ink: '--ol-danger-solid-ink',
+  },
+];
+
+const contrastRatios = {};
+for (const pair of contrastPairs) {
+  contrastRatios[pair.label] = assertSolidContrast(pair.tokens, pair.label, pair.bg, pair.ink);
+}
+
+const mutedContrastPairs = [
+  {
+    label: 'light ink-4 on surface',
+    tokens: lightTokens,
+    bg: '--ol-surface',
+    ink: '--ol-ink-4',
+  },
+  {
+    label: 'light ink-4 on surface-2',
+    tokens: lightTokens,
+    bg: '--ol-surface-2',
+    ink: '--ol-ink-4',
+  },
+];
+
+const mutedContrastRatios = {};
+for (const pair of mutedContrastPairs) {
+  mutedContrastRatios[pair.label] = assertMutedContrast(pair.tokens, pair.label, pair.bg, pair.ink);
+}
+
+const remoteTokens = parseCustomProperties(extractCssBlock(remoteStyle, ':root'));
+
+const remoteMutedContrastPairs = [
+  {
+    label: 'remote ink-4 on surface',
+    tokens: remoteTokens,
+    bg: '--surface',
+    ink: '--ink-4',
+  },
+  {
+    label: 'remote ink-4 on surface-2',
+    tokens: remoteTokens,
+    bg: '--surface-2',
+    ink: '--ink-4',
+  },
+];
+
+const remoteMutedContrastRatios = {};
+for (const pair of remoteMutedContrastPairs) {
+  remoteMutedContrastRatios[pair.label] = assertMutedContrast(pair.tokens, pair.label, pair.bg, pair.ink);
+}
 
 assert.match(globalCss, /\.ol-app-shell-bg\b/, 'global.css must expose .ol-app-shell-bg');
 assert.match(globalCss, /\.ol-aura-panel\b/, 'global.css must expose .ol-aura-panel');
 assert.doesNotMatch(globalCss, /@keyframes ol-aura-halo/, 'global.css must not add an animated halo');
+assert.match(globalCss, /\.ol-aura-card\b/, 'global.css must expose .ol-aura-card');
+assert.match(
+  globalCss,
+  /\.ol-aura-settings\[data-ol-mobile="true"\]/,
+  'global.css must scope mobile settings radius to the settings element itself',
+);
 
 assertUsesClassName(shell, 'ol-app-shell-bg', 'FloatingShell must use the app shell background class');
 assertUsesClassName(shell, 'ol-aura-sidebar', 'FloatingShell must expose an Aura sidebar hook');
@@ -65,4 +353,60 @@ assertUsesClassName(shell, 'ol-aura-panel', 'FloatingShell must expose an Aura p
 assertUsesClassName(settingsModal, 'ol-aura-settings', 'SettingsModal must expose an Aura settings wrapper');
 assertUsesClassName(overview, 'ol-overview-hero', 'Overview must expose a high-visibility overview surface hook');
 
+const illegalCssStringPatterns = [
+  /color:\s*'var\([^)]+\)';/,
+  /background:\s*'var\([^)]+\)';/,
+];
+
+const forbiddenInlineInkBackground = /background:\s*'var\(--ol-ink\)'/;
+
+const forbiddenBlueOnAccentCombo =
+  /background:[\s\S]{0,200}var\(--ol-blue\)[\s\S]{0,500}?color:[\s\S]{0,200}var\(--ol-on-accent\)|color:[\s\S]{0,200}var\(--ol-on-accent\)[\s\S]{0,500}?background:[\s\S]{0,200}var\(--ol-blue\)/;
+
+const forbiddenErrOnAccentCombo =
+  /background:[\s\S]{0,200}var\(--ol-err[^)]*\)[\s\S]{0,500}?color:[\s\S]{0,200}var\(--ol-on-accent\)|background:[\s\S]{0,200}var\(--ol-err[^)]*\)[\s\S]{0,500}?color:[\s\S]{0,200}var\(--ol-accent-solid-ink\)|color:[\s\S]{0,200}var\(--ol-on-accent\)[\s\S]{0,500}?background:[\s\S]{0,200}var\(--ol-err[^)]*\)|color:[\s\S]{0,200}var\(--ol-accent-solid-ink\)[\s\S]{0,500}?background:[\s\S]{0,200}var\(--ol-err[^)]*\)/;
+
+for (const relPath of sourceFiles) {
+  const source = await read(`src/${relPath}`);
+  for (const pattern of illegalCssStringPatterns) {
+    assert.doesNotMatch(
+      source,
+      pattern,
+      `src/${relPath} must not use quoted CSS custom properties inside injected CSS strings`,
+    );
+  }
+  if (relPath.endsWith('.tsx')) {
+    assert.doesNotMatch(
+      source,
+      forbiddenInlineInkBackground,
+      `src/${relPath} must not use --ol-ink as a button/solid background`,
+    );
+    assert.doesNotMatch(
+      source,
+      forbiddenBlueOnAccentCombo,
+      `src/${relPath} must not pair background var(--ol-blue) with color var(--ol-on-accent) (use --ol-accent-solid-* tokens)`,
+    );
+    assert.doesNotMatch(
+      source,
+      forbiddenErrOnAccentCombo,
+      `src/${relPath} must not pair background var(--ol-err) with color var(--ol-on-accent) or var(--ol-accent-solid-ink) (use --ol-danger-solid-* tokens)`,
+    );
+  }
+}
+
 console.log('Aura skin contract OK');
+console.log(
+  'Solid contrast ratios:',
+  Object.fromEntries(
+    Object.entries(contrastRatios).map(([label, ratio]) => [label, `${ratio.toFixed(2)}:1`]),
+  ),
+);
+console.log(
+  'Muted contrast ratios:',
+  Object.fromEntries(
+    Object.entries({ ...mutedContrastRatios, ...remoteMutedContrastRatios }).map(([label, ratio]) => [
+      label,
+      `${ratio.toFixed(2)}:1`,
+    ]),
+  ),
+);
diff --git a/openless-all/app/src-tauri/src/remote_server/assets/style.css b/openless-all/app/src-tauri/src/remote_server/assets/style.css
index 026c3625..3c11db75 100644
--- a/openless-all/app/src-tauri/src/remote_server/assets/style.css
+++ b/openless-all/app/src-tauri/src/remote_server/assets/style.css
@@ -15,13 +15,17 @@
   --ink: #0a0a0b;
   --ink-2: #2a2a2d;
   --ink-3: rgba(10, 10, 11, 0.62);
-  --ink-4: rgba(10, 10, 11, 0.42);
+  --ink-4: rgba(10, 10, 11, 0.58);
 
   /* 蓝色强调 */
   --blue: #2563eb;
   --blue-hover: #1d4ed8;
   --blue-soft: #eff4ff;
   --blue-ring: rgba(37, 99, 235, 0.22);
+  --on-accent: #ffffff;
+  --accent-solid-bg: var(--blue);
+  --accent-solid-bg-hover: var(--blue-hover);
+  --accent-solid-ink: var(--on-accent);
 
   /* 状态色 */
   --ok: #16a34a;
@@ -35,8 +39,13 @@
   --shadow-lg: 0 20px 60px -20px rgba(15, 17, 22, 0.18), 0 8px 32px -16px rgba(15, 17, 22, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
 
   /* 圆角 */
+  --control-radius: 8px;
+  --r-sm: 6px;
+  --r-md: 10px;
   --r-lg: 14px;
   --r-xl: 18px;
+  --bubble-radius: var(--r-lg);
+  --modal-radius: var(--r-xl);
   --r-2xl: 22px;
   --r-pill: 999px;
 
@@ -179,7 +188,7 @@ body {
   padding: 15px 18px;
   font-size: 17px;
   font-weight: 600;
-  color: #fff;
+  color: var(--on-accent);
   border: none;
   border-radius: var(--r-lg);
   cursor: pointer;
@@ -189,10 +198,10 @@ body {
 .btn:disabled { opacity: .5; cursor: default; }
 
 .btn-primary {
-  background: var(--blue);
+  background: var(--accent-solid-bg);
   box-shadow: 0 6px 18px -6px var(--blue-ring);
 }
-.btn-primary:active { background: var(--blue-hover); }
+.btn-primary:active { background: var(--accent-solid-bg-hover); }
 
 .hint-error {
   color: var(--danger);
@@ -230,10 +239,10 @@ body {
 .help-link {
   display: inline-block;
   padding: 9px 16px;
-  border-radius: var(--r-md);
+  border-radius: var(--control-radius);
   border: none;
-  background: var(--blue);
-  color: #fff;
+  background: var(--accent-solid-bg);
+  color: var(--accent-solid-ink);
   font-size: 13px;
   font-weight: 600;
   font-family: inherit;
@@ -242,7 +251,7 @@ body {
   -webkit-appearance: none;
   appearance: none;
 }
-.help-link:active { background: var(--blue-hover); }
+.help-link:active { background: var(--accent-solid-bg-hover); }
 .help-link-ghost {
   background: var(--surface);
   color: var(--blue);
@@ -260,7 +269,7 @@ body {
 .app-icon {
   width: 26px;
   height: 26px;
-  border-radius: 7px;
+  border-radius: var(--control-radius);
   flex: none;
   box-shadow: var(--shadow-sm);
 }
@@ -275,7 +284,7 @@ body {
   display: inline-flex;
   background: var(--surface-2);
   border: 0.5px solid var(--line);
-  border-radius: 12px;
+  border-radius: var(--r-lg);
   padding: 3px;
   gap: 2px;
 }
@@ -288,13 +297,13 @@ body {
   font-size: 13px;
   font-weight: 600;
   padding: 7px 14px;
-  border-radius: 9px;
+  border-radius: var(--control-radius);
   cursor: pointer;
   transition: background .15s ease, color .15s ease;
 }
 .mode-btn.active {
-  background: var(--blue);
-  color: #fff;
+  background: var(--accent-solid-bg);
+  color: var(--accent-solid-ink);
 }
 
 /* ===== 录音主区 ===== */
@@ -315,8 +324,8 @@ body {
   border-radius: 50%;
   border: none;
   cursor: pointer;
-  color: #fff;
-  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
+  color: var(--accent-solid-ink);
+  background: linear-gradient(180deg, var(--accent-solid-bg-hover) 0%, var(--accent-solid-bg) 100%);
   box-shadow:
     0 16px 36px -10px rgba(37, 99, 235, .5),
     inset 0 1px 0 rgba(255, 255, 255, .25);
@@ -359,7 +368,7 @@ body {
   box-shadow: 0 16px 36px -10px rgba(220, 38, 38, .5);
   animation: breathe 1.6s ease-in-out infinite;
 }
-.record-btn.recording .record-btn-label { color: #fff; }
+.record-btn.recording .record-btn-label { color: var(--on-accent); }
 .record-btn.recording .record-btn-ring {
   opacity: 1;
   border-color: rgba(220, 38, 38, .4);
@@ -498,7 +507,7 @@ body {
   cursor: pointer;
   transition: background .15s ease, color .15s ease;
 }
-.result-copy:active { background: var(--blue); color: #fff; }
+.result-copy:active { background: var(--accent-solid-bg); color: var(--accent-solid-ink); }
 .result-copy.copied { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
 
 /* ===== 提示文字 ===== */
@@ -570,7 +579,7 @@ body {
   font-size: 12px;
   line-height: 1.5;
   color: var(--ink-4);
-  background: rgba(255, 255, 255, .85);
+  background: rgba(255, 255, 255, .92);
   backdrop-filter: blur(12px) saturate(160%);
   -webkit-backdrop-filter: blur(12px) saturate(160%);
   border-top: 0.5px solid var(--line);
diff --git a/openless-all/app/src/components/AutoUpdate.tsx b/openless-all/app/src/components/AutoUpdate.tsx
index 0d0cfa0e..d59b9332 100644
--- a/openless-all/app/src/components/AutoUpdate.tsx
+++ b/openless-all/app/src/components/AutoUpdate.tsx
@@ -200,14 +200,14 @@ export function UpdateDialog({
   const installing = status === 'installing';
   return (
     <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.18)', display: 'grid', placeItems: 'center', zIndex: 40 }}>
-      <div style={{ width: 360, borderRadius: 16, background: 'var(--ol-surface)', border: '0.5px solid var(--ol-line-strong)', boxShadow: '0 18px 42px rgba(0,0,0,0.18)', padding: 18 }}>
+      <div style={{ width: 360, borderRadius: 'var(--ol-modal-radius)', background: 'var(--ol-surface)', border: '0.5px solid var(--ol-line-strong)', boxShadow: '0 18px 42px rgba(0,0,0,0.18)', padding: 18 }}>
         <div style={{ fontSize: 15, fontWeight: 650, marginBottom: 8 }}>{t(`settings.about.updateDialog.${status}.title`)}</div>
         <div style={{ fontSize: 12, color: 'var(--ol-ink-3)', lineHeight: 1.6, marginBottom: 14 }}>
           {t(`settings.about.updateDialog.${status}.desc`, { version })}
         </div>
         {(downloading || installing || status === 'downloaded') && (
           <div style={{ marginBottom: 14 }}>
-            <div style={{ height: 8, borderRadius: 999, background: 'var(--ol-surface-2)', overflow: 'hidden', border: '0.5px solid var(--ol-line)' }}>
+            <div style={{ height: 8, borderRadius: 'var(--ol-pill-radius)', background: 'var(--ol-surface-2)', overflow: 'hidden', border: '0.5px solid var(--ol-line)' }}>
               <div style={{ height: '100%', width: `${status === 'downloaded' || installing ? 100 : progress ?? 8}%`, background: 'var(--ol-blue)', transition: 'width 0.18s var(--ol-motion-soft)' }} />
             </div>
             <div style={{ marginTop: 6, fontSize: 11, color: 'var(--ol-ink-4)' }}>
diff --git a/openless-all/app/src/components/Capsule.tsx b/openless-all/app/src/components/Capsule.tsx
index bb0bd822..f2b7323a 100644
--- a/openless-all/app/src/components/Capsule.tsx
+++ b/openless-all/app/src/components/Capsule.tsx
@@ -41,7 +41,7 @@ function AudioBars({ level }: AudioBarsProps) {
             display: 'inline-block',
             width: 3,
             height: base + (max - base) * visualVoice * env,
-            borderRadius: 999,
+            borderRadius: 'var(--ol-pill-radius)',
             background: 'var(--ol-blue)',
             opacity: 0.82,
             transformOrigin: 'center',
@@ -113,12 +113,12 @@ function CircleButton({ variant, enabled, onClick }: CircleButtonProps) {
       style={{
         width: 28,
         height: 28,
-        borderRadius: 999,
-        background: isCancel ? 'rgba(255, 255, 255, 0.55)' : 'rgba(255, 255, 255, 0.92)',
+        borderRadius: 'var(--ol-pill-radius)',
+        background: isCancel ? 'var(--ol-control-muted-strong)' : 'var(--ol-control-solid)',
         backdropFilter: useBackdrop ? 'blur(12px) saturate(160%)' : 'none',
         WebkitBackdropFilter: useBackdrop ? 'blur(12px) saturate(160%)' : 'none',
         color: 'var(--ol-ink)',
-        border: '0.8px solid rgba(0, 0, 0, 0.08)',
+        border: '0.8px solid var(--ol-glass-border)',
         display: 'inline-flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -265,11 +265,11 @@ function Pill({ os, state, level, insertedChars, message, operating, onCancel, o
         width: metrics.width,
         height: metrics.height,
         boxSizing: metrics.boxSizing,
-        borderRadius: 999,
-        border: '1px solid rgba(255, 255, 255, 0.55)',
+        borderRadius: 'var(--ol-pill-radius)',
+        border: '1px solid var(--ol-glass-border)',
         boxShadow: os === 'win'
-          ? `0 10px 24px -14px rgba(0, 0, 0, ${(0.24 + ambient * 0.06).toFixed(3)}), 0 0 0 0.5px rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.8)`
-          : `0 18px 50px -10px rgba(0, 0, 0, ${shadowAlpha.toFixed(3)}), 0 0 0 0.5px rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.8)`,
+          ? `0 10px 24px -14px rgba(0, 0, 0, ${(0.24 + ambient * 0.06).toFixed(3)}), var(--ol-pill-shadow)`
+          : `0 18px 50px -10px rgba(0, 0, 0, ${shadowAlpha.toFixed(3)}), var(--ol-pill-shadow)`,
         color: 'var(--ol-ink)',
         fontFamily: 'var(--ol-font-sans)',
         transform: `scale(${scale.toFixed(4)})`,
@@ -446,11 +446,11 @@ export function Capsule() {
             alignItems: 'center',
             gap: 5,
             padding: '3px 10px',
-            borderRadius: 999,
+            borderRadius: 'var(--ol-pill-radius)',
             fontSize: 10.5,
             fontWeight: 600,
             color: 'var(--ol-blue)',
-            background: 'rgba(255, 255, 255, 0.78)',
+            background: 'var(--ol-glass-bg-strong)',
             backdropFilter: 'blur(20px) saturate(180%)',
             WebkitBackdropFilter: 'blur(20px) saturate(180%)',
             border: '0.5px solid rgba(37, 99, 235, 0.25)',
@@ -465,7 +465,7 @@ export function Capsule() {
             willChange: 'opacity, transform',
           }}
         >
-          <span style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--ol-blue)' }} />
+          <span style={{ width: 5, height: 5, borderRadius: 'var(--ol-pill-radius)', background: 'var(--ol-blue)' }} />
           {t('capsule.translating')}
         </div>
       </div>
diff --git a/openless-all/app/src/components/FloatingShell.tsx b/openless-all/app/src/components/FloatingShell.tsx
index ba22c926..266cd3c5 100644
--- a/openless-all/app/src/components/FloatingShell.tsx
+++ b/openless-all/app/src/components/FloatingShell.tsx
@@ -4,7 +4,7 @@
 //
 // Ported verbatim from design_handoff_openless/variants.jsx::FloatingShell.
 
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, type ComponentType } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, type ComponentType, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from './Icon';
 import { WindowChrome, detectOS, type OS } from './WindowChrome';
@@ -199,6 +199,7 @@ function FloatingShellBody({ os, initialTab, initialSettings }: { os: OS; initia
   return (
     <div
       className="ol-app-shell-bg"
+      data-ol-mobile={mobileLayout ? 'true' : 'false'}
       style={{ flex: 1, position: 'relative', display: 'flex', flexDirection: 'column', minHeight: 0, paddingTop: os === 'mac' ? 28 : 0 }}
     >
 
@@ -392,7 +393,11 @@ function FloatingShellBody({ os, initialTab, initialSettings }: { os: OS; initia
         </div>
 
         {mobileLayout && (
-          <nav className="ol-aura-mobile-nav" aria-label="OpenLess">
+          <nav
+            className="ol-aura-mobile-nav"
+            aria-label="OpenLess"
+            style={{ '--ol-nav-count': NAV.length } as CSSProperties}
+          >
             {NAV.map(n => {
               const active = !settingsOpen && currentTab === n.id;
               return (
@@ -433,237 +438,6 @@ function FloatingShellBody({ os, initialTab, initialSettings }: { os: OS; initia
         />
       ) : null}
       <AudioCueListener />
-
-      {/* tab 切换 + provider prompt + footer popover 公用的入场关键帧 */}
-      <style>{`
-        /* nav 三段视觉层次：
-             基础态  → ink-3（中灰文字 + 透明底）
-             hover  → ink（深色文字 + 浅灰底）  ← 让"翻译"等字词在悬停时高亮，跟基础/选中都拉开差距
-             选中  → ink（深色文字 + 白色 pill 底，由 absolute pill 提供）
-           inline color/fontWeight 留给 active 项写最高优先级；非 active 走 class，
-           这样 :hover 能正确覆盖（CSS 不能盖 inline style）。 */
-        .ol-nav-btn {
-          color: var(--ol-ink-3);
-          font-weight: 500;
-        }
-        .ol-aura-sidebar {
-          padding: 14px 12px 14px;
-          background: var(--ol-sidebar-bg);
-          border-right: 1px solid var(--ol-sidebar-border);
-        }
-        .ol-aura-sidebar-brand {
-          display: flex;
-          align-items: center;
-          gap: 10px;
-          padding: 6px 10px 16px;
-          margin-bottom: 6px;
-          border-radius: 0;
-          background: var(--ol-sidebar-brand-bg);
-          border: 1px solid var(--ol-sidebar-brand-border);
-          box-shadow: none;
-        }
-        .ol-aura-sidebar-brand-mark {
-          width: 26px;
-          height: 26px;
-          border-radius: 8px;
-          box-shadow: none;
-          box-sizing: border-box;
-          padding: 3px;
-          object-fit: contain;
-        }
-        .ol-aura-sidebar-brand-title {
-          font-size: 14px;
-          font-weight: 600;
-          font-family: var(--ol-font-display);
-          color: var(--ol-ink);
-        }
-        .ol-aura-sidebar-brand-kicker {
-          font-size: 10.5px;
-          color: var(--ol-ink-4);
-          font-family: var(--ol-font-mono);
-          letter-spacing: .08em;
-        }
-        .ol-aura-sidebar-pill {
-          background: var(--ol-sidebar-pill-bg);
-          border-radius: 12px;
-          border: 1px solid var(--ol-sidebar-pill-border);
-          box-shadow: none;
-        }
-        .ol-aura-sidebar-nav-btn {
-          padding: 8px 12px;
-          border-radius: 12px;
-          border: 0;
-          background: transparent;
-          font-family: inherit;
-          font-size: 13px;
-          cursor: default;
-          transition: color 0.16s var(--ol-motion-quick), background 0.16s var(--ol-motion-quick);
-          text-align: left;
-          position: relative;
-          z-index: 1;
-        }
-        .ol-aura-sidebar-footer {
-          display: flex;
-          flex-direction: column;
-          gap: 10px;
-          padding: 12px 10px 0;
-          margin-top: 10px;
-          border-top: 1px solid var(--ol-sidebar-footer-border);
-        }
-        .ol-aura-sidebar-version {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          flex-wrap: wrap;
-          padding: 10px 12px;
-          font-family: var(--ol-font-sans);
-          font-size: 11px;
-          color: var(--ol-ink-4);
-          background: var(--ol-sidebar-version-bg);
-          border: 1px solid var(--ol-sidebar-version-border);
-          border-radius: var(--ol-pill-radius);
-          box-shadow: none;
-        }
-        .ol-aura-beta-tag {
-          display: inline-block;
-          padding: 2px 8px;
-          font-size: 10px;
-          font-weight: 600;
-          letter-spacing: 0.04em;
-          text-transform: uppercase;
-          color: var(--ol-blue);
-          background: rgba(37,99,235,0.10);
-          border-radius: 999px;
-        }
-        .ol-aura-sidebar-settings {
-          padding: 10px 12px;
-          border-radius: 12px;
-          border: 1px solid var(--ol-sidebar-settings-border);
-          background: var(--ol-sidebar-settings-bg);
-          box-shadow: none;
-        }
-        .ol-aura-sidebar-settings.ol-nav-btn-active {
-          background: var(--ol-sidebar-settings-active-bg);
-          box-shadow: none;
-        }
-        .ol-aura-console-main {
-          border-radius: ${mobileLayout ? '0' : 'var(--ol-panel-radius)'};
-        }
-        .ol-aura-mobile-topbar {
-          flex-shrink: 0;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          gap: 12px;
-          padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
-          border-bottom: 1px solid var(--ol-sidebar-border);
-          background: var(--ol-sidebar-bg);
-        }
-        .ol-aura-mobile-brand {
-          min-width: 0;
-          display: flex;
-          align-items: center;
-          gap: 10px;
-        }
-        .ol-aura-mobile-brand-mark {
-          width: 30px;
-          height: 30px;
-          border-radius: 8px;
-          flex-shrink: 0;
-          box-sizing: border-box;
-          padding: 3px;
-          object-fit: contain;
-        }
-        .ol-aura-mobile-brand-title {
-          font-size: 14px;
-          font-weight: 700;
-          color: var(--ol-ink);
-          line-height: 1.15;
-        }
-        .ol-aura-mobile-brand-section {
-          margin-top: 2px;
-          font-size: 11px;
-          color: var(--ol-ink-4);
-          font-family: var(--ol-font-mono);
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        .ol-aura-mobile-settings {
-          width: 36px;
-          height: 36px;
-          flex-shrink: 0;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 12px;
-          color: var(--ol-ink-3);
-          background: var(--ol-sidebar-settings-bg);
-          border: 1px solid var(--ol-sidebar-settings-border);
-        }
-        .ol-aura-mobile-settings-active {
-          color: var(--ol-ink);
-          background: var(--ol-sidebar-settings-active-bg);
-        }
-        .ol-aura-mobile-nav {
-          flex-shrink: 0;
-          display: grid;
-          grid-template-columns: repeat(${NAV.length}, minmax(0, 1fr));
-          gap: 2px;
-          padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
-          border-top: 1px solid var(--ol-sidebar-border);
-          background: var(--ol-sidebar-bg);
-        }
-        .ol-aura-mobile-nav-btn {
-          min-width: 0;
-          height: 50px;
-          display: inline-flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          gap: 4px;
-          border-radius: 12px;
-          color: var(--ol-ink-4);
-          font-size: 10px;
-          font-weight: 600;
-          line-height: 1.1;
-        }
-        .ol-aura-mobile-nav-btn span {
-          max-width: 100%;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-        .ol-aura-mobile-nav-btn-active {
-          color: var(--ol-ink);
-          background: var(--ol-sidebar-pill-bg);
-          border: 1px solid var(--ol-sidebar-pill-border);
-        }
-        .ol-nav-btn.ol-nav-btn-active {
-          color: var(--ol-ink);
-          font-weight: 600;
-        }
-        .ol-nav-btn:not(.ol-nav-btn-active):hover {
-          background: var(--ol-nav-hover-bg);
-          color: var(--ol-ink);
-        }
-        @keyframes ol-page-slide {
-          from { opacity: 0; transform: translate3d(10px, 0, 0) scale(.996); filter: blur(6px); }
-          to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
-        }
-        @keyframes ol-page-fadeout {
-          from { opacity: 1; filter: blur(0); }
-          to   { opacity: 0; filter: blur(8px); }
-        }
-        @keyframes ol-prompt-fade {
-          from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
-          to   { opacity: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
-        }
-        @keyframes ol-prompt-pop {
-          from { opacity: 0; transform: translateY(6px) scale(.97); filter: blur(6px); }
-          to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
-        }
-      `}</style>
     </div>
   );
 }
@@ -689,10 +463,10 @@ function ProviderSetupPrompt({ onLater, onOpenSettings }: { onLater: () => void;
       <div
         style={{
           width: 360,
-          borderRadius: 12,
+          borderRadius: 'var(--ol-r-lg)',
           background: 'var(--ol-surface)',
-          border: '0.5px solid rgba(0,0,0,.08)',
-          boxShadow: '0 24px 70px -24px rgba(15,17,22,.38), 0 0 0 0.5px rgba(0,0,0,.06)',
+          border: '0.5px solid var(--ol-line-strong)',
+          boxShadow: 'var(--ol-shadow-lg)',
           padding: 20,
           animation: 'ol-prompt-pop 0.26s var(--ol-motion-spring)',
         }}
@@ -702,8 +476,8 @@ function ProviderSetupPrompt({ onLater, onOpenSettings }: { onLater: () => void;
             style={{
               width: 34,
               height: 34,
-              borderRadius: 8,
-              background: 'rgba(37,99,235,0.10)',
+              borderRadius: 'var(--ol-control-radius)',
+              background: 'var(--ol-blue-soft)',
               color: 'var(--ol-blue)',
               display: 'inline-flex',
               alignItems: 'center',
@@ -724,7 +498,7 @@ function ProviderSetupPrompt({ onLater, onOpenSettings }: { onLater: () => void;
             style={{
               height: 32,
               padding: '0 13px',
-              borderRadius: 8,
+              borderRadius: 'var(--ol-control-radius)',
               border: '0.5px solid var(--ol-line-strong)',
               background: 'var(--ol-surface)',
               color: 'var(--ol-ink-3)',
@@ -742,10 +516,10 @@ function ProviderSetupPrompt({ onLater, onOpenSettings }: { onLater: () => void;
             style={{
               height: 32,
               padding: '0 14px',
-              borderRadius: 8,
+              borderRadius: 'var(--ol-control-radius)',
               border: 0,
-              background: 'var(--ol-ink)',
-              color: 'var(--ol-on-accent)',
+              background: 'var(--ol-primary-solid-bg)',
+              color: 'var(--ol-primary-solid-ink)',
               fontFamily: 'inherit',
               fontSize: 12.5,
               fontWeight: 500,
@@ -782,10 +556,10 @@ function HotkeyModeMigrationPrompt({ onLater, onOpenSettings }: { onLater: () =>
       <div
         style={{
           width: 380,
-          borderRadius: 12,
+          borderRadius: 'var(--ol-r-lg)',
           background: 'var(--ol-surface)',
-          border: '0.5px solid rgba(0,0,0,.08)',
-          boxShadow: '0 24px 70px -24px rgba(15,17,22,.38), 0 0 0 0.5px rgba(0,0,0,.06)',
+          border: '0.5px solid var(--ol-line-strong)',
+          boxShadow: 'var(--ol-shadow-lg)',
           padding: 20,
           animation: 'ol-prompt-pop 0.26s var(--ol-motion-spring)',
         }}
@@ -795,8 +569,8 @@ function HotkeyModeMigrationPrompt({ onLater, onOpenSettings }: { onLater: () =>
             style={{
               width: 34,
               height: 34,
-              borderRadius: 8,
-              background: 'rgba(37,99,235,0.10)',
+              borderRadius: 'var(--ol-control-radius)',
+              background: 'var(--ol-blue-soft)',
               color: 'var(--ol-blue)',
               display: 'inline-flex',
               alignItems: 'center',
@@ -817,7 +591,7 @@ function HotkeyModeMigrationPrompt({ onLater, onOpenSettings }: { onLater: () =>
             style={{
               height: 32,
               padding: '0 13px',
-              borderRadius: 8,
+              borderRadius: 'var(--ol-control-radius)',
               border: '0.5px solid var(--ol-line-strong)',
               background: 'var(--ol-surface)',
               color: 'var(--ol-ink-3)',
@@ -835,10 +609,10 @@ function HotkeyModeMigrationPrompt({ onLater, onOpenSettings }: { onLater: () =>
             style={{
               height: 32,
               padding: '0 14px',
-              borderRadius: 8,
+              borderRadius: 'var(--ol-control-radius)',
               border: 0,
-              background: 'var(--ol-ink)',
-              color: 'var(--ol-on-accent)',
+              background: 'var(--ol-primary-solid-bg)',
+              color: 'var(--ol-primary-solid-ink)',
               fontFamily: 'inherit',
               fontSize: 12.5,
               fontWeight: 500,
diff --git a/openless-all/app/src/components/GithubLoginModal.tsx b/openless-all/app/src/components/GithubLoginModal.tsx
index 8dc4c5c3..e2850c49 100644
--- a/openless-all/app/src/components/GithubLoginModal.tsx
+++ b/openless-all/app/src/components/GithubLoginModal.tsx
@@ -124,7 +124,7 @@ export function GithubLoginModal({ onClose, onSuccess }: GithubLoginModalProps)
           title={t('common.close')}
           onClick={close}
           style={{
-            width: 28, height: 28, borderRadius: 8,
+            width: 28, height: 28, borderRadius: 'var(--ol-control-radius)',
             display: 'inline-grid', placeItems: 'center',
             border: '0.5px solid var(--ol-line-strong)',
             background: 'var(--ol-surface)',
@@ -150,7 +150,7 @@ export function GithubLoginModal({ onClose, onSuccess }: GithubLoginModalProps)
             </div>
             <div style={{
               display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
-              padding: 18, borderRadius: 12,
+              padding: 18, borderRadius: 'var(--ol-r-lg)',
               border: '0.5px solid var(--ol-line-strong)',
               background: 'var(--ol-surface-2)',
             }}>
@@ -174,7 +174,7 @@ export function GithubLoginModal({ onClose, onSuccess }: GithubLoginModalProps)
             </div>
             <div style={{ fontSize: 11.5, color: 'var(--ol-ink-4)', textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
               <span style={{
-                display: 'inline-block', width: 8, height: 8, borderRadius: 999,
+                display: 'inline-block', width: 8, height: 8, borderRadius: 'var(--ol-pill-radius)',
                 background: 'var(--ol-blue)', animation: 'ol-pulse 1.4s ease-in-out infinite',
               }} />
               {t('marketplace.oauth.waiting')}
@@ -197,7 +197,7 @@ export function GithubLoginModal({ onClose, onSuccess }: GithubLoginModalProps)
         {phase.kind === 'error' && (
           <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
             <div style={{
-              padding: 12, borderRadius: 10,
+              padding: 12, borderRadius: 'var(--ol-r-md)',
               border: '0.5px solid rgba(239,68,68,0.3)',
               background: 'rgba(239,68,68,0.06)',
               color: '#b91c1c',
diff --git a/openless-all/app/src/components/MarketplaceModal.tsx b/openless-all/app/src/components/MarketplaceModal.tsx
index e977dc7b..6e0246d6 100644
--- a/openless-all/app/src/components/MarketplaceModal.tsx
+++ b/openless-all/app/src/components/MarketplaceModal.tsx
@@ -49,7 +49,7 @@ export function MarketplaceModal({ onClose }: MarketplaceModalProps) {
         style={{
           width: '100%', maxWidth: 1080, height: '100%', maxHeight: 720,
           background: 'var(--ol-surface)',
-          borderRadius: 14,
+          borderRadius: 'var(--ol-bubble-radius)',
           border: '0.5px solid rgba(0,0,0,.08)',
           boxShadow: '0 30px 80px -20px rgba(15,17,22,.35), 0 0 0 0.5px rgba(0,0,0,.06)',
           overflow: 'hidden',
@@ -70,9 +70,9 @@ export function MarketplaceModal({ onClose }: MarketplaceModalProps) {
             title={loggedIn ? t('marketplace.modal.loggedIn') : t('marketplace.modal.notLoggedIn')}
             style={{
               display: 'inline-flex', alignItems: 'center', gap: 6,
-              padding: '4px 10px', borderRadius: 999,
+              padding: '4px 10px', borderRadius: 'var(--ol-pill-radius)',
               border: loggedIn ? '0.5px solid var(--ol-line)' : '0.5px solid rgba(239,68,68,0.32)',
-              background: loggedIn ? 'rgba(255,255,255,0.85)' : 'rgba(239,68,68,0.08)',
+              background: loggedIn ? 'var(--ol-glass-bg-strong)' : 'rgba(239,68,68,0.08)',
               color: loggedIn ? 'var(--ol-ink-2)' : 'var(--ol-red, #ef4444)',
               fontSize: 11.5, fontWeight: 500,
               cursor: 'default',
@@ -92,8 +92,8 @@ export function MarketplaceModal({ onClose }: MarketplaceModalProps) {
             position: 'absolute', top: 16, right: 16, zIndex: 3,
             width: 32, height: 32,
             border: '0.5px solid var(--ol-line)',
-            borderRadius: 8,
-            background: 'rgba(255,255,255,0.85)',
+            borderRadius: 'var(--ol-control-radius)',
+            background: 'var(--ol-glass-bg-strong)',
             color: 'var(--ol-ink-2)',
             display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
             cursor: 'default',
@@ -107,7 +107,7 @@ export function MarketplaceModal({ onClose }: MarketplaceModalProps) {
             (e.currentTarget as HTMLButtonElement).style.color = 'var(--ol-ink)';
           }}
           onMouseLeave={(e) => {
-            (e.currentTarget as HTMLButtonElement).style.background = 'rgba(255,255,255,0.85)';
+            (e.currentTarget as HTMLButtonElement).style.background = 'var(--ol-glass-bg-strong)';
             (e.currentTarget as HTMLButtonElement).style.color = 'var(--ol-ink-2)';
           }}
           aria-label={t('common.close')}
diff --git a/openless-all/app/src/components/Onboarding.tsx b/openless-all/app/src/components/Onboarding.tsx
index bb518005..8fff0b04 100644
--- a/openless-all/app/src/components/Onboarding.tsx
+++ b/openless-all/app/src/components/Onboarding.tsx
@@ -132,7 +132,7 @@ function AndroidOnboarding({ onComplete }: OnboardingProps) {
               key={step.id}
               style={{
                 height: 4,
-                borderRadius: 999,
+                borderRadius: 'var(--ol-pill-radius)',
                 background: index <= stepIndex ? 'var(--ol-blue)' : 'var(--ol-line-soft)',
               }}
             />
@@ -143,7 +143,7 @@ function AndroidOnboarding({ onComplete }: OnboardingProps) {
           style={{
             background: 'var(--ol-surface)',
             border: '0.5px solid var(--ol-line)',
-            borderRadius: 14,
+            borderRadius: 'var(--ol-bubble-radius)',
             boxShadow: 'var(--ol-shadow-lg)',
             padding: 18,
             display: 'flex',
@@ -347,7 +347,7 @@ function DesktopOnboarding({
           padding: 32,
           boxSizing: 'border-box',
           background: 'var(--ol-surface)',
-          borderRadius: 14,
+          borderRadius: 'var(--ol-bubble-radius)',
           border: '0.5px solid var(--ol-line)',
           boxShadow: 'var(--ol-shadow-lg)',
         }}
@@ -470,7 +470,7 @@ function AndroidStepCard({ children }: { children: ReactNode }) {
         flexDirection: 'column',
         gap: 12,
         padding: 14,
-        borderRadius: 10,
+        borderRadius: 'var(--ol-r-md)',
         background: 'var(--ol-surface-2)',
         border: '0.5px solid var(--ol-line-soft)',
         minWidth: 0,
@@ -488,7 +488,7 @@ function StatusBadge({ granted, label }: { granted: boolean; label: string }) {
         flexShrink: 0,
         fontSize: 11,
         fontWeight: 600,
-        borderRadius: 999,
+        borderRadius: 'var(--ol-pill-radius)',
         padding: '4px 8px',
         color: granted ? 'var(--ol-ok)' : 'var(--ol-ink-4)',
         background: granted ? 'rgba(40, 160, 90, 0.12)' : 'rgba(0,0,0,0.06)',
@@ -526,9 +526,9 @@ function PermissionStep({ index, title, desc, status, actionLabel, onAction, dis
         style={{
           width: 22,
           height: 22,
-          borderRadius: 999,
-          background: granted ? 'var(--ol-blue)' : 'rgba(0,0,0,0.06)',
-          color: granted ? '#fff' : 'var(--ol-ink-3)',
+          borderRadius: 'var(--ol-pill-radius)',
+          background: granted ? 'var(--ol-accent-solid-bg)' : 'rgba(0,0,0,0.06)',
+          color: granted ? 'var(--ol-accent-solid-ink)' : 'var(--ol-ink-3)',
           display: 'inline-flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -558,9 +558,9 @@ function PermissionStep({ index, title, desc, status, actionLabel, onAction, dis
           fontWeight: 500,
           fontFamily: 'inherit',
           border: 0,
-          borderRadius: 8,
-          background: granted ? 'var(--ol-surface-2)' : 'var(--ol-ink)',
-          color: granted ? 'var(--ol-ink-3)' : '#fff',
+          borderRadius: 'var(--ol-control-radius)',
+          background: granted ? 'var(--ol-surface-2)' : 'var(--ol-primary-solid-bg)',
+          color: granted ? 'var(--ol-ink-3)' : 'var(--ol-primary-solid-ink)',
           cursor: disabled ? 'not-allowed' : 'default',
           opacity: disabled && !granted ? 0.6 : 1,
           transition: 'background 0.16s var(--ol-motion-quick), color 0.16s var(--ol-motion-quick), opacity 0.18s var(--ol-motion-soft), transform 0.12s var(--ol-motion-quick)',
@@ -580,9 +580,9 @@ const primaryButtonStyle = {
   fontWeight: 600,
   fontFamily: 'inherit',
   border: 0,
-  borderRadius: 10,
-  background: 'var(--ol-ink)',
-  color: '#fff',
+  borderRadius: 'var(--ol-r-md)',
+  background: 'var(--ol-primary-solid-bg)',
+  color: 'var(--ol-primary-solid-ink)',
   cursor: 'default',
 } as const;
 
@@ -594,7 +594,7 @@ const secondaryButtonStyle = {
   fontWeight: 600,
   fontFamily: 'inherit',
   border: '0.5px solid var(--ol-line-strong)',
-  borderRadius: 10,
+  borderRadius: 'var(--ol-r-md)',
   background: 'var(--ol-surface)',
   color: 'var(--ol-ink-2)',
   cursor: 'default',
@@ -607,7 +607,7 @@ const plainButtonStyle = {
   fontWeight: 500,
   fontFamily: 'inherit',
   border: 0,
-  borderRadius: 8,
+  borderRadius: 'var(--ol-control-radius)',
   background: 'transparent',
   color: 'var(--ol-ink-4)',
   cursor: 'default',
@@ -616,7 +616,7 @@ const plainButtonStyle = {
 const footerHintStyle = {
   marginTop: 18,
   padding: '12px 14px',
-  borderRadius: 8,
+  borderRadius: 'var(--ol-control-radius)',
   background: 'var(--ol-surface-2)',
   fontSize: 11.5,
   color: 'var(--ol-ink-3)',
diff --git a/openless-all/app/src/components/SettingsModal.tsx b/openless-all/app/src/components/SettingsModal.tsx
index f55a682f..8a8f902e 100644
--- a/openless-all/app/src/components/SettingsModal.tsx
+++ b/openless-all/app/src/components/SettingsModal.tsx
@@ -80,6 +80,7 @@ export function SettingsModal({ os: _os, onClose, initialSettingsSection }: Sett
 
       <div
         className="ol-aura-settings"
+        data-ol-mobile={mobile ? 'true' : 'false'}
         onClick={(e) => e.stopPropagation()}
         style={{
           width: '100%',
@@ -175,7 +176,7 @@ export function SettingsModal({ os: _os, onClose, initialSettingsSection }: Sett
             onClick={onClose}
             style={{
               position: 'absolute', top: 14, right: 14, zIndex: 2,
-              width: 28, height: 28, border: 0, borderRadius: 999,
+              width: 28, height: 28, border: 0, borderRadius: 'var(--ol-pill-radius)',
               display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
               cursor: 'default',
             }}
@@ -210,73 +211,6 @@ export function SettingsModal({ os: _os, onClose, initialSettingsSection }: Sett
           </div>
         </div>
       </div>
-      <style>{`
-        .ol-aura-settings {
-          background: var(--ol-panel-bg);
-          border-radius: ${mobile ? '0' : 'var(--ol-shell-radius)'};
-          border: 1px solid var(--ol-panel-border);
-          box-shadow: var(--ol-panel-shadow);
-        }
-        .ol-aura-settings-rail {
-          padding: ${mobile ? 'calc(10px + env(safe-area-inset-top, 0px)) 10px 8px' : '20px 14px'};
-          gap: ${mobile ? '8px' : '16px'};
-          background: var(--ol-settings-rail-bg);
-          border-right: ${mobile ? '0' : '1px solid var(--ol-settings-rail-border)'};
-          border-bottom: ${mobile ? '1px solid var(--ol-settings-rail-border)' : '0'};
-        }
-        .ol-aura-settings-pill {
-          background: var(--ol-sidebar-pill-bg);
-          border-radius: 12px;
-          border: 1px solid var(--ol-sidebar-pill-border);
-          box-shadow: none;
-        }
-        .ol-aura-settings-nav-btn {
-          padding: ${mobile ? '8px 11px' : '7px 10px'};
-          border-radius: 12px;
-          border: 0;
-          background: transparent;
-          font-family: inherit;
-          font-size: 13px;
-          cursor: default;
-          text-align: left;
-          position: relative;
-          z-index: 1;
-          transition: color 0.16s var(--ol-motion-quick), background 0.16s var(--ol-motion-quick);
-        }
-        .ol-aura-settings-nav-btn.ol-nav-btn-active {
-          background: ${mobile ? 'var(--ol-sidebar-pill-bg)' : 'transparent'};
-          border: ${mobile ? '1px solid var(--ol-sidebar-pill-border)' : '0'};
-        }
-        .ol-aura-settings-links {
-          display: flex;
-          flex-direction: ${mobile ? 'row' : 'column'};
-          gap: 1px;
-          padding-top: ${mobile ? '0' : '10px'};
-          padding-left: ${mobile ? '8px' : '0'};
-          border-top: ${mobile ? '0' : '1px solid var(--ol-settings-links-border)'};
-          border-left: ${mobile ? '1px solid var(--ol-settings-links-border)' : '0'};
-          overflow-x: ${mobile ? 'auto' : 'visible'};
-        }
-        .ol-aura-settings-content {
-          background: var(--ol-settings-content-bg);
-        }
-        .ol-aura-settings-close {
-          background: var(--ol-settings-close-bg);
-          color: var(--ol-ink-3);
-          transition: background 0.16s var(--ol-motion-quick);
-        }
-        .ol-aura-settings-close:hover {
-          background: var(--ol-settings-close-hover-bg);
-        }
-        .ol-aura-settings-title {
-          padding: ${mobile ? '16px 48px 8px 16px' : '24px 28px 10px'};
-          font-size: ${mobile ? '20px' : '22px'};
-          font-weight: 600;
-          letter-spacing: -0.02em;
-          font-family: var(--ol-font-display);
-          color: var(--ol-ink);
-        }
-      `}</style>
     </div>
   );
 }
diff --git a/openless-all/app/src/components/ShortcutRecorder.tsx b/openless-all/app/src/components/ShortcutRecorder.tsx
index fad6e257..5106222d 100644
--- a/openless-all/app/src/components/ShortcutRecorder.tsx
+++ b/openless-all/app/src/components/ShortcutRecorder.tsx
@@ -128,10 +128,10 @@ export function ShortcutRecorder({
   const recordButtonStyle: CSSProperties = {
     fontSize: 12,
     padding: '5px 14px',
-    background: recording ? 'rgba(37,99,235,0.12)' : 'var(--ol-blue)',
-    color: recording ? 'var(--ol-blue)' : '#fff',
+    background: recording ? 'rgba(37,99,235,0.12)' : 'var(--ol-accent-solid-bg)',
+    color: recording ? 'var(--ol-blue)' : 'var(--ol-accent-solid-ink)',
     border: 0,
-    borderRadius: 6,
+    borderRadius: 'var(--ol-r-sm)',
     fontFamily: 'inherit',
     fontWeight: 500,
     cursor: recording || disabled ? 'default' : 'pointer',
@@ -144,7 +144,7 @@ export function ShortcutRecorder({
     background: 'transparent',
     color: 'var(--ol-ink-4)',
     border: '0.5px solid var(--ol-line-strong)',
-    borderRadius: 6,
+    borderRadius: 'var(--ol-r-sm)',
     fontFamily: 'inherit',
     fontWeight: 500,
     cursor: recording ? 'default' : 'pointer',
@@ -160,7 +160,7 @@ export function ShortcutRecorder({
   return (
     <div style={rootStyle}>
       <div style={recorderRowStyle}>
-        <span style={{ padding: '4px 10px', borderRadius: 6, background: 'rgba(0,0,0,0.06)', fontSize: 13, fontFamily: 'var(--ol-font-mono)', fontWeight: 500, color: 'var(--ol-ink)' }}>
+        <span style={{ padding: '4px 10px', borderRadius: 'var(--ol-r-sm)', background: 'rgba(0,0,0,0.06)', fontSize: 13, fontFamily: 'var(--ol-font-mono)', fontWeight: 500, color: 'var(--ol-ink)' }}>
           {formatComboLabel(value)}
         </span>
         <div style={controlsGroupStyle}>
@@ -195,7 +195,7 @@ export function ShortcutRecorder({
           tabIndex={-1}
           onKeyDown={onKeyDown}
           onKeyUp={onKeyUp}
-          style={{ padding: '8px 12px', borderRadius: 8, background: 'rgba(37,99,235,0.06)', border: '1px solid rgba(37,99,235,0.2)', fontSize: 12, color: 'var(--ol-blue)', outline: 'none' }}
+          style={{ padding: '8px 12px', borderRadius: 'var(--ol-control-radius)', background: 'rgba(37,99,235,0.06)', border: '1px solid rgba(37,99,235,0.2)', fontSize: 12, color: 'var(--ol-blue)', outline: 'none' }}
           ref={el => el?.focus()}
         >
           {t('settings.recording.comboRecordHint')}
diff --git a/openless-all/app/src/components/ui/Modal.tsx b/openless-all/app/src/components/ui/Modal.tsx
index e84d376a..91594cab 100644
--- a/openless-all/app/src/components/ui/Modal.tsx
+++ b/openless-all/app/src/components/ui/Modal.tsx
@@ -22,7 +22,7 @@ export function Modal({ children, onClose, zIndex = 50, width = 'min(560px, 100%
       style={{
         position: 'fixed',
         inset: 0,
-        background: 'rgba(0,0,0,0.22)',
+        background: 'var(--ol-overlay-bg)',
         display: 'grid',
         placeItems: 'center',
         zIndex,
@@ -36,10 +36,10 @@ export function Modal({ children, onClose, zIndex = 50, width = 'min(560px, 100%
           width,
           maxHeight: '85vh',
           overflow: 'auto',
-          borderRadius: 16,
-          background: 'var(--ol-surface)',
-          border: '0.5px solid var(--ol-line-strong)',
-          boxShadow: '0 18px 42px rgba(0,0,0,0.18)',
+          borderRadius: 'var(--ol-modal-radius)',
+          background: 'var(--ol-card-bg)',
+          border: '0.5px solid var(--ol-card-border)',
+          boxShadow: 'var(--ol-shadow-lg)',
           padding: 22,
           animation: 'ol-modal-card-in 0.24s var(--ol-motion-spring)',
         }}
diff --git a/openless-all/app/src/components/ui/SegSimple.tsx b/openless-all/app/src/components/ui/SegSimple.tsx
index 802df27a..20a9e0ec 100644
--- a/openless-all/app/src/components/ui/SegSimple.tsx
+++ b/openless-all/app/src/components/ui/SegSimple.tsx
@@ -10,17 +10,17 @@ interface SegSimpleProps {
 export function SegSimple({ options, active }: SegSimpleProps) {
   const [v, setV] = useState(active);
   return (
-    <div style={{ display: 'inline-flex', padding: 2, borderRadius: 8, background: 'rgba(0,0,0,0.05)' }}>
+    <div style={{ display: 'inline-flex', padding: 2, borderRadius: 'var(--ol-control-radius)', background: 'var(--ol-segmented-bg)' }}>
       {options.map((o) => (
         <button
           key={o}
           onClick={() => setV(o)}
           style={{
-            padding: '5px 12px', fontSize: 12, fontWeight: 500, border: 0, borderRadius: 6,
+            padding: '5px 12px', fontSize: 12, fontWeight: 500, border: 0, borderRadius: 'var(--ol-r-sm)',
             fontFamily: 'inherit',
-            background: v === o ? '#fff' : 'transparent',
+            background: v === o ? 'var(--ol-segmented-active-bg)' : 'transparent',
             color: v === o ? 'var(--ol-ink)' : 'var(--ol-ink-3)',
-            boxShadow: v === o ? '0 1px 2px rgba(0,0,0,.08)' : 'none',
+            boxShadow: v === o ? 'var(--ol-segmented-active-shadow)' : 'none',
             cursor: 'default',
           }}
         >
diff --git a/openless-all/app/src/components/ui/SelectLite.tsx b/openless-all/app/src/components/ui/SelectLite.tsx
index ec3ebebe..45f87e7f 100644
--- a/openless-all/app/src/components/ui/SelectLite.tsx
+++ b/openless-all/app/src/components/ui/SelectLite.tsx
@@ -60,7 +60,7 @@ const DEFAULT_TRIGGER_STYLE: CSSProperties = {
   height: 32,
   fontSize: 12.5,
   fontFamily: 'inherit',
-  borderRadius: 8,
+  borderRadius: 'var(--ol-control-radius)',
   border: '0.5px solid var(--ol-line-strong)',
   background: 'var(--ol-surface-2)',
   color: 'var(--ol-ink)',
@@ -322,12 +322,12 @@ export function SelectLite({
             maxHeight: 280,
             overflowY: 'auto',
             padding: 4,
-            borderRadius: 10,
-            border: '0.5px solid rgba(0, 0, 0, 0.10)',
-            background: 'rgba(252, 252, 254, 0.94)',
-            backdropFilter: 'blur(20px) saturate(180%)',
-            WebkitBackdropFilter: 'blur(20px) saturate(180%)',
-            boxShadow: '0 12px 30px -10px rgba(15, 17, 22, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.06)',
+            borderRadius: 'var(--ol-r-md)',
+            border: '0.5px solid var(--ol-line-strong)',
+            background: 'var(--ol-glass-bg-strong)',
+            backdropFilter: 'blur(var(--ol-glass-blur)) saturate(180%)',
+            WebkitBackdropFilter: 'blur(var(--ol-glass-blur)) saturate(180%)',
+            boxShadow: 'var(--ol-shadow-md)',
             zIndex: 9999,
             fontFamily: 'inherit',
             fontSize: 12.5,
@@ -357,11 +357,11 @@ export function SelectLite({
                   alignItems: 'center',
                   gap: 8,
                   padding: '7px 10px',
-                  borderRadius: 6,
+                  borderRadius: 'var(--ol-r-sm)',
                   cursor: option.disabled ? 'not-allowed' : 'default',
                   opacity: option.disabled ? 0.45 : 1,
                   background: isHighlighted && !option.disabled
-                    ? 'rgba(37, 99, 235, 0.10)'
+                    ? 'var(--ol-blue-soft)'
                     : 'transparent',
                   color: isSelected ? 'var(--ol-blue)' : 'var(--ol-ink)',
                   fontWeight: isSelected ? 600 : 500,
diff --git a/openless-all/app/src/components/ui/SwitchLite.tsx b/openless-all/app/src/components/ui/SwitchLite.tsx
index 56181127..691fb1c7 100644
--- a/openless-all/app/src/components/ui/SwitchLite.tsx
+++ b/openless-all/app/src/components/ui/SwitchLite.tsx
@@ -14,8 +14,8 @@ export function SwitchLite({ on: initial = false }: SwitchLiteProps) {
       className="ol-focus-ring"
       onClick={() => setOn(!on)}
       style={{
-        position: 'relative', width: 32, height: 18, borderRadius: 999, border: 0,
-        background: on ? 'var(--ol-blue)' : 'rgba(0,0,0,0.18)',
+        position: 'relative', width: 32, height: 18, borderRadius: 'var(--ol-pill-radius)', border: 0,
+        background: on ? 'var(--ol-blue)' : 'var(--ol-toggle-off-bg)',
         cursor: 'default',
         outline: 'none',
       }}
@@ -23,7 +23,7 @@ export function SwitchLite({ on: initial = false }: SwitchLiteProps) {
       <span
         style={{
           position: 'absolute', top: 2, left: on ? 16 : 2,
-          width: 14, height: 14, borderRadius: 999, background: '#fff',
+          width: 14, height: 14, borderRadius: 'var(--ol-pill-radius)', background: 'var(--ol-toggle-knob)',
           boxShadow: '0 1px 2px rgba(0,0,0,.25)', transition: 'left .16s var(--ol-motion-spring)',
         }}
       />
diff --git a/openless-all/app/src/pages/History.tsx b/openless-all/app/src/pages/History.tsx
index 371c7d42..f51c7ad6 100644
--- a/openless-all/app/src/pages/History.tsx
+++ b/openless-all/app/src/pages/History.tsx
@@ -238,7 +238,7 @@ export function History() {
             <div style={{
               display: 'flex', alignItems: 'center', gap: 6,
               padding: '6px 10px',
-              border: '0.5px solid var(--ol-line-strong)', borderRadius: 8,
+              border: '0.5px solid var(--ol-line-strong)', borderRadius: 'var(--ol-control-radius)',
               background: 'var(--ol-surface-2)', color: 'var(--ol-ink-3)',
             }}>
               <Icon name="search" size={12} />
@@ -264,7 +264,7 @@ export function History() {
                   key={f.id}
                   onClick={() => setFilter(f.id)}
                   style={{
-                    padding: '3px 9px', fontSize: 11, borderRadius: 999,
+                    padding: '3px 9px', fontSize: 11, borderRadius: 'var(--ol-pill-radius)',
                     border: '0.5px solid ' + (filter === f.id ? 'var(--ol-pill-selected-border)' : 'var(--ol-line-strong)'),
                     background: filter === f.id ? 'var(--ol-pill-selected-bg)' : 'transparent',
                     color: filter === f.id ? 'var(--ol-pill-selected-ink)' : 'var(--ol-ink-3)',
@@ -277,7 +277,7 @@ export function History() {
           </div>
           <div className="ol-thinscroll" style={{ flex: 1, overflow: 'auto', padding: 6 }}>
             {actionError && (
-              <div style={{ margin: 8, padding: '9px 10px', borderRadius: 8, background: 'rgba(239,68,68,0.08)', color: 'var(--ol-red, #ef4444)', fontSize: 12, lineHeight: 1.45 }}>
+              <div style={{ margin: 8, padding: '9px 10px', borderRadius: 'var(--ol-control-radius)', background: 'rgba(239,68,68,0.08)', color: 'var(--ol-red, #ef4444)', fontSize: 12, lineHeight: 1.45 }}>
                 {actionError}
               </div>
             )}
@@ -302,7 +302,7 @@ export function History() {
                 style={{
                   width: '100%', padding: '10px 12px', textAlign: 'left',
                   display: 'flex', flexDirection: 'column', gap: 4,
-                  border: 0, borderRadius: 8,
+                  border: 0, borderRadius: 'var(--ol-control-radius)',
                   background: selectedId === s.id ? 'rgba(37,99,235,0.06)' : 'transparent',
                   boxShadow: selectedId === s.id ? 'inset 2px 0 0 var(--ol-blue)' : 'none',
                   cursor: 'default', fontFamily: 'inherit', marginBottom: 1,
@@ -363,13 +363,13 @@ export function History() {
                 />
               )}
               <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: 12 }}>
-                <div style={{ padding: 14, border: '0.5px solid var(--ol-line)', borderRadius: 10, background: 'var(--ol-surface-2)' }}>
+                <div style={{ padding: 14, border: '0.5px solid var(--ol-line)', borderRadius: 'var(--ol-r-md)', background: 'var(--ol-surface-2)' }}>
                   <Pill size="sm" tone="outline" style={{ marginBottom: 10 }}>{t('history.rawLabel')}</Pill>
                   <p style={{ margin: 0, fontSize: 13, lineHeight: 1.7, color: 'var(--ol-ink-2)', whiteSpace: 'pre-wrap' }}>
                     {item.rawTranscript || t('history.rawEmpty')}
                   </p>
                 </div>
-                <div style={{ padding: 14, border: '0.5px solid var(--ol-blue)', borderRadius: 10, background: 'var(--ol-blue-soft)' }}>
+                <div style={{ padding: 14, border: '0.5px solid var(--ol-blue)', borderRadius: 'var(--ol-r-md)', background: 'var(--ol-blue-soft)' }}>
                   <Pill size="sm" tone="blue" style={{ marginBottom: 10 }}>{MODE_LABEL[item.mode]}</Pill>
                   <p style={{ margin: 0, fontSize: 13, lineHeight: 1.7, color: 'var(--ol-ink)', whiteSpace: 'pre-line' }}>
                     {item.finalText}
diff --git a/openless-all/app/src/pages/LessComputerPanel.tsx b/openless-all/app/src/pages/LessComputerPanel.tsx
index 206c0e85..fe729b5e 100644
--- a/openless-all/app/src/pages/LessComputerPanel.tsx
+++ b/openless-all/app/src/pages/LessComputerPanel.tsx
@@ -414,11 +414,11 @@ const shellStyle: CSSProperties = {
   height: '100vh',
   display: 'flex',
   flexDirection: 'column',
-  borderRadius: 14,
+  borderRadius: 'var(--ol-bubble-radius)',
   overflow: 'hidden',
-  border: '0.5px solid rgba(0, 0, 0, 0.12)',
-  background: 'rgba(246, 247, 250, 0.88)',
-  boxShadow: '0 18px 44px -18px rgba(15,17,22,.28), 0 0 0 0.5px rgba(255,255,255,.7) inset',
+  border: '0.5px solid var(--ol-line-strong)',
+  background: 'var(--ol-panel-bg)',
+  boxShadow: 'var(--ol-shadow-lg)',
   fontFamily: 'var(--ol-font-sans)',
   color: 'var(--ol-ink)',
   isolation: 'isolate',
@@ -430,9 +430,8 @@ const toolbarStyle: CSSProperties = {
   alignItems: 'center',
   padding: '0 8px',
   borderBottom: '0.5px solid rgba(0, 0, 0, 0.08)',
-  background:
-    'linear-gradient(180deg, rgba(255,255,255,0.74), rgba(238,240,245,0.58))',
-  boxShadow: '0 1px 0 rgba(255,255,255,.55) inset',
+  background: 'var(--ol-panel-bg)',
+  boxShadow: 'var(--ol-shadow-sm)',
   backdropFilter: 'blur(18px) saturate(150%)',
   WebkitBackdropFilter: 'blur(18px) saturate(150%)',
   flexShrink: 0,
@@ -444,7 +443,7 @@ const closeBtnStyle: CSSProperties = {
   width: 22,
   height: 22,
   border: 0,
-  borderRadius: 6,
+  borderRadius: 'var(--ol-r-sm)',
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -479,10 +478,10 @@ const roleLabelStyle: CSSProperties = {
 const userBubbleStyle: CSSProperties = {
   maxWidth: '85%',
   padding: '8px 12px',
-  borderRadius: 14,
+  borderRadius: 'var(--ol-bubble-radius)',
   borderBottomRightRadius: 4,
-  background: 'var(--ol-blue)',
-  color: '#fff',
+  background: 'var(--ol-accent-solid-bg)',
+  color: 'var(--ol-accent-solid-ink)',
   fontSize: 13,
   lineHeight: 1.55,
   wordBreak: 'break-word',
@@ -491,7 +490,7 @@ const userBubbleStyle: CSSProperties = {
 const assistantBubbleStyle: CSSProperties = {
   maxWidth: '92%',
   padding: '8px 12px',
-  borderRadius: 14,
+  borderRadius: 'var(--ol-bubble-radius)',
   borderBottomLeftRadius: 4,
   background: 'rgba(0,0,0,0.04)',
   fontSize: 13,
@@ -519,7 +518,7 @@ const toolChipStyle: CSSProperties = {
   color: 'var(--ol-ink-2)',
   background: 'rgba(0,0,0,0.045)',
   border: '0.5px solid rgba(0,0,0,0.06)',
-  borderRadius: 8,
+  borderRadius: 'var(--ol-control-radius)',
   padding: '4px 8px',
 };
 
@@ -543,7 +542,7 @@ const approvalCardStyle: CSSProperties = {
   flexDirection: 'column',
   gap: 6,
   padding: '10px 12px',
-  borderRadius: 12,
+  borderRadius: 'var(--ol-r-lg)',
   background: 'rgba(220,38,38,0.05)',
   border: '0.5px solid rgba(220,38,38,0.20)',
 };
@@ -553,7 +552,7 @@ const approvalCmdStyle: CSSProperties = {
   fontSize: 11.5,
   color: 'var(--ol-ink)',
   background: 'rgba(0,0,0,0.05)',
-  borderRadius: 6,
+  borderRadius: 'var(--ol-r-sm)',
   padding: '5px 8px',
   wordBreak: 'break-all',
 };
@@ -564,25 +563,25 @@ const approvalRerunWarningStyle: CSSProperties = {
   color: 'rgb(180,83,9)',
   background: 'rgba(245,158,11,0.10)',
   border: '0.5px solid rgba(245,158,11,0.25)',
-  borderRadius: 6,
+  borderRadius: 'var(--ol-r-sm)',
   padding: '5px 8px',
 };
 
 const approveBtnStyle: CSSProperties = {
   flex: 1,
   border: 0,
-  borderRadius: 8,
+  borderRadius: 'var(--ol-control-radius)',
   padding: '6px 10px',
   fontSize: 12,
   fontWeight: 600,
   cursor: 'default',
-  background: 'var(--ol-blue)',
-  color: '#fff',
+  background: 'var(--ol-accent-solid-bg)',
+  color: 'var(--ol-accent-solid-ink)',
 };
 
 const denyBtnStyle: CSSProperties = {
   flex: 1,
-  borderRadius: 8,
+  borderRadius: 'var(--ol-control-radius)',
   padding: '6px 10px',
   fontSize: 12,
   fontWeight: 600,
@@ -594,7 +593,7 @@ const denyBtnStyle: CSSProperties = {
 
 const errorRowStyle: CSSProperties = {
   padding: '8px 12px',
-  borderRadius: 10,
+  borderRadius: 'var(--ol-r-md)',
   background: 'rgba(220,38,38,0.06)',
   border: '0.5px solid rgba(220,38,38,0.18)',
 };
@@ -633,7 +632,7 @@ const globalCss = `
                       padding: 1px 5px; border-radius: 4px;
                       background: rgba(0,0,0,0.05); }
 .lc-answer pre      { margin: 0 0 6px; padding: 8px 10px;
-                      border-radius: 8px; background: rgba(0,0,0,0.05);
+                      border-radius: var(--ol-control-radius); background: rgba(0,0,0,0.05);
                       overflow-x: auto; }
 .lc-answer pre code { padding: 0; background: transparent; }
 .lc-answer a        { color: var(--ol-blue); text-decoration: none; }
diff --git a/openless-all/app/src/pages/LocalAsr.tsx b/openless-all/app/src/pages/LocalAsr.tsx
index 5c5624a8..62589498 100644
--- a/openless-all/app/src/pages/LocalAsr.tsx
+++ b/openless-all/app/src/pages/LocalAsr.tsx
@@ -1842,7 +1842,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
                                         style={{
                                             fontSize: 13,
                                             padding: "6px 10px",
-                                            borderRadius: 8,
+                                            borderRadius: 'var(--ol-control-radius)',
                                             border: "0.5px solid rgba(0,0,0,0.12)",
                                             background: "var(--ol-surface)",
                                             color: "var(--ol-ink)",
@@ -1903,7 +1903,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
                                         style={{
                                             fontSize: 13,
                                             padding: "6px 10px",
-                                            borderRadius: 8,
+                                            borderRadius: 'var(--ol-control-radius)',
                                             border: "0.5px solid rgba(0,0,0,0.12)",
                                             background: "var(--ol-surface)",
                                             color: "var(--ol-ink)",
@@ -1954,7 +1954,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
                                         style={{
                                             fontSize: 13,
                                             padding: "6px 10px",
-                                            borderRadius: 8,
+                                            borderRadius: 'var(--ol-control-radius)',
                                             border: "0.5px solid rgba(0,0,0,0.12)",
                                             background: "var(--ol-surface)",
                                             color: "var(--ol-ink)",
@@ -2266,7 +2266,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
                                             fontSize: 13,
                                             height: 31,
                                             padding: "0 10px",
-                                            borderRadius: 8,
+                                            borderRadius: 'var(--ol-control-radius)',
                                             border: "0.5px solid rgba(0,0,0,0.12)",
                                             background: "var(--ol-surface)",
                                             color: "var(--ol-ink)",
@@ -2301,7 +2301,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
                                             fontSize: 13,
                                             height: 31,
                                             padding: "0 10px",
-                                            borderRadius: 8,
+                                            borderRadius: 'var(--ol-control-radius)',
                                             border: "0.5px solid rgba(0,0,0,0.12)",
                                             background: "var(--ol-surface)",
                                             color: "var(--ol-ink)",
@@ -2334,7 +2334,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
                                             fontSize: 13,
                                             height: 31,
                                             padding: "0 10px",
-                                            borderRadius: 8,
+                                            borderRadius: 'var(--ol-control-radius)',
                                             border: "0.5px solid rgba(0,0,0,0.12)",
                                             background: "var(--ol-surface)",
                                             color: "var(--ol-ink)",
@@ -2613,7 +2613,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
                                 style={{
                                     fontSize: 13,
                                     padding: "6px 10px",
-                                    borderRadius: 8,
+                                    borderRadius: 'var(--ol-control-radius)',
                                     border: "0.5px solid rgba(0,0,0,0.12)",
                                     background: "var(--ol-surface)",
                                     color: "var(--ol-ink)",
@@ -2741,7 +2741,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
                                         style={{
                                             fontSize: 13,
                                             padding: "6px 10px",
-                                            borderRadius: 8,
+                                            borderRadius: 'var(--ol-control-radius)',
                                             border: "0.5px solid rgba(0,0,0,0.12)",
                                             background: "var(--ol-surface)",
                                             color: "var(--ol-ink)",
@@ -2905,7 +2905,7 @@ function FoundryPrepareProgressBlock({
         <div
             style={{
                 padding: "10px 12px",
-                borderRadius: 8,
+                borderRadius: 'var(--ol-control-radius)',
                 background: "rgba(0,0,0,0.035)",
                 display: "flex",
                 flexDirection: "column",
@@ -3040,7 +3040,7 @@ function DownloadProgressBlock({
         <div
             style={{
                 padding: "10px 12px",
-                borderRadius: 8,
+                borderRadius: 'var(--ol-control-radius)',
                 background: "rgba(0,0,0,0.035)",
                 display: "flex",
                 flexDirection: "column",
@@ -3367,7 +3367,7 @@ function TestResultBlock({
                 background: hasError
                     ? "rgba(255, 220, 220, 0.5)"
                     : "rgba(0, 0, 0, 0.04)",
-                borderRadius: 8,
+                borderRadius: 'var(--ol-control-radius)',
                 fontSize: 12.5,
                 color: hasError ? "#9b2c2c" : "var(--ol-ink-2)",
                 lineHeight: 1.6,
diff --git a/openless-all/app/src/pages/Marketplace.tsx b/openless-all/app/src/pages/Marketplace.tsx
index 398e2b64..b533742e 100644
--- a/openless-all/app/src/pages/Marketplace.tsx
+++ b/openless-all/app/src/pages/Marketplace.tsx
@@ -426,7 +426,7 @@ export function Marketplace() {
               title={currentLogin ? t('marketplace.myPacks.buttonTitle', { login: currentLogin }) : t('marketplace.myPacks.buttonTitleEmpty')}
               style={{
                 display: 'inline-flex', alignItems: 'center', gap: 8,
-                height: 30, padding: '0 12px', borderRadius: 9,
+                height: 30, padding: '0 12px', borderRadius: 'var(--ol-control-radius)',
                 border: '0.5px solid var(--ol-line-strong)',
                 background: 'var(--ol-surface)',
                 color: 'var(--ol-ink-2)',
@@ -436,7 +436,7 @@ export function Marketplace() {
               }}
             >
               <span style={{
-                width: 18, height: 18, borderRadius: 999,
+                width: 18, height: 18, borderRadius: 'var(--ol-pill-radius)',
                 display: 'inline-grid', placeItems: 'center',
                 background: 'rgba(15,23,42,0.06)',
                 fontSize: 10, fontWeight: 750,
@@ -469,7 +469,7 @@ export function Marketplace() {
             gap: 6,
             padding: '6px 10px',
             border: '0.5px solid var(--ol-line-strong)',
-            borderRadius: 10,
+            borderRadius: 'var(--ol-r-md)',
             background: 'var(--ol-surface)',
           }}
         >
@@ -498,7 +498,7 @@ export function Marketplace() {
                 padding: '6px 10px',
                 fontSize: 12,
                 border: '0.5px solid var(--ol-line-strong)',
-                borderRadius: 8,
+                borderRadius: 'var(--ol-control-radius)',
                 cursor: 'pointer',
                 background: sort === p.id ? 'var(--ol-blue-soft)' : 'var(--ol-surface)',
                 color: sort === p.id ? 'var(--ol-blue)' : 'var(--ol-ink-2)',
@@ -567,7 +567,7 @@ export function Marketplace() {
                 style={{
                   textAlign: 'left',
                   padding: 14,
-                  borderRadius: 12,
+                  borderRadius: 'var(--ol-r-lg)',
                   border: '0.5px solid var(--ol-line-strong)',
                   background: 'var(--ol-surface)',
                   cursor: 'pointer',
@@ -644,7 +644,7 @@ export function Marketplace() {
                 style={{
                   padding: 12,
                   border: '0.5px solid var(--ol-line)',
-                  borderRadius: 10,
+                  borderRadius: 'var(--ol-r-md)',
                   background: 'var(--ol-surface-2)',
                   marginBottom: 14,
                   maxHeight: 280,
@@ -679,7 +679,7 @@ export function Marketplace() {
                       border: 'none',
                       cursor: 'pointer',
                       padding: '4px 8px',
-                      borderRadius: 8,
+                      borderRadius: 'var(--ol-control-radius)',
                       fontSize: 12,
                       fontWeight: 500,
                       color: 'var(--ol-ink-2)'
@@ -744,7 +744,7 @@ export function Marketplace() {
                       textAlign: 'left',
                       padding: 10,
                       border: selected ? '1px solid var(--ol-blue)' : '0.5px solid var(--ol-line-strong)',
-                      borderRadius: 8,
+                      borderRadius: 'var(--ol-control-radius)',
                       background: selected ? 'var(--ol-blue-soft)' : 'var(--ol-surface)',
                       cursor: 'pointer',
                       display: 'flex',
@@ -755,11 +755,11 @@ export function Marketplace() {
                     {/* 选中圈：未选空圆，选中蓝实心 + 白勾 */}
                     <span style={{
                       flexShrink: 0,
-                      width: 18, height: 18, borderRadius: 999,
-                      border: selected ? '1px solid var(--ol-blue)' : '1px solid var(--ol-line-strong)',
-                      background: selected ? 'var(--ol-blue)' : 'transparent',
+                      width: 18, height: 18, borderRadius: 'var(--ol-pill-radius)',
+                      border: selected ? '1px solid var(--ol-accent-solid-bg)' : '1px solid var(--ol-line-strong)',
+                      background: selected ? 'var(--ol-accent-solid-bg)' : 'transparent',
                       display: 'inline-grid', placeItems: 'center',
-                      color: '#fff', fontSize: 11, fontWeight: 700,
+                      color: 'var(--ol-accent-solid-ink)', fontSize: 11, fontWeight: 700,
                       transition: 'background 0.12s, border-color 0.12s',
                     }}>
                       {selected && '✓'}
@@ -814,7 +814,7 @@ export function Marketplace() {
                 gap: 6,
                 padding: '6px 10px',
                 border: '0.5px solid var(--ol-line-strong)',
-                borderRadius: 10,
+                borderRadius: 'var(--ol-r-md)',
                 background: 'var(--ol-surface)',
               }}
             >
@@ -843,7 +843,7 @@ export function Marketplace() {
               onClick={() => setShowLogin(true)}
               style={{
                 display: 'inline-flex', alignItems: 'center', gap: 6,
-                padding: '5px 10px', borderRadius: 9,
+                padding: '5px 10px', borderRadius: 'var(--ol-control-radius)',
                 border: '0.5px solid var(--ol-line-strong)',
                 background: currentLogin ? 'var(--ol-blue-soft)' : 'var(--ol-surface)',
                 color: currentLogin ? 'var(--ol-blue)' : 'var(--ol-ink-3)',
@@ -853,7 +853,7 @@ export function Marketplace() {
               }}
             >
               <span style={{
-                width: 18, height: 18, borderRadius: 999,
+                width: 18, height: 18, borderRadius: 'var(--ol-pill-radius)',
                 display: 'inline-grid', placeItems: 'center',
                 background: currentLogin ? 'rgba(37,99,235,0.14)' : 'rgba(15,23,42,0.06)',
                 fontSize: 10, fontWeight: 750,
@@ -869,7 +869,7 @@ export function Marketplace() {
               title={t('common.close')}
               onClick={() => setShowMyPacks(false)}
               style={{
-                width: 30, height: 30, borderRadius: 9,
+                width: 30, height: 30, borderRadius: 'var(--ol-control-radius)',
                 display: 'inline-grid', placeItems: 'center',
                 border: '0.5px solid var(--ol-line-strong)',
                 background: 'var(--ol-surface)',
@@ -965,7 +965,7 @@ export function Marketplace() {
                   key={pack.id}
                   style={{
                     padding: 14,
-                    borderRadius: 12,
+                    borderRadius: 'var(--ol-r-lg)',
                     border: '0.5px solid var(--ol-line-strong)',
                     background: 'var(--ol-surface)',
                     display: 'flex',
diff --git a/openless-all/app/src/pages/Overview.tsx b/openless-all/app/src/pages/Overview.tsx
index 8dadbc82..84d5bdcd 100644
--- a/openless-all/app/src/pages/Overview.tsx
+++ b/openless-all/app/src/pages/Overview.tsx
@@ -289,7 +289,7 @@ function ProviderCard({ kind, name, subname, status }: ProviderCardProps) {
     <Card padding={mobile ? 14 : 16} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
       <div
         style={{
-          width: 38, height: 38, borderRadius: 10,
+          width: 38, height: 38, borderRadius: 'var(--ol-r-md)',
           background: 'var(--ol-blue-soft)',
           color: 'var(--ol-blue)',
           display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -302,7 +302,7 @@ function ProviderCard({ kind, name, subname, status }: ProviderCardProps) {
           <span style={{ fontSize: 11, color: 'var(--ol-ink-4)', fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase' }}>{kind}</span>
           {status === 'configured' && (
             <Pill tone="ok" size="sm">
-              <span style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--ol-ok)' }} />
+              <span style={{ width: 5, height: 5, borderRadius: 'var(--ol-pill-radius)', background: 'var(--ol-ok)' }} />
               {t('overview.statusConfigured')}
             </Pill>
           )}
@@ -573,20 +573,20 @@ function InAppDictationControl() {
         style={{
           width: 52,
           height: 52,
-          borderRadius: 999,
+          borderRadius: 'var(--ol-pill-radius)',
           border: 0,
           display: 'inline-flex',
           alignItems: 'center',
           justifyContent: 'center',
-          background: recording ? 'var(--ol-err, #ef4444)' : 'var(--ol-blue)',
-          color: '#fff',
+          background: recording ? 'var(--ol-danger-solid-bg)' : 'var(--ol-accent-solid-bg)',
+          color: recording ? 'var(--ol-danger-solid-ink)' : 'var(--ol-accent-solid-ink)',
           cursor: busy || processing ? 'not-allowed' : 'default',
           opacity: busy || processing ? 0.7 : 1,
           transition: 'background 0.16s var(--ol-motion-quick), opacity 0.16s var(--ol-motion-quick)',
         }}
       >
         {recording ? (
-          <span style={{ width: 16, height: 16, borderRadius: 3, background: '#fff', display: 'block' }} />
+          <span style={{ width: 16, height: 16, borderRadius: 3, background: 'var(--ol-control-solid)', display: 'block' }} />
         ) : (
           <Icon name="mic" size={20} />
         )}
diff --git a/openless-all/app/src/pages/QaPanel.tsx b/openless-all/app/src/pages/QaPanel.tsx
index 847581ac..f1df23e1 100644
--- a/openless-all/app/src/pages/QaPanel.tsx
+++ b/openless-all/app/src/pages/QaPanel.tsx
@@ -685,7 +685,8 @@ function MobileRecordButton({
         disabled={disabled}
         style={{
           ...mobileRecordButtonStyle,
-          background: recording ? 'var(--ol-err)' : 'var(--ol-blue)',
+          background: recording ? 'var(--ol-danger-solid-bg)' : 'var(--ol-accent-solid-bg)',
+          color: recording ? 'var(--ol-danger-solid-ink)' : 'var(--ol-accent-solid-ink)',
           opacity: disabled ? 0.48 : 1,
         }}
       >
@@ -773,10 +774,10 @@ const shellStyle: CSSProperties = {
   height: '100vh',
   display: 'flex',
   flexDirection: 'column',
-  borderRadius: 14,
+  borderRadius: 'var(--ol-bubble-radius)',
   overflow: 'hidden',
-  border: '0.5px solid rgba(0, 0, 0, 0.08)',
-  boxShadow: 'var(--ol-shadow-lg), inset 0 1px 0 0 rgba(255, 255, 255, 0.9)',
+  border: '0.5px solid var(--ol-line)',
+  boxShadow: 'var(--ol-shadow-lg)',
   fontFamily: 'var(--ol-font-sans)',
   color: 'var(--ol-ink)',
 };
@@ -804,7 +805,7 @@ const iconBtnBaseStyle: CSSProperties = {
   width: 22,
   height: 22,
   border: 0,
-  borderRadius: 6,
+  borderRadius: 'var(--ol-r-sm)',
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -839,7 +840,7 @@ const previewStyle: CSSProperties = {
   fontSize: 11.5,
   lineHeight: 1.5,
   padding: '8px 10px',
-  borderRadius: 8,
+  borderRadius: 'var(--ol-control-radius)',
   background: 'rgba(0, 0, 0, 0.035)',
   border: '0.5px solid rgba(0, 0, 0, 0.06)',
 };
@@ -858,10 +859,10 @@ const turnIndicatorStyle: CSSProperties = {
 const userBubbleStyle: CSSProperties = {
   maxWidth: '80%',
   padding: '8px 12px',
-  borderRadius: 14,
+  borderRadius: 'var(--ol-bubble-radius)',
   borderBottomRightRadius: 4,
-  background: 'var(--ol-blue)',
-  color: '#fff',
+  background: 'var(--ol-accent-solid-bg)',
+  color: 'var(--ol-accent-solid-ink)',
   fontSize: 13,
   lineHeight: 1.55,
   wordBreak: 'break-word',
@@ -870,7 +871,7 @@ const userBubbleStyle: CSSProperties = {
 const selectionQuoteStyle: CSSProperties = {
   maxWidth: '80%',
   padding: '6px 10px',
-  borderRadius: 10,
+  borderRadius: 'var(--ol-r-md)',
   background: 'rgba(0,0,0,0.04)',
   border: '0.5px solid rgba(0,0,0,0.06)',
   fontSize: 11.5,
@@ -882,7 +883,7 @@ const selectionQuoteStyle: CSSProperties = {
 const assistantBubbleStyle: CSSProperties = {
   maxWidth: '92%',
   padding: '8px 12px',
-  borderRadius: 14,
+  borderRadius: 'var(--ol-bubble-radius)',
   borderBottomLeftRadius: 4,
   background: 'rgba(0,0,0,0.04)',
   fontSize: 13,
@@ -897,7 +898,7 @@ const errorRowStyle: CSSProperties = {
   flexDirection: 'column',
   gap: 4,
   padding: '8px 12px',
-  borderRadius: 10,
+  borderRadius: 'var(--ol-r-md)',
   background: 'rgba(220,38,38,0.06)',
   border: '0.5px solid rgba(220,38,38,0.18)',
 };
@@ -918,7 +919,7 @@ const statusBarStyle: CSSProperties = {
   gap: 8,
   padding: '0 16px',
   borderTop: '0.5px solid rgba(0, 0, 0, 0.06)',
-  background: 'rgba(255,255,255,0.4)',
+  background: 'var(--ol-control-muted)',
 };
 
 const embeddedToolbarStyle: CSSProperties = {
@@ -938,8 +939,8 @@ const mobileRecordButtonStyle: CSSProperties = {
   width: '100%',
   minHeight: 42,
   border: 0,
-  borderRadius: 10,
-  color: '#fff',
+  borderRadius: 'var(--ol-r-md)',
+  color: 'var(--ol-accent-solid-ink)',
   fontSize: 14,
   fontWeight: 700,
   fontFamily: 'var(--ol-font-sans)',
@@ -953,7 +954,7 @@ const composerStyle: CSSProperties = {
   gap: 8,
   padding: '10px 12px',
   borderTop: '0.5px solid rgba(0, 0, 0, 0.06)',
-  background: 'rgba(255,255,255,0.48)',
+  background: 'var(--ol-control-muted-strong)',
 };
 
 const composerTextareaStyle: CSSProperties = {
@@ -962,13 +963,13 @@ const composerTextareaStyle: CSSProperties = {
   maxHeight: 88,
   resize: 'vertical',
   border: '0.5px solid rgba(0,0,0,0.12)',
-  borderRadius: 8,
+  borderRadius: 'var(--ol-control-radius)',
   padding: '8px 9px',
   fontFamily: 'var(--ol-font-sans)',
   fontSize: 13,
   lineHeight: 1.45,
   color: 'var(--ol-ink)',
-  background: 'rgba(255,255,255,0.78)',
+  background: 'var(--ol-control-solid)',
   outline: 'none',
 };
 
@@ -976,10 +977,10 @@ const composerSendStyle: CSSProperties = {
   minHeight: 40,
   minWidth: 58,
   border: 0,
-  borderRadius: 8,
+  borderRadius: 'var(--ol-control-radius)',
   padding: '0 12px',
-  background: 'var(--ol-blue)',
-  color: '#fff',
+  background: 'var(--ol-accent-solid-bg)',
+  color: 'var(--ol-accent-solid-ink)',
   fontFamily: 'var(--ol-font-sans)',
   fontSize: 13,
   fontWeight: 700,
@@ -1010,7 +1011,7 @@ const globalCss = `
                       padding: 1px 5px; border-radius: 4px;
                       background: rgba(0,0,0,0.05); }
 .qa-answer pre      { margin: 0 0 6px; padding: 8px 10px;
-                      border-radius: 8px; background: rgba(0,0,0,0.05);
+                      border-radius: var(--ol-control-radius); background: rgba(0,0,0,0.05);
                       overflow-x: auto; }
 .qa-answer pre code { padding: 0; background: transparent; }
 .qa-answer a        { color: var(--ol-blue); text-decoration: none; }
diff --git a/openless-all/app/src/pages/SelectionAsk.tsx b/openless-all/app/src/pages/SelectionAsk.tsx
index 980fad77..04cc8dae 100644
--- a/openless-all/app/src/pages/SelectionAsk.tsx
+++ b/openless-all/app/src/pages/SelectionAsk.tsx
@@ -100,7 +100,7 @@ export function SelectionAsk() {
             alignItems: 'center',
             gap: 12,
             padding: '8px 14px',
-            borderRadius: 10,
+            borderRadius: 'var(--ol-r-md)',
             background: 'rgba(0,0,0,0.04)',
             border: '0.5px solid var(--ol-line)',
           }}
@@ -116,7 +116,7 @@ export function SelectionAsk() {
               position: 'relative',
               width: 36,
               height: 20,
-              borderRadius: 999,
+              borderRadius: 'var(--ol-pill-radius)',
               border: 0,
               background: prefs.qaSaveHistory ? 'var(--ol-blue)' : 'rgba(0,0,0,0.18)',
               cursor: saving ? 'not-allowed' : 'default',
@@ -132,8 +132,8 @@ export function SelectionAsk() {
                 left: prefs.qaSaveHistory ? 18 : 2,
                 width: 16,
                 height: 16,
-                borderRadius: 999,
-                background: '#fff',
+                borderRadius: 'var(--ol-pill-radius)',
+                background: 'var(--ol-control-solid)',
                 boxShadow: '0 1px 2px rgba(0,0,0,.2)',
                 transition: 'left .16s var(--ol-motion-spring)',
               }}
diff --git a/openless-all/app/src/pages/Style.tsx b/openless-all/app/src/pages/Style.tsx
index b6baf7d3..7e282a5d 100644
--- a/openless-all/app/src/pages/Style.tsx
+++ b/openless-all/app/src/pages/Style.tsx
@@ -570,7 +570,7 @@ export function Style() {
                       alignItems: 'center',
                       gap: 6,
                       padding: '6px 12px',
-                      borderRadius: 999,
+                      borderRadius: 'var(--ol-pill-radius)',
                       border: '0.5px solid',
                       borderColor: rawPack.active ? 'var(--ol-blue)' : 'var(--ol-line-strong)',
                       background: rawPack.active ? 'var(--ol-blue-soft)' : 'transparent',
@@ -619,7 +619,7 @@ export function Style() {
                       : isBuiltin
                         ? 'linear-gradient(180deg, rgba(248,250,252,0.92), rgba(241,245,249,0.85))'
                         : 'linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92))',
-                    borderRadius: 18,
+                    borderRadius: 'var(--ol-modal-radius)',
                     padding: 16,
                     boxShadow: pack.active ? '0 0 0 3px var(--ol-blue-ring)' : 'none',
                     cursor: 'default',
@@ -663,7 +663,7 @@ export function Style() {
                       <div
                         aria-hidden
                         style={{
-                          width: 36, height: 36, borderRadius: 12,
+                          width: 36, height: 36, borderRadius: 'var(--ol-r-lg)',
                           display: 'grid', placeItems: 'center',
                           background: pack.active ? 'rgba(37,99,235,0.12)' : 'rgba(15,23,42,0.05)',
                           color: pack.active ? 'var(--ol-blue)' : 'var(--ol-ink-3)',
@@ -680,7 +680,7 @@ export function Style() {
                         aria-label={t('style.pack.deleteImported')}
                         title={t('style.pack.deleteImported')}
                         style={{
-                          width: 36, height: 36, borderRadius: 12,
+                          width: 36, height: 36, borderRadius: 'var(--ol-r-lg)',
                           display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                           flexShrink: 0,
                           border: '0.5px solid rgba(239,68,68,0.32)',
@@ -756,7 +756,7 @@ export function Style() {
                 gap: 8,
                 textAlign: 'center',
                 border: '0.5px dashed var(--ol-line-strong)',
-                borderRadius: 18,
+                borderRadius: 'var(--ol-modal-radius)',
                 padding: 16,
                 background: 'transparent',
                 color: 'var(--ol-ink-3)',
@@ -768,7 +768,7 @@ export function Style() {
             >
               <div
                 style={{
-                  width: 44, height: 44, borderRadius: 999,
+                  width: 44, height: 44, borderRadius: 'var(--ol-pill-radius)',
                   display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                   background: 'rgba(15,23,42,0.04)',
                   color: 'var(--ol-ink-2)',
@@ -843,7 +843,7 @@ export function Style() {
                     style={{
                       width: 28,
                       height: 28,
-                      borderRadius: 999,
+                      borderRadius: 'var(--ol-pill-radius)',
                       border: 0,
                       background: 'transparent',
                       color: 'var(--ol-ink-3)',
@@ -1057,7 +1057,7 @@ export function Style() {
                   <div
                     style={{
                       padding: 14,
-                      borderRadius: 14,
+                      borderRadius: 'var(--ol-bubble-radius)',
                       background: 'linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.95))',
                       border: '0.5px solid var(--ol-line)',
                     }}
@@ -1113,7 +1113,7 @@ export function Style() {
                               width: 32, height: 32,
                               flexShrink: 0,
                               border: '0.5px solid var(--ol-line-strong)',
-                              borderRadius: 8,
+                              borderRadius: 'var(--ol-control-radius)',
                               background: 'transparent',
                               color: 'var(--ol-ink-2)',
                               display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
@@ -1128,7 +1128,7 @@ export function Style() {
                         <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 12 }}>
                           <div
                             style={{
-                              borderRadius: 14,
+                              borderRadius: 'var(--ol-bubble-radius)',
                               border: '0.5px solid rgba(148,163,184,0.22)',
                               background: 'rgba(248,250,252,0.9)',
                               padding: 14,
@@ -1140,13 +1140,13 @@ export function Style() {
                             <textarea
                               value={example.input}
                               onChange={event => patchExample(index, { input: event.target.value })}
-                              style={{ ...textareaStyle, minHeight: 120, background: '#fff' }}
+                              style={{ ...textareaStyle, minHeight: 120, background: 'var(--ol-control-solid)' }}
                             />
                           </div>
 
                           <div
                             style={{
-                              borderRadius: 14,
+                              borderRadius: 'var(--ol-bubble-radius)',
                               border: '0.5px solid rgba(37,99,235,0.16)',
                               background: 'rgba(239,246,255,0.86)',
                               padding: 14,
@@ -1158,7 +1158,7 @@ export function Style() {
                             <textarea
                               value={example.output}
                               onChange={event => patchExample(index, { output: event.target.value })}
-                              style={{ ...textareaStyle, minHeight: 120, background: '#fff' }}
+                              style={{ ...textareaStyle, minHeight: 120, background: 'var(--ol-control-solid)' }}
                             />
                           </div>
                         </div>
@@ -1180,9 +1180,9 @@ function MetaItem({ label, value }: { label: string; value: string }) {
   return (
     <div
       style={{
-        borderRadius: 12,
+        borderRadius: 'var(--ol-r-lg)',
         border: '0.5px solid rgba(148,163,184,0.2)',
-        background: 'rgba(255,255,255,0.92)',
+        background: 'var(--ol-glass-bg-strong)',
         padding: '10px 12px',
       }}
     >
@@ -1217,9 +1217,9 @@ function DirectiveRow({
         justifyContent: 'space-between',
         gap: 12,
         padding: '10px 12px',
-        borderRadius: 12,
+        borderRadius: 'var(--ol-r-lg)',
         border: '0.5px solid rgba(148,163,184,0.2)',
-        background: 'rgba(255,255,255,0.92)',
+        background: 'var(--ol-glass-bg-strong)',
       }}
     >
       <div style={{ minWidth: 0 }}>
@@ -1238,9 +1238,9 @@ const inputStyle: CSSProperties = {
   boxSizing: 'border-box',
   minHeight: 38,
   padding: '9px 11px',
-  borderRadius: 10,
+  borderRadius: 'var(--ol-r-md)',
   border: '0.5px solid var(--ol-line-strong)',
-  background: '#fff',
+  background: 'var(--ol-control-solid)',
   color: 'var(--ol-ink)',
   font: 'inherit',
   fontSize: 12.5,
@@ -1250,9 +1250,9 @@ const textareaStyle: CSSProperties = {
   width: '100%',
   boxSizing: 'border-box',
   padding: '11px 12px',
-  borderRadius: 12,
+  borderRadius: 'var(--ol-r-lg)',
   border: '0.5px solid var(--ol-line-strong)',
-  background: '#fff',
+  background: 'var(--ol-control-solid)',
   color: 'var(--ol-ink)',
   font: 'inherit',
   fontSize: 12.5,
diff --git a/openless-all/app/src/pages/Translation.tsx b/openless-all/app/src/pages/Translation.tsx
index f54c563c..cccdb52b 100644
--- a/openless-all/app/src/pages/Translation.tsx
+++ b/openless-all/app/src/pages/Translation.tsx
@@ -77,10 +77,10 @@ export function Translation() {
                 style={{
                   alignSelf: 'flex-start',
                   padding: '6px 12px',
-                  borderRadius: 999,
+                  borderRadius: 'var(--ol-pill-radius)',
                   border: 0,
-                  background: 'var(--ol-blue)',
-                  color: '#fff',
+                  background: 'var(--ol-accent-solid-bg)',
+                  color: 'var(--ol-accent-solid-ink)',
                   fontSize: 12,
                   fontWeight: 600,
                   cursor: loading ? 'not-allowed' : 'default',
@@ -140,7 +140,7 @@ export function Translation() {
               justifyContent: 'space-between',
               gap: 10,
               padding: '8px 12px',
-              borderRadius: 10,
+              borderRadius: 'var(--ol-r-md)',
               border: '0.5px solid rgba(239,68,68,0.22)',
               background: 'rgba(239,68,68,0.07)',
               color: 'var(--ol-red, #ef4444)',
@@ -156,7 +156,7 @@ export function Translation() {
               style={{
                 flex: '0 0 auto',
                 border: 0,
-                borderRadius: 999,
+                borderRadius: 'var(--ol-pill-radius)',
                 background: 'rgba(239,68,68,0.12)',
                 color: 'inherit',
                 padding: '4px 10px',
@@ -188,9 +188,9 @@ export function Translation() {
                     fontSize: 12.5,
                     fontWeight: checked ? 600 : 500,
                     border: 0,
-                    borderRadius: 999,
-                    background: checked ? 'var(--ol-blue)' : 'rgba(0,0,0,0.05)',
-                    color: checked ? '#fff' : 'var(--ol-ink-2)',
+                    borderRadius: 'var(--ol-pill-radius)',
+                    background: checked ? 'var(--ol-accent-solid-bg)' : 'rgba(0,0,0,0.05)',
+                    color: checked ? 'var(--ol-accent-solid-ink)' : 'var(--ol-ink-2)',
                     cursor: 'default',
                     fontFamily: 'inherit',
                     transition: 'background 0.12s ease-out, color 0.12s ease-out',
@@ -213,7 +213,7 @@ export function Translation() {
                 fontSize: 10.5,
                 fontWeight: 600,
                 letterSpacing: '0.04em',
-                borderRadius: 999,
+                borderRadius: 'var(--ol-pill-radius)',
                 background: enabled ? 'rgba(37,99,235,0.10)' : 'rgba(0,0,0,0.05)',
                 color: enabled ? 'var(--ol-blue)' : 'var(--ol-ink-4)',
                 textTransform: 'uppercase',
@@ -228,7 +228,7 @@ export function Translation() {
             options={targetOptions}
             placeholder={t('translation.target.disabled')}
             ariaLabel={t('translation.target.title')}
-            style={{ width: '100%', maxWidth: 360, fontSize: 13, background: '#fff' }}
+            style={{ width: '100%', maxWidth: 360, fontSize: 13, background: 'var(--ol-control-solid)' }}
           />
         </Card>
 
diff --git a/openless-all/app/src/pages/Vocab.tsx b/openless-all/app/src/pages/Vocab.tsx
index ee29f798..101e5d63 100644
--- a/openless-all/app/src/pages/Vocab.tsx
+++ b/openless-all/app/src/pages/Vocab.tsx
@@ -279,7 +279,7 @@ export function Vocab() {
                 onClick={() => togglePreset(p.id)}
                 style={{
                   border: '0.5px solid var(--ol-line-strong)',
-                  borderRadius: 999,
+                  borderRadius: 'var(--ol-pill-radius)',
                   padding: '4px 10px',
                   fontSize: 12,
                   background: selectedPresetIds.includes(p.id) ? 'var(--ol-blue-soft)' : 'var(--ol-surface-2)',
@@ -322,14 +322,14 @@ export function Vocab() {
                 value={rulePatternDraft}
                 onChange={e => setRulePatternDraft(e.target.value)}
                 placeholder={t('vocab.corrections.patternPlaceholder')}
-                style={{ height: 32, padding: '0 10px', border: '0.5px solid var(--ol-line-strong)', borderRadius: 8, background: 'var(--ol-surface-2)' }}
+                style={{ height: 32, padding: '0 10px', border: '0.5px solid var(--ol-line-strong)', borderRadius: 'var(--ol-control-radius)', background: 'var(--ol-surface-2)' }}
               />
               <span style={{ color: 'var(--ol-ink-4)', fontSize: 12 }}>→</span>
               <input
                 value={ruleReplacementDraft}
                 onChange={e => setRuleReplacementDraft(e.target.value)}
                 placeholder={t('vocab.corrections.replacementPlaceholder')}
-                style={{ height: 32, padding: '0 10px', border: '0.5px solid var(--ol-line-strong)', borderRadius: 8, background: 'var(--ol-surface-2)' }}
+                style={{ height: 32, padding: '0 10px', border: '0.5px solid var(--ol-line-strong)', borderRadius: 'var(--ol-control-radius)', background: 'var(--ol-surface-2)' }}
               />
               <Btn size="sm" variant="primary" onClick={() => void onAddCorrectionRule()}>{t('common.add')}</Btn>
             </div>
@@ -362,7 +362,7 @@ export function Vocab() {
               style={{
                 flex: 1, height: 36, padding: '0 12px',
                 border: '0.5px solid var(--ol-line-strong)',
-                borderRadius: 8, fontSize: 13,
+                borderRadius: 'var(--ol-control-radius)', fontSize: 13,
                 fontFamily: 'inherit', outline: 'none',
                 background: 'var(--ol-surface-2)',
                 transition: 'border-color 0.16s var(--ol-motion-quick), box-shadow 0.18s var(--ol-motion-soft), background 0.16s var(--ol-motion-quick)',
@@ -412,7 +412,7 @@ function CorrectionRuleChip({ rule, onToggle, onRemove }: CorrectionRuleChipProp
       style={{
         display: 'inline-flex', alignItems: 'center', gap: 6,
         padding: '5px 8px 5px 10px',
-        borderRadius: 999,
+        borderRadius: 'var(--ol-pill-radius)',
         border: '0.5px solid var(--ol-line-strong)',
         background: enabled ? 'var(--ol-surface)' : 'var(--ol-surface-2)',
         opacity: enabled ? 1 : 0.55,
@@ -430,7 +430,7 @@ function CorrectionRuleChip({ rule, onToggle, onRemove }: CorrectionRuleChipProp
       <button
         onClick={onRemove}
         aria-label={t('vocab.corrections.removeAria')}
-        style={{ width: 18, height: 18, borderRadius: 999, border: 0, background: 'rgba(0,0,0,0.06)', color: 'var(--ol-ink-4)', cursor: 'default' }}
+        style={{ width: 18, height: 18, borderRadius: 'var(--ol-pill-radius)', border: 0, background: 'rgba(0,0,0,0.06)', color: 'var(--ol-ink-4)', cursor: 'default' }}
       >
         ×
       </button>
@@ -451,12 +451,12 @@ function VocabChip({ entry, onRemove, onToggle }: VocabChipProps) {
     <span
       style={{
         // 父 flex 容器 minHeight: 80 会让 flex item 在 align-self 默认 stretch 下被拉到
-        // 80px 高，chip borderRadius: 999 把高度变大渲染成"超大椭圆"。alignSelf:flex-start
+        // 80px 高，chip borderRadius: 'var(--ol-pill-radius)' 把高度变大渲染成"超大椭圆"。alignSelf:flex-start
         // 阻止拉伸，chip 始终保持 content 高度。
         alignSelf: 'flex-start',
         display: 'inline-flex', alignItems: 'center', gap: 6,
         padding: '5px 10px 5px 12px',
-        borderRadius: 999,
+        borderRadius: 'var(--ol-pill-radius)',
         border: '0.5px solid var(--ol-line-strong)',
         background: enabled ? (entry.hits > 0 ? 'var(--ol-blue-soft)' : 'var(--ol-surface)') : 'var(--ol-surface-2)',
         opacity: enabled ? 1 : 0.55,
@@ -476,10 +476,10 @@ function VocabChip({ entry, onRemove, onToggle }: VocabChipProps) {
       <span
         style={{
           minWidth: 18, height: 18, padding: '0 5px',
-          borderRadius: 999, fontSize: 10, fontWeight: 600,
+          borderRadius: 'var(--ol-pill-radius)', fontSize: 10, fontWeight: 600,
           display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-          background: entry.hits > 0 && enabled ? 'var(--ol-blue)' : 'rgba(0,0,0,0.06)',
-          color: entry.hits > 0 && enabled ? '#fff' : 'var(--ol-ink-4)',
+          background: entry.hits > 0 && enabled ? 'var(--ol-accent-solid-bg)' : 'rgba(0,0,0,0.06)',
+          color: entry.hits > 0 && enabled ? 'var(--ol-accent-solid-ink)' : 'var(--ol-ink-4)',
           fontFamily: 'var(--ol-font-sans)',
         }}
       >{entry.hits}</span>
@@ -487,7 +487,7 @@ function VocabChip({ entry, onRemove, onToggle }: VocabChipProps) {
         onClick={onRemove}
         aria-label={t('vocab.removeAria')}
         style={{
-          width: 14, height: 14, padding: 0, border: 0, borderRadius: 999,
+          width: 14, height: 14, padding: 0, border: 0, borderRadius: 'var(--ol-pill-radius)',
           background: 'transparent', color: 'var(--ol-ink-4)',
           display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'default',
         }}
diff --git a/openless-all/app/src/pages/_atoms.tsx b/openless-all/app/src/pages/_atoms.tsx
index 1017f648..695d2103 100644
--- a/openless-all/app/src/pages/_atoms.tsx
+++ b/openless-all/app/src/pages/_atoms.tsx
@@ -83,13 +83,14 @@ export function Card({ children, style, padding = 18, glassy = false, className
     <div
       className={['ol-aura-card', className].filter(Boolean).join(' ')}
       style={{
-        background: glassy ? 'var(--ol-panel-bg)' : 'var(--ol-card-bg)',
-        backdropFilter: glassy ? 'blur(var(--ol-aura-glass-blur)) saturate(150%)' : undefined,
-        WebkitBackdropFilter: glassy ? 'blur(var(--ol-aura-glass-blur)) saturate(150%)' : undefined,
-        border: `1px solid ${glassy ? 'var(--ol-panel-border)' : 'var(--ol-card-border)'}`,
-        borderRadius: 'var(--ol-card-radius)',
+        ...(glassy ? {
+          background: 'var(--ol-panel-bg)',
+          backdropFilter: 'blur(var(--ol-aura-glass-blur)) saturate(150%)',
+          WebkitBackdropFilter: 'blur(var(--ol-aura-glass-blur)) saturate(150%)',
+          border: '1px solid var(--ol-panel-border)',
+          boxShadow: 'var(--ol-panel-shadow)',
+        } : undefined),
         padding,
-        boxShadow: glassy ? 'var(--ol-panel-shadow)' : 'var(--ol-card-shadow)',
         ...style,
       }}
     >
@@ -161,7 +162,7 @@ interface BtnProps {
 export function Btn({ children, variant = 'ghost', size = 'md', icon, style, onClick, disabled = false }: BtnProps) {
   const variants: Record<BtnVariant, { bg: string; color: string; bd: string; sh: string }> = {
     primary: { bg: 'linear-gradient(180deg, #141821, #0d1016)', color: 'var(--ol-on-accent)', bd: 'transparent', sh: '0 14px 32px -22px rgba(15,23,42,0.55)' },
-    blue:    { bg: 'linear-gradient(180deg, var(--ol-blue), var(--ol-blue-hover))', color: 'var(--ol-on-accent)', bd: 'transparent', sh: '0 14px 32px -22px rgba(37,99,235,.45)' },
+    blue:    { bg: 'linear-gradient(180deg, var(--ol-accent-solid-bg), var(--ol-accent-solid-bg-hover))', color: 'var(--ol-accent-solid-ink)', bd: 'transparent', sh: '0 14px 32px -22px rgba(37,99,235,.45)' },
     ghost:   { bg: 'var(--ol-control-muted)', color: 'var(--ol-ink-2)', bd: 'var(--ol-control-border)', sh: 'var(--ol-control-shadow)' },
     soft:    { bg: 'var(--ol-control-muted-strong)', color: 'var(--ol-ink-2)', bd: 'transparent', sh: 'var(--ol-control-shadow)' },
   };
@@ -221,10 +222,10 @@ export function Collapsible({ title, desc, defaultOpen = false, embedded = false
     <div
       style={{
         borderBottom: embedded ? '0.5px solid var(--ol-line)' : undefined,
-        border: embedded ? undefined : '0.5px solid var(--ol-line)',
-        borderRadius: embedded ? 0 : 'var(--ol-r-lg)',
-        background: embedded ? 'transparent' : 'var(--ol-surface)',
-        boxShadow: embedded ? 'none' : 'var(--ol-shadow-sm)',
+        border: embedded ? undefined : '1px solid var(--ol-card-border)',
+        borderRadius: embedded ? 0 : 'var(--ol-card-radius)',
+        background: embedded ? 'transparent' : 'var(--ol-card-bg)',
+        boxShadow: embedded ? 'none' : 'var(--ol-card-shadow)',
         overflow: 'hidden',
         // 父级 flex column 带 minHeight:0 + overflow:auto 时，所有 flex 子项默认
         // shrink:1，会把 header 按钮也压成一条线。锁住不压缩，溢出走父容器滚动。
diff --git a/openless-all/app/src/pages/settings/AboutSection.tsx b/openless-all/app/src/pages/settings/AboutSection.tsx
index 5d9b4cb3..47a093b2 100644
--- a/openless-all/app/src/pages/settings/AboutSection.tsx
+++ b/openless-all/app/src/pages/settings/AboutSection.tsx
@@ -95,7 +95,7 @@ export function AboutSection() {
           <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
             <kbd style={{
               padding: '4px 10px', fontSize: 12, fontFamily: 'var(--ol-font-mono)',
-              borderRadius: 6, background: 'var(--ol-surface-2)',
+              borderRadius: 'var(--ol-r-sm)', background: 'var(--ol-surface-2)',
               border: '0.5px solid var(--ol-line-strong)',
               boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
               color: 'var(--ol-ink-2)',
@@ -112,9 +112,9 @@ export function AboutSection() {
 }
 
 const btnGhost: CSSProperties = {
-  padding: '5px 10px', fontSize: 12, borderRadius: 6,
+  padding: '5px 10px', fontSize: 12, borderRadius: 'var(--ol-r-sm)',
   border: '0.5px solid var(--ol-line-strong)',
-  background: '#fff', color: 'var(--ol-ink-2)',
+  background: 'var(--ol-surface-solid)', color: 'var(--ol-ink-2)',
   cursor: 'default', fontFamily: 'inherit',
   maxWidth: '100%',
   transition: 'background 0.16s var(--ol-motion-quick), border-color 0.16s var(--ol-motion-quick)',
diff --git a/openless-all/app/src/pages/settings/CheckUpdateButton.tsx b/openless-all/app/src/pages/settings/CheckUpdateButton.tsx
index 23ab8ec5..6e5ecb72 100644
--- a/openless-all/app/src/pages/settings/CheckUpdateButton.tsx
+++ b/openless-all/app/src/pages/settings/CheckUpdateButton.tsx
@@ -70,9 +70,9 @@ export function CheckUpdateButton({ channel }: { channel: UpdateChannel }) {
 }
 
 const checkBtnStyle: CSSProperties = {
-  padding: '5px 10px', fontSize: 12, borderRadius: 6,
+  padding: '5px 10px', fontSize: 12, borderRadius: 'var(--ol-r-sm)',
   border: '0.5px solid var(--ol-line-strong)',
-  background: '#fff',
+  background: 'var(--ol-surface-solid)',
   cursor: 'default', fontFamily: 'inherit',
   display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
   minWidth: 84,
diff --git a/openless-all/app/src/pages/settings/ClaudeConsoleSection.tsx b/openless-all/app/src/pages/settings/ClaudeConsoleSection.tsx
index ee0ef786..f150c68e 100644
--- a/openless-all/app/src/pages/settings/ClaudeConsoleSection.tsx
+++ b/openless-all/app/src/pages/settings/ClaudeConsoleSection.tsx
@@ -31,7 +31,7 @@ const consoleStyle: CSSProperties = {
   minHeight: 96,
   maxHeight: 260,
   overflow: 'auto',
-  borderRadius: 10,
+  borderRadius: 'var(--ol-r-md)',
   background: '#0f1117',
   color: '#d7dbe0',
   fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
diff --git a/openless-all/app/src/pages/settings/MarketplaceSection.tsx b/openless-all/app/src/pages/settings/MarketplaceSection.tsx
index bd21a932..857909aa 100644
--- a/openless-all/app/src/pages/settings/MarketplaceSection.tsx
+++ b/openless-all/app/src/pages/settings/MarketplaceSection.tsx
@@ -44,7 +44,7 @@ export function MarketplaceSection() {
             alignItems: 'center',
             gap: 12,
             padding: '10px 12px',
-            borderRadius: 10,
+            borderRadius: 'var(--ol-r-md)',
             background: 'var(--ol-surface-2)',
             border: '0.5px solid var(--ol-line)',
           }}
@@ -54,8 +54,8 @@ export function MarketplaceSection() {
               width: 34,
               height: 34,
               borderRadius: 999,
-              background: 'var(--ol-ink)',
-              color: '#fff',
+              background: 'var(--ol-primary-solid-bg)',
+              color: 'var(--ol-primary-solid-ink)',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
diff --git a/openless-all/app/src/pages/settings/ProvidersSection.tsx b/openless-all/app/src/pages/settings/ProvidersSection.tsx
index e812060c..d1874282 100644
--- a/openless-all/app/src/pages/settings/ProvidersSection.tsx
+++ b/openless-all/app/src/pages/settings/ProvidersSection.tsx
@@ -834,7 +834,7 @@ function CredentialField({ label, account, placeholder, mono, mask, defaultValue
 const miniBtnStyle: CSSProperties = {
   height: 32, padding: '0 12px',
   border: '0.5px solid var(--ol-line-strong)',
-  borderRadius: 8, background: 'var(--ol-surface)',
+  borderRadius: 'var(--ol-control-radius)', background: 'var(--ol-surface)',
   boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(255,255,255,0.2) inset',
   color: 'var(--ol-ink-2)', cursor: 'default', flexShrink: 0,
   fontSize: 12.5, fontWeight: 500, letterSpacing: '0.01em',
@@ -844,7 +844,7 @@ const miniBtnStyle: CSSProperties = {
 const iconBtnStyle: CSSProperties = {
   width: 32, height: 32,
   border: '0.5px solid var(--ol-line-strong)',
-  borderRadius: 8, background: 'var(--ol-surface)',
+  borderRadius: 'var(--ol-control-radius)', background: 'var(--ol-surface)',
   boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(255,255,255,0.2) inset',
   display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
   color: 'var(--ol-ink-3)', cursor: 'default', flexShrink: 0,
diff --git a/openless-all/app/src/pages/settings/RecordingInputSection.tsx b/openless-all/app/src/pages/settings/RecordingInputSection.tsx
index 58f7c23c..8a7049f7 100644
--- a/openless-all/app/src/pages/settings/RecordingInputSection.tsx
+++ b/openless-all/app/src/pages/settings/RecordingInputSection.tsx
@@ -163,7 +163,7 @@ export function RecordingInputSection() {
               marginTop: 4,
               marginBottom: 8,
               padding: '12px 14px',
-              borderRadius: 10,
+              borderRadius: 'var(--ol-r-md)',
               background: 'rgba(37,99,235,0.08)',
               border: '0.5px solid rgba(37,99,235,0.18)',
             }}
@@ -189,15 +189,15 @@ export function RecordingInputSection() {
         )}
         {showDesktopHotkey && (
         <SettingRow label={t('settings.recording.modeLabel')}>
-          <div style={{ display: 'inline-flex', padding: 2, borderRadius: 8, background: 'rgba(0,0,0,0.05)' }}>
+          <div style={{ display: 'inline-flex', padding: 2, borderRadius: 'var(--ol-control-radius)', background: 'rgba(0,0,0,0.05)' }}>
             {choices.map(([v, l]) => (
               <button
                 key={v}
                 onClick={() => onModeChange(v)}
                 style={{
                   padding: '5px 14px', fontSize: 12, fontWeight: 500,
-                  border: 0, borderRadius: 6, fontFamily: 'inherit',
-                  background: prefs.hotkey.mode === v ? '#fff' : 'transparent',
+                  border: 0, borderRadius: 'var(--ol-r-sm)', fontFamily: 'inherit',
+                  background: prefs.hotkey.mode === v ? 'var(--ol-surface-solid)' : 'transparent',
                   color: prefs.hotkey.mode === v ? 'var(--ol-ink)' : 'var(--ol-ink-3)',
                   boxShadow: prefs.hotkey.mode === v ? '0 1px 2px rgba(0,0,0,.08)' : 'none',
                   cursor: 'default',
@@ -248,7 +248,7 @@ export function RecordingInputSection() {
                 fontWeight: 500,
                 fontFamily: 'inherit',
                 border: '0.5px solid var(--ol-line-strong)',
-                borderRadius: 8,
+                borderRadius: 'var(--ol-control-radius)',
                 background: 'var(--ol-surface-2)',
                 color: 'var(--ol-ink-2)',
                 cursor: 'default',
diff --git a/openless-all/app/src/pages/settings/RemoteInputSection.tsx b/openless-all/app/src/pages/settings/RemoteInputSection.tsx
index 002a4c6c..de6f13c6 100644
--- a/openless-all/app/src/pages/settings/RemoteInputSection.tsx
+++ b/openless-all/app/src/pages/settings/RemoteInputSection.tsx
@@ -115,7 +115,7 @@ export function RemoteInputSection() {
 
   const smallBtn: CSSProperties = {
     padding: '4px 10px',
-    borderRadius: 8,
+    borderRadius: 'var(--ol-control-radius)',
     fontSize: 12,
     cursor: 'pointer',
     border: '0.5px solid var(--ol-line-strong)',
@@ -161,13 +161,13 @@ export function RemoteInputSection() {
               }
               style={{
                 padding: '5px 12px',
-                borderRadius: 8,
+                borderRadius: 'var(--ol-control-radius)',
                 fontSize: 12.5,
                 cursor: 'pointer',
                 border: '0.5px solid var(--ol-line-strong)',
                 background:
-                  mode === m ? 'var(--ol-blue)' : 'var(--ol-surface-2)',
-                color: mode === m ? '#fff' : 'var(--ol-ink)',
+                  mode === m ? 'var(--ol-accent-solid-bg)' : 'var(--ol-surface-2)',
+                color: mode === m ? 'var(--ol-accent-solid-ink)' : 'var(--ol-ink)',
               }}
             >
               {t(
diff --git a/openless-all/app/src/pages/settings/ShortcutsSection.tsx b/openless-all/app/src/pages/settings/ShortcutsSection.tsx
index 0b8e9f8b..8786d868 100644
--- a/openless-all/app/src/pages/settings/ShortcutsSection.tsx
+++ b/openless-all/app/src/pages/settings/ShortcutsSection.tsx
@@ -23,10 +23,10 @@ const enableBtnStyle: CSSProperties = {
   alignSelf: 'flex-start',
   fontSize: 12,
   padding: '5px 14px',
-  background: 'var(--ol-blue)',
-  color: '#fff',
+  background: 'var(--ol-accent-solid-bg)',
+  color: 'var(--ol-accent-solid-ink)',
   border: 0,
-  borderRadius: 6,
+  borderRadius: 'var(--ol-r-sm)',
   fontFamily: 'inherit',
   fontWeight: 500,
   cursor: 'pointer',
@@ -107,7 +107,7 @@ export function ShortcutsSection() {
               await setQaHotkey(binding);
               await savePrefs({ ...prefs, qaHotkey: binding });
             }}
-            style={{ fontSize: 12, padding: '5px 14px', background: 'var(--ol-blue)', color: '#fff', border: 0, borderRadius: 6, fontFamily: 'inherit', fontWeight: 500, cursor: 'default' }}
+            style={{ fontSize: 12, padding: '5px 14px', background: 'var(--ol-accent-solid-bg)', color: 'var(--ol-accent-solid-ink)', border: 0, borderRadius: 'var(--ol-r-sm)', fontFamily: 'inherit', fontWeight: 500, cursor: 'default' }}
           >
             {t('selectionAsk.hotkey.enable', 'Enable')}
           </button>
@@ -201,7 +201,7 @@ export function ShortcutsSection() {
           <kbd style={{
             display: 'inline-flex', alignItems: 'center', gap: 4,
             padding: '4px 10px', fontSize: 12, fontFamily: 'var(--ol-font-mono)',
-            borderRadius: 6, background: 'var(--ol-surface-2)',
+            borderRadius: 'var(--ol-r-sm)', background: 'var(--ol-surface-2)',
             border: '0.5px solid var(--ol-line-strong)',
             boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
             color: 'var(--ol-ink-2)',
diff --git a/openless-all/app/src/pages/settings/shared.tsx b/openless-all/app/src/pages/settings/shared.tsx
index ad385393..78e556fa 100644
--- a/openless-all/app/src/pages/settings/shared.tsx
+++ b/openless-all/app/src/pages/settings/shared.tsx
@@ -102,9 +102,9 @@ export function Toggle({
                 position: "relative",
                 width: 36,
                 height: 20,
-                borderRadius: 999,
+  borderRadius: "var(--ol-pill-radius)",
                 border: 0,
-                background: on ? "var(--ol-blue)" : "rgba(0,0,0,0.15)",
+                background: on ? "var(--ol-blue)" : "var(--ol-toggle-off-bg)",
                 boxShadow: "inset 0 1px 2px rgba(0,0,0,0.06)",
                 cursor: "default",
                 transition: "background 0.16s var(--ol-motion-quick)",
@@ -117,8 +117,8 @@ export function Toggle({
                     left: on ? 18 : 2,
                     width: 16,
                     height: 16,
-                    borderRadius: 999,
-                    background: "#fff",
+                    borderRadius: "var(--ol-pill-radius)",
+                    background: "var(--ol-toggle-knob)",
                     boxShadow:
                         "0 1px 2px rgba(0,0,0,.25), 0 0 0 0.5px rgba(0,0,0,.04)",
                     transition: "left .16s var(--ol-motion-spring)",
@@ -133,7 +133,7 @@ export const inputStyle: CSSProperties = {
     height: 32,
     padding: "0 10px",
     border: "0.5px solid var(--ol-line-strong)",
-    borderRadius: 8,
+    borderRadius: "var(--ol-control-radius)",
     fontSize: 12.5,
     fontFamily: "inherit",
     outline: "none",
diff --git a/openless-all/app/src/pages/settings/tabs.tsx b/openless-all/app/src/pages/settings/tabs.tsx
index c2a4555d..4dd1bae9 100644
--- a/openless-all/app/src/pages/settings/tabs.tsx
+++ b/openless-all/app/src/pages/settings/tabs.tsx
@@ -59,14 +59,14 @@ export function PrivacyTab() {
           alignItems: 'center',
           gap: 10,
           padding: '10px 12px',
-          borderRadius: 10,
+          borderRadius: 'var(--ol-r-md)',
           background: 'var(--ol-blue-soft)',
           marginBottom: 2,
         }}
       >
         <span style={{
           fontSize: 11, padding: '3px 8px', borderRadius: 999,
-          background: '#fff', color: 'var(--ol-blue)', fontWeight: 600, flexShrink: 0,
+          background: 'var(--ol-surface-solid)', color: 'var(--ol-blue)', fontWeight: 600, flexShrink: 0,
         }}>
           {t('modal.about.localFirst')}
         </span>
diff --git a/openless-all/app/src/styles/global.css b/openless-all/app/src/styles/global.css
index 30fdfd61..3d975d52 100644
--- a/openless-all/app/src/styles/global.css
+++ b/openless-all/app/src/styles/global.css
@@ -177,3 +177,402 @@ html[data-ol-platform="linux"] .ol-frost {
 html[data-ol-platform="linux"] .ol-frost::before {
   content: none;
 }
+
+/* ── App shell + Aura surfaces ─────────────────────────────────────────── */
+
+.ol-app-shell-bg {
+  background: var(--ol-app-shell-bg);
+}
+
+.ol-aura-panel {
+  background: var(--ol-panel-bg);
+  border: 1px solid var(--ol-panel-border);
+  box-shadow: var(--ol-panel-shadow);
+  backdrop-filter: blur(var(--ol-aura-glass-blur)) saturate(150%);
+  -webkit-backdrop-filter: blur(var(--ol-aura-glass-blur)) saturate(150%);
+}
+
+.ol-aura-card {
+  background: var(--ol-card-bg);
+  border: 1px solid var(--ol-card-border);
+  border-radius: var(--ol-card-radius);
+  box-shadow: var(--ol-card-shadow);
+}
+
+html[data-ol-platform="linux"] .ol-aura-panel,
+html[data-ol-platform="linux"] .ol-aura-card {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  background: var(--ol-surface);
+}
+
+/* ── FloatingShell nav + sidebar ───────────────────────────────────────── */
+
+.ol-nav-btn {
+  color: var(--ol-ink-3);
+  font-weight: 500;
+}
+
+.ol-nav-btn.ol-nav-btn-active {
+  color: var(--ol-ink);
+  font-weight: 600;
+}
+
+.ol-nav-btn:not(.ol-nav-btn-active):hover {
+  background: var(--ol-nav-hover-bg);
+  color: var(--ol-ink);
+}
+
+.ol-aura-sidebar {
+  padding: 14px 12px 14px;
+  background: var(--ol-sidebar-bg);
+  border-right: 1px solid var(--ol-sidebar-border);
+}
+
+.ol-aura-sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px 16px;
+  margin-bottom: 6px;
+  border-radius: var(--ol-r-lg);
+  background: var(--ol-sidebar-brand-bg);
+  border: 1px solid var(--ol-sidebar-brand-border);
+  box-shadow: none;
+}
+
+.ol-aura-sidebar-brand-mark {
+  width: 26px;
+  height: 26px;
+  border-radius: var(--ol-control-radius);
+  box-shadow: none;
+  box-sizing: border-box;
+  padding: 3px;
+  object-fit: contain;
+}
+
+.ol-aura-sidebar-brand-title {
+  font-size: 14px;
+  font-weight: 600;
+  font-family: var(--ol-font-display);
+  color: var(--ol-ink);
+}
+
+.ol-aura-sidebar-brand-kicker {
+  font-size: 10.5px;
+  color: var(--ol-ink-4);
+  font-family: var(--ol-font-mono);
+  letter-spacing: .08em;
+}
+
+.ol-aura-sidebar-pill {
+  background: var(--ol-sidebar-pill-bg);
+  border-radius: var(--ol-r-lg);
+  border: 1px solid var(--ol-sidebar-pill-border);
+  box-shadow: none;
+}
+
+.ol-aura-sidebar-nav-btn {
+  padding: 8px 12px;
+  border-radius: var(--ol-r-lg);
+  border: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: 13px;
+  cursor: default;
+  transition: color 0.16s var(--ol-motion-quick), background 0.16s var(--ol-motion-quick);
+  text-align: left;
+  position: relative;
+  z-index: 1;
+}
+
+.ol-aura-sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 10px 0;
+  margin-top: 10px;
+  border-top: 1px solid var(--ol-sidebar-footer-border);
+}
+
+.ol-aura-sidebar-version {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 10px 12px;
+  font-family: var(--ol-font-sans);
+  font-size: 11px;
+  color: var(--ol-ink-4);
+  background: var(--ol-sidebar-version-bg);
+  border: 1px solid var(--ol-sidebar-version-border);
+  border-radius: var(--ol-pill-radius);
+  box-shadow: none;
+}
+
+.ol-aura-beta-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ol-blue);
+  background: rgba(37,99,235,0.10);
+  border-radius: var(--ol-pill-radius);
+}
+
+.ol-aura-sidebar-settings {
+  padding: 10px 12px;
+  border-radius: var(--ol-r-lg);
+  border: 1px solid var(--ol-sidebar-settings-border);
+  background: var(--ol-sidebar-settings-bg);
+  box-shadow: none;
+}
+
+.ol-aura-sidebar-settings.ol-nav-btn-active {
+  background: var(--ol-sidebar-settings-active-bg);
+  box-shadow: none;
+}
+
+.ol-aura-console-main {
+  border-radius: var(--ol-panel-radius);
+}
+
+[data-ol-mobile="true"] .ol-aura-console-main {
+  border-radius: 0;
+}
+
+.ol-aura-mobile-topbar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
+  border-bottom: 1px solid var(--ol-sidebar-border);
+  background: var(--ol-sidebar-bg);
+}
+
+.ol-aura-mobile-brand {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ol-aura-mobile-brand-mark {
+  width: 30px;
+  height: 30px;
+  border-radius: var(--ol-control-radius);
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding: 3px;
+  object-fit: contain;
+}
+
+.ol-aura-mobile-brand-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--ol-ink);
+  line-height: 1.15;
+}
+
+.ol-aura-mobile-brand-section {
+  margin-top: 2px;
+  font-size: 11px;
+  color: var(--ol-ink-4);
+  font-family: var(--ol-font-mono);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ol-aura-mobile-settings {
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--ol-r-lg);
+  color: var(--ol-ink-3);
+  background: var(--ol-sidebar-settings-bg);
+  border: 1px solid var(--ol-sidebar-settings-border);
+}
+
+.ol-aura-mobile-settings-active {
+  color: var(--ol-ink);
+  background: var(--ol-sidebar-settings-active-bg);
+}
+
+.ol-aura-mobile-nav {
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: repeat(var(--ol-nav-count, 6), minmax(0, 1fr));
+  gap: 2px;
+  padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
+  border-top: 1px solid var(--ol-sidebar-border);
+  background: var(--ol-sidebar-bg);
+}
+
+.ol-aura-mobile-nav-btn {
+  min-width: 0;
+  height: 50px;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border-radius: var(--ol-r-lg);
+  color: var(--ol-ink-4);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.1;
+}
+
+.ol-aura-mobile-nav-btn span {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.ol-aura-mobile-nav-btn-active {
+  color: var(--ol-ink);
+  background: var(--ol-sidebar-pill-bg);
+  border: 1px solid var(--ol-sidebar-pill-border);
+}
+
+/* ── Settings modal ────────────────────────────────────────────────────── */
+
+.ol-aura-settings {
+  background: var(--ol-panel-bg);
+  border-radius: var(--ol-shell-radius);
+  border: 1px solid var(--ol-panel-border);
+  box-shadow: var(--ol-panel-shadow);
+}
+
+.ol-aura-settings[data-ol-mobile="true"] {
+  border-radius: 0;
+}
+
+.ol-aura-settings-rail {
+  padding: 20px 14px;
+  gap: 16px;
+  background: var(--ol-settings-rail-bg);
+  border-right: 1px solid var(--ol-settings-rail-border);
+  border-bottom: 0;
+}
+
+.ol-aura-settings[data-ol-mobile="true"] .ol-aura-settings-rail {
+  padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 8px;
+  gap: 8px;
+  border-right: 0;
+  border-bottom: 1px solid var(--ol-settings-rail-border);
+}
+
+.ol-aura-settings-pill {
+  background: var(--ol-sidebar-pill-bg);
+  border-radius: var(--ol-r-lg);
+  border: 1px solid var(--ol-sidebar-pill-border);
+  box-shadow: none;
+}
+
+.ol-aura-settings-nav-btn {
+  padding: 7px 10px;
+  border-radius: var(--ol-r-lg);
+  border: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: 13px;
+  cursor: default;
+  text-align: left;
+  position: relative;
+  z-index: 1;
+  transition: color 0.16s var(--ol-motion-quick), background 0.16s var(--ol-motion-quick);
+}
+
+.ol-aura-settings[data-ol-mobile="true"] .ol-aura-settings-nav-btn {
+  padding: 8px 11px;
+}
+
+.ol-aura-settings-nav-btn.ol-nav-btn-active {
+  background: transparent;
+  border: 0;
+}
+
+.ol-aura-settings[data-ol-mobile="true"] .ol-aura-settings-nav-btn.ol-nav-btn-active {
+  background: var(--ol-sidebar-pill-bg);
+  border: 1px solid var(--ol-sidebar-pill-border);
+}
+
+.ol-aura-settings-links {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-top: 10px;
+  padding-left: 0;
+  border-top: 1px solid var(--ol-settings-links-border);
+  border-left: 0;
+  overflow-x: visible;
+}
+
+.ol-aura-settings[data-ol-mobile="true"] .ol-aura-settings-links {
+  flex-direction: row;
+  padding-top: 0;
+  padding-left: 8px;
+  border-top: 0;
+  border-left: 1px solid var(--ol-settings-links-border);
+  overflow-x: auto;
+}
+
+.ol-aura-settings-content {
+  background: var(--ol-settings-content-bg);
+}
+
+.ol-aura-settings-close {
+  background: var(--ol-settings-close-bg);
+  color: var(--ol-ink-3);
+  transition: background 0.16s var(--ol-motion-quick);
+}
+
+.ol-aura-settings-close:hover {
+  background: var(--ol-settings-close-hover-bg);
+}
+
+.ol-aura-settings-title {
+  padding: 24px 28px 10px;
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  font-family: var(--ol-font-display);
+  color: var(--ol-ink);
+}
+
+.ol-aura-settings[data-ol-mobile="true"] .ol-aura-settings-title {
+  padding: 16px 48px 8px 16px;
+  font-size: 20px;
+}
+
+/* ── Page switch + prompt keyframes ──────────────────────────────────── */
+
+@keyframes ol-page-slide {
+  from { opacity: 0; transform: translate3d(10px, 0, 0) scale(.996); filter: blur(6px); }
+  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
+}
+
+@keyframes ol-page-fadeout {
+  from { opacity: 1; filter: blur(0); }
+  to   { opacity: 0; filter: blur(8px); }
+}
+
+@keyframes ol-prompt-fade {
+  from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
+  to   { opacity: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
+}
+
+@keyframes ol-prompt-pop {
+  from { opacity: 0; transform: translateY(6px) scale(.97); filter: blur(6px); }
+  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
+}
diff --git a/openless-all/app/src/styles/tokens.css b/openless-all/app/src/styles/tokens.css
index a905b340..a19679e6 100755
--- a/openless-all/app/src/styles/tokens.css
+++ b/openless-all/app/src/styles/tokens.css
@@ -25,8 +25,11 @@
   --ol-ink: #0a0a0b;
   --ol-ink-2: #2a2a2d;
   --ol-ink-3: rgba(10, 10, 11, 0.62);
-  --ol-ink-4: rgba(10, 10, 11, 0.42);
+  --ol-ink-4: rgba(10, 10, 11, 0.58);
   --ol-ink-5: rgba(10, 10, 11, 0.24);
+  --ol-ink-muted: var(--ol-ink-3);
+  --ol-ink-subtle: var(--ol-ink-4);
+  --ol-placeholder: var(--ol-ink-4);
 
   /* Blue accent */
   --ol-blue: #2563eb;
@@ -34,6 +37,11 @@
   --ol-blue-soft: #eff4ff;
   --ol-blue-ring: rgba(37, 99, 235, 0.22);
   --ol-on-accent: #ffffff;
+  --ol-accent-solid-bg: var(--ol-blue);
+  --ol-accent-solid-bg-hover: var(--ol-blue-hover);
+  --ol-accent-solid-ink: var(--ol-on-accent);
+  --ol-primary-solid-bg: #111827;
+  --ol-primary-solid-ink: var(--ol-on-accent);
 
   /* Shared glass */
   --ol-glass-bg: rgba(255, 255, 255, 0.62);
@@ -73,6 +81,9 @@
   --ol-r-xl: 18px;
   --ol-r-2xl: var(--ol-card-radius);
   --ol-r-pill: var(--ol-pill-radius);
+  --ol-control-radius: 8px;
+  --ol-bubble-radius: var(--ol-r-lg);
+  --ol-modal-radius: var(--ol-r-xl);
 
   /* Typography */
   --ol-font-display: "Aptos", "Segoe UI Variable Display", "PingFang SC", "Microsoft YaHei", sans-serif;
@@ -85,6 +96,8 @@
   --ol-warn: #d97706;
   --ol-warn-soft: #fff7ed;
   --ol-err: #dc2626;
+  --ol-danger-solid-bg: var(--ol-err);
+  --ol-danger-solid-ink: #ffffff;
 
   /* Theme-aware shell and control tokens */
   --ol-app-shell-bg:
@@ -102,8 +115,8 @@
   --ol-panel-bg: var(--ol-aura-surface);
   --ol-panel-border: var(--ol-aura-glass-border);
   --ol-panel-shadow: var(--ol-aura-shadow);
-  --ol-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(252, 252, 253, 0.82));
-  --ol-card-border: rgba(255, 255, 255, 0.74);
+  --ol-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 250, 251, 0.86));
+  --ol-card-border: rgba(255, 255, 255, 0.78);
   --ol-card-shadow: var(--ol-aura-shadow-soft);
 
   --ol-sidebar-bg: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12));
@@ -147,8 +160,8 @@
   --ol-pill-selected-ink: #ffffff;
   --ol-pill-selected-border: #111827;
   --ol-segmented-bg: rgba(0,0,0,0.04);
-  --ol-segmented-active-bg: #ffffff;
-  --ol-segmented-active-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 0.5px rgba(0,0,0,.06);
+  --ol-segmented-active-bg: var(--ol-control-elevated);
+  --ol-segmented-active-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.08);
   --ol-toggle-off-bg: rgba(0,0,0,0.15);
   --ol-toggle-knob: #ffffff;
   --ol-overlay-bg: rgba(15,17,22,0.32);
@@ -205,14 +218,22 @@
   --ol-ink: #f4f7fb;
   --ol-ink-2: #d8dfeb;
   --ol-ink-3: rgba(244, 247, 251, 0.74);
-  --ol-ink-4: rgba(244, 247, 251, 0.50);
+  --ol-ink-4: rgba(244, 247, 251, 0.54);
   --ol-ink-5: rgba(244, 247, 251, 0.26);
+  --ol-ink-muted: var(--ol-ink-3);
+  --ol-ink-subtle: var(--ol-ink-4);
+  --ol-placeholder: var(--ol-ink-4);
 
   --ol-blue: #60a5fa;
   --ol-blue-hover: #3b82f6;
   --ol-blue-soft: rgba(96, 165, 250, 0.14);
   --ol-blue-ring: rgba(96, 165, 250, 0.30);
   --ol-on-accent: #f8fbff;
+  --ol-accent-solid-bg: #2563eb;
+  --ol-accent-solid-bg-hover: #1d4ed8;
+  --ol-accent-solid-ink: #ffffff;
+  --ol-primary-solid-bg: var(--ol-accent-solid-bg);
+  --ol-primary-solid-ink: var(--ol-accent-solid-ink);
 
   --ol-glass-bg: rgba(15, 19, 27, 0.68);
   --ol-glass-bg-strong: rgba(17, 22, 30, 0.84);
@@ -231,6 +252,8 @@
   --ol-warn: #f59e0b;
   --ol-warn-soft: rgba(245, 158, 11, 0.14);
   --ol-err: #f87171;
+  --ol-danger-solid-bg: #b91c1c;
+  --ol-danger-solid-ink: #ffffff;
 
   --ol-app-shell-bg: linear-gradient(180deg, #050607 0%, #090a0c 100%);
   --ol-window-bg:
@@ -243,9 +266,9 @@
   --ol-panel-bg: linear-gradient(180deg, rgba(33,33,36,0.96), rgba(28,28,31,0.94));
   --ol-panel-border: rgba(255,255,255,0.07);
   --ol-panel-shadow: 0 18px 44px -34px rgba(0,0,0,0.62);
-  --ol-card-bg: linear-gradient(180deg, rgba(34,34,37,0.96), rgba(29,29,32,0.94));
-  --ol-card-border: rgba(255,255,255,0.06);
-  --ol-card-shadow: none;
+  --ol-card-bg: linear-gradient(180deg, rgba(36,36,40,0.98), rgba(30,30,34,0.96));
+  --ol-card-border: rgba(255,255,255,0.08);
+  --ol-card-shadow: 0 12px 32px -24px rgba(0,0,0,0.55);
 
   --ol-sidebar-bg: transparent;
   --ol-sidebar-border: rgba(255,255,255,0.06);
@@ -288,8 +311,8 @@
   --ol-pill-selected-ink: #f4f7fb;
   --ol-pill-selected-border: rgba(96,165,250,0.40);
   --ol-segmented-bg: rgba(255,255,255,0.06);
-  --ol-segmented-active-bg: rgba(255,255,255,0.12);
-  --ol-segmented-active-shadow: none;
+  --ol-segmented-active-bg: var(--ol-control-elevated);
+  --ol-segmented-active-shadow: 0 0 0 0.5px rgba(255,255,255,0.10);
   --ol-toggle-off-bg: rgba(255,255,255,0.16);
   --ol-toggle-knob: #f8fbff;
   --ol-overlay-bg: rgba(4, 8, 14, 0.58);