Update Frontend: Replace backgrounds with AIBG.png and update index.html

frontend/index.html

@@ -88,9 +88,15 @@
       --logo-primary: #2e8dff;
       --logo-secondary: #5dd4ff;
       --logo-glow: rgba(46, 141, 255, 0.36);
+      --panel-shadow: 0 36px 90px rgba(31, 57, 102, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78);
+      --panel-shadow-dark: 0 38px 100px rgba(1, 8, 20, 0.5), inset 0 1px 0 rgba(179, 224, 255, 0.08);
+      --focus-ring: 0 0 0 3px rgba(78, 156, 255, 0.12), 0 0 0 6px rgba(78, 156, 255, 0.08);
       
-      --light-bg-image: url("Light_BG.png");
-      --dark-bg-image: url("Dark_BG.png");
+      --ai-bg-image: url("AIBG.png");
+      --ai-bg-opacity: 0.3;
+      --ai-bg-height: clamp(360px, 68vh, 820px);
+      --ai-bg-position-x: clamp(18px, 2vw, 34px);
+      --ai-bg-position-y: clamp(18px, 2vw, 28px);
       
       color-scheme: light;
     }
@@ -168,15 +174,26 @@
     body::before {
       content: "";
       position: fixed;
-      inset: 0;
-      z-index: -1;
-      background: var(--bg-base) var(--light-bg-image) no-repeat center/cover;
-      opacity: 1;
-      transition: background 0.4s ease, opacity 0.4s ease;
+      inset: -14%;
+      z-index: 0;
+      pointer-events: none;
+      background:
+        radial-gradient(circle at 14% 18%, rgba(108, 198, 255, 0.24), transparent 18%),
+        radial-gradient(circle at 82% 14%, rgba(125, 230, 255, 0.18), transparent 20%),
+        radial-gradient(circle at 28% 78%, rgba(255, 152, 214, 0.16), transparent 18%),
+        conic-gradient(from 160deg at 50% 50%, rgba(75, 184, 255, 0.08), rgba(255, 255, 255, 0.02), rgba(106, 240, 255, 0.12), rgba(75, 184, 255, 0.08));
+      filter: blur(58px) saturate(135%);
+      opacity: 0.95;
+      animation: ambient-pan 24s ease-in-out infinite alternate;
     }
 
     body.dark-theme::before {
-      background: var(--bg-base) var(--dark-bg-image) no-repeat center/cover;
+      background:
+        radial-gradient(circle at 16% 18%, rgba(44, 170, 255, 0.26), transparent 18%),
+        radial-gradient(circle at 82% 12%, rgba(52, 235, 255, 0.18), transparent 20%),
+        radial-gradient(circle at 32% 82%, rgba(23, 112, 201, 0.16), transparent 22%),
+        conic-gradient(from 140deg at 50% 50%, rgba(21, 85, 160, 0.1), rgba(3, 12, 28, 0.02), rgba(24, 193, 255, 0.1), rgba(21, 85, 160, 0.1));
+      opacity: 1;
     }
 
     /* ═══════════════════════════════════════════════
@@ -314,6 +331,7 @@
       align-items: center;
       gap: 10px;
       flex: 1;
+      min-width: 0;
       justify-content: flex-end;
       flex-wrap: nowrap;
       /* Keep tight, but handle overflow via media queries */
@@ -389,6 +407,12 @@
       background: rgba(255, 255, 255, 0.08);
     }
 
