frontend/src/components/layout/AppLayout.tsx

@@ -59,7 +59,34 @@ export function AppLayout() {
   ]
 
   return (
-    <div className={cn('app-shell', sidebarCollapsed && 'app-shell--collapsed')}>
+    <>
+      {/* Atmosphere orbs — ambient light behind glass */}
+      <div
+        className="pointer-events-none fixed z-0"
+        style={{
+          top: '-120px',
+          right: '-80px',
+          width: '600px',
+          height: '600px',
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.04) 40%, transparent 70%)',
+          filter: 'blur(60px)',
+        }}
+      />
+      <div
+        className="pointer-events-none fixed z-0"
+        style={{
+          bottom: '-100px',
+          left: '-60px',
+          width: '500px',
+          height: '500px',
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.02) 40%, transparent 70%)',
+          filter: 'blur(50px)',
+        }}
+      />
+
+      <div className={cn('app-shell relative z-[1]', sidebarCollapsed && 'app-shell--collapsed')}>
       {/* Top Bar - spans full width */}
       <TopBar />
 
@@ -159,6 +186,7 @@ export function AppLayout() {
         <Outlet />
       </main>
     </div>
+    </>
   )
 }