/* ============================================================
   WORKFLOW EDITOR - Freepik Spaces-style Node-Based Workflow Editor CSS
   Scoped under .workflow-editor | IDs prefixed with we-
   Replicated from Freepik Spaces design system
   ============================================================ */


/* ==================== RESET & BASE ==================== */
.workflow-editor *, .workflow-editor *::before, .workflow-editor *::after { box-sizing: border-box; margin: 0; padding: 0; }

.workflow-editor {
    --bg-canvas: #12191D;
    --bg-panel: rgba(28, 38, 45, 0.85);
    --bg-node: rgba(28, 38, 45, 0.75);
    --bg-node-solid: #1C262D;
    --bg-input: #26363E;
    --bg-hover: #2a3a44;
    --bg-active: #324450;
    --border: rgba(124, 152, 169, 0.12);
    --border-light: rgba(124, 152, 169, 0.15);
    --border-bright: rgba(124, 152, 169, 0.22);
    --text: #e8ecef;
    --text-dim: #7C98A9;
    --text-bright: #ffffff;
    --accent: #5ce89a;
    --accent-hover: #0084FF;
    --accent-bright: #c8f5dc;
    --accent-glow: rgba(0, 114, 233, 0.18);
    --green: #5ce89a;
    --green-glow: rgba(0, 114, 233, 0.15);
    --opal-green: #5ce89a;
    --opal-green-glow: rgba(0, 114, 233, 0.10);
    --pink: #E83D7E;
    --pink-glow: rgba(232, 61, 126, 0.15);
    --teal: #1EA4B8;
    --teal-glow: rgba(30, 164, 184, 0.15);
    --silver: #7C98A9;
    --silver-glow: rgba(124, 152, 169, 0.12);
    --red: #f87171;
    --red-glow: rgba(248, 113, 113, 0.3);
    --orange: #fbbf24;
    --orange-glow: rgba(251, 191, 36, 0.3);
    --port-text: #a78bfa;
    --port-image: #38bdf8;
    --port-audio: #1EA4B8;
    --port-video: #E83D7E;
    --node-w: 240px;
    --radius: 16px;
    --radius-sm: 8px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --shadow-node: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(124,152,169,0.06);
    --shadow-node-hover: 0 12px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(92,232,154,0.15);
    --glass: blur(28px) saturate(1.9);
    font-family: var(--font);
    font-size: 15px;
    color: var(--text);
    background: var(--bg-canvas);
    -webkit-font-smoothing: antialiased;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* ==================== LAYOUT ==================== */
.workflow-editor #we-app {
    --sidebar-w: 230px;
    --props-w: 300px;
    display: grid;
    grid-template-rows: 48px 1fr;
    grid-template-columns: var(--sidebar-w) 1fr var(--props-w);
    grid-template-areas:
        "toolbar toolbar toolbar"
        "sidebar canvas props";
    width: 100%; height: 100%;
    transition: grid-template-columns 0.3s ease;
}
.workflow-editor #we-app.sidebar-collapsed { --sidebar-w: 0px; }
.workflow-editor #we-app.sidebar-collapsed #we-sidebar { overflow: hidden; opacity: 0; pointer-events: none; }
.workflow-editor #we-app.props-collapsed { --props-w: 0px; }
.workflow-editor #we-app.props-collapsed #we-props-panel,
.workflow-editor #we-app.props-collapsed #we-chat-panel { overflow: hidden; opacity: 0; pointer-events: none; }

/* ==================== TOOLBAR ==================== */
.workflow-editor #we-toolbar {
    grid-area: toolbar;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    background: rgba(28, 38, 45, 0.92);
    border-bottom: 1px solid var(--border);
    z-index: 100;
    backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 2px 16px rgba(0,0,0,0.25);
}

.workflow-editor .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
    white-space: nowrap;
}
.workflow-editor .logo svg { flex-shrink: 0; }
.workflow-editor .logo-text {
    font-weight: 700;
    font-size: 17px;
    background: linear-gradient(135deg, #e0e0e8, #c8f5dc, #5ce89a, #c8f5dc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.3px;
}

.workflow-editor .tb-sep { width: 1px; height: 24px; background: linear-gradient(180deg, transparent, rgba(92,232,154,0.12), transparent); margin: 0 6px; }

.workflow-editor .tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 7px 8px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 0;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    line-height: 1;
}
.workflow-editor .tb-btn:hover { background: var(--bg-hover); color: var(--text-bright); }
.workflow-editor .tb-btn:active { transform: scale(0.97); }
.workflow-editor .tb-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.workflow-editor .tb-btn.primary { background: var(--accent); color: #fff; padding: 7px 10px; border-radius: var(--radius-sm); }
.workflow-editor .tb-btn.primary:hover { background: var(--accent-hover); }
.workflow-editor .tb-btn.danger { color: var(--red); }
.workflow-editor .tb-btn.danger:hover { background: rgba(248,113,113,0.1); box-shadow: 0 2px 8px rgba(248,113,113,0.2); }

.workflow-editor .tb-spacer { flex: 1; }

.workflow-editor .zoom-display {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    font-family: var(--mono);
    min-width: 42px;
    text-align: center;
    padding: 4px 8px;
    background: var(--bg-input);
    border-radius: 6px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}

/* ==================== SIDEBAR ==================== */
.workflow-editor #we-sidebar {
    grid-area: sidebar;
    background: rgba(28, 38, 45, 0.92);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: var(--glass);
}

.workflow-editor .section-title {
    padding: 14px 16px 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-dim);
}

/* ==================== COLLAPSIBLE SIDEBAR SECTIONS ==================== */
.workflow-editor .we-sidebar-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: flex 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.workflow-editor .we-sidebar-section.collapsed {
    flex: 0 0 auto !important;
}

/* Section Header */
.workflow-editor .we-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.workflow-editor .we-section-header:hover {
    background: rgba(200,200,220,0.04);
}
.workflow-editor .we-section-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.workflow-editor .we-section-icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 2px;
}
.workflow-editor .we-section-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-dim);
    flex: 1;
}
.workflow-editor .we-section-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(200,200,220,0.06);
    padding: 1px 6px;
    border-radius: 8px;
    line-height: 1.4;
}
.workflow-editor .we-section-chevron {
    color: var(--text-dim);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.workflow-editor .we-sidebar-section.collapsed .we-section-chevron {
    transform: rotate(-90deg);
}

/* Section Body (collapsible) */
.workflow-editor .we-section-body {
    flex: 1;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    min-height: 0;
}
.workflow-editor .we-sidebar-section.collapsed .we-section-body {
    max-height: 0 !important;
    opacity: 0;
    pointer-events: none;
    flex: 0;
    overflow: hidden;
}

/* Resize Handles */
.workflow-editor .we-resize-handle {
    height: 5px;
    cursor: row-resize;
    flex-shrink: 0;
    position: relative;
}
.workflow-editor .we-resize-handle::before {
    content: '';
    position: absolute;
    left: 20%;
    right: 20%;
    top: 2px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(92,232,154,0.25), rgba(200,200,220,0.15), transparent);
    border-radius: 1px;
    transition: opacity 0.2s ease;
}
.workflow-editor .we-resize-handle:hover::before,
.workflow-editor .we-resize-handle:active::before {
    opacity: 1;
    background: linear-gradient(90deg, transparent, rgba(92,232,154,0.5), rgba(200,200,220,0.35), transparent);
}

/* Workflow item icon */
.workflow-editor .wf-item .wf-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 8px;
}
.workflow-editor .wf-item .wf-icon svg {
    width: 13px;
    height: 13px;
    stroke-width: 2px;
}

.workflow-editor .node-palette { height: 100%; overflow-y: auto; padding: 0 8px 8px; }

.workflow-editor .palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: var(--radius-sm);
    cursor: grab;
    transition: all 0.15s ease;
    user-select: none;
    border: none;
}
.workflow-editor .palette-item:hover { background: var(--bg-hover); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.workflow-editor .palette-item:active { cursor: grabbing; transform: scale(0.98); }

.workflow-editor .palette-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}
.workflow-editor .palette-item:hover .palette-icon {
    transform: scale(1.08);
    filter: brightness(1.2);
}
.workflow-editor .palette-icon svg { width: 22px; height: 22px; stroke-width: 2.2px; }

.workflow-editor .palette-label { font-size: 15px; font-weight: 600; color: #f0f0f0; }
.workflow-editor .palette-desc { font-size: 12px; color: #808080; margin-top: 2px; }

.workflow-editor .workflow-list {
    box-shadow: inset 0 1px 0 rgba(92,232,154,0.06);
    padding: 4px 8px 8px;
    height: 100%;
    overflow-y: auto;
}

.workflow-editor .wf-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    border: none;
}
.workflow-editor .wf-item:hover { background: var(--bg-hover); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.workflow-editor .wf-item .wf-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-editor .wf-item .wf-del { opacity: 0; color: var(--red); cursor: pointer; padding: 2px 6px; font-size: 18px; font-weight: 300; }
.workflow-editor .wf-item:hover .wf-del { opacity: 0.5; }
.workflow-editor .wf-item .wf-del:hover { opacity: 1; }

/* ==================== CANVAS ==================== */
.workflow-editor #we-canvas-container {
    grid-area: canvas;
    position: relative;
    overflow: hidden;
    background: #020304;
    cursor: grab;
}
.workflow-editor #we-canvas-container.panning { cursor: grabbing; }
.workflow-editor #we-canvas-container.spacebar-pan { cursor: grab; }
.workflow-editor #we-canvas-container.spacebar-pan.panning { cursor: grabbing; }

.workflow-editor #we-canvas-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.workflow-editor #we-canvas {
    position: absolute;
    top: 0; left: 0;
    transform-origin: 0 0;
}

.workflow-editor #we-connections-svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
}

.workflow-editor #we-connections-svg path.conn {
    fill: none;
    stroke-width: 2;
    stroke-opacity: 0.4;
    stroke-linecap: round;
    pointer-events: stroke;
    cursor: pointer;
    filter: none;
    transition: stroke-width 0.18s ease, stroke-opacity 0.18s ease, filter 0.18s ease;
}
.workflow-editor #we-connections-svg path.conn.conn-flow {
    stroke-dasharray: 5 5;
    animation: flowDash 1s linear infinite;
}
@keyframes flowDash {
    to { stroke-dashoffset: -10; }
}
.workflow-editor #we-connections-svg path.conn:hover,
.workflow-editor #we-connections-svg path.conn-hit:hover + path.conn {
    stroke-opacity: 0.8;
    stroke-width: 3;
    filter: drop-shadow(0 0 4px rgba(0, 114, 233, 0.3));
}

.workflow-editor #we-connections-svg path.conn-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 20;
    pointer-events: stroke;
    cursor: pointer;
}

.workflow-editor #we-drag-connection {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 6 4;
    pointer-events: none;
    opacity: 0.7;
}

.workflow-editor #we-selection-box {
    position: absolute;
    border: 1.5px solid var(--accent);
    background: rgba(124, 91, 245, 0.06);
    pointer-events: none;
    display: none;
    z-index: 50;
    border-radius: 4px;
}

/* ==================== SIDEBAR TOGGLES ==================== */
.workflow-editor .sidebar-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 48px;
    background: rgba(4, 6, 10, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(210, 210, 230, 0.10);
    border-radius: 0 8px 8px 0;
    color: var(--text-dim);
    cursor: pointer;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}
.workflow-editor .sidebar-toggle:hover { background: rgba(4, 6, 10, 0.9); color: var(--text-bright); }
.workflow-editor .sidebar-toggle.left { left: 0; }
.workflow-editor .sidebar-toggle.right { right: 0; border-radius: 8px 0 0 8px; }
.workflow-editor .sidebar-toggle svg { width: 14px; height: 14px; transition: transform 0.3s; }
.workflow-editor #we-app.sidebar-collapsed .sidebar-toggle.left svg { transform: rotate(180deg); }
.workflow-editor #we-app.props-collapsed .sidebar-toggle.right svg { transform: rotate(180deg); }

/* ==================== FULLSCREEN ==================== */
.workflow-editor:fullscreen { width: 100vw; height: 100vh; }
.workflow-editor:-webkit-full-screen { width: 100vw; height: 100vh; }

/* ==================== MINIMAP ==================== */
.workflow-editor .minimap {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 180px;
    height: 120px;
    background: rgba(4, 6, 10, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(210, 210, 230, 0.10);
    border-radius: 8px;
    z-index: 55;
    overflow: hidden;
    cursor: pointer;
}
.workflow-editor .minimap canvas { width: 100%; height: 100%; display: block; }

/* ==================== STALE INDICATOR ==================== */
.workflow-editor .node.stale {
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.4), 0 0 16px rgba(251, 191, 36, 0.1), var(--shadow-node);
}
.workflow-editor .node.stale .stale-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: #fb923c;
    border-radius: 50%;
    border: 2px solid var(--bg-node-solid);
    z-index: 10;
}

/* ==================== TEMPLATE CARDS ==================== */
.workflow-editor .template-list { padding: 4px 8px 8px; }
.workflow-editor .template-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
}
.workflow-editor .template-item:hover { background: var(--bg-hover); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.workflow-editor .template-item .template-icon {
    width: 28px; height: 28px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.workflow-editor .template-item .template-icon svg { width: 14px; height: 14px; }
.workflow-editor .template-item .template-info { flex: 1; overflow: hidden; }
.workflow-editor .template-item .template-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workflow-editor .template-item .template-desc { font-size: 12px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==================== ZOOM CONTROLS ==================== */
.workflow-editor .zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 2px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}
.workflow-editor .zoom-controls .zoom-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: none; border: none; color: var(--text-dim);
    cursor: pointer; border-radius: 6px;
    font-size: 16px; font-weight: 600;
    transition: all 0.15s;
}
.workflow-editor .zoom-controls .zoom-btn:hover { background: var(--bg-hover); color: var(--text-bright); }
.workflow-editor .zoom-controls .zoom-btn svg { width: 14px; height: 14px; }
.workflow-editor .zoom-controls .zoom-pct {
    font-size: 13px; font-weight: 600; font-family: var(--mono);
    color: var(--text-dim); min-width: 42px; text-align: center;
    cursor: pointer; padding: 4px 2px; border-radius: 4px;
    transition: all 0.15s;
}
.workflow-editor .zoom-controls .zoom-pct:hover { color: var(--text-bright); background: var(--bg-hover); }

/* ==================== NODES ==================== */
.workflow-editor .node {
    position: absolute;
    width: var(--node-w);
    background: var(--bg-node-solid);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
    cursor: move;
    user-select: none;
    box-shadow: var(--shadow-node);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    z-index: 1;
}
.workflow-editor .node:hover {
    border-color: var(--border-bright);
    border-left-color: var(--accent-hover);
    box-shadow: var(--shadow-node-hover);
    z-index: 2;
}
.workflow-editor .node.selected {
    border-color: rgba(92,232,154,0.6);
    box-shadow: 0 0 0 1px rgba(92,232,154,0.4), 0 6px 24px rgba(0,0,0,0.35);
    z-index: 3;
}
.workflow-editor .node.running {
    border-color: var(--orange);
    box-shadow: 0 0 0 1px var(--orange-glow), 0 4px 16px rgba(0,0,0,0.3);
    animation: node-pulse 2s ease-in-out infinite;
}
.workflow-editor .node.completed { border-color: rgba(92,232,154,0.4); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.workflow-editor .node.error { border-color: rgba(248,113,113,0.5); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }

/* Brain node */
.workflow-editor .node[data-type="brain"] {
    border-color: rgba(92,232,154,0.25);
}
.workflow-editor .node[data-type="brain"]:hover {
    border-color: rgba(92,232,154,0.4);
}

.workflow-editor .node-running-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(251, 191, 36, 0.25), transparent);
    color: var(--orange);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 6px 8px 8px;
    border-radius: 0 0 var(--radius) var(--radius);
    letter-spacing: 0.5px;
    animation: overlay-pulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
}
@keyframes overlay-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@keyframes node-pulse {
    0%, 100% { border-color: var(--orange); }
    50% { border-color: rgba(251,191,36,0.5); }
}

.workflow-editor .node-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: transparent;
    border-bottom: 1px solid var(--border);
}

.workflow-editor .node-header-icon {
    width: 26px; height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}