+    .search-item:focus-visible {
+      outline: none;
+      background: rgba(102, 176, 255, 0.1);
+      box-shadow: inset 0 0 0 1px rgba(98, 172, 255, 0.34);
+    }
+
     .search-item .sym {
       font-family: var(--ff-mono);
       font-weight: 700;
@@ -445,6 +469,7 @@
       display: flex;
       flex-direction: column;
       gap: 3px;
+      min-width: 0;
     }
 
     .ctrl-label {
@@ -525,6 +550,7 @@
     /* primary button */
     .btn-primary {
       height: var(--ctrl-h);
+      min-width: 126px;
       padding: 0 18px;
       background: var(--accent-lo);
       border: 1px solid var(--bdr-accent);
@@ -562,6 +588,7 @@
     .btn-icon {
       height: var(--ctrl-h);
       width: var(--ctrl-h);
+      flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -584,6 +611,8 @@
       border-color: var(--bdr-muted);
       background: var(--bg-control-hov);
       color: var(--txt-bright);
+      transform: translateY(-1px);
+      box-shadow: 0 12px 24px rgba(58, 92, 146, 0.12);
     }
 
     .btn-icon:active {
@@ -715,12 +744,24 @@
       flex: 1;
       display: flex;
       flex-direction: column;
+      width: 100%;
+      max-height: 100%;
       overflow-x: hidden;
       overflow-y: auto;
       min-height: 0;
       overscroll-behavior: contain;
     }
 
+    .dash-body-scaler {
+      flex: 1;
+      overflow: hidden;
+      overflow-x: hidden;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      padding-bottom: 12px;
+    }
+
     /* ── TOP: 3 Big Gauges Row ── */
     .dash-gauges-hero {
       display: flex;
@@ -829,7 +870,10 @@
     /* Theme Toggle Button */
     .btn-theme {
       height: var(--ctrl-h);
-      padding: 0 12px;
+      width: var(--ctrl-h);
+      flex-shrink: 0;
+      justify-content: center;
+      padding: 0;
       background: var(--bg-control);
       border: 1px solid var(--bdr-base);
       color: var(--txt-primary);
@@ -849,6 +893,11 @@
     .btn-theme svg {
       width: 16px;
       height: 16px;
+      transition: transform 0.25s ease;
+    }
+
+    .btn-theme:hover svg {
+      transform: rotate(12deg) scale(1.04);
     }
 
     .gauge-hero-signal {
@@ -1139,13 +1188,41 @@
       opacity: 0.35;
       text-transform: uppercase;
       white-space: nowrap;
-      transition: opacity 0.3s ease;
+      transition: opacity 0.3s ease, transform 0.3s ease;
+      animation: logo-float 8s ease-in-out infinite;
     }
 
     body.dark-theme .chart-logo-overlay {
       opacity: 0.55;
     }
 
+    @keyframes logo-float {
+
+      0%,
+      100% {
+        transform: translate3d(0, 0, 0);
+      }
+
+      50% {
+        transform: translate3d(0, -6px, 0);
+      }
+    }
+
+    @keyframes ambient-pan {
+
+      0% {
+        transform: translate3d(-2%, -1%, 0) scale(1);
+      }
+
+      50% {
+        transform: translate3d(2%, 2%, 0) scale(1.04);
+      }
+
+      100% {
+        transform: translate3d(-1%, 4%, 0) scale(1.08);
+      }
+    }
+
     /* ── Terminal Loader Overlay (Strict Isolation) ── */
     .terminal-loader-overlay {
       position: absolute;
@@ -1389,6 +1466,57 @@
       }
     }
 
+    @media (max-width: 1280px) {
+      .hdr {
+        gap: 12px;
+      }
+
+      .market-status-bar {
+        gap: 12px;
+        margin-right: 8px;
+      }
+
+      .omnibox {
+        width: clamp(180px, 20vw, 240px);
+      }
+
+      #symbolSelect {
+        width: 240px;
+      }
+    }
+
+    @media (max-width: 1120px) {
+      .hdr {
+        height: auto;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        padding: 14px 16px;
+      }
+
+      .hdr-divider {
+        display: none;
+      }
+
+      .market-status-bar {
+        order: 3;
+        width: 100%;
+        margin-right: 0;
+        padding: 6px 10px;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+      }
+
+      .ctrls {
+        width: 100%;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+      }
+
+      .ctrl-unit {
+        min-width: fit-content;
+      }
+    }
+
     @media (max-width: 1024px) {
       .omnibox {
         width: 200px;
@@ -1398,12 +1526,16 @@
         display: none;
       }
 
+      #symbolSelect {
+        width: 200px;
+      }
+
       /* Hide labels to save space */
     }
 
     @media (max-width: 680px) {
       .hdr {
-        padding: 0 10px;
+        padding: 12px 10px;
         gap: 6px;
       }
 
@@ -1415,21 +1547,61 @@
         font-size: 1.1rem;
       }
 
-      #symbolSelect {
-        width: 120px;
+      .ctrls {
+        gap: 8px;
+      }
+
+      .ctrl-unit {
+        width: calc(50% - 4px);
       }
 
-      #timeframeSelect {
-        width: 55px;
+      .omnibox,
+      .ctrl-unit:first-of-type {
+        width: 100%;
       }
 
-      #horizonInput {
-        width: 50px;
+      #timeframeSelect,
+      #horizonInput,
+      #indicatorSelect {
+        width: 100% !important;
       }
 
       .btn-primary {
-        padding: 0 10px;
-        font-size: 0.7rem;
+        min-width: 0;
+        flex: 1 1 140px;
+        padding: 0 14px;
+        font-size: 0.8rem;
+      }
+
+      .btn-icon,
+      .btn-theme {
+        flex: 0 0 var(--ctrl-h);
+      }
+    }
+
+    @media (max-width: 560px) {
+      .hdr {
+        margin: 8px 8px 0;
+        padding: 12px;
+        border-radius: 20px;
+      }
+
+      .logo-mark {
+        width: 42px;
+        height: 42px;
+      }
+
+      .logo-name {
+        font-size: 1rem;
+      }
+
+      .market-status-bar {
+        gap: 10px;
+        font-size: 0.68rem;
+      }
+
+      .ctrl-unit {
+        width: 100%;
       }
     }
 
