Update app.py

app.py

@@ -1,13 +1,13 @@
+--- START OF FILE app.py ---
 import pandas as pd
 import requests
 import uvicorn
 import json
 import asyncio
-import re
+import numpy as np
 from datetime import datetime, timedelta
 from fastapi import FastAPI, Body, HTTPException
 from fastapi.responses import HTMLResponse, JSONResponse
-from fastapi.staticfiles import StaticFiles
 from typing import Optional, List, Dict, Any
 
 # ==========================================
@@ -28,7 +28,6 @@ app = FastAPI()
 # 2. HELPER FUNCTIONS
 # ==========================================
 def sb_get(endpoint: str, params: dict = None):
-    """Generic Supabase GET helper."""
     try:
         url = f"{SB_URL}/rest/v1{endpoint}"
         r = requests.get(url, headers=HEADERS, params=params)
@@ -36,7 +35,7 @@ def sb_get(endpoint: str, params: dict = None):
         return r.json()
     except Exception as e:
         print(f"DB Error ({endpoint}): {e}")
-        return[]
+        return []
 
 # ==========================================
 # 3. API ROUTES - METADATA
@@ -48,88 +47,45 @@ def home():
 
 @app.get("/api/dates")
 def get_dates():
-    """Fetch distinct dates."""
-    data = sb_get("/history_buckets_fyers", {"select": "minute", "order": "minute.desc", "limit": "50000"})
-    dates = set()
-    for row in data:
-        if row.get('minute'):
-            dates.add(row['minute'].split('T')[0])
-    return JSONResponse(sorted(list(dates), reverse=True))
+    data = sb_get("/history_buckets_fyers", {"select": "minute", "order": "minute.desc", "limit": "20000"})
+    dates = sorted(list(set(row['minute'].split('T')[0] for row in data if row.get('minute'))), reverse=True)
+    return JSONResponse(dates)
 
 @app.get("/api/roots")
 def get_roots(date: str):
-    """Fetch roots available for a specific date."""
     start, end = f"{date}T00:00:00", f"{date}T23:59:59"
     data = sb_get(f"/history_buckets_fyers?select=root&minute=gte.{start}&minute=lte.{end}")
-    roots = set()
-    for row in data:
-        if row.get('root'):
-            roots.add(row['root'])
-    return JSONResponse(sorted(list(roots)))
+    roots = sorted(list(set(row['root'] for row in data if row.get('root'))))
+    return JSONResponse(roots)
 
-@app.get("/api/auto_config")
-def get_auto_config(date: str, root: str):
-    """Smart helper for defaults (Current/Next expiry)."""
+@app.get("/api/config_meta")
+def get_config_meta(date: str, root: str):
+    """Returns expiries and categorizes instruments into Futures and Options."""
     start, end = f"{date}T00:00:00", f"{date}T23:59:59"
-    data = sb_get(f"/history_buckets_fyers?select=expiry,data&root=eq.{root}&expiry=neq.MARKET&minute=gte.{start}&minute=lte.{end}&limit=50")
+    data = sb_get(f"/history_buckets_fyers?select=expiry,data&root=eq.{root}&minute=gte.{start}&minute=lte.{end}&limit=100")
+    
+    expiries = sorted(list(set(row['expiry'] for row in data)))
+    
+    # Analyze one bucket to separate Futures/Spot from Options
+    futures = set()
+    options = set()
     
-    expiry_map = {} 
-    for row in data:
-        exp = row.get('expiry')
-        if not exp: continue
-        if exp not in expiry_map:
-            keys = list(row.get('data', {}).keys())
-            expiry_map[exp] = keys
-        else:
-            existing = set(expiry_map[exp])
-            new_keys = row.get('data', {}).keys()
-            expiry_map[exp] = list(existing.union(new_keys))
-
-    all_expiries = sorted(expiry_map.keys())
-    valid_expiries = [e for e in all_expiries if e >= date]
-    if not valid_expiries:
-        valid_expiries = all_expiries
-
-    response = {"expiries": all_expiries, "current": None, "next": None}
-
-    def find_fut(instruments):
-        for i in instruments:
-            if 'FUT' in i: return i
-        return instruments[0] if instruments else None
-
-    if len(valid_expiries) > 0:
-        exp_c = valid_expiries[0]
-        inst_c = find_fut(expiry_map[exp_c])
-        response["current"] = {"expiry": exp_c, "instrument": inst_c}
-
-    if len(valid_expiries) > 1:
-        exp_n = valid_expiries[1]
-        inst_n = find_fut(expiry_map[exp_n])
-        response["next"] = {"expiry": exp_n, "instrument": inst_n}
-
-    return JSONResponse(response)
-
-@app.get("/api/expiries")
-def get_expiries(date: str, root: str):
-    """Fetch distinct expiries."""
-    start, end = f"{date}T00:00:00", f"{date}T23:59:59"
-    data = sb_get(f"/history_buckets_fyers?select=expiry&root=eq.{root}&minute=gte.{start}&minute=lte.{end}")
-    exps = set(row['expiry'] for row in data if row.get('expiry'))
-    return JSONResponse(sorted(list(exps)))
-
-@app.get("/api/instruments")
-def get_instruments(date: str, root: str, expiry: str):
-    """Fetch instruments."""
-    start, end = f"{date}T00:00:00", f"{date}T23:59:59"
-    data = sb_get(f"/history_buckets_fyers?select=data&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{start}&minute=lte.{end}&limit=5")
-    instruments = set()
     for row in data:
-        keys = row.get('data', {}).keys()
-        instruments.update(keys)
-    return JSONResponse(sorted(list(instruments)))
+        for inst in row.get('data', {}).keys():
+            if "CE" in inst or "PE" in inst:
+                # Extract root-like part for options (e.g., NIFTY24DEC25000CE -> NIFTY24DEC)
+                options.add(inst)
+            else:
+                futures.add(inst)
+                
+    return JSONResponse({
+        "expiries": expiries,
+        "futures": sorted(list(futures)),
+        "options": sorted(list(options))
+    })
 
 # ==========================================
-# 4. API ROUTES - DATA FETCHING
+# 4. CORE ENGINE - DATA FETCHING & ATM LOGIC
 # ==========================================
 
 @app.post("/api/fetch_series")
@@ -137,185 +93,145 @@ def fetch_series(
     date: str = Body(...),
     root: str = Body(...),
     expiry: str = Body(...),
-    instrument: str = Body(""),
-    timeframe: str = Body(...), 
+    mode: str = Body("STANDARD"), # STANDARD or ADVANCED
+    instrument: str = Body(None), # Used in Standard
+    range_val: int = Body(5),     # Used in Advanced (ATM +- 5)
+    timeframe: str = Body("1min"), 
     start_time: str = Body(...),
-    end_time: str = Body(...),
-    adv_mode: bool = Body(False),
-    atm_range: int = Body(5)
+    end_time: str = Body(...)
 ):
