:root,
[data-theme="light"] {
  --in-oklab: ;
  --in-oklch: ;
  /* LIGHT THEME: Dreamy Periwinkle, Soft Lavender, Ice-Blue & Frosted Pearl Palette */
  --bg-backdrop:
    radial-gradient(circle at 18% 12%, rgba(154, 165, 255, 0.92), transparent 46%),
    radial-gradient(circle at 82% 16%, rgba(192, 172, 255, 0.88), transparent 45%),
    radial-gradient(circle at 50% 48%, rgba(189, 224, 254, 0.75), transparent 54%),
    radial-gradient(circle at 22% 86%, rgba(176, 186, 255, 0.85), transparent 50%),
    radial-gradient(circle at 84% 88%, rgba(210, 194, 255, 0.85), transparent 48%),
    linear-gradient(180deg var(--in-oklab), #a2acff 0%, #bcb9ff 28%, #dfe7ff 56%, #f4f6ff 76%, #c3c1ff 100%);
  --header-bg: rgba(255, 255, 255, 0.44);
  --sidebar-bg: rgba(255, 255, 255, 0.44);
  --dock-bg: rgba(255, 255, 255, 0.5);
  --card-bg: rgba(255, 255, 255, 0.58);
  --card-hover-bg: rgba(255, 255, 255, 0.8);
  --card-active-bg: rgba(255, 255, 255, 0.92);
  --input-bg: rgba(255, 255, 255, 0.9);
  --input-border: rgba(139, 92, 246, 0.28);
  --glass-border: rgba(255, 255, 255, 0.9);
  --card-shadow: 0 8px 20px rgba(120, 128, 214, 0.14);
  --surface-shadow: 0 16px 38px rgba(102, 110, 206, 0.18);
  --canvas-frame-bg: rgba(255, 255, 255, 0.58);
  --canvas-frame-border: rgba(255, 255, 255, 0.95);
  --canvas-frame-shadow: 0 24px 54px rgba(98, 106, 204, 0.28), inset 0 1px 3px #ffffff;
  --iridescent-orb: linear-gradient(135deg var(--in-oklab), #72efdd 0%, #818cf8 45%, #c084fc 75%, #f472b6 100%);
  --accent-primary: #4338ca;
  --accent-highlight: #359df2;
  --accent-gold: #d4af37;
  --text-main: #232645;
  --text-muted: #575d82;
  --dialog-bg: rgba(245, 247, 255, 0.92);
  --prompter-bg: rgba(255, 255, 255, 0.8);
}

/* DARK THEME: Neumorphic Matte Charcoal #212121 + #359DF2 -> #E17CFF -> #BEC0FF Neon Gradient Ring */
[data-theme="dark"] {
  --bg-backdrop:
    radial-gradient(circle at 20% 22%, rgba(53, 157, 242, 0.16), transparent 45%),
    radial-gradient(circle at 78% 26%, rgba(225, 124, 255, 0.13), transparent 46%),
    radial-gradient(circle at 50% 85%, rgba(44, 144, 240, 0.1), transparent 52%),
    linear-gradient(165deg, #191a20 0%, #212121 48%, #16171c 100%);
  --header-bg: rgba(33, 33, 33, 0.88);
  --sidebar-bg: rgba(29, 30, 36, 0.92);
  --dock-bg: rgba(33, 33, 33, 0.92);
  --card-bg: #212121;
  --card-hover-bg: #282930;
  --card-active-bg: #1b1c22;
  --input-bg: #16171c;
  --input-border: rgba(53, 157, 242, 0.38);
  --glass-border: rgba(167, 167, 167, 0.22);
  /* Exact Neumorphic Layer 1-5 Shadow Recipe from Dark Reference Image */
  --card-shadow:
    inset 1px 1px 1px rgba(167, 167, 167, 0.26),
    inset 0 2px 3px rgba(44, 144, 240, 0.12),
    0 13px 18px rgba(0, 0, 0, 0.78),
    0 -4px 11px rgba(194, 194, 194, 0.04);
  --surface-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    0 16px 36px rgba(0, 0, 0, 0.82);
  --canvas-frame-bg: #212121;
  --canvas-frame-border: rgba(190, 192, 255, 0.42);
  --canvas-frame-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.18),
    0 18px 42px rgba(0, 0, 0, 0.88),
    0 0 18px rgba(108, 233, 253, 0.2);
  /* Exact Gradient Stroke from Reference Image: #359DF2 -> #E17CFF -> #BEC0FF */
  --iridescent-orb: linear-gradient(135deg, #359df2 0%, #e17cff 52%, #bec0ff 100%);
  --accent-primary: #6ce9fd;
  --accent-highlight: #359df2;
  --accent-gold: #d4af37;
  --text-main: #f3f4f6;
  --text-muted: #a7a7a7;
  --dialog-bg: #212121;
  --prompter-bg: rgba(26, 27, 33, 0.9);
}

@supports (background: linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-backdrop);
  color: var(--text-main);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background 0.25s ease, color 0.25s ease;
}

/* Active offscreen webcam decoder: NEVER use display:none or Chrome pauses frame decoding */
.webcam-source-video {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 2px;
  height: 2px;
  opacity: 0.001;
  pointer-events: none;
  z-index: -1;
}

/* HEADER */
.studio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 11px 22px;
  background: var(--header-bg);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border-bottom: 1.5px solid var(--glass-border);
  box-shadow: var(--surface-shadow);
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon-img {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
  border: 2px solid #ffffff;
}

.brand-group h1 {
  font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 21px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.4px;
  color: var(--text-main);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

.studio-badge {
  font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-size: 10.5px;
  background: var(--iridescent-orb);
  color: #ffffff;
  border: 1.5px solid #ffffff;
  padding: 2px 10px;
  border-radius: 999px;
  vertical-align: middle;
  font-weight: 700;
  letter-spacing: 0.1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
  box-shadow: 0 4px 12px rgba(53, 157, 242, 0.35);
}

.subtitle {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.rec-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ff4d6d, #e11d48);
  color: #fff;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1.5px solid #ffffff;
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.38);
  animation: pulseRec 1.4s infinite;
}

.rec-dot {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
}

@keyframes pulseRec {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.control-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cluster-label {
  font-size: 12px;
  color: var(--text-main);
  font-weight: 700;
}

.pill-btn {
  background: var(--card-bg);
  color: var(--text-main);
  border: 1.5px solid var(--glass-border);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: all 0.16s ease;
}

.pill-btn.active {
  background: var(--iridescent-orb);
  color: #ffffff;
  border-color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow:
    0 0 0 3px rgba(108, 233, 253, 0.32),
    0 6px 16px rgba(53, 157, 242, 0.4);
}

.lock-tag {
  font-size: 9px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #1e1b4b;
  padding: 1px 5px;
  border-radius: 999px;
  margin-left: 3px;
  font-weight: 900;
}

.segmented {
  display: inline-flex;
  background: var(--card-bg);
  border-radius: 999px;
  padding: 3px;
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--card-shadow);
}

.full-seg {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.seg-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.seg-btn.active {
  background: var(--iridescent-orb);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 3px 10px rgba(53, 157, 242, 0.32);
}

/* THEME TOGGLE BUTTON (LIGHT <-> NEUMORPHIC DARK) */
.theme-toggle-btn {
  background: var(--card-bg);
  color: var(--text-main);
  border: 1.5px solid var(--glass-border);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--card-shadow);
  transition: all 0.18s ease;
}

[data-theme="dark"] .theme-toggle-btn {
  border-color: #359df2;
  color: #6ce9fd;
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    0 0 12px rgba(108, 233, 253, 0.32),
    0 10px 16px rgba(0, 0, 0, 0.75);
}

.pro-toggle-btn {
  background: var(--card-bg);
  color: var(--text-main);
  border: 1.5px solid var(--glass-border);
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--card-shadow);
}

.pro-toggle-btn.is-pro {
  background: linear-gradient(135deg var(--in-oklab), #fff3b0, #d4af37, #aa771c);
  color: #08080c;
  border-color: #ffffff;
}

/* MAIN WORKSPACE */
.studio-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 400px;
  min-height: 0;
}

.stage-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  min-height: 0;
  gap: 12px;
}