.workflow-editor .node-header-icon svg { width: 14px; height: 14px; stroke-width: 2px; }

.workflow-editor .node-header-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #f0f0f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0;
}

.workflow-editor .node-header-status {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.workflow-editor .node-header-status.idle { background: var(--text-dim); opacity: 0.3; }
.workflow-editor .node-header-status.running { background: var(--orange); animation: dot-pulse 1s infinite; }
.workflow-editor .node-header-status.completed { background: var(--green); }
.workflow-editor .node-header-status.error { background: var(--red); }

@keyframes dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.workflow-editor .node-body { padding: 6px 0 4px; }

.workflow-editor .node-port-row {
    display: flex;
    align-items: center;
    padding: 3px 12px;
    font-size: 13px;
    color: var(--text-dim);
    position: relative;
}
.workflow-editor .node-port-row.input { justify-content: flex-start; }
.workflow-editor .node-port-row.output { justify-content: flex-end; }

.workflow-editor .port-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid;
    background: var(--bg-node-solid);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: crosshair;
    z-index: 5;
    transition: all 0.15s ease;
}
.workflow-editor .port-dot:hover { transform: translateY(-50%) scale(1.4); filter: brightness(1.4) drop-shadow(0 0 4px currentColor); }
.workflow-editor .port-dot.input { left: -6px; }
.workflow-editor .port-dot.output { right: -6px; }

.workflow-editor .port-dot[data-type="text"] { border-color: var(--port-text); }
.workflow-editor .port-dot[data-type="image"] { border-color: var(--port-image); }
.workflow-editor .port-dot[data-type="audio"] { border-color: var(--port-audio); }
.workflow-editor .port-dot[data-type="video"] { border-color: var(--port-video); }

.workflow-editor .port-dot.connected[data-type="text"] { background: var(--port-text); box-shadow: 0 0 3px var(--port-text); }
.workflow-editor .port-dot.connected[data-type="image"] { background: var(--port-image); box-shadow: 0 0 3px var(--port-image); }
.workflow-editor .port-dot.connected[data-type="audio"] { background: var(--port-audio); box-shadow: 0 0 3px var(--port-audio); }
.workflow-editor .port-dot.connected[data-type="video"] { background: var(--port-video); box-shadow: 0 0 3px var(--port-video); }

.workflow-editor .port-label { font-size: 13px; font-weight: 500; color: #d8d8e2; letter-spacing: 0.2px; }
.workflow-editor .node-port-row.input .port-label { margin-left: 8px; }
.workflow-editor .node-port-row.output .port-label { margin-right: 8px; }

/* Node preview */
.workflow-editor .node-preview {
    padding: 6px 12px 8px;
    text-align: center;
}
.workflow-editor .node-preview img, .workflow-editor .node-preview video {
    max-width: 100%;
    max-height: 140px;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    object-fit: cover;
}
.workflow-editor .node-preview video { background: #000; }
.workflow-editor .node-preview .preview-text {
    font-size: 12px;
    color: var(--text-dim);
    padding: 6px 8px;
    background: var(--bg-input);
    border-radius: 6px;
    word-break: break-word;
    max-height: 48px;
    overflow: hidden;
    line-height: 1.4;
    text-align: left;
    font-family: var(--mono);
}

.workflow-editor .node-run-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 4px 12px 10px;
    padding: 6px 0;
    background: linear-gradient(135deg, var(--accent), #6041d4);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.3px;
}
.workflow-editor .node-run-btn:hover { filter: brightness(1.15); box-shadow: 0 0 16px var(--accent-glow); }
.workflow-editor .node-run-btn:active { transform: scale(0.97); }
.workflow-editor .node-run-btn svg { width: 12px; height: 12px; }

/* ==================== PROPERTIES PANEL ==================== */
.workflow-editor #we-props-panel {
    grid-area: props;
    background: rgba(28, 38, 45, 0.92);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(20px) saturate(1.4);
}

.workflow-editor .panel-header {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-bright);
}

.workflow-editor .panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
}

.workflow-editor .prop-group { margin-bottom: 16px; }

.workflow-editor .prop-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.workflow-editor .prop-input, .workflow-editor .prop-select, .workflow-editor .prop-textarea {
    width: 100%;
    padding: 8px 10px;
    background: rgba(6,5,3,0.50);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    outline: none;
    transition: box-shadow 0.15s ease;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
    backdrop-filter: blur(12px) saturate(1.3);
}
.workflow-editor .prop-input:focus, .workflow-editor .prop-select:focus, .workflow-editor .prop-textarea:focus {
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3), 0 0 0 2px rgba(92,232,154,0.3);
}
.workflow-editor .prop-textarea {
    min-height: 90px;
    resize: vertical;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.6;
}
.workflow-editor .prop-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236e6e8a' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

.workflow-editor .prop-range-row { display: flex; align-items: center; gap: 10px; }
.workflow-editor .prop-range-row input[type="range"] { flex: 1; accent-color: var(--accent); height: 4px; }
.workflow-editor .prop-range-row .range-val {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--mono);
    color: var(--text-dim);
    min-width: 32px;
    text-align: right;
}

.workflow-editor .prop-file-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: var(--bg-input);
    border: 2px dashed var(--border-bright);
    border-radius: var(--radius);
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.workflow-editor .prop-file-btn:hover { border-color: var(--accent); color: var(--text-bright); background: rgba(124, 91, 245, 0.05); }
.workflow-editor .prop-file-btn svg { width: 16px; height: 16px; }

.workflow-editor .prop-empty {
    color: var(--text-dim);
    font-size: 14px;
    text-align: center;
    padding: 48px 24px;
    line-height: 1.7;
}

/* ==================== CONTEXT MENU ==================== */
.workflow-editor .context-menu {
    position: fixed;
    background: var(--bg-node-solid);
    backdrop-filter: var(--glass);
    border: none;
    border-radius: var(--radius);
    padding: 6px;
    min-width: 180px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    z-index: 1000;
    display: none;
}

.workflow-editor .ctx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text);
    transition: all 0.1s ease;
}
.workflow-editor .ctx-item:hover { background: var(--bg-hover); color: var(--text-bright); }
.workflow-editor .ctx-item.danger { color: var(--red); }
.workflow-editor .ctx-item.danger:hover { background: rgba(248,113,113,0.1); }
.workflow-editor .ctx-item svg { width: 14px; height: 14px; opacity: 0.7; }
.workflow-editor .ctx-item .ctx-key {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-dim);
    font-family: var(--mono);
    font-weight: 500;
    padding: 1px 5px;
    background: var(--bg-input);
    border-radius: 4px;
}

.workflow-editor .ctx-separator { height: 1px; background: linear-gradient(90deg, transparent, rgba(92,232,154,0.1), transparent); margin: 4px 8px; }

/* ==================== TOASTS ==================== */
.workflow-editor #we-toasts {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    z-index: 9999;
    pointer-events: none;
}

.workflow-editor .toast {
    padding: 12px 18px;
    background: var(--bg-node-solid);
    backdrop-filter: var(--glass);
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    pointer-events: auto;
    animation: toast-in 0.25s ease;
    max-width: 380px;
}
.workflow-editor .toast.error { box-shadow: 0 8px 32px rgba(0,0,0,0.4); color: var(--red); }
.workflow-editor .toast.success { box-shadow: 0 8px 32px rgba(0,0,0,0.4); color: var(--green); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==================== MODAL ==================== */
.workflow-editor .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.workflow-editor .modal {
    background: var(--bg-node-solid);
    border: none;
    border-radius: 16px;
    padding: 24px;
    min-width: 360px;
    max-width: 460px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}

.workflow-editor .modal h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-bright);
}

.workflow-editor .modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* Scrollbar */
.workflow-editor ::-webkit-scrollbar { width: 5px; }
.workflow-editor ::-webkit-scrollbar-track { background: transparent; }
.workflow-editor ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.workflow-editor ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ==================== CHAT PANEL ==================== */
.workflow-editor #we-chat-panel {
    grid-area: props;
    background: var(--bg-panel);
    border-left: none;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.workflow-editor #we-chat-panel.active { display: flex; }

.workflow-editor .chat-header {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-bright);
}
.workflow-editor .chat-header-title {
    display: flex; align-items: center; gap: 8px;
}
.workflow-editor .chat-header-title svg { width: 16px; height: 16px; color: var(--accent); }
.workflow-editor .chat-close-btn {
    background: none; border: none; color: var(--text-dim);
    cursor: pointer; padding: 4px; font-size: 20px; line-height: 1;
    transition: color 0.15s;
}
.workflow-editor .chat-close-btn:hover { color: var(--text-bright); }

.workflow-editor .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.workflow-editor .chat-msg {
    max-width: 92%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
}
.workflow-editor .chat-msg.user {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.workflow-editor .chat-msg.assistant {
    align-self: flex-start;
    background: var(--bg-input);
    border: none;
    color: var(--text);
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.workflow-editor .chat-msg.assistant strong { color: var(--text-bright); }
.workflow-editor .chat-msg.assistant code {
    background: rgba(255,255,255,0.06);
    padding: 1px 5px; border-radius: 4px;
    font-family: var(--mono); font-size: 13px;
}

.workflow-editor .chat-action {
    align-self: center;
    background: rgba(124, 91, 245, 0.08);
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--accent-hover);
    cursor: pointer;
    max-width: 100%;
    transition: background 0.15s;
}
.workflow-editor .chat-action:hover { background: rgba(124, 91, 245, 0.14); }
.workflow-editor .chat-action-header {
    font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.workflow-editor .chat-action-header svg { width: 12px; height: 12px; }
.workflow-editor .chat-action-detail {
    max-height: 0; overflow: hidden; transition: max-height 0.2s ease;
    font-size: 12px; color: var(--text-dim); font-family: var(--mono);
    line-height: 1.5; margin-top: 0;
}
.workflow-editor .chat-action.expanded .chat-action-detail {
    max-height: 200px; margin-top: 6px;
}

.workflow-editor .chat-thinking {
    align-self: flex-start;
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px;
    font-size: 13px; color: var(--text-dim);
}
.workflow-editor .chat-thinking-dots { display: flex; gap: 4px; }
.workflow-editor .chat-thinking-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); opacity: 0.4;
    animation: chat-dot-pulse 1.4s ease-in-out infinite;
}
.workflow-editor .chat-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.workflow-editor .chat-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-dot-pulse {
    0%, 80%, 100% { opacity: 0.4; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

.workflow-editor .chat-input-area {
    padding: 10px 12px;
    border-top: none;
    box-shadow: inset 0 1px 0 rgba(92,232,154,0.06);
    display: flex; gap: 8px; align-items: flex-end;
}
.workflow-editor .chat-input-area textarea {
    flex: 1;
    padding: 8px 10px;
    background: rgba(6,5,3,0.50);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    outline: none;
    resize: none;
    min-height: 36px;
    max-height: 120px;
    line-height: 1.5;
    transition: box-shadow 0.15s;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
    backdrop-filter: blur(12px) saturate(1.3);
}
.workflow-editor .chat-input-area textarea:focus { box-shadow: inset 0 2px 8px rgba(0,0,0,0.3), 0 0 0 2px rgba(92,232,154,0.3); }
.workflow-editor .chat-input-area textarea::placeholder { color: var(--text-dim); }
.workflow-editor .chat-send-btn {
    width: 36px; height: 36px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.workflow-editor .chat-send-btn:hover { background: var(--accent-hover); box-shadow: 0 0 12px var(--accent-glow); }
.workflow-editor .chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.workflow-editor .chat-send-btn svg { width: 16px; height: 16px; }

.workflow-editor .chat-send-btn.stop-mode { background: var(--red); }
.workflow-editor .chat-send-btn.stop-mode:hover { background: #ef4444; box-shadow: 0 0 12px var(--red-glow); }

.workflow-editor .tb-btn.chat-active { background: var(--accent); color: #fff; box-shadow: 0 0 12px var(--accent-glow); }

/* ══════ Brain Node Electric Animations ══════ */

/* Synapse spark pulse — staggered timing */
.brain-spark { opacity: 0; }
.brain-spark.s1 { animation: brainSpark 3s ease-in-out 0.0s infinite; }
.brain-spark.s2 { animation: brainSpark 3s ease-in-out 0.5s infinite; }
.brain-spark.s3 { animation: brainSpark 3s ease-in-out 1.0s infinite; }
.brain-spark.s4 { animation: brainSpark 3s ease-in-out 1.5s infinite; }
.brain-spark.s5 { animation: brainSpark 3s ease-in-out 2.0s infinite; }
.brain-spark.s6 { animation: brainSpark 3s ease-in-out 2.5s infinite; }
.brain-spark.s7 { animation: brainSpark 2s ease-in-out 0.3s infinite; }

@keyframes brainSpark {
    0%, 100% { opacity: 0; r: 0.3; }
    15% { opacity: 0.9; r: 1.0; }
    30% { opacity: 0.2; r: 0.5; }
    45% { opacity: 0.7; r: 0.8; }
    60% { opacity: 0; r: 0.3; }
}

/* Electric arc flash — very subtle */
.brain-arc { opacity: 0; }
.brain-arc.a1 { animation: brainArc 4s ease-in-out 0.0s infinite; }
.brain-arc.a2 { animation: brainArc 4s ease-in-out 1.0s infinite; }
.brain-arc.a3 { animation: brainArc 4s ease-in-out 2.0s infinite; }
.brain-arc.a4 { animation: brainArc 4s ease-in-out 3.0s infinite; }

@keyframes brainArc {
    0%, 100% { opacity: 0; stroke-width: 0.3; }
    10% { opacity: 0.5; stroke-width: 0.8; }
    20% { opacity: 0; stroke-width: 0.3; }
    25% { opacity: 0.3; stroke-width: 0.6; }
    35% { opacity: 0; stroke-width: 0.3; }
}

/* Brain shell gentle glow pulse */
.brain-shell {
    animation: brainGlow 5s ease-in-out infinite;
}
@keyframes brainGlow {
    0%, 100% { filter: drop-shadow(0 0 1px rgba(210,210,230,0.1)); stroke: #c0c0c8; }
    50% { filter: drop-shadow(0 0 3px rgba(210,210,230,0.3)) drop-shadow(0 0 6px rgba(92,232,154,0.15)); stroke: #e4e4ec; }
}

/* Brain node on canvas — enhanced glow when dropped */
.node[data-type="brain"] .node-header-icon {
    position: relative;
    overflow: visible;
}
.node[data-type="brain"] .node-header-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210,210,230,0.08) 0%, transparent 70%);
    animation: brainNodeGlow 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes brainNodeGlow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.15); }
}

/* Palette brain icon enhanced glow */
.palette-item[data-node-type="brain"] .palette-icon {
    position: relative;
    overflow: visible;
}
.palette-item[data-node-type="brain"] .palette-icon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(210,210,230,0.06) 0%, rgba(92,232,154,0.03) 50%, transparent 70%);
    animation: brainPaletteGlow 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes brainPaletteGlow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ══════════════════════════════════════════════════════
   BRAIN NODE — Detailed anatomical brain behind node
   ══════════════════════════════════════════════════════ */

/* Node stays rectangular so ports work — brain is a background overlay */
.workflow-editor .node[data-type="brain"] {
    width: 270px;
    background: rgba(6, 8, 14, 0.35);
    backdrop-filter: blur(32px) saturate(2.0);
    -webkit-backdrop-filter: blur(32px) saturate(2.0);
    border: none;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.45),
        0 0 30px rgba(210,210,230,0.04),
        inset 0 0 30px rgba(210,210,230,0.03);
    overflow: visible;
    position: relative;
    animation: brainFloat 6s ease-in-out infinite;
}

