.backtest-panel {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    padding: 16px;
    margin: 0 15px 16px;
}

.bt-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: flex-end;
}

.bt-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bt-field label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bt-field input,
.bt-field select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    min-width: 120px;
}

.bt-actions { margin-left: auto; }

.bt-disclaimer {
    font-size: 11px;
    color: var(--text-muted);
    margin: 12px 0 0;
}

.bt-status { font-size: 12px; margin-top: 12px; min-height: 16px; }
.bt-status.running { color: var(--accent); }
.bt-status.error { color: var(--danger); }
.bt-status.warning { color: var(--warning); }

.bt-results { margin-top: 16px; }

.bt-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.bt-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.bt-metric-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.bt-metric-val { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bt-metric-val.pos { color: var(--success); }
.bt-metric-val.neg { color: var(--danger); }

.bt-chart-wrap {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 12px;
    /* Fixed height so the equity chart can't grow huge on wide screens; the
       canvas fills this box (maintainAspectRatio:false in the chart config). */
    height: 340px;
    position: relative;
}

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

#btn-backtest-toggle.active { background: var(--accent); color: #fff; }

/* ---- holdings / trade log ---- */
.bt-holdings { margin-top: 16px; }

.bt-holdings-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.bt-legend { font-weight: 400; text-transform: none; letter-spacing: 0; }

.bt-holdings-scroll {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--panel-bg);
}

.bt-holdings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.bt-holdings-table th {
    position: sticky;
    top: 0;
    background: var(--subtle-bg);
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-muted);
}

.bt-holdings-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}

.bt-h-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bt-h-ret { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.bt-h-ret.pos { color: var(--success); }
.bt-h-ret.neg { color: var(--danger); }
.bt-h-held, .bt-h-sold { line-height: 1.9; }

.bt-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    margin: 1px 2px 1px 0;
    background: var(--hover-bg);
    color: var(--text-secondary);
}
.bt-tag.buy { background: var(--success-bg); color: var(--success); }
.bt-tag.hold { background: var(--hover-bg); color: var(--text-secondary); }
.bt-tag.sell { background: var(--danger-bg); color: var(--danger); }

/* Ticker chips are anchors to the profile — keep the chip look, drop link styling. */
a.bt-tag.symbol-link {
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}
a.bt-tag.symbol-link:hover { filter: brightness(0.95); }

/* ---- benchmark composition (collapsed by default) ---- */
.bt-benchmark-holdings-wrap { margin-top: 12px; }

.bt-benchmark-holdings > summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.bt-benchmark-holdings[open] > summary { margin-bottom: 8px; }