.canvas-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: calc(100vh - 195px);
  border-radius: 30px;
  overflow: hidden;
  padding: 7px;
  background: var(--canvas-frame-bg);
  border: 2.5px solid var(--canvas-frame-border);
  box-shadow: var(--canvas-frame-shadow);
}

.canvas-wrapper.aspect-16-9 {
  aspect-ratio: 16 / 9;
  width: min(100%, calc((100vh - 195px) * (16 / 9)));
}

.canvas-wrapper.aspect-9-16 {
  aspect-ratio: 9 / 16;
  height: calc(100vh - 195px);
}

#studioCanvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 23px;
  background: #1e2028;
}

/* FLOATING DRAGGABLE TELEPROMPTER (Excluded from canvas recording) */
.teleprompter-overlay {
  position: fixed;
  top: 76px;
  left: 16px;
  width: min(94vw, 660px);
  height: 255px;
  min-width: 270px;
  min-height: 140px;
  max-width: 96vw;
  max-height: 80dvh;
  background: var(--prompter-bg);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 2px solid var(--glass-border);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  z-index: 45;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1.5px rgba(53, 157, 242, 0.35);
  color: var(--text-main);
  resize: both;
  overflow: hidden;
}

.teleprompter-overlay.compact-prompter {
  height: 155px !important;
}

.prompter-drag-handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.prompter-drag-handle.dragging {
  cursor: grabbing;
  border-color: #359df2;
  box-shadow: 0 0 12px rgba(53, 157, 242, 0.45);
}

.drag-grip-pill {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-primary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.prompter-window-controls {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.prompter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--glass-border);
}

.prompter-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hidden-rec-pill {
  font-size: 9.5px;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid #10b981;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.quota-pill {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--accent-primary);
  background: rgba(53, 157, 242, 0.16);
  border: 1px solid rgba(53, 157, 242, 0.45);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.prompter-filters {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

.filter-chip {
  background: var(--card-bg);
  color: var(--text-main);
  border: 1px solid var(--glass-border);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.filter-chip.active {
  background: var(--iridescent-orb);
  color: #ffffff;
  border-color: #ffffff;
}

.prompter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.next-speaker-btn {
  background: var(--iridescent-orb);
  color: #ffffff;
  border: 1.5px solid #ffffff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(53, 157, 242, 0.35);
}

.icon-btn {
  background: var(--card-bg);
  color: var(--text-main);
  border: 1px solid var(--glass-border);
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.prompter-scroll-box {
  flex: 1;
  overflow-y: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}

.prompter-line {
  font-size: 18px;
  line-height: 1.42;
  font-weight: 600;
  color: var(--text-main);
  padding: 9px 14px;
  border-radius: 16px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.prompter-line.active-cue {
  background: var(--card-active-bg);
  border-color: #359df2;
  box-shadow: 0 0 14px rgba(108, 233, 253, 0.28);
  font-weight: 800;
}

.prompter-line.past-cue {
  opacity: 0.45;
}

.speaker-cue-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* SAVED RECORDINGS TRAY */
.recordings-tray {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--card-shadow);
}

.tray-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-primary);
  white-space: nowrap;
}

.recordings-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.clip-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--input-bg);
  border: 1px solid var(--glass-border);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-main);
}

.clip-pill a,
.clip-pill button {
  background: var(--iridescent-orb);
  color: #ffffff;
  border: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

/* SIDEBAR — FROSTED BENTO (LIGHT) / NEUMORPHIC SHADOW KIT (DARK) */
.studio-sidebar {
  background: var(--sidebar-bg);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border-left: 1.5px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: var(--surface-shadow);
}

.sidebar-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 8px 12px 0;
  gap: 6px;
  border-bottom: 1px solid var(--glass-border);
}

.tab-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 6px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.tab-btn.active {
  color: var(--accent-primary);
  border-bottom-color: #359df2;
}

.tab-panel {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.panel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.tab-panel h2 {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-main);
}

