F3-Nation
diff --git a/‎src/app/globals.css‎
Lines changed: 21 additions & 5 deletions b/‎src/app/globals.css‎
Lines changed: 21 additions & 5 deletions
diff --git a/‎src/app/layout.tsx‎
Lines changed: 6 additions & 6 deletions b/‎src/app/layout.tsx‎
Lines changed: 6 additions & 6 deletions
diff --git a/‎src/components/comparison-panel.tsx‎
Lines changed: 29 additions & 6 deletions b/‎src/components/comparison-panel.tsx‎
Lines changed: 29 additions & 6 deletions
@@ -1,7 +1,7 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
+  --background: #fafafa;
   --foreground: #222222;
   --card: #ffffff;
   --card-foreground: #222222;
@@ -20,7 +20,9 @@
   --border: #e5e5e5;
   --input: #e5e5e5;
   --ring: #222222;
-  --radius: 0.5rem;
+  --radius: 0.75rem;
+  --accent-brand: #0d9488;
+  --accent-brand-foreground: #ffffff;
 }
 
 @theme inline {
@@ -43,18 +45,32 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --color-accent-brand: var(--accent-brand);
+  --color-accent-brand-foreground: var(--accent-brand-foreground);
+  --font-sans: var(--font-inter);
+  --font-mono: var(--font-jetbrains-mono);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
 }
 
+@keyframes pulse-dot {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.3);
+  }
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-inter), "Inter", ui-sans-serif, system-ui, sans-serif;
 }
 
 * {
 
@@ -1,14 +1,14 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const inter = Inter({
+  variable: "--font-inter",
   subsets: ["latin"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const jetbrainsMono = JetBrains_Mono({
+  variable: "--font-jetbrains-mono",
   subsets: ["latin"],
 });
 
@@ -25,7 +25,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${inter.variable} ${jetbrainsMono.variable} antialiased`}
       >
         {children}
       </body>
 
@@ -8,6 +8,7 @@ import {
   ComparisonResult,
   SchemaComparisonResult,
 } from "@/hooks/use-comparison";
+import { Database, Layers, BarChart3 } from "lucide-react";
 
 interface ComparisonPanelProps {
   schemaResult: SchemaComparisonResult | null;
@@ -34,15 +35,23 @@ export function ComparisonPanel({
         {dataResult ? (
           <DataDiff result={dataResult} />
         ) : (
-          <EmptyState message="Run a query to compare data between platforms" />
+          <EmptyState
+            icon={<Database className="h-10 w-10 text-muted-foreground/40" />}
+            message="Run a query to compare data between platforms"
+            hint="Select two platforms above and execute a preset or custom SQL query"
+          />
         )}
       </TabsContent>
 
       <TabsContent value="schema">
         {schemaResult ? (
           <SchemaDiff result={schemaResult} />
         ) : (
-          <EmptyState message="Select two platforms to compare schemas" />
+          <EmptyState
+            icon={<Layers className="h-10 w-10 text-muted-foreground/40" />}
+            message="Select two platforms to compare schemas"
+            hint='Click "Compare Schemas" to see structural differences'
+          />
         )}
       </TabsContent>
 
@@ -53,17 +62,31 @@ export function ComparisonPanel({
             queryNames={queryNames}
           />
         ) : (
-          <EmptyState message="Run queries to see performance comparison" />
+          <EmptyState
+            icon={<BarChart3 className="h-10 w-10 text-muted-foreground/40" />}
+            message="Run queries to see performance comparison"
+            hint="Each query you run will be added to the performance chart"
+          />
         )}
       </TabsContent>
     </Tabs>
   );
 }
 
-function EmptyState({ message }: { message: string }) {
+function EmptyState({
+  icon,
+  message,
+  hint,
+}: {
+  icon: React.ReactNode;
+  message: string;
+  hint: string;
+}) {
   return (
-    <div className="flex items-center justify-center py-16 text-sm text-muted-foreground">
-      {message}
+    <div className="flex flex-col items-center justify-center py-16 gap-3">
+      {icon}
+      <p className="text-sm text-muted-foreground">{message}</p>
+      <p className="text-xs text-muted-foreground/60">{hint}</p>
     </div>
   );
 }