/**
 * Binance Exact Layout CSS
 * 完全参考 Binance 布局重构
 */

/* ============================================
   CSS Variables - Binance Dark Theme
   ============================================ */
:root {
    --bn-bg-primary: #0B0E11;
    --bn-bg-secondary: #181A20;
    --bn-bg-tertiary: #1E2329;
    --bn-bg-input: #2B3139;
    --bn-bg-hover: rgba(255, 255, 255, 0.04);
    --bn-bg-active: rgba(240, 185, 11, 0.1);
    
    --bn-text-primary: #EAECEF;
    --bn-text-secondary: #B7BDC6;
    --bn-text-muted: #848E9C;
    --bn-text-dark: #5E6673;
    
    --bn-primary: #F0B90B;
    --bn-buy: #0ECB81;
    --bn-buy-bg: rgba(14, 203, 129, 0.15);
    --bn-sell: #F6465D;
    --bn-sell-bg: rgba(246, 70, 93, 0.15);
    
    --bn-border: #2B3139;
    --bn-border-light: rgba(255, 255, 255, 0.08);
    
    --bn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --bn-font-mono: "SF Mono", Monaco, "Inconsolata", "Fira Code", monospace;
    
    --bn-header-height: 48px;
    --bn-orderbook-width: 280px;
    --bn-market-width: 280px;
}

/* ============================================
   Base Reset
   ============================================ */
body.binance-exact {
    background: var(--bn-bg-primary) !important;
    color: var(--bn-text-primary) !important;
    font-family: var(--bn-font) !important;
    font-size: 12px !important;
    overflow: hidden !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   Main Layout - 3 Column Grid
   ============================================ */
.binance-exact .body-content {
    display: grid !important;
    grid-template-columns: var(--bn-orderbook-width) 1fr var(--bn-market-width) !important;
    grid-template-rows: 1fr !important;
    height: calc(100vh - var(--bn-header-height)) !important;
    max-height: calc(100vh - var(--bn-header-height)) !important;
    background: var(--bn-border) !important;
    gap: 1px !important;
    overflow: hidden !important;
}

/* Ensure all direct children have full height */
.binance-exact .body-content > * {
    min-height: 0 !important;
    max-height: 100% !important;
}

/* Hide old layout elements */
.binance-exact .mexc-sidebar-left,
.binance-exact .mexc-center,
.binance-exact .mexc-sidebar-right,
.binance-exact .mexc-ticker,
.binance-exact .mexc-chart-tabs,
.binance-exact .mexc-chart-content,
.binance-exact .mexc-orderbook,
.binance-exact .mexc-trade-form-container,
.binance-exact .binance-trade-section,
.binance-exact .place-order_container,
.binance-exact .account-box {
    display: none !important;
}

/* ============================================
   LEFT COLUMN - Order Book
   ============================================ */
.binance-exact .bn-orderbook-panel {
    background: var(--bn-bg-secondary) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
}

/* Order Book Content Wrapper - ensures proper flex distribution */
.binance-exact .bn-ob-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Order Book Header */
.binance-exact .bn-ob-header {
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--bn-border) !important;
    flex-shrink: 0 !important;
}

.binance-exact .bn-ob-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--bn-text-primary) !important;
}

.binance-exact .bn-ob-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* View mode buttons */
.binance-exact .bn-ob-view-btns {
    display: flex !important;
    gap: 4px !important;
}

.binance-exact .bn-ob-view-btn {
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    padding: 3px !important;
}

.binance-exact .bn-ob-view-btn.active {
    background: var(--bn-bg-tertiary) !important;
}

.binance-exact .bn-ob-view-btn .line {
    height: 2px !important;
    border-radius: 1px !important;
}

.binance-exact .bn-ob-view-btn .line-red { background: var(--bn-sell) !important; }
.binance-exact .bn-ob-view-btn .line-green { background: var(--bn-buy) !important; }

/* Precision selector */
.binance-exact .bn-ob-precision {
    background: var(--bn-bg-tertiary) !important;
    border: none !important;
    color: var(--bn-text-secondary) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    cursor: pointer !important;
}

/* Column Headers */
.binance-exact .bn-ob-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    padding: 8px 12px !important;
    color: var(--bn-text-muted) !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
}

.binance-exact .bn-ob-cols span:nth-child(2),
.binance-exact .bn-ob-cols span:nth-child(3) {
    text-align: right !important;
}

