/* ============================================================
 *  顶部「工作流」专区（印前预检那一排的下方，独立一行）
 *  所有已保存的工作流按顺序平铺，点一下即载入编辑/运行
 * ============================================================ */
.wfstrip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 11px 0 13px;
  background: linear-gradient(180deg, #171b22 0%, #111419 100%);
  border-bottom: 1px solid var(--bd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .028);
  user-select: none;
  position: relative;
  z-index: 19;
}
.wfstrip-title {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding-right: 11px;
  border-right: 1px solid var(--bd-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--tx-3);
}
.wfstrip-title svg { color: var(--accent); opacity: .85; }

.wfstrip-list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.wfstrip-list::-webkit-scrollbar { display: none; }

.wfstrip-empty { font-size: 11.5px; color: var(--tx-3); padding-left: 1px; }

.wf-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  color: var(--tx-2);
  font-size: 11.5px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.wf-chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--tx);
}
.wf-chip:active { transform: translateY(1px); }
.wf-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-chip-meta {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--tx-3);
}
.wf-chip.builtin .wf-chip-meta { color: var(--purple); }

/* 「＋ 新增」固定在最前面：横向滚动时始终钉在左侧 */
.wf-chip-add {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-elev);
  border-style: dashed;
  border-color: var(--bd-strong);
  color: var(--tx-3);
  gap: 0;
  box-shadow: 7px 0 9px -6px rgba(0, 0, 0, .7);
}
.wf-chip-add:hover {
  border-color: var(--accent-line);
  color: var(--accent-2);
}

/* 点击胶囊 = 立即执行：跑起来时胶囊高亮、列表暂时点不动，避免重复触发 */
.wf-chip.running {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-2);
}
.wfstrip-list.busy { pointer-events: none; }
.wfstrip-list.busy .wf-chip { opacity: .55; }
.wfstrip-list.busy .wf-chip.running { opacity: 1; }

/* 专区下沿的运行进度细线 */
.wfstrip-runbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease);
}
.wfstrip-runbar.on { opacity: 1; }
.wfstrip-runbar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), #7db1ff);
  box-shadow: 0 0 7px rgba(74, 144, 255, .65);
  transition: width .2s linear;
}

