:root {
    --bg-color: #0b0e11;
    --card-bg: #1e2329;
    --text-color: #eaecef;
    --text-muted: #848e9c;
    --accent-color: #f0b90b;
    --accent-hover: #d4a30a;
    --success-color: #2ebd85;
    --danger-color: #f6465d;
    --border-color: #2b3139;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    background-color: var(--card-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
}

.sidebar h1 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 32px;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: var(--text-color);
    text-decoration: none;
    margin-bottom: 4px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.2s;
}

.nav-link:hover {
    background-color: #2b3139;
}

.nav-link.active {
    background-color: rgba(240, 185, 11, 0.1);
    color: var(--accent-color);
}

.main-content {
    flex: 1;
    padding: 32px 48px;
    overflow-y: auto;
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    transition: transform 0.2s;
}

.card:hover {
    border-color: #474d57;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.8125rem;
    text-transform: uppercase;
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.table td {
    padding: 16px;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color);
}

.btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    transition: opacity 0.2s;
}

.btn:hover {
    opacity: 0.9;
}

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

.btn-success {
    background-color: var(--success-color);
    color: #fff;
}

.btn-danger {
    background-color: var(--danger-color);
    color: #fff;
}

.badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-success {
    background-color: rgba(46, 189, 133, 0.15);
    color: var(--success-color);
}

.badge-danger {
    background-color: rgba(246, 70, 93, 0.15);
    color: var(--danger-color);
}

.badge-gold {
    background-color: rgba(240, 185, 11, 0.15);
    color: var(--accent-color);
}

.msg-card {
    padding: 12px 20px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-left: 4px solid var(--danger-color);
}

.msg-card.success {
    border-left-color: var(--success-color);
}

.msg-card.danger {
    border-left-color: var(--danger-color);
}

.bot-card {
    border-left: 4px solid var(--danger-color);
}

.bot-card.active {
    border-left-color: var(--success-color);
}

.status-indicator {
    background-color: var(--danger-color);
    box-shadow: 0 0 12px var(--danger-color);
}

.status-indicator.active {
    background-color: var(--success-color);
    box-shadow: 0 0 12px var(--success-color);
}

.status-text {
    color: var(--danger-color);
}

.status-text.active {
    color: var(--success-color);
}

.pnl-text {
    color: var(--danger-color);
}

.pnl-text.positive {
    color: var(--success-color);
}

.risk-text {
    color: var(--success-color);
}

.risk-text.high {
    color: var(--danger-color);
}

@media (max-width: 1024px) {
    body {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 16px 12px;
    }

    .sidebar h1 {
        font-size: 1.1rem;
        margin-bottom: 18px;
    }

    .sidebar nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nav-link {
        flex: 1 1 140px;
        min-width: 140px;
    }

    .main-content {
        padding: 24px 20px;
    }
}

@media (max-width: 700px) {
    .main-content {
        padding: 16px 12px;
    }

    .card {
        padding: 18px;
        border-radius: 12px;
    }

    .table th,
    .table td {
        padding: 12px;
        font-size: 0.78rem;
    }
}


