diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index df9c84e..cf88133 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -132,6 +132,12 @@ jobs:
           set -Eeuo pipefail
           corepack pnpm --dir admin-dashboard typecheck
 
+      - name: Check dashboard design contract
+        shell: bash
+        run: |
+          set -Eeuo pipefail
+          corepack pnpm --dir admin-dashboard check:design
+
   production-build:
     name: Production build
     runs-on: ubuntu-24.04
@@ -355,7 +361,7 @@ jobs:
 
           dashboard_html="$(curl --fail --silent --show-error --retry 10 --retry-all-errors --retry-delay 2 \
             "http://127.0.0.1:${DASHBOARD_PORT}/")"
-          grep --fixed-strings --quiet 'WaitQueue Workbench' <<< "$dashboard_html"
+          grep --fixed-strings --quiet 'data-product="waitqueue-console"' <<< "$dashboard_html"
           node -e '
             let html = "";
             process.stdin.setEncoding("utf8");
diff --git a/README.md b/README.md
index f0e15e2..9aa6393 100644
--- a/README.md
+++ b/README.md
@@ -644,10 +644,10 @@ curl -X POST http://127.0.0.1:3000/waitqueue/admin/deadLetters/replay \
 控制台位于 `admin-dashboard/`，不是 mock 模板，也不是后端启动依赖。它提供：
 
 - 10 秒自动刷新，页面不可见时暂停轮询；
-- 基于 Ant Design 6 的紧凑工作台、浅/深主题和移动端布局；
+- 基于 Ant Design 6、对齐 fullstack-ai-infra Warm Agent Workspace 的浅/深主题与移动端布局；
 - 真实 waiting、running、retrying、DLQ、最老等待与容量利用率；
 - 当前进程 callback、claim、recovery 计数及起始时间；
-- 左侧实时队列目录、Workbench 摘要与并发槽位视图；
+- 72px 模块栏、256px 队列上下文目录、60px 顶栏与独立队列详情页；
 - 队列搜索、并发占用和三类 cron 展示；
 - 注册/更新队列、向指定队列提交任务、分页查询与 generation-safe DLQ 重放；
 - 离线、过期、加载和空数据状态。
diff --git a/admin-dashboard/README.md b/admin-dashboard/README.md
index 2497600..d92b368 100644
--- a/admin-dashboard/README.md
+++ b/admin-dashboard/README.md
@@ -1,19 +1,21 @@
-# WaitQueue Workbench
+# WaitQueue 队列运行中心
 
 waitqueue.js 的轻量实时运维控制台。它直接读取后端队列配置、Redis 运行快照和当前进程计数，不使用 mock 数据，也不展示当前系统无法证明的历史趋势。
 
