@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
    --bg-dark: #0A0D14;
    --panel-bg: #111622;
    --panel-header: #151C2C;
    --border-color: #1E273A;
    --border-highlight: #2C3954;
    
    --text-primary: #F3F4F6;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    
    --color-buy: #00F59B;
    --color-buy-soft: rgba(0, 245, 155, 0.12);
    --color-sell: #FF3B69;
    --color-sell-soft: rgba(255, 59, 105, 0.12);
    --color-accent: #38BDF8;
    --color-purple: #A855F7;
    --color-gold: #F59E0B;

    /* Ultra-Clean Modern Typography & Contrast */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
}

html, body {
    height: 100%;
    height: 100dvh;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body.dark-theme {
    background: #060a12;
    color: var(--text-primary);
    font-family: var(--font-ui);
    height: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.012em;
    position: relative;
}

/* Hardware-Accelerated Static Background Layer: Eliminates Chromium scroll re-rasterization */
body.dark-theme::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #060a12 url('/static/bg_tree.jpg') no-repeat center center;
    background-size: cover;
    z-index: -2;
    pointer-events: none;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* High-Contrast Dark Overlay: Zero GPU blur overhead, crystal-clear readability */
body.dark-theme::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 25%, rgba(6, 11, 20, 0.78) 0%, rgba(4, 7, 13, 0.92) 100%);
    z-index: -1;
    pointer-events: none;
}

/* Zero-Flicker Hardware Layer Acceleration without GPU layer thrashing */
.nav-drawer {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

/* Tabular figures for prices, PnL, percentages and counters to eliminate horizontal number wobble */
.font-mono,
.coin-px,
.stat-val,
.pnl-val,
.roi-val,
.bg-last-price,
.ob-price,
.ob-size,
.ob-total,
.kpi-val,
.drawer-clock,
.hud-val,
.price-tag,
.order-estimate-val {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' on, 'zero' on;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-highlight);
}

/* TOP NAV */
.top-nav {
    height: 54px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    flex-shrink: 0;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-badge {
    background: linear-gradient(135deg, #00F59B, #38BDF8);
    color: #0A0D14;
    font-weight: 800;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
}

.brand-titles {
    display: flex;
    flex-direction: column;
}

.brand-main {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #FFFFFF;
}

.brand-sub {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.nav-center-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.live-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 245, 155, 0.08);
    border: 1px solid rgba(0, 245, 155, 0.25);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-buy);
    font-family: var(--font-mono);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-buy);
    box-shadow: 0 0 8px var(--color-buy);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 245, 155, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(0, 245, 155, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 245, 155, 0); }
}

.meta-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, 0.03);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    font-family: var(--font-ui);
}

.btn-secondary {
    background: #192233;
    color: var(--text-primary);
    border-color: var(--border-color);
}
.btn-secondary:hover {
    background: #232E44;
    border-color: var(--border-highlight);
}

.btn-primary {
    background: var(--color-buy);
    color: #0A0D14;
    font-weight: 700;
}
.btn-primary:hover {
    filter: brightness(1.1);
}

.btn-ai {
    background: linear-gradient(135deg, #A855F7, #6366F1);
    color: white;
}
.btn-ai:hover {
    filter: brightness(1.15);
}

.btn-icon {
    background: #192233;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
}
.btn-icon:hover {
    color: white;
    background: #232E44;
}

/* STATS STRIP */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--panel-header);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 16px;
    gap: 12px;
    flex-shrink: 0;
}

.kpi-card {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.kpi-val {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-mono);
    margin: 2px 0;
}
.kpi-val.highlight {
    color: var(--color-accent);
}

.kpi-sub {
    font-size: 10px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.text-buy { color: var(--color-buy) !important; }
.text-sell { color: var(--color-sell) !important; }

.last-alert-card {
    grid-column: span 1;
}
.kpi-alert-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-gold);
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0;
}

/* TERMINAL WORKSPACE */
.terminal-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 280px 1fr 340px;
    overflow: hidden;
}

.panel {
    background: var(--panel-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header {
    height: 40px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: var(--panel-header);
}

.panel-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge {
    background: #1E293B;
    color: var(--color-accent);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
}

/* COINS LIST */
.search-box {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.15);
}
.search-box i {
    color: var(--text-muted);
    font-size: 12px;
}
.search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 12px;
    width: 100%;
    font-family: var(--font-mono);
}

.filter-pills {
    display: flex;
    gap: 4px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
}
.pill-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
}
.pill-btn.active {
    background: var(--border-highlight);
    color: white;
}

.coins-list {
    flex: 1;
    overflow-y: auto;
}

.coin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: background 0.15s;
}
.coin-row:hover {
    background: rgba(255, 255, 255, 0.04);
}
.coin-row.selected {
    background: rgba(56, 189, 248, 0.12);
    border-left: 3px solid var(--color-accent);
}

.coin-sym-block {
    display: flex;
    flex-direction: column;
}
.coin-sym {
    font-weight: 700;
    font-size: 12px;
    font-family: var(--font-mono);
}
.coin-px {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.coin-badges {
    display: flex;
    gap: 4px;
}
.tag-badge {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 2px 6px;
    border-radius: 4px;
}
.tag-badge.buy {
    background: var(--color-buy-soft);
    color: var(--color-buy);
}
.tag-badge.sell {
    background: var(--color-sell-soft);
    color: var(--color-sell);
}

/* CHART PANEL */
.chart-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
}

.chart-header {
    height: 48px;
    background: var(--panel-header);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.chart-symbol-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.symbol-name {
    font-size: 16px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #FFFFFF;
}

.timeframe-tag {
    background: #1E293B;
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
}

.current-price {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-buy);
}

.rule-tag {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, 0.04);
    padding: 3px 8px;
    border-radius: 4px;
}

/* TRADINGVIEW PRO TOOLBAR & BUTTONS */
.tv-btn-group {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.tv-pill-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tv-pill-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.tv-pill-btn.active {
    background: var(--color-accent);
    color: #0A0D14;
}

/* TV STYLE DROPDOWN */
.tv-dropdown {
    position: relative;
    display: inline-block;
}

.tv-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-ui);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.tv-dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-highlight);
}
.tv-dropdown-btn .caret-icon {
    font-size: 9px;
    color: var(--text-muted);
}

.tv-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--panel-header);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    min-width: 140px;
    overflow: hidden;
}
.tv-dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s;
    font-family: var(--font-ui);
}
.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: white;
}
.dropdown-item.active {
    color: var(--color-accent);
    background: rgba(56, 189, 248, 0.08);
    font-weight: 700;
}

/* CHART PRO SUB-TOOLBAR */
.chart-sub-toolbar {
    height: 36px;
    background: #0E131E;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.sub-toolbar-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sub-label {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    padding: 0 2px;
}

.toolbar-divider {
    width: 1px;
    height: 16px;
    background: var(--border-color);
    margin: 0 4px;
}

.indicator-chip {
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.indicator-chip:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}
.indicator-chip[data-ind="ema20"].active {
    border-color: #38BDF8;
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.12);
}
.indicator-chip[data-ind="ema50"].active {
    border-color: #F59E0B;
    color: #F59E0B;
    background: rgba(245, 158, 11, 0.12);
}
.indicator-chip[data-ind="ema200"].active {
    border-color: #A855F7;
    color: #A855F7;
    background: rgba(168, 85, 247, 0.12);
}
.indicator-chip[data-ind="bb"].active {
    border-color: #00F59B;
    color: #00F59B;
    background: rgba(0, 245, 155, 0.12);
}

.tv-icon-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.tv-icon-btn:hover {
    color: white;
    background: rgba(255, 255, 255, 0.08);
}
.tv-icon-btn.active {
    background: var(--color-accent);
    color: #0A0D14;
    border-color: var(--color-accent);
}

/* LIVE OHLCV LEGEND BAR */
.tv-legend-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-family: var(--font-mono);
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 2px;
}
.legend-lbl {
    color: var(--text-muted);
    font-size: 10px;
}
.legend-val {
    font-weight: 600;
    color: var(--text-primary);
}
.text-up {
    color: var(--color-buy) !important;
}
.text-down {
    color: var(--color-sell) !important;
}

.btn.active-toggle {
    background: rgba(0, 245, 155, 0.12);
    border-color: rgba(0, 245, 155, 0.35);
    color: var(--color-buy);
}

.chart-container {
    flex: 1;
    position: relative;
    width: 100%;
    min-height: 380px;
}

/* CHART FULLSCREEN MODE */
.chart-panel.fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: var(--bg-dark);
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.chart-panel.fullscreen-mode .chart-container {
    flex: 1;
    height: calc(100vh - 156px) !important;
    width: 100% !important;
}

.chart-panel.fullscreen-mode .chart-header {
    height: 52px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
}

.chart-panel.fullscreen-mode .chart-sub-toolbar {
    height: 38px;
    padding: 0 20px;
}

.chart-panel.fullscreen-mode .active-zones-strip {
    min-height: 66px;
    padding: 8px 20px;
}

.active-zones-strip {
    min-height: 64px;
    background: var(--panel-bg);
    border-top: 1px solid var(--border-color);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
}

.zone-pill-card {
    background: var(--panel-header);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    font-family: var(--font-mono);
}
.zone-pill-card.buy {
    border-left: 3px solid var(--color-buy);
}
.zone-pill-card.sell {
    border-left: 3px solid var(--color-sell);
}

.zone-pill-title {
    font-weight: 700;
    font-size: 11px;
}
.zone-pill-info {
    font-size: 10px;
    color: var(--text-secondary);
}

/* RIGHT TABS PANEL */
.side-tabs-panel {
    border-right: none;
    border-left: 1px solid var(--border-color);
}

.tab-buttons {
    display: flex;
    background: var(--panel-header);
    border-bottom: 1px solid var(--border-color);
}

.tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 10px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}
.tab-btn:hover {
    color: var(--text-primary);
}
.tab-btn.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    background: rgba(56, 189, 248, 0.05);
}

.tab-content {
    flex: 1;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    padding: 12px;
}
.tab-content.active {
    display: flex;
}

