/* Kalshi Quant Bot Dashboard Styles */
/* Modern Trading Interface */

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

:root {
    --bg-primary: #06060f;
    --bg-secondary: #0a0a16;
    --bg-tertiary: #14142a;
    --bg-card: #0e0e1c;
    --border-color: rgba(255,255,255,0.08);
    --border-light: rgba(255,255,255,0.12);
    --text-primary: #e8e8f0;
    --text-secondary: #a0a0b8;
    --text-muted: #686884;

    /* Warm Amber + Emerald palette */
    --accent-primary: #e8a826;
    --accent-light: #f0c050;
    --accent-dark: #c08820;
    --positive: #34d399;
    --negative: #f87171;
    --accent-red: #f87171;
    --accent-yellow: #fbbf24;
    --accent-blue: #60a5fa;

    /* Mode-specific colors */
    --mode-live-bg: #1c0a0a;
    --mode-live-border: #4d2020;
    --mode-live-text: #f87171;
    --mode-paper-bg: #1c1508;
    --mode-paper-border: #4d3a18;
    --mode-paper-text: #e8a826;

    /* Typography */
    --font-display: 'Syne', system-ui, sans-serif;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;

    /* Font sizes */
    --text-xs: 0.65rem;
    --text-sm: 0.75rem;
    --text-base: 0.875rem;
    --text-lg: 1.05rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.75rem;

    /* Card system */
    --card-radius: 12px;
    --card-padding: 24px;
    --card-gap: 20px;

    /* Table dimensions */
    --row-height: 32px;
    --font-size-table: 0.8rem;
    --font-size-header: 0.72rem;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    font-size: var(--text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(232,168,38,0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(96,165,250,0.02) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Header */
.header {
    background: var(--bg-secondary);
    height: 48px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.25rem;
    position: relative;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
    overflow: visible;
}

.header h1 {
    color: var(--accent-primary);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding-right: 1.5rem;
    border-right: 1px solid var(--border-color);
    margin-right: 0;
}

.header .status {
    color: var(--text-secondary);
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Menu Bar */
.menu-bar {
    display: flex;
    height: 100%;
    align-items: stretch;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: transparent;
    border-radius: 0;
    transition: all 0.15s;
    position: relative;
    letter-spacing: 0.02em;
}

.menu-item:hover {
    color: var(--accent-primary);
    background: rgba(232, 168, 38, 0.08);
}

.menu-item.active {
    color: var(--accent-primary);
    background: rgba(232, 168, 38, 0.1);
}

.menu-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-primary);
}

/* Dropdown */
.menu-dropdown-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: stretch;
}

.menu-dropdown-wrapper .menu-item {
    height: 100%;
}

.menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-secondary);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 2px solid var(--accent-primary);
    border-radius: 0 0 10px 10px;
    min-width: 200px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
    overflow: hidden;
}

.menu-dropdown-wrapper:hover .menu-dropdown,
.menu-dropdown-wrapper.open .menu-dropdown {
    display: block;
}

.dropdown-section {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.dropdown-section:last-child {
    border-bottom: none;
}

.dropdown-header {
    padding: 0.25rem 1rem;
    font-size: 0.65rem;
    color: var(--accent-primary);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

.dropdown-item {
    display: block;
    padding: 0.4rem 1rem 0.4rem 1.5rem;
    font-size: 0.72rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}

.dropdown-item:hover {
    background: rgba(232, 168, 38, 0.12);
    color: var(--accent-primary);
}

.dropdown-item.active {
    color: var(--accent-primary);
}

/* Mode Warning Banner */
.mode-banner {
    padding: 0.35rem 2rem;
    font-size: 0.72rem;
    font-weight: bold;
    text-align: center;
    display: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 50;
}

.mode-banner.live {
    display: block;
    background: var(--mode-live-bg);
    color: var(--mode-live-text);
    border-bottom: 1px solid var(--mode-live-border);
}

.mode-banner.paper {
    display: block;
    background: var(--mode-paper-bg);
    color: var(--mode-paper-text);
    border-bottom: 1px solid var(--mode-paper-border);
}

.account-safety-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 18px;
    background: #211318;
    color: #f7d9df;
    border-bottom: 1px solid rgba(255, 104, 128, 0.28);
    position: relative;
    z-index: 49;
}

.account-safety-banner[hidden] {
    display: none;
}

.account-safety-copy {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.account-safety-title {
    font-size: 0.76rem;
    font-weight: 700;
}

.account-safety-detail {
    font-size: 0.72rem;
    color: #d8a9b2;
}

.account-safety-panic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 104, 128, 0.42);
    border-radius: 6px;
    background: rgba(255, 104, 128, 0.12);
    color: #ffdce2;
    padding: 6px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.account-safety-panic:hover:not(:disabled) {
    background: rgba(255, 104, 128, 0.2);
}

.account-safety-panic:disabled {
    opacity: 0.6;
    cursor: wait;
}

.legal-reconsent-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid rgba(255, 207, 117, 0.2);
    border-bottom: 1px solid rgba(255, 207, 117, 0.2);
    background: rgba(232, 168, 38, 0.1);
    color: #f5f7fb;
    padding: 10px 20px;
}

.legal-reconsent-banner[hidden] {
    display: none;
}

.legal-reconsent-banner.blocking {
    border-color: rgba(255, 104, 128, 0.34);
    background: rgba(255, 104, 128, 0.12);
}

.legal-reconsent-banner-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.legal-reconsent-banner-title {
    color: #f7e5bb;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.legal-reconsent-banner.blocking .legal-reconsent-banner-title {
    color: #ffdce2;
}

.legal-reconsent-banner-detail {
    color: #b8c3d2;
    font-size: 0.78rem;
    line-height: 1.4;
}

.legal-reconsent-banner-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.legal-reconsent-banner-actions a,
.legal-reconsent-banner-actions button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(184, 195, 210, 0.22);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: #e7edf6;
    padding: 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.legal-reconsent-banner-actions a:hover,
.legal-reconsent-banner-actions button:hover {
    border-color: rgba(255, 207, 117, 0.42);
    color: #ffe0a3;
}

.legal-reconsent-banner-actions #legal-reconsent-review-btn {
    border-color: rgba(255, 207, 117, 0.55);
    background: rgba(255, 207, 117, 0.16);
    color: #ffe0a3;
}

.legal-reconsent-banner.blocking #legal-reconsent-dismiss-btn {
    display: none;
}

.legal-reconsent-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5, 9, 14, 0.78);
}

.legal-reconsent-modal[hidden] {
    display: none;
}

.legal-reconsent-panel {
    position: relative;
    width: min(620px, 100%);
    max-height: min(86vh, 760px);
    overflow: auto;
    border: 1px solid rgba(255, 207, 117, 0.34);
    border-radius: 8px;
    background: #10151d;
    color: #f4f7fb;
    padding: 24px;
    box-shadow: 0 18px 64px rgba(0, 0, 0, 0.42);
}

.legal-reconsent-modal.blocking .legal-reconsent-panel {
    border-color: rgba(255, 104, 128, 0.42);
}

.legal-reconsent-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(184, 195, 210, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: #b8c3d2;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.legal-reconsent-close:hover {
    color: #f4f7fb;
}

.legal-reconsent-kicker {
    margin-bottom: 8px;
    color: #e8a826;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.legal-reconsent-panel h2 {
    margin: 0 36px 8px 0;
    font-size: 1.08rem;
    letter-spacing: 0;
}

.legal-reconsent-panel p {
    margin: 0;
    color: #b8c3d2;
    font-size: 0.86rem;
    line-height: 1.5;
}

.legal-reconsent-panel .legal-reconsent-intro {
    margin-bottom: 16px;
}

.legal-reconsent-documents {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.legal-reconsent-doc-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: start;
    border: 1px solid rgba(184, 195, 210, 0.16);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
}

.legal-reconsent-doc-title {
    display: block;
    color: #f4f7fb;
    font-size: 0.84rem;
    font-weight: 800;
}

.legal-reconsent-doc-meta {
    display: block;
    margin-top: 3px;
    color: #aab6c7;
    font-size: 0.75rem;
    line-height: 1.42;
}

.legal-reconsent-doc-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.legal-reconsent-doc-links a,
.legal-reconsent-reference-links a {
    color: #ffe0a3;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
}

.legal-reconsent-doc-links a:hover,
.legal-reconsent-reference-links a:hover {
    text-decoration: underline;
}

.legal-reconsent-reference-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
    border-top: 1px solid rgba(184, 195, 210, 0.14);
    border-bottom: 1px solid rgba(184, 195, 210, 0.14);
    padding: 10px 0;
}

.legal-reconsent-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0;
    border: 1px solid rgba(184, 195, 210, 0.16);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
    padding: 11px 12px;
    color: #e7edf6;
    font-size: 0.84rem;
    line-height: 1.45;
    cursor: pointer;
}

.legal-reconsent-check input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.legal-reconsent-panel .legal-reconsent-status {
    min-height: 20px;
    margin-top: 14px;
    font-size: 0.78rem;
    color: #b8c3d2;
}

.legal-reconsent-panel .legal-reconsent-status.error {
    color: #ff9baa;
}

.legal-reconsent-panel .legal-reconsent-status.success {
    color: #8fe4b0;
}

.legal-reconsent-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.legal-reconsent-actions button {
    min-height: 38px;
    border-radius: 6px;
    border: 1px solid rgba(184, 195, 210, 0.28);
    background: transparent;
    color: #e7edf6;
    padding: 0 14px;
    font-weight: 700;
    cursor: pointer;
}

.legal-reconsent-actions button:last-child {
    border-color: rgba(255, 207, 117, 0.55);
    background: rgba(255, 207, 117, 0.16);
    color: #ffe0a3;
}

.legal-reconsent-actions button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .legal-reconsent-banner {
        align-items: flex-start;
        flex-direction: column;
        padding: 10px 14px;
    }

    .legal-reconsent-banner-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 560px) {
    .legal-reconsent-modal {
        align-items: flex-end;
        padding: 16px;
    }

    .legal-reconsent-panel {
        padding: 18px;
    }

    .legal-reconsent-doc-row {
        grid-template-columns: 1fr;
    }

    .legal-reconsent-doc-links {
        justify-content: flex-start;
    }

    .legal-reconsent-actions {
        flex-direction: column-reverse;
    }

    .legal-reconsent-actions button {
        width: 100%;
    }
}

.live-compliance-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5, 9, 14, 0.78);
}

.live-compliance-modal[hidden] {
    display: none;
}

.live-compliance-panel {
    width: min(520px, 100%);
    border: 1px solid rgba(255, 207, 117, 0.36);
    border-radius: 8px;
    background: #10151d;
    color: #f4f7fb;
    padding: 24px;
    box-shadow: 0 18px 64px rgba(0, 0, 0, 0.42);
}

.live-compliance-kicker {
    margin-bottom: 8px;
    color: #e8a826;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.live-compliance-panel h2 {
    margin: 0 0 8px;
    font-size: 1.08rem;
    letter-spacing: 0;
}

.live-compliance-panel p {
    margin: 0;
    color: #b8c3d2;
    font-size: 0.86rem;
    line-height: 1.5;
}

.live-compliance-panel .live-compliance-intro {
    margin-bottom: 16px;
}

.live-compliance-risk-list {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
}

.live-compliance-risk {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 12px;
    align-items: start;
    border: 1px solid rgba(184, 195, 210, 0.16);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
}

.live-compliance-risk span {
    color: #f4f7fb;
    font-size: 0.74rem;
    font-weight: 800;
}

.live-compliance-risk p {
    color: #aab6c7;
    font-size: 0.78rem;
    line-height: 1.42;
}

.live-compliance-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0;
    border: 1px solid rgba(184, 195, 210, 0.16);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
    padding: 11px 12px;
    color: #e7edf6;
    font-size: 0.84rem;
    line-height: 1.45;
    cursor: pointer;
}

.live-compliance-check input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.live-compliance-panel .live-compliance-status {
    min-height: 20px;
    margin-top: 14px;
    font-size: 0.78rem;
    color: #b8c3d2;
}

.live-compliance-panel .live-compliance-status.error {
    color: #ff9baa;
}

.live-compliance-panel .live-compliance-status.success {
    color: #8fe4b0;
}

.live-compliance-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.live-compliance-actions button {
    min-height: 38px;
    border-radius: 6px;
    border: 1px solid rgba(184, 195, 210, 0.28);
    background: transparent;
    color: #e7edf6;
    padding: 0 14px;
    font-weight: 700;
    cursor: pointer;
}

.live-compliance-actions button:last-child {
    border-color: rgba(255, 207, 117, 0.55);
    background: rgba(255, 207, 117, 0.16);
    color: #ffe0a3;
}

.live-compliance-actions button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .live-compliance-modal {
        align-items: flex-end;
        padding: 16px;
    }

    .live-compliance-panel {
        padding: 18px;
    }

    .live-compliance-risk {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .live-compliance-actions {
        flex-direction: column-reverse;
    }

    .live-compliance-actions button {
        width: 100%;
    }
}

/* Mode Toggle Button */
.mode-toggle {
    background: transparent;
    border: 1px solid;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mode-toggle.paper {
    color: var(--mode-paper-text);
    border-color: var(--mode-paper-border);
}

.mode-toggle.paper:hover {
    background: var(--mode-paper-bg);
    border-color: var(--mode-paper-text);
}

.mode-toggle.live {
    color: var(--mode-live-text);
    border-color: var(--mode-live-border);
    animation: pulse-live 2s infinite;
}

.mode-toggle.live:hover {
    background: var(--mode-live-bg);
    border-color: var(--mode-live-text);
}

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

.mode-toggle.live-unavailable {
    cursor: not-allowed;
    opacity: 0.5;
}

.mode-toggle.live-unavailable:hover {
    background: transparent;
}

/* Main Container */
.main-container {
    padding: 0;
    max-width: 100%;
    margin: 0;
}

/* Grid Layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--card-gap);
    padding: var(--card-gap);
}

/* Card Styles */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
}

.card h2 {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.01em;
}

.card h2 .time-selector {
    display: flex;
    gap: 0.25rem;
}

.card h2 .time-btn {
    padding: 0.15rem 0.4rem;
    font-size: 0.65rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 1px;
}

.card h2 .time-btn.active {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
}

/* Grid spans */
.full-width {
    grid-column: 1 / -1;
}

.half-width {
    grid-column: 1 / -1;
}

.equity-positions-row {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1px;
    background: var(--border-color);
}

/* Metrics */
.metric {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: var(--text-sm);
}

.metric:last-child {
    border-bottom: none;
}

.metric-label {
    color: var(--text-secondary);
    font-family: var(--font-body);
}

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

.positive { color: var(--positive); }
.negative { color: var(--negative); }
.warning { color: var(--accent-yellow); }
.neutral { color: var(--text-secondary); }

/* Tables - Base */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-table);
}

th, td {
    padding: 2px 8px;
    text-align: left;
    border-bottom: 1px solid #1a1a2a;
    height: var(--row-height);
    line-height: var(--row-height);
}

th {
    color: var(--text-muted);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--font-size-header);
    letter-spacing: 0.02em;
    background: rgba(255,255,255,0.02);
}

td {
    font-family: var(--font-mono);
}

tbody tr:hover {
    background: rgba(232, 168, 38, 0.04);
}

/* Clickable rows */
tbody tr.clickable {
    cursor: pointer;
}

tbody tr.clickable:hover {
    background: rgba(232, 168, 38, 0.12);
}

tbody tr.position-row {
    transition: background-color 0.15s ease;
}

tbody tr.position-row:hover td {
    color: var(--accent-primary);
}

/* Bloomberg Market Table */
.market-table-container {
    width: 100%;
    overflow-x: auto;
    background: var(--bg-primary);
}

.market-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-table);
    table-layout: fixed;
}

.market-table th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    color: var(--accent-primary);
    font-weight: bold;
    font-size: var(--font-size-header);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    height: 24px;
    border-bottom: 1px solid var(--accent-primary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.market-table th:hover {
    background: rgba(232, 168, 38, 0.12);
}

.market-table th.sorted-asc::after {
    content: ' \u25B2';
    font-size: 0.6rem;
}

.market-table th.sorted-desc::after {
    content: ' \u25BC';
    font-size: 0.6rem;
}

.market-table td {
    padding: 2px 8px;
    height: var(--row-height);
    line-height: var(--row-height);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-table tbody tr {
    background: var(--bg-primary);
}

.market-table tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}

.market-table tbody tr:hover {
    background: rgba(232, 168, 38, 0.06);
}

.market-table tbody tr.has-position {
    background: rgba(232, 168, 38, 0.1);
    border-left: 3px solid var(--accent-primary);
}

.market-table tbody tr.has-position:hover {
    background: rgba(232, 168, 38, 0.15);
}

/* Column widths */
.col-ticker { width: 100px; }
.col-title { width: auto; min-width: 200px; }
.col-category { width: 70px; }
.col-price { width: 55px; text-align: right; }
.col-volume { width: 65px; text-align: right; }
.col-status { width: 40px; text-align: center; }

/* Price styling */
.price-bid {
    color: var(--accent-primary);
}

.price-ask {
    color: var(--accent-light);
}

.price-cell {
    font-family: 'Monaco', 'Menlo', monospace;
    font-weight: bold;
}

/* ============================================================================
   Market Cards Grid (Kalshi-Style Polished Design)
   ============================================================================ */

.market-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    padding: 20px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.loading-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: #555;
}

.no-markets {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: #666;
}

.no-markets-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

/* Market Card - Kalshi Style */
.market-card {
    position: relative;
    background: linear-gradient(180deg, #1a1a1f 0%, #141418 100%);
    border: 1px solid #2a2a2f;
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.market-card:hover {
    border-color: #3a3a40;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.market-card.has-position {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px rgba(232, 168, 38, 0.25);
}

.market-card.has-position::after {
    content: 'POSITION';
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--accent-primary);
    background: rgba(232, 168, 38, 0.12);
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.market-card.has-trades {
    border-color: #444;
}

/* Card Header */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.card-category {
    font-size: 0.68rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

.card-status {
    font-size: 0.68rem;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.card-status.live {
    background: linear-gradient(135deg, rgba(0, 200, 100, 0.25) 0%, rgba(0, 150, 75, 0.25) 100%);
    color: #00d668;
    animation: pulse-live 2s ease-in-out infinite;
}

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

.card-status.upcoming {
    background: rgba(255, 170, 51, 0.15);
    color: #ffaa33;
}

.card-status.open {
    background: rgba(100, 150, 255, 0.15);
    color: #7cacff;
}

.card-status.closed {
    background: rgba(100, 100, 100, 0.15);
    color: #888;
}

/* Card Title */
.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f0f0f0;
    line-height: 1.35;
    margin-bottom: 12px;
    min-height: 30px;
}

/* Live Score Display - ESPN-Style Scoreboard */
.card-scoreboard {
    background: linear-gradient(180deg, #1a1a2e 0%, #151520 100%);
    border: 1px solid rgba(232, 168, 38, 0.28);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.scoreboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(255, 68, 68, 0.25) 0%, rgba(200, 50, 50, 0.2) 100%);
    border-bottom: 1px solid rgba(232, 168, 38, 0.12);
}

.scoreboard-header-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ff4444;
    letter-spacing: 0.5px;
}

.scoreboard-live-dot {
    width: 8px;
    height: 8px;
    background: #ff4444;
    border-radius: 50%;
    animation: pulse-dot 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.6);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

.scoreboard-teams {
    display: flex;
    flex-direction: column;
}

.scoreboard-team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
}

.scoreboard-team-row:first-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.scoreboard-team-row.winning {
    background: rgba(255, 102, 0, 0.06);
}

.scoreboard-team-abbr {
    font-size: 0.9rem;
    font-weight: 700;
    color: #e0e0e0;
    letter-spacing: 0.5px;
}

.scoreboard-team-row.winning .scoreboard-team-abbr {
    color: #ff6600;
}

.scoreboard-team-score {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    min-width: 40px;
    text-align: right;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.scoreboard-team-row.winning .scoreboard-team-score {
    color: #ff6600;
}

/* Old styles for backward compat */
.card-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(232, 168, 38, 0.1) 0%, rgba(200, 80, 0, 0.12) 100%);
    border: 1px solid rgba(232, 168, 38, 0.2);
    border-radius: 10px;
}

.score-team {
    font-size: 0.8rem;
    font-weight: 700;
    color: #999;
    min-width: 36px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.score-team:first-child {
    text-align: right;
}

.score-team:last-child {
    text-align: left;
}

.score-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    min-width: 32px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.score-separator {
    font-size: 1.1rem;
    color: #555;
    font-weight: 300;
}

/* Chart Container - Takes most of the card space */
.card-chart-container {
    flex: 1;
    position: relative;
    min-height: 100px;
    margin: 8px 0;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.sparkline-canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Sparkline loading shimmer */
.sparkline-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

.sparkline-shimmer {
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.06),
        transparent
    );
    background-size: 200% 100%;
    animation: sparkline-shimmer 1.5s infinite;
    border-radius: 1px;
}

@keyframes sparkline-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Price Display - Bottom right overlay on chart */
/* Dual team prices overlay - Kalshi style */
.card-prices-overlay {
    position: absolute;
    bottom: 8px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
}