@keyframes brainFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Detailed brain SVG overlay — positioned behind content */
.workflow-editor .node[data-type="brain"]::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 260px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
    animation: brainPulseGlow 5s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='200' y2='180'%3E%3Cstop offset='0%25' stop-color='%23e4e4ec'/%3E%3Cstop offset='50%25' stop-color='%23d0d0d8'/%3E%3Cstop offset='100%25' stop-color='%238aaa8e'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Left hemisphere --%3E%3Cpath d='M98 15 C75 12 55 18 42 30 C28 43 22 60 24 78 C20 82 16 90 18 102 C15 108 14 118 20 128 C24 136 32 142 42 148 C50 155 65 160 82 162 C90 163 96 162 98 160' stroke='url(%23bg)' stroke-width='1.8' fill='rgba(210,210,230,0.06)'/%3E%3C!-- Right hemisphere --%3E%3Cpath d='M102 15 C125 12 145 18 158 30 C172 43 178 60 176 78 C180 82 184 90 182 102 C185 108 186 118 180 128 C176 136 168 142 158 148 C150 155 135 160 118 162 C110 163 104 162 102 160' stroke='url(%23bg)' stroke-width='1.8' fill='rgba(210,210,230,0.06)'/%3E%3C!-- Central fissure --%3E%3Cpath d='M100 14 Q98 50 100 90 Q102 130 100 162' stroke='%23d0d0d8' stroke-width='1' opacity='0.4'/%3E%3C!-- Frontal lobe sulci (left) --%3E%3Cpath d='M42 38 C55 35 70 40 85 48 Q92 52 98 50' stroke='%23e4e4ec' stroke-width='0.8' opacity='0.3'/%3E%3Cpath d='M30 55 C45 50 65 52 80 58 Q90 62 98 60' stroke='%23d0d0d8' stroke-width='0.7' opacity='0.25'/%3E%3C!-- Frontal lobe sulci (right) --%3E%3Cpath d='M158 38 C145 35 130 40 115 48 Q108 52 102 50' stroke='%23e4e4ec' stroke-width='0.8' opacity='0.3'/%3E%3Cpath d='M170 55 C155 50 135 52 120 58 Q110 62 102 60' stroke='%23d0d0d8' stroke-width='0.7' opacity='0.25'/%3E%3C!-- Lateral sulcus (Sylvian fissure) --%3E%3Cpath d='M28 78 C40 72 55 68 70 74 Q85 80 98 78' stroke='%23d0d0d8' stroke-width='1' opacity='0.35'/%3E%3Cpath d='M172 78 C160 72 145 68 130 74 Q115 80 102 78' stroke='%23d0d0d8' stroke-width='1' opacity='0.35'/%3E%3C!-- Parietal sulci --%3E%3Cpath d='M32 98 C50 92 68 95 85 100 Q92 103 98 100' stroke='%23e4e4ec' stroke-width='0.6' opacity='0.2'/%3E%3Cpath d='M168 98 C150 92 132 95 115 100 Q108 103 102 100' stroke='%23e4e4ec' stroke-width='0.6' opacity='0.2'/%3E%3C!-- Temporal lobe detail --%3E%3Cpath d='M24 108 C35 105 50 108 70 114 Q85 118 98 115' stroke='%23d0d0d8' stroke-width='0.7' opacity='0.22'/%3E%3Cpath d='M176 108 C165 105 150 108 130 114 Q115 118 102 115' stroke='%23d0d0d8' stroke-width='0.7' opacity='0.22'/%3E%3C!-- Occipital region --%3E%3Cpath d='M38 132 C55 128 72 130 88 135 Q95 137 98 135' stroke='%23e4e4ec' stroke-width='0.6' opacity='0.18'/%3E%3Cpath d='M162 132 C145 128 128 130 112 135 Q105 137 102 135' stroke='%23e4e4ec' stroke-width='0.6' opacity='0.18'/%3E%3C!-- Cerebellum --%3E%3Cellipse cx='100' cy='158' rx='30' ry='14' stroke='%23d0d0d8' stroke-width='1.2' fill='rgba(210,210,230,0.04)' opacity='0.35'/%3E%3Cpath d='M78 158 Q88 152 100 158 Q112 152 122 158' stroke='%23d0d0d8' stroke-width='0.6' opacity='0.25'/%3E%3Cpath d='M82 162 Q90 156 100 162 Q110 156 118 162' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.2'/%3E%3C!-- Brain stem --%3E%3Cpath d='M95 168 Q98 178 100 185 Q102 178 105 168' stroke='%23d0d0d8' stroke-width='1.2' opacity='0.3' fill='rgba(210,210,230,0.03)'/%3E%3C!-- Synapse nodes --%3E%3Ccircle cx='60' cy='45' r='2' fill='%238aaa8e' opacity='0.5'/%3E%3Ccircle cx='140' cy='45' r='2' fill='%238aaa8e' opacity='0.5'/%3E%3Ccircle cx='45' cy='85' r='1.5' fill='%23d0d0d8' opacity='0.4'/%3E%3Ccircle cx='155' cy='85' r='1.5' fill='%23d0d0d8' opacity='0.4'/%3E%3Ccircle cx='70' cy='110' r='1.5' fill='%238aaa8e' opacity='0.35'/%3E%3Ccircle cx='130' cy='110' r='1.5' fill='%238aaa8e' opacity='0.35'/%3E%3Ccircle cx='100' cy='70' r='2' fill='%23e4e4ec' opacity='0.5'/%3E%3C!-- Neural pathways --%3E%3Cpath d='M60 45 Q75 55 100 70' stroke='%238aaa8e' stroke-width='0.4' opacity='0.2' stroke-dasharray='3 2'/%3E%3Cpath d='M140 45 Q125 55 100 70' stroke='%238aaa8e' stroke-width='0.4' opacity='0.2' stroke-dasharray='3 2'/%3E%3Cpath d='M45 85 Q65 80 100 70' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.15' stroke-dasharray='2 3'/%3E%3Cpath d='M155 85 Q135 80 100 70' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.15' stroke-dasharray='2 3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@keyframes brainPulseGlow {
    0%, 100% { opacity: 0.15; filter: drop-shadow(0 0 4px rgba(210,210,230,0.1)); }
    50% { opacity: 0.28; filter: drop-shadow(0 0 12px rgba(210,210,230,0.2)) drop-shadow(0 0 24px rgba(92,232,154,0.08)); }
}

/* Electric spark overlay (::after) — flashing synapse dots */
.workflow-editor .node[data-type="brain"]::after {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 260px;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3C!-- Electric arcs --%3E%3Cpath d='M60 45 L72 52 L68 58 L80 65 L100 70' stroke='%238aaa8e' stroke-width='0.8' fill='none' opacity='0.6' stroke-linecap='round'/%3E%3Cpath d='M140 45 L128 52 L132 58 L120 65 L100 70' stroke='%238aaa8e' stroke-width='0.8' fill='none' opacity='0.6' stroke-linecap='round'/%3E%3Cpath d='M45 85 L58 80 L65 78 L80 73 L100 70' stroke='%23d0d0d8' stroke-width='0.6' fill='none' opacity='0.4' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='45' r='3' fill='%238aaa8e' opacity='0.8'/%3E%3Ccircle cx='140' cy='45' r='3' fill='%238aaa8e' opacity='0.8'/%3E%3Ccircle cx='100' cy='70' r='4' fill='%23e4e4ec' opacity='0.9'/%3E%3Ccircle cx='45' cy='85' r='2.5' fill='%23d0d0d8' opacity='0.6'/%3E%3Ccircle cx='155' cy='85' r='2.5' fill='%23d0d0d8' opacity='0.6'/%3E%3Ccircle cx='70' cy='110' r='2' fill='%238aaa8e' opacity='0.5'/%3E%3Ccircle cx='130' cy='110' r='2' fill='%238aaa8e' opacity='0.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: brainElectricFlash 3s ease-in-out infinite;
}

@keyframes brainElectricFlash {
    0%, 100% { opacity: 0; }
    15% { opacity: 0.5; }
    25% { opacity: 0; }
    40% { opacity: 0.3; }
    50% { opacity: 0; }
    65% { opacity: 0.4; }
    75% { opacity: 0.05; }
}

/* Brain hover — brighter brain + faster sparks */
.workflow-editor .node[data-type="brain"]:hover {
    box-shadow:
        0 14px 56px rgba(0,0,0,0.55),
        0 0 50px rgba(210,210,230,0.08),
        0 0 100px rgba(92,232,154,0.04),
        inset 0 0 40px rgba(210,210,230,0.05);
}
.workflow-editor .node[data-type="brain"]:hover::before {
    opacity: 0.85;
    animation-duration: 3s;
}
.workflow-editor .node[data-type="brain"]:hover::after {
    animation-duration: 1.5s;
}

/* Brain selected state */
.workflow-editor .node[data-type="brain"].selected {
    box-shadow:
        0 0 0 1.5px rgba(210,210,230,0.18),
        0 14px 56px rgba(0,0,0,0.55),
        0 0 60px rgba(210,210,230,0.10),
        inset 0 0 40px rgba(210,210,230,0.05);
}

/* Brain node header — transparent so brain shows through */
.workflow-editor .node[data-type="brain"] .node-header {
    background: transparent !important;
    border-bottom: none;
    padding-bottom: 8px;
    position: relative;
    z-index: 1;
}
.workflow-editor .node[data-type="brain"] .node-header-title {
    color: #ffffff;
    text-shadow: 0 0 14px rgba(210,210,230,0.4);
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Brain node header icon — glowing */
.workflow-editor .node[data-type="brain"] .node-header-icon {
    background: rgba(210,210,230,0.10) !important;
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(210,210,230,0.12), 0 0 28px rgba(92,232,154,0.06);
    overflow: visible;
}

/* Brain node content on top of brain overlay */
.workflow-editor .node[data-type="brain"] .node-body {
    position: relative;
    z-index: 1;
}
.workflow-editor .node[data-type="brain"] .port-dot {
    border-width: 2px;
}
.workflow-editor .node[data-type="brain"] .port-label {
    color: rgba(255,255,255,0.75);
}

/* Brain node run button */
.workflow-editor .node[data-type="brain"] .node-actions .run-btn {
    background: rgba(210,210,230,0.12);
    color: #ffffff;
    border: none;
}
.workflow-editor .node[data-type="brain"] .node-actions .run-btn:hover {
    background: rgba(210,210,230,0.22);
    box-shadow: 0 0 14px rgba(210,210,230,0.18);
}

/* ═══════════════════════════════════════════════════════
   THEMED NODE OVERLAYS — Unique SVG art per node type
   Colors: silver (#7C98A9, #e4e4ec), Freepik blue (#5ce89a, #c8f5dc), pink (#E83D7E), teal (#1EA4B8)
   ═══════════════════════════════════════════════════════ */

/* ── Shared base for all themed nodes ── */
.workflow-editor .node[data-type="text"],
.workflow-editor .node[data-type="upload"],
.workflow-editor .node[data-type="imageGen"],
.workflow-editor .node[data-type="videoGen"],
.workflow-editor .node[data-type="lipsync"],
.workflow-editor .node[data-type="upscaler"],
.workflow-editor .node[data-type="audioTrim"],
.workflow-editor .node[data-type="assistant"] {
    width: 270px;
    overflow: visible;
    position: relative;
}

/* Node pseudo-element decorations removed for clean look */
.workflow-editor .node[data-type="text"]::before,
.workflow-editor .node[data-type="upload"]::before,
.workflow-editor .node[data-type="imageGen"]::before,
.workflow-editor .node[data-type="videoGen"]::before,
.workflow-editor .node[data-type="lipsync"]::before,
.workflow-editor .node[data-type="upscaler"]::before,
.workflow-editor .node[data-type="audioTrim"]::before,
.workflow-editor .node[data-type="assistant"]::before,
.workflow-editor .node[data-type="text"]::after,
.workflow-editor .node[data-type="upload"]::after,
.workflow-editor .node[data-type="imageGen"]::after,
.workflow-editor .node[data-type="videoGen"]::after,
.workflow-editor .node[data-type="lipsync"]::after,
.workflow-editor .node[data-type="upscaler"]::after,
.workflow-editor .node[data-type="audioTrim"]::after,
.workflow-editor .node[data-type="assistant"]::after {
    display: none;
}

/* All node headers — transparent with bottom border (left-border accent carries type color) */
.workflow-editor .node .node-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    position: relative;
    z-index: 1;
}

.workflow-editor .node[data-type="text"] .node-header-title,
.workflow-editor .node[data-type="upload"] .node-header-title,
.workflow-editor .node[data-type="imageGen"] .node-header-title,
.workflow-editor .node[data-type="videoGen"] .node-header-title,
.workflow-editor .node[data-type="lipsync"] .node-header-title,
.workflow-editor .node[data-type="upscaler"] .node-header-title,
.workflow-editor .node[data-type="audioTrim"] .node-header-title,
.workflow-editor .node[data-type="assistant"] .node-header-title {
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.workflow-editor .node[data-type="text"] .node-header-icon,
.workflow-editor .node[data-type="upload"] .node-header-icon,
.workflow-editor .node[data-type="imageGen"] .node-header-icon,
.workflow-editor .node[data-type="videoGen"] .node-header-icon,
.workflow-editor .node[data-type="lipsync"] .node-header-icon,
.workflow-editor .node[data-type="upscaler"] .node-header-icon,
.workflow-editor .node[data-type="audioTrim"] .node-header-icon,
.workflow-editor .node[data-type="assistant"] .node-header-icon {
    background: rgba(210,210,230,0.10) !important;
    border-radius: 50%;
}

.workflow-editor .node[data-type="text"] .node-body,
.workflow-editor .node[data-type="upload"] .node-body,
.workflow-editor .node[data-type="imageGen"] .node-body,
.workflow-editor .node[data-type="videoGen"] .node-body,
.workflow-editor .node[data-type="lipsync"] .node-body,
.workflow-editor .node[data-type="upscaler"] .node-body,
.workflow-editor .node[data-type="audioTrim"] .node-body,
.workflow-editor .node[data-type="assistant"] .node-body {
    position: relative;
    z-index: 1;
}

.workflow-editor .node[data-type="text"] .port-dot,
.workflow-editor .node[data-type="upload"] .port-dot,
.workflow-editor .node[data-type="imageGen"] .port-dot,
.workflow-editor .node[data-type="videoGen"] .port-dot,
.workflow-editor .node[data-type="lipsync"] .port-dot,
.workflow-editor .node[data-type="upscaler"] .port-dot,
.workflow-editor .node[data-type="audioTrim"] .port-dot,
.workflow-editor .node[data-type="assistant"] .port-dot {
    border-width: 2px;
}

.workflow-editor .node[data-type="text"] .port-label,
.workflow-editor .node[data-type="upload"] .port-label,
.workflow-editor .node[data-type="imageGen"] .port-label,
.workflow-editor .node[data-type="videoGen"] .port-label,
.workflow-editor .node[data-type="lipsync"] .port-label,
.workflow-editor .node[data-type="upscaler"] .port-label,
.workflow-editor .node[data-type="audioTrim"] .port-label,
.workflow-editor .node[data-type="assistant"] .port-label {
    color: rgba(255,255,255,0.75);
}

.workflow-editor .node[data-type="text"] .node-actions .run-btn,
.workflow-editor .node[data-type="upload"] .node-actions .run-btn,
.workflow-editor .node[data-type="imageGen"] .node-actions .run-btn,
.workflow-editor .node[data-type="videoGen"] .node-actions .run-btn,
.workflow-editor .node[data-type="lipsync"] .node-actions .run-btn,
.workflow-editor .node[data-type="upscaler"] .node-actions .run-btn,
.workflow-editor .node[data-type="audioTrim"] .node-actions .run-btn,
.workflow-editor .node[data-type="assistant"] .node-actions .run-btn {
    background: rgba(210,210,230,0.12);
    color: #ffffff;
    border: none;
}
.workflow-editor .node[data-type="text"] .node-actions .run-btn:hover,
.workflow-editor .node[data-type="upload"] .node-actions .run-btn:hover,
.workflow-editor .node[data-type="imageGen"] .node-actions .run-btn:hover,
.workflow-editor .node[data-type="videoGen"] .node-actions .run-btn:hover,
.workflow-editor .node[data-type="lipsync"] .node-actions .run-btn:hover,
.workflow-editor .node[data-type="upscaler"] .node-actions .run-btn:hover,
.workflow-editor .node[data-type="audioTrim"] .node-actions .run-btn:hover,
.workflow-editor .node[data-type="assistant"] .node-actions .run-btn:hover {
    background: rgba(210,210,230,0.22);
}

/* Shared hover */
.workflow-editor .node[data-type="text"]:hover,
.workflow-editor .node[data-type="upload"]:hover,
.workflow-editor .node[data-type="imageGen"]:hover,
.workflow-editor .node[data-type="videoGen"]:hover,
.workflow-editor .node[data-type="lipsync"]:hover,
.workflow-editor .node[data-type="upscaler"]:hover,
.workflow-editor .node[data-type="audioTrim"]:hover,
.workflow-editor .node[data-type="assistant"]:hover {
    border-color: rgba(210, 210, 230, 0.22);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.workflow-editor .node[data-type="text"]:hover::before,
.workflow-editor .node[data-type="upload"]:hover::before,
.workflow-editor .node[data-type="imageGen"]:hover::before,
.workflow-editor .node[data-type="videoGen"]:hover::before,
.workflow-editor .node[data-type="lipsync"]:hover::before,
.workflow-editor .node[data-type="upscaler"]:hover::before,
.workflow-editor .node[data-type="audioTrim"]:hover::before,
.workflow-editor .node[data-type="assistant"]:hover::before {
    opacity: 0.85;
    animation-duration: 3s;
}
.workflow-editor .node[data-type="text"]:hover::after,
.workflow-editor .node[data-type="upload"]:hover::after,
.workflow-editor .node[data-type="imageGen"]:hover::after,
.workflow-editor .node[data-type="videoGen"]:hover::after,
.workflow-editor .node[data-type="lipsync"]:hover::after,
.workflow-editor .node[data-type="upscaler"]:hover::after,
.workflow-editor .node[data-type="audioTrim"]:hover::after,
.workflow-editor .node[data-type="assistant"]:hover::after {
    animation-duration: 1.5s;
}

/* Shared selected */
.workflow-editor .node[data-type="text"].selected,
.workflow-editor .node[data-type="upload"].selected,
.workflow-editor .node[data-type="imageGen"].selected,
.workflow-editor .node[data-type="videoGen"].selected,
.workflow-editor .node[data-type="lipsync"].selected,
.workflow-editor .node[data-type="upscaler"].selected,
.workflow-editor .node[data-type="audioTrim"].selected,
.workflow-editor .node[data-type="assistant"].selected {
    border-color: rgba(92,232,154,0.6);
    box-shadow: 0 0 0 1px rgba(92,232,154,0.4), 0 6px 24px rgba(0,0,0,0.35);
}

/* Float animations removed for clean, stable layout */

/* ── Shared pulse/flash keyframes ── */
@keyframes nodePulseGlow {
    0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 6px rgba(210,210,230,0.2)); }
    50% { opacity: 0.8; filter: drop-shadow(0 0 18px rgba(210,210,230,0.35)); }
}
@keyframes nodeEffectFlash {
    0%, 100% { opacity: 0; }
    15% { opacity: 0.7; }
    25% { opacity: 0.05; }
    40% { opacity: 0.55; }
    55% { opacity: 0; }
    70% { opacity: 0.6; }
    80% { opacity: 0.05; }
}

