/* ── Strategy Editor theme tokens (follows app dark / blue / light) ── */

.se-page {
  --se-bg: var(--bg);
  --se-bg-elevated: var(--bg2);
  --se-bg-muted: var(--bg3);
  --se-text: var(--text);
  --se-text-muted: var(--text2);
  --se-text-dim: var(--text3);
  --se-border: var(--border);
  --se-accent: var(--accent);
  --se-accent-hover: var(--accent-h);
  --se-up: var(--up);
  --se-down: var(--down);
  --se-gold: #e6c200;
  --se-success: #9ece6a;
  --se-danger: #f7768e;
  --se-buy: #7aa2f7;
  --se-sell: #f7768e;
  --se-header-bg: linear-gradient(180deg, var(--bg2), var(--bg));
  --se-header-border: var(--border);
  --se-title-gradient: linear-gradient(90deg, #e6c200, #ffe566);
  --se-panel-shell-bg: var(--bg);
  --se-panel-card-bg: linear-gradient(165deg, var(--bg2), var(--bg));
  --se-panel-card-border: var(--border);
  --se-panel-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --se-item-hover-bg: color-mix(in srgb, var(--accent) 8%, transparent);
  --se-strat-item-bg: color-mix(in srgb, var(--bg2) 88%, transparent);
  --se-strat-item-border: var(--border);
  --se-strat-item-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), inset 0 1px 0 color-mix(in srgb, var(--se-text) 5%, transparent);
  --se-strat-item-hover-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  --se-item-selected-bg: linear-gradient(135deg, color-mix(in srgb, var(--se-gold) 22%, transparent), color-mix(in srgb, var(--se-gold) 8%, transparent));
  --se-item-selected-border: color-mix(in srgb, var(--se-gold) 38%, transparent);
  --se-item-selected-text: var(--se-gold);
  --se-center-bg: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 50%), var(--bg);
  --se-canvas-border: color-mix(in srgb, var(--accent) 25%, transparent);
  --se-canvas-inset: inset 0 0 60px rgba(0, 0, 0, 0.35);
  --se-canvas-sell-border: color-mix(in srgb, var(--se-sell) 28%, transparent);
  --se-canvas-sell-inset: inset 0 0 40px color-mix(in srgb, var(--se-sell) 6%, transparent);
  --se-selection-bg: color-mix(in srgb, var(--accent) 12%, transparent);
  --se-selection-border: color-mix(in srgb, var(--se-gold) 75%, transparent);
  --se-toolbar-bg: color-mix(in srgb, var(--bg2) 92%, transparent);
  --se-toolbar-title: var(--se-gold);
  --se-terminal-bg: color-mix(in srgb, var(--bg) 92%, #000);
  --se-terminal-border: color-mix(in srgb, var(--se-gold) 18%, transparent);
  --se-terminal-label: color-mix(in srgb, var(--se-gold) 70%, transparent);
  --se-terminal-code: var(--accent);
  --se-splitter-bg: color-mix(in srgb, var(--accent) 12%, transparent);
  --se-splitter-active: color-mix(in srgb, var(--accent) 35%, transparent);
  --se-control-bg: color-mix(in srgb, var(--bg2) 94%, transparent);
  --se-control-border: color-mix(in srgb, var(--accent) 28%, transparent);
  --se-control-icon: var(--accent);
  --se-control-hover: color-mix(in srgb, var(--accent) 16%, transparent);
  --se-input-bg: color-mix(in srgb, var(--bg3) 88%, transparent);
  --se-input-border: var(--border);
  --se-input-focus: color-mix(in srgb, var(--accent) 45%, transparent);
  --se-palette-bg: color-mix(in srgb, var(--bg2) 88%, transparent);
  --se-palette-card-bg: color-mix(in srgb, var(--bg2) 78%, transparent);
  --se-palette-hover-border: color-mix(in srgb, var(--se-gold) 45%, transparent);
  --se-palette-logic-and-accent: #4dabf7;
  --se-palette-logic-and-bg: color-mix(in srgb, #4dabf7 14%, var(--bg2));
  --se-palette-logic-or-accent: #22d3ee;
  --se-palette-logic-or-bg: color-mix(in srgb, #22d3ee 14%, var(--bg2));
  --se-palette-logic-not-accent: #fbbf24;
  --se-palette-logic-not-bg: color-mix(in srgb, #fbbf24 14%, var(--bg2));
  --se-palette-logic-start-accent: #ffb020;
  --se-palette-logic-start-bg: color-mix(in srgb, #ffb020 22%, var(--bg2));
  --se-palette-band-accent: #a78bfa;
  --se-palette-band-bg: color-mix(in srgb, #a78bfa 14%, var(--bg2));
  --se-palette-ind-accent: #34d399;
  --se-palette-ind-bg: color-mix(in srgb, #34d399 14%, var(--bg2));
  --se-palette-section-logic: #4dabf7;
  --se-palette-section-band: #a78bfa;
  --se-palette-section-ind: #34d399;
  --se-tab-active: var(--se-gold);
  --se-handle: var(--accent);
  --se-edge: color-mix(in srgb, var(--accent) 72%, transparent);
  --se-node-text: var(--text);
  --se-node-logic-bg: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
  --se-node-cond-bg: linear-gradient(145deg, color-mix(in srgb, var(--se-success) 16%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
  --se-node-cond-border: color-mix(in srgb, var(--se-success) 42%, transparent);
  --se-node-start-bg: linear-gradient(145deg, color-mix(in srgb, var(--se-gold) 22%, transparent), color-mix(in srgb, var(--bg2) 92%, transparent));
  --se-node-start-border: color-mix(in srgb, var(--se-gold) 48%, transparent);
  --se-node-start-accent: var(--se-gold);
  --se-btn-bg: color-mix(in srgb, var(--bg2) 90%, transparent);
  --se-btn-gold-bg: linear-gradient(135deg, color-mix(in srgb, var(--se-gold) 25%, transparent), color-mix(in srgb, var(--se-gold) 12%, transparent));
  --se-btn-gold-border: color-mix(in srgb, var(--se-gold) 55%, transparent);
  --se-btn-gold-text: var(--se-gold);
  --se-status-on: var(--se-success);
  --se-status-off: var(--text3);
  --se-minimap-bg: color-mix(in srgb, var(--bg) 96%, transparent);
  --se-minimap-mask: color-mix(in srgb, var(--accent) 10%, transparent);
  --se-minimap-mask-stroke: color-mix(in srgb, var(--accent) 55%, transparent);
}

.se-page--light {
  --se-gold: #f57f17;
  --se-success: #2e7d32;
  --se-danger: #c62828;
  --se-buy: #1976d2;
  --se-sell: #c62828;
  --se-title-gradient: linear-gradient(90deg, #1565c0, #1976d2);
  --se-panel-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --se-item-selected-bg: linear-gradient(135deg, rgba(25, 118, 210, 0.12), rgba(25, 118, 210, 0.04));
  --se-strat-item-bg: #ffffff;
  --se-strat-item-border: rgba(0, 0, 0, 0.1);
  --se-strat-item-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --se-strat-item-hover-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  --se-item-selected-border: rgba(25, 118, 210, 0.35);
  --se-item-selected-text: #1565c0;
  --se-center-bg: var(--bg);
  --se-canvas-border: rgba(0, 0, 0, 0.1);
  --se-canvas-inset: inset 0 0 40px rgba(0, 0, 0, 0.04);
  --se-canvas-sell-inset: inset 0 0 30px rgba(198, 40, 40, 0.04);
  --se-selection-border: rgba(25, 118, 210, 0.55);
  --se-toolbar-title: #1565c0;
  --se-terminal-bg: #ffffff;
  --se-terminal-border: rgba(0, 0, 0, 0.1);
  --se-terminal-label: #757575;
  --se-terminal-code: #1565c0;
  --se-tab-active: #1565c0;
  --se-palette-hover-border: rgba(25, 118, 210, 0.45);
  --se-node-logic-bg: linear-gradient(145deg, rgba(25, 118, 210, 0.08), #ffffff);
  --se-node-cond-bg: linear-gradient(145deg, rgba(46, 125, 50, 0.08), #ffffff);
  --se-node-cond-border: rgba(46, 125, 50, 0.35);
  --se-node-start-bg: linear-gradient(145deg, rgba(245, 127, 23, 0.14), #ffffff);
  --se-node-start-border: rgba(245, 127, 23, 0.42);
  --se-node-start-accent: #e65100;
  --se-btn-gold-bg: linear-gradient(135deg, rgba(25, 118, 210, 0.12), rgba(25, 118, 210, 0.04));
  --se-btn-gold-border: rgba(25, 118, 210, 0.45);
  --se-btn-gold-text: #1565c0;
  --se-status-on: #2e7d32;
  --se-minimap-bg: rgba(255, 255, 255, 0.98);
  --se-edge: rgba(25, 118, 210, 0.55);
  --se-palette-logic-and-accent: #1976d2;
  --se-palette-logic-and-bg: rgba(25, 118, 210, 0.08);
  --se-palette-logic-or-accent: #0288d1;
  --se-palette-logic-or-bg: rgba(2, 136, 209, 0.08);
  --se-palette-logic-not-accent: #f57f17;
  --se-palette-logic-not-bg: rgba(245, 127, 23, 0.08);
  --se-palette-logic-start-accent: #e65100;
  --se-palette-logic-start-bg: rgba(255, 152, 0, 0.14);
  --se-palette-band-accent: #7b1fa2;
  --se-palette-band-bg: rgba(123, 31, 162, 0.07);
  --se-palette-ind-accent: #2e7d32;
  --se-palette-ind-bg: rgba(46, 125, 50, 0.08);
  --se-palette-section-logic: #1565c0;
  --se-palette-section-band: #7b1fa2;
  --se-palette-section-ind: #2e7d32;
}

.se-page--blue {
  --se-gold: #ffd54f;
  --se-success: #69f0ae;
  --se-buy: #5eb5ff;
  --se-sell: #ff5555;
  --se-title-gradient: linear-gradient(90deg, #ffd54f, #ffe082);
  --se-item-selected-bg: linear-gradient(135deg, rgba(255, 213, 79, 0.18), rgba(94, 181, 255, 0.08));
  --se-strat-item-bg: color-mix(in srgb, var(--bg2) 92%, transparent);
  --se-strat-item-border: color-mix(in srgb, var(--accent) 18%, transparent);
  --se-strat-item-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  --se-strat-item-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
  --se-item-selected-border: rgba(255, 213, 79, 0.38);
  --se-item-selected-text: #ffd54f;
  --se-center-bg: radial-gradient(circle at 50% 40%, rgba(94, 181, 255, 0.06) 0%, transparent 50%), var(--bg);
  --se-toolbar-title: #ffd54f;
  --se-terminal-code: #5eb5ff;
  --se-tab-active: #ffd54f;
  --se-node-logic-bg: linear-gradient(145deg, rgba(94, 181, 255, 0.14), rgba(12, 25, 41, 0.92));
  --se-node-cond-bg: linear-gradient(145deg, rgba(105, 240, 174, 0.12), rgba(12, 25, 41, 0.92));
  --se-node-cond-border: rgba(105, 240, 174, 0.38);
  --se-node-start-bg: linear-gradient(145deg, rgba(255, 213, 79, 0.18), rgba(12, 25, 41, 0.92));
  --se-node-start-border: rgba(255, 213, 79, 0.45);
  --se-node-start-accent: #ffd54f;
  --se-btn-gold-text: #ffd54f;
  --se-minimap-bg: rgba(12, 25, 41, 0.96);
  --se-palette-logic-and-accent: #5eb5ff;
  --se-palette-logic-and-bg: rgba(94, 181, 255, 0.12);
  --se-palette-logic-or-accent: #4dd0e1;
  --se-palette-logic-or-bg: rgba(77, 208, 225, 0.12);
  --se-palette-logic-not-accent: #ffd54f;
  --se-palette-logic-not-bg: rgba(255, 213, 79, 0.12);
  --se-palette-logic-start-accent: #ffb300;
  --se-palette-logic-start-bg: rgba(255, 179, 0, 0.18);
  --se-palette-band-accent: #ce93d8;
  --se-palette-band-bg: rgba(206, 147, 216, 0.12);
  --se-palette-ind-accent: #69f0ae;
  --se-palette-ind-bg: rgba(105, 240, 174, 0.1);
  --se-palette-section-logic: #5eb5ff;
  --se-palette-section-band: #ce93d8;
  --se-palette-section-ind: #69f0ae;
}

/* Light theme — flow node & handle tweaks */
.se-page--light .se-flow-node--logic.se-flow-node--sell-mode {
  background: linear-gradient(145deg, rgba(198, 40, 40, 0.08), #ffffff);
  box-shadow: 0 2px 12px rgba(198, 40, 40, 0.08);
}
.se-page--light .se-flow-node--cond.se-flow-node--sell-mode {
  border-color: rgba(198, 40, 40, 0.35);
  box-shadow: 0 2px 12px rgba(198, 40, 40, 0.06);
}
.se-page--light .se-flow-gate-badge { color: #1565c0; }
.se-page--light .se-flow-start-label { color: var(--se-node-start-accent, #e65100); }
.se-page--light .se-flow-start-dot { background: var(--se-node-start-accent, #e65100); }
.se-page--light .se-flow-cond-badge { color: #2e7d32; }
.se-page--light .se-flow-node--cross .se-flow-cond-badge { color: #f57f17; }
.se-page--light .se-flow-node--sell-mode .se-flow-cond-badge { color: #c62828; }
.se-page--light .se-flow-handle {
  background: #1976d2 !important;
  border-color: #0d47a1 !important;
  box-shadow: 0 0 6px rgba(25, 118, 210, 0.35);
}
.se-page--light .se-flow-handle--active {
  background: #f57f17 !important;
  border-color: #e65100 !important;
}
.se-page--light .se-flow-edge { filter: none; }
.se-page--light .se-flow-edge--selected { filter: none; }
.se-page--light .se-canvas-wrap .react-flow__controls-button {
  color: #1976d2 !important;
  fill: #1976d2 !important;
}
.se-page--light .se-node-config-bar .sp-cond-sel,
.se-page--light .se-node-config-bar .sp-cond-num {
  background: #fff;
  color: #212121;
}

.se-page--blue .se-flow-gate-badge { color: #5eb5ff; }
.se-page--blue .se-flow-start-label { color: var(--se-node-start-accent, #ffd54f); }
.se-page--blue .se-flow-start-dot { background: var(--se-node-start-accent, #ffd54f); }
.se-page--blue .se-flow-cond-badge { color: #69f0ae; }
.se-page--blue .se-flow-handle {
  background: #5eb5ff !important;
  border-color: #1565c0 !important;
}
