.chart-page { max-width: 1480px; }
.chart-header, .chart-heading, .chart-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.chart-header nav { display: flex; gap: 1rem; white-space: nowrap; }
.chart-indicators {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.25rem;
  margin-top: 1.25rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: var(--surface);
  font-size: .85rem;
}
.indicator-caption { color: var(--muted); font-weight: 600; }
.chart-indicators label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; white-space: nowrap; }
.chart-indicators input { accent-color: var(--accent); width: 1rem; height: 1rem; margin: 0; }
.chart-indicators label:has(input:disabled) { color: var(--muted); cursor: default; opacity: .6; }
.chart-indicators input:focus-visible { outline: 3px solid #57aa91; outline-offset: 3px; }
.chart-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem;
  margin: 1.25rem 0;
}
.chart-controls label { display: flex; flex-direction: column; gap: .35rem; color: var(--muted); font-size: .85rem; }
.chart-controls select, .chart-controls button, .chart-actions button {
  font: inherit;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  color: var(--fg);
  background: var(--surface);
}
.chart-controls .check-label { flex-direction: row; align-items: center; padding: .7rem 0; }
.check-label input { accent-color: var(--accent); width: 1rem; height: 1rem; }
.chart-controls button, .chart-actions button { cursor: pointer; }
#chart-reload { color: #fff; background: var(--accent); border-color: var(--accent); }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #57aa91; outline-offset: 3px; }
.chart-panel { background: var(--surface); border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; }
.chart-heading { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.chart-heading h2 { margin: 0; font-size: 1.15rem; }
.chart-heading p { margin: .35rem 0 0; color: var(--muted); font-size: .85rem; }
.chart-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.chart-actions button { font-size: .8rem; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: .85rem 1.2rem; font-size: .85rem; min-height: 3.3rem; }
.chart-legend span { white-space: nowrap; }
#legend-time, #legend-source { color: var(--muted); }
.chart-legend strong { font-variant-numeric: tabular-nums; }
.chart-legend.up strong { color: #d14343; }
.chart-legend.down strong { color: #2872c8; }
.chart-ma-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; padding: 0 1.2rem .8rem; font-size: .85rem; }
.chart-ma-legend span { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.chart-ma-legend strong { font-variant-numeric: tabular-nums; }
.ma-caption { color: var(--muted); }
.ma-swatch { display: inline-block; width: 1.5rem; height: 3px; }
.ma20 { background: #facc15; }
.ma60 { background: #38bdf8; }
.ma240 { background: #5d4037; }
.day-ma5, .day-ma10, .day-ma20, .day-ma60 { height: 5px; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.day-ma5 { background: #22c55e; }
.day-ma10 { background: #f97316; }
.day-ma20 { background: #facc15; }
.day-ma60 { background: #38bdf8; }
.bb20 { background: #9ca3af; }
.day-bb5, .day-bb10, .day-bb20 { height: 5px; }
.day-bb5 { background: #22c55e; }
.day-bb10 { background: #f97316; }
.day-bb20 { background: #facc15; }
.env20 { background: #8b5cf6; }
.day-env20 { background: #ec4899; height: 5px; }
.opening-day, .opening-week, .opening-month { height: 3px; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.opening-day { background: #2563eb; }
.opening-week { background: #ec4899; }
.opening-month { background: #5d4037; }
.chart-fibonacci-values { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.fibonacci-swatch { height: 1px; background: #ec4899; }
.week-fibonacci-swatch { height: 1px; background: #38bdf8; }
.chart-ma-legend[hidden], .chart-note[hidden] { display: none; }
.chart-panel.hide-indicator-values .chart-ma-legend { display: none; }
.chart-stage { position: relative; }
#chart-canvas { width: 100%; height: 560px; }
.chart-empty { position: absolute; top: 30%; left: 10%; width: 80%; text-align: center; color: var(--muted); padding: 1rem; background: rgba(255,255,255,.94); pointer-events: none; }
.chart-empty[hidden] { display: none; }
.chart-bottom { align-items: start; padding: .8rem 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.chart-bottom p { margin: 0; }
#chart-status.error { color: var(--danger); }
.up-dot { color: #d14343; }
.down-dot { color: #2872c8; }
.chart-note, .chart-attribution { color: var(--muted); font-size: .8rem; line-height: 1.7; }
.chart-attribution a { color: var(--accent); }
@media (max-width: 750px) {
  .chart-page { padding: 1rem .65rem; }
  .chart-header, .chart-heading, .chart-bottom { align-items: start; flex-direction: column; }
  .chart-controls { gap: .75rem; }
  .chart-controls label:first-child { width: 100%; }
  #chart-symbol { max-width: 100%; }
  #chart-canvas { height: 460px; }
  .chart-legend { gap: .4rem .75rem; }
}