/* Standalone designer and shell share the same restrained type and surface scale. */
.opti247-wf-designer {
  --wf-bg:var(--bg,#0b1020); --wf-surface:var(--surface,#141c30);
  --wf-ink:var(--ink,#e6ecf7); --wf-ink-soft:var(--ink-soft,#adb9d0);
  --wf-accent:var(--accent-text,#b4a3ff); --wf-accent-soft:var(--accent-soft,rgba(124,92,255,.14));
  --wf-line:var(--line-subtle,#26314a); --wf-danger:var(--danger,#ff8296);
  color:var(--wf-ink); background:var(--wf-surface);
  font:14px/1.55 var(--font,system-ui,sans-serif);
  border:1px solid var(--wf-line); border-radius:16px; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) 272px;
  grid-template-rows:auto minmax(360px,auto) auto auto;
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}
.opti247-wf-designer *, .opti247-wf-designer *::before {box-sizing:border-box}
.opti247-wf-designer button,.opti247-wf-designer input,.opti247-wf-designer select {
  font:inherit; min-height:38px; margin:0; width:auto; max-width:100%;
  border:1px solid var(--wf-line); border-radius:9px;
  padding:8px 12px; background:var(--wf-bg); color:var(--wf-ink); box-shadow:none;
}
.opti247-wf-designer button {cursor:pointer; font-weight:600; display:inline-flex; align-items:center; justify-content:center}
.opti247-wf-designer button:hover {background:var(--wf-accent-soft); border-color:var(--wf-accent); filter:none}
.opti247-wf-designer button:disabled {opacity:.5; cursor:not-allowed}
.opti247-wf-designer button:focus-visible,.opti247-wf-designer input:focus-visible,.opti247-wf-designer select:focus-visible,.opti247-wf-designer summary:focus-visible,.opti247-wf-designer__node:focus-visible {outline:2px solid var(--wf-accent); outline-offset:3px}
.opti247-wf-designer button.opti247-wf-designer__primary {background:#7357e6; color:#fff; border-color:transparent}
.opti247-wf-designer__toolbar {grid-column:1/-1; display:flex; flex-direction:column; gap:12px; padding:20px; border-bottom:1px solid var(--wf-line)}
.opti247-wf-designer__group {display:flex; flex-wrap:wrap; align-items:end; gap:8px; min-width:0}
.opti247-wf-designer__group-title {flex:0 0 100%; font-size:14px; color:var(--wf-ink-soft); font-weight:600}
.opti247-wf-designer__control {display:flex; flex-direction:column; gap:4px; margin:0; font-size:13px; font-weight:400; color:var(--wf-ink-soft)}
.opti247-wf-designer__control select {min-width:136px; appearance:auto}
.opti247-wf-designer__progress {flex:1 1 200px; align-self:center; margin:0 0 0 8px; font-size:13px; color:var(--wf-ink-soft)}
.opti247-wf-designer__advanced {font-size:13px; color:var(--wf-ink-soft)}
.opti247-wf-designer__advanced summary {cursor:pointer; width:fit-content}
.opti247-wf-designer__cycle {display:inline-flex; align-items:center; gap:8px; margin:12px 12px 0 0; font:inherit; white-space:nowrap}
.opti247-wf-designer__cycle input {width:16px; height:16px; min-height:0; padding:0; margin:0; accent-color:var(--wf-accent)}
.opti247-wf-designer__advanced input[type=number] {width:180px; margin-top:12px}
.opti247-wf-designer__inspector {grid-column:2; grid-row:2/4; min-width:0; padding:20px; border-left:1px solid var(--wf-line); background:var(--wf-surface)}
.opti247-wf-designer__inspector-title {font-size:15px; margin:0 0 12px; font-weight:600}
.opti247-wf-designer__inspector-summary {font-size:13px; margin:0 0 8px; color:var(--wf-accent)}
.opti247-wf-designer__inspector-empty {font-size:13px; margin:0 0 16px; color:var(--wf-ink-soft)}
.opti247-wf-designer__fields {display:grid; gap:12px}
.opti247-wf-designer__field {display:grid; gap:6px; margin:0; font-size:13px; font-weight:500; color:var(--wf-ink-soft)}
.opti247-wf-designer__field input {width:100%; min-width:0}
.opti247-wf-designer__remove {margin-top:12px!important; color:var(--wf-danger)!important; width:100%!important}
.opti247-wf-designer__field-error {color:var(--wf-danger); font-size:13px; margin:0}
.opti247-wf-designer__canvas {grid-column:1; grid-row:2; position:relative; min-width:0; overflow:auto; min-height:380px; max-height:560px; background:radial-gradient(circle,rgba(147,161,189,.16) 1px,transparent 1px) 0 0/20px 20px,var(--wf-bg)}
.opti247-wf-designer__lines {position:relative; display:block; color:var(--wf-accent); pointer-events:none; opacity:.7}
.opti247-wf-designer__node {position:absolute; z-index:1; width:208px; min-height:88px; padding:12px 16px; border:1px solid var(--wf-line); border-radius:12px; background:var(--wf-surface); box-shadow:0 4px 16px rgba(0,0,0,.12); cursor:grab; user-select:none; touch-action:none; overflow-wrap:anywhere}
.opti247-wf-designer__node-kind {display:block; font-size:12px; color:var(--wf-accent); font-weight:600}
.opti247-wf-designer__node-label {display:block; font-size:14px; font-weight:600; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.opti247-wf-designer__node-detail {display:block; font-size:12px; color:var(--wf-ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.opti247-wf-designer__node[data-selected=true] {border-color:var(--wf-accent); box-shadow:0 0 0 3px var(--wf-accent-soft)}
.opti247-wf-designer__node[data-error=true] {border-color:var(--wf-danger)}
.opti247-wf-designer__node[data-connect-from=true] {outline:2px dashed var(--wf-accent); outline-offset:4px}
.opti247-wf-designer__empty {position:absolute; z-index:1; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:24px}
.opti247-wf-designer__empty h3 {font-size:18px; margin:0 0 8px}
.opti247-wf-designer__empty p {max-width:340px; font-size:14px; color:var(--wf-ink-soft); margin:0 0 20px}
.opti247-wf-designer__edges {grid-column:1; grid-row:3; list-style:none; margin:0; padding:12px 20px; border-top:1px solid var(--wf-line); max-height:160px; overflow:auto; font-size:13px}
.opti247-wf-designer__edges li {display:flex; justify-content:space-between; align-items:center; gap:12px; padding:4px 0}
.opti247-wf-designer__edge-label {min-width:0; overflow-wrap:anywhere}
.opti247-wf-designer__no-edges {color:var(--wf-ink-soft)}
.opti247-wf-designer button.opti247-wf-designer__edge-remove {min-height:30px; width:30px; flex:0 0 30px; padding:0; font-size:18px}
.opti247-wf-designer__status {grid-column:1/-1; padding:12px 20px; border-top:1px solid var(--wf-line); background:var(--wf-accent-soft)}
.opti247-wf-designer__hint {margin:0; font-size:13px; color:var(--wf-ink)}
@media(max-width:1000px) {
  .opti247-wf-designer {grid-template-columns:minmax(0,1fr)}
  .opti247-wf-designer__inspector {grid-column:1; grid-row:4; border-left:0; border-top:1px solid var(--wf-line)}
  .opti247-wf-designer__fields {grid-template-columns:repeat(2,minmax(0,1fr))}
  .opti247-wf-designer__status {grid-row:5}
}
@media(max-width:480px) {
  .opti247-wf-designer__toolbar,.opti247-wf-designer__inspector {padding:16px}
  .opti247-wf-designer__control {flex:1 1 120px}
  .opti247-wf-designer__control select {width:100%; min-width:0}
  .opti247-wf-designer__fields {grid-template-columns:minmax(0,1fr)}
  .opti247-wf-designer__progress {flex-basis:100%; margin:4px 0 0}
}
.opti247-wf-designer__open-draft {font-size:13px; color:var(--wf-ink-soft)}
.opti247-wf-designer__open-draft summary {cursor:pointer; width:fit-content}
.opti247-wf-designer__open-draft p {margin:12px 0}
.opti247-wf-designer__open-form {display:flex; align-items:end; flex-wrap:wrap; gap:8px}
.opti247-wf-designer__open-form input {width:240px}
.opti247-wf-designer button,.opti247-wf-designer input,.opti247-wf-designer select {font-size:14px}
.opti247-wf-designer button.opti247-wf-designer__edge-remove {font-size:18px}
@media(max-width:480px) {
  .opti247-wf-designer button,.opti247-wf-designer input:not([type=checkbox]),.opti247-wf-designer select {min-height:44px}
  .opti247-wf-designer button.opti247-wf-designer__edge-remove {min-height:44px; width:44px; flex-basis:44px}
}