.workflow-canvas-view {
  min-height: 100vh;
  margin-left: 76px;
  padding: 54px clamp(22px, 4vw, 72px) 80px;
  color: #f4f8fa;
  background: #080a0d;
}
body.workflow-canvas-open .announcement-bar,
body.workflow-canvas-open .topbar { display: none; }
body.workflow-canvas-open .app-sidebar { inset: 0 auto 0 0; }
.workflow-home { max-width: 1380px; margin: 0 auto; }
.workflow-home :is(h1,h2,h3) { color: #f4f8fa; }
.workflow-home .workflow-library-panel { background: #10161d; border-color: #293641; }
.workflow-home .workflow-library-panel header label { background: #171f28; border-color: #33414e; }
.workflow-home .workflow-library-panel header input { color: #f4f8fa; }
.workflow-home .workflow-library-panel header input::placeholder { color: #a5afb8; }
.workflow-home .workflow-card { background: #151d26; border-color: #293641; }
.workflow-home .workflow-card-preview { background-color: #0c1117; background-image: radial-gradient(#34424e 1px, transparent 1px); }
.workflow-home .workflow-card-preview span { color: #eef4f7; background: #202b35; border-color: #3a4a57; }
body.workflow-canvas-open .workflow-home .workflow-card-actions button { color: #edf3f6; background: #222d37; border-color: #3a4854; }
body.workflow-canvas-open .workflow-home .workflow-card-actions button:first-child,
body.workflow-canvas-open .workflow-home .workflow-primary { color: #fff; background: #6658df; border-color: #8174ec; }
.workflow-home .workflow-empty strong { color: #eef4f7; }
.workflow-home-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 26px 0 34px; }
.workflow-home-hero span,
.workflow-library-panel header > div > span { color: #0789c8; font-size: 10px; font-weight: 850; letter-spacing: .18em; }
.workflow-home-hero h1 { max-width: 760px; margin: 9px 0 10px; font-size: clamp(38px, 5.2vw, 72px); line-height: .98; letter-spacing: -.06em; }
.workflow-home-hero p { margin: 0; color: #a5afb8; font-size: 14px; }
.workflow-primary,
.workflow-run-all { border: 0; color: #fff; background: #171b1f; box-shadow: 0 12px 28px rgba(19,24,28,.16); cursor: pointer; font-weight: 780; }
.workflow-primary { min-width: 150px; height: 48px; padding: 0 20px; border-radius: 14px; }
.workflow-library-panel { min-height: 440px; padding: 28px; border: 1px solid #e0e3e6; border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: 0 18px 60px rgba(38,47,56,.06); }
.workflow-library-panel > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.workflow-library-panel h2 { margin: 5px 0 0; font-size: 28px; letter-spacing: -.04em; }
.workflow-library-panel header label { width: min(360px, 40vw); height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #e1e4e7; border-radius: 12px; background: #fafbfc; }
.workflow-library-panel header label i { color: #8f969d; font-style: normal; }
.workflow-library-panel header input { width: 100%; border: 0; outline: 0; background: transparent; font: inherit; }
.workflow-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.workflow-card { overflow: hidden; border: 1px solid #e5e7e9; border-radius: 18px; background: #fff; transition: box-shadow .18s ease, transform .18s ease; }
.workflow-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(35,43,52,.1); }
.workflow-card-preview { position: relative; height: 156px; overflow: hidden; background-color: #f4f1eb; background-image: radial-gradient(#d2cec6 1px, transparent 1px); background-size: 16px 16px; cursor: pointer; }
.workflow-card-preview span { position: absolute; width: 72px; height: 38px; display: grid; place-items: center; border: 1px solid #dfe2e4; border-radius: 9px; color: #687078; background: rgba(255,255,255,.92); font-size: 9px; box-shadow: 0 5px 15px rgba(41,47,53,.08); }
.workflow-card-preview span:nth-child(1) { left: 22px; top: 28px; }
.workflow-card-preview span:nth-child(2) { left: 125px; top: 82px; }
.workflow-card-preview span:nth-child(3) { right: 22px; top: 30px; }
.workflow-card-preview::before,
.workflow-card-preview::after { content: ''; position: absolute; height: 1px; background: #aeb5bb; transform-origin: left; }
.workflow-card-preview::before { width: 90px; left: 76px; top: 61px; transform: rotate(24deg); }
.workflow-card-preview::after { width: 76px; left: 190px; top: 81px; transform: rotate(-28deg); }
.workflow-card-body { padding: 17px; }
.workflow-card-body h3 { margin: 0 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.workflow-card-meta { display: flex; gap: 10px; color: #9299a0; font-size: 10px; }
.workflow-card-actions { display: flex; gap: 8px; margin-top: 15px; }
.workflow-card-actions button { min-height: 34px; padding: 0 12px; border: 1px solid #e1e4e7; border-radius: 9px; background: #fff; cursor: pointer; font-size: 11px; }
.workflow-card-actions button:first-child { flex: 1; color: #fff; border-color: #171b1f; background: #171b1f; }
.workflow-empty { min-height: 300px; display: grid; place-items: center; align-content: center; color: #9299a0; text-align: center; }
.workflow-empty i { width: 58px; height: 58px; display: grid; place-items: center; border: 1px dashed #cbd0d4; border-radius: 17px; font-style: normal; font-size: 22px; }
.workflow-empty strong { margin-top: 13px; color: #555d64; }
.workflow-empty p { margin: 7px 0 0; font-size: 11px; }

.workflow-canvas-view:has(.workflow-editor:not(.hidden)) { height: 100vh; min-height: 650px; padding: 0; overflow: hidden; background: #f4f2ed; }
.workflow-editor { position: relative; height: 100%; min-height: 650px; overflow: hidden; }
.workflow-editor-toolbar { position: absolute; z-index: 18; top: 18px; left: 50%; width: min(760px, calc(100% - 210px)); height: 62px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid rgba(225,222,216,.9); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 12px 42px rgba(39,43,48,.14); backdrop-filter: blur(18px); transform: translateX(-50%); }
.workflow-editor-toolbar > button { width: 38px; height: 38px; border: 0; border-radius: 11px; background: #f2f3f4; cursor: pointer; font-size: 18px; }
.workflow-editor-toolbar > input { min-width: 120px; flex: 1; border: 0; outline: 0; background: transparent; font: 760 16px/1.2 inherit; }
.workflow-editor-toolbar > span { flex: 0 0 auto; color: #8b9399; font-size: 10px; }
.workflow-editor-toolbar > div { display: flex; align-items: center; gap: 7px; }
.workflow-editor-toolbar > div button { height: 36px; padding: 0 11px; border: 0; border-radius: 10px; background: #f2f3f4; cursor: pointer; font-size: 11px; }
.workflow-editor-toolbar .workflow-run-all { min-width: 112px; color: #fff; background: #171b1f; }
.workflow-editor-toolbar .workflow-run-all:disabled { color: #778087; background: #e2e5e7; box-shadow: none; cursor: wait; }
.workflow-node-rail { position: absolute; z-index: 20; top: 50%; left: 18px; display: grid; gap: 9px; padding: 9px; border: 1px solid #e1dfda; border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 12px 34px rgba(38,43,48,.12); transform: translateY(-50%); }
.workflow-node-rail > button { width: 42px; height: 42px; border: 0; border-radius: 12px; color: #565e65; background: transparent; cursor: pointer; font-size: 20px; }
.workflow-node-rail > button:hover,
.workflow-node-rail > button.active { color: #fff; background: #181c20; }
.workflow-node-menu { position: absolute; left: 58px; top: 0; width: 150px; padding: 8px; border: 1px solid #e1dfda; border-radius: 16px; background: #fff; box-shadow: 0 15px 42px rgba(39,44,50,.16); }
.workflow-node-menu button { width: 100%; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 11px; border: 0; border-radius: 10px; text-align: left; background: transparent; cursor: pointer; }
.workflow-node-menu button:hover { background: #f1f3f4; }
.workflow-node-menu span { font-size: 12px; }
.workflow-quick-node-menu { position: absolute; z-index: 32; width: 180px; padding: 8px; border: 1px solid #dadde0; border-radius: 15px; background: rgba(255,255,255,.98); box-shadow: 0 16px 46px rgba(31,37,42,.2); backdrop-filter: blur(14px); }
.workflow-quick-node-menu.hidden { display: none; }
.workflow-quick-node-menu > strong { display: block; padding: 7px 9px 8px; color: #848c93; font-size: 9px; letter-spacing: .06em; }
.workflow-quick-node-menu > button { width: 100%; height: 39px; display: flex; align-items: center; gap: 9px; padding: 0 8px; border: 0; border-radius: 9px; text-align: left; background: transparent; cursor: pointer; }
.workflow-quick-node-menu > button:hover { background: #f0f2f3; }
.workflow-quick-node-menu i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #1b2024; font-style: normal; font-size: 9px; }
.workflow-quick-node-menu span { font-size: 11px; }
.workflow-surface { position: absolute; inset: 0; overflow: hidden; outline: 0; cursor: grab; background-color: #f5f3ef; background-image: radial-gradient(#d5d1c9 1px, transparent 1px); background-size: 20px 20px; }
.workflow-surface.is-panning { cursor: grabbing; }
.workflow-empty-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px; color: #969fa7; font-size: 15px; font-weight: 500; letter-spacing: .02em; pointer-events: none; }
.workflow-empty-hint svg { width: 24px; height: 24px; flex: none; color: #b4bcc3; }
.workflow-empty-hint.hidden { display: none; }
.workflow-stage { position: absolute; left: 0; top: 0; width: 5000px; height: 3200px; transform-origin: 0 0; }
.workflow-edges,
.workflow-node-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.workflow-edges path { fill: none; stroke: #8d969e; stroke-width: 2.2; pointer-events: stroke; }
.workflow-edges path.selected { stroke: #171b1f; stroke-width: 3; }
.workflow-edges path.preview { stroke: #14a8b4; stroke-dasharray: 7 5; pointer-events: none; }
.workflow-node { position: absolute; width: 310px; border: 1px solid #d8dcdf; border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 12px 32px rgba(37,43,49,.12); user-select: none; }
.workflow-node.selected { border-color: #20262b; box-shadow: 0 0 0 2px rgba(32,38,43,.13), 0 15px 36px rgba(37,43,49,.15); }
.workflow-node.running { box-shadow: 0 0 0 2px rgba(20,168,180,.22), 0 15px 36px rgba(37,43,49,.15); }
.workflow-node.queued { box-shadow: 0 0 0 2px rgba(111,122,132,.16), 0 15px 36px rgba(37,43,49,.12); }
.workflow-node.failed { border-color: #d85c65; }
.workflow-node-head { height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border-bottom: 1px solid #eceeef; cursor: move; }
.workflow-node-head i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #171b1f; font-style: normal; font-size: 12px; }
.workflow-node[data-node-type="image"] .workflow-node-head i { background: #16a9b7; }
.workflow-node[data-node-type="video"] .workflow-node-head i { background: #786be6; }
.workflow-node[data-node-type="audio"] .workflow-node-head i { background: #5e80ad; }
.workflow-node[data-node-type="upload"] .workflow-node-head i { color: #122008; background: #baff6a; }
.workflow-node-head strong { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.workflow-node-head span { color: #9ca3a9; font-size: 9px; }
.workflow-node-head button { width: 28px; height: 28px; border: 0; border-radius: 8px; color: #7f878e; background: transparent; cursor: pointer; }
.workflow-node-head button:hover { color: #b73f49; background: #fff0f1; }
.workflow-node-body { display: grid; gap: 10px; padding: 13px; user-select: text; }
.workflow-node-body textarea { width: 100%; min-height: 86px; resize: vertical; box-sizing: border-box; padding: 11px; border: 1px solid #e1e4e6; border-radius: 11px; outline: 0; background: #fafbfb; font: 11px/1.6 inherit; }
.workflow-node-body textarea:focus { border-color: #93a0a9; background: #fff; }
.workflow-node-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.workflow-node-fields label { display: grid; gap: 4px; color: #899198; font-size: 9px; }
.workflow-node-fields select,
.workflow-node-fields input { width: 100%; height: 32px; box-sizing: border-box; padding: 0 8px; border: 1px solid #e1e4e6; border-radius: 8px; outline: 0; background: #fff; font-size: 10px; }
.workflow-node-fields .workflow-audio-toggle { grid-template-columns: 1fr auto; grid-column: 1 / -1; align-items: center; min-height: 32px; padding: 0 9px; border: 1px solid #e1e4e6; border-radius: 8px; color: #5f6870; background: #fff; }
.workflow-node-fields .workflow-audio-toggle input { width: 34px; height: 18px; padding: 0; accent-color: #171b1f; }
.workflow-node-library { height: 32px; border: 1px solid #dde1e4; border-radius: 9px; color: #5e6870; background: #fff; cursor: pointer; font-size: 10px; }
.workflow-node-output { min-height: 44px; overflow: hidden; padding: 9px; border-radius: 10px; color: #687078; background: #f2f4f5; font-size: 10px; line-height: 1.55; }
.workflow-node-output:empty::before { content: '结果会显示在这里'; color: #a5abb0; }
.workflow-node-output img,
.workflow-node-output video { width: 100%; max-height: 210px; display: block; border-radius: 8px; object-fit: contain; background: #171b1f; }
.workflow-node-output audio { width: 100%; height: 30px; }
.workflow-node-status { display: flex; align-items: center; gap: 6px; color: #8a9298; font-size: 9px; }
.workflow-node-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #aeb4b9; }
.workflow-node.completed .workflow-node-status::before { background: #48bb81; }
.workflow-node.running .workflow-node-status::before { background: #1ab3c0; box-shadow: 0 0 0 4px rgba(26,179,192,.12); }
.workflow-node.queued .workflow-node-status::before { background: #8b969f; box-shadow: 0 0 0 4px rgba(139,150,159,.12); }
.workflow-node.failed .workflow-node-status::before { background: #d94e59; }
.workflow-handle { position: absolute; z-index: 5; top: 31px; width: 18px; height: 18px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: #9aa2a9; box-shadow: 0 1px 5px rgba(0,0,0,.2); cursor: crosshair; }
.workflow-handle.input { left: -10px; }
.workflow-handle.output { right: -10px; background: #171b1f; }
.workflow-handle.connecting { background: #16a9b7; transform: scale(1.15); }
.workflow-upload-drop { min-height: 110px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px dashed #cbd1d5; border-radius: 12px; color: #858e95; background: #fafbfb; cursor: pointer; text-align: center; }
.workflow-upload-drop b { font-size: 24px; font-weight: 400; }
.workflow-upload-drop small { font-size: 9px; }
.workflow-zoom-controls { position: absolute; z-index: 10; left: 20px; bottom: 18px; display: flex; align-items: center; gap: 4px; padding: 6px; border: 1px solid #e1dfda; border-radius: 13px; background: rgba(255,255,255,.92); box-shadow: 0 8px 24px rgba(39,44,50,.1); }
.workflow-zoom-controls button { width: 32px; height: 30px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: 16px; }
.workflow-zoom-controls span { min-width: 48px; text-align: center; color: #747d84; font-size: 10px; }
.workflow-log-panel { position: absolute; z-index: 15; right: 18px; bottom: 18px; width: min(390px, 38vw); max-height: 170px; overflow: hidden; border: 1px solid #e0ded9; border-radius: 15px; background: rgba(255,255,255,.95); box-shadow: 0 10px 32px rgba(39,44,50,.12); }
.workflow-log-panel header { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid #ecebea; }
.workflow-log-panel header strong { font-size: 11px; }
.workflow-log-panel header button { border: 0; color: #8d959b; background: transparent; cursor: pointer; font-size: 10px; }
#workflowLog { max-height: 126px; overflow: auto; padding: 8px 12px; color: #6d757c; font: 10px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; }
#workflowLog p { margin: 0; }
#workflowLog b { color: #20262b; }
.workflow-asset-picker { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(22,26,30,.48); backdrop-filter: blur(7px); }
.workflow-asset-picker.hidden { display: none; }
.workflow-asset-picker-card { width: min(820px, 92vw); max-height: min(700px, 86vh); overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 28px 90px rgba(0,0,0,.25); }
.workflow-asset-picker-card > header { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #e8eaec; }
.workflow-asset-picker-card header strong,.workflow-asset-picker-card header small { display: block; }
.workflow-asset-picker-card header small { margin-top: 4px; color: #8b9399; font-size: 10px; }
.workflow-asset-picker-card header button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: #f1f3f4; cursor: pointer; font-size: 20px; }
.workflow-asset-picker-grid { max-height: calc(min(700px, 86vh) - 70px); overflow: auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 18px; }
.workflow-asset-picker-grid > button { min-width: 0; overflow: hidden; padding: 0; border: 1px solid #e2e5e7; border-radius: 13px; text-align: left; background: #f5f6f7; cursor: pointer; }
.workflow-asset-picker-grid img,.workflow-asset-picker-grid i { width: 100%; height: 120px; display: grid; place-items: center; object-fit: contain; color: #fff; background: #1b2024; font-style: normal; font-size: 28px; }
.workflow-asset-picker-grid span { display: block; overflow: hidden; padding: 10px; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }

@media (max-width: 980px) {
  .workflow-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .workflow-home-hero { align-items: flex-start; flex-direction: column; }
  .workflow-editor-toolbar { left: 86px; width: calc(100% - 112px); transform: none; }
  .workflow-editor-toolbar > div button:not(.workflow-run-all) { display: none; }
  .workflow-log-panel { display: none; }
}
@media (max-width: 680px) {
  body.workflow-canvas-open .app-sidebar { inset: auto 0 0; }
  .workflow-canvas-view { margin-left: 0; padding: 28px 14px 70px; }
  .workflow-card-grid { grid-template-columns: 1fr; }
  .workflow-library-panel { padding: 18px; }
  .workflow-library-panel > header { align-items: stretch; flex-direction: column; }
  .workflow-library-panel header label { width: 100%; }
  .workflow-canvas-view:has(.workflow-editor:not(.hidden)) { padding: 0; }
  .workflow-editor-toolbar { left: 12px; width: calc(100% - 24px); }
  .workflow-editor-toolbar > span { display: none; }
  .workflow-node-rail { left: 10px; }
}

/* Immersive dark editor. The workflow library above remains unchanged. */
.workflow-canvas-view:has(.workflow-editor:not(.hidden)) {
  height: 100dvh;
  background: #080a0d;
}
body.workflow-canvas-open { color: #f4f7f8; background: #080a0d; }
body.workflow-canvas-open .app-sidebar {
  border-color: rgba(183, 210, 218, .12);
  background: #090b0e;
  box-shadow: 10px 0 34px rgba(0, 0, 0, .22);
}
body.workflow-canvas-open .side-nav-item { color: #a5afb4; }
body.workflow-canvas-open .side-nav-item:hover,
body.workflow-canvas-open .side-nav-item.active { color: #fff; background: #22272c; }
body.workflow-canvas-open .side-bottom span { color: #fff; border-color: #30363c; background: #181c20; }
body.workflow-canvas-open .side-bottom small { color: #9ba5aa; }
.workflow-editor {
  --wf-canvas: #070a0f;
  --wf-panel: #10161d;
  --wf-panel-raised: #151d26;
  --wf-line: #293641;
  --wf-text: #f4f8fa;
  --wf-muted: #8e9ba4;
  --wf-signal: #72dce8;
  --wf-action: #8174ec;
  color: #edf2f4;
  background: var(--wf-canvas);
  font-family: "Segoe UI Variable", "PingFang SC", "Microsoft YaHei UI", sans-serif;
}
.workflow-surface {
  cursor: default;
  background-color: var(--wf-canvas);
  background-image:
    radial-gradient(circle at 50% 46%, rgba(62, 99, 112, .13), transparent 56%),
    radial-gradient(rgba(197, 222, 229, .12) .75px, transparent .85px);
  background-size: 100% 100%, 22px 22px;
}
.workflow-surface.is-selecting { cursor: crosshair; }
.workflow-surface.pan-shortcut { cursor: grab; }
.workflow-surface.is-panning { cursor: grabbing; }
.workflow-surface.is-long-press-pan::after { content: '拖动画布'; position: absolute; z-index: 26; left: 50%; top: 92px; padding: 7px 10px; border: 1px solid rgba(114,220,232,.24); border-radius: 8px; color: #dffbfe; background: rgba(12,18,24,.9); box-shadow: 0 10px 28px rgba(0,0,0,.34); pointer-events: none; transform: translateX(-50%); font-size: 9px; letter-spacing: .04em; }
.workflow-selection-box { position: absolute; z-index: 24; box-sizing: border-box; border: 1px solid rgba(114,220,232,.95); border-radius: 8px; background: rgba(76,177,193,.12); box-shadow: 0 0 0 1px rgba(114,220,232,.12), inset 0 0 26px rgba(114,220,232,.06); pointer-events: none; }
.workflow-selection-box::after { content: attr(data-count) ' 个节点'; position: absolute; left: -1px; top: -25px; padding: 4px 7px; border: 1px solid rgba(114,220,232,.28); border-radius: 6px; color: #dffbfe; background: #111a21; box-shadow: 0 6px 16px rgba(0,0,0,.3); white-space: nowrap; font-size: 8px; }
.workflow-editor-toolbar {
  top: 16px;
  right: 18px;
  left: 18px;
  width: auto;
  height: 56px;
  gap: 8px;
  padding: 0 9px;
  border-color: rgba(164, 197, 207, .17);
  border-radius: 17px;
  color: #edf2f4;
  background: rgba(14, 19, 25, .93);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .055);
  backdrop-filter: blur(22px) saturate(1.15);
  transform: none;
}
.workflow-editor-toolbar > input { color: var(--wf-text); font-size: 14px; letter-spacing: -.015em; }
.workflow-editor-toolbar > span { color: #87949b; }
.workflow-editor-toolbar > button,
.workflow-editor-toolbar > div button {
  min-width: 36px;
  height: 36px;
  border: 1px solid rgba(174, 201, 209, .12);
  border-radius: 10px;
  color: #cbd5da;
  background: #1a222a;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.workflow-editor-toolbar > button:hover,
.workflow-editor-toolbar > div button:hover { color: #fff; border-color: #3b4b57; background: #222d36; }
.workflow-editor-toolbar > button:active,
.workflow-editor-toolbar > div button:active { transform: scale(.97); }
.workflow-editor-toolbar .workflow-run-all {
  color: #fff;
  border-color: rgba(160, 150, 255, .38);
  background: var(--wf-action);
  box-shadow: 0 8px 24px rgba(93, 78, 214, .24), inset 0 1px rgba(255, 255, 255, .16);
}
.workflow-editor-toolbar .workflow-run-all:hover:not(:disabled) { color: #fff; border-color: #b0a8ff; background: #9185f4; }
body.workflow-canvas-open .workflow-editor .workflow-editor-toolbar > button,
body.workflow-canvas-open .workflow-editor .workflow-editor-toolbar > div button { color: #cbd5da; border-color: rgba(174, 201, 209, .12); background: #1a222a; box-shadow: inset 0 1px rgba(255,255,255,.035); }
body.workflow-canvas-open .workflow-editor .workflow-editor-toolbar > button:hover:not(:disabled),
body.workflow-canvas-open .workflow-editor .workflow-editor-toolbar > div button:hover:not(:disabled) { color: #fff; border-color: #3b4b57; background: #222d36; }
body.workflow-canvas-open .workflow-editor .workflow-editor-toolbar .workflow-run-all { color: #fff; border-color: rgba(160,150,255,.38); background: var(--wf-action); box-shadow: 0 8px 24px rgba(93,78,214,.24), inset 0 1px rgba(255,255,255,.16); }
.workflow-node-rail {
  top: auto;
  bottom: 16px;
  left: 50%;
  display: flex;
  gap: 3px;
  padding: 6px;
  border-color: rgba(164, 197, 207, .17);
  border-radius: 16px;
  background: rgba(15, 20, 27, .94);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .055);
  backdrop-filter: blur(22px) saturate(1.15);
  transform: translateX(-50%);
}
.workflow-node-rail > button { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #84939c; transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.workflow-node-rail > button svg,
.workflow-node-menu button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workflow-node-rail > button:hover,
.workflow-node-rail > button.active { color: #fff; background: rgba(114, 220, 232, .13); box-shadow: inset 0 0 0 1px rgba(114, 220, 232, .25); }
.workflow-node-rail > button:first-child { color: #fff; background: var(--wf-action); box-shadow: 0 7px 18px rgba(91, 76, 214, .3), inset 0 1px rgba(255, 255, 255, .16); }
.workflow-node-rail > button:first-child:hover { background: #9185f4; }
.workflow-node-rail > button:active { transform: scale(.95); }
.workflow-node-rail > button::after { content: attr(aria-label); position: absolute; bottom: calc(100% + 12px); left: 50%; width: max-content; max-width: 150px; padding: 6px 8px; border: 1px solid #2e3a44; border-radius: 7px; color: #dfe7ea; background: #111820; box-shadow: 0 8px 22px rgba(0,0,0,.34); opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .14s ease, transform .14s ease; font-size: 9px; }
.workflow-node-rail > button:hover::after { opacity: 1; transform: translate(-50%, 0); }
.workflow-shortcuts-panel {
  position: absolute;
  z-index: 32;
  bottom: 78px;
  left: 50%;
  width: min(980px, calc(100% - 44px));
  box-sizing: border-box;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(164, 197, 207, .18);
  border-radius: 20px;
  color: #dce4e7;
  background: rgba(13, 18, 24, .97);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .055);
  backdrop-filter: blur(24px) saturate(1.15);
  transform: translateX(-50%);
}
.workflow-shortcuts-panel::before { content: ''; position: absolute; inset: 0 22% auto; height: 2px; background: linear-gradient(90deg, transparent, var(--wf-signal), var(--wf-action), transparent); opacity: .9; }
.workflow-shortcuts-panel.hidden { display: none; }
.workflow-shortcuts-panel > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 0 2px; }
.workflow-shortcuts-panel > header div { display: grid; gap: 3px; }
.workflow-shortcuts-panel > header strong { color: #fff; font-size: 15px; letter-spacing: -.02em; }
.workflow-shortcuts-panel > header small { color: #73828c; font-size: 9px; }
.workflow-shortcuts-panel > header button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 9px; color: #8998a1; background: transparent; cursor: pointer; }
.workflow-shortcuts-panel > header button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.workflow-shortcuts-panel > header button:hover { color: #fff; border-color: #33414c; background: #1a232c; }
.workflow-shortcuts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.workflow-shortcuts-grid > section { min-width: 0; padding: 14px; border: 1px solid rgba(157, 190, 201, .11); border-radius: 14px; background: rgba(20, 28, 36, .74); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.workflow-shortcuts-grid > section:first-child { padding-left: 14px; border-left: 1px solid rgba(157, 190, 201, .11); }
.workflow-shortcuts-grid > section:last-child { padding-right: 14px; }
.workflow-shortcuts-grid h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; color: #dfe7ea; font-size: 10px; font-weight: 680; letter-spacing: .04em; }
.workflow-shortcuts-grid h3::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--wf-signal); box-shadow: 0 0 10px rgba(114,220,232,.65); }
.workflow-shortcuts-grid > section:nth-child(2n) h3::before { background: #a59bff; box-shadow: 0 0 10px rgba(129,116,236,.65); }
.workflow-shortcuts-grid p { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 0 5px; border-radius: 8px; color: #96a4ac; font-size: 9px; transition: color .14s ease, background .14s ease; }
.workflow-shortcuts-grid p:hover { color: #edf3f5; background: rgba(255,255,255,.035); }
.workflow-editor .workflow-shortcuts-panel { width: min(1280px, calc(100% - 48px)); max-height: calc(100dvh - 110px); overflow-y: auto; padding: 24px; }
.workflow-shortcuts-panel > header strong { font-size: 22px; }
.workflow-shortcuts-panel > header small { font-size: 13px; color: #a8b5be; }
.workflow-shortcuts-grid h3 { font-size: 16px; margin-bottom: 14px; }
.workflow-shortcuts-grid p { min-height: 42px; font-size: 15px; color: #d3dde3; }
.workflow-editor .workflow-shortcuts-grid kbd { font-size: 13px; line-height: 1.3; padding: 6px 8px; }
.workflow-shortcuts-grid kbd { flex: 0 0 auto; min-width: 24px; padding: 5px 7px 4px; border: 1px solid #3b4852; border-bottom-color: #53616b; border-radius: 6px; color: #eef3f5; text-align: center; background: #202a33; box-shadow: 0 2px 0 #080b0e, inset 0 1px rgba(255,255,255,.06); font: 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.workflow-node-menu {
  top: auto;
  bottom: 60px;
  left: 50%;
  width: min(420px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 6px;
  padding: 7px;
  border-radius: 15px;
  transform: translateX(-50%);
}
.workflow-node-menu.hidden { display: none; }
.workflow-node-menu button { height: 62px; flex-direction: column; justify-content: center; gap: 6px; padding: 0 6px; border: 1px solid transparent; text-align: center; }
.workflow-node-menu button:hover { border-color: #36454f; }
.workflow-node-menu button i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #dffbfe; background: rgba(114,220,232,.12); font-style: normal; font-size: 10px; }
.workflow-node-menu button:nth-child(3) i,
.workflow-node-menu button:nth-child(4) i { color: #e5e1ff; background: rgba(129,116,236,.16); }
.workflow-node-menu button[data-canvas-action] { grid-column: span 2; height: 42px; flex-direction: row; }
.workflow-node-menu button[data-canvas-action] svg { width: 16px; height: 16px; color: var(--wf-signal); }
.workflow-node-menu span { font-size: 10px; }
.workflow-node-menu,
.workflow-quick-node-menu,
.workflow-node-context-menu {
  border-color: rgba(183, 210, 218, .16);
  color: #dce4e7;
  background: rgba(20, 24, 28, .98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42);
}
.workflow-node-menu button,
.workflow-quick-node-menu > button,
.workflow-node-context-menu > button { color: #dce4e7; }
body.workflow-canvas-open .workflow-zoom-controls button { color: #edf3f6; border-color: #34454f; background: #1b2831; }
body.workflow-canvas-open .workflow-node-menu button:is(:hover, :focus-visible),
body.workflow-canvas-open .workflow-quick-node-menu > button:is(:hover, :focus-visible),
body.workflow-canvas-open .workflow-asset-picker-grid > button:is(:hover, :focus-visible),
body.workflow-canvas-open .workflow-zoom-controls button:is(:hover, :focus-visible),
body.workflow-canvas-open .workflow-asset-picker-card header button:is(:hover, :focus-visible) { color: #edf3f6; border-color: #547280; background: #243640; box-shadow: inset 0 0 0 1px #547280; }

.workflow-node-context-menu > button:hover:not(:disabled) { background: #2b3237; }
.workflow-quick-node-menu i { color: #fff; background: #187e89; }
.workflow-node-context-menu { position: absolute; z-index: 34; width: 224px; padding: 8px; border: 1px solid; border-radius: 14px; backdrop-filter: blur(18px); }
.workflow-node-context-menu.hidden { display: none; }
.workflow-node-context-menu > button { width: 100%; min-height: 38px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 0 10px; border: 0; border-radius: 8px; text-align: left; background: transparent; cursor: pointer; }
.workflow-node-context-menu > button:disabled { opacity: .38; cursor: default; }
.workflow-node-context-menu > button.danger:hover { color: #ffd9dc; background: #633138; }
.workflow-node-context-menu kbd { color: #77848a; font: 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.workflow-node-context-menu .danger kbd { color: #b88f94; }
.workflow-context-separator { height: 1px; margin: 6px 4px; background: rgba(183, 210, 218, .12); }
.workflow-node {
  color: #f4f7f8;
  border-color: #2a3741;
  border-radius: 16px;
  background: #111820;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .025);
  overflow: visible;
}
.workflow-node[data-node-type="text"] { width: 360px; }
.workflow-node[data-node-type="image"][data-preview-ratio="9:16"],
.workflow-node[data-node-type="video"][data-preview-ratio="9:16"] { width: 230px; }
.workflow-node[data-node-type="image"][data-preview-ratio="1:1"],
.workflow-node[data-node-type="video"][data-preview-ratio="1:1"] { width: 300px; }
.workflow-node[data-node-type="image"][data-preview-ratio="16:9"],
.workflow-node[data-node-type="video"][data-preview-ratio="16:9"] { width: 410px; }
.workflow-node.selected {
  border-color: var(--wf-signal);
  box-shadow: 0 0 0 2px rgba(114, 220, 232, .18), 0 0 28px rgba(70, 192, 206, .12), 0 22px 54px rgba(0, 0, 0, .46);
}
.workflow-node.multi-selected::after { content: '已选'; position: absolute; z-index: 12; right: 7px; top: 7px; padding: 4px 6px; border-radius: 6px; color: #071014; background: var(--wf-signal); box-shadow: 0 5px 14px rgba(0,0,0,.34); pointer-events: none; font-size: 8px; font-weight: 750; }
.workflow-node-head { border-color: #26323b; background: #151d25; }
.workflow-node-head strong { color: #fff; }
.workflow-node-head span { color: #8f9aa0; }
.workflow-node-head button { color: #9da7ac; }
.workflow-node-head button:hover { color: #fff; background: #633138; }
.workflow-node[data-node-type="text"] .workflow-node-head,
.workflow-node[data-node-type="image"] .workflow-node-head,
.workflow-node[data-node-type="video"] .workflow-node-head {
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  left: 0;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
}
.workflow-node[data-node-type="text"] .workflow-node-head i,
.workflow-node[data-node-type="image"] .workflow-node-head i,
.workflow-node[data-node-type="video"] .workflow-node-head i { width: 18px; height: 18px; border-radius: 5px; font-size: 9px; }
.workflow-node[data-node-type="text"] .workflow-node-head strong,
.workflow-node[data-node-type="image"] .workflow-node-head strong,
.workflow-node[data-node-type="video"] .workflow-node-head strong { color: #aeb8bd; font-size: 11px; font-weight: 550; }
.workflow-node[data-node-type="text"] .workflow-node-head span,
.workflow-node[data-node-type="image"] .workflow-node-head span,
.workflow-node[data-node-type="video"] .workflow-node-head span { display: none; }
.workflow-node[data-node-type="text"] .workflow-node-head button,
.workflow-node[data-node-type="image"] .workflow-node-head button,
.workflow-node[data-node-type="video"] .workflow-node-head button { display: none; }
.workflow-node[data-node-type="text"] .workflow-node-body,
.workflow-node[data-node-type="image"] .workflow-node-body,
.workflow-node[data-node-type="video"] .workflow-node-body { gap: 0; padding: 0; cursor: grab; }
.workflow-node[data-node-type="text"] .workflow-node-body:active,
.workflow-node[data-node-type="image"] .workflow-node-body:active,
.workflow-node[data-node-type="video"] .workflow-node-body:active { cursor: grabbing; }
.workflow-node-compose-panel,
.workflow-node-result-panel { display: grid; gap: 10px; padding: 13px; }
.workflow-node-compose-panel > header,
.workflow-node-result-panel > header { display: flex; align-items: center; justify-content: space-between; }
.workflow-node-compose-panel > header strong,
.workflow-node-result-panel > header strong { color: #f5f8f9; font-size: 10px; font-weight: 650; }
.workflow-node-compose-panel > header span,
.workflow-node-result-panel > header span { color: #77848a; font-size: 9px; }
.workflow-node-result-panel { min-height: 158px; align-content: start; border-bottom: 1px solid #292f34; background: #0d1013; }
.workflow-node[data-node-type="text"] .workflow-node-result-panel { min-height: 74px; border-top: 1px solid #292f34; border-bottom: 0; }
.workflow-node-compose-panel { background: #15181c; }
.workflow-node[data-node-type="text"] .workflow-node-result-panel,
.workflow-node[data-node-type="image"] .workflow-node-result-panel,
.workflow-node[data-node-type="video"] .workflow-node-result-panel { width: 100%; min-height: 0; align-content: stretch; padding: 0; overflow: hidden; border: 0; border-radius: 17px 17px 0 0; }
.workflow-node[data-node-type="text"] .workflow-node-result-panel { min-height: 120px; }
.workflow-node[data-node-type="image"][data-preview-ratio="9:16"] .workflow-node-result-panel,
.workflow-node[data-node-type="video"][data-preview-ratio="9:16"] .workflow-node-result-panel { aspect-ratio: 9 / 16; }
.workflow-node[data-node-type="image"][data-preview-ratio="1:1"] .workflow-node-result-panel,
.workflow-node[data-node-type="video"][data-preview-ratio="1:1"] .workflow-node-result-panel { aspect-ratio: 1 / 1; }
.workflow-node[data-node-type="image"][data-preview-ratio="16:9"] .workflow-node-result-panel,
.workflow-node[data-node-type="video"][data-preview-ratio="16:9"] .workflow-node-result-panel { aspect-ratio: 16 / 9; }
.workflow-node-editor {
  position: absolute;
  z-index: 12;
  top: calc(100% + 14px);
  left: 50%;
  width: min(860px, calc(100vw - 110px));
  box-sizing: border-box;
  border: 1px solid #30363b;
  border-radius: 17px;
  box-shadow: 0 22px 56px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .04);
  transform: translateX(-50%);
  user-select: text;
  cursor: default;
}
.workflow-node-editor { padding: 20px; gap: 16px; max-height: 65vh; overflow-y: auto; }
.workflow-node-editor > header strong { font-size: 20px; }
.workflow-node-editor > header span { font-size: 14px; }
.workflow-node-editor .workflow-prompt-box { padding: 14px; border: 1px solid #34454f; border-radius: 12px; background: #0d1013; }
.workflow-node-editor .workflow-prompt-box:focus-within { border-color: #72dce8; }
.workflow-node-editor .workflow-prompt-box textarea { width: 100%; min-height: 170px; padding: 8px 0; border: 0; border-radius: 0; font-size: 18px; line-height: 1.6; background: transparent; box-shadow: none; }
.workflow-node-editor .workflow-reference-list { padding: 2px 0 12px; }
.workflow-node-editor .workflow-reference-chip { flex: 0 0 60px; width: 60px; height: 60px; }
.workflow-node-editor .workflow-reference-chip :is(img, video) { width: 100%; height: 100%; }
.workflow-node-editor .workflow-reference-actions button { min-height: 36px; font-size: 15px; padding: 6px 12px; }
.workflow-node-editor .workflow-node-fields { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.workflow-node-editor .workflow-node-fields label { font-size: 15px; }
.workflow-node-editor .workflow-node-fields label { width: 90px; min-width: 0; }
.workflow-node-editor .workflow-node-fields label:first-child { width: 210px; }
.workflow-node-editor .workflow-node-fields :is(select, input) { width: 100%; min-width: 0; text-overflow: ellipsis; }
.workflow-node-editor .workflow-node-fields :is(input, select) { height: 42px; font-size: 16px; }
.workflow-node-editor .workflow-node-library { min-height: 38px; font-size: 14px; }
.workflow-node-toolbar { display: flex; align-items: center; gap: 8px; }
.workflow-node-toolbar .workflow-node-fields { flex: 0 1 235px; }
.workflow-node-submit { display: flex; flex: 0 0 auto; margin-left: auto; align-items: center; gap: 10px; height: 40px; padding: 3px; border: 0; border-radius: 10px; background: transparent; }
.workflow-node-price { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 48px; padding: 0 10px 0 4px; border-right: 1px solid #ffffff18; color: #a9afb7; font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; }
.workflow-node-price svg { width: 13px; height: 13px; }
.workflow-node-submit button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #ffffff18; border-radius: 10px; background: #e1e4ea; color: #252831; cursor: pointer; }
.workflow-node-submit button svg { width: 20px; height: 20px; }
.workflow-node-submit button:hover:not(:disabled) { background: #f0f1f5; }
.workflow-node-submit button:disabled { opacity: .45; cursor: not-allowed; }
.workflow-price-spinner { display: block; width: 17px; height: 17px; border: 2px solid #52606c; border-top-color: #bdb4ff; border-radius: 50%; animation: workflowPriceSpin .7s linear infinite; }
@keyframes workflowPriceSpin { to { transform: rotate(360deg); } }
.workflow-param-control { min-width: 0; }
.workflow-node-editor .workflow-param-trigger { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #d9dde3; font-size: 14px; font-weight: 400; white-space: nowrap; cursor: pointer; }
.workflow-model-control { min-width: 0; width: 100%; }
.workflow-model-control select[hidden] { display: none; }
.workflow-node-editor .workflow-model-trigger { display: flex; align-items: center; gap: 8px; height: 38px; width: 100%; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #d9dde3; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.4; cursor: pointer; }
.workflow-model-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 400; }
.workflow-model-trigger svg { flex: 0 0 16px; }
.workflow-model-trigger svg:last-child { margin-left: auto; width: 12px; opacity: .55; }
.workflow-node-editor :is(.workflow-model-trigger,.workflow-param-trigger):hover,
.workflow-node-editor :is(.workflow-model-trigger,.workflow-param-trigger)[aria-expanded="true"] { background: #ffffff08; border-color: #ffffff0a; }
.workflow-node-editor .workflow-param-trigger { border-left-color: #ffffff18; border-radius: 0 7px 7px 0; }
.workflow-param-trigger > svg { width: 12px; opacity: .55; }
.workflow-model-menu { position: fixed; inset: auto; box-sizing: border-box; margin: 0; width: min(340px, calc(100vw - 24px)); max-height: min(420px, calc(100vh - 24px)); overflow: auto; padding: 8px; border: 1px solid #ffffff15; border-radius: 12px; background: #20262d; color: #d9dde3; box-shadow: 0 10px 32px #0005; font: 14px/1.5 system-ui, sans-serif; }
.workflow-model-menu::backdrop { background: transparent; }
.workflow-model-caption { padding: 5px 10px 9px; color: #909aa5; font-size: 12px; }
.workflow-model-menu button { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: #cbd1d8; text-align: left; font: inherit; font-weight: 400; cursor: pointer; }
.workflow-model-menu button:hover { background: #ffffff07; }
.workflow-model-menu button[aria-pressed="true"] { background: #ffffff0c; color: #f0edf8; }
.workflow-model-menu button > svg { flex: 0 0 15px; margin-top: 8px; color: #b4a8e5; }
.workflow-model-copy { display: grid; min-width: 0; gap: 2px; }
.workflow-model-name { display: flex; align-items: center; min-width: 0; gap: 7px; }
.workflow-model-name strong { min-width: 0; overflow: hidden; color: #eef1f4; font-size: 13px; font-weight: 600; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.workflow-model-face { flex: 0 0 auto; padding: 1px 5px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.workflow-model-face.is-open { color: #8ce3b8; background: #143c2d; }
.workflow-model-face.is-locked { color: #ff9f8f; background: #47231f; }
.workflow-model-summary { display: block; max-width: 100%; overflow: hidden; color: #8f9aa5; font-size: 11px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.workflow-model-menu button:focus-visible,.workflow-model-trigger:focus-visible { outline: 1px solid #b4a8e5; outline-offset: -2px; }
.workflow-param-trigger b { color: #96a2ae; }
.workflow-param-card { position: fixed; inset: auto; margin: 0; width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 20px; box-sizing: border-box; border: 1px solid #46515c; border-radius: 14px; color: #e5eaf0; background: #20262d; box-shadow: 0 12px 40px #0006; font: 14px/1.5 system-ui, sans-serif; }
.workflow-param-card::backdrop { background: transparent; }
.workflow-param-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.workflow-param-card header strong { font-size: 16px; }
.workflow-param-card header button { width: 28px; height: 28px; border: 0; border-radius: 6px; background: #303943; color: #ccd6dd; font-size: 20px; cursor: pointer; }
.workflow-param-card fieldset { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.workflow-param-card legend { margin-bottom: 8px; color: #aab7c3; font-size: 14px; }
.workflow-param-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.workflow-ratio-choices { grid-template-columns: repeat(3, 1fr); }
.workflow-ratio-choices .workflow-param-choice span { flex-direction: column; gap: 8px; height: 74px; font-variant-numeric: tabular-nums; }
.workflow-ratio-icon { display: block; box-sizing: border-box; border: 1px solid currentColor; border-radius: 2px; opacity: .85; }
.workflow-param-choice { position: relative; cursor: pointer; }
.workflow-param-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.workflow-param-choice span { display: flex; min-height: 36px; align-items: center; justify-content: center; border: 1px solid #ffffff20; border-radius: 7px; background: transparent; color: #aeb6bf; }
.workflow-param-choice:hover span { background: #ffffff05; }
.workflow-param-choice input:checked + span { border-color: #b9b2ce; background: #ffffff09; color: #f1eeff; }
.workflow-param-choice input:focus-visible + span { outline: 2px solid #72dce8; outline-offset: 2px; }
.workflow-param-duration { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: #aab7c3; }
.workflow-duration-value { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.workflow-duration-value input { width: 54px; height: 30px; padding: 3px 5px; border: 1px solid #46515c; border-radius: 6px; background: #282f37; color: #e7eaf1; font: inherit; text-align: center; }
.workflow-param-duration input[type="range"] { width: 100%; height: 16px; margin: 0; accent-color: #a99ded; }
.workflow-param-card label, .workflow-param-card span { font-weight: 400; }
.workflow-param-card header strong { font-weight: 600; }
.workflow-node-editor .workflow-prompt-box textarea { font-weight: 400; }
.workflow-param-audio { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid #39434b; }
.workflow-param-audio input { appearance: none; width: 38px; height: 22px; padding: 3px; border-radius: 20px; background: #505963; cursor: pointer; }
.workflow-param-audio input::before { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; background: #e8ecf1; transition: transform .15s; }
.workflow-param-audio input:checked { background: #7968cb; }
.workflow-param-audio input:checked::before { transform: translateX(16px); }
.workflow-param-trigger:focus-visible, .workflow-param-audio input:focus-visible, .workflow-node-submit button:focus-visible { outline: 2px solid #72dce8; outline-offset: 2px; }
@media (max-width: 700px) { .workflow-node-toolbar { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .workflow-price-spinner { animation-duration: 2s; } .workflow-param-audio input::before { transition: none; } }
.workflow-node-body textarea {
  color: #f4f7f8;
  border-color: #343b40;
  background: #0d1013;
}
.workflow-node-body textarea::placeholder { color: #67747b; }
.workflow-node-body textarea:focus { color: #fff; border-color: #58c6d2; background: #0a0d10; box-shadow: 0 0 0 2px rgba(88, 198, 210, .12); }
.workflow-node-fields label { color: #a3adb2; }
.workflow-node-fields-single { grid-template-columns: 1fr; }
.workflow-node-fields select,
.workflow-node-fields input {
  color: #f4f7f8;
  border-color: #343b40;
  background: #0d1013;
}
.workflow-node-fields select:focus,
.workflow-node-fields input:focus { border-color: #58c6d2; box-shadow: 0 0 0 2px rgba(88, 198, 210, .12); }
.workflow-node-fields select option { color: #f4f7f8; background: #15181c; }
.workflow-node-fields select:disabled,
.workflow-node-fields input:disabled { color: #7c878d; opacity: 1; }
.workflow-node-fields .workflow-audio-toggle { color: #d7dee1; border-color: #343b40; background: #0d1013; }
.workflow-node-fields .workflow-audio-toggle input { accent-color: #5fd4df; }
.workflow-node-library { color: #e3e8ea; border-color: #343b40; background: #20252a; transition: background .2s ease, border-color .2s ease; }
.workflow-node-library:hover { border-color: #4c575e; background: #292f34; }
.workflow-node-output {
  color: #d7dee1;
  border: 1px solid #292f34;
  background: #090b0e;
}
.workflow-node-output:empty::before { content: attr(data-empty-label); color: #667279; }
.workflow-node-result-panel .workflow-node-output { min-height: 0; width: 100%; display: grid; place-items: center; justify-self: center; padding: 0; aspect-ratio: 16 / 9; transition: width .24s ease, aspect-ratio .24s ease; }
.workflow-node[data-node-type="text"] .workflow-node-result-panel .workflow-node-output,
.workflow-node[data-node-type="image"] .workflow-node-result-panel .workflow-node-output,
.workflow-node[data-node-type="video"] .workflow-node-result-panel .workflow-node-output { width: 100%; height: 100%; min-height: 100%; border: 0; border-radius: 0; aspect-ratio: auto; }
.workflow-node-result-panel[data-preview-ratio="9:16"] .workflow-node-output { width: 44%; aspect-ratio: 9 / 16; }
.workflow-node-result-panel[data-preview-ratio="1:1"] .workflow-node-output { width: 68%; aspect-ratio: 1 / 1; }
.workflow-node-result-panel[data-preview-ratio="16:9"] .workflow-node-output { width: 100%; aspect-ratio: 16 / 9; }
.workflow-node-result-panel .workflow-node-output img,
.workflow-node-result-panel .workflow-node-output video { width: 100%; max-height: 230px; border-radius: 9px; }
.workflow-node[data-node-type="image"] .workflow-node-output img,
.workflow-node[data-node-type="video"] .workflow-node-output video { height: 100%; max-height: none; border-radius: 0; object-fit: contain; }
.workflow-node[data-node-type="text"] .workflow-text-result { height: 300px; min-height: 300px; background: #202326; }
.workflow-text-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px 24px; text-align: center; }
.workflow-text-empty svg { width: 58px; height: 58px; margin-bottom: 10px; color: #626970; }
.workflow-text-shortcuts { display: grid; gap: 5px; width: 100%; text-align: left; }
.workflow-text-shortcuts > span { color: #969fa7; font-size: 13px; margin-bottom: 5px; }
.workflow-text-shortcuts button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #e0e4e8; background: transparent; border: 1px solid transparent; border-radius: 8px; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.workflow-text-shortcuts button:hover { background: #ffffff0b; border-color: #ffffff12; }
.workflow-text-shortcuts button:focus-visible { outline: 2px solid #72dce8; outline-offset: 2px; }
.workflow-manual-text { box-sizing: border-box; width: 100%; height: 300px; padding: 20px; border: 0; outline: none; background: transparent; color: #e0e4e8; font: inherit; font-size: 16px; line-height: 1.8; resize: none; }
.workflow-manual-text:focus-visible { box-shadow: inset 0 0 0 1px #72dce877; }
.workflow-text-model-pending { color: #969fa7; font-size: 14px; padding: 8px 0; }
.workflow-node[data-node-type="text"] .workflow-text-result .workflow-text-content { display: block; box-sizing: border-box; height: 300px; min-height: 0; overflow: auto; padding: 24px; color: #e0e4e8; background: transparent; font-size: 16px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; cursor: text; overscroll-behavior: contain; }
.workflow-text-content:focus-visible { outline: 2px solid #72dce8; outline-offset: -3px; }
.workflow-node-editor.workflow-text-editor { width: min(660px, calc(100vw - 110px)); padding: 16px; gap: 12px; border-color: #363b40; border-radius: 16px; background: #202326; box-shadow: 0 12px 32px #00000030; }
.workflow-text-editor .workflow-prompt-box { padding: 0 2px; border: 1px solid transparent; border-radius: 8px; background: transparent; }
.workflow-text-editor .workflow-prompt-box:focus-within { border-color: #ffffff16; }
.workflow-text-editor .workflow-prompt-box textarea { min-height: 115px; padding: 10px; color: #e0e4e8; font-size: 17px; line-height: 1.75; resize: vertical; }
.workflow-text-editor .workflow-prompt-box textarea::placeholder { color: #969fa7; }
.workflow-text-editor .workflow-node-toolbar { gap: 12px; }
.workflow-text-editor .workflow-node-toolbar .workflow-node-fields { flex: 0 1 280px; }
@media (max-width: 680px) { .workflow-node-editor.workflow-text-editor { width: calc(100vw - 34px); } }
.workflow-model-warning { margin: 0; padding: 8px 9px; border: 1px solid rgba(232, 125, 94, .28); border-radius: 8px; color: #ffc0ad; background: rgba(116, 49, 37, .24); font-size: 9px; line-height: 1.45; }
.workflow-upload-drop { color: #a6b0b5; border-color: #3a4248; background: #0d1013; }
.workflow-upload-drop:hover { color: #fff; border-color: #58c6d2; background: #10161a; }
.workflow-node-status { padding: 8px 10px; color: #8e9aa2; }
.workflow-handle { top: 50%; width: 18px; height: 18px; box-sizing: border-box; border: 3px solid var(--wf-canvas); background: #dce8ec; box-shadow: 0 0 0 1px rgba(220, 232, 236, .42), 0 0 12px rgba(171, 203, 214, .28), 0 2px 8px rgba(0, 0, 0, .58); transform: translateY(-50%); transition: transform .15s ease, box-shadow .15s ease; }
.workflow-handle:hover { transform: translateY(-50%) scale(1.12); }
.workflow-handle.input { left: -9px; }
.workflow-handle.output { right: -9px; }
.workflow-handle.output { background: var(--wf-signal); box-shadow: 0 0 0 1px rgba(151, 241, 248, .52), 0 0 18px rgba(98, 230, 242, .58); }
.workflow-handle.connecting { background: #baff6a; transform: translateY(-50%) scale(1.15); }

.workflow-edges path { fill: none; vector-effect: non-scaling-stroke; }
.workflow-edges .workflow-edge-hit {
  stroke: transparent;
  stroke-width: 16;
  pointer-events: stroke;
}
.workflow-edges .workflow-edge-base {
  stroke: #a7b8bf;
  stroke-width: 3.6;
  stroke-linecap: round;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(167, 184, 191, .48));
}
.workflow-edges .workflow-edge-flow {
  stroke: #b8f8fc;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-dasharray: 18 24;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(116, 238, 246, .92));
  animation: workflowEdgeFlow .5s linear infinite;
  animation-play-state: paused;
  transition: opacity .18s ease, stroke .18s ease, stroke-width .18s ease;
}
.workflow-edges .workflow-edge-base.connected { stroke: #a9f5fa; stroke-width: 4.2; filter: drop-shadow(0 0 5px rgba(98, 230, 242, .62)); }
.workflow-edges .workflow-edge-flow.connected { opacity: 1; animation-play-state: running; }
.workflow-edges .workflow-edge-base.selected { stroke: #d7ffab; stroke-width: 4; }
.workflow-edges .workflow-edge-flow.selected { opacity: 1; stroke: #baff6a; stroke-width: 4; filter: drop-shadow(0 0 6px rgba(186, 255, 106, .82)); animation-play-state: running; }
.workflow-edges path.preview.workflow-edge-base { stroke: #7e8d94; stroke-dasharray: 5 7; }
.workflow-edges path.preview.workflow-edge-flow { stroke: #baff6a; }
@keyframes workflowEdgeFlow { to { stroke-dashoffset: -42; } }

.workflow-zoom-controls {
  overflow: hidden;
  border-color: rgba(164, 197, 207, .17);
  border-radius: 13px;
  color: #dce4e7;
  background: rgba(15, 20, 27, .94);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .045);
  backdrop-filter: blur(18px);
}
.workflow-zoom-controls button { color: #dce4e7; }
.workflow-zoom-controls button:hover { color: #fff; background: rgba(114, 220, 232, .13); }
.workflow-zoom-controls span { color: #9ba8ae; font-variant-numeric: tabular-nums; }
.workflow-log-panel {
  width: min(360px, 38vw);
  max-height: 220px;
  overflow: hidden;
  border-color: rgba(164, 197, 207, .17);
  border-radius: 14px;
  color: #dce4e7;
  background: rgba(15, 20, 27, .94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .44), inset 0 1px rgba(255, 255, 255, .045);
  backdrop-filter: blur(18px);
}
.workflow-log-panel:not([open]) { width: 148px; }
.workflow-log-panel summary {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  list-style: none;
  cursor: pointer;
}
.workflow-log-panel summary::-webkit-details-marker { display: none; }
.workflow-log-panel summary strong { color: #dfe7ea; font-size: 10px; letter-spacing: .03em; }
.workflow-log-panel summary span::before { content: '展开'; color: #829097; font-size: 10px; }
.workflow-log-panel[open] summary span::before { content: '收起'; }
.workflow-log-panel #workflowLog { border-top: 1px solid rgba(183, 210, 218, .12); color: #9eabb1; }
.workflow-log-panel #workflowLog b { color: #e7edef; }
.workflow-log-panel footer { display: flex; justify-content: flex-end; padding: 0 10px 9px; }
.workflow-log-panel footer button { border: 0; color: #89979d; background: transparent; cursor: pointer; font-size: 10px; }
.workflow-log-panel footer button:hover { color: #fff; }
.workflow-editor button:focus-visible,
.workflow-editor input:focus-visible,
.workflow-editor summary:focus-visible { outline: 2px solid var(--wf-signal); outline-offset: 2px; }
.workflow-asset-picker { background: rgba(4, 6, 8, .76); }
.workflow-asset-picker-card { color: #f4f7f8; border: 1px solid #30363b; background: #121519; box-shadow: 0 28px 90px rgba(0, 0, 0, .52); }
.workflow-asset-picker-card > header { border-color: #292f34; }
.workflow-asset-picker-card header small { color: #919ca2; }
.workflow-asset-picker-card header button { color: #fff; background: #252b30; }
.workflow-asset-picker-grid > button { color: #e8edef; border-color: #30373c; background: #1a1e22; }
.workflow-asset-picker-grid > button:hover { border-color: #58c6d2; background: #20262b; }
.workflow-asset-picker-grid > button.selected { border-color: #67e6f1; box-shadow: 0 0 0 2px rgba(103, 230, 241, .25); }

/* 素材节点只显示素材本身，尺寸跟随文件原始比例。 */
.workflow-node.has-visual-asset { width: var(--workflow-media-width); }
.workflow-node.has-visual-asset .workflow-node-result-panel { aspect-ratio: var(--workflow-media-ratio); background: transparent; }
.workflow-node.has-visual-asset .workflow-node-output { height: auto !important; min-height: 0 !important; aspect-ratio: var(--workflow-media-ratio) !important; background: transparent; }
.workflow-node.has-visual-asset .workflow-node-output img,
.workflow-node.has-visual-asset .workflow-node-output video { width: 100%; height: auto !important; max-height: none; border-radius: 0; object-fit: contain; background: transparent; }
.workflow-node.standalone-asset { width: var(--workflow-media-width); border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.workflow-node.standalone-asset.selected { border: 0; box-shadow: 0 0 0 2px rgba(98, 216, 229, .7); }
.workflow-node.standalone-asset .workflow-node-body { display: block; padding: 0; cursor: grab; }
.workflow-node.standalone-asset .workflow-node-output { overflow: hidden; padding: 0; border: 0; border-radius: 3px; }
.workflow-standalone-media { position: relative; }
.workflow-standalone-actions { position: absolute; z-index: 7; right: 8px; bottom: 8px; display: flex; gap: 5px; opacity: 0; transition: opacity .18s ease; }
.workflow-standalone-media:hover .workflow-standalone-actions,
.workflow-node.standalone-asset.selected .workflow-standalone-actions { opacity: 1; }
.workflow-standalone-actions button { height: 27px; padding: 0 9px; border: 1px solid rgba(255,255,255,.24); border-radius: 8px; color: #fff; background: rgba(10,12,15,.78); backdrop-filter: blur(8px); cursor: pointer; font-size: 9px; }
.workflow-standalone-actions button:hover { background: rgba(31,39,44,.94); }
.workflow-video-result,
.workflow-standalone-media { position: relative; }
.workflow-frame-capture { position: absolute; z-index: 9; top: 8px; right: 8px; }
.workflow-frame-capture > button { height: 28px; padding: 0 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 8px; color: #fff; background: rgba(10,12,15,.8); backdrop-filter: blur(8px); cursor: pointer; font-size: 9px; }
.workflow-frame-capture > button:hover:not(:disabled) { background: rgba(31,39,44,.96); }
.workflow-frame-capture > button:disabled { opacity: .72; cursor: wait; }
.workflow-frame-menu { position: absolute; top: 34px; right: 0; width: 112px; overflow: hidden; padding: 4px; border: 1px solid #3a4248; border-radius: 10px; background: rgba(18,22,25,.97); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.workflow-frame-menu.hidden { display: none; }
.workflow-frame-menu button { width: 100%; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; color: #e5ecef; text-align: left; background: transparent; cursor: pointer; font-size: 9px; }
.workflow-frame-menu button:hover { color: #071012; background: #70e8f1; }

/* 多文件上传直接生成素材节点；上传期间保留原位置并显示单项进度。 */
.workflow-media-uploading { position: absolute; z-index: 8; inset: 0; display: grid; place-content: center; justify-items: center; gap: 7px; padding: 18px; color: #fff; background: rgba(8, 11, 14, .7); backdrop-filter: blur(10px) saturate(.75); pointer-events: none; }
.workflow-media-uploading i { width: 24px; height: 24px; box-sizing: border-box; border: 2px solid rgba(255,255,255,.22); border-top-color: #70e8f1; border-radius: 50%; animation: workflowUploadSpin .8s linear infinite; }
.workflow-media-uploading strong { font-size: 11px; font-weight: 650; }
.workflow-media-uploading small { max-width: 220px; overflow: hidden; color: #aeb9be; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
@keyframes workflowUploadSpin { to { transform: rotate(360deg); } }

/* 生成历史只展示当前账号的生成图片和视频，最多一次加入十项。 */
.workflow-history-picker { z-index: 210; padding: clamp(18px, 4vw, 64px); }
.workflow-history-card { width: min(1240px, 96vw); height: min(760px, 88vh); display: grid; grid-template-rows: 58px 62px minmax(0, 1fr) 64px; overflow: hidden; border: 1px solid #343b40; border-radius: 18px; color: #edf2f4; background: #171a1e; box-shadow: 0 30px 100px rgba(0,0,0,.62); }
.workflow-history-card > header { display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #2b3136; }
.workflow-history-card > header strong { font-size: 14px; }
.workflow-history-card > header button { width: 34px; height: 34px; border: 0; border-radius: 9px; color: #a8b2b7; background: transparent; cursor: pointer; font-size: 23px; }
.workflow-history-card > header button:hover { color: #fff; background: #292f34; }
.workflow-history-toolbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 10px 22px; border-bottom: 1px solid #262c30; }
.workflow-history-toolbar div,.workflow-history-toolbar nav { display: flex; gap: 6px; }
.workflow-history-toolbar button { height: 32px; padding: 0 13px; border: 0; border-radius: 8px; color: #929da3; background: transparent; cursor: pointer; font-size: 10px; }
.workflow-history-toolbar button.active { color: #fff; background: #343a3f; }
.workflow-history-toolbar button:disabled { cursor: default; opacity: 1; }
.workflow-history-toolbar > span { color: #9aa6ab; font-size: 10px; font-variant-numeric: tabular-nums; }
.workflow-history-grid { min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); align-content: start; gap: 14px; padding: 20px 22px 28px; }
.workflow-history-grid > button { position: relative; min-width: 0; overflow: hidden; padding: 0; border: 1px solid #30373c; border-radius: 11px; color: #e8edef; text-align: left; background: #1c2024; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.workflow-history-grid > button:hover { border-color: #59656c; background: #22272c; transform: translateY(-2px); }
.workflow-history-grid > button.selected { border-color: #70e8f1; box-shadow: 0 0 0 2px rgba(112,232,241,.22); }
.workflow-history-grid img,.workflow-history-grid i { width: 100%; height: 150px; display: grid; place-items: center; object-fit: contain; color: #6fe6ef; background: #090b0e; font-style: normal; font-size: 26px; }
.workflow-history-grid span { display: grid; gap: 4px; padding: 10px 11px 12px; }
.workflow-history-grid b,.workflow-history-grid small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-history-grid b { font-size: 10px; font-weight: 600; }
.workflow-history-grid small { color: #869299; font-size: 8px; font-variant-numeric: tabular-nums; }
.workflow-history-grid em { position: absolute; top: 8px; right: 8px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #071012; background: #70e8f1; box-shadow: 0 3px 12px rgba(0,0,0,.35); font-style: normal; font-size: 12px; font-weight: 800; }
.workflow-history-empty { grid-column: 1 / -1; align-self: center; justify-self: center; color: #7d898f; font-size: 11px; }
.workflow-history-card > footer { display: flex; align-items: center; justify-content: flex-end; padding: 0 22px; border-top: 1px solid #2b3136; }
.workflow-history-card > footer button { height: 36px; padding: 0 20px; border: 0; border-radius: 9px; color: #071012; background: #70e8f1; cursor: pointer; font-weight: 700; font-size: 10px; }
.workflow-history-card > footer button:disabled { color: #6f797e; background: #32383d; cursor: default; }

/* 参考素材：既能从资产库选，也能直接点画布上的图片和视频。 */
.workflow-reference-controls { display: grid; gap: 8px; }
.workflow-reference-actions { display: flex; gap: 7px; }
.workflow-reference-actions button { height: 29px; padding: 0 10px; border: 1px solid #394147; border-radius: 9px; color: #dfe7ea; background: #20252a; cursor: pointer; font-size: 10px; }
.workflow-reference-actions button:hover,
.workflow-reference-actions button.active { color: #071012; border-color: #70e8f1; background: #70e8f1; }
.workflow-reference-list { min-height: 42px; display: flex; align-items: center; gap: 7px; overflow-x: auto; }
.workflow-reference-list > small { color: #758189; font-size: 9px; }
.workflow-reference-chip { position: relative; width: 42px; height: 42px; flex: 0 0 42px; overflow: visible; border: 1px solid #465057; border-radius: 8px; background: #090b0e; }
.workflow-reference-chip img,
.workflow-reference-chip video { width: 100%; height: 100%; display: block; border-radius: 7px; object-fit: cover; background: transparent; }
.workflow-reference-chip > b { position: absolute; top: -5px; left: -5px; min-width: 15px; height: 15px; display: grid; place-items: center; border-radius: 8px; color: #071012; background: #70e8f1; font-size: 8px; }
.workflow-reference-chip > button { position: absolute; top: -6px; right: -6px; width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: #b74450; cursor: pointer; line-height: 17px; }
.workflow-reference-pick-overlay { position: absolute; z-index: 11; inset: 0; display: grid; place-items: center; border: 2px solid #6ce5ef; border-radius: inherit; color: #fff; background: rgba(6, 12, 15, .38); cursor: pointer; font-weight: 750; font-size: 12px; backdrop-filter: brightness(.82); }
.workflow-node.reference-picked .workflow-reference-pick-overlay { border-color: #baff6a; background: rgba(31, 56, 14, .34); }

@media (prefers-reduced-motion: reduce) {
  .workflow-edges .workflow-edge-flow.connected,
  .workflow-edges .workflow-edge-flow.selected { animation: none; stroke-dasharray: none; opacity: .72; }
  .workflow-media-uploading i { animation: none; }
}
@media (max-width: 980px) {
  .workflow-editor-toolbar { right: 12px; left: 12px; width: auto; }
  .workflow-shortcuts-panel { width: min(690px, calc(100% - 28px)); }
  .workflow-shortcuts-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .workflow-editor-toolbar { right: 10px; left: 10px; width: auto; }
  .workflow-node-rail { right: auto; bottom: 10px; left: 50%; }
  .workflow-shortcuts-panel { bottom: 66px; width: calc(100% - 20px); max-height: 68vh; overflow: auto; padding: 14px; }
  .workflow-shortcuts-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .workflow-shortcuts-grid > section { padding: 12px; }
  .workflow-shortcuts-grid > section:nth-child(3) { padding-left: 12px; border-left: 1px solid rgba(157, 190, 201, .11); }
  .workflow-node-editor { width: min(560px, calc(100vw - 34px)); }
  .workflow-log-panel { display: none; }
  .workflow-history-card { height: 86vh; grid-template-rows: 54px auto minmax(0, 1fr) 58px; }
  .workflow-history-toolbar { grid-template-columns: 1fr auto; gap: 8px; padding: 9px 12px; }
  .workflow-history-toolbar > div { display: none; }
  .workflow-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 12px; }
  .workflow-history-grid img,.workflow-history-grid i { height: 120px; }
}
@media (max-width: 460px) {
  .workflow-shortcuts-grid { grid-template-columns: 1fr; }
  .workflow-node-rail > button { width: 38px; height: 38px; }
  .workflow-node-menu { grid-template-columns: repeat(2, minmax(82px, 1fr)); width: min(290px, calc(100vw - 20px)); }
  .workflow-node-menu button[data-canvas-action] { grid-column: span 2; }
}