.wfstrip-manage {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 13px;
  background: transparent;
  border: 1px dashed var(--bd-strong);
  color: var(--tx-3);
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.wfstrip-manage:hover {
  color: var(--accent-2);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

/* ============================================================
 *  工作流编排面板
 *  只作用于 #wfModal 内部，不改动既有界面
 * ============================================================ */

.modal.wf-modal .modal-box {
  width: 1160px;
  max-width: calc(100vw - 24px);
  /* 高度 = 「顶栏以下的可视高度」减去 60px 余量（给底栏/状态栏让位）。
   *
   * 只有下限 420px，**不设上限**。
   *
   * 下限 420px：矮窗口（如 1024×600）下标题栏、列头、底栏都还在，不会挤成一团；
   *   没有它，40+34+46+76 这几条固定高度的条会先把空间吃光，中间步骤列表被压成 0 高。
   *
   * 为什么不设上限（v1.0.75 的决定）：
   *   1. 上限本来是为了「别让面板拉太长、行与行隔太远」。但这条在这个面板上不成立 ——
   *      步骤行是约 49px 的固定高度 flex 子项，装在可滚动的 .wf-steps-list 里，
   *      面板变高只是**多显示几行**，行本身不会被拉开。上限的理由只剩「观感别太夸张」。
   *   2. 而弹窗是贴顶的固定高度盒子（margin 上 --mtop、下 20px），一旦被上限夹住，
   *      剩下的纵向空间必然露在面板下方（被遮罩压暗的应用界面）。
   *      也就是说：**「有固定上限」和「下面不留白」在数学上互斥，只能二选一。**
   *   3. 拿一个纯粹的观感担忧去换一个实实在在的留白问题，不划算。所以不设上限，
   *      4K@100% 上面板会到 2033px —— 工作流编排本来就是大面板，四五十步要排，
   *      给足高度是应该的（且该档位在 Windows 上几乎不存在，默认 150%/200% 缩放）。
   *
   * ⚠️ 历史坑（客户报的「界面整体缩小约一半」就是它）：
   *   这里原来是 clamp(420px, calc(100vh - var(--mtop) - 60px), **780px**)，
   *   780px 是写死的死上限。窗口超过约 967px 高之后面板就不再长高；
   *   界面缩到 50% 时 100vh 在 CSS 像素里翻倍成 1800，理想高度 1673px 被夹到 780px，
   *   780 / 1673 = 46.6% —— 正好是客户说的「缩小约一半」，
   *   中间步骤列表也被死死压在 492px 里，新增的步骤只能靠滚动才看得到。
   *
   * 详见 docs/工作流面板布局改造规划.md 第十一节。 */
  height: max(420px, calc(100vh - var(--mtop, 104px) - 60px));
}

.wf-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* 三栏主体：仓库 / 步骤 / 参数 */
.wf-cols {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- 三个内滚区共用同一套可见滚动条 ----------
 * 左栏动作库(.wf-lib-list) / 中间步骤列表(.wf-steps-list) / 右栏参数(.wf-edit)
 * 都是「内容可能超出一屏」的内滚区，外观必须一致：同一界面里三个滚动区
 * 一个粗两个细比全都细更难看，所以统一抽到 .wf-scroll 这一处，三块同时生效。
 *
 * 为什么不能靠默认值：全局 styles.css:87 只给 9px 宽 + rgba(255,255,255,.16) 滑块，
 * 压在深色底上就是一根发丝，等于没有「这里能滚」的提示 —— 客户报的
 * 「需补充侧边上下滑动的滚动机制」有一半就是这个观感问题。
 *
 * 改这里的宽度务必同步：.wf-steps-head / .wf-step-cols 的右内边距（23px = 10 + 6 + 6 + 1），
 * 否则步骤列头会跟行错位。
 *
 * ⚠️ 这里**故意没有** scrollbar-gutter: stable，别"顺手统一"：
 *   scrollbar-gutter 是**布局**属性（永久占用滚动条宽度），不是**外观**属性。
 *   只有 .wf-steps-list 需要它 —— 因为它上面压着一行列头（.wf-step-cols），
 *   滚动条一出现/消失会让行宽变化 10px、列头就跟行错位（历史上错过 16px）。
 *   另两个没有这个需求：
 *     · .wf-lib-list 所在左栏总共才 189px 宽，永久占掉 10px 等于白白挤窄动作名；
 *     · .wf-edit 自己就是右栏，没有需要对齐的上层表格。
 *   所以 scrollbar-gutter: stable 单独写在 .wf-steps-list 上，不进这个共用块。 */
.wf-scroll {
  scrollbar-width: thin;                                   /* Firefox / 标准属性 */
  scrollbar-color: rgba(255, 255, 255, .26) transparent;
}
.wf-scroll::-webkit-scrollbar { width: 10px; }
.wf-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .05);
  border-radius: 5px;
}
.wf-scroll::-webkit-scrollbar-thumb {
  /* 最小 36px：列表很短时滑块也不至于缩成一个点，鼠标抓得住 */
  min-height: 36px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .26);
  border: 2px solid transparent;
  background-clip: content-box;                            /* 10px 轨道里画 6px 滑块 */
}
.wf-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .46);
  background-clip: content-box;
}
.wf-scroll::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, .58);
  background-clip: content-box;
}

/* ---------- 左：动作库（1 份宽） ---------- */
.wf-lib {
  flex: 1 1 0;
  min-width: 166px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--bd-soft);
  background: rgba(0, 0, 0, .12);
}
.wf-lib-head {
  flex: 0 0 auto;
  padding: 6px;
  border-bottom: 1px solid var(--bd-soft);
}

/* 搜索框 */
.wf-search { position: relative; display: flex; align-items: center; }
.wf-search input {
  width: 100%;
  height: 26px;
  padding: 0 22px 0 23px;
  font-size: 11.5px;
  color: var(--tx);
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-radius: 6px;
  outline: none;
}
.wf-search input:focus { border-color: var(--accent-line); }
.wf-search input::placeholder { color: var(--tx-3); font-size: 11px; }
.wf-search-ico {
  position: absolute;
  left: 7px;
  font-size: 10px;
  color: var(--tx-3);
  pointer-events: none;
}
.wf-search-x {
  position: absolute;
  right: 4px;
  width: 17px; height: 17px;
  display: none;
  align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  color: var(--tx-3);
  background: transparent;
  border: 0; border-radius: 4px;
  cursor: pointer;
}
.wf-search.has-q .wf-search-x { display: flex; }
.wf-search-x:hover { color: var(--tx); background: var(--bg-hover); }

.wf-lib-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 2px 6px 10px;
}

