:root {
  --color-bg:#080a0d;
  --color-panel:#101318;
  --color-panel-2:#151920;
  --color-panel-3:#1b2028;
  --color-border:#2a3039;
  --color-border-soft:rgba(255,255,255,.075);
  --color-text:#e4e8ed;
  --color-muted:#89929f;
  --color-accent:#d8a43a;
  --color-accent-2:#f2c85d;
  --color-blue:#51a9d8;
  --color-red:#ef6875;
  --color-green:#54c99a;
}

.node-workspace {
  display:none;
  flex:1;
  min-height:0;
  overflow:hidden;
  color:var(--color-text);
  background:var(--color-bg);
  --gallery-width:215px;
  --grade-width:340px;
  font-size:11px;
}
body.node-workspace-open .node-workspace { display:flex;flex-direction:column; }
body.node-workspace-open .editor-body,
body.node-workspace-open .timeline-container { display:none!important; }
body.node-workspace-open #nodes-workspace-btn {
  color:#171108;
  border-color:var(--color-accent-2);
  background:linear-gradient(135deg,#e1ad3f,#f0d479);
}
.node-workspace button,.node-workspace input,.node-workspace select { font:inherit; }
.node-workspace button { color:inherit;cursor:pointer;user-select:none; }

.node-workspace-toolbar {
  height:38px;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 9px;
  border-bottom:1px solid var(--color-border);
  background:linear-gradient(#161a20,#0f1217);
}
.node-workspace-tabs,.node-scope-switch,.node-toolbar-actions,.node-viewer-modes,.node-mini-tabs {
  display:flex;align-items:center;gap:3px;
}
.node-toolbar-actions { margin-left:auto; }
.node-workspace-toolbar button,.node-panel-title button,.node-viewer-controls button,.node-graph-toolbar button,.node-strip-controls button {
  height:25px;min-width:25px;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:0 8px;border:1px solid var(--color-border);border-radius:3px;background:#1a1f26;color:#b9c0c9;
}
.node-workspace-toolbar button:hover,.node-panel-title button:hover,.node-viewer-controls button:hover,.node-graph-toolbar button:hover,.node-strip-controls button:hover {
  color:#fff;border-color:#59626f;background:#252b34;
}
.node-workspace svg { width:13px;height:13px; }
.node-top-btn.active,.node-scope-switch button.active,.node-viewer-modes button.active,.node-mini-tabs button.active {
  color:#fff;border-color:#786433;background:linear-gradient(#4c4128,#302a1d);
}
.node-close-workspace { color:#fff!important; }

.node-upper-grid {
  height:43%;
  min-height:250px;
  display:grid;
  grid-template-columns:var(--gallery-width) minmax(360px,1fr) var(--grade-width);
  gap:1px;
  background:var(--color-border);
}
.node-panel { position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--color-panel); }
.node-panel-title {
  height:29px;display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:0 8px;border-bottom:1px solid var(--color-border);background:linear-gradient(#1a1e25,#14181e);
  color:#d8dde4;font-size:10px;font-weight:800;letter-spacing:.025em;text-transform:uppercase;
}
.node-panel-title button { height:21px;min-width:21px;padding:0 4px;border:0;background:transparent; }
.node-search-row { display:flex;gap:4px;padding:6px;border-bottom:1px solid var(--color-border-soft);background:#11151a; }
.node-search-row input,.node-search-row select,.node-viewer-controls select,.node-strip-controls select {
  min-width:0;height:24px;border:1px solid var(--color-border);border-radius:3px;background:#0c0f13;color:#cbd1d8;padding:0 7px;outline:none;
}
.node-search-row input { flex:1; }
.node-search-row select { width:66px; }
.node-search-row input:focus { border-color:var(--color-accent);box-shadow:0 0 0 1px rgba(216,164,58,.22); }

/* Grade gallery */
.node-project-library {
  height:calc(100% - 67px);
  overflow:auto;
  padding:6px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  gap:6px;
}
.node-project-library.list { display:block; }
.node-project-card {
  position:relative;min-width:0;border:1px solid var(--color-border-soft);border-radius:3px;background:#14181e;overflow:hidden;cursor:pointer;
  transition:border-color .13s,transform .13s,background .13s;
}
.node-project-card:hover { border-color:#6c7480;background:#1b2027;transform:translateY(-1px); }
.node-project-card.selected { border-color:var(--color-accent);box-shadow:0 0 0 1px rgba(216,164,58,.28); }
.node-project-thumb { position:relative;height:48px;display:flex;align-items:center;justify-content:center;background:#090b0e;color:#727b87;overflow:hidden; }
.node-project-thumb img { width:100%;height:100%;object-fit:cover;display:block; }
.node-project-thumb svg { width:19px;height:19px; }
.node-project-info { min-width:0;padding:4px 5px 5px; }
.node-project-name { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dce1e7;font-size:9px;font-weight:700; }
.node-project-meta { margin-top:2px;color:#727c89;font-size:8px;text-transform:uppercase; }
.color-still-delete { position:absolute;right:3px;top:3px;z-index:3;width:17px;height:17px;padding:0;border:1px solid #ffffff26;border-radius:2px;background:#090b0dcc;color:#dce2e8;font-size:12px;line-height:1;opacity:0; }
.node-project-card:hover .color-still-delete { opacity:1; }

/* Viewer */
.node-viewer-panel { display:flex;flex-direction:column;background:#08090b; }
.node-viewer-modes button { height:20px;min-width:22px;padding:0 6px;border:0;background:transparent;color:#8f98a4;font-size:9px; }
.node-viewer-mount { position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#050608; }
.node-viewer-mount.checker { background-color:#181818;background-image:linear-gradient(45deg,#282828 25%,transparent 25%),linear-gradient(-45deg,#282828 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#282828 75%),linear-gradient(-45deg,transparent 75%,#282828 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0; }
.node-viewer-mount.black { background:#000; }.node-viewer-mount.gray { background:#777; }.node-viewer-mount.white { background:#fff; }
.node-viewer-mount #program-monitor-wrapper { width:100%!important;height:100%!important;max-width:none!important;min-height:0!important;display:flex!important;align-items:center;justify-content:center;background:transparent!important; }
.node-viewer-mount #player-container { max-width:100%;max-height:100%; }
.node-empty-selection { position:absolute;inset:0;z-index:8;display:grid;place-items:center;text-align:center;padding:30px;color:#8d96a2;background:radial-gradient(circle at center,#151a20,#080a0d 70%);font-size:12px; }
.node-viewer-controls {
  height:31px;min-height:31px;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 7px;border-top:1px solid var(--color-border);background:#111419;
}
.node-viewer-controls button { height:22px;min-width:22px;padding:0 5px;border:0;background:transparent; }
.node-viewer-controls .node-play-button { width:29px;color:#111;background:#d8dde4;border-radius:50%; }
.node-viewer-controls span { margin:0 7px;color:#c2c8d0;font:9px ui-monospace,SFMono-Regular,monospace; }
.node-viewer-controls select { margin-left:auto;width:72px;height:21px;font-size:9px; }

/* Compact grade graph */
.node-tools-panel { display:flex;flex-direction:column;background:#0d1014; }
.node-graph-toolbar {
  height:29px;min-height:29px;display:flex;align-items:center;gap:4px;padding:0 6px;border-bottom:1px solid var(--color-border);background:#171b21;
}
.node-graph-toolbar span { margin-right:auto;color:#d7dce3;font-size:9px;font-weight:800;text-transform:uppercase; }
.node-graph-toolbar button { height:21px;min-width:21px;padding:0 4px;border:0;background:transparent; }
.node-graph-viewport {
  position:relative;flex:1;min-height:110px;overflow:hidden;outline:none;
  background-color:#0b0e12;background-image:radial-gradient(circle,rgba(150,160,172,.23) 1px,transparent 1px);background-size:18px 18px;
}
.node-graph-viewport.panning { cursor:grabbing; }
.node-graph-world { position:absolute;left:0;top:0;width:4000px;height:2600px;transform-origin:0 0; }
.node-connections { position:absolute;inset:0;overflow:visible;pointer-events:none; }
.node-connection { fill:none;stroke:#7394a9;stroke-width:3;opacity:.78;pointer-events:stroke;cursor:pointer; }
.node-connection.mask { stroke:#e1a544;stroke-dasharray:7 5; }.node-connection.audio { stroke:#4fc593; }.node-connection.data { stroke:#8876c9; }
.node-connection:hover,.node-connection.selected { stroke:#fff;stroke-width:5;opacity:1;filter:drop-shadow(0 0 4px #fff7); }
.node-connection.connecting { stroke-dasharray:8 6;pointer-events:none;animation:color-flow .65s linear infinite; }
@keyframes color-flow { to { stroke-dashoffset:-28; } }
.node-selection-marquee { position:absolute;border:1px solid var(--color-accent);background:rgba(216,164,58,.1);z-index:25;pointer-events:none; }
.node-graph-node {
  position:absolute;width:118px;min-height:66px;border:1px solid #303843;border-top:3px solid var(--node-color);border-radius:4px;background:#1b2027;color:#dce2e8;box-shadow:0 6px 16px #0008;user-select:none;
}
.node-graph-node.selected { border-color:var(--color-accent);box-shadow:0 0 0 1px rgba(216,164,58,.45),0 7px 20px #000b;z-index:10; }
.node-graph-node.viewer-assigned { outline:1px solid var(--color-accent-2);outline-offset:2px; }
.node-graph-node.viewer-assigned::after { content:"VIEW";position:absolute;right:5px;bottom:3px;color:var(--color-accent-2);font-size:7px;font-weight:900; }
.node-graph-node.disabled { opacity:.42;filter:grayscale(.85); }.node-graph-node.error { border-color:var(--color-red); }
.node-header { height:24px;display:flex;align-items:center;gap:4px;padding:0 5px;background:#242a33;border-bottom:1px solid #303741;cursor:grab; }
.node-header strong { min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px; }
.node-header button { width:17px;height:17px;padding:0;border:0;background:transparent;color:#8994a1;display:grid;place-items:center;cursor:pointer; }
.node-header button svg,.node-header>svg { width:10px;height:10px; }
.node-body { padding:6px; }.node-summary { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aab3be;font-size:7px; }
.node-status-row { display:flex;align-items:center;gap:4px;margin-top:5px;color:#747f8c;font-size:7px; }
.node-status-dot { width:5px;height:5px;border-radius:50%; }
.node-port { position:absolute;top:34px;width:10px;height:10px;border:2px solid #07090b;border-radius:50%;background:#7ba3bb;z-index:12;cursor:crosshair; }
.node-port.input { left:-6px; }.node-port.output { right:-6px; }
.node-group-box { position:absolute;border:1px solid var(--group-color);border-radius:7px;background:color-mix(in srgb,var(--group-color) 7%,transparent);pointer-events:none; }
.node-group-label { position:absolute;left:7px;top:-19px;color:var(--group-color);font-size:8px;font-weight:800; }
.node-graph-empty { position:absolute;inset:0;z-index:5;display:none;place-items:center;text-align:center;padding:25px;color:#77818d;background:#0b0e12; }
.node-minimap { display:none; }

.color-effects-drawer { min-height:26px;max-height:40%;border-top:1px solid var(--color-border);background:#11151a; }
.color-effects-drawer summary { height:26px;display:flex;align-items:center;gap:6px;padding:0 8px;color:#aeb6c0;font-size:9px;font-weight:800;cursor:pointer;list-style:none; }
.color-effects-drawer summary::-webkit-details-marker { display:none; }
.color-effects-drawer[open] { overflow:auto; }
.node-tool-categories { display:flex;gap:3px;overflow-x:auto;padding:4px 6px;scrollbar-width:none; }
.node-category-chip { flex:none;padding:3px 6px;border:1px solid var(--color-border);border-radius:9px;background:#171c22;color:#8e98a4;font-size:7px; }
.node-category-chip.active { color:#fff;border-color:#866f38;background:#3b321f; }
.node-tool-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:5px; }
.node-tool-card { min-height:29px;display:flex;align-items:center;gap:5px;padding:4px 6px;border:1px solid var(--color-border-soft);border-left:3px solid var(--tool-color);border-radius:3px;background:#171b21;cursor:grab; }
.node-tool-card:hover { border-color:#68717d;background:#20262e; }
.node-tool-icon { display:grid;place-items:center;color:var(--tool-color); }.node-tool-name { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px; }

/* Horizontal clip filmstrip */
.node-clip-strip-wrap {
  height:82px;min-height:82px;display:flex;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);background:#111419;
}
.node-strip-controls { width:112px;min-width:112px;display:flex;flex-wrap:wrap;align-content:center;gap:4px;padding:7px;border-right:1px solid var(--color-border); }
.node-strip-controls strong { width:100%;color:#d6dbe2;font-size:9px;text-transform:uppercase; }
.node-strip-controls select { width:70px;height:21px;font-size:8px; }
.node-strip-controls button { height:21px;min-width:21px;padding:0;border:0;background:transparent; }
.node-clip-strip { flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;padding:6px; }
.node-clip-card {
  position:relative;width:112px;min-width:112px;height:68px;display:grid;grid-template-columns:58px 1fr;gap:5px;padding:4px;border:1px solid #303741;border-radius:3px;background:#181d23;cursor:pointer;
}
.node-clip-card:hover { border-color:#68717c; }.node-clip-card.selected { border:2px solid var(--color-accent);padding:3px; }
.node-clip-mini { height:58px;background:#090b0e;overflow:hidden;display:grid;place-items:center;color:#67717e; }
.node-clip-mini img { width:100%;height:100%;object-fit:cover; }
.node-clip-card strong { display:block;max-height:29px;overflow:hidden;color:#d7dce3;font-size:8px;line-height:1.25; }
.node-clip-card small { display:block;margin-top:3px;color:#75808d;font:7px ui-monospace,monospace; }
.node-badges { display:flex;gap:3px;margin-top:4px; }.node-badge { width:5px;height:5px;border-radius:50%;background:var(--color-accent); }

/* Grading palettes and scopes */
.node-lower-grid {
  flex:1;min-height:250px;display:grid;grid-template-columns:minmax(520px,1fr) minmax(280px,34%);gap:1px;background:var(--color-border);
}
.color-palette-panel { display:flex;flex-direction:column; }
.color-palette-tabs { height:31px;min-height:31px;display:flex;align-items:end;gap:1px;padding:0 6px;border-bottom:1px solid var(--color-border);background:#15191f; }
.color-palette-tabs button {
  height:27px;display:flex;align-items:center;gap:5px;padding:0 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:#89939f;font-size:9px;font-weight:800;
}
.color-palette-tabs button.active { color:#fff;border-bottom-color:var(--color-accent);background:#1b2027; }
.color-palette-pane { display:none;flex:1;min-height:0;overflow:auto; }.color-palette-pane.active { display:block; }
.color-primary-controls { display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;padding:7px;border-bottom:1px solid var(--color-border-soft);background:#11151a; }
.color-primary-control { min-width:0;display:grid;grid-template-columns:1fr auto;gap:3px;align-items:center; }
.color-primary-control label { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8f99a5;font-size:8px; }
.color-primary-control output { color:#d6dce3;font:8px ui-monospace,monospace; }
.color-primary-control input { grid-column:1/-1;width:100%;height:13px;accent-color:var(--color-accent); }
.color-wheel-grid { height:calc(100% - 51px);min-height:155px;display:grid;grid-template-columns:repeat(4,minmax(115px,1fr));gap:1px;background:var(--color-border-soft); }
.color-wheel-cell { min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;background:#101318; }
.color-wheel-cell .wheel { width:100%;display:flex;flex-direction:column;align-items:center; }
.color-wheel-cell .wheel-head { width:100%;height:18px;display:flex;align-items:center;justify-content:center;gap:5px;color:#b9c1ca;font-size:8px;font-weight:800;text-transform:uppercase; }
.color-wheel-cell .wheel-reset { width:15px;height:15px;padding:0;border:0;background:transparent;color:#76818e; }
.color-wheel-cell .wheel-disc { position:relative;width:min(92px,8vw);height:min(92px,8vw);min-width:68px;min-height:68px;border-radius:50%;touch-action:none; }
.color-wheel-cell .wheel-disc canvas { width:100%;height:100%;display:block;border-radius:50%; }
.color-wheel-cell .wheel-puck { position:absolute;width:8px;height:8px;border:1px solid #fff;border-radius:50%;background:#1118;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #000;pointer-events:none; }
.color-wheel-luma { width:90%;margin-top:5px;display:grid;grid-template-columns:1fr 37px;align-items:center;gap:5px; }
.color-wheel-luma input[type=range] { width:100%;height:12px;accent-color:#b5bcc5; }
.color-wheel-luma input[type=number] { width:37px;height:19px;padding:0 3px;border:1px solid var(--color-border);border-radius:2px;background:#0b0e12;color:#cfd5dc;font:8px ui-monospace,monospace; }

.color-curve-wrap { height:100%;display:grid;grid-template-columns:minmax(300px,1fr) 170px;gap:1px;background:var(--color-border); }
#color-curves-canvas { width:100%;height:100%;min-height:180px;background:#0b0e12;touch-action:none; }
.color-curve-controls { padding:8px;background:#111419;overflow:auto; }
.color-curve-control { display:grid;grid-template-columns:1fr 40px;gap:5px;align-items:center;margin-bottom:8px; }
.color-curve-control label { color:#a2abb6;font-size:8px; }.color-curve-control output { color:#e0e5ea;text-align:right;font:8px ui-monospace,monospace; }
.color-curve-control input { grid-column:1/-1;width:100%;accent-color:var(--color-accent); }

.node-quick-controls,.node-properties-content { padding:8px;overflow:auto; }
.node-property-section { margin-bottom:8px;border:1px solid var(--color-border-soft);border-radius:3px;background:#12161c; }
.node-property-section-title { padding:5px 7px;border-bottom:1px solid var(--color-border-soft);color:#d7dce3;font-size:8px;font-weight:800;text-transform:uppercase; }
.node-property-row,.node-quick-row { display:grid;grid-template-columns:70px minmax(0,1fr) 52px 21px;align-items:center;gap:5px;padding:4px 6px; }
.node-property-row.full { grid-template-columns:80px minmax(0,1fr); }
.node-property-row label,.node-quick-row label { color:#929ca8;font-size:8px; }
.node-property-row input,.node-property-row select,.node-quick-row input { min-width:0;height:21px;border:1px solid var(--color-border);border-radius:2px;background:#0c0f13;color:#d0d6dd;padding:0 4px;font-size:8px; }
.node-property-row input[type=range],.node-quick-row input[type=range] { padding:0;border:0;background:transparent;accent-color:var(--color-accent); }
.node-keyframe-btn { width:20px;height:20px;padding:0;border:1px solid var(--color-border);background:#1b2027;color:#707b87; }.node-keyframe-btn.active { color:var(--color-accent); }
.node-property-actions { display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px; }
.node-property-actions button { min-height:23px;border:1px solid var(--color-border);border-radius:2px;background:#1a1f26;color:#aeb7c1;font-size:7px; }
.node-property-empty,.node-quick-empty { display:grid;place-items:center;min-height:70px;padding:15px;text-align:center;color:#78828e;font-size:9px; }

.color-scopes-panel { display:flex;flex-direction:column;background:#080a0d; }
.color-scopes-panel .node-panel-title { flex:none; }
.color-scopes-panel .node-mini-tabs button { height:20px;min-width:0;padding:0 5px;border:0;background:transparent;color:#77828f;font-size:7px; }
.color-scopes-panel .node-mini-tabs button.active { color:#fff;background:#343027; }
.node-scope-box { flex:1;min-height:0;padding:5px;background:#050608; }
#node-scope-canvas { width:100%;height:100%;display:block;background:#050608; }

.node-context-menu { position:fixed;z-index:10000;width:184px;padding:5px;border:1px solid #414955;border-radius:4px;background:#1a1f26;box-shadow:0 14px 36px #000c; }
.node-context-menu[hidden] { display:none; }.node-context-menu button { width:100%;height:27px;display:flex;align-items:center;gap:7px;padding:0 8px;border:0;border-radius:2px;background:transparent;color:#c8ced6;text-align:left;font-size:9px; }
.node-context-menu button:hover { background:#303741;color:#fff; }.node-context-menu hr { border:0;border-top:1px solid var(--color-border);margin:4px 0; }

@media (max-width:1200px) {
  .node-workspace { --gallery-width:180px;--grade-width:300px; }
  .node-upper-grid { min-height:230px; }
  .color-primary-controls { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .color-wheel-cell .wheel-disc { width:72px;height:72px; }
}
@media (max-width:900px) {
  .node-workspace { --gallery-width:150px;--grade-width:260px; }
  .node-upper-grid { grid-template-columns:var(--gallery-width) minmax(300px,1fr) var(--grade-width); }
  .node-lower-grid { grid-template-columns:minmax(470px,1fr) 250px; }
  .node-project-library { grid-template-columns:1fr; }
  .color-wheel-grid { grid-template-columns:repeat(4,minmax(95px,1fr)); }
}