Update app.py

app.py

@@ -5,7 +5,7 @@ import asyncio
 from datetime import timedelta
 from fastapi import FastAPI, Body
 from fastapi.responses import HTMLResponse, JSONResponse
-from typing import Optional
+from typing import Optional, List
 
 # ==========================================
 # 1. CONFIGURATION
@@ -73,7 +73,6 @@ def get_auto_config(date: str, root: str):
     root = root.upper()
     exps_data = sb_rpc("get_expiries_for_root", {"p_date": date, "p_root": root})
     all_expiries = [row['expiry_date'] for row in exps_data if row['expiry_date'] != 'MARKET']
-    
     valid_expiries = [e for e in all_expiries if e >= date]
     if not valid_expiries: valid_expiries = all_expiries
 
@@ -89,6 +88,7 @@ def get_auto_config(date: str, root: str):
     if len(valid_expiries) > 0:
         exp_c = valid_expiries[0]
         response["current"] = {"expiry": exp_c, "instrument": find_fut_rpc(exp_c)}
+
     if len(valid_expiries) > 1:
         exp_n = valid_expiries[1]
         response["next"] = {"expiry": exp_n, "instrument": find_fut_rpc(exp_n)}
@@ -104,17 +104,14 @@ def get_expiries(date: str, root: str):
 def get_instruments(date: str, root: str, expiry: str):
     data = sb_rpc("get_instruments_for_expiry", {"p_date": date, "p_root": root.upper(), "p_expiry": expiry})
     instruments = [row['instrument_name'] for row in data]
-        
-    spot_fut =[]
-    options =[]
+    spot_fut, options = [], []
     for i in instruments:
         if i.endswith('CE') or i.endswith('PE'): options.append(i)
         else: spot_fut.append(i)
-            
     return JSONResponse({"spot_fut": sorted(spot_fut), "options": sorted(options)})
 
 # ==========================================
-# 4. API ROUTES - DATA FETCHING 
+# 4. API ROUTES - DATA FETCHING & EGRESS OPTIMIZATION
 # ==========================================
 
 @app.post("/api/fetch_series")
@@ -128,46 +125,49 @@ async def fetch_series(
     end_time: str = Body(...),
     mode: str = Body("normal"),
     atm_range: int = Body(5),
-    req_vars: list = Body(["P", "CB", "CS", "PB", "PS"])
+    formulas: List[str] = Body([])
 ):
     root = root.upper()
     t_start_dt = pd.to_datetime(f"{date} {start_time}:00")
     t_end_dt = pd.to_datetime(f"{date} {end_time}:59")
+
+    # Parse Formulas to ONLY return requested data (Huge EGRESS Saver)
+    req_vars = set()
+    for f in formulas:
+        if "$CB" in f: req_vars.add("cb")
+        if "$CS" in f: req_vars.add("cs")
+        if "$PB" in f: req_vars.add("pb")
+        if "$PS" in f: req_vars.add("ps")
+        if "$B" in f: req_vars.add("buy_qty")
+        if "$S" in f: req_vars.add("sell_qty")
+        if "$V" in f: req_vars.add("volume")
+        if "$OI" in f: req_vars.add("oi")
+    req_vars.add("price") # Always mandatory
     
     if mode == "advanced":
         inst_data = sb_rpc("get_instruments_for_expiry", {"p_date": date, "p_root": root, "p_expiry": expiry})
         instruments = [r['instrument_name'] for r in inst_data]
-        if not instruments:
-            return JSONResponse({"error": f"No data found for expiry {expiry}", "labels": [], "P":[]})
+        if not instruments: return JSONResponse({"error": f"No data found for expiry {expiry}", "labels":[]})
         
         ref_instrument = instrument
         if not ref_instrument:
             spot_keys =[k for k in instruments if k.endswith('-INDEX') or k.endswith('-EQ')]
-            fut_keys = [k for k in instruments if 'FUT' in k]
+            fut_keys =[k for k in instruments if 'FUT' in k]
             if spot_keys: ref_instrument = spot_keys[0]
             elif fut_keys: ref_instrument = fut_keys[0]
             else: ref_instrument = instruments[0]
 
         rpc_name = "get_advanced_chart_data"
         base_params = {
-            "p_root": root,
-            "p_expiry": expiry,
-            "p_ref_instrument": ref_instrument,
-            "p_atm_range": atm_range,
-            "p_req_vars": req_vars
+            "p_root": root, "p_expiry": expiry, "p_ref_instrument": ref_instrument,
+            "p_atm_range": atm_range, "p_strike_map": {} 
         }
     else:
-        if not instrument:
-            return JSONResponse({"error": "No Instrument Selected.", "labels": [], "P":[]})
+        if not instrument: return JSONResponse({"error": "No Instrument Selected.", "labels": []})
         rpc_name = "get_normal_chart_data"
-        base_params = {
-            "p_root": root,
-            "p_expiry": expiry,
-            "p_instrument": instrument,
-            "p_req_vars": req_vars
-        }
+        base_params = {"p_root": root, "p_expiry": expiry, "p_instrument": instrument}
 
-    # CHUNKING LOGIC: Bypass DB Limits (Concurrent 2hr fetch)
+    # Parallel Database Chunking
     async def fetch_chunk(start_dt, end_dt):
         params = base_params.copy()
         params["p_start_time"] = start_dt.strftime("%Y-%m-%d %H:%M:%S")
@@ -175,7 +175,7 @@ async def fetch_series(
         loop = asyncio.get_event_loop()
         return await loop.run_in_executor(None, sb_rpc, rpc_name, params)
 
-    tasks =[]
+    tasks = []
     curr = t_start_dt
     chunk_hours = 2
 
@@ -187,38 +187,42 @@ async def fetch_series(
         
     chunk_results = await asyncio.gather(*tasks)
     
-    all_records =[]
+    all_records = []
     for res in chunk_results:
         if isinstance(res, list): all_records.extend(res)
 
-    if not all_records:
-         return JSONResponse({"error": "No valid data found in range.", "labels": [], "P":[]})
+    if not all_records: return JSONResponse({"error": "No valid data found in range.", "labels":[]})
 
-    # =========================================================
-    # DATA PROCESSING: Last Valid Value Logic 
-    # =========================================================
+    # Pandas Processing using .last() for Depth Tracking
     df = pd.DataFrame(all_records)
-    df.rename(columns={"tick_ts": "ts"}, inplace=True)
+    df.rename(columns={"tick_ts": "ts", "b_qty": "buy_qty", "s_qty": "sell_qty", "vol": "volume"}, inplace=True)
     df['ts'] = pd.to_datetime(df['ts'])
     df.drop_duplicates(subset=['ts'], inplace=True)
     df.set_index('ts', inplace=True)
     df.sort_index(inplace=True)
     
-    tf_map = {
-        "1min": "1min", "3min": "3min", "5min": "5min", 
-        "15min": "15min", "30min": "30min", "1hour": "1h"
-    }
+    tf_map = {"1min": "1min", "3min": "3min", "5min": "5min", "15min": "15min", "30min": "30min", "1hour": "1h"}
     panda_tf = tf_map.get(timeframe, "1min")
     
-    # Strictly take the "last" value to replicate the end-of-candle snapshot!
-    agg_dict = {col: "last" for col in df.columns}
+    # Using Last Valid values for pure depth aggregation
+    agg_dict = {}
+    for col in req_vars:
+        if col in df.columns: agg_dict[col] = "last"
+
     resampled = df.resample(panda_tf).agg(agg_dict).ffill().fillna(0)
     
-    # Standardize uppercase to frontend
     response_data = {"labels": resampled.index.strftime('%H:%M').tolist()}
-    for col in["p", "b", "s", "v", "oi", "cb", "cs", "pb", "ps"]:
-        if col in resampled.columns: response_data[col.upper()] = resampled[col].tolist()
-        else: response_data[col.upper()] =[]
+    
+    # Return ONLY mapped variables directly
+    if "price" in resampled: response_data["P"] = resampled["price"].tolist()
+    if "buy_qty" in resampled: response_data["B"] = resampled["buy_qty"].tolist()
+    if "sell_qty" in resampled: response_data["S"] = resampled["sell_qty"].tolist()
+    if "volume" in resampled: response_data["V"] = resampled["volume"].tolist()
+    if "oi" in resampled: response_data["OI"] = resampled["oi"].tolist()
+    if "cb" in resampled: response_data["CB"] = resampled["cb"].tolist()
+    if "cs" in resampled: response_data["CS"] = resampled["cs"].tolist()
+    if "pb" in resampled: response_data["PB"] = resampled["pb"].tolist()
+    if "ps" in resampled: response_data["PS"] = resampled["ps"].tolist()
     
     return JSONResponse(response_data)
 
@@ -237,6 +241,7 @@ HTML_TEMPLATE = """
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
+        /* --- THEME --- */
         :root {
             --bg-body: #0d1117; --bg-header: #161b22; --bg-card: #0d1117; 
             --bg-panel: #21262d; --bg-input: #161b22; --border: #30363d;
@@ -248,79 +253,83 @@ HTML_TEMPLATE = """
         body { background: var(--bg-body); color: var(--text-primary); font-family: var(--font-main); display: flex; flex-direction: column; height: 100vh; overflow: hidden; font-size: 13px; }
         ::-webkit-scrollbar { width: 8px; height: 8px; }
         ::-webkit-scrollbar-track { background: var(--bg-body); }
-        ::-webkit-scrollbar-thumb { background: var(--bg-panel); border-radius: 4px; }
+        ::-webkit-scrollbar-thumb { background: var(--bg-panel); border: 2px solid var(--bg-body); border-radius: 6px; }
 
+        /* HEADER */
         .top-bar { height: 52px; background: var(--bg-header); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex-shrink: 0; }
-        .brand { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
+        .brand { font-weight: 700; font-size: 15px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
         .brand span { color: var(--accent); background: rgba(47, 129, 247, 0.15); padding: 2px 6px; border-radius: 4px; font-size: 11px; }
         .controls { display: flex; align-items: center; gap: 12px; }
 
         select, button, input { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 0 12px; height: 32px; border-radius: 6px; font-size: 12px; cursor: pointer; transition: 0.2s; }
-        select:focus, input:focus { border-color: var(--accent); }
-        button:hover { background: var(--bg-panel); }
+        select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(47,129,247,0.2); }
+        button:hover { background: var(--bg-panel); border-color: var(--border-hover); }
         button.primary { background: var(--accent); border-color: var(--accent); color: white; }
         button.primary:hover { background: #58a6ff; }
         button.danger { color: var(--danger); border-color: var(--border); background: transparent; }
+        button.danger:hover { background: rgba(218, 54, 51, 0.1); }
 
         .layout-toggle { display: flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 2px; }
         .layout-btn { width: 30px; height: 26px; border: none; background: transparent; color: var(--text-secondary); border-radius: 4px; }
-        .layout-btn.active { background: var(--bg-panel); color: var(--accent); }
+        .layout-btn.active { background: var(--bg-panel); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
 
+        /* GRID */
         .main-container { flex: 1; display: flex; overflow-y: auto; overflow-x: hidden; }
         .column { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--border); min-width: 0; }
         .add-chart-btn { height: 40px; border: none; border-top: 1px dashed var(--border); background: transparent; color: var(--text-secondary); width: 100%; font-weight: 600; }
         .add-chart-btn:hover { background: var(--bg-panel); color: var(--text-primary); }
 
+        /* CARD */
         .chart-card { background: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; position: relative; }
         .card-header { height: 38px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: var(--bg-header); flex-shrink: 0; }
-        .card-info { display: flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 600; }
+        .card-info { display: flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; }
         .inst-label { color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
+        
         .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); }
         .status-dot.live { background: #3fb950; box-shadow: 0 0 6px rgba(63, 185, 80, 0.6); animation: pulse 2s infinite; }
-        .status-dot.hist { background: var(--accent); }
         @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }
 
-        .tool-btn { width: 26px; height: 26px; border: none; background: transparent; color: var(--text-secondary); border-radius: 4px; display:inline-flex; align-items:center; justify-content:center; }
+        .tool-btn { width: 24px; height: 24px; border: none; background: transparent; color: var(--text-secondary); border-radius: 4px; }
         .tool-btn:hover { background: var(--bg-panel); color: var(--text-primary); }
-
         .card-body { flex: 1; position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
         .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); text-align: center; }
 
+        /* MODALS */
         .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 100; display: none; justify-content: center; align-items: center; }
-        .modal { background: var(--bg-header); border: 1px solid var(--border); border-radius: 10px; width: 560px; max-width: 95%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
+        .modal { background: var(--bg-header); border: 1px solid var(--border); border-radius: 10px; width: 620px; max-width: 95%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
         .modal-head { padding: 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; font-weight: 700; }
         .modal-body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
-        .modal-foot { padding: 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
+        .modal-foot { padding: 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--bg-card); }
         
         .form-section label { font-size: 11px; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; margin-bottom: 6px; display: block; }
         
+        /* DATA TABLE MODAL */
+        .table-wrap { overflow-y: auto; max-height: 400px; border: 1px solid var(--border); border-radius: 6px; }
+        .data-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; text-align: right; }
+        .data-table th, .data-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
+        .data-table th { background: var(--bg-panel); position: sticky; top: 0; color: var(--text-secondary); font-weight: bold; }
+        .data-table tr:hover { background: var(--bg-input); }
+
+        /* DROPDOWN */
         .input-wrapper { position: relative; width: 100%; }
-        .input-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-secondary); font-size: 10px; }
-        .custom-dd { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; max-height: 200px; overflow-y: auto; z-index: 1000; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.5); margin-top: 4px; }
+        .custom-dd { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; max-height: 200px; overflow-y: auto; z-index: 1000; display: none; margin-top: 4px; }
         .custom-dd-opt { padding: 8px 12px; font-size: 12px; cursor: pointer; color: var(--text-primary); border-bottom: 1px solid var(--border); }
         .custom-dd-opt:hover { background: var(--bg-input); color: var(--accent); }