/* 动作卡片 */
.wf-act-group {
  padding: 9px 4px 3px;
  font-size: 9.5px;
  color: var(--tx-3);
  letter-spacing: .5px;
}
.wf-act {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 6px 4px 5px;
  margin-bottom: 1px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
}
.wf-act:hover { background: var(--bg-hover); border-color: var(--bd); }
.wf-act:active { transform: scale(.985); }
.wf-act-plus {
  flex: 0 0 15px;
  width: 15px; height: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  color: var(--tx-3);
  border-radius: 4px;
  transition: color .12s, background .12s;
}
.wf-act:hover .wf-act-plus { color: var(--accent-2); background: rgba(120, 170, 255, .16); }
.wf-act-main { flex: 1 1 auto; min-width: 0; }
.wf-act-name {
  font-size: 11.5px;
  color: var(--tx);
  line-height: 1.28;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-act-meta {
  font-size: 9.5px;
  color: var(--tx-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-act-used { color: var(--accent-2); }
.wf-act mark {
  background: rgba(255, 200, 80, .26);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.wf-tag {
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .07);
  color: var(--tx-2);
  font-size: 9.5px;
}
.wf-tag.builtin { background: rgba(172, 130, 255, .16); color: var(--purple); }

/* ---------- 中：步骤列表（2 份宽） ---------- */
.wf-steps {
  flex: 2 1 0;
  min-width: 288px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--bd-soft);
}
.wf-steps-head {
  flex: 0 0 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 23px 0 10px;
  font-size: 11px;
  color: var(--tx-3);
  border-bottom: 1px solid var(--bd-soft);
  letter-spacing: .2px;
}
.wf-count { font-size: 10px; color: var(--tx-3); }

.wf-steps-list {
  flex: 1 1 auto;
  /* 必须显式写 min-height: 0 —— flex 子项默认 min-height: auto（= 内容高，不收缩），
     中间一多就把容器撑高、被 .wf-steps 裁掉，自身永远不出现滚动条。
     这是「overflow 写了却不滚」最常见的那一环，不能靠依赖默认值兜着。 */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 6px 10px;
  /* 滚动条永久占位：有没有滚动条，内容的可用宽度都一致，
     列表不会在「加满一屏」的瞬间横向抖一下，上方列头也才能跟行稳定对齐
     （占位宽度 = .wf-scroll 里 ::-webkit-scrollbar 的 10px，列头已按此补偿内边距）。
     这一条**只写在这里**，故意不放进共用的 .wf-scroll —— 原因见那个块的注释。 */
  scrollbar-gutter: stable;
  /* 滚到底不要把手感甩给父容器/页面，滚轮一下只滚这个列表 */
  overscroll-behavior: contain;
}

.wf-empty {
  padding: 26px 14px;
  text-align: center;
  font-size: 11.5px;
  color: var(--tx-3);
  line-height: 1.7;
}

.wf-step {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 6px 6px 4px;
  border: 1px solid var(--bd-soft);
  border-radius: 7px;
  margin-bottom: 5px;
  background: var(--bg-elev);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.wf-step:hover { border-color: var(--bd-strong); }
.wf-step.on { border-color: var(--accent-line); background: var(--accent-soft); }
.wf-step.off { opacity: .45; }
.wf-step.cur { box-shadow: 0 0 0 1px var(--green) inset; }

/* 序号输入：改数字就是改顺序 */
.wf-no {
  flex: 0 0 30px;
  width: 30px;
  height: 22px;
  text-align: center;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 5px;
  outline: none;
  -moz-appearance: textfield;
}
.wf-no::-webkit-inner-spin-button,
.wf-no::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wf-no:hover { border-color: var(--bd-strong); }
.wf-no:focus { border-color: var(--accent-line); box-shadow: 0 0 0 2px rgba(91, 140, 255, .14); }

.wf-step-main { flex: 1 1 auto; min-width: 0; }
.wf-step-top {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--tx);
}
.wf-step-grp {
  font-size: 9.5px;
  color: var(--tx-3);
  border: 1px solid var(--bd);
  border-radius: 3px;
  padding: 0 3px;
}
.wf-step-sum {
  margin-top: 2px;
  font-size: 10px;
  color: var(--tx-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-step-note {
  margin-top: 2px;
  font-size: 10px;
  color: var(--orange);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-step-ops {
  flex: 0 0 auto;
  display: flex;
  gap: 1px;
}
.wf-step-ops button {
  width: 19px;
  height: 19px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  background: transparent;
  color: var(--tx-3);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.wf-step-ops button:hover { background: var(--bg-active); color: var(--tx); }
.wf-step-ops button.del:hover { background: var(--red-soft); color: var(--red); }

/* ---------- 步骤名称列（在动作名前面，行内可改） ---------- */
.wf-alias {
  flex: 0 0 84px;
  width: 84px;
  height: 22px;
  padding: 0 5px;
  font-size: 10.5px;
  color: var(--orange);
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 5px;
  outline: none;
  text-overflow: ellipsis;
}
.wf-alias::placeholder { color: var(--tx-3); font-size: 9.5px; }
.wf-alias:hover { border-color: var(--bd); background: var(--bg); }
.wf-alias:focus {
  border-color: var(--accent-line);
  border-style: solid;
  background: var(--bg);
  color: var(--tx);
}

/* 列头：让「序号 / 这一步做什么 / 动作·参数」三段一眼分清
   左内边距 = .wf-steps-list(6px) + .wf-step(4px) = 10px，否则表头会左偏；
   右内边距 = 滚动条占位(10px) + .wf-steps-list(6px) + .wf-step(6px) + 行边框(1px) = 23px，
   否则右侧 79px 的操作列会比行里的 ✕ 按钮整体右移 16px（滚动条一出现就露馅） */
.wf-step-cols {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 0 23px 4px 10px;
  font-size: 9px;
  color: var(--tx-3);
  letter-spacing: .3px;
}
.wf-step-cols .c-grip { flex: 0 0 14px; }
.wf-step-cols .c-no { flex: 0 0 30px; text-align: center; }
.wf-step-cols .c-alias { flex: 0 0 84px; }
.wf-step-cols .c-act { flex: 1 1 auto; }
.wf-step-cols .c-ops { flex: 0 0 79px; text-align: right; }

/* 步骤区底部提示（拖拽 / 加动作说明） */
.wf-steps-foot {
  flex: 0 0 auto;
  padding: 5px 10px 6px;
  font-size: 9.5px;
  color: var(--tx-3);
  border-top: 1px solid var(--bd-soft);
  line-height: 1.5;
}

/* ---------- 右：参数（3 份宽） ---------- */
.wf-edit {
  flex: 3 1 0;
  min-width: 336px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 12px 14px 14px;
}
.wf-field { margin-bottom: 9px; }
.wf-field > label {
  display: block;
  font-size: 10.5px;
  color: var(--tx-3);
  margin-bottom: 4px;
}
.wf-row2 { display: flex; gap: 10px; }
.wf-row2 .wf-field { flex: 1 1 0; }
.wf-field .inp { width: 100%; }

.wf-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--tx-2);
  margin: 4px 0 10px;
  cursor: pointer;
}
.wf-check input { accent-color: var(--accent); }

.wf-sep {
  height: 1px;
  background: var(--bd-soft);
  margin: 10px 0;
}

.wf-step-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--tx);
  margin-bottom: 9px;
}
.wf-step-title .hint {
  font-size: 10px;
  color: var(--tx-3);
  font-weight: 400;
}

.wf-params-tip {
  font-size: 11px;
  color: var(--tx-3);
  padding: 14px 0;
  line-height: 1.7;
}

/* ---------- 参数区底部「保存修改」条（始终钉在底部） ----------
 * 每一步的参数改完就能就地保存，不用滚回顶部找按钮，
 * 避免改完一堆参数忘了存、误关面板丢改动。 */
.wf-edit-foot {
  position: sticky;
  bottom: -14px;                 /* 抵消 .wf-edit 的 14px 下内边距 */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px -14px -14px;
  padding: 9px 14px;
  background: var(--bg-panel);
  border-top: 1px solid var(--bd);
  box-shadow: 0 -8px 14px -10px rgba(0, 0, 0, .9);
}
.wf-foot-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--tx-3);
}
.wf-foot-hint.dirty { color: #e8a94a; }
.wf-edit-foot .btn { flex: 0 0 auto; }
.wf-edit-foot .btn.primary:not(.is-dirty) { opacity: .66; }

/* 页码范围三选项复用 .seg-form / .sf-btn */
.wf-pages-line { display: flex; gap: 6px; align-items: center; }
.wf-pages-line .inp { flex: 1 1 auto; min-width: 0; }

/* 运行日志：整幅横条，运行时始终可见 */
.wf-log {
  flex: 0 0 76px;
  height: 76px;
  padding: 6px 12px;
  overflow-y: auto;
  background: var(--bg-stage);
  border-top: 1px solid var(--bd-soft);
  font-size: 10.5px;
  line-height: 1.65;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--tx-2);
}
.wf-log-line { white-space: pre-wrap; word-break: break-all; }
.wf-log-line.lv-ok { color: var(--green); }
.wf-log-line.lv-err { color: var(--red); }
/* 跳过：与失败同色（红），但语义是「没执行」，文案里带原因 */
.wf-log-line.lv-skip { color: var(--red); }
.wf-log-line.lv-warn { color: var(--orange); }
.wf-log-line.lv-file { color: var(--accent-2); }
.wf-log-empty { color: var(--tx-3); }