-    """
-    Fetches raw 10s data. Supports normal (optimized Postgres JSON filtering) 
-    and advanced mode (aggregated ATM +/- Options dynamics).
-    """
     t_start = f"{date}T{start_time}:00"
     t_end = f"{date}T{end_time}:59"
     
-    records =[]
-    
-    if not adv_mode:
-        # --- NORMAL MODE (Highly Optimized Postgres Select) ---
-        select_query = f'minute,inst_data:data->"{instrument}"'
-        url = f"/history_buckets_fyers?select={select_query}&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
-        rows = sb_get(url)
+    # 1. Fetch data. For Advanced mode, we need full JSON for the expiry.
+    # We also need a Reference Price (usually the first Future/Spot found in MARKET expiry)
+    if mode == "ADVANCED":
+        # Get Option Data
+        url_opt = f"/history_buckets_fyers?select=minute,data&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
+        # Get Reference Data (Spot/Future) to calculate ATM
+        url_ref = f"/history_buckets_fyers?select=minute,data&root=eq.{root}&expiry=eq.MARKET&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
         
-        for row in rows:
-            try:
-                base_ts = datetime.fromisoformat(row['minute'])
-                inst_data = row.get('inst_data')
+        opt_rows = sb_get(url_opt)
+        ref_rows = sb_get(url_ref)
+        
+        ref_map = {r['minute']: r['data'] for r in ref_rows}
+        
+        records = []
+        for row in opt_rows:
+            ts_base = datetime.fromisoformat(row['minute'])
+            opt_data = row.get('data', {})
+            ref_data = ref_map.get(row['minute'], {})
+            
+            # Find a reference price (Spot preferred, then Future)
+            def get_ref_p(idx):
+                for sym, d in ref_data.items():
+                    if "INDEX" in sym or "-EQ" in sym or "FUT" in sym:
+                        if d.get('p') and len(d['p']) > idx and d['p'][idx]:
+                            return d['p'][idx]
+                return None
+
+            # Process 10s buckets
+            for i in range(6):
+                lp = get_ref_p(i)
+                if lp is None: continue
                 
-                if not inst_data: continue
-
-                p_arr = inst_data.get('p', []) or []
-                b_arr = inst_data.get('b', []) or[]
-                s_arr = inst_data.get('s', []) or[]
-                v_arr = inst_data.get('v', []) or []
-                o_arr = inst_data.get('o',[]) or[]
+                # Identify ATM and Range
+                all_inst = opt_data.keys()
+                # Parse strikes: Expecting format like ...25000CE
+                strikes = []
+                for inst in all_inst:
+                    try:
+                        # Extract numeric part before CE/PE
+                        s_str = "".join(filter(str.isdigit, inst[-7:]))
+                        strikes.append(int(s_str))
+                    except: pass
                 
-                for i in range(6):
-                    if i < len(p_arr) and p_arr[i] is not None:
-                        records.append({
-                            "ts": base_ts + timedelta(seconds=i*10),
-                            "price": float(p_arr[i]),
-                            "buy_qty": float(b_arr[i]) if i < len(b_arr) and b_arr[i] else 0.0,
-                            "sell_qty": float(s_arr[i]) if i < len(s_arr) and s_arr[i] else 0.0,
-                            "volume": float(v_arr[i]) if i < len(v_arr) and v_arr[i] else 0.0,
-                            "oi": float(o_arr[i]) if i < len(o_arr) and o_arr[i] else 0.0
-                        })
-            except Exception:
-                continue
+                if not strikes: continue
+                strikes = sorted(list(set(strikes)))
+                atm = min(strikes, key=lambda x: abs(x - lp))
+                atm_idx = strikes.index(atm)
+                
+                # 11 strikes (5 ITM, ATM, 5 OTM)
+                start_idx = max(0, atm_idx - range_val)
+                end_idx = min(len(strikes), atm_idx + range_val + 1)
+                target_strikes = strikes[start_idx:end_idx]
+                
+                # Aggregators
+                cb, cs, pb, ps = 0, 0, 0, 0
+                vol, oi = 0, 0
+                
+                for inst, d in opt_data.items():
+                    # Check if this inst is in our strike range
+                    inst_strike = next((s for s in target_strikes if str(s) in inst), None)
+                    if inst_strike:
+                        b = d['b'][i] if d.get('b') and len(d['b']) > i and d['b'][i] else 0
+                        s = d['s'][i] if d.get('s') and len(d['s']) > i and d['s'][i] else 0
+                        v = d['v'][i] if d.get('v') and len(d['v']) > i and d['v'][i] else 0
+                        o = d['o'][i] if d.get('o') and len(d['o']) > i and d['o'][i] else 0
+                        
+                        vol += v
+                        oi += o
+                        if "CE" in inst:
+                            cb += b; cs += s
+                        elif "PE" in inst:
+                            pb += b; ps += s
+                
+                records.append({
+                    "ts": ts_base + timedelta(seconds=i*10),
+                    "price": lp, "vol": vol, "oi": oi,
+                    "cb": cb, "cs": cs, "pb": pb, "ps": ps,
+                    "b": cb + pb, "s": cs + ps # Total Buy/Sell
+                })
 
     else:
-        # --- ADVANCED MODE (Full JSON Fetch & Custom Multi-Strike Aggregation) ---
-        select_query = 'minute,data'
+        # STANDARD MODE: Simple JSON extraction
+        select_query = f'minute,inst_data:data->"{instrument}"'
         url = f"/history_buckets_fyers?select={select_query}&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
         rows = sb_get(url)
-        
-        last_p_ref = 0.0
-
+        records = []
         for row in rows:
-            try:
-                base_ts = datetime.fromisoformat(row['minute'])
-                data_dict = row.get('data', {})
-                if not data_dict: continue
-
-                # Identify reference instrument (Index, Equity or Future)
-                ref_inst = None
-                for inst in data_dict.keys():
-                    if "-EQ" in inst or "-INDEX" in inst or "FUT" in inst:
-                        ref_inst = inst
-                        break
-                
-                # Pre-parse option instruments to map strikes to CE/PE
-                options_meta = {}
-                strikes_set = set()
-                for inst in data_dict.keys():
-                    match = re.search(r'(\d+)(CE|PE)$', inst)
-                    if match:
-                        strike = int(match.group(1))
-                        opt_type = match.group(2)
-                        strikes_set.add(strike)
-                        if strike not in options_meta:
-                            options_meta[strike] = {}
-                        options_meta[strike][opt_type] = inst
-
-                sorted_strikes = sorted(list(strikes_set))
-                if not sorted_strikes: continue
-
-                # Process all 6 x 10sec slots inside the minute
-                for i in range(6):
-                    p_ref = last_p_ref
-                    if ref_inst and ref_inst in data_dict:
-                        p_arr = data_dict[ref_inst].get('p', [])
-                        if i < len(p_arr) and p_arr[i] is not None:
-                            p_ref = float(p_arr[i])
-                            last_p_ref = p_ref
-                    
-                    if p_ref == 0.0:
-                        continue
-
-                    # Dynamic ATM calculation per tick
-                    atm_strike = min(sorted_strikes, key=lambda x: abs(x - p_ref))
-                    atm_idx = sorted_strikes.index(atm_strike)
-
-                    start_idx = max(0, atm_idx - atm_range)
-                    end_idx = min(len(sorted_strikes) - 1, atm_idx + atm_range)
-                    selected_strikes = sorted_strikes[start_idx : end_idx + 1]
-
-                    cb_tot, cs_tot, pb_tot, ps_tot = 0.0, 0.0, 0.0, 0.0
-                    v_tot, o_tot = 0.0, 0.0
-
-                    for s in selected_strikes:
-                        # Call Accumulation
-                        ce_inst = options_meta[s].get('CE')
-                        if ce_inst:
-                            ce_data = data_dict[ce_inst]
-                            if i < len(ce_data.get('b',[])) and ce_data['b'][i] is not None: cb_tot += float(ce_data['b'][i])
-                            if i < len(ce_data.get('s', [])) and ce_data['s'][i] is not None: cs_tot += float(ce_data['s'][i])
-                            if i < len(ce_data.get('v', [])) and ce_data['v'][i] is not None: v_tot += float(ce_data['v'][i])
-                            if i < len(ce_data.get('o', [])) and ce_data['o'][i] is not None: o_tot += float(ce_data['o'][i])
-
-                        # Put Accumulation
-                        pe_inst = options_meta[s].get('PE')
-                        if pe_inst:
-                            pe_data = data_dict[pe_inst]
-                            if i < len(pe_data.get('b', [])) and pe_data['b'][i] is not None: pb_tot += float(pe_data['b'][i])
-                            if i < len(pe_data.get('s',[])) and pe_data['s'][i] is not None: ps_tot += float(pe_data['s'][i])
-                            if i < len(pe_data.get('v', [])) and pe_data['v'][i] is not None: v_tot += float(pe_data['v'][i])
-                            if i < len(pe_data.get('o', [])) and pe_data['o'][i] is not None: o_tot += float(pe_data['o'][i])
-
+            base_ts = datetime.fromisoformat(row['minute'])
+            d = row.get('inst_data')
+            if not d: continue
+            for i in range(6):
+                if d.get('p') and len(d['p']) > i and d['p'][i] is not None:
                     records.append({
                         "ts": base_ts + timedelta(seconds=i*10),
-                        "price": p_ref,
-                        "cb": cb_tot,
-                        "cs": cs_tot,
-                        "pb": pb_tot,
-                        "ps": ps_tot,
-                        "v": v_tot,
-                        "o": o_tot
+                        "price": float(d['p'][i]),
+                        "b": float(d['b'][i]) if d.get('b') and len(d['b']) > i and d['b'][i] else 0,
+                        "s": float(d['s'][i]) if d.get('s') and len(d['s']) > i and d['s'][i] else 0,
+                        "vol": float(d['v'][i]) if d.get('v') and len(d['v']) > i and d['v'][i] else 0,
+                        "oi": float(d['o'][i]) if d.get('o') and len(d['o']) > i and d['o'][i] else 0,
+                        "cb": 0, "cs": 0, "pb": 0, "ps": 0
                     })
-            except Exception as e:
-                print(f"Error parsing advanced row: {e}")
-                continue
 
     if not records:
-         return JSONResponse({"error": "No data found", "labels": [], "P":[]})
+         return JSONResponse({"error": "No data found"})
 
-    df = pd.DataFrame(records)
-    df.set_index('ts', inplace=True)
-    
-    tf_map = {
-        "1min": "1min", "3min": "3min", "5min": "5min", 
-        "15min": "15min", "30min": "30min", "1hour": "1h"
-    }
-    panda_tf = tf_map.get(timeframe, "1min")
+    df = pd.DataFrame(records).set_index('ts')
     
-    resampled = df.resample(panda_tf).median().dropna()
+    # Fill missing 10s data to avoid line distortion
+    df = df.resample('10s').ffill()
+
+    # Resample to Target Timeframe
+    tf_map = {"1min": "1min", "3min": "3min", "5min": "5min", "15min": "15min", "30min": "30min", "1hour": "1h"}
+    resampled = df.resample(tf_map.get(timeframe, "1min")).agg({
+        'price': 'last', 'vol': 'sum', 'oi': 'last',
+        'b': 'sum', 's': 'sum', 'cb': 'sum', 'cs': 'sum', 'pb': 'sum', 'ps': 'sum'
+    }).dropna()
     
-    # Return formatted JSON properly matching active mode
-    if not adv_mode:
-        response_data = {
-            "labels": resampled.index.strftime('%H:%M').tolist(),
-            "P": resampled['price'].tolist(),
-            "B": resampled['buy_qty'].tolist(),
-            "S": resampled['sell_qty'].tolist(),
-            "V": resampled['volume'].tolist(),
-            "OI": resampled['oi'].tolist()
-        }
-    else:
-        response_data = {
-            "labels": resampled.index.strftime('%H:%M').tolist(),
-            "P": resampled['price'].tolist(),
-            "CB": resampled['cb'].tolist(),
-            "CS": resampled['cs'].tolist(),
-            "PB": resampled['pb'].tolist(),
-            "PS": resampled['ps'].tolist(),
-            "V": resampled['v'].tolist(),
-            "OI": resampled['o'].tolist()
-        }
-    
-    return JSONResponse(response_data)
-
+    return JSONResponse({
+        "labels": resampled.index.strftime('%H:%M').tolist(),
+        "P": resampled['price'].tolist(),
+        "V": resampled['vol'].tolist(),
+        "OI": resampled['oi'].tolist(),
+        "B": resampled['b'].tolist(),
+        "S": resampled['s'].tolist(),
+        "CB": resampled['cb'].tolist(),
+        "CS": resampled['cs'].tolist(),
+        "PB": resampled['pb'].tolist(),
+        "PS": resampled['ps'].tolist()
+    })
 
 # ==========================================
 # 5. FRONTEND TEMPLATE
