/* ── 전략편집기 (Strategy Builder) — app theme tokens (strategyEditorTheme.css) ── */

.se-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: calc(100vh - 44px);
  min-height: 0;
  background: var(--se-bg);
  color: var(--se-text);
  overflow: hidden;
  position: relative;
}

.se-save-toast {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  padding: 10px 20px;
  border-radius: 8px;
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.45);
  color: #00ff88;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 0 24px rgba(0, 255, 136, 0.25);
  animation: se-toast-in 0.3s ease;
}

@keyframes se-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.se-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--se-header-border);
  background: var(--se-header-bg);
  flex-shrink: 0;
}

.se-header-left { display: flex; align-items: baseline; gap: 10px; }

.se-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  background: var(--se-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.se-subtitle { font-size: 0.72rem; color: var(--se-text-muted); }
.se-subtitle-hint { color: var(--se-accent, #7aa2f7); font-weight: 500; }

/* ── 빠른 백테스팅 실행 툴바 (se-quick-run) ─────────────────────────────── */
.se-quick-run {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.se-qr-market-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--se-btn-bg, var(--bg2));
  border: 1px solid var(--se-border);
  color: var(--se-text);
  border-radius: 7px;
  padding: 0 8px;
  font-size: 0.76rem;
  cursor: pointer;
  height: 30px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
  min-width: 88px;
  max-width: 140px;
}
.se-qr-market-btn:hover:not(:disabled) {
  border-color: var(--se-accent, #3d9be9);
  background: color-mix(in srgb, var(--se-accent, #3d9be9) 8%, var(--se-btn-bg, var(--bg2)));
}
.se-qr-market-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.se-qr-market-ko { font-weight: 600; font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.se-qr-market-sym { font-size: 0.68rem; color: var(--se-text-muted); flex-shrink: 0; }
.se-qr-market-caret { flex-shrink: 0; opacity: 0.55; margin-left: 2px; }

.se-qr-select {
  background: var(--se-btn-bg, var(--bg2));
  border: 1px solid var(--se-border);
  color: var(--se-text);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 0.76rem;
  cursor: pointer;
  height: 30px;
  outline: none;
  transition: border-color 0.15s;
}
.se-qr-select:focus  { border-color: var(--se-accent, #3d9be9); }
.se-qr-select:disabled { opacity: 0.45; cursor: not-allowed; }
.se-qr-select--strategy { flex: 1; min-width: 80px; max-width: 180px; }

.se-qr-run-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--se-accent, #3d9be9);
  background: color-mix(in srgb, var(--se-accent, #3d9be9) 18%, transparent);
  color: var(--se-accent, #3d9be9);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.se-qr-run-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--se-accent, #3d9be9) 32%, transparent);
  transform: scale(1.08);
}
.se-qr-run-btn:active:not(:disabled) { transform: scale(0.95); }
.se-qr-run-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.se-qr-run-btn--loading { border-color: var(--se-text-muted); color: var(--se-text-muted); }

.se-qr-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: se-spin 0.7s linear infinite;
}
@keyframes se-spin { to { transform: rotate(360deg); } }

.se-qr-error {
  font-size: 0.71rem;
  color: var(--se-danger, #f23645);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
/* ─────────────────────────────────────────────────────────────────────────── */

.se-header-actions { display: flex; align-items: center; gap: 8px; }

.se-editor-mode {
  display: inline-flex;
  border: 1px solid var(--se-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--se-btn-bg);
}

.se-editor-mode-btn {
  border: none;
  background: transparent;
  color: var(--se-text-muted);
  padding: 7px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.se-editor-mode-btn:hover {
  color: var(--se-text);
  background: color-mix(in srgb, var(--se-accent) 8%, transparent);
}

.se-editor-mode-btn--on {
  color: var(--se-text);
  background: color-mix(in srgb, var(--se-accent) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--se-accent) 35%, transparent);
}

.se-editor-mode--compact {
  flex-shrink: 0;
}

.se-editor-mode--compact .se-editor-mode-btn {
  padding: 6px 10px;
  font-size: 0.72rem;
}

.se-list-editor {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin: 8px 12px 12px;
  padding: 12px;
  padding-bottom: 28px;
  border: 1px dashed var(--se-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--se-center-bg) 92%, var(--se-accent) 8%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  transition: border-color 0.15s, background 0.15s;
}

/* App.css .sp-dropzone 와 중복 flex/overflow 정리 */
.se-list-editor.sp-dropzone {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px;
  padding-bottom: 28px;
}

.se-list-editor--over {
  border-color: var(--se-node-start-border, var(--se-gold));
  background: color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 8%, var(--se-center-bg));
}

.sp-start-section {
  border: 1px solid var(--se-node-start-border);
  border-radius: 10px;
  background: var(--se-node-start-bg);
  box-shadow: 0 0 14px color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 14%, transparent);
  flex-shrink: 0;
  overflow: visible;
}

.sp-start-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--se-node-start-border) 70%, transparent);
  background: color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 8%, transparent);
}

.sp-start-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--se-node-start-accent, var(--se-gold));
  box-shadow: 0 0 6px color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 50%, transparent);
  flex-shrink: 0;
}

.sp-start-label {
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--se-node-start-accent, var(--se-gold));
}

.sp-start-tf-checks {
  flex: 1;
  min-width: 0;
}

.se-start-tf-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
}

.se-start-tf-checks--compact {
  gap: 2px 5px;
}