@@ -1498,7 +1670,7 @@
     }
 
     .compact-gauge-card {
-      background: var(--bg-glass-light);
+      background: linear-gradient(180deg, color-mix(in srgb, var(--bg-glass-light) 88%, white 12%) 0%, var(--bg-glass-light) 100%);
       backdrop-filter: blur(12px) saturate(180%);
       -webkit-backdrop-filter: blur(12px) saturate(180%);
       border: 1px solid var(--bdr-dim);
@@ -1509,17 +1681,17 @@
       align-items: center;
       gap: 6px;
       min-width: 105px;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.05);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       pointer-events: auto;
       cursor: default;
     }
 
     .compact-gauge-card:hover {
-      transform: translateY(-2px);
-      background: var(--bg-glass);
+      transform: translateY(-4px) scale(1.01);
+      background: linear-gradient(180deg, color-mix(in srgb, var(--bg-glass) 82%, white 18%) 0%, var(--bg-glass) 100%);
       border-color: var(--bdr-accent);
-      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18), 0 0 10px var(--accent-lo);
+      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16), 0 0 0 8px rgba(90, 165, 255, 0.05), 0 0 16px var(--accent-lo);
     }
 
     .compact-gauge-title {
@@ -1749,7 +1921,7 @@
       content: "";
       position: fixed;
       inset: 0;
-      z-index: -1;
+      z-index: 0;
       pointer-events: none;
       background:
         linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
@@ -1766,44 +1938,76 @@
       z-index: 1;
     }
 
