From 5e40e8dd551d0a803f1618089ad34a99f1256497 Mon Sep 17 00:00:00 2001
From: anoracleofra-code <anoracleofra@gmail.com>
Date: Thu, 26 Mar 2026 20:53:05 -0600
Subject: [PATCH] =?UTF-8?q?style:=20terminal=20reskin=20=E2=80=94=20Infone?=
 =?UTF-8?q?t=20aesthetic=20for=20main=20dashboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- JetBrains Mono as primary body font
- Backgrounds: pure black → #0a0a0a (warmer dark)
- Borders: opacity 0.18 → 0.30 (more visible panel edges)
- Body text: near-white → gray-300 (softer terminal feel)
- Scanline overlay: 5% → 8% opacity
- Text glow: double-layer shadow, increased intensity
- All panel containers: bg-[#0a0a0a]/90 border-cyan-900/40
- Map popup titles: uppercase + tracking
- Matrix HUD theme: updated border baselines to match

Rollback: git reset --hard backup-pre-terminal-reskin
---
 frontend/src/app/globals.css                  | 81 ++++++++++---------
 frontend/src/app/page.tsx                     | 10 +--
 frontend/src/components/FilterPanel.tsx       |  2 +-
 frontend/src/components/FindLocateBar.tsx     |  2 +-
 frontend/src/components/GlobalTicker.tsx      |  2 +-
 frontend/src/components/MarketsPanel.tsx      |  2 +-
 frontend/src/components/MeshChat.tsx          |  2 +-
 frontend/src/components/NewsFeed.tsx          |  2 +-
 frontend/src/components/PredictionsPanel.tsx  |  2 +-
 .../src/components/RadioInterceptPanel.tsx    |  2 +-
 .../src/components/WorldviewLeftPanel.tsx     |  2 +-
 .../src/components/WorldviewRightPanel.tsx    |  6 +-
 12 files changed, 58 insertions(+), 57 deletions(-)

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 0a66699..fea642f 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1,22 +1,22 @@
 @import 'tailwindcss';
 
 :root {
-  --background: #000000;
-  --foreground: #ededed;
-  --bg-primary: #000000;
-  --bg-secondary: rgb(5, 5, 8);
-  --bg-tertiary: rgb(12, 12, 16);
-  --bg-panel: rgba(0, 0, 0, 0.85);
-  --border-primary: rgba(8, 145, 178, 0.18);
-  --border-secondary: rgba(8, 145, 178, 0.30);
-  --border-glow: rgba(6, 182, 212, 0.12);
-  --text-primary: rgb(243, 244, 246);
+  --background: #0a0a0a;
+  --foreground: #d1d5db;
+  --bg-primary: #0a0a0a;
+  --bg-secondary: #080808;
+  --bg-tertiary: #0f0f0f;
+  --bg-panel: rgba(10, 10, 10, 0.92);
+  --border-primary: rgba(8, 145, 178, 0.30);
+  --border-secondary: rgba(8, 145, 178, 0.45);
+  --border-glow: rgba(6, 182, 212, 0.18);
+  --text-primary: rgb(209, 213, 219);
   --text-secondary: rgb(34, 211, 238);
   --text-muted: rgb(8, 145, 178);
-  --text-heading: rgb(236, 254, 255);
+  --text-heading: rgb(207, 250, 254);
   --hover-accent: rgba(8, 51, 68, 0.2);
-  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
-  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
+  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
+  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
   --font-geist-sans:
     ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans',
     sans-serif;
@@ -27,22 +27,22 @@
 
 /* Light theme: only the map basemap changes — UI stays dark */
 [data-theme='light'] {
-  --background: #000000;
-  --foreground: #ededed;
-  --bg-primary: #000000;
-  --bg-secondary: rgb(5, 5, 8);
-  --bg-tertiary: rgb(12, 12, 16);
-  --bg-panel: rgba(0, 0, 0, 0.85);
-  --border-primary: rgba(8, 145, 178, 0.18);
-  --border-secondary: rgba(8, 145, 178, 0.30);
-  --border-glow: rgba(6, 182, 212, 0.12);
-  --text-primary: rgb(243, 244, 246);
+  --background: #0a0a0a;
+  --foreground: #d1d5db;
+  --bg-primary: #0a0a0a;
+  --bg-secondary: #080808;
+  --bg-tertiary: #0f0f0f;
+  --bg-panel: rgba(10, 10, 10, 0.92);
+  --border-primary: rgba(8, 145, 178, 0.30);
+  --border-secondary: rgba(8, 145, 178, 0.45);
+  --border-glow: rgba(6, 182, 212, 0.18);
+  --text-primary: rgb(209, 213, 219);
   --text-secondary: rgb(34, 211, 238);
   --text-muted: rgb(8, 145, 178);
-  --text-heading: rgb(236, 254, 255);
+  --text-heading: rgb(207, 250, 254);
   --hover-accent: rgba(8, 51, 68, 0.2);
-  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
-  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
+  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
+  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
 }
 
 @theme inline {
@@ -55,7 +55,7 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: var(--font-roboto-mono), 'Roboto Mono', monospace;
+  font-family: 'JetBrains Mono', var(--font-roboto-mono), 'Roboto Mono', monospace;
 }
 
 /* Global interactive cursor hints */
@@ -116,30 +116,30 @@ textarea:disabled {
 
 /* Subtle text glow for cyan headings */
 .text-glow {
-  text-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
+  text-shadow: 0 0 10px rgba(34, 211, 238, 0.45), 0 0 20px rgba(34, 211, 238, 0.15);
 }
 
 /* Terminal input — prompt style */
 .terminal-input {
   border-radius: 0;
-  border: 1px solid rgba(8, 145, 178, 0.25);
-  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(8, 145, 178, 0.35);
+  background: rgba(10, 10, 10, 0.5);
 }
 .terminal-input:focus {
   border-color: rgba(34, 211, 238, 0.5);
-  box-shadow: 0 0 6px rgba(34, 211, 238, 0.15);
+  box-shadow: 0 0 8px rgba(34, 211, 238, 0.2);
   outline: none;
 }
 
 /* Map popup shared utilities */
 .map-popup {
-  background: rgba(10, 14, 26, 0.95);
+  background: rgba(10, 14, 20, 0.96);
   border-radius: 2px;
-  border: 1px solid rgba(8, 145, 178, 0.25);
+  border: 1px solid rgba(8, 145, 178, 0.35);
   padding: 10px 14px;
-  color: #e0e6f0;
+  color: #d1d5db;
   font-family:
-    var(--font-roboto-mono), 'Roboto Mono', monospace, 'Microsoft YaHei', 'PingFang SC',
+    'JetBrains Mono', var(--font-roboto-mono), 'Roboto Mono', monospace, 'Microsoft YaHei', 'PingFang SC',
     'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', sans-serif;
   font-size: 11px;
   min-width: 220px;
@@ -150,7 +150,8 @@ textarea:disabled {
   font-weight: 700;
   font-size: 13px;
   margin-bottom: 6px;
-  letter-spacing: 1px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
 }
 
 .map-popup-row {
@@ -185,12 +186,12 @@ textarea:disabled {
   --hover-accent: rgba(5, 46, 22, 0.2);
   --scrollbar-thumb: rgba(255, 255, 255, 0.12);
   --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
-  --border-primary: rgba(22, 163, 74, 0.18);
-  --border-secondary: rgba(22, 163, 74, 0.30);
-  --border-glow: rgba(34, 197, 94, 0.12);
+  --border-primary: rgba(22, 163, 74, 0.30);
+  --border-secondary: rgba(22, 163, 74, 0.45);
+  --border-glow: rgba(34, 197, 94, 0.18);
 }
 [data-hud='matrix'] .hud-zone .text-glow {
-  text-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
+  text-shadow: 0 0 10px rgba(74, 222, 128, 0.45), 0 0 20px rgba(74, 222, 128, 0.15);
 }
 
 /* --- Text color overrides --- */
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index a34c789..a23c6fc 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -722,7 +722,7 @@ export default function Dashboard() {
             >
               <button
                 onClick={() => setLeftOpen(!leftOpen)}
-                className="flex flex-col items-center gap-1.5 py-5 px-1.5 bg-cyan-950/40 border border-cyan-800/30 border-l-0 rounded-r text-cyan-700 hover:text-cyan-400 hover:bg-cyan-950/60 hover:border-cyan-500/40 transition-colors"
+                className="flex flex-col items-center gap-1.5 py-5 px-1.5 bg-cyan-950/40 border border-cyan-800/50 border-l-0 rounded-r text-cyan-700 hover:text-cyan-400 hover:bg-cyan-950/60 hover:border-cyan-500/40 transition-colors"
               >
                 {leftOpen ? <ChevronLeft size={10} /> : <ChevronRight size={10} />}
                 <span
@@ -742,7 +742,7 @@ export default function Dashboard() {
             >
               <button
                 onClick={() => setRightOpen(!rightOpen)}
-                className="flex flex-col items-center gap-1.5 py-5 px-1.5 bg-cyan-950/40 border border-cyan-800/30 border-r-0 rounded-l text-cyan-700 hover:text-cyan-400 hover:bg-cyan-950/60 hover:border-cyan-500/40 transition-colors"
+                className="flex flex-col items-center gap-1.5 py-5 px-1.5 bg-cyan-950/40 border border-cyan-800/50 border-r-0 rounded-l text-cyan-700 hover:text-cyan-400 hover:bg-cyan-950/60 hover:border-cyan-500/40 transition-colors"
               >
                 {rightOpen ? <ChevronRight size={10} /> : <ChevronLeft size={10} />}
                 <span
@@ -837,7 +837,7 @@ export default function Dashboard() {
                 />
 
                 <div
-                  className="bg-[var(--bg-primary)]/80 border border-[var(--border-primary)] px-5 py-1.5 flex items-center gap-5 border-b-2 border-b-cyan-900 cursor-pointer"
+                  className="bg-[#0a0a0a]/90 border border-cyan-900/40 px-5 py-1.5 flex items-center gap-5 border-b-2 border-b-cyan-800 cursor-pointer backdrop-blur-sm"
                   onClick={cycleStyle}
                 >
                   {/* Coordinates */}
@@ -949,7 +949,7 @@ export default function Dashboard() {
 
         {/* SCANLINES OVERLAY */}
         <div
-          className="absolute inset-0 pointer-events-none z-[3] opacity-5 bg-[linear-gradient(rgba(255,255,255,0.1)_1px,transparent_1px)]"
+          className="absolute inset-0 pointer-events-none z-[3] opacity-[0.08] bg-[linear-gradient(rgba(255,255,255,0.1)_1px,transparent_1px)]"
           style={{ backgroundSize: '100% 4px' }}
         ></div>
 
@@ -1107,7 +1107,7 @@ export default function Dashboard() {
         >
           <button
             onClick={() => setTickerOpen(!tickerOpen)}
-            className="flex items-center gap-2 px-3 py-1 bg-cyan-950/40 border border-cyan-800/30 border-b-0 rounded-t text-cyan-700 hover:text-cyan-400 hover:bg-cyan-950/60 hover:border-cyan-500/40 transition-colors"
+            className="flex items-center gap-2 px-3 py-1 bg-cyan-950/40 border border-cyan-800/50 border-b-0 rounded-t text-cyan-700 hover:text-cyan-400 hover:bg-cyan-950/60 hover:border-cyan-500/40 transition-colors"
           >
             <div className="text-[7.5px] font-mono tracking-[0.25em] font-bold uppercase">
               MARKETS
diff --git a/frontend/src/components/FilterPanel.tsx b/frontend/src/components/FilterPanel.tsx
index b302fa1..70f7e34 100644
--- a/frontend/src/components/FilterPanel.tsx
+++ b/frontend/src/components/FilterPanel.tsx
@@ -300,7 +300,7 @@ const FilterPanel = React.memo(function FilterPanel({ activeFilters, setActiveFi
         initial={{ y: -30, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.6, delay: 0.3 }}
-        className="w-full bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] z-10 flex flex-col font-mono text-sm pointer-events-auto flex-shrink-0"
+        className="w-full bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 z-10 flex flex-col font-mono text-sm pointer-events-auto flex-shrink-0"
       >
         {/* Header Toggle */}
         <div
diff --git a/frontend/src/components/FindLocateBar.tsx b/frontend/src/components/FindLocateBar.tsx
index e8fa99f..75f750e 100644
--- a/frontend/src/components/FindLocateBar.tsx
+++ b/frontend/src/components/FindLocateBar.tsx
@@ -175,7 +175,7 @@ const FindLocateBar = React.memo(function FindLocateBar({ onLocate, onFilter }:
 
   return (
     <div ref={containerRef} className="relative w-full pointer-events-auto">
-      <div className="flex items-center gap-2 bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] px-3 py-2 focus-within:border-cyan-500/40 transition-colors">
+      <div className="flex items-center gap-2 bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 px-3 py-2 focus-within:border-cyan-500/40 transition-colors">
         <Search size={12} className="text-slate-500 flex-shrink-0" />
         <input
           ref={inputRef}
diff --git a/frontend/src/components/GlobalTicker.tsx b/frontend/src/components/GlobalTicker.tsx
index 690590e..9b447d2 100644
--- a/frontend/src/components/GlobalTicker.tsx
+++ b/frontend/src/components/GlobalTicker.tsx
@@ -44,7 +44,7 @@ export default function GlobalTicker() {
 
   return (
     <div
-      className="absolute bottom-0 left-0 right-0 h-7 bg-black/95 border-t border-[var(--border-primary)] shadow-[0_-5px_15px_rgba(0,0,0,0.6)] z-[8000] flex items-center overflow-hidden pointer-events-auto backdrop-blur-xl"
+      className="absolute bottom-0 left-0 right-0 h-7 bg-[#0a0a0a]/95 border-t border-cyan-900/40 shadow-[0_-5px_15px_rgba(0,0,0,0.6)] z-[8000] flex items-center overflow-hidden pointer-events-auto backdrop-blur-xl"
     >
 
       {fallback && (
diff --git a/frontend/src/components/MarketsPanel.tsx b/frontend/src/components/MarketsPanel.tsx
index fc7adc2..a6d9873 100644
--- a/frontend/src/components/MarketsPanel.tsx
+++ b/frontend/src/components/MarketsPanel.tsx
@@ -264,7 +264,7 @@ const MarketsPanel = React.memo(function MarketsPanel({ data, focused, onFocusCh
       initial={{ y: -50, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ duration: 0.8, delay: 0.2 }}
-      className="w-full bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] z-10 flex flex-col font-mono text-sm pointer-events-auto flex-shrink-0"
+      className="w-full bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 z-10 flex flex-col font-mono text-sm pointer-events-auto flex-shrink-0"
     >
       {/* Header */}
       <div
diff --git a/frontend/src/components/MeshChat.tsx b/frontend/src/components/MeshChat.tsx
index fd82b5a..5706b30 100644
--- a/frontend/src/components/MeshChat.tsx
+++ b/frontend/src/components/MeshChat.tsx
@@ -3893,7 +3893,7 @@ const MeshChat = React.memo(function MeshChat({
     >
       {/* Single unified box — matches Data Layers panel skin */}
       <div
-        className={`bg-black/50 backdrop-blur-sm border border-cyan-800/40 flex flex-col relative overflow-hidden`}
+        className={`bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 flex flex-col relative overflow-hidden`}
         style={{ boxShadow: '0 0 15px rgba(8,145,178,0.06), inset 0 0 20px rgba(0,0,0,0.4)', ...(expanded ? { flex: '1 1 0', minHeight: 0 } : {}) }}
       >
         {/* HEADER */}
diff --git a/frontend/src/components/NewsFeed.tsx b/frontend/src/components/NewsFeed.tsx
index 87d035f..49532be 100644
--- a/frontend/src/components/NewsFeed.tsx
+++ b/frontend/src/components/NewsFeed.tsx
@@ -1053,7 +1053,7 @@ function NewsFeedInner({ selectedEntity, regionDossier, regionDossierLoading, on
             initial={{ y: 50, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{ duration: 0.8, delay: 0.2 }}
-            className={`w-full bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] flex flex-col z-10 font-mono pointer-events-auto overflow-hidden transition-all duration-300 ${isMinimized ? 'h-[50px] flex-shrink-0' : 'flex-1 min-h-0'}`}
+            className={`w-full bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 flex flex-col z-10 font-mono pointer-events-auto overflow-hidden transition-all duration-300 ${isMinimized ? 'h-[50px] flex-shrink-0' : 'flex-1 min-h-0'}`}
         >
             <div
                 className="p-3 border-b border-[var(--border-primary)]/50 relative overflow-hidden cursor-pointer hover:bg-[var(--bg-secondary)]/50 transition-colors"
diff --git a/frontend/src/components/PredictionsPanel.tsx b/frontend/src/components/PredictionsPanel.tsx
index ea8afeb..49d0cec 100644
--- a/frontend/src/components/PredictionsPanel.tsx
+++ b/frontend/src/components/PredictionsPanel.tsx
@@ -769,7 +769,7 @@ const PredictionsPanel = React.memo(function PredictionsPanel() {
         initial={{ opacity: 0, x: 50 }}
         animate={{ opacity: 1, x: 0 }}
         transition={{ duration: 0.8, delay: 0.2 }}
-        className="w-full bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] z-10 flex flex-col font-mono text-sm pointer-events-auto flex-shrink-0"
+        className="w-full bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 z-10 flex flex-col font-mono text-sm pointer-events-auto flex-shrink-0"
       >
         {/* Header */}
         <div
diff --git a/frontend/src/components/RadioInterceptPanel.tsx b/frontend/src/components/RadioInterceptPanel.tsx
index a6cfdcf..0640eec 100644
--- a/frontend/src/components/RadioInterceptPanel.tsx
+++ b/frontend/src/components/RadioInterceptPanel.tsx
@@ -291,7 +291,7 @@ export default function RadioInterceptPanel({
       initial={{ opacity: 0, x: 50 }}
       animate={{ opacity: 1, x: 0 }}
       transition={{ duration: 1, delay: 0.2 }}
-      className="w-full flex flex-col bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] pointer-events-auto relative overflow-hidden max-h-full"
+      className="w-full flex flex-col bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 pointer-events-auto relative overflow-hidden max-h-full"
     >
       <div
         className="flex items-center justify-between p-4 border-b border-[var(--border-primary)]/50 cursor-pointer hover:bg-[var(--bg-secondary)]/50 transition-colors"
diff --git a/frontend/src/components/WorldviewLeftPanel.tsx b/frontend/src/components/WorldviewLeftPanel.tsx
index 60c3d9c..c2d41c8 100644
--- a/frontend/src/components/WorldviewLeftPanel.tsx
+++ b/frontend/src/components/WorldviewLeftPanel.tsx
@@ -1103,7 +1103,7 @@ const WorldviewLeftPanel = React.memo(function WorldviewLeftPanel({
       </div>
 
       {/* Data Layers Box */}
-      <div className={`bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] pointer-events-auto flex flex-col relative overflow-hidden max-h-full ${isMinimized ? 'flex-shrink-0' : 'flex-1 min-h-0'}`}>
+      <div className={`bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 pointer-events-auto flex flex-col relative overflow-hidden max-h-full ${isMinimized ? 'flex-shrink-0' : 'flex-1 min-h-0'}`}>
         {/* Header / Toggle */}
         <div 
           className="flex justify-between items-center p-4 cursor-pointer hover:bg-[var(--bg-secondary)]/50 transition-colors border-b border-[var(--border-primary)]/50"
diff --git a/frontend/src/components/WorldviewRightPanel.tsx b/frontend/src/components/WorldviewRightPanel.tsx
index 3d1a086..cbbce9b 100644
--- a/frontend/src/components/WorldviewRightPanel.tsx
+++ b/frontend/src/components/WorldviewRightPanel.tsx
@@ -35,10 +35,10 @@ const WorldviewRightPanel = React.memo(function WorldviewRightPanel({
       initial={{ opacity: 0, x: -50 }}
       animate={{ opacity: 1, x: 0 }}
       transition={{ duration: 1 }}
-      className={`w-full bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] z-10 flex flex-col font-mono pointer-events-auto overflow-hidden transition-all duration-300 flex-shrink-0 ${isMinimized ? 'h-[50px]' : 'h-[320px]'}`}
+      className={`w-full bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 z-10 flex flex-col font-mono pointer-events-auto overflow-hidden transition-all duration-300 flex-shrink-0 ${isMinimized ? 'h-[50px]' : 'h-[320px]'}`}
     >
       {/* Record / Orbit Tracker Header */}
-      <div className="flex items-center gap-3 mb-6 border border-[var(--border-primary)] bg-[var(--bg-primary)]/40 backdrop-blur-sm px-4 py-2 rounded-sm relative pointer-events-auto">
+      <div className="flex items-center gap-3 mb-6 border border-cyan-900/40 bg-[#0a0a0a]/90 backdrop-blur-sm px-4 py-2 rounded-sm relative pointer-events-auto">
         <div className="absolute -top-1 -left-1 w-2 h-2 border-t border-l border-[var(--text-muted)]/50"></div>
         <div className="absolute -bottom-1 -right-1 w-2 h-2 border-b border-r border-[var(--text-muted)]/50"></div>
         <div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
@@ -50,7 +50,7 @@ const WorldviewRightPanel = React.memo(function WorldviewRightPanel({
       </div>
 
       {/* Right side controls box */}
-      <div className="bg-[var(--bg-primary)]/40 backdrop-blur-sm border border-[var(--border-primary)] pointer-events-auto border-r-2 border-r-[var(--border-primary)] flex flex-col relative overflow-hidden h-full">
+      <div className="bg-[#0a0a0a]/90 backdrop-blur-sm border border-cyan-900/40 pointer-events-auto border-r-2 border-r-cyan-900/40 flex flex-col relative overflow-hidden h-full">
         {/* Header / Toggle */}
         <div
           className="flex justify-between items-center p-4 cursor-pointer hover:bg-[var(--bg-secondary)]/50 transition-colors border-b border-[var(--border-primary)]/50"