/* JugaadAI Studio — Phase 1 UI shell. Engine styles remain in index.html. */
:root {
  --studio-bg: #0f1117;
  --studio-panel: #1a1d26;
  --studio-panel-2: #222632;
  --studio-panel-3: #292f3c;
  --studio-border: #3a4050;
  --studio-text: #e6e8ef;
  --studio-muted: #9aa3b5;
  --studio-accent: #6366f1;
  --studio-accent-2: #a78bfa;
  --studio-success: #34d399;
  --studio-danger: #f87171;
  --studio-playhead: #facc15;
  --studio-focus: #a5b4fc;
  --studio-shadow: 0 16px 42px rgba(0, 0, 0, .38);
  --studio-shadow-soft: 0 8px 24px rgba(0, 0, 0, .24);
  --studio-radius-sm: 6px;
  --studio-radius-md: 10px;
  --studio-radius-lg: 14px;
  --studio-space: 4px;
  --studio-topbar-h: 52px;
  --studio-left-width: 278px;
  --studio-right-width: 310px;
  --studio-timeline-h: 194px;
  --studio-mobile-toolbar-h: 66px;
  --studio-zoom: 1;
  --studio-pan-x: 0px;
  --studio-pan-y: 0px;
  color-scheme: dark;
}

html, body { width: 100%; height: 100%; min-width: 0; margin: 0; overflow: hidden; }
body.studio-active {
  display: block !important;
  background: var(--studio-bg) !important;
  color: var(--studio-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px;
  line-height: 1.4;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
body.studio-active *, body.studio-active *::before, body.studio-active *::after { box-sizing: border-box; }
body.studio-active button, body.studio-active input, body.studio-active select, body.studio-active textarea { font: inherit; }
body.studio-active button { color: inherit; cursor: pointer; }
body.studio-active button:disabled, body.studio-active [aria-disabled="true"] { cursor: not-allowed !important; opacity: .42 !important; }
body.studio-active button:focus-visible, body.studio-active input:focus-visible, body.studio-active select:focus-visible,
body.studio-active textarea:focus-visible, body.studio-active [tabindex]:focus-visible {
  outline: 2px solid var(--studio-focus) !important;
  outline-offset: 2px;
}
body.studio-active [hidden] { display: none !important; }

#studio-root {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: var(--studio-topbar-h) minmax(0, 1fr) var(--studio-timeline-h);
  overflow: hidden;
  background: var(--studio-bg);
  isolation: isolate;
}

/* Top command bar */
#top {
  z-index: 40;
  height: var(--studio-topbar-h) !important;
  min-width: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px !important;
  background: #171a23;
  border-bottom: 1px solid var(--studio-border);
  color: var(--studio-text);
  font-size: 13px !important;
  font-weight: 500 !important;
}
.studio-top-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 0 auto; }
.studio-brand-mark {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 9px; color: #fff; background: linear-gradient(145deg, #6366f1, #8b5cf6 62%, #c084fc);
  box-shadow: 0 5px 14px rgba(99,102,241,.24);
}
.studio-brand-mark svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.studio-brand-name { font-size: 13px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.studio-brand-sub { color: var(--studio-muted); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.studio-project-name { min-width: 0; display: flex; align-items: center; gap: 8px; padding-left: 13px; margin-left: 2px; border-left: 1px solid var(--studio-border); }
.studio-project-name .studio-project-label { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--studio-text); font-size: 12px; font-weight: 600; }
.studio-project-name b { color: var(--studio-muted) !important; font-size: 10px !important; font-weight: 600 !important; }
.studio-top-menus { display: flex; align-items: center; gap: 2px; min-width: 0; margin: 0 auto 0 10px; }
.studio-menu-wrap { position: relative; }
.studio-menu-trigger {
  min-height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: #c5cad6; font-size: 12px; font-weight: 500;
}
.studio-menu-trigger:hover, .studio-menu-wrap.is-open .studio-menu-trigger { background: #242936; border-color: #343b4c; color: #fff; }
.studio-menu-popover {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 120;
  width: 218px; padding: 6px; border: 1px solid var(--studio-border); border-radius: 10px;
  background: #202430; box-shadow: var(--studio-shadow); display: grid; gap: 2px;
}
.studio-menu-item {
  width: 100%; min-height: 34px; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--studio-text); font-size: 12px;
}
.studio-menu-item:hover:not(:disabled) { background: #303748; }
.studio-menu-item svg { width: 15px; height: 15px; stroke: #b9c1d2; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.studio-menu-item small { color: var(--studio-muted); margin-left: auto; font-size: 10px; }
.studio-menu-separator { height: 1px; margin: 4px 5px; background: #3a4050; }
.studio-top-actions { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.studio-top-icon, #top #undo, #top #redo {
  width: 34px !important; height: 34px !important; min-width: 34px; padding: 0 !important; display: grid; place-items: center;
  border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; color: #c3cad8 !important;
  font-size: 0 !important; line-height: 1 !important;
}
.studio-top-icon:hover, #top #undo:hover, #top #redo:hover { background: #292e3b !important; border-color: #3c4354 !important; }
.studio-top-icon svg, #top #undo svg, #top #redo svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#top #ex {
  min-height: 34px !important; padding: 0 15px !important; border: 1px solid #7779f5 !important; border-radius: 8px !important;
  background: linear-gradient(135deg, #6366f1, #7557df) !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(99,102,241,.2);
}
#top #ex:hover { filter: brightness(1.08); }
.studio-top-mobile-menu { display: none; }

/* Main workspace */
#studio-workspace {
  position: relative;
  min-width: 0; min-height: 0; overflow: hidden;
  display: grid;
  grid-template-columns: 44px var(--studio-left-width) minmax(0, 1fr) var(--studio-right-width);
  background: var(--studio-bg);
}
#studio-toolrail {
  z-index: 9; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 5px; background: #171a23; border-right: 1px solid var(--studio-border);
}
.studio-tool-button {
  width: 34px; height: 36px; flex: none; display: grid; place-items: center; position: relative;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: #9ca6ba;
}
.studio-tool-button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.studio-tool-button:hover:not(:disabled) { background: #252a37; color: #fff; }
.studio-tool-button.is-active { background: #30345a; border-color: #5054a5; color: #c7c8ff; box-shadow: inset 2px 0 #8b8cf8; }
.studio-tool-divider { width: 25px; height: 1px; background: var(--studio-border); margin: 3px 0; flex: none; }
.studio-tool-spacer { flex: 1; }
.studio-tool-button[title]:not(:disabled):hover::after { content: attr(title); position: absolute; left: calc(100% + 9px); top: 50%; transform: translateY(-50%); padding: 5px 8px; z-index: 100; border: 1px solid #485064; border-radius: 6px; background: #10131b; color: #f1f3fa; font-size: 11px; white-space: nowrap; box-shadow: var(--studio-shadow-soft); pointer-events: none; }

#studio-left-panel, #studio-inspector {
  min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: 46px minmax(0, 1fr);
  background: var(--studio-panel); color: var(--studio-text);
}
#studio-left-panel { border-right: 1px solid var(--studio-border); }
#studio-inspector { border-left: 1px solid var(--studio-border); }
.studio-panel-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0;
  padding: 0 10px; background: #1d212c; border-bottom: 1px solid var(--studio-border);
}
.studio-panel-title { display: flex; align-items: center; gap: 8px; min-width: 0; color: #dfe3ee; font-weight: 700; font-size: 12px; letter-spacing: .01em; }
.studio-panel-title svg { width: 15px; height: 15px; color: var(--studio-accent-2); stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.studio-panel-tabs { display: flex; align-items: center; min-width: 0; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.studio-panel-tabs::-webkit-scrollbar { display: none; }
.studio-panel-tab {
  min-height: 29px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 0 7px; border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: #9ba5b8; font-size: 10px; font-weight: 600; white-space: nowrap;
}
.studio-panel-tab svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.studio-panel-tab:hover:not(:disabled) { color: #fff; background: #2b3040; }
.studio-panel-tab.is-active { color: #e1e3ff; background: #32365b; border-color: #4e5295; }
.studio-panel-close { width: 27px; height: 27px; border: 0; border-radius: 6px; background: transparent; color: var(--studio-muted); display: grid; place-items: center; }
.studio-panel-close:hover { background: #303748; color: #fff; }
.studio-panel-close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
#studio-panel-content, #studio-inspector-content { min-width: 0; min-height: 0; overflow: auto; padding: 12px; scrollbar-color: #454c5c transparent; scrollbar-width: thin; }
.studio-panel-kicker { margin: 0 0 9px; color: #aeb7c8; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.studio-panel-home { display: grid; gap: 12px; }
.studio-panel-card { padding: 12px; border: 1px solid #343b4b; border-radius: 10px; background: linear-gradient(145deg, #222735, #1d222d); }
.studio-panel-card h3 { margin: 0 0 5px; font-size: 13px; line-height: 1.3; font-weight: 700; color: #edf0f8; }
.studio-panel-card p { margin: 0; color: #a4adbf; font-size: 11px; line-height: 1.55; }
.studio-panel-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.studio-action-card {
  min-width: 0; min-height: 70px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px;
  padding: 10px; border: 1px solid #353c4c; border-radius: 9px; background: #222734; color: #d7dceb; text-align: left;
  font-size: 11px; font-weight: 600;
}
.studio-action-card:hover:not(:disabled) { background: #2b3140; border-color: #59627a; }
.studio-action-card svg { width: 18px; height: 18px; stroke: #a7a9ff; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.studio-action-card small { color: #8994a8; font-size: 9px; font-weight: 500; }
.studio-panel-note { padding: 8px 9px; border-left: 2px solid #6265d9; background: #242839; color: #aeb6c8; font-size: 10px; line-height: 1.5; }
.studio-state-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid #343b49; color: #aeb7c8; font-size: 11px; }
.studio-state-line strong { color: #e3e6ef; font-weight: 600; }
.studio-shortcut { display: inline-flex; gap: 3px; align-items: center; color: #cbd1df; font-size: 10px; }
.studio-shortcut kbd { padding: 2px 5px; border: 1px solid #454d60; border-radius: 4px; background: #171b24; color: #cfd5e2; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Existing edit sheets are re-homed in this panel on desktop. */
#studio-left-panel #pop {
  position: static !important; inset: auto !important; z-index: auto !important; width: 100%; max-width: none;
  max-height: none !important; overflow: visible; display: flex; gap: 10px; padding: 0 !important;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
#studio-left-panel #pop[hidden] { display: none !important; }
#studio-left-panel #pop h3 { color: #f0f2f8; font-size: 13px; }
#studio-left-panel #pop .rw { min-width: 0; gap: 6px; }
#studio-left-panel #pop .rw input { min-width: 0; width: 100%; }
#studio-left-panel #pop input[type=text], #studio-left-panel #pop #q, #studio-left-panel #pop #tx { width: 100%; min-height: 35px; background: #151923; border: 1px solid #41495b; border-radius: 7px; color: #edf0f7; }
#studio-left-panel #pop .pb, #studio-left-panel #pop .gb { min-height: 34px; padding: 0 10px; border-radius: 7px; font-size: 11px; white-space: nowrap; }
#studio-left-panel #pop .media-tabs { gap: 5px; }
#studio-left-panel #pop .media-tabs button { min-height: 32px; border-radius: 7px; background: #242a38; border-color: #3e4659; color: #bfc7d6; }
#studio-left-panel #pop .media-tabs button.on { background: #33365b; border-color: #6b6ee3; color: #f4f4ff; }
#studio-left-panel #pop #gr { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
#studio-left-panel #pop #gr button { min-width: 0; padding: 6px 3px; background: #242a37; border: 1px solid #343c4d; border-radius: 8px; color: #dbe0eb; }
#studio-left-panel #pop #gr svg, #studio-left-panel #pop #gr img { width: 38px; height: 38px; }
#studio-left-panel #pop #gr small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #abb4c6; }
#studio-left-panel #pop #pix-results { grid-template-columns: repeat(2, minmax(0,1fr)); max-height: 330px; }
#studio-left-panel #pop #pix-results img { height: 105px; }
#studio-left-panel #pop #pc .chips { gap: 6px; }
#studio-left-panel #pop #pc .chips button { min-height: 32px; padding: 6px 10px; background: #252b39; color: #dce1ed; font-size: 11px; }
#studio-left-panel #pop #pc .chips button.on { background: #383b65; border-color: #7779f5; }
#studio-left-panel #pop #er { display: block; color: #fca5a5 !important; font-size: 10px; line-height: 1.4; }
#studio-left-panel #new-sheet {
  position: static !important; inset: auto !important; z-index: auto !important; display: block; padding: 0 !important;
  min-height: 0; max-height: none !important; overflow: visible !important; background: transparent !important;
}
#studio-left-panel #new-sheet .new-card {
  width: 100% !important; max-height: none !important; overflow: visible !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
#studio-left-panel #new-sheet .new-card > .rw h3 { color: #f0f2f8; font-size: 13px; }
#studio-left-panel #new-sheet .new-card > label { margin: 10px 0 4px; color: #aeb7c8; }
#studio-left-panel #new-sheet .new-card > textarea, #studio-left-panel #new-sheet .new-card > input,
#studio-left-panel #new-sheet .new-card > select { min-height: 36px; border-radius: 7px; }
#studio-left-panel #new-sheet textarea { min-height: 110px; }
#studio-left-panel #addsheet {
  position: static !important; inset: auto !important; z-index: auto !important; width: 100%; max-height: none !important; overflow: visible;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
#studio-left-panel #addsheet .tabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; }
#studio-left-panel #addsheet .tabs button { min-width: 0; min-height: 34px; padding: 6px 4px; font-size: 10px; }
#studio-left-panel #addsheet textarea, #studio-left-panel #addsheet input[type=text] { border-radius: 7px; background: #151923; }
#studio-left-panel #addsheet .grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
#studio-left-panel #voice-audio-controls:not([hidden]) { position: static !important; width: 100%; box-shadow: none; margin-top: 8px; background: #222735; }

/* Center canvas, view controls and transport */
#studio-center { min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: 34px minmax(0, 1fr) 42px; background: #0d0f15; }
#studio-canvas-toolbar {
  min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 10px;
  border-bottom: 1px solid #252b37; background: #141720; color: #aeb7c7;
}
.studio-view-label { margin-right: auto; color: #abb3c3; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.studio-view-control {
  min-height: 25px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px;
  border: 1px solid #363d4e; border-radius: 5px; background: #202531; color: #c3cada; font-size: 10px;
}
.studio-view-control svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.studio-view-control:hover:not(:disabled) { background: #2c3342; color: #fff; }
.studio-zoom-readout { min-width: 40px; text-align: center; color: #d9deea; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
#pv {
  position: relative !important; min-width: 0; min-height: 0; width: 100%; height: auto !important; flex: none !important;
  display: grid !important; place-items: center; padding: 12px !important; overflow: hidden;
  background-color: #10131b;
  background-image: linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.025) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.025) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.025) 75%);
  background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
#studio-stage-wrap {
  width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center;
  transform: translate(var(--studio-pan-x), var(--studio-pan-y)) scale(var(--studio-zoom));
  transform-origin: center center; will-change: transform;
}
#stage {
  position: relative; height: 100% !important; width: auto !important; max-width: 100% !important; max-height: 100% !important;
  aspect-ratio: 9 / 16; border: 1px solid rgba(255,255,255,.16); border-radius: 10px !important;
  box-shadow: 0 15px 36px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.5);
  transform: none; touch-action: none;
}
#addfab {
  position: absolute !important; right: 16px !important; bottom: 14px !important; z-index: 42 !important;
  min-height: 38px; padding: 0 15px !important; border: 1px solid #7779f5 !important; border-radius: 20px !important;
  background: linear-gradient(135deg, #6366f1, #7c5ce4) !important; color: #fff !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.4); font-size: 12px !important; font-weight: 700 !important;
}
#bar {
  height: 42px !important; min-width: 0; position: relative; display: flex !important; align-items: center; justify-content: center;
  gap: 8px !important; padding: 0 12px; background: #181c26; border-top: 1px solid var(--studio-border); color: #c8cfdd;
}
#bar #tm { left: 12px !important; color: #abb4c6; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
#bar button { width: 32px; height: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 7px; background: transparent !important; color: #c9d0df !important; font-size: 16px !important; padding: 0 6px !important; }
#bar button:hover { background: #2b3140 !important; }
#bar #pp { width: 35px !important; height: 29px !important; border-radius: 8px !important; background: #e8eaf0 !important; color: #141720 !important; font-size: 14px !important; }
#bar #fs { font-size: 17px !important; }

/* Timeline dock */
#studio-timeline-dock {
  min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: 30px minmax(0,1fr);
  grid-template-columns: 118px minmax(0,1fr); background: #151821; border-top: 1px solid var(--studio-border);
}
.studio-timeline-toolbar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: #1d222d; border-bottom: 1px solid #353c4c; color: #aeb7c8;
}
.studio-timeline-title { margin-right: auto; color: #e0e4ed; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.studio-track-headers { min-width: 0; padding: 19px 9px 8px; display: grid; grid-template-rows: 14px 40px 28px 40px; align-content: start; border-right: 1px solid #343b4a; color: #98a2b5; font-size: 10px; }
.studio-track-headers strong { color: #d2d8e4; font-size: 10px; font-weight: 600; }
.studio-track-label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.studio-track-dot { width: 6px; height: 6px; border-radius: 2px; background: #a78bfa; }
.studio-track-label:nth-child(3) .studio-track-dot { background: #86efac; }
.studio-track-label:nth-child(4) .studio-track-dot { background: #f0abfc; }
#tlw {
  position: relative !important; min-width: 0; width: 100%; height: 100% !important; min-height: 0;
  background: #151821 !important; border-top: 0 !important; overflow: hidden;
}
#tl { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #434b5c transparent; }
#tl::-webkit-scrollbar { height: 7px; display: block; }
#tl::-webkit-scrollbar-thumb { background: #424a5c; border-radius: 8px; }
#tr { min-width: 0; }
#ph { background: var(--studio-playhead) !important; }
#ph:before { border-top-color: var(--studio-playhead) !important; }
#tl .tk { color: #858fa2; border-color: #333a48; }
#tl .clip { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
#tl .clip.sel { outline: 2px solid #dbeafe; }
.studio-timeline-zoom { color: #8f9aae; font-size: 10px; }
.studio-timeline-zoom button { min-height: 22px; padding: 0 7px; border: 1px solid #394152; border-radius: 5px; background: #272d3a; color: #bbc4d4; font-size: 10px; }

/* Inspector */
#studio-inspector-content { padding: 12px; }
.studio-inspector-section { margin-bottom: 14px; }
.studio-inspector-section + .studio-inspector-section { padding-top: 12px; border-top: 1px solid #353c4b; }
.studio-inspector-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 9px; color: #cbd2e0; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.studio-inspector-heading small { color: #7f8a9e; font-size: 9px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.studio-inspector-context { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #3a4253; border-radius: 9px; background: #222734; }
.studio-context-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; background: #363a61; color: #c4c5ff; }
.studio-context-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.studio-context-copy { min-width: 0; }
.studio-context-copy strong { display: block; color: #edf0f8; font-size: 12px; font-weight: 700; }
.studio-context-copy small { display: block; margin-top: 2px; color: #929caf; font-size: 10px; }
.studio-inspector-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.studio-inspector-action {
  min-width: 0; min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 8px;
  border: 1px solid #3a4253; border-radius: 7px; background: #252b38; color: #d5dbe7; font-size: 10px; font-weight: 600; text-align: left;
}
.studio-inspector-action svg { width: 14px; height: 14px; stroke: #a8b0ff; fill: none; stroke-width: 1.75; }
.studio-inspector-action:hover:not(:disabled) { background: #303748; border-color: #59647c; }
.studio-inspector-action.is-danger svg { color: #f87171; stroke: currentColor; }
.studio-property-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.studio-property-field { min-width: 0; display: grid; gap: 4px; color: #929caf; font-size: 9px; }
.studio-property-field input { width: 100%; min-width: 0; height: 31px; padding: 0 7px; border: 1px solid #394152; border-radius: 6px; background: #171b24; color: #929caf; font: 10px ui-monospace, monospace; }
.studio-inspector-empty { padding: 13px 10px; border: 1px dashed #444c5e; border-radius: 9px; color: #9ba5b8; text-align: center; font-size: 10px; line-height: 1.6; }
.studio-inspector-empty svg { display: block; width: 23px; height: 23px; margin: 0 auto 8px; stroke: #838df2; fill: none; stroke-width: 1.6; }
.studio-theme-swatches { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.studio-theme-swatch { height: 49px; display: flex; align-items: flex-end; padding: 5px; overflow: hidden; border: 1px solid #ffffff26; border-radius: 7px; color: white; text-shadow: 0 1px 4px #000; font-size: 9px; font-weight: 700; }
.studio-theme-swatch[data-theme="finance"] { background: linear-gradient(135deg,#101827,#0f766e,#fbbf24); }
.studio-theme-swatch[data-theme="travel"] { background: linear-gradient(135deg,#082f49,#0e7490,#fcd34d); }
.studio-theme-swatch[data-theme="health"] { background: linear-gradient(135deg,#12332d,#15803d,#a7f3d0); }
.studio-theme-swatch[data-theme="tech"] { background: linear-gradient(135deg,#111827,#4f46e5,#67e8f9); }
.studio-theme-swatch[data-theme="creative"] { background: linear-gradient(135deg,#1e1b4b,#7c3aed,#fde047); }
.studio-theme-swatch[data-theme="midnight"] { background: linear-gradient(135deg,#181a29,#4c568f,#b8c4ff); }

/* Mobile toolbar and FAB */
#tb { display: none !important; }
#tb button { color: #adb7c9; }
#tb button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#tb button.sc, #tb button.new-tool { color: #c2c4ff; }
#tb .sep { background: #3c4352; }
#toast { bottom: 18px !important; z-index: 200000 !important; background: #eef0f7 !important; color: #171923 !important; box-shadow: var(--studio-shadow); }

/* Desktop sheet and help overlay */
#studio-shortcuts-overlay {
  position: fixed; inset: 0; z-index: 180000; display: grid; place-items: center; padding: 20px;
  background: rgba(4,6,12,.72); backdrop-filter: blur(6px);
}
#studio-shortcuts-overlay[hidden] { display: none !important; }
.studio-shortcuts-card { width: min(100%, 460px); padding: 18px; border: 1px solid #485064; border-radius: 14px; background: #1d222e; box-shadow: var(--studio-shadow); }
.studio-shortcuts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.studio-shortcuts-head h2 { margin: 0; font-size: 15px; }
.studio-shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid #343b4a; color: #c7cedb; font-size: 11px; }
.studio-sheet-grip { display: none; }

/* Tablet: compact center with slide-over panels */
@media (min-width: 700px) and (max-width: 1099px) {
  :root { --studio-topbar-h: 50px; --studio-timeline-h: 178px; --studio-left-width: 284px; --studio-right-width: 300px; }
  #studio-workspace { grid-template-columns: 42px minmax(0,1fr); }
  #studio-left-panel, #studio-inspector {
    position: absolute; top: 0; bottom: 0; z-index: 30; width: var(--studio-left-width); max-width: calc(100vw - 74px);
    box-shadow: var(--studio-shadow); transition: transform .2s ease;
  }
  #studio-left-panel { left: 42px; transform: translateX(calc(-100% - 12px)); }
  #studio-inspector { right: 0; width: var(--studio-right-width); transform: translateX(calc(100% + 12px)); }
  #studio-root.drawer-left-open #studio-left-panel { transform: translateX(0); }
  #studio-root.drawer-inspector-open #studio-inspector { transform: translateX(0); }
  .studio-tablet-panel-toggle { display: inline-flex !important; }
  #studio-timeline-dock { grid-template-columns: 95px minmax(0,1fr); }
  .studio-track-headers { padding-left: 7px; }
  .studio-panel-tabs { gap: 1px; }
  .studio-panel-tab { padding: 0 6px; font-size: 10px; }
}

/* Mobile portrait: canvas, compact timeline and contextual bottom sheets */
@media (max-width: 699px) {
  :root { --studio-topbar-h: 50px; --studio-timeline-h: 140px; --studio-mobile-toolbar-h: 66px; }
  #studio-root {
    grid-template-rows: var(--studio-topbar-h) minmax(0,1fr) var(--studio-timeline-h) var(--studio-mobile-toolbar-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #top { gap: 6px; padding: 0 8px !important; }
  .studio-top-brand { gap: 0; }
  .studio-brand-mark, .studio-brand-sub, .studio-top-menus { display: none !important; }
  .studio-project-name { padding: 0; margin: 0; border: 0; }
  .studio-project-name .studio-project-label { max-width: 116px; font-size: 12px; }
  .studio-project-name b { font-size: 9px !important; }
  .studio-top-mobile-menu { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 8px; background: transparent; color: #d0d6e4; }
  .studio-top-mobile-menu svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .studio-top-actions { gap: 2px; }
  .studio-top-icon, #top #undo, #top #redo { width: 30px !important; min-width: 30px; height: 32px !important; }
  #top #ex { min-height: 32px !important; padding: 0 11px !important; }
  #studio-workspace { display: block; min-height: 0; }
  #studio-toolrail, #studio-left-panel, #studio-inspector { display: none !important; }
  #studio-center { height: 100%; grid-template-rows: minmax(0,1fr) 38px; }
  #pv { padding: 5px !important; }
  #stage { border-radius: 8px !important; }
  #addfab { right: 9px !important; bottom: 8px !important; min-height: 35px; padding: 0 12px !important; }
  #bar { height: 38px !important; padding: 0 8px; gap: 5px !important; }
  #bar #tm { left: 8px !important; font-size: 9px; }
  #bar button { width: 29px; height: 28px; }
  #bar #pp { width: 34px !important; height: 28px !important; }
  #studio-timeline-dock { grid-template-columns: 0 minmax(0,1fr); grid-template-rows: 24px minmax(0,1fr); }
  .studio-timeline-toolbar { padding: 0 8px; }
  .studio-timeline-title { font-size: 9px; }
  .studio-timeline-toolbar .studio-timeline-zoom { display: none; }
  .studio-track-headers { display: none; }
  #tlw { height: 100% !important; }
  #tl { overflow-x: auto; }
  #tr { min-height: 100%; }
  #tl .clip { min-height: 26px; }
  #tb {
    display: flex !important; width: 100%; height: var(--studio-mobile-toolbar-h) !important; min-height: var(--studio-mobile-toolbar-h);
    gap: 1px !important; padding: 4px 5px calc(4px + env(safe-area-inset-bottom,0px)) !important;
    overflow-x: auto; overflow-y: hidden; border-top: 1px solid var(--studio-border); background: #181c26;
    scrollbar-width: none;
  }
  #tb::-webkit-scrollbar { display: none; }
  #tb button { width: 60px; min-width: 60px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 8px; font-size: 9px; }
  #tb button svg { width: 19px; height: 19px; }
  #tb button.sc { background: #30345b; color: #d2d2ff; }
  #tb .sep { height: 33px; margin: auto 4px; }
  #pop, #addsheet, #new-sheet {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    z-index: 120000 !important; width: 100% !important; max-width: none !important;
    max-height: 82dvh !important; overflow: auto !important; padding: 10px 14px calc(15px + env(safe-area-inset-bottom,0px)) !important;
    border: 1px solid #41495d !important; border-bottom: 0 !important; border-radius: 18px 18px 0 0 !important;
    background: #1b202b !important; box-shadow: 0 -14px 46px rgba(0,0,0,.55) !important;
  }
  #pop[hidden], #addsheet[hidden], #new-sheet[hidden] { display: none !important; }
  #pop.studio-sheet-peek { height: 148px !important; max-height: 148px !important; }
  #pop.studio-sheet-half { height: 50dvh !important; max-height: 72dvh !important; }
  #pop.studio-sheet-full { height: 82dvh !important; max-height: 82dvh !important; }
  #addsheet.studio-sheet-peek { height: 148px !important; max-height: 148px !important; }
  #addsheet.studio-sheet-half { height: 50dvh !important; max-height: 72dvh !important; }
  #addsheet.studio-sheet-full { height: 82dvh !important; max-height: 82dvh !important; }
  #new-sheet.studio-sheet-peek { height: 148px !important; max-height: 148px !important; }
  #new-sheet.studio-sheet-half { height: 58dvh !important; max-height: 72dvh !important; }
  #new-sheet.studio-sheet-full { height: 82dvh !important; max-height: 82dvh !important; }
  #pop .studio-sheet-grip, #addsheet .studio-sheet-grip, #new-sheet .studio-sheet-grip {
    display: block; width: 40px; height: 4px; flex: none; margin: 0 auto 10px; border-radius: 99px; background: #687286; touch-action: none;
  }
  #pop .rw { gap: 7px; }
  #pop h3 { font-size: 14px; }
  #pop #gr { grid-template-columns: repeat(4, minmax(0,1fr)); }
  #pop #pix-results { max-height: 26dvh; }
  #addsheet { color: #e9edf5; }
  #addsheet .tabs button, #addsheet .go { min-height: 42px; }
  #new-sheet { background: #1b202b !important; align-items: flex-start !important; }
  #new-sheet .new-card { width: 100% !important; max-height: none !important; overflow: visible !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  #new-sheet .new-card > .rw h3 { font-size: 14px; }
  #new-sheet textarea { min-height: 98px; }
  #new-sheet .new-actions { position: sticky; bottom: 0; padding-top: 8px; background: #1b202b; }
  #voice-audio-controls:not([hidden]) { position: fixed !important; left: 8px !important; right: 8px !important; bottom: calc(var(--studio-mobile-toolbar-h) + 8px + env(safe-area-inset-bottom,0px)) !important; z-index: 110000 !important; }
  #toast { bottom: calc(var(--studio-mobile-toolbar-h) + 14px + env(safe-area-inset-bottom,0px)) !important; }
  #studio-shortcuts-overlay { padding: 12px; }
}

/* Landscape phones: canvas and usable timeline share the width. */
@media (min-width: 700px) and (max-height: 500px) {
  :root { --studio-topbar-h: 42px; --studio-timeline-h: 0px; }
  #studio-root { grid-template-rows: var(--studio-topbar-h) minmax(0,1fr); }
  #studio-workspace { grid-template-columns: minmax(0,1.1fr) minmax(260px,.9fr); grid-template-rows: minmax(0,1fr); }
  #studio-toolrail, #studio-left-panel, #studio-inspector { display: none !important; }
  #studio-center { grid-column: 1; grid-row: 1; grid-template-rows: 25px minmax(0,1fr) 34px; }
  #studio-canvas-toolbar { padding: 0 6px; }
  .studio-view-label { font-size: 8px; }
  .studio-view-control { min-height: 21px; padding: 0 5px; font-size: 8px; }
  #pv { padding: 3px !important; }
  #bar { height: 34px !important; }
  #studio-timeline-dock { grid-column: 2; grid-row: 1; height: 100%; min-height: 0; grid-template-columns: 0 minmax(0,1fr); grid-template-rows: 26px minmax(0,1fr); border-top: 0; border-left: 1px solid var(--studio-border); }
  .studio-track-headers { display: none; }
  #tlw { height: 100% !important; }
  #tb { display: none !important; }
  #addfab { right: 7px !important; bottom: 6px !important; min-height: 30px; font-size: 10px !important; }
  #top { padding: 0 8px !important; }
  .studio-brand-mark { display: none; }
}

/* Existing full-screen preview keeps 9:16 ratio and ignores editor zoom. */
body.fsmode #studio-stage-wrap { transform: none !important; }
body.fsmode #stage {
  position: fixed !important; left: 50% !important; top: 50% !important;
  width: min(100vw, calc(100dvh * 9 / 16)) !important; height: auto !important;
  max-width: 100vw !important; max-height: 100dvh !important; aspect-ratio: 9 / 16 !important;
  transform: translate(-50%, -50%) !important; border-radius: 0 !important; z-index: 99998 !important;
  box-shadow: 0 0 0 100vmax #000 !important;
}
body.fsmode #fsx { top: max(12px, env(safe-area-inset-top,0px)) !important; right: max(12px, env(safe-area-inset-right,0px)) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Splitter hit areas and desktop collapse states. */
#studio-left-panel, #studio-inspector, #studio-timeline-dock { position: relative; }
.studio-splitter { position: absolute; z-index: 45; touch-action: none; opacity: 0; transition: opacity .15s ease; }
.studio-splitter:hover, .studio-resizing .studio-splitter { opacity: 1; background: #818cf8; }
.studio-splitter-left { top: 0; right: -3px; bottom: 0; width: 6px; cursor: col-resize; }
.studio-splitter-right { top: 0; left: -3px; bottom: 0; width: 6px; cursor: col-resize; }
.studio-splitter-timeline { top: -3px; left: 0; right: 0; height: 6px; cursor: row-resize; }
#studio-left-panel.is-collapsed { display: none; }
#studio-inspector.is-collapsed { display: none; }
@media (min-width: 1100px) {
  #studio-root:has(#studio-left-panel.is-collapsed) #studio-workspace { grid-template-columns: 44px 0 minmax(0,1fr) var(--studio-right-width); }
  #studio-root:has(#studio-inspector.is-collapsed) #studio-workspace { grid-template-columns: 44px var(--studio-left-width) minmax(0,1fr) 0; }
}
@media (max-width: 1099px) {
  .studio-splitter { display: none; }
}

/* Keep the five primary workspace tabs readable in the narrow panel header. */
#studio-left-panel .studio-panel-head-left { flex: 1; }
#studio-left-panel .studio-panel-head-left > .studio-panel-title { display: none; }
#studio-left-panel .studio-panel-tabs { flex: 1; justify-content: space-between; }
#studio-left-panel .studio-panel-tab { flex: 1 1 0; min-width: 0; padding: 0 3px; gap: 3px; font-size: 9px; }
#studio-left-panel .studio-panel-tab svg { width: 11px; height: 11px; }
#studio-left-panel .studio-panel-close { flex: none; }

@media (min-width: 700px) and (max-height: 500px) {
  #studio-root { grid-template-columns: minmax(0,1.1fr) minmax(260px,.9fr); grid-template-rows: var(--studio-topbar-h) minmax(0,1fr); }
  #top { grid-column: 1 / -1; grid-row: 1; }
  #studio-workspace { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0,1fr); }
  #studio-timeline-dock { grid-column: 2; grid-row: 2; }
}

@media (max-width: 699px) {
  #studio-left-panel .studio-panel-head-left > .studio-panel-title { display: flex; }
  #studio-left-panel .studio-panel-tabs { justify-content: flex-start; }
}

/* Explicit tablet drawer placement: side panes must not auto-flow into extra grid rows. */
@media (min-width: 700px) and (max-width: 1099px) {
  #studio-workspace {
    grid-template-columns: 42px minmax(0,1fr) !important;
    grid-template-rows: minmax(0,1fr) !important;
  }
  #studio-toolrail { grid-column: 1; grid-row: 1; }
  #studio-center { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; }
  #studio-left-panel, #studio-inspector {
    position: absolute !important; top: 0; bottom: 0; height: auto !important;
    z-index: 35; box-shadow: var(--studio-shadow);
  }
  #studio-left-panel { left: 42px; width: var(--studio-left-width); transform: translateX(calc(-100% - 12px)); }
  #studio-inspector { right: 0; width: var(--studio-right-width); transform: translateX(calc(100% + 12px)); }
  #studio-root.drawer-left-open #studio-left-panel { transform: translateX(0); }
  #studio-root.drawer-inspector-open #studio-inspector { transform: translateX(0); }
}

/* The preview toolbar, preview stage and transport are three distinct rows. */
@media (max-width: 699px) {
  #studio-center {
    grid-template-rows: 34px minmax(0,1fr) 38px !important;
  }
  #pv { min-height: 0; min-width: 0; }
  #studio-stage-wrap { min-width: 0; min-height: 0; }
}

@media (max-width: 699px) {
  #studio-canvas-toolbar { justify-content: flex-end; gap: 5px; padding: 0 7px; }
  #studio-canvas-toolbar .studio-view-label { display: none; }
  #studio-canvas-toolbar .studio-view-control[data-view="100"],
  #studio-canvas-toolbar .studio-view-control[title="Coming in Phase 4"] { display: none !important; }
  #studio-zoom-readout { min-width: 35px; }
}

@media (max-width: 699px) {
  #studio-timeline-dock { grid-template-columns: minmax(0,1fr) !important; }
  #tlw { grid-column: 1; min-width: 0; width: 100%; }
}
@media (min-width: 700px) and (max-height: 500px) {
  #studio-timeline-dock { grid-template-columns: minmax(0,1fr) !important; }
  #tlw { grid-column: 1; min-width: 0; width: 100%; }
}

/* Fullscreen uses the stage's measured aspect ratio instead of assuming portrait. */
body.fsmode #stage {
  width: min(100vw, calc(100dvh * var(--studio-fullscreen-ratio, .5625))) !important;
  height: auto !important;
  aspect-ratio: var(--studio-fullscreen-ratio, 9 / 16) !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
}

@media (min-width: 700px) and (max-height: 500px) {
  #pop, #addsheet, #new-sheet {
    position: fixed !important; left: auto !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: min(410px, 60vw) !important; max-height: 80dvh !important; overflow: auto !important;
    z-index: 120000 !important; padding: 12px 14px calc(14px + env(safe-area-inset-bottom,0px)) !important;
    border: 1px solid #41495d !important; border-right: 0 !important; border-radius: 16px 0 0 16px !important;
    background: #1b202b !important; box-shadow: 0 -12px 36px rgba(0,0,0,.5) !important;
  }
  #pop.studio-sheet-peek, #addsheet.studio-sheet-peek, #new-sheet.studio-sheet-peek { height: 148px !important; }
  #pop.studio-sheet-half, #addsheet.studio-sheet-half, #new-sheet.studio-sheet-half { height: 55dvh !important; }
  #pop.studio-sheet-full, #addsheet.studio-sheet-full, #new-sheet.studio-sheet-full { height: 80dvh !important; }
}

@media (max-width: 699px) {
  #tb > button:not(.studio-mobile-action):not([data-t="replace"]):not([data-t="icon"]):not([data-t="text"]):not([data-t="motion"]):not([data-t="pshape"]):not([data-t="pborder"]) {
    display: none !important;
  }
  #tb > .studio-mobile-action {
    width: 60px; min-width: 60px; min-height: 52px; padding: 4px 2px; gap: 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1px solid transparent; background: transparent; color: #aeb8cb; font-size: 9px;
  }
  #tb > .studio-mobile-action svg { width: 19px; height: 19px; }
  #tb > .studio-mobile-action:disabled { color: #798294; opacity: .38; }
}

/* v30 review fixes: mobile timeline rows were clipped; brand name hid project title */
@media (max-width: 699px) {
  :root { --studio-timeline-h: 172px; }
  .studio-brand-name { display: none; }
  .studio-project-name .studio-project-label { max-width: 190px; }
}