/* StarFlux editor — space + sunlit warm light (red / orange / yellow / white) */
:root {
  --bg0: #06040c;
  --bg1: #0c0814;
  --bg2: #ffffff;
  /* Solid cream for editor chrome — glass over the sun made rails/stage unreadable */
  --panel: #fffdf9;
  --panel-soft: #fff8f1;
  --stroke: rgba(124, 45, 18, 0.14);
  --stroke-hi: rgba(234, 88, 12, 0.5);
  --text: #1c1917;
  --muted: #6b625a;
  --accent: #ea580c;
  --accent2: #dc2626;
  --warn: #ca8a04;
  --danger: #b91c1c;
  --ok: #c2410c;
  --yellow: #eab308;
  --orange: #f97316;
  --red: #ef4444;
  --radius: 0.85rem;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --top: 3.25rem;
  /* Head + scrub ruler + 5 lanes with readable clip labels (user can drag taller/shorter) */
  --bottom: 16.75rem;
  --rail: 16.5rem;
  --props: 17.5rem;
  --shadow: 0 10px 28px rgba(20, 8, 4, 0.18);
  --shadow-lg: 0 18px 44px rgba(20, 8, 4, 0.22);
  --stage-bg: #0c0a09;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  height: 100%;
  color: var(--text);
  /* Deep space base; sun canvas paints stars + solar fill light on top */
  background: #06040c;
  font-family: var(--font);
  overflow: hidden;
  /* App chrome: no accidental text selection while dragging tools / scrubbing */
  user-select: none;
  -webkit-user-select: none;
}
/* Allow typing/selection only where it matters */
input,
textarea,
select,
[contenteditable="true"],
.allow-select {
  user-select: text;
  -webkit-user-select: text;
}
img,
canvas,
video,
svg {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

button, input, select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  border: 1px solid var(--stroke);
  background: #ffffff;
  border-radius: 0.55rem;
  padding: 0.4rem 0.7rem;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(124, 45, 18, 0.05);
  transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
}
button:hover:not(:disabled) {
  border-color: var(--stroke-hi);
  background: #fff7ed;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.12);
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button.primary {
  background: linear-gradient(135deg, #fbbf24, #f97316 55%, #ef4444);
  border-color: transparent;
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(69, 26, 3, 0.2);
}
button.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #f59e0b, #ea580c 55%, #dc2626);
  border-color: transparent;
  color: #fff;
}
button.danger {
  color: var(--danger);
  border-color: rgba(185, 28, 28, 0.3);
  background: #fef2f2;
}
button.danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.settings-project-danger {
  margin-top: 1.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--stroke);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: stretch;
}
.settings-subhead {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
#settings-delete-project {
  align-self: flex-start;
}
button.ghost {
  background: transparent;
  box-shadow: none;
}
input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
input[type="number"], input[type="text"] {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border-radius: 0.5rem;
  border: 1px solid var(--stroke);
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(124, 45, 18, 0.04);
}

/* Top bar — same dark stone as FAQ/contact pill */
.app-top {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--top);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.85rem;
  border-bottom: 1px solid rgba(251, 191, 36, 0.18);
  background: rgba(28, 25, 23, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  color: #e7e5e4;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #fafaf9;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-size: 0.92rem;
  padding: 0.28rem 0.65rem 0.28rem 0.3rem;
  border-radius: 0.65rem;
  border: 1px solid transparent;
  background: transparent;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    color 0.14s ease;
}
.brand:hover,
.brand:focus-visible {
  color: #fef3c7;
  background: rgba(120, 53, 15, 0.4);
  border-color: rgba(251, 191, 36, 0.32);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  outline: none;
}
.brand:active {
  background: rgba(120, 53, 15, 0.55);
}
.brand-logo {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 0.42rem;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  object-fit: cover;
  background: #1c1917;
}
/*
 * Brand slot exclusivity:
 * - empty: Capstar link only
 * - has-media: StarFlux brand button only (same visual slot as Capstar)
 */
body.has-media .brand-capstar {
  display: none !important;
}
body.is-empty .brand-starflux {
  display: none !important;
}
/* StarFlux brand button = same slot as Capstar link (not a ghost sibling) */
button.brand.brand-starflux {
  appearance: none;
  cursor: pointer;
  font: inherit;
  margin: 0;
  /* beat generic .app-top button styles so it still looks like the Capstar brand */
  background: transparent !important;
  border-color: transparent !important;
  color: #fafaf9 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  z-index: 2;
  position: relative;
}
button.brand.brand-starflux:hover,
button.brand.brand-starflux:focus-visible {
  color: #fef3c7 !important;
  background: rgba(120, 53, 15, 0.4) !important;
  border-color: rgba(251, 191, 36, 0.32) !important;
}
.app-top .spacer { flex: 1; min-width: 0.5rem; }
/* Undo / redo — left cluster, next to project name */
.app-top .top-history {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  margin-left: -0.15rem;
}
.app-top .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
  border-radius: 0.5rem;
  font-weight: 600;
}
.app-top .icon-btn span {
  display: block;
  transform: translateY(-0.05em);
  pointer-events: none;
}
.app-top .icon-btn:disabled {
  opacity: 0.35;
}
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: #e7e5e4;
  max-width: 14rem;
  flex-shrink: 0;
}
.user-chip img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  object-fit: cover;
  background: #292524;
  border: 1px solid rgba(251, 191, 36, 0.2);
  flex-shrink: 0;
}
.user-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e7e5e4;
  font-weight: 600;
}
.user-chip a.user-chip-login {
  color: #fde68a;
  font-weight: 700;
  text-decoration: none;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(120, 53, 15, 0.35);
}
.user-chip a.user-chip-login:hover {
  color: #fffbeb;
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(154, 52, 18, 0.5);
}
/* Ensure chip is visible on empty lobby even if [hidden] races with JS */
body.is-empty #user-chip:not([hidden]) {
  display: inline-flex !important;
}
/* Once media is loaded, identity chrome is noise — force hide */
body.has-media .user-chip,
body.has-media .empty-only-top {
  display: none !important;
}
body.is-empty .empty-only-top:not([hidden]) {
  display: inline-flex;
}
body.is-empty .top-more-wrap {
  display: none !important;
}
.top-more-wrap {
  position: relative;
  display: inline-flex;
}
.top-more-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 10.5rem;
  max-height: min(70vh, 28rem);
  overflow: auto;
  padding: 0.4rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: rgba(28, 25, 23, 0.98);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.top-more-panel[hidden] {
  display: none !important;
}
.top-more-panel button {
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  font-size: 0.8rem;
  padding: 0.4rem 0.55rem;
}
.top-more-sep {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0.25rem 0;
}
.rail-more {
  margin: 0 0 0.55rem;
  border: 1px solid var(--stroke);
  border-radius: 0.55rem;
  background: var(--panel-soft);
  color: var(--text);
  padding: 0.15rem 0.45rem 0.4rem;
}
.rail-more > summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--muted);
  padding: 0.35rem 0.15rem;
  list-style: none;
}
.rail-more .lib-fav-label {
  color: var(--muted);
}
.rail-more > summary::-webkit-details-marker { display: none; }
.rail-more > summary::before {
  content: "▸ ";
  color: var(--accent);
}
.rail-more[open] > summary::before { content: "▾ "; }
.rail-more .import-btns {
  margin-top: 0.25rem;
}
.hint-top {
  font-size: 0.72rem;
  color: #a8a29e;
  max-width: 22rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-top button {
  border-color: rgba(251, 191, 36, 0.22);
  background: rgba(41, 37, 36, 0.9);
  color: #e7e5e4;
  box-shadow: none;
}
.app-top button:hover:not(:disabled) {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(68, 64, 60, 0.95);
  color: #fef3c7;
}
.app-top button.ghost {
  background: transparent;
  border-color: transparent;
  color: #d6d3d1;
}
.app-top button.ghost:hover:not(:disabled) {
  background: rgba(120, 53, 15, 0.35);
  color: #fef3c7;
}
.app-top button.primary {
  background: linear-gradient(135deg, #fbbf24, #f97316 55%, #ef4444);
  border-color: transparent;
  color: #fff;
}
/* Workspace: Timeline (stitch) — light blue, left of Export */
.app-top button.workspace-timeline-btn {
  background: linear-gradient(135deg, #7dd3fc, #38bdf8 50%, #0ea5e9);
  border: 1px solid rgba(14, 165, 233, 0.45);
  color: #0c4a6e;
  font-weight: 750;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
.app-top button.workspace-timeline-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #bae6fd, #7dd3fc 45%, #38bdf8);
  border-color: rgba(14, 165, 233, 0.65);
  color: #075985;
}
.app-top button.workspace-timeline-btn.is-on {
  background: linear-gradient(135deg, #0ea5e9, #0284c7 60%, #0369a1);
  border-color: rgba(7, 89, 133, 0.5);
  color: #f0f9ff;
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.35);
}
body:not(.theme-dark) .app-top button.workspace-timeline-btn {
  color: #0c4a6e;
}
body:not(.theme-dark) .app-top button.workspace-timeline-btn.is-on {
  color: #f0f9ff;
}
.app-top button.workspace-texture-btn {
  background: linear-gradient(135deg, #fde68a, #fbbf24 50%, #f59e0b);
  border: 1px solid rgba(217, 119, 6, 0.45);
  color: #451a03;
  font-weight: 750;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset;
}
.app-top button.workspace-texture-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #fef3c7, #fde68a 45%, #fbbf24);
  border-color: rgba(217, 119, 6, 0.7);
  color: #431407;
}
.app-top button.workspace-texture-btn.is-on {
  background: linear-gradient(135deg, #f59e0b, #d97706 60%, #b45309);
  border-color: rgba(146, 64, 14, 0.55);
  color: #fffbeb;
  box-shadow: 0 0 0 1px rgba(253, 230, 138, 0.4);
}
body:not(.theme-dark) .app-top button.workspace-texture-btn {
  color: #451a03;
}
body:not(.theme-dark) .app-top button.workspace-texture-btn.is-on {
  color: #fffbeb;
}
/* Send to Timeline removed from chrome (drag media → tracks instead) */
.app-top button.send-to-timeline-btn {
  display: none !important;
}
.stage-toolbar .transport .ghost {
  font-size: 0.78rem;
  padding: 0.35rem 0.55rem;
}
.scrub-wrap {
  position: relative;
  flex: 1 1 8rem;
  min-width: 6rem;
  display: flex;
  align-items: center;
}
.scrub-wrap input[type="range"] {
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 1;
}
/* After click, browsers leave a white focus ring and keep the input focused.
   We drive updates via setScrubbing, not focus — kill the ring. */
.scrub-wrap input[type="range"]:focus,
.scrub-wrap input[type="range"]:focus-visible,
#scrub:focus,
#scrub:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
.scrub-marks {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  pointer-events: none;
  z-index: 0;
}
.scrub-tick {
  position: absolute;
  top: -7px;
  width: 2px;
  height: 14px;
  margin-left: -1px;
  border-radius: 1px;
  background: rgba(234, 88, 12, 0.85);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.scrub-tick-in { background: #16a34a; }
.scrub-tick-out { background: #dc2626; }
body.is-audio-only .scrub-tick-in,
body.is-audio-only .scrub-tick-out,
body.has-active-audio.workspace-studio .scrub-tick-in,
body.has-active-audio.workspace-studio .scrub-tick-out,
body.audio-zone .scrub-tick-in,
body.audio-zone .scrub-tick-out {
  display: none !important;
}
.scrub-tick-edge { background: rgba(120, 53, 15, 0.45); height: 10px; top: -5px; }
.speed-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0 0.55rem;
}
.speed-presets button {
  flex: 1 1 auto;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.28rem 0.35rem;
  min-width: 2.4rem;
}
.timeline-head .ghost.is-on {
  border-color: rgba(234, 88, 12, 0.55);
  background: #ffedd5;
  color: #9a3412;
}
.tl-zoom-val {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  min-width: 3.5rem;
}
.clip {
  max-width: none;
}

/* ── Workspace shell: Studio demotes dock; Timeline owns multi-track ──
   Applies to all media kinds (stills / audio / video / mixed).
   Image/audio blocks below refine stage transport & tool rails. */
body.workspace-studio:not(.is-empty),
body.workspace-studio {
  --bottom: 0 !important;
}
body.workspace-studio:not(.is-empty) .timeline,
body.workspace-studio:not(.is-empty) .timeline-resizer,
body.workspace-studio:not(.is-empty) #timeline,
body.workspace-studio:not(.is-empty) #timeline-resizer,
body.workspace-studio .timeline,
body.workspace-studio .timeline-resizer,
body.workspace-studio #timeline,
body.workspace-studio #timeline-resizer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
}
body.workspace-studio:not(.is-empty) .app-body,
body.workspace-studio .app-body,
body.workspace-studio #app-body {
  bottom: 0 !important;
  /* Undo Timeline full-height media rail offset (rail is in-grid again) */
  left: 0 !important;
  right: 0 !important;
  grid-template-columns: var(--rail) 5px minmax(0, 1fr) 5px var(--props) !important;
}
/* Studio + collapsed library: must beat the rule above (!important was leaving a ghost column) */
body.workspace-studio.rail-collapsed .app-body,
body.workspace-studio.rail-collapsed #app-body {
  grid-template-columns: 0 0 minmax(0, 1fr) 5px var(--props) !important;
}
body.workspace-studio.props-collapsed .app-body,
body.workspace-studio.props-collapsed #app-body {
  grid-template-columns: var(--rail) 5px minmax(0, 1fr) 0 0 !important;
}
body.workspace-studio.rail-collapsed.props-collapsed .app-body,
body.workspace-studio.rail-collapsed.props-collapsed #app-body {
  grid-template-columns: 0 0 minmax(0, 1fr) 0 0 !important;
}

/*
 * Image / Audio Studio tool rails hug the real left edge of the screen.
 * They used to sit inside stage-wrap after the media library grid column, so a
 * collapsed/hidden media panel (or the studio !important grid) still pushed
 * tools far to the right. Fixed left:0 + shift app-body by rail width.
 */
body.workspace-studio {
  --studio-tools: 2.75rem;
}
/* Only shift layout when a tool rail is actually visible */
body.workspace-studio:has(#image-tool-rail:not([hidden])) .app-body,
body.workspace-studio:has(#image-tool-rail:not([hidden])) #app-body,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) .app-body,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) #app-body {
  left: var(--studio-tools, 2.75rem) !important;
}
body.workspace-studio #image-tool-rail:not([hidden]),
body.workspace-studio #audio-tool-rail:not([hidden]) {
  position: fixed !important;
  top: var(--top) !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--studio-tools, 2.75rem) !important;
  min-width: var(--studio-tools, 2.75rem) !important;
  max-width: var(--studio-tools, 2.75rem) !important;
  height: auto !important;
  z-index: 38 !important;
  margin: 0 !important;
  order: unset !important;
  flex: none !important;
  align-self: auto !important;
}
/* Fallback without :has() — image/audio studio modes always show a tool rail */
@supports not selector(:has(*)) {
  body.workspace-studio.is-image-only .app-body,
  body.workspace-studio.is-audio-only .app-body,
  body.workspace-studio.has-active-audio .app-body,
  body.workspace-studio.has-active-image .app-body {
    left: var(--studio-tools, 2.75rem) !important;
  }
}
body.workspace-timeline:not(.is-empty) .timeline,
body.workspace-timeline:not(.is-empty) #timeline {
  display: flex;
  visibility: visible;
  pointer-events: auto;
}
body.workspace-timeline:not(.is-empty) .timeline-resizer,
body.workspace-timeline:not(.is-empty) #timeline-resizer {
  display: block;
  visibility: visible;
  pointer-events: auto;
}
/* Room for V1–V3 + A; full-height media rail */
body.workspace-timeline:not(.is-empty) {
  --bottom: 20rem;
  --rail-gap: 6px;
  /* Usable media width (never collapse to 0) */
  --tl-media: max(12.5rem, var(--rail, 16.5rem));
}
/*
 * Timeline media rail: fixed full-height column under the top bar.
 * Theme-aware colors (do NOT force light --panel — that blanks dark mode).
 */
body.workspace-timeline:not(.is-empty) .app-body {
  left: calc(var(--tl-media) + var(--rail-gap, 6px));
  right: 0;
  grid-template-columns: minmax(0, 1fr) 5px var(--props);
  /* Allow fixed rail to paint above the timeline dock on the left */
  z-index: 36;
}
body.workspace-timeline:not(.is-empty) .app-body > .rail {
  position: fixed;
  top: var(--top);
  left: 0;
  right: auto;
  bottom: 0;
  width: var(--tl-media);
  min-width: 12.5rem;
  max-width: min(30rem, 42vw);
  height: calc(100vh - var(--top));
  z-index: 2;
  visibility: visible;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid var(--stroke);
  padding: 0.75rem;
  margin: 0;
  /* Light mode cream panel; dark mode overridden below */
  background: #fffdf9;
  color: #1c1917;
  box-shadow: 4px 0 18px rgba(20, 8, 4, 0.1);
  grid-column: unset;
  grid-row: unset;
  justify-self: unset;
  align-self: unset;
}
/* Dark theme: stone panel + light text (matches rest of editor) */
body.theme-dark.workspace-timeline:not(.is-empty) .app-body > .rail {
  background: #1c1917;
  color: #e7e5e4;
  border-right-color: rgba(251, 191, 36, 0.14);
  box-shadow: 4px 0 22px rgba(0, 0, 0, 0.45);
}
body.workspace-timeline:not(.is-empty) .app-body > .rail-resizer {
  position: fixed;
  top: var(--top);
  left: var(--tl-media);
  right: auto;
  bottom: 0;
  width: var(--rail-gap, 6px);
  min-width: var(--rail-gap, 6px);
  max-width: var(--rail-gap, 6px);
  height: calc(100vh - var(--top));
  z-index: 3;
  visibility: visible;
  pointer-events: auto;
  display: block;
  cursor: col-resize;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(234, 88, 12, 0.12);
  grid-column: unset;
  grid-row: unset;
  overflow: visible;
  align-self: unset;
}
body.theme-dark.workspace-timeline:not(.is-empty) .app-body > .rail-resizer {
  background: rgba(251, 191, 36, 0.1);
}
body.workspace-timeline:not(.is-empty) .app-body > .rail-resizer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 2.75rem;
  border-radius: 99px;
  background: rgba(120, 53, 15, 0.45);
  pointer-events: none;
}
body.theme-dark.workspace-timeline:not(.is-empty) .app-body > .rail-resizer::after {
  background: rgba(251, 191, 36, 0.45);
}
body.workspace-timeline:not(.is-empty) .app-body > .rail-resizer:hover,
body.is-resizing-rail.workspace-timeline .app-body > .rail-resizer {
  background: rgba(234, 88, 12, 0.28);
}
body.workspace-timeline:not(.is-empty) .app-body > .rail-resizer:hover::after,
body.is-resizing-rail.workspace-timeline .app-body > .rail-resizer::after {
  background: #ea580c;
  height: 3.5rem;
}
/* Remap stage / props (rail is fixed, not a grid track) */
body.workspace-timeline:not(.is-empty) .app-body > .stage-wrap {
  grid-column: 1;
}
body.workspace-timeline:not(.is-empty) .app-body > .props-resizer {
  grid-column: 2;
}
body.workspace-timeline:not(.is-empty) .app-body > .props {
  grid-column: 3;
}
/* Dock starts after media column */
body.workspace-timeline:not(.is-empty) .timeline,
body.workspace-timeline:not(.is-empty) #timeline,
body.workspace-timeline:not(.is-empty) .timeline-resizer,
body.workspace-timeline:not(.is-empty) #timeline-resizer {
  left: calc(var(--tl-media) + var(--rail-gap, 6px));
  z-index: 35;
}
body.workspace-timeline:not(.is-empty) .timeline-media {
  display: none !important;
}
body.workspace-timeline:not(.is-empty) .timeline-body {
  display: block;
}
body.workspace-timeline:not(.is-empty) .timeline-main {
  height: 100%;
  min-height: 0;
}
/* Rail chrome */
body.workspace-timeline:not(.is-empty) .app-body > .rail > h2 {
  flex: 0 0 auto;
  margin: 0 0 0.5rem;
  color: inherit;
}
body.workspace-timeline:not(.is-empty) .app-body > .rail .import-btns,
body.workspace-timeline:not(.is-empty) .app-body > .rail .lib-filter,
body.workspace-timeline:not(.is-empty) .app-body > .rail .rail-more {
  flex: 0 0 auto;
}
body.workspace-timeline:not(.is-empty) .app-body > .rail .media-list {
  flex: 1 1 auto;
  min-height: 8rem;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: transparent;
}
body.workspace-timeline:not(.is-empty) .app-body > .rail .media-item {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  background: #fff7ed;
  color: #1c1917;
  border: 1px solid rgba(124, 45, 18, 0.12);
}
body.workspace-timeline:not(.is-empty) .app-body > .rail .media-item .name,
body.workspace-timeline:not(.is-empty) .app-body > .rail .media-meta .name {
  color: #1c1917;
}
body.workspace-timeline:not(.is-empty) .app-body > .rail .media-meta .sub {
  color: #6b625a;
}
body.theme-dark.workspace-timeline:not(.is-empty) .app-body > .rail .media-item {
  background: #292524;
  color: #e7e5e4;
  border-color: rgba(251, 191, 36, 0.12);
}
body.theme-dark.workspace-timeline:not(.is-empty) .app-body > .rail .media-item .name,
body.theme-dark.workspace-timeline:not(.is-empty) .app-body > .rail .media-meta .name {
  color: #fafaf9;
}
body.theme-dark.workspace-timeline:not(.is-empty) .app-body > .rail .media-meta .sub {
  color: #a8a29e;
}
body.theme-dark.workspace-timeline:not(.is-empty) .app-body > .rail .media-item.is-active {
  background: #431407;
  border-color: rgba(249, 115, 22, 0.55);
}
body.workspace-timeline:not(.is-empty) .app-body > .rail .empty-hint {
  color: #6b625a;
}
body.theme-dark.workspace-timeline:not(.is-empty) .app-body > .rail .empty-hint {
  color: #a8a29e;
}
body.workspace-timeline:not(.is-empty) .app-body > .rail .trash-panel {
  flex: 0 0 auto;
  max-height: 28%;
  overflow: auto;
}
/* Keep library open in Timeline even if rail was collapsed in Studio */
body.workspace-timeline.rail-collapsed:not(.is-empty) .app-body > .rail {
  display: flex !important;
}
body.workspace-timeline.rail-collapsed:not(.is-empty) .app-body > .rail-resizer {
  display: block !important;
}
body.workspace-timeline.rail-collapsed:not(.is-empty) {
  --tl-media: 16.5rem;
}
body.workspace-timeline.rail-collapsed:not(.is-empty) .app-body {
  left: calc(var(--tl-media) + var(--rail-gap, 6px));
  grid-template-columns: minmax(0, 1fr) 5px var(--props);
}
body.workspace-timeline.rail-collapsed:not(.is-empty) .timeline,
body.workspace-timeline.rail-collapsed:not(.is-empty) #timeline,
body.workspace-timeline.rail-collapsed:not(.is-empty) .timeline-resizer,
body.workspace-timeline.rail-collapsed:not(.is-empty) #timeline-resizer {
  left: calc(var(--tl-media) + var(--rail-gap, 6px));
}

/* Layout
   Columns (must match child grid-column):
   1 rail | 2 rail-resizer | 3 stage | 4 props-resizer | 5 props
*/
.app-body {
  position: fixed;
  top: var(--top);
  left: 0;
  right: 0;
  bottom: var(--bottom);
  z-index: 20;
  display: grid;
  grid-template-columns: var(--rail) 5px minmax(0, 1fr) 5px var(--props);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  /* Opaque shell so the animated sun never shows through the editor */
  background: var(--panel-soft);
  overflow: hidden;
}
/* Explicit placement so a wrong DOM order cannot steal the stage again */
.app-body > .rail {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
}
.app-body > .rail-resizer {
  grid-column: 2;
  grid-row: 1;
}
.app-body > .stage-wrap {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
}
.app-body > .props-resizer {
  grid-column: 4;
  grid-row: 1;
}
.app-body > .props {
  grid-column: 5;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
}

.rail, .props {
  background: var(--panel);
  border-right: 1px solid var(--stroke);
  overflow: auto;
  padding: 0.75rem;
  min-width: 0;
}
.props {
  border-right: none;
  border-left: 1px solid var(--stroke);
}
.rail-resizer, .props-resizer {
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 5;
  touch-action: none;
  /* Stay inside the 5px grid track — never expand into stage */
  width: 100%;
  min-width: 0;
  max-width: 5px;
  overflow: hidden;
  align-self: stretch;
}
.rail-resizer:hover, .props-resizer:hover,
body.is-resizing-rail .rail-resizer,
body.is-resizing-props .props-resizer {
  background: rgba(234, 88, 12, 0.45);
}
body.is-resizing-rail, body.is-resizing-props {
  cursor: col-resize;
  user-select: none;
}
body.rail-collapsed {
  --rail: 0px;
}
body.rail-collapsed .rail,
body.rail-collapsed .rail-resizer {
  display: none;
}
body.rail-collapsed {
  grid-template-columns: 0 0 minmax(0, 1fr) 5px var(--props);
}
/* (Timeline rail-collapse overrides live above with --tl-media — keep library visible) */
body.props-collapsed {
  --props: 0px;
}
body.props-collapsed .props,
body.props-collapsed .props-resizer {
  display: none;
}
body.rail-collapsed.props-collapsed .app-body,
body.props-collapsed .app-body {
  /* keep grid stable via body classes on app-body instead — applied on body */
}
body.rail-collapsed .app-body {
  grid-template-columns: 0 0 minmax(0, 1fr) 5px var(--props);
}
body.props-collapsed .app-body {
  grid-template-columns: var(--rail) 5px minmax(0, 1fr) 0 0;
}
body.rail-collapsed.props-collapsed .app-body {
  grid-template-columns: 0 0 minmax(0, 1fr) 0 0;
}
.project-name {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0.2rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--muted);
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
  line-height: 1.25;
}
.project-name:hover {
  color: var(--text, #f5f5f4);
  border-color: var(--stroke, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.04);
}
.project-name:focus-visible {
  outline: 2px solid rgba(251, 146, 60, 0.55);
  outline-offset: 1px;
}
.projects-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 16rem;
  overflow: auto;
}
.project-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--stroke);
  border-radius: 0.5rem;
  background: var(--panel-soft);
}
.project-row.is-active {
  border-color: var(--stroke-hi);
  box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.25);
}
.project-row .meta {
  flex: 1;
  min-width: 0;
}
.project-row .meta .name {
  font-weight: 650;
  font-size: 0.85rem;
}
.project-row .meta .sub {
  font-size: 0.7rem;
  color: var(--muted);
}
.project-row button {
  font-size: 0.72rem;
  padding: 0.25rem 0.45rem;
}
.error-sheet h2 {
  color: var(--danger);
}
.media-item.is-probing .media-thumb,
.media-skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #f5e6d8 0%, #fff7ed 45%, #f5e6d8 100%);
  background-size: 200% 100%;
  animation: sf-shimmer 1.1s ease-in-out infinite;
  min-height: 2.4rem;
  border-radius: 0.35rem;
}
@keyframes sf-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
body.theme-dark .media-item.is-probing .media-thumb,
body.theme-dark .media-skeleton {
  background: linear-gradient(90deg, #292524 0%, #44403c 45%, #292524 100%);
  background-size: 200% 100%;
}
.codec-probe-ok {
  color: var(--ok);
  font-weight: 650;
}
.codec-probe-bad {
  color: var(--danger);
  font-weight: 650;
}
/* Stacked rows: each label sits next to its own track bar */
.track-lanes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0 0.3rem 0.15rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.track-row {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.2rem;
  align-items: stretch;
  min-height: 2.35rem;
  max-height: 2.55rem;
  flex: 0 0 auto;
}
/* Playhead scrub ruler sits above A — shorter than media lanes */
.track-row-ruler {
  min-height: 1.15rem;
  max-height: 1.25rem;
  height: 1.2rem;
}
.track-row-ruler .lane-label-ruler {
  min-height: 0 !important;
  height: 100% !important;
  font-size: 0;
}
.track-row .lane-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
  min-height: 0;
  height: 100%;
}
.track-ruler {
  min-height: 1.15rem !important;
  max-height: 1.25rem !important;
  height: 1.2rem !important;
  cursor: ew-resize;
  touch-action: none;
  border-radius: 0.3rem;
  border: 1px solid var(--stroke);
  background:
    linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.track-ruler:hover {
  border-color: rgba(234, 88, 12, 0.45);
  background: linear-gradient(180deg, #ffedd5 0%, #fed7aa 100%);
}
body.is-dragging-playhead .track-ruler {
  border-color: rgba(220, 38, 38, 0.55);
  background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
}
.track-ruler-inner {
  position: relative;
  height: 100%;
  min-height: 100%;
}
/* Time ticks on the scrub bar */
.tl-ruler-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(120, 53, 15, 0.22);
  pointer-events: none;
  box-sizing: border-box;
}
.tl-ruler-tick.is-major {
  background: rgba(120, 53, 15, 0.4);
  width: 1px;
}
.tl-ruler-tick.is-major::after {
  content: attr(data-label);
  position: absolute;
  left: 3px;
  top: 1px;
  font-size: 0.58rem;
  line-height: 1;
  font-family: var(--mono);
  font-weight: 650;
  color: rgba(68, 64, 60, 0.75);
  white-space: nowrap;
  pointer-events: none;
}
body.theme-dark .track-ruler {
  background: linear-gradient(180deg, #292524 0%, #1c1917 100%);
  border-color: rgba(168, 162, 158, 0.25);
}
body.theme-dark .track-ruler:hover {
  border-color: rgba(251, 191, 36, 0.4);
  background: linear-gradient(180deg, #3f3a36 0%, #292524 100%);
}
body.theme-dark body.is-dragging-playhead .track-ruler,
body.theme-dark.is-dragging-playhead .track-ruler {
  border-color: rgba(248, 113, 113, 0.55);
  background: linear-gradient(180deg, #450a0a 0%, #7f1d1d 40%, #292524 100%);
}
body.theme-dark .tl-ruler-tick {
  background: rgba(214, 211, 209, 0.18);
}
body.theme-dark .tl-ruler-tick.is-major {
  background: rgba(251, 191, 36, 0.45);
}
body.theme-dark .tl-ruler-tick.is-major::after {
  color: rgba(231, 229, 228, 0.75);
}
/* Playhead spans track column only (past labels) */
.tl-playhead-layer {
  position: absolute;
  left: calc(1.35rem + 0.2rem);
  right: 0.3rem;
  top: 0;
  bottom: 0.15rem;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}
.tl-playhead-layer .playhead {
  pointer-events: auto;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
}
/* Legacy alias */
.track-lane {
  display: contents;
}
.track-lane.is-drop-target {
  box-shadow: none;
  background: transparent;
}
/* Clip-to-track reorder: subtle ring on the track strip only */
.track.is-clip-drop {
  outline: 1.5px solid rgba(251, 191, 36, 0.55);
  outline-offset: -1px;
}
/* Library media hover/drop — quiet, not a loud dashed frame */
.track.is-media-drop {
  outline: 2px solid rgba(251, 191, 36, 0.65);
  outline-offset: -2px;
  background-image: linear-gradient(
    180deg,
    rgba(251, 191, 36, 0.08),
    rgba(251, 191, 36, 0.03)
  );
}
body.theme-dark .track.is-media-drop {
  background-image: linear-gradient(
    180deg,
    rgba(251, 191, 36, 0.1),
    rgba(251, 191, 36, 0.04)
  );
}
/* Exact placement slot while dragging (follows drop time) */
.clip-drop-marker {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  border-radius: 0.5rem;
  border: 2px dashed rgba(251, 191, 36, 0.9);
  background: rgba(251, 191, 36, 0.16);
  box-shadow: none;
  box-sizing: border-box;
  margin: 0;
}
body.theme-dark .clip-drop-marker {
  border-color: rgba(251, 191, 36, 0.85);
  background: rgba(251, 191, 36, 0.12);
}
/* Floating clip while moving between tracks (above timeline dock z-index 35) */
#clip-drag-ghost-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  pointer-events: none !important;
  overflow: visible !important;
}
.clip-drag-ghost {
  pointer-events: none !important;
  z-index: 10050 !important;
  cursor: grabbing !important;
  position: fixed !important;
}
body.is-dragging-clip {
  cursor: grabbing !important;
  user-select: none !important;
}
body.is-dragging-clip .clip.is-dragging {
  /* Source clip stays in layout for hit geometry but is invisible */
  opacity: 0 !important;
}
/* Keep ALL preview/lane audio elements out of layout (never show native chrome).
   Playback still works — only visual chrome is suppressed. */
#preview-audio-a2,
#preview-audio-lane-b,
#preview-audio-lane-c,
#preview-audio-bed,
#preview-audio,
audio.sf-preview-audio-hidden,
body.is-dragging-clip audio {
  position: fixed !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  max-width: 1px !important;
  max-height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.lane-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Same readable height for every lane (name + duration) */
.track-row > .track {
  min-height: 2.35rem;
  max-height: 2.55rem;
  height: 2.45rem;
  flex: 0 0 auto;
}
.track-overlay .track-inner,
.track-lane-b .track-inner,
.track-lane-c .track-inner,
.track-a2 .track-inner {
  min-height: 100%;
  height: 100%;
  background: rgba(234, 88, 12, 0.04);
}
/* Subtle lane bed tint only (not clip colors) */
.track-lane-b .track-inner,
.track[data-lane="b"] .track-inner {
  background: rgba(59, 130, 246, 0.06);
}
.track-lane-c .track-inner,
.track[data-lane="c"] .track-inner {
  background: rgba(168, 85, 247, 0.07);
}
/* Lane classes must NOT recolor media — audio stays green everywhere */
.clip.is-lane-b:not([data-kind="audio"]),
.clip.is-lane-c:not([data-kind="audio"]) {
  /* keep default video/image look; optional thin accent border only */
}
.clip.is-lane-b:not([data-kind="audio"]) {
  border-color: rgba(59, 130, 246, 0.4);
}
.clip.is-lane-c:not([data-kind="audio"]) {
  border-color: rgba(168, 85, 247, 0.4);
}
body.theme-dark .clip.is-lane-b:not([data-kind="audio"]) {
  border-color: rgba(96, 165, 250, 0.4);
}
body.theme-dark .clip.is-lane-c:not([data-kind="audio"]) {
  border-color: rgba(192, 132, 252, 0.4);
}
.clip.is-overlay {
  border-style: dashed;
  opacity: 0.95;
}
.overlay-pip {
  position: absolute;
  left: auto;
  top: auto;
  right: 6%;
  bottom: 10%;
  width: 28%;
  height: 32%;
  z-index: 7;
  border: 2px solid rgba(251, 191, 36, 0.85);
  border-radius: 0.35rem;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
/* Never show an empty gold PiP shell (no media / hidden) */
.overlay-pip[hidden],
#overlay-video[hidden],
#overlay-image[hidden] {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
}
.clip.is-music-bed {
  border-color: rgba(34, 197, 94, 0.55);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.12), transparent);
}
.clip.is-bypass {
  outline: 1px dashed rgba(251, 191, 36, 0.7);
  outline-offset: -2px;
}
.clip.is-bypass .clip-sub {
  color: rgba(253, 230, 138, 0.95);
}
.track-a2 .track-inner {
  min-height: 2.4rem;
  background: rgba(34, 197, 94, 0.05);
}
.clip.is-a2 {
  border-style: dotted;
  border-color: rgba(34, 197, 94, 0.65);
}
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(12, 8, 6, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1.5rem;
}
.tour-overlay[hidden] { display: none !important; }
.tour-card {
  width: min(28rem, 100%);
  background: var(--panel);
  border: 1px solid var(--stroke-hi);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1rem 1.1rem 1.1rem;
}
.tour-card h3 {
  margin: 0.25rem 0 0.4rem;
  font-size: 1.05rem;
}
.tour-step {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.tour-target-flash {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.25);
}
.export-queue-hud {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom) + 0.75rem);
  transform: translateX(-50%);
  z-index: 55;
  display: flex;
  gap: 0.55rem;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 0.35rem 0.65rem 0.35rem 0.85rem;
  box-shadow: var(--shadow);
  font-size: 0.8rem;
  font-weight: 650;
}
.export-queue-hud[hidden] { display: none !important; }
/* ── Audio-only / audio-editing chrome ───────────────────────────────
   Pure audio library OR Studio with an active audio clip (has-active-audio).
   Hide video-only chrome (look/chroma/captions/stickers…). Keep audio tools. */
