/* ==========================================================================
   DEXARB PRO — Institutional & Tier-1 FinTech Design System
   Eliminating "AI Slop" | Inspired by Linear, Apple HIG, Bloomberg & TradingView
   ========================================================================== */

:root {
    /* --- True Obsidian & Deep Neutral Palette --- */
    --bg-page: #08090d !important;
    --bg-card: #0d0f17 !important;
    --bg-card-alt: #111420 !important;
    --bg-input: #131722 !important;
    --bg-hover: rgba(255, 255, 255, 0.04) !important;
    --bg-active: rgba(255, 255, 255, 0.08) !important;

    /* Subtle Hairline Borders */
    --border: rgba(255, 255, 255, 0.07) !important;
    --border-light: rgba(255, 255, 255, 0.12) !important;
    --border-subtle: rgba(255, 255, 255, 0.04) !important;

    /* High-Legibility Financial Typography */
    --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --font-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;

    --text-white: #f8fafc !important;
    --text-bright: #ffffff !important;
    --text-gray: #94a3b8 !important;
    --text-dim: #64748b !important;
    --text-muted: #475569 !important;

    /* Balanced Semantic Directional Colors (Zero Neon Radioactive Glow) */
    --neon-green: #10b981 !important; /* Emerald */
    --neon-green-bg: rgba(16, 185, 129, 0.1) !important;
    --neon-green-border: rgba(16, 185, 129, 0.25) !important;

    --neon-red: #f43f5e !important; /* Rose */
    --neon-red-bg: rgba(244, 63, 94, 0.1) !important;
    --neon-red-border: rgba(244, 63, 94, 0.25) !important;

    --neon-orange: #f59e0b !important; /* Amber */
    --neon-cyan: #38bdf8 !important; /* Sky */
    --neon-cyan-bg: rgba(56, 189, 248, 0.1) !important;
    --neon-cyan-border: rgba(56, 189, 248, 0.25) !important;

    --brand-primary: #3b82f6 !important;
    --brand-primary-hover: #2563eb !important;

    /* Tight Precision Radii */
    --radius-sm: 4px !important;
    --radius-md: 6px !important;
    --radius-lg: 8px !important;
}

/* Base Body & Global Styles */
body {
    background-color: var(--bg-page) !important;
    color: var(--text-white) !important;
    font-family: var(--font-sans) !important;
    letter-spacing: -0.011em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Enforce tabular monospace figures on all numeric financial indicators */
.font-num, 
[id*="Val"], 
[id*="Value"], 
[id*="Price"], 
[id*="Net"], 
[id*="Apr"], 
[id*="Rate"], 
.leg-quote-price,
.s-metric-val,
.sig-cell-val {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.02em !important;
}

/* ==========================================================================
   1. TOP NAVIGATION HEADER
   ========================================================================== */
header {
    height: 48px !important;
    background: #090a0f !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 16px !important;
}

.brand-logo {
    gap: 9px !important;
}

.brand-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: #ffffff !important;
}

.brand-pro-tag {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}

.hdr-brand-sep {
    height: 18px !important;
    width: 1px !important;
    background: var(--border) !important;
    margin: 0 6px !important;
}

/* Sleek Apple-style Segmented Navigation Control */
.hdr-nav-modes {
    background: #111420 !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    padding: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
}

.hdr-nav-btn {
    height: 26px !important;
    padding: 0 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-dim) !important;
    transition: all 0.12s ease !important;
}

.hdr-nav-btn:hover {
    color: var(--text-white) !important;
    background: var(--bg-hover) !important;
}

.hdr-nav-btn.active {
    background: #1c2130 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
    font-weight: 600 !important;
}

.hdr-nav-dot.active {
    background: #10b981 !important;
    box-shadow: none !important;
}

.hdr-nav-badge.badge-someday,
.hdr-nav-badge.badge-soon {
    display: none !important; /* Hide amateur badges */
}

/* User & Cabinet Button */
.btn-wallet-connect {
    background: #141824 !important;
    border: 1px solid var(--border-light) !important;
    color: #e2e8f0 !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: 5px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.btn-wallet-connect:hover {
    background: #1c2233 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.btn-wallet-connected {
    background: #111520 !important;
    border: 1px solid var(--border) !important;
    color: #e2e8f0 !important;
    border-radius: 5px !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
}

