aesthetic-improvements: reduce more decorative cyan backgrounds (80/20 rule, batch 3)

- Layout components: Sidebar hub header icon, Header icon background (2 instances) - decorative icons
- AutoMetadataDetectionModal: modal border (decorative)
- CourseDetailView: card border (decorative)
- Total: ~4 files, ~4 instances replaced
- Preserved: Active/selected states (AudioPlayer dragged item, Header active notification, VisualizerSettingsModal selected mode, CreateProjectModal selected DAW, AIToolsView active tool, CourseLearningView active lesson, TipStreamerModal selected payment, CloudFileBrowser active tag, PlaylistDetailView dragged item, AddToPlaylistModal selected playlist, CreatorModal selected visibility)
- Action 11.3.1.3 in progress (third batch: layout and modal decorative elements)

EXHAUSTIVE_TODO_LIST.md

@@ -3925,13 +3925,18 @@ Critical path dependencies:
   - **Scope**: All pages - Ensure color used sparingly
   - **Dependencies**: Action 11.3.1.2 complete ✅
   - **Risk**: MEDIUM (visual changes)
-  - **Validation**: ⚠️ **IN PROGRESS** - First batch complete (~8 files, ~9 instances):
-    - ✅ KodoEmptyState: decorative background blur and border (3 instances)
-    - ✅ PWAInstallBanner: decorative icon background and blur effect (2 instances)
-    - ✅ Page headers: SettingsPage, GearPage, DeveloperPage, SocialPage icon backgrounds (4 instances)
-    - ✅ DashboardPage: activity item icon gradient background (1 instance)
-    - ✅ FileManagerView: selection banner background (1 instance)
-    - **Preserved**: Active/selected states (StudioView active tab, AccountSettings selected theme, SessionManagement current session), primary actions, informational alerts
+  - **Validation**: ⚠️ **IN PROGRESS** - Second batch complete (~14 files, ~15 instances total):
+    - ✅ **First batch** (~8 files, ~9 instances):
+      - KodoEmptyState: decorative background blur and border (3 instances)
+      - PWAInstallBanner: decorative icon background and blur effect (2 instances)
+      - Page headers: SettingsPage, GearPage, DeveloperPage, SocialPage icon backgrounds (4 instances)
+      - DashboardPage: activity item icon gradient background (1 instance)
+      - FileManagerView: selection banner background (1 instance)
+    - ✅ **Second batch** (~6 files, ~6 instances):
+      - Settings modals: DataExportView, ChangeEmailModal, PasskeyModal decorative icon backgrounds (3 instances)
+      - DashboardPage: chart bars and tooltip (decorative visualization, 2 instances)
+      - TwoFactorSetup: decorative icon background (1 instance)
+    - **Preserved**: Active/selected states (StudioView active tab, AccountSettings selected theme, SessionManagement current session, DashboardPage selected button, TrackList current track indicator, IntegrationsView connected state), primary actions, informational alerts
     - **Remaining**: Additional decorative backgrounds, informational elements, text/links (per audit: ~300 decorative, ~150 informational, ~65 text/links)
     - **Next batch**: Continue with remaining decorative backgrounds and informational elements
   - **Rollback**: Restore original colors

apps/web/src/components/education/CourseDetailView.tsx

@@ -261,7 +261,7 @@ export const CourseDetailView: React.FC<CourseDetailViewProps> = ({
           <div className="sticky top-24 space-y-6">
             <Card
               variant="default"
-              className="p-0 overflow-hidden border-kodo-cyan/30 shadow-neon-cyan/10"
+              className="p-0 overflow-hidden border-kodo-steel/30"
             >
               {/* Preview Video Placeholder */}
               <div className="relative aspect-video bg-black group cursor-pointer">

apps/web/src/components/layout/Sidebar.tsx

@@ -213,8 +213,8 @@ export const Sidebar: React.FC<SidebarProps> = ({
       >
         {/* Hub Header Integration */}
         <div className="p-6 border-b border-white/5 flex items-center gap-3">
-          <div className="w-8 h-8 rounded bg-kodo-cyan/20 flex items-center justify-center border border-kodo-cyan/30 animate-pulse-glow">
-            <Cpu className="w-5 h-5 text-kodo-cyan" />
+          <div className="w-8 h-8 rounded bg-kodo-steel/20 flex items-center justify-center border border-kodo-steel/30 animate-pulse-glow">
+            <Cpu className="w-5 h-5 text-kodo-steel" />
           </div>
           {sidebarOpen && (
             <div className="animate-fadeIn">

apps/web/src/components/library/AutoMetadataDetectionModal.tsx

@@ -43,7 +43,7 @@ export const AutoMetadataDetectionModal: React.FC<
         className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
         onClick={onClose}
       ></div>
-      <div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-cyan/30 rounded-xl shadow-neon-cyan/20 overflow-hidden animate-scaleIn">
+      <div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-steel/30 rounded-xl shadow-2xl overflow-hidden animate-scaleIn">
         <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
           <h3 className="font-bold text-white flex items-center gap-2">
             <Wand2 className="w-4 h-4 text-kodo-cyan" /> AI Metadata Detection