:root { --report-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.chart-card { display: flex; flex-direction: column; gap: var(--report-gap, 10px); text-align: left; }
.chart-card > *, #chart > * { margin: 0; }
.report-top { display: flex; align-items: center; gap: 10px; min-width: 0; background: #222427; border: 1px solid #3a3d40; border-radius: 10px; padding: var(--report-box-padding, 10px 12px); font-size: var(--report-title-size, 18px); font-weight: 800; }
.ticker-mark { flex: none; background: #ff4a1f; color: #18191b; border-radius: 5px; padding: 1px 8px; font-family: var(--report-mono); }
.report-company { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chart { display: flex; flex-direction: column; gap: var(--report-gap, 10px); width: 100%; }
.report-box { background: #222427; border: 1px solid #3a3d40; border-radius: 10px; padding: var(--report-box-padding, 10px 12px); box-sizing: border-box; min-width: 0; }
.report-box-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; margin-bottom: 6px; }
.report-box-title { color: #eff0f1; font-size: var(--report-heading-size, 12px); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.report-score-title { margin: 8px 0 4px; color: #9c9ea3; }
.report-chip { display: inline-block; border: 1px solid #3a3d40; border-radius: 4px; padding: 1px 6px; color: #9c9ea3; font: 600 var(--report-label-size, 11px) var(--report-mono); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.report-chip:empty { display: none; }
.report-chip-now, .report-chip-bad { color: #ff4a1f; border-color: rgba(255, 74, 31, 0.55); background: rgba(255, 74, 31, 0.12); }
.report-chip-good { color: #83c167; border-color: rgba(131, 193, 103, 0.55); background: rgba(131, 193, 103, 0.12); }
.report-muted { color: #9c9ea3; font: var(--report-label-size, 11px) var(--report-mono); }
.report-box canvas { display: block; }
.chart-card [hidden] { display: none !important; }
.chart-below { font-size: 13px; color: #9c9ea3; }
.chart-below:empty { display: none; }

#player { display: flex; align-items: center; gap: 8px; width: 100%; }
#play { flex: none; width: var(--report-play-size, 36px); height: var(--report-play-size, 36px); padding: 0; font-size: 14px; border: 0; border-radius: 50%; background: #ff4a1f; color: #18191b; cursor: pointer; }
#prev-trade, #next-trade { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid #3a3d40; border-radius: 6px; background: #18191b; color: #eff0f1; cursor: pointer; }
#prev-trade:disabled, #next-trade:disabled { opacity: 0.5; cursor: default; }
#prev-trade:not(:disabled):hover, #next-trade:not(:disabled):hover, #prev-trade:focus-visible, #next-trade:focus-visible { background: #ff4a1f; color: #18191b; border-color: #ff4a1f; }
.seek-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#seek { width: 100%; margin: 0; accent-color: #ff4a1f; cursor: pointer; }
#speed { display: flex; gap: 4px; flex: none; }
#speed button { min-width: 32px; height: 28px; padding: 0 6px; font: 12px var(--report-mono); border: 1px solid #3a3d40; border-radius: 6px; background: #18191b; color: #eff0f1; cursor: pointer; }
#speed button.active { background: #ff4a1f; color: #18191b; font-weight: 700; }

.report-stats-grid { display: grid; grid-template-columns: repeat(var(--report-stat-columns, 3), minmax(0, 1fr)); gap: 6px; }
.report-stat { background: #18191b; border: 1px solid #3a3d40; border-radius: 6px; padding: var(--report-stat-padding, 6px 8px); min-width: 0; }
.report-stat-label { color: #9c9ea3; font-size: var(--report-label-size, 11px); letter-spacing: 0.5px; }
.report-stat-value { display: block; margin-top: 2px; font: 700 var(--report-value-size, 15px) var(--report-mono); overflow-wrap: anywhere; }

.report-insight { line-height: 1.45; overflow-wrap: anywhere; margin-bottom: var(--report-gap, 10px); }
.chart-card .report-insight { margin-bottom: 0; }
.report-insight-title { margin: 0; font-size: var(--report-heading-size, 12px); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.report-insight-body { background: #18191b; border: 1px solid #3a3d40; border-radius: 6px; padding: 8px 10px; }
.report-insight-body p { margin: 0 0 4px; }
.report-insight-body p:last-child { margin-bottom: 0; }
.report-insight-note { color: #9c9ea3; font-size: var(--report-label-size, 11px); }
.report-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.report-link { color: #ff4a1f; font-size: var(--report-label-size, 11px); font-weight: 700; text-decoration: none; }
.report-link:hover, .report-link:focus-visible { text-decoration: underline; }

.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; padding: 4px 0 0; font-size: var(--report-label-size, 11px); color: #9c9ea3; }
.report-box-head .chart-legend { padding: 0; justify-content: flex-end; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.chart-legend-line { display: inline-block; width: 12px; border-top: 2px solid; }
.chart-legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.chart-legend-area { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(90deg, #83c167 50%, #ff4a1f 50%); }
.chart-legend-bar { display: inline-block; width: 6px; height: 9px; }