.price-team {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.price-team1 {
    align-items: flex-start;
}

.price-team2 {
    align-items: flex-end;
}

.price-team .team-name {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-team1 .team-name {
    color: #4a9eff;
}

.price-team2 .team-name {
    color: #e94560;
}

.price-team .team-price {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1;
}

.price-team1 .team-price {
    color: #4a9eff;
}

.price-team2 .team-price {
    color: #e94560;
}

/* Legacy single price overlay */
.card-price-overlay {
    position: absolute;
    bottom: 8px;
    right: 12px;
    text-align: right;
}

.price-main {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.price-main.up {
    color: #00d668;
}

.price-main.down {
    color: #ff5252;
}

.price-label {
    font-size: 0.65rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Legacy sparkline row (fallback) */
.card-spark-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-height: 80px;
}

.sparkline {
    flex: 1;
    height: 80px;
    background: transparent;
}

.card-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 70px;
}

.price-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Position Info */
.position-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    margin-top: auto;
}

.position-info.active {
    background: linear-gradient(135deg, rgba(232, 168, 38, 0.1) 0%, rgba(200, 80, 0, 0.12) 100%);
    border: 1px solid rgba(232, 168, 38, 0.2);
}

.position-info.traded {
    background: rgba(80, 80, 80, 0.2);
    border: 1px solid rgba(100, 100, 100, 0.25);
}

.position-qty {
    color: #f0f0f0;
    font-weight: 700;
}

.position-entry {
    color: #888;
}

.position-pnl {
    margin-left: auto;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.position-pnl.profit {
    color: #00d668;
}

.position-pnl.loss {
    color: #ff5252;
}

.position-strategy {
    color: var(--accent-primary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.strategy-col {
    color: var(--accent-primary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.trade-count {
    color: #888;
}

/* Enhanced Position Info for Modal */
.position-info.active {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.position-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Position P&L Mini Chart */
.position-pnl-chart {
    padding: 8px 0;
}

.pnl-chart-bar {
    position: relative;
    height: 20px;
    background: linear-gradient(to right,
        rgba(255, 82, 82, 0.3) 0%,
        rgba(80, 80, 80, 0.2) 50%,
        rgba(0, 214, 104, 0.3) 100%);
    border-radius: 3px;
    margin-bottom: 4px;
}

.pnl-marker {
    position: absolute;
    top: -2px;
    width: 3px;
    height: 24px;
    border-radius: 2px;
    transform: translateX(-50%);
    z-index: 2;
}

.pnl-marker.entry {
    background: #fff;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.pnl-marker.current {
    width: 8px;
    height: 8px;
    top: 6px;
    border-radius: 50%;
}

.pnl-marker.current.profit {
    background: #00d668;
    box-shadow: 0 0 6px rgba(0, 214, 104, 0.8);
}

.pnl-marker.current.loss {
    background: #ff5252;
    box-shadow: 0 0 6px rgba(255, 82, 82, 0.8);
}

.pnl-zone {
    position: absolute;
    top: 4px;
    height: 12px;
    border-radius: 2px;
    opacity: 0.5;
}

.pnl-zone.profit {
    background: linear-gradient(90deg, transparent, #00d668);
}

.pnl-zone.loss {
    background: linear-gradient(90deg, #ff5252, transparent);
}

.pnl-chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: #666;
}

.pnl-chart-labels .entry-label {
    color: #fff;
    font-weight: 600;
}

/* Break-even Calculator */
.breakeven-calc {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(232, 168, 38, 0.16);
    border-radius: 4px;
    padding: 10px;
}

.breakeven-header {
    font-size: 0.65rem;
    color: var(--accent-primary);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.breakeven-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.72rem;
}

.be-label {
    color: #888;
    min-width: 80px;
}

.be-value {
    color: #fff;
    font-weight: 600;
    min-width: 50px;
}

.be-diff {
    color: #666;
    font-size: 0.68rem;
    margin-left: auto;
}

.be-diff.profit {
    color: #00d668;
}

.be-diff.loss {
    color: #ff5252;
}

/* Partial Close Buttons */
.partial-close-section {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.partial-close-header {
    font-size: 0.65rem;
    color: var(--accent-primary);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.partial-close-buttons {
    display: flex;
    gap: 8px;
}

.partial-close-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    background: rgba(255, 82, 82, 0.15);
    border: 1px solid rgba(255, 82, 82, 0.3);
    border-radius: 4px;
    color: #ff5252;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.partial-close-btn:hover:not(:disabled) {
    background: rgba(255, 82, 82, 0.3);
    border-color: rgba(255, 82, 82, 0.6);
    transform: translateY(-1px);
}

.partial-close-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.partial-close-btn.full {
    background: rgba(255, 82, 82, 0.25);
    border-color: rgba(255, 82, 82, 0.5);
}

.partial-close-btn .close-qty {
    font-size: 0.65rem;
    color: #999;
    font-weight: 400;
    margin-top: 2px;
}

/* Position Aging */
.position-aging {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    font-size: 0.72rem;
}

.aging-label {
    color: #666;
    text-transform: uppercase;
    font-size: 0.65rem;
}

.aging-value {
    color: #fff;
    font-weight: 600;
}

.aging-value.aged {
    color: #ffaa00;
}

.aging-risk {
    margin-left: auto;
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 3px;
}

.aging-risk.high {
    background: rgba(255, 82, 82, 0.2);
    color: #ff5252;
}

.aging-risk.medium {
    background: rgba(255, 170, 0, 0.2);
    color: #ffaa00;
}

.aging-risk.low {
    background: rgba(0, 214, 104, 0.2);
    color: #00d668;
}

/* Exit Recommendation */
.exit-recommendation {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 0.72rem;
}

.exit-recommendation.take-profit {
    background: rgba(0, 214, 104, 0.15);
    border: 1px solid rgba(0, 214, 104, 0.3);
}

.exit-recommendation.partial-exit {
    background: rgba(255, 170, 0, 0.15);
    border: 1px solid rgba(255, 170, 0, 0.3);
}

.exit-recommendation.stop-loss {
    background: rgba(255, 82, 82, 0.15);
    border: 1px solid rgba(255, 82, 82, 0.3);
}

.exit-recommendation.watch {
    background: rgba(255, 170, 0, 0.1);
    border: 1px solid rgba(255, 170, 0, 0.2);
}

.exit-recommendation.stale {
    background: rgba(100, 100, 100, 0.15);
    border: 1px solid rgba(100, 100, 100, 0.3);
}

.exit-recommendation.hold {
    background: rgba(68, 136, 255, 0.1);
    border: 1px solid rgba(68, 136, 255, 0.2);
}

.exit-icon {
    font-weight: 700;
    font-family: monospace;
}

.take-profit .exit-icon { color: #00d668; }
.partial-exit .exit-icon { color: #ffaa00; }
.stop-loss .exit-icon { color: #ff5252; }
.watch .exit-icon { color: #ffaa00; }
.stale .exit-icon { color: #888; }
.hold .exit-icon { color: #4488ff; }

.exit-action {
    font-weight: 700;
    text-transform: uppercase;
}

.take-profit .exit-action { color: #00d668; }
.partial-exit .exit-action { color: #ffaa00; }
.stop-loss .exit-action { color: #ff5252; }
.watch .exit-action { color: #ffaa00; }
.stale .exit-action { color: #888; }
.hold .exit-action { color: #4488ff; }

.exit-reason {
    color: #999;
    font-size: 0.68rem;
    margin-left: auto;
}

/* Stop-Loss / Take-Profit Setup */
.sl-tp-section {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(232, 168, 38, 0.16);
    border-radius: 4px;
    padding: 10px;
}

.sl-tp-header {
    font-size: 0.65rem;
    color: var(--accent-primary);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.sl-tp-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.sl-control, .tp-control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sl-control label, .tp-control label {
    font-size: 0.68rem;
    font-weight: 700;
}

.sl-control label {
    color: #ff5252;
}

.tp-control label {
    color: #00d668;
}

.sl-input, .tp-input {
    width: 50px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    color: #fff;
    font-size: 0.72rem;
    font-family: monospace;
    text-align: center;
}

.sl-input:focus, .tp-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.sl-pct {
    font-size: 0.65rem;
    color: #ff5252;
}

.tp-pct {
    font-size: 0.65rem;
    color: #00d668;
}

.sl-tp-set-btn {
    padding: 4px 12px;
    background: var(--accent-primary);
    border: none;
    border-radius: 3px;
    color: #000;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    margin-left: auto;
    transition: all 0.15s ease;
}

.sl-tp-set-btn:hover {
    background: var(--accent-light);
}

.sl-tp-set-btn.set-success {
    background: #00d668;
}

.sl-tp-visual {
    margin-top: 8px;
}

.sl-tp-bar {
    position: relative;
    height: 12px;
    background: linear-gradient(to right,
        rgba(255, 82, 82, 0.4) 0%,
        rgba(80, 80, 80, 0.2) 50%,
        rgba(0, 214, 104, 0.4) 100%);
    border-radius: 2px;
}

.sl-marker, .tp-marker, .entry-marker, .current-marker {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 16px;
    transform: translateX(-50%);
}

.sl-marker {
    background: #ff5252;
    box-shadow: 0 0 4px rgba(255, 82, 82, 0.6);
}

.tp-marker {
    background: #00d668;
    box-shadow: 0 0 4px rgba(0, 214, 104, 0.6);
}

.entry-marker {
    background: #fff;
    width: 2px;
}

.current-marker {
    width: 6px;
    height: 6px;
    top: 3px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 6px var(--accent-primary);
}

/* Correlation Indicator */
.correlation-section {
    padding-top: 8px;
}

.correlation-header {
    font-size: 0.65rem;
    color: var(--accent-primary);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.correlation-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.correlation-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.correlation-fill.corr-positive {
    background: #ff6600;
}

.correlation-fill.corr-negative {
    background: #4488ff;
}

.correlation-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
}

.corr-value {
    font-weight: 600;
    color: #fff;
}

.corr-desc {
    color: #888;
}

/* Card Footer */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
}

.card-volume {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #777;
}

.card-volume::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent-primary);
    border-radius: 50%;
    opacity: 0.7;
}

.card-expand {
    color: #888;
    font-weight: 600;
    transition: color 0.2s;
}

.card-expand:hover {
    color: var(--accent-primary);
}

/* Market Detail Modal */
.market-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.market-modal.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
}

.modal-content {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #e0e0e0;
}

.modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: #fff;
}

.modal-body {
    padding: 20px;
}

/* Modal Game Stats - ESPN Style Scoreboard */
.modal-scoreboard {
    background: linear-gradient(180deg, #1a1a2e 0%, #131320 100%);
    border: 1px solid rgba(232, 168, 38, 0.25);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.modal-scoreboard-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-scoreboard-header .live-indicator {
    width: 8px;
    height: 8px;
    background: #ff4444;
    border-radius: 50%;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

.modal-header-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: #ff4444;
    letter-spacing: 0.5px;
}

.modal-score-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px 16px;
}

.modal-score-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
}

.modal-score-team .team-abbr {
    font-size: 0.85rem;
    font-weight: 700;
    color: #888;
}

.modal-score-team.winning .team-abbr {
    color: #ff6600;
}

.modal-score-numbers {
    display: flex;
    align-items: center;
    gap: 16px;
}

.modal-score-numbers .score-num {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    min-width: 50px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.modal-score-numbers .score-num.winning {
    color: #ff6600;
}

.modal-score-numbers .score-separator {
    font-size: 1.8rem;
    font-weight: 300;
    color: #555;
}

/* Wide Modal for Rich Data */
.modal-content-wide {
    max-width: 900px;
}

/* Price Summary Cards */
.modal-price-summary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding: 0 20px;
}

.price-card {
    background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 24px;
    min-width: 180px;
    text-align: center;
    transition: all 0.2s ease;
}

.price-card.team-primary {
    --team-color: #4a9eff;
}

.price-card.team-secondary {
    --team-color: #e94560;
}

.price-card.leading {
    border-color: var(--team-color, #ff6600);
    box-shadow: 0 0 20px rgba(232, 168, 38, 0.12);
}

.price-card-team {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--team-color, #888);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.price-card-price {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin-bottom: 8px;
}

.price-card.leading .price-card-price {
    color: var(--team-color, #ff6600);
}

.price-card-spread {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 0.7rem;
    color: #666;
}

.price-card-spread .bid,
.price-card-spread .ask {
    padding: 2px 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}

.price-vs {
    font-size: 1rem;
    font-weight: 600;
    color: #555;
}

/* Chart Section - Kalshi Style */
.modal-chart-section {
    margin-bottom: 24px;
    position: relative;
}

.modal-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.chart-title {
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Time Range Selectors */
.chart-time-range {
    display: flex;
    gap: 4px;
}

.time-range-btn {
    background: transparent;
    border: 1px solid #333;
    color: #666;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.time-range-btn:hover {
    border-color: #555;
    color: #aaa;
}

.time-range-btn.active {
    background: rgba(232, 168, 38, 0.16);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Chart container with overlay legend */
.modal-chart-wrapper {
    position: relative;
}

.chart-legend {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.legend-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.legend-color {
    display: none;  /* Hide color swatch, use text color instead */
}

.legend-name {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.legend-price {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}

.legend-name.team-primary,
.legend-price.team-primary {
    color: #4a9eff;
}

.legend-name.team-secondary,
.legend-price.team-secondary {
    color: #e94560;
}

/* Volume display below chart */
.chart-volume {
    font-size: 0.75rem;
    color: #666;
    margin-top: 8px;
}

/* Stats Grid */
.modal-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.stat-card {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
}

.stat-card .stat-label {
    font-size: 0.65rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.stat-card .stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #e0e0e0;
    font-family: 'Monaco', 'Menlo', monospace;
}

.stat-card .stat-value.status-live {
    color: #ff4444;
}

/* Info Section */
.modal-info-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.modal-position-card,
.modal-trades-card {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
}

.modal-position-card h4,
.modal-trades-card h4 {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

.no-position-msg {
    color: #555;
    font-size: 0.8rem;
    text-align: center;
    padding: 20px;
}

/* Legacy modal styles - keeping for backward compat */
.modal-game-info {
    display: none;
    letter-spacing: 0.5px;
}

.game-info-item .info-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}

.modal-chart-container {
    height: 300px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
}

.no-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.modal-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.modal-position {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.no-position {
    color: #666;
    font-size: 0.85rem;
}

.modal-stats {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.8rem;
    color: #888;
}

.stat-row span:last-child {
    color: #e0e0e0;
    font-family: 'Monaco', 'Menlo', monospace;
}

.modal-trades h4 {
    margin: 0 0 12px 0;
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.no-trades {
    color: #555;
    font-size: 0.8rem;
    padding: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.trade-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.8rem;
}

.trade-row.buy {
    border-left: 3px solid #00ff88;
}

.trade-row.sell {
    border-left: 3px solid #ff4444;
}

.trade-action {
    font-weight: bold;
    min-width: 40px;
}

.trade-row.buy .trade-action {
    color: #00ff88;
}

.trade-row.sell .trade-action {
    color: #ff4444;
}

.trade-qty {
    color: #e0e0e0;
}

.trade-price {
    color: #888;
    font-family: 'Monaco', 'Menlo', monospace;
}

.trade-time {
    margin-left: auto;
    color: #555;
    font-size: 0.7rem;
}

/* Price Alerts Section */
.price-alerts-section {
    margin-top: 20px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-title {
    font-size: 0.75rem;
    color: var(--accent-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.add-alert-btn {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--accent-primary);
    border-radius: 4px;
    color: var(--accent-primary);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-alert-btn:hover {
    background: var(--accent-primary);
    color: #000;
}

.alerts-list {
    margin-bottom: 10px;
}

.no-alerts-msg {
    color: #555;
    font-size: 0.75rem;
    text-align: center;
    padding: 12px;
}

.alert-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(232, 168, 38, 0.08);
    border: 1px solid rgba(232, 168, 38, 0.16);
    border-radius: 4px;
    margin-bottom: 6px;
}

.alert-item.triggered {
    background: rgba(0, 214, 104, 0.1);
    border-color: rgba(0, 214, 104, 0.3);
}

.alert-condition {
    font-size: 0.68rem;
    color: #888;
    text-transform: uppercase;
}

.alert-price {
    font-weight: 700;
    color: #fff;
}

.alert-delete {
    margin-left: auto;
    padding: 2px 6px;
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 0.8rem;
}

.alert-delete:hover {
    color: #ff5252;
}

.alert-form {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.alert-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-select, .alert-input {
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #fff;
    font-size: 0.72rem;
}

.alert-select:focus, .alert-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.alert-input {
    width: 80px;
    text-align: center;
}

.alert-save-btn {
    padding: 6px 14px;
    background: var(--accent-primary);
    border: none;
    border-radius: 4px;
    color: #000;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}

.alert-save-btn:hover {
    background: var(--accent-light);
}

/* Market Depth Section */
.market-depth-section {
    margin-top: 20px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.depth-preview {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.depth-side {
    flex: 1;
}

.depth-header {
    font-size: 0.68rem;
    color: #666;
    text-align: center;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.depth-side.bids .depth-header {
    color: #00d668;
}

.depth-side.asks .depth-header {
    color: #ff5252;
}

.depth-levels {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.depth-level {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    padding: 4px 8px;
    font-size: 0.7rem;
}

.depth-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    opacity: 0.3;
    border-radius: 2px;
}

.depth-bar.bid {
    background: linear-gradient(90deg, #00d668, transparent);
}

.depth-bar.ask {
    background: linear-gradient(90deg, transparent, #ff5252);
    right: 0;
    left: auto;
}

.depth-price {
    position: relative;
    z-index: 1;
    font-weight: 600;
    color: #fff;
}

.depth-size {
    position: relative;
    z-index: 1;
    margin-left: auto;
    color: #888;
}

.depth-spread {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--accent-primary);
    font-weight: 600;
    padding: 0 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Volume Profile Section */
.volume-profile-section {
    margin-top: 20px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.volume-profile-chart {
    margin-bottom: 12px;
}

.volume-bars {
    display: flex;
    align-items: flex-end;
    height: 60px;
    gap: 2px;
    padding: 0 4px;
}

.vol-bar {
    flex: 1;
    background: linear-gradient(to top, rgba(255, 102, 0, 0.8), rgba(232, 168, 38, 0.25));
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height 0.3s ease;
}

.vol-bar:hover {
    background: var(--accent-primary);
}

.volume-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: #555;
    margin-top: 4px;
}

.volume-stats {
    display: flex;
    gap: 16px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vol-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vol-label {
    font-size: 0.68rem;
    color: #666;
}

.vol-value {
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
}

/* Market Notes Section */
.market-notes-section {
    margin-top: 20px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.notes-saved-indicator {
    font-size: 0.68rem;
    color: #00d668;
    font-weight: 600;
}

.market-notes-input {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 0.75rem;
    font-family: inherit;
    resize: vertical;
}

.market-notes-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.market-notes-input::placeholder {
    color: #555;
}

.card-oi {
    color: #555;
}

/* Sort Dropdown */
.sort-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
}

.sort-dropdown label {
    font-size: 0.75rem;
    color: #666;
}

.sort-dropdown select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
}

.sort-dropdown select:hover {
    border-color: var(--accent-primary);
}

/* Empty state */
.no-markets {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: #555;
}

.no-markets-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .market-cards-container {
        grid-template-columns: 1fr;
        padding: 8px;
        gap: 12px;
    }

    .market-card {
        padding: 12px;
    }

    .outcome-btn {
        padding: 10px 6px;
        min-height: 50px;
    }

    .outcome-price {
        font-size: 1.2rem;
    }
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 1px 4px;
    font-size: 0.6rem;
    font-weight: bold;
    border-radius: 1px;
    text-transform: uppercase;
}

.status-open {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.status-closed {
    background: var(--text-muted);
    color: var(--bg-primary);
}

/* Expandable Chart Row */
.market-row {
    cursor: pointer;
}

.market-row.expanded {
    background: rgba(232, 168, 38, 0.12) !important;
    border-left: 3px solid var(--accent-primary);
}

.expand-icon {
    color: var(--accent-primary);
    font-family: monospace;
    font-size: 0.65rem;
    margin-right: 4px;
    opacity: 0.7;
}

.market-row:hover .expand-icon {
    opacity: 1;
}

.chart-row {
    background: var(--bg-tertiary) !important;
}

.chart-row:hover {
    background: var(--bg-tertiary) !important;
}

.chart-row td {
    padding: 0 !important;
    border-top: 1px solid var(--accent-primary);
    border-bottom: 1px solid var(--accent-primary);
}

.chart-container-inline {
    padding: 1rem;
    background: var(--bg-primary);
    position: relative;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.chart-title {
    color: var(--accent-primary);
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.chart-period-selector {
    display: flex;
    gap: 4px;
}

.period-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 2px 8px;
    font-size: 0.65rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.period-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

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

.chart-wrapper {
    height: 200px;
    position: relative;
}

.chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-muted);
    font-size: 0.72rem;
    display: none;
}

/* Position indicator */
.position-indicator {
    color: var(--accent-primary);
    font-weight: bold;
    margin-right: 2px;
}

/* Markets Toolbar */
.markets-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.72rem;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.category-display {
    color: var(--accent-primary);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.market-count {
    color: var(--text-muted);
}

.positions-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
}

.positions-toggle input[type="checkbox"] {
    accent-color: var(--accent-primary);
}

/* Strategy Cards */
.strategy-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 1px;
    padding: 0.5rem;
    margin-bottom: 0.35rem;
}

.strategy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.strategy-name {
    font-weight: bold;
    font-size: 0.72rem;
}

.strategy-toggle {
    width: 36px;
    height: 18px;
    border-radius: 9px;
    background: var(--border-color);
    border: none;
    cursor: pointer;
    position: relative;
    transition: background 0.3s;
}

.strategy-toggle::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-secondary);
    top: 2px;
    left: 2px;
    transition: transform 0.3s, background 0.3s;
}

.strategy-toggle.active {
    background: var(--accent-primary);
}

.strategy-toggle.active::after {
    background: white;
    transform: translateX(18px);
}

.strategy-pnl {
    font-size: 0.8rem;
    font-weight: bold;
}

.strategy-controls {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border-color);
}

.control-slider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.2rem 0;
    font-size: 0.68rem;
}

.control-slider label {
    width: 80px;
    color: var(--text-secondary);
}

.control-slider input[type="range"] {
    flex: 1;
    height: 4px;
    background: var(--border-color);
    border-radius: 1px;
    -webkit-appearance: none;
}

.control-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
}

.control-slider .value {
    width: 40px;
    text-align: right;
    color: var(--text-primary);
}

/* Agent Card Header */
.agent-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.agent-header-center {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.agent-header-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.agent-status-badge {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
}

.agent-card-header .manage-link {
    margin-left: auto;
}
.agent-status-badge.running {
    color: var(--positive);
    border: 1px solid rgba(52,211,153,0.3);
    background: rgba(52,211,153,0.08);
    text-shadow: 0 0 8px rgba(52,211,153,0.4);
}
.agent-status-badge.paused {
    color: var(--accent);
    border: 1px solid rgba(217,170,75,0.3);
    background: rgba(217,170,75,0.08);
    text-shadow: 0 0 8px rgba(217,170,75,0.4);
}
.agent-status-badge.halted {
    color: var(--negative);
    border: 1px solid rgba(248,113,113,0.3);
    background: rgba(248,113,113,0.08);
}

.agent-ctrl-btn {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.agent-ctrl-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.15);
}
.agent-ctrl-btn.danger {
    color: var(--negative);
    border-color: rgba(248,113,113,0.2);
}
.agent-ctrl-btn.danger:hover {
    background: rgba(248,113,113,0.12);
    border-color: rgba(248,113,113,0.4);
}
.agent-ctrl-btn.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.agent-ctrl-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    position: relative;
}
/* Pause: two vertical bars */
.agent-ctrl-icon.pause::before,
.agent-ctrl-icon.pause::after {
    content: '';
    width: 3px;
    height: 8px;
    background: var(--text-secondary);
    border-radius: 1px;
    position: absolute;
}
.agent-ctrl-icon.pause::before { left: 5px; }
.agent-ctrl-icon.pause::after { right: 5px; }
.agent-ctrl-icon.pause:hover::before,
.agent-ctrl-icon.pause:hover::after { background: var(--text-primary); }
/* Play: triangle */
.agent-ctrl-icon.play::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent var(--text-secondary);
    position: absolute;
    left: 8px;
}
.agent-ctrl-icon.play:hover::before {
    border-color: transparent transparent transparent var(--text-primary);
}
/* Stop: square */
.agent-ctrl-icon.stop::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--negative);
    border-radius: 1px;
    position: absolute;
}
.agent-ctrl-icon.stop:hover::before { background: #ff6b6b; }
.agent-ctrl-icon:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.2);
}
.agent-ctrl-icon.danger {
    color: var(--negative);
    border-color: rgba(248,113,113,0.2);
}
.agent-ctrl-icon.danger:hover {
    background: rgba(248,113,113,0.15);
    border-color: rgba(248,113,113,0.4);
}
.agent-ctrl-icon.disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Agent Tiles (Dashboard Summary) */
/* =============================================
   AGENT TILES - Premium Design
   ============================================= */
.agent-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* Agent empty state */
.agent-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    grid-column: 1 / -1;
}
.agent-empty-state--compact {
    padding: 24px 16px;
}
.agent-empty-icon {
    color: rgba(255,255,255,0.15);
    margin-bottom: 12px;
}
.agent-empty-title {
    color: rgba(255,255,255,0.5);
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 4px;
}
.agent-empty-desc {
    color: rgba(255,255,255,0.25);
    font-size: 13px;
    margin: 0 0 16px;
}
.agent-empty-state--compact .agent-empty-desc {
    margin-bottom: 0;
}
.agent-empty-cta {
    background: rgba(232,168,38,0.12);
    color: var(--accent, #e8a826);
    border: 1px solid rgba(232,168,38,0.25);
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.agent-empty-cta:hover {
    background: rgba(232,168,38,0.2);
    border-color: rgba(232,168,38,0.4);
}

.agent-tile {
    background: linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 50%, rgba(255,255,255,0.005) 100%);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 12px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Top accent line - full width glow */
.agent-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 5%, var(--agent-color, var(--accent-primary)) 30%, var(--agent-color, var(--accent-primary)) 70%, transparent 95%);
    opacity: 0.6;
    transition: opacity 0.3s;
}

/* Ambient color wash from top */
.agent-tile::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    height: 60px;
    background: radial-gradient(ellipse at 50% 0%, var(--agent-color, var(--accent-primary)), transparent 70%);
    opacity: 0.07;
    pointer-events: none;
    transition: opacity 0.3s;
}

.agent-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.1), 0 0 20px color-mix(in srgb, var(--agent-color, var(--accent-primary)) 8%, transparent);
    border-color: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 22%, rgba(255,255,255,0.08));
}

.agent-tile:hover::before {
    opacity: 1;
}

.agent-tile:hover::after {
    opacity: 0.14;
}

/* --- Enabled / Disabled states --- */
.agent-tile.disabled {
    opacity: 0.35;
    filter: saturate(0.3);
}

.agent-tile.disabled:hover {
    opacity: 0.5;
}

/* --- Row: Identity (icon + name + toggle) --- */
.agent-tile-row-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* Status pulse dot */
.agent-tile-status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    position: relative;
}

.agent-tile.enabled .agent-tile-status {
    background: var(--positive);
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
    animation: statusPulse 2.5s ease-in-out infinite;
}

.agent-tile.disabled .agent-tile-status {
    background: rgba(255,255,255,0.15);
    box-shadow: none;
    animation: none;
}

@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(52, 211, 153, 0.3); }
    50% { box-shadow: 0 0 10px rgba(52, 211, 153, 0.6); }
}

/* Icon badge - uses agent color */
.agent-tile-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--agent-color, var(--accent-primary)) 22%, transparent), color-mix(in srgb, var(--agent-color, var(--accent-primary)) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent-primary)) 25%, transparent);
    border-radius: 7px;
    font-weight: 700;
    color: var(--agent-color, var(--accent-primary));
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    text-shadow: 0 0 12px color-mix(in srgb, var(--agent-color, var(--accent-primary)) 40%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--agent-color, var(--accent-primary)) 12%, transparent);
}

/* Agent name */
.agent-tile-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-display);
    flex: 1;
    min-width: 0;
    letter-spacing: -0.01em;
}

/* --- Premium Toggle Switch --- */
.agent-tile-toggle {
    width: 28px;
    height: 16px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    position: relative;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.agent-tile-toggle::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    top: 2px;
    left: 2px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.agent-tile-toggle:hover {
    border-color: rgba(255,255,255,0.15);
}

.agent-tile-toggle.active {
    background: linear-gradient(135deg, var(--positive), color-mix(in srgb, var(--positive) 70%, #0a0a0f));
    border-color: rgba(52, 211, 153, 0.3);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 0 8px rgba(52, 211, 153, 0.15);
}

.agent-tile-toggle.active::after {
    background: #fff;
    transform: translateX(12px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0 4px rgba(52, 211, 153, 0.3);
}

/* --- Row: Sparkline + PnL --- */
.agent-tile-row-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    position: relative;
    z-index: 1;
    min-height: 24px;
}

.agent-tile-sparkline {
    flex: 1;
    min-width: 0;
}

.agent-tile-sparkline canvas {
    width: 100% !important;
    height: 24px !important;
    display: block;
}

.sparkline-tf-pills {
    display: flex;
    gap: 2px;
    margin-top: 1px;
}

.tf-pill {
    font-family: var(--font-mono);
    font-size: 8px;
    padding: 1px 4px;
    border: none;
    border-radius: 3px;
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1.2;
    letter-spacing: 0.02em;
    transition: all 0.15s ease;
}

.tf-pill:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
}

.tf-pill.active {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
    font-weight: 600;
}

/* PnL value */
.agent-tile-pnl {
    font-size: 0.85rem;
    font-weight: 700;
    font-family: var(--font-mono);
    flex-shrink: 0;
    text-align: right;
    line-height: 1;
    letter-spacing: -0.03em;
}

.agent-tile-pnl.positive {
    text-shadow: 0 0 16px rgba(52, 211, 153, 0.3);
}

.agent-tile-pnl.negative {
    text-shadow: 0 0 16px rgba(248, 113, 113, 0.25);
}

/* --- Row: Stats --- */
.agent-tile-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    font-size: 0.55rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    position: relative;
    z-index: 1;
    padding-top: 6px;
    margin-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.agent-tile-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
}

.agent-tile-stat .stat-label {
    color: rgba(255,255,255,0.3);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.agent-tile-stat .stat-val {
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: -0.02em;
}

/* Stat value coloring when meaningful */
.agent-tile-stat .stat-val.good {
    color: var(--positive);
}
.agent-tile-stat .stat-val.bad {
    color: var(--negative);
}

.manage-link {
    font-size: var(--text-xs);
    color: var(--accent-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.15s;
}

.manage-link:hover {
    color: var(--accent-light);
    background: none;
}

/* ============================================
   AGENT CONTROLS TAB
   ============================================ */

#agent-controls-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 420px;
    overflow-y: auto;
    padding: 2px 0;
}

.agent-ctrl-row {
    display: grid;
    grid-template-columns: 10px 1fr 40px 100px 36px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.agent-ctrl-row:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(232,168,38,0.15);
    box-shadow: 0 0 20px rgba(232,168,38,0.03);
}

.agent-ctrl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 8px var(--dot-color, currentColor);
    animation: dotPulse 3s ease-in-out infinite;
}

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

.agent-ctrl-name {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

.agent-ctrl-alloc {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-primary);
    text-align: right;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Slider track + thumb */
.agent-alloc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    background: transparent;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    margin: 0;
    position: relative;
}

.agent-alloc-slider::-webkit-slider-runnable-track {
    height: 3px;
    background: linear-gradient(90deg, rgba(232,168,38,0.3) 0%, rgba(255,255,255,0.06) 100%);
    border-radius: 2px;
}

.agent-alloc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 8px rgba(232,168,38,0.5), 0 1px 3px rgba(0,0,0,0.4);
    margin-top: -5.5px;
    transition: box-shadow 0.2s;
}

.agent-alloc-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 14px rgba(232,168,38,0.7), 0 1px 3px rgba(0,0,0,0.4);
}

.agent-alloc-slider::-moz-range-track {
    height: 3px;
    background: linear-gradient(90deg, rgba(232,168,38,0.3) 0%, rgba(255,255,255,0.06) 100%);
    border-radius: 2px;
    border: none;
}

.agent-alloc-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 8px rgba(232,168,38,0.5), 0 1px 3px rgba(0,0,0,0.4);
}

/* Toggle switch */
.agent-ctrl-switch {
    position: relative;
    width: 34px;
    height: 18px;
    background: rgba(255,255,255,0.06);
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    flex-shrink: 0;
}

.agent-ctrl-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.agent-ctrl-switch.on {
    background: rgba(52,211,153,0.2);
    border-color: rgba(52,211,153,0.35);
}

.agent-ctrl-switch.on::after {
    left: 18px;
    background: var(--positive);
    box-shadow: 0 0 8px rgba(52,211,153,0.5);
}

.agent-ctrl-switch:hover {
    border-color: rgba(255,255,255,0.15);
}

/* ============================================
   AGENT ACTIVITY TAB
   ============================================ */

/* Activity sub-tab toggle (segmented control) */
.agent-activity-toggle {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin: 0 auto 16px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    width: fit-content;
}

.agent-activity-view-btn {
    padding: 5px 20px;
    font-size: var(--text-xs);
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.agent-activity-view-btn:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.agent-activity-view-btn.active {
    color: var(--text-primary);
    background: rgba(232, 168, 38, 0.1);
    box-shadow:
        0 0 0 1px rgba(232, 168, 38, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- Agent Performance Leaderboard --- */
.agent-perf-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agent-perf-row {
    display: grid;
    grid-template-columns: 8px 1fr 44px 72px 76px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.agent-perf-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.agent-perf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.agent-perf-name {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-perf-signals {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
}

.agent-perf-winrate {
    display: flex;
    align-items: center;
    gap: 6px;
}

.agent-perf-winrate-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.agent-perf-winrate-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.agent-perf-winrate-val {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    min-width: 28px;
    text-align: right;
}

.agent-perf-pnl {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    text-align: right;
    letter-spacing: -0.01em;
}

.agent-perf-pnl.positive { color: var(--positive); }
.agent-perf-pnl.negative { color: var(--negative); }
.agent-perf-winrate-val.positive { color: var(--positive); }
.agent-perf-winrate-val.negative { color: var(--negative); }
.agent-perf-winrate-val.neutral { color: var(--text-muted); }

.agent-perf-header {
    display: grid;
    grid-template-columns: 8px 1fr 44px 72px 76px;
    gap: 10px;
    padding: 0 14px 6px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.agent-perf-header span:nth-child(3) { text-align: center; }
.agent-perf-header span:nth-child(5) { text-align: right; }

/* --- Agent Activity Feed --- */
.agent-feed-list {
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agent-feed-list::-webkit-scrollbar { width: 4px; }
.agent-feed-list::-webkit-scrollbar-track { background: transparent; }
.agent-feed-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.feed-entry {
    display: grid;
    grid-template-columns: 44px minmax(80px, 110px) auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: var(--text-xs);
    border-radius: 6px;
    transition: background 0.15s;
    border-left: 2px solid transparent;
}

.feed-entry:hover {
    background: rgba(255, 255, 255, 0.03);
}

.feed-entry[data-type="trade"] { border-left-color: var(--positive); }
.feed-entry[data-type="signal"] { border-left-color: #60a5fa; }
.feed-entry[data-type="error"] { border-left-color: var(--negative); }
.feed-entry[data-type="rebalance"] { border-left-color: var(--accent-primary); }

.feed-time {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    flex-shrink: 0;
}

.feed-agent {
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-action {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    text-transform: uppercase;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    font-weight: 600;
    width: fit-content;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-action[data-type="trade"] { background: rgba(52, 211, 153, 0.1); color: var(--positive); }
.feed-action[data-type="signal"] { background: rgba(96, 165, 250, 0.1); color: #60a5fa; }
.feed-action[data-type="error"] { background: rgba(239, 68, 68, 0.1); color: var(--negative); }
.feed-action[data-type="rebalance"] { background: rgba(251, 191, 36, 0.1); color: var(--accent-primary); }

.feed-ticker {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    flex-shrink: 0;
    font-weight: 500;
}

.feed-summary {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.feed-pnl {
    font-family: var(--font-mono);
    font-weight: 600;
    flex-shrink: 0;
    font-size: var(--text-xs);
}

.feed-pnl.positive { color: var(--positive); }
.feed-pnl.negative { color: var(--negative); }

.feed-pnl.positive { color: var(--positive); }
.feed-pnl.negative { color: var(--negative); }

/* ============================================
   AGENT DETAIL MODAL
   ============================================ */

.agent-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.agent-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Backdrop with blur */
.agent-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 3, 12, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Modal panel */
.agent-modal {
    position: relative;
    width: 100%;
    max-width: 680px;
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(175deg, rgba(18, 18, 36, 0.98) 0%, rgba(10, 10, 22, 0.99) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    box-shadow:
        0 48px 96px rgba(0,0,0,0.6),
        0 24px 48px rgba(0,0,0,0.4),
        0 0 1px rgba(255,255,255,0.1),
        inset 0 1px 0 rgba(255,255,255,0.05);
    transform: translateY(40px) scale(0.92);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.agent-modal-overlay.open .agent-modal {
    transform: translateY(0) scale(1);
}

/* Scrollbar styling */
.agent-modal::-webkit-scrollbar {
    width: 6px;
}
.agent-modal::-webkit-scrollbar-track {
    background: transparent;
}
.agent-modal::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}
.agent-modal::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}

/* --- Modal Header --- */
.agent-modal-header {
    position: relative;
    padding: 28px 28px 20px;
    overflow: hidden;
}

/* Ambient glow behind header */
.agent-modal-header::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -20%;
    right: -20%;
    height: 160px;
    background: radial-gradient(ellipse at 50% 0%, var(--modal-agent-color, var(--accent-primary)), transparent 65%);
    opacity: 0.08;
    pointer-events: none;
}

/* Top accent line */
.agent-modal-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--modal-agent-color, var(--accent-primary)) 25%, var(--modal-agent-color, var(--accent-primary)) 75%, transparent);
    opacity: 0.6;
    border-radius: 1px;
}

.agent-modal-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

.agent-modal-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--modal-agent-color, var(--accent-primary)) 22%, transparent), color-mix(in srgb, var(--modal-agent-color, var(--accent-primary)) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--modal-agent-color, var(--accent-primary)) 25%, transparent);
    border-radius: 12px;
    font-weight: 700;
    color: var(--modal-agent-color, var(--accent-primary));
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-shadow: 0 0 16px color-mix(in srgb, var(--modal-agent-color, var(--accent-primary)) 40%, transparent);
    flex-shrink: 0;
}

.agent-modal-title-group {
    flex: 1;
    min-width: 0;
}

.agent-modal-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.agent-modal-desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.4;
}

.agent-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.1rem;
    transition: all 0.2s;
}

.agent-modal-close:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.12);
}

/* --- Tags row --- */
.agent-modal-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
    position: relative;
}

.agent-modal-tag {
    font-size: 0.6rem;
    font-family: var(--font-mono);
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text-secondary);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
}

.agent-modal-tag.type-tag {
    color: var(--modal-agent-color, var(--accent-primary));
    border-color: color-mix(in srgb, var(--modal-agent-color, var(--accent-primary)) 20%, transparent);
    background: color-mix(in srgb, var(--modal-agent-color, var(--accent-primary)) 6%, transparent);
}

/* --- Modal Body --- */
.agent-modal-body {
    padding: 0 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- PnL Hero Section --- */
.agent-modal-pnl-hero {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.agent-modal-pnl-value {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.agent-modal-pnl-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-body);
}

.agent-modal-pnl-return {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(52, 211, 153, 0.1);
}

.agent-modal-pnl-return.positive {
    color: var(--positive);
    background: rgba(52, 211, 153, 0.08);
}

.agent-modal-pnl-return.negative {
    color: var(--negative);
    background: rgba(248, 113, 113, 0.08);
}

/* --- Equity Chart in Modal --- */
.agent-modal-chart {
    width: 100%;
    height: 140px;
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
}

.agent-modal-chart canvas {
    width: 100% !important;
    height: 140px !important;
    display: block;
}

/* --- Metrics Grid --- */
.agent-modal-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
}

.agent-modal-metric {
    padding: 14px 16px;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agent-modal-metric:first-child {
    border-radius: 12px 0 0 0;
}
.agent-modal-metric:nth-child(3) {
    border-radius: 0 12px 0 0;
}
.agent-modal-metric:nth-last-child(3) {
    border-radius: 0 0 0 12px;
}
.agent-modal-metric:last-child {
    border-radius: 0 0 12px 0;
}

.agent-modal-metric-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.agent-modal-metric-value {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.agent-modal-metric-value.positive { color: var(--positive); }
.agent-modal-metric-value.negative { color: var(--negative); }
.agent-modal-metric-value.warn { color: var(--accent-primary); }

/* --- Config Section --- */
.agent-modal-config {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.agent-modal-config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
}

.agent-modal-config-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-body);
}

.agent-modal-config-val {
    font-size: 0.78rem;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 600;
}

/* --- Recent Trades Table --- */
.agent-modal-section-title {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.agent-modal-section-title .count {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    padding: 2px 6px;
    border-radius: 4px;
}

.agent-modal-trades {
    width: 100%;
    font-size: 0.72rem;
    border-collapse: separate;
    border-spacing: 0;
}

.agent-modal-trades th {
    text-align: left;
    padding: 8px 10px;
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.agent-modal-trades td {
    padding: 7px 10px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.agent-modal-trades tr:last-child td {
    border-bottom: none;
}

.agent-modal-trades tr:hover td {
    background: rgba(255,255,255,0.02);
}

/* --- Activity Log --- */
.agent-modal-activity {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
}

.agent-modal-activity-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.7rem;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.015);
}

.agent-modal-activity-time {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    flex-shrink: 0;
    min-width: 50px;
}

.agent-modal-activity-msg {
    color: var(--text-secondary);
    font-family: var(--font-body);
    line-height: 1.4;
}

/* --- Modal Footer Actions --- */
.agent-modal-actions {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.agent-modal-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.agent-modal-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.12);
}

.agent-modal-btn.primary {
    background: color-mix(in srgb, var(--modal-agent-color, var(--accent-primary)) 15%, transparent);
    border-color: color-mix(in srgb, var(--modal-agent-color, var(--accent-primary)) 25%, transparent);
    color: var(--modal-agent-color, var(--accent-primary));
}

.agent-modal-btn.primary:hover {
    background: color-mix(in srgb, var(--modal-agent-color, var(--accent-primary)) 22%, transparent);
}

.agent-modal-btn.danger {
    color: var(--negative);
    border-color: rgba(248, 113, 113, 0.15);
}

.agent-modal-btn.danger:hover {
    background: rgba(248, 113, 113, 0.1);
}

/* No-data placeholder in modal */
.agent-modal-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-style: italic;
}

/* Compact chart container */
.chart-container.compact {
    height: 180px;
}

.chart-container.compact canvas {
    max-height: 180px;
}

/* Compact positions */
/* =============================================
   POSITIONS - Premium Cards
   ============================================= */
/* Position section labels */
.pos-section-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pos-count {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--accent-primary);
    background: rgba(232,168,38,0.08);
    padding: 1px 4px;
    border-radius: 3px;
    border: 1px solid rgba(232,168,38,0.15);
}

.pos-empty {
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
    padding: 24px 0;
}

/* Positions grid - 4 columns */
.pos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
}
@media (max-width: 800px) {
    .pos-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Position card - live-game-tile meets agent-tile hybrid */
.pos-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pos-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sport-color, var(--accent-primary)) 30%, var(--sport-color, var(--accent-primary)) 70%, transparent);
    opacity: 0.5;
}
.pos-card:hover {
    border-color: var(--sport-color, var(--accent-primary));
    box-shadow: 0 0 10px color-mix(in srgb, var(--sport-color, var(--accent-primary)) 15%, transparent);
}

