feat(canvas): Responsive full-screen layout and dark theme

Phase 2 of Canvas Professional Upgrade:
- Update AtomizerCanvas with Lucide icons (MessageCircle, Plug, X)
- Update CanvasView page with dark theme styling
- Replace emoji buttons with Lucide icons (ClipboardList, Download, Trash2)
- Update Setup canvas tab for full-width responsive layout
- Use calc(100vh-6rem) for proper canvas height

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

atomizer-dashboard/frontend/src/components/canvas/AtomizerCanvas.tsx

@@ -7,6 +7,7 @@ import ReactFlow, {
   ReactFlowInstance,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
+import { MessageCircle, Plug, X } from 'lucide-react';
 
 import { nodeTypes } from './nodes';
 import { NodePalette } from './palette/NodePalette';
@@ -159,7 +160,7 @@ function CanvasFlow() {
             }`}
             title="Toggle Chat"
           >
-            {isConnected ? '💬' : '🔌'}
+            {isConnected ? <MessageCircle size={18} /> : <Plug size={18} />}
           </button>
           <button
             onClick={handleValidate}
@@ -206,7 +207,7 @@ function CanvasFlow() {
               onClick={() => setShowChat(false)}
               className="text-dark-400 hover:text-white transition-colors"
             >
-              ✕
+              <X size={18} />
             </button>
           </div>
           <ChatPanel

atomizer-dashboard/frontend/src/pages/CanvasView.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { ClipboardList, Download, Trash2 } from 'lucide-react';
 import { AtomizerCanvas } from '../components/canvas/AtomizerCanvas';
 import { TemplateSelector } from '../components/canvas/panels/TemplateSelector';
 import { ConfigImporter } from '../components/canvas/panels/ConfigImporter';
@@ -33,14 +34,14 @@ export function CanvasView() {
   };
 
   return (
-    <div className="h-screen flex flex-col">
+    <div className="h-screen flex flex-col bg-dark-900">
       {/* Header with actions */}
-      <header className="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between">
+      <header className="bg-dark-850 border-b border-dark-700 px-6 py-3 flex items-center justify-between">
         <div>
-          <h1 className="text-xl font-bold text-gray-800">
+          <h1 className="text-xl font-bold text-white">
             Optimization Canvas
           </h1>
-          <p className="text-sm text-gray-500">
+          <p className="text-sm text-dark-400">
             Drag components from the palette to build your optimization workflow
           </p>
         </div>
@@ -49,23 +50,23 @@ export function CanvasView() {
         <div className="flex items-center gap-2">
           <button
             onClick={() => setShowTemplates(true)}
-            className="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all shadow-sm flex items-center gap-2"
+            className="px-4 py-2 bg-gradient-to-r from-primary-600 to-purple-600 text-white rounded-lg hover:from-primary-500 hover:to-purple-500 transition-all shadow-sm flex items-center gap-2"
           >
-            <span>📋</span>
+            <ClipboardList size={18} />
             Templates
           </button>
           <button
             onClick={() => setShowImporter(true)}
-            className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center gap-2"
+            className="px-4 py-2 bg-dark-700 text-dark-200 rounded-lg hover:bg-dark-600 hover:text-white transition-colors flex items-center gap-2 border border-dark-600"
           >
-            <span>📥</span>
+            <Download size={18} />
             Import
           </button>
           <button
             onClick={handleClear}
-            className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center gap-2"
+            className="px-4 py-2 bg-dark-700 text-dark-200 rounded-lg hover:bg-red-900/50 hover:text-red-400 hover:border-red-500/50 transition-colors flex items-center gap-2 border border-dark-600"
           >
-            <span>🗑️</span>
+            <Trash2 size={18} />
             Clear
           </button>
         </div>
@@ -93,7 +94,7 @@ export function CanvasView() {
       {/* Notification Toast */}
       {notification && (
         <div
-          className="fixed bottom-4 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-gray-800 text-white rounded-lg shadow-lg z-50"
+          className="fixed bottom-4 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-dark-800 text-white rounded-lg shadow-lg z-50 border border-dark-600"
           style={{ animation: 'slideUp 0.3s ease-out' }}
         >
           {notification}

atomizer-dashboard/frontend/src/pages/Setup.tsx

@@ -254,12 +254,12 @@ export default function Setup() {
     return acc * 1000; // Approximate for continuous
   }, 1) || 0;
 
-  // Canvas tab - full height
+  // Canvas tab - full height and full width
   if (activeTab === 'canvas') {
     return (
-      <div className="w-full h-full flex flex-col">
+      <div className="w-full h-[calc(100vh-6rem)] flex flex-col -mx-6 -my-6 px-4 pt-4">
         {/* Tab Bar */}
-        <div className="flex items-center gap-2 mb-4 border-b border-dark-700 pb-4">
+        <div className="flex items-center gap-2 mb-3 border-b border-dark-700 pb-3">
           <button
             onClick={() => setActiveTab('config')}
             className="flex items-center gap-2 px-4 py-2 rounded-lg transition-colors bg-dark-800 text-dark-300 hover:text-white hover:bg-dark-700"