/* Shared canvas theme. Load after component layouts and legacy themes. */
:root{
  color-scheme:dark;
  --bg:#080909;
  --panel:transparent;
  --panel2:transparent;
  --text:#e5e8e6;
  --muted:#939c97;
  --surface-border:rgb(225 230 227 / .17);
  --surface-hover:rgb(225 230 227 / .32);
  --surface-focus:#a8afab;
  --line:var(--surface-border);
  --radius:17px;
}
#studio{background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif}
#studio .shell-content{background:transparent;box-shadow:none}
#studio .main:not(:has(.workflow-workspace)){
  background-image:radial-gradient(rgb(170 185 177 / .11) .7px,transparent .7px);
  background-size:26px 26px;
}
#studio .topbar{height:58px;background:transparent;box-shadow:none;border-color:var(--line);border-width:var(--surface-hairline);border-radius:0}
#studio :is(h1,h2,h3){font-family:'DM Sans',system-ui,sans-serif}
#studio .page-heading h1{font-size:clamp(22px,2.3vw,28px);font-weight:500;letter-spacing:-.035em}
#studio .page-heading p{font-size:13px;color:var(--muted)}
#studio :is(.panel,.settings-section,.manual-selection,.clip-edit-panel,.pipeline-panel) h2{font-size:16px}

/* Panels, secondary surfaces, previews, and status containers. */
#studio :is(.sidebar,.sidebar:hover,.sidebar:focus-within,.panel,.metrics,.clip-card,
  .settings-section,.notice,.banner,.manual-selection,.clip-edit-panel,.edit-status,
  .pipeline-panel,.new-project-panel,.task-dock,.empty,.source-tile,.folder,
  .project-timeline,.caption-preview,.tabs,.dropzone,.dropzone.dragover,.modal,
  .canvas-left-rail,.canvas-checklist,.canvas-engine,.workflow-node,
  .canvas-tip,.message-bubble,.empty-stack-front,.empty-stack-card,.stack-front,.stack-back){
  background:transparent;box-shadow:none;border-color:var(--surface-border);border-width:var(--surface-hairline);
}
#studio :is(.panel,.metrics,.clip-card,.settings-section,.notice,.banner,.empty,
  .manual-selection,.clip-edit-panel,.pipeline-panel,.new-project-panel,.dropzone){border-radius:var(--radius)}
#studio :is(.clip-card:hover,.dropzone.dragover){border-color:var(--surface-hover);box-shadow:none}
#studio .clip-card:hover{transform:none}
#studio :is(.node-run-status,.message-detail,.panel-heading,.clip-footer,.pipeline-footer,
  .metric,.modal-head,.modal-foot,.transcript-cue,details,th,td,.task-dock-items a,.task-dock p){
  border-color:var(--surface-border);border-width:var(--surface-hairline);
}
#studio .divider{height:var(--surface-hairline);background:var(--surface-border)}
#studio :is(th,tbody tr:hover,.transcript-cue:hover,.task-dock-items a:hover){background:transparent;color:var(--text)}
#studio :is(.panel,.notice,.banner,.manual-selection,.clip-edit-panel,.pipeline-panel,.edit-status){color:var(--text)}
#studio :is(.banner p,.notice p,.pipeline-status,.pipeline-footer,.rationale,.back-link,.quote,.timeline-summary){color:#bac3bd}
#studio :is(.small,small,.help,.muted,.footer-note,.score-note,.status-explanation,.sample-note){color:var(--muted)}
#studio :is(.notice.warn,.badge.in_review){color:var(--amber)}
#studio :is(.notice.error,.banner.error p,.edit-status.error,.inline-error,.badge.failed,.badge.rejected){color:var(--red)}
#studio :is(.inline-success,.badge.approved,.provider-state:not(.off)){color:var(--brand-muted)}
#studio :is(.provider-state.off,.credential-status,.pipeline-stages li){color:var(--muted)}

/* All controls use the same neutral border in resting, clicked, and selected states. */
#studio :is(.btn,.icon-btn,.nav a,.tabs button,.link-btn,.timeline-clip,.source-run,
  .process-step,.side-control,.transcript-cue,.stack-dots button),
#studio :is(.btn,.icon-btn,.nav a,.tabs button,.link-btn,.timeline-clip,.source-run,
  .process-step,.side-control,.transcript-cue,.stack-dots button):is(:hover,:active,:focus,.active,[aria-pressed=true]){
  background:transparent;box-shadow:none;border-color:var(--surface-border);border-width:var(--surface-hairline);
  filter:none;
}
#studio :is(.btn,.icon-btn,.tabs button,.link-btn){color:#c7d0ca}
#studio :is(.btn,.icon-btn,.tabs button,.link-btn):hover{color:#f0f4f1;border-color:var(--surface-hover)}
#studio :is(.btn.primary,.btn.primary:hover,.nav a.active){color:var(--brand-mint);border-color:var(--surface-border)}
#studio .btn.danger{color:var(--red)}
#studio .btn:active{transform:none}
#studio .tabs button{border:var(--surface-hairline) solid transparent}
#studio .tabs button.active{color:var(--text);border-color:var(--surface-hover)}
#studio .side-control:is(:hover,:focus-visible){outline:none}
#studio :is(.nav a,.process-step):hover{border-color:var(--surface-hover)}
#studio .canvas-checklist [data-state=active] .process-step{color:var(--brand-mint)}
#studio .canvas-checklist [data-state=error] .process-step{color:var(--red)}
#studio .timeline-clip{color:var(--brand-muted);border:var(--surface-hairline) solid var(--surface-hover)}

