/* Verified base rules migrated out of the legacy cascade.
   This file loads after the legacy stylesheet so each rule becomes the single
   authoritative final declaration before its legacy counterpart is removed. */
body {
  background: var(--bg-base);
  color: var(--text-primary);
}

/* Preserve the verified desktop and tablet container dimensions. */
@media (min-width: 681px) {
  main {
    width: min(calc(100% - 48px), 1360px) !important;
    max-width: 1360px !important;
    padding: 20px 0 38px !important;
  }
}

/* Preserve the final chart surface shared by every viewport. */
.chart-box {
  background: linear-gradient(180deg, #0a1424, #0a1120);
  border: 1px solid rgba(92, 122, 165, 0.18);
  border-radius: 12px;
}

/* Canvas always fills the chart surface; this was identical in the legacy sheet. */
.chart-box canvas {
  width: 100%;
  height: 100%;
}

/* The main chart should dominate; the RSI (and volume-bars area drawn on it)
   sub-panel only needs a compact strip at the bottom. */
.chart-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.chart-stack #chart {
  flex: 1 1 72%;
  min-height: 0;
  height: auto !important;
}
.chart-stack #chartRsi {
  flex: 0 0 28%;
  min-height: 110px;
  max-height: 170px;
  height: auto !important;
}
@media (max-width: 680px) {
  .chart-stack #chartRsi {
    flex-basis: 120px;
    min-height: 100px;
    max-height: 140px;
  }
}

/* Preserve the final shared card surface outside of feature-specific cards. */
.card,
.optional,
.backtest-details {
  border-color: rgba(121, 151, 196, 0.27);
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(20, 30, 48, 0.94),
    rgba(13, 20, 34, 0.95)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 14px 34px rgba(0, 0, 0, 0.18);
}

/* Preserve the final shared card typography. */
.card h2 {
  color: #e7eefb;
}

.card p {
  color: var(--text-secondary);
}

/* Preserve the final chart-control containers. */
.toolbar #intervals,
.toolbar #ranges,
.zoom-tools {
  border: 1px solid rgba(105, 133, 173, 0.2);
  background: rgba(7, 15, 29, 0.46);
}

/* Keep triggers in one row; expanded panels float over the chart instead of
   taking grid space and shifting their neighbouring controls. */