-    .liquid-orb {
+    .ambient-orb {
       position: fixed;
       border-radius: 999px;
       pointer-events: none;
-      filter: blur(18px);
       mix-blend-mode: screen;
-      opacity: 0.55;
       z-index: 0;
-      animation: orb-float 16s ease-in-out infinite;
+      opacity: 0.72;
+      filter: blur(20px);
+      animation: orb-drift 18s ease-in-out infinite;
     }
 
-    .liquid-orb.orb-a {
-      top: 78px;
-      left: 42px;
-      width: 220px;
-      height: 220px;
-      background: radial-gradient(circle at 30% 30%, rgba(129, 211, 255, 0.75), rgba(129, 211, 255, 0.12) 55%, transparent 75%);
+    .ambient-orb.orb-a {
+      top: 88px;
+      left: 48px;
+      width: 260px;
+      height: 260px;
+      background: radial-gradient(circle at 30% 30%, rgba(136, 226, 255, 0.7), rgba(136, 226, 255, 0.18) 52%, transparent 74%);
     }
 
-    .liquid-orb.orb-b {
-      top: 92px;
-      right: 120px;
-      width: 280px;
-      height: 280px;
-      background: radial-gradient(circle at 50% 50%, rgba(255, 144, 203, 0.42), rgba(255, 144, 203, 0.1) 58%, transparent 76%);
-      animation-duration: 19s;
+    .ambient-orb.orb-b {
+      top: 120px;
+      right: 7vw;
+      width: 340px;
+      height: 340px;
+      background: radial-gradient(circle at 50% 50%, rgba(92, 178, 255, 0.4), rgba(92, 178, 255, 0.12) 58%, transparent 76%);
+      animation-duration: 22s;
+      animation-delay: -6s;
     }
 
-    .liquid-orb.orb-c {
-      bottom: 66px;
-      right: 22%;
-      width: 240px;
-      height: 240px;
-      background: radial-gradient(circle at 50% 50%, rgba(54, 255, 204, 0.24), rgba(54, 255, 204, 0.08) 58%, transparent 78%);
-      animation-duration: 22s;
+    .ambient-orb.orb-c {
+      bottom: 5vh;
+      left: 28%;
+      width: 420px;
+      height: 420px;
+      background: radial-gradient(circle at 50% 50%, rgba(116, 255, 233, 0.22), rgba(116, 255, 233, 0.08) 58%, transparent 78%);
+      animation-duration: 26s;
+      animation-delay: -11s;
     }
 
-    @keyframes orb-float {
+    .ambient-beam {
+      position: fixed;
+      pointer-events: none;
+      z-index: 0;
+      border-radius: 999px;
+      opacity: 0.52;
+      filter: blur(28px);
+      transform-origin: center;
+      animation: beam-sweep 20s ease-in-out infinite alternate;
+      mix-blend-mode: screen;
+    }
+
+    .ambient-beam.beam-a {
+      top: 10vh;
+      left: 18vw;
+      width: 42vw;
+      height: 14vh;
+      background: linear-gradient(90deg, transparent, rgba(99, 203, 255, 0.2), rgba(99, 203, 255, 0.04), transparent);
+    }
+
+    .ambient-beam.beam-b {
+      bottom: 16vh;
+      right: 6vw;
+      width: 36vw;
+      height: 12vh;
+      background: linear-gradient(90deg, transparent, rgba(78, 244, 255, 0.16), rgba(78, 244, 255, 0.04), transparent);
+      animation-duration: 24s;
+      animation-delay: -8s;
+    }
+
+    @keyframes orb-drift {
 
       0%,
       100% {
@@ -1811,97 +2015,62 @@
       }
 
       50% {
-        transform: translate3d(18px, -14px, 0) scale(1.06);
+        transform: translate3d(22px, -18px, 0) scale(1.08);
+      }
+    }
+
+    @keyframes beam-sweep {
+      0% {
+        transform: translate3d(-3vw, -1vh, 0) rotate(-8deg) scaleX(0.92);
+      }
+
+      100% {
+        transform: translate3d(4vw, 3vh, 0) rotate(7deg) scaleX(1.08);
       }
     }
 
-    .cursor-aura,
-    .cursor-dot {
+    .cursor-trail-canvas {
       position: fixed;
-      top: 0;
-      left: 0;
+      inset: 0;
+      width: 100%;
+      height: 100%;
       pointer-events: none;
-      z-index: 9999;
-      transform: translate3d(-50%, -50%, 0);
-      transition: opacity 0.25s ease, transform 0.25s ease, width 0.25s ease, height 0.25s ease, background 0.25s ease;
+      z-index: 9998;
       opacity: 0;
-    }
-
-    .cursor-aura {
-      width: 92px;
-      height: 92px;
-      border-radius: 50%;
-      background: radial-gradient(circle, rgba(200, 242, 255, 0.84) 0%, rgba(143, 219, 255, 0.54) 34%, rgba(90, 189, 255, 0.24) 58%, rgba(90, 189, 255, 0.08) 72%, transparent 80%);
-      filter: blur(12px);
+      transition: opacity 0.16s ease;
       mix-blend-mode: screen;
     }
 
-    .cursor-dot {
-      width: 30px;
-      height: 30px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    .cursor-core {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 18px;
+      height: 18px;
       border-radius: 999px;
-      font-family: var(--ff-display);
-      font-size: 0.76rem;
-      font-weight: 800;
-      letter-spacing: 0.12em;
-      color: #127ed4;
-      text-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
-      background: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0%, rgba(216, 243, 255, 0.9) 58%, rgba(111, 202, 255, 0.28) 78%, transparent 82%);
-      border: 1px solid rgba(86, 176, 255, 0.4);
-      box-shadow: 0 0 26px rgba(71, 184, 255, 0.3);
-    }
-
-    body.dark-theme .cursor-aura {
-      width: 220px;
-      height: 220px;
-      background: radial-gradient(circle, rgba(202, 245, 255, 0.28) 0%, rgba(133, 225, 255, 0.18) 24%, rgba(76, 201, 255, 0.08) 44%, rgba(24, 96, 130, 0.03) 62%, transparent 74%);
-      filter: blur(14px);
-      mix-blend-mode: screen;
-    }
-
-    body.dark-theme .cursor-dot {
-      width: 30px;
-      height: 30px;
-      color: #f4fdff;
-      text-shadow: 0 0 18px rgba(114, 226, 255, 0.95);
-      background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(180, 239, 255, 0.96) 36%, rgba(86, 214, 255, 0.3) 70%, transparent 82%);
-      border-color: rgba(133, 224, 255, 0.56);
-      box-shadow: 0 0 26px rgba(76, 213, 255, 0.72);
+      pointer-events: none;
+      z-index: 9999;
+      transform: translate3d(-50%, -50%, 0);
+      opacity: 0;
+      background:
+        radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(162, 245, 255, 0.88) 34%, rgba(72, 213, 255, 0.42) 62%, rgba(72, 213, 255, 0) 78%);
+      box-shadow: 0 0 22px rgba(72, 213, 255, 0.54), 0 0 48px rgba(72, 213, 255, 0.22);
+      transition: opacity 0.16s ease, width 0.16s ease, height 0.16s ease;
     }
 
-    body.cursor-active .cursor-aura,
-    body.cursor-active .cursor-dot {
+    body.cursor-active .cursor-trail-canvas,
+    body.cursor-active .cursor-core {
       opacity: 1;
     }
 
-    body.cursor-press .cursor-aura {
-      width: 120px;
-      height: 120px;
-      opacity: 0.8;
+    body.cursor-hover .cursor-core {
+      width: 24px;
+      height: 24px;
     }
 
-    body.dark-theme.cursor-press .cursor-aura {
-      width: 250px;
-      height: 250px;
-    }
-
-    body.cursor-press .cursor-dot {
-      transform: translate3d(-50%, -50%, 0) scale(0.82);
-    }
-
-    body.cursor-hover .cursor-aura {
-      width: 112px;
-      height: 112px;
-      background: radial-gradient(circle, rgba(214, 246, 255, 0.9) 0%, rgba(163, 227, 255, 0.58) 34%, rgba(97, 188, 255, 0.24) 58%, rgba(97, 188, 255, 0.08) 74%, transparent 82%);
-    }
-
-    body.dark-theme.cursor-hover .cursor-aura {
-      width: 250px;
-      height: 250px;
-      background: radial-gradient(circle, rgba(220, 247, 255, 0.32) 0%, rgba(144, 231, 255, 0.2) 26%, rgba(86, 214, 255, 0.09) 48%, rgba(24, 96, 130, 0.03) 66%, transparent 76%);
+    body.cursor-press .cursor-core {
+      width: 14px;
+      height: 14px;
     }
 
     .hdr,
@@ -2017,6 +2186,21 @@
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 18px 34px rgba(64, 104, 176, 0.12), 0 0 0 6px rgba(78, 156, 255, 0.06);
     }
 
+    .omnibox input:focus-visible,
+    .k-select:focus-visible,
+    .k-input:focus-visible,
+    .btn-icon:focus-visible,
+    .btn-theme:focus-visible,
+    .btn-primary:focus-visible,
+    .dash-close:focus-visible,
+    .explorer-search input:focus-visible,
+    .explorer-cat-item:focus-visible,
+    .explorer-symbol-card:focus-visible {
+      outline: none;
+      border-color: rgba(88, 170, 255, 0.72);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), var(--focus-ring);
+    }
+
     .btn-primary {
       background: linear-gradient(135deg, rgba(18, 120, 255, 0.98) 0%, rgba(72, 173, 255, 0.88) 55%, rgba(111, 223, 255, 0.86) 100%);
       color: #f7fbff;
@@ -2031,6 +2215,18 @@
       filter: saturate(1.08);
     }
 
+    button:active,
+    .nav-q-btn:active,
+    .dash-close:active {
+      transform: translateY(1px) scale(0.96);
+      box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(40, 80, 140, 0.14);
+      filter: saturate(0.98);
+    }
+
+    .btn-primary:focus-visible {
+      box-shadow: 0 20px 42px rgba(34, 123, 255, 0.28), 0 0 0 8px rgba(78, 156, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.48);
+    }
+
     .btn-icon::before,
     .btn-theme::before,
     .btn-primary::before,
@@ -2058,22 +2254,56 @@
       background:
         radial-gradient(circle at top left, rgba(255, 255, 255, 0.3), transparent 30%),
         linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.12) 100%);
-      box-shadow: 0 36px 90px rgba(31, 57, 102, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78);
+      box-shadow: var(--panel-shadow);
       backdrop-filter: blur(22px) saturate(180%);
       -webkit-backdrop-filter: blur(22px) saturate(180%);
       isolation: isolate;
     }
 
+    .main::before {
+      content: "";
+      position: absolute;
+      inset: 1px;
+      border-radius: inherit;
+      pointer-events: none;
+      z-index: 0;
+      background:
+        radial-gradient(circle at top left, rgba(255, 255, 255, 0.28), transparent 28%),
+        radial-gradient(circle at bottom right, rgba(94, 195, 255, 0.1), transparent 26%);
+      opacity: 0.85;
+    }
+
+    .main::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      z-index: 6;
+      border: 1px solid rgba(255, 255, 255, 0.18);
+      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 30%, transparent 72%, rgba(0, 0, 0, 0.75));
+      -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 30%, transparent 72%, rgba(0, 0, 0, 0.75));
+      opacity: 0.9;
+    }
+
     body.dark-theme .main {
       border-color: rgba(124, 179, 255, 0.1);
       background:
         radial-gradient(circle at top left, rgba(130, 177, 255, 0.08), transparent 30%),
         linear-gradient(180deg, rgba(9, 16, 34, 0.52) 0%, rgba(7, 14, 29, 0.32) 100%);
-      box-shadow: 0 38px 100px rgba(1, 8, 20, 0.5), inset 0 1px 0 rgba(179, 224, 255, 0.08);
+      box-shadow: var(--panel-shadow-dark);
+    }
+
+    body.dark-theme .main::before {
+      background:
+        radial-gradient(circle at top left, rgba(84, 170, 255, 0.12), transparent 28%),
+        radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.12), transparent 26%);
     }
 
     .chart-bg-overlay {
+      position: absolute;
       inset: 0;
+      z-index: 1;
       opacity: 1;
       background-image:
         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%),
