.standalone-chart-shell {
  position: relative;
  width: 100%;
  margin-top: 22px;
}

.standalone-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 360px;
  overflow: visible;
  touch-action: pan-y;
}

.standalone-chart text {
  fill: rgba(10, 10, 10, .58);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.standalone-chart .grid-line {
  stroke: rgba(10, 10, 10, .12);
  stroke-width: 1;
}

.standalone-chart .axis-line {
  stroke: rgba(10, 10, 10, .2);
  stroke-width: 1;
}

.standalone-chart .series-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.standalone-chart .cursor-line {
  stroke: rgba(10, 10, 10, .45);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.standalone-chart .point {
  stroke: #fff;
  stroke-width: 2;
}

.standalone-chart .hit-area {
  fill: transparent;
  cursor: crosshair;
}

.chart-options {
  display: grid;
  justify-items: end;
  gap: 12px;
}

.scale-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(10, 10, 10, .62);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

.scale-control input { accent-color: #0066ff; }

.investment-tooltip[hidden] { display: none; }
.investment-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 680px) {
  .standalone-chart { min-height: 300px; }
  .chart-options { justify-items: start; }
}