/* ===================== 无限画布 · 工作台 ===================== */

/* ---------------------------------------------------------------------------
   `hidden` 属性必须永远生效（务必保留）
   本项目大量元素的 display 由类选择器指定（.wf-body{display:grid}、
   .panel-body{display:flex}、.wf-lock{display:flex} …），其优先级高于浏览器
   对 [hidden] 的默认 display:none，会出现「设了 hidden 却照样显示」。
   典型症状：激活成功后，锁屏与工作区同时出现；工具箱未授权时露出工具列表。
   这里统一兜底，避免以后再踩。
   --------------------------------------------------------------------------- */
[hidden] { display: none !important; }

:root {
  /* 画布：纯黑底 + 深色网格 */
  --bg-app: #0a0b0d;
  /* 画布底色：取自参考图实测值 —— #141414 占 67% 原图像素，是纯色不是渐变。
     原来是 #0a0b0d（偏黑偏蓝），比参考图暗约 7 个灰阶。 */
  --bg-canvas: #141414;
  --grid-line: rgba(255, 255, 255, 0.055);
  --grid-line-strong: rgba(255, 255, 255, 0.11);

  /* 面板与节点：比画布略亮，形成层次 */
  --bg-panel: #16181d;
  --bg-node: #1a1d23;
  --bg-node-head: #1f232a;
  --bg-input: #21252c;
  --bg-hover: #262b33;
  /* 右键菜单用半透明底 + 背景模糊，层次感更好 */
  --bg-menu-glass: rgba(24, 27, 33, 0.93);

  --border: #2b3038;
  --border-strong: #3a414b;

  --text-primary: #e8eaed;
  --text-muted: #8b94a3;
  --text-faint: #5f6875;

  --accent: #17a2a8;
  --accent-hover: #1fb8bf;
  --accent-soft: rgba(23, 162, 168, 0.14);
  --accent-line: rgba(23, 162, 168, 0.42);
  --accent-glow: rgba(23, 162, 168, 0.3);

  --danger: #ff5c5c;
  --danger-soft: rgba(255, 92, 92, 0.14);
  --warn: #ffa53d;
  --success: #2ecc8f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.62);
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

/* ===================== 工具栏 ===================== */

.toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  background: rgba(18, 20, 24, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 18px;
  border-right: 1px solid var(--border);
  height: 30px;
}

.brand-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #14a0a5);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.brand-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* 版本小标：让人一眼知道自己在跑哪一版（排查问题时直接报这个号） */
.brand-ver {
  margin-left: 2px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
}

/* 开发环境没有版本号，别留个空胶囊占位 */
.brand-ver:empty { display: none; }

.tool-group {
  display: flex;
  align-items: center;
  gap: 7px;
}

.tool-group.right { margin-left: auto; }

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 37px;
  padding: 0 14px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-node);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s ease;
}

.tool-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.tool-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #06202a;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.tool-btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #06202a;
}

.tb-icon { font-size: 14.5px; line-height: 1; }

/* 批量生成进度徽标：只在批量跑的时候露出来 */
.tb-badge {
  margin-left: 2px;
  padding: 1px 6px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
}
.tb-badge[hidden] { display: none; }

/* 窄屏：收紧工具栏，必要时只留图标 */
@media (max-width: 1080px) {
  .brand-name { display: none; }
  .brand { padding-right: 0; border-right: none; }
  .toolbar { gap: 8px; padding: 0 10px; }
  .tool-btn { padding: 0 9px; }
  .zoom-label { min-width: 34px; }
}

@media (max-width: 880px) {
  .tool-btn .tb-label { display: none; }
  .tool-btn { gap: 0; padding: 0 10px; }
}

.zoom-cluster {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg-node);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
}

.icon-btn-lg {
  width: 32px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 16px;
  font-family: inherit;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.14s ease;
}

.icon-btn-lg:hover { background: var(--accent-soft); color: var(--accent); }

.zoom-label {
  min-width: 52px;
  text-align: center;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  user-select: none;
}

/* ===================== 画布 ===================== */

.canvas {
  position: fixed;
  inset: 60px 0 0 0;
  overflow: hidden;
  background-color: var(--bg-canvas);
  /* 两级网格：细线 24px，粗线 120px（每 5 格），在纯黑底上层次更清晰 */
  background-image:
    linear-gradient(var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  cursor: default;
  touch-action: none;
  user-select: none;
}

.canvas.panning { cursor: grabbing; }
.canvas.space-pan { cursor: grab; }

.world {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.edges {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}

.edges .edge {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.55;
}

.edges .edge.temp {
  stroke-dasharray: 6 5;
  opacity: 0.9;
  stroke-width: 2.5;
}

.nodes { position: absolute; top: 0; left: 0; }

.canvas-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 16px;
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(22, 24, 29, 0.86);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.marquee {
  position: absolute;
  border: 1.5px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 3px;
  pointer-events: none;
  z-index: 50;
}

/* ===================== 节点 ===================== */

.node {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-node);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: visible;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.node.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow), var(--shadow-md);
}

.node.connect-target {
  border-color: var(--success);
  box-shadow: 0 0 0 2px rgba(46, 204, 143, 0.3), var(--shadow-md);
}

.node[data-status="running"] { border-color: var(--warn); }

.node-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 8px 0 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-node-head);
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: grab;
}

.node-head:active { cursor: grabbing; }

.node-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

.node-image .node-dot { background: var(--warn); }

.node-title {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-head-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.14s ease;
}

.node:hover .node-head-actions { opacity: 1; }

.icon-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-family: inherit;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1;
}

.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }

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

.prompt-area {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 10px 12px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
}

.prompt-area::placeholder { color: var(--text-faint); }

.img-body {
  background: #101216;
  overflow: hidden;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-body img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* 图片节点底部的常驻提示词输入区：收起时固定两行（54px），
   聚焦/输入时由 JS 按内容展开（最多 150px），失焦收回，不再长期挤压图片 */
.node-prompt {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.018);
  transition: background 0.15s ease;
}

.node-prompt:focus-within { background: var(--accent-soft); }

.node-prompt .prompt-area {
  height: 54px;
  min-height: 54px;
  max-height: 150px;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  overflow-y: auto;
  color: var(--text-primary);
  transition: height 0.12s ease;
}

.node-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  text-align: center;
  background: rgba(16, 18, 22, 0.93);
  backdrop-filter: blur(3px);
  font-size: 12px;
  color: var(--text-muted);
}

.node-overlay.running { color: var(--warn); font-weight: 600; }

.node-overlay.error { color: var(--danger); }

/* 提示词节点上的紧凑态：不铺满，浮在文本框底部 */
.node-overlay.slim {
  inset: auto 8px 8px 8px;
  background: var(--bg-node-head);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 10px;
  gap: 6px;
}

.node-overlay.slim.error { border-color: rgba(255, 92, 92, 0.45); }
.node-overlay.slim.running { border-color: rgba(255, 165, 61, 0.45); }

.node-overlay .err-title { font-weight: 700; font-size: 13px; }

.node-overlay .err-msg {
  font-size: 11px;
  line-height: 1.5;
  max-height: 90px;
  overflow: auto;
  word-break: break-word;
  color: var(--text-muted);
}

.spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255, 122, 0, 0.2);
  border-top-color: var(--warn);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.retry-btn {
  margin-top: 4px;
  padding: 4px 14px;
  font-size: 12px;
  font-family: inherit;
  color: #fff;
  background: var(--danger);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.node-foot {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-node-head);
  border-radius: 0 0 var(--radius) var(--radius);
}

.gen-btn {
  height: 24px;
  padding: 0 16px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  color: #06202a;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.14s ease;
}

.gen-btn:hover { background: var(--accent-hover); }

.gen-btn.ghost {
  color: var(--text-primary);
  background: transparent;
  border-color: var(--border-strong);
  font-weight: 500;
  padding: 0 12px;
  opacity: 0.82;
}

.gen-btn.ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
  opacity: 1;
}

.port {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--bg-node);
  border: 2px solid var(--border-strong);
  cursor: crosshair;
  transition: all 0.14s ease;
  z-index: 2;
}

.port:hover {
  border-color: var(--accent);
  background: var(--accent);
  transform: scale(1.25);
}

