diff --git a/docs/superpowers/plans/2026-10-01-flat-ui-refresh.md b/docs/superpowers/plans/2026-10-01-flat-ui-refresh.md
new file mode 100644
index 00000000..bac4e269
--- /dev/null
+++ b/docs/superpowers/plans/2026-10-01-flat-ui-refresh.md
@@ -0,0 +1,107 @@
+# CodeSense 纯色界面改版实施计划
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 将 CodeSense 的自有页面改为统一的纯色、轻量、适应窄屏的界面，并修复 AI 编程助手的拥挤排版。
+
+**Architecture:** 继续使用 Flask/Jinja、Bootstrap 和现有 JavaScript。通过共享语义色变量及现有模板宏实现可复用组件；页面局部 CSS 只承担布局和具体内容展示。保持原有路由与数据接口不变。
+
+**Tech Stack:** Flask、Jinja2、CSS、原生 JavaScript、pytest、浏览器视觉检查。
+
+**Spec:** `docs/superpowers/specs/2026-10-01-flat-ui-refresh-design.md`
+
+## Global Constraints
+
+- 自有产品 CSS/模板不得保留 `linear-gradient(` 或 `radial-gradient(`；不修改第三方 vendor 文件。
+- 设计色：页面 `#F5F7F8`、表面 `#FFFFFF`、主文字 `#23343D`、次文字 `#64757D`、线条 `#DDE5E6`、操作 `#237B75`、强调浅底 `#EAF4F2`、输入浅底 `#F0F3F3`。
+- 不新增 React 构建或运行时；保持现有服务端渲染及 AI 聊天功能。
+- 重点检查 1440、768、390、320 CSS 像素宽度。
+
+## Review Focus
+
+1. 知识证据为空或检索失败时，紧凑面板仍显示下一步与重试入口。
+2. 长代码、表格、URL 和中文段落在 AI 回复中不撑破侧栏。
+3. 展开证据后来源与引用均可读，键盘可操作。
+4. 流式输出、快捷问题、发送与清空按钮保持可用。
+5. 对比度、焦点样式和减少动画偏好在浅色界面仍清晰。
+
+---
+
+### Task 1: 共享视觉基础
+
+**Files:**
+- Modify: `static/modern.css`
+- Modify: `templates/layout.html`
+- Test: `tests/test_flat_ui_contract.py`
+
+**Interfaces:**
+- Produces CSS variables `--cs-bg`, `--cs-surface`, `--cs-ink`, `--cs-muted`, `--cs-line`, `--cs-accent`, `--cs-accent-soft`, `--cs-input` for subsequent page CSS.
+
+- [ ] **Step 1: Write a failing static contract test** in `tests/test_flat_ui_contract.py` that reads `static/modern.css` and asserts the exact semantic variable/value pairs below. Check shared button, focus, surface and body rules reference these variables.
+
+```python
+EXPECTED = {
+    "--cs-bg": "#F5F7F8", "--cs-surface": "#FFFFFF",
+    "--cs-ink": "#23343D", "--cs-muted": "#64757D",
+    "--cs-line": "#DDE5E6", "--cs-accent": "#237B75",
+    "--cs-accent-soft": "#EAF4F2", "--cs-input": "#F0F3F3",
+}
+```
+- [ ] **Step 2: Run** `python -m pytest tests/test_flat_ui_contract.py -q`; expect failure from missing variables.
+- [ ] **Step 3: Implement** the variables in `:root` and replace general navigation, button, card, form and focus colors with semantic variables. Preserve existing layout and semantic error/success states.
+- [ ] **Step 4: Run** the contract test and `python -m pytest tests/test_app.py -q`; inspect failures before proceeding.
+- [ ] **Step 5: Commit** `static/modern.css`, `templates/layout.html`, and the test.
+
+### Task 2: AI 助手和知识证据
+
+**Files:**
+- Modify: `templates/submit_code.html`
+- Modify: `templates/components/knowledge_evidence.html`
+- Modify: `static/css/knowledge-evidence.css`
+- Modify: `static/css/codesense-markdown.css`
+- Test: `tests/test_knowledge_evidence_ui.py`
+- Test: `tests/test_flat_ui_contract.py`
+
+**Interfaces:**
+- Consumes Task 1 CSS variables.
+- Keeps `knowledge_evidence_panel(...)` macro signature and existing chat element IDs used by JavaScript.
+
+- [ ] **Step 1: Add a failing UI contract test** asserting the compact knowledge panel contains `<details` and `<summary`, retains `knowledge-evidence-retry`, `knowledge-evidence-citation`, and `knowledge-evidence-detail__source`, and that the submit page retains `id="ai-chat-messages"`, `id="ai-chat-input"`, `id="ai-send-button"`, and `id="clear-chat"`.
+- [ ] **Step 2: Run** `python -m pytest tests/test_knowledge_evidence_ui.py tests/test_flat_ui_contract.py -q`; expect new assertions to fail.
+- [ ] **Step 3: Implement** the flat assistant header, compact evidence summary, full-width assistant messages, restrained prompt buttons, flexible code/editor columns and mobile stacking. Use `min-width: 0`, wrapping and local overflow for code and tables. Leave full evidence mode unchanged.
+- [ ] **Step 4: Run** the two contract suites plus `python -m pytest tests/test_submission_knowledge_views.py -q`.
+- [ ] **Step 5: Check** the page at 1440, 768, 390 and 320 widths in a browser, with evidence expanded and a long AI answer. Repair observed overflow or clipped controls.
+- [ ] **Step 6: Commit** the scoped changes.
+
+### Task 3: 全站纯色迁移
+
+**Files:**
+- Modify: `static/css/action-center.css`, `static/css/thinking.css`, `static/modern.css`
+- Modify: all first-party templates currently containing gradients, as enumerated by `git grep -l -i -E 'linear-gradient\\(|radial-gradient\\(' -- 'static/*.css' 'static/**/*.css' 'templates/*.html'` excluding `static/vendor/`
+- Test: `tests/test_flat_ui_contract.py`
+
+**Interfaces:**
+- Consumes Task 1 CSS variables. No route or JavaScript API changes.
+
+- [ ] **Step 1: Extend the failing contract test** to scan first-party CSS and templates for `linear-gradient(` and `radial-gradient(`, excluding `static/vendor/`; print offending file paths and line numbers. Use `Path.rglob` rooted at `static` and `templates`, and `re.compile(r"(?:linear|radial)-gradient\\(", re.I)`.
+- [ ] **Step 2: Run** `python -m pytest tests/test_flat_ui_contract.py -q`; expect the gradient scan to fail.
+- [ ] **Step 3: Replace** each gradient by a solid semantic color: page sections use `var(--cs-bg)`, cards `var(--cs-surface)`, primary buttons `var(--cs-accent)`, selected or informational sections `var(--cs-accent-soft)`, and input areas `var(--cs-input)`. Handle hover states, overlays, inline styles and pseudo elements. Preserve semantic warning/danger colors. Remove decorative gradient-only pseudo elements instead of substituting an opaque block.
+- [ ] **Step 4: Run** the gradient scan to zero findings, then inspect at least login, student home, teacher home, class detail, feedback and admin profile at desktop and narrow widths.
+- [ ] **Step 5: Commit** first-party CSS/templates and the test.
+
+### Task 4: Final behavior and visual verification
+
+**Files:**
+- Modify only files where verification finds defects.
+
+**Interfaces:**
+- Validates all prior tasks.
+
+- [ ] **Step 1: Run** `git diff --check` and targeted UI suites (`tests/test_flat_ui_contract.py`, `tests/test_knowledge_evidence_ui.py`, `tests/test_submission_knowledge_views.py`, `tests/test_status_recovery_ui.py`).
+- [ ] **Step 2: Inspect** key pages and controls at 1440, 768, 390 and 320 widths. Verify no horizontal overflow, readable text, visible keyboard focus, working evidence expansion and chat interactions.
+- [ ] **Step 3: Compare** the code submission page with the approved Figma desktop and mobile frames; record any deliberate deviations.
+- [ ] **Step 4: Repair concrete defects, rerun only the checks affected by those repairs, and commit the final verified state.
+
+## Handoff
+
+The implementation stays on `codex/flat-ui-refresh` in the isolated worktree. Do not merge, deploy, or overwrite the user's dirty main checkout during this plan.
diff --git a/docs/superpowers/specs/2026-10-01-flat-ui-refresh-design.md b/docs/superpowers/specs/2026-10-01-flat-ui-refresh-design.md
new file mode 100644
index 00000000..2b179486
--- /dev/null
+++ b/docs/superpowers/specs/2026-10-01-flat-ui-refresh-design.md
@@ -0,0 +1,57 @@
+# CodeSense 纯色界面改版设计
+
+日期：2026-10-01
+Figma 草图：https://www.figma.com/design/NKLZ19BDlAbwveKe6tHV6k
+
+## 目标
+
+将 CodeSense 的产品界面统一为简洁、舒适、灵活的纯色视觉语言，重点解决代码提交页 AI 编程助手在窄屏上知识卡过高、回复正文过窄、引用内容挤压的问题。保留现有功能、文案语义和服务端渲染方式。
+
+## 范围
+
+- 产品自有 CSS 和 Jinja 模板中的蓝紫色系、渐变背景及相关悬停状态；不修改 Bootstrap、Monaco 等第三方资源。
+- 共用导航、按钮、卡片、表单、提示、状态标签与 AI 消息的颜色、边框、间距和焦点状态。
+- 代码提交页的桌面与窄屏助手布局，以及知识证据面板的紧凑展示。
+- 已存在渐变的登录、注册、个人资料、学生与教师首页、班级、帮助、反馈、分析等页面。按同一视觉规则调整，避免只修截图中的一页。
+
+当前 `origin/main` 中自有样式约有 57 处渐变声明，分布于 27 个文件。这是基线清单，实施时重新扫描并逐一处理。
+
+## 视觉基础
+
+| 用途 | 颜色 |
+| --- | --- |
+| 页面背景 | `#F5F7F8` |
+| 内容表面 | `#FFFFFF` |
+| 主文字 | `#23343D` |
+| 次文字 | `#64757D` |
+| 分隔线 | `#DDE5E6` |
+| 主要操作 | `#237B75` |
+| 强调浅底 | `#EAF4F2` |
+| 输入浅底 | `#F0F3F3` |
+
+保留语义性成功、警告、错误颜色，但降低饱和度并保证对比度。主要操作使用青绿色纯色；信息层级主要通过字号、留白、细边框和文字重量表达。中文正文优先使用系统可用的无衬线字族，代码继续使用等宽字族。按钮和卡片采用适度圆角，不使用大面积阴影或装饰性渐变。交互状态以纯色、边框和清晰的键盘焦点体现。
+
+## 页面与组件
+
+1. 在共享样式中定义语义化视觉变量，并让通用控件引用变量。页面局部样式可以扩展，但不再各自发明主色和渐变。
+2. 保持 Flask/Jinja、Bootstrap 和现有 JavaScript 架构。复用现有模板宏与 CSS 组件；不为视觉改版引入 React 运行时或重写路由。
+3. 代码提交页桌面布局保留编辑器与助手并列，助手提供足够阅读宽度；较窄视口改为顺序布局，避免侧栏被压到无法阅读。
+4. AI 助手顶部使用简洁标题栏。知识焦点默认显示短摘要和证据数量，证据列表可展开；回复正文占可用宽度，长词、代码、表格、引用均不得造成横向溢出。输入区在助手底部保持可见。
+5. 知识证据在其他页面仍维持完整展示；紧凑模式只改变代码提交页的呈现，不删减证据数据或来源。
+
+## 适配与可访问性
+
+- 在 1440、768、390 和约 320 CSS 像素宽度检查关键页面；内容可换行，操作按钮有足够点击面积。
+- 保持焦点可见、文字与控件对比度充足；尊重减少动画偏好。
+- 证据展开状态有语义化控件和可访问名称；现有快捷提问、发送、清空、流式消息和证据重试继续可用。
+
+## 验收
+
+- 产品自有 CSS/模板不再出现 `linear-gradient(` 或 `radial-gradient(` 声明；第三方静态资源除外。
+- AI 助手在窄屏不出现截图中的三列挤压和横向滚动，知识列表展开后可完整阅读。
+- 全站共用控件和至少登录、学生首页、教师首页、代码提交四个代表性页面视觉一致。
+- 现有相关行为测试通过；浏览器检查桌面与窄屏，确认布局和交互状态。
+
+## 发布
+
+先在独立工作区完成代码与验证，再将变更并入主分支。线上部署需要单独验证静态资源缓存和真实页面显示；Figma 是设计参照，不替代浏览器验收。
diff --git a/static/css/action-center.css b/static/css/action-center.css
index 4b7aa986..f2a07912 100644
--- a/static/css/action-center.css
+++ b/static/css/action-center.css
@@ -1,12 +1,10 @@
 .action-center-page {
     max-width: 980px;
     margin: 0 auto;
-    color: #e8eefc;
-    --action-navy: #0b1530;
-    --action-panel: #111e3e;
-    --action-line: #4ea1ff;
-    --action-muted: #a8b6d2;
-    --action-soft: rgba(78, 161, 255, 0.12);
+    color: var(--cs-ink, #23343D);
+    --action-line: #DDE5E6;
+    --action-muted: #5B6E70;
+    --action-soft: #EAF4F2;
 }
 
 .action-center-header {
@@ -16,13 +14,13 @@
     gap: 1.5rem;
     padding: 2.2rem clamp(1.25rem, 4vw, 3rem);
     border-radius: 1.25rem;
-    background: linear-gradient(120deg, var(--action-navy), #172a54 70%, #1d3a71);
-    box-shadow: 0 1rem 2.5rem rgba(13, 31, 70, 0.18);
+    background: #F1F7F5;
+    border: 1px solid var(--action-line);
 }
 
 .action-center-eyebrow {
     margin: 0 0 0.7rem;
-    color: var(--action-line);
+    color: #237B75;
     font-size: 0.72rem;
     font-weight: 800;
     letter-spacing: 0.16em;
@@ -30,7 +28,7 @@
 
 .action-center-header h1 {
     margin: 0;
-    color: #fff;
+    color: var(--cs-ink, #23343D);
     font-size: clamp(2rem, 5vw, 3.2rem);
     letter-spacing: -0.04em;
 }
@@ -46,14 +44,14 @@
     display: grid;
     min-width: 8rem;
     padding: 0.9rem 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.18);
+    border: 1px solid var(--action-line);
     border-radius: 0.9rem;
     color: var(--action-muted);
     text-align: right;
 }
 
 .action-center-totals strong {
-    color: #fff;
+    color: var(--cs-ink, #23343D);
     font-size: 2rem;
     line-height: 1;
 }
@@ -61,7 +59,7 @@
 .action-center-status {
     margin: 1.1rem 0 0;
     padding: 0.75rem 1rem;
-    border-left: 3px solid var(--action-line);
+    border-left: 3px solid #237B75;
     color: #334155;
     background: var(--action-soft);
 }
@@ -77,16 +75,16 @@
     padding: 0.5rem 0.8rem;
     border: 1px solid #cbd5e1;
     border-radius: 999px;
-    color: #1e3a8a;
+    color: #23343D;
     background: #fff;
     text-decoration: none;
 }
 
 .action-center-filter:hover,
 .action-center-filter[aria-current="page"] {
-    border-color: var(--action-line);
-    color: #08204d;
-    background: #dbeafe;
+    border-color: #237B75;
+    color: #1C625D;
+    background: #EAF4F2;
 }
 
 .action-center-filter:focus-visible,
@@ -105,7 +103,7 @@
 
 .action-center-item {
     overflow: hidden;
-    border: 1px solid #dbe4f0;
+    border: 1px solid #DDE5E6;
     border-radius: 0.9rem;
     background: #fff;
     box-shadow: 0 0.4rem 1rem rgba(15, 23, 42, 0.06);
@@ -116,7 +114,7 @@
     grid-template-columns: 0.35rem minmax(0, 1fr) auto;
     align-items: stretch;
     min-height: 5.5rem;
-    color: #172554;
+    color: #23343D;
     text-decoration: none;
 }
 
@@ -129,7 +127,7 @@
 }
 
 .action-center-item--next .action-center-item-rail {
-    background: var(--action-line);
+    background: #237B75;
 }
 
 .action-center-item-body {
@@ -152,7 +150,7 @@
 }
 
 .action-center-item-priority {
-    color: #1d4ed8;
+    color: #1C625D;
     font-weight: 800;
 }
 
@@ -163,7 +161,7 @@
 .action-center-item-arrow {
     align-self: center;
     padding: 0 1rem;
-    color: #2563eb;
+    color: #237B75;
     font-size: 1.4rem;
 }
 
diff --git a/static/css/code-editor.css b/static/css/code-editor.css
index 5af7c55e..bef09a49 100644
--- a/static/css/code-editor.css
+++ b/static/css/code-editor.css
@@ -28,7 +28,7 @@
 
 .editor-language {
     font-weight: 600;
-    color: #3b82f6;
+    color: #2E8E86;
     display: flex;
     align-items: center;
 }
@@ -65,8 +65,8 @@
 }
 
 .editor-btn.active {
-    background-color: #dbeafe;
-    color: #2563eb;
+    background-color: #EAF4F2;
+    color: #237B75;
 }
 
 /* 下拉菜单 */