body.is-audio-only .video-only,
body.has-active-audio .video-only,
body.is-audio-only #props-look-grade,
body.is-audio-only #props-chroma,
body.is-audio-only #props-captions,
body.is-audio-only #props-stickers,
body.is-audio-only #props-ab-wipe,
body.has-active-audio #props-look-grade,
body.has-active-audio #props-chroma,
body.has-active-audio #props-captions,
body.has-active-audio #props-stickers,
body.has-active-audio #props-ab-wipe,
body.has-active-audio #props-transform,
body.has-active-audio #props-crop,
body.has-active-audio #props-image,
body.has-active-audio #props-image-edit {
  display: none !important;
}
/* Newbie pure-audio hides most pro chrome — but keep EQ / gain / gate / pitch */
body.is-audio-only .pro-only {
  display: none !important;
}
body.is-audio-only #props-eq,
body.is-audio-only #props-eq.pro-only,
body.is-audio-only #props-gain,
body.is-audio-only #props-gain.pro-only,
body.is-audio-only #props-gate,
body.is-audio-only #props-gate.pro-only,
body.is-audio-only #props-pitch-field,
body.has-active-audio #props-eq,
body.has-active-audio #props-eq.pro-only,
body.has-active-audio #props-gain,
body.has-active-audio #props-gain.pro-only {
  display: block !important;
}
body.is-audio-only #props-eq[hidden],
body.is-audio-only #props-gain[hidden],
body.has-active-audio #props-eq[hidden],
body.has-active-audio #props-gain[hidden] {
  display: none !important;
}
.pitch-presets {
  margin-top: 0.3rem;
}
/* Legacy overlay only — V2/V3 (b/c) are product video channels */
body.is-audio-only .track-row-legacy,
body.is-audio-only .track-row[data-lane="v2"],
body.is-audio-only .track-row[hidden] {
  display: none !important;
}
body.is-audio-only #btn-overlay-clear {
  display: none !important;
}
/* Pure audio Timeline: demote video channels, emphasize A */
body.is-audio-only.workspace-timeline .track-row-video {
  opacity: 0.4;
  pointer-events: none;
}
body.is-audio-only.workspace-timeline .track-row-audio {
  opacity: 1;
}
body.is-audio-only.workspace-timeline .track-row-audio .lane-label {
  color: #4ade80;
  font-weight: 800;
}
/* Grouped props blocks (Volume / Fades / Speed) */
.props-group {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(251, 191, 36, 0.14);
}
.props-group > .props-subhead {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(253, 230, 138, 0.72);
}
body:not(.theme-dark) .props-group {
  border-top-color: rgba(120, 53, 15, 0.12);
}
body:not(.theme-dark) .props-group > .props-subhead {
  color: #9a3412;
}
/* Export dialog (opened from top Export button) */
#export-overlay.faq-overlay.is-on {
  display: grid !important;
  z-index: 240;
}
.export-dialog {
  width: min(22rem, 100%);
}
.export-dialog .field {
  margin-top: 0.75rem;
}
.export-dialog .field label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
}
.export-dialog select {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(251, 191, 36, 0.3);
  background: rgba(28, 25, 23, 0.9);
  color: #fafaf9;
  font: inherit;
  font-size: 0.88rem;
}
body:not(.theme-dark) .export-dialog select {
  background: #fff;
  color: var(--text);
  border-color: rgba(234, 88, 12, 0.3);
}
.export-dialog-actions {
  margin-top: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.export-range-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.export-range-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.export-range-lab {
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.8;
}
.export-range-cell input[type="number"] {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(251, 191, 36, 0.3);
  background: rgba(28, 25, 23, 0.9);
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
}
body:not(.theme-dark) .export-range-cell input[type="number"] {
  background: #fff;
  border-color: rgba(234, 88, 12, 0.3);
}
.export-range-ph {
  font-size: 0.72rem !important;
  padding: 0.22rem 0.4rem !important;
  align-self: flex-start;
}
/* Dual-handle range strip (start + end stacked on one track) */
.export-range-slider-wrap {
  position: relative;
  height: 1.65rem;
  margin: 0.55rem 0 0.25rem;
  --export-range-track: rgba(251, 191, 36, 0.18);
  --export-range-sel: rgba(249, 115, 22, 0.55);
}
.export-range-slider-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: var(--export-range-track);
  pointer-events: none;
}
.export-range-slider {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.export-range-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border: none;
}
.export-range-slider::-moz-range-track {
  height: 6px;
  background: transparent;
  border: none;
}
.export-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fbbf24, #f97316);
  border: 2px solid #0c0a09;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  cursor: grab;
  margin-top: -5px;
}
.export-range-slider::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fbbf24, #f97316);
  border: 2px solid #0c0a09;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  cursor: grab;
}
.export-range-slider-start {
  z-index: 3;
}
.export-range-slider-end {
  z-index: 2;
}
.export-range-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.export-range-actions .ghost {
  font-size: 0.72rem !important;
  padding: 0.22rem 0.5rem !important;
}
.export-range-meta {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
}
/* Single-clip export still uses Start/End — do not dim heavily */
.export-dialog.export-no-timeline .export-range-field {
  opacity: 1;
}
/* Still-image export: drop timeline range, video presets, long intro */
.export-dialog.export-image-mode #export-dialog-intro {
  display: none !important;
}
.export-dialog.export-image-mode .export-range-field,
.export-dialog.export-image-mode .export-preset-field {
  display: none !important;
}
.export-dialog.export-image-mode .export-quality-field.is-png-only {
  display: none !important;
}
.export-image-size {
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: rgba(253, 230, 138, 0.95);
}
body:not(.theme-dark) .export-image-size {
  color: #9a3412;
}
.export-dialog.export-image-mode .export-image-size:not([hidden]) {
  display: block;
}
.export-dialog.export-busy .export-dialog-actions button {
  opacity: 0.55;
  pointer-events: none;
}
.export-dialog.export-busy .export-dialog-actions #btn-export-snowdrop {
  opacity: 0.85;
}
.export-account-line {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  font-weight: 650;
  color: rgba(253, 230, 138, 0.92);
}
body:not(.theme-dark) .export-account-line {
  color: #9a3412;
}
.export-account-line.is-guest {
  color: rgba(252, 165, 165, 0.95);
}
body:not(.theme-dark) .export-account-line.is-guest {
  color: #b91c1c;
}
.export-dialog-progress {
  margin-top: 0.9rem;
  padding: 0.65rem 0.7rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: rgba(28, 25, 23, 0.55);
}
body:not(.theme-dark) .export-dialog-progress {
  background: rgba(255, 247, 237, 0.95);
  border-color: rgba(234, 88, 12, 0.25);
}
.export-dialog-progress-label {
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.export-dialog-progress-bar {
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(68, 64, 60, 0.65);
  overflow: hidden;
}
body:not(.theme-dark) .export-dialog-progress-bar {
  background: rgba(231, 229, 228, 0.95);
}
.export-dialog-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  transition: width 0.15s ease-out;
}
.export-dialog-progress-error {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  font-weight: 650;
  color: #fca5a5;
}
body:not(.theme-dark) .export-dialog-progress-error {
  color: #b91c1c;
}
.export-filename-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 0.5rem;
  border: 1px solid rgba(251, 191, 36, 0.3);
  overflow: hidden;
  background: rgba(28, 25, 23, 0.9);
}
body:not(.theme-dark) .export-filename-row {
  background: #fff;
  border-color: rgba(234, 88, 12, 0.3);
}
.export-filename-row #export-filename {
  flex: 1;
  min-width: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.88rem;
  color: inherit;
}
.export-filename-ext {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 0.65rem;
  font-size: 0.82rem;
  font-weight: 750;
  font-family: var(--mono, ui-monospace, monospace);
  color: rgba(253, 230, 138, 0.9);
  background: rgba(251, 191, 36, 0.12);
  border: none;
  border-left: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 0;
  user-select: none;
  pointer-events: auto;
  cursor: pointer;
}
.export-filename-ext:hover,
.export-filename-ext:focus-visible {
  background: rgba(251, 191, 36, 0.22);
  color: #fde68a;
  outline: none;
}
body:not(.theme-dark) .export-filename-ext {
  color: #9a3412;
  background: rgba(254, 243, 199, 0.85);
  border-left-color: rgba(234, 88, 12, 0.22);
}
.speed-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0 0.15rem;
}
.speed-presets button {
  min-width: 2.6rem;
  padding: 0.28rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
}
/* Transport icons */
.stage-toolbar .transport-icon {
  min-width: 2.35rem;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: 0.55rem;
}
#btn-play.transport-icon {
  background: linear-gradient(135deg, #fbbf24, #f97316 55%, #ef4444);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
}
#btn-play.transport-icon:hover:not(:disabled) {
  filter: brightness(1.05);
}
#btn-play.transport-icon:disabled {
  opacity: 0.45;
}
#btn-stop.transport-icon {
  font-size: 0.72rem;
}
body.is-audio-only #props-crop,
body.is-audio-only #props-transform,
body.is-audio-only #props-image {
  display: none !important;
}
body.is-audio-only .stage-text-overlay,
body.is-audio-only .stage-watermark,
body.is-audio-only .stage-stickers,
body.is-audio-only .stage-burn-tc,
body.is-audio-only .stage-subtitles,
body.is-audio-only .stage-ab-wipe,
body.is-audio-only .overlay-pip,
body.is-audio-only .preview-clean {
  display: none !important;
}
/*
 * Audio zone = seamless dark surface (no cream “card” frame).
 * The white/cream ring was .stage-wrap’s default light gradient + .stage padding
 * showing around a smaller dark .stage-inner.
 */
body.is-audio-only.workspace-studio .stage-wrap,
body.is-audio-only:not(.workspace-timeline) .stage-wrap,
body.has-active-audio.workspace-studio .stage-wrap,
body.workspace-studio.is-audio-only .stage-wrap,
body.workspace-studio.has-active-audio .stage-wrap,
body.theme-dark.is-audio-only.workspace-studio .stage-wrap,
body.theme-dark.has-active-audio.workspace-studio .stage-wrap {
  background: #0c0a09 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
body.is-audio-only.workspace-studio .stage-main-col,
body.has-active-audio.workspace-studio .stage-main-col,
body.workspace-studio.is-audio-only .stage-main-col,
body.workspace-studio.has-active-audio .stage-main-col {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  background: #0c0a09 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.is-audio-only.workspace-studio .stage,
body.has-active-audio.workspace-studio .stage,
body.workspace-studio.is-audio-only .stage,
body.workspace-studio.has-active-audio .stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  /* auto — height:100% pushed the transport bar off-screen */
  height: auto !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  place-items: stretch !important;
  position: relative !important;
  overflow: hidden !important;
  background: #0c0a09 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
body.is-audio-only .stage-inner,
body.is-audio-only.workspace-studio .stage-inner,
body.has-active-audio.workspace-studio .stage-inner,
body.workspace-studio.is-audio-only .stage-inner,
body.workspace-studio.has-active-audio .stage-inner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(234, 88, 12, 0.1), transparent 65%),
    #0c0a09 !important;
  display: block !important;
  place-items: stretch !important;
  overflow: hidden !important;
  filter: none !important;
}
/* No inset ring pseudo-elements on the audio zone */
body.is-audio-only .stage-inner::before,
body.is-audio-only .stage-inner::after,
body.has-active-audio.workspace-studio .stage-inner::before,
body.has-active-audio.workspace-studio .stage-inner::after,
body.workspace-studio.has-active-audio .stage-inner::before,
body.workspace-studio.has-active-audio .stage-inner::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.is-audio-only .stage-audio-art,
body.has-active-audio.workspace-studio .stage-audio-art,
body.audio-zone .stage-audio-art {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  text-align: center;
  padding: 1.5rem 1.25rem 4.5rem;
  overflow: hidden;
  --sf-level: 0.2;
}
body.is-audio-only.workspace-studio #preview-image,
body.is-audio-only.workspace-studio #preview-video,
body.has-active-audio.workspace-studio #preview-image,
body.has-active-audio.workspace-studio #preview-video,
body.audio-zone #preview-image,
body.audio-zone #preview-video,
body.audio-zone #preview-image-clean,
body.audio-zone #preview-video-clean,
body.audio-zone .still-composite,
body.audio-zone .sf-crop-overlay,
body.audio-zone .sf-text-box-host,
body.audio-zone .image-edge-guide,
body.audio-zone .stage-text-overlay,
body.audio-zone .stage-stickers,
body.audio-zone .chroma-stage-canvas,
body.audio-zone .pixel-grid-overlay {
  pointer-events: none !important;
  z-index: 0 !important;
}
body.is-audio-only .stage-audio-art[hidden],
body.has-active-audio.workspace-studio .stage-audio-art[hidden],
body.audio-zone .stage-audio-art[hidden] {
  display: flex !important; /* still show art chrome while audio-only */
}
.stage-audio-art {
  display: none;
  --sf-level: 0.15;
}
/* Ambient background field */
.stage-audio-bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(249, 115, 22, 0.16), transparent 62%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(239, 68, 68, 0.1), transparent 55%),
    radial-gradient(ellipse 45% 35% at 85% 20%, rgba(234, 179, 8, 0.1), transparent 50%),
    linear-gradient(165deg, #1c1917 0%, #0c0a09 55%, #1a0a06 100%);
}
.stage-audio-grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(251, 191, 36, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 191, 36, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  animation: sf-audio-grid-drift 18s linear infinite;
}
@keyframes sf-audio-grid-drift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(28px, 28px); }
}
.stage-audio-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.55;
  will-change: transform;
}
.stage-audio-orb.orb-a {
  width: min(48vw, 18rem);
  height: min(48vw, 18rem);
  left: 12%;
  top: 18%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.55), transparent 68%);
  animation: sf-orb-a 9s ease-in-out infinite;
}
.stage-audio-orb.orb-b {
  width: min(40vw, 14rem);
  height: min(40vw, 14rem);
  right: 10%;
  bottom: 22%;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.4), transparent 68%);
  animation: sf-orb-b 11s ease-in-out infinite;
}
.stage-audio-orb.orb-c {
  width: min(36vw, 12rem);
  height: min(36vw, 12rem);
  left: 40%;
  top: 55%;
  background: radial-gradient(circle, rgba(234, 179, 8, 0.35), transparent 68%);
  animation: sf-orb-c 7.5s ease-in-out infinite;
}
@keyframes sf-orb-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12%, 8%) scale(1.12); }
}
@keyframes sf-orb-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-14%, -10%) scale(1.18); }
}
@keyframes sf-orb-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8%, -12%) scale(1.08); }
  66% { transform: translate(-10%, 6%) scale(0.95); }
}
/* Concentric rings */
.stage-audio-rings {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(52%, 14rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
.stage-audio-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(251, 191, 36, 0.22);
  box-shadow: 0 0 24px rgba(249, 115, 22, 0.08);
  animation: sf-audio-ring 3.2s ease-out infinite;
  opacity: 0;
}
.stage-audio-ring.r1 { animation-delay: 0s; }
.stage-audio-ring.r2 { animation-delay: 0.8s; border-color: rgba(249, 115, 22, 0.28); }
.stage-audio-ring.r3 { animation-delay: 1.6s; border-color: rgba(239, 68, 68, 0.22); }
.stage-audio-ring.r4 { animation-delay: 2.4s; border-color: rgba(234, 179, 8, 0.2); }
@keyframes sf-audio-ring {
  0% { transform: scale(0.55); opacity: 0.75; }
  70% { opacity: 0.25; }
  100% { transform: scale(1.55); opacity: 0; }
}
.stage-audio-art.is-playing .stage-audio-ring,
body.sf-audio-playing .stage-audio-ring {
  animation-duration: 1.6s;
  border-width: 2px;
  box-shadow: 0 0 32px rgba(249, 115, 22, 0.22);
}
/* Spectrum bars */
.stage-audio-bars {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.28rem;
  height: min(28vw, 7.5rem);
  width: min(70%, 18rem);
  pointer-events: none;
}
.stage-audio-bars span {
  flex: 1 1 0;
  min-width: 0.28rem;
  max-width: 0.55rem;
  height: 18%;
  border-radius: 999px;
  background: linear-gradient(180deg, #fde68a 0%, #f97316 55%, #ef4444 100%);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.35);
  opacity: 0.55;
  transform-origin: center bottom;
  animation: sf-bar-idle 1.8s ease-in-out infinite;
}
.stage-audio-bars span:nth-child(1) { animation-delay: 0s; }
.stage-audio-bars span:nth-child(2) { animation-delay: 0.08s; }
.stage-audio-bars span:nth-child(3) { animation-delay: 0.16s; }
.stage-audio-bars span:nth-child(4) { animation-delay: 0.04s; }
.stage-audio-bars span:nth-child(5) { animation-delay: 0.2s; }
.stage-audio-bars span:nth-child(6) { animation-delay: 0.12s; }
.stage-audio-bars span:nth-child(7) { animation-delay: 0.24s; }
.stage-audio-bars span:nth-child(8) { animation-delay: 0.06s; }
.stage-audio-bars span:nth-child(9) { animation-delay: 0.18s; }
.stage-audio-bars span:nth-child(10) { animation-delay: 0.1s; }
.stage-audio-bars span:nth-child(11) { animation-delay: 0.22s; }
.stage-audio-bars span:nth-child(12) { animation-delay: 0.14s; }
.stage-audio-bars span:nth-child(13) { animation-delay: 0.02s; }
.stage-audio-bars span:nth-child(14) { animation-delay: 0.26s; }
.stage-audio-bars span:nth-child(15) { animation-delay: 0.1s; }
.stage-audio-bars span:nth-child(16) { animation-delay: 0.18s; }
@keyframes sf-bar-idle {
  0%, 100% { height: 14%; opacity: 0.4; }
  50% { height: 38%; opacity: 0.7; }
}
.stage-audio-art.is-playing .stage-audio-bars span,
body.sf-audio-playing .stage-audio-bars span {
  animation-name: sf-bar-play;
  animation-duration: 0.55s;
  opacity: 0.95;
}
@keyframes sf-bar-play {
  0%, 100% { height: calc(18% + var(--sf-level) * 22%); }
  50% { height: calc(35% + var(--sf-level) * 55%); }
}
/* Center note */
.stage-audio-core {
  position: relative;
  z-index: 3;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.14), transparent 45%),
    linear-gradient(145deg, rgba(251, 146, 60, 0.35), rgba(127, 29, 29, 0.55));
  border: 1px solid rgba(253, 186, 116, 0.35);
  box-shadow:
    0 0 0 6px rgba(249, 115, 22, 0.08),
    0 12px 36px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: sf-core-breathe 3.4s ease-in-out infinite;
}
.stage-audio-art.is-playing .stage-audio-core,
body.sf-audio-playing .stage-audio-core {
  animation-duration: 1.2s;
  box-shadow:
    0 0 0 8px rgba(249, 115, 22, 0.14),
    0 0 40px rgba(249, 115, 22, 0.35),
    0 12px 36px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
@keyframes sf-core-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.stage-audio-icon {
  position: relative;
  z-index: 1;
  font-size: 1.85rem;
  line-height: 1;
  color: #ffedd5;
  text-shadow: 0 0 18px rgba(249, 115, 22, 0.65);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
.stage-audio-art.is-playing .stage-audio-icon {
  animation: sf-note-bob 0.9s ease-in-out infinite;
}
@keyframes sf-note-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-3px) rotate(4deg); }
}
/* Studio Audio: hide timeline-centric props */
body.workspace-studio.audio-zone .tl-only,
body.workspace-studio.is-audio-only .tl-only,
body.workspace-studio.has-active-audio .tl-only,
body.audio-zone .tl-only {
  display: none !important;
}
/* Prefer stage 5-band EQ; hide legacy props graph in Studio */
body.workspace-studio #props-eq,
body.audio-zone #props-eq,
body.is-audio-only #props-eq {
  display: none !important;
}
body.workspace-studio #props-eq-link:not([hidden]),
body.audio-zone #props-eq-link:not([hidden]),
body.is-audio-only #props-eq-link:not([hidden]) {
  display: block !important;
}
/* Stretch mode is live (pitch-compensated) */
#prop-rate-mode option[value="stretch"] {
  display: block;
}

/* Dynamic de-ess controls under EQ */
.deess-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-top: 0.4rem;
  padding: 0.35rem 0.45rem;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(251, 191, 36, 0.1);
}
.deess-amount-field {
  flex: 1;
  min-width: 8rem;
  margin: 0;
}
.deess-amount-field label {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  margin-bottom: 0.15rem;
}
.deess-note {
  flex: 1 1 100%;
  margin: 0;
  opacity: 0.7;
  font-size: 0.7rem;
}
.mbcomp-block,
.width-block {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(251, 191, 36, 0.12);
}

/* Fade curve preview */
.fade-curve-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.fade-curve-row select {
  flex: 1;
  min-width: 0;
}
.fade-curve-preview {
  flex-shrink: 0;
  width: 7.5rem;
  height: 2.5rem;
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(251, 191, 36, 0.15);
}

/* Spectrum is drawn into the EQ graph plot (see paintEqGraph) — no separate strip */

/* Stereo meters */
.meter-stereo {
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  height: 100%;
  padding: 0.15rem 0.2rem;
  box-sizing: border-box;
}
.meter-ch {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
  min-height: 0;
}
.meter-ch-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(251, 191, 36, 0.7);
  width: 0.7rem;
  flex-shrink: 0;
}
.meter-ch-track {
  position: relative;
  flex: 1;
  height: 100%;
  min-height: 0.28rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.meter-ch-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #22c55e, #fbbf24 70%, #ef4444);
  border-radius: 999px;
  transition: none;
}
.meter-ch-peak {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  margin: 0;
  border-radius: 1px;
  background: #fffbeb;
  box-shadow: 0 0 4px rgba(253, 230, 138, 0.85);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-1px);
}
.meter-ch-clip,
body.theme-dark .meter-ch-clip,
html body .audio-meter .meter-ch-clip {
  flex: 0 0 auto;
  width: 0.42rem;
  height: 0.42rem;
  min-width: 0.42rem;
  min-height: 0.42rem;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(68, 64, 60, 0.9) !important;
  border-radius: 2px !important;
  background: #292524 !important;
  box-shadow: none !important;
  cursor: pointer;
}
.meter-ch-clip.is-clip,
body.theme-dark .meter-ch-clip.is-clip,
html body .audio-meter .meter-ch-clip.is-clip {
  background: #ef4444 !important;
  border-color: #fecaca !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.95) !important;
}
.meter-ch.is-clip .meter-ch-fill {
  background: linear-gradient(90deg, #22c55e, #f97316 55%, #ef4444 82%, #fca5a5);
}
.audio-meter.is-clip {
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.55);
}

/* Gain keyframe handles on stage waveform */
.stage-audio-gain-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.stage-audio-gain-dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
  border: 2px solid #fbbf24;
  border-radius: 50%;
  background: #1c1917;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: ns-resize;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  z-index: 5;
}
.stage-audio-gain-dot:hover,
.stage-audio-gain-dot:focus-visible {
  background: #fbbf24;
  outline: none;
}
.stage-audio-gain-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 3;
}

