Update app.py

app.py

@@ -48,8 +48,14 @@ def home():
 
 @app.get("/api/dates")
 def get_dates():
-    """Fetch distinct dates."""
-    data = sb_get("/history_buckets_upstox", {"select": "minute", "order": "minute.desc", "limit": "50000"})
+    """
+    Fetch distinct dates. 
+    Increased limit to 100,000 to scan through dense 10s data 
+    to find older dates.
+    """
+    # 10s data is dense. 1 day ~ 3750 minutes ~ 22500 rows. 
+    # 100k rows gives ~4-5 days history scan.
+    data = sb_get("/history_buckets_upstox", {"select": "minute", "order": "minute.desc", "limit": "100000"})
     dates = set()
     for row in data:
         if row.get('minute'):
@@ -158,6 +164,7 @@ def fetch_series(
             inst_data = row['data'].get(instrument)
             if not inst_data: continue
 
+            # Extract buckets (0s to 50s)
             p_arr = inst_data.get('p', []) or []
             b_arr = inst_data.get('b', []) or []
             s_arr = inst_data.get('s', []) or []
@@ -204,7 +211,7 @@ def fetch_series(
 
 
 # ==========================================
-# 5. FRONTEND TEMPLATE (NEW UI)
+# 5. FRONTEND TEMPLATE (High Aesthetic)
 # ==========================================
 
 HTML_TEMPLATE = """
@@ -214,335 +221,264 @@ HTML_TEMPLATE = """
     <meta charset="UTF-8">
     <title>DepthChain PRO</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    
     <style>
-        /* --- THEME CONFIGURATION --- */
+        /* --- DESIGN SYSTEM --- */
         :root {
-            --bg-app: #09090b;       /* Zinc 950 */
-            --bg-header: #121214;    /* Slightly lighter than body */
-            --bg-card: #0d1117;
-            --bg-input: #1c1c1f;
-            --border: #27272a;
-            --border-hover: #3f3f46;
+            --bg-app: #050505;
+            --bg-panel: #111111;
+            --bg-card: #0A0A0A;
+            --border: #222222;
+            --border-hover: #333333;
             
-            --text-primary: #e4e4e7;
-            --text-secondary: #a1a1aa;
-            --text-muted: #71717a;
+            --text-main: #EAEAEA;
+            --text-muted: #666666;
+            --text-accent: #3399FF;
             
-            --accent: #3b82f6;       /* Blue 500 */
-            --accent-glow: rgba(59, 130, 246, 0.2);
-            --success: #22c55e;
-            --danger: #ef4444;
-            --warning: #eab308;
+            --accent: #007AFF;
+            --accent-glow: rgba(0, 122, 255, 0.2);
+            --danger: #FF3B30;
+            --success: #34C759;
+            --warning: #FFCC00;
             
-            --font-sans: 'Inter', sans-serif;
+            --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
             --font-mono: 'JetBrains Mono', monospace;
+            
+            --radius: 8px;
+            --header-h: 52px;
         }
 
-        /* --- RESET & BASE --- */
-        * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
+        * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; outline: none; }
+        
+        /* SCROLLBARS */
         ::-webkit-scrollbar { width: 6px; height: 6px; }
         ::-webkit-scrollbar-track { background: transparent; }
-        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-        ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
-
-        body {
-            background-color: var(--bg-app);
-            color: var(--text-primary);
-            font-family: var(--font-sans);
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-            font-size: 13px;
+        ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #555; }
+
+        body { 
+            background: var(--bg-app); color: var(--text-main); font-family: var(--font-main); 
+            height: 100vh; overflow: hidden; display: flex; flex-direction: column;
         }
 
-        /* --- TOP BAR --- */
-        .top-bar {
-            height: 48px;
-            background: var(--bg-header);
+        /* --- HEADER --- */
+        header {
+            height: var(--header-h); background: rgba(17, 17, 17, 0.8); 
+            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
             border-bottom: 1px solid var(--border);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 16px;
-            flex-shrink: 0;
-            user-select: none;
+            display: flex; align-items: center; justify-content: space-between; 
+            padding: 0 16px; z-index: 100;
         }
 
-        .brand { 
-            font-weight: 600; font-size: 15px; letter-spacing: -0.02em; 
-            display:flex; align-items:center; gap:8px; 
-            color: var(--text-primary);
-        }
-        .brand span { color: var(--accent); }
-
-        .controls-area { display: flex; align-items: center; gap: 12px; }
-        .separator { width: 1px; height: 20px; background: var(--border); }
-
-        /* Custom Select inputs */
-        .custom-select-wrapper { position: relative; display: inline-block; }
-        .custom-select {
-            appearance: none; -webkit-appearance: none;
-            background: var(--bg-input);
-            border: 1px solid var(--border);
-            color: var(--text-primary);
-            padding: 6px 30px 6px 10px;
-            border-radius: 6px;
-            font-family: var(--font-sans);
-            font-size: 12px;
-            cursor: pointer;
-            transition: all 0.15s ease;
-            min-width: 130px;
-        }
-        .custom-select:hover { border-color: var(--text-secondary); }
-        .custom-select-arrow {
-            position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
-            pointer-events: none; color: var(--text-secondary); font-size: 10px;
-        }
+        .logo { font-weight: 600; font-size: 14px; letter-spacing: -0.02em; color: var(--text-main); }
+        .logo span { color: var(--accent); }
 
-        /* Mode Switcher (Toggle) */
-        .mode-toggle {
-            display: flex; background: var(--bg-input); 
-            border: 1px solid var(--border); border-radius: 6px; 
-            overflow: hidden; padding: 2px;
-        }
-        .mode-btn {
-            padding: 4px 10px; font-size: 11px; font-weight: 600; cursor: pointer;
-            border-radius: 4px; transition: 0.2s; color: var(--text-secondary);
+        .controls { display: flex; gap: 12px; align-items: center; }
+
+        /* Custom Inputs */
+        select, button {
+            background: #1A1A1A; border: 1px solid var(--border); color: var(--text-main);
+            padding: 0 12px; height: 28px; border-radius: 6px; font-size: 12px;
+            font-family: var(--font-main); transition: all 0.2s ease; cursor: pointer;
         }
-        .mode-btn.active {
-            background: var(--border-hover); color: var(--text-primary);
+        select:hover, button:hover { border-color: var(--border-hover); background: #222; }
+        select:focus { border-color: var(--accent); }
+
+        /* Segmented Control for Layout */
+        .segmented {
+            background: #1A1A1A; border: 1px solid var(--border); 
+            border-radius: 6px; padding: 2px; display: flex; gap: 2px; height: 28px;
         }
-        .mode-btn.active.live { color: var(--success); }
-
-        /* Layout Buttons */
-        .layout-group { display: flex; background: var(--bg-input); border-radius: 6px; padding: 2px; border: 1px solid var(--border); }
-        .layout-btn {
-            width: 28px; height: 24px; display: flex; align-items: center; justify-content: center;
-            font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
-            cursor: pointer; border-radius: 4px; transition: 0.15s; font-weight:600;
+        .seg-btn {
+            background: transparent; border: none; color: var(--text-muted);
+            width: 32px; height: 100%; border-radius: 4px; font-weight: 600; font-size: 11px;
+            display: flex; align-items: center; justify-content: center; padding: 0;
         }
-        .layout-btn:hover { color: var(--text-primary); }
-        .layout-btn.active { background: var(--accent); color: white; }
-
-        /* Action Buttons */
-        .btn {
-            background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary);
-            padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer;
-            transition: 0.15s;
+        .seg-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.05); }
+        .seg-btn.active { background: #333; color: var(--text-main); box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
+
+        .btn-blue { color: var(--accent); font-weight: 500; border-color: var(--border); }
+        .btn-blue:hover { border-color: var(--accent); background: var(--accent-glow); }
+        
+        .btn-red { color: var(--danger); opacity: 0.7; }
+        .btn-red:hover { opacity: 1; border-color: var(--danger); }
+
+        /* Mode Switcher */
+        .mode-switch {
+            font-size: 11px; font-weight: 600; padding: 0 10px; display: flex; align-items: center; gap: 6px;
         }
-        .btn:hover { border-color: var(--text-secondary); background: var(--border); }
-        .btn.primary { background: var(--text-primary); color: var(--bg-app); border:none; font-weight: 600; }
-        .btn.primary:hover { opacity: 0.9; }
-        .btn.danger { color: var(--danger); border-color: var(--border); }
-        .btn.danger:hover { background: rgba(239, 68, 68, 0.1); border-color: var(--danger); }
-
-        /* --- MAIN GRID --- */
-        .app-container {
-            flex: 1; display: flex; width: 100%; height: calc(100vh - 48px);
-            overflow: hidden; /* Main app doesn't scroll, columns do */
+        .mode-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); transition: 0.3s; }
+        .mode-switch.live .mode-dot { background: var(--success); box-shadow: 0 0 6px var(--success); }
+        .mode-switch.live { border-color: var(--success); color: #fff; background: rgba(52, 199, 89, 0.1); }
+
+        /* --- MAIN LAYOUT --- */
+        .grid-container {
+            flex: 1; display: flex; overflow: hidden; /* No scroll on container */
+            padding: 0; gap: 0;
         }
 
         .column {
-            flex: 1; display: flex; flex-direction: column;
+            flex: 1;
+            display: flex; flex-direction: column;
             border-right: 1px solid var(--border);
-            min-width: 300px;
-            overflow-y: auto; /* Independent scrolling */
+            overflow-y: auto; /* Independent Scroll */
             overflow-x: hidden;
-            position: relative;
+            min-width: 0; /* Prevents flex blowout */
         }
         .column:last-child { border-right: none; }
 
-        .col-footer {
-            padding: 10px; border-top: 1px solid var(--border);
-            background: var(--bg-header); text-align: center;
-            margin-top: auto; /* Push to bottom if content small */
-        }
-        .add-chart-btn {
-            background: transparent; border: 1px dashed var(--border); color: var(--text-muted);
-            width: 100%; padding: 8px; border-radius: 6px; font-size: 11px; cursor: pointer;
-            transition: 0.2s;
-        }
-        .add-chart-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }
-
         /* --- CHART CARD --- */
         .chart-card {
-            display: flex; flex-direction: column;
-            border-bottom: 1px solid var(--border);
             background: var(--bg-card);
+            border-bottom: 1px solid var(--border);
+            display: flex; flex-direction: column;
             position: relative;
-            /* Height is dynamic */
+            transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
         }
 
-        .card-header {
-            height: 32px; display: flex; align-items: center; justify-content: space-between;
-            padding: 0 10px; border-bottom: 1px solid var(--border);
-            background: var(--bg-header); user-select: none;
+        .card-head {
+            height: 36px; display: flex; align-items: center; justify-content: space-between;
+            padding: 0 12px; font-size: 11px; border-bottom: 1px solid rgba(255,255,255,0.03);
+            flex-shrink: 0;
         }
-
-        .card-info { display: flex; align-items: center; gap: 8px; font-size: 11px; }
-        .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); transition: 0.3s; }
-        .status-dot.live { background: var(--success); box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); animation: pulse 2s infinite; }
-        .status-dot.hist { background: var(--accent); }
-        .status-dot.retry { background: var(--warning); animation: blink 0.5s infinite; }
-
-        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
-        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
-
-        .symbol-text { font-weight: 600; color: var(--text-primary); }
-        .meta-text { color: var(--text-secondary); font-family: var(--font-mono); font-size: 10px; }
-
-        .card-tools { display: flex; gap: 4px; }
-        .tool-btn {
-            background: transparent; border: none; color: var(--text-muted);
-            width: 24px; height: 24px; border-radius: 4px; cursor: pointer;
-            display: flex; align-items: center; justify-content: center; font-size: 14px;
+        
+        .card-info { display: flex; align-items: center; gap: 8px; font-weight: 500; }
+        .ci-symbol { color: var(--text-main); font-weight: 600; }
+        .ci-meta { color: var(--text-muted); font-family: var(--font-mono); }
+        
+        .card-tools { display: flex; gap: 4px; opacity: 0; transition: 0.2s; }
+        .chart-card:hover .card-tools { opacity: 1; }
+        
+        .tool-btn { 
+            width: 24px; height: 24px; border: none; background: transparent; 
+            color: var(--text-muted); border-radius: 4px; display: flex; align-items: center; justify-content: center;
         }
-        .tool-btn:hover { background: var(--border); color: var(--text-primary); }
-        .tool-btn.close:hover { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
+        .tool-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.1); }
 
-        .card-content { flex: 1; position: relative; overflow: hidden; }
+        .card-body { flex: 1; position: relative; overflow: hidden; }
+        .card-overlay { position: absolute; inset: 0; display:flex; justify-content: center; align-items: center; z-index: 10; pointer-events: none;}
 
         /* Empty State */
-        .empty-state {
-            height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
-            background: linear-gradient(180deg, var(--bg-card) 0%, rgba(0,0,0,0.4) 100%);
+        .empty-placeholder {
+            display: flex; flex-direction: column; align-items: center; justify-content: center;
+            height: 100%; width: 100%; color: var(--text-muted); gap: 12px;
+            cursor: pointer; transition: 0.2s;
         }
-        .config-btn-subtle {
-            background: transparent; border: 1px solid var(--border);
-            color: var(--text-secondary); padding: 8px 16px; border-radius: 20px;
-            font-size: 11px; font-weight: 500; cursor: pointer; transition: 0.2s;
-            display: flex; align-items: center; gap: 6px;
+        .empty-placeholder:hover { background: rgba(255,255,255,0.02); color: var(--text-main); }
+        .add-icon { 
+            width: 32px; height: 32px; border-radius: 50%; border: 1px dashed var(--text-muted); 
+            display: flex; align-items: center; justify-content: center; font-size: 16px;
         }
-        .config-btn-subtle:hover { border-color: var(--accent); color: var(--accent); background: rgba(59,130,246,0.05); }
+        .empty-placeholder:hover .add-icon { border-color: var(--text-main); border-style: solid; }
+
+        /* Add Button in Column */
+        .col-add {
+            height: 40px; display: flex; align-items: center; justify-content: center;
+            border-top: 1px solid var(--border); color: var(--text-muted); 
+            font-size: 11px; font-weight: 500; cursor: pointer; flex-shrink: 0;
+            background: var(--bg-panel); transition: 0.2s;
+        }
+        .col-add:hover { background: #1a1a1a; color: var(--text-main); }
 
         /* --- MODAL --- */
-        .overlay {
-            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
-            background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
-            z-index: 100; display: none; align-items: center; justify-content: center;
+        .modal-backdrop {
+            position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
+            z-index: 200; display: none; align-items: center; justify-content: center;
         }
         .modal {
-            background: var(--bg-header); border: 1px solid var(--border);
-            width: 420px; border-radius: 8px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
+            background: #111; border: 1px solid var(--border); border-radius: 12px;
+            width: 420px; box-shadow: 0 24px 48px rgba(0,0,0,0.8);
             display: flex; flex-direction: column; overflow: hidden;
-            animation: slideUp 0.2s ease-out;
+            animation: modalPop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
-        @keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+        @keyframes modalPop { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
 
-        .modal-header {
-            padding: 16px; border-bottom: 1px solid var(--border);
-            display: flex; justify-content: space-between; align-items: center; font-weight: 600;
-        }
-        .modal-body { padding: 16px; max-height: 70vh; overflow-y: auto; }
-        .modal-footer {
-            padding: 12px 16px; border-top: 1px solid var(--border);
-            background: var(--bg-input); display: flex; justify-content: flex-end; gap: 8px;
-        }
+        .m-head { padding: 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; }
+        .m-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; max-height: 70vh; overflow-y: auto; }
+        .m-foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: #0e0e0e; }
 
-        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
-        .form-group label { display: block; font-size: 10px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 600; text-transform: uppercase;}
-        .form-control {
-            width: 100%; background: var(--bg-app); border: 1px solid var(--border);
-            color: var(--text-primary); padding: 8px; border-radius: 4px; font-size: 12px;
-        }
-        .form-control:focus { border-color: var(--accent); }
+        .f-group label { display: block; font-size: 10px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; }
+        .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+        .inp { width: 100%; background: #050505; border: 1px solid var(--border); padding: 6px 10px; border-radius: 6px; color: #fff; font-size: 12px; }
+        .inp:focus { border-color: var(--accent); }
 
         /* Series List */
-        .series-list { display: flex; flex-direction: column; gap: 6px; }
-        .series-item { display: grid; grid-template-columns: 30px 1fr 1fr 50px 24px; gap: 6px; align-items: center; }
-        input[type="color"] { border: none; background: none; padding: 0; height: 28px; width: 100%; cursor: pointer; }
+        .s-item { display: grid; grid-template-columns: 24px 1fr 1fr 40px 24px; gap: 8px; align-items: center; margin-bottom: 6px; }
+        .s-color { padding: 0; width: 24px; height: 24px; border: none; border-radius: 4px; overflow: hidden; cursor: pointer; }
 
         /* Toast */
         .toast {
-            position: fixed; bottom: 24px; right: 24px;
-            background: var(--bg-header); border: 1px solid var(--border);
-            color: var(--text-primary); padding: 10px 16px; border-radius: 6px;
-            font-size: 12px; font-weight: 500;
-            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);
-            transform: translateY(100px); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            z-index: 200; display: flex; align-items: center; gap: 8px;
+            position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
+            background: #222; border: 1px solid var(--border); padding: 8px 16px; border-radius: 20px;
+            font-size: 12px; font-weight: 500; color: #fff; opacity: 0; pointer-events: none; transition: 0.3s;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 500; display: flex; align-items: center; gap: 8px;
         }
-        .toast.show { transform: translateY(0); }
-        .toast-icon { color: var(--success); }
+        .toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
+        .t-icon { color: var(--success); }
 
     </style>
 </head>
 <body>
 
-<!-- HEADER -->
-<div class="top-bar">
-    <div class="brand">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
-        DepthChain <span>PRO</span>
-    </div>
-
-    <div class="controls-area">
-        <!-- Date Selector -->
-        <div class="custom-select-wrapper">
-            <select id="globalDate" class="custom-select" onchange="GlobalApp.onDateChange()"></select>
-            <div class="custom-select-arrow">▼</div>
-        </div>
-
-        <div class="separator"></div>
+<header>
+    <div class="logo">DepthChain <span>PRO</span></div>
+    
+    <div class="controls">
+        <select id="globalDate" onchange="App.onDateChange()"></select>
 
-        <!-- Mode Toggle -->
-        <div class="mode-toggle">
-            <div id="modeHist" class="mode-btn" onclick="GlobalApp.setMode('HIST')">HISTORICAL</div>
-            <div id="modeLive" class="mode-btn" onclick="GlobalApp.setMode('LIVE')">LIVE</div>
-        </div>
+        <button id="modeBtn" class="mode-switch" onclick="App.toggleMode()">
+            <div class="mode-dot"></div> <span id="modeText">HISTORICAL</span>
+        </button>
 
-        <div class="separator"></div>
+        <div style="width:1px; height:16px; background:var(--border); margin:0 4px;"></div>
 
-        <!-- Layout -->
-        <div class="layout-group">
-            <div class="layout-btn" onclick="GlobalApp.setLayout(1)" title="1 Col">1</div>
-            <div class="layout-btn" onclick="GlobalApp.setLayout(2)" title="2 Cols">2</div>
-            <div class="layout-btn" onclick="GlobalApp.setLayout(3)" title="3 Cols">3</div>
-            <div class="layout-btn" onclick="GlobalApp.setLayout(4)" title="4 Cols">4</div>
+        <div class="segmented">
+            <button class="seg-btn" onclick="App.setLayout(1)">1</button>
+            <button class="seg-btn" onclick="App.setLayout(2)">2</button>
+            <button class="seg-btn active" onclick="App.setLayout(3)">3</button>
+            <button class="seg-btn" onclick="App.setLayout(4)">4</button>
         </div>
 
-        <div class="separator"></div>
-
-        <button class="btn" onclick="ConfigModal.openDefaults()">Settings</button>
-        <button class="btn danger" onclick="GlobalApp.resetApp()">Reset</button>
+        <button class="btn-blue" onclick="ConfigModal.openDefaults()">Settings</button>
+        <button class="btn-red" onclick="App.reset()">Reset</button>
     </div>
-</div>
+</header>
 
-<!-- MAIN APP GRID -->
-<div class="app-container" id="gridContainer">
-    <!-- Columns injected here -->
+<div class="grid-container" id="grid">
+    <!-- Columns and charts injected here -->
 </div>
 
-<!-- CONFIG MODAL -->
-<div class="overlay" id="configOverlay">
+<!-- Config Modal -->
+<div class="modal-backdrop" id="modalOverlay">
     <div class="modal">
-        <div class="modal-header">
-            <span id="cfgModalTitle">Configure Chart</span>
+        <div class="m-head">
+            <span id="mTitle">Configure Chart</span>
             <button class="tool-btn" onclick="ConfigModal.close()">✕</button>
         </div>
-        <div class="modal-body">
+        <div class="m-body">
             <div id="cfgForm">
-                <div class="form-row">
-                    <div class="form-group">
+                <div class="f-row">
+                    <div class="f-group">
                         <label>Symbol</label>
-                        <select id="cfgRoot" class="form-control" onchange="ConfigModal.onRootChange()"></select>
+                        <select id="cfgRoot" class="inp" onchange="ConfigModal.onRootChange()"></select>
                     </div>
-                    <div class="form-group">
+                    <div class="f-group">
                         <label>Expiry</label>
-                        <select id="cfgExp" class="form-control" onchange="ConfigModal.onExpChange()"></select>
+                        <select id="cfgExp" class="inp" onchange="ConfigModal.onExpChange()"></select>
                     </div>
                 </div>
-                <div class="form-group" style="margin-bottom:12px;">
+                <div class="f-group">
                     <label>Instrument</label>
-                    <select id="cfgInst" class="form-control"></select>
+                    <select id="cfgInst" class="inp"></select>
                 </div>
-                <div class="form-row">
-                    <div class="form-group">
+                <div class="f-row">
+                    <div class="f-group">
                         <label>Timeframe</label>
-                        <select id="cfgTF" class="form-control">
+                        <select id="cfgTF" class="inp">
                             <option value="1min">1 Minute</option>
                             <option value="3min">3 Minutes</option>
                             <option value="5min">5 Minutes</option>
@@ -551,422 +487,380 @@ HTML_TEMPLATE = """
                             <option value="1hour">1 Hour</option>
                         </select>
                     </div>
-                    <div class="form-group">
-                        <label>Time Range</label>
-                        <div style="display:flex; gap:6px;">
-                            <input type="time" id="cfgStart" class="form-control" value="09:15">
-                            <input type="time" id="cfgEnd" class="form-control" value="15:30">
+                    <div class="f-group">
+                        <label>Range (Start - End)</label>
+                        <div style="display:flex; gap:4px;">
+                            <input type="time" id="cfgStart" value="09:15" class="inp">
+                            <input type="time" id="cfgEnd" value="15:30" class="inp">
                         </div>
                     </div>
                 </div>
-
-                <div style="height:1px; background:var(--border); margin:16px 0;"></div>
-
-                <div class="form-group">
-                    <label>Plot Series ($P, $V, $OI, $B, $S)</label>
-                    <div id="cfgSeriesList" class="series-list"></div>
-                    <button class="add-chart-btn" style="margin-top:8px;" onclick="ConfigModal.addSeriesRow()">+ Add Plot Line</button>
+                
+                <div style="height:1px; background:var(--border); margin:10px 0;"></div>
+                
+                <div class="f-group">
+                    <label>Series ($P, $B, $S, $V, $OI)</label>
+                    <div id="cfgSeries"></div>
+                    <button class="inp" style="margin-top:4px; text-align:center;" onclick="ConfigModal.addRow()">+ Add Plot Line</button>
                 </div>
             </div>
         </div>
-        <div class="modal-footer">
-            <button class="btn" onclick="ConfigModal.close()">Cancel</button>
-            <button class="btn primary" onclick="ConfigModal.save()">Save Configuration</button>
+        <div class="m-foot">
+            <button class="inp" style="width:auto;" onclick="ConfigModal.close()">Cancel</button>
+            <button class="inp" style="width:auto; background:var(--accent); border-color:var(--accent);" onclick="ConfigModal.save()">Save</button>
         </div>
     </div>
 </div>
 
-<div id="toast" class="toast">
-    <span class="toast-icon">✓</span>
-    <span id="toastMsg">Settings Saved</span>
+<div class="toast" id="toast">
+    <span class="t-icon">✓</span> <span id="toastMsg">Saved</span>
 </div>
 
 <script>
-    /** --- CORE STATE --- */
-    const GlobalApp = {
-        state: {
-            date: '',
-            mode: 'HIST',
-            columns: 3,
-            // layout: [ [id1, id2], [id3], [] ]
-            layout: [[], [], []], 
-            // charts: { id: { col:0, config:{}, instance:Chart, cachedData: {} } }
-            charts: {} 
-        },
-        defaults: [
-            { formula: '$P', color: '#3b82f6', label: 'Price', axis: 'left' },
-            { formula: '$B', color: '#22c55e', label: 'Buy Qty', axis: 'right' },
-            { formula: '$S', color: '#ef4444', label: 'Sell Qty', axis: 'right' }
-        ],
-
-        async init() {
-            await this.loadDates();
-            this.loadState();
-            
-            // Auto Live Check
-            const today = new Date().toISOString().split('T')[0];
-            if(this.state.date === today) {
-                this.setMode('LIVE', false); // No auto-save yet to prevent overwrite on refresh logic
-            } else {
-                this.setMode(this.state.mode, false);
-            }
-
-            this.updateLayoutBtns();
-        },
-
-        async loadDates() {
-            try {
-                const res = await fetch('/api/dates');
-                const dates = await res.json();
-                const sel = document.getElementById('globalDate');
-                sel.innerHTML = dates.map(d => `<option value="${d}">${d}</option>`).join('');
-                if(dates.length) this.state.date = dates[0];
-            } catch(e) { console.error(e); }
-        },
-
-        // --- LAYOUT LOGIC ---
-        setLayout(cols) {
-            if(cols === this.state.columns) return;
-            
-            // Gather all IDs
-            const allCharts = this.state.layout.flat();
-            
-            // Rebuild Layout Array
-            this.state.columns = cols;
-            this.state.layout = Array.from({length: cols}, () => []);
-            
-            allCharts.forEach((id, i) => {
-                const colIdx = i % cols;
-                this.state.layout[colIdx].push(id);
-                if(this.state.charts[id]) this.state.charts[id].col = colIdx;
-            });
-
-            this.updateLayoutBtns();
-            this.renderGrid(); // This will re-mount DOM
-            this.saveState();
-        },
-
-        updateLayoutBtns() {
-            document.querySelectorAll('.layout-btn').forEach((b, i) => {
-                b.classList.toggle('active', (i+1) === this.state.columns);
-            });
-        },
-
-        renderGrid() {
-            const container = document.getElementById('gridContainer');
-            container.innerHTML = '';
-
-            for(let i=0; i<this.state.columns; i++) {
-                const colDiv = document.createElement('div');
-                colDiv.className = 'column';
-                colDiv.id = `col-${i}`;
-
-                const chartIds = this.state.layout[i] || [];
+/**
+ * --- APP CONTROLLER ---
+ * Handles Layout, DOM Caching (Instant Switch), and Global State
+ */
+const App = {
+    state: {
+        date: '',
+        mode: 'HIST',
+        columns: 3,
+        layout: [[], [], []], // Array of arrays of IDs
+        charts: {} // ID -> { config: {}, instance: ChartObj, interval: null }
+    },
+    domCache: {}, // Map<ID, HTMLElement> - Keeps chart elements alive in memory
+
+    defaults: [
+        { formula: '$P', color: '#007AFF', label: 'Price', axis: 'left' },
+        { formula: '$B', color: '#34C759', label: 'Buy', axis: 'right' },
+        { formula: '$S', color: '#FF3B30', label: 'Sell', axis: 'right' }
+    ],
+
+    async init() {
+        await this.loadDates();
+        this.loadState();
+        
+        // Auto-Live Check
+        const today = new Date().toISOString().split('T')[0];
+        if(this.state.date === today && this.state.mode !== 'LIVE') this.toggleMode();
+
+        this.renderGrid();
+        this.startLoops();
+    },
+
+    async loadDates() {
+        try {
+            const res = await fetch('/api/dates');
+            const dates = await res.json();
+            const sel = document.getElementById('globalDate');
+            sel.innerHTML = dates.map(d => `<option value="${d}">${d}</option>`).join('');
+            if(dates.length) this.state.date = dates[0];
+        } catch(e) { console.error(e); }
+    },
+
+    loadState() {
+        try {
+            const raw = localStorage.getItem('dc_pro_v5');
+            if(raw) {
+                const s = JSON.parse(raw);
+                this.state.date = s.date || this.state.date;
+                document.getElementById('globalDate').value = this.state.date;
+                this.state.columns = s.columns || 3;
                 
-                chartIds.forEach(id => {
-                    colDiv.appendChild(this.createCardDOM(id));
-                    // Post-render: Re-attach chart logic
-                    // We use setTimeout to allow DOM reflow
-                    setTimeout(() => ChartLogic.render(id), 0);
-                });
-
-                // Footer with Add Button
-                const footer = document.createElement('div');
-                footer.className = 'col-footer';
-                footer.innerHTML = `<button class="add-chart-btn" onclick="GlobalApp.addChart(${i})">+ ADD CHART</button>`;
-                colDiv.appendChild(footer);
+                // Restore Mode
+                if(s.mode === 'LIVE') {
+                    this.state.mode = 'LIVE';
+                    this.updateModeUI();
+                }
 
-                container.appendChild(colDiv);
+                // Restore Layout & Configs
+                this.state.layout = [];
+                s.layout.forEach((colIds, cIdx) => {
+                    this.state.layout[cIdx] = [];
+                    colIds.forEach(item => {
+                        const id = item.id;
+                        this.state.layout[cIdx].push(id);
+                        this.state.charts[id] = { config: item.config, instance: null, interval: null };
+                    });
+                });
+            } else {
+                this.resetLayoutState();
             }
-            this.adjustHeights();
-        },
-
-        adjustHeights() {
-            // Logic:
-            // Max 4 visible charts per column.
-            // If <= 4, split available height equally (min 25%).
-            // If > 4, stick to 25% height and allow column scroll.
-            
-            // Available height = 100vh - 48px (header)
-            // But we are inside .column which handles scroll.
-            // We set height via style on the card.
+        } catch(e) { this.resetLayoutState(); }
+    },
+
+    resetLayoutState() {
+        this.state.layout = [[],[],[]];
+        this.state.columns = 3;
+        // Init 3x2 empty
+        for(let i=0; i<3; i++) {
+            this.addChartToState(i);
+            this.addChartToState(i);
+        }
+    },
+
+    saveState() {
+        const minLayout = this.state.layout.map(col => col.map(id => ({
+            id: id, config: this.state.charts[id].config
+        })));
+        localStorage.setItem('dc_pro_v5', JSON.stringify({
+            date: this.state.date,
+            mode: this.state.mode,
+            columns: this.state.columns,
+            layout: minLayout
+        }));
+    },
+
+    addChartToState(colIdx) {
+        const id = 'c_' + Date.now() + Math.random().toString(36).substr(2,4);
+        this.state.charts[id] = { config: {}, instance: null, interval: null };
+        if(!this.state.layout[colIdx]) this.state.layout[colIdx] = [];
+        this.state.layout[colIdx].push(id);
+        return id;
+    },
+
+    // --- RENDERING (The Magic Part) ---
+    setLayout(n) {
+        if(n === this.state.columns) return;
+        
+        // Flatten all charts
+        const allIds = this.state.layout.flat();
+        this.state.columns = n;
+        
+        // Update UI Tabs
+        document.querySelectorAll('.seg-btn').forEach((b, i) => {
+            b.classList.toggle('active', (i+1) === n);
+        });
+
+        // Redistribute
+        this.state.layout = Array.from({length: n}, () => []);
+        allIds.forEach((id, i) => {
+            this.state.layout[i % n].push(id);
+        });
+
+        this.renderGrid();
+        this.saveState();
+    },
+
+    renderGrid() {
+        const container = document.getElementById('grid');
+        // We do NOT clear innerHTML because we want to preserve DOM nodes (Canvas context)
+        // Instead, we diff or just append cached nodes to new columns.
+        
+        container.innerHTML = ''; // Reset container structure
+
+        for(let i=0; i<this.state.columns; i++) {
+            const colDiv = document.createElement('div');
+            colDiv.className = 'column';
+            colDiv.id = `col-${i}`;
+
+            const ids = this.state.layout[i] || [];
+            ids.forEach(id => {
+                const el = this.getOrBuilderChartDOM(id);
+                colDiv.appendChild(el);
+            });
 
-            for(let i=0; i<this.state.columns; i++) {
-                const ids = this.state.layout[i];
-                const count = ids.length;
-                if(count === 0) continue;
+            // Add button
+            const btn = document.createElement('div');
+            btn.className = 'col-add';
+            btn.innerHTML = '+ Add Chart';
+            btn.onclick = () => this.addChartBtn(i);
+            colDiv.appendChild(btn);
 
-                let heightPct = 100 / count;
-                if(count > 4) heightPct = 25; 
-                
-                // If only 1 chart, it takes full height minus footer approx
-                // We use flex grow logic via CSS usually, but let's enforce min-heights
-                
-                ids.forEach(id => {
-                    const card = document.getElementById(`card-${id}`);
-                    if(card) {
-                        // Enforce a minimum pixel height to look good
-                        card.style.height = `max(${heightPct}%, 250px)`;
-                        // If it's the only one, make it fill the space
-                        if(count === 1) card.style.height = 'calc(100vh - 100px)'; // rough calc
-                        else if(count <= 4) card.style.height = `calc((100vh - 90px) / ${count})`;
-                    }
-                });
-            }
-        },
+            container.appendChild(colDiv);
+        }
 
-        // --- CHART MANAGEMENT ---
-        addChart(colIdx) {
-            const id = 'c_' + Date.now() + Math.random().toString(36).substr(2,4);
-            this.state.charts[id] = { col: colIdx, config: {}, instance: null, cachedData: null };
-            
-            if(!this.state.layout[colIdx]) this.state.layout[colIdx] = [];
-            this.state.layout[colIdx].push(id);
-            
-            // Insert into DOM immediately to avoid full re-render
-            const colDiv = document.getElementById(`col-${colIdx}`);
-            const footer = colDiv.querySelector('.col-footer');
-            colDiv.insertBefore(this.createCardDOM(id), footer);
-            
-            this.adjustHeights();
-            this.saveState();
-        },
-
-        createCardDOM(id) {
-            const div = document.createElement('div');
-            div.className = 'chart-card';
-            div.id = `card-${id}`;
-            div.innerHTML = `
-                <div class="card-header">
-                    <div class="card-info" id="info-${id}">
-                        <div class="status-dot"></div>
-                        <span class="symbol-text">New Chart</span>
-                    </div>
-                    <div class="card-tools">
-                        <button class="tool-btn" onclick="ConfigModal.open('${id}')">⚙</button>
-                        <button class="tool-btn close" onclick="GlobalApp.removeChart('${id}')">✕</button>
-                    </div>
+        this.calcHeights();
+        // Trigger resize for charts to fit new widths
+        setTimeout(() => Object.values(this.state.charts).forEach(c => c.instance && c.instance.resize()), 50);
+    },
+
+    getOrBuilderChartDOM(id) {
+        if(this.domCache[id]) return this.domCache[id];
+
+        // Build New
+        const div = document.createElement('div');
+        div.className = 'chart-card';
+        div.id = id;
+        div.innerHTML = `
+            <div class="card-head">
+                <div class="card-info">
+                    <div class="mode-dot" id="dot-${id}"></div>
+                    <span class="ci-symbol" id="sym-${id}">Empty</span>
+                    <span class="ci-meta" id="meta-${id}"></span>
                 </div>
-                <div class="card-content" id="body-${id}">
-                    <div class="empty-state">
-                        <button class="config-btn-subtle" onclick="ConfigModal.open('${id}')">
-                            <span>+</span> Configure Symbol
-                        </button>
-                    </div>
+                <div class="card-tools">
+                    <button class="tool-btn" onclick="ConfigModal.open('${id}')">⚙</button>
+                    <button class="tool-btn" onclick="App.removeChart('${id}')">✕</button>
                 </div>
-            `;
-            return div;
-        },
-
-        removeChart(id) {
-            if(!confirm("Remove this chart?")) return;
-            ChartLogic.destroy(id);
-            
-            const colIdx = this.state.charts[id].col;
-            this.state.layout[colIdx] = this.state.layout[colIdx].filter(x => x !== id);
-            delete this.state.charts[id];
-            
-            document.getElementById(`card-${id}`).remove();
-            this.adjustHeights();
-            this.saveState();
-        },
-
-        // --- CONTROLS ---
-        onDateChange() {
-            this.state.date = document.getElementById('globalDate').value;
-            const today = new Date().toISOString().split('T')[0];
-            if(this.state.date === today && this.state.mode !== 'LIVE') this.setMode('LIVE');
-            else this.refreshAll();
-            this.saveState();
-        },
-
-        setMode(m, save=true) {
-            this.state.mode = m;
-            document.getElementById('modeHist').classList.toggle('active', m==='HIST');
-            const liveBtn = document.getElementById('modeLive');
-            liveBtn.classList.toggle('active', m==='LIVE');
-            liveBtn.classList.toggle('live', m==='LIVE'); // Green Text
+            </div>
+            <div class="card-body" id="body-${id}">
+                <div class="empty-placeholder" onclick="ConfigModal.open('${id}')">
+                    <div class="add-icon">+</div>
+                    <span>Configure Chart</span>
+                </div>
+            </div>
+        `;
+        
+        this.domCache[id] = div;
+        
+        // If config exists, plot it (restore)
+        const cfg = this.state.charts[id].config;
+        if(cfg && cfg.root) ChartLogic.plot(id);
+        
+        return div;
+    },
+
+    addChartBtn(colIdx) {
+        const id = this.addChartToState(colIdx);
+        this.renderGrid(); // Re-render to place it
+        this.saveState();
+    },
+
+    removeChart(id) {
+        ChartLogic.stopLive(id);
+        if(this.state.charts[id].instance) this.state.charts[id].instance.destroy();
+        delete this.state.charts[id];
+        delete this.domCache[id];
+        
+        // Remove from layout array
+        this.state.layout = this.state.layout.map(col => col.filter(x => x !== id));
+        this.renderGrid();
+        this.saveState();
+    },
+
+    calcHeights() {
+        const headerH = 52;
+        const totalH = window.innerHeight - headerH;
+        
+        this.state.layout.forEach((ids, colIdx) => {
+            const count = ids.length;
+            if(count === 0) return;
             
-            if(m==='LIVE') ChartLogic.startAllLive();
-            else ChartLogic.stopAllLive();
+            // Max 4 visible rule
+            let hPx = totalH / count;
+            if(count > 4) hPx = totalH / 4; // Scroll logic kicks in via CSS
             
-            if(save) this.saveState();
-        },
-
-        refreshAll() {
-            Object.keys(this.state.charts).forEach(id => {
-                if(this.state.charts[id].config.root) ChartLogic.plot(id);
-            });
-        },
-
-        resetApp() {
-            if(confirm("Reset entire workspace?")) {
-                localStorage.removeItem('DC_PRO_V5');
-                location.reload();
-            }
-        },
-
-        // --- PERSISTENCE ---
-        saveState() {
-            const simpleLayout = this.state.layout.map(col => {
-                return col.map(id => ({ id, config: this.state.charts[id].config }));
+            ids.forEach(id => {
+                if(this.domCache[id]) {
+                    this.domCache[id].style.height = `${hPx}px`;
+                }
             });
-            const data = {
-                date: this.state.date,
-                mode: this.state.mode,
-                columns: this.state.columns,
-                layout: simpleLayout
-            };
-            localStorage.setItem('DC_PRO_V5', JSON.stringify(data));
-        },
-
-        loadState() {
-            try {
-                const raw = localStorage.getItem('DC_PRO_V5');
-                if(!raw) { this.initDefault(); return; }
-                const data = JSON.parse(raw);
-                
-                // Date handling: try to stick to saved date, but if invalid/old, might default to latest loaded
-                // For now, let's use the loaded latest date unless user explicitly saved one?
-                // Actually, prioritizing the latest DB date is usually better for UX on reload.
-                // We keep this.state.date as is (from loadDates), unless we want to force saved.
-                if(data.date) document.getElementById('globalDate').value = data.date;
-                this.state.date = document.getElementById('globalDate').value;
-
-                this.state.mode = data.mode || 'HIST';
-                this.state.columns = data.columns || 3;
-                
-                // Hydrate Charts
-                this.state.layout = [[],[],[],[]]; // Max 4 cols supported in UI
-                data.layout.forEach((col, idx) => {
-                    if(idx >= 4) return;
-                    col.forEach(item => {
-                        this.state.charts[item.id] = {
-                            col: idx,
-                            config: item.config,
-                            instance: null,
-                            cachedData: null
-                        };
-                        this.state.layout[idx].push(item.id);
-                    });
-                });
-                
-                this.renderGrid();
-                
-            } catch(e) { console.error(e); this.initDefault(); }
-        },
-
-        initDefault() {
-            this.state.layout = [[], [], []];
-            this.state.columns = 3;
-            // Add 1 empty chart per col
-            for(let i=0; i<3; i++) this.addChart(i);
+        });
+    },
+
+    // --- GLOBAL ACTIONS ---
+    onDateChange() {
+        this.state.date = document.getElementById('globalDate').value;
+        const today = new Date().toISOString().split('T')[0];
+        if(this.state.date === today && this.state.mode !== 'LIVE') this.toggleMode();
+        
+        this.saveState();
+        // Refresh all
+        Object.keys(this.state.charts).forEach(id => ChartLogic.plot(id));
+        this.startLoops();
+    },
+
+    toggleMode() {
+        this.state.mode = (this.state.mode === 'LIVE') ? 'HIST' : 'LIVE';
+        this.updateModeUI();
+        this.saveState();
+        this.startLoops();
+    },
+
+    updateModeUI() {
+        const btn = document.getElementById('modeBtn');
+        const txt = document.getElementById('modeText');
+        if(this.state.mode === 'LIVE') {
+            btn.classList.add('live');
+            txt.innerText = 'LIVE';
+        } else {
+            btn.classList.remove('live');
+            txt.innerText = 'HISTORICAL';
         }
-    };
-
-    /** --- CHART LOGIC --- */
-    const ChartLogic = {
-        async plot(id, isUpdate=false) {
-            const chartObj = GlobalApp.state.charts[id];
-            if(!chartObj || !chartObj.config.root) return;
-            const cfg = chartObj.config;
-
-            // UI Updates
-            const infoEl = document.getElementById(`info-${id}`);
-            if(infoEl) {
-                const dotClass = GlobalApp.state.mode === 'LIVE' ? (isUpdate ? 'retry' : 'live') : 'hist';
-                infoEl.innerHTML = `
-                    <div class="status-dot ${dotClass}"></div>
-                    <span class="symbol-text">${cfg.root}</span>
-                    <span class="meta-text">${cfg.expiry} · ${cfg.timeframe}</span>
-                `;
-            }
-
-            // Prepare Container
-            const body = document.getElementById(`body-${id}`);
-            if(!body.querySelector('canvas')) {
-                body.innerHTML = `<div style="width:100%; height:100%; position:relative;"><canvas id="canvas-${id}"></canvas></div>`;
-            }
-
-            // Calc Time
-            let endTime = cfg.end;
-            if(GlobalApp.state.mode === 'LIVE') {
-                const now = new Date();
-                endTime = `${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`;
-            }
+    },
+
+    startLoops() {
+        const isLive = (this.state.mode === 'LIVE');
+        Object.keys(this.state.charts).forEach(id => {
+            if(isLive) ChartLogic.startLive(id);
+            else ChartLogic.stopLive(id);
+        });
+    },
+    
+    reset() {
+        if(confirm("Reset Everything?")) {
+            localStorage.removeItem('dc_pro_v5');
+            location.reload();
+        }
+    },
 
-            try {
-                const res = await fetch('/api/fetch_series', {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({
-                        date: GlobalApp.state.date,
-                        root: cfg.root,
-                        expiry: cfg.expiry,
-                        instrument: cfg.instrument,
-                        timeframe: cfg.timeframe,
-                        start_time: cfg.start,
-                        end_time: endTime
-                    })
-                });
-                const data = await res.json();
+    toast(msg) {
+        const t = document.getElementById('toast');
+        document.getElementById('toastMsg').innerText = msg;
+        t.classList.add('visible');
+        setTimeout(() => t.classList.remove('visible'), 2000);
+    }
+};
+
+window.onresize = () => App.calcHeights();
+
+/**
+ * --- CHART LOGIC ---
+ */
+const ChartLogic = {
+    async plot(id, isUpdate=false) {
+        const c = App.state.charts[id];
+        const cfg = c.config;
+        if(!cfg || !cfg.root) return;
+
+        // UI Updates
+        const card = App.domCache[id];
+        if(!card) return; // Should not happen
+        
+        card.querySelector('#sym-'+id).innerText = cfg.root;
+        card.querySelector('#meta-'+id).innerText = `${cfg.expiry} • ${cfg.instrument} • ${cfg.timeframe}`;
+        
+        const dot = card.querySelector('#dot-'+id);
+        dot.style.background = isUpdate ? 'var(--warning)' : (App.state.mode==='LIVE' ? 'var(--success)' : 'var(--accent)');
+
+        // Canvas Setup
+        const body = card.querySelector('#body-'+id);
+        if(!body.querySelector('canvas')) {
+            body.innerHTML = `<div style="position:relative; width:100%; height:100%"><canvas id="can-${id}"></canvas></div>`;
+        }
 
-                if(data.error || !data.labels || !data.labels.length) {
-                    if(GlobalApp.state.mode !== 'LIVE') {
-                        body.innerHTML = '<div class="empty-state"><span style="color:var(--text-muted)">No Data Available</span></div>';
-                    }
-                    return;
-                }
+        let endTime = cfg.end;
+        if(App.state.mode === 'LIVE') {
+            const n = new Date();
+            endTime = `${String(n.getHours()).padStart(2,'0')}:${String(n.getMinutes()).padStart(2,'0')}`;
+        }
 
-                // Cache Data for Layout Switching
-                chartObj.cachedData = data;
-                
-                // Process Series
-                const datasets = this.processDatasets(cfg.series, data);
-                this.renderCanvas(id, data.labels, datasets);
-
-                // Fix Dot if it was 'retry'
-                if(infoEl) infoEl.querySelector('.status-dot').className = `status-dot ${GlobalApp.state.mode==='LIVE'?'live':'hist'}`;
-
-            } catch(e) { console.error(e); }
-        },
-
-        // Render from Cache or Fetch
-        render(id) {
-            const chartObj = GlobalApp.state.charts[id];
-            if(!chartObj || !chartObj.config.root) return;
-
-            // If we have cached data, use it instantly (layout switch optimization)
-            if(chartObj.cachedData) {
-                // UI Restore
-                const body = document.getElementById(`body-${id}`);
-                if(!body.querySelector('canvas')) {
-                    body.innerHTML = `<div style="width:100%; height:100%; position:relative;"><canvas id="canvas-${id}"></canvas></div>`;
-                }
-                const datasets = this.processDatasets(chartObj.config.series, chartObj.cachedData);
-                this.renderCanvas(id, chartObj.cachedData.labels, datasets);
-                
-                // Update Title
-                const infoEl = document.getElementById(`info-${id}`);
-                if(infoEl) {
-                    const cfg = chartObj.config;
-                    const dotClass = GlobalApp.state.mode === 'LIVE' ? 'live' : 'hist';
-                    infoEl.innerHTML = `
-                        <div class="status-dot ${dotClass}"></div>
-                        <span class="symbol-text">${cfg.root}</span>
-                        <span class="meta-text">${cfg.expiry} · ${cfg.timeframe}</span>
-                    `;
+        try {
+            const res = await fetch('/api/fetch_series', {
+                method: 'POST',
+                headers: {'Content-Type':'application/json'},
+                body: JSON.stringify({
+                    date: App.state.date, root: cfg.root, expiry: cfg.expiry,
+                    instrument: cfg.instrument, timeframe: cfg.timeframe,
+                    start_time: cfg.start, end_time: endTime
+                })
+            });
+            const data = await res.json();
+            
+            if(data.error || !data.labels || !data.labels.length) {
+                if(App.state.mode !== 'LIVE') {
+                    body.innerHTML = `<div class="empty-placeholder" onclick="ConfigModal.open('${id}')"><span>No Data</span></div>`;
+                    if(c.instance) c.instance.destroy();
                 }
-            } else {
-                this.plot(id);
+                return;
             }
 
-            // Restart live loop if needed
-            if(GlobalApp.state.mode === 'LIVE') this.startLive(id);
-        },
+            // Restore live dot color
+            if(App.state.mode==='LIVE') dot.style.background = 'var(--success)';
 
-        processDatasets(seriesCfg, data) {
-            return seriesCfg.map(s => {
+            const datasets = cfg.series.map(s => {
                 const vals = data.labels.map((_, i) => {
                     const P=data.P[i]||0, V=data.V[i]||0, OI=data.OI[i]||0, B=data.B[i]||0, S=data.S[i]||0;
                     let f = s.formula.replace(/\$OI/g,OI).replace(/\$P/g,P).replace(/\$V/g,V).replace(/\$B/g,B).replace(/\$S/g,S);
@@ -974,233 +868,215 @@ HTML_TEMPLATE = """
                 });
                 return {
                     label: s.label, data: vals, borderColor: s.color, backgroundColor: s.color,
-                    borderWidth: 1.5, pointRadius: 0, hitRadius: 10, hoverRadius: 4, tension: 0.1,
+                    borderWidth: 1.5, pointRadius: 0, hoverRadius: 4, tension: 0.1,
                     yAxisID: s.axis==='left'?'y':'y1'
                 };
             });
-        },
 
-        renderCanvas(id, labels, datasets) {
-            const ctx = document.getElementById(`canvas-${id}`);
-            if(!ctx) return;
-            const cData = GlobalApp.state.charts[id];
-
-            if(cData.instance) {
-                cData.instance.data.labels = labels;
-                cData.instance.data.datasets = datasets;
-                cData.instance.update('none');
-            } else {
-                const hasRight = datasets.some(d => d.yAxisID === 'y1');
-                cData.instance = new Chart(ctx.getContext('2d'), {
-                    type: 'line',
-                    data: { labels, datasets },
-                    options: {
-                        responsive: true, maintainAspectRatio: false, animation: false,
-                        interaction: { mode: 'index', intersect: false },
-                        plugins: { legend: { display: false } },
-                        scales: {
-                            x: { grid: { color: '#27272a', tickLength: 0 }, ticks: { color: '#71717a', maxTicksLimit: 6 } },
-                            y: { type: 'linear', display: true, position: 'left', grid: { color: '#27272a' }, ticks: { color: '#71717a' } },
-                            y1: { type: 'linear', display: hasRight, position: 'right', grid: { display: false }, ticks: { color: '#71717a' } }
-                        }
+            this.renderCanvas(id, data.labels, datasets);
+
+        } catch(e) { console.error(e); }
+    },
+
+    renderCanvas(id, labels, datasets) {
+        const ctx = document.getElementById(`can-${id}`);
+        if(!ctx) return;
+        const c = App.state.charts[id];
+
+        if(c.instance) {
+            c.instance.data.labels = labels;
+            c.instance.data.datasets = datasets;
+            c.instance.update('none');
+        } else {
+            const hasRight = datasets.some(d => d.yAxisID === 'y1');
+            c.instance = new Chart(ctx.getContext('2d'), {
+                type: 'line',
+                data: { labels, datasets },
+                options: {
+                    responsive: true, maintainAspectRatio: false, animation: false,
+                    interaction: { mode: 'index', intersect: false },
+                    plugins: { 
+                        legend: { display:false },
+                        tooltip: { backgroundColor:'rgba(10,10,10,0.95)', titleColor:'#fff', bodyColor:'#ccc', borderColor:'#333', borderWidth:1 }
+                    },
+                    scales: {
+                        x: { grid:{color:'#222', tickLength:0}, ticks:{color:'#666', maxTicksLimit:8} },
+                        y: { type:'linear', display:true, position:'left', grid:{color:'#222'}, ticks:{color:'#666'} },
+                        y1: { type:'linear', display:hasRight, position:'right', grid:{display:false}, ticks:{color:'#666'} }
                     }
-                });
-            }
-        },
-
-        destroy(id) {
-            const c = GlobalApp.state.charts[id];
-            this.stopLive(id);
-            if(c.instance) c.instance.destroy();
-            c.cachedData = null;
-        },
-
-        startLive(id) {
-            this.stopLive(id);
-            const c = GlobalApp.state.charts[id];
-            c.interval = setInterval(() => {
-                if(c.config.root) this.plot(id, true);
-            }, 15000);
-        },
-
-        stopLive(id) {
-            const c = GlobalApp.state.charts[id];
-            if(c && c.interval) { clearInterval(c.interval); c.interval = null; }
-        },
-
-        startAllLive() { Object.keys(GlobalApp.state.charts).forEach(id => this.startLive(id)); },
-        stopAllLive() { Object.keys(GlobalApp.state.charts).forEach(id => this.stopLive(id)); }
-    };
-
-    /** --- CONFIG MODAL --- */
-    const ConfigModal = {
-        currId: null,
-        isGlobal: false,
-
-        async open(id) {
-            this.currId = id;
-            this.isGlobal = false;
-            document.getElementById('cfgModalTitle').innerText = "Configure Symbol";
-            document.getElementById('configOverlay').style.display = 'flex';
-            
-            const cfg = GlobalApp.state.charts[id].config;
-            await this.loadRoots(cfg.root);
-            
-            document.getElementById('cfgTF').value = cfg.timeframe || '1min';
-            document.getElementById('cfgStart').value = cfg.start || '09:15';
-            document.getElementById('cfgEnd').value = cfg.end || '15:30';
-            
-            this.renderSeries(cfg.series || GlobalApp.defaults);
-
-            if(cfg.root) {
-                document.getElementById('cfgRoot').value = cfg.root;
-                await this.onRootChange(cfg.expiry, cfg.instrument);
-            }
-        },
-
-        openDefaults() {
-            this.isGlobal = true;
-            document.getElementById('cfgModalTitle').innerText = "Default Settings";
-            document.getElementById('configOverlay').style.display = 'flex';
-            this.renderSeries(GlobalApp.defaults);
-        },
-
-        close() { document.getElementById('configOverlay').style.display = 'none'; },
-
-        async loadRoots(pre) {
-            const sel = document.getElementById('cfgRoot');
-            sel.innerHTML = '<option>Loading...</option>';
-            try {
-                const d = GlobalApp.state.date;
-                const res = await fetch(`/api/roots?date=${d}`);
-                const roots = await res.json();
-                sel.innerHTML = `<option value="">Select...</option>` + roots.map(r=>`<option>${r}</option>`).join('');
-                if(pre && roots.includes(pre)) sel.value = pre;
-            } catch(e){ sel.innerHTML='<option>Error</option>'; }
-        },
-
-        async onRootChange(preExp, preInst) {
-            const root = document.getElementById('cfgRoot').value;
-            const d = GlobalApp.state.date;
-            const eSel = document.getElementById('cfgExp');
-            eSel.innerHTML = '<option>Loading...</option>';
-
-            const res = await fetch(`/api/expiries?date=${d}&root=${root}`);
-            const exps = await res.json();
-            eSel.innerHTML = `<option value="">Select...</option>` + exps.map(e=>`<option>${e}</option>`).join('');
-
-            if(preExp && exps.includes(preExp)) {
-                eSel.value = preExp;
-                await this.onExpChange(preInst);
-            } else {
-                const auto = await fetch(`/api/auto_config?date=${d}&root=${root}`).then(r=>r.json());
-                if(auto.current) {
-                    eSel.value = auto.current.expiry;
-                    await this.onExpChange(auto.current.instrument);
                 }
-            }
-        },
-
-        async onExpChange(preInst) {
-            const root = document.getElementById('cfgRoot').value;
-            const exp = document.getElementById('cfgExp').value;
-            const d = GlobalApp.state.date;
-            const iSel = document.getElementById('cfgInst');
-            iSel.innerHTML = '<option>Loading...</option>';
-            const res = await fetch(`/api/instruments?date=${d}&root=${root}&expiry=${exp}`);
-            const insts = await res.json();
-            iSel.innerHTML = insts.map(i=>`<option>${i}</option>`).join('');
-            if(preInst && insts.includes(preInst)) iSel.value = preInst;
-        },
-
-        renderSeries(list) {
-            const div = document.getElementById('cfgSeriesList');
-            div.innerHTML = '';
-            list.forEach(s => {
-                const el = document.createElement('div');
-                el.className = 'series-item';
-                el.innerHTML = `
-                    <input type="color" value="${s.color}" class="s-color">
-                    <input type="text" value="${s.formula}" class="form-control s-formula" placeholder="$P">
-                    <input type="text" value="${s.label}" class="form-control s-label" placeholder="Label">
-                    <div class="custom-select-wrapper" style="width:100%">
-                        <select class="custom-select s-axis" style="min-width:0; width:100%; padding:4px;">
-                            <option value="left" ${s.axis==='left'?'selected':''}>L</option>
-                            <option value="right" ${s.axis==='right'?'selected':''}>R</option>
-                        </select>
-                    </div>
-                    <button class="tool-btn close" onclick="this.parentElement.remove()">✕</button>
-                `;
-                div.appendChild(el);
             });
-        },
-
-        addSeriesRow() {
-            const div = document.getElementById('cfgSeriesList');
+        }
+    },
+
+    startLive(id) {
+        this.stopLive(id);
+        const c = App.state.charts[id];
+        if(!c.config.root) return;
+        
+        this.plot(id);
+        c.interval = setInterval(() => this.plot(id, true), 15000);
+    },
+
+    stopLive(id) {
+        const c = App.state.charts[id];
+        if(c && c.interval) { clearInterval(c.interval); c.interval = null; }
+    }
+};
+
+/**
+ * --- CONFIG MODAL ---
+ */
+const ConfigModal = {
+    currId: null,
+    isGlobal: false,
+
+    async open(id) {
+        this.currId = id;
+        this.isGlobal = false;
+        document.getElementById('mTitle').innerText = 'Configure Chart';
+        document.getElementById('modalOverlay').style.display = 'flex';
+        document.getElementById('cfgForm').style.display = 'block';
+
+        const cfg = App.state.charts[id].config;
+        await this.loadRoots(cfg.root);
+        
+        document.getElementById('cfgTF').value = cfg.timeframe || '1min';
+        document.getElementById('cfgStart').value = cfg.start || '09:15';
+        document.getElementById('cfgEnd').value = cfg.end || '15:30';
+
+        this.renderSeries(cfg.series || App.defaults);
+        
+        if(cfg.root) {
+            document.getElementById('cfgRoot').value = cfg.root;
+            await this.onRootChange(cfg.expiry, cfg.instrument);
+        }
+    },
+
+    openDefaults() {
+        this.isGlobal = true;
+        document.getElementById('mTitle').innerText = 'Global Defaults';
+        document.getElementById('modalOverlay').style.display = 'flex';
+        this.renderSeries(App.defaults);
+    },
+
+    close() { document.getElementById('modalOverlay').style.display = 'none'; },
+
+    async loadRoots(pre) {
+        const sel = document.getElementById('cfgRoot');
+        sel.innerHTML = '<option>Loading...</option>';
+        try {
+            const d = App.state.date;
+            const res = await fetch(`/api/roots?date=${d}`);
+            const data = await res.json();
+            sel.innerHTML = `<option value="">-- Select --</option>` + data.map(r=>`<option>${r}</option>`).join('');
+            if(pre && data.includes(pre)) sel.value = pre;
+        } catch(e){ sel.innerHTML = '<option>Error</option>'; }
+    },
+
+    async onRootChange(preExp, preInst) {
+        const root = document.getElementById('cfgRoot').value;
+        const d = App.state.date;
+        const eSel = document.getElementById('cfgExp');
+        eSel.innerHTML = '<option>Loading...</option>';
+
+        const res = await fetch(`/api/expiries?date=${d}&root=${root}`);
+        const data = await res.json();
+        eSel.innerHTML = `<option value="">-- Select --</option>` + data.map(e=>`<option>${e}</option>`).join('');
+        
+        if(preExp && data.includes(preExp)) {
+            eSel.value = preExp;
+            await this.onExpChange(preInst);
+        } else {
+            // Auto
+            const auto = await fetch(`/api/auto_config?date=${d}&root=${root}`).then(r=>r.json());
+            if(auto.current) {
+                eSel.value = auto.current.expiry;
+                await this.onExpChange(auto.current.instrument);
+            }
+        }
+    },
+
+    async onExpChange(preInst) {
+        const root = document.getElementById('cfgRoot').value;
+        const exp = document.getElementById('cfgExp').value;
+        const d = App.state.date;
+        const iSel = document.getElementById('cfgInst');
+        iSel.innerHTML = '<option>Loading...</option>';
+        
+        const res = await fetch(`/api/instruments?date=${d}&root=${root}&expiry=${exp}`);
+        const data = await res.json();
+        iSel.innerHTML = data.map(i=>`<option>${i}</option>`).join('');
+        if(preInst && data.includes(preInst)) iSel.value = preInst;
+    },
+
+    renderSeries(list) {
+        const div = document.getElementById('cfgSeries');
+        div.innerHTML = '';
+        list.forEach(s => {
             const el = document.createElement('div');
-            el.className = 'series-item';
+            el.className = 's-item';
             el.innerHTML = `
-                <input type="color" value="#ffffff" class="s-color">
-                <input type="text" value="$P" class="form-control s-formula">
-                <input type="text" value="New" class="form-control s-label">
-                <div class="custom-select-wrapper" style="width:100%">
-                    <select class="custom-select s-axis" style="min-width:0; width:100%; padding:4px;">
-                        <option value="left">L</option><option value="right">R</option>
-                    </select>
-                </div>
-                <button class="tool-btn close" onclick="this.parentElement.remove()">✕</button>
+                <input type="color" class="s-color" value="${s.color}">
+                <input type="text" class="inp" value="${s.formula}" placeholder="$P">
+                <input type="text" class="inp" value="${s.label}" placeholder="Label">
+                <select class="inp" style="padding:0 4px;"><option value="left" ${s.axis==='left'?'selected':''}>L</option><option value="right" ${s.axis==='right'?'selected':''}>R</option></select>
+                <button class="tool-btn" style="color:var(--danger)" onclick="this.parentElement.remove()">✕</button>
             `;
             div.appendChild(el);
-        },
-
-        save() {
-            const rows = document.querySelectorAll('#cfgSeriesList .series-item');
-            const series = Array.from(rows).map(r => ({
-                color: r.querySelector('.s-color').value,
-                formula: r.querySelector('.s-formula').value,
-                label: r.querySelector('.s-label').value,
-                axis: r.querySelector('.s-axis').value
-            }));
-
-            if(this.isGlobal) {
-                GlobalApp.defaults = series;
-                this.showToast("Defaults updated");
-            } else {
-                const root = document.getElementById('cfgRoot').value;
-                const exp = document.getElementById('cfgExp').value;
-                const inst = document.getElementById('cfgInst').value;
-                
-                if(!root || !exp || !inst) { this.showToast("Incomplete details!", true); return; }
-
-                const config = {
-                    root, expiry: exp, instrument: inst,
-                    timeframe: document.getElementById('cfgTF').value,
-                    start: document.getElementById('cfgStart').value,
-                    end: document.getElementById('cfgEnd').value,
-                    series: series
-                };
-
-                GlobalApp.state.charts[this.currId].config = config;
-                GlobalApp.saveState();
-                ChartLogic.plot(this.currId);
-                if(GlobalApp.state.mode === 'LIVE') ChartLogic.startLive(this.currId);
-                this.showToast("Chart configured");
-            }
-            this.close();
-        },
-
-        showToast(msg, isError=false) {
-            const t = document.getElementById('toast');
-            t.querySelector('#toastMsg').innerText = msg;
-            t.querySelector('.toast-icon').innerText = isError ? '!' : '✓';
-            t.querySelector('.toast-icon').style.color = isError ? 'var(--danger)' : 'var(--success)';
-            t.classList.add('show');
-            setTimeout(() => t.classList.remove('show'), 2000);
+        });
+    },
+
+    addRow() {
+        const div = document.getElementById('cfgSeries');
+        const el = document.createElement('div');
+        el.className = 's-item';
+        el.innerHTML = `
+            <input type="color" class="s-color" value="#ffffff">
+            <input type="text" class="inp" value="$P">
+            <input type="text" class="inp" value="New">
+            <select class="inp" style="padding:0 4px;"><option value="left">L</option><option value="right">R</option></select>
+            <button class="tool-btn" style="color:var(--danger)" onclick="this.parentElement.remove()">✕</button>
+        `;
+        div.appendChild(el);
+    },
+
+    save() {
+        const rows = document.querySelectorAll('#cfgSeries .s-item');
+        const series = Array.from(rows).map(r => ({
+            color: r.querySelector('.s-color').value,
+            formula: r.querySelector('input[type=text]').value, // first text input
+            label: r.querySelectorAll('input[type=text]')[1].value, // second
+            axis: r.querySelector('select').value
+        }));
+
+        if(this.isGlobal) {
+            App.defaults = series;
+        } else {
+            const root = document.getElementById('cfgRoot').value;
+            const exp = document.getElementById('cfgExp').value;
+            const inst = document.getElementById('cfgInst').value;
+            
+            if(!root || !exp || !inst) { App.toast('Details incomplete'); return; }
+
+            const config = {
+                root, expiry: exp, instrument: inst,
+                timeframe: document.getElementById('cfgTF').value,
+                start: document.getElementById('cfgStart').value,
+                end: document.getElementById('cfgEnd').value,
+                series: series
+            };
+            
+            App.state.charts[this.currId].config = config;
+            App.saveState();
+            ChartLogic.plot(this.currId);
+            if(App.state.mode === 'LIVE') ChartLogic.startLive(this.currId);
         }
-    };
-
-    window.onload = () => GlobalApp.init();
-
+        
+        App.toast('Configuration Saved');
+        this.close();
+    }
+};
 </script>
 </body>
 </html>