/* ==================== 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 8.5px 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: 8.5px 8.5px 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-icon-color: #fff;
  color: var(--node-header-icon-color);
}
.node-header .hm-icon { display: block; }
.node-body { background: #1e1e30; border-radius: 0 0 8.5px 8.5px; padding: 6px 0 8px 0;}
.node-card.has-size .node-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Node type colors are auto-generated by registerNodeType() in node-core.js */

/* 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: var(--node-header-icon-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; display: flex; flex-direction: column; --node-gap: 6px; gap: var(--node-gap); }
.node-card.has-size .node-content { flex: 1; min-height: 0; }
.node-card.has-size .data-mode-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.data-mode-panel, .podcast-action-panel { display: flex; flex-direction: column; gap: var(--node-gap); }

.node-ui-info { font-size: calc(9px * var(--font-scale)); color: #667; text-align: right; flex-shrink: 0; }
.node-ui-resizer { height: 6px; cursor: ns-resize; border-radius: 3px; background: transparent; transition: background .15s; flex-shrink: 0; }
.node-ui-resizer:hover { background: var(--node-bg-hover, rgba(255,255,255,.1)); }

/* ==================== Node UI Factory Generic Styles ==================== */
.node-ui-textarea {
  width: 100%; background: #151525; border-radius: 6px; padding: 6px 8px; color: #dde;
  font-size: calc(11px * var(--font-scale)); font-family: inherit; resize: none;
  min-height: 40px; max-height: 200px; outline: none; line-height: 1.5;
}
.node-card.has-size .node-ui-textarea { min-height: 0; max-height: none; resize: vertical; }
.node-ui-textarea:focus { border-color: var(--node-color, #5dade2); }
.node-ui-textarea::placeholder { color: #4a6a8a; }

.node-ui-btn {
  width: 100%; padding: 4px 8px; border-radius: 6px;
  font-size: calc(10px * var(--font-scale)); font-weight: 600; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--node-gap) * .5); flex-shrink: 0;
  border: 1px solid var(--node-color, rgba(255,255,255,.2));
  background: var(--node-bg, rgba(255,255,255,.04));
  color: var(--node-text, #8ab);
}
.node-ui-btn:hover {
  background: var(--node-bg-hover, rgba(255,255,255,.1));
  border-color: var(--node-color, rgba(255,255,255,.4));
}
.node-ui-btn:disabled {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}

.node-ui-field-row {
  display: flex; align-items: center; gap: calc(var(--node-gap) * .5); flex-shrink: 0;
}
.node-ui-field-row label {
  font-size: calc(10px * var(--font-scale)); color: #8aa; white-space: nowrap;
}
.node-ui-field-input {
  flex: 1; background: #151525; border-radius: 4px; padding: 3px 6px; color: #dde;
  font-size: calc(11px * var(--font-scale)); outline: none;
  border: 1px solid var(--node-color, #3a7bd5);
}
.node-ui-field-input:focus { border-color: var(--node-text, #5dade2); }

.node-ui-btn-group {
  display: flex; gap: var(--node-gap); flex-shrink: 0;
}
.node-ui-group-btn {
  flex: 1; padding: 3px 6px; border-radius: 4px;
  font-size: calc(10px * var(--font-scale)); font-weight: 600; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--node-gap) * .5);
  border: 1px solid var(--node-color, rgba(255,255,255,.2));
  background: var(--node-bg, rgba(255,255,255,.04));
  color: var(--node-text, #8ab);
}
.node-ui-group-btn:disabled {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
.node-ui-group-btn:hover {
  background: var(--node-bg-hover, rgba(255,255,255,.1));
  border-color: var(--node-color, rgba(255,255,255,.4));
}

.node-ui-tabs {
  display: flex; gap: 0; flex-shrink: 0;
  border: 1px solid var(--node-color, #2d4a6e); border-radius: 6px; overflow: hidden;
}
.node-ui-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;
}
.node-ui-tab:not(:last-child) { border-right: 1px solid var(--node-color, rgba(255,255,255,.1)); }
.node-ui-tab.active { background: var(--node-bg, rgba(58,123,213,.2)); color: var(--node-text, #5dade2); }
.node-ui-tab:hover:not(.active) { background: #1a1a35; color: #8ab; }

.node-ui-audio-area { flex-shrink: 0; overflow: hidden; }
.node-card.has-size .node-ui-audio-area { flex: 1; min-height: 0; overflow-y: auto; }
.node-ui-audio-player { width: 100%; min-width: 200px; height: 32px; border-radius: 4px; outline: none; }

.node-ui-status {
  margin-top: auto; font-size: calc(10px * var(--font-scale)); display: flex;
  align-items: center; justify-content: space-between; gap: calc(var(--node-gap) * .5); flex-shrink: 0;
  padding-top: 4px;
}
.node-ui-status-left { display: flex; align-items: center; gap: calc(var(--node-gap) * .5); }
.node-ui-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.node-ui-dot.idle    { background: #555; }
.node-ui-dot.running { background: #f1c40f; animation: nodeUiPulse 1s infinite; }
.node-ui-dot.done    { background: #2ecc71; }
.node-ui-dot.error   { background: #e74c3c; }
.node-ui-dot.disconnected { background: #555; }
.node-ui-dot.connecting   { background: #f39c12; animation: nodeUiPulse 1s infinite; }
.node-ui-dot.connected    { background: #27ae60; }
.node-ui-dot.generating   { background: #e91e63; animation: nodeUiPulse .8s infinite; }
@keyframes nodeUiPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.node-ui-collapsible {
  background: #1a1530; border-radius: 6px;
  overflow: hidden; font-size: calc(10px * var(--font-scale)); cursor: pointer; flex-shrink: 0;
  border: 1px solid rgba(142,130,220,.3);
}
.node-ui-collapsible-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;
}
.node-ui-collapsible-body {
  max-height: 300px; overflow-y: auto; padding: 6px 8px;
  color: #a899e0; line-height: 1.5; word-break: break-word; white-space: pre-wrap;
}
.node-ui-collapsible.collapsed .node-ui-collapsible-body { display: none; }

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

.node-ui-progress {
  display: flex; align-items: center; gap: var(--node-gap); flex-shrink: 0;
}
.node-ui-progress-bar {
  flex: 1; height: 4px; background: #1a1a2e; border-radius: 2px; overflow: hidden;
}
.node-ui-progress-fill {
  height: 100%; border-radius: 2px; transition: width .3s; width: 0;
  background: linear-gradient(90deg, var(--node-color, #5dade2), var(--node-text, #85c1e9));
}
.node-ui-progress-text {
  font-size: calc(9px * var(--font-scale)); color: var(--node-text, #8ab); flex-shrink: 0;
}

.node-ui-alert {
  padding: 6px 8px; border-radius: 6px;
  font-size: calc(11px * var(--font-scale)); display: flex; align-items: center; gap: calc(var(--node-gap) * .5);
  flex-wrap: wrap; line-height: 1.5; flex-shrink: 0;
}
.node-ui-alert.not-logged-in { background: rgba(231,76,60,.15); border: 1px solid rgba(231,76,60,.4); color: #e74c3c; }
.node-ui-alert.logged-in     { background: rgba(39,174,96,.15); border: 1px solid rgba(39,174,96,.3); color: #2ecc71; }
.node-ui-alert.logging-in    { background: rgba(241,196,15,.15); border: 1px solid rgba(241,196,15,.3); color: #f1c40f; }
.node-ui-alert.proxy-down    { background: rgba(155,89,182,.15); border: 1px solid rgba(155,89,182,.3); color: #bb8fce; }

.node-ui-toolbar {
  display: flex; gap: var(--node-gap); flex-shrink: 0;
}
.node-ui-toolbar-btn {
  flex: 1; padding: 4px 8px; border-radius: 4px;
  font-size: calc(10px * var(--font-scale)); cursor: pointer; transition: all .15s; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--node-gap) * .5);
  border: 1px solid var(--node-color, rgba(255,255,255,.2));
  background: var(--node-bg, rgba(255,255,255,.04));
  color: var(--node-text, #8ab);
}
.node-ui-toolbar-btn:hover {
  background: var(--node-bg-hover, rgba(255,255,255,.1));
  border-color: var(--node-color, rgba(255,255,255,.4));
  transform: translateY(-1px);
}
.node-ui-toolbar-btn:active { transform: translateY(0); }

.node-ui-file-upload {
  border: 1.5px dashed var(--node-color, rgba(255,255,255,.3)); border-radius: 6px;
  padding: 8px; text-align: center; cursor: pointer; transition: all .15s;
  font-size: calc(11px * var(--font-scale)); color: #8ab; position: relative;
  overflow: hidden; flex-shrink: 0;
}
.node-ui-file-upload:hover { border-color: var(--node-text, #5dade2); background: var(--node-bg, rgba(255,255,255,.04)); }
.node-ui-file-upload.has-file { border-style: solid; border-color: #27ae60; color: #2ecc71; background: rgba(39,174,96,.08); }
.node-ui-file-upload input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0;
}

.node-ui-output {
  max-height: 200px; overflow-y: auto;
  background: rgba(255,255,255,0.02); border-radius: 4px; padding: 6px 8px;
  font-size: calc(11px * var(--font-scale)); color: #dde; line-height: 1.5;
  word-break: break-word; white-space: pre-wrap;
  border: 1px solid var(--node-color, rgba(255,255,255,.1));
}
.node-card.has-size .node-ui-output { flex: 1; min-height: 0; max-height: none; }
.node-ui-output::-webkit-scrollbar { width: 6px; }
.node-ui-output::-webkit-scrollbar-track { background: transparent; }
.node-ui-output::-webkit-scrollbar-thumb { background: rgba(120,120,140,.35); border-radius: 3px; }

.node-ui-error {
  max-height: 120px; overflow-y: auto;
  background: rgba(231,76,60,.08); border-radius: 4px; padding: 6px 8px;
  font-size: calc(11px * var(--font-scale)); color: #e74c3c; line-height: 1.5;
  word-break: break-word; white-space: pre-wrap;
  border: 1px solid rgba(231,76,60,.3);
}
.node-card.has-size .node-ui-error { flex-shrink: 0; }

.node-ui-hint {
  padding: 4px 8px; border-radius: 4px;
  font-size: calc(10px * var(--font-scale)); color: #8aa; line-height: 1.5;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}


.node-ui-audio-area { flex-shrink: 0; overflow: hidden; }
.node-card.has-size .node-ui-audio-area { flex: 1; min-height: 0; overflow-y: auto; }
.node-ui-audio-total, .node-ui-audio-local { overflow: hidden; }
.node-ui-audio-player { width: 100%; min-width: 200px; height: 32px; border-radius: 4px; outline: none; }
.node-ui-audio-list { max-height: 150px; overflow-y: auto; }
.node-card.has-size .node-ui-audio-list { max-height: none; }
.node-card.has-size .data-editor-btn { flex-shrink: 0; }

.file-preview {
  max-height: 80px; overflow-y: auto;
  background: rgba(255, 255, 255, 0.1); 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 {
  padding: 6px 8px; border-radius: 6px;
  font-size: calc(11px * var(--font-scale)); display: flex; align-items: center; gap: calc(var(--node-gap) * .5);
  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-word-count { color: #888; font-variant-numeric: tabular-nums; }

.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: calc(var(--node-gap) * .5);
}
.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); }


/* Result display */
.result-display {
  min-height: 30px; max-height: 120px; overflow-y: auto;
  background: rgba(13, 17, 23, 0.02); 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;
}
.result-display:empty { color: #484f58; }
.node-card.has-size .result-display { flex: 1; min-height: 0; max-height: none; resize: vertical; }
.result-display:hover { background: rgba(13, 17, 23, 0.12); }
.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-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; }




/* ==================== Podcast Node ==================== */
.node-podcast { min-width: 280px; width: 320px; }

.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 { flex-shrink: 0; }

.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: calc(var(--node-gap) * .5);
  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-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-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-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; }

/* ==================== 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;
  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;
  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-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 {
  max-height: 120px; overflow-y: auto;
  background: rgba(255, 255, 255, 0.1); 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;
}

.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 {
  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-output-display {
  max-height: 60px; overflow-y: auto;
  background: rgba(13, 17, 23, 0.02); 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;
}
.script-output-display:empty { color: #484f58; }
.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; }

/* ==================== 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 .port-input-side { display: flex; align-items: center; flex-shrink: 0; }
.port-row .port-output-side { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }

.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; }

/* Port type colors are auto-generated by registerNodeType() in node-core.js */

.port:hover {
  transform: translateY(-50%) scale(1.7);
  box-shadow: 0 0 10px currentColor;
}

.port.connected { border-style: solid; }

.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;
  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));
  transform: translateX(2.5px); /* 修正图标路径在原始 SVG 中偏左的问题 */
}
.btn-transfer:hover .hm-icon-xs {
  filter: brightness(0) invert(1) drop-shadow(0 0 0.5px currentColor) !important;
}
.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 {
  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 {
  max-height: 120px; overflow-y: auto;
  background: rgba(255, 255, 255, 0.1); 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; }