/* Backtestd Concepts: the step-through candle chart only. Every other component lives in site.css (design system). */
/* chart */
.cx-chart{margin:28px 0;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);outline:none}
.cx-chart:focus-visible{border-color:var(--acc)}
.cx-cap{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px;font-size:14px}
.cx-stage{position:relative;width:100%;min-height:200px;touch-action:pan-y}
.cx-svg{display:block;width:100%;height:auto;font-family:Mono,ui-monospace,monospace}
.cx-grid{stroke:var(--line);stroke-width:1}
.cx-ax{fill:var(--faint);font-size:11px}
.cx-lab{font:700 12px Mono,monospace}
.cx-big{font-size:13px}
.cx-hl{fill:var(--acc);fill-opacity:.09}
.cx-cross{stroke:var(--line2);stroke-width:1;stroke-dasharray:3 3}
.cx-hit.pick{cursor:crosshair}
.cx-pick{fill-opacity:.22}.cx-pick.ok{fill:var(--up)}.cx-pick.no{fill:var(--down)}.cx-pick.ans{fill:var(--up);fill-opacity:.3;stroke:var(--up);stroke-width:1.5}
.cx-in{animation:cxIn .6s var(--ease) both}
@keyframes cxIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cx-c{transition:opacity .35s}
.cx-tip{position:absolute;top:4px;pointer-events:none;background:rgba(9,12,18,.94);border:1px solid var(--line2);border-radius:8px;padding:6px 9px;font:500 12px/1.45 Mono,monospace;color:var(--text);white-space:nowrap;display:flex;flex-direction:column;z-index:2}
.cx-tip[hidden]{display:none}
.cx-tip b{color:var(--dim);font-weight:500}
.cx-text{min-height:3.3em;margin:12px 0 10px;font-size:16px;line-height:1.55;padding:10px 14px;border-left:3px solid var(--acc);background:var(--panel2);border-radius:0 10px 10px 0}
.cx-text.ask{border-color:var(--warn)}.cx-text.ok{border-color:var(--up)}.cx-text.no{border-color:var(--down)}
.cx-ctrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cx-btn{font:600 14px Inter,sans-serif;color:var(--text);background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:8px 14px;cursor:pointer;transition:background .2s,border-color .2s}
.cx-btn:hover:not(:disabled){border-color:var(--acc)}
.cx-btn:disabled{opacity:.4;cursor:default}
.cx-main{background:var(--acc);border-color:var(--acc);color:#04101f}
.cx-try{margin-left:auto}
.cx-try.cx-pulse{border-color:var(--warn);box-shadow:0 0 0 0 rgba(245,184,61,.5);animation:cxPulse 1.8s infinite}
@keyframes cxPulse{70%{box-shadow:0 0 0 10px rgba(245,184,61,0)}100%{box-shadow:0 0 0 0 rgba(245,184,61,0)}}
.cx-dots{display:flex;gap:6px;flex:1;justify-content:center;min-width:80px}
.cx-dot{width:10px;height:10px;padding:0;border-radius:50%;border:1px solid var(--line2);background:transparent;cursor:pointer}
.cx-dot.seen{background:var(--line2)}.cx-dot.on{background:var(--acc);border-color:var(--acc);transform:scale(1.2)}
.cx-steps-fallback{margin:12px 0 0;color:var(--dim)}
.cx-err{padding:14px;border:1px dashed var(--down);border-radius:10px;color:var(--down);font:500 13px Mono,monospace}

@media (max-width:560px){.cx-chart{padding:12px;margin:22px -8px}.cx-try{margin-left:0}.cx-text{font-size:15px}}