Update dashboard and automation colors to new module scheme

Dashboard widgets:
- WorkflowPipelineWidget: Sites now has transparent bg with colored icon
- Tasks stage uses navy (gray-700/800), Content/Drafts use blue (brand)
- AIOperationsWidget: Content now uses blue (brand) instead of green
- RecentActivityWidget: Content activity now uses blue (brand)
- QuickActionsWidget: Tasks step uses navy, Content uses blue

Automation components:
- AutomationPage STAGE_CONFIG: Tasks→Content now navy, Content→Prompts blue
- GlobalProgressBar: Updated stage colors to match new scheme
- CurrentProcessingCard: Stage colors match new module scheme

Color scheme:
- Planner Pipeline (Blue → Pink → Amber): Keywords, Clusters, Ideas
- Writer Pipeline (Navy → Blue → Pink → Green): Tasks, Content, Images, Published

frontend/src/components/Automation/CurrentProcessingCard.tsx

@@ -322,15 +322,16 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
   const percentage = computedTotal > 0 ? Math.round((computedProcessed / computedTotal) * 100) : 0;
   const isPaused = currentRun.status === 'paused';
 
-  // Choose stage accent color (simple map matching AutomationPage STAGE_CONFIG)
+  // Choose stage accent color (matching new module color scheme)
+  // PLANNER: Blue → Pink → Amber | WRITER: Navy → Blue → Pink → Green
   const stageColors = [
-    'from-brand-500 to-brand-600',
-    'from-purple-500 to-purple-600',
-    'from-purple-500 to-purple-600',
-    'from-success-500 to-success-600',
-    'from-warning-500 to-warning-600',
-    'from-purple-500 to-purple-600',
-    'from-success-500 to-success-600',
+    'from-brand-500 to-brand-600',     // Stage 1: Keywords → Clusters (blue)
+    'from-purple-500 to-purple-600',   // Stage 2: Clusters → Ideas (pink)
+    'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber)
+    'from-gray-700 to-gray-800',       // Stage 4: Tasks → Content (navy)
+    'from-brand-500 to-brand-600',     // Stage 5: Content → Image Prompts (blue)
+    'from-purple-500 to-purple-600',   // Stage 6: Image Prompts → Images (pink)
+    'from-success-500 to-success-600', // Stage 7: Review → Published (green)
   ];
   const stageColorClass = stageColors[(currentRun.current_stage || 1) - 1] || 'from-brand-500 to-brand-600';
 

frontend/src/components/Automation/GlobalProgressBar.tsx

@@ -7,14 +7,23 @@ import React from 'react';
 import { AutomationRun, InitialSnapshot, StageProgress, GlobalProgress } from '../../services/automationService';
 import { BoltIcon, CheckCircleIcon, PauseIcon } from '../../icons';
 
-// Stage colors matching AutomationPage STAGE_CONFIG exactly
+// Stage colors for visual distinction matching new module color scheme:
+// PLANNER PIPELINE (Blue → Pink → Amber):
+// - Keywords→Clusters: brand/blue
+// - Clusters→Ideas: purple/pink  
+// - Ideas→Tasks: warning/amber
+// WRITER PIPELINE (Navy → Blue → Pink → Green):
+// - Tasks→Content: gray-dark (navy) - entry point to Writer
+// - Content→Prompts: brand/blue
+// - Prompts→Images: purple/pink
+// - Images→Publish: success/green
 const STAGE_COLORS = [
-  'from-brand-500 to-brand-600',     // Stage 1: Keywords → Clusters (brand/teal)
-  'from-purple-500 to-purple-600',   // Stage 2: Clusters → Ideas (purple)
+  'from-brand-500 to-brand-600',     // Stage 1: Keywords → Clusters (brand/blue)
+  'from-purple-500 to-purple-600',   // Stage 2: Clusters → Ideas (purple/pink)
   'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber)
-  'from-brand-500 to-brand-600',     // Stage 4: Tasks → Content (brand/teal)
-  'from-success-500 to-success-600', // Stage 5: Content → Image Prompts (green)
-  'from-purple-500 to-purple-600',   // Stage 6: Image Prompts → Images (purple)
+  'from-gray-700 to-gray-800',       // Stage 4: Tasks → Content (navy)
+  'from-brand-500 to-brand-600',     // Stage 5: Content → Image Prompts (brand/blue)
+  'from-purple-500 to-purple-600',   // Stage 6: Image Prompts → Images (purple/pink)
   'from-success-500 to-success-600', // Stage 7: Review Gate (green)
 ];