<template>
  <section class="wf-demo-section" ref="sectionRef">
    <!-- 背景网格 -->
    <div class="wf-bg-grid"></div>
    <!-- 背景光晕 -->
    <div class="wf-bg-glow wf-bg-glow-1"></div>
    <div class="wf-bg-glow wf-bg-glow-2"></div>

    <div class="wf-demo-inner">
      <!-- 标题区 -->
      <div class="wf-demo-header" :class="{ visible: headerVisible }">
        <div class="wf-badge">
          <span class="wf-badge-dot"></span>
          <span>实时工作流演示</span>
        </div>
        <h2 class="wf-demo-title">
          看见 AI 如何
          <span class="wf-gradient-text">自动完成你的工作</span>
        </h2>
        <p class="wf-demo-desc">每一个节点都是一个智能决策，每一条连线都是数据的流动，工作流让复杂变得简单</p>
      </div>

      <!-- 主演示区 -->
      <div class="wf-canvas-wrap" :class="{ visible: canvasVisible }">
        <!-- 工具栏模拟 -->
        <div class="wf-toolbar">
          <div class="wf-toolbar-left">
            <div class="wf-toolbar-dot red"></div>
            <div class="wf-toolbar-dot yellow"></div>
            <div class="wf-toolbar-dot green"></div>
            <span class="wf-toolbar-title">workflow-canvas.baomiai.com</span>
          </div>
          <div class="wf-toolbar-right">
            <div class="wf-run-badge">
              <span class="wf-run-dot"></span>
              实时运行中
            </div>
          </div>
        </div>

        <!-- 画布区域 -->
        <div class="wf-canvas">
          <!-- 节点行布局 -->
          <div class="wf-flow-row">

            <!-- 节点1：触发器 -->
            <div class="wf-node wf-node-trigger" :class="{ pulse: activeNode === 0 }" @mouseenter="activeNode = 0" @mouseleave="activeNode = -1">
              <div class="wf-node-header" style="background: linear-gradient(135deg, #7C3AED, #8B5CF6)">
                <span class="wf-node-icon">⚡</span>
                <span class="wf-node-type">触发器</span>
              </div>
              <div class="wf-node-body">
                <div class="wf-node-title">新内容请求</div>
                <div class="wf-node-meta">
                  <span class="wf-node-status running">● 监听中</span>
                  <span class="wf-node-time">0.1s</span>
                </div>
                <div class="wf-node-tags">
                  <span class="wf-tag">Webhook</span>
                  <span class="wf-tag">HTTP</span>
                </div>
              </div>
            </div>

            <!-- 连线1 -->
            <div class="wf-connector">
              <div class="wf-connector-line"></div>
              <div class="wf-particle wf-particle-1"></div>
              <div class="wf-particle wf-particle-2"></div>
              <div class="wf-connector-arrow">›</div>
            </div>

            <!-- 节点2：AI 处理核心 -->
            <div class="wf-node wf-node-ai" :class="{ pulse: activeNode === 1 }" @mouseenter="activeNode = 1" @mouseleave="activeNode = -1">
              <div class="wf-node-header" style="background: linear-gradient(135deg, #2563EB, #3B82F6)">
                <span class="wf-node-icon">🤖</span>
                <span class="wf-node-type">AI 引擎</span>
              </div>
              <div class="wf-node-body">
                <div class="wf-node-title">GPT-4 处理</div>
                <div class="wf-node-meta">
                  <span class="wf-node-status processing">◉ 处理中</span>
                  <span class="wf-node-time">0.8s</span>
                </div>
                <div class="wf-node-tags">
                  <span class="wf-tag">GPT-4</span>
                  <span class="wf-tag">n8n</span>
                </div>
                <div class="wf-progress-bar">
                  <div class="wf-progress-fill"></div>
                </div>
              </div>
            </div>

            <!-- 连线2（分叉） -->
            <div class="wf-fork-connector">
              <div class="wf-fork-line-top"></div>
              <div class="wf-fork-line-bottom"></div>
              <div class="wf-fork-particle-top"></div>
              <div class="wf-fork-particle-bottom"></div>
            </div>

            <!-- 节点3+4 纵向排列 -->
            <div class="wf-node-column">
              <!-- 节点3：内容生成 -->
              <div class="wf-node wf-node-content" :class="{ pulse: activeNode === 2 }" @mouseenter="activeNode = 2" @mouseleave="activeNode = -1">
                <div class="wf-node-header" style="background: linear-gradient(135deg, #059669, #10B981)">
                  <span class="wf-node-icon">✍️</span>
                  <span class="wf-node-type">内容生成</span>
                </div>
                <div class="wf-node-body">
                  <div class="wf-node-title">文章批量生产</div>
                  <div class="wf-node-meta">
                    <span class="wf-node-status done">✓ 已完成</span>
                    <span class="wf-node-time">0.4s</span>
                  </div>
                  <div class="wf-node-tags">
                    <span class="wf-tag">Markdown</span>
                    <span class="wf-tag">SEO</span>
                  </div>
                </div>
              </div>

              <!-- 节点4：数据分析 -->
              <div class="wf-node wf-node-data" :class="{ pulse: activeNode === 3 }" @mouseenter="activeNode = 3" @mouseleave="activeNode = -1">
                <div class="wf-node-header" style="background: linear-gradient(135deg, #D97706, #F59E0B)">
                  <span class="wf-node-icon">📊</span>
                  <span class="wf-node-type">数据分析</span>
                </div>
                <div class="wf-node-body">
                  <div class="wf-node-title">效果追踪</div>
                  <div class="wf-node-meta">
                    <span class="wf-node-status running">● 分析中</span>
                    <span class="wf-node-time">0.3s</span>
                  </div>
                  <div class="wf-node-tags">
                    <span class="wf-tag">Analytics</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 连线3（合并） -->
            <div class="wf-merge-connector">
              <div class="wf-merge-line-top"></div>
              <div class="wf-merge-line-bottom"></div>
              <div class="wf-merge-particle-top"></div>
              <div class="wf-merge-particle-bottom"></div>
            </div>

            <!-- 节点5：多端发布 -->
            <div class="wf-node wf-node-publish" :class="{ pulse: activeNode === 4 }" @mouseenter="activeNode = 4" @mouseleave="activeNode = -1">
              <div class="wf-node-header" style="background: linear-gradient(135deg, #0F172A, #1E293B)">
                <span class="wf-node-icon">🚀</span>
                <span class="wf-node-type">多端发布</span>
              </div>
              <div class="wf-node-body">
                <div class="wf-node-title">一键分发</div>
                <div class="wf-node-meta">
                  <span class="wf-node-status done">✓ 已发布</span>
                  <span class="wf-node-time">0.05s</span>
                </div>
                <div class="wf-node-platforms">
                  <span class="wf-platform-dot" style="background:#07C160" title="微信"></span>
                  <span class="wf-platform-dot" style="background:#1677FF" title="飞书"></span>
                  <span class="wf-platform-dot" style="background:#FF6900" title="抖音"></span>
                  <span class="wf-platform-dot" style="background:#FE2C55" title="小红书"></span>
                </div>
              </div>
            </div>

          </div>

          <!-- 执行统计浮层 -->
          <div class="wf-exec-stats">
            <div class="wf-exec-item">
              <span class="wf-exec-label">总耗时</span>
              <span class="wf-exec-value">1.65s</span>
            </div>
            <div class="wf-exec-divider"></div>
            <div class="wf-exec-item">
              <span class="wf-exec-label">节点数</span>
              <span class="wf-exec-value">5</span>
            </div>
            <div class="wf-exec-divider"></div>
            <div class="wf-exec-item success">
              <span class="wf-exec-label">状态</span>
              <span class="wf-exec-value">✓ 成功</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部特性卡片 -->
      <div class="wf-features" :class="{ visible: featuresVisible }">
        <div
          class="wf-feature-card"
          v-for="(f, i) in features"
          :key="i"
          :style="{ transitionDelay: (i * 0.1) + 's' }"
        >
          <div class="wf-feature-icon" :style="{ background: f.bg }">{{ f.icon }}</div>
          <div class="wf-feature-text">
            <div class="wf-feature-title">{{ f.title }}</div>
            <div class="wf-feature-desc">{{ f.desc }}</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const sectionRef = ref(null)