-        .custom-dd-group { padding: 6px 12px; font-size: 10px; font-weight: 700; color: var(--text-secondary); background: var(--bg-body); }
+        .custom-dd-group { padding: 6px 12px; font-size: 10px; font-weight: 700; color: var(--text-secondary); background: var(--bg-body); text-transform: uppercase; }
 
+        /* SERIES CONFIG ROW */
         .series-row { background: var(--bg-panel); padding: 12px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 10px; }
-        .series-row-top, .series-row-bottom { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
-        .series-row-bottom { margin-bottom: 0; }
-
-        .s-form, .s-lbl, .s-lbl1, .s-lbl2, .s-thresh { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); border-radius: 6px; padding: 0 10px; height: 32px; font-size: 12px; }
-        .color-input { padding: 0; width: 32px; border: 1px solid var(--border); background: var(--bg-input); height: 32px; cursor: pointer; border-radius: 6px; overflow: hidden; }
+        .series-row-top { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
+        .series-row-bottom { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+        .s-form, .s-lbl, .s-axis, .s-cond, .s-thresh, .s-text { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); border-radius: 6px; padding: 0 10px; height: 32px; font-size: 12px; }
+        .color-input { padding: 0; width: 36px; border: 1px solid var(--border); background: var(--bg-input); height: 32px; cursor: pointer; border-radius: 6px; overflow: hidden; }
         .color-input::-webkit-color-swatch-wrapper { padding: 0; }
         .color-input::-webkit-color-swatch { border: none; }
+        .s-cond-group { display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,0.2); padding: 6px 10px; border-radius: 6px; border: 1px dashed var(--border); flex: 1; flex-wrap:wrap;}
 
-        .s-cond-group { display: flex; gap: 6px; align-items: center; background: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 6px; border: 1px dashed var(--border); flex: 1; }
-        .s-cond-solid { display: flex; gap: 6px; align-items: center; flex: 1; }
-
-        .segmented-control { display: flex; background: var(--bg-body); border: 1px solid var(--border); border-radius: 6px; padding: 2px; overflow: hidden; margin-bottom: 6px; }
+        .segmented-control { display: flex; background: var(--bg-body); border: 1px solid var(--border); border-radius: 6px; padding: 2px; }
         .seg-btn { flex: 1; text-align: center; padding: 6px 0; font-size: 11px; font-weight: 600; color: var(--text-secondary); cursor: pointer; border: none; background: transparent; border-radius: 4px; }
         .seg-btn.active { background: var(--bg-panel); color: var(--accent); }
-        
-        .ins-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
-        .ins-table th { background: var(--bg-panel); color: var(--text-secondary); padding: 8px; text-align: right; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--border); }
-        .ins-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: right; }
-        .ins-table tr:hover { background: rgba(255,255,255,0.05); }
     </style>
 </head>
 <body>
@@ -338,10 +347,9 @@ HTML_TEMPLATE = """
         </div>
         <div style="width:1px; height: 20px; background: var(--border);"></div>
         <div class="layout-toggle">
-            <button class="layout-btn" onclick="App.setLayout(1)">1</button>
+            <button class="layout-btn active" onclick="App.setLayout(1)">1</button>
             <button class="layout-btn" onclick="App.setLayout(2)">2</button>
-            <button class="layout-btn active" onclick="App.setLayout(3)">3</button>
-            <button class="layout-btn" onclick="App.setLayout(4)">4</button>
+            <button class="layout-btn" onclick="App.setLayout(3)">3</button>
         </div>
         <button onclick="Config.openDefaults()">Settings</button>
         <button class="danger" onclick="App.reset()">Reset</button>
@@ -350,6 +358,21 @@ HTML_TEMPLATE = """
 
 <div class="main-container" id="gridRoot"></div>
 
+<!-- CALCULATION BREAKDOWN MODAL -->
+<div class="modal-backdrop" id="breakdownModal">
+    <div class="modal">
+        <div class="modal-head">
+            <span>Calculation Breakdown (Data Inspector)</span>
+            <button class="tool-btn" onclick="Breakdown.close()">✕</button>
+        </div>
+        <div class="modal-body">
+            <div class="table-wrap">
+                <table class="data-table" id="breakdownTable"></table>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- CONFIG MODAL -->
 <div class="modal-backdrop" id="configModal">
     <div class="modal">
@@ -374,14 +397,14 @@ HTML_TEMPLATE = """
                             <label>Symbol</label>
                             <div class="input-wrapper">
                                 <input type="text" id="cfgRoot" onfocus="CustomDD.open('cfgRoot')" oninput="CustomDD.filter('cfgRoot')" style="width:100%; text-transform: uppercase;" placeholder="Type or select..." autocomplete="off">
-                                <div class="custom-dd" id="dd-cfgRoot"></div>
+                                <div id="dd-cfgRoot" class="custom-dd"></div>
                             </div>
                         </div>
                         <div class="form-section">
                             <label>Expiry</label>
                             <div class="input-wrapper">
                                 <input type="text" id="cfgExp" onfocus="CustomDD.open('cfgExp')" oninput="CustomDD.filter('cfgExp')" style="width:100%; text-transform: uppercase;" placeholder="Type or select..." autocomplete="off">
-                                <div class="custom-dd" id="dd-cfgExp"></div>
+                                <div id="dd-cfgExp" class="custom-dd"></div>
                             </div>
                         </div>
                     </div>
@@ -390,7 +413,7 @@ HTML_TEMPLATE = """
                         <label>Mode</label>
                         <div class="segmented-control" id="cfgModeToggle">
                             <button class="seg-btn active" onclick="Config.setMode('normal')">Normal Mode</button>