/* Asks Section (Red - Sell) - Display from bottom */
.binance-exact .bn-ob-asks {
    flex: 1 1 50% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

.binance-exact .bn-ob-asks table {
    width: 100% !important;
}

/* Spread / Current Price */
.binance-exact .bn-ob-spread {
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-top: 1px solid var(--bn-border-light) !important;
    border-bottom: 1px solid var(--bn-border-light) !important;
    background: var(--bn-bg-primary) !important;
    flex-shrink: 0 !important;
}

.binance-exact .bn-ob-spread-price {
    font-size: 18px !important;
    font-weight: 600 !important;
    font-family: var(--bn-font-mono) !important;
}

.binance-exact .bn-ob-spread-price.up { color: var(--bn-buy) !important; }
.binance-exact .bn-ob-spread-price.down { color: var(--bn-sell) !important; }

.binance-exact .bn-ob-spread-price .arrow {
    font-size: 12px !important;
    margin-left: 4px !important;
}

.binance-exact .bn-ob-spread-usd {
    color: var(--bn-text-muted) !important;
    font-size: 12px !important;
}

/* Bids Section (Green - Buy) */
.binance-exact .bn-ob-bids {
    flex: 1 1 50% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Order Book Tables */
.binance-exact .bn-ob-asks table,
.binance-exact .bn-ob-bids table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.binance-exact .bn-ob-asks tbody,
.binance-exact .bn-ob-bids tbody {
    display: block !important;
}

/* Order Row - Using tr from backend */
.binance-exact .bn-ob-asks tr,
.binance-exact .bn-ob-bids tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    padding: 3px 12px !important;
    position: relative !important;
    cursor: pointer !important;
    font-family: var(--bn-font-mono) !important;
    font-size: 12px !important;
}

.binance-exact .bn-ob-asks tr:hover,
.binance-exact .bn-ob-bids tr:hover {
    background: var(--bn-bg-hover) !important;
}

/* Sell orders (asks) - Red */
.binance-exact .bn-ob-asks tr td:first-child,
.binance-exact .bn-ob-asks tr td.sell_price,
.binance-exact .bn-ob-asks tr td.negative,
.binance-exact .bn-ob-asks tr td.coin {
    color: var(--bn-sell) !important;
}

/* Buy orders (bids) - Green */
.binance-exact .bn-ob-bids tr td:first-child,
.binance-exact .bn-ob-bids tr td.buy_price,
.binance-exact .bn-ob-bids tr td.positive,
.binance-exact .bn-ob-bids tr td.coin {
    color: var(--bn-buy) !important;
}

/* Override .positive and .negative inside specific areas */
.binance-exact .bn-ob-asks .positive {
    color: var(--bn-sell) !important;
}

.binance-exact .bn-ob-bids .negative {
    color: var(--bn-buy) !important;
}

.binance-exact .bn-ob-asks tr td,
.binance-exact .bn-ob-bids tr td {
    color: var(--bn-text-secondary) !important;
}

.binance-exact .bn-ob-asks tr td:nth-child(2),
.binance-exact .bn-ob-asks tr td:nth-child(3),
.binance-exact .bn-ob-bids tr td:nth-child(2),
.binance-exact .bn-ob-bids tr td:nth-child(3) {
    text-align: right !important;
}

/* Legacy class support */
.binance-exact .bn-ob-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    padding: 2px 12px !important;
    position: relative !important;
    cursor: pointer !important;
    font-family: var(--bn-font-mono) !important;
    font-size: 12px !important;
}

.binance-exact .bn-ob-row:hover {
    background: var(--bn-bg-hover) !important;
}

.binance-exact .bn-ob-row .price { }
.binance-exact .bn-ob-row.ask .price { color: var(--bn-sell) !important; }
.binance-exact .bn-ob-row.bid .price { color: var(--bn-buy) !important; }

.binance-exact .bn-ob-row .amount,
.binance-exact .bn-ob-row .total {
    text-align: right !important;
    color: var(--bn-text-secondary) !important;
}

/* Depth bar */
.binance-exact .bn-ob-row .depth {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    pointer-events: none !important;
    opacity: 0.15 !important;
}

.binance-exact .bn-ob-row.ask .depth { background: var(--bn-sell) !important; }
.binance-exact .bn-ob-row.bid .depth { background: var(--bn-buy) !important; }

/* Depth Summary Bar */
.binance-exact .bn-ob-depth-bar {
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
}