const activeNode = ref(-1)
const headerVisible = ref(false)
const canvasVisible = ref(false)
const featuresVisible = ref(false)

const features = [
  { icon: '⚡', bg: 'linear-gradient(135deg,#7C3AED,#8B5CF6)', title: '毫秒级触发', desc: 'Webhook / 定时 / 事件驱动，响应延迟 < 100ms' },
  { icon: '🔀', bg: 'linear-gradient(135deg,#2563EB,#3B82F6)', title: '条件分支路由', desc: '支持 if/else、switch、并行分支等复杂逻辑' },
  { icon: '🤖', bg: 'linear-gradient(135deg,#059669,#10B981)', title: 'AI 节点内置', desc: 'GPT-4、Claude、Gemini 一键接入，无需配置' },
  { icon: '📡', bg: 'linear-gradient(135deg,#D97706,#F59E0B)', title: '400+ 集成节点', desc: '覆盖主流 SaaS、数据库、消息平台' },
  { icon: '📊', bg: 'linear-gradient(135deg,#0F172A,#334155)', title: '实时执行监控', desc: '每次执行全链路追踪，错误自动告警' },
  { icon: '🔒', bg: 'linear-gradient(135deg,#BE185D,#EC4899)', title: '企业级安全', desc: '私有化部署、数据加密、权限管控' },
]

