.wf-anim-block--workflow-automation { box-sizing: border-box; position: relative; }
.wf-anim-block--workflow-automation *, .wf-anim-block--workflow-automation *::before, .wf-anim-block--workflow-automation *::after { box-sizing: inherit; }
.wf-anim-block--workflow-automation {
  --blue:#2D6BF4;
  --blue-deep:#1E4FCC;
  --blue-soft:#EAF1FE;
  --ink:#15192B;
  --ink-2:#3A4156;
  --muted:#6B7385;
  --line:#E4E8F0;
  --wire:#D7E0F2;
  --bg:#F4F6FA;
  --panel:#FFFFFF;
  --green:#21A45D;
  --green-soft:#E6F6EC;
  --amber:#B7791F;
  --amber-soft:#FBF0D9;
  --chrome:#101319;
  --lime:#C6F432;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(21,25,43,.06), 0 2px 8px rgba(21,25,43,.05);
  --font-display:"Bricolage Grotesque",sans-serif;
  --font-body:"Hanken Grotesk",sans-serif;
}@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}




.wf-anim-block--workflow-automation .appbar {display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 24px 8px}.wf-anim-block--workflow-automation .appbar h2 {font-family:var(--font-display);font-weight:700;font-size:20px;color:#0B3B8C}.wf-anim-block--workflow-automation .rule-pill {
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 8px;
  font-size:13px;font-weight:600;color:var(--ink-2);background:#fff;
}.wf-anim-block--workflow-automation .switch {width:34px;height:19px;border-radius:999px;background:#CBD3E1;position:relative;transition:background .35s;flex:none}.wf-anim-block--workflow-automation .switch::after {
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .35s cubic-bezier(.34,1.56,.64,1);
}.wf-anim-block--workflow-automation .rule-pill.on .switch {background:var(--green)}.wf-anim-block--workflow-automation .rule-pill.on .switch::after {left:17px}.wf-anim-block--workflow-automation .rule-pill .state {color:var(--muted);transition:color .3s}.wf-anim-block--workflow-automation .rule-pill.on .state {color:var(--green)}.wf-anim-block--workflow-automation .appbar .meta {margin-left:auto;display:flex;gap:22px;font-size:13.5px;color:var(--ink-2)}.wf-anim-block--workflow-automation .appbar .meta b {font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- Canvas ---------- */
.wf-anim-block--workflow-automation .board-scroll {overflow-x:auto;overflow-y:hidden}.wf-anim-block--workflow-automation .canvas {
  position:relative;
  display:grid;
  grid-template-columns:272px 206px 232px 288px;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  padding:40px 36px 40px;
  min-width:1080px;
  min-height:550px;
}.wf-anim-block--workflow-automation svg.wires {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.wf-anim-block--workflow-automation .wire {fill:none;stroke:var(--wire);stroke-width:2.5}.wf-anim-block--workflow-automation .pulse {fill:var(--blue);filter:drop-shadow(0 0 6px rgba(45,107,244,.8))}.wf-anim-block--workflow-automation .lane-label {
  position:absolute;top:18px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}

/* Lead card */
.wf-anim-block--workflow-automation .lead-wrap {position:relative;z-index:2}.wf-anim-block--workflow-automation .queue-ghost {
  position:absolute;inset:0;transform:translate(-12px,12px) scale(.97);
  background:#fff;border:1px solid var(--line);border-radius:12px;opacity:.45;z-index:-1;
}.wf-anim-block--workflow-automation .lead-card {
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:16px 17px;box-shadow:var(--shadow-sm);
  opacity:0;transform:scale(.85) translateY(16px);
  position:relative;overflow:hidden;
}.wf-anim-block--workflow-automation .lead-card.in {transition:opacity .5s,transform .6s cubic-bezier(.34,1.56,.64,1);opacity:1;transform:none}.wf-anim-block--workflow-automation .lc-top {display:flex;align-items:center;gap:9px}.wf-anim-block--workflow-automation .lc-avatar {
  width:36px;height:36px;border-radius:10px;flex:none;color:#fff;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;
}.wf-anim-block--workflow-automation .lc-name {font-size:15px;font-weight:700;line-height:1.15}.wf-anim-block--workflow-automation .lc-co {font-size:12.5px;color:var(--muted)}.wf-anim-block--workflow-automation .lc-tags {display:flex;gap:7px;margin-top:11px}.wf-anim-block--workflow-automation .tag {font-size:11px;font-weight:700;border-radius:999px;padding:4px 10px}.wf-anim-block--workflow-automation .tag.src {background:var(--blue-soft);color:var(--blue-deep)}.wf-anim-block--workflow-automation .tag.new {background:var(--amber-soft);color:var(--amber)}.wf-anim-block--workflow-automation .lc-owner {
  display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:11px;
  border-top:1px dashed var(--line);
  font-size:13px;font-weight:600;color:var(--ink-2);
  opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s cubic-bezier(.34,1.56,.64,1);
}.wf-anim-block--workflow-automation .lc-owner.show {opacity:1;transform:none}.wf-anim-block--workflow-automation .lc-owner .o-avatar {
  width:24px;height:24px;border-radius:50%;flex:none;color:#fff;font-size:9.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#21A45D,#5CC98E);
}.wf-anim-block--workflow-automation .lc-owner .o-label {color:var(--muted);font-weight:500}

/* Nodes */
.wf-anim-block--workflow-automation .node {
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:17px 18px;box-shadow:var(--shadow-sm);position:relative;z-index:2;
  transition:border-color .3s, box-shadow .3s;
}.wf-anim-block--workflow-automation .node .n-kind {font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.wf-anim-block--workflow-automation .node .n-main {display:flex;align-items:center;gap:11px}.wf-anim-block--workflow-automation .n-icon {
  width:40px;height:40px;border-radius:11px;flex:none;
  background:var(--blue-soft);color:var(--blue-deep);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s;
}.wf-anim-block--workflow-automation .n-icon svg {width:18px;height:18px}.wf-anim-block--workflow-automation .node .n-title {font-size:14.5px;font-weight:700;line-height:1.25}.wf-anim-block--workflow-automation .node .n-sub {font-size:12px;color:var(--muted);margin-top:2px}.wf-anim-block--workflow-automation .node.fired {border-color:rgba(45,107,244,.55);box-shadow:0 6px 20px rgba(45,107,244,.18)}.wf-anim-block--workflow-automation .node.fired .n-icon {transform:scale(1.12)}.wf-anim-block--workflow-automation .node.done .n-icon {background:var(--green-soft);color:var(--green)}.wf-anim-block--workflow-automation .node::after { /* fire ring */
  content:"";position:absolute;inset:-2px;border-radius:16px;
  border:2px solid rgba(45,107,244,.55);opacity:0;pointer-events:none;
}.wf-anim-block--workflow-automation .node.ring::after {animation:ring .7s ease-out 1}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}

/* Condition node */
.wf-anim-block--workflow-automation .cond .c-status {
  margin-top:12px;display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;border-radius:10px;padding:8px 11px;
  background:#F4F6FA;color:var(--muted);transition:background .35s,color .35s;
}.wf-anim-block--workflow-automation .cond .spinner {
  width:13px;height:13px;border-radius:50%;flex:none;
  border:2px solid rgba(45,107,244,.25);border-top-color:var(--blue);
  animation:spin .7s linear infinite;display:none;
}.wf-anim-block--workflow-automation .cond .check {display:none;color:var(--green);flex:none}.wf-anim-block--workflow-automation .cond.checking .c-status {background:var(--blue-soft);color:var(--blue-deep)}.wf-anim-block--workflow-automation .cond.checking .spinner {display:block}.wf-anim-block--workflow-automation .cond.matched .c-status {background:var(--green-soft);color:var(--green)}.wf-anim-block--workflow-automation .cond.matched .check {display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Actions column */
.wf-anim-block--workflow-automation .actions {display:flex;flex-direction:column;gap:22px;z-index:2}.wf-anim-block--workflow-automation .action .result {
  margin-top:10px;display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;color:var(--green);
  background:var(--green-soft);border-radius:10px;padding:7px 10px;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s,transform .4s cubic-bezier(.34,1.56,.64,1);
  max-height:0;overflow:hidden;
}.wf-anim-block--workflow-automation .action .result.show {opacity:1;transform:none;max-height:44px;margin-top:10px}.wf-anim-block--workflow-automation .action .result svg {flex:none}

/* ---------- Toast ---------- */
.wf-anim-block--workflow-automation .toast {
  position:absolute;top:60px;right:22px;z-index:9;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:12px;box-shadow:0 16px 40px rgba(21,25,43,.18);
  padding:12px 16px 12px 13px;display:flex;align-items:center;gap:11px;
  opacity:0;transform:translateX(40px);
  transition:opacity .5s,transform .5s cubic-bezier(.34,1.56,.64,1);
}.wf-anim-block--workflow-automation .toast.show {opacity:1;transform:translateX(0)}.wf-anim-block--workflow-automation .t-icon {
  width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--blue-soft);color:var(--blue-deep);
  display:flex;align-items:center;justify-content:center;
}.wf-anim-block--workflow-automation .t-title {font-size:13.5px;font-weight:700}.wf-anim-block--workflow-automation .t-sub {font-size:12px;color:var(--muted)}.wf-anim-block--workflow-automation .t-sub b {color:var(--ink-2);font-weight:700}.wf-anim-block--workflow-automation .footnote b {color:var(--ink-2)}

@media (max-width:760px){.wf-anim-block--workflow-automation .page {padding:36px 16px 60px}.wf-anim-block--workflow-automation .appbar .meta {display:none}
}