diff --git a/.project-docs/30-worklog/tasks/20260924-workspace-style-6f2e84b9.md b/.project-docs/30-worklog/tasks/20260924-workspace-style-6f2e84b9.md
new file mode 100644
index 00000000..e15a6ca7
--- /dev/null
+++ b/.project-docs/30-worklog/tasks/20260924-workspace-style-6f2e84b9.md
@@ -0,0 +1,49 @@
+# Task: Complete approved playful workspace styling and update current trial
+
+## Identity
+
+- Task ID: 20260924-workspace-style-6f2e84b9
+- Mode: Feature
+- Branch: codex/20260924-workspace-style-6f2e84b9-workspace-style
+- Worktree: /Users/chillishark/Makelore 麦洛/.codex-worktrees/makelore-workspace-style
+- Base commit: eb3dc85a2f0ed8457b7f24684c2da3ab192c2e46
+- Owner: codex
+- Status: Ready for Integration
+
+## Scope
+
+- Port the approved playful workbench appearance into the real Code sidebar, title rail, conversation tabs/composer and teacher shell; refresh the existing isolated native trial.
+- Own Renderer markup/CSS and this record/README. Preserve project/conversation actions, resizing/peek, authentication, teacher protocol and other module appearances.
+
+## Intent And Constraints
+
+- User explicitly requested the missing approved style be completed now. Use generic gamepad icons, pale blue navigation, colored icon tiles and rounded selected project/conversation surfaces.
+- Reference: `makelore-teacher-playful-cards.html` in the task visualization directory. Visual reference only; do not restore obsolete discussion interactions from that prototype.
+- Context/Planning Gates passed: task identity and worktree verified; project positioning, integrated state, decisions, architecture, business rules and active peer scopes loaded.
+- Teacher owner committed `e657a7d` after coordination. Imported unchanged by fast-forward before styling, so the trial retains its verified prompt refinements. No foreign uncommitted changes adopted.
+- Plan: implement scoped presentation; run existing layout/navigation tests, typecheck/lint/build; review native trial appearance without sending teacher messages; record and commit.
+
+## Outcome
+
+- Completed the missing approved appearance in real Code navigation: pale blue sidebar/title rail, warm brand tile, white raised new-project button, stable colored generic gamepad tiles, white active project cards, blue conversation selection, rounded workspace tabs and cream teacher header.
+- Preserved project/conversation handlers, accessibility names, collapsible/resize behavior and other-module navigation. Account footer remains non-shrinking; narrowed conversation controls fit the 128px rail after independent review identified excess indentation.
+- Rebuilt and restarted the existing `cn.makelore.teacher-presence.trial` bundle with the same isolated profile and port 54599. PID 7198 runs this worktree's `dist-electron/main/index.js`; native AX confirms this worktree's `/chat` URL and original `alice的游戏` / `hello` navigation. CUA screenshot visibly confirms the new left navigation/cards/tabs. No project creation or teacher message was sent in the user's profile.
+- Trial is currently unauthenticated; teacher chat displays `请先登录`. This visual task does not validate live teacher behavior or change credentials.
+
+## Verification
+
+- Corepack pnpm 10.33.4: standard typecheck, ESLint on four changed TSX files, production Renderer/Main/Preload/utility build passed.
+- Existing titlebar, sidebar peek, module gate, coding chat and account suites: 5 files / 58 tests passed.
+- Existing Electron fixture tests: conversation rename/archive/restore and project consultation draft preservation passed (2 tests). These cover real Sidebar rendering, 128/256/default rail resizing and title synchronization, collapse, conversation/teacher/work switching; requests are fixture-owned, not real teacher calls.
+- Reviewed generated Electron screenshot `test-results/pi-coding-first-chat-proje-4670e-t-without-submitting-advice/project-teacher-side-chat.png`; cream header and blue navigation rendered correctly. Native CUA verified the user's existing trial visibly uses the new sidebar. Additional exhaustive window/zoom combinations were not run.
+- Independent agent reviewed styling and module isolation; its narrow-width control clipping concern was fixed before the final build/tests. `git diff --check` passed.
+- Task drift checker reports `FOREIGN_DOC` for the unchanged teacher-focus record imported by fast-forward from `e657a7d` because the registered base is `eb3dc85`. Verified byte-for-byte equality to the owning task's commit, including unchanged Main prompt; no edits to that record or canonical project docs. Task-owned delta after that source commit is only this record plus README/Renderer files. This is an imported-source limitation of the checker, not an adopted foreign edit.
+
+## Follow-ups
+
+- Main/remote integration is not performed by this feature task; the existing native trial runs the committed feature worktree. Retain this worktree while that trial uses it.
+- User owns detailed live teacher testing after login.
+
+## Promotion Candidates
+
+- Target: integrated current-state when this feature lands. Record that approved playful Code workbench styling is now implemented (earlier source changed only the generic icon). Evidence: source diff, 58 unit/2 Electron tests and native trial screenshot. No teaching protocol, data model or architectural decision changes; no contradictory direction or new approval needed.
diff --git a/README.md b/README.md
index f4eedf21..1902a3b2 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@ Code 会话保存的模型被下架后，会提示重新选择可用模型；用
 Makelore 是一个面向软件、视觉创作、智能机器人与个人云智能体的 AI 桌面工作台。当前版本为 `2.0.0`，源码提供四个模块入口；云智能体需配套配置 WS/Yuxi 服务。模块入口页按 Agents、Code、Canvas、Robot 排列，统一采用横向插画卡片；Agents 标语为“打造你想象中的AI助手”。工作区左上角入口点击后返回模块入口页：
 
 - `Makelore Code｜AI 编程`：管理本地项目、项目智能体、对话、文件上下文、代码变更和运行时。