/* ---------- 底栏 ---------- */
.wf-progress {
  flex: 1 1 auto;
  height: 4px;
  margin-right: 10px;
  background: rgba(255, 255, 255, .07);
  border-radius: 3px;
  overflow: hidden;
}
.wf-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .18s var(--ease);
}
.wf-status {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--tx-3);
  margin-right: 10px;
  white-space: nowrap;
}

/* ============================================================
 *  v1.2 布局改造：顶部工作流工具条
 *  「我的工作流」从左侧搬到顶部，左侧腾给动作库
 * ============================================================ */
.wf-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--bd-soft);
  background: rgba(0, 0, 0, .10);
}
.wf-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.wf-flow > label {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--tx-3);
}
.wf-flow select {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  font-size: 11.5px;
}
.wf-tb-btn {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 9px;
  font-size: 11px;
  color: var(--tx-2);
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.wf-tb-btn:hover:not(:disabled) { color: var(--tx); border-color: var(--bd-strong); }
.wf-tb-btn:disabled { opacity: .4; cursor: not-allowed; }
.wf-tb-btn.danger:hover:not(:disabled) { color: var(--red); border-color: var(--red); }
.wf-tb-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 15px;
  background: var(--bd);
  margin: 0 2px;
}
.wf-tb-info {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--tx-3);
  white-space: nowrap;
}
.wf-tb-info.dirty { color: var(--orange); }

