Update background images and UI styling

frontend/index.html

@@ -34,119 +34,107 @@
        DESIGN TOKENS
     ═══════════════════════════════════════════════ */
     :root {
-      /* --- LIGHT MODE (DEFAULT - PREMIUM) --- */
-      --bg-base: #f8fafc;
+      /* --- PREMIUM LIQUID LIGHT MODE --- */
+      --bg-base: #edf4ff;
       --bg-depth: #ffffff;
-      --bg-panel: rgba(255, 255, 255, 0.9);
-      --bg-glass: rgba(255, 255, 255, 0.85);
-      --bg-glass-light: rgba(248, 250, 252, 0.75);
-      --bg-control: #ffffff;
-      --bg-control-hov: #f1f5f9;
-      --bg-active: rgba(14, 165, 233, 0.08);
-      --bg-sidebar: #f1f5f9;
-
-      /* Borders */
-      --bdr-dim: rgba(0, 0, 0, 0.04);
-      --bdr-base: rgba(0, 0, 0, 0.07);
-      --bdr-muted: rgba(0, 0, 0, 0.12);
-      --bdr-accent: rgba(14, 165, 233, 0.4);
-
-      /* Text hierarchy */
-      --txt-bright: #0f172a;
-      --txt-primary: #1e293b;
-      --txt-secondary: #475569;
-      --txt-muted: #94a3b8;
-
-      /* Accent — modern blue */
-      --accent: #0ea5e9;
-      --accent-lo: rgba(14, 165, 233, 0.06);
-      --accent-mid: rgba(14, 165, 233, 0.18);
-      --accent-glow: rgba(14, 165, 233, 0.25);
-
-      /* Semantic */
-      --ok: #10b981;
-      --err: #f43f5e;
-      --warn: #f59e0b;
-
-      /* Chart series */
-      --bull: #10b981;
-      --bear: #f43f5e;
-
-      /* Typography */
-      --ff-display: 'Barlow', 'Chakra Petch', sans-serif;
+      --bg-panel: rgba(255, 255, 255, 0.72);
+      --bg-glass: rgba(255, 255, 255, 0.56);
+      --bg-glass-light: rgba(255, 255, 255, 0.42);
+      --bg-control: rgba(255, 255, 255, 0.46);
+      --bg-control-hov: rgba(255, 255, 255, 0.7);
+      --bg-active: rgba(39, 126, 255, 0.12);
+      --bg-sidebar: rgba(240, 246, 255, 0.58);
+      
+      --bdr-dim: rgba(255, 255, 255, 0.34);
+      --bdr-base: rgba(107, 143, 198, 0.2);
+      --bdr-muted: rgba(99, 131, 193, 0.34);
+      --bdr-accent: rgba(54, 124, 255, 0.4);
+      
+      --txt-bright: #07111f;
+      --txt-primary: #132238;
+      --txt-secondary: #41566f;
+      --txt-muted: #6d8198;
+      
+      --accent: #1f7aff;
+      --accent-lo: rgba(31, 122, 255, 0.1);
+      --accent-mid: rgba(31, 122, 255, 0.24);
+      --accent-glow: rgba(31, 122, 255, 0.3);
+      
+      --ok: #00b894;
+      --err: #ff5470;
+      --warn: #ffaf38;
+      --bull: #00c58e;
+      --bear: #ff5a76;
+      
+      --ff-display: 'Chakra Petch', 'Barlow', sans-serif;
       --ff-ui: 'Barlow', system-ui, sans-serif;
       --ff-mono: 'Space Mono', monospace;
-
-      /* Layout */
+      
       --header-h: 60px;
       --sidebar-w: 280px;
-      --radius: 8px;
-      --radius-lg: 18px;
-      --radius-xl: 24px;
+      --radius: 18px;
+      --radius-lg: 28px;
+      --radius-xl: 36px;
       --ctrl-h: 38px;
-      --ok-glow: rgba(16, 185, 129, 0.3);
-      --err-glow: rgba(244, 63, 94, 0.3);
-      --glow-accent: 0 0 15px rgba(14, 165, 233, 0.25);
-      --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
-
-      /* Dashboard specificity */
-      --glass-cyan: rgba(255, 255, 255, 0.9);
-      --neon-cyan: #0ea5e9;
-      --neon-pink: #ec4899;
-      --neon-green: #10b981;
-      --neon-blue: #3b82f6;
-
-      /* Logo Colors */
-      --logo-primary: #0ea5e9;
-      --logo-secondary: #8b5cf6;
-      --logo-glow: rgba(14, 165, 233, 0.3);
-      --light-bg-image: url("Light_BG.png?v=1");
-      --dark-bg-image: url("Dark_BG.png?v=1");
+      
+      --shadow-lg: 0 30px 80px rgba(31, 55, 104, 0.12), 0 10px 26px rgba(80, 117, 180, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.72);
+      
+      --glass-cyan: rgba(255, 255, 255, 0.62);
+      --neon-cyan: #3ea6ff;
+      --neon-pink: #ff6bb2;
+      --neon-green: #00d68f;
+      --neon-blue: #5b8cff;
+      
+      --logo-primary: #2e8dff;
+      --logo-secondary: #5dd4ff;
+      --logo-glow: rgba(46, 141, 255, 0.36);
+      
+      --light-bg-image: url("Light_BG.png");
+      --dark-bg-image: url("Dark_BG.png");
+      
+      color-scheme: light;
     }
 
     body.dark-theme {
-      /* --- DARK MODE (PRESERVED) --- */
-      --bg-base: #02060c;
-      --bg-depth: #010409;
-      --bg-panel: rgba(2, 6, 14, 0.9);
-      --bg-glass: rgba(2, 8, 16, 0.8);
-      --bg-glass-light: rgba(4, 12, 24, 0.55);
-      --bg-control: rgba(6, 16, 36, 0.85);
-      --bg-control-hov: rgba(12, 28, 58, 0.95);
-      --bg-active: rgba(34, 211, 238, 0.12);
-      --bg-sidebar: rgba(1, 4, 12, 0.65);
-
-      --bdr-dim: rgba(40, 80, 140, 0.15);
-      --bdr-base: rgba(50, 95, 165, 0.25);
-      --bdr-muted: rgba(50, 100, 175, 0.38);
-      --bdr-accent: rgba(34, 211, 238, 0.45);
-
-      --txt-bright: #ffffff;
+      --bg-base: #040915;
+      --bg-depth: rgba(7, 13, 29, 0.72);
+      --bg-panel: rgba(6, 14, 30, 0.72);
+      --bg-glass: rgba(10, 18, 39, 0.5);
+      --bg-glass-light: rgba(15, 24, 48, 0.38);
+      --bg-control: rgba(14, 24, 49, 0.46);
+      --bg-control-hov: rgba(20, 35, 67, 0.72);
+      --bg-active: rgba(59, 130, 246, 0.14);
+      --bg-sidebar: rgba(7, 14, 28, 0.58);
+      
+      --bdr-dim: rgba(150, 197, 255, 0.08);
+      --bdr-base: rgba(120, 168, 255, 0.18);
+      --bdr-muted: rgba(126, 176, 255, 0.3);
+      --bdr-accent: rgba(79, 181, 255, 0.46);
+      
+      --txt-bright: #f8fbff;
       --txt-primary: #f1f5f9;
       --txt-secondary: #cbd5e1;
       --txt-muted: #64748b;
-
+      
       --accent: #22d3ee;
       --accent-lo: rgba(34, 211, 238, 0.08);
       --accent-mid: rgba(34, 211, 238, 0.25);
       --accent-glow: rgba(34, 211, 238, 0.40);
-
+      
       --ok: #2dd4bf;
       --err: #fb7185;
       --warn: #fbbf24;
       --bull: #2dd4bf;
       --bear: #fb7185;
-
-      --glow-accent: 0 0 20px rgba(34, 211, 238, 0.4);
-      --glass-cyan: rgba(6, 18, 42, 0.85);
-      --shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--bdr-accent);
-
-      /* Logo Colors */
+      
       --logo-primary: #22d3ee;
       --logo-secondary: #ec4899;
       --logo-glow: rgba(34, 211, 238, 0.6);