.port-in { left: -7px; }
.port-out { right: -7px; }

.node-resize {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity 0.14s ease;
  z-index: 3;
}

.node-resize::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  border-radius: 0 0 2px 0;
}

.node:hover .node-resize { opacity: 1; }

/* ===================== 弹窗遮罩 ===================== */

/* 所有面板共用一个遮罩；z-index 低于面板，高于画布 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ===================== 面板（居中弹窗） ===================== */

.panel {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(440px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.62);
  z-index: 120;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.97);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  overflow: hidden;
}

.panel.open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* 工具箱内容比普通设置面板宽，单独放宽一档 */
#toolsPanel { width: min(560px, calc(100vw - 40px)); }
#toolsPanel .panel-body { padding: 18px; }

/* 设置面板是这一整套里内容最多的一档：图片接口 + 视频接口 + 自定义模板。
   内容多、组件宽，所以单独放到 700px，并且高度吃满可用空间 ——
   内容不用再被 760px 的天花板切断。 */
#settingsPanel {
  width: min(700px, calc(100vw - 48px));
  max-height: min(92vh, calc(100vh - 60px));
}
#settingsPanel .panel-body { padding: 18px 20px; }

/* 窄屏（笔记本 1366 或分屏）别硬撑到 700，留出边距才不至于贴边 */
@media (max-width: 1100px) {
  #settingsPanel { width: min(640px, calc(100vw - 32px)); }
}

/* 设置面板的三个页签：推理 / 生图 / 视频。
   做成分段控件（一条底槽 + 三个等宽按钮）而不是顶部标签页 ——
   高度只占 40px，一眼能看出「这里有三套配置」，也不把表单顶下去。 */
.set-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.set-tab {
  flex: 1 1 0;
  height: 32px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}
.set-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.set-tab.active {
  color: var(--text-primary);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(23, 162, 168, 0.45);
}
.set-pane[hidden] { display: none; }

/* 每个页签顶上那句「这套管什么事」 */
.set-intro {
  margin-bottom: 16px;
  padding: 9px 11px;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--accent-soft);
  border: 1px solid rgba(23, 162, 168, 0.28);
  border-radius: 8px;
}

.panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 8px 0 18px;
  border-bottom: 1px solid var(--border);
}

.panel-head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
}

.panel-close {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-family: inherit;
  border-radius: 7px;
  cursor: pointer;
}

.panel-close:hover { background: var(--bg-app); color: var(--text-primary); }

/* 面板头部的操作按钮（保证主操作始终可见） */
.panel-head .head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.head-btn {
  height: 30px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-node);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.14s ease;
}

.head-btn.primary {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 10px var(--accent-glow);
}

