/* ==================== Fonts ==================== */
@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: url('./fonts/HarmonyOS_Sans_SC_Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: url('./fonts/HarmonyOS_Sans_SC_Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: url('./fonts/HarmonyOS_Sans_SC_Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('./fonts/HarmonyOS_Sans_Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('./fonts/HarmonyOS_Sans_SC_Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('./fonts/HarmonyOS_Sans_SC_Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==================== Icon Helpers ==================== */
.hm-icon {
  display: inline-block;
  width: calc(16px * var(--icon-scale, 1));
  height: calc(16px * var(--icon-scale, 1));
  vertical-align: middle;
  object-fit: contain;
  pointer-events: none;
}
.hm-icon-sm { width: calc(12px * var(--icon-scale, 1)); height: calc(12px * var(--icon-scale, 1)); }
.hm-icon-xs { width: calc(10px * var(--icon-scale, 1)); height: calc(10px * var(--icon-scale, 1)); }
.hm-icon-lg { width: calc(20px * var(--icon-scale, 1)); height: calc(20px * var(--icon-scale, 1)); }
.hm-icon-xl { width: calc(24px * var(--icon-scale, 1)); height: calc(24px * var(--icon-scale, 1)); }
.hm-icon-white { filter: brightness(0) invert(1); }
.hm-icon-dim { filter: brightness(0) invert(0.7); }
.hm-icon-confirm { filter: brightness(0) invert(0.91); }
.hm-icon-danger { filter: invert(38%) sepia(93%) saturate(747%) hue-rotate(346deg) brightness(96%) contrast(91%); }

/* ==================== Reset & Base ==================== */
:root {
  --font-scale: 1;
  --icon-scale: 1;
  --ui-font-size: calc(13px * var(--font-scale));
  --code-font-size: calc(12px * var(--font-scale));
  --code-line-height: 1.6;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Global scrollbar: gray oval, no white background */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120,120,140,.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,120,140,.55); }
::-webkit-scrollbar-corner { background: transparent; }
body { overflow: hidden; font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', 'Segoe UI', system-ui, sans-serif; background: #1a1a2e; color: #e0e0e0; user-select: none; font-size: var(--ui-font-size); }

/* ==================== Toolbar ==================== */
#toolbar {
  position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 1000;
  background: #16213e; border-bottom: 1px solid #0f3460;
  display: flex; align-items: center; padding: 0 16px; gap: 8px;
}
#toolbar .brand { font-size: calc(15px * var(--font-scale)); font-weight: 600; color: #e94560; margin-right: 24px; letter-spacing: 1px; flex-shrink: 0; }
#toolbar button {
  padding: 6px 16px; border: none; border-radius: 6px; font-size: calc(13px * var(--font-scale)); font-weight: 500;
  cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 4px;
  font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', 'Segoe UI', system-ui, sans-serif;
  flex-shrink: 0; white-space: nowrap;
}
#toolbar button:hover { filter: brightness(1.15); transform: translateY(-1px); }
#toolbar button:active { transform: translateY(0); }
.btn-data    { background: #3a7bd5; color: #fff; }
.btn-logic   { background: #27ae60; color: #fff; }
.btn-combine { background: #8e44ad; color: #fff; }
.btn-script  { background: #16a085; color: #fff; }
.btn-result  { background: #e67e22; color: #fff; }
.btn-run     { background: #8e44ad; color: #fff; } /* legacy, not used */
.btn-save    { background: #2980b9; color: #fff; }
.btn-load    { background: #2c3e50; color: #fff; }
.btn-layout  { background: #27ae60; color: #fff; }
.btn-saved   { background: #1a5276; color: #aed6f1; }
.btn-add-node { background: #3a5a8e; color: #fff; }
.btn-font-size { background: #2c3e50; color: #ccc; min-width: 56px; }

.toolbar-dropdown-wrap { position: relative; display: inline-flex; }
.toolbar-dropdown {
  display: none; position: absolute; top: 100%; left: 0; z-index: 6000;
  background: #1a2540; border: 1px solid #2d4a6e; border-radius: 8px;
  min-width: 140px; box-shadow: 0 8px 32px rgba(0,0,0,.6);
  padding: 4px 0; margin-top: 4px;
}
.toolbar-dropdown .dropdown-item {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 8px 12px; 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; text-align: left; transition: background .1s;
}
.toolbar-dropdown .dropdown-item:hover { background: rgba(58,123,213,.2); color: #fff; }
.toolbar-dropdown .dropdown-item .hm-icon { width: calc(14px * var(--icon-scale, 1)); height: calc(14px * var(--icon-scale, 1)); }

.font-size-slider-wrap {
  display: flex; align-items: center; gap: 6px;
  background: #2c3e50; border-radius: 6px; padding: 6px 10px;
  color: #ccc; font-size: calc(12px * var(--font-scale));
  transition: none; height: 100%;
}
.font-size-slider-wrap.slider-pinned {
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  pointer-events: auto;
}
.font-size-slider {
  -webkit-appearance: none; appearance: none;
  width: 90px; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, #3a7bd5, #5dade2);
  outline: none; cursor: pointer;
}
.font-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #5dade2; border: 2px solid #fff;
  cursor: pointer; transition: transform .1s;
}
.font-size-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.font-size-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #5dade2; border: 2px solid #fff;
  cursor: pointer;
}

.toolbar-sep { width: 1px; height: 24px; background: #0f3460; margin: 0 4px; }

.toolbar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px; flex-shrink: 1; min-width: 0; overflow: hidden;
}
.toolbar-right button,
.toolbar-right .font-size-slider-wrap {
  flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}

/* Dropdown menu */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  background: #1a2540; border: 1px solid #2d4a6e; border-radius: 8px;
  min-width: 160px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  z-index: 1100; overflow: hidden; padding: 4px 0;
  animation: dropIn .15s ease;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown-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 .12s; text-align: left;
}
.dropdown-item:hover { background: rgba(58,123,213,.2); color: #fff; }
.dropdown-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* ==================== Info Bars ==================== */
#zoom-info {
  position: fixed; bottom: 48px; left: 16px; z-index: 1000;
  background: rgba(22,33,62,.85); padding: 6px 14px; border-radius: 6px;
  font-size: calc(12px * var(--font-scale)); color: #8aa; border: 1px solid #0f3460;
  transition: bottom .25s ease;
}
#log-panel:not(.collapsed) ~ #canvas-area ~ #zoom-info,
body.log-expanded #zoom-info {
  bottom: 196px;
}
#toast {
  position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%);
  padding: 8px 20px; border-radius: 8px;
  font-size: calc(13px * var(--font-scale)); z-index: 2000; opacity: 0; transition: opacity .3s, bottom .25s ease;
  pointer-events: none; white-space: nowrap;
}
#toast.show { opacity: 1; }
#toast.error   { background: rgba(231,76,60,.9); color: #fff; }
#toast.success { background: rgba(39,174,96,.9); color: #fff; }
#toast.info    { background: rgba(52,152,219,.9); color: #fff; }

/* ==================== Canvas ==================== */
#canvas-area {
  position: fixed; top: 48px; left: 0; right: 0; bottom: 32px;
  overflow: hidden; cursor: grab; touch-action: none;
}
#canvas-area textarea,
#canvas-area input[type="text"],
#canvas-area input[type="number"],
#canvas-area input[type="file"],
#canvas-area select,
#canvas-area .result-display,
#canvas-area .ai-stream-output,
#canvas-area .script-output-display,
#canvas-area .combine-preview,
#canvas-area .de-code,
#canvas-area .file-preview,
#canvas-area .ai-thinking-body,
#canvas-area .podcast-local-list,
#canvas-area .podcast-audio-area {
  touch-action: auto;
}
#canvas-area.panning    { cursor: grabbing; }
#canvas-area.connecting { cursor: crosshair; }

#world {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  transform-origin: 0 0;
}

/* ==================== SVG Connections ==================== */
#connections-svg {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  overflow: visible; pointer-events: none;
}
#connections-svg path { pointer-events: stroke; }

.connection-hitarea { pointer-events: stroke; cursor: pointer; }
.connection-path {
  fill: none; stroke-width: 2.5; cursor: pointer;
  transition: stroke-width .15s;
}
.connection-path:hover { stroke-width: 5; filter: brightness(1.3); }
.connection-path.has-breakpoint { stroke-dasharray: 12 4 4 4; }

.breakpoint-icon { cursor: pointer; }
.breakpoint-icon circle { transition: fill 0.15s; }
.breakpoint-icon:hover circle { fill: #c0392b; }
.breakpoint-hint { cursor: pointer; pointer-events: all; }

@keyframes flowAnim { to { stroke-dashoffset: -24; } }
.connection-path.flowing {
  stroke-dasharray: 8 4;
  animation: flowAnim .6s linear infinite;
}
.connection-path.executing {
  stroke-dasharray: 12 6;
  animation: flowExecAnim .4s linear infinite;
  stroke-width: 4;
}
@keyframes flowExecAnim { to { stroke-dashoffset: -36; } }

#temp-connection {
  fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2.5;
  stroke-dasharray: 6 4; pointer-events: none;
}

/* ==================== Node Card ==================== */
.node-card {
  position: absolute; width: 260px; border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
  cursor: move; transition: box-shadow .2s;
  min-width: 180px; min-height: 100px;
}
/* When node has explicit dimensions (from resize), enable flex for content fill */
.node-card.has-size {
  display: flex; flex-direction: column;
}
.node-card:hover   { box-shadow: 0 6px 32px rgba(0,0,0,.55); }
.node-card.dragging { box-shadow: 0 8px 40px rgba(0,0,0,.65); opacity: .92; }

/* Node resize handle */
.node-resize-handle {
  position: absolute; right: 0; bottom: 0;
  width: 18px; height: 18px; cursor: nwse-resize;
  z-index: 5; border-radius: 0 0 10px 0; flex-shrink: 0;
}
.node-resize-handle::before {
  content: ''; position: absolute; right: 4px; bottom: 4px;
  width: 8px; height: 8px;
  border-right: 2px solid rgba(255,255,255,.25);
  border-bottom: 2px solid rgba(255,255,255,.25);
  transition: border-color .15s;
}
.node-resize-handle:hover::before {
  border-color: rgba(255,255,255,.6);
}

.node-header {
  padding: 8px 10px; border-radius: 10px 10px 0 0;
  font-size: calc(13px * var(--font-scale)); font-weight: 600; letter-spacing: .3px;
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.node-header .hm-icon { filter: brightness(0) invert(1); }
.node-body { background: #1e1e30; border-radius: 0 0 10px 10px; padding: 6px 0 8px 0;}
.node-card.has-size .node-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.node-data .node-header    { background: linear-gradient(135deg, #2b5876, #3a7bd5); }
.node-logic .node-header   { background: linear-gradient(135deg, #1e8449, #27ae60); }
.node-combine .node-header { background: linear-gradient(135deg, #6c3483, #8e44ad); }
.node-script .node-header  { background: linear-gradient(135deg, #0e6655, #16a085); }
.node-podcast .node-header { background: linear-gradient(135deg, #880e4f, #e91e63); }
.node-result .node-header  { background: linear-gradient(135deg, #c0612b, #e67e22); }

.node-data    { border: 1.5px solid #3a7bd5; }
.node-logic   { border: 1.5px solid #27ae60; }
.node-combine { border: 1.5px solid #8e44ad; }
.node-script  { border: 1.5px solid #16a085; }
.node-podcast { border: 1.5px solid #e91e63; }
.node-result  { border: 1.5px solid #e67e22; }

/* Node title editable */
.node-title-text {
  cursor: text;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s;
  outline: none;
  min-width: 30px;
}
.node-title-text:hover { border-bottom-color: rgba(255,255,255,.4); }
.node-title-input {
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.5);
  border-radius: 3px; color: #fff; font-size: calc(13px * var(--font-scale)); font-weight: 600;
  padding: 1px 4px; outline: none; width: 120px;
}

/* Node title editable */
.node-content { padding: 0 10px; margin-top: 4px; overflow: hidden; }
.node-card.has-size .node-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.node-card.has-size .data-mode-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.node-card.has-size .data-editor-btn { flex-shrink: 0; }

/* File upload */
.file-upload-area {
  border: 1.5px dashed #3a7bd5; border-radius: 6px;
  padding: 8px; text-align: center; cursor: pointer;
  font-size: calc(11px * var(--font-scale)); color: #5dade2; transition: all .2s;
  position: relative; overflow: hidden;
}
.file-upload-area:hover { border-color: #85c1e9; background: rgba(58,123,213,.1); }
.file-upload-area.has-file { border-style: solid; border-color: #27ae60; color: #58d68d; }
.file-upload-area input[type="file"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}

.file-preview {
  margin-top: 6px; max-height: 80px; overflow-y: auto;
  background: #151525; border-radius: 4px; padding: 6px 8px;
  font-size: calc(10px * var(--font-scale)); color: #aab; line-height: 1.4;
  word-break: break-all; white-space: pre-wrap;
  cursor: pointer; transition: background .15s;
}
.node-card.has-size .file-preview { flex: 1; min-height: 0; max-height: none; }
.file-preview:hover { background: #1a1a35; }
.file-preview::-webkit-scrollbar { width: 6px; }
.file-preview::-webkit-scrollbar-track { background: transparent; }
.file-preview::-webkit-scrollbar-thumb { background: rgba(120,120,140,.35); border-radius: 3px; }

/* AI login status */
.ai-login-status {
  margin-bottom: 6px; padding: 6px 8px; border-radius: 6px;
  font-size: calc(11px * var(--font-scale)); display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; line-height: 1.5; flex-shrink: 0;
}
.ai-login-status.not-logged-in {
  background: rgba(231,76,60,.15); border: 1px solid rgba(231,76,60,.4); color: #e74c3c;
}
.ai-login-status.logged-in {
  background: rgba(39,174,96,.15); border: 1px solid rgba(39,174,96,.3); color: #2ecc71;
}
.node-script .ai-login-status.logged-in {
  background: rgba(22,160,133,.12); border: 1px solid rgba(22,160,133,.3); color: #16a085;
}
.node-script .ai-login-status.logged-in .hm-icon {
  filter: invert(1) sepia(1) saturate(500%) hue-rotate(128deg) brightness(45%);
}
.node-logic .ai-login-status.logged-in {
  background: rgba(39,174,96,.12); border: 1px solid rgba(39,174,96,.3); color: #27ae60;
}
.node-logic .ai-login-status.logged-in .hm-icon {
  filter: invert(1) sepia(1) saturate(500%) hue-rotate(105deg) brightness(52%);
}
.ai-login-status.logging-in {
  background: rgba(241,196,15,.15); border: 1px solid rgba(241,196,15,.3); color: #f1c40f;
}
.ai-login-status.proxy-down {
  background: rgba(155,89,182,.15); border: 1px solid rgba(155,89,182,.3); color: #bb8fce;
}

.btn-login-inline {
  padding: 3px 10px; border: none; border-radius: 4px;
  background: #3a7bd5; color: #fff; font-size: calc(10px * var(--font-scale));
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.btn-login-inline:hover {
  background: #2980b9; transform: translateY(-1px);
}

.login-hint {
  font-size: calc(9px * var(--font-scale)); color: #8899aa; display: block; width: 100%; margin-top: 2px;
}

/* AI prompt */
.ai-prompt {
  width: 100%; background: #151525; border: 1px solid #27ae60;
  border-radius: 6px; padding: 6px 8px; color: #dde;
  font-size: calc(11px * var(--font-scale)); resize: none; min-height: 40px; max-height: 200px;
  font-family: inherit; outline: none;
}
.node-card.has-size .ai-prompt { min-height: 0; max-height: none; resize: vertical; flex-shrink: 0; }
.node-card.has-size .node-content:not(.no-stream-output) .ai-prompt { flex-shrink: 1; overflow-y: auto; }
.node-card.has-size .node-content.no-stream-output .ai-prompt { flex: 1; }
.ai-prompt:focus { border-color: #58d68d; }
.ai-prompt::placeholder { color: #5a7; }

.ai-prompt-resizer {
  height: 6px; cursor: ns-resize; flex-shrink: 0;
  position: relative; margin: 2px 0;
}
.ai-prompt-resizer::after {
  content: ''; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.15);
  transition: background .15s;
}
.ai-prompt-resizer:hover::after {
  background: rgba(39,174,96,.6);
}

.ai-status { margin-top: 4px; font-size: calc(10px * var(--font-scale)); display: flex; align-items: center; justify-content: space-between; gap: 4px; flex-shrink: 0; }
.ai-status-left { display: flex; align-items: center; gap: 4px; }
.ai-word-count { color: #888; font-variant-numeric: tabular-nums; }
.ai-status .dot { width: 6px; height: 6px; border-radius: 50%; }
.ai-status .dot.idle    { background: #555; }
.ai-status .dot.running { background: #f1c40f; animation: pulse 1s infinite; }
.ai-status .dot.done    { background: #2ecc71; }
.ai-status .dot.error   { background: #e74c3c; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Result toolbar */
.result-toolbar {
  display: flex; gap: 6px; margin-bottom: 4px; flex-shrink: 0;
}
.btn-result-action {
  flex: 1; padding: 4px 8px; border: 1px solid rgba(230,126,34,.4);
  border-radius: 4px; background: rgba(230,126,34,.1); color: #f0b27a;
  font-size: calc(10px * var(--font-scale)); cursor: pointer; transition: all .15s; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.btn-result-action .hm-icon { filter: brightness(0) saturate(100%) invert(75%) sepia(30%) saturate(800%) hue-rotate(10deg) brightness(95%) contrast(90%); }
.btn-result-action:hover {
  background: rgba(230,126,34,.25); border-color: #e67e22;
  transform: translateY(-1px);
}
.btn-result-action:active { transform: translateY(0); }
.btn-font-zoom { font-weight: bold; font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 11px !important; }

/* Result display */
.result-display {
  min-height: 30px; max-height: 120px; overflow-y: auto;
  background: #151525; border-radius: 4px; padding: 6px 8px;
  font-size: calc(11px * var(--font-scale)); color: #f0b27a; line-height: 1.4;
  word-break: break-all; white-space: pre-wrap;
  cursor: pointer; transition: background .15s;
}
.node-card.has-size .result-display { flex: 1; min-height: 0; max-height: none; resize: vertical; }
.result-display:hover { background: #1a1a35; }
.result-display::-webkit-scrollbar { width: 6px; }
.result-display::-webkit-scrollbar-track { background: transparent; }
.result-display::-webkit-scrollbar-thumb { background: rgba(120,120,140,.35); border-radius: 3px; }

/* ==================== Combine Node ==================== */
/* Data mode tabs */
.data-mode-tabs {
  display: flex; gap: 0; margin-bottom: 6px; flex-shrink: 0;
  border: 1px solid #2d4a6e; border-radius: 6px; overflow: hidden;
}
.data-mode-tab {
  flex: 1; padding: 4px 0; border: none; background: #151525;
  color: #6688aa; font-size: calc(10px * var(--font-scale)); font-weight: 600; cursor: pointer;
  transition: all .15s; text-align: center;
  font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', 'Segoe UI', system-ui, sans-serif;
}
.data-mode-tab:first-child { border-right: 1px solid #2d4a6e; }
.data-mode-tab.active {
  background: rgba(58,123,213,.2); color: #5dade2;
}
.data-mode-tab:hover:not(.active) { background: #1a1a35; color: #8ab; }

/* Data text input */
.data-text-input {
  width: 100%; background: #151525; border: 1px solid #3a7bd5;
  border-radius: 6px; padding: 6px 8px; color: #dde;
  font-size: calc(11px * var(--font-scale)); font-family: inherit; resize: none;
  min-height: 60px; max-height: 300px; outline: none;
  line-height: 1.5;
}
.node-card.has-size .data-text-input { flex: 1; min-height: 0; max-height: none; resize: vertical; }
.data-text-input:focus { border-color: #85c1e9; }
.data-text-input::placeholder { color: #4a6a8a; }
.data-text-info {
  font-size: calc(9px * var(--font-scale)); color: #5a7a9a; margin-top: 3px; text-align: right; flex-shrink: 0;
}

/* Script detail editor button */
.script-editor-btn {
  width: 100%; padding: 4px 8px; border: 1px solid rgba(22,160,133,.4);
  border-radius: 6px; background: rgba(22,160,133,.08); color: #48c9b0;
  font-size: calc(10px * var(--font-scale)); cursor: pointer; transition: all .15s; margin-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0;
}
.script-editor-btn .hm-icon { filter: brightness(0) saturate(100%) invert(67%) sepia(30%) saturate(600%) hue-rotate(120deg) brightness(95%) contrast(90%); }
.script-editor-btn:hover {
  background: rgba(22,160,133,.2); border-color: #16a085;
}

/* ==================== Podcast Node ==================== */
.node-podcast { min-width: 280px; width: 320px; }
.podcast-status {
  margin-top: 4px; font-size: calc(10px * var(--font-scale)); display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.podcast-status-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.podcast-status-dot.disconnected { background: #555; }
.podcast-status-dot.connecting { background: #f39c12; animation: podcast-pulse 1s infinite; }
.podcast-status-dot.connected { background: #27ae60; }
.podcast-status-dot.generating { background: #e91e63; animation: podcast-pulse 0.8s infinite; }
@keyframes podcast-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.podcast-action-tabs {
  display: flex; gap: 0; margin-bottom: 6px; flex-shrink: 0;
  border: 1px solid rgba(233,30,99,.3); border-radius: 6px; overflow: hidden;
}
.podcast-action-tab {
  flex: 1; padding: 4px 0; border: none; background: #151525;
  color: #aa6688; font-size: calc(9px * var(--font-scale)); font-weight: 600; cursor: pointer;
  transition: all .15s; text-align: center;
  font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', 'Segoe UI', system-ui, sans-serif;
}
.podcast-action-tab:not(:last-child) { border-right: 1px solid rgba(233,30,99,.2); }
.podcast-action-tab.active { background: rgba(233,30,99,.2); color: #f48fb1; }
.podcast-action-tab:hover:not(.active) { background: #1a1a35; color: #cc8899; }

.podcast-action-config { margin-bottom: 6px; flex-shrink: 0; }
.podcast-nlp-hint {
  font-size: calc(8px * var(--font-scale)); color: #888; margin-bottom: 4px;
  padding: 2px 4px; background: rgba(233,30,99,.08); border-radius: 3px;
}
.podcast-text-input {
  width: 100%; background: #151525; border: 1px solid rgba(233,30,99,.3);
  border-radius: 6px; padding: 6px 8px; color: #dde;
  font-size: calc(11px * var(--font-scale)); font-family: inherit; resize: none;
  min-height: 50px; max-height: 200px; outline: none; line-height: 1.5;
}
.node-card.has-size .podcast-text-input { flex: 1; min-height: 0; max-height: none; resize: vertical; }
.podcast-text-input:focus { border-color: #e91e63; }
.podcast-text-input::placeholder { color: #5a4a5a; }
.podcast-prompt-input {
  width: 100%; background: #151525; border: 1px solid rgba(233,30,99,.3);
  border-radius: 6px; padding: 6px 8px; color: #dde;
  font-size: calc(11px * var(--font-scale)); outline: none;
}
.podcast-prompt-input:focus { border-color: #e91e63; }
.podcast-prompt-input::placeholder { color: #5a4a5a; }

.podcast-controls {
  display: flex; gap: 4px; margin-bottom: 6px; flex-shrink: 0;
}
.btn-podcast-action {
  flex: 1; padding: 4px 6px; border: 1px solid rgba(233,30,99,.4);
  border-radius: 4px; background: rgba(233,30,99,.1); color: #f48fb1;
  font-size: calc(9px * var(--font-scale)); cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
.btn-podcast-action:hover:not(:disabled) { background: rgba(233,30,99,.25); border-color: #e91e63; }
.btn-podcast-action:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-podcast-action .hm-icon { filter: brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(800%) hue-rotate(300deg) brightness(95%) contrast(90%); }

.podcast-progress {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-shrink: 0;
}
.podcast-progress-bar {
  flex: 1; height: 4px; background: #1a1a2e; border-radius: 2px; overflow: hidden;
}
.podcast-progress-fill {
  height: 100%; background: linear-gradient(90deg, #e91e63, #f48fb1);
  border-radius: 2px; transition: width .3s; width: 0;
}
.podcast-progress-text {
  font-size: calc(9px * var(--font-scale)); color: #f48fb1; flex-shrink: 0;
}

.podcast-preview-mode {
  display: flex; gap: 0; margin-bottom: 6px; flex-shrink: 0;
  border: 1px solid rgba(233,30,99,.2); border-radius: 6px; overflow: hidden;
}
.podcast-preview-tab {
  flex: 1; padding: 4px 0; border: none; background: #151525;
  color: #886688; font-size: calc(9px * var(--font-scale)); font-weight: 600; cursor: pointer;
  transition: all .15s; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', 'Segoe UI', system-ui, sans-serif;
}
.podcast-preview-tab:not(:last-child) { border-right: 1px solid rgba(233,30,99,.15); }
.podcast-preview-tab.active { background: rgba(233,30,99,.15); color: #f48fb1; }
.podcast-preview-tab:hover:not(.active) { background: #1a1a35; color: #aa88aa; }
.podcast-preview-tab .hm-icon { width: 12px; height: 12px; filter: brightness(0) saturate(100%) invert(70%) sepia(30%) saturate(600%) hue-rotate(300deg) brightness(90%) contrast(90%); }
.podcast-preview-tab.active .hm-icon { filter: brightness(0) saturate(100%) invert(80%) sepia(40%) saturate(800%) hue-rotate(300deg) brightness(100%) contrast(95%); }

.podcast-audio-area { margin-bottom: 6px; flex-shrink: 0; overflow: hidden; }
.node-card.has-size .podcast-audio-area { flex: 1; min-height: 0; overflow-y: auto; }
.podcast-total-player,
.podcast-local-player {
  width: 100%; min-width: 200px; height: 32px; border-radius: 4px; outline: none;
  filter: hue-rotate(0deg);
}
.podcast-total-player::-webkit-media-controls-panel,
.podcast-local-player::-webkit-media-controls-panel { background: #1a1a2e; }
.node-podcast .podcast-total-player::-webkit-media-controls-panel,
.node-podcast .podcast-local-player::-webkit-media-controls-panel {
  background: rgba(233,30,99,.08);
}
.node-podcast .podcast-total-player::-webkit-media-controls-current-time-display,
.node-podcast .podcast-local-player::-webkit-media-controls-current-time-display,
.node-podcast .podcast-total-player::-webkit-media-controls-time-remaining-display,
.node-podcast .podcast-local-player::-webkit-media-controls-time-remaining-display {
  color: #f48fb1;
}
.node-podcast .podcast-total-player::-webkit-media-controls-play-button,
.node-podcast .podcast-local-player::-webkit-media-controls-play-button {
  filter: invert(60%) sepia(80%) saturate(600%) hue-rotate(300deg) brightness(95%) contrast(95%);
}
.node-podcast .podcast-total-player::-webkit-media-controls-mute-button,
.node-podcast .podcast-local-player::-webkit-media-controls-mute-button {
  filter: invert(60%) sepia(80%) saturate(600%) hue-rotate(300deg) brightness(95%) contrast(95%);
}
.node-podcast .podcast-total-player::-webkit-media-controls-volume-slider,
.node-podcast .podcast-local-player::-webkit-media-controls-volume-slider {
  color: #e91e63;
}
.node-podcast .podcast-total-player::-webkit-media-controls-timeline,
.node-podcast .podcast-local-player::-webkit-media-controls-timeline {
  color: #e91e63;
}
.node-podcast .podcast-total-player::-webkit-media-controls-play-button:hover,
.node-podcast .podcast-local-player::-webkit-media-controls-play-button:hover {
  filter: invert(70%) sepia(80%) saturate(800%) hue-rotate(300deg) brightness(100%) contrast(100%);
}
.node-podcast .podcast-total-player::-webkit-media-controls-speed-button,
.node-podcast .podcast-local-player::-webkit-media-controls-speed-button {
  color: #f48fb1;
  background: rgba(233,30,99,.15);
  border-radius: 3px;
  padding: 0 4px;
}
.node-podcast .podcast-total-player::-webkit-media-controls-overflow-button,
.node-podcast .podcast-local-player::-webkit-media-controls-overflow-button {
  filter: invert(60%) sepia(80%) saturate(600%) hue-rotate(300deg) brightness(95%) contrast(95%);
}
.node-podcast .podcast-total-player::-webkit-media-controls-overflow-menu-list,
.node-podcast .podcast-local-player::-webkit-media-controls-overflow-menu-list {
  background: #1a2540;
  border: 1px solid #2d4a6e;
  border-radius: 6px;
}
.node-podcast .podcast-total-player::-webkit-media-controls-overflow-menu-list-item,
.node-podcast .podcast-local-player::-webkit-media-controls-overflow-menu-list-item {
  color: #f48fb1;
  background: transparent;
}

.podcast-audio-local { max-height: 150px; overflow-y: auto; }
.node-card.has-size .podcast-audio-local { max-height: none; }
.podcast-local-list {
  display: flex; flex-direction: column; gap: 4px;
}
.podcast-local-list::-webkit-scrollbar { width: 4px; }
.podcast-local-list::-webkit-scrollbar-track { background: transparent; }
.podcast-local-list::-webkit-scrollbar-thumb { background: rgba(233,30,99,.3); border-radius: 2px; }
.podcast-local-item {
  background: #151525; border: 1px solid rgba(233,30,99,.15);
  border-radius: 4px; padding: 4px 6px;
}
.podcast-local-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px;
}
.podcast-local-round {
  font-size: calc(8px * var(--font-scale)); color: #888; font-weight: 600;
}
.podcast-local-speaker {
  font-size: calc(8px * var(--font-scale)); color: #f48fb1; font-weight: 600;
}

/* Result audio area */
.result-audio-area { margin-top: 6px; flex-shrink: 0; }
.result-audio-player { width: 100%; min-width: 200px; height: 32px; border-radius: 4px; outline: none; }
.result-audio-player::-webkit-media-controls-panel { background: rgba(230,126,34,.08); }
.node-result .result-audio-player::-webkit-media-controls-current-time-display,
.node-result .result-audio-player::-webkit-media-controls-time-remaining-display { color: #f0b27a; }
.node-result .result-audio-player::-webkit-media-controls-play-button { filter: invert(60%) sepia(80%) saturate(600%) hue-rotate(10deg) brightness(95%) contrast(95%); }
.node-result .result-audio-player::-webkit-media-controls-mute-button { filter: invert(60%) sepia(80%) saturate(600%) hue-rotate(10deg) brightness(95%) contrast(95%); }
.node-result .result-audio-player::-webkit-media-controls-volume-slider { color: #e67e22; }
.node-result .result-audio-player::-webkit-media-controls-timeline { color: #e67e22; }
.node-result .result-audio-player::-webkit-media-controls-play-button:hover { filter: invert(70%) sepia(80%) saturate(800%) hue-rotate(10deg) brightness(100%) contrast(100%); }
.node-result .result-audio-player::-webkit-media-controls-overflow-button { filter: invert(60%) sepia(80%) saturate(600%) hue-rotate(10deg) brightness(95%) contrast(95%); }
.node-result .result-audio-player::-webkit-media-controls-overflow-menu-list { background: #1a2540; border: 1px solid #2d4a6e; border-radius: 6px; }
.node-result .result-audio-player::-webkit-media-controls-overflow-menu-list-item { color: #f0b27a; background: transparent; }

/* ==================== Podcast Config Modal ==================== */
.podcast-config-modal {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,.6); z-index: 10000;
  display: none; align-items: center; justify-content: center;
}
.podcast-config-box {
  background: #1a1a2e; border: 1px solid rgba(233,30,99,.3);
  border-radius: 12px; padding: 20px; width: 420px; max-height: 80vh;
  overflow-y: auto; color: #dde;
}
.podcast-config-box::-webkit-scrollbar { width: 6px; }
.podcast-config-box::-webkit-scrollbar-track { background: transparent; }
.podcast-config-box::-webkit-scrollbar-thumb { background: rgba(233,30,99,.3); border-radius: 3px; }
.podcast-config-title {
  font-size: calc(16px * var(--font-scale)); font-weight: 700; color: #f48fb1; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.podcast-config-close {
  background: none; border: none; color: #888; font-size: calc(20px * var(--font-scale)); cursor: pointer;
  padding: 0 4px; line-height: 1;
}
.podcast-config-close:hover { color: #f48fb1; }
.podcast-config-section {
  margin-bottom: 14px;
}
.podcast-config-section-title {
  font-size: calc(12px * var(--font-scale)); font-weight: 700; color: #f48fb1; margin-bottom: 8px;
  padding-bottom: 4px; border-bottom: 1px solid rgba(233,30,99,.15);
}
.podcast-config-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.podcast-config-label {
  font-size: calc(11px * var(--font-scale)); color: #aaa; min-width: 80px; flex-shrink: 0;
  line-height: 1.4;
}
.podcast-config-input {
  flex: 1; background: #151525; border: 1px solid rgba(233,30,99,.2);
  border-radius: 4px; padding: 4px 8px; color: #dde; font-size: calc(11px * var(--font-scale));
  outline: none; min-height: 28px;
}
.podcast-config-input:focus { border-color: #e91e63; }
.podcast-config-select {
  flex: 1; background: #151525; border: 1px solid rgba(233,30,99,.2);
  border-radius: 4px; padding: 4px 8px; color: #dde; font-size: calc(11px * var(--font-scale));
  outline: none; cursor: pointer;
}
.podcast-config-select:focus { border-color: #e91e63; }
.podcast-config-actions {
  display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end;
}
.podcast-config-save {
  padding: 6px 16px; border: 1px solid #e91e63; border-radius: 6px;
  background: rgba(233,30,99,.2); color: #f48fb1; font-size: calc(12px * var(--font-scale));
  cursor: pointer; transition: all .15s;
}
.podcast-config-save:hover { background: rgba(233,30,99,.4); }
.podcast-config-cancel {
  padding: 6px 16px; border: 1px solid #444; border-radius: 6px;
  background: #222; color: #aaa; font-size: calc(12px * var(--font-scale)); cursor: pointer;
  transition: all .15s;
}
.podcast-config-cancel:hover { background: #333; }

/* ==================== Detail Editor Modal (shared) ==================== */
.de-box {
  width: 85vw; height: 85vh; max-width: 85vw; max-height: 85vh;
}
.de-main {
  display: flex; flex: 1; overflow: hidden; min-height: 0;
}
.de-editor-area {
  flex: 1; display: flex; background: #0d1117;
  overflow: hidden; position: relative;
}
.de-line-nums {
  width: 44px; padding: 10px 6px; text-align: right;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: var(--code-font-size); line-height: var(--code-line-height); color: #484f58;
  background: #0d1117; border-right: 1px solid #21262d;
  overflow: hidden; user-select: none; flex-shrink: 0;
}
.de-code {
  flex: 1; background: #0d1117; border: none;
  padding: 10px 12px; color: #e0e0e0;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: var(--code-font-size); line-height: var(--code-line-height); resize: none;
  outline: none; tab-size: 2; white-space: pre;
  overflow: auto;
}
.de-code::placeholder { color: #3a4a5a; }
#dde-code { white-space: pre-wrap; overflow-wrap: break-word; }
.de-ln { text-align: right; }

/* Sidebar (shared) */
.de-sidebar {
  width: 260px; border-left: 1px solid #21262d;
  background: #161b22; display: flex; flex-direction: column;
  overflow-y: auto; flex-shrink: 0;
}
.de-sidebar-section {
  padding: 10px 12px; border-bottom: 1px solid #21262d;
}
.de-section-title {
  font-size: calc(10px * var(--font-scale)); font-weight: 700; color: #6a7a8a;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.de-hint {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: calc(9px * var(--font-scale)); color: #4a5a6a;
}
.de-port-list {
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  color: #58a6ff; font-size: calc(10px * var(--font-scale)); background: rgba(88,166,255,.1);
  padding: 1px 5px; border-radius: 3px;
}
.de-test-input {
  width: 100%; background: #0d1117; border: 1px solid #21262d;
  border-radius: 6px; padding: 6px 8px; color: #dde;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: var(--code-font-size); resize: vertical; min-height: 70px;
  max-height: 200px; outline: none; line-height: 1.5;
}
.de-test-input:focus { border-color: #58a6ff; }
.de-test-result {
  background: #0d1117; border: 1px solid #21262d; border-radius: 6px;
  padding: 8px 10px; font-size: calc(11px * var(--font-scale)); color: #8b949e;
  min-height: 40px; max-height: 120px; overflow-y: auto;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  line-height: 1.5; white-space: pre-wrap; word-break: break-all;
}
.de-test-success { border-color: rgba(39,174,96,.4); color: #58d68d; }
.de-test-error { border-color: rgba(231,76,60,.4); color: #e74c3c; }

/* Script editor specifics */
.sde-port-info { font-size: calc(11px * var(--font-scale)); color: #8ab; line-height: 1.8; flex-shrink: 0; }
.sde-prompt-status {
  display: inline-block; font-size: calc(10px * var(--font-scale)); padding: 2px 8px;
  border-radius: 10px; margin-bottom: 6px;
}
.sde-prompt-status-default { background: rgba(100,100,100,.2); color: #888; }
.sde-prompt-status-global { background: rgba(142,68,173,.2); color: #bb8fce; }
.sde-prompt-status-node { background: rgba(58,123,213,.2); color: #5dade2; }
.sde-prompt-edit-btn {
  width: 100%; padding: 5px 10px; border: 1px solid rgba(58,123,213,.4);
  border-radius: 6px; background: rgba(58,123,213,.08); color: #5dade2;
  font-size: calc(11px * var(--font-scale)); cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.sde-prompt-edit-btn:hover { background: rgba(58,123,213,.2); border-color: #3a7bd5; }
/* Prompt editor modal */
.sde-prompt-scope-row { display: flex; gap: 14px; margin: 6px 0; font-size: calc(12px * var(--font-scale)); color: #8ab; }
.sde-prompt-scope-opt { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.sde-prompt-scope-opt input[type="radio"] { accent-color: #3a7bd5; }
.sde-prompt-scope-desc { font-size: calc(10px * var(--font-scale)); color: #666; margin-bottom: 4px; }
.sde-prompt-textarea {
  width: 100%; min-height: 160px; max-height: 400px; resize: vertical;
  background: #0d1117; border: 1px solid #21262d; border-radius: 6px;
  padding: 8px 10px; color: #dde; font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: var(--code-font-size); outline: none; line-height: 1.5;
}
.sde-prompt-textarea:focus { border-color: #58a6ff; }
.sde-prompt-editor-hint { font-size: calc(10px * var(--font-scale)); color: #e67e22; margin-top: 4px; }
.sde-prompt-restore-btn, .sde-prompt-cancel-btn, .sde-prompt-confirm-btn {
  padding: 6px 16px; border-radius: 6px; font-size: calc(11px * var(--font-scale));
  cursor: pointer; transition: all .15s;
}
.sde-prompt-restore-btn { border: 1px solid #e67e22; background: rgba(230,126,34,.1); color: #e67e22; }
.sde-prompt-restore-btn:hover { background: rgba(230,126,34,.25); }
.sde-prompt-cancel-btn { border: 1px solid #555; background: rgba(100,100,100,.1); color: #999; }
.sde-prompt-cancel-btn:hover { background: rgba(100,100,100,.25); }
.sde-prompt-confirm-btn { border: 1px solid #3a7bd5; background: rgba(58,123,213,.2); color: #5dade2; }
.sde-prompt-confirm-btn:hover { background: rgba(58,123,213,.35); }
.sde-run-btn {
  width: 100%; margin-top: 8px; padding: 6px 0;
  border: 1px solid #16a085; border-radius: 6px; flex-shrink: 0;
  background: rgba(22,160,133,.2); color: #48c9b0;
  font-size: calc(11px * var(--font-scale)); font-weight: 600; cursor: pointer;
  transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.sde-run-btn:hover { background: rgba(22,160,133,.35); }
.sde-fix-btn { border-color: #e67e22; background: rgba(230,126,34,.15); color: #f0a75e; }
.sde-fix-btn:hover { background: rgba(230,126,34,.3); }

/* AI generation status in detail editor */
#sde-ai-gen-status {
  font-size: calc(11px * var(--font-scale));
}

/* Data editor specifics */
.dde-info-row {
  font-size: calc(11px * var(--font-scale)); color: #8ab; line-height: 1.8;
  display: flex; align-items: center; gap: 4px;
}
.dde-info-label { color: #5a7a9a; min-width: 48px; }
.dde-preview {
  background: #0d1117; border: 1px solid #21262d; border-radius: 6px;
  padding: 8px 10px; font-size: calc(11px * var(--font-scale)); color: #8b949e;
  min-height: 40px; max-height: 120px; overflow-y: auto;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  line-height: 1.5; white-space: pre-wrap; word-break: break-all;
}
.dde-action-btn {
  width: 100%; padding: 6px 0; border: 1px solid #21262d;
  border-radius: 6px; background: rgba(255,255,255,.04);
  color: #8ab; font-size: calc(11px * var(--font-scale)); cursor: pointer;
  transition: all .15s; margin-bottom: 6px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.dde-action-btn:hover { background: rgba(255,255,255,.08); border-color: #3a7bd5; color: #5dade2; }
.dde-import-btn { border-color: rgba(22,160,133,.3); }
.dde-import-btn:hover { border-color: #16a085; color: #48c9b0; background: rgba(22,160,133,.1); }

/* Syntax highlight classes (for potential overlay use) */
.hl-kw { color: #ff7b72; }
.hl-str { color: #a5d6ff; }
.hl-num { color: #79c0ff; }
.hl-cmt { color: #484f58; font-style: italic; }
.hl-fn { color: #d2a8ff; }

/* Data detail editor button */
.data-editor-btn {
  width: 100%; padding: 4px 8px; border: 1px solid rgba(58,123,213,.4);
  border-radius: 6px; background: rgba(58,123,213,.08); color: #5dade2;
  font-size: calc(10px * var(--font-scale)); cursor: pointer; transition: all .15s; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.data-editor-btn .hm-icon { filter: brightness(0) saturate(100%) invert(70%) sepia(20%) saturate(1500%) hue-rotate(180deg) brightness(95%) contrast(90%); }
.data-editor-btn:hover {
  background: rgba(58,123,213,.2); border-color: #3a7bd5;
}
.podcast-editor-btn {
  width: 100%; padding: 4px 8px; border: 1px solid rgba(233,30,99,.4);
  border-radius: 6px; background: rgba(233,30,99,.08); color: #f06292;
  font-size: calc(10px * var(--font-scale)); cursor: pointer; transition: all .15s; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.podcast-editor-btn .hm-icon { filter: invert(1) sepia(1) saturate(500%) hue-rotate(300deg) brightness(62%); }
.podcast-editor-btn:hover {
  background: rgba(233,30,99,.2); border-color: #e91e63;
}
.combine-separator-row {
  display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-shrink: 0;
}
.combine-separator-row label {
  font-size: calc(10px * var(--font-scale)); color: #8aa; white-space: nowrap;
}
.combine-separator-input {
  flex: 1; background: #151525; border: 1px solid #6c3483;
  border-radius: 4px; padding: 3px 6px; color: #dde; font-size: calc(11px * var(--font-scale));
  outline: none;
}
.combine-separator-input:focus { border-color: #af7ac5; }

/* ==================== Combine Preview ==================== */
.combine-preview {
  margin-top: 4px; max-height: 120px; overflow-y: auto;
  background: #1a0d2a; border: 1px solid rgba(142,68,173,.3); border-radius: 6px;
  padding: 6px 8px; font-size: calc(11px * var(--font-scale)); color: #d7bde2; line-height: 1.5;
  word-break: break-word; white-space: pre-wrap;
  cursor: pointer; transition: background .15s;
}
.node-card.has-size .combine-preview { flex: 1; min-height: 0; max-height: none; }
.combine-preview:hover { background: #220e3a; }
.combine-preview::-webkit-scrollbar { width: 6px; }
.combine-preview::-webkit-scrollbar-track { background: transparent; }
.combine-preview::-webkit-scrollbar-thumb { background: rgba(120,120,140,.35); border-radius: 3px; }

.node-card.has-size .node-content.no-combine-output .combine-separator-row,
.node-card.has-size .node-content.no-combine-output .port-action-row {
  flex: 0 0 auto;
}


.port-action-row {
  display: flex; gap: 4px; margin-top: 4px; flex-shrink: 0;
}
.btn-port-action {
  flex: 1; padding: 3px 6px; border: 1px solid rgba(142,68,173,.4);
  border-radius: 4px; background: rgba(142,68,173,.1); color: #af7ac5;
  font-size: calc(10px * var(--font-scale)); cursor: pointer; transition: all .15s; text-align: center;
}
.btn-port-action:hover {
  background: rgba(142,68,173,.25); border-color: #8e44ad;
}

/* ==================== Script Node ==================== */
/* Simple style: minimal script node */
.node-card.simple-style {
  min-width: 120px;
  width: auto !important;
  height: auto !important;
}
.node-card.simple-style .node-header {
  padding: 4px 8px;
  font-size: calc(11px * var(--font-scale));
  gap: 4px;
}
.node-card.simple-style .node-header .node-ds-settings {
  display: none;
}
.node-card.simple-style .node-content {
  padding: 0 6px;
}
.node-card.simple-style .ai-login-status,
.node-card.simple-style .script-editor-btn,
.node-card.simple-style .port-action-row,
.node-card.simple-style .script-ai-btn {
  display: none !important;
}
.node-card.simple-style .script-code-editor {
  min-height: 40px;
  max-height: 60px;
  font-size: calc(9px * var(--font-scale));
  padding: 4px 6px;
  border-radius: 4px;
  resize: none;
}
.node-card.simple-style .script-output-display,
.node-card.simple-style .script-error-display {
  max-height: 40px;
  font-size: calc(9px * var(--font-scale));
}
.node-card.simple-style .ai-status {
  margin-top: 2px;
  font-size: calc(10px * var(--font-scale));
}
.node-card.simple-style .node-resize-handle {
  display: none;
}

.script-code-editor {
  width: 100%; background: #0d1117; border: 1px solid #16a085;
  border-radius: 6px; padding: 6px 8px; color: #c9d1d9;
  font-size: var(--code-font-size); font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  resize: none; min-height: 80px; max-height: 140px;
  outline: none; line-height: var(--code-line-height); tab-size: 2;
}
.script-code-editor::placeholder { color: #484f58; }
.node-card.has-size .script-code-editor { flex: 1; min-height: 0; max-height: none; resize: vertical; }
.script-code-editor:focus { border-color: #48c9b0; }

.script-ai-btn {
  width: 100%; padding: 5px 8px; border: 1px solid rgba(22,160,133,.5);
  border-radius: 6px; background: rgba(22,160,133,.12); color: #48c9b0;
  font-size: calc(10px * var(--font-scale)); cursor: pointer; transition: all .15s; margin-top: 4px; flex-shrink: 0;
}
.script-ai-btn .hm-icon { filter: brightness(0) saturate(100%) invert(67%) sepia(30%) saturate(600%) hue-rotate(120deg) brightness(95%) contrast(90%); }
.script-ai-btn:hover {
  background: rgba(22,160,133,.25); border-color: #16a085;
}

.script-output-display {
  margin-top: 4px; max-height: 60px; overflow-y: auto;
  background: #0d1117; border: 1px solid rgba(22,160,133,.3); border-radius: 4px;
  padding: 4px 6px; font-size: calc(10px * var(--font-scale)); color: #48c9b0; line-height: 1.4;
  word-break: break-word; white-space: pre-wrap;
}
.node-card.has-size .script-output-display { flex: 1; min-height: 0; max-height: none; }
.script-output-display::-webkit-scrollbar { width: 6px; }
.script-output-display::-webkit-scrollbar-track { background: transparent; }
.script-output-display::-webkit-scrollbar-thumb { background: rgba(120,120,140,.35); border-radius: 3px; }

.script-error-display {
  margin-top: 4px; max-height: 60px; overflow-y: auto;
  background: rgba(231,76,60,.08); border: 1px solid rgba(231,76,60,.3); border-radius: 4px;
  padding: 4px 6px; font-size: calc(10px * var(--font-scale)); color: #e74c3c; line-height: 1.4;
  word-break: break-word; white-space: pre-wrap;
}

/* ==================== Ports ==================== */
.port-row {
  display: flex; align-items: center; padding: 5px 14px;
  font-size: calc(12px * var(--font-scale)); position: relative; min-height: 24px; flex-shrink: 0;
}
.port-row.input-row  { justify-content: flex-start; }
.port-row.output-row { justify-content: flex-end; }

.port {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2.5px solid; position: absolute; top: 50%; transform: translateY(-50%);
  cursor: crosshair; transition: all .18s ease; z-index: 10;
  background: #1a1a2e;
}
.port.input-port  { left: -8px; }
.port.output-port { right: -8px; }

.node-data .port     { border-color: #5dade2; }
.node-logic .port    { border-color: #58d68d; }
.node-combine .port { border-color: #af7ac5; }
.node-script .port  { border-color: #48c9b0; }
.node-podcast .port { border-color: #f48fb1; }
.node-result .port  { border-color: #f0b27a; }

.port:hover {
  transform: translateY(-50%) scale(1.7);
  box-shadow: 0 0 10px currentColor;
}
.node-data .port:hover     { border-color: #85c1e9; background: #2980b9; }
.node-logic .port:hover    { border-color: #82e0aa; background: #229954; }
.node-combine .port:hover  { border-color: #d2b4de; background: #7d3c98; }
.node-script .port:hover   { border-color: #76d7c4; background: #0e6655; }
.node-podcast .port:hover  { border-color: #f8bbd0; background: #c2185b; }
.node-result .port:hover   { border-color: #f5cba7; background: #d35400; }

.port.connected { border-style: solid; }
.node-data .port.connected     { background: #5dade2; border-color: #85c1e9; box-shadow: 0 0 8px #5dade2; }
.node-logic .port.connected    { background: #58d68d; border-color: #82e0aa; box-shadow: 0 0 8px #58d68d; }
.node-combine .port.connected  { background: #af7ac5; border-color: #d2b4de; box-shadow: 0 0 8px #af7ac5; }
.node-script .port.connected   { background: #48c9b0; border-color: #76d7c4; box-shadow: 0 0 8px #48c9b0; }
.node-podcast .port.connected  { background: #f48fb1; border-color: #f8bbd0; box-shadow: 0 0 8px #f48fb1; }
.node-result .port.connected  { background: #f0b27a; border-color: #f5cba7; box-shadow: 0 0 8px #f0b27a; }

.port.disconnecting {
  animation: disconnectPulse .5s ease;
  border-color: #e74c3c !important;
  box-shadow: 0 0 12px #e74c3c !important;
}
@keyframes disconnectPulse {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.5); }
}

.port.reject {
  animation: rejectShake .35s ease;
  background: #e74c3c !important;
  border-color: #ff6b6b !important;
}
@keyframes rejectShake {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  25% { transform: translateY(-50%) translateX(-3px); }
  75% { transform: translateY(-50%) translateX(3px); }
}

.port-label { color: #99a; font-size: calc(12px * var(--font-scale)); }

.btn-transfer {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--node-color, #5dade2);
  background: transparent; color: var(--node-color, #5dade2);
  font-size: calc(10px * var(--font-scale)); cursor: pointer;
  margin-right: 4px; white-space: nowrap;
  transition: background .15s, color .15s, transform .1s;
  line-height: 1.4;
}
.btn-transfer:hover {
  background: var(--node-color, #5dade2); color: #fff;
  transform: scale(1.05);
}
.btn-transfer:active {
  transform: scale(.92);
}
.btn-transfer .hm-icon-xs {
  width: calc(10px * var(--icon-scale, 1)); height: calc(10px * var(--icon-scale, 1));
  filter: var(--node-icon-filter, brightness(0) invert(1));
}
.btn-transfer:hover .hm-icon-xs {
  filter: brightness(0) invert(1);
}
.node-data .btn-transfer .hm-icon-xs    { filter: invert(1) sepia(1) saturate(500%) hue-rotate(177deg) brightness(65%); }
.node-logic .btn-transfer .hm-icon-xs   { filter: invert(1) sepia(1) saturate(500%) hue-rotate(105deg) brightness(52%); }
.node-combine .btn-transfer .hm-icon-xs { filter: invert(1) sepia(1) saturate(500%) hue-rotate(238deg) brightness(55%); }
.node-script .btn-transfer .hm-icon-xs  { filter: invert(1) sepia(1) saturate(500%) hue-rotate(128deg) brightness(45%); }
.node-podcast .btn-transfer .hm-icon-xs { filter: invert(1) sepia(1) saturate(500%) hue-rotate(300deg) brightness(62%); }
.node-result .btn-transfer .hm-icon-xs  { filter: invert(1) sepia(1) saturate(500%) hue-rotate(348deg) brightness(62%); }

/* ==================== Execution Highlights ==================== */
.node-card.executing {
  box-shadow: 0 0 20px rgba(241,196,15,.5), 0 4px 24px rgba(0,0,0,.4);
}
.node-card.executed {
  box-shadow: 0 0 12px rgba(46,204,113,.4), 0 4px 24px rgba(0,0,0,.4);
}

/* ==================== AI Stream Output ==================== */
.ai-input-preview {
  margin-top: 4px; max-height: 80px; overflow-y: auto;
  background: #0d1b2a; border: 1px solid rgba(58,123,213,.3); border-radius: 6px;
  padding: 6px 8px; font-size: calc(10px * var(--font-scale)); color: #85c1e9; line-height: 1.5;
  word-break: break-word; white-space: pre-wrap;
  cursor: pointer; transition: background .15s;
  flex-shrink: 0; align-self: flex-start; width: 100%; box-sizing: border-box;
}
.ai-input-preview:hover { background: #112240; }
.node-card.has-size .ai-input-preview { min-height: 0; max-height: 80px; }
.ai-input-preview-header {
  font-weight: 600; font-size: calc(9px * var(--font-scale)); color: #5dade2;
  margin-bottom: 2px; user-select: none;
}
.ai-input-preview-body {
  opacity: 0.85;
}
.ai-input-preview::-webkit-scrollbar { width: 6px; }
.ai-input-preview::-webkit-scrollbar-track { background: transparent; }
.ai-input-preview::-webkit-scrollbar-thumb { background: rgba(120,120,140,.35); border-radius: 3px; }

.ai-stream-output {
  margin-top: 4px; max-height: 120px; overflow-y: auto;
  background: #0d1b2a; border: 1px solid rgba(39,174,96,.3); border-radius: 6px;
  padding: 6px 8px; font-size: calc(10px * var(--font-scale)); color: #82e0aa; line-height: 1.5;
  word-break: break-word; white-space: pre-wrap;
  cursor: pointer; transition: background .15s;
}
.node-card.has-size .ai-stream-output { flex: 1; min-height: 0; max-height: none; }
.ai-stream-output:hover { background: #112240; }
.ai-stream-output::-webkit-scrollbar { width: 6px; }
.ai-stream-output::-webkit-scrollbar-track { background: transparent; }
.ai-stream-output::-webkit-scrollbar-thumb { background: rgba(120,120,140,.35); border-radius: 3px; }

.ai-continue-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 4px; padding: 4px 10px;
  background: rgba(39,174,96,.2); border: 1px solid rgba(39,174,96,.4); border-radius: 6px;
  color: #82e0aa; font-size: calc(10px * var(--font-scale)); cursor: pointer;
  transition: background .15s, border-color .15s; flex-shrink: 0;
}
.ai-continue-btn:hover { background: rgba(39,174,96,.35); border-color: rgba(39,174,96,.6); }
.ai-continue-btn .hm-icon { filter: brightness(0) saturate(100%) invert(76%) sepia(40%) saturate(500%) hue-rotate(100deg) brightness(100%) contrast(85%); }
.ai-continue-btn:disabled { cursor: not-allowed; opacity: .5; }

/* ==================== AI Thinking Output ==================== */
.ai-thinking-output {
  margin-top: 4px;
  background: #1a1530; border: 1px solid rgba(142,130,220,.3); border-radius: 6px;
  overflow: hidden; font-size: calc(10px * var(--font-scale)); cursor: pointer; flex-shrink: 0;
}
.ai-thinking-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px; background: rgba(142,130,220,.15); color: #a899e0;
  font-size: calc(10px * var(--font-scale)); font-weight: 500; user-select: none;
}
.ai-thinking-toggle { font-size: calc(8px * var(--font-scale)); transition: transform .2s; }
.ai-thinking-output.collapsed .ai-thinking-toggle { transform: rotate(-90deg); }
.ai-thinking-body {
  max-height: 300px; overflow-y: auto; padding: 6px 8px;
  color: #a899e0; line-height: 1.5; word-break: break-word; white-space: pre-wrap;
}
.ai-thinking-output.collapsed .ai-thinking-body { display: none; }
.ai-thinking-body::-webkit-scrollbar { width: 6px; }
.ai-thinking-body::-webkit-scrollbar-track { background: transparent; }
.ai-thinking-body::-webkit-scrollbar-thumb { background: rgba(120,120,140,.35); border-radius: 3px; }

/* ==================== 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-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;
}
.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;
}
#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; -webkit-user-select: 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; }

/* ==================== Grid ==================== */
#grid-canvas {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: -1;
}

/* ==================== Saved Nodes Sidebar ==================== */
.sidebar-panel {
  position: fixed; top: 48px; right: 0; bottom: 180px;
  width: 280px; z-index: 1100;
  background: #12121e; border-left: 1px solid #2d3a5e; border-top: 1px solid #2d3a5e; border-bottom: 1px solid #2d3a5e;
  display: flex; flex-direction: column;
  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-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: #3a7bd5; }
.switch input:checked + .slider::before { transform: translateX(16px); background: #fff; }

/* ==================== Node Header Icon (shared round button with border) ==================== */
.node-header-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: rgba(255,255,255,.08);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
  padding: 0;
}
.node-header-btn:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.6);
  transform: scale(1.1);
}

/* Override old button styles with new shared style */
.start-flag {
  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: rgba(255,255,255,.08);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(10px * var(--font-scale)); margin-left: auto; transition: all .2s; flex-shrink: 0;
}
.start-flag:hover { border-color: #f1c40f; background: rgba(241,196,15,.15); }
.start-flag.active {
  background: #f1c40f; border-color: #f1c40f; color: #1a1a2e;
  box-shadow: 0 0 10px rgba(241,196,15,.6);
}

.node-delete {
  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: rgba(255,255,255,.08);
  color: rgba(255,255,255,.6); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(11px * var(--font-scale)); line-height: 1; transition: all .15s; flex-shrink: 0;
  padding: 0;
}
.node-delete:hover {
  background: #e74c3c; color: #fff;
  border-color: #e74c3c;
  transform: scale(1.1);
}

.node-save-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: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(10px * var(--font-scale)); line-height: 1; transition: all .15s; flex-shrink: 0;
  padding: 0;
}
.node-save-btn:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.6);
  transform: scale(1.1);
}
/* Saved state: red solid = has been saved */
.node-save-btn.saved {
  background: #e74c3c;
  border-color: #e74c3c;
  color: #fff;
}
.node-save-btn.saved:hover {
  background: #c0392b;
  border-color: #c0392b;
  transform: scale(1.1);
}

.node-ds-settings {
  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: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(10px * var(--font-scale)); line-height: 1; transition: all .15s; flex-shrink: 0;
  padding: 0;
}
.node-ds-settings:hover {
  background: #3a7bd5; color: #fff;
  border-color: #3a7bd5;
  transform: scale(1.1);
}

.node-podcast-settings {
  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: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(10px * var(--font-scale)); line-height: 1; transition: all .15s; flex-shrink: 0;
  padding: 0;
}
.node-podcast-settings:hover {
  background: #e91e63; color: #fff;
  border-color: #e91e63;
  transform: scale(1.1);
}

.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: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(10px * var(--font-scale)); line-height: 1; transition: all .15s; flex-shrink: 0;
  padding: 0;
}
.node-pin-btn:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.6);
  transform: scale(1.1);
}
.node-pin-btn.pinned {
  background: #f39c12;
  border-color: #f39c12;
  color: #fff;
}
.node-pin-btn.pinned:hover {
  background: #e67e22;
  border-color: #e67e22;
  transform: scale(1.1);
}
.node-card.node-pinned {
  cursor: default;
  opacity: .92;
}
.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 #2d4a6e;
  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;
}
.node-config-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;
}
.node-config-body { padding: 8px 0; }
.node-config-section {
  padding: 8px 16px; border-bottom: 1px solid #222240;
}
.node-config-section:last-child { border-bottom: none; }
.node-config-section-title {
  font-size: calc(9px * var(--font-scale)); font-weight: 700; color: #667;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;
}
.node-config-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0;
}
.node-config-label {
  display: flex; align-items: center; gap: 5px;
  font-size: calc(11px * var(--font-scale)); font-weight: 500; color: #dde;
}
.node-config-desc {
  font-size: calc(8px * var(--font-scale)); color: #667; padding: 1px 6px 4px;
  line-height: 1.3;
}
.node-config-input {
  width: 100%; background: #0d1117; border: 1px solid #2d4a6e;
  border-radius: 6px; padding: 6px 10px; color: #dde;
  font-size: calc(12px * var(--font-scale)); font-family: inherit; outline: none;
}
.node-config-input:focus { border-color: #5dade2; }
.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; }

/* ==================== 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-add {
  position: absolute;
  left: -14px; top: -14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a7bd5, #2c5aa0);
  border: 2px solid #1a2540;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 4001;
  padding: 0;
  box-shadow: 0 2px 8px rgba(58,123,213,.4);
  transition: transform .15s, box-shadow .15s;
}
#fab-add:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 12px rgba(58,123,213,.6);
}
#fab-add:active {
  transform: scale(.9);
}
#fab-add .hm-icon {
  width: 14px; height: 14px;
}
#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 .hm-icon { filter: invert(1) sepia(1) saturate(500%) hue-rotate(105deg) brightness(52%); }
.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 .hm-icon { 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;
  }
  #canvas-area { top: 0; left: 56px; }
  #zoom-info { left: 72px; }
  #log-panel { left: 56px; }
}