aesthetic-improvements: reduce decorative cyan in UI components (80/20 rule, batch 9)

- LiveView: decorative chat message username color (text-kodo-cyan → text-kodo-steel)
- Sidebar: decorative section header icon (text-kodo-cyan → text-kodo-steel)
- CartView: decorative promo code link (text-kodo-cyan → text-kodo-steel)
- Total: ~3 files, ~3 instances replaced
- Preserved: Functional links (LoginPage register link, RegisterPage login link, LiveView streamer profile link, LiveView wallet link), design system variants (Spinner default variant, alert.tsx info variant, badge.tsx cyan variant, ErrorDisplay.tsx info variant, Toast.tsx info variant, Alert.tsx info variant - intentional design system options), semantic status indicators (PasswordStrengthIndicator strong password - semantic color), interactive states (radio-group.tsx focus/interaction, select.tsx selected option, dropdown-menu.tsx checked state), primary actions
- Action 11.3.1.3 in progress (ninth batch: UI components decorative elements)

EXHAUSTIVE_TODO_LIST.md

@@ -3952,7 +3952,12 @@ Critical path dependencies:
     - ✅ **Seventh batch** (~2 files, ~4 instances):
       - TrackDetailPage: decorative empty state icon (text-kodo-cyan → text-kodo-steel) and informational play count text (text-kodo-cyan → text-kodo-steel)
       - LibraryPage: decorative genre badges (bg-kodo-cyan/10 text-kodo-cyan → bg-kodo-steel/10 text-kodo-steel, 2 instances: grid view and list view)
-    - **Preserved**: Active/functional states (LibraryPage view mode selection, selected tracks, TrackList selected tracks, TrackListRow selected state, QualitySelector selected quality, PlaybackSpeedControl selected speed, PlaylistBatchActions batch mode banner, ChatSidebar selected conversation, TrackFilters active filters badge, PlaylistList selected view mode, TrackGridDensitySelector selected density, ViewToggle selected view mode, ChatInput drag active overlay, ChatRoom highlighted message, PlaybackHeatmap intensity visualization - functional), semantic status indicators (TrackHistory updated action - semantic color), functional loading indicators (PlayerLoading spinner), StudioView active tab, AccountSettings selected theme, SessionManagement current session, DashboardPage selected button, TrackList current track indicator, IntegrationsView connected state, Header active notification, AudioPlayer dragged item, 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, select.tsx selected option, QuizModal selected answer), primary actions, design system variants (badge.tsx cyan variant, StatCard.tsx cyan variant - intentional design system options), informational alerts/toasts (alert.tsx info, Toast.tsx info, ErrorDisplay.tsx info - important status indicators), BulkModeBanner active state (functional active mode indicator)
+    - ✅ **Eighth batch** (~10 files, ~15 instances):
+      - Loading spinners: PurchasesView, NotificationsView, MarketplaceView, EducationView, SearchPageView (text-kodo-cyan → text-kodo-steel, 5 instances)
+      - Decorative text/emphasis: CartView total price, CheckoutView total price, FullPlayer artist name, DashboardPage username highlight (text-kodo-cyan → text-kodo-steel, 4 instances)
+      - Decorative icons: CheckoutView credit card icon, CreateGroupModal header icon, DeveloperPage icon, SocialPage icon, DashboardPage activity icons (text-kodo-cyan → text-kodo-steel, 5 instances)
+      - Informational badges: PurchasesView product type badge (text-kodo-cyan → text-kodo-steel, 1 instance)
+    - **Preserved**: Active/selected states (DashboardPage selected button 30J, CheckoutView checkbox accents - focus/interaction, SearchPageView radio button accent - focus/interaction, LibraryPage view mode selection, selected tracks, TrackList selected tracks, TrackListRow selected state, QualitySelector selected quality, PlaybackSpeedControl selected speed, PlaylistBatchActions batch mode banner, ChatSidebar selected conversation, TrackFilters active filters badge, PlaylistList selected view mode, TrackGridDensitySelector selected density, ViewToggle selected view mode, ChatInput drag active overlay, ChatRoom highlighted message, PlaybackHeatmap intensity visualization - functional), semantic status indicators (TrackHistory updated action - semantic color), functional loading indicators (PlayerLoading spinner - already preserved), StudioView active tab, AccountSettings selected theme, SessionManagement current session, TrackList current track indicator, IntegrationsView connected state, Header active notification, AudioPlayer dragged item, 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, select.tsx selected option, QuizModal selected answer), primary actions, design system variants (badge.tsx cyan variant, StatCard.tsx cyan variant - intentional design system options), informational alerts/toasts (alert.tsx info, Toast.tsx info, ErrorDisplay.tsx info - important status indicators), BulkModeBanner active state (functional active mode indicator)
     - **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/ui/Sidebar.tsx

@@ -148,7 +148,7 @@ export function Sidebar({
           <div className="flex items-center justify-between p-4 border-b border-white/10">
             {title && (
               <div className="flex items-center gap-2 flex-1">
-                {icon && <div className="text-kodo-cyan">{icon}</div>}
+                {icon && <div className="text-kodo-steel">{icon}</div>}
                 <h3 className="text-sm font-semibold text-white">{title}</h3>
               </div>
             )}

apps/web/src/components/views/CartView.tsx

@@ -135,7 +135,7 @@ export const CartView: React.FC<CartViewProps> = ({
 
             {!discount && (
               <button
-                className="w-full text-center text-xs text-kodo-cyan mt-4 hover:underline font-bold"
+                className="w-full text-center text-xs text-kodo-steel mt-4 hover:underline font-bold"
                 onClick={() => setShowPromo(true)}
               >
                 Have a promo code?

apps/web/src/components/views/LiveView.tsx

@@ -31,7 +31,7 @@ const chatMessages = [
   {
     user: 'BassHead99',
     text: 'That Reese bass is filthy! 🤮🔥',
-    color: 'text-kodo-cyan',
+    color: 'text-kodo-steel',
   },
   { user: 'Studio_Rat', text: 'What VST is that?', color: 'text-kodo-content-dim' },
   {