.head-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.field-hint {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.panel input[type="text"],
.panel input[type="password"],
.panel input[type="number"],
.panel select,
.panel textarea,
.wf-panel input[type="text"],
.wf-panel input[type="password"],
.wf-panel input[type="number"],
.wf-panel select,
.wf-panel textarea {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.panel textarea,
.wf-panel textarea { height: auto; padding: 9px 11px; resize: vertical; }

.panel input:focus,
.panel select:focus,
.panel textarea:focus,
.wf-panel input:focus,
.wf-panel select:focus,
.wf-panel textarea:focus {
  border-color: var(--accent);
  background: var(--bg-hover);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.panel input::placeholder,
.wf-panel input::placeholder,
.panel textarea::placeholder,
.wf-panel textarea::placeholder { color: var(--text-faint); }

/* 下拉箭头统一自绘，避免各平台原生样式打架 */
.panel select,
.wf-panel select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238b94a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}

/* 数字框去掉原生上下箭头，改由滑杆控制 */
.panel input[type="number"].no-spin,
.wf-panel input[type="number"].no-spin {
  appearance: textfield;
  -moz-appearance: textfield;
}

.key-wrap { position: relative; }

/* 配置说明条 */
.notice {
  padding: 9px 11px;
  margin-bottom: 16px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--accent-soft);
  border: 1px solid rgba(23, 162, 168, 0.28);
  border-radius: 8px;
}

.notice strong { color: #5fd4da; }

/* 检测结果 / 模型识别 */
.detect-result {
  display: none;
  margin-top: 10px;
  padding: 10px;
  font-size: 11.5px;
  line-height: 1.6;
  border-radius: 8px;
  border: 1px solid transparent;
}

.detect-result.info,
.detect-result.success,
.detect-result.warn,
.detect-result.error { display: block; }

.detect-result.info {
  color: var(--text-muted);
  background: var(--bg-input);
  border-color: var(--border);
}

.detect-result.success {
  color: #7fe3b8;
  background: rgba(46, 204, 143, 0.1);
  border-color: rgba(46, 204, 143, 0.3);
}

.detect-result.warn {
  color: #ffc477;
  background: rgba(255, 165, 61, 0.1);
  border-color: rgba(255, 165, 61, 0.3);
}

.detect-result.error {
  color: #ff9a9a;
  background: var(--danger-soft);
  border-color: rgba(255, 92, 92, 0.35);
}

.dr-title { font-weight: 600; }

.dr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.dr-chip {
  max-width: 100%;
  padding: 3px 9px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.14s ease;
}

.dr-chip:hover {
  color: #06202a;
  background: var(--accent);
  border-color: var(--accent);
}

.dr-more {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-faint);
}

/* 自定义协议分组 */
.sub-group {
  padding: 12px;
  margin-bottom: 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.sub-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
}

.sub-group .field:last-child { margin-bottom: 0; }

/* 行内代码 */
code {
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #d98fd0;
  background: rgba(217, 143, 208, 0.12);
  border-radius: 4px;
  word-break: break-all;
}

/* 下拉候选的输入框 */
.panel input[list] {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.chip:hover { border-color: var(--accent); color: var(--accent); }

.chip.active {
  color: #06202a;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.wide-btn {
  width: 100%;
  height: 36px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.wide-btn:hover { background: rgba(13, 115, 119, 0.18); }

.wide-btn:disabled { opacity: 0.6; cursor: default; }

.wide-btn.danger {
  color: var(--danger);
  background: rgba(229, 72, 77, 0.08);
  margin-top: 8px;
}

.wide-btn.danger:hover { background: rgba(229, 72, 77, 0.16); }

.wide-btn.primary {
  color: #fff;
  background: var(--accent);
  margin-top: 4px;
  box-shadow: 0 2px 10px var(--accent-glow);
}

.wide-btn.primary:hover { background: var(--accent-hover); }

.btn-row {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
}

.btn-row.sm .wide-btn {
  font-size: 12px;
  padding: 0 4px;
  white-space: nowrap;
}

/* 勾选型字段：复选框 + 说明 */
.field.checkbox-field {
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.field.checkbox-field input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.field.checkbox-field .field-label { font-weight: 500; line-height: 17px; }

.field.checkbox-field .field-hint {
  flex: 1 1 100%;
  padding-left: 23px;
}

/* 分镜词解析预览 */
.sb-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}

.sb-item {
  display: flex;
  gap: 7px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.sb-idx {
  flex: 0 0 auto;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.sb-text { flex: 1 1 auto; min-width: 0; word-break: break-word; }

.sep {
  margin: 4px 0 16px;
  border: none;
  border-top: 1px solid var(--border);
}

/* ===================== 历史 ===================== */

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-item {
  display: flex;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.14s ease;
  background: var(--bg-hover);
}

.history-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.history-item img {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 7px;
  background: var(--bg-app);
}

.history-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.history-prompt {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-primary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.history-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.empty-hint {
  padding: 40px 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* ===================== 帮助 ===================== */

.help-manual-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent-soft);
}
.help-manual-banner .help-manual-text {
  flex: 1;
  min-width: 0;
}
.help-manual-banner .help-manual-text strong {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
}
.help-manual-banner .help-manual-text span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 2px;
}
.help-manual-banner .wide-btn { white-space: nowrap; flex-shrink: 0; }

.help-body h4 {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

.help-body h4:first-child { margin-top: 0; }

.help-body p,
.help-body li {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-primary);
  margin: 6px 0;
}

.help-body ol,
.help-body ul { margin: 6px 0; padding-left: 20px; }

.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.help-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.help-table td:first-child {
  width: 108px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ===================== 提示条 ===================== */

.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translate(-50%, 20px);
  padding: 11px 20px;
  max-width: 520px;
  font-size: 13px;
  line-height: 1.5;
  color: #f2f4f7;
  background: #2f3540;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all 0.22s ease;
  z-index: 200;
  text-align: center;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
/* 部分成功（比如批量登录 8 成 1 败）：不能报红吓人，但也不能像 info 那样被忽略 */
.toast.warn { background: #b45309; }

/* ===================== 字字动画导出 ===================== */

/* ---- 导入进字字动画（工作流内） ---- */
.zzdh-root-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.zzdh-root-state {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zzdh-root-state.ok { color: var(--success, #3fae6a); border-color: var(--success, #3fae6a); }
.zzdh-root-state.warn { color: var(--accent); border-color: var(--accent); }
.zzdh-root-state.bad { color: var(--danger); border-color: var(--danger); }

.zzdh-summary {
  margin: 10px 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 9px;
}

/* ---- 会写进去什么 ---- */
.zzdh-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zzdh-list-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.55;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.zzdh-list-row b {
  flex: 0 0 auto;
  max-width: 46%;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

.zzdh-list-row span {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-muted);
}

/* ---- 本机字字识别结果 ---- */
.zzdh-detect {
  margin: 10px 0 2px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 9px;
}

.zzdh-detect > b {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--text);
}

.zzdh-detect.ok { border-color: var(--success, #3fae6a); }
.zzdh-detect.ok > b { color: var(--success, #3fae6a); }
.zzdh-detect.warn { border-color: var(--accent); }
.zzdh-detect.warn > b { color: var(--accent); }
.zzdh-detect.bad { border-color: var(--danger); }
.zzdh-detect.bad > b { color: var(--danger); }

.zzdh-detect-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 6px 0 2px;
}

.zzdh-detect-grid span { color: var(--text-muted); }
.zzdh-detect-grid em {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}

.zzdh-detect-note {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.zzdh-ok-meta {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.zzdh-result {
  margin-top: 10px;
  padding: 10px;
  font-size: 12px;
  line-height: 1.55;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-panel);
  word-break: break-all;
}

.zzdh-result.ok { border-color: var(--success, #3fae6a); }
.zzdh-result.error { border-color: var(--danger); }

.zzdh-ok-title { font-weight: 600; color: var(--success, #3fae6a); }
.zzdh-err-title { font-weight: 600; color: var(--danger); }

.zzdh-ok-path {
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--text-muted);
}

.zzdh-ok-note,
.zzdh-err-advice {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.zzdh-err-advice { color: var(--accent); }

/* ---- 导入图片进字字 ---- */

.zzdh-src-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 8px;
}

.zzdh-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}

.zzdh-radio input[type="radio"] {
  accent-color: var(--accent);
  cursor: pointer;
}

.zzdh-file {
  width: 100%;
  font-size: 12px;
  color: var(--text-muted);
}

.zzdh-file::file-selector-button {
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

.zzdh-file::file-selector-button:hover {
  background: rgba(13, 115, 119, 0.18);
}

/* ===================== 右键菜单 ===================== */

.ctx-menu {
  position: fixed;
  z-index: 300;
  min-width: 232px;
  padding: 6px;
  background: var(--bg-menu-glass);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.62),
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  animation: ctxIn 0.13s cubic-bezier(0.22, 0.9, 0.32, 1.15);
}

@keyframes ctxIn {
  from { opacity: 0; transform: scale(0.955) translateY(-3px); }
  to { opacity: 1; transform: none; }
}

.ctx-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 11px 8px 9px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.25;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}

/* hover 时左侧亮起一条短竖条，比整块高亮更克制 */
.ctx-item::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transition: height 0.16s cubic-bezier(0.3, 0.8, 0.4, 1);
}

.ctx-item:hover::before { height: 15px; }

.ctx-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: color 0.12s ease, transform 0.12s ease;
}

.ctx-icon svg { width: 16px; height: 16px; display: block; }

.ctx-label { flex: 1 1 auto; min-width: 0; }

.ctx-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.ctx-item:hover .ctx-icon { color: var(--accent); transform: scale(1.06); }

.ctx-item:active { background: rgba(23, 162, 168, 0.2); }

.ctx-item.danger { color: var(--danger); }
.ctx-item.danger .ctx-icon { color: var(--danger); }
.ctx-item.danger:hover { background: var(--danger-soft); color: var(--danger); }
.ctx-item.danger:active { background: rgba(255, 92, 92, 0.22); }

/* 快捷键做成小胶囊，比裸文字更像成品 */
.ctx-hint {
  flex: 0 0 auto;
  padding: 1px 5px;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.ctx-item:hover .ctx-hint {
  color: var(--accent);
  border-color: rgba(23, 162, 168, 0.45);
  background: rgba(23, 162, 168, 0.1);
}

.ctx-item.danger:hover .ctx-hint {
  color: var(--danger);
  border-color: rgba(255, 92, 92, 0.45);
  background: rgba(255, 92, 92, 0.1);
}

.ctx-sep {
  height: 1px;
  margin: 5px 8px;
  background: linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
}

/* 菜单里的分组小标题（例如「图片处理」）：只做说明，点不动 */
.ctx-group {
  padding: 7px 12px 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  user-select: none;
}

/* ===================== 画布缩略图（右下角小地图） ===================== */

.minimap {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 200px;
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(18, 20, 24, 0.86);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  /* 只看不动：纯导航参照，不抢画布的鼠标事件 */
  pointer-events: none;
  z-index: 5;
}

.minimap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.minimap-tag {
  position: absolute;
  left: 9px;
  top: 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  user-select: none;
}

.minimap-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  color: var(--text-faint);
  user-select: none;
}

@media (max-width: 760px) {
  .minimap { width: 132px; height: 94px; right: 10px; bottom: 10px; }
}

/* ===================== 滚动条 ===================== */

.panel-body::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-thumb {
  background: #3a414b;
  border-radius: 4px;
}
.panel-body::-webkit-scrollbar-thumb:hover { background: #4a525e; }

/* ===================== 响应式 ===================== */

@media (max-width: 760px) {
  .toolbar { gap: 8px; padding: 0 10px; }
  .brand-name { display: none; }
  .brand { padding-right: 8px; }
  .tool-btn { padding: 0 10px; font-size: 12.5px; height: 34px; }
  /* 窄屏：弹窗铺满宽度，仍保持垂直居中 */
  .panel { width: calc(100vw - 24px); max-height: calc(100vh - 96px); }
  .wf-panel { width: calc(100vw - 24px); height: calc(100vh - 96px); }
  .canvas-hint { display: none; }
}

/* ===================== 创作工作流面板 ===================== */

.wf-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(940px, calc(100vw - 40px));
  height: min(760px, calc(100vh - 110px));
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: 0 28px 76px rgba(0, 0, 0, 0.64);
  z-index: 130;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.97);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  overflow: hidden;
}

.wf-panel.open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

.head-btn.danger { color: #ffb3b3; border-color: rgba(255, 92, 92, 0.42); }
.head-btn.danger:hover { background: var(--danger-soft); }

.head-btn:disabled { opacity: 0.55; cursor: default; }

/* ---------- 未授权 ---------- */

.wf-lock {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 34px 26px 26px;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

.wf-lock-badge { font-size: 30px; line-height: 1; margin-bottom: 12px; }

.wf-lock h4 { margin: 0 0 10px; font-size: 17px; }

.wf-lock > p {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.75;
}

.wf-lock-note {
  margin: 16px 0 0 !important;
  font-size: 12px !important;
  color: var(--text-faint) !important;
  line-height: 1.7 !important;
}

.wf-lock .wide-btn { margin-bottom: 0; }

/* 锁屏在居中弹窗里竖直居中；用伪元素 + margin:auto 而不是 justify-content:center，
   这样内容比弹窗高时不会把顶部裁掉 */
.wf-panel > .wf-lock {
  display: flex;
  flex-direction: column;
}

.wf-panel > .wf-lock::before,
.wf-panel > .wf-lock::after {
  content: '';
  margin: auto;
}

/* 工具箱锁屏：内边距交给 .wf-lock，避免两层 padding 叠加 */
#toolsLock { padding: 0; }

#toolsLock .wf-lock { max-width: 440px; }

/* ---------- 主体 ---------- */

.wf-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 240px 1fr;
}

.wf-side {
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: 12px 10px;
}

.wf-side-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin: 6px 2px 8px;
  text-transform: uppercase;
}

.wf-tabs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.wf-tab {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  padding: 9px 10px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-node);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.wf-tab:hover { background: var(--bg-hover); }

.wf-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-glow);
}

.wf-tab-icon { font-size: 15px; color: var(--accent); }

.wf-tab-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wf-tab-txt b { font-size: 13px; font-weight: 600; }
.wf-tab-txt i {
  font-style: normal;
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-dot-warn {
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--warn);
  flex: 0 0 auto;
}

.wf-stages { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }

.wf-stage {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-left: 2px solid var(--border-strong);
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: all 0.14s ease;
}

.wf-stage:hover { color: var(--text-primary); background: var(--bg-node); }

.wf-stage.active {
  color: var(--text-primary);
  background: var(--bg-node);
  border-left-color: var(--accent);
  font-weight: 600;
}

.wf-stage-t { flex: 1 1 auto; min-width: 0; }

.wf-stage-n {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  color: var(--text-faint);
  background: var(--bg-app);
  border-radius: 9px;
}

.wf-meta {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.wf-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-faint);
}

.wf-meta-row b {
  color: var(--text-muted);
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.wf-meta-docs { display: flex; flex-wrap: wrap; gap: 4px; }

.wf-meta-docs code {
  font-size: 10.5px;
  padding: 1px 5px;
  color: var(--text-faint);
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.wf-meta-warn {
  font-size: 11.5px;
  line-height: 1.6;
  color: #ffcf9a;
  background: rgba(255, 165, 61, 0.1);
  border: 1px solid rgba(255, 165, 61, 0.28);
  border-radius: 7px;
  padding: 7px 9px;
}

/* ---------- 对话区 ---------- */

.wf-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

.wf-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 18px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wf-msg { display: flex; flex-direction: column; }
.wf-msg.user { align-items: flex-end; }

.wf-bubble {
  max-width: 100%;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--text-primary);
  background: var(--bg-node);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-wrap: anywhere;
}

.wf-msg.user .wf-bubble {
  max-width: 84%;
  background: var(--accent-soft);
  border-color: rgba(23, 162, 168, 0.38);
  white-space: pre-wrap;
}

.wf-msg.bot .wf-bubble { width: 100%; }

.wf-msg-tools { margin-top: 5px; display: flex; gap: 6px; opacity: 0.5; }
.wf-msg:hover .wf-msg-tools { opacity: 1; }

.wf-mini {
  padding: 2px 8px;
  font-family: inherit;
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  cursor: pointer;
}

.wf-mini:hover { color: var(--text-primary); background: var(--bg-hover); }
.wf-mini.danger { color: #ffb3b3; border-color: rgba(255, 92, 92, 0.4); }

.wf-welcome { padding: 26px 8px; color: var(--text-muted); font-size: 13px; line-height: 1.8; }
.wf-welcome h4 { margin: 0 0 6px; color: var(--text-primary); font-size: 16px; }
.wf-welcome-stage { margin: 0 0 12px; color: var(--accent); font-weight: 600; }
.wf-welcome p { margin: 0 0 8px; }
.wf-welcome-tip { color: var(--text-faint); font-size: 12px; }

.wf-typing { color: var(--text-faint); }

.wf-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: wf-blink 1s steps(2, start) infinite;
}

@keyframes wf-blink { to { visibility: hidden; } }

.wf-err { color: #ff9d9d; font-size: 12.5px; line-height: 1.7; }

/* ---------- 输入区 ---------- */

.wf-composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  padding: 10px 14px 12px;
  background: rgba(255, 255, 255, 0.012);
}

.wf-stage-hint {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-bottom: 7px;
  line-height: 1.5;
  min-height: 0;
}

.wf-composer textarea {
  width: 100%;
  max-height: 240px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  resize: vertical;
  outline: none;
}

.wf-composer textarea:focus { border-color: var(--accent); }

.wf-composer-btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  flex-wrap: wrap;
}

/* ---------- 模型配置抽屉 ---------- */

.wf-config {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
}

.wf-config[hidden] { display: none; }
.wf-config .panel-body { padding: 20px; }

/* ===================== 文本模型设置页 ===================== */

.cfg-body {
  background:
    radial-gradient(900px 320px at 50% -140px, rgba(23, 162, 168, 0.09), transparent 70%),
    var(--bg-panel);
}

.cfg-wrap {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 顶部引导条 */
.cfg-lead {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(23, 162, 168, 0.16), rgba(23, 162, 168, 0.05));
  border: 1px solid var(--accent-line);
  border-radius: 13px;
}

.cfg-lead-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #06202a;
  background: var(--accent);
  border-radius: 9px;
  box-shadow: 0 3px 12px var(--accent-glow);
}

.cfg-lead-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.cfg-lead-desc {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-muted);
}

.cfg-lead-desc strong { color: #5fd4da; }

/* 分区卡片 */
.cfg-card {
  padding: 16px 18px 18px;
  background: var(--bg-node);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: var(--shadow-sm);
}

.cfg-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 14px;
}

.cfg-step {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 7px;
}

.cfg-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.cfg-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.cfg-inner { margin-top: 14px; }
.cfg-inner[hidden] { display: none; }

/* 表单两列网格（窄屏自动落回单列） */
.cfg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 16px;
}

.cfg-grid .field { margin-bottom: 0; }
.cfg-span { grid-column: 1 / -1; }

.cfg-card .field:last-child { margin-bottom: 0; }

/* 分段控件 */
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--bg-app);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}

.seg-item {
  min-width: 118px;
  height: 32px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.seg-item:hover { color: var(--text-primary); background: var(--bg-hover); }

.seg-item.active {
  color: #06202a;
  background: var(--accent);
  box-shadow: 0 2px 10px var(--accent-glow);
}

/* 滑杆行 */
.slide-row + .slide-row { margin-top: 18px; }

.slide-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.slide-val {
  min-width: 42px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 6px;
}

.slide {
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.slide::-webkit-slider-runnable-track {
  height: 5px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 99px;
}

.slide::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6.5px;
  background: var(--accent);
  border: 2px solid var(--bg-node);
  border-radius: 50%;
  box-shadow: 0 2px 8px var(--accent-glow);
}

.slide:hover::-webkit-slider-thumb { background: var(--accent-hover); }

.slide::-moz-range-track {
  height: 5px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 99px;
}

.slide::-moz-range-thumb {
  width: 13px;
  height: 13px;
  background: var(--accent);
  border: 2px solid var(--bg-node);
  border-radius: 50%;
}

.slide-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--text-faint);
}

/* 底部操作条 */
.cfg-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--bg-app);
  border-top: 1px solid var(--border);
}