.se-start-tf-check {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  color: var(--se-text-muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.se-start-tf-checks--compact .se-start-tf-check {
  font-size: 0.58rem;
}

.se-start-tf-check input {
  margin: 0;
  accent-color: var(--se-node-start-accent, var(--se-gold));
  cursor: pointer;
}

.se-start-tf-check:has(input:checked) {
  color: var(--se-text);
  font-weight: 600;
}

.se-flow-start-tf-checks-wrap {
  width: 100%;
}

.se-start-tf-checks--graph {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 2px;
  row-gap: 4px;
  width: 100%;
}

.se-start-tf-checks-row {
  display: contents;
}

.se-start-tf-checks--graph .se-start-tf-check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  font-size: 0.58rem;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.se-start-tf-checks--graph .se-start-tf-check input {
  flex-shrink: 0;
}

.se-flow-start-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}

.se-flow-start-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

.se-flow-start-title-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sp-start-del {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: color-mix(in srgb, var(--se-danger) 15%, transparent);
  color: var(--se-danger);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.sp-start-body {
  padding: 10px 12px 12px;
  min-height: 56px;
  height: auto;
  overflow: visible;
  transition: background 0.15s;
}

/* 목록형: START 내부 조건 트리 전체 표시 */
.se-list-editor .sp-tree-node {
  flex-shrink: 0;
  overflow: visible;
}

.se-list-editor .sp-node-label {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.35;
}

.se-list-editor .sp-node-children {
  overflow: visible;
}

.se-list-editor .sp-cond-editor {
  overflow: visible;
}

.se-list-editor .sp-cond-row4 {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.sp-start-body--over {
  background: color-mix(in srgb, var(--se-accent) 10%, transparent);
}

.sp-drop-empty--section {
  margin: 0;
  padding: 16px 8px;
  font-size: 0.78rem;
}

.se-btn {
  border: 1px solid var(--se-border);
  background: var(--se-btn-bg);
  color: var(--se-text);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.se-btn:hover { border-color: color-mix(in srgb, var(--se-accent) 50%, transparent); }
.se-btn--ghost { background: transparent; }
.se-btn--icon {
  min-width: 34px;
  padding: 7px 10px;
  font-size: 0.9rem;
  line-height: 1;
}
.se-btn--icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.se-btn--gold {
  background: var(--se-btn-gold-bg);
  border-color: var(--se-btn-gold-border);
  color: var(--se-btn-gold-text);
  font-weight: 700;
  box-shadow: 0 0 16px color-mix(in srgb, var(--se-gold) 15%, transparent);
}
.se-btn--gold:hover { box-shadow: 0 0 24px color-mix(in srgb, var(--se-gold) 30%, transparent); }
.se-btn--danger { border-color: color-mix(in srgb, var(--se-danger) 50%, transparent); color: var(--se-danger); }

.se-body {
  flex: 1;
  min-height: 0;
  display: flex;
  min-width: 0;
  align-items: stretch;
  padding-bottom: 10px;
  box-sizing: border-box;
}

.se-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 0 0;
  box-sizing: border-box;
}

.se-main-row {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  gap: 10px;
  overflow: hidden;
}

.se-splitter {
  flex-shrink: 0;
  background: var(--se-splitter-bg);
  transition: background 0.12s, box-shadow 0.12s;
  touch-action: none;
  z-index: 6;
}
.se-splitter:hover,
.se-splitter.se-splitter--active {
  background: var(--se-splitter-active);
  box-shadow: 0 0 10px color-mix(in srgb, var(--se-accent) 20%, transparent);
}
.se-splitter--v {
  width: 5px;
  cursor: col-resize;
}
.se-splitter--h {
  height: 5px;
  margin: 0 8px;
  border-radius: 3px;
  cursor: row-resize;
  flex-shrink: 0;
}

/* ── Left: strategy list card ── */
.se-left {
  flex-shrink: 0;
  border-right: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: stretch;
  background: var(--se-panel-shell-bg);
  padding: 10px 10px 0;
}

.se-strat-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 12px 12px;
  border-radius: 14px;
  background: var(--se-panel-card-bg);
  border: 1px solid var(--se-panel-card-border);
  box-shadow: var(--se-panel-card-shadow), inset 0 1px 0 color-mix(in srgb, var(--se-text) 4%, transparent);
}

.se-strat-panel-head {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--se-border);
}

.se-panel-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--se-text);
}

.se-new-strat-btn {
  flex-shrink: 0;
  width: 100%;
  margin: 0 0 12px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--se-border);
  background: var(--se-btn-bg);
  color: var(--se-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.se-new-strat-btn:hover {
  background: var(--se-item-hover-bg);
  border-color: color-mix(in srgb, var(--se-accent) 28%, transparent);
  color: var(--se-accent);
}

.se-strat-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 1px 4px;
}

.se-strat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 13px;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid var(--se-strat-item-border);
  background: var(--se-strat-item-bg);
  box-shadow: var(--se-strat-item-shadow);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  outline: none;
}
.se-strat-item:hover {
  background: var(--se-item-hover-bg);
  border-color: color-mix(in srgb, var(--se-accent) 28%, transparent);
  box-shadow: var(--se-strat-item-hover-shadow);
  transform: translateY(-1px);
}
.se-strat-item--sel {
  background: var(--se-item-selected-bg);
  border-color: var(--se-item-selected-border);
  box-shadow:
    var(--se-strat-item-hover-shadow),
    0 0 0 1px color-mix(in srgb, var(--se-item-selected-border) 45%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
  transform: translateY(-1px);
}
.se-strat-item--sel:hover {
  background: var(--se-item-selected-bg);
  box-shadow:
    var(--se-strat-item-hover-shadow),
    0 0 0 1px color-mix(in srgb, var(--se-item-selected-border) 45%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
}
.se-strat-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--se-accent) 55%, transparent);
  outline-offset: 2px;
}

.se-strat-name {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--se-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.se-strat-item--sel .se-strat-name {
  color: var(--se-item-selected-text);
}

.se-strat-item-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.se-strat-del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--se-text-dim);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.se-strat-item--sel .se-strat-del {
  color: color-mix(in srgb, var(--se-item-selected-text) 85%, transparent);
}
.se-strat-del:hover {
  color: var(--se-danger);
  background: color-mix(in srgb, var(--se-danger) 15%, transparent);
}

.se-strat-status {
  flex-shrink: 0;
  min-width: 36px;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--se-text-muted);
  background: color-mix(in srgb, var(--se-text-muted) 10%, transparent);
  border: 1px solid var(--se-border);
}
.se-strat-status--on {
  color: var(--se-status-on);
  background: color-mix(in srgb, var(--se-status-on) 10%, transparent);
  border-color: color-mix(in srgb, var(--se-status-on) 28%, transparent);
}
.se-strat-item--sel .se-strat-status--on {
  color: var(--se-item-selected-text);
  background: color-mix(in srgb, var(--se-gold) 15%, transparent);
  border-color: color-mix(in srgb, var(--se-gold) 35%, transparent);
}

.se-empty {
  font-size: 0.78rem;
  color: var(--se-text-dim);
  text-align: center;
  padding: 20px 8px;
}

/* ── Center ── */
.se-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: stretch;
  background: transparent;
}

.se-center-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--se-panel-card-bg);
  border: 1px solid var(--se-panel-card-border);
  box-shadow: var(--se-panel-card-shadow), inset 0 1px 0 color-mix(in srgb, var(--se-text) 4%, transparent);
  overflow: hidden;
}

.se-center-work {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.se-center-work--list .se-list-editor {
  flex: 1;
  min-height: 0;
}

.se-center-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px 0;
  flex-shrink: 0;
}

.se-center-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.se-btn--sm {
  padding: 6px 12px;
  font-size: 0.74rem;
}

.se-start-combine {
  display: flex;
  align-items: center;
  gap: 8px;
}

.se-center-head .se-start-combine {
  margin-left: 0;
}

.se-start-combine-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--se-text-muted);
  white-space: nowrap;
}

.se-start-combine-toggle {
  display: inline-flex;
  border: 1px solid var(--se-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--se-btn-bg);
}

.se-start-combine-btn {
  border: none;
  background: transparent;
  color: var(--se-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.se-start-combine-btn--and.se-start-combine-btn--on {
  background: color-mix(in srgb, #4caf50 22%, transparent);
  color: #4caf50;
}

.se-start-combine-btn--or.se-start-combine-btn--on {
  background: color-mix(in srgb, #2196f3 22%, transparent);
  color: #2196f3;
}

.se-start-combine-btn:hover:not(.se-start-combine-btn--on) {
  background: color-mix(in srgb, var(--se-accent) 10%, transparent);
  color: var(--se-text);
}

.se-signal-tabs { display: flex; gap: 6px; }

.se-signal-tab {
  border: 1px solid var(--se-border);
  background: var(--se-btn-bg);
  color: var(--se-text-muted);
  border-radius: 8px 8px 0 0;
  padding: 7px 16px;
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.15s;
}
.se-signal-tab--buy-on {
  color: var(--se-buy);
  border-color: color-mix(in srgb, var(--se-buy) 50%, transparent);
  background: color-mix(in srgb, var(--se-buy) 10%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--se-buy) 15%, transparent);
}
.se-signal-tab--sell-on {
  color: var(--se-sell);
  border-color: color-mix(in srgb, var(--se-sell) 50%, transparent);
  background: color-mix(in srgb, var(--se-sell) 10%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--se-sell) 15%, transparent);
}

.se-editing-name {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--se-gold) 85%, transparent);
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--se-gold) 25%, transparent);
  border-radius: 999px;
}

.se-canvas-wrap {
  flex: 1;
  min-height: 0;
  margin: 0 10px;
  border: 1px solid var(--se-canvas-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--se-canvas-inset);
}
.se-canvas-wrap--sell {
  border-color: var(--se-canvas-sell-border);
  box-shadow: var(--se-canvas-sell-inset);
}

.se-canvas-wrap .react-flow { background: transparent; }

.se-canvas-wrap .react-flow__selection {
  background: var(--se-selection-bg);
  border: 1px dashed var(--se-selection-border);
  border-radius: 4px;
}
.se-flow-bg { opacity: 0.4; }

.se-canvas-toolbar {
  background: var(--se-toolbar-bg);
  border: 1px solid var(--se-border);
  border-radius: 8px;
  padding: 5px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.se-canvas-toolbar-title { font-size: 0.72rem; font-weight: 700; color: var(--se-toolbar-title); }
.se-canvas-toolbar-hint { font-size: 0.65rem; color: var(--se-text-muted); }

.se-canvas-interaction {
  display: inline-flex;
  border: 1px solid var(--se-border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.se-canvas-interaction-btn {
  border: none;
  background: transparent;
  color: var(--se-text-muted);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.se-canvas-interaction-btn:hover {
  background: color-mix(in srgb, var(--se-accent) 10%, transparent);
  color: var(--se-text);
}
.se-canvas-interaction-btn--on {
  background: color-mix(in srgb, var(--se-accent) 18%, transparent);
  color: var(--se-tab-active);
  box-shadow: inset 0 -2px 0 var(--se-tab-active);
}

.se-canvas-auto-layout {
  margin: 8px 10px 0 0;
}

.se-canvas-auto-layout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--se-border);
  border-radius: 8px;
  background: var(--se-toolbar-bg);
  color: var(--se-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--se-bg) 40%, transparent);
}

.se-canvas-auto-layout-btn:hover {
  background: color-mix(in srgb, var(--se-accent) 12%, var(--se-toolbar-bg));
  color: var(--se-tab-active);
  border-color: color-mix(in srgb, var(--se-accent) 35%, var(--se-border));
}

.se-canvas-auto-layout-btn:active {
  transform: scale(0.96);
}

.se-canvas-wrap--pan .react-flow__pane {
  cursor: grab;
}
.se-canvas-wrap--pan .react-flow__pane:active {
  cursor: grabbing;
}
.se-canvas-wrap--select .react-flow__pane {
  cursor: default;
}

.se-canvas-empty {
  background: var(--se-toolbar-bg);
  border: 1px dashed var(--se-border);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 0.76rem;
  color: var(--se-text-muted);
}

/* ── React Flow controls & minimap (editor theme) ── */
.se-flow-controls,
.se-flow-minimap {
  background: var(--se-control-bg) !important;
  border: 1px solid var(--se-control-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 16px color-mix(in srgb, var(--se-accent) 6%, transparent) !important;
  overflow: hidden;
}

.se-canvas-wrap .se-flow-controls .react-flow__controls-button {
  width: 28px !important;
  height: 28px !important;
  background: var(--se-control-bg) !important;
  border: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--se-accent) 12%, transparent) !important;
  color: var(--se-control-icon) !important;
  fill: var(--se-control-icon) !important;
  transition: background 0.12s, color 0.12s;
}
.se-canvas-wrap .se-flow-controls .react-flow__controls-button:last-child {
  border-bottom: none !important;
}
.se-canvas-wrap .se-flow-controls .react-flow__controls-button:hover {
  background: var(--se-control-hover) !important;
  color: var(--se-accent) !important;
  fill: var(--se-accent) !important;
}
.se-canvas-wrap .se-flow-controls .react-flow__controls-button svg {
  fill: currentColor !important;
  max-width: 14px;
  max-height: 14px;
}

.se-canvas-wrap--sell .se-flow-controls .react-flow__controls-button {
  color: color-mix(in srgb, var(--se-sell) 88%, transparent) !important;
  fill: color-mix(in srgb, var(--se-sell) 88%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--se-sell) 12%, transparent) !important;
}
.se-canvas-wrap--sell .se-flow-controls .react-flow__controls-button:hover {
  background: color-mix(in srgb, var(--se-sell) 14%, transparent) !important;
  color: var(--se-sell) !important;
  fill: var(--se-sell) !important;
}

.se-canvas-wrap--sell .se-flow-minimap {
  border-color: color-mix(in srgb, var(--se-sell) 22%, transparent) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 16px color-mix(in srgb, var(--se-sell) 6%, transparent) !important;
}

.se-flow-edge {
  stroke: var(--se-edge);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--se-accent) 50%, transparent));
}
.se-flow-edge--selected {
  stroke: var(--se-accent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--se-accent) 85%, transparent));
}
.se-canvas-wrap--sell .se-flow-edge {
  stroke: color-mix(in srgb, var(--se-sell) 65%, transparent);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--se-sell) 40%, transparent));
}
.se-canvas-wrap--sell .se-flow-edge--selected {
  stroke: var(--se-sell);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--se-sell) 75%, transparent));
}

.se-flow-edge-del {
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(248, 113, 113, 0.6);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.95);
  color: #f87171;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: background 0.15s, transform 0.15s;
}
.se-flow-edge-del:hover {
  background: rgba(248, 113, 113, 0.25);
  scale: 1.1;
}

.se-flow-edge-hit {
  pointer-events: stroke;
}
.se-flow-edge-hit--source { cursor: grab; }
.se-flow-edge-hit--middle { cursor: move; }
.se-flow-edge-hit--target { cursor: grab; }

.se-selection-delete {
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(248, 113, 113, 0.65);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.96);
  color: #f87171;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 12px rgba(248, 113, 113, 0.35);
  transition: background 0.15s, scale 0.15s;
}
.se-selection-delete:hover {
  background: rgba(248, 113, 113, 0.28);
  scale: 1.08;
}

/* ── Flow nodes ── */
.se-flow-node {
  position: relative;
  min-width: 130px;
  border-radius: 10px;
  font-size: 0.75rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}