[data-theme="dark"] .tab-panel h2 {
  color: #6ce9fd;
  letter-spacing: 0.3px;
}

.section-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.38;
}

.template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.template-card {
  background: var(--card-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: 20px;
  padding: 13px;
  cursor: pointer;
  text-align: left;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--card-shadow);
  transition: all 0.16s ease;
}

.template-card:hover {
  transform: translateY(-2px);
  background: var(--card-hover-bg);
}

.template-card.gold-luxury-card {
  background: linear-gradient(135deg, #0d0d12, #231b09);
  border-color: var(--accent-gold);
  color: #fff8dc;
}

.template-card.gold-luxury-card .template-desc {
  color: #e6c665;
}

.template-card.active {
  border-color: #359df2;
  background: var(--card-active-bg);
  box-shadow:
    0 0 0 2.5px rgba(225, 124, 255, 0.45),
    0 0 14px rgba(108, 233, 253, 0.35);
}

.template-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  gap: 4px;
}

.badge-free {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid #34d399;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
}

.badge-pro {
  background: linear-gradient(135deg, #fff3b0, #d4af37);
  color: #1e1b4b;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
}

.template-desc {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

.divider {
  border: none;
  border-top: 1px solid var(--glass-border);
  margin: 16px 0;
}

.speaker-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.speaker-edit-card {
  background: var(--card-bg);
  border: 1.5px solid var(--glass-border);
  padding: 12px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--card-shadow);
}

.speaker-edit-header {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--accent-primary);
}

.speaker-edit-card input[type="text"] {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-main);
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

/* BEAUTY & LIGHTING */
.beauty-feature-card {
  width: 100%;
  background: var(--card-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: 22px;
  padding: 14px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 8px 0 14px;
  text-align: left;
  box-shadow: var(--card-shadow);
  transition: all 0.16s ease;
}

.beauty-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.beauty-feature-card.active {
  background: var(--iridescent-orb);
  color: #ffffff;
  border-color: #ffffff;
}

.beauty-feature-card.active .beauty-copy span {
  color: rgba(255, 255, 255, 0.92);
}

.beauty-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 12.5px;
}

.beauty-copy span {
  font-size: 11px;
  color: var(--text-muted);
}

.status-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.9);
  color: #1e1b4b;
}

.sliders-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
  background: var(--card-bg);
  padding: 14px;
  border-radius: 22px;
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--card-shadow);
}

.slider-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}

.slider-row span {
  display: flex;
  justify-content: space-between;
}

.slider-row input[type="range"] {
  accent-color: #359df2;
  cursor: pointer;
}

/* CUTOUT ENGINE, CHROMA KEY & CUSTOM UPLOAD */
.cutout-mode-box {
  background: var(--card-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: 20px;
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--card-shadow);
}

.cutout-mode-label {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--accent-primary);
}

.chroma-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--glass-border);
}

.chroma-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chroma-picker-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
}

.chroma-picker-label input[type="color"] {
  width: 34px;
  height: 28px;
  border: 1.5px solid #ffffff;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
}

.sample-wall-btn {
  background: var(--iridescent-orb);
  color: #ffffff;
  border: 1.5px solid #ffffff;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.compact-slider {
  font-size: 11px;
}

.custom-upload-box {
  margin-bottom: 10px;
}

.upload-bg-btn {
  width: 100%;
  padding: 12px 14px;
  border-radius: 18px;
  border: 2px dashed #359df2;
  background: var(--card-bg);
  color: var(--text-main);
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--card-shadow);
  transition: all 0.16s ease;
}

.upload-bg-btn:hover {
  border-style: solid;
  border-color: #e17cff;
  transform: translateY(-1px);
}

/* BACKGROUNDS */
.bg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.bg-option-btn {
  padding: 12px 14px;
  border-radius: 18px;
  border: 2px solid var(--glass-border);
  color: #fff;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-size: cover;
  background-position: center;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.72);
  box-shadow: var(--card-shadow);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.bg-option-btn:hover {
  transform: translateY(-1px);
}

.bg-option-btn.active {
  border-color: #359df2;
  box-shadow:
    0 0 0 3px rgba(225, 124, 255, 0.45),
    0 0 15px rgba(108, 233, 253, 0.45);
}

/* FOOTER DOCK — FROSTED PEARL (LIGHT) / NEUMORPHIC DARK WITH #359DF2 -> #E17CFF -> #BEC0FF RING */
.studio-dock {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 22px;
  background: var(--dock-bg);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border-top: 1.5px solid var(--glass-border);
  box-shadow: var(--surface-shadow);
}

.dock-btn {
  background: var(--card-bg);
  color: var(--text-main);
  border: 1.5px solid var(--glass-border);
  padding: 8px 15px 8px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--card-shadow);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.dock-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--input-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.22);
}

.dock-btn:hover {
  transform: translateY(-1px);
  background: var(--card-hover-bg);
}

.active-dock-pill {
  border-color: #359df2;
  box-shadow:
    0 0 0 2px rgba(225, 124, 255, 0.35),
    var(--card-shadow);
}

.next-turn-dock-btn {
  background: var(--iridescent-orb);
  color: #ffffff;
  border-color: #ffffff;
  padding: 9px 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow:
    0 0 0 3px rgba(108, 233, 253, 0.32),
    0 8px 22px rgba(53, 157, 242, 0.35);
}

.camera-control-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.camera-select {
  background: var(--card-bg);
  color: var(--text-main);
  border: 1.5px solid var(--glass-border);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  max-width: 175px;
}

.mic-meter-pill {
  width: 34px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.25);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
}