let observer = null

onMounted(() => {
  observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        setTimeout(() => { headerVisible.value = true }, 100)
        setTimeout(() => { canvasVisible.value = true }, 400)
        setTimeout(() => { featuresVisible.value = true }, 800)
      }
    })
  }, { threshold: 0.1 })
  if (sectionRef.value) observer.observe(sectionRef.value)
})

onUnmounted(() => {
  if (observer) observer.disconnect()
})
</script>

<style scoped>
/* ===== 区块整体 ===== */
.wf-demo-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0a1a 0%, #0d0d2b 40%, #0a1628 70%, #0d0a1a 100%);
  padding: 100px 0 80px;
}

/* 背景网格 */
.wf-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(139,92,246,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* 背景光晕 */
.wf-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.wf-bg-glow-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
  top: -100px;
  left: -100px;
}
.wf-bg-glow-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
  bottom: -80px;
  right: -80px;
}

/* ===== 内容容器 ===== */
.wf-demo-inner {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== 标题区 ===== */
.wf-demo-header {
  text-align: center;
  margin-bottom: 56px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.wf-demo-header.visible {
  opacity: 1;
  transform: translateY(0);
}

.wf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 999px;
  padding: 6px 16px;
  color: #a78bfa;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 20px;
}
.wf-badge-dot {
  width: 7px;
  height: 7px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.wf-demo-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1.2;
  margin-bottom: 16px;
}
.wf-gradient-text {
  background: linear-gradient(135deg, #8b5cf6, #3b82f6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wf-demo-desc {
  font-size: 16px;
  color: #94a3b8;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ===== 画布包裹 ===== */
.wf-canvas-wrap {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.wf-canvas-wrap.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 工具栏 */
.wf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.wf-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-toolbar-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.wf-toolbar-dot.red { background: #ef4444; }
.wf-toolbar-dot.yellow { background: #f59e0b; }
.wf-toolbar-dot.green { background: #10b981; }
.wf-toolbar-title {
  font-size: 12px;
  color: #64748b;
  margin-left: 8px;
}
.wf-run-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  color: #34d399;
}
.wf-run-dot {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  animation: run-pulse 1.5s ease-in-out infinite;
}
@keyframes run-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ===== 画布内容 ===== */
.wf-canvas {
  padding: 40px 32px 32px;
  position: relative;
}

/* ===== 流程行布局 ===== */
.wf-flow-row {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 8px;
}

/* ===== 节点卡片 ===== */
.wf-node {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  overflow: hidden;
  width: 160px;
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}
.wf-node:hover,
.wf-node.pulse {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 20px rgba(139,92,246,0.2);
  border-color: rgba(139,92,246,0.4);
}
.wf-node-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.wf-node-icon {
  font-size: 16px;
}
.wf-node-type {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.5px;
}
.wf-node-body {
  padding: 10px 12px;
}
.wf-node-title {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 6px;
}
.wf-node-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.wf-node-status {
  font-size: 10px;
  font-weight: 500;
}
.wf-node-status.running { color: #34d399; }
.wf-node-status.processing { color: #60a5fa; }
.wf-node-status.done { color: #a78bfa; }
.wf-node-time {
  font-size: 10px;
  color: #64748b;
  font-family: monospace;
}
.wf-node-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.wf-tag {
  font-size: 9px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 2px 6px;
  color: #94a3b8;
}

/* 进度条 */
.wf-progress-bar {
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.wf-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 2px;
  animation: progress-run 2s ease-in-out infinite;
}
@keyframes progress-run {
  0% { width: 0%; }
  70% { width: 100%; }
  100% { width: 100%; }
}

/* 平台点 */
.wf-node-platforms {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.wf-platform-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}

/* ===== 连线：直线 ===== */
.wf-connector {
  position: relative;
  width: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wf-connector-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(139,92,246,0.6), rgba(59,130,246,0.6));
  transform: translateY(-50%);
}
.wf-connector-arrow {
  position: relative;
  z-index: 1;
  color: #60a5fa;
  font-size: 20px;
  line-height: 1;
  margin-left: 36px;
}

/* 粒子流动 */
.wf-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, #a78bfa, #8b5cf6);
  box-shadow: 0 0 8px #8b5cf6;
  animation: particle-flow 2s linear infinite;
}
.wf-particle-1 { animation-delay: 0s; }
.wf-particle-2 { animation-delay: 1s; }

@keyframes particle-flow {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}

/* ===== 分叉连线 ===== */
.wf-fork-connector {
  position: relative;
  width: 50px;
  flex-shrink: 0;
  height: 200px;
  display: flex;
  align-items: center;
}
.wf-fork-line-top,
.wf-fork-line-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(59,130,246,0.6), rgba(16,185,129,0.6));
}
.wf-fork-line-top {
  top: 25%;
  transform: rotate(-20deg);
  transform-origin: left center;
}
.wf-fork-line-bottom {
  bottom: 25%;
  transform: rotate(20deg);
  transform-origin: left center;
}
.wf-fork-particle-top,
.wf-fork-particle-bottom {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #60a5fa, #3b82f6);
  box-shadow: 0 0 6px #3b82f6;
}
.wf-fork-particle-top {
  top: 25%;
  animation: fork-top 1.8s linear infinite;
}
.wf-fork-particle-bottom {
  bottom: 25%;
  animation: fork-bottom 1.8s linear infinite 0.6s;
}
@keyframes fork-top {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 7px); opacity: 0; }
}
@keyframes fork-bottom {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 7px); opacity: 0; }
}

/* ===== 节点列（纵向排列） ===== */
.wf-node-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}

