/* ============================================================================
   PolyAmore Dashboard - Theme System
   ============================================================================ */

:root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --bg-hover: #30363d;
    --border: #30363d;
    --text-primary: #e6edf3;
    --text-secondary: #a8b3be;
    --text-muted: #6e7681;
    --accent-blue: #58a6ff;
    --accent-green: #3fb950;
    --accent-red: #f85149;
    --accent-yellow: #d29922;
    --accent-purple: #bc8cff;
    --accent-cyan: #39d353;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --radius: 8px;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    /* Chart colors (used by JS) */
    --chart-bg: #161b22;
    --chart-text: #8b949e;
    --chart-grid: rgba(33,38,45,0.6);
    --chart-crosshair: rgba(88,166,255,0.3);
    --chart-crosshair-label: #1f6feb;
    --profit: #00c853;
    --loss: #f85149;
}

/* ── Light Theme ── */
/* Muted warm palette — easy on the eyes with strong color contrast */
html[data-theme="light"] {
    --bg-primary: #e8e4de;
    --bg-secondary: #ddd8d0;
    --bg-tertiary: #d1cbc2;
    --bg-hover: #c5beb4;
    --border: #b8b0a5;
    --text-primary: #1a1714;
    --text-secondary: #4a4239;
    --text-muted: #7a7168;
    --accent-blue: #1d5a9e;
    --accent-green: #1a7a42;
    --accent-red: #c0392b;
    --accent-yellow: #b8860b;
    --accent-purple: #7b3fa0;
    --accent-cyan: #0e8a6e;
    --shadow: 0 1px 4px rgba(30, 25, 18, 0.12);
    --chart-bg: #ddd8d0;
    --chart-text: #4a4239;
    --chart-grid: rgba(184,176,165,0.5);
    --chart-crosshair: rgba(29,90,158,0.3);
    --chart-crosshair-label: #1d5a9e;
    --profit: #1a7a42;
    --loss: #c0392b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.navbar {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Top row: brand left, indicators right */
.navbar-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.25rem 1rem;
    border-bottom: 1px solid var(--border);
}

/* Bottom row: stats + controls */
.navbar-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 1rem;
    width: 100%;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.logo { font-size: 1.4rem; }

.mode-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--accent-yellow);
    color: var(--bg-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mode-badge.live {
    background: var(--accent-red);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.nav-stats {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
    padding-bottom: 6px;
}
.nav-stats::-webkit-scrollbar { height: 3px; }
.nav-stats::-webkit-scrollbar-track { background: transparent; border-radius: 2px; }
.nav-stats::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 2px; opacity: 0.5; }
.nav-stats::-webkit-scrollbar-thumb:hover { background: var(--text-primary); }

/* Visual separator before win/profit stats group */
.stat-group-sep { margin-left: 0.5rem; padding-left: 1rem; border-left: 1px solid var(--border); }

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-mono);
}

.stat-value.positive { color: var(--accent-green); }
.stat-value.negative { color: var(--accent-red); }
.pnl-pct { font-size: 0.7rem; opacity: 0.8; font-weight: 500; }

.nav-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Sub-navbar: thin performance stats bar below main navbar */
.sub-navbar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.3rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;
    flex-shrink: 0;
    scrollbar-width: thin;
}
.sub-navbar::-webkit-scrollbar { height: 4px; }
.sub-navbar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.sub-stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.75rem;
}

.sub-stat-label {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.sub-stat-value {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-primary);
}

