From a01d57ee96272b0c08432a17f09e6906c6570c28 Mon Sep 17 00:00:00 2001
From: XiaoCow666 <daiyupeng5@gmail.com>
Date: Thu, 1 Oct 2026 17:21:46 +0800
Subject: [PATCH] Revert "Merge pull request #75 from
 XiaoCow666/codex/flat-ui-refresh"

This reverts commit cff31504b75a091edce49a334e9edf87e2974516, reversing
changes made to 5003ed792f5ec0056a7bb5338bc28c0251237617.
---
 .../plans/2026-10-01-flat-ui-refresh.md       | 107 --------
 .../2026-10-01-flat-ui-refresh-design.md      |  57 ----
 static/css/action-center.css                  |  42 +--
 static/css/code-editor.css                    |  14 +-
 static/css/code-studio-assistant.css          | 245 ------------------
 static/css/code_submit.css                    |  14 +-
 static/css/codesense-markdown.css             |  12 +-
 static/css/cpp-editor.css                     |   8 +-
 static/css/knowledge-evidence.css             |  81 +-----
 static/css/modern-editor.css                  |  12 +-
 static/css/thinking.css                       | 200 +++++++-------
 static/img/favicon.svg                        |   2 +-
 static/js/code_questions.js                   |   4 +-
 static/js/thinking.js                         |   2 +-
 static/modern.css                             | 157 +++++------
 templates/about.html                          |   2 +-
 templates/add_assignment.html                 |   2 +-
 templates/admin_dashboard.html                |   2 +-
 templates/admin_profile.html                  |   4 +-
 templates/admin_trend_monitor.html            |  16 +-
 templates/all_submissions.html                |   2 +-
 templates/api_docs.html                       |   2 +-
 templates/classes/class_comparison.html       |   2 +-
 templates/classes/class_detail.html           |   4 +-
 templates/components/knowledge_evidence.html  |  18 --
 templates/components/simple_editor.html       |   6 +-
 templates/contact.html                        |   4 +-
 templates/cot_demo.html                       |  12 +-
 templates/edit_profile.html                   |   2 +-
 templates/editor_demo.html                    |   2 +-
 templates/email_register.html                 |   2 +-
 templates/feedback.html                       |   2 +-
 templates/forgot_password.html                |   2 +-
 templates/grades.html                         |   2 +-
 templates/help.html                           |   2 +-
 templates/layout.html                         |   4 +-
 templates/login.html                          | 238 ++++++++++++-----
 templates/notifications.html                  |   4 +-
 templates/parsons_demo.html                   |   4 +-
 templates/profile.html                        |   2 +-
 templates/public_profile.html                 |   8 +-
 templates/register.html                       |  22 +-
 templates/register_teacher.html               |   4 +-
 templates/resend_verification.html            |   2 +-
 templates/reset_password.html                 |   2 +-
 templates/sprofile.html                       |  18 +-
 templates/staff_details.html                  |   2 +-
 templates/student_details.html                |  18 +-
 templates/student_home.html                   |  16 +-
 templates/submission_detail.html              |   4 +-
 templates/submission_evaluating.html          |  14 +-
 templates/submission_history.html             |   4 +-
 templates/submit_code.html                    |  65 +++--
 templates/teacher_ai_suggestions.html         |   8 +-
 templates/teacher_home.html                   |  24 +-
 templates/thinking/arena.html                 |   2 +-
 templates/users.html                          |  16 +-
 templates/verify_email.html                   |   2 +-
 tests/test_flat_ui_contract.py                |  57 ----
 tests/test_knowledge_evidence_ui.py           |  35 +--
 60 files changed, 570 insertions(+), 1052 deletions(-)
 delete mode 100644 docs/superpowers/plans/2026-10-01-flat-ui-refresh.md
 delete mode 100644 docs/superpowers/specs/2026-10-01-flat-ui-refresh-design.md
 delete mode 100644 static/css/code-studio-assistant.css
 delete mode 100644 tests/test_flat_ui_contract.py

diff --git a/docs/superpowers/plans/2026-10-01-flat-ui-refresh.md b/docs/superpowers/plans/2026-10-01-flat-ui-refresh.md
deleted file mode 100644
index bac4e269..00000000
--- a/docs/superpowers/plans/2026-10-01-flat-ui-refresh.md
+++ /dev/null
@@ -1,107 +0,0 @@
-# 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
deleted file mode 100644
index 2b179486..00000000
--- a/docs/superpowers/specs/2026-10-01-flat-ui-refresh-design.md
+++ /dev/null
@@ -1,57 +0,0 @@
-# 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 f2a07912..4b7aa986 100644
--- a/static/css/action-center.css
+++ b/static/css/action-center.css
@@ -1,10 +1,12 @@
 .action-center-page {
     max-width: 980px;
     margin: 0 auto;
-    color: var(--cs-ink, #23343D);
-    --action-line: #DDE5E6;
-    --action-muted: #5B6E70;
-    --action-soft: #EAF4F2;
+    color: #e8eefc;
+    --action-navy: #0b1530;
+    --action-panel: #111e3e;
+    --action-line: #4ea1ff;
+    --action-muted: #a8b6d2;
+    --action-soft: rgba(78, 161, 255, 0.12);
 }
 
 .action-center-header {
@@ -14,13 +16,13 @@
     gap: 1.5rem;
     padding: 2.2rem clamp(1.25rem, 4vw, 3rem);
     border-radius: 1.25rem;
-    background: #F1F7F5;
-    border: 1px solid var(--action-line);
+    background: linear-gradient(120deg, var(--action-navy), #172a54 70%, #1d3a71);
+    box-shadow: 0 1rem 2.5rem rgba(13, 31, 70, 0.18);
 }
 
 .action-center-eyebrow {
     margin: 0 0 0.7rem;
-    color: #237B75;
+    color: var(--action-line);
     font-size: 0.72rem;
     font-weight: 800;
     letter-spacing: 0.16em;
@@ -28,7 +30,7 @@
 
 .action-center-header h1 {
     margin: 0;
-    color: var(--cs-ink, #23343D);
+    color: #fff;
     font-size: clamp(2rem, 5vw, 3.2rem);
     letter-spacing: -0.04em;
 }
@@ -44,14 +46,14 @@
     display: grid;
     min-width: 8rem;
     padding: 0.9rem 1rem;
-    border: 1px solid var(--action-line);
+    border: 1px solid rgba(255, 255, 255, 0.18);
     border-radius: 0.9rem;
     color: var(--action-muted);
     text-align: right;
 }
 
 .action-center-totals strong {
-    color: var(--cs-ink, #23343D);
+    color: #fff;
     font-size: 2rem;
     line-height: 1;
 }
@@ -59,7 +61,7 @@
 .action-center-status {
     margin: 1.1rem 0 0;
     padding: 0.75rem 1rem;
-    border-left: 3px solid #237B75;
+    border-left: 3px solid var(--action-line);
     color: #334155;
     background: var(--action-soft);
 }
@@ -75,16 +77,16 @@
     padding: 0.5rem 0.8rem;
     border: 1px solid #cbd5e1;
     border-radius: 999px;
-    color: #23343D;
+    color: #1e3a8a;
     background: #fff;
     text-decoration: none;
 }
 
 .action-center-filter:hover,
 .action-center-filter[aria-current="page"] {
-    border-color: #237B75;
-    color: #1C625D;
-    background: #EAF4F2;
+    border-color: var(--action-line);
+    color: #08204d;
+    background: #dbeafe;
 }
 
 .action-center-filter:focus-visible,
@@ -103,7 +105,7 @@
 
 .action-center-item {
     overflow: hidden;
-    border: 1px solid #DDE5E6;
+    border: 1px solid #dbe4f0;
     border-radius: 0.9rem;
     background: #fff;
     box-shadow: 0 0.4rem 1rem rgba(15, 23, 42, 0.06);
@@ -114,7 +116,7 @@
     grid-template-columns: 0.35rem minmax(0, 1fr) auto;
     align-items: stretch;
     min-height: 5.5rem;
-    color: #23343D;
+    color: #172554;
     text-decoration: none;
 }
 
@@ -127,7 +129,7 @@
 }
 
 .action-center-item--next .action-center-item-rail {
-    background: #237B75;
+    background: var(--action-line);
 }
 
 .action-center-item-body {
@@ -150,7 +152,7 @@
 }
 
 .action-center-item-priority {
-    color: #1C625D;
+    color: #1d4ed8;
     font-weight: 800;
 }
 
@@ -161,7 +163,7 @@
 .action-center-item-arrow {
     align-self: center;
     padding: 0 1rem;
-    color: #237B75;
+    color: #2563eb;
     font-size: 1.4rem;
 }
 
diff --git a/static/css/code-editor.css b/static/css/code-editor.css
index bef09a49..5af7c55e 100644
--- a/static/css/code-editor.css
+++ b/static/css/code-editor.css
@@ -28,7 +28,7 @@
 
 .editor-language {
     font-weight: 600;
-    color: #2E8E86;
+    color: #3b82f6;
     display: flex;
     align-items: center;
 }
@@ -65,8 +65,8 @@
 }
 
 .editor-btn.active {
-    background-color: #EAF4F2;
-    color: #237B75;
+    background-color: #dbeafe;
+    color: #2563eb;
 }
 
 /* 下拉菜单 */
@@ -155,7 +155,7 @@
     height: 40px;
     border: 3px solid #e5e7eb;
     border-radius: 50%;
-    border-top-color: #2E8E86;
+    border-top-color: #3b82f6;
     animation: spin 1s linear infinite;
 }
 