/* 右侧名称提级：字号加大 + 保存状态徽标 */
.wf-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.wf-name-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--tx);
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-radius: 7px;
  outline: none;
}
.wf-name-row input:focus { border-color: var(--accent-line); }
.wf-state {
  flex: 0 0 auto;
  padding: 2px 6px;
  font-size: 9.5px;
  color: var(--tx-3);
  background: rgba(255, 255, 255, .06);
  border-radius: 4px;
  white-space: nowrap;
}
.wf-state.dirty { color: var(--orange); background: rgba(255, 160, 60, .16); }
.wf-state.saved { color: var(--green); background: rgba(90, 200, 120, .14); }

/* ---------- 步骤行：拖拽手柄 ---------- */
.wf-step { position: relative; }
.wf-grip {
  flex: 0 0 14px;
  width: 14px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  opacity: .55;
  transition: opacity .12s;
}
/* 用 box-shadow 画 2×3 点阵：字符 ⋮ 和渐变点在部分渲染环境下看不清 */
.wf-grip::before {
  content: '';
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--tx-2);
  box-shadow:
    0 4px 0 var(--tx-2),
    0 8px 0 var(--tx-2),
    5px 0 0 var(--tx-2),
    5px 4px 0 var(--tx-2),
    5px 8px 0 var(--tx-2);
  transform: translate(-2px, -3px);
}
.wf-step:hover .wf-grip { opacity: 1; }
.wf-step:hover .wf-grip::before {
  background: var(--accent-2);
  box-shadow:
    0 4px 0 var(--accent-2),
    0 8px 0 var(--accent-2),
    5px 0 0 var(--accent-2),
    5px 4px 0 var(--accent-2),
    5px 8px 0 var(--accent-2);
}
.wf-grip:active { cursor: grabbing; }

/* 拖动中与插入指示线 */
.wf-step.dragging { opacity: .3; }
.wf-step.drop-before::before,
.wf-step.drop-after::after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-2);
  box-shadow: 0 0 6px rgba(120, 170, 255, .75);
}
.wf-step.drop-before::before { top: -2px; }
.wf-step.drop-after::after { bottom: -2px; }

/* 搜索无结果 */
.wf-search-empty {
  padding: 20px 10px;
  text-align: center;
  font-size: 10.5px;
  color: var(--tx-3);
  line-height: 1.75;
}
.wf-search-empty code {
  padding: 1px 4px;
  font-size: 10px;
  background: rgba(255, 255, 255, .08);
  border-radius: 3px;
}