.sub-stat-value.positive { color: var(--accent-green); }
.sub-stat-value.negative { color: var(--accent-red); }
.sub-stat-value.warning-text { color: var(--accent-yellow, #d29922); }

.sub-stat-divider {
    width: 1px;
    height: 1rem;
    background: var(--border);
    flex-shrink: 0;
}

.ws-status {
    font-size: 0.75rem;
    color: var(--accent-red);
    transition: color 0.3s;
}

.ws-status.connected { color: var(--accent-green); }

.rpc-status {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: color 0.3s;
    cursor: pointer;
}
.rpc-status.healthy { color: var(--accent-green); }
.rpc-status.degraded { color: var(--accent-yellow); }
.rpc-status.down { color: var(--accent-red); animation: pulse 1s infinite; }

.ai-status {
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.3s;
}
.ai-status.healthy { color: var(--accent-green); }
.ai-status.degraded { color: var(--accent-yellow); }
.ai-status.disabled { color: var(--text-muted); }
.ai-status.error { color: var(--accent-red); }

.analytics-status {
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.3s;
}
.analytics-status.healthy { color: var(--accent-green); }
.analytics-status.degraded { color: var(--accent-yellow); }
.analytics-status.down { color: var(--accent-red); animation: pulse 1s infinite; }

/* Exchange Connection Status Indicators */
/* exchange-separator class removed — now using .status-indicator-divider */
.exchange-status { font-size: 0.75rem; color: var(--text-muted); cursor: pointer; transition: color 0.3s; }
.exchange-status.connected { color: var(--accent-green); }
.exchange-status.degraded { color: var(--accent-yellow); }
.exchange-status.disconnected { color: var(--accent-red); animation: pulse 1s infinite; }
.exchange-status.disabled { color: var(--text-muted); }

/* RPC dot on strategy cards */
.rpc-dep-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    margin-left: 4px;
    vertical-align: middle;
}
.rpc-dep-dot.healthy { background: var(--accent-green); }
.rpc-dep-dot.degraded { background: var(--accent-yellow); }
.rpc-dep-dot.down { background: var(--accent-red); }

.btn {
    padding: 0.4rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s;
}

.btn:hover { background: var(--bg-hover); }
.btn-sm { padding: 0.2rem 0.6rem; font-size: 0.7rem; }

.btn-primary {
    background: var(--accent-blue);
    color: var(--bg-primary);
    border-color: var(--accent-blue);
}

.btn-success {
    background: var(--accent-green);
    color: var(--bg-primary);
    border-color: var(--accent-green);
}

.btn-danger {
    background: transparent;
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.btn-danger:hover { background: var(--accent-red); color: white; }

.btn-danger.active {
    background: var(--accent-red);
    color: white;
    animation: pulse 1s infinite;
}

.btn-danger-sm {
    background: transparent;
    color: var(--accent-red);
    border: 1px solid var(--accent-red);
    border-radius: 3px;
    font-size: 0.6rem;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.btn-danger-sm:hover { background: var(--accent-red); color: white; }

.btn-warning {
    background: transparent;
    color: #d2992a;
    border-color: #d2992a;
}
.btn-warning:hover { background: #d2992a; color: white; }

.dashboard {
    display: grid;
    grid-template-columns: 280px 8px 1fr 8px 300px;
    gap: 0;
    padding: 0.4rem;
    flex: 1;
    min-height: 0;
}

.left-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.left-column .strategies-panel {
    flex: 1;
    min-height: 0;
}
.left-column .intel-panel {
    flex: 0 0 auto;
    max-height: 40%;
}
.right-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.right-column .risk-panel {
    flex: 1;
    min-height: 0;
}
.right-column .market-intel-panel {
    flex: 0 0 auto;
    max-height: 45%;
}

/* ── Collapsible columns & sections ────────────────────────── */
/*
 * Headers are physically moved OUT of their panel/section wrappers by JS
 * so they become direct children of the scroll container.  This guarantees
 * position:sticky works — the header is never constrained by a parent box.
 *
 * DOM after init (columns):
 *   .collapsible-column
 *     .panel-header.collapsible-sticky-header   ← extracted, sticky
 *     .panel.collapsible-panel-body              ← body wrapper
 *     .panel-header.collapsible-sticky-header
 *     .panel.collapsible-panel-body
 *
 * DOM after init (center sections like Trading Activity):
 *   .collapsible-sections
 *     .metrics-cards-section                     ← unchanged
 *     .activity-feed-header.collapsible-sticky-header
 *     .activity-feed-section.collapsible-section-body
 */

.collapsible-column {
    overflow-y: auto !important;
    overflow-x: hidden;
    gap: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.collapsible-column::-webkit-scrollbar { width: 4px; }
.collapsible-column::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.collapsible-column::-webkit-scrollbar-track { background: transparent; }

/* Panels that lost their header become seamless body wrappers.
 * Override flex/overflow so content flows naturally in the column
 * scroll — no internal scroll containers, no height constraints. */
.collapsible-column > .collapsible-panel-body {
    flex: 0 0 auto !important;
    max-height: none !important;
    min-height: 0;
    border-radius: 0;
    border: none;
    overflow: visible;
    transition: height 0.25s ease;
}
.collapsible-column > .collapsible-panel-body > .panel-body {
    overflow: visible;
    flex: none;
}

/* ── Sticky headers (shared by columns & center sections) ──── */
.collapsible-sticky-header {
    position: sticky;
    top: 0;
    z-index: 5;
    user-select: none;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.collapsible-sticky-header:hover {
    background: color-mix(in srgb, var(--bg-tertiary) 80%, var(--accent-blue) 20%);
}

/* Collapse chevron */
.panel-collapse-chevron {
    font-size: 0.55rem;
    color: var(--text-secondary);
    margin-left: auto;
    padding-left: 0.5rem;
    transition: transform 0.25s ease;
    display: inline-block;
    line-height: 1;
    flex-shrink: 0;
}
.collapsible-sticky-header.collapsed .panel-collapse-chevron {
    transform: rotate(-90deg);
}

/* Collapsed body (panel or section) — hidden via JS display:none after animation */
.market-intel-panel .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.8rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.panel-header h2 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-body {
    padding: 0.5rem;
    overflow-y: auto;
    flex: 1;
}

.strategy-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.4rem;
    transition: border-color 0.2s;
}
.strategy-card.risk-band-low    { border-left: 3px solid #00d1b2; }
.strategy-card.risk-band-med    { border-left: 3px solid #ffb74d; }
.strategy-card.risk-band-high   { border-left: 3px solid #ff5252; }
.strategy-card.risk-band-tool   { border-left: 3px solid #58a6ff; }

.strategy-card:hover { border-color: var(--accent-blue); }
.strategy-card.scaled-disabled { opacity: 0.75; border-style: dashed; border-color: var(--accent-yellow); transition: none !important; animation: none !important; }
.strategy-card.scaled-disabled:hover { border-color: var(--accent-yellow); transition: none !important; }

.strategy-card .header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.4rem;
}

.strategy-card .name { font-size: 0.8rem; font-weight: 600; }

.strategy-card .header-badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
}

.risk-badge {
    font-size: 0.55rem;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.risk-low    { background: rgba(0,209,178,0.15); color: #00d1b2; border: 1px solid rgba(0,209,178,0.3); }
.risk-med    { background: rgba(255,183,77,0.15); color: #ffb74d; border: 1px solid rgba(255,183,77,0.3); }
.risk-high   { background: rgba(255,82,82,0.15);  color: #ff5252; border: 1px solid rgba(255,82,82,0.3); }
.risk-tool   { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.3); }

.strategy-card .state {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.state.running { background: rgba(63,185,80,0.2); color: var(--accent-green); }
.state.stopped { background: rgba(139,148,158,0.2); color: var(--text-secondary); }
.state.paused { background: rgba(210,153,34,0.2); color: var(--accent-yellow); }
.state.error { background: rgba(248,81,73,0.2); color: var(--accent-red); }

.platform-badge {
    display: inline-block;
    padding: 1px 5px;
    font-size: 0.55rem;
    font-weight: 600;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.platform-badge.kalshi { background: rgba(88,166,255,0.2); color: var(--accent-blue); }
.platform-badge.polymarket-us, .platform-badge.platform-us { background: rgba(63,185,80,0.2); color: var(--accent-green); }
.platform-badge.polymarket-intl, .platform-badge.platform-intl { background: rgba(163,113,247,0.2); color: #a371f7; }

.strategy-card.creds-missing { opacity: 0.7; }
.creds-banner {
    background: rgba(210,153,34,0.15);
    color: var(--accent-yellow);
    font-size: 0.6rem;
    text-align: center;
    padding: 0.2rem 0.4rem;
    margin: -0.3rem -0.4rem 0.3rem;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
}
.creds-banner:hover { background: rgba(210,153,34,0.25); }

.strategy-card .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
    margin: 0.4rem 0;
    font-size: 0.72rem;
}

.strategy-card .stats .label { color: var(--text-secondary); }
.strategy-card .stats .value { text-align: right; font-family: var(--font-mono); font-size: 0.72rem; }

.strategy-card .controls { display: flex; gap: 0.3rem; margin-top: 0.4rem; }
.strategy-card .controls .btn { flex: 1; padding: 0.25rem 0; font-size: 0.65rem; }

.strategy-card .signal {
    font-size: 0.65rem;
    color: var(--text-secondary);
    background: rgba(139, 148, 158, 0.1);
    border: 1px solid rgba(139, 148, 158, 0.18);
    border-radius: 4px;
    margin-top: 0.3rem;
    padding: 0.2rem 0.45rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.strategy-card .signal:hover {
    background: rgba(139, 148, 158, 0.18);
    color: var(--text-primary);
}
.strategy-card .signal.expanded {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}
.strategy-card .tick-status-bar {
    font-size: 0.6rem;
    color: var(--text-secondary);
    background: rgba(139, 148, 158, 0.08);
    border: 1px solid rgba(139, 148, 158, 0.14);
    border-radius: 4px;
    margin-top: 0.25rem;
    padding: 0.18rem 0.45rem;
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.strategy-card .tick-status-bar:hover {
    background: rgba(139, 148, 158, 0.16);
    color: var(--text-primary);
}
.strategy-card .tick-status-bar .tick-dot {
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.strategy-card .tick-status-bar .tick-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.strategy-card .tick-status-bar.expanded .tick-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}

/* ── Copy Trading Leaders ── */
.strategy-card .leaders {
    margin-top: 0.4rem;
    border-top: 1px solid var(--border);
    padding-top: 0.35rem;
}
.strategy-card .leaders-title {
    font-size: 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    font-weight: 600;
}
.leader-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0;
    font-size: 0.65rem;
    border-bottom: 1px solid rgba(48,54,61,0.4);
}
.leader-row:last-child { border-bottom: none; }
.leader-addr {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--accent-blue);
    text-decoration: none;
    flex-shrink: 0;
    cursor: pointer;
}
.leader-addr:hover { text-decoration: underline; color: var(--link-hover, #79c0ff); }
.leader-stats {
    display: flex;
    gap: 0.4rem;
    flex: 1;
    justify-content: flex-end;
    font-size: 0.6rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}
.leader-active { color: var(--accent-green); }
.leader-inactive { color: var(--text-muted); }
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--accent-yellow, #d29922);
    background: rgba(210,153,34,0.12);
    border-radius: 3px;
    padding: 0 0.2rem;
    flex-shrink: 0;
    line-height: 1.4;
}

.chart-container { padding: 0 !important; }
#priceChart { width: 100%; height: 100%; min-height: 250px; }

.tab {
    padding: 0.2rem 0.6rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.tab.active { background: var(--accent-blue); color: var(--bg-primary); border-color: var(--accent-blue); }

/* Settings Tabs */
.settings-tabs {
    display: flex;
    gap: 0.3rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
    margin: -0.8rem -1rem 0;
    padding-top: 1.3rem;
    overflow-x: auto;
    flex-shrink: 0;
    position: sticky;
    top: -0.8rem;
    z-index: 10;
    background: var(--bg-secondary);
}
.settings-tabs::-webkit-scrollbar { height: 4px; }
.settings-tabs::-webkit-scrollbar-track { background: var(--bg-tertiary); border-radius: 2px; }
.settings-tabs::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 2px; }

/* Settings Subtabs (e.g., inside Strategies) */
.settings-subtabs {
    position: sticky;
    top: 2.6rem;
    z-index: 9;
    margin: 0 0 1rem 0;
    padding: 0.3rem 0 0.4rem 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}
.settings-subtabs .tab {
    padding: 0.15rem 0.5rem;
    font-size: 0.65rem;
    border-radius: 12px;
    background: var(--bg-tertiary);
    border-color: var(--border);
}
.settings-subtabs .tab.active {
    background: var(--accent-blue);
    color: var(--bg-primary);
    border-color: var(--accent-blue);
}

/* Chart Navigation — Scrollable Tab Bar */
.charts-panel { min-width: 0; }

.chart-navigation-container {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.chart-tabs {
    display: flex;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Extra padding keeps the scrollbar below tab text */
    padding-bottom: 10px;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--text-muted) var(--bg-tertiary);
}
.chart-tabs::-webkit-scrollbar { height: 4px; }
.chart-tabs::-webkit-scrollbar-track { background: var(--bg-tertiary); border-radius: 2px; }
.chart-tabs::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 2px;
}
.chart-tabs::-webkit-scrollbar-thumb:hover { background: var(--text-primary); }

/* Export Dropdown */
.export-dropdown {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}
.export-dropdown-btn {
    font-size: 0.65rem !important;
    background: var(--accent-green, #22c55e) !important;
    color: #fff !important;
    border-color: var(--accent-green, #22c55e) !important;
}
.export-dropdown-btn:hover {
    filter: brightness(1.15);
}
.export-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 80px;
    z-index: 1000;
    margin-top: 0.25rem;
}
.export-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    font-size: 0.7rem;
}
.export-dropdown-item:hover { background: var(--bg-hover); }

/* Keyboard focus indicators */
.tab:focus-visible,
.export-dropdown-btn:focus-visible,
.export-dropdown-item:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Screen reader only — visually hidden but accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Range bar smooth show/hide transitions */
.pnl-range-bar {
    transition: opacity 0.2s ease, max-height 0.2s ease;
    overflow: hidden;
}

.range-bar-visible {
    opacity: 1;
    max-height: 50px;
}

.range-bar-hidden {
    opacity: 0;
    max-height: 0;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
    .chart-navigation-container {
        flex-direction: column;
        align-items: stretch;
    }

    .chart-tabs {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .tab,
    .chart-nav-more {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .chart-nav-dropdown-item {
        min-height: 44px;
    }

    .export-control-panel {
        justify-content: center;
    }
}

/* Tablet: Adjust spacing */
@media (min-width: 769px) and (max-width: 1199px) {
    .chart-navigation-container {
        gap: 0.5rem;
    }
}

.risk-gauges { margin-bottom: 0.5rem; }
.gauge { margin-bottom: 0.35rem; }
.gauge-label { font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 0.2rem; }
.gauge-bar { height: 6px; background: var(--bg-primary); border-radius: 3px; overflow: hidden; }
.gauge-fill { height: 100%; background: var(--accent-green); border-radius: 3px; transition: width 0.5s ease; }
.gauge-fill.warning { background: var(--accent-yellow); }
.gauge-fill.danger { background: var(--accent-red); }
.gauge-value { font-size: 0.7rem; font-family: var(--font-mono); text-align: right; color: var(--text-secondary); }

.section { margin-bottom: 0.5rem; }
.section h3 {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--border);
}

.cb-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
}

.cb-item .indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); }
.cb-item .indicator.tripped { background: var(--accent-red); animation: pulse 1s infinite; }
.cb-item .losses { font-family: var(--font-mono); color: var(--text-secondary); }

.balance-grid { display: flex; flex-direction: column; gap: 0.25rem; }
.balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 0.72rem;
}
.balance-label { color: var(--text-primary); display: flex; align-items: center; gap: 0.3rem; }
.balance-value { font-family: var(--font-mono); font-weight: 600; }

.price-feed .price-item {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
}

.price-item .symbol { font-weight: 600; }
.price-item .price { font-family: var(--font-mono); }
.price-item .exchange { color: var(--text-muted); font-size: 0.6rem; }

/* Feed Health Dots */
.feed-health-dots { margin-left: 0.4rem; }
.feed-dot {
    font-size: 0.6rem;
    margin-right: 0.15rem;
    transition: color 0.3s;
}
.feed-dot.connected { color: var(--accent-green); }
.feed-dot.stale { color: var(--accent-yellow); }
.feed-dot.disconnected { color: var(--accent-red); }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
.stats-grid .stat-box { background: var(--bg-tertiary); padding: 0.4rem; border-radius: 4px; text-align: center; }
.stats-grid .stat-box .label { font-size: 0.6rem; color: var(--text-secondary); text-transform: uppercase; }
.stats-grid .stat-box .value { font-size: 0.85rem; font-weight: 600; font-family: var(--font-mono); }

.log-container { font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.35; overflow-y: auto; flex: 1; min-height: 0; }

/* ── Console Tab ── */
.console-wrap { display: flex; flex-direction: column; height: 100%; }
.console-toolbar { display: flex; gap: 0.3rem; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); align-items: center; flex-shrink: 0; }
.console-filter-btn { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); font-size: 0.65rem; padding: 0.15rem 0.5rem; border-radius: 3px; cursor: pointer; font-family: var(--font-mono); }
.console-filter-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.console-filter-btn.active { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }

/* ── Resize Handles ── */
.resize-handle { display: flex; align-items: center; justify-content: center; user-select: none; z-index: 10; position: relative; }
.resize-handle::after { content: ''; position: absolute; border-radius: 2px; background: var(--border); transition: background 0.15s, opacity 0.15s; }
.resize-handle-vertical { cursor: col-resize; width: 8px; }
.resize-handle-vertical::after { width: 2px; height: 24px; }
.resize-handle-horizontal { cursor: row-resize; height: 8px; width: auto; margin: 0 0.4rem; flex-shrink: 0; }
.resize-handle-horizontal::after { height: 2px; width: 24px; }
.resize-handle:hover::after { background: var(--accent-blue); opacity: 0.6; }
.resize-handle-active::after, .resize-handle-active:hover::after { background: var(--accent-blue); opacity: 1; }
.resize-handle:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; border-radius: 2px; }
.log-entry { padding: 0.15rem 0.3rem; border-bottom: 1px solid rgba(48,54,61,0.5); display: flex; gap: 0.5rem; }
.log-entry .time { color: var(--text-muted); white-space: nowrap; }
.log-entry .level-info { color: var(--accent-blue); }
.log-entry .level-trade { color: var(--accent-green); }
.log-entry .level-warn { color: var(--accent-yellow); }
.log-entry .level-error { color: var(--accent-red); }
.log-entry .msg { color: var(--text-primary); word-break: break-word; white-space: pre-wrap; min-width: 0; }

/* Paper Trading Panel */
.section-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-yellow);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

.paper-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
}

.paper-stat {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0.4rem;
    background: var(--bg-tertiary);
    border-radius: 3px;
    font-size: 0.68rem;
}

.paper-stat .label { color: var(--text-secondary); }
.paper-stat .value { font-family: var(--font-mono); font-weight: 600; }
.paper-stat .value.positive { color: var(--accent-green); }
.paper-stat .value.negative { color: var(--accent-red); }

.paper-strategy-pnl .pnl-row {
    display: flex;
    justify-content: space-between;
    padding: 0.15rem 0.4rem;
    font-size: 0.68rem;
}

.paper-strategy-pnl .positive { color: var(--accent-green); }
.paper-strategy-pnl .negative { color: var(--accent-red); }

/* Settings Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 560px;
    max-width: 92vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
    border-radius: var(--radius) var(--radius) 0 0;
    cursor: grab;
    user-select: none;
}

.modal-header:active {
    cursor: grabbing;
}

.modal-header h2 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-body {
    padding: 0.8rem 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}

.settings-section {
    margin-bottom: 1rem;
}

/* Risk group colored bands in settings Strategies tab */
.settings-risk-group {
    border-radius: 6px;
    padding: 0.5rem;
    margin-bottom: 1rem;
}
.settings-risk-group--low  { border: 1px solid rgba(0,209,178,0.3);  background: rgba(0,209,178,0.04); }
.settings-risk-group--med  { border: 1px solid rgba(255,183,77,0.3); background: rgba(255,183,77,0.04); }
.settings-risk-group--high { border: 1px solid rgba(255,82,82,0.3);  background: rgba(255,82,82,0.04); }
.settings-risk-group h3.risk-group-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
}

.settings-subsection {
    margin: 0.4rem 0;
    padding-left: 0.5rem;
    border-left: 2px solid var(--border);
}

.settings-subsection h4 {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0.3rem 0 0.15rem;
}

.settings-section h3 {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
}

.settings-row .label { color: var(--text-secondary); flex-shrink: 0; min-width: 0; }
.settings-row .value { font-family: var(--font-mono); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.settings-row-col {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
}

.settings-input {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    width: 120px;
    max-width: 100%;
    box-sizing: border-box;
    text-align: right;
    outline: none;
    transition: border-color 0.15s;
}
.settings-input:focus {
    border-color: var(--accent-blue);
}

.settings-textarea {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.3rem 0.4rem;
    width: 100%;
    resize: vertical;
    outline: none;
    line-height: 1.4;
}
.settings-textarea:focus {
    border-color: var(--accent-blue);
}

/* Strategy info collapsible block in settings */
.strategy-desc-block summary::-webkit-details-marker { display: none; }
.strategy-desc-block summary::marker { display: none; }
details[open].strategy-desc-block .desc-chevron { transform: rotate(90deg); }

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 18px;
    transition: 0.2s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
    background: rgba(63,185,80,0.3);
    border-color: var(--accent-green);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(16px);
    background: var(--accent-green);
}

.settings-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--border);
}

.btn-save {
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-save:hover { background: #4090e0; }
.btn-restore {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-right: 0.4rem;
    font-size: 0.65rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}
.btn-restore:hover {
    color: var(--accent-yellow);
    border-color: var(--accent-yellow);
}

.save-status {
    font-size: 0.65rem;
    font-weight: 600;
}
.save-status.success { color: var(--accent-green); }
.save-status.error { color: var(--accent-red); }

.badge {
    font-size: 0.55rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
    margin-left: 0.3rem;
}
.badge-live {
    background: rgba(63,185,80,0.2);
    color: var(--accent-green);
}
.badge-restart {
    background: rgba(210,153,34,0.2);
    color: var(--accent-yellow);
}

.settings-loading {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
    font-size: 0.8rem;
}

/* Disabled group (grayed-out when adaptive exit overrides static settings) */
.settings-disabled-group {
    opacity: 0.35;
    pointer-events: none;
    position: relative;
}
.settings-disabled-group .settings-input,
.settings-disabled-group .settings-select {
    background: var(--bg-tertiary);
    cursor: not-allowed;
}
.settings-disabled-banner {
    font-size: 0.6rem;
    color: var(--accent-yellow);
    background: rgba(210,153,34,0.08);
    border: 1px solid rgba(210,153,34,0.25);
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    margin-bottom: 0.3rem;
    pointer-events: auto;
}
.adaptive-exit-section {
    border-left: 2px solid var(--accent-blue);
    padding-left: 0.5rem;
    margin: 0.3rem 0;
}

/* ── AI Provider Card Styles ── */
.ai-provider-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem;
    margin-bottom: 0.4rem;
    transition: opacity 0.15s;
}
.ai-provider-card.disabled {
    opacity: 0.6;
}

.ai-provider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}
.ai-provider-header .ai-provider-name {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.ai-provider-header .ai-provider-name span:first-child {
    font-weight: 600;
    font-size: 0.7rem;
}
.ai-provider-header .ai-provider-controls {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.ai-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 0.2rem;
    vertical-align: middle;
}
.ai-status-dot.configured {
    background: var(--accent-green);
    box-shadow: 0 0 4px rgba(63,185,80,0.4);
}
.ai-status-dot.unconfigured {
    background: var(--text-secondary);
}

.ai-free-badge {
    font-size: 0.55rem;
    background: var(--accent-green);
    color: #000;
    padding: 0 4px;
    border-radius: 3px;
    font-weight: 600;
}

.ai-configured-label {
    color: var(--accent-green);
    font-size: 0.6rem;
}

.ai-section-divider {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin: 0.5rem 0.5rem 0.2rem;
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
    font-weight: 600;
}

.ai-provider-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.5rem 0.5rem 0.2rem;
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
}
.ai-provider-toolbar span {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 600;
}

.ai-budget-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.2rem 0.5rem;
}
.ai-budget-row .settings-row {
    flex: 1;
    margin-bottom: 0;
}