/* AI TAB */
.ai-intro-card {
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
}
.ai-badge {
    font-size: 11px;
    font-weight: 800;
    color: var(--color-purple);
    font-family: var(--font-mono);
    margin-bottom: 4px;
}
.ai-intro-card p {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.ai-quick-prompts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.prompt-chip {
    background: #192233;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}
.prompt-chip:hover {
    background: #232E44;
    border-color: var(--color-accent);
}

.ai-response-box {
    flex: 1;
    background: #0D111A;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-primary);
    margin-bottom: 10px;
    min-height: 160px;
}

.ai-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    text-align: center;
    gap: 8px;
}

.ai-input-form {
    display: flex;
    gap: 6px;
}
.ai-input-form input {
    flex: 1;
    background: #141A26;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    color: white;
    font-size: 12px;
    outline: none;
}
.ai-input-form input:focus {
    border-color: var(--color-accent);
}
.ai-input-form button {
    background: var(--color-accent);
    color: #0A0D14;
    border: none;
    border-radius: 6px;
    padding: 0 14px;
    cursor: pointer;
}

/* SIGNALS TAB */
.signals-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.btn-text {
    background: none;
    border: none;
    color: var(--color-accent);
    font-size: 11px;
    cursor: pointer;
}
.signals-scroll-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.signal-card {
    background: var(--panel-header);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.signal-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
}
.signal-details {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

/* TELEGRAM TAB */
.telegram-preview-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tg-header {
    font-size: 12px;
    font-weight: 700;
    color: #38BDF8;
}
.tg-code-block {
    background: #090C12;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #CBD5E1;
    white-space: pre-wrap;
    max-height: 460px;
    overflow-y: auto;
    line-height: 1.4;
}
.w-full {
    width: 100%;
}

/* MODAL */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
.modal-overlay.show {
    display: flex;
}
.modal-card {
    background: var(--panel-bg);
    border: 1px solid var(--border-highlight);
    border-radius: 8px;
    width: 460px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.modal-header {
    background: var(--panel-header);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-title {
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
}
.btn-close:hover {
    color: white;
}
.modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.form-group input {
    background: #141A26;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    color: white;
    font-size: 12px;
    font-family: var(--font-mono);
    outline: none;
}
.form-group input:focus {
    border-color: var(--color-accent);
}
.form-group small {
    font-size: 10px;
    color: var(--text-muted);
}
.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

/* TOAST */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}
.toast {
    background: #1E293B;
    border: 1px solid var(--border-highlight);
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    animation: fadeIn 0.2s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERMES 2.0 APEX TRADINGVIEW CHART HUD & PROJECTIONS
   ============================================================ */
.smc-chart-hud {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 25;
    background: rgba(10, 13, 20, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.15);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    min-width: 270px;
    pointer-events: none;
    transition: all 0.25s ease;
}

.smc-chart-hud .hud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 7px;
    margin-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.smc-chart-hud .hud-badge {
    color: #FFD700;
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.smc-chart-hud .hud-tf {
    background: rgba(255, 215, 0, 0.15);
    color: #FFD700;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    border: 1px solid rgba(255, 215, 0, 0.35);
}

.smc-chart-hud .hud-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.smc-chart-hud .hud-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.smc-chart-hud .hud-label {
    color: #94A3B8;
    font-size: 10px;
}

.smc-chart-hud .hud-val {
    color: #F8FAFC;
    font-size: 10px;
    font-weight: 600;
}

.zone-pill-card.gold-elite {
    background: rgba(255, 215, 0, 0.08) !important;
    border: 1.5px solid #FFD700 !important;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.22) !important;
}

.zone-pill-card.gold-elite .zone-pill-title {
    color: #FFD700 !important;
}

/* ============================================================
   TRADINGVIEW FLOATING DRAWING TOOLBAR
   ============================================================ */
.tv-floating-toolbar {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e222d;
    border: 1px solid #2a2e39;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 3px 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 30;
    user-select: none;
    transition: box-shadow 0.2s ease;
}

.tv-floating-toolbar:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.tv-tool-handle {
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 30px;
    color: #787b86;
    transition: color 0.15s ease;
}

.tv-tool-handle:hover {
    color: #d1d4dc;
}

.tv-tool-handle:active {
    cursor: grabbing;
}

.tv-tool-sep {
    width: 1px;
    height: 18px;
    background: #2a2e39;
    margin: 0 3px;
}

.tv-tool-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #9db2c6;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.tv-tool-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f0f3fa;
    border-color: rgba(255, 255, 255, 0.1);
}

.tv-tool-btn.active {
    background: rgba(41, 98, 255, 0.25) !important;
    border-color: #2962ff !important;
    color: #3b82f6 !important;
    box-shadow: 0 0 10px rgba(41, 98, 255, 0.45);
    animation: toolActivePulse 2s infinite ease-in-out;
}

@keyframes toolActivePulse {
    0%, 100% { box-shadow: 0 0 8px rgba(41, 98, 255, 0.4); }
    50% { box-shadow: 0 0 14px rgba(41, 98, 255, 0.7); }
}

.tv-tool-btn.tv-tool-danger:hover {
    background: rgba(255, 77, 106, 0.15);
    border-color: rgba(255, 77, 106, 0.4);
    color: #ff4d6a;
}

/* Callout Quick Tag Buttons */
.callout-tag {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'JetBrains Mono', monospace;
}

.callout-tag:hover {
    background: rgba(41, 98, 255, 0.18);
    border-color: #2962ff;
    color: #60a5fa;
}

/* TV Overlay Canvas Layering */
#tvOverlayCanvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
}

/* ==========================================================================
   PAPER TRADING LIVE PNL & OPEN POSITIONS
   ========================================================================== */

/* Header Active Trade Pill */
.chart-active-trade-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(17, 24, 39, 0.85);
    border: 1px solid var(--border-highlight);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-family: var(--font-mono);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: fadeInTrade 0.3s ease;
}

@keyframes fadeInTrade {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

.chart-active-trade-pill.trade-profit {
    border-color: rgba(0, 245, 155, 0.4);
    background: rgba(0, 245, 155, 0.08);
}

.chart-active-trade-pill.trade-loss {
    border-color: rgba(255, 59, 105, 0.4);
    background: rgba(255, 59, 105, 0.08);
}

/* Paper KPI Card in Stats Strip */
.paper-kpi-card {
    border-left: 2px solid var(--color-accent) !important;
}

.paper-kpi-card.pnl-positive .kpi-val {
    color: var(--color-buy) !important;
    text-shadow: 0 0 12px rgba(0, 245, 155, 0.35);
}

.paper-kpi-card.pnl-negative .kpi-val {
    color: var(--color-sell) !important;
    text-shadow: 0 0 12px rgba(255, 59, 105, 0.35);
}

/* Paper Tab Summary Box */
.paper-summary-card {
    background: linear-gradient(145deg, #131A29, #0D111A);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.paper-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.paper-balance-box, .paper-pnl-box {
    display: flex;
    flex-direction: column;
}

.paper-lbl {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.paper-val {
    font-size: 17px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #FFFFFF;
    margin-top: 2px;
}

.paper-equity {
    font-size: 11px;
    color: var(--color-accent);
    font-family: var(--font-mono);
    margin-top: 1px;
}

.paper-floating-pnl {
    font-size: 17px;
    font-weight: 800;
    font-family: var(--font-mono);
    margin-top: 2px;
    transition: all 0.2s ease;
}

.paper-floating-pnl.pnl-positive {
    color: var(--color-buy);
    text-shadow: 0 0 10px rgba(0, 245, 155, 0.4);
}

.paper-floating-pnl.pnl-negative {
    color: var(--color-sell);
    text-shadow: 0 0 10px rgba(255, 59, 105, 0.4);
}

.paper-floating-pnl.pnl-neutral {
    color: var(--text-muted);
}

.paper-realized {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    margin-top: 1px;
}

.paper-metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.paper-sub-metric {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.025);
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.paper-sub-lbl {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.paper-sub-val {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
    margin-top: 2px;
}

/* Open Trades Scroll List */
.open-trades-scroll-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 2px;
}

.open-trade-card {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.open-trade-card:hover {
    border-color: var(--border-highlight);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-1px);
}

.open-trade-card.ot-profit {
    border-left: 3px solid var(--color-buy);
}

.open-trade-card.ot-loss {
    border-left: 3px solid var(--color-sell);
}

.ot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ot-symbol-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ot-symbol {
    font-size: 13px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.3px;
}

.ot-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
}

.ot-badge.buy {
    background: var(--color-buy-soft);
    color: var(--color-buy);
    border: 1px solid rgba(0, 245, 155, 0.3);
}

.ot-badge.sell {
    background: var(--color-sell-soft);
    color: var(--color-sell);
    border: 1px solid rgba(255, 59, 105, 0.3);
}

.ot-pnl-pill {
    font-size: 13px;
    font-weight: 800;
    font-family: var(--font-mono);
    padding: 2px 7px;
    border-radius: 5px;
}

.ot-pnl-pill.profit {
    color: var(--color-buy);
    background: rgba(0, 245, 155, 0.1);
}

.ot-pnl-pill.loss {
    color: var(--color-sell);
    background: rgba(255, 59, 105, 0.1);
}

.ot-price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    font-size: 11px;
    font-family: var(--font-mono);
    padding: 4px 0;
}

.ot-grid-item {
    display: flex;
    flex-direction: column;
}

.ot-grid-lbl {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 600;
}

.ot-grid-val {
    color: var(--text-primary);
    font-weight: 700;
    margin-top: 1px;
}

/* Progress bar towards TP/SL */
.ot-target-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    margin-top: 2px;
}

.ot-target-progress {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.ot-target-progress.profit {
    background: linear-gradient(90deg, #00F59B, #38BDF8);
}

.ot-target-progress.loss {
    background: linear-gradient(90deg, #FF3B69, #F59E0B);
}

.ot-footer {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* Closed Trades History List */
.closed-trades-scroll-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
}

.closed-trade-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 11px;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: background 0.15s ease;
}

.closed-trade-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.empty-state-text {
    color: var(--text-muted);
    font-size: 11px;
    padding: 16px 8px;
    text-align: center;
    line-height: 1.5;
}

/* ==========================================
   MIKE'S MULTI-AGENT HUB STYLES
   ========================================== */
.agent-hub-header {
    background: rgba(0, 245, 155, 0.04);
    border: 1px solid rgba(0, 245, 155, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.hub-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.hub-badge {
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--color-buy);
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
}
.btn-sm {
    padding: 4px 10px;
    font-size: 11px;
}
.hub-subtitle {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* 4 Agents Grid */
.agents-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.agent-card {
    background: #0E131E;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.2s ease;
}
.agent-card:hover {
    border-color: var(--border-highlight);
    background: #131A29;
}
.agent-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.agent-name-box {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
}
.agent-avatar {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.agent-status-badge {
    font-size: 9px;
    font-weight: 800;
    font-family: var(--font-mono);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.agent-status-badge.active {
    background: rgba(0, 245, 155, 0.15);
    color: #00f59b;
}
.agent-status-badge.analyzing {
    background: rgba(255, 208, 67, 0.15);
    color: #ffd043;
    animation: pulse 1.5s infinite;
}
.agent-role-text {
    font-size: 10px;
    color: var(--text-muted);
}
.agent-task-text {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Agent Reports Wrapper */
.agent-reports-wrapper {
    background: #0E131E;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}
.agent-reports-tabs {
    display: flex;
    background: #090D14;
    border-bottom: 1px solid var(--border-color);
}
.rep-tab-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    padding: 8px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-right: 1px solid var(--border-color);
    transition: all 0.15s;
}
.rep-tab-btn:last-child {
    border-right: none;
}
.rep-tab-btn:hover {
    color: white;
    background: rgba(255, 255, 255, 0.03);
}
.rep-tab-btn.active {
    color: var(--color-accent);
    background: #0E131E;
    border-bottom: 2px solid var(--color-accent);
}
.agent-report-display {
    padding: 10px;
    font-size: 11px;
    line-height: 1.5;
    max-height: 220px;
    overflow-y: auto;
}

/* Forensic Item Cards */
.forensic-item {
    background: rgba(255, 77, 106, 0.05);
    border: 1px solid rgba(255, 77, 106, 0.2);
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 8px;
}
.forensic-header {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-family: var(--font-mono);
    margin-bottom: 4px;
}
.forensic-cause {
    color: #ff4d6a;
    font-weight: 600;
    margin-bottom: 3px;
}
.forensic-advice {
    color: #38BDF8;
    font-size: 10px;
}

/* Task Console */
.agent-task-console {
    background: #0B0E17;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
}
.task-console-header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.task-input-row {
    display: flex;
    gap: 6px;
}
.task-input-row input {
    flex: 1;
    background: #141A26;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 11px;
    color: white;
    outline: none;
}
.task-input-row input:focus {
    border-color: var(--color-accent);
}

/* ==========================================================================
   PRO POSITIONS & ACTIVE TRADES DOCK (TRADINGVIEW & BINANCE FUTURES HUD)
   ========================================================================== */
.pro-positions-dock {
    background: #0B0E14;
    border-top: 1px solid rgba(0, 245, 155, 0.2);
    display: flex;
    flex-direction: column;
    max-height: 220px;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.pro-positions-dock.collapsed {
    max-height: 38px;
    overflow: hidden;
}

.pro-positions-dock.expanded {
    max-height: 380px;
}

.dock-header {
    height: 38px;
    background: rgba(16, 22, 34, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    flex-shrink: 0;
}

.dock-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dock-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
}

.dock-pnl-live {
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--color-buy);
    background: rgba(0, 245, 155, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(0, 245, 155, 0.25);
}

.dock-pnl-live.loss {
    color: var(--color-sell);
    background: rgba(255, 59, 105, 0.1);
    border-color: rgba(255, 59, 105, 0.25);
}

.dock-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dock-goal-pill {
    font-size: 10px;
    font-family: var(--font-mono);
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 2px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dock-content-table {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    padding: 4px 8px 8px;
}

/* Positions Table */
.dock-pos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-family: var(--font-mono);
    text-align: left;
}

.dock-pos-table th {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(10, 13, 20, 0.6);
}

.dock-pos-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle;
    color: #E2E8F0;
}

.dock-pos-row {
    transition: background 0.15s ease;
    cursor: pointer;
}

.dock-pos-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.dock-pos-row.profit-row {
    border-left: 3px solid #00F59B;
}

.dock-pos-row.loss-row {
    border-left: 3px solid #FF3B69;
}

.pos-sym-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-coin-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E293B, #0F172A);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 10px;
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.pos-sym-name {
    font-weight: 800;
    font-size: 12px;
    color: #FFFFFF;
}

.pos-lev-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.3);
}

.pos-lev-badge.sell {
    background: rgba(255, 59, 105, 0.15);
    color: #FF3B69;
    border-color: rgba(255, 59, 105, 0.3);
}

.pos-pnl-pill {
    font-weight: 800;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    letter-spacing: 0.2px;
}

.pos-pnl-pill.profit {
    color: #00F59B;
    background: rgba(0, 245, 155, 0.12);
    border: 1px solid rgba(0, 245, 155, 0.3);
    box-shadow: 0 0 10px rgba(0, 245, 155, 0.15);
}

.pos-pnl-pill.loss {
    color: #FF3B69;
    background: rgba(255, 59, 105, 0.12);
    border: 1px solid rgba(255, 59, 105, 0.3);
    box-shadow: 0 0 10px rgba(255, 59, 105, 0.15);
}

.pos-progress-cell {
    width: 130px;
}

.pos-mini-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    margin-bottom: 3px;
}

.pos-mini-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.pos-mini-fill.profit {
    background: linear-gradient(90deg, #00F59B, #38BDF8);
}

.pos-mini-fill.loss {
    background: linear-gradient(90deg, #FF3B69, #F59E0B);
}

.pos-progress-text {
    font-size: 9px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}

.pos-ai-badge {
    font-size: 9px;
    font-weight: 700;
    background: rgba(168, 85, 247, 0.15);
    color: #C084FC;
    border: 1px solid rgba(168, 85, 247, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ==========================================================================
   REVAMPED ACTIVE TRADE CARDS (RIGHT PANEL)
   ========================================================================== */
.open-trades-scroll-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 4px 2px;
    flex: 1;
}

.open-trade-card {
    background: linear-gradient(145deg, #111724, #0A0D14);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.open-trade-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.open-trade-card.ot-profit {
    border-left: 4px solid #00F59B;
    border-color: rgba(0, 245, 155, 0.25);
}

.open-trade-card.ot-loss {
    border-left: 4px solid #FF3B69;
    border-color: rgba(255, 59, 105, 0.25);
}

.open-trade-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    border-color: rgba(56, 189, 248, 0.4);
}

.ot-hero-pnl {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.ot-pnl-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.ot-pnl-value-big {
    font-size: 16px;
    font-weight: 800;
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
}

.ot-pnl-value-big.profit {
    color: #00F59B;
    text-shadow: 0 0 12px rgba(0, 245, 155, 0.4);
}

.ot-pnl-value-big.loss {
    color: #FF3B69;
    text-shadow: 0 0 12px rgba(255, 59, 105, 0.4);
}

.ot-stat-matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    background: rgba(15, 23, 42, 0.5);
    padding: 8px 10px;
    border-radius: 6px;
    font-family: var(--font-mono);
}

.ot-matrix-cell {
    display: flex;
    flex-direction: column;
}

.ot-matrix-lbl {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.ot-matrix-val {
    font-size: 11px;
    font-weight: 700;
    color: #F8FAFC;
    margin-top: 2px;
}

.ot-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 10px;
}

.ot-btn-view {
    background: rgba(56, 189, 248, 0.1);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ot-btn-view:hover {
    background: rgba(56, 189, 248, 0.2);
}

/* ==========================================================================
   BITGET REAL $50 COMPOUNDING ACTIVE CARD
   ========================================================================== */
.bitget-live-card {
    background: linear-gradient(135deg, rgba(16, 26, 40, 0.95), rgba(10, 13, 20, 0.98));
    border: 1px solid rgba(0, 245, 155, 0.35);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 20px rgba(0, 245, 155, 0.08);
    position: relative;
    overflow: hidden;
}

.bitget-live-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00F59B, #38BDF8, #A855F7);
}

.bg-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.bg-badge-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bg-live-pill {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.4);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--font-mono);
}

.bg-comp-tag {
    font-size: 10px;
    color: #38BDF8;
    font-family: var(--font-mono);
    font-weight: 700;
}

.bg-status-badge {
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: #00F59B;
    background: rgba(0, 245, 155, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.bg-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    background: rgba(0, 0, 0, 0.35);
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-family: var(--font-mono);
}

.bg-stat-item {
    display: flex;
    flex-direction: column;
}

.bg-lbl {
    font-size: 8.5px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.bg-val {
    font-size: 11px;
    font-weight: 800;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bg-pnl-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 245, 155, 0.06);
    border: 1px solid rgba(0, 245, 155, 0.2);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.bg-pnl-lbl {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 700;
    display: block;
}

.bg-pnl-num {
    font-size: 15px;
    font-weight: 900;
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
}

.bg-target-num {
    font-size: 12px;
    font-weight: 800;
    color: #38BDF8;
    font-family: var(--font-mono);
}

.bg-info-footer {
    font-size: 9px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   MOBILE BOTTOM NAVIGATION BAR
   ========================================================================== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #0B0E14;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    padding: 0 4px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
}

.mob-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 2px;
    border-radius: 8px;
    transition: all 0.15s ease;
    position: relative;
}

.mob-nav-btn i {
    font-size: 16px;
    transition: transform 0.15s ease;
}

.mob-nav-btn.active {
    color: #00F59B;
    background: rgba(0, 245, 155, 0.08);
}

.mob-nav-btn.active i {
    transform: scale(1.15);
    color: #00F59B;
}

/* ==========================================================================
   MOBILE RESPONSIVE BREAKPOINTS (TELEGRAM WEBAPP & PHONE SCREENS)
   ========================================================================== */
@media (max-width: 900px) {
    body {
        padding-bottom: 60px;
        overflow-x: hidden;
        width: 100vw;
        max-width: 100vw;
    }

    .mobile-bottom-nav {
        display: flex;
    }

    .top-nav {
        padding: 0 10px;
        height: 48px;
    }

    .nav-center-status {
        display: none;
    }

    .brand-sub {
        display: none;
    }

    /* Stats strip - 2 columns or compact scroll */
    .stats-strip {
        padding: 6px 8px;
        gap: 6px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        max-width: 100vw;
        overflow-x: hidden;
    }

    .kpi-card {
        padding: 8px 10px;
        min-width: unset;
    }

    .kpi-val {
        font-size: 13px;
    }

    /* Terminal Grid becomes single column view switched by mobile nav */
    .terminal-grid {
        display: flex;
        flex-direction: column;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
        flex: 1;
    }

    /* Mobile panel switcher controlled by data-mob-view on terminal-grid */
    .terminal-grid .panel {
        display: none;
        width: 100vw;
        max-width: 100vw;
        border-right: none;
        flex: 1;
        overflow-y: auto;
    }

    /* Default or trades active: show right panel on trades tab */
    .terminal-grid[data-mob-view="trades"] .side-tabs-panel,
    .terminal-grid:not([data-mob-view]) .side-tabs-panel {
        display: flex;
    }

    .terminal-grid[data-mob-view="chart"] .chart-panel {
        display: flex;
    }

    .terminal-grid[data-mob-view="coins"] .coins-panel {
        display: flex;
    }

    .terminal-grid[data-mob-view="agents"] .side-tabs-panel {
        display: flex;
    }

    .terminal-grid[data-mob-view="ai"] .side-tabs-panel {
        display: flex;
    }

    /* Chart panel on mobile */
    .chart-panel {
        height: calc(100vh - 170px);
        min-height: 380px;
    }

    .chart-header {
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px 8px;
        height: auto;
    }

    .chart-actions {
        gap: 4px;
    }

    .chart-sub-toolbar {
        overflow-x: auto;
        padding: 4px 6px;
        flex-wrap: nowrap;
    }

    .pro-positions-dock {
        max-height: 180px;
    }

    /* Modals fit mobile */
    .modal-card {
        width: 94vw !important;
        max-width: 94vw !important;
        margin: 10px auto;
        padding: 14px;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ==========================================================
   FUTURES POSITIONS & ORDERS DASHBOARD (SCREENSHOT AUTHENTIC UI)
   ========================================================== */

.futures-subnav-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #0E1420;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 8px;
    flex-wrap: wrap;
}

.futures-subtabs {
    display: flex;
    align-items: center;
    gap: 12px;
}

.subtab-item {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0;
    position: relative;
    transition: color 0.2s;
    font-family: var(--font-ui);
}

.subtab-item.active {
    color: #FFFFFF;
}

.subtab-item.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #00F59B;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(0, 245, 155, 0.6);
}

.futures-subnav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-check-lbl {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #94A3B8;
    cursor: pointer;
    user-select: none;
}

.custom-check-lbl input[type="checkbox"] {
    accent-color: #00F59B;
    cursor: pointer;
}

.btn-outline-danger {
    background: rgba(255, 59, 105, 0.1);
    color: #FF3B69;
    border: 1px solid rgba(255, 59, 105, 0.3);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-outline-danger:hover {
    background: #FF3B69;
    color: #FFFFFF;
}

/* Positions View Scroll Container */
.binance-positions-scroll, .binance-orders-scroll {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
    height: calc(100% - 46px);
}

.pos-loading-state, .pos-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    gap: 10px;
    color: #64748B;
    font-size: 13px;
    text-align: center;
}

/* Binance/Bitget Position Card */
.binance-pos-card {
    background: #121826;
    border: 1px solid #1E273A;
    border-radius: 10px;
    padding: 14px 14px 12px;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    position: relative;
}

.binance-pos-card:hover {
    border-color: #2D3D5A;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Header */
.binance-pos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pos-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.side-badge {
    font-weight: 800;
    font-size: 11px;
    border-radius: 4px;
    padding: 1px 6px;
    font-family: var(--font-mono);
    line-height: 1.4;
}

.badge-long {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.4);
}

.badge-short {
    background: rgba(255, 59, 105, 0.15);
    color: #FF3B69;
    border: 1px solid rgba(255, 59, 105, 0.4);
}

.pos-symbol {
    font-size: 15px;
    font-weight: 800;
    color: #FFFFFF;
    font-family: var(--font-mono);
    letter-spacing: 0.2px;
}

.pos-pill {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background: #1C2436;
    color: #94A3B8;
}

.pos-signal-bars {
    display: inline-flex;
    gap: 2px;
    align-items: flex-end;
    height: 10px;
    margin-left: 2px;
}

.pos-signal-bars .bar {
    width: 2px;
    background: #64748B;
    border-radius: 1px;
}
.pos-signal-bars .bar:nth-child(1) { height: 3px; background: #00F59B; }
.pos-signal-bars .bar:nth-child(2) { height: 5px; background: #00F59B; }
.pos-signal-bars .bar:nth-child(3) { height: 8px; background: #00F59B; }
.pos-signal-bars .bar:nth-child(4) { height: 10px; background: #00F59B; }

.btn-share-icon {
    background: transparent;
    border: none;
    color: #64748B;
    cursor: pointer;
    font-size: 12px;
    transition: color 0.2s;
}
.btn-share-icon:hover {
    color: #FFFFFF;
}

/* PNL & ROI Row */
.binance-pnl-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 10px 0 12px;
    padding-bottom: 6px;
}

.pnl-block, .roi-block {
    display: flex;
    flex-direction: column;
}

.roi-block {
    align-items: flex-end;
}

.pnl-lbl, .roi-lbl {
    font-size: 10px;
    color: #64748B;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pnl-val, .roi-val {
    font-size: 20px;
    font-weight: 800;
    font-family: var(--font-mono);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* 3-Column Stats Grid */
.binance-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
}

.binance-stats-grid .stat-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.binance-stats-grid .stat-lbl {
    font-size: 10px;
    color: #64748B;
    font-weight: 500;
    white-space: nowrap;
}

.binance-stats-grid .stat-val {
    font-size: 12px;
    color: #F1F5F9;
    font-weight: 700;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.mark-price-val {
    color: #38BDF8 !important;
    transition: color 0.3s;
}

.mark-price-val.flash-up {
    color: #00F59B !important;
    text-shadow: 0 0 6px rgba(0, 245, 155, 0.5);
}

.mark-price-val.flash-down {
    color: #FF3B69 !important;
    text-shadow: 0 0 6px rgba(255, 59, 105, 0.5);
}

/* Realized PNL row */
.binance-realized-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.07);
    margin-bottom: 10px;
    font-size: 11px;
    color: #64748B;
}

.binance-realized-row .realized-val {
    color: #94A3B8;
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

/* Action Pill Buttons (Leverage / TP/SL / Close) */
.binance-action-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.binance-pill-btn {
    background: #1C2436;
    color: #E2E8F0;
    border: 1px solid #28354D;
    padding: 7px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.binance-pill-btn:hover {
    background: #28354D;
    color: #FFFFFF;
    border-color: #3B4D70;
}

.btn-action-close {
    background: rgba(255, 59, 105, 0.12);
    color: #FF3B69;
    border-color: rgba(255, 59, 105, 0.3);
}

.btn-action-close:hover {
    background: #FF3B69;
    color: #FFFFFF;
    border-color: #FF3B69;
}

/* Open Order Card */
.binance-order-card {
    background: #121826;
    border: 1px solid #1E273A;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-type-badge {
    font-size: 10px;
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.order-dist-tag {
    font-size: 11px;
    font-family: var(--font-mono);
    color: #F59E0B;
    font-weight: 700;
}

/* Modals */
.tpsl-pos-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #0E1420;
    border: 1px solid #1E273A;
    border-radius: 6px;
}

.input-with-action {
    display: flex;
    gap: 6px;
}

.input-with-action input {
    flex: 1;
}

.btn-input-tag {
    background: #1E273A;
    border: 1px solid #28354D;
    color: #00F59B;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.tpsl-rules-hint {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 10px;
    background: rgba(0, 245, 155, 0.05);
    border: 1px solid rgba(0, 245, 155, 0.2);
    border-radius: 6px;
    font-size: 11px;
    color: #94A3B8;
    line-height: 1.4;
}

.lev-slider-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #0E1420;
    border-radius: 8px;
}

.lev-display-val {
    font-size: 32px;
    font-weight: 800;
    color: #00F59B;
    font-family: var(--font-mono);
}

.lev-presets {
    display: flex;
    gap: 8px;
    width: 100%;
}

.lev-preset {
    flex: 1;
    text-align: center;
}

/* ==========================================
   BITGET PRO 24H TICKER STRIP STYLES
   ========================================== */
.bitget-pro-ticker-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0B0E14;
    border-bottom: 1px solid #1E273A;
    padding: 8px 16px;
    gap: 16px;
    overflow-x: auto;
    white-space: nowrap;
}

.ticker-left-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pair-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pair-symbol {
    font-size: 15px;
    font-weight: 800;
    color: #F8FAFC;
    font-family: var(--font-mono);
}

.bg-perp-badge {
    font-size: 10px;
    background: #1E273A;
    color: #94A3B8;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.bg-lev-pill {
    font-size: 10px;
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    border: 1px solid rgba(0, 245, 155, 0.3);
}

.price-block {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.bg-last-price {
    font-size: 16px;
    font-weight: 800;
    color: #00F59B;
    font-family: var(--font-mono);
}

.bg-24h-chg {
    font-size: 12px;
    font-weight: 700;
    color: #00F59B;
    font-family: var(--font-mono);
}

.ticker-stats-grid {
    display: flex;
    align-items: center;
    gap: 18px;
}

.t-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.t-lbl {
    font-size: 10px;
    color: #64748B;
    font-weight: 600;
    text-transform: uppercase;
}

.t-val {
    font-size: 11px;
    font-weight: 700;
    color: #F8FAFC;
    font-family: var(--font-mono);
}

.bg-challenge-pill {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #121826;
    border: 1px solid rgba(0, 245, 155, 0.3);
    padding: 4px 10px;
    border-radius: 6px;
}

.bg-c-title {
    font-size: 10px;
    font-weight: 800;
    color: #00F59B;
}

.bg-c-bar {
    width: 90px;
    height: 4px;
    background: #1E273A;
    border-radius: 2px;
    overflow: hidden;
}

.bg-c-fill {
    height: 100%;
    background: #00F59B;
    border-radius: 2px;
}

/* ==========================================
   BITGET TRADE TAB: ORDERBOOK & ORDER FORM
   ========================================== */
.bitget-trade-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 4px;
}

.bg-trade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #121826;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #1E273A;
}

.bg-trade-sym-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bg-sym-title {
    font-size: 13px;
    font-weight: 800;
    color: #F8FAFC;
    font-family: var(--font-mono);
}

.bg-badge-iso {
    font-size: 9px;
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.bg-trade-price {
    font-size: 14px;
    font-weight: 800;
    color: #00F59B;
    font-family: var(--font-mono);
}

/* Mini Depth Orderbook */
.bg-orderbook-box {
    background: #0E1420;
    border: 1px solid #1E273A;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
}

.ob-header {
    display: flex;
    justify-content: space-between;
    color: #64748B;
    font-size: 9px;
    font-weight: 700;
    padding-bottom: 4px;
    border-bottom: 1px solid #1E273A;
}

.ob-asks, .ob-bids {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ob-row {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 1px 4px;
    cursor: pointer;
}

.ob-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.ob-bar-fill {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0.15;
    pointer-events: none;
}

.ob-asks .ob-price { color: #FF3B69; font-weight: 700; }
.ob-asks .ob-bar-fill { background: #FF3B69; }

.ob-bids .ob-price { color: #00F59B; font-weight: 700; }
.ob-bids .ob-bar-fill { background: #00F59B; }

.ob-size { color: #CBD5E1; }
.ob-total { color: #94A3B8; }

.ob-spread-divider {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    background: #141B2D;
    border-radius: 4px;
    margin: 2px 0;
}

.ob-spread-price {
    font-size: 12px;
    font-weight: 800;
}

.ob-spread-txt {
    font-size: 9px;
    color: #64748B;
}

/* Order Form */
.bg-order-form {
    background: #121826;
    border: 1px solid #1E273A;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bg-form-mode-strip {
    display: flex;
    background: #0E1420;
    padding: 2px;
    border-radius: 6px;
    gap: 4px;
}

.bg-mode-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.bg-mode-btn.active {
    background: #1E273A;
    color: #F8FAFC;
}

.bg-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bg-form-lbl {
    font-size: 11px;
    color: #94A3B8;
}

.bg-lev-badge-interactive {
    font-size: 11px;
    background: #1E273A;
    color: #00F59B;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.bg-input-group {
    display: flex;
    align-items: center;
    background: #0E1420;
    border: 1px solid #1E273A;
    border-radius: 6px;
    padding: 6px 10px;
    gap: 8px;
}

.bg-input-lbl {
    font-size: 10px;
    color: #64748B;
    font-weight: 700;
    white-space: nowrap;
}

.bg-input-group input {
    flex: 1;
    background: transparent;
    border: none;
    color: #F8FAFC;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    outline: none;
}

.bg-input-unit {
    font-size: 10px;
    color: #94A3B8;
    font-weight: 700;
}

.bg-slider-percentages {
    display: flex;
    gap: 6px;
}

.bg-pct-chip {
    flex: 1;
    background: #0E1420;
    border: 1px solid #1E273A;
    color: #94A3B8;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.bg-pct-chip.active, .bg-pct-chip:hover {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border-color: rgba(0, 245, 155, 0.4);
}

.bg-est-summary {
    background: #0E1420;
    border: 1px solid #1E273A;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
}

.bg-est-item {
    display: flex;
    justify-content: space-between;
    color: #94A3B8;
}

.bg-submit-btns {
    display: flex;
    gap: 8px;
}

.btn-bg-buy {
    flex: 1;
    background: #00F59B;
    color: #0F172A;
    font-size: 12px;
    font-weight: 800;
    padding: 10px 6px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: filter 0.2s;
}

.btn-bg-buy:hover {
    filter: brightness(1.1);
}

.btn-bg-sell {
    flex: 1;
    background: #FF3B69;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
    padding: 10px 6px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: filter 0.2s;
}

.btn-bg-sell:hover {
    filter: brightness(1.1);
}

/* ==========================================
   MULTI-AGENT COMMAND CENTER MODAL STYLES
   ========================================== */
.agent-hud-modal {
    background: #0B0E14;
    border: 1px solid #1E273A;
}

.agent-command-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.agent-pro-card {
    background: #121826;
    border: 1px solid #1E273A;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s, border-color 0.2s;
}

.agent-pro-card:hover {
    transform: translateY(-2px);
    border-color: #38BDF8;
}

.ap-header {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.ap-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.ap-title h4 {
    margin: 0;
    font-size: 12px;
    color: #F8FAFC;
    font-weight: 700;
}

.ap-title span {
    font-size: 9px;
    color: #94A3B8;
    display: block;
}

.ap-status-badge {
    font-size: 8px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: auto;
}

.ap-status-badge.status-active {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.3);
}

.ap-desc {
    font-size: 10px;
    color: #CBD5E1;
    margin: 0;
    line-height: 1.4;
}

.ap-meta {
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid #1E273A;
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #64748B;
    font-family: var(--font-mono);
}

.ap-meta b {
    color: #F8FAFC;
}

/* Agent Terminal Activity Feed */
.agent-terminal-feed {
    background: #0E1420;
    border: 1px solid #1E273A;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.atf-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #141B2D;
    border-bottom: 1px solid #1E273A;
    font-size: 11px;
    font-weight: 700;
    color: #F8FAFC;
}

.atf-log-window {
    height: 160px;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
}

.atf-log-entry {
    color: #CBD5E1;
}

.atf-time {
    color: #64748B;
    font-size: 9px;
    margin-right: 4px;
}

.atf-tag {
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 10px;
    margin-right: 4px;
}

.atf-tag.tag-mike { background: rgba(0, 245, 155, 0.2); color: #00F59B; }
.atf-tag.tag-alex { background: rgba(56, 189, 248, 0.2); color: #38BDF8; }
.atf-tag.tag-david { background: rgba(255, 77, 106, 0.2); color: #FF4D6A; }
.atf-tag.tag-liam { background: rgba(255, 208, 67, 0.2); color: #FFD043; }
.atf-tag.tag-sarah { background: rgba(179, 136, 255, 0.2); color: #B388FF; }

/* ==========================================
   $50 USDT COMPOUNDING CHALLENGE PANELS
   ========================================== */
.challenge-50-section {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(0, 245, 155, 0.2);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 4px;
}

.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.section-title-tag {
    font-size: 11px;
    font-weight: 800;
    color: #F8FAFC;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.challenge-50-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 768px) {
    .challenge-50-grid {
        grid-template-columns: 1fr;
    }
}

.challenge-pro-card {
    background: #111726;
    border: 1px solid #1E273A;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s, border-color 0.2s;
}

.challenge-pro-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 245, 155, 0.4);
}

/* Stage Ladder Matrix */
.challenge-stage-ladder {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #0B0F19;
    border: 1px solid #1E273A;
    border-radius: 6px;
    padding: 8px 10px;
}

.stage-step-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.step-lbl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-family: var(--font-mono);
}

.step-name {
    font-weight: 700;
    color: #E2E8F0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.step-val {
    font-weight: 600;
}

.step-progress-track {
    width: 100%;
    height: 5px;
    background: #1E293B;
    border-radius: 3px;
    overflow: hidden;
}

.step-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0284c7 0%, #00F59B 100%);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Sniper Engine & Live Radar */
.challenge-sniper-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sniper-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: #0B0F19;
    border: 1px solid #1E273A;
    border-radius: 6px;
    padding: 8px;
}

.sniper-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.s-lbl {
    font-size: 9px;
    color: #64748B;
    font-weight: 600;
}

.s-val {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: #F8FAFC;
}

.radar-live-preview {
    background: #0B0F19;
    border: 1px solid #1E273A;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.radar-p-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
}

.radar-pairs-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 80px;
    overflow-y: auto;
}

.radar-pair-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #131A29;
    border: 1px solid #1E273A;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 10px;
    font-family: var(--font-mono);
}

.rp-sym {
    font-weight: 800;
    color: #38BDF8;
}

.rp-type {
    font-weight: 700;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
}

.rp-type.buy {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
}

.rp-type.sell {
    background: rgba(255, 77, 106, 0.15);
    color: #FF4D6A;
}

.rp-dist {
    font-weight: 600;
}

.rp-score {
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
}

/* Live Position & Orders in $50 Challenge Cards */
.c50-pos-box {
    background: #0B0F19;
    border: 1px solid #1E273A;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.c50-pos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-family: var(--font-mono);
}

.c50-pos-sym {
    font-weight: 800;
    color: #F8FAFC;
}

.c50-pnl-chip {
    font-weight: 800;
    background: rgba(0, 245, 155, 0.12);
    border: 1px solid rgba(0, 245, 155, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

.c50-orders-section {
    background: #0B0F19;
    border: 1px solid #1E273A;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ==========================================================================
   MULTI-PAGE PLATFORM GLOBAL NAVIGATION & PAGE LAYOUTS
   ========================================================================== */

.nav-pages-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.7);
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-page-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #94A3B8;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-page-link:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.06);
}

.nav-page-link.active {
    color: #0A0D14 !important;
    background: linear-gradient(135deg, #00F59B 0%, #38BDF8 100%) !important;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(0, 245, 155, 0.35);
}

.nav-page-link.active i {
    color: #0A0D14 !important;
}

.nav-page-link .badge {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
}

.nav-right-cluster {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* DEDICATED PAGE CONTAINERS */
.page-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px 20px 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.page-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(17, 22, 34, 0.9) 0%, rgba(10, 13, 20, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.hero-title-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hero-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.hero-title-group h1 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: #F8FAFC;
    letter-spacing: 0.3px;
}

.hero-title-group p {
    font-size: 12px;
    color: #94A3B8;
    margin: 3px 0 0 0;
    font-family: var(--font-mono);
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* POSITIONS PAGE GRID */
.positions-page-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 18px;
    align-items: start;
}

@media (max-width: 1100px) {
    .positions-page-grid {
        grid-template-columns: 1fr;
    }
}

/* COMPOUNDING PAGE GRID */
.compounding-page-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.compounding-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 1000px) {
    .compounding-two-columns {
        grid-template-columns: 1fr;
    }
}

/* BRAIN PAGE GRID */
.brain-page-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.brain-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 900px) {
    .brain-split-grid {
        grid-template-columns: 1fr;
    }
}

/* SIGNALS & RADAR PAGE GRID */
.signals-page-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 1050px) {
    .signals-page-grid {
        grid-template-columns: 1fr;
    }
}

/* SETTINGS PAGE GRID */
.settings-page-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 1000px) {
    .settings-page-grid {
        grid-template-columns: 1fr;
    }
}

/* CARD BOX STYLING */
.pro-card {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pro-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 12px;
}

.pro-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #F8FAFC;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pro-card-subtitle {
    font-size: 11px;
    color: var(--text-muted);
}

/* ==========================================================================
   BITGET PRO NAVIGATION DRAWER & MOBILE UX COMPONENTS
   ========================================================================== */

/* Hamburger Button */
.hamburger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 15px;
    transition: all 0.2s ease;
    margin-right: 10px;
    flex-shrink: 0;
}
.hamburger-btn:hover {
    background: rgba(0, 245, 155, 0.12);
    border-color: rgba(0, 245, 155, 0.4);
    color: #00F59B;
    transform: scale(1.03);
}

/* Drawer Backdrop Overlay */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(4, 7, 13, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Slide-Out Navigation Drawer */
.nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 330px;
    max-width: 86vw;
    background: #0d121d;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.85);
    overflow: hidden;
}
.nav-drawer.active {
    transform: translateX(0);
}

/* Drawer Header */
.drawer-header {
    padding: 20px 18px 16px 18px;
    background: linear-gradient(180deg, #131a29 0%, #0d121d 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}
.drawer-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.drawer-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.drawer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00F59B 0%, #38BDF8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #070a10;
    font-size: 20px;
    font-weight: 800;
    box-shadow: 0 0 15px rgba(0, 245, 155, 0.3);
}
.drawer-user-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.drawer-username {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 6px;
}
.drawer-vip-pill {
    font-size: 10px;
    font-weight: 800;
    background: rgba(255, 215, 0, 0.15);
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.35);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.drawer-user-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.drawer-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.drawer-close-btn:hover {
    background: rgba(255, 59, 105, 0.15);
    border-color: rgba(255, 59, 105, 0.4);
    color: #FF3B69;
    transform: rotate(90deg);
}

/* Compounding Target Snapshot in Drawer */
.drawer-compounding-card {
    background: rgba(18, 24, 36, 0.7);
    border: 1px solid rgba(0, 245, 155, 0.2);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.drawer-comp-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}
.drawer-comp-title {
    font-weight: 700;
    color: #00F59B;
    display: flex;
    align-items: center;
    gap: 5px;
}
.drawer-comp-val {
    font-family: var(--font-mono);
    font-weight: 700;
    color: #FFFFFF;
}
.drawer-comp-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}
.drawer-comp-fill {
    height: 100%;
    background: linear-gradient(90deg, #00F59B, #38BDF8);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.drawer-comp-meta {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--text-muted);
}

/* Drawer Menu List */
.drawer-nav-content {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.drawer-section-label {
    font-size: 10px;
    font-weight: 800;
    color: #52637a;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 0 8px 4px 8px;
}
.drawer-links-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.drawer-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: #C0C8D6;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.drawer-nav-item .left-group {
    display: flex;
    align-items: center;
    gap: 12px;
}
.drawer-nav-item i {
    width: 20px;
    font-size: 15px;
    color: #64748B;
    transition: color 0.2s ease;
    text-align: center;
}
.drawer-nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.08);
}
.drawer-nav-item:hover i {
    color: #00F59B;
}
.drawer-nav-item.active {
    background: rgba(0, 245, 155, 0.1);
    color: #00F59B;
    border-color: rgba(0, 245, 155, 0.25);
}
.drawer-nav-item.active i {
    color: #00F59B;
}
.drawer-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
}
.drawer-badge.badge-hot {
    background: rgba(255, 59, 105, 0.2);
    color: #FF3B69;
    border: 1px solid rgba(255, 59, 105, 0.3);
}
.drawer-badge.badge-gold {
    background: rgba(255, 215, 0, 0.18);
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.3);
}
.drawer-badge.badge-cyan {
    background: rgba(56, 189, 248, 0.18);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

/* Drawer Footer */
.drawer-footer {
    padding: 14px 16px;
    background: #090d15;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.drawer-footer-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
}
.drawer-status-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #00F59B;
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 10px;
}
.drawer-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00F59B;
    box-shadow: 0 0 8px #00F59B;
    animation: pulseDot 2s infinite;
}

/* ==========================================================================
   BITGET PRO MARKETS OVERVIEW PAGE (#0b0e14 / #121824)
   ========================================================================== */

.markets-page {
    background-color: #0b0e14 !important;
    overflow-y: auto !important;
    height: 100vh;
}

.markets-content {
    max-width: 1560px;
    margin: 0 auto;
    padding: 16px 20px 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Top Global Index Ticker Bar */
.global-indices-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 1024px) {
    .global-indices-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .global-indices-bar {
        grid-template-columns: 1fr;
    }
}

.index-ticker-card {
    background: #121824;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}
.index-ticker-card:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.index-ticker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.index-coin-tag {
    display: flex;
    align-items: center;
    gap: 8px;
}
.coin-icon-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #FFFFFF;
}
.coin-icon-badge.btc { background: #F7931A; }
.coin-icon-badge.eth { background: #627EEA; }
.coin-icon-badge.sol { background: linear-gradient(135deg, #9945FF, #14F195); }
.coin-icon-badge.bnb { background: #F3BA2F; color: #000; }
.coin-icon-badge.generic { background: #334155; }

.index-pair-name {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
}
.index-badge-tag {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

.index-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.index-price {
    font-size: 18px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #FFFFFF;
    letter-spacing: -0.3px;
}
.index-chg-pill {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.index-chg-pill.positive {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.3);
}
.index-chg-pill.negative {
    background: rgba(255, 59, 105, 0.15);
    color: #FF3B69;
    border: 1px solid rgba(255, 59, 105, 0.3);
}

.index-sparkline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}
.sparkline-svg {
    width: 80px;
    height: 24px;
    overflow: visible;
}
.index-vol-label {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* Category Summary Cards (Top 22 Champions, Gainers, Volume) */
.category-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 900px) {
    .category-summary-grid {
        grid-template-columns: 1fr;
    }
}

.cat-summary-card {
    background: #121824;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 10px;
}
.cat-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cat-icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.cat-icon-badge.champ {
    background: rgba(255, 215, 0, 0.15);
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.3);
}
.cat-icon-badge.gainers {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.3);
}
.cat-icon-badge.volume {
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.cat-header-text h3 {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
}
.cat-header-text span {
    font-size: 10px;
    color: var(--text-muted);
}
.cat-quick-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cat-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s ease;
}
.cat-list-row:hover {
    background: rgba(255, 255, 255, 0.04);
}
.cat-row-pair {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cat-row-name {
    font-size: 12px;
    font-weight: 700;
    color: #F1F5F9;
}
.cat-row-tag {
    font-size: 9px;
    color: #64748B;
}
.cat-row-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: right;
}
.cat-row-price {
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-mono);
    color: #FFFFFF;
}
.cat-row-pill {
    min-width: 62px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Controls Bar (Search + Filter Pills) */
.markets-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #121824;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
}
.markets-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    max-width: 100%;
}
.m-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #94A3B8;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.m-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}
.m-pill.active {
    background: #00F59B;
    border-color: #00F59B;
    color: #090d15;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(0, 245, 155, 0.35);
}

.markets-search-wrap {
    position: relative;
    min-width: 260px;
    flex: 1;
    max-width: 380px;
}
.markets-search-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
}
.markets-search-input {
    width: 100%;
    background: #090d15;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 7px 32px 7px 34px;
    color: #FFFFFF;
    font-size: 12px;
    font-family: var(--font-ui);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.markets-search-input:focus {
    border-color: #00F59B;
    box-shadow: 0 0 10px rgba(0, 245, 155, 0.25);
}
.markets-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    display: none;
}

/* Responsive Markets Table Card */
.markets-table-card {
    background: #121824;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.markets-table-wrap {
    width: 100%;
    overflow-x: auto;
}
.markets-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.markets-table th {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: #0f1521;
    white-space: nowrap;
    user-select: none;
}
.markets-table th.sortable {
    cursor: pointer;
}
.markets-table th.sortable:hover {
    color: #FFFFFF;
}
.markets-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 13px;
    vertical-align: middle;
}
.markets-row {
    transition: background 0.15s ease;
}
.markets-row:hover {
    background: rgba(255, 255, 255, 0.035);
}

.td-rank {
    font-family: var(--font-mono);
    color: #64748B;
    font-size: 12px;
    width: 44px;
}
.td-pair-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pair-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    color: #FFFFFF;
    background: #1f293d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}
.pair-text-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pair-text-main {
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pair-quote {
    font-size: 11px;
    color: #64748B;
}
.pair-badge-champ {
    font-size: 9px;
    font-weight: 800;
    color: #FFD700;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 1px 5px;
    border-radius: 3px;
}
.pair-sub-meta {
    font-size: 10px;
    color: var(--text-muted);
}

.td-price {
    font-family: var(--font-mono);
    font-weight: 700;
    color: #FFFFFF;
    font-size: 14px;
}
.td-change-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 6px 10px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
}
.td-change-pill.up {
    background: #00F59B;
    color: #070a10;
    box-shadow: 0 0 10px rgba(0, 245, 155, 0.25);
}
.td-change-pill.down {
    background: #FF3B69;
    color: #FFFFFF;
    box-shadow: 0 0 10px rgba(255, 59, 105, 0.25);
}

.td-volume {
    font-family: var(--font-mono);
    color: #CBD5E1;
    font-size: 13px;
}

/* Sentry Status Badges */
.sentry-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    white-space: nowrap;
}
.sentry-pill.active {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.4);
    box-shadow: 0 0 8px rgba(0, 245, 155, 0.2);
}
.sentry-pill.armed {
    background: rgba(255, 215, 0, 0.18);
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}
.sentry-pill.scanning {
    background: rgba(56, 189, 248, 0.12);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.25);
}
.sentry-pill.idle {
    background: rgba(255, 255, 255, 0.05);
    color: #94A3B8;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Trade Button */
.btn-trade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #00F59B 0%, #00d285 100%);
    color: #06090e;
    font-size: 12px;
    font-weight: 800;
    border-radius: 6px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.btn-trade:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 245, 155, 0.4);
    color: #000000;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    .markets-content {
        padding: 12px 10px 30px 10px;
    }
    .markets-table th, .markets-table td {
        padding: 10px 8px;
    }
    .td-change-pill {
        min-width: 62px;
        padding: 4px 6px;
        font-size: 11px;
    }
    .btn-trade {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* ========================================================
   TRADE FORENSICS & COMPOUNDING AUDIT SYSTEM
   ======================================================== */
.forensics-container {
    max-width: 1380px;
    margin: 0 auto;
    padding: 20px 16px 80px 16px;
    overflow-y: auto;
    height: calc(100vh - 56px);
}
.forensics-header {
    background: linear-gradient(135deg, rgba(18, 24, 38, 0.85) 0%, rgba(13, 17, 28, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 20px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
    position: relative;
    overflow: hidden;
}
.forensics-header::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.forensics-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}
.forensics-title {
    font-size: 24px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.forensics-subtitle {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.5;
    max-width: 720px;
}
.forensics-kpis {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.forensics-kpi-pill {
    background: rgba(22, 30, 48, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 16px;
    text-align: center;
    min-width: 110px;
}
.forensics-kpi-pill .kpi-lbl {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}
.forensics-kpi-pill .kpi-val {
    font-size: 17px;
    font-weight: 800;
    margin-top: 2px;
}
.forensics-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.forensics-filter-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.forensics-pill-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.forensics-pill-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}
.forensics-pill-btn.active {
    background: #F59E0B;
    color: #06090e;
    font-weight: 800;
    border-color: #F59E0B;
}
.forensics-search-box {
    display: flex;
    align-items: center;
    background: rgba(11, 14, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 12px;
    gap: 8px;
}
.forensics-search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: #FFFFFF;
    font-size: 12px;
    width: 140px;
}
.trade-card {
    background: rgba(18, 24, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 14px;
    transition: transform 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}
.trade-card:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 158, 11, 0.35);
}
.trade-card.win-border {
    border-left: 4px solid #00F59B;
}
.trade-card.loss-border {
    border-left: 4px solid #FF3B69;
}
.trade-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.trade-card-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}
.trade-num-badge {
    background: #172033;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #F59E0B;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}
.trade-symbol-title {
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}
.trade-side-badge {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
}
.trade-side-badge.long {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.3);
}
.trade-side-badge.short {
    background: rgba(255, 59, 105, 0.15);
    color: #FF3B69;
    border: 1px solid rgba(255, 59, 105, 0.3);
}
.trade-card-outcome {
    display: flex;
    align-items: center;
    gap: 14px;
}
.trade-outcome-pill {
    font-size: 12px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.trade-outcome-pill.tp-hit {
    background: rgba(0, 245, 155, 0.16);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.4);
}
.trade-outcome-pill.sl-hit {
    background: rgba(255, 59, 105, 0.16);
    color: #FF3B69;
    border: 1px solid rgba(255, 59, 105, 0.4);
}
.trade-pnl-block {
    text-align: right;
}
.trade-pnl-lbl {
    font-size: 11px;
    color: var(--text-muted);
}
.trade-pnl-val {
    font-size: 17px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.trade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    background: rgba(11, 15, 23, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.trade-grid-col .cell-lbl {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.trade-grid-col .cell-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.excursion-meters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
@media (max-width: 768px) {
    .excursion-meters {
        grid-template-columns: 1fr;
    }
}
.meter-card {
    background: rgba(11, 15, 23, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 10px 12px;
}
.meter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    margin-bottom: 6px;
}
.meter-track {
    width: 100%;
    height: 7px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
}
.meter-fill-mae {
    height: 100%;
    background: linear-gradient(90deg, #FF3B69, #ff7597);
    border-radius: 10px;
}
.meter-fill-mfe {
    height: 100%;
    background: linear-gradient(90deg, #00d285, #00F59B);
    border-radius: 10px;
}
.meter-desc {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}
.trade-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 11px;
}
.sentries-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sentry-pass-tag {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 245, 155, 0.25);
    color: #00F59B;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
}
.compounding-status-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-weight: 600;
}

/* ==========================================================================
   GLOBAL INSTITUTIONAL TRADING TERMINAL DESIGN SYSTEM
   - Fixed Dark Night Tree Wallpaper & Overlay
   - Glassmorphic Panels with Thin Cyan Borders & Subtle Blur
   - Global 14-Item Sidebar with Blue Highlight
   - Global Top Bar (1H/4H Scanner Status, Paper Bal, Equity, Open PnL, Notifs, Acct)
   - Professional Empty States & Responsive Grid
   ========================================================================== */

/* Glassmorphism Panel Overrides */
.panel, 
.kpi-card, 
.glass-panel,
.top-nav,
.bitget-pro-ticker-strip,
.pro-positions-dock,
.dock-header,
.coins-panel,
.side-tabs-panel {
    background: rgba(11, 16, 26, 0.84) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border-color: rgba(56, 189, 248, 0.16) !important;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.35) !important;
}

/* Main chart panel: High opacity for absolute visual priority and crisp candle rendering */
.chart-panel,
#tvChartContainer {
    background: rgba(7, 10, 18, 0.94) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
}

/* GLOBAL TOP AREA */
.global-top-bar {
    height: 54px;
    background: rgba(8, 12, 20, 0.90);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(56, 189, 248, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    flex-shrink: 0;
    z-index: 100;
    position: relative;
    gap: 12px;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.top-brand-badge {
    background: linear-gradient(135deg, #00F59B 0%, #38BDF8 100%);
    color: #060a12;
    font-weight: 800;
    font-size: 11.5px;
    padding: 3px 8px;
    border-radius: 5px;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}

.top-brand-text {
    font-size: 12.5px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.4px;
}

.top-brand-sub {
    font-size: 9.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.top-scanner-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scanner-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 14px;
    font-size: 10.5px;
    font-family: var(--font-mono);
    font-weight: 600;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.scanner-badge.live {
    background: rgba(0, 245, 155, 0.09);
    border-color: rgba(0, 245, 155, 0.28);
    color: #00F59B;
}

.scanner-badge.live .scanner-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #00F59B;
    box-shadow: 0 0 8px #00F59B;
    animation: scannerPulse 1.8s infinite;
}

@keyframes scannerPulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 10px #00F59B; }
    100% { transform: scale(0.9); opacity: 0.7; }
}

.top-bar-center {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-metric-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-family: var(--font-mono);
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(56, 189, 248, 0.12);
}

.top-metric-pill .lbl {
    color: var(--text-muted);
    font-size: 10px;
}

.top-metric-pill .val {
    font-weight: 700;
    color: var(--text-primary);
}

.top-metric-pill .val.buy {
    color: var(--color-buy);
}

.top-metric-pill .val.sell {
    color: var(--color-sell);
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-account-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    color: #38BDF8;
    font-family: var(--font-mono);
}

.top-account-selector select {
    background: transparent;
    border: none;
    color: #F8FAFC;
    font-size: 11px;
    font-family: var(--font-mono);
    outline: none;
    cursor: pointer;
}

.top-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    text-decoration: none;
}

.top-icon-btn:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.35);
    color: #38BDF8;
}

.top-icon-btn .badge-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00F59B;
    box-shadow: 0 0 6px #00F59B;
}

/* APP SHELL: SIDEBAR + MAIN CONTENT */
.app-shell {
    display: flex;
    flex: 1;
    height: calc(100vh - 54px);
    height: calc(100dvh - 54px);
    overflow: hidden;
    position: relative;
    z-index: 10;
}

/* GLOBAL PERSISTENT INSTITUTIONAL SIDEBAR (14 LINKS) */
.global-sidebar {
    width: 210px;
    background: rgba(9, 13, 22, 0.90);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-right: 1px solid rgba(56, 189, 248, 0.16);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 90;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 8px;
}

.sidebar-section-title {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 8px 10px 4px 10px;
    font-family: var(--font-mono);
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 500;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.sidebar-nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    border-left-color: rgba(56, 189, 248, 0.4);
}

.sidebar-nav-item.active {
    background: rgba(56, 189, 248, 0.14) !important;
    border-left-color: #38BDF8 !important;
    color: #38BDF8 !important;
    font-weight: 700;
}

.sidebar-item-left {
    display: flex;
    align-items: center;
    gap: 9px;
}

.sidebar-item-left i {
    width: 16px;
    text-align: center;
    font-size: 12.5px;
}

.sidebar-badge {
    font-size: 8.5px;
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}

.sidebar-badge.badge-cyan {
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.sidebar-badge.badge-gold {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.sidebar-badge.badge-green {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.3);
}

.sidebar-footer {
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(6, 9, 16, 0.4);
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* MAIN DASHBOARD CONTENT AREA */
.dashboard-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding: 0;
}

/* CLEAN EMPTY STATES */
.clean-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
}

.clean-empty-state i {
    font-size: 24px;
    color: rgba(56, 189, 248, 0.45);
    margin-bottom: 8px;
}

.clean-empty-state h4 {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 3px;
}

.clean-empty-state p {
    font-size: 10.5px;
    color: var(--text-muted);
    max-width: 300px;
    line-height: 1.35;
}

.clean-empty-state .empty-tag {
    margin-top: 7px;
    font-size: 9px;
    font-family: var(--font-mono);
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
    color: #38BDF8;
}

/* Responsive Sidebar adjustments */
@media (max-width: 1080px) {
    .global-sidebar {
        display: none !important;
    }
    .top-bar-center {
        display: none !important;
    }
}

@media (min-width: 1081px) {
    .hamburger-btn {
        display: none !important;
    }
}

/* Enhanced Pro Positions Dock Empty State */
.pro-dock-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    gap: 8px;
    color: var(--text-muted);
    font-size: 11.5px;
    background: rgba(11, 16, 28, 0.4);
    border-radius: 6px;
    border: 1px dashed rgba(56, 189, 248, 0.18);
    margin: 8px 12px;
}

.pro-dock-empty i {
    font-size: 20px;
    color: #00F59B;
}

/* Sleek Glassmorphism Scrollbars */
.dashboard-main-content::-webkit-scrollbar,
.global-sidebar::-webkit-scrollbar,
.coins-list::-webkit-scrollbar,
.side-tabs-panel::-webkit-scrollbar,
.binance-positions-scroll::-webkit-scrollbar,
.open-trades-scroll-list::-webkit-scrollbar,
.closed-trades-scroll-list::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.dashboard-main-content::-webkit-scrollbar-track,
.global-sidebar::-webkit-scrollbar-track,
.coins-list::-webkit-scrollbar-track,
.side-tabs-panel::-webkit-scrollbar-track,
.binance-positions-scroll::-webkit-scrollbar-track {
    background: rgba(6, 10, 18, 0.4);
}

.dashboard-main-content::-webkit-scrollbar-thumb,
.global-sidebar::-webkit-scrollbar-thumb,
.coins-list::-webkit-scrollbar-thumb,
.side-tabs-panel::-webkit-scrollbar-thumb,
.binance-positions-scroll::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.22);
    border-radius: 4px;
}

.dashboard-main-content::-webkit-scrollbar-thumb:hover,
.global-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.45);
}