@@ -228,8 +228,8 @@
 }
 
 .code-editor.dark-theme .editor-btn.active {
-    background-color: #23343D;
-    color: #78ADA6;
+    background-color: #1e3a8a;
+    color: #60a5fa;
 }
 
 .code-editor.dark-theme .editor-textarea {
@@ -256,7 +256,7 @@
 
 .code-editor.dark-theme .spinner {
     border-color: #374151;
-    border-top-color: #78ADA6;
+    border-top-color: #60a5fa;
 }
 
 .code-editor.dark-theme .loading-text {
diff --git a/static/css/code-studio-assistant.css b/static/css/code-studio-assistant.css
deleted file mode 100644
index 35d775ed..00000000
--- a/static/css/code-studio-assistant.css
+++ /dev/null
@@ -1,245 +0,0 @@
-/* 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 72a83b23..0938407c 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 #397F79;
+    border-top: 2px solid #3498db;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-right: 5px;
@@ -116,7 +116,7 @@
 
 #ask-question-btn {
     padding: 6px 15px;
-    background-color: #237B75;
+    background-color: #007bff;
     color: white;
     border: none;
     border-radius: 4px;
@@ -130,7 +130,7 @@
 }
 
 #ask-question-btn:hover {
-    background-color: #1C625D;
+    background-color: #0069d9;
 }
 
 /* 指导内容样式 */
@@ -340,9 +340,9 @@ pre:hover .copy-button {
 }
 
 .waiting-message {
-    color: #237B75;
+    color: #0d6efd;
     padding: 0.5rem;
-    border-left: 3px solid #237B75;
+    border-left: 3px solid #0d6efd;
     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: #A9D0CA;
+    border-color: #86b7fe;
     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: #237B75;
+    color: #0d6efd;
 }
 
 #get-ai-advice {
diff --git a/static/css/codesense-markdown.css b/static/css/codesense-markdown.css
index 65366bd6..e5e29ab3 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: #EAF4F2;
-    --cs-md-accent: #237B75;
-    --cs-md-accent-soft: #EAF4F2;
+    --cs-md-surface-blue: #f3f7ff;
+    --cs-md-accent: #2563eb;
+    --cs-md-accent-soft: #dbeafe;
     --cs-md-success: #059669;
     --cs-md-warning: #d97706;
     --cs-md-danger: #dc2626;
@@ -93,7 +93,7 @@
 }
 
 .cs-markdown h2 {
-    background: var(--cs-accent-soft);
+    background: linear-gradient(90deg, var(--cs-md-surface-blue), rgba(243, 247, 255, 0));
     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: #F5F7F8;
-    border-left-color: #2E8E86;
+    background: #eff6ff;
+    border-left-color: #3b82f6;
 }
 
 .cs-markdown blockquote.cs-md-callout-tip,
diff --git a/static/css/cpp-editor.css b/static/css/cpp-editor.css
index 7e9a063a..7bef8303 100644
--- a/static/css/cpp-editor.css
+++ b/static/css/cpp-editor.css
@@ -28,7 +28,7 @@
 
 .editor-language {
     font-weight: 600;
-    color: #2E8E86;
+    color: #3b82f6;
     display: flex;
     align-items: center;
 }
@@ -63,8 +63,8 @@
 }
 
 .editor-btn.active {
-    background-color: #EAF4F2;
-    color: #237B75;
+    background-color: #dbeafe;
+    color: #2563eb;
 }
 
 /* 编辑器容器 */
@@ -118,7 +118,7 @@
     height: 40px;
     border: 3px solid #e5e7eb;
     border-radius: 50%;
-    border-top-color: #2E8E86;
+    border-top-color: #3b82f6;
     animation: spin 1s linear infinite;
 }
 
diff --git a/static/css/knowledge-evidence.css b/static/css/knowledge-evidence.css
index 39f9f31d..fd6f8d3e 100644
--- a/static/css/knowledge-evidence.css
+++ b/static/css/knowledge-evidence.css
@@ -1,8 +1,8 @@
 :root {
-    --knowledge-ink: var(--cs-ink);
-    --knowledge-blue: var(--cs-accent);
-    --knowledge-paper: var(--cs-surface);
-    --knowledge-teal: var(--cs-accent);
+    --knowledge-ink: #14213D;
+    --knowledge-blue: #2F80ED;
+    --knowledge-paper: #F7FAFC;
+    --knowledge-teal: #0F766E;
     --knowledge-amber: #B45309;
 }
 
@@ -11,68 +11,15 @@
     padding: 1.35rem 1.5rem;
     color: var(--knowledge-ink);
     background: var(--knowledge-paper);
-    border: 1px solid var(--cs-line);
+    border: 1px solid rgba(20, 33, 61, 0.16);
+    border-left: 4px solid var(--knowledge-blue);
     border-radius: 0.7rem;
-    box-shadow: none;
+    box-shadow: 0 8px 24px rgba(20, 33, 61, 0.07);
 }
 
 .knowledge-evidence-panel--compact {
-    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);
+    margin: 1rem 0;
+    padding: 1rem 1.1rem;
 }
 
 .knowledge-evidence-panel__header {
@@ -167,7 +114,6 @@
 }
 
 .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);