.ai-provider-info {
    font-size: 0.55rem;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    margin-top: 0.3rem;
}

.ai-test-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
    padding: 0 0.5rem;
}

/* ── Provider Stats Section ── */
.ai-stats-section {
    margin-top: 0.3rem;
    padding: 0 0.5rem;
}
.ai-stats-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.55rem;
    cursor: pointer;
    padding: 0.15rem 0;
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.ai-stats-toggle:hover { color: var(--text-primary); }
.ai-stats-arrow { font-size: 0.45rem; }
.ai-stats-body { padding: 0.25rem 0 0.15rem; }
.ai-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem 0.6rem;
}
.ai-stat-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.55rem;
}
.ai-stat-label { color: var(--text-muted); }
.ai-stat-value { color: var(--text-primary); font-family: var(--font-mono); }

/* ── AI Two-Section Layout ── */
.ai-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.5rem 0 0.15rem;
    padding: 0.3rem 0.5rem;
    border-top: 1px solid var(--border);
}
.ai-section-title {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text);
}
.ai-section-badge {
    font-size: 0.5rem;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.ai-section-badge.free {
    background: var(--accent-green);
    color: #000;
}
.ai-section-badge.paid {
    background: #f59e0b;
    color: #000;
}
.ai-section-note {
    font-size: 0.5rem;
    color: var(--text-secondary);
    padding: 0 0.5rem 0.3rem;
    font-style: italic;
}
.ai-priority-badge {
    font-size: 0.5rem;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 3px;
    font-weight: 600;
}
.ai-status-dot.disabled-dot {
    background: var(--text-secondary);
    opacity: 0.4;
}
.ai-add-provider-btn {
    width: 100%;
    border-style: dashed !important;
    opacity: 0.7;
}
.ai-add-provider-btn:hover {
    opacity: 1;
}

.strategy-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
}

