.candlestick-host {
  position: relative;
  min-height: 360px;
}

.candlestick-svg {
  display: block;
  width: 100%;
  height: 360px;
  overflow: visible;
}

.chart-legend {
  display: flex;
  gap: 14px;
  min-height: 22px;
  margin: -10px 0 2px 64px;
  font-size: 10px;
  font-weight: 700;
}

.chart-legend span { white-space: nowrap; }
.chart-grid line { stroke: #e4e4dc; stroke-width: 1; }
.chart-grid text, .date-axis text { fill: var(--muted); font-size: 10px; }
.candles line { stroke-width: 1.2; }
.candles rect { stroke-width: 1; }
.candle-up { fill: var(--red); stroke: var(--red); }
.candle-down { fill: var(--green); stroke: var(--green); }
.candle-flat { fill: #89908b; stroke: #89908b; }
.volume-bar { opacity: .28; }
.moving-averages polyline { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ma-5 { color: #d48b20; stroke: #d48b20; }
.ma-10 { color: #4361a6; stroke: #4361a6; }
.ma-20 { color: #8a55a1; stroke: #8a55a1; }
.ma-60 { color: #168b83; stroke: #168b83; }
.chart-interaction { fill: transparent; pointer-events: all; cursor: crosshair; }
.chart-crosshair { stroke: #59645e; stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }

.chart-tooltip {
  position: absolute;
  z-index: 3;
  top: 24px;
  right: 18px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 5px 12px;
  max-width: 380px;
  padding: 11px 13px;
  background: rgba(19, 34, 29, .93);
  color: #fff;
  font-size: 10px;
  box-shadow: var(--shadow);
  pointer-events: none;
}

.chart-tooltip[hidden] { display: none; }
.chart-tooltip b { grid-column: 1 / -1; color: var(--lime); }

.chart-error-note {
  position: absolute;
  right: 12px;
  bottom: 16px;
  z-index: 4;
  padding: 8px 10px;
  background: #fff1ed;
  border: 1px solid var(--red);
  color: #842f28;
  font-size: 11px;
}

.is-chart-loading { opacity: .58; transition: opacity .15s; }

@media (max-width: 900px) {
  .candlestick-svg { height: 330px; }
  .chart-legend { margin-left: 52px; gap: 9px; }
  .chart-tooltip { grid-template-columns: repeat(2, auto); }
}

@media (max-width: 560px) {
  .pulse-grid { grid-template-columns: 1fr; }
  .metric-card.wide { grid-column: auto; }
  .metric-card strong { overflow-wrap: anywhere; }
  .candlestick-host { min-height: 300px; }
  .candlestick-svg { height: 290px; }
  .chart-legend { margin-left: 42px; gap: 7px; font-size: 9px; overflow: hidden; }
  .chart-tooltip { display: none !important; }
  .chart-grid text, .date-axis text { font-size: 9px; }
}