.toolbar #intervals,
.toolbar #ranges { position: relative; overflow: visible; padding: 0; border: 0; background: transparent; }
.toolbar .control-popover { position: relative; display: block; }
.toolbar .control-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px !important; border: 1px solid rgba(105,133,173,.3) !important; background: rgba(7,15,29,.62) !important; color: var(--text-secondary,#9eacc5); }
.toolbar .control-trigger .control-label { width: auto; min-width: 0; color: inherit; font-size: 12px; }
.toolbar .control-trigger b { color: #eaf1ff; font-size: 15px; }
.toolbar .control-trigger i { font-style: normal; font-size: 10px; }
.toolbar .control-popover-panel { position: absolute; z-index: 20; top: 100%; left: 0; display: none; width: max-content; max-width: min(700px, calc(100vw - 48px)); margin: 0; padding: 9px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-surface); box-shadow: 0 14px 32px rgba(0,0,0,.32); }
.toolbar .control-popover.is-open .control-popover-panel { display: block; }
.toolbar .range-picker .control-popover-panel { opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 200ms ease, transform 200ms ease; }
.toolbar .range-picker.is-open .control-popover-panel { display: flex; }
.toolbar .range-picker.is-open .control-popover-panel.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toolbar #intervals .interval-wheel {
  display: flex;
  gap: 6px;
  width: min(700px, calc(100vw - 66px));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right,transparent,#000 18px,#000 calc(100% - 18px),transparent);
  mask-image: linear-gradient(to right,transparent,#000 18px,#000 calc(100% - 18px),transparent);
}
.toolbar #intervals .interval-wheel::-webkit-scrollbar { display: none; }
.toolbar #intervals .interval-wheel button { flex: 0 0 auto; scroll-snap-align: center; }
.toolbar .range-options { display: flex; flex-wrap: wrap; gap: 6px; width: min(540px, calc(100vw - 66px)); }
@media (prefers-reduced-motion: reduce) {
  .toolbar .range-picker .control-popover-panel { transition: none; }
}

/* Chart-display choices use the same click-open floating card. */
.toolbar .chart-display-controls { position: relative; margin-left: 0 !important; }
.toolbar .chart-display-controls .control-popover { position: relative; display: block; }
.toolbar .chart-display-controls .control-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px !important; border: 1px solid rgba(105,133,173,.3) !important; background: rgba(7,15,29,.62) !important; color: var(--text-secondary,#9eacc5); }
.toolbar .chart-display-controls .control-label { width: auto; min-width: 0; color: inherit; font-size: 12px; }
.toolbar .chart-display-controls .control-trigger b { color: #eaf1ff; font-size: 15px; }
.toolbar .chart-display-controls .control-trigger i { font-style: normal; font-size: 10px; }
.toolbar .chart-display-controls .control-popover-panel { position: absolute; z-index: 20; top: 100%; right: 0; left: auto; display: none; width: max-content; max-width: min(360px, calc(100vw - 48px)); margin: 0; padding: 9px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-surface); box-shadow: 0 14px 32px rgba(0,0,0,.32); }
.toolbar .chart-display-controls .control-popover.is-open .control-popover-panel { display: block; }
.toolbar .chart-display-options { display: grid; gap: 7px; min-width: 260px; }
.toolbar .chart-series-options,
.toolbar .chart-line-toggles { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 0; border-left: 0; }
.toolbar .chart-line-toggles { padding-top: 7px; border-top: 1px solid rgba(105,133,173,.2); }
.toolbar .chart-display-options button { flex: 0 0 auto; }

/* Keep the chart controls as one compact, intentional control strip instead
   of letting the buttons, legend, and pan hint wrap into unrelated gaps. */
@media (min-width: 861px) {
  .toolbar {
    display: grid !important;
    grid-template-columns: max-content max-content max-content minmax(0, 1fr) max-content;
    grid-template-areas:
      "interval range chart . zoom"
      "legend legend legend . pan";
    align-items: center;
    gap: 10px 12px;
    padding: 14px 16px 12px;
  }
  .toolbar #intervals { grid-area: interval; }
  .toolbar #ranges { grid-area: range; }
  .toolbar .chart-display-controls { grid-area: chart; }
  .toolbar .zoom-tools { grid-area: zoom; }
  .toolbar #chartLegend { grid-area: legend; }
  .toolbar #panTools { grid-area: pan; }
}

/* A single visual language for the three summary controls.  The label stays
   quiet and the selected value becomes the part that users scan first. */
.toolbar .control-trigger,
.toolbar .chart-display-controls .control-trigger {
  height: 38px;
  min-height: 38px;
  max-width: 214px;
  gap: 6px;
  padding: 0 10px !important;
  border-color: rgba(99, 136, 185, 0.26) !important;
  border-radius: 8px !important;
  background: rgba(9, 23, 43, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(220, 238, 255, 0.035);
}
.toolbar .control-trigger:hover,
.toolbar .control-popover.is-open .control-trigger,
.toolbar .chart-display-controls .control-trigger:hover,
.toolbar .chart-display-controls .control-popover.is-open .control-trigger {
  border-color: rgba(71, 201, 255, 0.52) !important;
  background: rgba(15, 40, 67, 0.92) !important;
}
.toolbar .control-trigger .control-label,
.toolbar .chart-display-controls .control-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.035em;
  color: #8fa5c3;
}
.toolbar .control-trigger b,
.toolbar .chart-display-controls .control-trigger b {
  max-width: 132px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #edf5ff;
}
.toolbar .control-trigger i,
.toolbar .chart-display-controls .control-trigger i {
  margin-left: 1px;
  color: #6d89af;
}
.toolbar .zoom-tools {
  width: max-content !important;
  height: 38px;
  flex: 0 0 auto !important;
  justify-self: end;
  margin-left: 0 !important;
  padding: 2px 4px;
  border: 1px solid rgba(99, 136, 185, 0.26);
  border-radius: 8px;
  background: rgba(9, 23, 43, 0.5);
}
.toolbar .zoom-tools button { min-width: 26px; height: 28px; padding: 3px 5px !important; font-size: 11px !important; }
.toolbar .zoom-tools span { min-width: 30px; font-size: 9px; }
.toolbar #chartLegend {
  min-height: 22px;
  padding-left: 2px;
  gap: 10px;
  font-size: 10px;
}
.toolbar .pan-tools {
  width: max-content !important;
  min-height: 28px;
  padding: 1px 4px;
  border: 1px solid rgba(99, 136, 185, 0.26);
  border-radius: 8px;
  background: transparent;
}
.toolbar .pan-tools #panLabel { min-width: 112px; font-size: 9px; }
.toolbar .pan-tools button { min-width: 24px; height: 24px; padding: 2px 5px !important; font-size: 12px !important; }

@media (max-width: 860px) {
  .toolbar { gap: 8px; padding: 10px; }
  .toolbar .control-trigger,
  .toolbar .chart-display-controls .control-trigger { height: 36px; min-height: 36px; }
  .toolbar .zoom-tools { height: 36px; }
}

/* Compact chart header: controls share one row and no longer reserve a legend
   or pan row above the canvas. */
@media (min-width: 861px) {
  .toolbar {
    display: flex !important;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 10px !important;
  }
  .toolbar #intervals,
  .toolbar #ranges,
  .toolbar .chart-display-controls,
  .toolbar .zoom-tools,
  .toolbar #panTools { grid-area: auto; }
  .toolbar #intervals { order: 1; }
  .toolbar #ranges { order: 2; }
  .toolbar .chart-display-controls { order: 3; }
  .toolbar #panTools { order: 4; }
  .toolbar .zoom-tools { order: 5; }
  .toolbar .thumb-tools { order: 6; }
  /* 一行分成左右两组：左侧是四个控制（K 线周期 / 查看范围 / 图表 / 横向移动），
     右侧是缩放组 + 悬浮缩略图。右对齐支点必须挂在右侧组的**首元素**（缩放组）上，
     组内两块才会紧挨着一起贴右；挂到组内靠后的元素上，会在组内撑开一个洞。 */
  .toolbar .pan-tools { margin-left: 0 !important; }
  .toolbar .zoom-tools { margin-left: auto !important; }
  .toolbar .thumb-tools { margin-left: 0 !important; }
}
.toolbar .control-trigger,
.toolbar .chart-display-controls .control-trigger,
.toolbar .zoom-tools,
.toolbar .pan-tools,
.toolbar .thumb-tools {
  height: 28px;
  min-height: 28px;
}
.toolbar .control-trigger,
.toolbar .chart-display-controls .control-trigger { padding: 0 10px !important; }
.toolbar .control-trigger .control-label,
.toolbar .chart-display-controls .control-label,
.toolbar .control-trigger b,
.toolbar .chart-display-controls .control-trigger b,
.toolbar .zoom-tools button,
.toolbar .zoom-tools span,
.toolbar .pan-tools button,
.toolbar .pan-tools #panLabel,
.toolbar .thumb-tools button { font-size: 12px !important; }
.toolbar .zoom-tools { padding: 0 3px; }
.toolbar .zoom-tools button,
.toolbar .pan-tools button,
.toolbar .thumb-tools button { height: 26px; min-width: 24px; padding: 0 6px !important; }
.toolbar .pan-tools { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 3px; }
.toolbar .pan-tools #panLabel { min-width: 112px; white-space: nowrap; }
.toolbar .pan-tools #panLabel i { font-style: normal; }
.toolbar .pan-tools #panLabel small { display: block; font-size: 10px; }
/* v2.11.28：缩略图开关从「重置」旁独立出来，自带边框自成一颗按钮。
   宽屏下由 861px 段的 order + margin-left:auto 把它安置在最右（见上文），
   缩放组因此回靠中间那组控件，两颗按钮之间的余量即自然形成的小间距。 */
.toolbar .thumb-tools {
  display: inline-flex;
  align-items: center;
  padding: 0 3px;
  border: 1px solid rgba(99, 136, 185, 0.26);
  border-radius: 8px;
  background: transparent;
}

/* The legend belongs to the chart footer, following the volume pane. */
#chartLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  min-height: 22px;
  padding: 8px 4px 2px;
  font-size: 12px;
  position: relative;
  z-index: 0;
}
#chartLegendRow {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 28px;
  padding: 8px 4px 2px;
}
#chartLegendRow #chartPatternLegend,
#chartLegendRow #chartLegend {
  margin: 0;
  padding: 0;
}
#chartLegendRow #chartLegend { margin-left: auto; }
@media (max-width: 860px) {
  #chartLegendRow { flex-wrap: wrap; align-items: flex-start; }
  #chartLegendRow #chartLegend { margin-left: 0; }
}
/* v2.11.28：图例区整排上提 —— 工具栏与图例之间、两行图例之间的留白一起收紧，
   省下来的高度直接补给图表主体（.chart-box 由 580px 提到 600px）。 */