@@ -155,7 +155,7 @@
     height: 40px;
     border: 3px solid #e5e7eb;
     border-radius: 50%;
-    border-top-color: #3b82f6;
+    border-top-color: #2E8E86;
     animation: spin 1s linear infinite;
 }
 
@@ -228,8 +228,8 @@
 }
 
 .code-editor.dark-theme .editor-btn.active {
-    background-color: #1e3a8a;
-    color: #60a5fa;
+    background-color: #23343D;
+    color: #78ADA6;
 }
 
 .code-editor.dark-theme .editor-textarea {
@@ -256,7 +256,7 @@
 
 .code-editor.dark-theme .spinner {
     border-color: #374151;
-    border-top-color: #60a5fa;
+    border-top-color: #78ADA6;
 }
 
 .code-editor.dark-theme .loading-text {
diff --git a/static/css/code-studio-assistant.css b/static/css/code-studio-assistant.css
new file mode 100644
index 00000000..35d775ed
--- /dev/null
+++ b/static/css/code-studio-assistant.css
@@ -0,0 +1,245 @@
+/* Code Studio assistant: a quiet reading column beside the editor. */
+.code-studio-container {
+    min-width: 0;
+}
+
+.code-studio-container > * {
+    min-width: 0;
+}
+
+.code-studio-assistant {
+    height: clamp(560px, calc(100vh - 190px), 760px);
+    min-height: 0;
+    max-height: none;
+    background: var(--cs-surface);
+    border: 1px solid var(--cs-line);
+    border-radius: 14px;
+    box-shadow: none;
+}
+
+.code-studio-assistant .ai-assistant-header {
+    min-height: 60px;
+    padding: 0.9rem 1.25rem;
+    background: var(--cs-surface);
+    color: var(--cs-ink);
+    border-bottom: 1px solid var(--cs-line);
+}
+
+.code-studio-assistant .ai-assistant-header h5 {
+    font-size: 1rem;
+}
+
+.code-studio-assistant #clear-chat {
+    color: var(--cs-muted);
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+}
+
+.code-studio-assistant #clear-chat:hover {
+    color: var(--cs-accent);
+    background: var(--cs-accent-soft);
+}
+
+.code-studio-assistant .ai-chat-messages {
+    min-width: 0;
+    min-height: 0;
+    padding: 1.25rem;
+    background: var(--cs-surface);
+    overscroll-behavior: contain;
+}
+
+.code-studio-assistant .ai-chat-messages > .knowledge-evidence-panel--compact {
+    margin: 0 0 1.25rem;
+}
+
+.code-studio-assistant .ai-message-wrapper {
+    min-width: 0;
+    gap: 0.55rem;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+}
+
+.code-studio-assistant .ai-message-avatar {
+    width: 30px;
+    height: 30px;
+    font-size: 0.95rem;
+    background: var(--cs-accent-soft);
+    color: var(--cs-accent);
+    box-shadow: none;
+    margin: 0;
+}
+
+.code-studio-assistant .ai-message-content {
+    min-width: 0;
+    max-width: calc(100% - 40px);
+    padding: 0.7rem 0.85rem;
+    background: var(--cs-surface);
+    color: var(--cs-ink);
+    border: 1px solid var(--cs-line);
+    border-radius: 10px;
+    box-shadow: none;
+    overflow-wrap: anywhere;
+}
+
+.code-studio-assistant .assistant-message .ai-message-content {
+    flex: 1 1 calc(100% - 40px);
+    max-width: calc(100% - 40px);
+    border: 0;
+    padding: 0.15rem 0;
+}
+
+.code-studio-assistant .user-message .ai-message-content {
+    max-width: min(82%, 32rem);
+    background: var(--cs-accent-soft);
+    color: var(--cs-ink);
+    border: 0;
+}
+
+.code-studio-assistant .knowledge-evidence-receipt-mount {
+    flex: 0 0 calc(100% - 40px);
+    width: calc(100% - 40px);
+    min-width: 0;
+    margin-left: 40px;
+}
+
+.code-studio-assistant #code-studio-analysis-evidence {
+    width: 100%;
+    margin: 0.75rem 0 0;
+}
+
+.code-studio-assistant .knowledge-evidence-receipt {
+    min-width: 0;
+    padding: 0.7rem 0.85rem;
+    background: var(--cs-bg);
+    border-radius: 9px;
+    color: var(--cs-muted);
+    font-size: 0.78rem;
+    overflow-wrap: anywhere;
+}
+
+.code-studio-assistant .knowledge-evidence-receipt__title {
+    margin: 0 0 0.35rem;
+    color: var(--cs-ink);
+    font-size: 0.82rem;
+    font-weight: 600;
+}
+
+.code-studio-assistant .knowledge-evidence-receipt__status p {
+    margin: 0.25rem 0 0;
+}
+
+.code-studio-assistant .knowledge-evidence-receipt__details {
+    display: grid;
+    gap: 0.35rem;
+    margin-top: 0.5rem;
+}
+
+.code-studio-assistant .knowledge-evidence-receipt__detail summary {
+    cursor: pointer;
+    overflow-wrap: anywhere;
+}
+
+.code-studio-assistant .knowledge-evidence-receipt__body {
+    padding: 0.4rem 0 0.6rem 1rem;
+}
+
+.code-studio-assistant .ai-chat-input-area {
+    padding: 0.85rem 1.25rem;
+    border-top: 1px solid var(--cs-line);
+}
+
+.code-studio-assistant .ai-chat-input-wrapper {
+    gap: 0.6rem;
+}
+
+.code-studio-assistant .ai-chat-textarea {
+    min-width: 0;
+    border: 1px solid var(--cs-line);
+    border-radius: 9px;
+    background: var(--cs-input);
+    font-size: 0.88rem;
+}
+
+.code-studio-assistant .ai-send-button {
+    width: 48px;
+    height: 48px;
+    border-radius: 9px;
+    background: var(--cs-accent);
+    box-shadow: none;
+}
+
+.code-studio-assistant .ai-send-button:hover:not(:disabled) {
+    background: #1c625d;
+    transform: none;
+    box-shadow: none;
+}
+
+.code-studio-assistant .ai-welcome-message {
+    padding: 2rem 0.5rem;
+}
+
+.code-studio-assistant .ai-welcome-icon {
+    font-size: 2rem;
+}
+
+.code-studio-assistant .ai-quick-prompts {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
+}
+
+.code-studio-assistant .ai-quick-prompt-btn {
+    border: 1px solid var(--cs-line);
+    border-radius: 8px;
+    color: var(--cs-accent);
+    box-shadow: none;
+}
+
+.code-studio-assistant .ai-quick-prompt-btn:hover {
+    color: var(--cs-ink);
+    background: var(--cs-accent-soft);
+    border-color: var(--cs-accent);
+    transform: none;
+    box-shadow: none;
+}
+
+.code-studio-assistant .ai-message-content pre,
+.code-studio-assistant .ai-message-content table {
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+@media (max-width: 991px) {
+    .code-studio-assistant {
+        height: min(720px, 82vh);
+        min-height: 520px;
+    }
+}
+
+@media (max-width: 480px) {
+    .code-studio-assistant .ai-chat-messages {
+        padding: 1rem;
+    }
+
+    .code-studio-assistant .ai-chat-input-area {
+        padding: 0.75rem 1rem;
+    }
+
+    .code-studio-assistant .ai-message-content,
+    .code-studio-assistant .assistant-message .ai-message-content {
+        max-width: calc(100% - 36px);
+    }
+
+    .code-studio-assistant .knowledge-evidence-receipt-mount {
+        flex-basis: calc(100% - 36px);
+        width: calc(100% - 36px);
+        margin-left: 36px;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .code-studio-assistant .ai-message-wrapper,
+    .code-studio-assistant .ai-send-button {
+        animation: none;
+        transition: none;
+    }
+}
diff --git a/static/css/code_submit.css b/static/css/code_submit.css
index 0938407c..72a83b23 100644
--- a/static/css/code_submit.css
+++ b/static/css/code_submit.css
@@ -63,7 +63,7 @@
     width: 18px;
     height: 18px;
     border: 2px solid #f3f3f3;
-    border-top: 2px solid #3498db;
+    border-top: 2px solid #397F79;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-right: 5px;
@@ -116,7 +116,7 @@
 
 #ask-question-btn {
     padding: 6px 15px;
-    background-color: #007bff;
+    background-color: #237B75;
     color: white;
     border: none;
     border-radius: 4px;
@@ -130,7 +130,7 @@
 }
 
 #ask-question-btn:hover {
-    background-color: #0069d9;
+    background-color: #1C625D;
 }
 
 /* 指导内容样式 */
@@ -340,9 +340,9 @@ pre:hover .copy-button {
 }
 
 .waiting-message {
-    color: #0d6efd;
+    color: #237B75;
     padding: 0.5rem;
-    border-left: 3px solid #0d6efd;
+    border-left: 3px solid #237B75;
     background-color: rgba(13, 110, 253, 0.1);
     margin: 0.5rem 0;
 }
@@ -425,7 +425,7 @@ pre:hover .copy-button {
 .simple-mode textarea.editor-textarea:focus {
     color: #212529;
     background-color: #fff;
-    border-color: #86b7fe;
+    border-color: #A9D0CA;
     outline: 0;
     box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
@@ -453,7 +453,7 @@ pre:hover .copy-button {
 
 #ai-assistance .card-title i {
     margin-right: 0.5rem;
-    color: #0d6efd;
+    color: #237B75;
 }
 
 #get-ai-advice {
diff --git a/static/css/codesense-markdown.css b/static/css/codesense-markdown.css
index e5e29ab3..65366bd6 100644
--- a/static/css/codesense-markdown.css
+++ b/static/css/codesense-markdown.css
@@ -14,9 +14,9 @@
     --cs-md-border-strong: #d7dee9;
     --cs-md-surface: #ffffff;
     --cs-md-surface-soft: #f8fafc;
-    --cs-md-surface-blue: #f3f7ff;
-    --cs-md-accent: #2563eb;
-    --cs-md-accent-soft: #dbeafe;
+    --cs-md-surface-blue: #EAF4F2;
+    --cs-md-accent: #237B75;
+    --cs-md-accent-soft: #EAF4F2;
     --cs-md-success: #059669;
     --cs-md-warning: #d97706;
     --cs-md-danger: #dc2626;
@@ -93,7 +93,7 @@
 }
 
 .cs-markdown h2 {
-    background: linear-gradient(90deg, var(--cs-md-surface-blue), rgba(243, 247, 255, 0));
+    background: var(--cs-accent-soft);
     border-left: 3px solid var(--cs-md-accent);
     border-radius: 0 6px 6px 0;
     font-size: 1.2rem;
@@ -168,8 +168,8 @@
 
 .cs-markdown blockquote.cs-md-callout-note,
 .cs-markdown blockquote.cs-md-callout-info {
-    background: #eff6ff;
-    border-left-color: #3b82f6;
+    background: #F5F7F8;
+    border-left-color: #2E8E86;
 }
 
 .cs-markdown blockquote.cs-md-callout-tip,
diff --git a/static/css/cpp-editor.css b/static/css/cpp-editor.css
index 7bef8303..7e9a063a 100644
--- a/static/css/cpp-editor.css
+++ b/static/css/cpp-editor.css
@@ -28,7 +28,7 @@
 
 .editor-language {
     font-weight: 600;
-    color: #3b82f6;
+    color: #2E8E86;
     display: flex;
     align-items: center;
 }
@@ -63,8 +63,8 @@
 }
 
 .editor-btn.active {
-    background-color: #dbeafe;
-    color: #2563eb;
+    background-color: #EAF4F2;
+    color: #237B75;
 }
 
 /* 编辑器容器 */
@@ -118,7 +118,7 @@
     height: 40px;
     border: 3px solid #e5e7eb;
     border-radius: 50%;
-    border-top-color: #3b82f6;
+    border-top-color: #2E8E86;
     animation: spin 1s linear infinite;
 }
 
diff --git a/static/css/knowledge-evidence.css b/static/css/knowledge-evidence.css
index fd6f8d3e..39f9f31d 100644
--- a/static/css/knowledge-evidence.css
+++ b/static/css/knowledge-evidence.css
@@ -1,8 +1,8 @@
 :root {
-    --knowledge-ink: #14213D;
-    --knowledge-blue: #2F80ED;
-    --knowledge-paper: #F7FAFC;
-    --knowledge-teal: #0F766E;
+    --knowledge-ink: var(--cs-ink);
+    --knowledge-blue: var(--cs-accent);
+    --knowledge-paper: var(--cs-surface);
+    --knowledge-teal: var(--cs-accent);
     --knowledge-amber: #B45309;
 }
 
@@ -11,15 +11,68 @@
     padding: 1.35rem 1.5rem;
     color: var(--knowledge-ink);
     background: var(--knowledge-paper);
-    border: 1px solid rgba(20, 33, 61, 0.16);
-    border-left: 4px solid var(--knowledge-blue);
+    border: 1px solid var(--cs-line);
     border-radius: 0.7rem;
-    box-shadow: 0 8px 24px rgba(20, 33, 61, 0.07);
+    box-shadow: none;
 }
 
 .knowledge-evidence-panel--compact {
-    margin: 1rem 0;
-    padding: 1rem 1.1rem;
+    margin: 1rem 1.25rem 0;
+    padding: 0;
+    background: var(--cs-accent-soft);
+    border: 0;
+}
+
+.knowledge-evidence-panel__compact-summary {
+    display: grid;
+    gap: 0.25rem;
+    padding: 0.85rem 1rem;
+    cursor: pointer;
+    list-style: none;
+}
+
+.knowledge-evidence-panel__compact-summary::-webkit-details-marker {
+    display: none;
+}
+
+.knowledge-evidence-panel__compact-heading {
+    color: var(--cs-ink);
+    font-size: 0.92rem;
+    font-weight: 650;
+}
+
+.knowledge-evidence-panel__compact-topics {
+    color: var(--cs-muted);
+    font-size: 0.8rem;
+    overflow-wrap: anywhere;
+}
+
+.knowledge-evidence-panel__compact-action {
+    color: var(--cs-accent);
+    font-size: 0.78rem;
+    font-weight: 650;
+}
+
+.knowledge-evidence-panel__compact-disclosure[open] .knowledge-evidence-panel__compact-action [aria-hidden] {
+    display: inline-block;
+    transform: rotate(180deg);
+}
+
+.knowledge-evidence-panel__compact-content {
+    padding: 0 1rem 1rem;
+}
+
+.knowledge-evidence-panel__compact-content .knowledge-evidence-panel__status {
+    margin-top: 0;
+    padding: 0.7rem 0.8rem;
+}
+
+.knowledge-evidence-panel__compact-content .knowledge-evidence-panel__details {
+    margin-top: 0.6rem;
+}
+
+.knowledge-evidence-panel__compact-content .knowledge-evidence-detail {
+    border-color: var(--cs-line);
 }
 
 .knowledge-evidence-panel__header {
@@ -114,6 +167,7 @@
 }
 
 .knowledge-evidence-detail summary:focus-visible,