@@ -2092,51 +2322,64 @@
       position: absolute;
       inset: 0;
       pointer-events: none;
-      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;
+      background-image: var(--ai-bg-image);
+      background-repeat: no-repeat;
+      background-position: left var(--ai-bg-position-x) bottom var(--ai-bg-position-y);
+      background-size: auto var(--ai-bg-height);
+      opacity: var(--ai-bg-opacity);
     }
 
     .chart-bg-overlay::after {
       background:
         linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(113, 225, 255, 0.04) 100%),
+        linear-gradient(120deg, transparent 18%, rgba(118, 240, 255, 0.1) 42%, transparent 66%),
         radial-gradient(circle at 46% 58%, rgba(82, 221, 255, 0.12), transparent 7%),
         radial-gradient(circle at 72% 46%, rgba(126, 168, 255, 0.08), transparent 10%),
         repeating-linear-gradient(90deg, rgba(96, 182, 255, 0.06) 0 1px, transparent 1px 110px),
         repeating-linear-gradient(180deg, rgba(96, 182, 255, 0.04) 0 1px, transparent 1px 78px);
-      opacity: 0.34;
+      opacity: 0.42;
       mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 64%, transparent 100%);
       -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 64%, transparent 100%);
-      animation: data-grid-drift 18s linear infinite, scan-sweep 8s ease-in-out infinite;
+      animation: data-grid-drift 18s linear infinite, scan-sweep 8s ease-in-out infinite, chart-energy-pulse 11s ease-in-out infinite;
     }
 
     body.dark-theme .chart-bg-overlay {
       background-image:
         linear-gradient(90deg, rgba(7, 15, 32, 0.76) 0%, rgba(7, 15, 32, 0.44) 28%, rgba(7, 15, 32, 0.14) 56%, rgba(7, 15, 32, 0.04) 100%),
         radial-gradient(circle at 22% 58%, rgba(71, 196, 255, 0.18), transparent 24%),
-        radial-gradient(circle at 74% 16%, rgba(110, 146, 255, 0.12), transparent 18%),
-        var(--dark-bg-image);
-      background-size: auto, auto, auto, cover;
-      background-position: center, 22% 58%, 74% 16%, left center;
+        radial-gradient(circle at 74% 16%, rgba(110, 146, 255, 0.12), transparent 18%);
+      background-size: auto, auto, auto;
+      background-position: center, 22% 58%, 74% 16%;
     }
 
     body.dark-theme .chart-bg-overlay::before {
-      background:
-        linear-gradient(90deg, rgba(18, 32, 64, 0.24) 0%, rgba(18, 32, 64, 0.12) 35%, rgba(18, 32, 64, 0.04) 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(--dark-bg-image);
-      background-size: auto, auto, auto, auto, cover;
-      background-position: center, 31% 65%, 29% 34%, center, left center;
-      background-repeat: no-repeat;
-      opacity: 0.76;
-      animation: hologram-drift 20s ease-in-out infinite;
+      opacity: var(--ai-bg-opacity);
     }
 
     body.dark-theme .chart-bg-overlay::after {
-      opacity: 0.28;
+      opacity: 0.34;
+    }
+
+    @keyframes chart-aurora-drift {
+      0% {
+        transform: translate3d(0, 0, 0) scale(1);
+      }
+
+      100% {
+        transform: translate3d(-1.5%, 1.2%, 0) scale(1.03);
+      }
+    }
+
+    @keyframes chart-energy-pulse {
+
+      0%,
+      100% {
+        opacity: 0.34;
+      }
+
+      50% {
+        opacity: 0.5;
+      }
     }
 
     @keyframes hologram-drift {
@@ -2452,7 +2695,11 @@
 
       .cursor-aura,
       .cursor-dot,
-      .liquid-orb {
+      .liquid-orb,
+      .cursor-trail-canvas,
+      .cursor-core,
+      .ambient-orb,
+      .ambient-beam {
         display: none;
       }
 
@@ -2485,15 +2732,80 @@
         top: 68px;
       }
     }
+
+    @media (max-width: 560px) {
+      .btn-primary,
+      .btn-icon,
+      .btn-theme {
+        height: 40px;
+      }
+
+      .chart-gauges-container {
+        left: 10px;
+        right: 10px;
+        gap: 6px;
+      }
+
+      .compact-gauge-card {
+        min-width: calc(33.333% - 4px);
+        flex: 1 1 calc(33.333% - 4px);
+        padding: 8px 10px;
+      }
+
+      .compact-gauge-svg-wrap {
+        width: 58px;
+        height: 40px;
+      }
+    }
+
+    @media (hover: none), (pointer: coarse) {
+      .cursor-aura,
+      .cursor-dot,
+      .cursor-trail-canvas,
+      .cursor-core {
+        display: none !important;
+      }
+
+      .btn-icon:hover,
+      .btn-theme:hover,
+      .btn-primary:hover,
+      .compact-gauge-card:hover,
+      .explorer-symbol-card:hover {
+        transform: none;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      *,
+      *::before,
+      *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+      }
+
+      .cursor-aura,
+      .cursor-dot,
+      .liquid-orb,
+      .cursor-trail-canvas,
+      .cursor-core,
+      .ambient-orb,
+      .ambient-beam {
+        display: none !important;
+      }
+    }
   </style>
 </head>
 
 <body>
-  <div class="liquid-orb orb-a" aria-hidden="true"></div>
-  <div class="liquid-orb orb-b" aria-hidden="true"></div>
-  <div class="liquid-orb orb-c" aria-hidden="true"></div>
-  <div class="cursor-aura" id="cursorAura" aria-hidden="true"></div>
-  <div class="cursor-dot" id="cursorDot" aria-hidden="true">AI</div>
+  <div class="ambient-orb orb-a" aria-hidden="true"></div>
+  <div class="ambient-orb orb-b" aria-hidden="true"></div>
+  <div class="ambient-orb orb-c" aria-hidden="true"></div>
+  <div class="ambient-beam beam-a" aria-hidden="true"></div>
+  <div class="ambient-beam beam-b" aria-hidden="true"></div>
+  <canvas class="cursor-trail-canvas" id="cursorTrailCanvas" aria-hidden="true"></canvas>
+  <div class="cursor-core" id="cursorCore" aria-hidden="true"></div>
   <div id="app">
 
     <!-- ── HEADER ───────────────────────────────── -->
@@ -2761,8 +3073,9 @@
     const analysisPanel = document.getElementById('analysisPanel');
     const marketStatusBar = document.getElementById('marketStatusBar');
     const indicatorSelect = document.getElementById('indicatorSelect');
-    const cursorAura = document.getElementById('cursorAura');
-    const cursorDot = document.getElementById('cursorDot');
+    const themeToggleBtn = document.getElementById('themeToggleBtn');
+    const cursorTrailCanvas = document.getElementById('cursorTrailCanvas');
+    const cursorCore = document.getElementById('cursorCore');
 
     /* ── State ─────────────────────────────────── */
     let currentSymbol = 'XAUUSD';
@@ -2777,32 +3090,156 @@
 
     /* ── Indicator Calculation Helpers ────────── */
     /* ── WebSocket Management ────────────────────── */
+    const THEME_SUN_ICON = `
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="12" cy="12" r="5"></circle>
+        <line x1="12" y1="1" x2="12" y2="3"></line>
+        <line x1="12" y1="21" x2="12" y2="23"></line>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+        <line x1="1" y1="12" x2="3" y2="12"></line>
+        <line x1="21" y1="12" x2="23" y2="12"></line>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+      </svg>`;
+    const THEME_MOON_ICON = `
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"></path>
+      </svg>`;
+
     (() => {
-      if (!cursorAura || !cursorDot || window.matchMedia('(pointer: coarse)').matches) return;
+      if (!cursorTrailCanvas || !cursorCore || window.matchMedia('(pointer: coarse)').matches) return;
+
+      const ctx = cursorTrailCanvas.getContext('2d');
+      if (!ctx) return;
 
-      let mouseX = window.innerWidth / 2;
-      let mouseY = window.innerHeight / 2;
-      let auraX = mouseX;
-      let auraY = mouseY;
-      let rafId = 0;
       const interactiveSelector = 'button, input, select, .search-item, .compact-gauge-card, .explorer-symbol-card, .explorer-cat-item, .dash-close, .dash-col';
+      const trail = [];
+      const pointer = {
+        x: window.innerWidth / 2,
+        y: window.innerHeight / 2,
+        lastX: window.innerWidth / 2,
+        lastY: window.innerHeight / 2,
+        velocity: 0,
+        lastMoveTs: 0,
+      };
+      let rafId = 0;
+      let dpr = 1;
+
+      function resizeTrailCanvas() {
+        dpr = Math.max(1, window.devicePixelRatio || 1);
+        cursorTrailCanvas.width = Math.round(window.innerWidth * dpr);
+        cursorTrailCanvas.height = Math.round(window.innerHeight * dpr);
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      }
 
-      function renderCursor() {
-        auraX += (mouseX - auraX) * 0.14;
-        auraY += (mouseY - auraY) * 0.14;
-        cursorAura.style.transform = `translate3d(${auraX}px, ${auraY}px, 0) translate(-50%, -50%)`;
-        cursorDot.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0) translate(-50%, -50%)`;
-        rafId = requestAnimationFrame(renderCursor);
+      function spawnEmber(x, y, vx, vy, speed) {
+        trail.push({
+          x,
+          y,
+          vx,
+          vy,
+          speed,
+          life: 1,
+          radius: Math.min(44, 10 + speed * 0.12),
+          stretch: Math.min(3.4, 1 + speed * 0.008),
+        });
       }
 
+      function drawTrail(now) {
+        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+
+        const idleMs = now - pointer.lastMoveTs;
+        if (idleMs > 90) {
+          pointer.velocity *= 0.9;
+        }
+
+        for (let i = trail.length - 1; i >= 0; i -= 1) {
+          const ember = trail[i];
+          ember.life -= 0.055;
+          ember.x += ember.vx;
+          ember.y += ember.vy;
+          ember.radius *= 0.985;
+          ember.vx *= 0.94;
+          ember.vy *= 0.94;
+
+          if (ember.life <= 0.02 || ember.radius <= 1.5) {
+            trail.splice(i, 1);
+            continue;
+          }
+
+          const alpha = ember.life * 0.85;
+          const angle = Math.atan2(ember.vy, ember.vx || 0.0001);
+          ctx.save();
+          ctx.translate(ember.x, ember.y);
+          ctx.rotate(angle);
+          ctx.scale(ember.stretch, 1);
+
+          const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, ember.radius);
+          gradient.addColorStop(0, `rgba(235, 255, 255, ${alpha})`);
+          gradient.addColorStop(0.22, `rgba(124, 246, 255, ${alpha * 0.95})`);
+          gradient.addColorStop(0.5, `rgba(38, 196, 255, ${alpha * 0.48})`);
+          gradient.addColorStop(1, 'rgba(38, 196, 255, 0)');
+          ctx.fillStyle = gradient;
+          ctx.beginPath();
+          ctx.arc(0, 0, ember.radius, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.restore();
+        }
+
+        if (trail.length > 0 || pointer.velocity > 0.12) {
+          rafId = requestAnimationFrame(drawTrail);
+        } else {
+          rafId = 0;
+          document.body.classList.remove('cursor-active');
+        }
+      }
+
+      function ensureTrailLoop() {
+        if (!rafId) {
+          rafId = requestAnimationFrame(drawTrail);
+        }
+      }
+
+      resizeTrailCanvas();
+      window.addEventListener('resize', resizeTrailCanvas);
+
       document.addEventListener('mousemove', (event) => {
-        mouseX = event.clientX;
-        mouseY = event.clientY;
+        const now = performance.now();
+        const dx = event.clientX - pointer.lastX;
+        const dy = event.clientY - pointer.lastY;
+        const dt = Math.max(16, now - (pointer.lastMoveTs || now));
+        const speed = Math.sqrt(dx * dx + dy * dy) / dt * 26;
+
+        pointer.x = event.clientX;
+        pointer.y = event.clientY;
+        pointer.lastMoveTs = now;
+        pointer.lastX = event.clientX;
+        pointer.lastY = event.clientY;
+        pointer.velocity = pointer.velocity * 0.35 + speed * 0.65;
+
+        const emberCount = Math.max(1, Math.min(7, Math.round(pointer.velocity / 3.2)));
+        for (let i = 0; i < emberCount; i += 1) {
+          const ratio = i / emberCount;
+          const jitterX = (Math.random() - 0.5) * 8;
+          const jitterY = (Math.random() - 0.5) * 8;
+          spawnEmber(
+            event.clientX - dx * ratio + jitterX,
+            event.clientY - dy * ratio + jitterY,
+            -dx * 0.08 * (0.5 + Math.random()),
+            -dy * 0.08 * (0.5 + Math.random()),
+            pointer.velocity
+          );
+        }
+
+        cursorCore.style.transform = `translate3d(${pointer.x}px, ${pointer.y}px, 0) translate(-50%, -50%)`;
         document.body.classList.add('cursor-active');
-        if (!rafId) rafId = requestAnimationFrame(renderCursor);
+        ensureTrailLoop();
       }, { passive: true });
 
       document.addEventListener('mouseleave', () => {
+        trail.length = 0;
+        pointer.velocity = 0;
         document.body.classList.remove('cursor-active');
       });
 
@@ -3306,7 +3743,7 @@
         </div>
 
         <!-- Dashboard Body Scaler -->
-        <div class="dash-body-scaler" style="flex:1; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column;">
+        <div class="dash-body-scaler">
           <div class="dash-body" style="transform-origin: top center; transition: transform 0.2s ease;">
 
           <!-- TOP ROW: 3 Big Gauges -->
@@ -3824,15 +4261,14 @@
 
       let scaleW = windowWidth / targetWidth;
       let scaleH = (windowHeight - 80) / targetHeight; // 80px for header
-      let scale = Math.min(scaleW, scaleH);
+      let scale = Math.min(1, scaleW, scaleH);
 
-      // Clamp scale
-      if (scale > 1.1) scale = 1.1;
-      if (scale < 0.45) scale = 0.45;
+      if (scale < 0.62) scale = 0.62;
 
       body.style.transform = `scale(${scale})`;
-      body.style.width = `${100 / scale}%`;
-      // body.style.height = `${100 / scale}%`;
+      body.style.width = scale < 1 ? `${targetWidth}px` : '100%';
+      body.style.maxWidth = `${targetWidth}px`;
+      body.style.margin = '0 auto';
     }
 
     /* ── Resize handler ────────────────────────── */
@@ -3850,6 +4286,11 @@
     function applyTheme(theme) {
       const isDark = theme === 'dark';
       document.body.classList.toggle('dark-theme', isDark);
+      if (themeToggleBtn) {
+        themeToggleBtn.innerHTML = isDark ? THEME_MOON_ICON : THEME_SUN_ICON;
+        themeToggleBtn.setAttribute('aria-label', isDark ? 'Chế độ tối' : 'Chế độ sáng');
+        themeToggleBtn.title = isDark ? 'Đang ở Dark mode' : 'Đang ở Light mode';
+      }
 
       if (chart) {
         chart.applyOptions({