feat: Implement global design system with dark mode, animations, and add a new LiveLogViewer component.

frontend/src/components/LiveLogViewer.tsx

@@ -182,7 +182,8 @@ export default function LiveLogViewer({
             {/* Log Content */}
             <div
                 ref={logContainerRef}
-                className="h-80 overflow-y-auto p-3 font-mono text-xs space-y-0.5"
+                style={{ fontVariantLigatures: 'contextual' }}
+                className="h-[500px] overflow-y-auto p-4 text-[14.5px] leading-relaxed space-y-1.5 font-['FiraCode_Nerd_Font','Fira_Code',monospace] selection:bg-blue-500/30"
             >
                 {logs.length === 0 ? (
                     <div className="flex items-center justify-center h-full text-slate-500">

frontend/src/index.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@300;400;500;600;700&display=swap');
 @import 'tailwindcss';
 
 /* TailwindCSS 4 Theme Configuration */