.se-flow-node--start {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px 10px;
  min-width: 150px;
  background: var(--se-node-start-bg);
  border: 1px solid var(--se-node-start-border);
  color: var(--se-text-muted);
  box-shadow: 0 0 18px color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 20%, transparent);
}
.se-flow-node--start.se-flow-node--sell-mode {
  background: linear-gradient(145deg, color-mix(in srgb, var(--se-sell) 18%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
  border-color: color-mix(in srgb, var(--se-sell) 42%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--se-sell) 16%, transparent);
}
.se-flow-start-label {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  color: var(--se-node-start-accent, var(--se-gold));
}
.se-flow-del--start {
  position: static;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  line-height: 16px;
  font-size: 14px;
}
.se-flow-start-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--se-node-start-accent, var(--se-gold));
  box-shadow: 0 0 8px color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 55%, transparent);
}

.se-flow-node--logic {
  background: var(--se-node-logic-bg);
  border: 1px solid var(--se-gate-color, var(--se-accent));
  padding: 12px 16px;
  min-width: 110px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--se-accent) 20%, transparent);
}
.se-flow-node--logic.se-flow-node--sell-mode {
  background: linear-gradient(145deg, color-mix(in srgb, var(--se-sell) 18%, transparent), color-mix(in srgb, var(--se-bg) 92%, transparent));
  box-shadow: 0 0 20px color-mix(in srgb, var(--se-sell) 15%, transparent);
}

.se-flow-gate-head {
  display: flex;
  align-items: center;
  justify-content: center;
}
.se-logic-gate-toggle {
  display: inline-flex;
}
.se-logic-gate-toggle--compact .se-start-combine-btn {
  padding: 3px 9px;
  font-size: 0.68rem;
  min-width: 0;
}
.se-flow-gate-badge {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--se-accent);
  letter-spacing: 0.06em;
}
.se-flow-gate-hint { font-size: 0.62rem; color: var(--se-text-dim); display: block; margin-top: 4px; }

.se-flow-node--cond {
  padding: 10px 14px;
  border: 1px solid var(--se-node-cond-border);
  background: var(--se-node-cond-bg);
  min-width: 170px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--se-success) 12%, transparent);
}
.se-flow-node--cross {
  border-color: color-mix(in srgb, var(--se-gold) 50%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--se-gold) 14%, transparent), color-mix(in srgb, var(--se-bg) 92%, transparent));
  box-shadow: 0 0 16px color-mix(in srgb, var(--se-gold) 12%, transparent);
}
.se-flow-node--cond.se-flow-node--sell-mode {
  border-color: color-mix(in srgb, var(--se-sell) 45%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--se-sell) 12%, transparent);
}

.se-flow-cond-badge { font-size: 0.65rem; font-weight: 800; color: var(--se-success); margin-bottom: 0; }
.se-flow-cond-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}
.se-flow-cond-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.se-flow-node--cond { position: relative; }
.se-flow-node--cross .se-flow-cond-badge { color: var(--se-gold); }
.se-flow-node--sell-mode .se-flow-cond-badge { color: var(--se-sell); }
.se-flow-cond-text { font-size: 0.7rem; line-height: 1.35; color: var(--se-node-text); word-break: break-word; }

.se-flow-node--selected {
  outline: 2px solid color-mix(in srgb, var(--se-gold) 70%, transparent);
  outline-offset: 2px;
}

.se-flow-node--orphan {
  border-style: dashed !important;
  opacity: 0.88;
  box-shadow: 0 0 12px rgba(148, 163, 184, 0.2) !important;
}
.se-flow-node--orphan .se-flow-cond-badge,
.se-flow-node--orphan .se-flow-gate-badge {
  opacity: 0.75;
}
.se-flow-node--drop {
  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.55), 0 0 28px rgba(0, 212, 255, 0.25);
}

.se-flow-del {
  position: static;
  border: none; background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 77, 109, 0.9);
  width: 18px; height: 18px; border-radius: 4px;
  cursor: pointer; font-size: 0.85rem; line-height: 1;
  opacity: 0;
  transition: opacity 0.12s;
  flex-shrink: 0;
}
.se-flow-settings {
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: var(--se-gold);
  width: 18px; height: 18px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
  flex-shrink: 0;
}
.se-flow-settings:hover {
  background: rgba(230, 194, 0, 0.2);
}
.se-flow-node:hover .se-flow-del,
.se-flow-node:hover .se-flow-settings,
.se-flow-node--selected .se-flow-del,
.se-flow-node--selected .se-flow-settings,
.se-flow-node--settings-open .se-flow-del,
.se-flow-node--settings-open .se-flow-settings {
  opacity: 1;
}

.se-flow-settings-pop {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 30;
  min-width: 148px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--se-gold) 45%, transparent);
  background: var(--se-bg-elevated);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.se-flow-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--se-gold);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.se-flow-settings-close {
  border: none;
  background: transparent;
  color: var(--se-text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.se-flow-settings-close:hover {
  color: var(--se-gold);
}
.se-flow-settings-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
  font-size: 0.62rem;
  color: var(--se-text-muted);
}
.se-flow-settings-field input,
.se-flow-settings-field .se-combo-num-input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--se-input-border);
  background: var(--se-input-bg);
  color: var(--se-text);
  font-size: 0.72rem;
}
.se-combo-num { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.se-combo-num--always-input .se-combo-num-input { order: -1; }
.se-combo-num-select { width: 100%; }

.se-combo-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.se-combo-field--custom-only {
  gap: 6px;
}
.se-combo-field-select { width: 100%; }
.se-combo-field-custom-input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--se-input-border);
  background: var(--se-input-bg);
  color: var(--se-text);
  font-size: 0.72rem;
}
.se-combo-field-custom-input:focus {
  outline: none;
  border-color: var(--se-input-focus);
}
.sp-cond-field .se-combo-field { margin-top: 0; }
.se-combo-num-input:focus {
  outline: none;
  border-color: var(--se-input-focus);
}
.se-flow-settings-hint {
  margin: 4px 0 0;
  font-size: 0.58rem;
  color: var(--se-text-dim);
}
.se-flow-settings-hint--muted {
  opacity: 0.85;
}
.se-field-readout {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--se-text) 4%, transparent);
  color: var(--se-text-muted);
  font-size: 0.82rem;
}
.se-flow-gate-stoch-pair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--se-border) 70%, transparent);
}
.se-flow-gate-stoch-pair-title {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--se-palette-composite-accent, #a78bfa);
  line-height: 1.3;
  text-align: left;
}
.se-flow-node--stoch-pair {
  min-height: 88px;
}

.se-flow-handle {
  width: 9px !important; height: 9px !important;
  background: var(--se-handle) !important;
  border: 2px solid color-mix(in srgb, var(--se-bg) 80%, var(--se-accent)) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--se-accent) 60%, transparent);
  opacity: 0.35;
  transition: opacity 0.12s, transform 0.12s;
}
.se-flow-node:hover .se-flow-handle,
.se-flow-node.se-flow-node--selected .se-flow-handle,
.se-flow-node.se-flow-node--drop .se-flow-handle {
  opacity: 1;
}
.se-flow-handle:hover {
  opacity: 1 !important;
  transform: scale(1.25);
}
.se-flow-handle--active {
  opacity: 1 !important;
  transform: scale(1.45);
  background: var(--se-gold) !important;
  border-color: color-mix(in srgb, var(--se-gold) 40%, var(--se-bg)) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--se-gold) 95%, transparent);
  z-index: 2;
}
.se-flow-handle--valid-hover {
  opacity: 1 !important;
  transform: scale(1.35);
  background: #34d399 !important;
  border-color: #065f46 !important;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.85);
  z-index: 2;
}
.se-flow-handle--invalid {
  opacity: 1 !important;
  width: 16px !important;
  height: 16px !important;
  transform: scale(1.35);
  background: rgba(15, 23, 42, 0.95) !important;
  border-color: #f87171 !important;
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.85);
  z-index: 3;
}
.se-flow-handle--invalid::after {
  content: '×';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: #f87171;
  pointer-events: none;
}
.se-flow-handle--disabled {
  opacity: 0.08 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}
.se-flow-handle--out { opacity: 0.35; }

/* ── Node config bar ── */
.se-node-config-bar {
  flex-shrink: 0;
  margin: 6px 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--se-accent) 25%, transparent);
  background: var(--se-toolbar-bg);
  box-shadow: 0 0 24px color-mix(in srgb, var(--se-accent) 8%, transparent);
}
.se-node-config-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--se-accent);
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--se-accent) 35%, transparent);
  border-radius: 999px;
  margin-bottom: 8px;
}
.se-sync-tip {
  display: block;
  margin-top: 6px;
  font-size: 0.65rem;
  color: color-mix(in srgb, var(--se-success) 75%, transparent);
}
.se-node-config-bar .sp-cond-editor { margin: 0; }

.sp-cond-readout {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--se-input-border);
  background: color-mix(in srgb, var(--se-text) 4%, transparent);
  color: var(--se-text-muted);
  font-size: 0.72rem;
}

.se-node-config-bar--stoch-pair {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
}
.se-stoch-pair-inline-settings {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-end;
  min-width: 0;
}
.se-stoch-pair-inline-settings .se-flow-settings-field {
  min-width: 140px;
  margin: 0;
}
.se-stoch-pair-inline-settings .se-flow-settings-hint {
  flex: 1 1 100%;
  margin: 0;
}

.sp-cond-row-composite-tf {
  background: var(--se-input-bg);
  border-color: var(--se-input-border);
  color: var(--se-text);
  font-size: 0.72rem;
}

/* ── Terminal ── */
.se-terminal {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: none;
  border-top: 1px solid var(--se-terminal-border);
  border-radius: 0;
  background: var(--se-terminal-bg);
  overflow: hidden;
  min-height: 88px;
}
.se-terminal-label {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--se-terminal-label);
  padding: 6px 12px;
  border-bottom: 1px solid var(--se-border);
}
.se-terminal-text {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 10px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--se-terminal-code);
  white-space: pre-wrap;
  overflow-y: auto;
}
.se-terminal-text--rich {
  display: block;
}
.se-formula-line + .se-formula-line {
  margin-top: 0.35em;
}
.se-formula-punc {
  color: var(--se-text-dim);
}
.se-formula-detail {
  color: var(--se-text-muted);
}
.se-formula-empty,
.se-formula-comment {
  color: var(--se-text-dim);
  font-style: italic;
}
.se-formula-signal--buy {
  color: var(--se-buy);
  font-weight: 700;
}
.se-formula-signal--sell {
  color: var(--se-sell);
  font-weight: 700;
}
.se-formula-tf {
  color: var(--se-accent);
  font-weight: 700;
  font-size: 0.85em;
}
.se-formula-logic {
  font-weight: 800;
  letter-spacing: 0.03em;
}
.se-formula-logic--and { color: var(--se-palette-logic-and-accent); }
.se-formula-logic--or { color: var(--se-palette-logic-or-accent); }
.se-formula-logic--not { color: var(--se-palette-logic-not-accent); }
.se-formula-ind {
  font-weight: 800;
}
.se-formula-ind--band { color: var(--se-palette-band-accent); }
.se-formula-ind--ind { color: var(--se-palette-ind-accent); }

/* ── Right palette ── */
.se-side-wrap {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-self: stretch;
  flex-shrink: 0;
  min-height: 0;
  height: 100%;
  position: relative;
  z-index: 8;
}

.se-side-wrap--right {
  flex-direction: row;
  min-width: 16px;
}

.se-panel-handle {
  align-self: center;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
  width: 16px;
  height: 56px;
  border: 1px solid var(--se-border);
  color: var(--se-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
  padding: 0;
  background: transparent;
}

.se-panel-handle--right {
  margin-right: -1px;
  background: var(--se-palette-bg);
  border-right: none;
  border-radius: 8px 0 0 8px;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
}

.se-panel-handle--right:hover {
  color: var(--se-text);
  background: color-mix(in srgb, var(--se-bg-muted) 70%, var(--se-palette-bg));
  box-shadow: -3px 0 14px rgba(0, 0, 0, 0.45);
}

.se-side-wrap--right.se-side-wrap--open .se-panel-handle--right,
.se-panel-handle--right.se-panel-handle--open {
  border-color: color-mix(in srgb, var(--se-accent) 35%, var(--se-border));
}

.se-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: stretch;
  background: transparent;
  overflow: hidden;
}

.se-right--collapsible {
  width: 0;
  flex: 0 0 0;
  min-width: 0;
  max-width: 0;
  transition:
    width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    flex-basis 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.se-right--collapsible.se-right--collapsible--open,
.se-side-wrap--right.se-side-wrap--open .se-right--collapsible {
  width: var(--se-right-width, 380px);
  flex: 0 0 var(--se-right-width, 380px);
  max-width: var(--se-right-width, 380px);
  min-width: var(--se-right-width, 380px);
}

.se-side-wrap--right .se-right--collapsible .se-palette-panel {
  flex: 1;
  min-height: 0;
  width: 100%;
  min-width: 0;
}

.se-side-wrap--right.se-side-wrap--open .se-right-tabs,
.se-side-wrap--right.se-side-wrap--open .se-right-body,
.se-right--collapsible--open .se-right-tabs,
.se-right--collapsible--open .se-right-body {
  min-width: var(--se-right-width, 380px);
}

.se-palette-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--se-panel-card-bg);
  border: 1px solid var(--se-panel-card-border);
  box-shadow: var(--se-panel-card-shadow), inset 0 1px 0 color-mix(in srgb, var(--se-text) 4%, transparent);
  overflow: hidden;
}

.se-right-tabs {
  display: flex;
  border-bottom: 1px solid var(--se-border);
}
.se-right-tab {
  flex: 1;
  padding: 10px 6px;
  border: none;
  background: transparent;
  color: var(--se-text-muted);
  font-size: 0.76rem;
  cursor: pointer;
}
.se-right-tab--on {
  color: var(--se-tab-active);
  box-shadow: inset 0 -2px 0 var(--se-tab-active);
}

.se-right-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.se-palette-search {
  margin: 10px 10px 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--se-input-border);
  background: var(--se-input-bg);
  color: var(--se-text);
  font-size: 0.78rem;
}
.se-palette-search:focus {
  outline: none;
  border-color: var(--se-input-focus);
  box-shadow: 0 0 12px color-mix(in srgb, var(--se-accent) 12%, transparent);
}

.se-palette-subtabs {
  display: flex;
  margin: 4px 10px 0;
  border-bottom: 1px solid var(--se-border);
  flex-shrink: 0;
}
.se-palette-subtab {
  flex: 1;
  padding: 8px 6px;
  border: none;
  background: transparent;
  color: var(--se-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.se-palette-subtab--on {
  color: var(--se-tab-active);
  box-shadow: inset 0 -2px 0 var(--se-tab-active);
}
.se-palette-subtab--aux.se-palette-subtab--on {
  color: var(--se-palette-section-ind, #2dd4bf);
  box-shadow: inset 0 -2px 0 var(--se-palette-section-ind, #2dd4bf);
}
.se-palette-subtab--composite.se-palette-subtab--on {
  color: var(--se-palette-section-composite, #c084fc);
  box-shadow: inset 0 -2px 0 var(--se-palette-section-composite, #c084fc);
}
.se-palette-subtab--range.se-palette-subtab--on {
  color: var(--se-palette-section-range, #f59e0b);
  box-shadow: inset 0 -2px 0 var(--se-palette-section-range, #f59e0b);
}

.se-palette-section--range .se-palette-toolbar-title {
  color: var(--se-palette-section-range, #f59e0b);
}

.se-palette-mode-input {
  width: auto;
  min-width: 34px;
  flex: 1;
  max-width: 52px;
}
.se-palette-mode-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 0.62rem;
  line-height: 1;
  flex-shrink: 0;
}
.se-palette-mode-mark--include {
  background: color-mix(in srgb, #38bdf8 18%, transparent);
  color: #38bdf8;
}
.se-palette-mode-mark--exclude {
  background: color-mix(in srgb, var(--se-palette-range-exclude-accent) 18%, transparent);
  color: var(--se-palette-range-exclude-accent);
}

.se-range-count {
  font-size: 0.65rem;
  color: var(--se-text-dim);
  font-weight: 600;
}

.se-range-mode-tabs {
  display: flex;
  gap: 4px;
  margin: 4px 10px 8px;
  flex-shrink: 0;
}
.se-range-mode-tab {
  flex: 1;
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--se-palette-range-accent) 28%, var(--se-border));
  background: color-mix(in srgb, var(--se-palette-range-accent) 6%, var(--se-btn-bg));
  color: var(--se-text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.se-range-mode-tab--on {
  border-color: color-mix(in srgb, var(--se-palette-section-range, #f59e0b) 50%, transparent);
  color: var(--se-palette-section-range, #f59e0b);
  background: color-mix(in srgb, var(--se-palette-section-range, #f59e0b) 10%, var(--se-btn-bg));
}
.se-range-mode-tab--include.se-range-mode-tab--on {
  border-color: color-mix(in srgb, #38bdf8 50%, transparent);
  color: #38bdf8;
  background: color-mix(in srgb, #38bdf8 10%, var(--se-btn-bg));
}
.se-range-mode-tab--exclude.se-range-mode-tab--on {
  border-color: color-mix(in srgb, #f87171 50%, transparent);
  color: #f87171;
  background: color-mix(in srgb, #f87171 10%, var(--se-btn-bg));
}

.se-range-hint {
  margin: 4px 10px 8px;
  font-size: 0.65rem;
  line-height: 1.45;
  color: var(--se-text-dim);
}

.se-range-selected-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 10px 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--se-palette-section-range, #f59e0b) 35%, var(--se-border));
  background: color-mix(in srgb, var(--se-palette-section-range, #f59e0b) 6%, var(--se-panel-card-bg));
}
.se-range-selected-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--se-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.se-range-category {
  margin: 0 10px 12px;
}
.se-range-category-title {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--se-text-dim);
}

.se-range-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.se-range-badge--include {
  background: color-mix(in srgb, #38bdf8 18%, transparent);
  color: #38bdf8;
}
.se-range-badge--exclude {
  background: color-mix(in srgb, #f87171 18%, transparent);
  color: #f87171;
}

.se-range-hint-tooltip {
  position: fixed;
  z-index: 10050;
  max-width: min(280px, calc(100vw - 24px));
  padding: 9px 11px;
  border-radius: 8px;
  /* body 포털 — :root(--text/--bg2) 사용 (.se-page 토큰 미상속) */
  color: var(--text, #c0caf5);
  background: color-mix(in srgb, var(--bg2, #24283b) 94%, var(--bg, #1a1b26));
  border: 1px solid color-mix(in srgb, #f59e0b 52%, var(--border, rgba(122, 162, 247, 0.22)));
  box-shadow:
    var(--popup-shadow, 0 8px 32px rgba(0, 0, 0, 0.55)),
    0 0 0 1px color-mix(in srgb, #f59e0b 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text, #c0caf5) 8%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
}

.se-range-hint-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: color-mix(in srgb, var(--bg2, #24283b) 94%, var(--bg, #1a1b26));
  border-right: 1px solid color-mix(in srgb, #f59e0b 52%, var(--border, rgba(122, 162, 247, 0.22)));
  border-bottom: 1px solid color-mix(in srgb, #f59e0b 52%, var(--border, rgba(122, 162, 247, 0.22)));
  transform: translateX(-50%) rotate(45deg);
}

.se-range-hint-tooltip-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: color-mix(in srgb, #f59e0b 72%, var(--text, #c0caf5));
  margin-bottom: 4px;
  line-height: 1.3;
}

.se-range-hint-tooltip-desc {
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--text2, #9aa5ce);
}

.se-palette-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.se-palette-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 8px;
  padding: 0 2px;
}
.se-palette-toolbar-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--se-text-dim);
  font-weight: 700;
}
.se-palette-section--aux .se-palette-toolbar-title { color: var(--se-palette-section-ind); }
.se-palette-section--composite .se-palette-toolbar-title { color: var(--se-palette-section-composite, #c084fc); }
.se-palette-section--range .se-palette-toolbar-title { color: var(--se-palette-section-range, #f59e0b); }

.se-range-grid {
  margin: 0 10px 10px;
}

.se-palette-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.se-palette-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--se-border);
  background: var(--se-btn-bg);
  color: var(--se-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.se-palette-tool-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--se-accent) 45%, transparent);
  color: var(--se-text);
  background: var(--se-bg-elevated);
}
.se-palette-tool-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.se-palette-tool-btn--danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--se-danger) 50%, transparent);
  color: var(--se-danger);
}

.se-palette-empty {
  margin: 12px 0 0;
  font-size: 0.72rem;
  color: var(--se-text-muted);
  text-align: center;
}

.se-palette-item-modal .se-field-lbl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.se-palette-section { padding: 0 10px 10px; }
.se-palette-section--scroll { flex: 1; overflow-y: auto; min-height: 0; }
.se-palette-section h3 {
  margin: 0 0 8px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--se-text-dim);
}
.se-palette-section--logic h3 { color: var(--se-palette-section-logic); }
.se-palette-section--band h3 { color: var(--se-palette-section-band); }
.se-palette-section--aux h3 { color: var(--se-palette-section-ind); }
.se-palette-section--composite h3 { color: var(--se-palette-section-composite, #c084fc); }

.se-palette-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.se-palette-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.se-palette-card {
  border-radius: 8px;
  padding: 8px;
  cursor: grab;
  border: 1px solid var(--se-border);
  background: var(--se-palette-card-bg);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s, background 0.12s;
}
.se-palette-card:hover {
  transform: translateY(-2px);
}

.se-palette-card--selected {
  outline: 2px solid var(--se-accent);
  outline-offset: 1px;
}

/* ── 논리 연산: AND / OR / NOT ── */
.se-palette-card--logic-and {
  border-color: color-mix(in srgb, var(--se-palette-logic-and-accent) 42%, transparent);
  background: var(--se-palette-logic-and-bg);
  box-shadow: inset 3px 0 0 var(--se-palette-logic-and-accent);
}
.se-palette-card--selected.se-palette-card--logic-and {
  outline-color: var(--se-palette-logic-and-accent);
}
.se-palette-card--logic-and .se-palette-card-icon {
  background: color-mix(in srgb, var(--se-palette-logic-and-accent) 22%, transparent);
  color: var(--se-palette-logic-and-accent);
}
.se-palette-card--logic-and:hover {
  border-color: color-mix(in srgb, var(--se-palette-logic-and-accent) 65%, transparent);
  box-shadow: inset 3px 0 0 var(--se-palette-logic-and-accent), 0 4px 14px color-mix(in srgb, var(--se-palette-logic-and-accent) 22%, transparent);
}

.se-palette-card--logic-or {
  border-color: color-mix(in srgb, var(--se-palette-logic-or-accent) 42%, transparent);
  background: var(--se-palette-logic-or-bg);
  box-shadow: inset 3px 0 0 var(--se-palette-logic-or-accent);
}
.se-palette-card--logic-or .se-palette-card-icon {
  background: color-mix(in srgb, var(--se-palette-logic-or-accent) 22%, transparent);
  color: var(--se-palette-logic-or-accent);
}
.se-palette-card--logic-or:hover {
  border-color: color-mix(in srgb, var(--se-palette-logic-or-accent) 65%, transparent);
  box-shadow: inset 3px 0 0 var(--se-palette-logic-or-accent), 0 4px 14px color-mix(in srgb, var(--se-palette-logic-or-accent) 22%, transparent);
}

.se-palette-card--logic-not {
  border-color: color-mix(in srgb, var(--se-palette-logic-not-accent) 42%, transparent);
  background: var(--se-palette-logic-not-bg);
  box-shadow: inset 3px 0 0 var(--se-palette-logic-not-accent);
}
.se-palette-card--logic-not .se-palette-card-icon {
  background: color-mix(in srgb, var(--se-palette-logic-not-accent) 22%, transparent);
  color: var(--se-palette-logic-not-accent);
}
.se-palette-card--logic-not:hover {
  border-color: color-mix(in srgb, var(--se-palette-logic-not-accent) 65%, transparent);
  box-shadow: inset 3px 0 0 var(--se-palette-logic-not-accent), 0 4px 14px color-mix(in srgb, var(--se-palette-logic-not-accent) 22%, transparent);
}

/* ── START (시간봉 시작점) ── */
.se-palette-card--logic-start {
  border-color: color-mix(in srgb, var(--se-palette-logic-start-accent) 52%, transparent);
  background: var(--se-palette-logic-start-bg);
  box-shadow: inset 3px 0 0 var(--se-palette-logic-start-accent);
}
.se-palette-card--selected.se-palette-card--logic-start {
  outline-color: var(--se-palette-logic-start-accent);
}
.se-palette-card--logic-start .se-palette-card-icon {
  background: color-mix(in srgb, var(--se-palette-logic-start-accent) 28%, transparent);
  color: var(--se-palette-logic-start-accent);
  font-weight: 900;
}
.se-palette-card--logic-start .se-palette-card-name {
  color: var(--se-palette-logic-start-accent);
}
.se-palette-card--logic-start:hover {
  border-color: color-mix(in srgb, var(--se-palette-logic-start-accent) 72%, transparent);
  box-shadow: inset 3px 0 0 var(--se-palette-logic-start-accent), 0 4px 14px color-mix(in srgb, var(--se-palette-logic-start-accent) 28%, transparent);
}

/* ── 밴드 · 추세 ── */
.se-palette-card--band {
  border-color: color-mix(in srgb, var(--se-palette-band-accent) 42%, transparent);
  background: var(--se-palette-band-bg);
  box-shadow: inset 3px 0 0 var(--se-palette-band-accent);
}
.se-palette-card--band .se-palette-card-icon {
  background: color-mix(in srgb, var(--se-palette-band-accent) 22%, transparent);
  color: var(--se-palette-band-accent);
}
.se-palette-card--band:hover {
  border-color: color-mix(in srgb, var(--se-palette-band-accent) 65%, transparent);
  box-shadow: inset 3px 0 0 var(--se-palette-band-accent), 0 4px 14px color-mix(in srgb, var(--se-palette-band-accent) 22%, transparent);
}

/* ── 보조지표 ── */
.se-palette-card--ind {
  border-color: color-mix(in srgb, var(--se-palette-ind-accent) 42%, transparent);
  background: var(--se-palette-ind-bg);
  box-shadow:
    inset 3px 0 0 var(--se-palette-ind-accent),
    inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
}
.se-palette-card--ind .se-palette-card-icon {
  background: color-mix(in srgb, var(--se-palette-ind-accent) 22%, transparent);
  color: var(--se-palette-ind-accent);
}
.se-palette-card--ind:hover {
  border-color: color-mix(in srgb, var(--se-palette-ind-accent) 65%, transparent);
  box-shadow:
    inset 3px 0 0 var(--se-palette-ind-accent),
    inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent),
    0 4px 14px color-mix(in srgb, var(--se-palette-ind-accent) 22%, transparent);
}

/* ── 복합지표 ── */
.se-palette-card--composite {
  border-color: color-mix(in srgb, #c084fc 42%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, #c084fc 22%, var(--bg2)), color-mix(in srgb, #c084fc 10%, var(--bg2)));
  box-shadow:
    inset 3px 0 0 #c084fc,
    inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
}
.se-palette-card--composite .se-palette-card-icon {
  background: color-mix(in srgb, #c084fc 22%, transparent);
  color: #c084fc;
}
.se-palette-card--composite:hover {
  border-color: color-mix(in srgb, #c084fc 65%, transparent);
  box-shadow:
    inset 3px 0 0 #c084fc,
    inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent),
    0 4px 14px color-mix(in srgb, #c084fc 22%, transparent);
}
.se-palette-card--selected.se-palette-card--composite {
  outline-color: #c084fc;
}

/* ── 횡보 필터 (base .se-palette-card 뒤에 배치 — 배경 덮어쓰기 방지) ── */
.se-palette-card.se-palette-card--range,
.se-palette-card.se-palette-card--range-include {
  border-color: color-mix(in srgb, var(--se-palette-range-accent) 42%, transparent);
  background: var(--se-palette-range-bg);
  box-shadow:
    inset 3px 0 0 var(--se-palette-range-accent),
    inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
}
.se-palette-card.se-palette-card--range .se-palette-card-icon,
.se-palette-card.se-palette-card--range-include .se-palette-card-icon {
  background: color-mix(in srgb, var(--se-palette-range-accent) 22%, transparent);
  color: var(--se-palette-range-accent);
}
.se-palette-card.se-palette-card--range:hover,
.se-palette-card.se-palette-card--range-include:hover {
  border-color: color-mix(in srgb, var(--se-palette-range-accent) 65%, transparent);
  box-shadow:
    inset 3px 0 0 var(--se-palette-range-accent),
    inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent),
    0 4px 14px color-mix(in srgb, var(--se-palette-range-accent) 22%, transparent);
}
.se-palette-card--selected.se-palette-card.se-palette-card--range,
.se-palette-card--selected.se-palette-card.se-palette-card--range-include {
  outline-color: var(--se-palette-range-accent);
}
.se-palette-card.se-palette-card--range-exclude {
  border-color: color-mix(in srgb, var(--se-palette-range-exclude-accent) 42%, transparent);
  background: var(--se-palette-range-exclude-bg);
  box-shadow:
    inset 3px 0 0 var(--se-palette-range-exclude-accent),
    inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
}
.se-palette-card.se-palette-card--range-exclude .se-palette-card-icon {
  background: color-mix(in srgb, var(--se-palette-range-exclude-accent) 22%, transparent);
  color: var(--se-palette-range-exclude-accent);
}
.se-palette-card.se-palette-card--range-exclude:hover {
  border-color: color-mix(in srgb, var(--se-palette-range-exclude-accent) 65%, transparent);
  box-shadow:
    inset 3px 0 0 var(--se-palette-range-exclude-accent),
    inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent),
    0 4px 14px color-mix(in srgb, var(--se-palette-range-exclude-accent) 22%, transparent);
}
.se-palette-card--selected.se-palette-card.se-palette-card--range-exclude {
  outline-color: var(--se-palette-range-exclude-accent);
}
.se-palette-card.se-palette-card--range .se-palette-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

.se-palette-card-head { display: flex; align-items: flex-start; gap: 6px; }
.se-palette-card-icon {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.se-palette-card-meta { min-width: 0; }
.se-palette-card-name { font-size: 0.68rem; font-weight: 700; line-height: 1.2; display: block; }
.se-palette-card-desc { font-size: 0.58rem; color: var(--se-text-dim); display: block; }

.se-palette-card-period {
  display: flex; align-items: center; gap: 4px;
  margin-top: 6px; font-size: 0.58rem; color: var(--se-text-dim);
}
.se-palette-period-input {
  width: 36px; text-align: center;
  border: 1px solid var(--se-input-border);
  border-radius: 4px;
  background: var(--se-input-bg);
  color: var(--se-text); font-size: 0.58rem; padding: 2px;
}
.se-palette-sync { color: var(--se-success); font-size: 0.65rem; }

.se-template-list { padding: 0 10px 10px; overflow-y: auto; flex: 1; min-height: 0; }
.se-template-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--se-text-muted);
  font-size: 0.76rem;
}
.se-template-row {
  display: flex;
  align-items: stretch;
  margin-bottom: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.se-template-row--selected .se-template-item {
  border-color: var(--se-gold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--se-gold) 35%, transparent);
}
.se-template-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--se-border);
  background: var(--se-palette-card-bg);
  color: var(--se-text);
  text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.se-template-row:hover .se-template-item {
  border-color: var(--se-palette-hover-border);
  box-shadow: 0 0 12px color-mix(in srgb, var(--se-gold) 10%, transparent);
}
.se-palette-section--templates {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.se-palette-section--templates .se-palette-search {
  flex-shrink: 0;
}
.se-template-label {
  font-size: 0.76rem;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.se-template-user-badge,
.se-template-source-badge {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
}

.se-template-user-badge,
.se-template-source-badge--user {
  color: var(--se-gold);
  background: color-mix(in srgb, var(--se-gold) 14%, transparent);
}

.se-template-source-badge--composite-palette {
  color: #82b1ff;
  background: color-mix(in srgb, #82b1ff 14%, transparent);
}

.se-template-source-badge--sideways-palette {
  color: #ffb74d;
  background: color-mix(in srgb, #ffb74d 14%, transparent);
}
.se-template-save-hint {
  margin: 0 0 8px;
  font-size: 0.76rem;
  color: var(--se-text-muted);
  line-height: 1.45;
}
.se-template-save-update {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.76rem;
  color: var(--se-text-muted);
  cursor: pointer;
}
.se-template-save-update input {
  margin-top: 2px;
}
.se-template-desc {
  flex: 1 1 100%;
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--se-text-muted);
}
.se-template-signal { font-size: 0.62rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-left: auto; }
.se-template-signal--buy { color: var(--se-buy); background: color-mix(in srgb, var(--se-buy) 12%, transparent); }
.se-template-signal--sell { color: var(--se-sell); background: color-mix(in srgb, var(--se-sell) 12%, transparent); }

/* ── Modal / snack ── */
.se-field-lbl { display: block; font-size: 0.72rem; color: var(--se-text-muted); margin: 8px 0 4px; }
.se-field-inp, .se-field-ta {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--se-input-border);
  border-radius: 8px;
  background: var(--se-input-bg);
  color: var(--se-text); padding: 7px 10px; font-size: 0.8rem;
}
.se-field-inp--error {
  border-color: var(--se-danger);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--se-danger) 35%, transparent);
}
.se-field-error {
  margin: 4px 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--se-danger);
}
.se-modal-body { padding: 4px 0; }
.se-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.se-snack {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 10px 20px; border-radius: 10px; font-size: 0.82rem; font-weight: 600;
  z-index: 10001;
  color: #fff;
  background: #2e7d32;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.se-snack--err {
  background: #c62828;
  border-color: rgba(255, 255, 255, 0.12);
}

/* ── 전략 설명 팝업 ── */
.se-btn--desc .se-desc-icon {
  display: block;
  opacity: 0.9;
}
.se-btn--desc:hover .se-desc-icon {
  opacity: 1;
  color: var(--se-accent, #3f7ef5);
}

.se-desc-overlay {
  z-index: 10999;
}
.se-desc-modal {
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
}
.se-desc-body {
  overflow: auto;
  max-height: min(72vh, 600px);
  padding: 12px 16px 16px !important;
}
.se-desc-content {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--se-text);
}
.se-desc-intro {
  margin: 0 0 12px;
  color: var(--se-text-muted);
}
.se-desc-section {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--se-border, rgba(255, 255, 255, 0.08));
}
.se-desc-section:last-of-type {
  border-bottom: none;
  margin-bottom: 8px;
}
.se-desc-section-title {
  margin: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--se-text);
}
.se-desc-section-title:first-child {
  margin-top: 0;
}
.se-desc-para {
  margin: 0 0 8px;
}
.se-desc-list {
  margin: 6px 0 0;
  padding-left: 0;
  list-style: none;
}
.se-desc-list-item {
  margin: 4px 0;
  padding-left: 4px;
  white-space: pre-wrap;
  word-break: keep-all;
}
.se-desc-footnotes {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--se-border, rgba(255, 255, 255, 0.1));
}
.se-desc-footnote {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--se-text-muted);
  line-height: 1.5;
}