/*
  Sceneleaf Studio focus pass
  A calm, high-end layer inspired by the P4 + V5 prototype.
  This file intentionally avoids changing editor logic.
*/

:root{
  --focus-bg:#050807;
  --focus-surface:rgba(10,14,13,.74);
  --focus-surface-strong:rgba(13,18,17,.92);
  --focus-line:rgba(226,255,217,.11);
  --focus-line-strong:rgba(184,255,69,.32);
  --focus-text:#eef6ec;
  --focus-muted:#91a295;
  --focus-soft:#d7ffd0;
  --focus-timeline:148px;
  --focus-topbar:68px;
}

html,
body{
  min-height:100%;
  background:
    radial-gradient(circle at 16% 9%, rgba(184,255,69,.11), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(66,104,255,.09), transparent 25%),
    radial-gradient(circle at 50% 98%, rgba(44,71,42,.34), transparent 38%),
    linear-gradient(135deg,#040604 0%,#08100d 52%,#030504 100%);
}

body{
  overflow:hidden;
  color:var(--focus-text);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(184,255,69,.055) 42.2% 42.45%, transparent 42.7%),
    linear-gradient(62deg, transparent 0 70%, rgba(255,255,255,.035) 70.15% 70.32%, transparent 70.5%);
  opacity:.7;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 34%, black, transparent 72%);
  opacity:.36;
}

.compact-topbar{
  display:grid;
  grid-template-columns:minmax(350px,1fr) minmax(430px,1.16fr) minmax(420px,1fr);
  gap:10px;
  align-items:center;
  height:var(--focus-topbar);
  padding:12px 18px;
  border-bottom:1px solid var(--focus-line);
  background:linear-gradient(180deg,rgba(8,12,10,.91),rgba(8,12,10,.67));
  box-shadow:0 16px 60px rgba(0,0,0,.34);
  backdrop-filter:blur(24px);
}

