Update app.py

app.py

@@ -74,7 +74,7 @@ def get_auto_config(date: str, root: str):
     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]
+    valid_expiries = [e for e in all_expiries if e >= date]
     if not valid_expiries:
         valid_expiries = all_expiries
 
@@ -141,9 +141,9 @@ async def fetch_series(
     t_start_dt = pd.to_datetime(f"{date} {start_time}:00")
     t_end_dt = pd.to_datetime(f"{date} {end_time}:59")
 
+    # Default: all variables if not specified
     if required_vars is None:
         required_vars =["P", "B", "S", "CB", "CS", "PB", "PS", "V", "OI"]
-
     required_vars = list(set(required_vars) | {"P"})
 
     if mode == "advanced":
@@ -156,7 +156,7 @@ async def fetch_series(
         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:
@@ -165,13 +165,26 @@ async def fetch_series(
                 others =[k for k in instruments if not k.endswith('CE') and not k.endswith('PE')]
                 ref_instrument = others[0] if others else instruments[0]
 
+        # PROPER STRIKE EXTRACTION USING PYTHON
+        p_strike_map = {}
+        for inst in instruments:
+            if inst.endswith('CE') or inst.endswith('PE'):
+                sym_part = inst.split(':')[-1]
+                if sym_part.startswith(root):
+                    remainder = sym_part[len(root):-2] # Remove root and CE/PE
+                    if len(remainder) >= 5: # Fyers Expiry dates are 5 characters (e.g. 26302, 26MAR)
+                        strike_str = remainder[5:]
+                        try:
+                            p_strike_map[inst] = float(strike_str)
+                        except: pass
+
         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_strike_map": {}
+            "p_strike_map": p_strike_map
         }
 
     else:
@@ -185,9 +198,7 @@ async def fetch_series(
             "p_instrument": instrument
         }
 
-    # =========================================================
-    # CHUNKING: 2-hour chunks fetched in parallel
-    # =========================================================
+    # Chunking requests to DB
     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")
@@ -214,22 +225,13 @@ async def fetch_series(
     if not all_records:
         return JSONResponse({"error": "No valid data found in range.", "labels": [], "P":[]})
 
-    # =========================================================
-    # DATA PROCESSING
-    # =========================================================
+    # Data Processing
     df = pd.DataFrame(all_records)
 
     df.rename(columns={
-        "tick_ts": "ts",
-        "b_qty": "B",
-        "s_qty": "S",
-        "vol": "V",
-        "oi": "OI",
-        "cb": "CB",
-        "cs": "CS",
-        "pb": "PB",
-        "ps": "PS",
-        "price": "P"
+        "tick_ts": "ts", "b_qty": "B", "s_qty": "S", "vol": "V",
+        "oi": "OI", "cb": "CB", "cs": "CS", "pb": "PB", "ps": "PS",
+        "price": "P", "details": "details"
     }, inplace=True)
 
     df['ts'] = pd.to_datetime(df['ts'])
@@ -237,7 +239,6 @@ async def fetch_series(
     df.set_index('ts', inplace=True)
     df.sort_index(inplace=True)
 
-    # Resample
     tf_map = {
         "1min": "1min", "3min": "3min", "5min": "5min",
         "15min": "15min", "30min": "30min", "1hour": "1h"
@@ -246,28 +247,29 @@ async def fetch_series(
 
     agg_dict = {
         "P": "last", "V": "sum", "OI": "last", "B": "last", "S": "last",
-        "CB": "last", "CS": "last", "PB": "last", "PS": "last",
-        "breakdown": "last" # Include the new JSON breakdown
+        "CB": "last", "CS": "last", "PB": "last", "PS": "last", "details": "last"
     }
 
     existing_agg = {k: v for k, v in agg_dict.items() if k in df.columns}
-    resampled = df.resample(panda_tf).agg(existing_agg).ffill().fillna(0)
+    resampled = df.resample(panda_tf).agg(existing_agg)
 
-    response_data = {
-        "labels": resampled.index.strftime('%H:%M').tolist()
-    }
+    for col in resampled.columns:
+        if col == "details":
+            resampled[col] = resampled[col].ffill()
+            details_list = [d if isinstance(d, list) else None for d in resampled[col]]
+            resampled[col] = details_list
+        else:
+            resampled[col] = resampled[col].ffill().fillna(0)
 
-    for var_key in["P", "B", "S", "V", "OI", "CB", "CS", "PB", "PS"]:
-        if var_key in required_vars and var_key in resampled.columns:
-            response_data[var_key] = [round(float(v), 2) for v in resampled[var_key].tolist()]
+    # Build response payload
+    response_data = {"labels": resampled.index.strftime('%H:%M').tolist()}
 
-    # Send the breakdown array strictly for UI sub-tables
-    if "breakdown" in resampled.columns:
-        cleaned_breakdown = []
-        for x in resampled["breakdown"]:
-            if isinstance(x, list): cleaned_breakdown.append(x)
-            else: cleaned_breakdown.append([])
-        response_data["breakdown"] = cleaned_breakdown
+    for var_key in["P", "B", "S", "V", "OI", "CB", "CS", "PB", "PS", "details"]:
+        if var_key in resampled.columns and var_key in required_vars + ["details"]:
+            if var_key == "details":
+                response_data[var_key] = resampled[var_key].tolist()
+            else:
+                response_data[var_key] =[round(float(v), 2) for v in resampled[var_key].tolist()]
 
     return JSONResponse(response_data)
 
@@ -355,7 +357,6 @@ HTML_TEMPLATE = """
 
         .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); }
-        .tool-btn-small { font-size:10px; padding:2px 6px; height:auto; width:auto; border:1px solid var(--border); }
 
         .card-body { flex: 1; position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
         .empty-state {
@@ -391,10 +392,10 @@ HTML_TEMPLATE = """
             box-shadow: 0 4px 12px rgba(0,0,0,0.5); 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:last-child { border-bottom: none; }
         .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); text-transform: uppercase; }
 
+        /* SERIES ROWS */
         .series-row {
             background: var(--bg-panel); padding: 12px; border-radius: 8px;
             border: 1px solid var(--border); margin-bottom: 10px;
@@ -402,62 +403,36 @@ HTML_TEMPLATE = """
         .series-row-top { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
         .series-row-bottom { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
         .series-row-cond { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; background: rgba(0,0,0,0.2); padding: 8px; border-radius: 6px; border: 1px dashed var(--border); }
-
         .s-form, .s-lbl, .s-axis, .s-cond, .s-thresh, .s-label-true, .s-label-false {
             background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary);
             border-radius: 6px; padding: 0 10px; height: 30px; font-size: 12px; transition: 0.2s;
         }
-        .s-form:focus, .s-lbl:focus { border-color: var(--accent); }
-
-        .color-input {
-            padding: 0; width: 34px; border: 1px solid var(--border); background: var(--bg-input);
-            height: 30px; cursor: pointer; border-radius: 6px; overflow: hidden;
-        }
-        .color-input::-webkit-color-swatch-wrapper { padding: 0; }
-        .color-input::-webkit-color-swatch { border: none; }
-        .cond-label { font-size: 10px; color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
+        .color-input { padding: 0; width: 34px; border: 1px solid var(--border); background: var(--bg-input); height: 30px; cursor: pointer; border-radius: 6px; overflow: hidden; }
 
-        .segmented-control {
-            display: flex; background: var(--bg-body); border: 1px solid var(--border);
-            border-radius: 6px; padding: 2px; overflow: hidden; margin-bottom: 6px;
-        }
-        .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;
-            transition: 0.2s; border-radius: 4px;
-        }
+        .segmented-control { display: flex; background: var(--bg-body); border: 1px solid var(--border); border-radius: 6px; padding: 2px; overflow: hidden; margin-bottom: 6px; }
+        .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; transition: 0.2s; border-radius: 4px; }
         .seg-btn.active { background: var(--bg-panel); color: var(--accent); }
 
-        .info-icon {
-            display: inline-flex; align-items: center; justify-content: center;
-            width: 16px; height: 16px; border-radius: 50%; background: var(--bg-panel);
-            color: var(--text-secondary); font-size: 10px; font-weight: bold; cursor: help;
-            border: 1px solid var(--border); margin-left: 8px; transition: 0.2s;
-        }
-        .info-icon:hover { color: var(--text-primary); border-color: var(--accent); }
+        .info-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-panel); color: var(--text-secondary); font-size: 10px; font-weight: bold; cursor: help; border: 1px solid var(--border); margin-left: 8px; transition: 0.2s; }
 
-        /* BREAKDOWN TABLE */
-        .breakdown-table {
-            width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px;
-        }
-        .breakdown-table th {
-            background: var(--bg-panel); color: var(--text-secondary); padding: 8px 10px;
-            border-bottom: 2px solid var(--border); text-align: right; white-space: nowrap; position: sticky; top: 0;
-        }
+        /* BREAKDOWN TABLE STYLES */
+        .breakdown-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
+        .breakdown-table th { background: var(--bg-panel); color: var(--text-secondary); padding: 6px 10px; border-bottom: 2px solid var(--border); text-align: right; white-space: nowrap; position: sticky; top: 0; }
         .breakdown-table th:first-child { text-align: left; }
-        .breakdown-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: right; color: var(--text-primary); }
+        .breakdown-table td { padding: 5px 10px; border-bottom: 1px solid var(--border); text-align: right; color: var(--text-primary); }
         .breakdown-table td:first-child { text-align: left; color: var(--text-secondary); }
-        .breakdown-table tr:hover > td { background: var(--bg-panel); }
+        .breakdown-table tr:hover td { background: var(--bg-panel); }
         .val-pos { color: #3fb950; }
         .val-neg { color: #f85149; }
-        .breakdown-scroll { overflow-x: auto; overflow-y: auto; max-height: 60vh; border: 1px solid var(--border); border-radius: 6px; }
-
-        /* Sub Table specific styling */
-        .sub-table { margin: 10px 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
-        .sub-table th { background: var(--bg-body); border-bottom: 1px solid var(--border); padding: 6px 10px; font-size: 10px; }
-        .sub-table td { padding: 4px 10px; border-bottom: 1px solid var(--border); }
-        .sub-table tr:last-child td { border-bottom: none; }
-        .atm-row { background: rgba(47,129,247,0.12); border-left: 3px solid var(--accent); }
+        .breakdown-scroll { overflow-x: auto; overflow-y: auto; max-height: 55vh; }
+
+        .expand-btn { cursor: pointer; color: var(--accent); font-weight: 700; padding: 0 4px; border: 1px solid var(--border); border-radius: 4px; background: transparent; margin-right: 6px; }
+        .expand-btn:hover { background: rgba(47,129,247,0.1); }
+        .sub-table-row { display: none; background: #0a0d12; border-bottom: 2px solid var(--border); }
+        .sub-table { width: 100%; border-collapse: collapse; font-size: 10px; margin: 8px 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden;}
+        .sub-table th, .sub-table td { padding: 4px 8px; border: 1px solid #1f242b; text-align: right; }
+        .sub-table th { background: #161b22; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px;}
+        .sub-table-wrapper { padding: 4px 10px 10px 32px; }
     </style>
 </head>
 <body>
@@ -530,7 +505,7 @@ HTML_TEMPLATE = """
                         <label>Chart 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 Mode (2N)</button>
+                            <button class="seg-btn" onclick="Config.setMode('advanced')">Advanced Mode</button>
                         </div>
                     </div>
 
@@ -541,17 +516,14 @@ HTML_TEMPLATE = """
                             <div class="input-arrow">▼</div>
                             <div id="dd-cfgInst" class="custom-dd"></div>
                         </div>
-                        <div id="advInstHint" style="display:none; font-size:10px; color:var(--text-secondary); margin-top:4px; line-height:1.4;">
-                            * Advanced Mode: select Spot/Future as reference. Aggregates CE/PE strictly N strikes above and N below Spot.
-                        </div>
                     </div>
 
                     <div id="cfgAdvancedFields" style="display:none;">
                         <div class="form-section" style="margin-top:12px;">
-                            <label style="color:var(--accent);">N Strikes (ITM/OTM Range)</label>
+                            <label style="color:var(--accent);">ATM (+/-) Strike Range</label>
                             <input type="number" id="cfgAtmRange" value="5" min="1" max="50" style="width:100%;">
                             <div style="font-size:10px; color:var(--text-secondary); margin-top:4px;">
-                                Grabs precisely N strikes below and N strikes above/equal to the reference price. (Total 2N strikes).
+                                Strictly Aggregates 1 ATM + N ITM + N OTM options. (e.g., Range 5 = 11 strikes total).
                             </div>
                         </div>
                     </div>
@@ -591,7 +563,7 @@ HTML_TEMPLATE = """
                 <div class="form-section">
                     <div style="display:flex; align-items:center; margin-bottom:6px;">
                         <label style="margin:0;">Plot Lines</label>
-                        <span class="info-icon" id="infoIcon" title="Variables: $P=Price, $B=Buy, $S=Sell (Fut/Eq) | $CB=Call Buy, $CS=Call Sell, $PB=Put Buy, $PS=Put Sell (Options)">i</span>
+                        <span class="info-icon" title="Variables: $P=Price, $B=Buy, $S=Sell (Fut/Eq) | $CB=Call Buy, $CS=Call Sell, $PB=Put Buy, $PS=Put Sell (Options)">i</span>
                     </div>
                     <div id="cfgSeries"></div>
                     <button style="width:100%; margin-top:8px; border:1px dashed var(--border); background:transparent; color:var(--text-secondary); height:32px; font-weight:600;" onclick="Config.addSeriesRow()">+ Add Line</button>
@@ -666,7 +638,6 @@ function extractRequiredVars(seriesList) {
 const CustomDD = {
     data: { cfgRoot:[], cfgExp: [], cfgInst: [] },
     recent: { cfgRoot:[] },
-
     init() {
         const saved = localStorage.getItem('dc_recent_symbols');
         if (saved) try { this.recent.cfgRoot = JSON.parse(saved); } catch(e){}
@@ -704,10 +675,8 @@ const CustomDD = {
             .filter((v, i, a) => a.findIndex(t => t.val === v.val) === i)
             .filter(item => item.val.toLowerCase().includes(q));
 
-        if (!filtered.length) {
-            el.innerHTML = '<div class="custom-dd-opt" style="color:var(--text-secondary);">No matches</div>';
-            return;
-        }
+        if (!filtered.length) { el.innerHTML = '<div class="custom-dd-opt" style="color:var(--text-secondary);">No matches</div>'; return; }
+        
         let html = '', currentGroup = null;
         filtered.forEach(item => {
             if (item.group && item.group !== currentGroup) {
@@ -738,52 +707,14 @@ const CustomDD = {
 // ===================================================
 const App = {
     state: { date: null, mode: 'LIVE', columns: 3, layout: [[], [],[]], charts: {}, refreshRate: 15 },
-
     presets: {
-        "Basic Flow (Fut/Eq)":[
-            { formula: '$P',       label: 'Price',    axis: 'left',  color1: '#2f81f7', cond: 'none' },
-            { formula: '$B',       label: 'Buy',      axis: 'right', color1: '#238636', cond: 'none' },
-            { formula: '$S',       label: 'Sell',     axis: 'right', color1: '#da3633', cond: 'none' }
-        ],
-        "Net Flow (Fut/Eq)":[
-            { formula: '$P',       label: 'Price',    axis: 'left',  color1: '#2f81f7', cond: 'none' },
-            { formula: '$B - $S',  label: 'Net Flow', axis: 'right', color1: '#238636', cond: '>', thresh: '0', color2: '#da3633', labelTrue: 'BUY', labelFalse: 'SELL' }
-        ],
-        "Call Flow (Options)":[
-            { formula: '$P',       label: 'Price',     axis: 'left',  color1: '#2f81f7', cond: 'none' },
-            { formula: '$CB',      label: 'Call Buy',  axis: 'right', color1: '#238636', cond: 'none' },
-            { formula: '$CS',      label: 'Call Sell', axis: 'right', color1: '#da3633', cond: 'none' }
-        ],
-        "Put Flow (Options)":[
-            { formula: '$P',       label: 'Price',     axis: 'left',  color1: '#2f81f7', cond: 'none' },
-            { formula: '$PB',      label: 'Put Buy',   axis: 'right', color1: '#238636', cond: 'none' },
-            { formula: '$PS',      label: 'Put Sell',  axis: 'right', color1: '#da3633', cond: 'none' }
-        ],
-        "Aggregated Flow (Options)":[
-            { formula: '$P',            label: 'Price',      axis: 'left',  color1: '#2f81f7', cond: 'none' },
-            { formula: '$CB + $PS',     label: 'Bull Side',  axis: 'right', color1: '#238636', cond: 'none' },
-            { formula: '$PB + $CS',     label: 'Bear Side',  axis: 'right', color1: '#da3633', cond: 'none' }
-        ],
-        "Net Flow (Options)":[
-            { formula: '$P',                        label: 'Price',    axis: 'left',  color1: '#2f81f7', cond: 'none' },
-            { formula: '$CB + $PS - ($PB + $CS)',   label: 'Net Flow', axis: 'right', color1: '#238636', cond: '>', thresh: '0', color2: '#da3633', labelTrue: 'BULLISH', labelFalse: 'BEARISH' }
-        ],
-        "Price & Flows (Advanced)":[
-            { formula: '$P',            label: 'Spot Price', axis: 'left',  color1: '#2f81f7', cond: 'none' },
-            { formula: '$CB + $PS',     label: 'Bull Side',  axis: 'right', color1: '#238636', cond: 'none' },
-            { formula: '$PB + $CS',     label: 'Bear Side',  axis: 'right', color1: '#da3633', cond: 'none' }
-        ],
-        "Net Flow (Advanced)":[
-            { formula: '$P',                        label: 'Spot Price', axis: 'left',  color1: '#2f81f7', cond: 'none' },
-            { formula: '$CB + $PS - ($PB + $CS)',   label: 'Net Flow',   axis: 'right', color1: '#238636', cond: '>', thresh: '0', color2: '#da3633', labelTrue: 'BULLISH', labelFalse: 'BEARISH' }
-        ],
-        "Components (Advanced)":[
-            { formula: '$P',   label: 'Spot Price', axis: 'left',  color1: '#2f81f7', cond: 'none' },
-            { formula: '$CB',  label: 'Call Buy',   axis: 'right', color1: '#238636', cond: 'none' },
-            { formula: '$CS',  label: 'Call Sell',  axis: 'right', color1: '#3fb950', cond: 'none' },
-            { formula: '$PB',  label: 'Put Buy',    axis: 'right', color1: '#da3633', cond: 'none' },
-            { formula: '$PS',  label: 'Put Sell',   axis: 'right', color1: '#f85149', cond: 'none' }
-        ]
+        "Basic Flow (Fut/Eq)":[{ formula: '$P', label: 'Price', axis: 'left', color1: '#2f81f7', cond: 'none' }, { formula: '$B', label: 'Buy', axis: 'right', color1: '#238636', cond: 'none' }, { formula: '$S', label: 'Sell', axis: 'right', color1: '#da3633', cond: 'none' }],
+        "Net Flow (Fut/Eq)":[{ formula: '$P', label: 'Price', axis: 'left', color1: '#2f81f7', cond: 'none' }, { formula: '$B - $S', label: 'Net Flow', axis: 'right', color1: '#238636', cond: '>', thresh: '0', color2: '#da3633', labelTrue: 'BUY', labelFalse: 'SELL' }],
+        "Call Flow (Options)":[{ formula: '$P', label: 'Price', axis: 'left', color1: '#2f81f7', cond: 'none' }, { formula: '$CB', label: 'Call Buy', axis: 'right', color1: '#238636', cond: 'none' }, { formula: '$CS', label: 'Call Sell', axis: 'right', color1: '#da3633', cond: 'none' }],
+        "Put Flow (Options)":[{ formula: '$P', label: 'Price', axis: 'left', color1: '#2f81f7', cond: 'none' }, { formula: '$PB', label: 'Put Buy', axis: 'right', color1: '#238636', cond: 'none' }, { formula: '$PS', label: 'Put Sell', axis: 'right', color1: '#da3633', cond: 'none' }],
+        "Aggregated Flow (Options)":[{ formula: '$P', label: 'Price', axis: 'left', color1: '#2f81f7', cond: 'none' }, { formula: '$CB + $PS', label: 'Bull Side', axis: 'right', color1: '#238636', cond: 'none' }, { formula: '$PB + $CS', label: 'Bear Side', axis: 'right', color1: '#da3633', cond: 'none' }],
+        "Price & Flows (Advanced)":[{ formula: '$P', label: 'Spot Price', axis: 'left', color1: '#2f81f7', cond: 'none' }, { formula: '$CB + $PS', label: 'Bull Side', axis: 'right', color1: '#238636', cond: 'none' }, { formula: '$PB + $CS', label: 'Bear Side', axis: 'right', color1: '#da3633', cond: 'none' }],
+        "Net Flow (Advanced)":[{ formula: '$P', label: 'Spot Price', axis: 'left', color1: '#2f81f7', cond: 'none' }, { formula: '$CB + $PS - ($PB + $CS)', label: 'Net Flow', axis: 'right', color1: '#238636', cond: '>', thresh: '0', color2: '#da3633', labelTrue: 'BULLISH', labelFalse: 'BEARISH' }]
     },
 
     async init() {
@@ -793,41 +724,25 @@ const App = {
         if (savedPresets) try { this.presets = { ...this.presets, ...JSON.parse(savedPresets) }; } catch(e) {}
 
         const saved = localStorage.getItem('dc_pro_v4_state');
-        if (saved) {
-            try {
-                const s = JSON.parse(saved);
-                this.state = { ...this.state, ...s };
-            } catch(e) { this.initDefault(); }
-        } else {
-            this.initDefault();
-        }
+        if (saved) { try { const s = JSON.parse(saved); this.state = { ...this.state, ...s }; } catch(e) { this.initDefault(); } } 
+        else this.initDefault();
 
         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;
+        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();
+        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);
-        }
+        this.state.columns = 3; this.state.layout = [[], [],[]]; this.state.refreshRate = 15;
+        for (let i = 0; i < 3; i++) { this.addChartInternal(i); this.addChartInternal(i); }
     },
 
     async loadDates() {
         try {
-            const res = await fetch('/api/dates');
-            const dates = await res.json();
+            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) {}
@@ -839,6 +754,7 @@ const App = {
         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 };
@@ -848,57 +764,39 @@ const App = {
             refreshRate: this.state.refreshRate, charts: cleanCharts
         }));
     },
+
     reset() { if (confirm('Reset Workspace?')) { localStorage.removeItem('dc_pro_v4_state'); location.reload(); } },
+
     setLayout(n) {
         const all = this.state.layout.flat();
-        this.state.columns = n;
-        this.state.layout = Array.from({ length: n }, () =>[]);
+        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 = '';
-
+        const container = document.getElementById('gridRoot'); container.innerHTML = '';
         this.state.layout.forEach((ids, colIdx) => {
-            const col = document.createElement('div');
-            col.className = 'column';
-            const viewH = window.innerHeight - 52;
-            const count = ids.length;
-
+            const col = document.createElement('div'); col.className = 'column';
+            const viewH = window.innerHeight - 52; const count = ids.length;
             ids.forEach(id => {
-                if (this.state.charts[id]?.instance) {
-                    this.state.charts[id].instance.destroy();
-                    this.state.charts[id].instance = null;
-                }
+                if (this.state.charts[id]?.instance) { this.state.charts[id].instance.destroy(); this.state.charts[id].instance = null; }
                 const card = this.createCardDOM(id);
                 card.style.height = (count > 0 && count <= 3) ? `calc(${viewH / count}px - 1px)` : '300px';
                 col.appendChild(card);
                 setTimeout(() => ChartLogic.plot(id), 0);
             });
-
-            const btn = document.createElement('button');
-            btn.className = 'add-chart-btn';
-            btn.innerText = '+ Add Chart';
+            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);
+            col.appendChild(btn); container.appendChild(col);
         });
     },
 
     createCardDOM(id) {
-        const div = document.createElement('div');
-        div.className = 'chart-card';
-        div.id = `card-${id}`;
-
-        const cfg = this.state.charts[id]?.config || {};
-        const isCfg = cfg && cfg.root;
-        const modeTag = cfg.chartMode === 'advanced'
-            ? `<span class="inst-label">2N (±${cfg.atmRange || 5})</span>`
-            : `<span class="inst-label">${cfg.instrument || ''}</span>`;
-
+        const div = document.createElement('div'); div.className = 'chart-card'; div.id = `card-${id}`;
+        const cfg = this.state.charts[id]?.config || {}; const isCfg = cfg && cfg.root;
+        const modeTag = cfg.chartMode === 'advanced' ? `<span class="inst-label">ATM ± ${cfg.atmRange || 5}</span>` : `<span class="inst-label">${cfg.instrument || ''}</span>`;
         div.innerHTML = `
             <div class="card-header">
                 <div class="card-info">
@@ -940,8 +838,7 @@ const App = {
         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();
+        }; loop();
     }
 };
 
@@ -970,16 +867,9 @@ const ChartLogic = {
                 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,
-                    required_vars: requiredVars
+                    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, required_vars: requiredVars
                 })
             });
             const data = await res.json();
@@ -989,8 +879,7 @@ const ChartLogic = {
                     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 Found'}</div>`;
                 }
-                if (dot) dot.classList.remove('retry');
-                return;
+                if (dot) dot.classList.remove('retry'); return;
             }
 
             chart.lastData = data;
@@ -999,15 +888,11 @@ const ChartLogic = {
             if (dot) dot.className = `status-dot ${App.state.mode === 'LIVE' ? 'live' : 'hist'}`;
 
             const datasets = (cfg.series ||[]).map(s => {
-                const vals = data.labels.map((_, i) => {
-                    const vars = {
-                        P:  safeVal(data, 'P',  i), B:  safeVal(data, 'B',  i), S:  safeVal(data, 'S',  i),
-                        CB: safeVal(data, 'CB', i), CS: safeVal(data, 'CS', i),
-                        PB: safeVal(data, 'PB', i), PS: safeVal(data, 'PS', i),
-                        V:  safeVal(data, 'V',  i), OI: safeVal(data, 'OI', i)
-                    };
-                    return evalFormula(s.formula, vars);
-                });
+                const vals = data.labels.map((_, i) => evalFormula(s.formula, {
+                    P: safeVal(data, 'P', i), B: safeVal(data, 'B', i), S: safeVal(data, 'S', i),
+                    CB: safeVal(data, 'CB', i), CS: safeVal(data, 'CS', i), PB: safeVal(data, 'PB', i),
+                    PS: safeVal(data, 'PS', i), V: safeVal(data, 'V', i), OI: safeVal(data, 'OI', i)
+                }));
 
                 const ds = {
                     label: s.label, data: vals, borderWidth: 1.5, pointRadius: 0,
@@ -1016,10 +901,8 @@ const ChartLogic = {
 
                 if (s.cond && s.cond !== 'none') {
                     const thresh = parseFloat(s.thresh) || 0;
-                    const cTrue = s.color1 || '#238636';
-                    const cFalse = s.color2 || '#da3633';
+                    const cTrue = s.color1 || '#238636'; const cFalse = s.color2 || '#da3633';
                     const condFn = (v) => s.cond === '>' ? v > thresh : v < thresh;
-
                     ds.segment = { borderColor: ctx => condFn(ctx.p1.parsed.y) ? cTrue : cFalse };
                     ds.borderColor = cTrue; ds.backgroundColor = cTrue;
                     ds.pointHoverBackgroundColor = ctx => condFn(ctx.raw) ? cTrue : cFalse;
@@ -1030,24 +913,19 @@ const ChartLogic = {
                 }
                 return ds;
             });
-
             this.render(id, data.labels, datasets, cfg.series ||[]);
 
         } catch(e) { console.error('ChartLogic.plot error:', e); }
     },
 
     render(id, labels, datasets, seriesConfig) {
-        const ctx = document.getElementById(`canvas-${id}`);
-        if (!ctx) return;
+        const ctx = document.getElementById(`canvas-${id}`); if (!ctx) return;
         const chart = App.state.charts[id];
 
-        if (chart.instance && chart.instance.ctx?.canvas !== ctx) {
-            chart.instance.destroy(); chart.instance = null;
-        }
+        if (chart.instance && chart.instance.ctx?.canvas !== ctx) { chart.instance.destroy(); chart.instance = null; }
 
         if (chart.instance) {
-            chart.instance.data.labels = labels;
-            chart.instance.data.datasets = datasets;
+            chart.instance.data.labels = labels; chart.instance.data.datasets = datasets;
             chart.instance.update('none');
         } else {
             const hasRight = datasets.some(d => d.yAxisID === 'y1');
@@ -1059,15 +937,12 @@ const ChartLogic = {
                     plugins: {
                         legend: { display: false },
                         tooltip: {
-                            backgroundColor: 'rgba(22,27,34,0.97)',
-                            titleColor: '#e6edf3', bodyColor: '#8b949e',
+                            backgroundColor: 'rgba(22,27,34,0.97)', titleColor: '#e6edf3', bodyColor: '#8b949e',
                             borderColor: '#30363d', borderWidth: 1, padding: 10,
                             callbacks: {
                                 label: function(context) {
-                                    const s = seriesConfig[context.datasetIndex];
-                                    if (!s) return '';
-                                    const v = context.parsed.y;
-                                    const fv = v !== null ? v.toFixed(2) : 'N/A';
+                                    const s = seriesConfig[context.datasetIndex]; if (!s) return '';
+                                    const v = context.parsed.y; const fv = v !== null ? v.toFixed(2) : 'N/A';
                                     let condText = '';
                                     if (s.cond && s.cond !== 'none') {
                                         const thresh = parseFloat(s.thresh) || 0;
@@ -1078,13 +953,11 @@ const ChartLogic = {
                                     return `${s.label}: ${fv}${condText}`;
                                 },
                                 labelColor: function(context) {
-                                    const s = seriesConfig[context.datasetIndex];
-                                    if (!s) return { borderColor: '#fff', backgroundColor: '#fff' };
+                                    const s = seriesConfig[context.datasetIndex]; if (!s) return { borderColor: '#fff', backgroundColor: '#fff' };
                                     let c = s.color1 || '#fff';
                                     if (s.cond && s.cond !== 'none') {
-                                        const thresh = parseFloat(s.thresh) || 0;
-                                        const v = context.parsed.y;
-                                        c = (s.cond === '>' ? v > thresh : v < thresh) ? (s.color1 || '#238636') : (s.color2 || '#da3633');
+                                        const thresh = parseFloat(s.thresh) || 0; const v = context.parsed.y;
+                                        const isTrue = s.cond === '>' ? v > thresh : v < thresh; c = isTrue ? (s.color1 || '#238636') : (s.color2 || '#da3633');
                                     }
                                     return { borderColor: c, backgroundColor: c };
                                 }
@@ -1103,62 +976,42 @@ const ChartLogic = {
 };
 
 // ===================================================
-// BREAKDOWN TABLE WITH SUB-TABLES
+// BREAKDOWN TABLE
 // ===================================================
 const Breakdown = {
     open(id) {
         const chart = App.state.charts[id];
-        if (!chart || !chart.lastData || !chart.config.series) {
-            alert('No data loaded yet. Please wait for chart to load.');
-            return;
-        }
-
-        const data = chart.lastData;
-        const cfg = chart.config;
-        const series = cfg.series;
-        
-        // Check if breakdown JSON is present and populated
-        const hasBreakdown = data.breakdown && data.breakdown.some(b => b && b.length > 0);
+        if (!chart || !chart.lastData || !chart.config.series) return alert('No data loaded yet.');
 
+        const data = chart.lastData; const cfg = chart.config; const series = cfg.series;
         const allVarKeys =['P', 'CB', 'CS', 'PB', 'PS', 'B', 'S', 'V', 'OI'];
         const presentVars = allVarKeys.filter(k => data[k] && data[k].some(v => v && v !== 0));
 
-        // Header
         let thead = '<thead><tr><th>Time</th>';
-        if (hasBreakdown) thead += '<th style="text-align:center;">Details</th>';
         presentVars.forEach(v => { thead += `<th>${v}</th>`; });
         series.forEach(s => { thead += `<th>${s.label}</th>`; });
         thead += '</tr></thead>';
 
-        // Body
         let tbody = '<tbody>';
         data.labels.forEach((lbl, i) => {
             const vars = {
-                P:  safeVal(data, 'P',  i), B:  safeVal(data, 'B',  i), S:  safeVal(data, 'S',  i),
+                P: safeVal(data, 'P', i), B: safeVal(data, 'B', i), S: safeVal(data, 'S', i),
                 CB: safeVal(data, 'CB', i), CS: safeVal(data, 'CS', i), PB: safeVal(data, 'PB', i),
-                PS: safeVal(data, 'PS', i), V:  safeVal(data, 'V',  i), OI: safeVal(data, 'OI', i)
+                PS: safeVal(data, 'PS', i), V: safeVal(data, 'V', i), OI: safeVal(data, 'OI', i)
             };
 
-            tbody += `<tr><td>${lbl}</td>`;
-            
-            if (hasBreakdown) {
-                const bdArr = data.breakdown[i] ||[];
-                if (bdArr.length > 0) {
-                    tbody += `<td style="text-align:center;"><button class="tool-btn tool-btn-small" onclick="Breakdown.toggleSubRow('${id}', ${i})">▼ Strikes</button></td>`;
-                } else {
-                    tbody += `<td></td>`;
-                }
-            }
+            const hasDetails = data.details && data.details[i] && data.details[i] !== null;
+            const expBtn = hasDetails ? `<button class="expand-btn" onclick="Breakdown.toggleRow('sub-${id}-${i}')">+</button>` : '';
+
+            tbody += `<tr><td>${expBtn} ${lbl}</td>`;
 
             presentVars.forEach(k => {
-                const v = vars[k];
-                const cls = v > 0 ? 'val-pos' : (v < 0 ? 'val-neg' : '');
+                const v = vars[k]; const cls = v > 0 ? 'val-pos' : (v < 0 ? 'val-neg' : '');
                 tbody += `<td class="${cls}">${v.toFixed(2)}</td>`;
             });
 
             series.forEach(s => {
-                const result = evalFormula(s.formula, vars);
-                const rv = result !== null ? result : 0;
+                const rv = evalFormula(s.formula, vars) || 0;
                 let cls = rv > 0 ? 'val-pos' : (rv < 0 ? 'val-neg' : '');
                 let condLabel = '';
                 if (s.cond && s.cond !== 'none') {
@@ -1170,62 +1023,47 @@ const Breakdown = {
                 }
                 tbody += `<td class="${cls}">${rv.toFixed(2)}${condLabel}</td>`;
             });
-            tbody += '</tr>';
 
-            // Insert hidden Sub-Table if breakdown exists
-            if (hasBreakdown && (data.breakdown[i] || []).length > 0) {
-                const bd = data.breakdown[i];
-                const strikes = {};
-                bd.forEach(item => {
-                    if (!strikes[item.strike]) strikes[item.strike] = { CE_B: 0, CE_S: 0, PE_B: 0, PE_S: 0 };
-                    if (item.type === 'CE') { strikes[item.strike].CE_B = item.b; strikes[item.strike].CE_S = item.s; }
-                    if (item.type === 'PE') { strikes[item.strike].PE_B = item.b; strikes[item.strike].PE_S = item.s; }
-                });
+            tbody += '</tr>';
 
-                // Find closest strike to Spot Price
-                const spotPrice = vars.P;
-                let closestStrike = null;
-                let minDiff = Infinity;
-                Object.keys(strikes).forEach(k => {
-                    const diff = Math.abs(parseFloat(k) - spotPrice);
-                    if (diff < minDiff) { minDiff = diff; closestStrike = k; }
+            // Individual Sub-Calculation Strike Detail Injection
+            if (hasDetails) {
+                const det = data.details[i];
+                const strikesMap = {};
+                det.forEach(d => {
+                    if (!strikesMap[d.k]) strikesMap[d.k] = { CE: null, PE: null };
+                    strikesMap[d.k][d.t] = d;
                 });
-
-                let subHtml = `<div style="padding:4px 10px 14px 10px;">
-                    <div style="font-size:10px; color:var(--text-secondary); margin-bottom:4px;">STRIKES SELECTED FOR ${lbl} (Spot: ${spotPrice})</div>
-                    <table class="sub-table" style="width:100%;">
-                    <tr><th style="text-align:left;">Strike</th><th style="text-align:right;">CE Buy</th><th style="text-align:right;">CE Sell</th><th style="text-align:right;">PE Buy</th><th style="text-align:right;">PE Sell</th></tr>`;
-
-                Object.keys(strikes).sort((a,b)=>a-b).forEach(k => {
-                    const isAtm = (k === closestStrike);
-                    const rowCls = isAtm ? 'atm-row' : '';
-                    subHtml += `<tr class="${rowCls}">
-                        <td style="text-align:left; font-weight:bold; color:var(--text-primary);">${k} ${isAtm ? '<span style="font-size:9px; color:var(--accent); margin-left:4px;">(ATM)</span>' : ''}</td>
-                        <td class="val-pos" style="text-align:right;">${strikes[k].CE_B.toFixed(2)}</td>
-                        <td class="val-neg" style="text-align:right;">${strikes[k].CE_S.toFixed(2)}</td>
-                        <td class="val-pos" style="text-align:right;">${strikes[k].PE_B.toFixed(2)}</td>
-                        <td class="val-neg" style="text-align:right;">${strikes[k].PE_S.toFixed(2)}</td>
+                const sortedStrikes = Object.keys(strikesMap).map(Number).sort((a,b) => a-b);
+                
+                let subHtml = `<div class="sub-table-wrapper"><table class="sub-table">
+                    <tr><th>STRIKE</th><th>CE BUY</th><th>CE SELL</th><th>PE BUY</th><th>PE SELL</th><th>CE VOL</th><th>PE VOL</th></tr>`;
+                
+                sortedStrikes.forEach(k => {
+                    const ce = strikesMap[k].CE || {b:0, s:0, v:0};
+                    const pe = strikesMap[k].PE || {b:0, s:0, v:0};
+                    subHtml += `<tr>
+                        <td style="text-align:center; font-weight:bold; color:var(--text-primary); background:#161b22; border-right:1px solid var(--border);">${k}</td>
+                        <td class="${ce.b>0?'val-pos':''}">${ce.b}</td><td class="${ce.s>0?'val-neg':''}">${ce.s}</td>
+                        <td class="${pe.b>0?'val-pos':''}">${pe.b}</td><td class="${pe.s>0?'val-neg':''}">${pe.s}</td>
+                        <td>${ce.v}</td><td>${pe.v}</td>
                     </tr>`;
                 });
                 subHtml += `</table></div>`;
-
-                const colspan = 1 + 1 + presentVars.length + series.length;
-                tbody += `<tr id="subrow-${id}-${i}" style="display:none; background:var(--bg-header);"><td colspan="${colspan}" style="padding:0;">${subHtml}</td></tr>`;
+                tbody += `<tr id="sub-${id}-${i}" class="sub-table-row"><td colspan="100" style="padding:0;">${subHtml}</td></tr>`;
             }
         });
         tbody += '</tbody>';
 
-        document.getElementById('bdTitle').innerText = `Breakdown: ${cfg.root} ${cfg.expiry} — ${cfg.chartMode === 'advanced' ? '2N (±' + (cfg.atmRange || 5) + ')' : (cfg.instrument || '')}`;
+        document.getElementById('bdTitle').innerText = `Breakdown: ${cfg.root} ${cfg.expiry} — ${cfg.chartMode === 'advanced' ? 'ATM ± ' + (cfg.atmRange || 5) : (cfg.instrument || '')}`;
         document.getElementById('bdMeta').innerText = `Timeframe: ${cfg.timeframe || '1min'} | Range: ${cfg.start} – ${cfg.end} | ${data.labels.length} bars`;
         document.getElementById('bdTable').innerHTML = thead + tbody;
         document.getElementById('breakdownModal').style.display = 'flex';
     },
 
-    toggleSubRow(chartId, index) {
-        const row = document.getElementById(`subrow-${chartId}-${index}`);
-        if (row) {
-            row.style.display = row.style.display === 'none' ? 'table-row' : 'none';
-        }
+    toggleRow(rowId) {
+        const el = document.getElementById(rowId);
+        if(el) el.style.display = el.style.display === 'table-row' ? 'none' : 'table-row';
     }
 };
 
@@ -1242,7 +1080,6 @@ const Config = {
         btns[1].classList.toggle('active', mode === 'advanced');
         document.getElementById('cfgAdvancedFields').style.display = mode === 'advanced' ? 'block' : 'none';
         document.getElementById('lblInst').innerText = mode === 'normal' ? 'Instrument' : 'Reference Spot/Fut (ATM Ref Price)';
-        document.getElementById('advInstHint').style.display = mode === 'advanced' ? 'block' : 'none';
         this.updatePresetsDropdown();
         const defPreset = mode === 'advanced' ? 'Price & Flows (Advanced)' : 'Aggregated Flow (Options)';
         this.loadPreset(defPreset);
@@ -1253,87 +1090,60 @@ const Config = {
     },
     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]);
-        }
+        if (name && App.presets[name]) { document.getElementById('cfgPresetsDropdown').value = name; this.renderSeries(App.presets[name]); }
     },
     savePreset() {
         const name = prompt('Name for this model:', 'Custom Model');
         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;
+        this.updatePresetsDropdown(); document.getElementById('cfgPresetsDropdown').value = name;
     },
     deletePreset() {
         const name = document.getElementById('cfgPresetsDropdown').value;
-        const locked =['Basic Flow (Fut/Eq)', 'Net Flow (Fut/Eq)', 'Call Flow (Options)',
-                        'Put Flow (Options)', 'Aggregated Flow (Options)', 'Net Flow (Options)',
-                        'Price & Flows (Advanced)', 'Net Flow (Advanced)', 'Components (Advanced)'];
+        const locked =['Basic Flow (Fut/Eq)', 'Net Flow (Fut/Eq)', 'Call Flow (Options)', 'Put Flow (Options)', 'Aggregated Flow (Options)', 'Price & Flows (Advanced)', 'Net Flow (Advanced)'];
         if (locked.includes(name)) return alert('Cannot delete default models.');
-        if (confirm(`Delete model '${name}'?`)) {
-            delete App.presets[name];
-            localStorage.setItem('dc_pro_v4_presets', JSON.stringify(App.presets));
-            this.updatePresetsDropdown();
-            this.loadPreset();
-        }
+        if (confirm(`Delete model '${name}'?`)) { delete App.presets[name]; localStorage.setItem('dc_pro_v4_presets', JSON.stringify(App.presets)); this.updatePresetsDropdown(); this.loadPreset(); }
     },
 
     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();
+        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';
 
-        CustomDD.clear('cfgRoot');
-        const res = await fetch(`/api/roots?date=${App.state.date}`);
-        const roots = await res.json();
+        this.updatePresetsDropdown(); CustomDD.clear('cfgRoot');
+        const res = await fetch(`/api/roots?date=${App.state.date}`); const roots = await res.json();
         CustomDD.set('cfgRoot', roots);
 
         const cfg = App.state.charts[id].config;
-        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 = cfg.timeframe || '1min';
+        document.getElementById('cfgStart').value = cfg.start || '09:15';
+        document.getElementById('cfgEnd').value = cfg.end || '15:30';
         document.getElementById('cfgAtmRange').value = cfg.atmRange || 5;
 
         this.currentMode = cfg.chartMode || 'normal';
         const btns = document.querySelectorAll('#cfgModeToggle .seg-btn');
-        btns[0].classList.toggle('active', this.currentMode === 'normal');
-        btns[1].classList.toggle('active', this.currentMode === 'advanced');
+        btns[0].classList.toggle('active', this.currentMode === 'normal'); btns[1].classList.toggle('active', this.currentMode === 'advanced');
         document.getElementById('cfgAdvancedFields').style.display = this.currentMode === 'advanced' ? 'block' : 'none';
         document.getElementById('lblInst').innerText = this.currentMode === 'normal' ? 'Instrument' : 'Reference Spot/Fut (ATM Ref Price)';
-        document.getElementById('advInstHint').style.display = this.currentMode === 'advanced' ? 'block' : 'none';
 
         if (cfg.series && cfg.series.length > 0) this.renderSeries(cfg.series);
         else this.loadPreset(this.currentMode === 'advanced' ? 'Price & Flows (Advanced)' : 'Aggregated Flow (Options)');
 
-        document.getElementById('cfgRoot').value = cfg.root    || '';
-        document.getElementById('cfgExp').value  = cfg.expiry  || '';
-        document.getElementById('cfgInst').value = cfg.instrument || '';
-
+        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';
+        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('cfgLoading').style.display = 'none';
-        document.getElementById('cfgContent').style.display = 'block';
-        document.getElementById('cfgGlobalOnly').style.display = 'block';
-        document.getElementById('cfgChartOnly').style.display = 'none';
-        document.getElementById('cfgRefresh').value = App.state.refreshRate || 15;
+        this.isGlobal = true; document.getElementById('configModal').style.display = 'flex';
+        document.getElementById('cfgTitle').innerText = 'Global Settings'; document.getElementById('cfgLoading').style.display = 'none';
+        document.getElementById('cfgContent').style.display = 'block'; document.getElementById('cfgGlobalOnly').style.display = 'block';
+        document.getElementById('cfgChartOnly').style.display = 'none'; document.getElementById('cfgRefresh').value = App.state.refreshRate || 15;
         this.updatePresetsDropdown();
     },
+
     close() { document.getElementById('configModal').style.display = 'none'; },
 
     async onRootChange(preExp, preInst) {
@@ -1343,81 +1153,50 @@ const Config = {
         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();
+        const res = await fetch(`/api/expiries?date=${App.state.date}&root=${root}`); const exps = await res.json();
         CustomDD.set('cfgExp', exps);
 
-        if (preExp && exps.includes(preExp)) {
-            document.getElementById('cfgExp').value = preExp;
-            await this.onExpChange(preInst);
-        } else if (exps.length > 0) {
+        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 (auto.current) { document.getElementById('cfgExp').value = auto.current.expiry; await this.onExpChange(auto.current.instrument); }
         }
     },
 
     async onExpChange(preInst) {
-        const root = document.getElementById('cfgRoot').value.toUpperCase();
-        const exp  = document.getElementById('cfgExp').value.toUpperCase();
-        CustomDD.clear('cfgInst');
-        if (!root || !exp) return;
-
-        const res = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${exp}`);
-        const data = await res.json();
+        const root = document.getElementById('cfgRoot').value.toUpperCase(); const exp = document.getElementById('cfgExp').value.toUpperCase();
+        CustomDD.clear('cfgInst'); if (!root || !exp) return;
+        const res = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${exp}`); const data = await res.json();
         if (data.spot_fut.length > 0) CustomDD.set('cfgInst', data.spot_fut, 'Futures & Equity');
         if (data.options.length > 0) CustomDD.set('cfgInst', data.options, 'Options');
         if (preInst) document.getElementById('cfgInst').value = preInst;
     },
 
-    toggleCond(sel) {
-        const condGroup = sel.closest('.series-row').querySelector('.series-row-cond');
-        if (condGroup) condGroup.style.display = sel.value === 'none' ? 'none' : 'flex';
-    },
+    toggleCond(sel) { const condGroup = sel.closest('.series-row').querySelector('.series-row-cond'); if (condGroup) condGroup.style.display = sel.value === 'none' ? 'none' : 'flex'; },
 
-    renderSeries(list) {
-        const c = document.getElementById('cfgSeries');
-        c.innerHTML = '';
-        list.forEach(s => this._appendSeriesRow(c, s));
-    },
+    renderSeries(list) { const c = document.getElementById('cfgSeries'); c.innerHTML = ''; list.forEach(s => this._appendSeriesRow(c, s)); },
 
     _appendSeriesRow(container, s = {}) {
-        const r = document.createElement('div');
-        r.className = 'series-row';
+        const r = document.createElement('div'); r.className = 'series-row';
         const showCond = s.cond && s.cond !== 'none';
         r.innerHTML = `
             <div class="series-row-top">
                 <input type="text" value="${s.formula || '$P'}" class="s-form" placeholder="Formula (e.g. $CB + $PS)" style="flex:1;">
                 <input type="text" value="${s.label || 'Line'}" class="s-lbl" placeholder="Label" style="width:90px;">
-                <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>
+                <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); width:28px; background:rgba(218,54,51,0.1);" onclick="this.closest('.series-row').remove()">✕</button>
             </div>
             <div class="series-row-bottom">
                 <input type="color" value="${s.color1 || '#2f81f7'}" class="color-input s-color1" title="Line Color">
-                <select class="s-cond" style="width:76px;" onchange="Config.toggleCond(this)">
-                    <option value="none" ${!s.cond || s.cond === 'none' ? 'selected' : ''}>Solid</option>
-                    <option value=">"    ${s.cond === '>' ? 'selected' : ''}>If &gt;</option>
-                    <option value="<"    ${s.cond === '<' ? 'selected' : ''}>If &lt;</option>
-                </select>
+                <select class="s-cond" style="width:76px;" onchange="Config.toggleCond(this)"><option value="none" ${!s.cond || s.cond === 'none' ? 'selected' : ''}>Solid</option><option value=">" ${s.cond === '>' ? 'selected' : ''}>If &gt;</option><option value="<" ${s.cond === '<' ? 'selected' : ''}>If &lt;</option></select>
             </div>
             <div class="series-row-cond" style="display:${showCond ? 'flex' : 'none'};">
-                <span class="cond-label">Threshold:</span>
-                <input type="number" class="s-thresh" value="${s.thresh || 0}" style="width:65px;">
-                <span class="cond-label">True →</span>
-                <input type="color" value="${s.color1 || '#238636'}" class="color-input s-color1-cond" title="Color when True">
-                <input type="text" class="s-label-true" value="${s.labelTrue || ''}" placeholder="e.g. BULLISH" style="width:80px;">
-                <span class="cond-label">False →</span>
-                <input type="color" value="${s.color2 || '#da3633'}" class="color-input s-color2" title="Color when False">
-                <input type="text" class="s-label-false" value="${s.labelFalse || ''}" placeholder="e.g. BEARISH" style="width:80px;">
+                <span class="cond-label">Threshold:</span><input type="number" class="s-thresh" value="${s.thresh || 0}" style="width:65px;">
+                <span class="cond-label">True →</span><input type="color" value="${s.color1 || '#238636'}" class="color-input s-color1-cond" title="Color when True"><input type="text" class="s-label-true" value="${s.labelTrue || ''}" placeholder="e.g. BULLISH" style="width:80px;">
+                <span class="cond-label">False →</span><input type="color" value="${s.color2 || '#da3633'}" class="color-input s-color2" title="Color when False"><input type="text" class="s-label-false" value="${s.labelFalse || ''}" placeholder="e.g. BEARISH" style="width:80px;">
             </div>
         `;
-        const solidColor = r.querySelector('.s-color1');
-        const condTrueColor = r.querySelector('.s-color1-cond');
+        const solidColor = r.querySelector('.s-color1'); const condTrueColor = r.querySelector('.s-color1-cond');
         solidColor.addEventListener('input', () => { if (condTrueColor) condTrueColor.value = solidColor.value; });
         container.appendChild(r);
     },
@@ -1428,50 +1207,27 @@ const Config = {
         return Array.from(document.querySelectorAll('#cfgSeries .series-row')).map(r => {
             const cond = r.querySelector('.s-cond')?.value || 'none';
             return {
-                formula:    r.querySelector('.s-form')?.value || '$P',
-                label:      r.querySelector('.s-lbl')?.value  || 'Line',
-                axis:       r.querySelector('.s-axis')?.value || 'left',
-                color1:     r.querySelector('.s-color1-cond')?.value || r.querySelector('.s-color1')?.value || '#2f81f7',
-                cond,
-                thresh:     r.querySelector('.s-thresh')?.value   || '0',
-                color2:     r.querySelector('.s-color2')?.value    || '#da3633',
-                labelTrue:  r.querySelector('.s-label-true')?.value  || '',
-                labelFalse: r.querySelector('.s-label-false')?.value || ''
+                formula: r.querySelector('.s-form')?.value || '$P', label: r.querySelector('.s-lbl')?.value || 'Line', axis: r.querySelector('.s-axis')?.value || 'left',
+                color1: r.querySelector('.s-color1-cond')?.value || r.querySelector('.s-color1')?.value || '#2f81f7', cond,
+                thresh: r.querySelector('.s-thresh')?.value || '0', color2: r.querySelector('.s-color2')?.value || '#da3633',
+                labelTrue: r.querySelector('.s-label-true')?.value || '', labelFalse: r.querySelector('.s-label-false')?.value || ''
             };
         });
     },
 
     saveChartConfig() {
-        if (this.isGlobal) {
-            App.state.refreshRate = parseInt(document.getElementById('cfgRefresh').value) || 15;
-            App.save();
-            this.close();
-            return;
-        }
-
-        const root = document.getElementById('cfgRoot').value.toUpperCase();
-        const exp  = document.getElementById('cfgExp').value.toUpperCase();
+        if (this.isGlobal) { App.state.refreshRate = parseInt(document.getElementById('cfgRefresh').value) || 15; App.save(); this.close(); return; }
+        const root = document.getElementById('cfgRoot').value.toUpperCase(); const exp = document.getElementById('cfgExp').value.toUpperCase();
         const inst = document.getElementById('cfgInst').value.toUpperCase();
-
         if (!root || !exp) return alert('Please select a Symbol and Expiry.');
-
-        const series = this.extractSeriesFromDOM();
-        if (!series.length) return alert('Add at least one plot line.');
+        const series = this.extractSeriesFromDOM(); if (!series.length) return alert('Add at least one plot line.');
 
         App.state.charts[this.tid].config = {
-            chartMode:  this.currentMode,
-            atmRange:   parseInt(document.getElementById('cfgAtmRange').value) || 5,
-            root, expiry: exp, instrument: inst,
-            timeframe:  document.getElementById('cfgTF').value,
-            start:      document.getElementById('cfgStart').value,
-            end:        document.getElementById('cfgEnd').value,
-            series
+            chartMode: this.currentMode, atmRange: parseInt(document.getElementById('cfgAtmRange').value) || 5,
+            root, expiry: exp, instrument: inst, timeframe: document.getElementById('cfgTF').value,
+            start: document.getElementById('cfgStart').value, end: document.getElementById('cfgEnd').value, series
         };
-
-        App.save();
-        App.renderGrid();
-        ChartLogic.plot(this.tid);
-        this.close();
+        App.save(); App.renderGrid(); ChartLogic.plot(this.tid); this.close();
     }
 };