/* Forms, file controls, native menus, and keyboard navigation. */
#studio :is(input,select,textarea),#studio #canvas-run-select{
  background:transparent;color:var(--text);border-color:var(--surface-border);
  border-width:var(--surface-hairline);box-shadow:none;border-radius:11px;
}
#studio :is(input,select,textarea):is(:hover,:focus,:active),#studio #canvas-run-select:focus{
  background:transparent;border-color:var(--surface-hover);box-shadow:none;
}
#studio :is(input,textarea)::placeholder{color:#78827c}
#studio :is(label,.field label,.label){color:#acb7b0}
#studio input[type=file]::file-selector-button{
  background:transparent;color:var(--text);border:var(--surface-hairline) solid var(--surface-border);
  padding:7px 10px;border-radius:8px;
}
#studio select option,#studio select optgroup{background:var(--bg);color:var(--text)}
#studio :is(input[type=checkbox],input[type=radio],input[type=range]){accent-color:#b8c3bc}
#studio :is(button,a,input,select,textarea,summary,[tabindex]):focus{outline:none;box-shadow:none}
#studio :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:1px solid var(--surface-focus);outline-offset:3px;box-shadow:none;
}
#studio .nav a:focus-visible{outline-color:var(--surface-focus);border-color:var(--surface-hover)}

/* Compact labels and icon containers share the transparent treatment. */
#studio :is(.tag,.badge,.score,.demo-flag,.clip-duration,.avatar,.workspace-avatar,
  .workspace-select,.provider-mark,.source-large,.video-glyph,.activity-icon,.stage-marker,
  .credential-icon,.tool-logo,.nav .count,.section-head h2 span,.message-state,
  .message-avatar,.node-tags>span,.node-tags>a,.play-circle,code){
  background:transparent;box-shadow:none;border:var(--surface-hairline) solid var(--surface-border);
}
#studio :is(.tag,.badge,.provider-mark,.source-large,.video-glyph,.activity-icon,.stage-marker,
  .credential-icon,.tool-logo,code){color:#adbab2}
#studio :is(.score,.editor-score strong,.pipeline-stages .done .stage-marker){color:var(--brand-muted)}
#studio :is(.pipeline-stages .current .stage-marker,.pipeline-stages .done .stage-marker){background:transparent;border-color:var(--surface-border)}
#studio .badge.approved{color:var(--brand-muted)}
#studio .badge.in_review{color:var(--amber)}
#studio :is(.badge.failed,.badge.rejected){color:var(--red)}
#studio :is(.clip-duration,.demo-flag,.score,.play-circle){backdrop-filter:blur(16px);color:#eef4ef}
#studio .clip-visual{background:transparent}
#studio .clip-visual:after{background:none}
#studio .player-wrap{background:#000;border:var(--surface-hairline) solid var(--surface-border);box-shadow:none}

/* Floating UI stays transparent, with blur providing readable text over media. */
#studio :is(.modal,.task-dock,.canvas-tip,.edit-overlay-copy){backdrop-filter:blur(24px)}
#studio .modal{border-radius:20px;color:var(--text)}
#studio .modal::backdrop{background:rgb(0 0 0 / .65);backdrop-filter:blur(8px)}
#studio #toast,#studio #toast.error,#studio .connection-alert{
  background:transparent;backdrop-filter:blur(24px);box-shadow:none;
  border:var(--surface-hairline) solid var(--surface-border);color:var(--text);
}
#studio #toast.error,#studio .connection-alert{color:var(--red)}
#studio .connection-alert{left:88px}
#studio .skip-link{background:var(--bg);color:var(--text);border:1px solid var(--surface-focus)}