/* Header row: sport left, side centered, PnL right - CSS grid for true centering */
.pos-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.68rem;
}
.pos-sport {
    color: var(--sport-color, var(--accent-primary));
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.65rem;
    justify-self: start;
}
.pos-side {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 3px;
    justify-self: center;
}
.pos-side.long {
    color: var(--positive);
    background: rgba(52,211,153,0.1);
    border: 1px solid rgba(52,211,153,0.18);
}
.pos-side.short {
    color: var(--negative);
    background: rgba(248,113,113,0.1);
    border: 1px solid rgba(248,113,113,0.18);
}
.pos-side.closed-badge {
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.45rem;
}
.pos-pnl {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    justify-self: end;
}
.pos-pnl.positive { color: var(--positive); text-shadow: 0 0 10px rgba(52,211,153,0.25); }
.pos-pnl.negative { color: var(--negative); text-shadow: 0 0 10px rgba(248,113,113,0.25); }

/* Center matchup - big team names like live game tiles */
.pos-matchup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}
.pos-team {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}
.pos-at {
    color: var(--text-muted);
    font-size: 0.65rem;
}

/* Sparkline - shared by open and closed positions */
.pos-sparkline {
    width: 100%;
    height: 28px;
    display: block;
    margin-bottom: 6px;
}

/* Bottom metrics row with separator */
.pos-metrics {
    display: flex;
    justify-content: space-between;
    padding-top: 7px;
    border-top: 1px solid var(--border-color);
}
.pos-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pm-label {
    font-size: 0.52rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-family: var(--font-body);
    letter-spacing: 0.04em;
}
.pm-value {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
}
.pm-value.positive { color: var(--positive); }
.pm-value.negative { color: var(--negative); }

/* Closed positions section */
.closed-section {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

/* Closed card variant */
.closed-card {
    cursor: default;
    opacity: 0.75;
}
.closed-card:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   MARKET SCANNER - Live heatmap of all monitored markets
   ═══════════════════════════════════════════════════════════ */
/* ── Market Scanner ── */
.market-scanner {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.scanner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.scanner-title {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.scanner-header-stats {
    display: flex;
    gap: 6px;
    align-items: center;
}
.scanner-count {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.06);
}
.scanner-active-count {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--positive);
    background: rgba(0,255,136,0.08);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid rgba(0,255,136,0.15);
}

/* Agent legend bar */
.scanner-legend {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}
.scanner-legend-item {
    font-family: var(--font-mono);
    font-size: 0.42rem;
    font-weight: 700;
    color: var(--agent-color);
    background: color-mix(in srgb, var(--agent-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--agent-color) 15%, transparent);
    padding: 1px 4px;
    border-radius: 2px;
    letter-spacing: 0.04em;
}

/* Scanner grid - 3 columns for richer tiles */
.scanner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
}
@media (max-width: 900px) {
    .scanner-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Scanner tile */
.scanner-tile {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 6px 7px 5px;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}
.scanner-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--sport-color, transparent);
    opacity: 0.3;
}
.scanner-tile:hover {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    transform: translateY(-1px);
}

/* Tile with active position */
.scanner-tile.has-position {
    background: rgba(0,255,136,0.04);
    border-color: rgba(0,255,136,0.12);
    box-shadow: 0 0 12px rgba(0,255,136,0.05);
}
.scanner-tile.has-position::before { opacity: 0.7; }

/* Tile with agent activity (no position) */
.scanner-tile.has-activity {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.07);
}

/* Row 1: sport + teams + price */
.scanner-tile-top {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.scanner-sport {
    font-family: var(--font-mono);
    font-size: 0.45rem;
    font-weight: 700;
    color: var(--sport-color, var(--text-muted));
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.scanner-teams {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scanner-vs {
    color: var(--text-muted);
    font-size: 0.45rem;
    margin: 0 1px;
}
.scanner-price {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-left: auto;
    flex-shrink: 0;
}

/* Row 2: Agent interaction dots */
.scanner-agents {
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
}
.scanner-agent-dot {
    font-family: var(--font-mono);
    font-size: 0.38rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 1px 3px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    gap: 1px;
    transition: all 0.2s ease;
    position: relative;
}
.agent-icon {
    font-size: 0.35rem;
    line-height: 1;
}

/* Agent status colors */
.scanner-agent-dot.agent-off {
    color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.02);
}
.scanner-agent-dot.agent-watching,
.scanner-agent-dot.agent-idle {
    color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.03);
}
.scanner-agent-dot.agent-tracking {
    color: var(--agent-color);
    opacity: 0.5;
    background: color-mix(in srgb, var(--agent-color) 6%, transparent);
}
.scanner-agent-dot.agent-long {
    color: var(--positive);
    background: rgba(0,255,136,0.12);
    border: 1px solid rgba(0,255,136,0.25);
    box-shadow: 0 0 4px rgba(0,255,136,0.15);
}
.scanner-agent-dot.agent-short {
    color: var(--negative);
    background: rgba(248,113,113,0.12);
    border: 1px solid rgba(248,113,113,0.25);
    box-shadow: 0 0 4px rgba(248,113,113,0.15);
}
.scanner-agent-dot.agent-quoting {
    color: var(--agent-color);
    background: color-mix(in srgb, var(--agent-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--agent-color) 25%, transparent);
    animation: pulse-glow 2s ease-in-out infinite;
}
.scanner-agent-dot.agent-stretched {
    color: #fbbf24;
    background: rgba(251,191,36,0.12);
    border: 1px solid rgba(251,191,36,0.25);
    animation: pulse-glow 1.5s ease-in-out infinite;
}
.scanner-agent-dot.agent-signal {
    color: #c084fc;
    background: rgba(192,132,252,0.12);
    border: 1px solid rgba(192,132,252,0.25);
    animation: pulse-glow 1s ease-in-out infinite;
}

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

/* Row 3: Position info */
.scanner-position {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.scanner-pos-side {
    font-family: var(--font-mono);
    font-size: 0.45rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
    letter-spacing: 0.04em;
}
.scanner-pos-side.long {
    color: var(--positive);
    background: rgba(0,255,136,0.1);
}
.scanner-pos-side.short {
    color: var(--negative);
    background: rgba(248,113,113,0.1);
}
.scanner-pos-pnl {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
}
.scanner-pos-pnl.positive {
    color: var(--positive);
    text-shadow: 0 0 6px rgba(0,255,136,0.3);
}
.scanner-pos-pnl.negative {
    color: var(--negative);
    text-shadow: 0 0 6px rgba(248,113,113,0.3);
}

/* Row 3 alt: Metrics (no position) */
.scanner-metrics {
    display: flex;
    gap: 6px;
    align-items: baseline;
}
.scanner-metric {
    font-family: var(--font-mono);
    font-size: 0.45rem;
    color: var(--text-muted);
}
.scanner-metric.positive { color: var(--positive); }
.scanner-metric.negative { color: var(--negative); }
.scanner-metric-label {
    font-size: 0.38rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.5;
    margin-right: 2px;
}

/* Legacy positions-compact (kept for orders table) */
.positions-compact {
    max-height: 200px;
    overflow-y: auto;
}

.positions-compact table {
    font-size: 0.7rem;
}

.positions-compact th,
.positions-compact td {
    padding: 3px 6px;
}

/* Buttons */
button {
    padding: 0.4rem 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 6px;
    font-size: var(--text-sm);
    font-family: var(--font-body);
    transition: all 0.15s;
}

button:hover {
    background: rgba(255,255,255,0.06);
}

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

button.primary:hover {
    background: var(--accent-dark);
}

button.danger {
    background: #442222;
    border-color: #663333;
    color: var(--accent-red);
}

button.danger:hover {
    background: #552222;
}

.controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    align-items: center;
}

.controls button.disabled {
    opacity: 0.4;
    cursor: default;
}

.controls button.active {
    border: 2px solid var(--accent-primary);
}

/* Trading Status Badge */
.status-badge {
    font-size: 0.65rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.running {
    background: rgba(0, 200, 100, 0.2);
    color: #00cc66;
    border: 1px solid #00cc66;
}

.status-badge.paused {
    background: rgba(232, 168, 38, 0.16);
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    animation: pulse-paused 1.5s infinite;
}

.status-badge.halted {
    background: rgba(255, 68, 68, 0.2);
    color: var(--accent-red);
    border: 1px solid var(--accent-red);
}

@keyframes pulse-paused {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* WebSocket Status */
.ws-status {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 0.35rem;
}

.ws-connected { background: var(--accent-primary); }
.ws-disconnected { background: var(--accent-red); }

/* Charts */
.chart-container {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 0.5rem;
    position: relative;
}

#equity-chart {
    width: 100%;
    height: 200px;
}

/* Orderbook */
.orderbook-container {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.orderbook-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-color);
}

.market-selector {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.2rem 0.4rem;
    border-radius: 1px;
    font-size: 0.72rem;
}

.orderbook-ladder {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.orderbook-row {
    display: flex;
    height: 20px;
    align-items: center;
    font-size: 0.68rem;
    position: relative;
}

.orderbook-row.bid {
    flex-direction: row-reverse;
}

.orderbook-bar {
    position: absolute;
    height: 100%;
    opacity: 0.3;
}

.orderbook-row.ask .orderbook-bar {
    background: var(--accent-red);
    right: 0;
}

.orderbook-row.bid .orderbook-bar {
    background: var(--accent-primary);
    left: 0;
}

.orderbook-price {
    width: 50px;
    text-align: center;
    z-index: 1;
    font-weight: bold;
}

.orderbook-row.ask .orderbook-price {
    color: var(--accent-red);
}

.orderbook-row.bid .orderbook-price {
    color: var(--accent-primary);
}

.orderbook-qty {
    width: 50px;
    text-align: right;
    padding-right: 0.5rem;
    z-index: 1;
    color: var(--text-secondary);
}

.orderbook-spread {
    text-align: center;
    padding: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.68rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* Risk Gauges */
.risk-gauge {
    margin: 0.35rem 0;
}

.gauge-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    margin-bottom: 0.2rem;
}

.gauge-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 1px;
    overflow: hidden;
}

.gauge-fill {
    height: 100%;
    border-radius: 1px;
    transition: width 0.3s, background 0.3s;
}

.gauge-fill.green { background: var(--accent-primary); }
.gauge-fill.yellow { background: var(--accent-yellow); }
.gauge-fill.red { background: var(--accent-red); }

/* Alerts */
.alerts-container {
    max-height: 180px;
    overflow-y: auto;
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem;
    margin-bottom: 0.2rem;
    border-radius: 1px;
    font-size: 0.72rem;
}

.alert-item.warning {
    background: rgba(255, 170, 0, 0.1);
    border-left: 2px solid var(--accent-yellow);
}

.alert-item.error {
    background: rgba(255, 68, 68, 0.1);
    border-left: 2px solid var(--accent-red);
}

.alert-item.info {
    background: rgba(232, 168, 38, 0.08);
    border-left: 2px solid var(--accent-primary);
}

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

.alert-message {
    flex: 1;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 50px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    padding: 0.5rem 0.75rem;
    border-radius: 1px;
    font-size: 0.72rem;
    animation: slideIn 0.3s ease;
    max-width: 300px;
}

.toast.warning {
    background: var(--accent-yellow);
    color: var(--bg-primary);
}

.toast.error {
    background: var(--accent-red);
    color: white;
}

.toast.success {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Markets Tab Styles */
.games-container {
    display: none;
}

.games-container.active {
    display: block;
}

.dashboard-content {
    display: block;
}

.dashboard-content.hidden {
    display: none;
}

/* Hide old filter buttons - replaced by dropdown */
.games-filters {
    display: none;
}

/* Position Detail Panel - for table expansion */
.position-indicator {
    color: var(--accent-primary);
    font-weight: bold;
}

/* Trade History Table */
.trade-history {
    max-height: 250px;
    overflow-y: auto;
}

.export-btn {
    float: right;
    font-size: 0.68rem;
    padding: 0.2rem 0.4rem;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Responsive */
@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .full-width {
        grid-column: span 2;
    }

    .half-width {
        grid-column: span 2;
    }
}

/* ===========================================
   TUNER TAB STYLES
   =========================================== */

.tuner-container {
    padding: 1rem;
    background: var(--bg-primary);
    min-height: calc(100vh - 80px);
}

.tuner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.tuner-title {
    color: var(--accent-primary);
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 1px;
}

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

.tuner-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 8px;
    font-size: 0.72rem;
    font-family: inherit;
}

.tuner-select.small {
    padding: 2px 6px;
    font-size: 0.68rem;
}

.tuner-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 12px;
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tuner-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

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

.tuner-btn.primary:hover {
    background: var(--accent-light);
    border-color: var(--accent-light);
}

/* KPI Cards Row */
.tuner-kpi-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.tuner-kpi-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    text-align: center;
}

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

.kpi-value {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: bold;
}

.kpi-value.positive {
    color: #00ff88;
}

.kpi-value.negative {
    color: #ff4444;
}

.kpi-sub {
    color: var(--text-muted);
    font-size: 0.65rem;
    margin-top: 2px;
}

/* Charts Grid */
.tuner-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.tuner-chart-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.tuner-chart-card.full-width {
    grid-column: span 2;
}

.chart-card-header {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--accent-primary);
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.tuner-chart-wrapper {
    height: 180px;
    padding: 0.5rem;
}

.tuner-chart-card.full-width .tuner-chart-wrapper {
    height: 220px;
}

/* Strategy Parameters Section */
.tuner-params-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.params-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--accent-primary);
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
    padding: 0.75rem;
}

.param-loading {
    color: var(--text-muted);
    padding: 1rem;
    text-align: center;
}

.strategy-param-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.param-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.param-strategy-name {
    color: var(--accent-primary);
    font-weight: bold;
    font-size: 0.75rem;
}

.param-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 18px;
}

.param-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--text-muted);
    transition: 0.2s;
    border-radius: 18px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.2s;
    border-radius: 50%;
}

.param-toggle input:checked + .toggle-slider {
    background-color: var(--accent-primary);
}

.param-toggle input:checked + .toggle-slider:before {
    transform: translateX(18px);
}

.param-inputs {
    padding: 0.5rem 0.75rem;
}

.param-input-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

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

.param-input-group label {
    color: var(--text-secondary);
    font-size: 0.68rem;
}

.param-input-group input {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 2px 6px;
    font-size: 0.72rem;
    font-family: inherit;
    width: 80px;
    text-align: right;
}

.param-input-group input.changed {
    border-color: var(--accent-primary);
    background: rgba(232, 168, 38, 0.08);
}

.param-input-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.param-slider-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.param-slider-row input[type="range"] {
    width: 120px;
}

.param-slider-value {
    color: var(--text-secondary);
    font-size: 0.7rem;
    min-width: 36px;
    text-align: right;
}

.param-empty {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-style: italic;
}

/* Signal Analysis Section (Forward Testing) */
.tuner-signal-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.signal-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), rgba(232, 168, 38, 0.04));
}

.signal-section-header span:first-child {
    color: #00ff88;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.signal-stats {
    display: flex;
    gap: 1.5rem;
    font-size: 0.7rem;
}

.signal-stat {
    color: var(--text-secondary);
}

.signal-stat strong {
    color: var(--accent-primary);
}

.signal-charts-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.signal-chart-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.signal-chart-card .chart-card-header {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.68rem;
    font-weight: bold;
    color: var(--accent-primary);
    letter-spacing: 0.5px;
}

.signal-chart-wrapper {
    height: 180px;
    padding: 0.5rem;
}

.signal-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--accent-primary);
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.signal-log-filters {
    display: flex;
    gap: 0.5rem;
}

.signal-log-table-container {
    max-height: 250px;
    overflow-y: auto;
}

.signal-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
}

.signal-log-table th {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
    padding: 5px 6px;
    text-align: left;
    font-weight: bold;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.signal-log-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.signal-log-table tbody tr:hover {
    background: rgba(0, 255, 136, 0.05);
}

.signal-log-table td.positive {
    color: #00ff88;
    font-weight: bold;
}

.signal-log-table td.negative {
    color: #ff4444;
}

.signal-log-table td.muted {
    color: var(--text-muted);
}

.signal-log-table .dna-change {
    font-size: 0.6rem;
    color: var(--text-secondary);
}

/* Trade Log */
.tuner-trade-log {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.trade-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--accent-primary);
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.trade-log-filters {
    display: flex;
    gap: 0.5rem;
}

.trade-log-table-container {
    max-height: 300px;
    overflow-y: auto;
}

.trade-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}

.trade-log-table th {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
    padding: 6px 8px;
    text-align: left;
    font-weight: bold;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.trade-log-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.trade-log-table tbody tr:hover {
    background: rgba(232, 168, 38, 0.06);
}

.trade-log-table td.positive {
    color: #00ff88;
}

.trade-log-table td.negative {
    color: #ff4444;
}

/* Toast notifications — see unified system at end of file */

/* Responsive adjustments */
@media (max-width: 1400px) {
    .tuner-kpi-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

    .full-width, .half-width {
        grid-column: span 1;
    }

    .header {
        height: auto;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .menu-bar {
        flex-wrap: wrap;
        justify-content: center;
    }

    .tuner-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .tuner-charts-grid {
        grid-template-columns: 1fr;
    }

    .tuner-chart-card.full-width {
        grid-column: span 1;
    }
}

/* ===========================================
   LIVE GAMES MONITOR STYLES
   =========================================== */

.live-games-container {
    max-height: 350px;
    overflow-y: auto;
}

.live-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 8px 0;
}

.live-game-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 12px;
    transition: all 0.2s ease;
}

.live-game-card:hover {
    border-color: var(--accent-primary);
}

.live-game-card.highlight {
    border-color: var(--accent-primary);
    box-shadow: 0 0 8px rgba(232, 168, 38, 0.16);
}

.live-game-card .game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.68rem;
}

.live-game-card .game-sport {
    color: var(--accent-primary);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-game-card .game-period {
    color: var(--text-secondary);
}

.live-game-card .game-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

.live-game-card .team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.live-game-card .team-abbrev {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.live-game-card .team-score {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
}

.live-game-card .vs {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.live-game-card .game-metrics {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.live-game-card .game-metrics .metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: none;
    padding: 0;
}

.live-game-card .game-metrics .label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.live-game-card .game-metrics .value {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--text-primary);
}

.live-game-card .game-metrics .value.positive {
    color: var(--accent-primary);
}

.live-game-card .game-metrics .value.negative {
    color: var(--accent-red);
}

.live-game-card .game-metrics .value.highlight {
    color: var(--accent-primary);
    font-weight: 800;
}

.live-game-card .game-signal {
    margin-top: 8px;
    padding: 4px 8px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 2px;
}

.live-game-card .game-signal.signal-buy {
    background: rgba(232, 168, 38, 0.16);
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
}

.live-game-card .game-signal.signal-sell {
    background: rgba(255, 68, 68, 0.2);
    color: var(--accent-red);
    border: 1px solid var(--accent-red);
}

/* ===========================================
   OPPORTUNITIES SCANNER STYLES
   =========================================== */

.opportunities-container {
    max-height: 300px;
    overflow-y: auto;
}

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

.opportunities-table th {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
    padding: 6px 8px;
    text-align: left;
    font-weight: bold;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
}

.opportunities-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-color);
}

.opportunities-table tbody tr:hover {
    background: rgba(232, 168, 38, 0.06);
}

.opportunities-table tbody tr.edge-high {
    background: rgba(232, 168, 38, 0.04);
}

.opportunities-table .sport-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.6rem;
    font-weight: bold;
    border-radius: 2px;
    text-transform: uppercase;
}

.opportunities-table .sport-badge.nba {
    background: rgba(200, 80, 0, 0.3);
    color: #ff8844;
}

.opportunities-table .sport-badge.cbb {
    background: rgba(0, 100, 200, 0.3);
    color: #4488ff;
}

.opportunities-table .sport-badge.nhl {
    background: rgba(0, 150, 150, 0.3);
    color: #44cccc;
}

.opportunities-table .ticker-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opportunities-table .price-cell {
    font-family: 'Monaco', 'Menlo', monospace;
    font-weight: bold;
}

.opportunities-table .edge-cell {
    font-weight: bold;
}

.opportunities-table .edge-cell.edge-high {
    color: var(--accent-primary);
}

.opportunities-table .edge-cell.edge-medium {
    color: var(--accent-light);
}

.opportunities-table .edge-cell.edge-low {
    color: var(--text-secondary);
}

.opportunities-table .signal-buy {
    color: var(--accent-primary);
    font-weight: bold;
}

.opportunities-table .signal-sell {
    color: var(--accent-red);
    font-weight: bold;
}

.opportunities-table .btn-trade {
    padding: 3px 8px;
    font-size: 0.65rem;
    background: var(--accent-primary);
    color: var(--bg-primary);
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.opportunities-table .btn-trade:hover {
    background: var(--accent-light);
}

/* ===========================================
   FEED HEALTH MONITOR STYLES
   =========================================== */

.feed-health-container {
    padding: 4px 0;
}

.feed-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: var(--bg-tertiary);
    border-left: 3px solid transparent;
    font-size: 0.72rem;
}

.feed-status-item.status-ok {
    border-left-color: var(--accent-primary);
}

.feed-status-item.status-warning {
    border-left-color: var(--accent-yellow);
}

.feed-status-item.status-error {
    border-left-color: var(--accent-red);
}

.feed-status-item .feed-icon {
    font-size: 0.65rem;
    font-weight: bold;
    width: 32px;
}

.feed-status-item.status-ok .feed-icon {
    color: var(--accent-primary);
}

.feed-status-item.status-warning .feed-icon {
    color: var(--accent-yellow);
}

.feed-status-item.status-error .feed-icon {
    color: var(--accent-red);
}

.feed-status-item .feed-name {
    font-weight: bold;
    min-width: 100px;
}

.feed-status-item .feed-detail {
    color: var(--text-secondary);
    flex: 1;
}

.feed-status-item .feed-latency {
    color: var(--text-muted);
    font-size: 0.68rem;
}

/* ===========================================
   RISK MATRIX STYLES
   =========================================== */

.risk-matrix-container {
    padding: 4px 0;
}

.risk-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

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

.risk-summary .risk-stat .label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.risk-summary .risk-stat .value {
    font-size: 0.85rem;
    font-weight: bold;
}

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

.risk-matrix-table th {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
    padding: 5px 8px;
    text-align: right;
    font-weight: bold;
    font-size: 0.68rem;
    text-transform: uppercase;
}

.risk-matrix-table th:first-child {
    text-align: left;
}

.risk-matrix-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    text-align: right;
    font-family: 'Monaco', 'Menlo', monospace;
}

.risk-matrix-table td:first-child {
    text-align: left;
}

.risk-matrix-table tbody tr:hover {
    background: rgba(232, 168, 38, 0.04);
}

.risk-matrix-table .category-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.6rem;
    font-weight: bold;
    border-radius: 2px;
    text-transform: uppercase;
}

.risk-matrix-table .category-badge.nba {
    background: rgba(200, 80, 0, 0.3);
    color: #ff8844;
}

.risk-matrix-table .category-badge.cbb {
    background: rgba(0, 100, 200, 0.3);
    color: #4488ff;
}

.risk-matrix-table .category-badge.nhl {
    background: rgba(0, 150, 150, 0.3);
    color: #44cccc;
}

.risk-matrix-table .category-badge.politics {
    background: rgba(150, 50, 150, 0.3);
    color: #cc66cc;
}

.risk-matrix-table .category-badge.other {
    background: rgba(100, 100, 100, 0.3);
    color: #999;
}

/* Card badge for counts */
.card-badge {
    display: inline-block;
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-size: 0.6rem;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 8px;
}

/* ===========================================
   QUICK STATS BAR
   =========================================== */

.quick-stats-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 1.25rem;
    gap: 2rem;
}

.quick-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 16px;
    min-width: 90px;
}

.quick-stat .stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.04em;
}

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

.quick-stat .stat-value.positive {
    color: var(--positive);
}

.quick-stat .stat-value.negative {
    color: var(--negative);
}

/* ===========================================
   KELLY CALCULATOR MODAL
   =========================================== */

.kelly-modal .modal-content {
    max-width: 600px;
}

.kelly-modal-content {
    max-width: 600px;
}

.kelly-modal-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kelly-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.kelly-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kelly-input-group label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kelly-input-group input[type="number"] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 12px;
    font-size: 0.85rem;
    font-family: 'Monaco', 'Menlo', monospace;
}

.kelly-input-group input[type="number"]:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.kelly-input-group input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    background: var(--bg-tertiary);
    height: 6px;
    border-radius: 3px;
}

.kelly-input-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
}

.kelly-input-group #kelly-fraction-value {
    font-size: 0.75rem;
    color: var(--accent-primary);
    font-weight: bold;
    min-width: 40px;
    text-align: right;
}

.kelly-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.kelly-result-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 12px;
    text-align: center;
}

.kelly-result-card.main {
    grid-column: span 3;
    border-color: var(--accent-primary);
    background: rgba(232, 168, 38, 0.08);
}

.kelly-result-card .result-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.kelly-result-card .result-value {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--text-primary);
    font-family: 'Monaco', 'Menlo', monospace;
}

.kelly-result-card.main .result-value {
    font-size: 1.5rem;
    color: var(--accent-primary);
}

.kelly-chart-container {
    height: 200px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 10px;
}

/* ===========================================
   CAPITAL CONFIGURATION MODAL
   =========================================== */

.capital-modal .modal-content {
    max-width: 480px;
}

.capital-modal-desc {
    color: #888;
    font-size: 0.85rem;
    margin: 0 0 16px 0;
}