.status-online-dot {
    background: #10b981 !important;
    box-shadow: none !important;
}

/* ==========================================================================
   2. WORKSPACE GRID & CARD PANELS
   ========================================================================== */
body .workspace-grid,
.workspace-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(460px, 1fr) !important;
    width: 100% !important;
    height: calc(100vh - 48px) !important;
    padding: 6px !important;
    gap: 6px !important;
    background: var(--bg-page) !important;
    box-sizing: border-box !important;
}

.card-panel {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   3. UNIFIED PAIR HEADER & ASSET SELECTOR
   ========================================================================== */
.spreader-pair-card-box {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 10px 14px 8px 14px !important;
}

.pair-card-top-row {
    margin-bottom: 8px !important;
}

.pair-coin-avatar {
    width: 26px !important;
    height: 26px !important;
    background: #181d2a !important;
    border: 1px solid var(--border-light) !important;
    color: #cbd5e1 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
}

.pair-coin-symbol {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
}

.pair-cat-pill, .pair-type-pill {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border) !important;
    color: #94a3b8 !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.pair-search-trigger-badge {
    background: #141824 !important;
    border: 1px solid var(--border) !important;
    color: #64748b !important;
    font-size: 10px !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
}

.pair-subtitle-line {
    font-size: 11px !important;
    color: #64748b !important;
    margin-top: 2px !important;
}

.pair-subtitle-line b {
    color: #cbd5e1 !important;
}

.pair-icon-btn {
    background: #141824 !important;
    border: 1px solid var(--border) !important;
    color: #94a3b8 !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 5px !important;
    transition: all 0.12s ease !important;
}

.pair-icon-btn:hover {
    background: #1c2233 !important;
    color: #ffffff !important;
    border-color: var(--border-light) !important;
}

/* ==========================================================================
   4. ARBITRAGE LEGS BRIDGE (Long DEX vs Short DEX)
   ========================================================================== */
.spreader-legs-bridge-grid {
    gap: 6px !important;
    margin-bottom: 6px !important;
}

body .spreader-leg-box {
    background: #0b0d14 !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 5px !important;
    padding: 6px 12px !important;
    transition: border-color 0.15s ease !important;
}