+      
+      color-scheme: dark;
     }
 
+
     /* ═══════════════════════════════════════════════
        RESET
     ═══════════════════════════════════════════════ */
@@ -162,6 +150,8 @@
     body {
       width: 100%;
       height: 100%;
+      margin: 0;
+      padding: 0;
       overflow: hidden;
       background: var(--bg-base);
       color: var(--txt-primary);
@@ -169,7 +159,7 @@
       font-size: 13px;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
-      transition: background 0.3s ease, color 0.3s ease;
+      transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s ease;
     }
 
     /* ═══════════════════════════════════════════════
@@ -180,31 +170,13 @@
       position: fixed;
       inset: 0;
       z-index: -1;
-      background: var(--light-bg-image);
-      background-size: cover;
-      background-position: center;
-      background-repeat: no-repeat;
+      background: var(--bg-base) var(--light-bg-image) no-repeat center/cover;
       opacity: 1;
-      /* Main background set to full visibility as requested */
-      transition: background 0.3s ease, opacity 0.3s ease;
+      transition: background 0.4s ease, opacity 0.4s ease;
     }
 
     body.dark-theme::before {
-      background: var(--dark-bg-image);
-      background-size: cover;
-      background-position: center;
-      background-repeat: no-repeat;
-      opacity: 1;
-    }
-
-    body {
-      background: var(--bg-base);
-      color: var(--txt-primary);
-      font-family: var(--ff-ui);
-      font-size: 13px;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      transition: background 0.3s ease, color 0.3s ease;
+      background: var(--bg-base) var(--dark-bg-image) no-repeat center/cover;
     }
 
     /* ═══════════════════════════════════════════════
@@ -1147,25 +1119,6 @@
     }
 
     /* Futuristic AI Overlay (Adaptive Backgrounds) */