/* ==========================================================================
   PANEL 1: DASHBOARD (MAIN OVERVIEW) - EXACT SPECIFICATION FROM REFERENCE
   ========================================================================== */
.dashboard-overview-container {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* TOP METRICS IN TOP-BAR */
.top-metric-card {
    background: rgba(14, 21, 37, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 8px;
    padding: 5px 12px;
    display: flex;
    flex-direction: column;
    min-width: 140px;
}

.top-metric-card .tmc-label {
    font-size: 10px;
    color: #94A3B8;
    text-transform: capitalize;
    font-weight: 500;
}

.top-metric-card .tmc-val-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.top-metric-card .tmc-val {
    font-size: 13.5px;
    font-weight: 800;
    color: #F8FAFC;
    font-family: var(--font-mono);
}

.top-metric-card .tmc-badge {
    font-size: 9.5px;
    font-weight: 700;
    color: #00F59B;
    background: rgba(0, 245, 155, 0.12);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: var(--font-mono);
}

/* SIDEBAR SCANNER FOOTER */
.sidebar-scanner-status {
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.sidebar-scanner-status .scanner-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 245, 155, 0.12);
    border: 1px solid rgba(0, 245, 155, 0.3);
    color: #00F59B;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
}

.sidebar-scanner-status .scanner-tag .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00F59B;
    box-shadow: 0 0 6px #00F59B;
}

