/* ---------- live data-flow (hero visualisation) ---------- */
/* the agent's own language model: a de-emphasised side node, not part of the payment path */
.wf-svg .node.sub .nb { fill: rgba(20, 23, 28, .6); stroke: #4a5363; stroke-dasharray: 4 4; }
.wf-svg .node.sub .nt { fill: #b4bcc8; font-weight: 500; }
.wf-svg .node.sub .ns { fill: #7b8391; font-size: 9.5px; }
.wf-svg .node.sub { opacity: .88; }
.wf-svg .edge.sub { stroke: #2c333d; stroke-dasharray: 3 5; stroke-width: 1.2; }
.wf-svg .edge-flow.sub { opacity: .25; }
.wf-svg .brain-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; fill: #6d7583; }
/* per-hop card-data marking (replaces the old shaded region) */
.wf-svg .zone, .wf-svg .zone-lbl, .wf-svg .clean-lbl { display: none; }
.wf-svg .edge.card { stroke: rgba(255, 180, 84, .6); stroke-width: 2; }
.wf-svg .edge-flow.card { stroke: #ffb454; opacity: .55; }
.wf-svg .edge.clean:not(.sub):not(.endedge):not(.xfer) { stroke: rgba(94, 234, 212, .28); }
.wf-svg .edge-flow.clean { stroke: #5eead4; opacity: .28; }
.wf-svg .node .nbadge text { font-size: 8px; }
.viz-legend { display: flex; align-items: center; gap: 8px; margin: 0 14px 6px; font-size: 12.5px; color: #ffcf8a; }
.viz-legend i { width: 18px; height: 2px; border-radius: 2px; background: #ffb454; flex: none; }

/* autopilot */
.autopilot { border: 1px solid rgba(94, 234, 212, .35); background: linear-gradient(180deg, rgba(94, 234, 212, .07), rgba(94, 234, 212, .015)); border-radius: 16px; padding: 14px; margin-bottom: 16px; }
.ap-row { display: flex; gap: 8px; align-items: center; }
.btn.ap-go { flex: 1; justify-content: center; font-size: 15px; padding: 12px 18px; background: linear-gradient(135deg, #5eead4, #34d399); color: #052e2a; border: 0; font-weight: 600; box-shadow: 0 10px 24px -12px rgba(94, 234, 212, .7); }
.btn.ap-go:hover:not(:disabled) { background: linear-gradient(135deg, #7ff0dd, #4ade80); }
.btn.ap-go:disabled { opacity: .5; }
.ap-echeck { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #c3c9d2; cursor: pointer; }
.ap-echeck input { width: 16px; height: 16px; accent-color: #5eead4; }
.ap-status { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--stage-muted); }
.ap-result { margin-top: 12px; background: var(--stage); border: 1px solid var(--stage-line); border-radius: 14px; padding: 12px 14px; }
.apr-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.apr-out { font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: #fff; }
.apr-out.approved { color: #4ade80; } .apr-out.declined, .apr-out.busy, .apr-out.timeout { color: #f87171; } .apr-out.duplicate { color: #ffb454; }
.apr-sub { font-size: 12px; color: var(--stage-muted); }
.apr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 10px 0 12px; }
.apr-grid dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6d7583; }
.apr-grid dd { margin: 2px 0 0; font-size: 13.5px; color: #e5e9ef; font-family: var(--mono); }
.apr-note { font-size: 12.5px; color: #ffe2b8; margin: 0 0 10px; line-height: 1.5; }
.or-manual { margin: 0 0 8px; font-size: 12px; color: #6d7583; letter-spacing: .04em; text-transform: uppercase; }
.ap-link-row { margin: 14px 0 0; font-size: 15px; }
.ap-link-row a { color: var(--ink); font-weight: 500; text-decoration-color: var(--ink); }
.ap-link-row a.disabled { opacity: .45; pointer-events: none; }
#lp-creditcard text.ap-hl, #cardback text.ap-hl, #cardfront text.ap-hl { fill: #5eead4 !important; }
#chk-micr.ap-hl { background: rgba(94, 234, 212, .25); border-radius: 4px; }
.key.press { background: #3b5a55 !important; box-shadow: 0 0 0 2px rgba(94, 234, 212, .5); }

/* payment desk mode */
.wf-svg .grp { fill: rgba(138, 180, 255, .035); stroke: rgba(138, 180, 255, .35); stroke-width: 1; }
.wf-svg .grp-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; fill: #8ab4ff; opacity: .85; }
.wf-svg .xfer-lbl { font-family: var(--mono); font-size: 9px; fill: #8ab4ff; }
.wf-svg .edge.xfer { stroke: #4b5e80; stroke-dasharray: 4 4; }
.wf-svg .edge.endedge { stroke: #3a4250; stroke-dasharray: 3 5; }
.wf-svg .node.endnode .nb { stroke-dasharray: 2 4; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; max-width: 760px; }
.mode-tab { font: inherit; text-align: left; cursor: pointer; color: var(--stage-ink); background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: 16px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; transition: border-color .2s, background-color .2s; }
.mode-tab:hover { border-color: #3b4350; }
.mode-tab[aria-selected="true"] { border-color: rgba(94, 234, 212, .6); background: linear-gradient(180deg, rgba(94, 234, 212, .08), rgba(94, 234, 212, .02)); box-shadow: 0 0 0 3px rgba(94, 234, 212, .08); }
.mode-tab .mt-name { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.mode-tab .mt-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #052e2a; background: var(--teal); border-radius: 999px; padding: 2px 8px; }
.mode-tab .mt-tag.alt { color: #c7d2fe; background: rgba(138, 180, 255, .14); }
.mode-tab .mt-sub { grid-column: 1 / -1; font-size: 12.5px; color: var(--stage-muted); }
@media (max-width: 520px) { .mode-switch { grid-template-columns: 1fr; } }
.mode-desc { max-width: 760px; margin-top: 14px; font-size: 15px; line-height: 1.65; color: #c3c9d2; }
.mode-desc p { margin: 0; }
.mode-desc b { color: #fff; font-weight: 500; }
.mode-desc code { background: #1b1f26; color: #e5e9ef; }
.mode-warn { margin-top: 8px !important; color: #ffcf8a; font-size: 13.5px; }
.viz-note { margin: 0 14px 10px; font-size: 12.5px; line-height: 1.5; color: #8b93a0; }
.viz-note b { color: #c3c9d2; font-weight: 500; }
@media (min-width: 1040px) { .demo-grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); } }
.viz { overflow: hidden; background: linear-gradient(180deg, #13161b 0%, #0f1115 100%); }
.wf-h { flex-wrap: wrap; row-gap: 6px; }
.wf-h .wf-src { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--stage-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8b93a0; border: 1px solid var(--stage-line); border-radius: 999px; padding: 3px 10px 3px 8px; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #4b5260; }
.live-pill.live { color: #bbf7d0; border-color: rgba(74, 222, 128, .4); }
.live-pill.live i { background: var(--green); animation: blink 1.4s ease-in-out infinite; }
.live-pill.replay { color: #c7d2fe; border-color: rgba(138, 180, 255, .4); }
.live-pill.replay i { background: var(--blue); }
@keyframes blink { 50% { opacity: .25; } }
.viz-stage { position: relative; background: radial-gradient(700px 360px at 50% 0%, rgba(94, 234, 212, .05), transparent 70%); }
.wf-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.wf-svg .zone { fill: rgba(255, 180, 84, .045); stroke: rgba(255, 180, 84, .42); stroke-width: 1; stroke-dasharray: 5 6; transition: stroke .4s; }
.wf-svg .zone.hot { animation: zonePulse 1.1s ease-in-out infinite; stroke: rgba(255, 180, 84, .9); }
@keyframes zonePulse { 0%, 100% { fill: rgba(255, 180, 84, .05); } 50% { fill: rgba(255, 180, 84, .14); } }
.wf-svg .zone-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; fill: var(--amber); }
.wf-svg .clean-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; fill: var(--teal); opacity: .85; }
.wf-svg .edge { fill: none; stroke: #343c49; stroke-width: 1.6; transition: stroke .3s; }
.wf-svg .edge-hit { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; pointer-events: stroke; }
.wf-svg .edge-flow { fill: none; stroke: #5a6577; stroke-width: 1.6; stroke-dasharray: 1.5 10; stroke-linecap: round; animation: flow 1.8s linear infinite; opacity: .5; pointer-events: none; }
.wf-svg .edge.live { stroke: #6b788d; }
.wf-svg .edge.sel { stroke: #9aa7bb; }
@keyframes flow { to { stroke-dashoffset: -23; } }
.wf-svg .trail { fill: none; stroke-linecap: round; pointer-events: none; }
.wf-svg .node .nb { fill: #1a1e25; stroke: #2f3642; stroke-width: 1; transition: stroke .35s, fill .35s; }
.wf-svg .node .nb-top { fill: url(#nodeSheen); pointer-events: none; }
.wf-svg .node .nic-bg { fill: #242a33; stroke: #343c49; }
.wf-svg .node .nic { fill: none; stroke: #c9d1dc; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wf-svg .node .nt { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: #f2f4f7; letter-spacing: -.01em; }
.wf-svg .node .ns { font-family: var(--sans); font-size: 10px; fill: #8b93a0; }
.wf-svg .node .nbadge rect { stroke-width: 1; }
.wf-svg .node .nbadge text { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; font-weight: 600; }
.wf-svg .badge-amber rect { fill: rgba(255, 180, 84, .1); stroke: rgba(255, 180, 84, .45); } .wf-svg .badge-amber text { fill: #ffcf8a; }
.wf-svg .badge-teal rect { fill: rgba(94, 234, 212, .1); stroke: rgba(94, 234, 212, .45); } .wf-svg .badge-teal text { fill: #99f6e4; }
.wf-svg .badge-blue rect { fill: rgba(138, 180, 255, .1); stroke: rgba(138, 180, 255, .45); } .wf-svg .badge-blue text { fill: #c7d7ff; }
.wf-svg .badge-grey rect { fill: rgba(139, 147, 160, .1); stroke: rgba(139, 147, 160, .4); } .wf-svg .badge-grey text { fill: #b4bcc8; }
.wf-svg .node .nstat { font-family: var(--mono); font-size: 9.5px; fill: #6d7583; }
.wf-svg .node.airlock .nstat { fill: var(--teal); }
.wf-svg .node.hit .nb { stroke: var(--hit, #fff); fill: #20252e; }
.wf-svg .node.alarm .nb { stroke: var(--red); fill: #2a1a1d; }
.wf-svg .node.airlock .nb { stroke: rgba(94, 234, 212, .4); }
.wf-svg .node.speaking .nic-bg { animation: speak .9s ease-in-out infinite; }
@keyframes speak { 0%, 100% { fill: #242a33; stroke: #343c49; } 50% { fill: rgba(138, 180, 255, .28); stroke: #8ab4ff; } }
.wf-svg .lat rect { fill: #0b0d10; stroke: #3a4250; transition: stroke .4s; }
.wf-svg .lat text { font-family: var(--mono); font-size: 9.5px; fill: #c3c9d2; transition: fill .4s; }
.wf-svg .lat.fresh rect { stroke: #5eead4; }
.wf-svg .lat.fresh text { fill: #fff; }
.wf-svg .pk-lbl rect { fill: #0b0d10; stroke-width: 1; }
.wf-svg .pk-lbl text { font-family: var(--mono); font-size: 10.5px; }
.wf-svg .flash { font-family: var(--mono); font-size: 10.5px; font-weight: 600; }
.wf-svg .burst { fill: none; stroke-width: 2; }
@media (prefers-reduced-motion: reduce) { .wf-svg .edge-flow, .wf-svg .zone.hot, .wf-svg .node.speaking .nic-bg, .live-pill.live i { animation: none; } }

.viz-caption { margin: 0 14px 14px; min-height: 44px; display: flex; gap: 8px; align-items: baseline; font-size: 13px; line-height: 1.45; color: #d6dbe2; background: rgba(11, 13, 16, .86); border: 1px solid var(--stage-line); border-radius: 12px; padding: 8px 12px; pointer-events: none; }
.viz-caption .who { flex: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #6d7583; }
.viz-caption .who.agent { color: var(--blue); } .viz-caption .who.caller { color: var(--amber); } .viz-caption .who.done { color: var(--green); }
.viz-caption > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.rail-wrap { border-top: 1px solid var(--stage-line); padding: 14px 12px 16px; overflow-x: auto; scrollbar-width: none; }
.rail { list-style: none; margin: 0; padding: 0; display: flex; }
.rail li { position: relative; flex: 1 0 58px; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11.5px; line-height: 1.25; color: #6d7583; padding: 0 3px; text-align: center; transition: color .3s; }
.rail li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #3a414c; background: #13161b; position: relative; z-index: 1; transition: background-color .3s, border-color .3s, box-shadow .3s; box-sizing: border-box; }
.rail li::after { content: ""; position: absolute; top: 5px; left: calc(50% + 6px); width: calc(100% - 12px); height: 2px; background: #2a3039; }
.rail li:last-child::after { display: none; }
.rail li.done { color: #c3c9d2; }
.rail li.done::before { background: var(--teal); border-color: var(--teal); }
.rail li.done::after { background: linear-gradient(90deg, var(--teal), rgba(94, 234, 212, .35)); }
.rail li.now { color: #fff; font-weight: 500; }
.rail li.now::before { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(94, 234, 212, .15), 0 0 12px rgba(94, 234, 212, .6); }
.rail li.ok { color: #bbf7d0; } .rail li.ok::before { background: var(--green); border-color: var(--green); box-shadow: 0 0 12px rgba(74, 222, 128, .7); }
.rail li.fail { color: #fecaca; } .rail li.fail::before { background: var(--red); border-color: var(--red); }

.player { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--stage-line); }
.player .btn svg { width: 13px; height: 13px; }
.player select { font: inherit; font-size: 13px; color: var(--stage-ink); background: var(--stage-3); border: 1px solid var(--stage-line); border-radius: 999px; padding: 7px 12px; max-width: 100%; }
.scrub { flex: 1 1 200px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.scrub input { flex: 1; min-width: 0; accent-color: #5eead4; }
.scrub span { font-family: var(--mono); font-size: 11.5px; color: var(--stage-muted); white-space: nowrap; }
.player .legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--stage-muted); width: 100%; }
.player .legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.btn.ghost { background: transparent; }
.btn.ghost[aria-pressed="true"] { color: var(--teal); border-color: rgba(94, 234, 212, .35); }

.inspector { border-top: 1px solid var(--stage-line); padding: 14px 18px 16px; }
.insp-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.insp-title { font-size: 13px; font-weight: 500; color: var(--stage-ink); }
.insp-tabs { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.insp-tab { font: inherit; flex: none; font-size: 11.5px; color: #8b93a0; background: transparent; border: 1px solid var(--stage-line); border-radius: 999px; padding: 5px 10px 5px 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.insp-tab i { width: 6px; height: 6px; border-radius: 50%; background: #3a414c; }
.insp-tab.has i { background: var(--z, #8b93a0); }
.insp-tab[aria-selected="true"] { color: #fff; border-color: #56607a; background: #1d222b; }
.insp-tab.ping { animation: ping .6s ease-out; }
@keyframes ping { from { box-shadow: 0 0 0 0 rgba(94, 234, 212, .55); } to { box-shadow: 0 0 0 8px rgba(94, 234, 212, 0); } }
.insp-body { margin-top: 10px; background: #0b0d10; border: 1px solid var(--stage-line); border-radius: 12px; padding: 12px 14px; min-height: 150px; }
.insp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: #8b93a0; margin-bottom: 8px; }
.insp-meta b { color: #e5e9ef; font-weight: 500; }
.insp-zone { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.insp-zone.card { color: #ffcf8a; background: rgba(255, 180, 84, .1); }
.insp-zone.clean { color: #99f6e4; background: rgba(94, 234, 212, .1); }
.insp-body pre { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.65; color: #c9d1dc; white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow: auto; }
.insp-body pre .jk { color: #c4b5fd; } .insp-body pre .js { color: #86efac; } .insp-body pre .jn { color: #fcd34d; } .insp-body pre .jb { color: #f9a8d4; }
.insp-body pre .tok { color: #5eead4; } .insp-body pre .pan { color: #ffb454; }
.insp-note { font-size: 12px; color: #7b8391; margin-top: 8px; line-height: 1.5; }
.insp-empty { margin: 0; font-size: 13px; color: #6d7583; }

.logbox { border-top: 1px solid var(--stage-line); }
.logbox > summary { cursor: pointer; list-style: none; padding: 12px 18px; font-size: 13px; color: var(--stage-muted); display: flex; justify-content: space-between; gap: 10px; }
.logbox > summary::-webkit-details-marker { display: none; }
.logbox > summary span { font-family: var(--mono); font-size: 11.5px; }
.evlog { margin: 0; border-top: 1px solid var(--stage-line); height: 180px; overflow-y: auto; padding: 10px 18px 14px; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: #9aa3b0; scrollbar-width: thin; scrollbar-color: #333a45 transparent; }
.evlog .ln { white-space: pre-wrap; word-break: break-word; }
.evlog .t { color: #555d6a; }
.evlog .k { color: var(--blue); }
.evlog .k.capture, .evlog .k.capture-open, .evlog .k.capture-reply { color: var(--teal); }
.evlog .k.charge, .evlog .k.charge-start { color: var(--green); }
.evlog .k.refused, .evlog .k.upstream-error, .evlog .k.err { color: var(--red); }
.evlog .k.sdk { color: #c4b5fd; }
.evlog .empty { color: #555d6a; }