.strategy-toggle .name { font-weight: 600; }

.strategy-toggle .state-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.state-badge.running { background: rgba(63,185,80,0.2); color: var(--accent-green); }
.state-badge.stopped { background: rgba(139,148,158,0.2); color: var(--text-secondary); }
.state-badge.paused { background: rgba(210,153,34,0.2); color: var(--accent-yellow); }

@media (max-width: 1100px) {
    .dashboard { grid-template-columns: 240px 8px 1fr 8px 250px; }
    .nav-stats { gap: 0.75rem; }
    .stat-item .stat-label { font-size: 0.6rem; }
}

@media (max-width: 900px) {
    .dashboard { grid-template-columns: 1fr; height: auto; }
    .resize-handle-vertical { display: none; }
    .resize-handle-horizontal { display: none; }
    .nav-stats { display: none; }
}

@media (max-width: 768px) {
    .navbar { flex-wrap: wrap; gap: 0.5rem; }
    .dashboard { padding: 0.3rem; }
}

/* Intelligence Feed (within strategy cards) */
.intel-feed-panel {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.4rem;
    margin-bottom: 0.4rem;
}

.intel-feed-panel h4 {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--accent-purple);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}

.intel-feed { min-height: 1.5rem; }

.intel-signal {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    font-size: 0.68rem;
    border-bottom: 1px solid rgba(48, 54, 61, 0.4);
}

.intel-signal:last-child { border-bottom: none; }

.intel-badge {
    font-size: 0.55rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}

.intel-badge.running { background: rgba(63,185,80,0.2); color: var(--accent-green); }
.intel-badge.stopped { background: rgba(139,148,158,0.2); color: var(--text-secondary); }

.intel-yes { color: var(--accent-green); font-weight: 700; font-size: 0.65rem; min-width: 24px; }
.intel-no { color: var(--accent-red); font-weight: 700; font-size: 0.65rem; min-width: 24px; }

.intel-conf {
    color: var(--accent-yellow);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    min-width: 32px;
}

.intel-headline {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.intel-prob {
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.68rem;
    min-width: 36px;
}

.intel-status {
    font-size: 0.65rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.backtest-controls {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}

.backtest-controls select,
.backtest-controls input {
    font-size: 0.62rem;
    padding: 2px 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 3px;
}

.backtest-controls input { width: 50px; }

.btn-accent {
    background: rgba(136,108,228,0.25);
    color: var(--accent-purple);
    border: 1px solid rgba(136,108,228,0.4);
}
.btn-accent:hover { background: rgba(136,108,228,0.4); }

.backtest-result .intel-signal {
    border-bottom: none;
    padding: 0.1rem 0;
}

.muted { color: var(--text-secondary); font-size: 0.65rem; }

/* Settings Select */
.settings-select {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    width: 120px;
    outline: none;
    transition: border-color 0.15s;
}
.settings-select:focus { border-color: var(--accent-blue); }

/* Credential Inputs */
.credential-row .credential-input {
    width: 180px;
    font-size: 0.7rem;
}
.credential-row .label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Chart Alt Content (tables for Positions/Activity tabs) */
#chartAltContent {
    padding: 0.5rem;
    overflow-y: auto;
    height: 100%;
}
.chart-alt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.72rem;
    font-family: var(--font-mono);
}
.chart-alt-table thead th,
.chart-alt-table thead td {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-secondary);
}
.chart-alt-table thead tr:nth-child(2) th,
.chart-alt-table thead tr:nth-child(2) td {
    top: 1.6rem;
}
.chart-alt-table th {
    text-align: left;
    padding: 0.2rem 0.5rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    user-select: none;
}
.chart-alt-table th:hover { color: var(--accent-blue); }
.chart-alt-table th .sort-arrow { font-size: 0.55rem; margin-left: 0.2rem; }
.chart-alt-table td {
    padding: 0.15rem 0.5rem;
    border-bottom: 1px solid rgba(48,54,61,0.4);
    color: var(--text-primary);
    line-height: 1.2;
}
.chart-alt-table td.positive { color: var(--accent-green); }
.chart-alt-table td.negative { color: var(--accent-red); }
.chart-alt-table td.time-col { color: var(--text-muted); white-space: nowrap; line-height: 1.25; }
.chart-alt-table td.time-col .ts-date { font-size: 0.7rem; }
.chart-alt-table td.time-col .ts-time { font-size: 0.6rem; opacity: 0.7; }
td .ts-date { font-size: 0.7rem; }
td .ts-time { font-size: 0.6rem; opacity: 0.7; }
.chart-alt-table tr:hover td { background: var(--bg-tertiary); }

/* P&L Breakdown data-table sticky headers */
.data-table { border-collapse: separate; border-spacing: 0; }
.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-secondary);
}

.chart-alt-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Positions Sub-tabs */
.positions-subtabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.positions-subtab {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    font-weight: 500;
}

.positions-subtab:hover {
    background: var(--bg-hover);
}

.positions-subtab.active {
    background: var(--accent-blue);
    color: #fff;
}

.subtab-badge {
    margin-left: 4px;
    opacity: 0.8;
    font-size: 0.85rem;
}

.subtab-badge.new-items {
    background: var(--accent-red);
    color: #fff;
    padding: 1px 5px;
    border-radius: 10px;
    font-weight: 700;
    opacity: 1;
    animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.side-badge {
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-block;
    min-width: 3rem;
    text-align: center;
}

.side-badge.side-buy,
.side-badge.side-long {
    background: rgba(63,185,80,0.2);
    color: var(--accent-green);
}

.side-badge.side-sell,
.side-badge.side-short {
    background: rgba(248,81,73,0.2);
    color: var(--accent-red);
}

/* Open Orders — stats, toolbar, warning */
.open-orders-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.68rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.open-orders-stats .stat-item strong { color: var(--text-primary); }
.open-orders-stats .stat-divider { color: var(--border); }
.open-orders-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    flex-wrap: wrap;
}
.open-orders-warning {
    padding: 0.3rem 0.5rem;
    font-size: 0.65rem;
    color: var(--accent-yellow, #d29922);
    background: rgba(210,153,34,0.08);
    border-bottom: 1px solid rgba(210,153,34,0.2);
}
.loading-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Platform Toggle (US/International) */
.platform-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.platform-btn {
    padding: 0.25rem 0.55rem;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: none;
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
.platform-btn:first-child { border-right: 1px solid var(--border); }
.platform-btn.active {
    background: var(--accent-blue);
    color: var(--bg-primary);
}
.platform-btn[data-platform="us"].active {
    background: var(--accent-purple);
}

/* VPN/IP Safety Indicator */
.vpn-status {
    font-size: 0.75rem;
    color: #6e7681;
    cursor: pointer;
    transition: color 0.3s;
}
.vpn-status.safe { color: var(--accent-green); }
.vpn-status.unsafe { color: var(--accent-red); animation: pulse 1s infinite; }
.vpn-status.checking { color: var(--accent-yellow); }

/* Kill Switch Group — no longer used for indicator layout (indicators moved to navbar-indicators-row) */
.kill-switch-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* Status Indicators Row (horizontal layout) */
.status-indicators-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1;
}

/* Vertical divider between infra and exchange indicators */
.status-indicator-divider {
    width: 1px;
    height: 0.75rem;
    background: var(--border);
    flex-shrink: 0;
}

/* Status Indicator Wrapper and Labels */
.status-indicator-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.status-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* VPN Warning Banner */
.vpn-warning-banner {
    background: rgba(248,81,73,0.15);
    border-bottom: 1px solid var(--accent-red);
    color: var(--accent-red);
    padding: 0.4rem 1rem;
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.vpn-warning-banner .dismiss-btn {
    background: none;
    border: 1px solid var(--accent-red);
    color: var(--accent-red);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.6rem;
    cursor: pointer;
    font-weight: 600;
}

/* Crypto Mini-Charts */
.mini-charts { display: flex; flex-direction: column; gap: 0.3rem; }
.mini-chart-item {
    background: var(--bg-tertiary);
    border-radius: 4px;
    padding: 0.3rem 0.4rem;
    overflow: hidden;
}
.mini-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.15rem;
}
.mini-chart-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.mini-chart-price {
    font-size: 0.65rem;
    font-family: var(--font-mono);
    font-weight: 600;
}
.mini-chart-canvas {
    height: 60px;
    width: 100%;
    cursor: pointer;
    transition: opacity 0.15s;
    overflow: hidden;
}
.mini-chart-item:hover {
    background: var(--bg-hover);
}
.mini-chart-change {
    font-size: 0.55rem;
    font-family: var(--font-mono);
    font-weight: 600;
    margin-left: 0.2rem;
}
.mini-chart-change.positive { color: var(--profit); }
.mini-chart-change.negative { color: var(--loss); }
.mini-chart-range {
    display: flex;
    gap: 2px;
    padding: 1px 0;
    justify-content: flex-end;
    margin-bottom: 2px;
}
.range-btn {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0px 4px;
    font-size: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.3;
}
.range-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.range-btn.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

/* Custom Range Popover */
.custom-range-popover {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem;
    margin-top: 0.3rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 100;
}
.custom-range-header {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}
.custom-range-shortcuts {
    display: flex;
    gap: 4px;
    margin-bottom: 0.4rem;
}
.custom-range-shortcuts button {
    background: var(--bg-tertiary, var(--bg-secondary));
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.custom-range-shortcuts button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.custom-range-inputs {
    display: flex;
    gap: 6px;
    margin-bottom: 0.4rem;
}
.custom-range-inputs label {
    font-size: 0.55rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 3px;
}
.custom-range-inputs input[type="date"] {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.55rem;
    font-family: inherit;
}
.custom-range-apply {
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 0.55rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.15s ease;
}
.custom-range-apply:hover {
    opacity: 0.85;
}

/* Theme Toggle Button */
.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.0rem;
    padding: 0.2rem 0.45rem;
    transition: all 0.2s;
    line-height: 1;
}
.nav-refresh-btn {
    font-size: 1.05rem !important;
    padding: 0.2rem 0.5rem !important;
    cursor: pointer;
}
.nav-refresh-btn:hover {
    color: var(--accent-blue, #4dabf7);
}
.nav-settings-btn {
    font-size: 0.9rem !important;
    padding: 0.2rem 0.5rem !important;
}
.nav-action-btn {
    font-size: 0.8rem !important;
    padding: 0.2rem 0.6rem !important;
    line-height: 1;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    vertical-align: middle;
}
/* Match trading-toggle and restart button heights exactly */
button.trading-toggle,
.nav-action-btn {
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Trading Toggle Button */
button.trading-toggle {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
    min-width: 32px;
    text-align: center;
}
button.trading-toggle.trading-paused {
    background: var(--loss) !important;
    color: #fff !important;
    border-color: var(--loss) !important;
    box-shadow: 0 0 6px rgba(248, 81, 73, 0.4);
}
button.trading-toggle.trading-active {
    background: var(--profit) !important;
    color: #fff !important;
    border-color: var(--profit) !important;
    box-shadow: 0 0 6px rgba(0, 200, 83, 0.4);
}
button.trading-toggle:hover { opacity: 0.85; }

/* Balance Widget — Paper vs Real distinction */
.balance-paper-row {
    border-left: 3px solid var(--profit);
    background: rgba(0, 200, 83, 0.08);
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.3rem;
    border-radius: 3px;
}
.balance-section-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0.3rem 0 0.15rem;
    padding-bottom: 0.1rem;
    border-bottom: 1px solid var(--border);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Auth Setup Overlay ── */
.auth-setup-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-setup-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.auth-setup-header {
    text-align: center;
    margin-bottom: 1.5rem;
}
.auth-setup-header .logo {
    font-size: 2rem;
    color: var(--accent-blue);
}
.auth-setup-header h2 {
    margin: 0.5rem 0 0.25rem;
    font-size: 1.3rem;
}
.auth-setup-header p {
    color: var(--text-secondary);
    font-size: 0.8rem;
}
.auth-field {
    margin-bottom: 1rem;
}
.auth-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}
.auth-field input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
}
.auth-field input:focus {
    border-color: var(--accent-blue);
}
.auth-error {
    color: var(--accent-red);
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.6rem;
    background: rgba(248,81,73,0.1);
    border-radius: 4px;
}
.auth-submit-btn {
    width: 100%;
    padding: 0.7rem;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.auth-submit-btn:hover { opacity: 0.9; }
.auth-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-setup-footer {
    text-align: center;
    margin-top: 1rem;
}
.auth-setup-footer p {
    color: var(--text-muted);
    font-size: 0.65rem;
}

/* Anomalies Modal Grid */
.anomalies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.anomaly-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.75rem;
    transition: border-color 0.2s;
}
.anomaly-card:hover { border-color: var(--accent-blue); }
.anomaly-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
}
.anomaly-question {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.anomaly-link {
    font-size: 0.65rem;
    color: var(--accent-blue);
    text-decoration: none;
}
.anomaly-link:hover { text-decoration: underline; }

/* Anomalies Toolbar */
.anomalies-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.5rem;
}
.anomalies-toolbar .settings-select,
.anomalies-toolbar .settings-input {
    font-size: 0.65rem;
    padding: 0.25rem 0.4rem;
    height: auto;
}