-                            <button class="seg-btn" onclick="Config.setMode('advanced')">Advanced ATM Mode</button>
+                            <button class="seg-btn" onclick="Config.setMode('advanced')">Advanced Mode</button>
                         </div>
                     </div>
 
@@ -398,14 +421,14 @@ HTML_TEMPLATE = """
                         <label id="lblInst">Instrument</label>
                         <div class="input-wrapper">
                             <input type="text" id="cfgInst" onfocus="CustomDD.open('cfgInst')" oninput="CustomDD.filter('cfgInst')" style="width:100%; text-transform: uppercase;" placeholder="Type or select..." autocomplete="off">
-                            <div class="custom-dd" id="dd-cfgInst"></div>
+                            <div id="dd-cfgInst" class="custom-dd"></div>
                         </div>
                     </div>
 
                     <div id="cfgAdvancedFields" style="display:none;">
                         <div class="form-section" style="margin-top:12px;">
                             <label style="color:var(--accent);">ATM (+/-) Strike Range</label>
-                            <input type="number" id="cfgAtmRange" value="5" min="1" style="width:100%;">
+                            <input type="number" id="cfgAtmRange" value="5" min="1" max="50" style="width:100%;">
                         </div>
                     </div>
 
@@ -413,32 +436,35 @@ HTML_TEMPLATE = """
                         <div class="form-section">
                             <label>Timeframe</label>
                             <select id="cfgTF" style="width:100%">
-                                <option value="1min">1 Minute</option>
-                                <option value="3min">3 Minutes</option>
-                                <option value="5min">5 Minutes</option>
-                                <option value="15min">15 Minutes</option>
+                                <option value="1min">1 Minute</option><option value="3min">3 Minutes</option>
+                                <option value="5min">5 Minutes</option><option value="15min">15 Minutes</option>
                             </select>
                         </div>
                         <div class="form-section">
-                            <label>Range</label>
+                            <label>Range (HH:MM)</label>
                             <div style="display:flex; gap:8px;">
-                                <input type="time" id="cfgStart" value="09:15">
-                                <input type="time" id="cfgEnd" value="15:30">
+                                <input type="time" id="cfgStart" value="09:15"><input type="time" id="cfgEnd" value="15:30">
                             </div>
                         </div>
                     </div>
+                    <div style="height:1px; background:var(--border); margin: 12px 0;"></div>
                 </div>
 
-                <div class="form-section" style="background:var(--bg-panel); padding:10px; border-radius:6px; margin-top: 12px;">
-                    <label>Quick Configurations</label>
+                <!-- PRESETS -->
+                <div class="form-section" style="background:var(--bg-panel); padding:10px; border-radius:6px; border:1px solid var(--border); margin-bottom: 12px;">
+                    <label>Pre-built Models</label>
                     <div style="display:flex; gap:8px;">
+                        <select id="cfgPresetsGroup" onchange="Config.updatePresetsDropdown()" style="flex:1;">
+                            <option value="Normal - Options">Normal - Options</option>
+                            <option value="Normal - Futures">Normal - Futures / Eq</option>
+                            <option value="Advanced - Options">Advanced - Options</option>
+                        </select>
                         <select id="cfgPresetsDropdown" style="flex:1;" onchange="Config.loadPreset()"></select>
-                        <button class="primary" onclick="Config.savePreset()">Save</button>
                     </div>
                 </div>
 
-                <div class="form-section" style="margin-top:12px;">
-                    <label>Plot Series <span style="font-size:10px; text-transform:none; color:var(--text-secondary);">(Supports CB, CS, PB, PS, B, S, P, V, OI)</span></label>
+                <div class="form-section">
+                    <label>Plot Series</label>
                     <div id="cfgSeries"></div>
                     <button style="width:100%; border:1px dashed var(--border); background:transparent; color:var(--text-secondary); height:32px; font-weight:600;" onclick="Config.addSeriesRow()">+ Add Line</button>
                 </div>