@@ -236,7 +182,7 @@
 
 .knowledge-evidence-retry:hover {
     color: #fff;
-    background: #1C625D;
+    background: #1d64c8;
 }
 
 .knowledge-evidence-receipt__retry {
@@ -253,7 +199,7 @@
 }
 
 .knowledge-evidence-receipt__retry:hover {
-    background: #1C625D;
+    background: #1d64c8;
 }
 
 .knowledge-evidence-receipt__retry:disabled {
@@ -305,11 +251,6 @@
         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 fb2204f9..6eebd593 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: #237B75;
+    color: #6366f1;
 }
 
 .dark-theme .modern-editor-language {
@@ -83,13 +83,13 @@
 
 .modern-editor-tool:hover {
     background-color: #f3f4f6;
-    color: #237B75;
+    color: #6366f1;
     border-color: #d1d5db;
 }
 
 .modern-editor-tool:focus {
     outline: none;
-    box-shadow: 0 0 0 2px rgba(35, 123, 117, 0.3);
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
 }
 
 .dark-theme .modern-editor-tool {
@@ -99,7 +99,7 @@
 
 .dark-theme .modern-editor-tool:hover {
     background-color: #3e3e3e;
-    color: #237B75;
+    color: #6366f1;
 }
 
 /* 编辑器容器 */
@@ -221,9 +221,9 @@
 
 /* 提高textarea的可访问性样式 */
 .modern-editor textarea.form-control:focus-visible {
-    outline: 2px solid #237B75;
+    outline: 2px solid #6366f1;
     outline-offset: 2px;
-    border-color: #237B75;
+    border-color: #6366f1;
 }
 
 /* 高对比度模式支持 */
diff --git a/static/css/thinking.css b/static/css/thinking.css
index 7c59c9a0..e11e2348 100644
--- a/static/css/thinking.css
+++ b/static/css/thinking.css
@@ -43,7 +43,7 @@
     gap: 8px;
 }
 
-.arena-title i { color: #237B75; }
+.arena-title i { color: #2563eb; }
 
 .arena-timer {
     font-family: 'JetBrains Mono', monospace;
@@ -62,9 +62,9 @@
     min-width: 0;
     margin-bottom: 16px;
     padding: 14px 18px;
-    border: 1px solid #DDE5E6;
+    border: 1px solid #dbe4f0;
     border-radius: 10px;
-    background: var(--cs-surface);
+    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
     color: #334155;
 }
 
@@ -83,7 +83,7 @@
 .session-lifecycle-kicker {
     font-size: 13px;
     font-weight: 700;
-    color: #23343D;
+    color: #1e3a8a;
 }
 
 .session-lifecycle-badge {
@@ -109,8 +109,8 @@
 }
 
 .session-lifecycle[data-session-status="completed"] .session-lifecycle-badge {
-    background: #EAF4F2;
-    color: #1C625D;
+    background: #dbeafe;
+    color: #1d4ed8;
 }
 
 .session-lifecycle-meta,
@@ -152,7 +152,7 @@
     width: 0;
     height: 100%;
     border-radius: inherit;
-    background: #237B75;
+    background: #2563eb;
     transition: width 180ms ease;
 }
 
@@ -217,9 +217,9 @@
 }
 
 .step-circle.active {
-    background: #237B75;
+    background: #2563eb;
     color: #fff;
-    border-color: #237B75;
+    border-color: #2563eb;
 }
 
 .step-circle.completed {
@@ -244,7 +244,7 @@
     white-space: nowrap;
 }
 
-.step-label.active { color: #237B75; font-weight: 600; }
+.step-label.active { color: #2563eb; font-weight: 600; }
 .step-label.completed { color: #10b981; }
 
 /* --- Main Content --- */
@@ -419,7 +419,7 @@
     gap: 6px;
 }
 
-.panel-header h3 i { color: #237B75; font-size: 14px; }
+.panel-header h3 i { color: #2563eb; font-size: 14px; }
 
 .stage2-header-meta {
     display: flex;
@@ -435,8 +435,8 @@
 .stage2-answer-progress {
     padding: 3px 8px;
     border-radius: 999px;
-    background: #F5F7F8;
-    color: #1C625D;
+    background: #eff6ff;
+    color: #1d4ed8;
     font-weight: 600;
     white-space: nowrap;
 }
@@ -445,10 +445,10 @@
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    border: 1px solid #EAF4F2;
+    border: 1px solid #dbeafe;
     border-radius: 999px;
-    background: #F5F7F8;
-    color: #237B75;
+    background: #eff6ff;
+    color: #2563eb;
     padding: 4px 8px;
     font-size: 11px;
     line-height: 1;
@@ -458,12 +458,12 @@
 }
 
 .panel-collapse-toggle:hover {
-    background: #EAF4F2;
-    border-color: #A9D0CA;
+    background: #dbeafe;
+    border-color: #93c5fd;
 }
 
 .panel-collapse-toggle:focus-visible {
-    outline: 2px solid #78ADA6;
+    outline: 2px solid #60a5fa;
     outline-offset: 2px;
 }
 
@@ -531,8 +531,8 @@
 
 .description-textarea:focus {
     outline: none;
-    border-color: #237B75;
-    box-shadow: 0 0 0 3px rgba(35, 123, 117, 0.1);
+    border-color: #2563eb;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
 }
 
 .description-textarea::placeholder { color: #9ca3af; }
@@ -587,7 +587,7 @@
 }
 
 .block-solution {
-    border-color: #237B75;
+    border-color: #2563eb;
     border-style: dashed;
 }
 
@@ -611,7 +611,7 @@
 .code-block {
     background: #fff;
     border: 1px solid #e5e7eb;
-    border-left: 3px solid #237B75;
+    border-left: 3px solid #2563eb;
     border-radius: 4px;
     padding: 8px 12px;
     margin-bottom: 4px;
@@ -625,7 +625,7 @@
 }
 
 .code-block:hover {
-    border-color: #237B75;
+    border-color: #2563eb;
     box-shadow: 0 2px 4px rgba(0,0,0,0.08);
 }
 
@@ -679,9 +679,9 @@
 }
 
 .indent-btn:hover {
-    background: #237B75;
+    background: #2563eb;
     color: #fff;
-    border-color: #237B75;
+    border-color: #2563eb;
 }
 
 /* --- Stage 3: Chat --- */
@@ -721,7 +721,7 @@
     background: #f3f4f6;
 }
 
-.chat-avatar.teacher { background: #F5F7F8; }
+.chat-avatar.teacher { background: #eff6ff; }
 .chat-avatar.student { background: #f0fdf4; }
 .chat-avatar.bad-student { background: #fef3c7; }
 
@@ -749,7 +749,7 @@
 }
 
 .chat-bubble.user-msg {
-    background: #237B75;
+    background: #2563eb;
     color: #fff;
     border-bottom-right-radius: 2px;
 }
@@ -816,7 +816,7 @@
     font-family: inherit;
 }
 
-.chat-input:focus { border-color: #237B75; }
+.chat-input:focus { border-color: #2563eb; }
 .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 #EAF4F2;
+    border: 1px solid #dbeafe;
     border-radius: 14px;
-    background: var(--cs-surface);
-    box-shadow: 0 4px 14px rgba(35, 123, 117, 0.06);
+    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 72%);
+    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.06);
 }
 
 .forum-goal-summary {
@@ -880,8 +880,8 @@
     right: 0;
     padding: 3px 7px;
     border-radius: 999px;
-    background: #F5F7F8;
-    color: #237B75;
+    background: #eff6ff;
+    color: #2563eb;
     font-size: 10px;
     font-weight: 700;
 }
@@ -892,7 +892,7 @@
 
 .forum-goal-summary:focus-visible,
 .stage3-guide-summary:focus-visible {
-    outline: 2px solid #237B75;
+    outline: 2px solid #2563eb;
     outline-offset: 3px;
     border-radius: 6px;
 }
@@ -913,7 +913,7 @@
 }
 
 .forum-goal-kicker {
-    color: #237B75;
+    color: #2563eb;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.04em;
@@ -925,7 +925,7 @@
 
 .forum-goal-head h4 {
     margin: 4px 0 0;
-    color: #23343D;
+    color: #172554;
     font-size: 15px;
     line-height: 1.35;
 }
@@ -934,8 +934,8 @@
     flex: 0 0 auto;
     padding: 4px 9px;
     border-radius: 999px;
-    background: #EAF4F2;
-    color: #1C625D;
+    background: #dbeafe;
+    color: #1d4ed8;
     font-size: 11px;
     font-weight: 700;
     white-space: nowrap;
@@ -964,7 +964,7 @@
 .forum-goal-progress-bar {
     height: 100%;
     border-radius: inherit;
-    background: var(--cs-accent);
+    background: linear-gradient(90deg, #2563eb, #22c55e);
     transition: width 0.35s ease;
 }
 
@@ -978,7 +978,7 @@
 }
 
 .forum-goal-progress-meta span:first-child {
-    color: #1C625D;
+    color: #1d4ed8;
     font-weight: 800;
 }
 
@@ -986,8 +986,8 @@
     margin-top: 10px;
     padding: 8px 10px;
     border-radius: 9px;
-    background: #F5F7F8;
-    color: #23343D;
+    background: #eff6ff;
+    color: #1e3a8a;
     font-size: 12px;
     line-height: 1.5;
 }
@@ -1024,14 +1024,14 @@
 }
 
 .forum-goal-step.is-active {
-    border-color: #A9D0CA;
-    background: #F5F7F8;
-    color: #1C625D;
+    border-color: #93c5fd;
+    background: #f8fbff;
+    color: #1e40af;
 }
 
 .forum-goal-step.is-active::before {
     content: '→';
-    color: #237B75;
+    color: #2563eb;
 }
 
 .forum-goal-step.is-done {
@@ -1068,7 +1068,7 @@
     align-items: flex-start;
     gap: 4px;
     padding: 12px 14px;
-    border: 1px solid #DDE5E6;
+    border: 1px solid #dbe4f0;
     border-radius: 10px;
     background: #f8fafc;
     color: #1e293b;
@@ -1078,20 +1078,20 @@
 }
 
 .forum-target-btn:hover {
-    border-color: #A9D0CA;
-    background: #F5F7F8;
+    border-color: #93c5fd;
+    background: #eff6ff;
 }
 
 .forum-target-btn:focus-visible {
-    outline: 2px solid #237B75;
+    outline: 2px solid #2563eb;
     outline-offset: 2px;
 }
 
 .forum-target-btn.is-selected,
 .forum-target-btn[aria-pressed="true"] {
-    border-color: #237B75;
-    background: #EAF4F2;
-    box-shadow: 0 0 0 1px #237B75;
+    border-color: #2563eb;
+    background: #dbeafe;
+    box-shadow: 0 0 0 1px #2563eb;
 }
 
 .forum-target-label {
@@ -1170,11 +1170,11 @@
 }
 
 .forum-avatar.role-user {
-    background: #F5F7F8;
+    background: #eff6ff;
 }
 
 .forum-avatar.role-teacher_agent {
-    background: #EAF4F2;
+    background: #eef2ff;
 }
 
 .forum-avatar.role-student_agent {
@@ -1192,8 +1192,8 @@
 }
 
 .forum-event.is-user .forum-card {
-    background: #F5F7F8;
-    border-color: #CDE5E1;
+    background: #eff6ff;
+    border-color: #bfdbfe;
 }
 
 .forum-meta {
@@ -1233,8 +1233,8 @@
 }
 
 .forum-kind.kind-user_message {
-    background: #EAF4F2;
-    color: #1C625D;
+    background: #dbeafe;
+    color: #1d4ed8;
 }
 
 .forum-kind.kind-agent_message {
@@ -1265,7 +1265,7 @@
 .forum-reply-action {
     border: none;
     background: transparent;
-    color: #237B75;
+    color: #2563eb;
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
@@ -1273,7 +1273,7 @@
 }
 
 .forum-reply-action:hover {
-    color: #1C625D;
+    color: #1d4ed8;
     text-decoration: underline;
 }
 
@@ -1325,7 +1325,7 @@
 }
 
 .stage3-guide-summary > span:first-child i {
-    color: #237B75;
+    color: #2563eb;
 }
 
 .stage3-guide-summary-hint {
@@ -1416,7 +1416,7 @@
 
 .code-fix-input:focus {
     outline: none;
-    border-color: #237B75;
+    border-color: #2563eb;
 }
 
 /* --- Buttons --- */
@@ -1436,12 +1436,12 @@
 }
 
 .arena-btn-primary {
-    background: #237B75;
+    background: #2563eb;
     color: #fff;
 }
 
 .arena-btn-primary:hover {
-    background: #1C625D;
+    background: #1d4ed8;
 }
 
 .arena-btn-primary:disabled {
@@ -1472,7 +1472,7 @@
     height: 34px;
     padding: 0;
     border-radius: 50%;
-    background: #237B75;
+    background: #2563eb;
     color: #fff;
     border: none;
     cursor: pointer;
@@ -1483,18 +1483,18 @@
     flex-shrink: 0;
 }
 
-.arena-btn-send:hover { background: #1C625D; }
+.arena-btn-send:hover { background: #1d4ed8; }
 .arena-btn-send:disabled { opacity: 0.4; cursor: not-allowed; }
 
 /* --- Hint --- */
 .hint-bubble {
-    background: #F5F7F8;
-    border: 1px solid #CDE5E1;
+    background: #eff6ff;
+    border: 1px solid #bfdbfe;
     border-radius: 6px;
     padding: 10px 14px;
     margin: 8px 0;
     font-size: 13px;
-    color: #1C625D;
+    color: #1e40af;
     line-height: 1.5;
     display: flex;
     align-items: flex-start;
@@ -1502,7 +1502,7 @@
 }
 
 .hint-bubble i {
-    color: #237B75;
+    color: #2563eb;
     flex-shrink: 0;
     margin-top: 2px;
 }
@@ -1515,7 +1515,7 @@
     margin-bottom: 0;
 }
 .hint-bubble code {
-    background: rgba(35, 123, 117, 0.1);
+    background: rgba(37, 99, 235, 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 #237B75;
+    border-left: 4px solid #2563eb;
     border-radius: 6px;
     margin-bottom: 12px;
     overflow: hidden;
@@ -1748,7 +1748,7 @@
     border-bottom: 1px solid #e2e8f0;
     font-size: 13px;
     font-weight: 600;
-    color: #23343D;
+    color: #1e3a8a;
     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 #EAF4F2;
+    border: 1px solid #dbeafe;
     border-radius: 8px;
-    background: var(--cs-accent-soft);
-    color: #23343D;
+    background: linear-gradient(90deg, #eff6ff, #f8fbff);
+    color: #1e3a8a;
 }
 
 .stage1-answer-toolbar > div {
@@ -1874,18 +1874,18 @@
     flex: 0 0 auto;
     padding: 3px 8px;
     border-radius: 999px;
-    background: #EAF4F2;
-    color: #1C625D !important;
+    background: #dbeafe;
+    color: #1d4ed8 !important;
     font-size: 11px !important;
     white-space: nowrap;
 }
 
 .stage1-collapsible-panel {
     margin-bottom: 12px;
-    border: 1px solid #CDE5E1;
-    border-left: 4px solid #2E8E86;
+    border: 1px solid #bfdbfe;
+    border-left: 4px solid #3b82f6;
     border-radius: 8px;
-    background: #F5F7F8;
+    background: #eff6ff;
     overflow: hidden;
 }
 
@@ -1898,7 +1898,7 @@
     padding: 10px 12px;
     border: 0;
     background: transparent;
-    color: #23343D;
+    color: #1e3a8a;
     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 #78ADA6;
+    outline: 2px solid #60a5fa;
     outline-offset: -2px;
 }
 
@@ -1923,7 +1923,7 @@
 .stage1-collapse-header i:first-child,
 .stage1-collapse-header > span > i {
     margin-right: 5px;
-    color: #237B75;
+    color: #2563eb;
 }
 
 .stage1-collapse-header small {
@@ -1934,7 +1934,7 @@
 
 .stage1-collapsible-body {
     padding: 0 14px 12px;
-    color: #1C625D;
+    color: #1e40af;
     font-size: 13px;
     line-height: 1.65;
 }
@@ -2000,7 +2000,7 @@
     padding: 10px 12px;
     border: 0;
     background: transparent;
-    color: #6AB5A9;
+    color: #38bdf8;
     cursor: pointer;
     font-family: inherit;
     font-size: 13px;
@@ -2008,7 +2008,7 @@
     text-align: left;
 }
 .dev-debug-toggle:focus-visible {
-    outline: 2px solid #6AB5A9;
+    outline: 2px solid #38bdf8;
     outline-offset: -2px;
 }
 .dev-debug-title {
@@ -2064,10 +2064,10 @@
     transform: scale(0.97);
 }
 .dev-debug-btn-primary {
-    background: #237B75;
+    background: #2563eb;
 }
 .dev-debug-btn-primary:hover {
-    background: #2E8E86;
+    background: #3b82f6;
 }
 .dev-debug-btn-success {
     background: #16a34a;
@@ -2125,7 +2125,7 @@
     margin-top: 4px;
 }
 .dev-debug-trace-key {
-    color: #A9D0CA;
+    color: #7dd3fc;
     font-weight: 600;
 }
 .dev-debug-trace-value {
@@ -2221,9 +2221,9 @@
 }
 
 .quiz-choice-option.selected {
-    border-color: #2E8E86;
-    background: #F5F7F8;
-    box-shadow: 0 0 0 1px #2E8E86;
+    border-color: #3b82f6;
+    background: #eff6ff;
+    box-shadow: 0 0 0 1px #3b82f6;
 }
 
 .quiz-choice-option input[type="radio"] {
@@ -2272,8 +2272,8 @@
 }
 
 .quiz-fill-input:focus {
-    border-color: #2E8E86;
-    box-shadow: 0 0 0 2px rgba(46, 142, 134, 0.15);
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
 }
 
 .quiz-step-feedback {
@@ -2472,10 +2472,10 @@
     }
 
     .mobile-tab-btn.active {
-        color: #237B75;
-        border-bottom-color: #237B75;
+        color: #2563eb;
+        border-bottom-color: #2563eb;
         font-weight: 600;
-        background: rgba(35, 123, 117, 0.03);
+        background: rgba(37, 99, 235, 0.03);
     }
 
     /* 主布局转换为单栏 */
diff --git a/static/img/favicon.svg b/static/img/favicon.svg
index 47508c87..a08773ff 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="#237B75" 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="#3b82f6" 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 910e8a85..ed4d9b46 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: #237B75;
+            color: #0d6efd;
         }
         
         .ai-answer.error .answer-header i {
@@ -762,7 +762,7 @@ function addQuestionStyles() {
             height: 8px;
             width: 8px;
             margin: 0 2px;
-            background-color: #237B75;
+            background-color: #0d6efd;
             border-radius: 50%;
             opacity: 0.6;
             animation: typing 1s infinite;
diff --git a/static/js/thinking.js b/static/js/thinking.js
index 44bfd761..227a3cff 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: #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>`;
+                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>`;
                 
                 const qTextarea = document.createElement('textarea');
                 qTextarea.className = 'description-textarea qa-answer-textarea';
diff --git a/static/modern.css b/static/modern.css
index ed3d5ec9..11aac06f 100644
--- a/static/modern.css
+++ b/static/modern.css
@@ -1,34 +1,25 @@
 /* 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: var(--cs-accent);
-  --primary-hover: #1C625D;
+  --primary-color: #2563eb;
+  /* 深蓝色 */
+  --primary-hover: #1d4ed8;
   --secondary-color: #f59e0b;
   /* 金色点缀 */
 
   /* 中性色 */
-  --dark: var(--cs-ink);
-  --dark-light: #40545D;
-  --medium: var(--cs-muted);
-  --light: var(--cs-bg);
-  --white: var(--cs-surface);
+  --dark: #1f2937;
+  --dark-light: #374151;
+  --medium: #9ca3af;
+  --light: #f3f4f6;
+  --white: #ffffff;
 
   /* 功能色 */
   --success: #10b981;
   --warning: #f59e0b;
   --danger: #ef4444;
-  --info: #2E8E86;
+  --info: #3b82f6;
 
   /* 字体 */
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -52,33 +43,6 @@
   --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;
@@ -88,8 +52,8 @@
 
 body {
   font-family: var(--font-sans);
-  background-color: var(--cs-bg);
-  color: var(--cs-ink);
+  background-color: var(--light);
+  color: var(--dark);
   line-height: 1.5;
 }
 
@@ -113,8 +77,7 @@ a:hover {
 
 /* 导航栏 */
 .navbar {
-  background-color: var(--cs-surface);
-  border-bottom: 1px solid var(--cs-line);
+  background-color: var(--white);
   box-shadow: var(--shadow-sm);
   padding: var(--spacing-md) 0;
   position: sticky;
@@ -143,7 +106,6 @@ a:hover {
 }
 
 .navbar-brand-logo {
-  filter: hue-rotate(-45deg) saturate(.75);
   width: auto;
   height: 34px;
   margin-right: 0 !important;
@@ -174,7 +136,7 @@ a:hover {
 .navbar-link:hover,
 .navbar-link.active {
   color: var(--primary-color);
-  background-color: var(--cs-accent-soft);
+  background-color: rgba(37, 99, 235, 0.05);
 }
 
 .navbar-user {
@@ -237,7 +199,7 @@ a:hover {
 }
 
 :where(a, button, input, select, textarea):focus-visible {
-  outline: 3px solid var(--cs-accent);
+  outline: 3px solid rgba(37, 99, 235, 0.55);
   outline-offset: 3px;
 }
 
@@ -269,8 +231,7 @@ a:hover {
 
 /* 卡片 */
 .card {
-  background-color: var(--cs-surface);
-  border: 1px solid var(--cs-line);
+  background-color: var(--white);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   padding: var(--spacing-lg);
@@ -299,7 +260,7 @@ a:hover {
 .card-badge {
   display: inline-block;
   padding: 4px 8px;
-  background-color: var(--cs-accent-soft);
+  background-color: rgba(37, 99, 235, 0.1);
   color: var(--primary-color);
   border-radius: var(--radius-sm);
   font-size: 0.875rem;
@@ -338,7 +299,7 @@ a:hover {
 }
 
 .btn-primary {
-  background-color: var(--cs-accent);
+  background-color: var(--primary-color);
   color: var(--white);
 }
 
@@ -347,12 +308,12 @@ a:hover {
 }
 
 .btn-secondary {
-  background-color: var(--cs-accent-soft);
+  background-color: rgba(37, 99, 235, 0.1);
   color: var(--primary-color);
 }
 
 .btn-secondary:hover {
-  background-color: #DCEDE9;
+  background-color: rgba(37, 99, 235, 0.15);
 }
 
 .btn-success {
@@ -399,7 +360,7 @@ a:hover {
 .form-control:focus {
   outline: none;
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px rgba(35, 123, 117, 0.15);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
 }
 
 .form-error {
@@ -491,7 +452,7 @@ a:hover {
 }
 
 .badge-primary {
-  background-color: rgba(35, 123, 117, 0.1);
+  background-color: rgba(37, 99, 235, 0.1);
   color: var(--primary-color);
 }
 
@@ -544,7 +505,7 @@ a:hover {
 }
 
 .alert-info {
-  background-color: rgba(46, 142, 134, 0.1);
+  background-color: rgba(59, 130, 246, 0.1);
   color: var(--info);
   border-left: 3px solid var(--info);
 }
@@ -738,7 +699,7 @@ a:hover {
    ========================================================================== */
 
 .maturity-hero {
-    background: var(--cs-ink);
+    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
     color: white;
     padding: 3rem 2rem;
     border-radius: 1rem;
@@ -755,7 +716,7 @@ a:hover {
     right: -10%;
     width: 300px;
     height: 300px;
-    background: transparent;
+    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
     border-radius: 50%;
 }
 
@@ -770,7 +731,9 @@ a:hover {
     font-weight: 800;
     margin: 0;
     line-height: 1;
-    color: var(--cs-surface);
+    background: linear-gradient(to bottom, #fff, #94a3b8);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
 .maturity-label {
@@ -923,9 +886,9 @@ a:hover {
     max-width: 720px;
     margin: 4rem auto;
     padding: 3rem 2rem;
-    border: 1px solid #EAF4F2;
+    border: 1px solid #dbeafe;
     border-radius: 1.25rem;
-    background: var(--cs-surface);
+    background: linear-gradient(145deg, #eff6ff, #ffffff 62%);
     box-shadow: var(--shadow-md);
     text-align: center;
 }
@@ -1018,9 +981,9 @@ a:hover {
 
 .review-queue-filter:hover,
 .review-queue-filter.is-active {
-    color: #1C625D;
-    border-color: #A9D0CA;
-    background: #F5F7F8;
+    color: #1d4ed8;
+    border-color: #93c5fd;
+    background: #eff6ff;
 }
 
 .review-queue-table-wrap {
@@ -1086,12 +1049,12 @@ a:hover {
 .ai-feedback-signal legend {
     float: none;
     width: auto;
-    color: #23343D;
+    color: #4c1d95;
     font-weight: 600;
 }
 
 .review-dashboard-card {
-    border-left: 4px solid #237B75;
+    border-left: 4px solid #2563eb;
 }
 
 @media (max-width: 640px) {
@@ -1120,9 +1083,9 @@ a:hover {
 .learning-graph-panel {
     margin: 0 0 2rem;
     padding: 1.5rem;
-    border: 1px solid #DDE5E6;
+    border: 1px solid #dbe7f5;
     border-radius: var(--radius-lg);
-    background: var(--cs-surface);
+    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 66%);
     box-shadow: 0 8px 24px rgba(30, 64, 175, 0.06);
 }
 
@@ -1142,7 +1105,7 @@ a:hover {
 
 .learning-graph-panel__eyebrow {
     margin: 0 0 0.25rem;
-    color: #237B75;
+    color: #2563eb;
     font-size: 0.78rem;
     font-weight: 700;
     letter-spacing: 0.04em;
@@ -1150,7 +1113,7 @@ a:hover {
 
 .learning-graph-panel__title {
     margin: 0;
-    color: #23343D;
+    color: #172554;
     font-size: 1.35rem;
     font-weight: 750;
 }
@@ -1164,7 +1127,7 @@ a:hover {
 }
 
 .teacher-learning-actions {
-    border: 1px solid #DDE5E6;
+    border: 1px solid #dbe7f5;
     border-radius: var(--radius-lg);
     background: #ffffff;
     box-shadow: var(--shadow-sm);
@@ -1183,7 +1146,7 @@ a:hover {
     padding: 1rem;
     border: 1px solid #e2e8f0;
     border-radius: 0.75rem;
-    background: #F5F7F8;
+    background: #f8fbff;
 }
 
 .teacher-learning-action-card h3,
@@ -1226,8 +1189,8 @@ a:hover {
     padding: 1.25rem;
     border: 1px solid #dbe5f2;
     border-radius: 1rem;
-    background: var(--cs-surface);
-    box-shadow: 0 0.5rem 1.5rem rgba(35, 123, 117, 0.06);
+    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 78%);
+    box-shadow: 0 0.5rem 1.5rem rgba(37, 99, 235, 0.06);
 }
 
 .student-learning-memory-panel__header {
@@ -1268,7 +1231,7 @@ a:hover {
     gap: 0.35rem;
     border-radius: 999px;
     padding: 0.35rem 0.65rem;
-    color: #1C625D;
+    color: #1f4f8f;
     background: #eaf2ff;
     font-size: 0.8rem;
     white-space: nowrap;
@@ -1392,10 +1355,10 @@ a:hover {
 .learning-graph-panel__privacy {
     flex: 0 0 auto;
     padding: 0.35rem 0.65rem;
-    border: 1px solid #CDE5E1;
+    border: 1px solid #bfdbfe;
     border-radius: 999px;
-    color: #1C625D;
-    background: #F5F7F8;
+    color: #1d4ed8;
+    background: #eff6ff;
     font-size: 0.75rem;
     white-space: nowrap;
 }
@@ -1415,7 +1378,7 @@ a:hover {
 }
 
 .learning-graph-panel__summary strong {
-    color: #1C625D;
+    color: #1e40af;
     font-size: 1rem;
 }
 
@@ -1473,7 +1436,7 @@ a:hover {
     height: 100%;
     min-width: 0;
     border-radius: inherit;
-    background: var(--cs-accent);
+    background: linear-gradient(90deg, #60a5fa, #2563eb);
 }
 
 .learning-graph-next {
@@ -1498,23 +1461,23 @@ a:hover {
     justify-content: space-between;
     gap: 1rem;
     padding: 0.7rem 0.8rem;
-    border: 1px solid #EAF4F2;
+    border: 1px solid #dbeafe;
     border-radius: 0.65rem;
-    color: #23343D;
-    background: #F5F7F8;
+    color: #1e3a8a;
+    background: #eff6ff;
     text-decoration: none;
 }
 
 .learning-graph-recommendation:hover,
 .learning-graph-recommendation:focus-visible {
-    color: #23343D;
-    border-color: #A9D0CA;
-    background: #EAF4F2;
+    color: #1e3a8a;
+    border-color: #93c5fd;
+    background: #dbeafe;
 }
 
 .learning-graph-recommendation.is-static:hover {
-    color: #23343D;
-    background: #F5F7F8;
+    color: #1e3a8a;
+    background: #eff6ff;
 }
 
 .learning-graph-recommendation strong,
@@ -1544,7 +1507,7 @@ a:hover {
 }
 
 .learning-graph-coverage-value {
-    color: #1C625D;
+    color: #1d4ed8;
     font-size: 1.7rem;
     font-weight: 750;
     line-height: 1;
@@ -1584,7 +1547,7 @@ a:hover {
     align-items: flex-start;
     gap: 0.75rem;
     padding: 1rem;
-    border: 1px dashed #CDE5E1;
+    border: 1px dashed #bfdbfe;
     border-radius: 0.75rem;
     color: #475569;
     background: rgba(239, 246, 255, 0.65);
@@ -1593,12 +1556,12 @@ a:hover {
 
 .learning-graph-empty > i {
     margin-top: 0.15rem;
-    color: #237B75;
+    color: #2563eb;
     font-size: 1.25rem;
 }
 
 .learning-graph-empty strong {
-    color: #23343D;
+    color: #1e3a8a;
 }
 
 .learning-graph-panel__note {
diff --git a/templates/about.html b/templates/about.html
index cfafab59..5a57eb35 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -11,7 +11,7 @@
     }
     
     .hero-section {
-        background: var(--cs-accent);
+        background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
         color: white;
         padding: 4rem 2rem;
         border-radius: 1rem;
diff --git a/templates/add_assignment.html b/templates/add_assignment.html
index a4e0877c..dbdee9c1 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(35, 123, 117, 0.15);
+        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
         outline: none;
     }
 
diff --git a/templates/admin_dashboard.html b/templates/admin_dashboard.html
index 4daafd4c..0bc78824 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: #237B75; background: #f0f8ff;',
+            info: 'color: #0066cc; 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 90c71b4c..704549d0 100644
--- a/templates/admin_profile.html
+++ b/templates/admin_profile.html
@@ -21,7 +21,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background: rgba(35, 52, 61, 0.24);
+        background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
         z-index: 1;
     }
     
@@ -175,7 +175,7 @@
     
     .badge-role {
         background-color: #e7f0ff;
-        color: #1C625D;
+        color: #0056b3;
         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 04d4bb8f..409f8e85 100644
--- a/templates/admin_trend_monitor.html
+++ b/templates/admin_trend_monitor.html
@@ -5,7 +5,7 @@
 {% block extra_css %}
 <style>
     .stats-card {
-        background: var(--cs-accent);
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
         border: none;
         border-radius: 15px;
@@ -54,28 +54,28 @@
     .refresh-btn {
         border-radius: 25px;
         padding: 0.5rem 1.5rem;
-        background: var(--cs-accent);
+        background: linear-gradient(45deg, #28a745, #20c997);
         border: none;
         color: white;
         transition: all 0.3s ease;
     }
     
     .refresh-btn:hover {
-        background: #1C625D;
+        background: linear-gradient(45deg, #20c997, #28a745);
         transform: translateY(-2px);
     }
     
     .batch-btn {
         border-radius: 25px;
         padding: 0.5rem 1.5rem;
-        background: var(--cs-accent);
+        background: linear-gradient(45deg, #007bff, #6f42c1);
         border: none;
         color: white;
         transition: all 0.3s ease;
     }
     
     .batch-btn:hover {
-        background: #1C625D;
+        background: linear-gradient(45deg, #6f42c1, #007bff);
         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: #B7791F;">
+            <div class="card stats-card text-center" style="background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%);">
                 <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: #237B75;">
+            <div class="card stats-card text-center" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">
                 <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: #B94848;">
+            <div class="card stats-card text-center" style="background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);">
                 <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 3c68aa52..0ad3719d 100644
--- a/templates/all_submissions.html
+++ b/templates/all_submissions.html
@@ -50,7 +50,7 @@
 
     .ai-badge {
         background-color: #ede9fe;
-        color: #397F79;
+        color: #6d28d9;
         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 2a89663a..e8c7c121 100644
--- a/templates/api_docs.html
+++ b/templates/api_docs.html
@@ -73,7 +73,7 @@
     }
     
     .method-post {
-        background-color: #2E8E86;
+        background-color: #3b82f6;
         color: white;
     }
     
diff --git a/templates/classes/class_comparison.html b/templates/classes/class_comparison.html
index 574fe7c7..94d74fbb 100644
--- a/templates/classes/class_comparison.html
+++ b/templates/classes/class_comparison.html
@@ -5,7 +5,7 @@
 {% block extra_css %}
 <style>
     .comparison-header {
-        background: var(--cs-accent);
+        background: linear-gradient(135deg, var(--primary-color), #667eea);
         color: white;
         border-radius: 0.5rem;
         padding: 2rem;
diff --git a/templates/classes/class_detail.html b/templates/classes/class_detail.html
index c001e82e..e7e6b1f2 100644
--- a/templates/classes/class_detail.html
+++ b/templates/classes/class_detail.html
@@ -5,7 +5,7 @@
 {% block extra_css %}
 <style>
     .class-header {
-        background: var(--cs-accent);
+        background: linear-gradient(135deg, var(--primary-color), #667eea);
         color: white;
         border-radius: 0.5rem;
         padding: 2rem;
@@ -166,7 +166,7 @@
 
     .matrix-cell.submitted,
     .legend-submitted {
-        background: #DDECE9;
+        background: #cfe2ff;
         color: #084298;
     }
 
diff --git a/templates/components/knowledge_evidence.html b/templates/components/knowledge_evidence.html
index 18ed5e5f..bb6b120d 100644
--- a/templates/components/knowledge_evidence.html
+++ b/templates/components/knowledge_evidence.html
@@ -3,19 +3,6 @@
 {% 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>
@@ -27,7 +14,6 @@ <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>
@@ -93,9 +79,5 @@ <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 b0ad447c..f2697693 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: #237B75;
+    color: #6366f1;
 }
 
 .editor-actions {
@@ -75,8 +75,8 @@
 }
 
 .editor-btn:hover {
-    background-color: rgba(35, 123, 117, 0.1);
-    color: #237B75;
+    background-color: rgba(99, 102, 241, 0.1);
+    color: #6366f1;
 }
 
 .editor-textarea {
diff --git a/templates/contact.html b/templates/contact.html
index eea99728..187e0a58 100644
--- a/templates/contact.html
+++ b/templates/contact.html
@@ -11,7 +11,7 @@
     }
     
     .contact-header {
-        background: var(--cs-accent);
+        background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
         color: white;
         padding: 3rem 2rem;
         border-radius: 1rem;
@@ -298,7 +298,7 @@
     }
     
     .btn-submit:hover {
-        background-color: #1C625D;
+        background-color: #0056b3;
     }
     
     .research-interests {
diff --git a/templates/cot_demo.html b/templates/cot_demo.html
index 75b2f985..734dae86 100644
--- a/templates/cot_demo.html
+++ b/templates/cot_demo.html
@@ -13,8 +13,8 @@
 <style>
     :root {
         --bg-deep: #020617;
-        --liquid-base: #237B75;
-        --liquid-glow: #78ADA6;
+        --liquid-base: #4f46e5;
+        --liquid-glow: #818cf8;
         --accent-gold: #fbbf24;
     }
 
@@ -53,7 +53,7 @@
         gap: 15px;
         position: relative;
         will-change: transform;
-        box-shadow: 0 8px 32px rgba(35, 123, 117, 0.3);
+        box-shadow: 0 8px 32px rgba(79, 70, 229, 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: transparent;
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
         pointer-events: none;
     }
 
     .logic-block:hover {
         background: var(--liquid-glow);
-        box-shadow: 0 12px 40px rgba(35, 123, 117, 0.5);
+        box-shadow: 0 12px 40px rgba(99, 102, 241, 0.5);
     }
 
     /* 抓取瞬间：至尊液态悬浮感 */
     .sortable-chosen {
-        background: #237B75 !important;
+        background: #6366f1 !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 2ddc5941..bcbf7218 100644
--- a/templates/edit_profile.html
+++ b/templates/edit_profile.html
@@ -60,7 +60,7 @@
     }
 
     .btn-submit:hover {
-        background-color: #1C625D;
+        background-color: #0056b3;
     }
 
     .back-link {
diff --git a/templates/editor_demo.html b/templates/editor_demo.html
index 69b36ce7..9ae876ac 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: var(--cs-ink);
+        background: linear-gradient(125deg, #132b57, #2856b1);
         color: #fff;
     }
 
diff --git a/templates/email_register.html b/templates/email_register.html
index 7454fdfb..7903ab21 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: #237B75; --ink: #0f172a; --muted: #64748b; }
+        :root { --brand: #007aff; --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 80d818cd..995b8e8d 100644
--- a/templates/feedback.html
+++ b/templates/feedback.html
@@ -21,7 +21,7 @@
     .feedback-hero {
         padding: 2rem;
         margin-bottom: 1.25rem;
-        background: var(--cs-surface);
+        background: linear-gradient(135deg, #eff6ff 0%, #ffffff 70%);
     }
 
     .feedback-eyebrow {
diff --git a/templates/forgot_password.html b/templates/forgot_password.html
index 6efc0d30..ed203f87 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: #237B75; --ink: #0f172a; --muted: #64748b; }
+        :root { --brand: #007aff; --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 28c8bb22..b7dd3143 100644
--- a/templates/grades.html
+++ b/templates/grades.html
@@ -54,7 +54,7 @@
         border-radius: 999px;
         padding: 0.25rem 0.65rem;
         background: #eef7ff;
-        color: #237B75;
+        color: #0d6efd;
         font-weight: 700;
     }
 
diff --git a/templates/help.html b/templates/help.html
index c438444e..3d44659e 100644
--- a/templates/help.html
+++ b/templates/help.html
@@ -11,7 +11,7 @@
     }
     
     .help-header {
-        background: var(--cs-accent);
+        background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
         color: white;
         padding: 3rem 2rem;
         border-radius: 1rem;
diff --git a/templates/layout.html b/templates/layout.html
index 4a2dc748..0c42f0d2 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(46, 142, 134, 0.25);
+            border: 1px solid rgba(59, 130, 246, 0.25);
             border-radius: 999px;
-            color: #237B75;
+            color: #2563eb;
             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 1363c69f..b65ce833 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -18,9 +18,12 @@
         :root {
             --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
             --font-mono: 'JetBrains Mono', monospace;
-            --color-brand-blue: #237B75;
-            --color-surface-dark: #182B2B;
-            --color-stroke: #DCE7E6;
+            --font-handwriting: 'Caveat', cursive;
+            --font-brush: 'Ma Shan Zheng', cursive;
+            
+            --color-brand-blue: #007aff;
+            --color-surface-dark: #0a0e17;
+            --color-stroke: #2d3748;
         }
 
         * {
@@ -48,7 +51,7 @@
         /* --- 左侧面板 --- */
         .left-banner {
             width: 50%;
-            background-color: #F1F7F5;
+            background-color: var(--color-surface-dark);
             position: relative;
             display: flex;
             flex-direction: column;
@@ -76,54 +79,109 @@
             }
         }
 
-        .login-story {
-            width: 100%;
-            max-width: 520px;
-            color: #182B2B;
+        .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;
         }
 
-        .login-story__mark {
-            color: #237B75;
-            font-size: .82rem;
+        .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;
+            width: 100%;
+            max-width: 500px;
+            min-height: 160px;
+            display: flex;
+            align-items: center;
+            font-size: 2.5rem;
             font-weight: 700;
-            letter-spacing: .08em;
+            color: #fff;
+            line-height: 1.3;
+            letter-spacing: -0.5px;
         }
 
-        .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;
+        @media (max-width: 576px) {
+            .typewriter-container {
+                font-size: 1.5rem;
+                min-height: 100px;
+            }
         }
 
-        .login-story p {
-            max-width: 30em;
-            color: #5E7070;
-            font-size: 1rem;
-            line-height: 1.8;
+        .text-brand-blue {
+            color: var(--color-brand-blue);
         }
 
-        .login-story__steps {
-            display: flex;
-            flex-wrap: wrap;
-            gap: .6rem;
-            margin-top: 2rem;
+        .font-highlight {
+            text-shadow: 0 0 15px rgba(0, 122, 255, 0.3);
+            margin: 0 8px;
+            display: inline-block;
         }
 
-        .login-story__steps span {
-            padding: .55rem .8rem;
-            border: 1px solid #DCE7E6;
-            border-radius: 9px;
-            background: #fff;
-            color: #315452;
-            font-size: .85rem;
-            font-weight: 600;
+        .font-handwriting {
+            font-family: var(--font-handwriting);
+            font-style: italic;
+            font-size: 3rem;
         }
 
-        @media (max-width: 992px) {
-            .login-story h1 { font-size: 2rem; }
-            .login-story__steps { margin-top: 1rem; }
+        @media (max-width: 576px) {
+            .font-handwriting {
+                font-size: 2rem;
+            }
+        }
+
+        .font-brush {
+            font-family: var(--font-brush);
+            font-size: 3rem;
+            font-weight: 400;
+        }
+
+        @media (max-width: 576px) {
+            .font-brush {
+                font-size: 2rem;
+            }
+        }
+
+        .typewriter-cursor::after {
+            content: '|';
+            animation: blink 1s step-end infinite;
+            color: var(--color-brand-blue);
+            margin-left: 2px;
+        }
+
+        @keyframes blink {
+            from, to { opacity: 1; }
+            50% { opacity: 0; }
         }
 
         /* --- 右侧面板 --- */
@@ -166,7 +224,6 @@
             display: block;
             width: min(100%, 250px);
             height: auto;
-            filter: hue-rotate(-45deg) saturate(.75);
         }
 
         .login-title-box {
@@ -223,7 +280,7 @@
         .form-control:focus {
             border-color: var(--color-brand-blue);
             background: #fff;
-            box-shadow: 0 0 0 3px rgba(35, 123, 117, 0.15);
+            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
         }
 
         .form-control.is-invalid {
@@ -315,12 +372,12 @@
             align-items: center;
             justify-content: center;
             gap: 8px;
-            box-shadow: 0 10px 15px -3px rgba(35, 123, 117, 0.2);
+            box-shadow: 0 10px 15px -3px rgba(0, 122, 255, 0.2);
             transition: all 0.2s ease;
         }
 
         .btn-login:hover {
-            background: #1C625D;
+            background: #0066d6;
             transform: translateY(-1px);
         }
 
@@ -372,9 +429,9 @@
         .demo-entry {
             margin-top: 1.75rem;
             padding: 1rem;
-            border: 1px solid #EAF4F2;
+            border: 1px solid #dbeafe;
             border-radius: 12px;
-            background: #F5F7F8;
+            background: #f8fbff;
         }
 
         .demo-entry-title {
@@ -404,10 +461,10 @@
             gap: 0.35rem;
             min-height: 2.4rem;
             padding: 0.45rem 0.6rem;
-            border: 1px solid #CDE5E1;
+            border: 1px solid #bfdbfe;
             border-radius: 8px;
             background: #fff;
-            color: #1C625D;
+            color: #1d4ed8;
             font-size: 0.82rem;
             font-weight: 600;
             text-decoration: none;
@@ -415,8 +472,8 @@
         }
 
         .demo-entry-link:hover {
-            border-color: #78ADA6;
-            background: #F5F7F8;
+            border-color: #60a5fa;
+            background: #eff6ff;
         }
 
         @media (max-width: 400px) {
@@ -466,15 +523,11 @@
 <body>
     <!-- 左侧 Banner -->
     <div class="left-banner">
-        <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 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>
     </div>
 
@@ -596,7 +649,7 @@ <h2 class="login-title">欢迎登录 CodeSense</h2>
         </footer>
     </div>
 
-    <!-- 密码切换脚本 -->
+    <!-- 打字机效果与密码切换脚本 -->
     <script>
         // 登录页加载时清除麦克风测试标记，确保每次登录后重新测试
         try { sessionStorage.removeItem('mic_tested'); } catch(e) {}
@@ -612,6 +665,73 @@ <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 018a77af..cd94be79 100644
--- a/templates/notifications.html
+++ b/templates/notifications.html
@@ -50,8 +50,8 @@
     }
 
     .notification-tab[aria-current="page"] {
-        color: #1C625D;
-        background: #EAF4F2;
+        color: #1d4ed8;
+        background: #dbeafe;
         font-weight: 700;
     }
 
diff --git a/templates/parsons_demo.html b/templates/parsons_demo.html
index 73baef72..157797ef 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: #237B75; font-weight: 600; margin-left: 8px;">(第一批次：外层骨架)</span></h3>
+                <h3><i class="bi bi-puzzle"></i> 阶段二：积木编程 <span id="phase-status-text" style="color: #2563eb; 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: #237B75; margin-bottom: 16px;"></i>
+                    <i class="bi bi-lightbulb" style="font-size: 48px; color: #2563eb; 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 480ff75b..b4b93978 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -21,7 +21,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background: rgba(35, 52, 61, 0.24);
+        background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
         z-index: 1;
     }
     
diff --git a/templates/public_profile.html b/templates/public_profile.html
index 4f2fae0e..69f5c2db 100644
--- a/templates/public_profile.html
+++ b/templates/public_profile.html
@@ -11,9 +11,9 @@
 
     .public-profile-card {
         padding: 2rem;
-        border: 1px solid #EAF4F2;
+        border: 1px solid #dbeafe;
         border-radius: 1rem;
-        background: var(--cs-surface);
+        background: linear-gradient(145deg, #eff6ff, #fff 60%);
         box-shadow: var(--shadow-md);
         text-align: center;
     }
@@ -24,8 +24,8 @@
         margin: 0 auto 1rem;
         overflow: hidden;
         border-radius: 50%;
-        background: #EAF4F2;
-        color: #237B75;
+        background: #dbeafe;
+        color: #2563eb;
         font-size: 2.25rem;
         line-height: 5.5rem;
     }
diff --git a/templates/register.html b/templates/register.html
index aeae314e..512cf4ea 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -22,7 +22,7 @@
     <style>
         body {
             background-color: #f9fafb;
-            background-image: none;
+            background-image: linear-gradient(135deg, #f9fafb 0%, #eef2ff 100%);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -47,7 +47,7 @@
             right: -100px;
             width: 200px;
             height: 200px;
-            background: var(--cs-accent-soft);
+            background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
             border-radius: 50%;
             z-index: 0;
         }
@@ -59,7 +59,7 @@
             left: -80px;
             width: 140px;
             height: 140px;
-            background: #F6EEDC;
+            background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
             border-radius: 50%;
         }
         
@@ -121,9 +121,9 @@
         }
         
         .form-control:focus {
-            border-color: #237B75;
+            border-color: #2563eb;
             outline: none;
-            box-shadow: 0 0 0 3px rgba(35, 123, 117, 0.1);
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
         }
         
         .form-control.is-invalid {
@@ -176,13 +176,13 @@
         
         .btn-primary {
             color: #ffffff;
-            background-color: #237B75;
-            border: 1px solid #237B75;
+            background-color: #2563eb;
+            border: 1px solid #2563eb;
         }
         
         .btn-primary:hover {
-            background-color: #1C625D;
-            border-color: #1C625D;
+            background-color: #1d4ed8;
+            border-color: #1d4ed8;
         }
         
         .auth-footer {
@@ -193,7 +193,7 @@
         }
         
         .auth-footer a {
-            color: #237B75;
+            color: #2563eb;
             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:#EAF4F2;">
+                <div class="alert" style="color:#1f2937;background-color:#eef2ff;">
                     <i class="bi bi-info-circle"></i>
                     <strong>账号模式会自动识别：</strong><br>
                     填写学号：按教师导入的学生名单注册并自动入班。<br>
diff --git a/templates/register_teacher.html b/templates/register_teacher.html
index f88bbc27..b86002a5 100644
--- a/templates/register_teacher.html
+++ b/templates/register_teacher.html
@@ -61,8 +61,8 @@
         .btn-primary {
             width: 100%;
             color: #ffffff;
-            background-color: #237B75;
-            border: 1px solid #237B75;
+            background-color: #2563eb;
+            border: 1px solid #2563eb;
             padding: 0.75rem;
         }
         .alert-danger {
diff --git a/templates/resend_verification.html b/templates/resend_verification.html
index 00477181..3fdefb77 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: #237B75; --ink: #0f172a; --muted: #64748b; }
+        :root { --brand: #007aff; --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 53a6e9b7..1bad8bbe 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: #237B75; --ink: #0f172a; --muted: #64748b; }
+        :root { --brand: #007aff; --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 dd17b531..021c2882 100644
--- a/templates/sprofile.html
+++ b/templates/sprofile.html
@@ -45,7 +45,7 @@
     }
 
     .profile-kp-card {
-        border: 1px solid #DDE5E6;
+        border: 1px solid #e7edf6;
         border-radius: 14px;
         background: #fff;
     }
@@ -78,8 +78,8 @@
     .profile-ai-card {
         height: 100%;
         border-radius: 12px;
-        background: var(--cs-surface);
-        border: 1px solid #DDE5E6;
+        background: linear-gradient(145deg, #f8fbff 0%, #ffffff 72%);
+        border: 1px solid #e7edf6;
     }
 </style>
 {% endblock %}
@@ -344,10 +344,10 @@ <h4 class="mt-4">恭喜您！目前没有显著瓶颈</h4>
                         skillsData.student.efficiency,
                         skillsData.student.readability
                     ],
-                    backgroundColor: 'rgba(46, 142, 134, 0.4)',
-                    borderColor: 'rgba(46, 142, 134, 1)',
+                    backgroundColor: 'rgba(59, 130, 246, 0.4)',
+                    borderColor: 'rgba(59, 130, 246, 1)',
                     borderWidth: 2,
-                    pointBackgroundColor: 'rgba(46, 142, 134, 1)',
+                    pointBackgroundColor: 'rgba(59, 130, 246, 1)',
                 },
                 ...(skillsData.class_average ? [{
                     label: '全班平均',
@@ -377,13 +377,13 @@ <h4 class="mt-4">恭喜您！目前没有显著瓶颈</h4>
         datasets: [{
             label: '综合能力值',
             data: metaHistory,
-            borderColor: '#2E8E86',
-            backgroundColor: 'rgba(46, 142, 134, 0.1)',
+            borderColor: '#3b82f6',
+            backgroundColor: 'rgba(59, 130, 246, 0.1)',
             fill: true,
             tension: 0.4,
             pointRadius: 6,
             pointBackgroundColor: '#fff',
-            pointBorderColor: '#2E8E86',
+            pointBorderColor: '#3b82f6',
             pointBorderWidth: 3
         }]
     };
diff --git a/templates/staff_details.html b/templates/staff_details.html
index 287bc539..2cf4da97 100644
--- a/templates/staff_details.html
+++ b/templates/staff_details.html
@@ -5,7 +5,7 @@
 {% block extra_css %}
 <style>
 .staff-header {
-    background: var(--cs-accent);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: #fff;
     border-radius: 1rem;
     padding: 2rem;
diff --git a/templates/student_details.html b/templates/student_details.html
index 7f9dc930..d90c2459 100644
--- a/templates/student_details.html
+++ b/templates/student_details.html
@@ -10,11 +10,11 @@
 
 <style>
     :root {
-        --primary-color: #237B75;
-        --primary-light: #5A9C94;
-        --primary-dark: #1C625D;
+        --primary-color: #4361ee;
+        --primary-light: #4895ef;
+        --primary-dark: #3f37c9;
         --secondary-color: #f72585;
-        --success-color: #69B5AA;
+        --success-color: #4cc9f0;
         --warning-color: #f8961e;
         --danger-color: #f94144;
         --light-color: #f8f9fa;
@@ -35,11 +35,11 @@
     
     /* 暗色模式变量 */
     [data-theme="dark"] {
-        --primary-color: #5A9C94;
-        --primary-light: #69B5AA;
-        --primary-dark: #237B75;
+        --primary-color: #4895ef;
+        --primary-light: #4cc9f0;
+        --primary-dark: #4361ee;
         --secondary-color: #f72585;
-        --success-color: #69B5AA;
+        --success-color: #4cc9f0;
         --warning-color: #f8961e;
         --danger-color: #f94144;
         --light-color: #212529;
@@ -87,7 +87,7 @@
     
     /* 页面标题 */
     .page-header {
-        background: var(--cs-accent);
+        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
         color: white;
         padding: 2rem;
         border-radius: var(--border-radius);
diff --git a/templates/student_home.html b/templates/student_home.html
index c186badc..531bb475 100644
--- a/templates/student_home.html
+++ b/templates/student_home.html
@@ -136,7 +136,7 @@
         display: inline-block;
         width: 2px;
         height: 1em;
-        background-color: #397F79;
+        background-color: #3498db;
         margin-left: 2px;
         animation: blink 0.7s infinite;
         vertical-align: middle;
@@ -218,7 +218,7 @@
 
     /* 不同类型卡片的颜色标识 */
     .section-trend {
-        border-left: 4px solid #2E8E86;
+        border-left: 4px solid #3b82f6;
     }
 
     .section-suggestion {
@@ -245,15 +245,15 @@
     }
 
     .profile-summary-card {
-        border: 1px solid #DDE5E6;
+        border: 1px solid #e8eef7;
         border-radius: 14px;
-        background: var(--cs-surface);
+        background: linear-gradient(135deg, #f8fbff 0%, #ffffff 72%);
         padding: 1rem 1.1rem;
         margin-bottom: 1rem;
     }
 
     .profile-summary-card .summary-value {
-        color: #23343D;
+        color: #1e3a8a;
         font-size: 1.35rem;
         font-weight: 700;
     }
@@ -289,15 +289,15 @@
     }
 
     .analysis-status-panel {
-        border: 1px solid #DDE5E6;
+        border: 1px solid #e8eef7;
         border-radius: 12px;
         padding: 0.9rem 1rem;
         background: #fbfdff;
     }
 
     .free-account-card {
-        border: 1px solid #DDECE9;
-        background: var(--cs-surface);
+        border: 1px solid #cfe2ff;
+        background: linear-gradient(135deg, #f5f9ff 0%, #ffffff 72%);
     }
 
     .free-account-card .join-code-form {
diff --git a/templates/submission_detail.html b/templates/submission_detail.html
index 0b0d7b2c..55234b63 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: #237B75;
+        color: #4f46e5;
     }
 
     .ai-feedback-content {
@@ -179,7 +179,7 @@
 
     .ai-badge {
         background-color: #ede9fe;
-        color: #397F79;
+        color: #6d28d9;
     }
 
     .submission-review-section {
diff --git a/templates/submission_evaluating.html b/templates/submission_evaluating.html
index 8cbfccf1..52050154 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 #237B75;
+        border-top: 5px solid #4b6cb7;
         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: #237B75;
+        color: #4b6cb7;
         animation: pulse 2s ease-in-out infinite;
     }
 
@@ -74,7 +74,9 @@
         font-weight: 700;
         color: #1a202c;
         margin-bottom: 0.75rem;
-        color: var(--cs-ink);
+        background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
     }
 
     .sub-text {
@@ -108,7 +110,7 @@
         left: 10%;
         width: 0%;
         height: 3px;
-        background-color: #237B75;
+        background-color: #4b6cb7;
         z-index: 2;
         transition: width 0.5s ease;
     }
@@ -150,9 +152,9 @@
     }
 
     .active .step-icon {
-        background-color: #237B75;
+        background-color: #4b6cb7;
         color: white;
-        border-color: #237B75;
+        border-color: #4b6cb7;
         box-shadow: 0 4px 12px rgba(75, 108, 183, 0.3);
     }
 
diff --git a/templates/submission_history.html b/templates/submission_history.html
index 0faafca7..0578eb32 100644
--- a/templates/submission_history.html
+++ b/templates/submission_history.html
@@ -6,7 +6,7 @@
 {% block extra_css %}
 <style>
     .history-header {
-        background: var(--cs-accent);
+        background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
         color: white;
         border-radius: 0.75rem;
         padding: 1.5rem;
@@ -78,7 +78,7 @@
         width: 1.5rem;
         height: 1.5rem;
         border-radius: 50%;
-        background-color: #237B75;
+        background-color: #4b6cb7;
         transform: translateX(-50%);
         z-index: 1;
     }
diff --git a/templates/submit_code.html b/templates/submit_code.html
index bec6d3ec..d938f4c4 100644
--- a/templates/submit_code.html
+++ b/templates/submit_code.html
@@ -35,13 +35,12 @@
     }
 
     .assignment-header {
-        background: var(--cs-surface);
-        color: var(--cs-ink);
-        border: 1px solid var(--cs-line);
+        background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
+        color: white;
         border-radius: 0.75rem;
         padding: 1.25rem;
         margin-bottom: 1.5rem;
-        box-shadow: none;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
 
     .assignment-header h1 {
@@ -110,7 +109,7 @@
         justify-content: space-between;
         align-items: center;
         padding: 1.25rem 1.5rem;
-        background: var(--cs-surface);
+        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
         color: white;
         flex-shrink: 0;
         border-bottom: 3px solid rgba(255, 255, 255, 0.2);
@@ -126,7 +125,7 @@
         flex: 1;
         overflow-y: auto;
         padding: 1.5rem;
-        background: var(--cs-bg);
+        background: linear-gradient(to bottom, #f9fafb 0%, #f3f4f6 100%);
     }
 
     /* 自定义滚动条 */
@@ -186,14 +185,14 @@
     }
 
     .user-message .ai-message-avatar {
-        background: var(--cs-accent-soft);
+        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
         color: white;
         margin-left: 0.875rem;
         order: 2;
     }
 
     .assistant-message .ai-message-avatar {
-        background: var(--cs-accent-soft);
+        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
         color: white;
         margin-right: 0.875rem;
     }
@@ -210,7 +209,7 @@
     }
 
     .user-message .ai-message-content {
-        background: var(--cs-accent-soft);
+        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
         color: white;
         border-bottom-right-radius: 4px;
     }
@@ -257,15 +256,15 @@
 
     .ai-chat-textarea:focus {
         outline: none;
-        border-color: #397F79;
-        box-shadow: 0 0 0 3px rgba(57, 127, 121, 0.1);
+        border-color: #8b5cf6;
+        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
     }
 
     .ai-send-button {
         width: 48px;
         height: 48px;
         border-radius: 50%;
-        background: var(--cs-accent);
+        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
         border: none;
         color: white;
         display: flex;
@@ -275,12 +274,12 @@
         transition: all 0.2s;
         flex-shrink: 0;
         font-size: 1.1rem;
-        box-shadow: 0 4px 12px rgba(57, 127, 121, 0.3);
+        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
     }
 
     .ai-send-button:hover:not(:disabled) {
         transform: scale(1.08) translateY(-1px);
-        box-shadow: 0 6px 16px rgba(57, 127, 121, 0.4);
+        box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
     }
 
     .ai-send-button:active:not(:disabled) {
@@ -311,7 +310,7 @@
         width: 7px;
         height: 7px;
         border-radius: 50%;
-        background: var(--cs-accent);
+        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
         animation: typingDot 1.4s infinite;
     }
 
@@ -378,7 +377,7 @@
         border: 2px solid #e5e7eb;
         border-radius: 12px;
         background: white;
-        color: #237B75;
+        color: #6366f1;
         font-size: 0.875rem;
         font-weight: 500;
         cursor: pointer;
@@ -387,11 +386,11 @@
     }
 
     .ai-quick-prompt-btn:hover {
-        background: var(--cs-accent-soft);
+        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
         color: white;
         border-color: transparent;
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(35, 123, 117, 0.3);
+        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
     }
 
     /* Markdown样式优化 */
@@ -468,7 +467,7 @@
     /* 流式输出打字机光标效果 */
     .ai-message-content[data-streaming="true"]::after {
         content: '▋';
-        color: #397F79;
+        color: #8b5cf6;
         animation: blink 1s step-end infinite;
         margin-left: 2px;
     }
@@ -505,7 +504,7 @@
         font-size: 1.75rem;
         font-weight: 700;
         margin: 0.5rem 0;
-        color: #237B75;
+        color: #4b6cb7;
     }
 
     .submission-history-panel {
@@ -609,7 +608,7 @@
 
     #ai-response h2 {
         font-size: 1.5em;
-        color: #397F79;
+        color: #3498db;
     }
 
     #ai-response h3 {
@@ -674,7 +673,7 @@
     }
 
     #ai-response blockquote {
-        border-left: 4px solid #397F79;
+        border-left: 4px solid #3498db;
         margin: 1em 0;
         padding-left: 1em;
         background-color: #f8f9fa;
@@ -684,7 +683,7 @@
 
     /* 特殊的评分和建议样式 */
     #ai-response .score-highlight {
-        background: var(--cs-accent);
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
         padding: 0.3em 0.6em;
         border-radius: 20px;
@@ -755,7 +754,6 @@
         }
     }
 </style>
-<link rel="stylesheet" href="{{ url_for('static', filename='css/code-studio-assistant.css') }}">
 {% endblock %}
 
 {% block content %}
@@ -769,7 +767,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-muted mb-3">
+        <div class="d-flex flex-wrap align-items-center text-white-50 mb-3">
             <div class="me-4">
                 <i class="bi bi-calendar-event"></i>
                 截止日期:
@@ -789,7 +787,7 @@ <h1>{{ assignment.title }}</h1>
             </div>
         </div>
 
-        <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#assignmentDescription">
+        <button class="btn btn-light" type="button" data-bs-toggle="collapse" data-bs-target="#assignmentDescription">
             <i class="bi bi-info-circle"></i> 查看作业详情
         </button>
     </div>
@@ -889,7 +887,7 @@ <h1>{{ assignment.title }}</h1>
         </div>
 
         <!-- AI助手聊天界面 -->
-        <div class="ai-assistant-panel code-studio-assistant">
+        <div class="ai-assistant-panel">
             <div class="ai-assistant-header">
                 <h5 class="mb-0">
                     <i class="bi bi-robot"></i> AI编程助手
@@ -899,11 +897,11 @@ <h5 class="mb-0">
                 </button>
             </div>
 
-            <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 %}
+            {% 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">
                 <!-- 欢迎消息 -->
                 <div class="ai-welcome-message" id="welcome-message">
                     <div class="ai-welcome-icon">🤖</div>
@@ -926,10 +924,11 @@ <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 2659bf17..90d8826c 100644
--- a/templates/teacher_ai_suggestions.html
+++ b/templates/teacher_ai_suggestions.html
@@ -33,7 +33,7 @@
     }
 
     .gradient-header {
-        background: var(--cs-accent);
+        background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
         color: white;
         border-radius: 1rem 1rem 0 0;
         padding: 2rem;
@@ -50,9 +50,9 @@
     }
 
     .nav-pills .nav-link.active {
-        background: var(--cs-accent);
+        background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
         color: white;
-        box-shadow: 0 4px 6px -1px rgba(35, 123, 117, 0.2);
+        box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
     }
 
     .nav-pills .nav-link:hover:not(.active) {
@@ -69,7 +69,7 @@
     }
 
     .point-card {
-        border-left: 4px solid #2E8E86;
+        border-left: 4px solid #3b82f6;
         background-color: #f8fafc;
         border-radius: 0.5rem;
         padding: 1rem;
diff --git a/templates/teacher_home.html b/templates/teacher_home.html
index 5472c5d8..9c058564 100644
--- a/templates/teacher_home.html
+++ b/templates/teacher_home.html
@@ -150,8 +150,8 @@
 
     .trend-total {
         border-radius: 0.5rem;
-        background: #EAF4F2;
-        color: #237B75;
+        background: #eef4ff;
+        color: #2e59d9;
         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: var(--cs-surface); border-left: 5px solid #237B75;">
+    <div class="dashboard-section" style="background: linear-gradient(135deg, #f8f9fc 0%, #f1f4f9 100%); border-left: 5px solid #4e73df;">
         <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: '#237B75',
-                        backgroundColor: 'rgba(35, 123, 117, 0.12)',
+                        borderColor: '#2e59d9',
+                        backgroundColor: 'rgba(78, 115, 223, 0.12)',
                         fill: true,
                         tension: 0.35,
                         pointRadius: 4,
@@ -848,12 +848,12 @@ <h5>{{ card['class'].name }}</h5>
                 datasets: [{
                     data: chartData.sizes,
                     backgroundColor: [
-                        '#237B75', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b',
-                        '#858796', '#5a5c69', '#237B75', '#17a673', '#2c9faf'
+                        '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b',
+                        '#858796', '#5a5c69', '#2e59d9', '#17a673', '#2c9faf'
                     ],
                     hoverBackgroundColor: [
-                        '#237B75', '#17a673', '#2c9faf', '#dda20a', '#be2617',
-                        '#60616f', '#373840', '#237B75', '#12825a', '#227e8a'
+                        '#2e59d9', '#17a673', '#2c9faf', '#dda20a', '#be2617',
+                        '#60616f', '#373840', '#224abe', '#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: '#237B75',
-                    hoverBackgroundColor: '#237B75',
-                    borderColor: '#237B75',
+                    backgroundColor: '#4e73df',
+                    hoverBackgroundColor: '#2e59d9',
+                    borderColor: '#4e73df',
                     borderWidth: 1
                 }]
             },
diff --git a/templates/thinking/arena.html b/templates/thinking/arena.html
index 21ce5c32..ee48ef2c 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: #237B75;"></i>
+                        <i class="bi bi-chat-left-dots-fill" style="color: #2563eb;"></i>
                         <span>为了确保你真正理解这道题的算法逻辑，请认真思考并回答以下引导问题：</span>
                     </div>
 
diff --git a/templates/users.html b/templates/users.html
index d2a14f78..23479b3d 100644
--- a/templates/users.html
+++ b/templates/users.html
@@ -10,11 +10,11 @@
 
 <style>
     :root {
-        --primary-color: #237B75;
-        --primary-light: #5A9C94;
-        --primary-dark: #1C625D;
+        --primary-color: #4361ee;
+        --primary-light: #4895ef;
+        --primary-dark: #3f37c9;
         --secondary-color: #f72585;
-        --success-color: #69B5AA;
+        --success-color: #4cc9f0;
         --warning-color: #f8961e;
         --danger-color: #f94144;
         --light-color: #f8f9fa;
@@ -48,11 +48,11 @@
 
     /* 暗色模式变量 */
     [data-theme="dark"] {
-        --primary-color: #5A9C94;
-        --primary-light: #69B5AA;
-        --primary-dark: #237B75;
+        --primary-color: #4895ef;
+        --primary-light: #4cc9f0;
+        --primary-dark: #4361ee;
         --secondary-color: #f72585;
-        --success-color: #69B5AA;
+        --success-color: #4cc9f0;
         --warning-color: #f8961e;
         --danger-color: #f94144;
         --light-color: #212529;
diff --git a/templates/verify_email.html b/templates/verify_email.html
index 494ad78e..2dc048af 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: #237B75; --ink: #0f172a; --muted: #64748b; }
+        :root { --brand: #007aff; --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
deleted file mode 100644
index aa711c7e..00000000
--- a/tests/test_flat_ui_contract.py
+++ /dev/null
@@ -1,57 +0,0 @@
-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 fb2f14e8..6f8ea209 100644
--- a/tests/test_knowledge_evidence_ui.py
+++ b/tests/test_knowledge_evidence_ui.py
@@ -40,10 +40,11 @@ def test_evidence_styles_define_tokens_focus_mobile_and_reduced_motion():
     )
 
     for token in (
-        "var(--cs-ink)",
-        "var(--cs-accent)",
-        "var(--cs-accent-soft)",
-        "var(--cs-line)",
+        "#14213D",
+        "#2F80ED",
+        "#F7FAFC",
+        "#0F766E",
+        "#B45309",
     ):
         assert token in css
     assert ":focus-visible" in css
@@ -52,32 +53,6 @@ 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"