.sac-flow { border:1px solid #dde5ed; border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 24px 65px -38px #224a7a55; }
.sac-flow-blue { --flow-color:#1686c0; --flow-soft:#edf7fd; }
.sac-flow-purple { --flow-color:#7956d9; --flow-soft:#f3efff; }
.sac-flow-teal { --flow-color:#246579; --flow-soft:#eff7fa; }
.sac-flow-green { --flow-color:#239954; --flow-soft:#ecf8f0; }
.sac-flow-amber { --flow-color:#b77918; --flow-soft:#fff7e8; }
.sac-flow-appbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 22px; background:#14191e; color:white; }
.sac-flow-brand { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:750; letter-spacing:-.6px; }
.sac-flow-brand > svg { color:#31b6e4; }
.sac-flow-app-title { margin-left:14px; border-left:1px solid #ffffff30; padding-left:22px; font-size:12px; font-weight:500; letter-spacing:0; color:#d7e0e8; }
.sac-flow-demo { border:1px solid #ffffff25; border-radius:6px; padding:5px 9px; font-size:11px; color:#dae3ec; white-space:nowrap; }
.sac-flow-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:19px 22px; border-bottom:1px solid #e7edf3; }
.sac-flow-toolbar p { margin:0 0 5px; color:#5b7084; letter-spacing:1.5px; font-size:10px; font-weight:650; }
.sac-flow-toolbar h3 { margin:0; font-size:18px; line-height:1.4; font-weight:650; color:#152334; }
.sac-flow-motion { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:7px; flex-shrink:0; padding:8px 12px; border:1px solid #dae3ed; border-radius:7px; background:#fff; color:#295c89; font-size:12px; cursor:pointer; }
.sac-flow-motion:hover { background:#f1f7fc; }
.sac-flow-motion:disabled { color:#677789; cursor:default; }
.sac-flow-canvas { position:relative; height:var(--canvas-height); background-color:#fafcfe; background-image:radial-gradient(#b8c9da66 .75px,transparent .75px); background-size:16px 16px; }
.sac-flow-hint { position:absolute; left:22px; top:20px; margin:0; color:#687b8d; font-size:11px; }
.sac-flow-start,.sac-flow-choices,.sac-flow-finish { display:contents; }
.sac-flow-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.sac-flow-line { fill:none; stroke:var(--flow-color); stroke-width:1.5; opacity:.5; stroke-linejoin:round; }
.sac-flow-arrow { fill:var(--flow-color); }
.sac-flow-pulse { fill:none; stroke:var(--flow-color); stroke-width:2.7; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:5 95; animation:sac-flow-travel 4.5s linear infinite; opacity:.85; }
@keyframes sac-flow-travel { from { stroke-dashoffset:100; } to { stroke-dashoffset:0; } }
.sac-flow[data-paused="true"] .sac-flow-pulse { animation-play-state:paused; opacity:0; }
.sac-flow-node { position:absolute; top:var(--node-y); left:var(--node-x); z-index:1; display:flex; flex-direction:column; gap:7px; width:20%; height:var(--node-height); padding:12px 11px 10px 14px; border:1px solid #dfe6ee; border-left:4px solid var(--flow-color); border-radius:8px; background:#fff; color:#142638; text-align:left; cursor:pointer; box-shadow:0 2px 5px #21395206; transition:box-shadow .2s,border-color .2s; }
.sac-flow-node:hover,.sac-flow-node[aria-pressed="true"] { border-color:var(--flow-color); box-shadow:0 5px 20px #25456814; }
.sac-flow-node:focus-visible,.sac-flow-motion:focus-visible { outline:3px solid #83bafa; outline-offset:4px; }
.sac-flow-node-heading { display:flex; align-items:center; gap:9px; }
.sac-flow-node-icon { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:31px; height:31px; border-radius:7px; color:#fff; background:var(--flow-color); }
.sac-flow-node-label { display:block; font-size:10px; line-height:1.3; font-weight:550; color:#63788a; }
.sac-flow-node strong { display:block; margin-top:3px; font-size:14px; line-height:1.25; font-weight:650; }
.sac-flow-node-detail { display:block; font-size:12px; line-height:1.4; color:#566b7d; }
.sac-flow-node-status { display:flex; align-items:center; align-self:flex-start; gap:5px; max-width:100%; margin-top:auto; padding:3px 6px; border-radius:4px; background:var(--flow-soft); color:var(--flow-color); font-size:10px; font-weight:600; line-height:1.2; }
.sac-flow-node-status > span { width:4px; height:4px; border-radius:50%; flex-shrink:0; background:var(--flow-color); }
.sac-flow-port { position:absolute; top:50%; width:6px; height:6px; border:1px solid var(--flow-color); border-radius:50%; background:white; transform:translateY(-50%); }
.sac-flow-port-in { left:-5px; }
.sac-flow-port-out { right:-4px; }
.sac-flow-port-bottom { top:auto; bottom:-4px; left:50%; transform:translateX(-50%); }
.sac-flow-branch-label { position:absolute; left:74.8%; transform:translate(-50%,-50%); z-index:2; font-size:10px; font-weight:600; white-space:nowrap; border-radius:5px; padding:4px 7px; border:1px solid; }
.sac-flow-branch-yes { top:185px; color:#1d7c46; background:#effaf3; border-color:#cfebda; }
.sac-flow-branch-human { top:353px; color:#906014; background:#fff8e9; border-color:#f0dfbb; }
.sac-flow-mobile-branch,.sac-flow-mobile-or,.sac-flow-inline { display:none; }
.sac-flow-explanation { display:flex; gap:14px; align-items:flex-start; min-height:104px; border-top:1px solid #e0e8f0; padding:20px 24px; background:#fff; }
.sac-flow-explanation-icon { display:flex; flex-shrink:0; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; background:var(--flow-soft); color:var(--flow-color); }
.sac-flow-explanation p { margin:0 0 5px; color:#173450; font-size:14px; font-weight:650; }
.sac-flow-explanation div > span { display:block; max-width:850px; color:#53697c; font-size:13px; line-height:1.65; }
@media (max-width:1023px) {
  .sac-flow-canvas { height:auto; padding:20px 18px 26px; }
  .sac-flow-hint { position:static; margin:0 0 20px; font-size:12px; }
  .sac-flow-lines,.sac-flow-port,.sac-flow-branch-label { display:none; }
  .sac-flow-start,.sac-flow-finish { display:flex; flex-direction:column; gap:24px; }
  .sac-flow-node { position:relative; top:auto; left:auto; width:100%; height:auto; min-height:var(--node-height); padding:15px 17px; gap:10px; }
  .sac-flow-node-label { font-size:10px; }
  .sac-flow-node strong { font-size:15px; }
  .sac-flow-node-detail { font-size:13px; }
  .sac-flow-node-status { font-size:10px; padding:4px 7px; }
  .sac-flow-start .sac-flow-node:not(:last-child)::after,.sac-flow-finish .sac-flow-node:not(:last-child)::after { content:""; position:absolute; top:100%; left:50%; height:24px; width:2px; background:linear-gradient(to bottom,#bfd3e5 0%,#bfd3e5 35%,#478bbb 50%,#bfd3e5 65%,#bfd3e5 100%); background-size:100% 200%; animation:sac-flow-mobile 2s linear infinite; }
  @keyframes sac-flow-mobile { to { background-position:0 -200%; } }
  .sac-flow[data-paused="true"] .sac-flow-node::after { animation-play-state:paused; }
  .sac-flow-choices { display:flex; flex-direction:column; gap:12px; margin:24px 0; padding:16px; border:1px dashed #c6d6e4; border-radius:12px; background:#f4f8fc; }
  .sac-flow-mobile-branch { display:block; margin:0 0 3px; font-size:12px; color:#4b657c; }
  .sac-flow-mobile-or { display:block; align-self:center; font-size:12px; font-weight:600; color:#60788f; }
  .sac-flow-explanation { display:none; }
  .sac-flow-inline { display:block; border-top:1px solid #e3eaf1; padding-top:10px; font-size:13px; line-height:1.6; color:#425d74; }
}
@media (max-width:639px) {
  .sac-flow { border-radius:15px; }
  .sac-flow-appbar { padding:13px 16px; }
  .sac-flow-app-title { display:none; }
  .sac-flow-brand { font-size:18px; }
  .sac-flow-toolbar { align-items:flex-start; flex-direction:column; padding:16px; gap:10px; }
  .sac-flow-toolbar h3 { font-size:17px; }
  .sac-flow-toolbar p { font-size:9px; letter-spacing:1px; }
  .sac-flow-canvas { padding:18px 12px; }
  .sac-flow-choices { padding:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .sac-flow-pulse { animation:none !important; opacity:0; }
  .sac-flow-node::after { animation:none !important; }
  .sac-flow-node { transition:none; }
}