@@ -446,607 +472,418 @@ HTML_TEMPLATE = """
         </div>
         <div class="modal-foot">
             <button style="background:transparent; border:1px solid var(--border); color:var(--text-primary);" onclick="Config.close()">Cancel</button>
-            <button class="primary" onclick="Config.saveChartConfig()">Save</button>
-        </div>
-    </div>
-</div>
-
-<!-- INSPECTION MODAL -->
-<div class="modal-backdrop" id="inspectionModal">
-    <div class="modal" style="width: 800px; max-width: 95%;">
-        <div class="modal-head">
-            <span>Calculation Breakdown</span>
-            <button class="tool-btn" onclick="document.getElementById('inspectionModal').style.display='none'">✕</button>
-        </div>
-        <div class="modal-body" style="padding:0; max-height: 60vh;">
-            <table class="ins-table" id="inspectionTable"></table>
+            <button class="primary" onclick="Config.saveChartConfig()">Save Configuration</button>
         </div>
     </div>
 </div>
 
 <script>
-document.addEventListener('click', (e) => {
-    if (!e.target.closest('.input-wrapper')) {
-        document.querySelectorAll('.custom-dd').forEach(el => el.style.display = 'none');
+// --- CORE PRESETS DEFINITION ---
+const PRESETS = {
+    "Normal - Futures": {
+        "Basic Flow": [
+            { formula: '$P', label: 'Price', axis: 'left', cond: 'none', color1: '#2f81f7' },
+            { formula: '$B', label: 'Buy Qty', axis: 'right', cond: 'none', color1: '#238636' },
+            { formula: '$S', label: 'Sell Qty', axis: 'right', cond: 'none', color1: '#da3633' }
+        ],
+        "Net Flow": [
+            { formula: '$P', label: 'Price', axis: 'left', cond: 'none', color1: '#2f81f7' },
+            { formula: '$B - $S', label: 'Net Flow', axis: 'right', cond: '>', thresh: '0', color1: '#238636', color2: '#da3633', labelTrue: 'BUY', labelFalse: 'SELL' }
+        ]
+    },
+    "Normal - Options": {
+        "Call Flow": [
+            { formula: '$P', label: 'Price', axis: 'left', cond: 'none', color1: '#2f81f7' },
+            { formula: '$CB', label: 'Call Buy', axis: 'right', cond: 'none', color1: '#238636' },
+            { formula: '$CS', label: 'Call Sell', axis: 'right', cond: 'none', color1: '#da3633' }
+        ],
+        "Put Flow": [
+            { formula: '$P', label: 'Price', axis: 'left', cond: 'none', color1: '#2f81f7' },
+            { formula: '$PB', label: 'Put Buy', axis: 'right', cond: 'none', color1: '#238636' },
+            { formula: '$PS', label: 'Put Sell', axis: 'right', cond: 'none', color1: '#da3633' }
+        ],
+        "Aggregated Flow": [
+            { formula: '$P', label: 'Price', axis: 'left', cond: 'none', color1: '#2f81f7' },
+            { formula: '$CB + $PS', label: 'Total Buy Side', axis: 'right', cond: 'none', color1: '#238636' },
+            { formula: '$PB + $CS', label: 'Total Sell Side', axis: 'right', cond: 'none', color1: '#da3633' }
+        ],
+        "Overall Net Flow": [
+            { formula: '$P', label: 'Price', axis: 'left', cond: 'none', color1: '#2f81f7' },
+            { formula: '$CB + $PS - ($PB + $CS)', label: 'Net Flow', axis: 'right', cond: '>', thresh: '0', color1: '#238636', color2: '#da3633', labelTrue: 'BULLISH', labelFalse: 'BEARISH' }
+        ]
+    },
+    "Advanced - Options": {
+        "Price & Flows": [
+            { formula: '$P', label: 'Spot Price', axis: 'left', cond: 'none', color1: '#2f81f7' },
+            { formula: '$CB + $PS', label: 'Bull Side', axis: 'right', cond: 'none', color1: '#238636' },
+            { formula: '$PB + $CS', label: 'Bear Side', axis: 'right', cond: 'none', color1: '#da3633' }
+        ],
+        "Overall Net Flow": [
+            { formula: '$P', label: 'Spot Price', axis: 'left', cond: 'none', color1: '#2f81f7' },
+            { formula: '$CB + $PS - ($PB + $CS)', label: 'Net Flow', axis: 'right', cond: '>', thresh: '0', color1: '#238636', color2: '#da3633', labelTrue: 'BULLISH', labelFalse: 'BEARISH' }
+        ],
+        "Components": [
+            { formula: '$P', label: 'Spot Price', axis: 'left', cond: 'none', color1: '#2f81f7' },
+            { formula: '$CB', label: 'Call Buy', axis: 'right', cond: 'none', color1: '#238636' },
+            { formula: '$CS', label: 'Call Sell', axis: 'right', cond: 'none', color1: '#3fb950' },
+            { formula: '$PB', label: 'Put Buy', axis: 'right', cond: 'none', color1: '#da3633' },
+            { formula: '$PS', label: 'Put Sell', axis: 'right', cond: 'none', color1: '#f85149' }
+        ]
     }
-});
+};
 
 const CustomDD = {
     data: { cfgRoot: [], cfgExp:[], cfgInst:[] },
     recent: { cfgRoot:[] }, 
-    
-    init() {
-        const saved = localStorage.getItem('dc_recent_symbols');
-        if(saved) this.recent.cfgRoot = JSON.parse(saved);
-    },
+    init() { const saved = localStorage.getItem('dc_recent_syms'); if(saved) this.recent.cfgRoot = JSON.parse(saved); },
     clear(id) { this.data[id] =[]; document.getElementById(id).value = ''; },
-    set(id, items, groupName = null) {
-        if (!groupName) this.data[id] = items.map(i => ({val: i, group: null}));
-        else this.data[id].push(...items.map(i => ({val: i, group: groupName})));
-    },
-    async open(id) {
-        document.querySelectorAll('.custom-dd').forEach(el => el.style.display = 'none');
-        document.getElementById(id).select(); 
-        this.render(id, '');
-        document.getElementById(`dd-${id}`).style.display = 'block';
+    set(id, items, group=null) { 
+        if(!group) this.data[id] = items.map(i=>({val:i, group:null})); 
+        else this.data[id].push(...items.map(i=>({val:i, group}))); 
     },
+    async open(id) { document.querySelectorAll('.custom-dd').forEach(el=>el.style.display='none'); document.getElementById(id).select(); this.render(id,''); document.getElementById(`dd-${id}`).style.display='block'; },
     async filter(id) {
-        const query = document.getElementById(id).value.toUpperCase();
-        if(id === 'cfgRoot' && query.length >= 2) {
-            const res = await fetch(`/api/roots?date=${App.state.date}&q=${query}`);
+        const q = document.getElementById(id).value.toUpperCase();
+        if(id==='cfgRoot' && q.length>=2) {
+            const res = await fetch(`/api/roots?date=${App.state.date}&q=${q}`);
             this.set(id, await res.json());
         }
-        this.render(id, query);
-        document.getElementById(`dd-${id}`).style.display = 'block';
+        this.render(id, q); document.getElementById(`dd-${id}`).style.display='block';
     },
-    render(id, query) {
-        const el = document.getElementById(`dd-${id}`);
-        let html = ''; let currentGroup = null; let pool = [...this.data[id]];
-        
-        if(id === 'cfgRoot' && query === '') pool =[...this.recent.cfgRoot.map(r => ({val: r, group: 'Recent'})), ...pool];
-
-        const filtered = pool.filter((v, i, a) => a.findIndex(t => t.val === v.val) === i) 
-                             .filter(item => item.val.toLowerCase().includes(query.toLowerCase()));
-        
-        if (!filtered.length) { el.innerHTML = '<div class="custom-dd-opt">No matches</div>'; return; }
-
-        filtered.forEach(item => {
-            if (item.group && item.group !== currentGroup) {
-                html += `<div class="custom-dd-group">${item.group}</div>`; currentGroup = item.group;
-            }
-            html += `<div class="custom-dd-opt" onclick="CustomDD.pick('${id}', '${item.val}')">${item.val}</div>`;
+    render(id, q) {
+        const el = document.getElementById(`dd-${id}`); q=q.toLowerCase();
+        let html='', curGrp=null; let pool = [...this.data[id]];
+        if(id==='cfgRoot' && q==='') pool =[...this.recent.cfgRoot.map(r=>({val:r,group:'Recent'})), ...pool];
+        const f = pool.filter((v,i,a)=>a.findIndex(t=>t.val===v.val)===i).filter(item=>item.val.toLowerCase().includes(q));
+        if(f.length===0){ el.innerHTML='<div class="custom-dd-opt" style="color:var(--text-secondary)">No matches</div>'; return; }
+        f.forEach(item => {
+            if(item.group && item.group!==curGrp) { html+=`<div class="custom-dd-group">${item.group}</div>`; curGrp=item.group; }
+            html += `<div class="custom-dd-opt" onclick="CustomDD.pick('${id}','${item.val}')">${item.val}</div>`;
         });
         el.innerHTML = html;
     },
     pick(id, val) {
-        document.getElementById(id).value = val;
-        document.getElementById(`dd-${id}`).style.display = 'none';
-        if(id === 'cfgRoot') {
-            if(!this.recent.cfgRoot.includes(val)) {
-                this.recent.cfgRoot.unshift(val);
-                if(this.recent.cfgRoot.length > 10) this.recent.cfgRoot.pop();
-                localStorage.setItem('dc_recent_symbols', JSON.stringify(this.recent.cfgRoot));
-            }
+        document.getElementById(id).value = val; document.getElementById(`dd-${id}`).style.display='none';
+        if(id==='cfgRoot') {
+            if(!this.recent.cfgRoot.includes(val)) { this.recent.cfgRoot.unshift(val); if(this.recent.cfgRoot.length>10) this.recent.cfgRoot.pop(); localStorage.setItem('dc_recent_syms', JSON.stringify(this.recent.cfgRoot)); }
             Config.onRootChange();
         }
-        if(id === 'cfgExp') Config.onExpChange();
+        if(id==='cfgExp') Config.onExpChange();
     }
 };
 
 const App = {
-    state: { date: null, mode: 'LIVE', columns: 3, layout: [[],[],[]], charts: {}, refreshRate: 15 },
-    presets: {
-        "Normal (Call Flow)":[
-            { formula: "P", color1: "#2f81f7", cond: "none", label: "Price", axis: "left" },
-            { formula: "CB - CS", color1: "#238636", color2: "#da3633", cond: ">", thresh: "0", lbl1: "Net Buy", lbl2: "Net Sell", label: "Call Net", axis: "right" }
-        ],
-        "Normal (Put Flow)":[
-            { formula: "P", color1: "#2f81f7", cond: "none", label: "Price", axis: "left" },
-            { formula: "PB - PS", color1: "#da3633", color2: "#238636", cond: ">", thresh: "0", lbl1: "Net Buy", lbl2: "Net Sell", label: "Put Net", axis: "right" }
-        ],
-        "Advanced Combined Flow":[
-            { formula: "P", color1: "#2f81f7", cond: "none", label: "Spot", axis: "left" },
-            { formula: "CB + PS - (PB + CS)", color1: "#238636", color2: "#da3633", cond: ">", thresh: "0", lbl1: "Bullish", lbl2: "Bearish", label: "Combined Flow", axis: "right" }
-        ]
-    },
-
+    state: { date: null, mode: 'LIVE', columns: 1, layout: [[],[],[]], charts: {}, refreshRate: 15 },
     async init() {
-        CustomDD.init();
-        await this.loadDates();
-        const savedPresets = localStorage.getItem('dc_pro_v4_presets');
-        if(savedPresets) try { this.presets = { ...this.presets, ...JSON.parse(savedPresets) }; } catch(e){}
-
-        const saved = localStorage.getItem('dc_pro_v4_final');
-        if (saved) {
-            try {
-                const s = JSON.parse(saved);
-                this.state = { ...this.state, ...s };
-                if(this.state.layout.length !== this.state.columns) this.setLayout(this.state.columns);
-            } catch(e) { this.initDefault(); }
-        } else this.initDefault();
+        CustomDD.init(); await this.loadDates();
+        const saved = localStorage.getItem('dc_pro_v4');
+        if(saved) { try { this.state = { ...this.state, ...JSON.parse(saved) }; } catch(e){ this.initDef(); } }
+        else this.initDef();
         
         const dSel = document.getElementById('globalDate');
         if(this.state.date && Array.from(dSel.options).some(o=>o.value===this.state.date)) dSel.value = this.state.date;
         else if(dSel.options.length) this.state.date = dSel.options[0].value;
         
-        document.getElementById('globalMode').value = this.state.mode;
-        this.updateModeUI(); this.renderGrid(); this.startLoop();
-    },
-
-    initDefault() {
-        this.state.columns = 3; this.state.layout = [[], [],[]]; this.state.refreshRate = 15;
-        for(let i=0; i<3; i++) { this.addChartInternal(i); this.addChartInternal(i); }
+        document.getElementById('globalMode').value = this.state.mode; this.updateModeUI();
+        this.renderGrid(); this.startLoop();
     },
-
+    initDef() { this.state.columns=1; this.state.layout=[[]]; this.addChartInternal(0); },
     async loadDates() {
-        try {
-            const res = await fetch('/api/dates'); const dates = await res.json();
-            document.getElementById('globalDate').innerHTML = dates.map(d => `<option value="${d}">${d}</option>`).join('');
+        try { const res = await fetch('/api/dates'); const dates = await res.json();
+            document.getElementById('globalDate').innerHTML = dates.map(d=>`<option value="${d}">${d}</option>`).join('');
             if(!this.state.date && dates.length) this.state.date = dates[0];
-        } catch(e) {}
+        } catch(e){}
     },
-
-    addChartInternal(colIdx) {
-        const id = 'c-' + Math.random().toString(36).substr(2, 6);
-        this.state.layout[colIdx].push(id);
-        this.state.charts[id] = { config: {}, instance: null, lastData: null };
-        return id;
-    },
-
+    addChartInternal(col) { const id = 'c-'+Math.random().toString(36).substr(2,6); this.state.layout[col].push(id); this.state.charts[id]={config:{},instance:null,lastData:null}; return id; },
     save() {
-        const cleanCharts = {};
-        for(let id in this.state.charts) cleanCharts[id] = { config: this.state.charts[id].config };
-        localStorage.setItem('dc_pro_v4_final', JSON.stringify({ ...this.state, charts: cleanCharts }));
+        const cc={}; for(let id in this.state.charts) cc[id]={config:this.state.charts[id].config};
+        localStorage.setItem('dc_pro_v4', JSON.stringify({...this.state, charts:cc}));
     },
-
-    reset() { if(confirm("Reset Workspace?")) { localStorage.removeItem('dc_pro_v4_final'); location.reload(); } },
-
+    reset() { if(confirm("Reset Workspace?")) { localStorage.removeItem('dc_pro_v4'); location.reload(); } },
     setLayout(n) {
-        const all = this.state.layout.flat();
-        this.state.columns = n; this.state.layout = Array.from({length: n}, () =>[]);
-        all.forEach((id, i) => this.state.layout[i % n].push(id));
-        this.renderGrid(); this.save();
+        const all = this.state.layout.flat(); this.state.columns=n; this.state.layout=Array.from({length:n},()=>[]);
+        all.forEach((id,i)=>this.state.layout[i%n].push(id)); this.renderGrid(); this.save();
     },
-
     renderGrid() {
-        document.querySelectorAll('.layout-btn').forEach((b, i) => b.classList.toggle('active', (i+1) === this.state.columns));
-        const container = document.getElementById('gridRoot'); container.innerHTML = '';
-
+        document.querySelectorAll('.layout-btn').forEach((b,i)=>b.classList.toggle('active', (i+1)===this.state.columns));
+        const c = document.getElementById('gridRoot'); c.innerHTML='';
         this.state.layout.forEach((ids, colIdx) => {
-            const col = document.createElement('div'); col.className = 'column';
-            const count = ids.length; const viewH = window.innerHeight - 52;
-
+            const col = document.createElement('div'); col.className='column';
+            const vH = window.innerHeight-52; const h = ids.length<=2 ? `calc(${vH/ids.length}px - 1px)` : '350px';
             ids.forEach(id => {
-                if(this.state.charts[id] && this.state.charts[id].instance) {
-                    this.state.charts[id].instance.destroy(); this.state.charts[id].instance = null;
-                }
-                const card = this.createCardDOM(id);
-                if (count > 0 && count <= 3) card.style.height = `calc(${viewH / count}px - 1px)`;
-                else card.style.height = '300px';
-
+                const card = document.createElement('div'); card.className='chart-card'; card.style.height=h;
+                const cfg = this.state.charts[id]?.config||{};
+                const lbl = cfg.chartMode==='advanced' ? `ATM ±${cfg.atmRange}` : (cfg.instrument||'');
+                card.innerHTML = `
+                    <div class="card-header">
+                        <div class="card-info"><div class="status-dot ${cfg.root?(this.state.mode==='LIVE'?'live':''):''}" id="dot-${id}"></div>
+                        <span>${cfg.root||'New Chart'}</span> <span class="inst-label">${lbl}</span></div>
+                        <div class="card-tools">
+                            <button class="tool-btn" onclick="Breakdown.open('${id}')" title="Inspect Breakdown">🔍</button>
+                            <button class="tool-btn" onclick="Config.open('${id}')">⚙</button>
+                            <button class="tool-btn" style="color:var(--danger)" onclick="App.removeChart('${id}')">✕</button>
+                        </div>
+                    </div>
+                    <div class="card-body" id="body-${id}">
+                        ${!cfg.root ? `<div class="empty-state"><button onclick="Config.open('${id}')">Configure</button></div>` : `<canvas id="canvas-${id}"></canvas>`}
+                    </div>
+                `;
                 col.appendChild(card);
-                setTimeout(() => ChartLogic.plot(id), 0);
+                if(cfg.root) setTimeout(()=>ChartLogic.plot(id),0);
             });
-
-            const btn = document.createElement('button'); btn.className = 'add-chart-btn'; btn.innerText = '+ Add Chart';
-            btn.onclick = () => { this.addChartInternal(colIdx); this.renderGrid(); this.save(); };
-            col.appendChild(btn); container.appendChild(col);
+            const btn=document.createElement('button'); btn.className='add-chart-btn'; btn.innerText='+ Add Chart';
+            btn.onclick=()=>{ this.addChartInternal(colIdx); this.renderGrid(); this.save(); }; col.appendChild(btn); c.appendChild(col);
         });
     },
-
-    createCardDOM(id) {
-        const div = document.createElement('div'); div.className = 'chart-card'; div.id = `card-${id}`;
-        const cfg = this.state.charts[id] ? this.state.charts[id].config : {};
-        const isCfg = cfg && cfg.root;
-        const advancedLabel = cfg.chartMode === 'advanced' ? `<span class="inst-label">ATM +/- ${cfg.atmRange}</span>` : `<span class="inst-label">${cfg.instrument || ''}</span>`;
-
-        div.innerHTML = `
-            <div class="card-header">
-                <div class="card-info">
-                    <div class="status-dot ${isCfg ? (this.state.mode==='LIVE'?'live':'hist') : ''}" id="dot-${id}"></div>
-                    <span>${isCfg ? cfg.root : 'New Chart'}</span>
-                    ${isCfg ? `${advancedLabel} <span class="card-meta">${cfg.expiry}</span>` : ''}
-                </div>
-                <div class="card-tools">
-                    ${isCfg ? `<button class="tool-btn" onclick="ChartLogic.showInspection('${id}')" title="Data Table">🔍</button>` : ''}
-                    <button class="tool-btn" onclick="Config.open('${id}')" title="Configure">⚙</button>
-                    <button class="tool-btn" style="color:var(--danger)" onclick="App.removeChart('${id}')">✕</button>
-                </div>
-            </div>
-            <div class="card-body" id="body-${id}">
-                ${!isCfg ? `
-                    <div class="empty-state"><div style="font-size:24px; opacity:0.3;">📊</div><button style="background:transparent; border:1px solid var(--border); padding:5px 10px; border-radius:4px; color:var(--text-secondary); margin-top:8px;" onclick="Config.open('${id}')">Configure</button></div>
-                ` : `<canvas id="canvas-${id}"></canvas>`}
-            </div>
-        `;
-        return div;
-    },
-
-    removeChart(id) {
-        if(!confirm("Delete?")) return;
-        this.state.layout = this.state.layout.map(c => c.filter(x => x !== id));
-        if(this.state.charts[id].instance) this.state.charts[id].instance.destroy();
-        delete this.state.charts[id];
-        this.renderGrid(); this.save();
-    },
-
-    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.state.mode = 'LIVE'; document.getElementById('globalMode').value = 'LIVE'; this.updateModeUI();
-        }
-        this.save(); this.refreshAll();
-    },
-    onModeChange() { this.state.mode = document.getElementById('globalMode').value; this.updateModeUI(); this.save(); this.refreshAll(); },
-    updateModeUI() { document.getElementById('modeDot').className = `status-dot ${this.state.mode==='LIVE'?'live':'hist'}`; },
-    refreshAll() { Object.keys(this.state.charts).forEach(id => ChartLogic.plot(id)); },
-    
+    removeChart(id) { if(!confirm("Delete?"))return; this.state.layout=this.state.layout.map(c=>c.filter(x=>x!==id)); if(this.state.charts[id].instance) this.state.charts[id].instance.destroy(); delete this.state.charts[id]; this.renderGrid(); this.save(); },
+    onDateChange() { this.state.date=document.getElementById('globalDate').value; this.save(); Object.keys(this.state.charts).forEach(id=>ChartLogic.plot(id)); },
+    onModeChange() { this.state.mode=document.getElementById('globalMode').value; this.updateModeUI(); this.save(); Object.keys(this.state.charts).forEach(id=>ChartLogic.plot(id)); },
+    updateModeUI() { document.getElementById('modeDot').className=`status-dot ${this.state.mode==='LIVE'?'live':''}`; },
     startLoop() {
-        const loop = () => {
-            if(this.state.mode === 'LIVE') Object.keys(this.state.charts).forEach(id => ChartLogic.plot(id, true));
-            setTimeout(loop, (this.state.refreshRate || 15) * 1000);
-        };
-        loop();
+        const loop=()=>{
+            if(this.state.mode==='LIVE') Object.keys(this.state.charts).forEach(id=>ChartLogic.plot(id, true));
+            setTimeout(loop, (this.state.refreshRate||15)*1000);
+        }; loop();
     }
 };
 
 const ChartLogic = {
     async plot(id, isUpdate=false) {
-        const chart = App.state.charts[id];
-        if(!chart || !chart.config.root) return;
-        
+        const chart = App.state.charts[id]; if(!chart||!chart.config.root) return;
         const cfg = chart.config;
-        const dot = document.getElementById(`dot-${id}`);
-        if(isUpdate && dot) dot.classList.add('retry');
-
         let endTime = cfg.end;
-        if (App.state.mode === 'LIVE') {
-            const now = new Date();
-            endTime = now.getHours().toString().padStart(2,'0') + ":" + now.getMinutes().toString().padStart(2,'0');
-        }
-
-        // Dynamically extract variables to request
-        const allFormulas = cfg.series.map(s => s.formula.toUpperCase()).join(' ');
-        const reqVars = [];['P','B','S','V','OI','CB','CS','PB','PS'].forEach(v => {
-            if (new RegExp('\\b' + v + '\\b').test(allFormulas)) reqVars.push(v);
-        });
-        if (!reqVars.includes('P')) reqVars.push('P'); 
+        if(App.state.mode==='LIVE') { const d=new Date(); endTime=d.getHours().toString().padStart(2,'0')+":"+d.getMinutes().toString().padStart(2,'0'); }
 
         try {
+            // Egress Optimization: Extract formulas directly from config
+            const requestedFormulas = cfg.series.map(s => s.formula);
+
             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,
-                    mode: cfg.chartMode || 'normal', atm_range: cfg.atmRange || 5,
-                    req_vars: reqVars
+                    date: App.state.date, root: cfg.root, expiry: cfg.expiry, instrument: cfg.instrument||"",
+                    timeframe: cfg.timeframe, start_time: cfg.start, end_time: endTime,
+                    mode: cfg.chartMode||'normal', atm_range: cfg.atmRange||5,
+                    formulas: requestedFormulas
                 })
             });
             const data = await res.json();
-            
-            if(data.error || !data.labels || !data.labels.length) {
-                if(App.state.mode !== 'LIVE') {
-                    const b = document.getElementById(`body-${id}`);
-                    if(b) b.innerHTML = `<div class="empty-state" style="opacity:0.8"><span style="font-size:20px;">⚠️</span><br/>${data.error || "No Data"}</div>`;
-                }
-                if(dot) dot.classList.remove('retry');
-                return;
-            }
+            chart.lastData = data; // Store for Breakdown Modal
 
-            // Save data for inspection modal
-            chart.lastData = data; 
-            
-            const body = document.getElementById(`body-${id}`);
-            if(body && !body.querySelector('canvas')) body.innerHTML = `<canvas id="canvas-${id}"></canvas>`;
-            if(dot) dot.className = `status-dot ${App.state.mode==='LIVE'?'live':'hist'}`;
+            if(data.error||!data.labels||!data.labels.length) return;
 
             const datasets = cfg.series.map(s => {
                 const vals = data.labels.map((_, i) => {
-                    let d = {
-                        P: data.P?.[i]||0, B: data.B?.[i]||0, S: data.S?.[i]||0, 
-                        V: data.V?.[i]||0, OI: data.OI?.[i]||0, CB: data.CB?.[i]||0, 
-                        CS: data.CS?.[i]||0, PB: data.PB?.[i]||0, PS: data.PS?.[i]||0
-                    };
-                    return this.evaluate(s.formula, d);
+                    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;
+                    const CB=data.CB?.[i]||0, CS=data.CS?.[i]||0, PB=data.PB?.[i]||0, PS=data.PS?.[i]||0;
+                    
+                    let f = s.formula
+                        .replace(/\$CB/g, str(CB)).replace(/\$CS/g, str(CS))
+                        .replace(/\$PB/g, str(PB)).replace(/\$PS/g, str(PS))
+                        .replace(/\$OI/g, str(OI)).replace(/\$P/g, str(P))
+                        .replace(/\$V/g, str(V)).replace(/\$B/g, str(B)).replace(/\$S/g, str(S));
+                    try { return new Function('return '+f)(); } catch{ return 0; }
                 });
                 
-                let dataset = {
-                    label: s.label, data: vals, borderWidth: 1.5, pointRadius: 0, 
-                    hitRadius: 10, tension: 0.1, yAxisID: s.axis==='left'?'y':'y1'
-                };
-
-                if(s.cond && s.cond !== 'none') {
-                    let thresh = parseFloat(s.thresh) || 0;
-                    let cTrue = s.color1; let cFalse = s.color2 || s.color1;
-                    
-                    dataset.segment = {
-                        borderColor: ctx => {
-                            let v = ctx.p1.parsed.y;
-                            if(s.cond === '>') return v > thresh ? cTrue : cFalse;
-                            if(s.cond === '<') return v < thresh ? cTrue : cFalse;
-                            return cTrue;
-                        }
-                    };
-                    dataset.borderColor = cTrue; dataset.backgroundColor = cTrue;
-                    
-                    const hoverColor = (ctx) => {
-                        let v = ctx.raw;
-                        if(s.cond === '>') return v > thresh ? cTrue : cFalse;
-                        if(s.cond === '<') return v < thresh ? cTrue : cFalse;
-                        return cTrue;
-                    };
-                    dataset.pointHoverBackgroundColor = hoverColor;
-                    dataset.pointHoverBorderColor = hoverColor;
-                } else {
-                    dataset.borderColor = s.color1; dataset.backgroundColor = s.color1;
-                    dataset.pointHoverBackgroundColor = s.color1; dataset.pointHoverBorderColor = s.color1;
-                }
+                let dataset = { label: s.label, data: vals, borderWidth: 1.5, pointRadius: 0, hitRadius: 10, tension: 0.1, yAxisID: s.axis==='left'?'y':'y1' };
+                if(s.cond && s.cond!=='none') {
+                    let th = parseFloat(s.thresh)||0;
+                    dataset.segment = { borderColor: ctx => { let v=ctx.p1.parsed.y; return (s.cond==='>'?v>th:v<th) ? s.color1 : (s.color2||s.color1); } };
+                } else dataset.borderColor = s.color1;
                 return dataset;
             });
 
             this.render(id, data.labels, datasets, cfg.series);
-        } catch(e) { console.error(e); }
+        } catch(e){}
     },
-
-    evaluate(formula, vars) {
-        try {
-            let exp = formula.toUpperCase()
-                .replace(/\bCB\b/g, vars.CB).replace(/\bCS\b/g, vars.CS)
-                .replace(/\bPB\b/g, vars.PB).replace(/\bPS\b/g, vars.PS)
-                .replace(/\bOI\b/g, vars.OI).replace(/\bP\b/g, vars.P)
-                .replace(/\bV\b/g, vars.V).replace(/\bB\b/g, vars.B).replace(/\bS\b/g, vars.S);
-            return new Function('return '+exp)();
-        } catch { return null; }
-    },
-
-    render(id, labels, datasets, seriesConfig) {
-        const ctx = document.getElementById(`canvas-${id}`);
-        if(!ctx) return;
-        
-        if(App.state.charts[id].instance && App.state.charts[id].instance.ctx.canvas !== ctx) {
-            App.state.charts[id].instance.destroy(); App.state.charts[id].instance = null;
-        }
-
+    render(id, labels, datasets, sCfg) {
+        const ctx = document.getElementById(`canvas-${id}`); if(!ctx)return;
         if(App.state.charts[id].instance) {
             App.state.charts[id].instance.data.labels = labels;
             App.state.charts[id].instance.data.datasets = datasets;
             App.state.charts[id].instance.update('none');
         } else {
-            const hasRight = datasets.some(d => d.yAxisID === 'y1');
-            App.state.charts[id].instance = new Chart(ctx.getContext('2d'), {
+            const hasR = datasets.some(d=>d.yAxisID==='y1');
+            App.state.charts[id].instance = new Chart(ctx, {
                 type: 'line', data: { labels, datasets },
                 options: {
-                    responsive: true, maintainAspectRatio: false, animation: false,
-                    interaction: { mode: 'index', intersect: false },
+                    responsive: true, maintainAspectRatio: false, animation: false, interaction: { mode: 'index', intersect: false },
                     plugins: { 
                         legend: { display: false },
                         tooltip: { 
-                            backgroundColor: 'rgba(22, 27, 34, 0.95)', titleColor:'#e6edf3', bodyColor:'#e6edf3', borderColor: '#30363d', borderWidth: 1,
                             callbacks: {
-                                label: function(context) {
-                                    let s = seriesConfig[context.datasetIndex];
-                                    let v = context.parsed.y;
-                                    let lbl = s.label;
-                                    if(s.cond && s.cond !== 'none') {
-                                        let thresh = parseFloat(s.thresh) || 0;
-                                        let isTrue = s.cond === '>' ? (v > thresh) : (v < thresh);
-                                        if(isTrue && s.lbl1) lbl = s.lbl1;
-                                        if(!isTrue && s.lbl2) lbl = s.lbl2;
+                                label: function(c) {
+                                    let s = sCfg[c.datasetIndex], v = c.parsed.y, lbl = s.label;
+                                    if(s.cond && s.cond!=='none') {
+                                        let isT = (s.cond==='>') ? v > parseFloat(s.thresh||0) : v < parseFloat(s.thresh||0);
+                                        if(isT && s.labelTrue) lbl = s.labelTrue;
+                                        if(!isT && s.labelFalse) lbl = s.labelFalse;
                                     }
-                                    return `${lbl}: ${v.toLocaleString()}`;
+                                    return `${lbl}: ${v}`;
                                 },
-                                labelColor: function(context) {
-                                    let s = seriesConfig[context.datasetIndex];
-                                    let v = context.parsed.y;
-                                    let c = s.color1;
-                                    if(s.cond && s.cond !== 'none') {
-                                        let thresh = parseFloat(s.thresh) || 0;
-                                        if(s.cond === '>') c = v > thresh ? s.color1 : (s.color2 || s.color1);
-                                        if(s.cond === '<') c = v < thresh ? s.color1 : (s.color2 || s.color1);
-                                    }
-                                    return { borderColor: c, backgroundColor: c };
+                                labelColor: function(c) {
+                                    let s = sCfg[c.datasetIndex], v = c.parsed.y, cl = s.color1;
+                                    if(s.cond && s.cond!=='none') cl = ((s.cond==='>') ? v > parseFloat(s.thresh||0) : v < parseFloat(s.thresh||0)) ? s.color1 : (s.color2||s.color1);
+                                    return { borderColor: cl, backgroundColor: cl };
                                 }
                             }
                         }
                     },
                     scales: {
-                        x: { grid:{color:'#30363d', tickLength:0}, ticks:{color:'#8b949e', maxTicksLimit:8, font:{size:10}} },
-                        y: { type:'linear', display:true, position:'left', grid:{color:'#30363d'}, ticks:{color:'#8b949e', font:{size:10}} },
-                        y1: { type:'linear', display:hasRight, position:'right', grid:{display:false}, ticks:{color:'#8b949e', font:{size:10}} }
+                        x: { ticks:{color:'#8b949e', maxTicksLimit:8, font:{size:10}} },
+                        y: { position:'left', ticks:{color:'#8b949e', font:{size:10}} },
+                        y1: { display:hasR, position:'right', grid:{display:false}, ticks:{color:'#8b949e', font:{size:10}} }
                     }
                 }
             });
         }
-    },
-    
-    showInspection(id) {
-        const chart = App.state.charts[id];
-        if(!chart || !chart.lastData) return alert("No data available.");
-        const d = chart.lastData;
-        const cfg = chart.config;
-        
-        // Define Columns
-        const cols =['Time', 'Spot/Ref'];
-        const reqVars = Object.keys(d).filter(k => k!=='labels' && k!=='P' && k!=='error' && d[k].length>0);
-        cols.push(...reqVars);
-        cfg.series.forEach((s,i) => cols.push(`F${i+1} (${s.label})`));
-        
-        let html = `<thead><tr>${cols.map(c=>`<th>${c}</th>`).join('')}</tr></thead><tbody>`;
+    }
+};
+
+const Breakdown = {
+    open(id) {
+        const d = App.state.charts[id].lastData;
+        const sCfg = App.state.charts[id].config.series;
+        if(!d || !d.labels) return alert("No data to inspect.");
         
-        d.labels.forEach((time, i) => {
-            let rowVars = { P: d.P?.[i]||0, B: d.B?.[i]||0, S: d.S?.[i]||0, V: d.V?.[i]||0, OI: d.OI?.[i]||0, CB: d.CB?.[i]||0, CS: d.CS?.[i]||0, PB: d.PB?.[i]||0, PS: d.PS?.[i]||0 };
+        let html = `<tr><th>Time</th><th>Price</th>`;
+        if(d.B) html += `<th>B</th>`; if(d.S) html += `<th>S</th>`;
+        if(d.CB) html += `<th>CB</th>`; if(d.CS) html += `<th>CS</th>`;
+        if(d.PB) html += `<th>PB</th>`; if(d.PS) html += `<th>PS</th>`;
+        sCfg.forEach(s => html += `<th>${s.label}</th>`);
+        html += `</tr>`;
+
+        for(let i=0; i<d.labels.length; i++) {
+            html += `<tr><td>${d.labels[i]}</td><td>${d.P?.[i]||0}</td>`;
+            if(d.B) html += `<td>${d.B[i]}</td>`; if(d.S) html += `<td>${d.S[i]}</td>`;
+            if(d.CB) html += `<td>${d.CB[i]}</td>`; if(d.CS) html += `<td>${d.CS[i]}</td>`;
+            if(d.PB) html += `<td>${d.PB[i]}</td>`; if(d.PS) html += `<td>${d.PS[i]}</td>`;
             
-            let cells = `<td>${time}</td><td style="color:var(--accent); font-weight:bold;">${rowVars.P.toLocaleString()}</td>`;
-            reqVars.forEach(v => cells += `<td>${rowVars[v].toLocaleString()}</td>`);
-            
-            cfg.series.forEach(s => {
-                let val = this.evaluate(s.formula, rowVars);
-                let color = "inherit";
-                if(s.cond && s.cond !== 'none') {
-                    let thresh = parseFloat(s.thresh)||0;
-                    color = (s.cond === '>' ? val>thresh : val<thresh) ? s.color1 : (s.color2||s.color1);
-                }
-                cells += `<td style="color:${color}; font-weight:bold;">${val ? val.toLocaleString() : '0'}</td>`;
+            sCfg.forEach(s => {
+                const P=d.P?.[i]||0, B=d.B?.[i]||0, S=d.S?.[i]||0;
+                const CB=d.CB?.[i]||0, CS=d.CS?.[i]||0, PB=d.PB?.[i]||0, PS=d.PS?.[i]||0;
+                let f = s.formula.replace(/\$CB/g, str(CB)).replace(/\$CS/g, str(CS)).replace(/\$PB/g, str(PB)).replace(/\$PS/g, str(PS)).replace(/\$P/g, str(P)).replace(/\$B/g, str(B)).replace(/\$S/g, str(S));
+                try { html += `<td style="color:var(--accent); font-weight:bold;">${new Function('return '+f)()}</td>`; } catch{ html+=`<td>0</td>`; }
             });
-            html += `<tr>${cells}</tr>`;
-        });
-        html += `</tbody>`;
-        
-        document.getElementById('inspectionTable').innerHTML = html;
-        document.getElementById('inspectionModal').style.display = 'flex';
-    }
-};
+            html += `</tr>`;
+        }
+        document.getElementById('breakdownTable').innerHTML = html;
+        document.getElementById('breakdownModal').style.display = 'flex';
+    },
+    close() { document.getElementById('breakdownModal').style.display = 'none'; }
+}
 
 const Config = {
-    tid: null, isGlobal: false, currentMode: 'normal',
+    tid: null, isGlobal: false,
     
-    setMode(mode) {
-        this.currentMode = mode;
+    setMode(m) {
         const btns = document.querySelectorAll('#cfgModeToggle .seg-btn');
-        btns[0].classList.toggle('active', mode === 'normal');
-        btns[1].classList.toggle('active', mode === 'advanced');
+        btns[0].classList.toggle('active', m === 'normal');
+        btns[1].classList.toggle('active', m === 'advanced');
+        document.getElementById('cfgAdvancedFields').style.display = m==='advanced'?'block':'none';
         
-        document.getElementById('cfgAdvancedFields').style.display = mode === 'advanced' ? 'block' : 'none';
-        document.getElementById('lblInst').innerText = mode === 'normal' ? 'Instrument' : 'Reference Spot/Fut';
+        let defGrp = m==='advanced' ? "Advanced - Options" : "Normal - Options";
+        document.getElementById('cfgPresetsGroup').value = defGrp;
         this.updatePresetsDropdown();
-        this.loadPreset(mode === 'advanced' ? "Advanced Combined Flow" : "Normal (Call Flow)"); 
+        this.loadPreset(Object.keys(PRESETS[defGrp])[0]);
     },
 
     updatePresetsDropdown() {
-        document.getElementById('cfgPresetsDropdown').innerHTML = Object.keys(App.presets).map(k => `<option value="${k}">${k}</option>`).join('');
+        const grp = document.getElementById('cfgPresetsGroup').value;
+        const sel = document.getElementById('cfgPresetsDropdown');
+        sel.innerHTML = Object.keys(PRESETS[grp]).map(k => `<option value="${k}">${k}</option>`).join('');
     },
 
-    loadPreset(presetName = null) {
-        const name = presetName || document.getElementById('cfgPresetsDropdown').value;
-        if(name && App.presets[name]) {
-            document.getElementById('cfgPresetsDropdown').value = name;
-            this.renderSeries(App.presets[name]);
+    loadPreset(name=null) {
+        const grp = document.getElementById('cfgPresetsGroup').value;
+        const n = name || document.getElementById('cfgPresetsDropdown').value;
+        if(n && PRESETS[grp][n]) {
+            document.getElementById('cfgPresetsDropdown').value = n;
+            this.renderSeries(PRESETS[grp][n]);
         }
     },
 
-    savePreset() {
-        const name = prompt("Name this Setup:", "Custom Flow");
-        if(!name) return;
-        App.presets[name] = this.extractSeriesFromDOM();
-        localStorage.setItem('dc_pro_v4_presets', JSON.stringify(App.presets));
-        this.updatePresetsDropdown(); document.getElementById('cfgPresetsDropdown').value = name;
-    },
-
     async open(id) {
         this.tid = id; this.isGlobal = false;
         document.getElementById('configModal').style.display = 'flex';
-        document.getElementById('cfgTitle').innerText = 'Configure Chart';
-        document.getElementById('cfgLoading').style.display = 'block';
-        document.getElementById('cfgContent').style.display = 'none';
-
         document.getElementById('cfgGlobalOnly').style.display = 'none';
         document.getElementById('cfgChartOnly').style.display = 'block';
 
-        this.updatePresetsDropdown();
         CustomDD.clear('cfgRoot');
-        const res = await fetch(`/api/roots?date=${App.state.date}`);
-        CustomDD.set('cfgRoot', await res.json());
+        CustomDD.set('cfgRoot', await fetch(`/api/roots?date=${App.state.date}`).then(r=>r.json()));
 
         const cfg = App.state.charts[id].config;
-        document.getElementById('cfgTF').value = cfg.timeframe || '1min';
+        document.getElementById('cfgTF').value = cfg.timeframe || '5min';
         document.getElementById('cfgStart').value = cfg.start || '09:15';
         document.getElementById('cfgEnd').value = cfg.end || '15:30';
-        
-        this.currentMode = cfg.chartMode || 'normal';
         document.getElementById('cfgAtmRange').value = cfg.atmRange || 5;
-        this.setMode(this.currentMode);
-
-        if (cfg.series && cfg.series.length > 0) this.renderSeries(cfg.series);
+        
+        let m = cfg.chartMode || 'normal';
+        this.setMode(m);
+        if(cfg.series && cfg.series.length > 0) this.renderSeries(cfg.series);
 
         document.getElementById('cfgRoot').value = cfg.root || '';
-        document.getElementById('cfgExp').value = cfg.expiry || '';
-        document.getElementById('cfgInst').value = cfg.instrument || '';
-
         if(cfg.root) await this.onRootChange(cfg.expiry, cfg.instrument);
-        document.getElementById('cfgLoading').style.display = 'none';
-        document.getElementById('cfgContent').style.display = 'block';
     },
 
     openDefaults() {
         this.isGlobal = true;
         document.getElementById('configModal').style.display = 'flex';
-        document.getElementById('cfgTitle').innerText = 'Global Settings';
         document.getElementById('cfgGlobalOnly').style.display = 'block';
         document.getElementById('cfgChartOnly').style.display = 'none';
         document.getElementById('cfgRefresh').value = App.state.refreshRate || 15;
     },
-
     close() { document.getElementById('configModal').style.display = 'none'; },
 
-    async onRootChange(preExp, preInst) {
+    async onRootChange(pE, pI) {
         const root = document.getElementById('cfgRoot').value.toUpperCase();
         CustomDD.clear('cfgExp'); CustomDD.clear('cfgInst');
-        if (!preExp) document.getElementById('cfgExp').value = '';
-        if (!preInst) document.getElementById('cfgInst').value = '';
-        if (!root) return;
-
-        const res = await fetch(`/api/expiries?date=${App.state.date}&root=${root}`);
-        const exps = await res.json();
+        if(!root) return;
+        const exps = await fetch(`/api/expiries?date=${App.state.date}&root=${root}`).then(r=>r.json());
         CustomDD.set('cfgExp', exps);
-        
-        if(preExp && exps.includes(preExp)) { 
-            document.getElementById('cfgExp').value = preExp; await this.onExpChange(preInst); 
-        } else if (exps.length > 0) {
-            const auto = await fetch(`/api/auto_config?date=${App.state.date}&root=${root}`).then(r=>r.json());
-            if(auto.current) { document.getElementById('cfgExp').value = auto.current.expiry; await this.onExpChange(auto.current.instrument); }
-        }
+        if(pE && exps.includes(pE)) { document.getElementById('cfgExp').value = pE; await this.onExpChange(pI); }
+        else if(exps.length>0) { document.getElementById('cfgExp').value = exps[0]; await this.onExpChange(); }
     },
 
-    async onExpChange(preInst) {
-        const root = document.getElementById('cfgRoot').value.toUpperCase();
-        const exp = document.getElementById('cfgExp').value.toUpperCase();
+    async onExpChange(pI) {
+        const root = document.getElementById('cfgRoot').value;
+        const exp = document.getElementById('cfgExp').value;
         CustomDD.clear('cfgInst');
-        if (!root || !exp) return;
-
+        if(!root || !exp) return;
         const data = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${exp}`).then(r=>r.json());
-        if (data.spot_fut.length > 0) CustomDD.set('cfgInst', data.spot_fut, 'Futures & Equity');
+        if (data.spot_fut.length > 0) CustomDD.set('cfgInst', data.spot_fut, 'Futures & Spot');
         if (data.options.length > 0) CustomDD.set('cfgInst', data.options, 'Options');
-        if(preInst) document.getElementById('cfgInst').value = preInst;
+        if(pI) document.getElementById('cfgInst').value = pI;
     },
 
-    toggleCond(sel) {
-        const solidGrp = sel.nextElementSibling;
-        const condGrp = solidGrp.nextElementSibling;
-        if(sel.value === 'none') { solidGrp.style.display = 'flex'; condGrp.style.display = 'none'; }
-        else { solidGrp.style.display = 'none'; condGrp.style.display = 'flex'; }
-    },
+    toggleCond(sel) { sel.nextElementSibling.style.display = sel.value==='none'?'none':'flex'; },
 
     renderSeries(list) {
         const c = document.getElementById('cfgSeries'); c.innerHTML = '';
         list.forEach(s => {
             const r = document.createElement('div'); r.className = 'series-row';
-            const showCond = s.cond && s.cond !== 'none';
+            const showC = s.cond && s.cond !== 'none';
             r.innerHTML = `
                 <div class="series-row-top">
-                    <input type="text" value="${s.formula}" class="s-form" placeholder="e.g. CB+PS" style="flex:1;">
-                    <select class="s-axis" style="width:70px;"><option value="left" ${s.axis==='left'?'selected':''}>Left</option><option value="right" ${s.axis==='right'?'selected':''}>Right</option></select>
-                    <button class="tool-btn" style="color:var(--danger); background:rgba(218,54,51,0.1);" onclick="this.parentElement.parentElement.remove()">✕</button>
+                    <input type="text" value="${s.formula}" class="s-form" placeholder="$P, $CB, $PS..." style="flex:1;">
+                    <input type="text" value="${s.label}" class="s-lbl" placeholder="Label" style="width:100px;">
+                    <select class="s-axis" style="width:60px;"><option value="left" ${s.axis==='left'?'selected':''}>Left</option><option value="right" ${s.axis==='right'?'selected':''}>Right</option></select>
+                    <button class="tool-btn" style="color:var(--danger)" onclick="this.parentElement.parentElement.remove()">✕</button>
                 </div>
                 <div class="series-row-bottom">
+                    <input type="color" value="${s.color1}" class="color-input s-color1" title="Color">
                     <select class="s-cond" style="width:80px;" onchange="Config.toggleCond(this)">
-                        <option value="none" ${!showCond?'selected':''}>Solid</option>
+                        <option value="none" ${s.cond==='none'||!s.cond?'selected':''}>Solid</option>
                         <option value=">" ${s.cond==='>'?'selected':''}>If &gt;</option>
                         <option value="<" ${s.cond==='<'?'selected':''}>If &lt;</option>
                     </select>
-                    
-                    <div class="s-cond-solid" style="display:${showCond?'none':'flex'};">
-                        <input type="text" value="${s.label}" class="s-lbl" placeholder="Label">
-                        <input type="color" value="${s.color1}" class="color-input s-color1" title="Color">
-                    </div>
-
-                    <div class="s-cond-group" style="display:${showCond?'flex':'none'};">
+                    <div class="s-cond-group" style="display:${showC?'flex':'none'};">
                         <input type="number" class="s-thresh" value="${s.thresh||0}" style="width:50px;">
-                        <input type="text" value="${s.lbl1||''}" class="s-lbl1" placeholder="True" style="width:65px;">
-                        <input type="color" value="${s.color1}" class="color-input s-color1-cond" title="True Color">
-                        <input type="text" value="${s.lbl2||''}" class="s-lbl2" placeholder="False" style="width:65px;">
-                        <input type="color" value="${s.color2||'#ffffff'}" class="color-input s-color2" title="False Color">
+                        <input type="color" value="${s.color1}" class="color-input s-ctrue" title="True Color">
+                        <input type="text" class="s-ltrue s-text" value="${s.labelTrue||'BUY'}" placeholder="Label True" style="width:80px;">
+                        <span style="color:#666">Else</span>
+                        <input type="color" value="${s.color2||'#ffffff'}" class="color-input s-cfalse" title="False Color">
+                        <input type="text" class="s-lfalse s-text" value="${s.labelFalse||'SELL'}" placeholder="Label False" style="width:80px;">
                     </div>
                 </div>
             `;
@@ -1054,50 +891,40 @@ const Config = {
         });
     },
 
-    addSeriesRow() {
-        this.renderSeries([...this.extractSeriesFromDOM(), { formula: "CB", color1: "#2f81f7", cond: "none", label: "New Line", axis: "right" }]);
-    },
-
-    extractSeriesFromDOM() {
-        return Array.from(document.querySelectorAll('#cfgSeries .series-row')).map(r => {
-            const cond = r.querySelector('.s-cond').value;
-            const isCond = cond !== 'none';
-            return {
-                formula: r.querySelector('.s-form').value.toUpperCase(),
-                axis: r.querySelector('.s-axis').value,
-                cond: cond,
-                label: isCond ? 'Dynamic' : r.querySelector('.s-lbl').value,
-                color1: isCond ? r.querySelector('.s-color1-cond').value : r.querySelector('.s-color1').value,
-                thresh: isCond ? r.querySelector('.s-thresh').value : "0",
-                lbl1: isCond ? r.querySelector('.s-lbl1').value : "",
-                lbl2: isCond ? r.querySelector('.s-lbl2').value : "",
-                color2: isCond ? r.querySelector('.s-color2').value : "#ffffff"
-            };
-        });
+    extract() {
+        return Array.from(document.querySelectorAll('#cfgSeries .series-row')).map(r => ({
+            formula: r.querySelector('.s-form').value.toUpperCase(),
+            label: r.querySelector('.s-lbl').value,
+            axis: r.querySelector('.s-axis').value,
+            color1: r.querySelector('.s-color1').value,
+            cond: r.querySelector('.s-cond').value,
+            thresh: r.querySelector('.s-thresh').value,
+            colorTrue: r.querySelector('.s-ctrue') ? r.querySelector('.s-ctrue').value : null,
+            color2: r.querySelector('.s-cfalse') ? r.querySelector('.s-cfalse').value : null,
+            labelTrue: r.querySelector('.s-ltrue') ? r.querySelector('.s-ltrue').value : null,
+            labelFalse: r.querySelector('.s-lfalse') ? r.querySelector('.s-lfalse').value : null
+        }));
     },
 
     saveChartConfig() {
-        if(this.isGlobal) { 
-            App.state.refreshRate = parseInt(document.getElementById('cfgRefresh').value) || 15; App.save();
-        } else {
-            const root = document.getElementById('cfgRoot').value.toUpperCase();
-            const exp = document.getElementById('cfgExp').value.toUpperCase();
-            if(!root || !exp) return alert("Incomplete Details.");
-
-            App.state.charts[this.tid].config = {
-                chartMode: this.currentMode,
-                atmRange: parseInt(document.getElementById('cfgAtmRange').value) || 5,
-                root, expiry: exp, instrument: document.getElementById('cfgInst').value.toUpperCase(),
-                timeframe: document.getElementById('cfgTF').value,
-                start: document.getElementById('cfgStart').value, end: document.getElementById('cfgEnd').value,
-                series: this.extractSeriesFromDOM()
-            };
-            App.save(); App.renderGrid(); ChartLogic.plot(this.tid);
-        }
-        this.close();
+        if(this.isGlobal) { App.state.refreshRate = parseInt(document.getElementById('cfgRefresh').value)||15; App.save(); this.close(); return; }
+        const rt = document.getElementById('cfgRoot').value;
+        const ex = document.getElementById('cfgExp').value;
+        if(!rt||!ex) return alert("Select Symbol and Expiry");
+        
+        App.state.charts[this.tid].config = {
+            chartMode: document.querySelector('#cfgModeToggle .active').innerText.includes('Advanced') ? 'advanced' : 'normal',
+            atmRange: parseInt(document.getElementById('cfgAtmRange').value)||5,
+            root: rt, expiry: ex, instrument: document.getElementById('cfgInst').value,
+            timeframe: document.getElementById('cfgTF').value,
+            start: document.getElementById('cfgStart').value, end: document.getElementById('cfgEnd').value,
+            series: this.extract()
+        };
+        App.save(); App.renderGrid(); ChartLogic.plot(this.tid); this.close();
     }
 };
 
+function str(v) { return v!==null && v!==undefined ? v.toString() : "0"; }
 window.onload = () => App.init();
 </script>
 </body>