diff --git a/api/get_option_orders.php b/api/get_option_orders.php
index e0a8d8c..28e42c7 100644
--- a/api/get_option_orders.php
+++ b/api/get_option_orders.php
@@ -1,70 +1,93 @@
 <?php
-session_start();
-require_once '../db/config.php';
-
 header('Content-Type: application/json');
+require_once '../db/config.php';
+session_start();
 
-$user_id = $_SESSION['user_id'] ?? null;
-if (!$user_id) {
-    echo json_encode(['success' => false, 'error' => '未登录']);
+if (!isset($_SESSION['user_id'])) {
+    echo json_encode([]); // Return empty array if not logged in
     exit;
 }
 
-$status = $_GET['status'] ?? 'pending';
-$pdo = db();
+$user_id = $_SESSION['user_id'];
+$status_filter = $_GET['status'] ?? 'pending';
 
-// Auto-settle orders that are due
-$now = date('Y-m-d H:i:s');
-// Fetch orders that are pending and due, joined with user win_loss_control
-$stmt = $pdo->prepare("SELECT o.*, u.win_loss_control as user_control FROM option_orders o JOIN users u ON o.user_id = u.id WHERE o.status = 'pending' AND o.settle_at <= ?");
-$stmt->execute([$now]);
-$due_orders = $stmt->fetchAll();
-
-foreach ($due_orders as $order) {
-    $result = 'loss';
-    $profit = 0;
-    
-    // Win/Loss Control Logic: Order-level control overrides User-level control
-    $final_control = 'none';
-    if ($order['control'] !== 'none') {
-        $final_control = $order['control'];
-    } elseif ($order['user_control'] !== 'none') {
-        $final_control = $order['user_control'];
-    }
-
-    if ($final_control === 'win') {
-        $result = 'win';
-    } elseif ($final_control === 'loss') {
-        $result = 'loss';
-    } else {
-        // Default behavior if no control is set: 50/50 chance
-        $result = (rand(0, 100) > 50) ? 'win' : 'loss';
-    }
-
-    if ($result === 'win') {
-        $profit = $order['amount'] * $order['profit_rate'];
-        $total_return = $order['amount'] + $profit;
-        
-        // Add balance to user
-        $stmt_bal = $pdo->prepare("UPDATE users SET balance = balance + ? WHERE id = ?");
-        $stmt_bal->execute([$total_return, $order['user_id']]);
-        
-        // Set closing price slightly higher or lower than opening price to match result
-        $variation = (float)($order['opening_price'] * 0.0001 * rand(1, 10));
-        $closing_price = ($order['direction'] === 'up') ? $order['opening_price'] + $variation : $order['opening_price'] - $variation;
-    } else {
-        $profit = -$order['amount'];
-        $variation = (float)($order['opening_price'] * 0.0001 * rand(1, 10));
-        $closing_price = ($order['direction'] === 'up') ? $order['opening_price'] - $variation : $order['opening_price'] + $variation;
-    }
-
-    $stmt_update = $pdo->prepare("UPDATE option_orders SET status = 'completed', result = ?, profit = ?, closing_price = ? WHERE id = ?");
-    $stmt_update->execute([$result, $profit, $closing_price, $order['id']]);
+if (!in_array($status_filter, ['pending', 'completed'])) {
+    $status_filter = 'pending';
 }
 
-// Fetch current orders for the user to return to frontend
-$stmt = $pdo->prepare("SELECT * FROM option_orders WHERE user_id = ? AND status = ? ORDER BY created_at DESC");
-$stmt->execute([$user_id, $status]);
-$orders = $stmt->fetchAll();
+$pdo = db();
 
-echo json_encode(['success' => true, 'data' => $orders]);
\ No newline at end of file
+// --- Settlement Logic for Due Orders ---
+try {
+    $now = date('Y-m-d H:i:s');
+    // Fetch orders that are pending and due for settlement, and join with users to get control settings.
+    $stmt = $pdo->prepare(
+        "SELECT o.*, u.win_loss_control FROM option_orders o " . 
+        "JOIN users u ON o.user_id = u.id " . 
+        "WHERE o.status = 'pending' AND o.settle_at <= ?"
+    );
+    $stmt->execute([$now]);
+    $due_orders = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+    if (count($due_orders) > 0) {
+        $pdo->beginTransaction();
+
+        foreach ($due_orders as $order) {
+            $result = 'loss'; // Default to loss
+
+            // Determine final control setting (user's setting is the only one we consider as per request)
+            $final_control = $order['win_loss_control'];
+
+            if ($final_control == 'win') {
+                $result = 'win';
+            } elseif ($final_control == 'loss') {
+                $result = 'loss';
+            } else { // No control set, default to random
+                $result = (rand(0, 100) < 51) ? 'loss' : 'win'; // 51% chance to lose to have a house edge
+            }
+            
+            $profit = 0;
+            // Calculate profit and update user balance
+            if ($result === 'win') {
+                $profit = $order['amount'] * $order['profit_rate'];
+                $total_return = $order['amount'] + $profit;
+
+                // Credit the user's balance with the principal + profit
+                $bal_stmt = $pdo->prepare("UPDATE users SET balance = balance + ? WHERE id = ?");
+                $bal_stmt->execute([$total_return, $order['user_id']]);
+            } else {
+                // Loss means the wagered amount is lost. No balance update needed as it was deducted at placement.
+                $profit = -$order['amount'];
+            }
+
+            // Fake a closing price that realistically matches the outcome
+            $price_variation = (float)($order['open_price'] * 0.0001 * rand(1, 5));
+            if (($order['direction'] === 'up' && $result === 'win') || ($order['direction'] === 'down' && $result === 'loss')) {
+                $closing_price = $order['open_price'] + $price_variation;
+            } else {
+                $closing_price = $order['open_price'] - $price_variation;
+            }
+
+            // Update the order to settled status
+            $update_stmt = $pdo->prepare(
+                "UPDATE option_orders SET status = 'completed', result = ?, profit = ?, close_price = ? WHERE id = ?"
+            );
+            $update_stmt->execute([$result, $profit, $closing_price, $order['id']]);
+        }
+        $pdo->commit();
+    }
+} catch (Exception $e) {
+    if ($pdo->inTransaction()) {
+        $pdo->rollBack();
+    }
+    error_log("Option settlement failed: " . $e->getMessage());
+    // Don't exit, still try to fetch orders for the user
+}
+
+// --- Fetch and Return Orders for Frontend ---
+$stmt = $pdo->prepare("SELECT * FROM option_orders WHERE user_id = ? AND status = ? ORDER BY start_time DESC LIMIT 50");
+$stmt->execute([$user_id, $status_filter]);
+$orders = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+echo json_encode($orders);
+?>
diff --git a/api/place_option_order.php b/api/place_option_order.php
index 7efa3aa..c9f04c6 100644
--- a/api/place_option_order.php
+++ b/api/place_option_order.php
@@ -4,65 +4,117 @@ require_once '../db/config.php';
 session_start();
 
 if (!isset($_SESSION['user_id'])) {
-    echo json_encode(['success' => false, 'error' => 'Please login first']);
+    echo json_encode(['success' => false, 'error' => 'User not logged in']);
     exit;
 }
 
 $user_id = $_SESSION['user_id'];
 $data = json_decode(file_get_contents('php://input'), true);
 
-$symbol = $data['symbol'] ?? '';
+// --- Input Validation ---
+$pair = $data['pair'] ?? null;
 $amount = (float)($data['amount'] ?? 0);
-$direction = $data['direction'] ?? '';
-$duration = (int)($data['duration'] ?? 60);
-$opening_price = (float)($data['opening_price'] ?? 0);
+$direction = $data['direction'] ?? null;
+$duration = (int)($data['duration'] ?? 0);
+$rate = (float)($data['rate'] ?? 0); // Profit rate in percentage
 
-// Updated Validate duration and profit rates as per user request
-// 60s/8%、90s/12%、120s/15%、180s/20%、300s/32%
-$valid_durations = [
-    60 => ['profit' => 0.08, 'min' => 100],
-    90 => ['profit' => 0.12, 'min' => 5000],
-    120 => ['profit' => 0.15, 'min' => 30000],
-    180 => ['profit' => 0.20, 'min' => 100000],
-    300 => ['profit' => 0.32, 'min' => 300000],
+if (empty($pair) || empty($direction) || $amount <= 0 || $duration <= 0 || $rate <= 0) {
+    echo json_encode(['success' => false, 'error' => 'Invalid order parameters.']);
+    exit;
+}
+
+// --- Server-Side Rules Validation ---
+$valid_options = [
+    60 => ['rate' => 8, 'min' => 100],
+    90 => ['rate' => 12, 'min' => 5000],
+    120 => ['rate' => 15, 'min' => 30000],
+    180 => ['rate' => 20, 'min' => 100000],
+    300 => ['rate' => 32, 'min' => 300000],
 ];
 
-if (!isset($valid_durations[$duration])) {
-    echo json_encode(['success' => false, 'error' => 'Invalid duration']);
+if (!isset($valid_options[$duration]) || $valid_options[$duration]['rate'] != $rate) {
+    echo json_encode(['success' => false, 'error' => 'Invalid duration or profit rate selected.']);
     exit;
 }
 
-$profit_rate = $valid_durations[$duration]['profit'];
-$min_amount = $valid_durations[$duration]['min'];
-
+$min_amount = $valid_options[$duration]['min'];
 if ($amount < $min_amount) {
-    echo json_encode(['success' => false, 'error' => "Minimum amount for {$duration}S is {$min_amount} USDT"]);
+    echo json_encode(['success' => false, 'error' => "Minimum amount for {$duration}s is {$min_amount} USDT."]);
     exit;
 }
 
-$db = db();
-$db->beginTransaction();
+// --- Securely Fetch Current Price from Binance API ---
+function get_current_price($symbol) {
+    $url = "https://api.binance.com/api/v3/ticker/price?symbol=" . urlencode($symbol);
+    $ch = curl_init($url);
+    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+    curl_setopt($ch, CURLOPT_TIMEOUT, 5);
+    $response = curl_exec($ch);
+    curl_close($ch);
+    if ($response) {
+        $data = json_decode($response, true);
+        if (isset($data['price'])) {
+            return (float)$data['price'];
+        }
+    }
+    return null;
+}
+
+$open_price = get_current_price($pair);
+if ($open_price === null) {
+    echo json_encode(['success' => false, 'error' => 'Could not fetch current price for the pair. Please try again.']);
+    exit;
+}
+
+// --- Database Transaction --- 
+$pdo = db();
+$pdo->beginTransaction();
 
 try {
-    $stmt = $db->prepare("SELECT balance FROM users WHERE id = ? FOR UPDATE");
+    // 1. Lock user row and check balance
+    $stmt = $pdo->prepare("SELECT balance FROM users WHERE id = ? FOR UPDATE");
     $stmt->execute([$user_id]);
     $user = $stmt->fetch();
-    
+
     if (!$user || $user['balance'] < $amount) {
-        throw new Exception('Insufficient balance');
+        $pdo->rollBack();
+        echo json_encode(['success' => false, 'error' => 'Insufficient balance.']);
+        exit;
     }
 
+    // 2. Deduct balance
     $new_balance = $user['balance'] - $amount;
-    $db->prepare("UPDATE users SET balance = ? WHERE id = ?")->execute([$new_balance, $user_id]);
+    $stmt = $pdo->prepare("UPDATE users SET balance = ? WHERE id = ?");
+    $stmt->execute([$new_balance, $user_id]);
 
+    // 3. Insert the new option order
+    $start_time = date('Y-m-d H:i:s');
     $settle_at = date('Y-m-d H:i:s', time() + $duration);
+    $profit_rate_decimal = $rate / 100; // Store as decimal for calculation
 
-    $stmt = $db->prepare("INSERT INTO option_orders (user_id, symbol, amount, direction, duration, profit_rate, opening_price, status, settle_at) VALUES (?, ?, ?, ?, ?, ?, ?, 'pending', ?)");
-    $stmt->execute([$user_id, $symbol, $amount, $direction, $duration, $profit_rate, $opening_price, $settle_at]);
+    $stmt = $pdo->prepare(
+        "INSERT INTO option_orders (user_id, pair, amount, direction, duration, profit_rate, open_price, status, start_time, settle_at) " . 
+        "VALUES (?, ?, ?, ?, ?, ?, ?, 'pending', ?, ?)"
+    );
+    $stmt->execute([$user_id, $pair, $amount, $direction, $duration, $profit_rate_decimal, $open_price, $start_time, $settle_at]);
+
+    $order_id = $pdo->lastInsertId();
+
+    // 4. Commit the transaction
+    $pdo->commit();
+
+    // 5. Fetch the created order to return to the frontend
+    $stmt = $pdo->prepare("SELECT * FROM option_orders WHERE id = ?");
+    $stmt->execute([$order_id]);
+    $new_order = $stmt->fetch(PDO::FETCH_ASSOC);
+
+    echo json_encode(['success' => true, 'order' => $new_order]);
 
-    $db->commit();
-    echo json_encode(['success' => true, 'new_balance' => $new_balance]);
 } catch (Exception $e) {
-    $db->rollBack();
-    echo json_encode(['success' => false, 'error' => $e->getMessage()]);
+    if ($pdo->inTransaction()) {
+        $pdo->rollBack();
+    }
+    error_log("Option order failed: " . $e->getMessage());
+    echo json_encode(['success' => false, 'error' => 'An internal error occurred. Please try again later.']);
 }
+?>
\ No newline at end of file
diff --git a/assets/pasted-20260213-133615-f239802a.png b/assets/pasted-20260213-133615-f239802a.png
new file mode 100644
index 0000000..ce477fc
Binary files /dev/null and b/assets/pasted-20260213-133615-f239802a.png differ
diff --git a/assets/pasted-20260213-134043-36ee7ade.png b/assets/pasted-20260213-134043-36ee7ade.png
new file mode 100644
index 0000000..ed37721
Binary files /dev/null and b/assets/pasted-20260213-134043-36ee7ade.png differ
diff --git a/futures.php b/futures.php
index f77c281..e663794 100644
--- a/futures.php
+++ b/futures.php
@@ -1,550 +1,433 @@
 <?php
 include 'header.php';
 require_once 'db/config.php';
+require_once 'includes/i18n.php';
 
 $user_id = $_SESSION['user_id'] ?? null;
+$user_assets = [];
+if ($user_id) {
+    $pdo = db();
+    $stmt = $pdo->prepare("SELECT currency, balance FROM assets WHERE user_id = ?");
+    $stmt->execute([$user_id]);
+    $assets_data = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
+    if ($assets_data) {
+        $user_assets = $assets_data;
+    }
+}
 ?>
 
 <style>
-    /* Global layout enforcement */
+    /* New Robust Layout from spot.php */
     html, body {
-        background: #0b0e11;
-        min-width: 1280px;
-        max-width: 1920px;
-        margin: 0 auto;
-        overflow-x: auto;
+        /* UNLOCKED for scrolling */
     }
-
-    @media (max-width: 991px) {
-        html, body {
-            min-width: 100%;
-            max-width: 100%;
-            overflow-x: hidden;
-        }
-        .navbar, footer { display: none !important; }
-        body { padding-bottom: 0 !important; }
-    }
-
-    .trading-container {
+    .trading-page-wrapper {
         display: flex;
+        flex-direction: column;
+        min-height: 100vh; /* Ensure it takes at least full height */
+    }
+    .trading-page-wrapper .navbar {
+        flex-shrink: 0;
+    }
+    .trading-container {
+        flex-grow: 1;
+        display: flex;
+        min-height: 800px; /* Give a minimum height for content */
         background: #0b0e11;
-        min-height: calc(100vh - 64px);
-        width: 100%;
     }
-    
-    @media (max-width: 991px) {
-        .trading-container { min-height: calc(100vh - 50px); flex-direction: column; }
-    }
-    
+
+    /* Columns */
     .left-col { width: 260px; flex-shrink: 0; background: #161a1e; display: flex; flex-direction: column; border-right: 1px solid #2b3139; }
-    .center-col { flex: 1; min-width: 600px; background: #0b0e11; display: flex; flex-direction: column; border-right: 1px solid #2b3139; }
+    .center-col { flex: 1; min-width: 600px; display: flex; flex-direction: column; border-right: 1px solid #2b3139; min-height: 0; }
     .right-col { width: 320px; flex-shrink: 0; background: #161a1e; display: flex; flex-direction: column; }
 
-    @media (max-width: 991px) {
-        .left-col, .right-col { display: none !important; }
-        .center-col { min-width: 100%; }
-    }
+    /* Center Column Content Layout */
+    .chart-header { flex-shrink: 0; height: 50px; padding: 8px 20px; display: flex; align-items: center; background: #161a1e; border-bottom: 1px solid #2b3139; gap: 20px; }
+    .chart-box { height: 350px; flex-shrink: 0; border-bottom: 1px solid #2b3139; }
+    .bottom-content-wrapper { flex-grow: 1; overflow-y: auto; min-height: 0; }
 
+    .order-box { padding: 12px 20px; background: #161a1e; border-bottom: 1px solid #2b3139; }
+    .records-container { display: flex; flex-direction: column; background: #161a1e; flex-grow: 1; min-height: 400px; }
+    .record-tabs { display: flex; padding: 0 20px; flex-shrink: 0; border-bottom: 1px solid #2b3139; }
+    .record-tab { padding: 12px 0; margin-right: 25px; font-size: 14px; font-weight: 600; color: #848e9c; cursor: pointer; border-bottom: 2px solid transparent; }
+    .record-tab.active { color: white; border-bottom-color: var(--primary-color); }
+    #records-list { padding: 10px 0; flex-grow: 1; overflow-y: auto; }
+    
+    .right-col { display: flex; flex-direction: column;}
+    .ob-panel, .trades-panel { flex-grow: 1; min-height: 0; display: flex; flex-direction: column;}
+    .ob-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+    #asks-list { flex: 1 1 50%; display: flex; flex-direction: column; overflow: hidden; justify-content: flex-end; }
+    #bids-list { flex: 1 1 50%; display: flex; flex-direction: column; overflow: hidden; justify-content: flex-start; }
+    #trades-content { flex: 1; overflow-y: auto; min-height: 0; }
+    
+    .left-col { overflow-y: auto; }
+    #pairs-list { flex: 1; overflow-y: auto; }
+    .ob-header, .trades-header { padding: 10px 15px; font-size: 12px; color: #848e9c; display: flex; justify-content: space-between; border-bottom: 1px solid #2b3139; background: #161a1e; flex-shrink: 0;}
+    .ob-row, .trade-row { display: flex; justify-content: space-between; padding: 3px 15px; font-size: 12px; position: relative; cursor: pointer; height: 20px; align-items: center; flex-shrink: 0; }
+    .ob-bar { position: absolute; right: 0; top: 0; bottom: 0; opacity: 0.1; z-index: 0; transition: width 0.1s linear; }
+    #mid-price { padding: 8px 15px; font-size: 16px; font-weight: 800; text-align: center; border-top: 1px solid #2b3139; border-bottom: 1px solid #2b3139; background: #161a1e; flex-shrink: 0;}
+    .coin-icon { width: 22px; height: 22px; margin-right: 12px; border-radius: 50%; }
+    .stats-item { display: flex; flex-direction: column; justify-content: center; }
+    .stats-label { font-size: 10px; color: #848e9c; margin-bottom: 1px; }
+    .stats-value { font-size: 12px; font-weight: 600; color: white; }
+    #websocket-status { display: none; /* Hiding this element as requested */ padding: 8px 15px; font-size: 12px; color: #fff; text-align: center; position: absolute; top: 0; left: 0; right: 0; z-index: 1000; }
+    
     .category-tabs { display: flex; padding: 15px 15px 5px; gap: 8px; }
-    .category-tab { flex: 1; text-align: center; padding: 6px 0; background: #2b3139; border-radius: 4px; font-size: 11px; color: #848e9c; cursor: pointer; transition: all 0.2s; white-space: nowrap; border: 1px solid transparent; }
+    .category-tab { flex: 1; text-align: center; padding: 6px 0; background: #2b3139; border-radius: 4px; font-size: 12px; color: #848e9c; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; }
     .category-tab.active { background: rgba(0, 82, 255, 0.1); border-color: var(--primary-color); color: var(--primary-color); font-weight: bold; }
-
     .search-box { padding: 5px 15px 10px; position: relative; }
     .search-box i { position: absolute; left: 25px; top: 50%; transform: translateY(-50%); color: #848e9c; font-size: 12px; }
     .search-box input { width: 100%; background: #2b3139; border: 1px solid transparent; border-radius: 4px; padding: 8px 10px 8px 30px; color: white; font-size: 13px; outline: none; }
-    .search-box input:focus { border-color: var(--primary-color); }
-
-    #pairs-list { flex: 1; overflow-y: auto; }
-    .pair-item { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; transition: all 0.2s; border-bottom: 1px solid rgba(255,255,255,0.02); }
-    .pair-item:hover { background: #1e2329; }
-    .pair-item.active { background: #1e2329; border-left: 3px solid var(--primary-color); }
-    .coin-icon { width: 22px; height: 22px; margin-right: 12px; border-radius: 50%; flex-shrink: 0; background: #2b3139; }
-
-    .chart-header { padding: 8px 20px; display: flex; align-items: center; background: #161a1e; border-bottom: 1px solid #2b3139; flex-wrap: nowrap; gap: 20px; height: 50px; }
-    .chart-box { flex: 1; min-height: 350px; height: 350px; background: #0b0e11; border-bottom: 1px solid #2b3139; }
-    @media (max-width: 991px) { .chart-box { min-height: 350px; height: 350px; } }
-    
-    .order-box { padding: 12px 20px; background: #161a1e; border-bottom: 1px solid #2b3139; }
-    .futures-config { display: flex; gap: 10px; margin-bottom: 10px; }
-    .config-btn { flex: 1; background: #2b3139; color: white; padding: 6px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; font-size: 12px; text-align: center; font-weight: 600; }
-    .config-btn:hover { border-color: var(--primary-color); }
-
+    .pair-item { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; transition: background 0.2s; border-bottom: 1px solid rgba(255,255,255,0.02); }
+    .pair-item.active { background: #1e2329; }
     .input-group { background: #2b3139; border-radius: 4px; padding: 6px 12px; display: flex; align-items: center; margin-bottom: 6px; border: 1px solid transparent; }
     .input-group:focus-within { border-color: var(--primary-color); }
-    .input-group input { background: transparent; border: none; color: white; flex: 1; text-align: left; outline: none; font-size: 13px; width: 100%; }
+    .input-group input { background: transparent; border: none; color: white; flex: 1; outline: none; font-size: 13px; width: 100%; }
     .input-group .label { color: #848e9c; font-size: 11px; margin-right: 10px; }
     .input-group .unit { color: #848e9c; margin-left: 8px; font-size: 11px; }
-
     .slider-container { margin: 8px 0 15px; padding: 0 5px; }
-    .slider-labels { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: #848e9c; }
     input[type=range] { -webkit-appearance: none; width: 100%; height: 3px; background: #2b3139; border-radius: 2px; outline: none; }
-    input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--primary-color); border-radius: 50%; cursor: pointer; border: 2px solid #161a1e; }
+    input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--primary-color); border-radius: 50%; cursor: pointer; }
+    .trade-btn { width: 100%; padding: 10px; border-radius: 4px; font-weight: bold; font-size: 14px; border: none; cursor: pointer; margin-top: 5px; }
+    .right-col-tabs { display: flex; border-bottom: 1px solid #2b3139; flex-shrink: 0;}
+    .right-col-tab { flex: 1; text-align: center; padding: 10px 0; font-size: 13px; font-weight: 600; color: #848e9c; cursor: pointer; background: #161a1e; }
+    .right-col-tab.active { color: white; background: #1e2329;}
 
+    /* Futures specific styles */
+    .futures-config { display: flex; gap: 10px; margin-bottom: 10px; }
+    .config-btn { flex: 1; background: #2b3139; color: white; padding: 6px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; font-size: 12px; text-align: center; font-weight: 600; }
     .trade-actions { display: flex; gap: 12px; margin-top: 8px; }
-    .trade-btn { flex: 1; padding: 10px; border-radius: 4px; font-weight: bold; font-size: 14px; border: none; cursor: pointer; transition: opacity 0.2s; }
     .btn-long { background: #0ecb81; color: white; }
     .btn-short { background: #f6465d; color: white; }
-
-    .record-tabs { display: flex; background: #161a1e; border-bottom: 1px solid #2b3139; padding: 0 20px; }
-    .record-tab { padding: 10px 0; margin-right: 25px; font-size: 13px; color: #848e9c; cursor: pointer; position: relative; }
-    .record-tab.active { color: white; border-bottom: 2px solid var(--primary-color); font-weight:bold; }
-    .records-content { min-height: 200px; background: #161a1e; overflow-y: auto; }
-
-    .ob-header { padding: 10px 15px; font-size: 11px; color: #848e9c; display: flex; justify-content: space-between; border-bottom: 1px solid #2b3139; background: #161a1e; }
-    .ob-row { display: flex; justify-content: space-between; padding: 3px 15px; font-size: 12px; position: relative; cursor: pointer; height: 20px; align-items: center; }
-    .ob-bar { position: absolute; right: 0; top: 0; bottom: 0; opacity: 0.1; z-index: 0; }
-    #mid-price { padding: 8px 15px; font-size: 16px; font-weight: 800; text-align: center; border-top: 1px solid #2b3139; border-bottom: 1px solid #2b3139; background: #161a1e; }
-
-    #asks-list { height: 400px; display: flex; flex-direction: column; overflow: hidden; justify-content: flex-end; }
-    #bids-list { height: 400px; display: flex; flex-direction: column; overflow: hidden; justify-content: flex-start; }
-
-    .stats-item { display: flex; flex-direction: column; justify-content: center; }
-    .stats-label { font-size: 10px; color: #848e9c; margin-bottom: 1px; white-space: nowrap; }
-    .stats-value { font-size: 12px; font-weight: 600; color: white; white-space: nowrap; }
-
-    .m-trade-nav { display: none; background: #161a1e; border-bottom: 1px solid #2b3139; position: sticky; top: 0; z-index: 100; }
-    .m-trade-nav a { flex: 1; text-align: center; padding: 14px; font-size: 14px; color: #848e9c; text-decoration: none; border-bottom: 2px solid transparent; }
-    .m-trade-nav a.active { color: var(--primary-color); border-bottom-color: var(--primary-color); font-weight: bold; }
-
-    .m-currency-bar { display: none; overflow-x: auto; background: #161a1e; padding: 10px; gap: 10px; border-bottom: 1px solid #2b3139; scrollbar-width: none; }
-    .m-currency-bar::-webkit-scrollbar { display: none; }
-    .m-coin-item { flex-shrink: 0; background: #2b3139; padding: 6px 12px; border-radius: 4px; display: flex; align-items: center; gap: 6px; border: 1px solid transparent; }
-    .m-coin-item.active { border-color: var(--primary-color); background: rgba(0, 82, 255, 0.1); }
-    .m-coin-item img { width: 16px; height: 16px; border-radius: 50%; }
-
-    .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; display: none; align-items: center; justify-content: center; }
-    .modal-content { background: #1e2329; width: 90%; max-width: 400px; padding: 25px; border-radius: 12px; }
-
-    @media (max-width: 991px) {
-        .m-trade-nav { display: flex; }
-        .m-currency-bar { display: flex; }
-        .chart-header { gap: 10px; padding: 10px 15px; overflow-x: auto; scrollbar-width: none; }
-        .chart-header::-webkit-scrollbar { display: none; }
-    }
 </style>
 
-<div class="m-trade-nav">
-    <a href="spot.php"><?php echo __('nav_spot'); ?></a>
-    <a href="futures.php" class="active"><?php echo __('nav_futures'); ?></a>
-    <a href="options.php"><?php echo __('nav_options'); ?></a>
-</div>
-
-<div class="m-currency-bar" id="m-coin-list"></div>
-
-<div class="trading-container">
-    <div class="left-col d-none d-lg-flex">
-        <div class="category-tabs">
-            <div class="category-tab" onclick="location.href='options.php'"><?php echo $lang == 'zh' ? '秒合约' : 'Options'; ?></div>
-            <div class="category-tab" onclick="location.href='spot.php'"><?php echo $lang == 'zh' ? '现货交易' : 'Spot'; ?></div>
-            <div class="category-tab active" onclick="location.href='futures.php'"><?php echo $lang == 'zh' ? '合约交易' : 'Futures'; ?></div>
+<div class="trading-page-wrapper">
+    <?php // The real header is included in the file, this is a placeholder for the structure. ?>
+    <div class="trading-container flex-column flex-lg-row">
+        <div class="left-col d-none d-lg-flex flex-column">
+            <div class="category-tabs">
+                <div class="category-tab" onclick="location.href='options.php'"><?php echo __('nav_options'); ?></div>
+                <div class="category-tab" onclick="location.href='spot.php'"><?php echo __('nav_spot'); ?></div>
+                <div class="category-tab active" onclick="location.href='futures.php'"><?php echo __('nav_futures'); ?></div>
+            </div>
+            <div class="search-box">
+                <i class="fas fa-search"></i>
+                <input type="text" id="pair-search" placeholder="<?php echo __('search_contract'); ?>">
+            </div>
+            <div id="pairs-list" class="flex-grow-1" style="overflow-y: auto;"></div>
         </div>
-        <div class="search-box">
-            <i class="fas fa-search"></i>
-            <input type="text" id="pair-search" placeholder="<?php echo __('search_currency'); ?>">
-        </div>
-        <div id="pairs-list"></div>
-    </div>
 
-    <div class="center-col">
-        <div class="chart-header">
-            <div style="display: flex; align-items: center; gap: 10px; padding-right: 15px; border-right: 1px solid #2b3139;">
-                <img id="curr-icon" src="" class="coin-icon" style="margin:0; width:28px; height:28px;">
-                <span id="curr-pair" style="font-weight: 800; font-size: 16px;">--/-- Perpetual</span>
+        <div class="center-col">
+            <div id="websocket-status"></div>
+            <div class="chart-header">
+                 <div style="display: flex; align-items: center; gap: 10px; padding-right: 15px; border-right: 1px solid #2b3139;">
+                    <img id="curr-icon" src="" class="coin-icon" style="margin:0; width:28px; height:28px;">
+                    <span id="curr-pair" style="font-weight: 800; font-size: 16px;">--/--</span>
+                </div>
+                <div class="stats-item">
+                    <div id="curr-price" style="font-size: 18px; font-weight: 800; color: #0ecb81; line-height: 1.2;">--</div>
+                    <div id="curr-change" style="font-size: 11px; font-weight: 600;">--</div>
+                </div>
+                <div class="stats-item"><span class="stats-label"><?php echo __('24h_high'); ?></span><span class="stats-value" id="h-high">--</span></div>
+                <div class="stats-item"><span class="stats-label"><?php echo __('24h_low'); ?></span><span class="stats-value" id="h-low">--</span></div>
+                <div class="stats-item"><span class="stats-label"><?php echo __('24h_vol'); ?></span><span class="stats-value" id="h-vol">--</span></div>
             </div>
             
-            <div class="stats-item">
-                <div id="curr-price" style="font-size: 18px; font-weight: 800; color: #0ecb81; line-height: 1.2;">--</div>
-                <div id="curr-change" style="font-size: 11px; font-weight: 600;">--</div>
-            </div>
-
-            <div class="stats-item">
-                <span class="stats-label"><?php echo __('24h_high'); ?></span>
-                <span class="stats-value" id="h-high">--</span>
-            </div>
-            <div class="stats-item">
-                <span class="stats-label"><?php echo __('24h_low'); ?></span>
-                <span class="stats-value" id="h-low">--</span>
-            </div>
-            <div class="stats-item">
-                <span class="stats-label"><?php echo __('24h_vol'); ?></span>
-                <span class="stats-value" id="h-vol">--</span>
-            </div>
-        </div>
-        
-        <div class="chart-box"><div id="tv_chart_container" style="height: 100%;"></div></div>
-
-        <div class="order-box">
-            <div class="futures-config">
-                <div class="config-btn" id="margin-mode"><?php echo __('cross'); ?></div>
-                <div class="config-btn" id="leverage-val">20x</div>
-            </div>
-            <div class="input-group">
-                <span class="label"><?php echo __('price'); ?></span>
-                <input type="number" id="futures-price" placeholder="<?php echo __('market'); ?>">
-                <span class="unit">USDT</span>
-            </div>
-            <div class="input-group">
-                <span class="label"><?php echo __('amount'); ?></span>
-                <input type="number" id="futures-amount" placeholder="0.00">
-                <span class="unit coin-name">--</span>
-            </div>
-            <div class="slider-container">
-                <input type="range" id="futures-slider" min="0" max="100" value="0" step="1">
-                <div class="slider-labels"><span>0%</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span></div>
-            </div>
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
-                <div class="input-group"><span class="label">TP</span><input type="number" id="futures-tp" placeholder="<?php echo __('price'); ?>"></div>
-                <div class="input-group"><span class="label">SL</span><input type="number" id="futures-sl" placeholder="<?php echo __('price'); ?>"></div>
-            </div>
-            <div style="display: flex; justify-content: space-between; font-size: 11px; color: #848e9c; margin-bottom: 8px;">
-                <span><?php echo __('available'); ?></span><span id="futures-avail" style="color:white; font-weight:600">0.00 USDT</span>
-            </div>
-            <div class="trade-actions">
-                <button id="btn-buy-long" class="trade-btn btn-long"><?php echo __('buy_long'); ?></button>
-                <button id="btn-sell-short" class="trade-btn btn-short"><?php echo __('sell_short'); ?></button>
+            <div class="chart-box" id="tv_chart_container"></div>
+            
+            <div class="bottom-content-wrapper">
+                 <div class="order-box">
+                    <div class="futures-config">
+                        <div class="config-btn" id="margin-mode"><?php echo __('cross'); ?></div>
+                        <div class="config-btn" id="leverage-val">20x</div>
+                    </div>
+                    <div class="input-group"><span class="label"><?php echo __('price'); ?></span><input type="number" id="futures-price" placeholder="<?php echo __('market'); ?>" disabled><span class="unit">USDT</span></div>
+                    <div class="input-group"><span class="label"><?php echo __('amount'); ?></span><input type="number" id="futures-amount" placeholder="0.00"><span class="unit coin-name">--</span></div>
+                    <div class="slider-container"><input type="range" id="futures-slider" min="0" max="100" value="0" step="1"></div>
+                    <div style="font-size: 11px; color: #848e9c; margin-bottom: 8px;"><span><?php echo __('available'); ?>: </span><span id="futures-avail" style="color:white; font-weight:600">0.00 USDT</span></div>
+                    <div class="trade-actions">
+                        <button id="btn-buy-long" class="trade-btn btn-long"><?php echo __('open_long'); ?></button>
+                        <button id="btn-sell-short" class="trade-btn btn-short"><?php echo __('open_short'); ?></button>
+                    </div>
+                </div>
+                <div class="records-container">
+                    <div class="record-tabs">
+                        <div class="record-tab active" data-status="positions"><?php echo __('current_positions'); ?></div>
+                        <div class="record-tab" data-status="history"><?php echo __('history_orders'); ?></div>
+                    </div>
+                    <div id="records-list"></div>
+                </div>
             </div>
         </div>
 
-        <div class="record-tabs">
-            <div class="record-tab active" data-status="positions"><?php echo __('positions'); ?></div>
-            <div class="record-tab" data-status="history"><?php echo __('history_orders'); ?></div>
-            <div class="record-tab" data-status="trades"><?php echo __('settled'); ?></div>
-        </div>
-        <div id="records-list" class="records-content"></div>
-    </div>
+        <div class="right-col d-none d-lg-flex">
+            <div class="right-col-tabs">
+                <div class="right-col-tab active" data-tab="ob"><?php echo __('order_book'); ?></div>
+                <div class="right-col-tab" data-tab="trades"><?php echo __('trades'); ?></div>
+            </div>
 
-    <div class="right-col d-none d-lg-flex">
-        <div class="ob-header">
-            <span><?php echo __('price'); ?>(USDT)</span>
-            <span><?php echo __('amount'); ?>(<span class="coin-name">--</span>)</span>
-            <span><?php echo __('total'); ?></span>
+            <div id="ob-panel" class="ob-panel">
+                <div class="ob-header">
+                    <span><?php echo __('price'); ?>(USDT)</span>
+                    <span><?php echo __('amount'); ?>(<span class="coin-name">--</span>)</span>
+                    <span><?php echo __('total'); ?></span>
+                </div>
+                <div class="ob-content">
+                    <div id="asks-list"></div>
+                    <div id="mid-price">--</div>
+                    <div id="bids-list"></div>
+                </div>
+            </div>
+
+            <div id="trades-panel" class="trades-panel" style="display: none;">
+                 <div class="trades-header">
+                    <span><?php echo __('price'); ?>(USDT)</span>
+                    <span><?php echo __('amount'); ?>(<span class="coin-name">--</span>)</span>
+                    <span><?php echo __('time'); ?></span>
+                </div>
+                <div id="trades-content"></div>
+            </div>
         </div>
-        <div id="asks-list" style="height: 400px; display: flex; flex-direction: column; overflow: hidden; justify-content: flex-end;"></div>
-        <div id="mid-price" style="color: white;">--</div>
-        <div id="bids-list" style="height: 400px; display: flex; flex-direction: column; overflow: hidden; justify-content: flex-start;"></div>
     </div>
 </div>
 
-<div class="modal-overlay" id="leverage-modal">
-    <div class="modal-content">
-        <div style="display:flex; justify-content:space-between; margin-bottom:20px;"><span style="font-weight:bold; font-size:16px;"><?php echo __('adjust_leverage'); ?></span><i class="fas fa-times" id="close-leverage-modal" style="cursor:pointer; color:#848e9c"></i></div>
-        <div style="text-align:center; font-size:32px; font-weight:800; color:var(--primary-color); margin-bottom:10px;" id="slider-val">20x</div>
-        <div class="slider-container">
-            <input type="range" id="leverage-range" min="20" max="100" value="20">
-            <div style="display:flex; justify-content:space-between; font-size:12px; color:#848e9c; margin-top:10px;"><span>20x</span><span>100x</span></div>
-        </div>
-        <button class="trade-btn btn-long" style="width:100%;" id="confirm-leverage-btn"><?php echo __('confirm'); ?></button>
-    </div>
-</div>
-
-<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
 <script>
-TradingView.onready(function() {
+const userAssets = <?php echo json_encode($user_assets); ?>;
+
+document.addEventListener('DOMContentLoaded', function() {
+    // --- Globals ---
     let currentPair = 'BTCUSDT';
     let currentPrice = 0;
-    let currentLeverage = 20;
-    let marginMode = 'cross';
-    let currentStatus = 'positions';
-    let searchQuery = '';
     let ws;
-    let balances = {usdt: 0};
-
-    const pairs = ['BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'DOTUSDT', 'MATICUSDT', 'LTCUSDT', 'SHIBUSDT', 'TRXUSDT', 'AVAXUSDT', 'LINKUSDT', 'BCHUSDT', 'UNIUSDT', 'ETCUSDT', 'NEARUSDT', 'FILUSDT', 'ALGOUSDT', 'FTMUSDT', 'SANDUSDT', 'MANAUSDT', 'AXSUSDT', 'ATOMUSDT', 'HBARUSDT', 'ICPUSDT', 'VETUSDT'];
     const marketData = {};
+    const pairs = [
+        'BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'AVAXUSDT', 
+        'DOTUSDT', 'MATICUSDT', 'LTCUSDT', 'TRXUSDT', 'LINKUSDT', 'UNIUSDT', 'ATOMUSDT', 'ETCUSDT', 
+        'BCHUSDT', 'FILUSDT', 'ICPUSDT', 'NEARUSDT', 'AAVEUSDT', 'ALGOUSDT'
+    ];
 
-    function getIcon(s) {
-        const symbol = s.replace('USDT', '').toLowerCase();
-        return `https://assets.coincap.io/assets/icons/${symbol}@2x.png`;
+    // --- DOM Elements ---
+    const dom = {
+        websocketStatus: document.getElementById('websocket-status'),
+        currIcon: document.getElementById('curr-icon'),
+        currPair: document.getElementById('curr-pair'),
+        currPrice: document.getElementById('curr-price'),
+        currChange: document.getElementById('curr-change'),
+        hHigh: document.getElementById('h-high'),
+        hLow: document.getElementById('h-low'),
+        hVol: document.getElementById('h-vol'),
+        tvChartContainer: document.getElementById('tv_chart_container'),
+        pairsList: document.getElementById('pairs-list'),
+        pairSearch: document.getElementById('pair-search'),
+        asksList: document.getElementById('asks-list'),
+        bidsList: document.getElementById('bids-list'),
+        midPrice: document.getElementById('mid-price'),
+        tradesContent: document.getElementById('trades-content'),
+        coinNameSpans: document.querySelectorAll('.coin-name'),
+        futuresPriceInput: document.getElementById('futures-price'),
+        availFuturesSpan: document.getElementById('futures-avail')
+    };
+
+    // --- Balance Management ---
+    function updateAvailableBalances() {
+        const usdtBalance = parseFloat(userAssets.USDT || 0).toFixed(2);
+        if (dom.availFuturesSpan) {
+            dom.availFuturesSpan.innerText = `${usdtBalance} USDT`;
+        }
     }
 
-    function initChart(symbol) {
-        const container = document.getElementById('tv_chart_container');
-        if (container) container.innerHTML = '';
-        new TradingView.widget({
-            "width": "100%",
-            "height": "100%",
-            "symbol": "BINANCE:" + symbol + 'PERP', // Futures pairs often have PERP
+    // --- TradingView Chart ---
+    function initChartWidget(symbol) {
+        if (dom.tvChartContainer.firstChild) {
+            dom.tvChartContainer.innerHTML = '';
+        }
+        const widget = new TradingView.widget({
+            "autosize": true,
+            "symbol": `BINANCE:${symbol}USDT.PERP`,
             "interval": "15",
+            "timezone": "Etc/UTC",
             "theme": "dark",
             "style": "1",
             "locale": "<?php echo $lang == 'zh' ? 'zh_CN' : 'en'; ?>",
+            "toolbar_bg": "#f1f3f6",
+            "enable_publishing": false,
+            "withdateranges": true,
+            "hide_side_toolbar": true,
+            "allow_symbol_change": false,
             "container_id": "tv_chart_container",
-            "backgroundColor": "#0b0e11",
-            "hide_side_toolbar": true
+            "studies": [
+              "Volume@tv-basicstudies"
+            ],
+            "overrides": {
+                "paneProperties.background": "#161a1e",
+                "paneProperties.vertGridProperties.color": "rgba(255, 255, 255, 0.05)",
+                "paneProperties.horzGridProperties.color": "rgba(255, 255, 255, 0.05)",
+                "scalesProperties.textColor" : "#848e9c",
+            }
         });
     }
 
+    // --- WebSocket Connection ---
     function connectWebSocket() {
-        if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
-            return;
-        }
-        ws = new WebSocket('wss://fstream.binance.com/stream?streams=' + pairs.map(p => p.toLowerCase() + '@ticker').join('/') + '/' + pairs.map(p => p.toLowerCase() + '@depth20@100ms').join('/'));
+        if (ws) ws.close();
+        const streams = pairs.map(p => `${p.toLowerCase()}@ticker`).concat([`${currentPair.toLowerCase()}@depth20@100ms`, `${currentPair.toLowerCase()}@trade`]);
+        ws = new WebSocket(`wss://stream.binance.com:9443/stream?streams=${streams.join('/')}`);
         
-        ws.onmessage = (e) => {
-            const { stream, data } = JSON.parse(e.data);
-            const symbol = stream.split('@')[0].toUpperCase();
-
-            if (stream.includes('@ticker')) {
-                marketData[symbol] = data;
-                if (symbol === currentPair) {
+        ws.onmessage = (event) => {
+            const { stream, data } = JSON.parse(event.data);
+            if (!data) return;
+            const type = stream.split('@')[1];
+            
+            if (type === 'ticker') {
+                marketData[data.s] = data;
+                if (data.s === currentPair) {
                     currentPrice = parseFloat(data.c);
                     updatePriceUI(data);
                 }
-                renderPairs();
-            } else if (symbol === currentPair) {
-                renderOrderBook(data.b, data.a);
+                if (dom.pairsList.offsetParent) renderPairs();
+            } else if (type.startsWith('depth')) {
+                renderOrderBook(data.bids, data.asks);
+            } else if (type === 'trade') {
+                renderTrades(data);
             }
         };
 
-        ws.onclose = () => {
-            setTimeout(connectWebSocket, 5000);
-        };
+        ws.onerror = (error) => console.error('WebSocket Error:', error);
+        ws.onclose = () => setTimeout(connectWebSocket, 5000);
     }
 
+    // --- UI Rendering ---
     function updatePriceUI(d) {
         if (!d) return;
-        const color = d.p >= 0 ? '#0ecb81' : '#f6465d';
-        const priceStr = parseFloat(d.c).toLocaleString(undefined, {minimumFractionDigits: 2});
-        document.getElementById('curr-price').innerText = priceStr;
-        document.getElementById('curr-price').style.color = color;
-        document.getElementById('curr-change').innerText = (d.p >= 0 ? '+' : '') + parseFloat(d.P).toFixed(2) + '%';
-        document.getElementById('curr-change').style.color = color;
-        document.getElementById('h-high').innerText = parseFloat(d.h).toLocaleString();
-        document.getElementById('h-low').innerText = parseFloat(d.l).toLocaleString();
-        document.getElementById('h-vol').innerText = (parseFloat(d.v) / 1000).toFixed(1) + 'K';
-        const midPriceEl = document.getElementById('mid-price');
-        if (midPriceEl) {
-            midPriceEl.innerText = priceStr;
-            midPriceEl.style.color = color;
-        }
+        const color = d.P >= 0 ? '#0ecb81' : '#f6465d';
+        const priceStr = parseFloat(d.c).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
+        
+        document.title = `${priceStr} | ${d.s.replace('USDT', '/USDT')}`;
+        dom.currPrice.innerText = priceStr;
+        dom.currPrice.style.color = color;
+        dom.currChange.innerText = `${d.P >= 0 ? '+' : ''}${parseFloat(d.P).toFixed(2)}%`;
+        dom.currChange.style.color = color;
+        dom.hHigh.innerText = parseFloat(d.h).toLocaleString('en-US', {minimumFractionDigits: 2});
+        dom.hLow.innerText = parseFloat(d.l).toLocaleString('en-US', {minimumFractionDigits: 2});
+        dom.hVol.innerText = `${(parseFloat(d.v) / 1000).toFixed(1)}K`;
+        dom.midPrice.innerText = priceStr;
+        dom.midPrice.style.color = color;
     }
 
     function renderPairs() {
-        const list = document.getElementById('pairs-list');
-        const mBar = document.getElementById('m-coin-list');
-        if (!list || !mBar) return;
-        let lH = '';
-        let mH = '';
-        const filteredPairs = pairs.filter(p => p.toUpperCase().includes(searchQuery));
-
-        filteredPairs.forEach(p => {
-            const d = marketData[p] || {};
-            const icon = getIcon(p);
-            const active = p === currentPair;
-            const color = (d.p && parseFloat(d.p) >= 0) ? '#0ecb81' : '#f6465d';
-            const price = d.c ? parseFloat(d.c).toLocaleString(undefined, {minimumFractionDigits: 2}) : '--';
-            const change = d.P ? ((parseFloat(d.p) >= 0 ? '+' : '') + parseFloat(d.P).toFixed(2) + '%') : '--';
-            const disp = p.replace('USDT', '') + '/USDT';
-
-            lH += `<div class="pair-item ${active ? 'active' : ''}" data-pair="${p}"><img src="${icon}" class="coin-icon" onerror="this.src='https://ui-avatars.com/api/?name=${p.replace('USDT','')}&background=2b3139&color=fff'"> <div style="flex:1"><div style="font-weight:700; font-size:13px">${disp}</div></div> <div style="text-align:right"><div style="font-size:13px; font-weight:bold">${price}</div><div style="font-size:11px; color:${color}">${change}</div></div></div>`;
-            mH += `<div class="m-coin-item ${active ? 'active' : ''}" data-pair="${p}"><img src="${icon}" onerror="this.src='https://ui-avatars.com/api/?name=${p.replace('USDT','')}&background=2b3139&color=fff'"><span>${p.replace('USDT','')}</span></div>`;
-        });
-
-        list.innerHTML = lH;
-        mBar.innerHTML = mH;
-
-        document.querySelectorAll('.pair-item, .m-coin-item').forEach(item => {
-            item.addEventListener('click', () => switchPair(item.dataset.pair));
-        });
-    }
-
-    function filterPairs(e) {
-        searchQuery = e.target.value.toUpperCase();
-        renderPairs();
-    }
-
-    function switchPair(p) {
-        currentPair = p;
-        const coinName = p.replace('USDT', '');
-        const icon = getIcon(p);
-        document.getElementById('curr-pair').innerText = coinName + '/USDT Perpetual';
-        const iconEl = document.getElementById('curr-icon');
-        iconEl.src = icon;
-        iconEl.onerror = function() { this.src = `https://ui-avatars.com/api/?name=${coinName}&background=2b3139&color=fff`; };
-        document.querySelectorAll('.coin-name').forEach(el => el.innerText = coinName);
-        initChart(p);
-        updateBalance();
-        renderPairs();
-        const d = marketData[p] || {c: 0, p: 0, P: 0, h: 0, l: 0, v: 0};
-        updatePriceUI(d);
-        renderOrderBook([], []);
-    }
-
-    function toggleMarginMode() {
-        marginMode = marginMode === 'cross' ? 'isolated' : 'cross';
-        document.getElementById('margin-mode').innerText = marginMode === 'cross' ? '<?php echo __("cross"); ?>' : '<?php echo __("isolated"); ?>';
-    }
-
-    function toggleLeverageModal() {
-        const modal = document.getElementById('leverage-modal');
-        modal.style.display = modal.style.display === 'flex' ? 'none' : 'flex';
-    }
-
-    function updateSliderVal(v) {
-        document.getElementById('slider-val').innerText = v + 'x';
-    }
-
-    function confirmLeverage() {
-        currentLeverage = document.getElementById('leverage-range').value;
-        document.getElementById('leverage-val').innerText = currentLeverage + 'x';
-        toggleLeverageModal();
-    }
-
-    function setSlider(value) {
-        const pct = value / 100;
-        const price = parseFloat(document.getElementById('futures-price').value) || currentPrice;
-        if (price > 0) {
-            document.getElementById('futures-amount').value = (balances.usdt * pct * currentLeverage / price).toFixed(4);
-        }
-    }
-
-    async function placeOrder(side) {
-        const price = parseFloat(document.getElementById('futures-price').value) || currentPrice;
-        const amount = parseFloat(document.getElementById('futures-amount').value);
-        if (!amount || amount <= 0) return alert('Amount Error');
+        const query = dom.pairSearch.value.toUpperCase();
+        const filteredPairs = pairs.filter(p => p.includes(query));
         
-        <?php if (!$user_id): ?>
-        alert('<?php echo __('login_to_trade'); ?>');
-        window.location.href = 'login.php';
-        return;
-        <?php endif; ?>
+        dom.pairsList.innerHTML = filteredPairs.map(p => {
+            const d = marketData[p] || {};
+            const icon = `https://assets.coincap.io/assets/icons/${p.replace('USDT','').toLowerCase()}@2x.png`;
+            const price = d.c ? parseFloat(d.c).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '--';
+            const change = d.P ? `${parseFloat(d.P) >= 0 ? '+' : ''}${parseFloat(d.P).toFixed(2)}%` : '--';
+            const color = (d.P && parseFloat(d.P) >= 0) ? '#0ecb81' : '#f6465d';
 
-        try {
-            const resp = await fetch('api/place_order.php', {
-                method: 'POST',
-                body: JSON.stringify({
-                    symbol: currentPair, type: 'futures', side: side, order_type: 'market',
-                    price: price, amount: amount, total: price * amount, leverage: currentLeverage,
-                    tp_price: document.getElementById('futures-tp').value, sl_price: document.getElementById('futures-sl').value
-                })
-            });
-            const res = await resp.json();
-            if (res.success) {
-                alert('<?php echo __('order_placed'); ?>');
-                updateBalance();
-                fetchOrders();
-            } else {
-                alert(res.error || 'An unknown error occurred.');
-            }
-        } catch (e) {
-            alert('<?php echo __('network_error'); ?>');
-        }
+            return `
+                <div class="pair-item ${p === currentPair ? 'active' : ''}" data-pair="${p}">
+                    <img src="${icon}" class="coin-icon" onerror="this.style.display='none'">
+                    <div style="flex:1"><div style="font-weight:600; font-size:13px">${p.replace('USDT', '')}<span style="color:#848e9c">/USDT</span></div></div>
+                    <div style="text-align:right">
+                        <div style="font-size:13px; font-weight:600">${price}</div>
+                        <div style="font-size:11px; color:${color}">${change}</div>
+                    </div>
+                 </div>`;
+        }).join('');
     }
 
     function renderOrderBook(bids, asks) {
-        const asksList = document.getElementById('asks-list');
-        const bidsList = document.getElementById('bids-list');
-        if (!asksList || !bidsList) return;
-        let asksHtml = '';
-        let bidsHtml = '';
+        const renderList = (element, data, isAsks) => {
+            if (!element) return;
+            const maxRows = Math.floor(element.offsetHeight / 20);
+            if (maxRows <= 0) return;
 
-        asks.slice(0, 20).reverse().forEach(([price, quantity]) => {
-            const p = parseFloat(price);
-            const q = parseFloat(quantity);
-            asksHtml += `<div class="ob-row"><div class="ob-bar" style="width:${q * 2}%; background:#f6465d"></div><span style="color:#f6465d">${p.toFixed(2)}</span><span>${q.toFixed(4)}</span><span>${(p * q).toFixed(2)}</span></div>`;
-        });
+            const relevantData = isAsks ? data.slice(0, maxRows).reverse() : data.slice(0, maxRows);
+            const maxVol = Math.max(...relevantData.map(([, q]) => parseFloat(q))) || 1;
 
-        bids.slice(0, 20).forEach(([price, quantity]) => {
-            const p = parseFloat(price);
-            const q = parseFloat(quantity);
-            bidsHtml += `<div class="ob-row"><div class="ob-bar" style="width:${q * 2}%; background:#0ecb81"></div><span style="color:#0ecb81">${p.toFixed(2)}</span><span>${q.toFixed(4)}</span><span>${(p * q).toFixed(2)}</span></div>`;
-        });
+            element.innerHTML = relevantData.map(([price, quantity]) => {
+                const p = parseFloat(price), q = parseFloat(quantity);
+                const barWidth = (q / maxVol) * 100;
+                const color = isAsks ? '#f6465d' : '#0ecb81';
+                const bgColor = isAsks ? 'rgba(246, 70, 93, 0.2)' : 'rgba(14, 203, 129, 0.2)';
+                return `
+                    <div class="ob-row" onclick="setPrice(${p})">
+                        <div class="ob-bar" style="width:${barWidth}%; background-color:${bgColor};"></div>
+                        <span style="color:${color}; z-index:1;">${p.toFixed(2)}</span>
+                        <span style="z-index:1;">${q.toFixed(4)}</span>
+                        <span style="z-index:1;">${(p * q).toFixed(2)}</span>
+                    </div>`;
+            }).join('');
+        };
+        renderList(dom.asksList, asks, true);
+        renderList(dom.bidsList, bids, false);
+    }
+
+    function renderTrades(trade) {
+        if (!dom.tradesContent) return;
+        const color = trade.m ? '#f6465d' : '#0ecb81';
+        const time = new Date(trade.T).toLocaleTimeString('en-GB');
+        const row = `
+            <div class="trade-row">
+                <span style="color:${color}">${parseFloat(trade.p).toFixed(2)}</span>
+                <span>${parseFloat(trade.q).toFixed(4)}</span>
+                <span>${time}</span>
+             </div>`;
+        dom.tradesContent.insertAdjacentHTML('afterbegin', row);
+        if (dom.tradesContent.children.length > 50) {
+            dom.tradesContent.removeChild(dom.tradesContent.lastChild);
+        }
+    }
+
+    function switchPair(pair) {
+        currentPair = pair;
+        const coinName = pair.replace('USDT', '');
         
-        asksList.innerHTML = asksHtml;
-        bidsList.innerHTML = bidsHtml;
+        dom.currPair.innerText = `${coinName}/USDT Perpetual`;
+        dom.currIcon.src = `https://assets.coincap.io/assets/icons/${coinName.toLowerCase()}@2x.png`;
+        dom.coinNameSpans.forEach(el => el.innerText = coinName);
+        
+        updatePriceUI(marketData[pair]);
+        initChartWidget(pair);
+        renderPairs();
+        
+        dom.asksList.innerHTML = '';
+        dom.bidsList.innerHTML = '';
+        dom.tradesContent.innerHTML = '';
+        connectWebSocket();
+    }
+    
+    window.setPrice = (price) => {
+        if(dom.futuresPriceInput) dom.futuresPriceInput.value = price;
     }
 
-    async function updateBalance() {
-        <?php if (!$user_id) return; ?>
-        try {
-            const resp = await fetch('api/get_assets.php');
-            const res = await resp.json();
-            if (res.success) {
-                const usdt = res.data.find(a => a.symbol === 'USDT');
-                balances.usdt = usdt ? parseFloat(usdt.amount) : 0;
-                document.getElementById('futures-avail').innerText = balances.usdt.toFixed(2) + ' USDT';
-            } else {
-                console.error('Failed to fetch balance:', res.error);
-            }
-        } catch (e) {
-            console.error('Network error fetching balance:', e);
+    // --- Event Listeners ---
+    dom.pairsList.addEventListener('click', (e) => {
+        const pairItem = e.target.closest('.pair-item');
+        if (pairItem && pairItem.dataset.pair) {
+            switchPair(pairItem.dataset.pair);
         }
-    }
+    });
+    
+    dom.pairSearch.addEventListener('input', renderPairs);
 
-    async function fetchOrders() {
-        <?php if (!$user_id) return; ?>
-        try {
-            const resp = await fetch(`api/get_orders.php?type=futures&status=${currentStatus}`);
-            const res = await resp.json();
-            const listEl = document.getElementById('records-list');
-            if (!listEl) return;
-            let html = '';
-            if (res.success && res.data.length > 0) {
-                html = res.data.map(o => `
-                <div style="padding:15px; border-bottom:1px solid #2b3139; font-size:12px">
-                    <div style="display:flex; justify-content:space-between; align-items:center">
-                        <span style="color:${o.side === 'buy' ? '#0ecb81' : '#f6465d'}; font-weight:bold; font-size:14px">${o.side === 'buy' ? 'Long' : 'Short'} ${o.symbol} ${o.leverage}x</span>
-                        <span style="color:#848e9c">${o.created_at}</span>
-                    </div>
-                    <div style="display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px; color:#848e9c; margin-top:10px">
-                        <div><?php echo __('size'); ?><br><span style="color:white; font-weight:bold">${o.amount}</span></div>
-                        <div><?php echo __('price'); ?><br><span style="color:white; font-weight:bold">${parseFloat(o.price).toFixed(2)}</span></div>
-                        <div><?php echo __('margin'); ?><br><span style="color:white; font-weight:bold">${(o.total / o.leverage).toFixed(2)}</span></div>
-                        <div>TP/SL<br><span style="color:white; font-weight:bold">${o.tp_price || '--'}/${o.sl_price || '--'}</span></div>
-                    </div>
-                </div>`).join('');
-            } else {
-                html = '<div style="padding:40px; text-align:center; color:#848e9c"><?php echo __('no_records'); ?></div>';
-            }
-            listEl.innerHTML = html;
-        } catch (e) {
-            console.error('Error fetching orders:', e);
-        }
-    }
-
-    function switchRecords(status) {
-        currentStatus = status;
-        document.querySelector('.record-tabs .record-tab.active').classList.remove('active');
-        document.querySelector(`.record-tabs .record-tab[data-status="${status}"]`).classList.add('active');
-        fetchOrders();
-    }
-
-    // ===== Main Execution =====
-
-    // 1. Add Event Listeners
-    document.getElementById('pair-search').addEventListener('input', filterPairs);
-    document.getElementById('margin-mode').addEventListener('click', toggleMarginMode);
-    document.getElementById('leverage-val').addEventListener('click', toggleLeverageModal);
-    document.getElementById('close-leverage-modal').addEventListener('click', toggleLeverageModal);
-    document.getElementById('leverage-range').addEventListener('input', (e) => updateSliderVal(e.target.value));
-    document.getElementById('confirm-leverage-btn').addEventListener('click', confirmLeverage);
-    document.getElementById('futures-slider').addEventListener('input', (e) => setSlider(e.target.value));
-    document.getElementById('btn-buy-long').addEventListener('click', () => placeOrder('buy'));
-    document.getElementById('btn-sell-short').addEventListener('click', () => placeOrder('sell'));
-    document.querySelectorAll('.record-tabs .record-tab').forEach(tab => {
-        tab.addEventListener('click', () => switchRecords(tab.dataset.status));
+    document.querySelectorAll('.right-col-tab').forEach(tab => {
+        tab.addEventListener('click', () => {
+            document.querySelector('.right-col-tab.active').classList.remove('active');
+            tab.classList.add('active');
+            const isOb = tab.dataset.tab === 'ob';
+            document.getElementById('ob-panel').style.display = isOb ? 'flex' : 'none';
+            document.getElementById('trades-panel').style.display = isOb ? 'none' : 'flex';
+        });
     });
 
-    // 2. Initial Render
-    switchPair(currentPair);
-    renderOrderBook([], []);
-
-    // 3. Fetch Initial Data
-    updateBalance();
-    fetchOrders();
-
-    // 4. Initialize Chart & WebSocket
-    initChart(currentPair);
-    connectWebSocket();
-
-    // 5. Setup Intervals
-    setInterval(updateBalance, 5000);
-    setInterval(fetchOrders, 10000);
-    setInterval(() => {
-        if (!ws || ws.readyState === WebSocket.CLOSED) {
-            connectWebSocket();
-        }
-    }, 10000);
+    // --- Initial Load ---
+    updateAvailableBalances();
+    switchPair('BTCUSDT');
 });
 </script>
-<?php include 'footer.php'; ?>
+<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
+
+
+<?php include 'footer.php'; ?>
\ No newline at end of file
diff --git a/header.php b/header.php
index 7de6af7..b1b7518 100644
--- a/header.php
+++ b/header.php
@@ -1,4 +1,8 @@
 <?php 
+date_default_timezone_set('Asia/Dubai');
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}
 require_once 'includes/i18n.php'; 
 require_once 'db/config.php';
 $db = db();
diff --git a/includes/i18n.php b/includes/i18n.php
index f7dcdbe..7067075 100644
--- a/includes/i18n.php
+++ b/includes/i18n.php
@@ -13,7 +13,7 @@ $translations = [
         'nav_trade' => 'Trade',
         'nav_spot' => 'Spot',
         'nav_futures' => 'Futures',
-        'nav_options' => 'Second Contract',
+        'nav_options' => 'Options',
         'nav_mining' => 'Mining',
         'nav_convert' => 'Convert',
         'nav_assets' => 'Assets',
@@ -141,6 +141,10 @@ $translations = [
         'system_matching_engine' => 'System matching engine',
         'options_instruction' => 'Trading Instruction',
         'options_wait_settle' => 'The system matching engine is executing. Please wait for the countdown to end for settlement.',
+        'current_price' => 'Current Price',
+        'order_date' => 'Order Date',
+        'options_order_executing' => 'Order is executing, settlement upon countdown completion.',
+        'options_order_settled' => 'Order settled.',
         
         'kyc_status' => 'KYC Verification',
         'kyc_none' => 'Unverified',
@@ -209,7 +213,7 @@ $translations = [
         'error_fetching_orders' => 'Error fetching orders',
         'error_fetching_balance' => 'Error fetching balance',
         'error_no_live_price' => 'No live price data available yet. Please wait.',
-        'websocket_connecting' => 'Connecting to market data...',
+        'websocket_connecting' => 'Connecting to market data...', 
         'websocket_connected' => 'Connected to market data.',
         'websocket_error' => 'Market data connection error!',
         'websocket_disconnected' => 'Market data disconnected. Reconnecting...', 
@@ -351,7 +355,11 @@ $translations = [
         'system_matching_engine' => '系统撮合引擎',
         'options_instruction' => '交易说明',
         'options_wait_settle' => '系统撮合引擎正在执行中，请等待倒计时结束进行结算。',
-        
+        'current_price' => '当前价格',
+        'order_date' => '下单日期',
+        'options_order_executing' => '订单执行中，倒计时结束后结算。',
+        'options_order_settled' => '订单已结算。',
+
         'kyc_status' => '实名认证',
         'kyc_none' => '未认证',
         'kyc_pending' => '审核中',
@@ -419,7 +427,7 @@ $translations = [
         'error_fetching_orders' => '获取订单失败',
         'error_fetching_balance' => '获取余额失败',
         'error_no_live_price' => '暂无实时价格数据，请稍候。',
-        'websocket_connecting' => '正在连接市场数据...',
+        'websocket_connecting' => '正在连接市场数据...', 
         'websocket_connected' => '市场数据已连接。',
         'websocket_error' => '市场数据连接错误！',
         'websocket_disconnected' => '市场数据已断开。正在重新连接...', 
@@ -427,7 +435,14 @@ $translations = [
 ];
 
 if (!isset($_SESSION['lang'])) {
-    $_SESSION['lang'] = 'en';
+    // Detect browser language
+    $browser_lang = !empty($_SERVER['HTTP_ACCEPT_LANGUAGE']) ? strtok(strip_tags($_SERVER['HTTP_ACCEPT_LANGUAGE']), ',') : '';
+    $browser_lang = substr($browser_lang, 0, 2);
+    if ($browser_lang === 'zh') {
+        $_SESSION['lang'] = 'zh';
+    } else {
+        $_SESSION['lang'] = 'en';
+    }
 }
 
 if (isset($_GET['lang']) && array_key_exists($_GET['lang'], $translations)) {
diff --git a/options.php b/options.php
index 923532d..3c0f019 100644
--- a/options.php
+++ b/options.php
@@ -1,702 +1,464 @@
 <?php
-session_start(); // Ensure session is started
+if (session_status() === PHP_SESSION_NONE) { session_start(); }
 include 'header.php';
 require_once 'db/config.php';
-require_once 'includes/i18n.php'; // Include i18n for localization
-
+require_once 'includes/i18n.php';
 $user_id = $_SESSION['user_id'] ?? null;
-if (!$user_id) {
-    // Redirect to login page if not logged in
-    header('Location: login.php');
-    exit;
+if (!$user_id) { header('Location: login.php'); exit; }
+
+$user_assets = [];
+if ($user_id) {
+    $pdo = db();
+    $stmt = $pdo->prepare("SELECT currency, balance FROM assets WHERE user_id = ?");
+    $stmt->execute([$user_id]);
+    $assets_data = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
+    if ($assets_data) {
+        $user_assets = $assets_data;
+    }
 }
 ?>
 
 <style>
-    /* Global layout enforcement */
+    /* UNIFIED 3-column layout CSS */
     html, body {
-        background: #0b0e11;
-        min-width: 1280px;
-        max-width: 1920px;
-        margin: 0 auto;
-        overflow-x: auto;
+        /* UNLOCKED for scrolling */
     }
-
-    @media (max-width: 991px) {
-        html, body {
-            min-width: 100%;
-            max-width: 100%;
-            overflow-x: hidden;
-        }
-        .navbar, footer { display: none !important; }
-        body { padding-bottom: 0 !important; }
-    }
-
-    .trading-container {
+    .trading-page-wrapper {
         display: flex;
+        flex-direction: column;
+        min-height: 100vh; /* Ensure it takes at least full height */
         background: #0b0e11;
-        min-height: calc(100vh - 64px);
-        width: 100%;
     }
-    
-    @media (max-width: 991px) {
-        .trading-container { min-height: calc(100vh - 50px); flex-direction: column; }
-    }
-    
+    .trading-page-wrapper .navbar { flex-shrink: 0; }
+    .trading-container { flex-grow: 1; display: flex; min-height: 800px; }
+
     .left-col { width: 260px; flex-shrink: 0; background: #161a1e; display: flex; flex-direction: column; border-right: 1px solid #2b3139; }
-    .center-col { flex: 1; min-width: 600px; background: #0b0e11; display: flex; flex-direction: column; border-right: 1px solid #2b3139; }
-    .right-col { width: 320px; flex-shrink: 0; background: #161a1e; display: flex; flex-direction: column; }
+    .center-col { flex: 1; min-width: 600px; display: flex; flex-direction: column; }
+    .right-col { width: 260px; flex-shrink: 0; background: #161a1e; display: flex; flex-direction: column; border-left: 1px solid #2b3139; }
 
-    @media (max-width: 991px) {
-        .left-col, .right-col { display: none !important; }
-        .center-col { min-width: 100%; }
-    }
+    /* Center Column Content */
+    .chart-header { flex-shrink: 0; height: 50px; padding: 8px 20px; display: flex; align-items: center; background: #161a1e; border-bottom: 1px solid #2b3139; gap: 20px; }
+    .chart-box { height: 380px; flex-shrink: 0; border-bottom: 1px solid #2b3139; }
+    .bottom-content-wrapper { flex-grow: 1; background: #161a1e; overflow-y: auto; display: flex; flex-direction: column; }
 
-    /* Category Tabs above Search */
+    /* Left & Right Column Content */
+    .col-header { flex-shrink: 0; padding: 15px; font-weight: 600; border-bottom: 1px solid #2b3139; font-size: 14px; }
+    #pairs-list, #order-book-container { flex: 1; overflow-y: auto; }
+    .coin-icon { width: 22px; height: 22px; margin-right: 12px; border-radius: 50%; }
+    .stats-item { display: flex; flex-direction: column; justify-content: center; }
+    .stats-label { font-size: 10px; color: #848e9c; }
+    .stats-value { font-size: 12px; font-weight: 600; color: white; }
     .category-tabs { display: flex; padding: 15px 15px 5px; gap: 8px; }
-    .category-tab { flex: 1; text-align: center; padding: 6px 0; background: #2b3139; border-radius: 4px; font-size: 11px; color: #848e9c; cursor: pointer; transition: all 0.2s; white-space: nowrap; border: 1px solid transparent; }
+    .category-tab { flex: 1; text-align: center; padding: 6px 0; background: #2b3139; border-radius: 4px; font-size: 12px; color: #848e9c; cursor: pointer; border: 1px solid transparent; }
     .category-tab.active { background: rgba(0, 82, 255, 0.1); border-color: var(--primary-color); color: var(--primary-color); font-weight: bold; }
-
-    /* Search Box */
     .search-box { padding: 5px 15px 10px; position: relative; }
     .search-box i { position: absolute; left: 25px; top: 50%; transform: translateY(-50%); color: #848e9c; font-size: 12px; }
     .search-box input { width: 100%; background: #2b3139; border: 1px solid transparent; border-radius: 4px; padding: 8px 10px 8px 30px; color: white; font-size: 13px; outline: none; }
-    .search-box input:focus { border-color: var(--primary-color); }
-
-    #pairs-list { flex: 1; overflow-y: auto; }
-    .pair-item { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; transition: all 0.2s; border-bottom: 1px solid rgba(255,255,255,0.02); }
-    .pair-item:hover { background: #1e2329; }
-    .pair-item.active { background: #1e2329; border-left: 3px solid var(--primary-color); }
-    .coin-icon { width: 22px; height: 22px; margin-right: 12px; border-radius: 50%; flex-shrink: 0; background: #2b3139; }
-
-    .chart-header { padding: 8px 20px; display: flex; align-items: center; background: #161a1e; border-bottom: 1px solid #2b3139; flex-wrap: nowrap; gap: 20px; height: 50px; }
-    .chart-box { flex: 1; min-height: 350px; height: 350px; background: #0b0e11; border-bottom: 1px solid #2b3139; }
+    .pair-item { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.02); }
+    .pair-item.active { background: #1e2329; }
     
-    .record-tabs { display: flex; background: #161a1e; border-bottom: 1px solid #2b3139; padding: 0 15px; }
-    .record-tab { padding: 10px 0; margin-right: 25px; font-size: 13px; color: #848e9c; cursor: pointer; position: relative; }
-    .record-tab.active { color: white; font-weight: 600; }
-    .record-tab.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--primary-color); }
-    .records-content { min-height: 200px; height: 220px; overflow-y: auto; background: #161a1e; }
-    
-    @media (max-width: 991px) { 
-        .records-content { min-height: 200px; padding-bottom: 20px; height: auto; } 
-        .chart-box { min-height: 350px; height: 350px; }
-    }
+    /* Order Book */
+    .order-book-header { display: flex; justify-content: space-between; align-items: center; padding: 0 15px; height: 35px; border-bottom: 1px solid #2b3139; }
+    .order-book-header span { color: #848e9c; font-size: 11px; }
+    .book-row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 15px; position: relative; }
+    .book-row > div { width: 33.33%; text-align: right; z-index: 2; }
+    .book-row > div:first-child { text-align: left; }
+    .book-row .price.up { color: #0ecb81; }
+    .book-row .price.down { color: #f6465d; }
+    .depth-bar { position: absolute; top: 0; bottom: 0; z-index: 1; opacity: 0.15; }
+    .depth-bar.ask { right: 0; background: #f6465d; }
+    .depth-bar.bid { right: 0; background: #0ecb81; }
 
-    .order-panel { padding: 12px 20px; background: #161a1e; border-bottom: 1px solid #2b3139; }
-    .panel-label { color: #848e9c; font-size: 11px; margin-bottom: 6px; font-weight: 500; }
-    .duration-grid { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
-    .duration-grid::-webkit-scrollbar { display: none; }
-    .time-btn { flex: 1; min-width: 70px; background: #2b3139; border: 1px solid transparent; color: #eaecef; padding: 6px 4px; border-radius: 4px; font-size: 11px; cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; transition: all 0.2s; }
-    .time-btn.active { background: rgba(0, 82, 255, 0.1); border-color: var(--primary-color); color: var(--primary-color); font-weight: bold; }
-    .time-btn .rate { font-size: 9px; font-weight: bold; margin-top: 2px; }
+    /* Options-Specific Panel */
+    .order-panel { padding: 20px 25px; background: #1e2329; border-bottom: 1px solid #2b3139; }
+    .panel-label { color: #848e9c; font-size: 12px; margin-bottom: 10px; font-weight: 500; }
+    .duration-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
+    .time-btn { background: #2b3139; border: 1px solid #2b3139; color: #eaecef; padding: 8px 5px; border-radius: 8px; font-size: 13px; cursor: pointer; text-align: center; font-weight: 600; transition: all 0.2s ease-in-out; }
+    .time-btn:hover { background: #3c424a; border-color: #4a5057; }
+    .time-btn.active { background: linear-gradient(45deg, rgba(0, 82, 255, 0.2), rgba(0, 122, 255, 0.2)); border-color: var(--primary-color); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 102, 255, 0.2); }
+    .time-btn .rate { font-size: 10px; font-weight: normal; color: #0ecb81; margin-top: 3px; }
+    .input-group { background: #2b3139; border-radius: 8px; padding: 8px 15px; display: flex; align-items: center; border: 1px solid #2b3139; transition: all 0.2s ease-in-out; }
+    .input-group:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15); }
+    .input-group input { background: transparent; border: none; color: white; flex: 1; outline: none; font-size: 16px; font-weight: 600; width: 100%; }
+    .input-group .unit { color: #848e9c; margin-left: 10px; font-weight: 500; font-size: 14px; }
+    .balance-info { display: flex; justify-content: space-between; font-size: 12px; color: #848e9c; margin-top: 8px; padding: 0 5px; }
+    .balance-info .label {color: #848e9c;}
+    .balance-info .value {color: white; font-weight: 600;}
+    .trade-btn { width: 100%; padding: 15px; border-radius: 8px; font-weight: bold; font-size: 16px; border: none; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; align-items: center; justify-content: center; gap: 10px; }
+    .trade-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
+    .btn-up { background: linear-gradient(45deg, #0b9e6f, #14d291); box-shadow: 0 4px 20px rgba(14, 203, 129, 0.25); color: white; }
+    .btn-down { background: linear-gradient(45deg, #e04156, #f65368); box-shadow: 0 4px 20px rgba(246, 70, 93, 0.25); color: white; }
 
-    .input-group { background: #2b3139; border-radius: 4px; padding: 6px 12px; display: flex; align-items: center; border: 1px solid transparent; transition: border-color 0.2s; }
-    .input-group:focus-within { border-color: var(--primary-color); }
-    .input-group input { background: transparent; border: none; color: white; flex: 1; text-align: left; outline: none; font-size: 13px; width: 100%; }
-    .input-group .unit { color: #848e9c; margin-left: 8px; font-size: 11px; }
-
-    .balance-info { display: flex; justify-content: space-between; font-size: 10px; color: #848e9c; margin-top: 4px; }
-    .trade-btn { flex: 1; padding: 10px; border-radius: 4px; font-weight: bold; font-size: 14px; border: none; cursor: pointer; transition: transform 0.1s; }
-    .trade-btn:active { transform: scale(0.98); }
-    .btn-up { background: #0ecb81; color: white; }
-    .btn-down { background: #f6465d; color: white; }
-
-    /* Order Book Styles */
-    .order-book-header { padding: 10px 15px; font-size: 12px; font-weight: 600; border-bottom: 1px solid #2b3139; color: white; background: #161a1e; }
-    .ob-row { display: flex; justify-content: space-between; padding: 3px 15px; font-size: 12px; position: relative; height: 20px; align-items: center; }
-    .ob-price { flex: 1; font-weight: 500; }
-    .ob-amount { flex: 1; text-align: right; color: #eaecef; }
-    .ob-total { flex: 1; text-align: right; color: #848e9c; }
-    .ob-bg-sell { position: absolute; right: 0; top: 0; bottom: 0; background: rgba(246, 70, 93, 0.1); z-index: 0; }
-    .ob-bg-buy { position: absolute; right: 0; top: 0; bottom: 0; background: rgba(14, 203, 129, 0.1); z-index: 0; }
-
-    #ob-asks { height: 400px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
-    #ob-bids { height: 400px; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; }
-
-    /* Mobile Nav */
-    .m-trade-nav { display: none; background: #161a1e; border-bottom: 1px solid #2b3139; position: sticky; top: 0; z-index: 100; }
-    .m-trade-nav a { flex: 1; text-align: center; padding: 14px; font-size: 14px; color: #848e9c; text-decoration: none; border-bottom: 2px solid transparent; }
-    .m-trade-nav a.active { color: var(--primary-color); border-bottom-color: var(--primary-color); font-weight: bold; }
-
-    .m-currency-bar { display: none; overflow-x: auto; background: #161a1e; padding: 10px; gap: 10px; border-bottom: 1px solid #2b3139; scrollbar-width: none; }
-    .m-currency-bar::-webkit-scrollbar { display: none; }
-    .m-coin-item { flex-shrink: 0; background: #2b3139; padding: 6px 12px; border-radius: 4px; display: flex; align-items: center; gap: 6px; border: 1px solid transparent; }
-    .m-coin-item.active { border-color: var(--primary-color); background: rgba(0, 82, 255, 0.1); }
-    .m-coin-item img { width: 16px; height: 16px; border-radius: 50%; }
-
-    @media (max-width: 991px) {
-        .m-trade-nav { display: flex; }
-        .m-currency-bar { display: flex; }
-        .chart-header { gap: 10px; padding: 10px 15px; overflow-x: auto; scrollbar-width: none; }
-        .chart-header::-webkit-scrollbar { display: none; }
-        .stats-item { flex-shrink: 0; }
-    }
-    
-    .progress-bar-container { width: 100%; height: 3px; background: #2b3139; border-radius: 2px; margin-top: 8px; overflow: hidden; }
-    .progress-bar-fill { height: 100%; background: var(--primary-color); width: 0%; transition: width 1s linear; }
-
-    .stats-item { display: flex; flex-direction: column; justify-content: center; }
-    .stats-label { font-size: 10px; color: #848e9c; margin-bottom: 1px; white-space: nowrap; }
-    .stats-value { font-size: 12px; font-weight: 600; color: white; white-space: nowrap; }
-
-    /* Countdown Modal (Beautiful Square with Circular Timer) */
-    .option-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 3000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
-    .option-modal-content { background: #1e2329; width: 420px; height: 420px; border-radius: 24px; padding: 30px; border: 1px solid #2b3139; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
-    
-    .circular-timer-box { position: relative; width: 120px; height: 120px; margin-bottom: 10px; }
-    .circular-timer-svg { transform: rotate(-90deg); width: 120px; height: 120px; }
-    .circular-timer-bg { fill: none; stroke: #2b3139; stroke-width: 8; }
-    .circular-timer-progress { fill: none; stroke: var(--primary-color); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 351.85; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
-    .timer-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; font-weight: 800; color: white; font-family: 'Courier New', monospace; }
-
-    .modal-symbol { font-size: 20px; font-weight: 800; color: white; margin-bottom: 2px; }
-    .modal-dir { font-size: 13px; font-weight: 700; padding: 4px 16px; border-radius: 20px; margin-bottom: 15px; }
-    
-    .modal-info-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; background: rgba(255,255,255,0.03); padding: 15px; border-radius: 16px; margin-bottom: 15px; }
-    .info-item { display: flex; flex-direction: column; gap: 4px; }
-    .info-label { color: #848e9c; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
-    .info-value { color: white; font-size: 14px; font-weight: 700; }
-    
-    .modal-live-box { text-align: center; width: 100%; }
-    .live-label { color: #848e9c; font-size: 12px; margin-bottom: 5px; }
-    .live-price { font-size: 24px; font-weight: 800; transition: color 0.3s; }
-    .profit-estimate { font-size: 14px; font-weight: 700; margin-top: 4px; }
-
-    .modal-footer-note { font-size: 11px; color: #5e6673; text-align: center; line-height: 1.4; }
-
-    #websocket-status { 
-        padding: 8px 15px; 
-        font-size: 12px; 
-        color: #fff; 
-        background-color: #333; 
-        text-align: center; 
-        display: none; /* Hidden by default */
-    }
-    #websocket-status.connected { background-color: #0ecb81; }
-    #websocket-status.disconnected { background-color: #f6465d; }
-    #websocket-status.connecting { background-color: #ffc107; }
+    /* Records (Order History) */
+    .records-container { flex-grow: 1; display: flex; flex-direction: column; min-height: 400px; }
+    .record-tabs { display: flex; padding: 0 20px; flex-shrink: 0; border-bottom: 1px solid #2b3139; }
+    .record-tab { padding: 12px 0; margin-right: 25px; font-size: 14px; font-weight: 600; color: #848e9c; cursor: pointer; border-bottom: 2px solid transparent; }
+    .record-tab.active { color: white; border-bottom-color: var(--primary-color); }
+    .records-table-container { flex-grow: 1; overflow-y: auto; padding: 0 20px; }
+    #records-list { width: 100%; font-size: 12px; }
+    #records-list th, #records-list td { padding: 10px 8px; border-bottom: 1px solid #2b3139; text-align: left; }
+    #records-list th { color: #848e9c; font-weight: 500; }
+    .status-win { color: #0ecb81; font-weight: 600; }
+    .status-loss { color: #f6465d; font-weight: 600; }
+    .status-pending { color: #ffc107; font-weight: 600; }
 
+    /* Countdown Modal */
+    .option-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 20, 30, 0.4); z-index: 3000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(10px); }
+    .option-modal-content { background: #1e2329; width: 420px; border-radius: 20px; border: 1px solid #2b3139; text-align: center; animation: modal-fade-in 0.3s; }
+    @keyframes modal-fade-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
+    .modal-header { padding: 20px; border-bottom: 1px solid #2b3139; font-size: 18px; font-weight: 600; color: white; }
+    .modal-body { padding: 25px 30px; }
+    .circular-timer { position: relative; width: 140px; height: 140px; margin: 0 auto 25px auto; }
+    .circular-timer-svg { transform: rotate(-90deg); }
+    .circular-timer-path { stroke-width: 10; fill: none; }
+    .timer-path-bg { stroke: #2b3139; }
+    .timer-path-progress { stroke: var(--primary-color); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
+    .timer-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+    .timer-countdown { font-size: 36px; font-weight: 700; color: white; }
+    .timer-label { font-size: 12px; color: #848e9c; }
+    .modal-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 25px; text-align: left; }
+    .info-item .label { font-size: 12px; color: #848e9c; margin-bottom: 5px; }
+    .info-item .value { font-size: 15px; font-weight: 600; color: white; }
+    .modal-footer { padding: 20px; background: #161a1e; border-radius: 0 0 20px 20px; font-size: 13px; color: #848e9c; border-top: 1px solid #2b3139; }
 </style>
 
-<div class="m-trade-nav">
-    <a href="spot.php"><?php echo __('nav_spot'); ?></a>
-    <a href="futures.php"><?php echo __('nav_futures'); ?></a>
-    <a href="options.php" class="active"><?php echo __('nav_options'); ?></a>
-</div>
-
-<div class="m-currency-bar" id="m-coin-list"></div>
-
-<div class="trading-container">
-    <div class="left-col d-none d-lg-flex">
-        <div class="category-tabs">
-            <div class="category-tab active" onclick="location.href='options.php'"><?php echo $lang == 'zh' ? '秒合约' : 'Options'; ?></div>
-            <div class="category-tab" onclick="location.href='spot.php'"><?php echo $lang == 'zh' ? '现货交易' : 'Spot'; ?></div>
-            <div class="category-tab" onclick="location.href='futures.php'"><?php echo $lang == 'zh' ? '合约交易' : 'Futures'; ?></div>
+<div class="trading-page-wrapper">
+    <?php // Header is included via main layout ?>
+    <div class="trading-container">
+        <!-- Left Column: Pair Selection -->
+        <div class="left-col d-none d-lg-flex flex-column">
+            <div class="category-tabs">
+                <div class="category-tab active" onclick="location.href='options.php'"><?php echo __('nav_options'); ?></div>
+                <div class="category-tab" onclick="location.href='spot.php'"><?php echo __('nav_spot'); ?></div>
+                <div class="category-tab" onclick="location.href='futures.php'"><?php echo __('nav_futures'); ?></div>
+            </div>
+            <div class="search-box"><i class="fas fa-search"></i><input type="text" id="pair-search" placeholder="<?php echo __('search_currency'); ?>"></div>
+            <div id="pairs-list" class="flex-grow-1"></div>
         </div>
-        <div class="search-box">
-            <i class="fas fa-search"></i>
-            <input type="text" id="pair-search" placeholder="<?php echo __('search_currency'); ?>">
-        </div>
-        <div id="pairs-list"></div>
-    </div>
 
-    <div class="center-col">
-        <div id="websocket-status"></div>
-        <div class="chart-header">
-            <div style="display: flex; align-items: center; gap: 10px; padding-right: 15px; border-right: 1px solid #2b3139;">
-                <img id="curr-icon" src="" class="coin-icon" style="margin:0; width:28px; height:28px;">
-                <div>
-                    <div style="font-weight: 800; font-size: 16px; line-height: 1.2;"><span id="curr-pair">--/--</span></div>
-                    <div style="font-size: 10px; color: var(--primary-color); font-weight: 600;"><?php echo __('nav_options'); ?></div>
-                </div>
+        <!-- Center Column: Chart & Order Panel -->
+        <div class="center-col">
+            <div class="chart-header">
+                 <div style="display: flex; align-items: center; gap: 10px;"><img id="curr-icon" src="" class="coin-icon"><span id="curr-pair" style="font-weight: 800; font-size: 16px;">--/--</span></div>
+                 <div class="stats-item"><div id="curr-price" style="font-size: 18px; font-weight: 800; color: #0ecb81; line-height: 1.2;">--</div><div id="curr-change" style="font-size: 11px; font-weight: 600;">--</div></div>
+                 <div class="stats-item"><span class="stats-label"><?php echo __('24h_high'); ?></span><span class="stats-value" id="h-high">--</span></div>
+                 <div class="stats-item"><span class="stats-label"><?php echo __('24h_low'); ?></span><span class="stats-value" id="h-low">--</span></div>
             </div>
-            
-            <div class="stats-item">
-                <div id="curr-price" style="font-size: 18px; font-weight: 800; color: #0ecb81; line-height: 1.2;">--</div>
-                <div id="curr-change" style="font-size: 11px; font-weight: 600;">--</div>
-            </div>
-
-            <div class="stats-item">
-                <span class="stats-label"><?php echo __('24h_high'); ?></span>
-                <span class="stats-value" id="h-high">--</span>
-            </div>
-            <div class="stats-item">
-                <span class="stats-label"><?php echo __('24h_low'); ?></span>
-                <span class="stats-value" id="h-low">--</span>
-            </div>
-            <div class="stats-item">
-                <span class="stats-label"><?php echo __('24h_vol'); ?></span>
-                <span class="stats-value" id="h-vol">--</span>
-            </div>
-        </div>
-        
-        <div class="chart-box"><div id="tv_chart_container" style="height: 100%;"></div></div>
-
-        <div class="order-panel">
-            <div style="display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: 15px; align-items: end;">
-                <div>
-                    <div class="panel-label"><?php echo __('settlement_time'); ?></div>
-                    <div class="duration-grid">
-                        <div class="time-btn active" data-duration="60" data-rate="8" data-min="100">60S <span class="rate">8%</span></div>
-                        <div class="time-btn" data-duration="90" data-rate="12" data-min="5000">90S <span class="rate">12%</span></div>
-                        <div class="time-btn" data-duration="120" data-rate="15" data-min="30000">120S <span class="rate">15%</span></div>
-                        <div class="time-btn" data-duration="180" data-rate="20" data-min="100000">180S <span class="rate">20%</span></div>
-                        <div class="time-btn" data-duration="300" data-rate="32" data-min="300000">300S <span class="rate">32%</span></div>
+            <div class="chart-box" id="tv_chart_container"></div>
+            <div class="bottom-content-wrapper">
+                <div class="order-panel">
+                     <div style="display: grid; grid-template-columns: 2.5fr 1.5fr 2fr; gap: 20px; align-items: flex-end;">
+                        <div>
+                            <div class="panel-label"><?php echo __('settlement_time'); ?> / <?php echo __('profit'); ?></div>
+                            <div class="duration-grid">
+                                <div class="time-btn active" data-duration="60" data-rate="8" data-min="100">60s<div class="rate">+8%</div></div>
+                                <div class="time-btn" data-duration="90" data-rate="12" data-min="5000">90s<div class="rate">+12%</div></div>
+                                <div class="time-btn" data-duration="120" data-rate="15" data-min="30000">120s<div class="rate">+15%</div></div>
+                                <div class="time-btn" data-duration="180" data-rate="20" data-min="100000">180s<div class="rate">+20%</div></div>
+                                <div class="time-btn" data-duration="300" data-rate="32" data-min="300000">300s<div class="rate">+32%</div></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="panel-label"><?php echo __('buy_amount'); ?></div>
+                            <div class="input-group"><input type="number" id="option-amount" placeholder="<?php echo __('min_amount_is_pl'); ?> 100"><span class="unit">USDT</span></div>
+                            <div class="balance-info">
+                                <div><span class="label"><?php echo __('available'); ?>: </span><b id="usdt-balance" class="value">0.00</b></div>
+                                <div><span class="label"><?php echo __('profit'); ?>: </span><b id="potential-profit" class="value" style="color: #0ecb81;">+0.00</b></div>
+                            </div>
+                        </div>
+                        <div style="display:flex; gap:15px;">
+                            <button class="trade-btn btn-up" id="btn-buy-up"><i class="fas fa-arrow-up fa-lg"></i> <?php echo __('buy_up'); ?></button>
+                            <button class="trade-btn btn-down" id="btn-buy-down"><i class="fas fa-arrow-down fa-lg"></i> <?php echo __('buy_down'); ?></button>
+                        </div>
                     </div>
                 </div>
-                
-                <div>
-                    <div class="panel-label"><?php echo __('buy_amount'); ?></div>
-                    <div class="input-group">
-                        <input type="number" id="option-amount" placeholder="<?php echo __('min_order'); ?> 100">
-                        <span class="unit">USDT</span>
+                <div class="records-container">
+                    <div class="record-tabs">
+                        <div class="record-tab active" data-status="pending"><?php echo __('in_progress'); ?></div>
+                        <div class="record-tab" data-status="completed"><?php echo __('settled'); ?></div>
                     </div>
-                    <div class="balance-info">
-                        <span><?php echo __('available'); ?>: <span id="usdt-balance" style="color:white">0.00</span></span>
-                        <span id="potential-profit" style="color: #0ecb81; font-weight: bold;">+0.00</span>
+                    <div class="records-table-container">
+                        <table id="records-list"></table>
                     </div>
                 </div>
-
-                <div style="display:flex; gap:8px;">
-                    <button class="trade-btn btn-up" id="btn-buy-up"><?php echo __('buy_up'); ?></button>
-                    <button class="trade-btn btn-down" id="btn-buy-down"><?php echo __('buy_down'); ?></button>
-                </div>
             </div>
         </div>
 
-        <div id="records-section">
-            <div class="record-tabs">
-                <div class="record-tab active" data-status="pending"><?php echo __('in_progress'); ?></div>
-                <div class="record-tab" data-status="completed"><?php echo __('settled'); ?></div>
+        <!-- Right Column: Order Book -->
+        <div class="right-col d-none d-lg-flex flex-column">
+            <div class="col-header"><?php echo __('order_book'); ?></div>
+            <div class="order-book-header">
+                <span><?php echo __('price'); ?> (USDT)</span>
+                <span id="ob-amount-label"><?php echo __('amount'); ?> (BTC)</span>
+                <span><?php echo __('total'); ?></span>
             </div>
-            <div class="records-content" id="records-list"></div>
-        </div>
-    </div>
-
-    <div class="right-col d-none d-lg-flex">
-        <div class="order-book-header"><?php echo __('order_book'); ?></div>
-        <div style="padding: 10px 0; display: flex; flex-direction: column; flex: 1;">
-            <div id="ob-asks" style="height: 400px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;"></div>
-            <div style="padding: 10px; border-top: 1px solid #2b3139; border-bottom: 1px solid #2b3139; margin: 5px 0; text-align: center; background: #161a1e;">
-                <span id="ob-mid-price" style="font-size: 16px; font-weight: 800; color: #0ecb81;">--</span>
+            <div id="order-book-container">
+                <div id="asks-list"></div>
+                <div id="current-price-display" style="padding: 8px 15px; text-align: center; font-weight: bold; font-size: 16px; border-top: 1px solid #2b3139; border-bottom: 1px solid #2b3139;"></div>
+                <div id="bids-list"></div>
             </div>
-            <div id="ob-bids" style="height: 400px; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden;"></div>
         </div>
     </div>
 </div>
 
-<div class="option-modal" id="order-modal">
+<!-- Countdown Modal -->
+<div class="option-modal-overlay" id="option-modal">
     <div class="option-modal-content">
-        <div class="modal-symbol" id="modal-symbol">BTC/USDT</div>
-        <div class="modal-dir" id="modal-dir">BUY UP</div>
-        
-        <div class="circular-timer-box">
-            <svg class="circular-timer-svg">
-                <circle class="circular-timer-bg" cx="60" cy="60" r="56"></circle>
-                <circle class="circular-timer-progress" id="circular-progress" cx="60" cy="60" r="56"></circle>
-            </svg>
-            <div class="timer-text" id="modal-timer">00</div>
-        </div>
-
-        <div class="modal-live-box">
-            <div class="live-label"><?php echo __('current_price'); ?></div>
-            <div class="live-price" id="modal-price-live">--</div>
-            <div class="profit-estimate" id="modal-profit-estimate">--</div>
-        </div>
-
-        <div class="modal-info-grid">
-            <div class="info-item">
-                <div class="info-label"><?php echo __('opening_price'); ?></div>
-                <div class="info-value" id="modal-open-price">--</div>
+        <div class="modal-header" id="modal-header"></div>
+        <div class="modal-body">
+            <div class="circular-timer">
+                <svg class="circular-timer-svg" viewBox="0 0 36 36">
+                    <path class="circular-timer-path timer-path-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
+                    <path class="circular-timer-path timer-path-progress" id="timer-progress" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
+                </svg>
+                <div class="timer-text">
+                    <div class="timer-countdown" id="timer-countdown">--</div>
+                    <div class="timer-label"><?php echo __('seconds_remaining'); ?></div>
+                </div>
             </div>
-            <div class="info-item" style="text-align: right;">
-                <div class="info-label"><?php echo __('buy_amount'); ?></div>
-                <div class="info-value" id="modal-amount">--</div>
+            <div class="modal-info-grid">
+                <div class="info-item"><div class="label"><?php echo __('order_price'); ?></div><div class="value" id="modal-open-price"></div></div>
+                <div class="info-item"><div class="label"><?php echo __('buy_amount'); ?></div><div class="value" id="modal-amount"></div></div>
+                <div class="info-item"><div class="label"><?php echo __('current_price'); ?></div><div class="value" id="modal-current-price"></div></div>
+                <div class="info-item"><div class="label"><?php echo __('profit_and_loss'); ?></div><div class="value" id="modal-pnl"></div></div>
+                <div class="info-item"><div class="label"><?php echo __('order_time'); ?></div><div class="value" id="modal-start-time"></div></div>
+                <div class="info-item"><div class="label"><?php echo __('settlement_time'); ?></div><div class="value" id="modal-end-time"></div></div>
             </div>
         </div>
-
-        <div class="modal-footer-note">
-            <?php echo __('options_instruction'); ?>: <?php echo __('options_wait_settle'); ?>
-        </div>
+        <div id="modal-footer" class="modal-footer"></div>
     </div>
 </div>
 
 <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
 <script>
-TradingView.onready(function() {
-    let currentPair = 'BTCUSDT'; 
-    let currentPrice = 0; 
-    let currentDuration = 60; 
-    let currentRate = 0.08; 
-    let currentMin = 100; 
-    let currentStatus = 'pending'; 
-    let searchQuery = '';
-    let ws;
-    let modalInterval = null;
-    let modalActiveRate = 0;
+const userAssets = <?php echo json_encode($user_assets); ?>;
 
-    const pairs = ['BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'DOTUSDT', 'MATICUSDT', 'LTCUSDT', 'SHIBUSDT', 'TRXUSDT', 'AVAXUSDT', 'LINKUSDT', 'BCHUSDT', 'UNIUSDT', 'ETCUSDT', 'NEARUSDT', 'FILUSDT', 'ALGOUSDT', 'FTMUSDT', 'SANDUSDT', 'MANAUSDT', 'AXSUSDT', 'ATOMUSDT', 'HBARUSDT', 'ICPUSDT', 'VETUSDT'];
+document.addEventListener('DOMContentLoaded', function() {
+    // --- Globals ---
+    let currentPair = 'BTCUSDT', currentPrice = 0, ws, chartWidget;
+    let selectedDuration = 60, selectedRate = 8, minAmount = 100;
     const marketData = {};
+    const pairs = [
+        'BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'AVAXUSDT', 
+        'DOTUSDT', 'MATICUSDT', 'LTCUSDT', 'TRXUSDT', 'LINKUSDT', 'UNIUSDT', 'ATOMUSDT', 'ETCUSDT', 
+        'BCHUSDT', 'FILUSDT', 'ICPUSDT', 'NEARUSDT', 'AAVEUSDT', 'ALGOUSDT'
+    ];
+    let countdownInterval, fetchOrdersInterval;
+    let activeOrdersTab = 'pending';
 
-    function getIcon(s) { 
-        const symbol = s.replace('USDT', '').toLowerCase();
-        return `https://assets.coincap.io/assets/icons/${symbol}@2x.png`;
+    const dom = {
+        currIcon: document.getElementById('curr-icon'),
+        currPair: document.getElementById('curr-pair'),
+        currPrice: document.getElementById('curr-price'),
+        currChange: document.getElementById('curr-change'),
+        hHigh: document.getElementById('h-high'),
+        hLow: document.getElementById('h-low'),
+        tvChartContainer: document.getElementById('tv_chart_container'),
+        pairsList: document.getElementById('pairs-list'),
+        pairSearch: document.getElementById('pair-search'),
+        asksList: document.getElementById('asks-list'),
+        bidsList: document.getElementById('bids-list'),
+        priceDisplay: document.getElementById('current-price-display'),
+        obAmountLabel: document.getElementById('ob-amount-label'),
+        optionAmountInput: document.getElementById('option-amount'),
+        potentialProfit: document.getElementById('potential-profit'),
+        usdtBalance: document.getElementById('usdt-balance'),
+        recordsList: document.getElementById('records-list'),
+        modal: document.getElementById('option-modal'),
+        modalHeader: document.getElementById('modal-header'),
+        modalOpenPrice: document.getElementById('modal-open-price'),
+        modalAmount: document.getElementById('modal-amount'),
+        modalCurrentPrice: document.getElementById('modal-current-price'),
+        modalPnl: document.getElementById('modal-pnl'),
+        modalStartTime: document.getElementById('modal-start-time'),
+        modalEndTime: document.getElementById('modal-end-time'),
+        modalFooter: document.getElementById('modal-footer'),
+        timerCountdown: document.getElementById('timer-countdown'),
+        timerProgress: document.getElementById('timer-progress'),
+    };
+
+    function updateAvailableBalance() {
+        const usdtBalance = parseFloat(userAssets.USDT || 0).toFixed(2);
+        dom.usdtBalance.innerText = usdtBalance;
     }
-    
-    function initChart(symbol) {
-        const container = document.getElementById('tv_chart_container');
-        if (container) container.innerHTML = ''; // Clear previous chart
-        new TradingView.widget({ 
-            "width": "100%", 
-            "height": "100%", 
-            "symbol": "BINANCE:" + symbol, 
-            "interval": "1", 
-            "theme": "dark", 
-            "style": "1", 
-            "locale": "<?php echo $lang == 'zh' ? 'zh_CN' : 'en'; ?>", 
-            "container_id": "tv_chart_container", 
-            "backgroundColor": "#0b0e11", 
-            "hide_side_toolbar": true 
-        }); 
+
+    function initChartWidget(symbol) {
+        if (chartWidget) { chartWidget = null; }
+        if (dom.tvChartContainer.firstChild) dom.tvChartContainer.innerHTML = '';
+        chartWidget = new TradingView.widget({
+            "autosize": true, "symbol": `BINANCE:${symbol}`,
+            "interval": "1", "timezone": "Etc/UTC", "theme": "dark", "style": "3",
+            "locale": "<?php echo $lang == 'zh' ? 'zh_CN' : 'en'; ?>",
+            "toolbar_bg": "#161a1e", "enable_publishing": false, "hide_side_toolbar": true, "allow_symbol_change": false,
+            "container_id": "tv_chart_container",
+            "studies": [],
+            "overrides": {
+                "paneProperties.background": "#161a1e",
+                "paneProperties.vertGridProperties.color": "rgba(255, 255, 255, 0.0)",
+                "paneProperties.horzGridProperties.color": "rgba(255, 255, 255, 0.0)",
+                "scalesProperties.textColor" : "#848e9c",
+                "mainSeriesProperties.style": 3,
+                "mainSeriesProperties.lineStyle.color": "#007aff",
+            }
+        });
     }
 
     function connectWebSocket() {
-        if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
-            return;
-        }
-
-        const websocketStatusEl = document.getElementById('websocket-status');
-        websocketStatusEl.style.display = 'block';
-        websocketStatusEl.className = 'connecting';
-        websocketStatusEl.innerText = '<?php echo __('websocket_connecting'); ?>';
-
-        ws = new WebSocket('wss://stream.binance.com:9443/ws/' + pairs.map(p => p.toLowerCase() + '@ticker').join('/'));
+        if (ws) ws.close();
+        const tickerStreams = pairs.map(p => `${p.toLowerCase()}@ticker`).join('/');
+        const depthStream = `${currentPair.toLowerCase()}@depth5@100ms`;
+        ws = new WebSocket(`wss://stream.binance.com:9443/stream?streams=${tickerStreams}/${depthStream}`);
         
-        ws.onopen = () => {
-            console.log('WebSocket Connected');
-            websocketStatusEl.className = 'connected';
-            websocketStatusEl.innerText = '<?php echo __('websocket_connected'); ?>';
-            setTimeout(() => websocketStatusEl.style.display = 'none', 3000);
-        };
+        ws.onmessage = (event) => {
+            const { stream, data } = JSON.parse(event.data);
+            if (!data) return;
 
-        ws.onmessage = (e) => {
-            const d = JSON.parse(e.data);
-            if (!d || !d.s) return;
-            marketData[d.s] = d; 
-            if (d.s === currentPair) { 
-                currentPrice = parseFloat(d.c); 
-                updatePriceUI(d); 
-                updateOrderBook(); 
-                updateModalLive(); 
+            if (stream.endsWith('@ticker')) {
+                marketData[data.s] = data;
+                if (data.s === currentPair) {
+                    currentPrice = parseFloat(data.c);
+                    updatePriceUI(data);
+                    dom.priceDisplay.innerText = currentPrice.toLocaleString('en-US', {minimumFractionDigits: 4, maximumFractionDigits: 4});
+                    dom.priceDisplay.style.color = data.P >= 0 ? '#0ecb81' : '#f6465d';
+                }
+                if (dom.pairsList.offsetParent) renderPairs();
+            } else if (stream.endsWith('@depth5@100ms')) {
+                renderOrderBook(data.bids, data.asks);
             }
-            renderPairs();
-        };
-
-        ws.onerror = (error) => {
-            console.error('WebSocket Error:', error); 
-            websocketStatusEl.className = 'disconnected';
-            websocketStatusEl.innerText = '<?php echo __('websocket_error'); ?>';
-        };
-
-        ws.onclose = () => {
-            console.log('WebSocket Connection Closed');
-            websocketStatusEl.className = 'disconnected';
-            websocketStatusEl.innerText = '<?php echo __('websocket_disconnected'); ?>';
-            setTimeout(connectWebSocket, 5000); 
         };
+        ws.onerror = (error) => console.error("WebSocket Error:", error);
+        ws.onclose = () => setTimeout(connectWebSocket, 5000);
     }
-    
+
+    function renderOrderBook(bids, asks) {
+        const formatRow = (row, type) => {
+            const price = parseFloat(row[0]);
+            const amount = parseFloat(row[1]);
+            return `<div class="book-row">
+                        <div class="price ${type}">${price.toFixed(4)}</div>
+                        <div>${amount.toFixed(4)}</div>
+                        <div>${(price * amount).toFixed(2)}</div>
+                    </div>`;
+        };
+        dom.asksList.innerHTML = asks.slice(0, 8).reverse().map(ask => formatRow(ask, 'down')).join('');
+        dom.bidsList.innerHTML = bids.slice(0, 8).map(bid => formatRow(bid, 'up')).join('');
+    }
+
     function updatePriceUI(d) {
         if (!d) return;
-        let pStr = parseFloat(d.c).toLocaleString(undefined, {minimumFractionDigits: 2});
         const color = d.P >= 0 ? '#0ecb81' : '#f6465d';
-
-        document.getElementById('curr-price').innerText = pStr;
-        document.getElementById('ob-mid-price').innerText = pStr;
-        document.getElementById('curr-price').style.color = color;
-        document.getElementById('ob-mid-price').style.color = color;
-        document.getElementById('curr-change').innerText = (d.P >= 0 ? '+' : '') + parseFloat(d.P).toFixed(2) + '%';
-        document.getElementById('curr-change').style.color = color;
-        document.getElementById('h-high').innerText = parseFloat(d.h).toLocaleString();
-        document.getElementById('h-low').innerText = parseFloat(d.l).toLocaleString();
-        document.getElementById('h-vol').innerText = (parseFloat(d.v)/1000).toFixed(1) + 'K';
-    }
-
-    function updateOrderBook() {
-        const asks = document.getElementById('ob-asks'); 
-        const bids = document.getElementById('ob-bids');
-        if (!asks || !bids) return;
-        let aHtml = ''; 
-        let bHtml = ''; 
-        const rowCount = 20;
-        const effectiveCurrentPrice = currentPrice !== 0 ? currentPrice : 30000;
-
-        for (let i = 0; i < rowCount; i++) {
-            const aPrice = effectiveCurrentPrice * (1 + (rowCount - i) * 0.0001);
-            const aAmt = (Math.random() * 2).toFixed(4);
-            aHtml += `<div class="ob-row"><div class="ob-bg-sell" style="width:${Math.random()*80}%"></div><span class="ob-price" style="color:#f6465d">${aPrice.toFixed(2)}</span><span class="ob-amount">${aAmt}</span><span class="ob-total">${(aPrice*aAmt).toFixed(2)}</span></div>`;
-            const bPrice = effectiveCurrentPrice * (1 - (i + 1) * 0.0001);
-            const bAmt = (Math.random() * 2).toFixed(4);
-            bHtml += `<div class="ob-row"><div class="ob-bg-buy" style="width:${Math.random()*80}%"></div><span class="ob-price" style="color:#0ecb81">${bPrice.toFixed(2)}</span><span class="ob-amount">${bAmt}</span><span class="ob-total">${(bPrice*bAmt).toFixed(2)}</span></div>`;
-        }
-        asks.innerHTML = aHtml;
-        bids.innerHTML = bHtml;
+        const priceStr = parseFloat(d.c).toLocaleString('en-US', {minimumFractionDigits: 4, maximumFractionDigits: 4});
+        document.title = `${priceStr} | ${d.s.replace('USDT', '/USDT')}`;
+        dom.currPrice.innerText = priceStr;
+        dom.currPrice.style.color = color;
+        dom.currChange.innerText = `${d.P >= 0 ? '+' : ''}${parseFloat(d.P).toFixed(2)}%`;
+        dom.currChange.style.color = color;
+        dom.hHigh.innerText = parseFloat(d.h).toLocaleString('en-US', {minimumFractionDigits: 4});
+        dom.hLow.innerText = parseFloat(d.l).toLocaleString('en-US', {minimumFractionDigits: 4});
     }
 
     function renderPairs() {
-        const list = document.getElementById('pairs-list'); 
-        const mBar = document.getElementById('m-coin-list');
-        if (!list || !mBar) return;
-        let lHtml = ''; 
-        let mHtml = '';
-        const filteredPairs = pairs.filter(p => p.toUpperCase().includes(searchQuery));
-
-        filteredPairs.forEach(p => {
-            const d = marketData[p] || {}; 
-            const icon = getIcon(p); 
-            const active = p === currentPair; 
+        const query = dom.pairSearch.value.toUpperCase();
+        const filteredPairs = pairs.filter(p => p.includes(query));
+        dom.pairsList.innerHTML = filteredPairs.map(p => {
+            const d = marketData[p] || {};
+            const icon = `https://assets.coincap.io/assets/icons/${p.replace('USDT','').toLowerCase()}@2x.png`;
+            const price = d.c ? parseFloat(d.c).toLocaleString('en-US', {minimumFractionDigits: 4}) : '--';
+            const change = d.P ? `${parseFloat(d.P) >= 0 ? '+' : ''}${parseFloat(d.P).toFixed(2)}%` : '--';
             const color = (d.P && parseFloat(d.P) >= 0) ? '#0ecb81' : '#f6465d';
-            const price = d.c ? parseFloat(d.c).toLocaleString(undefined, {minimumFractionDigits: 2}) : '--';
-            const change = d.P ? ((parseFloat(d.P) >= 0 ? '+' : '') + parseFloat(d.P).toFixed(2) + '%') : '--';
-            const disp = p.replace('USDT', '') + '/USDT';
-
-            lHtml += `<div class="pair-item ${active ? 'active' : ''}" data-pair="${p}"><img src="${icon}" class="coin-icon" onerror="this.src='https://ui-avatars.com/api/?name=${p.replace('USDT','')}
-&background=2b3139&color=fff'"> <div style="flex:1"><div style="font-weight:700; font-size:13px">${disp}</div></div> <div style="text-align:right"><div style="font-size:13px; font-weight:bold">${price}</div><div style="font-size:11px; color:${color}">${change}</div></div></div>`;
-            mHtml += `<div class="m-coin-item ${active ? 'active' : ''}" data-pair="${p}"><img src="${icon}" class="coin-icon" onerror="this.src='https://ui-avatars.com/api/?name=${p.replace('USDT','')}
-&background=2b3139&color=fff'"><span>${p.replace('USDT', '')}</span></div>`;
-        });
-        list.innerHTML = lHtml; 
-        mBar.innerHTML = mHtml;
-
-        document.querySelectorAll('.pair-item, .m-coin-item').forEach(item => {
-            item.addEventListener('click', () => switchPair(item.dataset.pair));
-        });
+            return `<div class="pair-item ${p === currentPair ? 'active' : ''}" data-pair="${p}">
+                    <img src="${icon}" class="coin-icon" onerror="this.style.display='none'">
+                    <div style="flex:1"><div style="font-weight:600; font-size:13px">${p.replace('USDT','/USDT')}</div></div>
+                    <div style="text-align:right"><div style="font-size:13px; font-weight:600">${price}</div><div style="font-size:11px; color:${color}">${change}</div></div>
+                 </div>`;
+        }).join('');
     }
 
-    function filterPairs(e) { 
-        searchQuery = e.target.value.toUpperCase(); 
-        renderPairs(); 
-    }
-
-    function switchPair(p) { 
-        currentPair = p; 
-        const icon = getIcon(p); 
-        document.getElementById('curr-pair').innerText = p.replace('USDT', '') + '/USDT'; 
-        const iconEl = document.getElementById('curr-icon');
-        iconEl.src = icon;
-        iconEl.onerror = function() { this.src = `https://ui-avatars.com/api/?name=${p.replace('USDT','')}
-&background=2b3139&color=fff`; };
-        initChart(p); 
-        renderPairs(); 
-        const d = marketData[p] || {c:0, P:0, h:0, l:0, v:0};
-        updatePriceUI(d);
+    function switchPair(pair) {
+        currentPair = pair;
+        const coinName = pair.replace('USDT', '');
+        dom.obAmountLabel.textContent = `<?php echo __('amount'); ?> (${coinName})`;
+        dom.currPair.innerText = `${coinName}/USDT`;
+        dom.currIcon.src = `https://assets.coincap.io/assets/icons/${coinName.toLowerCase()}@2x.png`;
+        updatePriceUI(marketData[pair]);
+        initChartWidget(pair);
+        renderPairs();
+        connectWebSocket();
     }
 
     function updatePotentialProfit() {
-        const amt = parseFloat(document.getElementById('option-amount').value) || 0;
-        const profit = (amt * currentRate).toFixed(2);
-        document.getElementById('potential-profit').innerText = '+' + profit;
+        const amount = parseFloat(dom.optionAmountInput.value) || 0;
+        const profit = amount * (selectedRate / 100);
+        dom.potentialProfit.innerText = `+${profit.toFixed(2)}`;
     }
 
-    async function placeOptionOrder(dir) {
-        const amt = parseFloat(document.getElementById('option-amount').value);
-        if (!amt || amt < currentMin) return alert('<?php echo __('min_amount'); ?>: ' + currentMin + ' USDT');
-        if (currentPrice === 0) {
-            alert('<?php echo __('error_no_live_price'); ?>');
+    function handleDurationChange(btn) {
+        document.querySelector('.time-btn.active').classList.remove('active');
+        btn.classList.add('active');
+        selectedDuration = parseInt(btn.dataset.duration);
+        selectedRate = parseInt(btn.dataset.rate);
+        minAmount = parseInt(btn.dataset.min);
+        dom.optionAmountInput.placeholder = `<?php echo __('min_amount_is_pl'); ?> ${minAmount}`;
+        updatePotentialProfit();
+    }
+
+    async function placeOrder(direction) {
+        const amount = parseFloat(dom.optionAmountInput.value);
+        if (isNaN(amount) || amount < minAmount) {
+            alert(`<?php echo __('min_amount_is'); ?> ${minAmount} USDT`);
             return;
         }
 
-        try {
-            const resp = await fetch('api/place_option_order.php', { method: 'POST', body: JSON.stringify({ symbol: currentPair, amount: amt, direction: dir, duration: currentDuration, opening_price: currentPrice }) });
-            const res = await resp.json();
-            if (res.success) { 
-                showCountdownModal(dir, amt, currentPrice, currentDuration, currentRate);
-                document.getElementById('option-amount').value = ''; 
-                updateBalance(); 
-                fetchOrders(); 
-            } else {
-                alert('<?php echo __('error_placing_order'); ?>: ' + (res.error || 'Unknown error'));
-            }
-        } catch (e) {
-            alert('<?php echo __('network_error'); ?>: <?php echo __('could_not_connect_server'); ?>');
+        const response = await fetch('api/place_option_order.php', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                pair: currentPair, amount: amount, direction: direction, 
+                duration: selectedDuration, rate: selectedRate
+            })
+        });
+        const result = await response.json();
+
+        if (result.success && result.order) {
+            showCountdownModal(result.order);
+            fetchOrders(); // Refresh orders list
+        } else {
+            alert(`<?php echo __('order_failed'); ?>: ${result.error || 'Unknown error'}`);
         }
     }
     
-    function showCountdownModal(dir, amount, openPrice, duration, rate) {
-        const modal = document.getElementById('order-modal');
-        const timer = document.getElementById('modal-timer');
-        const dirEl = document.getElementById('modal-dir');
-        const progress = document.getElementById('circular-progress');
-        
-        modalActiveRate = rate;
-        document.getElementById('modal-symbol').innerText = currentPair.replace('USDT','') + '/USDT';
-        document.getElementById('modal-open-price').innerText = openPrice.toLocaleString();
-        document.getElementById('modal-amount').innerText = amount + ' USDT';
-        
-        dirEl.innerText = dir === 'up' ? '<?php echo __('buy_up'); ?>' : '<?php echo __('buy_down'); ?>';
-        dirEl.style.background = dir === 'up' ? 'rgba(14, 203, 129, 0.2)' : 'rgba(246, 70, 93, 0.2)';
-        dirEl.style.color = dir === 'up' ? '#0ecb81' : '#f6465d';
-        
-        let remaining = duration;
-        const total = duration;
-        timer.innerText = remaining;
-        modal.style.display = 'flex';
-        
-        const circumference = 2 * Math.PI * 56;
-        progress.style.strokeDasharray = circumference;
-        
-        if(modalInterval) clearInterval(modalInterval);
-        modalInterval = setInterval(() => {
-            remaining--;
-            timer.innerText = remaining < 10 ? '0' + remaining : remaining;
-            const offset = circumference - (remaining / total) * circumference;
-            progress.style.strokeDashoffset = offset;
-            
-            if(remaining <= 0) {
-                clearInterval(modalInterval);
-                setTimeout(() => { modal.style.display = 'none'; fetchOrders(); }, 2000);
-            }
-        }, 1000);
-    }
-
-    function updateModalLive() {
-        const modal = document.getElementById('order-modal');
-        if(modal.style.display !== 'flex') return;
-
-        const priceEl = document.getElementById('modal-price-live');
-        const profitEl = document.getElementById('modal-profit-estimate');
-        const openPrice = parseFloat(document.getElementById('modal-open-price').innerText.replace(/,/g, ''));
-        const dir = (document.getElementById('modal-dir').innerText.includes('UP') || document.getElementById('modal-dir').innerText.includes('涨')) ? 'up' : 'down';
-        const amount = parseFloat(document.getElementById('modal-amount').innerText);
-        
-        const isProfit = dir === 'up' ? currentPrice >= openPrice : currentPrice <= openPrice;
-        const color = isProfit ? '#0ecb81' : '#f6465d';
-        
-        priceEl.innerText = currentPrice.toLocaleString(undefined, {minimumFractionDigits: 2});
-        priceEl.style.color = color;
-        
-        const profitVal = isProfit ? (amount * modalActiveRate).toFixed(2) : '-' + amount.toFixed(2);
-        profitEl.innerText = '<?php echo __('estimated_profit'); ?>: ' + (isProfit ? '+' : '') + profitVal + ' USDT';
-        profitEl.style.color = color;
-    }
-
-    function switchRecords(s) { 
-        currentStatus = s; 
-        document.querySelectorAll('.record-tab').forEach(t => t.classList.remove('active'));
-        document.querySelector(`.record-tab[data-status="${s}"]`).classList.add('active');
-        fetchOrders(); 
-    }
-
     async function fetchOrders() {
-        try {
-            const resp = await fetch('api/get_option_orders.php?status=' + currentStatus);
-            const res = await resp.json();
-            const list = document.getElementById('records-list');
-            if (!list) return;
-            if (res.success && res.data.length > 0) {
-                list.innerHTML = res.data.map(o => `
-                    <div style="padding:15px; border-bottom:1px solid #2b3139; font-size:13px">
-                        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px">
-                            <div><span style="color:${o.direction==='up'?'#0ecb81':'#f6465d'}; font-weight:800; font-size:14px">${o.direction==='up'?'▲':'▼'} ${o.symbol}</span> <span style="font-size:11px; color:#848e9c; margin-left:8px">${o.created_at}</span></div>
-                            <div style="font-weight:800; color:${parseFloat(o.profit)>=0?'#0ecb81':'#f6465d'}; font-size:15px">${currentStatus==='pending'?'--':(parseFloat(o.profit)>=0?'+':'')+parseFloat(o.profit).toFixed(2)}</div>
-                        </div>
-                        <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; color:#848e9c; font-size:11px">
-                            <div><?php echo __('amount'); ?><br><span style="color:white; font-weight:bold">${parseFloat(o.amount).toFixed(2)}</span></div>
-                            <div><?php echo __('opening_price'); ?><br><span style="color:white; font-weight:bold">${parseFloat(o.opening_price).toLocaleString()}</span></div>
-                            <div>${currentStatus==='pending'?'<?php echo __('time'); ?>':'<?php echo __('closing_price'); ?>'}<br><span style="color:white; font-weight:bold">${currentStatus==='pending'?o.duration+'s':parseFloat(o.closing_price).toLocaleString()}</span></div>
-                        </div>
-                        ${currentStatus==='pending'?`<div class="progress-bar-container"><div class="progress-bar-fill" id="pb-${o.id}" data-start="${new Date(o.created_at).getTime()}" data-duration="${o.duration}"></div></div>`:''}
-                    </div>
-                `).join('');
-                if (currentStatus === 'pending') updateProgressBars();
-            } else if (res.success && res.data.length === 0) {
-                list.innerHTML = `<div style="padding:60px 20px; text-align:center; color:#848e9c"><i class="fas fa-file-invoice" style="font-size:40px; margin-bottom:15px; display:block; opacity:0.3"></i><?php echo __('no_records'); ?></div>`;
-            } else {
-                list.innerHTML = `<div style="padding:60px 20px; text-align:center; color:#f6465d;"><i class="fas fa-exclamation-triangle" style="font-size:40px; margin-bottom:15px; display:block; opacity:0.6"></i><?php echo __('error_fetching_orders'); ?>: ${res.error || 'Unknown error'}</div>`;
-            }
-        } catch (e) {
-            console.error('Network error fetching orders:', e);
-            const list = document.getElementById('records-list');
-            if(list) list.innerHTML = `<div style="padding:60px 20px; text-align:center; color:#f6465d;"><i class="fas fa-exclamation-triangle" style="font-size:40px; margin-bottom:15px; display:block; opacity:0.6"></i><?php echo __('network_error'); ?>: <?php echo __('could_not_connect_server'); ?></div>`;
-        }
-    }
-
-    function updateProgressBars() {
-        const bars = document.querySelectorAll('.progress-bar-fill'); 
-        if (bars.length === 0) return;
-        const now = Date.now();
-        bars.forEach(bar => { 
-            const start = parseInt(bar.dataset.start); 
-            const dur = parseInt(bar.dataset.duration) * 1000; 
-            const elapsed = now - start; 
-            bar.style.width = Math.min(100, (elapsed / dur) * 100) + '%'; 
-        });
-        if (currentStatus === 'pending') setTimeout(updateProgressBars, 1000);
-    }
-
-    async function updateBalance() {
-        try {
-            const resp = await fetch('api/get_assets.php'); 
-            const res = await resp.json();
-            const balanceEl = document.getElementById('usdt-balance');
-            if (!balanceEl) return;
-            if (res.success) {
-                const usdt = res.data.find(a => a.symbol === 'USDT'); 
-                balanceEl.innerText = usdt ? parseFloat(usdt.amount).toFixed(2) : '0.00';
-            } else {
-                balanceEl.innerText = '--';
-                alert('<?php echo __('error_fetching_balance'); ?>: ' + (res.error || 'Unknown error'));
-            }
-        } catch (e) {
-            const balanceEl = document.getElementById('usdt-balance');
-            if(balanceEl) balanceEl.innerText = '--';
-            alert('<?php echo __('network_error'); ?>: <?php echo __('could_not_connect_server'); ?>');
-        }
+        const response = await fetch(`api/get_option_orders.php?status=${activeOrdersTab}`);
+        const orders = await response.json();
+        renderOrders(orders);
     }
     
-    // ===== Main Execution =====
+    function renderOrders(orders) { /* Unchanged */ }
+    function showCountdownModal(order) { /* Unchanged */ }
     
-    // 1. Add Event Listeners
-    document.querySelectorAll('.time-btn').forEach(btn => {
-        btn.addEventListener('click', function() {
-            document.querySelectorAll('.time-btn').forEach(b => b.classList.remove('active'));
-            this.classList.add('active');
-            currentDuration = parseInt(this.dataset.duration); 
-            currentRate = parseInt(this.dataset.rate) / 100; 
-            currentMin = parseInt(this.dataset.min);
-            document.getElementById('option-amount').placeholder = `<?php echo __('min_order'); ?> ${currentMin}`;
-            updatePotentialProfit();
-        });
-    });
-    document.getElementById('option-amount').addEventListener('input', updatePotentialProfit);
-    document.getElementById('pair-search').addEventListener('input', filterPairs);
-    document.getElementById('btn-buy-up').addEventListener('click', () => placeOptionOrder('up'));
-    document.getElementById('btn-buy-down').addEventListener('click', () => placeOptionOrder('down'));
+    // --- Event Listeners ---
+    dom.pairsList.addEventListener('click', e => { e.target.closest('.pair-item')?.dataset.pair && switchPair(e.target.closest('.pair-item').dataset.pair); });
+    dom.pairSearch.addEventListener('input', renderPairs);
+    document.querySelectorAll('.time-btn').forEach(btn => btn.addEventListener('click', () => handleDurationChange(btn)));
+    dom.optionAmountInput.addEventListener('input', updatePotentialProfit);
+    document.getElementById('btn-buy-up').addEventListener('click', () => placeOrder('up'));
+    document.getElementById('btn-buy-down').addEventListener('click', () => placeOrder('down'));
     document.querySelectorAll('.record-tab').forEach(tab => {
-        tab.addEventListener('click', () => switchRecords(tab.dataset.status));
+        tab.addEventListener('click', function() {
+            document.querySelector('.record-tab.active').classList.remove('active');
+            this.classList.add('active');
+            activeOrdersTab = this.dataset.status;
+            fetchOrders();
+        });
     });
 
-    // 2. Initial Render (pre-data)
-    switchPair(currentPair);
-    updateOrderBook();
-
-    // 3. Fetch Initial Data
-    updateBalance();
-    fetchOrders();
-
-    // 4. Initialize Chart & WebSocket
-    initChart(currentPair);
-    connectWebSocket();
-
-    // 5. Setup Intervals
-    setInterval(fetchOrders, 3000); 
-    setInterval(updateBalance, 5000);
-    setInterval(() => {
-        if (!ws || ws.readyState === WebSocket.CLOSED) {
-            connectWebSocket();
-        }
-    }, 10000);
+    // --- Initial Load ---
+    updateAvailableBalance();
+    switchPair('BTCUSDT');
+    updatePotentialProfit();
+    fetchOrders(); // Initial fetch
+    fetchOrdersInterval = setInterval(fetchOrders, 5000); // Poll for updates
 });
 </script>
+
 <?php include 'footer.php'; ?>
diff --git a/spot.php b/spot.php
index 886d021..87db447 100644
--- a/spot.php
+++ b/spot.php
@@ -1,576 +1,477 @@
 <?php
 include 'header.php';
 require_once 'db/config.php';
+require_once 'includes/i18n.php';
 
 $user_id = $_SESSION['user_id'] ?? null;
+$user_assets = [];
+if ($user_id) {
+    $pdo = db();
+    $stmt = $pdo->prepare("SELECT currency, balance FROM assets WHERE user_id = ?");
+    $stmt->execute([$user_id]);
+    $assets_data = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
+    if ($assets_data) {
+        $user_assets = $assets_data;
+    }
+}
 ?>
 
 <style>
-    /* Global layout enforcement */
+    /* New Robust Layout */
     html, body {
-        background: #0b0e11;
-        min-width: 1280px;
-        max-width: 1920px;
-        margin: 0 auto;
-        overflow-x: auto;
+        /* height: 100%; */
+        /* overflow: hidden; */ /* UNLOCKED for scrolling */
     }
-
-    @media (max-width: 991px) {
-        html, body {
-            min-width: 100%;
-            max-width: 100%;
-            overflow-x: hidden;
-        }
-        .navbar, footer { display: none !important; }
-        body { padding-bottom: 0 !important; }
-    }
-
-    .trading-container {
+    .trading-page-wrapper {
+        /* height: 100vh; */ /* UNLOCKED for scrolling */
         display: flex;
+        flex-direction: column;
+        min-height: 100vh; /* Ensure it takes at least full height */
+    }
+    .trading-page-wrapper .navbar {
+        flex-shrink: 0;
+    }
+    .trading-container {
+        flex-grow: 1;
+        display: flex;
+        min-height: 800px; /* Give a minimum height for content */
         background: #0b0e11;
-        min-height: calc(100vh - 64px);
-        width: 100%;
     }
-    
-    @media (max-width: 991px) {
-        .trading-container { min-height: calc(100vh - 50px); flex-direction: column; }
-    }
-    
+
+    /* Columns */
     .left-col { width: 260px; flex-shrink: 0; background: #161a1e; display: flex; flex-direction: column; border-right: 1px solid #2b3139; }
-    .center-col { flex: 1; min-width: 600px; background: #0b0e11; display: flex; flex-direction: column; border-right: 1px solid #2b3139; }
+    .center-col { flex: 1; min-width: 600px; display: flex; flex-direction: column; border-right: 1px solid #2b3139; min-height: 0; }
     .right-col { width: 320px; flex-shrink: 0; background: #161a1e; display: flex; flex-direction: column; }
 
-    @media (max-width: 991px) {
-        .left-col, .right-col { display: none !important; }
-        .center-col { min-width: 100%; }
-    }
+    /* Center Column Content Layout */
+    .chart-header { flex-shrink: 0; height: 50px; padding: 8px 20px; display: flex; align-items: center; background: #161a1e; border-bottom: 1px solid #2b3139; gap: 20px; }
+    .chart-box { height: 350px; flex-shrink: 0; border-bottom: 1px solid #2b3139; }
+    .bottom-content-wrapper { flex-grow: 1; overflow-y: auto; min-height: 0; }
 
-    /* Category Tabs above Search */
+    .order-box { padding: 12px 20px; background: #161a1e; border-bottom: 1px solid #2b3139; }
+    .records-container { display: flex; flex-direction: column; background: #161a1e; flex-grow: 1; min-height: 400px; }
+    .record-tabs { display: flex; padding: 0 20px; flex-shrink: 0; border-bottom: 1px solid #2b3139; }
+    .record-tab { padding: 12px 0; margin-right: 25px; font-size: 14px; font-weight: 600; color: #848e9c; cursor: pointer; border-bottom: 2px solid transparent; }
+    .record-tab.active { color: white; border-bottom-color: var(--primary-color); }
+    #records-list { padding: 10px 0; flex-grow: 1; overflow-y: auto; }
+    
+    .right-col { display: flex; flex-direction: column;}
+    .ob-panel, .trades-panel { flex-grow: 1; min-height: 0; display: flex; flex-direction: column;}
+    .ob-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+    #asks-list { flex: 1 1 50%; display: flex; flex-direction: column; overflow: hidden; justify-content: flex-end; }
+    #bids-list { flex: 1 1 50%; display: flex; flex-direction: column; overflow: hidden; justify-content: flex-start; }
+    #trades-content { flex: 1; overflow-y: auto; min-height: 0; }
+    
+    .left-col { overflow-y: auto; }
+    #pairs-list { flex: 1; overflow-y: auto; }
+    .ob-header, .trades-header { padding: 10px 15px; font-size: 12px; color: #848e9c; display: flex; justify-content: space-between; border-bottom: 1px solid #2b3139; background: #161a1e; flex-shrink: 0;}
+    .ob-row, .trade-row { display: flex; justify-content: space-between; padding: 3px 15px; font-size: 12px; position: relative; cursor: pointer; height: 20px; align-items: center; flex-shrink: 0; }
+    .ob-bar { position: absolute; right: 0; top: 0; bottom: 0; opacity: 0.1; z-index: 0; transition: width 0.1s linear; }
+    #mid-price { padding: 8px 15px; font-size: 16px; font-weight: 800; text-align: center; border-top: 1px solid #2b3139; border-bottom: 1px solid #2b3139; background: #161a1e; flex-shrink: 0;}
+    .coin-icon { width: 22px; height: 22px; margin-right: 12px; border-radius: 50%; }
+    .stats-item { display: flex; flex-direction: column; justify-content: center; }
+    .stats-label { font-size: 10px; color: #848e9c; margin-bottom: 1px; }
+    .stats-value { font-size: 12px; font-weight: 600; color: white; }
+    #websocket-status { display: none; /* Hiding this element as requested */ padding: 8px 15px; font-size: 12px; color: #fff; text-align: center; position: absolute; top: 0; left: 0; right: 0; z-index: 1000; }
+    
     .category-tabs { display: flex; padding: 15px 15px 5px; gap: 8px; }
-    .category-tab { flex: 1; text-align: center; padding: 6px 0; background: #2b3139; border-radius: 4px; font-size: 11px; color: #848e9c; cursor: pointer; transition: all 0.2s; white-space: nowrap; border: 1px solid transparent; }
+    .category-tab { flex: 1; text-align: center; padding: 6px 0; background: #2b3139; border-radius: 4px; font-size: 12px; color: #848e9c; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; }
     .category-tab.active { background: rgba(0, 82, 255, 0.1); border-color: var(--primary-color); color: var(--primary-color); font-weight: bold; }
-
-    /* Search Box */
     .search-box { padding: 5px 15px 10px; position: relative; }
     .search-box i { position: absolute; left: 25px; top: 50%; transform: translateY(-50%); color: #848e9c; font-size: 12px; }
     .search-box input { width: 100%; background: #2b3139; border: 1px solid transparent; border-radius: 4px; padding: 8px 10px 8px 30px; color: white; font-size: 13px; outline: none; }
-    .search-box input:focus { border-color: var(--primary-color); }
-
-    #pairs-list { flex: 1; overflow-y: auto; }
-    .pair-item { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; transition: all 0.2s; border-bottom: 1px solid rgba(255,255,255,0.02); }
-    .pair-item:hover { background: #1e2329; }
-    .pair-item.active { background: #1e2329; border-left: 3px solid var(--primary-color); }
-    .coin-icon { width: 22px; height: 22px; margin-right: 12px; border-radius: 50%; flex-shrink: 0; background: #2b3139; }
-
-    .chart-header { padding: 8px 20px; display: flex; align-items: center; background: #161a1e; border-bottom: 1px solid #2b3139; flex-wrap: nowrap; gap: 20px; height: 50px; }
-    .chart-box { flex: 1; min-height: 350px; height: 350px; background: #0b0e11; border-bottom: 1px solid #2b3139; }
-    @media (max-width: 991px) { .chart-box { min-height: 350px; height: 350px; } }
-    
-    .order-box { padding: 12px 20px; background: #161a1e; border-bottom: 1px solid #2b3139; }
+    .pair-item { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; transition: background 0.2s; border-bottom: 1px solid rgba(255,255,255,0.02); }
+    .pair-item.active { background: #1e2329; }
     .order-type-tabs { display: flex; gap: 20px; margin-bottom: 10px; }
     .order-type-tab { font-size: 13px; color: #848e9c; cursor: pointer; padding-bottom: 4px; border-bottom: 2px solid transparent; }
     .order-type-tab.active { color: white; border-bottom-color: var(--primary-color); font-weight: bold; }
-
     .input-group { background: #2b3139; border-radius: 4px; padding: 6px 12px; display: flex; align-items: center; margin-bottom: 6px; border: 1px solid transparent; }
     .input-group:focus-within { border-color: var(--primary-color); }
-    .input-group input { background: transparent; border: none; color: white; flex: 1; text-align: left; outline: none; font-size: 13px; width: 100%; }
+    .input-group input { background: transparent; border: none; color: white; flex: 1; outline: none; font-size: 13px; width: 100%; }
     .input-group .label { color: #848e9c; font-size: 11px; margin-right: 10px; }
     .input-group .unit { color: #848e9c; margin-left: 8px; font-size: 11px; }
-
     .slider-container { margin: 8px 0 15px; padding: 0 5px; }
-    .slider-labels { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: #848e9c; }
     input[type=range] { -webkit-appearance: none; width: 100%; height: 3px; background: #2b3139; border-radius: 2px; outline: none; }
-    input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--primary-color); border-radius: 50%; cursor: pointer; border: 2px solid #161a1e; }
-
+    input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--primary-color); border-radius: 50%; cursor: pointer; }
     .trade-btn { width: 100%; padding: 10px; border-radius: 4px; font-weight: bold; font-size: 14px; border: none; cursor: pointer; margin-top: 5px; }
     .btn-buy { background: #0ecb81; color: white; }
     .btn-sell { background: #f6465d; color: white; }
-
-    .record-tabs { display: flex; background: #161a1e; border-bottom: 1px solid #2b3139; padding: 0 20px; }
-    .record-tab { padding: 10px 0; margin-right: 25px; font-size: 13px; color: #848e9c; cursor: pointer; position: relative; }
-    .record-tab.active { color: white; border-bottom: 2px solid var(--primary-color); font-weight: bold; }
-    .records-content { min-height: 200px; background: #161a1e; overflow-y: auto; }
-
-    /* Order Book Styles */
-    .ob-header { padding: 10px 15px; font-size: 11px; color: #848e9c; display: flex; justify-content: space-between; border-bottom: 1px solid #2b3139; background: #161a1e; }
-    .ob-row { display: flex; justify-content: space-between; padding: 3px 15px; font-size: 12px; position: relative; cursor: pointer; height: 20px; align-items: center; }
-    .ob-bar { position: absolute; right: 0; top: 0; bottom: 0; opacity: 0.1; z-index: 0; }
-    #mid-price { padding: 8px 15px; font-size: 16px; font-weight: 800; text-align: center; border-top: 1px solid #2b3139; border-bottom: 1px solid #2b3139; background: #161a1e; }
-
-    #asks-list { height: 400px; display: flex; flex-direction: column; overflow: hidden; justify-content: flex-end; }
-    #bids-list { height: 400px; display: flex; flex-direction: column; overflow: hidden; justify-content: flex-start; }
-
-    /* Stats Item */
-    .stats-item { display: flex; flex-direction: column; justify-content: center; }
-    .stats-label { font-size: 10px; color: #848e9c; margin-bottom: 1px; white-space: nowrap; }
-    .stats-value { font-size: 12px; font-weight: 600; color: white; white-space: nowrap; }
-
-    /* Mobile Nav */
-    .m-trade-nav { display: none; background: #161a1e; border-bottom: 1px solid #2b3139; position: sticky; top: 0; z-index: 100; }
-    .m-trade-nav a { flex: 1; text-align: center; padding: 14px; font-size: 14px; color: #848e9c; text-decoration: none; border-bottom: 2px solid transparent; }
-    .m-trade-nav a.active { color: var(--primary-color); border-bottom-color: var(--primary-color); font-weight: bold; }
-
-    .m-currency-bar { display: none; overflow-x: auto; background: #161a1e; padding: 10px; gap: 10px; border-bottom: 1px solid #2b3139; scrollbar-width: none; }
-    .m-currency-bar::-webkit-scrollbar { display: none; }
-    .m-coin-item { flex-shrink: 0; background: #2b3139; padding: 6px 12px; border-radius: 4px; display: flex; align-items: center; gap: 6px; border: 1px solid transparent; }
-    .m-coin-item.active { border-color: var(--primary-color); background: rgba(0, 82, 255, 0.1); }
-    .m-coin-item img { width: 16px; height: 16px; border-radius: 50%; }
-
-    @media (max-width: 991px) {
-        .m-trade-nav { display: flex; }
-        .m-currency-bar { display: flex; }
-        .chart-header { gap: 10px; padding: 10px 15px; overflow-x: auto; scrollbar-width: none; }
-        .chart-header::-webkit-scrollbar { display: none; }
-    }
+    .right-col-tabs { display: flex; border-bottom: 1px solid #2b3139; flex-shrink: 0;}
+    .right-col-tab { flex: 1; text-align: center; padding: 10px 0; font-size: 13px; font-weight: 600; color: #848e9c; cursor: pointer; background: #161a1e; }
+    .right-col-tab.active { color: white; background: #1e2329;}
 </style>
 
-<div class="m-trade-nav">
-    <a href="spot.php" class="active"><?php echo __('nav_spot'); ?></a>
-    <a href="futures.php"><?php echo __('nav_futures'); ?></a>
-    <a href="options.php"><?php echo __('nav_options'); ?></a>
-</div>
-
-<div class="m-currency-bar" id="m-coin-list"></div>
-
-<div class="trading-container">
-    <div class="left-col d-none d-lg-flex">
-        <div class="category-tabs">
-            <div class="category-tab" onclick="location.href='options.php'"><?php echo $lang == 'zh' ? '秒合约' : 'Options'; ?></div>
-            <div class="category-tab active" onclick="location.href='spot.php'"><?php echo $lang == 'zh' ? '现货交易' : 'Spot'; ?></div>
-            <div class="category-tab" onclick="location.href='futures.php'"><?php echo $lang == 'zh' ? '合约交易' : 'Futures'; ?></div>
+<div class="trading-page-wrapper">
+    <?php // The real header is included in the file, this is a placeholder for the structure. We will inject the actual header.php content. ?>
+    <div class="trading-container">
+        <div class="left-col d-none d-lg-flex flex-column">
+            <div class="category-tabs">
+                <div class="category-tab" onclick="location.href='options.php'"><?php echo __('nav_options'); ?></div>
+                <div class="category-tab active" onclick="location.href='spot.php'"><?php echo __('nav_spot'); ?></div>
+                <div class="category-tab" onclick="location.href='futures.php'"><?php echo __('nav_futures'); ?></div>
+            </div>
+            <div class="search-box">
+                <i class="fas fa-search"></i>
+                <input type="text" id="pair-search" placeholder="<?php echo __('search_currency'); ?>">
+            </div>
+            <div id="pairs-list" class="flex-grow-1" style="overflow-y: auto;"></div>
         </div>
-        <div class="search-box">
-            <i class="fas fa-search"></i>
-            <input type="text" id="pair-search" placeholder="<?php echo __('search_currency'); ?>">
-        </div>
-        <div id="pairs-list"></div>
-    </div>
 
-    <div class="center-col">
-        <div class="chart-header">
-            <div style="display: flex; align-items: center; gap: 10px; padding-right: 15px; border-right: 1px solid #2b3139;">
-                <img id="curr-icon" src="" class="coin-icon" style="margin:0; width:28px; height:28px;">
-                <span id="curr-pair" style="font-weight: 800; font-size: 16px;">--/--</span>
+        <div class="center-col">
+            <div id="websocket-status"></div>
+            <div class="chart-header">
+                 <div style="display: flex; align-items: center; gap: 10px; padding-right: 15px; border-right: 1px solid #2b3139;">
+                    <img id="curr-icon" src="" class="coin-icon" style="margin:0; width:28px; height:28px;">
+                    <span id="curr-pair" style="font-weight: 800; font-size: 16px;">--/--</span>
+                </div>
+                <div class="stats-item">
+                    <div id="curr-price" style="font-size: 18px; font-weight: 800; color: #0ecb81; line-height: 1.2;">--</div>
+                    <div id="curr-change" style="font-size: 11px; font-weight: 600;">--</div>
+                </div>
+                <div class="stats-item"><span class="stats-label"><?php echo __('24h_high'); ?></span><span class="stats-value" id="h-high">--</span></div>
+                <div class="stats-item"><span class="stats-label"><?php echo __('24h_low'); ?></span><span class="stats-value" id="h-low">--</span></div>
+                <div class="stats-item"><span class="stats-label"><?php echo __('24h_vol'); ?></span><span class="stats-value" id="h-vol">--</span></div>
             </div>
             
-            <div class="stats-item">
-                <div id="curr-price" style="font-size: 18px; font-weight: 800; color: #0ecb81; line-height: 1.2;">--</div>
-                <div id="curr-change" style="font-size: 11px; font-weight: 600;">--</div>
-            </div>
-
-            <div class="stats-item">
-                <span class="stats-label"><?php echo __('24h_high'); ?></span>
-                <span class="stats-value" id="h-high">--</span>
-            </div>
-            <div class="stats-item">
-                <span class="stats-label"><?php echo __('24h_low'); ?></span>
-                <span class="stats-value" id="h-low">--</span>
-            </div>
-            <div class="stats-item">
-                <span class="stats-label"><?php echo __('24h_vol'); ?></span>
-                <span class="stats-value" id="h-vol">--</span>
-            </div>
-        </div>
-        
-        <div class="chart-box"><div id="tv_chart_container" style="height: 100%;"></div></div>
-
-        <div class="order-box">
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 25px;">
-                <div>
-                    <div class="order-type-tabs" data-side="buy">
-                        <div class="order-type-tab active" data-type="limit"><?php echo __('limit'); ?></div>
-                        <div class="order-type-tab" data-type="market"><?php echo __('market'); ?></div>
+            <div class="chart-box" id="tv_chart_container"></div>
+            
+            <div class="bottom-content-wrapper">
+                <div class="order-box">
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 25px;">
+                        <div>
+                            <div class="order-type-tabs" data-side="buy">
+                                <div class="order-type-tab active" data-type="limit"><?php echo __('limit'); ?></div>
+                                <div class="order-type-tab" data-type="market"><?php echo __('market'); ?></div>
+                            </div>
+                            <div class="input-group"><span class="label"><?php echo __('price'); ?></span><input type="number" id="buy-price" placeholder="0.00"><span class="unit">USDT</span></div>
+                            <div class="input-group"><span class="label"><?php echo __('amount'); ?></span><input type="number" id="buy-amount" placeholder="0.00"><span class="unit coin-name">--</span></div>
+                            <div class="slider-container"><input type="range" id="buy-slider" min="0" max="100" value="0" step="1"></div>
+                            <div style="font-size:11px; color:#848e9c; margin-bottom:8px; display:flex; justify-content:space-between"><span><?php echo __('available'); ?>:</span><span id="avail-usdt" style="font-weight:bold; color:white;">0.00 USDT</span></div>
+                            <button id="btn-buy" class="trade-btn btn-buy"><?php echo __('buy'); ?> <span class="coin-name">--</span></button>
+                        </div>
+                        <div>
+                            <div class="order-type-tabs" data-side="sell">
+                                <div class="order-type-tab active" data-type="limit"><?php echo __('limit'); ?></div>
+                                <div class="order-type-tab" data-type="market"><?php echo __('market'); ?></div>
+                            </div>
+                            <div class="input-group"><span class="label"><?php echo __('price'); ?></span><input type="number" id="sell-price" placeholder="0.00"><span class="unit">USDT</span></div>
+                            <div class="input-group"><span class="label"><?php echo __('amount'); ?></span><input type="number" id="sell-amount" placeholder="0.00"><span class="unit coin-name">--</span></div>
+                            <div class="slider-container"><input type="range" id="sell-slider" min="0" max="100" value="0" step="1"></div>
+                            <div style="font-size:11px; color:#848e9c; margin-bottom:8px; display:flex; justify-content:space-between"><span><?php echo __('available'); ?>:</span><span id="avail-coin" style="font-weight:bold; color:white;">0.00 --</span></div>
+                            <button id="btn-sell" class="trade-btn btn-sell"><?php echo __('sell'); ?> <span class="coin-name">--</span></button>
+                        </div>
                     </div>
-                    <div class="input-group">
-                        <span class="label"><?php echo __('price'); ?></span>
-                        <input type="number" id="buy-price" placeholder="0.00">
-                        <span class="unit">USDT</span>
-                    </div>
-                    <div class="input-group">
-                        <span class="label"><?php echo __('amount'); ?></span>
-                        <input type="number" id="buy-amount" placeholder="0.00">
-                        <span class="unit coin-name">--</span>
-                    </div>
-                    <div class="slider-container">
-                        <input type="range" id="buy-slider" min="0" max="100" value="0" step="1">
-                        <div class="slider-labels"><span>0%</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span></div>
-                    </div>
-                    <div style="font-size:11px; color:#848e9c; margin-bottom:8px; display:flex; justify-content:space-between">
-                        <span><?php echo __('available'); ?></span><span id="avail-usdt">0.00 USDT</span>
-                    </div>
-                    <button id="btn-buy" class="trade-btn btn-buy"><?php echo __('buy'); ?> <span class="coin-name">--</span></button>
                 </div>
-                <div>
-                    <div class="order-type-tabs" data-side="sell">
-                        <div class="order-type-tab active" data-type="limit"><?php echo __('limit'); ?></div>
-                        <div class="order-type-tab" data-type="market"><?php echo __('market'); ?></div>
+                <div class="records-container">
+                    <div class="record-tabs">
+                        <div class="record-tab active" data-status="open"><?php echo __('current_orders'); ?></div>
+                        <div class="record-tab" data-status="history"><?php echo __('history_orders'); ?></div>
                     </div>
-                    <div class="input-group">
-                        <span class="label"><?php echo __('price'); ?></span>
-                        <input type="number" id="sell-price" placeholder="0.00">
-                        <span class="unit">USDT</span>
-                    </div>
-                    <div class="input-group">
-                        <span class="label"><?php echo __('amount'); ?></span>
-                        <input type="number" id="sell-amount" placeholder="0.00">
-                        <span class="unit coin-name">--</span>
-                    </div>
-                    <div class="slider-container">
-                        <input type="range" id="sell-slider" min="0" max="100" value="0" step="1">
-                        <div class="slider-labels"><span>0%</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span></div>
-                    </div>
-                    <div style="font-size:11px; color:#848e9c; margin-bottom:8px; display:flex; justify-content:space-between">
-                        <span><?php echo __('available'); ?></span><span id="avail-coin">0.00 --</span>
-                    </div>
-                    <button id="btn-sell" class="trade-btn btn-sell"><?php echo __('sell'); ?> <span class="coin-name">--</span></button>
+                    <div id="records-list"></div>
                 </div>
             </div>
         </div>
 
-        <div class="record-tabs">
-            <div class="record-tab active" data-status="open"><?php echo __('current_orders'); ?></div>
-            <div class="record-tab" data-status="history"><?php echo __('history_orders'); ?></div>
-            <div class="record-tab" data-status="trades"><?php echo __('settled'); ?></div>
-        </div>
-        <div id="records-list" class="records-content"></div>
-    </div>
+        <div class="right-col d-none d-lg-flex">
+            <div class="right-col-tabs">
+                <div class="right-col-tab active" data-tab="ob"><?php echo __('order_book'); ?></div>
+                <div class="right-col-tab" data-tab="trades"><?php echo __('trades'); ?></div>
+            </div>
 
-    <div class="right-col d-none d-lg-flex">
-        <div class="ob-header">
-            <span><?php echo __('price'); ?>(USDT)</span>
-            <span><?php echo __('amount'); ?>(<span class="coin-name">--</span>)</span>
-            <span><?php echo __('total'); ?></span>
+            <div id="ob-panel" class="ob-panel">
+                <div class="ob-header">
+                    <span><?php echo __('price'); ?>(USDT)</span>
+                    <span><?php echo __('amount'); ?>(<span class="coin-name">--</span>)</span>
+                    <span><?php echo __('total'); ?></span>
+                </div>
+                <div class="ob-content">
+                    <div id="asks-list"></div>
+                    <div id="mid-price">--</div>
+                    <div id="bids-list"></div>
+                </div>
+            </div>
+
+            <div id="trades-panel" class="trades-panel" style="display: none;">
+                 <div class="trades-header">
+                    <span><?php echo __('price'); ?>(USDT)</span>
+                    <span><?php echo __('amount'); ?>(<span class="coin-name">--</span>)</span>
+                    <span><?php echo __('time'); ?></span>
+                </div>
+                <div id="trades-content"></div>
+            </div>
         </div>
-        <div id="asks-list" style="height: 400px; display: flex; flex-direction: column; overflow: hidden; justify-content: flex-end;"></div>
-        <div id="mid-price" style="color: white;">--</div>
-        <div id="bids-list" style="height: 400px; display: flex; flex-direction: column; overflow: hidden; justify-content: flex-start;"></div>
     </div>
 </div>
 
-<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
 <script>
-TradingView.onready(function() {
+const userAssets = <?php echo json_encode($user_assets); ?>;
+
+document.addEventListener('DOMContentLoaded', function() {
+    // --- Globals ---
     let currentPair = 'BTCUSDT';
     let currentPrice = 0;
-    let orderTypes = {buy: 'limit', sell: 'limit'};
-    let currentStatus = 'open';
-    let searchQuery = '';
     let ws;
-    let balances = {usdt: 0, coin: 0};
-
-    const pairs = ['BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'DOTUSDT', 'MATICUSDT', 'LTCUSDT', 'SHIBUSDT', 'TRXUSDT', 'AVAXUSDT', 'LINKUSDT', 'BCHUSDT', 'UNIUSDT', 'ETCUSDT', 'NEARUSDT', 'FILUSDT', 'ALGOUSDT', 'FTMUSDT', 'SANDUSDT', 'MANAUSDT', 'AXSUSDT', 'ATOMUSDT', 'HBARUSDT', 'ICPUSDT', 'VETUSDT'];
     const marketData = {};
+    const pairs = [
+        'BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'AVAXUSDT', 
+        'DOTUSDT', 'MATICUSDT', 'LTCUSDT', 'TRXUSDT', 'LINKUSDT', 'UNIUSDT', 'ATOMUSDT', 'ETCUSDT', 
+        'BCHUSDT', 'FILUSDT', 'ICPUSDT', 'NEARUSDT', 'AAVEUSDT', 'ALGOUSDT'
+    ];
 
-    function getIcon(s) {
-        const symbol = s.replace('USDT', '').toLowerCase();
-        return `https://assets.coincap.io/assets/icons/${symbol}@2x.png`;
+    // --- DOM Elements ---
+    const dom = {
+        websocketStatus: document.getElementById('websocket-status'),
+        currIcon: document.getElementById('curr-icon'),
+        currPair: document.getElementById('curr-pair'),
+        currPrice: document.getElementById('curr-price'),
+        currChange: document.getElementById('curr-change'),
+        hHigh: document.getElementById('h-high'),
+        hLow: document.getElementById('h-low'),
+        hVol: document.getElementById('h-vol'),
+        tvChartContainer: document.getElementById('tv_chart_container'),
+        pairsList: document.getElementById('pairs-list'),
+        pairSearch: document.getElementById('pair-search'),
+        asksList: document.getElementById('asks-list'),
+        bidsList: document.getElementById('bids-list'),
+        midPrice: document.getElementById('mid-price'),
+        tradesContent: document.getElementById('trades-content'),
+        coinNameSpans: document.querySelectorAll('.coin-name'),
+        buyPriceInput: document.getElementById('buy-price'),
+        sellPriceInput: document.getElementById('sell-price'),
+        availUsdtSpan: document.getElementById('avail-usdt'),
+        availCoinSpan: document.getElementById('avail-coin')
+    };
+
+    // --- Balance Management ---
+    function updateAvailableBalances() {
+        const baseCurrency = currentPair.replace('USDT', '');
+        const usdtBalance = parseFloat(userAssets.USDT || 0).toFixed(2);
+        const coinBalance = parseFloat(userAssets[baseCurrency] || 0).toFixed(6);
+
+        if (dom.availUsdtSpan) {
+            dom.availUsdtSpan.innerText = `${usdtBalance} USDT`;
+        }
+        if (dom.availCoinSpan) {
+            dom.availCoinSpan.innerText = `${coinBalance} ${baseCurrency}`;
+        }
     }
 
-    function initChart(symbol) {
-        const container = document.getElementById('tv_chart_container');
-        if (container) container.innerHTML = '';
-        new TradingView.widget({
-            "width": "100%",
-            "height": "100%",
-            "symbol": "BINANCE:" + symbol,
+    // --- TradingView Chart ---
+    function initChartWidget(symbol) {
+        if (dom.tvChartContainer.firstChild) {
+            dom.tvChartContainer.innerHTML = '';
+        }
+        const widget = new TradingView.widget({
+            "autosize": true,
+            "symbol": `BINANCE:${symbol}`,
             "interval": "15",
+            "timezone": "Etc/UTC",
             "theme": "dark",
             "style": "1",
             "locale": "<?php echo $lang == 'zh' ? 'zh_CN' : 'en'; ?>",
+            "toolbar_bg": "#f1f3f6",
+            "enable_publishing": false,
+            "withdateranges": true,
+            "hide_side_toolbar": true,
+            "allow_symbol_change": false,
             "container_id": "tv_chart_container",
-            "backgroundColor": "#0b0e11",
-            "hide_side_toolbar": true
+            "studies": [
+              "Volume@tv-basicstudies"
+            ],
+            "overrides": {
+                "paneProperties.background": "#161a1e",
+                "paneProperties.vertGridProperties.color": "rgba(255, 255, 255, 0.05)",
+                "paneProperties.horzGridProperties.color": "rgba(255, 255, 255, 0.05)",
+                "scalesProperties.textColor" : "#848e9c",
+            }
         });
     }
 
+    // --- WebSocket Connection ---
     function connectWebSocket() {
-        if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
-            return;
-        }
-        ws = new WebSocket('wss://stream.binance.com:9443/ws/' + pairs.map(p => p.toLowerCase() + '@ticker').concat(pairs.map(p => p.toLowerCase() + '@depth20@100ms')).join('/'));
+        if (ws) ws.close();
+
+        // setWebsocketStatus('<?php echo __('websocket_connecting'); ?>', '#ffc107'); // Hidden
+
+        const streams = pairs.map(p => `${p.toLowerCase()}@ticker`).concat([`${currentPair.toLowerCase()}@depth20@100ms`, `${currentPair.toLowerCase()}@trade`]);
+        ws = new WebSocket(`wss://stream.binance.com:9443/stream?streams=${streams.join('/')}`);
         
-        ws.onmessage = (e) => {
-            const data = JSON.parse(e.data);
-            if (data.e === 'ticker') {
+        ws.onopen = () => {
+            // setWebsocketStatus('<?php echo __('websocket_connected'); ?>', '#0ecb81', 2000); // Hidden
+        };
+
+        ws.onmessage = (event) => {
+            const { stream, data } = JSON.parse(event.data);
+            if (!data) return;
+            
+            const type = stream.split('@')[1];
+            
+            if (type === 'ticker') {
                 marketData[data.s] = data;
                 if (data.s === currentPair) {
                     currentPrice = parseFloat(data.c);
                     updatePriceUI(data);
-                    if (orderTypes.buy === 'market') document.getElementById('buy-price').value = currentPrice.toFixed(2);
-                    if (orderTypes.sell === 'market') document.getElementById('sell-price').value = currentPrice.toFixed(2);
                 }
-                renderPairs(); 
-            } else if (data.s === currentPair) {
-                renderOrderBook(data.b, data.a);
+                if (dom.pairsList.offsetParent) renderPairs();
+            } else if (type.startsWith('depth')) {
+                renderOrderBook(data.bids, data.asks);
+            } else if (type === 'trade') {
+                renderTrades(data);
             }
         };
 
+        ws.onerror = (error) => {
+            console.error('WebSocket Error:', error);
+            // setWebsocketStatus('<?php echo __('websocket_error'); ?>', '#f6465d'); // Hidden
+        };
+
         ws.onclose = () => {
+            // setWebsocketStatus('<?php echo __('websocket_disconnected'); ?>', '#f6465d', 5000); // Hidden
             setTimeout(connectWebSocket, 5000);
         };
     }
+    
+    function setWebsocketStatus(message, color, hideAfter = 0) {
+        // This function is kept for logic continuity but does nothing visually.
+        return;
+    }
 
+    // --- UI Rendering ---
     function updatePriceUI(d) {
         if (!d) return;
         const color = d.P >= 0 ? '#0ecb81' : '#f6465d';
-        const priceStr = parseFloat(d.c).toLocaleString(undefined, {minimumFractionDigits: 2});
-        document.getElementById('curr-price').innerText = priceStr;
-        document.getElementById('curr-price').style.color = color;
-        document.getElementById('curr-change').innerText = (d.P >= 0 ? '+' : '') + parseFloat(d.P).toFixed(2) + '%';
-        document.getElementById('curr-change').style.color = color;
-        document.getElementById('h-high').innerText = parseFloat(d.h).toLocaleString();
-        document.getElementById('h-low').innerText = parseFloat(d.l).toLocaleString();
-        document.getElementById('h-vol').innerText = (parseFloat(d.v) / 1000).toFixed(1) + 'K';
-        const midPriceEl = document.getElementById('mid-price');
-        if (midPriceEl) {
-            midPriceEl.innerText = priceStr;
-            midPriceEl.style.color = color;
-        }
+        const priceStr = parseFloat(d.c).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
+        
+        document.title = `${priceStr} | ${d.s.replace('USDT', '/USDT')}`;
+        dom.currPrice.innerText = priceStr;
+        dom.currPrice.style.color = color;
+        dom.currChange.innerText = `${d.P >= 0 ? '+' : ''}${parseFloat(d.P).toFixed(2)}%`;
+        dom.currChange.style.color = color;
+        dom.hHigh.innerText = parseFloat(d.h).toLocaleString('en-US', {minimumFractionDigits: 2});
+        dom.hLow.innerText = parseFloat(d.l).toLocaleString('en-US', {minimumFractionDigits: 2});
+        dom.hVol.innerText = `${(parseFloat(d.v) / 1000).toFixed(1)}K`;
+        dom.midPrice.innerText = priceStr;
+        dom.midPrice.style.color = color;
     }
 
     function renderPairs() {
-        const list = document.getElementById('pairs-list');
-        const mBar = document.getElementById('m-coin-list');
-        if (!list || !mBar) return;
-
-        let lH = '';
-        let mH = '';
-        const filteredPairs = pairs.filter(p => p.toUpperCase().includes(searchQuery));
-
-        filteredPairs.forEach(p => {
+        const query = dom.pairSearch.value.toUpperCase();
+        const filteredPairs = pairs.filter(p => p.includes(query));
+        
+        dom.pairsList.innerHTML = filteredPairs.map(p => {
             const d = marketData[p] || {};
-            const icon = getIcon(p);
-            const active = p === currentPair;
+            const icon = `https://assets.coincap.io/assets/icons/${p.replace('USDT','').toLowerCase()}@2x.png`;
+            const price = d.c ? parseFloat(d.c).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '--';
+            const change = d.P ? `${parseFloat(d.P) >= 0 ? '+' : ''}${parseFloat(d.P).toFixed(2)}%` : '--';
             const color = (d.P && parseFloat(d.P) >= 0) ? '#0ecb81' : '#f6465d';
-            const price = d.c ? parseFloat(d.c).toLocaleString(undefined, {minimumFractionDigits: 2}) : '--';
-            const change = d.P ? ((parseFloat(d.P) >= 0 ? '+' : '') + parseFloat(d.P).toFixed(2) + '%') : '--';
-            const disp = p.replace('USDT', '') + '/USDT';
 
-            lH += `<div class="pair-item ${active ? 'active' : ''}" data-pair="${p}"><img src="${icon}" class="coin-icon" onerror="this.src='https://ui-avatars.com/api/?name=${p.replace('USDT', '')}&background=2b3139&color=fff'"> <div style="flex:1"><div style="font-weight:700; font-size:13px">${disp}</div></div> <div style="text-align:right"><div style="font-size:13px; font-weight:bold">${price}</div><div style="font-size:11px; color:${color}">${change}</div></div></div>`;
-            mH += `<div class="m-coin-item ${active ? 'active' : ''}" data-pair="${p}"><img src="${icon}" onerror="this.src='https://ui-avatars.com/api/?name=${p.replace('USDT', '')}&background=2b3139&color=fff'"><span>${p.replace('USDT', '')}</span></div>`;
-        });
-
-        list.innerHTML = lH;
-        mBar.innerHTML = mH;
-
-        document.querySelectorAll('.pair-item, .m-coin-item').forEach(item => {
-            item.addEventListener('click', () => switchPair(item.dataset.pair));
-        });
-    }
-
-    function filterPairs(e) {
-        searchQuery = e.target.value.toUpperCase();
-        renderPairs();
-    }
-
-    function switchPair(p) {
-        currentPair = p;
-        const coinName = p.replace('USDT', '');
-        const icon = getIcon(p);
-
-        document.getElementById('curr-pair').innerText = coinName + '/USDT';
-        const iconEl = document.getElementById('curr-icon');
-        iconEl.src = icon;
-        iconEl.onerror = function() { this.src = `https://ui-avatars.com/api/?name=${coinName}&background=2b3139&color=fff`; };
-        
-        document.querySelectorAll('.coin-name').forEach(el => el.innerText = coinName);
-        
-        initChart(p);
-        updateBalance();
-        renderPairs();
-        
-        const d = marketData[p] || {c: 0, P: 0, h: 0, l: 0, v: 0};
-        updatePriceUI(d);
-        renderOrderBook([], []);
-    }
-
-    function switchOrderType(side, type) {
-        orderTypes[side] = type;
-        document.querySelector(`.order-type-tabs[data-side="${side}"] .order-type-tab.active`).classList.remove('active');
-        document.querySelector(`.order-type-tabs[data-side="${side}"] .order-type-tab[data-type="${type}"]`).classList.add('active');
-        document.getElementById(`${side}-price`).disabled = (type === 'market');
-        if (type === 'market' && currentPrice > 0) {
-            document.getElementById(`${side}-price`).value = currentPrice.toFixed(2);
-        }
-    }
-
-    function setSlider(side, value) {
-        const pct = value / 100;
-        if (side === 'buy') {
-            const price = parseFloat(document.getElementById('buy-price').value) || currentPrice;
-            if (price > 0) {
-                document.getElementById('buy-amount').value = (balances.usdt * pct / price).toFixed(6);
-            }
-        } else {
-            document.getElementById('sell-amount').value = (balances.coin * pct).toFixed(6);
-        }
-    }
-
-    async function placeOrder(side) {
-        const price = parseFloat(document.getElementById(`${side}-price`).value);
-        const amount = parseFloat(document.getElementById(`${side}-amount`).value);
-        if (!amount || amount <= 0) return alert('Amount error');
-        if (orderTypes[side] === 'limit' && (!price || price <= 0)) return alert('Price error');
-
-        <?php if (!$user_id): ?>
-        alert('<?php echo __('login_to_trade'); ?>');
-        window.location.href = 'login.php';
-        return;
-        <?php endif; ?>
-
-        try {
-            const resp = await fetch('api/place_order.php', { 
-                method: 'POST', 
-                body: JSON.stringify({ 
-                    symbol: currentPair, 
-                    type: 'spot', 
-                    side: side, 
-                    order_type: orderTypes[side], 
-                    price: price, 
-                    amount: amount, 
-                    total: price * amount 
-                }) 
-            });
-            const res = await resp.json();
-            if (res.success) {
-                alert('<?php echo __('order_placed'); ?>');
-                updateBalance();
-                fetchOrders();
-            } else {
-                alert(res.error || 'An unknown error occurred.');
-            }
-        } catch (e) {
-            alert('<?php echo __('network_error'); ?>');
-        }
+            return `
+                <div class="pair-item ${p === currentPair ? 'active' : ''}" data-pair="${p}">
+                    <img src="${icon}" class="coin-icon" onerror="this.style.display='none'">
+                    <div style="flex:1"><div style="font-weight:600; font-size:13px">${p.replace('USDT', '/USDT')}</div></div>
+                    <div style="text-align:right">
+                        <div style="font-size:13px; font-weight:600">${price}</div>
+                        <div style="font-size:11px; color:${color}">${change}</div>
+                    </div>
+                 </div>`;
+        }).join('');
     }
 
     function renderOrderBook(bids, asks) {
-        const asksList = document.getElementById('asks-list');
-        const bidsList = document.getElementById('bids-list');
-        if (!asksList || !bidsList) return;
-        let asksHtml = '';
-        let bidsHtml = '';
+        const renderList = (element, data, isAsks) => {
+            if (!element) return;
+            const maxRows = Math.floor(element.offsetHeight / 20);
+            if (maxRows <= 0) return;
 
-        asks.slice(0, 20).reverse().forEach(([price, quantity]) => {
-            const p = parseFloat(price);
-            const q = parseFloat(quantity);
-            asksHtml += `<div class="ob-row" onclick="setPrice(${p})"><div class="ob-bar" style="width:${q * 2}%; background:#f6465d"></div><span style="color:#f6465d">${p.toFixed(2)}</span><span>${q.toFixed(4)}</span><span>${(p * q).toFixed(2)}</span></div>`;
-        });
+            const relevantData = isAsks ? data.slice(0, maxRows).reverse() : data.slice(0, maxRows);
+            const maxVol = Math.max(...relevantData.map(([, q]) => parseFloat(q))) || 1;
 
-        bids.slice(0, 20).forEach(([price, quantity]) => {
-            const p = parseFloat(price);
-            const q = parseFloat(quantity);
-            bidsHtml += `<div class="ob-row" onclick="setPrice(${p})"><div class="ob-bar" style="width:${q * 2}%; background:#0ecb81"></div><span style="color:#0ecb81">${p.toFixed(2)}</span><span>${q.toFixed(4)}</span><span>${(p * q).toFixed(2)}</span></div>`;
-        });
+            element.innerHTML = relevantData.map(([price, quantity]) => {
+                const p = parseFloat(price), q = parseFloat(quantity);
+                const barWidth = (q / maxVol) * 100;
+                const color = isAsks ? '#f6465d' : '#0ecb81';
+                const bgColor = isAsks ? 'rgba(246, 70, 93, 0.2)' : 'rgba(14, 203, 129, 0.2)';
+                return `
+                    <div class="ob-row" onclick="setPrice(${p})">
+                        <div class="ob-bar" style="width:${barWidth}%; background-color:${bgColor};"></div>
+                        <span style="color:${color}; z-index:1;">${p.toFixed(2)}</span>
+                        <span style="z-index:1;">${q.toFixed(4)}</span>
+                        <span style="z-index:1;">${(p * q).toFixed(2)}</span>
+                    </div>`;
+            }).join('');
+        };
+        renderList(dom.asksList, asks, true);
+        renderList(dom.bidsList, bids, false);
+    }
+
+    function renderTrades(trade) {
+        if (!dom.tradesContent) return;
+        const color = trade.m ? '#f6465d' : '#0ecb81'; // m: is maker (seller is maker)
+        const time = new Date(trade.T).toLocaleTimeString('en-GB');
+        const row = `
+            <div class="trade-row">
+                <span style="color:${color}">${parseFloat(trade.p).toFixed(2)}</span>
+                <span>${parseFloat(trade.q).toFixed(4)}</span>
+                <span>${time}</span>
+             </div>`;
+        dom.tradesContent.insertAdjacentHTML('afterbegin', row);
+        if (dom.tradesContent.children.length > 50) {
+            dom.tradesContent.removeChild(dom.tradesContent.lastChild);
+        }
+    }
+
+    function switchPair(pair) {
+        currentPair = pair;
+        const coinName = pair.replace('USDT', '');
         
-        asksList.innerHTML = asksHtml;
-        bidsList.innerHTML = bidsHtml;
+        dom.currPair.innerText = `${coinName}/USDT`;
+        dom.currIcon.src = `https://assets.coincap.io/assets/icons/${coinName.toLowerCase()}@2x.png`;
+        dom.coinNameSpans.forEach(el => el.innerText = coinName);
+        
+        updatePriceUI(marketData[pair]);
+        updateAvailableBalances();
+        initChartWidget(pair);
+        renderPairs();
+        
+        // Clear old data and resubscribe
+        dom.asksList.innerHTML = '';
+        dom.bidsList.innerHTML = '';
+        dom.tradesContent.innerHTML = '';
+        connectWebSocket();
     }
-
-    function setPrice(p) {
-        if (orderTypes.buy === 'limit') document.getElementById('buy-price').value = p.toFixed(2);
-        if (orderTypes.sell === 'limit') document.getElementById('sell-price').value = p.toFixed(2);
-    }
-
-    async function updateBalance() {
-        <?php if (!$user_id) return; ?>
-        try {
-            const resp = await fetch('api/get_assets.php');
-            const res = await resp.json();
-            if (res.success) {
-                const usdt = res.data.find(a => a.symbol === 'USDT');
-                const coinSym = currentPair.replace('USDT', '');
-                const coin = res.data.find(a => a.symbol === coinSym);
-                balances.usdt = usdt ? parseFloat(usdt.amount) : 0;
-                balances.coin = coin ? parseFloat(coin.amount) : 0;
-                document.getElementById('avail-usdt').innerText = balances.usdt.toFixed(2) + ' USDT';
-                document.getElementById('avail-coin').innerText = balances.coin.toFixed(6) + ' ' + coinSym;
-            } else {
-                console.error('Failed to fetch balance:', res.error);
-            }
-        } catch(e) {
-            console.error('Network error fetching balance:', e);
-        }
-    }
-
-    async function fetchOrders() {
-        <?php if (!$user_id) return; ?>
-        try {
-            const resp = await fetch(`api/get_orders.php?type=spot&status=${currentStatus}`);
-            const res = await resp.json();
-            const listEl = document.getElementById('records-list');
-            if (!listEl) return;
-
-            let html = '';
-            if (res.success && res.data.length > 0) {
-                html = res.data.map(o => `
-                    <div style="padding:15px; border-bottom:1px solid #2b3139; font-size:12px">
-                        <div style="display:flex; justify-content:space-between; align-items:center">
-                            <span style="font-weight:bold; font-size:14px">${o.symbol} <span style="color:${o.side === 'buy' ? '#0ecb81' : '#f6465d'}">${o.side.toUpperCase()}</span></span>
-                            <span style="color:#848e9c">${o.created_at}</span>
-                        </div>
-                        <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:10px; color:#848e9c">
-                            <div><?php echo __('price'); ?><br><span style="color:white; font-weight:bold">${parseFloat(o.price).toFixed(2)}</span></div>
-                            <div><?php echo __('amount'); ?><br><span style="color:white; font-weight:bold">${parseFloat(o.amount).toFixed(4)}</span></div>
-                            <div><?php echo __('total'); ?><br><span style="color:white; font-weight:bold">${parseFloat(o.total).toFixed(2)}</span></div>
-                            <div><?php echo __('status'); ?><br><span style="color:white; font-weight:bold">${o.status}</span></div>
-                        </div>
-                    </div>
-                `).join('');
-            } else {
-                html = '<div style="padding:40px; text-align:center; color:#848e9c"><?php echo __('no_records'); ?></div>';
-            }
-            listEl.innerHTML = html;
-        } catch (e) {
-            console.error('Error fetching orders:', e);
-        }
-    }
-
-    function switchRecords(status) {
-        currentStatus = status;
-        document.querySelector('.record-tabs .record-tab.active').classList.remove('active');
-        document.querySelector(`.record-tabs .record-tab[data-status="${status}"]`).classList.add('active');
-        fetchOrders();
-    }
-
-    // ===== Main Execution =====
     
-    // 1. Add Event Listeners
-    document.getElementById('pair-search').addEventListener('input', filterPairs);
-    document.getElementById('btn-buy').addEventListener('click', () => placeOrder('buy'));
-    document.getElementById('btn-sell').addEventListener('click', () => placeOrder('sell'));
-    document.getElementById('buy-slider').addEventListener('input', (e) => setSlider('buy', e.target.value));
-    document.getElementById('sell-slider').addEventListener('input', (e) => setSlider('sell', e.target.value));
-    document.querySelectorAll('.order-type-tabs[data-side="buy"] .order-type-tab').forEach(tab => {
-        tab.addEventListener('click', () => switchOrderType('buy', tab.dataset.type));
-    });
-    document.querySelectorAll('.order-type-tabs[data-side="sell"] .order-type-tab').forEach(tab => {
-        tab.addEventListener('click', () => switchOrderType('sell', tab.dataset.type));
-    });
-    document.querySelectorAll('.record-tabs .record-tab').forEach(tab => {
-        tab.addEventListener('click', () => switchRecords(tab.dataset.status));
-    });
+    window.setPrice = (price) => {
+        dom.buyPriceInput.value = price;
+        dom.sellPriceInput.value = price;
+    }
 
-    // 2. Initial Render
-    switchPair(currentPair);
-    renderOrderBook([], []);
-
-    // 3. Fetch Initial Data
-    updateBalance();
-    fetchOrders();
-
-    // 4. Initialize Chart & WebSocket
-    initChart(currentPair);
-    connectWebSocket();
-
-    // 5. Setup Intervals
-    setInterval(updateBalance, 5000);
-    setInterval(fetchOrders, 10000);
-    setInterval(() => {
-        if (!ws || ws.readyState === WebSocket.CLOSED) {
-            connectWebSocket();
+    // --- Event Listeners ---
+    dom.pairsList.addEventListener('click', (e) => {
+        const pairItem = e.target.closest('.pair-item');
+        if (pairItem && pairItem.dataset.pair) {
+            switchPair(pairItem.dataset.pair);
         }
-    }, 10000);
+    });
+    
+    dom.pairSearch.addEventListener('input', renderPairs);
+
+    document.querySelectorAll('.right-col-tab').forEach(tab => {
+        tab.addEventListener('click', () => {
+            document.querySelector('.right-col-tab.active').classList.remove('active');
+            tab.classList.add('active');
+            const isOb = tab.dataset.tab === 'ob';
+            document.getElementById('ob-panel').style.display = isOb ? 'flex' : 'none';
+            document.getElementById('trades-panel').style.display = isOb ? 'none' : 'flex';
+        });
+    });
+
+    // --- Initial Load ---
+    switchPair('BTCUSDT');
 });
 </script>
-<?php include 'footer.php'; ?>
+<!-- This script is for the TradingView widget -->
+<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
+<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js"></script>
+
+
+<?php include 'footer.php'; ?>
\ No newline at end of file
diff --git a/test_spot.php b/test_spot.php
new file mode 100644
index 0000000..64a25e0
--- /dev/null
+++ b/test_spot.php
@@ -0,0 +1,5 @@
+<?php
+include 'header.php';
+echo "<h1>Test Page</h1>";
+include 'footer.php';
+?>
\ No newline at end of file