/* ROW 1: MINI TICKER CARDS GRID (5 COINS) */
.dashboard-tickers-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.mini-ticker-card {
    background: rgba(14, 21, 37, 0.84);
    border: 1px solid rgba(56, 189, 248, 0.16);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-ticker-card:hover {
    background: rgba(22, 33, 58, 0.85);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.mini-ticker-card.active {
    border-color: #38BDF8;
    background: rgba(16, 27, 49, 0.9);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.2);
}

.mtc-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mtc-coin-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mtc-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
}

.mtc-icon.btc { background: #f7931a; color: #fff; }
.mtc-icon.eth { background: #627eea; color: #fff; }
.mtc-icon.sol { background: #14f195; color: #000; }
.mtc-icon.bnb { background: #f3ba2f; color: #000; }
.mtc-icon.xau { background: #ffd700; color: #000; }

.mtc-sym {
    font-size: 11.5px;
    font-weight: 700;
    color: #F8FAFC;
    font-family: var(--font-mono);
}

.mtc-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.mtc-price {
    font-size: 12.5px;
    font-weight: 800;
    color: #F8FAFC;
    font-family: var(--font-mono);
}

.mtc-chg {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
}

.mtc-chg.up { color: #00F59B; }
.mtc-chg.down { color: #FF4D6A; }

.mtc-sparkline {
    width: 58px;
    height: 24px;
}

/* ROW 2: MAIN CHART + LIVE SIGNALS */
.dashboard-center-row {
    display: grid;
    grid-template-columns: 1fr 310px;
    gap: 12px;
    min-height: 480px;
    flex: 1;
}

.dashboard-chart-box {
    background: rgba(7, 10, 18, 0.90) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.dashboard-chart-header {
    height: 44px;
    background: rgba(14, 21, 37, 0.85);
    border-bottom: 1px solid rgba(56, 189, 248, 0.16);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    flex-shrink: 0;
}

.dch-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dch-coin-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 13px;
    color: #FFFFFF;
}

.dch-timeframes {
    display: flex;
    gap: 3px;
    background: rgba(10, 15, 26, 0.6);
    padding: 2px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.dch-tf-btn {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    transition: all 0.15s ease;
}

.dch-tf-btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.05);
}

.dch-tf-btn.active {
    background: #2563eb !important;
    color: #FFFFFF !important;
    font-weight: 700;
}

.dch-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* LIVE SIGNALS BOX */
.dashboard-signals-box {
    background: rgba(14, 21, 37, 0.84);
    border: 1px solid rgba(56, 189, 248, 0.16);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dash-box-header {
    height: 42px;
    background: rgba(10, 15, 26, 0.6);
    border-bottom: 1px solid rgba(56, 189, 248, 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: #F8FAFC;
    flex-shrink: 0;
}

.dash-box-header i {
    color: #00F59B;
    margin-right: 5px;
}

.dashboard-signals-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-signal-item {
    background: rgba(10, 15, 26, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dash-signal-item:hover {
    background: rgba(22, 33, 58, 0.7);
    border-color: rgba(56, 189, 248, 0.3);
}

.dsi-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dsi-sym {
    font-size: 11.5px;
    font-weight: 700;
    color: #F8FAFC;
    font-family: var(--font-mono);
}

.dsi-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
}

.dsi-badge.long {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.3);
}

.dsi-badge.short {
    background: rgba(255, 77, 106, 0.15);
    color: #FF4D6A;
    border: 1px solid rgba(255, 77, 106, 0.3);
}

.dsi-tf {
    font-size: 9.5px;
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.1);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
}

/* ============================================================
   HERMES 3.5 SINGLE TIER: LIVE SETUP RADAR CARDS
   ============================================================ */
.dash-radar-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(11, 17, 32, 0.9));
    border: 1px solid rgba(56, 189, 248, 0.15);
    border-radius: 7px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.dash-radar-card:hover {
    background: linear-gradient(135deg, rgba(20, 32, 60, 0.85), rgba(15, 23, 42, 0.95));
    border-color: rgba(56, 189, 248, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.dash-radar-card.imminent-pulse {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
    animation: radarPulse 2s infinite ease-in-out;
}

@keyframes radarPulse {
    0%, 100% { border-color: rgba(245, 158, 11, 0.4); box-shadow: 0 0 8px rgba(245, 158, 11, 0.15); }
    50% { border-color: rgba(245, 158, 11, 0.85); box-shadow: 0 0 16px rgba(245, 158, 11, 0.35); }
}

.dash-radar-card.active-running {
    border-color: rgba(0, 245, 155, 0.6);
    background: linear-gradient(135deg, rgba(6, 44, 28, 0.7), rgba(11, 25, 44, 0.9));
    box-shadow: 0 0 14px rgba(0, 245, 155, 0.25);
}

.drc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.drc-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.drc-sym {
    font-size: 12px;
    font-weight: 800;
    color: #F8FAFC;
    font-family: var(--font-mono);
}

.drc-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
}

.drc-badge.long {
    background: rgba(0, 245, 155, 0.16);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.35);
}

.drc-badge.short {
    background: rgba(255, 77, 106, 0.16);
    color: #FF4D6A;
    border: 1px solid rgba(255, 77, 106, 0.35);
}

.drc-prox-pill {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 12px;
    font-family: var(--font-mono);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.drc-prox-pill.imminent {
    background: rgba(245, 158, 11, 0.2);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.45);
}

.drc-prox-pill.in-zone {
    background: rgba(0, 245, 155, 0.16);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.4);
}

.drc-prox-pill.approaching {
    background: rgba(56, 189, 248, 0.14);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.35);
}

.drc-prox-pill.monitoring {
    background: rgba(148, 163, 184, 0.12);
    color: #94A3B8;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.drc-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    background: rgba(8, 12, 22, 0.55);
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.drc-metric-item {
    display: flex;
    flex-direction: column;
}

.drc-lbl {
    font-size: 8px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.drc-val {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
}

.drc-val.entry-val { color: #38BDF8; }
.drc-val.live-val { color: #E2E8F0; }
.drc-val.tp-val { color: #00F59B; }
.drc-val.dist-val { color: #FBBF24; }

.drc-progress-wrap {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.drc-progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.drc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9px;
    color: #94A3B8;
    padding-top: 2px;
}

.drc-prob-badge {
    color: #00F59B;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
}

.drc-sentry-badge {
    color: #38BDF8;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
}

.drc-status-lbl {
    color: #CBD5E1;
    font-weight: 600;
}

/* HERMES 3.5 RADAR CARD 2 ACTION POINTS (Chart & Position) */
.drc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    box-sizing: border-box;
}

.drc-action-btn {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    font-family: var(--font-mono);
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-sizing: border-box;
}

.drc-action-btn.btn-chart {
    background: rgba(56, 189, 248, 0.12);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.35);
}

.drc-action-btn.btn-chart:hover {
    background: rgba(56, 189, 248, 0.25);
    border-color: #38BDF8;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.25);
}

.drc-action-btn.btn-position {
    background: linear-gradient(135deg, rgba(0, 245, 155, 0.2), rgba(5, 150, 105, 0.3));
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.45);
}

.drc-action-btn.btn-position:hover {
    background: linear-gradient(135deg, #00F59B, #059669);
    color: #000000;
    border-color: #00F59B;
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(0, 245, 155, 0.35);
}

.drc-action-btn.btn-close-pos {
    background: rgba(255, 77, 106, 0.15);
    color: #FF4D6A;
    border: 1px solid rgba(255, 77, 106, 0.35);
}

.drc-action-btn.btn-close-pos:hover {
    background: rgba(255, 77, 106, 0.3);
    color: #FFFFFF;
    border-color: #FF4D6A;
}

/* ROW 3: OPEN POSITIONS + PERFORMANCE 7D */
.dashboard-bottom-row {
    display: grid;
    grid-template-columns: 1fr 310px;
    gap: 12px;
    min-height: 190px;
}

.dashboard-positions-box {
    background: rgba(14, 21, 37, 0.72);
    border: 1px solid rgba(56, 189, 248, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dash-positions-table-wrap {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
}

.dash-positions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    text-align: left;
    font-family: var(--font-mono);
}

.dash-positions-table th {
    background: rgba(10, 15, 26, 0.7);
    color: #64748B;
    font-weight: 700;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 10px;
    text-transform: uppercase;
}

.dash-positions-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #F8FAFC;
}

.dash-positions-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.btn-pos-close {
    background: #2563eb;
    color: #FFFFFF;
    border: none;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-pos-close:hover {
    background: #1d4ed8;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
}

/* PERFORMANCE 7D CARD */
.dashboard-perf-box {
    background: rgba(14, 21, 37, 0.72);
    border: 1px solid rgba(56, 189, 248, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.perf-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #F8FAFC;
}

.perf-main-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 8px 0;
}

.perf-main-stat .p-lbl {
    font-size: 10.5px;
    color: #94A3B8;
}

.perf-main-stat .p-val-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.perf-main-stat .p-val {
    font-size: 20px;
    font-weight: 900;
    color: #00F59B;
    font-family: var(--font-mono);
    text-shadow: 0 0 10px rgba(0, 245, 155, 0.25);
}

.perf-main-stat .p-pill {
    font-size: 10.5px;
    font-weight: 700;
    color: #00F59B;
    background: rgba(0, 245, 155, 0.12);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
}

.perf-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: rgba(10, 15, 26, 0.6);
    padding: 8px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
}

.perf-footer-grid .pf-item {
    display: flex;
    flex-direction: column;
}

.perf-footer-grid .pf-lbl {
    color: #64748B;
}

.perf-footer-grid .pf-val {
    font-weight: 700;
    color: #F8FAFC;
}

/* RESPONSIVE LAYOUT BREAKPOINTS */
@media (max-width: 1200px) {
    .dashboard-tickers-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .dashboard-center-row,
    .dashboard-bottom-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-tickers-row {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .mini-ticker-card {
        min-width: 160px;
        flex-shrink: 0;
    }
    .dashboard-overview-container {
        padding: 8px;
        gap: 8px;
    }
}

/* ==========================================================================
   PANEL 2: MARKETS OVERVIEW (ALL COINS) - 14-PAGE REFERENCE MATCH
   ========================================================================== */
.markets-overview-container {
    width: 100%;
    padding: 16px 20px 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

.markets-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.markets-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.markets-main-title {
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    margin: 0;
}

.markets-count-badge {
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 3px 8px;
    border-radius: 6px;
}

.markets-meta-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: #94A3B8;
    font-family: var(--font-mono);
}

/* Filter Toolbar */
.markets-filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.markets-filter-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.m-tab-pill {
    background: rgba(22, 30, 49, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.14);
    color: #94A3B8;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.m-tab-pill:hover {
    background: rgba(30, 41, 69, 0.85);
    color: #FFFFFF;
    border-color: rgba(56, 189, 248, 0.3);
}

.m-tab-pill.active {
    background: #2563eb;
    border-color: #38bdf8;
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.45);
}

.markets-search-wrap-p2 {
    position: relative;
    min-width: 240px;
    max-width: 340px;
    flex: 1;
}

.markets-search-wrap-p2 i.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748B;
    font-size: 12px;
}

.markets-search-input-p2 {
    width: 100%;
    background: rgba(10, 16, 28, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 20px;
    padding: 7px 32px 7px 34px;
    color: #FFFFFF;
    font-size: 12px;
    font-family: var(--font-main);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.markets-search-input-p2:focus {
    border-color: #38BDF8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.markets-search-wrap-p2 .clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #64748B;
    cursor: pointer;
    font-size: 12px;
    display: none;
}

/* Glassmorphism Table Container */
.markets-card-panel {
    background: rgba(14, 21, 37, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.markets-table-responsive {
    width: 100%;
    overflow-x: auto;
}

.panel2-markets-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.panel2-markets-table th {
    padding: 12px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(9, 14, 25, 0.95);
    border-bottom: 1px solid rgba(56, 189, 248, 0.14);
    white-space: nowrap;
    user-select: none;
}

.panel2-markets-table td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 12.5px;
    vertical-align: middle;
}

.panel2-markets-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.panel2-markets-row:hover {
    background: rgba(56, 189, 248, 0.05);
}

/* Row Columns */
.p2-rank {
    font-family: var(--font-mono);
    color: #64748B;
    font-size: 11.5px;
    font-weight: 600;
    width: 36px;
    text-align: center;
}

.p2-sym-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.p2-fav-star {
    cursor: pointer;
    color: #475569;
    font-size: 13px;
    transition: color 0.15s;
}

.p2-fav-star:hover {
    color: #ffd700;
}

.p2-fav-star.active {
    color: #ffd700;
}

.p2-coin-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 1px solid rgba(56, 189, 248, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #38BDF8;
    flex-shrink: 0;
}

.p2-sym-text {
    display: flex;
    flex-direction: column;
}

.p2-sym-name {
    font-weight: 700;
    color: #FFFFFF;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.p2-sym-sub {
    font-size: 10px;
    color: #64748B;
    font-family: var(--font-mono);
}

.p2-price {
    font-family: var(--font-mono);
    font-weight: 700;
    color: #F8FAFC;
    font-size: 13px;
}

.p2-chg-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    min-width: 62px;
}

.p2-chg-pill.pos {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.35);
}

.p2-chg-pill.neg {
    background: rgba(255, 77, 106, 0.15);
    color: #FF4D6A;
    border: 1px solid rgba(255, 77, 106, 0.35);
}

.p2-bias-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.4px;
    min-width: 52px;
}

.p2-bias-pill.bull {
    background: rgba(0, 245, 155, 0.12);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.3);
}

.p2-bias-pill.bear {
    background: rgba(255, 77, 106, 0.12);
    color: #FF4D6A;
    border: 1px solid rgba(255, 77, 106, 0.3);
}

.p2-bias-pill.neutral {
    background: rgba(148, 163, 184, 0.1);
    color: #94A3B8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.p2-zones-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    background: rgba(56, 189, 248, 0.12);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.25);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11.5px;
}

.p2-signal-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.p2-signal-pill.long {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.35);
}

.p2-signal-pill.short {
    background: rgba(255, 77, 106, 0.15);
    color: #FF4D6A;
    border: 1px solid rgba(255, 77, 106, 0.35);
}

.p2-signal-none {
    color: #64748B;
    font-family: var(--font-mono);
    font-size: 12px;
}

.p2-btn-trade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #2563eb;
    color: #FFFFFF;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.p2-btn-trade:hover {
    background: #1d4ed8;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
    color: #FFFFFF;
}

/* ==========================================================================
   PANEL 4: SIGNALS & ZONES RADAR (HERMES 2.0 APEX REFERENCE)
   ========================================================================== */
.signals-overview-container {
    width: 100%;
    padding: 16px 20px 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

.signals-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.signals-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.signals-main-title {
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    margin: 0;
}

.signals-count-badge {
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 3px 8px;
    border-radius: 6px;
}

.signals-meta-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: #94A3B8;
    font-family: var(--font-mono);
}

/* KPI Summary Cards Grid */
.signals-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.sig-kpi-card {
    background: rgba(14, 21, 37, 0.72);
    border: 1px solid rgba(56, 189, 248, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sig-kpi-label {
    font-size: 10px;
    color: #94A3B8;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.sig-kpi-val {
    font-size: 18px;
    font-weight: 800;
    color: #F8FAFC;
    font-family: var(--font-mono);
}

.sig-kpi-val.highlight {
    color: #38BDF8;
}

.sig-kpi-sub {
    font-size: 9.5px;
    color: #64748B;
    font-family: var(--font-mono);
}

/* Filter Toolbar */
.signals-filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.signals-filter-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.sig-tab-pill {
    background: rgba(22, 30, 49, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.14);
    color: #94A3B8;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.sig-tab-pill:hover {
    background: rgba(30, 41, 69, 0.85);
    color: #FFFFFF;
    border-color: rgba(56, 189, 248, 0.3);
}

.sig-tab-pill.active {
    background: #2563eb;
    border-color: #38bdf8;
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.45);
}

.signals-search-wrap {
    position: relative;
    min-width: 240px;
    max-width: 340px;
    flex: 1;
}

.signals-search-wrap i.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748B;
    font-size: 12px;
}

.signals-search-input {
    width: 100%;
    background: rgba(10, 16, 28, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 20px;
    padding: 7px 32px 7px 34px;
    color: #FFFFFF;
    font-size: 12px;
    font-family: var(--font-main);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.signals-search-input:focus {
    border-color: #38BDF8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.signals-search-wrap .clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #64748B;
    cursor: pointer;
    font-size: 12px;
    display: none;
}

/* Glassmorphism Table Card */
.signals-card-panel {
    background: rgba(14, 21, 37, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.signals-table-responsive {
    width: 100%;
    overflow-x: auto;
}

.panel4-signals-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.panel4-signals-table th {
    padding: 12px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(9, 14, 25, 0.95);
    border-bottom: 1px solid rgba(56, 189, 248, 0.14);
    white-space: nowrap;
    user-select: none;
}

.panel4-signals-table td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 12.5px;
    vertical-align: middle;
}

.panel4-signals-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.panel4-signals-row:hover {
    background: rgba(56, 189, 248, 0.05);
}

/* Specific Cell Styles */
.sig-rank {
    font-family: var(--font-mono);
    color: #64748B;
    font-size: 11.5px;
    font-weight: 600;
    width: 36px;
    text-align: center;
}

.sig-sym-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sig-coin-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 1px solid rgba(56, 189, 248, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #38BDF8;
    flex-shrink: 0;
}

.sig-sym-text {
    display: flex;
    flex-direction: column;
}

.sig-sym-name {
    font-weight: 700;
    color: #FFFFFF;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sig-sym-sub {
    font-size: 10px;
    color: #64748B;
    font-family: var(--font-mono);
}

/* Timeframe Pill */
.sig-tf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
}

.sig-tf-badge.tf-4h {
    background: rgba(168, 85, 247, 0.15);
    color: #C084FC;
    border: 1px solid rgba(168, 85, 247, 0.35);
}

.sig-tf-badge.tf-1h {
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.35);
}

.sig-tf-badge.tf-15m {
    background: rgba(251, 191, 36, 0.15);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.35);
}

/* Type/Side Badge */
.sig-side-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.sig-side-badge.buy {
    background: rgba(0, 245, 155, 0.14);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.35);
}

.sig-side-badge.sell {
    background: rgba(255, 77, 106, 0.14);
    color: #FF4D6A;
    border: 1px solid rgba(255, 77, 106, 0.35);
}

/* Zone High/Low */
.sig-price-range {
    font-family: var(--font-mono);
    font-weight: 700;
    color: #E2E8F0;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.sig-price-range .sep {
    color: #64748B;
    font-weight: 400;
}

/* IDM Sweep Move % */
.sig-sweep-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    background: rgba(0, 245, 155, 0.12);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.28);
    white-space: nowrap;
}

/* Confluence Score */
.sig-conf-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sig-conf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 11.5px;
    background: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.sig-conf-badge.elite {
    background: rgba(56, 189, 248, 0.14);
    color: #38BDF8;
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
}

/* Status Badges */
.sig-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.sig-status-badge.qualified {
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.35);
}