-    .chart-bg-overlay {
-      position: absolute;
-      inset: 0;
-      pointer-events: none;
-      z-index: 1;
-      opacity: 0.12;
-      background-image: var(--light-bg-image);
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: left bottom;
-      mask-image: linear-gradient(to right, black 30%, transparent 85%);
-      -webkit-mask-image: linear-gradient(to right, black 30%, transparent 85%);
-      transition: background-image 0.4s ease, opacity 0.4s ease;
-    }
-
-    body.dark-theme .chart-bg-overlay {
-      background-image: var(--dark-bg-image);
-      opacity: 0.18;
-    }
 
     .chart-logo-overlay {
       position: absolute;
@@ -1790,98 +1743,7 @@
       letter-spacing: 0.05em;
     }
 
-    /* Premium Liquid Glass Override */
-    :root {
-      --bg-base: #edf4ff;
-      --bg-depth: rgba(255, 255, 255, 0.72);
-      --bg-panel: rgba(246, 250, 255, 0.72);
-      --bg-glass: rgba(255, 255, 255, 0.56);
-      --bg-glass-light: rgba(255, 255, 255, 0.42);
-      --bg-control: rgba(255, 255, 255, 0.46);
-      --bg-control-hov: rgba(255, 255, 255, 0.7);
-      --bg-active: rgba(39, 126, 255, 0.12);
-      --bg-sidebar: rgba(240, 246, 255, 0.58);
-      --bdr-dim: rgba(255, 255, 255, 0.34);
-      --bdr-base: rgba(107, 143, 198, 0.2);
-      --bdr-muted: rgba(99, 131, 193, 0.34);
-      --bdr-accent: rgba(54, 124, 255, 0.4);
-      --txt-bright: #07111f;
-      --txt-primary: #132238;
-      --txt-secondary: #41566f;
-      --txt-muted: #6d8198;
-      --accent: #1f7aff;
-      --accent-lo: rgba(31, 122, 255, 0.1);
-      --accent-mid: rgba(31, 122, 255, 0.24);
-      --accent-glow: rgba(31, 122, 255, 0.3);
-      --ok: #00b894;
-      --err: #ff5470;
-      --warn: #ffaf38;
-      --bull: #00c58e;
-      --bear: #ff5a76;
-      --ff-display: 'Chakra Petch', 'Barlow', sans-serif;
-      --radius: 18px;
-      --radius-lg: 28px;
-      --radius-xl: 36px;
-      --shadow-lg: 0 30px 80px rgba(31, 55, 104, 0.12), 0 10px 26px rgba(80, 117, 180, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.72);
-      --glass-cyan: rgba(255, 255, 255, 0.62);
-      --neon-cyan: #3ea6ff;
-      --neon-pink: #ff6bb2;
-      --neon-green: #00d68f;
-      --neon-blue: #5b8cff;
-      --logo-primary: #2e8dff;
-      --logo-secondary: #5dd4ff;
-      --logo-glow: rgba(46, 141, 255, 0.36);
-    }
-
-    body.dark-theme {
-      --bg-base: #040915;
-      --bg-depth: rgba(7, 13, 29, 0.72);
-      --bg-panel: rgba(6, 14, 30, 0.72);
-      --bg-glass: rgba(10, 18, 39, 0.5);
-      --bg-glass-light: rgba(15, 24, 48, 0.38);
-      --bg-control: rgba(14, 24, 49, 0.46);
-      --bg-control-hov: rgba(20, 35, 67, 0.72);
-      --bg-active: rgba(59, 130, 246, 0.14);
-      --bg-sidebar: rgba(7, 14, 28, 0.58);
-      --bdr-dim: rgba(150, 197, 255, 0.08);
-      --bdr-base: rgba(120, 168, 255, 0.18);
-      --bdr-muted: rgba(126, 176, 255, 0.3);
-      --bdr-accent: rgba(79, 181, 255, 0.46);
-      --txt-bright: #f8fbff;
-      --txt-primary: #d9e8ff;
-      --txt-secondary: #9eb6d4;
-      --txt-muted: #6a81a6;
-      --accent: #4fb5ff;
-      --accent-lo: rgba(79, 181, 255, 0.12);
-      --accent-mid: rgba(79, 181, 255, 0.26);
-      --accent-glow: rgba(79, 181, 255, 0.44);
-      --logo-primary: #59bdff;
-      --logo-secondary: #71f0ff;
-      --logo-glow: rgba(89, 189, 255, 0.52);
-      --shadow-lg: 0 36px 100px rgba(1, 6, 18, 0.62), 0 18px 40px rgba(7, 18, 44, 0.4), inset 0 1px 0 rgba(151, 205, 255, 0.08);
-    }
-
-    html {
-      cursor: default;
-    }
-
-    body {
-      background:
-        radial-gradient(circle at 12% 18%, rgba(123, 213, 255, 0.34), transparent 26%),
-        radial-gradient(circle at 85% 12%, rgba(255, 150, 198, 0.22), transparent 24%),
-        radial-gradient(circle at 76% 82%, rgba(68, 212, 173, 0.18), transparent 22%),
-        linear-gradient(145deg, #eef5ff 0%, #edf3fb 42%, #e7eefc 100%);
-      background-attachment: fixed;
-    }
 
-    body.dark-theme {
-      background:
-        radial-gradient(circle at 14% 18%, rgba(54, 119, 255, 0.28), transparent 25%),
-        radial-gradient(circle at 84% 18%, rgba(31, 214, 255, 0.18), transparent 24%),
-        radial-gradient(circle at 72% 84%, rgba(0, 214, 143, 0.12), transparent 22%),
-        linear-gradient(160deg, #030714 0%, #07101f 52%, #091428 100%);
-      background-attachment: fixed;
-    }
 
     body::after {
       content: "";
@@ -2214,46 +2076,25 @@
       inset: 0;
       opacity: 1;
       background-image:
-        linear-gradient(90deg, rgba(236, 246, 255, 0.9) 0%, rgba(236, 246, 255, 0.74) 24%, rgba(236, 246, 255, 0.34) 54%, rgba(236, 246, 255, 0.12) 100%),
-        radial-gradient(circle at 24% 58%, rgba(104, 225, 255, 0.22), transparent 24%),
-        radial-gradient(circle at 76% 14%, rgba(255, 171, 217, 0.16), transparent 20%),
-        linear-gradient(180deg, rgba(134, 219, 255, 0.08) 0%, rgba(134, 219, 255, 0) 42%, rgba(124, 168, 255, 0.04) 100%);
+        linear-gradient(90deg, rgba(237, 244, 255, 0.94) 0%, rgba(237, 244, 255, 0.82) 24%, rgba(237, 244, 255, 0.42) 54%, rgba(237, 244, 255, 0.18) 100%),
+        radial-gradient(circle at 24% 58%, rgba(104, 225, 255, 0.28), transparent 24%),
+        radial-gradient(circle at 76% 14%, rgba(255, 171, 217, 0.22), transparent 20%),
+        linear-gradient(180deg, rgba(134, 219, 255, 0.1) 0%, rgba(134, 219, 255, 0) 42%, rgba(124, 168, 255, 0.06) 100%);
       background-size: auto, auto, auto, auto;
       background-position: center, 24% 58%, 76% 14%, center;
       background-repeat: no-repeat;
-      mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.96) 62%, rgba(0, 0, 0, 0.78) 82%, rgba(0, 0, 0, 0.42) 100%);
-      -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.96) 62%, rgba(0, 0, 0, 0.78) 82%, rgba(0, 0, 0, 0.42) 100%);
+      mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.96) 62%, rgba(0, 0, 0, 0.78) 82%, rgba(0, 0, 0, 0.42) 100%);
+      -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.96) 62%, rgba(0, 0, 0, 0.78) 82%, rgba(0, 0, 0, 0.42) 100%);
     }
 
