*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #07070f;
  --node-bg: #0f0f1e;
  --node-bd: #252550;
  --accent1: #7c3aed;
  --accent2: #06b6d4;
  --accent3: #f472b6;
  --text: #e2e2f0;
  --text-dim: #55557a;
  --danger: #ef4444;
}

/* ── Image node ── */
.node.image-node { min-width:240px; }
.node-image-area {
  width:100%; height:160px; overflow:hidden;
  position:relative; flex-shrink:0;
  background:#0a0a1a;
}
.node-image-area img {
  width:100%; height:100%; object-fit:cover;
  display:block; pointer-events:none;
  transition:opacity .2s;
}
.node-image-area .img-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px;
  color:var(--text-dim); font-size:11px; font-family:'JetBrains Mono',monospace;
  letter-spacing:.04em; cursor:pointer;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .15s;
}
.node-image-area .img-placeholder:hover { background:rgba(124,58,237,.08); }
.node-image-area .img-placeholder svg { opacity:.4; }
.node-image-drop-overlay {
  position:absolute; inset:0; z-index:5;
  background:rgba(124,58,237,.25);
  border:2px dashed var(--accent1);
  display:none; align-items:center; justify-content:center;
  color:var(--text); font-size:12px; font-family:'Space Grotesk',sans-serif;
  pointer-events:none;
}
.node-image-area.drag-over .node-image-drop-overlay { display:flex; }

/* Light mode image node */
body.light .node-image-area { background:#D2CEC6; }

/* ── Image node settings panel ── */
.node-image-settings {
  padding:10px 12px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; gap:8px;
}
.img-setting-row {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.img-setting-label {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); letter-spacing:.04em; flex-shrink:0;
}
.img-setting-pills {
  display:flex; gap:2px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:7px; padding:2px;
}
.img-pill {
  font-size:9px; font-family:'JetBrains Mono',monospace; letter-spacing:.03em;
  padding:3px 8px; border-radius:5px; cursor:pointer;
  color:rgba(255,255,255,.35); border:none; background:none;
  transition:background .12s, color .12s; white-space:nowrap;
}
.img-pill.active { background:var(--accent1); color:#fff; box-shadow:0 0 6px rgba(124,58,237,.35); }
.img-pill:not(.active):hover { background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); }
body.light .node-image-settings { border-top:1px solid rgba(124,58,237,.1); }
body.light .img-setting-pills { background:rgba(124,58,237,.05); border-color:rgba(124,58,237,.12); }
body.light .img-pill { color:var(--text-dim); }
body.light .node-image-area .img-placeholder { color:var(--text-dim); }

/* ── Curve editor ── */
.curve-editor-wrap {
  position:relative; padding:10px 12px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  user-select:none;
}
.curve-tabs {
  display:flex; gap:2px; margin-bottom:8px;
}
.curve-tab {
  font-size:9px; font-family:'JetBrains Mono',monospace; letter-spacing:.04em;
  padding:3px 9px; border-radius:5px; cursor:pointer; border:1px solid rgba(255,255,255,.08);
  background:none; color:rgba(255,255,255,.35); transition:all .12s;
}
.curve-tab.active-rgb { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.2); }
.curve-tab.active-r   { background:rgba(239,68,68,.3);   color:#fca5a5; border-color:rgba(239,68,68,.5); }
.curve-tab.active-g   { background:rgba(34,197,94,.25);  color:#86efac; border-color:rgba(34,197,94,.5); }
.curve-tab.active-b   { background:rgba(59,130,246,.3);  color:#93c5fd; border-color:rgba(59,130,246,.5); }
.curve-canvas-wrap {
  position:relative; width:100%; height:200px;
  min-height:160px;
}
.curve-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  border-radius:6px; cursor:crosshair;
  display:block;
}
.curve-controls {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:8px;
}
.curve-reset-btn {
  font-size:9px; font-family:'JetBrains Mono',monospace; letter-spacing:.04em;
  padding:3px 10px; border-radius:5px; cursor:pointer;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.45); transition:all .12s;
}
.curve-reset-btn:hover { background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.5); color:#fca5a5; }
.curve-resize-handle {
  position:absolute; bottom:-2px; right:-2px; width:16px; height:16px;
  cursor:nwse-resize; z-index:10; display:flex; align-items:flex-end; justify-content:flex-end;
}
.curve-resize-handle svg { opacity:.3; transition:opacity .15s; }
.curve-editor-wrap:hover .curve-resize-handle svg { opacity:.7; }

/* ── Processing nodes ── */
.node.proc-node { min-width:220px; }
.node.proc-node::before {
  content:''; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background:linear-gradient(135deg, var(--proc-accent, #7c3aed) 0%, transparent 34%);
  opacity:.06; z-index:0;
}
.node.proc-node > * { position:relative; z-index:1; }

/* v1.1.77 Reroute Nodes — compact connector-only graph anchors */
.node.proc-node.reroute-node {
  width:54px !important;
  min-width:54px !important;
  max-width:54px !important;
  min-height:34px;
  border-radius:999px;
  overflow:visible;
  background:rgba(15,15,30,.92);
}
.node.proc-node.reroute-node::before { border-radius:999px; opacity:.14; }
.node.reroute-node .node-header {
  height:34px;
  min-height:34px;
  padding:0;
  justify-content:center;
  border-bottom:none;
  cursor:grab;
}
.node.reroute-node.dragging .node-header { cursor:grabbing; }
.node.reroute-node .node-header::after {
  content:'';
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--proc-accent,#22c55e);
  box-shadow:0 0 12px var(--proc-accent,#22c55e), inset 0 0 0 2px rgba(255,255,255,.22);
}
.node.reroute-node .node-collapse-btn,
.node.reroute-node .node-dot,
.node.reroute-node .node-label,
.node.reroute-node .node-pin-badge,
.node.reroute-node .node-menu-btn,
.node.reroute-node .node-name-row,
.node.reroute-node .node-width-handle,
.node.reroute-node .node-params,
.node.reroute-node .output-settings,
.node.reroute-node .output-settings-fold { display:none !important; }
.node.reroute-node .node-ports {
  position:absolute;
  inset:0;
  display:block;
  padding:0;
  margin:0;
  border:0;
  pointer-events:none;
}
.node.reroute-node .port-row {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:auto;
  padding:0;
  margin:0;
  gap:0;
  pointer-events:none;
}
.node.reroute-node .port-row.input { left:-7px; }
.node.reroute-node .port-row.output { right:-7px; }
.node.reroute-node .port-label-input,
.node.reroute-node .port-drag-handle { display:none !important; }
.node.reroute-node .port { pointer-events:auto; }
body.light .node.proc-node.reroute-node { background:rgba(222,218,210,.94); }

.node-type-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:9px; font-family:'JetBrains Mono',monospace;
  letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:20px; flex-shrink:0;
  font-weight:500;
}
.badge-source   { background:rgba(124,58,237,.2); color:#a78bfa; border:1px solid rgba(124,58,237,.3); }
.badge-output   { background:rgba(6,182,212,.15);  color:#67e8f9; border:1px solid rgba(6,182,212,.25); }
.badge-adjust   { background:rgba(244,114,182,.15);color:#f9a8d4; border:1px solid rgba(244,114,182,.25); }
.badge-filter   { background:rgba(52,211,153,.15); color:#6ee7b7; border:1px solid rgba(52,211,153,.25); }
.badge-blend    { background:rgba(251,146,60,.15);  color:#fdba74; border:1px solid rgba(251,146,60,.25); }
.badge-gen      { background:rgba(167,139,250,.15); color:#c4b5fd; border:1px solid rgba(167,139,250,.25); }
.badge-glitch   { background:rgba(239,68,68,.15);  color:#fca5a5; border:1px solid rgba(239,68,68,.25); }
.badge-mask     { background:rgba(20,184,166,.15);  color:#5eead4; border:1px solid rgba(20,184,166,.25); }
/* ── Flyout menu category dot (replaces text badge inside menu) ── */
.nfm-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  box-shadow:0 0 6px var(--dot-color,#7c3aed);
  background:var(--dot-color,#7c3aed);
}

.node-params {
  padding:10px 12px 12px;
  display:flex; flex-direction:column; gap:9px;
  border-top:1px solid rgba(255,255,255,.06);
}
.param-row { display:flex; flex-direction:column; gap:4px; }
/* v1.1.84C: 2D coordinate picker pad */
.param-xy-pad { position:relative; height:92px; border:1px solid rgba(255,255,255,.14); border-radius:9px; cursor:crosshair; background:
  linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)) 50% 0/1px 100% no-repeat,
  linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)) 0 50%/100% 1px no-repeat,
  rgba(255,255,255,.02); }
.param-xy-dot { position:absolute; width:11px; height:11px; border-radius:50%; background:#fff; box-shadow:0 0 6px rgba(255,255,255,.5); transform:translate(-50%,-50%); pointer-events:none; }
.param-xy-val { color:var(--text); opacity:.7; min-width:38px; text-align:right; font-variant-numeric:tabular-nums; }
.param-label > .param-xy-val:last-of-type { margin-left:8px; }
.param-label > .param-xy-val:first-of-type { margin-left:auto; }
body.light .param-xy-pad { border-color:rgba(93,78,73,.25); background:
  linear-gradient(rgba(93,78,73,.18), rgba(93,78,73,.18)) 50% 0/1px 100% no-repeat,
  linear-gradient(rgba(93,78,73,.18), rgba(93,78,73,.18)) 0 50%/100% 1px no-repeat,
  rgba(93,78,73,.04); }
body.light .param-xy-dot { background:#5d4e49; box-shadow:none; }
.param-label {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); letter-spacing:.04em;
  display:flex; justify-content:flex-start; align-items:center; gap:6px;
}
.param-label > span { margin-left:auto; }
.param-label span { color:var(--text); opacity:.7; min-width:44px; text-align:right; font-variant-numeric:tabular-nums; }
/* v1.1.83Y: per-parameter keyframe dot (AE-style). off=gray ring, on=solid red
   (key at playhead), mid=red ring (keyframed, no key at playhead).
   v1.1.83Z: hit area stays 10x10 (the button); the visible dot is a smaller
   6px ::before circle centered inside it. */
.kf-dot { position:relative; width:10px; height:10px; border:0; background:none; padding:0; margin:0; flex:0 0 auto; cursor:pointer; appearance:none; -webkit-appearance:none; outline:none; box-shadow:none; }
.kf-dot:focus, .kf-dot:focus-visible, .kf-dot:active { outline:none; background:none; box-shadow:none; border:0; }
.kf-dot::before { content:''; position:absolute; left:50%; top:50%; width:7px; height:7px; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(255,255,255,.32); background:transparent; transition:border-color .12s ease, background .12s ease; }
.kf-dot:hover::before { border-color:#f87171; }
.kf-dot[data-state="on"]::before { background:#ef4444; border-color:#ef4444; }
.kf-dot[data-state="mid"]::before { background:transparent; border-color:#ef4444; }
body.light .kf-dot::before { border-color:rgba(93,78,73,.4); }
body.light .kf-dot[data-state="on"]::before { background:#dc2626; border-color:#dc2626; }
body.light .kf-dot[data-state="mid"]::before { border-color:#dc2626; background:rgba(220,38,38,.12); }
.param-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px; border-radius:2px;
  background:rgba(255,255,255,.1); outline:none; cursor:pointer;
}
.param-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:13px; height:13px;
  border-radius:50%; background:var(--accent1);
  box-shadow:0 0 6px rgba(124,58,237,.5); cursor:pointer;
  transition:transform .15s;
}
.param-slider::-webkit-slider-thumb:hover { transform:scale(1.2); }
.param-select {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; color:var(--text); font-family:'Space Grotesk',sans-serif;
  font-size:11px; padding:4px 8px; cursor:pointer; outline:none; width:100%;
}
.param-select:focus { border-color:var(--accent1); }
.param-textarea {
  width:100%; min-height:74px; resize:vertical;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; color:var(--text); font-family:'Space Grotesk',sans-serif;
  font-size:12px; line-height:1.35; padding:8px 10px; outline:none;
}
.param-textarea:focus { border-color:var(--accent1); }
.param-note {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); line-height:1.4;
}

/* ── Color Picker (shared popup, native-style) ── */
.color-picker-wrap {
  padding:4px;
  display:flex; flex-direction:column; gap:8px;
  width:244px;
  color:var(--text,#e2e2f0);
  font-family:'Space Grotesk',system-ui,sans-serif;
}
.cp-sv-canvas {
  width:100%; height:140px; display:block;
  border-radius:6px; cursor:crosshair; flex-shrink:0;
  image-rendering:pixelated;
  background:#000;
  border:1px solid rgba(255,255,255,.08);
}
.cp-hue-row {
  display:grid; grid-template-columns:20px 32px 1fr;
  align-items:center; gap:8px;
}
.cp-eyedropper-btn {
  width:20px; height:20px; border:0; background:transparent;
  color:var(--text-dim,#55557a); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:color .14s ease;
}
.cp-eyedropper-btn:hover { color:var(--text,#e2e2f0); }
.cp-eyedropper-btn[disabled] { opacity:.3; cursor:default; }
.cp-preview-dot {
  width:31px; height:31px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 1px 4px rgba(0,0,0,.5);
  background:#000;
}
.cp-hue-wrap { position:relative; height:20px; min-width:0; overflow:visible; }
.cp-hue-canvas {
  width:100%; height:20px; display:block;
  cursor:ew-resize; image-rendering:pixelated;
  border-radius:4px; border:0;
}
/* Diamond handle — same family as .grad-stop-marker, self-contained within track */
.cp-hue-cursor {
  position:absolute; top:50%; width:14px; height:14px;
  transform:translate(-50%,-50%); pointer-events:none; z-index:2;
}
.cp-hue-cursor::before {
  content:''; position:absolute; left:50%; top:50%;
  width:10px; height:10px;
  transform:translate(-50%,-50%) rotate(45deg);
  border-radius:2px 2px 0 2px;
  background:#fff; border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.6);
}
.cp-alpha-row {
  display:grid; grid-template-columns:32px 1fr 42px;
  align-items:center; gap:8px; width:100%;
}
.cp-alpha-label {
  font-size:11px; font-family:'Space Grotesk',system-ui,sans-serif;
  color:var(--text-dim,#55557a); text-align:center; line-height:1;
}
.cp-alpha-wrap {
  position:relative; height:20px; min-width:0; overflow:visible;
  background-size:12px 12px;
  background-position:0 0, 6px 6px;
  background-image:
    linear-gradient(45deg, #1a1a2e 25%, transparent 25%, transparent 75%, #1a1a2e 75%, #1a1a2e),
    linear-gradient(45deg, #1a1a2e 25%, transparent 25%, transparent 75%, #1a1a2e 75%, #1a1a2e);
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
}
.cp-alpha-canvas { width:100%; height:20px; display:block; cursor:ew-resize; image-rendering:pixelated; border-radius:4px; }
/* Diamond handle — same family as .grad-stop-marker, self-contained within track */
.cp-alpha-cursor {
  position:absolute; top:50%; width:14px; height:14px;
  transform:translate(-50%,-50%); pointer-events:none; z-index:2;
}
.cp-alpha-cursor::before {
  content:''; position:absolute; left:50%; top:50%;
  width:10px; height:10px;
  transform:translate(-50%,-50%) rotate(45deg);
  border-radius:2px 2px 0 2px;
  background:var(--cp-alpha-cursor-color,#fff); border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.6);
}
.cp-alpha-value {
  height:24px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); color:var(--text,#e2e2f0);
  font-size:12px; font-family:'Space Grotesk',system-ui,sans-serif;
  text-align:center; outline:none; padding:2px 4px; border-radius:5px;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.cp-alpha-value:focus { border-color:var(--accent1,#7c3aed); box-shadow:0 0 0 1px var(--accent1,#7c3aed); }
.cp-fields-wrap { display:flex; flex-direction:column; gap:8px; }
.cp-mode-fields { width:100%; }
.cp-field-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  align-items:start;
}
.cp-field-block { display:flex; flex-direction:column; gap:6px; align-items:center; min-width:0; }
.cp-field-input {
  width:100%; min-width:0; height:31px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:5px; outline:none;
  font-size:13px; font-family:'Space Grotesk',system-ui,sans-serif;
  color:var(--text,#e2e2f0); text-align:center;
  padding:4px 6px;
  transition:border-color .14s ease, box-shadow .14s ease;
  color-scheme: dark;
}
.cp-field-input[type="number"]::-webkit-outer-spin-button,
.cp-field-input[type="number"]::-webkit-inner-spin-button {
  opacity: 0.5;
  cursor: pointer;
}
.cp-field-input:focus, .cp-mode-select:focus {
  border-color:var(--accent1,#7c3aed);
  box-shadow:0 0 0 1px var(--accent1,#7c3aed);
}
.cp-field-label {
  font-size:11px; font-family:'Space Grotesk',system-ui,sans-serif;
  color:var(--text-dim,#55557a); line-height:1; letter-spacing:.04em;
}
.cp-hex-input {
  width:100%; margin:0 auto; display:block;
  height:31px; box-sizing:border-box;
}
.cp-mode-select {
  height:28px; width:100%;
  background:rgba(255,255,255,.05); color:var(--text,#e2e2f0);
  border:1px solid rgba(255,255,255,.10);
  border-radius:5px;
  font-size:13px;
  text-align:center;
  text-align-last:center;
  padding:2px 6px;
  outline:none;
  font-family:'Space Grotesk',system-ui,sans-serif;
  transition:border-color .14s ease, box-shadow .14s ease;
}
/* Legacy color-picker classes kept as harmless fallbacks for older project DOM. */
.cp-wheel-row { display:flex; gap:8px; align-items:stretch; }
.cp-wheel-canvas { border-radius:50%; cursor:crosshair; flex-shrink:0; image-rendering:pixelated; }
.cp-value-strip { width:16px; border-radius:4px; cursor:ns-resize; flex-shrink:0; image-rendering:pixelated; }
.cp-tabs { display:none; }
.cp-fields { display:flex; flex-direction:column; gap:3px; }
.cp-field-row { display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.2); border-radius:4px; padding:3px 7px; }
.cp-preview-bar { height:12px; border-radius:4px; border:1px solid rgba(255,255,255,.1); }


.color-key-picker-row { gap:7px; }
.color-key-picker-button {
  width:100%; min-height:34px; display:flex; align-items:center; gap:10px;
  padding:6px 9px; border-radius:9px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.82); font-family:'Space Grotesk',sans-serif; font-size:12px;
  transition:background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.color-key-picker-button:hover { background:rgba(124,58,237,.14); border-color:rgba(124,58,237,.36); box-shadow:0 0 0 1px rgba(124,58,237,.12) inset; }
.color-key-picker-swatch.color-swatch { width:28px; height:28px; flex:0 0 28px; border-radius:999px; }
.color-key-picker-copy { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.color-key-picker-hex { font-family:'JetBrains Mono',monospace; letter-spacing:.02em; }
body.light .color-key-picker-button { background:rgba(255,255,255,.42); border-color:rgba(129,117,110,.18); color:rgba(42,35,32,.78); }
body.light .color-key-picker-button:hover { background:rgba(124,58,237,.08); border-color:rgba(124,58,237,.22); }

/* Color swatches */
.cp-swatches { border-top:1px solid rgba(255,255,255,.07); padding-top:7px; margin-top:2px; }
.cp-swatches-grid { display:flex; flex-wrap:wrap; gap:5px; }
.cp-swatch-item {
  width:22px; height:22px; border-radius:5px; position:relative;
  cursor:pointer; flex-shrink:0;
  border:1px solid rgba(255,255,255,.12);
  transition:border-color .12s, transform .1s;
}
.cp-swatch-item:hover { border-color:rgba(255,255,255,.35); transform:scale(1.1); }
.cp-swatch-del {
  position:absolute; top:-5px; right:-5px;
  width:14px; height:14px; border-radius:50%;
  background:rgba(15,15,30,.85); color:rgba(255,255,255,.8);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .12s; cursor:pointer;
  border:none; outline:none; padding:0; z-index:3;
}
.cp-swatch-item:hover .cp-swatch-del { opacity:1; }
.cp-swatch-del:hover { color:#fff; background:rgba(239,68,68,.8); }
.cp-swatch-add {
  width:22px; height:22px; border-radius:5px; flex-shrink:0;
  border:1px dashed rgba(255,255,255,.22); background:transparent;
  color:rgba(255,255,255,.4); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .14s, color .14s; padding:0;
}
.cp-swatch-add:hover { border-color:rgba(124,58,237,.6); color:rgba(124,58,237,.9); }
body.light .cp-swatches { border-top-color:rgba(129,117,110,.18); }
body.light .cp-swatch-item { border-color:rgba(42,35,32,.18); }
body.light .cp-swatch-del { background:rgba(234,231,220,.92); color:rgba(42,35,32,.7); }
body.light .cp-swatch-add { border-color:rgba(93,78,73,.3); color:rgba(93,78,73,.6); }

/* Floating color picker popover */
.cp-popover {
  position:fixed; z-index:7600; width:252px;
  background:var(--node-bg,#0f0f1e);
  border:1px solid var(--node-bd,#252550);
  border-radius:9px;
  box-shadow:0 16px 46px rgba(0,0,6,.7), 0 0 0 1px rgba(124,58,237,.10);
  display:none;
  user-select:none;
  padding:0;
}
.cp-popover.open { display:block; }
.cp-popover .color-picker-wrap { padding:8px; }
.cp-popover-arrow { display:none; }
body.light .cp-popover {
  background:var(--node-bg,rgba(234,231,220,.96));
  border-color:var(--node-bd,rgba(129,117,110,.3));
  box-shadow:0 16px 42px rgba(42,35,32,.18), 0 0 0 1px rgba(93,78,73,.08);
}
body.light .cp-sv-canvas { border-color:rgba(0,0,0,.18); }
body.light .cp-eyedropper-btn { color:var(--text-dim,#81756e); }
body.light .cp-eyedropper-btn:hover { color:var(--text,#2a2320); }
body.light .cp-preview-dot { border-color:rgba(42,35,32,.28); }
body.light .cp-field-label { color:var(--text-dim,#81756e); }
body.light .cp-field-input { color:var(--text,#2a2320); background:rgba(255,255,255,.72); border-color:rgba(129,117,110,.22); }
body.light .cp-alpha-value { color:var(--text,#2a2320); background:rgba(255,255,255,.72); border-color:rgba(129,117,110,.22); }
body.light .cp-mode-select { color:var(--text,#2a2320); background:rgba(255,255,255,.72); border-color:rgba(129,117,110,.22); }
body.light .cp-alpha-wrap {
  background-image:
    linear-gradient(45deg, #c8c4bc 25%, transparent 25%, transparent 75%, #c8c4bc 75%, #c8c4bc),
    linear-gradient(45deg, #c8c4bc 25%, transparent 25%, transparent 75%, #c8c4bc 75%, #c8c4bc);
  border-color:rgba(129,117,110,.18);
}
body.light .cp-alpha-label { color:var(--text-dim,#81756e); }

/* Color swatch button */
.color-swatch {
  flex:1; min-width:0; height:22px; border-radius:4px; border:1px solid rgba(255,255,255,.15);
  cursor:pointer; transition:border-color .15s;
  background-size:12px 12px, 12px 12px, auto;
  background-position:0 0, 6px 6px, 0 0;
}
.color-swatch:hover { border-color:rgba(255,255,255,.4); }
.out-bg-color.color-swatch { width:34px; flex:0 0 34px; height:24px; }
.export-bg-color-swatch.color-swatch { height:32px; width:100%; flex:none; }

/* Gradient ramp */
.grad-ramp-wrap { padding:8px 10px 0; display:flex; flex-direction:column; gap:8px; }
.grad-ramp-bar {
  height:24px; border-radius:6px; position:relative; cursor:copy;
  border:1px solid rgba(255,255,255,.12);
  margin-top:14px;
}
/* Pin/teardrop handle hovering over the bar — diamond pointing DOWN */
.grad-stop-marker {
  position:absolute; top:-15px; width:22px; height:26px;
  transform:translateX(-50%); cursor:grab; z-index:2;
  touch-action:none;
}
.grad-stop-marker.dragging { cursor:grabbing; z-index:5; }
.grad-stop-marker::before {
  content:''; position:absolute; left:50%; top:0; width:18px; height:18px;
  transform:translateX(-50%) rotate(45deg);
  /* sharp BOTTOM corner (post-rotation): the pre-rotation bottom-right corner
     maps to the bottom when rotated 45deg, so zero its radius (3rd value). */
  border-radius:5px 5px 0 5px;
  transform-origin:center;
  background:var(--stop-color,#fff); border:3px solid rgba(255,255,255,.8);
  box-shadow:0 2px 6px rgba(0,0,0,.5);
  background-clip:padding-box;
}
/* checkerboard sits behind the diamond when the stop is transparent */
.grad-stop-marker::after {
  content:''; position:absolute; left:50%; top:0; width:18px; height:18px;
  transform:translateX(-50%) rotate(45deg);
  border-radius:5px 5px 0 5px; z-index:-1;
  transform-origin:center;
  background:var(--stop-checker, transparent);
  background-size:6px 6px, 6px 6px, auto;
  background-position:0 0, 3px 3px, 0 0;
}
.grad-stop-marker.active::before { border-color:#5b9dff; box-shadow:0 0 0 1px rgba(91,157,255,.5), 0 2px 7px rgba(0,0,0,.55); }
/* Stops list */
.grad-stops { display:flex; flex-direction:column; gap:6px; }
.grad-stops-head { display:flex; align-items:center; justify-content:space-between; padding:2px 2px 0; }
.grad-stops-title { font-size:12px; color:rgba(255,255,255,.55); font-family:'Space Grotesk',sans-serif; letter-spacing:.02em; }
.grad-stop-row {
  display:flex; align-items:center; gap:6px; padding:3px; border-radius:7px;
  background:transparent; transition:background .1s;
}
.grad-stop-row.active { background:rgba(91,157,255,.12); }
.grad-stop-pos {
  width:52px; flex-shrink:0;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; color:rgba(255,255,255,.85); font-size:12px;
  padding:5px 7px; font-family:'JetBrains Mono','Space Grotesk',monospace;
}
.grad-stop-color {
  flex:1; min-width:0; display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; padding:4px 7px;
}
.grad-stop-swatch {
  width:18px; height:18px; flex-shrink:0; border-radius:4px; cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
}
.grad-stop-hex {
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:rgba(255,255,255,.85); font-size:12px; text-transform:uppercase;
  font-family:'JetBrains Mono','Space Grotesk',monospace; padding:0;
}
.grad-stop-alpha-wrap {
  display:flex; align-items:center; gap:2px; flex-shrink:0;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; padding:5px 6px;
}
.grad-stop-alpha {
  width:30px; background:transparent; border:none; outline:none;
  color:rgba(255,255,255,.85); font-size:12px; text-align:right;
  font-family:'JetBrains Mono','Space Grotesk',monospace; padding:0;
}
.grad-stop-alpha-unit { font-size:11px; color:rgba(255,255,255,.4); }
.grad-stop-pos:focus, .grad-stop-hex:focus, .grad-stop-alpha:focus { color:#fff; }
.grad-stop-color:focus-within, .grad-stop-pos:focus, .grad-stop-alpha-wrap:focus-within { border-color:rgba(91,157,255,.5); }
.grad-stop-del {
  width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; color:rgba(255,255,255,.55); cursor:pointer; font-size:15px; line-height:1;
  transition:background .1s, color .1s;
}
.grad-stop-del:hover { background:rgba(255,80,80,.18); color:#ff8080; }
.grad-stop-del:disabled { opacity:.3; cursor:not-allowed; }
.grad-ramp-actions {
  display:flex; gap:4px;
}
.grad-ramp-btn {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; color:rgba(255,255,255,.7); font-size:15px;
  width:26px; height:26px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:background .1s;
}
.grad-ramp-btn:hover { background:rgba(255,255,255,.15); }

/* light mode */
body.light .cp-tab { color:rgba(42,35,32,.5); }
body.light .cp-tab.active { background:rgba(93,78,73,.15); color:var(--text); }
body.light .cp-field-row { background:rgba(93,78,73,.08); }
body.light .cp-field-label { color:rgba(42,35,32,.62); }
body.light .cp-field-input { color:#111; background:rgba(255,255,255,.96); }
body.light .cp-eyedropper-btn { color:rgba(42,35,32,.7); }
body.light .cp-eyedropper-btn:hover { color:var(--text); }
body.light .cp-preview-dot { border-color:rgba(42,35,32,.35); }
body.light .cp-channel-mode { color:rgba(42,35,32,.55); }
body.light .cp-sv-canvas { border-color:rgba(42,35,32,.18); }



/* ── Hue / Saturation visual node UI ── */
.hue-sat-panel {
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; gap:12px;
}
.hue-wheel-wrap {
  display:flex; justify-content:center; align-items:center;
  padding:4px 0 2px;
}
.hue-wheel {
  width:132px; height:132px; border-radius:50%; position:relative; flex-shrink:0;
  background:conic-gradient(from 0deg, #ff004c, #ff8a00, #fff000, #36ff00, #00ffd5, #064bff, #ff00d4, #ff004c);
  box-shadow:0 0 20px rgba(124,58,237,.18), inset 0 0 0 1px rgba(255,255,255,.12);
}
.hue-wheel::before {
  content:''; position:absolute; inset:11px; border-radius:50%;
  background:var(--node-bg); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.hue-wheel-shift-ring {
  position:absolute; inset:20px; border-radius:50%;
  background:conic-gradient(from 0deg, #ff004c, #ff8a00, #fff000, #36ff00, #00ffd5, #064bff, #ff00d4, #ff004c);
  transform:rotate(var(--hue-angle, 0deg));
  box-shadow:0 0 10px rgba(255,255,255,.05);
}
.hue-wheel-shift-ring::before {
  content:''; position:absolute; inset:10px; border-radius:50%;
  background:var(--node-bg); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.hue-wheel-label {
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:8px; font-family:'JetBrains Mono',monospace; letter-spacing:.08em;
  color:rgba(255,255,255,.34); text-transform:uppercase; pointer-events:none;
}
.hue-wheel-label.default { top:-14px; }
.hue-wheel-label.shifted { bottom:-14px; }
.hue-sat-panel .param-row { gap:5px; }
.hue-sat-panel .param-label { font-size:10px; }
.param-slider.hue-slider {
  background:linear-gradient(90deg,#ff004c 0%,#ff8a00 14%,#fff000 28%,#36ff00 42%,#00ffd5 56%,#064bff 70%,#ff00d4 84%,#ff004c 100%);
  height:5px;
}
.param-slider.sat-slider {
  background:linear-gradient(90deg,#777 0%,#ff4b8a 100%);
  height:5px;
}
.param-slider.light-slider {
  background:linear-gradient(90deg,#000 0%,#808080 50%,#fff 100%);
  height:5px;
}
.param-slider.mix-slider {
  background:linear-gradient(90deg,rgba(255,255,255,.12),var(--accent1));
  height:5px;
}
body.light .hue-sat-panel { border-top-color:rgba(124,58,237,.1); }
body.light .hue-wheel::before, body.light .hue-wheel-shift-ring::before { background:rgba(222,218,210,.95); box-shadow:inset 0 0 0 1px rgba(93,78,73,.14); }
body.light .hue-wheel-label { color:rgba(42,35,32,.4); }

/* ── Levels visual node UI ── */
.levels-panel {
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; gap:10px;
}
.levels-hist-wrap {
  height:118px; border-radius:8px; overflow:hidden;
  background:#05050d; border:1px solid rgba(255,255,255,.1);
  position:relative;
}
.levels-hist-canvas {
  width:100%; height:100%; display:block;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
}
.levels-hist-empty {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.35); font-size:10px; font-family:'JetBrains Mono',monospace;
  letter-spacing:.04em; pointer-events:none;
}
.levels-controls-row { display:grid; grid-template-columns:84px 1fr; gap:7px; }
.levels-panel .param-row { gap:5px; }
.levels-panel .param-label { font-size:10px; }
.levels-panel .param-select { height:25px; font-size:10px; padding:3px 7px; }
.levels-panel .param-slider { height:5px; }
.param-slider.levels-black-slider,
.param-slider.levels-white-slider,
.param-slider.levels-out-black-slider,
.param-slider.levels-out-white-slider { background:linear-gradient(90deg,#000 0%,#fff 100%); }
.param-slider.levels-gamma-slider { background:linear-gradient(90deg,#151515 0%,#777 50%,#fff 100%); }
.param-slider.levels-mix-slider { background:linear-gradient(90deg,rgba(255,255,255,.12),var(--accent1)); }
body.light .levels-panel { border-top-color:rgba(124,58,237,.1); }
body.light .levels-hist-wrap { background:#eee9e0; border-color:rgba(93,78,73,.16); }
body.light .levels-hist-empty { color:rgba(42,35,32,.38); }

/* ── Annotation Note Node ── */
.note-node {
  position:absolute; min-width:180px; min-height:90px;
  background:rgba(40,34,10,.55);
  border:1.5px solid rgba(251,191,36,.28);
  border-radius:10px;
  cursor:grab; box-shadow:0 4px 20px rgba(0,0,0,.35);
  transition:border-color .2s, box-shadow .2s;
  overflow:hidden;
}
.note-node:hover   { border-color:rgba(251,191,36,.55); box-shadow:0 0 14px rgba(251,191,36,.12), 0 4px 20px rgba(0,0,0,.4); }
.note-node.selected{ border-color:rgba(251,191,36,.8);  box-shadow:0 0 18px rgba(251,191,36,.22), 0 4px 20px rgba(0,0,0,.4); }
.note-node.dragging{ cursor:grabbing; z-index:100; }

.note-header {
  display:flex; align-items:center; gap:6px;
  padding:7px 8px 6px 10px;
  border-bottom:1px solid rgba(251,191,36,.12);
  background:rgba(251,191,36,.06);
}
.note-dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:rgba(251,191,36,.6);
}
.note-title {
  font-size:11px; font-weight:500; letter-spacing:.02em;
  color:rgba(251,191,36,.75); background:transparent; border:none;
  outline:none; width:100%; cursor:inherit;
  font-family:'Space Grotesk',sans-serif;
}
.note-title:focus { cursor:text; color:rgba(251,191,36,.95); }
.note-delete-btn {
  flex-shrink:0; background:none; border:none; color:rgba(251,191,36,.3);
  cursor:pointer; font-size:13px; line-height:1; padding:2px 3px;
  border-radius:4px; transition:color .15s; opacity:0;
  display:flex; align-items:center; justify-content:center;
}
.note-node:hover .note-delete-btn { opacity:1; color:rgba(251,191,36,.5); }
.note-delete-btn:hover { color:rgba(239,68,68,.8) !important; }

.note-body { padding:8px 10px 6px; }
.note-text {
  width:100%; min-height:50px; resize:none; overflow:hidden;
  background:transparent; border:none; outline:none;
  font-size:11.5px; font-family:'JetBrains Mono',monospace;
  color:rgba(255,238,160,.7); line-height:1.65; letter-spacing:.01em;
  cursor:inherit; display:block;
}
.note-text::placeholder { color:rgba(251,191,36,.22); font-style:italic; }



.note-resize-handle {
  position:absolute; bottom:0; right:0;
  width:14px; height:14px; cursor:se-resize; opacity:0;
  transition:opacity .15s;
}
.note-node:hover .note-resize-handle { opacity:1; }
.note-resize-handle svg { position:absolute; bottom:2px; right:2px; }

/* dashed edges from/to note nodes */
.edge-path.note-edge {
  stroke-dasharray: 5 4;
  opacity:.55;
  filter:none !important;
}

/* light mode note */
body.light .note-node {
  background:rgba(255,248,220,.75);
  border-color:rgba(160,120,20,.28);
  box-shadow:0 4px 16px rgba(93,78,73,.1);
}
body.light .note-header { background:rgba(200,150,10,.06); border-bottom-color:rgba(160,120,20,.12); }
body.light .note-dot { background:rgba(160,120,20,.55); }
body.light .note-node:hover { border-color:rgba(160,120,20,.5); }
body.light .note-node.selected { border-color:rgba(160,120,20,.75); }
body.light .note-title { color:rgba(100,70,5,.8); }
body.light .note-title:focus { color:rgba(80,55,5,.95); }
body.light .note-text  { color:rgba(70,50,5,.72); }
body.light .note-text::placeholder { color:rgba(160,120,20,.28); }
body.light .note-delete-btn { color:rgba(100,70,5,.3); }
body.light .note-node:hover .note-delete-btn { color:rgba(100,70,5,.5); }

/* ── Help modal ── */
#help-modal {
  position:fixed; inset:0; z-index:8000; display:none;
  background:rgba(4,4,12,.82); backdrop-filter:blur(10px);
  align-items:center; justify-content:center;
}
#help-modal.open { display:flex; }
#help-inner {
  background:#0d0d1e; border:1px solid rgba(255,255,255,.1);
  border-radius:18px; padding:32px 36px 28px;
  width:min(680px,90vw); max-height:85vh; overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
  scrollbar-width:thin; scrollbar-color:rgba(124,58,237,.3) transparent;
}
#help-inner::-webkit-scrollbar { width:4px; }
#help-inner::-webkit-scrollbar-thumb { background:rgba(124,58,237,.3); border-radius:2px; }
.help-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;
}
.help-title { font-size:16px; font-weight:600; letter-spacing:.02em; }
.help-close {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:7px; color:var(--text-dim); cursor:pointer;
  font-size:11px; padding:5px 12px; font-family:'Space Grotesk',sans-serif;
  transition:background .15s, color .15s; letter-spacing:.03em;
}
.help-close:hover { background:rgba(239,68,68,.18); border-color:var(--danger); color:var(--danger); }
.help-section { margin-bottom:24px; }
.help-section-title {
  font-size:9px; font-family:'JetBrains Mono',monospace; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent1); opacity:.8;
  margin-bottom:10px; padding-bottom:6px;
  border-bottom:1px solid rgba(124,58,237,.2);
}
.help-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0; border-bottom:1px solid rgba(255,255,255,.04);
  font-size:12.5px;
}
.help-row:last-child { border-bottom:none; }
.help-desc { color:rgba(255,255,255,.65); }
.help-keys { display:flex; gap:4px; flex-shrink:0; margin-left:16px; }
.kbd {
  font-family:'JetBrains Mono',monospace; font-size:10px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  border-radius:5px; padding:2px 7px; color:var(--text); white-space:nowrap;
  box-shadow:0 2px 0 rgba(0,0,0,.3);
}
.help-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:0 32px;
}
body.light #help-inner { background:rgba(218,214,206,.98); border-color:rgba(129,117,110,.2); }
body.light .kbd { background:rgba(234,231,220,.9); border-color:rgba(129,117,110,.25); color:var(--text); }
body.light .help-section-title { color:var(--accent1); opacity:.9; }
body.light .help-row { border-bottom-color:rgba(129,117,110,.1); }
body.light .help-desc { color:rgba(42,35,32,.65); }

/* ── Documentation modal ── */
#docs-modal {
  position:fixed; inset:0; z-index:8050; display:none;
  background:rgba(4,4,12,.82); backdrop-filter:blur(10px);
  align-items:center; justify-content:center;
  overscroll-behavior:contain;
}
#docs-modal.open { display:flex; }
#docs-inner {
  background:#0d0d1e; border:1px solid rgba(255,255,255,.1);
  border-radius:18px; width:min(980px,92vw); height:min(760px,88vh);
  max-height:88vh; min-height:0;
  box-shadow:0 24px 80px rgba(0,0,0,.72);
  display:grid; grid-template-columns:210px minmax(0,1fr); overflow:hidden;
}
.docs-sidebar {
  background:rgba(255,255,255,.025); border-right:1px solid rgba(255,255,255,.07);
  padding:22px 16px; overflow-y:auto; min-height:0; height:100%;
  overscroll-behavior:contain;
}
.docs-logo {
  font-size:15px; font-weight:700; letter-spacing:.04em; margin-bottom:5px;
}
.docs-version {
  font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-dim);
  margin-bottom:18px; word-break:break-word;
}
.docs-nav { display:flex; flex-direction:column; gap:4px; }
.docs-nav a {
  color:rgba(255,255,255,.62); text-decoration:none; font-size:12px;
  padding:7px 9px; border-radius:7px; transition:background .12s,color .12s;
}
.docs-nav a:hover { background:rgba(124,58,237,.18); color:#fff; }
.docs-content {
  overflow-y:auto; overflow-x:hidden; padding:26px 32px 30px;
  min-height:0; height:100%; overscroll-behavior:contain; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:rgba(124,58,237,.32) transparent;
}
.docs-content::-webkit-scrollbar, .docs-sidebar::-webkit-scrollbar { width:5px; }
.docs-content::-webkit-scrollbar-thumb, .docs-sidebar::-webkit-scrollbar-thumb { background:rgba(124,58,237,.32); border-radius:3px; }
.docs-header {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.08);
}
.docs-title { font-size:20px; font-weight:700; letter-spacing:.01em; }
.docs-close {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:7px; color:var(--text-dim); cursor:pointer;
  font-size:11px; padding:5px 12px; font-family:'Space Grotesk',sans-serif;
  transition:background .15s, color .15s; letter-spacing:.03em; flex-shrink:0;
}
.docs-close:hover { background:rgba(239,68,68,.18); border-color:var(--danger); color:var(--danger); }
.docs-section { margin:0 0 28px; scroll-margin-top:18px; }
.docs-section h3 {
  font-size:14px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent2); margin:0 0 10px;
}
.docs-section h4 {
  font-size:13px; color:var(--text); margin:18px 0 7px;
}
.docs-section p, .docs-section li {
  font-size:13px; line-height:1.65; color:rgba(255,255,255,.68);
}
.docs-section p { margin:0 0 10px; }
.docs-section ul, .docs-section ol { padding-left:19px; margin:8px 0 12px; }
.docs-callout {
  border:1px solid rgba(124,58,237,.22); background:rgba(124,58,237,.08);
  border-radius:12px; padding:12px 14px; margin:12px 0;
}
.docs-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.docs-card {
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035);
  border-radius:12px; padding:12px 13px;
}
.docs-card strong { display:block; font-size:12px; color:var(--text); margin-bottom:4px; }
.docs-card span { display:block; font-size:12px; color:rgba(255,255,255,.58); line-height:1.45; }
.docs-kbd-row { display:grid; grid-template-columns:145px 1fr; gap:12px; align-items:start; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.docs-kbd-row:last-child { border-bottom:none; }
.docs-code {
  font-family:'JetBrains Mono',monospace; font-size:11px; color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:9px 10px; overflow-x:auto;
}
body.light #docs-inner { background:rgba(218,214,206,.98); border-color:rgba(129,117,110,.2); box-shadow:0 24px 70px rgba(93,78,73,.18); }
body.light .docs-sidebar { background:rgba(255,255,255,.25); border-right-color:rgba(129,117,110,.14); }
body.light .docs-nav a { color:rgba(42,35,32,.62); }
body.light .docs-nav a:hover { background:rgba(93,78,73,.1); color:var(--text); }
body.light .docs-header { border-bottom-color:rgba(129,117,110,.14); }
body.light .docs-close { background:rgba(93,78,73,.07); border-color:rgba(129,117,110,.2); color:#81756E; }
body.light .docs-section p, body.light .docs-section li { color:rgba(42,35,32,.68); }
body.light .docs-card { background:rgba(255,255,255,.34); border-color:rgba(129,117,110,.14); }
body.light .docs-card span { color:rgba(42,35,32,.6); }
body.light .docs-callout { background:rgba(93,78,73,.07); border-color:rgba(93,78,73,.16); }
body.light .docs-code { background:rgba(255,255,255,.45); border-color:rgba(129,117,110,.16); color:rgba(42,35,32,.75); }
body.light .docs-kbd-row { border-bottom-color:rgba(129,117,110,.1); }
@media (max-width:760px){
  #docs-inner{ grid-template-columns:1fr; height:min(760px,92vh); }
  .docs-sidebar{ display:none; }
  .docs-content{ padding:22px 20px 26px; }
  .docs-grid{ grid-template-columns:1fr; }
  .docs-kbd-row{ grid-template-columns:1fr; gap:4px; }
}


/* -- Save project dialog -- */
#save-modal {
  position:fixed; inset:0; z-index:8060; display:none;
  background:rgba(4,4,12,.82); backdrop-filter:blur(10px);
  align-items:center; justify-content:center;
  overscroll-behavior:contain;
}
#save-modal.open { display:flex; }
#save-inner {
  width:min(560px,92vw);
  background:#0d0d1e; border:1px solid rgba(255,255,255,.1);
  border-radius:18px; padding:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.72);
  display:flex; flex-direction:column; gap:14px;
}
.save-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.save-heading { display:flex; flex-direction:column; gap:3px; }
.save-eyebrow {
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent2); opacity:.85;
}
.save-title { font-size:18px; font-weight:700; letter-spacing:.01em; color:var(--text); }
.save-close {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:7px; color:var(--text-dim); cursor:pointer;
  font-size:11px; padding:5px 12px; font-family:'Space Grotesk',sans-serif;
  transition:background .15s, color .15s, border-color .15s; letter-spacing:.03em;
}
.save-close:hover { background:rgba(239,68,68,.18); border-color:var(--danger); color:var(--danger); }
.save-summary {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;
  padding:10px; border-radius:12px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.075);
}
.save-stat {
  min-width:0; padding:8px 7px; border-radius:9px;
  background:rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.055);
}
.save-stat-num { display:block; font-family:'JetBrains Mono',monospace; font-size:15px; color:#fff; line-height:1.1; }
.save-stat-label { display:block; margin-top:4px; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.06em; color:var(--text-dim); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.save-row { display:flex; flex-direction:column; gap:6px; }
.save-label {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase;
}
.save-field {
  width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:9px; color:var(--text); font-family:'Space Grotesk',sans-serif;
  font-size:12px; padding:8px 10px; outline:none;
}
.save-field:focus { border-color:var(--accent1); box-shadow:0 0 0 1px rgba(124,58,237,.28); }
.save-local-section { display:flex; flex-direction:column; gap:12px; }
.save-options-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.save-option {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  min-height:50px; padding:12px 13px; border:1px solid rgba(255,255,255,.075);
  border-radius:11px; background:rgba(255,255,255,.03);
}
.save-option-text { display:flex; align-items:center; gap:7px; min-width:0; }
.save-option-title { font-size:12px; color:var(--text); line-height:1.15; }
.save-option-hint { font-size:10px; color:var(--text-dim); line-height:1.35; }
.save-option input { width:16px; height:16px; accent-color:var(--accent1); flex-shrink:0; }
.save-info-wrap { position:relative; display:inline-flex; align-items:center; flex-shrink:0; }
.save-info-btn {
  width:18px !important; min-width:18px !important; height:18px !important; min-height:18px !important;
  padding:0 !important; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045); color:var(--text-dim);
  font-family:'Material Symbols Outlined'; font-size:15px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:help;
}
.save-info-symbol {
  font-family:'Material Symbols Outlined'; font-weight:400; font-style:normal;
  font-size:15px; line-height:1; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;
}
.save-info-btn:hover, .save-info-btn:focus-visible { color:#fff; border-color:rgba(124,58,237,.7); background:rgba(124,58,237,.28); outline:none; }
.save-info-popover {
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(4px);
  width:230px; padding:9px 10px; border-radius:8px;
  background:rgba(15,15,32,.98); border:1px solid rgba(255,255,255,.12);
  color:var(--text-dim); font-size:10.5px; line-height:1.35; box-shadow:0 12px 34px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .12s, transform .12s; z-index:4;
}
.save-info-popover::after {
  content:''; position:absolute; left:50%; bottom:-5px; width:9px; height:9px;
  background:rgba(15,15,32,.98); border-right:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12);
  transform:translateX(-50%) rotate(45deg);
}
.save-info-wrap:hover .save-info-popover,
.save-info-btn:focus-visible + .save-info-popover { opacity:1; transform:translateX(-50%) translateY(0); }
.save-status { min-height:0; font-size:10px; font-family:'JetBrains Mono',monospace; color:var(--text-dim); line-height:1.4; }
.save-status:empty { display:none; }
.save-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:2px; }
.save-btn {
  border:none; border-radius:9px; cursor:pointer; padding:8px 13px;
  font-size:12px; font-family:'Space Grotesk',sans-serif; font-weight:600;
  color:rgba(255,255,255,.76); background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1); transition:background .15s, border-color .15s, color .15s;
}
.save-btn:hover { background:rgba(124,58,237,.22); border-color:var(--accent1); color:#fff; }
.save-btn.primary { background:rgba(124,58,237,.38); border-color:rgba(124,58,237,.75); color:#fff; box-shadow:0 0 14px rgba(124,58,237,.22); }
.save-btn:disabled { opacity:.45; cursor:default; }
/* Save dialog — destination toggle */
.save-dest-toggle {
  display:flex; gap:6px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  padding:5px; width:fit-content; align-self:flex-start; margin-top:2px; margin-bottom:2px;
}
.save-dest-btn {
  background:none; border:1px solid transparent; border-radius:8px;
  padding:8px 20px; font-family:'Space Grotesk',sans-serif;
  font-size:12px; font-weight:600; color:var(--text-dim);
  cursor:pointer; transition:background .15s, color .15s;
  display:flex; align-items:center; gap:6px;
}
.save-dest-btn.active { background:rgba(124,58,237,.34); border-color:rgba(124,58,237,.48); color:#fff; }
.save-dest-btn:not(.active):hover { color:var(--text); background:rgba(255,255,255,.04); }
/* Cloud section inside save dialog */
.save-cloud-section { display:flex; flex-direction:column; gap:10px; }
.save-cloud-list {
  max-height:188px; overflow-y:auto;
  display:flex; flex-direction:column; gap:5px;
  scrollbar-width:thin;
}
.save-cloud-item {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:8px; padding:9px 11px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  transition:background .12s;
}
.save-cloud-item:hover { background:rgba(255,255,255,.07); }
.save-cloud-item-info { flex:1; min-width:0; }
.save-cloud-item-name {
  font-size:12px; font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.save-cloud-item-date { font-size:10px; color:var(--text-dim); margin-top:2px; font-family:'JetBrains Mono',monospace; }
.save-cloud-item-actions { display:flex; gap:4px; flex-shrink:0; }
.save-cloud-act-btn {
  background:none; border:1px solid rgba(255,255,255,.1); border-radius:5px;
  padding:3px 8px; font-size:10px; font-weight:600; color:var(--text-dim);
  cursor:pointer; font-family:'Space Grotesk',sans-serif;
  transition:background .12s, color .12s;
}
.save-cloud-act-btn:hover { background:rgba(255,255,255,.08); color:var(--text); }
.save-cloud-act-btn.open { color:var(--accent1); border-color:rgba(120,68,233,.3); }
.save-cloud-act-btn.open:hover { background:rgba(120,68,233,.12); border-color:var(--accent1); }
.save-cloud-act-btn.del { color:var(--danger); border-color:rgba(239,68,68,.2); }
.save-cloud-act-btn.del:hover { background:rgba(239,68,68,.1); border-color:var(--danger); }
.save-cloud-empty { font-size:12px; color:var(--text-dim); padding:16px 0; text-align:center; line-height:1.6; }
body.light #save-inner { background:rgba(218,214,206,.98); border-color:rgba(129,117,110,.2); box-shadow:0 24px 70px rgba(93,78,73,.18); }
body.light .save-summary { background:rgba(255,255,255,.32); border-color:rgba(129,117,110,.14); }
body.light .save-stat { background:rgba(255,255,255,.38); border-color:rgba(129,117,110,.12); }
body.light .save-stat-num { color:var(--text); }
body.light .save-field { background:rgba(255,255,255,.65); border-color:rgba(129,117,110,.2); color:var(--text); }
body.light .save-option { background:rgba(255,255,255,.34); border-color:rgba(129,117,110,.14); }
body.light .save-info-btn { background:rgba(255,255,255,.42); border-color:rgba(129,117,110,.22); color:rgba(93,78,73,.62); }
body.light .save-info-popover { background:rgba(245,242,235,.98); border-color:rgba(129,117,110,.18); color:rgba(42,35,32,.72); box-shadow:0 12px 28px rgba(93,78,73,.16); }
body.light .save-info-popover::after { background:rgba(245,242,235,.98); border-color:rgba(129,117,110,.18); }
body.light .save-close, body.light .save-btn { color:var(--text); background:rgba(255,255,255,.4); border-color:rgba(129,117,110,.2); }
@media (max-width:560px){ .save-summary{ grid-template-columns:repeat(2,minmax(0,1fr)); } .save-options-grid{ grid-template-columns:1fr; } .save-actions{ flex-direction:column-reverse; } .save-btn{ width:100%; } }



/* -- Noodlz custom system dialog replacement -- */
#noodlz-dialog-modal {
  position:fixed; inset:0; z-index:9000; display:none;
  align-items:center; justify-content:center;
  background:rgba(4,4,12,.72); backdrop-filter:blur(10px);
  overscroll-behavior:contain;
}
#noodlz-dialog-modal.open { display:flex; }
.noodlz-dialog {
  width:min(460px, calc(100vw - 34px));
  background:rgba(13,13,30,.98);
  border:1px solid rgba(255,255,255,.12);
  border-top-color:rgba(255,255,255,.18);
  border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.72), 0 0 0 1px rgba(124,58,237,.08);
  padding:18px;
  transform:translateY(8px) scale(.98);
  opacity:0;
  transition:transform .16s cubic-bezier(.22,.61,.36,1), opacity .16s ease;
}
#noodlz-dialog-modal.open .noodlz-dialog { transform:translateY(0) scale(1); opacity:1; }
.noodlz-dialog-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; }
.noodlz-dialog-icon {
  width:28px; height:28px; border-radius:10px; flex:0 0 28px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,182,212,.14); color:#67e8f9;
  border:1px solid rgba(6,182,212,.24);
  box-shadow:0 0 14px rgba(6,182,212,.16);
}
.noodlz-dialog-icon svg { width:15px; height:15px; stroke:currentColor; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.noodlz-dialog.danger .noodlz-dialog-icon { background:rgba(239,68,68,.14); color:#fca5a5; border-color:rgba(239,68,68,.26); box-shadow:0 0 14px rgba(239,68,68,.14); }
.noodlz-dialog-main { flex:1; min-width:0; }
.noodlz-dialog-eyebrow {
  display:block; margin-bottom:3px;
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em;
  color:var(--accent2); text-transform:uppercase; opacity:.8;
}
.noodlz-dialog-title { display:block; color:var(--text); font-size:16px; font-weight:700; letter-spacing:.01em; }
.noodlz-dialog-message {
  color:rgba(226,226,240,.72); font-size:12.5px; line-height:1.55;
  white-space:pre-wrap; margin:0 0 14px 40px;
}
.noodlz-dialog-field {
  width:calc(100% - 40px); margin:0 0 14px 40px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:10px; color:var(--text); font-family:'Space Grotesk',sans-serif;
  font-size:13px; padding:9px 11px; outline:none;
}
.noodlz-dialog-field:focus { border-color:var(--accent1); box-shadow:0 0 0 1px rgba(124,58,237,.28); }
.noodlz-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
.noodlz-dialog-btn {
  border:none; border-radius:999px; cursor:pointer;
  min-width:92px; padding:9px 15px;
  font-family:'Space Grotesk',sans-serif; font-size:12.5px; font-weight:700;
  color:rgba(255,255,255,.78); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  transition:background .15s, color .15s, border-color .15s, transform .12s;
}
.noodlz-dialog-btn:hover { background:rgba(124,58,237,.2); border-color:rgba(124,58,237,.45); color:#fff; transform:translateY(-1px); }
.noodlz-dialog-btn.primary { background:#67e8f9; border-color:#67e8f9; color:#06131a; box-shadow:0 0 18px rgba(103,232,249,.18); }
.noodlz-dialog.danger .noodlz-dialog-btn.primary { background:rgba(239,68,68,.9); border-color:rgba(239,68,68,.9); color:#fff; box-shadow:0 0 18px rgba(239,68,68,.22); }
.noodlz-dialog-btn:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; }
body.light #noodlz-dialog-modal { background:rgba(164,155,147,.34); }
body.light .noodlz-dialog {
  background:rgba(218,214,206,.98); border-color:rgba(129,117,110,.22); border-top-color:rgba(245,242,238,.88);
  box-shadow:0 24px 70px rgba(93,78,73,.2);
}
body.light .noodlz-dialog-message { color:rgba(42,35,32,.72); }
body.light .noodlz-dialog-field { background:rgba(255,255,255,.66); border-color:rgba(129,117,110,.22); color:var(--text); }
body.light .noodlz-dialog-btn { background:rgba(255,255,255,.44); border-color:rgba(129,117,110,.22); color:var(--text); }
body.light .noodlz-dialog-btn.primary { background:#5D4E49; border-color:#5D4E49; color:#fff; box-shadow:none; }
@media (max-width:520px){ .noodlz-dialog-message,.noodlz-dialog-field{ margin-left:0; width:100%; } .noodlz-dialog-actions{ flex-direction:column-reverse; } .noodlz-dialog-btn{ width:100%; } }


/* ── v1.1.82C Timeline / Dope Sheet UI + v1.1.82B Draggable Overlays ── */
#global-transport {
  --gt-lane-label-w:168px;
  position:fixed; left:50%; bottom:88px; transform:translateX(-50%);
  z-index:4300; width:min(980px, calc(100vw - 32px)); min-width:min(620px, calc(100vw - 32px));
  background:rgba(10,10,22,.94); border:1px solid rgba(255,255,255,.1);
  border-radius:18px; box-shadow:0 14px 50px rgba(0,0,0,.56), 0 0 0 1px rgba(124,58,237,.08);
  backdrop-filter:blur(18px); color:var(--text); font-family:'Space Grotesk',sans-serif;
  display:grid;
  grid-template-columns:auto auto minmax(260px,1fr) auto auto;
  grid-template-areas:
    "drag controls time key sheet"
    "meta meta meta meta meta"
    "timeline timeline timeline timeline timeline";
  gap:8px 10px; align-items:center; padding:9px 12px;
}
#global-transport.overlay-positioned,
#toolbar.overlay-positioned { right:auto; bottom:auto; transform:none; }
#global-transport.overlay-dragging,
#toolbar.overlay-dragging { z-index:4700; user-select:none; }
.overlay-drag-handle {
  flex:0 0 auto; width:26px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:9px; background:rgba(255,255,255,.045); color:rgba(255,255,255,.42);
  cursor:grab; touch-action:none; transition:background .14s, color .14s, transform .14s;
}
.overlay-drag-handle:hover { background:rgba(124,58,237,.22); color:#fff; transform:translateY(-1px); }
.overlay-drag-handle:active { cursor:grabbing; transform:translateY(0); }
.overlay-drag-handle svg { width:13px; height:17px; display:block; opacity:.95; }
.gt-drag-handle { grid-area:drag; }
.gt-controls { grid-area:controls; }
.gt-time { grid-area:time; }
#gt-key { grid-area:key; }
#gt-toggle-sheet { grid-area:sheet; }
.tb-drag-handle { margin-right:1px; }
.gt-controls { display:flex; align-items:center; gap:5px; }
.gt-btn {
  height:30px; min-width:32px; border:none; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.78); font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  transition:background .14s, color .14s, transform .14s, box-shadow .14s;
}
.gt-btn:hover { background:rgba(124,58,237,.28); color:#fff; transform:translateY(-1px); }
.gt-btn.primary { background:rgba(124,58,237,.52); color:#fff; box-shadow:0 0 16px rgba(124,58,237,.18); }
.gt-btn.compact { min-width:28px; padding:0 8px; }
.gt-btn.gt-record-btn { min-width:34px; width:34px; background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.26); }
.gt-record-dot { width:15px; height:15px; border-radius:50%; background:#ef4444; box-shadow:0 0 14px rgba(239,68,68,.55), inset 0 0 0 2px rgba(255,255,255,.18); }
.gt-record-btn:hover { background:rgba(239,68,68,.26); box-shadow:0 0 18px rgba(239,68,68,.20); }
.gt-time { display:flex; align-items:center; gap:8px; min-width:0; }
.gt-readout { font-family:'JetBrains Mono',monospace; font-size:11px; color:rgba(255,255,255,.72); min-width:86px; text-align:right; }
.gt-scrub { flex:1; min-width:110px; accent-color:var(--accent1); }
.gt-meta { grid-area:meta; display:flex; align-items:center; gap:7px; justify-content:flex-start; position:relative; min-width:0; }
.gt-field { display:flex; align-items:center; gap:4px; font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-dim); }
.gt-input, .gt-select {
  height:28px; max-width:74px; border-radius:8px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.055); color:var(--text); padding:0 7px; outline:none;
  font-family:'JetBrains Mono',monospace; font-size:10px;
}
.gt-select { max-width:86px; }
.gt-menu-wrap { position:relative; }
.gt-more-menu {
  position:absolute; top:36px; right:0; z-index:4780; min-width:190px; display:none; padding:6px;
  border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(10,10,22,.98);
  box-shadow:0 12px 38px rgba(0,0,0,.58); backdrop-filter:blur(16px);
}
.gt-more-menu.open { display:block; }
.gt-menu-item {
  width:100%; border:0; border-radius:8px; background:transparent; color:rgba(255,255,255,.78);
  font:600 12px 'Space Grotesk',sans-serif; padding:8px 10px; text-align:left; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.gt-menu-item:hover { background:rgba(124,58,237,.20); color:#fff; }
.gt-menu-item.is-busy { background:rgba(59,130,246,.12); color:#bfdbfe; }
.gt-menu-item[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.gt-menu-item.danger { color:#fca5a5; }
.gt-menu-item.danger:hover { background:rgba(239,68,68,.16); color:#fff; }
.gt-menu-sep { height:1px; background:rgba(255,255,255,.07); margin:4px 3px; }
.gt-timeline { grid-area:timeline; border-top:1px solid rgba(255,255,255,.07); padding-top:9px; display:none; position:relative; min-height:166px; }
#global-transport.open .gt-timeline { display:block; }
.gt-timeline-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.gt-property-panel {
  flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:12px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.035);
}
.gt-property-eyebrow { font:700 9px 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:rgba(167,139,250,.78); flex:0 0 auto; }
.gt-selected-node { color:rgba(255,255,255,.88); font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gt-status { margin-left:auto; color:var(--text-dim); font:500 10px 'JetBrains Mono',monospace; text-align:right; max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .14s; }
.gt-status.info, .gt-status.loading { color:#bfdbfe; }
.gt-status.success { color:#bbf7d0; }
.gt-status.warning { color:#fde68a; }
.gt-status.error { color:#fecaca; }
.gt-timeline-actions { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.gt-mini-btn {
  height:28px; border:1px solid rgba(255,255,255,.09); border-radius:9px; background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.72); padding:0 9px; cursor:pointer; font:700 10px 'Space Grotesk',sans-serif;
}
.gt-mini-btn:hover { background:rgba(124,58,237,.22); color:#fff; }
.gt-timescale {
  position:relative; height:26px; margin-left:calc(var(--gt-lane-label-w) + 10px); margin-right:30px; border-radius:10px 10px 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06); border-bottom:none; overflow:hidden;
}
.gt-tick { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.10); }
.gt-tick.major { background:rgba(255,255,255,.18); }
.gt-tick-label { position:absolute; top:6px; transform:translateX(-50%); color:rgba(255,255,255,.48); font:500 9px 'JetBrains Mono',monospace; white-space:nowrap; pointer-events:none; }
.gt-duration-label { position:absolute; right:8px; top:6px; color:rgba(103,232,249,.70); font:700 9px 'JetBrains Mono',monospace; }
.gt-preview-range { display:grid; grid-template-columns:42px 1fr 42px; gap:8px; align-items:center; margin:0 30px 9px calc(var(--gt-lane-label-w) + 10px); }
.gt-range-time { font:700 10px 'JetBrains Mono',monospace; color:rgba(255,255,255,.62); text-align:center; }
.gt-range-track { position:relative; height:24px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); }
.gt-range-fill { position:absolute; top:6px; height:10px; border-radius:999px; background:linear-gradient(90deg, rgba(124,58,237,.48), rgba(6,182,212,.52)); box-shadow:0 0 16px rgba(124,58,237,.22); }
.gt-range-handle { position:absolute; top:50%; width:18px; height:24px; border:0; border-radius:8px; transform:translate(-50%,-50%); cursor:ew-resize; background:rgba(255,255,255,.15); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.12) inset; }
.gt-range-handle::before { content:'|||'; font:800 8px 'JetBrains Mono',monospace; letter-spacing:-1px; opacity:.8; }
.gt-dopesheet-wrap { position:relative; min-height:96px; height:var(--gt-sheet-h, 178px); overflow:hidden; border-radius:14px; border:1px solid rgba(255,255,255,.075); background:rgba(255,255,255,.025); }
.gt-dopesheet { height:100%; overflow:auto; padding:6px 8px; scrollbar-width:thin; scrollbar-color:rgba(124,58,237,.35) transparent; }
.gt-dopesheet::-webkit-scrollbar { width:7px; height:7px; }
.gt-dopesheet::-webkit-scrollbar-thumb { background:rgba(124,58,237,.35); border-radius:9px; }
.gt-track { position:relative; min-height:30px; display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,.045); border-radius:9px; }
.gt-track:hover { background:rgba(255,255,255,.025); }
.gt-track.selected-lane { background:rgba(124,58,237,.12); box-shadow:inset 0 0 0 1px rgba(124,58,237,.20); }
.gt-track:last-child { border-bottom:none; }
.gt-track-name { width:var(--gt-lane-label-w); flex:0 0 var(--gt-lane-label-w); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'JetBrains Mono',monospace; font-size:10px; color:rgba(255,255,255,.56); padding:0 10px 0 8px; cursor:pointer; display:flex; align-items:center; align-self:stretch; background:rgba(9,9,20,.55); border-right:1px solid rgba(255,255,255,.07); }
.gt-track-name:hover { color:#fff; background:rgba(255,255,255,.04); }
/* v1.1.84A: label column reads as its own panel (like the curve legend), and
   the selected lane gets the same purple pill treatment. */
.gt-track.selected-lane .gt-track-name { color:#fff; background:rgba(124,58,237,.20); box-shadow:inset -1px 0 0 rgba(124,58,237,.35); border-radius:0 8px 8px 0; }
body.light .gt-track-name { background:rgba(93,78,73,.08); border-right-color:rgba(93,78,73,.16); }
body.light .gt-track.selected-lane .gt-track-name { background:rgba(124,58,237,.16); }
.gt-track-line { position:relative; flex:1; height:24px; margin-left:8px; margin-right:22px; border-radius:8px; background:linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 100%); background-size:8.333% 100%; overflow:visible; }
.gt-track-line::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(255,255,255,.11); }
.gt-key {
  position:absolute; top:50%; width:12px; height:12px; transform:translate(-50%,-50%) rotate(45deg); border-radius:3px;
  background:#8b5cf6; border:1px solid rgba(255,255,255,.30); box-shadow:0 0 10px rgba(124,58,237,.54);
  cursor:grab; transition:filter .12s, transform .12s, background .12s, box-shadow .12s;
}
.gt-key:hover { filter:brightness(1.22); transform:translate(-50%,-50%) rotate(45deg) scale(1.18); background:#a78bfa; }
.gt-key.selected { background:#ef4444; box-shadow:0 0 14px rgba(239,68,68,.58), 0 0 0 3px rgba(239,68,68,.12); }
.gt-key.dragging { cursor:grabbing; background:#f97316; }
/* v1.1.83Q/83R: curve (spline) editor view */
/* v1.1.83S: the curve view fills the dopesheet box via absolute positioning --
   percentage heights inside the scrolling #gt-dopesheet collapsed under the
   83H-83M measured-layout modes, squashing the plot to a strip. */
#gt-dopesheet.curve-mode { position:relative; overflow:hidden; padding:0; }
.gt-curve-view { display:flex; position:absolute; inset:0; }
.gt-curve-legend { width:var(--gt-lane-label-w, 168px); flex:0 0 auto; overflow:auto; padding:8px 6px 8px 8px; display:flex; flex-direction:column; gap:3px; }
.gt-curve-legend-head { display:flex; justify-content:flex-end; padding:0 2px 3px; }
.gt-curve-legend-item { font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--text-dim); cursor:pointer; padding:3px 6px; border-radius:7px; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-curve-legend-item:hover { background:rgba(255,255,255,.05); color:#fff; }
.gt-curve-legend-item.selected-lane { background:rgba(124,58,237,.18); color:#fff; }
.gt-curve-swatch { width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.gt-curve-area { flex:1; position:relative; margin:6px 18px 6px 10px; border-radius:8px; background:rgba(255,255,255,.02); cursor:default; }
.gt-curve-area.panning { cursor:grabbing; }
.gt-curve-area svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.gt-grid-bg { fill:rgba(255,255,255,.015); stroke:rgba(255,255,255,.09); }
.gt-grid-line { stroke:rgba(255,255,255,.07); stroke-width:1; pointer-events:none; }
.gt-grid-line.zero { stroke:rgba(255,255,255,.26); }
.gt-grid-label { font-family:'JetBrains Mono',monospace; font-size:8.5px; fill:rgba(255,255,255,.42); pointer-events:none; }
.gt-grid-label.x { text-anchor:middle; }
.gt-grid-label.y { text-anchor:end; }
.gt-curve-path { fill:none; stroke-width:1.7; opacity:.9; pointer-events:none; }
.gt-tan-line { stroke:rgba(251,191,36,.5); stroke-width:1; pointer-events:none; }
rect.gt-tan { fill:rgba(13,13,30,.9); stroke:#fbbf24; stroke-width:1.2; cursor:grab; }
rect.gt-tan.bezier { fill:#fbbf24; }
rect.gt-tan:hover { stroke:#fde68a; filter:brightness(1.25); }
circle.gt-key { transform:none; border:0; cursor:grab; stroke:rgba(255,255,255,.35); stroke-width:1; }
circle.gt-key:hover { transform:none; filter:brightness(1.3); }
circle.gt-key.selected { fill:#ef4444 !important; }
circle.gt-key.dragging { cursor:grabbing; fill:#f97316 !important; }
#gt-curve-toggle.active { background:rgba(124,58,237,.32); color:#fff; box-shadow:0 0 0 1px rgba(124,58,237,.5) inset; }
body.light .gt-curve-area { background:rgba(93,78,73,.05); }
body.light .gt-grid-bg { fill:rgba(93,78,73,.03); stroke:rgba(93,78,73,.18); }
body.light .gt-grid-line { stroke:rgba(93,78,73,.12); }
body.light .gt-grid-line.zero { stroke:rgba(93,78,73,.4); }
body.light .gt-grid-label { fill:rgba(93,78,73,.65); }
body.light rect.gt-tan { fill:rgba(255,255,255,.9); }
body.light rect.gt-tan.bezier { fill:#f59e0b; }
.gt-playhead { position:absolute; top:0; bottom:0; width:2px; background:#ef4444; box-shadow:0 0 12px rgba(239,68,68,.56); z-index:8; pointer-events:none; left:calc(var(--gt-lane-label-w) + 10px); }
.gt-playhead-handle { position:absolute; top:-2px; left:50%; width:18px; height:18px; transform:translateX(-50%); border:0; border-radius:0 0 8px 8px; cursor:ew-resize; pointer-events:auto; background:#ef4444; box-shadow:0 0 14px rgba(239,68,68,.62), inset 0 -1px 0 rgba(255,255,255,.18); }
.gt-playhead-handle:hover { background:#f87171; box-shadow:0 0 18px rgba(239,68,68,.78), 0 0 0 4px rgba(239,68,68,.13); }
.gt-playhead-handle:active { cursor:grabbing; background:#fb7185; }
.gt-selection-rect { position:absolute; border:1px solid rgba(103,232,249,.85); background:rgba(103,232,249,.14); border-radius:6px; display:none; pointer-events:none; z-index:7; }
.gt-empty { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-dim); padding:14px 10px; line-height:1.45; }
.gt-resize-handle { position:absolute; right:-2px; bottom:-2px; width:20px; height:20px; cursor:nwse-resize; display:flex; align-items:flex-end; justify-content:flex-end; padding:3px; color:rgba(255,255,255,.38); }
.gt-resize-handle:hover { color:#fff; }
.gt-key-popover {
  position:fixed; z-index:8900; width:250px; display:none; padding:10px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12); background:rgba(13,13,30,.98); box-shadow:0 18px 60px rgba(0,0,0,.68); backdrop-filter:blur(18px);
}
.gt-key-popover.open { display:block; }
.gt-pop-title { font:800 11px 'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:#a78bfa; margin-bottom:8px; }
.gt-pop-row { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.gt-pop-row label { color:var(--text-dim); font:700 9px 'JetBrains Mono',monospace; letter-spacing:.05em; text-transform:uppercase; }
.gt-pop-input, .gt-pop-select { height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.055); color:var(--text); font:500 11px 'JetBrains Mono',monospace; padding:0 8px; outline:none; }
.gt-pop-actions { display:flex; gap:6px; justify-content:flex-end; margin-top:8px; }
.gt-pop-btn { height:28px; border-radius:8px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.055); color:rgba(255,255,255,.78); padding:0 9px; cursor:pointer; font:700 10px 'Space Grotesk',sans-serif; }
.gt-pop-btn.primary { background:rgba(124,58,237,.56); color:#fff; }
.gt-pop-btn.danger { background:rgba(239,68,68,.18); color:#fca5a5; }
.node-video-panel, .media-source-panel { padding:10px 12px 12px; border-top:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; gap:9px; }
.video-preview-box, .media-preview-box { height:136px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#050510; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:10px; line-height:1.35; position:relative; transition:border-color .14s, background .14s, color .14s, box-shadow .14s, opacity .14s; }
.video-preview-box.drag-over, .media-preview-box.drag-over { border-color:rgba(124,58,237,.72); background:rgba(124,58,237,.12); color:#fff; box-shadow:0 0 0 3px rgba(124,58,237,.14) inset; }
.video-preview-box.is-busy, .media-preview-box.is-busy, .node-image-area.is-busy,
.video-preview-box.media-loading, .media-preview-box.media-loading, .video-preview-box.media-info, .media-preview-box.media-info { border-color:rgba(59,130,246,.44); background:rgba(59,130,246,.08); color:#bfdbfe; }
.video-preview-box.media-warning, .media-preview-box.media-warning { border-color:rgba(251,191,36,.48); background:rgba(251,191,36,.08); color:#fde68a; }
.video-preview-box.media-error, .media-preview-box.media-error { border-color:rgba(239,68,68,.58); background:rgba(239,68,68,.10); color:#fecaca; }
.video-preview-box video { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
.video-load-btn, .sequence-load-btn, .media-load-btn { height:32px; border:1px solid rgba(124,58,237,.28); border-radius:9px; cursor:pointer; background:rgba(124,58,237,.24); color:#fff; font-size:11px; font-weight:700; font-family:'Space Grotesk',sans-serif; transition:background .14s, border-color .14s, color .14s, opacity .14s, filter .14s; }
.video-load-btn:hover:not(:disabled), .sequence-load-btn:hover:not(:disabled), .media-load-btn:hover:not(:disabled) { background:rgba(124,58,237,.38); border-color:rgba(167,139,250,.42); }
.video-load-btn:focus-visible, .sequence-load-btn:focus-visible, .media-load-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(124,58,237,.22); }
.video-load-btn:disabled, .sequence-load-btn:disabled, .media-load-btn:disabled { opacity:.58; cursor:not-allowed; filter:saturate(.55); }
.video-load-btn.is-busy, .sequence-load-btn.is-busy, .media-load-btn.is-busy { border-color:rgba(59,130,246,.34); background:rgba(59,130,246,.18); color:#dbeafe; }
.video-meta, .sequence-meta, .media-meta { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-dim); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-status { display:none; padding:6px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.045); font-family:'JetBrains Mono',monospace; font-size:9px; line-height:1.35; color:var(--text-dim); }
.media-status.is-visible { display:block; }
.media-status.info, .media-status.loading { border-color:rgba(59,130,246,.28); background:rgba(59,130,246,.10); color:#bfdbfe; }
.media-status.success { border-color:rgba(34,197,94,.26); background:rgba(34,197,94,.10); color:#bbf7d0; }
.media-status.warning { border-color:rgba(251,191,36,.28); background:rgba(251,191,36,.10); color:#fde68a; }
.media-status.error { border-color:rgba(239,68,68,.32); background:rgba(239,68,68,.10); color:#fecaca; }
.sequence-preview-box { padding:0 10px; box-sizing:border-box; text-align:center; overflow-wrap:anywhere; white-space:normal; }
.sequence-preview-img { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
.sequence-hint, .media-hint { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-dim); line-height:1.35; }
.sequence-hint.is-empty, .media-hint.is-empty { display:none; }
.sequence-hint.sequence-warning, .media-hint.media-warning { color:#fde68a; }
.sequence-controls { display:flex; flex-direction:column; gap:7px; padding:8px; border-radius:9px; border:1px solid rgba(255,255,255,.075); background:rgba(255,255,255,.035); }
.sequence-control-row { display:grid; grid-template-columns:44px 1fr; align-items:center; gap:7px; }
.sequence-control-label, .sequence-number-field span { font-family:'JetBrains Mono',monospace; font-size:9px; line-height:1.2; letter-spacing:.045em; text-transform:uppercase; color:var(--text-dim); }
.sequence-mode-pills { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.sequence-mode-pill { min-width:0; height:26px; border-radius:7px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.045); color:rgba(255,255,255,.72); font:700 10px 'Space Grotesk',sans-serif; cursor:pointer; }
.sequence-mode-pill:hover { background:rgba(255,255,255,.075); color:#fff; }
.sequence-mode-pill.active { background:rgba(124,58,237,.44); border-color:rgba(167,139,250,.42); color:#fff; }
.sequence-number-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.sequence-number-field { display:flex; flex-direction:column; gap:3px; min-width:0; }
.sequence-number-input { width:100%; min-width:0; height:28px; box-sizing:border-box; border-radius:7px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.045); color:var(--text); padding:0 7px; font:600 11px 'JetBrains Mono',monospace; outline:none; }
.sequence-number-input:focus-visible, .sequence-mode-pill:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(124,58,237,.18); border-color:rgba(167,139,250,.48); }
body.light #global-transport { background:rgba(218,214,206,.94); border-color:rgba(129,117,110,.2); box-shadow:0 14px 38px rgba(93,78,73,.16); }
body.light .overlay-drag-handle { background:rgba(93,78,73,.07); color:rgba(42,35,32,.46); }
body.light .overlay-drag-handle:hover { background:rgba(93,78,73,.14); color:var(--text); }
body.light .gt-btn { background:rgba(93,78,73,.07); color:var(--text); }
body.light .gt-btn:hover { background:rgba(93,78,73,.14); }
body.light .gt-btn.primary { background:#5D4E49; color:#fff; }
body.light .gt-input, body.light .gt-select, body.light .gt-pop-input, body.light .gt-pop-select { background:rgba(255,255,255,.66); border-color:rgba(129,117,110,.2); color:var(--text); }
body.light .gt-property-panel, body.light .gt-dopesheet-wrap, body.light .gt-track { border-color:rgba(129,117,110,.14); }
body.light .gt-dopesheet-wrap, body.light .gt-property-panel { background:rgba(255,255,255,.35); }
body.light .gt-timescale, body.light .gt-range-track { background:rgba(255,255,255,.40); border-color:rgba(129,117,110,.14); }
body.light .gt-track-name, body.light .gt-selected-node { color:rgba(42,35,32,.74); }
body.light .gt-track:hover { background:rgba(93,78,73,.055); }
body.light .gt-track-line::before { background:rgba(42,35,32,.14); }
body.light .gt-more-menu, body.light .gt-key-popover { background:rgba(218,214,206,.98); border-color:rgba(129,117,110,.2); box-shadow:0 14px 36px rgba(93,78,73,.18); }
body.light .gt-menu-item { color:var(--text); }
body.light .gt-menu-item.is-busy { background:rgba(59,130,246,.08); color:#1d4ed8; }
body.light .gt-status.info, body.light .gt-status.loading { color:#1d4ed8; }
body.light .gt-status.success { color:#166534; }
body.light .gt-status.warning { color:#92400e; }
body.light .gt-status.error { color:#991b1b; }
body.light .node-video-panel, body.light .media-source-panel { border-top-color:rgba(124,58,237,.1); }
body.light .video-preview-box, body.light .media-preview-box { background:#eee9e0; border-color:rgba(129,117,110,.16); }
body.light .media-preview-box.is-busy, body.light .video-preview-box.is-busy, body.light .node-image-area.is-busy,
body.light .media-preview-box.media-loading, body.light .video-preview-box.media-loading, body.light .media-preview-box.media-info, body.light .video-preview-box.media-info { background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.30); color:#1d4ed8; }
body.light .media-preview-box.media-warning { background:rgba(217,119,6,.10); border-color:rgba(217,119,6,.35); color:#92400e; }
body.light .media-preview-box.media-error { background:rgba(220,38,38,.09); border-color:rgba(220,38,38,.35); color:#991b1b; }
body.light .media-status { background:rgba(255,255,255,.44); border-color:rgba(129,117,110,.16); }
body.light .media-status.info, body.light .media-status.loading { background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.26); color:#1d4ed8; }
body.light .media-status.success { background:rgba(22,163,74,.08); border-color:rgba(22,163,74,.22); color:#166534; }
body.light .media-status.warning { background:rgba(217,119,6,.10); border-color:rgba(217,119,6,.30); color:#92400e; }
body.light .media-status.error { background:rgba(220,38,38,.09); border-color:rgba(220,38,38,.30); color:#991b1b; }
body.light .sequence-meta, body.light .sequence-hint { color:var(--text-dim); }
body.light .sequence-hint.sequence-warning, body.light .media-hint.media-warning { color:#92400e; }
body.light .sequence-controls { background:rgba(255,255,255,.34); border-color:rgba(129,117,110,.14); }
body.light .sequence-mode-pill, body.light .sequence-number-input { background:rgba(255,255,255,.56); border-color:rgba(129,117,110,.16); color:var(--text); }
body.light .sequence-mode-pill:hover { background:rgba(124,58,237,.08); color:var(--text); }
body.light .sequence-mode-pill.active { background:rgba(124,58,237,.16); border-color:rgba(124,58,237,.32); color:var(--text); }
@media (max-width:820px){
  #global-transport{--gt-lane-label-w:122px; grid-template-columns:auto 1fr auto auto; grid-template-areas:"drag controls key sheet" "time time time time" "meta meta meta meta" "timeline timeline timeline timeline"; left:10px; right:10px; bottom:86px; transform:none; width:auto; min-width:0;}
  #global-transport.overlay-positioned{right:auto; bottom:auto; width:min(980px, calc(100vw - 20px));}
  .gt-controls{min-width:0; flex-wrap:wrap;} .gt-time{width:100%;} .gt-meta{flex-wrap:wrap; justify-content:flex-start;}
  .gt-timescale{margin-left:calc(var(--gt-lane-label-w) + 10px);}
  .gt-preview-range{margin-left:calc(var(--gt-lane-label-w) + 10px);}
  .gt-property-panel{flex-wrap:wrap;} .gt-status{margin-left:0; text-align:left; max-width:100%;}
}


/* ── v1.1.82I Transport toolbar mockup layout fix base ── */
#global-transport {
  --gt-lane-label-w:168px;
  width:min(1508px, calc(100vw - 28px));
  min-width:min(1080px, calc(100vw - 28px));
  box-sizing:border-box;
  bottom:72px;
  border-radius:22px;
  padding:16px 20px 18px;
  display:grid;
  grid-template-columns:48px max-content 1px 52px 1px minmax(260px,1fr) 1px max-content;
  grid-template-areas:
    "drag controls sep-a key sep-b time sep-c meta"
    ". sheet sheet sheet sheet sheet sheet ."
    "timeline timeline timeline timeline timeline timeline timeline timeline";
  gap:14px 16px;
  align-items:start;
  overflow:visible;
  background:rgba(10,10,22,.955);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 16px 56px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.035), 0 0 0 1px rgba(124,58,237,.08);
}
#global-transport .gt-drag-handle {
  grid-area:drag; align-self:start; width:44px; height:48px; border-radius:16px;
  background:rgba(255,255,255,.045);
}
#global-transport .gt-controls {
  grid-area:controls; align-self:start; height:48px; display:flex; align-items:center; gap:8px;
  flex:0 0 auto; white-space:nowrap;
}
#global-transport .gt-btn {
  height:48px; min-width:48px; border-radius:14px;
  background:rgba(255,255,255,.055); color:rgba(255,255,255,.78);
  font-size:15px; font-weight:800;
}
#global-transport .gt-btn:hover { background:rgba(124,58,237,.24); color:#fff; }
#global-transport .gt-btn.primary {
  min-width:56px; background:rgba(124,58,237,.72); color:#fff;
  box-shadow:0 10px 24px rgba(124,58,237,.28), 0 0 18px rgba(124,58,237,.18);
}
#global-transport .gt-btn.compact { min-width:48px; padding:0; font-size:18px; }
#global-transport .gt-sep {
  width:1px; height:38px; align-self:center; border-radius:999px;
  background:rgba(255,255,255,.11);
}
#global-transport .gt-sep-a { grid-area:sep-a; }
#global-transport .gt-sep-b { grid-area:sep-b; }
#global-transport .gt-sep-c { grid-area:sep-c; }
#global-transport #gt-key {
  grid-area:key; align-self:start; width:52px; min-width:52px; height:48px; border-radius:14px;
  background:rgba(239,68,68,.16); border:1px solid rgba(239,68,68,.34);
  box-shadow:0 0 0 1px rgba(239,68,68,.10) inset;
}
#global-transport #gt-key:hover { background:rgba(239,68,68,.26); box-shadow:0 0 20px rgba(239,68,68,.22); }
#global-transport .gt-record-dot {
  width:22px; height:22px; background:#ef4444;
  box-shadow:0 0 16px rgba(239,68,68,.62), inset 0 0 0 3px rgba(255,255,255,.20);
}
#global-transport .gt-time {
  grid-area:time; align-self:start; height:48px; display:flex; align-items:center; gap:16px; min-width:0;
  overflow:hidden;
}
#global-transport .gt-readout {
  min-width:96px; text-align:right; font-size:13px; color:rgba(255,255,255,.80);
}
#global-transport .gt-scrub {
  flex:1 1 auto; min-width:190px; height:18px; accent-color:var(--accent1); cursor:pointer;
}
#global-transport .gt-meta {
  grid-area:meta; align-self:start; justify-self:end; height:48px; display:flex; align-items:center; justify-content:flex-end; gap:22px; min-width:max-content;
  flex:0 0 auto; white-space:nowrap;
}
#global-transport .gt-field {
  height:48px; display:flex; align-items:center; gap:10px;
  font:800 11px 'JetBrains Mono',monospace; letter-spacing:.04em; color:rgba(120,120,165,.70);
}
#global-transport .gt-input,
#global-transport .gt-select {
  height:44px; max-width:104px; min-width:90px; border-radius:13px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.90); padding:0 13px; font-size:13px;
}
#global-transport .gt-select { min-width:94px; max-width:110px; }
#global-transport #gt-menu-btn { min-width:48px; width:48px; height:48px; border-radius:14px; font-size:18px; }
#global-transport .gt-menu-wrap { position:relative; }
#global-transport .gt-more-menu { top:58px; right:0; min-width:226px; padding:8px; }
#global-transport .gt-menu-field {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 10px; border-radius:10px; color:rgba(255,255,255,.78);
  font:800 10px 'JetBrains Mono',monospace; letter-spacing:.06em;
}
#global-transport .gt-menu-field label { color:var(--text-dim); }
#global-transport .gt-menu-field .gt-input { height:32px; min-width:76px; max-width:82px; font-size:11px; }
#global-transport #gt-toggle-sheet {
  grid-area:sheet; justify-self:start; align-self:start;
  width:auto; min-width:134px; height:38px; padding:0 17px; gap:10px;
  border-radius:10px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.58); font:600 13px 'Space Grotesk',sans-serif;
  box-shadow:none;
}
#global-transport #gt-toggle-sheet:hover,
#global-transport.open #gt-toggle-sheet {
  background:rgba(124,58,237,.16); border-color:rgba(124,58,237,.34); color:#fff;
}
#global-transport #gt-toggle-sheet:focus { outline:none; }
#global-transport #gt-toggle-sheet:focus-visible { box-shadow:0 0 0 2px rgba(124,58,237,.42); }
#global-transport .gt-sheet-diamond {
  width:10px; height:10px; border-radius:2px; transform:rotate(45deg);
  background:#8b5cf6; box-shadow:0 0 10px rgba(124,58,237,.52); flex:0 0 auto;
}
#global-transport .gt-timeline {
  grid-area:timeline; margin-top:2px; padding-top:14px; border-top:1px solid rgba(255,255,255,.075);
}
#global-transport:not(.open) .gt-timeline { display:none; }
@media (max-width:980px){
  #global-transport {
    width:calc(100vw - 20px); min-width:0; left:10px; right:auto; transform:none;
    grid-template-columns:44px minmax(0,1fr) 52px auto;
    grid-template-areas:
      "drag controls key meta"
      "time time time time"
      "sheet sheet sheet sheet"
      "timeline timeline timeline timeline";
    gap:10px 12px; padding:12px;
  }
  #global-transport .gt-sep { display:none; }
  #global-transport .gt-controls { flex-wrap:wrap; height:auto; min-height:44px; }
  #global-transport .gt-btn { height:42px; min-width:42px; border-radius:12px; }
  #global-transport .gt-btn.primary { min-width:50px; }
  #global-transport #gt-key { height:42px; min-width:46px; width:46px; }
  #global-transport .gt-time { height:42px; }
  #global-transport .gt-scrub { min-width:120px; }
  #global-transport .gt-meta { gap:8px; min-width:0; justify-self:end; }
  #global-transport .gt-field { gap:5px; font-size:9px; }
  #global-transport .gt-input, #global-transport .gt-select { height:36px; min-width:70px; max-width:84px; font-size:11px; padding:0 8px; }
  #global-transport #gt-menu-btn { height:42px; min-width:42px; width:42px; }
}
body.light #global-transport .gt-sep { background:rgba(42,35,32,.14); }
body.light #global-transport #gt-toggle-sheet { background:rgba(255,255,255,.35); border-color:rgba(129,117,110,.18); color:rgba(42,35,32,.62); }
body.light #global-transport.open #gt-toggle-sheet, body.light #global-transport #gt-toggle-sheet:hover { background:rgba(93,78,73,.10); color:var(--text); }


/* ── v1.1.82J Transport true mockup fit guard ──
   The redesigned transport needs to behave like one unified mockup bar even
   when an old localStorage width or a mid-size viewport would otherwise leave
   the right controls hanging outside the rounded shell. */
@media (min-width:981px){
  #global-transport{
    width:min(1516px, calc(100vw - 16px));
    min-width:min(1200px, calc(100vw - 16px));
    box-sizing:border-box;
    grid-template-columns:44px max-content 1px 50px 1px minmax(160px,1fr) 1px max-content;
    grid-template-areas:
      "drag controls sep-a key sep-b time sep-c meta"
      ". sheet sheet sheet sheet sheet sheet ."
      "timeline timeline timeline timeline timeline timeline timeline timeline";
    gap:14px 14px;
    padding:16px 20px 18px;
    overflow:visible;
  }
  #global-transport .gt-drag-handle{ width:44px; height:48px; }
  #global-transport .gt-controls{ height:48px; gap:8px; min-width:max-content; }
  #global-transport .gt-btn{ height:48px; min-width:48px; }
  #global-transport .gt-btn.primary{ min-width:56px; }
  #global-transport .gt-btn.compact{ min-width:48px; }
  #global-transport #gt-key{ width:50px; min-width:50px; height:48px; }
  #global-transport .gt-time{ min-width:0; overflow:hidden; gap:14px; }
  #global-transport .gt-readout{ min-width:92px; }
  #global-transport .gt-scrub{ min-width:120px; }
  #global-transport .gt-meta{ min-width:max-content; gap:18px; justify-self:end; }
  #global-transport .gt-field{ gap:9px; }
  #global-transport .gt-input{ min-width:86px; max-width:96px; }
  #global-transport .gt-select{ min-width:92px; max-width:104px; }
  #global-transport #gt-menu-btn{ min-width:48px; width:48px; }
}
@media (min-width:981px) and (max-width:1240px){
  #global-transport{
    width:calc(100vw - 16px);
    min-width:calc(100vw - 16px);
    left:8px;
    right:auto;
    transform:none;
    grid-template-columns:42px max-content 1px 48px 1px minmax(120px,1fr) 1px max-content;
    gap:14px 10px;
    padding:16px 18px 18px;
  }
  #global-transport.overlay-positioned{ right:auto; bottom:auto; transform:none; }
  #global-transport .gt-drag-handle{ width:42px; height:46px; border-radius:15px; }
  #global-transport .gt-controls{ height:46px; gap:6px; }
  #global-transport .gt-btn{ height:46px; min-width:44px; border-radius:13px; }
  #global-transport .gt-btn.primary{ min-width:54px; }
  #global-transport .gt-btn.compact{ min-width:44px; font-size:17px; }
  #global-transport .gt-sep{ height:36px; }
  #global-transport #gt-key{ width:48px; min-width:48px; height:46px; border-radius:13px; }
  #global-transport .gt-record-dot{ width:20px; height:20px; }
  #global-transport .gt-time{ height:46px; gap:10px; }
  #global-transport .gt-readout{ min-width:82px; font-size:12px; }
  #global-transport .gt-scrub{ min-width:82px; }
  #global-transport .gt-meta{ height:46px; gap:12px; }
  #global-transport .gt-field{ height:46px; gap:7px; font-size:10px; }
  #global-transport .gt-input,
  #global-transport .gt-select{ height:42px; min-width:78px; max-width:88px; padding:0 10px; font-size:12px; }
  #global-transport .gt-select{ min-width:88px; max-width:96px; }
  #global-transport #gt-menu-btn{ min-width:44px; width:44px; height:46px; }
  #global-transport #gt-toggle-sheet{ min-width:134px; }
}

/* v1.1.83H Compact transport shell + measured timeline containment fixes
   Keeps the dopesheet lanes/keyframes/readability intact while slimming only
   the surrounding transport controls and chrome. */
#global-transport{
  width:min(1180px, calc(100vw - 28px));
  min-width:min(820px, calc(100vw - 28px));
  border-radius:18px;
  padding:11px 14px 13px;
  grid-template-columns:34px max-content 1px 42px 1px minmax(220px,1fr) 1px max-content;
  gap:9px 11px;
}
#global-transport .gt-timeline,
#global-transport .gt-timeline *{
  box-sizing:border-box;
}
#global-transport .gt-drag-handle{
  width:34px; height:38px; border-radius:12px;
}
#global-transport .gt-drag-handle svg{ width:11px; height:15px; }
#global-transport .gt-controls{
  height:38px; gap:5px;
}
#global-transport .gt-btn{
  height:38px; min-width:38px; border-radius:11px;
  font-size:13px;
}
#global-transport .gt-btn.primary{ min-width:46px; }
#global-transport .gt-btn.compact{ min-width:38px; font-size:16px; }
#global-transport .gt-sep{ height:30px; }
#global-transport #gt-key{
  width:42px; min-width:42px; height:38px; border-radius:11px;
}
#global-transport .gt-record-dot{ width:17px; height:17px; }
#global-transport .gt-time{
  height:38px; gap:10px;
}
#global-transport .gt-readout{
  min-width:82px; font-size:12px;
}
#global-transport .gt-scrub{
  min-width:150px; height:16px;
}
#global-transport .gt-meta{
  height:38px; gap:12px;
}
#global-transport .gt-field{
  height:38px; gap:6px; font-size:10px;
}
#global-transport .gt-input,
#global-transport .gt-select{
  height:34px; min-width:72px; max-width:86px;
  border-radius:10px; padding:0 9px; font-size:11px;
}
#global-transport .gt-select{ min-width:82px; max-width:92px; }
#global-transport #gt-menu-btn{
  width:38px; min-width:38px; height:38px; border-radius:11px; font-size:16px;
}
#global-transport .gt-more-menu{ top:46px; }
#global-transport #gt-toggle-sheet{
  min-width:112px; height:34px; padding:0 13px; gap:8px;
  border-radius:10px; font-size:12px;
}
#global-transport .gt-sheet-diamond{ width:9px; height:9px; }
#global-transport .gt-timeline{
  margin-top:0; padding-top:10px;
  width:100%; min-width:0; max-width:100%; overflow:hidden;
}
#global-transport .gt-timeline-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) max-content;
  align-items:center;
  gap:8px;
  width:100%; max-width:100%;
}
#global-transport .gt-property-panel{
  min-width:0; max-width:100%;
}
#global-transport .gt-status{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#global-transport .gt-timeline-actions{
  min-width:0;
  max-width:100%;
  flex-wrap:wrap;
  justify-content:flex-end;
}
#global-transport .gt-mini-btn{
  height:28px;
  padding:0 9px;
  max-width:126px;
  white-space:nowrap;
}
#global-transport .gt-timescale{
  margin-right:0;
  width:calc(100% - var(--gt-lane-label-w) - 10px);
  max-width:calc(100% - var(--gt-lane-label-w) - 10px);
}
#global-transport .gt-preview-range{
  margin-right:0;
  width:calc(100% - var(--gt-lane-label-w) - 10px);
  max-width:calc(100% - var(--gt-lane-label-w) - 10px);
}
#global-transport .gt-dopesheet-wrap{
  width:100%; max-width:100%;
}
#global-transport .gt-dopesheet{
  width:100%; max-width:100%;
}
#global-transport .gt-track{
  min-width:0; max-width:100%;
}
#global-transport .gt-track-line{
  min-width:0;
}
#global-transport .gt-resize-handle{
  right:4px;
  bottom:4px;
}
#global-transport.timeline-narrow .gt-timeline-head{
  grid-template-columns:minmax(0,1fr);
}
#global-transport.timeline-narrow .gt-timeline-actions{
  justify-content:flex-start;
}
#global-transport.timeline-narrow .gt-status{
  white-space:normal;
}
@media (min-width:981px){
  #global-transport{
    width:min(1180px, calc(100vw - 16px));
    min-width:min(820px, calc(100vw - 16px));
    grid-template-columns:34px max-content 1px 42px 1px minmax(180px,1fr) 1px max-content;
    gap:9px 11px;
    padding:11px 14px 13px;
  }
}
@media (min-width:981px) and (max-width:1240px){
  #global-transport{
    width:calc(100vw - 16px);
    min-width:min(820px, calc(100vw - 16px));
    grid-template-columns:34px max-content 1px 42px 1px minmax(110px,1fr) 1px max-content;
    gap:9px 8px;
    padding:10px 12px 12px;
  }
  #global-transport .gt-drag-handle{ width:32px; height:36px; border-radius:11px; }
  #global-transport .gt-controls{ height:36px; gap:4px; }
  #global-transport .gt-btn{ height:36px; min-width:36px; border-radius:10px; }
  #global-transport .gt-btn.primary{ min-width:44px; }
  #global-transport .gt-btn.compact{ min-width:36px; font-size:15px; }
  #global-transport .gt-sep{ height:28px; }
  #global-transport #gt-key{ width:40px; min-width:40px; height:36px; border-radius:10px; }
  #global-transport .gt-record-dot{ width:16px; height:16px; }
  #global-transport .gt-time{ height:36px; gap:8px; }
  #global-transport .gt-readout{ min-width:76px; font-size:11px; }
  #global-transport .gt-scrub{ min-width:82px; }
  #global-transport .gt-meta{ height:36px; gap:8px; }
  #global-transport .gt-field{ height:36px; gap:5px; font-size:9px; }
  #global-transport .gt-input,
  #global-transport .gt-select{ height:32px; min-width:66px; max-width:78px; padding:0 8px; font-size:10px; }
  #global-transport .gt-select{ min-width:78px; max-width:86px; }
  #global-transport #gt-menu-btn{ width:36px; min-width:36px; height:36px; }
  #global-transport #gt-toggle-sheet{ min-width:112px; height:32px; }
}
@media (max-width:980px){
  #global-transport{
    padding:10px; gap:8px 9px;
    grid-template-columns:34px minmax(0,1fr) 42px auto;
  }
  #global-transport .gt-controls{ min-height:36px; }
  #global-transport .gt-btn{ height:36px; min-width:36px; border-radius:10px; }
  #global-transport .gt-btn.primary{ min-width:44px; }
  #global-transport #gt-key{ height:36px; min-width:40px; width:40px; }
  #global-transport .gt-time{ height:36px; }
  #global-transport .gt-input,
  #global-transport .gt-select{ height:32px; min-width:66px; max-width:78px; font-size:10px; }
  #global-transport #gt-menu-btn{ height:36px; min-width:36px; width:36px; }
  #global-transport .gt-timeline-head{
    grid-template-columns:minmax(0,1fr);
  }
  #global-transport .gt-timeline-actions{
    justify-content:flex-start;
  }
  #global-transport .gt-status{
    white-space:normal;
  }
}

/* v1.1.83L: measured narrow mode must constrain the parent grid too.
   This catches dragged/restored transport widths that are narrow even when
   the browser viewport is still wide enough for desktop media rules. */
#global-transport.timeline-narrow{
  --gt-lane-label-w:122px;
  grid-template-columns:34px minmax(0,max-content) 42px minmax(0,1fr) max-content max-content;
  grid-template-areas:
    "drag controls key spacer actions actions"
    "time time time time dur res"
    "timeline timeline timeline timeline timeline timeline";
  align-items:start;
  overflow:hidden;
}
#global-transport.timeline-narrow .gt-sep{
  display:none;
}
#global-transport.timeline-narrow .gt-drag-handle{
  grid-area:drag;
}
#global-transport.timeline-narrow .gt-controls{
  grid-area:controls;
  min-width:0;
  max-width:100%;
  height:auto;
  min-height:36px;
  flex-wrap:wrap;
  overflow:hidden;
}
#global-transport.timeline-narrow #gt-key{
  grid-area:key;
  align-self:start;
}
#global-transport.timeline-narrow #gt-toggle-sheet{
  grid-area:actions;
  align-self:start;
  justify-self:end;
  margin-right:45px;
  height:36px;
  max-width:100%;
}
#global-transport.timeline-narrow .gt-time{
  grid-area:time;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
#global-transport.timeline-narrow .gt-readout{
  flex:0 0 auto;
}
#global-transport.timeline-narrow .gt-scrub{
  min-width:0;
}
#global-transport.timeline-narrow .gt-meta{
  display:contents;
}
#global-transport.timeline-narrow .gt-field{
  height:36px;
  min-width:0;
  align-self:start;
}
#global-transport.timeline-narrow .gt-menu-wrap{
  grid-area:actions;
  justify-self:end;
  align-self:start;
  flex:0 0 auto;
}
#global-transport.timeline-narrow .gt-meta .gt-field:nth-of-type(1){
  grid-area:dur;
  justify-self:end;
}
#global-transport.timeline-narrow .gt-meta .gt-field:nth-of-type(2){
  grid-area:res;
  justify-self:end;
}
#global-transport.timeline-narrow .gt-timeline{
  grid-area:timeline;
}
@media (max-width:430px){
  #global-transport.timeline-narrow{
    grid-template-columns:34px minmax(0,1fr) 42px max-content max-content;
    grid-template-areas:
      "drag controls controls controls key"
      ". . . actions actions"
      "time time time dur res"
      "timeline timeline timeline timeline timeline";
  }
  #global-transport.timeline-narrow #gt-toggle-sheet{
    min-width:98px;
    padding-left:10px;
    padding-right:10px;
  }
}

/* v1.1.83M: in large/default mode, keep Dopesheet in the top row
   between RES and the far-right timeline menu. */
#global-transport:not(.timeline-narrow){
  grid-template-columns:34px max-content 1px 42px 1px minmax(220px,1fr) 1px max-content max-content max-content max-content;
  grid-template-areas:
    "drag controls sep-a key sep-b time sep-c dur res sheet menu"
    "timeline timeline timeline timeline timeline timeline timeline timeline timeline timeline timeline";
}
#global-transport:not(.timeline-narrow) .gt-meta{
  display:contents;
}
#global-transport:not(.timeline-narrow) .gt-meta .gt-field:nth-of-type(1){
  grid-area:dur;
  align-self:start;
  justify-self:end;
}
#global-transport:not(.timeline-narrow) .gt-meta .gt-field:nth-of-type(2){
  grid-area:res;
  align-self:start;
  justify-self:end;
}
#global-transport:not(.timeline-narrow) #gt-toggle-sheet{
  grid-area:sheet;
  align-self:start;
  justify-self:end;
  height:34px;
}
#global-transport:not(.timeline-narrow) .gt-menu-wrap{
  grid-area:menu;
  align-self:start;
  justify-self:end;
}
@media (min-width:981px) and (max-width:1240px){
  #global-transport:not(.timeline-narrow) #gt-toggle-sheet{
    height:32px;
  }
}

/* ── Toolbar more menu ── */
#tb-more-menu {
  position:fixed; z-index:4500;
  background:rgba(10,10,22,.97); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:6px; min-width:210px;
  max-height:min(82vh, 620px); overflow-y:auto; overscroll-behavior:contain;
  backdrop-filter:blur(18px); box-shadow:0 8px 40px rgba(0,0,0,.65);
  display:none;
}
#tb-more-menu.open { display:block; }
#tb-more-menu::-webkit-scrollbar { width:5px; }
#tb-more-menu::-webkit-scrollbar-thumb { background:rgba(124,58,237,.32); border-radius:4px; }
.tb-more-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:7px; cursor:pointer;
  font-size:12.5px; color:rgba(255,255,255,.8);
  transition:background .1s; font-family:'Space Grotesk',sans-serif;
}
.tb-more-item:hover { background:rgba(124,58,237,.2); color:#fff; }
.tb-more-item.danger { color:var(--danger); }
.tb-more-item.danger:hover { background:rgba(239,68,68,.15); }
.tb-more-item svg { opacity:.7; flex-shrink:0; }
.tb-more-item .material-symbols-outlined { font-size:15px; line-height:1; opacity:.75; flex-shrink:0; }
.tb-more-item.has-submenu { justify-content:space-between; }
.tb-more-item-main { display:flex; align-items:center; gap:10px; min-width:0; }
.tb-more-arrow { margin-left:auto; opacity:.45; font-size:12px; }
#tb-demo-submenu {
  position:fixed; z-index:4550;
  background:rgba(10,10,22,.97); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:6px; min-width:210px;
  backdrop-filter:blur(18px); box-shadow:0 8px 40px rgba(0,0,0,.65);
  display:none;
}
#tb-demo-submenu.open { display:block; }
.tb-more-sep { height:1px; background:rgba(255,255,255,.07); margin:4px 2px; }
.tb-more-label {
  font-size:9px; font-family:'JetBrains Mono',monospace; color:rgba(255,255,255,.3);
  letter-spacing:.07em; text-transform:uppercase; padding:6px 12px 2px;
}
body.light #tb-more-menu { background:rgba(218,214,206,.97); border-color:rgba(129,117,110,.2); box-shadow:0 8px 28px rgba(93,78,73,.12); }
body.light .tb-more-item { color:var(--text); }
body.light .tb-more-item:hover { background:rgba(93,78,73,.1); }
body.light .tb-more-sep { background:rgba(129,117,110,.15); }
body.light .tb-more-label { color:rgba(93,78,73,.5); }
body.light #tb-demo-submenu { background:rgba(218,214,206,.97); border-color:rgba(129,117,110,.2); box-shadow:0 8px 28px rgba(93,78,73,.12); }

/* ── Node picker flyout menu ── */
#node-flyout-menu {
  position:fixed; z-index:4500;
  background:rgba(10,10,22,.97); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:6px; min-width:210px;
  backdrop-filter:blur(18px); box-shadow:0 8px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(124,58,237,.08);
  font-family:'Space Grotesk',sans-serif;
}
.nfm-search-wrap {
  padding:4px 6px 8px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:4px;
  display:flex; align-items:center; gap:6px;
}
.nfm-search-wrap svg { flex-shrink:0; opacity:.4; }
.nfm-search {
  background:none; border:none; outline:none; color:var(--text);
  font-family:'Space Grotesk',sans-serif; font-size:12px; width:100%;
  caret-color:var(--accent1);
}
.nfm-search::placeholder { color:var(--text-dim); opacity:.6; }
.nfm-cat {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 10px; border-radius:7px; cursor:pointer;
  font-size:12.5px; color:rgba(255,255,255,.7);
  transition:background .1s, color .1s; position:relative;
}
.nfm-cat:hover, .nfm-cat.active, .nfm-cat.keyboard-active { background:rgba(124,58,237,.2); color:#fff; }
.nfm-cat-arrow { opacity:.4; font-size:10px; }
.nfm-sep { height:1px; background:rgba(255,255,255,.06); margin:4px 2px; }
.nfm-section-label {
  display:flex; align-items:center; gap:7px;
  padding:8px 10px 4px; margin:4px 2px 2px;
  font-size:9px; font-family:'JetBrains Mono',monospace;
  color:rgba(176,180,220,.58); letter-spacing:.08em; text-transform:uppercase;
}
.nfm-section-label::before {
  content:''; width:6px; height:6px; border-radius:999px; flex:0 0 6px;
  background:var(--section-color, rgba(124,58,237,.68));
  box-shadow:0 0 10px var(--section-color, rgba(124,58,237,.45));
}
.nfm-section-label + .nfm-item { margin-top:0; }
body.light .nfm-section-label { color:rgba(42,35,32,.52); }
/* Flyout submenu */
#node-flyout-sub {
  position:fixed; z-index:4600;
  background:rgba(10,10,22,.97); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:6px; min-width:200px;
  backdrop-filter:blur(18px); box-shadow:0 8px 40px rgba(0,0,0,.65);
  display:none;
}
.nfm-item {
  display:flex; align-items:center; gap:9px;
  padding:7px 10px; border-radius:7px; cursor:pointer;
  font-size:12.5px; color:rgba(255,255,255,.8);
  transition:background .1s, color .1s;
}
.nfm-item:hover, .nfm-item.keyboard-active { background:rgba(124,58,237,.2); color:#fff; }
/* category dot colours per section header */
.nfm-cat-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-right:2px; }
/* Search results mode */
.nfm-result {
  display:flex; align-items:center; gap:9px;
  padding:6px 10px; border-radius:7px; cursor:pointer;
  font-size:12px; color:rgba(255,255,255,.75);
  transition:background .1s;
}
.nfm-result:hover, .nfm-result.keyboard-active { background:rgba(124,58,237,.2); color:#fff; }
.nfm-result-cat {
  font-size:9px; font-family:'JetBrains Mono',monospace; color:var(--text-dim);
  letter-spacing:.04em; margin-left:auto; opacity:.6;
}

.nfm-text { display:flex; flex-direction:column; gap:1px; min-width:0; line-height:1.1; }
.nfm-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nfm-desc { font-size:10px; color:rgba(255,255,255,.42); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px; }
.nfm-result .nfm-desc { max-width:170px; }
.nfm-result-cat { align-self:flex-start; margin-top:2px; }
.node-reset-btn {
  width:22px; height:22px; border:none; border-radius:6px; background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.55); cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1; transition:background .12s,color .12s,transform .12s; flex-shrink:0;
}
.node-reset-btn:hover { background:rgba(124,58,237,.22); color:#fff; transform:rotate(-18deg); }
body.light .nfm-desc { color:rgba(42,35,32,.48); }
body.light .node-reset-btn { background:rgba(93,78,73,.06); color:rgba(42,35,32,.6); }
body.light .node-reset-btn:hover { background:rgba(93,78,73,.12); color:var(--text); }


/* ── Collapsible node shell ── */
.node-collapse-btn {
  width:22px; height:22px; flex:0 0 22px;
  border:none; border-radius:6px;
  background:rgba(255,255,255,.05); color:rgba(255,255,255,.78);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  padding:0; margin-right:-2px;
  transition:background .12s, color .12s, transform .12s;
}
.node-collapse-btn svg {
  width:14px; height:14px; display:block;
  stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  transform-origin:50% 50%; transition:transform .14s cubic-bezier(.4,0,.2,1);
}
.node-collapse-btn.is-open svg { transform:rotate(90deg); }
.node-collapse-btn:not(.is-open) svg { transform:rotate(0deg); }
.node-collapse-btn:hover { background:rgba(124,58,237,.22); color:#fff; }
.node.collapsible.collapsed {
  width:var(--collapsed-width, 230px); min-width:var(--collapsed-width, 230px);
  min-height:42px; overflow:visible;
}
.node.collapsible.collapsed .node-header {
  border-bottom:none; padding:10px 12px;
}
.node.collapsible.collapsed .node-image-area,
.node.collapsible.collapsed .node-image-settings,
.node.collapsible.collapsed .node-params,
.node.collapsible.collapsed .hue-sat-panel,
.node.collapsible.collapsed .levels-panel,
.node.collapsible.collapsed .color-picker-wrap,
.node.collapsible.collapsed .grad-ramp-wrap,
.node.collapsible.collapsed .curve-editor-wrap,
.node.collapsible.collapsed .crop-visual-panel,
.node.collapsible.collapsed .node-preview-area,
.node.collapsible.collapsed .output-settings-fold,
.node.collapsible.collapsed .output-settings,
.node.collapsible.collapsed .composite-layer-panel,
.node.collapsible.collapsed .node-width-handle { display:none !important; }
.node.collapsible.collapsed .node-ports {
  position:absolute; inset:0; display:block; padding:0; margin:0;
  pointer-events:none; border:0;
}
.node.collapsible.collapsed .port-row {
  position:absolute; top:calc(50% + var(--port-offset, 0px)); transform:translateY(-50%);
  padding:0; margin:0; width:auto; gap:0; pointer-events:none;
}
.node.collapsible.collapsed .port-row.input { left:-7px; }
.node.collapsible.collapsed .port-row.output { right:-7px; }
.node.collapsible.collapsed .port-row .port-label-input,
.node.collapsible.collapsed .port-row .port-drag-handle { display:none !important; }
.node.collapsible.collapsed .port-row .port { pointer-events:auto; }
.node.collapsible.collapsed .node-label { padding-right:8px; text-overflow:ellipsis; }
body.light .node-collapse-btn { background:rgba(93,78,73,.07); color:rgba(42,35,32,.65); }
body.light .node-collapse-btn:hover { background:rgba(93,78,73,.12); color:var(--text); }

/* ── Toggle (for 0-1 range params) ── */
.param-toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:1px 0;
}
.param-toggle-label {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); letter-spacing:.04em;
}
.param-toggle {
  position:relative; width:36px; height:20px; flex-shrink:0;
  cursor:pointer;
}
.param-toggle input { opacity:0; width:0; height:0; position:absolute; }
.param-toggle-track {
  position:absolute; inset:0; border-radius:20px;
  background:rgba(255,255,255,.1); transition:background .2s;
  border:1px solid rgba(255,255,255,.1);
}
.param-toggle input:checked ~ .param-toggle-track {
  background:var(--accent1);
  border-color:transparent;
  box-shadow:0 0 8px rgba(124,58,237,.4);
}
.param-toggle-thumb {
  position:absolute; top:3px; left:3px;
  width:14px; height:14px; border-radius:50%;
  background:#fff; transition:transform .2s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
  pointer-events:none;
}
.param-toggle input:checked ~ .param-toggle-thumb { transform:translateX(16px); }
body.light .param-toggle-track { background:rgba(0,0,0,.12); }


/* ── Text style pill controls ── */
.text-style-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 0 2px;
}
.text-style-label {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); letter-spacing:.04em;
}
.text-style-controls {
  display:flex; align-items:center; gap:8px;
}
.text-style-btn {
  width:28px; height:28px; border:none; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:rgba(226,226,240,.62);
  font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700;
  cursor:pointer; transition:background .12s, color .12s, box-shadow .12s, transform .12s;
}
.text-style-btn:hover { background:rgba(255,255,255,.07); color:#fff; }
.text-style-btn.active {
  background:rgba(59,130,246,.16); color:#60a5fa;
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.18);
}
.text-style-btn[data-param="italic"] { font-style:italic; font-family:Georgia, 'Times New Roman', serif; }
.text-style-btn[data-param="strike"] { text-decoration:line-through; }
body.light .text-style-btn { color:rgba(42,35,32,.62); }
body.light .text-style-btn:hover { background:rgba(93,78,73,.08); color:var(--text); }
body.light .text-style-btn.active { background:#eef5ff; color:#2563eb; box-shadow:none; }


/* ── Google Fonts controls for Text node ── */
.text-font-row {
  display:flex; flex-direction:column; gap:6px;
  padding:0 0 2px;
}
.text-font-input-row {
  display:flex; align-items:center; gap:6px;
}
.text-font-input {
  flex:1; min-width:0; height:28px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:7px; color:var(--text); font-family:'Space Grotesk',sans-serif;
  font-size:11px; padding:4px 8px; outline:none;
}
.text-font-input:focus { border-color:var(--accent1); box-shadow:0 0 0 1px rgba(124,58,237,.3); }
.text-font-load-btn {
  height:28px; border:none; border-radius:7px;
  background:rgba(124,58,237,.22); color:#fff;
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.04em;
  padding:0 9px; cursor:pointer; flex-shrink:0;
}
.text-font-load-btn:hover { background:rgba(124,58,237,.38); }
.text-font-hint {
  font-size:9px; line-height:1.35; color:var(--text-dim);
  font-family:'JetBrains Mono',monospace; letter-spacing:.035em;
}
body.light .text-font-input { background:rgba(255,255,255,.65); border-color:rgba(129,117,110,.2); color:var(--text); }
body.light .text-font-load-btn { background:rgba(93,78,73,.14); color:var(--text); }
body.light .text-font-load-btn:hover { background:rgba(93,78,73,.22); }


/* ── Text 2.0 compact node UI ── */
.text20-shell { display:flex; flex-direction:column; gap:10px; }
.text20-preview-card {
  border:1px solid rgba(255,255,255,.08); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  min-height:110px; padding:12px; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.text20-preview-sample {
  width:100%; white-space:pre-wrap; word-break:break-word; line-height:1.05;
  font-size:44px; font-weight:700; text-align:center; color:#fff;
}
.text20-preset-row { display:flex; gap:6px; flex-wrap:wrap; }
.text20-preset-btn,
.text20-segmented button,
.text20-editor-tab {
  border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.04);
  color:rgba(230,230,245,.82); cursor:pointer; transition:background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
.text20-preset-btn {
  padding:5px 8px; font-size:10px; line-height:1; font-family:'JetBrains Mono', monospace;
  letter-spacing:.03em;
}
.text20-preset-btn.active,
.text20-segmented button.active,
.text20-editor-tab.active {
  background:rgba(124,58,237,.24); color:#fff; border-color:rgba(124,58,237,.42);
  box-shadow:0 0 0 1px rgba(124,58,237,.16) inset;
}
.text20-preset-btn:hover,
.text20-segmented button:hover,
.text20-editor-tab:hover,
.text20-editor-close:hover,
.text20-edit-btn:hover,
.text20-editor-footer button:hover,
.text20-color-chip:hover { transform:translateY(-1px); }
.text20-basic-grid {
  display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end;
}
.text20-color-stack { display:flex; flex-direction:column; gap:6px; }
.text20-mini-label,
.text20-field-label {
  font-size:10px; font-family:'JetBrains Mono', monospace; letter-spacing:.04em; color:var(--text-dim);
}
.text20-color-chip {
  width:36px; height:28px; border-radius:8px; border:1px solid rgba(255,255,255,.12); cursor:pointer;
  background:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.text20-segmented { display:flex; gap:4px; }
.text20-segmented button {
  width:34px; height:28px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-family:'Space Grotesk', sans-serif;
}
.text20-edit-btn,
.text20-editor-footer button,
.text20-editor-close {
  border:1px solid rgba(255,255,255,.1); border-radius:9px; background:rgba(255,255,255,.04);
  color:rgba(236,236,246,.9); cursor:pointer;
}
.text20-edit-btn {
  width:100%; height:32px; font-size:11px; font-family:'Space Grotesk', sans-serif; font-weight:600;
}
.text20-editor {
  border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(9,10,18,.96);
  display:none; flex-direction:column; gap:10px; padding:10px;
}
.text20-editor.open { display:flex; }
.text20-editor-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.text20-editor-title { font-size:13px; font-weight:700; color:rgba(248,248,252,.95); }
.text20-editor-close { width:28px; height:28px; font-size:16px; line-height:1; }
.text20-editor-tabs { display:flex; gap:6px; }
.text20-editor-tab { flex:1; height:30px; font-size:11px; font-weight:600; }
.text20-pane { display:none; flex-direction:column; gap:8px; }
.text20-pane.active { display:flex; }
.text20-editor-footer { display:flex; gap:8px; }
.text20-editor-footer button { flex:1; height:34px; font-size:11px; font-weight:600; }
.text20-editor-footer .primary { background:rgba(124,58,237,.9); border-color:rgba(124,58,237,.9); color:#fff; }
.text20-style-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.text20-style-buttons { display:flex; gap:6px; }
.text20-style-btn {
  width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04);
  color:rgba(235,235,248,.85); font-size:13px; font-weight:700; cursor:pointer;
}
.text20-style-btn.active { background:rgba(124,58,237,.22); border-color:rgba(124,58,237,.4); color:#fff; }
.text20-style-btn[data-style="italic"] { font-style:italic; font-family:Georgia, 'Times New Roman', serif; }
.text20-style-btn[data-style="underline"] { text-decoration:underline; }
.text20-style-btn[data-style="strike"] { text-decoration:line-through; }
.text20-inline-row { display:flex; align-items:center; gap:8px; }
.text20-inline-row .ui-select,
.text20-inline-row .param-select,
.text20-inline-row .text-font-input { flex:1; min-width:0; }
.text20-help { font-size:9px; line-height:1.35; color:var(--text-dim); font-family:'JetBrains Mono', monospace; }
.text20-toggle-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:1px 0;
}
.text20-field textarea.param-textarea { min-height:68px; }
body.light .text20-preview-card,
body.light .text20-editor { background:rgba(255,255,255,.74); border-color:rgba(129,117,110,.16); }
body.light .text20-preset-btn,
body.light .text20-segmented button,
body.light .text20-editor-tab,
body.light .text20-style-btn,
body.light .text20-edit-btn,
body.light .text20-editor-footer button,
body.light .text20-editor-close { background:rgba(93,78,73,.06); border-color:rgba(129,117,110,.14); color:var(--text); }
body.light .text20-preset-btn.active,
body.light .text20-segmented button.active,
body.light .text20-editor-tab.active,
body.light .text20-style-btn.active { background:#efe7ff; border-color:#d9c9ff; color:#5b21b6; }
body.light .text20-editor-footer .primary { background:#7c3aed; border-color:#7c3aed; color:#fff; }

.text20-advanced.ui-advanced { margin-top:2px; }
.text20-advanced .rd-advanced-body { gap:10px; }
.text20-advanced-section {
  display:flex; flex-direction:column; gap:9px;
  padding:2px 0 4px;
}
.text20-advanced-section + .text20-advanced-section {
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:11px;
}
.text20-section-title {
  font-size:9px; font-family:'JetBrains Mono', monospace;
  color:rgba(167,139,250,.82); letter-spacing:.08em; text-transform:uppercase;
}
.text20-advanced .text-font-row { padding:0; }
.text20-advanced .text20-style-row { min-height:30px; }
body.light .text20-advanced-section + .text20-advanced-section { border-top-color:rgba(129,117,110,.12); }
body.light .text20-section-title { color:#5D4E49; }

/* ── Checkbox params ── */
.param-checkbox-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:1px 0; gap:10px;
}
.param-checkbox-label {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); letter-spacing:.04em;
}
.param-checkbox-input {
  width:16px; height:16px; flex-shrink:0;
  accent-color:var(--accent1); cursor:pointer;
}

/* Output node preview canvas */
.node-preview-area {
  width:100%; height:180px; overflow:hidden; position:relative;
  background:#050510; border-top:1px solid rgba(255,255,255,.06);
  min-height:80px;
}
.node-preview-area canvas {
  width:100%; height:100%; object-fit:contain; display:block;
  position:relative; z-index:1;
}
.node-preview-area canvas.fit-cover { object-fit:cover; }
.node-preview-area canvas.fit-fill  { object-fit:fill; }

/* fit-mode selector strip */
.preview-fit-strip {
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  display:flex; gap:2px; z-index:25;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:3px; backdrop-filter:blur(8px);
  opacity:0; transition:opacity .15s;
}
.node-preview-area:hover .preview-fit-strip { opacity:1; }
.fit-btn {
  font-size:9px; font-family:'JetBrains Mono',monospace; letter-spacing:.04em;
  padding:3px 8px; border-radius:5px; cursor:pointer; color:rgba(255,255,255,.45);
  border:none; background:none; transition:background .12s, color .12s;
}
.fit-btn.active { background:var(--accent1); color:#fff; box-shadow:0 0 6px rgba(124,58,237,.4); }
.fit-btn:not(.active):hover { background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); }
.node-preview-area .preview-empty {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-family:'JetBrains Mono',monospace; color:var(--text-dim);
  letter-spacing:.04em; opacity:.5;
}
.preview-save-btn {
  position:absolute; bottom:10px; right:28px;
  z-index:25; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.15);
  border-radius:8px; color:rgba(255,255,255,.7); cursor:pointer;
  font-size:10px; font-family:'JetBrains Mono',monospace; letter-spacing:.04em;
  padding:5px 10px; display:flex; align-items:center; gap:5px;
  backdrop-filter:blur(8px); transition:background .15s, color .15s, border-color .15s;
  opacity:0;
}
.node-preview-area:hover .preview-save-btn { opacity:1; }
.preview-save-btn:hover { background:rgba(124,58,237,.4); border-color:var(--accent1); color:#fff; box-shadow:0 0 10px rgba(124,58,237,.3); }

.preview-resize-handle {
  position:absolute; bottom:0; right:0;
  width:18px; height:18px; cursor:nwse-resize; z-index:20;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:3px;
}
.preview-resize-handle svg {
  opacity:.35; transition:opacity .15s;
}

.preview-resize-handle:hover svg { opacity:.8; }

/* v1.1.63 3D Output View UX Cleanup */
.node-preview-area.preview-mode-3d .preview-fit-strip { display:none; }
.node-preview-area.preview-mode-3d .preview-save-btn { display:none; }
.node-preview-area:not(.preview-mode-3d) .preview-3d-toolbar { display:none; }

.output-preview-shell {
  border-top:1px solid rgba(255,255,255,.055);
  background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0));
}
.output-preview-topbar {
  display:flex; align-items:center; justify-content:space-between; gap:9px;
  padding:10px 12px 9px;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.output-preview-mode-seg {
  display:flex; align-items:center; gap:3px; padding:3px;
  border:1px solid rgba(255,255,255,.08); border-radius:11px;
  background:rgba(255,255,255,.032); min-width:0;
}
.output-preview-mode-btn {
  height:25px; padding:0 9px; border:none; border-radius:8px;
  background:transparent; color:rgba(255,255,255,.45);
  font-size:10.5px; font-family:'Space Grotesk',sans-serif; font-weight:650;
  cursor:pointer; white-space:nowrap;
  transition:background .13s ease, color .13s ease, box-shadow .13s ease;
}
.output-preview-mode-btn.active {
  background:rgba(124,58,237,.34); color:#fff;
  box-shadow:0 0 12px rgba(124,58,237,.15);
}
.output-preview-mode-btn:hover:not(.active) { background:rgba(255,255,255,.055); color:rgba(255,255,255,.72); }
.output-preview-mode-select { display:none !important; }
.output-preview-preset-wrap { display:flex; align-items:center; gap:7px; min-width:106px; }
.output-preview-preset-label {
  font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.08em;
  color:var(--text-dim); text-transform:uppercase;
}
.output-preview-preset {
  height:30px; min-width:104px; max-width:126px;
  border:1px solid rgba(103,232,249,.16); border-radius:10px;
  background:rgba(6,182,212,.075); color:#67e8f9;
  font-size:10.5px; font-weight:650; padding:0 9px;
  font-family:'Space Grotesk',sans-serif; outline:none;
}
.output-preview-shell:not(.preview-shell-3d) .output-preview-preset-wrap,
.output-preview-shell:not(.preview-shell-3d) .output-preview-3d-footer { display:none; }

.node-preview-area {
  margin:0; border-top:none;
}
.output-preview-shell .node-preview-area {
  margin:0 12px 10px; width:auto;
  border-radius:14px; border:1px solid rgba(255,255,255,.075);
  overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.output-preview-shell .node-preview-area.preview-mode-3d {
  height:230px; background:#060711;
}
.preview-3d-toolbar {
  position:absolute; right:10px; bottom:10px; top:auto; z-index:28;
  display:flex; gap:5px; padding:3px; border-radius:10px;
  background:rgba(0,0,0,.48); border:1px solid rgba(255,255,255,.095);
  backdrop-filter:blur(9px); opacity:0; transition:opacity .15s, transform .15s;
  transform:translateY(2px);
}
.node-preview-area.preview-mode-3d:hover .preview-3d-toolbar,
.node-preview-area.preview-mode-3d:focus-within .preview-3d-toolbar { opacity:1; transform:translateY(0); }
.preview-3d-btn {
  border:0; border-radius:7px; min-width:28px; height:26px; padding:0 8px; cursor:pointer;
  background:transparent; color:rgba(255,255,255,.68);
  font-size:9px; font-family:'JetBrains Mono',monospace; letter-spacing:.04em;
  transition:background .12s, color .12s, transform .12s;
}
.preview-3d-play-btn { min-width:44px; font-weight:700; }
.preview-3d-play-btn.is-playing { background:rgba(124,58,237,.28); color:#fff; box-shadow:0 0 10px rgba(124,58,237,.18); }
.preview-3d-play-btn.is-paused { background:rgba(255,255,255,.08); color:rgba(255,255,255,.84); }
.preview-3d-play-btn.is-paused:hover { background:rgba(52,211,153,.24); color:#fff; }
.preview-3d-play-btn.is-playing:hover { background:rgba(239,68,68,.24); color:#fff; }
.preview-3d-btn:hover { background:rgba(124,58,237,.34); color:#fff; transform:translateY(-1px); }
.preview-3d-btn[data-3d-action="save"] { background:#67e8f9; color:#06131a; font-weight:700; }
.preview-3d-btn[data-3d-action="save"]:hover { background:#a5f3fc; color:#06131a; }
.preview-3d-btn:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(6,182,212,.45); }

.node-preview-area .output-preview-2d,
.node-preview-area .output-preview-3d {
  width:100%; height:100%; object-fit:contain; display:block;
  position:relative; z-index:1;
}
.node-preview-area .output-preview-3d {
  position:absolute; inset:0; z-index:2; object-fit:fill;
  display:none; cursor:grab; touch-action:none;
}
.node-preview-area.preview-3d-bg-checker .output-preview-3d {
  background-color:#11121a;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.16) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.16) 75%, rgba(255,255,255,.16)),
    linear-gradient(45deg, rgba(255,255,255,.16) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.16) 75%, rgba(255,255,255,.16));
  background-size:24px 24px;
  background-position:0 0, 12px 12px;
}
.node-preview-area.preview-3d-bg-light .output-preview-3d { background:#dbd7cd; }
.node-preview-area.preview-3d-bg-dark .output-preview-3d { background:#07070f; }
.node-preview-area.preview-mode-3d .output-preview-2d { display:none !important; }
.node-preview-area.preview-mode-3d .output-preview-3d { display:block !important; }
.node-preview-area.preview-mode-2d .output-preview-3d,
.node-preview-area:not(.preview-mode-3d) .output-preview-3d { display:none !important; }
.node-preview-area.preview-mode-2d .output-preview-2d,
.node-preview-area:not(.preview-mode-3d) .output-preview-2d { display:block !important; }
.node-preview-area .output-preview-3d.dragging { cursor:grabbing; }
.preview-3d-hint { display:none !important; }

.output-preview-3d-footer {
  display:flex; flex-direction:column; gap:8px; padding:0 12px 12px;
}
.output-preview-object-row { display:flex; align-items:center; justify-content:space-between; gap:9px; }
.output-preview-field { display:flex; align-items:center; gap:8px; width:100%; min-width:0; }
.output-mapping-hint { margin-top:6px; font-size:9px; line-height:1.35; font-family:'JetBrains Mono',monospace; color:rgba(176,180,220,.45); letter-spacing:.025em; }
.output-mapping-hint strong { color:rgba(255,255,255,.62); font-weight:500; }
body.light .output-mapping-hint { color:rgba(42,35,32,.45); }
body.light .output-mapping-hint strong { color:rgba(42,35,32,.65); }
.output-preview-object-row .output-preview-field { flex:1 1 0; width:auto; }
.output-preview-field label,
.output-preview-channels-title {
  flex:0 0 auto; font-family:'JetBrains Mono',monospace; font-size:8.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);
}
.output-preview-field .out-setting-select {
  flex:1; min-width:0; height:29px; border-radius:9px;
  background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.085);
}
.preview-3d-channel-badges {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-radius:12px; background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.07); pointer-events:none;
}
.node-preview-area .preview-3d-channel-badges { display:none !important; }
.output-preview-channels-title { margin-right:auto; color:rgba(255,255,255,.34); }
.preview-3d-channel-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:9px; line-height:1; font-family:'JetBrains Mono',monospace;
  letter-spacing:.05em; color:rgba(255,255,255,.35);
  background:transparent; border:none; min-width:auto; height:auto; padding:0;
}
.preview-3d-channel-badge::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.14); box-shadow:none;
}
.preview-3d-channel-badge.connected { color:rgba(255,255,255,.9); background:transparent; border:none; box-shadow:none; }
.preview-3d-channel-badge.connected::before { background:#34d399; box-shadow:0 0 8px rgba(52,211,153,.45); }
.preview-3d-channel-badge.fallback { color:rgba(255,255,255,.38); background:transparent; border:none; }

.out-3d-settings {
  display:flex; flex-direction:column; gap:8px;
  padding:8px 0 0; margin-top:2px;
  border-top:1px solid rgba(255,255,255,.055);
}
.out-3d-settings.collapsed { display:none !important; }
.out-3d-settings .out-setting-select { max-width:144px; }
.out-3d-settings .out-setting-slider { width:92px; }
.out-3d-settings .out-3d-value {
  font-size:10px; color:var(--text-dim); font-family:'JetBrains Mono',monospace;
  width:34px; text-align:right; font-variant-numeric:tabular-nums;
}
.output-settings-section-label {
  margin:2px 0 4px; font-size:8.5px; font-family:'JetBrains Mono',monospace;
  letter-spacing:.09em; text-transform:uppercase; color:rgba(167,139,250,.76);
}
.out-3d-details {
  border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.024);
  border-radius:13px; overflow:hidden;
}
.out-3d-details[open] { background:rgba(255,255,255,.034); }
.out-3d-details summary {
  list-style:none; height:34px; display:flex; align-items:center; gap:8px;
  padding:0 10px; cursor:pointer; user-select:none;
  font-size:11px; font-weight:700; color:rgba(255,255,255,.76);
}
.out-3d-details summary::-webkit-details-marker { display:none; }
.out-3d-details summary::before {
  content:'›'; color:var(--text-dim); font-size:17px; line-height:1;
  transition:transform .15s, color .15s;
}
.out-3d-details[open] summary::before { transform:rotate(90deg); color:#67e8f9; }
.out-3d-details summary span {
  margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:8px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); font-weight:500;
}
.out-3d-details-body { padding:0 10px 10px; display:flex; flex-direction:column; gap:8px; }
.out-3d-note {
  color:rgba(255,255,255,.38); font-size:9.5px; line-height:1.4;
  font-family:'JetBrains Mono',monospace; padding:2px 2px 0;
}
.out-3d-toggle-row .out-setting-label { color:rgba(255,255,255,.55); }

body.light .output-preview-shell { border-top-color:rgba(124,58,237,.1); background:rgba(255,255,255,.08); }
body.light .output-preview-topbar { border-bottom-color:rgba(129,117,110,.12); }
body.light .output-preview-mode-seg { background:rgba(93,78,73,.05); border-color:rgba(129,117,110,.14); }
body.light .output-preview-mode-btn { color:rgba(42,35,32,.48); }
body.light .output-preview-mode-btn.active { background:#5D4E49; color:#fff; box-shadow:none; }
body.light .output-preview-preset { background:rgba(93,78,73,.08); border-color:rgba(93,78,73,.18); color:#5D4E49; }
body.light .output-preview-shell .node-preview-area { border-color:rgba(129,117,110,.14); }
body.light .preview-3d-toolbar { background:rgba(42,35,32,.42); border-color:rgba(255,255,255,.15); }
body.light .preview-3d-channel-badges { background:rgba(255,255,255,.30); border-color:rgba(129,117,110,.12); }
body.light .output-preview-channels-title { color:rgba(42,35,32,.42); }
body.light .preview-3d-channel-badge { color:rgba(42,35,32,.42); }
body.light .preview-3d-channel-badge.connected { color:rgba(42,35,32,.82); }
body.light .out-3d-settings { border-top-color:rgba(124,58,237,.1); }
body.light .out-3d-details { background:rgba(255,255,255,.25); border-color:rgba(129,117,110,.13); }
body.light .out-3d-details[open] { background:rgba(255,255,255,.36); }
body.light .out-3d-details summary { color:rgba(42,35,32,.76); }
body.light .out-3d-note { color:rgba(42,35,32,.45); }
body.light .output-settings-section-label { color:#5D4E49; }

/* Visual Crop node */

.crop-visual-panel {
  padding:20px 22px 20px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; gap:18px;
  background:rgba(7,10,18,.35);
}
.crop-stage {
  position:relative;
  width:100%; height:var(--crop-preview-h, 260px); min-height:190px; max-height:620px;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  background:rgba(8,12,22,.62);
  overflow:hidden;
  margin:4px 0 2px;
  touch-action:none;
}
.crop-source-frame {
  position:relative;
  width:220px; height:220px;
  aspect-ratio:var(--crop-source-aspect, 1 / 1);
  border:1.5px solid rgba(245,158,11,.95);
  background:rgba(245,158,11,.20);
  box-shadow:0 0 0 1px rgba(245,158,11,.2), inset 0 0 30px rgba(245,158,11,.08);
  overflow:hidden;
  flex:0 0 auto;
}
.crop-preview-canvas {
  position:absolute; inset:0; width:100%; height:100%; object-fit:fill;
  opacity:.82; display:block;
}
.crop-preview-empty {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.04em;
  color:rgba(255,255,255,.28); pointer-events:none;
}
.crop-shade { position:absolute; background:rgba(0,0,0,.46); pointer-events:none; }
.crop-shade.top { left:0; right:0; top:0; height:var(--crop-y); }
.crop-shade.bottom { left:0; right:0; top:calc(var(--crop-y) + var(--crop-h)); bottom:0; }
.crop-shade.left { left:0; top:var(--crop-y); width:var(--crop-x); height:var(--crop-h); }
.crop-shade.right { right:0; top:var(--crop-y); left:calc(var(--crop-x) + var(--crop-w)); height:var(--crop-h); }
.crop-rect {
  position:absolute; left:var(--crop-x); top:var(--crop-y); width:var(--crop-w); height:var(--crop-h);
  border:1.5px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.055);
  cursor:move; touch-action:none; box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.crop-handle {
  position:absolute; z-index:3; background:rgba(255,255,255,.92); border-radius:999px;
  box-shadow:0 0 0 1px rgba(0,0,0,.25); touch-action:none;
}
.crop-handle.n,.crop-handle.s { left:50%; width:42px; height:8px; margin-left:-21px; cursor:ns-resize; background:rgba(255,255,255,.46); }
.crop-handle.n { top:-5px; } .crop-handle.s { bottom:-5px; }
.crop-handle.e,.crop-handle.w { top:50%; width:8px; height:42px; margin-top:-21px; cursor:ew-resize; background:rgba(255,255,255,.46); }
.crop-handle.e { right:-5px; } .crop-handle.w { left:-5px; }
.crop-handle.nw,.crop-handle.ne,.crop-handle.sw,.crop-handle.se {
  width:12px; height:12px; background:rgba(255,255,255,.95); opacity:0; transition:opacity .12s;
}
.crop-handle.nw { left:-6px; top:-6px; cursor:nwse-resize; }
.crop-handle.ne { right:-6px; top:-6px; cursor:nesw-resize; }
.crop-handle.sw { left:-6px; bottom:-6px; cursor:nesw-resize; }
.crop-handle.se { right:-6px; bottom:-6px; cursor:nwse-resize; }
.crop-rect:hover .crop-handle.nw,.crop-rect:hover .crop-handle.ne,.crop-rect:hover .crop-handle.sw,.crop-rect:hover .crop-handle.se { opacity:.95; }
.crop-preview-resize-handle {
  position:absolute; right:4px; bottom:4px; width:20px; height:20px;
  cursor:nwse-resize; z-index:8;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:4px; color:rgba(255,255,255,.55);
  border-radius:6px; opacity:.55; transition:opacity .15s, background .15s, color .15s;
}
.crop-preview-resize-handle:hover, .crop-preview-resize-handle.dragging {
  opacity:1; color:#fff; background:rgba(255,255,255,.08);
}
.crop-preview-resize-handle svg { display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.crop-aspect-row { display:flex; flex-direction:column; gap:6px; }
.crop-aspect-row .param-label { padding:0 2px; }
.crop-aspect-select { height:30px; }
body.light .crop-visual-panel { border-top-color:rgba(124,58,237,.1); background:rgba(255,255,255,.15); }
body.light .crop-stage { background:rgba(255,255,255,.28); }
body.light .crop-preview-empty { color:rgba(42,35,32,.35); }

/* Processing edge — glows differently */
.edge-path.data-edge {
  stroke:url(#grad-data) !important;
  stroke-width:3;
}

/* run button removed */

/* Light mode adjustments */
body.light .node-params { border-top:1px solid rgba(124,58,237,.1); }
body.light .param-slider { background:rgba(124,58,237,.15); }
body.light .node-preview-area { background:#e8e0f8; }
body.light .param-select { background:rgba(255,255,255,.8); border-color:rgba(124,58,237,.2); color:var(--text); }

/* ── Light mode ── */
body.light {
  --bg:       #EAE7DC;
  --node-bg:  rgba(234,231,220,0.88);
  --node-bd:  rgba(129,117,110,.3);
  --accent1:  #5D4E49;
  --accent2:  #81756E;
  --accent3:  #A49B93;
  --text:     #2A2320;
  --text-dim: #81756E;
  --danger:   #c0392b;
}
body.light #canvas { background:var(--bg); }
body.light .node {
  background:rgba(222,218,210,0.75);
  border:1px solid rgba(129,117,110,.25);
  border-top:1px solid rgba(245,242,238,.9);
  box-shadow:0 4px 20px rgba(93,78,73,.08), inset 0 1px 0 rgba(245,242,238,.7);
}
body.light .node:hover {
  border-color:rgba(93,78,73,.5);
  box-shadow:0 0 16px rgba(93,78,73,.12), 0 4px 20px rgba(93,78,73,.1), inset 0 1px 0 rgba(245,242,238,.8);
}
body.light .node.selected {
  border-color:rgba(93,78,73,.7);
  box-shadow:0 0 18px rgba(93,78,73,.2), 0 4px 20px rgba(93,78,73,.12), inset 0 1px 0 rgba(245,242,238,.8);
}
body.light .node-header { border-bottom:1px solid rgba(129,117,110,.15); }
body.light .node-label  { color:var(--text); }
body.light .port-row    { color:#81756E; }
body.light .port        { background:rgba(234,231,220,.9); }
body.light .node-menu-btn { color:#A49B93; }
body.light .node-menu-btn:hover { background:rgba(93,78,73,.1); color:var(--text); }

body.light .group-node {
  background:rgba(210,206,198,0.7);
  border:1px solid rgba(129,117,110,.3);
  border-top:1px solid rgba(245,242,238,.9);
  box-shadow:0 4px 20px rgba(93,78,73,.08), inset 0 1px 0 rgba(245,242,238,.7);
}
body.light .group-node:hover {
  box-shadow:0 0 22px rgba(93,78,73,.12), 0 4px 20px rgba(93,78,73,.1), inset 0 1px 0 rgba(245,242,238,.9);
}
body.light .group-node-label { color:var(--text); }
body.light .group-node-hint  { color:#81756E; }
body.light .group-node-open-hint { color:rgba(93,78,73,.55); }

body.light #toolbar {
  background:rgba(218,214,206,.88);
  border:1px solid rgba(129,117,110,.2);
  box-shadow:0 4px 20px rgba(93,78,73,.1);
  backdrop-filter:blur(12px);
}
body.light .tb-btn {
  background:rgba(234,231,220,.7);
  border:1px solid rgba(129,117,110,.2);
  color:var(--text);
}
body.light .tb-btn:hover {
  background:rgba(93,78,73,.12);
  border-color:var(--accent1);
}
body.light .tb-sep { background:rgba(129,117,110,.2); }

body.light #node-ctx-menu,
body.light #ctx-menu {
  background:rgba(218,214,206,.96);
  border:1px solid rgba(129,117,110,.2);
  box-shadow:0 8px 28px rgba(93,78,73,.12);
}
body.light .nctx-item, body.light .ctx-item { color:var(--text); }
body.light .nctx-item:hover, body.light .ctx-item:hover { background:rgba(93,78,73,.1); }
body.light .nctx-sep, body.light .ctx-sep { background:rgba(129,117,110,.15); }
body.light .nctx-item.danger { color:var(--danger); }
body.light .nctx-icon { opacity:.6; }
body.light .node-type-badge { filter:saturate(0.4) brightness(0.6); }
body.light .badge-output  { background:rgba(93,78,73,.15);  color:#5D4E49; border-color:rgba(93,78,73,.3); }
body.light .badge-gen     { background:rgba(93,78,73,.12);  color:#5D4E49; border-color:rgba(93,78,73,.25); }
body.light .badge-glitch  { background:rgba(93,78,73,.12);  color:#5D4E49; border-color:rgba(93,78,73,.25); }
body.light .badge-mask    { background:rgba(93,78,73,.12);  color:#5D4E49; border-color:rgba(93,78,73,.25); }
body.light .badge-filter  { background:rgba(93,78,73,.12);  color:#5D4E49; border-color:rgba(93,78,73,.25); }
body.light .badge-adjust  { background:rgba(93,78,73,.12);  color:#5D4E49; border-color:rgba(93,78,73,.25); }
body.light .badge-fx      { background:rgba(93,78,73,.12);  color:#5D4E49; border-color:rgba(93,78,73,.25); }
body.light .badge-utility { background:rgba(93,78,73,.12);  color:#5D4E49; border-color:rgba(93,78,73,.25); }
body.light .port-row.output .port { border-color:#5D4E49; }
body.light .port-row.input  .port { border-color:#81756E; }
body.light .port-row.output .port:hover, body.light .port-row.output .port.active { background:#5D4E49; }
body.light .port-row.input  .port:hover, body.light .port-row.input  .port.active { background:#81756E; }
body.light .node.selected { border-color:#5D4E49 !important; box-shadow:0 0 18px rgba(93,78,73,.25), 0 4px 20px rgba(93,78,73,.1) !important; }
body.light .node.insert-target { border-color:#81756E !important; }
body.light .mute-badge { background:rgba(93,78,73,.12); color:#5D4E49; border-color:rgba(93,78,73,.3); }
body.light .node.muted,
body.light .group-node.muted { opacity:.4; filter:saturate(0.1); }
body.light .node.solo-preview { border-color:#5D4E49 !important; box-shadow:0 0 20px rgba(93,78,73,.3) !important; }
body.light .node.solo-preview::after { color:#5D4E49; }
body.light #autosave-indicator { color:#5D4E49; }
body.light #help-btn { background:rgba(93,78,73,.1); border-color:rgba(93,78,73,.25); color:#5D4E49; }
body.light #help-btn:hover { background:rgba(93,78,73,.2); border-color:#5D4E49; }

body.light #zoom-level { color:#81756E; }
body.light #hint        { color:#81756E; }
body.light #marquee     { border-color:var(--accent1); background:rgba(93,78,73,.06); }

body.light #group-modal { background:rgba(164,155,147,.35); }
body.light #gm-inner {
  background:rgba(218,214,206,.97);
  border:1.5px solid rgba(129,117,110,.25);
  box-shadow:0 0 60px rgba(93,78,73,.1), 0 24px 64px rgba(0,0,0,.12);
}
body.light #gm-header { border-bottom:1px solid rgba(129,117,110,.15); }
body.light #gm-title  { color:rgba(93,78,73,.75); }
body.light #gm-close  {
  background:rgba(93,78,73,.07);
  border:1px solid rgba(129,117,110,.2);
  color:#81756E;
}
body.light #gm-close:hover { background:rgba(192,57,43,.1); border-color:var(--danger); color:var(--danger); }
body.light .port-label-input { color:#81756E; }
body.light .port-label-input:not([readonly]) { color:var(--text); border-bottom-color:var(--accent1); }
body.light .edge-label { color:rgba(93,78,73,.5); }
body.light .edge-path { filter:none; opacity:.7; }
body.light #edges-svg #grad-main stop:first-child { stop-color:#81756E; }
body.light #edges-svg #grad-main stop:last-child  { stop-color:#5D4E49; }
html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); font-family:'Space Grotesk',sans-serif; color:var(--text); user-select:none; cursor:url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.74518 13.4903L1.88944 3.15369C1.58978 2.35036 2.37381 1.56714 3.17683 1.86762L13.5311 5.74203C14.3772 6.05865 14.403 7.24612 13.5713 7.59912L9.64312 9.2665C9.39907 9.37009 9.20615 9.56635 9.10676 9.81214L7.60919 13.5157C7.26718 14.3615 6.06403 14.3451 5.74518 13.4903Z' fill='black' stroke='white'/%3E%3C/svg%3E") 2 2, default; }

/* ── Canvas ── */
#canvas { position:absolute; inset:0; overflow:hidden; }
#grid-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#world { position:absolute; top:0; left:0; width:0; height:0; transform-origin:0 0; }

/* ── Marquee ── */
#marquee { position:fixed; border:1.5px solid var(--accent2); background:rgba(61,148,61,.08); border-radius:4px; pointer-events:none; display:none; z-index:3500; }
body.space-panning #marquee { display:none !important; }

body.space-panning, body.space-panning * { cursor:grab !important; }
body.space-panning .node,
body.space-panning .group-node,
body.space-panning .note-node { pointer-events:auto; }
body.space-panning .node:hover:not(.selected),
body.space-panning .group-node:hover:not(.selected),
body.space-panning .note-node:hover:not(.selected) {
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.space-panning .node-menu-btn,
body.space-panning .group-node-menu-btn,
body.space-panning .node-collapse-btn,
body.space-panning .color-swatch,
body.space-panning .text20-color-chip,
body.space-panning input,
body.space-panning textarea,
body.space-panning select,
body.space-panning button,
body.space-panning details summary,
body.space-panning .port,
body.space-panning .group-port-tab { cursor:grab !important; }
body.space-panning .node.dragging,
body.space-panning .group-node.dragging,
body.space-panning .note-node.dragging { cursor:grabbing !important; }

/* ── SVG / Canvas hybrid edges ── */
#edge-canvas {
  position:absolute; top:0; left:0; width:1px; height:1px;
  pointer-events:none; display:none; z-index:0;
}
#edges-svg { position:absolute; top:0; left:0; width:1px; height:1px; overflow:visible; pointer-events:none; z-index:1; }
/* v1.1.68 Interaction Paint Isolation Fix
   Keep visible node shells in front of SVG/canvas wires. Earlier performance-mode
   builds removed blur during pan/drag, which made the glassy node bodies reveal
   wires and overlapping node UI underneath. The graph still uses the same edge
   layers and hit-zones; this only hardens paint order and interaction-time fill. */
#world .node,
#world .group-node,
#world .note-node,
#world .frame-node { z-index:20; }
#world .node.selected,
#world .group-node.selected,
#world .note-node.selected,
#world .frame-node.selected { z-index:30; }
#world .node.dragging,
#world .group-node.dragging,
#world .note-node.dragging,
#world .frame-node.dragging { z-index:120; }
.edge-path { fill:none; stroke-width:2.5; stroke-linecap:round; filter:url(#glow-edge); transition:stroke-width .15s, opacity .15s; }
.edge-path.highlight { stroke:#e8e840 !important; stroke-width:4.5; filter:url(#glow-edge-hot); }
.edge-hit  { fill:none; stroke:transparent; stroke-width:20; cursor:pointer; pointer-events:stroke; }
.edge-draft { fill:none; stroke:var(--accent2); stroke-width:2; stroke-dasharray:6 4; opacity:.75; pointer-events:none; }
.edge-label { display:none !important; pointer-events:none !important; }
body.edge-renderer-canvas #edge-canvas { display:block; }
body.edge-renderer-canvas .edge-path:not(.highlight) { opacity:0; filter:none; }
body.edge-renderer-canvas .edge-path.highlight { opacity:1; }
body.edge-renderer-canvas .edge-hit { pointer-events:stroke; }


/* ── v1.1.44 Canvas + Graph Performance Mode ── */
body.performance-mode .node,
body.performance-mode .group-node,
body.performance-mode .note-node,
body.performance-mode .frame-node {
  transition:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.performance-mode .node,
body.performance-mode .group-node,
body.performance-mode .frame-node {
  background:rgba(15,15,30,.94) !important;
}
body.performance-mode .note-node {
  background:rgba(40,34,10,.94) !important;
}
body.light.performance-mode .node,
body.light.performance-mode .group-node,
body.light.performance-mode .frame-node {
  background:rgba(222,218,210,.96) !important;
}
body.light.performance-mode .note-node {
  background:rgba(255,248,220,.96) !important;
}
body.performance-mode .node:hover,
body.performance-mode .group-node:hover,
body.performance-mode .note-node:hover,
body.performance-mode .frame-node:hover,
body.performance-mode .node.selected,
body.performance-mode .group-node.selected,
body.performance-mode .note-node.selected,
body.performance-mode .frame-node.selected {
  box-shadow:none !important;
}
body.performance-mode .edge-path,
body.performance-mode .edge-draft,
body.performance-mode .edge-pulse {
  transition:none !important;
  filter:none !important;
}
body.performance-mode .edge-hit {
  pointer-events:none !important;
}
body.performance-mode .node-preview-area canvas,
body.performance-mode .rd-preview-canvas,
body.performance-mode .er-preview-canvas,
body.performance-mode .levels-hist-canvas,
body.performance-mode .curve-canvas,
body.performance-mode .crop-preview-canvas {
  image-rendering:auto !important;
}
body.performance-mode .preview-fit-strip,
body.performance-mode .preview-save-btn,
body.performance-mode .node-menu-btn,
body.performance-mode .group-node-menu-btn,
body.performance-mode .frame-menu-btn,
body.performance-mode .note-delete-btn {
  opacity:0 !important;
  pointer-events:none !important;
}
body.performance-mode #navigator-panel,
body.performance-mode #grid-svg {
  transition:none !important;
}
body.performance-mode #trace-mode-indicator {
  opacity:.65;
}

body.performance-mode #grid-svg { opacity:1 !important; }

/* v1.1.46 Large Graph UI Scaling
   Offscreen nodes keep their graph data and cached edge anchors, while the
   browser skips painting their visual subtree until they approach the viewport. */
.node.viewport-sleeping,
.group-node.viewport-sleeping,
.note-node.viewport-sleeping,
.frame-node.viewport-sleeping {
  visibility:hidden !important;
  pointer-events:none !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transition:none !important;
}
.node.viewport-sleeping *,
.group-node.viewport-sleeping *,
.note-node.viewport-sleeping *,
.frame-node.viewport-sleeping * {
  animation-play-state:paused !important;
}
body.performance-mode .node.viewport-sleeping,
body.performance-mode .group-node.viewport-sleeping,
body.performance-mode .note-node.viewport-sleeping,
body.performance-mode .frame-node.viewport-sleeping {
  opacity:0 !important;
}



/* v1.1.49 Zoom Simplified Node Mode
   At low zoom the main cost becomes painting hundreds of full DOM node UIs.
   Compact mode keeps shells, titles and ports. Map mode turns nodes into tiny
   graph-map blocks while preserving selection, active output state and edges. */
body.node-detail-compact .node,
body.node-detail-compact .group-node,
body.node-detail-compact .note-node,
body.node-detail-compact .frame-node,
body.node-detail-map .node,
body.node-detail-map .group-node,
body.node-detail-map .note-node,
body.node-detail-map .frame-node {
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transition:none !important;
}
body.node-detail-compact .node-image-area,
body.node-detail-compact .node-image-settings,
body.node-detail-compact .node-params,
body.node-detail-compact .hue-sat-panel,
body.node-detail-compact .levels-panel,
body.node-detail-compact .color-picker-wrap,
body.node-detail-compact .grad-ramp-wrap,
body.node-detail-compact .curve-editor-wrap,
body.node-detail-compact .crop-visual-panel,
body.node-detail-compact .node-preview-area,
body.node-detail-compact .output-settings-fold,
body.node-detail-compact .output-settings,
body.node-detail-compact .composite-layer-panel,
body.node-detail-compact .text20-editor,
body.node-detail-compact .ui-advanced,
body.node-detail-compact .rd-advanced,
body.node-detail-compact .node-name-row,
body.node-detail-compact .node-width-handle,
body.node-detail-compact .preview-fit-strip,
body.node-detail-compact .preview-save-btn,
body.node-detail-compact .note-body,
body.node-detail-compact .frame-body,
body.node-detail-compact .group-node-body {
  display:none !important;
}
body.node-detail-compact .node,
body.node-detail-compact .group-node,
body.node-detail-compact .note-node,
body.node-detail-compact .frame-node {
  border-radius:13px !important;
  box-shadow:0 2px 10px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.node-detail-compact .node-header,
body.node-detail-compact .group-node-header,
body.node-detail-compact .frame-header,
body.node-detail-compact .note-header {
  padding:7px 9px !important;
  border-bottom:1px solid rgba(255,255,255,.045) !important;
}
body.node-detail-compact .node-label,
body.node-detail-compact .group-node-label,
body.node-detail-compact .frame-label,
body.node-detail-compact .note-title {
  font-size:11px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.node-detail-compact .node-type-badge,
body.node-detail-compact .mute-badge,
body.node-detail-compact .node-menu-btn,
body.node-detail-compact .group-node-menu-btn,
body.node-detail-compact .frame-menu-btn,
body.node-detail-compact .note-delete-btn,
body.node-detail-compact .node-collapse-btn {
  display:none !important;
}
body.node-detail-compact .node-ports,
body.node-detail-compact .group-node-ports {
  padding:4px 0 6px !important;
  gap:2px !important;
}
body.node-detail-compact .port-row {
  min-height:10px !important;
  padding:0 8px !important;
  gap:4px !important;
}
body.node-detail-compact .port-label-input,
body.node-detail-compact .port-drag-handle {
  display:none !important;
}
body.node-detail-compact .port {
  width:10px !important;
  height:10px !important;
  border-width:2px !important;
}
body.node-detail-map .node-image-area,
body.node-detail-map .node-image-settings,
body.node-detail-map .node-params,
body.node-detail-map .hue-sat-panel,
body.node-detail-map .levels-panel,
body.node-detail-map .color-picker-wrap,
body.node-detail-map .grad-ramp-wrap,
body.node-detail-map .curve-editor-wrap,
body.node-detail-map .crop-visual-panel,
body.node-detail-map .node-preview-area,
body.node-detail-map .output-settings-fold,
body.node-detail-map .output-settings,
body.node-detail-map .composite-layer-panel,
body.node-detail-map .text20-editor,
body.node-detail-map .ui-advanced,
body.node-detail-map .rd-advanced,
body.node-detail-map .node-name-row,
body.node-detail-map .node-width-handle,
body.node-detail-map .preview-fit-strip,
body.node-detail-map .preview-save-btn,
body.node-detail-map .note-body,
body.node-detail-map .frame-body,
body.node-detail-map .group-node-body {
  display:none !important;
}
body.node-detail-map .node,
body.node-detail-map .group-node,
body.node-detail-map .note-node,
body.node-detail-map .frame-node {
  width:76px !important;
  min-width:76px !important;
  min-height:32px !important;
  border-radius:9px !important;
  box-shadow:0 1px 6px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow:visible !important;
}
body.node-detail-map .node-header,
body.node-detail-map .group-node-header,
body.node-detail-map .frame-header,
body.node-detail-map .note-header {
  min-height:20px !important;
  padding:5px 6px !important;
  gap:4px !important;
  border-bottom:none !important;
}
body.node-detail-map .node-label,
body.node-detail-map .group-node-label,
body.node-detail-map .frame-label,
body.node-detail-map .note-title,
body.node-detail-map .node-type-badge,
body.node-detail-map .mute-badge,
body.node-detail-map .node-menu-btn,
body.node-detail-map .group-node-menu-btn,
body.node-detail-map .frame-menu-btn,
body.node-detail-map .note-delete-btn,
body.node-detail-map .node-collapse-btn {
  display:none !important;
}
body.node-detail-map .node.selected .node-label,
body.node-detail-map .node:hover .node-label,
body.node-detail-map .group-node.selected .group-node-label,
body.node-detail-map .group-node:hover .group-node-label,
body.node-detail-map .frame-node.selected .frame-label,
body.node-detail-map .frame-node:hover .frame-label,
body.node-detail-map .note-node.selected .note-title,
body.node-detail-map .note-node:hover .note-title {
  display:block !important;
  position:absolute;
  left:50%; top:-19px;
  transform:translateX(-50%);
  width:max-content; max-width:180px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(7,7,15,.9);
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  font-size:9px !important;
  pointer-events:none;
}
body.light.node-detail-map .node.selected .node-label,
body.light.node-detail-map .node:hover .node-label,
body.light.node-detail-map .group-node.selected .group-node-label,
body.light.node-detail-map .group-node:hover .group-node-label,
body.light.node-detail-map .frame-node.selected .frame-label,
body.light.node-detail-map .frame-node:hover .frame-label,
body.light.node-detail-map .note-node.selected .note-title,
body.light.node-detail-map .note-node:hover .note-title {
  background:rgba(245,242,238,.96);
  color:var(--text);
  border-color:rgba(129,117,110,.20);
}
body.node-detail-map .node-dot,
body.node-detail-map .group-diamond,
body.node-detail-map .frame-dot,
body.node-detail-map .note-dot {
  width:8px !important;
  height:8px !important;
  flex:0 0 8px !important;
}
body.node-detail-map .node-ports,
body.node-detail-map .group-node-ports {
  padding:2px 0 5px !important;
  gap:0 !important;
}
body.node-detail-map .port-row {
  height:8px !important;
  min-height:8px !important;
  padding:0 5px !important;
  gap:0 !important;
}
body.node-detail-map .port-label-input,
body.node-detail-map .port-drag-handle {
  display:none !important;
}
body.node-detail-map .port {
  width:7px !important;
  height:7px !important;
  border-width:1.5px !important;
}
body.node-detail-map .node.active-output-node .node-header::after {
  content:'●';
  margin-left:auto;
  padding:0;
  border:none;
  background:transparent;
  font-size:10px;
  color:#67e8f9;
}
body.node-detail-map .node.active-output-node {
  border-color:rgba(6,182,212,.95) !important;
  box-shadow:0 0 0 1px rgba(6,182,212,.28), 0 0 14px rgba(6,182,212,.28) !important;
}
body.node-detail-map .node.proc-node::before,
body.node-detail-compact .node.proc-node::before {
  opacity:.04;
}

/* v1.1.45: keep the active-output indicator inside the node header.
   The v1.1.44 floating label lived above the node shell and became visually
   cramped/clipped when the whole graph was zoomed out. */
.node.active-output-node {
  border-color:rgba(6,182,212,.92) !important;
  box-shadow:0 0 0 1px rgba(6,182,212,.22), 0 0 24px rgba(6,182,212,.30), 0 8px 32px rgba(0,0,0,.42) !important;
}
.node.active-output-node.proc-node::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  background:linear-gradient(135deg, var(--proc-accent, #7c3aed) 0%, transparent 34%);
  opacity:.06;
  z-index:0;
}
.node.active-output-node .node-header { position:relative; }
.node.active-output-node .node-header::after {
  content:'ACTIVE';
  flex:0 0 auto;
  margin-left:4px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(103,232,249,.28);
  background:rgba(6,182,212,.12);
  color:#67e8f9;
  font-size:8px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.08em;
  line-height:1.1;
  opacity:.88;
  pointer-events:none;
  white-space:nowrap;
}
body.light .node.active-output-node .node-header::after {
  background:rgba(14,116,144,.08);
  border-color:rgba(14,116,144,.22);
  color:#0e7490;
}
body.performance-mode .node.active-output-node .node-header::after { display:none; }

/* ══════════════════════════════
   REGULAR NODE
══════════════════════════════ */
.node {
  position:absolute;
  background:rgba(15,15,30,0.55);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.13);
  border-radius:18px; min-width:175px; cursor:grab;
  transition:border-color .2s, box-shadow .2s;
  box-shadow:0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.node:hover   { border-color:rgba(124,58,237,.7); box-shadow:0 0 20px rgba(124,58,237,.3), 0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.node.dragging{ cursor:grabbing; z-index:100; border-color:rgba(124,58,237,.8); box-shadow:0 0 24px rgba(124,58,237,.35), 0 12px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1); }
.node.selected{ border-color:rgba(6,182,212,.7); box-shadow:0 0 22px rgba(6,182,212,.35), 0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(6,182,212,.1); }
.node.insert-target{ border-color:rgba(232,232,64,.8); box-shadow:0 0 22px rgba(232,232,64,.4), 0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(232,232,64,.1); }
/* ── Lazy connection: drag a wire from a port onto a node body to auto-pick a compatible port ── */
.node.port-drop-target,
.group-node.port-drop-target{ border-color:rgba(52,211,153,.9) !important; outline:2px solid rgba(52,211,153,.55); outline-offset:2px; box-shadow:0 0 24px rgba(52,211,153,.5), 0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(52,211,153,.14) !important; }
body.performance-mode .node.port-drop-target,
body.performance-mode .group-node.port-drop-target{ border-color:rgba(52,211,153,.95) !important; outline:2px solid rgba(52,211,153,.72); outline-offset:2px; box-shadow:0 0 0 2px rgba(52,211,153,.22), 0 0 18px rgba(52,211,153,.42) !important; }
.port.lazy-port-target,
.group-port-tab.lazy-port-target{ background:#34d399 !important; border-color:#34d399 !important; box-shadow:0 0 0 3px rgba(52,211,153,.22), 0 0 15px rgba(52,211,153,.66) !important; transform:scale(1.5); }
body.light .node.port-drop-target,
body.light .group-node.port-drop-target{ border-color:#10b981 !important; outline-color:rgba(16,185,129,.55); }
body.light .port.lazy-port-target,
body.light .group-port-tab.lazy-port-target{ background:#10b981 !important; border-color:#10b981 !important; }
/* ── Signal trace pulse (double-click / T / menu → ripple glow through connected wires) ── */
.edge-pulse{ fill:none; pointer-events:none; stroke-linecap:round; }
@keyframes signalNodeFlash {
  0%   { box-shadow:0 0 0 0 transparent; }
  28%  { box-shadow:0 0 26px 3px var(--signal-color, #06b6d4); border-color:var(--signal-color, #06b6d4); }
  100% { box-shadow:0 0 0 0 transparent; }
}
.node.signal-flash, .group-node.signal-flash { animation:signalNodeFlash .55s ease-out; }
@media (prefers-reduced-motion: reduce){ .node.signal-flash, .group-node.signal-flash { animation-duration:.3s; } }
/* persistent path highlight while Trace Mode is active */
.node.trace-path-node, .group-node.trace-path-node{ border-color:var(--signal-color,#06b6d4); box-shadow:0 0 16px -2px var(--signal-color,#06b6d4); }
#trace-mode-indicator{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; z-index:1200;
  padding:7px 14px; border-radius:999px;
  background:rgba(7,7,15,.82); border:1px solid rgba(124,58,237,.5);
  color:var(--text); font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em;
  box-shadow:0 6px 24px rgba(0,0,0,.5); backdrop-filter:blur(8px); pointer-events:none;
}
#trace-mode-indicator .tmi-dot{ width:8px; height:8px; border-radius:50%; background:#06b6d4; box-shadow:0 0 10px #06b6d4; animation:signalNodeFlash 1.4s ease-in-out infinite; }
#trace-mode-indicator .tmi-hint{ color:var(--text-dim); letter-spacing:.06em; }
body.light #trace-mode-indicator{ background:rgba(255,255,255,.9); color:#2a2730; border-color:rgba(124,58,237,.35); }
.node.muted,
.group-node.muted { opacity:.35; filter:saturate(0.15); }
.node.muted .node-type-badge,
.group-node.muted .group-node-label { text-decoration:line-through; }
.group-node.muted .group-diamond { opacity:.45; filter:saturate(0.2); }
.node.solo-preview {
  border-color:#f472b6 !important;
  box-shadow:0 0 24px rgba(244,114,182,.55), 0 4px 24px rgba(0,0,0,.6) !important;
}
.node.solo-preview::after {
  content:'PREVIEW';
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  font-size:8px; font-family:'JetBrains Mono',monospace; letter-spacing:.1em;
  color:#f472b6; opacity:.8; pointer-events:none; white-space:nowrap;
}
.mute-badge {
  font-size:8px; font-family:'JetBrains Mono',monospace; letter-spacing:.04em;
  padding:2px 5px; border-radius:4px; flex-shrink:0;
  background:rgba(251,191,36,.15); color:#fbbf24; border:1px solid rgba(251,191,36,.3);
}
.node.alt-dragging { border-color:rgba(244,114,182,.8) !important; box-shadow:0 0 22px rgba(244,114,182,.4), 0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(244,114,182,.1) !important; cursor:grabbing; }

.node-header { display:flex; align-items:center; gap:8px; padding:10px 10px 8px 12px; border-bottom:1px solid rgba(255,255,255,.06); }
.node-dot    { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.node-label  { font-size:13px; font-weight:500; letter-spacing:.02em; outline:none; background:transparent; border:none; color:var(--text); width:100%; cursor:inherit; min-width:0; }
.node-label:focus { cursor:text; border-bottom:1px solid var(--accent1); }
.node-label[readonly], .group-node-label[readonly] { pointer-events:none; }
.node-title-readonly { cursor:grab; pointer-events:none; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.node-name-input, .port-label-input { user-select:text; -webkit-user-select:text; }
.port-label-input[readonly], .node-title-readonly { caret-color:transparent; }
.node-name-row {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px 9px;
  border-top:1px solid rgba(255,255,255,.055);
}
.node-name-label {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); letter-spacing:.05em; flex-shrink:0;
}
.node-name-input {
  min-width:0; flex:1; height:24px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08);
  border-radius:6px; color:var(--text); font-family:'Space Grotesk',sans-serif;
  font-size:11px; padding:3px 7px; outline:none;
}
.node-name-input::placeholder { color:var(--text-dim); opacity:.55; }
.node-name-input:focus { border-color:var(--accent1); background:rgba(255,255,255,.065); }
.node-width-handle {
  position:absolute; top:40px; bottom:12px; right:-7px; width:14px;
  cursor:ew-resize; z-index:120; opacity:.42; transition:opacity .12s, background .12s;
  touch-action:none; border-radius:999px; pointer-events:auto;
}
.node-width-handle::after {
  content:''; position:absolute; top:50%; right:5px; width:3px; height:44px; transform:translateY(-50%);
  border-radius:3px; background:rgba(255,255,255,.34);
  box-shadow:0 0 8px rgba(6,182,212,.22);
}
.node:hover .node-width-handle, .node.selected .node-width-handle,
.group-node:hover .node-width-handle, .group-node.selected .node-width-handle,
.node-width-handle.dragging { opacity:1; }
.node-width-handle:hover { background:rgba(6,182,212,.08); }
.node-width-handle:hover::after, .node-width-handle.dragging::after { background:var(--accent2); box-shadow:0 0 12px rgba(6,182,212,.65); }
.node.proc-node > .node-width-handle { position:absolute; z-index:120; }
.node.collapsed .node-name-row { display:none !important; }
body.light .node-name-row { border-top-color:rgba(124,58,237,.08); }
body.light .node-name-input { background:rgba(255,255,255,.55); border-color:rgba(129,117,110,.16); color:var(--text); }
body.light .node-width-handle::after { background:rgba(42,35,32,.32); box-shadow:0 0 8px rgba(93,78,73,.10); }
body.light .node-width-handle:hover::after, body.light .node-width-handle.dragging::after { background:#5D4E49; box-shadow:0 0 10px rgba(93,78,73,.22); }
body.node-width-resizing, body.node-width-resizing * { cursor:ew-resize !important; user-select:none !important; }

/* ⋮ menu button */
.node-menu-btn {
  flex-shrink:0; background:none; border:none; color:var(--text-dim);
  cursor:pointer; font-size:16px; line-height:1; padding:0 4px;
  border-radius:5px; transition:color .15s, background .15s;
  display:flex; align-items:center; justify-content:center; height:22px; width:22px;
  letter-spacing:0; opacity:0;
}
.node:hover .node-menu-btn,
.node-menu-btn.open { opacity:1; color:var(--text); background:rgba(255,255,255,.08); }

.node-ports { padding:8px 0 10px; display:flex; flex-direction:column; gap:5px; }
.port-row { display:flex; align-items:center; padding:0 10px; gap:8px; font-size:11px; font-family:'JetBrains Mono',monospace; color:var(--text-dim); position:relative; }
.port-row.input  { justify-content:flex-start; }
.port-row.output { justify-content:flex-end; }
.port {
  width:12px; height:12px; border-radius:50%; background:var(--node-bg);
  cursor:crosshair; flex-shrink:0;
  transition:background .15s, transform .15s, border-color .15s;
  position:relative; z-index:10; border:2px solid var(--accent1);
}
.port-row.output .port { border-color:var(--accent2); }
.port-row.input  .port { border-color:var(--accent3); }
.port-row.kind-uv .port { border-color:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.35); }
.port-row.kind-uv .port:hover, .port-row.kind-uv .port.active { background:#22c55e; }
.port-row.kind-color .port { border-color:#f59e0b; box-shadow:0 0 8px rgba(245,158,11,.28); }
.port-row.kind-color .port:hover, .port-row.kind-color .port.active { background:#f59e0b; }
.port:hover, .port.active { transform:scale(1.45); }
.port-row.output .port:hover, .port-row.output .port.active { background:var(--accent2); }
.port-row.input  .port:hover, .port-row.input  .port.active { background:var(--accent3); }
.port-label-input {
  background:transparent; border:none; outline:none;
  font-size:11px; font-family:'JetBrains Mono',monospace; color:var(--text-dim);
  width:52px; cursor:default; padding:0; caret-color:transparent;
  pointer-events:auto; letter-spacing:.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.port-label-input[readonly] { user-select:none; -webkit-user-select:none; pointer-events:auto; caret-color:transparent !important; }
.port-label-input:not([readonly]) {
  color:var(--text); cursor:text; caret-color:var(--accent2);
  border-bottom:1px solid rgba(6,182,212,.6);
  width:80px;
}

/* v1.1.62 QA: Output now exposes material channel inputs with longer labels.
   Give Output ports enough room so Base Color / Normal / Roughness stay readable. */
.node.output-node { min-width:280px; }
.node.output-node .node-ports { gap:6px; }
.node.output-node .port-row { padding:0 14px; }
.node.output-node .port-label-input { width:92px; }
.node.output-node .port-row.input .port-label-input { text-align:left; }
.port-drag-handle {
  width:10px; flex-shrink:0; cursor:grab; opacity:0;
  display:flex; flex-direction:column; gap:2px; align-items:center; justify-content:center; padding:2px 0;
  transition:opacity .15s;
}
.port-drag-handle span {
  display:block; width:10px; height:1.5px;
  background:var(--text-dim); border-radius:1px;
}
.port-row:hover .port-drag-handle { opacity:1; }
.port-drag-handle:active { cursor:grabbing; }
.port-row.drag-ghost { opacity:.3; }
.port-row.drag-over-top    { border-top:2px solid var(--accent2); }
.port-row.drag-over-bottom { border-bottom:2px solid var(--accent2); }

/* ══════════════════════════════
   GROUP NODE  (collapsed card)
══════════════════════════════ */
.group-node {
  position:absolute;
  background:rgba(13,13,31,0.5);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(6,182,212,.25);
  border-top:1px solid rgba(6,182,212,.4);
  border-radius:20px; min-width:210px; cursor:grab;
  box-shadow:0 0 28px rgba(6,182,212,.18), 0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(6,182,212,.08);
  transition:border-color .2s, box-shadow .2s;
}
.group-node:hover   { border-color:rgba(6,182,212,.6); border-top-color:rgba(6,182,212,.8); box-shadow:0 0 32px rgba(6,182,212,.3), 0 8px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(6,182,212,.12); }
.group-node.dragging{ cursor:grabbing; z-index:100; }
.group-node.selected{ border-color:rgba(6,182,212,.7); box-shadow:0 0 36px rgba(6,182,212,.45), 0 8px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(6,182,212,.15); }

.group-node-header {
  display:flex; align-items:center; gap:10px;
  padding:13px 10px 11px 14px;
  border-bottom:1px solid rgba(6,182,212,.12);
}
.group-diamond {
  width:14px; height:14px; border-radius:3px; flex-shrink:0;
  background:var(--accent2); transform:rotate(45deg);
  box-shadow:0 0 8px rgba(6,182,212,.7);
}
.group-node-label {
  font-size:15px; font-weight:600; letter-spacing:.01em;
  outline:none; background:transparent; border:none; color:var(--text);
  width:100%; cursor:inherit; min-width:0;
}
.group-node-label:focus { cursor:text; border-bottom:1px solid var(--accent1); }
.group-node-menu-btn {
  flex-shrink:0; background:none; border:none; color:var(--text-dim);
  cursor:pointer; font-size:16px; line-height:1; padding:0 4px;
  border-radius:5px; transition:color .15s, background .15s;
  display:flex; align-items:center; justify-content:center; height:22px; width:22px; opacity:0;
}
.group-node:hover .group-node-menu-btn,
.group-node-menu-btn.open { opacity:1; color:var(--text); background:rgba(255,255,255,.08); }

.group-node-body {
  padding:12px 14px 14px;
  display:flex; flex-direction:column; gap:6px;
  min-height:54px; position:relative;
}
.group-node-hint {
  font-size:10.5px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); opacity:.6; letter-spacing:.04em;
}
.group-node-open-hint {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:rgba(6,182,212,.5); letter-spacing:.04em; margin-top:2px;
}
.component-node-badge {
  font-size:8px; font-family:'JetBrains Mono',monospace; letter-spacing:.08em;
  text-transform:uppercase; padding:2px 6px; border-radius:999px;
  color:#c4b5fd; background:rgba(167,139,250,.16); border:1px solid rgba(167,139,250,.28);
  white-space:nowrap;
}
.group-node.is-component { border-color:rgba(167,139,250,.35); border-top-color:rgba(167,139,250,.55); }
.group-node.is-component .group-diamond { background:#a78bfa; box-shadow:0 0 8px rgba(167,139,250,.7); }

/* Tab-style port handles on group node edges */
.group-port-tab {
  position:absolute; cursor:crosshair;
  width:7px; height:28px; border-radius:3px;
  top:50%; transform:translateY(-50%);
  transition:opacity .15s, width .15s, box-shadow .15s;
  z-index:20;
}
.group-port-tab.input-tab  { left:-5px;  background:var(--accent3); box-shadow:0 0 8px rgba(244,114,182,.6); }
.group-port-tab.output-tab { right:-5px; background:var(--accent2); box-shadow:0 0 8px rgba(6,182,212,.6); }
.group-port-tab:hover { width:10px; box-shadow:0 0 14px rgba(6,182,212,.9); }

.group-port-tab.input-tab:hover { box-shadow:0 0 14px rgba(6,182,212,.9); }

/* ── Frames / visual sections ──
   Frames replace executable Groups/Components. They are pure canvas organization:
   no ports, no subgraph, no execution context. */
.frame-node {
  position:absolute;
  min-width:220px; min-height:120px;
  width:360px; height:240px;
  background:rgba(6,182,212,.035);
  border:1.5px solid rgba(6,182,212,.34);
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(6,182,212,.06), 0 0 34px rgba(6,182,212,.07);
  cursor:default;
  overflow:hidden;
  z-index:0;
  user-select:none;
  pointer-events:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.frame-node:hover {
  border-color:rgba(6,182,212,.58);
  box-shadow:inset 0 0 0 1px rgba(6,182,212,.1), 0 0 38px rgba(6,182,212,.12);
}
.frame-node.selected {
  border-color:rgba(6,182,212,.9);
  box-shadow:0 0 0 1px rgba(6,182,212,.32), 0 0 42px rgba(6,182,212,.18), inset 0 0 0 1px rgba(6,182,212,.16);
}
.frame-node.dragging { cursor:grabbing; }
#world .node,
#world .note-node,
#world .group-node { z-index:10; }
#world .node.dragging,
#world .note-node.dragging,
#world .group-node.dragging { z-index:100; }
.frame-header {
  height:34px;
  display:flex; align-items:center; gap:8px;
  padding:8px 12px 7px;
  border-bottom:1px solid rgba(6,182,212,.13);
  background:rgba(6,182,212,.045);
  cursor:grab;
  pointer-events:auto;
}
.frame-dot {
  width:9px; height:9px; border-radius:3px;
  background:var(--frame-color, #06b6d4);
  transform:rotate(45deg);
  box-shadow:0 0 8px var(--frame-color, #06b6d4);
  flex-shrink:0;
}
.frame-title-label {
  flex:1; min-width:0;
  color:rgba(103,232,249,.9);
  font-family:'JetBrains Mono', monospace;
  font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
}
.frame-menu-btn {
  width:22px; height:22px; border:0; border-radius:6px;
  background:rgba(255,255,255,.035);
  color:rgba(255,255,255,.52); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .14s, background .14s, color .14s;
  pointer-events:auto;
}
.frame-node:hover .frame-menu-btn,
.frame-menu-btn.open { opacity:1; }
.frame-menu-btn:hover { background:rgba(6,182,212,.16); color:#fff; }
.frame-resize-handle {
  position:absolute; right:0; bottom:0;
  width:22px; height:22px; cursor:nwse-resize;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:5px; color:rgba(103,232,249,.64);
  opacity:.62; transition:opacity .14s, background .14s;
  pointer-events:auto;
}
.frame-resize-handle:hover { opacity:1; background:rgba(6,182,212,.08); }
body.space-panning .frame-node,
body.space-panning .frame-node * { cursor:grab !important; }
body.space-panning .frame-node.dragging,
body.space-panning .frame-node.dragging * { cursor:grabbing !important; }
body.light .frame-node {
  background:rgba(14,116,144,.055);
  border-color:rgba(14,116,144,.28);
  box-shadow:inset 0 0 0 1px rgba(14,116,144,.06), 0 8px 26px rgba(93,78,73,.07);
}
body.light .frame-node:hover { border-color:rgba(14,116,144,.45); }
body.light .frame-node.selected { border-color:rgba(14,116,144,.68); box-shadow:0 0 0 1px rgba(14,116,144,.18), 0 8px 28px rgba(93,78,73,.08); }
body.light .frame-header { background:rgba(14,116,144,.055); border-bottom-color:rgba(14,116,144,.11); }
body.light .frame-title-label { color:#0e7490; }
body.light .frame-menu-btn { background:rgba(93,78,73,.055); color:rgba(42,35,32,.52); }
body.light .frame-menu-btn:hover { background:rgba(14,116,144,.1); color:#0e7490; }

/* ══════════════════════════════
   NODE CONTEXT MENU  (per-node)
══════════════════════════════ */
.node-ctx {
  position:fixed; background:rgba(10,10,22,.96);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px; padding:5px; min-width:175px;
  backdrop-filter:blur(16px); z-index:4000;
  box-shadow:0 8px 32px rgba(0,0,0,.7), 0 0 0 1px rgba(124,58,237,.1);
  display:none;
}
.node-ctx.visible { display:block; }
.nctx-item {
  padding:8px 11px; border-radius:6px; font-size:12.5px;
  cursor:pointer; display:flex; align-items:center; gap:9px;
  color:var(--text); transition:background .1s; white-space:nowrap;
}
.nctx-item:hover { background:rgba(124,58,237,.22); }
.nctx-item.danger { color:var(--danger); }
.nctx-item.danger:hover { background:rgba(239,68,68,.15); }
.nctx-sep { height:1px; background:rgba(255,255,255,.07); margin:4px 0; }
.nctx-icon { width:15px; text-align:center; opacity:.7; font-size:13px; }

/* ══════════════════════════════
   CANVAS CONTEXT MENU
══════════════════════════════ */
#ctx-menu {
  position:fixed; background:rgba(10,10,22,.96); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:5px; min-width:170px; backdrop-filter:blur(16px);
  z-index:3000; box-shadow:0 8px 32px rgba(0,0,0,.6); display:none;
}
.ctx-item { padding:8px 12px; border-radius:6px; font-size:12.5px; cursor:pointer; display:flex; align-items:center; gap:8px; color:var(--text); transition:background .1s; }
.ctx-item:hover { background:rgba(124,58,237,.2); }
.ctx-sep { height:1px; background:rgba(255,255,255,.07); margin:4px 0; }

/* ══════════════════════════════
   TOOLBAR
══════════════════════════════ */
#toolbar {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(10,10,20,.88);
  border:1px solid var(--node-bd); border-radius:18px; padding:8px 10px;
  backdrop-filter:blur(14px); box-shadow:0 4px 32px rgba(0,0,0,.5); z-index:4310;
  max-width:calc(100vw - 32px); overflow:hidden;
  transition:max-width .34s cubic-bezier(.22,.61,.36,1), opacity .18s, transform .34s cubic-bezier(.22,.61,.36,1), border-radius .28s, padding .28s;
}
#toolbar.compact { max-width:360px; }
#toolbar.expanded { max-width:980px; }
#toolbar.canvas-active:not(:hover) { opacity:.46; }
.tb-btn {
  display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07); border-radius:10px; color:var(--text);
  font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:600;
  padding:7px 13px; cursor:pointer; transition:background .15s, border-color .15s, opacity .18s; white-space:nowrap;
  height:36px; flex-shrink:0;
}
.tb-btn:hover { background:rgba(124,58,237,.18); border-color:var(--accent1); }
.tb-icon-btn { width:42px; padding:0; justify-content:center; }
.tb-sep { width:1px; height:30px; background:var(--node-bd); margin:0 8px; flex-shrink:0; opacity:.9; }
.tb-brand {
  display:flex; align-items:center; justify-content:center; height:36px;
  overflow:hidden; max-width:84px; opacity:1; flex-shrink:0;
  transition:max-width .28s cubic-bezier(.22,.61,.36,1), opacity .16s, margin .28s;
}
.tb-brand svg { width:80px; height:auto; display:block; filter:drop-shadow(0 0 10px rgba(124,58,237,.25)); }
#toolbar.expanded .tb-brand { max-width:0; opacity:0; margin-left:-8px; margin-right:-8px; }
.tb-expanded-content {
  display:flex; align-items:center; gap:8px; overflow:hidden;
  max-width:0; opacity:0; transform:translateX(-8px); pointer-events:none; flex-shrink:1;
  transition:max-width .34s cubic-bezier(.22,.61,.36,1), opacity .18s ease, transform .34s cubic-bezier(.22,.61,.36,1);
}
#toolbar.expanded .tb-expanded-content { max-width:760px; opacity:1; transform:translateX(0); pointer-events:auto; }
.tb-toolbar-toggle {
  width:34px; height:36px; padding:0; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--text); cursor:pointer; border-radius:10px; flex-shrink:0;
  transition:background .15s, color .15s, transform .34s cubic-bezier(.22,.61,.36,1);
}
.tb-toolbar-toggle:hover { background:rgba(124,58,237,.16); color:#fff; }
.tb-toolbar-toggle svg { width:19px; height:19px; stroke-width:3; transition:transform .34s cubic-bezier(.22,.61,.36,1); }
#toolbar.expanded .tb-toolbar-toggle svg { transform:rotate(180deg); }
#global-transport.timeline-hidden { display:none !important; }
.tb-timeline-toggle {
  width:38px; padding:0; justify-content:center; gap:0;
}
.tb-timeline-toggle .material-symbols-outlined {
  font-family:'Material Symbols Outlined'; font-weight:400; font-style:normal; font-size:20px; line-height:1;
  letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr;
  -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; font-feature-settings:'liga';
}
.tb-timeline-toggle.is-active {
  background:rgba(124,58,237,.20); border-color:rgba(124,58,237,.45); color:#fff; box-shadow:0 0 12px rgba(124,58,237,.12);
}
body.light .tb-timeline-toggle.is-active { background:rgba(124,58,237,.10); border-color:rgba(124,58,237,.28); color:var(--text); box-shadow:none; }
.tb-align-group {
  display:flex; gap:3px; align-items:center;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:10px; padding:3px; flex-shrink:0;
}
.tb-align-btn {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:28px;
  background:none; border:none; border-radius:7px;
  color:var(--text-dim); cursor:pointer;
  transition:background .15s, color .15s, opacity .18s;
}
.tb-align-btn:hover { background:rgba(124,58,237,.2); color:var(--text); }
.tb-align-btn:disabled { opacity:.25; cursor:default; }
body.light .tb-align-group { background:rgba(124,58,237,.05); border-color:rgba(124,58,237,.12); }
body.light .tb-align-btn:hover { background:rgba(124,58,237,.1); }
body.light #toolbar { background:rgba(218,214,206,.88); border-color:rgba(129,117,110,.2); box-shadow:0 4px 20px rgba(93,78,73,.1); }
body.light .tb-btn { background:rgba(234,231,220,.7); border-color:rgba(129,117,110,.2); color:var(--text); }
body.light .tb-btn:hover { background:rgba(93,78,73,.12); border-color:var(--accent1); }
body.light .tb-toolbar-toggle { color:var(--text); }
#zoom-level { position:fixed; top:20px; right:22px; font-size:11px; font-family:'JetBrains Mono',monospace; color:var(--text); opacity:.55; pointer-events:none; }
#hint { position:fixed; top:20px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--text); font-family:'JetBrains Mono',monospace; letter-spacing:.03em; pointer-events:none; opacity:.55; white-space:nowrap; }
#version-label { position:fixed; bottom:8px; left:50%; transform:translateX(-50%); font-size:10px; font-family:'JetBrains Mono',monospace; color:var(--text); opacity:.5; pointer-events:none; letter-spacing:.06em; z-index:999; white-space:nowrap; }
#help-btn {
  position:fixed; bottom:8px; right:16px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  color:var(--text-dim); font-size:12px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:999; transition:background .15s, color .15s, border-color .15s;
  font-family:'Space Grotesk',sans-serif; line-height:1;
}
#help-btn:hover { background:rgba(124,58,237,.3); border-color:var(--accent1); color:#fff; }
body.light #help-btn { background:rgba(124,58,237,.08); border-color:rgba(124,58,237,.2); }

#autosave-indicator {
  position:fixed; bottom:8px; right:16px;
  font-size:9px; font-family:'JetBrains Mono',monospace; letter-spacing:.06em;
  color:var(--accent2); opacity:0; pointer-events:none; z-index:999;
  transition:opacity .4s;
}
#autosave-indicator.show { opacity:.7; }
body.light #version-label { opacity:.4; }

/* ══════════════════════════════
   GROUP MODAL
══════════════════════════════ */
#group-modal {
  position:fixed; inset:0; z-index:2000; display:none;
  background:rgba(4,4,12,.78); backdrop-filter:blur(8px);
  align-items:center; justify-content:center;
}
#group-modal.open { display:flex; }
#gm-inner {
  position:relative; width:80vw; height:74vh; max-width:1140px;
  background:#090916; border:1.5px solid rgba(6,182,212,.3);
  border-radius:20px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 0 80px rgba(6,182,212,.18), 0 0 0 1px rgba(6,182,212,.08), 0 24px 64px rgba(0,0,0,.75);
}
#gm-header {
  display:flex; align-items:center; gap:10px;
  padding:13px 18px; border-bottom:1px solid rgba(6,182,212,.15); flex-shrink:0;
}
#gm-title { font-size:12px; font-weight:500; color:rgba(6,182,212,.75); letter-spacing:.07em; text-transform:uppercase; }
#gm-close {
  margin-left:auto; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:7px; color:var(--text-dim); cursor:pointer; font-size:11.5px; padding:5px 12px;
  font-family:'Space Grotesk',sans-serif; transition:background .15s, color .15s;
  letter-spacing:.03em;
}
#gm-close:hover { background:rgba(239,68,68,.18); border-color:var(--danger); color:var(--danger); }
#gm-monitor {
  position:absolute; right:14px; bottom:14px; z-index:80;
  width:280px; min-width:220px; max-width:min(46vw, 440px);
  border:1px solid rgba(6,182,212,.24);
  border-radius:14px;
  background:rgba(7,7,18,.82);
  backdrop-filter:blur(16px);
  box-shadow:0 14px 42px rgba(0,0,0,.42), 0 0 24px rgba(6,182,212,.08);
  overflow:hidden; user-select:none;
}
#gm-monitor.collapsed .gm-monitor-body { display:none; }
.gm-monitor-head {
  display:flex; align-items:center; gap:8px;
  padding:8px 9px 7px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.gm-monitor-title {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:rgba(6,182,212,.82); letter-spacing:.07em; text-transform:uppercase;
  flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gm-monitor-select {
  height:24px; border-radius:7px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05); color:var(--text); font-size:10px;
  font-family:'Space Grotesk',sans-serif; outline:none; padding:0 7px;
}
.gm-monitor-toggle {
  width:24px; height:24px; border-radius:7px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05); color:var(--text-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1;
}
.gm-monitor-toggle:hover { background:rgba(6,182,212,.12); color:#fff; border-color:rgba(6,182,212,.35); }
.gm-monitor-body { padding:9px; }
.gm-monitor-canvas-wrap {
  position:relative; height:172px; border-radius:10px; overflow:hidden;
  background:#05050d;
  border:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center;
}
.gm-monitor-canvas-wrap canvas {
  max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; display:block;
}
.gm-monitor-empty {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:16px; text-align:center; color:rgba(255,255,255,.42);
  font-size:11px; line-height:1.35;
  pointer-events:none;
}
.gm-monitor-empty.soft {
  inset:auto 8px 8px auto; min-width:0; max-width:65%;
  padding:5px 8px; border-radius:999px;
  background:rgba(0,0,0,.42); color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.08);
  font-size:9px; justify-content:flex-end;
}
.gm-monitor-foot {
  margin-top:7px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:9px; font-family:'JetBrains Mono',monospace; color:rgba(255,255,255,.42);
}
.gm-monitor-status { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-monitor-res { opacity:.78; white-space:nowrap; }
body.light #gm-monitor { background:rgba(250,248,244,.88); border-color:rgba(6,182,212,.2); box-shadow:0 12px 36px rgba(64,50,40,.15); }
body.light .gm-monitor-canvas-wrap { background:#eee9e0; border-color:rgba(93,78,73,.12); }
body.light .gm-monitor-empty { color:rgba(93,78,73,.52); }
body.light .gm-monitor-foot { color:rgba(93,78,73,.52); }

/* symbolic in/out port bars on modal edges */
#gm-canvas-wrap { position:relative; flex:1; overflow:hidden; cursor:default; }
#gm-port-in {
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:56px; background:var(--accent3);
  border-radius:0 4px 4px 0; z-index:10;
  box-shadow:0 0 12px rgba(244,114,182,.6);
  pointer-events:none;
}
#gm-port-out {
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:6px; height:56px; background:var(--accent2);
  border-radius:4px 0 0 4px; z-index:10;
  box-shadow:0 0 12px rgba(6,182,212,.6);
  pointer-events:none;
}
#gm-port-in-label  { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:10px; font-family:'JetBrains Mono',monospace; color:rgba(6,182,212,.5); pointer-events:none; z-index:11; }
#gm-port-out-label { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:10px; font-family:'JetBrains Mono',monospace; color:rgba(6,182,212,.5); pointer-events:none; z-index:11; }

/* Real group/component boundary ports inside the subgraph editor. */
#gm-port-in, #gm-port-out, #gm-port-in-label, #gm-port-out-label { display:none !important; }
.gm-boundary-port {
  position:absolute; z-index:35; top:50%;
  display:flex; align-items:center; gap:7px;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:rgba(6,182,212,.68); letter-spacing:.04em;
  pointer-events:none; user-select:none;
}
.gm-boundary-port .port {
  pointer-events:auto; width:14px; height:36px; border-radius:4px;
  background:rgba(6,182,212,.82); border:1px solid rgba(103,232,249,.9);
  box-shadow:0 0 13px rgba(6,182,212,.7); cursor:crosshair;
}
.gm-boundary-port.input-boundary { left:-7px; }
.gm-boundary-port.output-boundary { right:-7px; flex-direction:row-reverse; }
.gm-boundary-port.input-boundary .port { background:rgba(244,114,182,.82); border-color:rgba(249,168,212,.9); box-shadow:0 0 13px rgba(244,114,182,.65); }
.gm-boundary-port .gm-boundary-label {
  max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-transform:lowercase; opacity:.85;
}
body.light .gm-boundary-port { color:rgba(93,78,73,.72); }
body.light .gm-boundary-port .port { box-shadow:none; filter:saturate(.55); }

#gm-grid   { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#gm-world  { position:absolute; top:0; left:0; width:0; height:0; transform-origin:0 0; }
#gm-edges  { position:absolute; top:0; left:0; width:1px; height:1px; overflow:visible; pointer-events:none; }


/* ── Performance HUD ── */
#perf-hud {
  position:fixed; left:18px; bottom:18px; z-index:1200;
  min-width:158px; padding:8px 10px;
  border-radius:10px; border:1px solid rgba(255,255,255,.1);
  background:rgba(10,10,22,.78); backdrop-filter:blur(14px);
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  font-family:'JetBrains Mono',monospace; font-size:9px;
  color:rgba(255,255,255,.72); letter-spacing:.03em;
  pointer-events:auto; opacity:.72;
}
#perf-hud.hidden { display:none; }
#perf-hud.collapsed { min-width:118px; }
#perf-hud.collapsed .perf-row { display:none; }
#perf-hud.collapsed #perf-copy { display:none; }
#perf-hud .perf-title {
  color:var(--accent2); font-size:9px; text-transform:uppercase;
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px;
}
.perf-actions { display:flex; gap:3px; align-items:center; }
.perf-btn {
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.7); border-radius:5px; font-family:'JetBrains Mono',monospace;
  font-size:9px; line-height:1; padding:2px 5px; cursor:pointer;
}
.perf-btn:hover { background:rgba(124,58,237,.25); color:#fff; }
#perf-hud .perf-row { display:flex; justify-content:space-between; gap:12px; line-height:1.55; }
#perf-hud .perf-value { color:var(--text); }
#perf-hud .perf-good { color:#6ee7b7; }
#perf-hud .perf-warn { color:#fbbf24; }
#perf-hud .perf-bad  { color:#fca5a5; }
.node-backend-badge {
  flex:0 0 34px; width:34px; min-width:34px; height:17px;
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  font-size:8px; font-family:'JetBrains Mono',monospace; letter-spacing:.04em;
  padding:0; border-radius:20px; border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.35); background:rgba(255,255,255,.04);
  font-variant-numeric:tabular-nums;
}
.node-backend-badge.backend-gpu { color:#6ee7b7; background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.28); }
.node-backend-badge.backend-worker { color:#93c5fd; background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.28); }
.node-backend-badge.backend-cpu { color:#fbbf24; background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.28); }
.node-backend-badge.backend-output { color:#67e8f9; background:rgba(6,182,212,.12); border-color:rgba(6,182,212,.28); }
body.light #perf-hud { background:rgba(218,214,206,.82); border-color:rgba(129,117,110,.2); color:rgba(42,35,32,.65); box-shadow:0 8px 28px rgba(93,78,73,.12); }
body.light #perf-hud .perf-value { color:var(--text); }
body.light .perf-btn { color:var(--text); border-color:rgba(129,117,110,.22); background:rgba(255,255,255,.35); }
body.light .node-backend-badge { color:rgba(42,35,32,.45); border-color:rgba(129,117,110,.2); }
body.light .node-backend-badge.backend-gpu { color:#047857; background:rgba(16,185,129,.1); }
body.light .node-backend-badge.backend-worker { color:#1d4ed8; background:rgba(59,130,246,.1); }
body.light .node-backend-badge.backend-cpu { color:#92400e; background:rgba(251,191,36,.16); }
body.light .node-backend-badge.backend-output { color:#0e7490; background:rgba(6,182,212,.1); }
.node-header .node-type-badge, .node-header .node-backend-badge { display:none !important; }




/* ── Composite Layer node ── */
.composite-layer-panel {
  padding:10px 12px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; gap:10px;
}
.composite-layer-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.composite-layer-title {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); letter-spacing:.07em; text-transform:uppercase;
}
.composite-layer-add {
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.72); border-radius:8px; padding:4px 10px;
  font-size:10px; font-family:'JetBrains Mono',monospace; cursor:pointer;
}
.composite-layer-add:hover { background:rgba(251,146,60,.18); color:#fff; border-color:rgba(251,146,60,.42); }
.composite-layer-list {
  display:flex; flex-direction:column; gap:8px;
  max-height:252px; overflow-y:auto; overflow-x:hidden;
  padding-right:3px; scrollbar-width:thin; scrollbar-color:rgba(124,58,237,.36) transparent;
}
.composite-layer-list::-webkit-scrollbar { width:5px; }
.composite-layer-list::-webkit-scrollbar-thumb { background:rgba(124,58,237,.36); border-radius:999px; }
.composite-layer-row {
  border:1px solid rgba(255,255,255,.075); background:rgba(255,255,255,.028);
  border-radius:10px; padding:8px 10px; display:grid;
  grid-template-columns:24px 1px 24px minmax(0,1fr) 22px;
  align-items:center; gap:9px;
  min-height:50px; cursor:pointer;
  transition:border-color .12s, background .12s, transform .12s, opacity .12s, box-shadow .12s;
}
.composite-layer-row:hover { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.042); }
.composite-layer-row.selected { border-color:rgba(251,146,60,.36); background:rgba(251,146,60,.07); box-shadow:inset 0 0 0 1px rgba(251,146,60,.06); }
.composite-layer-row.is-empty { opacity:.62; }
.composite-layer-row.drag-ghost { opacity:.38; transform:scale(.995); }
.composite-layer-row.drag-over-top { border-top-color:rgba(251,146,60,.8); box-shadow:0 -2px 0 rgba(251,146,60,.75); }
.composite-layer-row.drag-over-bottom { border-bottom-color:rgba(251,146,60,.8); box-shadow:0 2px 0 rgba(251,146,60,.75); }
.composite-layer-row-sep { width:1px; align-self:stretch; background:rgba(255,255,255,.08); }
.composite-layer-name { min-width:0; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.composite-layer-plug { font-size:15px; line-height:1; text-align:center; color:#6ee7b7; opacity:.95; }
.composite-layer-row.is-empty .composite-layer-plug { color:rgba(255,255,255,.24); opacity:1; }
.composite-layer-btn {
  width:24px; height:24px; border:1px solid rgba(255,255,255,.1); border-radius:7px;
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.62); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1;
}
.composite-layer-btn:hover:not(:disabled) { background:rgba(251,146,60,.18); color:#fff; }
.composite-layer-btn:disabled { opacity:.25; cursor:default; }
.composite-layer-drag { cursor:grab; font-size:14px; color:rgba(255,255,255,.55); }
.composite-layer-drag:active { cursor:grabbing; }
body.layer-row-dragging { cursor:grabbing !important; }
.composite-layer-visible { font-size:13px; }
.composite-layer-visible svg { width:15px; height:15px; display:block; fill:currentColor; }
.composite-layer-visible .eye-closed-icon { fill:none; stroke:currentColor; stroke-width:2.7; stroke-linecap:round; stroke-linejoin:round; }
.composite-layer-visible.is-off { opacity:.42; }
.composite-layer-inspector {
  border-top:1px solid rgba(255,255,255,.08);
  margin:2px -12px -12px; padding:12px 12px 12px;
  background:rgba(255,255,255,.018);
}
.composite-layer-inspector-card {
  border:1px solid rgba(255,255,255,.055); background:rgba(255,255,255,.04);
  border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:13px;
}
.composite-layer-empty-note { font-size:10px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; line-height:1.45; padding:10px 2px; }
.composite-layer-control { display:flex; flex-direction:column; gap:6px; min-width:0; }
.composite-layer-control-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.composite-layer-control label { font-size:11px; color:var(--text-dim); letter-spacing:.03em; display:flex; justify-content:space-between; gap:8px; }
.composite-layer-control input[type="range"] { width:100%; height:3px; }
/* Shared node select baseline.
   v1.1.5 UX Foundation: keep Composite Layer's proven select styling
   and reuse it for custom node UIs such as Reaction Diffusion. */
.ui-select,
.composite-layer-control select {
  height:34px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:var(--text); font-family:'Space Grotesk',sans-serif; font-size:12px; padding:5px 9px; outline:none; width:100%;
}
.ui-select:focus,
.composite-layer-control select:focus { border-color:var(--accent1); box-shadow:0 0 0 1px rgba(124,58,237,.24); }
body.light .composite-layer-panel { border-top-color:rgba(124,58,237,.1); }
body.light .composite-layer-list { scrollbar-color:rgba(93,78,73,.3) transparent; }
body.light .composite-layer-row { background:rgba(255,255,255,.28); border-color:rgba(129,117,110,.14); }
body.light .composite-layer-row.selected { background:rgba(93,78,73,.08); border-color:rgba(93,78,73,.24); }
body.light .composite-layer-add, body.light .composite-layer-btn, body.light .ui-select, body.light .composite-layer-control select { background:rgba(255,255,255,.45); border-color:rgba(129,117,110,.18); color:var(--text); }

/* Shared node control baseline.
   v1.1.5 UX Foundation: unify parameter rows, labels, sliders, and grouped controls
   before migrating every older node to formal JS UI helpers. */
.ui-control,
.param-row.ui-control,
.composite-layer-control.ui-control {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.ui-label,
.param-label.ui-label,
.composite-layer-control .ui-label {
  min-height:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:10px;
  font-family:'JetBrains Mono',monospace;
  color:var(--text-dim);
  letter-spacing:.045em;
  line-height:1.2;
}
.ui-label span,
.param-label.ui-label span,
.composite-layer-control .ui-label span {
  color:rgba(226,226,240,.68);
  min-width:38px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.ui-slider,
.param-slider.ui-slider,
.composite-layer-control input[type="range"].ui-slider {
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.1), rgba(124,58,237,.42));
  outline:none;
  cursor:pointer;
}
.ui-slider::-webkit-slider-thumb,
.param-slider.ui-slider::-webkit-slider-thumb,
.composite-layer-control input[type="range"].ui-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--accent1);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 0 0 3px rgba(124,58,237,.14), 0 0 8px rgba(124,58,237,.45);
  cursor:pointer;
  transition:transform .14s, box-shadow .14s;
}
.ui-slider::-webkit-slider-thumb:hover,
.param-slider.ui-slider::-webkit-slider-thumb:hover,
.composite-layer-control input[type="range"].ui-slider::-webkit-slider-thumb:hover {
  transform:scale(1.12);
  box-shadow:0 0 0 4px rgba(124,58,237,.18), 0 0 12px rgba(124,58,237,.56);
}
.ui-slider::-moz-range-thumb,
.param-slider.ui-slider::-moz-range-thumb,
.composite-layer-control input[type="range"].ui-slider::-moz-range-thumb {
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--accent1);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 0 0 3px rgba(124,58,237,.14), 0 0 8px rgba(124,58,237,.45);
  cursor:pointer;
}
.ui-control-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
body.light .ui-label span,
body.light .param-label.ui-label span,
body.light .composite-layer-control .ui-label span { color:rgba(42,35,32,.68); }
body.light .ui-slider,
body.light .param-slider.ui-slider,
body.light .composite-layer-control input[type="range"].ui-slider {
  background:linear-gradient(90deg, rgba(93,78,73,.16), rgba(93,78,73,.36));
}
body.light .ui-slider::-webkit-slider-thumb,
body.light .param-slider.ui-slider::-webkit-slider-thumb,
body.light .composite-layer-control input[type="range"].ui-slider::-webkit-slider-thumb {
  background:#5D4E49;
  border-color:rgba(255,255,255,.85);
  box-shadow:0 0 0 3px rgba(93,78,73,.12), 0 2px 8px rgba(93,78,73,.18);
}
body.light .ui-slider::-moz-range-thumb,
body.light .param-slider.ui-slider::-moz-range-thumb,
body.light .composite-layer-control input[type="range"].ui-slider::-moz-range-thumb {
  background:#5D4E49;
  border-color:rgba(255,255,255,.85);
  box-shadow:0 0 0 3px rgba(93,78,73,.12), 0 2px 8px rgba(93,78,73,.18);
}
body.light .composite-layer-inspector { border-top-color:rgba(129,117,110,.14); background:rgba(255,255,255,.18); }
body.light .composite-layer-inspector-card { background:rgba(255,255,255,.25); border-color:rgba(129,117,110,.12); }

/* ── Output settings + export dialog ── */
.output-settings {
  padding:10px 12px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; gap:8px;
}
.out-setting-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.out-setting-label {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); letter-spacing:.04em; flex-shrink:0;
}
.out-setting-controls { display:flex; align-items:center; gap:5px; min-width:0; }
.out-setting-input, .out-setting-select {
  height:24px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; color:var(--text); font-family:'JetBrains Mono',monospace;
  font-size:10px; padding:3px 7px; outline:none; min-width:0;
}
.out-setting-input[type="number"] { width:68px; text-align:right; }
.out-setting-input[type="text"] { width:146px; text-align:right; }
.out-setting-input[type="color"] { width:30px; padding:1px 3px; }
.out-setting-select { max-width:118px; }
.out-setting-x { font-size:10px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; }
.output-settings .quality-value { font-size:10px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; width:32px; text-align:right; }
body.light .output-settings { border-top-color:rgba(124,58,237,.1); }
.output-settings-fold {
  display:flex; align-items:center; gap:8px;
  padding:9px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.04);
  cursor:pointer; user-select:none;
}
.output-settings-fold .node-collapse-btn { margin-right:0; width:20px; height:20px; flex-basis:20px; }
.output-settings-fold-label {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); letter-spacing:.07em; text-transform:uppercase;
}
.output-settings.collapsed { display:none !important; }
body.light .output-settings-fold { border-top-color:rgba(124,58,237,.1); border-bottom-color:rgba(124,58,237,.08); }
.node.pinned-viewport, .note-node.pinned-viewport {
  position:fixed !important;
  z-index:1800;
  transform:scale(var(--viewport-pin-scale, 1)) !important;
  transform-origin:top left !important;
  box-shadow:0 12px 42px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
}
.note-node.pinned-viewport { z-index:1750; }
/* Pinned nodes should not get an extra floating label or the processing-node tint wash.
   The small header pin badge is enough and keeps pinned Output previews visually clean. */
.node.pinned-viewport::before, .note-node.pinned-viewport::before {
  content:none !important;
  display:none !important;
}
.node-pin-badge, .note-pin-badge {
  width:18px; height:18px; border-radius:6px;
  display:none; align-items:center; justify-content:center;
  color:var(--accent2); background:rgba(6,182,212,.10);
  border:1px solid rgba(6,182,212,.22); flex-shrink:0;
  padding:0; font:inherit; cursor:pointer;
  opacity:.42; transition:opacity .12s, background .12s, color .12s, border-color .12s, transform .12s;
}
.node.output-node.viewport-pinnable .node-pin-badge { display:inline-flex; }
.note-node .note-pin-badge { display:none !important; }
.node-pin-badge:hover, .note-pin-badge:hover { opacity:1; background:rgba(6,182,212,.18); color:#fff; transform:translateY(-1px); }
.node.pinned-viewport .node-pin-badge, .note-node.pinned-viewport .note-pin-badge, .node-pin-badge.active, .note-pin-badge.active { opacity:1; background:rgba(6,182,212,.16); }
body.light .node.pinned-viewport, body.light .note-node.pinned-viewport { box-shadow:0 12px 34px rgba(93,78,73,.14), inset 0 1px 0 rgba(245,242,238,.7); }
/* v1.1.79G: pinned Output is a viewport HUD element. It must not animate or drift when canvas detail/performance classes toggle. */
.node.output-node.pinned-viewport {
  transition:none !important;
  will-change:left, top, transform;
}
body.light .node-pin-badge, body.light .note-pin-badge { color:#5D4E49; background:rgba(93,78,73,.08); border-color:rgba(93,78,73,.18); }
body.light .node-pin-badge:hover, body.light .note-pin-badge:hover { background:rgba(93,78,73,.14); color:var(--text); }


/* v1.1.79F Output Pin Performance Isolation
   A pinned Output is a viewport tool, not part of the zoomed graph overview.
   Keep it in full-detail mode even while the rest of the canvas switches to
   performance / compact / map mode during pan, zoom, or drag. */
body.performance-mode .node.output-node.pinned-viewport,
body.node-detail-compact .node.output-node.pinned-viewport,
body.node-detail-map .node.output-node.pinned-viewport {
  background:rgba(15,15,30,0.55) !important;
  backdrop-filter:blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.4) !important;
  border-radius:18px !important;
  min-width:260px !important;
  min-height:0 !important;
  width:var(--viewport-pin-node-width, auto) !important;
  box-shadow:0 12px 42px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08) !important;
  overflow:visible !important;
}
body.light.performance-mode .node.output-node.pinned-viewport,
body.light.node-detail-compact .node.output-node.pinned-viewport,
body.light.node-detail-map .node.output-node.pinned-viewport {
  background:rgba(222,218,210,0.75) !important;
  box-shadow:0 12px 34px rgba(93,78,73,.14), inset 0 1px 0 rgba(245,242,238,.7) !important;
}
body.node-detail-compact .node.output-node.pinned-viewport .node-header,
body.node-detail-map .node.output-node.pinned-viewport .node-header {
  min-height:0 !important;
  padding:10px 12px !important;
  gap:8px !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
body.node-detail-compact .node.output-node.pinned-viewport .node-label,
body.node-detail-map .node.output-node.pinned-viewport .node-label,
body.node-detail-compact .node.output-node.pinned-viewport .node-dot,
body.node-detail-map .node.output-node.pinned-viewport .node-dot,
body.node-detail-compact .node.output-node.pinned-viewport .node-menu-btn,
body.node-detail-map .node.output-node.pinned-viewport .node-menu-btn,
body.node-detail-compact .node.output-node.pinned-viewport .node-collapse-btn,
body.node-detail-map .node.output-node.pinned-viewport .node-collapse-btn,
body.node-detail-compact .node.output-node.pinned-viewport .node-pin-badge,
body.node-detail-map .node.output-node.pinned-viewport .node-pin-badge {
  display:flex !important;
}
body.node-detail-compact .node.output-node.pinned-viewport .node-label,
body.node-detail-map .node.output-node.pinned-viewport .node-label {
  position:static !important;
  transform:none !important;
  width:auto !important;
  max-width:none !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  font-size:13px !important;
  color:var(--text) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.node-detail-compact .node.output-node.pinned-viewport .node-name-row,
body.node-detail-map .node.output-node.pinned-viewport .node-name-row,
body.node-detail-compact .node.output-node.pinned-viewport .output-settings-fold,
body.node-detail-map .node.output-node.pinned-viewport .output-settings-fold,
body.node-detail-compact .node.output-node.pinned-viewport .node-width-handle,
body.node-detail-map .node.output-node.pinned-viewport .node-width-handle {
  display:flex !important;
}
body.node-detail-compact .node.output-node.pinned-viewport .output-preview-shell,
body.node-detail-map .node.output-node.pinned-viewport .output-preview-shell {
  display:block !important;
}
body.node-detail-compact .node.output-node.pinned-viewport .node-preview-area,
body.node-detail-map .node.output-node.pinned-viewport .node-preview-area {
  display:block !important;
  width:auto !important;
}
body.node-detail-compact .node.output-node.pinned-viewport .output-settings:not(.collapsed),
body.node-detail-map .node.output-node.pinned-viewport .output-settings:not(.collapsed) {
  display:flex !important;
}
body.node-detail-compact .node.output-node.pinned-viewport .preview-fit-strip,
body.node-detail-map .node.output-node.pinned-viewport .preview-fit-strip,
body.performance-mode .node.output-node.pinned-viewport .preview-fit-strip,
body.node-detail-compact .node.output-node.pinned-viewport .preview-save-btn,
body.node-detail-map .node.output-node.pinned-viewport .preview-save-btn,
body.performance-mode .node.output-node.pinned-viewport .preview-save-btn {
  display:flex !important;
  pointer-events:auto !important;
}
body.performance-mode .node.output-node.pinned-viewport .node-menu-btn,
body.performance-mode .node.output-node.pinned-viewport .preview-fit-strip,
body.performance-mode .node.output-node.pinned-viewport .preview-save-btn {
  opacity:1 !important;
  pointer-events:auto !important;
}
body.node-detail-compact .node.output-node.pinned-viewport .node-ports,
body.node-detail-map .node.output-node.pinned-viewport .node-ports {
  display:flex !important;
  padding:8px 0 10px !important;
  gap:6px !important;
}
body.node-detail-compact .node.output-node.pinned-viewport .port-row,
body.node-detail-map .node.output-node.pinned-viewport .port-row {
  display:flex !important;
  align-items:center !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 14px !important;
  gap:8px !important;
  font-size:11px !important;
}
body.node-detail-compact .node.output-node.pinned-viewport .port-label-input,
body.node-detail-map .node.output-node.pinned-viewport .port-label-input,
body.node-detail-compact .node.output-node.pinned-viewport .port-drag-handle,
body.node-detail-map .node.output-node.pinned-viewport .port-drag-handle {
  display:flex !important;
}
body.node-detail-compact .node.output-node.pinned-viewport .port-label-input,
body.node-detail-map .node.output-node.pinned-viewport .port-label-input {
  width:92px !important;
  font-size:11px !important;
}
body.node-detail-compact .node.output-node.pinned-viewport .port,
body.node-detail-map .node.output-node.pinned-viewport .port {
  width:12px !important;
  height:12px !important;
  border-width:2px !important;
}
body.node-detail-map .node.output-node.pinned-viewport.active-output-node .node-header::after,
body.performance-mode .node.output-node.pinned-viewport.active-output-node .node-header::after {
  display:inline-flex !important;
}
body.light .out-setting-input, body.light .out-setting-select { background:rgba(255,255,255,.65); border-color:rgba(124,58,237,.16); color:var(--text); }

.out-setting-input:disabled, .out-setting-select:disabled {
  opacity:.45; cursor:not-allowed;
}
.out-source-resolution-status {
  font-size:9px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); letter-spacing:.04em;
  max-width:160px; text-align:right; opacity:.78;
}
.node-image-properties {
  padding:9px 12px 10px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; gap:5px;
}
.img-prop-row {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); letter-spacing:.035em;
}
.img-prop-row span:last-child {
  color:rgba(255,255,255,.68); text-align:right; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; max-width:142px;
}
body.light .node-image-properties { border-top-color:rgba(124,58,237,.1); }
body.light .img-prop-row span:last-child { color:rgba(42,35,32,.68); }

#export-modal {
  position:fixed; inset:0; z-index:9200; display:none;
  background:rgba(4,4,12,.82); backdrop-filter:blur(12px);
  align-items:center; justify-content:center;
}
#export-modal.open { display:flex; }
#export-inner {
  width:min(1180px,96vw); max-height:94vh; overflow:hidden;
  background:rgba(12,12,28,.98); border:1px solid rgba(255,255,255,.1);
  border-radius:18px; box-shadow:0 24px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(124,58,237,.1);
  display:grid; grid-template-columns:minmax(520px,1.28fr) minmax(440px,.82fr); gap:0;
}
.export-preview {
  min-height:min(720px,94vh); background:#050510; border-right:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column;
}
.export-preview-head { padding:16px 18px 11px; border-bottom:1px solid rgba(255,255,255,.06); }
.export-preview-title { font-size:12px; font-weight:600; letter-spacing:.03em; }
.export-preview-canvas-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:22px; min-height:520px; }
#export-preview-canvas { max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 12px 40px rgba(0,0,0,.45); background:repeating-conic-gradient(rgba(255,255,255,.08) 0% 25%, transparent 0% 50%) 50% / 18px 18px; }
.export-panel { padding:22px 22px 18px; display:flex; flex-direction:column; gap:12px; max-height:94vh; overflow-y:auto; overscroll-behavior:contain; }
.export-panel::-webkit-scrollbar { width:5px; }
.export-panel::-webkit-scrollbar-thumb { background:rgba(124,58,237,.35); border-radius:4px; }
.export-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.export-title { font-size:15px; font-weight:600; letter-spacing:.02em; }
.export-close { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:7px; color:var(--text-dim); cursor:pointer; font-size:12px; padding:5px 10px; }
.export-close:hover { background:rgba(239,68,68,.18); border-color:var(--danger); color:var(--danger); }
.export-row { display:flex; flex-direction:column; gap:5px; }
.export-label { font-size:10px; font-family:'JetBrains Mono',monospace; color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase; }
.export-field, .export-select {
  height:32px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:var(--text); border-radius:8px; padding:6px 9px; font-family:'Space Grotesk',sans-serif; outline:none;
}
.export-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.export-inline { display:flex; align-items:center; gap:8px; }
.export-inline .export-field { min-width:0; width:100%; }
.export-x { color:var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:11px; }
.export-actions { display:flex; gap:8px; margin-top:auto; padding-top:8px; }
.export-btn {
  flex:1; border:1px solid rgba(255,255,255,.1); border-radius:9px; padding:9px 11px;
  font-family:'Space Grotesk',sans-serif; font-size:12px; cursor:pointer;
  color:var(--text); background:rgba(255,255,255,.06); transition:background .15s,border-color .15s;
}
.export-btn.primary { background:rgba(124,58,237,.38); border-color:rgba(124,58,237,.75); color:#fff; box-shadow:0 0 14px rgba(124,58,237,.22); }
.export-btn:hover { background:rgba(124,58,237,.22); border-color:var(--accent1); }
.export-status { min-height:16px; font-size:10px; font-family:'JetBrains Mono',monospace; color:var(--text-dim); }
.export-material-panel {
  display:flex; flex-direction:column; gap:9px;
  margin-top:2px; padding:12px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:12px;
  background:rgba(255,255,255,.028);
}
.export-material-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.export-material-title {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:var(--accent2); letter-spacing:.08em; text-transform:uppercase;
}
.export-material-hint {
  font-size:10px; line-height:1.45; color:var(--text-dim);
}
.export-material-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;
}
.export-material-btn {
  min-width:0; justify-content:center; padding-left:8px; padding-right:8px;
}
.export-material-btn.channel-connected { border-color:rgba(34,197,94,.38); box-shadow:0 0 0 1px rgba(34,197,94,.08) inset; }
.export-material-btn.channel-connected::after { content:'OK'; margin-left:7px; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.06em; color:#86efac; }
.export-material-btn.channel-missing:not(.primary) { opacity:.58; border-style:dashed; }
.export-material-btn.channel-missing:not(.primary)::after { content:'MISS'; margin-left:7px; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.06em; color:var(--text-dim); }
.export-material-btn.full { grid-column:1 / -1; }
.export-material-naming {
  display:flex; flex-direction:column; gap:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(0,0,0,.12);
}
.export-material-naming-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}

/* v1.1.69 Export Dropdown Fix
   The material export naming controls lived in two narrow columns, which made
   the filename-template select feel cramped/truncated. Stack these controls so
   the native select has enough width and keeps the dialog calm. */
.export-material-naming-grid {
  grid-template-columns:1fr;
  gap:9px;
}
.export-material-naming .export-row {
  min-width:0;
}
#export-material-template,
#export-material-pack-name,
#export-material-custom-template {
  width:100%;
  min-width:0;
}
#export-material-template {
  padding-right:32px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
.export-material-naming .export-field,
.export-material-naming .export-select {
  height:34px;
}
.export-template-help {
  font-size:9px; line-height:1.45; color:var(--text-dim);
  font-family:'JetBrains Mono',monospace; letter-spacing:.025em;
}
.export-template-example {
  font-size:9px; line-height:1.45; color:rgba(103,232,249,.78);
  font-family:'JetBrains Mono',monospace; letter-spacing:.025em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.export-summary {
  display:none;
  padding:10px 11px;
  border-radius:10px;
  border:1px solid rgba(52,211,153,.18);
  background:rgba(52,211,153,.065);
  color:rgba(226,226,240,.82);
  font-size:10px; line-height:1.48;
  font-family:'JetBrains Mono',monospace;
  max-height:110px; overflow:auto;
}
.export-summary.open { display:block; }
.export-summary strong { color:#86efac; font-weight:700; }
.export-summary ul { margin:6px 0 0; padding-left:15px; }
.export-summary li { margin:2px 0; }
body.light .export-material-naming { background:rgba(255,255,255,.26); border-color:rgba(129,117,110,.14); }
body.light .export-template-example { color:#0e7490; }
body.light .export-summary { background:rgba(34,197,94,.09); border-color:rgba(22,163,74,.18); color:rgba(42,35,32,.72); }
body.light .export-summary strong { color:#166534; }
@media (max-width:760px){ .export-material-naming-grid{ grid-template-columns:1fr; } }
body.light .export-material-panel { background:rgba(255,255,255,.28); border-color:rgba(129,117,110,.14); }
body.light .export-material-title { color:#5D4E49; }


/* v1.1.69 Export Dialog Mode Cleanup + Frame Paint Fix */
.export-mode-block { gap:7px; }
.export-mode-tabs {
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  padding:3px; border-radius:11px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.075);
}
.export-mode-tab {
  border:0; border-radius:8px; padding:8px 10px;
  background:transparent; color:rgba(226,226,240,.62);
  font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:700;
  cursor:pointer; transition:background .14s, color .14s, box-shadow .14s;
}
.export-mode-tab:hover { background:rgba(255,255,255,.06); color:#fff; }
.export-mode-tab.active { background:rgba(124,58,237,.34); color:#fff; box-shadow:0 0 0 1px rgba(124,58,237,.32) inset, 0 0 13px rgba(124,58,237,.18); }
.export-mode-hint,
.export-size-source-summary {
  font-family:'JetBrains Mono',monospace; font-size:10px; line-height:1.45;
  color:var(--text-dim); letter-spacing:.025em;
}
.export-size-source-summary strong { color:rgba(255,255,255,.82); font-weight:600; }
.export-option-inline {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 11px; border-radius:10px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.075);
  cursor:pointer;
}
.export-option-title { display:block; font-size:12px; color:var(--text); font-weight:600; }
.export-option-hint { display:block; margin-top:2px; font-size:10px; color:var(--text-dim); line-height:1.35; }
#export-modal:not(.export-size-override) .export-size-override-only { display:none !important; }
#export-modal .export-size-action-row { display:none !important; }
#export-modal.export-mode-single .export-material-panel { display:none !important; }
#export-modal.export-mode-material .export-actions { display:none !important; }
#export-modal.export-mode-material .export-preview-title::after { content:' · material maps'; color:var(--text-dim); font-weight:400; }
body.light .export-mode-tabs { background:rgba(255,255,255,.34); border-color:rgba(129,117,110,.14); }
body.light .export-mode-tab { color:rgba(42,35,32,.62); }
body.light .export-mode-tab:hover { color:var(--text); background:rgba(93,78,73,.08); }
body.light .export-mode-tab.active { background:#efe7ff; color:#5b21b6; box-shadow:none; }
body.light .export-size-source-summary strong { color:var(--text); }
body.light .export-option-inline { background:rgba(255,255,255,.38); border-color:rgba(129,117,110,.14); }

/* Keep visual frames behind nodes during drag and performance mode.
   Frames are organization surfaces, not active graph content; raising them above
   nodes made framed nodes look dimmed/under glass while dragging. */
#world .frame-node,
#world .frame-node.selected,
#world .frame-node.dragging { z-index:2 !important; }
#world .node,
#world .group-node,
#world .note-node { z-index:20; }
#world .node.selected,
#world .group-node.selected,
#world .note-node.selected { z-index:30; }
#world .node.dragging,
#world .group-node.dragging,
#world .note-node.dragging { z-index:120; }
body.performance-mode .frame-node {
  background:rgba(6,182,212,.035) !important;
  border-color:rgba(6,182,212,.34) !important;
  box-shadow:inset 0 0 0 1px rgba(6,182,212,.06), 0 0 34px rgba(6,182,212,.07) !important;
}
body.light.performance-mode .frame-node {
  background:rgba(14,116,144,.055) !important;
  border-color:rgba(14,116,144,.28) !important;
  box-shadow:inset 0 0 0 1px rgba(14,116,144,.06), 0 8px 26px rgba(93,78,73,.07) !important;
}

body.light #export-inner { background:rgba(218,214,206,.98); border-color:rgba(129,117,110,.2); }
body.light .export-preview { background:#D2CEC6; border-right-color:rgba(129,117,110,.16); }
body.light .export-field, body.light .export-select { background:rgba(255,255,255,.65); border-color:rgba(129,117,110,.2); color:var(--text); }
body.light .export-close, body.light .export-btn { color:var(--text); background:rgba(255,255,255,.4); border-color:rgba(129,117,110,.2); }

/* v1.1.69 Export Size UX Fix 2 2 */
.export-size-calculated,
.out-size-calculated {
  display:flex;
  flex-direction:column;
  gap:3px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  line-height:1.35;
  color:var(--text-dim);
  letter-spacing:.04em;
}
.export-size-calculated strong,
.out-size-calculated strong {
  color:rgba(255,255,255,.78);
  font-weight:600;
}
.export-size-calculated.warning,
.out-size-calculated.warning {
  color:#fbbf24;
}
.export-size-calculated.warning strong,
.out-size-calculated.warning strong {
  color:#fde68a;
}
.export-fit-safe-size,
.out-fit-safe-size {
  display:none;
  margin-top:5px;
  width:100%;
  border:1px solid rgba(251,191,36,.28);
  border-radius:8px;
  background:rgba(251,191,36,.08);
  color:#fde68a;
  cursor:pointer;
  font-family:'Space Grotesk',sans-serif;
  font-size:10.5px;
  font-weight:700;
  padding:5px 9px;
}
.export-fit-safe-size.visible,
.out-fit-safe-size.visible { display:block; }
.export-fit-safe-size:hover,
.out-fit-safe-size:hover { background:rgba(251,191,36,.16); border-color:rgba(251,191,36,.5); color:#fff7c2; }
.export-size-calculated .muted,
.out-size-calculated .muted { opacity:.78; }
body.light .export-size-calculated strong,
body.light .out-size-calculated strong { color:var(--text); }
body.light .export-size-calculated.warning,
body.light .out-size-calculated.warning { color:#8a5a00; }
body.light .export-size-calculated.warning strong,
body.light .out-size-calculated.warning strong { color:#6a4500; }
body.light .export-fit-safe-size,
body.light .out-fit-safe-size { background:rgba(251,191,36,.12); border-color:rgba(160,120,20,.28); color:#6a4500; }

/* v1.1.69 Export Size UX Fix 2 */
.export-size-helper,
.out-source-resolution-status {
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  line-height:1.35;
  color:var(--text-dim);
  letter-spacing:.04em;
}
.export-size-action-row .export-btn,
.out-use-source-size {
  white-space:nowrap;
}
.out-use-source-size {
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.78);
  cursor:pointer;
  font-family:'Space Grotesk',sans-serif;
  font-size:10.5px;
  font-weight:700;
  padding:5px 9px;
  transition:background .15s, border-color .15s, color .15s;
}
.out-use-source-size:hover { background:rgba(124,58,237,.22); border-color:var(--accent1); color:#fff; }
.out-keep-aspect-ratio-row .out-setting-controls { justify-content:flex-end; }
body.light .out-use-source-size { color:var(--text); background:rgba(255,255,255,.42); border-color:rgba(129,117,110,.2); }
body.light .out-use-source-size:hover { background:rgba(93,78,73,.12); border-color:#5D4E49; }
@media (max-width:900px){ #export-inner{ grid-template-columns:1fr; overflow-y:auto; width:min(760px,96vw); } .export-preview{ min-height:320px; border-right:none; border-bottom:1px solid rgba(255,255,255,.08); } .export-preview-canvas-wrap{ min-height:280px; } .export-panel{ max-height:none; overflow:visible; } }



/* ── Canvas Navigator / minimap ── */
#navigator-panel {
  position:fixed; top:52px; right:18px; z-index:1650;
  width:250px; height:190px;
  min-width:190px; min-height:154px;
  max-width:min(520px, calc(100vw - 24px));
  max-height:min(520px, calc(100vh - 24px));
  background:rgba(10,10,22,.88);
  border:1px solid rgba(255,255,255,.1);
  border-radius:13px;
  backdrop-filter:blur(16px);
  box-shadow:0 12px 42px rgba(0,0,0,.48), 0 0 0 1px rgba(124,58,237,.08);
  overflow:hidden;
  user-select:none;
  transition:opacity .15s, transform .15s, box-shadow .15s;
}
#navigator-panel.dragging,
#navigator-panel.resizing { transition:none !important; }
#navigator-panel.collapsed { width:auto !important; height:auto !important; min-width:146px; min-height:0; }
#navigator-panel.collapsed .navigator-body,
#navigator-panel.collapsed .navigator-footer,
#navigator-panel.collapsed .navigator-resize-handle { display:none; }
#navigator-panel.hidden { display:none; }
.navigator-header {
  height:30px; display:flex; align-items:center; gap:6px;
  padding:0 8px 0 10px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.035);
  cursor:move;
  touch-action:none;
}
.navigator-title {
  font-size:10px; font-family:'JetBrains Mono',monospace; letter-spacing:.07em;
  text-transform:uppercase; color:rgba(255,255,255,.72); flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.navigator-btn {
  width:22px; height:22px; border:none; border-radius:6px;
  background:rgba(255,255,255,.05); color:rgba(255,255,255,.62);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .12s,color .12s;
  font-family:'JetBrains Mono',monospace; font-size:11px; line-height:1;
}
.navigator-btn:hover { background:rgba(124,58,237,.24); color:#fff; }
#navigator-toggle svg { transition:transform .14s cubic-bezier(.4,0,.2,1); }
#navigator-panel.collapsed #navigator-toggle svg { transform:rotate(180deg); }
.navigator-body {
  padding:9px 9px 7px;
  height:calc(100% - 30px - 41px);
  min-height:76px;
}
#navigator-canvas {
  width:100%; height:100%; display:block;
  border-radius:8px;
  background:#060612;
  border:1px solid rgba(255,255,255,.08);
  cursor:grab;
}
#navigator-canvas:active { cursor:grabbing; }
.navigator-footer {
  display:grid; grid-template-columns:auto minmax(64px,1fr) auto;
  align-items:center; gap:8px;
  height:41px; padding:0 18px 9px 9px;
}
#navigator-zoom {
  font-size:9px; font-family:'JetBrains Mono',monospace;
  color:rgba(255,255,255,.45); letter-spacing:.04em;
  min-width:32px;
}
.navigator-footer-hint {
  font-size:9px; font-family:'JetBrains Mono',monospace;
  color:rgba(255,255,255,.28); letter-spacing:.04em;
  white-space:nowrap;
}
#navigator-zoom-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px; border-radius:999px;
  background:rgba(255,255,255,.12); outline:none; cursor:pointer;
}
#navigator-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; border-radius:50%;
  background:var(--accent2); box-shadow:0 0 8px rgba(6,182,212,.52);
}
#navigator-zoom-slider::-moz-range-thumb {
  width:12px; height:12px; border:none; border-radius:50%;
  background:var(--accent2); box-shadow:0 0 8px rgba(6,182,212,.52);
}
#navigator-fit,
#navigator-zoom-100 {
  width:auto; min-width:34px;
  font-size:9px; font-family:'JetBrains Mono',monospace; letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 8px; border-radius:6px;
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.55); cursor:pointer;
}
#navigator-zoom-100 { min-width:42px; }
#navigator-fit:hover,
#navigator-zoom-100:hover { background:rgba(124,58,237,.22); color:#fff; border-color:rgba(124,58,237,.45); }
.navigator-resize-handle {
  position:absolute; right:0; bottom:0; width:18px; height:18px;
  cursor:nwse-resize; z-index:2;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:3px; color:rgba(255,255,255,.38);
  touch-action:none;
}
.navigator-resize-handle:hover { color:rgba(255,255,255,.82); background:rgba(255,255,255,.05); }
.navigator-resize-handle svg { display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
body.navigator-moving,
body.navigator-moving * { cursor:move !important; user-select:none !important; }
body.navigator-resizing,
body.navigator-resizing * { cursor:nwse-resize !important; user-select:none !important; }
body.light #navigator-panel {
  background:rgba(218,214,206,.90); border-color:rgba(129,117,110,.2);
  box-shadow:0 12px 34px rgba(93,78,73,.14);
}
body.light .navigator-header { border-bottom-color:rgba(129,117,110,.14); background:rgba(255,255,255,.28); }
body.light .navigator-title { color:rgba(42,35,32,.66); }
body.light .navigator-btn { background:rgba(93,78,73,.06); color:rgba(42,35,32,.58); }
body.light .navigator-btn:hover { background:rgba(93,78,73,.12); color:var(--text); }
body.light #navigator-canvas { background:#EAE7DC; border-color:rgba(129,117,110,.18); }
body.light #navigator-zoom { color:rgba(42,35,32,.48); }
body.light .navigator-footer-hint { color:rgba(42,35,32,.38); }
body.light #navigator-zoom-slider { background:rgba(93,78,73,.16); }
body.light #navigator-zoom-slider::-webkit-slider-thumb { background:#5D4E49; box-shadow:0 0 8px rgba(93,78,73,.25); }
body.light #navigator-zoom-slider::-moz-range-thumb { background:#5D4E49; box-shadow:0 0 8px rgba(93,78,73,.25); }
body.light #navigator-fit,
body.light #navigator-zoom-100 { background:rgba(255,255,255,.35); border-color:rgba(129,117,110,.2); color:rgba(42,35,32,.6); }
body.light #navigator-fit:hover,
body.light #navigator-zoom-100:hover { background:rgba(93,78,73,.12); color:var(--text); }
body.light .navigator-resize-handle { color:rgba(42,35,32,.38); }
body.light .navigator-resize-handle:hover { color:rgba(42,35,32,.76); background:rgba(93,78,73,.07); }


/* ── Shared node controls: v1.1.5 UX Foundation ───────────────── */
.ui-button {
  min-height:34px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.90);
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 12px;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.ui-button:hover:not(:disabled) {
  background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.16);
  color:#fff;
}
.ui-button:active:not(:disabled) { transform:translateY(1px); }
.ui-button:focus-visible { outline:none; border-color:var(--accent1); box-shadow:0 0 0 1px rgba(124,58,237,.28), 0 0 14px rgba(124,58,237,.16); }
.ui-button:disabled { opacity:.28; cursor:default; transform:none; }
.ui-button.primary {
  background:rgba(75,198,118,.18);
  border-color:rgba(75,198,118,.34);
  color:#eafff0;
}
.ui-button.primary:hover:not(:disabled) { background:rgba(75,198,118,.27); border-color:rgba(75,198,118,.46); }
.ui-button.ghost { background:rgba(255,255,255,.035); color:rgba(255,255,255,.74); }
.ui-button.compact { min-height:26px; border-radius:8px; padding:0 10px; font-size:10px; font-family:'JetBrains Mono',monospace; letter-spacing:.04em; }
.ui-button.square { width:24px; height:24px; min-height:24px; padding:0; border-radius:7px; flex:0 0 24px; font-size:12px; line-height:1; }
.ui-status-badge,
.rd-status-badge {
  display:inline-flex; align-items:center; gap:6px;
  min-height:26px; padding:5px 9px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.04); color:rgba(255,255,255,.78);
}
.ui-status-badge::before,
.rd-status-badge::before { content:''; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); box-shadow:0 0 0 1px rgba(255,255,255,.08); }
.ui-status-badge.running,
.rd-status-badge.running { color:#d8ffe8; background:rgba(75,198,118,.12); border-color:rgba(75,198,118,.26); }
.ui-status-badge.running::before,
.rd-status-badge.running::before { background:#4bc676; box-shadow:0 0 10px rgba(75,198,118,.55); }
.ui-status-badge.paused,
.rd-status-badge.paused { color:rgba(255,255,255,.82); }
.ui-advanced,
.rd-advanced { border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.03); overflow:hidden; }
.ui-advanced > summary,
.rd-advanced > summary { list-style:none; cursor:pointer; padding:10px 12px; font-size:12px; font-weight:700; color:rgba(255,255,255,.86); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ui-advanced > summary::-webkit-details-marker,
.rd-advanced > summary::-webkit-details-marker { display:none; }
.ui-advanced > summary::after,
.rd-advanced > summary::after { content:'▾'; font-size:11px; color:rgba(255,255,255,.55); transition:transform .16s ease; }
.ui-advanced[open] > summary::after,
.rd-advanced[open] > summary::after { transform:rotate(180deg); }
body.light .ui-button { background:rgba(255,255,255,.45); border-color:rgba(129,117,110,.18); color:var(--text); }
body.light .ui-button:hover:not(:disabled) { background:rgba(93,78,73,.12); border-color:rgba(93,78,73,.25); color:var(--text); }
body.light .ui-button.primary { background:rgba(93,78,73,.14); border-color:rgba(93,78,73,.25); color:var(--text); }
body.light .ui-status-badge,
body.light .rd-status-badge { background:rgba(255,255,255,.32); border-color:rgba(129,117,110,.16); color:rgba(42,35,32,.68); }
body.light .ui-status-badge.running,
body.light .rd-status-badge.running { color:#047857; background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.24); }
body.light .ui-advanced,
body.light .rd-advanced { background:rgba(255,255,255,.20); border-color:rgba(129,117,110,.14); }
body.light .ui-advanced > summary,
body.light .rd-advanced > summary { color:rgba(42,35,32,.78); }


/* Shared UX Foundation preview + microcopy primitives.
   These are visual-only helpers layered onto existing node-specific hooks. */
.ui-panel {
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.ui-preview-panel {
  display:flex; flex-direction:column; gap:8px; padding:10px;
}
.ui-preview-frame {
  position:relative; overflow:hidden; border-radius:12px;
  background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.06), transparent 38%),
             linear-gradient(180deg, rgba(11,15,23,.96), rgba(16,20,29,.96));
  border:1px solid rgba(255,255,255,.06);
}
.ui-preview-frame canvas { display:block; }
.ui-empty-state {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:18px; text-align:center; pointer-events:none;
  color:rgba(255,255,255,.52); font-size:12px; line-height:1.45; letter-spacing:.02em;
}
.ui-meta-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.ui-microcopy { font-size:11px; line-height:1.4; color:rgba(255,255,255,.52); }
.ui-section-title {
  font-size:10px; font-family:'JetBrains Mono',monospace; color:var(--text-dim);
  letter-spacing:.07em; text-transform:uppercase;
}
body.light .ui-panel {
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.16));
  border-color:rgba(129,117,110,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
}
body.light .ui-preview-frame {
  background:radial-gradient(circle at 20% 20%, rgba(93,78,73,.08), transparent 38%),
             linear-gradient(180deg, rgba(238,233,224,.96), rgba(222,218,210,.96));
  border-color:rgba(129,117,110,.13);
}
body.light .ui-empty-state,
body.light .ui-microcopy { color:rgba(42,35,32,.52); }

/* ── Reaction Diffusion interactive UI ───────────────────────── */
.reaction-diff-ui { display:flex; flex-direction:column; gap:10px; }
.rd-preview-panel { display:flex; flex-direction:column; gap:8px; padding:10px; }
.rd-preview-wrap { position:relative; width:100%; aspect-ratio:1 / 1; min-height:160px; }
.rd-preview-canvas, .er-preview-canvas { width:100%; height:100%; display:block; }
.rd-preview-empty { }
.rd-status-row { }
.rd-status-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:rgba(255,255,255,.78); }
.rd-status-badge::before { content:''; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); box-shadow:0 0 0 1px rgba(255,255,255,.08); }
.rd-status-badge.running { color:#d8ffe8; background:rgba(75,198,118,.12); border-color:rgba(75,198,118,.26); }
.rd-status-badge.running::before { background:#4bc676; box-shadow:0 0 10px rgba(75,198,118,.55); }
.rd-status-badge.paused { color:rgba(255,255,255,.82); }
.rd-status-text { }
.rd-controls-row { display:flex; gap:8px; }
.rd-btn { flex:1; min-height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:rgba(255,255,255,.92); font-size:12px; font-weight:700; letter-spacing:.02em; cursor:pointer; transition:background .16s ease, border-color .16s ease, transform .16s ease; }
.rd-btn:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); }
.rd-btn:active { transform:translateY(1px); }
.rd-btn.primary { background:rgba(75,198,118,.18); border-color:rgba(75,198,118,.34); }
.rd-btn.primary:hover { background:rgba(75,198,118,.26); }
.rd-btn.ghost { flex:0 0 auto; padding:0 10px; }
.rd-select, .rd-slider, .rd-advanced-select { width:100%; }
.rd-simple-row .ui-control, .rd-advanced-body .ui-control { min-width:0; }
.rd-advanced { border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.03); overflow:hidden; }
.rd-advanced > summary { list-style:none; cursor:pointer; padding:10px 12px; font-size:12px; font-weight:700; color:rgba(255,255,255,.86); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rd-advanced > summary::-webkit-details-marker { display:none; }
.rd-advanced > summary::after { content:'▾'; font-size:11px; color:rgba(255,255,255,.55); transition:transform .16s ease; }
.rd-advanced[open] > summary::after { transform:rotate(180deg); }
.rd-advanced-body { padding:0 12px 12px; display:flex; flex-direction:column; gap:9px; border-top:1px solid rgba(255,255,255,.05); }
.rd-mini-hint { }
.rd-simple-row { display:flex; gap:8px; align-items:flex-end; }
.rd-simple-row .param-row { flex:1; }



/* ── Shared focus + interaction polish: v1.1.5 UX Foundation ─────────────────
   Keeps node-specific behavior classes intact while making controls feel like
   one accessible component system. */
.ui-control { position:relative; }
.ui-control:focus-within .ui-label { color:rgba(255,255,255,.84); }
.ui-select:hover { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.065); }
.ui-select:focus-visible {
  outline:none;
  border-color:var(--accent1);
  box-shadow:0 0 0 1px rgba(124,58,237,.32), 0 0 16px rgba(124,58,237,.14);
}
.ui-slider:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px rgba(124,58,237,.16);
}
.ui-slider:focus-visible::-webkit-slider-thumb {
  transform:scale(1.18);
  box-shadow:0 0 0 4px rgba(124,58,237,.18), 0 0 10px rgba(124,58,237,.55);
}
.ui-slider:focus-visible::-moz-range-thumb {
  transform:scale(1.18);
  box-shadow:0 0 0 4px rgba(124,58,237,.18), 0 0 10px rgba(124,58,237,.55);
}
.ui-advanced summary:focus-visible {
  outline:none;
  border-color:rgba(124,58,237,.42);
  box-shadow:0 0 0 1px rgba(124,58,237,.28), 0 0 14px rgba(124,58,237,.12);
}
.ui-advanced summary:hover { color:rgba(255,255,255,.82); background:rgba(255,255,255,.045); }
.ui-preview-frame:focus-within {
  border-color:rgba(124,58,237,.26);
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.08);
}
.composite-layer-row { outline:none; }
.composite-layer-row:focus-visible {
  border-color:rgba(251,146,60,.48);
  box-shadow:0 0 0 1px rgba(251,146,60,.18), 0 0 14px rgba(251,146,60,.12);
}
.composite-layer-row:focus-within { border-color:rgba(251,146,60,.32); }
.ui-button[aria-pressed="true"] {
  border-color:rgba(75,198,118,.46);
  box-shadow:0 0 0 1px rgba(75,198,118,.12), 0 0 14px rgba(75,198,118,.14);
}
body.light .ui-control:focus-within .ui-label { color:rgba(42,35,32,.84); }
body.light .ui-select:hover { background:rgba(255,255,255,.62); border-color:rgba(93,78,73,.25); }
body.light .ui-select:focus-visible,
body.light .ui-advanced summary:focus-visible {
  border-color:rgba(93,78,73,.38);
  box-shadow:0 0 0 1px rgba(93,78,73,.18), 0 0 14px rgba(93,78,73,.08);
}
body.light .ui-slider:focus-visible { box-shadow:0 0 0 3px rgba(93,78,73,.12); }
body.light .ui-advanced summary:hover { color:var(--text); background:rgba(93,78,73,.06); }
body.light .composite-layer-row:focus-visible {
  border-color:rgba(93,78,73,.32);
  box-shadow:0 0 0 1px rgba(93,78,73,.12), 0 0 14px rgba(93,78,73,.07);
}
/* Shared contextual help: v1.1.5 UX Foundation
   CSS pseudo-tooltips were replaced by the body-level tooltip manager below.
   Keep this area as the documented foundation for future data-ui-help controls. */

/* Shared tooltip manager fix: v1.1.5 UX Foundation
   Pseudo-element tooltips are disabled because scrollable layer rows can clip them.
   A single body-level tooltip is positioned by JavaScript, delayed by 1s, and viewport-safe. */
.ui-control[data-ui-help]::after,
.ui-button[data-ui-help]::after,
.ui-advanced[data-ui-help]::after,
.ui-preview-panel[data-ui-help]::after,
.composite-layer-row[data-ui-help]::after {
  content:none !important;
  display:none !important;
}
.ui-tooltip {
  position:fixed;
  z-index:9800;
  max-width:280px;
  min-width:170px;
  padding:7px 9px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(8,8,18,.96);
  color:rgba(255,255,255,.78);
  box-shadow:0 10px 28px rgba(0,0,0,.44), 0 0 0 1px rgba(124,58,237,.08);
  backdrop-filter:blur(12px);
  font-size:10px;
  line-height:1.35;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.025em;
  pointer-events:none;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity .14s ease, transform .14s ease;
  white-space:normal;
}
.ui-tooltip.visible { opacity:1; transform:translateY(0); }
body.light .ui-tooltip {
  background:rgba(250,248,244,.98);
  color:rgba(42,35,32,.72);
  border-color:rgba(129,117,110,.18);
  box-shadow:0 10px 24px rgba(93,78,73,.14);
}



/* ─────────────────────────────────────────────
   UX Foundation v1.1.5 - Global control rollout
   Applies the shared UI language to legacy node controls without changing
   their existing JavaScript hooks or node-specific classes.
───────────────────────────────────────────── */
.node-params .param-row,
.hue-sat-panel .param-row,
.levels-panel .param-row,
.crop-aspect-row,
.text-font-row,
.node-image-settings .img-setting-row,
.output-settings .out-setting-row,
.node-image-properties .img-prop-row {
  position:relative;
}

.node-params .param-row,
.hue-sat-panel .param-row,
.levels-panel .param-row,
.crop-aspect-row,
.text-font-row {
  gap:6px;
}

.node-params .param-label,
.hue-sat-panel .param-label,
.levels-panel .param-label,
.crop-aspect-row .param-label,
.text-style-label,
.text-font-row .param-label,
.param-checkbox-label,
.param-toggle-label,
.img-setting-label,
.out-setting-label {
  font-size:10px;
  font-family:'JetBrains Mono',monospace;
  color:var(--text-dim);
  letter-spacing:.055em;
  line-height:1.2;
}

.node-params .param-label span,
.hue-sat-panel .param-label span,
.levels-panel .param-label span {
  color:rgba(255,255,255,.68);
  font-variant-numeric:tabular-nums;
}

.node-params .param-select,
.levels-panel .param-select,
.crop-aspect-select,
.out-setting-select,
.export-select,
.gm-monitor-select,
.text-font-input,
.out-setting-input,
.export-field,
.param-textarea {
  border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  outline:none;
  transition:border-color .15s, background .15s, box-shadow .15s;
}

.node-params .param-select,
.levels-panel .param-select,
.crop-aspect-select,
.out-setting-select,
.export-select,
.gm-monitor-select {
  min-height:30px;
  padding:5px 9px;
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;
}

.node-params .param-select:hover,
.levels-panel .param-select:hover,
.crop-aspect-select:hover,
.out-setting-select:hover,
.export-select:hover,
.gm-monitor-select:hover,
.text-font-input:hover,
.out-setting-input:hover,
.export-field:hover,
.param-textarea:hover {
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.065);
}

.node-params .param-select:focus-visible,
.levels-panel .param-select:focus-visible,
.crop-aspect-select:focus-visible,
.out-setting-select:focus-visible,
.export-select:focus-visible,
.gm-monitor-select:focus-visible,
.text-font-input:focus-visible,
.out-setting-input:focus-visible,
.export-field:focus-visible,
.param-textarea:focus-visible {
  border-color:var(--accent1);
  box-shadow:0 0 0 3px rgba(124,58,237,.16), 0 0 18px rgba(124,58,237,.12);
}

.node-params .param-slider,
.hue-sat-panel .param-slider,
.levels-panel .param-slider,
.output-settings input[type="range"],
.export-panel input[type="range"] {
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(124,58,237,.52));
}

.node-params .param-slider:focus-visible,
.hue-sat-panel .param-slider:focus-visible,
.levels-panel .param-slider:focus-visible,
.output-settings input[type="range"]:focus-visible,
.export-panel input[type="range"]:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px rgba(124,58,237,.16);
}

.text-style-btn,
.text-font-load-btn,
.curve-reset-btn,
.grad-ramp-btn,
.fit-btn,
.img-pill,
.output-settings-fold,
.export-btn,
.docs-close,
.help-close,
.gm-monitor-toggle {
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .12s, opacity .15s;
}

.text-style-btn:focus-visible,
.text-font-load-btn:focus-visible,
.curve-reset-btn:focus-visible,
.grad-ramp-btn:focus-visible,
.fit-btn:focus-visible,
.img-pill:focus-visible,
.output-settings-fold:focus-visible,
.export-btn:focus-visible,
.docs-close:focus-visible,
.help-close:focus-visible,
.gm-monitor-toggle:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px rgba(124,58,237,.18), 0 0 14px rgba(124,58,237,.12);
}

.node-params .param-note,
.text-font-hint,
.out-source-resolution-status,
.img-prop-row,
.levels-hist-empty,
.curve-controls,
.composite-layer-empty-note {
  color:var(--text-dim);
}

body.light .node-params .param-label span,
body.light .hue-sat-panel .param-label span,
body.light .levels-panel .param-label span {
  color:rgba(42,35,32,.68);
}

body.light .node-params .param-select,
body.light .levels-panel .param-select,
body.light .crop-aspect-select,
body.light .out-setting-select,
body.light .export-select,
body.light .gm-monitor-select,
body.light .text-font-input,
body.light .out-setting-input,
body.light .export-field,
body.light .param-textarea {
  background:rgba(255,255,255,.62);
  border-color:rgba(129,117,110,.18);
  color:var(--text);
}

body.light .node-params .param-select:hover,
body.light .levels-panel .param-select:hover,
body.light .crop-aspect-select:hover,
body.light .out-setting-select:hover,
body.light .export-select:hover,
body.light .gm-monitor-select:hover,
body.light .text-font-input:hover,
body.light .out-setting-input:hover,
body.light .export-field:hover,
body.light .param-textarea:hover {
  background:rgba(255,255,255,.76);
  border-color:rgba(93,78,73,.26);
}

body.light .node-params .param-slider,
body.light .hue-sat-panel .param-slider,
body.light .levels-panel .param-slider,
body.light .output-settings input[type="range"],
body.light .export-panel input[type="range"] {
  background:linear-gradient(90deg,rgba(93,78,73,.12),rgba(93,78,73,.34));
}


/* ─────────────────────────────────────────────
   UX Foundation v1.1.5 - Node rollout pass 2
   Normalizes legacy node panels around the shared UI primitives.
   This is intentionally CSS/runtime-only: rendering and node logic stay untouched.
───────────────────────────────────────────── */
.node-params,
.hue-sat-panel,
.levels-panel,
.crop-visual-panel,
.node-image-settings,
.node-image-properties,
.output-settings,
.composite-layer-panel {
  --ui-panel-pad-x:12px;
  --ui-panel-gap:10px;
}

.node-params,
.node-image-settings,
.node-image-properties,
.output-settings {
  gap:var(--ui-panel-gap);
}

.node-params .param-row.ui-control,
.hue-sat-panel .param-row.ui-control,
.levels-panel .param-row.ui-control,
.crop-aspect-row.ui-control,
.text-font-row.ui-control {
  padding:1px 0;
}

.ui-field,
.node input.ui-field,
.output-settings input.ui-field,
#export-modal input.ui-field {
  min-height:28px;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  font-family:'Space Grotesk',sans-serif;
  font-size:11px;
  padding:5px 9px;
  outline:none;
  transition:border-color .14s, box-shadow .14s, background .14s;
}

.ui-field:focus,
.node input.ui-field:focus,
.output-settings input.ui-field:focus,
#export-modal input.ui-field:focus {
  border-color:var(--accent1);
  box-shadow:0 0 0 1px rgba(124,58,237,.26), 0 0 0 4px rgba(124,58,237,.10);
  background:rgba(255,255,255,.07);
}

.ui-field:disabled,
.ui-select:disabled,
.ui-slider:disabled,
.ui-button:disabled {
  opacity:.45;
  cursor:not-allowed;
  filter:saturate(.45);
}

.ui-button.compact { min-height:26px; padding:5px 9px; }
.ui-button.square { width:26px; min-width:26px; height:26px; padding:0; }

.node [data-ui-normalized="true"] .ui-label,
.node .ui-control[data-ui-normalized="true"] .ui-label {
  text-transform:none;
}

.node .ui-control:hover .ui-label,
.node .ui-control:focus-within .ui-label {
  color:rgba(255,255,255,.80);
}

.node-params .param-checkbox-row,
.node-params .param-toggle-row {
  min-height:24px;
}

.node-params .param-checkbox-input:focus-visible,
.node-params .param-toggle input:focus-visible ~ .param-toggle-track {
  outline:2px solid rgba(124,58,237,.75);
  outline-offset:3px;
}

body.light .ui-field,
body.light .node input.ui-field,
body.light .output-settings input.ui-field,
body.light #export-modal input.ui-field {
  background:rgba(255,255,255,.62);
  border-color:rgba(129,117,110,.18);
  color:var(--text);
}

body.light .ui-field:focus,
body.light .node input.ui-field:focus,
body.light .output-settings input.ui-field:focus,
body.light #export-modal input.ui-field:focus {
  border-color:#5D4E49;
  box-shadow:0 0 0 1px rgba(93,78,73,.22), 0 0 0 4px rgba(93,78,73,.08);
  background:rgba(255,255,255,.78);
}

body.light .node .ui-control:hover .ui-label,
body.light .node .ui-control:focus-within .ui-label {
  color:rgba(42,35,32,.82);
}



/* UX Foundation v1.1.5 - Node rollout pass 3: preview + advanced consistency */
.node [data-ui-preview="shared"],
.node .ui-preview-rollout {
  border-radius:10px;
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.node .ui-preview-rollout canvas,
.node .ui-preview-rollout img {
  border-radius:inherit;
}
.node .ui-preview-rollout .preview-empty,
.node .ui-preview-rollout .img-placeholder,
.node .ui-preview-rollout .levels-hist-empty,
.node .ui-preview-rollout .crop-preview-empty {
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.045em;
}
.node [data-ui-panel="shared"] {
  --ui-panel-gap:9px;
}
.node [data-ui-panel="shared"] > .ui-control + .ui-control {
  margin-top:0;
}
.node details.ui-advanced,
.node .ui-advanced-rollout {
  border-top:1px solid rgba(255,255,255,.065);
}
.node details.ui-advanced > summary,
.node .ui-advanced-summary {
  outline:none;
  cursor:pointer;
}
.node details.ui-advanced > summary:focus-visible,
.node .ui-advanced-summary:focus-visible {
  box-shadow:0 0 0 2px rgba(124,58,237,.36);
  border-radius:8px;
}
.node details.ui-advanced[open] > summary,
.node .ui-advanced-summary[aria-expanded="true"] {
  color:var(--text);
}
.node .ui-empty-rollout {
  color:var(--text-dim);
  opacity:.68;
}
body.light .node [data-ui-preview="shared"],
body.light .node .ui-preview-rollout {
  border-color:rgba(129,117,110,.14);
  box-shadow:inset 0 0 0 1px rgba(245,242,238,.35);
}
body.light .node details.ui-advanced,
body.light .node .ui-advanced-rollout {
  border-top-color:rgba(129,117,110,.12);
}


/* UX Foundation v1.1.5 - Pass 4 safe rollout guards + passive preview polish
   Interactive editors such as Crop, Curves, Levels, Color Picker and Gradient Ramp
   are intentionally excluded from generic preview normalization. */
:root {
  --ui-radius-sm: 6px;
  --ui-radius-md: 9px;
  --ui-radius-lg: 14px;
  --ui-border-soft: rgba(255,255,255,.08);
  --ui-border-strong: rgba(255,255,255,.14);
  --ui-surface-soft: rgba(255,255,255,.035);
  --ui-surface-hover: rgba(255,255,255,.055);
  --ui-focus-ring: 0 0 0 2px rgba(124,58,237,.34);
}

/* Passive preview surfaces only. Do not apply these classes to interactive editors. */
.node-preview-area,
.node-image-area,
.gm-monitor-canvas-wrap {
  border-color: var(--ui-border-soft);
}

.node-preview-area:focus-within,
.node-image-area:focus-within,
.gm-monitor-canvas-wrap:focus-within {
  box-shadow: inset 0 0 0 1px rgba(124,58,237,.28);
}

/* Make standard node naming fields feel consistent without touching specialized editors. */
.node-name-input,
.out-setting-input,
.out-setting-select,
.export-field,
.export-select,
.text-font-input {
  transition: border-color .14s, background .14s, box-shadow .14s;
}

.node-name-input:hover,
.out-setting-input:hover,
.out-setting-select:hover,
.export-field:hover,
.export-select:hover,
.text-font-input:hover {
  border-color: var(--ui-border-strong);
  background: rgba(255,255,255,.06);
}

.node-name-input:focus,
.out-setting-input:focus,
.out-setting-select:focus,
.export-field:focus,
.export-select:focus,
.text-font-input:focus {
  border-color: var(--accent1);
  box-shadow: var(--ui-focus-ring);
}

/* Keep small utility buttons visually aligned with the shared button language. */
.node-reset-btn,
.curve-reset-btn,
.grad-ramp-btn,
.fit-btn,
.preview-save-btn,
.preview-3d-btn,
.out-setting-select,
.output-settings-fold,
.gm-monitor-toggle {
  transition:
    background .14s,
    border-color .14s,
    color .14s,
    opacity .14s,
    transform .14s,
    box-shadow .14s;
}

.node-reset-btn:focus-visible,
.curve-reset-btn:focus-visible,
.grad-ramp-btn:focus-visible,
.fit-btn:focus-visible,
.preview-save-btn:focus-visible,
.preview-3d-btn:focus-visible,
.output-settings-fold:focus-visible,
.gm-monitor-toggle:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring);
}

/* Passive preview empty states. */
.preview-empty,
.node-image-area .img-placeholder,
.gm-monitor-empty {
  letter-spacing: .045em;
}

/* Prevent global rollout classes from visually changing interactive editor surfaces. */
.crop-stage,
.crop-source-frame,
.crop-rect,
.curve-editor-wrap,
.curve-canvas-wrap,
.levels-hist-wrap,
.grad-ramp-wrap,
.color-picker-wrap,
.cp-popover,
.hue-wheel-wrap {
  --ui-radius-sm: initial;
  --ui-radius-md: initial;
  --ui-radius-lg: initial;
}

/* Clear labels stay quiet until the user interacts with the control group. */
.param-row:focus-within .param-label,
.img-setting-row:focus-within .img-setting-label,
.out-setting-row:focus-within .out-setting-label,
.node-name-row:focus-within .node-name-label {
  color: rgba(226,226,240,.78);
}

/* Light mode equivalents. */
body.light {
  --ui-border-soft: rgba(129,117,110,.14);
  --ui-border-strong: rgba(129,117,110,.24);
  --ui-surface-soft: rgba(255,255,255,.32);
  --ui-surface-hover: rgba(255,255,255,.48);
  --ui-focus-ring: 0 0 0 2px rgba(93,78,73,.22);
}

body.light .node-name-input:hover,
body.light .out-setting-input:hover,
body.light .out-setting-select:hover,
body.light .export-field:hover,
body.light .export-select:hover,
body.light .text-font-input:hover {
  background: rgba(255,255,255,.72);
  border-color: var(--ui-border-strong);
}

body.light .param-row:focus-within .param-label,
body.light .img-setting-row:focus-within .img-setting-label,
body.light .out-setting-row:focus-within .out-setting-label,
body.light .node-name-row:focus-within .node-name-label {
  color: rgba(42,35,32,.78);
}


/* Noodlz v1.1.14 - UX Consistency: UI type system
   Nodes are now visually classified before broad UX normalization is applied.
   This prevents interactive editor regressions like the Crop issue. */
.node[data-ui-type="interactive-editor"] .crop-stage,
.node[data-ui-type="interactive-editor"] .curve-editor-wrap,
.node[data-ui-type="interactive-editor"] .levels-hist-wrap,
.node[data-ui-type="interactive-editor"] .grad-ramp-wrap,
.node[data-ui-type="interactive-editor"] .color-picker-wrap,
.node[data-ui-type="interactive-editor"] .hue-wheel-wrap {
  outline: none;
}

.node[data-ui-type="passive-preview"] .node-preview-area,
.node[data-ui-type="source"] .node-image-area,
.node[data-ui-type="output"] .node-preview-area {
  background:#050510;
  border-top-color:rgba(255,255,255,.065);
}

.node[data-ui-type="generator"] .node-params,
.node[data-ui-type="adjustment"] .node-params,
.node[data-ui-type="filter"] .node-params,
.node[data-ui-type="distortion"] .node-params,
.node[data-ui-type="composite"] .node-params,
.node[data-ui-type="mask"] .node-params {
  gap:10px;
}

.node[data-ui-type="generator"] .param-row,
.node[data-ui-type="adjustment"] .param-row,
.node[data-ui-type="filter"] .param-row,
.node[data-ui-type="distortion"] .param-row,
.node[data-ui-type="composite"] .param-row,
.node[data-ui-type="mask"] .param-row {
  gap:6px;
}

.node[data-ui-type="generator"] .param-label,
.node[data-ui-type="adjustment"] .param-label,
.node[data-ui-type="filter"] .param-label,
.node[data-ui-type="distortion"] .param-label,
.node[data-ui-type="composite"] .param-label,
.node[data-ui-type="mask"] .param-label {
  min-height:16px;
  align-items:center;
}

.node[data-ui-type="generator"] .param-select,
.node[data-ui-type="adjustment"] .param-select,
.node[data-ui-type="filter"] .param-select,
.node[data-ui-type="distortion"] .param-select,
.node[data-ui-type="composite"] .param-select,
.node[data-ui-type="mask"] .param-select {
  min-height:30px;
}

.node[data-ui-type="generator"] .param-slider,
.node[data-ui-type="adjustment"] .param-slider,
.node[data-ui-type="filter"] .param-slider,
.node[data-ui-type="distortion"] .param-slider,
.node[data-ui-type="composite"] .param-slider,
.node[data-ui-type="mask"] .param-slider {
  height:4px;
}

/* Metadata debug marker, intentionally subtle and only visible on hover. */
.node[data-ui-type]::after {
  content:attr(data-ui-type);
  position:absolute;
  right:12px;
  bottom:-18px;
  font-size:8px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.24);
  opacity:0;
  pointer-events:none;
  transition:opacity .14s;
}
.node[data-ui-type]:hover::after {
  opacity:.55;
}
.node.collapsed[data-ui-type]::after,
.node.pinned-viewport[data-ui-type]::after {
  display:none;
}

/* Shared control state rollout, limited to classified non-editor nodes. */
.node[data-ui-type]:not([data-ui-type="interactive-editor"]) .param-select:hover,
.node[data-ui-type]:not([data-ui-type="interactive-editor"]) .param-textarea:hover,
.node[data-ui-type]:not([data-ui-type="interactive-editor"]) .text-font-input:hover {
  border-color:rgba(255,255,255,.16);
}

.node[data-ui-type]:not([data-ui-type="interactive-editor"]) .param-select:focus,
.node[data-ui-type]:not([data-ui-type="interactive-editor"]) .param-textarea:focus,
.node[data-ui-type]:not([data-ui-type="interactive-editor"]) .text-font-input:focus {
  border-color:var(--accent1);
  box-shadow:0 0 0 2px rgba(124,58,237,.25);
}

/* Preserve specialized editors completely. */
.node[data-ui-type="interactive-editor"] .crop-stage,
.node[data-ui-type="interactive-editor"] .crop-source-frame,
.node[data-ui-type="interactive-editor"] .crop-rect,
.node[data-ui-type="interactive-editor"] .curve-canvas,
.node[data-ui-type="interactive-editor"] .levels-hist-wrap,
.node[data-ui-type="interactive-editor"] .grad-ramp-bar,
.node[data-ui-type="interactive-editor"] .cp-popover * {
  transition:inherit;
}

/* Light mode. */
body.light .node[data-ui-type="passive-preview"] .node-preview-area,
body.light .node[data-ui-type="source"] .node-image-area,
body.light .node[data-ui-type="output"] .node-preview-area {
  background:#e8e0f8;
  border-top-color:rgba(124,58,237,.1);
}

body.light .node[data-ui-type]::after {
  color:rgba(42,35,32,.28);
}

body.light .node[data-ui-type]:not([data-ui-type="interactive-editor"]) .param-select:hover,
body.light .node[data-ui-type]:not([data-ui-type="interactive-editor"]) .param-textarea:hover,
body.light .node[data-ui-type]:not([data-ui-type="interactive-editor"]) .text-font-input:hover {
  border-color:rgba(93,78,73,.26);
}


/* Noodlz v1.1.6 - Image + Output consistency pass
   Source and Output nodes become the reference for passive preview behavior. */

/* Shared passive preview feel for Image and Output only. */
.node[data-ui-type="source"] .node-image-area,
.node[data-ui-type="output"] .node-preview-area {
  background:#050510;
  border-top:1px solid rgba(255,255,255,.065);
  border-bottom:1px solid rgba(255,255,255,.035);
}

.node[data-ui-type="source"] .node-image-area img,
.node[data-ui-type="output"] .node-preview-area canvas {
  display:block;
}

/* Image placeholders and output empty states should read as the same design language. */
.node[data-ui-type="source"] .img-placeholder,
.node[data-ui-type="output"] .preview-empty,
.node[data-ui-type="output"] .node-preview-area .preview-empty {
  color:var(--text-dim);
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  letter-spacing:.055em;
  text-transform:lowercase;
  opacity:.62;
}

/* Source/output settings use one compact inspector rhythm. */
.node[data-ui-type="source"] .node-image-settings,
.node[data-ui-type="source"] .node-image-properties,
.node[data-ui-type="output"] .output-settings {
  padding:10px 12px 12px;
  gap:8px;
}

.node[data-ui-type="source"] .img-setting-row,
.node[data-ui-type="output"] .out-setting-row {
  min-height:26px;
}

.node[data-ui-type="source"] .img-setting-label,
.node[data-ui-type="source"] .img-prop-row,
.node[data-ui-type="output"] .out-setting-label,
.node[data-ui-type="output"] .out-source-resolution-status {
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  letter-spacing:.045em;
}

.node[data-ui-type="source"] .img-setting-pills {
  min-height:26px;
}

.node[data-ui-type="source"] .img-pill {
  min-height:20px;
  border-radius:6px;
}

.node[data-ui-type="output"] .out-setting-input,
.node[data-ui-type="output"] .out-setting-select {
  min-height:26px;
  border-radius:7px;
}

/* Output fold header aligns with shared advanced headers, but remains visually distinct. */
.node[data-ui-type="output"] .output-settings-fold {
  min-height:38px;
  align-items:center;
}

.node[data-ui-type="output"] .output-settings-fold-label {
  font-size:10px;
  letter-spacing:.075em;
}

/* Fit strip and save button become calmer and consistent. */
.node[data-ui-type="output"] .preview-fit-strip {
  border-radius:9px;
  padding:3px;
}

.node[data-ui-type="output"] .fit-btn {
  min-height:20px;
  border-radius:6px;
}

.node[data-ui-type="output"] .preview-save-btn {
  min-height:26px;
  border-radius:8px;
}

/* Properties should feel like metadata, not editable controls. */
.node[data-ui-type="source"] .node-image-properties {
  background:rgba(255,255,255,.012);
}

.node[data-ui-type="source"] .img-prop-row {
  min-height:16px;
}

/* Light mode */
body.light .node[data-ui-type="source"] .node-image-area,
body.light .node[data-ui-type="output"] .node-preview-area {
  background:#D2CEC6;
  border-top-color:rgba(124,58,237,.10);
  border-bottom-color:rgba(124,58,237,.06);
}

body.light .node[data-ui-type="source"] .node-image-properties {
  background:rgba(255,255,255,.14);
}


/* Noodlz v1.1.6 - Generator node consistency pass
   Applies only to nodes classified as generator. Interactive editors remain protected. */

.node[data-ui-type="generator"] {
  --generator-control-gap: 10px;
}

.node[data-ui-type="generator"] .node-params {
  padding:12px 12px 13px;
  gap:var(--generator-control-gap);
}

.node[data-ui-type="generator"] .param-row {
  gap:6px;
}

.node[data-ui-type="generator"] .param-label {
  min-height:16px;
  align-items:center;
  font-size:10px;
  letter-spacing:.045em;
}

.node[data-ui-type="generator"] .param-label span {
  min-width:48px;
  opacity:.74;
}

.node[data-ui-type="generator"] .param-select,
.node[data-ui-type="generator"] .param-textarea,
.node[data-ui-type="generator"] .text-font-input {
  min-height:30px;
  border-radius:8px;
}

.node[data-ui-type="generator"] .param-slider {
  height:4px;
}

.node[data-ui-type="generator"] .param-slider::-webkit-slider-thumb {
  width:14px;
  height:14px;
}

.node[data-ui-type="generator"] .param-toggle-row,
.node[data-ui-type="generator"] .param-checkbox-row,
.node[data-ui-type="generator"] .text-style-row,
.node[data-ui-type="generator"] .text-font-row {
  padding:2px 0;
}

.node[data-ui-type="generator"] .text-style-controls {
  gap:6px;
}

.node[data-ui-type="generator"] .text-style-btn {
  width:28px;
  height:28px;
  border-radius:8px;
}

.node[data-ui-type="generator"] .text-font-input-row {
  gap:7px;
}

.node[data-ui-type="generator"] .text-font-load-btn {
  min-height:30px;
  border-radius:8px;
}

/* Generator previews or visual helper panels should stay calm and contained. */
.node[data-ui-type="generator"] .node-preview-area,
.node[data-ui-type="generator"] .node-image-area {
  border-top-color:rgba(255,255,255,.065);
}

/* Do not alter known interactive editor internals even if classified incorrectly later. */
.node[data-ui-type="generator"] .grad-ramp-wrap,
.node[data-ui-type="generator"] .crop-stage,
.node[data-ui-type="generator"] .curve-editor-wrap,
.node[data-ui-type="generator"] .levels-hist-wrap {
  all:revert-layer;
}

/* Shape-specific layout polish without changing behavior. */
.node[data-ui-type="generator"] .param-checkbox-input {
  width:16px;
  height:16px;
}

/* Light mode */
body.light .node[data-ui-type="generator"] .node-params {
  border-top-color:rgba(124,58,237,.1);
}

body.light .node[data-ui-type="generator"] .param-select,
body.light .node[data-ui-type="generator"] .param-textarea,
body.light .node[data-ui-type="generator"] .text-font-input {
  background:rgba(255,255,255,.68);
  border-color:rgba(129,117,110,.18);
}

body.light .node[data-ui-type="generator"] .param-select:hover,
body.light .node[data-ui-type="generator"] .param-textarea:hover,
body.light .node[data-ui-type="generator"] .text-font-input:hover {
  background:rgba(255,255,255,.82);
  border-color:rgba(93,78,73,.28);
}


/* Noodlz v1.1.6 - Adjustment node consistency pass
   Applies only to nodes classified as adjustment. Interactive editor adjustment
   nodes like Levels, Curves and Hue wheel remain protected by uiType. */

.node[data-ui-type="adjustment"] .node-params {
  padding:12px 12px 13px;
  gap:10px;
}

.node[data-ui-type="adjustment"] .param-row {
  gap:6px;
}

.node[data-ui-type="adjustment"] .param-label {
  min-height:16px;
  align-items:center;
  font-size:10px;
  letter-spacing:.045em;
}

.node[data-ui-type="adjustment"] .param-label span {
  min-width:48px;
  opacity:.76;
}

.node[data-ui-type="adjustment"] .param-slider {
  height:4px;
}

.node[data-ui-type="adjustment"] .param-slider::-webkit-slider-thumb {
  width:14px;
  height:14px;
}

.node[data-ui-type="adjustment"] .param-select,
.node[data-ui-type="adjustment"] .param-textarea {
  min-height:30px;
  border-radius:8px;
}

.node[data-ui-type="adjustment"] .param-toggle-row,
.node[data-ui-type="adjustment"] .param-checkbox-row {
  padding:2px 0;
}

.node[data-ui-type="adjustment"] .param-note {
  margin-top:1px;
  opacity:.78;
}

/* Adjustment values should be easy to scan. */
.node[data-ui-type="adjustment"] .param-label span {
  font-family:'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums;
}

/* Keep interactive visual editors untouched even if nested in an adjustment node. */
.node[data-ui-type="adjustment"] .levels-panel,
.node[data-ui-type="adjustment"] .hue-sat-panel,
.node[data-ui-type="adjustment"] .curve-editor-wrap,
.node[data-ui-type="adjustment"] .color-picker-wrap {
  isolation:isolate;
}

/* Light mode */
body.light .node[data-ui-type="adjustment"] .node-params {
  border-top-color:rgba(124,58,237,.1);
}

body.light .node[data-ui-type="adjustment"] .param-select,
body.light .node[data-ui-type="adjustment"] .param-textarea {
  background:rgba(255,255,255,.68);
  border-color:rgba(129,117,110,.18);
}

body.light .node[data-ui-type="adjustment"] .param-select:hover,
body.light .node[data-ui-type="adjustment"] .param-textarea:hover {
  background:rgba(255,255,255,.82);
  border-color:rgba(93,78,73,.28);
}


/* Noodlz v1.1.6 - Filter node consistency pass
   Applies only to nodes classified as filter. These are mostly simple
   slider/select parameter panels, so they are safe for shared control polish. */

.node[data-ui-type="filter"] .node-params {
  padding:12px 12px 13px;
  gap:10px;
}

.node[data-ui-type="filter"] .param-row {
  gap:6px;
}

.node[data-ui-type="filter"] .param-label {
  min-height:16px;
  align-items:center;
  font-size:10px;
  letter-spacing:.045em;
}

.node[data-ui-type="filter"] .param-label span {
  min-width:48px;
  opacity:.76;
  font-family:'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums;
}

.node[data-ui-type="filter"] .param-slider {
  height:4px;
}

.node[data-ui-type="filter"] .param-slider::-webkit-slider-thumb {
  width:14px;
  height:14px;
}

.node[data-ui-type="filter"] .param-select,
.node[data-ui-type="filter"] .param-textarea {
  min-height:30px;
  border-radius:8px;
}

.node[data-ui-type="filter"] .param-toggle-row,
.node[data-ui-type="filter"] .param-checkbox-row {
  padding:2px 0;
}

/* Filter nodes benefit from a slightly stronger hover because values are adjusted frequently. */
.node[data-ui-type="filter"] .param-row:focus-within,
.node[data-ui-type="filter"] .param-row:hover {
  color:var(--text);
}

.node[data-ui-type="filter"] .param-row:hover .param-label {
  color:rgba(226,226,240,.72);
}

/* Light mode */
body.light .node[data-ui-type="filter"] .node-params {
  border-top-color:rgba(124,58,237,.1);
}

body.light .node[data-ui-type="filter"] .param-select,
body.light .node[data-ui-type="filter"] .param-textarea {
  background:rgba(255,255,255,.68);
  border-color:rgba(129,117,110,.18);
}

body.light .node[data-ui-type="filter"] .param-select:hover,
body.light .node[data-ui-type="filter"] .param-textarea:hover {
  background:rgba(255,255,255,.82);
  border-color:rgba(93,78,73,.28);
}

body.light .node[data-ui-type="filter"] .param-row:hover .param-label {
  color:rgba(42,35,32,.72);
}


/* Noodlz v1.1.6 - Distortion node consistency pass
   Applies only to nodes classified as distortion. These nodes often include
   strength/scale/offset controls, so values and sliders are made more scannable. */

.node[data-ui-type="distortion"] .node-params {
  padding:12px 12px 13px;
  gap:10px;
}

.node[data-ui-type="distortion"] .param-row {
  gap:6px;
}

.node[data-ui-type="distortion"] .param-label {
  min-height:16px;
  align-items:center;
  font-size:10px;
  letter-spacing:.045em;
}

.node[data-ui-type="distortion"] .param-label span {
  min-width:48px;
  opacity:.76;
  font-family:'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums;
}

.node[data-ui-type="distortion"] .param-slider {
  height:4px;
}

.node[data-ui-type="distortion"] .param-slider::-webkit-slider-thumb {
  width:14px;
  height:14px;
}

.node[data-ui-type="distortion"] .param-select,
.node[data-ui-type="distortion"] .param-textarea {
  min-height:30px;
  border-radius:8px;
}

.node[data-ui-type="distortion"] .param-toggle-row,
.node[data-ui-type="distortion"] .param-checkbox-row {
  padding:2px 0;
}

/* Distortion controls benefit from clear active rows because users tweak them by feel. */
.node[data-ui-type="distortion"] .param-row:hover .param-label,
.node[data-ui-type="distortion"] .param-row:focus-within .param-label {
  color:rgba(226,226,240,.74);
}

/* UV-related ports and labels should remain visually distinct. */
.node[data-ui-type="distortion"] .port-row.kind-uv .port {
  box-shadow:0 0 8px rgba(34,197,94,.35);
}

/* Light mode */
body.light .node[data-ui-type="distortion"] .node-params {
  border-top-color:rgba(124,58,237,.1);
}

body.light .node[data-ui-type="distortion"] .param-select,
body.light .node[data-ui-type="distortion"] .param-textarea {
  background:rgba(255,255,255,.68);
  border-color:rgba(129,117,110,.18);
}

body.light .node[data-ui-type="distortion"] .param-select:hover,
body.light .node[data-ui-type="distortion"] .param-textarea:hover {
  background:rgba(255,255,255,.82);
  border-color:rgba(93,78,73,.28);
}

body.light .node[data-ui-type="distortion"] .param-row:hover .param-label,
body.light .node[data-ui-type="distortion"] .param-row:focus-within .param-label {
  color:rgba(42,35,32,.74);
}


/* Noodlz v1.1.6 - Full safe UX consistency rollout
   Completes the remaining safe families: composite, mask, inspector and simulation.
   Interactive editors remain protected through data-ui-type and explicit selectors. */

/* Shared safe families */
.node[data-ui-type="composite"] .node-params,
.node[data-ui-type="mask"] .node-params,
.node[data-ui-type="inspector"] .node-params,
.node[data-ui-type="simulation"] .node-params,
.node[data-ui-type="parameter-panel"] .node-params,
.node[data-ui-type="passive-preview"] .node-params {
  padding:12px 12px 13px;
  gap:10px;
}

.node[data-ui-type="composite"] .param-row,
.node[data-ui-type="mask"] .param-row,
.node[data-ui-type="inspector"] .param-row,
.node[data-ui-type="simulation"] .param-row,
.node[data-ui-type="parameter-panel"] .param-row,
.node[data-ui-type="passive-preview"] .param-row {
  gap:6px;
}

.node[data-ui-type="composite"] .param-label,
.node[data-ui-type="mask"] .param-label,
.node[data-ui-type="inspector"] .param-label,
.node[data-ui-type="simulation"] .param-label,
.node[data-ui-type="parameter-panel"] .param-label,
.node[data-ui-type="passive-preview"] .param-label {
  min-height:16px;
  align-items:center;
  font-size:10px;
  letter-spacing:.045em;
}

.node[data-ui-type="composite"] .param-label span,
.node[data-ui-type="mask"] .param-label span,
.node[data-ui-type="inspector"] .param-label span,
.node[data-ui-type="simulation"] .param-label span,
.node[data-ui-type="parameter-panel"] .param-label span,
.node[data-ui-type="passive-preview"] .param-label span {
  min-width:48px;
  opacity:.76;
  font-family:'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums;
}

.node[data-ui-type="composite"] .param-slider,
.node[data-ui-type="mask"] .param-slider,
.node[data-ui-type="inspector"] .param-slider,
.node[data-ui-type="simulation"] .param-slider,
.node[data-ui-type="parameter-panel"] .param-slider,
.node[data-ui-type="passive-preview"] .param-slider {
  height:4px;
}

.node[data-ui-type="composite"] .param-slider::-webkit-slider-thumb,
.node[data-ui-type="mask"] .param-slider::-webkit-slider-thumb,
.node[data-ui-type="inspector"] .param-slider::-webkit-slider-thumb,
.node[data-ui-type="simulation"] .param-slider::-webkit-slider-thumb,
.node[data-ui-type="parameter-panel"] .param-slider::-webkit-slider-thumb,
.node[data-ui-type="passive-preview"] .param-slider::-webkit-slider-thumb {
  width:14px;
  height:14px;
}

.node[data-ui-type="composite"] .param-select,
.node[data-ui-type="mask"] .param-select,
.node[data-ui-type="inspector"] .param-select,
.node[data-ui-type="simulation"] .param-select,
.node[data-ui-type="parameter-panel"] .param-select,
.node[data-ui-type="passive-preview"] .param-select,
.node[data-ui-type="composite"] .param-textarea,
.node[data-ui-type="mask"] .param-textarea,
.node[data-ui-type="inspector"] .param-textarea,
.node[data-ui-type="simulation"] .param-textarea,
.node[data-ui-type="parameter-panel"] .param-textarea,
.node[data-ui-type="passive-preview"] .param-textarea {
  min-height:30px;
  border-radius:8px;
}

/* Composite Layer inspector refinement */
.node[data-ui-type="inspector"] .composite-layer-panel {
  padding:12px;
  gap:10px;
}

.node[data-ui-type="inspector"] .composite-layer-head {
  min-height:28px;
}

.node[data-ui-type="inspector"] .composite-layer-title {
  font-size:10px;
  letter-spacing:.08em;
}

.node[data-ui-type="inspector"] .composite-layer-row {
  min-height:52px;
  border-radius:11px;
}

.node[data-ui-type="inspector"] .composite-layer-row:hover {
  transform:translateY(-1px);
}

.node[data-ui-type="inspector"] .composite-layer-inspector-card {
  border-radius:11px;
  gap:12px;
}

.node[data-ui-type="inspector"] .composite-layer-control label {
  min-height:16px;
  align-items:center;
  font-size:10px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.045em;
}

.node[data-ui-type="inspector"] .composite-layer-control input[type="range"] {
  height:4px;
}

.node[data-ui-type="inspector"] .composite-layer-control select {
  min-height:30px;
  border-radius:8px;
}

/* Simulation-specific polish, currently Reaction Diffusion. */
.node[data-ui-type="simulation"] .rd-preview,
.node[data-ui-type="simulation"] .rd-preview-wrap,
.node[data-ui-type="simulation"] .rd-status-row,
.node[data-ui-type="simulation"] .rd-actions {
  isolation:isolate;
}

.node[data-ui-type="simulation"] .rd-actions,
.node[data-ui-type="simulation"] .ui-action-row {
  gap:7px;
}

.node[data-ui-type="simulation"] .rd-btn,
.node[data-ui-type="simulation"] .ui-button {
  min-height:30px;
  border-radius:8px;
}

.node[data-ui-type="simulation"] .rd-status-badge,
.node[data-ui-type="simulation"] .ui-status-badge {
  min-height:20px;
  border-radius:999px;
  padding-inline:8px;
}

/* Mask/composite nodes should emphasize input structure less aggressively. */
.node[data-ui-type="mask"] .port-row.input .port,
.node[data-ui-type="composite"] .port-row.input .port {
  box-shadow:0 0 7px rgba(244,114,182,.22);
}

.node[data-ui-type="mask"] .port-row.output .port,
.node[data-ui-type="composite"] .port-row.output .port {
  box-shadow:0 0 7px rgba(6,182,212,.20);
}

/* Generic passive-preview fallback */
.node[data-ui-type="passive-preview"] .node-preview-area {
  background:#050510;
  border-top-color:rgba(255,255,255,.065);
}

/* Final shared focus polish, excluding interactive editors. */
.node[data-ui-type]:not([data-ui-type="interactive-editor"]) select:focus-visible,
.node[data-ui-type]:not([data-ui-type="interactive-editor"]) input:focus-visible,
.node[data-ui-type]:not([data-ui-type="interactive-editor"]) textarea:focus-visible,
.node[data-ui-type]:not([data-ui-type="interactive-editor"]) button:focus-visible,
.node[data-ui-type]:not([data-ui-type="interactive-editor"]) summary:focus-visible {
  outline:none;
  box-shadow:0 0 0 2px rgba(124,58,237,.32);
}

/* Make disabled controls consistent across the full rollout. */
.node[data-ui-type]:not([data-ui-type="interactive-editor"]) select:disabled,
.node[data-ui-type]:not([data-ui-type="interactive-editor"]) input:disabled,
.node[data-ui-type]:not([data-ui-type="interactive-editor"]) textarea:disabled,
.node[data-ui-type]:not([data-ui-type="interactive-editor"]) button:disabled {
  opacity:.45;
  cursor:not-allowed;
  filter:saturate(.65);
}

/* Keep all interactive editors explicitly protected. */
.node[data-ui-type="interactive-editor"] .crop-stage,
.node[data-ui-type="interactive-editor"] .crop-source-frame,
.node[data-ui-type="interactive-editor"] .crop-rect,
.node[data-ui-type="interactive-editor"] .curve-editor-wrap,
.node[data-ui-type="interactive-editor"] .curve-canvas-wrap,
.node[data-ui-type="interactive-editor"] .levels-hist-wrap,
.node[data-ui-type="interactive-editor"] .levels-panel,
.node[data-ui-type="interactive-editor"] .grad-ramp-wrap,
.node[data-ui-type="interactive-editor"] .color-picker-wrap,
.node[data-ui-type="interactive-editor"] .hue-sat-panel,
.node[data-ui-type="interactive-editor"] .hue-wheel-wrap {
  isolation:isolate;
}

/* Light mode */
body.light .node[data-ui-type="composite"] .node-params,
body.light .node[data-ui-type="mask"] .node-params,
body.light .node[data-ui-type="inspector"] .node-params,
body.light .node[data-ui-type="simulation"] .node-params,
body.light .node[data-ui-type="parameter-panel"] .node-params,
body.light .node[data-ui-type="passive-preview"] .node-params {
  border-top-color:rgba(124,58,237,.1);
}

body.light .node[data-ui-type="composite"] .param-select,
body.light .node[data-ui-type="mask"] .param-select,
body.light .node[data-ui-type="inspector"] .param-select,
body.light .node[data-ui-type="simulation"] .param-select,
body.light .node[data-ui-type="parameter-panel"] .param-select,
body.light .node[data-ui-type="passive-preview"] .param-select,
body.light .node[data-ui-type="composite"] .param-textarea,
body.light .node[data-ui-type="mask"] .param-textarea,
body.light .node[data-ui-type="inspector"] .param-textarea,
body.light .node[data-ui-type="simulation"] .param-textarea,
body.light .node[data-ui-type="parameter-panel"] .param-textarea,
body.light .node[data-ui-type="passive-preview"] .param-textarea {
  background:rgba(255,255,255,.68);
  border-color:rgba(129,117,110,.18);
}

body.light .node[data-ui-type]:not([data-ui-type="interactive-editor"]) select:focus-visible,
body.light .node[data-ui-type]:not([data-ui-type="interactive-editor"]) input:focus-visible,
body.light .node[data-ui-type]:not([data-ui-type="interactive-editor"]) textarea:focus-visible,
body.light .node[data-ui-type]:not([data-ui-type="interactive-editor"]) button:focus-visible,
body.light .node[data-ui-type]:not([data-ui-type="interactive-editor"]) summary:focus-visible {
  box-shadow:0 0 0 2px rgba(93,78,73,.24);
}





/* Noodlz v1.1.39 - Dialog/button sizing fix
   Hidden dialogs were normalized before layout, so offsetWidth was 0 and the
   generic UI enhancer marked their buttons as square. Keep dialog actions readable. */
#save-modal button,
#export-modal button,
#docs-modal button,
#help-modal button,
#group-modal button,
#noodlz-dialog-modal button,
#img-lightbox-close {
  width:auto !important;
  min-width:max-content !important;
  height:auto !important;
  min-height:30px !important;
  padding:7px 13px !important;
  white-space:nowrap !important;
  line-height:1.15 !important;
  flex:0 0 auto !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

#save-modal .save-btn,
#export-modal .export-btn,
#noodlz-dialog-modal .noodlz-dialog-btn {
  min-width:96px !important;
  justify-content:center !important;
}

#save-modal .save-btn.primary,
#export-modal .export-btn.primary {
  min-width:118px !important;
}

#save-modal .save-actions,
#export-modal .export-actions,
#noodlz-dialog-modal .noodlz-dialog-actions {
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

#export-modal .export-actions {
  margin-top:10px !important;
  padding-top:8px !important;
}

#save-modal .save-close,
#export-modal .export-close,
#docs-modal .docs-close,
#help-modal .help-close,
#group-modal #gm-close,
#img-lightbox-close {
  min-width:74px !important;
  padding:6px 12px !important;
  font-size:11px !important;
  font-weight:700 !important;
}

#docs-modal .docs-close,
#help-modal .help-close,
#group-modal #gm-close,
#img-lightbox-close {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
}

#docs-modal .docs-close .kbd,
#help-modal .help-close .kbd,
#group-modal #gm-close .kbd,
#img-lightbox-close .kbd {
  font-size:9px !important;
  padding:1px 5px !important;
  line-height:1.2 !important;
  box-shadow:none !important;
  opacity:.75 !important;
}

@media (max-width:560px){
  #save-modal .save-actions,
  #export-modal .export-actions,
  #noodlz-dialog-modal .noodlz-dialog-actions {
    flex-direction:column-reverse !important;
    align-items:stretch !important;
  }
  #save-modal button,
  #export-modal button,
  #noodlz-dialog-modal button {
    width:100% !important;
  }
}



/* v1.1.70A Single Output Enforcement */
.export-output-source-summary {
  min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid rgba(255,255,255,.10); border-radius:9px;
  background:rgba(255,255,255,.045); color:var(--text);
  padding:8px 10px; font-size:12px;
}
.export-output-source-summary span {
  color:var(--text-dim); font-family:'JetBrains Mono', monospace;
  font-size:9px; letter-spacing:.05em; text-transform:uppercase;
}
body.light .export-output-source-summary { background:rgba(255,255,255,.56); border-color:rgba(129,117,110,.18); }



/* v1.1.71A Text 2.0 Stability + Legacy Text Removal */
.node.preview-node { min-width:260px; }
.node.preview-node::before {
  content:''; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background:linear-gradient(135deg, rgba(6,182,212,.22), transparent 38%);
  opacity:.08; z-index:0;
}
.node.preview-node > * { position:relative; z-index:1; }
.preview-node-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px 7px;
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.018);
}
.preview-node-title {
  font-size:9px; font-family:'JetBrains Mono', monospace; letter-spacing:.1em;
  color:rgba(103,232,249,.72); text-transform:uppercase;
}
.preview-node-pill {
  font-size:8px; font-family:'JetBrains Mono', monospace; letter-spacing:.08em;
  padding:2px 6px; border-radius:999px;
  border:1px solid rgba(103,232,249,.18); color:#67e8f9; background:rgba(6,182,212,.08);
}
.preview-node .node-preview-area { height:180px; }
.preview-node-canvas {
  width:100%; height:100%; object-fit:contain; display:block;
  position:relative; z-index:1;
}
.preview-node-note {
  padding:7px 12px 9px;
  font-size:9px; line-height:1.35; font-family:'JetBrains Mono', monospace;
  letter-spacing:.035em; color:var(--text-dim);
  border-top:1px solid rgba(255,255,255,.05);
}
.preview-node .preview-fit-strip { opacity:0; }
.preview-node .node-preview-area:hover .preview-fit-strip { opacity:1; }
body.light .preview-node-head { border-color:rgba(129,117,110,.12); background:rgba(255,255,255,.22); }
body.light .preview-node-note { border-top-color:rgba(129,117,110,.12); }
.preview-node-note .preview-context { display:block; margin-top:3px; color:rgba(103,232,249,.72); }
body.light .preview-node-note .preview-context { color:rgba(14,116,144,.78); }



/* v1.1.78 Presets Modal */
#preset-modal {
  position:fixed; inset:0; z-index:8070; display:none;
  align-items:center; justify-content:center;
  background:rgba(4,4,12,.78); backdrop-filter:blur(10px);
  overscroll-behavior:contain;
}
#preset-modal.open { display:flex; }
#preset-inner {
  width:min(640px,92vw); max-height:min(760px,88vh);
  background:#0d0d1e; border:1px solid rgba(255,255,255,.11);
  border-radius:18px; box-shadow:0 24px 80px rgba(0,0,0,.72);
  display:flex; flex-direction:column; overflow:hidden;
}
.preset-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.08);
}
.preset-heading { display:flex; flex-direction:column; gap:3px; min-width:0; }
.preset-eyebrow {
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.11em;
  color:var(--accent2); text-transform:uppercase;
}
.preset-title { font-size:18px; font-weight:700; color:var(--text); }
.preset-subtitle {
  font-family:'JetBrains Mono',monospace; font-size:10px; line-height:1.35;
  color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.preset-close {
  flex:0 0 auto; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; color:var(--text-dim); cursor:pointer; padding:6px 11px;
  font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.03em;
}
.preset-close:hover { background:rgba(239,68,68,.18); border-color:var(--danger); color:var(--danger); }
.preset-body { padding:16px 18px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
.preset-section { display:flex; flex-direction:column; gap:8px; }
.preset-section-title {
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(167,139,250,.86);
}
.preset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.preset-card {
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035);
  border-radius:12px; padding:10px 11px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  transition:background .14s,border-color .14s,transform .14s;
}
.preset-card:hover { background:rgba(124,58,237,.18); border-color:rgba(124,58,237,.4); transform:translateY(-1px); }
.preset-card-main { min-width:0; }
.preset-card-name { font-size:12px; font-weight:700; color:rgba(255,255,255,.88); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preset-card-note { margin-top:3px; font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preset-card-actions { display:flex; align-items:center; gap:5px; flex:0 0 auto; }
.preset-mini-btn {
  min-width:25px; height:25px; border-radius:7px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045); color:rgba(255,255,255,.72); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:10px;
  font-family:'JetBrains Mono',monospace; letter-spacing:.04em; padding:0 8px;
}
.preset-mini-btn.rename:hover { background:rgba(124,58,237,.22); border-color:rgba(124,58,237,.46); color:#ddd6fe; }
.preset-mini-btn.delete:hover { background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.42); color:#fca5a5; }
.preset-save-box {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px;
  padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:13px;
  background:rgba(255,255,255,.03);
}
.preset-input {
  min-width:0; height:34px; border-radius:9px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05); color:var(--text); outline:none;
  padding:0 10px; font-family:'Space Grotesk',sans-serif; font-size:12px;
}
.preset-input:focus { border-color:var(--accent1); box-shadow:0 0 0 1px rgba(124,58,237,.28); }
.preset-input.has-error { border-color:rgba(239,68,68,.72); box-shadow:0 0 0 1px rgba(239,68,68,.22); }
.preset-save-feedback {
  grid-column:1 / -1; min-height:15px; margin-top:-1px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; line-height:1.35;
  color:var(--text-dim);
}
.preset-save-feedback.success { color:#6ee7b7; }
.preset-save-feedback.error { color:#fca5a5; }
.preset-save-feedback.info { color:#67e8f9; }
.preset-btn {
  height:34px; border:none; border-radius:9px; padding:0 13px; cursor:pointer;
  background:rgba(124,58,237,.34); color:#fff; font-weight:700; font-size:12px;
  font-family:'Space Grotesk',sans-serif; border:1px solid rgba(124,58,237,.52);
}
.preset-btn:hover { background:rgba(124,58,237,.5); }
.preset-empty {
  border:1px dashed rgba(255,255,255,.11); border-radius:12px; padding:14px;
  color:var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:10px; line-height:1.45;
}
.preset-status {
  min-height:18px; color:var(--text-dim); font-family:'JetBrains Mono',monospace;
  font-size:10px; line-height:1.4;
}
body.light #preset-inner { background:rgba(218,214,206,.98); border-color:rgba(129,117,110,.2); box-shadow:0 24px 70px rgba(93,78,73,.18); }
body.light .preset-head { border-bottom-color:rgba(129,117,110,.14); }
body.light .preset-card { background:rgba(255,255,255,.34); border-color:rgba(129,117,110,.14); }
body.light .preset-card:hover { background:rgba(93,78,73,.09); border-color:rgba(93,78,73,.2); }
body.light .preset-card-name { color:var(--text); }
body.light .preset-save-box { background:rgba(255,255,255,.26); border-color:rgba(129,117,110,.14); }
body.light .preset-input { background:rgba(255,255,255,.68); border-color:rgba(129,117,110,.22); color:var(--text); }
body.light .preset-input.has-error { border-color:rgba(192,57,43,.6); box-shadow:0 0 0 1px rgba(192,57,43,.16); }
body.light .preset-save-feedback.success { color:#047857; }
body.light .preset-save-feedback.error { color:#b91c1c; }
body.light .preset-save-feedback.info { color:#0369a1; }
body.light .preset-close, body.light .preset-mini-btn { background:rgba(255,255,255,.44); border-color:rgba(129,117,110,.2); color:var(--text); }
@media (max-width:640px){ .preset-grid{ grid-template-columns:1fr; } .preset-save-box{ grid-template-columns:1fr; } .preset-btn{ width:100%; } }


/* v1.1.79 Graph Snippets Modal */
#snippet-modal {
  position:fixed; inset:0; z-index:8080; display:none;
  align-items:center; justify-content:center;
  background:rgba(4,4,12,.78); backdrop-filter:blur(10px);
  overscroll-behavior:contain;
}
#snippet-modal.open { display:flex; }
#snippet-inner {
  width:min(720px,92vw); max-height:min(780px,88vh);
  background:#0d0d1e; border:1px solid rgba(255,255,255,.11);
  border-radius:18px; box-shadow:0 24px 80px rgba(0,0,0,.72);
  display:flex; flex-direction:column; overflow:hidden;
}
.snippet-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.08);
}
.snippet-heading { display:flex; flex-direction:column; gap:3px; min-width:0; }
.snippet-eyebrow {
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.11em;
  color:var(--accent2); text-transform:uppercase;
}
.snippet-title { font-size:18px; font-weight:700; color:var(--text); }
.snippet-subtitle {
  font-family:'JetBrains Mono',monospace; font-size:10px; line-height:1.35;
  color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.snippet-close {
  flex:0 0 auto; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; color:var(--text-dim); cursor:pointer; padding:6px 11px;
  font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.03em;
}
.snippet-close:hover { background:rgba(239,68,68,.18); border-color:var(--danger); color:var(--danger); }
.snippet-body { padding:16px 18px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
.snippet-section { display:flex; flex-direction:column; gap:8px; }
.snippet-section-title {
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(167,139,250,.86);
}
.snippet-save-box {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px;
  padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:13px;
  background:rgba(255,255,255,.03);
}
.snippet-input {
  min-width:0; height:34px; border-radius:9px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05); color:var(--text); outline:none;
  padding:0 10px; font-family:'Space Grotesk',sans-serif; font-size:12px;
}
.snippet-input:focus { border-color:var(--accent1); box-shadow:0 0 0 1px rgba(124,58,237,.28); }
.snippet-input.has-error { border-color:rgba(239,68,68,.72); box-shadow:0 0 0 1px rgba(239,68,68,.22); }
.snippet-feedback {
  grid-column:1 / -1; min-height:15px; margin-top:-1px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; line-height:1.35;
  color:var(--text-dim);
}
.snippet-feedback.success { color:#6ee7b7; }
.snippet-feedback.error { color:#fca5a5; }
.snippet-feedback.info { color:#67e8f9; }
.snippet-btn {
  height:34px; border:none; border-radius:9px; padding:0 13px; cursor:pointer;
  background:rgba(124,58,237,.34); color:#fff; font-weight:700; font-size:12px;
  font-family:'Space Grotesk',sans-serif; border:1px solid rgba(124,58,237,.52);
}
.snippet-btn:hover { background:rgba(124,58,237,.5); }
.snippet-btn.secondary { background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.1); color:rgba(255,255,255,.78); }
.snippet-btn.secondary:hover { background:rgba(255,255,255,.11); color:#fff; }
.snippet-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.snippet-card {
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035);
  border-radius:12px; padding:10px 11px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  transition:background .14s,border-color .14s,transform .14s;
}
.snippet-card:hover { background:rgba(124,58,237,.12); border-color:rgba(124,58,237,.28); transform:translateY(-1px); }
.snippet-card-main { min-width:0; cursor:pointer; flex:1 1 auto; }
.snippet-card-name { font-size:12px; font-weight:700; color:rgba(255,255,255,.88); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.snippet-card-note { margin-top:3px; font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.snippet-card-actions { display:flex; align-items:center; gap:5px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
.snippet-mini-btn {
  min-width:25px; height:25px; border-radius:7px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045); color:rgba(255,255,255,.72); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:10px;
  font-family:'JetBrains Mono',monospace; letter-spacing:.04em; padding:0 8px;
}
.snippet-mini-btn.insert:hover { background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.36); color:#86efac; }
.snippet-mini-btn.rename:hover { background:rgba(124,58,237,.22); border-color:rgba(124,58,237,.46); color:#ddd6fe; }
.snippet-mini-btn.delete:hover { background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.42); color:#fca5a5; }
.snippet-empty {
  border:1px dashed rgba(255,255,255,.11); border-radius:12px; padding:14px;
  color:var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:10px; line-height:1.45;
}
.snippet-status { min-height:18px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:10px; line-height:1.4; }
body.light #snippet-inner { background:rgba(218,214,206,.98); border-color:rgba(129,117,110,.2); box-shadow:0 24px 70px rgba(93,78,73,.18); }
body.light .snippet-head { border-bottom-color:rgba(129,117,110,.14); }
body.light .snippet-card { background:rgba(255,255,255,.34); border-color:rgba(129,117,110,.14); }
body.light .snippet-card:hover { background:rgba(93,78,73,.09); border-color:rgba(93,78,73,.2); }
body.light .snippet-card-name { color:var(--text); }
body.light .snippet-save-box { background:rgba(255,255,255,.26); border-color:rgba(129,117,110,.14); }
body.light .snippet-input { background:rgba(255,255,255,.68); border-color:rgba(129,117,110,.22); color:var(--text); }
body.light .snippet-input.has-error { border-color:rgba(192,57,43,.6); box-shadow:0 0 0 1px rgba(192,57,43,.16); }
body.light .snippet-feedback.success { color:#047857; }
body.light .snippet-feedback.error { color:#b91c1c; }
body.light .snippet-feedback.info { color:#0369a1; }
body.light .snippet-close, body.light .snippet-mini-btn, body.light .snippet-btn.secondary { background:rgba(255,255,255,.44); border-color:rgba(129,117,110,.2); color:var(--text); }
@media (max-width:700px){ .snippet-grid{ grid-template-columns:1fr; } .snippet-save-box{ grid-template-columns:1fr; } .snippet-btn{ width:100%; } }



/* v1.1.79H Output Pin Hover Stability Fix
   A pinned Output should keep the normal Output interaction model.
   Earlier performance isolation made hover-only controls visible whenever
   the canvas entered performance/detail mode, so clicking/panning the canvas
   visually changed the Output panel. Keep the full pinned Output visible, but
   keep fit/export controls hidden until the preview itself is hovered/focused. */
body.performance-mode .node.output-node.pinned-viewport .preview-fit-strip,
body.node-detail-compact .node.output-node.pinned-viewport .preview-fit-strip,
body.node-detail-map .node.output-node.pinned-viewport .preview-fit-strip,
body.performance-mode .node.output-node.pinned-viewport .preview-save-btn,
body.node-detail-compact .node.output-node.pinned-viewport .preview-save-btn,
body.node-detail-map .node.output-node.pinned-viewport .preview-save-btn {
  display:flex !important;
  opacity:0 !important;
  pointer-events:none !important;
}
body.performance-mode .node.output-node.pinned-viewport .node-preview-area:hover .preview-fit-strip,
body.node-detail-compact .node.output-node.pinned-viewport .node-preview-area:hover .preview-fit-strip,
body.node-detail-map .node.output-node.pinned-viewport .node-preview-area:hover .preview-fit-strip,
body.performance-mode .node.output-node.pinned-viewport .node-preview-area:focus-within .preview-fit-strip,
body.node-detail-compact .node.output-node.pinned-viewport .node-preview-area:focus-within .preview-fit-strip,
body.node-detail-map .node.output-node.pinned-viewport .node-preview-area:focus-within .preview-fit-strip,
body.performance-mode .node.output-node.pinned-viewport .node-preview-area:hover .preview-save-btn,
body.node-detail-compact .node.output-node.pinned-viewport .node-preview-area:hover .preview-save-btn,
body.node-detail-map .node.output-node.pinned-viewport .node-preview-area:hover .preview-save-btn,
body.performance-mode .node.output-node.pinned-viewport .node-preview-area:focus-within .preview-save-btn,
body.node-detail-compact .node.output-node.pinned-viewport .node-preview-area:focus-within .preview-save-btn,
body.node-detail-map .node.output-node.pinned-viewport .node-preview-area:focus-within .preview-save-btn {
  opacity:1 !important;
  pointer-events:auto !important;
}
/* Keep the pinned Output layout stable when canvas focus changes detail classes. */
.node.output-node.pinned-viewport .output-preview-shell { display:block !important; }
.node.output-node.pinned-viewport .node-preview-area { display:block !important; }


/* v1.1.79I Output Pin Detail-State Stability Fix
   The pinned Output is a viewport HUD. It must use one stable layout in all
   canvas states. Earlier fixes only forced the stable layout during
   performance/compact/map modes. When the canvas returned to normal detail,
   the Output could fall back to the regular graph-node CSS and visually grow
   or shrink again. Apply the same pinned Output width/layout contract all the
   time, then keep hover-only controls hidden until the preview itself is
   hovered or focused. */
.node.output-node.pinned-viewport {
  background:rgba(15,15,30,0.55) !important;
  backdrop-filter:blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.4) !important;
  border-radius:18px !important;
  min-width:260px !important;
  min-height:0 !important;
  width:var(--viewport-pin-node-width, auto) !important;
  max-width:none !important;
  overflow:visible !important;
  transition:none !important;
  /* HUD is screen-fixed at 1:1 — never scaled by canvas zoom. This overrides the
     base .node.pinned-viewport transform:scale(var(--viewport-pin-scale)) so stale
     pin-scale values (e.g. from older save files) can never shrink or grow it. */
  transform:none !important;
  transform-origin:top left !important;
  will-change:left, top;
}
body.light .node.output-node.pinned-viewport {
  background:rgba(222,218,210,0.75) !important;
  box-shadow:0 12px 34px rgba(93,78,73,.14), inset 0 1px 0 rgba(245,242,238,.7) !important;
}
.node.output-node.pinned-viewport .node-header {
  min-height:0 !important;
  padding:10px 12px !important;
  gap:8px !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.node.output-node.pinned-viewport .node-label,
.node.output-node.pinned-viewport .node-dot,
.node.output-node.pinned-viewport .node-menu-btn,
.node.output-node.pinned-viewport .node-collapse-btn,
.node.output-node.pinned-viewport .node-pin-badge {
  display:flex !important;
}
.node.output-node.pinned-viewport .node-label {
  position:static !important;
  transform:none !important;
  width:auto !important;
  max-width:none !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  font-size:13px !important;
  color:var(--text) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.node.output-node.pinned-viewport .node-name-row,
.node.output-node.pinned-viewport .output-settings-fold,
.node.output-node.pinned-viewport .node-width-handle {
  display:flex !important;
}
.node.output-node.pinned-viewport .output-preview-shell,
.node.output-node.pinned-viewport .node-preview-area {
  display:block !important;
}
.node.output-node.pinned-viewport .node-preview-area {
  width:auto !important;
}
.node.output-node.pinned-viewport .output-settings:not(.collapsed) {
  display:flex !important;
}
.node.output-node.pinned-viewport .node-ports {
  display:flex !important;
  padding:8px 0 10px !important;
  gap:6px !important;
}
.node.output-node.pinned-viewport .port-row {
  display:flex !important;
  align-items:center !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 14px !important;
  gap:8px !important;
  font-size:11px !important;
}
.node.output-node.pinned-viewport .port-label-input,
.node.output-node.pinned-viewport .port-drag-handle {
  display:flex !important;
}
.node.output-node.pinned-viewport .port-label-input {
  width:92px !important;
  font-size:11px !important;
}
.node.output-node.pinned-viewport .port {
  width:12px !important;
  height:12px !important;
  border-width:2px !important;
}
.node.output-node.pinned-viewport .preview-fit-strip,
.node.output-node.pinned-viewport .preview-save-btn {
  display:flex !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.node.output-node.pinned-viewport .node-preview-area:hover .preview-fit-strip,
.node.output-node.pinned-viewport .node-preview-area:focus-within .preview-fit-strip,
.node.output-node.pinned-viewport .node-preview-area:hover .preview-save-btn,
.node.output-node.pinned-viewport .node-preview-area:focus-within .preview-save-btn {
  opacity:1 !important;
  pointer-events:auto !important;
}
.node-detail-compact .node.output-node.pinned-viewport,
.node-detail-map .node.output-node.pinned-viewport,
.performance-mode .node.output-node.pinned-viewport {
  width:var(--viewport-pin-node-width, auto) !important;
}


/* ── Auth UI ── */
.auth-modal-overlay {
  position:fixed; inset:0; z-index:99999;
  background:rgba(7,7,15,.85); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
}
.auth-card {
  background:var(--node-bg); border:1px solid var(--node-bd);
  border-radius:16px; padding:36px 32px; width:100%; max-width:380px;
  box-shadow:0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(124,58,237,.15);
  display:flex; flex-direction:column; gap:20px;
}
.auth-card-logo { display:flex; justify-content:center; margin-bottom:4px; }
.auth-card h2 {
  font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:600;
  color:var(--text); text-align:center; margin:0;
}
.auth-card-sub {
  font-size:12px; color:var(--text-dim); text-align:center; margin-top:-12px;
}
#auth-form {
  display:flex; flex-direction:column; gap:20px; margin:0;
}
.auth-field {
  display:flex; flex-direction:column; gap:6px;
}
.auth-field label {
  font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-dim);
}
.auth-field input {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:10px 12px; color:var(--text);
  font-family:'Space Grotesk',sans-serif; font-size:14px;
  outline:none; transition:border-color .15s;
  width:100%;
}
.auth-field input:focus { border-color:var(--accent1); }
.auth-btn {
  background:var(--accent1); border:none; border-radius:9px;
  padding:11px; color:#fff; font-family:'Space Grotesk',sans-serif;
  font-size:14px; font-weight:600; cursor:pointer; width:100%;
  transition:opacity .15s, transform .1s;
}
.auth-btn:hover { opacity:.88; }
.auth-btn:active { transform:scale(.98); }
.auth-btn:disabled { opacity:.4; cursor:not-allowed; }
.auth-error {
  font-size:12px; color:var(--danger); text-align:center;
  min-height:16px; display:none;
}
.auth-error.visible { display:block; }
.auth-success {
  font-size:12px; color:#22c55e; text-align:center;
  min-height:16px; display:none;
}
.auth-success.visible { display:block; }
.auth-link {
  font-size:12px; color:var(--text-dim); text-align:center;
  cursor:pointer; text-decoration:underline; background:none;
  border:none; padding:0; font-family:inherit;
}
.auth-link:hover { color:var(--text); }
.auth-divider {
  display:flex; align-items:center; gap:10px;
  color:var(--text-dim); font-size:11px;
}
.auth-divider::before, .auth-divider::after {
  content:''; flex:1; height:1px; background:rgba(255,255,255,.08);
}
/* User button in toolbar */
.tb-user-btn {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  background:none; border:1px solid rgba(255,255,255,.12);
  color:var(--text-dim); flex-shrink:0; margin-left:4px;
  transition:border-color .15s, color .15s;
}
.tb-user-btn:hover { border-color:var(--accent1); color:var(--text); }
.tb-user-avatar-initial {
  width:28px; height:28px; border-radius:50%;
  background:var(--accent1); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; font-family:'Space Grotesk',sans-serif;
  cursor:pointer; flex-shrink:0; border:none; margin-left:4px;
}
/* User dropdown */
.user-dropdown {
  position:fixed; top:54px; right:16px; z-index:9999;
  background:var(--node-bg); border:1px solid var(--node-bd);
  border-radius:10px; padding:8px; min-width:200px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  display:none; flex-direction:column; gap:4px;
}
.user-dropdown.open { display:flex; }
.user-dropdown-email {
  font-size:11px; color:var(--text-dim); padding:6px 8px;
  border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.user-dropdown-item {
  padding:8px 10px; border-radius:6px; font-size:13px;
  color:var(--text); cursor:pointer; display:flex; align-items:center; gap:8px;
  background:none; border:none; width:100%; text-align:left;
  font-family:'Space Grotesk',sans-serif; transition:background .12s;
}
.user-dropdown-item:hover { background:rgba(255,255,255,.06); }
.user-dropdown-item.danger { color:var(--danger); }
.user-dropdown-item.danger:hover { background:rgba(239,68,68,.08); }

/* ── Cloud Sync Indicator ── */
#cloud-sync-indicator {
  display:none; align-items:center; gap:6px;
  padding:0 10px 0 6px; border-right:1px solid rgba(255,255,255,.07);
  margin-right:2px; max-width:180px; overflow:hidden; cursor:default;
}
.cloud-sync-dot {
  width:6px; height:6px; border-radius:50%; flex-shrink:0; transition:background .3s;
}
.cloud-sync-dot.saved   { background:#22c55e; }
.cloud-sync-dot.saving  { background:var(--accent1); animation:csd-pulse 1s ease-in-out infinite; }
.cloud-sync-dot.unsaved { background:#f59e0b; }
.cloud-sync-dot.offline { background:#94a3b8; }
.cloud-sync-dot.error   { background:var(--danger); }
@keyframes csd-pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
.cloud-sync-text {
  font-size:10px; font-family:'JetBrains Mono',monospace; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Save dialog — active project banner */
.save-cloud-active {
  display:flex; align-items:center; gap:8px; padding:9px 11px;
  background:rgba(120,68,233,.1); border:1px solid rgba(120,68,233,.25);
  border-radius:8px;
}
.save-cloud-active-dot {
  width:7px; height:7px; border-radius:50%; background:#22c55e; flex-shrink:0;
}
.save-cloud-active-dot.saving { background:var(--accent1); animation:csd-pulse 1s ease-in-out infinite; }
.save-cloud-active-text { font-size:11px; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.save-cloud-active-label { font-size:10px; color:var(--accent1); font-family:'JetBrains Mono',monospace; letter-spacing:.05em; text-transform:uppercase; flex-shrink:0; }
.save-cloud-divider { height:1px; background:rgba(255,255,255,.06); }

/* ── Profile Settings Modal ── */
#profile-modal {
  position:fixed; inset:0; z-index:8060; display:none;
  background:rgba(4,4,12,.82); backdrop-filter:blur(10px);
  align-items:center; justify-content:center; overscroll-behavior:contain;
}
#profile-modal.open { display:flex; }
#profile-inner {
  width:min(480px,92vw);
  background:#0d0d1e; border:1px solid rgba(255,255,255,.1);
  border-radius:18px; padding:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.72);
  display:flex; flex-direction:column; gap:14px;
}
.profile-avatar-row {
  display:flex; align-items:center; gap:14px; padding:12px; border-radius:12px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.075);
}
.profile-avatar-large {
  width:48px; height:48px; border-radius:50%;
  background:var(--accent1); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; font-family:'Space Grotesk',sans-serif; flex-shrink:0;
}
.profile-avatar-info { flex:1; min-width:0; }
.profile-avatar-name { font-size:14px; font-weight:600; color:var(--text); }
.profile-avatar-email { font-size:11px; color:var(--text-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-section { display:flex; flex-direction:column; gap:8px; }
.profile-section-title {
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent2); opacity:.85;
}
.profile-field { display:flex; flex-direction:column; gap:5px; }
.profile-field-label {
  font-size:10px; font-family:'JetBrains Mono',monospace;
  color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase;
}
.profile-field-input {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:9px; padding:10px 12px; color:var(--text);
  font-family:'Space Grotesk',sans-serif; font-size:13px;
  outline:none; transition:border-color .15s;
}
.profile-field-input:focus { border-color:var(--accent1); box-shadow:0 0 0 1px rgba(124,58,237,.28); }
.profile-field-input[readonly] { opacity:.45; cursor:default; }
.profile-field-hint { font-size:10px; color:var(--text-dim); line-height:1.4; }
.profile-divider { height:1px; background:rgba(255,255,255,.06); margin:2px 0; }
.profile-danger-zone {
  background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.15);
  border-radius:12px; padding:12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.profile-danger-title { font-size:12px; font-weight:600; color:var(--danger); }
.profile-danger-desc { font-size:11px; color:var(--text-dim); margin-top:3px; line-height:1.4; }
.profile-status { min-height:16px; font-size:11px; font-family:'JetBrains Mono',monospace; color:var(--text-dim); }
.profile-status.ok  { color:#22c55e; }
.profile-status.err { color:var(--danger); }

/* ── Legal Modal ── */
.legal-overlay {
  position:fixed; inset:0; z-index:100000;
  background:rgba(7,7,15,.88); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.legal-overlay.open { display:flex; }
.legal-card {
  background:var(--node-bg); border:1px solid var(--node-bd);
  border-radius:16px; width:100%; max-width:560px; max-height:80vh;
  display:flex; flex-direction:column;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.legal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 0; flex-shrink:0;
}
.legal-tabs {
  display:flex; gap:4px;
}
.legal-tab {
  background:none; border:none; padding:8px 14px; border-radius:8px;
  font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:600;
  color:var(--text-dim); cursor:pointer; transition:background .12s, color .12s;
}
.legal-tab:hover { background:rgba(255,255,255,.06); color:var(--text); }
.legal-tab.active { background:rgba(120,68,233,.15); color:var(--accent1); }
.legal-close {
  width:28px; height:28px; border-radius:6px; border:none;
  background:none; color:var(--text-dim); cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s; flex-shrink:0; line-height:1;
}
.legal-close:hover { background:rgba(255,255,255,.06); color:var(--text); }
.legal-body {
  flex:1; overflow-y:auto; padding:20px 24px 24px;
}
.legal-body h3 {
  font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700;
  color:var(--text); margin:0 0 4px;
}
.legal-body .legal-date {
  font-size:11px; color:var(--text-dim); margin-bottom:20px; display:block;
}
.legal-body h4 {
  font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700;
  color:var(--text); margin:20px 0 6px;
}
.legal-body p, .legal-body li {
  font-size:12px; color:var(--text-dim); line-height:1.7; margin:0 0 8px;
}
.legal-body ul { padding-left:16px; margin:0 0 8px; }
.legal-body a { color:var(--accent1); text-decoration:none; }
.legal-body a:hover { text-decoration:underline; }
.legal-panel { display:none; }
.legal-panel.active { display:block; }
/* Legal links */
.legal-links {
  display:flex; justify-content:center; gap:16px; margin-top:8px;
}
.legal-link-btn {
  font-size:11px; color:var(--text-dim); background:none; border:none;
  cursor:pointer; font-family:'Space Grotesk',sans-serif; padding:0;
  text-decoration:underline; text-underline-offset:2px;
  transition:color .12s;
}
.legal-link-btn:hover { color:var(--text); }

/* ── Cloud Projects Panel ── */
.cloud-panel {
  position:fixed; top:0; right:0; bottom:0; z-index:9998;
  width:320px; max-width:100vw;
  background:var(--node-bg); border-left:1px solid var(--node-bd);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s cubic-bezier(.4,0,.2,1);
  box-shadow:-12px 0 40px rgba(0,0,0,.4);
}
.cloud-panel.open { transform:translateX(0); }
.cloud-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 12px; border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.cloud-panel-title {
  font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600;
  color:var(--text); display:flex; align-items:center; gap:8px;
}
.cloud-panel-close {
  width:28px; height:28px; border-radius:6px; border:none;
  background:none; color:var(--text-dim); cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s; line-height:1;
}
.cloud-panel-close:hover { background:rgba(255,255,255,.06); color:var(--text); }
.cloud-panel-body {
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:16px;
}
.cloud-save-section {
  display:flex; flex-direction:column; gap:8px;
  padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.06);
}
.cloud-save-row { display:flex; gap:8px; }
.cloud-save-input {
  flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:8px 10px; color:var(--text);
  font-family:'Space Grotesk',sans-serif; font-size:13px;
  outline:none; transition:border-color .15s;
}
.cloud-save-input:focus { border-color:var(--accent1); }
.cloud-save-btn {
  background:var(--accent1); border:none; border-radius:8px;
  padding:8px 14px; color:#fff; font-family:'Space Grotesk',sans-serif;
  font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:opacity .15s;
}
.cloud-save-btn:hover { opacity:.88; }
.cloud-save-btn:disabled { opacity:.4; cursor:not-allowed; }
.cloud-panel-status {
  font-size:12px; color:var(--text-dim); min-height:16px;
}
.cloud-panel-status.ok  { color:#22c55e; }
.cloud-panel-status.err { color:var(--danger); }
.cloud-projects-label {
  font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-dim);
}
.cloud-projects-list { display:flex; flex-direction:column; gap:6px; }
.cloud-project-item {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:9px; padding:10px 12px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
  transition:background .12s;
}
.cloud-project-item:hover { background:rgba(255,255,255,.07); }
.cloud-project-info { flex:1; min-width:0; }
.cloud-project-name {
  font-size:13px; font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cloud-project-date { font-size:11px; color:var(--text-dim); margin-top:2px; }
.cloud-project-actions { display:flex; gap:4px; flex-shrink:0; margin-top:1px; }
.cloud-proj-btn {
  background:none; border:1px solid rgba(255,255,255,.1); border-radius:6px;
  padding:4px 8px; font-size:11px; font-weight:600; color:var(--text-dim);
  cursor:pointer; font-family:'Space Grotesk',sans-serif;
  transition:background .12s, color .12s, border-color .12s;
}
.cloud-proj-btn:hover { background:rgba(255,255,255,.08); color:var(--text); }
.cloud-proj-btn.open-btn { color:var(--accent1); border-color:rgba(120,68,233,.35); }
.cloud-proj-btn.open-btn:hover { background:rgba(120,68,233,.12); border-color:var(--accent1); }
.cloud-proj-btn.del-btn { color:var(--danger); border-color:rgba(239,68,68,.25); }
.cloud-proj-btn.del-btn:hover { background:rgba(239,68,68,.1); border-color:var(--danger); }
.cloud-empty {
  text-align:center; padding:32px 16px; color:var(--text-dim);
  font-size:13px; line-height:1.6;
}
.cloud-loading {
  text-align:center; padding:24px; color:var(--text-dim); font-size:13px;
}