/* Canvas Studio — node workspace inside studio shell */
body.canvas-layout{
  --canvas-accent-orange:var(--c-primary,#1b64da);
  --canvas-accent-orange-bright:#6eabff;
  --canvas-accent-orange-soft:#b9d4ff;
  --canvas-accent-orange-bg:rgba(61,139,255,.16);
  --canvas-accent-orange-border:rgba(61,139,255,.68);
}
body.canvas-layout .app.canvas-app{
  grid-template:52px minmax(0,1fr)/168px minmax(0,1fr);
  min-height:100dvh;
  height:100dvh;
  max-height:100dvh;
}
.canvas-panel{
  grid-column:2;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:var(--d-bg,#0b101b);
  overflow:hidden;
}
.canvas-subhead{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 18px;
  border-bottom:1px solid var(--d-surface-2,#1d2230);
  background:var(--d-bg,#0b101b);
  z-index:4;
}
#projectTitle{
  background:none;
  border:0;
  color:#fff;
  width:min(240px,32vw);
  font-weight:800;
  font-size:15px;
  outline:0;
}
#projectTitle:focus-visible{
  outline:2px solid #9180ff;
  border-radius:6px;
}
.canvas-badge{
  font-size:11px;
  letter-spacing:.08em;
  color:#a9a0db;
  background:var(--c-navy,#172140);
  border:1px solid #443958;
  border-radius:6px;
  padding:6px 9px;
  font-weight:800;
  white-space:nowrap;
}
.canvas-subhead-spacer{flex:1}
.canvas-save-state{font-size:11px;color:var(--d-text-3,#8492ad);white-space:nowrap;max-width:min(220px,18vw);min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.canvas-subhead .canvas-btn,.canvas-subhead .canvas-top-action{flex:0 0 auto}
.canvas-ai-credit-hint{display:inline-block;margin-left:8px;color:var(--d-text-3,#8492ad);font-size:11px}
.canvas-btn{
  border:1px solid var(--d-border,#2c3446);
  background:var(--c-text,#191f28);
  color:var(--c-bg-subtle,#eef1f4);
  border-radius:10px;
  padding:9px 13px;
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.canvas-btn:hover{background:var(--d-border,#2c3446)}
.canvas-btn.primary{background:var(--canvas-accent-orange);border-color:var(--canvas-accent-orange);color:#fff}
.canvas-btn.primary:hover{background:var(--canvas-accent-orange-bright);border-color:var(--canvas-accent-orange-bright)}
.canvas-load-work{
  border-color:var(--canvas-accent-orange-border);
  color:var(--canvas-accent-orange-soft);
}
.canvas-load-work:hover{background:var(--canvas-accent-orange-bg)}
.canvas-btn:focus-visible{outline:2px solid #9180ff}
.canvas-primary{background:#7862ed;border-color:#7862ed;color:#fff}
.canvas-primary:hover{background:#8a76f2}
#view{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background-color:var(--d-bg,#0b101b);
  background-image:radial-gradient(var(--d-border,#2c3446) 1px,transparent 1px);
  background-size:22px 22px;
  touch-action:none;
}
#world{
  position:absolute;
  transform-origin:0 0;
  width:1px;
  height:1px;
}
#wires{
  position:absolute;
  overflow:visible;
  width:1px;
  height:1px;
  pointer-events:none;
}
.wire{
  fill:none;
  stroke:#8476d8;
  stroke-width:2.5;
  pointer-events:stroke;
  cursor:pointer;
}
.wire:hover{stroke:#ff8899;stroke-width:5}
.node{
  position:absolute;
  width:310px;
  border-radius:16px;
  border:1px solid var(--d-border,#2c3446);
  background:var(--c-text,#191f28);
  box-shadow:0 18px 50px #0005;
}
.node.selected{
  border-color:var(--c-primary,#1b64da);
  box-shadow:0 0 0 1px var(--c-primary,#1b64da),0 20px 55px #0005;
}
.node-head{
  padding:14px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid var(--d-border,#2c3446);
  cursor:grab;
  user-select:none;
}
.node-head b{
  font-size:13px;
  flex:1;
  color:var(--canvas-accent-orange);
  font-weight:800;
  letter-spacing:.01em;
  text-shadow:0 0 16px rgba(61,139,255,.28);
}
.node-save{
  border:1px solid #2a456e;
  background:var(--c-navy,#172140);
  color:var(--c-primary-tint,#dbe4ff);
  border-radius:7px;
  padding:4px 8px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.node-save:hover{background:#2c4a78;color:#fff}
.output-stack{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.output-item{border:1px solid var(--d-border,#2c3446);border-radius:10px;overflow:hidden;background:var(--d-bg,#0b101b)}
.output-label{font-size:10px;font-weight:800;color:#8eb4e8;padding:6px 10px;border-bottom:1px solid var(--d-surface-2,#1d2230);background:var(--c-text,#191f28);display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.output-label-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.output-actions{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.output-generate{
  border:1px solid var(--canvas-accent-orange-border);
  background:var(--canvas-accent-orange-bg);
  color:var(--canvas-accent-orange-bright);
  border-radius:999px;
  padding:3px 8px;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  text-shadow:0 0 10px rgba(61,139,255,.22);
}
.output-generate:hover{
  background:rgba(61,139,255,.24);
  color:var(--canvas-accent-orange-soft);
  border-color:var(--canvas-accent-orange);
}
.output-generate:disabled{opacity:.55;cursor:not-allowed}
.node-head-actions{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.node-head-actions .output-generate{padding:4px 10px;font-size:11px}
.output-delete{
  border:0;
  background:#2a2038;
  color:#ff98aa;
  width:22px;
  height:22px;
  border-radius:999px;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
}
.output-delete:hover{background:#4a2840;color:#fff}
.output-broken-hint{display:block;font-size:10px;color:var(--d-text-3,#8492ad);padding:18px 8px;text-align:center}
.media img.is-broken{display:none}
.output-item .media{height:150px;border-radius:0}
.output-item .media.video{height:230px}
.image-cut-stack{display:flex;flex-direction:column;gap:8px}
.image-cut-item .media{height:128px}
.image-cut-add{
  width:100%;
  margin-top:2px;
  border-style:dashed;
  font-size:11px;
}
.image-prompt-box{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.image-prompt-label{font-size:11px;font-weight:800;color:#8eb8ff;letter-spacing:.04em}
.image-prompt-text{
  width:100%;
  min-height:48px;
  resize:vertical;
  border:1px solid var(--d-border,#2c3446);
  border-radius:9px;
  padding:10px 12px;
  background:var(--d-bg,#0b101b);
  color:var(--c-border-strong,#dbe2ea);
  font-size:12px;
  line-height:1.6;
  font:inherit;
}
.image-prompt-text:focus{border-color:var(--c-primary,#1b64da);outline:0}
.revise-box{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--d-border,#2c3446);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.revise-label{font-size:11px;font-weight:800;color:#8eb8ff;letter-spacing:.04em}
.revise-text{
  width:100%;
  min-height:48px;
  resize:vertical;
  border:1px solid var(--d-border,#2c3446);
  border-radius:9px;
  padding:10px 12px;
  background:var(--d-bg,#0b101b);
  color:var(--c-border-strong,#dbe2ea);
  font-size:12px;
  line-height:1.6;
  font:inherit;
}
.revise-text:focus{border-color:var(--c-primary,#1b64da);outline:0}
.type-icon{color:#8eb8ff}
.node-close{
  border:1px solid var(--canvas-accent-orange-border);
  background:var(--canvas-accent-orange-bg);
  color:var(--canvas-accent-orange-bright);
  border-radius:7px;
  padding:3px 8px;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  font:inherit;
  white-space:nowrap;
}
.node-close:hover{
  background:rgba(61,139,255,.24);
  color:var(--canvas-accent-orange-soft);
  border-color:var(--canvas-accent-orange);
}
.remove{
  border:0;
  background:none;
  padding:0 5px;
  color:var(--d-text-3,#8492ad);
  cursor:pointer;
}
.node.collapsed{
  width:220px;
}
.node.collapsed .port,
.node.collapsed .node-save{
  display:none;
}
.node-collapsed-hint{
  margin:0;
  font-size:11px;
  line-height:1.55;
  color:var(--d-text-3,#8492ad);
  text-align:center;
}
.node-body{padding:14px}
.node textarea{
  width:100%;
  min-height:126px;
  height:180px;
  resize:vertical;
  border:1px solid var(--d-border,#2c3446);
  border-radius:9px;
  padding:12px;
  background:var(--d-bg,#0b101b);
  color:var(--c-border-strong,#dbe2ea);
  font-size:13px;
  line-height:1.7;
  font:inherit;
}
.node-grow-handle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:8px;
  padding:6px 0 2px;
  border:0;
  border-radius:0 0 10px 10px;
  background:transparent;
  color:var(--d-text-3,#8492ad);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  cursor:ns-resize;
  touch-action:none;
}
.node-grow-handle::before{
  content:"";
  display:block;
  width:42px;
  height:4px;
  border-radius:999px;
  background:var(--c-text-2,#4e5968);
}
.node-grow-handle:hover{color:#8eb8ff}
.node-grow-handle:hover::before{background:var(--c-primary,#1b64da)}
.prompt-storyboard-box{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--d-border,#2c3446);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.prompt-storyboard-title{
  font-size:11px;
  font-weight:800;
  color:var(--canvas-accent-orange);
  letter-spacing:.04em;
  text-shadow:0 0 12px rgba(61,139,255,.22);
}
.prompt-storyboard-hint{margin:0;font-size:11px;line-height:1.55;color:var(--d-text-3,#8492ad)}
.video-model-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 92px;
  gap:8px;
  margin-bottom:10px;
}
.image-model-row{margin-bottom:10px}
.video-model-row select,.image-model-row select,.upscale-model-row select{width:100%;box-sizing:border-box}
.upscale-model-row{display:block;width:100%;margin-bottom:10px}
.video-opt-duration label{font-size:10px;font-weight:800;color:#8eb4e8;display:block;margin-bottom:4px}
.video-opt-duration select{
  width:100%;
  border:1px solid var(--d-border,#2c3446);
  border-radius:9px;
  padding:8px 10px;
  background:var(--d-bg,#0b101b);
  color:var(--c-border-strong,#dbe2ea);
  font:inherit;
  font-size:11px;
}
.video-duration-hint{
  display:block;
  margin-top:4px;
  color:var(--d-text-3,#8492ad);
  font-size:10px;
  line-height:1.35;
}
.prompt-opts-row{
  display:grid;
  grid-template-columns:1fr 92px;
  gap:8px;
  margin-top:10px;
}
.prompt-opt{display:flex;flex-direction:column;gap:4px;min-width:0}
.prompt-opt label{font-size:10px;font-weight:800;color:#8eb4e8;letter-spacing:.04em}
.prompt-opt select{
  width:100%;
  border:1px solid var(--d-border,#2c3446);
  border-radius:9px;
  padding:8px 10px;
  background:var(--d-bg,#0b101b);
  color:var(--c-border-strong,#dbe2ea);
  font:inherit;
  font-size:11px;
}
.story-node-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.story-node-head{
  font-size:12px;
  font-weight:800;
  color:var(--canvas-accent-orange);
  text-shadow:0 0 12px rgba(61,139,255,.22);
}
.story-node-cut-list{display:flex;flex-direction:column;gap:5px;margin:8px 0 0;padding:0;list-style:none}
.story-node-cut{padding:6px 8px;border:1px solid var(--d-border,#2c3446);border-radius:8px;background:var(--d-bg,#0b101b);color:var(--c-gray-300,#c5cbe0);font-size:10px;line-height:1.45;text-align:left}
.story-node-cut strong{color:var(--canvas-accent-orange);margin-right:5px}
.story-node-hint{
  margin:0;
  font-size:11px;
  line-height:1.55;
  color:var(--d-text-3,#8492ad);
  max-height:72px;
  overflow:hidden;
}
.story-node-preview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
.story-node-preview img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--d-border,#2c3446);
  background:var(--d-bg,#0b101b);
}
.story-sheet-opts{margin-top:0}
.story-sheet-count-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.story-sheet-count-label{
  font-size:10px;
  font-weight:800;
  color:#8eb4e8;
  letter-spacing:.04em;
  margin-right:2px;
}
.story-sheet-count-btn{
  min-width:34px;
  padding:6px 10px;
  border:1px solid var(--d-border,#2c3446);
  border-radius:8px;
  background:var(--c-text,#191f28);
  color:var(--c-border-strong,#dbe2ea);
  font:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.story-sheet-count-btn:hover{background:var(--d-border,#2c3446)}
.story-sheet-count-btn.active{
  background:var(--c-primary,#1b64da);
  border-color:var(--c-primary,#1b64da);
  color:#fff;
}
.story-sheet-custom-wrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  font-weight:800;
  color:#8eb4e8;
  margin-left:2px;
}
.story-sheet-custom-wrap.active .story-sheet-custom{
  border-color:var(--c-primary,#1b64da);
  box-shadow:0 0 0 1px #3d8bff44;
}
.story-sheet-custom{
  width:52px;
  border:1px solid var(--d-border,#2c3446);
  border-radius:8px;
  padding:6px 8px;
  background:var(--d-bg,#0b101b);
  color:var(--c-border-strong,#dbe2ea);
  font:inherit;
  font-size:11px;
}
.story-node-sheet-preview img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  border-radius:10px;
  border:1px solid var(--d-border,#2c3446);
  background:var(--d-bg,#0b101b);
  cursor:zoom-in;
}
.story-node-sheet-caption{
  margin:0;
  font-size:11px;
  color:var(--d-text-3,#8492ad);
  text-align:center;
}
.story-node-output-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.character-node-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.character-node-head{
  font-size:12px;
  font-weight:800;
  color:var(--canvas-accent-orange);
  text-shadow:0 0 12px rgba(61,139,255,.22);
}
.character-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:10px;
  font-weight:800;
  color:#8eb4e8;
  letter-spacing:.04em;
}
.character-field-input{
  width:100%;
  min-height:36px;
  max-height:72px;
  resize:vertical;
  border:1px solid var(--d-border,#2c3446);
  border-radius:9px;
  padding:8px 10px;
  background:var(--d-bg,#0b101b);
  color:var(--c-border-strong,#dbe2ea);
  font:inherit;
  font-size:11px;
  line-height:1.55;
}
.node.node-story-import{width:310px}
.node-story-import .output-stack{gap:8px;margin-bottom:0}
.output-scene{display:flex;flex-direction:column;gap:6px}
.output-scene-label{font-size:10px;font-weight:800;color:#8eb4e8;padding-left:2px}
.output-scene-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  width:100%;
  min-width:0;
}
.node-story-import .output-scene{
  width:70%;
  margin-left:auto;
  margin-right:auto;
}
.node-story-import .output-scene-label{text-align:center;padding-left:0}
.node-story-import .output-scene-grid{
  grid-template-columns:1fr;
  justify-items:center;
}
.output-item-compact{min-width:0}
.node-story-import .output-item-compact{border-radius:8px}
.node-story-import .output-item-compact .media{height:82px}
.node-story-import .output-item-compact .media img{
  width:100%;
  object-fit:cover;
}
.media img.zoomable{cursor:zoom-in}
.media img.zoomable:hover{opacity:.92}
.canvas-lightbox{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(6,8,14,.88);
  backdrop-filter:blur(6px);
}
.canvas-lightbox.open{display:flex}
.canvas-lightbox figure{
  margin:0;
  max-width:min(96vw,1200px);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.canvas-lightbox img{
  max-width:100%;
  max-height:calc(92vh - 40px);
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 24px 80px #0008;
  background:var(--d-bg,#0b101b);
}
.canvas-lightbox figcaption{
  text-align:center;
  font-size:13px;
  color:var(--c-gray-300,#c5cbe0);
  line-height:1.5;
}
.canvas-lightbox-close{
  position:absolute;
  top:4px;
  right:22px;
  width:40px;
  height:40px;
  border:1px solid var(--c-text-2,#4e5968);
  border-radius:50%;
  background:var(--c-text,#191f28);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.canvas-lightbox-close:hover{background:var(--d-border,#2c3446)}
.node p{font-size:12px;line-height:1.7;color:var(--d-text-3,#8492ad)}
.port{
  position:absolute;
  top:51%;
  width:16px;
  height:16px;
  border:3px solid #6aa6ff;
  border-radius:50%;
  padding:0;
  background:var(--d-surface-2,#1d2230);
  z-index:2;
  cursor:pointer;
}
.port.in{left:-9px}
.port.out{right:-9px}
.port:hover,.port.pending{background:var(--c-primary,#1b64da)}
.media{
  height:174px;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse at 35% 30%,#1e4a86,transparent 65%),linear-gradient(150deg,var(--d-surface-2,#1d2230),var(--c-text,#191f28));
  border-radius:10px;
  overflow:hidden;
  position:relative;
  text-align:center;
  color:var(--d-text-2,#aab4ca);
}
.media img,.media video{width:100%;height:100%;object-fit:contain;object-position:center}
.media video{background:#000}
.media .placeholder{font-size:35px}
.media small{display:block;font-size:11px;margin-top:12px}
.node select{
  width:100%;
  background:var(--d-surface-2,#1d2230);
  color:var(--c-border-strong,#dbe2ea);
  border:1px solid var(--d-border,#2c3446);
  padding:9px;
  border-radius:7px;
  margin-top:10px;
  font-size:12px;
  font:inherit;
}
.node .action{
  width:100%;
  margin-top:10px;
  font-size:12px;
  border:1px solid var(--d-border,#2c3446);
  background:var(--c-text,#191f28);
  color:var(--c-bg-subtle,#eef1f4);
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
  font:inherit;
  font-weight:700;
}
.node .action.primary{
  background:var(--canvas-accent-orange-bg);
  border-color:var(--canvas-accent-orange-border);
  color:var(--canvas-accent-orange-bright);
  text-shadow:0 0 12px rgba(61,139,255,.24);
}
.node .action.primary:hover{
  background:rgba(61,139,255,.24);
  border-color:var(--canvas-accent-orange);
  color:var(--canvas-accent-orange-soft);
}
.node .action.primary:disabled{
  opacity:.55;
  color:var(--canvas-accent-orange);
}
.node .status{font-size:11px;color:#8eb4e8;margin-top:11px}
.video-opts-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.video-opt label{display:block;font-size:10px;color:#8eb4e8;margin-bottom:4px;font-weight:700;letter-spacing:.02em}
.video-opt select{margin-top:0}
.credit-hold{
  font-size:11px;
  color:var(--canvas-accent-orange);
  margin-top:10px;
  font-weight:800;
  text-shadow:0 0 12px rgba(255,159,67,.22);
}
.credit-hold-value{
  color:var(--canvas-accent-orange-soft);
  font-variant-numeric:tabular-nums;
}
.video-split-hint{
  margin:0;
  font-size:10px;
  line-height:1.5;
  color:var(--d-text-3,#8492ad);
  text-align:center;
}
.video-reference-hint{
  margin:4px 0 0;
  font-size:10px;
  line-height:1.45;
  color:#c89b72;
  text-align:center;
}
.canvas-workspace-top{
  position:absolute;
  top:4px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  max-width:min(760px, calc(100% - 24px));
  pointer-events:none;
}
.canvas-workspace-top .canvas-top-bar,
.canvas-workspace-top .canvas-tools{
  pointer-events:auto;
}
.canvas-top-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  max-width:100%;
}
.canvas-connect-pop{position:absolute;left:16px;bottom:78px;z-index:6;width:min(320px,calc(100% - 32px));padding:14px 36px 14px 14px;border-radius:14px;border:1px solid #ff5a5a;background:#1a120f;color:#ffd0d0;box-shadow:0 16px 40px #0008}
.canvas-connect-pop.is-hidden{display:none}
.canvas-connect-pop b{display:block;margin-bottom:6px;color:#ff8d8d;font-size:13px}
.canvas-connect-pop p{margin:0;font-size:13px;font-weight:700;line-height:1.45}
.canvas-connect-pop-close{position:absolute;top:8px;right:8px;width:24px;height:24px;border:0;border-radius:8px;background:transparent;color:var(--d-danger,#ffb4b4);font-size:16px;cursor:pointer}
.character-copy-btn{margin-top:4px;padding:6px 8px;font-size:11px}
.story-seg{display:flex;flex-direction:column;gap:6px}
.story-seg-text{display:block}
.story-seg-img{display:block;width:100%;height:auto;border-radius:8px;cursor:zoom-in}
.story-seg-btn{padding:5px 8px;font-size:11px}
.canvas-top-bar-head{flex-wrap:nowrap;flex:0 0 auto;transform:none!important}
.canvas-top-bar-head .canvas-top-action{padding:6px 12px;box-shadow:none}
.project-title-input{width:100%;box-sizing:border-box;margin:4px 0 8px;padding:8px 10px;border-radius:10px;border:1px solid var(--d-border,#2c3446);background:var(--d-bg,#0b101b);color:#fff;font:inherit;font-size:13px;font-weight:700}
.canvas-top-action{
  border:1px solid var(--canvas-accent-orange-border);
  background:#22242cef;
  color:var(--canvas-accent-orange-soft);
  border-radius:14px;
  padding:8px 14px;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 35px #0003;
  white-space:nowrap;
}
.canvas-top-action:hover{background:var(--canvas-accent-orange-bg)}
.canvas-top-action:focus-visible{outline:2px solid #9180ff}
.canvas-total-credits{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 18px;
  background:#22242cef;
  border:1px solid var(--canvas-accent-orange-border);
  border-radius:14px;
  box-shadow:0 8px 35px #0003;
  cursor:pointer;
  white-space:nowrap;
}
.canvas-credit-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.canvas-credit-divider{
  color:var(--d-text-3,#8492ad);
  font-weight:800;
}
.canvas-task-credits .canvas-total-credits-label{
  color:var(--c-primary-tint,#dbe4ff);
}
.canvas-task-credits .canvas-total-credits-value{
  color:var(--c-primary-tint,#dbe4ff);
}
.canvas-total-credits-label{
  font-size:11px;
  font-weight:800;
  color:var(--canvas-accent-orange);
  letter-spacing:.03em;
  text-shadow:0 0 12px rgba(61,139,255,.22);
}
.canvas-total-credits-value{
  font-size:16px;
  font-weight:800;
  color:var(--canvas-accent-orange-soft);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 14px rgba(61,139,255,.24);
}
.canvas-tools,.canvas-toolbar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  background:#22242cef;
  border:1px solid var(--d-border,#2c3446);
  border-radius:14px;
  box-shadow:0 8px 35px #0003;
  white-space:nowrap;
  max-width:100%;
  overflow:auto;
}
.canvas-tools-label,.canvas-add-menu-label{
  font-size:10px;
  font-weight:900;
  color:var(--d-link,#8ea8ff);
  letter-spacing:.06em;
  padding:0 4px;
}
.canvas-tools button,.canvas-toolbar button{
  border:0;
  font-size:12px;
  background:transparent;
  color:var(--c-bg-subtle,#eef1f4);
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  font:inherit;
  font-weight:700;
}
.canvas-tools button:hover,.canvas-toolbar button:hover{background:var(--d-border,#2c3446)}
.canvas-node-inspector{
  position:absolute;
  left:auto;
  right:16px;
  width:min(440px,calc(100% - 32px));
  bottom:12px;
  z-index:6;
  display:grid;
  gap:8px;
  max-width:920px;
  padding:12px 14px;
  border:1px solid #3d4f78;
  border-radius:14px;
  background:var(--d-surface,#121725);
  color:var(--d-text,#e8edf7);
  box-shadow:0 16px 40px #0008;
}
.canvas-node-inspector[hidden]{display:none}
.canvas-node-inspector-head{display:flex;justify-content:space-between;gap:12px;align-items:center;cursor:grab}
.canvas-node-inspector.is-dragging{cursor:grabbing}
.canvas-node-inspector.is-dragging .canvas-node-inspector-head{cursor:grabbing}
.canvas-node-inspector-fold{border:1px solid #54648a;background:var(--c-navy,#172140);color:var(--d-text,#e8edf7);border-radius:8px;padding:6px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.canvas-node-inspector-prompt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}
.canvas-node-inspector-load{border:1px solid #54648a;background:#243456;color:var(--d-text,#e8edf7);border-radius:8px;padding:8px 10px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
.canvas-node-inspector-head b{font-size:14px}
.canvas-node-inspector-head span{color:var(--d-text-2,#aab4ca);font-size:12px}
.canvas-node-inspector textarea,
.canvas-node-inspector select,
.canvas-node-inspector input[type="text"]{
  width:100%;
  box-sizing:border-box;
  background:var(--d-bg,#0b101b);
  color:var(--c-bg-subtle,#eef1f4);
  border:1px solid var(--d-border,#2c3446);
  border-radius:8px;
  font:inherit;
}
.canvas-node-inspector textarea{min-height:64px;resize:vertical}
.canvas-node-inspector-row{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.canvas-node-inspector-row label{display:grid;gap:4px;font-size:11px;color:var(--d-text-2,#aab4ca);font-weight:700;min-width:120px}
.canvas-node-inspector audio{width:min(100%,420px)}
.canvas-dock{
  position:absolute;
  bottom:22px;
  left:50%;
  transform:translateX(-50%) scale(0.8);
  transform-origin:center bottom;
  display:flex;
  gap:8px;
  background:var(--d-surface-2,#1d2230);
  padding:9px;
  border:1px solid #454753;
  border-radius:16px;
  z-index:3;
}
.canvas-dock button{
  font-size:13px;
  border:1px solid var(--d-border,#2c3446);
  background:var(--c-text,#191f28);
  color:var(--c-bg-subtle,#eef1f4);
  border-radius:10px;
  padding:9px 12px;
  cursor:pointer;
  font:inherit;
  font-weight:700;
}
.canvas-dock button.active{background:var(--c-bg-subtle,#eef1f4);color:var(--c-text,#191f28);border-color:var(--c-bg-subtle,#eef1f4)}
.canvas-zoom{
  position:absolute;
  bottom:26px;
  left:18px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:3;
}
.canvas-zoom button{
  border:1px solid var(--d-border,#2c3446);
  background:var(--c-text,#191f28);
  color:var(--c-bg-subtle,#eef1f4);
  border-radius:10px;
  padding:8px 11px;
  cursor:pointer;
  font:inherit;
}
.canvas-zoom span{min-width:48px;text-align:center;font-size:12px;color:var(--c-gray-300,#c5cbe0)}
.canvas-hint{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(61,139,255,.4);
  border-radius:10px;
  background:rgba(29,31,39,.94);
  padding:9px 14px;
  color:var(--c-primary-tint,#dbe4ff);
  font-size:11px;
  line-height:1.55;
  text-align:center;
  pointer-events:none;
}
.canvas-hint-toggle{
  justify-self:center;
  border:1px solid rgba(61,139,255,.4);
  border-radius:999px;
  background:var(--d-surface-2,#1d2230);
  color:var(--c-primary-tint,#dbe4ff);
  padding:6px 12px;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.canvas-hint-toggle:hover{background:var(--d-border,#2c3446);color:#fff}
.canvas-hint-toggle:focus-visible{outline:2px solid #9180ff}
.canvas-hint strong{color:#fff;font-size:12px}
.canvas-hint b{color:var(--c-primary-tint,#dbe4ff)}
.canvas-hint small{font-size:10px;color:var(--d-text-3,#8492ad)}
.canvas-right-label{
  position:absolute;
  right:18px;
  bottom:28px;
  font-size:11px;
  color:var(--d-text-3,#8492ad);
  z-index:2;
}
.canvas-add-menu{
  position:absolute;
  bottom:86px;
  left:50%;
  transform:translateX(-50%);
  background:var(--d-surface-2,#1d2230);
  border:1px solid #454753;
  border-radius:14px;
  padding:10px;
  z-index:5;
  display:none;
  gap:6px;
  flex-wrap:wrap;
  width:min(330px,calc(100% - 24px));
}
.canvas-add-menu.open{display:flex;flex-direction:column;align-items:stretch}
.canvas-add-menu.open .canvas-add-menu-label{margin-bottom:2px}
.canvas-add-menu.open button{width:100%;text-align:left}
.canvas-add-menu button{
  white-space:nowrap;
  border:1px solid var(--d-border,#2c3446);
  background:var(--c-text,#191f28);
  color:var(--c-bg-subtle,#eef1f4);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  font:inherit;
  font-size:12px;
  font-weight:700;
}
.canvas-toast{
  position:fixed;
  left:50%;
  bottom:100px;
  transform:translateX(-50%);
  background:var(--c-primary-tint,#dbe4ff);
  color:var(--c-navy,#172140);
  padding:13px 22px;
  border-radius:12px;
  z-index:100;
  box-shadow:0 10px 40px #0005;
  display:none;
  max-width:90vw;
  font-size:13px;
  font-weight:700;
}
.canvas-toast.show{display:block}
.canvas-dialog{
  border:1px solid var(--c-text-2,#4e5968);
  border-radius:18px;
  background:var(--c-text,#191f28);
  color:var(--c-bg-subtle,#eef1f4);
  max-width:520px;
  padding:28px;
  line-height:1.9;
}
.canvas-dialog::backdrop{background:#0009}
.canvas-dialog p{color:var(--d-text-2,#aab4ca);font-size:14px}
.canvas-dialog h2{margin:0 0 8px;font-size:20px}
.canvas-dialog button{
  margin-top:8px;
  border:0;
  background:#7862ed;
  color:#fff;
  border-radius:10px;
  padding:10px 16px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.import-work-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:280px;
  overflow:auto;
  margin:12px 0;
}
.import-work-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--c-text-2,#4e5968);
  border-radius:12px;
  background:var(--c-text,#191f28);
  color:var(--c-bg-subtle,#eef1f4);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.import-work-item:hover{border-color:#9180ff;background:var(--d-surface-2,#1d2230)}
.import-work-item small{color:var(--d-text-3,#8492ad);font-size:11px}
.import-dialog-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.import-dialog-actions .canvas-btn{margin-top:8px;background:var(--d-border,#2c3446);color:var(--c-bg-subtle,#eef1f4);border:1px solid var(--c-text-2,#4e5968);border-radius:10px;padding:10px 14px;font:inherit;font-weight:800;cursor:pointer}
.side .links a.canvas-on{background:var(--d-border,#2c3446);box-shadow:inset 3px 0 #9180ff}
/* Canvas Studio — keep left nav visible (studio.css hides .side below 1100px) */
body.canvas-layout .side{
  display:flex!important;
  grid-column:1;
  grid-row:2;
  min-width:0;
}
@media(max-width:1100px){
  body.canvas-layout .app.canvas-app{
    grid-template-rows:52px minmax(0,1fr);
    grid-template-columns:minmax(120px,168px) minmax(0,1fr);
  }
  body.canvas-layout .side{display:flex!important}
  .canvas-panel{grid-column:2;grid-row:2}
}
@media(max-width:800px){
  body.studio-layout.canvas-layout.app-shell .app.canvas-app{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr)!important;
  }
  body.canvas-layout .top{height:auto;min-height:56px;overflow:visible}
  body.canvas-layout .side{display:none!important}
  body.canvas-layout .side.open{
    display:flex!important;
    position:fixed;
    left:0;
    top:56px;
    bottom:0;
    width:min(240px,88vw);
    z-index:80;
    overflow:auto;
  }
  .canvas-panel{grid-column:1;grid-row:2}
  .canvas-badge,.canvas-save-state,.canvas-hint,.canvas-right-label{display:none}
  .canvas-subhead{flex-wrap:nowrap;gap:8px;padding:10px 12px;overflow-x:auto}
  .canvas-subhead-spacer{display:none}
  #projectTitle{display:none}
  .canvas-subhead .canvas-btn{white-space:nowrap;flex:0 0 auto;padding:8px 10px;font-size:12px}
  .canvas-workspace-top{top:8px;flex-direction:row;justify-content:center;max-width:calc(100% - 16px)}
  .canvas-top-bar{flex-wrap:nowrap;gap:8px;max-width:100%}
  .canvas-top-action{padding:7px 10px;font-size:11px}
  .canvas-zoom{bottom:88px;left:10px}
  .canvas-dock{bottom:14px;max-width:calc(100% - 16px);overflow:auto}
  .canvas-dock button{white-space:nowrap;flex:0 0 auto}
}

/* mobile responsive pass 2026-10-12 */
@media(max-width:800px){
  .canvas-subhead{flex-wrap:wrap;overflow-x:visible;row-gap:6px;padding:8px 10px}
  .canvas-subhead .canvas-top-bar-head{flex:1 1 100%;flex-wrap:wrap;gap:6px}
  .canvas-subhead .canvas-btn,.canvas-subhead .canvas-top-action{min-height:34px}
  #view{touch-action:none;overscroll-behavior:contain}
  .canvas-zoom{bottom:64px;left:8px;gap:6px}
  .canvas-zoom button{min-width:40px;min-height:40px;padding:8px 10px}
  .canvas-dock{left:8px;right:auto;transform:none;max-width:calc(100% - 84px);bottom:10px;padding:6px;gap:6px}
  .canvas-dock button{min-height:38px;padding:7px 10px;font-size:12px}
  .canvas-node-inspector{left:8px;right:8px;width:auto;bottom:116px;max-height:38vh;overflow:auto;padding:10px 12px}
  .canvas-node-inspector-head{position:sticky;top:-10px;background:var(--d-surface,#121725);z-index:1}
  .canvas-node-inspector-fold{min-height:34px}
  .canvas-node-inspector-row label{min-width:0;flex:1 1 130px}
  .canvas-add-menu{max-height:50vh;overflow:auto}
  body.canvas-layout .aimov-chat-fab{bottom:10px!important;right:10px!important}
}
@media(max-width:800px){
  body.canvas-layout .toast{bottom:120px;max-width:calc(100vw - 24px)}
}
.storyboard-inspection-warning { display: block; margin-top: 6px; color: #ffd2a6; font-size: 11px; line-height: 1.45; }
.storyboard-inspection-warning input { accent-color: #f0a75e; }