
.wfi-glyph { display:inline-grid; place-items:center; width:var(--wfi-size); height:var(--wfi-size); flex:0 0 auto; color:var(--fw-accent,var(--accent-emerald)); }
.wfi-motion { display:grid; place-items:center; width:100%; height:100%; transform-origin:center; }
.wfi-glyph .wfi-motion > :is(svg,img) { width:100%; height:100%; display:block; object-fit:contain; border-radius:0; }
.wfi-vector,.wfi-glyph .wfi-vector > img { width:100%; height:100%; object-fit:contain; border-radius:0; display:block; }
.wfi-glyph .wfi-vector > .wfi-vector-light,.theme-light .wfi-glyph .wfi-vector > .wfi-vector-dark { display:none; }
.theme-light .wfi-glyph .wfi-vector > .wfi-vector-light { display:block; }
.wfi-emoji { font-size:var(--wfi-size); line-height:1; }
.wfi-glyph[data-wfi-color=mono], :root[data-app-icons=white] .wfi-glyph[data-wfi-color=app] { color:var(--fw-text,var(--text-primary)); }
[data-wfi-motion=float] { animation:wfiFloat var(--wfi-duration,2.8s) ease-in-out infinite; }
[data-wfi-motion=pulse] { animation:wfiPulse var(--wfi-duration,2.8s) ease-in-out infinite; }
[data-wfi-motion=turn] { animation:wfiTurn var(--wfi-duration,2.8s) ease-in-out infinite; }
[data-wfi-motion=drive] { animation:wfiDrive var(--wfi-duration,2.8s) ease-in-out infinite; }
[data-wfi-motion=flow] { animation:wfiFlow var(--wfi-duration,2.8s) ease-in-out infinite; }
@keyframes wfiFloat { 0%,70%,100%{transform:translateY(0)}35%{transform:translateY(-4px)} }
@keyframes wfiPulse { 0%,70%,100%{transform:scale(1);opacity:1}35%{transform:scale(.92);opacity:.6} }
@keyframes wfiTurn { 0%,12%{transform:rotate(0)}68%,100%{transform:rotate(360deg)} }
@keyframes wfiDrive { 0%,70%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-3px) rotate(-3deg)}48%{transform:translateX(3px) rotate(2deg)} }
@keyframes wfiFlow { 0%,70%,100%{transform:translateX(0);opacity:1}25%{transform:translateX(-4px);opacity:.65}48%{transform:translateX(4px);opacity:1} }
#wfBuilderOverlay .wfi-builder { width:min(736px,100%); max-width:736px; padding:0; max-height:90dvh; overflow:hidden; }
.wfi-editor { --wfi-bg:var(--fw-bg,var(--bg-primary)); --wfi-surface:var(--fw-surface,var(--bg-secondary)); --wfi-line:var(--fw-line,var(--border-subtle)); --wfi-text:var(--fw-text,var(--text-primary)); --wfi-muted:var(--fw-muted,var(--text-secondary)); --wfi-accent:var(--fw-accent,var(--accent-emerald)); --wfi-selected:var(--fw-selected,var(--bg-glass)); background:var(--wfi-bg); color:var(--wfi-text); font:14px/1.4 inherit; text-align:left; border-radius:8px; }
.wfi-editor * { box-sizing:border-box; letter-spacing:0; }
.wfi-editor { display:flex; flex-direction:column; max-height:90dvh; font-family:inherit; font-size:14px; line-height:1.4; }
.wfi-editor :is(.wfi-header,.wfi-footer) { flex-shrink:0; }
.wfi-editor .wfi-content { overflow-y:auto; overscroll-behavior:contain; min-height:0; }
.wfi-editor [hidden] { display:none!important; }
.wfi-editor :is(button,input,select) { font-family:inherit; color:inherit; }
.wfi-editor button { cursor:pointer; touch-action:manipulation; }
.wfi-editor button:disabled { cursor:default; opacity:.55; }
.wfi-header { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--wfi-line); }
.wfi-header h2 { font-size:20px; font-weight:600; line-height:1.3; margin:0; }
.wfi-editor .wfi-tool { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; padding:0; border:0; border-radius:6px; background:transparent; }
.wfi-tool svg { width:22px; height:22px; }
.wfi-content { padding:20px; }
.wfi-basics { display:grid; grid-template-columns:minmax(0,1fr) 176px; gap:24px; align-items:center; padding-bottom:22px; }
.wfi-fields { display:grid; gap:16px; }
.wfi-editor label { display:grid; gap:7px; min-width:0; font-size:13px; color:var(--wfi-muted); }
.wfi-editor input[type=text],.wfi-editor select { min-width:0; width:100%; min-height:44px; padding:10px 12px; font-size:16px; color:var(--wfi-text); background:var(--wfi-surface); border:1px solid var(--wfi-line); border-radius:6px; }
.wfi-editor select { height:44px; appearance:menulist-button; }
.wfi-editor :is(button,input,select):focus-visible { outline:2px solid var(--fw-focus,var(--accent-cyan)); outline-offset:3px; }
.wfi-preview { display:grid; grid-template-rows:80px minmax(42px,auto); align-content:center; justify-items:center; gap:14px; aspect-ratio:1; padding:18px 12px; background:var(--wfi-surface); border:1px solid var(--wfi-line); border-radius:8px; text-align:center; }
#wfiPreviewIcon { display:grid; place-items:center; width:80px; height:80px; }
.wfi-preview strong { max-width:100%; overflow-wrap:anywhere; font-size:16px; line-height:1.3; font-weight:600; }
.wfi-section { border-top:1px solid var(--wfi-line); padding-top:18px; }
.wfi-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.wfi-editor h3 { font-size:15px; font-weight:600; margin:0; }
.wfi-segments { display:flex; width:min(100%,280px); gap:2px; padding:3px; background:var(--wfi-surface); border:1px solid var(--wfi-line); border-radius:6px; }
.wfi-segments button { flex:1; min-width:0; min-height:40px; padding:8px 6px; font-size:13px; white-space:nowrap; border:0; border-radius:4px; background:transparent; color:var(--wfi-muted); }
.wfi-segments button[aria-pressed=true],.wfi-choice[aria-pressed=true] { color:var(--wfi-accent); background:var(--wfi-selected); }
.wfi-library { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:14px 0; }
.wfi-choice { display:grid; justify-items:center; align-content:center; gap:9px; min-width:0; height:80px; padding:8px 3px; color:var(--wfi-muted); background:transparent; border:1px solid transparent; border-radius:6px; }
.wfi-choice[aria-pressed=true] { border-color:var(--wfi-accent); }
.wfi-editor .wfi-choice { color:var(--wfi-muted); }
.wfi-editor .wfi-choice[aria-pressed=true] { color:var(--wfi-accent); }
.wfi-choice svg { width:30px; height:30px; }
.wfi-choice span { font-size:11px; line-height:1.2; }
.wfi-editor .wfi-command { display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:10px 16px; font-size:14px; background:var(--wfi-surface); border:1px solid var(--wfi-line); border-radius:6px; }
.wfi-command svg { width:18px; height:18px; flex-shrink:0; }
.wfi-import-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.wfi-muted { color:var(--wfi-muted); font-size:12px; overflow-wrap:anywhere; flex:1; min-width:0; }
.wfi-options { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:20px 0; }
.wfi-editor .wfi-toggle { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; color:var(--wfi-text); }
.wfi-toggle input { appearance:none; width:40px; height:24px; border:1px solid var(--wfi-line); border-radius:20px; background:var(--wfi-surface); margin:0; position:relative; cursor:pointer; }
.wfi-toggle input:after { content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:var(--wfi-muted); }
.wfi-toggle input:checked { border-color:var(--wfi-accent); background:var(--wfi-selected); }
.wfi-toggle input:checked:after { background:var(--wfi-accent); transform:translateX(16px); }
.wfi-footer { display:flex; justify-content:flex-end; gap:10px; padding:16px 20px; border-top:1px solid var(--wfi-line); }
.wfi-editor .wfi-primary { background:var(--wfi-accent); color:var(--fw-on-accent,var(--bg-primary)); border-color:transparent; font-weight:600; }
.wfi-editor .wfi-delete { color:var(--fw-danger,#fa9494); margin-right:auto; }
.wfi-error { color:var(--fw-danger,#fa9494); font-size:14px; overflow-wrap:anywhere; padding-block:12px; }
.theme-light .wfi-error,.theme-light .wfi-editor .wfi-delete { color:var(--fw-danger,#b43232); }
@media(max-width:520px) {
  .wfi-content { padding:16px; }
  .wfi-basics { grid-template-columns:1fr; gap:16px; }
  .wfi-preview { width:150px; justify-self:center; grid-row:1; padding:12px 8px; gap:8px; grid-template-rows:72px minmax(40px,auto); }
  .wfi-preview strong { font-size:13px; }
  .wfi-library { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .wfi-section-head:not(:has(.wfi-toggle)) { align-items:stretch; flex-direction:column; gap:10px; }
  .wfi-options { gap:12px; }
  .wfi-segments button { font-size:12px; }
  .wfi-footer { padding:14px 16px; }
}
@media(max-width:355px) { .wfi-options { grid-template-columns:1fr; } .wfi-header { padding:10px; } }
@media(prefers-reduced-motion:reduce) { [data-wfi-motion] { animation:none!important; } }
#wfBuilderOverlay .wf-builder-box:has(.wft-editor) { width:min(736px,100%); max-width:736px; }
.wfi-editor.wft-editor { container-type:inline-size; max-height:none; border-radius:0; padding-block:12px 20px; border-bottom:1px solid var(--wfi-line); margin-bottom:18px; }
.wft-editor .wft-preview { display:grid; grid-template-columns:88px minmax(0,1fr); gap:20px; align-items:center; margin-bottom:18px; }
.wft-editor #wfIconPreview { display:grid; place-items:center; width:88px; height:88px; }
.wft-editor .wfi-library { grid-template-columns:repeat(6,minmax(0,1fr)); }
.wft-editor .wfi-choice { height:80px; }
.wft-editor .wfi-choice svg { width:36px; height:36px; }
.wft-editor :is(#wftEmojiPanel,#wftImagePanel) { padding-block:12px; }
.wft-editor #wftOriginal { margin:8px 0 18px; }
.wft-editor .wfi-section { margin-top:18px; }
.wft-glyph { display:grid; grid-template: minmax(0,1fr) / minmax(0,1fr); place-items:center; flex-shrink:0; width:100%; height:100%; }
.wft-glyph .wfi-glyph { width:var(--wfi-size); height:var(--wfi-size); max-width:100%; max-height:100%; grid-template:minmax(0,1fr) / minmax(0,1fr); }
.wft-glyph .wfi-motion { min-width:0; min-height:0; }
.workflow-item-icon:has(.wft-glyph),.wf-plugin-library-icon:has(.wft-glyph) { background:transparent!important; border-color:transparent!important; box-shadow:none!important; }
.wf-item-wrap .workflow-item-icon:has(.wft-glyph) { width:64px; height:64px; }
.wf-item-wrap.wf-isize-sm .workflow-item-icon:has(.wft-glyph) { width:46px; height:46px; }
.wf-item-wrap.wf-isize-lg .workflow-item-icon:has(.wft-glyph) { width:88px; height:88px; }
@container(max-width:520px) { .wft-editor .wfi-library { grid-template-columns:repeat(3,minmax(0,1fr)); } }