/* ── Spinners ── */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner-small {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid var(--border);
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 0.25rem;
}

.spinner-large {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ── Restart Overlay ── */
.restart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.restart-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

.restart-overlay-status {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 400;
}

.restart-overlay-progress {
    width: 280px;
    margin-top: 0.25rem;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary, #2a2a2a);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.restart-overlay-eta {
    color: var(--text-muted, var(--text-secondary));
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
}

/* ── Toast Notifications ── */
#toastContainer {
    position: fixed;
    top: 3.5rem;
    right: 1rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-blue);
    border-radius: var(--radius);
    padding: 0.6rem 1rem;
    font-size: 0.78rem;
    font-weight: 500;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateX(1rem);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: auto;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-success { border-left-color: var(--accent-green); }
.toast-error { border-left-color: var(--accent-red); }
.toast-info { border-left-color: var(--accent-blue); }

/* ── Balance Active Badge ── */
.balance-active-badge {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--accent-green);
    color: var(--bg-primary);
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.balance-row-active {
    border-left: 2px solid var(--accent-green);
}

.balance-detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-secondary);
    padding: 0 0.5rem 0.15rem 1.2rem;
    font-family: var(--font-mono);
}

.balance-separator {
    border-top: 1px solid var(--border);
    margin: 0.3rem 0;
}

.balance-total-row {
    background: var(--bg-secondary);
    border-radius: 0 0 4px 4px;
}

/* ── Real-time trade flash animation ── */
@keyframes tradeFlash {
    0% { background: color-mix(in srgb, var(--accent-green) 25%, transparent); }
    100% { background: transparent; }
}
.trade-new-flash {
    animation: tradeFlash 1.5s ease-out;
}

/* ── Keyboard Shortcuts ── */
.kbd {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0.15rem 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: inset 0 -1px 0 var(--border);
}
.shortcuts-list { padding: 0.5rem 0; }
.shortcut-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.shortcut-row:last-child { border-bottom: none; }

/* ── P&L Range Buttons ── */
#pnlRangeBar,
#cryptoRangeBar {
    transition: opacity 0.2s ease, max-height 0.2s ease;
    overflow: hidden;
}
.pnl-range-bar {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.range-btn {
    padding: 0.15rem 0.6rem;
    font-size: 0.65rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.range-btn:hover { color: var(--text-primary); border-color: var(--accent-blue); }
.range-btn.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

/* ── Chart Tab Spacer & Export Buttons ── */
.chart-tab-spacer { flex: 1; }
/* ── Strategy Comparison Table ── */
.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.75rem;
}
.compare-table thead th,
.compare-table thead td {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-secondary);
}
.compare-table thead tr:nth-child(2) th,
.compare-table thead tr:nth-child(2) td {
    top: 1.8rem;
}
.compare-table th {
    text-align: left;
    padding: 0.4rem 0.5rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
}
.compare-table th:hover { color: var(--accent-blue); }
.compare-table th .sort-arrow { font-size: 0.55rem; margin-left: 0.2rem; }
.compare-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}
.compare-table tr:hover td { background: var(--bg-hover); }
.compare-best { color: var(--accent-green) !important; font-weight: 600; }
.compare-worst { color: var(--accent-red) !important; font-weight: 600; }

/* ── Intel Tab (Whale Scanner Candidates) ── */
.intel-status-bar {
    display: flex;
    gap: 1rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.65rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.intel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}
.intel-table th {
    text-align: left;
    padding: 0.4rem 0.5rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
}
.intel-table th:hover { color: var(--accent-blue); }
.intel-table th .sort-arrow { font-size: 0.55rem; margin-left: 0.2rem; }
.intel-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}
.intel-table tr:hover td { background: var(--bg-hover); }
.intel-addr {
    font-size: 0.55rem;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.intel-addr code {
    color: var(--text-muted);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.55rem;
}
.intel-row-followed td {
    background: rgba(0, 200, 83, 0.06);
}
.intel-row-followed td:first-child {
    border-left: 2px solid var(--accent-green);
}
.intel-following-badge {
    font-size: 0.6rem;
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
}
.btn-unfollow {
    font-size: 0.55rem;
    padding: 0.05rem 0.3rem;
    color: var(--accent-red);
    border: 1px solid var(--accent-red);
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-unfollow:hover {
    background: var(--accent-red);
    color: #fff;
}
.intel-platform-badge {
    background: var(--accent-blue);
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.intel-follow-btn {
    font-size: 0.6rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--accent-blue);
    border-radius: 3px;
    background: transparent;
    color: var(--accent-blue);
    cursor: pointer;
}
.intel-follow-btn:hover {
    background: var(--accent-blue);
    color: var(--bg-primary);
}

/* ── Position Heat Map ── */
.heatmap-group-label {
    padding: 0.3rem 0.5rem 0.1rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border);
    margin-top: 0.3rem;
}
.heatmap-group-label:first-child { margin-top: 0; }

/* ── Market Data View Switcher (Task 10.1) ── */
.market-data-view-switcher {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.view-switch-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.view-switch-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-purple);
}

.view-switch-btn.active {
    background: var(--accent-purple);
    color: var(--bg-primary);
    border-color: var(--accent-purple);
}

/* Analytics Tabs */
.risk-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    padding: 0.5rem 0;
}
.risk-metric-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 6px;
    padding: 0.75rem;
    text-align: center;
}
.risk-metric-card .metric-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}
.risk-metric-card .metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.risk-metric-card .metric-desc {
    font-size: 0.55rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}