.cfg-foot-note {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ---------- Markdown ---------- */

.md-p { margin: 0 0 11px; }
.md-p:last-child { margin-bottom: 0; }

.md-h1, .md-h2, .md-h3, .md-h4, .md-h5, .md-h6 {
  margin: 18px 0 9px;
  line-height: 1.4;
  color: var(--text-primary);
}

.md-h1 { font-size: 19px; }
.md-h2 { font-size: 16.5px; }
.md-h3 { font-size: 15px; }
.md-h4, .md-h5, .md-h6 { font-size: 14px; }
.md-h1:first-child, .md-h2:first-child, .md-h3:first-child { margin-top: 0; }

.md-ul, .md-ol { margin: 0 0 11px; padding-left: 22px; }
.md-ul li, .md-ol li { margin-bottom: 4px; }

.md-hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

.md-quote {
  margin: 0 0 11px;
  padding: 8px 12px;
  border-left: 3px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.022);
  border-radius: 0 8px 8px 0;
  color: var(--text-muted);
}

.wf-bubble code {
  padding: 1.5px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: #8fe3d6;
  background: rgba(23, 162, 168, 0.13);
  border-radius: 4px;
}

.md-pre {
  margin: 0 0 11px;
  padding: 11px 13px;
  overflow-x: auto;
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.md-pre code {
  padding: 0;
  color: var(--text-primary);
  background: none;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre;
}

.wf-bubble a { color: var(--accent-hover); }

.md-table {
  width: 100%;
  margin: 0 0 12px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.md-table th, .md-table td {
  padding: 6px 9px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--border);
}

.md-table th { background: var(--bg-app); font-weight: 700; }
.md-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.016); }