.capital-input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.capital-input-group label {
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.capital-input-wrap {
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color 0.15s;
}

.capital-input-wrap:focus-within {
    border-color: var(--accent-primary);
}

.capital-input-wrap .currency-prefix {
    padding: 10px 0 10px 14px;
    color: #888;
    font-size: 1rem;
    font-weight: 600;
    flex-shrink: 0;
    user-select: none;
}

.capital-input-wrap input {
    width: 100%;
    padding: 10px 12px 10px 6px;
    background: transparent;
    border: none;
    color: #e0e0e0;
    font-size: 1.1rem;
    font-weight: 600;
    outline: none;
}

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

.preset-btn {
    padding: 8px 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: #aaa;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.preset-btn:hover {
    border-color: var(--accent-primary);
    color: #e0e0e0;
}

.preset-btn.active {
    background: rgba(0, 255, 136, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.capital-error {
    color: #ff4444;
    font-size: 0.8rem;
    min-height: 1em;
}

.capital-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.capital-modal-actions .btn-cancel {
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: #888;
    cursor: pointer;
    transition: all 0.15s;
}

.capital-modal-actions .btn-cancel:hover {
    border-color: #666;
    color: #ccc;
}

.capital-modal-actions .btn-confirm {
    padding: 8px 24px;
    background: var(--accent-primary);
    border: none;
    border-radius: 6px;
    color: #000;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.capital-modal-actions .btn-confirm:hover {
    background: #00cc6e;
}

.capital-modal-actions .btn-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* System tab capital config */
.capital-config-body {
    padding: 16px 20px;
}

.capital-config-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.capital-config-row label {
    font-size: 0.85rem;
    color: #e0e0e0;
    font-weight: 500;
}

.capital-config-row .config-desc {
    font-size: 0.75rem;
    color: #666;
    margin: 4px 0 0 0;
}

.capital-config-row .capital-input-wrap input {
    width: 140px;
}

.capital-session-info {
    margin-top: 12px;
    font-size: 0.8rem;
    color: #555;
}

.capital-session-info strong {
    color: #888;
}

/* Generic modal open state */
.modal.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

/* ===========================================
   ANALYTICS & SYSTEM TAB STYLES
   =========================================== */

.analytics-container,
.system-container,
.agents-container {
    padding: 1rem;
    background: var(--bg-primary);
    min-height: calc(100vh - 120px);
}

.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
    border-bottom: none;
}

.tab-header h2 {
    color: var(--accent-primary);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    border: none;
    padding: 0;
}

.tab-controls {
    display: flex;
    gap: 0.5rem;
}

/* Analytics Sections */
.analytics-section,
.system-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--accent-primary);
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.analytics-card,
.heatmap-card,
.liquidity-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 0.75rem;
}

.analytics-card h3,
.heatmap-card h3,
.liquidity-card h3 {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.5rem 0;
}

.chart-container-sm {
    height: 150px;
}

/* Replay Section */
.replay-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.replay-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    padding: 1rem;
}

.replay-chart-area {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    height: 200px;
}

.replay-details {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    font-size: 0.72rem;
}

/* Heatmaps */
.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.heatmap-container {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Backtest Section */
.backtest-container {
    padding: 1rem;
}

.backtest-params {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.param-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.param-group label {
    font-size: 0.68rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.tuner-input {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 8px;
    font-size: 0.72rem;
    font-family: inherit;
}

.backtest-results {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 1rem;
    min-height: 150px;
}

/* Game Schedule */
.schedule-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#schedule-date {
    min-width: 100px;
    text-align: center;
    color: var(--text-primary);
}

.schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
}

.schedule-game {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.schedule-time {
    font-size: 0.72rem;
    color: var(--accent-primary);
    font-weight: bold;
    min-width: 60px;
}

.schedule-matchup {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.schedule-matchup .team {
    font-weight: bold;
}

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

.schedule-sport {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* System Logs */
.log-controls {
    display: flex;
    gap: 0.5rem;
}

.log-container {
    max-height: 300px;
    overflow-y: auto;
    background: var(--bg-tertiary);
}

.log-entries {
    padding: 0.5rem;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.68rem;
}

.log-entry {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
}

.log-entry.error {
    color: var(--accent-red);
    background: rgba(255, 68, 68, 0.05);
}

.log-entry.warning {
    color: var(--accent-yellow);
}

.log-entry.info {
    color: var(--text-primary);
}

.log-timestamp {
    color: var(--text-muted);
    margin-right: 8px;
}

/* Liquidity */
.liquidity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.liquidity-table {
    width: 100%;
    font-size: 0.7rem;
}

.liquidity-table th {
    background: var(--bg-secondary);
    padding: 6px 8px;
}

.liquidity-table td {
    padding: 5px 8px;
}

/* Market Comparison */
.comparison-container {
    padding: 1rem;
}

.comparison-selectors {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vs-label {
    color: var(--text-muted);
    font-weight: bold;
}

.comparison-chart-container {
    height: 200px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 0.5rem;
}

/* Notification Configuration */
.notification-config {
    padding: 1rem;
}

.notification-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.notification-group:last-child {
    border-bottom: none;
}

.notification-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.notification-toggle input[type="checkbox"] {
    display: none;
}

.notification-toggle .toggle-slider {
    width: 36px;
    height: 18px;
    background: var(--text-muted);
    border-radius: 9px;
    position: relative;
    transition: all 0.2s;
}

.notification-toggle .toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
}

.notification-toggle input[type="checkbox"]:checked + .toggle-slider {
    background: var(--accent-primary);
}

.notification-toggle input[type="checkbox"]:checked + .toggle-slider::before {
    transform: translateX(18px);
}

.notification-toggle.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.notification-toggle.disabled .toggle-slider {
    cursor: not-allowed;
}

.threshold-input {
    width: 50px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 2px 6px;
    font-size: 0.72rem;
    text-align: center;
}

.threshold-label {
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* Responsive for new tabs */
@media (max-width: 1200px) {
    .analytics-grid,
    .heatmap-grid,
    .liquidity-grid {
        grid-template-columns: 1fr;
    }

    .replay-container {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   MODAL ENHANCEMENTS - Watchlist, Quick Trade, Implied Probability
   =========================================== */

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

.watchlist-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.watchlist-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

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

.watchlist-icon {
    font-size: 1.2rem;
    font-weight: bold;
}

/* Implied Probability Section */
.implied-probability-section {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 12px;
    margin-bottom: 16px;
}

.probability-header {
    font-size: 0.68rem;
    color: var(--accent-primary);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.probability-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.probability-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.prob-label {
    font-size: 0.75rem;
    font-weight: bold;
    min-width: 60px;
    color: var(--text-primary);
}

.prob-bar-container {
    flex: 1;
    height: 20px;
    background: var(--bg-secondary);
    border-radius: 2px;
    overflow: hidden;
}

.prob-bar {
    display: block;
    width: 100%;
    height: 100%;
    transition: width 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
}

.prob-bar.team1 {
    background: linear-gradient(90deg, #4a9eff, #2d7dd2);
}

.prob-bar.team2 {
    background: linear-gradient(90deg, #e94560, #c73e54);
}

.prob-bar::-webkit-progress-bar {
    background: transparent;
}

.prob-bar.team1::-webkit-progress-value {
    background: linear-gradient(90deg, #4a9eff, #2d7dd2);
}

.prob-bar.team2::-webkit-progress-value {
    background: linear-gradient(90deg, #e94560, #c73e54);
}

.prob-bar.team1::-moz-progress-bar {
    background: linear-gradient(90deg, #4a9eff, #2d7dd2);
}

.prob-bar.team2::-moz-progress-bar {
    background: linear-gradient(90deg, #e94560, #c73e54);
}

.prob-value {
    font-size: 0.85rem;
    font-weight: bold;
    min-width: 45px;
    text-align: right;
    color: var(--text-primary);
}

/* Quick Trade Section */
.quick-trade-section {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 12px;
    margin-bottom: 16px;
}

.quick-trade-header {
    font-size: 0.68rem;
    color: var(--accent-primary);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.quick-trade-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.trade-side {
    display: flex;
    gap: 4px;
}

.trade-side-btn {
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: bold;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.trade-side-btn.yes:hover,
.trade-side-btn.yes.active {
    background: rgba(74, 158, 255, 0.2);
    border-color: #4a9eff;
    color: #4a9eff;
}

.trade-side-btn.no:hover,
.trade-side-btn.no.active {
    background: rgba(233, 69, 96, 0.2);
    border-color: #e94560;
    color: #e94560;
}

.trade-qty-selector {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trade-qty-selector label {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.qty-btn {
    padding: 4px 10px;
    font-size: 0.72rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
}

.qty-btn:hover,
.qty-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--bg-primary);
}

#custom-qty {
    width: 50px;
    padding: 4px 6px;
    font-size: 0.72rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    text-align: center;
}

.trade-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.trade-btn {
    padding: 8px 20px;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.trade-btn.buy {
    background: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    color: var(--bg-primary);
}

.trade-btn.buy:hover {
    background: var(--accent-light);
    border-color: var(--accent-light);
}

.trade-btn.sell {
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid #ff4444;
    color: #ff4444;
}

.trade-btn.sell:hover {
    background: rgba(255, 68, 68, 0.3);
}

/* Watchlist indicator on cards */
.market-card.in-watchlist::before {
    content: '*';
    position: absolute;
    top: 8px;
    left: 8px;
    color: var(--accent-primary);
    font-size: 1.2rem;
    font-weight: bold;
}

/* ===========================================
   HEADER BALANCE SPARKLINE
   =========================================== */

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

.balance-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.balance-value {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--accent-primary);
    font-family: 'Monaco', 'Menlo', monospace;
}

#balance-sparkline {
    opacity: 0.8;
}

/* ===========================================
   SESSION COMPARISON
   =========================================== */

.session-comparison {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.session-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}

.session-row:last-child {
    border-bottom: none;
}

.session-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.session-value {
    font-size: 0.8rem;
    font-weight: bold;
    font-family: 'Monaco', 'Menlo', monospace;
}

/* ===========================================
   MARKET SENTIMENT GAUGE
   =========================================== */

.sentiment-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.gauge-visual {
    position: relative;
    width: 160px;
    height: 80px;
    overflow: hidden;
}

.gauge-arc {
    width: 160px;
    height: 80px;
    background: linear-gradient(90deg,
        #ff4444 0%,
        #ffaa00 25%,
        #888 50%,
        #88ff88 75%,
        #00ff88 100%
    );
    border-radius: 80px 80px 0 0;
    position: relative;
}

.gauge-arc::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 0;
    background: var(--bg-tertiary);
    border-radius: 60px 60px 0 0;
}

.gauge-needle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 4px;
    height: 60px;
    background: var(--accent-primary);
    transform-origin: bottom center;
    transition: transform 0.5s ease;
    margin-left: -2px;
    border-radius: 2px;
}

.gauge-needle::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--accent-primary);
    border-radius: 50%;
    margin-left: -5px;
}

.gauge-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 8px;
}

.gauge-labels .label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gauge-labels .bearish {
    color: #ff4444;
}

.gauge-labels .neutral {
    color: var(--text-muted);
}

.gauge-labels .bullish {
    color: #00ff88;
}

.sentiment-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-top: 10px;
}

.sentiment-value.bullish {
    color: #00ff88;
}

.sentiment-value.bearish {
    color: #ff4444;
}

.sentiment-confidence {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Sentiment Factor Breakdown */
.sentiment-factors {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    width: 100%;
}

.factor-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.68rem;
}

.factor-name {
    width: 90px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.factor-bar-container {
    flex: 1;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 1px;
    overflow: hidden;
}

.factor-bar {
    height: 100%;
    background: var(--text-muted);
    border-radius: 1px;
    transition: width 0.3s ease, background 0.3s ease;
}

.factor-bar.bullish {
    background: linear-gradient(90deg, #00aa55 0%, #00ff88 100%);
}

.factor-bar.bearish {
    background: linear-gradient(90deg, #ff4444 0%, #ff6666 100%);
}

.factor-bar.neutral {
    background: linear-gradient(90deg, #666 0%, #888 100%);
}

.factor-value {
    width: 24px;
    text-align: right;
    color: var(--text-secondary);
    font-weight: 500;
    font-family: var(--font-mono);
}

/* News/Events Ticker */
/* Activity Feed (replaces news ticker) */
.activity-feed-bar {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.015);
    border-bottom: 1px solid var(--border-color);
    padding: 6px 1.25rem;
    gap: 16px;
    overflow: hidden;
    height: 36px;
}

.activity-feed-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent-primary);
    flex-shrink: 0;
    font-family: var(--font-body);
    letter-spacing: 0.04em;
}

.activity-feed-items {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    overflow: hidden;
}

.activity-feed-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    animation: feedFadeIn 0.4s ease;
    font-family: var(--font-mono);
}

.activity-feed-item .feed-time {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.activity-feed-item .feed-source {
    color: var(--accent-primary);
    font-weight: 600;
    font-size: var(--text-xs);
}

.activity-feed-item.important {
    color: var(--negative);
}

.activity-feed-item.positive {
    color: var(--positive);
}

.activity-feed-separator {
    color: var(--text-muted);
    opacity: 0.3;
}

@keyframes feedFadeIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Tuner Advanced Analysis Section */
.tuner-advanced-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid var(--accent-primary);
}

.tuner-advanced-section > .section-header {
    margin-bottom: 20px;
}

.tuner-advanced-section > .section-header .section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 0.1em;
}

.tuner-analysis-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 20px;
}

.analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
}

.analysis-header span {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.analysis-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.analysis-input {
    width: 80px;
    padding: 4px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
    font-size: 0.7rem;
    text-align: center;
}

.analysis-select {
    padding: 4px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
    font-size: 0.7rem;
}

.analysis-btn {
    padding: 4px 12px;
    background: var(--accent-primary);
    border: none;
    border-radius: 3px;
    color: #000;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.analysis-btn:hover {
    background: var(--accent-light);
}

.analysis-content {
    padding: 16px;
}

/* Monte Carlo */
.mc-results {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.mc-chart-container {
    height: 200px;
}

.mc-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mc-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.mc-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.mc-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mc-value.profit { color: #00d668; }
.mc-value.loss { color: #ff5252; }

/* Correlation Matrix */
.correlation-matrix {
    overflow-x: auto;
    margin-bottom: 16px;
}

.corr-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}

.corr-matrix-table th,
.corr-matrix-table td {
    padding: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.corr-matrix-table th {
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-muted);
    font-weight: 600;
}

.corr-matrix-table td {
    font-weight: 600;
}

.correlation-insights {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.insight-header {
    font-size: 0.68rem;
    color: var(--accent-primary);
    font-weight: 700;
    margin-bottom: 8px;
}

.insight-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.insight-list li {
    font-size: 0.72rem;
    color: var(--text-secondary);
    padding: 4px 0;
    padding-left: 12px;
    position: relative;
}

.insight-list li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: var(--accent-primary);
}

/* Parameter Optimizer */
.param-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.param-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.param-recommendations {
    padding: 12px;
    background: rgba(232, 168, 38, 0.04);
    border: 1px solid rgba(232, 168, 38, 0.16);
    border-radius: 4px;
}

.recommendation-header {
    font-size: 0.68rem;
    color: var(--accent-primary);
    font-weight: 700;
    margin-bottom: 8px;
}

/* Regime Analysis */
.regime-chart-container {
    height: 180px;
    margin-bottom: 16px;
}

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

.regime-card {
    text-align: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.regime-name {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.regime-winrate {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.regime-trades {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Slippage Analysis */
.slippage-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.slip-stat {
    text-align: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.slip-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.slip-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.slip-value.loss { color: #ff5252; }

.slippage-chart-container {
    height: 150px;
    margin-bottom: 16px;
}

.slippage-by-time {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.slip-header {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.slip-time-bars {
    display: flex;
    align-items: flex-end;
    height: 60px;
    gap: 2px;
}

/* Fee Impact */
.fee-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.fee-stat {
    text-align: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.fee-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.fee-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.fee-value.loss { color: #ff5252; }

.fee-breakdown {
    margin-bottom: 16px;
}

.fee-header {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

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

.fee-table th,
.fee-table td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid var(--border-color);
}

.fee-table th {
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-muted);
    font-weight: 600;
}

.fee-chart-container {
    height: 150px;
}

/* Factor Analysis */
.factor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.factor-card {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    text-align: center;
}

.factor-name {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.factor-impact {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.factor-impact.positive { color: #00d668; }
.factor-impact.negative { color: #ff5252; }

.factor-bar-container {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.factor-bar {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.factor-legend {
    text-align: center;
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* ============================================
   API Feed Health Monitor Styles
   ============================================ */

.feed-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.feed-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1rem;
    transition: border-color 0.2s ease;
}

.feed-card.healthy {
    border-color: #00d668;
}

.feed-card.delayed,
.feed-card.stale {
    border-color: var(--accent-yellow);
}

.feed-card.stopped,
.feed-card.disconnected {
    border-color: var(--accent-red);
}

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

.feed-sport {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.feed-status-badge {
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
}

.feed-status-badge.healthy {
    background: rgba(0, 214, 104, 0.2);
    color: #00d668;
}

.feed-status-badge.waiting {
    background: rgba(68, 136, 255, 0.2);
    color: var(--accent-blue);
}

.feed-status-badge.delayed {
    background: rgba(255, 170, 0, 0.2);
    color: var(--accent-yellow);
}

.feed-status-badge.stale {
    background: rgba(232, 168, 38, 0.16);
    color: var(--accent-primary);
}

.feed-status-badge.stopped,
.feed-status-badge.disconnected {
    background: rgba(255, 68, 68, 0.2);
    color: var(--accent-red);
}

.feed-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.feed-detail {
    display: flex;
    flex-direction: column;
}

.feed-detail .label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.feed-detail .value {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 500;
}

.feed-latency-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.feed-latency-fill {
    height: 100%;
    background: #00d668;
    border-radius: 2px;
    transition: width 0.3s ease, background 0.3s ease;
    width: 0%;
}

.feed-latency-fill.good {
    background: #00d668;
    width: 100%;
}

.feed-latency-fill.moderate {
    background: var(--accent-yellow);
    width: 66%;
}

.feed-latency-fill.poor {
    background: var(--accent-primary);
    width: 33%;
}

.feed-latency-fill.critical {
    background: var(--accent-red);
    width: 10%;
}

.feed-summary {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
}

.feed-summary .summary-item {
    font-size: 0.75rem;
}

.feed-summary .summary-item .label {
    color: var(--text-muted);
    margin-right: 0.25rem;
}

.feed-summary .positive {
    color: #00d668;
}

.feed-summary .warning {
    color: var(--accent-yellow);
}

.feed-summary .negative {
    color: var(--accent-red);
}

/* Alpha Strategies Section */
.alpha-stats {
    padding: 0.5rem 0;
}

.alpha-stats .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-color);
}

.alpha-stats .stat-row:last-child {
    border-bottom: none;
}

.alpha-stats .stat-label {
    color: var(--text-secondary);
    font-size: 0.7rem;
}

.alpha-stats .stat-value {
    color: var(--text-primary);
    font-weight: bold;
    font-size: 0.8rem;
}

.calibration-buckets,
.arb-violations-list,
.regime-distribution {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    max-height: 120px;
    overflow-y: auto;
}

.bucket-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    padding: 2px 0;
}

/* =============================================
   HERO PORTFOLIO CARD
   ============================================= */
.hero-portfolio {
    grid-column: 1 / -1;
}

@media (min-width: 900px) {
    .dashboard-grid {
        grid-template-columns: 3fr 2fr;
    }
    .hero-portfolio {
        grid-column: 1;
    }
}

.portfolio-top-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 16px;
}

.portfolio-value-big {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
}

.portfolio-pnl-group {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.portfolio-pnl-group .pnl-value {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 600;
}

.portfolio-pnl-group .return-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.portfolio-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.portfolio-metric-grid .pm-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.portfolio-metric-grid .pm-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-body);
}

.portfolio-metric-grid .pm-value {
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.portfolio-orders-row {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: var(--text-sm);
}

.portfolio-orders-row span {
    color: var(--text-secondary);
}

.portfolio-orders-row .po-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-mono);
}

/* =============================================
   TABBED CARD (Positions & Orders)
   ============================================= */
/* --- Generic tabbed cards (Positions/Orders) --- */
.tabbed-card-tabs {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin: -16px auto 16px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    width: fit-content;
}

.tabbed-card-tab {
    position: relative;
    padding: 7px 24px;
    font-size: var(--text-sm);
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    z-index: 1;
}

.tabbed-card-tab:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.tabbed-card-tab.active {
    color: var(--text-primary);
    background: rgba(232, 168, 38, 0.1);
    box-shadow:
        0 0 0 1px rgba(232, 168, 38, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.3);
}

.tabbed-card-panel {
    display: none;
    padding-top: 12px;
}

.tabbed-card-panel.active {
    display: block;
}

/* --- Agent Hub Navigation --- */
.agent-hub-nav {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin: 8px auto 0;
    padding: 3px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    width: fit-content;
}

.agent-hub-tab {
    position: relative;
    padding: 7px 24px;
    font-size: var(--text-sm);
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    z-index: 1;
}

.agent-hub-tab:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.agent-hub-tab.active {
    color: var(--text-primary);
    background: rgba(232, 168, 38, 0.1);
    box-shadow:
        0 0 0 1px rgba(232, 168, 38, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.3);
}

/* =============================================
   COLLAPSIBLE SECTIONS
   ============================================= */
.collapsible-section {
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    background: var(--bg-card);
    overflow: hidden;
}

.collapsible-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px var(--card-padding);
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}

.collapsible-header:hover {
    background: rgba(255,255,255,0.02);
}

.collapsible-header h2 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    border: none;
    flex: 1;
}

.collapsible-chevron {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.collapsible-section.open .collapsible-chevron {
    transform: rotate(90deg);
}

.collapsible-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.collapsible-section.open .collapsible-body {
    max-height: 800px;
}

.collapsible-body-inner {
    padding: 0 var(--card-padding) var(--card-padding);
}

/* =============================================
   FLOATING CONTROL BAR
   ============================================= */
.floating-control-bar {
    display: none;
}

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

.floating-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: var(--text-sm);
    font-family: var(--font-mono);
}

.floating-bar-right .fb-label {
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    margin-right: 4px;
}

.floating-bar-right .fb-value {
    color: var(--text-primary);
    font-weight: 600;
}

/* =============================================
   EQUITY CURVE TIME SELECTOR
   ============================================= */
.time-selector {
    display: flex;
    gap: 4px;
}

.time-selector .time-btn {
    padding: 4px 10px;
    font-size: var(--text-xs);
    font-family: var(--font-body);
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}

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

.time-selector .time-btn:hover:not(.active) {
    border-color: var(--text-muted);
    color: var(--text-secondary);
}

/* =============================================
   CARD BADGE
   ============================================= */
.card-badge {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-weight: 600;
    background: rgba(232, 168, 38, 0.12);
    color: var(--accent-primary);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

/* =============================================
   EXPORT BUTTON
   ============================================= */
.export-btn {
    font-size: var(--text-xs);
    padding: 4px 10px;
    border-radius: 4px;
    font-family: var(--font-body);
}

/* =============================================
   KELLY LINK IN HEADER
   ============================================= */
.kelly-header-link {
    font-size: var(--text-xs);
    color: var(--accent-primary);
    cursor: pointer;
    padding: 2px 6px;
    border: none;
    background: none;
    font-family: var(--font-body);
    transition: color 0.15s;
}

.kelly-header-link:hover {
    color: var(--accent-light);
    background: none;
}

/* =============================================================================
   PREMIUM FINTECH OVERHAUL
   ============================================================================= */

/* --- Header Right (replaces .status) --- */
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}

.header-balance-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(232, 168, 38, 0.06);
    border: 1px solid rgba(232, 168, 38, 0.15);
    border-radius: 8px;
    padding: 4px 12px;
    height: 32px;
}

.header-balance-pill .balance-amount {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
    letter-spacing: -0.01em;
}

.header-balance-pill canvas {
    opacity: 0.7;
}

.ws-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--positive);
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.4);
    transition: background 0.3s, box-shadow 0.3s;
}

.ws-dot.ws-disconnected {
    background: var(--negative);
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.4);
}

.mode-badge {
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: all 0.2s;
    background: transparent;
    line-height: 1;
}

.mode-badge.paper {
    color: var(--mode-paper-text);
    border-color: var(--mode-paper-border);
    background: rgba(232, 168, 38, 0.08);
}

.mode-badge.paper:hover {
    background: rgba(232, 168, 38, 0.15);
    border-color: var(--mode-paper-text);
}

.mode-badge.live {
    color: var(--mode-live-text);
    border-color: var(--mode-live-border);
    background: rgba(248, 113, 113, 0.08);
    animation: pulse-live 2s infinite;
}

.mode-badge.live:hover {
    background: rgba(248, 113, 113, 0.15);
    border-color: var(--mode-live-text);
}

.mode-badge.live-unavailable {
    cursor: not-allowed;
    opacity: 0.5;
}

/* --- User Menu --- */
.user-menu-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-secondary);
}

.user-menu-trigger:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color);
}

.user-menu-wrapper.open .user-menu-trigger {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-light);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(232, 168, 38, 0.2), rgba(232, 168, 38, 0.08));
    border: 1px solid rgba(232, 168, 38, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-primary);
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
}

.user-name {
    font-size: 0.78rem;
    font-weight: 500;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-chevron {
    opacity: 0.5;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.user-menu-wrapper.open .user-chevron {
    transform: rotate(180deg);
}

.user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    min-width: 200px;
    padding: 6px;
    z-index: 9999;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.user-menu-wrapper.open .user-dropdown {
    display: block;
    animation: dropdownFadeIn 0.15s ease;
}

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

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s;
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family: var(--font-body);
}

.user-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.user-dropdown-item svg {
    opacity: 0.5;
    flex-shrink: 0;
}

.user-dropdown-item:hover svg {
    opacity: 0.8;
}

.user-dropdown-upgrade {
    color: var(--accent-primary);
}

.user-dropdown-upgrade:hover {
    background: rgba(232, 168, 38, 0.1);
    color: var(--accent-light);
}

.user-dropdown-logout:hover {
    color: var(--negative);
}

.user-dropdown-logout:hover svg {
    stroke: var(--negative);
}

.user-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 8px;
}

/* --- Header refinement --- */
.header {
    height: 52px;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(10, 10, 22, 0.98) 100%);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
}

.header h1 {
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    border-right: 1px solid var(--border-color);
    padding-right: 1.25rem;
    margin-right: 0;
}

.menu-item {
    font-size: 0.8rem;
    padding: 0 1.1rem;
    font-weight: 500;
    letter-spacing: 0;
}

/* --- Mode Banner refinement --- */
.mode-banner {
    font-size: 0.68rem;
    padding: 5px 2rem;
    letter-spacing: 1.5px;
}

/* --- Quick Stats Bar refinement --- */
.quick-stats-bar {
    padding: 10px 2rem;
    gap: 3rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.005) 100%);
    border-bottom: 1px solid var(--border-color);
}

.quick-stat {
    gap: 4px;
    padding: 2px 0;
}

.quick-stat .stat-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.quick-stat .stat-value {
    font-size: 0.88rem;
    font-weight: 700;
}

/* --- Activity Feed refinement --- */
.activity-feed-bar {
    height: 32px;
    padding: 0 2rem;
    background: rgba(255,255,255,0.01);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.activity-feed-label {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
}

.activity-feed-item {
    font-size: 0.72rem;
}

/* =============================================================================
   PREMIUM CARD SYSTEM
   ============================================================================= */

.card {
    background: linear-gradient(180deg, rgba(14, 14, 28, 0.95) 0%, rgba(10, 10, 20, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.card h2 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Dashboard Grid spacing --- */
.dashboard-grid {
    padding: 1.5rem;
    gap: 1.5rem;
}

/* --- Portfolio Metric Grid refinement --- */
.portfolio-metric-grid {
    gap: 0;
}

.pm-item {
    padding: 8px 0;
}

.pm-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.pm-value {
    font-size: 0.85rem;
    font-weight: 600;
}

/* --- Chart container --- */
.chart-container.compact {
    margin: 0.75rem 0;
    border-radius: 8px;
    overflow: hidden;
}

/* --- Time selector pills --- */
.time-selector {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 3px;
}

.time-btn {
    padding: 4px 10px;
    font-size: 0.68rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.15s;
    font-family: var(--font-body);
}

.time-btn:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.time-btn.active {
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(232, 168, 38, 0.3);
}

/* --- Portfolio orders row --- */
.portfolio-orders-row {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.75rem;
    color: var(--text-muted);
    gap: 1.5rem;
}

/* --- Collapsible sections --- */
.collapsible-section {
    border-radius: 14px;
    overflow: hidden;
}

.collapsible-header {
    padding: 0.85rem 1.5rem;
    background: linear-gradient(180deg, rgba(14, 14, 28, 0.95) 0%, rgba(10, 10, 20, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: border-color 0.2s;
}

.collapsible-header:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.collapsible-header h2 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    border: none;
}

/* =============================================================================
   TABBED CARD REFINEMENT
   ============================================================================= */

.tabbed-card-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 3px;
    width: fit-content;
}

.tabbed-card-tab {
    padding: 6px 16px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-body);
}

.tabbed-card-tab:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.tabbed-card-tab.active {
    background: rgba(232, 168, 38, 0.12);
    color: var(--accent-primary);
    font-weight: 600;
}

/* =============================================================================
   EMPTY STATES
   ============================================================================= */

.pos-empty,
.no-markets,
.loading-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    min-height: 120px;
}

.pos-empty::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* =============================================================================
   AGENTS CONTAINER REFINEMENT
   ============================================================================= */

.agents-container {
    padding: 1.5rem;
    background: var(--bg-primary);
    min-height: calc(100vh - 120px);
}

.agents-container .tab-header h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    padding-bottom: 0;
    border-bottom: none;
}

/* --- Agent sub-tabs refinement --- */
.agent-subtab-bar {
    gap: 2px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.agent-subtab {
    padding: 8px 18px;
    font-size: 0.8rem;
    border-radius: 7px;
    font-weight: 500;
    transition: all 0.15s;
}

.agent-subtab.active {
    background: rgba(232, 168, 38, 0.1);
    color: var(--accent-primary);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.agent-subtab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

/* --- Agent filter bar --- */
.agent-filter-bar {
    gap: 10px;
    margin-bottom: 1.5rem;
}

.agent-filter-bar input[type="text"] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.82rem;
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s;
    font-family: var(--font-body);
}

.agent-filter-bar input[type="text"]:focus {
    outline: none;
    border-color: rgba(232, 168, 38, 0.4);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(232, 168, 38, 0.08);
}

.agent-filter-bar input[type="text"]::placeholder {
    color: var(--text-muted);
}

.agent-filter-bar select {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 30px 8px 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s;
    font-family: var(--font-body);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23686884' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.agent-filter-bar select:focus {
    outline: none;
    border-color: rgba(232, 168, 38, 0.4);
}

/* --- Add Agent button refinement --- */
.add-agent-btn {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-dark));
    color: var(--bg-primary);
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-body);
    box-shadow: 0 2px 8px rgba(232, 168, 38, 0.2);
    white-space: nowrap;
}

.add-agent-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(232, 168, 38, 0.3);
}

