.board{background:#141414;background-image:radial-gradient(#373737 .65px,transparent .65px);background-size:14px 14px}
.reference-image.node,.reference-image.node.selected{background:none!important;border:0!important;box-shadow:none!important;border-radius:0;color:#888}
.reference-image .image-caption{height:23px;padding:0;border:0;display:flex;align-items:center;justify-content:space-between;font-size:10px;gap:10px;color:#888}
.reference-image .image-name{display:flex;align-items:center;gap:4px;min-width:0}.reference-image .image-name b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reference-image .image-name svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1}
.reference-image .image-dimensions{font-size:9px;white-space:nowrap;font-variant-numeric:tabular-nums}
.reference-image .photo{height:auto;margin:0;position:relative;width:100%;border:1px solid #767676;border-radius:10px;background:#202020;overflow:visible;display:block}
.reference-image.selected .photo{border-color:#aaa}
.reference-image .node-image{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:contain!important;border-radius:9px}
.reference-image .image-menu-toggle{position:absolute;top:9px;right:9px;z-index:6;width:21px;height:21px;padding:4px;background:#202223ed;border:0;border-radius:5px;color:#aaa;display:grid;place-items:center}
.reference-image .image-menu-toggle svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.reference-image .image-upload-menu{position:absolute;top:35px;right:9px;z-index:7;width:122px;border:1px solid #ffffff0b;border-radius:11px;padding:5px;background:#292929;box-shadow:0 6px 20px #0005}
.reference-image .image-upload-menu[hidden]{display:none}
.reference-image .image-replace{margin:0;padding:9px 8px;display:flex;align-items:center;gap:9px;width:100%;font-size:11px;background:none;color:#dedede;border-radius:6px;text-align:left}
.reference-image .image-replace:hover{background:#3a3a3a}.reference-image .image-replace svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.reference-image .port{width:15px;height:15px;font-size:12px;background:#252525;color:#ddd;border:1px solid #aaa;box-shadow:none}
.reference-image .port-left{left:-8px}.reference-image .port-right{right:-8px}.reference-image .port:hover{background:#444}
/* Drag affordances: the full image is movable, buttons remain independent. */
.reference-image .photo,.reference-image .node-image,.reference-image .image-caption{cursor:grab!important;touch-action:none}
.reference-image.node-dragging .photo,.reference-image.node-dragging .node-image,.reference-image.node-dragging .image-caption{cursor:grabbing!important}
.reference-image .image-menu-toggle,.reference-image .image-replace{cursor:pointer}
/* Alignment fixes, scoped to canvas content only. */
.node-refine-messages .bubble.ai .ai-head{display:flex;align-items:center;gap:6px;min-height:20px;margin:0 0 7px;line-height:1}
.node-refine-messages .bubble.ai .ai-head img{display:block;width:18px;height:18px;flex:0 0 18px;object-fit:cover;border-radius:50%;background:#fff;border:1px solid #e6def5;margin:0}
.node-refine-messages .bubble.ai .ai-head b{display:block;font-size:11px;line-height:18px;font-weight:600;margin:0}
.node-refine-messages .bubble.ai .bd{font-size:11px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.generation .controls{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;margin:10px 0}
.generation .controls .tag{display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;min-width:0;min-height:30px;padding:0 7px;font-size:12px;font-weight:500;line-height:1.2;border-radius:6px;white-space:nowrap}
.generation .controls select{flex:0 0 auto;box-sizing:border-box;height:30px;max-width:88px;margin:0;padding:0 6px;font-size:11px;line-height:normal;vertical-align:middle}
.generation .controls .dur{width:66px}.generation .controls .aspect{width:88px}
.node .port{display:block;padding:0;font-size:0!important;line-height:0;box-sizing:border-box}
.node .port:before,.node .port:after{content:'';position:absolute;left:50%;top:50%;background:currentColor;border-radius:1px;transform:translate(-50%,-50%);pointer-events:none}
.node .port:before{width:8px;height:1px}.node .port:after{width:1px;height:8px}
.reference-image.node .port{top:calc(50% + 11.5px);width:15px;height:15px}
.reference-image.node .port-left{left:-20px;right:auto}.reference-image.node .port-right{right:-20px;left:auto}
.reference-image.node .port:before{width:6px}.reference-image.node .port:after{height:6px}


/* Studio theme: shared navigation and assistant identities remain original. */
.app{--studio-canvas:#f5f5f7;--studio-surface:#ffffff;--studio-panel:#f0f0f3;--studio-input:#f7f7f9;--studio-text:#29292e;--studio-muted:#898991;--studio-line:rgba(40,40,60,.11);--studio-accent:#8057e8;--studio-tint:#f0ebfc;--studio-dot:#d5d5dd;--studio-shadow:0 12px 38px #25253a09,0 2px 5px #25253a05;--studio-glass:#ffffffd9;grid-template-columns:194px minmax(0,1fr) 310px;min-height:0;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','PingFang SC',sans-serif;letter-spacing:.01em}
[data-theme='dark'] .app{--studio-canvas:#1c1d21;--studio-surface:#292a30;--studio-panel:#23242a;--studio-input:#222329;--studio-text:#e7e7ed;--studio-muted:#95959f;--studio-line:rgba(225,225,245,.11);--studio-accent:#b099fb;--studio-tint:#342d47;--studio-dot:#36373e;--studio-shadow:0 12px 38px #0002,0 2px 5px #0001;--studio-glass:#292a30e6}
.app .board{background-color:var(--studio-canvas)!important;background-image:radial-gradient(var(--studio-dot) .7px,transparent .7px)!important;background-size:20px 20px!important;scrollbar-width:thin;scrollbar-color:var(--studio-line) transparent}
.app .hint{font-size:10px;letter-spacing:.02em;color:var(--studio-muted)!important;top:79px;opacity:.8}
.app .rail{background:var(--studio-panel)!important;border-right:1px solid var(--studio-line)!important;padding:24px 14px;color:var(--studio-text);position:relative}
.app .rail h5{font-size:10px;font-weight:500;letter-spacing:.06em;color:var(--studio-muted)!important;margin:30px 10px 12px}
.app .rail .legend{margin:0 10px;color:var(--studio-muted)!important;font-size:10px;line-height:2.3}
.app #newProject{position:relative;isolation:isolate;overflow:hidden;display:block;width:100%;height:39px;border:1px solid #bb9fff66;border-radius:10px;font-size:12px;letter-spacing:.025em;font-weight:550;background:linear-gradient(115deg,#9b77fa,#8252ee 45%,#7240df)!important;box-shadow:inset 0 1px 0 #ffffff60,0 4px 11px #8050e522!important;animation:none}
.app #newProject:after{content:'';position:absolute;pointer-events:none;top:-80%;bottom:-80%;width:33%;background:linear-gradient(90deg,transparent,#fff6,transparent);transform:translateX(-350%) skewX(-22deg);animation:studio-sheen 6s ease-in-out infinite}
@keyframes studio-sheen{0%,30%{transform:translateX(-350%) skewX(-22deg);opacity:0}40%{opacity:.65}68%,100%{transform:translateX(620%) skewX(-22deg);opacity:0}}
.app .project-row{position:relative;isolation:isolate;border:1px solid transparent;border-radius:10px;margin:6px 0;padding:3px;min-height:45px;transition:background .2s,box-shadow .2s;color:var(--studio-text)}
.app .project-row.on{background:var(--studio-surface)!important;border-color:var(--studio-line);box-shadow:0 3px 10px #25254007;color:var(--studio-text)!important}
.app .project-row.on:before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--studio-angle),transparent 0deg,#a184ef22 70deg,#b299f7d9 100deg,#e5dcff 112deg,transparent 145deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;pointer-events:none;animation:studio-orbit 7s linear infinite}
@property --studio-angle{syntax:'<angle>';initial-value:0deg;inherits:false}@keyframes studio-orbit{to{--studio-angle:360deg}}
.app .project-row .item{font-size:11px;color:var(--studio-text)!important;padding:10px 7px 10px 10px;line-height:1.45;background:none!important;display:flex;align-items:center;gap:8px}
.app .project-row .item:before{content:'';width:11px;height:10px;flex:none;border:1px solid var(--studio-muted);border-radius:2px;opacity:.65;background:linear-gradient(transparent 3px,var(--studio-muted) 3px,var(--studio-muted) 4px,transparent 4px)}
.app .project-more{font-size:17px;color:var(--studio-muted);width:23px;height:26px}.app .project-more:hover{background:var(--studio-tint)}
.app .tools{background:var(--studio-glass);border:1px solid var(--studio-line);box-shadow:0 4px 16px #27273f08;backdrop-filter:blur(20px);border-radius:12px;padding:5px;top:20px;height:44px;gap:3px}
.app .tools .btn{background:transparent!important;border:0!important;border-radius:7px;color:var(--studio-text)!important;font-size:11px;padding:0 10px;box-shadow:none!important;height:32px}
.app .tools .btn:hover{background:var(--studio-panel)!important}.app .tools .zoom-label{background:transparent!important;color:var(--studio-muted)!important;font-variant-numeric:tabular-nums;font-size:10px;padding:7px}
.app .generation.node{width:560px;background:var(--studio-surface)!important;border:1px solid var(--studio-line)!important;border-radius:16px;box-shadow:var(--studio-shadow)!important;color:var(--studio-text)}
.app .generation.node.selected{border:1px solid #a994d7aa!important;box-shadow:var(--studio-shadow),0 0 0 3px #9876dd09!important}
.app .generation .nhead{height:49px;padding:0 18px;gap:9px;background:transparent!important;border-bottom:1px solid var(--studio-line)!important;color:var(--studio-text)!important;font-size:12px;border-radius:16px 16px 0 0}
.app .generation .nhead b{font-weight:550;letter-spacing:.025em}.app .generation .nhead b:after{content:'AI';display:inline-block;vertical-align:1px;margin-left:9px;font-size:8px;line-height:16px;padding:0 5px;border-radius:4px;background:var(--studio-tint);color:var(--studio-accent);font-weight:650}
.app .generation .remove{font-size:16px;color:var(--studio-muted);width:22px;height:22px;border-radius:5px;display:grid;place-items:center}.app .generation .remove:hover{background:var(--studio-panel)}
.app .generation .content{padding:18px}.app .generation .content:has(>.output:not([hidden])){grid-template-columns:174px minmax(0,1fr);gap:8px 18px;align-items:start}
.app .generation .content>.muted{font-size:10px;line-height:18px;letter-spacing:.03em;color:var(--studio-muted)!important}
.app .generation .refs{gap:5px;margin:2px 0 5px}.app .generation .refs span{border:1px solid var(--studio-line);padding:4px 6px;border-radius:5px;background:var(--studio-input)!important;color:var(--studio-muted)!important;font-size:9px;line-height:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .generation .content>textarea{background:var(--studio-input)!important;border:1px solid var(--studio-line)!important;border-radius:8px;padding:10px;font-size:11px;line-height:1.8;color:var(--studio-text)!important;height:110px;outline-color:#ad95d5;box-shadow:inset 0 1px 2px #00000002}
.app .generation textarea::placeholder{color:var(--studio-muted);opacity:.85}
.app .generation .controls{gap:5px;margin:4px 0 7px;min-height:30px}
.app .generation .controls .tag{background:transparent!important;color:var(--studio-text)!important;font-size:11px;padding:0;min-height:28px;letter-spacing:-.015em}
.app .generation .controls select{background:var(--studio-input)!important;border:1px solid var(--studio-line)!important;border-radius:6px;color:var(--studio-muted)!important;height:28px;font-size:10px;padding:0 4px;width:57px;max-width:76px}
.app .generation .controls select.aspect{width:76px}
.app .generation .content>.run{font-size:10px;font-weight:550;line-height:17px;padding:8px 9px;min-height:34px;border-radius:7px;border:1px solid #bba5ed55;box-shadow:inset 0 1px #ffffff40,0 2px 6px #8050e514!important}
.app .generation .content>.output{background:var(--studio-input)!important;border:1px solid var(--studio-line);border-radius:10px;padding:13px 14px;min-height:294px;max-height:294px;color:var(--studio-text)!important;font-size:12px;line-height:1.95;scrollbar-width:thin;scrollbar-color:var(--studio-line) transparent;grid-row:1 / span 8}
.app .generation .output .label{font-size:9px;font-weight:550;letter-spacing:.04em;color:var(--studio-muted)!important;border-bottom:1px solid var(--studio-line);padding:0 0 10px;margin-bottom:11px;background:var(--studio-input)!important;top:0;display:flex;align-items:center;justify-content:space-between}
.app .generation .copy{float:none;color:var(--studio-muted)!important;font-size:9px;background:var(--studio-surface);border:1px solid var(--studio-line);padding:3px 7px;border-radius:5px;line-height:15px}
.app .generation .node-refine{padding-top:13px;margin-top:6px!important;border-top:1px solid var(--studio-line)!important;position:relative}
.app .generation .node-refine-title{font-size:10px;font-weight:550;color:var(--studio-muted)!important;letter-spacing:.02em;margin-bottom:9px}
.app .generation .node-refine-messages{max-height:67px;margin-bottom:9px;scrollbar-width:thin}
.app .generation .node-refine-messages .bubble{background:var(--studio-input)!important;border-radius:8px;padding:9px 11px;color:var(--studio-muted)!important;margin:0 0 5px}
.app .generation .node-refine-messages .bubble.ai .ai-head b{color:var(--studio-text)!important;font-size:10px;font-weight:550}
.app .generation .node-refine-messages .bubble.ai .bd{font-size:10px;line-height:1.65;color:var(--studio-muted)!important}
.app .generation .node-refine-input{height:57px;background:var(--studio-surface)!important;border:1px solid var(--studio-line)!important;border-radius:8px;padding:10px;font-size:11px;line-height:1.7;color:var(--studio-text)!important}
.app .generation .node-refine-send{min-height:31px;font-size:10px;font-weight:550;padding:7px 10px;border-radius:7px;margin-top:8px}
.app .reference-image .image-caption{color:var(--studio-muted);height:23px}
.app .reference-image .photo{border-color:var(--studio-line)!important;box-shadow:0 5px 18px #25253a0b}
.app .reference-image.selected .photo{border-color:#a194b9!important}
.app .node .port{background:var(--studio-surface)!important;color:var(--studio-muted)!important;border:1px solid var(--studio-line)!important;box-shadow:0 1px 3px #00000005;width:15px;height:15px}
.app .node .port:hover,.app .node .port.chosen{border-color:var(--studio-accent)!important;color:var(--studio-accent)!important;box-shadow:0 0 0 3px #9b7ed315}
.app .generation .port-left{left:-8px}.app .generation .port-right{right:-8px}
.app .links .edge-line{stroke:#b3a8c7;stroke-width:1.4}.app .links .edge-selected .edge-line{stroke:var(--studio-accent)}
[data-theme='dark'] .app .links .edge-line{stroke:#797087}


@media(max-width:1100px){.app{grid-template-columns:164px minmax(0,1fr) 280px}.app .tools .btn{padding:0 6px;font-size:10px}.app .rail{padding:20px 10px}}
@media(max-width:1000px){.app{grid-template-columns:minmax(0,1fr) 280px}}
@media(prefers-reduced-motion:reduce){.app #newProject:after,.app .project-row.on:before{animation:none}.app .btn.primary{animation:none!important}}

/* Production theme coverage for secondary surfaces and controls. */
.app .reference-image.node,.app .reference-image.node.selected{background:transparent!important;border:0!important;box-shadow:none!important}
.app .chat{background:var(--studio-surface)!important;border-color:var(--studio-line)!important;color:var(--studio-text)}
.app .chat h3{color:var(--studio-text)!important}.app .chat .scope{background:var(--studio-tint)!important;border-color:var(--studio-line)!important;color:var(--studio-accent)!important}
.app .chat .bubble{background:var(--studio-input)!important;color:var(--studio-text)!important}.app .chat .bubble.user,.app .generation .bubble.user{background:var(--studio-tint)!important;color:var(--studio-text)!important}
.app .chat .bubble.ai .ai-head b,.app .chat .bubble.ai .bd{color:var(--studio-text)!important}.app .chat .bubble.ai .ai-head .ai-sub{color:var(--studio-muted)!important}
.app .chat textarea{background:var(--studio-input)!important;color:var(--studio-text)!important;border-color:var(--studio-line)!important}.app .chat .legend,.app .chat .privacy-note{color:var(--studio-muted)!important}
.app .mention-menu{background:var(--studio-surface)!important;border-color:var(--studio-line)!important}.app .mention-option{color:var(--studio-text)!important}.app .mention-option:hover,.app .mention-option.active{background:var(--studio-tint)!important}
.app .empty-state,.app .empty-state h2{color:var(--studio-muted)!important}
.app .image-upload-menu{background:var(--studio-surface)!important;border-color:var(--studio-line)!important}.app .image-upload-menu .image-replace{color:var(--studio-text)!important}.app .image-upload-menu .image-replace:hover{background:var(--studio-panel)!important}
.app .image-menu-toggle{background:var(--studio-glass)!important;color:var(--studio-text)!important;border:1px solid var(--studio-line);backdrop-filter:blur(12px)}
[data-theme='dark'] .project-menu,[data-theme='dark'] .project-dialog,[data-theme='dark'] .canvas-context-menu{background:#292a30!important;border-color:#414149!important;color:#e7e7ed!important}
[data-theme='dark'] .project-menu button,[data-theme='dark'] .canvas-context-menu button{color:#e7e7ed!important}[data-theme='dark'] .project-menu button:hover,[data-theme='dark'] .canvas-context-menu button:hover{background:#342d47!important}
[data-theme='dark'] .project-menu .danger,[data-theme='dark'] .project-dialog .danger{color:#f1a0b1!important}
.app .generation .content textarea:focus-visible,.app .chat textarea:focus-visible{outline:2px solid var(--studio-accent);outline-offset:2px}
@media(max-width:650px){.app{display:flex;min-height:0}.app .board{height:65vh;min-height:400px}.app .tools{gap:0;max-width:calc(100vw - 16px);padding:3px}.app .tools .btn{padding:0 4px;font-size:9px}.app .chat{min-height:400px}}