.top-left-commands,
.top-center-status,
.top-right-commands{
  min-height:44px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

.top-left-commands{
  padding:5px 6px;
}

.top-center-status{
  padding:5px;
  overflow:hidden;
}

.top-right-commands{
  justify-content:flex-end;
  padding:5px 6px;
}

.editor-logo.compact{
  width:34px;
  height:34px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 24%,#f5ffe7,transparent 22%),
    linear-gradient(135deg,#b8ff45,#4dbd55);
  color:#071006;
  box-shadow:0 0 30px rgba(184,255,69,.24);
}

.compact-topbar button,
.compact-topbar a,
.top-import-button{
  min-height:34px;
  border-radius:999px;
  border:1px solid transparent;
  color:#dce8db;
  letter-spacing:.01em;
}

.compact-topbar button:hover,
.compact-topbar a:hover,
.compact-topbar button:focus-visible,
.compact-topbar a:focus-visible{
  border-color:rgba(184,255,69,.28);
  background:rgba(184,255,69,.08);
  color:#f6ffef;
  outline:0;
}

.top-import-button,
.export-main{
  border:0!important;
  background:linear-gradient(135deg,#d9ff80,#95ee3f)!important;
  color:#071006!important;
  box-shadow:0 12px 34px rgba(184,255,69,.18);
}

.undo-main,
#redo{
  background:rgba(255,255,255,.04);
}

.project-title{
  min-width:168px;
  max-width:240px;
}

.project-title small{
  color:#8fa091;
  letter-spacing:.14em;
}

.project-title input{
  color:#f5fff2;
  font-weight:850;
  letter-spacing:-.03em;
}

.editor-mode-switch{
  min-height:36px;
  padding:4px;
  border-radius:999px;
  background:#030604;
  border:1px solid rgba(255,255,255,.08);
}

.editor-mode-switch button{
  min-width:78px;
  min-height:28px;
  border-radius:999px;
  color:#a8b7aa;
}

.editor-mode-switch button.active{
  background:linear-gradient(135deg,#efffd2,#b8ff45);
  color:#071006;
  box-shadow:0 7px 20px rgba(184,255,69,.22);
}

.brand-lock-badge{
  min-height:34px;
  border-radius:999px;
  background:rgba(255,255,255,.035);
  max-width:154px;
  overflow:hidden;
  white-space:nowrap;
}

.save-state{
  color:#adc0ae;
  font-size:11px;
}

.editor-shell{
  position:relative;
  height:calc(100vh - var(--focus-topbar) - var(--active-timeline-height, 0px));
  grid-template-columns:72px minmax(520px,1fr);
  gap:0;
  background:transparent;
  transition:grid-template-columns .2s ease, height .2s ease;
}

.workspace{
  position:relative;
}

body[data-editor-mode="video"]{
  --active-timeline-height:var(--focus-timeline);
}

body[data-editor-mode="picture"]{
  --active-timeline-height:0px;
}

.tool-rail{
  width:72px;
  padding:12px 8px;
  border-right:1px solid var(--focus-line);
  background:linear-gradient(180deg,rgba(9,13,12,.72),rgba(5,8,7,.86));
  backdrop-filter:blur(20px);
}

.tool-rail button{
  min-height:58px;
  border:1px solid transparent;
  border-radius:19px;
  background:transparent;
  color:#9cae9e;
}

.tool-rail button b{
  font-size:11px;
  color:#e8f4e7;
}

.tool-rail button span{
  margin-top:4px;
  color:#77887a;
  font-size:9px;
}

.tool-rail button.active,
.tool-rail button:hover,
.tool-rail button:focus-visible{
  border-color:rgba(184,255,69,.22);
  background:linear-gradient(135deg,rgba(184,255,69,.14),rgba(255,255,255,.035));
  color:#f2ffe9;
  box-shadow:0 12px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  outline:0;
}

.rail-divider{
  opacity:.45;
}

.asset-panel,
.properties-panel{
  position:fixed;
  z-index:82;
  top:82px;
  bottom:calc(var(--active-timeline-height, 0px) + 14px);
  border:1px solid var(--focus-line);
  background:
    radial-gradient(circle at 24% 0%,rgba(184,255,69,.09),transparent 28%),
    linear-gradient(180deg,rgba(13,18,17,.91),rgba(7,10,9,.88));
  box-shadow:0 28px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(22px);
}

.asset-panel{
  left:86px;
  width:330px;
  margin:0;
  border-radius:28px;
  overflow:hidden auto;
  transition:transform .2s ease, opacity .2s ease, visibility .2s ease;
}

.properties-panel{
  right:14px;
  width:336px;
  margin:0;
  border-radius:28px;
  overflow:hidden auto;
  transition:transform .2s ease, opacity .2s ease, visibility .2s ease;
}

body.left-panel-collapsed .asset-panel,
body.right-panel-collapsed .properties-panel{
  visibility:hidden;
  pointer-events:none;
  opacity:0;
}

body.left-panel-collapsed .asset-panel{
  transform:translateX(calc(-100% - 22px));
}

body.right-panel-collapsed .properties-panel{
  transform:translateX(calc(100% + 22px));
}

.workspace{
  grid-column:2;
}

.asset-view{
  padding:22px;
}

.panel-title h2{
  color:#f6fff3;
  font-size:25px;
  letter-spacing:-.055em;
}

.panel-title small,
.properties-panel section>label:first-child{
  color:#8fa091;
  letter-spacing:.12em;
}

.panel-help,
.media-project-note,
.caption-style small,
.audio-section small{
  color:var(--focus-muted);
}

.media-dropzone,
.brand-upload-card,
.template-brand-shortcut,
.wide-tool,
.mini-template,
.text-style-card,
.audio-section,
.version-box,
.brand-lock-card,
.selected-layer-summary,
.properties-panel section{
  border-color:rgba(226,255,217,.1)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))!important;
}

.media-dropzone{
  min-height:158px;
}

.media-dropzone b,
.brand-upload-card b,
.template-brand-shortcut b{
  color:#f5fff2;
}

.asset-card,
.element-grid button,
.layer{
  border-color:rgba(226,255,217,.1);
  border-radius:20px;
  background:rgba(255,255,255,.04);
}

.asset-card:hover,
.element-grid button:hover,
.layer:hover,
.asset-card.selected{
  border-color:rgba(184,255,69,.35);
  background:rgba(184,255,69,.08);
}

.workspace{
  grid-template-rows:0 minmax(0,1fr) 58px;
  background:
    radial-gradient(circle at 50% 44%, rgba(184,255,69,.09), transparent 28%),
    transparent;
}

.workspace-toolbar{
  height:0;
  min-height:0;
  overflow:visible;
  border:0;
  background:transparent;
  pointer-events:none;
}

.workspace-toolbar .format-switch,
.workspace-toolbar > div:last-child{
  position:absolute;
  z-index:42;
  top:24px;
  pointer-events:auto;
  min-height:36px;
  padding:5px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:999px;
  background:rgba(6,9,8,.72);
  box-shadow:0 18px 46px rgba(0,0,0,.28);
  backdrop-filter:blur(20px);
}

.workspace-toolbar .format-switch{
  left:calc(50% - 126px);
}

.workspace-toolbar > div:last-child{
  right:24px;
}

.workspace-toolbar button{
  min-height:28px;
  border-radius:999px;
  color:#b8c8b9;
}

.workspace-toolbar button.active,
.workspace-toolbar button:hover{
  background:rgba(184,255,69,.13);
  color:#f6ffef;
}

.canvas-stage{
  display:grid;
  place-items:center;
  padding:92px 40px 18px;
}

.video-canvas{
  width:min(100%,1180px);
  height:auto;
  aspect-ratio:16/9;
  max-height:calc(100vh - var(--focus-topbar) - var(--active-timeline-height, 0px) - 126px);
  border:1px solid rgba(226,255,217,.12);
  border-radius:42px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 30%,rgba(184,255,69,.15),transparent 31%),
    linear-gradient(145deg,#111916,#050807 68%);
  box-shadow:
    0 42px 140px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.035),
    inset 0 1px 0 rgba(255,255,255,.06);
}