/* =============================================================================
   MARKETS CONTAINER REFINEMENT
   ============================================================================= */

.markets-toolbar {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.category-display {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: -0.01em;
}

.market-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-left: 10px;
}

.market-cards-container {
    padding: 1.5rem;
    gap: 1.25rem;
}

/* --- Market Card refinement --- */
.market-card {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.market-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

/* --- Sort dropdown refinement --- */
.sort-dropdown select {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 28px 6px 10px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-body);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23686884' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.sort-dropdown select:focus {
    outline: none;
    border-color: rgba(232, 168, 38, 0.4);
}

.sort-dropdown label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-right: 6px;
}

/* --- Positions toggle --- */
.positions-toggle {
    font-size: 0.78rem;
    color: var(--text-secondary);
    gap: 6px;
}

.positions-toggle input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

/* =============================================================================
   GLOBAL BUTTON REFINEMENT
   ============================================================================= */

button {
    font-family: var(--font-body);
}

/* Primary action buttons */
.btn-primary,
.agent-action-btn {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-dark));
    color: var(--bg-primary);
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(232, 168, 38, 0.15);
}

.btn-primary:hover,
.agent-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(232, 168, 38, 0.25);
}

/* Ghost/outline buttons */
.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-secondary);
    padding: 8px 18px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.85rem;
}

.btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
}

/* =============================================================================
   GLOBAL FORM ELEMENT REFINEMENT
   ============================================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgba(232, 168, 38, 0.5);
    box-shadow: 0 0 0 3px rgba(232, 168, 38, 0.08);
}

::placeholder {
    color: var(--text-muted);
}

/* =============================================================================
   MODAL REFINEMENT
   ============================================================================= */

.modal-overlay,
.agent-modal-overlay {
    backdrop-filter: blur(4px);
}

.modal-content {
    background: linear-gradient(180deg, var(--bg-card) 0%, rgba(8, 8, 18, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

/* =============================================================================
   TYPOGRAPHY HIERARCHY
   ============================================================================= */

.tab-header h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: -0.02em;
}

/* =============================================================================
   SCROLLBAR REFINEMENT
   ============================================================================= */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* =============================================================================
   AGENT HUB CARD (DASHBOARD) REFINEMENT
   ============================================================================= */

.agent-hub-nav {
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 1rem;
}

.agent-hub-tab {
    padding: 6px 14px;
    font-size: 0.76rem;
    border-radius: 6px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-body);
}

.agent-hub-tab:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.agent-hub-tab.active {
    background: rgba(232, 168, 38, 0.12);
    color: var(--accent-primary);
    font-weight: 600;
}

.manage-link {
    font-size: 0.75rem;
    color: var(--accent-primary);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: opacity 0.15s;
    font-family: var(--font-body);
}

.manage-link:hover {
    opacity: 0.8;
}

.agent-status-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-mono);
}

.agent-status-badge.running {
    background: rgba(52, 211, 153, 0.12);
    color: var(--positive);
    border: 1px solid rgba(52, 211, 153, 0.2);
}

.agent-status-badge.paused {
    background: rgba(251, 191, 36, 0.12);
    color: var(--accent-yellow);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

/* --- Agent control icons --- */
.agent-ctrl-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.15s;
}

.agent-ctrl-icon:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.agent-ctrl-icon.danger:hover {
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.08);
}

/* ===========================================================
   TRADE REASONING PANEL (Modal Chart)
   =========================================================== */

.trade-reasoning-panel {
    background: rgba(20, 20, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    margin: 12px 0;
    overflow: hidden;
}

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

.reasoning-agent {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reasoning-agent-name {
    color: #e8e8f0;
    font-weight: 600;
    font-size: 0.85rem;
}

.reasoning-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.reasoning-tag.reasoning-buy {
    background: rgba(52, 211, 153, 0.15);
    color: var(--positive);
    border: 1px solid rgba(52, 211, 153, 0.25);
}

.reasoning-tag.reasoning-sell {
    background: rgba(248, 113, 113, 0.15);
    color: var(--negative);
    border: 1px solid rgba(248, 113, 113, 0.25);
}

.reasoning-close {
    background: none;
    border: none;
    color: #666;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.15s;
}

.reasoning-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.reasoning-body {
    padding: 12px 16px;
}

.reasoning-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

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

.reasoning-stat .stat-label {
    font-size: 0.68rem;
    color: #686884;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reasoning-stat .stat-value {
    font-size: 0.85rem;
    color: #e8e8f0;
    font-family: 'SF Mono', Monaco, monospace;
    font-weight: 600;
}

.reasoning-stat .stat-value.edge-positive {
    color: var(--positive);
}

.reasoning-stat .stat-value.edge-negative {
    color: var(--negative);
}

.reasoning-text {
    color: #a0a0b8;
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    margin-bottom: 8px;
    font-family: 'SF Mono', Monaco, monospace;
}

.reasoning-time {
    font-size: 0.7rem;
    color: #555;
    text-align: right;
}

/* ===========================================================
   CRYPTO OVERLAY TOGGLE
   =========================================================== */

.crypto-toggle-btn {
    background: transparent;
    border: 1px solid #333;
    color: #fbbf24;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    margin-left: 8px;
}

.crypto-toggle-btn:hover {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.08);
}

.crypto-toggle-btn.active {
    background: rgba(251, 191, 36, 0.16);
    border-color: #fbbf24;
}

/* ===========================================================
   TERMINAL TAB
   =========================================================== */

.terminal-container {
    position: relative;
    height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Toolbar ────────────────────────────────────────────────── */
.terminal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 12px;
    min-height: 44px;
}

.terminal-scope-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    flex-shrink: 1;
    scrollbar-width: none;
}
.terminal-scope-tabs::-webkit-scrollbar { display: none; }

.terminal-scope-btn {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.terminal-scope-btn:hover {
    border-color: rgba(232,168,38,0.3);
    color: var(--text-primary);
}
.terminal-scope-btn.active {
    background: rgba(232,168,38,0.1);
    border-color: rgba(232,168,38,0.4);
    color: var(--accent-primary);
}
.terminal-scope-btn.team {
    border-style: dashed;
}

.terminal-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.terminal-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.terminal-toggle input { accent-color: var(--accent-primary); }

.terminal-clear-btn {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(248,113,113,0.2);
    background: rgba(248,113,113,0.06);
    color: var(--negative);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all 0.15s;
}
.terminal-clear-btn:hover {
    background: rgba(248,113,113,0.12);
    border-color: rgba(248,113,113,0.4);
}

/* ── Split Layout ───────────────────────────────────────────── */
.terminal-split {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Left: Chart Panel */
.terminal-chart-panel {
    width: 38%;
    min-width: 320px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    background: var(--bg-primary);
}

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

.terminal-chart-title {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terminal-chart-controls {
    display: flex;
    gap: 2px;
}

.terminal-time-btn {
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.15s;
}
.terminal-time-btn:hover {
    color: var(--text-secondary);
}
.terminal-time-btn.active {
    background: rgba(232,168,38,0.1);
    border-color: rgba(232,168,38,0.3);
    color: var(--accent-primary);
}

.terminal-chart-area {
    flex: 1;
    padding: 12px;
    position: relative;
    min-height: 200px;
}

/* Position Summary Bar */
.terminal-position-summary {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}
.tps-item {
    flex: 1;
    padding: 8px 12px;
    text-align: center;
    border-right: 1px solid var(--border-color);
}
.tps-item:last-child { border-right: none; }
.tps-label {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.tps-value {
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text-primary);
}
.tps-value.positive { color: var(--positive); }
.tps-value.negative { color: var(--negative); }

/* Right: Feed Panel */
.terminal-feed-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    overflow: hidden;
}

.terminal-feed-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.terminal-feed-scroll::-webkit-scrollbar { width: 6px; }
.terminal-feed-scroll::-webkit-scrollbar-track { background: transparent; }
.terminal-feed-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
}
.terminal-feed-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.15);
}

/* Welcome message */
.terminal-welcome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 32px 16px;
    color: var(--text-muted);
}
.tw-icon {
    font-family: var(--font-mono);
    color: var(--accent-primary);
    font-size: var(--text-lg);
    animation: tw-blink 1s step-end infinite;
}
@keyframes tw-blink {
    50% { opacity: 0; }
}
.tw-text {
    font-size: var(--text-sm);
    font-family: var(--font-mono);
}

/* ── Feed Cards (tf-*) ──────────────────────────────────────── */
.tf-card {
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 8px;
    border-left: 3px solid var(--tf-color, #686884);
    background: rgba(255,255,255,0.015);
    contain: content;
    transition: background 0.15s;
    cursor: default;
}
.tf-card[data-ticker] { cursor: pointer; }
.tf-card:hover {
    background: rgba(255,255,255,0.03);
}
.tf-card.tf-active {
    background: rgba(232,168,38,0.06);
    border-left-color: var(--accent-primary);
}

.tf-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.tf-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.tf-icon svg {
    width: 14px;
    height: 14px;
}

.tf-type {
    font-size: 9px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tf-color, var(--text-muted));
    font-weight: 600;
}

.tf-agent {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-time {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    flex-shrink: 0;
}

.tf-body {
    padding-left: 22px; /* align with text after icon */
}

.tf-summary {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Signal card */
.tf-signal-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tf-signal-ticker {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-weight: 600;
}
.tf-signal-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tf-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 600;
}
.tf-tag-buy {
    background: rgba(52,211,153,0.12);
    color: var(--positive);
    border: 1px solid rgba(52,211,153,0.2);
}
.tf-tag-sell {
    background: rgba(248,113,113,0.12);
    color: var(--negative);
    border: 1px solid rgba(248,113,113,0.2);
}
.tf-signal-edge,
.tf-signal-conf {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}
.tf-signal-prices {
    display: flex;
    gap: 12px;
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

/* Trade card */
.tf-trade-body {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tf-trade-buy { border-left-color: var(--positive) !important; }
.tf-trade-sell { border-left-color: var(--negative) !important; }
.tf-trade-detail {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-primary);
}
.tf-trade-fees {
    font-size: 10px;
    color: var(--text-muted);
}

/* Analysis card */
.tf-analysis-body {
    max-height: 120px;
    overflow-y: auto;
}
.tf-analysis-text {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
    font-family: var(--font-mono);
}

/* Team message card */
.tf-team-msg-body {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex-wrap: wrap;
}
.tf-msg-from {
    font-size: 10px;
    font-family: var(--font-mono);
    color: #22d3ee;
    font-weight: 600;
}
.tf-msg-arrow {
    color: var(--text-muted);
    font-size: 10px;
}
.tf-msg-to {
    font-size: 10px;
    font-family: var(--font-mono);
    color: #60a5fa;
    font-weight: 600;
}
.tf-msg-text {
    width: 100%;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}

/* Consensus card */
.tf-consensus-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tf-verdict {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tf-verdict-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.tf-verdict-badge.approved {
    background: rgba(52,211,153,0.12);
    color: var(--positive);
    border: 1px solid rgba(52,211,153,0.25);
}
.tf-verdict-badge.rejected {
    background: rgba(248,113,113,0.12);
    color: var(--negative);
    border: 1px solid rgba(248,113,113,0.25);
}
.tf-verdict-detail {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-secondary);
}
.tf-consensus-bar-wrap {
    position: relative;
    height: 6px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
    overflow: hidden;
}
.tf-consensus-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--positive));
    border-radius: 3px;
    transition: width 0.4s ease;
}
.tf-consensus-pct {
    position: absolute;
    right: 4px;
    top: -14px;
    font-size: 9px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.tf-approved { border-left-color: var(--positive) !important; }
.tf-rejected { border-left-color: var(--negative) !important; }

/* Hold check card */
.tf-hold-body {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tf-hold-pnl {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-weight: 600;
}
.tf-hold-pnl.positive { color: var(--positive); }
.tf-hold-pnl.negative { color: var(--negative); }

/* Error card */
.tf-error-body {
    color: var(--negative);
}
.tf-error-body .tf-summary {
    color: var(--negative);
}

/* ── Focus States (accessibility) ───────────────────────── */
.terminal-scope-btn:focus-visible,
.terminal-clear-btn:focus-visible,
.terminal-time-btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ── Analysis scrollbar ─────────────────────────────────── */
.tf-analysis-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.tf-analysis-body::-webkit-scrollbar { width: 6px; }
.tf-analysis-body::-webkit-scrollbar-track { background: transparent; }
.tf-analysis-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
}
.tf-analysis-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.15);
}

/* =============================================================================
   VISUAL UPGRADE: Empty States, Polish, Banner
   ============================================================================= */

/* --- Portfolio Empty State Overlay --- */
.portfolio-empty-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}
.portfolio-empty-overlay .empty-chart-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(232,168,38,0.08), rgba(232,168,38,0.02));
    border: 1px solid rgba(232,168,38,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: rgba(232,168,38,0.4);
}
.portfolio-empty-overlay .empty-chart-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.7;
}
.chart-container.compact.is-empty canvas {
    opacity: 0.15;
}
.btn-start-trading {
    pointer-events: auto;
    margin-top: 10px;
    padding: 7px 18px;
    background: var(--accent-primary);
    color: #000;
    border: none;
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    letter-spacing: 0.01em;
}
.btn-start-trading:hover { background: var(--accent-light, #34ffaa); }
.btn-start-trading:disabled { opacity: 0.5; cursor: wait; }

/* --- Stats Bar Zero State --- */
.quick-stats-bar.all-zero .quick-stat .stat-value,
.quick-stats-bar.all-zero .quick-stat .stat-value.positive,
.quick-stats-bar.all-zero .quick-stat .stat-value.negative {
    color: rgba(255,255,255,0.2) !important;
}

/* --- Mode Banner (toned down) --- */
.mode-banner.paper {
    background: rgba(232,168,38,0.04);
    color: rgba(232,168,38,0.55);
    border-bottom: 1px solid rgba(232,168,38,0.08);
    font-size: 0.65rem;
    padding: 0.25rem 2rem;
    letter-spacing: 1.5px;
}
.mode-banner.live {
    background: rgba(248,113,113,0.06);
    color: rgba(248,113,113,0.7);
    border-bottom: 1px solid rgba(248,113,113,0.12);
}

/* --- Activity Feed Idle State --- */
.activity-feed-bar.idle {
    opacity: 0.5;
}
.activity-feed-bar.idle .activity-feed-item {
    color: var(--text-muted);
}

/* --- Upgraded Empty States (shared) --- */
.empty-state-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    min-height: 160px;
}
.empty-state-box .es-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: rgba(255,255,255,0.15);
}
.empty-state-box .es-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255,255,255,0.45);
    margin-bottom: 4px;
}
.empty-state-box .es-desc {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.22);
    max-width: 280px;
    line-height: 1.5;
    margin-bottom: 16px;
}
.empty-state-box .es-cta {
    background: rgba(232,168,38,0.1);
    color: var(--accent-primary);
    border: 1px solid rgba(232,168,38,0.2);
    border-radius: 8px;
    padding: 7px 18px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.empty-state-box .es-cta:hover {
    background: rgba(232,168,38,0.18);
    border-color: rgba(232,168,38,0.35);
}

/* --- Positions Tab Empty State --- */
.positions-empty-state {
    grid-column: 1 / -1;
}

/* --- Dashboard Positions/Orders Card Empty --- */
.pos-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    min-height: 80px;
}