/* ===== 合并连线 ===== */
.wf-merge-connector {
  position: relative;
  width: 50px;
  flex-shrink: 0;
  height: 200px;
  display: flex;
  align-items: center;
}
.wf-merge-line-top,
.wf-merge-line-bottom {
  position: absolute;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(16,185,129,0.6), rgba(139,92,246,0.6));
}
.wf-merge-line-top {
  top: 25%;
  transform: rotate(20deg);
  transform-origin: right center;
}
.wf-merge-line-bottom {
  bottom: 25%;
  transform: rotate(-20deg);
  transform-origin: right center;
}
.wf-merge-particle-top,
.wf-merge-particle-bottom {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #34d399, #10b981);
  box-shadow: 0 0 6px #10b981;
}
.wf-merge-particle-top {
  top: 25%;
  animation: merge-flow 1.6s linear infinite 0.3s;
}
.wf-merge-particle-bottom {
  bottom: 25%;
  animation: merge-flow 1.6s linear infinite 1s;
}
@keyframes merge-flow {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 7px); opacity: 0; }
}

/* ===== 执行统计浮层 ===== */
.wf-exec-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 20px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.wf-exec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.wf-exec-item.success .wf-exec-value { color: #34d399; }
.wf-exec-label {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wf-exec-value {
  font-size: 14px;
  font-weight: 700;
  color: #e2e8f0;
  font-family: monospace;
}
.wf-exec-divider {
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,0.1);
}

/* ===== 底部特性卡片 ===== */
.wf-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.wf-features.visible {
  opacity: 1;
  transform: translateY(0);
}
.wf-features.visible .wf-feature-card {
  opacity: 1;
  transform: translateY(0);
}

.wf-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}
.wf-feature-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(139,92,246,0.3);
  transform: translateY(-2px) !important;
}

.wf-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.wf-feature-title {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 4px;
}
.wf-feature-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

/* ===== 响应式 ===== */
@media (max-width: 1100px) {
  .wf-flow-row {
    gap: 0;
  }
  .wf-node {
    width: 140px;
  }
  .wf-connector {
    width: 40px;
  }
  .wf-fork-connector,
  .wf-merge-connector {
    width: 36px;
  }
}

@media (max-width: 900px) {
  .wf-demo-section {
    padding: 70px 0 60px;
  }
  .wf-features {
    grid-template-columns: repeat(2, 1fr);
  }
  .wf-flow-row {
    justify-content: flex-start;
  }
  .wf-node {
    width: 130px;
  }
  .wf-connector {
    width: 32px;
  }
  .wf-fork-connector,
  .wf-merge-connector {
    width: 28px;
    height: 180px;
  }
}

@media (max-width: 640px) {
  .wf-demo-section {
    padding: 50px 0 40px;
  }
  .wf-canvas {
    padding: 24px 16px 20px;
  }
  .wf-features {
    grid-template-columns: 1fr;
  }
  .wf-node {
    width: 120px;
  }
  .wf-connector {
    width: 24px;
  }
  .wf-fork-connector,
  .wf-merge-connector {
    width: 22px;
    height: 160px;
  }
  .wf-exec-stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .wf-exec-divider {
    display: none;
  }
}

@media (max-width: 480px) {
  .wf-node {
    width: 105px;
  }
  .wf-node-type,
  .wf-node-title {
    font-size: 11px;
  }
  .wf-node-status,
  .wf-node-time,
  .wf-tag {
    font-size: 9px;
  }
  .wf-connector {
    width: 16px;
  }
  .wf-fork-connector,
  .wf-merge-connector {
    width: 16px;
    height: 140px;
  }
  .wf-toolbar-title {
    display: none;
  }
}
</style>
