/* Balance the terminal columns and let the chart fill the same visual row as the quote rail. */
.app-view .market-terminal {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  gap: 18px;
  align-items: stretch;
}

.app-view .chart-panel {
  display: grid;
  grid-template-rows: auto auto minmax(420px, 1fr) auto auto;
  min-height: clamp(700px, calc(100vh - 210px), 940px);
  height: 100%;
  overflow: hidden;
}

.app-view .chart-stage {
  height: 100%;
  min-height: 500px;
}

.app-view .chart-hud { left: 16px; top: 13px; gap: 7px; }

.app-view .chart-candle-info {
  padding: 5px 8px;
  border: 1px solid rgba(142, 164, 195, .14);
  border-radius: 8px;
  background: rgba(8, 15, 26, .78);
  backdrop-filter: blur(10px);
  font-size: 11px;
}

.app-view .chart-indicator-legend { gap: 7px; }
.app-view .chart-indicator-legend > * {
  padding: 5px 8px;
  border: 1px solid rgba(142, 164, 195, .13);
  border-radius: 7px;
  background: rgba(8, 15, 26, .78);
}

.app-view .quote-panel { width: 100%; }
.app-view .chart-tools { flex-wrap: wrap; row-gap: 8px; }
.app-view .chart-tools > small { margin-left: auto; }
.app-view .chart-levels { gap: 9px; padding: 12px 16px; }

@media (max-width: 1280px) {
  .app-view .market-terminal { grid-template-columns: minmax(0, 1fr); }
  .app-view .chart-panel {
    min-height: 0;
    height: auto;
    grid-template-rows: auto auto auto auto auto;
  }
  .app-view .chart-stage { height: clamp(460px, 58vh, 680px); min-height: 0; }
}

@media (max-width: 760px) {
  .app-view .chart-stage { height: 420px; }
  .app-view .chart-candle-info {
    max-width: calc(100vw - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
  }
}

@media (max-width: 520px) {
  .app-view .market-terminal { gap: 14px; }
  .app-view .chart-stage { height: 360px; }
  .app-view .chart-levels { align-items: stretch; }
}