body[data-editor-mode="picture"] .video-canvas{
  aspect-ratio:4/3;
  width:min(100%,980px);
  max-height:calc(100vh - var(--focus-topbar) - 178px);
}

.video-canvas.is-empty{
  border-style:solid;
  background:
    radial-gradient(circle at 50% 38%,rgba(184,255,69,.16),transparent 30%),
    radial-gradient(circle at 72% 72%,rgba(85,136,255,.11),transparent 34%),
    linear-gradient(145deg,#101815,#050806 65%);
}

.video-canvas.is-empty .canvas-play{
  display:none;
}

.empty-canvas-state{
  background:
    radial-gradient(circle at 50% 42%,rgba(184,255,69,.10),transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
}

.empty-canvas-state b{
  color:#f8fff2;
  font-size:clamp(30px,3.2vw,58px);
}

.empty-canvas-state span{
  color:#9eb09f;
  font-size:15px;
}

.playback{
  align-self:start;
  justify-self:center;
  width:min(860px,calc(100% - 48px));
  min-height:48px;
  margin-top:0;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(6,9,8,.68);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
  backdrop-filter:blur(18px);
}

.playback button{
  min-width:42px;
  border-radius:999px;
}

.object-context-bar{
  position:fixed!important;
  left:50%!important;
  top:82px!important;
  translate:-50% 0!important;
  min-height:48px;
  gap:4px;
  padding:6px;
  border:1px solid rgba(226,255,217,.14);
  border-radius:999px;
  background:rgba(5,8,7,.86);
  box-shadow:0 20px 62px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.05);
  z-index:170;
}

.object-context-bar strong{
  max-width:150px;
  color:#dfffd2;
  font-size:11px;
}

.object-context-bar button{
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  color:#c5d5c7;
  font-size:10px;
}

.object-context-bar button:hover,
.object-context-bar button:focus-visible{
  background:rgba(184,255,69,.13);
  color:#f8fff2;
}

.inline-text-toolbar{
  position:fixed;
  left:50%!important;
  top:auto!important;
  bottom:calc(var(--active-timeline-height, 0px) + 20px)!important;
  translate:-50% 0!important;
  min-height:52px;
  max-width:min(760px,calc(100% - 28px));
  border:1px solid rgba(226,255,217,.16);
  border-radius:999px;
  background:rgba(5,8,7,.88);
  box-shadow:0 20px 62px rgba(0,0,0,.46);
  z-index:180;
}

.inline-text-toolbar select,
.inline-text-toolbar input[type="number"],
.inline-text-toolbar>button,
.inline-align button{
  border-radius:999px;
  background:rgba(255,255,255,.055);
}

.mask-edit-panel{
  position:fixed;
  top:88px;
  right:22px;
  bottom:calc(var(--active-timeline-height, 0px) + 22px);
  width:min(392px,calc(100vw - 44px));
  max-height:none;
  padding:18px;
  border:1px solid var(--focus-line-strong);
  border-radius:30px;
  background:
    radial-gradient(circle at 18% 0%,rgba(184,255,69,.14),transparent 31%),
    linear-gradient(180deg,rgba(12,18,15,.96),rgba(5,8,7,.94));
  box-shadow:0 32px 110px rgba(0,0,0,.56);
  backdrop-filter:blur(24px);
}

.mask-edit-panel header{
  align-items:flex-start;
}

.mask-edit-panel header small{
  color:#a8f280;
  letter-spacing:.12em;
}

.mask-edit-panel header strong{
  color:#f6fff0;
  font-size:20px;
  letter-spacing:-.04em;
}

.mask-steps{
  gap:8px;
}

.mask-steps li,
.mask-actions,
.tool-recommendation{
  border-radius:18px;
  background:rgba(255,255,255,.042);
  border-color:rgba(255,255,255,.08);
}

.mask-actions button{
  min-height:36px;
  border-radius:999px;
}

.mask-actions button.active,
.apply-mask-edit{
  background:linear-gradient(135deg,#d9ff80,#a8f044)!important;
  color:#071006!important;
}

#edit-mask-canvas{
  mix-blend-mode:screen;
}

.timeline-shell{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:var(--focus-timeline);
  border-top:1px solid var(--focus-line);
  background:linear-gradient(180deg,rgba(8,12,10,.92),rgba(5,8,7,.98));
  box-shadow:0 -24px 84px rgba(0,0,0,.38);
  backdrop-filter:blur(24px);
  transition:transform .22s ease, opacity .22s ease;
}

body[data-editor-mode="picture"] .timeline-shell{
  transform:translateY(calc(100% + 18px));
  opacity:0;
  pointer-events:none;
}

body[data-editor-mode="video"] .timeline-shell{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.timeline-head{
  height:46px;
  padding:8px 18px;
}

.timeline{
  height:calc(100% - 46px);
  margin:0 18px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.025);
}

.clip-actions button,
.timeline-zoom button{
  min-height:30px;
  border-radius:999px;
}

.clip,
.caption-clip,
.audio-clip{
  border-radius:12px;
}

.clip.selected{
  outline:2px solid rgba(184,255,69,.92);
  box-shadow:0 0 0 5px rgba(184,255,69,.08);
}

#design-layer-list .empty-layer span{
  display:none;
}