+.knowledge-evidence-panel__compact-summary:focus-visible,
 .knowledge-evidence-panel a:focus-visible,
 .knowledge-evidence-panel button:focus-visible {
     outline: 3px solid rgba(47, 128, 237, 0.45);
@@ -182,7 +236,7 @@
 
 .knowledge-evidence-retry:hover {
     color: #fff;
-    background: #1d64c8;
+    background: #1C625D;
 }
 
 .knowledge-evidence-receipt__retry {
@@ -199,7 +253,7 @@
 }
 
 .knowledge-evidence-receipt__retry:hover {
-    background: #1d64c8;
+    background: #1C625D;
 }
 
 .knowledge-evidence-receipt__retry:disabled {
@@ -251,6 +305,11 @@
         border-radius: 0.55rem;
     }
 
+    .knowledge-evidence-panel--compact {
+        margin: 0.85rem 1rem 0;
+        padding: 0;
+    }
+
     .knowledge-evidence-panel__header {
         display: block;
     }
diff --git a/static/css/modern-editor.css b/static/css/modern-editor.css
index 6eebd593..fb2204f9 100644
--- a/static/css/modern-editor.css
+++ b/static/css/modern-editor.css
@@ -52,7 +52,7 @@
 .modern-editor-language i {
     margin-right: 0.5rem;
     font-size: 1rem;
-    color: #6366f1;
+    color: #237B75;
 }
 
 .dark-theme .modern-editor-language {
@@ -83,13 +83,13 @@
 
 .modern-editor-tool:hover {
     background-color: #f3f4f6;
-    color: #6366f1;
+    color: #237B75;
     border-color: #d1d5db;
 }
 
 .modern-editor-tool:focus {
     outline: none;
-    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
+    box-shadow: 0 0 0 2px rgba(35, 123, 117, 0.3);
 }
 
 .dark-theme .modern-editor-tool {
@@ -99,7 +99,7 @@
 
 .dark-theme .modern-editor-tool:hover {
     background-color: #3e3e3e;
-    color: #6366f1;
+    color: #237B75;
 }
 
 /* 编辑器容器 */
@@ -221,9 +221,9 @@
 
 /* 提高textarea的可访问性样式 */
 .modern-editor textarea.form-control:focus-visible {
-    outline: 2px solid #6366f1;
+    outline: 2px solid #237B75;
     outline-offset: 2px;
-    border-color: #6366f1;
+    border-color: #237B75;
 }
 
 /* 高对比度模式支持 */
diff --git a/static/css/thinking.css b/static/css/thinking.css
index e11e2348..7c59c9a0 100644
--- a/static/css/thinking.css
+++ b/static/css/thinking.css
@@ -43,7 +43,7 @@
     gap: 8px;
 }
 
-.arena-title i { color: #2563eb; }
+.arena-title i { color: #237B75; }
 
 .arena-timer {
     font-family: 'JetBrains Mono', monospace;
@@ -62,9 +62,9 @@
     min-width: 0;
     margin-bottom: 16px;
     padding: 14px 18px;
-    border: 1px solid #dbe4f0;
+    border: 1px solid #DDE5E6;
     border-radius: 10px;
-    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
+    background: var(--cs-surface);
     color: #334155;
 }
 
@@ -83,7 +83,7 @@
 .session-lifecycle-kicker {
     font-size: 13px;
     font-weight: 700;
-    color: #1e3a8a;
+    color: #23343D;
 }
 
 .session-lifecycle-badge {
@@ -109,8 +109,8 @@
 }
 
 .session-lifecycle[data-session-status="completed"] .session-lifecycle-badge {
-    background: #dbeafe;
-    color: #1d4ed8;
+    background: #EAF4F2;
+    color: #1C625D;
 }
 
 .session-lifecycle-meta,
@@ -152,7 +152,7 @@
     width: 0;
     height: 100%;
     border-radius: inherit;
-    background: #2563eb;
+    background: #237B75;
     transition: width 180ms ease;
 }
 
@@ -217,9 +217,9 @@
 }
 
 .step-circle.active {
-    background: #2563eb;
+    background: #237B75;
     color: #fff;
-    border-color: #2563eb;
+    border-color: #237B75;
 }
 
 .step-circle.completed {
@@ -244,7 +244,7 @@
     white-space: nowrap;
 }
 
-.step-label.active { color: #2563eb; font-weight: 600; }
+.step-label.active { color: #237B75; font-weight: 600; }
 .step-label.completed { color: #10b981; }
 
 /* --- Main Content --- */
@@ -419,7 +419,7 @@
     gap: 6px;
 }
 
-.panel-header h3 i { color: #2563eb; font-size: 14px; }
+.panel-header h3 i { color: #237B75; font-size: 14px; }
 
 .stage2-header-meta {
     display: flex;
@@ -435,8 +435,8 @@
 .stage2-answer-progress {
     padding: 3px 8px;
     border-radius: 999px;
-    background: #eff6ff;
-    color: #1d4ed8;
+    background: #F5F7F8;
+    color: #1C625D;
     font-weight: 600;
     white-space: nowrap;
 }
@@ -445,10 +445,10 @@
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    border: 1px solid #dbeafe;
+    border: 1px solid #EAF4F2;
     border-radius: 999px;
-    background: #eff6ff;
-    color: #2563eb;
+    background: #F5F7F8;
+    color: #237B75;
     padding: 4px 8px;
     font-size: 11px;
     line-height: 1;
@@ -458,12 +458,12 @@
 }
 
 .panel-collapse-toggle:hover {
-    background: #dbeafe;
-    border-color: #93c5fd;
+    background: #EAF4F2;
+    border-color: #A9D0CA;
 }
 
 .panel-collapse-toggle:focus-visible {
-    outline: 2px solid #60a5fa;
+    outline: 2px solid #78ADA6;
     outline-offset: 2px;
 }
 
@@ -531,8 +531,8 @@
 
 .description-textarea:focus {
     outline: none;
-    border-color: #2563eb;
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    border-color: #237B75;
+    box-shadow: 0 0 0 3px rgba(35, 123, 117, 0.1);
 }
 
 .description-textarea::placeholder { color: #9ca3af; }
@@ -587,7 +587,7 @@
 }
 
 .block-solution {
-    border-color: #2563eb;
+    border-color: #237B75;
     border-style: dashed;
 }
 
@@ -611,7 +611,7 @@
 .code-block {
     background: #fff;
     border: 1px solid #e5e7eb;
-    border-left: 3px solid #2563eb;
+    border-left: 3px solid #237B75;
     border-radius: 4px;
     padding: 8px 12px;
     margin-bottom: 4px;
@@ -625,7 +625,7 @@
 }
 
 .code-block:hover {
-    border-color: #2563eb;
+    border-color: #237B75;
     box-shadow: 0 2px 4px rgba(0,0,0,0.08);
 }
 
@@ -679,9 +679,9 @@
 }
 
 .indent-btn:hover {
-    background: #2563eb;
+    background: #237B75;
     color: #fff;
-    border-color: #2563eb;
+    border-color: #237B75;
 }
 
 /* --- Stage 3: Chat --- */
@@ -721,7 +721,7 @@
     background: #f3f4f6;
 }
 
-.chat-avatar.teacher { background: #eff6ff; }
+.chat-avatar.teacher { background: #F5F7F8; }
 .chat-avatar.student { background: #f0fdf4; }
 .chat-avatar.bad-student { background: #fef3c7; }
 
@@ -749,7 +749,7 @@
 }
 
 .chat-bubble.user-msg {
-    background: #2563eb;
+    background: #237B75;
     color: #fff;
     border-bottom-right-radius: 2px;
 }
@@ -816,7 +816,7 @@
     font-family: inherit;
 }
 
-.chat-input:focus { border-color: #2563eb; }
+.chat-input:focus { border-color: #237B75; }
 .chat-input::placeholder { color: #9ca3af; }
 
 /* --- Stage 3: Public Forum --- */
@@ -855,10 +855,10 @@
 .forum-goal-card {
     flex: 0 0 auto;
     padding: 14px 16px;
-    border: 1px solid #dbeafe;
+    border: 1px solid #EAF4F2;
     border-radius: 14px;
-    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 72%);
-    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.06);
+    background: var(--cs-surface);
+    box-shadow: 0 4px 14px rgba(35, 123, 117, 0.06);
 }
 
 .forum-goal-summary {
@@ -880,8 +880,8 @@
     right: 0;
     padding: 3px 7px;
     border-radius: 999px;
-    background: #eff6ff;
-    color: #2563eb;
+    background: #F5F7F8;
+    color: #237B75;
     font-size: 10px;
     font-weight: 700;
 }
@@ -892,7 +892,7 @@
 
 .forum-goal-summary:focus-visible,
 .stage3-guide-summary:focus-visible {
-    outline: 2px solid #2563eb;
+    outline: 2px solid #237B75;
     outline-offset: 3px;
     border-radius: 6px;
 }
@@ -913,7 +913,7 @@
 }
 
 .forum-goal-kicker {
-    color: #2563eb;
+    color: #237B75;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.04em;
@@ -925,7 +925,7 @@
 
 .forum-goal-head h4 {
     margin: 4px 0 0;
-    color: #172554;
+    color: #23343D;
     font-size: 15px;
     line-height: 1.35;
 }
@@ -934,8 +934,8 @@
     flex: 0 0 auto;
     padding: 4px 9px;
     border-radius: 999px;
-    background: #dbeafe;
-    color: #1d4ed8;
+    background: #EAF4F2;
+    color: #1C625D;
     font-size: 11px;
     font-weight: 700;
     white-space: nowrap;
@@ -964,7 +964,7 @@
 .forum-goal-progress-bar {
     height: 100%;
     border-radius: inherit;
-    background: linear-gradient(90deg, #2563eb, #22c55e);
+    background: var(--cs-accent);
     transition: width 0.35s ease;
 }
 
@@ -978,7 +978,7 @@
 }
 
 .forum-goal-progress-meta span:first-child {
-    color: #1d4ed8;
+    color: #1C625D;
     font-weight: 800;
 }
 
@@ -986,8 +986,8 @@
     margin-top: 10px;
     padding: 8px 10px;
     border-radius: 9px;
-    background: #eff6ff;
-    color: #1e3a8a;
+    background: #F5F7F8;
+    color: #23343D;
     font-size: 12px;
     line-height: 1.5;
 }
@@ -1024,14 +1024,14 @@
 }
 
 .forum-goal-step.is-active {
-    border-color: #93c5fd;
-    background: #f8fbff;
-    color: #1e40af;
+    border-color: #A9D0CA;
+    background: #F5F7F8;
+    color: #1C625D;
 }
 
 .forum-goal-step.is-active::before {
     content: '→';
-    color: #2563eb;
+    color: #237B75;
 }
 
 .forum-goal-step.is-done {
@@ -1068,7 +1068,7 @@
     align-items: flex-start;
     gap: 4px;
     padding: 12px 14px;
-    border: 1px solid #dbe4f0;
+    border: 1px solid #DDE5E6;
     border-radius: 10px;
     background: #f8fafc;
     color: #1e293b;
@@ -1078,20 +1078,20 @@
 }
 
 .forum-target-btn:hover {
-    border-color: #93c5fd;
-    background: #eff6ff;
+    border-color: #A9D0CA;
+    background: #F5F7F8;
 }
 
 .forum-target-btn:focus-visible {
-    outline: 2px solid #2563eb;
+    outline: 2px solid #237B75;
     outline-offset: 2px;
 }
 
 .forum-target-btn.is-selected,
 .forum-target-btn[aria-pressed="true"] {
-    border-color: #2563eb;
-    background: #dbeafe;
-    box-shadow: 0 0 0 1px #2563eb;
+    border-color: #237B75;
+    background: #EAF4F2;
+    box-shadow: 0 0 0 1px #237B75;
 }
 
 .forum-target-label {
@@ -1170,11 +1170,11 @@
 }
 
 .forum-avatar.role-user {
-    background: #eff6ff;
+    background: #F5F7F8;
 }
 
 .forum-avatar.role-teacher_agent {
-    background: #eef2ff;
+    background: #EAF4F2;
 }
 
 .forum-avatar.role-student_agent {
@@ -1192,8 +1192,8 @@
 }
 
 .forum-event.is-user .forum-card {
-    background: #eff6ff;
-    border-color: #bfdbfe;
+    background: #F5F7F8;
+    border-color: #CDE5E1;
 }
 
 .forum-meta {
@@ -1233,8 +1233,8 @@
 }
 
 .forum-kind.kind-user_message {
-    background: #dbeafe;
-    color: #1d4ed8;
+    background: #EAF4F2;
+    color: #1C625D;
 }
 
 .forum-kind.kind-agent_message {
@@ -1265,7 +1265,7 @@
 .forum-reply-action {
     border: none;
     background: transparent;
-    color: #2563eb;
+    color: #237B75;
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
@@ -1273,7 +1273,7 @@
 }
 
 .forum-reply-action:hover {
-    color: #1d4ed8;
+    color: #1C625D;
     text-decoration: underline;
 }
 
@@ -1325,7 +1325,7 @@
 }
 
 .stage3-guide-summary > span:first-child i {
-    color: #2563eb;
+    color: #237B75;
 }
 
 .stage3-guide-summary-hint {
@@ -1416,7 +1416,7 @@
 
 .code-fix-input:focus {
     outline: none;
-    border-color: #2563eb;
+    border-color: #237B75;
 }
 
 /* --- Buttons --- */
@@ -1436,12 +1436,12 @@
 }
 
 .arena-btn-primary {
-    background: #2563eb;
+    background: #237B75;
     color: #fff;
 }
 
 .arena-btn-primary:hover {
-    background: #1d4ed8;
+    background: #1C625D;
 }
 
 .arena-btn-primary:disabled {
@@ -1472,7 +1472,7 @@
     height: 34px;
     padding: 0;
     border-radius: 50%;
-    background: #2563eb;
+    background: #237B75;
     color: #fff;
     border: none;
     cursor: pointer;
@@ -1483,18 +1483,18 @@
     flex-shrink: 0;
 }
 
-.arena-btn-send:hover { background: #1d4ed8; }
+.arena-btn-send:hover { background: #1C625D; }
 .arena-btn-send:disabled { opacity: 0.4; cursor: not-allowed; }
 
 /* --- Hint --- */
 .hint-bubble {
-    background: #eff6ff;
-    border: 1px solid #bfdbfe;
+    background: #F5F7F8;
+    border: 1px solid #CDE5E1;
     border-radius: 6px;
     padding: 10px 14px;
     margin: 8px 0;
     font-size: 13px;
-    color: #1e40af;
+    color: #1C625D;
     line-height: 1.5;
     display: flex;
     align-items: flex-start;
@@ -1502,7 +1502,7 @@
 }
 
 .hint-bubble i {
-    color: #2563eb;
+    color: #237B75;
     flex-shrink: 0;
     margin-top: 2px;
 }
@@ -1515,7 +1515,7 @@
     margin-bottom: 0;
 }
 .hint-bubble code {
-    background: rgba(37, 99, 235, 0.1);
+    background: rgba(35, 123, 117, 0.1);
     padding: 2px 4px;
     border-radius: 4px;
     font-family: var(--arena-mono, monospace);
@@ -1736,7 +1736,7 @@
 .algorithm-summary-panel {
     background: #f8fafc;
     border: 1px solid #e2e8f0;
-    border-left: 4px solid #2563eb;
+    border-left: 4px solid #237B75;
     border-radius: 6px;
     margin-bottom: 12px;
     overflow: hidden;
@@ -1748,7 +1748,7 @@
     border-bottom: 1px solid #e2e8f0;
     font-size: 13px;
     font-weight: 600;
-    color: #1e3a8a;
+    color: #23343D;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -1845,10 +1845,10 @@
     gap: 12px;
     margin: 2px 0 10px;
     padding: 10px 12px;
-    border: 1px solid #dbeafe;
+    border: 1px solid #EAF4F2;
     border-radius: 8px;
-    background: linear-gradient(90deg, #eff6ff, #f8fbff);
-    color: #1e3a8a;
+    background: var(--cs-accent-soft);
+    color: #23343D;
 }
 
 .stage1-answer-toolbar > div {
@@ -1874,18 +1874,18 @@
     flex: 0 0 auto;
     padding: 3px 8px;
     border-radius: 999px;
-    background: #dbeafe;
-    color: #1d4ed8 !important;
+    background: #EAF4F2;
+    color: #1C625D !important;
     font-size: 11px !important;
     white-space: nowrap;
 }
 
 .stage1-collapsible-panel {
     margin-bottom: 12px;
-    border: 1px solid #bfdbfe;
-    border-left: 4px solid #3b82f6;
+    border: 1px solid #CDE5E1;
+    border-left: 4px solid #2E8E86;
     border-radius: 8px;
-    background: #eff6ff;
+    background: #F5F7F8;
     overflow: hidden;
 }
 
@@ -1898,7 +1898,7 @@
     padding: 10px 12px;
     border: 0;
     background: transparent;
-    color: #1e3a8a;
+    color: #23343D;
     font: inherit;
     font-size: 13px;
     font-weight: 600;
@@ -1912,7 +1912,7 @@
 
 .stage1-collapse-header:focus-visible,
 .algorithm-summary-header:focus-visible {
-    outline: 2px solid #60a5fa;
+    outline: 2px solid #78ADA6;
     outline-offset: -2px;
 }
 
@@ -1923,7 +1923,7 @@
 .stage1-collapse-header i:first-child,
 .stage1-collapse-header > span > i {
     margin-right: 5px;
-    color: #2563eb;
+    color: #237B75;
 }
 
 .stage1-collapse-header small {
@@ -1934,7 +1934,7 @@
 
 .stage1-collapsible-body {
     padding: 0 14px 12px;
-    color: #1e40af;
+    color: #1C625D;
     font-size: 13px;
     line-height: 1.65;
 }
@@ -2000,7 +2000,7 @@
     padding: 10px 12px;
     border: 0;
     background: transparent;
-    color: #38bdf8;
+    color: #6AB5A9;
     cursor: pointer;
     font-family: inherit;
     font-size: 13px;
@@ -2008,7 +2008,7 @@
     text-align: left;
 }
 .dev-debug-toggle:focus-visible {
-    outline: 2px solid #38bdf8;
+    outline: 2px solid #6AB5A9;
     outline-offset: -2px;
 }
 .dev-debug-title {
@@ -2064,10 +2064,10 @@
     transform: scale(0.97);
 }
 .dev-debug-btn-primary {
-    background: #2563eb;
+    background: #237B75;
 }
 .dev-debug-btn-primary:hover {
-    background: #3b82f6;
+    background: #2E8E86;
 }
 .dev-debug-btn-success {
     background: #16a34a;
@@ -2125,7 +2125,7 @@
     margin-top: 4px;
 }
 .dev-debug-trace-key {
-    color: #7dd3fc;
+    color: #A9D0CA;
     font-weight: 600;
 }
 .dev-debug-trace-value {
@@ -2221,9 +2221,9 @@
 }
 
 .quiz-choice-option.selected {
-    border-color: #3b82f6;
-    background: #eff6ff;
-    box-shadow: 0 0 0 1px #3b82f6;
+    border-color: #2E8E86;
+    background: #F5F7F8;
+    box-shadow: 0 0 0 1px #2E8E86;
 }
 
 .quiz-choice-option input[type="radio"] {
@@ -2272,8 +2272,8 @@
 }
 
 .quiz-fill-input:focus {
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+    border-color: #2E8E86;
+    box-shadow: 0 0 0 2px rgba(46, 142, 134, 0.15);
 }
 
 .quiz-step-feedback {
@@ -2472,10 +2472,10 @@
     }
 
     .mobile-tab-btn.active {
-        color: #2563eb;
-        border-bottom-color: #2563eb;
+        color: #237B75;
+        border-bottom-color: #237B75;
         font-weight: 600;
-        background: rgba(37, 99, 235, 0.03);
+        background: rgba(35, 123, 117, 0.03);
     }
 
     /* 主布局转换为单栏 */
diff --git a/static/img/favicon.svg b/static/img/favicon.svg
index a08773ff..47508c87 100644
--- a/static/img/favicon.svg
+++ b/static/img/favicon.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title">
   <title>CodeSense</title>
   <rect width="64" height="64" rx="16" fill="#0a0e17"/>
-  <path d="M23 18 12 32l11 14M41 18l11 14-11 14M36 14 28 50" fill="none" stroke="#3b82f6" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
+  <path d="M23 18 12 32l11 14M41 18l11 14-11 14M36 14 28 50" fill="none" stroke="#237B75" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
 </svg>
diff --git a/static/js/code_questions.js b/static/js/code_questions.js
index ed4d9b46..910e8a85 100644
--- a/static/js/code_questions.js
+++ b/static/js/code_questions.js
@@ -735,7 +735,7 @@ function addQuestionStyles() {
         
         .answer-header i {
             margin-right: 8px;
-            color: #0d6efd;
+            color: #237B75;
         }
         
         .ai-answer.error .answer-header i {
@@ -762,7 +762,7 @@ function addQuestionStyles() {
             height: 8px;
             width: 8px;
             margin: 0 2px;
-            background-color: #0d6efd;
+            background-color: #237B75;
             border-radius: 50%;
             opacity: 0.6;
             animation: typing 1s infinite;
diff --git a/static/js/thinking.js b/static/js/thinking.js
index 227a3cff..44bfd761 100644
--- a/static/js/thinking.js
+++ b/static/js/thinking.js
@@ -507,7 +507,7 @@
                 qLabel.style.display = 'flex';
                 qLabel.style.alignItems = 'flex-start';
                 qLabel.style.gap = '6px';
-                qLabel.innerHTML = `<span class="qa-index" style="background: #3b82f6; color: white; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; margin-top: 2px;">${i + 1}</span> <span>${escapeHtml(q)}</span>`;
+                qLabel.innerHTML = `<span class="qa-index" style="background: #237B75; color: white; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; margin-top: 2px;">${i + 1}</span> <span>${escapeHtml(q)}</span>`;
                 
                 const qTextarea = document.createElement('textarea');
                 qTextarea.className = 'description-textarea qa-answer-textarea';
diff --git a/static/modern.css b/static/modern.css
index 11aac06f..ed3d5ec9 100644
--- a/static/modern.css
+++ b/static/modern.css
@@ -1,25 +1,34 @@
 /* modern.css - CodeSense 酷森思现代化样式 */
 
 :root {
+  --cs-bg: #F5F7F8;
+  --cs-surface: #FFFFFF;
+  --cs-ink: #23343D;
+  --cs-muted: #64757D;
+  --cs-line: #DDE5E6;
+  --cs-accent: #237B75;
+  --cs-accent-soft: #EAF4F2;
+  --cs-input: #F0F3F3;
+  --bs-primary: var(--cs-accent);
+  --bs-primary-rgb: 35, 123, 117;
   /* 主色调 */
-  --primary-color: #2563eb;
-  /* 深蓝色 */
-  --primary-hover: #1d4ed8;
+  --primary-color: var(--cs-accent);
+  --primary-hover: #1C625D;
   --secondary-color: #f59e0b;
   /* 金色点缀 */
 
   /* 中性色 */
-  --dark: #1f2937;
-  --dark-light: #374151;
-  --medium: #9ca3af;
-  --light: #f3f4f6;
-  --white: #ffffff;
+  --dark: var(--cs-ink);
+  --dark-light: #40545D;
+  --medium: var(--cs-muted);
+  --light: var(--cs-bg);
+  --white: var(--cs-surface);
 
   /* 功能色 */
   --success: #10b981;
   --warning: #f59e0b;
   --danger: #ef4444;
-  --info: #3b82f6;
+  --info: #2E8E86;
 
   /* 字体 */
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -43,6 +52,33 @@
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
+/* Bootstrap's compiled utilities keep their original blue without these bridges. */
+.bg-primary,
+.badge.bg-primary {
+  background-color: var(--cs-accent) !important;
+}
+
+.text-primary,
+.link-primary {
+  color: var(--cs-accent) !important;
+}
+
+.border-primary {
+  border-color: var(--cs-accent) !important;
+}
+
+.btn-outline-primary {
+  color: var(--cs-accent);
+  border-color: var(--cs-accent);
+}
+
+.btn-outline-primary:hover,
+.btn-outline-primary:focus-visible {
+  color: var(--cs-surface);
+  background-color: var(--cs-accent);
+  border-color: var(--cs-accent);
+}
+
 /* 重置样式 */
 * {
   margin: 0;
@@ -52,8 +88,8 @@
 
 body {
   font-family: var(--font-sans);
-  background-color: var(--light);
-  color: var(--dark);
+  background-color: var(--cs-bg);
+  color: var(--cs-ink);
   line-height: 1.5;
 }
 
@@ -77,7 +113,8 @@ a:hover {
 
 /* 导航栏 */
 .navbar {
-  background-color: var(--white);
+  background-color: var(--cs-surface);
+  border-bottom: 1px solid var(--cs-line);
   box-shadow: var(--shadow-sm);
   padding: var(--spacing-md) 0;
   position: sticky;
@@ -106,6 +143,7 @@ a:hover {
 }
 
 .navbar-brand-logo {
+  filter: hue-rotate(-45deg) saturate(.75);
   width: auto;
   height: 34px;
   margin-right: 0 !important;
@@ -136,7 +174,7 @@ a:hover {
 .navbar-link:hover,
 .navbar-link.active {
   color: var(--primary-color);
-  background-color: rgba(37, 99, 235, 0.05);
+  background-color: var(--cs-accent-soft);
 }
 
 .navbar-user {
@@ -199,7 +237,7 @@ a:hover {
 }
 
 :where(a, button, input, select, textarea):focus-visible {
-  outline: 3px solid rgba(37, 99, 235, 0.55);
+  outline: 3px solid var(--cs-accent);
   outline-offset: 3px;
 }
 
@@ -231,7 +269,8 @@ a:hover {
 
 /* 卡片 */
 .card {
-  background-color: var(--white);
+  background-color: var(--cs-surface);
+  border: 1px solid var(--cs-line);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   padding: var(--spacing-lg);
@@ -260,7 +299,7 @@ a:hover {
 .card-badge {
   display: inline-block;
   padding: 4px 8px;
-  background-color: rgba(37, 99, 235, 0.1);
+  background-color: var(--cs-accent-soft);
   color: var(--primary-color);
   border-radius: var(--radius-sm);
   font-size: 0.875rem;
@@ -299,7 +338,7 @@ a:hover {
 }
 
 .btn-primary {
-  background-color: var(--primary-color);
+  background-color: var(--cs-accent);
   color: var(--white);
 }
 
@@ -308,12 +347,12 @@ a:hover {
 }
 
 .btn-secondary {
-  background-color: rgba(37, 99, 235, 0.1);
+  background-color: var(--cs-accent-soft);
   color: var(--primary-color);
 }
 
 .btn-secondary:hover {
-  background-color: rgba(37, 99, 235, 0.15);
+  background-color: #DCEDE9;
 }
 
 .btn-success {
@@ -360,7 +399,7 @@ a:hover {
 .form-control:focus {
   outline: none;
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+  box-shadow: 0 0 0 3px rgba(35, 123, 117, 0.15);
 }
 
 .form-error {
@@ -452,7 +491,7 @@ a:hover {
 }
 
 .badge-primary {
-  background-color: rgba(37, 99, 235, 0.1);
+  background-color: rgba(35, 123, 117, 0.1);
   color: var(--primary-color);
 }
 
@@ -505,7 +544,7 @@ a:hover {
 }
 
 .alert-info {
-  background-color: rgba(59, 130, 246, 0.1);
+  background-color: rgba(46, 142, 134, 0.1);
   color: var(--info);
   border-left: 3px solid var(--info);
 }
@@ -699,7 +738,7 @@ a:hover {
    ========================================================================== */
 
 .maturity-hero {
-    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+    background: var(--cs-ink);
     color: white;
     padding: 3rem 2rem;
     border-radius: 1rem;
@@ -716,7 +755,7 @@ a:hover {
     right: -10%;
     width: 300px;
     height: 300px;
-    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
+    background: transparent;
     border-radius: 50%;
 }
 
@@ -731,9 +770,7 @@ a:hover {
     font-weight: 800;
     margin: 0;
     line-height: 1;
-    background: linear-gradient(to bottom, #fff, #94a3b8);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    color: var(--cs-surface);
 }
 
 .maturity-label {
@@ -886,9 +923,9 @@ a:hover {
     max-width: 720px;
     margin: 4rem auto;
     padding: 3rem 2rem;
-    border: 1px solid #dbeafe;
+    border: 1px solid #EAF4F2;
     border-radius: 1.25rem;
-    background: linear-gradient(145deg, #eff6ff, #ffffff 62%);
+    background: var(--cs-surface);
     box-shadow: var(--shadow-md);
     text-align: center;
 }
@@ -981,9 +1018,9 @@ a:hover {
 
 .review-queue-filter:hover,
 .review-queue-filter.is-active {
-    color: #1d4ed8;
-    border-color: #93c5fd;
-    background: #eff6ff;
+    color: #1C625D;
+    border-color: #A9D0CA;
+    background: #F5F7F8;
 }
 
 .review-queue-table-wrap {
@@ -1049,12 +1086,12 @@ a:hover {
 .ai-feedback-signal legend {
     float: none;
     width: auto;
-    color: #4c1d95;
+    color: #23343D;
     font-weight: 600;
 }
 
 .review-dashboard-card {
-    border-left: 4px solid #2563eb;
+    border-left: 4px solid #237B75;
 }
 
 @media (max-width: 640px) {
@@ -1083,9 +1120,9 @@ a:hover {
 .learning-graph-panel {
     margin: 0 0 2rem;
     padding: 1.5rem;
-    border: 1px solid #dbe7f5;
+    border: 1px solid #DDE5E6;
     border-radius: var(--radius-lg);
-    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 66%);
+    background: var(--cs-surface);
     box-shadow: 0 8px 24px rgba(30, 64, 175, 0.06);
 }
 
@@ -1105,7 +1142,7 @@ a:hover {
 
 .learning-graph-panel__eyebrow {
     margin: 0 0 0.25rem;
-    color: #2563eb;
+    color: #237B75;
     font-size: 0.78rem;
     font-weight: 700;
     letter-spacing: 0.04em;
@@ -1113,7 +1150,7 @@ a:hover {
 
 .learning-graph-panel__title {
     margin: 0;
-    color: #172554;
+    color: #23343D;
     font-size: 1.35rem;
     font-weight: 750;
 }
@@ -1127,7 +1164,7 @@ a:hover {
 }
 
 .teacher-learning-actions {
-    border: 1px solid #dbe7f5;
+    border: 1px solid #DDE5E6;
     border-radius: var(--radius-lg);
     background: #ffffff;
     box-shadow: var(--shadow-sm);
@@ -1146,7 +1183,7 @@ a:hover {
     padding: 1rem;
     border: 1px solid #e2e8f0;
     border-radius: 0.75rem;
-    background: #f8fbff;
+    background: #F5F7F8;
 }
 
 .teacher-learning-action-card h3,
@@ -1189,8 +1226,8 @@ a:hover {
     padding: 1.25rem;
     border: 1px solid #dbe5f2;
     border-radius: 1rem;
-    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 78%);
-    box-shadow: 0 0.5rem 1.5rem rgba(37, 99, 235, 0.06);
+    background: var(--cs-surface);
+    box-shadow: 0 0.5rem 1.5rem rgba(35, 123, 117, 0.06);
 }
 
 .student-learning-memory-panel__header {
@@ -1231,7 +1268,7 @@ a:hover {
     gap: 0.35rem;
     border-radius: 999px;
     padding: 0.35rem 0.65rem;
-    color: #1f4f8f;
+    color: #1C625D;
     background: #eaf2ff;
     font-size: 0.8rem;
     white-space: nowrap;
@@ -1355,10 +1392,10 @@ a:hover {
 .learning-graph-panel__privacy {
     flex: 0 0 auto;
     padding: 0.35rem 0.65rem;
-    border: 1px solid #bfdbfe;
+    border: 1px solid #CDE5E1;
     border-radius: 999px;
-    color: #1d4ed8;
-    background: #eff6ff;
+    color: #1C625D;
+    background: #F5F7F8;
     font-size: 0.75rem;
     white-space: nowrap;
 }
@@ -1378,7 +1415,7 @@ a:hover {
 }
 
 .learning-graph-panel__summary strong {
-    color: #1e40af;
+    color: #1C625D;
     font-size: 1rem;
 }
 
@@ -1436,7 +1473,7 @@ a:hover {
     height: 100%;
     min-width: 0;
     border-radius: inherit;
-    background: linear-gradient(90deg, #60a5fa, #2563eb);
+    background: var(--cs-accent);
 }
 
 .learning-graph-next {
@@ -1461,23 +1498,23 @@ a:hover {
     justify-content: space-between;
     gap: 1rem;
     padding: 0.7rem 0.8rem;
-    border: 1px solid #dbeafe;
+    border: 1px solid #EAF4F2;
     border-radius: 0.65rem;
-    color: #1e3a8a;
-    background: #eff6ff;
+    color: #23343D;
+    background: #F5F7F8;
     text-decoration: none;
 }
 
 .learning-graph-recommendation:hover,
 .learning-graph-recommendation:focus-visible {
-    color: #1e3a8a;
-    border-color: #93c5fd;
-    background: #dbeafe;
+    color: #23343D;
+    border-color: #A9D0CA;
+    background: #EAF4F2;
 }
 
 .learning-graph-recommendation.is-static:hover {
-    color: #1e3a8a;
-    background: #eff6ff;
+    color: #23343D;
+    background: #F5F7F8;
 }
 
 .learning-graph-recommendation strong,
@@ -1507,7 +1544,7 @@ a:hover {
 }
 
 .learning-graph-coverage-value {
-    color: #1d4ed8;
+    color: #1C625D;
     font-size: 1.7rem;
     font-weight: 750;
     line-height: 1;
@@ -1547,7 +1584,7 @@ a:hover {
     align-items: flex-start;
     gap: 0.75rem;
     padding: 1rem;
-    border: 1px dashed #bfdbfe;
+    border: 1px dashed #CDE5E1;
     border-radius: 0.75rem;
     color: #475569;
     background: rgba(239, 246, 255, 0.65);
@@ -1556,12 +1593,12 @@ a:hover {
 
 .learning-graph-empty > i {
     margin-top: 0.15rem;
-    color: #2563eb;
+    color: #237B75;
     font-size: 1.25rem;
 }
 
 .learning-graph-empty strong {
-    color: #1e3a8a;
+    color: #23343D;
 }
 
 .learning-graph-panel__note {
diff --git a/templates/about.html b/templates/about.html
index 5a57eb35..cfafab59 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -11,7 +11,7 @@
     }
     
     .hero-section {
-        background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
+        background: var(--cs-accent);
         color: white;
         padding: 4rem 2rem;
         border-radius: 1rem;
diff --git a/templates/add_assignment.html b/templates/add_assignment.html
index dbdee9c1..a4e0877c 100644
--- a/templates/add_assignment.html
+++ b/templates/add_assignment.html
@@ -34,7 +34,7 @@
 
     .form-control:focus {
         border-color: var(--primary-color);
-        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+        box-shadow: 0 0 0 3px rgba(35, 123, 117, 0.15);
         outline: none;
     }
 
diff --git a/templates/admin_dashboard.html b/templates/admin_dashboard.html
index 0bc78824..4daafd4c 100644
--- a/templates/admin_dashboard.html
+++ b/templates/admin_dashboard.html
@@ -301,7 +301,7 @@ <h5 class="mb-3">过去30天活跃度</h5>
     // 调试信息输出函数（仅控制台显示，不影响页面）
     function log(message, type = 'info') {
         const styles = {
-            info: 'color: #0066cc; background: #f0f8ff;',
+            info: 'color: #237B75; background: #f0f8ff;',
             error: 'color: #cc0000; background: #fff0f0;',
             warning: 'color: #cc6600; background: #fff8f0;',
             success: 'color: #006600; background: #f0fff0;'
diff --git a/templates/admin_profile.html b/templates/admin_profile.html
index 704549d0..90c71b4c 100644
--- a/templates/admin_profile.html
+++ b/templates/admin_profile.html
@@ -21,7 +21,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
+        background: rgba(35, 52, 61, 0.24);
         z-index: 1;
     }
     
@@ -175,7 +175,7 @@
     
     .badge-role {
         background-color: #e7f0ff;
-        color: #0056b3;
+        color: #1C625D;
         padding: 0.4rem 0.8rem;
         border-radius: 20px;
         font-weight: 500;
diff --git a/templates/admin_trend_monitor.html b/templates/admin_trend_monitor.html
index 409f8e85..04d4bb8f 100644
--- a/templates/admin_trend_monitor.html
+++ b/templates/admin_trend_monitor.html
@@ -5,7 +5,7 @@
 {% block extra_css %}
 <style>
     .stats-card {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--cs-accent);
         color: white;
         border: none;
         border-radius: 15px;
@@ -54,28 +54,28 @@
     .refresh-btn {
         border-radius: 25px;
         padding: 0.5rem 1.5rem;
-        background: linear-gradient(45deg, #28a745, #20c997);
+        background: var(--cs-accent);
         border: none;
         color: white;
         transition: all 0.3s ease;
     }
     
     .refresh-btn:hover {
-        background: linear-gradient(45deg, #20c997, #28a745);
+        background: #1C625D;
         transform: translateY(-2px);
     }
     
     .batch-btn {
         border-radius: 25px;
         padding: 0.5rem 1.5rem;
-        background: linear-gradient(45deg, #007bff, #6f42c1);
+        background: var(--cs-accent);
         border: none;
         color: white;
         transition: all 0.3s ease;
     }
     
     .batch-btn:hover {
-        background: linear-gradient(45deg, #6f42c1, #007bff);
+        background: #1C625D;
         transform: translateY(-2px);
     }
     
@@ -127,7 +127,7 @@ <h3 id="pending-count">-</h3>
             </div>
         </div>
         <div class="col-md-3">
-            <div class="card stats-card text-center" style="background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%);">
+            <div class="card stats-card text-center" style="background: #B7791F;">
                 <div class="card-body">
                     <i class="bi bi-cpu" style="font-size: 2rem; margin-bottom: 1rem;"></i>
                     <h3 id="processing-count">-</h3>
@@ -136,7 +136,7 @@ <h3 id="processing-count">-</h3>
             </div>
         </div>
         <div class="col-md-3">
-            <div class="card stats-card text-center" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">
+            <div class="card stats-card text-center" style="background: #237B75;">
                 <div class="card-body">
                     <i class="bi bi-check-circle" style="font-size: 2rem; margin-bottom: 1rem;"></i>
                     <h3 id="completed-count">-</h3>
@@ -145,7 +145,7 @@ <h3 id="completed-count">-</h3>
             </div>
         </div>
         <div class="col-md-3">
-            <div class="card stats-card text-center" style="background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);">
+            <div class="card stats-card text-center" style="background: #B94848;">
                 <div class="card-body">
                     <i class="bi bi-exclamation-triangle" style="font-size: 2rem; margin-bottom: 1rem;"></i>
                     <h3 id="failed-count">-</h3>
diff --git a/templates/all_submissions.html b/templates/all_submissions.html
index 0ad3719d..3c68aa52 100644
--- a/templates/all_submissions.html
+++ b/templates/all_submissions.html
@@ -50,7 +50,7 @@
 
     .ai-badge {
         background-color: #ede9fe;
-        color: #6d28d9;
+        color: #397F79;
         padding: 0.35em 0.65em;
         font-size: 0.75em;
         font-weight: 600;
diff --git a/templates/api_docs.html b/templates/api_docs.html
index e8c7c121..2a89663a 100644
--- a/templates/api_docs.html
+++ b/templates/api_docs.html
@@ -73,7 +73,7 @@
     }
     
     .method-post {
-        background-color: #3b82f6;
+        background-color: #2E8E86;
         color: white;
     }
     
diff --git a/templates/classes/class_comparison.html b/templates/classes/class_comparison.html
index 94d74fbb..574fe7c7 100644
--- a/templates/classes/class_comparison.html
+++ b/templates/classes/class_comparison.html
@@ -5,7 +5,7 @@
 {% block extra_css %}
 <style>
     .comparison-header {
-        background: linear-gradient(135deg, var(--primary-color), #667eea);
+        background: var(--cs-accent);
         color: white;
         border-radius: 0.5rem;
         padding: 2rem;
diff --git a/templates/classes/class_detail.html b/templates/classes/class_detail.html
index e7e6b1f2..c001e82e 100644
--- a/templates/classes/class_detail.html
+++ b/templates/classes/class_detail.html
@@ -5,7 +5,7 @@
 {% block extra_css %}
 <style>
     .class-header {
-        background: linear-gradient(135deg, var(--primary-color), #667eea);
+        background: var(--cs-accent);
         color: white;
         border-radius: 0.5rem;
         padding: 2rem;
@@ -166,7 +166,7 @@
 
     .matrix-cell.submitted,
     .legend-submitted {
-        background: #cfe2ff;
+        background: #DDECE9;
         color: #084298;
     }
 
diff --git a/templates/components/knowledge_evidence.html b/templates/components/knowledge_evidence.html
index bb6b120d..18ed5e5f 100644
--- a/templates/components/knowledge_evidence.html
+++ b/templates/components/knowledge_evidence.html
@@ -3,6 +3,19 @@
 {% set evidence_items = evidence_view.get('evidence', []) %}
 <section class="knowledge-evidence-panel{% if compact %} knowledge-evidence-panel--compact{% endif %}"
     id="{{ panel_id }}" aria-labelledby="{{ panel_id }}-title">
+    {% if compact %}
+    <details class="knowledge-evidence-panel__compact-disclosure">
+        <summary class="knowledge-evidence-panel__compact-summary">
+            <span class="knowledge-evidence-panel__compact-heading" id="{{ panel_id }}-title">
+                {% if heading %}{{ heading }}{% else %}作业知识焦点{% endif %}
+            </span>
+            <span class="knowledge-evidence-panel__compact-topics">
+                {% if evidence_items %}{% for item in evidence_items[:3] %}{{ item.get('title') or '知识点' }}{% if not loop.last %} · {% endif %}{% endfor %}{% else %}{{ evidence_view.get('status_label', '暂无线索') }}{% endif %}
+            </span>
+            <span class="knowledge-evidence-panel__compact-action">查看 {{ evidence_items|length }} 条证据 <span aria-hidden="true">⌄</span></span>
+        </summary>
+        <div class="knowledge-evidence-panel__compact-content">
+    {% else %}
     <div class="knowledge-evidence-panel__header">
         <div>
             <p class="knowledge-evidence-panel__eyebrow">作业知识工作区</p>
@@ -14,6 +27,7 @@ <h2 class="knowledge-evidence-panel__title" id="{{ panel_id }}-title">
             {{ evidence_view.get('status_label', '证据状态不可用') }}
         </span>
     </div>
+    {% endif %}
 
     <div class="knowledge-evidence-panel__status" role="status" aria-live="polite" aria-atomic="true">
         <strong>{{ evidence_view.get('summary', '当前无法确认知识证据状态。') }}</strong>
@@ -79,5 +93,9 @@ <h2 class="knowledge-evidence-panel__title" id="{{ panel_id }}-title">
         <p class="knowledge-evidence-diagnostics__note">仅用于检索诊断，不作为评分依据。</p>
     </div>
     {% endif %}
+    {% if compact %}
+        </div>
+    </details>
+    {% endif %}
 </section>
 {% endmacro %}
diff --git a/templates/components/simple_editor.html b/templates/components/simple_editor.html
index f2697693..b0ad447c 100644
--- a/templates/components/simple_editor.html
+++ b/templates/components/simple_editor.html
@@ -52,7 +52,7 @@
 
 .editor-title i {
     margin-right: 0.5rem;
-    color: #6366f1;
+    color: #237B75;
 }
 
 .editor-actions {
@@ -75,8 +75,8 @@
 }
 
 .editor-btn:hover {
-    background-color: rgba(99, 102, 241, 0.1);
-    color: #6366f1;
+    background-color: rgba(35, 123, 117, 0.1);
+    color: #237B75;
 }
 
 .editor-textarea {
diff --git a/templates/contact.html b/templates/contact.html
index 187e0a58..eea99728 100644
--- a/templates/contact.html
+++ b/templates/contact.html
@@ -11,7 +11,7 @@
     }
     
     .contact-header {
-        background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
+        background: var(--cs-accent);
         color: white;
         padding: 3rem 2rem;
         border-radius: 1rem;
@@ -298,7 +298,7 @@
     }
     
     .btn-submit:hover {
-        background-color: #0056b3;
+        background-color: #1C625D;
     }
     
     .research-interests {
diff --git a/templates/cot_demo.html b/templates/cot_demo.html
index 734dae86..75b2f985 100644
--- a/templates/cot_demo.html
+++ b/templates/cot_demo.html
@@ -13,8 +13,8 @@
 <style>
     :root {
         --bg-deep: #020617;
-        --liquid-base: #4f46e5;
-        --liquid-glow: #818cf8;
+        --liquid-base: #237B75;
+        --liquid-glow: #78ADA6;
         --accent-gold: #fbbf24;
     }
 
@@ -53,7 +53,7 @@
         gap: 15px;
         position: relative;
         will-change: transform;
-        box-shadow: 0 8px 32px rgba(79, 70, 229, 0.3);
+        box-shadow: 0 8px 32px rgba(35, 123, 117, 0.3);
         border: 1px solid rgba(255, 255, 255, 0.1);
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     }
@@ -66,18 +66,18 @@
         right: 0;
         bottom: 0;
         border-radius: 50px;
-        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
+        background: transparent;
         pointer-events: none;
     }
 
     .logic-block:hover {
         background: var(--liquid-glow);
-        box-shadow: 0 12px 40px rgba(99, 102, 241, 0.5);
+        box-shadow: 0 12px 40px rgba(35, 123, 117, 0.5);
     }
 
     /* 抓取瞬间：至尊液态悬浮感 */
     .sortable-chosen {
-        background: #6366f1 !important;
+        background: #237B75 !important;
         transform: scale(1.1) !important;
         box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6) !important;
         z-index: 9999;
diff --git a/templates/edit_profile.html b/templates/edit_profile.html
index bcbf7218..2ddc5941 100644
--- a/templates/edit_profile.html
+++ b/templates/edit_profile.html
@@ -60,7 +60,7 @@
     }
 
     .btn-submit:hover {
-        background-color: #0056b3;
+        background-color: #1C625D;
     }
 
     .back-link {
diff --git a/templates/editor_demo.html b/templates/editor_demo.html
index 9ae876ac..69b36ce7 100644
--- a/templates/editor_demo.html
+++ b/templates/editor_demo.html
@@ -15,7 +15,7 @@
         margin-bottom: 1.5rem;
         padding: clamp(1.5rem, 4vw, 2.5rem);
         border-radius: 1rem;
-        background: linear-gradient(125deg, #132b57, #2856b1);
+        background: var(--cs-ink);
         color: #fff;
     }
 
diff --git a/templates/email_register.html b/templates/email_register.html
index 7903ab21..7454fdfb 100644
--- a/templates/email_register.html
+++ b/templates/email_register.html
@@ -7,7 +7,7 @@
     <title>邮箱注册 - CodeSense 酷森思</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='vendor/bootstrap/5.2.3/css/bootstrap.min.css') }}">
     <style>
-        :root { --brand: #007aff; --ink: #0f172a; --muted: #64748b; }
+        :root { --brand: #237B75; --ink: #0f172a; --muted: #64748b; }
         body { min-height: 100vh; display: grid; place-items: center; margin: 0; padding: 24px; background: #f8fafc; color: var(--ink); }
         .auth-card { width: min(100%, 460px); padding: 36px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 18px 45px rgba(15, 23, 42, .08); }
         .brand { display: inline-flex; align-items: center; text-decoration: none; }
diff --git a/templates/feedback.html b/templates/feedback.html
index 995b8e8d..80d818cd 100644
--- a/templates/feedback.html
+++ b/templates/feedback.html
@@ -21,7 +21,7 @@
     .feedback-hero {
         padding: 2rem;
         margin-bottom: 1.25rem;
-        background: linear-gradient(135deg, #eff6ff 0%, #ffffff 70%);
+        background: var(--cs-surface);
     }
 
     .feedback-eyebrow {
diff --git a/templates/forgot_password.html b/templates/forgot_password.html
index ed203f87..6efc0d30 100644
--- a/templates/forgot_password.html
+++ b/templates/forgot_password.html
@@ -7,7 +7,7 @@
     <title>找回密码 - CodeSense 酷森思</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='vendor/bootstrap/5.2.3/css/bootstrap.min.css') }}">
     <style>
-        :root { --brand: #007aff; --ink: #0f172a; --muted: #64748b; }
+        :root { --brand: #237B75; --ink: #0f172a; --muted: #64748b; }
         body { min-height: 100vh; display: grid; place-items: center; margin: 0; padding: 24px; background: #f8fafc; color: var(--ink); }
         .auth-card { width: min(100%, 430px); padding: 36px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 18px 45px rgba(15, 23, 42, .08); }
         .brand { display: inline-flex; align-items: center; text-decoration: none; }
diff --git a/templates/grades.html b/templates/grades.html
index b7dd3143..28c8bb22 100644
--- a/templates/grades.html
+++ b/templates/grades.html
@@ -54,7 +54,7 @@
         border-radius: 999px;
         padding: 0.25rem 0.65rem;
         background: #eef7ff;
-        color: #0d6efd;
+        color: #237B75;
         font-weight: 700;
     }
 
diff --git a/templates/help.html b/templates/help.html
index 3d44659e..c438444e 100644
--- a/templates/help.html
+++ b/templates/help.html
@@ -11,7 +11,7 @@
     }
     
     .help-header {
-        background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
+        background: var(--cs-accent);
         color: white;
         padding: 3rem 2rem;
         border-radius: 1rem;
diff --git a/templates/layout.html b/templates/layout.html
index 0c42f0d2..4a2dc748 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -47,9 +47,9 @@
             gap: 6px;
             margin-right: 14px;
             padding: 5px 10px;
-            border: 1px solid rgba(59, 130, 246, 0.25);
+            border: 1px solid rgba(46, 142, 134, 0.25);
             border-radius: 999px;
-            color: #2563eb;
+            color: #237B75;
             background: rgba(239, 246, 255, 0.86);
             font-size: 0.78rem;
             white-space: nowrap;
diff --git a/templates/login.html b/templates/login.html
index b65ce833..1363c69f 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -18,12 +18,9 @@
         :root {
             --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
             --font-mono: 'JetBrains Mono', monospace;
-            --font-handwriting: 'Caveat', cursive;
-            --font-brush: 'Ma Shan Zheng', cursive;
-            
-            --color-brand-blue: #007aff;
-            --color-surface-dark: #0a0e17;
-            --color-stroke: #2d3748;
+            --color-brand-blue: #237B75;
+            --color-surface-dark: #182B2B;
+            --color-stroke: #DCE7E6;
         }
 
         * {
@@ -51,7 +48,7 @@
         /* --- 左侧面板 --- */
         .left-banner {
             width: 50%;
-            background-color: var(--color-surface-dark);
+            background-color: #F1F7F5;
             position: relative;
             display: flex;
             flex-direction: column;
@@ -79,109 +76,54 @@
             }
         }
 
-        .bg-grid-subtle {
-            position: absolute;
-            inset: 0;
-            background-image: 
-                linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
-                linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
-            background-size: 40px 40px;
-            pointer-events: none;
-            z-index: 1;
-        }
-
-        .glow-blob-1 {
-            position: absolute;
-            top: -10%;
-            left: -10%;
-            width: 60%;
-            height: 60%;
-            background: rgba(0, 122, 255, 0.1);
-            filter: blur(120px);
-            border-radius: 50%;
-            pointer-events: none;
-            z-index: 2;
-        }
-
-        .glow-blob-2 {
-            position: absolute;
-            bottom: -5%;
-            right: -5%;
-            width: 40%;
-            height: 40%;
-            background: rgba(0, 122, 255, 0.05);
-            filter: blur(100px);
-            border-radius: 50%;
-            pointer-events: none;
-            z-index: 2;
-        }
-
-        .typewriter-container {
-            position: relative;
-            z-index: 10;
+        .login-story {
             width: 100%;
-            max-width: 500px;
-            min-height: 160px;
-            display: flex;
-            align-items: center;
-            font-size: 2.5rem;
-            font-weight: 700;
-            color: #fff;
-            line-height: 1.3;
-            letter-spacing: -0.5px;
-        }
-
-        @media (max-width: 576px) {
-            .typewriter-container {
-                font-size: 1.5rem;
-                min-height: 100px;
-            }
+            max-width: 520px;
+            color: #182B2B;
         }
 
-        .text-brand-blue {
-            color: var(--color-brand-blue);
-        }
-
-        .font-highlight {
-            text-shadow: 0 0 15px rgba(0, 122, 255, 0.3);
-            margin: 0 8px;
-            display: inline-block;
-        }
-
-        .font-handwriting {
-            font-family: var(--font-handwriting);
-            font-style: italic;
-            font-size: 3rem;
+        .login-story__mark {
+            color: #237B75;
+            font-size: .82rem;
+            font-weight: 700;
+            letter-spacing: .08em;
         }
 
-        @media (max-width: 576px) {
-            .font-handwriting {
-                font-size: 2rem;
-            }
+        .login-story h1 {
+            max-width: 12em;
+            margin: 1.25rem 0 1rem;
+            font-size: clamp(2rem, 3.3vw, 3.4rem);
+            line-height: 1.23;
+            letter-spacing: -.04em;
         }
 
-        .font-brush {
-            font-family: var(--font-brush);
-            font-size: 3rem;
-            font-weight: 400;
+        .login-story p {
+            max-width: 30em;
+            color: #5E7070;
+            font-size: 1rem;
+            line-height: 1.8;
         }
 
-        @media (max-width: 576px) {
-            .font-brush {
-                font-size: 2rem;
-            }
+        .login-story__steps {
+            display: flex;
+            flex-wrap: wrap;
+            gap: .6rem;
+            margin-top: 2rem;
         }
 
-        .typewriter-cursor::after {
-            content: '|';
-            animation: blink 1s step-end infinite;
-            color: var(--color-brand-blue);
-            margin-left: 2px;
+        .login-story__steps span {
+            padding: .55rem .8rem;
+            border: 1px solid #DCE7E6;
+            border-radius: 9px;
+            background: #fff;
+            color: #315452;
+            font-size: .85rem;
+            font-weight: 600;
         }
 
-        @keyframes blink {
-            from, to { opacity: 1; }
-            50% { opacity: 0; }
+        @media (max-width: 992px) {
+            .login-story h1 { font-size: 2rem; }
+            .login-story__steps { margin-top: 1rem; }
         }
 
         /* --- 右侧面板 --- */
@@ -224,6 +166,7 @@
             display: block;
             width: min(100%, 250px);
             height: auto;
+            filter: hue-rotate(-45deg) saturate(.75);
         }
 
         .login-title-box {
@@ -280,7 +223,7 @@
         .form-control:focus {
             border-color: var(--color-brand-blue);
             background: #fff;
-            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
+            box-shadow: 0 0 0 3px rgba(35, 123, 117, 0.15);
         }
 
         .form-control.is-invalid {
@@ -372,12 +315,12 @@
             align-items: center;
             justify-content: center;
             gap: 8px;
-            box-shadow: 0 10px 15px -3px rgba(0, 122, 255, 0.2);
+            box-shadow: 0 10px 15px -3px rgba(35, 123, 117, 0.2);
             transition: all 0.2s ease;
         }
 
         .btn-login:hover {
-            background: #0066d6;
+            background: #1C625D;
             transform: translateY(-1px);
         }
 
@@ -429,9 +372,9 @@
         .demo-entry {
             margin-top: 1.75rem;
             padding: 1rem;
-            border: 1px solid #dbeafe;
+            border: 1px solid #EAF4F2;
             border-radius: 12px;
-            background: #f8fbff;
+            background: #F5F7F8;
         }
 
         .demo-entry-title {
@@ -461,10 +404,10 @@
             gap: 0.35rem;
             min-height: 2.4rem;
             padding: 0.45rem 0.6rem;
-            border: 1px solid #bfdbfe;
+            border: 1px solid #CDE5E1;
             border-radius: 8px;
             background: #fff;
-            color: #1d4ed8;
+            color: #1C625D;
             font-size: 0.82rem;
             font-weight: 600;
             text-decoration: none;
@@ -472,8 +415,8 @@
         }
 
         .demo-entry-link:hover {
-            border-color: #60a5fa;
-            background: #eff6ff;
+            border-color: #78ADA6;
+            background: #F5F7F8;
         }
 
         @media (max-width: 400px) {
@@ -523,11 +466,15 @@
 <body>
     <!-- 左侧 Banner -->
     <div class="left-banner">
-        <div class="bg-grid-subtle"></div>
-        <div class="glow-blob-1"></div>
-        <div class="glow-blob-2"></div>
-        <div class="typewriter-container">
-            <span id="typewriter-text" class="typewriter-cursor"></span>
+        <div class="login-story">
+            <span class="login-story__mark">CODESENSE · 学习工作台</span>
+            <h1>把每一次编程练习，变成看得见的进步。</h1>
+            <p>查看作业、编写代码、获得有依据的提示。按自己的节奏完成练习，也能清楚看见下一步。</p>
+            <div class="login-story__steps" aria-label="学习流程">
+                <span>01 查看任务</span>
+                <span>02 动手编写</span>
+                <span>03 理解反馈</span>
+            </div>
         </div>
     </div>
 
@@ -649,7 +596,7 @@ <h2 class="login-title">欢迎登录 CodeSense</h2>
         </footer>
     </div>
 
-    <!-- 打字机效果与密码切换脚本 -->
+    <!-- 密码切换脚本 -->
     <script>
         // 登录页加载时清除麦克风测试标记，确保每次登录后重新测试
         try { sessionStorage.removeItem('mic_tested'); } catch(e) {}
@@ -665,73 +612,6 @@ <h2 class="login-title">欢迎登录 CodeSense</h2>
             this.classList.toggle('bi-eye-slash');
         });
 
-        // 打字机数据
-        const PHRASES = [
-            "让 Coding 焕发 智能",
-            "AI 正在重塑您的 逻辑",
-            "AI 驱动的 革命 性体验",
-            "极致 效率 的 智能 工具",
-            "编程是 逻辑 与 艺术 的结合",
-            "开启 AI 协作新范式",
-            "让 智能 深入每一行代码",
-            "效率 就是核心竞争力",
-            "Coding 是一种 艺术",
-            "用 AI 创造无限可能"
-        ];
-        const HIGHLIGHT_KEYWORDS = ['Coding', 'AI', '智能', '效率', '逻辑', '艺术', '革命'];
-
-        let phraseIndex = 0;
-        let charIndex = 0;
-        let isDeleting = false;
-        const typewriterEl = document.getElementById('typewriter-text');
-
-        function type() {
-            const currentPhrase = PHRASES[phraseIndex];
-            let displayText = '';
-
-            if (isDeleting) {
-                displayText = currentPhrase.substring(0, charIndex - 1);
-                charIndex--;
-            } else {
-                displayText = currentPhrase.substring(0, charIndex + 1);
-                charIndex++;
-            }
-
-            // 渲染带高亮的文本
-            const regex = new RegExp(`(${HIGHLIGHT_KEYWORDS.join('|')})`, 'g');
-            const parts = displayText.split(regex);
-
-            typewriterEl.innerHTML = '';
-            parts.forEach(part => {
-                if (HIGHLIGHT_KEYWORDS.includes(part)) {
-                    const isEnglish = /^[A-Za-z]+$/.test(part);
-                    const span = document.createElement('span');
-                    span.className = `text-brand-blue ${isEnglish ? 'font-handwriting' : 'font-brush'} font-highlight`;
-                    span.textContent = part;
-                    typewriterEl.appendChild(span);
-                } else {
-                    const span = document.createElement('span');
-                    span.textContent = part;
-                    typewriterEl.appendChild(span);
-                }
-            });
-
-            let speed = isDeleting ? 40 : 100;
-
-            if (!isDeleting && charIndex === currentPhrase.length) {
-                speed = 2000; // 完整词句停留
-                isDeleting = true;
-            } else if (isDeleting && charIndex === 0) {
-                isDeleting = false;
-                phraseIndex = (phraseIndex + 1) % PHRASES.length;
-                speed = 500; // 开始下一个词句的等待
-            }
-
-            setTimeout(type, speed);
-        }
-
-        // 启动打字机
-        setTimeout(type, 500);
     </script>
 </body>
 
diff --git a/templates/notifications.html b/templates/notifications.html
index cd94be79..018a77af 100644
--- a/templates/notifications.html
+++ b/templates/notifications.html
@@ -50,8 +50,8 @@
     }
 
     .notification-tab[aria-current="page"] {
-        color: #1d4ed8;
-        background: #dbeafe;
+        color: #1C625D;
+        background: #EAF4F2;
         font-weight: 700;
     }
 
diff --git a/templates/parsons_demo.html b/templates/parsons_demo.html
index 157797ef..73baef72 100644
--- a/templates/parsons_demo.html
+++ b/templates/parsons_demo.html
@@ -77,7 +77,7 @@
         <!-- ===== Left Main Column: Stage 2 Workspace ===== -->
         <div class="stage-section active" style="display: block;">
             <div class="panel-header">
-                <h3><i class="bi bi-puzzle"></i> 阶段二：积木编程 <span id="phase-status-text" style="color: #2563eb; font-weight: 600; margin-left: 8px;">(第一批次：外层骨架)</span></h3>
+                <h3><i class="bi bi-puzzle"></i> 阶段二：积木编程 <span id="phase-status-text" style="color: #237B75; font-weight: 600; margin-left: 8px;">(第一批次：外层骨架)</span></h3>
                 <span style="font-size: 12px; color: var(--arena-text-dim);">先搭建最外层头文件与主函数框架，验证锁定后下发内层计算积木</span>
             </div>
             <div class="panel-body">
@@ -143,7 +143,7 @@ <h3><i class="bi bi-puzzle"></i> 阶段二：积木编程 <span id="phase-status
                     <h3><i class="bi bi-robot"></i> AI 学习助手</h3>
                 </div>
                 <div class="panel-body" style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #9ca3af; height: calc(100% - 45px);">
-                    <i class="bi bi-lightbulb" style="font-size: 48px; color: #2563eb; margin-bottom: 16px;"></i>
+                    <i class="bi bi-lightbulb" style="font-size: 48px; color: #237B75; margin-bottom: 16px;"></i>
                     <p style="color: #4b5563; font-size: 13px; margin-bottom: 8px; font-weight: 600;">分批搭建策略启用</p>
                     <p style="font-size: 12px; line-height: 1.6;">请优先从左侧拖入程序的最外层结构（头文件及主函数入口、返回值结束块）。正确闭合后将自动释放内部算法积木。</p>
                 </div>
diff --git a/templates/profile.html b/templates/profile.html
index b4b93978..480ff75b 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -21,7 +21,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
+        background: rgba(35, 52, 61, 0.24);
         z-index: 1;
     }
     
diff --git a/templates/public_profile.html b/templates/public_profile.html
index 69f5c2db..4f2fae0e 100644
--- a/templates/public_profile.html
+++ b/templates/public_profile.html
@@ -11,9 +11,9 @@
 
     .public-profile-card {
         padding: 2rem;
-        border: 1px solid #dbeafe;
+        border: 1px solid #EAF4F2;
         border-radius: 1rem;
-        background: linear-gradient(145deg, #eff6ff, #fff 60%);
+        background: var(--cs-surface);
         box-shadow: var(--shadow-md);
         text-align: center;
     }
@@ -24,8 +24,8 @@
         margin: 0 auto 1rem;
         overflow: hidden;
         border-radius: 50%;
-        background: #dbeafe;
-        color: #2563eb;
+        background: #EAF4F2;
+        color: #237B75;
         font-size: 2.25rem;
         line-height: 5.5rem;
     }
diff --git a/templates/register.html b/templates/register.html
index 512cf4ea..aeae314e 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -22,7 +22,7 @@
     <style>
         body {
             background-color: #f9fafb;
-            background-image: linear-gradient(135deg, #f9fafb 0%, #eef2ff 100%);
+            background-image: none;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -47,7 +47,7 @@
             right: -100px;
             width: 200px;
             height: 200px;
-            background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
+            background: var(--cs-accent-soft);
             border-radius: 50%;
             z-index: 0;
         }
@@ -59,7 +59,7 @@
             left: -80px;
             width: 140px;
             height: 140px;
-            background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
+            background: #F6EEDC;
             border-radius: 50%;
         }
         
@@ -121,9 +121,9 @@
         }
         
         .form-control:focus {
-            border-color: #2563eb;
+            border-color: #237B75;
             outline: none;
-            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+            box-shadow: 0 0 0 3px rgba(35, 123, 117, 0.1);
         }
         
         .form-control.is-invalid {
@@ -176,13 +176,13 @@
         
         .btn-primary {
             color: #ffffff;
-            background-color: #2563eb;
-            border: 1px solid #2563eb;
+            background-color: #237B75;
+            border: 1px solid #237B75;
         }
         
         .btn-primary:hover {
-            background-color: #1d4ed8;
-            border-color: #1d4ed8;
+            background-color: #1C625D;
+            border-color: #1C625D;
         }
         
         .auth-footer {
@@ -193,7 +193,7 @@
         }
         
         .auth-footer a {
-            color: #2563eb;
+            color: #237B75;
             text-decoration: none;
             font-weight: 500;
         }
@@ -333,7 +333,7 @@ <h1 class="auth-title">创建账户</h1>
             
             {{ form.class_name(type="hidden", value="") }}
             <div class="form-group">
-                <div class="alert" style="color:#1f2937;background-color:#eef2ff;">
+                <div class="alert" style="color:#1f2937;background-color:#EAF4F2;">
                     <i class="bi bi-info-circle"></i>
                     <strong>账号模式会自动识别：</strong><br>
                     填写学号：按教师导入的学生名单注册并自动入班。<br>
diff --git a/templates/register_teacher.html b/templates/register_teacher.html
index b86002a5..f88bbc27 100644
--- a/templates/register_teacher.html
+++ b/templates/register_teacher.html
@@ -61,8 +61,8 @@
         .btn-primary {
             width: 100%;
             color: #ffffff;
-            background-color: #2563eb;
-            border: 1px solid #2563eb;
+            background-color: #237B75;
+            border: 1px solid #237B75;
             padding: 0.75rem;
         }
         .alert-danger {
diff --git a/templates/resend_verification.html b/templates/resend_verification.html
index 3fdefb77..00477181 100644
--- a/templates/resend_verification.html
+++ b/templates/resend_verification.html
@@ -7,7 +7,7 @@
     <title>重新发送验证邮件 - CodeSense 酷森思</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='vendor/bootstrap/5.2.3/css/bootstrap.min.css') }}">
     <style>
-        :root { --brand: #007aff; --ink: #0f172a; --muted: #64748b; }
+        :root { --brand: #237B75; --ink: #0f172a; --muted: #64748b; }
         body { min-height: 100vh; display: grid; place-items: center; margin: 0; padding: 24px; background: #f8fafc; color: var(--ink); }
         .auth-card { width: min(100%, 430px); padding: 36px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 18px 45px rgba(15, 23, 42, .08); }
         .brand { display: inline-flex; align-items: center; text-decoration: none; }
diff --git a/templates/reset_password.html b/templates/reset_password.html
index 1bad8bbe..53a6e9b7 100644
--- a/templates/reset_password.html
+++ b/templates/reset_password.html
@@ -7,7 +7,7 @@
     <title>重置密码 - CodeSense 酷森思</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='vendor/bootstrap/5.2.3/css/bootstrap.min.css') }}">
     <style>
-        :root { --brand: #007aff; --ink: #0f172a; --muted: #64748b; }
+        :root { --brand: #237B75; --ink: #0f172a; --muted: #64748b; }
         body { min-height: 100vh; display: grid; place-items: center; margin: 0; padding: 24px; background: #f8fafc; color: var(--ink); }
         .auth-card { width: min(100%, 430px); padding: 36px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 18px 45px rgba(15, 23, 42, .08); }
         .brand { display: inline-flex; align-items: center; text-decoration: none; }
diff --git a/templates/sprofile.html b/templates/sprofile.html
index 021c2882..dd17b531 100644
--- a/templates/sprofile.html
+++ b/templates/sprofile.html
@@ -45,7 +45,7 @@
     }
 
     .profile-kp-card {
-        border: 1px solid #e7edf6;
+        border: 1px solid #DDE5E6;
         border-radius: 14px;
         background: #fff;
     }
@@ -78,8 +78,8 @@
     .profile-ai-card {
         height: 100%;
         border-radius: 12px;
-        background: linear-gradient(145deg, #f8fbff 0%, #ffffff 72%);
-        border: 1px solid #e7edf6;
+        background: var(--cs-surface);
+        border: 1px solid #DDE5E6;
     }
 </style>
 {% endblock %}
@@ -344,10 +344,10 @@ <h4 class="mt-4">恭喜您！目前没有显著瓶颈</h4>
                         skillsData.student.efficiency,
                         skillsData.student.readability
                     ],
-                    backgroundColor: 'rgba(59, 130, 246, 0.4)',
-                    borderColor: 'rgba(59, 130, 246, 1)',
+                    backgroundColor: 'rgba(46, 142, 134, 0.4)',
+                    borderColor: 'rgba(46, 142, 134, 1)',
                     borderWidth: 2,
-                    pointBackgroundColor: 'rgba(59, 130, 246, 1)',
+                    pointBackgroundColor: 'rgba(46, 142, 134, 1)',
                 },
                 ...(skillsData.class_average ? [{
                     label: '全班平均',
@@ -377,13 +377,13 @@ <h4 class="mt-4">恭喜您！目前没有显著瓶颈</h4>
         datasets: [{
             label: '综合能力值',
             data: metaHistory,
-            borderColor: '#3b82f6',
-            backgroundColor: 'rgba(59, 130, 246, 0.1)',
+            borderColor: '#2E8E86',
+            backgroundColor: 'rgba(46, 142, 134, 0.1)',
             fill: true,
             tension: 0.4,
             pointRadius: 6,
             pointBackgroundColor: '#fff',
-            pointBorderColor: '#3b82f6',
+            pointBorderColor: '#2E8E86',
             pointBorderWidth: 3
         }]
     };
diff --git a/templates/staff_details.html b/templates/staff_details.html
index 2cf4da97..287bc539 100644
--- a/templates/staff_details.html
+++ b/templates/staff_details.html
@@ -5,7 +5,7 @@
 {% block extra_css %}
 <style>
 .staff-header {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: var(--cs-accent);
     color: #fff;
     border-radius: 1rem;
     padding: 2rem;
diff --git a/templates/student_details.html b/templates/student_details.html
index d90c2459..7f9dc930 100644
--- a/templates/student_details.html
+++ b/templates/student_details.html
@@ -10,11 +10,11 @@
 
 <style>
     :root {
-        --primary-color: #4361ee;
-        --primary-light: #4895ef;
-        --primary-dark: #3f37c9;
+        --primary-color: #237B75;
+        --primary-light: #5A9C94;
+        --primary-dark: #1C625D;
         --secondary-color: #f72585;
-        --success-color: #4cc9f0;
+        --success-color: #69B5AA;
         --warning-color: #f8961e;
         --danger-color: #f94144;
         --light-color: #f8f9fa;
@@ -35,11 +35,11 @@
     
     /* 暗色模式变量 */
     [data-theme="dark"] {
-        --primary-color: #4895ef;
-        --primary-light: #4cc9f0;
-        --primary-dark: #4361ee;
+        --primary-color: #5A9C94;
+        --primary-light: #69B5AA;
+        --primary-dark: #237B75;
         --secondary-color: #f72585;
-        --success-color: #4cc9f0;
+        --success-color: #69B5AA;
         --warning-color: #f8961e;
         --danger-color: #f94144;
         --light-color: #212529;
@@ -87,7 +87,7 @@
     
     /* 页面标题 */
     .page-header {
-        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+        background: var(--cs-accent);
         color: white;
         padding: 2rem;
         border-radius: var(--border-radius);
diff --git a/templates/student_home.html b/templates/student_home.html
index 531bb475..c186badc 100644
--- a/templates/student_home.html
+++ b/templates/student_home.html
@@ -136,7 +136,7 @@
         display: inline-block;
         width: 2px;
         height: 1em;
-        background-color: #3498db;
+        background-color: #397F79;
         margin-left: 2px;
         animation: blink 0.7s infinite;
         vertical-align: middle;
@@ -218,7 +218,7 @@
 
     /* 不同类型卡片的颜色标识 */
     .section-trend {
-        border-left: 4px solid #3b82f6;
+        border-left: 4px solid #2E8E86;
     }
 
     .section-suggestion {
@@ -245,15 +245,15 @@
     }
 
     .profile-summary-card {
-        border: 1px solid #e8eef7;
+        border: 1px solid #DDE5E6;
         border-radius: 14px;
-        background: linear-gradient(135deg, #f8fbff 0%, #ffffff 72%);
+        background: var(--cs-surface);
         padding: 1rem 1.1rem;
         margin-bottom: 1rem;
     }
 
     .profile-summary-card .summary-value {
-        color: #1e3a8a;
+        color: #23343D;
         font-size: 1.35rem;
         font-weight: 700;
     }
@@ -289,15 +289,15 @@
     }
 
     .analysis-status-panel {
-        border: 1px solid #e8eef7;
+        border: 1px solid #DDE5E6;
         border-radius: 12px;
         padding: 0.9rem 1rem;
         background: #fbfdff;
     }
 
     .free-account-card {
-        border: 1px solid #cfe2ff;
-        background: linear-gradient(135deg, #f5f9ff 0%, #ffffff 72%);
+        border: 1px solid #DDECE9;
+        background: var(--cs-surface);
     }
 
     .free-account-card .join-code-form {
diff --git a/templates/submission_detail.html b/templates/submission_detail.html
index 55234b63..0b0d7b2c 100644
--- a/templates/submission_detail.html
+++ b/templates/submission_detail.html
@@ -163,7 +163,7 @@
     .ai-feedback-header i {
         margin-right: 0.5rem;
         font-size: 1.25rem;
-        color: #4f46e5;
+        color: #237B75;
     }
 
     .ai-feedback-content {
@@ -179,7 +179,7 @@
 
     .ai-badge {
         background-color: #ede9fe;
-        color: #6d28d9;
+        color: #397F79;
     }
 
     .submission-review-section {
diff --git a/templates/submission_evaluating.html b/templates/submission_evaluating.html
index 52050154..8cbfccf1 100644
--- a/templates/submission_evaluating.html
+++ b/templates/submission_evaluating.html
@@ -30,7 +30,7 @@
         width: 100%;
         height: 100%;
         border: 5px solid #e9ecef;
-        border-top: 5px solid #4b6cb7;
+        border-top: 5px solid #237B75;
         border-radius: 50%;
         animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
     }
@@ -41,7 +41,7 @@
         left: 50%;
         transform: translate(-50%, -50%);
         font-size: 3rem;
-        color: #4b6cb7;
+        color: #237B75;
         animation: pulse 2s ease-in-out infinite;
     }
 
@@ -74,9 +74,7 @@
         font-weight: 700;
         color: #1a202c;
         margin-bottom: 0.75rem;
-        background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
+        color: var(--cs-ink);
     }
 
     .sub-text {
@@ -110,7 +108,7 @@
         left: 10%;
         width: 0%;
         height: 3px;
-        background-color: #4b6cb7;
+        background-color: #237B75;
         z-index: 2;
         transition: width 0.5s ease;
     }
@@ -152,9 +150,9 @@
     }
 
     .active .step-icon {
-        background-color: #4b6cb7;
+        background-color: #237B75;
         color: white;
-        border-color: #4b6cb7;
+        border-color: #237B75;
         box-shadow: 0 4px 12px rgba(75, 108, 183, 0.3);
     }
 
diff --git a/templates/submission_history.html b/templates/submission_history.html
index 0578eb32..0faafca7 100644
--- a/templates/submission_history.html
+++ b/templates/submission_history.html
@@ -6,7 +6,7 @@
 {% block extra_css %}
 <style>
     .history-header {
-        background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
+        background: var(--cs-accent);
         color: white;
         border-radius: 0.75rem;
         padding: 1.5rem;
@@ -78,7 +78,7 @@
         width: 1.5rem;
         height: 1.5rem;
         border-radius: 50%;
-        background-color: #4b6cb7;
+        background-color: #237B75;
         transform: translateX(-50%);
         z-index: 1;
     }
diff --git a/templates/submit_code.html b/templates/submit_code.html
index d938f4c4..bec6d3ec 100644
--- a/templates/submit_code.html
+++ b/templates/submit_code.html
@@ -35,12 +35,13 @@
     }
 
     .assignment-header {
-        background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
-        color: white;
+        background: var(--cs-surface);
+        color: var(--cs-ink);
+        border: 1px solid var(--cs-line);
         border-radius: 0.75rem;
         padding: 1.25rem;
         margin-bottom: 1.5rem;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        box-shadow: none;
     }
 
     .assignment-header h1 {
@@ -109,7 +110,7 @@
         justify-content: space-between;
         align-items: center;
         padding: 1.25rem 1.5rem;
-        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+        background: var(--cs-surface);
         color: white;
         flex-shrink: 0;
         border-bottom: 3px solid rgba(255, 255, 255, 0.2);
@@ -125,7 +126,7 @@
         flex: 1;
         overflow-y: auto;
         padding: 1.5rem;
-        background: linear-gradient(to bottom, #f9fafb 0%, #f3f4f6 100%);
+        background: var(--cs-bg);
     }
 
     /* 自定义滚动条 */
@@ -185,14 +186,14 @@
     }
 
     .user-message .ai-message-avatar {
-        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+        background: var(--cs-accent-soft);
         color: white;
         margin-left: 0.875rem;
         order: 2;
     }
 
     .assistant-message .ai-message-avatar {
-        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+        background: var(--cs-accent-soft);
         color: white;
         margin-right: 0.875rem;
     }
@@ -209,7 +210,7 @@
     }
 
     .user-message .ai-message-content {
-        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+        background: var(--cs-accent-soft);
         color: white;
         border-bottom-right-radius: 4px;
     }
@@ -256,15 +257,15 @@
 
     .ai-chat-textarea:focus {
         outline: none;
-        border-color: #8b5cf6;
-        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
+        border-color: #397F79;
+        box-shadow: 0 0 0 3px rgba(57, 127, 121, 0.1);
     }
 
     .ai-send-button {
         width: 48px;
         height: 48px;
         border-radius: 50%;
-        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+        background: var(--cs-accent);
         border: none;
         color: white;
         display: flex;
@@ -274,12 +275,12 @@
         transition: all 0.2s;
         flex-shrink: 0;
         font-size: 1.1rem;
-        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+        box-shadow: 0 4px 12px rgba(57, 127, 121, 0.3);
     }
 
     .ai-send-button:hover:not(:disabled) {
         transform: scale(1.08) translateY(-1px);
-        box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
+        box-shadow: 0 6px 16px rgba(57, 127, 121, 0.4);
     }
 
     .ai-send-button:active:not(:disabled) {
@@ -310,7 +311,7 @@
         width: 7px;
         height: 7px;
         border-radius: 50%;
-        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+        background: var(--cs-accent);
         animation: typingDot 1.4s infinite;
     }
 
@@ -377,7 +378,7 @@
         border: 2px solid #e5e7eb;
         border-radius: 12px;
         background: white;
-        color: #6366f1;
+        color: #237B75;
         font-size: 0.875rem;
         font-weight: 500;
         cursor: pointer;
@@ -386,11 +387,11 @@
     }
 
     .ai-quick-prompt-btn:hover {
-        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+        background: var(--cs-accent-soft);
         color: white;
         border-color: transparent;
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+        box-shadow: 0 4px 12px rgba(35, 123, 117, 0.3);
     }
 
     /* Markdown样式优化 */
@@ -467,7 +468,7 @@
     /* 流式输出打字机光标效果 */
     .ai-message-content[data-streaming="true"]::after {
         content: '▋';
-        color: #8b5cf6;
+        color: #397F79;
         animation: blink 1s step-end infinite;
         margin-left: 2px;
     }
@@ -504,7 +505,7 @@
         font-size: 1.75rem;
         font-weight: 700;
         margin: 0.5rem 0;
-        color: #4b6cb7;
+        color: #237B75;
     }
 
     .submission-history-panel {
@@ -608,7 +609,7 @@
 
     #ai-response h2 {
         font-size: 1.5em;
-        color: #3498db;
+        color: #397F79;
     }
 
     #ai-response h3 {
@@ -673,7 +674,7 @@
     }
 
     #ai-response blockquote {
-        border-left: 4px solid #3498db;
+        border-left: 4px solid #397F79;
         margin: 1em 0;
         padding-left: 1em;
         background-color: #f8f9fa;
@@ -683,7 +684,7 @@
 
     /* 特殊的评分和建议样式 */
     #ai-response .score-highlight {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--cs-accent);
         color: white;
         padding: 0.3em 0.6em;
         border-radius: 20px;
@@ -754,6 +755,7 @@
         }
     }
 </style>
+<link rel="stylesheet" href="{{ url_for('static', filename='css/code-studio-assistant.css') }}">
 {% endblock %}
 
 {% block content %}
@@ -767,7 +769,7 @@ <h1>{{ assignment.title }}</h1>
                 <i class="bi bi-speedometer"></i> {{ assignment.difficulty }}
             </span>
         </div>
-        <div class="d-flex flex-wrap align-items-center text-white-50 mb-3">
+        <div class="d-flex flex-wrap align-items-center text-muted mb-3">
             <div class="me-4">
                 <i class="bi bi-calendar-event"></i>
                 截止日期:
@@ -787,7 +789,7 @@ <h1>{{ assignment.title }}</h1>
             </div>
         </div>
 
-        <button class="btn btn-light" type="button" data-bs-toggle="collapse" data-bs-target="#assignmentDescription">
+        <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#assignmentDescription">
             <i class="bi bi-info-circle"></i> 查看作业详情
         </button>
     </div>
@@ -887,7 +889,7 @@ <h1>{{ assignment.title }}</h1>
         </div>
 
         <!-- AI助手聊天界面 -->
-        <div class="ai-assistant-panel">
+        <div class="ai-assistant-panel code-studio-assistant">
             <div class="ai-assistant-header">
                 <h5 class="mb-0">
                     <i class="bi bi-robot"></i> AI编程助手
@@ -897,11 +899,11 @@ <h5 class="mb-0">
                 </button>
             </div>
 
-            {% if knowledge_evidence is defined %}
-            {{ knowledge_evidence_panel(knowledge_evidence, audience='student', panel_id='code-studio-knowledge-evidence', compact=true, retry_url=url_for('api.get_assignment_knowledge_evidence', assignment_id=assignment.id)) }}
-            {% endif %}
-
             <div class="ai-chat-messages" id="ai-chat-messages">
+                {% if knowledge_evidence is defined %}
+                {{ knowledge_evidence_panel(knowledge_evidence, audience='student', panel_id='code-studio-knowledge-evidence', compact=true, retry_url=url_for('api.get_assignment_knowledge_evidence', assignment_id=assignment.id)) }}
+                {% endif %}
+
                 <!-- 欢迎消息 -->
                 <div class="ai-welcome-message" id="welcome-message">
                     <div class="ai-welcome-icon">🤖</div>
@@ -924,11 +926,10 @@ <h5>你好！我是AI编程助手</h5>
                 </div>
 
                 <!-- 消息将动态添加到这里 -->
+                <div id="code-studio-analysis-evidence" class="knowledge-evidence-receipt-mount"
+                    data-knowledge-evidence-receipt="true"></div>
             </div>
 
-            <div id="code-studio-analysis-evidence" class="knowledge-evidence-receipt-mount"
-                data-knowledge-evidence-receipt="true"></div>
-
             <div class="ai-chat-input-area">
                 <div class="ai-chat-input-wrapper">
                     <textarea class="ai-chat-textarea" id="ai-chat-input" placeholder="输入问题或选择快捷问题..."
diff --git a/templates/teacher_ai_suggestions.html b/templates/teacher_ai_suggestions.html
index 90d8826c..2659bf17 100644
--- a/templates/teacher_ai_suggestions.html
+++ b/templates/teacher_ai_suggestions.html
@@ -33,7 +33,7 @@
     }
 
     .gradient-header {
-        background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
+        background: var(--cs-accent);
         color: white;
         border-radius: 1rem 1rem 0 0;
         padding: 2rem;
@@ -50,9 +50,9 @@
     }
 
     .nav-pills .nav-link.active {
-        background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
+        background: var(--cs-accent);
         color: white;
-        box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
+        box-shadow: 0 4px 6px -1px rgba(35, 123, 117, 0.2);
     }
 
     .nav-pills .nav-link:hover:not(.active) {
@@ -69,7 +69,7 @@
     }
 
     .point-card {
-        border-left: 4px solid #3b82f6;
+        border-left: 4px solid #2E8E86;
         background-color: #f8fafc;
         border-radius: 0.5rem;
         padding: 1rem;
diff --git a/templates/teacher_home.html b/templates/teacher_home.html
index 9c058564..5472c5d8 100644
--- a/templates/teacher_home.html
+++ b/templates/teacher_home.html
@@ -150,8 +150,8 @@
 
     .trend-total {
         border-radius: 0.5rem;
-        background: #eef4ff;
-        color: #2e59d9;
+        background: #EAF4F2;
+        color: #237B75;
         padding: 0.45rem 0.75rem;
         font-weight: 700;
     }
@@ -399,7 +399,7 @@ <h3>{{ attention.low_score_count + attention.no_submission_count + attention.ina
     </div>
 
     <!-- AI 个性化建议 -->
-    <div class="dashboard-section" style="background: linear-gradient(135deg, #f8f9fc 0%, #f1f4f9 100%); border-left: 5px solid #4e73df;">
+    <div class="dashboard-section" style="background: var(--cs-surface); border-left: 5px solid #237B75;">
         <div class="section-title">
             <span><i class="bi bi-cpu text-primary me-2"></i>AI 教学个性化建议</span>
             <a href="{{ url_for('main.teacher_ai_suggestions') }}" class="btn btn-sm btn-primary">
@@ -808,8 +808,8 @@ <h5>{{ card['class'].name }}</h5>
                     datasets: [{
                         label: '提交次数',
                         data: submissionTrend.map(item => item.count),
-                        borderColor: '#2e59d9',
-                        backgroundColor: 'rgba(78, 115, 223, 0.12)',
+                        borderColor: '#237B75',
+                        backgroundColor: 'rgba(35, 123, 117, 0.12)',
                         fill: true,
                         tension: 0.35,
                         pointRadius: 4,
@@ -848,12 +848,12 @@ <h5>{{ card['class'].name }}</h5>
                 datasets: [{
                     data: chartData.sizes,
                     backgroundColor: [
-                        '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b',
-                        '#858796', '#5a5c69', '#2e59d9', '#17a673', '#2c9faf'
+                        '#237B75', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b',
+                        '#858796', '#5a5c69', '#237B75', '#17a673', '#2c9faf'
                     ],
                     hoverBackgroundColor: [
-                        '#2e59d9', '#17a673', '#2c9faf', '#dda20a', '#be2617',
-                        '#60616f', '#373840', '#224abe', '#12825a', '#227e8a'
+                        '#237B75', '#17a673', '#2c9faf', '#dda20a', '#be2617',
+                        '#60616f', '#373840', '#237B75', '#12825a', '#227e8a'
                     ],
                     hoverBorderColor: "rgba(234, 236, 244, 1)",
                 }],
@@ -899,9 +899,9 @@ <h5>{{ card['class'].name }}</h5>
                 datasets: [{
                     label: '平均分（0–100）',
                     data: chartData.scores,
-                    backgroundColor: '#4e73df',
-                    hoverBackgroundColor: '#2e59d9',
-                    borderColor: '#4e73df',
+                    backgroundColor: '#237B75',
+                    hoverBackgroundColor: '#237B75',
+                    borderColor: '#237B75',
                     borderWidth: 1
                 }]
             },
diff --git a/templates/thinking/arena.html b/templates/thinking/arena.html
index ee48ef2c..21ce5c32 100644
--- a/templates/thinking/arena.html
+++ b/templates/thinking/arena.html
@@ -142,7 +142,7 @@ <h3><i class="bi bi-chat-left-text"></i> 阶段一：思路描述</h3>
 
                     <!-- 引导语 -->
                     <div class="stage1-instruction" id="stage1-instruction" style="display: none;">
-                        <i class="bi bi-chat-left-dots-fill" style="color: #2563eb;"></i>
+                        <i class="bi bi-chat-left-dots-fill" style="color: #237B75;"></i>
                         <span>为了确保你真正理解这道题的算法逻辑，请认真思考并回答以下引导问题：</span>
                     </div>
 
diff --git a/templates/users.html b/templates/users.html
index 23479b3d..d2a14f78 100644
--- a/templates/users.html
+++ b/templates/users.html
@@ -10,11 +10,11 @@
 
 <style>
     :root {
-        --primary-color: #4361ee;
-        --primary-light: #4895ef;
-        --primary-dark: #3f37c9;
+        --primary-color: #237B75;
+        --primary-light: #5A9C94;
+        --primary-dark: #1C625D;
         --secondary-color: #f72585;
-        --success-color: #4cc9f0;
+        --success-color: #69B5AA;
         --warning-color: #f8961e;
         --danger-color: #f94144;
         --light-color: #f8f9fa;
@@ -48,11 +48,11 @@
 
     /* 暗色模式变量 */
     [data-theme="dark"] {
-        --primary-color: #4895ef;
-        --primary-light: #4cc9f0;
-        --primary-dark: #4361ee;
+        --primary-color: #5A9C94;
+        --primary-light: #69B5AA;
+        --primary-dark: #237B75;
         --secondary-color: #f72585;
-        --success-color: #4cc9f0;
+        --success-color: #69B5AA;
         --warning-color: #f8961e;
         --danger-color: #f94144;
         --light-color: #212529;
diff --git a/templates/verify_email.html b/templates/verify_email.html
index 2dc048af..494ad78e 100644
--- a/templates/verify_email.html
+++ b/templates/verify_email.html
@@ -7,7 +7,7 @@
     <title>验证邮箱 - CodeSense 酷森思</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='vendor/bootstrap/5.2.3/css/bootstrap.min.css') }}">
     <style>
-        :root { --brand: #007aff; --ink: #0f172a; --muted: #64748b; }
+        :root { --brand: #237B75; --ink: #0f172a; --muted: #64748b; }
         body { min-height: 100vh; display: grid; place-items: center; margin: 0; padding: 24px; background: #f8fafc; color: var(--ink); }
         .auth-card { width: min(100%, 430px); padding: 36px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 18px 45px rgba(15, 23, 42, .08); }
         .brand { display: inline-flex; align-items: center; text-decoration: none; }
diff --git a/tests/test_flat_ui_contract.py b/tests/test_flat_ui_contract.py
new file mode 100644
index 00000000..aa711c7e
--- /dev/null
+++ b/tests/test_flat_ui_contract.py
@@ -0,0 +1,57 @@
+from pathlib import Path
+import re
+
+
+ROOT = Path(__file__).resolve().parents[1]
+CSS = ROOT / "static" / "modern.css"
+
+EXPECTED_COLORS = {
+    "--cs-bg": "#F5F7F8",
+    "--cs-surface": "#FFFFFF",
+    "--cs-ink": "#23343D",
+    "--cs-muted": "#64757D",
+    "--cs-line": "#DDE5E6",
+    "--cs-accent": "#237B75",
+    "--cs-accent-soft": "#EAF4F2",
+    "--cs-input": "#F0F3F3",
+}
+
+
+def test_shared_theme_exposes_flat_semantic_colors():
+    css = CSS.read_text(encoding="utf-8")
+    for name, value in EXPECTED_COLORS.items():
+        assert f"{name}: {value};" in css
+    assert "background-color: var(--cs-bg);" in css
+    assert "background-color: var(--cs-surface);" in css
+    assert "background-color: var(--cs-accent);" in css
+    assert "outline: 3px solid var(--cs-accent);" in css
+
+
+def test_first_party_pages_do_not_use_gradients():
+    gradient = re.compile(r"(?:linear|radial)-gradient\(", re.I)
+    offenders = []
+    for directory, suffix in (("static", ".css"), ("templates", ".html")):
+        for path in (ROOT / directory).rglob(f"*{suffix}"):
+            if "vendor" in path.parts:
+                continue
+            for number, line in enumerate(
+                path.read_text(encoding="utf-8", errors="replace").splitlines(), 1
+            ):
+                if gradient.search(line):
+                    offenders.append(f"{path.relative_to(ROOT)}:{number}")
+    assert not offenders, "Gradient declarations remain in: " + ", ".join(offenders)
+
+
+def test_bootstrap_primary_utilities_follow_the_shared_accent():
+    css = CSS.read_text(encoding="utf-8")
+    for selector in (".bg-primary", ".text-primary", ".btn-outline-primary"):
+        assert selector in css
+    assert "--bs-primary: var(--cs-accent);" in css
+
+
+def test_login_explains_the_product_before_scripts_run():
+    template = (ROOT / "templates" / "login.html").read_text(encoding="utf-8")
+    banner = template.split('class="left-banner"', 1)[1].split(
+        'class="right-panel"', 1
+    )[0]
+    assert re.search(r"<h1>[^<]*编程[^<]*</h1>", banner)
diff --git a/tests/test_knowledge_evidence_ui.py b/tests/test_knowledge_evidence_ui.py
index 6f8ea209..fb2f14e8 100644
--- a/tests/test_knowledge_evidence_ui.py
+++ b/tests/test_knowledge_evidence_ui.py
@@ -40,11 +40,10 @@ def test_evidence_styles_define_tokens_focus_mobile_and_reduced_motion():
     )
 
     for token in (
-        "#14213D",
-        "#2F80ED",
-        "#F7FAFC",
-        "#0F766E",
-        "#B45309",
+        "var(--cs-ink)",
+        "var(--cs-accent)",
+        "var(--cs-accent-soft)",
+        "var(--cs-line)",
     ):
         assert token in css
     assert ":focus-visible" in css
@@ -53,6 +52,32 @@ def test_evidence_styles_define_tokens_focus_mobile_and_reduced_motion():
     assert "@media (prefers-reduced-motion: reduce)" in css
 
 
+def test_compact_evidence_is_a_keyboard_operable_disclosure():
+    macro = (ROOT / "templates" / "components" / "knowledge_evidence.html").read_text(
+        encoding="utf-8"
+    )
+    submit = (ROOT / "templates" / "submit_code.html").read_text(encoding="utf-8")
+
+    assert 'class="knowledge-evidence-panel__compact-disclosure"' in macro
+    assert 'class="knowledge-evidence-panel__compact-summary"' in macro
+    assert "<summary" in macro
+    assert "knowledge-evidence-retry" in macro
+    assert "knowledge-evidence-citation" in macro
+    assert "knowledge-evidence-detail__source" in macro
+    for element_id in ("ai-chat-messages", "ai-chat-input", "ai-send-button", "clear-chat"):
+        assert f'id="{element_id}"' in submit
+    assert 'class="ai-assistant-panel code-studio-assistant"' in submit
+
+
+def test_analysis_evidence_stays_inside_scrollable_chat_messages():
+    submit = (ROOT / "templates" / "submit_code.html").read_text(encoding="utf-8")
+    chat_section = submit.split('id="ai-chat-messages"', 1)[1].split(
+        'class="ai-chat-input-area"', 1
+    )[0]
+    assert 'id="code-studio-analysis-evidence"' in chat_section
+    assert "panel_id='code-studio-knowledge-evidence'" in chat_section
+
+
 def test_submission_and_code_studio_reuse_the_evidence_workspace():
     submission = (ROOT / "templates" / "submission_detail.html").read_text(
         encoding="utf-8"