.sig-status-badge.active {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.35);
}

.sig-status-badge.first-tap {
    background: rgba(245, 158, 11, 0.18);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.45);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
    animation: tapPulse 2s infinite;
}

@keyframes tapPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.sig-status-badge.invalidated {
    background: rgba(148, 163, 184, 0.12);
    color: #94A3B8;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.sig-status-badge.tp-hit {
    background: rgba(0, 245, 155, 0.2);
    color: #00F59B;
    border: 1px solid #00F59B;
}

.sig-status-badge.sl-hit {
    background: rgba(255, 77, 106, 0.2);
    color: #FF4D6A;
    border: 1px solid #FF4D6A;
}

/* First Tap Time */
.sig-time-cell {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: #94A3B8;
    white-space: nowrap;
}

/* Action: View Chart Button */
.sig-btn-chart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #2563eb;
    color: #FFFFFF;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
    border: 1px solid rgba(56, 189, 248, 0.3);
    white-space: nowrap;
}

.sig-btn-chart:hover {
    background: #1d4ed8;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
    color: #FFFFFF;
}


/* ==========================================================================
   PANEL 9: HERMES AI (4-SENTRIES DIAGNOSTICS & AI CONSULTANT)
   ========================================================================== */
.hermes-ai-container {
    width: 100%;
    padding: 16px 20px 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    flex: 1;
}