/* Progress keeps its meaning without colored panel fills or glowing frames. */
#studio .progress-track,#studio .message-progress{background:rgb(225 230 227 / .1)}
#studio .progress-fill,#studio .message-progress>span{background:var(--brand-gradient)}
#studio .skeleton{background:linear-gradient(100deg,transparent 25%,rgb(225 230 227 / .07) 45%,transparent 65%);background-size:250% 100%;border:var(--surface-hairline) solid var(--surface-border)}
#studio .ai-edit-overlay{background:transparent;border:var(--surface-hairline) solid var(--surface-border);box-shadow:none;animation:none}
#studio .edit-overlay-copy{background:transparent;border:var(--surface-hairline) solid var(--surface-border);box-shadow:none;color:var(--text)}
#studio .edit-overlay-copy small{color:var(--muted)}
#studio .process-message:after{background:transparent;border-color:var(--surface-border)}
@media(max-width:800px){#studio .connection-alert{left:76px}#studio .topbar{height:54px;padding-inline:20px}}

/* Reference-style clip controls: compact stacked pill sliders with grip handles. */
#studio .workflow-node.settings-node{background:#111212;border-radius:17px;padding:16px;border-color:rgb(235 240 237 / .13);outline:var(--surface-hairline) solid rgb(235 240 237 / .06);outline-offset:7px}
#studio .settings-node .node-heading{font-size:12px;gap:7px;margin-bottom:16px}
#studio .settings-node .node-heading>svg{width:15px;height:15px}
#studio .settings-node .clip-setting{border:0;margin:0 0 14px;padding:0}
#studio .clip-setting>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 7px;padding:0;cursor:pointer;color:#eceeed}
#studio .clip-setting>summary::-webkit-details-marker{display:none}
#studio .clip-setting>summary>span{display:flex;flex-direction:column;gap:1px}
#studio .clip-setting .range-label{font-size:12px;font-weight:400}
#studio .clip-setting output{float:none;color:#939995;font-size:10px;font-variant-numeric:tabular-nums}
#studio .clip-setting>summary>svg{width:12px;height:12px;color:#8c948e;transform:rotate(90deg);transition:transform .15s}
#studio .clip-setting[open]>summary>svg{transform:rotate(-90deg)}
#studio .clip-slider{position:relative;height:32px;border-radius:999px;background:#222323;isolation:isolate}
#studio .clip-slider-fill{position:absolute;left:calc(14px + (100% - 28px) * var(--range-start));right:calc(14px + (100% - 28px) * (1 - var(--range-end)));top:0;bottom:0;background:#eee;pointer-events:none}
#studio .clip-count-control .clip-slider-fill{left:0;border-radius:999px 0 0 999px}
#studio .clip-slider-edge{position:absolute;top:0;bottom:0;left:13px;display:flex;align-items:center;font-size:10px;color:white;mix-blend-mode:difference;pointer-events:none;z-index:1}
#studio .clip-slider-edge.end{left:auto;right:13px}
#studio .settings-node .clip-slider input[type=range]{
  -webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:32px;margin:0;padding:0;
  background:transparent;border:0;border-radius:999px;box-shadow:none;z-index:2;opacity:1;cursor:pointer;
}
#studio .clip-slider input[type=range]::-webkit-slider-runnable-track{height:32px;background:transparent;border:0;border-radius:999px}
#studio .clip-slider input[type=range]::-moz-range-track{height:32px;background:transparent;border:0;border-radius:999px}
#studio .clip-slider input[type=range]::-moz-range-progress{background:transparent}
#studio .clip-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:2px;border:1.5px solid #f3f3f3;border-radius:50%;
  background:linear-gradient(#eee,#eee) 10px center/1.5px 8px no-repeat,linear-gradient(#eee,#eee) 14px center/1.5px 8px no-repeat,#222323;
  box-shadow:none;cursor:grab;
}
#studio .clip-slider input[type=range]::-moz-range-thumb{
  width:25px;height:25px;border:1.5px solid #f3f3f3;border-radius:50%;
  background:linear-gradient(#eee,#eee) 9px center/1.5px 8px no-repeat,linear-gradient(#eee,#eee) 13px center/1.5px 8px no-repeat,#222323;
  box-shadow:none;cursor:grab;
}
#studio .clip-duration-control input[type=range]{pointer-events:none}
#studio .clip-duration-control input[type=range]::-webkit-slider-thumb{pointer-events:auto}
#studio .clip-duration-control input[type=range]::-moz-range-thumb{pointer-events:auto}
#studio .clip-slider input[type=range]:focus-visible{outline:1px solid var(--surface-focus);outline-offset:3px;z-index:3}
#studio .clip-slider input[type=range]:disabled{cursor:default}
#studio .clip-slider input[type=range]:disabled::-webkit-slider-thumb{cursor:default}
#studio .clip-slider input[type=range]:disabled::-moz-range-thumb{cursor:default}
#studio .settings-node[data-values-state=loading] .clip-duration-control,#studio .settings-node[data-values-state=unavailable] .clip-duration-control{visibility:hidden}
#studio .settings-node .clip-setting:last-of-type{margin-bottom:0}
#studio .settings-node .node-tags,#studio .settings-node .node-run-status{display:none}

