/* ZenitFlows owns this overlay and zf-flow-open only; the surrounding SaaS shell is independent. */
body.zf-flow-open { overflow: hidden !important; }
body.zf-flow-open #workspace > aside,
body.zf-flow-open #workspace > main > header { visibility: hidden !important; pointer-events: none !important; }
body.zf-flow-open #toast { z-index: 180; }
.zf {
  --zf-text: #172033;
  --zf-muted: #677489;
  --zf-border: #e2e6ee;
  --zf-blue: var(--color-brand-primary);
  --zf-panel: #ffffff;
  --zf-red: #c93850;
  --zf-surface: #f5f7fb;
  --zf-accent-soft: var(--color-brand-primary-soft);
  --zf-canvas: #f5f7fb;
  --zf-grid: #c5cfdf;
  --zf-edge: #64748b;
  color: var(--zf-text);
  font: 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-width: 0;
  color-scheme: light;
}
.zf *, .zf *::before, .zf *::after { box-sizing: border-box; }
.zf [hidden] { display: none !important; }
.zf button, .zf input, .zf textarea, .zf select { font: inherit; }
.zf button, .zf a { -webkit-tap-highlight-color: transparent; }
.zf button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: #fff; color: #344158; border: 1px solid #dce2eb; border-radius: 7px; padding: 8px 13px; cursor: pointer; line-height: 1.4; transition: background .15s, border-color .15s, box-shadow .15s; }
.zf button:hover { background: #f2f5fa; border-color: #b6c5df; }
.zf button:disabled { opacity: .45; cursor: not-allowed; }
.zf button:focus-visible, .zf a:focus-visible, .zf input:focus-visible,
.zf textarea:focus-visible, .zf select:focus-visible, .zf summary:focus-visible,
.zf .zf-canvas:focus-visible { outline: 2px solid var(--color-link); outline-offset: 3px; }
.zf button.zf-primary { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: #fff; font-weight: 600; box-shadow: 0 2px 4px var(--color-focus-ring); }
.zf button.zf-primary:hover { background: var(--color-brand-primary-hover); border-color: var(--color-brand-primary-hover); }
.zf button.zf-danger { color: var(--zf-red); }
.zf .zf-icon { width: 19px; height: 19px; flex: none; vertical-align: middle; }
.zf p { margin: 0 0 12px; }
.zf h1, .zf h2, .zf h3 { color: var(--zf-text); }
.zf h1 { font-size: clamp(26px, 2.5vw, 34px); letter-spacing: -1px; margin: 5px 0 8px; line-height: 1.2; }
.zf h2 { font-size: 18px; margin: 0 0 8px; letter-spacing: -.35px; }
.zf h3 { font-size: 13px; margin: 0 0 10px; }
.zf small, .zf .zf-help { color: var(--zf-muted); font-size: 11px; }
.zf .zf-help { line-height: 1.7; overflow-wrap: anywhere; }
.zf-eyebrow, .zf-section-label { color: #8390a3; font-size: 9px; letter-spacing: .12em; font-weight: 650; }
.zf-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-primary); flex: none; }
.zf input, .zf textarea, .zf select { display: block; width: 100%; min-width: 0; max-width: 100%; border: 1px solid #dce2eb; border-radius: 7px; background: #fff; color: #26344b; padding: 9px 10px; box-shadow: none; letter-spacing: normal; }
.zf textarea { resize: vertical; min-height: 74px; line-height: 1.65; }
.zf input::placeholder, .zf textarea::placeholder { color: #96a0b1; }
.zf label { color: #475569; font-size: 12px; margin: 0; }
.zf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 17px !important; }
.zf-field > span { font-weight: 550; }
.zf-field small { font-weight: 400; line-height: 1.6; }
.zf summary { cursor: pointer; color: #64748b; font-size: 11px; padding: 7px 0; }
.zf-loading { padding: 80px 20px; text-align: center; color: var(--zf-muted); }
.zf-empty { padding: 55px 24px; text-align: center; color: var(--zf-muted); }
.zf-empty h2 { margin-bottom: 10px; }
.zf-empty p { max-width: 410px; margin: 0 auto 18px; }
.zf-empty-symbol { display: block; color: var(--color-brand-primary); font-size: 42px; margin-bottom: 16px; }

/* Directory: neutral surfaces and the same cobalt accent as the editor. */
.zf-list { max-width: 1500px; margin: 0 auto; }
.zf-list-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.zf-list-head p { color: #64748b; margin: 0; }
.zf-list-head > button { white-space: nowrap; padding: 11px 18px; }
.zf-summary { display: flex; align-items: center; gap: 25px; margin: 25px 0; color: #64748b; font-size: 12px; }
.zf-summary > span { display: inline-flex; align-items: center; gap: 7px; }
.zf-summary strong { color: #27344b; font-size: 16px; font-weight: 600; }
.zf-templates { display: grid; grid-template-columns: 1fr repeat(3, 1.15fr); gap: 12px; background: #f5f7fc; border: 1px solid #e1e7f2; border-radius: 12px; padding: 20px; }
.zf-templates > div { align-self: center; padding: 4px; }
.zf-templates p { font-size: 12px; color: #64748b; margin: 8px 0 0; }
.zf button.zf-template { text-align: left; display: grid; grid-template-columns: 30px 1fr; gap: 3px 8px; background: #fff; border-color: #e0e6f0; padding: 13px; }
.zf button.zf-template:hover { border-color: var(--color-brand-border); box-shadow: 0 3px 12px var(--color-focus-ring); }
.zf-template > span { grid-row: 1 / 3; color: var(--color-brand-primary); background: var(--color-brand-primary-soft); border-radius: 7px; width: 28px; height: 31px; display: grid; place-items: center; font-size: 19px; }
.zf-template strong { font-size: 12px; font-weight: 600; }
.zf-template small { font-size: 10px; }
.zf-list-tools { display: flex; align-items: end; gap: 14px; margin: 27px 0 15px; }
.zf-list-tools label { display: grid; gap: 6px; }
.zf-search { flex: 1; max-width: 390px; }
.zf-list-tools select { min-width: 180px; }
.zf-records { display: grid; gap: 10px; }
.zf-record { display: flex; align-items: center; gap: 16px; border: 1px solid #e1e6ef; background: #fff; padding: 17px 20px; border-radius: 10px; }
.zf-record-icon { width: 42px; height: 42px; border: 1px solid var(--color-brand-border); background: var(--color-brand-primary-soft); color: var(--color-brand-primary); border-radius: 10px; display: grid; place-items: center; font-size: 24px; flex: none; }
.zf-record-body { flex: 1; min-width: 0; }
.zf-record-name { font-size: 15px; font-weight: 600; color: #26344b; text-decoration: none; overflow-wrap: anywhere; }
.zf-record-name:hover { color: var(--color-brand-primary); }
.zf-record-body p { color: #7a879b; font-size: 11px; margin: 5px 0 0; }
.zf-badge { font-size: 10px; border: 1px solid #e0e6ef; color: #78859a; background: #f5f7fb; padding: 4px 9px; border-radius: 30px; white-space: nowrap; }
.zf-badge.is-active { color: var(--color-brand-primary); background: var(--color-brand-primary-soft); border-color: var(--color-brand-border); }
.zf-record-actions { display: flex; gap: 7px; }
.zf-record-actions button { font-size: 11px; padding: 7px 9px; }
.zf-feedback { color: var(--zf-red); margin-top: 15px !important; }

/* Actual full-viewport editor, mounted directly under body to escape shell transforms. */
.zf.zf-editor { position: fixed !important; inset: 0 !important; z-index: 150; width: 100%; height: 100dvh; max-width: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; overflow: hidden; background: #151821; isolation: isolate; }
.zf-editor-head { height: 64px; min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 0 22px 0 14px; background: #fff; border-bottom: 1px solid #e2e6ee; z-index: 6; }
.zf-editor-identity { display: flex; align-items: center; min-width: 0; gap: 12px; flex: 1; }
.zf button.zf-icon-button { width: 34px; height: 34px; padding: 7px; border-color: transparent; background: transparent; flex: none; }
.zf-bot-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--color-brand-primary-soft); color: var(--color-brand-primary); flex: none; }
.zf input.zf-flow-name { width: clamp(140px, 25vw, 380px); font-size: 15px; font-weight: 600; border: 1px solid transparent; background: transparent; padding: 6px 3px; margin: 0; letter-spacing: -.2px; border-radius: 4px; text-overflow: ellipsis; color: #28354b; }
.zf input.zf-flow-name:hover { border-color: #dce2eb; }
.zf-editor-actions { display: flex; gap: 9px; align-items: center; flex: none; }
.zf-editor-actions button { height: 35px; font-size: 12px; padding: 7px 14px; white-space: nowrap; }
.zf-save-state { font-size: 10px; color: #7b879b; white-space: nowrap; padding: 4px 8px; border-radius: 5px; background: #f2f4f8; }
.zf-save-state.is-dirty { color: #986825; background: #fff8ec; }
.zf-status-stack { display: flex; align-items: flex-start; flex-direction: column; gap: 2px; min-width: 0; }
.zf-publication-state { color: var(--zf-muted); font-size: 10px; font-weight: 650; white-space: nowrap; }
.zf-publication-state.is-active { color: var(--zf-blue); }
.zf-status-stack .zf-save-state { padding: 0; border-radius: 0; background: transparent; font-size: 10px; }
.zf-status-stack .zf-save-state.is-dirty { color: #9a6518; }
.zf-editor-layout { position: relative; flex: 1; min-height: 0; width: 100%; overflow: hidden; }
.zf-canvas-column { position: absolute; inset: 0; min-width: 0; min-height: 0; }
.zf-canvas { position: absolute; inset: 0; overflow: hidden; outline-offset: -4px !important; background-color: var(--zf-canvas); background-image: radial-gradient(circle, var(--zf-grid) .9px, transparent 1px); background-size: 24px 24px; cursor: grab; touch-action: none; isolation: isolate; }
.zf-canvas.is-dragging, .zf-canvas.is-dragging * { cursor: grabbing !important; user-select: none; }
.zf-world { position: absolute; top: 0; left: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.zf-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.zf-edge { fill: none; stroke: #cbd5e1; stroke-width: 1.7; opacity: .76; stroke-dasharray: 6 5; }
.zf-edge-yes { stroke: var(--color-link); }
.zf-edge-no { stroke: #b6becb; }
.zf-edge.is-selected { stroke: var(--color-brand-border); opacity: 1; stroke-width: 2.2; stroke-dasharray: none; }
.zf-nodes { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.zf-canvas-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: #8893a8; pointer-events: none; }

/* One narrow floating rail; labels appear on hover/focus without taking canvas space. */
.zf-library { position: absolute; top: 20px; left: 16px; width: 48px; padding: 5px; background: #222733; border: 1px solid #373e4e; border-radius: 10px; box-shadow: 0 5px 20px #0003; z-index: 3; }
.zf-library-items { display: flex; flex-direction: column; gap: 2px; }
.zf-library-items button { position: relative; width: 36px; height: 37px; padding: 8px; border: 0; color: #c1cbdd; background: transparent; border-radius: 6px; }
.zf-library-items button:hover, .zf-library-items button:focus-visible { background: #323c52; color: var(--color-brand-border); }
.zf-library-items button::after { content: attr(data-tooltip); position: absolute; top: 50%; left: calc(100% + 15px); transform: translateY(-50%); background: #f8fafc; color: #28354b; border: 1px solid #dce3ef; border-radius: 6px; box-shadow: 0 4px 16px #0002; padding: 7px 11px; font-size: 11px; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; }
.zf-library-items button:hover::after, .zf-library-items button:focus-visible::after { opacity: 1; visibility: visible; }
.zf-canvas-toolbar { position: absolute; right: 22px; top: 20px; display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid #373e4e; border-radius: 9px; background: #222733; box-shadow: 0 4px 18px #0002; z-index: 2; }
.zf-canvas-toolbar > div { display: flex; gap: 3px; }
.zf-canvas-toolbar button, .zf-zoom button { width: 32px; height: 32px; border: 0; padding: 7px; color: #c1cbdd; background: transparent; border-radius: 5px; }
.zf-canvas-toolbar button:hover, .zf-zoom button:hover { background: #353e50; color: #fff; }
.zf-toolbar-divider { width: 1px; height: 18px; background: #41495a; margin: 0 3px; flex: none; }
.zf-canvas-bottom { position: absolute; bottom: 18px; left: 24px; right: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; pointer-events: none; z-index: 2; }
.zf-canvas-help { display: flex; align-items: center; gap: 14px; color: #9ca8bc; font-size: 11px; }
.zf-canvas-count { white-space: nowrap; color: #c4cddd; }
.zf-connect-help { color: #8d9ab0; max-width: 500px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.zf-zoom { display: flex; align-items: center; gap: 2px; padding: 4px; background: #222733; border: 1px solid #373e4e; border-radius: 8px; box-shadow: 0 4px 18px #0002; flex: none; pointer-events: auto; }
.zf-zoom-value { display: block; width: 42px; color: #d1d9e7; font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
.zf-editor.has-drawer .zf-canvas-toolbar { right: 322px; }
.zf-editor.has-drawer .zf-canvas-bottom { right: 322px; }

/* Larger, readable cards; the entry is a distinct circular node. */
.zf-node { position: absolute; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; box-shadow: 0 5px 20px #0003; color: #26344b; z-index: 1; }
.zf-node.is-selected { border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px #3b82f63b, 0 6px 20px #0004; z-index: 2; }
.zf-node:hover { border-color: var(--color-brand-border); }
.zf button.zf-node-select { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; gap: 0; border: 0; border-radius: 9px; text-align: left; background: transparent; color: inherit; cursor: grab; user-select: none; justify-content: flex-start; overflow: hidden; }
.zf button.zf-node-select:hover { background: transparent; }
.zf-node-header { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 57px; padding: 10px 13px; border-bottom: 1px solid #e6ecf5; background: var(--color-brand-primary-soft); border-radius: 9px 9px 0 0; }
.zf-type-icon { display: inline-grid; place-items: center; color: var(--color-brand-primary); background: #dde9ff; width: 30px; height: 30px; border-radius: 7px; font-weight: 600; flex: none; }
.zf-type-icon .zf-icon { width: 19px; height: 19px; }
.zf-node-heading { display: block; min-width: 0; flex: 1; }
.zf-node-label { display: block; max-width: 100%; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; line-height: 1.5; }
.zf-node-type { display: block; font-size: 10px; color: #75849b; }
.zf-node-menu { color: #8495b2; font-size: 22px; letter-spacing: 1px; }
.zf-node-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; width: 100%; text-align: left; padding: 13px 15px 0; font-size: 14px; color: #56647a; line-height: 1.6; overflow: hidden; overflow-wrap: anywhere; }
.zf-type-condition .zf-node-header { background: #fff5e7; border-color: #f4e5cf; }
.zf-type-condition .zf-type-icon { color: #b47121; background: #ffebcc; }
.zf-type-question .zf-node-header, .zf-type-ai .zf-node-header { background: #f3efff; border-color: #e8dfff; }
.zf-type-question .zf-type-icon, .zf-type-ai .zf-type-icon { color: #7c3aed; background: #e9dfff; }
.zf-type-note .zf-node-header, .zf-type-task .zf-node-header { background: #fff5ee; border-color: #f3e5db; }
.zf-type-note .zf-type-icon, .zf-type-task .zf-type-icon { color: #c16c35; background: #ffeadc; }
.zf-type-start.zf-node { border-radius: 50%; background: var(--color-brand-primary); color: #fff; border: 3px solid #6e9cfb; box-shadow: 0 0 0 8px #2563eb12, 0 8px 25px #0003; }
.zf-type-start button.zf-node-select { border-radius: 50%; align-items: center; justify-content: center; gap: 4px; }
.zf-start-icon .zf-icon { width: 30px; height: 30px; fill: #fff; stroke-width: 1.3; }
.zf-type-start .zf-node-label { font-size: 16px; max-width: 110px; }
.zf-start-caption { color: #dbeafe; font-size: 9px; }
.zf button.zf-port { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #aab7cc; padding: 0; background: #fff; z-index: 3; box-shadow: 0 1px 4px #0002; }
.zf button.zf-port:hover { background: var(--color-brand-primary); border-color: var(--color-brand-border); }
.zf-port-in { left: -8px; top: calc(50% - 7px); }
.zf-port-next { right: -8px; top: calc(50% - 7px); }
.zf button.zf-port-yes { right: -8px; top: calc(30% - 7px); border-color: var(--color-brand-primary); }
.zf button.zf-port-no { right: -8px; top: calc(72% - 7px); border-color: #94a3b8; }
.zf-port > span { position: absolute; top: -6px; right: 17px; color: #61718a; font-size: 10px; font-weight: 600; line-height: 1.4; background: #fff; border-radius: 4px; padding: 1px 4px; }
.zf-port-yes > span { color: var(--color-brand-primary); }
.zf.is-connecting .zf-node:not(.zf-type-start) { outline: 2px dashed var(--color-link); outline-offset: 6px; }
.zf.is-connecting .zf-node-select { cursor: crosshair; }
.zf.is-connecting .zf-connect-help { color: var(--color-brand-border); }
.zf.is-saving .zf-canvas { opacity: .8; }

/* Right drawers overlap the canvas; only one is ever visible. */
.zf-inspector, .zf-simulator { position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, calc(100vw - 76px)); z-index: 4; background: #fff; border-left: 1px solid #dfe5ee; box-shadow: -8px 0 32px #00000018; min-height: 0; }
.zf-inspector { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.zf-inspector-title { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e7ebf2; padding: 18px; background: #fff; z-index: 1; }
.zf-inspector-title > div { flex: 1; min-width: 0; }
.zf-inspector-title h2 { font-size: 14px; margin: 3px 0 0; }
.zf-inspector-title .zf-icon-button { width: 28px; height: 28px; padding: 5px; }
.zf-inspector-fields { padding: 21px 18px; }
.zf-inspector input, .zf-inspector select, .zf-inspector textarea { font-size: 12px; padding: 9px; }
.zf-inspector select { text-overflow: ellipsis; }
.zf-inspector textarea { min-height: 115px; }
.zf-inspector-divider { height: 1px; background: #e7ebf2; margin: 22px 0; }
.zf-node-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.zf-node-actions button { font-size: 11px; padding: 7px 9px; }
.zf-position { margin-top: 18px; }
.zf-position code { display: block; font-size: 9px; color: #8995a7; overflow-wrap: anywhere; user-select: all; padding-bottom: 12px; }
.zf-position-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zf-notice, .zf-issues { position: absolute; z-index: 5; top: 18px; left: 90px; width: min(560px, calc(100% - 430px)); border-radius: 9px; box-shadow: 0 6px 24px #0003; }
.zf-notice { border: 1px solid #f1c4cc; background: #fff3f5; color: #a63249; padding: 12px 16px; font-size: 12px; overflow-wrap: anywhere; }
.zf-issues { background: #fff; border: 1px solid #dce4f0; padding: 11px 15px; max-height: 240px; overflow-y: auto; }
.zf-issues > div { display: flex; align-items: center; justify-content: space-between; font-size: 12px; gap: 10px; margin-bottom: 5px; }
.zf-issues > div button { padding: 1px 8px; background: transparent; font-size: 18px; border: 0; }
.zf button.zf-issue { display: block; width: 100%; text-align: left; border: 0; border-radius: 3px; background: transparent; padding: 5px 0; font-size: 11px; }
.zf button.zf-issue:hover { text-decoration: underline; }
.zf button.zf-issue-error { color: #c93850; }
.zf button.zf-issue-warning { color: #a66a24; }

/* Simulator session remains purely client-side; the server only executes a dry run. */
.zf-simulator { display: grid; grid-template-rows: auto auto auto minmax(80px, 1fr) auto; overflow: hidden; }
.zf-sim-head { grid-row: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px; }
.zf-sim-head h2 { font-size: 17px; margin: 3px 0 0; }
.zf-sim-head button { font-size: 20px; width: 29px; height: 29px; padding: 1px; background: transparent; border-color: transparent; }
.zf-sim-safe { grid-row: 2; display: flex; align-items: center; gap: 6px; font-size: 9px; color: #45689e; background: #eff5ff; border-top: 1px solid #e1ebff; border-bottom: 1px solid #e1ebff; padding: 9px 15px; }
.zf-sim-stale { grid-row: 3; color: #986825; background: #fff8ec; padding: 8px 14px; font-size: 10px; margin: 0 !important; }
.zf-sim-log { grid-row: 4; overflow-y: auto; padding: 18px 13px; background: #f7f9fc; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.zf-sim-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; height: 100%; text-align: center; padding: 12px; color: #8390a3; }
.zf-sim-welcome > span { display: grid; place-items: center; width: 43px; height: 43px; background: #e8efff; color: var(--color-brand-primary); font-size: 26px; border-radius: 12px; margin-bottom: 13px; }
.zf-sim-welcome strong { color: #475569; font-size: 13px; font-weight: 600; }
.zf-sim-welcome p { font-size: 11px; margin: 8px 0 0; line-height: 1.65; }
.zf-bubble { border-radius: 11px 11px 11px 3px; background: #fff; border: 1px solid #e1e6ef; padding: 10px 12px; margin: 0 18px 13px 0; overflow-wrap: anywhere; box-shadow: 0 2px 3px #17203303; }
.zf-bubble p { font-size: 12px; white-space: pre-wrap; line-height: 1.65; margin: 4px 0 0; color: #475569; }
.zf-bubble small { display: block; color: #8190a6; font-size: 9px; }
.zf-bubble-user { background: var(--color-brand-primary); border-color: var(--color-brand-primary); border-radius: 11px 11px 3px 11px; margin: 0 0 13px 18px; }
.zf-bubble-user p { color: #fff; }
.zf-bubble-user small { color: #c8ddff; }
.zf-bubble-system { background: #f0f3f8; border: 1px dashed #d5dde9; margin: 0 0 10px; border-radius: 7px; box-shadow: none; }
.zf-bubble-system small { color: #7e8ba0; }
.zf-bubble-system p { font-size: 10px; color: #64748b; }
.zf-sim-form { grid-row: 5; padding: 14px; border-top: 1px solid #e1e6ef; background: #fff; overflow-y: auto; max-height: min(345px, 48dvh); }
.zf-sim-form .zf-field { margin-bottom: 10px !important; }
.zf-sim-form textarea { font-size: 12px; min-height: 65px; }
.zf-sim-form > .zf-help { font-size: 9px; line-height: 1.6; margin: 3px 0 10px; }
.zf-sim-vars { margin: 0 0 7px; }
.zf-sim-vars textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.zf-sim-actions { display: flex; gap: 8px; justify-content: space-between; }
.zf-sim-actions button { font-size: 11px; }
.zf-sim-error { font-size: 11px; color: #c93850; margin: 9px 0 0 !important; overflow-wrap: anywhere; }
.zf-sim-error:empty { display: none; }
.zf-sim-trace { border-top: 1px solid #dfe5ee; padding-top: 5px; margin-top: 8px; }
.zf-sim-trace pre { white-space: pre-wrap; overflow-wrap: anywhere; color: #64748b; font: 10px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; max-height: 250px; overflow-y: auto; }

@media (max-width: 1250px) {
  .zf-editor-head { padding-right: 14px; gap: 15px; }
  .zf-editor-identity { gap: 8px; }
  .zf input.zf-flow-name { width: clamp(120px, 20vw, 300px); }
  .zf-save-state { font-size: 9px; max-width: 155px; overflow: hidden; text-overflow: ellipsis; }
  .zf-templates { grid-template-columns: repeat(3, 1fr); }
  .zf-templates > div { grid-column: 1 / -1; display: flex; align-items: center; gap: 15px; }
  .zf-templates p { margin: 0; }
  .zf-connect-help { max-width: 280px; }
}
@media (max-height: 740px) {
  .zf-editor-head { height: 56px; min-height: 56px; }
  .zf-library { top: 14px; }
  .zf-library-items button { height: 31px; padding: 6px; }
  .zf-canvas-bottom { bottom: 12px; }
  .zf-sim-form { max-height: 290px; }
}
@media (max-width: 900px) {
  .zf-editor-head { gap: 10px; padding-left: 8px; }
  .zf-bot-avatar { display: none; }
  .zf-save-state { background: transparent; padding: 0; max-width: 105px; font-size: 9px; }
  .zf input.zf-flow-name { width: clamp(110px, 22vw, 190px); font-size: 13px; }
  .zf-editor-actions { gap: 6px; }
  .zf-editor-actions button { padding: 7px 10px; font-size: 11px; }
  .zf-editor-actions .zf-icon { width: 15px; height: 15px; }
  .zf-connect-help { display: none; }
  .zf-editor.has-drawer .zf-canvas-toolbar { right: 318px; }
  .zf-editor.has-drawer .zf-canvas-bottom { right: 318px; }
  .zf-record { flex-wrap: wrap; gap: 10px; }
  .zf-record-actions { margin-left: auto; }
}
@media (max-width: 600px) {
  .zf-editor-head { height: 88px; min-height: 88px; flex-wrap: wrap; gap: 0; align-content: center; padding: 4px 10px; }
  .zf-editor-identity { width: 100%; flex-basis: 100%; height: 35px; }
  .zf input.zf-flow-name { flex: 1; width: auto; }
  .zf-save-state { max-width: 170px; }
  .zf-editor-actions { width: 100%; justify-content: flex-end; height: 36px; }
  .zf-editor-actions button { height: 29px; padding: 5px 10px; }
  .zf-library { left: 10px; top: 12px; width: 42px; padding: 4px; }
  .zf-library-items button { width: 32px; height: 32px; padding: 6px; }
  .zf-canvas-toolbar { top: 12px; right: 12px; padding: 3px; }
  .zf-canvas-toolbar button { width: 27px; height: 28px; padding: 5px; }
  .zf-editor.has-drawer .zf-canvas-toolbar { display: none; }
  .zf-canvas-bottom { left: 12px; right: 12px; bottom: 12px; }
  .zf-editor.has-drawer .zf-canvas-bottom { right: 12px; }
  .zf-editor.has-drawer .zf-zoom { display: none; }
  .zf-editor.has-drawer .zf-canvas-help { display: none; }
  .zf-notice, .zf-issues { left: 65px; right: 12px; width: auto; }
  .zf-list-head { flex-wrap: wrap; gap: 14px; }
  .zf-list-head p { font-size: 12px; }
  .zf-summary { gap: 16px; margin: 20px 0; font-size: 11px; }
  .zf-templates { grid-template-columns: 1fr; padding: 15px; gap: 9px; }
  .zf-templates > div { display: block; }
  .zf-templates p { margin: 5px 0 3px; }
  .zf-record { padding: 14px; }
  .zf-record-icon { width: 35px; height: 35px; }
  .zf-record-actions { width: 100%; padding-left: 45px; }
  .zf-record-actions button { flex: 1; }
  .zf-list-tools { gap: 9px; align-items: stretch; }
  .zf-list-tools select { min-width: 0; }
  .zf-list-tools > label:last-child { width: 140px; }
}
/* X1 creation and adding steps: names stay discoverable without a permanent drawer. */
.zf-create-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 26px; border: 1px solid var(--zf-border); border-radius: 16px; background: var(--zf-panel); color: var(--zf-text); box-shadow: 0 24px 90px #0f172a40; overflow-y: auto; }
.zf-create-dialog::backdrop { background: #0b122b88; backdrop-filter: blur(3px); }
.zf-create-head, .zf-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zf-create-head h2 { margin: 5px 0 12px; font-size: 23px; }
.zf-create-head .zf-icon-button { align-self: flex-start; }
.zf-create-options { display: grid; gap: 10px; margin: 23px 0; }
.zf-create-options .zf-template { padding: 17px; grid-template-columns: 42px 1fr; gap: 5px 13px; }
.zf-create-options .zf-template > span { width: 40px; height: 40px; }
.zf-create-options .zf-template strong { font-size: 14px; }
.zf-create-options .zf-template small { font-size: 12px; }
.zf-create-footer { display: flex; gap: 14px; justify-content: space-between; align-items: center; padding-top: 18px; border-top: 1px solid var(--zf-border); }
.zf-create-footer button { white-space: nowrap; }
.zf .zf-library-open { width: 36px; height: 37px; border: 0; padding: 7px; border-radius: 6px; margin-bottom: 6px; background: var(--zf-blue); color: #fff; }
.zf .zf-library-open:hover { background: var(--color-brand-primary-hover); color: #fff; }
.zf-add-picker { position: absolute; z-index: 6; left: 76px; top: 20px; width: min(285px, calc(100vw - 96px)); max-height: calc(100% - 88px); overflow-y: auto; overscroll-behavior: contain; background: var(--zf-panel); border: 1px solid var(--zf-border); border-radius: 12px; box-shadow: 0 10px 35px #0f172a26; padding: 16px; scrollbar-width: thin; }
.zf-picker-head { margin-bottom: 12px; }
.zf-picker-head h3 { font-size: 16px; margin: 3px 0 0; }
.zf-picker-context { color: var(--zf-muted); font-size: 12px; margin-bottom: 6px !important; overflow-wrap: anywhere; }
.zf-picker-context strong { color: var(--zf-text); }
.zf-add-picker > .zf-help { font-size: 11px; margin-bottom: 13px; }
.zf-picker-options { display: grid; gap: 5px; }
.zf .zf-picker-options button { display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 10px; padding: 10px 8px; border: 1px solid transparent; background: transparent; }
.zf .zf-picker-options button:hover, .zf .zf-picker-options button.is-preferred { background: var(--zf-accent-soft); border-color: var(--zf-border); }
.zf-picker-options button > span:last-child { flex: 1; min-width: 0; }
.zf-picker-options strong { display: block; font-size: 12px; font-weight: 600; }
.zf-picker-options small { display: block; font-size: 10px; line-height: 1.6; margin-top: 2px; }
.zf-picker-more { margin-top: 10px; border-top: 1px solid var(--zf-border); padding-top: 5px; }
.zf-picker-more summary { font-size: 12px; padding: 9px 4px; }
.zf button.zf-insert { position: absolute; z-index: 4; right: -48px; top: calc(50% - 15px); width: 30px; height: 30px; padding: 0; font-size: 21px; font-weight: 500; line-height: 1; border: 2px solid var(--zf-panel); border-radius: 50%; background: var(--color-brand-primary); color: #fff; box-shadow: 0 2px 8px #1d4ed84d; cursor: pointer; }
.zf button.zf-insert:hover { background: var(--color-brand-primary-hover); transform: scale(1.08); }
.zf button.zf-insert-yes { top: calc(30% - 15px); }
.zf button.zf-insert-no { top: calc(72% - 15px); }
.zf button.zf-add-after { width: 100%; padding: 9px; margin: -5px 0 18px; background: var(--zf-accent-soft); border: 1px dashed #9bb8ee; color: var(--zf-blue); font-size: 11px; }
.zf-block-intro { font-size: 12px; color: var(--zf-muted); padding-bottom: 13px; border-bottom: 1px solid var(--zf-border); line-height: 1.7; margin-bottom: 17px !important; }
.zf-variables { margin: -3px 0 22px; }
.zf-variables > span { display: block; color: var(--zf-muted); font-size: 10px; margin-bottom: 7px; }
.zf-variables > div { display: flex; flex-wrap: wrap; gap: 5px; }
.zf .zf-variables button { border: 1px solid var(--zf-border); background: var(--zf-surface); color: var(--zf-blue); padding: 4px 7px; font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; border-radius: 5px; }
.zf-variables > small { display: block; line-height: 1.7; font-size: 10px; margin-top: 9px; }
.zf-meta-help { border: 1px solid var(--zf-border); border-radius: 8px; background: var(--zf-accent-soft); padding: 12px; margin-bottom: 20px; font-size: 11px; }
.zf-meta-help strong { display: block; margin-bottom: 6px; }
.zf-meta-help p { color: var(--zf-muted); line-height: 1.7; font-size: 11px; }
.zf-meta-help p:last-child { margin: 0; }
.zf-type-meta_conversion .zf-node-header { background: var(--color-brand-primary-soft); }

/* Same layout in either theme; the application owns and persists data-theme. */
html[data-theme="dark"] .zf {
  --zf-text: #e5eaf4;
  --zf-muted: #a4b1c7;
  --zf-border: #303d52;
  --zf-blue: #8bb6ff;
  --zf-panel: #182131;
  --zf-surface: #111b2b;
  --zf-accent-soft: #203455;
  --zf-red: #ff9bad;
  --zf-canvas: #0e1420;
  --zf-grid: #303c50;
  --zf-edge: #b3c2d8;
  color-scheme: dark;
}
.zf button { background: var(--zf-panel); border-color: var(--zf-border); color: var(--zf-text); }
.zf button:hover { background: var(--zf-surface); }
.zf input, .zf textarea, .zf select { background: var(--zf-panel); border-color: var(--zf-border); color: var(--zf-text); }
.zf label, .zf summary { color: var(--zf-muted); }
.zf .zf-record, .zf button.zf-template, .zf .zf-issues { background: var(--zf-panel); border-color: var(--zf-border); }
.zf-record-name, .zf-summary strong { color: var(--zf-text); }
.zf-list-head p, .zf-record-body p, .zf-templates p, .zf-summary { color: var(--zf-muted); }
.zf-templates, .zf-badge { background: var(--zf-surface); border-color: var(--zf-border); color: var(--zf-muted); }
.zf-badge.is-active, .zf-template > span, .zf-record-icon, .zf-bot-avatar { background: var(--zf-accent-soft); border-color: var(--zf-border); color: var(--zf-blue); }
.zf-editor-head, .zf-inspector, .zf-inspector-title, .zf-simulator, .zf-sim-form { background: var(--zf-panel); border-color: var(--zf-border); }
.zf input.zf-flow-name { color: var(--zf-text); }
.zf-editor-head .zf-icon-button { color: var(--zf-muted); }
.zf-editor-actions .theme-toggle { width: 34px; height: 34px; padding: 0; border-color: transparent; background: transparent; color: var(--zf-text); font-size: 20px; flex: none; }
.zf-library, .zf-canvas-toolbar, .zf-zoom { background: var(--zf-panel); border-color: var(--zf-border); box-shadow: 0 4px 20px #0f172a14; }
.zf-library-items button, .zf-canvas-toolbar button, .zf-zoom button { background: transparent; color: var(--zf-muted); }
.zf-library-items button:hover, .zf-library-items button:focus-visible, .zf-canvas-toolbar button:hover, .zf-zoom button:hover { background: var(--zf-accent-soft); color: var(--zf-blue); }
.zf-library-items button::after { background: var(--zf-panel); border-color: var(--zf-border); color: var(--zf-text); }
.zf-toolbar-divider, .zf-inspector-divider { background: var(--zf-border); }
.zf-canvas-count, .zf-zoom-value { color: var(--zf-text); }
.zf-canvas-help, .zf-connect-help, .zf-canvas-empty { color: var(--zf-muted); }
.zf-edge { stroke: var(--zf-edge); }
.zf-edge-yes { stroke: var(--color-brand-primary); }
.zf-edge-no { stroke: var(--zf-edge); }
.zf-edge.is-selected { stroke: var(--color-brand-primary); }
.zf-node { background: var(--zf-panel); color: var(--zf-text); border-color: var(--zf-border); box-shadow: 0 4px 16px #0f172a14; }
.zf-node-header { border-color: var(--zf-border); background: var(--zf-accent-soft); }
.zf-node-summary, .zf-node-type { color: var(--zf-muted); }
.zf-port > span { background: var(--zf-panel); color: var(--zf-muted); }
.zf-port-yes > span { color: var(--zf-blue); }
.zf-sim-log { background: var(--zf-surface); }
.zf-sim-safe { background: var(--zf-accent-soft); color: var(--zf-blue); border-color: var(--zf-border); }
.zf-sim-welcome > span { background: var(--zf-accent-soft); color: var(--zf-blue); }
.zf-sim-welcome strong { color: var(--zf-text); }
.zf-bubble { background: var(--zf-panel); border-color: var(--zf-border); }
.zf-bubble p, .zf-sim-welcome p { color: var(--zf-text); }
.zf-bubble small, .zf-sim-trace pre { color: var(--zf-muted); }
.zf-bubble-system { background: var(--zf-surface); }
.zf-bubble-system p { color: var(--zf-muted); }
.zf-bubble-user { background: var(--color-brand-primary); border-color: var(--color-brand-primary); }
.zf-bubble-user p { color: #fff; }
.zf-bubble-user small { color: #dbeafe; }
.zf-sim-trace { border-color: var(--zf-border); }
html[data-theme="dark"] .zf .zf-type-condition .zf-node-header { background: #3d3020; border-color: #594628; }
html[data-theme="dark"] .zf .zf-type-condition .zf-type-icon { background: #594020; color: #ffd18b; }
html[data-theme="dark"] .zf .zf-type-question .zf-node-header,
html[data-theme="dark"] .zf .zf-type-ai .zf-node-header { background: #30264a; border-color: #493663; }
html[data-theme="dark"] .zf .zf-type-question .zf-type-icon,
html[data-theme="dark"] .zf .zf-type-ai .zf-type-icon { background: #453060; color: #d5b8ff; }
html[data-theme="dark"] .zf .zf-type-note .zf-node-header,
html[data-theme="dark"] .zf .zf-type-task .zf-node-header { background: #382c26; border-color: #544033; }
html[data-theme="dark"] .zf .zf-type-note .zf-type-icon,
html[data-theme="dark"] .zf .zf-type-task .zf-type-icon { background: #513b2d; color: #ffc39b; }
html[data-theme="dark"] .zf .zf-type-meta_conversion .zf-node-header { background: #203455; }
html[data-theme="dark"] .zf .zf-type-icon { color: #a9c9ff; background: #263f63; }
html[data-theme="dark"] .zf .zf-port { background: var(--zf-panel); }
html[data-theme="dark"] .zf .zf-status-stack .zf-save-state.is-dirty { color: #f4c373; }
html[data-theme="dark"] .zf .zf-notice { background: #3b2330; border-color: #754355; color: #ffc4d1; }
html[data-theme="dark"] .zf .zf-issue-error, html[data-theme="dark"] .zf .zf-sim-error { color: #ff9bad; }
html[data-theme="dark"] .zf .zf-issue-warning { color: #f4c373; }
html[data-theme="dark"] .zf .zf-sim-stale { background: #392f21; color: #f4c373; }
@media (max-width: 900px) {
  .zf-status-stack .zf-save-state, .zf-publication-state { font-size: 9px; }
  .zf-editor-actions button[data-action="publish"] { max-width: 145px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 600px) {
  .zf-status-stack { flex: none; }
  .zf-status-stack .zf-save-state { max-width: 130px; }
  .zf-add-picker { left: 60px; top: 12px; width: calc(100vw - 76px); max-height: calc(100% - 68px); }
  .zf-create-dialog { padding: 20px; }
  .zf-create-footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .zf *, .zf *::before, .zf *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Zenith refinements: one semantic palette, readable configuration drawers. */
.zf{color-scheme:var(--scheme);--zf-red:var(--color-danger-text);}
.zf button.zf-primary,.zf .zf-type-start>.zf-node-select{background:var(--primary);border-color:var(--primary);color:var(--on-primary);}
.zf button.zf-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);}
.zf .zf-type-start{background:var(--primary);border-color:var(--color-brand-border);}
.zf .zf-type-start .zf-node-label,.zf .zf-type-start .zf-start-caption{color:var(--on-primary);}
.zf .zf-type-icon,.zf .zf-node-header .zf-type-icon{color:var(--color-link);background:var(--primary-soft);}
.zf .zf-inspector{width:360px;max-width:calc(100vw - 32px);}
.zf .zf-inspector-title{position:sticky;top:0;padding:20px 22px;min-height:82px;gap:12px;}
.zf .zf-inspector-title h2{line-height:1.45;margin-top:5px;}
.zf .zf-inspector-fields{padding:24px 22px 40px;}
.zf .zf-field{gap:8px;margin-bottom:24px!important;}
.zf .zf-field>span{font-weight:500;line-height:1.6;}
.zf .zf-field small,.zf .zf-block-intro{line-height:1.75;font-size:12px;color:var(--muted);}
.zf .zf-block-intro{margin-bottom:24px;}
.zf .zf-inspector-divider{margin:26px 0;}
.zf .zf-output-setting{padding:16px 0;border-bottom:1px solid var(--line);}
.zf .zf-settings-link{gap:10px;width:100%;padding:12px;}
.zf .zf-create-options{display:grid;gap:12px;}
.zf .zf-create-option{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:16px;text-align:left;padding:18px;}
.zf .zf-create-option>span:first-child{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:var(--primary-soft);color:var(--color-link);}
.zf .zf-create-option strong,.zf .zf-create-option small{display:block;line-height:1.65;}
.zf .zf-create-option strong{font-weight:600;margin-bottom:5px;}
.zf .zf-create-dialog{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px;}
.zf .zf-create-dialog>p{line-height:1.8;margin:16px 0 24px;color:var(--muted);}
.zf .zf-template>span{color:var(--color-link);background:var(--primary-soft);}
.zf .zf-template strong{line-height:1.6;}
.zf .zf-edge{stroke:var(--color-edge);stroke-width:2;stroke-dasharray:none;opacity:.85;pointer-events:none;}
.zf .zf-edge.is-selected,.zf .zf-edge-preview{stroke:var(--primary);stroke-width:3;opacity:1;}
.zf .zf-edge-preview{stroke-dasharray:7 5;}
.zf .zf-edge-hit{fill:none;stroke:transparent;stroke-width:18;pointer-events:stroke;cursor:pointer;}
.zf .zf-edge-hit:focus{outline:none;stroke:var(--color-focus-ring);}
.zf-edge-tools{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;z-index:5;box-shadow:var(--shadow-popover);font-size:12px;}
.zf .zf-port-dynamic{right:-7px;left:auto;transform:translateY(-50%);}
.zf .zf-port-dynamic>span{position:absolute;right:18px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 7px;pointer-events:none;line-height:1.4;font-size:10px;}
.zf .zf-insert-dynamic{right:-46px;left:auto;}
.zf .zf-routes{display:grid;gap:18px;margin:20px 0;}
.zf .zf-route{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--background);}
.zf .zf-route-heading{display:flex;gap:8px;align-items:center;margin-bottom:20px;}
.zf .zf-route-heading>input{font-weight:500;}
.zf .zf-rule{display:grid;gap:10px;padding:12px 0 18px;margin-bottom:12px;border-bottom:1px solid var(--line);}
.zf .zf-rule>button{font-size:11px;justify-self:start;color:var(--danger);}
.zf .zf-trigger-settings summary{font-size:12px;padding:12px 0;margin-bottom:14px;}
@media(max-width:1100px){.zf-bot-settings-button span{display:none;}.zf .zf-flow-name{width:190px;}.zf-editor-head{gap:12px;}.zf-editor-actions{gap:6px;}}
@media(max-width:700px){.zf-editor-head{height:auto;min-height:110px;flex-wrap:wrap;padding:10px 12px;gap:10px;}.zf-editor-identity{flex-basis:100%;}.zf-editor-actions{width:100%;justify-content:flex-end;}.zf .zf-inspector{width:min(360px,calc(100vw - 68px));}.zf .zf-create-option{gap:14px;padding:16px;}.zf .zf-inspector-fields{padding:20px 18px 32px;}}
.zf .zf-create-options .zf-template{grid-template-columns:42px minmax(0,1fr);gap:6px 18px;padding:18px;text-align:left;}
.zf .zf-create-options .zf-template>span{width:42px;height:42px;grid-column:1;grid-row:1/3;align-self:center;}
.zf .zf-create-options .zf-template>strong{grid-column:2;font-size:14px;line-height:1.6;}
.zf .zf-create-options .zf-template>small{grid-column:2;font-size:12px;line-height:1.7;}
.zf.has-drawer .zf-canvas-toolbar{right:382px;}
.zf.has-drawer .zf-canvas-bottom{right:382px;}
html[data-theme] .zf .zf-type-icon,html[data-theme] .zf .zf-node-header .zf-type-icon{background:var(--primary-soft);color:var(--color-link);}
@media(max-width:700px){.zf.has-drawer .zf-canvas-toolbar{right:calc(min(360px,100vw - 68px) + 12px);}.zf.has-drawer .zf-canvas-bottom{right:12px;bottom:10px;}.zf.has-drawer .zf-canvas-help{display:none;}.zf.has-drawer .zf-zoom{display:none;}}
.zf .zf-type-review{border-color:var(--color-warning);}
.zf .zf-type-review .zf-node-header,.zf .zf-review-notice{background:var(--color-warning-soft);color:var(--color-warning-text);}
.zf .zf-review-notice{border:1px solid var(--color-warning-border);border-radius:10px;padding:16px;margin:20px 0;line-height:1.75;}
.zf .zf-review-notice strong{display:block;margin-bottom:10px;font-weight:600;}
/* Fast authoring: actions stay on the selected block, details stay optional. */
.zf .zf-node-tools{position:absolute;left:0;top:-46px;display:flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-sm);z-index:6;white-space:nowrap;}
.zf .zf-node-tools button{width:32px;height:30px;min-height:30px;padding:5px;border:0;background:transparent;color:var(--muted);}
.zf .zf-node-tools button:hover{background:var(--primary-soft);color:var(--color-link);}
.zf .zf-node-tools button[data-action="delete-node"]:hover{background:var(--color-danger-soft);color:var(--danger);}
.zf .zf-advanced{margin:18px 0;padding:0 0 8px;border-top:1px solid var(--line);}
.zf .zf-advanced>summary{font-size:12px;line-height:1.7;padding:16px 0;color:var(--muted);}
.zf .zf-upload-button{width:100%;justify-content:center;gap:12px;padding:18px;border:1px dashed var(--color-brand-border);background:var(--primary-soft);color:var(--color-link);border-radius:12px;}
.zf .zf-file-card{display:flex;align-items:center;gap:12px;padding:16px;background:var(--background);border:1px solid var(--line);border-radius:12px;margin:14px 0;}
.zf .zf-file-card>div{min-width:0;}
.zf .zf-file-card strong{display:block;overflow-wrap:anywhere;font-size:12px;line-height:1.6;font-weight:500;}
.zf .zf-file-card small{display:block;margin-top:5px;line-height:1.6;}
.zf .zf-media-preview{margin:14px 0 24px;color:var(--muted);font-size:12px;}
.zf .zf-media-preview img,.zf .zf-media-preview video{display:block;max-width:100%;max-height:230px;border-radius:10px;}
.zf .zf-media-preview audio{display:block;width:100%;}
.zf .zf-media-preview iframe{display:block;width:100%;height:300px;border:1px solid var(--line);border-radius:10px;background:white;}
.zf .zf-ai-routes{display:grid;gap:16px;margin:18px 0;}
.zf .zf-ai-routes textarea{min-height:88px;}
.zf .zf-sim-choice{display:grid;gap:10px;padding:18px 0;}
.zf .zf-sim-choice strong{font-size:12px;font-weight:500;}
.zf .zf-sim-choice button{font-size:12px;justify-content:flex-start;line-height:1.6;}
.zf .zf-sim-context summary{padding:10px 0;font-size:12px;}
.zf .zf-sim-context{margin-bottom:16px;}
.zf .zf-directory-actions{display:flex;align-items:center;gap:12px;}
.zf .zf-share-dialog{width:min(540px,calc(100vw - 32px));padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-popover);}
.zf .zf-share-dialog p{font-size:13px;line-height:1.8;margin:18px 0;color:var(--muted);}
.zf .zf-share-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
@media(max-height:800px){.zf-library-items{max-height:calc(100dvh - 250px);overflow:auto;scrollbar-width:thin;}}
@media(max-width:700px){.zf .zf-directory-actions{width:100%;}.zf .zf-directory-actions button{flex:1;}.zf-list-head{flex-wrap:wrap;}}
.zf .zf-first-contact-help{padding:18px;background:var(--primary-soft);border:1px solid var(--color-brand-border);border-radius:12px;line-height:1.8;margin-bottom:22px;}
.zf .zf-first-contact-help strong{display:block;font-weight:500;margin-bottom:10px;}
.zf .zf-first-contact-help p{font-size:12px;margin:0;color:var(--muted);}
/* Node anatomy: fixed titles and a preview specific to the action. */
.zf{--node-message:var(--color-brand-primary);--node-media:#0e7490;--node-decision:#a16207;--node-time:#0f766e;--node-ai:#7e22ce;--node-tag:#be185d;--node-end:var(--muted);}
html[data-theme="dark"] .zf{--node-media:#67cfe1;--node-decision:#f4c16c;--node-time:#6ed6c5;--node-ai:#d1a4fa;--node-tag:#f5a0c8;}
.zf .zf-node{--node-accent:var(--node-message);border-radius:14px;box-shadow:0 3px 12px #0b12200b;border-color:var(--line);}
.zf .zf-node.is-selected{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent),0 6px 20px #0b122013;}
.zf .zf-node .zf-node-select{border-radius:13px;}
.zf .zf-node .zf-node-header{background:transparent;border-bottom:0;padding:13px 15px;min-height:58px;gap:10px;}
html[data-theme] .zf .zf-node .zf-node-header .zf-type-icon{background:color-mix(in srgb,var(--node-accent) 11%,var(--surface));color:var(--node-accent);border-radius:9px;width:32px;height:32px;}
.zf .zf-node .zf-node-label{color:var(--text);font-size:14px;font-weight:600;line-height:1.5;}
.zf .zf-node .zf-node-type,.zf .zf-node .zf-node-menu{display:none;}
.zf .zf-node .zf-node-summary{padding:6px 16px 16px;font-size:13px;line-height:1.65;color:var(--muted);}
.zf .zf-type-media{--node-accent:var(--node-media);border-style:dashed;}
.zf .zf-type-decision,.zf .zf-type-condition{--node-accent:var(--node-decision);border-top:3px solid var(--node-accent);}
.zf .zf-type-ai_router,.zf .zf-type-ai{--node-accent:var(--node-ai);border-top:3px solid var(--node-accent);}
.zf .zf-type-delay,.zf .zf-type-wait_message{--node-accent:var(--node-time);}
.zf .zf-type-tag{--node-accent:var(--node-tag);}
.zf .zf-node-context{display:block;padding:0 15px;color:var(--muted);font-size:10px;line-height:1.5;}
.zf .zf-route-preview{position:absolute;right:14px;left:15px;display:flex;align-items:center;justify-content:space-between;gap:8px;height:24px;padding:3px 8px;border-radius:6px;color:var(--node-accent);background:color-mix(in srgb,var(--node-accent) 9%,var(--surface));font-size:10px;line-height:1.6;}
.zf .zf-route-preview>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zf .zf-route-preview .zf-icon{width:12px;height:12px;transform:rotate(180deg);flex:none;}
.zf .zf-type-decision .zf-port-dynamic>span,.zf .zf-type-ai_router .zf-port-dynamic>span{display:none;}
.zf .zf-message-preview{margin:0 15px 12px;padding:12px 14px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;white-space:pre-line;overflow-wrap:anywhere;text-align:left;font-size:13px;line-height:1.7;background:var(--primary-soft);color:var(--text);border-radius:3px 12px 12px 12px;max-height:108px;}
.zf .zf-type-question .zf-message-preview{border-left:3px solid var(--node-accent);border-radius:4px 10px 10px 4px;-webkit-line-clamp:3;max-height:88px;}
.zf .zf-node-footer{display:block;margin:0 16px;color:var(--muted);font-size:10px;}
.zf .zf-attachment-preview{display:flex;align-items:center;gap:10px;margin:0 15px;padding:11px;background:var(--background);border:1px solid var(--line);border-radius:9px;max-width:calc(100% - 30px);}
.zf .zf-attachment-kind{display:grid;place-items:center;flex:none;width:30px;height:34px;color:var(--node-accent);}
.zf .zf-attachment-preview>span:last-child{min-width:0;}
.zf .zf-attachment-preview strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;color:var(--text);font-size:11px;line-height:1.6;font-weight:500;}
.zf .zf-attachment-preview small{display:block;margin-top:4px;color:var(--muted);font-size:10px;}
.zf .zf-waveform{display:flex;align-items:center;justify-content:center;gap:4px;height:35px;width:100%;padding:5px 18px;opacity:.65;}
.zf .zf-waveform i{display:block;width:3px;border-radius:2px;background:var(--node-accent);max-height:24px;}
.zf .zf-duration{display:flex;align-items:baseline;gap:8px;margin:0 16px;color:var(--node-accent);}
.zf .zf-duration strong{font-size:32px;line-height:1.2;font-weight:600;letter-spacing:-1px;}
.zf .zf-duration>span{font-size:12px;color:var(--muted);}
.zf .zf-wait-outcomes{margin:12px 16px 0;display:block;font-size:10px;color:var(--node-accent);}
.zf .zf-wait-outcomes>span{margin-left:8px;color:var(--muted);}
.zf .zf-tag-preview{display:flex;gap:7px;flex-wrap:wrap;margin:0 16px;padding:0 0 14px;max-height:98px;overflow:hidden;}
.zf .zf-tag-preview>span{font-size:11px;line-height:1.5;padding:5px 9px;border-radius:6px;background:color-mix(in srgb,var(--node-accent) 10%,var(--surface));color:var(--node-accent);overflow-wrap:anywhere;}
.zf .zf-tag-preview>span.is-removal{background:var(--background);color:var(--muted);text-decoration:line-through;}
.zf .zf-node:is(.zf-type-end,.zf-type-resolve,.zf-type-transfer,.zf-type-handoff){--node-accent:var(--node-end);border-radius:36px;border-color:color-mix(in srgb,var(--muted) 30%,var(--line));}
.zf .zf-node:is(.zf-type-end,.zf-type-resolve,.zf-type-transfer,.zf-type-handoff) .zf-node-select{align-items:center;justify-content:center;border-radius:35px;gap:7px;padding:15px 22px;text-align:center;}
.zf .zf-end-emblem{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--background);color:var(--muted);}
.zf .zf-end-emblem .zf-icon{width:18px;height:18px;}
.zf .zf-end-caption{font-size:11px;line-height:1.5;color:var(--muted);}
.zf .zf-type-start.zf-node{border-radius:50%;background:var(--primary);border-color:var(--color-brand-border);}
.zf .zf-type-start .zf-node-select{border-radius:50%;}
.zf .zf-type-start .zf-node-label{color:var(--on-primary);font-size:16px;}
.zf .zf-node.is-selected .zf-type-icon{transition:background 160ms;}
@media(prefers-reduced-motion:reduce){.zf .zf-node *{transition:none!important;}}
/* Clear category colors support shape and content, never replace them. */
.zf{--node-menu:#c2410c;--node-ink:#fff;}
html[data-theme="dark"] .zf{--node-menu:#fdad86;--node-message:#aaaaff;--node-ink:#0b1220;}
.zf .zf-type-menu{--node-accent:var(--node-menu);border-top:3px solid var(--node-accent);}
html[data-theme] .zf .zf-node:not(.zf-type-start) .zf-node-header{background:var(--node-accent);border-radius:11px 11px 0 0;min-height:58px;}
html[data-theme] .zf .zf-node:not(.zf-type-start) .zf-node-header .zf-node-label{color:var(--node-ink);}
html[data-theme] .zf .zf-node .zf-node-header .zf-type-icon{background:#ffffff20;color:var(--node-ink);}
.zf .zf-node-context{padding-top:7px;font-size:10px;}
.zf .zf-route-preview{margin-top:4px;}
.zf .zf-type-menu .zf-port-dynamic>span{display:none;}
.zf .zf-message-preview,.zf .zf-attachment-preview,.zf .zf-duration,.zf .zf-tag-preview{margin-top:12px;}
.zf .zf-node.zf-type-message{height:auto;min-height:190px;}
.zf .zf-picker-label{display:block;margin:24px 0 9px;font-size:12px;font-weight:500;}
.zf .zf-tag-picker{border:1px solid var(--line);border-radius:10px;margin-bottom:18px;background:var(--surface);}
.zf .zf-tag-picker>summary{padding:13px 14px;font-size:13px;color:var(--text);line-height:1.7;overflow-wrap:anywhere;}
.zf .zf-tag-picker input[type="search"]{margin:0 12px 12px;width:calc(100% - 24px);font-size:12px;}
.zf .zf-tag-options{max-height:240px;overflow:auto;padding:0 8px 8px;}
.zf .zf-tag-options>label{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:7px;font-size:12px;line-height:1.6;cursor:pointer;}
.zf .zf-tag-options>label:hover{background:var(--primary-soft);}
.zf .zf-tag-options>label[hidden]{display:none;}
.zf .zf-tag-options input[type="checkbox"]{width:16px;height:16px;min-height:16px;flex:none;accent-color:var(--primary);}
.zf .zf-tag-color{display:block;width:9px;height:9px;border-radius:50%;flex:none;}
.zf .zf-tag-options>p{font-size:12px;line-height:1.8;padding:8px;color:var(--muted);}
.zf .zf-catalog-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:10px 0 24px;font-size:11px;}
.zf .zf-catalog-actions button{font-size:11px;padding:7px 10px;}
.zf .zf-catalog-actions a{color:var(--color-link);}
.zf .zf-duration-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.zf .zf-menu-options{display:grid;gap:18px;margin:18px 0;}
.zf .zf-menu-option{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--background);}
.zf .zf-menu-option>div{display:flex;gap:12px;align-items:start;}
.zf .zf-menu-option>div>.zf-field{flex:1;min-width:0;}
.zf .zf-menu-option>div>button{margin-top:26px;min-height:36px;padding:8px;color:var(--danger);}
.zf .zf-menu-option .zf-field{margin-bottom:12px;}

.zf .zf-type-webhook{--node-accent:#475569}.zf .zf-type-meta_conversion{--node-accent:#0866ff}.zf .zf-type-note{--node-accent:#a16207}.zf .zf-type-task{--node-accent:#15803d}
html[data-theme="dark"] .zf .zf-type-webhook{--node-accent:#a4b6cf}html[data-theme="dark"] .zf .zf-type-note{--node-accent:#f4c16c}html[data-theme="dark"] .zf .zf-type-task{--node-accent:#86d4a4}

.zf-entry-control{display:flex;align-items:center;gap:10px;flex-shrink:0}.zf-entry-control>button{position:relative;display:block;width:42px;height:24px;min-height:24px;padding:2px;border-radius:20px;border:1px solid var(--line);background:var(--muted);cursor:pointer;transition:background .16s}.zf-entry-control>button>span{display:block;width:18px;height:18px;border-radius:50%;background:white;box-shadow:0 1px 3px #0002;transform:translateX(0);transition:transform .16s}.zf-entry-control>button[aria-checked="true"]{background:var(--primary);border-color:var(--primary)}.zf-entry-control>button[aria-checked="true"]>span{transform:translateX(17px)}.zf-entry-control>button:disabled{opacity:.45;cursor:not-allowed}.zf-entry-control small{font-size:11px;color:var(--muted);max-width:100px;line-height:1.45}.zf-editor-reception{padding:0 12px;border-right:1px solid var(--line)}.zf-reception-help{font-size:13px;color:var(--muted);line-height:1.7;max-width:850px;margin-bottom:24px}.zf-record{gap:18px}.zf-record-body{min-width:0}.zf-entry-control>button:focus-visible{outline:3px solid var(--primary);outline-offset:3px}@media(max-width:900px){.zf-record{flex-wrap:wrap}.zf-record-body{flex-basis:60%}.zf-editor-reception{padding:0}.zf-editor-reception small{display:none}}
/* A compact directory; its metadata is independent from executable flows. */
.zf.zfd{max-width:none;margin:0}.zfd .zf-list-head{gap:20px;margin-bottom:18px}.zfd .zf-list-head h1{margin:0 0 8px;font-size:30px;letter-spacing:-.8px}.zfd .zf-list-head p{font-size:13px;line-height:1.6}.zfd-summary{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:0 0 24px}.zfd-summary strong{color:var(--text);font-weight:600}.zfd-summary i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--primary);margin-right:6px}.zfd-summary>details{margin-left:auto;position:relative}.zfd-summary summary{cursor:pointer}.zfd-summary details p{position:absolute;right:0;top:20px;width:min(340px,70vw);padding:16px;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-popover);line-height:1.8;z-index:10;color:var(--text)}
.zfd-layout{display:grid;grid-template-columns:205px minmax(0,1fr);gap:24px;align-items:start}.zfd-folders{position:sticky;top:0;max-height:calc(100dvh - 160px);overflow:auto;padding:10px;border:1px solid var(--line);background:var(--surface);border-radius:12px;scrollbar-width:thin}.zfd-folders>button{width:100%;display:flex;align-items:center;gap:9px;border:0;background:transparent;padding:10px 9px;margin:2px 0;text-align:left;color:var(--muted);font-size:12px;border-radius:8px;min-height:40px}.zfd-folders>button>span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zfd-folders>button:hover{background:var(--background);color:var(--text)}.zfd-folders>button.selected{background:var(--primary-soft);color:var(--primary);font-weight:500}.zfd-folders small{font-size:10px;min-width:20px;text-align:center;color:var(--muted)}.zfd-folder-icon{display:grid;place-items:center;flex:none}.zfd svg{width:17px;height:17px;display:block}.zfd-folder-heading{display:flex;align-items:center;justify-content:space-between;margin:22px 9px 8px;gap:8px}.zfd-folder-heading>span{font-size:10px;letter-spacing:1px;color:var(--muted);font-weight:500}.zfd-folder-heading button{width:27px;height:27px;padding:0;background:transparent;border:1px solid var(--line);font-size:19px;color:var(--primary)}.zfd-folder-help{font-size:11px;color:var(--muted);line-height:1.8;padding:0 10px 10px;margin:0}.zfd-main{min-width:0}.zfd-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:1px 0 16px}.zfd-heading h2{font-size:18px;margin:0;font-weight:600;letter-spacing:-.3px}.zfd-heading .zf-link-button{font-size:11px;border:0;background:transparent;color:var(--muted);padding:4px}.zfd-tools{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;background:var(--background);padding:6px 0}.zfd-tools label{margin:0;display:block;min-width:0}.zfd-tools input,.zfd-tools select{width:100%;height:39px;min-height:39px;font-size:12px;padding:8px 11px}.zfd-search{flex:1;min-width:120px}.zfd-tools select{max-width:190px}.zfd-view{display:flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:8px}.zfd-view button{padding:6px;background:transparent;border:0;border-radius:5px;color:var(--muted)}.zfd-view button[aria-pressed=true]{background:var(--primary-soft);color:var(--primary)}.zfd-order-help{font-size:11px;line-height:1.7;color:var(--muted);margin:8px 0 14px}.zfd .zf-records{gap:8px}.zfd .zfd-record{padding:10px 12px;gap:10px;min-height:76px;border-radius:10px;position:relative;flex-wrap:nowrap;border-left:3px solid var(--folder-color,var(--line));transition:box-shadow .16s,border-color .16s}.zfd .zfd-record:hover{box-shadow:0 2px 10px #0b122008}.zfd-order{display:flex;flex-direction:column;gap:2px;flex:none}.zfd-order button{padding:0;border:0;background:transparent;color:var(--muted);width:22px;height:22px;display:grid;place-items:center;border-radius:4px}.zfd-order button:hover:enabled{color:var(--primary);background:var(--primary-soft)}.zfd-order button:disabled{opacity:.25;cursor:not-allowed}.zfd .zfd-star{display:grid;place-items:center;flex:none;padding:5px;border:0;background:transparent;color:var(--muted);width:30px;height:30px}.zfd-star.is-favorite{color:var(--primary)}.zfd-star.is-favorite svg{fill:var(--primary-soft)}.zfd .zf-record-body{min-width:0;flex:1}.zfd .zf-record-name{display:block;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.6}.zfd .zf-record-body p{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden;white-space:nowrap;font-size:10px;line-height:1.6;margin-top:5px}.zfd .zf-record-body p>span{flex:none}.zfd-folder-chip{display:flex;align-items:center;gap:4px;color:var(--folder-color,var(--muted));max-width:180px;overflow:hidden;text-overflow:ellipsis}.zfd-folder-chip svg{width:12px;height:12px;flex:none}.zfd .zf-badge{font-size:10px;padding:5px 8px}.zfd .zf-entry-control{gap:8px}.zfd .zf-entry-control small{font-size:10px;width:60px;line-height:1.4}.zfd-row-menu{position:relative;flex:none}.zfd-row-menu>summary{display:grid;place-items:center;cursor:pointer;list-style:none;width:30px;height:32px;border-radius:6px;color:var(--muted)}.zfd-row-menu>summary::-webkit-details-marker{display:none}.zfd-row-menu[open]>summary,.zfd-row-menu>summary:hover{color:var(--primary);background:var(--primary-soft)}.zfd-row-menu>div{position:absolute;z-index:15;right:0;top:35px;width:160px;background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow-popover);padding:5px;display:grid;gap:2px}.zfd-row-menu>div button{border:0;text-align:left;background:transparent;font-size:11px;padding:9px 10px;border-radius:5px;color:var(--text)}.zfd-row-menu>div button:hover{background:var(--background)}.zfd-row-menu>div button.zf-danger{color:var(--danger)}.zfd-pagination{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:19px 2px;font-size:11px;color:var(--muted)}.zfd-pagination>span{margin-right:auto}.zfd-pagination label{display:flex;align-items:center;gap:7px;margin:0}.zfd-pagination select{width:66px;height:32px;padding:4px 8px;font-size:11px}.zfd-pagination>div{display:flex;align-items:center;gap:10px}.zfd-pagination button{width:30px;height:30px;padding:0;font-size:14px;color:var(--muted)}.zf-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.zfd .zf-records[data-view=grid]{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.zfd .zf-records[data-view=grid] .zfd-record{display:grid;grid-template-columns:24px 1fr auto auto;gap:12px;align-items:center;padding:16px;min-height:174px;border-left:1px solid var(--line);border-top:3px solid var(--folder-color,var(--primary))}.zfd .zf-records[data-view=grid] .zfd-order{grid-column:1;grid-row:1}.zfd .zf-records[data-view=grid] .zfd-star{grid-column:3;grid-row:1}.zfd .zf-records[data-view=grid] .zfd-row-menu{grid-column:4;grid-row:1}.zfd .zf-records[data-view=grid] .zf-record-body{grid-column:1/-1;grid-row:2}.zfd .zf-records[data-view=grid] .zf-record-name{font-size:13px;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.zfd .zf-records[data-view=grid] .zf-badge{grid-column:1/3;grid-row:3;justify-self:start}.zfd .zf-records[data-view=grid] .zf-entry-control{grid-column:3/5;grid-row:3}
.zfd-dialog{width:min(460px,calc(100vw - 32px));border:1px solid var(--line);border-radius:14px;padding:26px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-popover)}.zfd-dialog::backdrop{background:#0b122080;backdrop-filter:blur(3px)}.zfd-dialog h2{font-size:21px;font-weight:600;letter-spacing:-.5px;margin:0 0 10px}.zfd-dialog p{font-size:12px;line-height:1.7;color:var(--muted)}.zfd-dialog label{display:grid;gap:8px;font-size:12px;font-weight:500;margin-top:22px}.zfd-dialog input,.zfd-dialog select{width:100%;height:42px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:8px 11px;font:inherit}.zfd-dialog input[type=color]{width:80px;height:38px;padding:4px;cursor:pointer}.zfd-dialog-actions{display:flex;gap:9px;justify-content:flex-end;align-items:center;margin-top:26px;flex-wrap:wrap}.zfd-dialog-actions button{padding:9px 12px;font-size:12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer}.zfd-dialog-actions .zf-primary{background:var(--primary);border-color:var(--primary);color:white}.zfd-dialog-actions .zf-danger{color:var(--danger);margin-right:auto}.zfd-dialog .zfd-error{color:var(--danger)}.zfd :is(button,summary):focus-visible{outline:2px solid var(--primary);outline-offset:3px}
@media(max-width:1150px){.zfd-layout{grid-template-columns:180px minmax(0,1fr);gap:16px}.zfd .zf-entry-control small{display:none}.zfd-tools{flex-wrap:wrap}.zfd-search{flex-basis:100%}.zfd .zf-record-name{font-size:12px}.zfd .zf-records[data-view=grid]{grid-template-columns:repeat(auto-fill,minmax(245px,1fr))}}
@media(max-width:750px){.zfd-layout{grid-template-columns:1fr}.zfd-folders{position:static;display:flex;gap:5px;overflow:auto;max-height:none;flex-wrap:nowrap;align-items:center;padding:7px}.zfd-folders>button{width:auto;flex:none;margin:0;white-space:nowrap}.zfd-folders>button>span:nth-child(2){max-width:160px}.zfd-folder-heading{margin:0 6px}.zfd-folder-heading>span,.zfd-folder-help{display:none}.zfd .zf-list-head h1{font-size:25px}.zfd-summary{gap:12px;font-size:11px;margin-bottom:18px}.zfd-summary>details{margin-left:0}.zfd .zfd-record{padding:10px 8px;gap:6px}.zfd .zf-badge{font-size:9px;padding:4px 6px}.zfd .zfd-star{width:25px}.zfd .zf-entry-control>button{width:36px;height:22px}.zfd .zf-entry-control>button>span{width:16px;height:16px}.zfd .zf-entry-control>button[aria-checked=true]>span{transform:translateX(15px)}.zfd-pagination{gap:10px}.zfd-pagination>div{width:100%;justify-content:space-between}}

/* Use the semantic link color for readable accents in both themes. */
.zfd-folders>button.selected,.zfd-view button[aria-pressed=true],.zfd .zfd-star.is-favorite,.zfd-folder-heading button,.zfd-order button:hover:enabled{color:var(--color-link)}
.zfd .zf-record-name{font-size:13px}.zfd .zf-record-body p{font-size:11px}.zfd .zf-badge{font-size:11px}.zfd-order button{width:24px;height:24px}.zfd .zf-records[data-view=grid] .zf-record-name{font-size:14px}.zfd-folder-chip{color:var(--muted)}.zfd-folder-chip svg{color:var(--folder-color,var(--muted))}