/* Reliability-aware dashboard UI */
.dashboard-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:20px; }
.dashboard-heading-group { display:flex; align-items:flex-end; gap:28px; flex-wrap:wrap; }
.dashboard-heading-group h2 { margin:0; font-size:1.75rem; }
.dashboard-heading-group p { margin:6px 0 0; color:var(--text-muted); font-size:.875rem; }
.broker-selector-wrap label { display:block; margin-bottom:6px; font-size:.65rem; color:var(--text-muted); text-transform:uppercase; font-weight:800; letter-spacing:1px; }
.broker-selector { min-width:280px; max-width:100%; background:#171b20; border:1px solid var(--border-color); color:var(--text-color); padding:10px 14px; border-radius:10px; font-weight:700; }
.environment-badge { display:flex; align-items:center; gap:8px; border-radius:999px; padding:9px 13px; font-size:.7rem; font-weight:800; letter-spacing:.8px; }
.environment-badge.live { border:1px solid rgba(246,70,93,.55); background:rgba(246,70,93,.12); color:#ff8292; }
.environment-badge.testnet { border:1px solid rgba(240,185,11,.55); background:rgba(240,185,11,.1); color:var(--accent-color); }
.environment-dot { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; }
.system-health { display:flex; justify-content:space-between; gap:24px; align-items:center; border:1px solid; border-radius:14px; padding:18px 20px; margin-bottom:26px; }
.system-health.healthy { border-color:rgba(46,189,133,.35); background:rgba(46,189,133,.07); }
.system-health.blocked { border-color:rgba(246,70,93,.4); background:rgba(246,70,93,.07); }
.health-summary { min-width:250px; }
.health-title { font-weight:850; letter-spacing:1px; font-size:.8rem; }
.health-message { color:var(--text-muted); margin-top:5px; font-size:.78rem; line-height:1.45; }
.health-grid { flex:1; display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:10px; }
.health-item { background:rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.05); border-radius:10px; padding:10px 12px; }
.health-item span { display:block; color:var(--text-muted); text-transform:uppercase; font-size:.59rem; font-weight:700; letter-spacing:.7px; margin-bottom:5px; }
.health-item strong { font-size:.7rem; }
.health-item .ok,.verified-text,.profit-text { color:var(--success-color); }
.health-item .bad,.warning-text,.loss-text,.live-text { color:var(--danger-color); }
.health-item .muted { color:var(--text-muted); }
.testnet-text { color:var(--accent-color); }
.engine-control-btn { min-width:140px; }
.engine-control-btn:disabled { cursor:not-allowed; opacity:.42; }
.section-heading-row { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin:30px 0 16px; }
.section-heading-row h3 { margin:0; }
.section-heading-row p { margin:6px 0 0; color:var(--text-muted); font-size:.78rem; }
.section-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.text-action { color:var(--accent-color); font-size:.75rem; text-decoration:none; font-weight:650; }
.compact-btn { padding:6px 11px; font-size:.72rem; }
.execution-table-card { padding:0; overflow:hidden; margin-bottom:40px; }
.table-responsive { width:100%; overflow-x:auto; }
.execution-table { min-width:1100px; margin:0; }
.execution-table thead { position:sticky; top:0; background:#1e2329; z-index:1; }
.execution-table td,.execution-table th { white-space:nowrap; }
.asset-cell small { display:block; color:var(--text-muted); font-size:.64rem; margin-top:3px; }
.mono-cell { font-family:'DM Mono','Courier New',monospace; font-size:.78rem!important; }
.env-pill,.trade-status { display:inline-flex; border-radius:999px; padding:4px 8px; font-size:.62rem; font-weight:800; letter-spacing:.35px; border:1px solid; }
.env-pill.live { color:#ff8292; border-color:rgba(246,70,93,.35); background:rgba(246,70,93,.08); }
.env-pill.testnet { color:var(--accent-color); border-color:rgba(240,185,11,.35); background:rgba(240,185,11,.08); }
.status-open { color:var(--success-color); border-color:rgba(46,189,133,.35); background:rgba(46,189,133,.1); }
.status-pending,.status-partial { color:var(--accent-color); border-color:rgba(240,185,11,.35); background:rgba(240,185,11,.09); }
.status-closing { color:#7bb9ff; border-color:rgba(123,185,255,.35); background:rgba(123,185,255,.08); }
.status-failed,.status-error,.status-cancelled { color:var(--danger-color); border-color:rgba(246,70,93,.35); background:rgba(246,70,93,.09); }
.muted-note { color:var(--text-muted); font-size:.7rem; }
.empty-state { text-align:center!important; padding:46px!important; color:var(--text-muted); }
.empty-state div { color:var(--success-color); font-size:1.5rem; margin-bottom:8px; }
.confirm-modal { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(2,4,7,.78); backdrop-filter:blur(5px); }
.confirm-modal.visible { display:flex; }
.confirm-modal-panel { width:min(560px,100%); background:#171b20; border:1px solid #343b45; border-radius:16px; padding:26px; box-shadow:0 24px 80px rgba(0,0,0,.5); }
.modal-eyebrow { color:var(--accent-color); font-size:.65rem; font-weight:850; letter-spacing:1.2px; }
.confirm-modal-panel h3 { margin:8px 0; font-size:1.35rem; }
.confirm-modal-panel>p { color:var(--text-muted); line-height:1.55; font-size:.85rem; }
.start-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0; }
.start-summary>div { border:1px solid var(--border-color); background:rgba(0,0,0,.15); border-radius:10px; padding:11px; }
.start-summary span { display:block; color:var(--text-muted); font-size:.62rem; text-transform:uppercase; margin-bottom:4px; }
.start-summary strong { font-size:.78rem; }
.live-warning { background:rgba(246,70,93,.1); color:#ff98a5; border:1px solid rgba(246,70,93,.25); padding:10px 12px; border-radius:9px; font-size:.78rem; font-weight:700; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.nav-section-label { color:#66707d; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; padding:16px 16px 7px; }
.nav-count { margin-left:auto; background:var(--danger-color); color:white; border-radius:999px; padding:2px 6px; font-size:.62rem; }
.advanced-nav { margin-top:6px; }
.advanced-nav summary { cursor:pointer; list-style:none; padding:11px 16px; color:var(--text-muted); font-size:.82rem; font-weight:650; }
.advanced-nav summary::-webkit-details-marker { display:none; }
.advanced-nav summary:after { content:'▾'; float:right; }
.advanced-nav:not([open]) summary:after { content:'▸'; }
.nav-link.sub-link { margin-left:10px; font-size:.8rem; padding:9px 13px; }
.logout-wrap { margin-top:auto; padding-top:16px; border-top:1px solid var(--border-color); }
.logout-wrap form { margin:0; }
.logout-button { background:none; border:none; cursor:pointer; color:var(--text-muted); text-align:left; width:100%; }

@media(max-width:1100px){.system-health{align-items:flex-start;flex-direction:column}.health-grid{width:100%;grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.dashboard-header,.section-heading-row{flex-direction:column;align-items:stretch}.broker-selector{width:100%;min-width:0}.environment-badge{align-self:flex-start}.health-grid{grid-template-columns:1fr}.start-summary{grid-template-columns:1fr}.modal-actions{flex-direction:column-reverse}.modal-actions .btn{width:100%}}

/* Strategy comparison: lightweight CSS-only dashboard panel. */
.strategy-compare-card { margin-bottom: 32px; padding: 22px; }
.strategy-compare-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; margin-bottom:16px; }
.strategy-compare-header h3 { margin:4px 0 6px; }
.strategy-compare-header p { margin:0; max-width:760px; color:var(--text-muted); font-size:.82rem; }
.strategy-compare-note { color:var(--text-muted); font-size:.7rem; max-width:260px; text-align:right; }
.strategy-compare-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.strategy-scorecard { border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:16px; background:rgba(255,255,255,.025); }
.strategy-scorecard.v2 { border-color:rgba(240,185,11,.25); background:linear-gradient(135deg,rgba(240,185,11,.045),rgba(255,255,255,.018)); }
.strategy-scorecard-title { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:14px; }
.strategy-scorecard-title strong { font-size:1.05rem; }
.strategy-scorecard-title span { color:var(--text-muted); font-size:.68rem; }
.strategy-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.strategy-metric-grid > div { min-width:0; padding:10px; border-radius:9px; background:rgba(0,0,0,.16); }
.strategy-metric-grid span { display:block; color:var(--text-muted); font-size:.62rem; text-transform:uppercase; letter-spacing:.55px; margin-bottom:4px; }
.strategy-metric-grid strong { display:block; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.metric-positive { color:var(--success-color)!important; }
.metric-negative { color:var(--danger-color)!important; }
.strategy-regimes { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:12px; }
.regime-label { color:var(--text-muted); font-size:.63rem; margin-right:3px; }
.regime-chip { padding:5px 7px; border-radius:999px; background:rgba(255,255,255,.045); color:#d9dee5; font-size:.62rem; }
.regime-chip.muted { color:var(--text-muted); }
.strategy-sample-note { margin-top:10px; color:var(--text-muted); font-size:.6rem; }
@media (max-width: 900px) { .strategy-compare-grid { grid-template-columns:1fr; } .strategy-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .strategy-compare-note { text-align:left; } }
@media (max-width: 420px) { .strategy-metric-grid { grid-template-columns:1fr 1fr; } .strategy-compare-card { padding:14px; } }