.toolbar { margin-bottom: 6px !important; }
.chart-legend-strip {
  padding: 2px 0 !important;
  margin-bottom: 4px !important;
  gap: 8px 18px !important;
}

/* v2.11.28：卡片内所有内容与 K 线图表主体左右对齐，共用同一条边界。
   图表本来用负外边距铺到卡片内边距之外，其余内容各留各的内缩（工具栏 10px、
   图例区 2px），从上往下看左边就一节一节地参差。现在一起走这条规则。
   外扩量取 -10px（原先 -16px 会贴死卡片边框，只剩 5px 余量），
   于是左右各留出约 11px 的空隙；想再松/再紧只改这一处即可。 */
.chart-box,
.chart-column > .card > .toolbar,
.chart-column > .card > .chart-legend-strip,
.chart-column > .card > .chart-caption,
.chart-column > .card > .selection-stats {
  margin-left: -10px !important;
  margin-right: -10px !important;
}
.chart-column > .card > .toolbar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.chart-box { height: 600px; }
#chartVolumeTooltip {
  position: absolute;
  z-index: 4;
  display: none;
  pointer-events: none;
  padding: 3px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: rgba(9, 20, 34, 0.82);
  color: var(--text-primary);
  font-size: 12px;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .chart-box { height: 420px; }
}

/* Preserve the final neutral toolbar button geometry. */
.toolbar button {
  border: 1px solid transparent !important;
  border-radius: 8px !important;
}

/* Preserve the final selected toolbar state. */
.toolbar button.active {
  border-color: rgba(111, 151, 218, 0.67) !important;
  background: linear-gradient(
    135deg,
    rgba(66, 100, 162, 0.72),
    rgba(45, 64, 112, 0.72)
  ) !important;
  color: #eaf1ff !important;
}


/* Retain the existing narrow-screen corner radius. */
@media (max-width: 680px) {
  .card,
  .optional,
  .backtest-details {
    border-radius: 13px;
  }
}