Update app.py

app.py

@@ -205,7 +205,7 @@ def fetch_series(
 
 
 # ==========================================
-# 5. FRONTEND TEMPLATE (NEW UI)
+# 5. FRONTEND TEMPLATE (REVISED UI)
 # ==========================================
 
 HTML_TEMPLATE = """
@@ -222,7 +222,7 @@ HTML_TEMPLATE = """
         :root {
             --bg-body: #0d1117;
             --bg-header: #161b22;
-            --bg-card: #0d1117;
+            --bg-card: #010409;
             --bg-panel: #21262d;
             --border: #30363d;
             --text-primary: #e6edf3;
@@ -231,114 +231,127 @@ HTML_TEMPLATE = """
             --success: #238636;
             --danger: #da3633;
             --warning: #d29922;
+            
+            --header-h: 55px;
         }
-        * { box-sizing: border-box; margin: 0; padding: 0; }
-        
-        /* SCROLLBAR */
-        ::-webkit-scrollbar { width: 8px; height: 8px; }
-        ::-webkit-scrollbar-track { background: var(--bg-body); }
-        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-        ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
 
+        * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
+        
         body { 
             background: var(--bg-body); color: var(--text-primary); 
-            font-family: 'Inter', sans-serif; 
-            display: flex; flex-direction: column; 
-            height: 100vh; overflow: hidden;
+            font-family: 'Inter', sans-serif; display: flex; flex-direction: column; 
+            height: 100vh; overflow: hidden; /* Prevent body scroll, handle in main-content */
         }
 
         /* --- TOP BAR --- */
         .top-bar {
-            height: 50px; background: var(--bg-header); border-bottom: 1px solid var(--border);
-            display: flex; align-items: center; justify-content: space-between; padding: 0 15px; flex-shrink: 0;
+            height: var(--header-h); background: var(--bg-header); border-bottom: 1px solid var(--border);
+            display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0;
             z-index: 50;
         }
-        .logo { font-weight: 800; font-size: 16px; margin-right: 20px; color: var(--text-primary); }
+        .logo { font-weight: 800; font-size: 18px; color: var(--text-primary); display: flex; align-items: center; gap: 8px;}
         .logo span { color: var(--accent); }
         
-        .controls { display: flex; gap: 10px; align-items: center; }
+        .controls { display: flex; gap: 12px; align-items: center; }
         
         select, button, input {
             background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-primary);
-            padding: 5px 12px; border-radius: 4px; font-size: 12px; font-family: inherit; outline: none; cursor: pointer;
-            height: 30px; display: flex; align-items: center;
+            padding: 6px 12px; border-radius: 6px; font-size: 13px; font-family: inherit; cursor: pointer;
+            transition: 0.2s;
         }
+        select:hover, button:hover { border-color: var(--text-secondary); }
         select:focus, input:focus { border-color: var(--accent); }
-        button:hover { background: var(--border); }
         
         .btn-accent { background: var(--accent); color: white; border: none; font-weight: 600; }
         .btn-accent:hover { background: #58a6ff; }
+        
         .btn-danger { color: var(--danger); border-color: var(--border); background: transparent; }
         .btn-danger:hover { background: rgba(218, 54, 51, 0.1); border-color: var(--danger); }
 
-        .layout-btn-group { display: flex; gap: 2px; }
-        .layout-btn { width: 30px; justify-content: center; font-weight: bold; background: var(--bg-card); }
-        .layout-btn.active { background: var(--border); color: var(--accent); }
-
         /* --- MAIN GRID CONTAINER --- */
-        /* This is the scrolling area. Columns are placed inside here. */
-        .main-content { 
-            flex: 1; 
-            display: flex; 
-            overflow-y: auto; /* PAGE SCROLL */
+        .main-content {
+            flex: 1;
+            /* GLOBAL SCROLLBAR HERE */
+            overflow-y: auto; 
             overflow-x: hidden;
-            padding: 0;
+            display: grid;
+            padding: 10px;
+            gap: 10px;
+            /* Columns will be set via JS: grid-template-columns: repeat(N, 1fr) */
+            height: calc(100vh - var(--header-h));
+            align-content: start; /* Don't stretch rows if content is small */
         }
         
-        .column {
-            flex: 1; 
-            display: flex; 
-            flex-direction: column; 
-            min-width: 0;
-            border-right: 1px solid var(--border);
-            /* Height is determined by content, so it scrolls with the page */
-        }
-        .column:last-child { border-right: none; }
+        /* Custom Scrollbar */
+        .main-content::-webkit-scrollbar { width: 8px; }
+        .main-content::-webkit-scrollbar-track { background: var(--bg-body); }
+        .main-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+        .main-content::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
 
-        .column-add-btn {
-            padding: 10px; border-top: 1px solid var(--border); color: var(--text-secondary);
-            text-align: center; cursor: pointer; font-size: 12px; font-weight: 600;
-            background: var(--bg-header); flex-shrink: 0; height: 40px;
+        /* --- COLUMN --- */
+        .column {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            min-height: 100%; /* Fill the grid cell */
+            /* No internal overflow */
         }
-        .column-add-btn:hover { color: var(--text-primary); background: var(--bg-panel); }
 
         /* --- CHART CARD --- */
         .chart-card {
             background: var(--bg-card); 
-            border-bottom: 1px solid var(--border);
+            border: 1px solid var(--border); 
+            border-radius: 8px;
             display: flex; flex-direction: column; 
             position: relative;
-            /* Height is set dynamically by JS */
-            transition: height 0.3s ease;
+            overflow: hidden;
+            transition: box-shadow 0.2s;
+            /* Height is dynamic, set via inline style or flex */
+            width: 100%;
         }
-        
+        .chart-card:hover { box-shadow: 0 0 0 1px var(--border); }
+
         .card-header {
-            height: 35px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;
-            padding: 0 10px; background: var(--bg-header); font-size: 12px; flex-shrink: 0;
+            height: 40px; border-bottom: 1px solid var(--border); 
+            display: flex; align-items: center; justify-content: space-between;
+            padding: 0 12px; background: var(--bg-header); font-size: 12px;
         }
         .card-title { font-weight: 600; display: flex; gap: 8px; align-items: center; }
         .card-meta { color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
+        .card-actions { display: flex; gap: 4px; }
         
-        .card-actions { display: flex; gap: 5px; }
-        .icon-btn { padding: 4px; height: 24px; width: 24px; justify-content: center; border: none; background: transparent; color: var(--text-secondary); }
-        .icon-btn:hover { color: var(--text-primary); background: var(--border); }
+        .icon-btn { 
+            padding: 4px; font-size: 14px; border: none; background: transparent; 
+            color: var(--text-secondary); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
+        }
+        .icon-btn:hover { color: var(--text-primary); background: var(--border); border-radius: 4px; }
+        .icon-btn.danger:hover { color: var(--danger); background: rgba(218, 54, 51, 0.2); }
+
+        .card-body { flex: 1; position: relative; padding: 2px; }
+        .chart-canvas { width: 100%; height: 100%; }
 
-        .card-body { flex: 1; position: relative; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
-        
-        /* Empty State */
         .empty-state {
             display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
-            color: var(--text-secondary); font-size: 13px; gap: 10px;
+            color: var(--text-secondary); font-size: 13px; gap: 15px;
             background: radial-gradient(circle at center, var(--bg-panel) 0%, var(--bg-card) 70%);
         }
-        .empty-state button { height: auto; padding: 8px 16px; font-size: 13px; }
+
+        /* Add Button inside Column */
+        .col-add-btn {
+            padding: 12px; border: 1px dashed var(--border); color: var(--text-secondary);
+            text-align: center; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600;
+            transition: 0.2s; background: rgba(22, 27, 34, 0.5);
+            flex-shrink: 0; /* Prevent shrinking */
+        }
+        .col-add-btn:hover { border-color: var(--text-primary); color: var(--text-primary); background: var(--bg-panel); }
 
         /* --- STATUS DOTS --- */
-        .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--text-secondary); }
-        .status-dot.live { background: #00ff00; box-shadow: 0 0 8px #00ff00; animation: pulse 1.5s infinite; }
-        .status-dot.retry { background: var(--warning); animation: pulse 0.5s infinite; }
+        .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--text-secondary); transition: 0.3s;}
+        .status-dot.live { background: #00ff00; box-shadow: 0 0 8px rgba(0,255,0,0.4); animation: pulse 2s infinite; }
+        .status-dot.retry { background: var(--warning); animation: flash 0.5s infinite; }
         .status-dot.hist { background: var(--accent); }
         @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
+        @keyframes flash { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
 
         /* --- MODAL --- */
         .modal-overlay {
@@ -347,30 +360,33 @@ HTML_TEMPLATE = """
             display: none; justify-content: center; align-items: center;
         }
         .modal {
-            background: var(--bg-header); border: 1px solid var(--border); border-radius: 8px;
+            background: var(--bg-header); border: 1px solid var(--border); border-radius: 12px;
             width: 500px; max-width: 95%; max-height: 90vh; display: flex; flex-direction: column;
             box-shadow: 0 20px 50px rgba(0,0,0,0.6);
         }
-        .modal-head { padding: 15px; border-bottom: 1px solid var(--border); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
-        .modal-body { padding: 20px; overflow-y: auto; }
-        .modal-foot { padding: 15px; border-top: 1px solid var(--border); text-align: right; display:flex; justify-content:flex-end; gap:10px;}
-        
-        .form-group { margin-bottom: 15px; }
-        .form-group label { display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: 11px; text-transform: uppercase; font-weight:600; }
-        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+        .modal-head { padding: 15px 20px; border-bottom: 1px solid var(--border); font-weight: 700; display: flex; justify-content: space-between; align-items: center;}
+        .modal-body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px;}
+        .modal-foot { padding: 15px 20px; border-top: 1px solid var(--border); text-align: right; background: var(--bg-card); border-radius: 0 0 12px 12px;}
         
-        input[type="time"] { width: 100%; }
+        .form-group label { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: 11px; text-transform: uppercase; font-weight: 600;}
+        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
 
         /* Series List */
-        .series-row { display: grid; grid-template-columns: 35px 1fr 1fr 60px 30px; gap: 5px; margin-bottom: 5px; align-items: center; }
-        .series-row input[type="color"] { padding: 0; height: 30px; border: none; background: none; width:100%; cursor:pointer;}
-        .series-row button { justify-content: center; }
+        .series-row { display: grid; grid-template-columns: 35px 1fr 1fr 60px 30px; gap: 8px; margin-bottom: 8px; align-items: center; }
+        .series-row input[type="color"] { padding: 0; height: 32px; border: none; background: none; cursor: pointer;}
+        
+        .pill-btn {
+            background: var(--bg-panel); border: 1px solid var(--border); border-radius: 20px;
+            padding: 4px 10px; font-size: 11px; cursor: pointer; display: inline-block; margin-right: 5px; margin-bottom: 5px;
+        }
+        .pill-btn:hover { border-color: var(--accent); color: var(--accent); }
 
         /* Toast */
         .toast {
-            position: fixed; bottom: 20px; right: 20px; background: var(--accent); color: white;
-            padding: 10px 20px; border-radius: 4px; font-weight: 600; font-size: 13px;
-            transform: translateY(100px); transition: transform 0.3s; z-index: 1000;
+            position: fixed; bottom: 30px; right: 30px; background: var(--accent); color: white;
+            padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 13px;
+            transform: translateY(100px); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1000;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
         }
         .toast.show { transform: translateY(0); }
 
@@ -384,30 +400,31 @@ HTML_TEMPLATE = """
     
     <div class="controls">
         <!-- Date Selection -->
-        <select id="globalDate" onchange="GlobalApp.onDateChange()" style="min-width:120px;"></select>
+        <select id="globalDate" onchange="GlobalApp.onDateChange()"></select>
         
         <!-- Mode Selection -->
-        <select id="globalMode" onchange="GlobalApp.onModeChange()" style="font-weight:bold;">
-            <option value="HIST">HISTORICAL</option>
-            <option value="LIVE">LIVE 🟢</option>
+        <select id="globalMode" onchange="GlobalApp.onModeChange()">
+            <option value="HIST">Historical</option>
+            <option value="LIVE">Live (Auto Refresh)</option>
         </select>
         
-        <div style="width: 1px; height: 20px; background: var(--border); margin: 0 5px;"></div>
-
-        <!-- Layout Selector Buttons -->
-        <div class="layout-btn-group">
-            <button class="layout-btn" onclick="GlobalApp.setLayout(1)" title="1 Column">1</button>
-            <button class="layout-btn" onclick="GlobalApp.setLayout(2)" title="2 Columns">2</button>
-            <button class="layout-btn" onclick="GlobalApp.setLayout(3)" title="3 Columns">3</button>
-            <button class="layout-btn" onclick="GlobalApp.setLayout(4)" title="4 Columns">4</button>
-        </div>
+        <div style="width: 1px; height: 24px; background: var(--border); margin: 0 5px;"></div>
+
+        <!-- Layout Selector -->
+        <label style="font-size:12px; color:var(--text-secondary); font-weight:600;">COLS:</label>
+        <select id="colSelect" onchange="GlobalApp.setLayout(this.value)">
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+        </select>
 
         <button onclick="ConfigModal.openDefaults()">Settings</button>
         <button class="btn-danger" onclick="GlobalApp.resetApp()">Reset</button>
     </div>
 </div>
 
-<!-- MAIN GRID CONTAINER -->
+<!-- GRID CONTAINER -->
 <div class="main-content" id="gridContainer">
     <!-- Columns injected via JS -->
 </div>
@@ -420,15 +437,16 @@ HTML_TEMPLATE = """
             <button class="icon-btn" onclick="ConfigModal.close()">✕</button>
         </div>
         <div class="modal-body">
+            
             <div id="cfgForm">
                 <div class="form-row">
                     <div class="form-group">
                         <label>Symbol (Root)</label>
-                        <select id="cfgRoot" onchange="ConfigModal.onRootChange()" style="width:100%"></select>
+                        <select id="cfgRoot" onchange="ConfigModal.onRootChange()"></select>
                     </div>
                     <div class="form-group">
                         <label>Expiry</label>
-                        <select id="cfgExp" onchange="ConfigModal.onExpChange()" style="width:100%"></select>
+                        <select id="cfgExp" onchange="ConfigModal.onExpChange()"></select>
                     </div>
                 </div>
                 
@@ -450,30 +468,51 @@ HTML_TEMPLATE = """
                         </select>
                     </div>
                     <div class="form-group">
-                        <label>Range (HH:MM)</label>
-                        <div style="display:flex; gap:5px;">
-                            <input type="time" id="cfgStart" value="09:15">
-                            <input type="time" id="cfgEnd" value="15:30">
+                        <label>Time Range (HH:MM)</label>
+                        <div style="display:flex; gap:10px;">
+                            <input type="time" id="cfgStart" value="09:15" style="flex:1">
+                            <input type="time" id="cfgEnd" value="15:30" style="flex:1">
                         </div>
                     </div>
                 </div>
 
-                <hr style="border:0; border-top:1px solid var(--border); margin:15px 0;">
-                
-                <div class="form-group">
-                    <label>Plot Lines (Variables: $P, $B, $S, $V, $OI)</label>
+                <div style="border-top:1px solid var(--border); padding-top:15px; margin-top:5px;">
+                    <label style="margin-bottom:10px; display:block; color:var(--text-secondary); font-size:11px; font-weight:700;">PLOT FORMULAS</label>
+                    
+                    <div style="margin-bottom:10px;">
+                        <span class="pill-btn" onclick="ConfigModal.insertVar('$P')">$P (Price)</span>
+                        <span class="pill-btn" onclick="ConfigModal.insertVar('$B')">$B (Buy)</span>
+                        <span class="pill-btn" onclick="ConfigModal.insertVar('$S')">$S (Sell)</span>
+                        <span class="pill-btn" onclick="ConfigModal.insertVar('$V')">$V (Vol)</span>
+                        <span class="pill-btn" onclick="ConfigModal.insertVar('$OI')">$OI</span>
+                    </div>
+
                     <div id="cfgSeriesList"></div>
-                    <button style="width:100%; margin-top:5px; height:auto; padding:5px;" onclick="ConfigModal.addSeriesRow()">+ Add Line</button>
+                    <button class="btn-accent" style="width:100%; margin-top:10px; padding:8px;" onclick="ConfigModal.addSeriesRow()">+ Add Plot Line</button>
                 </div>
             </div>
         </div>
         <div class="modal-foot">
-            <button onclick="ConfigModal.close()">Cancel</button>
+            <button onclick="ConfigModal.close()" style="margin-right:10px;">Cancel</button>
             <button class="btn-accent" onclick="ConfigModal.save()">Save Configuration</button>
         </div>
     </div>
 </div>
 
+<!-- RESTORE PROMPT -->
+<div class="modal-overlay" id="restoreModal" style="display:none;">
+    <div class="modal" style="width: 360px;">
+        <div class="modal-head">Welcome Back</div>
+        <div class="modal-body" style="text-align:center; padding:30px 20px;">
+            <p style="color:var(--text-secondary);">We found a saved layout from your previous session.</p>
+        </div>
+        <div class="modal-foot">
+            <button class="btn-danger" onclick="GlobalApp.initNew()">Reset Fresh</button>
+            <button class="btn-accent" onclick="GlobalApp.loadFromStorage()">Restore Layout</button>
+        </div>
+    </div>
+</div>
+
 <div id="toast" class="toast">Settings Saved</div>
 
 <script>
@@ -485,13 +524,13 @@ const GlobalApp = {
     state: {
         date: '',
         mode: 'HIST', 
-        columns: 3,
-        layout: [[], [], []], // Array of arrays of chart IDs
-        charts: {} // ID -> { col: 0, config: {}, instance: ChartJS, interval: null }
+        columns: 1,
+        layout: [[], [], [], []], // Max 4 cols supported in logic
+        charts: {} // ID -> { col:0, config: {}, instance: ChartJS, interval: null }
     },
 
     defaults: [
-        { formula: '$P', color: '#58a6ff', label: 'Price', axis: 'left' },
+        { formula: '$P', color: '#2f81f7', label: 'Price', axis: 'left' },
         { formula: '$B', color: '#238636', label: 'Buy Qty', axis: 'right' },
         { formula: '$S', color: '#da3633', label: 'Sell Qty', axis: 'right' }
     ],
@@ -499,22 +538,18 @@ const GlobalApp = {
     async init() {
         await this.loadDates();
         
-        if (localStorage.getItem('dc_pro_state')) {
-            this.loadFromStorage();
-        } else {
-            this.initNew();
-        }
-
-        // Auto Live Mode Logic
+        // Auto-detect Live Date
         const today = new Date().toISOString().split('T')[0];
-        if (this.state.date === today) {
+        if(this.state.date === today) {
             this.state.mode = 'LIVE';
             document.getElementById('globalMode').value = 'LIVE';
         }
 
-        this.updateLayoutUI();
-        // Start Loops if Live
-        this.checkMode();
+        if (localStorage.getItem('dc_pro_v3')) {
+            document.getElementById('restoreModal').style.display = 'flex';
+        } else {
+            this.initNew();
+        }
     },
 
     async loadDates() {
@@ -528,77 +563,60 @@ const GlobalApp = {
     },
 
     initNew() {
-        // Default 3x2 Grid (3 Columns, 2 Empty Charts each)
-        this.state.layout = [[], [], []];
-        this.state.columns = 3;
-        
-        for(let c=0; c<3; c++) {
-            this.addChartInternal(c, null);
-            this.addChartInternal(c, null);
-        }
-        this.renderGrid();
-    },
-
-    // Adds chart to state, does NOT render immediately (called by init or add btn)
-    addChartInternal(colIdx, savedData) {
-        const id = savedData ? savedData.id : 'c_' + Date.now() + Math.random().toString(36).substr(2,5);
-        const config = savedData ? savedData.config : {};
-        
-        this.state.charts[id] = {
-            col: colIdx,
-            config: config,
-            instance: null,
-            interval: null
-        };
-        
-        if (!this.state.layout[colIdx]) this.state.layout[colIdx] = [];
-        // Prevent dupes
-        if (!this.state.layout[colIdx].includes(id)) {
-            this.state.layout[colIdx].push(id);
-        }
-        return id;
+        document.getElementById('restoreModal').style.display = 'none';
+        this.setLayout(2); // Default 2 cols
+        // Init with 2 empty charts
+        this.addChart(0);
+        this.addChart(1);
     },
 
     loadFromStorage() {
         try {
-            const raw = localStorage.getItem('dc_pro_state');
+            const raw = localStorage.getItem('dc_pro_v3');
             const saved = JSON.parse(raw);
-            this.state.date = saved.date || this.state.date; // Prefer saved date? Or default to latest? Let's use saved if valid.
-            document.getElementById('globalDate').value = this.state.date;
+            
+            document.getElementById('restoreModal').style.display = 'none';
+            
+            // Restore Date if valid, else keep latest
+            const dSel = document.getElementById('globalDate');
+            if(Array.from(dSel.options).some(o => o.value === saved.date)) {
+                dSel.value = saved.date;
+                this.state.date = saved.date;
+            }
 
-            this.state.mode = saved.mode || 'HIST';
+            // If date matches today, force live, else restore saved mode
+            const today = new Date().toISOString().split('T')[0];
+            if(this.state.date === today) {
+                this.state.mode = 'LIVE';
+            } else {
+                this.state.mode = saved.mode || 'HIST';
+            }
             document.getElementById('globalMode').value = this.state.mode;
 
-            this.state.columns = saved.columns || 3;
-            this.state.layout = []; 
+            // Restore Layout
+            this.setLayout(saved.columns);
             
-            // Reconstruct
-            saved.layout.forEach((colCharts, cIdx) => {
-                this.state.layout[cIdx] = [];
-                colCharts.forEach(cData => {
-                    this.addChartInternal(cIdx, cData);
+            // Restore Charts
+            saved.layout.forEach((colCharts, colIdx) => {
+                colCharts.forEach(chartData => {
+                    this.addChart(colIdx, chartData.id, chartData.config);
                 });
             });
-            this.renderGrid();
-            // Re-plot valid charts
-            setTimeout(() => {
-                Object.keys(this.state.charts).forEach(id => {
-                    if(this.state.charts[id].config.root) ChartLogic.plot(id);
-                });
-            }, 100);
 
-        } catch(e) { this.initNew(); }
+        } catch(e) {
+            console.error("Load failed", e);
+            this.initNew();
+        }
     },
 
     saveToStorage() {
-        const minimalLayout = [];
-        for(let i=0; i<this.state.columns; i++) {
-            const col = this.state.layout[i] || [];
-            minimalLayout.push(col.map(id => ({
+        // Minify layout for storage
+        const minimalLayout = this.state.layout.map(col => {
+            return col.map(id => ({
                 id: id,
                 config: this.state.charts[id].config
-            })));
-        }
+            }));
+        });
 
         const dump = {
             date: this.state.date,
@@ -606,38 +624,32 @@ const GlobalApp = {
             columns: this.state.columns,
             layout: minimalLayout
         };
-        localStorage.setItem('dc_pro_state', JSON.stringify(dump));
+        localStorage.setItem('dc_pro_v3', JSON.stringify(dump));
     },
 
     resetApp() {
-        if(!confirm("Reset layout and settings?")) return;
-        localStorage.removeItem('dc_pro_state');
+        if(!confirm("Reset everything to fresh state?")) return;
+        localStorage.removeItem('dc_pro_v3');
         location.reload();
     },
 
-    // --- LAYOUT & RENDERING ---
+    showToast(msg) {
+        const t = document.getElementById('toast');
+        t.textContent = msg;
+        t.classList.add('show');
+        setTimeout(() => t.classList.remove('show'), 2000);
+    },
+
+    // --- LAYOUT LOGIC ---
     setLayout(cols) {
-        // Redistribute charts if reducing columns
-        const allCharts = this.state.layout.flat();
+        cols = parseInt(cols);
         this.state.columns = cols;
-        this.state.layout = Array.from({length: cols}, () => []);
-
-        // Distribute round-robin
-        allCharts.forEach((id, i) => {
-            const col = i % cols;
-            this.state.layout[col].push(id);
-            this.state.charts[id].col = col;
-        });
-
-        this.updateLayoutUI();
+        document.getElementById('colSelect').value = cols;
+        
+        const container = document.getElementById('gridContainer');
+        container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
+        
         this.renderGrid();
-        this.saveToStorage();
-    },
-
-    updateLayoutUI() {
-        document.querySelectorAll('.layout-btn').forEach((b, i) => {
-            b.classList.toggle('active', (i+1) === this.state.columns);
-        });
     },
 
     renderGrid() {
@@ -648,189 +660,185 @@ const GlobalApp = {
             const colDiv = document.createElement('div');
             colDiv.className = 'column';
             colDiv.id = `col-${i}`;
-
+            
+            // Get charts for this column
             const chartIds = this.state.layout[i] || [];
             
+            // Dynamic Height Logic:
+            // If charts <= 4, they fit to screen (flex:1)
+            // If charts > 4, they get fixed height (300px) and column scrolls (if body allowed, but here body is global scroll)
+            
+            // Actually, we want the *Chart Cards* to size dynamically.
+            // We apply specific styles to the charts based on the count in this column.
+            
             chartIds.forEach(id => {
-                colDiv.appendChild(this.createChartDOM(id));
+                const el = this.createChartElement(id, chartIds.length);
+                colDiv.appendChild(el);
+                // Defer render to ensure DOM presence
+                setTimeout(() => ChartLogic.render(id), 10); 
             });
 
-            // Add "+" Button at bottom of column
+            // Add Button
             const addBtn = document.createElement('div');
-            addBtn.className = 'column-add-btn';
-            addBtn.innerHTML = '+ ADD CHART';
-            addBtn.onclick = () => this.addChartBtn(i);
+            addBtn.className = 'col-add-btn';
+            addBtn.innerHTML = '+ Add Chart';
+            addBtn.onclick = () => this.addChart(i);
             colDiv.appendChild(addBtn);
 
             container.appendChild(colDiv);
         }
+    },
 
-        this.recalculateHeights();
+    addChart(colIdx, forceId = null, forceConfig = null) {
+        const id = forceId || 'c_' + Date.now() + Math.random().toString(36).substr(2,5);
+        
+        // Register in State
+        this.state.charts[id] = {
+            col: colIdx,
+            config: forceConfig || {}, 
+            instance: null,
+            interval: null
+        };
+
+        if (!this.state.layout[colIdx]) this.state.layout[colIdx] = [];
+        if (!this.state.layout[colIdx].includes(id)) {
+            this.state.layout[colIdx].push(id);
+        }
+
+        // Re-render the specific column to recalculate heights
+        this.renderColumn(colIdx);
+
+        // Auto-plot if configured
+        if (forceConfig && forceConfig.root) {
+            setTimeout(() => ChartLogic.plot(id), 50);
+        }
+
+        this.saveToStorage();
     },
 
-    createChartDOM(id) {
+    removeChart(id) {
+        if(!confirm("Remove this chart?")) return;
+        
+        ChartLogic.stopLive(id);
+        if(this.state.charts[id].instance) this.state.charts[id].instance.destroy();
+
+        const colIdx = this.state.charts[id].col;
+        this.state.layout[colIdx] = this.state.layout[colIdx].filter(x => x !== id);
+        delete this.state.charts[id];
+
+        this.renderColumn(colIdx);
+        this.saveToStorage();
+    },
+
+    renderColumn(colIdx) {
+        const colDiv = document.getElementById(`col-${colIdx}`);
+        // If col doesn't exist (switching layouts), just full render
+        if(!colDiv) { this.renderGrid(); return; }
+        
+        colDiv.innerHTML = '';
+        const chartIds = this.state.layout[colIdx];
+        
+        chartIds.forEach(id => {
+            colDiv.appendChild(this.createChartElement(id, chartIds.length));
+            setTimeout(() => ChartLogic.render(id), 10);
+        });
+
+        const addBtn = document.createElement('div');
+        addBtn.className = 'col-add-btn';
+        addBtn.innerHTML = '+ Add Chart';
+        addBtn.onclick = () => this.addChart(colIdx);
+        colDiv.appendChild(addBtn);
+    },
+
+    createChartElement(id, totalInCol) {
         const div = document.createElement('div');
         div.className = 'chart-card';
         div.id = `card-${id}`;
-        
-        // Initial HTML
+
+        // Dynamic Height Calculation
+        // Viewport - Header (55) - Padding/Gap (~20)
+        // If total <= 4, calculate percent height to fill screen exactly
+        if (totalInCol <= 4 && totalInCol > 0) {
+            // Flex grow to fill the column container which is 100% height
+            div.style.flex = "1"; 
+            div.style.minHeight = "0"; // allow shrink
+        } else {
+            // More than 4, fix height to 300px, creating scroll
+            div.style.flex = "none";
+            div.style.height = "300px";
+        }
+
         div.innerHTML = `
             <div class="card-header">
-                <div class="card-title">
+                <div class="card-title" id="title-${id}">
                     <span class="status-dot"></span>
                     <span>New Chart</span>
                 </div>
                 <div class="card-actions">
                     <button class="icon-btn" onclick="ConfigModal.open('${id}')">⚙</button>
-                    <button class="icon-btn" onclick="GlobalApp.removeChart('${id}')">✕</button>
+                    <button class="icon-btn danger" onclick="GlobalApp.removeChart('${id}')">✕</button>
                 </div>
             </div>
             <div class="card-body" id="body-${id}">
                 <div class="empty-state">
-                    <button class="btn-accent" onclick="ConfigModal.open('${id}')">Configure Chart</button>
+                    <p>Select a Symbol</p>
+                    <button class="btn-accent" onclick="ConfigModal.open('${id}')">Configure</button>
                 </div>
             </div>
         `;
         return div;
     },
 
-    addChartBtn(colIdx) {
-        const id = this.addChartInternal(colIdx, null);
-        const colDiv = document.getElementById(`col-${colIdx}`);
-        const btn = colDiv.querySelector('.column-add-btn');
-        colDiv.insertBefore(this.createChartDOM(id), btn);
-        this.recalculateHeights();
-        this.saveToStorage();
-    },
-
-    removeChart(id) {
-        if(!confirm("Delete chart?")) return;
-        
-        ChartLogic.stopLive(id);
-        if(this.state.charts[id].instance) this.state.charts[id].instance.destroy();
-
-        const cIdx = this.state.charts[id].col;
-        this.state.layout[cIdx] = this.state.layout[cIdx].filter(x => x !== id);
-        delete this.state.charts[id];
-
-        document.getElementById(`card-${id}`).remove();
-        this.recalculateHeights();
-        this.saveToStorage();
-    },
-
-    // --- DYNAMIC HEIGHT CALCULATION ---
-    recalculateHeights() {
-        // Logic: 
-        // Viewport Height (minus header) = H
-        // Charts in column = N
-        // Height per chart = H / N
-        // Constraint: Max 4 charts visible. So Min Height = H / 4.
-        
-        const headerH = 50; 
-        const viewportH = window.innerHeight - headerH;
-        
-        for (let i = 0; i < this.state.columns; i++) {
-            const ids = this.state.layout[i];
-            const count = ids.length;
-            if(count === 0) continue;
-
-            // Calculate height
-            // If count <= 4, split equally (100%, 50%, 33%, 25%)
-            // If count > 4, keep at 25% (scrolling happens via main container)
-            let pct = 100 / count;
-            if (count > 4) pct = 25; // Floor at 25%
-
-            ids.forEach(id => {
-                const card = document.getElementById(`card-${id}`);
-                if(card) {
-                    card.style.height = `max(${pct}%, ${viewportH/4}px)`; 
-                    // Fallback pixel min-height just in case
-                    if(count === 1) card.style.height = '100%';
-                }
-            });
-            
-            // Note: Since .column uses flex display but no fixed height, 
-            // giving the children % heights relative to the column works if the column stretches.
-            // But here the Column is inside a scrolling container.
-            // Better approach: Set Pixel Height based on calculation.
-            
-            const pxHeight = Math.max(viewportH / count, viewportH / 4);
-            
-            ids.forEach(id => {
-                const card = document.getElementById(`card-${id}`);
-                if(card) {
-                    // Subtract small buffer for borders
-                    card.style.height = (count === 1) ? `${viewportH}px` : `${pxHeight}px`;
-                }
-            });
-        }
-    },
-
-    // --- GLOBAL CONTROLS ---
     onDateChange() {
         this.state.date = document.getElementById('globalDate').value;
+        // Auto-check live
         const today = new Date().toISOString().split('T')[0];
-        
-        // Auto switch mode check
-        if(this.state.date === today && this.state.mode !== 'LIVE') {
+        if(this.state.date === today) {
             this.state.mode = 'LIVE';
             document.getElementById('globalMode').value = 'LIVE';
-        } 
-        
+        }
         this.saveToStorage();
-        this.checkMode();
         Object.keys(this.state.charts).forEach(id => ChartLogic.plot(id));
     },
 
     onModeChange() {
         this.state.mode = document.getElementById('globalMode').value;
         this.saveToStorage();
-        this.checkMode();
-    },
-
-    checkMode() {
-        const isLive = (this.state.mode === 'LIVE');
         Object.keys(this.state.charts).forEach(id => {
-            if(isLive) ChartLogic.startLive(id);
+            if(this.state.mode === 'LIVE') ChartLogic.startLive(id);
             else ChartLogic.stopLive(id);
         });
     }
 };
 
-// Hook resize to recalc heights
-window.onresize = () => GlobalApp.recalculateHeights();
-
 /**
  * --- CHART LOGIC ---
  */
 const ChartLogic = {
     async plot(id, isUpdate=false) {
         const chartData = GlobalApp.state.charts[id];
+        if (!chartData || !chartData.config || !chartData.config.root) return;
         const cfg = chartData.config;
-        if (!cfg || !cfg.root) return;
 
-        // Update Header UI
-        const card = document.getElementById(`card-${id}`);
-        const titleEl = card.querySelector('.card-title');
-        const dotType = GlobalApp.state.mode === 'LIVE' ? 'live' : 'hist';
+        // UI Update
+        const titleEl = document.querySelector(`#card-${id} .card-title`);
+        if(!titleEl) return;
         
+        const dotClass = GlobalApp.state.mode === 'LIVE' ? 'live' : 'hist';
         titleEl.innerHTML = `
-            <span class="status-dot ${isUpdate ? 'retry' : dotType}"></span>
-            ${cfg.root} <span style="color:var(--accent)">${cfg.expiry}</span>
-            <span class="card-meta">${cfg.instrument} • ${cfg.timeframe}</span>
+            <span class="status-dot ${dotClass}" id="dot-${id}"></span>
+            ${cfg.root} <span style="color:var(--accent); margin-left:5px;">${cfg.expiry}</span>
+            <span class="card-meta" style="margin-left:5px;">${cfg.instrument} • ${cfg.timeframe}</span>
         `;
 
-        // Create Canvas if needed
         const body = document.getElementById(`body-${id}`);
-        if(!body.querySelector('canvas')) {
-            body.innerHTML = `<div style="position:relative; height:100%; width:100%;"><canvas id="canvas-${id}"></canvas></div>`;
+        if (!body.querySelector('canvas')) {
+            body.innerHTML = `<div class="chart-canvas"><canvas id="canvas-${id}"></canvas></div>`;
         }
 
-        // Live End Time Logic
-        let endTime = cfg.end;
-        if(GlobalApp.state.mode === 'LIVE') {
-            const now = new Date();
-            endTime = now.getHours().toString().padStart(2,'0') + ":" + now.getMinutes().toString().padStart(2,'0');
+        if(isUpdate) {
+            const dot = document.getElementById(`dot-${id}`);
+            if(dot) dot.classList.add('retry');
         }
 
         try {
@@ -844,69 +852,88 @@ const ChartLogic = {
                     instrument: cfg.instrument,
                     timeframe: cfg.timeframe,
                     start_time: cfg.start,
-                    end_time: endTime
+                    end_time: cfg.end
                 })
             });
             const data = await res.json();
 
-            if(data.error || !data.labels || !data.labels.length) {
+            // Handle No Data
+            if(data.error || !data.labels || data.labels.length === 0) {
                 if(GlobalApp.state.mode === 'LIVE') {
-                    // Retry mode, keep old chart
-                    return; 
+                     // Keep old data, remove retry class after a bit
+                     console.log(`[${id}] No new data`);
+                     return; 
                 } else {
-                    body.innerHTML = '<div class="empty-state">No Data Found</div>';
-                    if(chartData.instance) { chartData.instance.destroy(); chartData.instance = null; }
+                    if(chartData.instance) chartData.instance.destroy();
+                    body.innerHTML = '<div class="empty-state">No Data Available</div>';
                     return;
                 }
             }
 
-            // Restore Dot
-            titleEl.querySelector('.status-dot').className = `status-dot ${dotType}`;
+            if(isUpdate) {
+                 const dot = document.getElementById(`dot-${id}`);
+                 if(dot) dot.classList.remove('retry');
+            }
 
-            // Process Formulas
+            // Compute Datasets
             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);
-                    try { return new Function('return '+f)(); } catch{ return null; }
+                const computed = data.labels.map((_, i) => {
+                    const P = data.P[i] || 0, V = data.V[i] || 0, OI = data.OI[i] || 0;
+                    const 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);
+                    try { return new Function('return ' + f)(); } catch { return null; }
                 });
+
                 return {
-                    label: s.label, data: vals, borderColor: s.color, backgroundColor: s.color,
-                    borderWidth: 1.5, pointRadius: 0, hoverRadius: 4, tension: 0.1,
-                    yAxisID: s.axis==='left'?'y':'y1'
+                    label: s.label,
+                    data: computed,
+                    borderColor: s.color,
+                    backgroundColor: s.color,
+                    borderWidth: 1.5,
+                    pointRadius: 0,
+                    pointHoverRadius: 4,
+                    yAxisID: s.axis === 'left' ? 'y' : 'y1',
+                    tension: 0.1
                 };
             });
 
             this.renderCanvas(id, data.labels, datasets);
 
-        } catch(e) { console.error(e); }
+        } catch (e) {
+            console.error("Plot Error", e);
+        }
     },
 
     renderCanvas(id, labels, datasets) {
         const ctx = document.getElementById(`canvas-${id}`);
-        if(!ctx) return;
-        const cData = GlobalApp.state.charts[id];
+        if (!ctx) return;
+
+        const chartData = GlobalApp.state.charts[id];
         
-        if(cData.instance) {
-            cData.instance.data.labels = labels;
-            cData.instance.data.datasets = datasets;
-            cData.instance.update('none');
+        if (chartData.instance) {
+            chartData.instance.data.labels = labels;
+            chartData.instance.data.datasets = datasets;
+            chartData.instance.update('none'); 
         } else {
             const hasRight = datasets.some(d => d.yAxisID === 'y1');
-            cData.instance = new Chart(ctx.getContext('2d'), {
+            chartData.instance = new Chart(ctx.getContext('2d'), {
                 type: 'line',
                 data: { labels, datasets },
                 options: {
-                    responsive: true, maintainAspectRatio: false, animation: false,
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    animation: false,
                     interaction: { mode: 'index', intersect: false },
-                    plugins: { 
-                        legend: { display:false },
-                        tooltip: { backgroundColor:'rgba(13,17,23,0.9)', titleColor:'#e6edf3', bodyColor:'#e6edf3', borderColor:'#30363d', borderWidth:1 }
+                    plugins: {
+                        legend: { labels: { color: '#8b949e', font: {size:10} } },
+                        tooltip: { backgroundColor: 'rgba(22, 27, 34, 0.95)', titleColor:'#e6edf3', bodyColor:'#e6edf3', borderColor:'#30363d', borderWidth:1 }
                     },
                     scales: {
-                        x: { grid:{color:'#30363d', tickLength:0}, ticks:{color:'#8b949e', maxTicksLimit:8} },
-                        y: { type:'linear', display:true, position:'left', grid:{color:'#30363d'}, ticks:{color:'#8b949e'} },
-                        y1: { type:'linear', display:hasRight, position:'right', grid:{display:false}, ticks:{color:'#8b949e'} }
+                        x: { grid: { color: '#30363d', tickLength: 0 }, ticks: { color: '#8b949e', maxTicksLimit: 8 } },
+                        y: { type: 'linear', display: true, position: 'left', grid: { color: '#30363d' }, ticks: { color: '#8b949e' } },
+                        y1: { type: 'linear', display: hasRight, position: 'right', grid: { display: false }, ticks: { color: '#8b949e' } }
                     }
                 }
             });
@@ -915,17 +942,28 @@ const ChartLogic = {
 
     startLive(id) {
         this.stopLive(id);
-        const c = GlobalApp.state.charts[id];
-        // Plot immediately then interval
-        if(c.config.root) this.plot(id);
-        c.interval = setInterval(() => {
-            if(c.config.root) this.plot(id, true);
+        this.plot(id);
+        GlobalApp.state.charts[id].interval = setInterval(() => {
+            this.plot(id, true);
         }, 15000);
     },
 
     stopLive(id) {
         const c = GlobalApp.state.charts[id];
-        if(c && c.interval) { clearInterval(c.interval); c.interval = null; }
+        if(c && c.interval) {
+            clearInterval(c.interval);
+            c.interval = null;
+        }
+    },
+
+    render(id) {
+        const c = GlobalApp.state.charts[id];
+        if(c.config && c.config.root) {
+            if(c.instance) c.instance.destroy();
+            c.instance = null;
+            this.plot(id);
+            if(GlobalApp.state.mode === 'LIVE') this.startLive(id);
+        }
     }
 };
 
@@ -933,125 +971,137 @@ const ChartLogic = {
  * --- CONFIG MODAL ---
  */
 const ConfigModal = {
-    currId: null,
+    currentId: null,
     isGlobal: false,
 
     async open(id) {
-        this.currId = id;
+        this.currentId = id;
         this.isGlobal = false;
+        document.getElementById('cfgModalTitle').textContent = "Configure Chart";
         document.getElementById('configModalOverlay').style.display = 'flex';
-        document.getElementById('cfgModalTitle').innerText = "Configure Chart";
         document.getElementById('cfgForm').style.display = 'block';
 
-        const cfg = GlobalApp.state.charts[id].config;
-        await this.loadRoots(cfg.root);
+        const c = GlobalApp.state.charts[id].config;
+        await this.loadRoots(c.root);
         
-        document.getElementById('cfgTF').value = cfg.timeframe || '1min';
-        document.getElementById('cfgStart').value = cfg.start || '09:15';
-        document.getElementById('cfgEnd').value = cfg.end || '15:30';
+        document.getElementById('cfgTF').value = c.timeframe || '1min';
+        document.getElementById('cfgStart').value = c.start || '09:15';
+        document.getElementById('cfgEnd').value = c.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);
+        const series = c.series && c.series.length ? c.series : GlobalApp.defaults;
+        this.renderSeries(series);
+
+        if(c.root) {
+             document.getElementById('cfgRoot').value = c.root;
+             await this.onRootChange(c.expiry, c.instrument);
         }
     },
 
     openDefaults() {
         this.isGlobal = true;
+        document.getElementById('cfgModalTitle').textContent = "Global Settings";
         document.getElementById('configModalOverlay').style.display = 'flex';
-        document.getElementById('cfgModalTitle').innerText = "Global Default Series";
-        // Hide top part
-        document.getElementById('cfgForm').style.display = 'block'; 
-        // We really should hide inputs but for simplicity keeping logic
+        // Hack: keep form visible but maybe ignore inputs. Just series list matters.
         this.renderSeries(GlobalApp.defaults);
     },
 
     close() { document.getElementById('configModalOverlay').style.display = 'none'; },
 
-    async loadRoots(pre) {
-        const sel = document.getElementById('cfgRoot');
-        sel.innerHTML = '<option>Loading...</option>';
+    async loadRoots(preSelect) {
+        const rSel = document.getElementById('cfgRoot');
+        rSel.innerHTML = '<option>Loading...</option>';
         try {
-            const d = GlobalApp.state.date;
-            const res = await fetch(`/api/roots?date=${d}`);
+            const date = GlobalApp.state.date;
+            const res = await fetch(`/api/roots?date=${date}`);
             const roots = await res.json();
-            sel.innerHTML = `<option value="">-- Select Symbol --</option>` + roots.map(r=>`<option>${r}</option>`).join('');
-            if(pre && roots.includes(pre)) sel.value = pre;
-        } catch(e){ sel.innerHTML='<option>Error</option>'; }
+            rSel.innerHTML = `<option value="">-- Select --</option>` + roots.map(r => `<option>${r}</option>`).join('');
+            if(preSelect && roots.includes(preSelect)) rSel.value = preSelect;
+        } catch(e) { rSel.innerHTML = '<option>Error</option>'; }
     },
 
     async onRootChange(preExp, preInst) {
         const root = document.getElementById('cfgRoot').value;
-        const d = GlobalApp.state.date;
+        const date = GlobalApp.state.date;
         const eSel = document.getElementById('cfgExp');
         eSel.innerHTML = '<option>Loading...</option>';
-
-        const res = await fetch(`/api/expiries?date=${d}&root=${root}`);
+        
+        const res = await fetch(`/api/expiries?date=${date}&root=${root}`);
         const exps = await res.json();
-        eSel.innerHTML = `<option value="">-- Select --</option>` + exps.map(e=>`<option>${e}</option>`).join('');
-
+        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 {
-            // Auto defaults
-            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);
-            }
+             // Smart Auto Select
+             const auto = await fetch(`/api/auto_config?date=${date}&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 date = 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 res = await fetch(`/api/instruments?date=${date}&root=${root}&expiry=${exp}`);
         const insts = await res.json();
-        iSel.innerHTML = insts.map(i=>`<option>${i}</option>`).join('');
+        iSel.innerHTML = `<option value="">-- Select --</option>` + insts.map(i => `<option>${i}</option>`).join('');
+        
         if(preInst && insts.includes(preInst)) iSel.value = preInst;
+        else if(insts.length > 0) iSel.value = insts[0];
     },
 
     renderSeries(list) {
-        const div = document.getElementById('cfgSeriesList');
-        div.innerHTML = '';
+        const container = document.getElementById('cfgSeriesList');
+        container.innerHTML = '';
         list.forEach(s => {
-            const r = document.createElement('div');
-            r.className = 'series-row';
-            r.innerHTML = `
+            const div = document.createElement('div');
+            div.className = 'series-row';
+            div.innerHTML = `
                 <input type="color" value="${s.color}" class="s-color">
                 <input type="text" value="${s.formula}" class="s-formula" placeholder="$P">
                 <input type="text" value="${s.label}" class="s-label" placeholder="Label">
-                <select class="s-axis"><option value="left" ${s.axis==='left'?'selected':''}>L</option><option value="right" ${s.axis==='right'?'selected':''}>R</option></select>
-                <button class="btn-danger" onclick="this.parentElement.remove()">✕</button>
+                <select class="s-axis">
+                    <option value="left" ${s.axis==='left'?'selected':''}>L</option>
+                    <option value="right" ${s.axis==='right'?'selected':''}>R</option>
+                </select>
+                <button class="icon-btn danger" onclick="this.parentElement.remove()">✕</button>
             `;
-            div.appendChild(r);
+            container.appendChild(div);
         });
     },
 
     addSeriesRow() {
-        const div = document.getElementById('cfgSeriesList');
-        const r = document.createElement('div');
-        r.className = 'series-row';
-        r.innerHTML = `
+        const container = document.getElementById('cfgSeriesList');
+        const div = document.createElement('div');
+        div.className = 'series-row';
+        div.innerHTML = `
             <input type="color" value="#ffffff" class="s-color">
             <input type="text" value="$P" class="s-formula">
             <input type="text" value="New" class="s-label">
             <select class="s-axis"><option value="left">L</option><option value="right">R</option></select>
-            <button class="btn-danger" onclick="this.parentElement.remove()">✕</button>
+            <button class="icon-btn danger" onclick="this.parentElement.remove()">✕</button>
         `;
-        div.appendChild(r);
+        container.appendChild(div);
+    },
+
+    insertVar(v) {
+        const inputs = document.querySelectorAll('.s-formula');
+        if(inputs.length > 0) {
+            const last = inputs[inputs.length-1];
+            last.value = last.value + v;
+        }
     },
 
     save() {
         const rows = document.querySelectorAll('#cfgSeriesList .series-row');
-        const series = Array.from(rows).map(r => ({
+        const newSeries = Array.from(rows).map(r => ({
             color: r.querySelector('.s-color').value,
             formula: r.querySelector('.s-formula').value,
             label: r.querySelector('.s-label').value,
@@ -1059,35 +1109,32 @@ const ConfigModal = {
         }));
 
         if(this.isGlobal) {
-            GlobalApp.defaults = series;
-            document.getElementById('toast').innerText = "Defaults Saved";
+            GlobalApp.defaults = newSeries;
+            GlobalApp.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) { alert("Incomplete details"); return; }
             
-            const cfg = {
+            if(!root || !exp || !inst) { alert("Incomplete Selection"); 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
+                series: newSeries
             };
-            
-            GlobalApp.state.charts[this.currId].config = cfg;
+
+            GlobalApp.state.charts[this.currentId].config = config;
             GlobalApp.saveToStorage();
-            ChartLogic.plot(this.currId);
-            if(GlobalApp.state.mode === 'LIVE') ChartLogic.startLive(this.currId);
+            ChartLogic.render(this.currentId); 
+            GlobalApp.showToast("Chart Updated");
         }
-        
-        document.getElementById('toast').classList.add('show');
-        setTimeout(()=>document.getElementById('toast').classList.remove('show'), 2000);
         this.close();
     }
 };
 
-// Init
 window.onload = () => GlobalApp.init();
 
 </script>