From eaee29841d07b7ffd295d3748a019cf023fd8d99 Mon Sep 17 00:00:00 2001
From: oudecheng <13802883547@139.com>
Date: Fri, 14 Aug 2026 19:15:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E5=AF=B9=E9=BD=90=20deepseek-harn?=
 =?UTF-8?q?ess=20=E8=AE=BE=E8=AE=A1=E8=AF=AD=E8=A8=80=EF=BC=8C=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E5=89=8D=E7=AB=AF=E8=A7=86=E8=A7=89=E4=B8=8E=E4=B8=89?=
 =?UTF-8?q?=E6=A0=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 设计 token 重映射为 DeepSeek 调色板（深浅双主题），正文改无衬线字体栈，全面去霓虹化
- 移除顶部 Header，控件迁入左栏（Logo/连接/通道/会话/tabs/底部操作区），左右栏支持拖拽调宽并持久化，折叠为图标 rail
- 对话区对齐 DeepSeek 聊天风：hero/docked 状态机、736px 居中列、用户右对齐柔和气泡、助手无气泡平铺、composer 卡片与反差发送键；子智能体点击导航完整保留
- 全功能区同步换肤：侧栏列表、右栏面板、ConfigPage、弹窗、选择器等
- fix: 修复 virtual-core 3.17.x 陈旧行高导致消息行重叠（宽度变化/滚动停止后强制 resizeItem 重测）
- fix: 修复 ConfigPage/Modal 引用不存在的 fadeIn/scaleIn keyframes 致入场动画失效
---
 web/src/App.tsx                               | 499 +++++++++++-------
 web/src/components/Chat/ChatContainer.tsx     |  95 +++-
 web/src/components/Chat/ExpertSelector.tsx    |   2 +-
 web/src/components/Chat/MessageBubble.tsx     | 248 ++++-----
 web/src/components/Chat/MessageInput.tsx      | 196 +++----
 web/src/components/Chat/MessageList.tsx       |  84 ++-
 web/src/components/Chat/ModelSelector.tsx     |   4 +-
 web/src/components/Chat/ToolDetailModal.tsx   |   6 +-
 web/src/components/ConnectionStatus.tsx       |  38 +-
 web/src/components/Header/ChannelSelector.tsx |  19 +-
 web/src/components/Header/SessionSelector.tsx |  10 +-
 web/src/components/Panel/MemoryPanel.tsx      |  30 +-
 web/src/components/Panel/SkillList.tsx        |  12 +-
 web/src/components/Panel/TodoPanel.tsx        |   8 +-
 web/src/components/Panel/ToolPanel.tsx        |  24 +-
 .../components/Panel/TopicTokenStatsPanel.tsx |   6 +-
 web/src/components/Settings/ConfigPage.tsx    |  22 +-
 web/src/components/Settings/constants.ts      |   2 +-
 .../Settings/modals/ExpertModal.tsx           |   2 +-
 .../Settings/modals/SubagentModal.tsx         |   2 +-
 web/src/components/Settings/shared.tsx        |   2 +-
 .../components/Settings/tabs/ExpertsTab.tsx   |   2 +-
 web/src/components/Settings/tabs/McpTab.tsx   |   6 +-
 .../components/Settings/tabs/SubagentsTab.tsx |   6 +-
 web/src/components/Settings/ui.tsx            |   2 +-
 .../components/Sidebar/SchedulerJobList.tsx   |  24 +-
 web/src/components/Sidebar/SessionInfo.tsx    |   2 +-
 web/src/components/Sidebar/TopicList.tsx      |  30 +-
 web/src/index.css                             | 175 +++---
 web/src/utils/tokenStats.ts                   |   6 +-
 30 files changed, 868 insertions(+), 696 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 07739f1..33148cc 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent as ReactMouseEvent } from 'react';
 import {
   Zap,
   ArrowLeft,
@@ -11,6 +11,8 @@ import {
   Brain,
   Settings as SettingsIcon,
   ChevronRight,
+  MessageSquare,
+  Calendar,
 } from 'lucide-react';
 import { ChatContainer } from './components/Chat/ChatContainer';
 import { TopicList } from './components/Sidebar/TopicList';
@@ -200,6 +202,75 @@ function App() {
   // 设置弹窗关闭计数器：每次关闭时递增，用于通知 ExpertSelector 刷新已选专家状态
   const [settingsClosedTick, setSettingsClosedTick] = useState(0);
 
+  // ---- 三栏列宽（拖拽调宽，对齐 harness AppFrame）----
+  const [sidebarWidth, setSidebarWidth] = useState(() => {
+    const parsed = parseInt(localStorage.getItem('picobot-sidebar-width') ?? '', 10);
+    return Number.isFinite(parsed) ? Math.min(Math.max(parsed, 216), 400) : 288;
+  });
+  const [rightPanelWidth, setRightPanelWidth] = useState(() => {
+    const parsed = parseInt(localStorage.getItem('picobot-right-panel-width') ?? '', 10);
+    return Number.isFinite(parsed) ? Math.min(Math.max(parsed, 240), 420) : 320;
+  });
+
+  // 拖拽期间禁用 width transition，避免面板"追鼠标"延迟感
+  const [isResizing, setIsResizing] = useState(false);
+
+  const startSidebarDrag = useCallback(
+    (e: ReactMouseEvent) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const startWidth = sidebarWidth;
+      setIsResizing(true);
+      const onMove = (ev: MouseEvent) => {
+        setSidebarWidth(Math.min(Math.max(startWidth + ev.clientX - startX, 216), 400));
+      };
+      const onUp = (ev: MouseEvent) => {
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        setIsResizing(false);
+        localStorage.setItem(
+          'picobot-sidebar-width',
+          String(Math.min(Math.max(startWidth + ev.clientX - startX, 216), 400)),
+        );
+      };
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+    },
+    [sidebarWidth],
+  );
+
+  const startRightPanelDrag = useCallback(
+    (e: ReactMouseEvent) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const startWidth = rightPanelWidth;
+      setIsResizing(true);
+      const onMove = (ev: MouseEvent) => {
+        setRightPanelWidth(Math.min(Math.max(startWidth - (ev.clientX - startX), 240), 420));
+      };
+      const onUp = (ev: MouseEvent) => {
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        setIsResizing(false);
+        localStorage.setItem(
+          'picobot-right-panel-width',
+          String(Math.min(Math.max(startWidth - (ev.clientX - startX), 240), 420)),
+        );
+      };
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+    },
+    [rightPanelWidth],
+  );
+
   const handleSaveConnection = useCallback((host: string, port: number) => {
     setGatewaySettings({ host, port });
   }, []);
