/* Lumi workspace theme */
:root {
  --studio-surface: #151518;
  --studio-border: #303034;
  --studio-muted: #b6b3b5;
  --studio-amber: #ffb65f;
}
#app { height: 100dvh; }

header {
  gap: 8px;
  min-height: 64px;
  padding: 10px 20px;
  background: var(--studio-surface);
  border-bottom-color: var(--studio-border);
  box-shadow: none;
}
header::before, header::after, .logo::after { content: none; }
header .logo { margin-right: 16px; font-size: 16px; letter-spacing: .045em; }
header .logo .dot {
  width: 8px;
  height: 8px;
  background: var(--studio-amber);
  box-shadow: none;
  animation: none;
}
header .btn-proj, #aspectGroup {
  background: #202024;
  border: 1px solid var(--studio-border);
  box-shadow: none;
}
header .btn-proj { color: #ece9e6; white-space: nowrap; }
header .btn-proj:hover { border-color: #76614b; color: #ffcf99; transform: none; }
#aspectGroup .segbtn.active {
  background: #3d3023;
  color: #ffce96;
  box-shadow: none;
}
#recordBtn {
  justify-content: center;
  background: var(--studio-amber);
  color: #231609;
  box-shadow: none;
}
#recordBtn.recording { background: #d96b35; color: #1b0e08; }

#tabrail {
  width: 84px;
  padding: 8px 6px;
  overflow: auto;
  background: #101013;
  border-color: var(--studio-border);
  box-shadow: none;
}
.tabbtn {
  flex-shrink: 0;
  color: var(--studio-muted);
  font-size: 10px;
}
.tabbtn.active { background: #2a2119; color: #ffcc93; box-shadow: none; }
.tabbtn.active::before { border-color: transparent; }
.tabbtn.active::after { background: var(--studio-amber); box-shadow: none; }
.tabbtn.active svg, .tabbtn:hover:not(.active) svg { filter: none; transform: none; }

#sidepanel {
  width: clamp(290px, 28vw, 380px);
  padding: 20px;
  background: var(--studio-surface);
  border-color: var(--studio-border);
  box-shadow: none;
}
#sidepanel h3 { padding-left: 0; margin-bottom: 7px; color: #f7f4f1; }
#sidepanel h3::before { content: none; }
#sidepanel .hint { padding-left: 0; color: var(--studio-muted); line-height: 1.55; }
#sidepanel .field label { color: #ccc8c7; line-height: 1.45; }
#sidepanel .rangeval { margin-left: 6px; color: #ffcc93; text-shadow: none; }
#sidepanel .divider { background: var(--studio-border); margin: 18px 0; }
#sidepanel .batch-box { background: #1c1c20; border-color: var(--studio-border); box-shadow: none; }
#sidepanel .batch-box::before { content: none; }
#wSingleControls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
#wSingleControls > .row2 { display: contents; }
#wSingleControls > .field:has(#wY) { grid-area: 1 / 2; }
#wSingleControls .field:has(#wX) { grid-area: 1 / 1; }
#wSingleControls .field:has(#wX, #wY) { align-self: end; }
#wSingleControls .field:has(#wWidth), #wSingleControls .field:has(#wSens) { grid-column: 1 / -1; }

#stage { background: #0c0c0f; }
#stage::before { content: none; }
#canvaswrap { container-type: size; padding: clamp(12px, 2vw, 28px); background: none; }
#previewCanvas {
  border-radius: 4px;
  box-shadow: 0 0 0 1px #38383e, 0 12px 32px #0008;
}
#previewCanvas[width="1920"] { max-width: min(100%, 177.777cqh); }
#previewCanvas[width="1080"] { max-height: min(100%, 177.777cqw); }
.stagehint { width: max-content; max-width: calc(100% - 24px); text-align: center; }
#transport { gap: 10px; padding: 10px 14px; background: var(--studio-surface); border-color: var(--studio-border); box-shadow: none; }
#playBtn { flex: 0 0 40px; background: #252529; color: #ffcc93; border-color: #414148; box-shadow: none; }
#timecode { width: auto; color: #e5dfd9; font-variant-numeric: tabular-nums; white-space: nowrap; }
#timeline { min-width: 0; height: 48px; border-color: #393940; box-shadow: none; }
#timeline::before { content: none; }
#timeline canvas { filter: brightness(1.24); }
#playhead { background: var(--studio-amber); box-shadow: none; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--studio-amber);
  outline-offset: 2px;
}

@media (max-width: 800px) {
  header { flex-wrap: wrap; padding: 8px 12px; }
  header .logo { flex: 1 0 100%; margin: 0; }
  #main { display: grid; grid-template: minmax(165px, 42%) auto minmax(0, 1fr) / minmax(0, 1fr); }
  #stage { grid-row: 1; min-height: 0; }
  #tabrail {
    grid-row: 2;
    flex-direction: row;
    width: 100%;
    gap: 3px;
    padding: 3px 6px;
    border: 0;
    border-block: 1px solid var(--studio-border);
  }
  .tabbtn { min-width: 62px; padding: 6px; gap: 4px; }
  .tabbtn svg { width: 17px; height: 17px; }
  .tabbtn.active::after { inset: auto 9px 0; width: auto; height: 2px; }
  #sidepanel { grid-row: 3; width: 100%; padding: 14px; border: 0; }
  #timeline { height: 34px; }
  #transport { padding: 6px 9px; }
  #playBtn { flex-basis: 34px; width: 34px; height: 34px; }
}

@media (max-width: 520px) {
  header .spacer { display: none; }
  #recordBtn { flex: 1 0 100%; padding-block: 7px; }
  header .btn-proj, #aspectGroup .segbtn { padding-inline: 8px; }
}