.workflow-studio {
  display: grid;
  grid-template-columns: 225px minmax(480px, 1fr) 285px;
  grid-template-rows: 58px minmax(0, 1fr);
  min-height: 880px;
  overflow: hidden;
  background: #eeecf2;
}
.studio-topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #ded9e3; background: white; padding: 0 15px; }
.studio-back { display: flex; height: 34px; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 10px; background: white; padding: 0 10px; color: var(--muted); font-size: 9px; }.studio-back .ui-icon { width: 14px; }
.studio-title { display: grid; flex: 1; gap: 1px; padding-left: 2px; }.studio-title p, .studio-title h1 { margin: 0; }.studio-title p { color: var(--muted); font-size: 7px; font-weight: 700; }.studio-title h1 { font-size: 13px; }
.studio-actions { display: flex; align-items: center; gap: 7px; }

.studio-palette { position: relative; z-index: 3; display: flex; min-height: 0; flex-direction: column; overflow-y: auto; border-right: 1px solid #ded9e3; background: white; padding: 15px 11px 11px; }
.palette-head p, .palette-head h2 { margin: 0; }.palette-head p { color: var(--brand); font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.palette-head h2 { margin-top: 3px; font-size: 13px; }
.palette-search { display: flex; align-items: center; gap: 6px; margin: 13px 0; border: 1px solid var(--border); border-radius: 9px; background: #faf9fb; padding: 8px; color: #9b95a1; font-size: 8px; }.palette-search .ui-icon { width: 13px; }
.palette-label { margin: 5px 7px 4px; color: #aaa4af; font-size: 6px; font-weight: 900; letter-spacing: .1em; }
.palette-item { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; background: transparent; padding: 7px; text-align: left; }.palette-item:hover, .palette-item.active { background: #f4f1f8; }.palette-item > span:nth-child(2) { display: grid; flex: 1; gap: 1px; }.palette-item b { font-size: 8px; }.palette-item small { color: var(--muted); font-size: 7px; }.palette-item > .ui-icon { width: 12px; color: #aaa3b0; }.palette-item .entity-mark { width: 29px; height: 29px; border-radius: 9px; font-size: 7px; }
.palette-action { display: flex; align-items: center; gap: 6px; border: 1px dashed #d9d3df; border-radius: 9px; background: #fcfbfd; padding: 8px; color: #645e6a; text-align: left; font-size: 7px; }.palette-action + .palette-action { margin-top: 5px; }.palette-action .ui-icon { width: 11px; color: var(--brand); }
.palette-foot { display: flex; align-items: center; gap: 5px; margin-top: auto; border-radius: 9px; background: var(--green-soft); padding: 8px; color: var(--green); font-size: 7px; font-weight: 700; }.palette-foot .ui-icon { width: 12px; }

.studio-canvas { position: relative; min-width: 0; min-height: 0; overflow: hidden; cursor: grab; background-color: #f4f2f6; background-image: radial-gradient(#cbc6d0 1px, transparent 1px); background-size: 19px 19px; touch-action: none; user-select: none; }
.studio-canvas.panning { cursor: grabbing; }
.canvas-context { position: absolute; z-index: 2; top: 14px; left: 16px; display: grid; gap: 2px; border: 1px solid rgba(214, 209, 219, .9); border-radius: 9px; background: rgba(255, 255, 255, .86); padding: 7px 9px; backdrop-filter: blur(10px); }.canvas-context span { color: #5a5460; font-size: 8px; font-weight: 800; }.canvas-context small { color: #938d98; font-size: 7px; }
.flow-graph { position: absolute; top: 45px; left: 20px; width: 1450px; height: 700px; transform-origin: 0 0; will-change: transform; }
.graph-edges { position: absolute; inset: 0; overflow: visible; pointer-events: none; }.graph-edges path { fill: none; stroke: #aaa3b1; stroke-width: 2; }.graph-edges text { fill: #8a8390; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.studio-node { position: absolute; z-index: 1; display: grid; width: 210px; min-height: 130px; align-content: start; gap: 7px; border: 1px solid #d8d1dd; border-radius: 17px; background: white; padding: 15px; text-align: left; box-shadow: 0 9px 24px rgba(52, 44, 64, .1); }.studio-node:hover { transform: translateY(-2px); box-shadow: 0 13px 30px rgba(52, 44, 64, .14); }.studio-node.selected { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(109, 91, 208, .13), 0 13px 30px rgba(52, 44, 64, .12); }
.studio-node-kind { width: fit-content; border-radius: 6px; padding: 3px 5px; font-size: 7px; font-weight: 900; letter-spacing: .08em; }.studio-node.purple .studio-node-kind { background: var(--brand-soft); color: var(--brand); }.studio-node.blue .studio-node-kind { background: var(--blue-soft); color: var(--blue); }.studio-node.green .studio-node-kind { background: var(--green-soft); color: var(--green); }.studio-node.orange .studio-node-kind { background: var(--orange-soft); color: var(--orange); }.studio-node.neutral .studio-node-kind { background: #f0eef2; color: #6e6971; }
.studio-node strong { font-size: 11px; line-height: 1.3; }.studio-node small { color: var(--muted); font-size: 8px; line-height: 1.4; }.studio-node em { position: absolute; top: 12px; right: 12px; border-radius: 999px; background: #f1eef4; padding: 3px 6px; color: #766f7d; font-size: 6px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.port { position: absolute; top: 50%; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: #aaa3b1; box-shadow: 0 0 0 1px #aaa3b1; transform: translateY(-50%); }.port.in { left: -5px; }.port.out { right: -5px; }
.canvas-controls { position: absolute; z-index: 4; bottom: 15px; left: 15px; display: flex; align-items: center; overflow: hidden; border: 1px solid #d7d1dc; border-radius: 11px; background: rgba(255, 255, 255, .94); box-shadow: 0 7px 22px rgba(47, 40, 57, .11); }.canvas-controls button, .canvas-controls strong { display: flex; height: 32px; align-items: center; justify-content: center; border: 0; border-right: 1px solid #e3dfe7; background: transparent; padding: 0 9px; font-size: 8px; }.canvas-controls button:last-child { gap: 4px; border: 0; }.canvas-controls strong { min-width: 42px; color: #645e69; font-size: 8px; }.canvas-controls .ui-icon { width: 12px; }
.canvas-minimap { position: absolute; z-index: 4; right: 14px; bottom: 14px; width: 105px; height: 64px; overflow: hidden; border: 1px solid #d7d1dc; border-radius: 10px; background: rgba(255, 255, 255, .92); box-shadow: 0 7px 20px rgba(47, 40, 57, .09); }.canvas-minimap::before, .canvas-minimap::after { position: absolute; width: 22px; height: 10px; border-radius: 3px; background: #c9c2d3; content: ''; }.canvas-minimap::before { top: 20px; left: 12px; box-shadow: 28px 0 #b5acc4, 56px 0 #b8cfc1; }.canvas-minimap::after { display: none; }.canvas-minimap i { position: absolute; inset: 12px 8px 17px; border: 1px solid var(--brand); border-radius: 5px; transform-origin: center; }.canvas-minimap span { position: absolute; right: 6px; bottom: 4px; color: #98919c; font-size: 6px; }

.studio-inspector { position: relative; z-index: 3; min-height: 0; overflow-y: auto; border-left: 1px solid #ded9e3; background: white; padding: 18px; }.inspector-head { padding-bottom: 16px; border-bottom: 1px solid var(--border); }.inspector-head p, .inspector-head h2, .inspector-head small { margin: 0; }.inspector-head p { color: var(--brand); font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.inspector-head h2 { margin: 5px 0; font-size: 14px; line-height: 1.3; }.inspector-head small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.inspector-section { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--border); }.inspector-section > span { color: #9d96a1; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.inspector-section > p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }.readable-config { display: grid; gap: 3px; border: 1px solid var(--border); border-radius: 10px; background: #faf9fb; padding: 9px; }.readable-config b { font-size: 8px; }.readable-config small { color: var(--muted); font-size: 7px; line-height: 1.4; }
.workflow-studio.complex .studio-canvas { background-color: #f3f1f5; }.workflow-studio.complex .graph-edges path { stroke: #9f98a7; }
.workflow-studio.complex .studio-node { width: 160px; min-height: 120px; }