Update app.py

app.py

@@ -58,9 +58,10 @@ def get_dates():
 
 @app.get("/api/roots")
 def get_roots(date: str, q: Optional[str] = None):
-    """Fetch roots. If q is provided, search specifically."""
+    """Fetch roots. If q is provided, search specifically for that string."""
     start, end = f"{date}T00:00:00", f"{date}T23:59:59"
-    endpoint = f"/history_buckets_fyers?select=root&minute=gte.{start}&minute=lte.{end}"
+    # Ensure high limit so we don't hit default 1000 truncation
+    endpoint = f"/history_buckets_fyers?select=root&minute=gte.{start}&minute=lte.{end}&limit=5000"
     if q:
         endpoint += f"&root=ilike.*{q.upper()}*"
     
@@ -73,7 +74,7 @@ def get_roots(date: str, q: Optional[str] = None):
 
 @app.get("/api/auto_config")
 def get_auto_config(date: str, root: str):
-    """Smart helper for defaults."""
+    """Smart helper for defaults (Current/Next expiry)."""
     root = root.upper()
     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")
@@ -116,26 +117,28 @@ def get_auto_config(date: str, root: str):
 
 @app.get("/api/expiries")
 def get_expiries(date: str, root: str):
-    """Fetch all available expiries for root."""
+    """Fetch LITERALLY all distinct expiries for a specific root."""
     root = root.upper()
     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}")
+    # High limit to guarantee we catch every single expiry traded that day
+    data = sb_get(f"/history_buckets_fyers?select=expiry&root=eq.{root}&minute=gte.{start}&minute=lte.{end}&limit=5000")
     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 and segregate."""
+    """Fetch instruments and segregate into spot/future vs options."""
     root = root.upper()
     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=50")
+    # Limit 5 is enough since 1 row contains ALL instruments for that expiry in the JSON dict
+    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)
-    
-    spot_fut = []
-    options = []
+        
+    spot_fut =[]
+    options =[]
     for i in instruments:
         if i.endswith('CE') or i.endswith('PE'):
             options.append(i)
@@ -150,10 +153,15 @@ def get_instruments(date: str, root: str, expiry: str):
 
 @app.post("/api/fetch_series")
 def fetch_series(
-    date: str = Body(...), root: str = Body(...), expiry: str = Body(...),
-    instrument: str = Body(""), timeframe: str = Body(...), 
-    start_time: str = Body(...), end_time: str = Body(...),
-    mode: str = Body("normal"), atm_range: int = Body(5)
+    date: str = Body(...),
+    root: str = Body(...),
+    expiry: str = Body(...),
+    instrument: str = Body(""),
+    timeframe: str = Body(...), 
+    start_time: str = Body(...),
+    end_time: str = Body(...),
+    mode: str = Body("normal"),
+    atm_range: int = Body(5)
 ):
     root = root.upper()
     t_start = f"{date}T{start_time}:00"
@@ -172,6 +180,7 @@ def fetch_series(
         try:
             base_ts = datetime.fromisoformat(row['minute'])
             data_dict = row.get('data') if mode == 'advanced' else { instrument: row.get('inst_data') }
+            
             if not data_dict: continue
 
             if mode == 'advanced':
@@ -194,65 +203,114 @@ def fetch_series(
                     p_base = None
                     if base_key and base_key in data_dict:
                         p_arr = data_dict[base_key].get('p',[])
-                        if i < len(p_arr) and p_arr[i] is not None: p_base = float(p_arr[i])
+                        if i < len(p_arr) and p_arr[i] is not None:
+                            p_base = float(p_arr[i])
                     
                     if p_base is None: continue
 
                     atm_strike = min(sorted_strikes, key=lambda x: abs(x - p_base)) if sorted_strikes else None
                     target_strikes = set()
+                    
                     if atm_strike is not None:
                         atm_idx = sorted_strikes.index(atm_strike)
-                        target_strikes = set(sorted_strikes[max(0, atm_idx - atm_range):min(len(sorted_strikes), atm_idx + atm_range + 1)])
+                        start_idx = max(0, atm_idx - atm_range)
+                        end_idx = min(len(sorted_strikes), atm_idx + atm_range + 1)
+                        target_strikes = set(sorted_strikes[start_idx:end_idx])
 
                     cb, cs, pb, ps = 0.0, 0.0, 0.0, 0.0
                     tot_v, tot_oi = 0.0, 0.0
+                    
                     for k, meta in opt_keys.items():
                         if meta['strike'] in target_strikes:
                             k_data = data_dict[k]
-                            b_val = float(k_data.get('b', [0]*6)[i]) if i < 6 and k_data.get('b', [0]*6)[i] else 0.0
-                            s_val = float(k_data.get('s', [0]*6)[i]) if i < 6 and k_data.get('s', [0]*6)[i] else 0.0
-                            v_val = float(k_data.get('v', [0]*6)[i]) if i < 6 and k_data.get('v', [0]*6)[i] else 0.0
-                            o_val = float(k_data.get('o', [0]*6)[i]) if i < 6 and k_data.get('o', [0]*6)[i] else 0.0
-                            tot_v += v_val; tot_oi += o_val
-                            if meta['type'] == 'CE': cb += b_val; cs += s_val
-                            else: pb += b_val; ps += s_val
+                            bv = k_data.get('b', [0]*6)
+                            sv = k_data.get('s', [0]*6)
+                            vv = k_data.get('v', [0]*6)
+                            ov = k_data.get('o', [0]*6)
+                            
+                            b_val = float(bv[i]) if i < len(bv) and bv[i] else 0.0
+                            s_val = float(sv[i]) if i < len(sv) and sv[i] else 0.0
+                            v_val = float(vv[i]) if i < len(vv) and vv[i] else 0.0
+                            o_val = float(ov[i]) if i < len(ov) and ov[i] else 0.0
+                            
+                            tot_v += v_val
+                            tot_oi += o_val
+                            
+                            if meta['type'] == 'CE':
+                                cb += b_val
+                                cs += s_val
+                            else:
+                                pb += b_val
+                                ps += s_val
                     
                     records.append({
-                        "ts": base_ts + timedelta(seconds=i*10), "price": p_base,
-                        "buy_qty": cb + pb, "sell_qty": cs + ps, "volume": tot_v, "oi": tot_oi,
+                        "ts": base_ts + timedelta(seconds=i*10),
+                        "price": p_base,
+                        "buy_qty": cb + pb, 
+                        "sell_qty": cs + ps,
+                        "volume": tot_v,
+                        "oi": tot_oi,
                         "cb": cb, "cs": cs, "pb": pb, "ps": ps
                     })
+
             else: 
                 inst_data = data_dict.get(instrument)
                 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[]
+                
                 for i in range(6):
-                    p_arr = inst_data.get('p', [])
                     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(inst_data.get('b', [0]*6)[i] or 0),
-                            "sell_qty": float(inst_data.get('s', [0]*6)[i] or 0),
-                            "volume": float(inst_data.get('v', [0]*6)[i] or 0),
-                            "oi": float(inst_data.get('o', [0]*6)[i] or 0),
+                            "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,
                             "cb": 0.0, "cs": 0.0, "pb": 0.0, "ps": 0.0
                         })
-        except Exception: continue
+        except Exception:
+            continue
+
+    if not records:
+         return JSONResponse({"error": "No data found", "labels":[], "P":[]})
 
-    if not records: return JSONResponse({"error": "No data found", "labels":[], "P":[]})
-    df = pd.DataFrame(records).set_index('ts')
-    panda_tf = {"1min": "1min", "3min": "3min", "5min": "5min", "15min": "15min", "30min": "30min", "1hour": "1h"}.get(timeframe, "1min")
-    resampled = df.resample(panda_tf).agg({
-        "price": "last", "volume": "last", "oi": "last", "buy_qty": "mean", "sell_qty": "mean",
+    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")
+    
+    agg_dict = {
+        "price": "last", "volume": "last", "oi": "last",
+        "buy_qty": "mean", "sell_qty": "mean",
         "cb": "mean", "cs": "mean", "pb": "mean", "ps": "mean"
-    }).ffill().fillna(0)
+    }
     
-    return JSONResponse({
+    resampled = df.resample(panda_tf).agg(agg_dict).ffill().fillna(0)
+    
+    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(), "CB": resampled['cb'].tolist(),
-        "CS": resampled['cs'].tolist(), "PB": resampled['pb'].tolist(), "PS": resampled['ps'].tolist()
-    })
+        "P": resampled['price'].tolist(),
+        "B": resampled['buy_qty'].tolist(),
+        "S": resampled['sell_qty'].tolist(),
+        "V": resampled['volume'].tolist(),
+        "OI": resampled['oi'].tolist(),
+        "CB": resampled['cb'].tolist(),
+        "CS": resampled['cs'].tolist(),
+        "PB": resampled['pb'].tolist(),
+        "PS": resampled['ps'].tolist()
+    }
+    
+    return JSONResponse(response_data)
+
 
 # ==========================================
 # 5. FRONTEND TEMPLATE
@@ -268,52 +326,166 @@ HTML_TEMPLATE = """
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
-        :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; }
+        /* --- 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: 'Inter', sans-serif; display: flex; flex-direction: column; height: 100vh; overflow: hidden; font-size: 13px; }
-        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        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-radius: 4px; }
-        .top-bar { height: 52px; background: var(--bg-header); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex-shrink: 0; }
-        .brand { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
+        ::-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; transition: 0.2s; }
-        input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(47,129,247,0.2); }
+
+        select, button, input {
+            background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary);
+            padding: 0 12px; height: 32px; border-radius: 6px; font-size: 12px; cursor: pointer; transition: 0.2s;
+        }
+        select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(47,129,247,0.2); }
         button:hover { background: var(--bg-panel); border-color: var(--border-hover); }
         button.primary { background: var(--accent); border-color: var(--accent); color: white; }
+        button.primary:hover { background: #58a6ff; }
         button.danger { color: var(--danger); border-color: var(--border); background: transparent; }
+        button.danger:hover { background: rgba(218, 54, 51, 0.1); }
+
         .layout-toggle { display: flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 2px; }
         .layout-btn { width: 30px; height: 26px; border: none; background: transparent; color: var(--text-secondary); border-radius: 4px; }
-        .layout-btn.active { background: var(--bg-panel); color: var(--accent); }
-        .main-container { flex: 1; display: flex; overflow: auto; }
-        .column { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--border); min-width: 300px; }
-        .add-chart-btn { height: 40px; border: none; border-top: 1px dashed var(--border); background: transparent; color: var(--text-secondary); width: 100%; font-weight: 600; }
+        .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;
+        }
+        .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); }
-        .card-info { display: flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 600; }
-        .inst-label { color: var(--accent); font-family: monospace; font-size: 11px; }
+        .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; }
+        .card-meta { color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
+        
         .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); }
-        .status-dot.live { background: #3fb950; animation: pulse 2s infinite; }
-        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
-        .card-body { flex: 1; position: relative; overflow: hidden; }
-        .modal-backdrop { position: fixed; inset: 0; 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: 540px; max-width: 95%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
+        .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%); }
+
+        /* 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: 540px; max-width: 95%; max-height: 85vh; display: flex; flex-direction: column;
+            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
+        }
+        .modal-head { padding: 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; font-weight: 700; }
         .modal-body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
+        .modal-foot { padding: 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--bg-card); }
+        
         .form-section label { font-size: 11px; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; margin-bottom: 6px; display: block; }
+        
+        /* CUSTOM DROPDOWN UI */
         .input-wrapper { position: relative; width: 100%; }
         .input-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-secondary); font-size: 10px; }