.correlation-matrix {
    overflow-x: auto;
    font-size: 0.65rem;
}
.correlation-matrix table {
    border-collapse: collapse;
    width: 100%;
}
.correlation-matrix th,
.correlation-matrix td {
    padding: 0.3rem 0.5rem;
    text-align: center;
    border: 1px solid var(--border-color, #30363d);
    white-space: nowrap;
}
.correlation-matrix th {
    background: var(--bg-secondary);
    font-weight: 600;
}
.attribution-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.65rem;
}
.attribution-table th,
.attribution-table td {
    padding: 0.35rem 0.5rem;
    text-align: right;
    border-bottom: 1px solid var(--border-color, #30363d);
}
.attribution-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.6rem;
}
.attribution-table td:first-child,
.attribution-table th:first-child { text-align: left; }
.insight-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
}
.insight-card .insight-type {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}
.insight-card .insight-text {
    font-size: 0.7rem;
    line-height: 1.4;
}
.heatmap-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0.5rem;
    min-height: 100px;
}
.heatmap-cell {
    position: relative;
    border-radius: 4px;
    padding: 0.5rem;
    min-width: 60px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: #fff;
    cursor: default;
    transition: transform 0.15s;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.heatmap-cell:hover { transform: scale(1.05); z-index: 1; }
.heatmap-cell .hm-label { font-size: 0.6rem; opacity: 0.9; }
.heatmap-cell .hm-value { font-size: 0.8rem; }
.heatmap-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    font-size: 0.65rem;
    color: var(--text-primary);
    white-space: nowrap;
    display: none;
    z-index: 10;
    text-shadow: none;
    pointer-events: none;
}
.heatmap-cell:hover .heatmap-tooltip { display: block; }

/* ── Trade Timeline ── */
.timeline-filters {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
}
.timeline-filters select, .timeline-filters input {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.timeline-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.72rem;
}
.timeline-table thead th,
.timeline-table thead td {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-secondary);
}
.timeline-table thead tr:nth-child(2) th,
.timeline-table thead tr:nth-child(2) td {
    top: 1.8rem;
}
.timeline-table th {
    text-align: left;
    padding: 0.35rem 0.5rem;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
}
.timeline-table th:hover { color: var(--accent-blue); }
.timeline-table th .sort-arrow { font-size: 0.55rem; margin-left: 0.2rem; }
.timeline-table td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}
.timeline-table tr:hover td { background: var(--bg-hover); }
.timeline-table .expandable { cursor: pointer; }
.timeline-detail {
    background: var(--bg-tertiary);
    padding: 0.5rem;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.timeline-loading {
    text-align: center;
    padding: 0.5rem;
    color: var(--text-muted);
    font-size: 0.7rem;
}

/* ============================================================================
   Loading Overlay
   ============================================================================ */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.3s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-progress-wrap {
    width: 220px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 16px;
}

.loading-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent-blue);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.loading-text {
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font-mono);
}

.loading-step {
    margin-top: 4px;
    color: var(--text-muted, #484f58);
    font-size: 11px;
    font-family: var(--font-mono);
    min-height: 1em;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   Enhanced Backtesting UI
   ============================================================================ */

.bt-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 95vw;
    max-width: 1400px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.bt-modal-body {
    flex: 1;
    overflow: hidden;
    padding: 0;
}

.bt-layout {
    display: flex;
    height: 100%;
}

.bt-controls {
    width: 320px;
    min-width: 280px;
    border-right: 1px solid var(--border);
    padding: 0.8rem;
    overflow-y: auto;
    flex-shrink: 0;
    background: var(--bg-tertiary);
}

.bt-results {
    flex: 1;
    overflow-y: auto;
    padding: 0.8rem 1rem;
}

.bt-section {
    margin-bottom: 1rem;
}

.bt-section h3 {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}

.bt-run-btn {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.15s;
}

.bt-run-btn.bt-running {
    opacity: 0.7;
    cursor: not-allowed;
}

.bt-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    gap: 0.75rem;
}

.bt-placeholder-icon {
    font-size: 2.5rem;
    opacity: 0.3;
}

.bt-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.bt-error {
    background: rgba(255, 80, 80, 0.08);
    border: 1px solid var(--accent-red);
    border-radius: 6px;
    padding: 1rem;
    color: var(--accent-red);
    font-size: 0.8rem;
    margin: 1rem 0;
}

/* Summary cards */
.bt-summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.bt-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    text-align: center;
}

.bt-card-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.3rem;
    cursor: help;
}

.bt-card-value {
    font-size: 1.15rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.bt-positive { color: var(--accent-green) !important; }
.bt-negative { color: var(--accent-red) !important; }

/* Warnings */
.bt-warnings {
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bt-warning {
    font-size: 0.72rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    line-height: 1.3;
}

.bt-warning-yellow {
    background: rgba(227, 179, 65, 0.1);
    border: 1px solid rgba(227, 179, 65, 0.35);
    color: var(--accent-yellow);
}

.bt-warning-red {
    background: rgba(255, 80, 80, 0.08);
    border: 1px solid rgba(255, 80, 80, 0.35);
    color: var(--accent-red);
}

/* Metrics grid */
.bt-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.3rem;
}

.bt-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 0.75rem;
}

.bt-metric-label {
    color: var(--text-secondary);
    cursor: help;
}

.bt-metric-value {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-primary);
}

/* Gauge */
.bt-gauge-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.75rem;
}

.bt-gauge-label {
    color: var(--text-secondary);
    width: 40px;
    flex-shrink: 0;
    font-weight: 600;
}

.bt-gauge-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.bt-gauge-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.bt-gauge-value {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-primary);
    width: 50px;
    text-align: right;
}

/* Walk-forward table */
.bt-wf-table-wrap {
    margin-top: 0.5rem;
    overflow-x: auto;
}

.bt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}

.bt-table th {
    text-align: left;
    padding: 0.35rem 0.5rem;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
    cursor: help;
}

.bt-table td {
    padding: 0.3rem 0.5rem;
    font-family: var(--font-mono);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

.bt-table tr:hover td {
    background: var(--bg-hover);
}

/* Chart containers */
.bt-chart-container {
    width: 100%;
    height: 260px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.bt-chart-small {
    height: 220px;
}

/* Backtest market dropdown */
.bt-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
    max-height: 280px; overflow-y: auto;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.bt-dropdown-item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--border); }
.bt-dropdown-item:hover { background: var(--bg-hover); }
.bt-dropdown-item.bt-disabled { opacity: 0.4; cursor: not-allowed; }
.bt-market-question { font-size: 0.75rem; line-height: 1.3; }
.bt-market-meta { font-size: 0.6rem; color: var(--text-muted); margin-top: 2px; }
.bt-selected-card {
    background: var(--bg-primary); border: 1px solid var(--accent-green);
    border-radius: 6px; padding: 8px 10px; margin-top: 6px;
}
.bt-selected-question { font-size: 0.75rem; font-weight: 600; line-height: 1.3; }
.bt-selected-meta { font-size: 0.6rem; color: var(--text-muted); margin: 3px 0; }
.bt-data-source {
    font-size: 0.7rem; padding: 6px 10px; margin-bottom: 8px;
    background: var(--bg-primary); border-radius: 4px;
    border-left: 3px solid var(--accent-green);
}
.bt-data-source-warn {
    border-left-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

/* Strategy info card */
.bt-strategy-info-card {
    background: var(--bg-primary); border-radius: 4px; padding: 6px 10px;
    border-left: 3px solid var(--accent-blue); margin: 4px 0;
}

/* Backtesting Tab Layout */
.bt-tab-layout {
    display: flex; gap: 12px; height: 100%; padding: 8px;
}
.bt-tab-controls {
    width: 260px; min-width: 220px; flex-shrink: 0;
    padding: 8px; overflow-y: auto;
    border-right: 1px solid var(--border);
}
.bt-tab-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.bt-tab-results {
    flex: 1; overflow-y: auto; padding: 0 4px;
}
.bt-tab-section { margin-bottom: 12px; }
.bt-history-row:hover { background: var(--bg-hover); }

/* Responsive */
@media (max-width: 900px) {
    .bt-layout {
        flex-direction: column;
    }
    .bt-controls {
        width: 100%;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 40vh;
    }
    .bt-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .bt-modal {
        width: 98vw;
        height: 95vh;
    }
}

/* ============================================================
   Strategy Disable Reason UI
   ============================================================ */

/* Disabled strategy card — orange dashed border, reduced opacity, no animation */
.strategy-card--disabled {
  border: 1px dashed var(--accent-yellow) !important;
  opacity: 0.55;
  transition: none !important;
  animation: none !important;
}
.strategy-card--disabled:hover {
  border-color: var(--accent-yellow) !important;
  opacity: 0.75;
  transition: none !important;
}

/* Tier-locked: orange hatched border + grayscale — strategy not yet unlocked */
.strategy-card--tier-locked {
  border: 2px solid color-mix(in srgb, var(--accent-yellow) 70%, transparent) !important;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    color-mix(in srgb, var(--accent-yellow) 7%, transparent) 6px,
    color-mix(in srgb, var(--accent-yellow) 7%, transparent) 12px
  ) !important;
  opacity: 0.6;
  filter: grayscale(35%);
  transition: none !important;
  animation: none !important;
}
.strategy-card--tier-locked:hover {
  opacity: 0.8;
  border-color: var(--accent-yellow) !important;
  filter: grayscale(15%);
  transition: none !important;
}

/* Disable reason text block below the stats */
.disable-reason-text {
  font-size: 0.65rem;
  color: var(--accent-yellow);
  margin-top: 4px;
  display: flex;
  align-items: flex-start;
  gap: 3px;
  line-height: 1.3;
}
.disable-reason-text::before {
  content: "⚠";
  flex-shrink: 0;
}

/* "(+N more)" inline expander link */
.disable-reason-more {
  color: var(--accent-yellow);
  cursor: pointer;
  text-decoration: underline dotted;
  font-size: 0.6rem;
  margin-left: 4px;
  white-space: nowrap;
}

/* Hidden container for secondary reasons */
.disable-reason-extra {
  font-size: 0.6rem;
  color: var(--accent-yellow);
  margin-top: 2px;
  padding-left: 12px;
}
.disable-reason-extra[hidden] {
  display: none;
}