@@ -326,755 +242,399 @@ HTML_TEMPLATE = """
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>DepthChain PRO</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <title>DepthChain PRO v5</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&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;
-            --border-hover: #8b949e;
-            --text-primary: #e6edf3;
-            --text-secondary: #8b949e;
-            --accent: #2f81f7;
-            --success: #238636;
-            --danger: #da3633;
-            --warning: #d29922;
-            --font-main: 'Inter', sans-serif;
-            --font-mono: 'JetBrains Mono', monospace;
-        }
-        * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
-        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: 10px; height: 10px; }
-        ::-webkit-scrollbar-track { background: var(--bg-body); }
-        ::-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; 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;
-        }
-        select:focus, input:focus { border-color: var(--accent); }
-        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); 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; }
-        .column:last-child { border-right: none; }
-
-        .add-chart-btn {
-            height: 40px; border: none; border-top: 1px dashed var(--border); 
-            background: transparent; color: var(--text-secondary); width: 100%; font-weight: 600;
+            --bg-body: #0d1117; --bg-header: #161b22; --bg-card: #0d1117; --bg-panel: #21262d; 
+            --bg-input: #161b22; --border: #30363d; --text-primary: #e6edf3; --text-secondary: #8b949e;
+            --accent: #2f81f7; --success: #238636; --danger: #da3633; --warning: #d29922;
         }
-        .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; white-space: nowrap; overflow: hidden; }
-        .inst-label { color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 400; background:rgba(47,129,247,0.1); padding:2px 6px; border-radius:4px; }
-        .card-meta { color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        body { background: var(--bg-body); color: var(--text-primary); font-family: 'Inter', sans-serif; display: flex; flex-direction: column; height: 100vh; overflow: hidden; font-size: 13px; }
         
-        .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); }
-        .status-dot.retry { background: var(--warning); }
-        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }
-
-        .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); background: radial-gradient(circle, var(--bg-panel) 0%, var(--bg-card) 100%); }
+        .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; color: var(--text-primary); }
+        .brand span { color: var(--accent); background: rgba(47, 129, 247, 0.1); padding: 2px 6px; border-radius: 4px; font-size: 11px; margin-left: 5px; }
+        
+        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; }
+        button.primary { background: var(--accent); color: white; border: none; font-weight: 600; }
+        button.primary:hover { opacity: 0.9; }
+
+        .main-container { flex: 1; display: flex; overflow-y: auto; }
+        .column { flex: 1; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
+        .chart-card { border-bottom: 1px solid var(--border); display: flex; flex-direction: column; position: relative; }
+        .card-header { height: 40px; background: var(--bg-header); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--border); }
+        .card-body { flex: 1; position: relative; }
+        
+        .status-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }
+        .dot-live { background: var(--success); box-shadow: 0 0 8px var(--success); }
+        .dot-hist { background: var(--accent); }
 
         /* MODAL */
-        .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: 480px; max-width: 90%; 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; background: var(--bg-card); }
+        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 1000; }
+        .modal { background: var(--bg-header); border: 1px solid var(--border); border-radius: 12px; width: 550px; max-width: 95%; overflow: hidden; }
+        .modal-tab-bar { display: flex; border-bottom: 1px solid var(--border); background: var(--bg-body); }
+        .modal-tab { flex: 1; padding: 12px; text-align: center; cursor: pointer; color: var(--text-secondary); font-weight: 600; }
+        .modal-tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); background: var(--bg-header); }
+        .modal-content { padding: 20px; }
+        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
+        .form-group label { display: block; font-size: 11px; color: var(--text-secondary); margin-bottom: 5px; text-transform: uppercase; font-weight: 700; }
         
-        .form-section label { font-size: 11px; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; margin-bottom: 6px; display: block; }
-        .series-row { display: grid; grid-template-columns: 32px 1fr 1fr 60px 24px; gap: 8px; align-items: center; margin-bottom: 6px; }
-        .color-input { padding: 0; width: 100%; border: none; background: none; height: 28px; cursor: pointer; }
-
-        /* TOOLTIP & INFO ICON */
-        .tooltip-container { position: relative; display: inline-flex; align-items: center; cursor: help; margin-left:8px; }
-        .tooltip-icon { 
-            width: 14px; height: 14px; border-radius: 50%; background: var(--border-hover); 
-            color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: bold; 
-        }
-        .tooltip-content { 
-            visibility: hidden; width: 220px; background: var(--bg-panel); color: var(--text-primary); text-align: left; 
-            border: 1px solid var(--border); border-radius: 6px; padding: 12px; position: absolute; z-index: 10; 
-            bottom: 125%; left: 50%; margin-left: -110px; opacity: 0; transition: opacity 0.2s; 
-            font-size: 11px; font-weight: normal; font-family: var(--font-mono); box-shadow: 0 4px 12px rgba(0,0,0,0.5);
-            text-transform: none; line-height: 1.4;
-        }
-        .tooltip-container:hover .tooltip-content { visibility: visible; opacity: 1; }
-        optgroup { background: var(--bg-panel); color: var(--text-primary); font-weight: bold; }
+        .series-row { display: grid; grid-template-columns: 35px 1fr 1fr 60px 30px; gap: 8px; align-items: center; margin-bottom: 8px; }
+        .info-icon { display: inline-block; width: 14px; height: 14px; background: var(--bg-panel); color: var(--text-secondary); border-radius: 50%; text-align: center; font-size: 10px; line-height: 14px; cursor: help; margin-left: 5px; }
+        
+        .empty-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.5; }
+        
+        .layout-btn { width: 32px; font-weight: bold; }
+        .layout-btn.active { background: var(--accent); border-color: var(--accent); }
     </style>
 </head>
 <body>
 
 <div class="top-bar">
-    <div class="brand">DepthChain <span>PRO</span></div>
-    <div class="controls">
-        <select id="globalDate" onchange="App.onDateChange()" style="min-width: 140px;"></select>
-        <div style="position: relative;">
-            <select id="globalMode" onchange="App.onModeChange()" style="padding-left: 28px; font-weight: 600;">
-                <option value="LIVE">LIVE</option>
-                <option value="HIST">HISTORY</option>
-            </select>
-            <div id="modeDot" class="status-dot live" style="position: absolute; left: 10px; top: 12px; pointer-events: none;"></div>
-        </div>
-        <div style="width:1px; height: 20px; background: var(--border);"></div>
-        <div class="layout-toggle">
+    <div class="brand">DEPTHCHAIN <span>PRO v5</span></div>
+    <div style="display:flex; gap:10px;">
+        <select id="globalDate" onchange="App.onDateChange()"></select>
+        <select id="globalMode" onchange="App.onModeChange()">
+            <option value="LIVE">LIVE</option>
+            <option value="HIST">HISTORY</option>
+        </select>
+        <div style="width:1px; background:var(--border); margin: 0 10px;"></div>
+        <div id="layoutGroup">
             <button class="layout-btn" 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>
+        <button onclick="App.reset()" style="color:var(--danger)">Reset</button>
     </div>
 </div>
 
 <div class="main-container" id="gridRoot"></div>
 
-<!-- CONFIG MODAL -->
-<div class="modal-backdrop" id="configModal">
+<div class="modal-overlay" id="configModal">
     <div class="modal">
-        <div class="modal-head">
-            <span id="cfgTitle">Configure Chart</span>
-            <button class="tool-btn" onclick="Config.close()">✕</button>
+        <div class="modal-tab-bar">
+            <div class="modal-tab" id="tabStandard" onclick="Config.setMode('STANDARD')">STANDARD MODE</div>
+            <div class="modal-tab" id="tabAdvanced" onclick="Config.setMode('ADVANCED')">ADVANCED (ATM Range)</div>
         </div>
-        <div class="modal-body">
-            <div id="cfgLoading" style="display:none; text-align:center; color:var(--text-secondary);">Loading...</div>
-            <div id="cfgContent">
-                
-                <!-- Global Settings Mode -->
-                <div id="cfgGlobalOnly" style="display:none;">
-                    <div class="form-section">
-                        <label>Refresh Rate (Seconds)</label>
-                        <input type="number" id="cfgRefresh" value="15" min="5">
-                    </div>
-                    <div style="height:1px; background:var(--border); margin: 16px 0;"></div>
+        <div class="modal-content">
+            <div class="form-grid">
+                <div class="form-group">
+                    <label>Root Symbol</label>
+                    <select id="cfgRoot" onchange="Config.onRootChange()" style="width:100%"></select>
+                </div>
+                <div class="form-group">
+                    <label>Expiry</label>
+                    <select id="cfgExp" onchange="Config.onExpChange()" style="width:100%"></select>
                 </div>
+            </div>
 
-                <!-- Single Chart Config Mode -->
-                <div id="cfgChartOnly">
-                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;">
-                        <div class="form-section">
-                            <label>Symbol</label>
-                            <select id="cfgRoot" onchange="Config.onRootChange()" style="width:100%"></select>
-                        </div>
-                        <div class="form-section">
-                            <label>Expiry</label>
-                            <select id="cfgExp" onchange="Config.onExpChange()" style="width:100%"></select>
-                        </div>
-                    </div>
+            <div id="uiStandard">
+                <div class="form-group">
+                    <label>Instrument</label>
+                    <select id="cfgInst" style="width:100%"></select>
+                </div>
+            </div>
 
-                    <!-- Mode Toggle & Instrument / ATM Options -->
-                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background:rgba(255,255,255,0.02);">
-                        <div class="form-section" style="margin-bottom:0;">
-                            <label>Analysis Mode</label>
-                            <select id="cfgMode" onchange="Config.onChartModeChange()" style="width:100%">
-                                <option value="normal">Normal (Single)</option>
-                                <option value="advanced">Advanced (ATM Options)</option>
-                            </select>
-                        </div>
-                        
-                        <!-- Normal Mode: Instrument Selector -->
-                        <div class="form-section" id="instBox" style="margin-bottom:0;">
-                            <label>Instrument</label>
-                            <select id="cfgInst" style="width:100%"></select>
-                        </div>
-                        
-                        <!-- Advanced Mode: ATM Range Input -->
-                        <div class="form-section" id="atmBox" style="margin-bottom:0; display:none;">
-                            <label>ATM +/- Strikes</label>
-                            <input type="number" id="cfgAtm" value="5" min="1" max="25" style="width:100%">
-                        </div>
-                    </div>
+            <div id="uiAdvanced" style="display:none">
+                <div class="form-group">
+                    <label>ATM Strike Range (+-)<span class="info-icon" title="Aggregates 11 strikes: 5 ITM + ATM + 5 OTM">?</span></label>
+                    <input type="number" id="cfgRange" value="5" style="width:100%">
+                </div>
+            </div>
 
-                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
-                        <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="30min">30 Minutes</option>
-                                <option value="1hour">1 Hour</option>
-                            </select>
-                        </div>
-                        <div class="form-section">
-                            <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">
-                            </div>
-                        </div>
+            <div class="form-grid" style="margin-top:15px;">
+                <div class="form-group">
+                    <label>Timeframe</label>
+                    <select id="cfgTF" style="width:100%">
+                        <option value="1min">1 Min</option><option value="5min">5 Min</option><option value="15min">15 Min</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label>Market Hours</label>
+                    <div style="display:flex; gap:5px;">
+                        <input type="time" id="cfgStart" value="09:15" style="flex:1">
+                        <input type="time" id="cfgEnd" value="15:30" style="flex:1">
                     </div>
-                    <div style="height:1px; background:var(--border); margin: 12px 0;"></div>
                 </div>
+            </div>
 
-                <!-- Common Series Config -->
-                <div class="form-section">
-                    <label style="display:flex; align-items:center;">
-                        Plot Series Formulas
-                        <div class="tooltip-container">
-                            <div class="tooltip-icon">i</div>
-                            <div class="tooltip-content">
-                                <strong style="color:var(--accent)">Global Variables:</strong><br>
-                                $P = Price (Spot/Future)<br>
-                                $V = Total Volume<br>
-                                $OI = Total Open Interest<br>
-                                $B = Total Buy Qty<br>
-                                $S = Total Sell Qty<br><br>
-                                <strong style="color:var(--warning)">Advanced Mode Only:</strong><br>
-                                $CB = Call Buy Qty<br>
-                                $CS = Call Sell Qty<br>
-                                $PB = Put Buy Qty<br>
-                                $PS = Put Sell Qty
-                            </div>
-                        </div>
-                    </label>
-                    <div id="cfgSeries"></div>
-                    <button style="width:100%; margin-top:8px; border:1px dashed var(--border); background:transparent; color:var(--text-secondary);" onclick="Config.addSeriesRow()">+ Add Line</button>
-                </div>
+            <div style="margin-top:20px; border-top:1px solid var(--border); padding-top:15px;">
+                <label style="font-size:11px; font-weight:700; color:var(--text-secondary);">PLOT SERIES 
+                    <span class="info-icon" title="Variables: $P(Price), $V(Vol), $O(OI), $B(Buy), $S(Sell), $CB(Call Buy), $CS(Call Sell), $PB(Put Buy), $PS(Put Sell)">?</span>
+                </label>
+                <div id="cfgSeriesList" style="margin-top:10px;"></div>
+                <button onclick="Config.addSeries()" style="width:100%; margin-top:10px; border-style:dashed;">+ Add New Line</button>
+            </div>
+
+            <div style="margin-top:20px; display:flex; justify-content:flex-end; gap:10px;">
+                <button onclick="Config.close()">Cancel</button>
+                <button class="primary" onclick="Config.save()">Apply Configuration</button>
             </div>
-        </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.save()">Save Configuration</button>
         </div>
     </div>
 </div>
 
 <script>
 const App = {
-    state: { date: null, mode: 'LIVE', columns: 3, layout: [[], [],[]], charts: {}, refreshRate: 15 },
-    defaults:[
-        { formula: '$P', color: '#2f81f7', label: 'Price', axis: 'left' },
-        { formula: '$B', color: '#238636', label: 'Buy', axis: 'right' },
-        { formula: '$S', color: '#da3633', label: 'Sell', axis: 'right' }
-    ],
-
+    state: { date: '', mode: 'LIVE', columns: 3, charts: {}, refreshRate: 15 },
+    
     async init() {
         await this.loadDates();
-        const saved = localStorage.getItem('dc_pro_v3_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();
-        }
-        
-        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;
+        const saved = localStorage.getItem('dc_pro_v5');
+        if (saved) this.state = {...this.state, ...JSON.parse(saved)};
+        else this.initDefault();
         
-        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);
-        }
+        setInterval(() => { if(this.state.mode === 'LIVE') this.refreshAll(true); }, this.state.refreshRate * 1000);
     },
 
     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('');
-            if(!this.state.date && dates.length) this.state.date = dates[0];
-        } 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 };
-        return id;
+        const res = await fetch('/api/dates');
+        const dates = await res.json();
+        const sel = document.getElementById('globalDate');
+        sel.innerHTML = dates.map(d => `<option value="${d}">${d}</option>`).join('');
+        this.state.date = sel.value;
     },
 
-    save() {
-        const cleanCharts = {};
-        for(let id in this.state.charts) cleanCharts[id] = { config: this.state.charts[id].config };
-        
-        localStorage.setItem('dc_pro_v3_final', JSON.stringify({
-            date: this.state.date,
-            mode: this.state.mode,
-            columns: this.state.columns,
-            layout: this.state.layout,
-            refreshRate: this.state.refreshRate,
-            charts: cleanCharts
-        }));
+    initDefault() {
+        for(let i=0; i<3; i++) this.addChart(i);
     },
 
-    reset() {
-        if(confirm("Reset Workspace?")) {
-            localStorage.removeItem('dc_pro_v3_final');
-            location.reload();
-        }
+    addChart(col) {
+        const id = 'ch_' + Math.random().toString(36).substr(2, 5);
+        this.state.charts[id] = { col, config: {} };
     },
 
     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();
     },
 
     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 root = document.getElementById('gridRoot');
+        root.innerHTML = '';
+        document.querySelectorAll('.layout-btn').forEach((b, i) => b.classList.toggle('active', (i+1)===this.state.columns));
 
-        this.state.layout.forEach((ids, colIdx) => {
+        for(let i=0; i<this.state.columns; i++) {
             const col = document.createElement('div');
             col.className = 'column';
-            const count = ids.length;
-            const viewH = window.innerHeight - 52;
-
+            const ids = Object.keys(this.state.charts).filter(k => this.state.charts[k].col === i);
+            
             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 = this.createCard(id);
                 col.appendChild(card);
-                setTimeout(() => ChartLogic.plot(id), 0);
+                this.plot(id);
             });
 
-            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 addBtn = document.createElement('button');
+            addBtn.innerText = '+ Add Chart';
+            addBtn.style.margin = '10px';
+            addBtn.onclick = () => { this.addChart(i); this.renderGrid(); };
+            col.appendChild(addBtn);
+            root.appendChild(col);
+        }
     },
 
-    createCardDOM(id) {
+    createCard(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;
-
-        let displayInst = cfg.instrument;
-        if(cfg.mode === 'advanced') {
-            displayInst = `ADV: ATM ±${cfg.atm_range}`;
-        }
-
+        div.style.flex = '1';
+        const cfg = this.state.charts[id].config;
         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 ? `<span class="inst-label">${displayInst}</span> <span class="card-meta">${cfg.expiry}</span>` : ''}
+                <div style="display:flex; align-items:center;">
+                    <div class="status-dot ${this.state.mode==='LIVE'?'dot-live':'dot-hist'}" id="dot-${id}"></div>
+                    <b style="font-family:JetBrains Mono">${cfg.root || 'New Chart'}</b>
+                    <small style="margin-left:10px; color:var(--text-secondary)">${cfg.mode || ''}</small>
                 </div>
-                <div class="card-tools">
-                    <button class="tool-btn" onclick="Config.open('${id}')">⚙</button>
-                    <button class="tool-btn" style="color:var(--danger)" onclick="App.removeChart('${id}')">✕</button>
+                <div>
+                    <button onclick="Config.open('${id}')" style="height:24px; padding:0 5px;">⚙</button>
+                    <button onclick="App.removeChart('${id}')" style="height:24px; padding:0 5px; color:var(--danger)">✕</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);" onclick="Config.open('${id}')">Configure</button>
-                    </div>
-                ` : `<canvas id="canvas-${id}"></canvas>`}
+                ${!cfg.root ? '<div class="empty-state">No Configuration</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();
-    },
+    removeChart(id) { delete this.state.charts[id]; this.renderGrid(); this.save(); },
+    onDateChange() { this.state.date = document.getElementById('globalDate').value; this.refreshAll(); },
+    onModeChange() { this.state.mode = document.getElementById('globalMode').value; this.refreshAll(); },
+    refreshAll(isUpdate=false) { Object.keys(this.state.charts).forEach(id => this.plot(id, isUpdate)); },
+    save() { localStorage.setItem('dc_pro_v5', JSON.stringify(this.state)); },
 
-    updateModeUI() {
-        document.getElementById('modeDot').className = `status-dot ${this.state.mode==='LIVE'?'live':'hist'}`;
-    },
-
-    refreshAll() { Object.keys(this.state.charts).forEach(id => ChartLogic.plot(id)); },
-    
-    startLoop() {
-        const loop = () => {
-            if(this.state.mode === 'LIVE') Object.keys(this.state.charts).forEach(id => ChartLogic.plot(id, true));
-            const rate = (this.state.refreshRate || 15) * 1000;
-            setTimeout(loop, rate);
-        };
-        loop();
-    }
-};
-
-const ChartLogic = {
     async plot(id, isUpdate=false) {
-        const chart = App.state.charts[id];
-        if(!chart || !chart.config.root) return;
-        
+        const chart = this.state.charts[id];
         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');
-        }
+        if(!cfg.root) return;
 
         try {
             const res = await fetch('/api/fetch_series', {
                 method: 'POST',
                 headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify({
-                    date: App.state.date, root: cfg.root, expiry: cfg.expiry,
-                    instrument: cfg.instrument || "", timeframe: cfg.timeframe,
-                    start_time: cfg.start, end_time: endTime,
-                    adv_mode: cfg.mode === 'advanced',
-                    atm_range: cfg.atm_range || 5
+                    date: this.state.date, root: cfg.root, expiry: cfg.expiry,
+                    mode: cfg.mode, instrument: cfg.instrument, range_val: cfg.range_val,
+                    timeframe: cfg.timeframe, start_time: cfg.start, end_time: cfg.end
                 })
             });
             const data = await res.json();
+            if(data.error) return;
 
-            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.5">No Data</div>';
-                }
-                if(dot) dot.classList.remove('retry');
-                return;
-            }
-
-            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'}`;
+            const ctx = document.getElementById(`canvas-${id}`);
+            if(!ctx) return;
 
             const datasets = cfg.series.map(s => {
                 const vals = data.labels.map((_, i) => {
-                    let f = s.formula
-                        .replace(/\$OI/g, data.OI ? (data.OI[i]||0) : 0)
-                        .replace(/\$CB/g, data.CB ? (data.CB[i]||0) : 0)
-                        .replace(/\$CS/g, data.CS ? (data.CS[i]||0) : 0)
-                        .replace(/\$PB/g, data.PB ? (data.PB[i]||0) : 0)
-                        .replace(/\$PS/g, data.PS ? (data.PS[i]||0) : 0)
-                        .replace(/\$P/g,  data.P ? (data.P[i]||0) : 0)
-                        .replace(/\$V/g,  data.V ? (data.V[i]||0) : 0)
-                        .replace(/\$B/g,  data.B ? (data.B[i]||0) : 0)
-                        .replace(/\$S/g,  data.S ? (data.S[i]||0) : 0);
-                    try { return new Function('return '+f)(); } catch{ return null; }
+                    const params = {
+                        $P: data.P[i], $V: data.V[i], $O: data.OI[i], 
+                        $B: data.B[i], $S: data.S[i], 
+                        $CB: data.CB[i], $CS: data.CS[i], $PB: data.PB[i], $PS: data.PS[i]
+                    };
+                    let f = s.formula;
+                    Object.keys(params).forEach(k => f = f.replace(new RegExp('\\\\'+k, 'g'), params[k] || 0));
+                    try { return eval(f); } catch { return 0; }
                 });
                 return {
                     label: s.label, data: vals, borderColor: s.color, backgroundColor: s.color,
-                    borderWidth: 1.5, pointRadius: 0, hitRadius: 10, tension: 0.1, yAxisID: s.axis==='left'?'y':'y1'
+                    borderWidth: 1.5, pointRadius: 0, yAxisID: s.axis === 'right' ? 'y1' : 'y'
                 };
             });
 
-            this.render(id, data.labels, datasets);
-
-        } catch(e) { console.error(e); }
-    },
-
-    render(id, labels, datasets) {
-        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;
-        }
-
-        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'), {
-                type: 'line',
-                data: { labels, datasets },
-                options: {
-                    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 }
-                    },
-                    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}} }
+            if(chart.instance && !isUpdate) { chart.instance.destroy(); chart.instance = null; }
+            
+            if(chart.instance) {
+                chart.instance.data.labels = data.labels;
+                chart.instance.data.datasets = datasets;
+                chart.instance.update('none');
+            } else {
+                chart.instance = new Chart(ctx, {
+                    type: 'line',
+                    data: { labels: data.labels, datasets },
+                    options: {
+                        responsive: true, maintainAspectRatio: false, animation: false,
+                        interaction: { mode: 'index', intersect: false },
+                        scales: {
+                            x: { grid: { color: '#21262d' }, ticks: { color: '#8b949e', maxTicksLimit: 8 } },
+                            y: { position: 'left', grid: { color: '#21262d' } },
+                            y1: { position: 'right', display: datasets.some(d => d.yAxisID === 'y1'), grid: { display: false } }
+                        },
+                        plugins: { legend: { display: false } }
                     }
-                }
-            });
-        }
+                });
+            }
+        } catch(e) { console.error(e); }
     }
 };
 
 const Config = {
-    tid: null, isGlobal: false,
+    currId: null, currMode: 'STANDARD',
+    
     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';
-
-        const rSel = document.getElementById('cfgRoot');
-        const res = await fetch(`/api/roots?date=${App.state.date}`);
-        const roots = await res.json();
-        rSel.innerHTML = `<option value="">-- Select --</option>` + roots.map(r=>`<option>${r}</option>`).join('');
-
+        this.currId = id;
         const cfg = App.state.charts[id].config;
+        this.setMode(cfg.mode || 'STANDARD');
+        document.getElementById('configModal').style.display = 'flex';
+        
+        const roots = await fetch(`/api/roots?date=${App.state.date}`).then(r => r.json());
+        document.getElementById('cfgRoot').innerHTML = roots.map(r => `<option>${r}</option>`).join('');
+        
+        if(cfg.root) {
+            document.getElementById('cfgRoot').value = cfg.root;
+            await this.onRootChange(cfg.expiry, cfg.instrument);
+        }
         
-        // Mode Setting
-        document.getElementById('cfgMode').value = cfg.mode || 'normal';
-        document.getElementById('cfgAtm').value = cfg.atm_range || 5;
-        this.onChartModeChange(false); // Update UI visibility, but don't reset series formulas
-
         document.getElementById('cfgTF').value = cfg.timeframe || '1min';
-        document.getElementById('cfgStart').value = cfg.start || '09:15';
-        document.getElementById('cfgEnd').value = cfg.end || '15:30';
-        this.renderSeries(cfg.series || App.defaults);
-
-        if(cfg.root) { rSel.value = cfg.root; await this.onRootChange(cfg.expiry, cfg.instrument); }
-        document.getElementById('cfgLoading').style.display = 'none';
-        document.getElementById('cfgContent').style.display = 'block';
+        document.getElementById('cfgRange').value = cfg.range_val || 5;
+        this.renderSeries(cfg.series || []);
     },
 
-    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';
+    setMode(m) {
+        this.currMode = m;
+        document.getElementById('tabStandard').classList.toggle('active', m === 'STANDARD');
+        document.getElementById('tabAdvanced').classList.toggle('active', m === 'ADVANCED');
+        document.getElementById('uiStandard').style.display = m === 'STANDARD' ? 'block' : 'none';
+        document.getElementById('uiAdvanced').style.display = m === 'ADVANCED' ? 'block' : 'none';
         
-        document.getElementById('cfgGlobalOnly').style.display = 'block';
-        document.getElementById('cfgChartOnly').style.display = 'none';
-        document.getElementById('cfgRefresh').value = App.state.refreshRate || 15;
-
-        this.renderSeries(App.defaults);
-    },
-
-    close() { document.getElementById('configModal').style.display = 'none'; },
-
-    onChartModeChange(resetSeries = true) {
-        const mode = document.getElementById('cfgMode').value;
-        if(mode === 'advanced') {
-            document.getElementById('instBox').style.display = 'none';
-            document.getElementById('atmBox').style.display = 'block';
-            if(resetSeries) {
-                // Default formula mapping as requested by user
-                this.renderSeries([
-                    { formula: '$CB + $PS', color: '#238636', label: 'Buyers', axis: 'left' },
-                    { formula: '$CS + $PB', color: '#da3633', label: 'Sellers', axis: 'left' },
-                    { formula: '$P', color: '#2f81f7', label: 'Price', axis: 'right' }
-                ]);
-            }
-        } else {
-            document.getElementById('instBox').style.display = 'block';
-            document.getElementById('atmBox').style.display = 'none';
-            if(resetSeries) {
-                this.renderSeries(App.defaults);
-            }
+        // Reset default series for Advanced Mode
+        if(m === 'ADVANCED' && document.getElementById('cfgSeriesList').children.length === 0) {
+            this.renderSeries([
+                { label: 'Buyers', formula: '$CB + $PS', color: '#238636', axis: 'left' },
+                { label: 'Sellers', formula: '$CS + $PB', color: '#da3633', axis: 'left' }
+            ]);
         }
     },
 
     async onRootChange(preExp, preInst) {
         const root = document.getElementById('cfgRoot').value;
-        const eSel = document.getElementById('cfgExp');
-        eSel.innerHTML = '<option>Loading...</option>';
-        const res = await fetch(`/api/expiries?date=${App.state.date}&root=${root}`);
-        const exps = await res.json();
-        eSel.innerHTML = `<option value="">-- Select --</option>` + exps.map(e=>`<option>${e}</option>`).join('');
+        const meta = await fetch(`/api/config_meta?date=${App.state.date}&root=${root}`).then(r => r.json());
         
-        if(preExp && exps.includes(preExp)) { eSel.value = preExp; await this.onExpChange(preInst); }
-        else {
-            const auto = await fetch(`/api/auto_config?date=${App.state.date}&root=${root}`).then(r=>r.json());
-            if(auto.current) { eSel.value = auto.current.expiry; await this.onExpChange(auto.current.instrument); }
-        }
+        document.getElementById('cfgExp').innerHTML = meta.expiries.map(e => `<option>${e}</option>`).join('');
+        if(preExp) document.getElementById('cfgExp').value = preExp;
+        
+        this.meta = meta;
+        this.onExpChange(preInst);
     },
 
-    async onExpChange(preInst) {
-        const root = document.getElementById('cfgRoot').value;
+    onExpChange(preInst) {
         const exp = document.getElementById('cfgExp').value;
         const iSel = document.getElementById('cfgInst');
-        iSel.innerHTML = '<option>Loading...</option>';
-        
-        const res = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${exp}`);
-        const insts = await res.json();
-        
-        // Split instruments neatly for Normal Mode
-        const futEq = insts.filter(i => !i.endswith('CE') && !i.endswith('PE'));
-        const opts = insts.filter(i => i.endswith('CE') || i.endswith('PE'));
-        
-        let html = '<option value="">-- Select --</option>';
-        if(futEq.length) {
-            html += '<optgroup label="Futures & Equity">';
-            html += futEq.map(i => `<option>${i}</option>`).join('');
-            html += '</optgroup>';
-        }
-        if(opts.length) {
-            html += '<optgroup label="Options">';
-            html += opts.map(i => `<option>${i}</option>`).join('');
-            html += '</optgroup>';
-        }
-        
-        iSel.innerHTML = html;
-        if(preInst && insts.includes(preInst)) iSel.value = preInst;
+        // Filter based on Expiry if needed, or show all
+        const list = exp === "MARKET" ? this.meta.futures : this.meta.options;
+        iSel.innerHTML = list.map(i => `<option>${i}</option>`).join('');
+        if(preInst) iSel.value = preInst;
     },
 
     renderSeries(list) {
-        const c = document.getElementById('cfgSeries'); c.innerHTML = '';
-        list.forEach(s => {
-            const r = document.createElement('div'); r.className = 'series-row';
-            r.innerHTML = `
-                <input type="color" value="${s.color}" class="color-input s-color">
-                <input type="text" value="${s.formula}" class="s-form" placeholder="$P">
-                <input type="text" value="${s.label}" class="s-lbl" placeholder="Label">
-                <select class="s-axis"><option value="left" ${s.axis==='left'?'selected':''}>L</option><option value="right" ${s.axis==='right'?'selected':''}>R</option></select>
-                <button class="tool-btn" style="color:var(--danger)" onclick="this.parentElement.remove()">✕</button>
-            `;
-            c.appendChild(r);
-        });
+        const cont = document.getElementById('cfgSeriesList');
+        cont.innerHTML = '';
+        if(list.length === 0) list = [{label: 'Price', formula: '$P', color: '#2f81f7', axis: 'left'}];
+        list.forEach(s => this.addSeries(s));
     },
 
-    addSeriesRow() {
-        const r = document.createElement('div'); r.className = 'series-row';
-        r.innerHTML = `
-            <input type="color" value="#ffffff" class="color-input s-color">
-            <input type="text" value="$P" class="s-form">
-            <input type="text" value="New" class="s-lbl">
-            <select class="s-axis"><option value="left">L</option><option value="right">R</option></select>
-            <button class="tool-btn" style="color:var(--danger)" onclick="this.parentElement.remove()">✕</button>
+    addSeries(s = {label: 'New', formula: '$P', color: '#ffffff', axis: 'left'}) {
+        const row = document.createElement('div');
+        row.className = 'series-row';
+        row.innerHTML = `
+            <input type="color" value="${s.color}" class="s-color" style="padding:0; border:none; height:28px;">
+            <input type="text" value="${s.formula}" class="s-form" placeholder="Formula">
+            <input type="text" value="${s.label}" class="s-lbl" placeholder="Label">
+            <select class="s-axis"><option value="left" ${s.axis==='left'?'selected':''}>L</option><option value="right" ${s.axis==='right'?'selected':''}>R</option></select>
+            <button onclick="this.parentElement.remove()" style="border:none; color:var(--danger)">✕</button>
         `;
-        document.getElementById('cfgSeries').appendChild(r);
+        document.getElementById('cfgSeriesList').appendChild(row);
     },
 
     save() {
-        const rows = document.querySelectorAll('#cfgSeries .series-row');
-        const series = Array.from(rows).map(r => ({
-            color: r.querySelector('.s-color').value, formula: r.querySelector('.s-form').value,
-            label: r.querySelector('.s-lbl').value, axis: r.querySelector('.s-axis').value
+        const series = Array.from(document.querySelectorAll('.series-row')).map(r => ({
+            color: r.querySelector('.s-color').value,
+            formula: r.querySelector('.s-form').value,
+            label: r.querySelector('.s-lbl').value,
+            axis: r.querySelector('.s-axis').value
         }));
 
-        if(this.isGlobal) { 
-            App.defaults = series;
-            App.state.refreshRate = parseInt(document.getElementById('cfgRefresh').value) || 15;
-            App.save();
-        } 
-        else {
-            const root = document.getElementById('cfgRoot').value;
-            const exp = document.getElementById('cfgExp').value;
-            const mode = document.getElementById('cfgMode').value;
-            const inst = document.getElementById('cfgInst').value;
-            const atm = parseInt(document.getElementById('cfgAtm').value) || 5;
-
-            if(!root || !exp || (mode === 'normal' && !inst)) return alert("Incomplete Details");
-
-            App.state.charts[this.tid].config = {
-                root, expiry: exp, instrument: inst,
-                mode: mode, atm_range: atm,
-                timeframe: document.getElementById('cfgTF').value,
-                start: document.getElementById('cfgStart').value,
-                end: document.getElementById('cfgEnd').value,
-                series
-            };
-            App.save();
-            App.renderGrid();
-            ChartLogic.plot(this.tid);
-        }
+        App.state.charts[this.tid || this.currId].config = {
+            mode: this.currMode,
+            root: document.getElementById('cfgRoot').value,
+            expiry: document.getElementById('cfgExp').value,
+            instrument: document.getElementById('cfgInst').value,
+            range_val: parseInt(document.getElementById('cfgRange').value),
+            timeframe: document.getElementById('cfgTF').value,
+            start: document.getElementById('cfgStart').value,
+            end: document.getElementById('cfgEnd').value,
+            series
+        };
+        App.save();
+        App.renderGrid();
         this.close();
-    }
+    },
+    close() { document.getElementById('configModal').style.display = 'none'; }
 };
 
 window.onload = () => App.init();