-        .custom-dd { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; max-height: 200px; overflow-y: auto; z-index: 1000; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.5); margin-top: 4px; }
+        .custom-dd {
+            position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-panel); border: 1px solid var(--border);
+            border-radius: 6px; max-height: 200px; overflow-y: auto; z-index: 1000; display: none;
+            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-row { background: var(--bg-panel); padding: 12px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 10px; }
-        .series-row-top, .series-row-bottom { display: flex; gap: 10px; margin-bottom: 8px; align-items: center; }
-        .color-input { padding: 0; width: 36px; border: 1px solid var(--border); background: var(--bg-input); height: 32px; 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; 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; border-radius: 4px; }
+
+        /* SERIES ROW STRUCTURE (POLISHED UI) */
+        .series-row { 
+            background: var(--bg-panel); padding: 12px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 10px; 
+            box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
+        }
+        .series-row-top { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
+        .series-row-bottom { display: flex; gap: 10px; align-items: center; }
+
+        .s-form, .s-lbl, .s-axis, .s-cond, .s-thresh {
+            background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary);
+            border-radius: 6px; padding: 0 10px; height: 32px; font-size: 12px; transition: 0.2s;
+        }
+        .s-form:focus, .s-lbl:focus, .s-axis:focus, .s-cond:focus, .s-thresh:focus {
+            border-color: var(--accent); box-shadow: 0 0 0 1px rgba(47, 129, 247, 0.2);
+        }
+        
+        .color-input { 
+            padding: 0; width: 36px; border: 1px solid var(--border); background: var(--bg-input); 
+            height: 32px; cursor: pointer; border-radius: 6px; overflow: hidden;
+        }
+        .color-input::-webkit-color-swatch-wrapper { padding: 0; }
+        .color-input::-webkit-color-swatch { border: none; }
+
+        .s-cond-group {
+            display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,0.2);
+            padding: 4px 10px; border-radius: 6px; border: 1px dashed var(--border); flex: 1;
+        }
+
+        /* UI ENHANCEMENTS */
+        .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; }
+        
+        .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); }
     </style>
 </head>
 <body>