/* ---------- 管理台 ---------- */

.wf-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(3px);
}

.wf-modal[hidden] { display: none; }

/* 工具弹窗：站内使用，比普通面板高一层，卡片也更大 */
.tool-modal { z-index: 240; padding: 16px; }

.tool-modal-card {
  width: min(1320px, 97vw);
  height: min(930px, 94vh);
  background: var(--bg-app);
}

.tool-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  display: block;
  background: var(--bg-app);
}

/* 回填提示条：工具里点「回填到画布」后浮出来告诉用户发生了什么 */
.tool-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(680px, 92vw);
  padding: 11px 16px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.tool-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tool-toast.ok { border-color: var(--accent); }
.tool-toast.err { border-color: #d9534f; }
.tool-toast .tool-toast-act {
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
}

.wf-modal-card {
  display: flex;
  flex-direction: column;
  width: min(1000px, 96vw);
  height: min(880px, 90vh);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.wf-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px; }

.wf-adm-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.wf-adm-tab {
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
}

.wf-adm-tab:hover { color: var(--text-primary); background: var(--bg-node); }

.wf-adm-tab.active {
  color: var(--text-primary);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.wf-sub-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin: 4px 0 10px;
  text-transform: uppercase;
}

.wf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.wf-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.wf-table th, .wf-table td {
  padding: 7px 9px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.wf-table th { color: var(--text-faint); font-weight: 600; font-size: 11.5px; }
.wf-table td code { font-size: 12px; color: #8fe3d6; }
.wf-td-act { display: flex; gap: 5px; }

.wf-ok { color: var(--success); }
.wf-bad { color: #ff9d9d; }
.wf-warn { color: var(--warn); }

.wf-newcode { margin-top: 12px; font-size: 13px; }

.wf-code-big {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  background: var(--bg-app);
  border: 1px dashed var(--accent);
  border-radius: 8px;
}

.wf-import-log {
  max-height: 190px;
  overflow-y: auto;
  margin-top: 12px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--text-muted);
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.wf-import-log code { color: #8fe3d6; }

.wf-doc-card {
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--bg-node);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.wf-doc-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.wf-doc-head b { font-size: 13.5px; }
.wf-doc-head code { font-size: 11px; color: var(--text-faint); }
.wf-doc-num { margin-left: auto; font-size: 11.5px; color: var(--text-faint); }
.wf-doc-ok { font-size: 12px; color: var(--success); }
.wf-doc-miss { font-size: 12px; line-height: 1.8; color: #ffcf9a; }
.wf-doc-miss code { font-size: 11px; margin-right: 4px; }

.wf-doc-files { margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }
.wf-doc-files div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.wf-doc-files code { font-size: 11px; }

.wf-doc-card details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
}

.wf-empty { padding: 16px; text-align: center; font-size: 12.5px; color: var(--text-faint); }

@media (max-width: 900px) {
  .wf-body { grid-template-columns: 1fr; }
  .wf-side { border-right: none; border-bottom: 1px solid var(--border); max-height: 38vh; }
  .wf-grid2 { grid-template-columns: 1fr; }
}

.help-note {
  padding: 9px 12px;
  font-size: 12.5px !important;
  line-height: 1.75;
  color: var(--text-muted) !important;
  background: var(--bg-app);
  border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0;
}

/* ===================== 工具箱 ===================== */

.tools-intro {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-muted);
}

.tool-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  margin-bottom: 10px;
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 11px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.tool-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.tool-card-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 19px;
  line-height: 1;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
}

.tool-card-main { flex: 1 1 auto; min-width: 0; }

.tool-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}

/* 标题后的小标签：在线 / 需本机 */
.tool-card-tag {
  flex: 0 0 auto;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: #06202a;
  background: var(--accent);
  border-radius: 999px;
}

.tool-card-tag.warn {
  color: #2a1a00;
  background: var(--warn);
}

.tool-card-desc {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}

.tool-card-desc strong { color: var(--text-primary); font-weight: 600; }

/* 一个卡片允许多个动作：主操作在上，备用在下 */
.tool-card-acts {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  width: 148px;
}

.tool-card-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  background: var(--bg-hover);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.tool-card-act:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.tool-card-act.primary {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.tool-card-act.primary:hover { filter: brightness(1.08); color: #fff; }

/* 备用动作：弱化成次级按钮，避免和主操作抢视线 */
.tool-card-act.ghost {
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border-style: dashed;
}

.tool-card-act.ghost:hover { color: var(--accent); border-style: solid; }

.tool-card-size {
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  background: var(--bg-panel);
  border-radius: 999px;
}

.tool-card-act:hover .tool-card-size { color: var(--text-muted); }

.tools-note {
  margin: 14px 0 0;
  padding-top: 12px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
}

@media (max-width: 560px) {
  .tool-card {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .tool-card-acts {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 52px;
  }
  .tool-card-act { flex: 1 1 auto; }
}

.wf-selfcheck {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 11.5px;
  color: var(--text-faint);
}

/* ============================ 访客端自动更新 ============================
   发现服务端有新版本时，页面顶部弹出的提示条。
   用 fixed 定位，不占文档流 —— 弹出来也不会把画布挤变形。 */

.au-bar {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  margin: 0 auto;
  max-width: 560px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 14px;
  background: var(--bg-menu-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, .3);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.4;
  animation: au-bar-in .28s cubic-bezier(.2, .9, .3, 1.15);
}

@keyframes au-bar-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.au-bar-icon {
  flex: none;
  font-size: 15px;
  line-height: 1;
}

.au-bar-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.au-bar-btn {
  flex: none;
  padding: 6px 15px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}

.au-bar-btn:hover { background: var(--accent-hover); }

.au-bar-btn:disabled {
  opacity: .65;
  cursor: default;
  background: var(--accent);
}

.au-bar-close {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.au-bar-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* 窄屏：让文字可以折行，按钮不至于被挤没 */
@media (max-width: 560px) {
  .au-bar {
    border-radius: var(--radius);
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .au-bar-text {
    white-space: normal;
    flex-basis: calc(100% - 26px);
  }
}

/* 通用小按钮：面板头部的次要操作（连接设置 / 重新连接等） */
.mini-btn {
  height: 24px;
  padding: 0 9px;
  font-size: 11.5px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.mini-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.mini-btn:disabled { opacity: 0.5; cursor: default; }


/* ============ 视频云解析 · 客户发放包 ============
   一个面板装两件事：上半是发放包说明 + 下载，下半是包内插件界面（iframe）。
   面板吃满可用高度，iframe 自己 flex 撑开，插件页内部再滚动 ——
   这样插件页的排版不会被外层压缩成一条。 */
.vp-panel {
  width: min(1080px, calc(100vw - 96px));
  height: min(880px, calc(100vh - 72px));
  max-height: calc(100vh - 72px);
}

.vp-panel .panel-head { flex: 0 0 auto; }

.vp-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 18px 16px;
}

.vp-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.vp-summary-main { flex: 1 1 auto; min-width: 0; }

.vp-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.vp-ver {
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
  color: #7fe3b8;
  background: rgba(46, 204, 143, 0.12);
  border-radius: 999px;
}

.vp-desc {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}

.vp-desc strong { color: var(--text-secondary); }

.vp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.vp-meta span {
  padding: 2px 8px;
  font-size: 10.5px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.vp-download {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 132px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #04262a;
  text-decoration: none;
  background: var(--accent);
  border-radius: 10px;
  box-shadow: 0 4px 16px var(--accent-glow);
  transition: background 0.15s ease, transform 0.15s ease;
}

.vp-download span { font-size: 10.5px; font-weight: 500; opacity: 0.78; }
/* 文件没随包附带：别装成能点，灰掉说清楚 */
.vp-download.is-missing {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-faint);
  cursor: not-allowed;
  box-shadow: none;
}
.vp-download.is-missing:hover { transform: none; background: rgba(255, 255, 255, 0.06); }
.vp-download:hover { background: var(--accent-hover); transform: translateY(-1px); }

.vp-steps {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 14px 10px 32px;
  font-size: 12px;
  line-height: 1.85;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
}

.vp-steps b { color: var(--text-secondary); }

.vp-steps code {
  padding: 1px 5px;
  font-size: 11px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
}

.vp-frame-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.vp-frame-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.vp-frame-note { font-size: 11px; color: var(--text-faint); }

.vp-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 260px;
  background: #1a1a24;
  border: 1px solid var(--border);
  border-radius: 10px;
}

@media (max-width: 900px) {
  .vp-panel {
    width: calc(100vw - 32px);
    height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);
  }
  .vp-summary { flex-direction: column; align-items: stretch; }
  .vp-download { flex-direction: row; justify-content: center; gap: 8px; }
  .vp-frame-head { flex-direction: column; gap: 2px; }
}

/* 锁屏内容别在 1080px 宽的面板里被拉成一行字 */
#vpLock .wf-lock { max-width: 460px; margin: 0 auto; }

/* 锁屏状态下让面板塌成内容高度 */
.vp-panel.vp-locked { height: auto; }

/* ============ 国际豆包 · 账号池 ============
   一个面板装两段：上面是账号表（读本机主软件），下面是提交区（分镜词 + 参考图）。
   面板高度吃满，中间表格自己滚，提交区固定在底部 —— 账号多的时候也不会把
   「一键提交」顶到看不见的地方。 */
.intl-panel {
  width: min(760px, calc(100vw - 80px));
  height: min(820px, calc(100vh - 80px));
}

.intl-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 14px 18px 16px;
}

/* —— 状态条 —— */
.intl-status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.intl-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b7280;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.16);
  flex: 0 0 auto;
}

.intl-led.ok { background: #2ecc8f; box-shadow: 0 0 0 3px rgba(46, 204, 143, 0.16); }
.intl-led.bad { background: #f05a5a; box-shadow: 0 0 0 3px rgba(240, 90, 90, 0.16); }
.intl-led.wait { background: #f2c14e; box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.16); }

.intl-status-text { flex: 1 1 auto; }

.intl-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.intl-check input { accent-color: var(--accent); }

/* —— 账号表 —— */
.intl-table-wrap {
  flex: 1 1 auto;
  min-height: 120px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.intl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.intl-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 11px;
  color: var(--text-faint);
  text-align: left;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border);
}

.intl-table td {
  padding: 9px 10px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  vertical-align: middle;
}

.intl-table tr:last-child td { border-bottom: 0; }
.intl-table .col-id { width: 42%; }
.intl-table .col-quota,
.intl-table .col-state,
.intl-table .col-turn { width: 19%; }

.intl-table td.col-id b {
  color: var(--text-primary);
  font-size: 12.5px;
  letter-spacing: 0.3px;
}

.intl-name {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

.intl-table tr.off td { opacity: 0.5; }
.intl-table tr.busy td.col-state { color: #f2c14e; }
.intl-table tr.ok td.col-state { color: #2ecc8f; }

.intl-on {
  padding: 1px 6px;
  font-size: 10px;
  color: #04262a;
  background: var(--accent);
  border-radius: 999px;
}

.intl-empty {
  padding: 26px 12px !important;
  text-align: center;
  color: var(--text-faint);
  line-height: 1.7;
}

.intl-empty.error { color: #f08585; }

/* —— 提交区 —— */
.intl-submit {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.intl-submit-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.intl-node-tag {
  flex: 1 1 auto;
  font-weight: 400;
  font-size: 11px;
  color: var(--text-faint);
}

.intl-prompt {
  width: 100%;
  min-height: 64px;
  max-height: 160px;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
}

.intl-prompt:focus {
  outline: none;
  border-color: var(--accent);
}

.intl-files {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
}

.intl-files.has-files { display: flex; }

.intl-thumb {
  position: relative;
  width: 52px;
  height: 52px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
}

.intl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.intl-thumb button {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 15px;
  height: 15px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.intl-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.intl-actions .wide-btn { margin: 0; }
.intl-actions .wide-btn.ghost {
  flex: 0 0 auto;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  cursor: pointer;
}

.intl-hint {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-faint);
  word-break: break-all;
}

@media (max-width: 820px) {
  .intl-panel {
    width: calc(100vw - 28px);
    height: calc(100vh - 40px);
  }
  .intl-status { flex-wrap: wrap; }
}

/* 账号池面板的高度与内边距收口：
   .panel 的默认 max-height 是 760，宽 440 —— 这个面板要更高更宽，得显式覆盖，
   否则提交区会被压在可视区外面（.panel-body 自带 overflow，会直接裁掉）。 */
.panel.intl-panel {
  width: min(760px, calc(100vw - 80px));
  height: calc(100vh - 96px);
  max-height: 860px;
}

.panel.intl-panel .panel-body.intl-body {
  padding: 14px 18px 16px;
  overflow: hidden;          /* 内部自己分配：表格滚，提交区固定 */
}

.intl-actions .wide-btn {
  width: auto;
  flex: 1 1 auto;
  white-space: nowrap;
}

.intl-actions .wide-btn.ghost {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}

/* ============ 账号池 · 插入账号（账号簿） ============
   账号在哪儿插？就是这个抽屉。面板顶部「＋ 插入账号」点开，
   一行一个粘进去，导入后固定编号 账号01/02/03，编号顺序就是轮询顺序。
   抽屉展开时表格自动让位（flex 收缩），不会把提交区顶出去。 */
.mini-btn.acc {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
  font-weight: 600;
  flex: 0 0 auto;
}

.mini-btn.acc:hover { background: rgba(13, 115, 119, 0.2); border-color: transparent; }

.intl-import {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 12px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}

.intl-import[hidden] { display: none; }

.intl-import-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 12px;
}

.intl-import-head b { color: var(--text-primary); font-size: 12.5px; }
.intl-import-head span { font-size: 11px; color: var(--text-faint); }

.intl-import-text {
  width: 100%;
  min-height: 76px;
  max-height: 190px;
  padding: 9px 10px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
}

.intl-import-text:focus { outline: none; border-color: var(--accent); }

.intl-import-text::placeholder { color: var(--text-faint); }

.intl-import-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.intl-import-actions .wide-btn {
  width: auto;
  height: 30px;
  flex: 0 0 auto;
  padding: 0 18px;
  margin: 0;
  font-size: 12px;
}

.intl-import-note {
  flex: 1 1 auto;
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}

/* 行尾的移除按钮：平时很淡，指到那一行才亮起来 */
.intl-table td.col-turn { position: relative; padding-right: 26px; }

.intl-del {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  padding: 0;
  font-size: 12px;
  line-height: 15px;
  color: var(--text-faint);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.intl-table tr:hover .intl-del { opacity: 1; }
.intl-del:hover { color: #f07a7a; background: rgba(240, 90, 90, 0.14); }

/* ============ 养号 · 洗号（Dola账号管理工具 的账号库） ============
   和账号池长得像但不是一个东西：那边是「谁出片」，这边是「账号养得怎么样」。
   表格列更多（状态 / Cookie / 养号进度 / 最后动作），所以宽度放宽一点。 */
.dola-panel {
  width: min(860px, calc(100vw - 80px));
  height: min(780px, calc(100vh - 80px));
}

.dola-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 14px 18px 16px;
}

.dola-status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.dola-status .intl-status-text { flex: 1 1 auto; min-width: 0; }

/* —— 统计条 —— */
.dola-stats {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dola-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.dola-stat b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* —— 账号表 —— */
.dola-table-wrap {
  flex: 1 1 auto;
  min-height: 140px;
}

/* 固定布局：列宽按百分比切死，长状态名一律省略号，不让一行字把行高撑开 */
.dola-table { table-layout: fixed; }

.dola-table .col-id { width: 27%; }
.dola-table .col-state { width: 26%; }
.dola-table .col-quota { width: 9%; }
.dola-table .col-turn { width: 14%; white-space: nowrap; }
.dola-table th:nth-child(4) { width: 24%; }   /* 养号进度，没有单独的 class */

.dola-table td.col-state,
.dola-table td.col-quota { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dola-table .dola-tag {
  font-size: 10.5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.dola-table td { font-size: 11.5px; }
.dola-table td.col-id b { font-size: 12px; }

.dola-tag {
  display: inline-block;
  padding: 2px 7px;
  font-size: 11px;
  line-height: 16px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.dola-tag.ok { color: #7ee2b8; background: rgba(46, 204, 143, 0.14); }
.dola-tag.bad { color: #f3a0a0; background: rgba(240, 90, 90, 0.14); }
.dola-tag.wait { color: #f0d090; background: rgba(242, 193, 78, 0.13); }

.dola-muted { color: var(--text-faint); }

.dola-err {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: #f08585;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

/* —— 说明 —— */
.dola-tip {
  flex: 0 0 auto;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--text-muted);
  background: rgba(23, 162, 168, 0.06);
  border: 1px solid rgba(23, 162, 168, 0.22);
  border-radius: 10px;
}

.dola-tip b {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  color: var(--text-primary);
}

.dola-tip p { margin: 0; }

/* —— 工具路径（出问题才展开） —— */
.dola-path {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--text-muted);
}

.dola-path summary {
  cursor: pointer;
  color: var(--text-faint);
  user-select: none;
}

.dola-path summary:hover { color: var(--text-secondary); }

.dola-path-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.dola-path-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 11.5px;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
}

.dola-path-row input:focus { border-color: var(--accent-line); }

.dola-path-hint {
  margin: 6px 0 0;
  font-size: 10.5px;
  color: var(--text-faint);
  line-height: 1.6;
}

/* ============ 插件 · 视频 / 图片 ============
   一个插件一张卡：名字、版本、说明、能力标签，右边两个动作（开界面 / 开目录）。
   卡片列表自己滚，路径行固定在上面 —— 换目录时手指不用来回找。 */
.plug-panel {
  width: min(820px, calc(100vw - 80px));
  height: min(760px, calc(100vh - 80px));
}

.plug-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px 18px 16px;
}

.plug-status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.plug-status .intl-status-text { flex: 1 1 auto; min-width: 0; }

.plug-count {
  flex: 0 0 auto;
  padding: 1px 8px;
  font-size: 10.5px;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

/* —— 视频 / 图片 切换 —— */
.plug-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 3px;
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.plug-tab {
  flex: 1 1 0;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.plug-tab:hover { color: var(--text-primary); }

.plug-tab.on {
  color: var(--text-primary);
  background: var(--bg-hover);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

/* —— 目录行 —— */
.plug-path-row {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

.plug-path-row .mini-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.plug-path {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 11.5px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
}

.plug-path:focus { border-color: var(--accent-line); color: var(--text-primary); }

/* —— 插件卡 —— */
.plug-list {
  flex: 1 1 auto;
  min-height: 140px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

.plug-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.plug-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-strong);
}

.plug-main { flex: 1 1 auto; min-width: 0; }

.plug-name {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plug-ver {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-faint);
}

.plug-desc {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plug-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.plug-tag {
  padding: 1px 7px;
  font-size: 10px;
  line-height: 15px;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
}

.plug-tag.ok { color: #7ee2b8; background: rgba(46, 204, 143, 0.13); }

.plug-size {
  font-size: 10px;
  color: var(--text-faint);
  opacity: 0.75;
}

.plug-acts {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

.plug-empty {
  padding: 34px 16px;
  font-size: 12px;
  line-height: 1.9;
  text-align: center;
  color: var(--text-faint);
}

.plug-empty code {
  padding: 1px 5px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}

.plug-empty.error { color: #f08585; }

/* —— 说明 —— */
.plug-tip {
  flex: 0 0 auto;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.plug-tip b {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  color: var(--text-primary);
}

.plug-tip p { margin: 0; }

.plug-tip code {
  padding: 1px 5px;
  font-size: 10.5px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}

/* ============ 养号面板 · 顶部「导入靠工具，这里只读」提示 ============
   这一段是照着「用户以为网页能导账号，找不到入口就卡住」写的。
   所以它得够显眼：一条带标题的横条 + 两个大按钮，而不是一句灰色小字。 */
.dola-notice {
  flex: 0 0 auto;
  padding: 12px 13px 11px;
  background: linear-gradient(180deg, rgba(23, 162, 168, 0.1), rgba(23, 162, 168, 0.03));
  border: 1px solid var(--accent-line);
  border-radius: 10px;
}

.dola-notice-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.dola-notice p {
  margin: 0 0 9px;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--text-muted);
}

.dola-notice code {
  padding: 1px 5px;
  font-size: 10.5px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}

.dola-notice-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.dola-notice-actions .wide-btn {
  flex: 1 1 0;
  margin: 0;
}

.dola-notice-note {
  margin: 0 !important;
  font-size: 11px !important;
  color: var(--text-faint) !important;
  padding-top: 7px;
  border-top: 1px dashed var(--border);
}

/* 账号库比对：一颗按钮 + 一段结论 */
.dola-compare {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.dola-compare-hint {
  font-size: 11px;
  color: var(--text-faint);
}

.dola-compare-result {
  flex: 1 1 100%;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.dola-compare-result[hidden] { display: none; }

.dola-compare-result .dc-verdict {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.dola-compare-result.ok { border-color: rgba(46, 204, 143, 0.4); }
.dola-compare-result.ok .dc-verdict { color: var(--success); }
.dola-compare-result.warn { border-color: rgba(242, 193, 78, 0.4); }
.dola-compare-result.warn .dc-verdict { color: var(--warn); }
.dola-compare-result.bad { border-color: rgba(240, 90, 90, 0.4); }
.dola-compare-result.bad .dc-verdict { color: var(--danger); }

.dola-compare-result .dc-grid {
  display: flex;
  gap: 14px;
  margin-bottom: 6px;
  color: var(--text-muted);
}

.dola-compare-result .dc-grid b {
  color: var(--text-primary);
  font-size: 13px;
  margin-right: 3px;
}

.dola-compare-result .dc-line {
  margin-top: 3px;
  color: var(--text-faint);
}

.dola-compare-result .dc-line code {
  padding: 1px 5px;
  margin-right: 3px;
  font-size: 10.5px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}

.dola-compare-result .dc-more { color: var(--text-faint); }

/* 账号簿里那句「这是另一个数据源」的提醒 */
.intl-import-warn {
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-muted);
  background: rgba(242, 193, 78, 0.07);
  border-left: 2px solid rgba(242, 193, 78, 0.55);
  border-radius: 0 6px 6px 0;
}

.intl-import-warn code {
  padding: 1px 4px;
  font-size: 10px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}

/* 视频接口 · 国际豆包那一段的说明块 */
.intl-video-note {
  padding: 9px 11px;
  margin-bottom: 10px;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--text-muted);
  background: rgba(23, 162, 168, 0.07);
  border-left: 2px solid var(--accent-line);
  border-radius: 0 7px 7px 0;
}

.intl-addr-row {
  display: flex;
  gap: 7px;
  align-items: center;
}

.intl-addr-row input { flex: 1 1 auto; min-width: 0; }
.intl-addr-row .mini-btn { flex: 0 0 auto; white-space: nowrap; }

/* ============ 插件面板 · 下拉框 + 内嵌界面 ============
   改这套的起因：以前「装了什么」和「现在用哪个」是两个独立的东西，
   用户得记住自己刚点了哪张卡。现在下拉框里那一个就是当前这一个，
   下面那块直接是它的界面 —— 选谁，就是谁在干活。 */

/* 插件界面普遍是按 700~900px 宽设计的，440px 那个默认宽度塞不下 */
.panel.plug-panel {
  width: min(1180px, calc(100vw - 56px));
  height: min(880px, calc(100vh - 64px));
}

.plug-picker {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.plug-picker select {
  height: 34px;
  min-width: 0;
}

.plug-picker .plug-kind {
  flex: 0 0 118px;
}

.plug-picker .plug-select {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 500;
}

.plug-picker .mini-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  height: 34px;
}

/* 目录设置区：平时收着 */
.plug-dirbox {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 11px;
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.plug-dirbox[hidden] { display: none; }

.plug-dirbox .field-hint {
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-faint);
}

.plug-dirbox code {
  padding: 1px 4px;
  font-size: 10px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}

/* 插件界面本体：撑满剩余高度，自己滚 */
.plug-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  display: flex;
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.plug-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  display: block;
}

.plug-frame[hidden] { display: none; }

.plug-stage-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 24px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-faint);
}

.plug-stage-empty[hidden] { display: none; }

.plug-stage-empty b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.plug-stage-empty span {
  max-width: 460px;
}

/* 底部一行：告诉用户「现在画布走的是哪个插件」 */
.plug-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 2px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-faint);
}

.plug-foot-tip { flex: 0 1 auto; min-width: 0; }
.plug-foot-tip b { color: var(--text-primary); font-weight: 600; }

.plug-foot-dir {
  flex: 1 1 0;
  min-width: 0;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10.5px;
  color: var(--text-faint);
  opacity: 0.7;
}

/* 设置面板里那块「生图 / 生视频去哪了」 —— 删掉接口配置之后，
   得有个地方把用户指过去，否则他只会觉得功能被删了。 */
.plug-hint-card {
  padding: 12px 13px;
  background: linear-gradient(180deg, rgba(23, 162, 168, 0.09), rgba(23, 162, 168, 0.02));
  border: 1px solid var(--accent-line);
  border-radius: 10px;
}

.plug-hint-card b {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.plug-hint-card p {
  margin: 0 0 10px;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--text-muted);
}

.plug-hint-card .wide-btn { margin: 0; }

/* ---------------- 选目录：站内浏览器 ---------------- */
/* 用站内弹窗而不是 Windows 的文件夹框 —— 那个在打包后的 exe 里建不起来。 */
.plug-browse { z-index: 260; }

.plug-browse-card {
  width: min(720px, 94vw);
  height: min(620px, 88vh);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.plug-browse-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}

.plug-browse-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.plug-browse-bar .plug-path {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 7px;
}

.plug-browse-roots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plug-browse-roots:empty { display: none; }

.plug-root-chip {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-node);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}

.plug-root-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.plug-browse-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-app);
}

.plug-dir-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.plug-dir-row:last-child { border-bottom: 0; }
.plug-dir-row:hover { background: var(--bg-hover); color: var(--text-primary); }
.plug-dir-row.is-up { color: var(--text-muted); }
.plug-dir-row .pd-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plug-dir-row .pd-tag {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(13, 115, 119, 0.16);
  color: var(--success);
}
.plug-dir-row .pd-go { flex: 0 0 auto; color: var(--text-faint); font-size: 12px; }

.plug-browse-empty {
  padding: 22px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.plug-browse-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-node);
}

.plug-browse-tip {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 站长管理台：登录态收紧 + 视觉整理 ----------
 * 问题：卡片固定 1000×880，而登录时里面只有一行输入，
 * 剩下全是空黑，看着像界面挂了。这里按内容收窄，并把密钥区做出层次。
 * 用 :has() 判断「当前只有密钥行」——不支持时退回原尺寸，功能不受影响。 */

.wf-modal-card:has(> .wf-modal-body > #wfAdminKeyRow:not([hidden])) {
  width: min(560px, 94vw);
  height: auto;
  max-height: min(560px, 88vh);
}

.wf-modal-card:has(> .wf-modal-body > #wfAdminKeyRow:not([hidden])) > .wf-modal-body {
  flex: 0 0 auto;
  padding: 24px 26px 28px;
}

#wfAdminKeyRow { display: flex; flex-direction: column; gap: 14px; }

/* ⚠️ 上面自己写了 display:flex，特异性高于浏览器默认的 [hidden]{display:none}，
 * 不加这一行的话 hidden 属性会失效，密钥行永远显示（本文件开头记过这个坑）。 */
#wfAdminKeyRow[hidden] { display: none; }

#wfAdminKeyRow .notice {
  margin: 0;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-muted);
  background: rgba(95, 212, 218, 0.06);
  border: 1px solid rgba(95, 212, 218, 0.16);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}

#wfAdminKeyRow .notice strong { color: var(--accent); }
#wfAdminKeyRow .field { margin: 0; }

#wfAdminKey {
  height: 44px;
  padding: 0 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  background: var(--bg-app);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

#wfAdminKey:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(95, 212, 218, 0.14);
}

#wfAdminLoginBtn {
  height: 44px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 9px;
}

/* 顶栏与内容区分开：原来标题孤零零一行白字 */
#wfAdminPanel .panel-head {
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
  border-bottom: 1px solid var(--border);
}

#wfAdminPanel .panel-head h3 { font-size: 14.5px; letter-spacing: 0.02em; }


/* ============================================================================
 *  设置面板：调用来源显示 + 「优先用自己的接口」开关
 *  —— 用户配了 API 之后必须能一眼看出「这次到底走了谁的接口」，
 *     否则会出现「以为在用自己花钱的 Key，其实一直在烧站长额度」这种误会。
 * ==========================================================================*/
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 16px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}

.check-row:hover { border-color: var(--border-strong); }

.check-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.check-row span { display: block; min-width: 0; }
.check-row em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.55;
}

/* 上次调用来自哪里：站内 / 自备，模型名，地址，时间 */
.call-info {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--text-faint);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.022);
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-muted);
  word-break: break-all;
}

.call-info.is-builtin { border-left-color: var(--warn); }
.call-info.is-own { border-left-color: var(--success); }

.call-info .ci-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  color: var(--text-primary);
  font-size: 12.5px;
}

.call-info .ci-tag {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.call-info.is-builtin .ci-tag {
  color: var(--warn);
  background: rgba(255, 165, 61, 0.14);
  border: 1px solid rgba(255, 165, 61, 0.3);
}

.call-info.is-own .ci-tag {
  color: var(--success);
  background: rgba(46, 204, 143, 0.13);
  border: 1px solid rgba(46, 204, 143, 0.3);
}

.call-info .ci-row { display: flex; gap: 8px; }
.call-info .ci-k { flex: 0 0 44px; color: var(--text-faint); }
.call-info .ci-v { flex: 1 1 auto; min-width: 0; color: var(--text-primary); }
.call-info .ci-hint { margin-top: 6px; color: var(--text-faint); font-size: 11.5px; }

/* 设置面板引导语里的一句硬提示：说明这条路只有自备 Key 一种走法，
 * 免得用户在一堆页签里找那个「优先用自己的接口」开关 */
.set-intro-warn {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 165, 61, 0.32);
  background: rgba(255, 165, 61, 0.12);
  color: var(--warn);
  font-size: 11.5px;
  line-height: 1.7;
}

/* 空态：还没做过调用时，面板也要露出来，只是颜色压暗 */
.call-info.is-empty { border-left-color: var(--border-strong); }
.call-info.is-empty .ci-tag {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  font-weight: 500;
}

/* 「上次调用」底部的一键配置：推理 / 生图 / 视频各一颗，只作用于本页签。
   按钮是渲染进 innerHTML 的，所以样式要自给自足，不能依赖全局 button。 */
.call-info .ci-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--border);
}

.call-info .ci-btn {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 11px;
  border-radius: 7px;
  border: 1px solid rgba(23, 162, 168, 0.55);
  background: rgba(23, 162, 168, 0.13);
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.call-info .ci-btn:hover:not(:disabled) {
  background: rgba(23, 162, 168, 0.24);
  border-color: var(--accent);
}

.call-info .ci-btn:active:not(:disabled) { transform: translateY(1px); }

.call-info .ci-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.04);
}

.call-info .ci-what {
  flex: 1 1 130px;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* 封面面板的参考图预览：多张缩略图网格 + 一句后果说明 */
.cv-ref-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
}

.cv-ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 8px;
}

.cv-ref-thumb {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cv-ref-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  display: block;
}

.cv-ref-thumb figcaption {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cv-ref-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong, var(--border));
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cv-ref-del:hover {
  background: #e5484d;
  border-color: #e5484d;
  color: #fff;
}

.cv-ref-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.cv-ref-meta b { color: var(--text-primary); font-size: 12.5px; }
.cv-ref-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-ref-meta i { font-style: normal; font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }