/* ==================== Modal ==================== */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.6); z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-box {
  background: #1e1e30; border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  min-width: 480px; max-width: 80vw; max-height: 80vh;
  display: flex; flex-direction: column;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #2d3a5e;
  font-size: calc(14px * var(--font-scale)); font-weight: 600;
}
.modal-header > span:first-child {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-close {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: none;
  color: #aaa; font-size: calc(14px * var(--font-scale)); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.modal-close:hover { background: #e74c3c; color: #fff; }
.modal-body {
  flex: 1; overflow-y: auto; padding: 16px;
}
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid #2d3a5e;
}
.btn-modal-action {
  padding: 6px 16px; border: 1px solid #3a5a8e; border-radius: 6px;
  background: #1a2540; color: #aab; font-size: calc(12px * var(--font-scale));
  cursor: pointer; transition: all .15s;
}
.btn-modal-action:hover { background: #253348; border-color: #5dade2; color: #dde; }
.btn-de-font-zoom { font-weight: bold; font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 12px !important; }
.btn-font-zoom-modal { font-weight: bold; font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 12px !important; }
.btn-modal-primary {
  padding: 6px 16px; border: 1px solid #16a085; border-radius: 6px;
  background: rgba(22,160,133,.2); color: #48c9b0; font-size: calc(12px * var(--font-scale));
  cursor: pointer; transition: all .15s;
}
.btn-modal-primary:hover { background: rgba(22,160,133,.35); border-color: #48c9b0; }

/* ==================== Performance Monitor ==================== */
#perf-monitor {
  position: fixed; bottom: 40px; right: 12px;
  background: rgba(10,10,25,.92); border: 1px solid rgba(90,180,120,.3); border-radius: 8px;
  padding: 8px 12px; z-index: 2000; min-width: 140px;
  font-size: 11px; color: #aab; backdrop-filter: blur(8px);
  user-select: none; transition: opacity .3s; touch-action: none;
}
.perf-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.perf-title { color: #82e0aa; font-weight: 600; font-size: 12px; }
.perf-close { background: none; border: none; color: #667; font-size: 14px; cursor: pointer; padding: 0 2px; line-height: 1; }
.perf-close:hover { color: #e74c3c; }
.perf-row { display: flex; justify-content: space-between; padding: 2px 0; gap: 12px; }
.perf-label { color: #6a8; }
.perf-value { color: #dde; font-variant-numeric: tabular-nums; text-align: right; }

/* Text preview specific */
.text-preview-box { min-width: 560px; max-width: 90vw; }
#text-preview-content {
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: calc(13px * var(--font-scale)); line-height: 1.6; color: #dde;
  white-space: pre-wrap; word-break: break-all;
  user-select: text; -webkit-user-select: text;
}

/* AI Script modal specific */
.ai-script-box { min-width: 520px; }
.ai-script-hint {
  font-size: calc(11px * var(--font-scale)); color: #8aa; margin-bottom: 10px; line-height: 1.5;
  background: rgba(22,160,133,.08); border: 1px solid rgba(22,160,133,.2);
  border-radius: 6px; padding: 8px 10px;
}
.ai-script-hint code {
  background: rgba(0,0,0,.3); padding: 1px 5px; border-radius: 3px;
  color: #48c9b0; font-family: 'Cascadia Code', monospace; font-size: calc(10px * var(--font-scale));
}
#ai-script-requirement {
  width: 100%; background: #0d1117; border: 1px solid #2d3a5e;
  border-radius: 6px; padding: 8px 10px; color: #dde;
  font-size: calc(12px * var(--font-scale)); font-family: inherit; resize: vertical;
  min-height: 60px; outline: none;
}
#ai-script-requirement:focus { border-color: #48c9b0; }
#ai-script-requirement::placeholder { color: #556; }
#ai-script-gen-status {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: calc(11px * var(--font-scale)); color: #f1c40f;
}

/* ==================== Log Panel ==================== */
#log-panel {
  position: fixed; bottom: 0; left: 0; right: 0; height: 180px;
  background: #0d1117; border-top: 1px solid #1e3a5f;
  z-index: 900; display: flex; flex-direction: column;
  transition: height .25s ease; touch-action: none;
}
#log-panel.collapsed { height: auto; max-height: 40px; overflow: hidden; }

#log-header {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: #161b22; border-bottom: 1px solid #1e3a5f; flex-shrink: 0;
  user-select: none; -webkit-user-select: none;
}
#log-header button {
  padding: 3px 10px; border: 1px solid #2d4a6e; border-radius: 4px;
  background: #1c2333; color: #8ab; font-size: calc(11px * var(--font-scale)); cursor: pointer;
  transition: all .15s;
}
#log-header button:hover { background: #253348; border-color: #3a7bd5; color: #bde; }

#log-content {
  flex: 1; overflow-y: auto; padding: 4px 10px;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: var(--code-font-size); line-height: 1.6;
  user-select: text !important; -webkit-user-select: text !important;
  -webkit-user-select: text;
  cursor: text;
}
#log-content::-webkit-scrollbar { width: 6px; }
#log-content::-webkit-scrollbar-track { background: transparent; }
#log-content::-webkit-scrollbar-thumb { background: rgba(120,120,140,.35); border-radius: 3px; }

.log-line { padding: 1px 0; display: flex; gap: 8px; align-items: flex-start; }
.log-ts { color: #484f58; font-size: calc(10px * var(--font-scale)); white-space: nowrap; flex-shrink: 0; }
.log-src { font-size: calc(10px * var(--font-scale)); font-weight: 600; white-space: nowrap; flex-shrink: 0; min-width: 50px; }
.log-msg { color: #c9d1d9; word-break: break-all; }

/* ==================== Saved Nodes Sidebar ==================== */
.sidebar-panel {
  position: fixed; top: var(--toolbar-h, 48px); right: 0; bottom: 180px;
  width: 280px; z-index: 1100;
  background: #12121e; border: 1px solid #2d3a5e;
  display: flex; flex-direction: column;
  border-radius: 12px 0 0 12px;
  box-shadow: -4px 0 20px rgba(0,0,0,.4);
  animation: slideInRight .2s ease;
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid #2d3a5e;
  font-size: calc(13px * var(--font-scale)); font-weight: 600; flex-shrink: 0;
}
.sidebar-header > span:first-child {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-close {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: none;
  color: #aaa; font-size: calc(12px * var(--font-scale)); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.sidebar-close:hover { background: #e74c3c; color: #fff; }
.sidebar-body {
  flex: 1; overflow-y: auto; padding: 10px;
}
.sidebar-body::-webkit-scrollbar { width: 6px; }
.sidebar-body::-webkit-scrollbar-track { background: transparent; }
.sidebar-body::-webkit-scrollbar-thumb { background: rgba(120,120,140,.35); border-radius: 3px; }

#saved-nodes-list {
  display: flex; flex-direction: column; gap: 6px;
}
.saved-node-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 6px;
  background: #181828; border: 1px solid #252540;
  transition: all .15s; cursor: default;
}
.saved-node-item:hover {
  border-color: #3a7bd5; background: #1a1a35;
}
.saved-node-icon {
  font-size: calc(18px * var(--font-scale)); flex-shrink: 0; width: 24px; text-align: center;
}
.saved-node-icon .hm-icon { filter: brightness(0) invert(1); }
.saved-node-info {
  flex: 1; min-width: 0;
}
.saved-node-name {
  font-size: calc(12px * var(--font-scale)); font-weight: 600; color: #e8e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.saved-node-meta {
  font-size: calc(9px * var(--font-scale)); color: #8899aa; margin-top: 1px;
}
.saved-node-preview {
  font-size: calc(9px * var(--font-scale)); color: #a0b0c0; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  background: rgba(255,255,255,.05); border-radius: 3px; padding: 2px 5px;
  line-height: 1.4;
}
.saved-node-actions {
  display: flex; gap: 3px; flex-shrink: 0;
}
.btn-saved-load, .btn-saved-delete {
  padding: 3px 8px; border-radius: 3px;
  font-size: calc(9px * var(--font-scale)); cursor: pointer; transition: all .15s; border: none;
}
.btn-saved-load {
  background: rgba(52,152,219,.15); color: #5dade2;
  border: 1px solid rgba(52,152,219,.25);
}
.btn-saved-load:hover {
  background: rgba(52,152,219,.3); border-color: #3498db;
}
.btn-saved-delete {
  background: rgba(231,76,60,.08); color: #e74c3c;
  border: 1px solid rgba(231,76,60,.2);
}
.btn-saved-delete:hover {
  background: rgba(231,76,60,.22); border-color: #e74c3c;
}

/* ==================== DeepSeek Per-Node Settings Popover ==================== */
.ds-popover {
  position: fixed; z-index: 2500;
  width: 260px; background: #16162a; border: 1px solid #3a3a60;
  border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.6);
  animation: dsPopIn .15s ease;
}
@keyframes dsPopIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
.ds-popover-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid #2d2d50;
  font-size: calc(12px * var(--font-scale)); font-weight: 600;
}
.ds-popover-close {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: none;
  color: #aaa; font-size: calc(11px * var(--font-scale)); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.ds-popover-close:hover { background: #e74c3c; color: #fff; }

.ds-popover-body { padding: 8px 0; }

.ds-popover-section {
  padding: 8px 12px; border-bottom: 1px solid #222240;
}
.ds-popover-section:last-child { border-bottom: none; }

.ds-section-title {
  font-size: calc(9px * var(--font-scale)); font-weight: 700; color: #667; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 6px;
}

.ds-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px; border-radius: 4px; transition: background .12s;
}
.ds-toggle-row:hover { background: rgba(255,255,255,.04); }

.ds-toggle-label {
  display: flex; align-items: center; gap: 5px;
  font-size: calc(11px * var(--font-scale)); font-weight: 500; color: #dde;
}
.ds-toggle-icon { font-size: calc(12px * var(--font-scale)); }

.ds-toggle-desc {
  font-size: calc(8px * var(--font-scale)); color: #667; padding: 1px 6px 4px; line-height: 1.3;
}

/* Toggle Switch (shared) */
.switch {
  position: relative; display: inline-block; width: 36px; height: 20px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: #333; border-radius: 20px; transition: .25s;
}
.switch .slider::before {
  content: ""; position: absolute; height: 16px; width: 16px;
  left: 2px; bottom: 2px; background: #888; border-radius: 50%;
  transition: .25s;
}
.switch input:checked + .slider { background: var(--cfg-accent, #3a7bd5); }
.switch input:checked + .slider::before { transform: translateX(16px); background: #fff; }

/* ==================== Node Header Icon (shared round button with border) ==================== */
.node-header-btn,
.start-flag,
.node-save-btn,
.node-ds-settings,
.node-podcast-settings,
.node-pin-btn {
  width: calc(20px * var(--icon-scale, 1));
  height: calc(20px * var(--icon-scale, 1));
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: transparent;
  color: var(--node-header-icon-color, #fff);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transform: scale(1);
  transform-origin: center;
  transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1), color .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  isolation: isolate;
}
.node-header-btn:hover,
.start-flag:hover,
.node-save-btn:hover,
.node-ds-settings:hover,
.node-podcast-settings:hover,
.node-pin-btn:hover {
  transform: scale3d(1.08, 1.08, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.node-header-btn.pressed,
.start-flag.pressed,
.node-save-btn.pressed,
.node-ds-settings.pressed,
.node-podcast-settings.pressed,
.node-pin-btn.pressed {
  transform: scale3d(0.92, 0.92, 1);
  transition: transform .1s ease, color .1s ease;
}
.node-header-btn svg,
.start-flag svg,
.node-save-btn svg,
.node-ds-settings svg,
.node-podcast-settings svg,
.node-pin-btn svg {
  display: block;
  width: calc(12px * var(--icon-scale, 1));
  height: calc(12px * var(--icon-scale, 1));
  pointer-events: none;
  flex-shrink: 0;
}
.node-header-btn:hover,
.start-flag:hover,
.node-save-btn:hover,
.node-ds-settings:hover,
.node-podcast-settings:hover,
.node-pin-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* 删除按钮 - 红色圆形背景 + 白色叉 */
.node-delete {
  width: calc(20px * var(--icon-scale, 1));
  height: calc(20px * var(--icon-scale, 1));
  border-radius: 50%;
  border: none;
  background: #E84026;
  color: #FFFFFF;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transform: scale(1);
  transform-origin: center;
  transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1), background .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  isolation: isolate;
}
.node-delete:hover {
  transform: scale3d(1.08, 1.08, 1);
  background: #FF4D3A;
  box-shadow: 0 2px 8px rgba(232,64,38,.4);
}
.node-delete.pressed {
  transform: scale3d(0.92, 0.92, 1);
  transition: transform .1s ease, background .1s ease;
  background: #C0392B;
}
.node-delete svg {
  display: block;
  width: calc(18px * var(--icon-scale, 1));
  height: calc(18px * var(--icon-scale, 1));
  pointer-events: none;
  flex-shrink: 0;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.node-header-btn:hover,
.start-flag:hover,
.node-save-btn:hover,
.node-ds-settings:hover,
.node-podcast-settings:hover,
.node-pin-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.node-header-btn.pressed,
.start-flag.pressed,
.node-save-btn.pressed,
.node-ds-settings.pressed,
.node-podcast-settings.pressed,
.node-pin-btn.pressed {
  transform: scale(.92);
  transition: transform .1s ease, color .1s ease;
}

/* 运行按钮 - 黄色系 */
.start-flag:hover { color: #f9e79f; }
.start-flag.pressed { color: #f1c40f; }

/* 设置按钮 - 蓝色系 */
.node-ds-settings:hover { color: #aed6f1; }
.node-ds-settings.pressed { color: #5dade2; }

/* 锁定按钮 - 黄色系 */
.node-pin-btn:hover { color: #f9e79f; }
.node-pin-btn.pressed { color: #f1c40f; }

/* 保存按钮 - 红色系 */
.node-save-btn:hover { color: #f5b7b1; }
.node-save-btn.pressed { color: #e74c3c; }
.node-header-btn svg,
.start-flag svg,
.node-save-btn svg,
.node-ds-settings svg,
.node-podcast-settings svg,
.node-pin-btn svg {
  display: block;
  width: calc(12px * var(--icon-scale, 1));
  height: calc(12px * var(--icon-scale, 1));
  vertical-align: baseline;
  object-fit: fill;
  pointer-events: none;
  transform: none !important;
  transition: none !important;
}
.start-flag svg {
  display: block;
  width: calc(12px * var(--icon-scale, 1));
  height: calc(12px * var(--icon-scale, 1));
  pointer-events: none;
  flex-shrink: 0;
  transform: translate(1px, -1px) !important;
  transform-origin: center center !important;
  transition: none !important;
}
.node-header-btn svg path,
.start-flag svg path,
.node-save-btn svg path,
.node-ds-settings svg path,
.node-podcast-settings svg path,
.node-pin-btn svg path {
  fill: currentColor;
  transition: fill .2s ease;
}
.start-flag { margin-left: auto; }
.start-flag.active { color: #f1c40f; }
.node-save-btn.saved { color: #e74c3c; }
.node-ds-settings.active { color: #5dade2; }
.node-podcast-settings.active { color: #f48fb1; }
.node-pin-btn.pinned { color: #f39c12; }
.node-card.node-pinned {
  cursor: default;
}
.node-card.node-pinned .node-header {
  cursor: default;
}

.ds-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 14px; height: 14px; border-radius: 7px;
  background: #e91e63; color: #fff;
  font-size: calc(8px * var(--font-scale)); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1; pointer-events: none;
}

/* Node selected state */
.node-card.selected {
  box-shadow: 0 0 0 2px #5dade2, 0 4px 24px rgba(0,0,0,.4);
}

.node-card.node-placeholder {
  background: rgba(30, 30, 48, 0.5);
  border: 1px dashed rgba(100, 140, 180, 0.3);
  box-shadow: none;
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
}
.node-card.node-placeholder:hover {
  border-color: rgba(100, 140, 180, 0.6);
  background: rgba(30, 30, 48, 0.7);
}
.node-card.node-placeholder .node-header {
  padding: 6px 10px;
  font-size: calc(11px * var(--font-scale));
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-display,
.ai-stream-output,
.combine-preview,
.file-preview,
.script-output-display,
.data-text-input {
  content-visibility: auto;
  contain-intrinsic-size: auto 100px;
}

/* ==================== Context Menu ==================== */
.ctx-menu {
  position: fixed; z-index: 5000;
  background: #1a2540; border: 1px solid #2d4a6e; border-radius: 8px;
  min-width: 180px; box-shadow: 0 8px 32px rgba(0,0,0,.6);
  animation: dropIn .12s ease;
  overflow: visible; padding: 4px 0;
}
.ctx-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 14px; border: none;
  background: transparent; color: #cde;
  font-size: calc(12px * var(--font-scale));
  font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', 'Segoe UI', system-ui, sans-serif;
  cursor: pointer; transition: background .1s; text-align: left;
}
.ctx-item:hover { background: rgba(58,123,213,.2); color: #fff; }
.ctx-item.ctx-danger:hover { background: rgba(231,76,60,.2); color: #e74c3c; }
.ctx-item .hm-icon { width: calc(14px * var(--icon-scale, 1)); height: calc(14px * var(--icon-scale, 1)); }
.ctx-sep { height: 1px; background: #2d4a6e; margin: 4px 0; }
.ctx-item-disabled { opacity: .35; pointer-events: none; }
.ctx-item-has-sub { position: relative; }
.ctx-item-has-sub::after { content: '›'; position: absolute; right: 10px; font-size: calc(14px * var(--font-scale)); color: #8ab; }
.ctx-item-has-sub::before {
  content: ''; position: absolute; top: -4px; right: -6px; bottom: -4px; width: 10px; z-index: 5002;
}
.ctx-submenu {
  display: none; position: absolute; left: calc(100% + 4px); top: -4px;
  background: #1a2540; border: 1px solid #2d4a6e; border-radius: 8px;
  min-width: 160px; box-shadow: 0 8px 32px rgba(0,0,0,.6);
  padding: 4px 0; z-index: 5001;
}
.ctx-item-has-sub:hover > .ctx-submenu { display: block; }

/* ==================== Box Selection ==================== */
#selection-rect {
  position: absolute; border: 1.5px dashed rgba(93,173,226,.7);
  background: rgba(93,173,226,.08); pointer-events: none;
  display: none; z-index: 5; border-radius: 4px;
}

/* ==================== Node Config Page ==================== */
.node-config-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5); z-index: 4500;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
  animation: fadeIn .15s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.node-config-box {
  background: #1a2540; border: 1px solid rgba(var(--cfg-accent-rgb, 45,74,110), .5);
  border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,.6);
  width: 320px; max-height: 80vh; overflow-y: auto;
  animation: dropIn .15s ease;
  --cfg-accent: #5dade2;
  --cfg-accent-rgb: 93,173,226;
  --cfg-header-color: #dde;
  --cfg-section-title-color: var(--cfg-header-color, #dde);
}
.node-config-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid rgba(var(--cfg-accent-rgb), .2);
  font-size: calc(14px * var(--font-scale)); font-weight: 600;
  color: var(--cfg-header-color);
}
.node-config-header-title {
  display: inline-flex; align-items: center; gap: 6px;
}
.node-config-header-icon {
  width: calc(14px * var(--icon-scale, 1)); height: calc(14px * var(--icon-scale, 1));
  flex-shrink: 0;
}
.node-config-header-icon path { fill: currentColor; }
.node-config-header .modal-close {
  color: var(--cfg-header-color); opacity: 0.6;
}
.node-config-header .modal-close:hover {
  opacity: 1;
}
.node-config-body { padding: 8px 0; }
.node-config-section {
  padding: 8px 16px; border-bottom: 1px solid rgba(var(--cfg-accent-rgb), .08);
}
.node-config-section:last-child { border-bottom: none; }
.node-config-section-title {
  font-size: calc(12px * var(--font-scale)); font-weight: 700; color: var(--cfg-section-title-color);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;
}
.node-config-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
.node-config-row .switch {
  margin-left: auto;
}
.node-config-label {
  display: flex; align-items: center; gap: 5px;
  font-size: calc(11px * var(--font-scale)); font-weight: 500; color: #aab;
  flex-shrink: 0; white-space: nowrap;
}
.node-config-desc {
  font-size: calc(8px * var(--font-scale)); color: #667; padding: 1px 6px 4px;
  line-height: 1.3;
}
.node-config-status {
  margin-top: 4px; font-size: calc(11px * var(--font-scale)); padding: 0 2px;
}
.node-config-status.success { color: #2ecc71; }
.node-config-status.error { color: #e74c3c; }
.node-config-status.info { color: #5dade2; }
.node-config-details {
  background: rgba(var(--cfg-accent-rgb), .05); border-radius: 6px;
  padding: 8px; margin-top: 8px;
}
.node-config-details summary {
  cursor: pointer; color: var(--cfg-accent); font-size: calc(12px * var(--font-scale));
}
.node-config-details ol, .node-config-details ul {
  margin: 6px 0 0 16px; font-size: calc(11px * var(--font-scale));
  color: #aab; line-height: 1.8;
}
.node-config-details code {
  background: #151525; padding: 1px 4px; border-radius: 3px; color: #85c1e9;
}
.node-config-details a {
  color: var(--cfg-accent);
}
.node-config-input {
  width: var(--cfg-input-width, 220px); background: #0d1117; border: 1px solid rgba(var(--cfg-accent-rgb), .3);
  border-radius: 6px; padding: 6px 10px; color: #dde;
  font-size: calc(12px * var(--font-scale)); font-family: inherit; outline: none;
  flex-shrink: 0;
}
.node-config-input:focus { border-color: var(--cfg-accent); }
.node-config-input-mono { font-family: monospace; font-size: calc(13px * var(--font-scale)); padding: 10px; }
.node-config-select {
  width: var(--cfg-input-width, 220px); background: #0d1117; border: 1px solid rgba(var(--cfg-accent-rgb), .3);
  border-radius: 6px; padding: 6px 10px; color: #dde;
  font-size: calc(12px * var(--font-scale)); font-family: inherit; outline: none;
  cursor: pointer; flex-shrink: 0;
}
.node-config-select:focus { border-color: var(--cfg-accent); }
.node-config-slider-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
}
.node-config-slider {
  flex: 1; min-width: 120px; height: 4px; border-radius: 2px;
  background: #2d3a5e; outline: none; appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.node-config-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cfg-accent, #5dade2); cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,.3);
}
.node-config-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: none;
  background: var(--cfg-accent, #5dade2); cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,.3);
}
.node-config-slider-value {
  min-width: 40px; text-align: center; font-size: calc(11px * var(--font-scale));
  color: var(--cfg-accent, #5dade2); font-weight: 600; flex-shrink: 0;
}
.node-config-btn-row {
  display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #2d3a5e;
}
.node-config-btn {
  flex: 1; padding: 8px 0; border: 1px solid #2d4a6e; border-radius: 6px;
  background: rgba(255,255,255,.04); color: #aab;
  font-size: calc(12px * var(--font-scale)); cursor: pointer; transition: all .15s;
  font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', 'Segoe UI', system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.node-config-btn:hover { background: rgba(255,255,255,.08); border-color: #5dade2; color: #dde; }
.node-config-btn.primary { border-color: #16a085; color: #48c9b0; }
.node-config-btn.primary:hover { background: rgba(22,160,133,.15); border-color: #48c9b0; }
.node-config-btn.danger { border-color: rgba(231,76,60,.4); color: #e74c3c; }
.node-config-btn.danger:hover { background: rgba(231,76,60,.15); border-color: #e74c3c; }

/* ==================== Thumbnail Popup ==================== */
.thumb-popup {
  position: fixed; z-index: 9000;
  width: 260px; height: 180px;
  border-radius: 8px; overflow: hidden;
  background: #1a1a2e;
  box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
  pointer-events: none;
  opacity: 0; transform: scale(0.85) translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}
.thumb-popup.show {
  opacity: 1; transform: scale(1) translateY(0);
}
.thumb-popup img {
  width: 100%; height: 100%; object-fit: contain;
  display: block;
}

/* ==================== Floating Action Button (Run) ==================== */
#fab-run {
  position: fixed;
  left: auto; top: auto;
  right: 32px; bottom: 80px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
  color: #fff;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(142,68,173,.5), 0 0 0 0 rgba(142,68,173,.3);
  z-index: 4000;
  transition: box-shadow .25s, transform .15s;
  user-select: none; -webkit-user-select: none;
}
#fab-run > .hm-icon {
  width: 20px; height: 20px;
}
#fab-run:hover {
  box-shadow: 0 6px 28px rgba(142,68,173,.7), 0 0 0 8px rgba(142,68,173,.15);
  transform: scale(1.08);
}
#fab-run:active {
  transform: scale(.95);
  box-shadow: 0 2px 12px rgba(142,68,173,.5);
}
#fab-run.dragging {
  cursor: grabbing;
  box-shadow: 0 8px 32px rgba(142,68,173,.8);
  transform: scale(1.12);
}
/* Pulse animation when idle */
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(142,68,173,.5), 0 0 0 0 rgba(142,68,173,.3); }
  50% { box-shadow: 0 4px 20px rgba(142,68,173,.5), 0 0 0 10px rgba(142,68,173,0); }
}
#fab-run:not(:hover):not(.dragging) {
  animation: fabPulse 3s ease-in-out infinite;
}

/* ==================== Layout Modal ==================== */
.layout-modal-box {
  min-width: 420px; max-width: 560px;
}

.layout-form-group {
  margin-bottom: 12px;
}
.layout-form-label {
  display: block; font-size: calc(12px * var(--font-scale)); color: #8aa; margin-bottom: 6px;
}
.layout-form-input {
  width: 100%; background: #0d1117; border: 1px solid #2d3a5e;
  border-radius: 6px; padding: 8px 12px; color: #dde;
  font-size: calc(13px * var(--font-scale)); font-family: inherit;
  outline: none; transition: border-color .15s;
}
.layout-form-input:focus { border-color: #5dade2; }
.layout-form-hint {
  font-size: calc(11px * var(--font-scale)); color: #667; margin-top: 6px;
}

/* Layout list */
.layout-list {
  display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto;
}
.layout-list-loading, .layout-empty, .layout-error {
  text-align: center; padding: 30px 10px; color: #667;
}
.layout-empty-icon, .layout-error { font-size: calc(24px * var(--font-scale)); margin-bottom: 8px; }
.layout-empty-hint { font-size: calc(10px * var(--font-scale)); margin-top: 6px; color: #556; }

.layout-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: #181828; border: 1px solid #252540;
  transition: all .15s;
}
.layout-item:hover {
  border-color: #3a7bd5; background: #1a1a35;
}
.layout-item-icon {
  width: 32px; height: 32px; border-radius: 6px;
  background: rgba(58,123,213,.15); color: #5dade2;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.layout-item-info {
  flex: 1; min-width: 0;
}
.layout-item-name {
  font-size: calc(13px * var(--font-scale)); font-weight: 600; color: #e8e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layout-item-meta {
  font-size: calc(10px * var(--font-scale)); color: #8899aa; margin-top: 2px;
}
.layout-item-actions {
  display: flex; gap: 4px; flex-shrink: 0;
}
.btn-layout-item-load {
  padding: 4px 10px; border-radius: 4px;
  font-size: calc(10px * var(--font-scale)); cursor: pointer; transition: all .15s;
  background: rgba(39,174,96,.15); color: #58d68d;
  border: 1px solid rgba(39,174,96,.25);
}
.btn-layout-item-load svg { 
  filter: invert(1) sepia(1) saturate(500%) hue-rotate(105deg) brightness(52%); 
  transform: none !important;
}
.btn-layout-item-load:hover {
  background: rgba(39,174,96,.3); border-color: #27ae60;
}
.btn-layout-item-delete {
  padding: 4px 8px; border-radius: 4px;
  font-size: calc(10px * var(--font-scale)); cursor: pointer; transition: all .15s;
  background: rgba(231,76,60,.08); color: #e74c3c;
  border: 1px solid rgba(231,76,60,.2);
}
.btn-layout-item-delete svg { filter: invert(1) sepia(1) saturate(500%) hue-rotate(344deg) brightness(62%); }
.btn-layout-item-delete:hover {
  background: rgba(231,76,60,.22); border-color: #e74c3c;
}

/* Layout confirm dialog */
.layout-confirm-content {
  text-align: center; padding: 10px 0;
}
.layout-confirm-icon {
  font-size: calc(32px * var(--font-scale)); margin-bottom: 12px; color: #e67e22;
}
.layout-confirm-text {
  font-size: calc(16px * var(--font-scale)); font-weight: 600; color: #e8e8f0; margin-bottom: 6px;
}
.layout-confirm-desc {
  font-size: calc(12px * var(--font-scale)); color: #8aa; margin-bottom: 12px;
}
.layout-confirm-info {
  font-size: calc(11px * var(--font-scale)); color: #667;
  background: rgba(255,255,255,.04); border-radius: 6px; padding: 8px 12px;
}
.layout-confirm-info strong { color: #5dade2; }

/* Danger button */
.btn-modal-danger {
  padding: 6px 16px; border: 1px solid #e74c3c; border-radius: 6px;
  background: rgba(231,76,60,.2); color: #e74c3c; font-size: calc(12px * var(--font-scale));
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; gap: 4px;
}
.btn-modal-danger:hover {
  background: rgba(231,76,60,.35); border-color: #c0392b;
}

/* Clear layout button in toolbar */
.btn-layout-clear { background: #c0392b; color: #fff; }

/* ==================== Responsive: Narrow Screen Sidebar ==================== */
@media (max-width: 1110px) {
  #toolbar {
    top: auto; left: 0; bottom: 0; right: auto;
    width: 56px; height: 100vh;
    flex-direction: column; padding: 8px 4px; gap: 4px;
    border-bottom: none; border-right: 1px solid #0f3460;
    overflow-y: auto; overflow-x: hidden;
    align-items: center;
  }
  #toolbar .brand {
    font-size: 0; margin-right: 0; writing-mode: vertical-lr;
    letter-spacing: 0;
  }
  #toolbar .brand img { margin-bottom: 4px; }
  #toolbar button {
    padding: 6px 4px; font-size: 0; min-width: 40px; width: 40px; height: 36px;
    justify-content: center; align-items: center; gap: 0;
  }
  #toolbar button .hm-icon { margin: 0; display: block; }
  #toolbar button span:not(.hm-icon) { display: none; }
  #toolbar button .hm-icon-white { margin: 0 auto; }
  .toolbar-sep { width: 24px; height: 1px; margin: 2px 0; }
  .toolbar-right {
    margin-left: 0; flex-direction: column; gap: 4px; align-items: center;
    overflow: visible;
  }
  .font-size-slider-wrap {
    padding: 4px 2px; cursor: pointer; width: 40px; height: 36px;
    display: flex; justify-content: center; align-items: center;
  }
  .font-size-slider-wrap .font-size-slider,
  .font-size-slider-wrap #font-size-label {
    display: none;
  }
  .font-size-slider-popup {
    display: none; position: fixed; left: 60px;
    background: #1a2540; border: 1px solid #2d4a6e; border-radius: 8px;
    padding: 10px 14px; z-index: 9999; box-shadow: 0 4px 16px rgba(0,0,0,.5);
    flex-direction: column; gap: 6px; cursor: default;
  }
  .font-size-slider-popup.visible { display: flex; }
  .font-size-slider-popup .font-size-slider { width: 120px; }
  #toolbar .dropdown-menu {
    left: 60px; top: auto; bottom: 0;
  }
  .toolbar-dropdown {
    position: fixed !important;
    left: 60px !important;
    top: auto !important;
  }
  .toolbar-dropdown .dropdown-item {
    font-size: calc(12px * var(--font-scale)) !important;
    padding: 8px 14px !important;
    gap: 8px !important;
    white-space: nowrap;
  }
  .toolbar-dropdown .dropdown-item .hm-icon {
    width: calc(14px * var(--icon-scale, 1)) !important;
    height: calc(14px * var(--icon-scale, 1)) !important;
  }
  #canvas-area { top: 0; left: 56px; }
  #zoom-info { left: 72px; }
  #log-panel { left: 56px; }
}