:root{--ink: #0e1524;--sec: #5a6474;--faint: #8b95a6;--hair: #e4e8f0;--hair-strong: #cfd6e2;--panel: #f7f9fc;--canvas: #ffffff;--ai: #2b6bff;--ai-soft: #e8effe;--app: #2b6bff;--service: #0d9488;--data: #b45309;--infra: #475569;--ok: #16a34a;--danger: #b42318;--mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--panel);-webkit-font-smoothing:antialiased;overflow:hidden}.app{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr 320px;grid-template-areas:"top top" "stage rail";height:100%}.top{grid-area:top;display:flex;align-items:center;gap:14px;padding:12px 18px;background:#fff;border-bottom:1px solid var(--hair)}.brand{display:flex;align-items:baseline;gap:9px}.brand b{font-family:var(--mono);font-size:14px;letter-spacing:-.02em;font-weight:600}.brand span{font-family:var(--mono);font-size:11px;color:var(--faint);padding:2px 7px;border:1px solid var(--hair-strong);border-radius:5px}.top-tag{font-family:var(--mono);font-size:11px;color:var(--faint)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.tbtn{font-family:var(--mono);font-size:11px;color:var(--sec);cursor:pointer;background:#fff;border:1px solid var(--hair-strong);border-radius:6px;padding:5px 10px}.tbtn:hover:not(:disabled){border-color:var(--ai);color:var(--ai)}.tbtn:disabled{opacity:.4;cursor:default}.promote{display:none;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--ai);background:var(--ai-soft);border-radius:7px;padding:4px 6px 4px 10px}.promote.show{display:flex}.promote button{font-family:var(--mono);font-size:11px;font-weight:600;color:#fff;background:var(--ai);border:none;border-radius:5px;padding:4px 9px;cursor:pointer}.stage{grid-area:stage;position:relative;touch-action:none;background:radial-gradient(circle,#e9edf4 1.1px,transparent 1.2px) 0 0 / 24px 24px,var(--canvas);overflow:hidden}svg#scene{width:100%;height:100%;display:block}.node-box{fill:#fff;stroke-width:1.6;transition:filter .18s ease;cursor:grab}.node-g.dragging .node-box{cursor:grabbing}.label-name{font:600 14px var(--sans);fill:var(--ink);pointer-events:none}.label-tech{font:500 10.5px var(--mono);fill:var(--sec);pointer-events:none;text-transform:uppercase}.label-type{font:500 9px var(--mono);fill:var(--faint);letter-spacing:.08em;pointer-events:none}.node-chip{fill:currentColor;pointer-events:none}.port{fill:#fff;stroke:var(--ai);stroke-width:1.5;opacity:0;pointer-events:none;cursor:crosshair;transition:opacity .12s ease}.node-g:hover .port,.node-g.is-selected .port{opacity:1;pointer-events:all}.port:hover{fill:var(--ai)}.edge-line{fill:none;stroke:#a6b0c0;stroke-width:1.5;transition:opacity .18s ease}.edge-label{font:500 9.5px var(--mono);fill:var(--sec);pointer-events:none}.edge-label-bg{fill:#fff;pointer-events:none}.edge-deploy{stroke-dasharray:4 4;stroke:#c3ccda}.edge-visual{stroke:var(--ai);stroke-dasharray:2 3}.rubber{fill:none;stroke:var(--ai);stroke-width:1.8;stroke-dasharray:5 4;pointer-events:none}svg#scene.focused .node-g:not(.is-hot){opacity:.28}svg#scene.focused .edge:not(.is-hot){opacity:.16}svg#scene.focused .edge:not(.is-hot) .edge-label,svg#scene.focused .edge:not(.is-hot) .edge-label-bg{opacity:0}.node-g.is-hover .node-box{filter:drop-shadow(0 6px 14px rgba(20,40,90,.12))}.node-g.is-selected .node-box{stroke:var(--ai)!important;stroke-width:2.4;filter:drop-shadow(0 0 0 4px var(--ai-soft))}.node-g.connect-target .node-box{stroke:var(--ok)!important;stroke-width:2.6;filter:drop-shadow(0 0 0 4px rgba(22,163,74,.18))}@keyframes shimmer{0%{filter:drop-shadow(0 0 0 rgba(43,107,255,0))}35%{filter:drop-shadow(0 0 12px rgba(43,107,255,.55))}to{filter:drop-shadow(0 0 0 rgba(43,107,255,0))}}.node-g.is-patching .node-box{animation:shimmer 1s ease}.hint{position:absolute;pointer-events:none;z-index:5;font-family:var(--mono);font-size:10.5px;color:#fff;background:var(--ink);padding:4px 8px;border-radius:6px;transform:translate(-50%,-50%);opacity:0;transition:opacity .12s ease;white-space:nowrap}.hint.show{opacity:1}.popover{position:absolute;z-index:20;width:288px;background:#fff;border:1px solid var(--hair-strong);border-radius:12px;box-shadow:0 18px 40px -12px #12204247,0 2px 8px #1220420f;padding:12px;display:none}.popover.show{display:block}.pop-head{display:flex;align-items:center;gap:7px;margin-bottom:9px}.pop-head .k{width:9px;height:9px;border-radius:3px}.pop-head b{font-size:12.5px;font-weight:650}.pop-head em{font-family:var(--mono);font-style:normal;font-size:10px;color:var(--faint);margin-left:auto}.pop-scope{font-family:var(--mono);font-size:10px;color:var(--ai);background:var(--ai-soft);border-radius:5px;padding:3px 7px;display:inline-block;margin-bottom:9px}textarea.prompt{width:100%;resize:none;border:1px solid var(--hair-strong);border-radius:8px;font-family:var(--sans);font-size:13px;color:var(--ink);padding:9px 10px;line-height:1.4;outline:none;min-height:54px}textarea.prompt:focus{border-color:var(--ai);box-shadow:0 0 0 3px var(--ai-soft)}.chips{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}.chip{font-family:var(--mono);font-size:10px;color:var(--sec);cursor:pointer;border:1px solid var(--hair);border-radius:20px;padding:3px 9px;background:var(--panel)}.chip:hover{border-color:var(--ai);color:var(--ai)}.pop-actions{display:flex;align-items:center;gap:8px}.apply{flex:1;font-family:var(--sans);font-size:12.5px;font-weight:600;color:#fff;cursor:pointer;background:var(--ai);border:none;border-radius:8px;padding:9px}.apply:hover{background:#1c56ea}.apply:disabled{opacity:.5;cursor:default}.del{font-family:var(--mono);font-size:11px;color:var(--danger);background:#fff;border:1px solid #f1c7c2;border-radius:8px;padding:9px 10px;cursor:pointer}.del:hover{background:#fef2f1}.rail{grid-area:rail;background:#fff;border-left:1px solid var(--hair);padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}.empty-state{color:var(--sec);font-size:13px;line-height:1.6}.empty-state ul{margin:10px 0 0;padding-left:16px}.empty-state li{margin-bottom:7px}.empty-state b{color:var(--ink);font-weight:600}.kbd{font-family:var(--mono);font-size:10.5px;background:var(--panel);border:1px solid var(--hair-strong);border-bottom-width:2px;border-radius:4px;padding:1px 5px;color:var(--ink)}.legend{display:flex;flex-direction:column;gap:7px}.legend .row{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;color:var(--sec)}.legend .sw{width:11px;height:11px;border-radius:3px}.insp{display:none;flex-direction:column;gap:14px}.insp.show{display:flex}.insp .card{border:1px solid var(--hair);border-radius:10px;padding:12px}.insp .name{font-size:16px;font-weight:650;letter-spacing:-.01em}.insp .props{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin-top:10px}.insp .props dt{font-family:var(--mono);font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;align-self:center}.insp .props dd{margin:0;font-family:var(--mono);font-size:11.5px;color:var(--ink)}.code{font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--ink);background:var(--panel);border:1px solid var(--hair);border-radius:10px;padding:11px;white-space:pre;overflow-x:auto}.code .kk{color:#7a4bd0}.code .vv{color:var(--service)}.patch .ins{color:var(--ok)}.patch .op{color:var(--ai)}.muted{color:var(--faint);font-size:11px;font-family:var(--mono)}.composer{position:absolute;left:50%;bottom:20px;transform:translate(-50%);width:min(620px,calc(100% - 48px));z-index:15;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--hair-strong);border-radius:14px;box-shadow:0 14px 34px -14px #1220424d;padding:8px 8px 8px 16px}.composer .lead{font-family:var(--mono);font-size:12px;color:var(--ai)}.composer input{flex:1;border:none;outline:none;font-family:var(--sans);font-size:14px;color:var(--ink);padding:8px 0;background:transparent}.composer input::placeholder{color:var(--faint)}.composer button{font-family:var(--sans);font-size:13px;font-weight:600;color:#fff;cursor:pointer;background:var(--ink);border:none;border-radius:9px;padding:9px 16px}.composer button:hover{background:#000}.toast{position:absolute;left:50%;bottom:84px;transform:translate(-50%) translateY(8px);z-index:30;font-family:var(--mono);font-size:12px;color:#fff;background:var(--ink);padding:8px 14px;border-radius:8px;display:flex;align-items:center;gap:9px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.toast .ic{color:#7dffa8}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media(max-width:900px){.app{grid-template-columns:1fr;grid-template-areas:"top" "stage"}.rail{display:none}}