@@ -615,189 +686,222 @@ function App() {
   }, [schedulerView, subAgentView, selectedTopic]);
 
   return (
-    <div className="flex h-screen flex-col bg-[var(--bg-primary)] text-[var(--text-primary)] overflow-hidden">
-      {/* Header */}
-      <header className="flex items-center justify-between border-b border-[var(--border-color)] bg-[var(--bg-secondary)]/80 backdrop-blur-md px-6 py-4">
-        <div className="flex items-center gap-4">
-          <div className="flex items-center gap-2">
-            <Zap className="h-6 w-6 text-[var(--accent-cyan)]" />
-            <h1 className="text-xl font-bold tracking-tight">
-              <span className="text-[var(--text-primary)]">Pico</span>
-              <span className="text-[var(--accent-cyan)] glow-text">Bot</span>
-            </h1>
-            {appVersion && (
-              <span className="text-xs font-mono text-[var(--text-muted)] select-none">
-                v{appVersion}
-              </span>
-            )}
-          </div>
-          <div className="h-4 w-px bg-[var(--divider-color)]" />
-          <ConnectionStatus status={status} />
-          {/* 主题切换按钮 */}
-          <div className="h-4 w-px bg-[var(--divider-color)]" />
-          <button
-            onClick={() => setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'))}
-            className="flex h-8 w-8 items-center justify-center rounded-lg text-[var(--text-muted)] hover:text-[var(--accent-cyan)] hover:bg-[var(--overlay-hover)] transition-all"
-            title={theme === 'dark' ? '切换到亮色主题' : '切换到暗色主题'}
-            aria-label={theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
-          >
-            {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
-          </button>
-          <button
-            onClick={() => setShowThinking((prev) => !prev)}
-            className={`flex h-8 w-8 items-center justify-center rounded-lg transition-all ${
-              showThinking
-                ? 'text-purple-400 hover:text-purple-300 bg-purple-500/10 hover:bg-purple-500/20'
-                : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--overlay-hover)]'
-            }`}
-            title={showThinking ? '隐藏思考过程' : '显示思考过程'}
-            aria-label="Toggle thinking display"
-          >
-            <Brain className="h-4 w-4" />
-          </button>
-          <button
-            onClick={() => {
-              setConfigInitialTab('providers');
-              setConfigPageOpen(true);
-            }}
-            className="flex h-8 w-8 items-center justify-center rounded-lg text-[var(--text-muted)] hover:text-[var(--accent-cyan)] hover:bg-[var(--overlay-hover)] transition-all"
-            title="系统配置"
-            aria-label="System config"
-          >
-            <SettingsIcon className="h-4 w-4" />
-          </button>
+    <div className="flex h-screen overflow-hidden bg-[var(--bg-primary)] text-[var(--text-primary)]">
+      {/* 左栏 — harness 风格 shell（Logo/连接/通道/会话/列表/底部操作区） */}
+      <aside
+        className={`relative shrink-0 border-r border-[var(--border-color)] bg-[var(--bg-secondary)] flex flex-col overflow-hidden ${subAgentView || schedulerView ? 'opacity-50 pointer-events-none' : ''}`}
+        style={{
+          width: sidebarCollapsed ? 56 : sidebarWidth,
+          transition: isResizing ? 'none' : 'width 200ms ease-out',
+          willChange: 'width',
+        }}
+      >
+        {/* Logo 行 */}
+        <div className="flex h-12 shrink-0 items-center gap-2 px-3">
+          {sidebarCollapsed ? (
+            <button
+              onClick={toggleSidebar}
+              className="flex h-8 w-8 items-center justify-center rounded-lg hover:bg-[var(--overlay-hover)] transition-colors"
+              title="展开侧栏"
+              aria-label="Expand sidebar"
+            >
+              <Zap className="h-5 w-5 text-[var(--accent-cyan)]" />
+            </button>
+          ) : (
+            <>
+              <Zap className="h-5 w-5 shrink-0 text-[var(--accent-cyan)]" />
+              <h1 className="min-w-0 flex-1 truncate text-[15px] font-semibold tracking-tight">
+                <span className="text-[var(--text-primary)]">Pico</span>
+                <span className="text-[var(--accent-cyan)]">Bot</span>
+              </h1>
+              {appVersion && (
+                <span className="shrink-0 text-xs text-[var(--text-muted)] select-none">
+                  v{appVersion}
+                </span>
+              )}
+              <button
+                onClick={toggleSidebar}
+                className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-[var(--text-muted)] hover:bg-[var(--overlay-hover)] hover:text-[var(--text-primary)] transition-colors"
+                title="收起侧栏"
+                aria-label="Collapse sidebar"
+              >
+                <PanelLeftClose className="h-4 w-4" />
+              </button>
+            </>
+          )}
         </div>
-        <div className="flex items-center gap-4 text-sm text-[var(--text-secondary)]">
-          <ChannelSelector
-            channels={channels}
-            selectedChannel={selectedChannel}
-            onSelectChannel={handleSwitchChannel}
-          />
-          <SessionSelector
-            sessions={sessions}
-            selectedSessionId={selectedSessionId}
-            onSelectSession={handleSelectSession}
-          />
-        </div>
-      </header>
 
-      {/* Main Content */}
-      <div className="flex flex-1 overflow-hidden relative">
-        {/* Left Sidebar — smooth width animation via will-change + overflow-hidden */}
+        {sidebarCollapsed ? (
+          /* 折叠 rail */
+          <div className="flex flex-1 flex-col items-center gap-1 px-1 pt-1">
+            <button
+              onClick={() => {
+                setSidebarTab('topics');
+                setSidebarCollapsed(false);
+                localStorage.setItem('picobot-sidebar-collapsed', 'false');
+              }}
+              className={`flex h-8 w-8 items-center justify-center rounded-lg transition-colors ${
+                sidebarTab === 'topics'
+                  ? 'text-[var(--accent-cyan)] bg-[var(--overlay-subtle)]'
+                  : 'text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--overlay-hover)]'
+              }`}
+              title="话题"
+            >
+              <MessageSquare className="h-4 w-4" />
+            </button>
+            <button
+              onClick={() => {
+                setSidebarTab('scheduler');
+                setSidebarCollapsed(false);
+                localStorage.setItem('picobot-sidebar-collapsed', 'false');
+              }}
+              className={`flex h-8 w-8 items-center justify-center rounded-lg transition-colors ${
+                sidebarTab === 'scheduler'
+                  ? 'text-[var(--accent-cyan)] bg-[var(--overlay-subtle)]'
+                  : 'text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--overlay-hover)]'
+              }`}
+              title="定时任务"
+            >
+              <Calendar className="h-4 w-4" />
+            </button>
+            <div className="flex-1" />
+            <button
+              onClick={() => setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'))}
+              className="flex h-8 w-8 items-center justify-center rounded-lg text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--overlay-hover)] transition-colors"
+              title={theme === 'dark' ? '切换到亮色主题' : '切换到暗色主题'}
+            >
+              {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+            </button>
+            <button
+              onClick={() => {
+                setConfigInitialTab('providers');
+                setConfigPageOpen(true);
+              }}
+              className="flex h-8 w-8 items-center justify-center rounded-lg text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--overlay-hover)] transition-colors"
+              title="系统配置"
+            >
+              <SettingsIcon className="h-4 w-4" />
+            </button>
+            <div className="pb-3 pt-2">
+              <ConnectionStatus status={status} compact />
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="shrink-0 px-3 pb-2">
+              <ConnectionStatus status={status} />
+            </div>
+            <div className="flex shrink-0 flex-col gap-1.5 px-3 pb-2 text-sm text-[var(--text-secondary)]">
+              <ChannelSelector
+                channels={channels}
+                selectedChannel={selectedChannel}
+                onSelectChannel={handleSwitchChannel}
+              />
+              <SessionSelector
+                sessions={sessions}
+                selectedSessionId={selectedSessionId}
+                onSelectSession={handleSelectSession}
+              />
+            </div>
+
+            {/* Tab 栏 */}
+            <div className="flex shrink-0 border-b border-[var(--border-color)] px-3">
+              <button
+                onClick={() => setSidebarTab('topics')}
+                className={`flex-1 border-b-2 py-2 text-center text-sm transition-colors whitespace-nowrap ${
+                  sidebarTab === 'topics'
+                    ? 'border-[var(--accent-cyan)] font-medium text-[var(--text-primary)]'
+                    : 'border-transparent text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
+                }`}
+              >
+                话题
+              </button>
+              <button
+                onClick={() => setSidebarTab('scheduler')}
+                className={`flex-1 border-b-2 py-2 text-center text-sm transition-colors whitespace-nowrap ${
+                  sidebarTab === 'scheduler'
+                    ? 'border-[var(--accent-cyan)] font-medium text-[var(--text-primary)]'
+                    : 'border-transparent text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
+                }`}
+              >
+                定时任务
+              </button>
+            </div>
+
+            <div className="flex-1 overflow-hidden">
+              {sidebarTab === 'topics' ? (
+                <TopicList
+                  sessionId={sessionId}
+                  topics={topics}
+                  currentTopicId={selectedTopic}
+                  isReadOnly={isReadOnly}
+                  onCreateTopic={handleCreateTopic}
+                  onRefresh={handleRefreshTopics}
+                  onSwitchTopic={handleSwitchTopic}
+                  onDeleteTopic={handleDeleteTopic}
+                  onRenameTopic={handleRenameTopic}
+                />
+              ) : (
+                <SchedulerJobList
+                  jobs={schedulerJobs}
+                  onRefresh={handleRefreshSchedulerJobs}
+                  onViewJob={handleViewSchedulerJob}
+                  sessionId={sessionId}
+                />
+              )}
+            </div>
+
+            {/* 底部操作区：思考 / 主题 / 配置 */}
+            <div className="flex shrink-0 items-center gap-1 border-t border-[var(--border-color)] px-3 py-2">
+              <button
+                onClick={() => setShowThinking((prev) => !prev)}
+                className={`flex h-8 w-8 items-center justify-center rounded-lg transition-colors ${
+                  showThinking
+                    ? 'text-[var(--accent-purple)] bg-[var(--accent-purple)]/10'
+                    : 'text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--overlay-hover)]'
+                }`}
+                title={showThinking ? '隐藏思考过程' : '显示思考过程'}
+                aria-label="Toggle thinking display"
+              >
+                <Brain className="h-4 w-4" />
+              </button>
+              <button
+                onClick={() => setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'))}
+                className="flex h-8 w-8 items-center justify-center rounded-lg text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--overlay-hover)] transition-colors"
+                title={theme === 'dark' ? '切换到亮色主题' : '切换到暗色主题'}
+                aria-label={theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
+              >
+                {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+              </button>
+              <div className="flex-1" />
+              <button
+                onClick={() => {
+                  setConfigInitialTab('providers');
+                  setConfigPageOpen(true);
+                }}
+                className="flex h-8 w-8 items-center justify-center rounded-lg text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--overlay-hover)] transition-colors"
+                title="系统配置"
+                aria-label="System config"
+              >
+                <SettingsIcon className="h-4 w-4" />
+              </button>
+            </div>
+          </>
+        )}
+      </aside>
+
+      {/* 左栏拖拽调宽手柄 */}
+      {!sidebarCollapsed && (
         <div
-          className={`shrink-0 border-r border-[var(--border-color)] bg-[var(--bg-secondary)]/50 flex flex-col overflow-hidden ${sidebarCollapsed ? 'w-11' : 'w-72'} ${subAgentView || schedulerView ? 'opacity-50 pointer-events-none' : ''}`}
-          style={{ transition: 'width 200ms ease-out', willChange: 'width' }}
-        >
-          {/* Tab 栏 + collapse toggle */}
-          <div
-            className="flex border-b border-[var(--border-color)]"
-            style={{ minWidth: sidebarCollapsed ? 0 : '288px' }}
-          >
-            {sidebarCollapsed ? (
-              /* 收起态：紧凑竖排 tab 按钮 */
-              <div className="flex flex-col w-full">
-                <button
-                  onClick={() => {
-                    setSidebarTab('topics');
-                    setSidebarCollapsed(false);
-                    localStorage.setItem('picobot-sidebar-collapsed', 'false');
-                  }}
-                  className={`py-2 text-xs font-medium text-center transition-colors ${
-                    sidebarTab === 'topics'
-                      ? 'text-[var(--accent-cyan)] bg-[var(--accent-cyan)]/10'
-                      : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--overlay-hover)]'
-                  }`}
-                  title="话题"
-                >
-                  话<br />题
-                </button>
-                <button
-                  onClick={() => {
-                    setSidebarTab('scheduler');
-                    setSidebarCollapsed(false);
-                    localStorage.setItem('picobot-sidebar-collapsed', 'false');
-                  }}
-                  className={`py-2 text-xs font-medium text-center transition-colors ${
-                    sidebarTab === 'scheduler'
-                      ? 'text-[var(--accent-cyan)] bg-[var(--accent-cyan)]/10'
-                      : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--overlay-hover)]'
-                  }`}
-                  title="定时任务"
-                >
-                  定<br />时
-                </button>
-                {/* 展开按钮 */}
-                <button
-                  onClick={toggleSidebar}
-                  className="flex items-center justify-center py-2 text-[var(--text-muted)] hover:text-[var(--accent-cyan)] hover:bg-[var(--overlay-hover)] transition-colors"
-                  title="展开侧栏"
-                >
-                  <PanelLeftOpen className="h-3.5 w-3.5" />
-                </button>
-              </div>
-            ) : (
-              <>
-                <button
-                  onClick={() => setSidebarTab('topics')}
-                  className={`flex-1 py-2.5 text-sm font-medium text-center transition-colors whitespace-nowrap ${
-                    sidebarTab === 'topics'
-                      ? 'text-[var(--accent-cyan)] border-b-2 border-[var(--accent-cyan)]'
-                      : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
-                  }`}
-                >
-                  话题
-                </button>
-                <button
-                  onClick={() => setSidebarTab('scheduler')}
-                  className={`flex-1 py-2.5 text-sm font-medium text-center transition-colors whitespace-nowrap ${
-                    sidebarTab === 'scheduler'
-                      ? 'text-[var(--accent-cyan)] border-b-2 border-[var(--accent-cyan)]'
-                      : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
-                  }`}
-                >
-                  定时任务
-                </button>
-                {/* 收起按钮 */}
-                <button
-                  onClick={toggleSidebar}
-                  className="flex items-center justify-center px-2 text-[var(--text-muted)] hover:text-[var(--accent-cyan)] hover:bg-[var(--overlay-hover)] transition-colors shrink-0"
-                  title="收起侧栏"
-                >
-                  <PanelLeftClose className="h-4 w-4" />
-                </button>
-              </>
-            )}
-          </div>
+          onMouseDown={startSidebarDrag}
+          className="w-1.5 shrink-0 cursor-col-resize transition-colors hover:bg-[var(--accent-cyan)]/40 active:bg-[var(--accent-cyan)]/60"
+          role="separator"
+          aria-orientation="vertical"
+        />
+      )}
 
-          <div
-            className="flex-1 overflow-hidden"
-            style={{ minWidth: sidebarCollapsed ? 0 : '288px' }}
-          >
-            {sidebarCollapsed ? null : sidebarTab === 'topics' ? (
-              <TopicList
-                sessionId={sessionId}
-                topics={topics}
-                currentTopicId={selectedTopic}
-                isReadOnly={isReadOnly}
-                onCreateTopic={handleCreateTopic}
-                onRefresh={handleRefreshTopics}
-                onSwitchTopic={handleSwitchTopic}
-                onDeleteTopic={handleDeleteTopic}
-                onRenameTopic={handleRenameTopic}
-              />
-            ) : (
-              <SchedulerJobList
-                jobs={schedulerJobs}
-                onRefresh={handleRefreshSchedulerJobs}
-                onViewJob={handleViewSchedulerJob}
-                sessionId={sessionId}
-              />
-            )}
-          </div>
-        </div>
-
-        {/* Center - Chat */}
-        <div className="flex-1 min-w-0 bg-[var(--bg-primary)] flex flex-col">
+        {/* 中栏 — 对话区 */}
+      <div className="flex min-w-0 flex-1 flex-col bg-[var(--bg-primary)]">
           {/* Scheduler job view back bar */}
           {schedulerView && (
             <div className="shrink-0 border-b border-[var(--border-color)] bg-[var(--bg-secondary)]/80 px-4 py-2 flex items-center gap-4">
@@ -810,7 +914,7 @@ function App() {
               </button>
               <div className="h-4 w-px bg-[var(--divider-color)]" />
               <div className="flex items-center gap-1.5 text-sm text-[var(--text-secondary)]">
-                <Clock className="h-4 w-4 text-amber-400" />
+                <Clock className="h-4 w-4 text-[var(--accent-amber)]" />
                 <span className="text-[var(--text-muted)]">定时任务:</span>
                 <span className="text-[var(--text-primary)] font-medium font-mono text-xs truncate max-w-[250px]">
                   {schedulerView.description}
@@ -861,13 +965,13 @@ function App() {
                               : level.status;
                 const statusColor =
                   level.status === 'completed'
-                    ? 'text-emerald-400'
+                    ? 'text-[var(--accent-green)]'
                     : level.status === 'failed'
-                      ? 'text-red-400'
+                      ? 'text-[rgb(242,90,90)]'
                       : level.status === 'timeout'
-                        ? 'text-amber-400'
+                        ? 'text-[var(--accent-amber)]'
                         : level.status === 'running'
-                          ? 'text-amber-400'
+                          ? 'text-[var(--accent-amber)]'
                           : 'text-[var(--text-secondary)]';
                 return (
                   <div key={level.taskId} className="flex items-center gap-2 min-w-0">
@@ -935,11 +1039,25 @@ function App() {
           </div>
         </div>
 
-        {/* Right Sidebar - Todo / Memory / Skill Panel (collapsible, tabbed) */}
+      {/* 右栏拖拽调宽手柄 */}
+      {!rightSidebarCollapsed && (
         <div
-          className={`shrink-0 border-l border-[var(--border-color)] bg-[var(--bg-secondary)]/50 flex flex-col overflow-hidden ${rightSidebarCollapsed ? 'w-11' : 'w-80'}`}
-          style={{ transition: 'width 200ms ease-out', willChange: 'width' }}
-        >
+          onMouseDown={startRightPanelDrag}
+          className="w-1.5 shrink-0 cursor-col-resize transition-colors hover:bg-[var(--accent-cyan)]/40 active:bg-[var(--accent-cyan)]/60"
+          role="separator"
+          aria-orientation="vertical"
+        />
+      )}
+
+      {/* 右栏 — Token 统计 / 待办 / 记忆 / 技能（可折叠） */}
+      <div
+        className="relative shrink-0 border-l border-[var(--border-color)] bg-[var(--bg-secondary)] flex flex-col overflow-hidden"
+        style={{
+          width: rightSidebarCollapsed ? 44 : rightPanelWidth,
+          transition: isResizing ? 'none' : 'width 200ms ease-out',
+          willChange: 'width',
+        }}
+      >
           {rightSidebarCollapsed ? (
             // 折叠态：窄条 + 展开按钮
             <button
@@ -950,7 +1068,7 @@ function App() {
               <PanelLeftOpen className="h-4 w-4 rotate-180" />
             </button>
           ) : (
-            <div className="w-80 h-full flex flex-col">
+            <div className="flex h-full min-w-0 flex-col">
               {/* Token 用量面板（主代理/子代理共用，按视图切换数据源） */}
               <TopicTokenStatsPanel
                 tokenStats={subAgentView ? subAgentView.tokenStats : currentTopic?.tokenStats}
@@ -1020,7 +1138,6 @@ function App() {
             </div>
           )}
         </div>
-      </div>
 
       {/* 系统配置页面 */}
       {configPageOpen && (
diff --git a/web/src/components/Chat/ChatContainer.tsx b/web/src/components/Chat/ChatContainer.tsx
index b313272..fbb9d4b 100644
--- a/web/src/components/Chat/ChatContainer.tsx
+++ b/web/src/components/Chat/ChatContainer.tsx
@@ -3,6 +3,7 @@ import { MessageList } from './MessageList';
 import { MessageInput } from './MessageInput';
 import { ExpertSelector } from './ExpertSelector';
 import { ModelSelector } from './ModelSelector';
+import { Zap } from 'lucide-react';
 import type { ChatMessage, Attachment } from '../../types/protocol';
 
 interface ChatContainerProps {
@@ -49,36 +50,72 @@ export function ChatContainer({
     description: string;
   } | null>(null);
 
-  return (
-    <div className="flex h-full flex-col relative">
-      <div className="flex-1 overflow-hidden relative">
-        <MessageList
-          messages={messages}
-          onNavigateToSubAgent={onNavigateToSubAgent}
-          showThinking={showThinking}
-          viewKey={viewKey}
-          highlightedMessageId={highlightedMessageId}
-        />
-      </div>
-      <div className="flex flex-wrap items-center gap-1 px-4 pt-2 max-w-5xl mx-auto w-full">
-        <ExpertSelector
-          sessionId={sessionId ?? null}
-          onManageExperts={onOpenSettings}
-          onSelectionChange={setSelectedExpert}
-          settingsClosedTick={settingsClosedTick}
-        />
-        <ModelSelector sessionId={sessionId ?? null} settingsClosedTick={settingsClosedTick} />
-      </div>
-      <MessageInput
-        onSend={onSendMessage}
-        onStop={onStop}
-        disabled={isLoading}
-        isLoading={isLoading}
-        isReadOnly={isReadOnly}
-        channelName={channelName}
-        selectedExpert={selectedExpert}
-        topicId={topicId}
+  const selectors = (
+    <div className="flex flex-wrap items-center gap-1 px-3 pt-2">
+      <ExpertSelector
+        sessionId={sessionId ?? null}
+        onManageExperts={onOpenSettings}
+        onSelectionChange={setSelectedExpert}
+        settingsClosedTick={settingsClosedTick}
       />
+      <ModelSelector sessionId={sessionId ?? null} settingsClosedTick={settingsClosedTick} />
+    </div>
+  );
+
+  const input = (
+    <MessageInput
+      onSend={onSendMessage}
+      onStop={onStop}
+      disabled={isLoading}
+      isLoading={isLoading}
+      isReadOnly={isReadOnly}
+      channelName={channelName}
+      selectedExpert={selectedExpert}
+      topicId={topicId}
+    />
+  );
+
+  /* Hero 空状态：空话题 + 非加载 + 可写。
+     注意：composer 保持在组件树中的固定位置（不随分支 remount），
+     避免空→非空切换时丢失未发送草稿。 */
+  const isHero = messages.length === 0 && !isLoading && !isReadOnly;
+
+  return (
+    <div className="relative flex h-full w-full flex-col">
+      {isHero && (
+        <div
+          className="pointer-events-none absolute inset-0"
+          style={{
+            background:
+              'radial-gradient(closest-side at 50% 42%, color-mix(in srgb, var(--accent-cyan) 9%, transparent), transparent)',
+          }}
+        />
+      )}
+      {isHero ? (
+        <div className="relative flex flex-1 flex-col items-center justify-center px-6 pb-6">
+          <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-[var(--border-color)] bg-[var(--bg-tertiary)]">
+            <Zap className="h-6 w-6 text-[var(--accent-cyan)]" />
+          </div>
+          <h1 className="mt-4 text-[26px] font-semibold text-[var(--text-primary)]">PicoBot</h1>
+          <p className="mt-1 text-sm text-[var(--text-muted)]">有什么可以帮你的？</p>
+        </div>
+      ) : (
+        <div className="relative flex-1 overflow-hidden">
+          <MessageList
+            messages={messages}
+            onNavigateToSubAgent={onNavigateToSubAgent}
+            showThinking={showThinking}
+            viewKey={viewKey}
+            highlightedMessageId={highlightedMessageId}
+          />
+        </div>
+      )}
+      <div className="relative shrink-0 px-6 pb-4">
+        <div className={`mx-auto w-full ${isHero ? 'max-w-[680px]' : 'max-w-[736px]'}`}>
+          {selectors}
+          {input}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/web/src/components/Chat/ExpertSelector.tsx b/web/src/components/Chat/ExpertSelector.tsx
index 29a4b59..75b5b27 100644
--- a/web/src/components/Chat/ExpertSelector.tsx
+++ b/web/src/components/Chat/ExpertSelector.tsx
@@ -256,7 +256,7 @@ export function ExpertSelector({
           </div>
         )}
       </div>
-      {error && <span className="text-xs text-red-400 truncate">{error}</span>}
+      {error && <span className="text-xs text-[rgb(242,90,90)] truncate">{error}</span>}
     </div>
   );
 }
diff --git a/web/src/components/Chat/MessageBubble.tsx b/web/src/components/Chat/MessageBubble.tsx
index b08c5f4..eb64e60 100644
--- a/web/src/components/Chat/MessageBubble.tsx
+++ b/web/src/components/Chat/MessageBubble.tsx
@@ -1,28 +1,23 @@
 import { useState, useEffect, memo } from 'react';
 import {
-  User,
-  Bot,
-  Wrench,
   CheckCircle,
-  AlertCircle,
-  Terminal,
-  File,
-  Image,
-  FileText,
-  Music,
-  Video,
-  Download,
-  ChevronDown,
   ChevronRight,
-  Copy,
-  Check,
-  Loader2,
-  XCircle,
+  ChevronDown,
   Clock,
   Loader,
-  X,
+  Loader2,
+  XCircle,
+  Copy,
+  Check,
   Brain,
   Maximize2,
+  Download,
+  File,
+  FileText,
+  Image,
+  Music,
+  Video,
+  X,
 } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -289,7 +284,7 @@ function CopyButton({ text, className = '' }: { text: string; className?: string
       title="复制"
     >
       {copied ? (
-        <Check className="h-3 w-3 text-emerald-400" />
+        <Check className="h-3 w-3 text-[var(--accent-green)]" />
       ) : (
         <Copy className="h-3 w-3 text-[var(--text-muted)]" />
       )}
@@ -385,25 +380,25 @@ export const MessageBubble = memo(function MessageBubble({
 
     const statusConfig = {
       calling: {
-        dot: 'bg-amber-400 animate-pulse',
-        fullBorder: 'border-amber-500/30',
-        iconColor: 'text-amber-400',
-        avatarBg: 'bg-amber-500/20',
-        avatarIcon: 'text-amber-400',
+        dot: 'bg-[var(--accent-cyan)] animate-pulse',
+        fullBorder: 'border-[var(--accent-cyan)]/30',
+        iconColor: 'text-[var(--accent-cyan)]',
+        avatarBg: 'bg-[var(--accent-cyan)]/10',
+        avatarIcon: 'text-[var(--accent-cyan)]',
       },
       result: {
-        dot: 'bg-emerald-400',
-        fullBorder: 'border-emerald-500/30',
-        iconColor: 'text-emerald-400',
-        avatarBg: 'bg-emerald-500/20',
-        avatarIcon: 'text-emerald-400',
+        dot: 'bg-[var(--accent-green)]',
+        fullBorder: 'border-[var(--accent-green)]/30',
+        iconColor: 'text-[var(--accent-green)]',
+        avatarBg: 'bg-[var(--accent-green)]/10',
+        avatarIcon: 'text-[var(--accent-green)]',
       },
       pending: {
-        dot: 'bg-orange-400 animate-pulse',
-        fullBorder: 'border-orange-500/30',
-        iconColor: 'text-orange-400',
-        avatarBg: 'bg-orange-500/20',
-        avatarIcon: 'text-orange-400',
+        dot: 'bg-[var(--accent-amber)] animate-pulse',
+        fullBorder: 'border-[var(--accent-amber)]/30',
+        iconColor: 'text-[var(--accent-amber)]',
+        avatarBg: 'bg-[var(--accent-amber)]/10',
+        avatarIcon: 'text-[var(--accent-amber)]',
       },
     }[status];
 
@@ -450,35 +445,39 @@ export const MessageBubble = memo(function MessageBubble({
     // - interrupted: 子代理因服务器重启被中断
     const taskStatusConfig: Record<string, { dot: string; borderColor: string; iconColor: string }> = {
       running: {
-        dot: 'bg-amber-400 animate-pulse',
-        borderColor: 'border-amber-500/40',
-        iconColor: 'text-amber-400',
+        dot: 'bg-[var(--accent-amber)] animate-pulse',
+        borderColor: 'border-[var(--accent-amber)]/40',
+        iconColor: 'text-[var(--accent-amber)]',
       },
       success: {
-        dot: 'bg-emerald-400',
-        borderColor: 'border-emerald-500/40',
-        iconColor: 'text-emerald-400',
+        dot: 'bg-[var(--accent-green)]',
+        borderColor: 'border-[var(--accent-green)]/40',
+        iconColor: 'text-[var(--accent-green)]',
       },
       completed: {
-        dot: 'bg-emerald-400',
-        borderColor: 'border-emerald-500/40',
-        iconColor: 'text-emerald-400',
+        dot: 'bg-[var(--accent-green)]',
+        borderColor: 'border-[var(--accent-green)]/40',
+        iconColor: 'text-[var(--accent-green)]',
+      },
+      failed: {
+        dot: 'bg-[rgb(242,90,90)]',
+        borderColor: 'border-[rgb(242,90,90)]/40',
+        iconColor: 'text-[rgb(242,90,90)]',
       },
-      failed: { dot: 'bg-red-400', borderColor: 'border-red-500/40', iconColor: 'text-red-400' },
       timeout: {
-        dot: 'bg-amber-400',
-        borderColor: 'border-amber-500/40',
-        iconColor: 'text-amber-400',
+        dot: 'bg-[var(--accent-amber)]',
+        borderColor: 'border-[var(--accent-amber)]/40',
+        iconColor: 'text-[var(--accent-amber)]',
       },
       cancelled: {
-        dot: 'bg-zinc-400',
-        borderColor: 'border-zinc-500/40',
-        iconColor: 'text-zinc-400',
+        dot: 'bg-[var(--text-muted)]',
+        borderColor: 'border-[var(--border-color)]',
+        iconColor: 'text-[var(--text-muted)]',
       },
       interrupted: {
-        dot: 'bg-orange-400',
-        borderColor: 'border-orange-500/40',
-        iconColor: 'text-orange-400',
+        dot: 'bg-[var(--accent-amber)]',
+        borderColor: 'border-[var(--accent-amber)]/40',
+        iconColor: 'text-[var(--accent-amber)]',
       },
     };
 
@@ -486,38 +485,13 @@ export const MessageBubble = memo(function MessageBubble({
     const taskStyle = taskResult ? (taskStatusConfig[taskResult.status] ?? taskStatusConfig.failed) : null;
 
     return (
-      <div data-message-id={message.id} className="flex gap-3 animate-slide-in">
+      <div data-message-id={message.id} className="animate-slide-in">
         <div
-          className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full mt-0.5 ${
-            isTaskTool ? 'bg-violet-500/20' : statusConfig.avatarBg
+          onClick={() => setToolExpanded(!toolExpanded)}
+          className={`group w-full cursor-pointer rounded-xl border bg-[var(--bg-secondary)]/60 transition-colors duration-300 hover:bg-[var(--bg-secondary)] ${
+            taskStyle ? taskStyle.borderColor : statusConfig.fullBorder
           }`}
         >
-          {isTaskTool ? (
-            <Bot className="h-3.5 w-3.5 text-violet-400" />
-          ) : (
-            <Terminal className={`h-3.5 w-3.5 ${statusConfig.avatarIcon}`} />
-          )}
-        </div>
-        <div className="max-w-[80%] min-w-0">
-          <div className="flex items-center gap-2 mb-1">
-            <span className="text-xs font-medium text-[var(--text-secondary)]">
-              {message.toolName || 'Tool'}
-            </span>
-            {isTaskTool && (
-              <span className="text-xs px-1.5 py-0.5 rounded bg-violet-500/10 text-violet-400">
-                子智能体·{subagentType}
-              </span>
-            )}
-            <span className="text-xs text-[var(--text-muted)]">
-              {formatTime(message.timestamp)}
-            </span>
-          </div>
-          <div
-            onClick={() => setToolExpanded(!toolExpanded)}
-            className={`cursor-pointer rounded-xl border bg-[var(--bg-tertiary)]/60 w-full transition-all duration-500 hover:bg-[var(--bg-tertiary)]/80 group ${
-              taskStyle ? taskStyle.borderColor : statusConfig.fullBorder
-            }`}
-          >
             {/* Header row */}
             <div className="flex items-center gap-2 px-3 py-2">
               <span
@@ -660,10 +634,10 @@ export const MessageBubble = memo(function MessageBubble({
                       <div
                         className={`rounded-lg px-3 py-2 ${
                           taskResult.status === 'success'
-                            ? 'bg-emerald-500/10 border border-emerald-500/30'
+                            ? 'bg-[var(--accent-green)]/10 border border-[var(--accent-green)]/30'
                             : taskResult.status === 'failed'
-                              ? 'bg-red-500/10 border border-red-500/30'
-                              : 'bg-amber-500/10 border border-amber-500/30'
+                              ? 'bg-[rgb(242,90,90)]/10 border border-[rgb(242,90,90)]/30'
+                              : 'bg-[var(--accent-amber)]/10 border border-[var(--accent-amber)]/30'
                         }`}
                       >
                         <div className="text-xs font-medium text-[var(--text-muted)] mb-0.5">
@@ -742,7 +716,15 @@ export const MessageBubble = memo(function MessageBubble({
                 )}
               </div>
             )}
-          </div>
+        </div>
+        <div className="mt-1 flex items-center gap-2 px-1">
+          <span className="text-xs text-[var(--text-muted)]">{message.toolName || 'Tool'}</span>
+          {isTaskTool && (
+            <span className="rounded bg-[var(--accent-purple)]/10 px-1.5 py-0.5 text-xs text-[var(--accent-purple)]">
+              子智能体·{subagentType}
+            </span>
+          )}
+          <span className="text-xs text-[var(--text-muted)]">{formatTime(message.timestamp)}</span>
         </div>
         {lightboxElement}
         {showDetailModal && (
@@ -776,76 +758,39 @@ export const MessageBubble = memo(function MessageBubble({
     return null;
   }
 
-  const getIcon = () => {
-    if (isUser) return <User className="h-4 w-4" />;
-    if (isTool) {
-      if (message.type === 'tool_call') return <Terminal className="h-4 w-4" />;
-      if (message.type === 'tool_result') return <CheckCircle className="h-4 w-4" />;
-      if (message.type === 'tool_pending') return <AlertCircle className="h-4 w-4" />;
-      return <Wrench className="h-4 w-4" />;
-    }
-    return <Bot className="h-4 w-4" />;
-  };
 
-  const getContainerStyles = () => {
-    if (isUser) {
-      return 'bg-gradient-to-br from-[var(--accent-cyan)]/20 to-[var(--accent-blue)]/20 border-[var(--accent-cyan)]/30 text-[var(--text-primary)]';
-    }
-    if (isTool) {
-      if (message.type === 'tool_call') return 'bg-amber-500/10 border-amber-500/30 text-amber-100';
-      if (message.type === 'tool_result')
-        return 'bg-emerald-500/10 border-emerald-500/30 text-emerald-100';
-      if (message.type === 'tool_pending')
-        return 'bg-orange-500/10 border-orange-500/30 text-orange-100';
-      return 'bg-[var(--bg-hover)] border-[var(--border-color)] text-[var(--text-secondary)]';
-    }
-    return 'bg-[var(--bg-tertiary)] border-[var(--border-color)] text-[var(--text-primary)]';
-  };
-
-  const getAvatarStyles = () => {
-    if (isUser) return 'bg-gradient-to-br from-[var(--accent-cyan)] to-[var(--accent-blue)]';
-    if (isTool) {
-      if (message.type === 'tool_call') return 'bg-amber-500';
-      if (message.type === 'tool_result') return 'bg-emerald-500';
-      if (message.type === 'tool_pending') return 'bg-orange-500';
-      return 'bg-zinc-700';
-    }
-    return 'bg-gradient-to-br from-[var(--accent-purple)] to-[#ec4899]';
-  };
 
   return (
     <div
       data-message-id={message.id}
-      className={`flex gap-4 ${isUser ? 'flex-row-reverse' : 'flex-row'} animate-slide-in group`}
+      className={`animate-slide-in group ${isUser ? 'flex flex-col items-end' : ''}`}
     >
-      <div
-        className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${getAvatarStyles()} shadow-lg`}
-      >
-        {getIcon()}
-      </div>
-      <div className={`max-w-[80%] ${isUser ? 'text-right' : 'text-left'}`}>
-        <div className="flex items-center gap-2 mb-1">
-          <span
-            className={`text-xs font-medium ${isUser ? 'text-[var(--accent-cyan)]' : 'text-[var(--text-secondary)]'}`}
-          >
-            {isUser ? 'You' : isTool ? message.toolName || 'Tool' : 'Assistant'}
+      {!isUser && (
+        <div className="mb-1 flex items-center gap-2">
+          {isTool && message.toolName ? (
+            <span className="text-xs font-medium text-[var(--text-secondary)]">
+              {message.toolName}
+            </span>
+          ) : null}
+          <span className="text-xs text-[var(--text-muted)] opacity-0 transition-opacity group-hover:opacity-100">
+            {formatTime(message.timestamp)}
           </span>
-          <span className="text-xs text-[var(--text-muted)]">{formatTime(message.timestamp)}</span>
           <CopyButton text={message.content} />
         </div>
-        <div
-          className={`inline-block rounded-2xl border px-5 py-3 text-left shadow-lg ${getContainerStyles()}`}
-        >
-          {isTool && message.toolName && (
-            <div className="mb-2 text-xs font-semibold opacity-70 flex items-center gap-1">
-              <Terminal className="h-3 w-3" />
-              {message.toolName}
-            </div>
-          )}
-          {isUser ? (
-            // 用户消息保持纯文本
-            <div className="whitespace-pre-wrap text-sm leading-relaxed">{message.content}</div>
-          ) : (
+      )}
+      <div
+        className={
+          isUser
+            ? 'max-w-[min(525px,82%)] rounded-[22px] bg-[var(--bubble-user)] px-4 py-2.5 text-left'
+            : 'w-full min-w-0'
+        }
+      >
+        {isUser ? (
+          // 用户消息保持纯文本（右对齐柔和气泡）
+          <div className="whitespace-pre-wrap text-[15px] leading-6 text-[var(--text-primary)]">
+            {message.content}
+          </div>
+        ) : (
             // 模型思考内容（仅助手消息，非工具消息）
             <>
               {showThinking && !isTool && message.reasoningContent && (
@@ -855,7 +800,7 @@ export const MessageBubble = memo(function MessageBubble({
               )}
               {/* AI 和工具消息使用 Markdown 渲染 */}
               {message.content.trim() && (
-                <div className="markdown-content text-sm leading-relaxed">
+                <div className="markdown-content text-[15px] leading-6">
                   <ReactMarkdown
                     remarkPlugins={[remarkGfm]}
                     components={{
@@ -991,8 +936,15 @@ export const MessageBubble = memo(function MessageBubble({
                 ))}
             </div>
           )}
-        </div>
       </div>
+      {isUser && (
+        <div className="mt-1 flex items-center gap-2 px-1">
+          <span className="text-xs text-[var(--text-muted)] opacity-0 transition-opacity group-hover:opacity-100">
+            {formatTime(message.timestamp)}
+          </span>
+          <CopyButton text={message.content} />
+        </div>
+      )}
       {lightboxElement}
     </div>
   );
diff --git a/web/src/components/Chat/MessageInput.tsx b/web/src/components/Chat/MessageInput.tsx
index df97dd9..9352a16 100644
--- a/web/src/components/Chat/MessageInput.tsx
+++ b/web/src/components/Chat/MessageInput.tsx
@@ -2,7 +2,6 @@ import {
   Send,
   Loader2,
   Square,
-  Sparkles,
   Eye,
   Paperclip,
   X,
@@ -284,23 +283,21 @@ export function MessageInput({
   // 只读模式：显示提示占位符
   if (isReadOnly) {
     return (
-      <div className="border-t border-[var(--border-color)] bg-[var(--bg-secondary)]/80 backdrop-blur-md p-4">
-        <div className="max-w-5xl mx-auto">
-          <div className="rounded-xl border border-[var(--border-color)] bg-[var(--bg-tertiary)]/50 px-4 py-5 text-center">
-            <div className="flex flex-col items-center gap-2">
-              <div className="flex items-center gap-2 text-[var(--text-secondary)]">
-                <Eye className="h-5 w-5" />
-                <span className="font-medium">只读模式</span>
-              </div>
-              <p className="text-sm text-[var(--text-muted)]">
-                {channelName ? (
-                  <>{channelName} 通道仅支持查看历史消息</>
-                ) : (
-                  '当前通道仅支持查看历史消息'
-                )}
-              </p>
-              <p className="text-xs text-[var(--text-muted)]">请切换至 WebSocket 通道进行输入</p>
+      <div className="pt-2">
+        <div className="rounded-2xl border border-[var(--border-color)] bg-[var(--surface-input)] px-4 py-5 text-center shadow-sm">
+          <div className="flex flex-col items-center gap-2">
+            <div className="flex items-center gap-2 text-[var(--text-secondary)]">
+              <Eye className="h-5 w-5" />
+              <span className="font-medium">只读模式</span>
             </div>
+            <p className="text-sm text-[var(--text-muted)]">
+              {channelName ? (
+                <>{channelName} 通道仅支持查看历史消息</>
+              ) : (
+                '当前通道仅支持查看历史消息'
+              )}
+            </p>
+            <p className="text-xs text-[var(--text-muted)]">请切换至 WebSocket 通道进行输入</p>
           </div>
         </div>
       </div>
@@ -308,70 +305,87 @@ export function MessageInput({
   }
 
   return (
-    <div className="border-t border-[var(--border-color)] bg-[var(--bg-secondary)]/80 backdrop-blur-md p-4">
-      <div className="max-w-5xl mx-auto">
-        {/* 错误提示 */}
-        {error && (
-          <div className="mb-2 rounded-lg bg-red-500/10 border border-red-500/20 px-3 py-2 text-sm text-red-400">
-            {error}
-          </div>
-        )}
+    <div className="pt-2">
+      {/* 错误提示 */}
+      {error && (
+        <div className="mb-2 rounded-lg bg-[rgb(242,90,90)]/10 border border-[rgb(242,90,90)]/25 px-3 py-2 text-sm text-[rgb(242,90,90)]">
+          {error}
+        </div>
+      )}
 
-        {/* 附件预览列表 */}
-        {attachments.length > 0 && (
-          <div className="mb-2 flex flex-wrap gap-2">
-            {attachments.map((att, index) => (
-              <div
-                key={att.id}
-                className="flex items-center gap-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-tertiary)] px-2 py-1.5 text-sm"
+      {/* 附件预览列表 */}
+      {attachments.length > 0 && (
+        <div className="mb-2 flex flex-wrap gap-2">
+          {attachments.map((att, index) => (
+            <div
+              key={att.id}
+              className="flex items-center gap-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-tertiary)] px-2 py-1.5 text-sm"
+            >
+              {att.preview ? (
+                <img
+                  src={`data:${att.attachment.mime_type};base64,${att.preview}`}
+                  alt={att.attachment.file_name}
+                  className="h-8 w-8 rounded object-cover"
+                />
+              ) : (
+                <div className="h-8 w-8 rounded bg-[var(--bg-hover)] flex items-center justify-center text-[var(--text-secondary)]">
+                  {getAttachmentIcon(att.attachment.media_type)}
+                </div>
+              )}
+              <span className="text-[var(--text-secondary)] max-w-[120px] truncate">
+                {att.attachment.file_name}
+              </span>
+              <button
+                onClick={() => handleRemoveAttachment(index)}
+                className="text-[var(--text-muted)] hover:text-[rgb(242,90,90)] transition-colors"
               >
-                {att.preview ? (
-                  <img
-                    src={`data:${att.attachment.mime_type};base64,${att.preview}`}
-                    alt={att.attachment.file_name}
-                    className="h-8 w-8 rounded object-cover"
-                  />
-                ) : (
-                  <div className="h-8 w-8 rounded bg-[var(--bg-hover)] flex items-center justify-center text-[var(--text-secondary)]">
-                    {getAttachmentIcon(att.attachment.media_type)}
-                  </div>
-                )}
-                <span className="text-[var(--text-secondary)] max-w-[120px] truncate">
-                  {att.attachment.file_name}
-                </span>
-                <button
-                  onClick={() => handleRemoveAttachment(index)}
-                  className="text-[var(--text-muted)] hover:text-red-400 transition-colors"
-                >
-                  <X className="h-4 w-4" />
-                </button>
-              </div>
-            ))}
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Composer 卡片 */}
+      <div
+        className={`relative rounded-2xl border bg-[var(--surface-input)] shadow-sm transition-colors ${
+          isDragging
+            ? 'border-[var(--border-accent)]'
+            : 'border-[var(--border-color)] focus-within:border-[var(--border-accent)]'
+        }`}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+      >
+        {/* 拖拽提示 */}
+        {isDragging && (
+          <div className="absolute inset-0 z-10 flex items-center justify-center rounded-2xl border border-[var(--border-accent)] bg-[var(--accent-cyan)]/10">
+            <div className="text-sm font-medium text-[var(--accent-cyan)]">拖放文件到这里</div>
           </div>
         )}
 
-        {/* 输入区域 */}
-        <div
-          className={`flex gap-3 items-center relative ${isDragging ? 'ring-2 ring-[var(--accent-cyan)]/50 rounded-xl' : ''}`}
-          onDragEnter={handleDragEnter}
-          onDragLeave={handleDragLeave}
-          onDragOver={handleDragOver}
-          onDrop={handleDrop}
-        >
-          {/* 拖拽提示 */}
-          {isDragging && (
-            <div className="absolute inset-0 rounded-xl bg-[var(--accent-cyan)]/10 border-2 border-[var(--accent-cyan)]/50 flex items-center justify-center z-10">
-              <div className="text-[var(--accent-cyan)] text-sm font-medium">拖放文件到这里</div>
-            </div>
-          )}
+        <textarea
+          ref={textareaRef}
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          placeholder={effectivePlaceholder}
+          disabled={disabled}
+          rows={1}
+          className="composer-area w-full resize-none bg-transparent px-4 pt-3 pb-1 text-[15px] leading-6 text-[var(--text-primary)] placeholder:text-[var(--text-muted)] disabled:opacity-50 scrollbar-hide"
+        />
 
-          {/* 附件按钮 */}
+        {/* 底部操作行 */}
+        <div className="flex items-center gap-1 px-2 pb-2">
           <button
             onClick={handleAttachClick}
             disabled={disabled}
-            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-[var(--border-color)] bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--border-color)] disabled:opacity-50 transition-all"
+            title="添加附件"
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-[var(--text-muted)] hover:bg-[var(--overlay-hover)] hover:text-[var(--text-primary)] disabled:opacity-50 transition-colors"
           >
-            <Paperclip className="h-5 w-5" />
+            <Paperclip className="h-4 w-4" />
           </button>
           <input
             ref={fileInputRef}
@@ -380,51 +394,37 @@ export function MessageInput({
             className="hidden"
             onChange={(e) => handleFileSelect(e.target.files)}
           />
-
-          {/* 输入框 */}
-          <div className="flex-1 relative flex items-center">
-            <textarea
-              ref={textareaRef}
-              value={content}
-              onChange={(e) => setContent(e.target.value)}
-              onKeyDown={handleKeyDown}
-              onPaste={handlePaste}
-              placeholder={effectivePlaceholder}
-              disabled={disabled}
-              rows={1}
-              className="w-full resize-none rounded-xl border border-[var(--border-color)] bg-[var(--bg-tertiary)] px-4 py-3 pr-12 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-cyan)]/50 focus:outline-none focus:ring-1 focus:ring-[var(--focus-ring)] disabled:opacity-50 transition-all self-center scrollbar-hide"
-            />
-            <Sparkles className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--text-muted)] pointer-events-none" />
-          </div>
-
-          {/* 发送/停止按钮 */}
+          <div className="flex-1" />
           {isLoading && onStop ? (
             <button
               onClick={onStop}
               title="停止执行"
-              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 hover:bg-red-500/20 hover:text-red-300 transition-all"
+              aria-label="Stop generating"
+              className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-[var(--border-color)] text-[var(--text-muted)] hover:bg-[var(--overlay-hover)] hover:text-[rgb(242,90,90)] transition-colors"
             >
-              <Square className="h-4 w-4" />
+              <Square className="h-3.5 w-3.5" />
             </button>
           ) : (
             <button
               onClick={handleSend}
               disabled={disabled || (!content.trim() && attachments.length === 0)}
-              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-r from-[var(--accent-cyan)] to-[var(--accent-blue)] text-white shadow-lg shadow-[var(--accent-cyan)]/20 hover:shadow-xl hover:shadow-[var(--accent-cyan)]/30 hover:scale-105 disabled:opacity-50 disabled:hover:scale-100 disabled:cursor-not-allowed transition-all"
+              title="发送"
+              aria-label="Send message"
+              className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--btn-contrast)] text-[var(--btn-contrast-fg)] hover:opacity-85 disabled:opacity-35 disabled:cursor-not-allowed transition-opacity"
             >
               {disabled ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
               ) : (
-                <Send className="h-4 w-4" />
+                <Send className="h-3.5 w-3.5" />
               )}
             </button>
           )}
         </div>
+      </div>
 
-        {/* 提示 */}
-        <div className="mt-2 text-center text-xs text-[var(--text-muted)]">
-          按 Enter 发送，Shift+Enter 换行 · 支持拖拽/粘贴文件 · 最大 50MB
-        </div>
+      {/* 提示 */}
+      <div className="mt-2 text-center text-xs text-[var(--text-muted)]">
+        按 Enter 发送，Shift+Enter 换行 · 支持拖拽/粘贴文件 · 最大 50MB
       </div>
     </div>
   );
diff --git a/web/src/components/Chat/MessageList.tsx b/web/src/components/Chat/MessageList.tsx
index fa4317f..2232669 100644
--- a/web/src/components/Chat/MessageList.tsx
+++ b/web/src/components/Chat/MessageList.tsx
@@ -182,25 +182,57 @@ export function MessageList({
     });
   }, [highlightedMessageId, virtualizer]);
 
+  // ---- 行高强制重测（修复 tanstack virtual-core 3.17.x 陈旧高度导致行重叠）----
+  // 3.17.x 在滚动状态会跳过同步测量、对缓冲区外的行跳过 RO 更新并复用缓存高度；
+  // 滚动停止后或对话列宽度变化（拖拽调宽/折叠侧栏）时，换行行可能保留 120px 估值导致行重叠。
+  // 在这两个时机绕过门控，直接对已渲染行调用 resizeItem 强制纠正。
+  const remeasureRows = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    for (const vi of virtualizer.getVirtualItems()) {
+      const node = container.querySelector<HTMLElement>(`[data-index="${vi.index}"]`);
+      if (node) {
+        const h = Math.round(node.getBoundingClientRect().height);
+        if (h > 0) virtualizer.resizeItem(vi.index, h);
+      }
+    }
+  }, [virtualizer]);
+
+  // 宽度变化后强制重测（含一次 rAF 补测同提交内的重 stamped 行）
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || typeof ResizeObserver === 'undefined') return;
+    let lastWidth = container.clientWidth;
+    const ro = new ResizeObserver(() => {
+      const w = container.clientWidth;
+      if (w === lastWidth) return;
+      lastWidth = w;
+      remeasureRows();
+      requestAnimationFrame(remeasureRows);
+    });
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [virtualizer, remeasureRows]);
+
+  // 滚动停止后补测一次（滚动期间被门控跳过的行在此纠正）
+  const isScrolling = virtualizer.isScrolling;
+  useEffect(() => {
+    if (isScrolling) return;
+    const id = requestAnimationFrame(remeasureRows);
+    return () => cancelAnimationFrame(id);
+  }, [isScrolling, remeasureRows]);
+
   // ---- empty state ----
 
   if (messages.length === 0) {
     return (
       <div className="flex h-full items-center justify-center">
         <div className="text-center animate-fade-in">
-          <div className="mb-6 inline-flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-[var(--accent-cyan)]/20 to-[var(--accent-blue)]/20 shadow-2xl shadow-[var(--accent-cyan)]/20">
-            <Sparkles className="h-10 w-10 text-[var(--accent-cyan)]" />
-          </div>
-          <h2 className="mb-2 text-2xl font-bold text-[var(--text-primary)]">开始新的对话</h2>
-          <p className="text-[var(--text-muted)]">在下方输入消息开始与 AI 助手聊天</p>
-          <div className="mt-8 flex items-center justify-center gap-4 text-sm text-[var(--text-muted)]">
-            <span className="px-3 py-1 rounded-full bg-[var(--bg-hover)] border border-[var(--border-color)]">
-              /new 创建话题
-            </span>
-            <span className="px-3 py-1 rounded-full bg-[var(--bg-hover)] border border-[var(--border-color)]">
-              /list 查看列表
-            </span>
+          <div className="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl border border-[var(--border-color)] bg-[var(--bg-tertiary)]">
+            <Sparkles className="h-8 w-8 text-[var(--accent-cyan)]" />
           </div>
+          <h2 className="mb-2 text-xl font-semibold text-[var(--text-primary)]">开始新的对话</h2>
+          <p className="text-sm text-[var(--text-muted)]">在下方输入消息开始与 AI 助手聊天</p>
         </div>
       </div>
     );
@@ -237,11 +269,13 @@ export function MessageList({
                   transform: `translateY(${vi.start}px)`,
                 }}
               >
-                <MessageBubble
-                  message={message}
-                  onNavigateToSubAgent={onNavigateToSubAgent}
-                  showThinking={showThinking}
-                />
+                <div className="mx-auto w-full max-w-[736px]">
+                  <MessageBubble
+                    message={message}
+                    onNavigateToSubAgent={onNavigateToSubAgent}
+                    showThinking={showThinking}
+                  />
+                </div>
               </div>
             );
           })}
@@ -256,11 +290,9 @@ export function MessageList({
             onClick={scrollToTop}
             className="flex items-center gap-1.5 px-3 py-2 rounded-full
                        bg-[var(--bg-tertiary)]/90 backdrop-blur-md
-                       border border-[var(--border-color)]
-                       text-[var(--text-muted)] hover:text-[var(--accent-cyan)]
-                       hover:border-[var(--accent-cyan)]/30
-                       hover:shadow-[0_0_20px_var(--shadow-glow-sm)]
-                       transition-all duration-300 ease-out
+                       border border-[var(--border-color)] shadow-sm
+                       text-[var(--text-muted)] hover:text-[var(--text-primary)]
+                       transition-colors duration-200 ease-out
                        animate-fade-in"
             aria-label="回到顶部"
           >
@@ -273,11 +305,9 @@ export function MessageList({
             onClick={() => scrollToBottom('smooth')}
             className="flex items-center gap-2 px-4 py-2 rounded-full
                        bg-[var(--bg-tertiary)]/90 backdrop-blur-md
-                       border border-[var(--border-color)]
-                       text-[var(--text-muted)] hover:text-[var(--accent-cyan)]
-                       hover:border-[var(--accent-cyan)]/30
-                       hover:shadow-[0_0_20px_var(--shadow-glow-sm)]
-                       transition-all duration-300 ease-out
+                       border border-[var(--border-color)] shadow-sm
+                       text-[var(--text-muted)] hover:text-[var(--text-primary)]
+                       transition-colors duration-200 ease-out
                        animate-fade-in"
             aria-label="回到底部"
           >
diff --git a/web/src/components/Chat/ModelSelector.tsx b/web/src/components/Chat/ModelSelector.tsx
index 36a6929..d364a01 100644
--- a/web/src/components/Chat/ModelSelector.tsx
+++ b/web/src/components/Chat/ModelSelector.tsx
@@ -229,7 +229,7 @@ export function ModelSelector({
               </label>
             </div>
 
-            {error && <div className="text-xs text-red-400 truncate">{error}</div>}
+            {error && <div className="text-xs text-[rgb(242,90,90)] truncate">{error}</div>}
 
             <div className="flex items-center justify-between gap-2 pt-1">
               <button
@@ -260,7 +260,7 @@ export function ModelSelector({
           </div>
         )}
       </div>
-      {error && <span className="text-xs text-red-400 truncate">{error}</span>}
+      {error && <span className="text-xs text-[rgb(242,90,90)] truncate">{error}</span>}
     </div>
   );
 }
diff --git a/web/src/components/Chat/ToolDetailModal.tsx b/web/src/components/Chat/ToolDetailModal.tsx
index c3c140e..56dd1b9 100644
--- a/web/src/components/Chat/ToolDetailModal.tsx
+++ b/web/src/components/Chat/ToolDetailModal.tsx
@@ -59,7 +59,7 @@ export function ToolDetailModal({
       : status === 'result'
         ? 'var(--accent-green)'
         : status === 'pending'
-          ? '#f59e0b'
+          ? 'var(--accent-amber)'
           : 'var(--text-muted)';
 
   return (
@@ -81,9 +81,9 @@ export function ToolDetailModal({
           <span
             className="px-2.5 py-1 rounded-full text-sm font-medium"
             style={{
-              backgroundColor: `${statusColor}15`,
+              backgroundColor: `color-mix(in srgb, ${statusColor} 12%, transparent)`,
               color: statusColor,
-              border: `1px solid ${statusColor}30`,
+              border: `1px solid color-mix(in srgb, ${statusColor} 25%, transparent)`,
             }}
           >
             {statusLabel}
diff --git a/web/src/components/ConnectionStatus.tsx b/web/src/components/ConnectionStatus.tsx
index ec6f720..fdcbf36 100644
--- a/web/src/components/ConnectionStatus.tsx
+++ b/web/src/components/ConnectionStatus.tsx
@@ -3,34 +3,40 @@ import type { ConnectionStatus } from '../types/protocol';
 
 interface ConnectionStatusProps {
   status: ConnectionStatus;
+  /** rail 紧凑模式：仅显示图标 */
+  compact?: boolean;
 }
 
-export function ConnectionStatus({ status }: ConnectionStatusProps) {
+export function ConnectionStatus({ status, compact = false }: ConnectionStatusProps) {
   const getStatusConfig = () => {
     switch (status) {
       case 'connecting':
         return {
-          icon: <Loader2 className="h-3 w-3 animate-spin" />,
+          icon: <Loader2 className={`animate-spin ${compact ? 'h-4 w-4' : 'h-3 w-3'}`} />,
           text: '连接中',
-          className: 'text-amber-400 bg-amber-400/10 border-amber-400/30',
+          className:
+            'text-[var(--accent-amber)] bg-[var(--accent-amber)]/10 border-[var(--accent-amber)]/30',
         };
       case 'connected':
         return {
-          icon: <Wifi className="h-3 w-3" />,
+          icon: <Wifi className={compact ? 'h-4 w-4' : 'h-3 w-3'} />,
           text: '已连接',
-          className: 'text-emerald-400 bg-emerald-400/10 border-emerald-400/30',
+          className:
+            'text-[var(--accent-green)] bg-[var(--accent-green)]/10 border-[var(--accent-green)]/30',
         };
       case 'disconnected':
         return {
-          icon: <WifiOff className="h-3 w-3" />,
+          icon: <WifiOff className={compact ? 'h-4 w-4' : 'h-3 w-3'} />,
           text: '已断开',
-          className: 'text-zinc-400 bg-zinc-400/10 border-zinc-400/30',
+          className:
+            'text-[var(--text-muted)] bg-[var(--overlay-dim)] border-[var(--border-color)]',
         };
       case 'error':
         return {
-          icon: <WifiOff className="h-3 w-3" />,
+          icon: <WifiOff className={compact ? 'h-4 w-4' : 'h-3 w-3'} />,
           text: '连接错误',
-          className: 'text-red-400 bg-red-400/10 border-red-400/30',
+          className:
+            'text-[rgb(242,90,90)] bg-[rgb(242,90,90)]/10 border-[rgb(242,90,90)]/30',
         };
     }
   };
@@ -39,9 +45,21 @@ export function ConnectionStatus({ status }: ConnectionStatusProps) {
 
   if (!config) return null;
 
+  if (compact) {
+    return (
+      <div
+        className={`flex h-8 w-8 items-center justify-center rounded-lg border ${config.className}`}
+        title={config.text}
+        aria-label={config.text}
+      >
+        {config.icon}
+      </div>
+    );
+  }
+
   return (
     <div
-      className={`flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs border ${config.className}`}
+      className={`inline-flex w-fit items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs ${config.className}`}
     >
       {config.icon}
       <span>{config.text}</span>
diff --git a/web/src/components/Header/ChannelSelector.tsx b/web/src/components/Header/ChannelSelector.tsx
index 6f6ab11..c9951ee 100644
--- a/web/src/components/Header/ChannelSelector.tsx
+++ b/web/src/components/Header/ChannelSelector.tsx
@@ -110,11 +110,11 @@ export function ChannelSelector({
         ref={triggerRef}
         onClick={() => setIsOpen(!isOpen)}
         className={`
-          group flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm w-44 justify-between
-          transition-all duration-200 ease-out
+          group flex w-full items-center gap-2 rounded-xl border px-3 py-2 text-sm justify-between
+          transition-colors duration-200 ease-out
           ${
             isOpen
-              ? 'border-[var(--accent-cyan)]/40 bg-[var(--overlay-subtle)] shadow-[0_0_12px_var(--shadow-glow-sm)]'
+              ? 'border-[var(--border-accent)] bg-[var(--overlay-subtle)]'
               : 'border-[var(--border-color)] hover:border-[var(--border-accent)] hover:bg-[var(--overlay-hover)]'
           }
         `}
@@ -128,7 +128,7 @@ export function ChannelSelector({
         </span>
 
         {/* Channel name */}
-        <span className="flex-1 min-w-0 text-[var(--text-primary)] font-medium text-xs tracking-wide truncate text-center">
+        <span className="flex-1 min-w-0 text-[var(--text-primary)] text-[13px] truncate text-left">
           {selected?.name || '选择通道'}
         </span>
 
@@ -137,9 +137,7 @@ export function ChannelSelector({
           {selected ? (
             <span
               className={`h-1.5 w-1.5 rounded-full ${
-                selected.isWritable
-                  ? 'bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.5)]'
-                  : 'bg-zinc-500'
+                selected.isWritable ? 'bg-[var(--accent-green)]' : 'bg-[var(--text-muted)]'
               }`}
             />
           ) : (
@@ -203,7 +201,7 @@ export function ChannelSelector({
                           className={`
                           absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 rounded-r-full
                           transition-all duration-200
-                          ${isActive ? 'bg-[var(--accent-cyan)] shadow-[0_0_8px_var(--accent-cyan)]' : 'bg-transparent'}
+                          ${isActive ? 'bg-[var(--accent-cyan)]' : 'bg-transparent'}
                         `}
                         />
 
@@ -243,10 +241,9 @@ export function ChannelSelector({
                           transition-all duration-200
                           ${
                             channel.isWritable
-                              ? 'bg-emerald-400/10 text-emerald-400'
-                              : 'bg-zinc-500/10 text-zinc-500'
+                              ? 'bg-[var(--accent-green)]/10 text-[var(--accent-green)]'
+                              : 'bg-[var(--overlay-dim)] text-[var(--text-muted)]'
                           }
-                          ${isActive && channel.isWritable ? 'bg-emerald-400/15' : ''}
                         `}
                         >
                           {channel.isWritable ? (
diff --git a/web/src/components/Header/SessionSelector.tsx b/web/src/components/Header/SessionSelector.tsx
index 2c119be..2a2be81 100644
--- a/web/src/components/Header/SessionSelector.tsx
+++ b/web/src/components/Header/SessionSelector.tsx
@@ -80,19 +80,19 @@ export function SessionSelector({
         onClick={() => setIsOpen(!isOpen)}
         disabled={sessions.length <= 1}
         className={`
-          group flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm w-44 justify-between
-          transition-all duration-200 ease-out
+          group flex w-full items-center gap-2 rounded-xl border px-3 py-2 text-sm justify-between
+          transition-colors duration-200 ease-out
           ${
             sessions.length <= 1
               ? 'border-[var(--border-color)] cursor-default'
               : isOpen
-                ? 'border-[var(--accent-cyan)]/40 bg-[var(--overlay-subtle)] shadow-[0_0_12px_var(--shadow-glow-sm)]'
+                ? 'border-[var(--border-accent)] bg-[var(--overlay-subtle)]'
                 : 'border-[var(--border-color)] hover:border-[var(--border-accent)] hover:bg-[var(--overlay-hover)] cursor-pointer'
           }
         `}
       >
         <MessageSquare className="h-3.5 w-3.5 flex-shrink-0 text-[var(--accent-cyan)]" />
-        <span className="flex-1 min-w-0 text-[var(--text-primary)] font-medium text-xs tracking-wide truncate text-center">
+        <span className="flex-1 min-w-0 text-[var(--text-primary)] text-[13px] truncate text-left">
           {selected?.title || '无会话'}
         </span>
         {sessions.length > 1 ? (
@@ -151,7 +151,7 @@ export function SessionSelector({
                         className={`
                         absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 rounded-r-full
                         transition-all duration-200
-                        ${isActive ? 'bg-[var(--accent-cyan)] shadow-[0_0_8px_var(--accent-cyan)]' : 'bg-transparent'}
+                        ${isActive ? 'bg-[var(--accent-cyan)]' : 'bg-transparent'}
                       `}
                       />
                       <MessageSquare
diff --git a/web/src/components/Panel/MemoryPanel.tsx b/web/src/components/Panel/MemoryPanel.tsx
index 582fc11..4b3c3dc 100644
--- a/web/src/components/Panel/MemoryPanel.tsx
+++ b/web/src/components/Panel/MemoryPanel.tsx
@@ -42,44 +42,44 @@ const NS: Record<string, NamespaceConfig> = {
   user: {
     label: '用户记忆',
     icon: User,
-    accent: 'text-cyan-400',
-    accentBorder: 'border-cyan-400/40',
+    accent: 'text-[var(--accent-cyan)]',
+    accentBorder: 'border-[var(--accent-cyan)]/40',
   },
   semantic: {
     label: '语义记忆',
     icon: Library,
-    accent: 'text-amber-400',
-    accentBorder: 'border-amber-400/40',
+    accent: 'text-[var(--accent-amber)]',
+    accentBorder: 'border-[var(--accent-amber)]/40',
   },
   episodic: {
     label: '情景记忆',
     icon: History,
-    accent: 'text-purple-400',
-    accentBorder: 'border-purple-400/40',
+    accent: 'text-[var(--accent-purple)]',
+    accentBorder: 'border-[var(--accent-purple)]/40',
   },
   skill: {
     label: '技能记忆',
     icon: Cpu,
-    accent: 'text-green-400',
-    accentBorder: 'border-green-400/40',
+    accent: 'text-[var(--accent-green)]',
+    accentBorder: 'border-[var(--accent-green)]/40',
   },
   environment: {
     label: '环境记忆',
     icon: Globe,
-    accent: 'text-sky-400',
-    accentBorder: 'border-sky-400/40',
+    accent: 'text-[var(--accent-blue)]',
+    accentBorder: 'border-[var(--accent-blue)]/40',
   },
   reflection: {
     label: '反思记忆',
     icon: Star,
-    accent: 'text-rose-400',
-    accentBorder: 'border-rose-400/40',
+    accent: 'text-[rgb(242,90,90)]',
+    accentBorder: 'border-[rgb(242,90,90)]/40',
   },
   other: {
     label: '其他',
     icon: Package,
-    accent: 'text-stone-400',
-    accentBorder: 'border-stone-400/40',
+    accent: 'text-[var(--text-muted)]',
+    accentBorder: 'border-[var(--border-color)]',
   },
 };
 
@@ -159,7 +159,7 @@ function MemoryCard({
             </button>
             <button
               onClick={handleDelete}
-              className={`p-1 rounded hover:bg-red-500/10 ${confirmDelete ? 'text-red-400' : 'text-[var(--text-muted)]'} hover:text-red-400 transition-colors`}
+              className={`p-1 rounded hover:bg-[rgb(242,90,90)]/10 ${confirmDelete ? 'text-[rgb(242,90,90)]' : 'text-[var(--text-muted)]'} hover:text-[rgb(242,90,90)] transition-colors`}
               title={confirmDelete ? '再次点击确认删除' : '删除'}
             >
               <Trash2 className="h-3 w-3" />
diff --git a/web/src/components/Panel/SkillList.tsx b/web/src/components/Panel/SkillList.tsx
index 96dc839..5c05f09 100644
--- a/web/src/components/Panel/SkillList.tsx
+++ b/web/src/components/Panel/SkillList.tsx
@@ -24,12 +24,12 @@ interface SourceConfig {
 }
 
 const SOURCE_CONFIG: Record<string, SourceConfig> = {
-  user: { label: '用户技能', icon: User, accent: 'text-cyan-400' },
-  useragent: { label: '用户 Agent', icon: User, accent: 'text-cyan-400' },
-  useropenclaw: { label: '用户 OpenClaw', icon: User, accent: 'text-cyan-400' },
-  project: { label: '项目技能', icon: Folder, accent: 'text-amber-400' },
-  projectagent: { label: '项目 Agent', icon: Folder, accent: 'text-amber-400' },
-  projectopenclaw: { label: '项目 OpenClaw', icon: Folder, accent: 'text-amber-400' },
+  user: { label: '用户技能', icon: User, accent: 'text-[var(--accent-cyan)]' },
+  useragent: { label: '用户 Agent', icon: User, accent: 'text-[var(--accent-cyan)]' },
+  useropenclaw: { label: '用户 OpenClaw', icon: User, accent: 'text-[var(--accent-cyan)]' },
+  project: { label: '项目技能', icon: Folder, accent: 'text-[var(--accent-amber)]' },
+  projectagent: { label: '项目 Agent', icon: Folder, accent: 'text-[var(--accent-amber)]' },
+  projectopenclaw: { label: '项目 OpenClaw', icon: Folder, accent: 'text-[var(--accent-amber)]' },
 };
 
 function sourceConfig(source: string): SourceConfig {
diff --git a/web/src/components/Panel/TodoPanel.tsx b/web/src/components/Panel/TodoPanel.tsx
index a9b0160..32e0eb0 100644
--- a/web/src/components/Panel/TodoPanel.tsx
+++ b/web/src/components/Panel/TodoPanel.tsx
@@ -18,9 +18,9 @@ interface StatusCfg {
 }
 
 const STATUS: Record<string, StatusCfg> = {
-  in_progress: { label: '进行中', color: 'text-amber-400', dot: 'bg-amber-400' },
+  in_progress: { label: '进行中', color: 'text-[var(--accent-amber)]', dot: 'bg-[var(--accent-amber)]' },
   pending: { label: '待处理', color: 'text-slate-400', dot: 'bg-slate-500' },
-  completed: { label: '已完成', color: 'text-emerald-400', dot: 'bg-emerald-400' },
+  completed: { label: '已完成', color: 'text-[var(--accent-green)]', dot: 'bg-[var(--accent-green)]' },
   cancelled: { label: '已取消', color: 'text-slate-500', dot: 'bg-slate-600' },
 };
 
@@ -45,8 +45,8 @@ function groupTodos(todos: TodoItemSummary[]): Map<string, TodoItemSummary[]> {
 function PulseDot() {
   return (
     <span className="relative flex h-1.5 w-1.5 shrink-0">
-      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75" />
-      <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-amber-400" />
+      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--accent-amber)] opacity-75" />
+      <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[var(--accent-amber)]" />
     </span>
   );
 }
diff --git a/web/src/components/Panel/ToolPanel.tsx b/web/src/components/Panel/ToolPanel.tsx
index b2c45dd..1b00946 100644
--- a/web/src/components/Panel/ToolPanel.tsx
+++ b/web/src/components/Panel/ToolPanel.tsx
@@ -107,29 +107,29 @@ export function ToolPanel({ messages }: ToolPanelProps) {
       case 'calling':
         return {
           icon: Play,
-          iconColor: 'text-amber-400',
-          bgClass: 'bg-amber-400',
-          borderClass: 'border-amber-500/30',
+          iconColor: 'text-[var(--accent-amber)]',
+          bgClass: 'bg-[var(--accent-amber)]',
+          borderClass: 'border-[var(--accent-amber)]/30',
           label: '执行中',
-          labelClass: 'text-amber-400',
+          labelClass: 'text-[var(--accent-amber)]',
         };
       case 'result':
         return {
           icon: Check,
-          iconColor: 'text-emerald-400',
-          bgClass: 'bg-emerald-400',
-          borderClass: 'border-emerald-500/30',
+          iconColor: 'text-[var(--accent-green)]',
+          bgClass: 'bg-[var(--accent-green)]',
+          borderClass: 'border-[var(--accent-green)]/30',
           label: '已完成',
-          labelClass: 'text-emerald-400',
+          labelClass: 'text-[var(--accent-green)]',
         };
       case 'pending':
         return {
           icon: AlertTriangle,
-          iconColor: 'text-orange-400',
-          bgClass: 'bg-orange-400',
-          borderClass: 'border-orange-500/30',
+          iconColor: 'text-[var(--accent-amber)]',
+          bgClass: 'bg-[var(--accent-amber)]',
+          borderClass: 'border-[var(--accent-amber)]/30',
           label: '待确认',
-          labelClass: 'text-orange-400',
+          labelClass: 'text-[var(--accent-amber)]',
         };
     }
   };
diff --git a/web/src/components/Panel/TopicTokenStatsPanel.tsx b/web/src/components/Panel/TopicTokenStatsPanel.tsx
index f2792d3..fcfbffd 100644
--- a/web/src/components/Panel/TopicTokenStatsPanel.tsx
+++ b/web/src/components/Panel/TopicTokenStatsPanel.tsx
@@ -77,10 +77,10 @@ export function TopicTokenStatsPanel({ tokenStats }: TopicTokenStatsPanelProps)
             <div
               className={`h-full rounded-full transition-all ${
                 pct >= 80
-                  ? 'bg-red-400'
+                  ? 'bg-[rgb(242,90,90)]'
                   : pct >= 50
-                    ? 'bg-amber-400'
-                    : 'bg-emerald-400'
+                    ? 'bg-[var(--accent-amber)]'
+                    : 'bg-[var(--accent-green)]'
               }`}
               style={{ width: `${pct}%` }}
             />
diff --git a/web/src/components/Settings/ConfigPage.tsx b/web/src/components/Settings/ConfigPage.tsx
index 638260e..87720ba 100644
--- a/web/src/components/Settings/ConfigPage.tsx
+++ b/web/src/components/Settings/ConfigPage.tsx
@@ -175,7 +175,7 @@ export function ConfigPage({ onClose, onSaveConnection, initialTab }: ConfigPage
   if (!config)
     return (
       <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
-        <div className="text-red-400 text-center space-y-3">
+        <div className="text-[rgb(242,90,90)] text-center space-y-3">
           <AlertTriangle className="h-10 w-10 mx-auto" />
           <p>{error || '加载失败'}</p>
           <button
@@ -227,9 +227,9 @@ export function ConfigPage({ onClose, onSaveConnection, initialTab }: ConfigPage
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-[fadeIn_0.15s_ease-out]">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fade-in">
       <div
-        className="relative flex flex-col w-[92vw] max-w-4xl h-[85vh] rounded-2xl border border-[var(--border-color)] bg-[var(--bg-primary)] shadow-2xl overflow-hidden animate-[scaleIn_0.2s_ease-out]"
+        className="relative flex flex-col w-[92vw] max-w-4xl h-[85vh] rounded-2xl border border-[var(--border-color)] bg-[var(--bg-primary)] shadow-2xl overflow-hidden animate-scale-in"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
@@ -237,7 +237,7 @@ export function ConfigPage({ onClose, onSaveConnection, initialTab }: ConfigPage
           <Settings className="h-5 w-5 text-[var(--accent-cyan)]" />
           <span className="text-lg font-semibold text-[var(--text-primary)]">系统配置</span>
           {dirty && (
-            <span className="text-xs text-amber-400 bg-amber-500/10 px-2 py-0.5 rounded-full">
+            <span className="text-xs text-[var(--accent-amber)] bg-[var(--accent-amber)]/10 px-2 py-0.5 rounded-full">
               未保存
             </span>
           )}
@@ -267,9 +267,9 @@ export function ConfigPage({ onClose, onSaveConnection, initialTab }: ConfigPage
                     <button
                       key={tab.id}
                       onClick={() => setActiveTab(tab.id)}
-                      className={`w-full flex items-center gap-2.5 px-4 py-2.5 text-sm transition-all relative ${
+                      className={`w-full flex items-center gap-2.5 px-4 py-2.5 text-sm rounded-lg transition-colors relative ${
                         active
-                          ? 'text-[var(--accent-cyan)] bg-[var(--accent-cyan)]/5'
+                          ? 'text-[var(--text-primary)] bg-[var(--overlay-subtle)] font-medium'
                           : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--overlay-hover)]'
                       }`}
                     >
@@ -293,7 +293,7 @@ export function ConfigPage({ onClose, onSaveConnection, initialTab }: ConfigPage
 
         {/* Footer */}
         <div className="shrink-0 px-6 py-3 border-t border-[var(--border-color)] bg-[var(--bg-secondary)]/80 backdrop-blur-md flex items-center gap-3">
-          {error && <span className="text-sm text-red-400 truncate max-w-xs">{error}</span>}
+          {error && <span className="text-sm text-[rgb(242,90,90)] truncate max-w-xs">{error}</span>}
           <div className="flex-1" />
           <button
             onClick={handleClose}
@@ -304,7 +304,7 @@ export function ConfigPage({ onClose, onSaveConnection, initialTab }: ConfigPage
           <button
             onClick={handleSave}
             disabled={saving || restarting || !dirty}
-            className="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium text-white bg-[var(--accent-cyan)]/20 border border-[var(--accent-cyan)]/30 hover:bg-[var(--accent-cyan)]/30 hover:border-[var(--accent-cyan)]/50 transition-all disabled:opacity-40 disabled:cursor-not-allowed"
+            className="flex items-center gap-2 px-5 py-2 rounded-xl text-sm font-medium text-white bg-[var(--accent-cyan)] hover:opacity-90 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed"
           >
             {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
             {saving ? '保存中...' : '保存配置'}
@@ -322,7 +322,7 @@ export function ConfigPage({ onClose, onSaveConnection, initialTab }: ConfigPage
 
         {/* Toast */}
         {toast && (
-          <div className="absolute top-20 left-1/2 -translate-x-1/2 z-10 flex items-center gap-2 px-5 py-3 rounded-xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-400 text-sm shadow-lg backdrop-blur-md animate-[fadeIn_0.2s_ease-out]">
+          <div className="absolute top-20 left-1/2 -translate-x-1/2 z-10 flex items-center gap-2 px-5 py-3 rounded-xl bg-[var(--accent-green)]/15 border border-[var(--accent-green)]/30 text-[var(--accent-green)] text-sm shadow-lg backdrop-blur-md animate-fade-in">
             {restarting ? (
               <Loader2 className="h-4 w-4 animate-spin" />
             ) : (
@@ -335,7 +335,7 @@ export function ConfigPage({ onClose, onSaveConnection, initialTab }: ConfigPage
         {/* Restart confirmation dialog */}
         {restartDialogMode && (
           <div className="absolute inset-0 z-20 flex items-center justify-center bg-black/50 backdrop-blur-sm rounded-2xl">
-            <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-xl p-6 max-w-sm mx-4 shadow-2xl animate-[scaleIn_0.2s_ease-out]">
+            <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-xl p-6 max-w-sm mx-4 shadow-2xl animate-scale-in">
               <div className="flex items-center gap-3 mb-4">
                 <div className="flex items-center justify-center w-10 h-10 rounded-full bg-[var(--accent-cyan)]/10">
                   <RefreshCw className="h-5 w-5 text-[var(--accent-cyan)]" />
@@ -362,7 +362,7 @@ export function ConfigPage({ onClose, onSaveConnection, initialTab }: ConfigPage
                 </button>
                 <button
                   onClick={handleRestart}
-                  className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white bg-[var(--accent-cyan)]/20 border border-[var(--accent-cyan)]/30 hover:bg-[var(--accent-cyan)]/30 hover:border-[var(--accent-cyan)]/50 transition-all"
+                  className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium text-white bg-[var(--accent-cyan)] hover:opacity-90 transition-opacity"
                 >
                   <RefreshCw className="h-4 w-4" />
                   立即重启
diff --git a/web/src/components/Settings/constants.ts b/web/src/components/Settings/constants.ts
index 13472a3..d442ec7 100644
--- a/web/src/components/Settings/constants.ts
+++ b/web/src/components/Settings/constants.ts
@@ -68,7 +68,7 @@ export const TAB_GROUPS: TabGroup[] = [
 export const TABS: TabDef[] = TAB_GROUPS.flatMap((g) => g.tabs);
 
 export const inputCls =
-  'w-full px-3 py-2 rounded-lg bg-[var(--bg-tertiary)] border border-[var(--border-color)] text-[var(--text-primary)] text-sm placeholder:text-[var(--text-muted)] focus:outline-none focus:border-[var(--accent-cyan)] focus:ring-1 focus:ring-[var(--focus-ring)] transition-colors';
+  'w-full px-3 py-2 rounded-xl bg-[var(--surface-input)] border border-[var(--border-color)] text-[var(--text-primary)] text-sm placeholder:text-[var(--text-muted)] focus:outline-none focus:border-[var(--border-accent)] focus:ring-2 focus:ring-[var(--focus-ring)] transition-colors';
 export const selectCls = inputCls;
 
 export const TIMEZONE_OPTIONS: { value: string; label: string }[] = [
diff --git a/web/src/components/Settings/modals/ExpertModal.tsx b/web/src/components/Settings/modals/ExpertModal.tsx
index 178e92c..b151b0b 100644
--- a/web/src/components/Settings/modals/ExpertModal.tsx
+++ b/web/src/components/Settings/modals/ExpertModal.tsx
@@ -145,7 +145,7 @@ export function ExpertModal({ draft, onClose, onSaved, setToast }: Props) {
       onClick={onClose}
     >
       <div
-        className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-xl w-[90%] max-w-3xl mx-4 shadow-2xl animate-[scaleIn_0.2s_ease-out] max-h-[90%] flex flex-col overflow-hidden"
+        className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-xl w-[90%] max-w-3xl mx-4 shadow-2xl animate-scale-in max-h-[90%] flex flex-col overflow-hidden"
         onClick={(e) => e.stopPropagation()}
       >
         <ModalHeader
diff --git a/web/src/components/Settings/modals/SubagentModal.tsx b/web/src/components/Settings/modals/SubagentModal.tsx
index 7831825..a9dd566 100644
--- a/web/src/components/Settings/modals/SubagentModal.tsx
+++ b/web/src/components/Settings/modals/SubagentModal.tsx
@@ -173,7 +173,7 @@ export function SubagentModal({ draft, onClose, onSaved, setToast }: Props) {
       onClick={onClose}
     >
       <div
-        className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-xl w-[90%] max-w-3xl mx-4 shadow-2xl animate-[scaleIn_0.2s_ease-out] max-h-[90%] flex flex-col overflow-hidden"
+        className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-xl w-[90%] max-w-3xl mx-4 shadow-2xl animate-scale-in max-h-[90%] flex flex-col overflow-hidden"
         onClick={(e) => e.stopPropagation()}
       >
         <ModalHeader
diff --git a/web/src/components/Settings/shared.tsx b/web/src/components/Settings/shared.tsx
index 081d2aa..b965842 100644
--- a/web/src/components/Settings/shared.tsx
+++ b/web/src/components/Settings/shared.tsx
@@ -30,7 +30,7 @@ export function AddButton({ label, onClick }: { label: string; onClick: () => vo
 export function ErrorBanner({ children }: { children: ReactNode }) {
   if (!children) return null;
   return (
-    <div className="text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2">
+    <div className="text-sm text-[rgb(242,90,90)] bg-[rgb(242,90,90)]/10 border border-[rgb(242,90,90)]/25 rounded-lg px-3 py-2">
       {children}
     </div>
   );
diff --git a/web/src/components/Settings/tabs/ExpertsTab.tsx b/web/src/components/Settings/tabs/ExpertsTab.tsx
index d7c4fe6..807ee02 100644
--- a/web/src/components/Settings/tabs/ExpertsTab.tsx
+++ b/web/src/components/Settings/tabs/ExpertsTab.tsx
@@ -138,7 +138,7 @@ export function ExpertsTab({ config, update, setToast }: Props) {
                     </button>
                     <button
                       onClick={() => handleDelete(expert.name)}
-                      className="p-1 rounded text-[var(--text-muted)] hover:text-red-400 hover:bg-red-500/10 transition-colors"
+                      className="p-1 rounded text-[var(--text-muted)] hover:text-[rgb(242,90,90)] hover:bg-[rgb(242,90,90)]/10 transition-colors"
                       title="删除"
                     >
                       <Trash2 className="h-3.5 w-3.5" />
diff --git a/web/src/components/Settings/tabs/McpTab.tsx b/web/src/components/Settings/tabs/McpTab.tsx
index 6e206c1..aa6b931 100644
--- a/web/src/components/Settings/tabs/McpTab.tsx
+++ b/web/src/components/Settings/tabs/McpTab.tsx
@@ -84,7 +84,7 @@ export function McpTab({ config, update, setToast }: Props) {
             </span>
           </div>
           {mcpStatus.failed_servers > 0 && (
-            <span className="text-red-400">{mcpStatus.failed_servers} 失败</span>
+            <span className="text-[rgb(242,90,90)]">{mcpStatus.failed_servers} 失败</span>
           )}
           <span className="text-[var(--text-muted)]">{mcpStatus.total_tools} 个工具</span>
           <button
@@ -111,10 +111,10 @@ export function McpTab({ config, update, setToast }: Props) {
                   </span>
                 ) : st.error ? (
                   <span
-                    className="inline-flex items-center gap-1 text-xs text-red-400"
+                    className="inline-flex items-center gap-1 text-xs text-[rgb(242,90,90)]"
                     title={st.error}
                   >
-                    <span className="w-2 h-2 rounded-full bg-red-400" /> 错误
+                    <span className="w-2 h-2 rounded-full bg-[rgb(242,90,90)]" /> 错误
                   </span>
                 ) : (
                   <span className="inline-flex items-center gap-1 text-xs text-gray-400">
diff --git a/web/src/components/Settings/tabs/SubagentsTab.tsx b/web/src/components/Settings/tabs/SubagentsTab.tsx
index 441751b..3b16212 100644
--- a/web/src/components/Settings/tabs/SubagentsTab.tsx
+++ b/web/src/components/Settings/tabs/SubagentsTab.tsx
@@ -52,8 +52,8 @@ function ToolTag({
   if (!tools || tools.length === 0) return null;
   const tagCls =
     tone === 'allow'
-      ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-      : 'bg-rose-500/10 text-rose-600 dark:text-rose-400';
+      ? 'bg-[var(--accent-green)]/10 text-[var(--accent-green)]'
+      : 'bg-[rgb(242,90,90)]/10 text-[rgb(242,90,90)]';
   return (
     <div className="flex items-center gap-1 flex-wrap mt-1">
       <span className="text-[10px] text-[var(--text-muted)]">{label}:</span>
@@ -235,7 +235,7 @@ export function SubagentsTab({ config, update, setToast }: Props) {
                         </button>
                         <button
                           onClick={() => handleDelete(subagent.name)}
-                          className="p-1 rounded text-[var(--text-muted)] hover:text-red-400 hover:bg-red-500/10 transition-colors"
+                          className="p-1 rounded text-[var(--text-muted)] hover:text-[rgb(242,90,90)] hover:bg-[rgb(242,90,90)]/10 transition-colors"
                           title="删除"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
diff --git a/web/src/components/Settings/ui.tsx b/web/src/components/Settings/ui.tsx
index 2d41d97..8c11197 100644
--- a/web/src/components/Settings/ui.tsx
+++ b/web/src/components/Settings/ui.tsx
@@ -401,7 +401,7 @@ export function MapEntryHeader({
       <div className="flex-1" />
       <button
         onClick={onDelete}
-        className="p-1 rounded text-red-400/60 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+        className="p-1 rounded text-[rgb(242,90,90)]/60 hover:text-[rgb(242,90,90)] hover:bg-[rgb(242,90,90)]/10 transition-colors"
       >
         <Trash2 className="h-3.5 w-3.5" />
       </button>
diff --git a/web/src/components/Sidebar/SchedulerJobList.tsx b/web/src/components/Sidebar/SchedulerJobList.tsx
index e7b1bd7..3c1eb31 100644
--- a/web/src/components/Sidebar/SchedulerJobList.tsx
+++ b/web/src/components/Sidebar/SchedulerJobList.tsx
@@ -23,31 +23,31 @@ function stateBadge(state: string): { label: string; color: string; pulse: boole
     case 'running':
       return {
         label: '执行中',
-        color: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
+        color: 'bg-[var(--accent-amber)]/15 text-[var(--accent-amber)] border-[var(--accent-amber)]/30',
         pulse: true,
       };
     case 'scheduled':
       return {
         label: '已调度',
-        color: 'bg-amber-500/15 text-amber-300 border-amber-500/20',
+        color: 'bg-[var(--accent-amber)]/10 text-[var(--accent-amber)] border-[var(--accent-amber)]/20',
         pulse: false,
       };
     case 'paused':
       return {
         label: '已暂停',
-        color: 'bg-zinc-500/20 text-zinc-400 border-zinc-500/30',
+        color: 'bg-[var(--overlay-dim)] text-[var(--text-muted)] border-[var(--border-color)]',
         pulse: false,
       };
     case 'completed':
       return {
         label: '已完成',
-        color: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
+        color: 'bg-[var(--accent-green)]/15 text-[var(--accent-green)] border-[var(--accent-green)]/30',
         pulse: false,
       };
     default:
       return {
         label: state,
-        color: 'bg-zinc-500/20 text-zinc-400 border-zinc-500/30',
+        color: 'bg-[var(--overlay-dim)] text-[var(--text-muted)] border-[var(--border-color)]',
         pulse: false,
       };
   }
@@ -84,9 +84,9 @@ function scheduleDescription(schedule: unknown): string {
 function lastStatusIcon(lastStatus: string | undefined) {
   switch (lastStatus) {
     case 'ok':
-      return <Check className="h-3 w-3 text-emerald-400" />;
+      return <Check className="h-3 w-3 text-[var(--accent-green)]" />;
     case 'error':
-      return <X className="h-3 w-3 text-red-400" />;
+      return <X className="h-3 w-3 text-[rgb(242,90,90)]" />;
     default:
       return <Minus className="h-3 w-3 text-[var(--text-muted)]" />;
   }
@@ -157,7 +157,7 @@ export function SchedulerJobList({ jobs, onRefresh, onViewJob, sessionId }: Sche
                     </div>
                     <div className="flex items-center gap-1.5 shrink-0">
                       <span
-                        className={`inline-block h-1.5 w-1.5 rounded-full ${job.enabled ? 'bg-emerald-400' : 'bg-zinc-600'}`}
+                        className={`inline-block h-1.5 w-1.5 rounded-full ${job.enabled ? 'bg-[var(--accent-green)]' : 'bg-[var(--text-muted)]'}`}
                       />
                       {hasLookup && (
                         <ChevronRight className="h-3.5 w-3.5 text-[var(--text-muted)]" />
@@ -171,7 +171,7 @@ export function SchedulerJobList({ jobs, onRefresh, onViewJob, sessionId }: Sche
                       className={`inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded border ${badge.color}`}
                     >
                       {badge.pulse && (
-                        <span className="inline-block h-1.5 w-1.5 rounded-full bg-amber-400 animate-pulse" />
+                        <span className="inline-block h-1.5 w-1.5 rounded-full bg-[var(--accent-amber)] animate-pulse" />
                       )}
                       {badge.label}
                     </span>
@@ -180,9 +180,9 @@ export function SchedulerJobList({ jobs, onRefresh, onViewJob, sessionId }: Sche
                       <span
                         className={
                           job.last_status === 'error'
-                            ? 'text-red-400'
+                            ? 'text-[rgb(242,90,90)]'
                             : job.last_status === 'ok'
-                              ? 'text-emerald-400'
+                              ? 'text-[var(--accent-green)]'
                               : 'text-[var(--text-muted)]'
                         }
                       >
@@ -199,7 +199,7 @@ export function SchedulerJobList({ jobs, onRefresh, onViewJob, sessionId }: Sche
 
                   {/* Row 3: Error message (if any) */}
                   {job.last_error && (
-                    <div className="mb-1.5 text-xs text-red-400/80 truncate bg-red-500/10 rounded px-1.5 py-0.5">
+                    <div className="mb-1.5 text-xs text-[rgb(242,90,90)] truncate bg-[rgb(242,90,90)]/10 rounded px-1.5 py-0.5">
                       {job.last_error}
                     </div>
                   )}
diff --git a/web/src/components/Sidebar/SessionInfo.tsx b/web/src/components/Sidebar/SessionInfo.tsx
index 542b728..f743c72 100644
--- a/web/src/components/Sidebar/SessionInfo.tsx
+++ b/web/src/components/Sidebar/SessionInfo.tsx
@@ -12,7 +12,7 @@ export function SessionInfo({ session, connectionId }: SessionInfoProps) {
       <div className="flex items-center gap-2 mb-3">
         <Wifi className="h-4 w-4 text-[var(--accent-cyan)]" />
         <span className="text-sm font-medium text-[var(--text-primary)]">WebSocket</span>
-        <span className="text-xs px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400">
+        <span className="text-xs px-1.5 py-0.5 rounded bg-[var(--accent-green)]/15 text-[var(--accent-green)]">
           在线
         </span>
       </div>
diff --git a/web/src/components/Sidebar/TopicList.tsx b/web/src/components/Sidebar/TopicList.tsx
index 6fe39ec..d62620c 100644
--- a/web/src/components/Sidebar/TopicList.tsx
+++ b/web/src/components/Sidebar/TopicList.tsx
@@ -158,10 +158,10 @@ export function TopicList({
           <button
             onClick={onCreateTopic}
             disabled={!sessionId}
-            className={`flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm transition-all ${
+            className={`flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm transition-colors ${
               !sessionId
                 ? 'bg-[var(--overlay-subtle)] text-[var(--text-muted)] cursor-not-allowed'
-                : 'bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)] hover:bg-[var(--accent-cyan)]/20 border border-[var(--accent-cyan)]/30'
+                : 'bg-[var(--accent-cyan)] text-white hover:opacity-90'
             }`}
           >
             <Plus className="h-4 w-4" />
@@ -215,7 +215,7 @@ export function TopicList({
                     <button
                       type="submit"
                       onMouseDown={(e) => e.preventDefault()}
-                      className="flex items-center justify-center h-6 w-6 rounded-md bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30 transition-colors shrink-0"
+                      className="flex items-center justify-center h-6 w-6 rounded-md bg-[var(--accent-green)]/15 text-[var(--accent-green)] hover:bg-[var(--accent-green)]/25 transition-colors shrink-0"
                       title="确认 (Enter)"
                     >
                       <Check className="h-3.5 w-3.5" />
@@ -224,7 +224,7 @@ export function TopicList({
                       type="button"
                       onMouseDown={(e) => e.preventDefault()}
                       onClick={cancelEdit}
-                      className="flex items-center justify-center h-6 w-6 rounded-md bg-zinc-500/20 text-zinc-400 hover:bg-zinc-500/30 transition-colors shrink-0"
+                      className="flex items-center justify-center h-6 w-6 rounded-md bg-[var(--overlay-subtle)] text-[var(--text-muted)] hover:bg-[var(--overlay-medium)] transition-colors shrink-0"
                       title="取消 (Esc)"
                     >
                       <X className="h-3.5 w-3.5" />
@@ -234,21 +234,21 @@ export function TopicList({
                   <>
                     <button
                       onClick={() => onSwitchTopic(topic.id)}
-                      className={`w-full rounded-xl pl-3 pr-8 py-3 text-left text-sm transition-all ${
+                      className={`w-full rounded-xl pl-3 pr-8 py-3 text-left text-sm transition-colors ${
                         topic.id === currentTopicId
-                          ? 'bg-gradient-to-r from-[var(--accent-cyan)]/20 to-transparent border border-[var(--accent-cyan)]/30'
+                          ? 'bg-[var(--overlay-subtle)] border border-[var(--border-color)]'
                           : 'hover:bg-[var(--overlay-hover)] border border-transparent'
                       }`}
                     >
                       <div className="flex items-start gap-3">
-                        <span className="mt-0.5 text-xs text-[var(--text-muted)] font-mono w-4">
+                        <span className="mt-0.5 text-xs text-[var(--text-muted)] w-4">
                           {currentPage * pageSize + index + 1}
                         </span>
                         <div className="min-w-0 flex-1">
                           <div
                             className={`truncate font-medium ${
                               topic.id === currentTopicId
-                                ? 'text-[var(--accent-cyan)]'
+                                ? 'text-[var(--text-primary)]'
                                 : 'text-[var(--text-secondary)]'
                             }`}
                           >
@@ -266,7 +266,7 @@ export function TopicList({
                           </div>
                         </div>
                         {topic.id === currentTopicId && (
-                          <span className="inline-block h-2 w-2 rounded-full bg-[var(--accent-cyan)] shadow-lg shadow-[var(--shadow-glow-soft)] mt-1.5" />
+                          <span className="inline-block h-2 w-2 rounded-full bg-[var(--accent-cyan)] mt-1.5" />
                         )}
                       </div>
                     </button>
@@ -275,14 +275,16 @@ export function TopicList({
                     <div className="absolute top-2.5 right-2.5">
                       {confirmDeleteId === topic.id ? (
                         <span className="flex items-center gap-1.5 rounded-lg bg-[var(--bg-tertiary)] border border-[var(--border-color)] px-2 py-1 shadow-lg animate-scale-in">
-                          <span className="text-xs text-red-400 whitespace-nowrap">确认删除?</span>
+                          <span className="text-xs text-[rgb(242,90,90)] whitespace-nowrap">
+                            确认删除?
+                          </span>
                           <button
                             onClick={(e) => {
                               e.stopPropagation();
                               onDeleteTopic(topic.id);
                               setConfirmDeleteId(null);
                             }}
-                            className="flex items-center justify-center h-5 w-5 rounded bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30 transition-colors"
+                            className="flex items-center justify-center h-5 w-5 rounded bg-[var(--accent-green)]/15 text-[var(--accent-green)] hover:bg-[var(--accent-green)]/25 transition-colors"
                             title="确认"
                           >
                             <Check className="h-3 w-3" />
@@ -292,7 +294,7 @@ export function TopicList({
                               e.stopPropagation();
                               setConfirmDeleteId(null);
                             }}
-                            className="flex items-center justify-center h-5 w-5 rounded bg-zinc-500/20 text-zinc-400 hover:bg-zinc-500/30 transition-colors"
+                            className="flex items-center justify-center h-5 w-5 rounded bg-[var(--overlay-subtle)] text-[var(--text-muted)] hover:bg-[var(--overlay-medium)] transition-colors"
                             title="取消"
                           >
                             <X className="h-3 w-3" />
@@ -305,7 +307,7 @@ export function TopicList({
                               e.stopPropagation();
                               startEdit(topic);
                             }}
-                            className="flex items-center justify-center h-6 w-6 rounded-md text-[var(--text-muted)] hover:text-[var(--accent-cyan)] hover:bg-[var(--accent-cyan)]/10 transition-colors"
+                            className="flex items-center justify-center h-6 w-6 rounded-md text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--overlay-hover)] transition-colors"
                             title="重命名话题"
                           >
                             <Edit2 className="h-3.5 w-3.5" />
@@ -315,7 +317,7 @@ export function TopicList({
                               e.stopPropagation();
                               setConfirmDeleteId(topic.id);
                             }}
-                            className="flex items-center justify-center h-6 w-6 rounded-md text-[var(--text-muted)] hover:text-red-400 hover:bg-red-500/10 transition-colors"
+                            className="flex items-center justify-center h-6 w-6 rounded-md text-[var(--text-muted)] hover:text-[rgb(242,90,90)] hover:bg-[rgb(242,90,90)]/10 transition-colors"
                             title="删除话题"
                           >
                             <Trash2 className="h-3.5 w-3.5" />
diff --git a/web/src/index.css b/web/src/index.css
index 93fda98..369ea1b 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -2,54 +2,62 @@
 
 /* ============================================
    PicoBot Theme — Dark (default)
+   对齐 deepseek-harness 设计语言
+   （--accent-cyan 语义为品牌主色 DeepSeek blue）
    ============================================ */
 :root {
   /* Core colors */
-  --bg-primary: #0a0a0f;
-  --bg-secondary: #12121a;
-  --bg-tertiary: #1a1a25;
-  --bg-hover: #252535;
+  --bg-primary: rgb(35, 35, 36);
+  --bg-secondary: rgb(27, 27, 28);
+  --bg-tertiary: rgb(44, 44, 46);
+  --bg-hover: rgba(255, 255, 255, 0.08);
 
   /* Accent colors */
-  --accent-cyan: #00f0ff;
-  --accent-blue: #3b82f6;
-  --accent-purple: #8b5cf6;
-  --accent-green: #10b981;
-  --accent-amber: #f59e0b;
+  --accent-cyan: rgb(103, 158, 254);
+  --accent-blue: rgb(96, 165, 250);
+  --accent-purple: rgb(183, 200, 254);
+  --accent-green: rgb(78, 209, 126);
+  --accent-amber: rgb(247, 173, 49);
 
   /* Text colors */
-  --text-primary: #ffffff;
-  --text-secondary: #a1a1aa;
-  --text-muted: #71717a;
+  --text-primary: rgb(249, 250, 251);
+  --text-secondary: rgb(207, 211, 214);
+  --text-muted: rgb(151, 157, 166);
   --text-accent: var(--accent-cyan);
 
   /* Border */
-  --border-color: rgba(255, 255, 255, 0.08);
-  --border-accent: rgba(0, 240, 255, 0.3);
+  --border-color: rgba(255, 255, 255, 0.12);
+  --border-accent: rgba(103, 158, 254, 0.4);
 
   /* Overlay — for hover / subtle surface effects */
-  --overlay-hover: rgba(255, 255, 255, 0.05);
-  --overlay-subtle: rgba(255, 255, 255, 0.1);
-  --overlay-medium: rgba(255, 255, 255, 0.2);
+  --overlay-hover: rgba(255, 255, 255, 0.08);
+  --overlay-subtle: rgba(255, 255, 255, 0.14);
+  --overlay-medium: rgba(255, 255, 255, 0.24);
   --overlay-dim: rgba(0, 0, 0, 0.2);
   --overlay-dim-strong: rgba(0, 0, 0, 0.3);
   --overlay-dim-heavy: rgba(0, 0, 0, 0.4);
   --overlay-code: rgba(0, 0, 0, 0.3);
 
   /* Shadows */
-  --shadow-glow-sm: rgba(0, 240, 255, 0.12);
-  --shadow-glow: rgba(0, 240, 255, 0.2);
-  --shadow-glow-strong: rgba(0, 240, 255, 0.3);
-  --shadow-glow-soft: rgba(0, 240, 255, 0.5);
+  --shadow-glow-sm: rgba(103, 158, 254, 0.1);
+  --shadow-glow: rgba(103, 158, 254, 0.16);
+  --shadow-glow-strong: rgba(103, 158, 254, 0.24);
+  --shadow-glow-soft: rgba(103, 158, 254, 0.32);
 
   /* Focus ring */
-  --focus-ring: rgba(0, 240, 255, 0.2);
+  --focus-ring: rgba(103, 158, 254, 0.3);
 
   /* Selection / code highlight */
-  --selection-bg: rgba(0, 240, 255, 0.3);
+  --selection-bg: rgba(103, 158, 254, 0.28);
 
   /* Divider */
-  --divider-color: rgba(255, 255, 255, 0.2);
+  --divider-color: rgba(255, 255, 255, 0.08);
+
+  /* Chat composer / user bubble surfaces */
+  --bubble-user: rgb(44, 44, 46);
+  --surface-input: rgb(44, 44, 46);
+  --btn-contrast: rgb(249, 250, 251);
+  --btn-contrast-fg: rgb(27, 27, 28);
 
   color-scheme: dark;
 }
@@ -59,51 +67,57 @@
    ============================================ */
 html.light {
   /* Backgrounds */
-  --bg-primary: #f5f5f7;
-  --bg-secondary: #ffffff;
-  --bg-tertiary: #ebecf0;
-  --bg-hover: #dfe0e5;
+  --bg-primary: rgb(255, 255, 255);
+  --bg-secondary: rgb(249, 250, 251);
+  --bg-tertiary: rgb(241, 243, 245);
+  --bg-hover: rgba(38, 49, 72, 0.06);
 
-  /* Accents — slightly darker for readability on white */
-  --accent-cyan: #008899;
-  --accent-blue: #2563eb;
-  --accent-purple: #7c3aed;
-  --accent-green: #059669;
-  --accent-amber: #d97706;
+  /* Accents */
+  --accent-cyan: rgb(65, 118, 230);
+  --accent-blue: rgb(59, 130, 246);
+  --accent-purple: rgb(65, 118, 230);
+  --accent-green: rgb(34, 197, 94);
+  --accent-amber: rgb(245, 158, 11);
 
   /* Text */
-  --text-primary: #1a1a2e;
-  --text-secondary: #52525b;
-  --text-muted: #a1a1aa;
+  --text-primary: rgb(15, 17, 21);
+  --text-secondary: rgb(97, 102, 107);
+  --text-muted: rgb(151, 157, 166);
   --text-accent: var(--accent-cyan);
 
   /* Borders */
-  --border-color: rgba(0, 0, 0, 0.08);
-  --border-accent: rgba(0, 136, 153, 0.3);
+  --border-color: rgba(0, 0, 0, 0.1);
+  --border-accent: rgba(65, 118, 230, 0.4);
 
   /* Overlays */
-  --overlay-hover: rgba(0, 0, 0, 0.04);
-  --overlay-subtle: rgba(0, 0, 0, 0.06);
-  --overlay-medium: rgba(0, 0, 0, 0.1);
+  --overlay-hover: rgba(38, 49, 72, 0.06);
+  --overlay-subtle: rgba(38, 49, 72, 0.1);
+  --overlay-medium: rgba(38, 49, 72, 0.16);
   --overlay-dim: rgba(0, 0, 0, 0.04);
   --overlay-dim-strong: rgba(0, 0, 0, 0.06);
   --overlay-dim-heavy: rgba(0, 0, 0, 0.08);
   --overlay-code: rgba(0, 0, 0, 0.06);
 
   /* Shadows — softer */
-  --shadow-glow-sm: rgba(0, 136, 153, 0.1);
-  --shadow-glow: rgba(0, 136, 153, 0.15);
-  --shadow-glow-strong: rgba(0, 136, 153, 0.22);
-  --shadow-glow-soft: rgba(0, 136, 153, 0.35);
+  --shadow-glow-sm: rgba(65, 118, 230, 0.08);
+  --shadow-glow: rgba(65, 118, 230, 0.12);
+  --shadow-glow-strong: rgba(65, 118, 230, 0.18);
+  --shadow-glow-soft: rgba(65, 118, 230, 0.25);
 
   /* Focus ring */
-  --focus-ring: rgba(0, 136, 153, 0.2);
+  --focus-ring: rgba(65, 118, 230, 0.25);
 
   /* Selection / code highlight */
-  --selection-bg: rgba(0, 136, 153, 0.2);
+  --selection-bg: rgba(65, 118, 230, 0.2);
 
   /* Divider */
-  --divider-color: rgba(0, 0, 0, 0.1);
+  --divider-color: rgba(0, 0, 0, 0.08);
+
+  /* Chat composer / user bubble surfaces */
+  --bubble-user: rgb(237, 243, 254);
+  --surface-input: rgb(255, 255, 255);
+  --btn-contrast: rgb(67, 69, 74);
+  --btn-contrast-fg: rgb(255, 255, 255);
 
   color-scheme: light;
 }
@@ -122,6 +136,11 @@ html.theme-transitioning *::after {
     text-shadow 0.3s ease !important;
 }
 
+/* 虚拟列表行使用内联 transform 定位，主题过渡期间禁止对其做 transition，避免行位移被动画化 */
+html.theme-transitioning [data-index] {
+  transition: none !important;
+}
+
 /* ============================================
    Custom scrollbar
    ============================================ */
@@ -135,12 +154,20 @@ html.theme-transitioning *::after {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--bg-tertiary);
+  background: rgb(101, 103, 107);
   border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--accent-blue);
+  background: rgb(129, 133, 140);
+}
+
+html.light ::-webkit-scrollbar-thumb {
+  background: rgb(229, 229, 229);
+}
+
+html.light ::-webkit-scrollbar-thumb:hover {
+  background: rgb(212, 212, 212);
 }
 
 /* Hide scrollbar utility */
@@ -163,12 +190,15 @@ html.theme-transitioning *::after {
 body {
   margin: 0;
   padding: 0;
-  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto,
+    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: var(--bg-primary);
   color: var(--text-primary);
   line-height: 1.6;
+  font-size: 15px;
 }
 
 /* ============================================
@@ -180,13 +210,10 @@ body {
 }
 
 /* ============================================
-   Glowing text effect
+   Glowing text effect（DeepSeek 风格下仅保留品牌色，无发光）
    ============================================ */
 .glow-text {
-  text-shadow:
-    0 0 10px var(--shadow-glow-soft),
-    0 0 20px var(--shadow-glow-strong),
-    0 0 30px var(--shadow-glow-sm);
+  color: var(--accent-cyan);
 }
 
 /* ============================================
@@ -202,7 +229,7 @@ body {
   inset: 0;
   border-radius: inherit;
   padding: 1px;
-  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
+  background: var(--accent-cyan);
   -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
@@ -219,16 +246,10 @@ body {
 @keyframes pulse-glow {
   0%,
   100% {
-    box-shadow:
-      0 0 5px var(--accent-cyan),
-      0 0 10px var(--accent-cyan),
-      0 0 20px var(--accent-cyan);
+    box-shadow: 0 0 0 1px var(--shadow-glow);
   }
   50% {
-    box-shadow:
-      0 0 10px var(--accent-cyan),
-      0 0 20px var(--accent-cyan),
-      0 0 40px var(--accent-cyan);
+    box-shadow: 0 0 0 3px var(--shadow-glow);
   }
 }
 
@@ -330,7 +351,7 @@ body {
     background-color: transparent;
   }
   50% {
-    background-color: rgba(0, 240, 255, 0.15);
+    background-color: color-mix(in srgb, var(--accent-cyan) 15%, transparent);
   }
 }
 
@@ -405,9 +426,9 @@ body {
    Code block styling
    ============================================ */
 pre {
-  background: var(--bg-tertiary);
+  background: var(--bg-secondary);
   border: 1px solid var(--border-color);
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 12px;
   overflow-x: auto;
 }
@@ -427,6 +448,12 @@ textarea:focus {
   box-shadow: 0 0 0 2px var(--focus-ring);
 }
 
+/* Composer 内的无边框 textarea：聚焦高亮由外层卡片 focus-within 提供 */
+textarea.composer-area:focus {
+  border-color: transparent;
+  box-shadow: none;
+}
+
 /* ============================================
    Button hover effects
    ============================================ */
@@ -434,14 +461,6 @@ button {
   transition: all 0.2s ease;
 }
 
-button:hover:not(:disabled) {
-  transform: translateY(-1px);
-}
-
-button:active:not(:disabled) {
-  transform: translateY(0);
-}
-
 /* ============================================
    Link styles
    ============================================ */
@@ -452,5 +471,5 @@ a {
 }
 
 a:hover {
-  text-shadow: 0 0 8px var(--accent-cyan);
+  opacity: 0.85;
 }
diff --git a/web/src/utils/tokenStats.ts b/web/src/utils/tokenStats.ts
index 636f7aa..91b1174 100644
--- a/web/src/utils/tokenStats.ts
+++ b/web/src/utils/tokenStats.ts
@@ -17,7 +17,7 @@ export function contextOccupancyPct(stats: TopicTokenStats): number | null {
 
 /** 根据占用率返回颜色 class */
 export function occupancyColor(pct: number): string {
-  if (pct >= 80) return 'text-red-400';
-  if (pct >= 50) return 'text-amber-400';
-  return 'text-emerald-400';
+  if (pct >= 80) return 'text-[rgb(242,90,90)]';
+  if (pct >= 50) return 'text-[var(--accent-amber)]';
+  return 'text-[var(--accent-green)]';
 }