/* Stage waveform (Audio Studio primary canvas) */
.stage-audio-wave-wrap {
  position: relative;
  z-index: 3;
  width: min(94%, 58rem);
  max-width: 100%;
  height: min(38vh, 15rem);
  min-height: 7rem;
  margin: 0.35rem auto 0;
  border-radius: 0.65rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(251, 191, 36, 0.18);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  pointer-events: auto !important;
  z-index: 14;
  overflow: visible;
  touch-action: none;
  user-select: none;
}
.stage-audio-wave-wrap[hidden] {
  display: none !important;
}
.stage-audio-wave {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 0.65rem;
  overflow: hidden;
}
.stage-audio-wave-wrap.is-trim-zoomed {
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.45), 0 8px 28px rgba(0, 0, 0, 0.35);
  height: min(34vh, 13rem);
}
.stage-audio-wave-wrap.is-grabbing-trim {
  cursor: ew-resize;
}
.stage-audio-wave-wrap.is-panning {
  cursor: grabbing;
}
.stage-audio-overview {
  position: relative;
  z-index: 14;
  flex: 0 0 2.2rem;
  width: min(94%, 58rem);
  max-width: 100%;
  height: 2.2rem;
  min-height: 2.2rem;
  margin: 0.2rem auto 0;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(251, 191, 36, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  pointer-events: auto !important;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: pointer;
}
.stage-audio-overview[hidden] {
  display: none !important;
}
.stage-audio-overview.is-panning,
.stage-audio-overview.is-panning .stage-audio-overview-thumb {
  cursor: grabbing;
}
.stage-audio-overview-wave {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.stage-audio-overview-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(12, 10, 9, 0.55);
  pointer-events: none;
  z-index: 1;
}
.stage-audio-overview-shade-l {
  left: 0;
  width: 0;
}
.stage-audio-overview-shade-r {
  right: 0;
  width: 0;
}
.stage-audio-overview-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  min-width: 8px;
  max-width: 100%;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(251, 191, 36, 0.78);
  border-radius: 0.28rem;
  background: rgba(251, 191, 36, 0.2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 10px rgba(251, 191, 36, 0.18);
  cursor: grab;
  pointer-events: auto;
  box-sizing: border-box;
}
.stage-audio-overview-thumb:hover {
  background: rgba(251, 191, 36, 0.28);
}
.stage-audio-overview-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  left: 0;
  background: #fb923c;
  box-shadow: 0 0 6px rgba(251, 146, 60, 0.7);
  pointer-events: none;
  z-index: 4;
  transform: translateX(-1px);
}
.stage-audio-trim-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(12, 10, 9, 0.62);
  pointer-events: none;
  z-index: 1;
}
.stage-audio-trim-l {
  left: 0;
  width: 0;
}
.stage-audio-trim-r {
  right: 0;
  width: 0;
}
.stage-audio-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  left: 0;
  background: linear-gradient(180deg, #fb923c, #fbbf24);
  box-shadow: 0 0 8px rgba(251, 146, 60, 0.7);
  pointer-events: none;
  z-index: 2;
  transform: translateX(-1px);
}
.stage-audio-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(251, 191, 36, 0.92);
  cursor: ew-resize;
  z-index: 8;
  transform: translateX(-50%);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 10px rgba(251, 191, 36, 0.35);
  pointer-events: auto;
}
.stage-audio-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 36px;
  transform: translateX(-50%);
}
.stage-audio-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 34%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 1px;
}
.stage-audio-handle:hover,
.stage-audio-handle:focus-visible {
  background: #fde68a;
  outline: none;
}
.stage-audio-handle-in {
  left: 0;
}
.stage-audio-handle-out {
  left: 100%;
}
.stage-audio-trim-readout {
  position: absolute;
  top: 0.4rem;
  transform: translateX(-50%);
  z-index: 9;
  padding: 0.18rem 0.45rem;
  border-radius: 0.35rem;
  background: rgba(12, 10, 9, 0.92);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fde68a;
  font: 700 0.72rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.stage-audio-fit {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 9;
  margin: 0;
  padding: 0.18rem 0.5rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(12, 10, 9, 0.82);
  color: #fde68a;
  font: 700 0.68rem/1.2 system-ui, sans-serif;
  cursor: pointer;
  pointer-events: auto;
}
.stage-audio-fit:hover,
.stage-audio-fit:focus-visible {
  background: rgba(251, 191, 36, 0.2);
  outline: none;
}
body.is-audio-only .stage-audio-art,
body.has-active-audio.workspace-studio .stage-audio-art,
body.audio-zone .stage-audio-art {
  justify-content: flex-start;
  padding-top: 1.25rem;
  gap: 0.35rem;
}
body.is-audio-only .stage-audio-core,
body.has-active-audio.workspace-studio .stage-audio-core,
body.audio-zone .stage-audio-core {
  display: none;
}
body.is-audio-only .stage-audio-rings,
body.has-active-audio.workspace-studio .stage-audio-rings,
body.audio-zone .stage-audio-rings {
  opacity: 0.35;
}
body.is-audio-only .stage-audio-bars,
body.has-active-audio.workspace-studio .stage-audio-bars,
body.audio-zone .stage-audio-bars {
  display: none;
}

.stage-audio-name {
  position: relative;
  z-index: 3;
  max-width: min(90%, 28rem);
  margin-top: 0.85rem;
  font-size: 1.05rem;
  font-weight: 750;
  color: #fafaf9;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.stage-audio-hint {
  position: relative;
  z-index: 3;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(214, 211, 209, 0.72);
}
body.is-audio-only .stage-inner audio:not([hidden]) {
  position: relative;
  z-index: 2;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(88%, 28rem);
  margin: 0 auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
}
body.is-audio-only .audio-meter {
  left: 50%;
  right: auto;
  bottom: 0.75rem;
  transform: translateX(-50%);
  width: min(70%, 16rem);
  height: 0.45rem;
  z-index: 3;
  opacity: 0.95;
}
body.is-audio-only .stage-placeholder {
  opacity: 0.95;
  background: linear-gradient(160deg, #292524, #1c1917 55%, #1c0a05);
  z-index: 4;
}
body.is-audio-only .stage-toolbar {
  background: #1c1917;
  border: none;
  border-top: none;
  border-color: transparent;
  box-shadow: none;
}
/* Props: simple audio edit panel */
body.is-audio-only .props > h2 {
  font-size: 0.95rem;
}
body.is-audio-only #prop-kind {
  display: none !important;
}
body.is-audio-only .props .section {
  margin-bottom: 0.35rem;
}
body.is-audio-only .stage-toolbar {
  gap: 0.55rem;
}
/* Timeline: V + A only; audio clips read green on A */
body.is-audio-only .track-row[data-lane="a2"] .lane-label {
  color: #4ade80;
}
body.is-audio-only .track {
  background: linear-gradient(180deg, #292524, #1c1917 70%, #0c0a09);
}
body.is-audio-only .track-row-audio .clip,
body.is-audio-only .clip[data-kind="audio"] {
  border-color: rgba(34, 197, 94, 0.5);
  background: linear-gradient(160deg, #14532d, #166534 50%, #1c1917);
}

/* ── Video library shell: 3 video channels + audio ───────────────── */
body.is-video-lib .track-row-legacy,
body.is-video-lib .track-row[data-lane="v2"],
body.is-video-lib .track-row[hidden] {
  display: none !important;
}
body.is-video-lib.workspace-timeline .track-row-video .lane-label {
  color: #38bdf8;
  font-weight: 800;
}
body.is-video-lib.workspace-timeline .track-row-audio .lane-label {
  color: #4ade80;
  font-weight: 800;
}
body.is-video-lib .track-row-video .track {
  background: linear-gradient(180deg, #0c4a6e 0%, #0f172a 70%, #020617);
  border-color: rgba(56, 189, 248, 0.35);
}
body.is-video-lib .track.track-a2 {
  background: linear-gradient(180deg, #14532d 0%, #0f172a 70%, #020617);
  border-color: rgba(74, 222, 128, 0.35);
}
/* Kind colors win over lane chrome (image = purple, video = red, audio = green) */
body.is-video-lib .clip[data-kind="video"],
body.is-video-lib .track-row-video .clip[data-kind="video"] {
  border-color: rgba(239, 68, 68, 0.65);
  background: linear-gradient(160deg, #7f1d1d, #b91c1c 45%, #450a0a);
  color: #fef2f2;
}
body.is-video-lib .clip[data-kind="audio"],
body.is-video-lib .track-a2 .clip {
  border-color: rgba(34, 197, 94, 0.5);
  background: linear-gradient(160deg, #14532d, #166534 50%, #1c1917);
}
body.is-video-lib .clip[data-kind="image"] {
  border-color: rgba(168, 85, 247, 0.7);
  background: linear-gradient(160deg, #5b21b6, #7c3aed 45%, #3b0764);
  color: #f5f3ff;
}
.track-row-video .clip-edge,
.track-row-audio .clip-edge {
  opacity: 0.85;
}
/* Always hide legacy overlay row (product is V1–V3 + A) */
.track-row-legacy,
.track-row[data-lane="v2"][hidden],
.track-row.track-row-legacy[hidden] {
  display: none !important;
}
/* Rail: audio-first labels */
body.is-audio-only .rail > h2::after {
  content: " · audio";
  font-weight: 600;
  color: #a8a29e;
  font-size: 0.72em;
}
/* ── Audio Studio: stage-first; dock secondary / Timeline-only primary ── */
body.is-audio-only.workspace-studio,
body.is-audio-only:not(.workspace-timeline) {
  --bottom: 0;
}
body.is-audio-only.workspace-studio .timeline,
body.is-audio-only.workspace-studio .timeline-resizer,
body.is-audio-only.workspace-studio #timeline,
body.is-audio-only.workspace-studio #timeline-resizer,
body.is-audio-only:not(.workspace-timeline) .timeline,
body.is-audio-only:not(.workspace-timeline) .timeline-resizer,
body.is-audio-only:not(.workspace-timeline) #timeline,
body.is-audio-only:not(.workspace-timeline) #timeline-resizer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.is-audio-only.workspace-studio .app-body,
body.is-audio-only:not(.workspace-timeline) .app-body {
  bottom: 0;
}
/* Timeline workspace: media panel + V1–V3 + A (audio projects demote V)
   Must NOT apply on lobby (is-empty) — higher specificity than body.is-empty .timeline */
body.is-audio-only.workspace-timeline:not(.is-empty) {
  --bottom: 20rem;
}
body.is-audio-only.workspace-timeline:not(.is-empty) .timeline,
body.is-audio-only.workspace-timeline:not(.is-empty) #timeline {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.is-audio-only.workspace-timeline:not(.is-empty) .timeline-resizer,
body.is-audio-only.workspace-timeline:not(.is-empty) #timeline-resizer {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.is-audio-only.workspace-timeline:not(.is-empty) .app-body {
  bottom: var(--bottom, 11.5rem);
}
/* Studio audio: stage deck fills column */
body.is-audio-only.workspace-studio .stage-wrap,
body.is-audio-only:not(.workspace-timeline) .stage-wrap {
  flex: 1 1 auto;
}
@media (prefers-reduced-motion: reduce) {
  .stage-audio-ring,
  .stage-audio-orb,
  .stage-audio-bars span,
  .stage-audio-core,
  .stage-audio-icon,
  .stage-audio-grid {
    animation: none !important;
  }
}
body.in-point-only .scrub-wrap {
  box-shadow: inset 0 0 0 1px rgba(234, 88, 12, 0.35);
}
.clip.is-compound {
  border-style: double;
  border-color: rgba(99, 102, 241, 0.75);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.14), transparent);
}
.stage-dissolve {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: #000;
  transition: opacity 0.05s linear;
}
/* Crash recovery banner retired — never show "Recovery draft found" */
.draft-banner,
.draft-banner[hidden],
body.theme-dark .draft-banner {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.dropped-frame-warn {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 9;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fef3c7;
  background: rgba(185, 28, 28, 0.85);
  padding: 0.2rem 0.45rem;
  border-radius: 0.3rem;
  pointer-events: none;
}
.trash-panel {
  margin-top: 0.85rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--stroke);
}
.trash-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 8rem;
  overflow: auto;
}
.trash-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  padding: 0.25rem 0.35rem;
  border-radius: 0.4rem;
  background: var(--panel-soft);
  border: 1px solid var(--stroke);
}
.trash-item .name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trash-item button {
  padding: 0.15rem 0.4rem;
  font-size: 0.68rem;
}
.stage-stickers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.stage-sticker {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.stage-sticker.is-rect {
  border: 2px solid currentColor;
  border-radius: 0.2rem;
  background: currentColor;
  opacity: 0.75;
}
.stage-sticker.is-circle {
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}
.stage-sticker.is-star {
  font-size: inherit;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.stage-burn-tc {
  position: absolute;
  right: 0.55rem;
  bottom: 0.45rem;
  z-index: 8;
  font-family: var(--mono);
  font-size: clamp(0.7rem, 2.2vmin, 1rem);
  font-weight: 650;
  color: #fbbf24;
  background: rgba(0, 0, 0, 0.55);
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
  pointer-events: none;
  letter-spacing: 0.04em;
}
.mic-recording {
  outline: 2px solid var(--danger);
  color: var(--danger) !important;
}
.rail h2, .props h2, .timeline-head h2 {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.import-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.import-btns button { flex: 1 1 auto; font-size: 0.8rem; font-weight: 650; }
.lib-filter {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.55rem;
}
.lib-filter input[type="search"] {
  flex: 1;
  font-size: 0.78rem;
  padding: 0.35rem 0.45rem;
}
.lib-fav-label {
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.lib-fav-label input { accent-color: var(--accent); }
.media-item.is-fav { background: #fff7ed; }
.media-item[data-color="red"] { box-shadow: inset 3px 0 0 #ef4444; }
.media-item[data-color="orange"] { box-shadow: inset 3px 0 0 #f97316; }
.media-item[data-color="yellow"] { box-shadow: inset 3px 0 0 #eab308; }
.media-item[data-color="green"] { box-shadow: inset 3px 0 0 #22c55e; }
.media-item[data-color="blue"] { box-shadow: inset 3px 0 0 #3b82f6; }
.media-item[data-color="purple"] { box-shadow: inset 3px 0 0 #a855f7; }
.media-tools {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.media-tools .fav { color: #ca8a04; }
.num-trim {
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.78rem;
}
.speed-custom-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.speed-custom-label {
  font-size: 0.72rem;
  color: var(--muted, #a8a29e);
  margin: 0;
  flex: 0 0 auto;
}
.speed-num {
  width: 5.5rem;
  margin-top: 0 !important;
  flex: 0 0 auto;
}
/* 2026-10-13: beat input[type=number]{width:100%} (0,1,1) so the 390px props panel doesn't scroll */
.speed-custom-row input.speed-num { width: 5.5rem; min-width: 0; }
.speed-custom-unit {
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--muted, #a8a29e);
}

.clip[data-color="red"] { border-color: #ef4444; }
.clip[data-color="orange"] { border-color: #f97316; }
.clip[data-color="yellow"] { border-color: #ca8a04; }
.clip[data-color="green"] { border-color: #16a34a; }
.clip[data-color="blue"] { border-color: #2563eb; }
.clip[data-color="purple"] { border-color: #9333ea; }
.clip.is-dragging { opacity: 0.55; }
/* Avoid loud outline on every clip under a drag — was looking like a broken drop zone */
.clip.is-drop-target { outline: none; }
.clip-wave {
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  bottom: 0.3rem;
  height: 22px;
  width: calc(100% - 0.7rem) !important;
  pointer-events: none;
  opacity: 0.85;
}
.clip { position: relative; overflow: hidden; }
.tl-marker {
  position: absolute;
  top: 2px;
  z-index: 3;
  transform: translateX(-50%);
  color: #b91c1c;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 1px 0 #fff;
  pointer-events: auto;
}
.tl-comment {
  position: absolute;
  bottom: 2px;
  z-index: 3;
  transform: translateX(-50%);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  border: none;
  background: transparent;
  padding: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}
.tl-comment:hover {
  transform: translateX(-50%) scale(1.15);
}
.scrub-tick-marker {
  background: #7c3aed;
  height: 12px;
  top: -6px;
}
.scrub-tick-comment {
  background: #0ea5e9;
  height: 10px;
  top: -4px;
  width: 3px;
}
/* Multi-cam program layouts (V1 cell + V2 overlay cell) */
body.program-layout-multicam #preview-video.program-cell-main {
  z-index: 1;
}
body.program-layout-multicam #overlay-video,
body.program-layout-multicam #overlay-image {
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
body.program-layout-side #stage-inner,
body.program-layout-stack #stage-inner,
body.program-layout-quad #stage-inner {
  /* cells are positioned absolutely on stage-inner */
}

/* Live chroma composite canvas */
.chroma-stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}
.preview-video.chroma-keyed-source,
.stage-inner video.chroma-keyed-source,
#preview-video.chroma-keyed-source,
#preview-image.chroma-keyed-source {
  opacity: 0 !important;
}

/* Chroma key stage hint: checkerboard behind media */
.stage-inner.chroma-key-on {
  background-color: #1c1917;
  background-image:
    linear-gradient(45deg, #292524 25%, transparent 25%),
    linear-gradient(-45deg, #292524 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #292524 75%),
    linear-gradient(-45deg, transparent 75%, #292524 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.stage-inner.chroma-key-on::before {
  content: "KEY " attr(data-chroma);
  position: absolute;
  top: 0.35rem;
  left: 0.45rem;
  z-index: 6;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fafaf9;
  background: rgba(0, 0, 0, 0.55);
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
  pointer-events: none;
}
.stage-inner:fullscreen,
.stage-inner:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: #0c0a09;
}
.media-item.is-selected {
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
}
.clip-thumb {
  position: absolute;
  left: 0.3rem;
  top: 0.3rem;
  width: 40px;
  height: 22px;
  border-radius: 0.25rem;
  object-fit: cover;
  opacity: 0.9;
  border: 1px solid rgba(124, 45, 18, 0.25);
  pointer-events: none;
}
body.safe-margins .stage-inner::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px dashed rgba(253, 224, 71, 0.45);
  border-radius: 0.35rem;
  pointer-events: none;
  z-index: 5;
}
/*
 * Timeline: kill every hollow yellow / gold frame on the stage.
 * (safe-margins dashed inset, edge guide, empty PiP shell, crop chrome)
 */
body.workspace-timeline .stage-inner::before,
body.workspace-timeline .stage-inner::after,
body.workspace-timeline.safe-margins .stage-inner::before,
body.workspace-timeline.safe-margins .stage-inner::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  width: 0 !important;
  height: 0 !important;
  inset: auto !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.workspace-timeline .image-edge-guide,
body.workspace-timeline .image-edge-guide.is-on,
body.workspace-timeline #image-edge-guide,
body.workspace-timeline #image-edge-guide-frame,
body.workspace-timeline .image-edge-guide-frame,
body.workspace-timeline .sf-text-box-host,
body.workspace-timeline .image-text-options {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  border: none !important;
  outline: none !important;
}
/* Crop stays available on Timeline when an image clip is active */
body.workspace-timeline:not([data-image-tool="crop"]) .sf-crop-overlay,
body.workspace-timeline:not([data-image-tool="crop"]) .image-crop-options {
  display: none !important;
}
/* Empty PiP / A/B clean twins must not paint a gold hollow rectangle */
body.workspace-timeline .overlay-pip[hidden],
body.workspace-timeline #overlay-video[hidden],
body.workspace-timeline #overlay-image[hidden],
body.workspace-timeline .preview-clean[hidden],
body.workspace-timeline #preview-video-clean[hidden],
body.workspace-timeline #preview-image-clean[hidden] {
  display: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}
body.workspace-timeline .overlay-pip:not([src]),
body.workspace-timeline #overlay-image:not([src]) {
  display: none !important;
  border: none !important;
}
body.play-half #preview-video,
body.play-half #preview-image {
  transform: scale(0.5);
  transform-origin: center center;
  image-rendering: auto;
}
.clip[data-kind="gap"] {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
}
input[type="color"] {
  width: 100%;
  height: 2rem;
  padding: 0.15rem;
  border-radius: 0.45rem;
  border: 1px solid var(--stroke);
  background: #fff;
}
.stage-text-overlay {
  position: absolute;
  z-index: 6;
  color: #fffbeb;
  font-weight: 800;
  font-size: clamp(0.85rem, 2.4vw, 1.35rem);
  text-shadow: 0 2px 8px rgba(0,0,0,0.65);
  pointer-events: none;
  padding: 0.15rem 0.35rem;
  max-width: 90%;
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
  line-height: 1.1;
}
/* Image-mode: text is a layer sitting on the still (not a full-stage HUD) */
.stage-text-overlay.is-image-text-layer {
  max-width: none;
  /* Keep crisp when scaled with the photo */
  transform-origin: center center;
}
.stage-text-overlay.is-pixel-text {
  font-family: "Courier New", Courier, monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  text-shadow: none !important;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* Hard edge on tiny stills */
  text-rendering: geometricPrecision;
}
.img-text-layer-select {
  max-width: 8.5rem;
  padding: 0.28rem 0.35rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(251, 191, 36, 0.3);
  background: rgba(12, 10, 9, 0.85);
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
}
/* Watermark feature removed */
.stage-watermark,
#stage-watermark,
#watermark-enabled,
#watermark-text,
label:has(#watermark-enabled) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.stage-subtitles {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  z-index: 7;
  max-width: 88%;
  padding: 0.35rem 0.65rem;
  border-radius: 0.4rem;
  background: rgba(0,0,0,0.55);
  color: #fafaf9;
  font-size: 0.9rem;
  font-weight: 650;
  text-align: center;
  pointer-events: none;
}
.stage-ab-wipe {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fbbf24;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  z-index: 8;
  pointer-events: none;
}
/* A/B dual frame: clean twin under graded main; clip-paths set in JS */
.stage-inner .preview-clean {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  filter: none !important;
}
.stage-inner #preview-video,
.stage-inner #preview-image {
  position: relative;
  z-index: 3;
}
body.ab-compare-on .stage-inner #preview-video,
body.ab-compare-on .stage-inner #preview-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.audio-meter {
  position: absolute;
  right: 0.45rem;
  bottom: 0.45rem;
  width: 8px;
  height: 48px;
  border-radius: 4px;
  background: rgba(0,0,0,0.35);
  z-index: 6;
  overflow: hidden;
}
.meter-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: linear-gradient(0deg, #22c55e, #eab308 70%, #ef4444);
  transform-origin: bottom center;
  transform: scaleY(0);
  transition: none;
}
.grade-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.grade-head label {
  margin: 0;
}
.grade-head-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}
.grade-reset-btn,
#btn-grade-on {
  font-size: 0.72rem !important;
  padding: 0.2rem 0.55rem !important;
  flex: 0 0 auto;
}
#btn-grade-on {
  min-width: 2.45rem;
}
#btn-grade-on.is-on {
  border-color: rgba(249, 115, 22, 0.65);
  background: rgba(234, 88, 12, 0.25);
  color: #fdba74;
}
.grade-apply-row {
  margin-top: 0.55rem;
}
#btn-grade-apply {
  width: 100%;
  font-weight: 700;
}
#btn-grade-apply:not(:disabled) {
  border-color: rgba(249, 115, 22, 0.65);
  background: rgba(234, 88, 12, 0.25);
  color: #fdba74;
}
#btn-grade-apply:disabled {
  opacity: 0.45;
  cursor: default;
}
#props-look-grade.is-grade-off #filter-preset,
#props-look-grade.is-grade-off .grade-sliders {
  opacity: 0.42;
}
.grade-sliders {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.55rem;
  width: 100%;
  box-sizing: border-box;
}
/* Label above, full-width track — longer travel than a side-by-side slider */
.field .grade-sliders .grade-row,
#props-look-grade .grade-row,
.grade-sliders .grade-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 0.28rem !important;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  box-sizing: border-box;
}
.grade-lab {
  display: block;
  width: auto;
  max-width: none;
  flex: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
.field .grade-sliders .grade-row input[type="range"],
#props-look-grade .grade-row input[type="range"],
.grade-sliders .grade-row input[type="range"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.4rem 0 !important;
  flex: none !important;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  height: 1.35rem;
  border-radius: 999px;
  background: transparent;
  accent-color: var(--accent, #f97316);
  cursor: pointer;
}
.grade-sliders .grade-row input[type="range"]::-webkit-slider-runnable-track {
  height: 0.62rem;
  border-radius: 999px;
  background: rgba(68, 64, 60, 0.55);
}
body.theme-dark .grade-sliders .grade-row input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(68, 64, 60, 0.85);
}
body:not(.theme-dark) .grade-sliders .grade-row input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(214, 211, 209, 0.95);
}
.grade-sliders .grade-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.28rem;
  height: 1.28rem;
  margin-top: calc((0.62rem - 1.28rem) / 2);
  border-radius: 50%;
  background: #f97316;
  border: 1px solid rgba(12, 10, 9, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.grade-sliders .grade-row input[type="range"]::-moz-range-track {
  height: 0.62rem;
  border-radius: 999px;
  background: rgba(68, 64, 60, 0.55);
  border: none;
}
body.theme-dark .grade-sliders .grade-row input[type="range"]::-moz-range-track {
  background: rgba(68, 64, 60, 0.85);
}
body:not(.theme-dark) .grade-sliders .grade-row input[type="range"]::-moz-range-track {
  background: rgba(214, 211, 209, 0.95);
}
.grade-sliders .grade-row input[type="range"]::-moz-range-thumb {
  width: 1.28rem;
  height: 1.28rem;
  border-radius: 50%;
  background: #f97316;
  border: 1px solid rgba(12, 10, 9, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.cmd-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: start center;
  padding-top: 12vh;
  background: rgba(8, 6, 14, 0.45);
}
.cmd-overlay.is-on { display: grid; }
.cmd-panel {
  width: min(28rem, calc(100vw - 2rem));
  background: #fffdf9;
  border: 1px solid var(--stroke);
  border-radius: 0.85rem;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cmd-panel input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--stroke);
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
  outline: none;
}
.cmd-list { max-height: 16rem; overflow: auto; }
.cmd-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.55rem 0.9rem;
  font-size: 0.88rem;
}
.cmd-item:hover, .cmd-item.is-active {
  background: #ffedd5;
}
.ctx-menu {
  position: fixed;
  z-index: 320;
  min-width: 11.5rem;
  max-width: min(18rem, calc(100vw - 1rem));
  background: #fffdf9;
  border: 1px solid var(--stroke);
  border-radius: 0.65rem;
  box-shadow: var(--shadow-lg);
  padding: 0.3rem;
}
.ctx-menu[hidden] {
  display: none !important;
}
.ctx-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0.4rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}
.ctx-menu button:hover:not(:disabled) {
  background: #ffedd5;
}
.ctx-menu button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ctx-menu button.is-danger {
  color: var(--danger);
}
.ctx-menu button.is-danger:hover:not(:disabled) {
  background: #fef2f2;
}
.ctx-menu-sep {
  height: 1px;
  margin: 0.3rem 0.35rem;
  background: var(--stroke);
  border: none;
}
body.theme-dark .ctx-menu {
  background: #1c1917;
  border-color: rgba(251, 191, 36, 0.22);
  color: #e7e5e4;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
body.theme-dark .ctx-menu button:hover:not(:disabled) {
  background: #44403c;
}
body.theme-dark .ctx-menu button.is-danger {
  color: #fca5a5;
}
body.theme-dark .ctx-menu button.is-danger:hover:not(:disabled) {
  background: #450a0a;
}
body.theme-dark .ctx-menu-sep {
  background: rgba(251, 191, 36, 0.14);
}
/* —— Dark theme (default): full chrome + timeline coverage —— */
body.theme-dark {
  color: #e7e5e4;
  color-scheme: dark;
  /* Override light :root tokens so var(--panel*) never flash white in dark UI */
  --panel: #1c1917;
  --panel-soft: #292524;
  --stroke: rgba(251, 191, 36, 0.14);
  --stroke-hi: rgba(249, 115, 22, 0.55);
  --text: #e7e5e4;
  --muted: #a8a29e;
}
body.theme-dark .app-body,
body.theme-dark .rail,
body.theme-dark .props,
body.theme-dark .timeline {
  background: #1c1917;
  color: #e7e5e4;
  border-color: rgba(251, 191, 36, 0.12);
}
/* “More import” disclosure + rail chrome */
body.theme-dark .rail-more {
  background: #292524;
  border-color: rgba(251, 191, 36, 0.16);
  color: #e7e5e4;
}
body.theme-dark .rail-more > summary {
  color: #d6d3d1;
}
body.theme-dark .rail-more > summary::before {
  color: #fb923c;
}
body.theme-dark .lib-filter input[type="search"] {
  background: #0c0a09;
  color: #e7e5e4;
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 0.4rem;
}
body.theme-dark .lib-fav-label {
  color: #a8a29e;
}
body.theme-dark .import-btns button:not(.primary) {
  background: #292524;
  color: #e7e5e4;
  border-color: rgba(251, 191, 36, 0.2);
}
body.theme-dark .trash-panel {
  border-color: rgba(251, 191, 36, 0.12);
}
body.theme-dark .trash-panel h2 {
  color: #e7e5e4;
}
/* Solid dark — gradient left a lighter “frame” around full-bleed stage-inner */
body.theme-dark .stage-wrap {
  background: #0c0a09;
  background-image: none;
}
body.theme-dark.workspace-timeline .stage-wrap {
  background: linear-gradient(180deg, #292524, #1c1917);
}
body.theme-dark .stage-toolbar {
  background: #292524;
  border: none;
  border-top: none;
  border-color: transparent;
}
body.theme-dark .stage-toolbar .time {
  color: #a8a29e;
}
body.theme-dark button:not(.primary) {
  background: #292524;
  color: #e7e5e4;
  border-color: rgba(251, 191, 36, 0.2);
}
body.theme-dark button:hover:not(:disabled):not(.primary) {
  background: #44403c;
  border-color: rgba(251, 191, 36, 0.35);
}
body.theme-dark button.ghost {
  background: transparent;
}
body.theme-dark button.danger {
  background: #450a0a;
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.35);
}
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
  background: #0c0a09;
  color: #e7e5e4;
  border-color: rgba(251, 191, 36, 0.2);
}
body.theme-dark input[type="range"] {
  accent-color: #f97316;
}
body.theme-dark .cmd-panel {
  background: #1c1917;
  color: #e7e5e4;
}
body.theme-dark .cmd-item:hover,
body.theme-dark .cmd-item.is-active {
  background: #44403c;
}
/* Timeline track + clips (were stuck on light gradients) */
body.theme-dark .timeline {
  background: #141210;
  border-top-color: rgba(251, 191, 36, 0.14);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
}
body.theme-dark .timeline-head h2,
body.theme-dark .timeline-head .time,
body.theme-dark .tl-zoom-val {
  color: #d6d3d1;
}
body.theme-dark .timeline-head .ghost.is-on {
  border-color: rgba(249, 115, 22, 0.55);
  background: #431407;
  color: #fdba74;
}
body.theme-dark .track {
  background: linear-gradient(180deg, #292524, #1c1917 70%, #0c0a09);
  border-color: rgba(251, 191, 36, 0.16);
}
body.theme-dark .track-overlay .track-inner {
  background: rgba(234, 88, 12, 0.08);
}
body.theme-dark .track-a2 .track-inner {
  background: rgba(34, 197, 94, 0.08);
}
body.theme-dark .clip {
  border-color: rgba(249, 115, 22, 0.45);
  background: linear-gradient(160deg, #44403c, #292524 55%, #1c1917);
  color: #fafaf9;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
body.theme-dark .clip.is-active {
  border-color: #f97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.4);
}
body.theme-dark .clip .clip-name {
  color: #fafaf9;
}
body.theme-dark .clip .clip-sub {
  color: #a8a29e;
}
body.theme-dark .clip[data-kind="image"] {
  border-color: rgba(192, 132, 252, 0.75) !important;
  background: linear-gradient(160deg, #5b21b6, #7c3aed 50%, #3b0764) !important;
  color: #f5f3ff;
}
body.theme-dark .clip[data-kind="video"] {
  border-color: rgba(248, 113, 113, 0.75) !important;
  background: linear-gradient(160deg, #7f1d1d, #dc2626 50%, #450a0a) !important;
  color: #fef2f2;
}
body.theme-dark .clip[data-kind="audio"],
body.theme-dark .clip[data-kind="audio"].is-lane-b,
body.theme-dark .clip[data-kind="audio"].is-lane-c,
body.theme-dark .clip[data-kind="audio"].is-a2,
body.theme-dark .clip[data-kind="audio"].is-overlay {
  border-color: rgba(74, 222, 128, 0.55) !important;
  background: linear-gradient(160deg, #14532d, #166534 45%, #1c1917) !important;
  color: #ecfdf5;
}
body.theme-dark .clip.is-overlay {
  opacity: 0.92;
}
body.theme-dark .clip.is-music-bed {
  border-color: rgba(34, 197, 94, 0.55);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.18), #1c1917);
}
body.theme-dark .clip.is-compound {
  border-color: rgba(129, 140, 248, 0.7);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.22), #1c1917);
}
body.theme-dark .lane-label {
  color: #a8a29e;
}
body.theme-dark .playhead {
  background: #f87171;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.55);
}
/* Media library list */
body.theme-dark .media-item {
  background: #292524;
  border-color: transparent;
  color: #e7e5e4;
}
body.theme-dark .media-item:hover {
  border-color: rgba(251, 191, 36, 0.25);
  background: #44403c;
}
body.theme-dark .media-item.is-active {
  border-color: rgba(249, 115, 22, 0.55);
  background: #431407;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.2);
}
body.theme-dark .media-thumb {
  background: #1c1917;
  color: #fdba74;
  border-color: rgba(251, 191, 36, 0.2);
}
body.theme-dark .media-meta .sub,
body.theme-dark .empty-hint,
body.theme-dark .props p.note,
body.theme-dark .props-subhead,
body.theme-dark .field label {
  color: #a8a29e;
}
body.theme-dark .rail h2,
body.theme-dark .props h2 {
  color: #e7e5e4;
}
body.theme-dark .toast {
  background: #292524;
  border-color: rgba(249, 115, 22, 0.45);
  color: #fafaf9;
}

body.theme-dark .scrub-tick {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
body.theme-dark .export-queue-hud {
  background: #1c1917;
  border-color: rgba(251, 191, 36, 0.2);
  color: #e7e5e4;
}
body.theme-dark .tour-card {
  background: #1c1917;
  border-color: rgba(251, 191, 36, 0.25);
  color: #e7e5e4;
}
.changelog-list {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.1rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--muted);
}
.props-subhead {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.crop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.5rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.crop-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.export-progress {
  position: fixed;
  z-index: 400;
  left: 50%;
  bottom: max(5rem, calc(var(--bottom) + 1rem));
  transform: translateX(-50%);
  width: min(22rem, calc(100vw - 2rem));
}
.export-progress-inner {
  background: #fffdf9;
  border: 1px solid var(--stroke);
  border-radius: 0.85rem;
  box-shadow: var(--shadow-lg);
  padding: 0.75rem 0.9rem;
}
body.theme-dark .export-progress-inner {
  background: #1c1917;
  color: #e7e5e4;
}
.export-progress-label {
  font-size: 0.82rem;
  font-weight: 650;
  margin-bottom: 0.45rem;
}
.export-progress-bar {
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(124, 45, 18, 0.12);
  overflow: hidden;
  margin-bottom: 0.55rem;
}
.export-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #fbbf24, #ea580c);
  transition: width 0.12s linear;
}
.export-progress .danger {
  width: 100%;
  font-size: 0.8rem;
}
body.density-compact .rail,
body.density-compact .props {
  padding: 0.45rem;
}
body.density-compact .media-item {
  padding: 0.25rem;
}
body.density-compact .field {
  margin-bottom: 0.45rem;
}
#preview-video,
#preview-image {
  transition: transform 0.05s linear;
}

.media-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.media-item {
  display: grid;
  grid-template-columns: 3.1rem 1fr auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0.4rem;
  border-radius: 0.65rem;
  border: 1px solid transparent;
  background: #fff7ed;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.media-item:hover {
  border-color: var(--stroke);
  background: #ffffff;
}
.media-item.is-active {
  border-color: var(--stroke-hi);
  background: #ffedd5;
  box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.12);
}
.media-thumb {
  width: 3.1rem;
  height: 2.2rem;
  border-radius: 0.4rem;
  object-fit: cover;
  background: #fed7aa;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #9a3412;
  overflow: hidden;
  border: 1px solid var(--stroke);
}
.media-thumb img, .media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-meta { min-width: 0; }
.media-meta .name {
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-meta .sub {
  font-size: 0.68rem;
  color: var(--muted);
}
.media-item .rm {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 0.2rem 0.35rem;
  font-size: 0.85rem;
  box-shadow: none;
}
.media-item .rm:hover { color: var(--danger); }
.empty-hint {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
  padding: 0.5rem 0.15rem;
}

/* Stage — solid surface (no see-through to sun canvas).
   Cream gradient was the permanent "white border" around audio/image studio
   when stage-inner sat smaller (16:9) inside a padded stage. Studio is dark
   by default; only pure video studio re-adds the warm framed card wash. */
.stage-wrap {
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  background: #0c0a09;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
/* Timeline keeps the warm cream stage column */
body.workspace-timeline .stage-wrap {
  background: linear-gradient(180deg, #fff8f0 0%, #ffedd5 100%);
}
/* Pure video Studio: dark full-bleed stage (cream wash left a huge empty ring) */
body.workspace-studio:not(.is-image-only):not(.is-audio-only):not(.has-active-audio):not(.audio-zone):not(.is-stills-lib) .stage-wrap,
body.workspace-studio.has-active-video .stage-wrap {
  background: #0c0a09;
}
/* Audio / image studio: seamless dark — no cream ring ever */
body.is-audio-only .stage-wrap,
body.has-active-audio .stage-wrap,
body.audio-zone .stage-wrap,
body.studio-audio .stage-wrap,
body.is-image-only .stage-wrap,
body.has-active-image .stage-wrap,
body.theme-dark.is-audio-only .stage-wrap,
body.theme-dark.has-active-audio .stage-wrap,
body.theme-dark.audio-zone .stage-wrap,
body.theme-dark.is-image-only .stage-wrap,
body.workspace-studio.is-audio-only .stage-wrap,
body.workspace-studio.has-active-audio .stage-wrap,
body.workspace-studio.audio-zone .stage-wrap,
body.workspace-studio.is-image-only .stage-wrap {
  background: #0c0a09 !important;
  background-image: none !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
body.is-audio-only .stage,
body.has-active-audio .stage,
body.audio-zone .stage,
body.studio-audio .stage,
body.is-image-only .stage,
body.has-active-image .stage {
  padding: 0 !important;
  place-items: stretch !important;
  display: block !important;
  background: #0c0a09 !important;
  border: none !important;
  box-shadow: none !important;
}
body.is-audio-only .stage-inner,
body.has-active-audio .stage-inner,
body.audio-zone .stage-inner,
body.studio-audio .stage-inner,
body.is-image-only .stage-inner,
body.has-active-image .stage-inner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: #0c0a09 !important;
}
/* Column: optional tool bars + preview + transport (never under the timeline dock) */
.stage-main-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  border: none;
  outline: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  background: #0c0a09;
}
/* Studio: main col fills wrap as a flex column (stage + toolbar).
   Absolute inset broke flex and shoved the transport bar / art downward. */
html body.workspace-studio #stage-main-col,
html body.workspace-studio .stage-main-col {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: #0c0a09 !important;
  background-image: none !important;
  z-index: 1 !important;
  overflow: hidden !important;
}
.stage {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: grid;
  place-items: center;
  position: relative;
  padding: 0.65rem 1rem;
  overflow: hidden;
  /* Size container so preview can scale with available height when dock resizes */
  container-type: size;
}
.stage-inner {
  position: relative;
  /* Fit 16:9 inside the stage box — shrinks when timeline grows (toolbar stays visible) */
  aspect-ratio: 16 / 9;
  width: min(100%, 960px, calc(100cqh * 16 / 9));
  max-width: 100%;
  max-height: 100%;
  height: auto;
  background: #1c1917;
  /* No default card chrome — the cream “white border” was this ring + stage padding
     showing around a smaller 16:9 box. Frame only restored for video timeline below. */
  border-radius: 0;
  border: none;
  overflow: hidden;
  box-shadow: none;
}
/*
 * Video Studio: fill the preview column. The 960px cap + cream card padding
 * left a tiny video hugging the top with empty space around it.
 * Use full available height/width (still 16:9, object-fit contain).
 */
html body.workspace-studio.has-active-video .stage,
body.workspace-studio.has-active-video .stage,
html body.workspace-studio:not(.is-image-only):not(.is-audio-only):not(.has-active-audio):not(.has-active-image):not(.audio-zone) .stage,
body.workspace-studio:not(.is-image-only):not(.is-audio-only):not(.has-active-audio):not(.has-active-image):not(.audio-zone) .stage {
  padding: 0.5rem !important;
  place-items: center !important;
  align-content: center !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #0c0a09 !important;
}
html body.workspace-studio.has-active-video .stage-inner,
body.workspace-studio.has-active-video .stage-inner,
html body.workspace-studio:not(.is-image-only):not(.is-audio-only):not(.has-active-audio):not(.has-active-image):not(.audio-zone) .stage-inner,
body.workspace-studio:not(.is-image-only):not(.is-audio-only):not(.has-active-audio):not(.has-active-image):not(.audio-zone) .stage-inner {
  position: relative !important;
  inset: auto !important;
  /* Grow into the stage: height-limited or width-limited, no 960px ceiling */
  width: min(100%, calc(100cqh * 16 / 9)) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  background: #0c0a09 !important;
}
@supports not (width: 1cqh) {
  html body.workspace-studio.has-active-video .stage-inner,
  body.workspace-studio.has-active-video .stage-inner,
  html body.workspace-studio:not(.is-image-only):not(.is-audio-only):not(.has-active-audio):not(.has-active-image):not(.audio-zone) .stage-inner,
  body.workspace-studio:not(.is-image-only):not(.is-audio-only):not(.has-active-audio):not(.has-active-image):not(.audio-zone) .stage-inner {
    width: 100% !important;
    max-height: 100% !important;
  }
}
html body.workspace-studio.has-active-video .stage-inner video,
html body.workspace-studio.has-active-video .stage-inner #preview-video,
body.workspace-studio.has-active-video .stage-inner video,
body.workspace-studio.has-active-video .stage-inner #preview-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/*
 * Video Studio — kill L/R white hairlines (same root cause as Audio Zone docs):
 * light app-body / transparent 5px resizer tracks + rail border-right + props
 * border-left read as a 1px white frame beside the dark stage.
 * See editor.css "AUDIO ZONE v4/v5" and STUDIO_IMAGE_FIXES.md cream-ring notes.
 */
html body.workspace-studio.has-active-video .app-body,
html body.workspace-studio.has-active-video #app-body,
body.workspace-studio.has-active-video .app-body,
body.workspace-studio.has-active-video #app-body,
html body.workspace-studio:not(.is-image-only):not(.is-audio-only):not(.has-active-audio):not(.audio-zone) .app-body,
body.workspace-studio:not(.is-image-only):not(.is-audio-only):not(.has-active-audio):not(.audio-zone) .app-body {
  background: #0c0a09 !important;
  gap: 0 !important;
}
html body.workspace-studio.has-active-video .app-body > .rail,
html body.workspace-studio.has-active-video #rail,
body.workspace-studio.has-active-video .app-body > .rail,
body.workspace-studio.has-active-video .rail {
  border-right: none !important;
  border-right-width: 0 !important;
  border-right-color: transparent !important;
  box-shadow: none !important;
}
html body.workspace-studio.has-active-video .app-body > .props,
html body.workspace-studio.has-active-video #props,
body.workspace-studio.has-active-video .app-body > .props,
body.workspace-studio.has-active-video .props {
  border-left: none !important;
  border-left-width: 0 !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
  background: #141210 !important;
}
html body.workspace-studio.has-active-video .rail-resizer,
html body.workspace-studio.has-active-video #rail-resizer,
html body.workspace-studio.has-active-video .props-resizer,
html body.workspace-studio.has-active-video #props-resizer,
body.workspace-studio.has-active-video .rail-resizer,
body.workspace-studio.has-active-video .props-resizer {
  background: #0c0a09 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Subpixel cover on stage column edges (dark 1px paint, not a visible frame) */
html body.workspace-studio.has-active-video #stage-wrap,
html body.workspace-studio.has-active-video .stage-wrap,
body.workspace-studio.has-active-video #stage-wrap,
body.workspace-studio.has-active-video .stage-wrap {
  background: #0c0a09 !important;
  border: none !important;
  outline: none !important;
  box-shadow:
    -1px 0 0 0 #0c0a09,
    1px 0 0 0 #0c0a09,
    0 -1px 0 0 #0c0a09 !important;
}
html body.workspace-studio.has-active-video .stage,
html body.workspace-studio.has-active-video #stage,
body.workspace-studio.has-active-video .stage {
  padding: 0 !important;
  background: #0c0a09 !important;
}
html body.workspace-studio.has-active-video .stage-inner,
body.workspace-studio.has-active-video .stage-inner {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Timeline only: optional framed preview card.
   Studio never gets a card border — the 1px gray ring in screenshots was this
   rule (or a lagging class match) still painting around full-bleed stage-inner. */
body.workspace-timeline .stage-inner {
  border-radius: 0.75rem;
  border: 1px solid rgba(124, 45, 18, 0.2);
  box-shadow: var(--shadow-lg);
}
/* Studio: hard-kill any border/outline/shadow on the stage stack (all media kinds) */
html body.workspace-studio #stage,
html body.workspace-studio #stage-inner,
html body.workspace-studio .stage,
html body.workspace-studio .stage-inner,
html body.workspace-studio #stage-wrap,
html body.workspace-studio .stage-wrap,
html body.workspace-studio #stage-main-col,
html body.workspace-studio .stage-main-col {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
}
/* Fallback when container queries unavailable */
@supports not (width: 1cqh) {
  .stage-inner {
    width: min(100%, 100%);
    max-height: 100%;
  }
}
.stage-inner video,
.stage-inner img,
.stage-inner canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Transparent so letterbox shows stage-inner bg (unfiltered).
     Grade/filter on the media element must not tint the backdrop. */
  background: transparent;
}
.stage-inner audio {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  width: auto;
}
.stage-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  color: #a8a29e;
  pointer-events: none;
  background: linear-gradient(160deg, #292524, #1c1917 55%, #431407);
}
/* display:grid above beats bare [hidden] — force hide when attribute is set */
.stage-placeholder[hidden] {
  display: none !important;
}
.stage-placeholder strong {
  display: block;
  color: #fef3c7;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
/* Keep media above dark stage chrome when visible */
.stage-inner video:not([hidden]),
.stage-inner img:not([hidden]),
.stage-inner canvas:not([hidden]) {
  position: relative;
  z-index: 1;
}
.stage-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  /* No light border-top; panel color distinguishes the bar from the stage */
  border-top: none;
  background: #1c1917;
  color: #e7e5e4;
  /* Always above timeline dock (app-body bottom tracks --bottom) */
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
/* Timeline light theme can keep a lighter transport bar */
body.workspace-timeline:not(.theme-dark) .stage-toolbar {
  background: #ffffff;
  color: var(--text);
  border-top: 1px solid var(--stroke);
}
.stage-toolbar .time {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  min-width: 7.5rem;
}
.transport {
  display: inline-flex;
  gap: 0.35rem;
}

/* Props */
.field {
  margin-bottom: 0.75rem;
}
.field label {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Clip name: editable stem + locked extension */
.prop-name-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  border: 1px solid var(--stroke);
  border-radius: 0.45rem;
  overflow: hidden;
  background: var(--panel-soft, #fff8f1);
}
.prop-name-row #prop-name {
  flex: 1 1 auto;
  min-width: 0;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.prop-name-ext {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 0.55rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.04);
  border-left: 1px solid var(--stroke);
  user-select: none;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.theme-dark .prop-name-row {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.08);
}
body.theme-dark .prop-name-ext {
  background: rgba(0, 0, 0, 0.25);
  border-left-color: rgba(255, 255, 255, 0.08);
  color: #a8a29e;
}
.field label .val {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
}
.props .section {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--stroke);
}
.props .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
.props p.note {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
  margin: 0.35rem 0 0;
}

/* Drag handle above the timeline dock (taller hit area; pill sits on the seam) */
.timeline-resizer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--bottom);
  height: 12px;
  margin-bottom: -2px;
  z-index: 36;
  cursor: ns-resize;
  touch-action: none;
  background: transparent;
}
.timeline-resizer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  width: 2.75rem;
  height: 4px;
  border-radius: 99px;
  background: rgba(168, 162, 158, 0.5);
  transition: background 0.12s ease, width 0.12s ease;
  pointer-events: none;
}
.timeline-resizer:hover::after,
body.is-resizing-timeline .timeline-resizer::after {
  background: rgba(249, 115, 22, 0.9);
  width: 3.5rem;
}
body.is-resizing-timeline {
  cursor: ns-resize !important;
  user-select: none !important;
}
body.is-resizing-timeline * {
  cursor: ns-resize !important;
}
body.theme-dark .timeline-resizer::after {
  background: rgba(168, 162, 158, 0.35);
}
body.theme-dark .timeline-resizer:hover::after,
body.theme-dark body.is-resizing-timeline .timeline-resizer::after {
  background: rgba(251, 191, 36, 0.8);
}
/* Timeline — short dock by default; user can drag taller */
.timeline {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bottom);
  max-height: min(70vh, 36rem);
  z-index: 35;
  border-top: 1px solid var(--stroke);
  background: #fffbf5;
  display: flex;
  flex-direction: column;
  padding: 0.2rem 0.4rem 0.2rem;
  box-shadow: 0 -8px 28px rgba(20, 8, 4, 0.12);
  overflow: hidden;
}
.timeline[hidden],
#timeline[hidden],
.timeline-resizer[hidden],
#timeline-resizer[hidden] {
  display: none !important;
}
/* Body: left media library + main track area */
.timeline-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.4rem;
  align-items: stretch;
}
.timeline-media {
  flex: 0 0 12.5rem;
  width: 12.5rem;
  min-width: 10rem;
  max-width: 18rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--stroke);
  padding-right: 0.35rem;
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.65), transparent 40%);
}
.timeline-media-head {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
  min-height: 1.4rem;
  margin-bottom: 0.2rem;
}
.timeline-media-head h2 {
  margin: 0;
  font-size: 0.78rem;
  flex: 1 1 auto;
}
.timeline-media-head .ghost {
  padding: 0.1rem 0.35rem;
  font-size: 0.68rem;
  min-height: 0;
}
.timeline-media-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding-bottom: 0.15rem;
  scrollbar-width: thin;
}
.timeline-media-list .media-item {
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: 0.3rem;
  padding: 0.28rem;
  border-radius: 0.5rem;
}
.timeline-media-list .media-thumb {
  width: 2.4rem;
  height: 1.7rem;
  font-size: 0.55rem;
}
.timeline-media-list .media-meta .name {
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-media-list .media-meta .sub {
  font-size: 0.62rem;
}
.timeline-media-list .empty-hint {
  font-size: 0.72rem;
  margin: 0.4rem 0.15rem;
  color: var(--muted);
}
.timeline-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.timeline-head {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.12rem;
  flex: 0 0 auto;
  min-height: 1.4rem;
}
.timeline-head h2 { margin: 0; font-size: 0.8rem; }
.timeline-head .spacer { flex: 1; }
.timeline-head .time {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
}
.timeline-head .ghost {
  padding: 0.12rem 0.32rem;
  font-size: 0.72rem;
  min-height: 0;
}
/* Legacy multi-lane rows (B/C/V2) — kept in DOM, never shown */
.track-row-legacy,
.track-row[hidden] {
  display: none !important;
}
body.theme-dark .timeline-media {
  background: linear-gradient(180deg, rgba(41, 37, 36, 0.55), transparent 45%);
  border-right-color: rgba(168, 162, 158, 0.22);
}
.track {
  flex: 1 1 auto;
  min-height: 2.35rem;
  max-height: 2.55rem;
  height: 2.45rem;
  /* Keep overflow for wheel/trackpad pan when zoomed — never show the bar */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge */
  border-radius: 0.4rem;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, #fffbeb, #ffedd5);
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.track::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Chromium Edge */
  width: 0;
  height: 0;
}
/* Overlay / A2 lane scroll areas — same rule */
.track-lane .track-inner,
.track-lanes {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.track-lane .track-inner::-webkit-scrollbar,
.track-lanes::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.track-inner {
  position: relative;
  height: 100%;
  min-width: 100%;
  /* Absolute clips/playhead share one time→px scale. No horizontal padding —
     JS TL_PAD is the only left inset so A/B/C/V2/A2 stay pixel-aligned. */
  display: block;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* All lane inners — same stacking rules */
.track-inner > .clip {
  z-index: 1;
  box-sizing: border-box;
}
.track-inner > .playhead {
  z-index: 6;
}
.clip {
  flex: 0 0 auto;
  min-width: 0;
  /* max-width set none when zoomed; default roomy */
  max-width: none;
  height: 100%;
  border-radius: 0.4rem;
  /* Default = video (red); image/audio override via data-kind */
  border: 1px solid rgba(239, 68, 68, 0.5);
  background: linear-gradient(160deg, #fecaca, #fca5a5 55%, #f87171);
  color: #7f1d1d;
  padding: 0.2rem 0.35rem;
  margin: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.08rem;
  user-select: none;
  box-shadow: 0 1px 4px rgba(234, 88, 12, 0.1);
  color: var(--text);
  box-sizing: border-box;
  overflow: hidden;
}
.clip .clip-name {
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip .clip-sub {
  font-size: 0.65rem;
  line-height: 1.15;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip.is-active {
  border-color: #ea580c;
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.28);
}
/* Multi-select (Shift+click) — gold ring distinct from primary active */
.clip.is-selected {
  box-shadow:
    0 0 0 2px rgba(251, 191, 36, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.25);
  border-color: rgba(251, 191, 36, 0.85);
}
.clip.is-active.is-selected {
  box-shadow:
    0 0 0 2px rgba(234, 88, 12, 0.4),
    0 0 0 4px rgba(251, 191, 36, 0.45);
}
.clip.is-dragging {
  cursor: grabbing;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  outline: 2px solid rgba(251, 191, 36, 0.65);
}
/* Empty gap between media — transparent slot + duration label only */
.clip.is-gap {
  border: 1px dashed rgba(168, 162, 158, 0.35);
  background: transparent;
  box-shadow: none !important;
  outline: none !important;
  color: var(--muted);
  opacity: 1;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.2rem;
  min-width: 0;
}
/* Playhead over a gap must not light it up like a selected clip */
.clip.is-gap.is-active,
.clip.is-gap.is-selected,
.clip[data-kind="gap"].is-active,
.clip[data-kind="gap"].is-selected {
  border-color: rgba(168, 162, 158, 0.35) !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}
.clip.is-gap .gap-label {
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  user-select: none;
}
.clip.is-gap .clip-name,
.clip.is-gap .clip-sub {
  display: none;
}
.clip.is-gap:hover {
  border-color: rgba(168, 162, 158, 0.55);
  background: rgba(168, 162, 158, 0.06);
}
.clip:not(.is-gap) {
  cursor: grab;
}
/* Timeline edge handles — drag to trim in/out (or resize silence) */
.clip-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  z-index: 4;
  cursor: ew-resize;
  touch-action: none;
  background: transparent;
}
.clip-edge-l {
  left: 0;
  border-radius: 0.5rem 0 0 0.5rem;
}
.clip-edge-r {
  right: 0;
  border-radius: 0 0.5rem 0.5rem 0;
}
.clip-edge:hover,
.clip-edge:focus-visible,
.clip.is-trimming .clip-edge {
  background: linear-gradient(
    90deg,
    rgba(251, 191, 36, 0.15),
    rgba(251, 191, 36, 0.45),
    rgba(251, 191, 36, 0.15)
  );
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.55);
}
.clip-edge-l:hover,
.clip.is-trimming .clip-edge-l {
  background: linear-gradient(
    90deg,
    rgba(251, 191, 36, 0.55),
    rgba(251, 191, 36, 0.12)
  );
}
.clip-edge-r:hover,
.clip.is-trimming .clip-edge-r {
  background: linear-gradient(
    90deg,
    rgba(251, 191, 36, 0.12),
    rgba(251, 191, 36, 0.55)
  );
}
body.is-trimming-clip {
  cursor: ew-resize !important;
  user-select: none;
}
body.is-trimming-clip .playhead {
  pointer-events: none;
}
body.is-dragging-clip {
  cursor: grabbing !important;
  user-select: none;
}
body.is-dragging-clip .playhead {
  pointer-events: none;
}
body.theme-dark .clip.is-gap {
  border-color: rgba(168, 162, 158, 0.28);
  color: #a8a29e;
  background: transparent;
}
body.theme-dark .clip.is-gap:hover {
  background: rgba(168, 162, 158, 0.08);
}
.clip .clip-name {
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip .clip-sub {
  font-size: 0.65rem;
  color: var(--muted);
}
/* Images = purple */
.clip[data-kind="image"] {
  border-color: rgba(147, 51, 234, 0.65) !important;
  background: linear-gradient(160deg, #f3e8ff, #e9d5ff 50%, #d8b4fe) !important;
  color: #581c87;
}
/* Videos = red */
.clip[data-kind="video"] {
  border-color: rgba(239, 68, 68, 0.6) !important;
  background: linear-gradient(160deg, #fecaca, #fca5a5 50%, #f87171) !important;
  color: #7f1d1d;
}
/* Audio is always green on every timeline (A / V side lanes) */
.clip[data-kind="audio"],
.clip[data-kind="audio"].is-lane-b,
.clip[data-kind="audio"].is-lane-c,
.clip[data-kind="audio"].is-a2,
.clip[data-kind="audio"].is-overlay {
  border-color: rgba(22, 163, 74, 0.55) !important;
  background: linear-gradient(160deg, #dcfce7, #bbf7d0 50%, #a7f3d0) !important;
  color: #14532d;
}
.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #dc2626;
  /* Was none — blocked grab/drag scrub */
  pointer-events: auto;
  z-index: 6;
  /* left is set by JS via timeToX (same scale as every lane’s clips) */
  left: 0;
  margin: 0;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.5);
  cursor: ew-resize;
  touch-action: none;
  box-sizing: border-box;
}
/* Wide invisible grab zone + top handle knob */
.playhead::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -7px;
  width: 16px;
  cursor: ew-resize;
}
.playhead::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 12px;
  background: #ef4444;
  border-radius: 2px 2px 3px 3px;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(254, 202, 202, 0.35);
  pointer-events: none;
}
.playhead:hover,
.playhead:focus-visible {
  background: #f87171;
  outline: none;
}
.playhead:hover::after,
.playhead:focus-visible::after {
  background: #fca5a5;
}
body.is-dragging-playhead {
  cursor: ew-resize !important;
  user-select: none;
}
body.is-dragging-playhead .clip,
body.is-dragging-playhead .tl-marker,
body.is-dragging-playhead .tl-comment {
  pointer-events: none;
}
body.theme-dark .playhead::after {
  background: #f87171;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(254, 202, 202, 0.25);
}

.toast {
  position: fixed;
  z-index: 200;
  left: 50%;
  /* True bottom of the viewport (not mid-stage above the timeline) */
  bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(0.45rem);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(249, 115, 22, 0.4);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  max-width: min(28rem, calc(100vw - 2rem));
  text-align: center;
  box-shadow: var(--shadow);
}
.toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#file-input { display: none; }

/* Tiny shared pillbox for FAQ + contact */
.site-contact {
  position: fixed;
  z-index: 45;
  left: 0;
  right: 0;
  bottom: 0;
  padding:
    0.65rem 1rem
    max(0.75rem, env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  pointer-events: none;
  border: none;
  background: none;
}
/* Empty welcome only — hide once media is in the editor */
body.has-media .site-contact,
body.has-media .site-contact-toast {
  display: none !important;
}
.site-contact-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: rgba(28, 25, 23, 0.88);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-contact button {
  appearance: none;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.75rem;
  border-radius: 0;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #d6d3d1;
  box-shadow: none;
  transition: color 0.12s ease, background 0.12s ease;
  touch-action: manipulation;
}
.site-contact button + button {
  border-left: 1px solid rgba(251, 191, 36, 0.18);
}
.site-contact button:hover,
.site-contact button:focus-visible {
  color: #fef3c7;
  background: rgba(120, 53, 15, 0.45);
  outline: none;
  border-color: transparent;
}
.site-contact .label {
  color: inherit;
  opacity: 0.8;
}
.site-contact .addr {
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.site-contact-toast {
  position: fixed;
  z-index: 130;
  left: 50%;
  bottom: max(2.75rem, calc(env(safe-area-inset-bottom, 0px) + 2.25rem));
  transform: translateX(-50%) translateY(0.4rem);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #fef3c7;
  background: rgba(28, 25, 23, 0.94);
  border: 1px solid rgba(251, 191, 36, 0.32);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.site-contact-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.faq-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: 1.25rem;
  background: rgba(8, 6, 14, 0.4);
  backdrop-filter: blur(6px);
}
.faq-overlay.is-on { display: grid; }
.faq-panel {
  width: min(28rem, 100%);
  max-height: min(80vh, 36rem);
  overflow: auto;
  padding: 1.25rem 1.15rem 1.1rem;
  border-radius: 1rem;
  border: 1px solid var(--stroke);
  background: rgba(255, 252, 248, 0.97);
  box-shadow: var(--shadow-lg);
  text-align: left;
  color: var(--text);
}
.faq-panel header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.faq-panel h2 {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.faq-panel .close {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: none;
}
.faq-panel .close:hover {
  color: var(--text);
  background: rgba(255, 247, 237, 0.8);
}
.faq-item {
  border-top: 1px solid var(--stroke);
  padding: 0.65rem 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}
.faq-panel .note {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0.5rem 0 0.85rem;
}
.faq-panel .lib-fav-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text);
  margin: 0.25rem 0;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.faq-panel .field > label:first-child {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Settings / FAQ / project sheets in dark mode */
body.theme-dark .faq-overlay {
  background: rgba(0, 0, 0, 0.62);
}
body.theme-dark .faq-panel {
  background: #1c1917;
  border-color: rgba(251, 191, 36, 0.22);
  color: #e7e5e4;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);
}
body.theme-dark .faq-panel h2 {
  color: #fafaf9;
}
body.theme-dark .faq-panel .close {
  color: #a8a29e;
}
body.theme-dark .faq-panel .close:hover {
  color: #fef3c7;
  background: rgba(68, 64, 60, 0.85);
}
body.theme-dark .faq-panel .note,
body.theme-dark .faq-panel .field > label:first-child,
body.theme-dark .faq-item p {
  color: #a8a29e;
}
body.theme-dark .faq-panel .lib-fav-label {
  color: #e7e5e4;
}
body.theme-dark .faq-item {
  border-top-color: rgba(251, 191, 36, 0.12);
}
body.theme-dark .faq-item summary {
  color: #fafaf9;
}
body.theme-dark .faq-panel input[type="number"],
body.theme-dark .faq-panel input[type="text"],
body.theme-dark .faq-panel input[type="search"],
body.theme-dark .faq-panel select,
body.theme-dark .faq-panel textarea {
  background: #0c0a09;
  color: #e7e5e4;
  border-color: rgba(251, 191, 36, 0.22);
}
body.theme-dark .faq-panel button:not(.primary) {
  background: #292524;
  color: #e7e5e4;
  border-color: rgba(251, 191, 36, 0.22);
}
body.theme-dark .faq-panel button:not(.primary):hover:not(:disabled) {
  background: #44403c;
}
body.theme-dark .faq-panel button.close {
  background: transparent;
  border-color: transparent;
}
body.theme-dark .error-sheet,
body.theme-dark .cmd-panel {
  background: #1c1917;
  border-color: rgba(251, 191, 36, 0.22);
  color: #e7e5e4;
}

/* ── Image-only project mode (Studio default for stills) ─────────────
   Stills on stage: crop / transform / export PNG. No timeline.
   Timeline workspace can still open the dock for sequences. */
body.is-image-only {
  --bottom: 0;
}
body.is-image-only.workspace-studio .timeline,
body.is-image-only.workspace-studio .timeline-resizer,
body.is-image-only.workspace-studio #timeline,
body.is-image-only.workspace-studio #timeline-resizer,
body.is-image-only:not(.workspace-timeline) .timeline,
body.is-image-only:not(.workspace-timeline) .timeline-resizer,
body.is-image-only:not(.workspace-timeline) #timeline,
body.is-image-only:not(.workspace-timeline) #timeline-resizer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Timeline workspace: media panel + V1–V3 + A for stills libraries
   Must NOT apply on lobby (is-empty) */
body.is-image-only.workspace-timeline:not(.is-empty) {
  --bottom: 20rem;
}
body.is-image-only.workspace-timeline:not(.is-empty) .timeline,
body.is-image-only.workspace-timeline:not(.is-empty) #timeline {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.is-image-only.workspace-timeline:not(.is-empty) .timeline-resizer,
body.is-image-only.workspace-timeline:not(.is-empty) #timeline-resizer {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.is-image-only.workspace-timeline:not(.is-empty) .app-body {
  bottom: var(--bottom, 11.5rem);
}
/* Studio stills: hide transport / sequence chrome */
body.is-image-only.workspace-studio .stage-toolbar,
body.is-image-only:not(.workspace-timeline) .stage-toolbar,
body.workspace-studio.is-image-only .stage-toolbar {
  display: none !important;
}
body.is-image-only.workspace-studio #btn-play,
body.is-image-only.workspace-studio #btn-stop,
body.is-image-only.workspace-studio #btn-seq-mode,
body.is-image-only.workspace-studio #btn-split,
body.is-image-only.workspace-studio #btn-loop,
body.is-image-only.workspace-studio #btn-marker,
body.is-image-only.workspace-studio #btn-comment,
body.is-image-only.workspace-studio #btn-export-sequence,
body.is-image-only.workspace-studio #btn-screenshot,
body.is-image-only.workspace-studio #btn-fullscreen,
body.is-image-only.workspace-studio #scrub-wrap,
body.is-image-only.workspace-studio .scrub-wrap,
body.is-image-only.workspace-studio .audio-meter,
body.is-image-only.workspace-studio #audio-meter,
body.is-image-only:not(.workspace-timeline) #btn-play,
body.is-image-only:not(.workspace-timeline) #btn-stop,
body.is-image-only:not(.workspace-timeline) #btn-seq-mode,
body.is-image-only:not(.workspace-timeline) #btn-split,
body.is-image-only:not(.workspace-timeline) #btn-loop,
body.is-image-only:not(.workspace-timeline) #btn-marker,
body.is-image-only:not(.workspace-timeline) #btn-comment,
body.is-image-only:not(.workspace-timeline) #btn-export-sequence,
body.is-image-only:not(.workspace-timeline) #btn-screenshot,
body.is-image-only:not(.workspace-timeline) #btn-fullscreen,
body.is-image-only:not(.workspace-timeline) #scrub-wrap,
body.is-image-only:not(.workspace-timeline) .scrub-wrap,
body.is-image-only:not(.workspace-timeline) .audio-meter,
body.is-image-only:not(.workspace-timeline) #audio-meter {
  display: none !important;
}
/* Timeline + stills: restore transport for sequence scrub / play */
body.is-image-only.workspace-timeline .stage-toolbar {
  display: flex !important;
}
body.is-image-only.workspace-timeline #btn-play,
body.is-image-only.workspace-timeline #btn-stop,
body.is-image-only.workspace-timeline #btn-seq-mode,
body.is-image-only.workspace-timeline #btn-loop,
body.is-image-only.workspace-timeline #scrub-wrap,
body.is-image-only.workspace-timeline .scrub-wrap {
  display: revert !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* Image props: hide A/V noise; show stills tools + look/grade */
body.is-image-only #props-av,
body.is-image-only #props-eq,
body.is-image-only #props-gain,
body.is-image-only #props-ramp,
body.is-image-only #props-gate,
body.is-image-only #props-transform,
body.is-image-only #props-crop,
body.is-image-only .image-hide-ken-end,
body.is-image-only #btn-ken-burns-in,
body.is-image-only .av-only-field,
body.is-image-only #props-image-actions,
body.is-image-only .image-only-actions,
body.is-image-only #props-chroma,
body.is-image-only #props-captions,
body.is-image-only #props-stickers,
body.is-image-only #props-ab-wipe {
  display: none !important;
}
/* Hold duration is timeline-only */
body.is-image-only.workspace-studio #props-image,
body.is-image-only:not(.workspace-timeline) #props-image {
  display: none !important;
}
body.is-image-only.workspace-timeline #props-image {
  display: block !important;
}
/* Deep image adjust tools: Studio only */
body.is-image-only.workspace-studio #props-image-edit,
body.is-image-only:not(.workspace-timeline) #props-image-edit {
  display: block !important;
}
body.is-image-only.workspace-timeline #props-image-edit {
  display: none !important;
}
body.is-image-only .image-keep-field.video-only,
body.is-image-only .field.image-keep-field {
  display: block !important;
}
.stage-bg-field {
  position: relative;
}
.stage-bg-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.stage-bg-swatch {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 0.28rem;
  border: 1px solid var(--stroke);
  background: var(--stage-bg, #1c1917);
  flex: 0 0 auto;
  padding: 0;
  cursor: pointer;
}
.stage-bg-swatch:hover {
  border-color: var(--stroke-hi);
}
.stage-bg-row #stage-bg-hex {
  width: 5.8rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: lowercase;
}
.stage-bg-chip {
  font-size: 0.72rem;
  padding: 0.22rem 0.5rem;
}
.stage-bg-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 0.35rem);
  z-index: 40;
  width: 12.5rem;
  padding: 0.55rem;
  border-radius: 0.55rem;
  background: #1c1917;
  border: 1px solid rgba(251, 191, 36, 0.28);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.stage-bg-pop[hidden] {
  display: none !important;
}
.stage-bg-sv {
  position: relative;
  width: 100%;
  height: 7.2rem;
  border-radius: 0.3rem;
  cursor: crosshair;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, var(--stage-bg-hue-color, #ea580c));
  touch-action: none;
}
.stage-bg-sv-knob {
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  margin: -0.35rem 0 0 -0.35rem;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.stage-bg-hue {
  width: 100%;
  margin: 0.5rem 0 0;
  height: 0.7rem;
  appearance: none;
  background: linear-gradient(
    to right,
    #f00,
    #ff0,
    #0f0,
    #0ff,
    #00f,
    #f0f,
    #f00
  );
  border-radius: 0.35rem;
}
.stage-bg-hue::-webkit-slider-thumb {
  appearance: none;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #1c1917;
  cursor: pointer;
}
body.is-image-only .image-keep-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.35rem;
}
body.is-image-only #btn-replace-media-img {
  display: inline-flex !important;
}
body.is-image-only #btn-replace-media-img[hidden] {
  display: inline-flex !important;
}
/* Duplicate still tool removed from the left rail */
.image-tool-rail [data-img-tool="duplicate"],
body.is-image-only #btn-dup,
body.is-image-only #btn-dup-img {
  display: none !important;
}
/* Soften props chrome for stills */
body.is-image-only #props-heading {
  letter-spacing: 0.02em;
}
body.is-image-only #prop-kind {
  font-size: 0.75rem;
  opacity: 0.85;
}
/* Quick tools */
.img-quick-row,
.img-crop-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0 0.55rem;
}
.img-quick-row button,
.img-crop-presets button {
  flex: 1 1 auto;
  min-width: 3.2rem;
  padding: 0.28rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 650;
}
.img-crop-presets button.is-on,
.img-quick-row button.is-on {
  border-color: rgba(234, 88, 12, 0.65);
  background: rgba(251, 146, 60, 0.18);
  color: #9a3412;
}
body.theme-dark .img-crop-presets button.is-on,
body.theme-dark .img-quick-row button.is-on {
  color: #fde68a;
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.45);
}
/* Nearest-neighbor scaling for pixel art stills */
#preview-image.is-pixelated,
img.is-pixelated {
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}
#props-image-edit .props-subhead {
  margin-top: 0.15rem;
}
#img-edit-hint {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
}
body.is-image-only .app-body {
  /* full height to bottom — no timeline dock */
  bottom: 0;
}
/* Photo fills the whole center column — no framed “stage card”.
   Stage bg is unfiltered; grade/filter only on #preview-image. */