/* Per-node colored glow animations */
@keyframes lipsyncPulse {
    0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 8px rgba(6,182,212,0.3)) brightness(1.1); }
    50% { opacity: 0.8; filter: drop-shadow(0 0 22px rgba(6,182,212,0.5)) brightness(1.3); }
}
@keyframes upscalerPulse {
    0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 8px rgba(139,92,246,0.3)) brightness(1.1); }
    50% { opacity: 0.8; filter: drop-shadow(0 0 22px rgba(139,92,246,0.5)) brightness(1.3); }
}
@keyframes audioPulse {
    0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 8px rgba(245,158,11,0.3)) brightness(1.1); }
    50% { opacity: 0.8; filter: drop-shadow(0 0 22px rgba(245,158,11,0.5)) brightness(1.3); }
}
@keyframes lipsyncFlash {
    0%, 100% { opacity: 0; filter: drop-shadow(0 0 4px rgba(6,182,212,0.4)); }
    15% { opacity: 0.7; } 25% { opacity: 0.05; }
    40% { opacity: 0.55; } 55% { opacity: 0; }
    70% { opacity: 0.6; } 80% { opacity: 0.05; }
}
@keyframes upscalerFlash {
    0%, 100% { opacity: 0; filter: drop-shadow(0 0 4px rgba(139,92,246,0.4)); }
    15% { opacity: 0.7; } 25% { opacity: 0.05; }
    40% { opacity: 0.55; } 55% { opacity: 0; }
    70% { opacity: 0.6; } 80% { opacity: 0.05; }
}
@keyframes audioFlash {
    0%, 100% { opacity: 0; filter: drop-shadow(0 0 4px rgba(245,158,11,0.4)); }
    15% { opacity: 0.7; } 25% { opacity: 0.05; }
    40% { opacity: 0.55; } 55% { opacity: 0; }
    70% { opacity: 0.6; } 80% { opacity: 0.05; }
}

/* ══════════════════════════════════════
   TEXT NODE — Scroll with quill pen
   ══════════════════════════════════════ */