-界面沿用 DWS Backend 的开发者工作台语言：数据目录、紧凑顶栏、黑色 Workbench 横幅、1px 深色描边和薄荷绿运行状态。交互控件使用 Ant Design 6，布局与视觉 token 保持项目自身风格，没有引入 Ant Design Pro、图表运行时或额外状态库。
+界面遵循 [fullstack-ai-infra/design-system@9d048faa](https://github.com/fullstack-ai-infra/design-system/tree/9d048faaabe0429a6a8720bfbb31418544237b6b) 的 **Warm Agent Workspace** 视觉契约：暖象牙画布、stone 导航、paper 表面、charcoal 文字和 sage 主操作。布局采用 72px 模块栏、256px 队列上下文栏和 60px 顶栏；表格、表单、抽屉、弹窗及反馈继续由 Ant Design 6 提供。
+
+设计系统当前尚未发布稳定 npm 版本，且其 React 18 peer contract 与本项目 React 19 不兼容，因此这里使用轻量 semantic adapter 将上游 token 映射到 Ant Design `ConfigProvider`，不引入重复的 Radix、Tailwind 或状态管理运行时。待设计系统正式支持 React 19 后，可直接切换到包依赖。
 
 ## 页面怎么用
 
-顶部四个工作区分别承担不同职责：
+左侧模块栏的四个页面分别承担不同职责：
 
-1. **总览**：先看 backlog、最老 waiting、Retry、DLQ、容量利用率，以及本进程 callback/claim/recovery 计数。计数的起始时间显示在卡片底部，服务重启后会归零。
-2. **队列**：在左侧目录搜索 namespace、回调 origin 或 queue ID；点选队列后查看运行槽位、Cron 和真实运行状态，也可提交 taskId 或更新配置。
+1. **总览**：先看等待任务、最老等待、运行容量、Retry、DLQ，以及本进程 callback/claim/recovery 计数。计数的起始时间显示在卡片底部，服务重启后会归零。
+2. **队列**：在上下文目录搜索 namespace、回调 origin 或 queue ID；点选队列后查看运行槽位、Cron 和真实运行状态，也可提交 taskId 或更新配置。
 3. **死信**：选择队列后分页查看 DLQ；重放前必须二次确认，后端用 `entryId` 校验 generation，避免把已更新的旧记录误重放。
 4. **诊断**：分别查看进程 liveness、MySQL/Redis readiness，并核对 Prometheus 抓取契约。
 
-页面每 10 秒自动刷新，浏览器切到后台时暂停；手动刷新会同时更新队列快照和健康状态。顶栏的 `ONLINE` 只有在 liveness 与 readiness 都成功时才出现，依赖异常会明确显示为 `DEGRADED`。桌面端使用表格与固定队列目录，窄屏切换为卡片、抽屉目录和底部视图导航；浅色/深色主题共用同一套 Ant Design token 状态。
+页面每 10 秒自动刷新，浏览器切到后台时暂停；手动刷新会同时更新队列快照和健康状态。顶栏只有在 liveness 与 readiness 都成功时才显示“服务在线”，依赖异常会显示“依赖异常”。桌面端使用模块栏、固定队列目录和表格，窄屏隐藏目录并通过抽屉选择队列，表格自动切换为卡片；浅色/深色主题共用同一套语义 token。
 
 当前没有任务历史存储，因此页面不会展示吞吐趋势、成功率、平均耗时或任务明细。
 
@@ -64,6 +66,7 @@ DASHBOARD_ALLOWED_HOSTS=127.0.0.1,localhost,[::1]
 
 ```bash
 corepack pnpm --dir admin-dashboard typecheck
+corepack pnpm --dir admin-dashboard check:design
 corepack pnpm --dir admin-dashboard build
 corepack pnpm --dir admin-dashboard start
 ```
@@ -101,17 +104,17 @@ Browser
 
 ## 技术与目录
 
-运行时直接依赖只有 Next.js、React、Ant Design、图标与其 SSR 样式运行时；没有 Ant Design Pro、Redux、Axios、Mock.js 或图表库。Pages Router 使用 `_document.tsx` 提取 Ant Design CSS-in-JS 样式，避免首屏闪烁。Next 16 的开发与生产构建显式使用 Webpack，以确保 Ant Design 与提取器共享同一个样式上下文；CI 会检查产物中存在真实 Ant 组件规则，而不只检查空的 style 标签。
+运行时直接依赖只有 Next.js、React、Ant Design、Lucide 图标与 Ant SSR 样式运行时；没有 Ant Design Pro、Redux、Axios、Mock.js、Tailwind、Radix 或图表库。Lucide 与设计系统的图标契约一致，并按组件 tree-shaking。Pages Router 使用 `_document.tsx` 提取 Ant Design CSS-in-JS 样式，避免首屏闪烁。Next 16 的开发与生产构建显式使用 Webpack，以确保 Ant Design 与提取器共享同一个样式上下文；CI 会检查产物中存在真实 Ant 组件规则，而不只检查空的 style 标签。
 
 ```text
 admin-dashboard/
 ├── src/pages/_app.tsx             # 全局样式与主题入口
 ├── src/pages/_document.tsx        # Ant Design 服务端样式提取
-├── src/pages/index.tsx            # 数据读取、交互与控制室页面
+├── src/pages/index.tsx            # 数据读取、交互与四个运行页面
 ├── src/pages/api/waitqueue/       # 运行时白名单代理与 token 注入
-├── src/style/global.css           # 设计 token、主题与基础样式
-├── src/style/dashboard.module.css # 工作台布局、状态组件和响应式样式
-├── src/theme/                      # Ant Design token 与浅/深主题状态
+├── src/style/global.css           # design-system 语义适配与基础样式
+├── src/style/dashboard.module.css # Warm Queue Console 布局与响应式样式
+├── src/theme/                      # 语义 token 到 Ant Design 的映射
 ├── next.config.js                 # API 同源代理
 └── .env.example                   # 后端地址示例
 ```
diff --git a/admin-dashboard/package.json b/admin-dashboard/package.json
index e5bfc3f..9fa7f8f 100644
--- a/admin-dashboard/package.json
+++ b/admin-dashboard/package.json
@@ -11,12 +11,14 @@
     "dev": "next dev --webpack -p 3001",
     "build": "next build --webpack",
     "start": "next start -p 3001",
-    "typecheck": "next typegen && tsc --noEmit"
+    "typecheck": "next typegen && tsc --noEmit",
+    "check:design": "node scripts/check-design-contract.mjs"
   },
   "dependencies": {
     "@ant-design/cssinjs": "2.1.2",
-    "@ant-design/icons": "6.3.2",
+    "@fontsource/inter": "5.3.0",
     "antd": "6.6.0",
+    "lucide-react": "0.468.0",
     "next": "16.3.0",
     "react": "19.2.0",
     "react-dom": "19.2.0"
diff --git a/admin-dashboard/pnpm-lock.yaml b/admin-dashboard/pnpm-lock.yaml
index 8ca10a6..f59a723 100644
--- a/admin-dashboard/pnpm-lock.yaml
+++ b/admin-dashboard/pnpm-lock.yaml
@@ -8,12 +8,15 @@ dependencies:
   '@ant-design/cssinjs':
     specifier: 2.1.2
     version: 2.1.2(react-dom@19.2.0)(react@19.2.0)
-  '@ant-design/icons':
-    specifier: 6.3.2
-    version: 6.3.2(react-dom@19.2.0)(react@19.2.0)
+  '@fontsource/inter':
+    specifier: 5.3.0
+    version: 5.3.0
   antd:
     specifier: 6.6.0
     version: 6.6.0(react-dom@19.2.0)(react@19.2.0)
+  lucide-react:
+    specifier: 0.468.0
+    version: 0.468.0(react@19.2.0)
   next:
     specifier: 16.3.0
     version: 16.3.0(@types/node@20.19.43)(react-dom@19.2.0)(react@19.2.0)
@@ -139,6 +142,10 @@ packages:
     resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
     dev: false
 
+  /@fontsource/inter@5.3.0:
+    resolution: {integrity: sha512-RofMylZmjlJEfELXeNHFWBRcSs75rGU/6bV2S2jfnvv/3rPXPGe0LgUJTklcHZ9lM4OZmAVFhcJPnACfb91A3g==}
+    dev: false
+
   /@img/colour@1.1.0:
     resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
     engines: {node: '>=18'}
@@ -1189,6 +1196,14 @@ packages:
       string-convert: 0.2.1
     dev: false
 
+  /lucide-react@0.468.0(react@19.2.0):
+    resolution: {integrity: sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+    dependencies:
+      react: 19.2.0
+    dev: false
+
   /nanoid@3.3.18:
     resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
diff --git a/admin-dashboard/scripts/check-design-contract.mjs b/admin-dashboard/scripts/check-design-contract.mjs
new file mode 100644
index 0000000..38fb09e
--- /dev/null
+++ b/admin-dashboard/scripts/check-design-contract.mjs
@@ -0,0 +1,68 @@
+import { readFileSync } from 'node:fs';
+
+const read = (path) => readFileSync(new URL(`../${path}`, import.meta.url), 'utf8');
+const fail = (message) => {
+  throw new Error(`design contract: ${message}`);
+};
+const expectText = (source, value, context) => {
+  if (!source.includes(value)) fail(`${context} is missing ${value}`);
+};
+
+const globalCss = read('src/style/global.css');
+const dashboardCss = read('src/style/dashboard.module.css');
+const page = read('src/pages/index.tsx');
+const documentSource = read('src/pages/_document.tsx');
+const theme = read('src/theme/control-room-theme.tsx');
+const packageJson = JSON.parse(read('package.json'));
+
+expectText(globalCss, '9d048faaabe0429a6a8720bfbb31418544237b6b', 'semantic adapter pin');
+expectText(theme, 'fullstack-ai-infra/design-system@9d048faa', 'Ant theme pin');
+expectText(documentSource, "matchMedia('(prefers-color-scheme: dark)')", 'pre-paint system theme bootstrap');
+expectText(documentSource, "localStorage.getItem('waitqueue-theme')", 'legacy theme migration');
+expectText(documentSource, "dataset.themeReady=mode==='dark'?'false':'true'", 'dark first-paint guard');
+expectText(globalCss, "[data-theme-ready='false']", 'dark first-paint CSS guard');
+expectText(theme, 'colorTextPlaceholder: colors.foregroundSubtle', 'accessible placeholder mapping');
+expectText(theme, "dataset.themeReady = 'true'", 'hydrated theme readiness');
+
+const requiredTokens = [
+  '--ui-canvas:',
+  '--ui-navigation:',
+  '--ui-surface:',
+  '--ui-foreground:',
+  '--ui-primary:',
+  '--ui-ai:',
+  '--ui-border:',
+  '--ui-font-sans:',
+  '--ui-space-4:',
+  '--ui-radius-lg:',
+  '--ui-shadow-md:',
+  '--ui-duration-normal:',
+  '--ui-rail-width: 72px',
+  '--ui-sidebar-width: 256px',
+  '--ui-topbar-height: 60px',
+];
+for (const token of requiredTokens) expectText(globalCss, token, 'semantic token contract');
+
+if (/#[\da-f]{3,8}\b/i.test(dashboardCss) || /#[\da-f]{3,8}\b/i.test(page)) {
+  fail('product layout must use semantic variables instead of raw palette values');
+}
+
+for (const legacy of ['WaitQueue Workbench', 'Runtime Pulse', 'Delivery & Recovery', '#00c98b', '#17181b']) {
+  if (page.includes(legacy) || dashboardCss.includes(legacy)) fail(`legacy visual language remains: ${legacy}`);
+}
+
+expectText(page, 'data-product="waitqueue-console"', 'stable dashboard marker');
+expectText(page, 'aria-label="主模块导航"', 'primary navigation landmark');
+expectText(page, 'aria-label="队列目录"', 'queue catalog landmark');
+expectText(page, 'aria-label="运行模块"', 'rail menu name');
+expectText(page, 'tabIndex={-1}', 'skip-link focus target');
+expectText(dashboardCss, 'min-height: 44px', 'mobile touch targets');
+for (const view of ["key: 'overview'", "key: 'queues'", "key: 'deadLetters'", "key: 'diagnostics'"]) {
+  expectText(page, view, 'module navigation');
+}
+
+if (packageJson.dependencies['@ant-design/icons']) fail('product icons must not depend directly on @ant-design/icons');
+if (packageJson.dependencies['lucide-react'] !== '0.468.0') fail('lucide-react must stay aligned with the pinned design-system commit');
+if (packageJson.dependencies['@fontsource/inter'] !== '5.3.0') fail('Inter assets must stay aligned with the pinned design-system commit');
+
+console.log('Warm Agent Workspace contract verified.');
diff --git a/admin-dashboard/src/pages/_app.tsx b/admin-dashboard/src/pages/_app.tsx
index 2b98b9f..936a084 100644
--- a/admin-dashboard/src/pages/_app.tsx
+++ b/admin-dashboard/src/pages/_app.tsx
@@ -1,5 +1,8 @@
 import Head from 'next/head';
 import type { AppProps } from 'next/app';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
 import '../style/global.css';
 import { ControlRoomTheme } from '../theme/control-room-theme';
 
@@ -8,7 +11,7 @@ export default function WaitQueueApp({ Component, pageProps }: AppProps) {
     <>
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="theme-color" content="#17181b" />
+        <meta name="theme-color" content="#f5f1e8" />
       </Head>
       <ControlRoomTheme>
         <Component {...pageProps} />
diff --git a/admin-dashboard/src/pages/_document.tsx b/admin-dashboard/src/pages/_document.tsx
index d74e305..ee4c793 100644
--- a/admin-dashboard/src/pages/_document.tsx
+++ b/admin-dashboard/src/pages/_document.tsx
@@ -31,7 +31,14 @@ export default class WaitQueueDocument extends Document {
   render() {
     return (
       <Html lang="zh-CN">
-        <Head />
+        <Head>
+          <script
+            id="waitqueue-theme-bootstrap"
+            dangerouslySetInnerHTML={{
+              __html: `(function(){try{var saved=localStorage.getItem('waitqueue-warm-theme')||localStorage.getItem('waitqueue-theme');var mode=saved==='dark'||saved==='light'?saved:(matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');document.documentElement.dataset.theme=mode;document.documentElement.dataset.themeReady=mode==='dark'?'false':'true';document.documentElement.style.colorScheme=mode;}catch(error){}})();`,
+            }}
+          />
+        </Head>
         <body>
           <Main />
           <NextScript />
diff --git a/admin-dashboard/src/pages/index.tsx b/admin-dashboard/src/pages/index.tsx
index 646c0fb..4086004 100644
--- a/admin-dashboard/src/pages/index.tsx
+++ b/admin-dashboard/src/pages/index.tsx
@@ -2,8 +2,10 @@ import {
   Alert,
   App as AntApp,
   Badge,
+  Breadcrumb,
   Button,
   Card,
+  Descriptions,
   Drawer,
   Empty,
   Form,
@@ -14,7 +16,6 @@ import {
   Modal,
   Pagination,
   Progress,
-  Segmented,
   Select,
   Skeleton,
   Space,
@@ -26,32 +27,34 @@ import {
   type TableColumnsType,
 } from 'antd';
 import {
-  AppstoreOutlined,
-  BarsOutlined,
-  CheckCircleOutlined,
-  CloudServerOutlined,
-  CodeOutlined,
-  DashboardOutlined,
-  DatabaseOutlined,
-  FieldTimeOutlined,
-  MenuOutlined,
-  MoonOutlined,
-  PlusOutlined,
-  RedoOutlined,
-  ReloadOutlined,
-  SafetyCertificateOutlined,
-  SearchOutlined,
-  SendOutlined,
-  SettingOutlined,
-  SunOutlined,
-  ThunderboltOutlined,
-  WarningOutlined,
-} from '@ant-design/icons';
+  Activity,
+  ArchiveRestore,
+  Boxes,
+  CheckCircle2,
+  Clock3,
+  Database,
+  Gauge,
+  LayoutDashboard,
+  ListTree,
+  Menu as MenuIcon,
+  Moon,
+  Plus,
+  RefreshCw,
+  RotateCcw,
+  Search,
+  Send,
+  Server,
+  Settings,
+  ShieldCheck,
+  Sun,
+  TriangleAlert,
+  Waypoints,
+} from 'lucide-react';
 import type { NextPage } from 'next';
 import Head from 'next/head';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useColorMode } from '../theme/control-room-theme';
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import styles from '../style/dashboard.module.css';
+import { useColorMode } from '../theme/control-room-theme';
 
 const { Header, Sider, Content } = Layout;
 const REQUEST_TIMEOUT_MS = 10_000;
@@ -167,6 +170,13 @@ const DEFAULT_QUEUE_VALUES: QueueFormValues = {
   expire: '0 */5 * * * *',
 };
 
+const VIEW_COPY: Record<ViewKey, { title: string; description: string }> = {
+  overview: { title: '运行总览', description: '队列积压、容量与恢复状态' },
+  queues: { title: '队列详情', description: '运行快照与调度配置' },
+  deadLetters: { title: '死信处理', description: '审阅并安全重放失败任务' },
+  diagnostics: { title: '服务诊断', description: '探针与指标契约' },
+};
+
 async function fetchWithTimeout(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
   const controller = new AbortController();
   const timeout = window.setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
@@ -265,12 +275,12 @@ function displayHook(value: string): string {
   }
 }
 
-function queueState(queue: QueueOverviewItem): { label: string; color: 'success' | 'warning' | 'error' | 'default' } {
-  if ((queue.deadLetters ?? 0) > 0) return { label: '需处理', color: 'error' };
-  if (queue.waiting > 0 && queue.running >= queue.concurrency) return { label: '容量已满', color: 'warning' };
-  if (queue.waiting > 0 || (queue.retrying ?? 0) > 0) return { label: '有积压', color: 'warning' };
-  if (queue.running > 0) return { label: '运行中', color: 'success' };
-  return { label: '空闲', color: 'default' };
+function queueState(queue: QueueOverviewItem): { label: string; color: 'success' | 'warning' | 'error' | 'default'; badge: 'success' | 'warning' | 'error' | 'default' } {
+  if ((queue.deadLetters ?? 0) > 0) return { label: '需要处理', color: 'error', badge: 'error' };
+  if (queue.waiting > 0 && queue.running >= queue.concurrency) return { label: '容量已满', color: 'warning', badge: 'warning' };
+  if (queue.waiting > 0 || (queue.retrying ?? 0) > 0) return { label: '存在积压', color: 'warning', badge: 'warning' };
+  if (queue.running > 0) return { label: '运行中', color: 'success', badge: 'success' };
+  return { label: '空闲', color: 'default', badge: 'default' };
 }
 
 function serviceState(overview: QueueOverview | null, error: string, health: HealthState, loading: boolean): ServiceState {
@@ -284,17 +294,43 @@ function serviceState(overview: QueueOverview | null, error: string, health: Hea
 }
 
 function stateTag(state: ServiceState) {
-  const map: Record<ServiceState, { color: string; icon: React.ReactNode; text: string }> = {
-    SYNCING: { color: 'processing', icon: <ReloadOutlined spin />, text: 'SYNCING' },
-    ONLINE: { color: 'success', icon: <CheckCircleOutlined />, text: 'ONLINE' },
-    DEGRADED: { color: 'warning', icon: <WarningOutlined />, text: 'DEGRADED' },
-    STALE: { color: 'warning', icon: <FieldTimeOutlined />, text: 'STALE' },
-    OFFLINE: { color: 'error', icon: <WarningOutlined />, text: 'OFFLINE' },
+  const map: Record<ServiceState, { color: string; icon: ReactNode; text: string }> = {
+    SYNCING: { color: 'processing', icon: <RefreshCw className={styles.spin} size={13} />, text: '正在同步' },
+    ONLINE: { color: 'success', icon: <CheckCircle2 size={13} />, text: '服务在线' },
+    DEGRADED: { color: 'warning', icon: <TriangleAlert size={13} />, text: '依赖异常' },
+    STALE: { color: 'warning', icon: <Clock3 size={13} />, text: '快照陈旧' },
+    OFFLINE: { color: 'error', icon: <TriangleAlert size={13} />, text: '服务离线' },
   };
   const item = map[state];
   return <Tag color={item.color} icon={item.icon}>{item.text}</Tag>;
 }
 
+function ConsolePageHeader({
+  eyebrow,
+  title,
+  description,
+  meta,
+  actions,
+}: {
+  eyebrow: string;
+  title: ReactNode;
+  description: ReactNode;
+  meta?: ReactNode;
+  actions?: ReactNode;
+}) {
+  return (
+    <header className={styles.pageHeader}>
+      <div className={styles.pageHeaderMain}>
+        <div className={styles.pageEyebrow}>{eyebrow}</div>
+        <h1>{title}</h1>
+        <p>{description}</p>
+        {meta && <div className={styles.pageMeta}>{meta}</div>}
+      </div>
+      {actions && <div className={styles.pageActions}>{actions}</div>}
+    </header>
+  );
+}
+
 function SidebarCatalog({
   overview,
   queues,
@@ -314,34 +350,42 @@ function SidebarCatalog({
 }) {
   return (
     <div className={styles.catalog}>
-      <div className={styles.catalogNumbers} aria-label="队列实时摘要">
-        <span><b>{metric(overview?.summary.queueCount)}</b> 队列</span>
-        <span><b>{metric(overview?.summary.running)}</b> 运行</span>
-        <span><b>{metric(overview?.summary.waiting)}</b> 等待</span>
+      <div className={styles.catalogHeader}>
+        <span className={styles.catalogAvatar}><Boxes size={18} /></span>
+        <span className={styles.catalogHeaderCopy}>
+          <strong>WaitQueue</strong>
+          <small>队列运行中心</small>
+        </span>
+        <Badge count={overview?.summary.queueCount ?? 0} showZero color="var(--ui-primary)" />
       </div>
+
       <div className={styles.catalogSearch}>
         <Input
           allowClear
-          prefix={<SearchOutlined />}
+          prefix={<Search size={15} />}
           value={query}
           onChange={(event) => onQuery(event.target.value)}
-          placeholder="搜索 namespace / origin / ID"
+          placeholder="搜索队列或回调源"
           aria-label="搜索队列"
         />
       </div>
-      <button className={styles.catalogTitle} type="button" onClick={() => onQuery('')}>
-        <AppstoreOutlined />
-        <span><strong>完整目录</strong><small>REALTIME QUEUE REGISTRY</small></span>
-        <b>{overview?.summary.queueCount ?? 0}</b>
-      </button>
-      <div className={styles.catalogLabel}>
-        <span>SCHEDULER QUEUES</span>
-        <b>{queues.length}</b>
+
+      <div className={styles.catalogSectionHeader}>
+        <span>运行队列</span>
+        <span>{queues.length} / {overview?.summary.queueCount ?? 0}</span>
       </div>
+
       <nav className={styles.queueNav} aria-label="已注册队列">
         {queues.map((queue) => {
           const selected = queue.queueId === activeQueueId;
           const state = queueState(queue);
+          const avatarClass = state.badge === 'error'
+            ? styles.queueAvatarDanger
+            : state.badge === 'warning'
+              ? styles.queueAvatarWarning
+              : state.badge === 'success'
+                ? styles.queueAvatarHealthy
+                : styles.queueAvatarNeutral;
           return (
             <button
               key={queue.queueId}
@@ -350,20 +394,24 @@ function SidebarCatalog({
               onClick={() => onSelect(queue.queueId)}
               aria-current={selected ? 'location' : undefined}
             >
-              <span className={styles.queueGlyph}><CloudServerOutlined /></span>
-              <span>
+              <span className={`${styles.queueAvatar} ${avatarClass}`}><Server size={15} /></span>
+              <span className={styles.queueNavCopy}>
                 <strong title={queue.namespace}>{queue.namespace}</strong>
                 <small>Q-{String(queue.queueId).padStart(3, '0')} · {state.label}</small>
               </span>
-              <Badge count={queue.waiting} showZero overflowCount={99999} color={queue.waiting > 0 ? '#d46b08' : '#777'} />
+              <span className={styles.queueNavCount}>
+                <strong>{queue.waiting}</strong>
+                <small>等待</small>
+              </span>
             </button>
           );
         })}
-        {queues.length === 0 && <p className={styles.catalogEmpty}>{query ? '没有匹配队列' : '暂无队列'}</p>}
+        {queues.length === 0 && <p className={styles.catalogEmpty}>{query ? '没有匹配的队列' : '暂无队列'}</p>}
       </nav>
+
       <div className={styles.catalogFooter}>
-        <Button type="primary" icon={<PlusOutlined />} block onClick={onCreate}>注册队列</Button>
-        <small>自动刷新 · 10 秒</small>
+        <Button type="primary" icon={<Plus size={16} />} block onClick={onCreate}>注册队列</Button>
+        <span><RefreshCw size={12} /> 每 10 秒自动刷新</span>
       </div>
     </div>
   );
@@ -402,7 +450,7 @@ const Dashboard: NextPage = () => {
     try {
       const data = await getJson<QueueOverview>('/waitqueue/admin/overview');
       setOverview(data);
-      setActiveQueueId((current) => current ?? data.queues[0]?.queueId ?? null);
+      setActiveQueueId((current) => data.queues.some((queue) => queue.queueId === current) ? current : data.queues[0]?.queueId ?? null);
       setError('');
     } catch (reason) {
       setError(reason instanceof Error ? reason.message : '无法连接 WaitQueue 服务');
@@ -468,7 +516,6 @@ const Dashboard: NextPage = () => {
     [activeQueueId, overview]
   );
   const currentDeadLetters = deadLetterQueueId === activeQueue?.queueId ? deadLetters : null;
-
   const currentServiceState = serviceState(overview, error, health, loading);
 
   const loadDeadLetters = useCallback(async (queueId: number, page = 1) => {
@@ -585,7 +632,7 @@ const Dashboard: NextPage = () => {
       content: `队列 ${activeQueue.namespace} · 任务 ${item.taskId} · 已重试 ${item.retryCount} 次`,
       okText: '重放并重新入队',
       cancelText: '取消',
-      icon: <RedoOutlined />,
+      icon: <RotateCcw size={19} />,
       async onOk() {
         try {
           await postJson('/waitqueue/admin/deadLetters/replay', {
@@ -603,26 +650,28 @@ const Dashboard: NextPage = () => {
     });
   };
 
+  const openQueueView = (queueId: number) => {
+    setActiveQueueId(queueId);
+    setView('queues');
+    setMobileCatalogOpen(false);
+  };
+
   const menuItems: MenuProps['items'] = [
-    { key: 'overview', icon: <DashboardOutlined />, label: '总览' },
-    { key: 'queues', icon: <BarsOutlined />, label: '队列' },
-    { key: 'deadLetters', icon: <WarningOutlined />, label: '死信' },
-    { key: 'diagnostics', icon: <SafetyCertificateOutlined />, label: '诊断' },
+    { key: 'overview', icon: <LayoutDashboard size={19} />, label: '总览' },
+    { key: 'queues', icon: <ListTree size={19} />, label: '队列' },
+    { key: 'deadLetters', icon: <ArchiveRestore size={19} />, label: '死信' },
+    { key: 'diagnostics', icon: <ShieldCheck size={19} />, label: '诊断' },
   ];
 
   const queueColumns: TableColumnsType<QueueOverviewItem> = [
     {
-      title: '队列 / 回调源',
+      title: '队列',
       key: 'queue',
-      width: 250,
-      fixed: 'left',
+      width: 230,
       render: (_, queue) => (
         <div className={styles.queueIdentity}>
-          <span>Q-{String(queue.queueId).padStart(3, '0')}</span>
-          <div>
-            <button type="button" onClick={() => setActiveQueueId(queue.queueId)}>{queue.namespace}</button>
-            <code title="敏感路径已隐藏">{displayHook(queue.hookUrl)}</code>
-          </div>
+          <button type="button" onClick={() => openQueueView(queue.queueId)}>{queue.namespace}</button>
+          <span><code>Q-{String(queue.queueId).padStart(3, '0')}</code> · {displayHook(queue.hookUrl)}</span>
         </div>
       ),
     },
@@ -636,20 +685,20 @@ const Dashboard: NextPage = () => {
       },
     },
     {
-      title: '积压 / 最老等待',
+      title: '等待',
       key: 'backlog',
-      width: 180,
+      width: 150,
       render: (_, queue) => (
         <div className={styles.tableMetric}>
           <strong className={queue.waiting > 0 ? styles.warningText : undefined}>{queue.waiting}</strong>
-          <small><FieldTimeOutlined /> {formatAge(queue.oldestWaitingAgeSeconds, queue.waiting)}</small>
+          <small>{formatAge(queue.oldestWaitingAgeSeconds, queue.waiting)}</small>
         </div>
       ),
     },
     {
-      title: '运行槽位',
+      title: '运行容量',
       key: 'capacity',
-      width: 170,
+      width: 180,
       render: (_, queue) => (
         <div className={styles.capacityCell}>
           <span><b>{queue.running}</b> / {queue.concurrency}</span>
@@ -658,37 +707,22 @@ const Dashboard: NextPage = () => {
       ),
     },
     {
-      title: 'Retry',
-      dataIndex: 'retrying',
-      width: 90,
-      align: 'right',
-      render: (value: number | undefined) => <b className={(value ?? 0) > 0 ? styles.warningText : undefined}>{metric(value)}</b>,
-    },
-    {
-      title: 'DLQ',
-      dataIndex: 'deadLetters',
-      width: 90,
-      align: 'right',
-      render: (value: number | undefined) => <b className={(value ?? 0) > 0 ? styles.dangerText : undefined}>{metric(value)}</b>,
-    },
-    {
-      title: '投递失败',
+      title: '失败',
       key: 'failures',
-      width: 110,
+      width: 120,
       align: 'right',
-      render: (_, queue) => <b className={(queue.callbacks?.failure ?? 0) > 0 ? styles.dangerText : undefined}>{metric(queue.callbacks?.failure)}</b>,
+      render: (_, queue) => (
+        <span className={(queue.callbacks?.failure ?? 0) > 0 || (queue.deadLetters ?? 0) > 0 ? styles.dangerText : undefined}>
+          {metric(queue.callbacks?.failure)} / {metric(queue.deadLetters)} DLQ
+        </span>
+      ),
     },
     {
-      title: '操作',
+      title: '',
       key: 'actions',
-      width: 128,
-      fixed: 'right',
-      render: (_, queue) => (
-        <Space size={4}>
-          <Tooltip title="提交任务"><Button aria-label={`向 ${queue.namespace} 提交任务`} icon={<SendOutlined />} onClick={() => openTaskModal(queue)} /></Tooltip>
-          <Tooltip title="编辑配置"><Button aria-label={`编辑 ${queue.namespace} 配置`} icon={<SettingOutlined />} onClick={() => openQueueModal(queue)} /></Tooltip>
-        </Space>
-      ),
+      width: 80,
+      align: 'right',
+      render: (_, queue) => <Button type="link" onClick={() => openQueueView(queue.queueId)}>查看</Button>,
     },
   ];
 
@@ -697,7 +731,7 @@ const Dashboard: NextPage = () => {
     { title: '失败原因', dataIndex: 'reason', width: 150, render: (value: DeadLetterItem['reason']) => <Tag color="error">{value === 'lease_expired' ? '租约过期' : '回调失败'}</Tag> },
     { title: '重试次数', dataIndex: 'retryCount', width: 110, align: 'right' },
     { title: '失败时间', dataIndex: 'failedAt', width: 180, render: formatTimestamp },
-    { title: '操作', key: 'action', width: 110, fixed: 'right', render: (_, item) => <Button icon={<RedoOutlined />} onClick={() => replayDeadLetter(item)}>重放</Button> },
+    { title: '操作', key: 'action', width: 110, fixed: 'right', render: (_, item) => <Button icon={<RotateCcw size={15} />} onClick={() => replayDeadLetter(item)}>重放</Button> },
   ];
 
   const catalog = (
@@ -709,6 +743,7 @@ const Dashboard: NextPage = () => {
       onQuery={setQuery}
       onSelect={(queueId) => {
         setActiveQueueId(queueId);
+        if (view !== 'deadLetters') setView('queues');
         setMobileCatalogOpen(false);
       }}
       onCreate={() => {
@@ -718,256 +753,376 @@ const Dashboard: NextPage = () => {
     />
   );
 
+  const renderOverview = () => (
+    <>
+      <ConsolePageHeader
+        eyebrow="WaitQueue operations"
+        title="队列运行概览"
+        description="查看当前积压、执行容量和失败恢复状态。所有数据都来自实时运行快照。"
+        meta={<span>已注册 {overview?.summary.queueCount ?? 0} 个队列 · 每 10 秒自动同步</span>}
+        actions={<Button icon={<Plus size={16} />} onClick={() => openQueueModal()}>注册队列</Button>}
+      />
+
+      <section className={styles.metricGrid} aria-label="运行摘要">
+        <Card className={`${styles.metricCard} ${(overview?.summary.waiting ?? 0) > 0 ? styles.metricWarning : ''}`}>
+          <div className={styles.metricCardHeader}><span className={styles.metricIcon}><Clock3 size={18} /></span><span>等待任务</span></div>
+          <Statistic value={overview?.summary.waiting ?? '—'} suffix="个" />
+          <p>最老等待：{formatAge(overview?.summary.oldestWaitingAgeSeconds, overview?.summary.waiting)}</p>
+        </Card>
+        <Card className={styles.metricCard}>
+          <div className={styles.metricCardHeader}><span className={styles.metricIcon}><Activity size={18} /></span><span>运行容量</span></div>
+          <Statistic value={overview ? `${overview.summary.running} / ${overview.summary.capacity}` : '—'} />
+          <Progress percent={overview?.summary.utilization ?? 0} showInfo={false} size="small" />
+        </Card>
+        <Card className={`${styles.metricCard} ${(overview?.summary.retrying ?? 0) > 0 ? styles.metricWarning : ''}`}>
+          <div className={styles.metricCardHeader}><span className={styles.metricIcon}><RotateCcw size={18} /></span><span>延迟重试</span></div>
+          <Statistic value={metric(overview?.summary.retrying)} suffix="个" />
+          <p>等待下一次回队调度</p>
+        </Card>
+        <Card className={`${styles.metricCard} ${(overview?.summary.deadLetters ?? 0) > 0 ? styles.metricDanger : ''}`}>
+          <div className={styles.metricCardHeader}><span className={styles.metricIcon}><ArchiveRestore size={18} /></span><span>死信任务</span></div>
+          <Statistic value={metric(overview?.summary.deadLetters)} suffix="个" />
+          <Button type="link" onClick={() => setView('deadLetters')}>进入死信处理</Button>
+        </Card>
+      </section>
+
+      <section className={styles.overviewGrid}>
+        <Card
+          className={styles.queueHealthCard}
+          title={<div className={styles.cardHeading}><ListTree size={18} /><span><strong>队列健康</strong><small>查看实时积压和失败状态</small></span></div>}
+          extra={<Tag>{overview?.summary.queueCount ?? 0} 个队列</Tag>}
+        >
+          {(overview?.queues.length ?? 0) > 0 ? (
+            <>
+              <div className={styles.desktopTable}>
+                <Table rowKey="queueId" columns={queueColumns} dataSource={overview?.queues ?? []} pagination={false} size="small" scroll={{ x: 780 }} />
+              </div>
+              <div className={styles.mobileQueueList}>
+                {(overview?.queues ?? []).map((queue) => {
+                  const state = queueState(queue);
+                  return (
+                    <button key={queue.queueId} type="button" className={styles.mobileQueueCard} onClick={() => openQueueView(queue.queueId)}>
+                      <span className={styles.mobileQueueHeader}><strong>{queue.namespace}</strong><Tag color={state.color}>{state.label}</Tag></span>
+                      <span className={styles.mobileQueueMetrics}>
+                        <span><small>等待</small><b>{queue.waiting}</b></span>
+                        <span><small>运行</small><b>{queue.running}/{queue.concurrency}</b></span>
+                        <span><small>重试</small><b>{metric(queue.retrying)}</b></span>
+                        <span><small>DLQ</small><b>{metric(queue.deadLetters)}</b></span>
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </>
+          ) : (
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="还没有注册队列">
+              <Button type="primary" icon={<Plus size={16} />} onClick={() => openQueueModal()}>注册第一条队列</Button>
+            </Empty>
+          )}
+        </Card>
+
+        <Card
+          className={styles.recoveryCard}
+          title={<div className={styles.cardHeading}><Waypoints size={18} /><span><strong>投递与恢复</strong><small>当前进程累计值</small></span></div>}
+        >
+          <div className={styles.counterList}>
+            <div><span>回调成功</span><strong>{metric(overview?.summary.callbackSuccesses)}</strong></div>
+            <div><span>回调失败</span><strong className={(overview?.summary.callbackFailures ?? 0) > 0 ? styles.dangerText : undefined}>{metric(overview?.summary.callbackFailures)}</strong></div>
+            <div><span>成功认领</span><strong>{metric(overview?.summary.claims)}</strong></div>
+            <div><span>租约恢复</span><strong>{metric(overview?.summary.recovered)}</strong></div>
+          </div>
+          <div className={styles.counterNote}>
+            <Clock3 size={14} />
+            <span>统计自 {formatTimestamp(overview?.metricsStartedAt)}，服务重启后重新计数。</span>
+          </div>
+        </Card>
+      </section>
+    </>
+  );
+
+  const renderQueueDetail = () => activeQueue ? (
+    <>
+      <ConsolePageHeader
+        eyebrow={`Queue Q-${String(activeQueue.queueId).padStart(3, '0')}`}
+        title={activeQueue.namespace}
+        description={displayHook(activeQueue.hookUrl)}
+        meta={
+          <>
+            <Tag color={queueState(activeQueue).color}>{queueState(activeQueue).label}</Tag>
+            <span>配置更新于 {formatTimestamp(activeQueue.updatedAt)}</span>
+          </>
+        }
+        actions={<Button icon={<Settings size={16} />} onClick={() => openQueueModal(activeQueue)}>编辑配置</Button>}
+      />
+
+      <section className={styles.metricGrid} aria-label="当前队列运行摘要">
+        <Card className={`${styles.metricCard} ${activeQueue.waiting > 0 ? styles.metricWarning : ''}`}>
+          <div className={styles.metricCardHeader}><span className={styles.metricIcon}><Clock3 size={18} /></span><span>等待任务</span></div>
+          <Statistic value={activeQueue.waiting} suffix="个" />
+          <p>最老等待：{formatAge(activeQueue.oldestWaitingAgeSeconds, activeQueue.waiting)}</p>
+        </Card>
+        <Card className={styles.metricCard}>
+          <div className={styles.metricCardHeader}><span className={styles.metricIcon}><Activity size={18} /></span><span>运行中</span></div>
+          <Statistic value={activeQueue.running} suffix={`/ ${activeQueue.concurrency}`} />
+          <p>当前可用槽位：{activeQueue.available}</p>
+        </Card>
+        <Card className={`${styles.metricCard} ${(activeQueue.retrying ?? 0) > 0 ? styles.metricWarning : ''}`}>
+          <div className={styles.metricCardHeader}><span className={styles.metricIcon}><RotateCcw size={18} /></span><span>延迟重试</span></div>
+          <Statistic value={metric(activeQueue.retrying)} suffix="个" />
+          <p>失败后按退避策略回队</p>
+        </Card>
+        <Card className={`${styles.metricCard} ${(activeQueue.deadLetters ?? 0) > 0 ? styles.metricDanger : ''}`}>
+          <div className={styles.metricCardHeader}><span className={styles.metricIcon}><ArchiveRestore size={18} /></span><span>死信任务</span></div>
+          <Statistic value={metric(activeQueue.deadLetters)} suffix="个" />
+          <Button type="link" onClick={() => setView('deadLetters')}>查看并处理</Button>
+        </Card>
+      </section>
+
+      <section className={styles.queueDetailGrid}>
+        <Card className={styles.detailCard} title={<div className={styles.cardHeading}><Gauge size={18} /><span><strong>运行容量</strong><small>当前并发槽位使用情况</small></span></div>}>
+          <div className={styles.capacitySummary}>
+            <span><strong>{activeQueue.utilization}%</strong><small>容量利用率</small></span>
+            <Progress percent={activeQueue.utilization} showInfo={false} />
+          </div>
+          <Descriptions
+            size="small"
+            column={1}
+            items={[
+              { key: 'running', label: '运行中', children: activeQueue.running },
+              { key: 'available', label: '可用槽位', children: activeQueue.available },
+              { key: 'capacity', label: '并发上限', children: activeQueue.concurrency },
+            ]}
+          />
+        </Card>
+
+        <Card className={styles.detailCard} title={<div className={styles.cardHeading}><Clock3 size={18} /><span><strong>调度策略</strong><small>服务端生效中的 Cron 配置</small></span></div>}>
+          <div className={styles.scheduleList}>
+            <div><span>运行任务</span><code>{activeQueue.crontab.run}</code></div>
+            <div><span>检查任务</span><code>{activeQueue.crontab.check}</code></div>
+            <div><span>回收过期</span><code>{activeQueue.crontab.expire}</code></div>
+          </div>
+        </Card>
+
+        <Card className={`${styles.detailCard} ${styles.lifecycleCard}`} title={<div className={styles.cardHeading}><Waypoints size={18} /><span><strong>投递生命周期</strong><small>该队列在当前进程中的累计状态变化</small></span></div>}>
+          <div className={styles.callbackGrid}>
+            <div><span>回调成功</span><strong>{metric(activeQueue.callbacks?.success)}</strong></div>
+            <div><span>回调失败</span><strong className={(activeQueue.callbacks?.failure ?? 0) > 0 ? styles.dangerText : undefined}>{metric(activeQueue.callbacks?.failure)}</strong></div>
+            <div><span>任务认领</span><strong>{metric(activeQueue.claims?.claimed)}</strong></div>
+            <div><span>租约恢复</span><strong>{metric(activeQueue.claims?.recovered)}</strong></div>
+          </div>
+        </Card>
+      </section>
+    </>
+  ) : (
+    <Card className={styles.emptySurface}>
+      <Empty description="还没有可查看的队列"><Button type="primary" onClick={() => openQueueModal()}>注册队列</Button></Empty>
+    </Card>
+  );
+
+  const renderDeadLetters = () => (
+    <>
+      <ConsolePageHeader
+        eyebrow="Failure recovery"
+        title="死信处理"
+        description="按任务代际精确重放；重放失败时保留原始死信记录。"
+        meta={<span>entryId 仅用于代际校验，不进入指标标签或应用日志。</span>}
+        actions={
+          <>
+            <Select
+              aria-label="选择死信队列"
+              value={activeQueue?.queueId}
+              className={styles.queueSelect}
+              options={(overview?.queues ?? []).map((queue) => ({ value: queue.queueId, label: queue.namespace }))}
+              onChange={(queueId) => setActiveQueueId(queueId)}
+            />
+            <Button icon={<RefreshCw className={deadLetterLoading ? styles.spin : undefined} size={16} />} loading={false} disabled={!activeQueue || deadLetterLoading} onClick={() => activeQueue && void loadDeadLetters(activeQueue.queueId, deadLetterPage)}>刷新</Button>
+          </>
+        }
+      />
+
+      {activeQueue ? (
+        <Card className={styles.surfaceCard}>
+          <Alert
+            className={styles.inlineAlert}
+            type={(currentDeadLetters?.total ?? activeQueue.deadLetters ?? 0) > 0 ? 'warning' : 'success'}
+            showIcon
+            message={`${activeQueue.namespace} · ${currentDeadLetters?.total ?? metric(activeQueue.deadLetters)} 条死信`}
+            description="重放会重新进入等待队列，并保留完整的幂等与代际保护。"
+          />
+          <div className={styles.desktopTable}>
+            <Table rowKey="entryId" columns={deadLetterColumns} dataSource={currentDeadLetters?.items ?? []} loading={deadLetterLoading} pagination={false} size="small" scroll={{ x: 760 }} locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="当前没有死信" /> }} />
+          </div>
+          <div className={styles.mobileDeadLetterList}>
+            {(currentDeadLetters?.items ?? []).map((item) => (
+              <Card key={item.entryId} size="small" className={styles.deadLetterCard}>
+                <div className={styles.deadLetterHeader}><code>{item.taskId}</code><Tag color="error">{item.reason === 'lease_expired' ? '租约过期' : '回调失败'}</Tag></div>
+                <div className={styles.deadLetterMeta}><span>已重试 {item.retryCount} 次</span><span>{formatTimestamp(item.failedAt)}</span></div>
+                <Button icon={<RotateCcw size={15} />} onClick={() => replayDeadLetter(item)}>重放任务</Button>
+              </Card>
+            ))}
+            {!deadLetterLoading && (currentDeadLetters?.items.length ?? 0) === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="当前没有死信" />}
+          </div>
+          {(currentDeadLetters?.total ?? 0) > DEAD_LETTER_PAGE_SIZE && (
+            <Pagination
+              className={styles.pagination}
+              current={deadLetterPage}
+              pageSize={DEAD_LETTER_PAGE_SIZE}
+              total={currentDeadLetters?.total ?? 0}
+              showSizeChanger={false}
+              onChange={(page) => void loadDeadLetters(activeQueue.queueId, page)}
+            />
+          )}
+        </Card>
+      ) : (
+        <Card className={styles.emptySurface}><Empty description="先注册并选择一个队列" /></Card>
+      )}
+    </>
+  );
+
+  const renderDiagnostics = () => {
+    const probes = [
+      { key: 'live', title: '进程存活', path: '/health/live', ok: health.live, icon: <Activity size={19} /> },
+      { key: 'ready', title: '依赖就绪', path: '/health/ready', ok: health.ready, icon: <ShieldCheck size={19} /> },
+      { key: 'mysql', title: 'MySQL', path: '持久化存储', ok: health.dependencies?.mysql === 'ok' ? true : health.dependencies ? false : null, icon: <Database size={19} /> },
+      { key: 'redis', title: 'Redis', path: '运行状态存储', ok: health.dependencies?.redis === 'ok' ? true : health.dependencies ? false : null, icon: <Database size={19} /> },
+    ];
+    return (
+      <>
+        <ConsolePageHeader
+          eyebrow="Service health"
+          title="服务诊断"
+          description="健康探针只报告服务状态；Prometheus 指标由服务端鉴权端点提供。"
+          meta={<span>最近检查：{formatTimestamp(health.checkedAt)}</span>}
+        />
+
+        <section className={styles.healthGrid} aria-label="服务健康状态">
+          {probes.map((probe) => (
+            <Card key={probe.key} className={styles.healthCard}>
+              <span className={`${styles.healthIcon} ${probe.ok === false ? styles.healthIconDanger : probe.ok === null ? styles.healthIconUnknown : ''}`}>{probe.icon}</span>
+              <span className={styles.healthCopy}><strong>{probe.title}</strong><small>{probe.path}</small></span>
+              <Badge status={probe.ok === null ? 'default' : probe.ok ? 'success' : 'error'} text={probe.ok === null ? '未知' : probe.ok ? '正常' : '异常'} />
+            </Card>
+          ))}
+        </section>
+
+        <section className={styles.diagnosticsGrid}>
+          <Card className={styles.detailCard} title={<div className={styles.cardHeading}><ShieldCheck size={18} /><span><strong>探针契约</strong><small>适用于编排系统与负载均衡器</small></span></div>}>
+            <Descriptions
+              column={1}
+              size="small"
+              items={[
+                { key: 'live', label: 'Liveness', children: <code>/health/live</code> },
+                { key: 'ready', label: 'Readiness', children: <code>/health/ready</code> },
+                { key: 'cache', label: '缓存策略', children: 'readiness 禁止缓存' },
+                { key: 'failure', label: '失败状态', children: '依赖异常时返回 HTTP 503' },
+              ]}
+            />
+          </Card>
+
+          <Card className={styles.detailCard} title={<div className={styles.cardHeading}><Gauge size={18} /><span><strong>指标契约</strong><small>低基数 Prometheus exposition</small></span></div>}>
+            <div className={styles.contractList}>
+              <div><span>服务端端点</span><code>/metrics</code></div>
+              <div><span>访问方式</span><b>Bearer 鉴权</b></div>
+              <div><span>浏览器代理</span><Tag>不开放</Tag></div>
+              <div><span>Counter 语义</span><b>进程重启清零</b></div>
+            </div>
+            <Alert type="info" showIcon message="多实例聚合请使用 sum(rate())；标签不包含 taskId、token、hookUrl 或异常消息。" />
+          </Card>
+        </section>
+      </>
+    );
+  };
+
   return (
     <>
       <Head>
-        <title>WaitQueue Workbench</title>
-        <meta name="description" content="WaitQueue 实时调度与恢复工作台" />
+        <title>WaitQueue · 队列运行中心</title>
+        <meta name="description" content="WaitQueue 队列运行、恢复与服务诊断中心" />
       </Head>
       <a className={styles.skipLink} href="#main-content">跳到主要内容</a>
-      <Layout className={styles.shell}>
-        <Header className={styles.topbar}>
-          <div className={styles.brand}>
-            <Button className={styles.mobileMenu} type="text" icon={<MenuOutlined />} aria-label="打开队列目录" onClick={() => setMobileCatalogOpen(true)} />
-            <span className={styles.brandMark} aria-hidden="true">&gt;_</span>
-            <div><strong>WaitQueue Backend</strong><small>RUNTIME CONTROL PLANE</small></div>
-          </div>
-          <div className={styles.workspace}><b>运行工作台</b><span>· Workbench</span></div>
-          <Menu
-            className={styles.topMenu}
-            mode="horizontal"
-            items={menuItems}
-            selectedKeys={[view]}
-            onClick={({ key }) => setView(key as ViewKey)}
-          />
-          <div className={styles.topMeta}>
-            <span>Queues <b>{metric(overview?.summary.queueCount)}</b></span>
-            <span>Open <b>{metric(overview?.summary.waiting)}</b></span>
-            {stateTag(currentServiceState)}
-            <Tooltip title={mode === 'light' ? '切换深色主题' : '切换浅色主题'}>
-              <Button type="text" icon={mode === 'light' ? <MoonOutlined /> : <SunOutlined />} aria-label="切换主题" onClick={toggleMode} />
+
+      <Layout className={styles.shell} data-product="waitqueue-console">
+        <Sider className={styles.moduleRail} width={72} theme={mode} aria-label="主模块导航">
+          <div className={styles.moduleRailInner}>
+            <Tooltip title="WaitQueue" placement="right">
+              <button type="button" className={styles.brandMark} aria-label="返回运行总览" onClick={() => setView('overview')}><Boxes size={22} /></button>
             </Tooltip>
-          </div>
-        </Header>
-
-        <Layout className={styles.workspaceLayout}>
-          <Sider className={styles.sidebar} width={288} theme={mode}>{catalog}</Sider>
-          <Content id="main-content" className={styles.content} aria-busy={loading || refreshing}>
-            {error && (
-              <Alert
-                className={styles.alert}
-                type={overview ? 'warning' : 'error'}
-                showIcon
-                message={overview ? '当前展示的是最后一次成功快照' : '控制面暂时离线'}
-                description={error}
-                action={<Button onClick={() => void refreshAll(true)}>重新连接</Button>}
-              />
-            )}
-
-            <section className={styles.hero} aria-labelledby="workbench-title">
-              <div>
-                <span className={styles.heroPrompt} aria-hidden="true">&gt;_</span>
-                <h1 id="workbench-title">WaitQueue Workbench</h1>
-                <Tag>Runtime Operations</Tag>
-              </div>
-              <p>轻量队列状态 · Redis 运行快照 · Claim 恢复 · Dead Letter 运维</p>
-              <div className={styles.heroActions}>
-                <Button icon={<ReloadOutlined spin={refreshing} />} disabled={refreshing} onClick={() => void refreshAll(true)}>刷新快照</Button>
-                <Button type="primary" icon={<SendOutlined />} disabled={!activeQueue} onClick={() => openTaskModal(activeQueue ?? undefined)}>提交任务</Button>
-              </div>
-            </section>
-
-            <Segmented
-              className={styles.mobileViewNav}
-              block
-              value={view}
-              options={[
-                { label: '总览', value: 'overview', icon: <DashboardOutlined /> },
-                { label: '队列', value: 'queues', icon: <BarsOutlined /> },
-                { label: '死信', value: 'deadLetters', icon: <WarningOutlined /> },
-                { label: '诊断', value: 'diagnostics', icon: <SafetyCertificateOutlined /> },
-              ]}
-              onChange={(value) => setView(value as ViewKey)}
-              aria-label="工作台视图"
+            <Menu
+              className={styles.railMenu}
+              mode="inline"
+              aria-label="运行模块"
+              items={menuItems}
+              selectedKeys={[view]}
+              onClick={({ key }) => setView(key as ViewKey)}
             />
+            <div className={styles.railFooter}>
+              <Tooltip title={mode === 'light' ? '切换深色主题' : '切换浅色主题'} placement="right">
+                <Button
+                  type="text"
+                  icon={mode === 'light' ? <Moon size={18} /> : <Sun size={18} />}
+                  aria-label={mode === 'light' ? '切换深色主题' : '切换浅色主题'}
+                  aria-pressed={mode === 'dark'}
+                  onClick={toggleMode}
+                />
+              </Tooltip>
+            </div>
+          </div>
+        </Sider>
+
+        <Sider className={styles.contextSidebar} width={256} theme={mode} aria-label="队列目录">{catalog}</Sider>
+
+        <Layout className={styles.mainLayout}>
+          <Header className={styles.topbar}>
+            <div className={styles.topbarContext}>
+              <Button className={styles.mobileMenu} type="text" icon={<MenuIcon size={19} />} aria-label="打开队列目录" onClick={() => setMobileCatalogOpen(true)} />
+              <Breadcrumb items={[{ title: 'WaitQueue' }, { title: VIEW_COPY[view].title }]} />
+            </div>
+            <div className={styles.topbarActions}>
+              <span className={styles.updated}>更新于 {formatTimestamp(overview?.generatedAt)}</span>
+              {stateTag(currentServiceState)}
+              <Tooltip title="刷新运行快照">
+                <Button type="text" icon={<RefreshCw className={refreshing ? styles.spin : undefined} size={17} />} aria-label="刷新运行快照" disabled={refreshing} onClick={() => void refreshAll(true)} />
+              </Tooltip>
+              <Button type="primary" icon={<Send size={16} />} aria-label="提交任务" disabled={!activeQueue} onClick={() => openTaskModal(activeQueue ?? undefined)}><span className={styles.actionText}>提交任务</span></Button>
+            </div>
+          </Header>
+
+          <Content id="main-content" className={styles.content} tabIndex={-1} aria-busy={loading || refreshing}>
+            <div className={styles.page}>
+              {error && (
+                <Alert
+                  className={styles.alert}
+                  type={overview ? 'warning' : 'error'}
+                  showIcon
+                  message={overview ? '当前展示的是最后一次成功快照' : '控制面暂时离线'}
+                  description={error}
+                  action={<Button onClick={() => void refreshAll(true)}>重新连接</Button>}
+                />
+              )}
+
+              {loading && !overview ? (
+                <Card className={styles.initialSkeleton}><Skeleton active paragraph={{ rows: 12 }} /></Card>
+              ) : (
+                <>
+                  {view === 'overview' && renderOverview()}
+                  {view === 'queues' && renderQueueDetail()}
+                  {view === 'deadLetters' && renderDeadLetters()}
+                  {view === 'diagnostics' && renderDiagnostics()}
+                </>
+              )}
 
-            {loading && !overview ? (
-              <div className={styles.initialSkeleton}><Skeleton active paragraph={{ rows: 10 }} /></div>
-            ) : (
-              <>
-                {(view === 'overview' || view === 'queues') && (
-                  <>
-                    <section className={styles.summaryGrid} aria-label="运行摘要">
-                      <Card className={styles.summaryCard} bordered title={<span><ThunderboltOutlined /> Runtime Pulse</span>} extra={<small>LIVE GAUGES</small>}>
-                        <div className={styles.metricGrid}>
-                          <Statistic title="当前积压" value={overview?.summary.waiting ?? '—'} suffix="tasks" />
-                          <Statistic title="最老等待" value={formatAge(overview?.summary.oldestWaitingAgeSeconds, overview?.summary.waiting)} />
-                          <Statistic title="运行 / 容量" value={overview ? `${overview.summary.running} / ${overview.summary.capacity}` : '—'} />
-                          <Statistic title="Retry" value={metric(overview?.summary.retrying)} valueStyle={(overview?.summary.retrying ?? 0) > 0 ? { color: '#d46b08' } : undefined} />
-                          <Statistic title="DLQ" value={metric(overview?.summary.deadLetters)} valueStyle={(overview?.summary.deadLetters ?? 0) > 0 ? { color: '#c9363e' } : undefined} />
-                          <div className={styles.utilizationMetric}>
-                            <small>容量利用率</small>
-                            <Progress type="circle" size={52} percent={overview?.summary.utilization ?? 0} />
-                          </div>
-                        </div>
-                      </Card>
-
-                      <Card className={styles.summaryCard} bordered title={<span><SafetyCertificateOutlined /> Delivery & Recovery</span>} extra={<small>PROCESS COUNTERS</small>}>
-                        <div className={styles.deliveryGrid}>
-                          <div><small>CALLBACK OK</small><strong>{metric(overview?.summary.callbackSuccesses)}</strong></div>
-                          <div><small>CALLBACK FAILED</small><strong className={(overview?.summary.callbackFailures ?? 0) > 0 ? styles.dangerText : undefined}>{metric(overview?.summary.callbackFailures)}</strong></div>
-                          <div><small>CLAIMED</small><strong>{metric(overview?.summary.claims)}</strong></div>
-                          <div><small>RECOVERED</small><strong>{metric(overview?.summary.recovered)}</strong></div>
-                        </div>
-                        <div className={styles.counterNote}>
-                          <CodeOutlined /> 本进程观察累计，重启清零
-                          {overview?.metricsStartedAt && <span>· since {formatTimestamp(overview.metricsStartedAt)}</span>}
-                        </div>
-                      </Card>
-                    </section>
-
-                    {activeQueue && (
-                      <section className={styles.focusBar} aria-label="当前选中队列">
-                        <CloudServerOutlined />
-                        <div><small>CURRENT QUEUE · Q-{String(activeQueue.queueId).padStart(3, '0')}</small><strong>{activeQueue.namespace}</strong></div>
-                        <code>{displayHook(activeQueue.hookUrl)}</code>
-                        <div className={styles.focusMetrics}>
-                          <span><b>{activeQueue.waiting}</b> waiting</span>
-                          <span><b>{formatAge(activeQueue.oldestWaitingAgeSeconds, activeQueue.waiting)}</b> oldest</span>
-                          <span><b>{metric(activeQueue.retrying)}</b> retry</span>
-                          <span className={(activeQueue.deadLetters ?? 0) > 0 ? styles.dangerText : undefined}><b>{metric(activeQueue.deadLetters)}</b> DLQ</span>
-                        </div>
-                        <Space size={4}>
-                          <Button icon={<SendOutlined />} onClick={() => openTaskModal(activeQueue)}>任务</Button>
-                          <Button icon={<SettingOutlined />} onClick={() => openQueueModal(activeQueue)}>配置</Button>
-                        </Space>
-                      </section>
-                    )}
-
-                    <section className={styles.registryPanel} aria-labelledby="registry-title">
-                      <div className={styles.sectionHeader}>
-                        <div><h2 id="registry-title"><BarsOutlined /> Queue Registry</h2><p>真实运行快照 · 展开查看 Cron 和配置时间</p></div>
-                        <Tag>{queues.length} / {overview?.summary.queueCount ?? 0}</Tag>
-                      </div>
-                      {queues.length > 0 ? (
-                        <>
-                          <div className={styles.desktopTable}>
-                            <Table
-                              rowKey="queueId"
-                              columns={queueColumns}
-                              dataSource={queues}
-                              pagination={false}
-                              size="small"
-                              scroll={{ x: 1140 }}
-                              rowClassName={(queue) => queue.queueId === activeQueue?.queueId ? styles.activeTableRow : ''}
-                              expandable={{
-                                expandedRowRender: (queue) => (
-                                  <div className={styles.queueDetails}>
-                                    <span><b>RUN</b><code>{queue.crontab.run}</code></span>
-                                    <span><b>CHECK</b><code>{queue.crontab.check}</code></span>
-                                    <span><b>EXPIRE</b><code>{queue.crontab.expire}</code></span>
-                                    <span><b>UPDATED</b>{formatTimestamp(queue.updatedAt)}</span>
-                                  </div>
-                                ),
-                              }}
-                            />
-                          </div>
-                          <div className={styles.queueMobileList}>
-                            {queues.map((queue) => {
-                              const state = queueState(queue);
-                              return (
-                                <Card key={queue.queueId} size="small" title={queue.namespace} extra={<Tag color={state.color}>{state.label}</Tag>}>
-                                  <div className={styles.mobileMetricGrid}>
-                                    <span><small>WAITING</small><b>{queue.waiting}</b></span>
-                                    <span><small>OLDEST</small><b>{formatAge(queue.oldestWaitingAgeSeconds, queue.waiting)}</b></span>
-                                    <span><small>RETRY</small><b>{metric(queue.retrying)}</b></span>
-                                    <span><small>DLQ</small><b>{metric(queue.deadLetters)}</b></span>
-                                  </div>
-                                  <Progress percent={queue.utilization} size="small" format={() => `${queue.running}/${queue.concurrency}`} />
-                                  <Space><Button icon={<SendOutlined />} onClick={() => openTaskModal(queue)}>任务</Button><Button icon={<SettingOutlined />} onClick={() => openQueueModal(queue)}>配置</Button></Space>
-                                </Card>
-                              );
-                            })}
-                          </div>
-                        </>
-                      ) : (
-                        <Empty description={query ? '没有匹配的队列' : '还没有注册队列'}>
-                          {query ? <Button onClick={() => setQuery('')}>清除筛选</Button> : <Button type="primary" icon={<PlusOutlined />} onClick={() => openQueueModal()}>注册第一条队列</Button>}
-                        </Empty>
-                      )}
-                    </section>
-                  </>
-                )}
-
-                {view === 'deadLetters' && (
-                  <section className={styles.registryPanel} aria-labelledby="dlq-title">
-                    <div className={styles.sectionHeader}>
-                      <div><h2 id="dlq-title"><WarningOutlined /> Dead Letter Queue</h2><p>精确 generation 重放 · 失败时保留原记录</p></div>
-                      <Space>
-                        <Select
-                          aria-label="选择死信队列"
-                          value={activeQueue?.queueId}
-                          style={{ minWidth: 180 }}
-                          options={(overview?.queues ?? []).map((queue) => ({ value: queue.queueId, label: queue.namespace }))}
-                          onChange={(queueId) => setActiveQueueId(queueId)}
-                        />
-                        <Button icon={<ReloadOutlined />} loading={deadLetterLoading} disabled={!activeQueue} onClick={() => activeQueue && void loadDeadLetters(activeQueue.queueId, deadLetterPage)}>刷新</Button>
-                      </Space>
-                    </div>
-                    {activeQueue ? (
-                      <>
-                        <Alert className={styles.inlineInfo} type="info" showIcon message={`${activeQueue.namespace} · ${metric(activeQueue.deadLetters)} 条当前死信`} description="entryId 仅用于防止旧代际误重放，不会进入 Prometheus 标签或应用日志。" />
-                        <Table rowKey="entryId" columns={deadLetterColumns} dataSource={currentDeadLetters?.items ?? []} loading={deadLetterLoading} pagination={false} size="small" scroll={{ x: 760 }} locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="当前没有死信" /> }} />
-                        {(currentDeadLetters?.total ?? 0) > DEAD_LETTER_PAGE_SIZE && (
-                          <Pagination
-                            className={styles.pagination}
-                            current={deadLetterPage}
-                            pageSize={DEAD_LETTER_PAGE_SIZE}
-                            total={currentDeadLetters?.total ?? 0}
-                            showSizeChanger={false}
-                            onChange={(page) => void loadDeadLetters(activeQueue.queueId, page)}
-                          />
-                        )}
-                      </>
-                    ) : <Empty description="先注册并选择一个队列" />}
-                  </section>
-                )}
-
-                {view === 'diagnostics' && (
-                  <section className={styles.diagnosticsGrid} aria-labelledby="diagnostics-title">
-                    <Card className={styles.diagnosticCard} title={<span id="diagnostics-title"><SafetyCertificateOutlined /> Service Diagnostics</span>}>
-                      <div className={styles.healthRows}>
-                        <div><span><CloudServerOutlined /> Process liveness</span>{health.live === null ? <Tag>UNKNOWN</Tag> : <Tag color={health.live ? 'success' : 'error'}>{health.live ? 'LIVE' : 'DOWN'}</Tag>}</div>
-                        <div><span><SafetyCertificateOutlined /> Dependency readiness</span>{health.ready === null ? <Tag>UNKNOWN</Tag> : <Tag color={health.ready ? 'success' : 'warning'}>{health.ready ? 'READY' : 'UNAVAILABLE'}</Tag>}</div>
-                        <div><span><DatabaseOutlined /> MySQL</span><Tag color={health.dependencies?.mysql === 'ok' ? 'success' : 'error'}>{health.dependencies?.mysql ?? 'unknown'}</Tag></div>
-                        <div><span><DatabaseOutlined /> Redis</span><Tag color={health.dependencies?.redis === 'ok' ? 'success' : 'error'}>{health.dependencies?.redis ?? 'unknown'}</Tag></div>
-                      </div>
-                      <small>Last probe · {formatTimestamp(health.checkedAt)}</small>
-                    </Card>
-                    <Card className={styles.diagnosticCard} title={<span><CodeOutlined /> Telemetry Contract</span>}>
-                      <ul className={styles.contractList}>
-                        <li>Prometheus：<code>/metrics</code>（服务端 Bearer 鉴权；不经浏览器代理）</li>
-                        <li>Gauge 来自约 1 秒缓存的 Redis / MySQL 运行快照。</li>
-                        <li>Counter 为本进程观察值，重启清零；多实例使用 <code>sum(rate())</code>。</li>
-                        <li>指标标签不包含 taskId、token、hookUrl 或异常消息。</li>
-                      </ul>
-                    </Card>
-                  </section>
-                )}
-              </>
-            )}
-
-            <footer className={styles.footer}>
-              <span><DatabaseOutlined /> DATA SOURCE · /waitqueue/admin/overview · 10s</span>
-              <span>Snapshot {formatTimestamp(overview?.generatedAt)} · 不伪造趋势或历史成功率</span>
-            </footer>
+              <footer className={styles.footer}>
+                <span>数据源：<code>/waitqueue/admin/overview</code> · 10 秒刷新</span>
+                <span>仅呈现实时快照，不推断历史趋势</span>
+              </footer>
+            </div>
           </Content>
         </Layout>
       </Layout>
 
-      <Drawer title="Queue Catalog" placement="left" width="min(88vw, 320px)" open={mobileCatalogOpen} onClose={() => setMobileCatalogOpen(false)} styles={{ body: { padding: 0 } }}>{catalog}</Drawer>
+      <Drawer rootClassName={styles.catalogDrawer} title="队列目录" placement="left" width="min(88vw, 320px)" open={mobileCatalogOpen} onClose={() => setMobileCatalogOpen(false)} styles={{ body: { padding: 0 } }}>{catalog}</Drawer>
 
-      <Modal title={editingQueueId === null ? '注册队列' : `编辑队列 Q-${String(editingQueueId).padStart(3, '0')}`} open={queueModalOpen} onCancel={() => setQueueModalOpen(false)} footer={null} destroyOnHidden>
+      <Modal rootClassName={styles.consoleModal} title={editingQueueId === null ? '注册队列' : `编辑队列 Q-${String(editingQueueId).padStart(3, '0')}`} width={680} open={queueModalOpen} onCancel={() => setQueueModalOpen(false)} footer={null} destroyOnHidden>
         <Form form={queueForm} layout="vertical" initialValues={DEFAULT_QUEUE_VALUES} onFinish={submitQueue} requiredMark="optional">
           <div className={styles.formGrid}>
             <Form.Item name="namespace" label="Namespace" rules={[{ required: true, whitespace: true, max: 64 }]}><Input disabled={editingQueueId !== null} placeholder="billing" /></Form.Item>
@@ -975,19 +1130,19 @@ const Dashboard: NextPage = () => {
           </div>
           <Form.Item name="hookUrl" label="Hook URL" rules={[{ required: true, type: 'url', max: 255 }]} extra="回调路径可能包含敏感信息，列表只显示 origin。"><Input disabled={editingQueueId !== null} placeholder="https://worker.example/callback" /></Form.Item>
           <div className={styles.cronFields}>
-            <Form.Item name="run" label="RUN cron" rules={[{ required: true, max: 64 }]}><Input /></Form.Item>
-            <Form.Item name="check" label="CHECK cron" rules={[{ required: true, max: 64 }]}><Input /></Form.Item>
-            <Form.Item name="expire" label="EXPIRE cron" rules={[{ required: true, max: 64 }]}><Input /></Form.Item>
+            <Form.Item name="run" label="运行 cron" rules={[{ required: true, max: 64 }]}><Input /></Form.Item>
+            <Form.Item name="check" label="检查 cron" rules={[{ required: true, max: 64 }]}><Input /></Form.Item>
+            <Form.Item name="expire" label="回收 cron" rules={[{ required: true, max: 64 }]}><Input /></Form.Item>
           </div>
           <div className={styles.modalActions}><Button onClick={() => setQueueModalOpen(false)}>取消</Button><Button type="primary" htmlType="submit" loading={submitting}>{editingQueueId === null ? '注册队列' : '保存配置'}</Button></div>
         </Form>
       </Modal>
 
-      <Modal title="提交任务" open={taskModalOpen} onCancel={() => setTaskModalOpen(false)} footer={null} destroyOnHidden>
+      <Modal rootClassName={styles.consoleModal} title="提交任务" open={taskModalOpen} onCancel={() => setTaskModalOpen(false)} footer={null} destroyOnHidden>
         <Form form={taskForm} layout="vertical" onFinish={submitTask} requiredMark="optional">
           <Form.Item name="queueId" label="目标队列" rules={[{ required: true }]}><Select options={(overview?.queues ?? []).map((queue) => ({ value: queue.queueId, label: `${queue.namespace} · Q-${queue.queueId}` }))} /></Form.Item>
           <Form.Item name="taskId" label="Task ID" rules={[{ required: true, whitespace: true, max: 256 }]} extra="同一队列内，活跃 taskId 是幂等键。"><Input autoFocus placeholder="order-20260811-001" /></Form.Item>
-          <div className={styles.modalActions}><Button onClick={() => setTaskModalOpen(false)}>取消</Button><Button type="primary" htmlType="submit" icon={<SendOutlined />} loading={submitting}>进入等待队列</Button></div>
+          <div className={styles.modalActions}><Button onClick={() => setTaskModalOpen(false)}>取消</Button><Button type="primary" htmlType="submit" icon={<Send size={16} />} loading={submitting}>进入等待队列</Button></div>
         </Form>
       </Modal>
     </>
diff --git a/admin-dashboard/src/style/dashboard.module.css b/admin-dashboard/src/style/dashboard.module.css
index 1813ec8..a4e025e 100644
--- a/admin-dashboard/src/style/dashboard.module.css
+++ b/admin-dashboard/src/style/dashboard.module.css
@@ -1,1200 +1,1475 @@
 .shell {
   min-height: 100vh;
-  background: var(--paper);
+  background: var(--ui-canvas) !important;
 }
 
 .skipLink {
   position: fixed;
-  top: 8px;
-  left: 8px;
   z-index: 1000;
+  top: 8px;
+  left: 80px;
   padding: 8px 12px;
-  color: #06110d;
-  background: var(--accent);
-  border-radius: 4px;
-  font-weight: 700;
+  color: var(--ui-primary-foreground);
+  background: var(--ui-primary);
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 650;
+  text-decoration: none;
   transform: translateY(-160%);
+  transition: transform var(--ui-duration-fast) var(--ui-ease);
 }
 
 .skipLink:focus {
   transform: translateY(0);
 }
 
-.topbar {
-  position: sticky;
+.moduleRail {
+  position: sticky !important;
+  z-index: 30;
   top: 0;
-  z-index: 50;
-  height: 64px;
-  display: grid;
-  grid-template-columns: 288px minmax(170px, 1fr) auto auto;
-  align-items: stretch;
-  padding: 0 !important;
-  color: var(--text) !important;
-  line-height: normal !important;
-  background: color-mix(in srgb, var(--panel) 96%, transparent) !important;
-  border-bottom: 1px solid var(--line-ink);
-  backdrop-filter: blur(14px);
+  height: 100vh;
+  flex: 0 0 var(--ui-rail-width) !important;
+  min-width: var(--ui-rail-width) !important;
+  max-width: var(--ui-rail-width) !important;
+  width: var(--ui-rail-width) !important;
+  background: var(--ui-navigation) !important;
+  border-right: 1px solid var(--ui-border);
 }
 
-.brand,
-.workspace,
-.topMeta {
-  min-width: 0;
+.moduleRailInner {
   display: flex;
+  height: 100%;
+  flex-direction: column;
   align-items: center;
-}
-
-.brand {
-  gap: 11px;
-  padding: 0 18px;
-  border-right: 1px solid var(--line-ink);
+  padding: 10px 8px;
 }
 
 .brandMark {
-  width: 38px;
-  height: 38px;
   display: grid;
+  width: 44px;
+  height: 44px;
+  flex: none;
+  margin: 0 0 18px;
+  padding: 0;
+  color: var(--ui-primary);
+  background: var(--ui-surface-raised);
+  border: 1px solid var(--ui-border);
+  border-radius: 12px;
+  box-shadow: var(--ui-shadow-sm);
+  cursor: pointer;
   place-items: center;
-  flex: 0 0 auto;
-  color: var(--accent);
-  background: var(--ink);
-  border-radius: 7px;
-  font: 800 15px/1 var(--font-mono);
-  letter-spacing: -0.08em;
+  transition:
+    color var(--ui-duration-fast) var(--ui-ease),
+    transform var(--ui-duration-fast) var(--ui-ease),
+    box-shadow var(--ui-duration-normal) var(--ui-ease);
 }
 
-.brand > div:last-child {
-  min-width: 0;
+.brandMark:hover {
+  color: var(--ui-primary-hover);
+  box-shadow: var(--ui-shadow-md);
+  transform: translateY(-1px);
 }
 
-.brand strong,
-.brand small {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.railMenu {
+  width: 100% !important;
+  flex: 1;
+  background: transparent !important;
+  border: 0 !important;
 }
 
-.brand strong {
-  font-size: 14px;
+.railMenu > :global(.ant-menu-item) {
+  display: flex;
+  width: 52px;
+  height: 56px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  margin: 4px 2px !important;
+  padding: 5px 2px !important;
+  line-height: 1;
+}
+
+.railMenu :global(.ant-menu-item .ant-menu-item-icon) {
+  display: inline-grid;
+  min-width: 19px;
+  margin: 0 !important;
+  place-items: center;
+}
+
+.railMenu :global(.ant-menu-title-content) {
+  width: 100%;
+  margin: 0 !important;
+  overflow: visible;
+  font-size: 10px;
+  font-weight: 600;
   line-height: 1.2;
+  text-align: center;
+  text-overflow: clip;
 }
 
-.brand small {
-  margin-top: 4px;
-  color: var(--faint);
-  font: 700 8px/1 var(--font-mono);
-  letter-spacing: 0.05em;
+.railFooter {
+  padding-top: 10px;
+  border-top: 1px solid var(--ui-border);
 }
 
-.workspace {
-  gap: 5px;
-  padding: 0 22px;
-  font-size: 14px;
+.railFooter :global(.ant-btn) {
+  width: 44px;
+  height: 44px;
+  color: var(--ui-foreground-muted);
+  border-radius: 10px;
 }
 
-.workspace span {
-  color: var(--muted);
+.contextSidebar {
+  position: sticky !important;
+  z-index: 25;
+  top: 0;
+  height: 100vh;
+  flex: 0 0 var(--ui-sidebar-width) !important;
+  min-width: var(--ui-sidebar-width) !important;
+  max-width: var(--ui-sidebar-width) !important;
+  width: var(--ui-sidebar-width) !important;
+  overflow: hidden;
+  background: var(--ui-canvas-subtle) !important;
+  border-right: 1px solid var(--ui-border);
 }
 
-.topMenu {
-  align-self: center;
-  min-width: 355px;
-  height: 42px;
-  padding: 3px 5px;
-  line-height: 34px !important;
-  background: var(--wash) !important;
-  border: 1px solid var(--line) !important;
-  border-radius: 7px;
+.catalog {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  color: var(--ui-foreground);
+  background: var(--ui-canvas-subtle);
 }
 
-.topMenu:global(.ant-menu-horizontal) > :global(.ant-menu-item) {
-  height: 34px;
-  margin: 0 1px !important;
-  padding-inline: 12px !important;
-  border-radius: 5px;
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 34px !important;
+.catalogHeader {
+  display: flex;
+  min-height: var(--ui-topbar-height);
+  align-items: center;
+  gap: 10px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--ui-border);
 }
 
-.topMenu:global(.ant-menu-horizontal) > :global(.ant-menu-item)::after {
-  display: none;
+.catalogAvatar {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  flex: none;
+  color: var(--ui-primary);
+  background: var(--ui-primary-soft);
+  border-radius: 10px;
+  place-items: center;
 }
 
-.topMenu:global(.ant-menu-horizontal) > :global(.ant-menu-item-selected) {
-  background: var(--panel) !important;
-  box-shadow: inset 0 0 0 1px var(--line);
+.catalogHeaderCopy {
+  display: flex;
+  overflow: hidden;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
 }
 
-.topMeta {
-  justify-content: flex-end;
-  gap: 13px;
-  padding: 0 16px;
-  font: 10px/1 var(--font-mono);
+.catalogHeaderCopy strong {
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 680;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.topMeta > span {
-  color: var(--muted);
+.catalogHeaderCopy small {
+  margin-top: 1px;
+  color: var(--ui-foreground-muted);
+  font-size: 11px;
 }
 
-.topMeta > span b {
-  margin-left: 3px;
-  color: var(--text);
+.catalogHeader :global(.ant-badge-count) {
+  color: var(--ui-primary-foreground);
+  box-shadow: none;
   font-size: 11px;
 }
 
-.topMeta :global(.ant-tag) {
-  margin-inline-end: 0;
-  font: 700 9px/20px var(--font-mono);
+.catalogSearch {
+  padding: 16px 14px 10px;
 }
 
-.mobileMenu {
-  display: none !important;
+.catalogSearch :global(.ant-input-affix-wrapper) {
+  background: var(--ui-surface-raised);
+  border-color: var(--ui-border);
 }
 
-.workspaceLayout {
-  min-height: calc(100vh - 64px);
-  background: var(--paper) !important;
+.catalogSearch :global(.ant-input-prefix) {
+  color: var(--ui-foreground-subtle);
 }
 
-.sidebar {
-  position: sticky !important;
-  top: 64px;
-  align-self: flex-start;
-  height: calc(100vh - 64px);
-  overflow: hidden;
-  background: var(--panel) !important;
-  border-right: 1px solid var(--line-ink);
+.catalogSectionHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 18px 7px;
+  color: var(--ui-foreground-muted);
+  font-size: 11px;
+  font-weight: 650;
 }
 
-.catalog {
-  height: 100%;
+.queueNav {
   display: flex;
+  min-height: 0;
+  flex: 1;
   flex-direction: column;
-  overflow: hidden;
-  background: var(--panel);
+  gap: 3px;
+  overflow: auto;
+  padding: 0 10px 16px;
+  scrollbar-width: thin;
 }
 
-.catalogNumbers {
-  min-height: 43px;
+.queueNav > button {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  min-height: 58px;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
-  border-bottom: 1px solid var(--line);
+  gap: 10px;
+  padding: 8px 9px;
+  color: var(--ui-foreground-muted);
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  cursor: pointer;
+  transition:
+    color var(--ui-duration-fast) var(--ui-ease),
+    background var(--ui-duration-fast) var(--ui-ease),
+    border-color var(--ui-duration-fast) var(--ui-ease),
+    box-shadow var(--ui-duration-fast) var(--ui-ease);
 }
 
-.catalogNumbers span {
-  color: var(--muted);
-  font: 9px/1 var(--font-mono);
-  text-align: center;
+.queueNav > button:hover {
+  color: var(--ui-foreground);
+  background: color-mix(in srgb, var(--ui-surface) 72%, transparent);
 }
 
-.catalogNumbers b {
-  color: var(--text);
-  font-size: 10px;
+.queueNav > button.queueNavActive {
+  color: var(--ui-foreground);
+  background: var(--ui-surface-raised);
+  border-color: var(--ui-border);
+  box-shadow: inset 2px 0 var(--ui-primary), var(--ui-shadow-sm);
 }
 
-.catalogSearch {
-  padding: 13px 13px 9px;
+.queueAvatar {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  place-items: center;
 }
 
-.catalogSearch :global(.ant-input-affix-wrapper) {
-  border-color: var(--line-ink);
-  border-radius: 6px;
-  box-shadow: none;
+.queueAvatarHealthy {
+  color: var(--ui-success);
+  background: var(--ui-success-soft);
 }
 
-.catalogTitle {
-  width: calc(100% - 20px);
-  display: grid;
-  grid-template-columns: 25px minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 9px;
-  margin: 2px 10px 10px;
-  padding: 10px;
-  color: var(--text);
-  text-align: left;
-  background: var(--wash);
-  border: 1px solid transparent;
-  border-radius: 6px;
-  cursor: pointer;
+.queueAvatarWarning {
+  color: var(--ui-warning);
+  background: var(--ui-warning-soft);
 }
 
-.catalogTitle:hover {
-  border-color: var(--line-ink);
+.queueAvatarDanger {
+  color: var(--ui-danger);
+  background: var(--ui-danger-soft);
 }
 
-.catalogTitle > :global(.anticon) {
-  color: var(--muted);
-  font-size: 16px;
+.queueAvatarNeutral {
+  color: var(--ui-foreground-muted);
+  background: var(--ui-surface-inset);
 }
 
-.catalogTitle strong,
-.catalogTitle small {
-  display: block;
+.queueNavCopy {
+  display: flex;
+  overflow: hidden;
+  min-width: 0;
+  flex-direction: column;
 }
 
-.catalogTitle strong {
-  font-size: 12px;
+.queueNavCopy strong {
+  overflow: hidden;
+  color: inherit;
+  font-size: 13px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.catalogTitle small {
+.queueNavCopy small {
   overflow: hidden;
-  margin-top: 4px;
-  color: var(--faint);
-  font: 8px/1 var(--font-mono);
-  letter-spacing: 0.03em;
+  margin-top: 3px;
+  color: var(--ui-foreground-muted);
+  font-size: 11px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.catalogTitle > b {
-  min-width: 28px;
-  padding: 5px 7px;
-  color: var(--muted);
-  background: var(--panel);
-  border-radius: 999px;
-  font: 9px/1 var(--font-mono);
-  text-align: center;
+.queueNavCount {
+  display: flex;
+  min-width: 30px;
+  align-items: flex-end;
+  flex-direction: column;
 }
 
-.catalogLabel {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 12px;
-  padding: 13px 4px 9px;
-  color: var(--faint);
-  border-top: 1px solid var(--line-ink);
-  font: 700 9px/1 var(--font-mono);
-  letter-spacing: 0.05em;
+.queueNavCount strong {
+  color: var(--ui-foreground);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
 }
 
-.queueNav {
-  min-height: 0;
-  flex: 1;
-  overflow: auto;
-  padding: 0 7px 12px;
+.queueNavCount small {
+  color: var(--ui-foreground-muted);
+  font-size: 10px;
 }
 
-.queueNav > button {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 25px minmax(0, 1fr) auto;
-  align-items: center;
+.catalogEmpty {
+  margin: 28px 10px;
+  color: var(--ui-foreground-muted);
+  font-size: 12px;
+  text-align: center;
+}
+
+.catalogFooter {
+  display: flex;
+  flex-direction: column;
   gap: 9px;
-  padding: 10px 9px;
-  color: var(--muted);
-  text-align: left;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  cursor: pointer;
+  padding: 12px 14px 14px;
+  border-top: 1px solid var(--ui-border);
 }
 
-.queueNav > button:hover,
-.queueNav > .queueNavActive {
-  color: var(--text);
-  background: var(--wash);
+.catalogFooter > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  color: var(--ui-foreground-muted);
+  font-size: 11px;
 }
 
-.queueNav > .queueNavActive {
-  border-color: var(--line);
+.mainLayout {
+  min-width: 0;
+  min-height: 100vh;
+  background: var(--ui-canvas) !important;
 }
 
-.queueGlyph {
-  width: 25px;
-  height: 25px;
-  display: grid;
-  place-items: center;
-  color: var(--accent-strong);
-  background: var(--accent-soft);
-  border-radius: 50%;
-  font-size: 11px;
+.topbar {
+  position: sticky;
+  z-index: 20;
+  top: 0;
+  display: flex;
+  height: var(--ui-topbar-height);
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 0 24px !important;
+  line-height: normal !important;
+  background: color-mix(in srgb, var(--ui-canvas) 90%, transparent) !important;
+  border-bottom: 1px solid var(--ui-border);
+  backdrop-filter: blur(14px);
 }
 
-.queueNav > button > span:nth-child(2) {
+.topbarContext,
+.topbarActions {
+  display: flex;
   min-width: 0;
+  align-items: center;
 }
 
-.queueNav strong,
-.queueNav small {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.topbarContext {
+  gap: 8px;
 }
 
-.queueNav strong {
-  color: inherit;
-  font-size: 12px;
+.topbarContext :global(.ant-breadcrumb) {
+  font-size: 13px;
 }
 
-.queueNav small {
-  margin-top: 4px;
-  color: var(--faint);
-  font: 9px/1 var(--font-mono);
+.topbarActions {
+  flex: none;
+  gap: 8px;
 }
 
-.queueNav :global(.ant-badge-count) {
-  min-width: 27px;
-  height: 19px;
-  padding-inline: 6px;
-  border: 0;
+.topbarActions :global(.ant-tag) {
+  display: inline-flex;
+  height: 26px;
+  align-items: center;
+  margin: 0;
+  padding-inline: 9px;
   border-radius: 999px;
-  box-shadow: none;
-  font: 9px/19px var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
 }
 
-.catalogEmpty {
-  margin: 26px 0;
-  color: var(--faint);
-  font-size: 12px;
-  text-align: center;
+.updated {
+  color: var(--ui-foreground-subtle);
+  font-size: 11px;
+  white-space: nowrap;
 }
 
-.catalogFooter {
-  display: grid;
-  gap: 9px;
-  padding: 12px 13px;
-  border-top: 1px solid var(--line);
+.mobileMenu {
+  display: none !important;
 }
 
-.catalogFooter small {
-  color: var(--faint);
-  font: 8px/1 var(--font-mono);
-  letter-spacing: 0.08em;
-  text-align: center;
+.spin {
+  animation: ui-spin 0.9s linear infinite;
 }
 
 .content {
   min-width: 0;
-  padding: 26px 28px 18px;
-  background:
-    linear-gradient(90deg, color-mix(in srgb, var(--line) 38%, transparent) 1px, transparent 1px),
-    linear-gradient(color-mix(in srgb, var(--line) 28%, transparent) 1px, transparent 1px),
-    var(--paper);
-  background-size: 32px 32px;
+  background: var(--ui-canvas) !important;
+}
+
+.page {
+  width: 100%;
+  max-width: 1408px;
+  min-height: calc(100vh - var(--ui-topbar-height));
+  margin: 0 auto;
+  padding: 40px 32px 24px;
 }
 
 .alert {
-  margin-bottom: 18px;
-  border-color: var(--line-ink) !important;
+  margin-bottom: 20px;
 }
 
-.hero {
-  min-height: 112px;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-content: center;
-  gap: 10px 20px;
-  padding: 22px 28px;
-  color: #f5f7f6;
-  background:
-    radial-gradient(circle at 90% 10%, rgba(0, 201, 139, .15), transparent 32%),
-    linear-gradient(105deg, #111315, #202326);
-  border: 1px solid #050606;
-  border-radius: 7px;
-  box-shadow: 0 7px 16px rgba(18, 23, 21, .12);
-}
-
-.hero > div:first-child {
+.initialSkeleton,
+.emptySurface,
+.surfaceCard,
+.detailCard,
+.queueHealthCard,
+.recoveryCard {
+  border-color: var(--ui-border) !important;
+  box-shadow: var(--ui-shadow-sm);
+}
+
+.initialSkeleton {
+  padding: 18px;
+  background: var(--ui-surface) !important;
+}
+
+.pageHeader {
   display: flex;
-  align-items: center;
-  gap: 12px;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 32px;
+  margin-bottom: 28px;
+  animation: ui-fade-in var(--ui-duration-normal) var(--ui-ease);
 }
 
-.heroPrompt {
-  color: var(--accent);
-  font: 800 22px/1 var(--font-mono);
-  letter-spacing: -0.1em;
+.pageHeaderMain {
+  min-width: 0;
 }
 
-.hero h1 {
+.pageEyebrow {
+  margin-bottom: 8px;
+  color: var(--ui-primary);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.055em;
+  text-transform: uppercase;
+}
+
+.pageHeader h1 {
   margin: 0;
-  font-size: clamp(19px, 2vw, 24px);
-  line-height: 1.1;
-  letter-spacing: -0.03em;
+  color: var(--ui-foreground);
+  font-size: clamp(24px, 2.4vw, 26px);
+  font-weight: 680;
+  letter-spacing: -0.025em;
+  line-height: 1.2;
 }
 
-.hero :global(.ant-tag) {
-  color: #d3d7d5;
-  background: transparent;
-  border-color: #5c6260;
-  font: 9px/20px var(--font-mono);
+.pageHeaderMain > p {
+  max-width: 700px;
+  margin: 8px 0 0;
+  color: var(--ui-foreground-muted);
+  font-size: 14px;
+  line-height: 1.6;
 }
 
-.hero p {
-  grid-column: 1;
-  margin: 0 0 0 44px;
-  color: #aeb4b1;
+.pageMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: 12px;
+  color: var(--ui-foreground-subtle);
   font-size: 12px;
 }
 
-.heroActions {
-  grid-column: 2;
-  grid-row: 1 / span 2;
+.pageMeta :global(.ant-tag) {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  border-radius: 999px;
+}
+
+.pageActions {
   display: flex;
+  flex: none;
   align-items: center;
   gap: 8px;
 }
 
-.heroActions :global(.ant-btn-default) {
-  color: #e8ebe9;
-  background: #292d2f;
-  border-color: #555b58;
+.queueSelect {
+  min-width: 190px;
 }
 
-.mobileViewNav {
-  display: none !important;
+.metricGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-bottom: 16px;
+  animation: ui-fade-in var(--ui-duration-normal) var(--ui-ease);
 }
 
-.initialSkeleton,
-.registryPanel,
-.diagnosticCard {
-  background: var(--panel);
-  border: 1px solid var(--line-ink);
-  border-radius: 7px;
+.metricCard {
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--ui-surface-raised) !important;
+  border-color: var(--ui-border) !important;
+  border-radius: 14px !important;
+  box-shadow: var(--ui-shadow-sm);
+  transition:
+    transform var(--ui-duration-normal) var(--ui-ease),
+    box-shadow var(--ui-duration-normal) var(--ui-ease);
+}
+
+.metricCard::before {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 3px;
+  background: var(--ui-primary);
+  content: '';
 }
 
-.initialSkeleton {
-  margin-top: 20px;
-  padding: 28px;
+.metricCard:hover {
+  box-shadow: var(--ui-shadow-md);
+  transform: translateY(-2px);
 }
 
-.summaryGrid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.3fr) minmax(360px, .7fr);
-  gap: 18px;
-  margin-top: 20px;
+.metricWarning::before {
+  background: var(--ui-warning);
 }
 
-.summaryCard {
-  border-color: var(--line-ink) !important;
-  border-radius: 7px !important;
-  box-shadow: none !important;
+.metricDanger::before {
+  background: var(--ui-danger);
 }
 
-.summaryCard :global(.ant-card-head) {
-  min-height: 51px;
-  border-bottom-color: var(--line);
+.metricCard :global(.ant-card-body) {
+  display: flex;
+  min-height: 178px;
+  flex-direction: column;
+  padding: 20px;
 }
 
-.summaryCard :global(.ant-card-head-title) > span {
+.metricCardHeader {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 14px;
-}
-
-.summaryCard :global(.ant-card-extra) small {
-  color: var(--faint);
-  font: 700 8px/1 var(--font-mono);
-  letter-spacing: .08em;
+  gap: 10px;
+  margin-bottom: 20px;
+  color: var(--ui-foreground-muted);
+  font-size: 13px;
+  font-weight: 650;
 }
 
-.metricGrid {
+.metricIcon {
   display: grid;
-  grid-template-columns: repeat(3, minmax(100px, 1fr));
-  gap: 0;
-}
-
-.metricGrid > :global(.ant-statistic),
-.utilizationMetric {
-  min-height: 78px;
-  padding: 7px 15px;
-  border-right: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
+  width: 34px;
+  height: 34px;
+  color: var(--ui-primary);
+  background: var(--ui-primary-soft);
+  border-radius: 10px;
+  place-items: center;
 }
 
-.metricGrid > :nth-child(3n) {
-  border-right: 0;
+.metricWarning .metricIcon {
+  color: var(--ui-warning);
+  background: var(--ui-warning-soft);
 }
 
-.metricGrid > :nth-child(n+4) {
-  border-bottom: 0;
+.metricDanger .metricIcon {
+  color: var(--ui-danger);
+  background: var(--ui-danger-soft);
 }
 
-.metricGrid :global(.ant-statistic-title),
-.utilizationMetric > small {
-  color: var(--faint);
-  font: 700 9px/1.2 var(--font-mono);
-  letter-spacing: .04em;
-  text-transform: uppercase;
+.metricCard :global(.ant-statistic) {
+  margin-top: auto;
 }
 
-.metricGrid :global(.ant-statistic-content) {
-  margin-top: 10px;
-  font-family: var(--font-mono);
+.metricCard :global(.ant-statistic-content) {
+  color: var(--ui-foreground);
   font-weight: 700;
-  letter-spacing: -.04em;
+  letter-spacing: -0.025em;
 }
 
-.metricGrid :global(.ant-statistic-content-suffix) {
+.metricCard :global(.ant-statistic-content-suffix) {
   margin-left: 5px;
-  color: var(--faint);
-  font-size: 9px;
+  color: var(--ui-foreground-subtle);
+  font-size: 12px;
   font-weight: 500;
 }
 
-.utilizationMetric {
+.metricCard > :global(.ant-card-body) > p {
+  min-height: 20px;
+  margin: 8px 0 0;
+  color: var(--ui-foreground-subtle);
+  font-size: 12px;
+}
+
+.metricCard :global(.ant-progress) {
+  margin-top: 13px;
+}
+
+.metricCard :global(.ant-btn-link) {
+  align-self: flex-start;
+  height: auto;
+  margin-top: 7px;
+  padding: 0;
+  font-size: 12px;
+}
+
+.overviewGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.8fr);
+  gap: 16px;
+  align-items: stretch;
+  animation: ui-fade-in var(--ui-duration-normal) var(--ui-ease);
+}
+
+.queueHealthCard,
+.recoveryCard,
+.surfaceCard,
+.detailCard,
+.emptySurface {
+  background: var(--ui-surface) !important;
+  border-radius: 14px !important;
+}
+
+.queueHealthCard :global(.ant-card-head),
+.recoveryCard :global(.ant-card-head),
+.detailCard :global(.ant-card-head) {
+  min-height: 66px;
+  padding-inline: 20px;
+  border-bottom-color: var(--ui-border);
+}
+
+.queueHealthCard :global(.ant-card-body) {
+  padding: 0;
+}
+
+.cardHeading {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 10px;
 }
 
-.deliveryGrid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+.cardHeading > svg {
+  flex: none;
+  color: var(--ui-primary);
 }
 
-.deliveryGrid > div {
+.cardHeading > span {
   display: flex;
-  align-items: end;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 17px 15px;
-  border-right: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
+  flex-direction: column;
 }
 
-.deliveryGrid > div:nth-child(2n) {
-  border-right: 0;
+.cardHeading strong {
+  color: var(--ui-foreground);
+  font-size: 14px;
+  font-weight: 680;
+}
+
+.cardHeading small {
+  margin-top: 2px;
+  color: var(--ui-foreground-subtle);
+  font-size: 11px;
+  font-weight: 400;
 }
 
-.deliveryGrid > div:nth-child(n+3) {
-  border-bottom: 0;
+.queueHealthCard :global(.ant-tag),
+.queueHealthCard :global(.ant-card-extra) {
+  margin: 0;
 }
 
-.deliveryGrid small {
-  color: var(--faint);
-  font: 700 8px/1.2 var(--font-mono);
+.queueHealthCard :global(.ant-table) {
+  background: transparent;
 }
 
-.deliveryGrid strong {
-  font: 700 22px/1 var(--font-mono);
+.queueHealthCard :global(.ant-table-container) {
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
 }
 
-.counterNote {
+.queueIdentity {
   display: flex;
-  align-items: center;
-  gap: 7px;
-  margin-top: 15px;
-  padding: 10px 12px;
-  color: var(--muted);
-  background: var(--wash);
-  border-radius: 5px;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.queueIdentity button {
+  overflow: hidden;
+  width: fit-content;
+  max-width: 100%;
+  padding: 0;
+  color: var(--ui-foreground);
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.queueIdentity button:hover {
+  color: var(--ui-primary);
+}
+
+.queueIdentity span {
+  overflow: hidden;
+  color: var(--ui-foreground-subtle);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.queueIdentity code,
+.footer code,
+.scheduleList code,
+.contractList code,
+.deadLetterHeader code,
+.pageHeader code {
+  font-family: var(--ui-font-mono);
+}
+
+.tableMetric {
+  display: flex;
+  flex-direction: column;
+}
+
+.tableMetric strong {
+  color: var(--ui-foreground);
+  font-size: 15px;
+}
+
+.tableMetric small {
+  margin-top: 2px;
+  color: var(--ui-foreground-subtle);
   font-size: 11px;
 }
 
-.focusBar {
+.capacityCell {
   display: grid;
-  grid-template-columns: 26px minmax(120px, auto) minmax(160px, 1fr) auto auto;
+  grid-template-columns: 44px minmax(70px, 1fr);
   align-items: center;
-  gap: 13px;
-  margin-top: 18px;
-  padding: 13px 17px;
-  background: var(--panel);
-  border: 1px solid var(--line-ink);
-  border-radius: 7px;
+  gap: 10px;
+  color: var(--ui-foreground-muted);
+  font-size: 12px;
 }
 
-.focusBar > :global(.anticon) {
-  color: var(--accent-strong);
-  font-size: 18px;
+.capacityCell b {
+  color: var(--ui-foreground);
 }
 
-.focusBar > div:nth-child(2) small,
-.focusBar > div:nth-child(2) strong {
-  display: block;
+.warningText {
+  color: var(--ui-warning) !important;
 }
 
-.focusBar > div:nth-child(2) small {
-  color: var(--faint);
-  font: 8px/1 var(--font-mono);
+.dangerText {
+  color: var(--ui-danger) !important;
 }
 
-.focusBar > div:nth-child(2) strong {
-  overflow: hidden;
-  margin-top: 4px;
-  font-size: 13px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.mobileQueueList,
+.mobileDeadLetterList {
+  display: none;
 }
 
-.focusBar > code {
-  overflow: hidden;
-  color: var(--muted);
-  font: 10px/1 var(--font-mono);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.recoveryCard :global(.ant-card-body) {
+  display: flex;
+  min-height: calc(100% - 66px);
+  flex-direction: column;
+  padding: 12px 20px 18px;
 }
 
-.focusMetrics {
+.counterList {
   display: flex;
-  gap: 14px;
-  color: var(--muted);
-  font: 9px/1 var(--font-mono);
+  flex-direction: column;
 }
 
-.focusMetrics b {
-  color: var(--text);
-  font-size: 11px;
+.counterList > div {
+  display: flex;
+  min-height: 50px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid var(--ui-border);
 }
 
-.registryPanel {
-  overflow: hidden;
-  margin-top: 18px;
+.counterList span {
+  color: var(--ui-foreground-muted);
+  font-size: 13px;
 }
 
-.sectionHeader {
-  min-height: 68px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--line-ink);
+.counterList strong {
+  color: var(--ui-foreground);
+  font-size: 20px;
+  font-variant-numeric: tabular-nums;
 }
 
-.sectionHeader h2 {
+.counterNote {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
-  margin: 0;
-  font-size: 15px;
+  margin-top: auto;
+  padding: 13px;
+  color: var(--ui-foreground-muted);
+  background: var(--ui-surface-inset);
+  border-radius: 10px;
+  font-size: 11px;
+  line-height: 1.5;
 }
 
-.sectionHeader h2 :global(.anticon) {
-  color: var(--accent-strong);
+.counterNote svg {
+  flex: none;
+  margin-top: 1px;
+  color: var(--ui-primary);
 }
 
-.sectionHeader p {
-  margin: 5px 0 0;
-  color: var(--faint);
-  font-size: 11px;
+.queueDetailGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  animation: ui-fade-in var(--ui-duration-normal) var(--ui-ease);
 }
 
-.desktopTable :global(.ant-table) {
-  border-radius: 0;
+.detailCard :global(.ant-card-body) {
+  padding: 20px;
 }
 
-.desktopTable :global(.ant-table-thead > tr > th) {
-  color: var(--muted);
-  font: 700 9px/1.2 var(--font-mono);
-  letter-spacing: .04em;
-  text-transform: uppercase;
+.capacitySummary {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  align-items: center;
+  gap: 18px;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--ui-border);
 }
 
-.desktopTable :global(.ant-table-cell-fix-left),
-.desktopTable :global(.ant-table-cell-fix-right) {
-  background: var(--panel);
+.capacitySummary > span {
+  display: flex;
+  flex-direction: column;
 }
 
-.desktopTable :global(.ant-table-row:hover .ant-table-cell-fix-left),
-.desktopTable :global(.ant-table-row:hover .ant-table-cell-fix-right) {
-  background: var(--accent-ghost) !important;
+.capacitySummary strong {
+  color: var(--ui-foreground);
+  font-size: 24px;
 }
 
-.activeTableRow > td {
-  background: var(--accent-ghost) !important;
+.capacitySummary small {
+  color: var(--ui-foreground-subtle);
+  font-size: 11px;
 }
 
-.queueIdentity {
+.scheduleList {
   display: flex;
-  align-items: center;
-  gap: 11px;
-  min-width: 0;
+  flex-direction: column;
+  gap: 10px;
 }
 
-.queueIdentity > span {
-  flex: 0 0 auto;
-  padding: 5px 7px;
-  color: var(--muted);
-  background: var(--wash);
-  border: 1px solid var(--line);
-  border-radius: 4px;
-  font: 8px/1 var(--font-mono);
+.scheduleList > div {
+  display: grid;
+  min-height: 48px;
+  grid-template-columns: 80px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  background: var(--ui-surface-inset);
+  border: 1px solid var(--ui-border);
+  border-radius: 10px;
 }
 
-.queueIdentity > div {
-  min-width: 0;
+.scheduleList span {
+  color: var(--ui-foreground-muted);
+  font-size: 12px;
 }
 
-.queueIdentity button,
-.queueIdentity code {
-  display: block;
-  max-width: 180px;
+.scheduleList code {
   overflow: hidden;
+  color: var(--ui-foreground);
+  font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.queueIdentity button {
-  padding: 0;
-  color: var(--text);
-  background: transparent;
-  border: 0;
-  font-weight: 700;
-  cursor: pointer;
+.lifecycleCard {
+  grid-column: 1 / -1;
 }
 
-.queueIdentity code {
-  margin-top: 5px;
-  color: var(--faint);
-  font-size: 9px;
+.callbackGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
 }
 
-.tableMetric strong {
-  display: block;
-  font: 700 17px/1 var(--font-mono);
+.callbackGrid > div {
+  display: flex;
+  min-height: 84px;
+  flex-direction: column;
+  justify-content: center;
+  padding: 14px 16px;
+  background: var(--ui-surface-inset);
+  border-radius: 10px;
 }
 
-.tableMetric small {
-  display: block;
-  margin-top: 7px;
-  color: var(--faint);
-  font-size: 9px;
+.callbackGrid span {
+  color: var(--ui-foreground-muted);
+  font-size: 12px;
 }
 
-.capacityCell {
-  min-width: 120px;
+.callbackGrid strong {
+  margin-top: 4px;
+  color: var(--ui-foreground);
+  font-size: 22px;
+  font-variant-numeric: tabular-nums;
 }
 
-.capacityCell > span {
-  display: block;
-  margin-bottom: 6px;
-  color: var(--muted);
-  font: 10px/1 var(--font-mono);
+.surfaceCard :global(.ant-card-body) {
+  padding: 20px;
 }
 
-.capacityCell b {
-  color: var(--text);
-  font-size: 13px;
+.inlineAlert {
+  margin-bottom: 18px;
 }
 
-.queueDetails {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 24px;
-  padding: 4px 6px;
+.mobileDeadLetterList {
+  flex-direction: column;
+  gap: 10px;
 }
 
-.queueDetails span {
+.deadLetterCard {
+  background: var(--ui-surface-raised) !important;
+  border-color: var(--ui-border) !important;
+}
+
+.deadLetterHeader {
   display: flex;
+  min-width: 0;
   align-items: center;
-  gap: 7px;
-  color: var(--muted);
-  font-size: 10px;
+  justify-content: space-between;
+  gap: 10px;
 }
 
-.queueDetails b {
-  color: var(--accent-strong);
-  font: 8px/1 var(--font-mono);
+.deadLetterHeader code {
+  overflow: hidden;
+  min-width: 0;
+  color: var(--ui-foreground);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.queueDetails code {
-  color: var(--text);
-  font: 9px/1 var(--font-mono);
+.deadLetterHeader :global(.ant-tag) {
+  flex: none;
+  margin: 0;
 }
 
-.warningText {
-  color: var(--warning) !important;
+.deadLetterMeta {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 13px 0;
+  color: var(--ui-foreground-subtle);
+  font-size: 11px;
 }
 
-.dangerText {
-  color: var(--danger) !important;
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 18px;
 }
 
-.queueMobileList {
-  display: none;
+.healthGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-bottom: 16px;
+  animation: ui-fade-in var(--ui-duration-normal) var(--ui-ease);
 }
 
-.inlineInfo {
-  margin: 16px 18px;
+.healthCard {
+  background: var(--ui-surface-raised) !important;
+  border-color: var(--ui-border) !important;
+  border-radius: 14px !important;
+  box-shadow: var(--ui-shadow-sm);
 }
 
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-  padding: 16px 18px;
-  border-top: 1px solid var(--line);
+.healthCard :global(.ant-card-body) {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  padding: 18px;
 }
 
-.diagnosticsGrid {
+.healthCard :global(.ant-badge) {
+  grid-column: 2;
+  font-size: 12px;
+}
+
+.healthIcon {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 18px;
-  margin-top: 18px;
+  width: 38px;
+  height: 38px;
+  grid-row: 1 / span 2;
+  color: var(--ui-success);
+  background: var(--ui-success-soft);
+  border-radius: 11px;
+  place-items: center;
 }
 
-.diagnosticCard {
-  box-shadow: none !important;
+.healthIconDanger {
+  color: var(--ui-danger);
+  background: var(--ui-danger-soft);
 }
 
-.diagnosticCard :global(.ant-card-head) {
-  border-bottom-color: var(--line-ink);
+.healthIconUnknown {
+  color: var(--ui-foreground-muted);
+  background: var(--ui-surface-inset);
 }
 
-.healthRows > div {
+.healthCopy {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 46px;
-  gap: 12px;
-  border-bottom: 1px solid var(--line);
+  min-width: 0;
+  flex-direction: column;
 }
 
-.healthRows > div:last-child {
-  border-bottom: 0;
+.healthCopy strong {
+  color: var(--ui-foreground);
+  font-size: 13px;
 }
 
-.healthRows span {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.healthCopy small {
+  overflow: hidden;
+  margin-top: 2px;
+  color: var(--ui-foreground-subtle);
+  font-family: var(--ui-font-mono);
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.diagnosticCard > :global(.ant-card-body) > small {
-  display: block;
-  margin-top: 14px;
-  color: var(--faint);
-  font: 9px/1 var(--font-mono);
+.diagnosticsGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  animation: ui-fade-in var(--ui-duration-normal) var(--ui-ease);
 }
 
 .contractList {
-  margin: 0;
-  padding-left: 18px;
-  color: var(--muted);
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+}
+
+.contractList > div {
+  display: flex;
+  min-height: 46px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid var(--ui-border);
 }
 
-.contractList li {
-  margin: 0 0 13px;
-  line-height: 1.55;
+.contractList span {
+  color: var(--ui-foreground-muted);
+  font-size: 12px;
 }
 
+.contractList b,
 .contractList code {
-  color: var(--text);
-  font-size: 11px;
+  color: var(--ui-foreground);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.contractList :global(.ant-tag) {
+  margin: 0;
 }
 
 .footer {
-  min-height: 54px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
-  padding: 16px 2px 0;
-  color: var(--faint);
-  font: 8px/1.4 var(--font-mono);
-  letter-spacing: .03em;
+  margin-top: 28px;
+  padding: 14px 2px 0;
+  color: var(--ui-foreground-subtle);
+  border-top: 1px solid var(--ui-border);
+  font-size: 11px;
+}
+
+.footer code {
+  font-size: 10px;
 }
 
 .formGrid {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 140px;
-  gap: 12px;
+  grid-template-columns: minmax(0, 1fr) 180px;
+  gap: 14px;
 }
 
 .cronFields {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
-}
-
-.cronFields :global(.ant-input) {
-  font-family: var(--font-mono);
-  font-size: 10px;
+  gap: 12px;
 }
 
 .modalActions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
-  margin-top: 5px;
-  padding-top: 15px;
-  border-top: 1px solid var(--line);
+  margin-top: 6px;
 }
 
-@media (max-width: 1320px) {
-  .topbar {
-    grid-template-columns: 288px minmax(120px, 1fr) auto;
-  }
-
-  .workspace {
-    display: none;
+@media (max-width: 1280px) {
+  .metricGrid,
+  .healthGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .summaryGrid {
+  .overviewGrid {
     grid-template-columns: 1fr;
   }
 
-  .focusBar {
-    grid-template-columns: 26px minmax(130px, auto) minmax(130px, 1fr) auto;
+  .recoveryCard :global(.ant-card-body) {
+    min-height: auto;
   }
 
-  .focusMetrics {
-    grid-column: 2 / span 2;
+  .counterList {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 12px;
+    margin-bottom: 16px;
   }
-}
 
-@media (max-width: 1040px) {
-  .topbar {
-    grid-template-columns: minmax(220px, 1fr) auto;
+  .counterList > div {
+    min-height: 74px;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    gap: 3px;
+    padding: 12px;
+    background: var(--ui-surface-inset);
+    border: 0;
+    border-radius: 10px;
   }
+}
 
-  .topMenu {
-    display: none !important;
+@media (max-width: 1024px) {
+  .page {
+    padding: 32px 28px 22px;
   }
+}
 
-  .sidebar {
-    display: none;
+@media (max-width: 900px) {
+  .contextSidebar {
+    flex-basis: 208px !important;
+    min-width: 208px !important;
+    max-width: 208px !important;
+    width: 208px !important;
   }
 
-  .mobileMenu {
-    display: inline-flex !important;
-    margin-left: -7px;
+  .catalogHeader,
+  .catalogSearch {
+    padding-inline: 12px;
   }
 
-  .content {
-    padding: 22px 20px 16px;
+  .queueNav {
+    padding-inline: 7px;
   }
+}
 
-  .mobileViewNav {
-    display: flex !important;
-    margin-top: 14px;
-    padding: 4px;
-    background: var(--wash);
-    border: 1px solid var(--line-ink);
-    border-radius: 7px;
+@media (max-width: 720px) {
+  .contextSidebar {
+    display: none;
   }
 
-  .diagnosticsGrid {
-    grid-template-columns: 1fr;
+  .mobileMenu {
+    display: inline-flex !important;
   }
-}
 
-@media (max-width: 760px) {
-  .topbar {
-    height: 58px;
-    grid-template-columns: minmax(0, 1fr) auto;
+  .moduleRail {
+    flex-basis: 60px !important;
+    min-width: 60px !important;
+    max-width: 60px !important;
+    width: 60px !important;
   }
 
-  .brand {
-    border-right: 0;
+  .moduleRailInner {
+    padding-inline: 4px;
   }
 
   .brandMark {
-    width: 33px;
-    height: 33px;
+    width: 44px;
+    height: 44px;
   }
 
-  .brand small,
-  .topMeta > span {
-    display: none;
+  .railMenu > :global(.ant-menu-item) {
+    width: 50px;
+    height: 50px;
+    margin-inline: 1px !important;
   }
 
-  .topMeta {
-    gap: 4px;
-    padding: 0 9px;
+  .railMenu :global(.ant-menu-title-content) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px !important;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
   }
 
-  .workspaceLayout {
-    min-height: calc(100vh - 58px);
+  .topbar {
+    padding: 0 14px !important;
   }
 
-  .content {
-    padding: 14px 12px 12px;
-    background-size: 24px 24px;
+  .topbarActions :global(.ant-btn),
+  .mobileMenu {
+    min-width: 44px;
+    height: 44px;
   }
 
-  .hero {
-    min-height: 150px;
-    grid-template-columns: 1fr;
-    padding: 20px;
+  .pageActions :global(.ant-btn),
+  .catalogFooter :global(.ant-btn),
+  .deadLetterCard :global(.ant-btn),
+  .modalActions :global(.ant-btn) {
+    min-height: 44px;
   }
 
-  .hero > div:first-child {
-    flex-wrap: wrap;
+  .pageActions :global(.ant-select-selector),
+  .catalogSearch :global(.ant-input-affix-wrapper) {
+    min-height: 44px !important;
   }
 
-  .hero p {
-    grid-column: 1;
-    margin-left: 0;
-    line-height: 1.6;
+  .catalogDrawer :global(.ant-drawer-close),
+  .consoleModal :global(.ant-modal-close) {
+    width: 44px;
+    height: 44px;
   }
 
-  .heroActions {
-    grid-column: 1;
-    grid-row: auto;
-    justify-content: flex-start;
+  .pagination :global(.ant-pagination-item),
+  .pagination :global(.ant-pagination-prev),
+  .pagination :global(.ant-pagination-next) {
+    min-width: 44px;
+    height: 44px;
+    line-height: 42px;
   }
 
-  .summaryGrid,
-  .focusBar,
-  .registryPanel {
-    margin-top: 12px;
+  .updated,
+  .actionText {
+    display: none;
   }
 
-  .metricGrid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .topbarActions :global(.ant-btn-primary) {
+    width: 38px;
+    padding-inline: 0;
   }
 
-  .metricGrid > :global(.ant-statistic),
-  .utilizationMetric {
-    border-right: 1px solid var(--line);
-    border-bottom: 1px solid var(--line);
+  .pageHeader {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 18px;
   }
 
-  .metricGrid > :nth-child(2n) {
-    border-right: 0;
+  .pageActions {
+    width: 100%;
+    flex-wrap: wrap;
   }
 
-  .metricGrid > :nth-child(n+5) {
-    border-bottom: 0;
+  .queueSelect {
+    min-width: 0;
+    flex: 1;
   }
 
-  .focusBar {
-    grid-template-columns: 24px minmax(0, 1fr) auto;
+  .queueDetailGrid,
+  .diagnosticsGrid {
+    grid-template-columns: 1fr;
   }
 
-  .focusBar > code,
-  .focusMetrics {
-    grid-column: 2 / span 2;
+  .lifecycleCard {
+    grid-column: auto;
   }
 
-  .focusMetrics {
-    display: grid;
+  .callbackGrid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 8px;
   }
+}
 
-  .focusBar > :global(.ant-space) {
-    grid-column: 2 / span 2;
+@media (max-width: 680px) {
+  .desktopTable {
+    display: none;
   }
 
-  .sectionHeader {
-    align-items: flex-start;
+  .mobileQueueList {
+    display: flex;
     flex-direction: column;
+    gap: 10px;
+    padding: 14px;
   }
 
-  .sectionHeader > :global(.ant-space) {
+  .mobileQueueCard {
+    display: flex;
     width: 100%;
+    flex-direction: column;
+    gap: 12px;
+    padding: 14px;
+    color: var(--ui-foreground);
+    text-align: left;
+    background: var(--ui-surface-raised);
+    border: 1px solid var(--ui-border);
+    border-radius: 12px;
+    box-shadow: var(--ui-shadow-sm);
+    cursor: pointer;
   }
 
-  .sectionHeader > :global(.ant-space) :global(.ant-select) {
-    flex: 1;
-  }
-
-  .desktopTable {
-    display: none;
+  .mobileQueueHeader {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
   }
 
-  .queueMobileList {
-    display: grid;
-    gap: 10px;
-    padding: 12px;
+  .mobileQueueHeader strong {
+    overflow: hidden;
+    min-width: 0;
+    font-size: 13px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  .queueMobileList > :global(.ant-card) {
-    border-color: var(--line-ink);
-    box-shadow: none;
+  .mobileQueueHeader :global(.ant-tag) {
+    flex: none;
+    margin: 0;
   }
 
-  .mobileMetricGrid {
+  .mobileQueueMetrics {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 10px;
-    margin-bottom: 13px;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 8px;
   }
 
-  .mobileMetricGrid span {
-    padding: 9px;
-    background: var(--wash);
-    border-radius: 5px;
+  .mobileQueueMetrics > span {
+    display: flex;
+    flex-direction: column;
   }
 
-  .mobileMetricGrid small,
-  .mobileMetricGrid b {
-    display: block;
+  .mobileQueueMetrics small {
+    color: var(--ui-foreground-subtle);
+    font-size: 10px;
   }
 
-  .mobileMetricGrid small {
-    color: var(--faint);
-    font: 8px/1 var(--font-mono);
+  .mobileQueueMetrics b {
+    margin-top: 2px;
+    font-size: 13px;
   }
 
-  .mobileMetricGrid b {
-    overflow: hidden;
-    margin-top: 7px;
-    font: 700 14px/1 var(--font-mono);
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .mobileDeadLetterList {
+    display: flex;
   }
 
-  .queueMobileList :global(.ant-progress) {
-    margin-bottom: 12px;
+  .surfaceCard :global(.ant-card-body) {
+    padding: 14px;
   }
 
   .footer {
     align-items: flex-start;
     flex-direction: column;
+    gap: 5px;
+  }
+}
+
+@media (max-width: 560px) {
+  .topbarContext :global(.ant-breadcrumb li:first-child),
+  .topbarContext :global(.ant-breadcrumb li:nth-child(2)) {
+    display: none;
+  }
+
+  .topbarActions :global(.ant-tag) {
+    display: none;
   }
 
-  .cronFields,
-  .formGrid {
+  .page {
+    padding: 24px 14px 18px;
+  }
+
+  .metricGrid,
+  .healthGrid,
+  .counterList {
     grid-template-columns: 1fr;
-    gap: 0;
   }
-}
 
-@media (max-width: 380px) {
-  .brand {
-    padding: 0 10px;
+  .metricCard :global(.ant-card-body) {
+    min-height: 160px;
   }
 
-  .brand strong {
-    font-size: 12px;
+  .pageHeader {
+    margin-bottom: 22px;
   }
 
-  .topMeta :global(.ant-tag) {
-    display: none;
+  .pageHeader h1 {
+    font-size: 24px;
   }
 
-  .hero h1 {
-    font-size: 18px;
+  .pageActions > :global(.ant-btn) {
+    flex: 1;
   }
 
-  .deliveryGrid {
+  .callbackGrid {
     grid-template-columns: 1fr;
   }
 
-  .deliveryGrid > div,
-  .deliveryGrid > div:nth-child(2n),
-  .deliveryGrid > div:nth-child(n+3) {
-    border-right: 0;
-    border-bottom: 1px solid var(--line);
+  .mobileQueueMetrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .deliveryGrid > div:last-child {
-    border-bottom: 0;
+  .formGrid,
+  .cronFields {
+    grid-template-columns: 1fr;
+    gap: 0;
   }
-}
 
-@media (forced-colors: active) {
-  .hero,
-  .registryPanel,
-  .summaryCard,
-  .focusBar,
-  .diagnosticCard {
-    border: 1px solid CanvasText !important;
+  .capacitySummary {
+    grid-template-columns: 1fr;
+    gap: 10px;
   }
 
-  .queueGlyph,
-  .brandMark {
-    forced-color-adjust: none;
+  .scheduleList > div {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+}
+
+@media (forced-colors: active) {
+  .brandMark,
+  .queueNav > button.queueNavActive,
+  .metricCard,
+  .healthCard,
+  .mobileQueueCard {
+    border: 1px solid CanvasText;
   }
 }
diff --git a/admin-dashboard/src/style/global.css b/admin-dashboard/src/style/global.css
index 6e3b08d..af68654 100644
--- a/admin-dashboard/src/style/global.css
+++ b/admin-dashboard/src/style/global.css
@@ -1,59 +1,137 @@
-:root {
+/*
+ * WaitQueue semantic adapter for fullstack-ai-infra/design-system.
+ * Visual contract pinned to commit 9d048faaabe0429a6a8720bfbb31418544237b6b.
+ * Ant Design consumes the same roles from control-room-theme.tsx.
+ */
+:root,
+:root[data-theme='light'] {
   color-scheme: light;
-  --paper: #f7f7f6;
-  --panel: #ffffff;
-  --wash: #f3f3f2;
-  --ink: #17181b;
-  --text: #202124;
-  --muted: #686b70;
-  --faint: #72757a;
-  --line: #dedfdf;
-  --line-strong: #babdc1;
-  --line-ink: #292a2d;
-  --accent: #00c98b;
-  --accent-hover: #16d99c;
-  --accent-strong: #007c57;
-  --accent-soft: #ddf8ee;
-  --accent-ghost: #f1fcf8;
-  --warning: #aa5119;
-  --warning-soft: #fff0e3;
-  --danger: #c83a3a;
-  --danger-soft: #fff0f0;
-  --font-sans: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
-  --font-display: "Avenir Next", "PingFang SC", "Hiragino Sans GB", sans-serif;
-  --font-mono: "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
+  --ui-canvas: #f5f1e8;
+  --ui-canvas-subtle: #eee9df;
+  --ui-navigation: #e6e1d7;
+  --ui-surface: #fbf9f4;
+  --ui-surface-raised: #fffdf8;
+  --ui-surface-inset: #f0ece3;
+  --ui-foreground: #282925;
+  --ui-foreground-muted: #5f615b;
+  --ui-foreground-subtle: #6c6e67;
+  --ui-border: #d9d4ca;
+  --ui-border-strong: #c6c1b7;
+  --ui-primary: #5f735e;
+  --ui-primary-hover: #50644f;
+  --ui-primary-foreground: #fbfdf8;
+  --ui-primary-soft: #e2e9df;
+  --ui-ai: #7568a8;
+  --ui-ai-strong: #695c99;
+  --ui-ai-hover: #675a99;
+  --ui-ai-foreground: #fbfaff;
+  --ui-ai-soft: #ebe7f6;
+  --ui-info: #476e84;
+  --ui-info-soft: #e1edf2;
+  --ui-success: #537153;
+  --ui-success-strong: #4c694c;
+  --ui-success-soft: #e0eadf;
+  --ui-warning: #8b672b;
+  --ui-warning-strong: #805c20;
+  --ui-warning-soft: #f4e8cf;
+  --ui-danger: #9a4e45;
+  --ui-danger-soft: #f4dfdb;
+  --ui-overlay: rgb(40 41 37 / 42%);
+  --ui-focus: #71866f;
+  --ui-selection: #dce6d9;
+  --ui-font-sans: Inter, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --ui-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+  --ui-text-xs: 0.75rem;
+  --ui-text-sm: 0.8125rem;
+  --ui-text-base: 0.9375rem;
+  --ui-text-lg: 1.0625rem;
+  --ui-text-xl: 1.25rem;
+  --ui-text-2xl: 1.625rem;
+  --ui-leading-tight: 1.25;
+  --ui-leading-normal: 1.55;
+  --ui-space-1: 0.25rem;
+  --ui-space-2: 0.5rem;
+  --ui-space-3: 0.75rem;
+  --ui-space-4: 1rem;
+  --ui-space-5: 1.25rem;
+  --ui-space-6: 1.5rem;
+  --ui-space-8: 2rem;
+  --ui-space-10: 2.5rem;
+  --ui-space-12: 3rem;
+  --ui-radius-sm: 0.375rem;
+  --ui-radius-md: 0.625rem;
+  --ui-radius-lg: 0.875rem;
+  --ui-radius-xl: 1.125rem;
+  --ui-radius-full: 9999px;
+  --ui-shadow-sm: 0 1px 2px rgb(40 41 37 / 6%);
+  --ui-shadow-md: 0 10px 30px rgb(40 41 37 / 9%), 0 2px 8px rgb(40 41 37 / 5%);
+  --ui-shadow-lg: 0 24px 64px rgb(40 41 37 / 16%), 0 4px 12px rgb(40 41 37 / 7%);
+  --ui-duration-fast: 120ms;
+  --ui-duration-normal: 180ms;
+  --ui-ease: cubic-bezier(0.2, 0, 0, 1);
+  --ui-rail-width: 72px;
+  --ui-sidebar-width: 256px;
+  --ui-topbar-height: 60px;
 }
 
-:root[data-theme="dark"] {
+:root[data-theme='dark'] {
   color-scheme: dark;
-  --paper: #131416;
-  --panel: #1b1c1f;
-  --wash: #232428;
-  --ink: #101113;
-  --text: #f2f3f3;
-  --muted: #afb1b5;
-  --faint: #85898f;
-  --line: #34363a;
-  --line-strong: #51545a;
-  --line-ink: #65686e;
-  --accent-strong: #32d9a4;
-  --accent-soft: #123d30;
-  --accent-ghost: #183229;
-  --warning: #f2a366;
-  --warning-soft: #432b1b;
-  --danger: #ff7b7b;
-  --danger-soft: #402225;
+  --ui-canvas: #1e201d;
+  --ui-canvas-subtle: #242622;
+  --ui-navigation: #292b27;
+  --ui-surface: #272925;
+  --ui-surface-raised: #2e302c;
+  --ui-surface-inset: #222420;
+  --ui-foreground: #efede7;
+  --ui-foreground-muted: #b6b5ad;
+  --ui-foreground-subtle: #93948c;
+  --ui-border: #3f423c;
+  --ui-border-strong: #555950;
+  --ui-primary: #a1b69d;
+  --ui-primary-hover: #b2c6ae;
+  --ui-primary-foreground: #1c251c;
+  --ui-primary-soft: #344035;
+  --ui-ai: #b9addc;
+  --ui-ai-strong: #b9addc;
+  --ui-ai-hover: #c8bde6;
+  --ui-ai-foreground: #251f36;
+  --ui-ai-soft: #3b354d;
+  --ui-info: #8eb6ca;
+  --ui-info-soft: #2c4049;
+  --ui-success: #9dba9a;
+  --ui-success-strong: #9dba9a;
+  --ui-success-soft: #314132;
+  --ui-warning: #d4b069;
+  --ui-warning-strong: #d4b069;
+  --ui-warning-soft: #493d28;
+  --ui-danger: #d99488;
+  --ui-danger-soft: #4d302d;
+  --ui-overlay: rgb(0 0 0 / 62%);
+  --ui-focus: #acc2a8;
+  --ui-selection: #3c4a3c;
+  --ui-shadow-sm: 0 1px 2px rgb(0 0 0 / 24%);
+  --ui-shadow-md: 0 10px 30px rgb(0 0 0 / 28%), 0 2px 8px rgb(0 0 0 / 20%);
+  --ui-shadow-lg: 0 24px 64px rgb(0 0 0 / 38%), 0 4px 12px rgb(0 0 0 / 24%);
 }
 
-* {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
 html {
+  min-width: 320px;
+  min-height: 100%;
+  color: var(--ui-foreground);
+  background: var(--ui-canvas);
+  font-family: var(--ui-font-sans);
+  font-size: 16px;
   scroll-behavior: smooth;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
 }
 
-html,
 body,
 #__next {
   min-height: 100%;
@@ -61,33 +139,56 @@ body,
 }
 
 body {
-  color: var(--text);
-  background: var(--paper);
-  font-family: var(--font-sans);
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
+  color: var(--ui-foreground);
+  background: var(--ui-canvas);
+}
+
+/* The server renders Ant's light variables. Keep a saved/system dark first frame
+ * on the dark canvas until ConfigProvider has committed the matching variables. */
+:root[data-theme='dark'][data-theme-ready='false'] #__next {
+  visibility: hidden;
 }
 
 button,
 input,
-select {
+select,
+textarea {
+  color: inherit;
   font: inherit;
 }
 
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-a:focus-visible {
-  outline: 2px solid var(--accent-strong);
+::selection {
+  background: var(--ui-selection);
+}
+
+:focus-visible {
+  outline: 2px solid var(--ui-focus);
   outline-offset: 2px;
 }
 
-::selection {
-  color: #07110d;
-  background: var(--accent);
+@keyframes ui-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ui-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
+  :root {
+    --ui-duration-fast: 0ms;
+    --ui-duration-normal: 0ms;
+  }
+
   html {
     scroll-behavior: auto;
   }
diff --git a/admin-dashboard/src/theme/control-room-theme.tsx b/admin-dashboard/src/theme/control-room-theme.tsx
index 150e23f..627de02 100644
--- a/admin-dashboard/src/theme/control-room-theme.tsx
+++ b/admin-dashboard/src/theme/control-room-theme.tsx
@@ -9,74 +9,175 @@ interface ColorModeContextValue {
   toggleMode: () => void;
 }
 
-const ColorModeContext = createContext<ColorModeContextValue | null>(null);
+interface SemanticPalette {
+  canvas: string;
+  canvasSubtle: string;
+  navigation: string;
+  surface: string;
+  surfaceRaised: string;
+  surfaceInset: string;
+  foreground: string;
+  foregroundMuted: string;
+  foregroundSubtle: string;
+  border: string;
+  borderStrong: string;
+  primary: string;
+  primaryHover: string;
+  primaryForeground: string;
+  primarySoft: string;
+  info: string;
+  infoSoft: string;
+  success: string;
+  successSoft: string;
+  warning: string;
+  warningSoft: string;
+  danger: string;
+  dangerSoft: string;
+  overlay: string;
+  shadow: string;
+  shadowStrong: string;
+}
 
-const FONT_SANS = '"Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
-const FONT_MONO = '"SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace';
+/* Pinned semantic mapping: fullstack-ai-infra/design-system@9d048faa. */
+const PALETTE: Record<ColorMode, SemanticPalette> = {
+  light: {
+    canvas: '#f5f1e8', canvasSubtle: '#eee9df', navigation: '#e6e1d7', surface: '#fbf9f4',
+    surfaceRaised: '#fffdf8', surfaceInset: '#f0ece3', foreground: '#282925', foregroundMuted: '#5f615b',
+    foregroundSubtle: '#6c6e67', border: '#d9d4ca', borderStrong: '#c6c1b7', primary: '#5f735e',
+    primaryHover: '#50644f', primaryForeground: '#fbfdf8', primarySoft: '#e2e9df', info: '#476e84',
+    infoSoft: '#e1edf2', success: '#537153', successSoft: '#e0eadf', warning: '#8b672b',
+    warningSoft: '#f4e8cf', danger: '#9a4e45', dangerSoft: '#f4dfdb',
+    overlay: 'rgba(40, 41, 37, 0.42)',
+    shadow: '0 10px 30px rgba(40, 41, 37, 0.09), 0 2px 8px rgba(40, 41, 37, 0.05)',
+    shadowStrong: '0 24px 64px rgba(40, 41, 37, 0.16), 0 4px 12px rgba(40, 41, 37, 0.07)',
+  },
+  dark: {
+    canvas: '#1e201d', canvasSubtle: '#242622', navigation: '#292b27', surface: '#272925',
+    surfaceRaised: '#2e302c', surfaceInset: '#222420', foreground: '#efede7', foregroundMuted: '#b6b5ad',
+    foregroundSubtle: '#93948c', border: '#3f423c', borderStrong: '#555950', primary: '#a1b69d',
+    primaryHover: '#b2c6ae', primaryForeground: '#1c251c', primarySoft: '#344035', info: '#8eb6ca',
+    infoSoft: '#2c4049', success: '#9dba9a', successSoft: '#314132', warning: '#d4b069',
+    warningSoft: '#493d28', danger: '#d99488', dangerSoft: '#4d302d',
+    overlay: 'rgba(0, 0, 0, 0.62)',
+    shadow: '0 10px 30px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.2)',
+    shadowStrong: '0 24px 64px rgba(0, 0, 0, 0.38), 0 4px 12px rgba(0, 0, 0, 0.24)',
+  },
+};
+
+const ColorModeContext = createContext<ColorModeContextValue | null>(null);
+const FONT_SANS = 'Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+const FONT_MONO = '"SFMono-Regular", Consolas, "Liberation Mono", monospace';
+const STORAGE_KEY = 'waitqueue-warm-theme';
 
 function themeConfig(mode: ColorMode): ThemeConfig {
+  const colors = PALETTE[mode];
   const dark = mode === 'dark';
   return {
-    algorithm: [dark ? antTheme.darkAlgorithm : antTheme.defaultAlgorithm, antTheme.compactAlgorithm],
+    algorithm: dark ? antTheme.darkAlgorithm : antTheme.defaultAlgorithm,
     cssVar: { key: 'waitqueue' },
     token: {
-      colorPrimary: '#008f68',
-      colorInfo: '#008f68',
-      colorSuccess: '#00a870',
-      colorWarning: '#d46b08',
-      colorError: '#c9363e',
-      colorBgBase: dark ? '#141618' : '#f5f6f5',
-      colorTextBase: dark ? '#f3f5f4' : '#1b1d1f',
-      colorBorder: dark ? '#3d4144' : '#cfd2d1',
-      colorBorderSecondary: dark ? '#303437' : '#e3e5e4',
-      borderRadius: 8,
-      borderRadiusLG: 8,
+      colorPrimary: colors.primary,
+      colorPrimaryHover: colors.primaryHover,
+      colorInfo: colors.info,
+      colorSuccess: colors.success,
+      colorWarning: colors.warning,
+      colorError: colors.danger,
+      colorBgBase: colors.canvas,
+      colorBgLayout: colors.canvas,
+      colorBgContainer: colors.surface,
+      colorBgElevated: colors.surfaceRaised,
+      colorBgMask: colors.overlay,
+      colorFillSecondary: colors.surfaceInset,
+      colorFillTertiary: colors.canvasSubtle,
+      colorText: colors.foreground,
+      colorTextSecondary: colors.foregroundMuted,
+      colorTextTertiary: colors.foregroundSubtle,
+      colorTextPlaceholder: colors.foregroundSubtle,
+      colorBorder: colors.border,
+      colorBorderSecondary: colors.border,
+      colorLink: colors.primary,
+      colorLinkHover: colors.primaryHover,
+      borderRadius: 10,
+      borderRadiusLG: 14,
+      borderRadiusSM: 6,
       fontFamily: FONT_SANS,
       fontFamilyCode: FONT_MONO,
       fontSize: 14,
-      controlHeight: 36,
+      fontSizeSM: 13,
+      fontSizeLG: 15,
+      controlHeight: 38,
+      controlHeightLG: 44,
+      controlHeightSM: 30,
+      lineHeight: 1.55,
       lineWidth: 1,
       motionDurationFast: '0.12s',
       motionDurationMid: '0.18s',
-      boxShadow: dark ? '0 8px 20px rgba(0,0,0,.2)' : '0 8px 20px rgba(23,30,27,.06)',
+      boxShadow: colors.shadow,
+      boxShadowSecondary: colors.shadow,
     },
     components: {
       Layout: {
-        bodyBg: dark ? '#141618' : '#f5f6f5',
-        headerBg: dark ? '#1b1e20' : '#ffffff',
-        siderBg: dark ? '#1b1e20' : '#ffffff',
+        bodyBg: colors.canvas,
+        headerBg: colors.canvas,
+        siderBg: colors.navigation,
       },
       Card: {
+        colorBgContainer: colors.surface,
         headerBg: 'transparent',
         paddingLG: 20,
       },
-      Table: {
-        headerBg: dark ? '#232729' : '#f3f5f4',
-        headerColor: dark ? '#c9cfcc' : '#555b58',
-        rowHoverBg: dark ? '#202a27' : '#f0faf6',
-        borderColor: dark ? '#363a3d' : '#dfe2e0',
-        cellPaddingBlock: 12,
-        cellPaddingInline: 14,
-      },
       Menu: {
         itemBg: 'transparent',
-        itemSelectedBg: dark ? '#16352b' : '#e7f7f1',
-        itemSelectedColor: dark ? '#5ee0b6' : '#006f52',
-        itemHoverBg: dark ? '#252a2c' : '#f1f3f2',
-        itemBorderRadius: 7,
+        subMenuItemBg: 'transparent',
+        itemSelectedBg: colors.surfaceRaised,
+        itemSelectedColor: colors.primary,
+        itemHoverBg: colors.surface,
+        itemHoverColor: colors.foreground,
+        itemBorderRadius: 10,
+        activeBarBorderWidth: 0,
+      },
+      Table: {
+        headerBg: colors.surfaceInset,
+        headerColor: colors.foregroundMuted,
+        rowHoverBg: colors.primarySoft,
+        borderColor: colors.border,
+        cellPaddingBlock: 13,
+        cellPaddingInline: 14,
       },
       Button: {
+        primaryColor: colors.primaryForeground,
         primaryShadow: 'none',
         defaultShadow: 'none',
         dangerShadow: 'none',
       },
+      Input: {
+        colorBgContainer: colors.surfaceRaised,
+        activeShadow: `0 0 0 3px ${dark ? 'rgba(172,194,168,.18)' : 'rgba(113,134,111,.18)'}`,
+      },
+      Select: {
+        colorBgContainer: colors.surfaceRaised,
+        optionSelectedBg: colors.primarySoft,
+      },
+      Modal: {
+        contentBg: colors.surfaceRaised,
+        headerBg: colors.surfaceRaised,
+        borderRadiusLG: 18,
+        boxShadow: colors.shadowStrong,
+      },
+      Drawer: {
+        colorBgElevated: colors.canvasSubtle,
+      },
       Statistic: {
-        contentFontSize: 24,
-        titleFontSize: 12,
+        contentFontSize: 28,
+        titleFontSize: 13,
       },
       Progress: {
-        defaultColor: '#008f68',
-        remainingColor: dark ? '#303537' : '#e7eae8',
+        defaultColor: colors.primary,
+        remainingColor: colors.surfaceInset,
+      },
+      Tag: {
+        defaultBg: colors.surfaceInset,
+        defaultColor: colors.foregroundMuted,
       },
     },
   };
@@ -84,18 +185,26 @@ function themeConfig(mode: ColorMode): ThemeConfig {
 
 export function ControlRoomTheme({ children }: { children: ReactNode }) {
   const [mode, setMode] = useState<ColorMode>('light');
+  const [initialized, setInitialized] = useState(false);
 
   useEffect(() => {
-    const saved = window.localStorage.getItem('waitqueue-theme');
-    const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    setMode(saved === 'dark' || saved === 'light' ? saved : preferred);
+    const saved = window.localStorage.getItem(STORAGE_KEY) ?? window.localStorage.getItem('waitqueue-theme');
+    const preferred: ColorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    const initialMode: ColorMode = saved === 'dark' || saved === 'light' ? saved : preferred;
+    setMode(initialMode);
+    document.documentElement.dataset.theme = initialMode;
+    document.documentElement.style.colorScheme = initialMode;
+    setInitialized(true);
   }, []);
 
   useEffect(() => {
+    if (!initialized) return;
     document.documentElement.dataset.theme = mode;
     document.documentElement.style.colorScheme = mode;
-    window.localStorage.setItem('waitqueue-theme', mode);
-  }, [mode]);
+    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', PALETTE[mode].canvas);
+    window.localStorage.setItem(STORAGE_KEY, mode);
+    document.documentElement.dataset.themeReady = 'true';
+  }, [initialized, mode]);
 
   const value = useMemo<ColorModeContextValue>(
     () => ({ mode, toggleMode: () => setMode((current) => (current === 'light' ? 'dark' : 'light')) }),