-    .chart-logo-overlay {
-      bottom: 28px;
-      right: 108px;
-      font-size: 3rem;
-      letter-spacing: 0.35em;
-      opacity: 0.16;
-      z-index: 3;
-    }
-
-    .chart-bg-overlay::before,
-    .chart-bg-overlay::after {
+    .chart-bg-overlay::before {
       content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
-    }
-
-    .chart-bg-overlay::before {
-      background:
-        linear-gradient(90deg, rgba(235, 246, 255, 0.28) 0%, rgba(235, 246, 255, 0.16) 35%, rgba(235, 246, 255, 0.06) 62%, transparent 100%),
-        radial-gradient(circle at 31% 65%, rgba(92, 212, 255, 0.16), transparent 16%),
-        radial-gradient(circle at 29% 34%, rgba(107, 173, 255, 0.12), transparent 18%),
-        linear-gradient(90deg, transparent 0%, rgba(79, 179, 255, 0.08) 18%, transparent 36%, transparent 100%),
-        var(--light-bg-image);
-      background-size: auto, auto, auto, auto, cover;
-      background-position: center, 31% 65%, 29% 34%, center, left center;
-      background-repeat: no-repeat;
-      mix-blend-mode: screen;
-      opacity: 0.3;
+      background: var(--light-bg-image) no-repeat left center/cover;
+      opacity: 0.22;
+      mix-blend-mode: multiply;
       animation: hologram-drift 20s ease-in-out infinite;
     }