.mic-level-bar {
  height: 100%;
  width: 12%;
  border-radius: 999px;
  background: linear-gradient(90deg, #10b981 0%, #359df2 60%, #e17cff 100%);
  transition: width 0.08s linear;
}

.muted-mic-pill {
  border-color: rgba(244, 63, 94, 0.55);
  opacity: 0.85;
}

.muted-mic-pill .mic-level-bar {
  width: 0% !important;
}

/* Signature Neumorphic / Iridescent Record CTA Button */
.record-cta-btn {
  background: var(--iridescent-orb);
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 8px 22px 8px 10px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
  box-shadow:
    0 0 0 4px rgba(190, 192, 255, 0.38),
    0 0 16px rgba(108, 233, 253, 0.5),
    0 12px 26px rgba(0, 0, 0, 0.45);
}

/* In Dark Mode, style the Record Button like the Neumorphic #212121 Circle with #359DF2 -> #E17CFF -> #BEC0FF Neon Ring! */
[data-theme="dark"] .record-cta-btn {
  background:
    linear-gradient(#212121, #212121) padding-box,
    linear-gradient(135deg, #359df2 0%, #e17cff 52%, #bec0ff 100%) border-box;
  border: 3px solid transparent;
  color: #6ce9fd;
  box-shadow:
    inset 1px 1px 2px rgba(167, 167, 167, 0.35),
    0 0 14px rgba(108, 233, 253, 0.55),
    0 13px 22px rgba(0, 0, 0, 0.88);
}

.record-orb-inner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, #ff4d6d 55%, #be123c 100%);
  border: 2px solid #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(244, 63, 94, 0.45);
}

.record-circle {
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
}

.free-mini {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid #34d399;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
}

/* DIALOGS (<dialog closedby="any">) */
dialog.studio-dialog {
  margin: auto;
  background: var(--dialog-bg);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  color: var(--text-main);
  border: 2px solid var(--glass-border);
  border-radius: 26px;
  padding: 0;
  width: min(92vw, 480px);
  box-shadow: var(--surface-shadow);
}

dialog.wide-dialog {
  width: min(92vw, 640px);
}

dialog.studio-dialog::backdrop {
  background-color: rgba(15, 17, 26, 0.52);
  backdrop-filter: blur(6px);
}

.dialog-inner {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-header h2 {
  font-size: 18px;
  color: var(--text-main);
}

.close-x {
  background: var(--card-bg);
  color: var(--text-muted);
  border: 1px solid var(--glass-border);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
}

.dialog-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

.field-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
}

.field-label input,
.ai-box input,
#rawScriptTextarea {
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  color: var(--text-main);
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
}

.ai-box {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
}

.dialog-footer,
.slider-inline-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.primary-btn {
  background: var(--iridescent-orb);
  color: #ffffff;
  border: 1.5px solid #ffffff;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(53, 157, 242, 0.28);
}

.secondary-btn {
  background: var(--card-bg);
  color: var(--text-main);
  border: 1.5px solid var(--glass-border);
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}

.full-width {
  width: 100%;
}

.pro-cta-btn {
  background: linear-gradient(135deg, #fff3b0, #d4af37, #aa771c);
  color: #08080c;
  border: 1.5px solid #ffffff;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.pro-feature-list {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--text-main);
}

.invite-link-box {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid #10b981;
  color: #10b981;
  padding: 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  word-break: break-all;
}

/* SETTINGS HEADER BUTTON & SETTINGS DIALOG (PROFILE, LANGUAGES, BUG REPORT, PRIVACY & TERMS) */
.settings-header-btn {
  background: var(--card-bg);
  color: var(--text-main);
  border: 1.5px solid var(--glass-border);
  padding: 6px 13px 6px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--card-shadow);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.settings-header-btn:hover {
  transform: translateY(-1px);
  border-color: #359df2;
}

.settings-avatar-mini {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--iridescent-orb);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.settings-nav-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: var(--input-bg);
  padding: 5px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
}

.settings-tab-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 8px 6px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-tab-btn.active {
  background: var(--iridescent-orb);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(53, 157, 242, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-panel[hidden] {
  display: none !important;
}

.profile-summary-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: var(--card-shadow);
}

.profile-avatar-large {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--iridescent-orb);
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 6px 16px rgba(53, 157, 242, 0.35);
  flex-shrink: 0;
}

.profile-summary-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.profile-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-name-row strong {
  font-size: 16px;
  color: var(--text-main);
}

.verified-pill {
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  border: 1px solid #34d399;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}

.profile-contact-text {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-primary);
}

.profile-plan-text {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.two-col-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.settings-select,
#bugDescriptionInput {
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  color: var(--text-main);
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-family: inherit;
}

/* LANGUAGE SELECTOR GRID */
.language-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.lang-option-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: 18px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  color: var(--text-main);
  box-shadow: var(--card-shadow);
  transition: all 0.15s ease;
}

.lang-option-card:hover {
  transform: translateY(-1px);
  border-color: #359df2;
}

.lang-option-card.active {
  background: var(--card-active-bg);
  border-color: #359df2;
  box-shadow: 0 0 0 2px rgba(225, 124, 255, 0.35), var(--card-shadow);
}

.lang-flag {
  font-size: 24px;
}

.lang-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lang-copy strong {
  font-size: 13.5px;
}

.lang-copy span {
  font-size: 11px;
  color: var(--text-muted);
}

.lang-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--iridescent-orb);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.15s ease;
}

.lang-option-card.active .lang-check {
  opacity: 1;
  transform: scale(1);
}

/* PRIVACY & TERMS SCROLL CARDS */
.legal-scroll-container {
  max-height: 290px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}