/* --- Collapsible Sections Upgrade --- */
.collapsible-section {
    border: 1px solid rgba(255,255,255,0.05);
    background: linear-gradient(180deg, rgba(14,14,28,0.6) 0%, rgba(10,10,20,0.8) 100%);
    border-radius: 14px;
    transition: border-color 0.2s;
}
.collapsible-section:hover {
    border-color: rgba(255,255,255,0.08);
}
.collapsible-header {
    padding: 14px 1.5rem;
}
.collapsible-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Terminal Empty States --- */
.terminal-chart-panel .terminal-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.terminal-chart-empty .es-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(96,165,250,0.06), rgba(96,165,250,0.02));
    border: 1px solid rgba(96,165,250,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: rgba(96,165,250,0.3);
}
.terminal-chart-empty .es-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.6;
}

.terminal-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    text-align: center;
    gap: 12px;
}
.terminal-welcome .tw-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(52,211,153,0.06), rgba(52,211,153,0.02));
    border: 1px solid rgba(52,211,153,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: rgba(52,211,153,0.35);
}
.terminal-welcome .tw-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.5;
    max-width: 240px;
    line-height: 1.5;
}

/* --- Agent Hub Card — don't stretch to match portfolio height --- */
.agent-hub-card {
    align-self: start;
}

/* --- Card Hover Glow Enhancement --- */
.hero-portfolio:hover,
.agent-hub-card:hover {
    border-color: rgba(232,168,38,0.12);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(232,168,38,0.04) inset;
}

/* --- Dashboard Card Positions Inner --- */
.card.full-width .pos-empty {
    min-height: 60px;
    padding: 1.5rem 1rem;
}

/* --- No Markets Empty State Icon Fix --- */
.no-markets {
    min-height: 200px;
}

/* ── Responsive: stack on small screens ─────────────────── */
@media (max-width: 860px) {
    .terminal-split {
        flex-direction: column;
    }
    .terminal-chart-panel {
        width: 100%;
        max-width: none;
        min-width: 0;
        max-height: 260px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
}

/* ============== BACKTEST TAB ============== */
.backtest-container {
    padding: 16px;
    max-width: 1200px;
}
.backtest-config {
    margin-bottom: 16px;
}
.backtest-form {
    padding: 12px 16px 16px;
}
.backtest-form .form-group {
    margin-bottom: 12px;
}
.backtest-form label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.backtest-form .form-row {
    display: flex;
    gap: 16px;
}
.backtest-form .form-row .form-group {
    flex: 1;
}
.form-select, .form-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--bg-tertiary, #1a1a2e);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    outline: none;
}
.form-select:focus, .form-input:focus {
    border-color: var(--accent-primary);
}
.strategy-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.strategy-chip {
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s;
}
.strategy-chip.active {
    background: var(--accent-primary);
    color: #000;
    border-color: var(--accent-primary);
    font-weight: 600;
}
.strategy-chip:hover:not(.active) {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}
.btn-run-backtest {
    margin-top: 8px;
    padding: 8px 24px;
    background: var(--accent-primary);
    color: #000;
    border: none;
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    letter-spacing: 0.01em;
}
.btn-run-backtest:hover {
    background: var(--accent-light, #34ffaa);
}
.btn-run-backtest:disabled {
    opacity: 0.5;
    cursor: wait;
}
.backtest-results {
    margin-bottom: 16px;
}
.backtest-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    padding: 12px 16px;
}
.backtest-metrics .bm-item {
    text-align: center;
}
.backtest-metrics .bm-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.backtest-metrics .bm-value {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}
.backtest-metrics .bm-value.positive { color: var(--positive); }
.backtest-metrics .bm-value.negative { color: var(--negative); }
.backtest-metrics .bm-value.amber { color: var(--accent-primary); }

/* Backtest loading state */
.backtest-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    gap: 12px;
}
.backtest-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(232, 168, 38, 0.15);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: backtestSpin 0.8s linear infinite;
}
@keyframes backtestSpin {
    to { transform: rotate(360deg); }
}
.backtest-loading-text {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-primary);
}
.backtest-loading-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Backtest results fade-in */
.backtest-results[data-visible="true"] {
    animation: fadeSlideUp 0.4s ease-out;
}
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Backtest warning chips */
#backtest-warnings {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px 0;
}
.backtest-warning-chip {
    font-size: 0.68rem;
    font-family: var(--font-mono);
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(232, 168, 38, 0.12);
    color: var(--accent-primary);
    border: 1px solid rgba(232, 168, 38, 0.25);
}

.backtest-chart-container {
    padding: 8px 16px 16px;
    height: 280px;
}
.backtest-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}
.backtest-breakdown {
    padding: 0 16px 16px;
}
.backtest-breakdown table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
}
.backtest-breakdown th {
    text-align: left;
    padding: 6px 8px;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
    border-bottom: 1px solid var(--border-color);
}
.backtest-breakdown td {
    padding: 6px 8px;
    font-family: var(--font-mono);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.backtest-breakdown td.positive { color: var(--positive); }
.backtest-breakdown td.negative { color: var(--negative); }
.backtest-breakdown td.amber { color: var(--accent-primary); }

/* Win rate progress bar in breakdown */
.breakdown-bar-wrap {
    position: relative;
    height: 18px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
    overflow: hidden;
    min-width: 64px;
}
.breakdown-bar-wrap span {
    position: relative;
    z-index: 1;
    font-size: 0.72rem;
    line-height: 18px;
    padding-left: 6px;
    color: var(--text-primary);
}
.breakdown-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease-out;
}
.breakdown-bar.positive { background: rgba(52, 211, 153, 0.25); }
.breakdown-bar.negative { background: rgba(248, 113, 113, 0.25); }
.breakdown-bar.amber { background: rgba(232, 168, 38, 0.25); }

/* =============================================================================
   PLATFORM PREMIUM POLISH — Phase 1
   ============================================================================= */

/* --- 1A: Card Entrance Animations (staggered) --- */
@keyframes cardEntrance {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.dashboard-grid > .card,
.dashboard-grid > .collapsible-section {
    opacity: 0;
    animation: cardEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.dashboard-grid > :nth-child(1) { animation-delay: 0.04s; }
.dashboard-grid > :nth-child(2) { animation-delay: 0.08s; }
.dashboard-grid > :nth-child(3) { animation-delay: 0.12s; }
.dashboard-grid > :nth-child(4) { animation-delay: 0.16s; }
.dashboard-grid > :nth-child(5) { animation-delay: 0.20s; }

/* --- Layout Manager --- */
.dashboard-layout-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 0 var(--card-gap);
    margin-bottom: -4px;
}
.layout-tool-btn {
    padding: 4px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.7rem;
    font-family: var(--font-body);
    font-weight: 500;
    transition: all 0.15s;
}
.layout-tool-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.layout-tool-btn.active {
    background: rgba(232,168,38,0.1);
    border-color: rgba(232,168,38,0.3);
    color: var(--accent-primary);
}
.layout-reset-btn { color: var(--text-muted); }
.layout-reset-btn:hover { color: #f87171; border-color: rgba(248,113,113,0.3); }

/* Panel collapse */
.panel-collapse-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.6rem;
    opacity: 0;
    transition: opacity 0.15s, transform 0.2s;
    z-index: 2;
    border-radius: 4px;
}
[data-panel-id] { position: relative; }
[data-panel-id]:hover .panel-collapse-btn { opacity: 0.6; }
.panel-collapse-btn:hover { opacity: 1 !important; background: rgba(255,255,255,0.05); }
.panel-collapsed .panel-collapse-btn { transform: rotate(-90deg); }
.panel-collapsed > *:not(.panel-collapse-btn):not(h2):not(.collapsible-header) { display: none !important; }
.panel-collapsed { min-height: auto !important; max-height: 48px; overflow: hidden; padding-bottom: 8px !important; }
.panel-collapsed h2,
.panel-collapsed .collapsible-header { margin-bottom: 0 !important; }

/* Drag & drop editing mode */
.layout-editing [data-panel-id] {
    cursor: grab;
    border: 1px dashed rgba(232,168,38,0.25) !important;
}
.layout-editing [data-panel-id]:active { cursor: grabbing; }
.layout-editing [data-panel-id].dragging {
    opacity: 0.4;
    border-color: var(--accent-primary) !important;
}
.layout-editing [data-panel-id].drag-over {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 20px rgba(232,168,38,0.15);
}

/* --- 1B: Tab Panel Fade Transitions --- */
.tabbed-card-panel {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
}
.tabbed-card-panel.active {
    visibility: visible;
    opacity: 1;
    height: auto;
    overflow: visible;
}

/* --- 1C: Quick Stats Bar Hover + Pulse --- */
.quick-stat {
    transition: transform 0.2s ease, background 0.2s ease;
    border-radius: 8px;
    cursor: default;
}
.quick-stat:hover {
    transform: scale(1.04);
    background: rgba(232, 168, 38, 0.04);
}

@keyframes statPulse {
    0% { color: inherit; }
    50% { color: var(--accent-primary); text-shadow: 0 0 8px rgba(232, 168, 38, 0.3); }
    100% { color: inherit; }
}
.quick-stat .stat-value.updated {
    animation: statPulse 0.6s ease-out;
}

/* --- 1D: Table Row Transitions --- */
tbody tr {
    transition: background-color 0.15s ease;
}
tbody tr:hover {
    background: rgba(232, 168, 38, 0.07);
}

/* --- 1E: Universal Focus Glow --- */
.tuner-select:focus,
.form-select:focus,
.form-input:focus,
.agents-search:focus,
.agents-filter:focus,
select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus {
    outline: none;
    border-color: rgba(232, 168, 38, 0.5);
    box-shadow: 0 0 0 3px rgba(232, 168, 38, 0.08);
}

/* --- 1F: Modal Backdrop Blur --- */
.modal-backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.6);
}

/* --- 1G: Collapsible Spring Animation --- */
.collapsible-body {
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.collapsible-chevron {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 1H: Reusable Loading Spinner Component --- */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 12px;
    grid-column: 1 / -1; /* span full width in grid containers */
    min-height: 160px;
}
.loading-spinner::before {
    content: '';
    width: 28px;
    height: 28px;
    border: 2.5px solid rgba(232, 168, 38, 0.12);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: backtestSpin 0.8s linear infinite;
}
.loading-spinner::after {
    content: attr(data-text);
    font-size: 0.78rem;
    color: var(--text-muted);
    font-family: var(--font-body);
}

/* --- 1I: Unified Toast CSS --- */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 20000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: var(--font-body);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-width: 360px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.info {
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: var(--accent-blue);
}
.toast.success {
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.25);
    color: var(--positive);
}
.toast.warning {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: var(--accent-yellow);
}
.toast.error {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: var(--negative);
}
@keyframes toastSlideIn {
    from { transform: translateY(12px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}


/* ===== COMMAND PALETTE & KEYBOARD SHORTCUTS ===== */

.command-palette-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 30000;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
}
.command-palette-overlay.open {
    display: flex;
}
.cp-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.command-palette {
    position: relative;
    width: 100%;
    max-width: 540px;
    background: var(--bg-secondary, #111128);
    border: 1px solid rgba(232, 168, 38, 0.15);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(232, 168, 38, 0.05);
    overflow: hidden;
    animation: cpSlideIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cpSlideIn {
    from { transform: translateY(-8px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.cp-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-search-icon { color: var(--text-muted); flex-shrink: 0; }
.cp-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-family: var(--font-body);
}
.cp-search input::placeholder { color: var(--text-muted); }
.cp-kbd {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    font-family: var(--font-mono);
    cursor: pointer;
    white-space: nowrap;
}
.cp-results {
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
}
.cp-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
}
.cp-result-item:hover, .cp-result-item.selected {
    background: rgba(232, 168, 38, 0.08);
}
.cp-result-cat {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    width: 70px;
    flex-shrink: 0;
}
.cp-result-label {
    flex: 1;
    font-size: 0.84rem;
    color: var(--text-primary);
}
.cp-shortcut {
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.cp-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* Shortcut Help Overlay */
.shortcut-help-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 29000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.shortcut-help-overlay.open { display: flex; }
.sh-panel {
    background: var(--bg-secondary, #111128);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 24px 28px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: cpSlideIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.sh-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.sh-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.sh-category {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-primary);
    margin: 14px 0 6px;
}
.sh-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}
.sh-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.sh-key {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* --- 1J: Empty Table Cell Class --- */
.empty-table-cell {
    text-align: center !important;
    color: var(--text-muted) !important;
    padding: 2rem 1rem !important;
    font-size: 0.82rem;
    font-family: var(--font-body) !important;
}


/* ===== DEMO DATA BANNER ===== */

.demo-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: linear-gradient(90deg, rgba(232, 168, 38, 0.12), rgba(232, 168, 38, 0.06));
    border-bottom: 1px solid rgba(232, 168, 38, 0.2);
    font-size: 0.78rem;
    color: var(--accent-primary);
}
.demo-banner svg { flex-shrink: 0; }
.demo-banner-sub {
    color: var(--text-muted);
    margin-left: 4px;
}
.demo-dismiss-btn {
    margin-left: auto;
    background: rgba(232, 168, 38, 0.15);
    border: 1px solid rgba(232, 168, 38, 0.3);
    color: var(--accent-primary);
    padding: 3px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.15s;
}
.demo-dismiss-btn:hover {
    background: rgba(232, 168, 38, 0.25);
}
.demo-offer-cta {
    background: linear-gradient(135deg, rgba(232, 168, 38, 0.15), rgba(232, 168, 38, 0.08));
    border: 1px solid rgba(232, 168, 38, 0.25);
    color: var(--accent-primary);
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 12px;
    white-space: nowrap;
}
.demo-offer-cta:hover {
    background: linear-gradient(135deg, rgba(232, 168, 38, 0.25), rgba(232, 168, 38, 0.15));
    transform: scale(1.03);
}


/* ===== CANDLESTICK CHARTS ===== */

#terminal-candlestick-container {
    border-radius: 8px;
    overflow: hidden;
}
#terminal-candlestick-container .tv-lightweight-charts {
    border-radius: 8px;
}


/* ===== P&L ATTRIBUTION ===== */

.pnl-attribution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.pnl-chart-panel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 14px;
}
.pnl-chart-panel h3 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 10px;
}
.pnl-chart-wrap {
    height: 180px;
    position: relative;
}
.pnl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    min-height: 140px;
    color: var(--text-muted);
    font-size: 0.75rem;
    opacity: 0.7;
}
.pnl-empty-state svg {
    opacity: 0.35;
    color: var(--text-muted);
}
.pnl-heatstrip-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 4px;
    height: auto;
    min-height: 100px;
    align-content: start;
}
.pnl-heatstrip-wrap .empty-table-cell {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 0 !important;
}
.heat-cell {
    border-radius: 6px;
    padding: 8px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.15s ease;
}
.heat-cell:hover { transform: scale(1.05); }
.heat-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.heat-value {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-primary);
    font-family: var(--font-mono);
}
.session-comparison-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 14px;
}
.session-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.session-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.session-value {
    font-size: 0.88rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-primary);
}
.session-value.positive { color: var(--positive); }
.session-value.negative { color: var(--negative); }


/* ===== RISK VISUALIZATION ===== */

.risk-summary-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.risk-summary-row .risk-stat {
    flex: 1;
    min-width: 120px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.risk-summary-row .risk-stat .label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.risk-summary-row .risk-stat .value {
    font-size: 0.88rem;
    font-weight: 600;
    font-family: var(--font-mono);
}
.risk-heatmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.risk-heat-cell {
    border: 1px solid;
    border-radius: 10px;
    padding: 12px;
    transition: transform 0.15s ease;
}
.risk-heat-cell:hover { transform: scale(1.03); }
.rhc-category {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    display: block;
    margin-bottom: 8px;
}
.rhc-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    padding: 2px 0;
}
.rhc-label { color: var(--text-muted); }
.rhc-net { border-top: 1px solid rgba(255,255,255,0.06); margin-top: 4px; padding-top: 4px; font-weight: 600; }

.risk-treemap {
    display: flex;
    gap: 4px;
    min-height: 40px;
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
}
.treemap-cell {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 50px;
    transition: flex-grow 0.3s ease;
}
.tm-cat {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    font-weight: 500;
}
.tm-pct {
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.risk-correlation-section {
    margin-top: 12px;
}
.risk-correlation-section h3 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 10px;
}
.corr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
    font-family: var(--font-mono);
}
.corr-table th {
    padding: 6px 4px;
    text-align: center;
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.6rem;
}
.corr-table td {
    padding: 6px 4px;
    text-align: center;
    color: var(--text-primary);
}
.corr-label {
    text-align: left !important;
    color: var(--text-secondary) !important;
    font-size: 0.62rem;
    white-space: nowrap;
}
.corr-cell {
    border-radius: 3px;
    min-width: 36px;
}


/* ===== MOBILE RESPONSIVE ===== */

.hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}
.hamburger-btn:hover { background: rgba(255,255,255,0.06); }

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--bg-secondary, #111128);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 150;
    justify-content: space-around;
    align-items: center;
    padding: 0 8px;
}
.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--text-muted);
    font-size: 0.58rem;
    cursor: pointer;
    padding: 4px 8px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    transition: color 0.15s;
}
.mobile-nav-item.active { color: var(--accent-primary); }
.mobile-nav-item svg { width: 20px; height: 20px; }

/* ============================================================
   Agent Analytics — KPIs, Charts, Portfolio Risk
   ============================================================ */
.analytics-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.analytics-kpis,
.portfolio-risk-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.kpi-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    text-align: center;
}
.analytics-charts-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
.analytics-chart-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.75rem;
}
.analytics-chart-card h4 {
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.5rem 0;
}
.analytics-chart-card canvas {
    width: 100%;
    height: 180px;
}
.analytics-section h3,
.analytics-section h4 {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.75rem 0;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
}
.agents-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}
.agents-table th {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.62rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}
.agents-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text-primary);
}
.agents-table tr:hover td {
    background: rgba(232, 168, 38, 0.04);
}
.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.leaderboard-rank {
    color: var(--accent-primary);
    font-weight: bold;
    min-width: 32px;
}
.leaderboard-name {
    flex: 1;
    color: var(--text-primary);
}
.leaderboard-stat {
    font-weight: bold;
}
.leaderboard-sort {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    padding: 0 0.75rem;
}
.leaderboard-sort select {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 2px 6px;
    font-size: 0.72rem;
}
.portfolio-risk-section {
    padding: 0.75rem;
}
.empty-table-cell {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem !important;
}