.properties-tabs{
  border-radius:999px;
  background:rgba(255,255,255,.045);
}

.properties-tabs button{
  border-radius:999px;
}

.properties-tabs button.active{
  background:linear-gradient(135deg,#d9ff80,#b8ff45);
  color:#071006;
}

body.left-panel-collapsed.right-panel-collapsed .video-canvas{
  width:min(100%,1120px);
}

body.left-panel-collapsed.right-panel-collapsed[data-editor-mode="picture"] .video-canvas{
  width:min(100%,1040px);
}

body .metrics-consent{
  display:none;
}

.property-grid input,
.caption-workflow input,
.caption-workflow select,
.audio-section select,
.audio-section textarea,
.version-box select{
  border-radius:16px;
  background:rgba(3,6,5,.72);
}

.wide-tool.lime,
.ai-action:hover,
.ai-action:focus-visible{
  border-color:rgba(184,255,69,.32)!important;
  background:linear-gradient(135deg,rgba(184,255,69,.18),rgba(184,255,69,.06))!important;
  color:#f6ffef!important;
}

.layer-add-actions button,
.media-actions button,
.media-cleanup-actions button,
.property-grid button{
  border-radius:999px;
}

@media(max-width:1280px){
  .compact-topbar{
    grid-template-columns:1fr;
    height:auto;
    align-items:stretch;
  }

  .top-left-commands,
  .top-center-status,
  .top-right-commands{
    justify-content:center;
    flex-wrap:wrap;
  }

  .editor-shell{
    height:calc(100vh - 150px - var(--active-timeline-height, 0px));
    grid-template-columns:72px minmax(0,1fr);
  }

  .asset-panel,
  .properties-panel{
    z-index:80;
    top:154px;
    bottom:calc(var(--active-timeline-height, 0px) + 16px);
    width:min(360px,calc(100vw - 96px));
    margin:0;
    opacity:1;
    visibility:visible;
  }

  .asset-panel{
    left:84px;
    transform:translateX(-110%);
  }

  body:not(.left-panel-collapsed) .asset-panel{
    transform:translateX(0);
  }

  .properties-panel{
    right:16px;
    transform:translateX(110%);
  }

  body:not(.right-panel-collapsed) .properties-panel{
    transform:translateX(0);
  }

  .workspace{
    grid-column:2;
  }
}

@media(max-width:760px){
  :root{
    --focus-timeline:132px;
  }

  body{
    overflow:auto;
  }

  .editor-shell{
    min-height:calc(100vh - 170px);
  }

  .tool-rail{
    width:60px;
    padding-inline:6px;
  }

  .tool-rail button{
    min-height:54px;
    border-radius:16px;
  }

  .asset-panel,
  .properties-panel,
  .mask-edit-panel{
    top:170px;
    left:70px;
    right:10px;
    width:auto;
    bottom:calc(var(--active-timeline-height, 0px) + 10px);
  }

  .canvas-stage{
    padding:18px 12px 8px;
  }

  .video-canvas,
  body[data-editor-mode="picture"] .video-canvas{
    width:100%;
    border-radius:28px;
  }

  .playback{
    width:calc(100% - 18px);
    border-radius:22px;
  }

  .object-context-bar,
  .inline-text-toolbar{
    border-radius:22px;
    overflow-x:auto;
    justify-content:flex-start;
  }
}