body.is-image-only .stage-wrap,
body.workspace-studio.is-image-only .stage-wrap {
  padding: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  /* Dimmer letterbox — JS may darken further from stage-bg picker */
  background: #050403;
  min-width: 0;
  min-height: 0;
  height: 100% !important;
  max-height: 100% !important;
  filter: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}
/* Photoshop-style left tool rail — flush left of the stage column */
.image-tool-rail {
  display: none;
  flex: 0 0 2.75rem;
  flex-grow: 0;
  flex-shrink: 0;
  width: 2.75rem;
  min-width: 2.75rem;
  max-width: 2.75rem;
  height: auto;
  align-self: stretch;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.15rem;
  padding: 0.4rem 0.25rem;
  margin: 0 !important;
  order: -1; /* always left edge of stage-wrap */
  z-index: 8;
  background: linear-gradient(180deg, #1c1917 0%, #0c0a09 100%);
  border-right: 1px solid rgba(251, 191, 36, 0.14);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.image-tool-rail::-webkit-scrollbar { display: none; }
/* Image tool rail: Studio stills (or any active image outside Timeline) */
body.is-image-only.workspace-studio .image-tool-rail:not([hidden]),
body.is-image-only:not(.workspace-timeline) .image-tool-rail:not([hidden]),
body.workspace-studio.has-active-image .image-tool-rail:not([hidden]),
body.has-active-image:not(.workspace-timeline) .image-tool-rail:not([hidden]) {
  display: flex !important;
}
body.workspace-timeline .image-text-options,
body.workspace-timeline .image-tool-rail,
body:not(.is-image-only):not(.has-active-image) .image-tool-rail {
  display: none !important;
}
body.workspace-timeline:not([data-image-tool="crop"]) .image-crop-options {
  display: none !important;
}
.img-tool {
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background: transparent;
  color: #d6d3d1;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}
.img-tool svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  pointer-events: none;
}
.img-tool:hover {
  background: rgba(251, 191, 36, 0.1);
  color: #fef3c7;
  border-color: rgba(251, 191, 36, 0.2);
}
.img-tool.is-on,
.img-tool[aria-pressed="true"] {
  background: rgba(234, 88, 12, 0.22);
  color: #fdba74;
  border-color: rgba(249, 115, 22, 0.55);
}
.img-tool-sep {
  width: 1.4rem;
  height: 1px;
  margin: 0.25rem 0;
  background: rgba(168, 162, 158, 0.28);
  flex: 0 0 auto;
}
body:not(.theme-dark) .image-tool-rail {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  border-right-color: rgba(124, 45, 18, 0.14);
}
body:not(.theme-dark) .img-tool {
  color: #57534e;
}
body:not(.theme-dark) .img-tool:hover {
  color: #9a3412;
  background: rgba(249, 115, 22, 0.1);
}
body:not(.theme-dark) .img-tool.is-on {
  color: #9a3412;
  background: rgba(251, 146, 60, 0.22);
  border-color: rgba(234, 88, 12, 0.45);
}
.img-tool-flash {
  outline: 2px solid rgba(249, 115, 22, 0.75);
  outline-offset: 2px;
  border-radius: 0.4rem;
}
#sf-tool-tip {
  position: fixed;
  z-index: 80;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  margin: 0;
  padding: 0.28rem 0.5rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(251, 191, 36, 0.42);
  background: rgba(28, 25, 23, 0.96);
  color: #fef3c7;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38);
}
#sf-tool-tip[hidden] {
  display: none !important;
}
body.is-image-only .stage-main-col,
body.workspace-studio.is-image-only .stage-main-col {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.is-image-only .stage,
body.workspace-studio.is-image-only .stage {
  padding: 0 !important;
  place-items: stretch !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  position: relative !important;
  background: transparent !important;
  filter: none !important;
  overflow: hidden !important;
}
/* Photoshop-style text options bar (above canvas when Text tool is active) */
.image-text-options {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  padding: 0.4rem 0.65rem;
  z-index: 12;
  background: rgba(28, 25, 23, 0.96);
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
  color: #fafaf9;
  font-size: 0.78rem;
}
body.is-image-only body[data-image-tool="text"] .image-text-options,
body.is-image-only[data-image-tool="text"] .image-text-options:not([hidden]) {
  display: flex !important;
}
body.is-image-only .image-text-options:not([hidden]) {
  display: flex !important;
}
.image-text-options[hidden] {
  display: none !important;
}
.img-text-opt-label {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: rgba(253, 230, 138, 0.85);
}
.img-text-input {
  flex: 1 1 10rem;
  min-width: 8rem;
  max-width: 22rem;
  padding: 0.32rem 0.5rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(251, 191, 36, 0.3);
  background: rgba(12, 10, 9, 0.85);
  color: #fafaf9;
  font: inherit;
  font-size: 0.88rem;
}
.img-text-area {
  min-height: 2.4rem;
  max-height: 5.5rem;
  resize: vertical;
  line-height: 1.25;
  white-space: pre-wrap;
}

.img-text-size {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 650;
  color: #d6d3d1;
}
.img-text-size input[type="range"] {
  width: 5.5rem;
}
.img-text-color input[type="color"] {
  width: 1.75rem;
  height: 1.55rem;
  padding: 0;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 0.3rem;
  background: transparent;
  cursor: pointer;
}
.img-text-align {
  display: inline-flex;
  gap: 0.15rem;
}
.img-text-align button {
  min-width: 1.6rem;
  padding: 0.2rem 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
}
.img-text-align button.is-on {
  border-color: rgba(249, 115, 22, 0.65);
  background: rgba(234, 88, 12, 0.25);
  color: #fdba74;
}
body:not(.theme-dark) .image-text-options {
  background: rgba(255, 247, 237, 0.98);
  border-bottom-color: rgba(124, 45, 18, 0.14);
  color: #1c1917;
}
body:not(.theme-dark) .img-text-input {
  background: #fff;
  color: #1c1917;
  border-color: rgba(234, 88, 12, 0.3);
}
body:not(.theme-dark) .img-text-opt-label {
  color: #9a3412;
}
/* Editable / draggable text when Text tool is active */
body.is-image-only[data-image-tool="text"] .stage-text-overlay {
  pointer-events: auto !important;
  cursor: move;
  outline: 1px dashed rgba(251, 191, 36, 0.55);
  outline-offset: 3px;
  min-width: 2rem;
  min-height: 1.2em;
}
body.is-image-only[data-image-tool="text"] .stage-text-overlay:focus {
  outline: 2px solid rgba(249, 115, 22, 0.85);
  outline-offset: 3px;
}
body.is-image-only #props-captions,
body.is-image-only .field:has(#text-overlay-enabled),
body.is-image-only .field:has(#text-overlay-text) {
  display: none !important;
}
body.is-image-only .stage-inner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  /* Dimmer unfiltered backdrop (exact color from JS — darker than editable media) */
  overflow: hidden !important;
  filter: none !important;
}
body.is-image-only .stage-inner::after,
body.is-image-only .stage-inner::before {
  display: none !important;
  content: none !important;
  border: none !important;
  box-shadow: none !important;
}
/*
 * Edge guide: outer shell is the full stage. Inner frame is the content box
 * (object-fit:contain for photos, snapped integer box for pixel canvases).
 * Do not `inset:auto` the shell — that pins a leftover 0,0 box to the corner.
 */
.image-edge-guide {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  transform-origin: center center;
  opacity: 0;
  transition: opacity 0.12s ease;
  overflow: visible;
}
body.is-image-only.has-pixel-canvas .image-edge-guide,
body.is-image-only.has-pixel-canvas #image-edge-guide {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}
.image-edge-guide.is-on {
  opacity: 1;
}
.image-edge-guide-frame {
  position: absolute;
  box-sizing: border-box;
  outline: 1px solid rgba(250, 250, 249, 0.78);
  outline-offset: 1px;
  box-shadow: none;
  border-radius: 0;
  pointer-events: none;
}
body.stage-bg-light .image-edge-guide-frame,
body.stage-bg-light #image-edge-guide-frame {
  outline-color: rgba(12, 10, 9, 0.9);
}
body.stage-bg-dark .image-edge-guide-frame,
body.stage-bg-dark #image-edge-guide-frame {
  outline-color: rgba(250, 250, 249, 0.82);
}
/* Full-canvas hit area so Move works on letterbox, not only painted pixels */
body.is-image-only .stage-inner {
  cursor: grab;
  touch-action: none;
}
body.is-image-only[data-image-tool="move"] .stage-inner,
body.is-image-only:not([data-image-tool]) .stage-inner {
  cursor: grab;
}
body.is-image-only.is-image-stage-drag .stage-inner,
body.is-image-only.is-image-stage-drag #preview-image {
  cursor: grabbing !important;
}
body.is-image-only[data-image-tool="zoom"] .stage-inner {
  cursor: zoom-in;
}
body.is-image-only[data-image-tool="eyedropper"] .stage-inner {
  cursor: crosshair;
}
body.is-image-only[data-image-tool="text"] .stage-inner {
  cursor: text;
}
/* Photoshop-style paragraph text box — host matches image transform */
.sf-text-box-host {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  transform-origin: center center;
  display: none;
}
body.is-image-only .sf-text-box-host.is-on:not([hidden]) {
  display: block;
}
.sf-text-box {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #38bdf8;
  outline: 1px solid rgba(12, 10, 9, 0.65);
  cursor: move;
  pointer-events: auto;
  touch-action: none;
  /* Subtle fill so the body is easy to grab (not only the border) */
  background: rgba(56, 189, 248, 0.06);
  min-width: 20px;
  min-height: 16px;
}
.sf-text-box.is-dragging {
  background: rgba(56, 189, 248, 0.1);
  cursor: grabbing;
}
.sf-text-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #fff;
  border: 1.5px solid #0ea5e9;
  box-sizing: border-box;
  border-radius: 1px;
  pointer-events: auto;
  touch-action: none;
  z-index: 2;
}
/* Larger invisible hit pad — Photoshop-sized targets */
.sf-text-handle::before {
  content: "";
  position: absolute;
  inset: -7px;
}
.sf-text-handle[data-sf-th="nw"] { left: -5px; top: -5px; cursor: nwse-resize; }
.sf-text-handle[data-sf-th="ne"] { right: -5px; top: -5px; cursor: nesw-resize; }
.sf-text-handle[data-sf-th="e"]  { right: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.sf-text-handle[data-sf-th="se"] { right: -5px; bottom: -5px; cursor: nwse-resize; }
.sf-text-handle[data-sf-th="sw"] { left: -5px; bottom: -5px; cursor: nesw-resize; }
.sf-text-handle[data-sf-th="w"]  { left: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
/* Composite canvas mirrors #preview-image (object-fit + transform) */
body.is-image-only .still-composite:not([hidden]) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  z-index: 5 !important;
  pointer-events: none;
  background: transparent !important;
  transform-origin: center center !important;
  image-rendering: auto;
}
body.is-image-only .still-composite.is-pixelated:not([hidden]),
body.is-image-only .still-composite.is-pixelated {
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}
/* Composite paints text/pixelate — body.has-still-composite is only set while canvas is on.
   Raw photo stays under for decode; hide it only while composite is live. */
body.is-image-only.has-still-composite #preview-image {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.is-image-only:not(.has-still-composite) #preview-image:not([hidden]) {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  display: block !important;
}
/* Text HUD is only for video; image mode uses the composite canvas */
body.is-image-only .stage-text-overlay {
  display: none !important;
}
body.is-image-only #preview-image:not([hidden]) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  /* Fit the whole center column (rail + props stay as menus) */
  object-fit: contain !important;
  z-index: 4 !important;
  /* pointer-events kept on so eyedropper/sample can hit pixels; pan is on stage */
  cursor: inherit;
  user-select: none;
  -webkit-user-drag: none;
  /* Critical: transparent letterbox so grade filter does not tint the backdrop */
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  transform-origin: center center !important;
  will-change: transform;
  transition: none !important;
  isolation: isolate;
}
/* Must follow the opacity:1 rule — equal-specificity hide was losing, so
   eraser holes showed the original still until pointerup replaced src. */