+  会话工作台采用浅蓝项目栏、彩色通用手柄图标与卡片选中态；中间对话/作品使用圆角标签，右侧老师使用奶油色标题区。沿用真实项目和会话入口、侧栏伸缩与账户菜单，样式只作用于 Code 会话工作台。
 - `Makelore Agents｜AI 智能体`：配置个人云智能体并试聊，发布后正式对话、接入个人微信或创建应用 API Key。支持流式回复、审批、排队请求、附件与产物、自动任务和活动历史；重新进入时恢复最近智能体与对话，未确认操作可按原输入重试。聊天可提出日程建议，由创建者核对能力、时间和费用后启用。知识库上传、替换及导入本人会话附件后自动解析并建立索引；文档卡片区分排队、解析、索引、可用和失败，持续刷新已加载文档，失败可原地重试；零文本内容不会显示为可用，新文档可用后才移除被替换的旧文档。支持删除知识内容；个人 MCP 凭据、Skills、子智能体可自助管理。支持智能体和会话归档、发布版本比较及恢复为草稿。除知识库 embedding 向量化外，模型调用（包括知识处理触发的对话模型调用）仍按原规则由创建者个人词元点数支付，可按智能体设置每次任务和每日上限，费用按时间、来源、应用分页统计；embedding 向量化由平台承担，不计入用户用量、词元点数或智能体费用上限；应用调用者保有自己的内容空间。Main 管理云会话和本机文件，Renderer 通过 Host API 操作。配套服务接入见 [Yuxi MakeLore 说明](https://xerrors.github.io/Yuxi/advanced/makelore-agents.html)。 编辑采用全高桌面分栏，支持拖动调整与展开、独立滚动、小窗口配置/试用切换。首次创建按选用途、说要求、试一试引导，提供科学问答、故事、英语和笔记整理起点；回答方式可多选，特别要求直接编辑，仍以草稿的 system_prompt 保存。新助手预选云端目录的第一个可用模型并明确显示，可自行更换；已有助手不自动换模型。编辑区以“我的要求”和“高级设置”两个 Tab 切换，默认显示基础要求；高级设置包含能力、知识与限制，返回时保留上次分类，切换保留未保存的输入及当前试用。已开始使用的助手在顶部显示“修改已保存，尚未应用”或“已应用最新修改”，并提供显眼的“应用最新修改”按钮；保存只更新草稿，应用沿用同一发布操作，失败重试保留原操作身份。草稿明确保存（Ctrl/⌘+S），保存与切换页面保留当前试用及未发送文字；“保存并重新试用”使用最新保存的要求，保留上次试用供对比，并可复用上次问题，不自动发送。示例问题仅填入输入框；有运行、排队、审批或未确认操作时先处理当前试用。工具确认先展示实际操作说明与参数，完整技术详情可展开。确认“开始使用”会创建仅自己可用的发布版本并进入独立对话，微信渠道与应用接入仍单独配置。费用上限在限制中独立保存。Enter 发送、Shift+Enter 换行，F6 切换面板焦点、Esc 恢复分栏。
 
   云知识库的 embedding 模型只由平台管理员在 Yuxi 后台维护：在「智能体管理 → 模型供应商」启用供应商，按供应商要求填写有效的服务地址和 API Key，添加并启用 embedding 模型并填写实际向量维度；embedding 向量化费用由平台承担，不计入用户用量、词元点数或智能体费用上限；one-api 不参与 embedding 配置，Works Square 只负责其他应计费模型调用的创建者词元点数账本。客户端区分目录加载中、加载失败与无可用模型，空状态提供管理员配置说明；「刷新知识库与模型」保留未提交名称，未确认的创建请求沿用原操作身份。
diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index ffc87c85..a02128e7 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -74,7 +74,7 @@ export function MainLayout() {
   }, []);
 
   return (
-    <div data-testid="main-layout" className="relative flex h-[100dvh] flex-col overflow-hidden bg-transparent font-sans">
+    <div data-testid="main-layout" data-classroom={isChatWorkspace} className="relative flex h-[100dvh] flex-col overflow-hidden bg-transparent font-sans">
       {/* Title bar: drag region on macOS, icon + controls on Windows */}
       <TitleBar
         integrated
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 32b5af6a..1a59ef0a 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -410,13 +410,14 @@ export function Sidebar({
         )}
       >
         <div className="min-w-0 w-full">
-          {workspaceLayout ? <button type="button" aria-label="返回首页" title="返回首页" onClick={() => navigate('/module-select')} className="flex w-full items-center gap-2 rounded-lg px-1 pb-4 pt-3 text-left hover:bg-black/[0.025]">
-            <img src={classroomMark} alt="" className="h-7 w-7" /><span className="text-base font-semibold tracking-tight">麦洛</span>
+          {workspaceLayout ? <button type="button" aria-label="返回首页" title="返回首页" onClick={() => navigate('/module-select')} className="classroom-brand flex w-full items-center gap-2 rounded-lg text-left">
+            <span className="classroom-brand-mark"><img src={classroomMark} alt="" className="h-7 w-7" /></span>
+            <span className="min-w-0"><span className="block text-base font-semibold tracking-tight">麦洛</span><span className="classroom-brand-caption">把脑洞变成作品</span></span>
           </button> : <ModuleSwitcher sidebarCollapsed={sidebarCollapsed} compact={!sidebarCollapsed} />}
         </div>
       </div>
 
-      <div className="min-h-0 flex-1 overflow-auto px-2 py-2">
+      <div className="classroom-sidebar-content min-h-0 flex-1 overflow-auto px-2 py-2">
         {isPaintingModule ? (
           <ImageWorkspaceSidebar sidebarCollapsed={sidebarCollapsed} />
         ) : isProgrammingModule ? (
@@ -434,19 +435,19 @@ export function Sidebar({
           <Plus className="h-4 w-4 shrink-0 text-brand" />
           {!sidebarCollapsed && '新建项目'}
         </button>
-        <div className="mt-3">
+        <div className="classroom-projects mt-3">
           <button
             type="button"
             onClick={() => setProjectsOpen(!projectsOpen)}
             className={cn(
-              'motion-press flex min-h-8 w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs font-semibold text-muted-foreground hover:bg-surface-subtle hover:text-foreground',
+              'classroom-projects-heading motion-press flex min-h-8 w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs font-semibold text-muted-foreground hover:bg-surface-subtle hover:text-foreground',
               sidebarCollapsed ? 'justify-center px-0' : '',
             )}
           >
             <FolderKanban className="h-4 w-4 shrink-0" />
             {!sidebarCollapsed && (
               <>
-                <span className="min-w-0 flex-1 truncate">项目</span>
+                <span className="min-w-0 flex-1 truncate">{workspaceLayout ? '我的项目' : '项目'}</span>
                 <span className="text-xs">{projectsOpen ? '收起' : '展开'}</span>
               </>
             )}
@@ -471,13 +472,14 @@ export function Sidebar({
                     aria-current={active ? 'page' : undefined}
                     onClick={() => void openProject(project)}
                     className={cn(
-                      'motion-press group/project flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left transition-colors duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35 focus-visible:ring-offset-1',
+                      'classroom-project-card motion-press group/project flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left transition-colors duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35 focus-visible:ring-offset-1',
                       active
                         ? 'bg-transparent text-foreground'
                         : 'bg-transparent text-foreground hover:bg-surface-tertiary',
                     )}
                   >
-                    <Gamepad2 className="h-3.5 w-3.5 shrink-0 text-muted-foreground" /><span className="min-w-0 flex-1 truncate text-[13px] font-medium">{project.name}</span>
+                    {workspaceLayout ? <span className="classroom-project-icon" data-tone={['orange', 'green', 'blue'][Array.from(project.id).reduce((sum, char) => sum + char.charCodeAt(0), 0) % 3]}><Gamepad2 aria-hidden="true" /></span> : <Gamepad2 className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />}
+                    <span className="min-w-0 flex-1 truncate text-[13px] font-medium">{project.name}</span>
                     <ChevronRight aria-hidden="true" className="h-3.5 w-3.5 shrink-0 -translate-x-0.5 text-muted-foreground opacity-50 transition-[opacity,transform,color] duration-200 ease-out group-hover/project:translate-x-0 group-hover/project:text-foreground group-hover/project:opacity-100 group-focus-visible/project:translate-x-0 group-focus-visible/project:text-foreground group-focus-visible/project:opacity-100" />
                   </button>
                   {active && <CodingProjectConversations key={project.id} projectId={project.id} compact={workspaceLayout} />}
@@ -794,7 +796,7 @@ export function Sidebar({
         onOpenChange={setProfileDialogOpen}
       />
 
-      <div className="mt-auto px-2 pb-2 pt-1">
+      <div className="classroom-account-footer mt-auto shrink-0 px-2 pb-2 pt-1">
         <div className="relative">
           <div className={cn(
             'flex items-center gap-2',
diff --git a/src/pages/Chat/CodingProjectConversations.tsx b/src/pages/Chat/CodingProjectConversations.tsx
index 26700b68..40d07077 100644
--- a/src/pages/Chat/CodingProjectConversations.tsx
+++ b/src/pages/Chat/CodingProjectConversations.tsx
@@ -70,7 +70,7 @@ export function CodingProjectConversations({ projectId, compact = false }: { pro
       className={compact ? "py-1" : "ml-5 py-1 pl-1"}
       data-testid="project-conversations"
     >
-      <div className="flex items-center gap-1 text-muted-foreground">
+      <div className="classroom-conversation-actions flex items-center gap-1 text-muted-foreground">
         <button
           type="button"
           aria-label="新建对话"
@@ -119,7 +119,8 @@ export function CodingProjectConversations({ projectId, compact = false }: { pro
           return (
             <div
               key={item.id}
-              className={`group/session flex items-center rounded-lg ${selected === item.id ? 'bg-[#e7e9e1]' : 'hover:bg-surface-tertiary'}`}
+              data-selected={selected === item.id}
+              className={`classroom-conversation-row group/session flex items-center rounded-lg ${selected === item.id ? 'bg-[#e7e9e1]' : 'hover:bg-surface-tertiary'}`}
             >
               <button
                 className="flex min-w-0 flex-1 items-center gap-1.5 px-2 py-2 text-left text-xs"
diff --git a/src/pages/Chat/TeacherChatPanel.tsx b/src/pages/Chat/TeacherChatPanel.tsx
index f8a2d51b..0fccfdc2 100644
--- a/src/pages/Chat/TeacherChatPanel.tsx
+++ b/src/pages/Chat/TeacherChatPanel.tsx
@@ -370,8 +370,8 @@ export function TeacherChatPanel({
   return (
     <aside className={cn('consultation-pane flex h-full min-h-0 w-full flex-col', role === 'friend' && 'consultation-friend')}
       data-testid="teacher-chat-panel" data-role={role ?? 'teacher'} aria-label={`${label}聊天`}>
-      <header className="flex h-[68px] shrink-0 items-center gap-3 px-5">
-        <img className="h-9 w-9 rounded-xl [image-rendering:pixelated]" src={avatar} alt="" />
+      <header className="consultation-header flex h-[68px] shrink-0 items-center gap-3 px-5">
+        <img className="consultation-avatar h-9 w-9 rounded-xl [image-rendering:pixelated]" src={avatar} alt="" />
         <div className="min-w-0 flex-1"><h2 className="truncate text-sm font-semibold">{definition?.name ?? (role === 'friend' ? '小麦' : '麦洛老师')}</h2>
           <p className="mt-1 text-[11px] text-muted-foreground">{draftRevision ? '运营草稿试聊' : role === 'friend' ? '陪你体验，也听你说' : !role ? '结合当前会话和项目文件答疑' : '一起想清楚，再动手'}</p></div>
         {onExpand && <button className="consult-icon" aria-label={expanded ? '恢复咨询栏宽度' : '展开咨询栏'} onClick={onExpand}><Maximize2 className="h-4 w-4" /></button>}
diff --git a/src/pages/Chat/classroom-workspace.css b/src/pages/Chat/classroom-workspace.css
index 63bd2f9e..06a4175e 100644
--- a/src/pages/Chat/classroom-workspace.css
+++ b/src/pages/Chat/classroom-workspace.css
@@ -1,22 +1,57 @@
-/* The classroom surface follows the approved quiet project/chat prototype. */
-[data-testid="sidebar"][data-classroom="true"] { background: #f5f5f1; border-color: #e9eae3; box-shadow: none; backdrop-filter: none; }
-[data-testid="sidebar"][data-classroom="true"] [data-testid="project-conversations"] { font-size: 13px; }
-[data-testid="coding-conversation-header"] { border-bottom-color: #eceee7; background: #fff; }
-.classroom-workspace { --background: 0 0% 100%; --foreground: 98 9% 22%; --muted-foreground: 94 6% 47%; --border: 85 15% 89%; }
-.classroom-tabs { display: flex; flex-shrink: 0; height: 44px; gap: 26px; padding: 0 26px; border-bottom: 1px solid #eceee7; }
-.classroom-tabs button { display: flex; align-items: center; gap: 7px; position: relative; padding: 0 2px; font-size: 12px; color: #8a9083; }
-.classroom-tabs button[aria-selected="true"] { color: #414e38; }
-.classroom-tabs button[aria-selected="true"]::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: #647357; border-radius: 2px; }
+/* Approved playful Code workbench. Keep navigation skins scoped to /chat. */
+[data-testid="main-layout"][data-classroom="true"], .classroom-workspace {
+  --background: 0 0% 100%; --foreground: 214 34% 23%;
+  --muted-foreground: 214 16% 44%; --border: 213 31% 90%;
+}
+[data-testid="main-layout"][data-classroom="true"] [data-testid="titlebar-sidebar-surface"] { background: #f3f7fb; border-color: #dde5ee; box-shadow: none; backdrop-filter: none; }
+[data-testid="sidebar"][data-classroom="true"] { background: #f3f7fb; border-color: #dde5ee; box-shadow: none; backdrop-filter: none; color: #26384d; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-brand { gap: 10px; padding: 10px 2px 12px; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-brand:hover { background: #eaf1f8; }
+.classroom-brand-mark { display: grid; place-items: center; width: 40px; height: 42px; flex-shrink: 0; border: 1px solid #f1d1aa; border-radius: 12px; background: #fff0dd; box-shadow: 0 3px 0 #ecdbc5; }
+.classroom-brand-caption { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #64758a; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-sidebar-content { padding: 4px 12px 14px; }
+[data-testid="sidebar"][data-classroom="true"] [data-testid="sidebar-create-project"] { min-height: 41px; gap: 9px; padding: 8px 11px; border: 1px solid #d5e1ed; border-radius: 11px; background: #fff; color: #304968; box-shadow: 0 3px 0 #e3eaf3; }
+[data-testid="sidebar"][data-classroom="true"] [data-testid="sidebar-create-project"] svg { color: #c44b23; }
+[data-testid="sidebar"][data-classroom="true"] [data-testid="sidebar-create-project"]:hover { background: #fff7ef; border-color: #ecc5a5; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-projects { margin-top: 20px; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-projects-heading { padding: 6px 3px; color: #64758a; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-projects-heading > svg { display: none; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-project-card { min-height: 56px; gap: 9px; padding: 8px; border: 1px solid transparent; border-radius: 13px; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-project-card:hover { background: #fff; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-project-card[aria-current="page"] { background: #fff; border-color: #c9d9e9; box-shadow: 0 3px 0 #e2eaf3; }
+.classroom-project-icon { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 37px; border-radius: 10px; background: #ffead9; color: #a85026; }
+.classroom-project-icon svg { width: 21px; height: 21px; }
+.classroom-project-icon[data-tone="green"] { background: #e1f1d9; color: #507d39; }
+.classroom-project-icon[data-tone="blue"] { background: #deedfb; color: #3a6d9d; }
+[data-testid="sidebar"][data-classroom="true"] [data-testid="project-conversations"] { padding: 8px 0 4px; font-size: 13px; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-conversation-actions { gap: 2px; margin-bottom: 4px; color: #64758a; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-conversation-actions button { min-height: 32px; min-width: 30px; border-radius: 8px; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-conversation-actions button:hover { background: #e5edf6; color: #36557b; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-conversation-row { margin: 3px 0; border: 1px solid transparent; border-radius: 10px; color: #64758a; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-conversation-row:hover { background: #eaf1f8; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-conversation-row[data-selected="true"] { background: #e0ecfa; border-color: #cedef0; color: #304f75; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-conversation-row > button:first-child { min-height: 35px; gap: 7px; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-conversation-row > button:first-child > svg { color: #7891af; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-account-footer { padding: 10px 10px 12px; border-top: 1px solid #dde5ee; background: #edf3f9; }
+[data-testid="sidebar"][data-classroom="true"] [data-testid="sidebar-member-menu-trigger"] { min-height: 42px; border: 1px solid #d9e3ee; border-radius: 11px; background: #fff; font-size: 12px; }
+.classroom-workspace [data-testid="coding-conversation-header"] { border-bottom-color: #e8edf3; background: #fff; color: #304968; }
+.classroom-tabs { display: flex; flex-shrink: 0; height: 46px; gap: 9px; padding: 6px 22px; border-bottom: 1px solid #e8edf3; }
+.classroom-tabs button { display: flex; align-items: center; gap: 7px; position: relative; padding: 0 12px; border: 1px solid transparent; border-radius: 9px; background: #f4f7fa; font-size: 12px; color: #62738b; }
+.classroom-tabs button:hover { background: #eaf1f8; }
+.classroom-tabs button[aria-selected="true"] { background: #eaf1fb; border-color: #ccdaeb; color: #36557b; box-shadow: 0 2px 0 #dce6f3; }
 .classroom-chat-view:not([hidden]), .classroom-work-view:not([hidden]) { display: flex; }
 .classroom-chat-view[hidden], .classroom-work-view[hidden] { display: none; }
 .classroom-workspace [data-testid="coding-message-composer"] { max-width: 740px; padding-bottom: 22px; }
-.classroom-workspace .chat-composer-surface { border-color: #dddfd6; border-radius: 17px; box-shadow: 0 2px 8px #29392005; }
+.classroom-workspace .chat-composer-surface { border-color: #d3dfeb; border-bottom-width: 3px; border-radius: 14px; box-shadow: 0 3px 12px #3a557806; }
 .classroom-workspace [data-testid="coding-conversation-timeline"] { padding-top: 30px; }
-.classroom-work-view [data-testid="agent-browser-panel"] { border: 1px solid #e5e8de; border-radius: 12px; }
-.classroom-consultation-dock { border-color: #e3e7dc; max-width: min(55vw, 640px); }
+.classroom-work-view [data-testid="agent-browser-panel"] { border: 1px solid #dce5ef; border-radius: 12px; }
+.classroom-consultation-dock { border-color: #dde5ee; max-width: min(55vw, 640px); }
 .classroom-consultation-resizer { position: absolute; inset: 0 auto 0 -4px; width: 8px; z-index: 2; cursor: col-resize; }
-.classroom-consultation-resizer:hover, .classroom-consultation-resizer:focus-visible { background: #82986733; }
-.consultation-pane { background: #fafbf7; color: #434f3a; }
+.classroom-consultation-resizer:hover, .classroom-consultation-resizer:focus-visible { background: #7994b533; }
+.consultation-pane { background: #fffdf8; color: #30465f; }
+.classroom-workspace .consultation-header { height: 78px; padding: 12px 15px; gap: 10px; border-bottom: 1px solid #eddbb2; background: #fff4d9; }
+.classroom-workspace .consultation-avatar { width: 44px; height: 44px; flex-shrink: 0; border: 2px solid white; border-radius: 11px; box-shadow: 0 3px 0 #e3cea2; }
+.classroom-workspace .consultation-friend .consultation-header { background: #f7efdf; }
 .consultation-help-prompt, .consultation-guided-help { color: #536747; }
 .consultation-help-prompt { background: #f1f5ea; border: 1px solid #dfe7d5; }
 .consultation-help-prompt:hover:not(:disabled) { background: #e6eedc; border-color: #bacba8; }
@@ -34,7 +69,7 @@
 .consultation-friend .consultation-suggestion { color: #8b7657; }
 .consultation-friend .consultation-suggestion:hover, .consultation-friend .consult-icon:hover { background: #f4eddf; }
 .consultation-friend .consultation-send { background: #8c7858; }
-@media (max-width: 1100px) { .classroom-tabs { padding: 0 18px; } }
+@media (max-width: 1100px) { .classroom-tabs { padding-left: 18px; padding-right: 18px; } }
 @media (max-width: 900px) { .classroom-consultation-dock { position: absolute; inset: 0 0 0 auto; z-index: 45; max-width: 100%; box-shadow: -12px 0 36px #24311b0d; } .classroom-consultation-resizer { display: none; } }
 @media (max-width: 600px) { .classroom-consultation-dock { width: 100%!important; } .classroom-workspace [data-testid="coding-message-composer"] { width: calc(100% - 24px); } }
 @media (prefers-reduced-motion: reduce) { .classroom-workspace *, .consultation-pane * { scroll-behavior: auto!important; } }