* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #131722;
  color: #d1d4dc;
}

/* ---------- chart page ---------- */
.chart-page { display: flex; flex-direction: column; overflow: hidden; }

.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px;
  background: #1e222d;
  border-bottom: 1px solid #2a2e39;
}
.brand { font-weight: 600; color: #fff; margin-right: 6px; }

.toolbar select {
  background: #2a2e39; color: #d1d4dc;
  border: 1px solid #363a45; border-radius: 4px;
  padding: 6px 8px; font-size: 13px; max-width: 260px;
}

.tf-group { display: flex; gap: 2px; }
.tf-group button {
  background: transparent; color: #b2b5be;
  border: 0; border-radius: 4px;
  padding: 6px 9px; font-size: 13px; cursor: pointer;
}
.tf-group button:hover { background: #2a2e39; color: #fff; }
.tf-group button.active { background: #2962ff; color: #fff; }

.status { margin-left: auto; font-size: 12px; color: #787b86; }

.legend {
  position: absolute; top: 58px; left: 14px; z-index: 3;
  font-size: 13px; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.legend .sym { color: #fff; font-weight: 600; margin-right: 10px; }
.legend .up { color: #26a69a; }
.legend .down { color: #ef5350; }
.legend span { margin-right: 8px; }

.legend .ind { margin-top: 3px; }

#chart { flex: 1; min-height: 0; position: relative; }

.tool-btn {
  background: #2a2e39; color: #d1d4dc; border: 1px solid #363a45; border-radius: 4px;
  padding: 6px 10px; font-size: 13px; cursor: pointer;
}
.tool-btn.active, .tool-btn:hover { background: #2962ff; border-color: #2962ff; color: #fff; }

/* ---------- backtest panel ---------- */
.bt-panel {
  display: none; flex-direction: column;
  height: 38vh; min-height: 220px;
  background: #1e222d; border-top: 1px solid #2a2e39; font-size: 13px;
}
.bt-panel.open { display: flex; }
.bt-head { padding: 8px 12px; border-bottom: 1px solid #2a2e39; }
.bt-params { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; align-items: center; }
.bt-params label { color: #b2b5be; }
.bt-params input {
  width: 64px; margin-left: 4px; background: #131722; color: #d1d4dc;
  border: 1px solid #363a45; border-radius: 3px; padding: 3px 5px;
}
.bt-params button {
  background: #2a2e39; color: #d1d4dc; border: 1px solid #363a45; border-radius: 4px;
  padding: 4px 12px; cursor: pointer;
}
.bt-params button.run { background: #26a69a; border-color: #26a69a; color: #fff; font-weight: 600; }
.bt-summary { padding: 6px 12px; color: #b2b5be; }
.bt-table { flex: 1; overflow: auto; }
.bt-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bt-table th, .bt-table td { padding: 5px 10px; text-align: right; border-bottom: 1px solid #2a2e39; white-space: nowrap; }
.bt-table th:first-child, .bt-table td:first-child { text-align: left; }
.bt-table th { position: sticky; top: 0; background: #1e222d; color: #787b86; font-weight: 500; }
.bt-table tbody tr { cursor: pointer; }
.bt-table tbody tr:hover { background: #2a2e39; }
.up { color: #26a69a; }
.down { color: #ef5350; }

@media (max-width: 640px) {
  .toolbar { gap: 6px; padding: 6px; }
  .brand { display: none; }
  .toolbar select { max-width: 150px; }
  .tf-group button { padding: 5px 6px; }
  .legend { top: 96px; font-size: 12px; }
}