body.is-image-only.has-still-composite #preview-image,
body.is-image-only.has-still-composite #preview-image:not([hidden]),
body.is-image-only.is-pixel-painting #preview-image,
body.is-image-only.is-pixel-painting #preview-image:not([hidden]) {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.is-image-stage-drag #preview-image {
  cursor: grabbing !important;
}
/* Legacy injected crop chrome (old builds) — keep suppressed */
.image-stage-hint,
.image-crop-overlay,
.image-crop-frame,
.image-crop-handle,
.image-crop-shade,
#image-stage-hint,
#image-crop-overlay,
#image-crop-frame {
  display: none !important;
}
/* Crop tool options bar (mirrors text options) */
.image-crop-options {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  padding: 0.4rem 0.65rem;
  z-index: 12;
  background: rgba(28, 25, 23, 0.96);
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
  color: #fafaf9;
  font-size: 0.78rem;
}
body.is-image-only[data-image-tool="crop"] .image-crop-options:not([hidden]),
body.has-active-image[data-image-tool="crop"] .image-crop-options:not([hidden]),
body[data-image-tool="crop"] .image-crop-options:not([hidden]) {
  display: flex !important;
}
.image-crop-options[hidden] {
  display: none !important;
}
.img-crop-aspects {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}
.img-crop-aspects button {
  min-width: 2.2rem;
  padding: 0.22rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
}
.img-crop-aspects button.is-on {
  border-color: rgba(249, 115, 22, 0.65);
  background: rgba(234, 88, 12, 0.25);
  color: #fdba74;
}
.image-paint-options {
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0.32rem;
  padding: 0.4rem 0.65rem 0.45rem;
  z-index: 12;
  background: rgba(28, 25, 23, 0.96);
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
  color: #fafaf9;
  font-size: 0.78rem;
}
.img-paint-row,
.pixel-palette-bar,
.pixel-last-used-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}
.pixel-palette-bar {
  padding: 0.28rem 0.12rem 0.22rem 0;
  border-top: 1px solid rgba(251, 191, 36, 0.12);
  gap: 0.4rem 0.45rem;
  overflow: visible;
}
.pixel-last-used-bar[hidden] {
  display: none !important;
}
.pixel-palette-add {
  width: 1.35rem;
  height: 1.35rem;
  min-width: 1.35rem;
  padding: 0;
  line-height: 1;
  font-weight: 800;
  font-size: 0.95rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.22rem;
}
.sf-color-swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 7.2rem;
  height: 2.15rem;
  padding: 3px 0.45rem 3px 3px;
  border-radius: 0.45rem;
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: rgba(28, 25, 23, 0.92);
  cursor: pointer;
  flex: 0 0 auto;
  color: #fafaf9;
}
.sf-color-swatch-chip {
  display: block;
  width: 1.7rem;
  height: 100%;
  border-radius: 0.32rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  background: #fafaf9;
  flex: 0 0 auto;
}
.sf-color-swatch-hex {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
#img-paint-color[hidden] {
  display: none !important;
}
.sf-color-pop {
  position: fixed;
  z-index: 240;
  width: min(32rem, calc(100vw - 1.25rem));
  max-height: calc(100vh - 1.25rem);
  overflow: auto;
  padding: 0.75rem 0.85rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(251, 191, 36, 0.38);
  background: rgba(22, 20, 18, 0.98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  color: #fafaf9;
  user-select: none;
}
.sf-color-pop input {
  user-select: text;
}
.sf-color-pop[hidden] {
  display: none !important;
}
.sf-color-pop-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  font-weight: 750;
}
.sf-color-pop-title {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d6d3d1;
}
.sf-color-pop-hex-read {
  margin-left: auto;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fdba74;
}
.sf-color-os,
.sf-color-close,
.sf-color-copy {
  min-width: 1.7rem;
  padding: 0.12rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 750;
  border-radius: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fafaf9;
  cursor: pointer;
}
.sf-color-close {
  font-size: 1rem;
  line-height: 1;
}
.sf-color-sv {
  position: relative;
  width: 100%;
  height: min(24rem, 46vh);
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
}
.sf-color-sv:focus {
  outline: 2px solid rgba(251, 191, 36, 0.55);
  outline-offset: 1px;
}
.sf-color-sv-cursor {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #000, 0 1px 4px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.sf-color-hue-wrap,
.sf-color-slider-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
}
.sf-color-ch {
  width: 0.9rem;
  flex: 0 0 0.9rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: #a8a29e;
}
.sf-color-ch.r { color: #f87171; }
.sf-color-ch.g { color: #4ade80; }
.sf-color-ch.b { color: #60a5fa; }
.sf-color-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  height: 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #292524;
  outline: none;
  cursor: pointer;
}
.sf-color-hue-range {
  background: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
}
.sf-color-range::-webkit-slider-runnable-track {
  height: 0.95rem;
  border-radius: 999px;
  background: var(--track, transparent);
}
.sf-color-hue-range::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
}
.sf-color-range::-moz-range-track {
  height: 0.95rem;
  border-radius: 999px;
  background: var(--track, #292524);
  border: 0;
}
.sf-color-hue-range::-moz-range-track {
  background: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
}
.sf-color-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -0.14rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1c1917;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 1px 4px rgba(0, 0, 0, 0.4);
  cursor: grab;
}
.sf-color-range::-moz-range-thumb {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1c1917;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  cursor: grab;
}
.sf-color-slider-row input[type="number"],
.sf-color-hex-row input[type="number"] {
  width: 3.35rem;
  padding: 0.2rem 0.28rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #1c1917;
  color: #fafaf9;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.sf-color-compare {
  display: flex;
  gap: 0.45rem;
  margin: 0.55rem 0 0.15rem;
}
.sf-color-chip {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.sf-color-chip.is-now {
  cursor: default;
}
.sf-color-chip-fill {
  display: block;
  height: 2.1rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    repeating-conic-gradient(#444 0% 25%, #222 0% 50%) 0 0 / 8px 8px;
}
.sf-color-chip-label {
  font-size: 0.66rem;
  font-weight: 700;
  color: #a8a29e;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sf-color-hex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  font-weight: 650;
}
.sf-color-hex-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}
.sf-color-hex-wrap input {
  width: 5.6rem;
  padding: 0.2rem 0.32rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #1c1917;
  color: #fafaf9;
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.02em;
}
.sf-color-palette-row {
  margin-top: 0.55rem;
}
.sf-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  align-items: center;
  margin-top: 0.28rem;
  min-height: 1.35rem;
}
.sf-color-palette:empty::after {
  content: "None yet";
  font-size: 0.66rem;
  font-weight: 650;
  color: #78716c;
}
.sf-color-near {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-top: 0.5rem;
}
.sf-color-near[hidden] {
  display: none !important;
}
.sf-color-near-swatch,
.sf-color-palette-swatch {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border-radius: 0.28rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
}
.sf-color-palette-swatch.is-on {
  box-shadow: 0 0 0 2px #fdba74;
}
.sf-color-use {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  font-weight: 650;
  color: #d6d3d1;
  line-height: 1.35;
}
.sf-color-use[hidden] {
  display: none !important;
}
.sf-color-use.is-unused {
  color: #a8a29e;
}
.sf-color-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.sf-color-add,
.sf-color-remove {
  flex: 1 1 auto;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 0.4rem;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.sf-color-add {
  border: 1px solid rgba(249, 115, 22, 0.55);
  background: rgba(234, 88, 12, 0.28);
  color: #fdba74;
}
.sf-color-add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.sf-color-remove {
  border: 1px solid rgba(248, 113, 113, 0.5);
  background: rgba(127, 29, 29, 0.38);
  color: #fca5a5;
}
.sf-color-remove[hidden] {
  display: none !important;
}
.sf-color-hint {
  margin: 0.45rem 0 0;
  font-size: 0.64rem;
  font-weight: 600;
  color: #78716c;
  line-height: 1.35;
}
body.is-image-only[data-image-tool="pencil"] .image-paint-options:not([hidden]),
body.is-image-only[data-image-tool="eraser"] .image-paint-options:not([hidden]),
body.is-image-only[data-image-tool="fill"] .image-paint-options:not([hidden]),
body.has-active-image[data-image-tool="pencil"] .image-paint-options:not([hidden]),
body.has-active-image[data-image-tool="eraser"] .image-paint-options:not([hidden]),
body.has-active-image[data-image-tool="fill"] .image-paint-options:not([hidden]) {
  display: flex !important;
}
.image-paint-options[hidden] {
  display: none !important;
}
body.is-image-only[data-image-tool="pencil"] .stage-inner,
body.is-image-only[data-image-tool="pencil"] #preview-image,
body.is-image-only[data-image-tool="pencil"] .still-composite,
body.has-active-image[data-image-tool="pencil"] .stage-inner,
body.has-active-image[data-image-tool="pencil"] #preview-image,
body.has-active-image[data-image-tool="pencil"] .still-composite {
  cursor: url("/assets/cursor-pencil.svg?v=6") 2 21, crosshair !important;
}
body.is-image-only[data-image-tool="eraser"] .stage-inner,
body.has-active-image[data-image-tool="eraser"] .stage-inner {
  cursor: cell;
}
body.is-image-only[data-image-tool="fill"] .stage-inner,
body.has-active-image[data-image-tool="fill"] .stage-inner {
  cursor: cell;
}
body.is-image-only.is-space-pan .stage-inner,
body.is-image-only.is-space-pan #preview-image,
body.is-image-only.is-space-pan .still-composite,
body.has-active-image.is-space-pan .stage-inner,
body.has-active-image.is-space-pan #preview-image,
body.has-active-image.is-space-pan .still-composite,
body.workspace-texture.is-space-pan .stage-inner,
body.workspace-texture.is-space-pan #preview-image,
body.workspace-texture.is-space-pan .still-composite {
  cursor: grab !important;
}
body.is-image-only.is-space-pan.is-image-stage-drag .stage-inner,
body.is-image-only.is-space-pan.is-image-stage-drag #preview-image,
body.has-active-image.is-space-pan.is-image-stage-drag .stage-inner,
body.has-active-image.is-space-pan.is-image-stage-drag #preview-image,
body.workspace-texture.is-space-pan.is-image-stage-drag .stage-inner,
body.workspace-texture.is-space-pan.is-image-stage-drag #preview-image {
  cursor: grabbing !important;
}
body.is-image-only.is-alt-eyedrop .stage-inner,
body.is-image-only.is-alt-eyedrop #preview-image,
body.is-image-only.is-alt-eyedrop .still-composite,
body.has-active-image.is-alt-eyedrop .stage-inner,
body.has-active-image.is-alt-eyedrop #preview-image,
body.has-active-image.is-alt-eyedrop .still-composite {
  cursor: crosshair !important;
}
.pixel-recent {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
  align-items: center;
  max-width: min(28rem, 100%);
}
.pixel-recent-swatch {
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border-radius: 0.22rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.pixel-recent-swatch.is-on {
  outline: 2px solid #fdba74;
  outline-offset: 1px;
}
.pixel-recent-swatch.is-checker {
  background-image: repeating-conic-gradient(#444 0% 25%, #222 0% 50%);
  background-size: 6px 6px;
}
.pixel-used {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  align-items: center;
  flex: 0 1 auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  padding: 3px;
}
.image-paint-options {
  max-height: min(38vh, 16rem);
  overflow: auto;
}
.pixel-used-swatch {
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border-radius: 0.22rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  flex: 0 0 auto;
}
#pixel-used .pixel-used-swatch {
  width: 1.35rem;
  height: 1.35rem;
  cursor: grab;
}
#pixel-used .pixel-used-swatch.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
#pixel-used .pixel-used-swatch.is-drop {
  box-shadow: 0 0 0 2px #38bdf8;
}
.pixel-used-swatch.is-on {
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    0 0 0 2px #fdba74;
}
.pixel-used-swatch.is-extra {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(56, 189, 248, 0.55);
}
#pixel-used .pixel-used-swatch.is-on,
#pixel-used .pixel-used-swatch.is-extra.is-on {
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    0 0 0 2px #fdba74;
}
.pixel-used-panel {
  margin: 0 0 0.85rem;
  padding: 0 0 0.7rem;
  border-bottom: 1px solid rgba(251, 191, 36, 0.14);
}
.pixel-used-panel[hidden] {
  display: none !important;
}
.pixel-used-list {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  max-height: 16rem;
  overflow: auto;
  margin-top: 0.35rem;
  padding-right: 0.15rem;
}
.pixel-used-replace {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
}
.pixel-used-replace button {
  flex: 1 1 auto;
}
.pixel-used-replace button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pixel-used-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0.18rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 0.28rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.pixel-used-row:hover,
.pixel-used-row:focus-visible {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(234, 88, 12, 0.12);
}
.pixel-used-row.is-on {
  border-color: rgba(249, 115, 22, 0.85);
  background: rgba(234, 88, 12, 0.32);
  box-shadow: inset 3px 0 0 #fb923c;
}
.pixel-used-row.is-on .pixel-used-chip {
  outline: 2px solid #fdba74;
  outline-offset: 1px;
}
.pixel-used-row .pixel-used-chip {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.22rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  flex: 0 0 auto;
}
.pixel-used-row .pixel-used-hex {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 1 1 auto;
}
.pixel-used-row .pixel-used-n {
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  opacity: 0.72;
  flex: 0 0 auto;
}
.pixel-ref-used {
  display: flex;
  flex-wrap: wrap;
  gap: 0.14rem;
  margin-top: 0.28rem;
  line-height: 0;
}
.pixel-ref-used:empty {
  display: none;
}
.pixel-ref-used .pixel-used-swatch {
  width: 0.85rem;
  height: 0.85rem;
}
.pixel-ref-used .pixel-used-n {
  font-size: 0.62rem;
  line-height: 0.85rem;
  opacity: 0.75;
  padding: 0 0.15rem;
}
#img-paint-grid.is-on,
#img-blend-on.is-on,
#img-blend-rot.is-on,
#btn-prop-blend-on.is-on,
#btn-prop-blend-rot.is-on {
  border-color: rgba(249, 115, 22, 0.65);
  background: rgba(234, 88, 12, 0.25);
  color: #fdba74;
}
/*
 * Neighbors live on #stage-inner with the painting. Beat
 * `.stage-inner canvas { width:100%; height:100%; position:relative }`.
 * Center cell is cleared so the real canvas shows through.
 */
html body #stage-inner > canvas#pixel-blend-overlay,
html body.is-image-only #pixel-blend-overlay,
html body.has-pixel-canvas #pixel-blend-overlay,
html body.has-pixel-blend #pixel-blend-overlay,
#pixel-blend-overlay {
  position: absolute !important;
  inset: auto !important;
  left: var(--blend-l, 0) !important;
  top: var(--blend-t, 0) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--blend-w, 0) !important;
  height: var(--blend-h, 0) !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 4 !important;
  pointer-events: none !important;
  object-fit: fill !important;
  object-position: 0 0 !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: block !important;
  /*
   * Full overlay minus the middle cell. Do not use eight 33% tiles —
   * mask-position percentages are (box - image) * %, so the right/bottom
   * thirds never lined up and those neighbors looked cropped.
   */
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-size: 100% 100%, calc(100% / 3) calc(100% / 3);
  -webkit-mask-position: 0 0, 50% 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-size: 100% 100%, calc(100% / 3) calc(100% / 3);
  mask-position: 0 0, 50% 50%;
  mask-repeat: no-repeat;
  mask-composite: exclude;
}
#pixel-blend-overlay[hidden],
html body #pixel-blend-overlay[hidden] {
  display: none !important;
}
.pixel-blend-preview {
  display: block;
  width: 192px;
  height: 192px;
  margin: 0.35rem 0 0.55rem;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background:
    repeating-conic-gradient(#2c2825 0% 25%, #161412 0% 50%);
  background-size: 16px 16px;
  border: 1px solid rgba(250, 250, 249, 0.2);
}
.pixel-blend-preview[hidden] {
  display: none !important;
}
#pixel-color-focus {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: transparent !important;
  border: none !important;
  opacity: 0;
}
#pixel-color-focus[hidden] {
  display: none !important;
}
#pixel-color-focus.is-flash {
  animation: pixel-color-flash 0.5s ease-out forwards;
}
@keyframes pixel-color-flash {
  0%,
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
body.is-image-only.has-pixel-canvas #pixel-color-focus:not([hidden]) {
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--pixel-dw, auto) !important;
  height: var(--pixel-dh, auto) !important;
  object-fit: fill !important;
  object-position: 0 0 !important;
}
.pixel-paper {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  box-sizing: border-box;
  background: var(--pixel-paper, #2a2623);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform-origin: center center;
}
.pixel-paper[hidden] {
  display: none !important;
}
.pixel-grid-overlay {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  box-sizing: border-box;
  background-image:
    linear-gradient(to right, rgba(250, 250, 249, 0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(250, 250, 249, 0.22) 1px, transparent 1px);
  background-size: var(--pixel-cell, 8px) var(--pixel-cell, 8px);
  background-position: 0 0;
}
.pixel-grid-overlay[hidden] {
  display: none !important;
}
.img-crop-size-readout {
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: rgba(253, 230, 138, 0.9);
  margin-left: 0.15rem;
}
body:not(.theme-dark) .image-crop-options {
  background: rgba(255, 247, 237, 0.98);
  border-bottom-color: rgba(124, 45, 18, 0.14);
  color: #1c1917;
}
body:not(.theme-dark) .img-crop-size-readout {
  color: #9a3412;
}
/* Interactive crop frame (crop tool only) */
.sf-crop-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  display: none;
}
.sf-crop-overlay.is-on:not([hidden]) {
  display: block;
  /* Catch drag-to-draw on shaded regions */
  pointer-events: auto;
  touch-action: none;
  cursor: crosshair;
}
.image-marquee-options {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  padding: 0.4rem 0.65rem;
  z-index: 12;
  background: rgba(28, 25, 23, 0.96);
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
  color: #fafaf9;
  font-size: 0.78rem;
}
body.is-image-only[data-image-tool="marquee"] .image-marquee-options:not([hidden]),
body.has-active-image[data-image-tool="marquee"] .image-marquee-options:not([hidden]) {
  display: flex !important;
}
.image-marquee-options[hidden] {
  display: none !important;
}
.sf-marquee-overlay {
  position: absolute;
  inset: 0;
  z-index: 21;
  pointer-events: none;
  display: none;
}
.sf-marquee-overlay.is-on:not([hidden]) {
  display: block;
}
.sf-marquee-frame {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  cursor: move;
  background-color: rgba(56, 189, 248, 0.1);
  background-image:
    linear-gradient(90deg, #fafaf9 50%, #0c0a09 50%),
    linear-gradient(90deg, #fafaf9 50%, #0c0a09 50%),
    linear-gradient(0deg, #fafaf9 50%, #0c0a09 50%),
    linear-gradient(0deg, #fafaf9 50%, #0c0a09 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  animation: sf-marquee-ants 0.45s linear infinite;
}
@keyframes sf-marquee-ants {
  to {
    background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px;
  }
}
body.is-image-only[data-image-tool="marquee"] .stage-inner {
  cursor: crosshair;
}
.sf-crop-shade {
  position: absolute;
  background: rgba(0, 0, 0, 0.48);
  pointer-events: auto;
  cursor: crosshair;
}
.sf-crop-frame {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px solid rgba(253, 230, 138, 0.95);
  box-shadow: 0 0 0 1px rgba(12, 10, 9, 0.45);
  cursor: move;
  pointer-events: auto;
  touch-action: none;
  z-index: 1;
}
.sf-crop-frame::after {
  /* rule-of-thirds grid */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent 33.33%, rgba(255,255,255,0.22) 33.33%, rgba(255,255,255,0.22) calc(33.33% + 1px), transparent calc(33.33% + 1px), transparent 66.66%, rgba(255,255,255,0.22) 66.66%, rgba(255,255,255,0.22) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
    linear-gradient(to bottom, transparent 33.33%, rgba(255,255,255,0.22) 33.33%, rgba(255,255,255,0.22) calc(33.33% + 1px), transparent calc(33.33% + 1px), transparent 66.66%, rgba(255,255,255,0.22) 66.66%, rgba(255,255,255,0.22) calc(66.66% + 1px), transparent calc(66.66% + 1px));
  pointer-events: none;
}
.sf-crop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fde68a;
  border: 1px solid #1c1917;
  border-radius: 1px;
  box-sizing: border-box;
  pointer-events: auto;
  touch-action: none;
  z-index: 2;
  /* Inset so stage-inner overflow:hidden does not clip handles at full crop */
}
.sf-crop-handle[data-sf-handle="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.sf-crop-handle[data-sf-handle="n"]  { left: 50%; top: 0; margin-left: -6px; cursor: ns-resize; }
.sf-crop-handle[data-sf-handle="ne"] { right: 0; top: 0; cursor: nesw-resize; }
.sf-crop-handle[data-sf-handle="e"]  { right: 0; top: 50%; margin-top: -6px; cursor: ew-resize; }
.sf-crop-handle[data-sf-handle="se"] { right: 0; bottom: 0; cursor: nwse-resize; }
.sf-crop-handle[data-sf-handle="s"]  { left: 50%; bottom: 0; margin-left: -6px; cursor: ns-resize; }
.sf-crop-handle[data-sf-handle="sw"] { left: 0; bottom: 0; cursor: nesw-resize; }
.sf-crop-handle[data-sf-handle="w"]  { left: 0; top: 50%; margin-top: -6px; cursor: ew-resize; }
body.is-image-only[data-image-tool="crop"] .stage-inner,
body.has-active-image[data-image-tool="crop"] .stage-inner,
body[data-image-tool="crop"] .stage-inner {
  cursor: crosshair;
}
/* While cropping, keep the frame fully interactive above composite */
body[data-image-tool="crop"] #still-composite {
  pointer-events: none !important;
}
body[data-image-tool="crop"] .sf-crop-overlay.is-on {
  z-index: 30;
}
body.is-image-only[data-image-tool="crop"] .image-crop-options:not([hidden]),
body.has-active-image[data-image-tool="crop"] .image-crop-options:not([hidden]),
body[data-image-tool="crop"] .image-crop-options:not([hidden]) {
  display: flex !important;
}
/* Make sequence button (toolbar; props panel has the main control) */
.image-only-btn[hidden] {
  display: none !important;
}
/* Image mode: no secondary stage chrome that can look like a floating box */
body.is-image-only .preview-clean,
body.is-image-only .overlay-pip,
body.is-image-only .stage-audio-art,
body.is-image-only .stage-placeholder,
body.is-image-only .stage-ab-wipe,
body.is-image-only .stage-dissolve,
body.is-image-only .audio-meter {
  display: none !important;
  visibility: hidden !important;
}

/* ---------- Empty state: only import chrome ---------- */
body.is-empty {
  --bottom: 0 !important;
}
body.is-empty .needs-media {
  display: none !important;
}
body.is-empty .app-body {
  display: none !important;
}
/* Lobby: always kill timeline dock (beats media-kind + workspace-timeline !important) */
html body.is-empty .timeline,
html body.is-empty #timeline,
html body.is-empty .timeline-resizer,
html body.is-empty #timeline-resizer,
html body.is-empty.workspace-timeline .timeline,
html body.is-empty.workspace-timeline #timeline,
html body.is-empty.workspace-timeline .timeline-resizer,
html body.is-empty.workspace-timeline #timeline-resizer,
html body.is-empty.is-audio-only.workspace-timeline .timeline,
html body.is-empty.is-audio-only.workspace-timeline #timeline,
html body.is-empty.is-audio-only.workspace-timeline .timeline-resizer,
html body.is-empty.is-audio-only.workspace-timeline #timeline-resizer,
html body.is-empty.is-image-only.workspace-timeline .timeline,
html body.is-empty.is-image-only.workspace-timeline #timeline,
html body.is-empty.is-image-only.workspace-timeline .timeline-resizer,
html body.is-empty.is-image-only.workspace-timeline #timeline-resizer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
}
.welcome {
  display: none;
  position: fixed;
  top: var(--top);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  box-sizing: border-box;
  /* Lobby scroll lives here — body stays overflow:hidden for the editor */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem 1.25rem max(6.5rem, calc(3.5rem + env(safe-area-inset-bottom, 0px)));
  /* Thin warm scrollbar (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: rgba(251, 191, 36, 0.35) transparent;
}
/* WebKit scrollbar — slim gold pill on dark glass */
.welcome::-webkit-scrollbar {
  width: 8px;
}
.welcome::-webkit-scrollbar-track {
  background: transparent;
  margin: 0.5rem 0;
}
.welcome::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(251, 191, 36, 0.28),
    rgba(234, 88, 12, 0.38)
  );
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 2.5rem;
}
.welcome::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(253, 230, 138, 0.55),
    rgba(249, 115, 22, 0.65)
  );
  background-clip: padding-box;
}
.welcome::-webkit-scrollbar-corner {
  background: transparent;
}
body.is-empty .welcome {
  display: block;
}
.welcome-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(26rem, 100%);
  margin: 0 auto;
  /* Center short content; grow with projects/about so it can scroll */
  min-height: calc(100% - 0.5rem);
  justify-content: center;
  padding-bottom: 0.5rem;
}
.welcome-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}
/* In-flow so About contributes to scroll height (was absolute → unreachable) */
.welcome-below {
  position: static;
  width: 100%;
  margin-top: 0.75rem;
  flex-shrink: 0;
}
.welcome-below .card-about {
  margin-top: 0;
}
.welcome-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
}
.welcome-logo {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 0 0.65rem;
  border-radius: 1.1rem;
  display: block;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  object-fit: cover;
  background: #1c1917;
}
.welcome-wordmark {
  margin: 0;
  font-size: clamp(1.85rem, 5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  /* Warm text gradient — cream → gold → orange → red */
  background: linear-gradient(120deg, #fffbeb 8%, #fde68a 32%, #fb923c 62%, #f87171 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 12px rgba(249, 115, 22, 0.35));
}
.welcome-tagline {
  margin: 0.55rem 0 0;
  padding: 0.28rem 0.85rem;
  max-width: 18rem;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.35;
  /* Punchy warm highlight on dark space */
  background: linear-gradient(105deg, #fef9c3 0%, #fdba74 42%, #fb7185 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 12px rgba(249, 115, 22, 0.35));
}

/* SnowDrop-style drop card — dark warm stone (admin empty state) */
.card-drop {
  position: relative;
  width: 100%;
  text-align: center;
  border-radius: 1.65rem 0.7rem 1.25rem 1.25rem;
  border: 1.5px solid rgba(251, 191, 36, 0.35);
  background:
    radial-gradient(ellipse 90% 55% at 50% -5%, rgba(255, 255, 255, 0.12), transparent 55%),
    linear-gradient(165deg, rgba(254, 243, 199, 0.1) 0%, rgba(120, 53, 15, 0.18) 42%, rgba(28, 25, 23, 0.95) 100%);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(251, 191, 36, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 1.35rem 1.25rem 1.4rem;
  overflow: visible;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card-drop::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.5), transparent);
  opacity: 0.75;
  pointer-events: none;
  border-radius: 0 0 1.25rem 1.25rem;
}
.card-drop-help {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  z-index: 4;
  width: 1.28rem;
  height: 1.28rem;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(234, 88, 12, 0.4);
  background: rgba(28, 25, 23, 0.78);
  color: rgba(254, 243, 199, 0.95);
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1;
  font-family: inherit;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(20, 8, 4, 0.2);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.card-drop-help:hover,
.card-drop-help:focus-visible {
  background: rgba(234, 88, 12, 0.35);
  border-color: rgba(251, 191, 36, 0.65);
  outline: none;
  transform: scale(1.06);
}
.card-drop-help::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 50%;
  width: max-content;
  max-width: min(14rem, calc(100vw - 2.5rem));
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(28, 25, 23, 0.96);
  color: rgba(254, 243, 199, 0.95);
  font-size: 0.7rem;
  font-weight: 550;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(3px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  z-index: 20;
}
.card-drop-help:hover::after,
.card-drop-help:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.drop {
  /* label is inline by default — without block/flex the dashed border
     fragments into stacked half-boxes (looks "chopped in two") */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  border: 2.5px dashed rgba(251, 146, 60, 0.92);
  border-radius: 1.15rem;
  padding: 1.85rem 1rem;
  text-align: center;
  cursor: pointer;
  background: rgba(15, 12, 10, 0.35);
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.28),
    inset 0 0 0 1px rgba(251, 191, 36, 0.12);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  touch-action: manipulation;
  user-select: none;
}
.drop:hover {
  border-color: rgba(253, 186, 116, 1);
  background: rgba(120, 53, 15, 0.2);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.4),
    0 0 18px rgba(249, 115, 22, 0.22),
    inset 0 0 0 1px rgba(254, 243, 199, 0.15);
}
.drop:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.65);
  outline-offset: 2px;
}
/* File over page but not the box — soft breathe (SnowDrop) */
body.is-file-drag .drop:not(.is-drag) {
  animation: drop-breathe 1.7s ease-in-out infinite;
}
@keyframes drop-breathe {
  0%, 100% {
    border-color: rgba(251, 146, 60, 0.85);
    background: rgba(15, 12, 10, 0.35);
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.25);
  }
  50% {
    border-color: rgba(253, 186, 116, 1);
    background: rgba(120, 53, 15, 0.22);
    box-shadow:
      0 0 0 1px rgba(251, 191, 36, 0.4),
      0 0 22px rgba(249, 115, 22, 0.28);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.is-file-drag .drop:not(.is-drag) {
    animation: none;
    border-color: rgba(253, 186, 116, 0.95);
  }
}
body.is-file-drag .drop.is-drag,
.drop.is-drag {
  animation: none;
  border-color: #fdba74;
  border-style: dashed;
  background: rgba(120, 53, 15, 0.38);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.45),
    0 0 28px rgba(249, 115, 22, 0.32);
}
.drop-ico {
  font-size: 2.15rem;
  line-height: 1;
  margin-bottom: 0.45rem;
  filter: drop-shadow(0 2px 10px rgba(251, 191, 36, 0.45));
}
.drop-title {
  font-weight: 700;
  color: #fafaf9;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.drop-hint {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: rgba(253, 230, 138, 0.72);
}
.drop-status {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: #fdba74;
}
.drop-status.is-err { color: #fca5a5; }
.drop-status.is-ok { color: #86efac; }

/* Lobby create — Image / Video / Audio under the drop box */
.welcome-create {
  width: 100%;
  margin-top: 0.7rem;
  text-align: center;
}
.welcome-create-kicker {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fdba74;
  margin-bottom: 0.45rem;
}
.welcome-create-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
}
@media (max-width: 520px) {
  .welcome-create-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.welcome-create-btn {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 3.6rem;
  padding: 0.55rem 0.4rem 0.5rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(251, 191, 36, 0.32);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(251, 191, 36, 0.12), transparent 60%),
    rgba(28, 25, 23, 0.88);
  color: #fafaf9;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.welcome-create-btn:hover,
.welcome-create-btn:focus-visible {
  border-color: rgba(251, 191, 36, 0.7);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(251, 191, 36, 0.2), transparent 60%),
    rgba(68, 32, 12, 0.92);
  outline: none;
  transform: translateY(-1px);
}
.welcome-create-ico {
  width: 1.35rem;
  height: 1.35rem;
  color: #fdba74;
  display: grid;
  place-items: center;
}
.welcome-create-ico svg {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}
.create-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}
.create-chips button {
  appearance: none;
  min-width: 2.4rem;
  padding: 0.28rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: rgba(12, 10, 9, 0.45);
  color: #e7e5e4;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.create-chips button.is-on {
  border-color: rgba(249, 115, 22, 0.7);
  background: rgba(234, 88, 12, 0.28);
  color: #fdba74;
}
.create-wh {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.create-wh input[type="number"] {
  width: 5.2rem;
}
.create-wh-unit {
  font-size: 0.78rem;
  color: #a8a29e;
  font-weight: 650;
}
#create-size-preview {
  margin-top: 0.65rem;
  font-weight: 650;
  color: #fdba74;
}
.create-fill-swatch {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  margin-right: 0.28rem;
  border-radius: 0.18rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  vertical-align: -0.1rem;
}
.create-fill-swatch.is-black { background: #000; }
.create-fill-swatch.is-white { background: #fff; }
.create-fill-swatch.is-checker,
.create-canvas-preview-stage.is-checker,
.create-canvas-preview-art.is-checker {
  /* Axis-aligned squares — not 45° diamonds */
  background-color: #161412;
  background-image: repeating-conic-gradient(#2c2825 0% 25%, #161412 0% 50%);
  background-size: 10px 10px;
  background-position: 0 0;
}
/* Image studio: letterbox follows --stage-bg (Background picker), not a hardcoded black. */
html body.is-image-only .stage,
html body.is-image-only .stage-inner,
html body.is-image-only .stage-wrap,
html body.is-image-only .stage-main-col,
html body.is-image-only #stage-main-col,
html body.has-active-image .stage,
html body.has-active-image .stage-inner,
html body.workspace-studio.is-image-only .stage-wrap,
html body.workspace-studio.is-image-only .stage-main-col,
html body.workspace-studio.is-image-only #stage-main-col {
  background: var(--stage-bg, #0c0a09) !important;
  background-color: var(--stage-bg, #0c0a09) !important;
  background-image: none !important;
}
/* Pixel canvases are sized to a whole-CSS-pixel grid (JS sets left/top/width/height). */
body.is-image-only.has-pixel-canvas #preview-image,
body.is-image-only.has-pixel-canvas #preview-image:not([hidden]),
body.is-image-only.has-pixel-canvas .still-composite,
body.is-image-only.has-pixel-canvas .still-composite:not([hidden]) {
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: 0 0 !important;
  image-rendering: -moz-crisp-edges !important;
  image-rendering: pixelated !important;
  z-index: 5 !important;
}
/* Photo-mode width:100% must not stretch pixel canvases over the letterbox. */
body.is-image-only.has-pixel-canvas #preview-image:not([hidden]),
body.is-image-only.has-pixel-canvas .still-composite:not([hidden]) {
  width: var(--pixel-dw, auto) !important;
  height: var(--pixel-dh, auto) !important;
}
.create-canvas-preview {
  margin: 0.7rem 0 0;
  display: flex;
  justify-content: center;
}
.create-canvas-preview[hidden] {
  display: none !important;
}
.create-canvas-preview-stage {
  width: 7.5rem;
  height: 7.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.55rem;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: #0c0a09;
}
.create-canvas-preview-art {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  image-rendering: pixelated;
}

/* Lobby projects — under Drop media, above About */
.welcome-projects {
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.9rem 1rem 1rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background:
    radial-gradient(ellipse 80% 50% at 50% -15%, rgba(251, 191, 36, 0.1), transparent 55%),
    linear-gradient(
      165deg,
      rgba(41, 37, 36, 0.92) 0%,
      rgba(28, 25, 23, 0.94) 55%,
      rgba(12, 10, 9, 0.96) 100%
    );
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(251, 191, 36, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.welcome-projects-head {
  margin-bottom: 0.65rem;
  text-align: left;
}
.welcome-projects-kicker {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fdba74;
}
.welcome-projects-title {
  margin-top: 0.15rem;
  font-size: 0.92rem;
  font-weight: 750;
  color: #fafaf9;
  letter-spacing: -0.02em;
}
.welcome-projects-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 11rem;
  overflow: auto;
}
.welcome-projects-empty {
  margin: 0;
  padding: 0.55rem 0.15rem;
  font-size: 0.8rem;
  color: #a8a29e;
  text-align: center;
}
.welcome-project-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(251, 191, 36, 0.16);
  background: rgba(12, 10, 9, 0.55);
  color: #e7e5e4;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.welcome-project-row:hover,
.welcome-project-row:focus-visible {
  border-color: rgba(249, 115, 22, 0.5);
  background: rgba(68, 64, 60, 0.65);
  outline: none;
}
.welcome-project-row .wp-name {
  flex: 1;
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.welcome-project-row .wp-sub {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: #a8a29e;
  font-family: var(--mono);
}

/* About panel — same dark warm stone family as drop card / top bar */
.card-about {
  position: relative;
  width: 100%;
  padding: 1.05rem 1.2rem 1.15rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background:
    radial-gradient(ellipse 80% 50% at 50% -15%, rgba(251, 191, 36, 0.14), transparent 55%),
    linear-gradient(
      165deg,
      rgba(41, 37, 36, 0.92) 0%,
      rgba(28, 25, 23, 0.94) 55%,
      rgba(12, 10, 9, 0.96) 100%
    );
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(251, 191, 36, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: visible;
}
.card-about::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(253, 230, 138, 0.55),
    transparent
  );
  pointer-events: none;
}
.card-about-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fdba74;
}
.card-about h2 {
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fafaf9;
}
.card-about p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #d6d3d1;
}
.card-about-features {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}
.card-about-features li {
  margin: 0;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: rgba(120, 53, 15, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.card-about-meta {
  margin: 0.85rem 0 0 !important;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(251, 191, 36, 0.14);
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #a8a29e !important;
}
/* FAQ accordion inside About (lobby) */
.card-about-faq {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(251, 191, 36, 0.14);
  text-align: left;
}
.card-about-faq-kicker {
  margin: 0 0 0.55rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fdba74;
  text-align: center;
}
.card-about-faq #faq-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.card-about-faq .faq-item {
  border: 1px solid rgba(251, 191, 36, 0.14);
  border-radius: 0.65rem;
  background: rgba(12, 10, 9, 0.45);
  padding: 0;
  overflow: hidden;
}
.card-about-faq .faq-item + .faq-item {
  border-top: 1px solid rgba(251, 191, 36, 0.14);
}
.card-about-faq .faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 0.55rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fafaf9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition: background 0.12s ease;
}
.card-about-faq .faq-item summary::-webkit-details-marker {
  display: none;
}
.card-about-faq .faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fdba74;
  line-height: 1;
}
.card-about-faq .faq-item[open] summary::after {
  content: "–";
}
.card-about-faq .faq-item summary:hover,
.card-about-faq .faq-item summary:focus-visible {
  background: rgba(68, 64, 60, 0.45);
  outline: none;
}
.card-about-faq .faq-item p {
  margin: 0;
  padding: 0 0.7rem 0.65rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #a8a29e;
  text-align: left;
}

body:not(.is-empty) .welcome {
  display: none !important;
}
/* Edit mode: light drop feedback — no dim/blur */
/* Note: OS drag badge (“Copy”) is controlled by dropEffect in JS, not CSS */
body.is-file-drag,
body.is-file-drag * {
  cursor: default !important;
}
body.has-media.is-file-drag .app-body {
  outline: 2px dashed rgba(251, 191, 36, 0.75);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.2);
}
body.has-media.is-file-drag .rail {
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.12);
}
.file-drag-banner {
  display: none;
  position: fixed;
  top: calc(var(--top) + 0.55rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  pointer-events: none;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: #fef3c7;
  background: rgba(28, 25, 23, 0.94);
  border: 1px solid rgba(251, 191, 36, 0.45);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
body.has-media.is-file-drag .file-drag-banner:not([hidden]) {
  display: block;
}

@media (max-width: 960px) {
  :root {
    --rail: 12.5rem;
    --props: 13.5rem;
    --bottom: 15.75rem;
  }
  .hint-top { display: none; }
  .app-top button.ghost { padding: 0.3rem 0.45rem; font-size: 0.75rem; }
  .project-name { max-width: 6rem; }
}
@media (max-width: 720px) {
  :root {
    --top: 3rem;
    --bottom: 16rem;
  }
  .app-body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  body.rail-collapsed .app-body,
  body.props-collapsed .app-body,
  body.rail-collapsed.props-collapsed .app-body {
    grid-template-columns: 1fr;
  }
  /* Undo desktop column placement so stage+props stack in one column */
  .app-body > .rail,
  .app-body > .rail-resizer,
  .app-body > .stage-wrap,
  .app-body > .props-resizer,
  .app-body > .props {
    grid-column: auto;
    grid-row: auto;
    max-width: none;
  }
  .app-body > .stage-wrap {
    grid-column: 1;
    grid-row: 1;
  }
  .app-body > .props {
    grid-column: 1;
    grid-row: 2;
  }
  .rail, .rail-resizer, .props-resizer { display: none; }
  .props {
    max-height: 32vh;
    border-left: none;
    border-top: 1px solid var(--stroke);
    -webkit-overflow-scrolling: touch;
  }
  .timeline {
    touch-action: pan-y;
  }
  .track, .track-inner {
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }
  .scrub-wrap input[type="range"] {
    height: 1.6rem;
  }
  .lane-label { font-size: 0.65rem; }
  .track-lane { min-height: 3.4rem; }
  .app-top {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--top);
    padding: 0.25rem 0.35rem;
    gap: 0.25rem;
  }
  .app-top .brand { font-size: 0.85rem; }
  .export-queue-hud {
    bottom: calc(var(--bottom) + 0.35rem);
    max-width: 96vw;
    font-size: 0.72rem;
  }
  .tour-card { max-height: 50vh; overflow: auto; }
  .media-item { min-height: 2.8rem; }
}
@media (pointer: coarse) {
  button, .clip, .media-item {
    min-height: 2.2rem;
  }
  .clip {
    min-width: 3rem;
  }
}
/* Phone tap targets >= 44px (mc/hub convention: (max-width: 640px), (pointer: coarse)) */
@media (max-width: 640px), (pointer: coarse) {
  .user-chip a.user-chip-login,
  .site-contact button,
  .card-about-faq .faq-item summary,
  .welcome-project-row,
  .project-row,
  .brand-capstar {
    min-height: 44px;
    box-sizing: border-box;
  }
  .user-chip a.user-chip-login { display: inline-flex; align-items: center; }
  /* Keep the small visual circle; grow only the hit area to 44px around it */
  .card-drop-help::before {
    content: "";
    position: absolute;
    /* Centre a 44px square on the button. The old (1.28rem - 44px) / 2 ignored the 1px border (:7369): ::before is laid out from the padding box, so it was 41.97px wide. */
    inset: calc(50% - 22px);
  }
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  z-index: 100;
  background: #fff;
  color: #1c1917;
  padding: 0.45rem 0.75rem;
  border-radius: 0.4rem;
  font-weight: 700;
  border: 2px solid var(--accent);
}
.skip-link:focus {
  left: 0.5rem;
}
.media-list {
  position: relative;
}
.media-virtual-spacer {
  pointer-events: none;
  flex-shrink: 0;
}
.media-item:focus-visible,
button:focus-visible,
.clip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body.beta-locked .needs-media {
  opacity: 0.55;
  pointer-events: none;
}
body.beta-locked #zone {
  pointer-events: auto;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* EQ frequency graph (props) */
#props-eq .eq-graph-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.15rem 0 0.35rem;
  user-select: none;
  -webkit-user-select: none;
}
#eq-graph {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 320 / 168;
  border-radius: 0.5rem;
  background: linear-gradient(180deg, rgba(28, 25, 23, 0.95), rgba(12, 10, 9, 0.98));
  border: 1px solid rgba(251, 191, 36, 0.22);
  cursor: ns-resize;
  touch-action: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
