/* Kurs-Charts (client/chart.js): Linie + Candlesticks, Fadenkreuz, Tooltip.
   Farben aus den :root-Variablen; grün/rot wie die Sparklines der Marktliste. */
.cx, .cx-slot { --cx-up: #4cc38a; --cx-down: #e5484d; --cx-ma: var(--info, #74a4dc); }
.cx { margin: 6px 0 12px; }
.cx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.cx-seg { display: inline-flex; background: var(--bg); padding: 2px; border-radius: 9px; }
.cx-seg button, .cx-ma { border: 0; background: none; padding: 4px 10px; border-radius: 7px; color: var(--muted); font: 600 12px/1.3 var(--font, inherit); cursor: pointer; white-space: nowrap; }
.cx-seg button.on { background: var(--panel-2, var(--panel)); color: var(--text); box-shadow: 0 0 0 1px var(--line-soft, var(--line)); }
.cx-seg button:hover:not(.on), .cx-ma:hover:not(.on) { color: var(--text); }
.cx-ma { margin-left: auto; background: var(--bg); padding: 5px 10px; border-radius: 9px; }
.cx-ma.on { color: var(--cx-ma); box-shadow: inset 0 0 0 1px currentColor; }

.cx-plot { position: relative; width: 100%; min-width: 0; }
.cx-svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cx-grid { stroke: var(--line-soft, rgba(255,255,255,.07)); stroke-width: 1; shape-rendering: crispEdges; }
.cx-base { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.cx-ax { fill: var(--muted); font: 10.5px/1 var(--font, inherit); font-variant-numeric: tabular-nums; }
.cx-t { fill: var(--faint, var(--muted)); } .cx-t.cx-day { fill: var(--muted); font-weight: 600; }

.cx-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.cx-line.up { stroke: var(--cx-up); } .cx-line.down { stroke: var(--cx-down); }
.cx-stop.up { stop-color: var(--cx-up); } .cx-stop.down { stop-color: var(--cx-down); }
.cx-candle line { stroke-width: 1; shape-rendering: crispEdges; }
.cx-candle.up line { stroke: var(--cx-up); } .cx-candle.up rect { fill: var(--cx-up); }
.cx-candle.down line { stroke: var(--cx-down); } .cx-candle.down rect { fill: var(--cx-down); }
.cx-candle.flat line { stroke: none; } .cx-candle.flat rect { fill: var(--faint, var(--muted)); opacity: .6; }
.cx-vol { opacity: .42; } .cx-vol.up { fill: var(--cx-up); } .cx-vol.down { fill: var(--cx-down); }
.cx-ma-line { fill: none; stroke: var(--cx-ma); stroke-width: 1.4; stroke-dasharray: 0; opacity: .9; }
.cx-last { stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; } .cx-last.up { stroke: var(--cx-up); } .cx-last.down { stroke: var(--cx-down); }
.cx-tag text { font: 600 10.5px/1 var(--font, inherit); font-variant-numeric: tabular-nums; fill: #0d1117; }
.cx-tag.up rect { fill: var(--cx-up); } .cx-tag.down rect { fill: var(--cx-down); } .cx-tag.down text { fill: #fff; }
.cx-tag-x rect { fill: var(--panel-2, #1c2431); stroke: var(--line); } .cx-tag-x text { fill: var(--text); }
.cx-xh { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; shape-rendering: crispEdges; }
.cx-dot { fill: var(--text); stroke: var(--bg); stroke-width: 1.5; }
.cx-hit { fill: transparent; cursor: crosshair; }

.cx-tip { position: absolute; top: 6px; z-index: 2; pointer-events: none; min-width: 132px; padding: 8px 10px; border-radius: 10px;
  background: var(--glass, rgba(15,21,30,.9)); border: 1px solid var(--line); box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.35));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12px; color: var(--text); }
.cx-tip-t { color: var(--muted); font-size: 11px; margin-bottom: 4px; white-space: nowrap; }
.cx-tip-g { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.cx-tip-g span { color: var(--muted); } .cx-tip-g b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-tip-g small { color: var(--muted); font-weight: 400; }
.cx-tip em { font-style: normal; } .cx-tip em.up { color: var(--cx-up); } .cx-tip em.down { color: var(--cx-down); }
.cx-tip-gap { color: var(--muted); white-space: nowrap; }

.cx-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--bg); border-radius: 10px; color: var(--muted); font-size: 13px; text-align: center; padding: 12px; }
.cx-empty[hidden], .cx-tip[hidden] { display: none; }
.cx-empty b { color: var(--text); font-weight: 600; } .cx-empty span { font-size: 12px; }

@media (max-width: 520px) {
  .cx-seg button, .cx-ma { padding: 4px 8px; font-size: 11.5px; }
  .cx-tip { min-width: 118px; padding: 6px 8px; font-size: 11.5px; }
}