:root {
    --bg: #0d1117;
    --bg2: #161b22;
    --bg3: #21262d;
    --border: #30363d;
    --text: #e6edf3;
    --text-dim: #8b949e;
    --green: #1d9e75;
    --green-bg: rgba(29, 158, 117, 0.15);
    --red: #e24b4a;
    --red-bg: rgba(226, 75, 74, 0.15);
    --blue: #58a6ff;
    --purple: #534ab7;
    --amber: #ba7517;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

/* ── Header ── */
header {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}
header h1 { font-size: 1.3rem; color: var(--blue); }

#status-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.badge {
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}
.badge.sim  { background: var(--blue); color: #fff; }
.badge.real { background: var(--red);  color: #fff; }

/* ── Layout ── */
main { max-width: 1280px; margin: 0 auto; padding: 1.5rem; }

/* ── KPI Grid ── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}
.kpi-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}
.kpi-card.green  { border-color: var(--green); }
.kpi-card.red    { border-color: var(--red); }
.kpi-card.purple { border-color: var(--purple); }
.kpi-card.amber  { border-color: var(--amber); }

.kpi-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
}
.kpi-value {
    display: block;
    font-size: 1.35rem;
    font-weight: bold;
}
.kpi-value.positive { color: var(--green); }
.kpi-value.negative { color: var(--red); }

/* ── Panels ── */
.panel {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1.2rem;
}
.panel h2 {
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
.section-sub {
    font-size: 0.72rem;
    color: var(--text-dim);
    font-weight: normal;
}

/* ── Tables ── */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
thead th {
    background: var(--bg3);
    color: var(--text-dim);
    text-align: left;
    padding: 0.5rem 0.7rem;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border);
}
tbody td {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--border);
}
tbody tr:hover { background: var(--bg3); }
tfoot td {
    padding: 0.5rem 0.7rem;
    border-top: 2px solid var(--border);
    font-weight: bold;
}

.side-buy  { color: var(--green); font-weight: bold; }
.side-sell { color: var(--red);   font-weight: bold; }
.pnl-pos   { color: var(--green); }
.pnl-neg   { color: var(--red); }

.empty-msg {
    color: var(--text-dim);
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

/* ── Percentage Bar ── */
.pct-bar {
    height: 4px;
    background: var(--bg3);
    border-radius: 2px;
    margin-top: 3px;
    overflow: hidden;
}
.pct-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ── Filters ── */
.filters { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
.filters select {
    background: var(--bg3);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
}

/* ── Pagination ── */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 0.8rem;
    font-size: 0.85rem;
}
.pagination button {
    background: var(--bg3);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font-size: 0.8rem;
}
.pagination button:hover:not(:disabled) { background: var(--border); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
#page-info { color: var(--text-dim); }

/* ── Chart Tabs ── */
.chart-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}
.chart-tab {
    background: var(--bg3);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
}
.chart-tab:hover  { background: var(--border); color: var(--text); }
.chart-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ── Candlestick Chart Container ── */
.candle-chart {
    width: 100%;
    height: 420px;
    border-radius: 4px;
    overflow: hidden;
    background: #161b22;
}

/* ── Chart Legend ── */
.chart-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.6rem;
    font-size: 0.75rem;
    color: var(--text-dim);
}
.chart-info-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Signal Badges ── */
.signal-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: bold;
    white-space: nowrap;
}
.signal-badge.strong-buy  { background: rgba(29,158,117,0.25); color: #1d9e75; border: 1px solid #1d9e75; }
.signal-badge.buy         { background: rgba(29,158,117,0.12); color: #4ecfa0; border: 1px solid #4ecfa0; }
.signal-badge.neutral     { background: rgba(139,148,158,0.15); color: #8b949e; border: 1px solid #30363d; }
.signal-badge.sell        { background: rgba(226,75,74,0.12); color: #e24b4a; border: 1px solid #e24b4a; }
.signal-badge.strong-sell { background: rgba(226,75,74,0.25); color: #e24b4a; border: 1px solid #e24b4a; }

/* ── Ranking Grid ── */
.ranking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.7rem;
}
.rank-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.8rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rank-left {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.rank-num {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--text-dim);
    min-width: 1.5rem;
}
.rank-name {
    font-weight: bold;
    font-size: 0.9rem;
}
.rank-trend {
    font-size: 0.72rem;
    color: var(--text-dim);
    margin-top: 0.1rem;
}

/* ── Charts ── */
canvas { width: 100% !important; }

/* ── Footer ── */
footer {
    text-align: center;
    padding: 1rem;
    color: var(--text-dim);
    font-size: 0.75rem;
    border-top: 1px solid var(--border);
    margin-top: 2rem;
}

/* ── Asset Table ── */
.asset-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.asset-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
}
.asset-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}
.asset-ticker {
    font-size: 0.72rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pct-label {
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-bottom: 3px;
}
.text-dim { color: var(--text-dim); font-size: 0.82rem; }
.change-pos { color: var(--green); font-size: 0.78rem; }
.change-neg { color: var(--red);   font-size: 0.78rem; }

/* ── Fondeos / Capital Section ── */
.fondeos-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.fondeo-kpi {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.fondeo-kpi-label {
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}
.fondeo-kpi-val {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
}
.fondeo-kpi-sub {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dim);
    margin-top: 2px;
}
/* Highlight card for bot P&L */
.fondeo-kpi-highlight {
    border-color: var(--green);
    background: linear-gradient(135deg, var(--bg3) 60%, rgba(29,158,117,0.08));
}
/* Movement type badges */
.mov-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.mov-deposit    { background: rgba(29,158,117,0.15); color: var(--green); }
.mov-withdrawal { background: rgba(226,75,74,0.15);  color: var(--red); }
.fondeos-subtitle {
    font-size: 0.85rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
    margin-top: 0.2rem;
}
.fondeo-total-row td {
    border-top: 2px solid var(--border);
    padding-top: 0.5rem;
    color: var(--text);
}
.fondeo-add-row {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    align-items: center;
}
.fondeo-add-row input {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85rem;
    outline: none;
}
.fondeo-add-row input:focus { border-color: var(--blue); }
.fondeo-add-row select {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
    width: 130px;
}
.fondeo-add-row select:focus { border-color: var(--blue); }
.fondeo-add-row input[type="date"] { width: 140px; }
.fondeo-add-row input[type="number"] { width: 140px; }
.fondeo-add-row input[type="text"] { flex: 1; min-width: 160px; }
.fondeo-add-row button {
    background: var(--green);
    color: #fff;
    border: none;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.fondeo-add-row button:hover { opacity: 0.85; }
.fondeo-add-row button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Investments Section ── */
.inv-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}
.inv-kpi {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.inv-kpi-highlight {
    border-color: var(--blue);
    background: linear-gradient(135deg, var(--bg3) 60%, rgba(88,166,255,0.07));
}
.inv-kpi-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}
.inv-kpi-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.inv-row-open  { background: rgba(88,166,255,0.03); }
.inv-row-closed { opacity: 0.82; }
.status-open   { color: var(--blue); font-size: 0.78rem; font-weight: 600; }
.status-closed { color: var(--text-dim); font-size: 0.78rem; }
.sim-tag {
    display: inline-block;
    background: var(--amber);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
    letter-spacing: 0.04em;
}
/* Raw orders collapsible */
.raw-orders-details {
    margin-top: 1.2rem;
    border-top: 1px solid var(--border);
    padding-top: 0.8rem;
}
.raw-orders-details summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-dim);
    user-select: none;
    outline: none;
}
.raw-orders-details summary:hover { color: var(--text); }
.raw-orders-details[open] summary { margin-bottom: 0.5rem; }

/* ── KPI sub-label ── */
.kpi-sub {
    display: block;
    font-size: 0.68rem;
    color: var(--text-dim);
    margin-top: 0.2rem;
}

/* ── KPI grid: 5 cols on wide, keep 4 on medium ── */
.kpi-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Performance Breakdown ── */
.perf-alert {
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    line-height: 1.6;
}
.perf-alert-warning {
    background: rgba(186, 117, 23, 0.15);
    border: 1px solid var(--amber);
    color: #f0a830;
}
.perf-alert-ok {
    background: var(--green-bg);
    border: 1px solid var(--green);
    color: #4ecfa0;
}
.perf-alert-danger {
    background: var(--red-bg);
    border: 1px solid var(--red);
    color: #f07070;
}

.perf-breakdown-grid {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.perf-block {
    flex: 1;
    min-width: 160px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: border-color 0.3s;
}
.perf-block.perf-pos     { border-color: var(--green); }
.perf-block.perf-neg     { border-color: var(--red); }
.perf-block.perf-neutral { border-color: var(--border); }
.perf-block.perf-drift   { opacity: 0.75; }

.perf-arrow {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    color: var(--text-dim);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.perf-block-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
}
.perf-block-value {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.1rem;
}
.perf-block-pct {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.perf-block-desc {
    font-size: 0.72rem;
    color: var(--text-dim);
    line-height: 1.4;
}

/* Market context chips */
.perf-market-ctx {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
}
.perf-ctx-label {
    color: var(--text-dim);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.perf-ctx-chip {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0.2rem 0.65rem;
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .fondeos-summary { grid-template-columns: repeat(3, 1fr); }
    .inv-summary { grid-template-columns: repeat(3, 1fr); }
    header { flex-direction: column; gap: 0.5rem; text-align: center; }
    main { padding: 0.8rem; }
    table { font-size: 0.75rem; }
    .candle-chart { height: 280px; }
}
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .kpi-value { font-size: 1rem; }
}

/* ── Trade Learner section ── */
.learner-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1rem;
    color: var(--text-dim);
    gap: 0.6rem;
}
.learner-empty-icon { font-size: 2.5rem; }
.learner-empty p { font-size: 0.9rem; text-align: center; max-width: 420px; margin: 0; }

.learner-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.learner-kpi {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.7rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 130px;
}
.learner-kpi-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}
.learner-kpi-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

.learner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-bottom: 1.4rem;
}
.learner-col-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 0.7rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.learner-pattern-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.learner-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.learner-card-header {
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.learner-card-stats {
    display: flex;
    gap: 0.8rem;
    font-size: 0.78rem;
    flex-wrap: wrap;
}
.learner-badge {
    display: inline-block;
    font-size: 0.68rem;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.04em;
    width: fit-content;
}
.learner-badge.preferred  { background: rgba(29,158,117,0.18); color: var(--green); border: 1px solid var(--green); }
.learner-badge.penalized  { background: rgba(226,75,74,0.18);  color: var(--red);   border: 1px solid var(--red);   }
.learner-badge.neutral    { background: var(--bg2);             color: var(--text-dim); border: 1px solid var(--border); }

/* ── Position protection badges ── */
.prot-none      { color: var(--text-dim); font-size: 0.75rem; }
.prot-breakeven { color: var(--green);    font-size: 0.8rem; font-weight: 600; cursor: default; }
.prot-trailing  { color: #58a6ff;         font-size: 0.8rem; font-weight: 600; cursor: default; }
.sl-dynamic     { color: #58a6ff; }

/* ── Responsive learner ── */
@media (max-width: 700px) {
    .learner-grid { grid-template-columns: 1fr; }
    .learner-stats { flex-direction: column; }
}