/* Quiet chrome, stable status, compact decisions, and contextual handles. */
#save-state { position:absolute;top:16px;right:18px;z-index:5;max-width:min(300px,60%);padding:5px 10px;border-radius:9px;background:var(--glass);font-size:10px;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.quiet-save #save-state:not([data-status=error]) { opacity:0; }
#save-state[data-status=error] { opacity:1;pointer-events:auto;color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent); }
.compact-header #app-version,.compact-header .tb-slash,.compact-header #studio-tools [data-studio=tasks] { display:none; }
.compact-header .brand { gap:8px; }.compact-header .brand-mark { width:22px;height:22px;border-radius:7px; }
.compact-header #project-switch .proj-btn { width:175px;max-width:175px;justify-content:flex-start;background:transparent;border-radius:10px;font-weight:450; }
.compact-header #project-switch .proj-btn span { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; }
.compact-header #studio-tools .btn { height:32px;font-size:11px;padding:0 13px;box-shadow:none; }
.compact-header #topbar { height:60px;min-height:60px; }
.compact-header #studio-rail { top:84px; }
.compact-header .mode-seg { padding:3px; }.compact-header .mode-seg button { padding:4px 9px;font-size:11px; }
#grid-reactor { position:absolute;width:272px;height:272px;pointer-events:none;z-index:0; }
.node-port-bridge { position:absolute;inset:0 calc((var(--port-offset,22px) + 12px) / var(--z,1) * -1); }
#viewport .node .port { transition:top .12s cubic-bezier(.2,.8,.2,1),left .3s cubic-bezier(.2,.8,.2,1),opacity .18s,transform .3s cubic-bezier(.2,.8,.2,1),background .2s; }
#viewport .node .port.in { left:calc(8px / var(--z,1)); }
#viewport .node .port.out { left:calc(100% - 8px / var(--z,1)); }
#viewport .node.port-hover-in .port.in,#viewport .node:is(.connection-source,.connection-target)[data-connect-side=in] .port.in { left:calc(-1 * var(--port-offset,22px) / var(--z,1)); }
#viewport .node.port-hover-out .port.out,#viewport .node:is(.connection-source,.connection-target)[data-connect-side=out] .port.out { left:calc(100% + var(--port-offset,22px) / var(--z,1)); }
.no-port-slide #viewport .node .port { transition:top .12s ease,background .2s; }
.compact-composer .ov-panel { width:380px;padding:12px;gap:7px;border-radius:19px; }
.compact-composer .cp-head { padding-bottom:7px; }.compact-composer .cp-heading-icon { width:22px;height:22px; }
.compact-composer .cp-section-label { margin-top:0;font-size:9px; }.compact-composer .cp-text { min-height:56px;padding:6px 2px;font-size:12px; }
.compact-composer .cp-bar { gap:5px;padding-top:8px; }.compact-composer .cp-quality { padding:0 6px;font-size:9px;gap:3px; }
.compact-composer .cp-quality svg { width:12px; }.compact-composer .cp-count { font-size:9px;padding-left:4px;padding-right:2px; }
.compact-composer .cp-model { min-width:45px;font-size:9px; }.compact-composer .cp-go { min-width:64px;height:30px;padding:0 9px;font-size:11px;gap:4px; }
.compact-composer .cp-go svg { width:12px; }.compact-composer .cp-go small { font-size:8px; }
.compact-composer .ov-panel .ref-add,.compact-composer .ov-panel .ref-chip { height:28px;font-size:10px; }.compact-composer .ov-panel .ref-chip img { width:26px;height:26px; }
.confirm-modal { backdrop-filter:blur(8px); }.confirm-modal .dialog { padding:24px;border-radius:21px;box-shadow:0 24px 80px #00000022,inset 0 1px 0 #ffffff25; }
.archive-indicator{position:absolute;right:18px;top:61px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:8;border:1px solid var(--line);border-radius:9px;background:var(--glass,var(--panel));color:var(--text-2);font:11px inherit;padding:6px 9px;cursor:pointer;backdrop-filter:blur(12px)}
.archive-state{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);font-size:12px;line-height:1.7;margin:12px 0}.archive-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.archive-actions .btn{font-size:11px}
.confirm-modal h3 { font-size:17px;line-height:1.4;margin-bottom:15px;font-weight:600; }
.confirm-symbol { float:left;width:26px;height:26px;border-radius:9px;font-size:15px;margin:2px 10px 0 0; }
.confirm-message { font-size:12px;line-height:1.8;min-height:38px; }.confirm-error:empty { display:none; }
.confirm-actions { margin-top:22px;gap:8px;clear:both; }.confirm-actions .btn { min-width:78px;height:34px;border-radius:10px;font-size:12px;font-weight:500; }
.confirm-actions .btn.destructive { background:#bc483d;border:1px solid #ffffff16;color:#fff;box-shadow:inset 0 1px 0 #ffffff16; }
.confirm-actions .btn.destructive:hover { background:#a63e34; }
.confirm-actions .btn:focus-visible { outline-offset:-2px; }
@media(max-width:600px) { .compact-header #studio-rail { top:74px; }.compact-header #project-switch .proj-btn { width:95px;max-width:95px; }.compact-header #studio-tools { display:none; }#save-state { top:38px;right:12px;max-width:calc(100% - 24px); }.compact-composer .ov-panel { width:min(380px,calc(100% - 16px)); }.compact-composer .cp-bar { flex-wrap:wrap; }.compact-composer .cp-model { flex-basis:100%; }.confirm-modal .dialog { padding:22px; } }
@media(prefers-reduced-motion:reduce) { #viewport .node .port { transition:none; }#grid-reactor { display:none; } }