.binance-exact .bn-ob-depth-bar .bar {
    flex: 1 !important;
    height: 4px !important;
    background: var(--bn-sell) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

.binance-exact .bn-ob-depth-bar .bar-fill {
    height: 100% !important;
    background: var(--bn-buy) !important;
}

.binance-exact .bn-ob-depth-bar .bid-pct { color: var(--bn-buy) !important; }
.binance-exact .bn-ob-depth-bar .ask-pct { color: var(--bn-sell) !important; }

/* ============================================
   CENTER COLUMN - Chart + Trade Form
   ============================================ */
.binance-exact .bn-center-panel {
    background: var(--bn-bg-secondary) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Ticker Bar */
.binance-exact .bn-ticker {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    gap: 12px !important;
    border-bottom: 1px solid var(--bn-border) !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    min-height: 48px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    background: var(--bn-bg-secondary) !important;
}

.binance-exact .bn-ticker-pair {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.binance-exact .bn-ticker-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
}

.binance-exact .bn-ticker-symbol {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--bn-text-primary) !important;
}

.binance-exact .bn-ticker-price {
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: var(--bn-font-mono) !important;
}

.binance-exact .bn-ticker-price.up { color: var(--bn-buy) !important; }
.binance-exact .bn-ticker-price.down { color: var(--bn-sell) !important; }

.binance-exact .bn-ticker-sub {
    font-size: 12px !important;
    color: var(--bn-text-muted) !important;
}

.binance-exact .bn-ticker-stats {
    display: flex !important;
    gap: 12px !important;
    flex-shrink: 1 !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

.binance-exact .bn-ticker-stat {
    display: flex !important;
    flex-direction: column !important;
    min-width: 50px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.binance-exact .bn-ticker-stat-label {
    font-size: 9px !important;
    color: var(--bn-text-muted) !important;
    white-space: nowrap !important;
}

.binance-exact .bn-ticker-stat-value {
    font-size: 11px !important;
    color: var(--bn-text-primary) !important;
    font-family: var(--bn-font-mono) !important;
    white-space: nowrap !important;
}

/* Chart Tabs */
.binance-exact .bn-chart-tabs {
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    border-bottom: 1px solid var(--bn-border) !important;
    background: var(--bn-bg-secondary) !important;
}

.binance-exact .bn-chart-tabs button {
    padding: 10px 12px !important;
    background: none !important;
    border: none !important;
    color: var(--bn-text-muted) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    position: relative !important;
}

.binance-exact .bn-chart-tabs button.active {
    color: var(--bn-text-primary) !important;
}

.binance-exact .bn-chart-tabs button.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: var(--bn-primary) !important;
}

.binance-exact .bn-chart-tabs .timeframes {
    display: flex !important;
    gap: 4px !important;
    margin-left: auto !important;
}

.binance-exact .bn-chart-tabs .timeframes button {
    padding: 6px 10px !important;
    font-size: 12px !important;
}

/* Chart Container */
.binance-exact .bn-chart-container {
    flex: 0 0 auto !important;
    height: 280px !important;
    min-height: 200px !important;
    position: relative !important;
    background: var(--bn-bg-primary) !important;
}

.binance-exact .bn-chart-container iframe,
.binance-exact .bn-chart-container .tradingview-widget-container {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* ============================================
   TRADE FORM SECTION (Below Chart)
   ============================================ */
.binance-exact .bn-trade-section {
    border-top: 1px solid var(--bn-border) !important;
    background: var(--bn-bg-secondary) !important;
    flex-shrink: 0 !important;
}

/* Trade Type Tabs */
.binance-exact .bn-trade-type-tabs {
    display: flex !important;
    padding: 0 16px !important;
    border-bottom: 1px solid var(--bn-border) !important;
}

.binance-exact .bn-trade-type-tabs button {
    padding: 10px 16px !important;
    background: none !important;
    border: none !important;
    color: var(--bn-text-muted) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    position: relative !important;
}

.binance-exact .bn-trade-type-tabs button.active {
    color: var(--bn-text-primary) !important;
}

.binance-exact .bn-trade-type-tabs button.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 16px !important;
    right: 16px !important;
    height: 2px !important;
    background: var(--bn-primary) !important;
}

/* Side-by-Side Forms */
.binance-exact .bn-trade-forms {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    padding: 16px !important;
}

/* Individual Form */
.binance-exact .bn-trade-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* Order Type Row */
.binance-exact .bn-order-type-row {
    display: flex !important;
    gap: 16px !important;
    margin-bottom: 4px !important;
}

.binance-exact .bn-order-type-row button {
    background: none !important;
    border: none !important;
    color: var(--bn-text-muted) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.binance-exact .bn-order-type-row button.active {
    color: var(--bn-text-primary) !important;
}

/* Input Group */
.binance-exact .bn-input-group {
    display: flex !important;
    align-items: center !important;
    background: var(--bn-bg-input) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 4px !important;
    height: 40px !important;
}

.binance-exact .bn-input-group:focus-within {
    border-color: var(--bn-primary) !important;
}

.binance-exact .bn-input-group label {
    padding: 0 12px !important;
    color: var(--bn-text-muted) !important;
    font-size: 12px !important;
    min-width: 50px !important;
}

.binance-exact .bn-input-group input {
    flex: 1 !important;
    background: none !important;
    border: none !important;
    color: var(--bn-text-primary) !important;
    font-size: 14px !important;
    padding: 0 !important;
    outline: none !important;
    font-family: var(--bn-font-mono) !important;
    text-align: right !important;
}

.binance-exact .bn-input-group .suffix {
    padding: 0 8px !important;
    color: var(--bn-text-secondary) !important;
    font-size: 12px !important;
}

.binance-exact .bn-input-group .bbo-btn {
    background: var(--bn-bg-tertiary) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 4px !important;
    color: var(--bn-text-secondary) !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
    margin-right: 8px !important;
    cursor: pointer !important;
}

/* Slider */
.binance-exact .bn-slider {
    position: relative !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
}

.binance-exact .bn-slider-track {
    flex: 1 !important;
    height: 2px !important;
    background: var(--bn-bg-tertiary) !important;
    position: relative !important;
}

.binance-exact .bn-slider-dots {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: space-between !important;
}

.binance-exact .bn-slider-dots .dot {
    width: 8px !important;
    height: 8px !important;
    background: var(--bn-bg-tertiary) !important;
    border: 2px solid var(--bn-bg-secondary) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}

/* TP/SL */
.binance-exact .bn-tpsl {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.binance-exact .bn-tpsl input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
}

.binance-exact .bn-tpsl label {
    color: var(--bn-text-secondary) !important;
    font-size: 12px !important;
}

/* Balance Row */
.binance-exact .bn-balance-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 12px !important;
}

.binance-exact .bn-balance-row .label {
    color: var(--bn-text-muted) !important;
}

.binance-exact .bn-balance-row .label a {
    color: var(--bn-text-muted) !important;
    text-decoration: underline !important;
}

.binance-exact .bn-balance-row .value {
    color: var(--bn-text-secondary) !important;
}

/* Trade Buttons */
.binance-exact .bn-trade-btn {
    width: 100% !important;
    padding: 12px !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    text-align: center !important;
    display: block !important;
}

.binance-exact .bn-trade-btn.buy {
    background: var(--bn-buy) !important;
    color: #fff !important;
}

.binance-exact .bn-trade-btn.sell {
    background: var(--bn-sell) !important;
    color: #fff !important;
}

/* ============================================
   RIGHT COLUMN - Market List + Trades
   ============================================ */
.binance-exact .bn-market-panel {
    background: var(--bn-bg-secondary) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
}

/* Market Search */
.binance-exact .bn-market-search {
    padding: 12px !important;
    position: relative !important;
}

.binance-exact .bn-market-search input {
    width: 100% !important;
    padding: 10px 12px 10px 36px !important;
    background: var(--bn-bg-input) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 6px !important;
    color: var(--bn-text-primary) !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.binance-exact .bn-market-search input:focus {
    border-color: var(--bn-primary) !important;
    box-shadow: 0 0 0 2px rgba(240, 185, 11, 0.1) !important;
}

.binance-exact .bn-market-search input::placeholder {
    color: var(--bn-text-dark) !important;
}

.binance-exact .bn-market-search::before {
    content: '🔍' !important;
    position: absolute !important;
    left: 22px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
}

/* Market Tabs */
.binance-exact .bn-market-tabs {
    display: flex !important;
    padding: 0 8px !important;
    gap: 2px !important;
    border-bottom: 1px solid var(--bn-border) !important;
    overflow-x: auto !important;
    background: var(--bn-bg-primary) !important;
}

.binance-exact .bn-market-tabs::-webkit-scrollbar {
    height: 2px !important;
}

.binance-exact .bn-market-tabs button {
    padding: 10px 12px !important;
    background: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: var(--bn-text-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.binance-exact .bn-market-tabs button:hover {
    color: var(--bn-text-primary) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.binance-exact .bn-market-tabs button.active {
    color: var(--bn-primary) !important;
    border-bottom-color: var(--bn-primary) !important;
}

.binance-exact .bn-market-tabs button:active {
    transform: scale(0.95) !important;
}

/* Market Header */
.binance-exact .bn-market-header {
    display: grid !important;
    grid-template-columns: 1fr 80px 70px !important;
    padding: 8px 12px !important;
    color: var(--bn-text-muted) !important;
    font-size: 11px !important;
}

/* Market List */
.binance-exact .bn-market-list {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 150px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Market Row - Note: display must NOT use !important for filtering to work */
.binance-exact .bn-market-row {
    display: grid;
    grid-template-columns: 1fr 80px 70px !important;
    padding: 8px 12px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border-left: 2px solid transparent !important;
    position: relative !important;
    z-index: 2 !important;
    transition: all 0.15s ease !important;
}

/* Hidden class for filtered rows */
.binance-exact .bn-market-row.bn-hidden {
    display: none !important;
}

.binance-exact .bn-market-row:hover {
    background: var(--bn-bg-hover) !important;
    border-left-color: rgba(240, 185, 11, 0.5) !important;
}

.binance-exact .bn-market-row:active {
    background: rgba(240, 185, 11, 0.1) !important;
    transform: scale(0.99) !important;
}

.binance-exact .bn-market-row.active {
    background: var(--bn-bg-active) !important;
    border-left-color: var(--bn-primary) !important;
}

.binance-exact .bn-market-row .pair-cell {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.binance-exact .bn-market-row .star {
    color: var(--bn-text-dark) !important;
    font-size: 10px !important;
}

.binance-exact .bn-market-row .star.active {
    color: var(--bn-primary) !important;
}

.binance-exact .bn-market-row .pair-name {
    font-size: 12px !important;
    color: var(--bn-text-primary) !important;
}

.binance-exact .bn-market-row .pair-name .quote {
    color: var(--bn-text-muted) !important;
}

.binance-exact .bn-market-row .leverage {
    font-size: 9px !important;
    padding: 1px 3px !important;
    background: var(--bn-primary) !important;
    color: #000 !important;
    border-radius: 2px !important;
    margin-left: 4px !important;
}

.binance-exact .bn-market-row .price-cell,
.binance-exact .bn-market-row .change-cell {
    text-align: right !important;
    font-size: 12px !important;
    font-family: var(--bn-font-mono) !important;
}

.binance-exact .bn-market-row .price-cell.up,
.binance-exact .bn-market-row .change-cell.up { color: var(--bn-buy) !important; }
.binance-exact .bn-market-row .price-cell.down,
.binance-exact .bn-market-row .change-cell.down { color: var(--bn-sell) !important; }

/* Market Trades Section */
.binance-exact .bn-trades-section {
    border-top: 1px solid var(--bn-border) !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 200px !important;
}

.binance-exact .bn-trades-header {
    display: flex !important;
    padding: 8px 12px !important;
    gap: 16px !important;
    border-bottom: 1px solid var(--bn-border-light) !important;
}

.binance-exact .bn-trades-header button {
    background: none !important;
    border: none !important;
    color: var(--bn-text-muted) !important;
    font-size: 12px !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.binance-exact .bn-trades-header button.active {
    color: var(--bn-text-primary) !important;
}

.binance-exact .bn-trades-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr 70px !important;
    padding: 8px 12px !important;
    color: var(--bn-text-muted) !important;
    font-size: 11px !important;
}

.binance-exact .bn-trades-list {
    flex: 1 !important;
    overflow-y: auto !important;
}

.binance-exact .bn-trades-list table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.binance-exact .bn-trades-list tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    padding: 3px 12px !important;
    font-family: var(--bn-font-mono) !important;
    font-size: 12px !important;
}

.binance-exact .bn-trades-list tbody tr td {
    color: var(--bn-text-secondary) !important;
}

.binance-exact .bn-trades-list tbody tr td.positive,
.binance-exact .bn-trades-list tbody tr td.buy_price {
    color: var(--bn-buy) !important;
}

.binance-exact .bn-trades-list tbody tr td.negative,
.binance-exact .bn-trades-list tbody tr td.sell_price {
    color: var(--bn-sell) !important;
}

.binance-exact .bn-trades-list tbody tr td:nth-child(2),
.binance-exact .bn-trades-list tbody tr td:nth-child(3) {
    text-align: right !important;
}

.binance-exact .bn-trade-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 70px !important;
    padding: 3px 12px !important;
    font-size: 12px !important;
    font-family: var(--bn-font-mono) !important;
}

.binance-exact .bn-trade-row .price.up { color: var(--bn-buy) !important; }
.binance-exact .bn-trade-row .price.down { color: var(--bn-sell) !important; }

.binance-exact .bn-trade-row .amount,
.binance-exact .bn-trade-row .time {
    text-align: right !important;
    color: var(--bn-text-secondary) !important;
}

/* Top Movers Section */
.binance-exact .bn-movers-section {
    border-top: 1px solid var(--bn-border) !important;
    min-height: 100px !important;
}

.binance-exact .bn-movers-header {
    display: flex !important;
    padding: 8px 12px !important;
    gap: 4px !important;
    align-items: center !important;
}

.binance-exact .bn-movers-header .title {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--bn-text-primary) !important;
    margin-right: 8px !important;
}

.binance-exact .bn-movers-tabs {
    display: flex !important;
    gap: 8px !important;
}

.binance-exact .bn-movers-tabs button {
    background: none !important;
    border: none !important;
    color: var(--bn-text-muted) !important;
    font-size: 11px !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

.binance-exact .bn-movers-tabs button.active {
    background: var(--bn-bg-tertiary) !important;
    color: var(--bn-text-primary) !important;
}

/* ============================================
   BOTTOM BAR - Orders Tabs
   ============================================ */
.binance-exact .bn-orders-bar {
    background: var(--bn-bg-secondary) !important;
    border-top: 1px solid var(--bn-border) !important;
    grid-column: 1 / -1 !important;
    padding: 0 16px !important;
}

.binance-exact .bn-orders-tabs {
    display: flex !important;
    gap: 4px !important;
}

.binance-exact .bn-orders-tabs button {
    padding: 10px 16px !important;
    background: none !important;
    border: none !important;
    color: var(--bn-text-muted) !important;
    font-size: 12px !important;
    cursor: pointer !important;
}

.binance-exact .bn-orders-tabs button.active {
    color: var(--bn-text-primary) !important;
}

.binance-exact .bn-orders-tabs .count {
    background: var(--bn-bg-tertiary) !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    margin-left: 4px !important;
}

/* ============================================
   Scrollbar Styles
   ============================================ */
.binance-exact ::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
}

.binance-exact ::-webkit-scrollbar-track {
    background: transparent !important;
}

.binance-exact ::-webkit-scrollbar-thumb {
    background: var(--bn-text-dark) !important;
    border-radius: 2px !important;
}

/* ============================================
   MOBILE RESPONSIVE - Tablet (≤1024px)
   ============================================ */
@media (max-width: 1024px) {
    .binance-exact .body-content {
        grid-template-columns: var(--bn-orderbook-width) 1fr !important;
    }
    
    .binance-exact .bn-market-panel {
        display: none !important;
    }
}

/* ============================================
   MOBILE RESPONSIVE - Phone (≤768px)
   ============================================ */
@media (max-width: 768px) {
    :root {
        --bn-header-height: 56px;
    }
    
    /* Allow body scroll on mobile - CRITICAL for scrolling */
    html,
    body,
    html.binance-exact,
    body.binance-exact {
        overflow: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
        position: relative !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Wrapper should not block scroll */
    .binance-exact .wrapper,
    .binance-exact .main-content,
    .binance-exact {
        overflow: visible !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    /* Single Column Layout - Scrollable */
    .binance-exact .body-content {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        overflow: visible !important;
        padding-bottom: 140px !important;
        grid-template-columns: 1fr !important;
    }
    
    /* Hide desktop panels */
    .binance-exact .bn-market-panel,
    .binance-exact .bn-orders-bar {
        display: none !important;
    }
    
    /* Mobile Market Selector - Show */
    .binance-exact .mobile-market-selector {
        display: flex !important;
        order: 0 !important;
        padding: 8px 12px !important;
        background: var(--bn-bg-secondary) !important;
        border-bottom: 1px solid var(--bn-border) !important;
    }
    
    /* Center Panel - Mobile Chart */
    .binance-exact .bn-center-panel {
        order: 1 !important;
        flex: none !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* Order Book - Compact Mobile */
    .binance-exact .bn-orderbook-panel {
        order: 2 !important;
        height: auto !important;
        max-height: none !important;
        flex-shrink: 0 !important;
    }
    
    .binance-exact .bn-ob-header {
        padding: 10px 12px !important;
    }
    
    .binance-exact .bn-ob-title {
        font-size: 13px !important;
    }
    
    .binance-exact .bn-ob-content {
        height: auto !important;
        max-height: none !important;
    }
    
    .binance-exact .bn-ob-asks,
    .binance-exact .bn-ob-bids {
        flex: none !important;
        height: auto !important;
        max-height: 200px !important;
        overflow-y: auto !important;
    }
    
    .binance-exact .bn-ob-spread {
        padding: 8px 12px !important;
    }
    
    .binance-exact .bn-ob-spread-price {
        font-size: 18px !important;
    }
    
    .binance-exact .bn-ob-depth-bar {
        display: none !important;
    }
    
    /* Ticker - Compact Mobile */
    .binance-exact .bn-ticker {
        padding: 8px 12px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    
    .binance-exact .bn-ticker-symbol {
        font-size: 14px !important;
    }
    
    .binance-exact .bn-ticker-price {
        font-size: 14px !important;
    }
    
    .binance-exact .bn-ticker-stats {
        display: none !important;
    }
    
    /* Chart Tabs - Scrollable */
    .binance-exact .bn-chart-tabs {
        padding: 0 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .binance-exact .bn-chart-tabs button {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    .binance-exact .bn-chart-tabs .timeframes {
        display: none !important;
    }
    
    /* Chart Container - Fixed Height */
    .binance-exact .bn-chart-container {
        height: 300px !important;
        min-height: 280px !important;
    }
    
    /* Trade Form - Stack Vertically */
    .binance-exact .bn-trade-section {
        order: 3 !important;
    }
    
    .binance-exact .bn-trade-forms {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 12px !important;
    }
    
    .binance-exact .bn-trade-form {
        padding: 12px !important;
        background: var(--bn-bg-tertiary) !important;
        border-radius: 8px !important;
    }
    
    .binance-exact .bn-input-group {
        height: 36px !important;
    }
    
    .binance-exact .bn-trade-btn {
        padding: 10px !important;
        font-size: 13px !important;
    }
}

/* ============================================
   MOBILE MARKET SELECTOR
   ============================================ */
.binance-exact .mobile-market-selector {
    display: none;
}

@media (max-width: 768px) {
    .binance-exact .mobile-market-selector {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        background: var(--bn-bg-secondary) !important;
        border-bottom: 1px solid var(--bn-border) !important;
    }
    
    .binance-exact .mobile-market-selector .market-btn {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: var(--bn-bg-tertiary) !important;
        border: 1px solid var(--bn-border) !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        color: var(--bn-text-primary) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        flex: 1 !important;
    }
    
    .binance-exact .mobile-market-selector .market-btn i {
        color: var(--bn-text-muted) !important;
        font-size: 12px !important;
    }
    
    .binance-exact .mobile-market-selector .market-btn:active {
        background: var(--bn-bg-hover) !important;
    }
    
    .binance-exact .mobile-market-selector .search-btn {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--bn-bg-tertiary) !important;
        border: 1px solid var(--bn-border) !important;
        border-radius: 8px !important;
        color: var(--bn-text-muted) !important;
        cursor: pointer !important;
    }
    
    .binance-exact .mobile-market-selector .search-btn:active {
        background: var(--bn-bg-hover) !important;
    }
}

/* ============================================
   MOBILE MARKET LIST MODAL
   ============================================ */
.binance-exact .mobile-market-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bn-bg-primary);
    z-index: 2000;
    flex-direction: column;
}

.binance-exact .mobile-market-modal.show {
    display: flex !important;
}

.binance-exact .mobile-market-modal .modal-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bn-border);
    gap: 12px;
}

.binance-exact .mobile-market-modal .modal-header .back-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--bn-text-primary);
    font-size: 18px;
    cursor: pointer;
}

.binance-exact .mobile-market-modal .modal-header .search-input {
    flex: 1;
    background: var(--bn-bg-tertiary);
    border: 1px solid var(--bn-border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--bn-text-primary);
    font-size: 14px;
}

.binance-exact .mobile-market-modal .modal-header .search-input::placeholder {
    color: var(--bn-text-muted);
}

.binance-exact .mobile-market-modal .market-tabs {
    display: flex;
    padding: 0 12px;
    gap: 4px;
    border-bottom: 1px solid var(--bn-border);
    overflow-x: auto;
}

.binance-exact .mobile-market-modal .market-tabs button {
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--bn-text-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.binance-exact .mobile-market-modal .market-tabs button.active {
    color: var(--bn-primary);
    border-bottom-color: var(--bn-primary);
}

.binance-exact .mobile-market-modal .market-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.binance-exact .mobile-market-modal .market-list-header {
    display: grid;
    grid-template-columns: 1fr 80px 70px;
    padding: 8px 16px;
    color: var(--bn-text-muted);
    font-size: 11px;
    border-bottom: 1px solid var(--bn-border);
    position: sticky;
    top: 0;
    background: var(--bn-bg-primary);
}

.binance-exact .mobile-market-modal .market-item {
    display: grid;
    grid-template-columns: 1fr 80px 70px;
    padding: 12px 16px;
    text-decoration: none;
    border-bottom: 1px solid var(--bn-border-light);
    cursor: pointer;
}

.binance-exact .mobile-market-modal .market-item:active {
    background: var(--bn-bg-hover);
}

.binance-exact .mobile-market-modal .market-item .pair-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--bn-text-primary);
}

.binance-exact .mobile-market-modal .market-item .pair-name .quote {
    color: var(--bn-text-muted);
}

.binance-exact .mobile-market-modal .market-item .price {
    text-align: right;
    font-size: 13px;
    font-family: var(--bn-font-mono);
    color: var(--bn-text-primary);
}

.binance-exact .mobile-market-modal .market-item .change {
    text-align: right;
    font-size: 13px;
    font-family: var(--bn-font-mono);
}

.binance-exact .mobile-market-modal .market-item .change.up {
    color: var(--bn-buy);
}

.binance-exact .mobile-market-modal .market-item .change.down {
    color: var(--bn-sell);
}

/* ============================================
   MOBILE RESPONSIVE - Small Phone (≤480px)
   ============================================ */
@media (max-width: 480px) {
    /* More Compact Order Book */
    .binance-exact .bn-orderbook-panel {
        max-height: 320px !important;
    }
    
    .binance-exact .bn-ob-content {
        max-height: 240px !important;
    }
    
    .binance-exact .bn-ob-asks,
    .binance-exact .bn-ob-bids {
        max-height: 100px !important;
    }
    
    .binance-exact .bn-ob-asks tr,
    .binance-exact .bn-ob-bids tr {
        padding: 2px 10px !important;
        font-size: 11px !important;
    }
    
    /* Chart - Smaller */
    .binance-exact .bn-chart-container {
        height: 220px !important;
        min-height: 200px !important;
    }
    
    /* Ticker - Minimal */
    .binance-exact .bn-ticker {
        padding: 6px 10px !important;
    }
    
    .binance-exact .bn-ticker-pair {
        gap: 6px !important;
    }
    
    .binance-exact .bn-ticker-symbol {
        font-size: 13px !important;
    }
    
    .binance-exact .bn-ticker-sub {
        display: none !important;
    }
}

/* ============================================
   MOBILE BOTTOM NAVIGATION
   ============================================ */
.binance-exact .mobile-bottom-nav {
    display: none;
}

.binance-exact .mobile-trade-buttons {
    display: none;
}

@media (max-width: 768px) {
    /* Mobile Bottom Navigation Bar */
    .binance-exact .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--bn-bg-secondary) !important;
        border-top: 1px solid var(--bn-border) !important;
        padding: 6px 0 !important;
        padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
        z-index: 1000 !important;
        justify-content: space-around !important;
    }
    
    .binance-exact .mobile-bottom-nav .nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        color: var(--bn-text-muted) !important;
        text-decoration: none !important;
        font-size: 10px !important;
        padding: 4px 16px !important;
        transition: color 0.2s ease !important;
    }
    
    .binance-exact .mobile-bottom-nav .nav-item i {
        font-size: 20px !important;
    }
    
    .binance-exact .mobile-bottom-nav .nav-item.active,
    .binance-exact .mobile-bottom-nav .nav-item:hover {
        color: var(--bn-primary) !important;
    }
    
    .binance-exact .mobile-bottom-nav .nav-item.hot i {
        color: #f97316 !important;
    }
    
    .binance-exact .mobile-bottom-nav .nav-item.hot:hover i,
    .binance-exact .mobile-bottom-nav .nav-item.hot.active i {
        color: #fb923c !important;
    }
    
    /* Mobile Trade Buttons - Above Nav */
    .binance-exact .mobile-trade-buttons {
        display: flex !important;
        position: fixed !important;
        bottom: 56px !important;
        left: 0 !important;
        right: 0 !important;
        padding: 8px 12px !important;
        background: var(--bn-bg-primary) !important;
        border-top: 1px solid var(--bn-border) !important;
        gap: 10px !important;
        z-index: 999 !important;
    }
    
    .binance-exact .mobile-trade-buttons .btn-buy,
    .binance-exact .mobile-trade-buttons .btn-sell {
        flex: 1 !important;
        padding: 12px !important;
        border: none !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #fff !important;
        cursor: pointer !important;
    }
    
    .binance-exact .mobile-trade-buttons .btn-buy {
        background: var(--bn-buy) !important;
    }
    
    .binance-exact .mobile-trade-buttons .btn-sell {
        background: var(--bn-sell) !important;
    }
}