/* Edge-to-edge navigation: only the rail dividers have borders. */
#studio{--studio-nav-width:68px;--canvas-control-width:60px;--canvas-process-width:56px}
#studio .shell{padding:0;grid-template-columns:var(--studio-nav-width) minmax(0,1fr)}
#studio .sidebar,#studio .sidebar:is(:hover,:focus-within){
  left:0;top:0;bottom:0;border:0;border-right:var(--surface-hairline) solid var(--surface-border);
  border-radius:0;background:transparent;box-shadow:none;
}
#studio .sidebar{width:var(--studio-nav-width);padding:22px 12px;overflow-y:auto;overflow-x:hidden}
#studio .sidebar:is(:hover,:focus-within){width:214px}
#studio .sidebar .brand{min-height:34px;flex-shrink:0}
#studio .sidebar .brand img{border:0;border-radius:0;background:transparent}
#studio .sidebar .nav{flex-shrink:0}
#studio .sidebar .nav a{flex-shrink:0}
#studio .sidebar:is(:hover,:focus-within) .nav a{justify-content:flex-start;padding-inline:11px}
#studio .sidebar:is(:hover,:focus-within) .wordmark{display:block}
#studio .sidebar .nav .count{background:transparent;border:0;border-radius:0;box-shadow:none;min-width:14px;line-height:16px}
#studio :is(.sidebar .nav a,.canvas-left-rail .side-control,.canvas-checklist .process-step),
#studio :is(.sidebar .nav a,.canvas-left-rail .side-control,.canvas-checklist .process-step):is(:hover,:active,:focus,:focus-visible,.active){
  background:transparent;background-image:none;border:0;border-radius:0;box-shadow:none;outline:none;
}
#studio .sidebar .nav a:is(:hover,:focus-visible){color:var(--brand-highlight)}
#studio :is(.sidebar .nav a,.canvas-left-rail .side-control,.canvas-checklist .process-step):focus-visible:before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:18px;background:var(--surface-focus);
}
#studio .workflow-workspace{padding-inline:0}
#studio .main:has(.workflow-workspace){padding:22px calc(var(--canvas-process-width) + 24px) 24px calc(var(--canvas-control-width) + 24px)}
#studio .canvas-left-rail,#studio .canvas-checklist{
  position:fixed;top:0;bottom:0;transform:none;margin:0;border:0;border-radius:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;box-shadow:none;
}
#studio .canvas-left-rail{
  left:var(--studio-nav-width);width:var(--canvas-control-width);padding:24px 4px;gap:18px;
  border-right:var(--surface-hairline) solid var(--surface-border);
}
#studio .canvas-left-rail .side-control{width:100%;padding:8px 2px;flex-direction:column;gap:7px}
#studio .canvas-checklist{
  right:0;width:var(--canvas-process-width);padding:24px 6px;gap:0;
  border-left:var(--surface-hairline) solid var(--surface-border);
}
#studio .canvas-checklist .checklist-title{margin:0 0 15px}
#studio .canvas-checklist ol{flex-direction:column;flex-wrap:nowrap;gap:13px}
#studio .canvas-checklist .process-step{width:32px;height:32px}
#studio .canvas-rail-content{display:flex;flex-direction:column;align-items:center;width:100%;gap:18px}
#studio .canvas-checklist .canvas-rail-content{gap:0}
#studio .canvas-rail-content[hidden]{display:none}
#studio .canvas-panel-toggle{
  position:absolute;top:24px;left:50%;transform:translateX(-50%);width:22px;height:30px;padding:4px;
  display:grid;place-items:center;border:0;border-radius:0;background:transparent;box-shadow:none;
  color:#8c9b92;cursor:pointer;
}
#studio .canvas-panel-toggle svg{width:13px;height:13px}
#studio .canvas-panel-toggle:hover{color:#f0f5f2;background:transparent}
#studio .canvas-panel-toggle:focus-visible{outline:1px solid var(--surface-focus);outline-offset:-2px}
#studio .canvas-left-rail .canvas-panel-toggle[aria-expanded=true] svg,
#studio .canvas-checklist .canvas-panel-toggle[aria-expanded=false] svg{transform:rotate(180deg)}
#studio:has(.workflow-workspace[data-controls-collapsed=true]){--canvas-control-width:22px}
#studio:has(.workflow-workspace[data-process-collapsed=true]){--canvas-process-width:22px}
@media(max-width:800px){
  #studio{--studio-nav-width:56px;--canvas-control-width:46px;--canvas-process-width:42px}
  #studio .sidebar{padding:20px 7px}
  #studio .main:has(.workflow-workspace){padding:20px calc(var(--canvas-process-width) + 12px) 28px calc(var(--canvas-control-width) + 12px)}
  #studio .canvas-left-rail .rail-caption{font-size:8px;max-width:36px}
  #studio .canvas-checklist{padding-inline:4px}
  #studio .canvas-checklist .checklist-title{font-size:6px;letter-spacing:.03em}
  #studio .canvas-left-rail .canvas-tip{position:fixed;left:calc(var(--studio-nav-width) + var(--canvas-control-width) + 8px);right:12px;top:auto;bottom:16px;width:auto;transform:none}
}