/* Settings panel — orange banner for disabled strategy sections */
.settings-disable-banner {
  background: color-mix(in srgb, var(--accent-yellow) 12%, transparent);
  border-left: 3px solid var(--accent-yellow);
  color: var(--accent-yellow);
  font-size: 0.7rem;
  padding: 6px 10px;
  margin-bottom: 8px;
  border-radius: 0 4px 4px 0;
}

.settings-section-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin: 0.5rem 0.5rem 0.2rem;
  border-top: 1px solid var(--border);
  padding-top: 0.4rem;
}

/* Small orange dot for collapsed section headers with disable reasons */
.settings-disable-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-yellow);
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Portfolio Monitor row color-coding ──────────────────────────────── */
.pm-row-take-profit {
  background: rgba(63, 185, 80, 0.15);
}
.pm-row-stop-loss,
.pm-row-trailing-stop {
  background: rgba(248, 81, 73, 0.15);
}
.pm-row-time-decay {
  background: rgba(210, 153, 34, 0.15);
}

html[data-theme="light"] .pm-row-take-profit {
  background: rgba(26, 127, 55, 0.10);
}
html[data-theme="light"] .pm-row-stop-loss,
html[data-theme="light"] .pm-row-trailing-stop {
  background: rgba(207, 34, 46, 0.10);
}
html[data-theme="light"] .pm-row-time-decay {
  background: rgba(155, 115, 0, 0.10);
}

