<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JaviD Future Bot V18.0</title>
<link rel="stylesheet" href="/static/styles.css">
</head>
<body>
<div id="app">
    <header class="topbar">
        <div class="brand">
            <span class="brand-mark" aria-hidden="true"></span>
            <span class="app-title">JaviD Future Bot <em>V18.0</em></span>
            <span id="license-info" class="license-info">-</span>
        </div>
        <nav class="topnav">
            <button class="nav-btn active" data-view="dashboard">
                <span class="nav-icon">📊</span> Dashboard
            </button>
            <button class="nav-btn" data-view="positions">
                <span class="nav-icon">📈</span> Positions
            </button>
            <button class="nav-btn" data-view="symbols">
                <span class="nav-icon">🔍</span> Symbol Selection
            </button>
            <button class="nav-btn" data-view="records">
                <span class="nav-icon">📜</span> Records
            </button>
            <button class="nav-btn" data-view="settings">
                <span class="nav-icon">⚙️</span> Settings
            </button>
            <button class="nav-btn" data-view="logs">
                <span class="nav-icon">📝</span> Logs
            </button>

        </nav>
        <div class="topbar-right">
            <span class="status-cluster">
                <span id="status-indicator" class="status-dot status-offline"></span>
                <span id="status-text">Waiting for Connection</span>
            </span>
            <div class="start-stop-container">
                <button id="btn-start-stop" class="btn-start-stop btn-start">
                    <span id="start-stop-icon">▶</span>
                    <span id="start-stop-text">Start Trading</span>
                </button>
            </div>
        </div>
    </header>

    <div class="main-layout workspace">

        <main class="content-area">
            <div id="shadow-banner" class="shadow-banner" style="display:none">
                🪞 <strong>SHADOW MODE</strong> enabled — recording signals only, no real orders.
                Reflects the exact same tick data as the real futures exchange and trades in virtual USDT, so it closely mirrors real trading.
                Check the logs/SHADOW/ folder.
            </div>

            <div id="workflow-guide" class="workflow-guide">
                <div class="workflow-title">📌 Standard Trading Flow</div>
                <div class="workflow-steps">
                    <span class="step done">1. Auto-initialization (automatic on server start)</span>
                    <span class="step-arrow">→</span>
                    <span class="step" id="step-api">2. Enter API keys (Settings tab)</span>
                    <span class="step-arrow">→</span>
                    <span class="step" id="step-symbols">3. Select coins (Symbol tab)</span>
                    <span class="step-arrow">→</span>
                    <span class="step" id="step-load">4. Wait for candle load to complete</span>
                    <span class="step-arrow">→</span>
                    <span class="step" id="step-trade">5. Click Start Trading</span>
                </div>
                <div class="workflow-help">
                    💡 After trading starts: 3 strategies (Strategy-A/Strategy-B/Strategy-C) monitor the selected coins every 10 seconds,
                    entering/closing automatically when conditions are met<br>
                    🛡️ Leverage/margin summary when starting live trading (Shadow OFF) <strong>Confirmation Modal</strong> must be approved to start.
                    If this is your first time, verify thoroughly in Shadow Mode before switching to live trading.
                </div>
            </div>

            <section id="view-dashboard" class="view active">
                <div class="view-header">
                    <h2>Dashboard <span id="status-badge" class="status-badge">Idle</span></h2>
                </div>

                <div class="kpi-row">
                    <div class="kpi-card kpi-balance">
                        <div class="kpi-label">Balance</div>
                        <div id="usdt-balance" class="kpi-value">$0.00</div>
                        <div class="kpi-sub">Available: <span id="account-equity">$0.00</span></div>
                        <div class="kpi-icon">💰</div>
                    </div>
                    <div class="kpi-card kpi-profit">
                        <div class="kpi-label">Cumulative P&L</div>
                        <div id="cumulative-pnl" class="kpi-value">+$0.00</div>
                        <div class="kpi-sub">Total <span id="total-trades">0</span> Trades</div>
                        <div class="kpi-icon">📈</div>
                    </div>
                    <div class="kpi-card kpi-roi">
                        <div class="kpi-label">Cumulative ROI</div>
                        <div id="cumulative-roi" class="kpi-value">+0.00%</div>
                        <div class="kpi-sub">Win Rate: <span id="win-rate">0.0%</span></div>
                        <div class="kpi-icon">%</div>
                    </div>
                    <div class="kpi-card kpi-positions">
                        <div class="kpi-label">Position</div>
                        <div id="position-count-display" class="kpi-value">0</div>
                        <div class="kpi-sub">Order: <span id="order-count-display">0</span></div>
                        <div class="kpi-icon">📊</div>
                    </div>
                </div>

                <div class="dashboard-panel">
                    <div class="panel-header">
                        <h3>📊 Daily Balance Change</h3>
                        <div style="display:flex; gap:8px; align-items:center;">
                            <span id="chart-baseline-info" class="panel-sub" 
                                  style="font-size:12px; color:#7d8aa0;">
                                Baseline Balance: <span id="chart-start-balance" style="color:#fff; font-weight:600;">-</span>
                                · Change: <span id="chart-balance-change" style="font-weight:600;">-</span>
                            </span>
                            <button id="btn-reset-baseline" class="btn-mini"
                                    style="font-size:11px; padding:4px 10px; cursor:pointer;
                                           background:#223047; color:#7d8aa0; border:1px solid #2a3a52;
                                           border-radius:4px;"
                                    title="Set current balance as the new baseline">
                                🔄 Reset Baseline
                            </button>
                        </div>
                    </div>
                    <canvas id="chart-canvas" width="900" height="240"></canvas>
                </div>

                <div class="dashboard-panel">
                    <div class="panel-header">
                        <h3>📈 Market Trend</h3>
                        <span id="market-updated" class="panel-sub">Updated: -</span>
                    </div>
                    <div class="market-cards-grid">
                        <div class="market-card">
                            <div class="card-label">BTC / ETH</div>
                            <div class="card-row">
                                <span class="coin-icon">₿</span>
                                <span id="btc-price" class="card-price-inline">-</span>
                                <span id="btc-change" class="card-change-inline">-</span>
                            </div>
                            <div id="btc-range" class="card-sub">-</div>
                            <div class="card-row">
                                <span class="coin-icon">Ξ</span>
                                <span id="eth-price" class="card-price-inline">-</span>
                                <span id="eth-change" class="card-change-inline">-</span>
                            </div>
                            <div id="eth-range" class="card-sub">-</div>
                        </div>
                        <div class="market-card">
                            <div class="card-label">Market Sentiment</div>
                            <div class="sentiment-bar">
                                <div id="sentiment-up-bar" class="sentiment-up" style="width:50%"></div>
                                <div id="sentiment-down-bar" class="sentiment-down" style="width:50%"></div>
                            </div>
                            <div>
                                <span id="up-count" class="up-ratio">-</span> Up /
                                <span id="down-count" class="down-ratio">-</span> Down
                            </div>
                            <div class="card-sub" id="sentiment-summary">Total -</div>
                            <div class="card-sub" id="avg-change">Avg Change: -</div>
                        </div>
                        <div class="market-card">
                            <div class="card-label">⚡ Market Volatility</div>
                            <div id="volatility-level" class="card-price">-</div>
                            <div class="volatility-bar-bg">
                                <div id="volatility-bar" class="volatility-bar"></div>
                            </div>
                            <div class="card-sub">avg <span id="volatility-value">-</span></div>
                            <div class="card-sub">Intraday Range: <span id="volatility-range">-</span></div>
                        </div>
                        <div class="market-card">
                            <div class="card-label">↕ Funding Rate</div>
                            <div class="card-sub">Avg <span id="avg-funding">-</span></div>
                            <div class="card-sub">High: <span id="top-funding">-</span></div>
                            <div class="card-sub">Low: <span id="bottom-funding">-</span></div>
                        </div>
                    </div>

                    <div class="dashboard-row">
                        <div class="top-panel">
                            <h4>↗ Top Gainers</h4>
                            <table class="data-table data-table-compact">
                                <tbody id="top-gainers-body"></tbody>
                            </table>
                        </div>
                        <div class="top-panel">
                            <h4>↘ Top Losers</h4>
                            <table class="data-table data-table-compact">
                                <tbody id="top-losers-body"></tbody>
                            </table>
                        </div>
                        <div class="top-panel">
                            <h4>📊 Top Volume</h4>
                            <table class="data-table data-table-compact">
                                <tbody id="top-volume-body"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>

            <section id="view-positions" class="view">
                <div class="view-header">
                    <h2>Position <span id="pos-count-badge">(0)</span></h2>
                    <div>
                        <button id="btn-sync-pos" class="btn btn-secondary">Sync</button>
                        <button id="btn-close-all" class="btn btn-danger">Close All</button>
                    </div>
                </div>
                <table class="data-table">
                    <thead><tr>
                        <th>Symbol</th><th>Direction</th><th>Qty</th><th>Leverage</th>
                        <th>Entry Price</th><th>Current Price</th><th>PNL</th><th>ROE</th>
                        <th>Split</th><th>Strategy</th><th>Entry Time</th><th>Action</th>
                    </tr></thead>
                    <tbody id="positions-body"></tbody>
                </table>
            </section>

            <section id="view-symbols" class="view">
                <div class="view-header">
                    <h2>Symbol Selection <span id="sym-count-badge">(Total - / Selected -)</span></h2>
                </div>
                <div class="toolbar">
                    <input id="symbol-search" type="text" placeholder="Search symbol...">
                    <select id="symbol-sort" class="symbol-sort-select" title="Sort By">
                        <option value="volume">By Turnover</option>
                        <option value="alpha">Alphabetical</option>
                        <option value="change">By Change %</option>
                    </select>
                    <label class="filter-toggle" title="Shows only symbols passing the price/volume filter (~526)">
                        <input type="checkbox" id="filter-toggle">
                        <span>Volume Filter</span>
                    </label>
                    <label class="filter-toggle" title="Additionally exclude the bottom 20 by volume (also works when a filter is applied)">
                        <input type="checkbox" id="exclude-bottom-toggle">
                        <span>Exclude Bottom 20</span>
                    </label>
                    <button id="btn-refresh-symbols" class="btn btn-success" 
                            title="Refetch the latest symbol list from Bitget">
                        🔄 Refresh
                    </button>
                    <button id="btn-select-all" class="btn btn-secondary">Select All</button>
                    <button id="btn-clear-all" class="btn btn-secondary">Deselect All</button>
                    <button id="btn-select-top20" class="btn btn-primary">Top 20 by Turnover</button>
                    <button id="btn-confirm-symbols" class="btn btn-primary">Save Selection</button>
                    <button id="btn-clear-saved-list" class="btn btn-danger"
                            title="Deletes only the saved coin list in config.json (other settings are kept)">Clear Saved List</button>
                </div>
                <div id="candle-load-progress" class="load-progress" style="display:none;">
                    <div class="progress-header">
                        <span id="progress-label">Loading candle data...</span>
                        <span id="progress-counter">0 / 0</span>
                    </div>
                    <div class="progress-bar-bg">
                        <div id="progress-bar-fill" class="progress-bar-fill"></div>
                    </div>
                    <div id="progress-current-symbol" class="progress-current">-</div>
                </div>
                <div class="symbols-grid" id="symbols-grid"></div>
            </section>

            <section id="view-records" class="view">
                <div class="view-header">
                    <h2>Trade Records</h2>
                    <div>
                        <select id="record-filter">
                            <option value="">All</option>
                            <option value="strategy:Breakout">Strategy-C</option>
                            <option value="strategy:MeanRevert">Strategy-B</option>
                            <option value="strategy:JaviDAIS">Strategy-A</option>
                            <option value="side:LONG">LONG</option>
                            <option value="side:SHORT">SHORT</option>
                            <option value="days:7">Last 7 Days</option>
                            <option value="days:30">Last 30 Days</option>
                        </select>
                        <button id="btn-delete-selected" class="btn btn-danger">Delete Selected</button>
                    </div>
                </div>
                <div class="stat-grid">
                    <div class="stat-card">
                        <div class="stat-label">Today's P&L</div>
                        <div id="stat-today-pnl" class="stat-value">-</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Cumulative P&L</div>
                        <div id="stat-total-pnl" class="stat-value">-</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Win Rate</div>
                        <div id="stat-win-rate" class="stat-value">-</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Avg ROE</div>
                        <div id="stat-avg-roe" class="stat-value">-</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Max Profit</div>
                        <div id="stat-max-profit" class="stat-value">-</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Max Loss</div>
                        <div id="stat-max-loss" class="stat-value">-</div>
                    </div>
                </div>
                <table class="data-table">
                    <thead><tr>
                        <th><input type="checkbox" id="rec-select-all"></th>
                        <th>Symbol</th><th>Direction</th><th>Strategy</th><th>TF</th>
                        <th>Entry Price</th><th>Liq. Price</th><th>Qty</th><th>PNL</th><th>ROE</th>
                        <th>Split</th><th>Close Time</th>
                    </tr></thead>
                    <tbody id="records-body"></tbody>
                </table>
            </section>

            <section id="view-settings" class="view">
                <h2>Settings</h2>

                <div class="settings-panel">
                    <h3>Bitget API</h3>
                    <label>Access Key
                        <input id="cfg-access-key" type="text" placeholder="Bitget Access Key">
                    </label>
                    <label>Secret Key
                        <input id="cfg-secret-key" type="password" placeholder="Bitget Secret Key">
                    </label>
                    <label>Passphrase
                        <input id="cfg-passphrase" type="password" placeholder="Bitget API Passphrase (required)">
                    </label>
                    <div class="inline-row">
                        <button id="btn-save-api-keys" class="btn btn-primary">Save</button>
                        <button id="btn-test-connection" class="btn btn-secondary">Test Connection</button>
                        <span id="connection-status" class="conn-status">-</span>
                    </div>
                    <button id="btn-signup-bitget" class="btn"
                            style="width:100%; margin-top:10px; background:linear-gradient(90deg,#00E0C7,#00B8D4); color:#062024; font-weight:700; border:none;">
                        Sign up for Bitget &nbsp;·&nbsp; Get 10% Trading Fee Discount
                    </button>
                    <p style="color:#7d8aa0; font-size:12px; margin:8px 2px 0;">
                        No Bitget account yet? Create one to receive your API keys.
                        Signing up through this button applies a 10% trading fee discount.
                    </p>
                </div>

                <div class="settings-panel">
                    <h3>💰 Investment Mode (Margin Ratio per Entry)</h3>
                    <p style="color:#7d8aa0; font-size:13px; line-height:1.6;">
                        Balance ÷ denominator = margin used per entry (USDT). 
                        The larger the denominator, the smaller each entry → safer.
                    </p>
                    <label class="checkbox-row">
                        <input type="checkbox" id="settings-inv-mode-toggle">
                        <span>Use Investment Mode (uncheck to use fixed LongUSDT/ShortUSDT)</span>
                    </label>
                    <div class="settings-mode-buttons">
                        <button class="settings-mode-btn" data-mode="AGGRESSIVE">
                            <div class="mode-icon">🔥</div>
                            <div class="mode-name">Aggressive</div>
                            <div class="mode-divisor">Balance ÷ 300</div>
                            <div class="mode-desc">Large profit + large risk</div>
                        </button>
                        <button class="settings-mode-btn active" data-mode="NORMAL">
                            <div class="mode-icon">⚖️</div>
                            <div class="mode-name">Normal</div>
                            <div class="mode-divisor">Balance ÷ 500</div>
                            <div class="mode-desc">Balanced operation (default)</div>
                        </button>
                        <button class="settings-mode-btn" data-mode="STABLE">
                            <div class="mode-icon">🛡️</div>
                            <div class="mode-name">Stable</div>
                            <div class="mode-divisor">Balance ÷ 700</div>
                            <div class="mode-desc">Safest, diversified investment</div>
                        </button>
                    </div>
                    <div class="settings-mode-preview" id="settings-mode-preview">
                        <div class="preview-row">
                            <span>Current Balance:</span>
                            <strong><span id="settings-mode-balance">0</span> USDT</strong>
                        </div>
                        <div class="preview-row">
                            <span>Margin per Entry:</span>
                            <strong><span id="settings-mode-margin">-</span> USDT</strong>
                        </div>
                        <div class="preview-help">
                            💡 With split entries you can go up to 6-8 splits, so breaking it into smaller pieces is safer.
                            <br>Based on 5-day live measurement: running at approx. 1/500 (Normal) yields +31% profit
                        </div>
                    </div>
                </div>

                <div class="settings-panel" id="telegram-panel" style="border-left:4px solid #2dd4bf;">
                    <h3 style="display:flex; align-items:center; gap:8px;">
                        📨 Telegram Notification
                        <span id="tg-status-badge" style="font-size:11px; padding:3px 10px; background:#1d2836; color:#7d8aa0; border-radius:12px;">OFF</span>
                    </h3>
                    <p style="color:#7d8aa0; font-size:13px; line-height:1.6;">
                        On the Dashboard, <strong>Balance · Equity · Cumulative P&L · Cumulative ROI · Win Rate · Open Positions</strong> to
                        Telegram. This is a notification-only feature, separate from the trading logic.
                    </p>
                    <label class="checkbox-row">
                        <input type="checkbox" id="tg-enabled"> Use Telegram Notifications
                    </label>
                    <label>Bot Token
                        <input id="tg-token" type="password" placeholder="e.g. 123456789:AAH... (issued by BotFather)" autocomplete="off">
                    </label>
                    <div id="tg-token-saved" style="font-size:12px; color:#8a9; margin:2px 0 8px 0;">-</div>
                    <label>Chat ID
                        <input id="tg-chat-id" type="text" placeholder="e.g. 123456789 (numeric)" autocomplete="off">
                    </label>
                    <label>Auto Report Interval (min)
                        <input id="tg-auto-min" type="number" min="0" max="1440" step="10" placeholder="0 = auto-send off">
                    </label>
                    <div style="font-size:11px; color:#5f6b7d; margin:2px 0 10px 0;">
                        0 = auto-send off · e.g. enter 60 to auto-send a report every hour (max 1440 min)
                    </div>
                    <div class="inline-row" style="flex-wrap:wrap; gap:8px;">
                        <button id="btn-tg-save" class="btn btn-primary">Save</button>
                        <button id="btn-tg-test" class="btn btn-secondary">Send Test</button>
                        <button id="btn-tg-report" class="btn btn-success">📊 Send Report Now</button>
                        <button id="btn-tg-guide" class="btn btn-secondary">❓ Telegram Setup Guide</button>
                        <span id="tg-status" class="conn-status">-</span>
                    </div>
                </div>

                <div class="settings-panel" id="tier-panel" style="border-left:4px solid #8b5cf6;">
                    <h3 style="display:flex; align-items:center; gap:8px;">
                        🏆 Large-cap Tier Preset
                        <span id="tier-status-badge" style="font-size:11px; padding:3px 10px; background:#1d2836; color:#7d8aa0; border-radius:12px;">OFF</span>
                    </h3>
                    <p style="color:#7d8aa0; font-size:13px; line-height:1.6;">
                        The current entry threshold is calibrated for high-volatility altcoins, so BTC/ETH/SOL/XRP cannot be entered.
                        Turning on this preset <strong>Automatically lowers the entry threshold for coins with top 24h turnover</strong>
                        Enables entries on large-cap coins as well. <strong style="color:#fbbf24;">Verification in Shadow Mode is recommended before turning this on.</strong>
                    </p>
                    <label class="checkbox-row">
                        <input type="checkbox" id="tier-enabled"> Use tier preset (OFF = identical to existing behavior)
                    </label>
                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px;">
                        <div style="padding:10px 14px; background:#111823; border-radius:6px;">
                            <div style="font-size:12px; color:#c9f; margin-bottom:6px;"><strong>Tier1 (BTC/ETH tier)</strong></div>
                            <label style="font-size:12px;">Top Turnover
                                <input id="tier1-topn" type="number" min="1" max="20" style="width:60px; margin:0 4px; padding:3px 6px; background:#0d1420; color:#fff; border:1px solid #2a3a52; border-radius:4px;">
                            </label><br>
                            <label style="font-size:12px;">Threshold multiplier
                                <input id="tier1-scale" type="number" min="0.05" max="1" step="0.05" style="width:70px; margin:0 4px; padding:3px 6px; background:#0d1420; color:#fff; border:1px solid #2a3a52; border-radius:4px;">
                            </label>
                            <div style="font-size:11px; color:#5f6b7d; margin-top:4px;">0.15 → 1h vol 8.2% ⇒ 1.23%</div>
                        </div>
                        <div style="padding:10px 14px; background:#111823; border-radius:6px;">
                            <div style="font-size:12px; color:#7cb7ff; margin-bottom:6px;"><strong>Tier2 (SOL/XRP/BNB tier)</strong></div>
                            <label style="font-size:12px;">Top Turnover
                                <input id="tier2-topn" type="number" min="2" max="100" style="width:60px; margin:0 4px; padding:3px 6px; background:#0d1420; color:#fff; border:1px solid #2a3a52; border-radius:4px;">
                            </label><br>
                            <label style="font-size:12px;">Threshold multiplier
                                <input id="tier2-scale" type="number" min="0.05" max="1" step="0.05" style="width:70px; margin:0 4px; padding:3px 6px; background:#0d1420; color:#fff; border:1px solid #2a3a52; border-radius:4px;">
                            </label>
                            <div style="font-size:11px; color:#5f6b7d; margin-top:4px;">0.35 → 1h vol 8.2% ⇒ 2.87%</div>
                        </div>
                    </div>
                    <div style="margin-top:10px; display:flex; gap:16px; flex-wrap:wrap; align-items:center;">
                        <label style="font-size:12px;">Threshold Lower Bound (%)
                            <input id="tier-floor" type="number" min="0.1" max="5" step="0.1" style="width:70px; margin:0 4px; padding:3px 6px; background:#0d1420; color:#fff; border:1px solid #2a3a52; border-radius:4px;">
                        </label>
                        <label style="font-size:12px;" title="Entry margin multiplier by tier (1.0 = no differentiation). Large-cap coins have good liquidity, so 1.5-2.0x can also be considered">
                            Margin Multiplier T1/T2/T3
                            <input id="tier1-mscale" type="number" min="0.1" max="3" step="0.1" style="width:56px; margin:0 2px; padding:3px 6px; background:#0d1420; color:#fff; border:1px solid #2a3a52; border-radius:4px;">
                            <input id="tier2-mscale" type="number" min="0.1" max="3" step="0.1" style="width:56px; margin:0 2px; padding:3px 6px; background:#0d1420; color:#fff; border:1px solid #2a3a52; border-radius:4px;">
                            <input id="tier3-mscale" type="number" min="0.1" max="3" step="0.1" style="width:56px; margin:0 2px; padding:3px 6px; background:#0d1420; color:#fff; border:1px solid #2a3a52; border-radius:4px;">
                        </label>
                    </div>
                    <div class="inline-row" style="margin-top:10px; flex-wrap:wrap; gap:8px;">
                        <button id="btn-tier-save" class="btn btn-primary">Save</button>
                        <button id="btn-tier-preview" class="btn btn-secondary">🔍 Tier Classification Preview</button>
                        <span id="tier-status" class="conn-status">-</span>
                    </div>
                    <div id="tier-preview-box" style="display:none; margin-top:10px; padding:10px 12px; background:#111823; border-radius:6px; font-size:12px; color:#93a1b7; line-height:1.7;"></div>
                </div>

                <div class="settings-panel">
                    <h3 style="display:flex; align-items:center; gap:8px;">
                        🎯 Entry Mode
                        <span id="entry-mode-current-badge" style="font-size:11px; padding:3px 10px; background:#0e3b34; color:#2dd4bf; border-radius:12px;">Loading…</span>
                    </h3>
                    <p style="color:#7d8aa0; font-size:13px; line-height:1.6;">
                        Select the entry evaluation method. Choosing either mode applies it immediately.
                    </p>
                    <div class="settings-mode-buttons" style="grid-template-columns: repeat(2, 1fr);">
                        <button class="settings-entry-mode-btn" data-entry-mode="javid_r">
                            <div class="mode-check">✓</div>
                            <div class="mode-icon">🎯</div>
                            <div class="mode-name">Conservative (single) mode</div>
                            <div class="mode-divisor">First Match Only</div>
                        </button>
                        <button class="settings-entry-mode-btn" data-entry-mode="multi">
                            <div class="mode-check">✓</div>
                            <div class="mode-icon">⚡</div>
                            <div class="mode-name">Multi Mode</div>
                            <div class="mode-divisor">Multi-strategy Rotation</div>
                        </button>
                    </div>
                    <div class="settings-mode-preview" id="settings-entry-mode-preview">
                        <div class="preview-help">
                            💡 <strong>Conservative (single) mode</strong>: Try only the first matching strategy per symbol.
                            Moves to the next symbol once the limit is reached (matches the javid_r records pattern, safety first).<br>
                            💡 <strong>Multi Mode</strong>: Try all strategies in rotation.
                            Multiple strategies can enter on the same symbol (for Shadow verification/aggressive operation).
                        </div>
                    </div>
                </div>

                <div class="settings-panel">
                    <h3 style="display:flex; align-items:center; gap:8px;">
                        📊 Leverage
                        <span id="leverage-current-badge" style="font-size:11px; padding:3px 10px; background:#0e3b34; color:#2dd4bf; border-radius:12px;">Loading…</span>
                    </h3>
                    <p style="color:#7d8aa0; font-size:13px; line-height:1.6;">
                        Global leverage applied to every new entry (Long and Short, all strategies). Default is 5x.
                    </p>
                    <div class="settings-mode-buttons" style="grid-template-columns: repeat(4, 1fr);">
                        <button class="settings-leverage-btn" data-leverage="3">
                            <div class="mode-check">✓</div>
                            <div class="mode-name">3x</div>
                            <div class="mode-desc">Lowest risk</div>
                        </button>
                        <button class="settings-leverage-btn" data-leverage="5">
                            <div class="mode-check">✓</div>
                            <div class="mode-name">5x</div>
                            <div class="mode-desc">Default</div>
                        </button>
                        <button class="settings-leverage-btn" data-leverage="10">
                            <div class="mode-check">✓</div>
                            <div class="mode-name">10x</div>
                            <div class="mode-desc">Higher risk</div>
                        </button>
                        <button class="settings-leverage-btn" data-leverage="15">
                            <div class="mode-check">✓</div>
                            <div class="mode-name">15x</div>
                            <div class="mode-desc">Highest risk</div>
                        </button>
                    </div>
                    <div class="settings-mode-preview">
                        <div class="preview-help">
                            💡 Higher leverage increases both potential profit and potential loss (and liquidation risk) by the same multiple. Applies to the next new entry; open positions keep their existing leverage.
                        </div>
                    </div>
                </div>

                
                <div class="settings-panel">
                    <h3>Common</h3>
                    <label class="checkbox-row">
                        <input id="cfg-two-way" type="checkbox"> Two-way Trading (Hedge Mode)
                    </label>
                    <label class="checkbox-row">
                        <input id="cfg-fixed-trade" type="checkbox"> Fixed Trade Amount Mode
                    </label>
                    <label class="checkbox-row">
                        <input id="cfg-profit-close-filter" type="checkbox"> Re-entry Filter After Take Profit
                    </label>
                </div>
                <div class="settings-panel strategy-panel strategy-preset-card" data-strategy="Breakout" id="card-strategy-Breakout">
                    <div class="strategy-preset-header" data-strategy-toggle="Breakout">
                        <div style="display:flex; align-items:center; gap:10px;">
                            <span class="arrow">▶</span>
                            <h3 style="margin:0;">Strategy-C (BO)</h3>
                            </div>
                        <label class="toggle-switch" onclick="event.stopPropagation()">
                            <input type="checkbox" data-toggle="Breakout" checked>
                            <span class="slider"></span>
                        </label>
                    </div>
                    <div class="strategy-preset-body">
                        <div class="strategy-preset-content">
                            <div class="strategy-form" id="form-breakout"></div>
                            <button class="btn btn-primary" data-save="Breakout" style="margin-top:12px;">Save Strategy-C</button>
                        </div>
                    </div>
                </div>
                <div class="settings-panel strategy-panel strategy-preset-card" data-strategy="MeanRevert" id="card-strategy-MeanRevert">
                    <div class="strategy-preset-header" data-strategy-toggle="MeanRevert">
                        <div style="display:flex; align-items:center; gap:10px;">
                            <span class="arrow">▶</span>
                            <h3 style="margin:0;">Strategy-B (MR)</h3>
                            </div>
                        <label class="toggle-switch" onclick="event.stopPropagation()">
                            <input type="checkbox" data-toggle="MeanRevert" checked>
                            <span class="slider"></span>
                        </label>
                    </div>
                    <div class="strategy-preset-body">
                        <div class="strategy-preset-content">
                            <div class="strategy-form" id="form-mean-revert"></div>
                            <button class="btn btn-primary" data-save="MeanRevert" style="margin-top:12px;">Save Strategy-B</button>
                        </div>
                    </div>
                </div>
                <div class="settings-panel strategy-panel strategy-preset-card" data-strategy="JaviDAIS" id="card-strategy-JaviDAIS">
                    <div class="strategy-preset-header" data-strategy-toggle="JaviDAIS">
                        <div style="display:flex; align-items:center; gap:10px;">
                            <span class="arrow">▶</span>
                            <h3 style="margin:0;">Strategy-A (UA)</h3>
                            </div>
                        <label class="toggle-switch" onclick="event.stopPropagation()">
                            <input type="checkbox" data-toggle="JaviDAIS" checked>
                            <span class="slider"></span>
                        </label>
                    </div>
                    <div class="strategy-preset-body">
                        <div class="strategy-preset-content">
                            <div class="strategy-form" id="form-javid-ais"></div>
                            <button class="btn btn-primary" data-save="JaviDAIS" style="margin-top:12px;">Save Strategy-A</button>
                        </div>
                    </div>
                </div>
            </section>
            <section id="view-logs" class="view">
                <div class="view-header">
                    <h2>Logs</h2>
                    <div>
                        <select id="log-category">
                            <option value="">All</option>
                            <option value="DATA">DATA</option>
                            <option value="INFO">INFO</option>
                            <option value="TRADE">TRADE</option>
                        </select>
                        <button id="btn-refresh-logs" class="btn btn-secondary">Refresh</button>
                        <span id="log-count" class="log-count">0</span>
                    </div>
                </div>
                <div id="log-container" class="log-container"></div>
            </section>
        </main>
        
        <aside class="dock">
            <div class="dock-title">Operations Console</div>
            <div class="shadow-toggle-container">
                <label class="shadow-toggle-label">
                    <input type="checkbox" id="shadow-toggle">
                    <span class="shadow-toggle-slider"></span>
                    <span class="shadow-toggle-text">
                        🪞 Shadow Mode<br>
                        <small id="shadow-status-text">Live Trading Mode</small>
                    </span>
                </label>
                <div class="shadow-help">
                    Records signals only, no real orders.<br>
                    Verified with live market data + virtual trading.
                </div>
                <div class="shadow-virtual-balance">
                    <label>Virtual Balance (USDT):</label>
                    <div style="display:flex; gap:6px; align-items:center;">
                        <input type="number" id="shadow-virtual-balance-input"
                               step="100" value="2000" min="0" max="10000000"
                               style="flex:1;">
                        <button id="btn-save-virtual-balance" class="btn btn-primary"
                                style="font-size:12px; padding:6px 12px; white-space:nowrap;">Save</button>
                    </div>
                    <small id="virtual-balance-status">Starting balance for Shadow Mode. Save to apply.</small>
                </div>
                <button id="btn-diagnose" class="btn btn-secondary" 
                        style="width:100%; margin-top:8px; font-size:12px;">
                    🔍 Run Connection Diagnostics
                </button>
                <a href="/api/quick-status" target="_blank" 
                   class="btn btn-secondary" 
                   style="display:block; width:100%; margin-top:6px; font-size:12px; text-align:center; text-decoration:none;">
                    📊 View Status/Logs
                </a>
                <a href="/api/export/all" target="_blank"
                   class="btn btn-secondary"
                   style="display:block; width:100%; margin-top:6px; font-size:12px; text-align:center; text-decoration:none;">
                    📦 Export Data
                </a>
            </div>
            <div class="investment-mode-container">
                <label class="investment-mode-label">
                    <input type="checkbox" id="investment-mode-toggle">
                    <span class="shadow-toggle-slider"></span>
                    <span class="shadow-toggle-text">
                        💰 Use Investment Mode<br>
                        <small id="investment-mode-status">OFF (use fixed amount)</small>
                    </span>
                </label>
                <div class="mode-buttons" id="mode-buttons">
                    <button class="mode-btn" data-mode="AGGRESSIVE" 
                            title="Balance ÷ 300 = margin per entry / most aggressive, large profit + large loss">
                        🔥 Aggressive<br><small>1/300</small>
                    </button>
                    <button class="mode-btn active" data-mode="NORMAL" 
                            title="Balance ÷ 500 = margin per entry / balanced operation">
                        ⚖️ Normal<br><small>1/500</small>
                    </button>
                    <button class="mode-btn" data-mode="STABLE" 
                            title="Balance ÷ 700 = margin per entry / safest, small profit">
                        🛡️ Stable<br><small>1/700</small>
                    </button>
                </div>
                <div class="mode-info" id="mode-info">
                    <div class="mode-info-row">
                        <span>Current Balance:</span>
                        <strong><span id="mode-balance">0</span> USDT</strong>
                    </div>
                    <div class="mode-info-row">
                        <span>Margin per Entry:</span>
                        <strong><span id="mode-margin">0</span> USDT</strong>
                    </div>
                    <div class="mode-info-help">
                        💡 The larger the denominator, the smaller the amount used per entry → safer
                    </div>
                </div>
            </div>
            <div class="config-import-container">
                <label class="import-label">
                    📥 Apply Original config.json
                </label>
                <input type="file" id="config-import-file" accept=".json" style="display:none">
                <button id="config-import-btn" class="import-btn">Choose File...</button>
                <div class="import-help">Apply CoinFutureBot.exe's config.json as-is (excluding API keys)</div>
            </div>
        </aside>
    </div>
</div>
<script src="/static/app.js"></script>
</body>
</html>