/* The graph zooms inside its own viewport; navigation and controls stay full size. */
#studio:has(.workflow-workspace){overflow:hidden}
#studio .canvas-viewport{position:relative;width:calc(100% + 24px);height:calc(100dvh - 120px);min-height:300px;overflow:hidden;overscroll-behavior:contain;scrollbar-width:none;margin:14px -12px 0}
#studio .canvas-viewport::-webkit-scrollbar{display:none;width:0;height:0}
#studio .canvas-stage{position:relative;min-width:100%;min-height:100%;overflow:visible}
#studio .canvas-stage .workflow-canvas{position:absolute;top:0;margin:0;transform-origin:0 0}
#studio .canvas-viewport.is-hand-mode{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
#studio .canvas-viewport.is-hand-mode .workflow-canvas>*{pointer-events:none}
#studio .canvas-viewport.is-panning{cursor:grabbing}
#studio .canvas-viewport.is-hand-mode [data-canvas-recovery]{pointer-events:auto;cursor:default}
#studio .canvas-zoom-help{position:fixed;bottom:7px;left:calc(var(--studio-nav-width) + var(--canvas-control-width) + 24px);font-size:9px;line-height:1.3;color:#76817a;margin:0;pointer-events:none}
#studio .canvas-zoom-help span{padding-inline:5px;color:#455149}
#studio .canvas-controls{
  position:fixed;z-index:55;display:flex;align-items:center;gap:2px;padding:5px 7px;
  width:max-content;max-width:calc(100vw - 16px);border:var(--surface-hairline) solid var(--surface-hover);
  border-radius:10px;background:#0c0f0ee8;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 6px 30px #0005;user-select:none;
}
#studio .canvas-controls button{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:8px;height:34px;min-width:32px;padding:0 7px;
  background:transparent;border:0;border-radius:0;box-shadow:none;color:#a9b6ae;font:inherit;font-size:11px;cursor:pointer;
}
#studio .canvas-controls button:hover{color:#f0f5f2;background:transparent}
#studio .canvas-controls [data-action=canvas-hand][aria-pressed=true]{color:var(--brand-mint);text-decoration:none}
#studio .canvas-controls [data-action=canvas-hand][aria-pressed=true]::after{content:'';position:absolute;bottom:5px;width:12px;height:1px;background:currentColor}
#studio .canvas-controls button:focus-visible{outline:1px solid var(--surface-focus);outline-offset:-2px;border-radius:4px}
#studio .canvas-controls button:disabled{color:#647269;opacity:.5;cursor:default}
#studio .canvas-controls svg{width:16px;height:16px;flex:none}
#studio .canvas-controls .canvas-control-grip{min-width:24px;width:24px;padding:0;cursor:grab;color:#75837b;touch-action:none}
#studio .canvas-controls.is-dragging .canvas-control-grip{cursor:grabbing;color:#eef5f1}
#studio .canvas-controls .canvas-zoom-value{min-width:48px;color:#d8e4dc;font-variant-numeric:tabular-nums;font-size:11px}
#studio .canvas-control-divider{width:var(--surface-hairline);height:20px;background:var(--surface-border);margin-inline:5px;flex:none}
#studio .canvas-controls .canvas-stop{min-width:112px;justify-content:flex-start;padding-inline:10px}
#studio .canvas-controls .canvas-stop:not(:disabled){color:var(--brand-mint)}
#studio .canvas-controls .canvas-stop[data-stopping=true]{color:var(--brand-muted);opacity:1}
#studio .canvas-stop[data-stopping=true] svg{animation:node-beacon 1.8s ease-in-out infinite}
/* Recovery belongs directly below the affected node and the run status. */
#studio .canvas-recovery{margin-top:10px;min-width:0;width:100%}
#studio .canvas-recovery[hidden],#studio .source-run[hidden]{display:none}
#studio .canvas-recovery-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#studio .canvas-recovery button{display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 0;background:transparent;border:0;border-radius:0;box-shadow:none;color:#d1ded6;font:inherit;font-size:10px;cursor:pointer;min-width:0}
#studio .canvas-recovery button[data-action=canvas-continue]{color:var(--brand-mint)}
#studio .canvas-recovery button:hover{color:#f0f5f2}
#studio .canvas-recovery button:disabled{opacity:.45;cursor:default}
#studio .canvas-recovery button[data-loading=true]{opacity:1}
#studio .canvas-recovery button[data-loading=true] svg{animation:node-beacon 1s ease-in-out infinite}
#studio .canvas-recovery svg{width:12px;height:12px;flex:none}
#studio .canvas-recovery-message{font-size:9px;line-height:1.5;color:#81978b;margin:5px 0 0;overflow-wrap:anywhere}
#studio .canvas-recovery[data-error=true] .canvas-recovery-message{color:var(--red)}
#studio .empty-stack-front small{display:block;color:#81978b;font-size:10px;line-height:1.5;margin-top:12px;max-width:230px}
#studio .empty-stack-front p{overflow-wrap:anywhere}
#studio .clip-stack-empty.has-error .empty-stack-front>svg{color:var(--red);width:27px;height:27px}
#studio .canvas-side-run{width:100%;display:flex;flex-direction:column;align-items:center}
#studio .canvas-side-run .canvas-recovery{margin-top:2px}
#studio .canvas-side-run .canvas-recovery-actions{flex-direction:column;gap:1px;width:100%}
#studio .canvas-side-run .canvas-recovery button{width:100%;font-size:9px;min-height:25px;padding:3px 0}
#studio .canvas-side-run .canvas-recovery svg,#studio .canvas-side-run .canvas-recovery-message{display:none}
#studio .canvas-side-run .canvas-recovery button span{overflow:hidden;text-overflow:ellipsis}
@media(max-width:800px){#studio .canvas-viewport{width:100%;margin-inline:0}}
@media(max-width:500px){
  #studio .canvas-controls{gap:0;padding-inline:4px}
  #studio .canvas-controls .canvas-stop{min-width:100px;padding-inline:6px;font-size:10px}
  #studio .canvas-controls button{min-width:28px}
  #studio .canvas-control-divider{margin-inline:3px}
  #studio .canvas-zoom-help{left:calc(var(--studio-nav-width) + var(--canvas-control-width) + 12px);font-size:8px}
}
#studio .import-source-options .link-btn[aria-pressed="true"]{color:var(--green);text-decoration:underline;text-underline-offset:5px}
#studio #import-source-help{margin-top:10px;line-height:1.6}
#studio #skool-original{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
#studio #skool-original .field{margin-top:14px}
.selection-review { margin-block: 22px; }
.selection-review > p, .editorial-plan > p { margin-block: 14px; line-height: 1.65; }
.selection-review > .row:last-child { margin-top: 16px; }
.selection-review > .row:last-child > .help { flex: 1 1 240px; }
.editorial-plan { margin-block: 24px; padding-block: 24px; border-block: 1px solid var(--border, rgba(255,255,255,.12)); }
.editorial-plan h2 { font-size: 17px; }
.evidence-row { border-top: 1px solid var(--border, rgba(255,255,255,.12)); padding: 14px 0; }
.evidence-row p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.editorial-plan details { padding-block: 13px; }
.editorial-plan summary { cursor: pointer; line-height: 1.5; }
.editorial-plan li { line-height: 1.6; overflow-wrap: anywhere; }
.score-breakdown { margin-block: 16px; }
.score-breakdown > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 7px; font-size: 13px; }
.score-breakdown dd { margin: 0; white-space: nowrap; }
.edit-beats { list-style: none; padding: 0; }
.edit-beats li { border-left: 1px solid var(--border, rgba(255,255,255,.12)); padding: 4px 0 4px 14px; margin-block: 18px; }
.edit-beats p { margin-block: 8px 4px; }
.edit-beats small { display: block; color: var(--muted); }
.edit-beats .tag { margin-top: 8px; }
/* B-roll uses the same quiet, transparent canvas surfaces. */
.broll-upload{margin-bottom:24px}.broll-upload form{display:grid;grid-template-columns:1fr minmax(220px,340px) auto;align-items:center;gap:20px}.broll-upload .inline-error{grid-column:1/-1}
.broll-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}.broll-asset{min-width:0}.broll-asset h2{font-size:17px}.broll-asset>p{color:var(--muted);font-size:13px;line-height:1.6}.broll-asset-preview{height:190px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:15px}.broll-asset-preview img,.broll-asset-preview video{width:100%;height:100%;object-fit:contain}.broll-meta-form{display:grid;gap:14px;padding-top:15px}.broll-meta-form label,.broll-upload label,.broll-overlay-row label{display:grid;gap:8px;font-size:12px}
.broll-panel h2{font-size:17px}.broll-overlay-row{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12);display:grid;gap:12px}.broll-overlay-row>.row strong{font-size:13px}.broll-overlay-row .form-grid{gap:12px}.broll-overlay-row input,.broll-overlay-row select{min-width:0;width:100%}#broll-editor>.row{margin-top:18px}.broll-match-report{margin:16px 0;padding:14px 0;border-block:1px solid rgba(255,255,255,.12);font-size:13px}.broll-match-report small{color:var(--muted)}.broll-match{margin-top:15px;padding-left:12px;border-left:1px solid rgba(255,255,255,.2)}.broll-match p{line-height:1.5;margin:6px 0}.ai-broll-busy:before{content:'';display:inline-block;width:8px;height:8px;background:var(--accent,#00d2b5);border-radius:50%;margin-right:8px;animation:broll-pulse 1.5s ease-in-out infinite}.broll-live-preview{position:absolute;pointer-events:none;top:1.875%;left:5%;width:90%;height:30%;background:#101714;z-index:3}.broll-live-preview.inset{left:auto;right:3.333%;width:42%;height:22%}.broll-live-preview img,.broll-live-preview video{width:100%;height:100%;object-fit:contain!important}.broll-panel .help{font-size:12px;line-height:1.7}@keyframes broll-pulse{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){.ai-broll-busy:before{animation:none}}@media(max-width:900px){.broll-upload form{grid-template-columns:1fr}.broll-library{grid-template-columns:1fr}}
#studio [data-action="broll-stop-preview"][hidden]{display:none}
/* Timed transition controls share the canvas hairlines and transparent surfaces. */
.transition-panel h2{font-size:17px}.transition-panel .help{font-size:12px;line-height:1.7}.transition-row{display:grid;grid-template-columns:minmax(130px,1.2fr) minmax(75px,.7fr) minmax(90px,.8fr) auto;gap:10px;align-items:end;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}.transition-row label{display:grid;gap:8px;font-size:12px}.transition-row input,.transition-row select{width:100%;min-width:0}.transition-row .btn{min-height:42px}#transition-form>.row{margin-top:16px}.transition-preview-links{padding-top:12px}.transition-preview-links>.row{margin-top:8px}@media(max-width:650px){.transition-row{grid-template-columns:1fr 1fr}.transition-row>label:first-child{grid-column:1/-1}.transition-row>button{justify-self:end;grid-column:2}}
/* Finishing plans keep the canvas's open surfaces and hairline divisions. */
.finishing-panel { margin-block: 24px; }
.finishing-panel .finishing-progress { color: var(--accent, #00d5bd); margin-block: 18px; }
.finishing-clips { border-top: 1px solid rgba(255,255,255,.12); }
.finishing-clip { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.finishing-choice { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; }
.finishing-choice input { width: 16px; height: 16px; flex: 0 0 16px; accent-color: #b5c4bf; }
.finishing-choice input:disabled { opacity: .4; }
.finishing-beats { list-style: none; padding: 0; margin: 12px 0; }
.finishing-beats li { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
.finishing-beats p { margin: 6px 0; }
.finishing-beats small { display: block; margin-top: 7px; color: var(--muted, #9aa7a1); }
.finishing-actions { margin-top: 18px; }
.finishing-state { display: flex; gap: 8px; align-items: center; margin-block: 10px; }
.quality-panel { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.quality-panel h2, .project-quality h2 { font-size: 17px; }
.quality-message { margin-block: 12px; }
.quality-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #a7b6b0; white-space: nowrap; }
.quality-badge .loader { width: 12px; height: 12px; }
.quality-passed, .quality-pass { color: #76c1b0; }
.quality-warning { color: #cdb789; }
.quality-blocked, .quality-fail, .quality-failed { color: #e28b96; }
.quality-checks { list-style: none; margin: 12px 0; padding: 0; }
.quality-checks li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.quality-checks p { margin: 0; color: #b6c0bc; font-size: 12px; }
.quality-panel > .help { margin-block: 12px; }
.quality-flags { display: grid; max-height: 280px; overflow-y: auto; margin-block: 12px; }
.quality-flag { text-align: left; border: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding: 12px 0; background: transparent; color: inherit; }
.quality-flag small { display: block; margin-top: 5px; color: #9aa7a1; }
.project-quality { margin-block: 24px; }
.quality-project-rows a { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.1); }
.quality-project-rows { margin-top: 16px; }
.clip-footer { flex-wrap: wrap; }
.posting-panel { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 24px; }
.posting-panel h2 { font-size: 17px; }
.posting-panel .help { margin-block: 12px; line-height: 1.7; }
#posting-form { display: grid; gap: 14px; margin-top: 18px; }
#posting-form label { display: grid; gap: 8px; font-size: 12px; }
#posting-form input, #posting-form textarea { width: 100%; min-width: 0; }
.package-contents { padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.export-notice { position: fixed; z-index: 95; bottom: 24px; right: 24px; width: min(370px,calc(100vw - 100px)); background: rgb(8 9 9 / .96); border: 1px solid var(--line); padding: 18px; border-radius: 12px; backdrop-filter: blur(12px); }
.export-notice p { color: var(--muted); font-size: 12px; line-height: 1.7; margin-block: 12px; }
.export-notice .loader { width: 15px; height: 15px; }
.export-notice strong { font-size: 14px; }
.version-panel { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.version-panel h2 { font-size: 17px; }
.caption-panel { margin-block: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.caption-panel > summary { font-size: 17px; font-weight: 600; cursor: pointer; }
.clip-font-status { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.clip-font-status .help { margin-block: 12px; line-height: 1.7; }
.caption-panel .help { margin-block: 12px; line-height: 1.7; }
.caption-filters { display: grid; grid-template-columns: 1fr 150px; gap: 12px; margin-block: 18px; }
.caption-filters label { display: grid; gap: 8px; font-size: 12px; }
.caption-filters input,.caption-filters select { min-width: 0; width: 100%; }
.caption-words { max-height: 380px; overflow-y: auto; scrollbar-width: thin; }
.caption-word { display: grid; grid-template-columns: minmax(85px,1fr) minmax(100px,1.6fr) 26px; gap: 10px; align-items: center; padding-block: 10px; border-top: 1px solid var(--line); }
.caption-word input { width: 100%; min-width: 0; font-size: 13px; }
.caption-word-time .link-btn { display: inline; margin-right: 8px; padding: 0; font-size: 12px; }
.caption-word-time small { display: block; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; line-height: 1.5; margin-top: 4px; }
.caption-word > .link-btn { padding: 3px; }
.caption-pagination { gap: 8px; margin-block: 10px; }
.caption-pagination .btn { padding: 8px; font-size: 12px; }
.caption-pagination span { text-align: center; }
@media(max-width:600px){.caption-filters{grid-template-columns:1fr}.caption-word{grid-template-columns:minmax(75px,1fr) minmax(90px,1.5fr) 24px;gap:6px}}
.version-panel .help { margin-block: 12px; line-height: 1.7; }
.version-panel label { display: grid; gap: 8px; font-size: 12px; }
.version-panel select { width: 100%; }
#version-comparison { width: min(1050px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #080909; color: var(--text); overflow-y: auto; }
#version-comparison::backdrop { background: #000b; backdrop-filter: blur(8px); }
.comparison-heading,.comparison-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.comparison-heading h2 { font-size: 20px; margin-top: 7px; }
.comparison-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block: 22px; }
.comparison-videos figure { margin: 0; min-width: 0; }
.comparison-videos figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 10px; }
.comparison-videos figcaption span { color: var(--muted); }
.comparison-videos video { width: 100%; height: min(50vh,510px); object-fit: contain; background: #000; border: 1px solid var(--line); border-radius: 8px; }
.comparison-controls { border-top: 1px solid var(--line); padding-top: 16px; }
.comparison-controls label { font-size: 12px; }
.comparison-controls select { margin-left: 8px; }
.comparison-seek { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-block: 16px; }
.comparison-seek input { grid-column: 1/-1; width: 100%; accent-color: var(--brand-mint); }
.comparison-controls p,.comparison-footer p { font-size: 12px; line-height: 1.7; }
#comparison-message { color: var(--brand-muted); margin-block: 12px; }
.comparison-footer { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.comparison-footer .btn { flex-shrink: 0; }
@media(max-width:600px){#version-comparison{padding:16px}.comparison-heading h2{font-size:17px}.comparison-videos{gap:10px}.comparison-videos video{height:32vh}.comparison-footer{align-items:flex-start;flex-direction:column}}

/* Project-wide styling stays inside the canvas hairline theme. */
.project-style-panel{margin-top:24px;min-width:0}
.project-style-panel h2{margin:6px 0 12px}
.project-style-panel h3{font-size:15px;margin:0 0 12px}
.project-style-panel .form-grid{margin:18px 0;align-items:end}
.project-style-panel .field{display:flex;flex-direction:column;gap:8px;min-width:0}
.project-style-panel input[type=color]{width:100%;height:42px;padding:5px;background:transparent;border:1px solid var(--line);border-radius:8px}
.style-title-controls[hidden]{display:none}
.style-title-toggle{margin-top:16px}
.style-review,.style-batch-progress{border-top:1px solid var(--line);padding-top:22px;margin-top:22px}
.style-choices article,.style-batch-progress li{padding:14px 0;border-bottom:1px solid var(--line)}
.style-choices article:last-child,.style-batch-progress li:last-child{border-bottom:0}
.style-choices ul{padding-left:28px;color:var(--muted);font-size:13px;line-height:1.7}
.style-choices small{color:var(--muted);font-weight:400;white-space:nowrap}
.style-batch-progress>ul{list-style:none;padding:0;margin:0 0 16px}
.style-batch-progress a{color:var(--text);overflow-wrap:anywhere}
.style-batch-progress progress{width:100%;height:4px;accent-color:var(--green);display:block;margin:12px 0;background:transparent}
.style-batch-progress .help{margin-top:8px;overflow-wrap:anywhere}
.project-style-panel button{white-space:normal}
@media(max-width:700px){.project-style-panel .form-grid{grid-template-columns:1fr}.project-style-panel .finishing-choice{align-items:flex-start}.style-batch-progress .row{gap:8px}}

/* Consent appears only when a workflow exhausts its allowed time. */
#runtime-notice{position:fixed;right:22px;bottom:22px;z-index:1000;width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 42px);overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:0 15px 65px #0008}
.time-permission{padding:22px;line-height:1.5}
.time-permission h2{font-size:18px;margin:0}
.time-permission p{font-size:13px;margin:12px 0;overflow-wrap:anywhere}
.time-permission .time-estimate{font-size:15px}
.time-permission .row{gap:10px}
.time-permission .btn{white-space:normal}
.time-permission details{border-top:1px solid var(--line);padding:10px 0}
#project-time-permission:empty{display:none}
#project-time-permission .time-permission{margin-top:22px}
.badge.awaiting_approval{color:var(--amber)}
@media(max-width:650px){#runtime-notice{right:14px;bottom:14px}.time-permission{padding:18px}}