/* ── Light Mode: Enhanced color definition ──────────────────── */
html[data-theme="light"] .navbar {
  background: #c9c2b6;
  border-bottom: 2px solid #a89e92;
}
html[data-theme="light"] .navbar-top-row {
  border-bottom: 1px solid #b5ad9f;
}
html[data-theme="light"] .nav-brand {
  color: #0d4a8a;
}
html[data-theme="light"] .mode-badge {
  background: #d4870a;
  color: #fff;
}
html[data-theme="light"] .panel {
  border: 1px solid #b5ad9f;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
html[data-theme="light"] .panel-header {
  background: #cfc8bc;
  border-bottom: 1px solid #b5ad9f;
}
html[data-theme="light"] .panel-header h2 {
  color: #3a342e;
}
html[data-theme="light"] .strategy-card {
  background: #d8d2c8;
  border: 1px solid #b5ad9f;
}
html[data-theme="light"] .strategy-card:hover {
  border-color: #1d5a9e;
  box-shadow: 0 0 0 1px rgba(29,90,158,0.2);
}
html[data-theme="light"] .strategy-card .name {
  color: #1a1714;
}
html[data-theme="light"] .strategy-card.risk-band-low { border-left-color: #0d9668; }
html[data-theme="light"] .strategy-card.risk-band-med { border-left-color: #d4870a; }
html[data-theme="light"] .strategy-card.risk-band-high { border-left-color: #c0392b; }
html[data-theme="light"] .strategy-card.risk-band-tool { border-left-color: #1d5a9e; }
html[data-theme="light"] .btn-primary {
  background: #1d5a9e;
  color: #fff;
  border-color: #1d5a9e;
}
html[data-theme="light"] .btn-success {
  background: #1a7a42;
  color: #fff;
  border-color: #1a7a42;
}
html[data-theme="light"] .btn-danger {
  color: #c0392b;
  border-color: #c0392b;
}
html[data-theme="light"] .btn-danger:hover {
  background: #c0392b;
  color: #fff;
}
html[data-theme="light"] .btn-warning {
  color: #b8860b;
  border-color: #b8860b;
}
html[data-theme="light"] .btn-warning:hover {
  background: #b8860b;
  color: #fff;
}
html[data-theme="light"] .collapsible-sticky-header {
  background: #cfc8bc;
}
html[data-theme="light"] .collapsible-sticky-header:hover {
  background: #c0b8ab;
}

/* ── Light Mode Visual Polish ── */
html[data-theme="light"] .navbar {
  background: linear-gradient(180deg, #d6d0c6 0%, #ccc5b9 100%);
  border-bottom: 1px solid #a89e90;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
html[data-theme="light"] .sub-navbar {
  background: #d1cbc2;
  border-bottom: 1px solid #b5ad9f;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
html[data-theme="light"] .tab {
  color: #5a5249;
  border: 1px solid transparent;
  border-radius: 4px;
}
html[data-theme="light"] .tab:hover {
  background: rgba(0,0,0,0.05);
  color: #1a1714;
}
html[data-theme="light"] .tab.active {
  background: var(--accent-blue);
  color: #fff;
  box-shadow: 0 1px 3px rgba(29,90,158,0.3);
}
html[data-theme="light"] .metric-card {
  background: #ddd8d0;
  border: 1px solid #c5beb4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.4);
}
html[data-theme="light"] .metric-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.4);
}
html[data-theme="light"] .activity-feed-section {
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
html[data-theme="light"] .activity-feed-item {
  background: #ddd8d0;
  border: 1px solid #c5beb4;
}
html[data-theme="light"] .activity-feed-item:hover {
  background: #d4cec4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
html[data-theme="light"] .af-pill,
html[data-theme="light"] .af-strat-badge {
  background: #cfc8bc;
  border-color: #b5ad9f;
}
html[data-theme="light"] .kbd {
  background: #cfc8bc;
  border: 1px solid #b5ad9f;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}
html[data-theme="light"] .modal-overlay {
  background: rgba(30, 25, 18, 0.45);
  backdrop-filter: blur(2px);
}
html[data-theme="light"] .modal {
  background: #e8e4de;
  border: 1px solid #b5ad9f;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
html[data-theme="light"] .settings-input,
html[data-theme="light"] .settings-textarea,
html[data-theme="light"] .settings-select {
  background: #e8e4de;
  border-color: #b5ad9f;
}
html[data-theme="light"] .settings-input:focus,
html[data-theme="light"] .settings-textarea:focus,
html[data-theme="light"] .settings-select:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(29,90,158,0.15);
}
html[data-theme="light"] .kill-switch-btn {
  background: #c0392b;
  box-shadow: 0 2px 6px rgba(192,57,43,0.3);
}
html[data-theme="light"] .kill-switch-btn:hover {
  background: #a33025;
  box-shadow: 0 3px 8px rgba(192,57,43,0.4);
}
html[data-theme="light"] ::-webkit-scrollbar-track {
  background: #e0dbd4;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #b5ad9f;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #9e9588;
}
html[data-theme="light"] .console-filter-btn.active {
  background: var(--accent-blue);
  color: #fff;
}
html[data-theme="light"] .range-btn.active {
  background: var(--accent-blue);
  color: #fff;
}
html[data-theme="light"] .anomaly-card {
  background: #ddd8d0;
  border: 1px solid #c5beb4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
html[data-theme="light"] .error-message {
  background: color-mix(in srgb, var(--accent-red) 8%, transparent);
}

/* Portfolio Monitor notification badge */
#pmBadge {
  display: none;
  background: var(--accent-red);
  color: #fff;
  font-size: 0.6rem;
  border-radius: 50%;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  margin-left: 4px;
  vertical-align: super;
}

/* ============================================================================
   Manual Balance Refresh Button Styles
   ============================================================================ */

.icon-button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    margin-left: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.icon-button:hover {
    background: var(--bg-secondary);
    color: var(--accent-blue);
}

.icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.icon-button.loading .refresh-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.error-message {
    color: var(--accent-red);
    font-size: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(248, 81, 73, 0.1);
    border-radius: 4px;
}

/* ARIA live region for screen reader announcements */
#ariaLiveRegion {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Compact Module Status (WS8/WS10/WS11) ────────────────── */
.right-column .modules-panel {
    flex: 0 0 auto;
}
/* Collapsible column overrides module panel too */
.collapsible-column > .modules-panel {
    max-height: none;
}
.modules-panel .panel-header h2 { font-size: 0.75rem; }
.modules-compact {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.module-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.6rem;
    padding: 0.12rem 0;
}
.module-label {
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
.module-value {
    color: var(--text-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
    margin-left: 0.4rem;
}
.module-value.module-active {
    color: var(--accent-green);
}
.module-value.module-disabled {
    color: var(--text-secondary);
}
.module-value.module-trending {
    color: var(--accent-red);
    font-weight: 700;
}
.module-value.module-meanreverting {
    color: var(--accent-green);
    font-weight: 700;
}
.module-value.module-choppy {
    color: var(--accent-yellow);
    font-weight: 700;
}


/* ============================================================================
   Trading Activity View
   Task 16.1: Accessibility and Task 16.2: Visual Polish
   ============================================================================ */

/* Task 16.1: Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Task 16.1: Keyboard focus styles for accessibility */
.activity-feed-item:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    background: var(--bg-hover);
}

.metric-card:focus-within {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

button:focus-visible,
.btn-icon:focus-visible,
input:focus-visible,
select:focus-visible,
.filter-checkbox input:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Task 16.2: Smooth transitions for visual polish */
.activity-feed-item {
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.activity-feed-item:hover {
    transform: translateX(2px);
}

.metric-card {
    transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.metric-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.btn-icon {
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-icon:hover {
    transform: scale(1.1);
}

.btn-icon:active {
    transform: scale(0.95);
}

.trading-activity-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    height: 100%;
    overflow-y: auto;
}

/* ── Collapsible center-panel sections ─────────────────────── */
.collapsible-sections {
    gap: 0;
}
/* Keep metrics cards section unchanged (no collapse) */
.collapsible-sections > .metrics-cards-section {
    margin-bottom: 0.5rem;
}
/* Section bodies (header has been extracted) — seamless wrappers */
.collapsible-sections > .collapsible-section-body {
    max-height: none;
    min-height: 0;
    flex: none;
    overflow: visible;
    transition: height 0.25s ease;
}

/* Metrics Cards Section */
.metrics-cards-section {
    flex-shrink: 0;
}

.metrics-cards-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.4rem;
}

.metric-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.metric-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-mono);
    /* Task 16.2: Smooth color transitions */
    transition: color 0.3s ease;
}

/* Task 16.2: Consistent P&L color coding using profit/loss variables */
.metric-value.positive {
    color: var(--profit);
}

.metric-value.negative {
    color: var(--loss);
}

.metric-value.warning {
    color: var(--accent-yellow);
}

/* Activity Feed Section */
.activity-feed-section {
    flex: 2;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.activity-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.activity-feed-header h3 {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activity-feed-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.activity-feed-container {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    /* Task 15.1: Performance optimizations */
    will-change: scroll-position;
    contain: layout style paint;
}

.activity-feed-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
}

.activity-feed-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Task 15.1: Performance optimization */
    contain: layout style;
}

.activity-feed-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    transition: background 0.2s;
    /* Task 15.1: Performance optimizations */
    contain: layout style paint;
}

.activity-feed-item:hover {
    background: var(--bg-hover);
}

.activity-feed-item.event-opportunity {
    border-left: 3px solid var(--accent-blue);
}

.activity-feed-item.event-execution {
    border-left: 3px solid var(--accent-green);
}

.activity-feed-item.event-skip {
    border-left: 3px solid var(--accent-red);
}

.activity-feed-item-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.activity-feed-icon {
    font-size: 1rem;
}

.activity-feed-type {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.activity-feed-timestamp {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: auto;
    font-family: var(--font-mono);
}

.activity-feed-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
}

.activity-feed-strategy,
.activity-feed-market,
.activity-feed-reason,
.activity-feed-detail {
    color: var(--text-secondary);
}

.activity-feed-strategy {
    font-weight: 600;
}

.activity-feed-reason {
    color: var(--accent-red);
    font-style: italic;
}

/* Strategy badge in activity feed header */
.af-strat-badge {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* Market name row in activity feed */
.af-market {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
}

/* Detail pills row */
.af-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}

.af-pill {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--text-secondary);
}

/* Filter and customization controls */
.activity-feed-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.activity-feed-filters,
.column-visibility-panel {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.filter-group {
    margin-bottom: 0.5rem;
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-group-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.filter-group-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.filter-checkbox input[type="checkbox"] {
    cursor: pointer;
    width: 14px;
    height: 14px;
}

.filter-checkbox:hover {
    color: var(--accent-blue);
}

.btn-icon {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s;
}

.btn-icon:hover {
    background: var(--bg-hover);
    border-color: var(--accent-blue);
}

.btn-secondary {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--accent-blue);
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
}

/* Historical date range selector */
.activity-feed-date-range {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.date-range-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.date-range-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-range-input-group label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.date-range-input {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.date-range-status {
    font-size: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0;
}

/* Session selector */
.session-selector {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    margin-right: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .metrics-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filter-group-options {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .date-range-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .date-range-input-group {
        width: 100%;
    }
}

/* ============================================================================
   Consolidated Positions & Orders Tab - Split View
   ============================================================================ */

.positions-orders-split-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    overflow: hidden;
}

.positions-section,
.orders-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    background: var(--bg-secondary);
    overflow: hidden;
}

.positions-section h3,
.orders-section h3 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.positions-section h3 svg,
.orders-section h3 svg {
    opacity: 0.7;
}

#positionsContent,
#ordersContent {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Ensure sub-tabs and tables work within the split view */
.positions-section .positions-subtabs,
.orders-section .open-orders-toolbar {
    flex-shrink: 0;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
    .positions-orders-split-view {
        gap: 12px;
    }
    
    .positions-section,
    .orders-section {
        padding: 10px;
    }
}

/* ============================================================================
   Limits Indicator (sub-navbar badge)
   ============================================================================ */

.limits-clear {
    color: var(--accent-green) !important;
}
.limits-active {
    color: var(--accent-yellow, #d29922) !important;
    animation: limits-pulse 2s ease-in-out infinite;
}
.limits-critical {
    color: var(--accent-red) !important;
    animation: limits-pulse 1.5s ease-in-out infinite;
}
@keyframes limits-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.limits-indicator {
    position: relative;
}
.limits-popover {
    position: fixed;
    z-index: 200;
    min-width: 280px;
    max-width: 360px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    padding: 0.6rem 0.75rem;
    font-size: 0.65rem;
    color: var(--text-primary);
    line-height: 1.5;
}
.limits-popover .lp-row {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(48,54,61,0.5);
}
.limits-popover .lp-row:last-child {
    border-bottom: none;
}
.limits-popover .lp-label {
    color: var(--text-muted, #8b949e);
}
.limits-popover .lp-value {
    font-weight: 600;
}
.limits-popover .lp-value.at-limit {
    color: var(--accent-yellow, #d29922);
}
.limits-popover .lp-value.ok {
    color: var(--accent-green);
}
.limits-popover .lp-section {
    font-weight: 600;
    color: var(--text-primary);
    padding: 0.3rem 0 0.1rem;
    margin-top: 0.2rem;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Signal Detail Popover (Strategy Cards) ── */
.signal-popover {
    position: fixed;
    z-index: 250;
    min-width: 300px;
    max-width: 440px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    padding: 0.6rem 0.75rem;
    font-size: 0.65rem;
    color: var(--text-primary);
    line-height: 1.5;
}
.signal-popover .sp-header {
    font-weight: 600;
    font-size: 0.7rem;
    padding-bottom: 0.3rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-color, #30363d);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.signal-popover .sp-close {
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.8rem;
}
.signal-popover .sp-close:hover { opacity: 1; }
.signal-popover .sp-row {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(48,54,61,0.3);
}
.signal-popover .sp-row:last-child { border-bottom: none; }
.signal-popover .sp-label {
    color: var(--text-muted, #8b949e);
    flex-shrink: 0;
}
.signal-popover .sp-value {
    font-weight: 600;
    text-align: right;
}
.signal-popover .sp-section {
    font-weight: 600;
    color: var(--text-primary);
    padding: 0.3rem 0 0.1rem;
    margin-top: 0.2rem;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.signal-popover .sp-pos {
    background: rgba(139,148,158,0.06);
    border-radius: 4px;
    padding: 0.3rem 0.4rem;
    margin: 0.2rem 0;
}
.signal-popover .sp-pos-header {
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.15rem;
}
.signal-popover .sp-signal-hold { color: var(--text-muted, #8b949e); }
.signal-popover .sp-signal-tp { color: var(--accent-green); }
.signal-popover .sp-signal-sl { color: var(--accent-red); }
.signal-popover .sp-signal-ts { color: var(--accent-yellow, #d29922); }
.signal-popover .sp-signal-td { color: var(--accent-blue); }
.strategy-card .signal.has-detail {
    cursor: pointer;
    border-left: 2px solid var(--accent-blue);
}
.strategy-card .signal.has-detail:hover {
    background: rgba(88,166,255,0.08);
    border-left-color: var(--accent-blue);
}

/* ── Exit Proximity Indicators (Filled Positions) ── */
.pos-near-tp {
    color: var(--accent-green) !important;
    font-weight: 600;
}
.pos-at-tp {
    color: #00c853 !important;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(0,200,83,0.4);
}
.pos-near-sl {
    color: var(--accent-yellow, #d29922) !important;
    font-weight: 600;
}
.pos-at-sl {
    color: var(--accent-red) !important;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(248,81,73,0.4);
}
.tpsl-col {
    font-size: 0.75rem;
    white-space: nowrap;
}
.tpsl-col .tp-val {
    color: var(--accent-green);
}
.tpsl-col .sl-val {
    color: var(--accent-red);
}

/* ============================================================================
   Table Filter Inputs (TableManager)
   ============================================================================ */

.table-filter-row th,
.table-filter-cell {
    padding: 0.15rem 0.3rem !important;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color, #30363d);
}

.table-filter-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem 0.35rem;
    font-size: 0.6rem;
    font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 3px;
    outline: none;
    transition: border-color 0.15s;
}

.table-filter-input:focus {
    border-color: var(--accent-blue);
}

.table-filter-input::placeholder {
    color: var(--text-muted, #484f58);
    opacity: 0.6;
    font-size: 0.55rem;
    font-style: italic;
}

.table-filter-input.active {
    border-left: 2px solid var(--accent-blue);
}

.table-filter-select {
    width: 100%;
    min-width: 3.5rem;
    box-sizing: border-box;
    padding: 0.15rem 0.25rem;
    font-size: 0.6rem;
    font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23484f58' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    padding-right: 1rem;
}

.table-filter-select:focus {
    border-color: var(--accent-blue);
}

.table-filter-select.active {
    border-left: 2px solid var(--accent-blue);
}

.table-filter-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Sortable header cursor for tables that use TableManager */
.bt-table th[onclick] {
    cursor: pointer;
    user-select: none;
}
.bt-table th[onclick]:hover {
    color: var(--accent-blue);
}
.bt-table th .sort-arrow {
    font-size: 0.55rem;
    margin-left: 0.2rem;
}

/* Control source badges for strategy cards */
.control-source-badge {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.control-source-badge.scaler { background: rgba(88, 166, 255, 0.15); color: var(--accent-blue); border: 1px solid rgba(88, 166, 255, 0.3); }
.control-source-badge.allocator { background: rgba(188, 148, 255, 0.15); color: #bc94ff; border: 1px solid rgba(188, 148, 255, 0.3); }
.control-source-badge.user-disabled { background: rgba(248, 81, 73, 0.15); color: var(--accent-red); border: 1px solid rgba(248, 81, 73, 0.3); }
.control-source-badge.missing-creds { background: rgba(210, 153, 34, 0.15); color: #d29922; border: 1px solid rgba(210, 153, 34, 0.3); }
.control-source-badge.wrong-platform { background: rgba(219, 171, 9, 0.15); color: #dbab09; border: 1px solid rgba(219, 171, 9, 0.3); }
.control-source-badge.tier-controlled { background: rgba(63, 185, 80, 0.15); color: var(--accent-green); border: 1px solid rgba(63, 185, 80, 0.3); }