.workflow-editor .node[data-type="text"]::before {
    opacity: 0.55;
    animation: nodePulseGlow 6s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='tg' x1='0' y1='0' x2='200' y2='180'%3E%3Cstop offset='0%25' stop-color='%23e4e4ec'/%3E%3Cstop offset='50%25' stop-color='%23d0d0d8'/%3E%3Cstop offset='100%25' stop-color='%238aaa8e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='30' cy='28' r='1.5' fill='%23d0d0d8' opacity='0.4'/%3E%3Ccircle cx='42' cy='26' r='1' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='55' cy='29' r='1.8' fill='%23d0d0d8' opacity='0.45'/%3E%3Ccircle cx='68' cy='27' r='1' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='85' cy='28' r='1.5' fill='%23e4e4ec' opacity='0.4'/%3E%3Ccircle cx='100' cy='26' r='1.2' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='118' cy='29' r='1.8' fill='%238aaa8e' opacity='0.4'/%3E%3Ccircle cx='132' cy='27' r='1' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='148' cy='28' r='1.5' fill='%23e4e4ec' opacity='0.4'/%3E%3Ccircle cx='165' cy='26' r='1' fill='%23d0d0d8' opacity='0.3'/%3E%3Cpath d='M30 28 L42 26 L55 29 L68 27 L85 28' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.15'/%3E%3Cpath d='M100 26 L118 29 L132 27 L148 28 L165 26' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.15'/%3E%3Ccircle cx='25' cy='48' r='1.2' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='38' cy='46' r='1.8' fill='%23d0d0d8' opacity='0.45'/%3E%3Ccircle cx='52' cy='49' r='1' fill='%238aaa8e' opacity='0.35'/%3E%3Ccircle cx='65' cy='47' r='1.5' fill='%23d0d0d8' opacity='0.4'/%3E%3Ccircle cx='80' cy='48' r='1.2' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='95' cy='46' r='2' fill='%23d0d0d8' opacity='0.5'/%3E%3Ccircle cx='112' cy='49' r='1' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='128' cy='47' r='1.8' fill='%23e4e4ec' opacity='0.45'/%3E%3Ccircle cx='145' cy='48' r='1.2' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='160' cy='46' r='1.5' fill='%238aaa8e' opacity='0.4'/%3E%3Ccircle cx='172' cy='49' r='1' fill='%23d0d0d8' opacity='0.3'/%3E%3Cpath d='M25 48 L38 46 L52 49 L65 47 L80 48 L95 46' stroke='%23e4e4ec' stroke-width='0.3' opacity='0.12'/%3E%3Cpath d='M112 49 L128 47 L145 48 L160 46 L172 49' stroke='%23e4e4ec' stroke-width='0.3' opacity='0.12'/%3E%3Ccircle cx='32' cy='68' r='1.5' fill='%23d0d0d8' opacity='0.4'/%3E%3Ccircle cx='48' cy='66' r='1' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='62' cy='69' r='2' fill='%238aaa8e' opacity='0.5'/%3E%3Ccircle cx='78' cy='67' r='1.2' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='92' cy='68' r='1.5' fill='%23e4e4ec' opacity='0.4'/%3E%3Ccircle cx='108' cy='66' r='1' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='125' cy='69' r='1.8' fill='%238aaa8e' opacity='0.45'/%3E%3Ccircle cx='140' cy='67' r='1.2' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='155' cy='68' r='1.5' fill='%23d0d0d8' opacity='0.4'/%3E%3Cpath d='M32 68 L48 66 L62 69 L78 67 L92 68 L108 66 L125 69 L140 67 L155 68' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.12'/%3E%3Ccircle cx='28' cy='88' r='1' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='45' cy='86' r='1.8' fill='%23d0d0d8' opacity='0.45'/%3E%3Ccircle cx='60' cy='89' r='1.5' fill='%238aaa8e' opacity='0.4'/%3E%3Ccircle cx='75' cy='87' r='1' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='90' cy='88' r='2' fill='%23e4e4ec' opacity='0.5'/%3E%3Ccircle cx='108' cy='86' r='1.2' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='122' cy='89' r='1.5' fill='%238aaa8e' opacity='0.4'/%3E%3Ccircle cx='138' cy='87' r='1' fill='%23e4e4ec' opacity='0.3'/%3E%3Cpath d='M28 88 L45 86 L60 89 L75 87 L90 88' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.12'/%3E%3Cpath d='M108 86 L122 89 L138 87' stroke='%238aaa8e' stroke-width='0.3' opacity='0.1'/%3E%3Ccircle cx='35' cy='108' r='1.2' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='50' cy='106' r='1.5' fill='%23e4e4ec' opacity='0.4'/%3E%3Ccircle cx='68' cy='109' r='1' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='82' cy='107' r='1.8' fill='%23d0d0d8' opacity='0.45'/%3E%3Ccircle cx='98' cy='108' r='1.2' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='115' cy='106' r='1.5' fill='%23d0d0d8' opacity='0.4'/%3E%3Ccircle cx='130' cy='109' r='2' fill='%238aaa8e' opacity='0.5'/%3E%3Cpath d='M35 108 L50 106 L68 109 L82 107 L98 108 L115 106 L130 109' stroke='%23e4e4ec' stroke-width='0.3' opacity='0.12'/%3E%3Ccircle cx='40' cy='128' r='1.5' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='55' cy='126' r='1' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='72' cy='129' r='1.8' fill='%238aaa8e' opacity='0.4'/%3E%3Ccircle cx='88' cy='127' r='1.2' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='105' cy='128' r='1.5' fill='%23e4e4ec' opacity='0.4'/%3E%3Cpath d='M40 128 L55 126 L72 129 L88 127 L105 128' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.1'/%3E%3Ccircle cx='45' cy='148' r='1' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='60' cy='146' r='1.5' fill='%238aaa8e' opacity='0.35'/%3E%3Ccircle cx='78' cy='149' r='1.2' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='92' cy='147' r='1' fill='%23d0d0d8' opacity='0.3'/%3E%3Cpath d='M45 148 L60 146 L78 149 L92 147' stroke='%238aaa8e' stroke-width='0.3' opacity='0.1'/%3E%3Cpath d='M55 29 Q58 38 52 49' stroke='%23d0d0d8' stroke-width='0.2' opacity='0.1' stroke-dasharray='2 3'/%3E%3Cpath d='M95 46 Q90 57 92 68' stroke='%23e4e4ec' stroke-width='0.2' opacity='0.1' stroke-dasharray='2 3'/%3E%3Cpath d='M62 69 Q58 78 60 89' stroke='%238aaa8e' stroke-width='0.2' opacity='0.08' stroke-dasharray='2 3'/%3E%3Cpath d='M90 88 Q94 98 98 108' stroke='%23d0d0d8' stroke-width='0.2' opacity='0.08' stroke-dasharray='2 3'/%3E%3Cpath d='M82 107 Q78 118 72 129' stroke='%23e4e4ec' stroke-width='0.2' opacity='0.08' stroke-dasharray='2 3'/%3E%3Ccircle cx='30' cy='28' r='2.5' fill='none' stroke='%238aaa8e' stroke-width='0.5' opacity='0.25'/%3E%3Ccircle cx='25' cy='48' r='2.5' fill='none' stroke='%238aaa8e' stroke-width='0.5' opacity='0.25'/%3E%3Ccircle cx='32' cy='68' r='2.5' fill='none' stroke='%238aaa8e' stroke-width='0.5' opacity='0.25'/%3E%3Ccircle cx='28' cy='88' r='2.5' fill='none' stroke='%238aaa8e' stroke-width='0.5' opacity='0.25'/%3E%3C/svg%3E");
}
.workflow-editor .node[data-type="text"]::after {
    animation: nodeEffectFlash 4s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Ccircle cx='55' cy='29' r='3' fill='%238aaa8e' opacity='0.6'/%3E%3Ccircle cx='95' cy='46' r='2.5' fill='%23e4e4ec' opacity='0.7'/%3E%3Ccircle cx='62' cy='69' r='3' fill='%23d0d0d8' opacity='0.6'/%3E%3Ccircle cx='90' cy='88' r='2.5' fill='%238aaa8e' opacity='0.5'/%3E%3Ccircle cx='130' cy='109' r='2' fill='%23e4e4ec' opacity='0.55'/%3E%3Ccircle cx='72' cy='129' r='2.5' fill='%23d0d0d8' opacity='0.5'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════
   UPLOAD NODE — Cloud portal with beam
   ══════════════════════════════════════ */
.workflow-editor .node[data-type="upload"]::before {
    opacity: 0.55;
    animation: nodePulseGlow 5.5s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180' fill='none'%3E%3Cellipse cx='100' cy='160' rx='50' ry='12' stroke='%23d0d0d8' stroke-width='0.8' opacity='0.25'/%3E%3Cellipse cx='100' cy='160' rx='40' ry='9' stroke='%23e4e4ec' stroke-width='0.6' opacity='0.2'/%3E%3Cellipse cx='100' cy='160' rx='30' ry='6' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.18'/%3E%3Cellipse cx='100' cy='160' rx='20' ry='4' stroke='%238aaa8e' stroke-width='0.4' opacity='0.15'/%3E%3Cellipse cx='100' cy='160' rx='10' ry='2' stroke='%23e4e4ec' stroke-width='0.3' opacity='0.12'/%3E%3Cpath d='M97 155 Q96 120 98 85 Q99 50 100 20' stroke='%23d0d0d8' stroke-width='0.8' opacity='0.2'/%3E%3Cpath d='M103 155 Q104 120 102 85 Q101 50 100 20' stroke='%23d0d0d8' stroke-width='0.8' opacity='0.2'/%3E%3Cpath d='M94 155 Q92 130 95 100 Q97 70 100 20' stroke='%23e4e4ec' stroke-width='0.4' opacity='0.1'/%3E%3Cpath d='M106 155 Q108 130 105 100 Q103 70 100 20' stroke='%23e4e4ec' stroke-width='0.4' opacity='0.1'/%3E%3Ccircle cx='100' cy='150' r='2' fill='%23d0d0d8' opacity='0.4'/%3E%3Ccircle cx='99' cy='138' r='1.8' fill='%23e4e4ec' opacity='0.38'/%3E%3Ccircle cx='101' cy='125' r='1.5' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='100' cy='112' r='1.8' fill='%238aaa8e' opacity='0.4'/%3E%3Ccircle cx='99' cy='98' r='1.5' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='101' cy='85' r='2' fill='%23d0d0d8' opacity='0.42'/%3E%3Ccircle cx='100' cy='70' r='1.5' fill='%238aaa8e' opacity='0.35'/%3E%3Ccircle cx='99' cy='55' r='1.8' fill='%23e4e4ec' opacity='0.38'/%3E%3Ccircle cx='100' cy='40' r='1.5' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='100' cy='25' r='2' fill='%23e4e4ec' opacity='0.45'/%3E%3Ccircle cx='92' cy='145' r='1.2' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='90' cy='130' r='1' fill='%238aaa8e' opacity='0.28'/%3E%3Ccircle cx='88' cy='115' r='1.5' fill='%23e4e4ec' opacity='0.32'/%3E%3Ccircle cx='86' cy='100' r='1' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='85' cy='82' r='1.2' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='87' cy='65' r='1' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='90' cy='48' r='1.2' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='93' cy='32' r='1' fill='%238aaa8e' opacity='0.22'/%3E%3Ccircle cx='108' cy='148' r='1' fill='%23e4e4ec' opacity='0.28'/%3E%3Ccircle cx='110' cy='132' r='1.5' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='112' cy='118' r='1' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='114' cy='102' r='1.2' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='113' cy='85' r='1' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='111' cy='68' r='1.5' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='108' cy='50' r='1' fill='%23e4e4ec' opacity='0.22'/%3E%3Ccircle cx='106' cy='35' r='1.2' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='75' cy='135' r='0.8' fill='%23d0d0d8' opacity='0.18'/%3E%3Ccircle cx='125' cy='140' r='0.8' fill='%23d0d0d8' opacity='0.18'/%3E%3Ccircle cx='70' cy='105' r='0.6' fill='%238aaa8e' opacity='0.15'/%3E%3Ccircle cx='130' cy='95' r='0.6' fill='%238aaa8e' opacity='0.15'/%3E%3Ccircle cx='78' cy='60' r='0.8' fill='%23e4e4ec' opacity='0.18'/%3E%3Ccircle cx='122' cy='55' r='0.8' fill='%23e4e4ec' opacity='0.18'/%3E%3Cpath d='M92 130 L100 124 L108 130' fill='none' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M94 105 L100 99 L106 105' fill='none' stroke='%23e4e4ec' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M95 78 L100 72 L105 78' fill='none' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.12'/%3E%3Cpath d='M96 52 L100 46 L104 52' fill='none' stroke='%238aaa8e' stroke-width='0.5' opacity='0.12'/%3E%3Ccircle cx='100' cy='18' r='5' fill='none' stroke='%23e4e4ec' stroke-width='0.5' opacity='0.2'/%3E%3Ccircle cx='100' cy='18' r='8' fill='none' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.12'/%3E%3Ccircle cx='100' cy='18' r='12' fill='none' stroke='%238aaa8e' stroke-width='0.2' opacity='0.08'/%3E%3C/svg%3E");
}
.workflow-editor .node[data-type="upload"]::after {
    animation: nodeEffectFlash 3.5s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Ccircle cx='100' cy='25' r='3' fill='%23e4e4ec' opacity='0.8'/%3E%3Ccircle cx='99' cy='55' r='2.5' fill='%23d0d0d8' opacity='0.6'/%3E%3Ccircle cx='101' cy='85' r='3' fill='%238aaa8e' opacity='0.7'/%3E%3Ccircle cx='100' cy='112' r='2' fill='%23e4e4ec' opacity='0.5'/%3E%3Ccircle cx='99' cy='138' r='2.5' fill='%23d0d0d8' opacity='0.55'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════
   IMAGEGEN NODE — Canvas with magic wand
   ══════════════════════════════════════ */
.workflow-editor .node[data-type="imageGen"]::before {
    opacity: 0.55;
    animation: nodePulseGlow 7s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180' fill='none'%3E%3Ccircle cx='100' cy='90' r='4' fill='rgba(210,210,230,0.08)' stroke='%23e4e4ec' stroke-width='1' opacity='0.4'/%3E%3Ccircle cx='100' cy='90' r='8' fill='none' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.2'/%3E%3Ccircle cx='100' cy='90' r='14' fill='none' stroke='%238aaa8e' stroke-width='0.3' opacity='0.12'/%3E%3Cpath d='M100 90 Q95 70 85 50 Q78 38 65 25' stroke='%23d0d0d8' stroke-width='0.8' opacity='0.25'/%3E%3Cpath d='M100 90 Q115 72 130 55 Q140 42 155 30' stroke='%23d0d0d8' stroke-width='0.8' opacity='0.25'/%3E%3Cpath d='M100 90 Q75 88 55 82 Q40 78 22 70' stroke='%23e4e4ec' stroke-width='0.7' opacity='0.22'/%3E%3Cpath d='M100 90 Q125 92 150 98 Q165 102 180 110' stroke='%23e4e4ec' stroke-width='0.7' opacity='0.22'/%3E%3Cpath d='M100 90 Q95 110 85 130 Q78 142 65 155' stroke='%23d0d0d8' stroke-width='0.8' opacity='0.25'/%3E%3Cpath d='M100 90 Q110 112 125 135 Q135 148 148 160' stroke='%23d0d0d8' stroke-width='0.8' opacity='0.25'/%3E%3Cpath d='M85 50 Q70 48 55 52' stroke='%238aaa8e' stroke-width='0.5' opacity='0.18'/%3E%3Cpath d='M85 50 Q88 38 95 28' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.18'/%3E%3Cpath d='M130 55 Q140 60 152 58' stroke='%238aaa8e' stroke-width='0.5' opacity='0.18'/%3E%3Cpath d='M130 55 Q125 42 118 30' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.18'/%3E%3Cpath d='M55 82 Q48 92 38 100' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M55 82 Q50 72 42 62' stroke='%238aaa8e' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M150 98 Q158 88 168 82' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M150 98 Q155 110 162 120' stroke='%238aaa8e' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M85 130 Q72 128 60 132' stroke='%23e4e4ec' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M85 130 Q88 142 82 155' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M125 135 Q138 132 150 138' stroke='%23e4e4ec' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M125 135 Q120 148 115 162' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M55 52 Q45 58 38 55' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.1'/%3E%3Cpath d='M152 58 Q160 52 170 55' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.1'/%3E%3Cpath d='M38 100 Q30 105 22 102' stroke='%23e4e4ec' stroke-width='0.3' opacity='0.1'/%3E%3Cpath d='M168 82 Q175 78 182 80' stroke='%23e4e4ec' stroke-width='0.3' opacity='0.1'/%3E%3Ccircle cx='85' cy='50' r='2' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='130' cy='55' r='2' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='55' cy='82' r='1.8' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='150' cy='98' r='1.8' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='85' cy='130' r='2' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='125' cy='135' r='2' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='65' cy='25' r='1.5' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='155' cy='30' r='1.5' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='22' cy='70' r='1.2' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='180' cy='110' r='1.2' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='65' cy='155' r='1.5' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='148' cy='160' r='1.5' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='55' cy='52' r='1.2' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='95' cy='28' r='1.2' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='152' cy='58' r='1.2' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='118' cy='30' r='1.2' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='38' cy='100' r='1' fill='%238aaa8e' opacity='0.2'/%3E%3Ccircle cx='42' cy='62' r='1' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='168' cy='82' r='1' fill='%238aaa8e' opacity='0.2'/%3E%3Ccircle cx='162' cy='120' r='1' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='60' cy='132' r='1' fill='%23e4e4ec' opacity='0.2'/%3E%3Ccircle cx='82' cy='155' r='1' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='150' cy='138' r='1' fill='%23e4e4ec' opacity='0.2'/%3E%3Ccircle cx='115' cy='162' r='1' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='100' cy='90' r='2' fill='%23e4e4ec' opacity='0.5'/%3E%3Ccircle cx='75' cy='65' r='1.5' fill='none' stroke='%238aaa8e' stroke-width='0.4' opacity='0.2'/%3E%3Ccircle cx='135' cy='75' r='1.5' fill='none' stroke='%238aaa8e' stroke-width='0.4' opacity='0.2'/%3E%3Ccircle cx='70' cy='110' r='1.5' fill='none' stroke='%23d0d0d8' stroke-width='0.4' opacity='0.2'/%3E%3Ccircle cx='140' cy='115' r='1.5' fill='none' stroke='%23d0d0d8' stroke-width='0.4' opacity='0.2'/%3E%3C/svg%3E");
}
.workflow-editor .node[data-type="imageGen"]::after {
    animation: nodeEffectFlash 3.8s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Ccircle cx='100' cy='90' r='4' fill='%23e4e4ec' opacity='0.8'/%3E%3Ccircle cx='85' cy='50' r='3' fill='%238aaa8e' opacity='0.6'/%3E%3Ccircle cx='130' cy='55' r='3' fill='%238aaa8e' opacity='0.6'/%3E%3Ccircle cx='55' cy='82' r='2.5' fill='%23d0d0d8' opacity='0.5'/%3E%3Ccircle cx='150' cy='98' r='2.5' fill='%23d0d0d8' opacity='0.5'/%3E%3Ccircle cx='85' cy='130' r='2' fill='%23e4e4ec' opacity='0.45'/%3E%3Ccircle cx='125' cy='135' r='2' fill='%23e4e4ec' opacity='0.45'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════
   VIDEOGEN NODE — Film reel with play button
   ══════════════════════════════════════ */
.workflow-editor .node[data-type="videoGen"]::before {
    opacity: 0.55;
    animation: nodePulseGlow 5.8s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180' fill='none'%3E%3Cpath d='M100 20 Q160 20 165 55 Q170 90 140 115 Q110 140 75 135 Q40 130 35 95 Q30 60 55 40 Q80 20 100 20' stroke='%23d0d0d8' stroke-width='0.8' opacity='0.2'/%3E%3Cpath d='M100 40 Q140 40 142 65 Q145 90 125 105 Q105 120 85 118 Q65 115 60 95 Q55 72 70 55 Q85 40 100 40' stroke='%23e4e4ec' stroke-width='0.6' opacity='0.18'/%3E%3Ccircle cx='100' cy='80' r='3' fill='rgba(210,210,230,0.08)' stroke='%23d0d0d8' stroke-width='0.8' opacity='0.35'/%3E%3Ccircle cx='100' cy='80' r='6' fill='none' stroke='%23e4e4ec' stroke-width='0.4' opacity='0.15'/%3E%3Ccircle cx='100' cy='20' r='1.8' fill='%23d0d0d8' opacity='0.4'/%3E%3Ccircle cx='128' cy='22' r='1.2' fill='%23e4e4ec' opacity='0.32'/%3E%3Ccircle cx='152' cy='32' r='1.5' fill='%238aaa8e' opacity='0.35'/%3E%3Ccircle cx='165' cy='52' r='1.2' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='168' cy='75' r='1.8' fill='%23e4e4ec' opacity='0.38'/%3E%3Ccircle cx='160' cy='98' r='1.2' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='142' cy='115' r='1.5' fill='%238aaa8e' opacity='0.35'/%3E%3Ccircle cx='118' cy='130' r='1.2' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='92' cy='138' r='1.8' fill='%23d0d0d8' opacity='0.38'/%3E%3Ccircle cx='65' cy='135' r='1.2' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='42' cy='122' r='1.5' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='32' cy='100' r='1.2' fill='%23e4e4ec' opacity='0.28'/%3E%3Ccircle cx='30' cy='75' r='1.8' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='38' cy='52' r='1.2' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='55' cy='35' r='1.5' fill='%23e4e4ec' opacity='0.32'/%3E%3Ccircle cx='78' cy='22' r='1.2' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='100' cy='40' r='1.5' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='122' cy='42' r='1' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='138' cy='55' r='1.2' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='143' cy='75' r='1' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='138' cy='95' r='1.5' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='120' cy='110' r='1' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='98' cy='118' r='1.2' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='78' cy='115' r='1' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='62' cy='102' r='1.5' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='58' cy='82' r='1' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='62' cy='62' r='1.2' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='80' cy='45' r='1' fill='%238aaa8e' opacity='0.25'/%3E%3Crect x='95' y='14' width='10' height='7' rx='1' fill='none' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.2'/%3E%3Crect x='160' y='48' width='10' height='7' rx='1' fill='none' stroke='%23e4e4ec' stroke-width='0.5' opacity='0.18'/%3E%3Crect x='158' y='92' width='10' height='7' rx='1' fill='none' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.18'/%3E%3Crect x='112' y='128' width='10' height='7' rx='1' fill='none' stroke='%238aaa8e' stroke-width='0.5' opacity='0.18'/%3E%3Crect x='56' y='128' width='10' height='7' rx='1' fill='none' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.18'/%3E%3Crect x='26' y='92' width='10' height='7' rx='1' fill='none' stroke='%23e4e4ec' stroke-width='0.5' opacity='0.18'/%3E%3Crect x='28' y='48' width='10' height='7' rx='1' fill='none' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.18'/%3E%3Crect x='50' y='28' width='10' height='7' rx='1' fill='none' stroke='%238aaa8e' stroke-width='0.5' opacity='0.18'/%3E%3Cpath d='M100 20 Q114 20 128 22' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.12' stroke-dasharray='1 2'/%3E%3Cpath d='M165 52 Q168 63 168 75' stroke='%23e4e4ec' stroke-width='0.3' opacity='0.12' stroke-dasharray='1 2'/%3E%3Cpath d='M92 138 Q78 138 65 135' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.12' stroke-dasharray='1 2'/%3E%3Cpath d='M30 75 Q32 63 38 52' stroke='%238aaa8e' stroke-width='0.3' opacity='0.1' stroke-dasharray='1 2'/%3E%3Cpath d='M96 74 L96 86 L106 80 Z' fill='rgba(210,210,230,0.06)' stroke='%23e4e4ec' stroke-width='0.6' opacity='0.25'/%3E%3C/svg%3E");
}
.workflow-editor .node[data-type="videoGen"]::after {
    animation: nodeEffectFlash 3s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cpath d='M96 74 L96 86 L106 80 Z' fill='%23e4e4ec' opacity='0.8'/%3E%3Ccircle cx='100' cy='80' r='3' fill='%23d0d0d8' opacity='0.7'/%3E%3Ccircle cx='100' cy='20' r='2' fill='%238aaa8e' opacity='0.5'/%3E%3Ccircle cx='168' cy='75' r='2' fill='%238aaa8e' opacity='0.5'/%3E%3Ccircle cx='92' cy='138' r='2' fill='%23d0d0d8' opacity='0.45'/%3E%3Ccircle cx='30' cy='75' r='2' fill='%23e4e4ec' opacity='0.45'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════
   LIPSYNC NODE — Face profile with sound waves
   ══════════════════════════════════════ */
.workflow-editor .node[data-type="lipsync"]::before {
    opacity: 0.55;
    animation: lipsyncPulse 6.2s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180' fill='none'%3E%3Ccircle cx='45' cy='90' r='3' fill='rgba(210,210,230,0.08)' stroke='%23d0d0d8' stroke-width='1' opacity='0.4'/%3E%3Ccircle cx='45' cy='90' r='6' fill='none' stroke='%23e4e4ec' stroke-width='0.5' opacity='0.2'/%3E%3Cpath d='M55 50 Q80 30 55 10' stroke='%23d0d0d8' stroke-width='0' opacity='0'/%3E%3Cpath d='M55 60 Q70 55 80 60 Q88 68 88 90 Q88 112 80 120 Q70 125 55 120' stroke='%23d0d0d8' stroke-width='0.8' opacity='0.3'/%3E%3Cpath d='M65 45 Q85 35 100 50 Q110 62 110 90 Q110 118 100 130 Q85 145 65 135' stroke='%23e4e4ec' stroke-width='0.7' opacity='0.25'/%3E%3Cpath d='M72 30 Q100 18 122 38 Q138 55 138 90 Q138 125 122 142 Q100 162 72 150' stroke='%23d0d0d8' stroke-width='0.6' opacity='0.2'/%3E%3Cpath d='M78 18 Q112 5 140 28 Q162 48 162 90 Q162 132 140 152 Q112 175 78 162' stroke='%238aaa8e' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M82 8 Q122 -8 155 20 Q182 42 182 90 Q182 138 155 160 Q122 188 82 172' stroke='%23d0d0d8' stroke-width='0.4' opacity='0.1'/%3E%3Ccircle cx='88' cy='65' r='1.2' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='88' cy='90' r='1.5' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='88' cy='115' r='1.2' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='108' cy='52' r='1' fill='%238aaa8e' opacity='0.28'/%3E%3Ccircle cx='110' cy='72' r='1.5' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='110' cy='90' r='1.2' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='110' cy='108' r='1.5' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='108' cy='128' r='1' fill='%238aaa8e' opacity='0.28'/%3E%3Ccircle cx='130' cy='42' r='1.2' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='137' cy='60' r='1' fill='%23e4e4ec' opacity='0.22'/%3E%3Ccircle cx='138' cy='78' r='1.5' fill='%238aaa8e' opacity='0.28'/%3E%3Ccircle cx='138' cy='90' r='1' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='138' cy='102' r='1.5' fill='%238aaa8e' opacity='0.28'/%3E%3Ccircle cx='137' cy='120' r='1' fill='%23e4e4ec' opacity='0.22'/%3E%3Ccircle cx='130' cy='138' r='1.2' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='155' cy='32' r='1' fill='%238aaa8e' opacity='0.2'/%3E%3Ccircle cx='162' cy='55' r='1.2' fill='%23d0d0d8' opacity='0.22'/%3E%3Ccircle cx='162' cy='78' r='1' fill='%23e4e4ec' opacity='0.2'/%3E%3Ccircle cx='162' cy='102' r='1' fill='%23e4e4ec' opacity='0.2'/%3E%3Ccircle cx='162' cy='125' r='1.2' fill='%23d0d0d8' opacity='0.22'/%3E%3Ccircle cx='155' cy='148' r='1' fill='%238aaa8e' opacity='0.2'/%3E%3Ccircle cx='175' cy='45' r='0.8' fill='%23d0d0d8' opacity='0.15'/%3E%3Ccircle cx='182' cy='70' r='1' fill='%238aaa8e' opacity='0.18'/%3E%3Ccircle cx='182' cy='90' r='0.8' fill='%23d0d0d8' opacity='0.15'/%3E%3Ccircle cx='182' cy='110' r='1' fill='%238aaa8e' opacity='0.18'/%3E%3Ccircle cx='175' cy='135' r='0.8' fill='%23d0d0d8' opacity='0.15'/%3E%3Cpath d='M50 50 L180 50' stroke='%23d0d0d8' stroke-width='0.2' opacity='0.06'/%3E%3Cpath d='M50 70 L180 70' stroke='%23e4e4ec' stroke-width='0.2' opacity='0.06'/%3E%3Cpath d='M50 90 L185 90' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.08'/%3E%3Cpath d='M50 110 L180 110' stroke='%23e4e4ec' stroke-width='0.2' opacity='0.06'/%3E%3Cpath d='M50 130 L180 130' stroke='%23d0d0d8' stroke-width='0.2' opacity='0.06'/%3E%3Ccircle cx='45' cy='90' r='10' fill='none' stroke='%23d0d0d8' stroke-width='0.4' opacity='0.15'/%3E%3Ccircle cx='45' cy='90' r='15' fill='none' stroke='%23e4e4ec' stroke-width='0.3' opacity='0.1'/%3E%3C/svg%3E");
}
.workflow-editor .node[data-type="lipsync"]::after {
    animation: lipsyncFlash 3.2s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Ccircle cx='45' cy='90' r='3' fill='%23e4e4ec' opacity='0.8'/%3E%3Ccircle cx='88' cy='90' r='2.5' fill='%23d0d0d8' opacity='0.6'/%3E%3Ccircle cx='88' cy='65' r='2' fill='%238aaa8e' opacity='0.5'/%3E%3Ccircle cx='88' cy='115' r='2' fill='%238aaa8e' opacity='0.5'/%3E%3Ccircle cx='138' cy='90' r='2' fill='%23d0d0d8' opacity='0.45'/%3E%3Ccircle cx='138' cy='60' r='1.5' fill='%23e4e4ec' opacity='0.4'/%3E%3Ccircle cx='138' cy='120' r='1.5' fill='%23e4e4ec' opacity='0.4'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════
   UPSCALER NODE — Diamond lens with expansion rays
   ══════════════════════════════════════ */
.workflow-editor .node[data-type="upscaler"]::before {
    opacity: 0.55;
    animation: upscalerPulse 7.5s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180' fill='none'%3E%3Ccircle cx='22' cy='60' r='1.5' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='34' cy='60' r='1.5' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='46' cy='60' r='1.5' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='22' cy='72' r='1.5' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='34' cy='72' r='1.5' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='46' cy='72' r='1.5' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='22' cy='84' r='1.5' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='34' cy='84' r='1.5' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='46' cy='84' r='1.5' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='22' cy='96' r='1.5' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='34' cy='96' r='1.5' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='46' cy='96' r='1.5' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='22' cy='108' r='1.5' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='34' cy='108' r='1.5' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='46' cy='108' r='1.5' fill='%23d0d0d8' opacity='0.3'/%3E%3Cpath d='M22 60 L46 60' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.12'/%3E%3Cpath d='M22 72 L46 72' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.12'/%3E%3Cpath d='M22 84 L46 84' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.12'/%3E%3Cpath d='M22 96 L46 96' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.12'/%3E%3Cpath d='M22 108 L46 108' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.12'/%3E%3Cpath d='M22 60 L22 108' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.12'/%3E%3Cpath d='M34 60 L34 108' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.12'/%3E%3Cpath d='M46 60 L46 108' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.12'/%3E%3Cpath d='M52 70 Q65 68 78 60' stroke='%238aaa8e' stroke-width='0.5' opacity='0.2' stroke-dasharray='2 2'/%3E%3Cpath d='M52 84 Q70 84 88 84' stroke='%23e4e4ec' stroke-width='0.6' opacity='0.22'/%3E%3Cpath d='M52 98 Q65 100 78 108' stroke='%238aaa8e' stroke-width='0.5' opacity='0.2' stroke-dasharray='2 2'/%3E%3Cpath d='M88 55 L100 40 L112 55 L112 113 L100 128 L88 113 Z' fill='rgba(210,210,230,0.04)' stroke='%23d0d0d8' stroke-width='0.8' opacity='0.25'/%3E%3Cpath d='M92 60 L100 48 L108 60 L108 108 L100 120 L92 108 Z' fill='rgba(210,210,230,0.02)' stroke='%23e4e4ec' stroke-width='0.4' opacity='0.15'/%3E%3Cline x1='100' y1='40' x2='100' y2='128' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.1'/%3E%3Cline x1='88' y1='84' x2='112' y2='84' stroke='%23d0d0d8' stroke-width='0.3' opacity='0.1'/%3E%3Ccircle cx='128' cy='48' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='135' cy='48' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='142' cy='48' r='0.8' fill='%238aaa8e' opacity='0.22'/%3E%3Ccircle cx='149' cy='48' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='156' cy='48' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='163' cy='48' r='0.8' fill='%23d0d0d8' opacity='0.22'/%3E%3Ccircle cx='170' cy='48' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='177' cy='48' r='0.8' fill='%23d0d0d8' opacity='0.22'/%3E%3Ccircle cx='128' cy='56' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='135' cy='56' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='142' cy='56' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='149' cy='56' r='0.8' fill='%238aaa8e' opacity='0.28'/%3E%3Ccircle cx='156' cy='56' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='163' cy='56' r='0.8' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='170' cy='56' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='177' cy='56' r='0.8' fill='%238aaa8e' opacity='0.22'/%3E%3Ccircle cx='128' cy='64' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='135' cy='64' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='142' cy='64' r='0.8' fill='%23e4e4ec' opacity='0.28'/%3E%3Ccircle cx='149' cy='64' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='156' cy='64' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='163' cy='64' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='170' cy='64' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='177' cy='64' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='128' cy='72' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='135' cy='72' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='142' cy='72' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='149' cy='72' r='0.8' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='156' cy='72' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='163' cy='72' r='0.8' fill='%238aaa8e' opacity='0.28'/%3E%3Ccircle cx='170' cy='72' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='177' cy='72' r='0.8' fill='%23e4e4ec' opacity='0.22'/%3E%3Ccircle cx='128' cy='80' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='135' cy='80' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='142' cy='80' r='0.8' fill='%238aaa8e' opacity='0.28'/%3E%3Ccircle cx='149' cy='80' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='156' cy='80' r='0.8' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='163' cy='80' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='170' cy='80' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='177' cy='80' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='128' cy='88' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='135' cy='88' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='142' cy='88' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='149' cy='88' r='0.8' fill='%238aaa8e' opacity='0.28'/%3E%3Ccircle cx='156' cy='88' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='163' cy='88' r='0.8' fill='%23e4e4ec' opacity='0.28'/%3E%3Ccircle cx='170' cy='88' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='177' cy='88' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='128' cy='96' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='135' cy='96' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='142' cy='96' r='0.8' fill='%23e4e4ec' opacity='0.28'/%3E%3Ccircle cx='149' cy='96' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='156' cy='96' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='163' cy='96' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='170' cy='96' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='177' cy='96' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='128' cy='104' r='0.8' fill='%238aaa8e' opacity='0.22'/%3E%3Ccircle cx='135' cy='104' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='142' cy='104' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='149' cy='104' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='156' cy='104' r='0.8' fill='%238aaa8e' opacity='0.28'/%3E%3Ccircle cx='163' cy='104' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='170' cy='104' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='177' cy='104' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='128' cy='112' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='135' cy='112' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='142' cy='112' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='149' cy='112' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='156' cy='112' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='163' cy='112' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='170' cy='112' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='177' cy='112' r='0.8' fill='%238aaa8e' opacity='0.22'/%3E%3Ccircle cx='128' cy='120' r='0.8' fill='%23e4e4ec' opacity='0.22'/%3E%3Ccircle cx='135' cy='120' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='142' cy='120' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='149' cy='120' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='156' cy='120' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='163' cy='120' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='170' cy='120' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='177' cy='120' r='0.8' fill='%23e4e4ec' opacity='0.22'/%3E%3Cpath d='M112 55 L128 48' stroke='%238aaa8e' stroke-width='0.4' opacity='0.18'/%3E%3Cpath d='M112 84 L128 84' stroke='%23e4e4ec' stroke-width='0.4' opacity='0.2'/%3E%3Cpath d='M112 113 L128 120' stroke='%238aaa8e' stroke-width='0.4' opacity='0.18'/%3E%3Ccircle cx='128' cy='48' r='2' fill='none' stroke='%238aaa8e' stroke-width='0.3' opacity='0.15'/%3E%3Ccircle cx='177' cy='48' r='2' fill='none' stroke='%238aaa8e' stroke-width='0.3' opacity='0.15'/%3E%3Ccircle cx='128' cy='120' r='2' fill='none' stroke='%238aaa8e' stroke-width='0.3' opacity='0.15'/%3E%3Ccircle cx='177' cy='120' r='2' fill='none' stroke='%238aaa8e' stroke-width='0.3' opacity='0.15'/%3E%3C/svg%3E");
}
.workflow-editor .node[data-type="upscaler"]::after {
    animation: upscalerFlash 4.2s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Ccircle cx='100' cy='84' r='3' fill='%23e4e4ec' opacity='0.7'/%3E%3Ccircle cx='128' cy='48' r='2.5' fill='%238aaa8e' opacity='0.6'/%3E%3Ccircle cx='177' cy='48' r='2' fill='%23d0d0d8' opacity='0.5'/%3E%3Ccircle cx='128' cy='120' r='2.5' fill='%238aaa8e' opacity='0.6'/%3E%3Ccircle cx='177' cy='120' r='2' fill='%23d0d0d8' opacity='0.5'/%3E%3Ccircle cx='177' cy='84' r='2' fill='%23e4e4ec' opacity='0.55'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════
   AUDIOTRIM NODE — Waveform with scissors
   ══════════════════════════════════════ */
.workflow-editor .node[data-type="audioTrim"]::before {
    opacity: 0.55;
    animation: audioPulse 6.8s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180' fill='none'%3E%3Ccircle cx='15' cy='85' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='15' cy='90' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='15' cy='95' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='22' cy='78' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='22' cy='83' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='22' cy='88' r='0.8' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='22' cy='93' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='22' cy='98' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='29' cy='70' r='0.8' fill='%238aaa8e' opacity='0.22'/%3E%3Ccircle cx='29' cy='75' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='29' cy='80' r='0.8' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='29' cy='85' r='0.8' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='29' cy='90' r='0.8' fill='%23d0d0d8' opacity='0.38'/%3E%3Ccircle cx='29' cy='95' r='0.8' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='29' cy='100' r='0.8' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='29' cy='105' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='29' cy='110' r='0.8' fill='%238aaa8e' opacity='0.22'/%3E%3Ccircle cx='36' cy='60' r='0.8' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='36' cy='65' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='36' cy='70' r='0.8' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='36' cy='75' r='0.8' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='36' cy='80' r='0.8' fill='%23d0d0d8' opacity='0.38'/%3E%3Ccircle cx='36' cy='85' r='0.8' fill='%23e4e4ec' opacity='0.4'/%3E%3Ccircle cx='36' cy='90' r='0.8' fill='%23d0d0d8' opacity='0.42'/%3E%3Ccircle cx='36' cy='95' r='0.8' fill='%23e4e4ec' opacity='0.4'/%3E%3Ccircle cx='36' cy='100' r='0.8' fill='%23d0d0d8' opacity='0.38'/%3E%3Ccircle cx='36' cy='105' r='0.8' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='36' cy='110' r='0.8' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='36' cy='115' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='36' cy='120' r='0.8' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='43' cy='75' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='43' cy='80' r='0.8' fill='%23e4e4ec' opacity='0.32'/%3E%3Ccircle cx='43' cy='85' r='0.8' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='43' cy='90' r='0.8' fill='%23d0d0d8' opacity='0.38'/%3E%3Ccircle cx='43' cy='95' r='0.8' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='43' cy='100' r='0.8' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='43' cy='105' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='50' cy='82' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='50' cy='87' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='50' cy='92' r='0.8' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='50' cy='97' r='0.8' fill='%238aaa8e' opacity='0.3'/%3E%3Crect x='55' y='38' width='68' height='104' rx='2' fill='rgba(92,232,154,0.04)' stroke='%238aaa8e' stroke-width='0.5' opacity='0.15'/%3E%3Ccircle cx='60' cy='55' r='0.8' fill='%23d0d0d8' opacity='0.22'/%3E%3Ccircle cx='60' cy='60' r='0.8' fill='%238aaa8e' opacity='0.28'/%3E%3Ccircle cx='60' cy='65' r='0.8' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='60' cy='70' r='0.8' fill='%23e4e4ec' opacity='0.38'/%3E%3Ccircle cx='60' cy='75' r='0.8' fill='%23d0d0d8' opacity='0.42'/%3E%3Ccircle cx='60' cy='80' r='0.8' fill='%23d0d0d8' opacity='0.45'/%3E%3Ccircle cx='60' cy='85' r='0.8' fill='%23e4e4ec' opacity='0.48'/%3E%3Ccircle cx='60' cy='90' r='0.8' fill='%23d0d0d8' opacity='0.5'/%3E%3Ccircle cx='60' cy='95' r='0.8' fill='%23e4e4ec' opacity='0.48'/%3E%3Ccircle cx='60' cy='100' r='0.8' fill='%23d0d0d8' opacity='0.45'/%3E%3Ccircle cx='60' cy='105' r='0.8' fill='%23d0d0d8' opacity='0.42'/%3E%3Ccircle cx='60' cy='110' r='0.8' fill='%23e4e4ec' opacity='0.38'/%3E%3Ccircle cx='60' cy='115' r='0.8' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='60' cy='120' r='0.8' fill='%238aaa8e' opacity='0.28'/%3E%3Ccircle cx='60' cy='125' r='0.8' fill='%23d0d0d8' opacity='0.22'/%3E%3Ccircle cx='68' cy='48' r='0.8' fill='%238aaa8e' opacity='0.2'/%3E%3Ccircle cx='68' cy='53' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='68' cy='58' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='68' cy='63' r='0.8' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='68' cy='68' r='0.8' fill='%23d0d0d8' opacity='0.4'/%3E%3Ccircle cx='68' cy='73' r='0.8' fill='%23d0d0d8' opacity='0.44'/%3E%3Ccircle cx='68' cy='78' r='0.8' fill='%23e4e4ec' opacity='0.48'/%3E%3Ccircle cx='68' cy='83' r='0.8' fill='%23d0d0d8' opacity='0.5'/%3E%3Ccircle cx='68' cy='88' r='0.8' fill='%23d0d0d8' opacity='0.52'/%3E%3Ccircle cx='68' cy='93' r='0.8' fill='%23e4e4ec' opacity='0.5'/%3E%3Ccircle cx='68' cy='98' r='0.8' fill='%23d0d0d8' opacity='0.48'/%3E%3Ccircle cx='68' cy='103' r='0.8' fill='%23d0d0d8' opacity='0.44'/%3E%3Ccircle cx='68' cy='108' r='0.8' fill='%23e4e4ec' opacity='0.4'/%3E%3Ccircle cx='68' cy='113' r='0.8' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='68' cy='118' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='68' cy='123' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='68' cy='128' r='0.8' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='76' cy='65' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='76' cy='70' r='0.8' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='76' cy='75' r='0.8' fill='%23e4e4ec' opacity='0.38'/%3E%3Ccircle cx='76' cy='80' r='0.8' fill='%23d0d0d8' opacity='0.42'/%3E%3Ccircle cx='76' cy='85' r='0.8' fill='%23d0d0d8' opacity='0.45'/%3E%3Ccircle cx='76' cy='90' r='0.8' fill='%23e4e4ec' opacity='0.48'/%3E%3Ccircle cx='76' cy='95' r='0.8' fill='%23d0d0d8' opacity='0.45'/%3E%3Ccircle cx='76' cy='100' r='0.8' fill='%23d0d0d8' opacity='0.42'/%3E%3Ccircle cx='76' cy='105' r='0.8' fill='%23e4e4ec' opacity='0.38'/%3E%3Ccircle cx='76' cy='110' r='0.8' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='76' cy='115' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='84' cy='72' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='84' cy='77' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='84' cy='82' r='0.8' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='84' cy='87' r='0.8' fill='%23e4e4ec' opacity='0.38'/%3E%3Ccircle cx='84' cy='92' r='0.8' fill='%23d0d0d8' opacity='0.4'/%3E%3Ccircle cx='84' cy='97' r='0.8' fill='%23e4e4ec' opacity='0.38'/%3E%3Ccircle cx='84' cy='102' r='0.8' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='84' cy='107' r='0.8' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='92' cy='52' r='0.8' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='92' cy='57' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='92' cy='62' r='0.8' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='92' cy='67' r='0.8' fill='%23d0d0d8' opacity='0.38'/%3E%3Ccircle cx='92' cy='72' r='0.8' fill='%23e4e4ec' opacity='0.42'/%3E%3Ccircle cx='92' cy='77' r='0.8' fill='%23d0d0d8' opacity='0.48'/%3E%3Ccircle cx='92' cy='82' r='0.8' fill='%23d0d0d8' opacity='0.5'/%3E%3Ccircle cx='92' cy='87' r='0.8' fill='%23e4e4ec' opacity='0.52'/%3E%3Ccircle cx='92' cy='92' r='0.8' fill='%23d0d0d8' opacity='0.5'/%3E%3Ccircle cx='92' cy='97' r='0.8' fill='%23e4e4ec' opacity='0.48'/%3E%3Ccircle cx='92' cy='102' r='0.8' fill='%23d0d0d8' opacity='0.42'/%3E%3Ccircle cx='92' cy='107' r='0.8' fill='%23d0d0d8' opacity='0.38'/%3E%3Ccircle cx='92' cy='112' r='0.8' fill='%23e4e4ec' opacity='0.32'/%3E%3Ccircle cx='92' cy='117' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='92' cy='122' r='0.8' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='100' cy='60' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='100' cy='65' r='0.8' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='100' cy='70' r='0.8' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='100' cy='75' r='0.8' fill='%23e4e4ec' opacity='0.4'/%3E%3Ccircle cx='100' cy='80' r='0.8' fill='%23d0d0d8' opacity='0.45'/%3E%3Ccircle cx='100' cy='85' r='0.8' fill='%23d0d0d8' opacity='0.48'/%3E%3Ccircle cx='100' cy='90' r='0.8' fill='%23e4e4ec' opacity='0.5'/%3E%3Ccircle cx='100' cy='95' r='0.8' fill='%23d0d0d8' opacity='0.48'/%3E%3Ccircle cx='100' cy='100' r='0.8' fill='%23d0d0d8' opacity='0.45'/%3E%3Ccircle cx='100' cy='105' r='0.8' fill='%23e4e4ec' opacity='0.4'/%3E%3Ccircle cx='100' cy='110' r='0.8' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='100' cy='115' r='0.8' fill='%238aaa8e' opacity='0.3'/%3E%3Ccircle cx='100' cy='120' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='108' cy='72' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='108' cy='77' r='0.8' fill='%23e4e4ec' opacity='0.32'/%3E%3Ccircle cx='108' cy='82' r='0.8' fill='%23d0d0d8' opacity='0.38'/%3E%3Ccircle cx='108' cy='87' r='0.8' fill='%23d0d0d8' opacity='0.42'/%3E%3Ccircle cx='108' cy='92' r='0.8' fill='%23e4e4ec' opacity='0.45'/%3E%3Ccircle cx='108' cy='97' r='0.8' fill='%23d0d0d8' opacity='0.42'/%3E%3Ccircle cx='108' cy='102' r='0.8' fill='%23d0d0d8' opacity='0.38'/%3E%3Ccircle cx='108' cy='107' r='0.8' fill='%23e4e4ec' opacity='0.32'/%3E%3Ccircle cx='116' cy='80' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='116' cy='85' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='116' cy='90' r='0.8' fill='%23d0d0d8' opacity='0.35'/%3E%3Ccircle cx='116' cy='95' r='0.8' fill='%23e4e4ec' opacity='0.35'/%3E%3Ccircle cx='116' cy='100' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='130' cy='82' r='0.8' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='130' cy='87' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='130' cy='92' r='0.8' fill='%23e4e4ec' opacity='0.28'/%3E%3Ccircle cx='130' cy='97' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='138' cy='78' r='0.8' fill='%238aaa8e' opacity='0.2'/%3E%3Ccircle cx='138' cy='83' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='138' cy='88' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='138' cy='93' r='0.8' fill='%23e4e4ec' opacity='0.32'/%3E%3Ccircle cx='138' cy='98' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='138' cy='103' r='0.8' fill='%238aaa8e' opacity='0.25'/%3E%3Ccircle cx='146' cy='85' r='0.8' fill='%23d0d0d8' opacity='0.22'/%3E%3Ccircle cx='146' cy='90' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='146' cy='95' r='0.8' fill='%23e4e4ec' opacity='0.22'/%3E%3Ccircle cx='154' cy='75' r='0.8' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='154' cy='80' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='154' cy='85' r='0.8' fill='%23d0d0d8' opacity='0.3'/%3E%3Ccircle cx='154' cy='90' r='0.8' fill='%23d0d0d8' opacity='0.32'/%3E%3Ccircle cx='154' cy='95' r='0.8' fill='%23e4e4ec' opacity='0.3'/%3E%3Ccircle cx='154' cy='100' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='154' cy='105' r='0.8' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='162' cy='82' r='0.8' fill='%238aaa8e' opacity='0.22'/%3E%3Ccircle cx='162' cy='87' r='0.8' fill='%23d0d0d8' opacity='0.25'/%3E%3Ccircle cx='162' cy='92' r='0.8' fill='%23d0d0d8' opacity='0.28'/%3E%3Ccircle cx='162' cy='97' r='0.8' fill='%238aaa8e' opacity='0.22'/%3E%3Ccircle cx='170' cy='86' r='0.8' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='170' cy='91' r='0.8' fill='%23e4e4ec' opacity='0.25'/%3E%3Ccircle cx='170' cy='96' r='0.8' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='178' cy='88' r='0.8' fill='%23d0d0d8' opacity='0.18'/%3E%3Ccircle cx='178' cy='93' r='0.8' fill='%23d0d0d8' opacity='0.2'/%3E%3Ccircle cx='185' cy='89' r='0.8' fill='%238aaa8e' opacity='0.15'/%3E%3Ccircle cx='185' cy='94' r='0.8' fill='%23d0d0d8' opacity='0.18'/%3E%3Cline x1='10' y1='145' x2='192' y2='145' stroke='%23d0d0d8' stroke-width='0.5' opacity='0.15'/%3E%3Cline x1='15' y1='142' x2='15' y2='148' stroke='%23d0d0d8' stroke-width='0.4' opacity='0.15'/%3E%3Cline x1='55' y1='140' x2='55' y2='150' stroke='%238aaa8e' stroke-width='0.6' opacity='0.25'/%3E%3Cline x1='123' y1='140' x2='123' y2='150' stroke='%238aaa8e' stroke-width='0.6' opacity='0.25'/%3E%3Cline x1='92' y1='142' x2='92' y2='148' stroke='%23d0d0d8' stroke-width='0.4' opacity='0.15'/%3E%3Cline x1='130' y1='142' x2='130' y2='148' stroke='%23d0d0d8' stroke-width='0.4' opacity='0.12'/%3E%3Cline x1='168' y1='142' x2='168' y2='148' stroke='%23d0d0d8' stroke-width='0.4' opacity='0.12'/%3E%3Cpath d='M86 140 L90 140 L88 143 Z' fill='%23e4e4ec' opacity='0.35'/%3E%3Cline x1='88' y1='143' x2='88' y2='150' stroke='%23e4e4ec' stroke-width='0.5' opacity='0.25'/%3E%3C/svg%3E");
}
.workflow-editor .node[data-type="audioTrim"]::after {
    animation: audioFlash 3.6s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cline x1='55' y1='38' x2='55' y2='142' stroke='%238aaa8e' stroke-width='1.5' opacity='0.7'/%3E%3Cline x1='123' y1='38' x2='123' y2='142' stroke='%238aaa8e' stroke-width='1.5' opacity='0.7'/%3E%3Ccircle cx='55' cy='36' r='2.5' fill='%23e4e4ec' opacity='0.7'/%3E%3Ccircle cx='123' cy='36' r='2.5' fill='%23e4e4ec' opacity='0.7'/%3E%3Ccircle cx='88' cy='90' r='2' fill='%23d0d0d8' opacity='0.6'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════
   CANVAS DROP OVERLAY — Shown when dragging files onto canvas
   ══════════════════════════════════════════════════════════════ */
.workflow-editor .canvas-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(16, 18, 27, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 3px dashed rgba(139, 92, 246, 0.6);
    border-radius: 12px;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.workflow-editor .canvas-drop-overlay.active {
    display: flex;
}
.workflow-editor .canvas-drop-overlay .drop-label {
    font-size: 20px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.5px;
    padding: 16px 32px;
    border-radius: 12px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* ══════════════════════════════════════════════════════════
   FLOATING NODE TOOLBAR — Appears above selected node
   ══════════════════════════════════════════════════════════ */
.workflow-editor .node-floating-toolbar {
    position: absolute;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: rgba(30, 32, 48, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    pointer-events: auto;
    transform: translateX(-50%);
    animation: toolbarFadeIn 0.15s ease-out;
}
@keyframes toolbarFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.workflow-editor .node-floating-toolbar .toolbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: all 0.15s ease;
}
.workflow-editor .node-floating-toolbar .toolbar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
}
.workflow-editor .node-floating-toolbar .toolbar-icon-btn.danger:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}
.workflow-editor .node-floating-toolbar .toolbar-icon-btn svg {
    width: 16px;
    height: 16px;
}
.workflow-editor .node-floating-toolbar .toolbar-separator {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 2px;
}
.workflow-editor .node-floating-toolbar .toolbar-color-picker {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 4px;
}
.workflow-editor .node-floating-toolbar .toolbar-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.workflow-editor .node-floating-toolbar .toolbar-color-dot:hover {
    transform: scale(1.25);
    border-color: rgba(255, 255, 255, 0.4);
}
.workflow-editor .node-floating-toolbar .toolbar-color-dot.active {
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

/* ══════════════════════════════════════════════════════
   CANVAS FRAMES — Visual grouping containers for nodes
   ══════════════════════════════════════════════════════ */
.workflow-editor .canvas-frame {
    position: absolute;
    border: 2px solid rgba(139, 92, 246, 0.25);
    border-radius: 14px;
    background: rgba(139, 92, 246, 0.04);
    z-index: 0;
    cursor: move;
    transition: border-color 0.2s ease, background 0.2s ease;
    min-width: 200px;
    min-height: 150px;
}
.workflow-editor .canvas-frame:hover {
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.06);
}
.workflow-editor .canvas-frame .frame-label {
    position: absolute;
    top: -12px;
    left: 16px;
    padding: 2px 10px;
    background: rgba(30, 32, 48, 0.9);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    cursor: text;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}
.workflow-editor .canvas-frame .frame-label:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.6);
    color: rgba(255, 255, 255, 0.95);
}
.workflow-editor .canvas-frame .frame-resize-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: -4px;
    right: -4px;
    cursor: nwse-resize;
    border-radius: 4px;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.workflow-editor .canvas-frame:hover .frame-resize-handle {
    opacity: 1;
}
.workflow-editor .canvas-frame .frame-resize-handle:hover {
    background: rgba(139, 92, 246, 0.4);
}
.workflow-editor .canvas-frame.frame-selected {
    border-color: var(--accent-hover, #5ce89a);
    box-shadow: 0 0 0 2px var(--accent-glow, rgba(92,232,154,0.25));
}

/* ══════════════════════════════════════════════
   MEDIA BROWSER — Stock asset search panel
   ══════════════════════════════════════════════ */
.workflow-editor .media-browser {
    position: absolute;
    top: 48px;
    right: 0;
    width: 320px;
    height: calc(100% - 48px);
    background: rgba(20, 22, 35, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 200;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: mediaBrowserSlideIn 0.2s ease-out;
}
@keyframes mediaBrowserSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.workflow-editor .media-browser.open {
    display: flex;
}
.workflow-editor .media-browser-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.workflow-editor .media-browser-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}
.workflow-editor .media-browser-header .close-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.15s;
}
.workflow-editor .media-browser-header .close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}
.workflow-editor .media-browser-search {
    padding: 10px 14px;
}
.workflow-editor .media-browser-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.workflow-editor .media-browser-search input:focus {
    border-color: rgba(139, 92, 246, 0.5);
}
.workflow-editor .media-browser-search input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
.workflow-editor .media-tabs {
    display: flex;
    gap: 0;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.workflow-editor .media-tab {
    flex: 1;
    padding: 8px 0;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.workflow-editor .media-tab:hover {
    color: rgba(255, 255, 255, 0.7);
}
.workflow-editor .media-tab.active {
    color: rgba(255, 255, 255, 0.95);
    border-bottom-color: #8b5cf6;
}
.workflow-editor .media-grid {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    align-content: start;
}
.workflow-editor .media-grid::-webkit-scrollbar {
    width: 5px;
}
.workflow-editor .media-grid::-webkit-scrollbar-track {
    background: transparent;
}
.workflow-editor .media-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}
.workflow-editor .media-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.15s ease;
    background: rgba(255, 255, 255, 0.03);
}
.workflow-editor .media-item:hover {
    border-color: rgba(139, 92, 246, 0.4);
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.workflow-editor .media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.workflow-editor .media-item .media-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
    opacity: 0;
    display: flex;
    align-items: flex-end;
    padding: 6px 8px;
    transition: opacity 0.15s;
}
.workflow-editor .media-item:hover .media-item-overlay {
    opacity: 1;
}
.workflow-editor .media-item .media-item-overlay span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.workflow-editor .media-load-more {
    padding: 12px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.workflow-editor .media-load-more button {
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.workflow-editor .media-load-more button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
}

/* ══════════════════════════════════════════
   EXPORT DIALOG — Multi-format export modal
   ══════════════════════════════════════════ */
.workflow-editor .export-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: exportFadeIn 0.15s ease-out;
}
@keyframes exportFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.workflow-editor .export-dialog {
    width: 480px;
    max-height: 80vh;
    background: rgba(25, 27, 42, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: exportSlideUp 0.2s ease-out;
}
@keyframes exportSlideUp {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.workflow-editor .export-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.workflow-editor .export-dialog-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.workflow-editor .export-dialog-header .close-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.15s;
}
.workflow-editor .export-dialog-header .close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}
.workflow-editor .export-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}
.workflow-editor .export-list::-webkit-scrollbar {
    width: 5px;
}
.workflow-editor .export-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.workflow-editor .export-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.15s;
}
.workflow-editor .export-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
.workflow-editor .export-item .export-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.workflow-editor .export-item .export-thumb img,
.workflow-editor .export-item .export-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.workflow-editor .export-item .export-thumb svg {
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.4);
}
.workflow-editor .export-item-info {
    flex: 1;
    min-width: 0;
}
.workflow-editor .export-item-info .export-item-name {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.workflow-editor .export-item-info .export-item-type {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}
.workflow-editor .export-item .export-download-btn {
    padding: 6px 14px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 7px;
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.workflow-editor .export-item .export-download-btn:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.5);
    color: #c4b5fd;
}
.workflow-editor .export-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.workflow-editor .export-dialog-footer .export-count {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
}
.workflow-editor .export-dialog-footer .export-all-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.workflow-editor .export-dialog-footer .export-all-btn:hover {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}

/* ══════════════════════════════════════════════════════════
   STORYBOARD VIEW — Multi-shot timeline for video workflows
   ══════════════════════════════════════════════════════════ */
.workflow-editor .storyboard-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 220px;
    background: rgba(16, 18, 27, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 180;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: storyboardSlideUp 0.25s ease-out;
}
@keyframes storyboardSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.workflow-editor .storyboard-container.open {
    display: flex;
}
.workflow-editor .storyboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.workflow-editor .storyboard-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}
.workflow-editor .storyboard-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.workflow-editor .storyboard-actions button {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.workflow-editor .storyboard-actions button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
}
.workflow-editor .storyboard-actions button.primary {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: #a78bfa;
}
.workflow-editor .storyboard-actions button.primary:hover {
    background: rgba(139, 92, 246, 0.25);
    color: #c4b5fd;
}
.workflow-editor .storyboard-timeline {
    flex: 1;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
}
.workflow-editor .storyboard-timeline::-webkit-scrollbar {
    height: 5px;
}
.workflow-editor .storyboard-timeline::-webkit-scrollbar-track {
    background: transparent;
}
.workflow-editor .storyboard-timeline::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}
.workflow-editor .storyboard-shot {
    flex-shrink: 0;
    width: 160px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s ease;
}
.workflow-editor .storyboard-shot:hover {
    border-color: rgba(139, 92, 246, 0.35);
    background: rgba(255, 255, 255, 0.05);
}
.workflow-editor .storyboard-shot.active {
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.2);
}
.workflow-editor .shot-number {
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.workflow-editor .shot-delete {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    transition: color 0.15s;
}
.workflow-editor .shot-delete:hover {
    color: var(--red, #f87171);
}
.workflow-editor .shot-status {
    display: flex;
    align-items: center;
    gap: 4px;
}
.workflow-editor .shot-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}
.workflow-editor .shot-status-dot.pending {
    background: rgba(255, 255, 255, 0.2);
}
.workflow-editor .shot-status-dot.running {
    background: #fbbf24;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
    animation: statusPulse 1.2s ease-in-out infinite;
}
@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.workflow-editor .shot-status-dot.done {
    background: #34d399;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.3);
}
.workflow-editor .shot-status-dot.error {
    background: #f87171;
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.3);
}
.workflow-editor .shot-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.workflow-editor .shot-thumb img,
.workflow-editor .shot-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.workflow-editor .shot-thumb .shot-placeholder {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.2);
}
.workflow-editor .shot-prompt {
    padding: 6px 10px;
    flex: 1;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ════════════════════════════════════════
   AUDIO PLAYER — In-node audio previews
   ════════════════════════════════════════ */
.workflow-editor .node audio {
    width: 100%;
    height: 32px;
    border-radius: 6px;
    margin-top: 4px;
}
.workflow-editor .node audio::-webkit-media-controls-panel {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

/* ══════════════════════════════════════════
   NODE TYPE LEFT-BORDER ACCENT COLORS
   Freepik Spaces style — colored left border per type
   ══════════════════════════════════════════ */
/* Text/Assistant — purple */
.workflow-editor .node[data-type="text"] { border-left-color: #a78bfa; }
.workflow-editor .node[data-type="assistant"] { border-left-color: #a78bfa; }
/* Image generation — blue */
.workflow-editor .node[data-type="imageGen"] { border-left-color: #5ce89a; }
/* Video generation — pink */
.workflow-editor .node[data-type="videoGen"] { border-left-color: #E83D7E; }
.workflow-editor .node[data-type="textToVideo"] { border-left-color: #E83D7E; }
.workflow-editor .node[data-type="pixverse"] { border-left-color: #E83D7E; }
/* Upload — gumbo gray */
.workflow-editor .node[data-type="upload"] { border-left-color: #7C98A9; }
/* Upscaler/Processing — sky blue */
.workflow-editor .node[data-type="upscaler"] { border-left-color: #38bdf8; }
.workflow-editor .node[data-type="bgRemover"] { border-left-color: #38bdf8; }
.workflow-editor .node[data-type="imageExpand"] { border-left-color: #38bdf8; }
.workflow-editor .node[data-type="relight"] { border-left-color: #fbbf24; }
.workflow-editor .node[data-type="styleTransfer"] { border-left-color: #c084fc; }
/* Audio — teal */
.workflow-editor .node[data-type="musicGen"] { border-left-color: #1EA4B8; }
.workflow-editor .node[data-type="sfxGen"] { border-left-color: #1EA4B8; }
.workflow-editor .node[data-type="audioIsolation"] { border-left-color: #1EA4B8; }
.workflow-editor .node[data-type="audioTrim"] { border-left-color: #1EA4B8; }
.workflow-editor .node[data-type="lipsync"] { border-left-color: #1EA4B8; }
/* VFX/Motion — red/magenta */
.workflow-editor .node[data-type="vfx"] { border-left-color: #ef4444; }
.workflow-editor .node[data-type="motionTransfer"] { border-left-color: #d946ef; }
/* Video editing — ocean blue */
.workflow-editor .node[data-type="videoEdit"] { border-left-color: #0ea5e9; }
.workflow-editor .node[data-type="videoEditor"] { border-left-color: #0ea5e9; }
/* List — gumbo gray */
.workflow-editor .node[data-type="list"] { border-left-color: #7C98A9; }

/* ══════════════════════════════════════════════════════════════
   DIRECTOR PANEL — Cinematic camera, genre, speed, transitions
   ══════════════════════════════════════════════════════════════ */
.workflow-editor .director-panel {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 340px;
    max-height: 85vh;
    background: rgba(10, 12, 20, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(244, 114, 182, 0.2);
    border-left: 1px solid rgba(244, 114, 182, 0.12);
    border-top-left-radius: 14px;
    z-index: 190;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: directorSlideUp 0.25s ease-out;
    box-shadow: -8px -4px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(244, 114, 182, 0.04);
}
@keyframes directorSlideUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.workflow-editor .director-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    background: rgba(244, 114, 182, 0.04);
}
.workflow-editor .director-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.workflow-editor .director-title-row svg {
    color: #f472b6;
    flex-shrink: 0;
}
.workflow-editor .director-title {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.3px;
}
.workflow-editor .director-node-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    font-family: var(--mono);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.workflow-editor .director-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.workflow-editor .director-apply-btn {
    padding: 4px 10px;
    border: 1px solid rgba(244, 114, 182, 0.3);
    border-radius: 6px;
    background: rgba(244, 114, 182, 0.12);
    color: #f472b6;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font);
}
.workflow-editor .director-apply-btn:hover {
    background: rgba(244, 114, 182, 0.22);
    color: #f9a8d4;
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.15);
}

.workflow-editor .director-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}
.workflow-editor .director-body::-webkit-scrollbar { width: 4px; }
.workflow-editor .director-body::-webkit-scrollbar-track { background: transparent; }
.workflow-editor .director-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

.workflow-editor .director-section {
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.workflow-editor .director-section:last-child { border-bottom: none; }

.workflow-editor .director-section-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
}

/* Camera Tabs */
.workflow-editor .director-camera-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    padding: 2px;
}
.workflow-editor .director-tab {
    flex: 1;
    padding: 5px 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font);
    text-align: center;
}
.workflow-editor .director-tab:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
}
.workflow-editor .director-tab.active {
    background: rgba(244, 114, 182, 0.15);
    color: #f472b6;
    box-shadow: 0 1px 4px rgba(244, 114, 182, 0.1);
}

/* Camera Preset Grid */
.workflow-editor .director-preset-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.workflow-editor .director-preset-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: all 0.15s;
    padding: 4px 2px;
}
.workflow-editor .director-preset-tile:hover {
    border-color: rgba(244, 114, 182, 0.3);
    background: rgba(244, 114, 182, 0.06);
    transform: scale(1.04);
}
.workflow-editor .director-preset-tile.selected {
    border-color: #f472b6;
    background: rgba(244, 114, 182, 0.15);
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.15), inset 0 0 8px rgba(244, 114, 182, 0.05);
}
.workflow-editor .director-preset-icon {
    font-size: 20px;
    line-height: 1;
}
.workflow-editor .director-preset-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.workflow-editor .director-preset-tile.selected .director-preset-label {
    color: #f9a8d4;
}

/* Camera Path Preview */
.workflow-editor .director-preview-section {
    display: flex;
    align-items: center;
    gap: 12px;
}
.workflow-editor #we-camera-path-canvas {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}
.workflow-editor .director-preset-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    flex: 1;
}

/* Genre Chips */
.workflow-editor .director-genre-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.workflow-editor .director-genre-chip {
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font);
}
.workflow-editor .director-genre-chip:hover {
    border-color: rgba(167, 139, 250, 0.35);
    background: rgba(167, 139, 250, 0.08);
    color: rgba(255, 255, 255, 0.8);
}
.workflow-editor .director-genre-chip.selected {
    border-color: #a78bfa;
    background: rgba(167, 139, 250, 0.18);
    color: #c4b5fd;
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.12);
}

/* Speed Curve */
.workflow-editor .director-speed-curve {
    display: flex;
    gap: 8px;
}
.workflow-editor .speed-kf {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.workflow-editor .speed-kf label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.workflow-editor .speed-kf input[type="range"] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    outline: none;
}
.workflow-editor .speed-kf input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f472b6;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(244, 114, 182, 0.3);
}
.workflow-editor .speed-kf .range-val {
    font-size: 12px;
    font-family: var(--mono);
    color: rgba(255, 255, 255, 0.4);
}

/* Start/End Frame Slots */
.workflow-editor .director-frames-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}
.workflow-editor .director-frame-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.workflow-editor .frame-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
}
.workflow-editor .frame-thumb {
    width: 100px;
    height: 56px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.15s;
    overflow: hidden;
}
.workflow-editor .frame-thumb:hover {
    border-color: rgba(244, 114, 182, 0.3);
    background: rgba(244, 114, 182, 0.05);
}
.workflow-editor .frame-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.workflow-editor .frame-arrow {
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* Transition Chips */
.workflow-editor .director-transition-chips {
    display: flex;
    gap: 4px;
}
.workflow-editor .director-transition-chip {
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font);
}
.workflow-editor .director-transition-chip:hover {
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.08);
}
.workflow-editor .director-transition-chip.selected {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    color: #fcd34d;
}

/* Prompt Preview */
.workflow-editor .director-prompt-preview {
    font-size: 13px;
    font-family: var(--mono);
    color: rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 8px 10px;
    line-height: 1.5;
    min-height: 40px;
    max-height: 80px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Storyboard shot camera indicator */
.workflow-editor .shot-camera-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(244, 114, 182, 0.12);
    border: 1px solid rgba(244, 114, 182, 0.2);
    border-radius: 4px;
    font-size: 11px;
    color: #f472b6;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 4px;
}
.workflow-editor .shot-camera-badge:hover {
    background: rgba(244, 114, 182, 0.2);
    border-color: rgba(244, 114, 182, 0.4);
}
.workflow-editor .shot-genre-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 4px;
    font-size: 11px;
    color: #a78bfa;
    font-weight: 600;
    margin-top: 2px;
}

/* Shot transition indicator between cards */
.workflow-editor .shot-transition-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    align-self: center;
}
.workflow-editor .shot-transition-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(251, 191, 36, 0.5);
    writing-mode: vertical-lr;
    text-orientation: mixed;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.15s;
}
.workflow-editor .shot-transition-label:hover {
    color: #fbbf24;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .workflow-editor {
    flex-direction: column;
  }
  .we-sidebar {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
  }
  .we-canvas-container {
    min-height: 400px;
  }
  .we-properties {
    width: 100%;
    max-height: 300px;
  }
}

/* ==================== VISUAL / PREVIEW MODE ==================== */
/* When a node has a generated result, display as compact image thumbnail */
.workflow-editor .node.node-visual {
    width: auto;
    min-width: 120px;
    max-width: 280px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.08);
}

.workflow-editor .node.node-visual .node-visual-img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 80px;
    max-height: 200px;
    object-fit: cover;
    border-radius: 6px;
    pointer-events: none;
}

/* Hide the header and body in visual mode, show header on hover */
.workflow-editor .node.node-visual .node-header {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    padding: 20px 8px 4px;
    border: none;
    border-radius: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;
}

.workflow-editor .node.node-visual:hover .node-header {
    opacity: 1;
}

.workflow-editor .node.node-visual .node-header .node-header-title {
    font-size: 12px;
    color: white;
}

.workflow-editor .node.node-visual .node-header .node-header-icon {
    display: none;
}

.workflow-editor .node.node-visual .node-header .node-header-status {
    display: none;
}

.workflow-editor .node.node-visual .node-body {
    display: none;
}

.workflow-editor .node.node-visual .node-preview {
    display: none;
}

.workflow-editor .node.node-visual .node-run-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s;
}

.workflow-editor .node.node-visual:hover .node-run-btn {
    opacity: 1;
}

/* Keep ports visible as small dots on edges */
.workflow-editor .node.node-visual .port-dot {
    width: 8px;
    height: 8px;
}

.workflow-editor .node.node-visual .node-port-row {
    position: absolute;
    padding: 0;
    margin: 0;
}

.workflow-editor .node.node-visual .node-port-row.input {
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
}

.workflow-editor .node.node-visual .node-port-row.output {
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
}

.workflow-editor .node.node-visual .port-label {
    display: none;
}

/* Hover effect */
.workflow-editor .node.node-visual:hover {
    border-color: rgba(0, 114, 233, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Selected visual node */
.workflow-editor .node.node-visual.selected {
    border-color: rgba(0, 114, 233, 0.8);
    box-shadow: 0 0 12px rgba(0, 114, 233, 0.3);
}

/* Video play icon overlay */
.workflow-editor .node.node-visual-video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/16px no-repeat;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.workflow-editor .node.node-visual-video:hover::after {
    opacity: 0;
}

/* Video element needs pointer events for hover play */
.workflow-editor .node.node-visual-video .node-visual-img {
    pointer-events: auto;
}

/* Text nodes with content: compact text preview */
.workflow-editor .node[data-type="text"] .node-preview {
    max-height: 60px;
    overflow: hidden;
}

/* ==================== PLACEHOLDER PREVIEW ==================== */
/* Nodes with prompts but no results yet */
.workflow-editor .node.node-placeholder .node-placeholder-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    background: linear-gradient(135deg, rgba(0, 114, 233, 0.04), rgba(56, 189, 248, 0.03));
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    min-height: 60px;
    color: rgba(255, 255, 255, 0.2);
}

.workflow-editor .node.node-placeholder .node-placeholder-preview svg {
    opacity: 0.3;
}

.workflow-editor .node.node-placeholder .node-placeholder-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
    text-align: center;
    line-height: 1.3;
    max-width: 200px;
    word-break: break-word;
}

/* In placeholder mode, hide config but keep ports visible */
.workflow-editor .node.node-placeholder .node-body {
    padding: 2px 0;
}

/* Hide config rows but keep port rows */
.workflow-editor .node.node-placeholder .node-body .prop-row,
.workflow-editor .node.node-placeholder .node-body .node-preview,
.workflow-editor .node.node-placeholder .node-body .node-run-btn {
    display: none;
}

/* Show config on hover */
.workflow-editor .node.node-placeholder:hover .node-body .prop-row,
.workflow-editor .node.node-placeholder:hover .node-body .node-preview {
    display: flex;
}

/* Compact port labels in placeholder mode */
.workflow-editor .node.node-placeholder .port-label {
    font-size: 11px;
    opacity: 0.4;
}

/* Running state shimmer on placeholder */
.workflow-editor .node.node-placeholder.running .node-placeholder-preview {
    background: linear-gradient(110deg, rgba(0, 114, 233, 0.03) 0%, rgba(0, 114, 233, 0.1) 40%, rgba(0, 114, 233, 0.03) 60%);
    background-size: 200% 100%;
    animation: nodeShimmer 1.5s ease-in-out infinite;
}

@keyframes nodeShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}