/* Shared indicator example styles — light/dark via html[data-theme] */

html[data-theme="light"] {
	--page-bg: #ffffff;
	--page-text: #222222;
	--page-muted: #555555;
	--chart-text: #000000;
	--chart-axis: #333333;
	--chart-axis-line: #cccccc;
	--stroke-neutral: #000000;
	--stroke-up: #00aa00;
	--stroke-down: #cc0000;
	--stroke-accent: #0000aa;
	--stroke-signal: #ff9999;
	--stroke-guide: #bbbbbb;
	--stroke-oscillator: #0000ff;
	--fill-oscillator: rgba(0, 0, 255, 0.025);
	--fill-difference: rgba(187, 187, 187, 0.5);
	--toggle-hover: rgba(0, 0, 0, 0.06);
	--ichimoku-chikou: #bf5fff;
	--ichimoku-tenkan: #0033ff;
	--ichimoku-kijun: #fbb117;
	--ichimoku-span-a: #006600;
	--ichimoku-span-b: #cc0000;
}

html[data-theme="dark"] {
	--page-bg: #1a1a1a;
	--page-text: #e8e8e8;
	--page-muted: #aaaaaa;
	--chart-text: #dddddd;
	--chart-axis: #aaaaaa;
	--chart-axis-line: #444444;
	--stroke-neutral: #cccccc;
	--stroke-up: hsl(120, 70%, 50%);
	--stroke-down: #ff6666;
	--stroke-accent: #6b8cff;
	--stroke-signal: #cc7777;
	--stroke-guide: #666666;
	--stroke-oscillator: #6688ff;
	--fill-oscillator: rgba(102, 136, 255, 0.08);
	--fill-difference: rgba(120, 120, 120, 0.35);
	--toggle-hover: rgba(255, 255, 255, 0.08);
	--ichimoku-chikou: #c88aff;
	--ichimoku-tenkan: #6688ff;
	--ichimoku-kijun: #fbb117;
	--ichimoku-span-a: hsl(120, 70%, 45%);
	--ichimoku-span-b: #ff6666;
}

html,
body {
	background: var(--page-bg);
	color: var(--page-text);
}

body {
	font: 10px sans-serif;
	margin: 0;
	padding: 0 12px 24px;
}

header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0 8px;
}

header .header-text {
	flex: 1;
	min-width: 0;
}

header h1 {
	font: 600 16px sans-serif;
	margin: 0 0 4px;
	color: var(--page-text);
}

header .subtitle,
.status,
.chart-meta {
	font: 12px sans-serif;
	color: var(--page-muted);
	margin: 0;
}

header .subtitle a,
header .indicator-try-link {
	color: var(--stroke-accent);
	text-decoration: none;
}

header .subtitle a:hover,
header .indicator-try-link:hover {
	text-decoration: underline;
}

header code {
	font-size: 11px;
}

#chart {
	min-height: 200px;
}

.status.error {
	color: var(--stroke-down);
}

.theme-toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--page-text);
	cursor: pointer;
}

.theme-toggle:hover {
	background: var(--toggle-hover);
}

.theme-toggle .theme-icon {
	display: none;
}

html[data-theme="light"] .theme-toggle .theme-icon-moon {
	display: block;
}

html[data-theme="dark"] .theme-toggle .theme-icon-sun {
	display: block;
}

.chart text,
text {
	fill: var(--chart-text);
}

.chart .axis text,
.x.axis text,
.y.axis text {
	fill: var(--chart-axis);
}

.chart .axis line,
.chart .axis path,
.x.axis line,
.x.axis path,
.y.axis line,
.y.axis path {
	stroke: var(--chart-axis-line);
}

/* ADX */
.adx path {
	fill: none;
	stroke-width: 1;
}

.adx {
	stroke: var(--stroke-neutral);
}

.adx path.adx {
	stroke: var(--stroke-neutral);
}

.adx path.plusDi {
	stroke: var(--stroke-up);
}

.adx path.minusDi {
	stroke: var(--stroke-down);
}

/* Aroon */
.aroon path {
	fill: none;
	stroke-width: 1;
}

.aroon {
	stroke: var(--stroke-neutral);
}

.aroon.up {
	stroke: var(--stroke-up);
	stroke-width: 1.5;
}

.aroon.down {
	stroke: var(--stroke-down);
	stroke-width: 1.5;
}

.aroon.oscillator {
	stroke: var(--stroke-oscillator);
	stroke-width: 0.5;
}

.aroon.oscillatorArea {
	fill: var(--stroke-oscillator);
	opacity: 0.35;
}

.aroon path.overbought,
.aroon path.oversold,
.rsi path.overbought,
.rsi path.oversold,
.stochastic path.overbought,
.stochastic path.oversold,
.williams path.overbought,
.williams path.oversold {
	stroke: var(--stroke-signal);
	stroke-dasharray: 2, 2;
}

.aroon path.middle,
.rsi path.middle,
path.zero {
	stroke: var(--stroke-guide);
	stroke-dasharray: 5, 5;
}

/* ATR */
.atr path {
	fill: none;
	stroke-width: 1;
	stroke: var(--stroke-neutral);
}

/* RSI */
.rsi path {
	fill: none;
	stroke-width: 1;
}

.rsi {
	stroke: var(--stroke-neutral);
}

/* Stochastic */
.stochastic path {
	fill: none;
	stroke-width: 1;
}

.stochastic path.k {
	stroke: var(--stroke-up);
}

.stochastic path.d {
	stroke: var(--stroke-down);
}

.stochastic path.overbought,
.stochastic path.oversold {
	stroke: var(--stroke-signal);
	stroke-dasharray: 2, 2;
}

/* Williams %R */
.williams path {
	fill: none;
	stroke-width: 1;
}

.williams path.williams.up {
	stroke: var(--stroke-up);
	stroke-width: 1.5;
}

/* ROC / SROC */
.roc path.line,
.sroc path.line {
	fill: none;
	stroke-width: 1;
	stroke: var(--stroke-accent);
}

/* MACD */
.macd path.macd,
.macd path.signal,
.macd path.zero {
	fill: none;
	stroke-width: 1;
}

path.macd {
	stroke: var(--stroke-accent);
}

path.signal {
	stroke: var(--stroke-signal);
}

path.difference {
	fill: var(--stroke-guide);
	opacity: 0.5;
}

/* Bollinger */
.ohlc path.up {
	stroke: var(--stroke-up);
}

.ohlc path.down {
	stroke: var(--stroke-down);
}

.bollinger path {
	fill: none;
	stroke-width: 1;
}

.bollinger path.upper {
	stroke: var(--stroke-accent);
}

.bollinger path.lower {
	stroke: var(--stroke-signal);
}

.bollinger path.middle {
	stroke: var(--stroke-guide);
}

/* Candlestick */
path.candle.body {
	stroke-width: 0;
}

path.candle.up {
	fill: var(--stroke-up);
	stroke: var(--stroke-up);
}

path.candle.down {
	fill: var(--stroke-down);
	stroke: var(--stroke-down);
}

/* ATR Trailing Stop */
.atrtrailingstop path {
	fill: none;
	stroke-width: 0.8;
	stroke: var(--stroke-neutral);
}

.atrtrailingstop path.down {
	stroke: var(--stroke-down);
}

.atrtrailingstop path.up {
	stroke: var(--stroke-up);
}

/* Ichimoku */
.ichimoku path {
	fill: none;
	stroke-width: 0.8;
	stroke: var(--stroke-neutral);
}

.ichimoku path.chikouspan {
	stroke: var(--ichimoku-chikou);
}

.ichimoku path.tenkansen {
	stroke: var(--ichimoku-tenkan);
}

.ichimoku path.kijunsen {
	stroke: var(--ichimoku-kijun);
}

.ichimoku path.kumo {
	opacity: 0.1;
}

.ichimoku path.kumo.up {
	fill: var(--stroke-up);
}

.ichimoku path.kumo.down {
	fill: var(--stroke-down);
}

.ichimoku path.senkouspana {
	stroke: var(--ichimoku-span-a);
}

.ichimoku path.senkouspanb {
	stroke: var(--ichimoku-span-b);
}