#eq-graph:active {
  cursor: grabbing;
}
body:not(.theme-dark) #eq-graph {
  background: linear-gradient(180deg, #fffbeb, #ffedd5);
  border-color: rgba(124, 45, 18, 0.18);
}
.eq-graph-bands {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(214, 211, 209, 0.72);
  padding: 0 0.35rem;
}
body:not(.theme-dark) .eq-graph-bands {
  color: rgba(68, 64, 60, 0.7);
}
.eq-graph-readout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 0 0.15rem;
}
.eq-graph-readout > span {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  justify-content: center;
}
.eq-graph-readout em {
  font-style: normal;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(251, 191, 36, 0.85);
  text-transform: uppercase;
}
.eq-graph-readout .val {
  color: #fde68a;
}
body:not(.theme-dark) .eq-graph-readout .val {
  color: #9a3412;
}
body:not(.theme-dark) .eq-graph-readout em {
  color: #c2410c;
}

/* -- Audio Studio tool rail + floating stage popups ----------------- */
.audio-tool-rail {
  display: none;
  flex: 0 0 2.75rem;
  flex-shrink: 0;
  width: 2.75rem;
  min-width: 2.75rem;
  max-width: 2.75rem;
  align-self: stretch;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.15rem;
  padding: 0.4rem 0.25rem;
  margin: 0;
  order: -1;
  z-index: 8;
  background: linear-gradient(180deg, #1c1917 0%, #0c0a09 100%);
  border-right: 1px solid rgba(251, 191, 36, 0.14);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}
body.is-audio-only.workspace-studio .audio-tool-rail:not([hidden]),
body.has-active-audio.workspace-studio .audio-tool-rail:not([hidden]),
body.workspace-studio.has-active-audio .audio-tool-rail:not([hidden]),
body.is-audio-only:not(.workspace-timeline) .audio-tool-rail:not([hidden]) {
  display: flex !important;
}
body.workspace-timeline .audio-tool-rail,
body:not(.is-audio-only):not(.has-active-audio) .audio-tool-rail {
  display: none !important;
}
/* Audio tool rail is position:fixed — never put stage-wrap in a row flex.
   Row layout left a 1px seam around #stage-main-col (the hit-test target). */
body.is-audio-only.workspace-studio .stage-wrap,
body.has-active-audio.workspace-studio .stage-wrap,
body.workspace-studio.has-active-audio .stage-wrap,
body.audio-zone .stage-wrap,
body.workspace-studio .stage-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.aud-tool {
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background: transparent;
  color: #d6d3d1;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  position: relative;
}
.aud-tool svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  pointer-events: none;
}
.aud-tool:hover {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.22);
  color: #fde68a;
}
.aud-tool.is-on,
.aud-tool[aria-pressed="true"] {
  background: rgba(234, 88, 12, 0.22);
  border-color: rgba(249, 115, 22, 0.55);
  color: #fdba74;
}
/* Compressor popup */
#audio-popup-comp .comp-enable-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #e7e5e4;
  cursor: pointer;
  user-select: none;
}
#audio-popup-comp .comp-enable-row input {
  width: 1rem;
  height: 1rem;
  accent-color: #f97316;
}
#audio-popup-comp .field {
  margin-bottom: 0.55rem;
}
#audio-popup-comp .field label {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #a8a29e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.28rem;
}
#audio-popup-comp .field label .val {
  font-family: var(--mono);
  color: #fdba74;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
}
#audio-popup-comp input[type="range"] {
  width: 100%;
  accent-color: #f97316;
}
/* Reverb popup field polish */
#audio-popup-reverb .field {
  margin-bottom: 0.65rem;
}
#audio-popup-reverb .field label {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #a8a29e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.28rem;
}
#audio-popup-reverb .field label .val {
  font-family: var(--mono);
  color: #fdba74;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
}
#audio-popup-reverb input[type="range"] {
  width: 100%;
  accent-color: #f97316;
}
#audio-popup-reverb .sf-stage-popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
/* Speed & pitch popup */
#audio-popup-tune .field {
  margin-bottom: 0.55rem;
}
#audio-popup-tune .field label {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #a8a29e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.28rem;
}
#audio-popup-tune .field label .val {
  font-family: var(--mono);
  color: #fdba74;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
}
#audio-popup-tune input[type="range"] {
  width: 100%;
  accent-color: #f97316;
}
#audio-popup-tune .speed-custom-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
#audio-popup-tune .speed-num {
  width: 4.6rem;
}
#audio-popup-tune #tune-rate-mode {
  width: 100%;
}
#audio-popup-tune .comp-enable-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.15rem 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #e7e5e4;
  cursor: pointer;
  user-select: none;
}
#audio-popup-tune .comp-enable-row input {
  width: 1rem;
  height: 1rem;
  accent-color: #f97316;
}
#prop-vol-maximize-row,
#prop-vol-reverse-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.45rem 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #e7e5e4;
  cursor: pointer;
  user-select: none;
}
#prop-vol-maximize-row input,
#prop-vol-reverse-row input {
  width: 1rem;
  height: 1rem;
  accent-color: #f97316;
}
#val-vol-maximize {
  margin-left: auto;
  font-family: var(--mono);
  color: #fdba74;
  font-weight: 650;
}
body:not(.theme-dark) #prop-vol-maximize-row,
body:not(.theme-dark) #prop-vol-reverse-row {
  color: #44403c;
}
#audio-popup-tune .sf-stage-popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
/* Prefer floating EQ over props panel EQ in audio studio */
body.is-audio-only.workspace-studio #props-eq,
body.has-active-audio.workspace-studio #props-eq {
  display: none !important;
}
/* Floating popup layer fills the stage canvas area */
.stage-popup-layer {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  overflow: hidden;
}
.sf-stage-popup {
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: min(22rem, calc(100% - 2rem));
  min-width: 14rem;
  min-height: 11rem;
  max-width: calc(100% - 0.5rem);
  max-height: calc(100% - 0.5rem);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background: rgba(28, 25, 23, 0.96);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 0.55rem;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.25);
  color: #fafaf9;
  overflow: hidden;
  box-sizing: border-box;
}
.sf-stage-popup[hidden] {
  display: none !important;
}
.sf-stage-popup-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.45rem 0.35rem 0.65rem;
  background: linear-gradient(180deg, rgba(41, 37, 36, 0.98), rgba(28, 25, 23, 0.95));
  border-bottom: 1px solid rgba(251, 191, 36, 0.16);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.sf-stage-popup.is-dragging .sf-stage-popup-head {
  cursor: grabbing;
}
.sf-stage-popup-title {
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fde68a;
}
.sf-stage-popup-hint {
  flex: 1 1 auto;
  font-size: 0.65rem;
  color: rgba(214, 211, 209, 0.55);
  font-weight: 600;
}
.sf-stage-popup-close {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border-radius: 0.35rem;
  border: 1px solid rgba(251, 191, 36, 0.2);
  background: transparent;
  color: #e7e5e4;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.sf-stage-popup-close:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
}
.sf-stage-popup-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.55rem 0.65rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
/* 5-band parametric EQ floating panel */
.sf-eq-popup .sf-stage-popup-body {
  padding-bottom: 0.75rem;
}
.eq-band-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0.55rem 0 0.45rem;
}
.eq-band-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.4rem 0.2rem;
  border-radius: 0.45rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}
