/* Flow editor — node canvas. Dark mode follows the `dark` class on <html>. */
.fe-root {
    --fe-bg: #f6f6f8;
    --fe-grid: #d9d9e0;
    --fe-node: #ffffff;
    --fe-node-border: #e2e2e8;
    --fe-text: #18181b;
    --fe-muted: #71717a;
    --fe-field: #f4f4f5;
    --fe-accent: #9333ea;
    --fe-text-port: #0ea5e9;
    --fe-image-port: #ec4899;
    --fe-edge: #a1a1aa;
    --fe-error: #dc2626;
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 190px);
    min-height: 480px;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--fe-node-border);
    background: var(--fe-bg);
    color: var(--fe-text);
    font-size: 13px;
}
.dark .fe-root {
    --fe-bg: #0c0c10;
    --fe-grid: #26262e;
    --fe-node: #18181d;
    --fe-node-border: #2e2e36;
    --fe-text: #f4f4f5;
    --fe-muted: #a1a1aa;
    --fe-field: #222228;
    --fe-edge: #52525b;
}

.fe-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--fe-node);
    border-bottom: 1px solid var(--fe-node-border);
    z-index: 2;
}
.fe-toolbar .fe-sep { width: 1px; height: 20px; background: var(--fe-node-border); margin: 0 4px; }
.fe-toolbar .fe-spacer { flex: 1; }
.fe-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--fe-node-border);
    background: var(--fe-node);
    color: var(--fe-text);
    font-weight: 500;
    cursor: pointer;
}
.fe-btn:hover { background: var(--fe-field); }
.fe-btn:disabled { opacity: .5; cursor: not-allowed; }
.fe-btn svg { width: 15px; height: 15px; }
.fe-btn.fe-primary {
    background: linear-gradient(90deg, #9333ea, #db2777);
    border-color: transparent;
    color: #fff;
}
.fe-btn.fe-primary:hover { filter: brightness(1.08); }

.fe-canvas {
    position: relative;
    flex: 1;
    overflow: hidden;
    cursor: grab;
    background-image: radial-gradient(var(--fe-grid) 1px, transparent 1px);
    touch-action: none;
}
.fe-canvas.fe-panning { cursor: grabbing; }
.fe-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.fe-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.fe-edge { fill: none; stroke: var(--fe-edge); stroke-width: 2; pointer-events: none; }
.fe-edge.fe-text { stroke: var(--fe-text-port); }
.fe-edge.fe-image { stroke: var(--fe-image-port); }
.fe-edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; pointer-events: stroke; }
.fe-edge-hit:hover + .fe-edge { stroke: var(--fe-error); stroke-dasharray: 6 4; }
.fe-edge.fe-temp { stroke-dasharray: 6 4; }

.fe-node {
    position: absolute;
    width: 260px;
    background: var(--fe-node);
    border: 1px solid var(--fe-node-border);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
    cursor: default;
}
.fe-node.fe-selected { border-color: var(--fe-accent); box-shadow: 0 0 0 2px rgba(147, 51, 234, .25), 0 6px 20px rgba(0, 0, 0, .1); }
.fe-node.fe-wide { width: 300px; }
.fe-node-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--fe-node-border);
    font-weight: 600;
    cursor: move;
    user-select: none;
}
.fe-node-header svg { width: 15px; height: 15px; color: var(--fe-accent); }
.fe-node-header .fe-title { flex: 1; }
.fe-node-header .fe-badge {
    font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 99px;
    background: var(--fe-field); color: var(--fe-muted);
}
.fe-icon-btn {
    display: inline-flex; padding: 3px; border-radius: 6px; border: 0;
    background: transparent; color: var(--fe-muted); cursor: pointer;
}
.fe-icon-btn:hover { background: var(--fe-field); color: var(--fe-text); }
.fe-icon-btn svg { width: 14px; height: 14px; color: inherit; }

.fe-node-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.fe-node-body label { font-size: 11px; font-weight: 600; color: var(--fe-muted); display: block; margin-bottom: 3px; }
.fe-node-body textarea,
.fe-node-body select,
.fe-node-body input[type=number] {
    width: 100%;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--fe-node-border);
    background: var(--fe-field);
    color: var(--fe-text);
    font: inherit;
}
.fe-node-body textarea { resize: vertical; min-height: 80px; }
.fe-row { display: flex; gap: 8px; }
.fe-row > * { flex: 1; min-width: 0; }

.fe-ports { display: flex; justify-content: space-between; padding: 8px 0 4px; }
.fe-port-col { display: flex; flex-direction: column; gap: 8px; }
.fe-port-col.fe-out { align-items: flex-end; }
.fe-port-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fe-muted); height: 16px; }
.fe-port {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--fe-node);
    box-shadow: 0 0 0 1px var(--fe-node-border);
    cursor: crosshair;
    flex: none;
}
.fe-port.fe-text { background: var(--fe-text-port); }
.fe-port.fe-image { background: var(--fe-image-port); }
.fe-port:hover, .fe-port.fe-drop-ok { transform: scale(1.35); }
.fe-port-col.fe-in .fe-port { margin-left: -8px; }
.fe-port-col.fe-out .fe-port { margin-right: -8px; }

.fe-drop {
    border: 2px dashed var(--fe-node-border);
    border-radius: 10px;
    min-height: 120px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--fe-muted);
    cursor: pointer; overflow: hidden;
}
.fe-drop:hover, .fe-drop.fe-over { border-color: var(--fe-accent); }
.fe-drop img, .fe-result img { display: block; max-width: 100%; max-height: 260px; margin: 0 auto; }
.fe-result { border-radius: 10px; background: var(--fe-field); min-height: 60px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--fe-muted); }
.fe-checker {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e4e4e7 25%, transparent 25%, transparent 75%, #e4e4e7 75%),
        linear-gradient(45deg, #e4e4e7 25%, transparent 25%, transparent 75%, #e4e4e7 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}
.fe-node-body .fe-check {
    display: flex; align-items: center; gap: 6px; margin: 0;
    font-size: 12px; font-weight: 500; color: var(--fe-text); cursor: pointer;
}
.fe-hint-inline { font-size: 11px; color: var(--fe-muted); }
.fe-status { font-size: 11px; color: var(--fe-muted); display: flex; align-items: center; gap: 6px; }
.fe-status.fe-error { color: var(--fe-error); }
.fe-status.fe-warn { color: #d97706; }
.fe-spinner {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--fe-node-border); border-top-color: var(--fe-accent);
    animation: fe-spin .8s linear infinite;
}
@keyframes fe-spin { to { transform: rotate(360deg); } }

.fe-hint {
    position: absolute; left: 12px; bottom: 10px;
    font-size: 11px; color: var(--fe-muted); pointer-events: none;
}