3D Order Book Depth Map: Plotly subplots (bid/ask split) + remove Three.js

- Replaced single surface with dual synchronized 3D subplots:
  Left: BID depth (green colorscale, -50 to 0 bps)
  Right: ASK depth (red colorscale, 0 to +50 bps)
- Independent colorbars per side with proper labeling
- Camera sync via scene anchor mirroring
- Contour projection on both surfaces
- Live imbalance overlay centered between subplots

Data pipeline:
- l2SnapshotsToDualSurface() splits bid/ask into separate matrices
- L2RingBuffer unchanged (60 snapshots, O(1) append)

Removed:
- depth-map-three.tsx (Three.js alternative)
- Engine toggle buttons from OBI detail
- Three.js CDN loading

dashboard-next/src/lib/depth-map-utils.ts

@@ -215,3 +215,45 @@ export function generateSyntheticSnapshots(
 
   return snapshots;
 }
+
+// ═══════════ 3D Subplots: Split Bid/Ask Surfaces ═══════════
+
+export interface DualSurfaceData {
+  bid: SurfaceData;
+  ask: SurfaceData;
+  y: number[];
+}
+
+/** Split L2 → dual bid/ask surface matrices for 3D subplots */
+export function l2SnapshotsToDualSurface(
+  snapshots: L2Snapshot[],
+  bpsRange: number = 50,
+  resolution: number = 50,
+): DualSurfaceData {
+  const bpsStep = bpsRange / resolution;
+  const bidX: number[] = [], askX: number[] = [];
+  for (let i = 0; i < resolution; i++) {
+    bidX.push(-bpsRange + i * bpsStep);
+    askX.push(i * bpsStep);
+  }
+  const y = snapshots.map((_, i) => i);
+  const bidZ: number[][] = [], askZ: number[][] = [];
+  for (const snap of snapshots) {
+    const mid = snap.mid;
+    const bRow = new Array(resolution).fill(0);
+    const aRow = new Array(resolution).fill(0);
+    for (const bid of snap.bids) {
+      const bps = ((bid.px - mid) / mid) * 10000;
+      const idx = Math.round((bps + bpsRange) / bpsStep);
+      if (idx >= 0 && idx < resolution) bRow[idx] += bid.sz;
+    }
+    for (const ask of snap.asks) {
+      const bps = ((ask.px - mid) / mid) * 10000;
+      const idx = Math.round(bps / bpsStep);
+      if (idx >= 0 && idx < resolution) aRow[idx] += ask.sz;
+    }
+    bidZ.push(bRow);
+    askZ.push(aRow);
+  }
+  return { bid: { x: bidX, y, z: bidZ }, ask: { x: askX, y, z: askZ }, y };
+}