.eq-band-chip em {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a8a29e;
}
.eq-band-chip .val {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: #fdba74;
}
.eq-band-chip .eq-band-freq {
  font-size: 0.62rem;
  font-weight: 650;
  color: #d6d3d1;
}
.eq-band-chip .eq-band-type {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #78716c;
}
.eq-band-chip.is-hot {
  border-color: rgba(249, 115, 22, 0.45);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.12);
}
.eq-band-chip.is-hot em {
  color: #fdba74;
}
.eq-q-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}
.eq-q-field {
  margin-bottom: 0 !important;
}
.eq-q-field label {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  font-weight: 700;
  color: #a8a29e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}
.eq-q-field label .val {
  font-family: var(--mono);
  color: #fdba74;
  text-transform: none;
}
.eq-q-field input[type="range"] {
  width: 100%;
  accent-color: #f97316;
}
.sf-stage-popup-body .eq-graph-wrap-stage,
.sf-stage-popup-body .eq-graph-wrap {
  flex: 1 1 auto;
  min-height: 8rem;
}
.sf-stage-popup-body #eq-graph-stage,
.sf-stage-popup-body .eq-graph-canvas {
  display: block;
  width: 100%;
  height: min(42vh, 16rem);
  min-height: 14rem;
  flex: 1 1 auto;
  aspect-ratio: auto;
  max-height: none;
  border-radius: 0.45rem;
  cursor: crosshair;
  touch-action: none;
}
.sf-stage-popup-actions {
  margin-top: 0.15rem;
}
.sf-stage-popup-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1rem;
  height: 1rem;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 50%, rgba(251, 191, 36, 0.55) 50%);
  border-bottom-right-radius: 0.5rem;
  opacity: 0.85;
}
.sf-stage-popup-resize:hover {
  opacity: 1;
}
body:not(.theme-dark) .sf-stage-popup {
  background: rgba(255, 247, 237, 0.98);
  border-color: rgba(124, 45, 18, 0.2);
  color: #1c1917;
}
body:not(.theme-dark) .sf-stage-popup-head {
  background: linear-gradient(180deg, #fff7ed, #ffedd5);
  border-bottom-color: rgba(124, 45, 18, 0.12);
}
body:not(.theme-dark) .sf-stage-popup-title {
  color: #9a3412;
}
body:not(.theme-dark) .audio-tool-rail {
  background: linear-gradient(180deg, #fff7ed, #ffedd5);
  border-right-color: rgba(124, 45, 18, 0.14);
}
body:not(.theme-dark) .aud-tool {
  color: #57534e;
}

/* ========== AUDIO ZONE — nuclear seamless (must stay at end of file) ==========
   White/cream ring was app-body --panel-soft + default .stage-wrap cream gradient
   framing the dark stage-inner. Force the whole stage column one color, no stroke. */
body.audio-zone .app-body,
body.workspace-studio.is-audio-only .app-body,
body.workspace-studio.has-active-audio .app-body,
body.workspace-studio.studio-audio .app-body,
body.is-audio-only.workspace-studio .app-body {
  background: #0c0a09 !important;
}
body.audio-zone .app-body > .stage-wrap,
body.audio-zone .stage-main-col,
body.audio-zone .stage,
body.audio-zone .stage-inner,
body.audio-zone #stage-wrap,
body.audio-zone #stage-main-col,
body.audio-zone #stage,
body.audio-zone #stage-inner {
  background: #0c0a09 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
body.workspace-studio.is-audio-only .app-body > .stage-wrap,
body.workspace-studio.has-active-audio .app-body > .stage-wrap,
body.workspace-studio.studio-audio .app-body > .stage-wrap,
body.is-audio-only:not(.workspace-timeline) .app-body > .stage-wrap,
body.theme-dark.workspace-studio.is-audio-only .app-body > .stage-wrap,
body.theme-dark.workspace-studio.has-active-audio .app-body > .stage-wrap {
  background: #0c0a09 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}
body.workspace-studio.is-audio-only .stage-main-col,
body.workspace-studio.has-active-audio .stage-main-col,
body.workspace-studio.studio-audio .stage-main-col,
body.workspace-studio.is-audio-only #stage-main-col,
body.workspace-studio.has-active-audio #stage-main-col {
  background: #0c0a09 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.workspace-studio.is-audio-only .stage,
body.workspace-studio.has-active-audio .stage,
body.workspace-studio.studio-audio .stage,
body.workspace-studio.is-audio-only #stage,
body.workspace-studio.has-active-audio #stage {
  background: #0c0a09 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}
body.workspace-studio.is-audio-only .stage-inner,
body.workspace-studio.has-active-audio .stage-inner,
body.workspace-studio.studio-audio .stage-inner,
body.workspace-studio.is-audio-only #stage-inner,
body.workspace-studio.has-active-audio #stage-inner,
body.is-audio-only:not(.workspace-timeline) #stage-inner {
  background: #0c0a09 !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  inset: 0 !important;
  position: absolute !important;
}
/* Transport bar: no separator line above play/scrub */
body.workspace-studio.is-audio-only .stage-toolbar,
body.workspace-studio.has-active-audio .stage-toolbar {
  border-top: none !important;
  border-top-color: transparent !important;
}

/* ========== AUDIO ZONE v2 — end of file, highest cascade priority ========== */
/* Triggers: audio tool rail open OR body.audio-zone / is-audio-only studio */
body:has(#audio-tool-rail:not([hidden])) .app-body > .stage-wrap,
body:has(#audio-tool-rail:not([hidden])) .stage-wrap,
body.audio-zone .stage-wrap,
body.workspace-studio.is-audio-only .stage-wrap,
body.workspace-studio.has-active-audio .stage-wrap,
body.is-audio-only:not(.workspace-timeline) .stage-wrap {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  background-image: none !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}
body:has(#audio-tool-rail:not([hidden])) .stage-main-col,
body:has(#audio-tool-rail:not([hidden])) #stage-main-col,
body.audio-zone .stage-main-col,
body.audio-zone #stage-main-col,
body.workspace-studio.is-audio-only .stage-main-col,
body.workspace-studio.has-active-audio .stage-main-col {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
body:has(#audio-tool-rail:not([hidden])) .stage,
body:has(#audio-tool-rail:not([hidden])) #stage,
body.audio-zone .stage,
body.audio-zone #stage,
body.workspace-studio.is-audio-only .stage,
body.workspace-studio.has-active-audio .stage {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  place-items: stretch !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  container-type: normal !important;
}
body:has(#audio-tool-rail:not([hidden])) .stage-inner,
body:has(#audio-tool-rail:not([hidden])) #stage-inner,
body.audio-zone .stage-inner,
body.audio-zone #stage-inner,
body.workspace-studio.is-audio-only .stage-inner,
body.workspace-studio.has-active-audio .stage-inner,
body.is-audio-only:not(.workspace-timeline) .stage-inner {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  background: #0c0a09 !important;
  background-image: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(234, 88, 12, 0.08), transparent 62%) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  transform: none !important;
}
body:has(#audio-tool-rail:not([hidden])) .stage-inner::before,
body:has(#audio-tool-rail:not([hidden])) .stage-inner::after,
body.audio-zone .stage-inner::before,
body.audio-zone .stage-inner::after,
body.workspace-studio.is-audio-only .stage-inner::before,
body.workspace-studio.is-audio-only .stage-inner::after,
body.workspace-studio.has-active-audio .stage-inner::before,
body.workspace-studio.has-active-audio .stage-inner::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: none !important;
}
/* Don't let cream app-body peek around the stage column */
body:has(#audio-tool-rail:not([hidden])) .app-body,
body.audio-zone .app-body {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
}
/* Transport stays — no light border-top (that was the white line above the bar) */
body:has(#audio-tool-rail:not([hidden])) .stage-toolbar,
body.audio-zone .stage-toolbar,
body.workspace-studio.is-audio-only .stage-toolbar,
body.workspace-studio.has-active-audio .stage-toolbar {
  background: #1c1917 !important;
  border: none !important;
  border-top: none !important;
  border-top-width: 0 !important;
  border-top-color: transparent !important;
  color: #e7e5e4 !important;
  box-shadow: none !important;
}
body:has(#audio-tool-rail:not([hidden])) .stage-toolbar .time,
body.audio-zone .stage-toolbar .time {
  color: #a8a29e !important;
}

/* ========== AUDIO ZONE v3 - stage-wrap id fix + default dark studio ========== */
/* stage-wrap previously had no id so #stage-wrap rules never matched.
   Base .stage-wrap is now dark; these rules re-assert seamless chrome. */
body.audio-zone .stage-wrap,
body.audio-zone #stage-wrap,
body.studio-audio .stage-wrap,
body.studio-audio #stage-wrap,
body.is-audio-only:not(.workspace-timeline) .stage-wrap,
body.has-active-audio:not(.workspace-timeline) .stage-wrap,
body:has(#audio-tool-rail:not([hidden])) .stage-wrap,
body:has(#audio-tool-rail:not([hidden])) #stage-wrap {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  outline: none !important;
}
body.audio-zone .app-body,
body.audio-zone #app-body,
body.studio-audio .app-body,
body.is-audio-only:not(.workspace-timeline) .app-body,
body.has-active-audio:not(.workspace-timeline) .app-body {
  background: #0c0a09 !important;
}

/* ========== AUDIO ZONE v4 — kill 1px white/cream hairlines ========== */
/* Props left edge + resizer track + tool-rail right edge read as a white frame
   when the dark stage sits next to cream/white chrome (esp. light theme). */
body.audio-zone .app-body,
body.audio-zone #app-body,
body:has(#audio-tool-rail:not([hidden])) .app-body,
body:has(#audio-tool-rail:not([hidden])) #app-body,
body.workspace-studio.is-audio-only .app-body,
body.workspace-studio.has-active-audio .app-body,
body.workspace-studio.studio-audio .app-body {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  gap: 0 !important;
}
body.audio-zone .app-body > .props,
body.audio-zone #props,
body:has(#audio-tool-rail:not([hidden])) .app-body > .props,
body:has(#audio-tool-rail:not([hidden])) #props,
body.workspace-studio.is-audio-only .app-body > .props,
body.workspace-studio.has-active-audio .app-body > .props {
  border-left: none !important;
  border-left-width: 0 !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}
body.audio-zone .app-body > .props-resizer,
body.audio-zone #props-resizer,
body:has(#audio-tool-rail:not([hidden])) .props-resizer,
body.workspace-studio.is-audio-only .props-resizer,
body.workspace-studio.has-active-audio .props-resizer {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
body.audio-zone #audio-tool-rail,
body.audio-zone .audio-tool-rail,
body:has(#audio-tool-rail:not([hidden])) #audio-tool-rail,
body.workspace-studio.is-audio-only #audio-tool-rail,
body.workspace-studio.has-active-audio #audio-tool-rail {
  border: none !important;
  border-right: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  background-image: none !important;
}
/* Cover subpixel anti-alias hairlines against light neighbors */
body.audio-zone #stage-wrap,
body.audio-zone .stage-wrap,
body:has(#audio-tool-rail:not([hidden])) #stage-wrap,
body:has(#audio-tool-rail:not([hidden])) .stage-wrap,
body.workspace-studio.is-audio-only .stage-wrap,
body.workspace-studio.has-active-audio .stage-wrap,
body.theme-dark.audio-zone .stage-wrap,
body.theme-dark.is-audio-only .stage-wrap,
body.theme-dark.has-active-audio .stage-wrap {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  background-image: none !important;
  border: none !important;
  outline: 1px solid #0c0a09 !important;
  outline-offset: 0 !important;
  box-shadow:
    -1px 0 0 0 #0c0a09,
    1px 0 0 0 #0c0a09,
    0 -1px 0 0 #0c0a09,
    0 1px 0 0 #0c0a09 !important;
}
body.audio-zone #stage,
body.audio-zone #stage-inner,
body.audio-zone #stage-main-col,
body:has(#audio-tool-rail:not([hidden])) #stage,
body:has(#audio-tool-rail:not([hidden])) #stage-inner,
body:has(#audio-tool-rail:not([hidden])) #stage-main-col {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Toolbar: never any top separator line over the zone */
body.audio-zone .stage-toolbar,
body:has(#audio-tool-rail:not([hidden])) .stage-toolbar,
body.workspace-studio.is-audio-only .stage-toolbar,
body.workspace-studio.has-active-audio .stage-toolbar,
body.theme-dark.audio-zone .stage-toolbar {
  background: #1c1917 !important;
  border: none !important;
  border-top: none !important;
  border-top-width: 0 !important;
  border-top-style: none !important;
  border-top-color: transparent !important;
  box-shadow: none !important;
  color: #e7e5e4 !important;
}
/* No edge-guide / safe-margin / pseudo frames in audio */
body.audio-zone .image-edge-guide,
body.audio-zone .image-edge-guide-frame,
body.audio-zone #image-edge-guide,
body:has(#audio-tool-rail:not([hidden])) .image-edge-guide,
body:has(#audio-tool-rail:not([hidden])) .image-edge-guide-frame {
  display: none !important;
  opacity: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
body.audio-zone .stage-inner::before,
body.audio-zone .stage-inner::after,
body.audio-zone.safe-margins .stage-inner::before,
body.audio-zone.safe-margins .stage-inner::after,
body:has(#audio-tool-rail:not([hidden])) .stage-inner::before,
body:has(#audio-tool-rail:not([hidden])) .stage-inner::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Stage column is column flex (rail is fixed left — not an in-flow row gap) */
body.audio-zone .stage-wrap,
body.is-audio-only.workspace-studio .stage-wrap,
body.has-active-audio.workspace-studio .stage-wrap {
  flex-direction: column !important;
}

/* ========== AUDIO ZONE v5 — full dark shell, no light panel edge ========== */
/* The remaining "1px white border" was the cream props panel / white toolbar
   edge against the dark stage — not a CSS border on stage-inner. Darken the
   whole audio studio shell so no light edge can exist. */
body.workspace-studio .stage-toolbar {
  background: #1c1917 !important;
  border: none !important;
  border-top: none !important;
  color: #e7e5e4 !important;
  box-shadow: none !important;
}
body.workspace-studio .stage-toolbar .time {
  color: #a8a29e !important;
}
body.workspace-studio .stage-toolbar button:not(.primary):not(.transport-icon) {
  background: #1c1917 !important;
  color: #e7e5e4 !important;
  border-color: rgba(251, 191, 36, 0.18) !important;
}
body.audio-zone .props,
body.audio-zone #props,
body.workspace-studio.is-audio-only .props,
body.workspace-studio.has-active-audio .props,
body.workspace-studio.studio-audio .props,
body:has(#audio-tool-rail:not([hidden])) .props,
body:has(#audio-tool-rail:not([hidden])) #props {
  background: #141210 !important;
  color: #e7e5e4 !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
}
body.audio-zone .props h2,
body.workspace-studio.is-audio-only .props h2,
body.workspace-studio.has-active-audio .props h2,
body:has(#audio-tool-rail:not([hidden])) .props h2 {
  color: #fafaf9 !important;
  border-color: rgba(251, 191, 36, 0.12) !important;
}
body.audio-zone .props input,
body.audio-zone .props select,
body.audio-zone .props textarea,
body.workspace-studio.has-active-audio .props input,
body.workspace-studio.has-active-audio .props select,
body:has(#audio-tool-rail:not([hidden])) .props input,
body:has(#audio-tool-rail:not([hidden])) .props select {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  color: #e7e5e4 !important;
  border-color: rgba(251, 191, 36, 0.2) !important;
}
body.audio-zone .props-resizer,
body:has(#audio-tool-rail:not([hidden])) .props-resizer,
body.workspace-studio.has-active-audio .props-resizer {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  border: none !important;
}
/* No outline/box-shadow rings on stage shells (previous cover-hack removed) */
body.audio-zone #stage-wrap,
body.audio-zone .stage-wrap,
body.audio-zone #stage,
body.audio-zone #stage-inner,
body.audio-zone #stage-main-col,
body:has(#audio-tool-rail:not([hidden])) #stage-wrap,
body:has(#audio-tool-rail:not([hidden])) .stage-wrap,
body:has(#audio-tool-rail:not([hidden])) #stage,
body:has(#audio-tool-rail:not([hidden])) #stage-inner {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  background-image: none !important;
}
/* App body + tool rail continuous dark */
body.audio-zone .app-body,
body:has(#audio-tool-rail:not([hidden])) .app-body,
body.workspace-studio.has-active-audio .app-body,
body.workspace-studio.is-audio-only .app-body {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
}
body.audio-zone #audio-tool-rail,
body:has(#audio-tool-rail:not([hidden])) #audio-tool-rail {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  border: none !important;
  box-shadow: none !important;
}
/* Hide debug chip if an old session left it */
#sf-zone-debug-chip { display: none !important; }

/* ========== AUDIO ZONE v6 — no class soup; rail-visible is the source of truth ========== */
/* Also kill the video-card 1px border for studio audio even if body classes lag. */
body.workspace-studio .stage {
  padding: 0 !important;
}
body.workspace-studio:has(#audio-tool-rail:not([hidden])) .stage-wrap,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage-wrap,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) .stage-main-col,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage-main-col,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) .stage,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) .stage-inner,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage-inner,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) .stage-toolbar,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage-toolbar,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) .app-body,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) #app-body {
  background: #1c1917 !important;
  background-image: none !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
body.workspace-studio:has(#audio-tool-rail:not([hidden])) .stage-inner,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage-inner {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.workspace-studio:has(#audio-tool-rail:not([hidden])) .stage,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage {
  display: block !important;
  place-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
}
body.workspace-studio:has(#audio-tool-rail:not([hidden])) .props,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) #props {
  background: #141210 !important;
  border: none !important;
  border-left: none !important;
  color: #e7e5e4 !important;
}
body.workspace-studio:has(#audio-tool-rail:not([hidden])) .props-resizer,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) #props-resizer {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  border: none !important;
}
body.workspace-studio:has(#audio-tool-rail:not([hidden])) #audio-tool-rail {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  border: none !important;
  box-shadow: none !important;
}
/* Never apply the video card 1px frame while audio tools are open */
body.workspace-studio:has(#audio-tool-rail:not([hidden])) .stage-inner,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage-inner {
  border: 0 !important;
  box-shadow: none !important;
}
/* Kill safe-margin dashed inset on audio */
body.workspace-studio:has(#audio-tool-rail:not([hidden])).safe-margins .stage-inner::after,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) .stage-inner::before,
body.workspace-studio:has(#audio-tool-rail:not([hidden])) .stage-inner::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* ========== STAGE BORDER KILL v7 — matches screenshot #C0C0C0 ring ========== */
/* Pixel analysis: 1px rgb(192,192,192) ring on #stage/#stage-inner only (toolbar
   sits outside). currentColor for borders is #e7e5e4 in dark theme — any 1px
   border with no color paints as a near-white hairline. Kill width + color. */
html body.workspace-studio #stage,
html body.workspace-studio #stage-inner,
html body.workspace-studio .stage,
html body.workspace-studio .stage-inner,
html body #stage-inner,
html body #stage {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: #0c0a09 !important; /* if width ever sticks at 1px, match fill */
  border-image: none !important;
  outline: none !important;
  outline-width: 0 !important;
  outline-color: #0c0a09 !important;
  box-shadow: none !important;
  filter: none !important;
  border-radius: 0 !important;
}
html body.workspace-studio #stage:focus,
html body.workspace-studio #stage:focus-visible,
html body.workspace-studio #stage-inner:focus,
html body.workspace-studio #stage-inner:focus-visible,
html body.workspace-studio .stage:focus,
html body.workspace-studio .stage-inner:focus {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
/* If anything still draws outside the box, clip it */
html body.workspace-studio #stage,
html body.workspace-studio .stage {
  overflow: hidden !important;
}
html body.workspace-studio #stage-wrap,
html body.workspace-studio .stage-wrap {
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ========== stage-main-col seam kill v8 (user hit-test target) ========== */
html body.workspace-studio #stage-wrap,
html body.workspace-studio .stage-wrap {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: #0c0a09 !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
html body.workspace-studio #stage-main-col,
html body.workspace-studio .stage-main-col,
html body.audio-zone #stage-main-col,
html body:has(#audio-tool-rail:not([hidden])) #stage-main-col {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: #0c0a09 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}
/* Fixed tool rails must not reserve flex track inside stage-wrap */
html body.workspace-studio #audio-tool-rail:not([hidden]),
html body.workspace-studio #image-tool-rail:not([hidden]) {
  position: fixed !important;
  flex: 0 0 0 !important;
  order: 0 !important;
  align-self: auto !important;
}

/* ========== HAIRLINE COVER v9 — gray ring is painted ON dark, not a gap ==========
   Pixel profile of user screenshot: left of line AND right of line are both #0c0a09.
   Only the 1px stroke is rgb(192,192,192). So we:
   1) force border/outline/shadow off
   2) paint a matching #0c0a09 1px ring that overwrites any light stroke that reappears
*/
html body.workspace-studio #app-body,
html body.workspace-studio .app-body,
html body.workspace-studio #stage-wrap,
html body.workspace-studio .stage-wrap,
html body.workspace-studio #stage-main-col,
html body.workspace-studio .stage-main-col,
html body.workspace-studio #stage,
html body.workspace-studio .stage,
html body.workspace-studio #stage-inner,
html body.workspace-studio .stage-inner {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: #0c0a09 !important;
  outline: none !important;
  outline-width: 0 !important;
  outline-color: #0c0a09 !important;
  /* Overwrite any 0 0 0 1px light ring-shadow with a dark one (invisible on #0c0a09) */
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Toolbar sits under the stage — don't give it a ring that reads as a mid-line */
html body.workspace-studio #stage-toolbar,
html body.workspace-studio .stage-toolbar {
  border: none !important;
  border-top: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: #1c1917 !important;
}
/* App body continuous dark so exterior of any residual stroke matches */
html body.workspace-studio #app-body,
html body.workspace-studio .app-body,
html body.workspace-studio.audio-zone #app-body,
html body.theme-dark.workspace-studio #app-body {
  background: #0c0a09 !important;
  background-image: none !important;
}

/* ========== RING OBLITERATE v10 ==========
   Gray line is 1px stroke ON continuous #0c0a09 (pixel-proven).
   Cover with a dark frame. app-body MUST stay position:fixed (full viewport). */
html body.workspace-studio #app-body,
html body.workspace-studio .app-body {
  position: fixed !important;
  top: var(--top) !important;
  bottom: 0 !important;
}
html body.workspace-studio #stage-wrap,
html body.workspace-studio .stage-wrap {
  position: relative !important;
}
/* 3-side edge cover only — never a bottom stroke (that painted over the play bar).
   Full details refined in AUDIO ZONE 3-SIDE FRAME v16 at file end. */
html body.workspace-studio #stage-wrap::after,
html body.workspace-studio .stage-wrap::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  right: -2px !important;
  bottom: 0 !important;
  z-index: 12 !important;
  pointer-events: none !important;
  border-style: solid !important;
  border-color: #0c0a09 !important;
  border-width: 3px 3px 0 3px !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
/* Kill light ring-shadows / borders on the stack itself */
html body.workspace-studio #app-body,
html body.workspace-studio #stage-wrap,
html body.workspace-studio #stage-main-col,
html body.workspace-studio #stage,
html body.workspace-studio #stage-inner {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: #0c0a09 !important;
}
html body.workspace-studio #stage {
  container-type: normal !important; /* size containment can create odd edge paints */
}

/* ========== AUDIO STUDIO LAYOUT v11 — keep transport bar visible ==========
   #stage must NOT be height:100% inside flex column — that shoved #stage-toolbar
   below overflow:hidden on #stage-main-col. Preview flexes; toolbar is flex-none. */
html body.workspace-studio #stage-main-col,
html body.workspace-studio .stage-main-col,
html body.audio-zone #stage-main-col,
html body:has(#audio-tool-rail:not([hidden])) #stage-main-col {
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
}
html body.workspace-studio #stage,
html body.workspace-studio .stage,
html body.audio-zone #stage,
html body:has(#audio-tool-rail:not([hidden])) #stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body.workspace-studio #stage-toolbar,
html body.workspace-studio .stage-toolbar,
html body.audio-zone #stage-toolbar,
html body:has(#audio-tool-rail:not([hidden])) #stage-toolbar,
html body.is-audio-only .stage-toolbar,
html body.has-active-audio .stage-toolbar {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 6 !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 2.75rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0.45rem 0.75rem !important;
  background: #1c1917 !important;
  border: none !important;
  box-shadow: none !important;
  color: #e7e5e4 !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
}
/* Audio art centered in the preview box (not shifted by absolute rings) */
html body.is-audio-only .stage-audio-art,
html body.has-active-audio.workspace-studio .stage-audio-art,
html body.audio-zone .stage-audio-art {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 1rem !important;
  box-sizing: border-box !important;
}
html body.is-audio-only .stage-audio-rings,
html body.has-active-audio.workspace-studio .stage-audio-rings,
html body.audio-zone .stage-audio-rings {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(42%, 11rem) !important;
  margin: 0 !important;
}
/* App-body frame never above chrome; stage-wrap 3-side cover stays under toolbar (z20) */
html body.workspace-studio #app-body::after,
html body.workspace-studio .app-body::after {
  z-index: 2 !important;
}
html body.workspace-studio #stage-wrap::after,
html body.workspace-studio .stage-wrap::after {
  z-index: 12 !important; /* under #stage-toolbar (20); covers stage L/R/T edges */
}
html body.workspace-studio #stage-toolbar {
  z-index: 20 !important;
}

/* ========== AUDIO STUDIO LAYOUT v12 — definitive flex column ========== */
/* Problem: stage height:100% / absolute mess pushed toolbar + art off-screen.
   Structure: stage-main-col (flex col) > stage (flex:1) + stage-toolbar (flex:none) */
html body.workspace-studio.is-audio-only,
html body.workspace-studio.has-active-audio,
html body.workspace-studio.audio-zone,
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) {
  --bottom: 0px !important;
}
html body.workspace-studio.is-audio-only #app-body,
html body.workspace-studio.has-active-audio #app-body,
html body.workspace-studio.audio-zone #app-body,
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) #app-body {
  bottom: 0 !important;
  top: var(--top) !important;
}
html body.workspace-studio.is-audio-only #stage-wrap,
html body.workspace-studio.has-active-audio #stage-wrap,
html body.workspace-studio.audio-zone #stage-wrap,
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage-wrap {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
/* main-col: fill wrap, flex column — NOT a broken absolute that collapses stage */
html body.workspace-studio.is-audio-only #stage-main-col,
html body.workspace-studio.has-active-audio #stage-main-col,
html body.workspace-studio.audio-zone #stage-main-col,
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage-main-col {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
}
/* Hidden image chrome must never take vertical space */
html body.is-audio-only #image-text-options,
html body.is-audio-only #image-crop-options,
html body.has-active-audio #image-text-options,
html body.has-active-audio #image-crop-options,
html body.audio-zone #image-text-options,
html body.audio-zone #image-crop-options,
html body:has(#audio-tool-rail:not([hidden])) #image-text-options,
html body:has(#audio-tool-rail:not([hidden])) #image-crop-options {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* Preview grows; never height:100% of main-col */
html body.workspace-studio.is-audio-only #stage,
html body.workspace-studio.has-active-audio #stage,
html body.workspace-studio.audio-zone #stage,
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage {
  position: relative !important;
  flex: 1 1 auto !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body.workspace-studio.is-audio-only #stage-inner,
html body.workspace-studio.has-active-audio #stage-inner,
html body.workspace-studio.audio-zone #stage-inner,
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage-inner {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}
/* Transport bar always at bottom of main-col */
html body.workspace-studio.is-audio-only #stage-toolbar,
html body.workspace-studio.has-active-audio #stage-toolbar,
html body.workspace-studio.audio-zone #stage-toolbar,
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage-toolbar,
html body.is-audio-only #stage-toolbar,
html body.has-active-audio #stage-toolbar {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  position: relative !important;
  order: 99 !important;
  z-index: 20 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 3rem !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0.5rem 0.75rem !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #141210 !important;
  border: none !important;
  box-shadow: none !important;
  color: #e7e5e4 !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
}
/* Audio art: true center of stage-inner */
html body.is-audio-only #stage-audio-art,
html body.has-active-audio.workspace-studio #stage-audio-art,
html body.audio-zone #stage-audio-art,
html body:has(#audio-tool-rail:not([hidden])) #stage-audio-art {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 1rem !important;
  transform: none !important;
  box-sizing: border-box !important;
}
html body.is-audio-only .stage-audio-rings,
html body.has-active-audio.workspace-studio .stage-audio-rings,
html body.audio-zone .stage-audio-rings {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(42%, 11rem) !important;
  aspect-ratio: 1 !important;
  margin: 0 !important;
  /* animation must keep centering */
  transform: translate(-50%, -50%) !important;
  animation: sf-audio-pulse-centered 2.8s ease-in-out infinite !important;
}
@keyframes sf-audio-pulse-centered {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}
/* Hide timeline dock completely in studio audio */
html body.workspace-studio #timeline,
html body.workspace-studio .timeline,
html body.workspace-studio #timeline-resizer,
html body.workspace-studio .timeline-resizer {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ========== TOOLBAR TOP LINE KILL v13 ========== */
/* The remaining white line was border-top on #stage-toolbar (gold/light @ 0.1 alpha). */
html body.workspace-studio #stage-toolbar,
html body.workspace-studio .stage-toolbar,
html body.audio-zone #stage-toolbar,
html body.is-audio-only #stage-toolbar,
html body.has-active-audio #stage-toolbar,
html body:has(#audio-tool-rail:not([hidden])) #stage-toolbar,
html body.workspace-studio.is-audio-only .stage-toolbar,
html body.workspace-studio.has-active-audio .stage-toolbar,
html body.workspace-studio.audio-zone .stage-toolbar {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-top: none !important;
  border-top-width: 0 !important;
  border-top-style: none !important;
  border-top-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  background: #1c1917 !important;
  background-image: none !important;
}
/* Stage bottom edge same color so no contrast seam above the bar */
html body.workspace-studio #stage,
html body.workspace-studio.is-audio-only #stage,
html body.workspace-studio.has-active-audio #stage,
html body.audio-zone #stage {
  border-bottom: none !important;
  box-shadow: none !important;
  background: #0c0a09 !important;
}

/* ========== AUDIO CHROME COLORS v14 ==========
   Restore distinct left rail + bottom transport (not same as stage #0c0a09).
   Separator above bar: none (no light/gold line). Definition = panel color only. */
html body.workspace-studio #stage-toolbar,
html body.workspace-studio .stage-toolbar,
html body.audio-zone #stage-toolbar,
html body.is-audio-only #stage-toolbar,
html body.has-active-audio #stage-toolbar,
html body:has(#audio-tool-rail:not([hidden])) #stage-toolbar,
html body.workspace-studio.is-audio-only .stage-toolbar,
html body.workspace-studio.has-active-audio .stage-toolbar,
html body.workspace-studio.audio-zone .stage-toolbar,
html body.theme-dark.workspace-studio #stage-toolbar {
  background: #1c1917 !important;
  background-image: none !important;
  color: #e7e5e4 !important;
  border: none !important;
  border-top: none !important;
  border-top-width: 0 !important;
  border-top-style: none !important;
  border-top-color: transparent !important;
  /* NO inset/outset shadow — any 1px stroke reads as the white line */
  box-shadow: none !important;
  outline: none !important;
}
html body.workspace-studio #stage-toolbar .time,
html body.audio-zone #stage-toolbar .time,
html body.is-audio-only #stage-toolbar .time {
  color: #a8a29e !important;
}
html body.workspace-studio #audio-tool-rail,
html body.workspace-studio #audio-tool-rail:not([hidden]),
html body.audio-zone #audio-tool-rail,
html body.is-audio-only #audio-tool-rail,
html body.has-active-audio #audio-tool-rail,
html body:has(#audio-tool-rail:not([hidden])) #audio-tool-rail {
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  background-image: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
  border: none !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Stage preview stays pure black; no bottom ring that shows above the bar */
html body.workspace-studio.is-audio-only #stage,
html body.workspace-studio.has-active-audio #stage,
html body.audio-zone #stage,
html body:has(#audio-tool-rail:not([hidden])) #stage,
html body.workspace-studio.is-audio-only #stage-inner,
html body.workspace-studio.has-active-audio #stage-inner,
html body.audio-zone #stage-inner {
  box-shadow: none !important;
  border-bottom: none !important;
  outline: none !important;
}

/* ========== TOOLBAR SEAM COVER v15 ==========
   Kill the remaining 1px light line across the top of the transport bar.
   Strategy:
   1) zero every stroke/shadow on the toolbar join
   2) kill app-body ::after only (stage-wrap::after is the 3-side frame in v16)
   3) paint a solid bar-colored strip over the join so nothing light can show */
html body.workspace-studio #app-body::after,
html body.workspace-studio .app-body::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}
html body.workspace-studio #stage,
html body.workspace-studio .stage,
html body.workspace-studio #stage-main-col,
html body.workspace-studio #stage-wrap,
html body.workspace-studio #stage-inner {
  box-shadow: none !important;
  border-bottom: none !important;
  border-bottom-width: 0 !important;
  outline: none !important;
}
html body.workspace-studio #stage-toolbar,
html body.workspace-studio .stage-toolbar,
html body.audio-zone #stage-toolbar,
html body.is-audio-only #stage-toolbar,
html body.has-active-audio #stage-toolbar,
html body:has(#audio-tool-rail:not([hidden])) #stage-toolbar {
  position: relative !important;
  isolation: isolate !important;
  background: #1c1917 !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 0 none transparent !important;
  border-top-width: 0 !important;
  border-top-style: none !important;
  border-top-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  /* flush to stage — no gap for a light pixel to sneak through */
  margin-top: 0 !important;
  /* paint bar color 2px UP over any residual seam stroke */
  background-clip: padding-box !important;
}
/* Physical cover: solid bar color across the entire top edge + 1px into stage */
html body.workspace-studio #stage-toolbar::before,
html body.workspace-studio .stage-toolbar::before,
html body.audio-zone #stage-toolbar::before,
html body.is-audio-only #stage-toolbar::before,
html body.has-active-audio #stage-toolbar::before,
html body:has(#audio-tool-rail:not([hidden])) #stage-toolbar::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -2px !important;
  height: 3px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: #1c1917 !important;
  background-image: none !important;
  pointer-events: none !important;
  z-index: 50 !important;
}
/* Stage never paints a bottom edge above the bar */
html body.workspace-studio.is-audio-only #stage,
html body.workspace-studio.has-active-audio #stage,
html body.audio-zone #stage,
html body:has(#audio-tool-rail:not([hidden])) #stage {
  box-shadow: none !important;
  border: none !important;
  border-bottom: none !important;
  outline: none !important;
  /* pull stage 1px over the toolbar so the join is continuous stage black then cover */
  margin-bottom: -1px !important;
  z-index: 1 !important;
}
html body.workspace-studio.is-audio-only #stage-toolbar,
html body.workspace-studio.has-active-audio #stage-toolbar,
html body.audio-zone #stage-toolbar,
html body:has(#audio-tool-rail:not([hidden])) #stage-toolbar {
  z-index: 20 !important;
}

/* ========== AUDIO ZONE 3-SIDE FRAME v16 ==========
   Bottom (toolbar) seam is fixed. Remaining complaint: 1px light lines on
   TOP + LEFT + RIGHT around the audio zone. Cover those three sides only —
   never re-draw a bottom stroke over the transport bar. */
html body.workspace-studio.is-audio-only #stage-wrap,
html body.workspace-studio.has-active-audio #stage-wrap,
html body.workspace-studio.audio-zone #stage-wrap,
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage-wrap,
html body.audio-zone #stage-wrap,
html body.audio-zone .stage-wrap {
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
  /* no full ring shadow — only 3-side cover via ::after */
  box-shadow: none !important;
  background-color: #0c0a09 !important;
}
/* Three-sided overwrite frame: top / left / right. NO bottom. */
html body.workspace-studio.is-audio-only #stage-wrap::after,
html body.workspace-studio.has-active-audio #stage-wrap::after,
html body.workspace-studio.audio-zone #stage-wrap::after,
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage-wrap::after,
html body.audio-zone #stage-wrap::after,
html body.audio-zone .stage-wrap::after,
html body.workspace-studio.is-audio-only .stage-wrap::after,
html body.workspace-studio.has-active-audio .stage-wrap::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  right: -2px !important;
  /* Stop at wrap bottom so we never stroke over the transport bar */
  bottom: 0 !important;
  z-index: 12 !important; /* under toolbar (z20) so bar top seam stays clean */
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-style: solid !important;
  border-color: #0c0a09 !important;
  /* T R B L — bottom width 0 = the fixed toolbar edge stays open */
  border-width: 3px 3px 0 3px !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}
/* Neighbors that paint light edges against the dark zone */
html body.workspace-studio.is-audio-only .app-body > .props,
html body.workspace-studio.has-active-audio .app-body > .props,
html body.workspace-studio.audio-zone .app-body > .props,
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) .app-body > .props,
html body.audio-zone #props,
html body.audio-zone .props {
  border: none !important;
  border-left: none !important;
  border-left-width: 0 !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  background: #141210 !important;
}
html body.workspace-studio.is-audio-only .props-resizer,
html body.workspace-studio.has-active-audio .props-resizer,
html body.workspace-studio.audio-zone .props-resizer,
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) .props-resizer,
html body.audio-zone #props-resizer {
  background: #0c0a09 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
html body.workspace-studio.is-audio-only #app-body,
html body.workspace-studio.has-active-audio #app-body,
html body.workspace-studio.audio-zone #app-body,
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) #app-body,
html body.audio-zone #app-body,
html body.audio-zone .app-body {
  background: #0c0a09 !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  gap: 0 !important;
}
/* Left tool rail: no light edge; continuous dark into the stage column */
html body.workspace-studio #audio-tool-rail:not([hidden]),
html body.audio-zone #audio-tool-rail:not([hidden]),
html body.is-audio-only #audio-tool-rail:not([hidden]),
html body.has-active-audio #audio-tool-rail:not([hidden]) {
  border: none !important;
  border-right: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, #292524 0%, #1c1917 55%, #141210 100%) !important;
}
/* Paint over any 1px gap between fixed rail and shifted app-body */
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) #app-body,
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) .app-body {
  /* extend stage black 3px left into the rail join */
  box-shadow: -3px 0 0 0 #0c0a09 !important;
}
/* Top edge under the chrome bar — no light stroke into the zone */
html body.workspace-studio.is-audio-only #app-body,
html body.workspace-studio.has-active-audio #app-body,
html body.audio-zone #app-body {
  border-top: none !important;
}
/* Stage stack: hard-zero any residual painted ring (width/color) */
html body.workspace-studio.is-audio-only #stage,
html body.workspace-studio.has-active-audio #stage,
html body.audio-zone #stage,
html body.workspace-studio.is-audio-only #stage-inner,
html body.workspace-studio.has-active-audio #stage-inner,
html body.audio-zone #stage-inner,
html body.workspace-studio.is-audio-only #stage-main-col,
html body.workspace-studio.has-active-audio #stage-main-col,
html body.audio-zone #stage-main-col {
  border: 0 none transparent !important;
  border-width: 0 !important;
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
  background-color: #0c0a09 !important;
}
/* Toolbar stays: no top line, bar color, seam cover intact (v15) */
html body.workspace-studio.is-audio-only #stage-toolbar,
html body.workspace-studio.has-active-audio #stage-toolbar,
html body.audio-zone #stage-toolbar,
html body.workspace-studio:has(#audio-tool-rail:not([hidden])) #stage-toolbar {
  border-top: none !important;
  box-shadow: none !important;
  background: #1c1917 !important;
  z-index: 20 !important;
}

/* ========== Audio transport deck (play bar) ========== */
html body.workspace-studio.is-audio-only #stage-toolbar,
html body.workspace-studio.has-active-audio #stage-toolbar,
html body.audio-zone #stage-toolbar,
html body.is-audio-only:not(.workspace-timeline) #stage-toolbar {
  display: grid !important;
  grid-template-columns: auto minmax(7rem, max-content) 1fr;
  grid-template-areas: "transport time scrub";
  align-items: center !important;
  gap: 0.75rem 1rem !important;
  padding: 0.7rem 1rem 0.85rem !important;
  min-height: 3.6rem !important;
  background:
    linear-gradient(180deg, rgba(41, 37, 36, 0.98) 0%, #1c1917 55%, #141210 100%) !important;
  border-top: 1px solid rgba(251, 191, 36, 0.12) !important;
  box-shadow:
    0 -12px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html body.workspace-studio.is-audio-only #stage-toolbar .transport,
html body.workspace-studio.has-active-audio #stage-toolbar .transport,
html body.audio-zone #stage-toolbar .transport {
  grid-area: transport;
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem !important;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html body.workspace-studio.is-audio-only #stage-toolbar .time,
html body.workspace-studio.has-active-audio #stage-toolbar .time,
html body.audio-zone #stage-toolbar .time {
  grid-area: time;
  font-family: var(--mono) !important;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
  color: #e7e5e4 !important;
  min-width: 0 !important;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.55rem;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
html body.workspace-studio.is-audio-only #stage-toolbar .scrub-wrap,
html body.workspace-studio.has-active-audio #stage-toolbar .scrub-wrap,
html body.audio-zone #stage-toolbar .scrub-wrap {
  grid-area: scrub;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 1.75rem;
  display: flex !important;
  align-items: center;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(251, 191, 36, 0.12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
html body.workspace-studio.is-audio-only #stage-toolbar .scrub-wrap input[type="range"],
html body.workspace-studio.has-active-audio #stage-toolbar .scrub-wrap input[type="range"],
html body.audio-zone #stage-toolbar .scrub-wrap input[type="range"] {
  width: 100% !important;
  height: 0.45rem !important;
  margin: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(
    90deg,
    rgba(249, 115, 22, 0.85),
    rgba(234, 179, 8, 0.55) 55%,
    rgba(68, 64, 60, 0.65)
  );
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
html body.workspace-studio.is-audio-only #stage-toolbar .scrub-wrap input[type="range"]::-webkit-slider-thumb,
html body.workspace-studio.has-active-audio #stage-toolbar .scrub-wrap input[type="range"]::-webkit-slider-thumb,
html body.audio-zone #stage-toolbar .scrub-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffedd5, #f97316 55%, #ef4444);
  border: 2px solid #fff7ed;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: grab;
}
html body.workspace-studio.is-audio-only #stage-toolbar .scrub-wrap input[type="range"]::-moz-range-thumb,
html body.workspace-studio.has-active-audio #stage-toolbar .scrub-wrap input[type="range"]::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffedd5, #f97316 55%, #ef4444);
  border: 2px solid #fff7ed;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25);
  cursor: grab;
}
html body.workspace-studio.is-audio-only #btn-play.transport-icon,
html body.workspace-studio.has-active-audio #btn-play.transport-icon,
html body.audio-zone #btn-play.transport-icon {
  width: 2.65rem !important;
  height: 2.65rem !important;
  min-width: 2.65rem !important;
  border-radius: 50% !important;
  font-size: 1.05rem !important;
  background: linear-gradient(145deg, #fbbf24, #f97316 50%, #ef4444) !important;
  border: none !important;
  box-shadow:
    0 0 0 3px rgba(249, 115, 22, 0.2),
    0 6px 16px rgba(234, 88, 12, 0.4) !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
html body.workspace-studio.is-audio-only #btn-play.transport-icon:hover:not(:disabled),
html body.workspace-studio.has-active-audio #btn-play.transport-icon:hover:not(:disabled) {
  transform: scale(1.06);
  filter: brightness(1.06);
}
html body.workspace-studio.is-audio-only #btn-play.transport-icon.is-playing,
html body.workspace-studio.has-active-audio #btn-play.transport-icon.is-playing,
html body.sf-audio-playing #btn-play.transport-icon {
  box-shadow:
    0 0 0 4px rgba(249, 115, 22, 0.28),
    0 0 22px rgba(249, 115, 22, 0.45),
    0 6px 16px rgba(234, 88, 12, 0.45) !important;
  animation: sf-play-pulse 1.4s ease-in-out infinite;
}
@keyframes sf-play-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22), 0 6px 16px rgba(234, 88, 12, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.12), 0 0 28px rgba(249, 115, 22, 0.5), 0 6px 16px rgba(234, 88, 12, 0.45); }
}
html body.workspace-studio.is-audio-only #btn-stop.transport-icon,
html body.workspace-studio.has-active-audio #btn-stop.transport-icon,
html body.audio-zone #btn-stop.transport-icon {
  width: 2.2rem !important;
  height: 2.2rem !important;
  min-width: 2.2rem !important;
  border-radius: 50% !important;
  background: rgba(28, 25, 23, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e7e5e4 !important;
}
html body.workspace-studio.is-audio-only #stage-toolbar .transport .ghost,
html body.workspace-studio.has-active-audio #stage-toolbar .transport .ghost {
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  padding: 0.32rem 0.65rem !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #a8a29e !important;
}
html body.workspace-studio.is-audio-only #stage-toolbar .transport .ghost:hover,
html body.workspace-studio.has-active-audio #stage-toolbar .transport .ghost:hover {
  color: #fafaf9 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* Hide video-only / heavy pro actions on pure audio deck for a cleaner bar */
html body.is-audio-only.workspace-studio #stage-toolbar .video-only,
html body.has-active-audio.workspace-studio #stage-toolbar .video-only {
  display: none !important;
}
/* Stage meter as a thin glow under the visualizer */
html body.workspace-studio.is-audio-only .audio-meter,
html body.workspace-studio.has-active-audio .audio-meter,
html body.audio-zone .audio-meter {
  left: 50% !important;
  right: auto !important;
  bottom: 0.45rem !important;
  transform: translateX(-50%) !important;
  width: min(56%, 16rem) !important;
  height: 1.55rem !important;
  border-radius: 0.45rem !important;
  background: rgba(0, 0, 0, 0.4) !important;
  overflow: hidden;
  z-index: 4 !important;
  opacity: 0.95 !important;
  padding: 0.15rem 0.3rem !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
/* Prefer stereo L/R in Audio Studio; hide mono fill */
html body.workspace-studio.is-audio-only .audio-meter .meter-fill,
html body.workspace-studio.has-active-audio .audio-meter .meter-fill,
html body.audio-zone .audio-meter .meter-fill {
  display: none !important;
}
html body.workspace-studio.is-audio-only .audio-meter .meter-stereo,
html body.workspace-studio.has-active-audio .audio-meter .meter-stereo,
html body.audio-zone .audio-meter .meter-stereo {
  display: flex !important;
}
@media (max-width: 720px) {
  html body.workspace-studio.is-audio-only #stage-toolbar,
  html body.workspace-studio.has-active-audio #stage-toolbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "transport time"
      "scrub scrub";
    gap: 0.5rem !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body.sf-audio-playing #btn-play.transport-icon {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
   General studio polish - bring Video / Image / Timeline / chrome up to
   Audio Studio quality (cinematic stage, card props, refined rails & TL).
   --------------------------------------------------------------------------- */

/* Shared props: card sections (all studios + timeline) */
.props {
  scrollbar-width: thin;
  scrollbar-color: rgba(234, 88, 12, 0.35) transparent;
}
.props > h2 {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.props > h2::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.55);
  flex-shrink: 0;
}
.props .section {
  margin: 0 0 0.65rem;
  padding: 0.7rem 0.75rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(124, 45, 18, 0.1);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(255, 247, 237, 0.55));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 4px 14px rgba(28, 12, 4, 0.04);
}
.props .section:last-child {
  margin-bottom: 0.25rem;
}
.props .section > h3.props-subhead,
.props .section .props-subhead {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9a3412;
}
.props .field {
  margin-top: 0.5rem;
}
.props .field:first-of-type {
  margin-top: 0.15rem;
}
.props .field > label,
.props .field label:not(.lib-fav-label) {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.props .field .val {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 650;
  color: var(--accent);
  float: right;
}
.props .row {
  gap: 0.4rem;
}
.props .row button {
  font-size: 0.78rem;
  font-weight: 650;
  border-radius: 0.5rem;
  padding: 0.38rem 0.6rem;
}
.props select,
.props input[type="text"],
.props input[type="number"] {
  border-radius: 0.5rem;
  border: 1px solid rgba(124, 45, 18, 0.14);
  background: #fff;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.props select:focus,
.props input[type="text"]:focus,
.props input[type="number"]:focus {
  outline: none;
  border-color: rgba(234, 88, 12, 0.55);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
.props input[type="range"] {
  margin-top: 0.2rem;
  height: 0.35rem;
}
body.theme-dark .props .section {
  border-color: rgba(251, 191, 36, 0.12);
  background: linear-gradient(165deg, rgba(41, 37, 36, 0.95), rgba(28, 25, 23, 0.88));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 6px 18px rgba(0, 0, 0, 0.22);
}
body.theme-dark .props .section > h3.props-subhead,
body.theme-dark .props .section .props-subhead {
  color: rgba(253, 230, 138, 0.78);
}
body.theme-dark .props select,
body.theme-dark .props input[type="text"],
body.theme-dark .props input[type="number"] {
  background: rgba(12, 10, 9, 0.65);
  border-color: rgba(251, 191, 36, 0.18);
  color: #fafaf9;
}
body.theme-dark .props .field .val {
  color: #fbbf24;
}

/* Library rail polish */
.rail > h2 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.rail > h2::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.45);
  flex-shrink: 0;
}
.media-list {
  gap: 0.4rem;
}
.media-item {
  border-radius: 0.7rem;
  border: 1px solid rgba(124, 45, 18, 0.1);
  background: linear-gradient(160deg, #ffffff, #fff8f1 90%);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.media-item:hover {
  border-color: rgba(234, 88, 12, 0.35);
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.1);
  transform: translateY(-1px);
}
.media-item.is-active {
  border-color: rgba(234, 88, 12, 0.55);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.25), 0 6px 16px rgba(234, 88, 12, 0.12);
}
.media-item .name {
  font-weight: 700;
  font-size: 0.82rem;
}
.media-item .sub {
  font-size: 0.68rem;
  opacity: 0.85;
}
body.theme-dark .media-item {
  background: linear-gradient(160deg, #292524, #1c1917 90%);
  border-color: rgba(251, 191, 36, 0.12);
}
body.theme-dark .media-item:hover {
  border-color: rgba(251, 191, 36, 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
body.theme-dark .media-item.is-active {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2), 0 8px 20px rgba(0, 0, 0, 0.4);
}
.lib-filter input[type="search"] {
  border-radius: 0.55rem;
  border: 1px solid rgba(124, 45, 18, 0.14);
  background: #fff;
}
body.theme-dark .lib-filter input[type="search"] {
  background: rgba(12, 10, 9, 0.7);
  border-color: rgba(251, 191, 36, 0.18);
  color: #fafaf9;
}

/*
 * Video Studio — seamless dark (same lesson as Audio Zone v4–v16).
 * DO NOT use rgba(255,255,255,…) borders on stage-inner: that painted the
 * permanent L/R white hairline with the video sitting *inside* the frame.
 * Full-bleed #0c0a09; video letterboxes via object-fit:contain (no card chrome).
 */
html body.workspace-studio.is-video-lib .stage-wrap,
html body.workspace-studio.has-active-video .stage-wrap,
body.workspace-studio.is-video-lib .stage-wrap,
body.workspace-studio.has-active-video .stage-wrap {
  background: #0c0a09 !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
html body.workspace-studio.is-video-lib .stage-main-col,
html body.workspace-studio.has-active-video .stage-main-col,
body.workspace-studio.is-video-lib .stage-main-col,
body.workspace-studio.has-active-video .stage-main-col {
  background: #0c0a09 !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body.workspace-studio.is-video-lib .stage,
html body.workspace-studio.has-active-video .stage,
body.workspace-studio.is-video-lib .stage,
body.workspace-studio.has-active-video .stage {
  background: #0c0a09 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* CRITICAL: no white/light stroke — was rgba(255,255,255,0.08) card frame */
html body.workspace-studio.is-video-lib .stage-inner,
html body.workspace-studio.has-active-video .stage-inner,
body.workspace-studio.is-video-lib .stage-inner,
body.workspace-studio.has-active-video .stage-inner,
html body.workspace-studio.is-video-lib #stage-inner,
html body.workspace-studio.has-active-video #stage-inner {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  background: #0c0a09 !important;
  background-image: none !important;
  overflow: hidden !important;
  /* Full-bleed inside stage (like audio/image) — no floating 16:9 card */
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body.workspace-studio.is-video-lib .stage-inner::before,
html body.workspace-studio.has-active-video .stage-inner::before,
html body.workspace-studio.is-video-lib .stage-inner::after,
html body.workspace-studio.has-active-video .stage-inner::after,
body.workspace-studio.is-video-lib .stage-inner::before,
body.workspace-studio.has-active-video .stage-inner::before,
body.workspace-studio.is-video-lib .stage-inner::after,
body.workspace-studio.has-active-video .stage-inner::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body.workspace-studio.is-video-lib .stage-inner video,
html body.workspace-studio.has-active-video .stage-inner video,
html body.workspace-studio.is-video-lib #preview-video,
html body.workspace-studio.has-active-video #preview-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Video studio transport — solid dark, NO light top hairline */
html body.workspace-studio.is-video-lib .stage-toolbar,
html body.workspace-studio.has-active-video .stage-toolbar,
body.workspace-studio.is-video-lib .stage-toolbar,
body.workspace-studio.has-active-video .stage-toolbar {
  background: #1c1917 !important;
  border: 0 !important;
  border-top: none !important;
  border-top-width: 0 !important;
  border-top-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem !important;
  position: relative !important;
  z-index: 20 !important;
}
body.workspace-studio.is-video-lib .stage-toolbar .transport .ghost,
body.workspace-studio.has-active-video .stage-toolbar .transport .ghost {
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  padding: 0.32rem 0.65rem !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #a8a29e !important;
}
body.workspace-studio.is-video-lib .stage-toolbar .transport .ghost:hover,
body.workspace-studio.has-active-video .stage-toolbar .transport .ghost:hover {
  color: #fafaf9 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: transparent !important;
}
body.workspace-studio.is-video-lib #btn-play.transport-icon,
body.workspace-studio.has-active-video #btn-play.transport-icon {
  width: 2.55rem !important;
  height: 2.55rem !important;
  min-width: 2.55rem !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #fbbf24, #f97316 55%, #ea580c) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(234, 88, 12, 0.4) !important;
}
body.workspace-studio.is-video-lib .time-readout,
body.workspace-studio.has-active-video .time-readout,
body.workspace-studio.is-video-lib #time-readout,
body.workspace-studio.has-active-video #time-readout {
  font-family: var(--mono) !important;
  font-size: 0.78rem !important;
  color: #e7e5e4 !important;
  letter-spacing: 0.03em;
}

/* Image Studio: softer props + stage frame */
body.workspace-studio.is-image-only .stage-wrap,
body.workspace-studio.has-active-image .stage-wrap {
  background:
    radial-gradient(ellipse 70% 55% at 50% 35%, rgba(168, 85, 247, 0.08), transparent 60%),
    radial-gradient(ellipse 45% 40% at 20% 80%, rgba(249, 115, 22, 0.05), transparent 50%),
    #0c0a09 !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.workspace-studio.is-image-only .stage-toolbar,
body.workspace-studio.has-active-image .stage-toolbar {
  background: rgba(12, 10, 9, 0.9) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.workspace-studio.is-image-only .stage-toolbar .transport .ghost,
body.workspace-studio.has-active-image .stage-toolbar .transport .ghost {
  border-radius: 999px !important;
  color: #a8a29e !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-size: 0.72rem !important;
}
body.workspace-studio.is-image-only .stage-toolbar .transport .ghost:hover,
body.workspace-studio.has-active-image .stage-toolbar .transport .ghost:hover {
  color: #fafaf9 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Timeline polish */
.timeline-head {
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(255, 247, 237, 0.9));
  border-bottom: 1px solid rgba(124, 45, 18, 0.1);
}
body.theme-dark .timeline-head {
  background: linear-gradient(180deg, #1c1917, #0c0a09);
  border-bottom-color: rgba(251, 191, 36, 0.12);
}
.timeline-head h2 {
  margin: 0;
  margin-right: 0.35rem;
}
.timeline-head h2::before {
  content: "";
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #22c55e);
  vertical-align: 0.05em;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}
.timeline-head .ghost {
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  padding: 0.28rem 0.55rem;
}
.lane-label {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.95;
}
.track-row-video .lane-label {
  color: #0284c7;
}
.track-row-audio .lane-label {
  color: #16a34a;
}
body.theme-dark .track-row-video .lane-label {
  color: #38bdf8;
}
body.theme-dark .track-row-audio .lane-label {
  color: #4ade80;
}
.track {
  border-radius: 0.45rem;
  border: 1px solid rgba(124, 45, 18, 0.12);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.track.is-media-drop,
.track.is-clip-drop,
.track.is-drop-target {
  border-color: rgba(249, 115, 22, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.2), inset 0 0 20px rgba(249, 115, 22, 0.06);
}
.clip {
  border-radius: 0.4rem;
  font-weight: 650;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.12s ease, filter 0.12s ease;
}
.clip:hover {
  filter: brightness(1.06);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.clip.is-active {
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.65), 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* A2 second audio lane */
.track.track-a3 {
  background: linear-gradient(180deg, #14532d 0%, #0f172a 70%, #020617);
  border-color: rgba(74, 222, 128, 0.28);
}
body:not(.theme-dark) .track.track-a3 {
  background: linear-gradient(180deg, #dcfce7, #f0fdf4 60%, #fff);
  border-color: rgba(22, 163, 74, 0.28);
}
.track-a3 .clip,
.clip.is-a3 {
  border-color: rgba(34, 197, 94, 0.55);
  background: linear-gradient(160deg, #14532d, #166534 50%, #1c1917);
  color: #f0fdf4;
}
body.is-video-lib .track.track-a3 {
  background: linear-gradient(180deg, #14532d 0%, #0f172a 70%, #020617);
  border-color: rgba(74, 222, 128, 0.35);
}
body.is-video-lib .track-a3 .clip {
  border-color: rgba(34, 197, 94, 0.5);
  background: linear-gradient(160deg, #14532d, #166534 50%, #1c1917);
}

/* Top bar polish */
.app-top {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(124, 45, 18, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
body.theme-dark .app-top {
  border-bottom-color: rgba(251, 191, 36, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
.app-top button {
  border-radius: 0.55rem;
  font-weight: 650;
  font-size: 0.8rem;
}
.app-top button.primary {
  box-shadow: 0 2px 10px rgba(234, 88, 12, 0.28);
}
.app-top button.workspace-timeline-btn.is-on,
.app-top #btn-workspace-timeline.is-on {
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35), 0 2px 8px rgba(14, 165, 233, 0.15);
}

/* Empty / placeholder polish */
.stage-placeholder {
  border-radius: 0.85rem;
  border: 1px dashed rgba(251, 191, 36, 0.22);
  background: linear-gradient(160deg, rgba(41, 37, 36, 0.6), rgba(12, 10, 9, 0.85));
  color: #d6d3d1;
  padding: 1.5rem 1.75rem;
  text-align: center;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25);
}
.stage-placeholder strong {
  display: block;
  font-size: 1rem;
  font-weight: 750;
  color: #fafaf9;
  margin-bottom: 0.35rem;
}
.empty-hint {
  border-radius: 0.65rem;
  padding: 0.75rem 0.85rem;
  border: 1px dashed rgba(124, 45, 18, 0.18);
  background: rgba(255, 247, 237, 0.5);
  font-size: 0.78rem;
  line-height: 1.4;
}
body.theme-dark .empty-hint {
  border-color: rgba(251, 191, 36, 0.14);
  background: rgba(28, 25, 23, 0.55);
  color: #a8a29e;
}

/* Toast / HUD */
#toast.toast,
.toast {
  border-radius: 0.75rem !important;
  border: 1px solid rgba(251, 191, 36, 0.25) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(10px);
  font-weight: 650;
  font-size: 0.82rem;
}

/* Scrollbars (studio chrome) */
.rail,
.props,
.timeline,
.track {
  scrollbar-width: thin;
  scrollbar-color: rgba(234, 88, 12, 0.3) transparent;
}
.rail::-webkit-scrollbar,
.props::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.rail::-webkit-scrollbar-thumb,
.props::-webkit-scrollbar-thumb {
  background: rgba(234, 88, 12, 0.35);
  border-radius: 999px;
}

/* Tool rails (image + audio) shared sheen */
.image-tool-rail,
.audio-tool-rail {
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
}
.image-tool-rail button,
.audio-tool-rail button {
  transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease;
}
.image-tool-rail button:hover:not(:disabled),
.audio-tool-rail button:hover:not(:disabled) {
  transform: scale(1.06);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .media-item,
  .clip,
  .image-tool-rail button,
  .audio-tool-rail button {
    transition: none !important;
    transform: none !important;
  }
  .media-item:hover {
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Image / Video Studio simplicity - hide advanced props unless expanded
   --------------------------------------------------------------------------- */

/* Default Studio image/video: collapse .studio-adv */
body.workspace-studio.studio-simple:not(.studio-show-advanced) .studio-adv {
  display: none !important;
}

/* Image Studio: props-av (trim/speed stack) not relevant for stills */
body.workspace-studio.studio-simple-image #props-av,
body.workspace-studio.studio-simple-image #props-group-level,
body.workspace-studio.studio-simple-image #props-group-speed,
body.workspace-studio.studio-simple-image #props-group-fades {
  display: none !important;
}

/* Image: mute/dup/norm row is AV - hide, keep Replace */
body.workspace-studio.studio-simple-image #props-clip-actions .av-only-field {
  display: none !important;
}

/* Video Studio: trim section label */
body.workspace-studio.studio-simple-video .studio-video-label {
  display: block !important;
  margin: 0 0 0.4rem;
}

/* More tools control */
.studio-more-wrap {
  margin-top: 0.35rem;
  padding: 0.65rem 0.75rem 0.8rem;
  border-radius: 0.75rem;
  border: 1px dashed rgba(234, 88, 12, 0.28);
  background: linear-gradient(165deg, rgba(255, 247, 237, 0.65), rgba(255, 255, 255, 0.4));
  text-align: center;
}
body.theme-dark .studio-more-wrap {
  border-color: rgba(251, 191, 36, 0.22);
  background: linear-gradient(165deg, rgba(41, 37, 36, 0.8), rgba(28, 25, 23, 0.6));
}
.studio-more-btn {
  width: 100%;
  font-weight: 750 !important;
  font-size: 0.82rem !important;
  border-radius: 0.6rem !important;
  padding: 0.5rem 0.75rem !important;
  border: 1px solid rgba(234, 88, 12, 0.35) !important;
  background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;
  color: #9a3412 !important;
}
.studio-more-btn.is-on,
.studio-more-btn[aria-expanded="true"] {
  background: linear-gradient(135deg, #fbbf24, #f97316) !important;
  border-color: transparent !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(69, 26, 3, 0.2);
}
body.theme-dark .studio-more-btn {
  background: rgba(28, 25, 23, 0.9) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
  color: #fde68a !important;
}
body.theme-dark .studio-more-btn.is-on,
body.theme-dark .studio-more-btn[aria-expanded="true"] {
  background: linear-gradient(135deg, #fbbf24, #ea580c) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.studio-more-hint {
  margin: 0.45rem 0 0 !important;
  font-size: 0.72rem !important;
  line-height: 1.35;
  opacity: 0.85;
}

/* Quieter notes in simple studio */
body.workspace-studio.studio-simple:not(.studio-show-advanced) #props-group-speed > .note,
body.workspace-studio.studio-simple:not(.studio-show-advanced) #props-group-fades > .note {
  display: none;
}

/* Image adjust: tighter */
body.workspace-studio.studio-simple-image #props-image-edit {
  order: -1;
}
body.workspace-studio.studio-simple-image #props-look-grade {
  order: 0;
}
body.workspace-studio.studio-simple-image #props-body {
  display: flex;
  flex-direction: column;
}

/* Video primary stack order */
body.workspace-studio.studio-simple-video #props-body {
  display: flex;
  flex-direction: column;
}
body.workspace-studio.studio-simple-video #props-group-level { order: 1; }
body.workspace-studio.studio-simple-video #props-av { order: 2; }
body.workspace-studio.studio-simple-video #props-group-speed { order: 3; }
body.workspace-studio.studio-simple-video #props-group-fades { order: 4; }
body.workspace-studio.studio-simple-video #props-look-grade { order: 5; }
body.workspace-studio.studio-simple-video #props-clip-actions { order: 6; }
body.workspace-studio.studio-simple-video #props-studio-more-wrap { order: 50; }
body.workspace-studio.studio-simple-video #props-transform,
body.workspace-studio.studio-simple-video #props-crop,
body.workspace-studio.studio-simple-video #props-chroma,
body.workspace-studio.studio-simple-video #props-captions,
body.workspace-studio.studio-simple-video #props-stickers,
body.workspace-studio.studio-simple-video #props-ab-wipe,
body.workspace-studio.studio-simple-video #props-gain {
  order: 20;
}

/* When advanced open, still keep more button at bottom */
body.workspace-studio.studio-simple.studio-show-advanced #props-studio-more-wrap {
  order: 99 !important;
}

/* Timeline never uses simple collapse */
body.workspace-timeline .studio-more-wrap {
  display: none !important;
}
body.workspace-timeline .studio-adv {
  display: revert !important;
}
/* Restore display for elements that use display:flex etc. */
body.workspace-timeline .row.studio-adv,
body.workspace-timeline .field.studio-adv {
  display: revert;
}
body.workspace-timeline .section.studio-adv {
  display: block;
}

/* ========== VIDEO STUDIO SEAMLESS v1 (must stay LAST) ==========
   Root cause of L/R white border: end-of-file "cinematic" card used
   border: 1px solid rgba(255,255,255,0.08) on .stage-inner — video paints
   *inside* that light stroke so content sits above the white line.
   Same class of bug as Audio Zone cream ring. Never re-introduce light strokes. */
html body.workspace-studio.has-active-video #stage-wrap,
html body.workspace-studio.has-active-video .stage-wrap,
html body.workspace-studio.is-video-lib #stage-wrap,
html body.workspace-studio.is-video-lib .stage-wrap,
html body.workspace-studio.has-active-video #stage-main-col,
html body.workspace-studio.has-active-video #stage,
html body.workspace-studio.has-active-video #stage-inner,
html body.workspace-studio.is-video-lib #stage-main-col,
html body.workspace-studio.is-video-lib #stage,
html body.workspace-studio.is-video-lib #stage-inner {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: #0c0a09 !important;
  background-image: none !important;
  filter: none !important;
}
html body.workspace-studio.has-active-video #stage-inner,
html body.workspace-studio.is-video-lib #stage-inner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body.workspace-studio.has-active-video #stage-inner::before,
html body.workspace-studio.has-active-video #stage-inner::after,
html body.workspace-studio.is-video-lib #stage-inner::before,
html body.workspace-studio.is-video-lib #stage-inner::after {
  content: none !important;
  display: none !important;
}
html body.workspace-studio.has-active-video #stage-toolbar,
html body.workspace-studio.is-video-lib #stage-toolbar {
  border: none !important;
  border-top: none !important;
  border-top-width: 0 !important;
  box-shadow: none !important;
  background: #1c1917 !important;
  z-index: 20 !important;
}
html body.workspace-studio.has-active-video #app-body,
html body.workspace-studio.is-video-lib #app-body {
  background: #0c0a09 !important;
  gap: 0 !important;
}
html body.workspace-studio.has-active-video #rail-resizer,
html body.workspace-studio.has-active-video #props-resizer,
html body.workspace-studio.is-video-lib #rail-resizer,
html body.workspace-studio.is-video-lib #props-resizer {
  background: #0c0a09 !important;
  border: none !important;
  box-shadow: none !important;
}
html body.workspace-studio.has-active-video #rail,
html body.workspace-studio.is-video-lib #rail {
  border-right: none !important;
}
html body.workspace-studio.has-active-video #props,
html body.workspace-studio.is-video-lib #props {
  border-left: none !important;
  background: #141210 !important;
}


/* ========== Simple Timeline (V1 + A1 only) ========== */
body.workspace-timeline .track-row.tl-advanced,
body.workspace-timeline .tl-advanced[hidden],
.timeline .track-row.tl-advanced {
  display: none !important;
}
body.workspace-timeline .timeline-head .tl-advanced {
  display: none !important;
}
/* Slightly roomier simple lanes */
body.workspace-timeline .track-row-video .track,
body.workspace-timeline .track-row-audio .track {
  min-height: 2.6rem;
}
body.workspace-timeline .timeline-head {
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* Audio rail: open tool is orange (beats body.theme-dark button:not(.primary)) */
html body.theme-dark .audio-tool-rail .aud-tool,
html body.workspace-studio .audio-tool-rail .aud-tool,
html body.audio-zone .audio-tool-rail .aud-tool {
  background: transparent !important;
  color: #e7e5e4 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html body.theme-dark .audio-tool-rail .aud-tool:hover:not(:disabled),
html body.workspace-studio .audio-tool-rail .aud-tool:hover:not(:disabled),
html body.audio-zone .audio-tool-rail .aud-tool:hover:not(:disabled) {
  background: rgba(251, 191, 36, 0.12) !important;
  color: #fde68a !important;
  border-color: rgba(251, 191, 36, 0.28) !important;
}
html body.theme-dark .audio-tool-rail .aud-tool.has-fx:not(.is-disabled),
html body.workspace-studio .audio-tool-rail .aud-tool.has-fx:not(.is-disabled),
html body.audio-zone .audio-tool-rail .aud-tool.has-fx:not(.is-disabled) {
  color: #fdba74 !important;
}
html body.theme-dark .audio-tool-rail .aud-tool.is-on,
html body.theme-dark .audio-tool-rail .aud-tool[aria-pressed="true"],
html body.workspace-studio .audio-tool-rail .aud-tool.is-on,
html body.workspace-studio .audio-tool-rail .aud-tool[aria-pressed="true"],
html body.audio-zone .audio-tool-rail .aud-tool.is-on,
html body.audio-zone .audio-tool-rail .aud-tool[aria-pressed="true"] {
  background: rgba(234, 88, 12, 0.16) !important;
  color: #fb923c !important;
  border-color: rgba(249, 115, 22, 0.45) !important;
  box-shadow: none !important;
}
html body.theme-dark .audio-tool-rail .aud-tool.is-disabled,
html body.workspace-studio .audio-tool-rail .aud-tool.is-disabled,
html body.audio-zone .audio-tool-rail .aud-tool.is-disabled {
  color: #78716c !important;
  opacity: 0.5;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html body.theme-dark .audio-tool-rail .aud-tool.is-disabled.is-on,
html body.workspace-studio .audio-tool-rail .aud-tool.is-disabled.is-on {
  color: #a8a29e !important;
  background: rgba(68, 64, 60, 0.5) !important;
  border-color: rgba(168, 162, 158, 0.4) !important;
  opacity: 0.7;
}
.audio-tool-rail .aud-tool.is-disabled::after {
  content: "";
  position: absolute;
  width: 1.35rem;
  height: 2px;
  border-radius: 2px;
  background: #a8a29e;
  transform: rotate(-42deg);
  pointer-events: none;
}
/* Image studio stage fill follows the Background picker (must beat hairline / dark-lock CSS). */
html body.workspace-studio.is-image-only #stage-inner,
html body.workspace-studio.is-image-only .stage-inner,
html body.workspace-studio.is-image-only #stage,
html body.workspace-studio.is-image-only .stage,
html body.workspace-studio.is-image-only #stage-wrap,
html body.workspace-studio.is-image-only .stage-wrap,
html body.workspace-studio.is-image-only #stage-main-col,
html body.workspace-studio.is-image-only .stage-main-col,
html body.theme-dark.is-image-only .stage-wrap,
html body.theme-dark.is-image-only .stage-inner,
html body.theme-dark.is-image-only .stage,
html body.theme-dark.workspace-studio.is-image-only #stage-inner {
  background: var(--stage-bg, #0c0a09) !important;
  background-color: var(--stage-bg, #0c0a09) !important;
  background-image: none !important;
}

/* Refs sit in the letterbox beside the snapped canvas (JS sets left/top). */
#stage-work {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
}
.pixel-ref {
  display: none;
  position: absolute;
  z-index: 8;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.85rem;
  width: auto;
  height: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  pointer-events: auto;
  background: transparent;
  border: none;
  box-shadow: none;
}
html body.has-pixel-ref #pixel-ref,
html body.is-pixel-ref-drag #pixel-ref {
  display: flex !important;
}
.pixel-ref[hidden] {
  display: none !important;
}
.pixel-ref-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.85rem;
  overflow: visible;
}
.pixel-ref-pic {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
  line-height: 0;
}
.pixel-ref-paper {
  display: block;
  background: transparent;
}
.pixel-ref-pic img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
  user-select: none;
  -webkit-user-drag: none;
}
#pixel-ref-drop.drop {
  display: none;
  position: relative;
  z-index: 8;
  box-sizing: border-box;
  flex: 0 0 auto;
  align-self: flex-start;
  width: 11.5rem;
  height: 11.5rem;
  min-width: 8rem;
  min-height: 8rem;
  padding: 0;
  margin: 0;
  border-radius: 1.15rem;
  border: 2.5px dashed rgba(251, 146, 60, 0.92);
  background: rgba(15, 12, 10, 0.35);
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.28),
    0 0 18px rgba(249, 115, 22, 0.22),
    inset 0 0 0 1px rgba(251, 191, 36, 0.12);
  pointer-events: auto;
  cursor: copy;
}
html body.is-pixel-ref-drag #pixel-ref-drop.drop:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: drop-breathe 1.7s ease-in-out infinite;
}
html body.is-pixel-ref-drag #pixel-ref-drop.drop.is-drag {
  animation: none;
  border-color: #fdba74;
  background: rgba(120, 53, 15, 0.38);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.45),
    0 0 28px rgba(249, 115, 22, 0.32);
}
#pixel-ref-drop .drop-ico {
  position: static;
  left: auto;
  top: auto;
  margin: 0;
  transform: none;
  pointer-events: none;
  opacity: 0.95;
}
.pixel-ref-card-close {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  z-index: 2;
  border: 0;
  background: rgba(12, 10, 9, 0.55);
  color: #fafaf9;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.12rem 0.35rem;
  border-radius: 0.25rem;
}
.pixel-ref-card-close:hover {
  background: rgba(12, 10, 9, 0.85);
}

/* ── Texture workspace ──────────────────────────────────────────────
   Pixel-art shell. JS also sets workspace-studio so Studio dock-hide /
   tool-rail layout apply; these rules strip leftover A/V chrome. */
body.workspace-texture {
  --bottom: 0 !important;
}
body.workspace-texture .timeline,
body.workspace-texture .timeline-resizer,
body.workspace-texture #timeline,
body.workspace-texture #timeline-resizer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
}
body.workspace-texture .app-body,
body.workspace-texture #app-body {
  bottom: 0 !important;
}
body.workspace-texture .stage-toolbar,
body.workspace-texture #stage-toolbar,
body.workspace-texture #btn-play,
body.workspace-texture #btn-stop,
body.workspace-texture #btn-seq-mode,
body.workspace-texture #btn-split,
body.workspace-texture #btn-loop,
body.workspace-texture #btn-marker,
body.workspace-texture #btn-comment,
body.workspace-texture #btn-export-sequence,
body.workspace-texture #scrub-wrap,
body.workspace-texture .scrub-wrap,
body.workspace-texture .audio-meter,
body.workspace-texture #audio-meter {
  display: none !important;
}
body.workspace-texture #props-av,
body.workspace-texture #props-chroma,
body.workspace-texture #props-captions,
body.workspace-texture #props-stickers,
body.workspace-texture #props-ab-wipe,
body.workspace-texture #props-transform,
body.workspace-texture #props-crop,
body.workspace-texture #props-image,
body.workspace-texture #props-eq,
body.workspace-texture #props-eq-link,
body.workspace-texture #props-gain,
body.workspace-texture #props-gate,
body.workspace-texture #props-group-speed,
body.workspace-texture #props-group-fades,
body.workspace-texture #props-pitch-field,
body.workspace-texture #props-ramp,
body.workspace-texture #props-rate-mode {
  display: none !important;
}
body.workspace-texture #props-look-grade {
  display: block !important;
}
body.workspace-texture.has-pixel-canvas #preview-image,
body.workspace-texture.has-pixel-canvas .still-composite {
  image-rendering: pixelated !important;
  image-rendering: crisp-edges;
  z-index: 5 !important;
}

/* ── Mobile (phones) 2026-10-11: single-column stage + props, touch-friendly ── */
@media (max-width: 720px) {
  html body .app-body,
  html body.audio-zone .app-body,
  html body.workspace-studio .app-body,
  html body #app-body,
  html body.workspace-studio:not(.is-empty) #app-body {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
  }
  html body .app-body > .stage-wrap,
  html body #app-body > #stage-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: none !important;
  }
  html body .app-body > .props,
  html body #app-body > #props {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: auto !important;
    max-width: none !important;
    max-height: 36vh;
    overflow-y: auto;
  }
  html body .app-body > .rail,
  html body .app-body > .rail-resizer,
  html body .app-body > .props-resizer {
    display: none !important;
  }
  .app-top button.ghost { min-height: 2.4rem; }
  #btn-undo, #btn-redo { min-width: 2.6rem; }
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  /* Stop page scroll / browser zoom while drawing or selecting on the canvas */
  #stage, #stage-inner, #stage-work { touch-action: none; overscroll-behavior: contain; }
  html, body { overscroll-behavior: none; }
}
@media (max-width: 720px) and (orientation: landscape) {
  html body .app-body,
  html body #app-body,
  html body.workspace-studio:not(.is-empty) #app-body {
    grid-template-columns: minmax(0, 1fr) 13rem !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
  html body #app-body > #props,
  html body .app-body > .props {
    grid-column: 2 !important;
    grid-row: 1 !important;
    max-height: none;
    border-top: none;
    border-left: 1px solid var(--stroke);
  }
  .app-top { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 720px) {
  /* Tool option bars (pencil/text/crop/marquee): cap height so the canvas keeps room */
  html body .image-paint-options,
  html body .image-text-options,
  html body .image-crop-options,
  html body .image-marquee-options,
  html body #stage-main-col > #image-paint-options,
  html body #stage-main-col > #image-text-options,
  html body #stage-main-col > #image-crop-options,
  html body #stage-main-col > #image-marquee-options {
    max-height: 7.5rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Video transport/time row is meaningless for a single still */
  html body.is-image-only:not(.workspace-timeline) #stage-main-col > #stage-toolbar { display: none !important; }
}
/* batch w: timeline workspace hides image-tool chrome; hidden slow-decode badge */
.dropped-frame-warn[hidden] { display: none !important; }
body.workspace-timeline #image-paint-options,
body.workspace-timeline #pixel-grid-overlay,
body.workspace-timeline #sf-crop-overlay,
body.workspace-timeline #sf-marquee-overlay,
body.workspace-timeline #img-paint-hint { display: none !important; }

/* v408: phone Lib sheet + More menu kept on-screen */
.rail-sheet-scrim { display: none; }
@media (max-width: 720px) {
  html body.rail-sheet-open .app-body > .rail,
  html body.rail-sheet-open #app-body > #rail {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    left: 0;
    top: var(--top, 3rem);
    bottom: 0;
    width: min(86vw, 22rem) !important;
    max-width: none !important;
    z-index: 80;
    overflow-y: auto;
    background: rgba(28, 25, 23, 0.99);
    border-right: 1px solid rgba(251, 191, 36, 0.28);
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.45);
  }
  html body.rail-sheet-open .rail-sheet-scrim {
    display: block !important;
    position: fixed;
    inset: var(--top, 3rem) 0 0 0;
    z-index: 79;
    background: rgba(0, 0, 0, 0.45);
  }
  html body .top-more-panel {
    position: fixed;
    top: calc(var(--top, 3rem) + 0.25rem);
    right: 0.5rem;
    left: auto;
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - var(--top, 3rem) - 1rem);
    z-index: 90;
  }
}

/* v409: empty library shows a clean stage */
body.sf-lib-empty #pixel-paper,
body.sf-lib-empty #pixel-grid-overlay,
body.sf-lib-empty #chroma-stage-canvas,
body.sf-lib-empty #still-composite,
body.sf-lib-empty #preview-video,
body.sf-lib-empty #preview-image,
body.sf-lib-empty #sf-crop-overlay,
body.sf-lib-empty #image-edge-guide,
body.sf-lib-empty #image-edge-guide.is-on,
body.sf-lib-empty #image-edge-guide-frame,
body.sf-lib-empty #image-edge-guide-frame.is-on { display: none !important; }
/* scrim sits in .app-body grid but must not take a grid cell */
.app-body > .rail-sheet-scrim { grid-area: auto; }

/* 2026-10-12o: command palette empty state */
.cmd-empty { margin: 0; padding: 0.6rem 0.75rem; font-size: 0.85rem; color: var(--muted, #8a8f98); opacity: 0.85; }

/* v416: phone Timeline workspace. The media rail is hidden on phones, so the
   desktop offset (left: --tl-media + gap) left a blank ~206px column and squeezed
   stage/transport into ~184px. Use the full width and let transport wrap. */
@media (max-width: 720px) {
  body.workspace-timeline:not(.is-empty) .app-body,
  body.workspace-timeline:not(.is-empty) .timeline,
  body.workspace-timeline:not(.is-empty) #timeline,
  body.workspace-timeline:not(.is-empty) .timeline-resizer,
  body.workspace-timeline:not(.is-empty) #timeline-resizer {
    left: 0 !important;
  }
  body.workspace-timeline .stage-toolbar .transport {
    flex-wrap: wrap;
    max-width: 100%;
  }
}
/* v416: sliders let vertical pans scroll the panel (JS also gates horizontal drags). */
input[type="range"],
.props,
.prop-row,
.settings-sheet,
.rail-sheet {
  touch-action: pan-y;
}

/* v424: slimmer trim handles on narrow (<48px) timeline clips so a click
   in the body selects instead of landing on a handle */
.clip.is-narrow .clip-edge {
  width: 6px;
}