Complete playful Code workbench styling in real navigation

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

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',