@@ -321,267 +493,903 @@ HTML_TEMPLATE = """
 <div class="top-bar">
     <div class="brand">DepthChain <span>PRO</span></div>
     <div class="controls">
-        <select id="globalDate" onchange="App.onDateChange()"></select>
+        <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>
+                <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;"></div>
+            <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">
             <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>
         </div>
+        <button onclick="Config.openDefaults()">Settings</button>
         <button class="danger" onclick="App.reset()">Reset</button>
     </div>
 </div>
 
 <div class="main-container" id="gridRoot"></div>
 
+<!-- CONFIG MODAL -->
 <div class="modal-backdrop" id="configModal">
     <div class="modal">
-        <div class="modal-head" style="padding:16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; font-weight:700;">
-            <span id="cfgTitle">Configure Chart</span><button onclick="Config.close()">✕</button>
+        <div class="modal-head">
+            <span id="cfgTitle">Configure Chart</span>
+            <button class="tool-btn" onclick="Config.close()">✕</button>
         </div>
         <div class="modal-body">
-            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
-                <div class="form-section">
-                    <label>Symbol</label>
-                    <div class="input-wrapper">
-                        <input type="text" id="cfgRoot" onfocus="CustomDD.open('cfgRoot')" oninput="CustomDD.filter('cfgRoot')" style="width:100%; text-transform: uppercase;" placeholder="Type or select..." autocomplete="off">
-                        <div class="input-arrow">▼</div><div id="dd-cfgRoot" class="custom-dd"></div>
+            <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>
-                <div class="form-section">
-                    <label>Expiry</label>
-                    <div class="input-wrapper">
-                        <input type="text" id="cfgExp" onfocus="CustomDD.open('cfgExp')" oninput="CustomDD.filter('cfgExp')" style="width:100%;" placeholder="Type or select..." autocomplete="off">
-                        <div class="input-arrow">▼</div><div id="dd-cfgExp" class="custom-dd"></div>
+
+                <!-- Single Chart Config Mode -->
+                <div id="cfgChartOnly">
+                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
+                        <div class="form-section">
+                            <label>Symbol</label>
+                            <div class="input-wrapper">
+                                <input type="text" id="cfgRoot" onfocus="CustomDD.open('cfgRoot')" oninput="CustomDD.filter('cfgRoot')" style="width:100%; text-transform: uppercase;" placeholder="Type or select..." autocomplete="off">
+                                <div class="input-arrow">▼</div>
+                                <div id="dd-cfgRoot" class="custom-dd"></div>
+                            </div>
+                        </div>
+                        <div class="form-section">
+                            <label>Expiry</label>
+                            <div class="input-wrapper">
+                                <input type="text" id="cfgExp" onfocus="CustomDD.open('cfgExp')" oninput="CustomDD.filter('cfgExp')" style="width:100%; text-transform: uppercase;" placeholder="Type or select..." autocomplete="off">
+                                <div class="input-arrow">▼</div>
+                                <div id="dd-cfgExp" class="custom-dd"></div>
+                            </div>
+                        </div>
                     </div>
-                </div>
-            </div>
-            <div class="form-section"><label>Mode</label>
-                <div class="segmented-control" id="cfgModeToggle">
-                    <button class="seg-btn active" onclick="Config.setMode('normal')">Normal</button>
-                    <button class="seg-btn" onclick="Config.setMode('advanced')">Advanced</button>
-                </div>
-            </div>
-            <div id="cfgNormalFields">
-                <div class="form-section"><label>Instrument</label>
-                    <div class="input-wrapper">
-                        <input type="text" id="cfgInst" onfocus="CustomDD.open('cfgInst')" oninput="CustomDD.filter('cfgInst')" style="width:100%;" placeholder="Type or select..." autocomplete="off">
-                        <div class="input-arrow">▼</div><div id="dd-cfgInst" class="custom-dd"></div>
+                    
+                    <div class="form-section" style="margin-top: 8px;">
+                        <label>Mode</label>
+                        <div class="segmented-control" id="cfgModeToggle">
+                            <button class="seg-btn active" onclick="Config.setMode('normal')">Normal Mode</button>
+                            <button class="seg-btn" onclick="Config.setMode('advanced')">Advanced Mode</button>
+                        </div>
                     </div>
+
+                    <!-- Normal Mode Fields -->
+                    <div id="cfgNormalFields">
+                        <div class="form-section">
+                            <label>Instrument</label>
+                            <div class="input-wrapper">
+                                <input type="text" id="cfgInst" onfocus="CustomDD.open('cfgInst')" oninput="CustomDD.filter('cfgInst')" style="width:100%; text-transform: uppercase;" placeholder="Type or select..." autocomplete="off">
+                                <div class="input-arrow">▼</div>
+                                <div id="dd-cfgInst" class="custom-dd"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Advanced Mode Fields -->
+                    <div id="cfgAdvancedFields" style="display:none;">
+                        <div class="form-section">
+                            <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; line-height: 1.4;">Calculates aggregate pressure dynamically across ATM plus/minus this many strikes.</div>
+                        </div>
+                    </div>
+
+                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top: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>
+                    <div style="height:1px; background:var(--border); margin: 12px 0 8px 0;"></div>
                 </div>
-            </div>
-            <div id="cfgAdvancedFields" style="display:none;">
-                <div class="form-section"><label style="color:var(--accent);">ATM (+/-) Range</label>
-                    <input type="number" id="cfgAtmRange" value="5" min="1" max="50" 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">1m</option><option value="3min">3m</option><option value="5min">5m</option><option value="15min">15m</option></select>
+
+                <!-- PRESET MANAGER -->
+                <div class="form-section" style="background:var(--bg-panel); padding:10px; border-radius:6px; border:1px solid var(--border); margin-bottom: 12px;">
+                    <label>Quick Configurations</label>
+                    <div style="display:flex; gap:8px;">
+                        <select id="cfgPresetsDropdown" style="flex:1;" onchange="Config.loadPreset()"></select>
+                        <button class="primary" onclick="Config.savePreset()" title="Save Current Lines as Configuration">Save</button>
+                        <button class="danger" onclick="Config.deletePreset()" title="Delete Selected Model" style="width: 32px; padding:0;">✕</button>
+                    </div>
                 </div>
-                <div class="form-section"><label>Range</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>
-            <div class="form-section" style="background:var(--bg-panel); padding:10px; border-radius:6px;">
-                <label>Quick Configurations</label>
-                <div style="display:flex; gap:8px;">
-                    <select id="cfgPresetsDropdown" style="flex:1;" onchange="Config.loadPreset()"></select>
-                    <button class="primary" onclick="Config.savePreset()">Save</button>
+
+                <!-- Common Series Config -->
+                <div class="form-section">
+                    <div style="display:flex; align-items:center; margin-bottom: 6px;">
+                        <label style="margin:0;">Plot Series</label>
+                        <span class="info-icon" id="infoIcon">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>
                 </div>
             </div>
-            <div class="form-section">
-                <div style="display:flex; align-items:center;"><label>Plot Series</label><span class="info-icon" id="infoIcon">i</span></div>
-                <div id="cfgSeries"></div>
-                <button style="width:100%; border:1px dashed var(--border); background:transparent; font-weight:600; height:32px;" onclick="Config.addSeriesRow()">+ Add Line</button>
-            </div>
         </div>
-        <div class="modal-foot" style="padding:16px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px;">
-            <button onclick="Config.close()">Cancel</button><button class="primary" onclick="Config.saveChartConfig()">Save</button>
+        <div class="modal-foot">
+            <button style="background:transparent; border:1px solid var(--border); color:var(--text-primary);" onclick="Config.close()">Cancel</button>
+            <button class="primary" onclick="Config.saveChartConfig()">Save Configuration</button>
         </div>
     </div>
 </div>
 
 <script>
+// --- CUSTOM SEARCHABLE DROPDOWN LOGIC ---
+document.addEventListener('click', (e) => {
+    if (!e.target.closest('.input-wrapper')) {
+        document.querySelectorAll('.custom-dd').forEach(el => el.style.display = 'none');
+    }
+});
+
 const CustomDD = {
     data: { cfgRoot: [], cfgExp: [], cfgInst:[] },
-    recent: { cfgRoot: [] },
-    init() { const saved = localStorage.getItem('dc_recent_symbols'); if(saved) this.recent.cfgRoot = JSON.parse(saved); },
-    clear(id) { this.data[id] = []; document.getElementById(id).value = ''; },
-    set(id, items, group = null) {
-        if(!group) this.data[id] = items.map(i => ({val: i, group: null}));
-        else this.data[id].push(...items.map(i => ({val: i, group})));
-    },
-    open(id) {
+    recent: { cfgRoot:[] }, // Persistent memory for symbols
+    
+    init() {
+        const saved = localStorage.getItem('dc_recent_symbols');
+        if(saved) this.recent.cfgRoot = JSON.parse(saved);
+    },
+
+    clear(id) {
+        this.data[id] =[];
+        document.getElementById(id).value = '';
+    },
+
+    set(id, items, groupName = null) {
+        if (!groupName) {
+            this.data[id] = items.map(i => ({val: i, group: null}));
+        } else {
+            this.data[id].push(...items.map(i => ({val: i, group: groupName})));
+        }
+    },
+
+    async open(id) {
         document.querySelectorAll('.custom-dd').forEach(el => el.style.display = 'none');
-        document.getElementById(id).select();
-        // FORCE RENDER ALL OPTIONS ON CLICK/FOCUS
+        const inp = document.getElementById(id);
+        inp.select();
+        
+        // SHOW ALL options immediately when focused, ignoring current input text visually
         this.render(id, ''); 
         document.getElementById(`dd-${id}`).style.display = 'block';
     },
-    filter(id) {
-        const val = document.getElementById(id).value.toUpperCase();
-        if(id === 'cfgRoot' && val.length >= 2) {
-            fetch(`/api/roots?date=${App.state.date}&q=${val}`).then(r=>r.json()).then(res => {
-                this.set(id, res); this.render(id, val);
+
+    async filter(id) {
+        const query = document.getElementById(id).value.toUpperCase();
+        
+        // Targeted backend search for symbols to minimize egress, but append to cache
+        if(id === 'cfgRoot' && query.length >= 2) {
+            const res = await fetch(`/api/roots?date=${App.state.date}&q=${query}`);
+            const results = await res.json();
+            
+            // Add newly found items to our local cache so they don't disappear
+            const existing = this.data[id].map(x => x.val);
+            results.forEach(r => {
+                if(!existing.includes(r)) this.data[id].push({val: r, group: null});
             });
-        } else {
-            this.render(id, val);
         }
+        
+        this.render(id, query);
+        document.getElementById(`dd-${id}`).style.display = 'block';
     },
+
     render(id, query) {
         const el = document.getElementById(`dd-${id}`);
         const q = query.toLowerCase();
-        let pool = [...this.data[id]];
+        let html = '';
+        let currentGroup = null;
+        
+        // Add Recent Symbols to the top of Root list if no specific query
+        let pool =[...this.data[id]];
         if(id === 'cfgRoot' && q === '') {
-            pool = [...this.recent.cfgRoot.map(r => ({val: r, group: 'Recent'})), ...pool];
+            const recentItems = this.recent.cfgRoot.map(r => ({val: r, group: 'Recent Search'}));
+            pool = [...recentItems, ...pool];
         }
-        const filtered = pool.filter((v, i, a) => a.findIndex(t => t.val === v.val) === i)
-                             .filter(x => x.val.toLowerCase().includes(q));
+
+        const filtered = pool.filter((v, i, a) => a.findIndex(t => t.val === v.val) === i) // Unique
+                            .filter(item => item.val.toLowerCase().includes(q));
         
-        let html = '', currentGroup = null;
-        if(!filtered.length) { el.innerHTML = '<div class="custom-dd-opt">No results</div>'; return; }
+        if (filtered.length === 0) {
+            el.innerHTML = '<div class="custom-dd-opt" style="color:var(--text-secondary); cursor:default;">No matches found</div>';
+            return;
+        }
+
         filtered.forEach(item => {
-            if(item.group && item.group !== currentGroup) { html += `<div class="custom-dd-group">${item.group}</div>`; currentGroup = item.group; }
+            if (item.group && item.group !== currentGroup) {
+                html += `<div class="custom-dd-group">${item.group}</div>`;
+                currentGroup = item.group;
+            }
             html += `<div class="custom-dd-opt" onclick="CustomDD.pick('${id}', '${item.val}')">${item.val}</div>`;
         });
         el.innerHTML = html;
-        el.style.display = 'block';
     },
+
     pick(id, val) {
         document.getElementById(id).value = val;
         document.getElementById(`dd-${id}`).style.display = 'none';
+        
         if(id === 'cfgRoot') {
-            if(!this.recent.cfgRoot.includes(val)) { this.recent.cfgRoot.unshift(val); this.recent.cfgRoot = this.recent.cfgRoot.slice(0,10); localStorage.setItem('dc_recent_symbols', JSON.stringify(this.recent.cfgRoot)); }
+            // Save to recent
+            if(!this.recent.cfgRoot.includes(val)) {
+                this.recent.cfgRoot.unshift(val);
+                if(this.recent.cfgRoot.length > 10) this.recent.cfgRoot.pop();
+                localStorage.setItem('dc_recent_symbols', JSON.stringify(this.recent.cfgRoot));
+            }
             Config.onRootChange();
         }
         if(id === 'cfgExp') Config.onExpChange();
     }
 };
 
-document.addEventListener('click', (e) => { if(!e.target.closest('.input-wrapper')) document.querySelectorAll('.custom-dd').forEach(el => el.style.display = 'none'); });
-
 const App = {
     state: { date: null, mode: 'LIVE', columns: 3, layout: [[],[],[]], charts: {}, refreshRate: 15 },
     presets: {
-        "Model 1": [
+        "Model 1":[
             { formula: '$P', color1: '#2f81f7', cond: 'none', label: 'Price', axis: 'left' },
             { formula: '$CB + $PS', color1: '#238636', cond: 'none', label: 'Buy', axis: 'right' },
             { formula: '$CS + $PB', color1: '#da3633', cond: 'none', label: 'Sell', axis: 'right' }
         ],
-        "Model 2": [
+        "Model 2":[
             { formula: '$P', color1: '#2f81f7', cond: 'none', label: 'Price', axis: 'left' },
             { formula: '$CB + $PS - ($PB + $CS)', color1: '#238636', color2: '#da3633', cond: '>', thresh: 0, label: 'Overall', axis: 'right' }
         ]
     },
+
     async init() {
-        CustomDD.init(); await this.loadDates();
+        CustomDD.init();
+        await this.loadDates();
+        const savedPresets = localStorage.getItem('dc_pro_v3_presets');
+        if(savedPresets) {
+            try { this.presets = { ...this.presets, ...JSON.parse(savedPresets) }; } catch(e){}
+        }
+
         const saved = localStorage.getItem('dc_pro_v3_final');
-        if(saved) this.state = {...this.state, ...JSON.parse(saved)}; else this.initDefault();
+        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;
+        
         document.getElementById('globalMode').value = this.state.mode;
-        this.setLayout(this.state.columns); 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);
+        }
+    },
+
+    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;
+    },
+
+    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
+        }));
+    },
+
+    reset() {
+        if(confirm("Reset Workspace?")) {
+            localStorage.removeItem('dc_pro_v3_final');
+            location.reload();
+        }
+    },
+
+    setLayout(n) {
+        const all = this.state.layout.flat();
+        this.state.columns = n;
+        this.state.layout = Array.from({length: n}, () =>[]);
+        all.forEach((id, i) => this.state.layout[i % n].push(id));
+        this.renderGrid();
+        this.save();
     },
-    initDefault() { for(let i=0; i<3; i++) { this.addChartInternal(i); this.addChartInternal(i); } },
-    async loadDates() { const res = await fetch('/api/dates'); const dates = await res.json(); document.getElementById('globalDate').innerHTML = dates.map(d => `<option value="${d}">${d}</option>`).join(''); this.state.date = dates[0]; },
-    addChartInternal(col) { const id = 'c-'+Math.random().toString(36).substr(2,6); if(!this.state.layout[col]) this.state.layout[col]=[]; this.state.layout[col].push(id); this.state.charts[id]={config:{},instance:null}; },
-    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(); },
-    save() { const clean={}; for(let id in this.state.charts) clean[id]={config:this.state.charts[id].config}; localStorage.setItem('dc_pro_v3_final', JSON.stringify({...this.state, charts:clean})); },
+
     renderGrid() {
-        const root = document.getElementById('gridRoot'); root.innerHTML = '';
+        document.querySelectorAll('.layout-btn').forEach((b, i) => b.classList.toggle('active', (i+1) === this.state.columns));
+        
+        const container = document.getElementById('gridRoot');
+        container.innerHTML = '';
+
         this.state.layout.forEach((ids, colIdx) => {
-            const col = document.createElement('div'); col.className = 'column';
+            const col = document.createElement('div');
+            col.className = 'column';
+            const count = ids.length;
+            const viewH = window.innerHeight - 52;
+
             ids.forEach(id => {
-                const card = document.createElement('div'); card.className = 'chart-card'; card.style.height = `calc(${(window.innerHeight-52)/ids.length}px - 1px)`;
-                const cfg = this.state.charts[id].config;
-                card.innerHTML = `<div class="card-header"><div class="card-info"><div class="status-dot ${cfg.root?'live':''}"></div><span>${cfg.root||'New'}</span></div><div><button onclick="Config.open('${id}')">⚙</button></div></div><div class="card-body" id="body-${id}"><canvas id="canvas-${id}"></canvas></div>`;
-                col.appendChild(card); setTimeout(()=>ChartLogic.plot(id),0);
+                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';
+
+                col.appendChild(card);
+                setTimeout(() => ChartLogic.plot(id), 0);
             });
-            root.appendChild(col);
+
+            const btn = document.createElement('button');
+            btn.className = 'add-chart-btn';
+            btn.innerText = '+ Add Chart';
+            btn.onclick = () => { this.addChartInternal(colIdx); this.renderGrid(); this.save(); };
+            col.appendChild(btn);
+            container.appendChild(col);
         });
     },
-    reset() { localStorage.removeItem('dc_pro_v3_final'); location.reload(); },
-    onDateChange() { this.state.date = document.getElementById('globalDate').value; this.save(); this.renderGrid(); },
-    onModeChange() { this.state.mode = document.getElementById('globalMode').value; this.save(); this.renderGrid(); },
-    startLoop() { setInterval(() => { if(this.state.mode==='LIVE') Object.keys(this.state.charts).forEach(id => ChartLogic.plot(id, true)); }, 15000); }
+
+    createCardDOM(id) {
+        const div = document.createElement('div');
+        div.className = 'chart-card';
+        div.id = `card-${id}`;
+        
+        const cfg = this.state.charts[id] ? this.state.charts[id].config : {};
+        const isCfg = cfg && cfg.root;
+        const advancedLabel = cfg.chartMode === 'advanced' ? `<span class="inst-label">ATM +/- ${cfg.atmRange}</span>` : `<span class="inst-label">${cfg.instrument || ''}</span>`;
+
+        div.innerHTML = `
+            <div class="card-header">
+                <div class="card-info">
+                    <div class="status-dot ${isCfg ? (this.state.mode==='LIVE'?'live':'hist') : ''}" id="dot-${id}"></div>
+                    <span>${isCfg ? cfg.root : 'New Chart'}</span>
+                    ${isCfg ? `${advancedLabel} <span class="card-meta">${cfg.expiry}</span>` : ''}
+                </div>
+                <div class="card-tools">
+                    <button class="tool-btn" onclick="Config.open('${id}')">⚙</button>
+                    <button class="tool-btn" style="color:var(--danger)" onclick="App.removeChart('${id}')">✕</button>
+                </div>
+            </div>
+            <div class="card-body" id="body-${id}">
+                ${!isCfg ? `
+                    <div class="empty-state">
+                        <div style="font-size:24px; opacity:0.3;">📊</div>
+                        <button style="background:transparent; border:1px solid var(--border); padding:5px 10px; border-radius:4px; color:var(--text-secondary); margin-top:8px;" onclick="Config.open('${id}')">Configure</button>
+                    </div>
+                ` : `<canvas id="canvas-${id}"></canvas>`}
+            </div>
+        `;
+        return div;
+    },
+
+    removeChart(id) {
+        if(!confirm("Delete?")) return;
+        this.state.layout = this.state.layout.map(c => c.filter(x => x !== id));
+        if(this.state.charts[id].instance) this.state.charts[id].instance.destroy();
+        delete this.state.charts[id];
+        this.renderGrid();
+        this.save();
+    },
+
+    onDateChange() {
+        this.state.date = document.getElementById('globalDate').value;
+        const today = new Date().toISOString().split('T')[0];
+        if(this.state.date === today && this.state.mode !== 'LIVE') {
+            this.state.mode = 'LIVE';
+            document.getElementById('globalMode').value = 'LIVE';
+            this.updateModeUI();
+        }
+        this.save();
+        this.refreshAll();
+    },
+
+    onModeChange() {
+        this.state.mode = document.getElementById('globalMode').value;
+        this.updateModeUI();
+        this.save();
+        this.refreshAll();
+    },
+
+    updateModeUI() {
+        document.getElementById('modeDot').className = `status-dot ${this.state.mode==='LIVE'?'live':'hist'}`;
+    },
+
+    refreshAll() { Object.keys(this.state.charts).forEach(id => ChartLogic.plot(id)); },
+    
+    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 res = await fetch('/api/fetch_series', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ ...chart.config, date:App.state.date, end_time:App.state.mode==='LIVE'?new Date().toTimeString().slice(0,5):chart.config.end }) });
-        const data = await res.json(); if(data.error) return;
-        const datasets = chart.config.series.map(s => {
-            const vals = data.labels.map((_, i) => {
-                const P=data.P[i], V=data.V[i], OI=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];
-                try { return new Function('return '+s.formula.replace(/\$CB/g,CB).replace(/\$CS/g,CS).replace(/\$PB/g,PB).replace(/\$PS/g,PS).replace(/\$OI/g,OI).replace(/\$P/g,P).replace(/\$V/g,V).replace(/\$B/g,B).replace(/\$S/g,S))(); } catch{ return 0; }
+        const chart = App.state.charts[id];
+        if(!chart || !chart.config.root) return;
+        
+        const cfg = chart.config;
+        const dot = document.getElementById(`dot-${id}`);
+        if(isUpdate && dot) dot.classList.add('retry');
+
+        let endTime = cfg.end;
+        if (App.state.mode === 'LIVE') {
+            const now = new Date();
+            endTime = now.getHours().toString().padStart(2,'0') + ":" + now.getMinutes().toString().padStart(2,'0');
+        }
+
+        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,
+                    mode: cfg.chartMode || 'normal',
+                    atm_range: cfg.atmRange || 5
+                })
             });
-            const hoverColor = (ctx) => { const v = ctx.raw; if(s.cond==='>') return v>s.thresh?s.color1:s.color2; if(s.cond==='<') return v<s.thresh?s.color1:s.color2; return s.color1; };
-            return { label:s.label, data:vals, borderWidth:1.5, pointRadius:0, tension:0.1, yAxisID:s.axis==='left'?'y':'y1', segment:{ borderColor: ctx => hoverColor({raw:ctx.p1.parsed.y}) }, pointHoverBackgroundColor: hoverColor };
-        });
-        this.render(id, data.labels, datasets, chart.config.series);
+            const data = await res.json();
+
+            if(data.error || !data.labels || !data.labels.length) {
+                if(App.state.mode !== 'LIVE') {
+                    const b = document.getElementById(`body-${id}`);
+                    if(b) b.innerHTML = '<div class="empty-state" style="opacity:0.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 datasets = cfg.series.map(s => {
+                const vals = data.labels.map((_, i) => {
+                    const P=data.P[i]||0, V=data.V[i]||0, OI=data.OI[i]||0, B=data.B[i]||0, S=data.S[i]||0;
+                    const CB=data.CB[i]||0, CS=data.CS[i]||0, PB=data.PB[i]||0, PS=data.PS[i]||0;
+                    
+                    let f = s.formula
+                        .replace(/\$CB/g, CB).replace(/\$CS/g, CS)
+                        .replace(/\$PB/g, PB).replace(/\$PS/g, PS)
+                        .replace(/\$OI/g, OI).replace(/\$P/g, P)
+                        .replace(/\$V/g, V).replace(/\$B/g, B).replace(/\$S/g, S);
+                        
+                    try { return new Function('return '+f)(); } catch{ return null; }
+                });
+                
+                let dataset = {
+                    label: s.label, data: vals,
+                    borderWidth: 1.5, pointRadius: 0, hitRadius: 10, tension: 0.1, yAxisID: s.axis==='left'?'y':'y1'
+                };
+
+                if(s.cond && s.cond !== 'none') {
+                    let thresh = parseFloat(s.thresh) || 0;
+                    let cTrue = s.color1;
+                    let cFalse = s.color2 || s.color1;
+                    
+                    dataset.segment = {
+                        borderColor: ctx => {
+                            let v = ctx.p1.parsed.y;
+                            if(s.cond === '>') return v > thresh ? cTrue : cFalse;
+                            if(s.cond === '<') return v < thresh ? cTrue : cFalse;
+                            return cTrue;
+                        }
+                    };
+                    dataset.borderColor = cTrue; 
+                    dataset.backgroundColor = cTrue;
+
+                    const hoverColorCallback = (ctx) => {
+                        let v = ctx.raw;
+                        if (v === undefined || v === null) return cTrue;
+                        if(s.cond === '>') return v > thresh ? cTrue : cFalse;
+                        if(s.cond === '<') return v < thresh ? cTrue : cFalse;
+                        return cTrue;
+                    };
+                    dataset.pointHoverBackgroundColor = hoverColorCallback;
+                    dataset.pointHoverBorderColor = hoverColorCallback;
+
+                } else {
+                    dataset.borderColor = s.color1;
+                    dataset.backgroundColor = s.color1;
+                    dataset.pointHoverBackgroundColor = s.color1;
+                    dataset.pointHoverBorderColor = s.color1;
+                }
+                
+                return dataset;
+            });
+
+            this.render(id, data.labels, datasets, cfg.series);
+
+        } catch(e) { console.error(e); }
     },
-    render(id, labels, datasets, series) {
-        const ctx = document.getElementById(`canvas-${id}`); if(!ctx) return;
-        if(App.state.charts[id].instance) App.state.charts[id].instance.destroy();
-        App.state.charts[id].instance = new Chart(ctx, { type:'line', data:{labels, datasets}, options:{ responsive:true, maintainAspectRatio:false, animation:false, plugins:{legend:{display:false}, tooltip:{ callbacks:{ labelColor: c => { const s=series[c.datasetIndex]; const v=c.parsed.y; let clr=s.color1; if(s.cond==='>') clr=v>s.thresh?s.color1:s.color2; if(s.cond==='<') clr=v<s.thresh?s.color1:s.color2; return {borderColor:clr, backgroundColor:clr}; } } } }, scales:{ y:{position:'left'}, y1:{position:'right', grid:{display:false}} } } });
+
+    render(id, labels, datasets, seriesConfig) {
+        const ctx = document.getElementById(`canvas-${id}`);
+        if(!ctx) return;
+        
+        if(App.state.charts[id].instance && App.state.charts[id].instance.ctx.canvas !== ctx) {
+            App.state.charts[id].instance.destroy();
+            App.state.charts[id].instance = null;
+        }
+
+        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,
+                            callbacks: {
+                                labelColor: function(context) {
+                                    let s = seriesConfig[context.datasetIndex];
+                                    let v = context.parsed.y;
+                                    let c = s.color1;
+                                    if(s.cond && s.cond !== 'none') {
+                                        let thresh = parseFloat(s.thresh) || 0;
+                                        let cTrue = s.color1;
+                                        let cFalse = s.color2 || s.color1;
+                                        if(s.cond === '>') c = v > thresh ? cTrue : cFalse;
+                                        if(s.cond === '<') c = v < thresh ? cTrue : cFalse;
+                                    }
+                                    return { borderColor: c, backgroundColor: c };
+                                }
+                            }
+                        }
+                    },
+                    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}} }
+                    }
+                }
+            });
+        }
     }
 };
 
 const Config = {
-    tid: null, currentMode: 'normal',
+    tid: null, isGlobal: false, currentMode: 'normal',
+    
+    setMode(mode) {
+        this.currentMode = mode;
+        const btns = document.querySelectorAll('#cfgModeToggle .seg-btn');
+        btns[0].classList.toggle('active', mode === 'normal');
+        btns[1].classList.toggle('active', mode === 'advanced');
+        
+        document.getElementById('cfgNormalFields').style.display = mode === 'normal' ? 'block' : 'none';
+        document.getElementById('cfgAdvancedFields').style.display = mode === 'advanced' ? 'block' : 'none';
+
+        this.updateInfoTooltip(mode);
+        this.updatePresetsDropdown();
+        this.loadPreset("Model 1"); // Model 1 is now the default
+    },
+
+    updateInfoTooltip(mode) {
+        const icon = document.getElementById('infoIcon');
+        if (!icon) return;
+        if (mode === 'advanced') {
+            icon.title = "Standard Variables:\n$P = Price\n$B = Total Buy\n$S = Total Sell\n$V = Volume\n$OI = Open Interest\n\nAdvanced Mode Only:\n$CB = Call Buy\n$CS = Call Sell\n$PB = Put Buy\n$PS = Put Sell";
+            icon.style.color = "var(--accent)";
+            icon.style.borderColor = "var(--accent)";
+        } else {
+            icon.title = "Standard Variables:\n$P = Price\n$B = Total Buy\n$S = Total Sell\n$V = Volume\n$OI = Open Interest";
+            icon.style.color = "var(--text-secondary)";
+            icon.style.borderColor = "var(--border)";
+        }
+    },
+
+    updatePresetsDropdown() {
+        const sel = document.getElementById('cfgPresetsDropdown');
+        sel.innerHTML = Object.keys(App.presets).map(k => `<option value="${k}">${k}</option>`).join('');
+    },
+
+    loadPreset(presetName = null) {
+        const name = presetName || document.getElementById('cfgPresetsDropdown').value;
+        if(name && App.presets[name]) {
+            document.getElementById('cfgPresetsDropdown').value = name;
+            this.renderSeries(App.presets[name]);
+        }
+    },
+
+    savePreset() {
+        const name = prompt("Enter a name for this Quick Configuration:", "Custom Model");
+        if(!name) return;
+        const series = this.extractSeriesFromDOM();
+        App.presets[name] = series;
+        localStorage.setItem('dc_pro_v3_presets', JSON.stringify(App.presets));
+        this.updatePresetsDropdown();
+        document.getElementById('cfgPresetsDropdown').value = name;
+    },
+
+    deletePreset() {
+        const name = document.getElementById('cfgPresetsDropdown').value;
+        if(name.startsWith('Model 1') || name.startsWith('Model 2')) return alert("Cannot delete default models.");
+        if(confirm(`Delete model '${name}'?`)) {
+            delete App.presets[name];
+            localStorage.setItem('dc_pro_v3_presets', JSON.stringify(App.presets));
+            this.updatePresetsDropdown();
+            this.loadPreset();
+        }
+    },
+
     async open(id) {
-        this.tid = id; document.getElementById('configModal').style.display = 'flex';
+        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();
+
+        // Load existing roots once
+        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('cfgPresetsDropdown').innerHTML = Object.keys(App.presets).map(k=>`<option>${k}</option>`).join('');
-        const res = await fetch(`/api/roots?date=${App.state.date}`); const roots = await res.json(); CustomDD.set('cfgRoot', roots);
-        if(cfg.root) { document.getElementById('cfgRoot').value = cfg.root; await this.onRootChange(cfg.expiry, cfg.instrument); }
-        this.setMode(cfg.chartMode || 'normal'); if(cfg.series) this.renderSeries(cfg.series); else this.loadPreset("Model 1");
-    },
-    setMode(m) {
-        this.currentMode = m; document.querySelectorAll('#cfgModeToggle .seg-btn').forEach(b => b.classList.toggle('active', b.innerText.toLowerCase()===m));
-        document.getElementById('cfgNormalFields').style.display = m==='normal'?'block':'none';
-        document.getElementById('cfgAdvancedFields').style.display = m==='advanced'?'block':'none';
-        const icon = document.getElementById('infoIcon');
-        icon.title = m==='advanced' ? "$P,$B,$S,$V,$OI + $CB,$CS,$PB,$PS" : "$P,$B,$S,$V,$OI";
-        icon.style.color = m==='advanced' ? "var(--accent)" : "var(--text-secondary)";
+        document.getElementById('cfgTF').value = cfg.timeframe || '1min';
+        document.getElementById('cfgStart').value = cfg.start || '09:15';
+        document.getElementById('cfgEnd').value = cfg.end || '15:30';
+        
+        this.currentMode = cfg.chartMode || 'normal';
+        document.getElementById('cfgAtmRange').value = cfg.atmRange || 5;
+        
+        // Setup initial UI states without forcing preset reset if series exist
+        const btns = document.querySelectorAll('#cfgModeToggle .seg-btn');
+        btns[0].classList.toggle('active', this.currentMode === 'normal');
+        btns[1].classList.toggle('active', this.currentMode === 'advanced');
+        document.getElementById('cfgNormalFields').style.display = this.currentMode === 'normal' ? 'block' : 'none';
+        document.getElementById('cfgAdvancedFields').style.display = this.currentMode === 'advanced' ? 'block' : 'none';
+        
+        this.updateInfoTooltip(this.currentMode);
+
+        // Override defaults if there is already a saved config
+        if (cfg.series && cfg.series.length > 0) {
+            this.renderSeries(cfg.series);
+        } else {
+            this.loadPreset("Model 1");
+        }
+
+        document.getElementById('cfgRoot').value = cfg.root || '';
+        document.getElementById('cfgExp').value = cfg.expiry || '';
+        document.getElementById('cfgInst').value = cfg.instrument || '';
+
+        if(cfg.root) { await this.onRootChange(cfg.expiry, cfg.instrument); }
+        document.getElementById('cfgLoading').style.display = 'none';
+        document.getElementById('cfgContent').style.display = 'block';
     },
+
+    openDefaults() {
+        this.isGlobal = true;
+        document.getElementById('configModal').style.display = 'flex';
+        document.getElementById('cfgTitle').innerText = 'Global Settings';
+        document.getElementById('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();
+        this.loadPreset("Model 1");
+    },
+
+    close() { document.getElementById('configModal').style.display = 'none'; },
+
     async onRootChange(preExp, preInst) {
-        const root = document.getElementById('cfgRoot').value; if(!root) return;
-        const exps = await fetch(`/api/expiries?date=${App.state.date}&root=${root}`).then(r=>r.json());
-        CustomDD.set('cfgExp', exps); 
-        if(preExp) document.getElementById('cfgExp').value = preExp;
-        await this.onExpChange(preInst);
+        const root = document.getElementById('cfgRoot').value.toUpperCase();
+        CustomDD.clear('cfgExp');
+        CustomDD.clear('cfgInst');
+        
+        if (!preExp) document.getElementById('cfgExp').value = '';
+        if (!preInst) document.getElementById('cfgInst').value = '';
+
+        if (!root) return;
+
+        // Fetches ALL available expiries for the root
+        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) {
+            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); 
+            }
+        }
     },
+
     async onExpChange(preInst) {
-        const root = document.getElementById('cfgRoot').value, exp = document.getElementById('cfgExp').value; if(!root || !exp) return;
-        const data = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${exp}`).then(r=>r.json());
+        const root = document.getElementById('cfgRoot').value.toUpperCase();
+        const exp = document.getElementById('cfgExp').value.toUpperCase();
         CustomDD.clear('cfgInst');
-        CustomDD.set('cfgInst', data.spot_fut, 'Futures'); CustomDD.set('cfgInst', data.options, 'Options');
+        
+        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;
     },
-    loadPreset(name) { const p = App.presets[name || document.getElementById('cfgPresetsDropdown').value]; if(p) this.renderSeries(p); },
-    savePreset() { const n = prompt("Name:"); if(n) { App.presets[n] = this.extractSeries(); localStorage.setItem('dc_pro_v3_presets', JSON.stringify(App.presets)); } },
+
+    toggleCond(sel) {
+        const group = sel.nextElementSibling;
+        group.style.display = sel.value === 'none' ? 'none' : 'flex';
+    },
+
     renderSeries(list) {
         const c = document.getElementById('cfgSeries'); c.innerHTML = '';
         list.forEach(s => {
             const r = document.createElement('div'); r.className = 'series-row';
-            r.innerHTML = `<div class="series-row-top"><input type="text" value="${s.formula}" class="s-form" style="flex:1;"><input type="text" value="${s.label}" class="s-lbl" style="width:80px;"><select class="s-axis"><option value="left" ${s.axis==='left'?'selected':''}>L</option><option value="right" ${s.axis==='right'?'selected':''}>R</option></select></div><div class="series-row-bottom"><input type="color" value="${s.color1}" class="s-color1 color-input"><select class="s-cond" onchange="this.nextElementSibling.style.display=this.value==='none'?'none':'flex'"><option value="none">Solid</option><option value=">" ${s.cond==='>'?'selected':''}>If ></option><option value="<" ${s.cond==='<'?'selected':''}>If <</option></select><div class="s-cond-group" style="display:${s.cond==='none'?'none':'flex'}; gap:5px;"><input type="number" class="s-thresh" value="${s.thresh||0}" style="width:50px;"><input type="color" value="${s.color2||'#ffffff'}" class="s-color2 color-input"></div></div>`;
+            const showCond = s.cond && s.cond !== 'none';
+            r.innerHTML = `
+                <div class="series-row-top">
+                    <input type="text" value="${s.formula}" class="s-form" placeholder="Formula (e.g. $P)" style="flex:1;">
+                    <input type="text" value="${s.label}" class="s-lbl" placeholder="Label" style="width:100px;">
+                    <select class="s-axis" style="width:60px;"><option value="left" ${s.axis==='left'?'selected':''}>Left</option><option value="right" ${s.axis==='right'?'selected':''}>Right</option></select>
+                    <button class="tool-btn" style="color:var(--danger); width:32px; background:rgba(218,54,51,0.1);" onclick="this.parentElement.parentElement.remove()">✕</button>
+                </div>
+                <div class="series-row-bottom">
+                    <input type="color" value="${s.color1}" class="color-input s-color1" title="Color">
+                    <select class="s-cond" style="width:80px;" onchange="Config.toggleCond(this)">
+                        <option value="none" ${s.cond==='none'||!s.cond?'selected':''}>Solid</option>
+                        <option value=">" ${s.cond==='>'?'selected':''}>If &gt;</option>
+                        <option value="<" ${s.cond==='<'?'selected':''}>If &lt;</option>
+                    </select>
+                    <div class="s-cond-group" style="display:${showCond?'flex':'none'};">
+                        <input type="number" class="s-thresh" value="${s.thresh||0}" style="width:70px;">
+                        <span style="color:var(--text-secondary); font-size:11px; font-weight:600;">Else:</span>
+                        <input type="color" value="${s.color2||'#ffffff'}" class="color-input s-color2" title="Color 2">
+                    </div>
+                </div>
+            `;
             c.appendChild(r);
         });
     },
-    addSeriesRow() { this.renderSeries([...this.extractSeries(), {formula:'$P', label:'New', axis:'left', color1:'#ffffff', cond:'none'}]); },
-    extractSeries() { return [...document.querySelectorAll('.series-row')].map(r => ({ formula:r.querySelector('.s-form').value, label:r.querySelector('.s-lbl').value, axis:r.querySelector('.s-axis').value, color1:r.querySelector('.s-color1').value, cond:r.querySelector('.s-cond').value, thresh:r.querySelector('.s-thresh').value, color2:r.querySelector('.s-color2').value })); },
-    saveChartConfig() {
-        const root = document.getElementById('cfgRoot').value, exp = document.getElementById('cfgExp').value;
-        if(!root || !exp) return alert("Incomplete");
-        App.state.charts[this.tid].config = { chartMode:this.currentMode, atmRange:parseInt(document.getElementById('cfgAtmRange').value), root, expiry:exp, instrument:document.getElementById('cfgInst').value, timeframe:document.getElementById('cfgTF').value, start:document.getElementById('cfgStart').value, end:document.getElementById('cfgEnd').value, series:this.extractSeries() };
-        App.save(); App.renderGrid(); this.close();
+
+    addSeriesRow() {
+        const r = document.createElement('div'); r.className = 'series-row';
+        r.innerHTML = `
+            <div class="series-row-top">
+                <input type="text" value="$P" class="s-form" placeholder="Formula (e.g. $P)" style="flex:1;">
+                <input type="text" value="New" class="s-lbl" placeholder="Label" style="width:100px;">
+                <select class="s-axis" style="width:60px;"><option value="left">Left</option><option value="right">Right</option></select>
+                <button class="tool-btn" style="color:var(--danger); width:32px; background:rgba(218,54,51,0.1);" onclick="this.parentElement.parentElement.remove()">✕</button>
+            </div>
+            <div class="series-row-bottom">
+                <input type="color" value="#ffffff" class="color-input s-color1" title="Color">
+                <select class="s-cond" style="width:80px;" onchange="Config.toggleCond(this)">
+                    <option value="none" selected>Solid</option>
+                    <option value=">">If &gt;</option>
+                    <option value="<">If &lt;</option>
+                </select>
+                <div class="s-cond-group" style="display:none;">
+                    <input type="number" class="s-thresh" value="0" style="width:70px;">
+                    <span style="color:var(--text-secondary); font-size:11px; font-weight:600;">Else:</span>
+                    <input type="color" value="#ffffff" class="color-input s-color2" title="Color 2">
+                </div>
+            </div>
+        `;
+        document.getElementById('cfgSeries').appendChild(r);
+    },
+
+    extractSeriesFromDOM() {
+        const rows = document.querySelectorAll('#cfgSeries .series-row');
+        return Array.from(rows).map(r => ({
+            formula: r.querySelector('.s-form').value,
+            label: r.querySelector('.s-lbl').value,
+            axis: r.querySelector('.s-axis').value,
+            color1: r.querySelector('.s-color1').value,
+            cond: r.querySelector('.s-cond').value,
+            thresh: r.querySelector('.s-thresh').value,
+            color2: r.querySelector('.s-color2').value
+        }));
     },
-    close() { document.getElementById('configModal').style.display = 'none'; }
+
+    saveChartConfig() {
+        const series = this.extractSeriesFromDOM();
+
+        if(this.isGlobal) { 
+            App.state.refreshRate = parseInt(document.getElementById('cfgRefresh').value) || 15;
+            App.save();
+        } 
+        else {
+            const root = document.getElementById('cfgRoot').value.toUpperCase();
+            const exp = document.getElementById('cfgExp').value.toUpperCase();
+            const inst = document.getElementById('cfgInst').value.toUpperCase();
+            
+            if(!root || !exp) return alert("Incomplete Details. Please type or select valid options.");
+
+            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
+            };
+            App.save();
+            App.renderGrid();
+            ChartLogic.plot(this.tid);
+        }
+        this.close();
+    }
 };
 
 window.onload = () => App.init();