@media (max-width: 768px) {
    .analytics-charts-row { grid-template-columns: 1fr; }
    .analytics-kpis,
    .portfolio-risk-kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .hamburger-btn { display: flex; }
    .mobile-bottom-nav { display: flex; }

    .header { height: 50px; padding: 0 12px; }
    .header h1 { font-size: 1rem; }
    .header-left { gap: 8px; }

    .menu-bar {
        display: none;
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 56px;
        background: var(--bg-primary, #06060f);
        z-index: 200;
        flex-direction: column;
        padding: 16px;
        overflow-y: auto;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .menu-bar.mobile-open { display: flex; }
    .menu-item {
        padding: 14px 16px;
        font-size: var(--text-base);
        min-height: 44px;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        justify-content: flex-start;
        width: 100%;
    }

    .header-right { gap: 8px; }
    .user-name, .user-chevron { display: none; }
    .balance-sparkline-container { display: none; }

    .quick-stats-bar {
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px 12px;
    }
    .quick-stat {
        flex: 1 1 calc(33.33% - 4px);
        min-width: 0;
        padding: 6px 8px;
    }
    .quick-stat .stat-label { font-size: 0.55rem; }
    .quick-stat .stat-value { font-size: 0.75rem; }

    .activity-feed-bar { display: none; }

    .main-container {
        padding: 8px;
        padding-bottom: 72px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .full-width, .half-width { grid-column: span 1 !important; }

    .card { padding: 14px; border-radius: 10px; }

    .portfolio-metric-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .agent-tiles { grid-template-columns: 1fr; }
    .pos-grid { grid-template-columns: 1fr; }

    .terminal-split { flex-direction: column; }
    .terminal-chart-panel,
    .terminal-feed-panel {
        width: 100% !important;
        min-height: 250px;
    }

    .markets-toolbar { flex-direction: column; gap: 8px; }
    .market-cards-container { grid-template-columns: 1fr; }

    button, .btn, .tuner-btn { min-height: 44px; }

    .collapsible-header { padding: 12px 14px; min-height: 44px; }

    .pnl-attribution-grid { grid-template-columns: 1fr; }
    .session-comparison-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .risk-heatmap-grid { grid-template-columns: 1fr 1fr; }
    .risk-treemap { flex-wrap: wrap; }
    .corr-table { font-size: 0.6rem; }
    .corr-cell { min-width: 28px; padding: 4px 2px; }

    .command-palette { max-width: calc(100vw - 24px); }

    .tabbed-card-tabs { flex-wrap: wrap; gap: 4px; }

    .mode-banner { font-size: 0.7rem; padding: 6px 12px; }
    .demo-banner { font-size: 0.7rem; padding: 6px 12px; flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 480px) {
    .quick-stat { flex: 1 1 calc(50% - 4px); }
    .session-comparison-grid { grid-template-columns: repeat(2, 1fr); }
    .risk-heatmap-grid { grid-template-columns: 1fr; }
    .portfolio-metric-grid { grid-template-columns: 1fr; }
}

/* Exchange tabs + pop-out panel */
.exchange-tab:hover { background: rgba(255,255,255,0.08) !important; }
.exchange-tab.active:hover { background: rgba(232,168,38,0.2) !important; }
.exchange-tab-popout:hover { color: #e8a826 !important; border-color: rgba(232,168,38,0.3) !important; }

#exchange-popout-panel {
    animation: slideInRight 0.2s ease;
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Simulation Quality Stats */
.stat-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.stat-mini-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

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

/* === PWA Enhancements === */

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-top)) {
    .header {
        padding-top: env(safe-area-inset-top);
    }
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(56px + env(safe-area-inset-bottom));
    }
    .main-container {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

/* Standalone PWA mode adjustments */
@media (display-mode: standalone) {
    .header {
        padding-top: env(safe-area-inset-top, 0px);
    }
    /* Hide browser-oriented UI elements in standalone */
    .demo-banner a[target="_blank"]::after {
        content: none;
    }
}

/* Pull-to-refresh prevention (handled by app) */
body {
    overscroll-behavior-y: contain;
}

/* Offline state indicator */
body.offline .header::after {
    content: 'OFFLINE';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #f87171;
    font-family: var(--font-mono);
    background: rgba(248,113,113,0.1);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(248,113,113,0.2);
}

/* Touch interaction improvements */
@media (pointer: coarse) {
    /* Larger touch targets on mobile */
    .agents-subtab,
    .agent-detail-tab,
    .btn-primary,
    .btn-muted,
    select,
    input[type="text"],
    input[type="number"] {
        min-height: 44px;
    }

    /* Disable hover effects that cause sticky states on touch */
    .agent-card:hover,
    .mkt-card:hover,
    .team-card:hover,
    .preset-card:hover {
        transform: none;
    }

    /* Active state instead of hover for touch */
    .agent-card:active,
    .mkt-card:active,
    .team-card:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }
}

/* ============================================
   COMPREHENSIVE MOBILE RESPONSIVE — AGENTS
   ============================================ */

/* --- Agent Modals: full-screen on mobile --- */
@media (max-width: 768px) {
    .agent-inline-modal {
        align-items: stretch !important;
        padding: 0 !important;
    }
    .agent-modal-content {
        max-width: 100vw !important;
        min-width: 0 !important;
        width: 100vw !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: env(safe-area-inset-top, 12px) 16px calc(16px + env(safe-area-inset-bottom, 0px)) 16px !important;
    }
    .custom-agent-panel {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* --- Agent Detail Tabs: scrollable horizontal --- */
    .agent-detail-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .agent-detail-tabs::-webkit-scrollbar { display: none; }
    .agent-detail-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* --- Backtest Panel --- */
    .backtest-config-grid {
        grid-template-columns: 1fr !important;
    }
    .backtest-equity-chart {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .backtest-equity-chart canvas {
        min-width: 0 !important;
    }
    .backtest-trades-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .backtest-trades-wrap .agents-table {
        min-width: 500px;
    }

    /* --- Chat Panel --- */
    .chat-panel {
        height: calc(100vh - 280px) !important;
        min-height: 300px;
    }
    .chat-messages {
        scroll-padding-bottom: 60px;
    }
    .chat-input-row {
        position: sticky;
        bottom: 0;
        background: var(--bg-primary, #06060f);
        padding: 8px 0;
        z-index: 5;
    }
    .chat-msg {
        max-width: 92% !important;
    }

    /* --- Learning Panel --- */
    .learning-episode {
        padding: 0.75rem !important;
    }
    .learning-ep-header {
        flex-wrap: wrap;
        gap: 0.4rem !important;
    }
    .learning-ep-metrics {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
    .learning-actions {
        flex-wrap: wrap;
    }
    .learning-actions button {
        flex: 1;
        min-width: 100px;
    }

    /* --- Marketplace --- */
    .mkt-header {
        flex-direction: column !important;
        gap: 0.75rem;
        align-items: stretch !important;
    }
    .mkt-header-right {
        width: 100%;
    }
    .mkt-header-right .btn-primary {
        width: 100%;
    }
    .mkt-toolbar {
        flex-direction: column !important;
    }
    .mkt-search {
        min-width: 0 !important;
        width: 100% !important;
    }
    .mkt-filter {
        min-width: 0 !important;
        width: 100% !important;
    }
    .mkt-grid {
        grid-template-columns: 1fr !important;
    }
    .mkt-card-metrics {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.25rem !important;
    }
    .mkt-card-metric {
        padding: 0.35rem !important;
    }

    /* --- Performance Metrics Grid --- */
    .perf-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* --- Activity Feed: VISIBLE on mobile (was hidden) --- */
    .activity-feed-bar {
        display: block !important;
        position: fixed;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        z-index: 150;
        background: var(--bg-primary, #06060f);
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .activity-feed-bar.mobile-expanded {
        max-height: 50vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Tables: horizontal scroll wrapper --- */
    .agents-table-wrap,
    .backtest-trades-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -8px;
        padding: 0 8px;
    }

    /* --- Custom Agent Modal Form --- */
    .custom-params-row {
        flex-direction: column !important;
    }
    .custom-mode-toggle {
        flex-direction: column !important;
    }

    /* --- Team Cards --- */
    .team-card {
        padding: 0.75rem !important;
    }

    /* --- Terminal min-width override --- */
    .terminal-card {
        min-width: 0 !important;
    }
}

/* --- Extra small phones --- */
@media (max-width: 380px) {
    .mkt-card-metrics {
        grid-template-columns: 1fr 1fr !important;
    }
    .perf-metrics-grid {
        grid-template-columns: 1fr !important;
    }
    .agent-modal-content {
        padding: 12px 10px !important;
    }
}

/* --- Safe areas on modals (notched devices) --- */
@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .agent-inline-modal .agent-modal-content {
            padding-top: calc(12px + env(safe-area-inset-top)) !important;
            padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
            padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
            padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
        }
    }
}

/* --- iOS standalone mode: extra safe areas --- */
@media (display-mode: standalone) and (max-width: 768px) {
    .agent-modal-content {
        padding-top: calc(16px + env(safe-area-inset-top, 44px)) !important;
    }
}

/* --- Activity feed toggle button for mobile --- */
.mobile-activity-toggle {
    display: none;
    position: fixed;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-card, #0d0d18);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--accent-primary, #e8a826);
    font-size: 1.1rem;
    z-index: 160;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    cursor: pointer;
}
@media (max-width: 768px) {
    .mobile-activity-toggle {
        display: flex;
    }
}

/* --- Service Worker Update Banner --- */
.sw-update-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: linear-gradient(135deg, rgba(232,168,38,0.95), rgba(200,140,30,0.95));
    color: #0a0a0f;
    padding: 12px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-display, sans-serif);
    text-align: center;
    backdrop-filter: blur(8px);
}
.sw-update-banner.visible {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.sw-update-banner button {
    background: #0a0a0f;
    color: #e8a826;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
}

/* --- CSP-safe dashboard shell helpers --- */
.shell-initially-hidden {
    display: none;
}

.dash-color-accent { --dash-color: #e8a826; --dash-color-rgb: 232, 168, 38; --agent-color: #e8a826; --agent-dot-color: #e8a826; --sport-color: #e8a826; }
.dash-color-green { --dash-color: #34d399; --dash-color-rgb: 52, 211, 153; --agent-color: #34d399; --agent-dot-color: #34d399; --sport-color: #34d399; }
.dash-color-neon { --dash-color: #00ff88; --dash-color-rgb: 0, 255, 136; --agent-color: #00ff88; --agent-dot-color: #00ff88; --sport-color: #00ff88; }
.dash-color-blue { --dash-color: #60a5fa; --dash-color-rgb: 96, 165, 250; --agent-color: #60a5fa; --agent-dot-color: #60a5fa; --sport-color: #60a5fa; }
.dash-color-royal { --dash-color: #3b82f6; --dash-color-rgb: 59, 130, 246; --agent-color: #3b82f6; --agent-dot-color: #3b82f6; --sport-color: #3b82f6; }
.dash-color-sky { --dash-color: #38bdf8; --dash-color-rgb: 56, 189, 248; --agent-color: #38bdf8; --agent-dot-color: #38bdf8; --sport-color: #38bdf8; }
.dash-color-teal { --dash-color: #14b8a6; --dash-color-rgb: 20, 184, 166; --agent-color: #14b8a6; --agent-dot-color: #14b8a6; --sport-color: #14b8a6; }
.dash-color-pink { --dash-color: #f472b6; --dash-color-rgb: 244, 114, 182; --agent-color: #f472b6; --agent-dot-color: #f472b6; --sport-color: #f472b6; }
.dash-color-rose { --dash-color: #ec4899; --dash-color-rgb: 236, 72, 153; --agent-color: #ec4899; --agent-dot-color: #ec4899; --sport-color: #ec4899; }
.dash-color-violet { --dash-color: #a78bfa; --dash-color-rgb: 167, 139, 250; --agent-color: #a78bfa; --agent-dot-color: #a78bfa; --sport-color: #a78bfa; }
.dash-color-purple { --dash-color: #a855f7; --dash-color-rgb: 168, 85, 247; --agent-color: #a855f7; --agent-dot-color: #a855f7; --sport-color: #a855f7; }
.dash-color-orange { --dash-color: #fb923c; --dash-color-rgb: 251, 146, 60; --agent-color: #fb923c; --agent-dot-color: #fb923c; --sport-color: #fb923c; }
.dash-color-deep-orange { --dash-color: #f97316; --dash-color-rgb: 249, 115, 22; --agent-color: #f97316; --agent-dot-color: #f97316; --sport-color: #f97316; }
.dash-color-cyan { --dash-color: #22d3ee; --dash-color-rgb: 34, 211, 238; --agent-color: #22d3ee; --agent-dot-color: #22d3ee; --sport-color: #22d3ee; }
.dash-color-magenta { --dash-color: #e879f9; --dash-color-rgb: 232, 121, 249; --agent-color: #e879f9; --agent-dot-color: #e879f9; --sport-color: #e879f9; }
.dash-color-yellow { --dash-color: #facc15; --dash-color-rgb: 250, 204, 21; --agent-color: #facc15; --agent-dot-color: #facc15; --sport-color: #facc15; }
.dash-color-lime { --dash-color: #4ade80; --dash-color-rgb: 74, 222, 128; --agent-color: #4ade80; --agent-dot-color: #4ade80; --sport-color: #4ade80; }
.dash-color-danger { --dash-color: #f87171; --dash-color-rgb: 248, 113, 113; --agent-color: #f87171; --agent-dot-color: #f87171; --sport-color: #f87171; }
.dash-color-muted { --dash-color: #686884; --dash-color-rgb: 104, 104, 132; --agent-color: #686884; --agent-dot-color: #686884; --sport-color: #686884; }

.shell-grid-span-all {
    grid-column: 1 / -1;
}

.shell-section-offset {
    margin-top: 12px;
}

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

.dashboard-card-title-reset {
    margin: 0;
}

.portfolio-exchange-tabs {
    display: flex;
    gap: 3px;
}

.portfolio-exchange-tabs .exchange-tab,
.capital-exchange-tabs .cap-tab {
    flex: 1;
    border: none;
    cursor: pointer;
    background: rgba(255,255,255,0.05);
    color: #888;
}

.portfolio-exchange-tabs .exchange-tab {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.portfolio-exchange-tabs .exchange-tab.active,
.capital-exchange-tabs .cap-tab.active {
    background: rgba(232,168,38,0.15);
    color: #e8a826;
}

.exchange-tab-popout {
    padding: 3px 8px;
    border-radius: 4px;
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    color: #666;
    cursor: pointer;
    font-size: 0.7rem;
    margin-left: 2px;
}

.portfolio-range-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.orders-export-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.shell-empty-state-compact {
    min-height: 80px;
    padding: 1.5rem;
}

.shell-empty-state-condensed {
    min-height: 60px;
    padding: 1rem;
}

.empty-state-box .shell-empty-icon-compact {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.notification-action-row {
    display: flex;
    gap: 6px;
}

.notification-channel-header,
.notification-config .notification-group {
    display: grid;
    grid-template-columns: 1fr 50px 50px;
    gap: 8px;
    align-items: center;
}

.notification-channel-header {
    padding: 0 0 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 6px;
}

.notification-header-label {
    font-size: 11px;
    color: #666;
}

.notification-header-label-center,
.notification-toggle-centered {
    justify-self: center;
}

.notification-category-label {
    font-size: 13px;
}

.notification-threshold-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.sim-quality-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.capital-exchange-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.capital-exchange-tabs .cap-tab {
    padding: 6px 0;
    border-radius: 6px;
    font-size: 0.8rem;
}

.terminal-candlestick-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.liquidity-empty-cell {
    text-align: center;
    color: #555;
}

.ws-disconnect-banner {
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #b91c1c;
    color: #fff;
    text-align: center;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-display, system-ui);
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.live-markets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 8px;
}

.live-markets-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ccc;
}

.live-markets-count {
    font-size: 0.7rem;
    color: #666;
}

.live-markets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.live-market-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: default;
}

.live-market-card-top,
.live-market-card-bottom {
    display: flex;
    align-items: center;
}

.live-market-card-top {
    gap: 6px;
    margin-bottom: 4px;
}

.live-market-card-bottom {
    align-items: baseline;
    justify-content: space-between;
}

.live-market-badge {
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}

.live-market-badge.is-kalshi {
    background: rgba(0, 212, 170, 0.13);
    color: #00d4aa;
}

.live-market-badge.is-polymarket {
    background: rgba(130, 71, 229, 0.13);
    color: #8247e5;
}

.live-market-title {
    font-size: 0.72rem;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.live-market-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e8a826;
}

.live-market-volume {
    font-size: 0.65rem;
    color: #666;
}

.agent-ctrl-dot,
.agent-perf-dot {
    background: var(--agent-dot-color, var(--agent-color, #34d399));
}

.agent-perf-winrate-fill.good {
    background: var(--positive);
}

.agent-perf-winrate-fill.bad {
    background: var(--negative);
}

.agent-perf-winrate-fill.neutral {
    background: rgba(255,255,255,0.1);
}

.pct-0 { width: 0%; }
.pct-5 { width: 5%; }
.pct-10 { width: 10%; }
.pct-15 { width: 15%; }
.pct-20 { width: 20%; }
.pct-25 { width: 25%; }
.pct-30 { width: 30%; }
.pct-35 { width: 35%; }
.pct-40 { width: 40%; }
.pct-45 { width: 45%; }
.pct-50 { width: 50%; }
.pct-55 { width: 55%; }
.pct-60 { width: 60%; }
.pct-65 { width: 65%; }
.pct-70 { width: 70%; }
.pct-75 { width: 75%; }
.pct-80 { width: 80%; }
.pct-85 { width: 85%; }
.pct-90 { width: 90%; }
.pct-95 { width: 95%; }
.pct-100 { width: 100%; }

.scanner-legend-item,
.scanner-agent-dot {
    --agent-color: var(--dash-color);
}

.scanner-tile,
.pos-card {
    --sport-color: var(--dash-color);
}

.risk-heat-cell.positive.intensity-1 { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.18); }
.risk-heat-cell.positive.intensity-2 { background: rgba(52, 211, 153, 0.18); border-color: rgba(52, 211, 153, 0.22); }
.risk-heat-cell.positive.intensity-3 { background: rgba(52, 211, 153, 0.24); border-color: rgba(52, 211, 153, 0.26); }
.risk-heat-cell.positive.intensity-4 { background: rgba(52, 211, 153, 0.30); border-color: rgba(52, 211, 153, 0.30); }
.risk-heat-cell.positive.intensity-5 { background: rgba(52, 211, 153, 0.36); border-color: rgba(52, 211, 153, 0.34); }
.risk-heat-cell.negative.intensity-1 { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.18); }
.risk-heat-cell.negative.intensity-2 { background: rgba(248, 113, 113, 0.18); border-color: rgba(248, 113, 113, 0.22); }
.risk-heat-cell.negative.intensity-3 { background: rgba(248, 113, 113, 0.24); border-color: rgba(248, 113, 113, 0.26); }
.risk-heat-cell.negative.intensity-4 { background: rgba(248, 113, 113, 0.30); border-color: rgba(248, 113, 113, 0.30); }
.risk-heat-cell.negative.intensity-5 { background: rgba(248, 113, 113, 0.36); border-color: rgba(248, 113, 113, 0.34); }

.treemap-cell {
    flex-grow: 1;
    background: rgba(var(--dash-color-rgb, 104, 104, 132), 0.09);
    border-left: 3px solid var(--dash-color, #686884);
}

.share-1 { flex-grow: 1; }
.share-2 { flex-grow: 2; }
.share-3 { flex-grow: 3; }
.share-4 { flex-grow: 4; }
.share-5 { flex-grow: 5; }
.share-6 { flex-grow: 6; }
.share-7 { flex-grow: 7; }
.share-8 { flex-grow: 8; }
.share-9 { flex-grow: 9; }
.share-10 { flex-grow: 10; }

.corr-cell.positive.intensity-1 { background: rgba(52, 211, 153, 0.16); }
.corr-cell.positive.intensity-2 { background: rgba(52, 211, 153, 0.26); }
.corr-cell.positive.intensity-3 { background: rgba(52, 211, 153, 0.36); }
.corr-cell.positive.intensity-4 { background: rgba(52, 211, 153, 0.50); }
.corr-cell.positive.intensity-5 { background: rgba(52, 211, 153, 0.66); }
.corr-cell.negative.intensity-1 { background: rgba(248, 113, 113, 0.16); }
.corr-cell.negative.intensity-2 { background: rgba(248, 113, 113, 0.26); }
.corr-cell.negative.intensity-3 { background: rgba(248, 113, 113, 0.36); }
.corr-cell.negative.intensity-4 { background: rgba(248, 113, 113, 0.50); }
.corr-cell.negative.intensity-5 { background: rgba(248, 113, 113, 0.66); }
.corr-cell.neutral { background: rgba(232, 168, 38, 0.12); }

.heat-cell.positive.intensity-1 { background: rgba(52, 211, 153, 0.16); }
.heat-cell.positive.intensity-2 { background: rgba(52, 211, 153, 0.24); }
.heat-cell.positive.intensity-3 { background: rgba(52, 211, 153, 0.34); }
.heat-cell.positive.intensity-4 { background: rgba(52, 211, 153, 0.46); }
.heat-cell.positive.intensity-5 { background: rgba(52, 211, 153, 0.60); }
.heat-cell.negative.intensity-1 { background: rgba(248, 113, 113, 0.16); }
.heat-cell.negative.intensity-2 { background: rgba(248, 113, 113, 0.24); }
.heat-cell.negative.intensity-3 { background: rgba(248, 113, 113, 0.34); }
.heat-cell.negative.intensity-4 { background: rgba(248, 113, 113, 0.46); }
.heat-cell.negative.intensity-5 { background: rgba(248, 113, 113, 0.60); }

.backtest-empty-note {
    padding: 12px 16px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.exchange-popout-panel {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 380px;
    max-height: calc(100vh - 100px);
    background: #0f0f14;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    z-index: 1000;
    overflow-y: auto;
    padding: 16px;
}

.exchange-popout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.exchange-popout-title {
    margin: 0;
    font-size: 1rem;
}

.exchange-popout-panel.is-kalshi .exchange-popout-title {
    color: #00d4aa;
}

.exchange-popout-panel.is-polymarket .exchange-popout-title {
    color: #8247e5;
}

.exchange-popout-close {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 1.2rem;
}

.exchange-popout-close:hover {
    color: var(--text-primary);
}

.exchange-popout-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.exchange-popout-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.exchange-popout-metric {
    font-size: 0.75rem;
    color: #888;
}

.exchange-popout-metric span {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.exchange-popout-note {
    font-size: 0.7rem;
    color: #555;
    margin-top: 12px;
    text-align: center;
}

/* Custom Dropdown */
.cd-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 32px 8px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--text-secondary, #8888aa);
    font-family: var(--font-body, 'Syne', system-ui, sans-serif);
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    position: relative;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23686884' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    min-height: 34px;
    line-height: 1.2;
}

.cd-trigger:hover {
    border-color: rgba(232,168,38,0.3);
    background-color: rgba(255,255,255,0.05);
}

.cd-trigger:focus,
.cd-trigger.cd-open {
    border-color: rgba(232,168,38,0.5);
    box-shadow: 0 0 0 3px rgba(232,168,38,0.08);
}

.cd-trigger.cd-open {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l4-4 4 4' stroke='%23e8a826' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cd-trigger.cd-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.cd-trigger .cd-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-trigger .cd-placeholder {
    color: var(--text-muted, #555570);
}

.cd-trigger.cd-sm {
    padding: 5px 26px 5px 10px;
    font-size: 0.75rem;
    border-radius: 6px;
    min-height: 28px;
}

.cd-trigger.cd-xs {
    padding: 3px 22px 3px 8px;
    font-size: 0.7rem;
    border-radius: 5px;
    min-height: 24px;
}

.cd-panel {
    position: fixed;
    z-index: 10000;
    min-width: 160px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-secondary, #0a0a1a);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 2px solid var(--accent-primary, #e8a826);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
    padding: 4px 0;
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.cd-panel.cd-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.cd-panel.cd-above {
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 2px solid var(--accent-primary, #e8a826);
    transform: translateY(4px) scale(0.98);
}

.cd-panel.cd-above.cd-visible {
    transform: translateY(0) scale(1);
}

.cd-panel::-webkit-scrollbar {
    width: 5px;
}

.cd-panel::-webkit-scrollbar-track {
    background: transparent;
}

.cd-panel::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
}

.cd-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.15);
}

.cd-search {
    display: block;
    width: calc(100% - 12px);
    margin: 4px 6px 6px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    color: var(--text-primary, #e8e8f0);
    font-size: 0.72rem;
    font-family: var(--font-body, 'Syne', system-ui, sans-serif);
    outline: none;
    transition: border-color 0.15s;
}

.cd-search:focus {
    border-color: rgba(232,168,38,0.3);
}

.cd-search::placeholder {
    color: var(--text-muted, #555570);
}

.cd-option {
    display: flex;
    align-items: center;
    padding: 7px 14px 7px 12px;
    font-size: 0.78rem;
    font-family: var(--font-body, 'Syne', system-ui, sans-serif);
    color: var(--text-primary, #e8e8f0);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

.cd-option:hover,
.cd-option.cd-focused {
    background: rgba(232,168,38,0.1);
    color: var(--accent-primary, #e8a826);
}

.cd-option.cd-selected {
    color: var(--accent-primary, #e8a826);
    font-weight: 600;
}

.cd-option.cd-selected::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-primary, #e8a826);
    margin-right: 8px;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(232,168,38,0.4);
}

.cd-option.cd-hidden,
.cd-empty.cd-hidden {
    display: none;
}

.cd-empty {
    padding: 12px 14px;
    font-size: 0.72rem;
    color: var(--text-muted, #555570);
    text-align: center;
    font-style: italic;
}

.cd-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 4px 8px;
}

.offline-toast {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(248,113,113,0.9);
    color: #fff;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-size: 0.8rem;
    z-index: 99999;
    backdrop-filter: blur(8px);
    font-family: system-ui;
}

.ios-install-hint {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(232,168,38,0.95);
    color: #0a0a0f;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    z-index: 99999;
    text-align: center;
    max-width: 90vw;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    cursor: pointer;
}

.ios-install-hint-icon {
    vertical-align: -2px;
}