[v-cloak] { display: none; }
.canvas-container { background-image: radial-gradient(#374151 1px, transparent 1px); background-size: 20px 20px; background-color: #1f2937; width: 100%; height: 100%; overflow: hidden; position: relative; cursor: grab; }
.canvas-container:active { cursor: grabbing; }

.flow-node { position: absolute; width: 280px; background: white; border-radius: 6px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); z-index: 10; user-select: none; transition: box-shadow 0.2s; }
.flow-node:hover { box-shadow: 0 0 0 2px #3b82f6; }

.flow-node.ghost-node { background: #1f2937; border: 2px dashed #6b7280; color: #9ca3af; opacity: 0.9; cursor: alias; }
.flow-node.ghost-node .node-header { background: #374151; color: #d1d5db; }
.flow-node.ghost-node:hover { border-color: #3b82f6; color: white; }

/* 节点类型样式 */
.flow-node.library-node { border: 2px solid #f59e0b; }
.flow-node.global_faq_node { border: 2px solid #10b981; background-color: #ecfdf5; }
.flow-node.global_faq_node .node-header { background-color: #059669; }
.flow-node.intent_node { border: 2px solid #8b5cf6; background-color: #f5f3ff; }
.flow-node.intent_node .node-header { background-color: #7c3aed; }

/* 连线 */
.connections-layer { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; }
path { fill: none; stroke: #9ca3af; stroke-width: 2px; }
path.route { stroke: #a855f7; } 
path.ghost { stroke: #6b7280; stroke-dasharray: 4,4; } 

/* 滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1f2937; }
::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 3px; }

/* 标签页 */
.tab-active { background: #1f2937; border-top: 2px solid #3b82f6; color: white; }
.tab-inactive { background: #111827; color: #9ca3af; border-bottom: 1px solid #374151; opacity: 0.7; }
.tab-inactive:hover { opacity: 1; background: #1f2937; }