/* Three depth levels: tinted workspace, floating navigation, content surfaces. */
body { background:radial-gradient(ellipse at 18% 0%,var(--shell-glow),transparent 55%),radial-gradient(ellipse at 92% 100%,color-mix(in srgb,var(--secondary) 13%,transparent),transparent 55%),var(--bg); }
#app { padding:12px;gap:12px; }
#topbar { margin:0;height:66px;min-height:66px;padding:0 20px;border:1px solid var(--glass-line);border-radius:22px;background:linear-gradient(120deg,#ffffff0a,transparent),var(--glass);backdrop-filter:blur(var(--material-blur)) saturate(1.4);box-shadow:inset 0 1px 0 #ffffff55,0 4px 12px #14283c06,0 14px 32px #14283c0b;gap:14px; }
#studio-rail { top:90px;left:12px;bottom:12px;width:76px;border:1px solid var(--glass-line);border-radius:25px;background:linear-gradient(160deg,#ffffff18,transparent 70%),var(--glass);backdrop-filter:blur(var(--material-blur)) saturate(1.4);box-shadow:inset 0 1px 0 #ffffff60,0 12px 35px #14283c0d;padding:22px 7px 14px;overflow:auto;scrollbar-width:none; }
#studio-rail button { transition:background .25s,color .25s,transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .25s; }
#studio-rail button:hover { transform:translateY(-2px);background:var(--accent-bg);box-shadow:inset 0 1px 0 #ffffff38,0 5px 12px #14283c08; }
#studio-rail button:focus-visible { outline-offset:-2px; }
#studio-rail [data-studio=add] { background:linear-gradient(145deg,var(--accent-2),var(--accent));color:var(--accent-ink);border:1px solid #ffffff35;box-shadow:inset 0 1px 0 #ffffff38,0 6px 16px var(--accent-glow);border-radius:15px; }
.rail-monogram { font-size:29px;color:var(--accent);letter-spacing:-4px; }.rail-monogram span { color:var(--secondary); }
.rail-top { gap:10px; }
#viewport,#workbench { margin:0 0 0 88px;min-height:0;border:1px solid var(--glass-line);border-radius:26px;box-shadow:inset 0 1px 0 #ffffff50,0 6px 28px #14283c08; }
#workbench { overflow:auto; }
.brand-mark { background:linear-gradient(145deg,#ffffffb0,var(--palette-tint) 32%,var(--palette-primary) 85%);box-shadow:inset 0 1px 1px #ffffffb0,0 4px 12px var(--accent-glow); }
.mode-seg { background:color-mix(in srgb,var(--panel-2) 70%,transparent);border-color:var(--line);border-radius:13px; }
.mode-seg button { border-radius:9px; }.mode-seg button.on { box-shadow:inset 0 1px 0 #ffffff35,0 3px 7px #14283c0b; }
#studio-tools .btn { border-radius:12px; } .chip-balance { border:1px solid var(--line);border-radius:12px; }
.btn.primary,.gen-go { background:linear-gradient(145deg,var(--accent-2),var(--accent));color:var(--accent-ink);box-shadow:inset 0 1px 0 #ffffff30,0 4px 12px var(--accent-glow); }
#dock,#zoombar,.ov-bar,.ov-panel,.quality-popover,.menu,.dialog { backdrop-filter:blur(var(--material-blur)) saturate(1.3);border-color:var(--glass-line);box-shadow:inset 0 1px 0 #ffffff32,0 8px 22px #102d4210,0 24px 65px #102d4212; }
.node-card { background:var(--panel);box-shadow:0 3px 8px #14283c05,0 14px 28px #14283c0a; }
#viewport .node.sel .node-card { box-shadow:0 0 0 .8px var(--accent),0 8px 24px var(--accent-glow); }
.canvas-ambient { background:radial-gradient(ellipse at 25% 0%,var(--shell-glow),transparent 50%),radial-gradient(ellipse at 95% 90%,color-mix(in srgb,var(--secondary) 9%,transparent),transparent 45%); }
#empty-hint .eh-icon { background:linear-gradient(145deg,#ffffffd0,var(--palette-tint) 40%,var(--palette-primary));box-shadow:inset 0 1px 1px #ffffffa0,0 15px 50px var(--accent-glow); }
.eh-fluid>i { border-color:color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:inset 0 0 32px color-mix(in srgb,var(--palette-tint) 15%,transparent); }
.eh-title>span { background:linear-gradient(110deg,var(--text),var(--accent),var(--text));background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:letter-wave 6s ease-in-out infinite,ink-flow 9s ease-in-out infinite;animation-delay:calc(var(--letter) * -.24s); }
@keyframes ink-flow { 0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;} }
.pref-segment { flex-wrap:wrap;justify-content:flex-end; }
#viewport #edges .edge-del { display:none; }
.show-edge-delete #viewport #edges .edge-del { display:initial; }
#viewport #edges path.edge-flow { stroke-width:calc(var(--edge-width) + 1px); }
#viewport #edges path.edge-aura { fill:none;stroke-width:calc(var(--edge-width) + 4px);vector-effect:non-scaling-stroke;stroke-linecap:round;pointer-events:none;filter:blur(2px);opacity:0;transition:opacity .4s; }
#viewport:not([data-flow=off]) #edges :is(.related,.busy,.edge-g:hover) .edge-flow { opacity:var(--flow-strength); }
#viewport:not([data-flow=off]) #edges :is(.related,.busy,.edge-g:hover) .edge-aura { opacity:calc(var(--flow-strength) * .35); }
#viewport:not([data-flow=off])[data-flow-visibility=always] #edges .edge-flow { opacity:var(--flow-strength); }
#viewport:not([data-flow=off])[data-flow-visibility=always] #edges .edge-aura { opacity:calc(var(--flow-strength) * .35); }
#viewport:not([data-flow=off])[data-flow-visibility=always] #edges .flow-light { animation-play-state:running; }
.material-solid :is(#topbar,#canvas-project-bar,#canvas-actions,#canvas-actions #studio-tools,#studio-rail,#dock,#zoombar,.dialog,.ov-panel,.ov-bar,.quality-popover) { backdrop-filter:none;background:var(--panel); }
.stack-peek-off .group-stack:hover .stack-card,.stack-peek-off .group-stack:focus-visible .stack-card { transform:translate(calc(var(--i) * 12px),calc(var(--i) * 8px)) rotate(calc(var(--i) * 4deg)); }
@media(max-height:850px) and (min-width:601px) { #studio-rail { padding-top:14px; }.rail-top { gap:5px; }#studio-rail button { min-height:45px; }.rail-monogram { line-height:28px;font-size:27px; }.rail-rule { margin:0 0 4px; } }
@media(max-width:1100px) { #topbar { gap:8px;padding:0 12px; }.tb-left { gap:7px; }.brand { font-size:12px; }.studio-search-btn span,.studio-search-btn kbd { display:none; }#studio-tools { gap:6px; } }
@media(max-width:600px) { #app { padding:6px;gap:8px; }#topbar { height:60px;min-height:60px;border-radius:18px;gap:4px;padding:0 8px; }#studio-rail { top:74px;left:6px;bottom:6px;width:50px;padding:14px 2px 10px;border-radius:19px; }#studio-rail button { width:42px;min-height:46px; }.rail-top { gap:8px; }#studio-rail [data-studio=add] { width:36px;min-height:36px;border-radius:12px; }#viewport,#workbench { margin-left:58px;border-radius:20px; }.tb-left { gap:3px; }#project-switch,.proj-btn { max-width:95px; }#studio-tools .btn { padding:0 7px;font-size:10px; }.chip-balance { padding:0 4px;gap:3px; } }
@media(prefers-reduced-motion:reduce) { #viewport #edges :is(.edge-flow,.edge-aura) { opacity:0!important; }#studio-rail button { transition:none;transform:none; }.eh-title>span { animation:none; } }
@media(max-width:600px) { #zoombar { left:10px;right:10px;width:auto;max-width:calc(100% - 20px);gap:0;padding:4px;justify-content:space-between; }#zoombar .zb-assets span { display:none; }#zoombar .zb-btn { width:24px;min-width:22px;padding:3px; }#zoombar .zb-btn svg { width:14px; }#zoombar .zb-val { width:40px;min-width:35px; }#zoombar .zb-sep { margin:0 3px; } }
@media(prefers-reduced-transparency:reduce) { #topbar,#studio-rail,#dock,#zoombar,.dialog,.ov-panel,.ov-bar,.quality-popover,.menu { background:var(--panel);backdrop-filter:none; } }