.legal-card {
  background: var(--card-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-card h3 {
  font-size: 13.5px;
  color: var(--accent-primary);
}

.legal-card ul {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-main);
}

.legal-version-tag {
  margin-right: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

/* LIVE WEBRTC CALL STATUS BADGE, INSTALL APP BUTTON, RECORD FORMAT SELECTOR & $5/MO ($50/YR) PRICING CARDS */
.live-call-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.16);
  color: #10b981;
  border: 1.5px solid rgba(52, 211, 153, 0.65);
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.live-call-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.install-app-btn {
  padding: 6px 12px;
  border-color: rgba(53, 157, 242, 0.55);
}

.record-control-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.format-select {
  padding: 9px 11px;
  font-weight: 800;
  font-size: 11.5px;
  cursor: pointer;
}

.pro-pricing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pricing-plan-card {
  position: relative;
  background: var(--card-bg);
  border: 2px solid var(--glass-border);
  border-radius: 18px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  color: var(--text-main);
  text-align: left;
  box-shadow: var(--card-shadow);
  transition: all 0.15s ease;
}

.pricing-plan-card strong {
  font-size: 18px;
  font-weight: 800;
}

.pricing-plan-card span {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.pricing-plan-card.active {
  background: var(--card-active-bg);
  border-color: #d4af37;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35), var(--card-shadow);
}

.save-badge {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  padding: 2px 7px;
  border-radius: 999px;
}

/* LIVE CALL QUICK-JOIN BANNER & INVITE SHARE ACTIONS */
.live-call-action-banner {
  width: 100%;
  max-width: 960px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 18px;
  background: var(--card-active-bg);
  border: 2px solid #359df2;
  box-shadow: 0 8px 24px rgba(53, 157, 242, 0.28);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
}

.compact-cta-btn {
  padding: 7px 14px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.invite-share-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.join-code-pill {
  display: inline-flex;
  align-items: center;
  background: var(--card-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: 999px;
  padding: 2px 3px 2px 10px;
  gap: 5px;
  box-shadow: var(--card-shadow);
}

.join-code-pill input {
  width: 82px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-family: 'Montserrat', monospace, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.join-code-pill input::placeholder {
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.join-code-go-btn {
  background: var(--iridescent-orb);
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.live-call-badge {
  cursor: pointer;
}

.short-code-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card-active-bg);
  border: 2px solid #359df2;
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 6px 18px rgba(53, 157, 242, 0.25);
}

.short-code-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.short-code-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.short-code-digits {
  font-family: 'Montserrat', monospace, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--accent-primary);
}


/* ==========================================================================
   ANDROID, iPHONE & TABLET RESPONSIVE STUDIO LAYOUT (@media max-width: 980px)
   Fixes squeezed canvas stage on portrait mobile screens by stacking the
   full-width video stage on top, sticky quick controls, and tabbed drawer below.
   ========================================================================== */
@media (max-width: 980px) {
  body {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .studio-header {
    padding: 10px 12px;
    gap: 8px;
  }

  .brand-group {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .brand-icon-img {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .brand-group h1 {
    font-size: 17px;
  }

  .subtitle {
    font-size: 10.5px;
  }

  .control-cluster {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }

  .pill-btn,
  .seg-btn,
  .theme-toggle-btn,
  .pro-toggle-btn,
  .settings-header-btn {
    padding: 5px 10px;
    font-size: 11px;
  }

  .studio-main {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 100%;
  }

  .stage-container {
    width: 100%;
    padding: 10px 10px 6px;
    order: 1;
  }

  .canvas-wrapper {
    max-width: 100%;
    max-height: none;
    border-radius: 20px;
    padding: 4px;
  }

  .canvas-wrapper.aspect-16-9 {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .canvas-wrapper.aspect-9-16 {
    width: min(88vw, 350px);
    height: auto;
    aspect-ratio: 9 / 16;
  }

  #studioCanvas {
    border-radius: 16px;
  }

  /* Draggable Teleprompter on Mobile: compact default size & touch-friendly */
  .teleprompter-overlay {
    width: calc(100vw - 20px);
    left: 10px;
    top: 68px;
    height: 195px;
    padding: 8px 10px;
    border-radius: 18px;
    resize: vertical;
  }

  .prompter-line {
    font-size: 14.5px;
    padding: 7px 10px;
  }

  .next-speaker-btn {
    padding: 5px 10px;
    font-size: 11px;
  }

  .studio-sidebar {
    width: 100%;
    border-left: none;
    border-top: 1.5px solid var(--glass-border);
    order: 2;
    min-height: auto;
  }

  .tab-panel {
    max-height: none;
    overflow-y: visible;
    padding: 14px 12px 22px;
  }

  .studio-dock {
    position: sticky;
    bottom: 0;
    z-index: 35;
    padding: 8px 10px;
    gap: 6px;
  }

  .dock-btn {
    padding: 6px 11px 6px 8px;
    font-size: 11px;
    gap: 5px;
  }

  .dock-icon-circle {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .record-cta-btn {
    padding: 6px 14px 6px 8px;
    font-size: 12px;
  }

  .record-orb-inner {
    width: 26px;
    height: 26px;
  }

  .camera-select {
    padding: 6px 9px;
    font-size: 11px;
    max-width: 135px;
  }

  .two-col-fields,
  .ai-box,
  .language-grid,
  .pro-pricing-cards,
  .invite-share-actions {
    grid-template-columns: 1fr;
  }

  .settings-nav-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==== v19 UPDATES ==== */
/* Premium greyish gradient (dark theme + pre-theme splash) */
html, body { background-color: #1e2029; }
[data-theme="dark"] {
  --bg-backdrop:
    radial-gradient(circle at 20% 15%, rgba(120, 128, 160, 0.14), transparent 50%),
    radial-gradient(circle at 85% 90%, rgba(70, 76, 98, 0.18), transparent 55%),
    linear-gradient(160deg, #292c37 0%, #1e2029 52%, #16171d 100%);
  --header-bg: rgba(30, 32, 41, 0.9);
  --sidebar-bg: rgba(28, 30, 38, 0.92);
  --dock-bg: rgba(26, 28, 36, 0.94);
}

/* Big round record button (left of the dock) */
.record-control-cluster {
  flex-direction: column;
  gap: 4px;
}
.record-cta-btn {
  width: 76px;
  height: 76px;
  min-width: 76px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  flex-shrink: 0;
}
.record-cta-btn .record-orb-inner {
  width: 50px;
  height: 50px;
}
.record-cta-btn .record-circle { width: 16px; height: 16px; }
.record-cta-btn #recordBtnText {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.record-cta-btn { position: relative; }

@media (max-width: 980px) {
  /* Dock: taller, touch friendly, record on the left, rest swipes */
  .studio-dock {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 10px;
    padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    min-height: 108px;
    scrollbar-width: none;
  }
  .studio-dock::-webkit-scrollbar { display: none; }
  .studio-dock > *, .studio-dock .camera-control-group { flex-shrink: 0; scroll-snap-align: start; }
  .studio-dock .camera-control-group { display: inline-flex; align-items: center; gap: 10px; }
  .record-control-cluster {
    position: sticky;
    left: 0;
    z-index: 2;
    align-items: center;
    padding-right: 8px;
    background: var(--dock-bg);
  }
  .dock-btn {
    min-height: 52px;
    padding: 8px 14px 8px 10px;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .dock-icon-circle { width: 30px; height: 30px; font-size: 15px; }
  .record-cta-btn { width: 72px; height: 72px; min-width: 72px; padding: 0; }
  .record-cta-btn .record-orb-inner { width: 48px; height: 48px; }
  .format-select { max-width: 96px; padding: 5px 6px; font-size: 10.5px; }

  /* Lower thirds: swipeable square-thumbnail carousel */
  #lowerThirdGrid.template-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding: 4px 2px 10px;
    scrollbar-width: none;
  }
  #lowerThirdGrid.template-grid::-webkit-scrollbar { display: none; }
  #lowerThirdGrid .template-card {
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    aspect-ratio: 1 / 1;
    padding: 8px;
    border-radius: 16px;
    scroll-snap-align: center;
    justify-content: space-between;
    align-items: stretch;
    overflow: hidden;
  }
  #lowerThirdGrid .template-card .template-desc { display: none; }
  #lowerThirdGrid .template-card-top {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%;
    font-size: 11px;
    line-height: 1.2;
  }
}
/* ==== v20 UPDATES ==== */
[data-theme="dark"] {
  --bg-backdrop:
    radial-gradient(circle at 18% 12%, rgba(190, 196, 220, 0.22), transparent 52%),
    radial-gradient(circle at 85% 92%, rgba(120, 128, 156, 0.25), transparent 55%),
    linear-gradient(160deg, #565b6d 0%, #404454 48%, #2d303c 100%);
  --header-bg: rgba(64, 68, 84, 0.88);
  --sidebar-bg: rgba(56, 60, 74, 0.9);
  --dock-bg: rgba(52, 56, 70, 0.94);
  --card-bg: #343844;
  --card-hover-bg: #3d4150;
  --card-active-bg: #2b2e3a;
  --input-bg: #2b2e3a;
  --canvas-frame-bg: #343844;
}
html, body { background-color: #404454; }

/* Big round REC button with REC text inside */
.record-cta-btn { width: 92px !important; height: 92px !important; min-width: 92px !important; padding: 0 !important; border-radius: 50% !important; background: radial-gradient(circle at 32% 28%, #ff7a8e 0%, #ef233c 55%, #a30d26 100%) !important; border: 4px solid #ffffff !important; box-shadow: 0 0 0 4px rgba(239, 35, 60, 0.35), 0 10px 22px rgba(0, 0, 0, 0.5) !important; }
.record-cta-btn .record-orb-inner { display: none !important; }
.rec-face { font-size: 22px; font-weight: 900; letter-spacing: 1.5px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.record-cta-btn.is-recording { animation: recPulse 1.2s ease-in-out infinite; }
.record-cta-btn.is-recording .rec-face { font-size: 0; }
.record-cta-btn.is-recording .rec-face::before { content: ''; display: block; width: 28px; height: 28px; border-radius: 6px; background: #fff; }
@keyframes recPulse { 50% { box-shadow: 0 0 0 10px rgba(239, 35, 60, 0.15), 0 10px 22px rgba(0,0,0,0.5); } }
.record-control-cluster { flex-direction: row; }

@media (max-width: 980px) {
  .studio-dock { min-height: 124px; align-items: center; padding-top: 14px; }
  .record-cta-btn { width: 96px !important; height: 96px !important; min-width: 96px !important; }
  .rec-face { font-size: 24px; }
  .dock-btn { min-height: 56px; }
  .format-select { max-width: 120px; min-height: 56px; font-size: 12px; }
}

/* ==== v21 UPDATES: categorized dock, round Next button, mobile teleprompter close ==== */
.studio-dock {
  position: relative;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: visible;
}
.dock-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.dock-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Round Next Speaker button, sits next to REC */
.dock-main .next-turn-dock-btn {
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  padding: 4px;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  text-align: center;
  font-size: 10px;
  line-height: 1.1;
  font-weight: 800;
  white-space: normal;
  flex-shrink: 0;
}
.dock-main .next-turn-dock-btn span { font-size: 20px; line-height: 1; }

/* Secondary controls panel */
.dock-more {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 8px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 20px;
  background: var(--dialog-bg, var(--dock-bg));
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--surface-shadow);
  max-height: 60dvh;
  overflow-y: auto;
}
.dock-more[hidden] { display: none; }
.dock-more-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dock-more-title {
  width: 100%;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent-primary, #359df2);
}
.dock-more .camera-select { max-width: 100%; flex: 1 1 140px; }

/* Teleprompter window controls: always reachable */
.prompter-drag-handle { flex-wrap: nowrap; }
.prompter-window-controls { margin-left: auto; flex-shrink: 0; }
#closePrompterBtn {
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  background: #ef233c;
  color: #fff;
  border: 2px solid #fff;
  font-weight: 900;
  font-size: 16px;
  cursor: pointer;
}

@media (max-width: 980px) {
  /* Dock: Row 1 = REC (left) + Next (round) + 2x2 tool tiles */
  .studio-dock {
    overflow: visible !important;
    min-height: 0 !important;
    justify-content: center;
    padding: 10px 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .dock-main { justify-content: flex-start; gap: 10px; }
  .dock-main .record-control-cluster { position: static; padding: 0; background: none; flex-shrink: 0; }
  .record-cta-btn { width: 88px !important; height: 88px !important; min-width: 88px !important; }
  .dock-main .next-turn-dock-btn { width: 64px; height: 64px; min-width: 64px; min-height: 64px; }
  .dock-tools {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .dock-tools .dock-btn {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    min-height: 48px;
    padding: 4px 4px;
    border-radius: 16px;
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
    min-width: 0;
  }
  .dock-tools .dock-icon-circle { width: 24px; height: 24px; font-size: 13px; }
  .dock-tools #dockPrompterBadge { display: none; }
  .dock-tools .mic-meter-pill { width: 34px; }
  .dock-more { left: 6px; right: 6px; }
  .dock-more .dock-btn { flex: 1 1 140px; min-height: 48px; white-space: normal; }

  /* Header: quieter, one scrolling row per group */
  .control-cluster { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .control-cluster::-webkit-scrollbar { display: none; }
  .control-cluster > * { flex-shrink: 0; }
  #themeToggleText, .settings-avatar-mini { display: none; }

  /* Teleprompter handle: compact, close button always visible */
  .drag-grip-pill { font-size: 0; }
  .drag-grip-pill::before { content: '\2725  Drag'; font-size: 12px; }
  .prompter-meta { display: none; }
  .prompter-drag-handle { padding: 4px 6px; }
  #minimizePrompterBtn { min-height: 40px; }
  #closePrompterBtn { min-width: 44px; min-height: 44px; }
}


/* ==== v22 UPDATES: sticky dock, header balloon menus, top-right theme + settings ==== */
.studio-dock {
  position: sticky;
  bottom: 0;
  z-index: 35;
}
.studio-header { overflow: visible; position: relative; z-index: 50; }
.header-menus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.header-corner { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.pop-wrap { position: relative; }
.pop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--glass-border);
  background: var(--card-bg);
  color: var(--text-main);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--card-shadow);
}
.pop-trigger[aria-expanded="true"] { border-color: #359df2; }
.pop-caret { font-size: 10px; opacity: 0.7; }

.pop-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 90;
  min-width: 190px;
  padding: 12px;
  border-radius: 18px;
  background: var(--dialog-bg, var(--card-bg));
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--surface-shadow);
}
.pop-menu[hidden] { display: none; }
/* balloon pointer */
.pop-menu::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 22px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: inherit;
  border-left: 1.5px solid var(--glass-border);
  border-top: 1.5px solid var(--glass-border);
}
.pop-title {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent-primary, #359df2);
}
.pop-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pop-options .pill-btn, .pop-options .seg-btn { min-height: 42px; }

@media (max-width: 980px) {
  .studio-dock { position: sticky !important; bottom: 0; }
  .studio-header { padding: 8px 10px; }
  .control-cluster { overflow: visible !important; flex-wrap: wrap !important; }
  .header-menus { flex: 1 1 auto; gap: 6px; }
  .header-corner { gap: 6px; }
  .header-menus .pro-toggle-btn { font-size: 11px; padding: 6px 10px; }
  #themeToggleText { display: none; }
  .header-corner .theme-toggle-btn { padding: 8px 11px; }
  .header-corner .settings-header-btn { padding: 8px 12px; }
  .pop-menu { position: fixed; top: auto; left: 12px !important; right: 12px; min-width: 0; }
  .pop-menu::before { display: none; }
}


/* ==== v23 UPDATES: clean brand block, icon-only theme + settings in the top-right corner ==== */
.brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.brand-text h1 { margin: 0; line-height: 1.05; }
.brand-text .studio-badge { margin: 0; }
#hostIdentityDisplay { display: none !important; }

/* Top-right corner: theme + settings, icons only */
.header-corner { gap: 8px; }
#themeToggleText, #settingsBtnText, .header-corner .settings-avatar-mini { display: none !important; }
.header-corner .theme-toggle-btn,
.header-corner .settings-header-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 20px;
}

/* Plan button now lives in Settings > Profile */
.settings-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1.5px solid var(--glass-border);
  background: var(--card-bg);
}
.settings-plan-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent-primary, #359df2);
}

@media (max-width: 980px) {
  .studio-header { position: relative; padding-right: 112px; }
  .studio-header .header-corner {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    flex-wrap: nowrap !important;
    z-index: 55;
  }
  .brand-group { flex-wrap: wrap; }
  .brand-text h1 { font-size: 22px; }
}

/* ==== v24 UPDATES: header layout fix (mobile) ==== */
@media (max-width: 980px) {
  .studio-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px !important;
  }
  /* children of brand-group flow directly in the header so rows wrap naturally */
  .studio-header .brand-group { display: contents; }
  .studio-header .brand-icon-img { width: 42px; height: 42px; flex: 0 0 42px; }
  .studio-header .brand-text {
    flex: 1 1 calc(100% - 52px);
    box-sizing: border-box;
    padding-right: 104px;
    min-width: 0;
  }

  /* Theme + Settings: true top-right corner, never full width */
  .studio-header .header-corner {
    position: absolute !important;
    top: 10px;
    right: 10px;
    left: auto !important;
    width: auto !important;
    margin: 0;
    display: flex;
    flex-wrap: nowrap !important;
    gap: 8px;
    z-index: 55;
  }

  /* Row 2: room code + join box side by side */
  .studio-header .live-call-badge { font-size: 11px; padding: 6px 10px; min-height: 36px; }
  .studio-header .join-code-pill { min-height: 36px; padding: 2px 3px 2px 10px; }
  .studio-header .join-code-pill input { width: 78px; }

  /* 2P + aspect: compact, share the row when they fit, else wrap below */
  .studio-header .header-menus { width: auto !important; flex: 0 0 auto; gap: 6px; }
  .studio-header .pop-trigger { min-height: 36px; padding: 4px 10px; font-size: 12px; gap: 4px; }
}

/* ==== v25 UPDATES: design controls open as a popup sheet from dock buttons ==== */
.studio-main { grid-template-columns: 1fr !important; }

.dock-looks {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.look-chip {
  flex: 1 1 0;
  max-width: 190px;
  min-height: 40px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1.5px solid var(--glass-border);
  background: var(--card-bg);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--card-shadow);
}
.look-chip.active-look {
  border-color: #359df2;
  box-shadow: 0 0 0 2.5px rgba(225, 124, 255, 0.4), 0 0 12px rgba(108, 233, 253, 0.35);
}

/* the sidebar becomes a bottom sheet that sits just above the dock */
#studioSheet.studio-sidebar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 120px;
  width: min(640px, 100vw - 16px);
  max-height: min(52dvh, 460px);
  order: 0;
  overflow-y: auto;
  z-index: 70;
  border: 1.5px solid var(--glass-border);
  border-radius: 22px 22px 18px 18px;
  background: var(--dialog-bg, var(--sidebar-bg));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35), var(--surface-shadow);
  animation: sheetUp 0.18s ease-out;
}
#studioSheet[hidden] { display: none !important; }
@keyframes sheetUp { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

#studioSheet .sheet-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px 0;
  background: inherit;
}
#studioSheet .sheet-grab { width: 44px; height: 5px; border-radius: 999px; background: var(--glass-border); }
#studioSheet .sheet-close {
  position: absolute;
  right: 10px;
  top: 6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--glass-border);
  background: var(--card-bg);
  color: var(--text-main);
  font-weight: 900;
  cursor: pointer;
}
#studioSheet .sidebar-tabs { padding-right: 52px; }
#studioSheet .tab-panel { max-height: none !important; overflow: visible !important; padding: 12px 14px 18px; }

/* lower thirds: compact square thumbnail carousel everywhere */
#lowerThirdGrid.template-grid {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 10px;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}
#lowerThirdGrid.template-grid::-webkit-scrollbar { display: none; }
#lowerThirdGrid .template-card {
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  padding: 8px;
  border-radius: 16px;
  scroll-snap-align: center;
  justify-content: space-between;
  overflow: hidden;
}
#lowerThirdGrid .template-card .template-desc { display: none; }
#lowerThirdGrid .template-card-top { flex-direction: column; align-items: flex-start; justify-content: space-between; height: 100%; font-size: 11px; line-height: 1.2; }

@media (max-width: 980px) {
  #studioSheet.studio-sidebar { width: calc(100vw - 12px); max-height: 50dvh; border-top: 1.5px solid var(--glass-border); }
  .dock-looks { gap: 6px; }
  .look-chip { max-width: none; font-size: 11px; min-height: 38px; padding: 4px 4px; }
}


/* ==== v26 UPDATES: toolbar under video, slim sticky dock, one-line header row ==== */
.studio-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px 12px;
  order: 2;
  width: 100%;
  box-sizing: border-box;
}
.studio-toolbar .dock-looks { display: flex; }
.toolbar-prompter-row { display: flex; justify-content: center; }
.toolbar-prompter-row .dock-btn {
  width: 100%;
  max-width: 420px;
  min-height: 52px;
  justify-content: center;
  white-space: nowrap;
}

/* dock now only holds REC, Next and camera/mic: stays pinned at the very bottom */
.studio-dock { position: sticky !important; bottom: 0; z-index: 35; }
.dock-tools { display: flex; }

@media (max-width: 980px) {
  .studio-main { display: flex; flex-direction: column; }
  .studio-toolbar { order: 2; }
  .dock-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .dock-tools .dock-btn:last-child { grid-column: 1 / -1; }
  .dock-main .record-control-cluster { align-self: center; }

  /* header row: code + join + panels + aspect on a single line */
  .studio-header { gap: 6px; }
  .studio-header .live-call-badge {
    font-size: 10px;
    padding: 4px 8px;
    min-height: 34px;
    gap: 4px;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .studio-header .join-code-pill { min-height: 34px; padding: 2px 3px 2px 8px; gap: 3px; flex: 0 1 auto; min-width: 0; }
  .studio-header .join-code-pill input { width: 58px; font-size: 10px; letter-spacing: 0.4px; min-width: 0; }
  .studio-header .join-code-go-btn { padding: 4px 9px; font-size: 11px; }
  .studio-header .header-menus { gap: 4px; flex: 0 0 auto; flex-wrap: nowrap !important; }
  .studio-header .pop-trigger { min-height: 34px; padding: 3px 7px; font-size: 11px; gap: 3px; }
  .studio-header .pop-caret { display: none; }
}

/* ==== v27: teleprompter always above header/dock/sheets; handle and close always tappable ==== */
.teleprompter-overlay { z-index: 120 !important; }
.prompter-drag-handle, .prompter-window-controls, #closePrompterBtn, #minimizePrompterBtn { position: relative; z-index: 2; }
@media (max-width: 980px) {
  .teleprompter-overlay { max-height: 55dvh; }
}
/* ==== v28: desktop keeps the classic right-hand side panel; phones keep the popup sheet ==== */
@media (min-width: 981px) {
  .studio-main {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    grid-template-rows: 1fr auto;
    grid-template-areas: "stage side" "tools side";
    min-height: 0;
  }
  .studio-main > .stage-container { grid-area: stage; }
  .studio-main > .studio-toolbar { grid-area: tools; padding: 4px 16px 10px; }
  .studio-main > #studioSheet { grid-area: side; }

  /* hide popup-only controls */
  .studio-toolbar .dock-looks,
  #studioSheet .sheet-head { display: none !important; }

  /* sidebar is a normal docked panel again, always visible */
  #studioSheet.studio-sidebar,
  #studioSheet.studio-sidebar[hidden] {
    display: flex !important;
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
    width: auto;
    max-height: none;
    border-radius: 0;
    border: none;
    border-left: 1.5px solid var(--glass-border);
    background: var(--sidebar-bg);
    box-shadow: var(--surface-shadow);
    animation: none;
    overflow: hidden;
  }
  #studioSheet .sidebar-tabs { padding-right: 12px; }
  #studioSheet .tab-panel { flex: 1; overflow-y: auto !important; max-height: none; padding: 16px; }

  /* lower thirds back to the 2-column card grid */
  #lowerThirdGrid.template-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
    scroll-snap-type: none;
    gap: 10px;
    padding: 0;
  }
  #lowerThirdGrid .template-card {
    flex: none;
    width: auto;
    height: auto;
    padding: 13px;
    border-radius: 20px;
    justify-content: flex-start;
    overflow: visible;
  }
  #lowerThirdGrid .template-card .template-desc { display: block; }
  #lowerThirdGrid .template-card-top { flex-direction: row; align-items: center; justify-content: space-between; height: auto; font-size: 12px; }
}