.hermes-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.hermes-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hermes-main-title {
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    margin: 0;
}

.hermes-badge-cluster {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.hermes-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.hermes-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 1024px) {
    .hermes-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .hermes-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.hermes-kpi-card {
    background: rgba(13, 19, 33, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    backdrop-filter: blur(6px);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.hermes-kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.35);
}

.hermes-kpi-label {
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: 6px;
}

.hermes-kpi-val {
    font-size: 15px;
    font-weight: 800;
    color: #F8FAFC;
    font-family: var(--font-mono);
}

.hermes-kpi-sub {
    font-size: 10px;
    color: #64748B;
}

/* 4-Sentries Diagnostic Matrix */
.sentries-section-title {
    font-size: 13px;
    font-weight: 800;
    color: #F8FAFC;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.sentries-matrix-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 1200px) {
    .sentries-matrix-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .sentries-matrix-grid {
        grid-template-columns: 1fr;
    }
}

.sentry-card {
    background: rgba(11, 16, 28, 0.88);
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.sentry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.sentry-card.sentry-1::before { background: linear-gradient(90deg, #F59E0B, #FFD700); }
.sentry-card.sentry-2::before { background: linear-gradient(90deg, #38BDF8, #2563EB); }
.sentry-card.sentry-3::before { background: linear-gradient(90deg, #00F59B, #10B981); }
.sentry-card.sentry-4::before { background: linear-gradient(90deg, #A855F7, #EC4899); }

.sentry-card:hover {
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.sentry-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sentry-tag-box {
    font-size: 10px;
    font-weight: 800;
    font-family: var(--font-mono);
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: #94A3B8;
}

.sentry-status-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    font-family: var(--font-mono);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sentry-status-badge.pass {
    background: rgba(0, 245, 155, 0.14);
    border: 1px solid rgba(0, 245, 155, 0.35);
    color: #00F59B;
}

.sentry-status-badge.warn {
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #F59E0B;
}

.sentry-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
}

.sentry-subtitle {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.3;
}

.sentry-meter-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0;
}

.sentry-meter-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.sentry-meter-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.sentry-metrics-box {
    background: rgba(6, 10, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sentry-metric-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
}

.sentry-metric-item .lbl {
    color: #94A3B8;
}

.sentry-metric-item .val {
    font-family: var(--font-mono);
    font-weight: 700;
    color: #F8FAFC;
}

.sentry-desc {
    font-size: 10.5px;
    color: #64748B;
    line-height: 1.4;
    border-top: 1px dashed rgba(255, 255, 255, 0.07);
    padding-top: 8px;
}

/* AI Consultant Section */
.hermes-consultant-section {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 16px;
}

@media (max-width: 1080px) {
    .hermes-consultant-section {
        grid-template-columns: 1fr;
    }
}

.consultant-chat-card {
    background: rgba(11, 16, 28, 0.9);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: 600px;
    backdrop-filter: blur(6px);
    overflow: hidden;
}

.chat-header {
    padding: 12px 16px;
    background: rgba(8, 12, 22, 0.95);
    border-bottom: 1px solid rgba(56, 189, 248, 0.16);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-avatar-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00F59B, #38BDF8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #060a12;
    font-size: 15px;
    box-shadow: 0 0 10px rgba(0, 245, 155, 0.4);
}

.chat-messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-bubble {
    max-width: 88%;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
}

.chat-bubble.ai {
    align-self: flex-start;
    background: rgba(18, 26, 44, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.2);
    color: #F8FAFC;
    border-bottom-left-radius: 2px;
}

.chat-bubble.user {
    align-self: flex-end;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #FFFFFF;
    border-bottom-right-radius: 2px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.prompt-chips-wrap {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 14px;
    background: rgba(8, 12, 22, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.prompt-chip {
    padding: 4px 10px;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 14px;
    font-size: 11px;
    color: #94A3B8;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}

.prompt-chip:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38BDF8;
    color: #FFFFFF;
}

.chat-input-bar {
    padding: 10px 14px;
    background: rgba(8, 12, 22, 0.95);
    border-top: 1px solid rgba(56, 189, 248, 0.16);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-select {
    background: rgba(18, 26, 44, 0.8);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 6px;
    color: #F8FAFC;
    font-size: 11px;
    font-family: var(--font-mono);
    padding: 7px 8px;
    outline: none;
    cursor: pointer;
}

.chat-input {
    flex: 1;
    background: rgba(18, 26, 44, 0.8);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 6px;
    padding: 8px 12px;
    color: #FFFFFF;
    font-size: 12px;
    outline: none;
}

.chat-input:focus {
    border-color: #38BDF8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}

.chat-send-btn {
    background: linear-gradient(135deg, #00F59B, #00B87A);
    color: #060a12;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.15s ease;
}

.chat-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(0, 245, 155, 0.4);
}

/* Companion Panel: Live Setups */
.live-sentry-feed-card {
    background: rgba(11, 16, 28, 0.9);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: 600px;
    backdrop-filter: blur(6px);
    overflow: hidden;
}

.sentry-feed-header {
    padding: 12px 16px;
    background: rgba(8, 12, 22, 0.95);
    border-bottom: 1px solid rgba(56, 189, 248, 0.16);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sentry-feed-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sentry-setup-item {
    background: rgba(18, 26, 44, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s;
}

.sentry-setup-item:hover {
    border-color: rgba(56, 189, 248, 0.4);
}

.sentry-checks-strip {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.sentry-check-pill {
    font-size: 9.5px;
    font-family: var(--font-mono);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
}

.sentry-check-pill.pass {
    background: rgba(0, 245, 155, 0.12);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.3);
}

.sentry-check-pill.warn {
    background: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.3);
}


/* ==========================================================================
   PANEL 10: MIKE BRAIN (COGNITIVE ENGINE & MULTI-AGENT COUNCIL)
   ========================================================================== */
.brain-container {
    width: 100%;
    padding: 16px 20px 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    flex: 1;
}

.brain-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.brain-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brain-main-title {
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    margin: 0;
}

.brain-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 1024px) {
    .brain-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .brain-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.brain-kpi-card {
    background: rgba(13, 19, 33, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    backdrop-filter: blur(6px);
    transition: transform 0.15s ease;
}

.brain-kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.35);
}

.brain-kpi-label {
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: 6px;
}

.brain-kpi-val {
    font-size: 16px;
    font-weight: 800;
    font-family: var(--font-mono);
}

.brain-kpi-sub {
    font-size: 10px;
    color: #64748B;
}

/* Split Grid */
.brain-split-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 16px;
}

@media (max-width: 1024px) {
    .brain-split-grid {
        grid-template-columns: 1fr;
    }
}

.pro-card {
    background: rgba(11, 16, 28, 0.88);
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    backdrop-filter: blur(6px);
}

.pro-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 10px;
}

.pro-card-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pro-card-subtitle {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Factor Weight Slider Rows */
.factor-slider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.factor-name {
    font-size: 11.5px;
    color: #E2E8F0;
    width: 170px;
    flex-shrink: 0;
}

.factor-track-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.factor-bar-bg {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.factor-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.factor-val-badge {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    min-width: 55px;
    text-align: right;
}

/* Continuous Lessons Learned */
.lessons-stream-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 290px;
    overflow-y: auto;
    padding-right: 4px;
}

.lesson-card {
    background: rgba(18, 26, 44, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.14);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s;
}

.lesson-card:hover {
    border-color: rgba(56, 189, 248, 0.35);
}

.lesson-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lesson-title-text {
    font-size: 12px;
    font-weight: 700;
    color: #F59E0B;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lesson-cat-pill {
    font-size: 9px;
    font-family: var(--font-mono);
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    font-weight: 700;
}

.lesson-body {
    font-size: 11px;
    color: #CBD5E1;
    line-height: 1.4;
}

/* Agent Council Grid */
.agent-council-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 1200px) {
    .agent-council-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .agent-council-grid {
        grid-template-columns: 1fr;
    }
}

.agent-council-card {
    background: rgba(11, 16, 28, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.agent-council-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.agent-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.agent-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.agent-name-title h4 {
    font-size: 12px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
}

.agent-name-title span {
    font-size: 9.5px;
    color: var(--text-muted);
}

.agent-desc-text {
    font-size: 10.5px;
    color: #94A3B8;
    line-height: 1.35;
}

.agent-meta-strip {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-family: var(--font-mono);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 6px;
    color: #64748B;
}

/* Cognitive Reflection Log Window */
.reflection-log-window {
    background: rgba(6, 10, 18, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 6px;
    padding: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ref-log-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
    color: #CBD5E1;
}

.ref-log-time {
    color: #64748B;
    font-size: 10px;
    flex-shrink: 0;
}

.ref-log-tag {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ==========================================================================
   PANEL 8: COMPOUNDING & PANEL 7: PERFORMANCE ANALYTICS (14-PAGE REFERENCE)
   ========================================================================== */
.compounding-overview-container {
    width: 100%;
    padding: 16px 20px 48px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* Header Sections */
.compounding-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.compounding-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.compounding-main-title {
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.compounding-count-badge {
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #ffd700;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 3px 9px;
    border-radius: 6px;
}

.compounding-meta-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: #94A3B8;
    font-family: var(--font-mono);
}

/* Milestone Progress Cards (5 Cards) */
.compounding-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 1200px) {
    .compounding-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .compounding-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.compounding-kpi-card {
    background: rgba(14, 21, 37, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.compounding-kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.35);
}

.compounding-kpi-card.highlight-gold {
    border-color: rgba(245, 158, 11, 0.35);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(14, 21, 37, 0.8) 100%);
}

.compounding-kpi-card.highlight-cyan {
    border-color: rgba(56, 189, 248, 0.35);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(14, 21, 37, 0.8) 100%);
}

.compounding-kpi-card.highlight-green {
    border-color: rgba(0, 245, 155, 0.35);
    background: linear-gradient(135deg, rgba(0, 245, 155, 0.08) 0%, rgba(14, 21, 37, 0.8) 100%);
}

.ckpi-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ckpi-label {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ckpi-icon-box {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.ckpi-val-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ckpi-val {
    font-size: 18px;
    font-weight: 900;
    color: #FFFFFF;
    font-family: var(--font-mono);
}

.ckpi-badge {
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.ckpi-sub {
    font-size: 10.5px;
    color: #64748B;
    font-family: var(--font-mono);
}

.ckpi-progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}

.ckpi-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #38BDF8, #00F59B);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* Two-column layout for Chart + Risk Engine */
.compounding-grid-two-col {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    align-items: stretch;
}

@media (max-width: 1080px) {
    .compounding-grid-two-col {
        grid-template-columns: 1fr;
    }
}

/* Growth Projection Chart Card */
.compounding-chart-card {
    background: rgba(14, 21, 37, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.chart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 12px;
}

.chart-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #F8FAFC;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-legend-pills {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-family: var(--font-mono);
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #94A3B8;
}

.chart-legend-item .legend-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.chart-canvas-container {
    width: 100%;
    height: 250px;
    position: relative;
}

.chart-canvas-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Risk Engine Settings Card */
.risk-engine-settings-card {
    background: rgba(14, 21, 37, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.risk-settings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.risk-setting-row {
    background: rgba(10, 16, 28, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.12);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: border-color 0.2s;
}

.risk-setting-row:hover {
    border-color: rgba(56, 189, 248, 0.28);
}

.rs-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rs-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.rs-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rs-name {
    font-size: 12px;
    font-weight: 700;
    color: #F8FAFC;
}

.rs-desc {
    font-size: 10px;
    color: #64748B;
}

.rs-value-tag {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 11.5px;
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
}

/* Milestone Ladder Table Card */
.ladder-card-panel {
    background: rgba(14, 21, 37, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.ladder-card-header {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(56, 189, 248, 0.14);
    background: rgba(9, 14, 25, 0.95);
    flex-wrap: wrap;
    gap: 10px;
}

.ladder-table-responsive {
    width: 100%;
    overflow-x: auto;
    max-height: 420px;
    overflow-y: auto;
}

.panel8-ladder-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.panel8-ladder-table th {
    padding: 11px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(9, 14, 25, 0.98);
    border-bottom: 1px solid rgba(56, 189, 248, 0.14);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.panel8-ladder-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 12px;
    vertical-align: middle;
    font-family: var(--font-mono);
}

.panel8-ladder-table tr.active-step-row {
    background: rgba(245, 158, 11, 0.09) !important;
    border-left: 3px solid #f59e0b;
}

.panel8-ladder-table tr.completed-step-row {
    background: rgba(0, 245, 155, 0.03);
}

.panel8-ladder-table tr:hover {
    background: rgba(56, 189, 248, 0.05);
}

/* SECTION 2: PERFORMANCE ANALYTICS */
.performance-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 1px dashed rgba(56, 189, 248, 0.2);
    padding-top: 24px;
    margin-top: 8px;
}

.perf-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 1200px) {
    .perf-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .perf-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.perf-kpi-card {
    background: rgba(14, 21, 37, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.perf-kpi-card .pkpi-lbl {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.perf-kpi-card .pkpi-val {
    font-size: 18px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #FFFFFF;
}

.perf-kpi-card .pkpi-sub {
    font-size: 10px;
    color: #64748B;
    font-family: var(--font-mono);
}

/* 1H vs 4H Performance Comparison Card */
.perf-comparison-card {
    background: rgba(14, 21, 37, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.perf-comp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 12px;
}

.perf-comp-title {
    font-size: 14px;
    font-weight: 700;
    color: #F8FAFC;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Visual Comparison Bar */
.comparison-bar-container {
    background: rgba(10, 16, 28, 0.8);
    border: 1px solid rgba(56, 189, 248, 0.15);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comparison-bar-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-family: var(--font-mono);
    color: #94A3B8;
}

.dual-progress-bar-track {
    width: 100%;
    height: 12px;
    background: rgba(15, 23, 42, 0.9);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.dual-progress-bar-track .bar-win {
    background: linear-gradient(90deg, #10b981, #00F59B);
    height: 100%;
}

.dual-progress-bar-track .bar-be {
    background: linear-gradient(90deg, #0284c7, #38BDF8);
    height: 100%;
}

.dual-progress-bar-track .bar-loss {
    background: linear-gradient(90deg, #e11d48, #FF4D6A);
    height: 100%;
}

/* Dual Box Grid for 1H and 4H */
.perf-dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 800px) {
    .perf-dual-grid {
        grid-template-columns: 1fr;
    }
}

.timeframe-scorecard-box {
    background: rgba(10, 16, 28, 0.7);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.timeframe-scorecard-box.theme-amber {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.04) 0%, rgba(10, 16, 28, 0.8) 100%);
}

.timeframe-scorecard-box.theme-green {
    border-color: rgba(0, 245, 155, 0.3);
    background: linear-gradient(180deg, rgba(0, 245, 155, 0.04) 0%, rgba(10, 16, 28, 0.8) 100%);
}

.tf-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}

.tf-stats-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    font-family: var(--font-mono);
}

.tf-stat-cell {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tf-stat-cell .c-lbl {
    font-size: 10px;
    color: #64748B;
}

.tf-stat-cell .c-val {
    font-size: 14px;
    font-weight: 800;
}

.tf-compounding-highlight {
    background: rgba(15, 23, 42, 0.85);
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-mono);
}

/* ==========================================================================
   PANEL 5: POSITIONS (OPEN POSITIONS) & PANEL 6: TRADE HISTORY & EXECUTIONS
   Matching 14-Page Master Reference Image
   ========================================================================== */

.positions-history-main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 20px 40px 20px;
    gap: 20px;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

/* Glassmorphism Section Card (Matches Panel 5 & Panel 6) */
.pos-section-card {
    background: rgba(14, 21, 37, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    position: relative;
}

/* Header Row for Section */
.pos-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pos-title-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pos-title-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.pos-title-icon.positions {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.3);
}

.pos-title-icon.history {
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.pos-title-text-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pos-section-title {
    font-size: 15px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-section-subtitle {
    font-size: 11px;
    color: #64748B;
    font-family: var(--font-mono);
}

.pos-badge-count {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 2px 7px;
    border-radius: 4px;
}

.pos-badge-count.live {
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.3);
}

.pos-badge-count.hist {
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.pos-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid rgba(56, 189, 248, 0.25);
    background: rgba(30, 41, 59, 0.6);
    color: #F8FAFC;
    text-decoration: none;
}

.pos-action-btn:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38BDF8;
    color: #FFFFFF;
}

.pos-action-btn.danger {
    background: rgba(255, 77, 106, 0.12);
    border-color: rgba(255, 77, 106, 0.3);
    color: #FF4D6A;
}

.pos-action-btn.danger:hover {
    background: rgba(255, 77, 106, 0.25);
    border-color: #FF4D6A;
    color: #FFFFFF;
}

/* History Filter Pills Toolbar */
.history-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.history-filter-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(9, 14, 25, 0.6);
    padding: 3px 4px;
    border-radius: 7px;
    border: 1px solid rgba(56, 189, 248, 0.14);
}

.h-tab-pill {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.h-tab-pill:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.05);
}

.h-tab-pill.active {
    background: #2563eb;
    color: #FFFFFF;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
}

.history-stats-chips {
    display: flex;
    align-items: center;
    gap: 8px;
}

.h-stat-chip {
    font-size: 11px;
    font-family: var(--font-mono);
    color: #94A3B8;
    background: rgba(15, 23, 42, 0.7);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Table Responsive Wrappers */
.pos-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(9, 13, 22, 0.5);
}

/* Master Table Styling */
.pos-master-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
}

.pos-master-table th {
    background: rgba(10, 16, 28, 0.85);
    color: #64748B;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}

.pos-master-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #F8FAFC;
    vertical-align: middle;
}

.pos-master-table tr:hover {
    background: rgba(56, 189, 248, 0.03);
}

.pos-master-table tr:last-child td {
    border-bottom: none;
}

/* Side Pills (BUY / SELL) */
.pill-side-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 10.5px;
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.35);
}

.pill-side-sell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 10.5px;
    background: rgba(255, 77, 106, 0.15);
    color: #FF4D6A;
    border: 1px solid rgba(255, 77, 106, 0.35);
}

/* PnL Styling */
.val-pnl-pos {
    color: #00F59B;
    font-family: var(--font-mono);
    font-weight: 700;
}

.val-pnl-neg {
    color: #FF4D6A;
    font-family: var(--font-mono);
    font-weight: 700;
}

/* Action Button: Close Position Blue Button */
.btn-close-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #2563eb;
    color: #FFFFFF;
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.btn-close-position:hover {
    background: #1d4ed8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
    color: #FFFFFF;
}

/* Result Pills (TP / SL / Manual Close) */
.pill-result-tp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    background: rgba(0, 245, 155, 0.15);
    color: #00F59B;
    border: 1px solid rgba(0, 245, 155, 0.35);
}

.pill-result-sl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    background: rgba(255, 77, 106, 0.15);
    color: #FF4D6A;
    border: 1px solid rgba(255, 77, 106, 0.35);
}

.pill-result-manual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.35);
}

/* Radar Pulse Empty State (Matching Panel 5 Empty State Requirement) */
.radar-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 44px 16px;
    text-align: center;
    gap: 8px;
}

.radar-pulse-anim {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.radar-core {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 245, 155, 0.18);
    border: 2px solid #00F59B;
    color: #00F59B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    z-index: 2;
    box-shadow: 0 0 16px rgba(0, 245, 155, 0.4);
}

.radar-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 245, 155, 0.45);
    animation: radarPulse 2.4s infinite cubic-bezier(0.2, 0.8, 0.4, 1);
    pointer-events: none;
}

.radar-ring.r2 {
    animation-delay: 0.8s;
}

.radar-ring.r3 {
    animation-delay: 1.6s;
}

@keyframes radarPulse {
    0% {
        width: 36px;
        height: 36px;
        opacity: 0.9;
    }
    100% {
        width: 76px;
        height: 76px;
        opacity: 0;
    }
}

.radar-title {
    font-size: 14px;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: -0.01em;
}

.radar-desc {
    font-size: 11.5px;
    color: #64748B;
    max-width: 440px;
    line-height: 1.45;
}

.radar-active-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    background: rgba(0, 245, 155, 0.1);
    border: 1px solid rgba(0, 245, 155, 0.25);
    color: #00F59B;
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.radar-active-tag .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00F59B;
    box-shadow: 0 0 6px #00F59B;
}


/* ==========================================================================
   HERMES 3.5 MASTER MOBILE RESPONSIVE OVERHAUL (<= 768px)
   Applied globally across all views: Home, Markets, Futures, Compounding,
   Positions, Signals, Hermes AI, Brain, Forensics, and Settings.
   Zero micro-fonts (<12px), single-column stacking, native touch ergonomics.
   ========================================================================== */
/* ==========================================================================
   HERMES QUANT INSTITUTIONAL RESPONSIVE SYSTEM (PROFESSIONAL COMPACT UX)
   Modeled after Binance Futures Pro & Bitget Terminal:
   - High information density, zero artificial zoom
   - Compact, crisp typography (10-11px labels, 13-15px values)
   - Clean 5-column / 2-column compounding matrix
   ========================================================================== */
html {
    font-size: 13.5px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

body.dark-theme {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

@media screen and (max-width: 1024px) {
    html {
        font-size: 13px !important;
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: 12.5px !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    body {
        font-size: 12px !important;
        line-height: 1.35 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-bottom: 64px !important;
    }

    /* Container Widths & Stacking */
    .app-container, .main-content, .content-area, .dashboard-container,
    .dashboard-grid, .grid-container, .layout-container {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    /* Professional 2-Column Deca Compounding Matrix on Mobile */
    .deca-compounding-grid, #decaCompoundingGrid, .matrix-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .deca-section-card {
        padding: 8px 10px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    /* Typography Hierarchy - Sleek & Compact */
    h1, .page-title, .section-heading, .sh-title {
        font-size: 17px !important;
        font-weight: 800 !important;
        letter-spacing: -0.2px !important;
        line-height: 1.25 !important;
    }

    h2, .card-heading, .box-title, .panel-title, .rc-title {
        font-size: 14.5px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    h3, .sub-heading, .item-title {
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    /* Total Hero Balance */
    .hw-balance, .hero-balance, .equity-balance, .total-equity-val {
        font-size: 26px !important;
        font-weight: 800 !important;
        letter-spacing: -0.5px !important;
        line-height: 1.15 !important;
    }

    /* Cards & Panels */
    .card, .panel, .box, .radar-card, .hero-wallet-card,
    .dash-radar-card, .dashboard-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
        margin-bottom: 8px !important;
    }

    /* Compact Sleek Trading Buttons */
    button, .btn, .drc-action-btn, .action-btn, .btn-primary, .btn-secondary {
        min-height: 32px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        padding: 6px 12px !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }

    /* Navigation Icons */
    .header-avatar, .brand-avatar {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 18px !important;
    }

    .nav-item i {
        font-size: 20px !important;
    }

    .nav-item span {
        font-size: 11px !important;
    }

    /* Bottom Navigation Bar */
    .bottom-nav, #bottomNav {
        height: 56px !important;
        padding-bottom: env(safe-area-inset-bottom, 2px) !important;
    }

    /* Compact Tables */
    table {
        font-size: 11.5px !important;
    }

    th, td {
        padding: 6px 6px !important;
        font-size: 11.5px !important;
    }

    .badge, .tag, .pill, .sidebar-badge, .drc-badge, .hw-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
    }
}