:root{
  --sl-bg:#020805;
  --sl-panel:#07110c;
  --sl-panel-strong:#0b1710;
  --sl-line:rgba(240,234,220,.15);
  --sl-text:#f6f1e8;
  --sl-muted:#a9b3ad;
  --sl-green:#a9f39b;
  --sl-gold:#ffc36d;
}

body.studio-body,
body:has(.editor-shell),
body:has(.board-top){
  color:var(--sl-text);
  background-color:var(--sl-bg);
}

/* Studio entry: the media supports each choice instead of sitting behind text. */
.studio-entry{padding:24px;background:var(--sl-bg)}
.studio-entry-backdrop{
  background:
    linear-gradient(rgba(169,243,155,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(169,243,155,.025) 1px,transparent 1px),
    var(--sl-bg);
  background-size:48px 48px;
  backdrop-filter:none;
}
.studio-entry:not(.choosing-usecase) .studio-entry-panel{
  width:min(1080px,100%);
  padding:0;
  overflow:hidden;
  border:1px solid var(--sl-line);
  border-radius:8px;
  background:rgba(4,13,8,.98);
  box-shadow:0 30px 90px rgba(0,0,0,.46);
}
.studio-entry:not(.choosing-usecase) .studio-entry-panel>header{
  position:relative;
  inset:auto;
  display:grid;
  justify-items:start;
  padding:26px 30px 24px;
  border-bottom:1px solid var(--sl-line);
  text-align:left;
  pointer-events:auto;
}
.studio-entry-brand{font-size:16px;color:#fff}
.studio-entry-brand img,.studio-brand img,.board-brand img{width:30px;height:30px;object-fit:contain}
.studio-entry:not(.choosing-usecase) .studio-entry-panel>header>p{margin:20px 0 7px;color:var(--sl-gold);letter-spacing:.18em}
.studio-entry:not(.choosing-usecase) .studio-entry-panel>header>h1{max-width:none;color:#fff;font-size:clamp(34px,4vw,56px);letter-spacing:0}
.studio-entry:not(.choosing-usecase) .studio-entry-panel>header>span{color:var(--sl-muted);font-size:13px}
.studio-entry:not(.choosing-usecase) .studio-entry-options{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;background:transparent}
.studio-entry:not(.choosing-usecase) .entry-option{
  display:grid;
  grid-template-rows:240px 1fr;
  min-height:510px;
  padding:0;
  border:0;
  border-right:1px solid var(--sl-line);
  border-radius:0;
  background:#050d09;
  color:var(--sl-text);
}
.studio-entry:not(.choosing-usecase) .entry-option:last-child{border-right:0}
.entry-option-media{position:relative;inset:auto;z-index:0;border-bottom:1px solid var(--sl-line);background:#030806}
.entry-option-media::after{background:linear-gradient(180deg,transparent 55%,rgba(2,8,5,.72))}
.entry-option-media img,.entry-option-media video{filter:saturate(.94) contrast(1.03);object-fit:cover!important;object-position:center!important}
.entry-option-copy{position:relative;inset:auto;z-index:1;display:block;padding:24px 28px 26px;text-shadow:none}
.entry-option-copy>i{right:28px;top:25px;color:rgba(246,241,232,.42)}
.entry-option-copy .entry-mode-icon{width:38px;height:38px;margin:0 0 16px;border-radius:8px;border-color:rgba(169,243,155,.35);background:rgba(169,243,155,.08);color:var(--sl-green);backdrop-filter:none}
.studio-entry:not(.choosing-usecase) .entry-option-copy small{color:var(--sl-gold)}
.studio-entry:not(.choosing-usecase) .entry-option-copy h2{margin:8px 0 9px;color:#fff;font-size:27px;letter-spacing:0}
.studio-entry:not(.choosing-usecase) .entry-option-copy p{min-height:52px;max-width:420px;color:var(--sl-muted);font-size:12px;line-height:1.55}
.studio-entry:not(.choosing-usecase) .entry-option-copy>strong{margin-top:18px;padding:0;border:0;border-radius:0;background:transparent;color:var(--sl-green);font-size:12px;backdrop-filter:none}
.studio-entry:not(.choosing-usecase) .entry-option:hover{background:#09150e}

/* Shared product surfaces. */
.studio-sidebar,.studio-topbar,.compact-topbar,.board-top{background:rgba(3,10,6,.94)!important;border-color:var(--sl-line)!important}
.studio-brand span{display:none}.studio-brand{gap:10px;color:#fff}
.creation-mode-tabs button,.creation-mode-tabs a,.simple-creation-panel,.foundation-text-card,.foundation-upload-panel,.recent-images figure,.continue-latest,.project-card,.status-card,
.top-left-commands,.top-center-status,.top-right-commands,.asset-panel,.inspector,.timeline,.project-health,.asset-row,.scene-card,.board-footer{
  border-radius:8px!important;
}
.simple-creation-panel{border-color:var(--sl-line);background:rgba(5,14,9,.92)}
.studio-eyebrow,.simple-panel-copy>small,.board-hero small,.section-head small,.board-footer small{color:var(--sl-gold)!important}
.create-button,.next-button,.export-main,.board-actions a,.board-footer button{background:var(--sl-green)!important;color:#071008!important;border-color:var(--sl-green)!important}

/* Editor: match the homepage palette and remove the older blue/purple glow. */
body:has(.editor-shell){background:var(--sl-bg)!important}
body:has(.editor-shell)::before{background:none!important}
body:has(.editor-shell)::after{
  background:none!important;
  opacity:0!important;
}
.compact-topbar{box-shadow:0 12px 34px rgba(0,0,0,.34)!important}
.top-left-commands,.top-center-status,.top-right-commands{background:rgba(255,255,255,.025)!important;border-color:var(--sl-line)!important}
.top-command-menu summary,.top-help-chip,.top-right-commands button,.editor-mode-switch button,.format-switch button{border-radius:6px!important}
.editor-mode-switch button.active,.format-switch button.active{background:var(--sl-green)!important;color:#071008!important}
.editor-logo img{width:30px;height:30px}

/* Calm editor default: show the customer path before the full production toolset. */
body:has(.editor-shell){--focus-topbar:72px}
.compact-topbar{
  grid-template-columns:auto minmax(300px,1fr) auto!important;
  gap:18px!important;
  height:72px!important;
  padding:10px 18px!important;
  background:rgba(3,10,6,.97)!important;
}
.top-left-commands,.top-center-status,.top-right-commands{
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.top-left-commands{width:40px}
.top-left-commands{grid-column:1!important;grid-row:1!important}
.top-center-status{grid-column:2!important;grid-row:1!important}
.top-right-commands{grid-column:3!important;grid-row:1!important}
.top-left-commands .top-command-menu,.top-left-commands .top-help-chip{display:none!important}
.top-center-status{justify-content:center!important;gap:10px!important}
.top-center-status .project-title,.top-center-status .brand-lock-badge,.top-center-status .save-state{display:none!important}
.top-right-commands{gap:8px!important}
.top-right-commands #toggle-left-panel,.top-right-commands #toggle-right-panel,.top-right-commands .ai-brush-main{display:none!important}
.top-right-commands #preview-project,.top-right-commands #export-project{min-height:38px;padding:0 16px!important}
.editor-mode-switch,.top-format-switch{padding:3px!important;border:1px solid var(--sl-line);border-radius:7px;background:rgba(255,255,255,.025)}
.editor-mode-switch button,.top-format-switch button{min-height:32px!important;padding:0 12px!important;border:0!important;background:transparent!important}
.editor-mode-switch button.active,.format-switch button.active{background:var(--sl-green)!important}
.tool-rail{width:74px!important;padding:14px 8px!important;background:#040c07!important}
.tool-rail button{position:relative;min-height:58px!important;padding:8px 4px!important;border:0!important;border-radius:6px!important;background:transparent!important;box-shadow:none!important}
.tool-rail button span{display:block!important;margin-top:5px!important;color:#8f9d95!important;font-size:9px!important}
.tool-rail button b{display:grid!important;place-items:center;width:25px;height:25px;margin:auto;border:1px solid rgba(240,234,220,.13);border-radius:6px;background:#09140e;color:#f6f1e8!important;font-size:13px!important;font-weight:700!important}
.tool-rail button.active,.tool-rail button:hover{background:rgba(169,243,155,.055)!important}
.tool-rail button.active::before{content:"";position:absolute;left:-8px;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--sl-green)}
.tool-rail button.active b{border-color:rgba(169,243,155,.45);background:rgba(169,243,155,.1);color:var(--sl-green)!important}
.tool-rail button.active span{color:var(--sl-text)!important}
.tool-rail .rail-divider,.tool-rail [data-panel="templates"],.tool-rail [data-panel="brand"]{display:none!important}
.timeline-head{height:44px!important;padding:7px 16px!important}
.timeline-head #move-clip-left,.timeline-head #move-clip-right,.timeline-head #shorten-clip,.timeline-head #extend-clip,.timeline-head .timeline-zoom{display:none!important}
.timeline{margin:0 14px 12px!important;border-radius:8px!important}
.workspace-toolbar{border:0!important;background:transparent!important}
.workspace-toolbar .zoom-switch{padding:4px;border:1px solid var(--sl-line);border-radius:7px;background:rgba(3,10,6,.76)}
.workspace-toolbar .zoom-switch button{border:0!important;background:transparent!important}
.object-context-bar{opacity:0!important;pointer-events:none!important;transform:translateY(5px);transition:opacity .16s ease,transform .16s ease!important}
.video-canvas:focus-within .object-context-bar,.video-canvas:hover .object-context-bar{opacity:1!important;pointer-events:auto!important;transform:translateY(0)}
.video-canvas.has-image-layer #editor-video{visibility:hidden!important}

/* One visual language across every editor surface. */
body:has(.editor-shell){
  --panel:#07110c;
  --panel2:#0b1710;
  --line:var(--sl-line);
  --text:var(--sl-text);
  --muted:var(--sl-muted);
  --lime:var(--sl-green);
  --blue:var(--sl-gold);
}
.editor-shell,.workspace,.canvas-stage{background:var(--sl-bg)!important}
.editor-shell{grid-template-columns:74px minmax(0,1fr)!important}
.workspace{grid-column:2!important}
body.left-panel-collapsed:not(.right-panel-collapsed) .editor-shell,
body.right-panel-collapsed:not(.left-panel-collapsed) .editor-shell,
body.left-panel-collapsed.right-panel-collapsed .editor-shell,
body:not(.left-panel-collapsed):not(.right-panel-collapsed) .editor-shell{grid-template-columns:74px minmax(0,1fr)!important}
.canvas-stage{background-image:none!important;background-color:#030a06!important}
.video-canvas{
  border:1px solid rgba(169,243,155,.18)!important;
  border-radius:8px!important;
  background:#06100b!important;
  box-shadow:0 26px 70px rgba(0,0,0,.42)!important;
}
.safe-area{border-color:rgba(255,195,109,.28)!important}
.design-object.selected{outline-color:var(--sl-green)!important}
.canvas-play{border-color:rgba(169,243,155,.42)!important;background:rgba(3,10,6,.82)!important;color:var(--sl-text)!important}

.asset-panel,.properties-panel,.mask-edit-panel{
  border-color:var(--sl-line)!important;
  background:#06100b!important;
  box-shadow:18px 0 50px rgba(0,0,0,.32)!important;
}
.asset-panel{left:86px!important;border-radius:8px!important}
.properties-panel{right:12px!important;border-radius:8px!important}
.asset-view{padding:22px 20px!important}
.panel-title{margin-bottom:18px!important}
.panel-title small,.collection-badge{color:var(--sl-gold)!important;letter-spacing:0!important}
.panel-title h2{color:#fff!important;letter-spacing:0!important}
.panel-help,.media-project-note,.voice-intro{color:var(--sl-muted)!important}
.generate-asset-card,.media-dropzone,.project-file-tools,.spatial-lock-tools,.brand-upload-card,.mini-template,.text-style-card,.caption-style,.audio-row,.brand-lock-card,.version-box,.ai-action,.layer{
  border-color:var(--sl-line)!important;
  border-radius:8px!important;
  background:#0a1510!important;
  box-shadow:none!important;
}
.generate-asset-card:hover,.media-dropzone:hover,.mini-template:hover,.text-style-card:hover,.ai-action:hover,.asset-card:hover{
  border-color:rgba(169,243,155,.42)!important;
  background:#0d1c14!important;
  transform:none!important;
}
.generate-asset-card small,.text-style-card small,.mini-template em{color:var(--sl-gold)!important}
.media-dropzone em,.generate-asset-card strong,.generate-asset-card b{color:var(--sl-green)!important}
.asset-card{border-radius:7px!important;background:transparent!important}
.asset-card.selected{border-color:var(--sl-green)!important;background:rgba(169,243,155,.07)!important}
.asset-thumb{border-radius:6px!important;background:#030a06!important}
.asset-view input,.asset-view textarea,.asset-view select,.properties-panel input,.properties-panel select{
  border-color:var(--sl-line)!important;
  border-radius:6px!important;
  background:#040d08!important;
  color:var(--sl-text)!important;
}
.wide-tool,.media-actions button,.properties-panel button,.mask-edit-panel button{
  border-color:var(--sl-line)!important;
  border-radius:6px!important;
  background:#0a1510!important;
}
.wide-tool.lime,.create-mask-preview,.apply-edit-result{background:var(--sl-green)!important;color:#071008!important;border-color:var(--sl-green)!important}
.mode-helper{border-color:var(--sl-line)!important;border-radius:8px!important;background:#0a1510!important}

.workspace-toolbar,.playback{border-color:var(--sl-line)!important;background:rgba(3,10,6,.72)!important}
.playback button,.timeline-head button,.workspace-toolbar button{border-color:var(--sl-line)!important;border-radius:6px!important;background:#0a1510!important}
.play-progress,.timeline input[type="range"]{accent-color:var(--sl-green)!important}
.timeline-shell{border-color:var(--sl-line)!important;background:#040c07!important;box-shadow:0 -20px 55px rgba(0,0,0,.32)!important}
.timeline-head{border-color:var(--sl-line)!important;background:#07110c!important}
.timeline{border-color:var(--sl-line)!important;background:#050d09!important}
.track-labels,.track,.ruler{border-color:rgba(240,234,220,.08)!important}
.clip{border-color:rgba(169,243,155,.38)!important;background:#193522!important;color:#f7f3e9!important}
.clip.selected{outline-color:var(--sl-green)!important;box-shadow:0 0 0 3px rgba(169,243,155,.1)!important}
.caption-clip{border-color:rgba(255,195,109,.38)!important;background:#3b3020!important;color:#fff4df!important}
.audio-clip{background:#12362c!important;color:#a9f39b!important}
.playhead{background:var(--sl-gold)!important}.playhead i{border-top-color:var(--sl-gold)!important}

.object-context-bar,.inline-text-toolbar{
  border-color:var(--sl-line)!important;
  border-radius:8px!important;
  background:rgba(4,13,8,.94)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.42)!important;
  backdrop-filter:blur(18px)!important;
}
.object-context-bar button,.inline-text-toolbar button{border-radius:5px!important;color:var(--sl-text)!important}
.object-context-bar button:hover,.inline-text-toolbar button:hover{background:rgba(169,243,155,.1)!important;color:var(--sl-green)!important}

.new-project-modal,.edit-result-dialog,.tour-card{
  border-color:var(--sl-line)!important;
  border-radius:8px!important;
  background:#07110c!important;
  color:var(--sl-text)!important;
  box-shadow:0 30px 100px rgba(0,0,0,.62)!important;
}
.top-command-popover,.toast{
  border-color:var(--sl-line)!important;
  border-radius:8px!important;
  background:#07110c!important;
  color:var(--sl-text)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.48)!important;
}
.toast{border-left:3px solid var(--sl-green)!important}
*{scrollbar-color:rgba(169,243,155,.28) transparent}

@media(max-width:700px){
  .editor-shell{grid-template-columns:58px minmax(0,1fr)!important}
  .workspace{grid-column:2!important}
  .asset-panel,.properties-panel{background:#06100b!important}
  .asset-view{padding:18px 16px!important}
  .video-canvas{border-radius:6px!important}
  .timeline{margin-inline:8px!important}
}

@media(max-width:900px){
  .compact-topbar{grid-template-columns:38px 1fr auto!important;gap:8px!important;padding:9px 10px!important}
  .top-format-switch{display:none!important}
  .editor-mode-switch button{padding:0 9px!important;font-size:10px!important}
  .top-right-commands #preview-project{display:none!important}
  .top-right-commands #export-project{padding:0 13px!important}
  .tool-rail{width:58px!important;padding-inline:5px!important}
  .tool-rail button{min-height:48px!important}
  .tool-rail button span{display:none!important}
}

/* Storyboard/export planning uses the same brand treatment. */
body:has(.board-top){background-image:none!important;background-color:var(--sl-bg)!important}
.board-brand span{display:none}.board-brand{font-size:12px;color:#fff}
.board-hero h1{font-family:inherit;letter-spacing:0;color:#fff}
.scene-card{background:rgba(6,15,10,.9)!important;border-color:var(--sl-line)!important}

@media(max-width:700px){
  .studio-entry{padding:10px}
  .studio-entry:not(.choosing-usecase) .studio-entry-panel>header{padding:22px 20px}
  .studio-entry:not(.choosing-usecase) .studio-entry-options{grid-template-columns:1fr}
  .studio-entry:not(.choosing-usecase) .entry-option{grid-template-columns:120px 1fr;grid-template-rows:1fr;min-height:230px;border-right:0;border-bottom:1px solid var(--sl-line)}
  .entry-option-media{height:100%;border-right:1px solid var(--sl-line);border-bottom:0}
  .entry-option-copy{padding:20px}
  .entry-option-copy .entry-mode-icon{display:grid}
  .studio-entry:not(.choosing-usecase) .entry-option-copy h2{font-size:22px}
  .studio-entry:not(.choosing-usecase) .entry-option-copy p{min-height:0}
}