body .spreader-leg-box:hover {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.spreader-leg-badge.badge-long {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    letter-spacing: 0.03em !important;
}

.spreader-leg-badge.badge-short {
    background: rgba(244, 63, 94, 0.1) !important;
    color: #f43f5e !important;
    border: 1px solid rgba(244, 63, 94, 0.25) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    letter-spacing: 0.03em !important;
}

.spreader-leg-selector {
    color: #f1f5f9 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

.leg-quote-price {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #f8fafc !important;
}

.leg-quote-funding {
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   5. INSTITUTIONAL KPI METRIC STRIP (Monolithic Bar, No Individual Boxes)
   ========================================================================== */
body .spreader-metrics-strip {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    background: #0a0c12 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin-top: 6px !important;
    overflow: hidden !important;
}

body .spreader-metrics-strip .s-metric-col,
body .spreader-metrics-strip .s-metric-col.col-in-net,
body .spreader-metrics-strip .s-metric-col.col-out-net,
body .spreader-metrics-strip .s-metric-col.col-net-apr {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

body .spreader-metrics-strip .s-metric-col:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body .spreader-metrics-strip .s-line-pill {
    display: none !important; /* Eliminate bulky dots */
}

body .spreader-metrics-strip .s-metric-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
}

body .spreader-metrics-strip .s-metric-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    color: #64748b !important;
    text-transform: uppercase !important;
}

body .spreader-metrics-strip .s-metric-val {
    font-size: 21px !important;
    font-weight: 700 !important;
    font-family: var(--font-mono) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
    margin: 2px 0 !important;
}

body .spreader-metrics-strip .s-metric-val.txt-green {
    color: #10b981 !important;
}

body .spreader-metrics-strip .s-metric-val.txt-red {
    color: #f43f5e !important;
}

body .spreader-metrics-strip .s-metric-val.txt-cyan {
    color: #38bdf8 !important;
}

body .spreader-metrics-strip .s-metric-sub {
    font-size: 10px !important;
    color: #475569 !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   6. CHART TOOLBAR & TIME CONTROLS
   ========================================================================== */
.spreader-subtabs-row {
    background: #090a0f !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 4px 10px !important;
}

.spreader-chart-tabs {
    background: #111420 !important;
    border: 1px solid var(--border) !important;
    border-radius: 5px !important;
    padding: 2px !important;
    gap: 2px !important;
}

.sp-tab-btn {
    height: 23px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #71717a !important;
    border-radius: 3px !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.12s ease !important;
}

.sp-tab-btn:hover {
    color: #ffffff !important;
}

.sp-tab-btn.active {
    background: #1c2130 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.unified-chart-toolbar button,
.chart-timeframe-selector,
.chart-type-selector {
    background: #111420 !important;
    border: 1px solid var(--border) !important;
    color: #94a3b8 !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    height: 24px !important;
}

.chart-annotation-pill {
    background: #111420 !important;
    border: 1px solid var(--border) !important;
    font-size: 10px !important;
    font-family: var(--font-mono) !important;
    border-radius: 3px !important;
    padding: 1px 6px !important;
}

.chart-annotation-pill.ann-max { color: #10b981 !important; border-color: rgba(16, 185, 129, 0.25) !important; }
.chart-annotation-pill.ann-min { color: #f43f5e !important; border-color: rgba(244, 63, 94, 0.25) !important; }

/* ==========================================================================
   7. RIGHT RADAR & SIGNALS SCANNER (Card 2)
   ========================================================================== */
.card2-top-bar {
    height: 38px !important;
    background: #090a0f !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 8px !important;
}

.card2-tabs-group {
    gap: 4px !important;
}

.c2-tab {
    height: 27px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 0 10px !important;
    color: #64748b !important;
    border-radius: 4px !important;
    transition: all 0.12s ease !important;
}

.c2-tab:hover {
    color: #e2e8f0 !important;
    background: var(--bg-hover) !important;
}

.c2-tab.active {
    color: #ffffff !important;
    background: #141824 !important;
    border: 1px solid var(--border) !important;
}

.spreads-count-badge,
.signals-count-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 0 5px !important;
    border-radius: 3px !important;
    font-family: var(--font-mono) !important;
}

.c2-tab.active .signals-count-badge,
.c2-tab.active .spreads-count-badge {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

/* Secondary Radar Filters Strip */
body .signals-filters-bar,
body .spreads-sub-filters-row {
    background: #090b10 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body .sig-cat-btn,
body .sig-tier-btn,
body .spread-cat-chip,
body .c2-sub-chip {
    background: #111420 !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    color: #848e9c !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    height: 24px !important;
    transition: all 0.12s ease !important;
}

body .sig-cat-btn:hover,
body .sig-tier-btn:hover,
body .spread-cat-chip:hover,
body .c2-sub-chip:hover {
    color: #ffffff !important;
    border-color: var(--border-light) !important;
}

body .sig-cat-btn.active,
body .sig-tier-btn.active,
body .spread-cat-chip.active,
body .c2-sub-chip.active {
    background: #1e2436 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   8. SIGNAL CARDS (Bloomberg / Linear Style — Clean Left Line)
   ========================================================================== */
body .sig-card {
    background: #0b0d14 !important;
    border: 1px solid rgba(255, 255, 255, 0.065) !important;
    border-radius: 5px !important;
    padding: 9px 12px !important;
    margin-bottom: 6px !important;
    box-shadow: none !important; /* Zero Neon Glow */
    transition: all 0.14s ease !important;
    position: relative !important;
}

body .sig-card:hover {
    background: #0f121c !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body .sig-card.tier-1 {
    border-left: 3px solid #10b981 !important;
    background: #0b0d14 !important;
}

body .sig-card.tier-2 {
    border-left: 3px solid #f59e0b !important;
    background: #0b0d14 !important;
}

body .sig-card.tier-3 {
    border-left: 3px solid #38bdf8 !important;
    background: #0b0d14 !important;
}

.sig-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
}

.sig-head-btn.sig-btn-chart {
    background: #141824 !important;
    border: 1px solid var(--border) !important;
    color: #94a3b8 !important;
    border-radius: 4px !important;
    padding: 2px 7px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
}

.sig-head-btn.sig-btn-chart:hover {
    background: #1c2233 !important;
    color: #ffffff !important;
}

.sig-symbol {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
}

.sig-route-arrow {
    color: #64748b !important;
    font-size: 11px !important;
    font-family: var(--font-mono) !important;
}

.sig-tier-badge {
    border-radius: 3px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 1px 5px !important;
    letter-spacing: 0.04em !important;
    box-shadow: none !important;
}

.sig-tier-badge.tier-1 {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.sig-tier-badge.tier-2 {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

.sig-tier-badge.tier-3 {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

.sig-ttl-badge {
    font-size: 10px !important;
    color: #64748b !important;
    font-family: var(--font-mono) !important;
}

.sig-btn-mute {
    color: #475569 !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    transition: color 0.12s ease !important;
}

.sig-btn-mute:hover {
    color: #ef4444 !important;
}

/* 4-Cell Signal Data Grid inside Card */
body .sig-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    margin-top: 6px !important;
}

body .sig-metric-cell {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

body .sig-cell-label {
    font-size: 8.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

body .sig-cell-val {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    font-family: var(--font-mono) !important;
    color: #e2e8f0 !important;
}

body .sig-cell-val.highlight-green {
    color: #10b981 !important;
}

body .sig-cell-val.highlight-net {
    color: #10b981 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   USER-REQUESTED OPTIMIZATIONS:
   1. Maximum Chart Real Estate (Vertical & Horizontal Expansion)
   2. Remove Yellow-Marked Subtitles & Redundant Lines
   3. Fix Right-Corner Settings Gear Icon (Ensure 100% Visibility)
   ========================================================================== */

/* 1. Eliminate Empty 3rd Column (Fix Giant Black Void on Right) */
body .workspace-grid,
.workspace-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(460px, 1fr) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    height: calc(100vh - 48px) !important;
    padding: 6px !important;
    gap: 6px !important;
    overflow: hidden !important;
}

/* 2. Compact Card 1 Header */
body .spreader-pair-card-box {
    padding: 5px 10px 4px 10px !important;
}

body .pair-card-top-row {
    margin-bottom: 3px !important;
}

body .pair-coin-avatar {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
}

body .pair-coin-symbol {
    font-size: 15px !important;
}

/* Remove verbose metadata line to reclaim vertical height */
body .pair-subtitle-line {
    display: none !important;
}

/* Ultra-Compact Legs Bridge */
body .spreader-legs-bridge-grid {
    gap: 4px !important;
    margin-bottom: 3px !important;
}

body .spreader-leg-box {
    padding: 3px 8px !important;
    border-radius: 4px !important;
}

body .spreader-leg-selector {
    font-size: 11px !important;
}

body .leg-quote-price {
    font-size: 11.5px !important;
}

body .leg-quote-funding {
    font-size: 10px !important;
}

/* Ultra-Compact KPI Ribbon */
body .spreader-metrics-strip {
    margin-top: 3px !important;
    border-radius: 5px !important;
}

body .spreader-metrics-strip .s-metric-col {
    padding: 4px 10px !important;
    gap: 0px !important;
}

body .spreader-metrics-strip .s-metric-label {
    font-size: 8.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
}

body .spreader-metrics-strip .s-metric-val {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin: 1px 0 !important;
}

/* HIDE THE 3 YELLOW-MARKED SUBTITLES TO MAXIMIZE CHART HEIGHT */
body .spreader-metrics-strip .s-metric-sub {
    display: none !important;
}

/* Compact Chart Subtabs & Toolbar */
body .spreader-subtabs-row {
    padding: 2px 8px !important;
}

body .sp-tab-btn {
    height: 20px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
}

body .unified-chart-toolbar button,
body .chart-timeframe-selector,
body .chart-type-selector {
    height: 21px !important;
    font-size: 10px !important;
}

/* 3. CARD 2 TOP BAR & REORGANIZED TOOLS & TACTILE COMMISSION SWITCH */
body .card2-top-bar {
    height: 38px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    background: #090a0f !important;
    border-bottom: 1px solid #1c2233 !important;
    overflow: visible !important;
}

body .card2-tabs-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
}

body .c2-tab {
    height: 27px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 0 10px !important;
    gap: 5px !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

/* Tools inside Filter Bar Row 1 */
body .card2-tools-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

body .sig-tool-pill,
body .spread-tool-icon {
    width: 26px !important;
    height: 25px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 5px !important;
    background: #11151f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

body .sig-tool-pill:hover,
body .spread-tool-icon:hover {
    background: #192030 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
}

body .sig-tool-pill:active,
body .spread-tool-icon:active {
    transform: scale(0.96) !important;
}

body #btnSigMinHeld {
    width: auto !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.08) !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
}

body #btnSigMinHeld:hover {
    background: rgba(56, 189, 248, 0.16) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
    color: #7dd3fc !important;
}

/* =========================================================================
   APPLE HIG & PRO FINTECH: TACTILE COMMISSION TOGGLE SWITCH
   ========================================================================= */
body .fee-toggle-switch {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 3px 9px 3px 10px !important;
    height: 26px !important;
    border-radius: 13px !important;
    background: #111520 !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    user-select: none !important;
    outline: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

body .fee-toggle-switch:hover {
    background: #171e2e !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-1px) !important;
}

body .fee-toggle-switch:active {
    transform: scale(0.97) !important;
}

body .fee-toggle-switch .fts-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
    color: inherit !important;
}

body .fee-toggle-switch .fts-track {
    position: relative !important;
    display: inline-block !important;
    width: 27px !important;
    height: 15px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    vertical-align: middle !important;
}

body .fee-toggle-switch .fts-thumb {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    background: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease !important;
}

body .fee-toggle-switch .fts-status {
    font-family: var(--font-mono, "SF Mono", monospace) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    color: #64748b !important;
    min-width: 26px !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
}

/* ACTIVE STATE (When fee is enabled) */
body .fee-toggle-switch.active {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 1px 6px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body .fee-toggle-switch.active:hover {
    background: rgba(16, 185, 129, 0.18) !important;
    border-color: rgba(16, 185, 129, 0.65) !important;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body .fee-toggle-switch.active .fts-track {
    background: #10b981 !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body .fee-toggle-switch.active .fts-thumb {
    transform: translateX(12px) !important;
    background: #ffffff !important;
}

body .fee-toggle-switch.active .fts-status {
    color: #10b981 !important;
}



/* =========================================================================
   8. PRO FINTECH FUNDING & BACKTEST ANALYTICS (ANTI-AI-SLOP)
   ========================================================================= */

body #paneFunding {
    background: transparent !important;
}

body .funding-pane-wrap {
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* --- Top Bar: Route, Timeframe, Mode --- */
body .bt-top-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: #0c1018 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
}

body .bt-top-row,
body .bt-bottom-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
}

body .bt-route-badge {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #e2e8f0 !important;
    background: #121722 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    letter-spacing: 0.2px !important;
    max-width: 65% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body .bt-route-led {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #38bdf8 !important;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.5) !important;
    animation: pulseCyan 2s infinite ease-in-out !important;
    flex-shrink: 0 !important;
}

body .bt-top-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
}

/* Apple-style Segmented Controls for Range and Mode */
body .bt-range-group,
body .bt-mode-toggle:not([style*="display: none"]) {
    display: inline-flex !important;
    background: #111520 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 5px !important;
    padding: 2px !important;
    gap: 2px !important;
}

body #btSingleLegToggle[style*="display: none"] {
    display: none !important;
}

body .bt-range-btn,
body .bt-mode-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #8c93a4 !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
}

body .bt-range-btn:hover,
body .bt-mode-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

body .bt-range-btn.active,
body .bt-mode-btn.active {
    background: #1e2638 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
    font-weight: 700 !important;
}

body #btLegLongBtn.active {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

body #btLegShortBtn.active {
    background: rgba(244, 63, 94, 0.15) !important;
    color: #f43f5e !important;
    border-color: rgba(244, 63, 94, 0.35) !important;
}

body .bt-refresh-btn {
    background: #111520 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    width: 25px !important;
    height: 25px !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

body .bt-refresh-btn:hover {
    background: #192030 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
}

body .bt-refresh-btn:hover svg {
    transform: rotate(90deg) !important;
}

/* --- Structured Chart Navigation & Parameter Controls --- */
body .bt-chart-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: #0c1018 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
}

body .bt-subtabs-group {
    display: flex !important;
    align-items: center !important;
    background: #111520 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 5px !important;
    padding: 2px !important;
    gap: 2px !important;
    width: 100% !important;
}

body .bt-subtab-btn {
    flex: 1 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #8c93a4 !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    padding: 3.5px 6px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    white-space: nowrap !important;
}

body .bt-subtab-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

body .bt-subtab-btn.active {
    background: #1e2638 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
    font-weight: 700 !important;
}

body .bt-subtab-btn svg {
    opacity: 0.8 !important;
}

body .bt-subtab-btn.active svg {
    opacity: 1 !important;
    stroke: #38bdf8 !important;
}

body .bt-inputs-inline {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-top: 4px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    gap: 10px !important;
}

body .bt-input-field-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body .bt-input-label {
    font-size: 9.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

body .bt-input-box {
    display: inline-flex !important;
    align-items: center !important;
    background: #111520 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    height: 23px !important;
    transition: all 0.15s ease !important;
}

body .bt-input-box:focus-within {
    border-color: rgba(56, 189, 248, 0.5) !important;
    background: #151b29 !important;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25) !important;
}

body .bt-input-prefix, 
body .bt-input-suffix {
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

body .bt-compact-input {
    background: transparent !important;
    border: none !important;
    color: #f1f5f9 !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 0 3px !important;
    width: 64px !important;
    outline: none !important;
}

/* =========================================================================
   MONOLITHIC 2x2 INSTITUTIONAL METRICS SLAB (NEVER COLLAPSES OR SQUISHES)
   ========================================================================= */
body .bt-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
    flex-shrink: 0 !important;
    min-height: 80px !important;
}

body .bt-kpi-card {
    background: #0a0d15 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    box-shadow: none !important;
    transform: none !important;
    min-height: 38px !important;
    transition: background 0.15s ease !important;
}

body .bt-kpi-card:hover {
    background: #0e121d !important;
    transform: none !important;
}

/* Strip old chunky colored top borders */
body .bt-kpi-card.kpi-total,
body .bt-kpi-card.kpi-funding,
body .bt-kpi-card.kpi-cost,
body .bt-kpi-card.kpi-spread {
    border-top: none !important;
}

body .bt-kpi-hdr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    line-height: 1 !important;
}

body .bt-kpi-title {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
}

body .bt-kpi-val {
    font-family: var(--font-mono) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.15 !important;
    color: #f1f5f9 !important;
    margin-top: 1px !important;
}

body .bt-kpi-val.green {
    color: #10b981 !important;
    text-shadow: none !important;
}

body .bt-kpi-val.red {
    color: #f43f5e !important;
    text-shadow: none !important;
}

body .bt-kpi-val.txt-accent {
    color: #38bdf8 !important;
    text-shadow: none !important;
}

body .bt-kpi-badge {
    font-family: var(--font-mono) !important;
    font-size: 8.5px !important;
    font-weight: 700 !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    line-height: 1.1 !important;
}

body .badge-green {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

body .badge-red {
    background: rgba(244, 63, 94, 0.12) !important;
    color: #f43f5e !important;
    border: 1px solid rgba(244, 63, 94, 0.3) !important;
}

/* =========================================================================
   CHART BOX & LEGEND
   ========================================================================= */
body .bt-chart-box {
    background: #090c14 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    box-shadow: none !important;
    flex: 1 1 260px !important;
    min-height: 240px !important;
}

body .bt-legend {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    flex-shrink: 0 !important;
}

body .bt-legend-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #111520 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    color: #8c93a4 !important;
}

body .bt-legend-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

body .dot-long {
    background: #10b981 !important;
}

body .dot-short {
    background: #f43f5e !important;
}

body .dot-net {
    background: #ffffff !important;
}

body .dot-avg,
body .dot-pnl {
    background: #38bdf8 !important;
}

body .bt-legend-lbl {
    font-weight: 600 !important;
}

body .bt-legend-val {
    font-family: var(--font-mono) !important;
    font-weight: 700 !important;
}

/* Loading Overlay */
body .funding-loading-overlay {
    background: rgba(9, 12, 20, 0.85) !important;
    backdrop-filter: blur(4px) !important;
    color: #94a3b8 !important;
    border-radius: 6px !important;
}

body .funding-spinner {
    border: 2px solid rgba(56, 189, 248, 0.2) !important;
    border-top-color: #38bdf8 !important;
}

/* FOCUSED SCANNER MODE: HIDE HEADER & BOT PANEL */
header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    background: #090a0f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-sizing: border-box !important;
}

.hdr-left {
    display: flex !important;
    align-items: center !important;
}

.hdr-nav-modes,
.hdr-brand-sep {
    display: none !important;
}

.workspace-grid {
    height: calc(100vh - 38px) !important;
    min-height: calc(100vh - 38px) !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#tabBtnBot,
#paneBot,
#btnHdrBotLink {
    display: none !important;
}