/* ── Fonts ────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Instrument+Serif:ital,wght@0,400;1,400&family=Anton&family=Bebas+Neue&family=Oswald:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Poppins:wght@400;700&family=Space+Mono:ital,wght@0,400;0,700&family=Permanent+Marker&family=Pixelify+Sans:wght@400;500&family=Leckerli+One&family=Amarante&family=Rubik+Dirt&family=Bitcount+Grid+Double&family=Honk&family=Modak&family=Quantico:wght@400;700&family=Raleway:ital,wght@0,400;0,700;1,400&family=Barlow+Condensed:wght@400;700&family=Abril+Fatface&family=Dancing+Script:wght@400;700&family=Lobster&family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400&family=Caveat:wght@400;700&family=Bangers&family=Outfit:wght@400;700&family=Exo+2:ital,wght@0,400;0,700&family=Rubik+80s+Fade&family=Rubik+Beastly&family=Rubik+Broken+Fax&family=Rubik+Bubbles&family=Rubik+Burned&family=Rubik+Distressed&family=Rubik+Doodle+Shadow&family=Rubik+Doodle+Triangles&family=Rubik+Gemstones&family=Rubik+Glitch&family=Rubik+Glitch+Pop&family=Rubik+Iso&family=Rubik+Lines&family=Rubik+Maps&family=Rubik+Marker+Hatch&family=Rubik+Maze&family=Rubik+Microbe&family=Rubik+Mono+One&family=Rubik+Moonrocks&family=Rubik+Pixels&family=Rubik+Puddles&family=Rubik+Scribble&family=Rubik+Spray+Paint&family=Rubik+Storm&family=Rubik+Vinyl&family=Rubik+Wet+Paint&display=swap');

/* ══════════════════════════════════════════════════════════════════════════
   BOOTSTRAP VARIABLE OVERRIDES  (do all theming here, touch nothing else)
══════════════════════════════════════════════════════════════════════════ */
:root {
  --bs-font-sans-serif:    'Instrument Sans', sans-serif;
  --bs-body-font-family:   var(--bs-font-sans-serif);
  --bs-body-bg:            #f3f4f6;
  --bs-body-color:         #16181d;
  --bs-border-color:       #e8e9ee;

  --bs-border-radius:      0;
  --bs-border-radius-sm:   0;
  --bs-border-radius-lg:   0;
  --bs-border-radius-xl:   0;
  --bs-border-radius-xxl:  0;
  --bs-border-radius-pill: 0;

  /* Bootstrap primary — wired directly to tv-accent so they never drift */
  --bs-primary:            var(--tv-accent);
  --bs-primary-rgb:        105, 59, 255;
  --bs-dark:               #16181d;
  --bs-dark-rgb:           22, 24, 29;
  --bs-link-color:         #16181d;
  --bs-link-color-rgb:     22, 24, 29;

  --bs-btn-border-radius:  0;
  --bs-btn-font-family:    var(--bs-font-sans-serif);

  /* ── Design tokens ─────────────────────────────────────────────
     Single source of truth — edit here, nowhere else.
     Radius tier:  panel → container → element → micro
  ─────────────────────────────────────────────────────────────── */
  --tv-bg:          #f3f4f6;
  --tv-surface:     #ffffff;
  --tv-ink:         #16181d;
  --tv-ink-soft:    #5b606b;
  --tv-line:        #e8e9ee;
  --tv-line-strong: #d9dbe2;
  --tv-track:       #ddddd8;   /* range input rail */
  --tv-accent:      #693bff;
  --tv-accent-soft: color-mix(in srgb, var(--tv-accent) 10%, white); /* auto-tracks accent */
  --tv-danger:      #dc2626;
  --tv-radius:      16px;      /* panel / card */
  --tv-radius-md:   12px;      /* control container: tab bar, segment, nav row */
  --tv-radius-sm:   11px;      /* interactive element: button, input, upload zone */
  --tv-radius-xs:    8px;      /* micro / inner: icon btn, close, motion card */
  --tv-shadow:      0 1px 2px rgba(16,18,23,.04), 0 12px 32px -16px rgba(16,18,23,.18);

  /* Local shorthand used in custom rules below */
  --surface: #ffffff;
  --border:  #e8e9ee;
  --accent:  #16181d;          /* intentionally ink, not tv-accent — used for switch/toggle fills */
  --muted:   #5b606b;
  --fg:      #16181d;
}

/* Range thumb overrides — see slider section below for full rules */
.form-range { accent-color: unset; }

/* Switch/check accent */
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus   { box-shadow: none; }
.form-check-input, .form-check-label { cursor: pointer; }
/* Prevent toggle+label from shrinking in flex rows next to a select */
.form-check.form-switch { flex-shrink: 0; white-space: nowrap; }


/* Unchecked switch/checkbox track — must be clearly visible against body-bg */
.form-check-input { --bs-form-check-bg: #c8c8c6; }
.form-switch { padding-left: 3.5em; }
.form-switch .form-check-input { width: 3em; height: 1.5em; margin-left: -3.5em; }

/* Uniform square buttons: B/I font toggles and rotate steppers */
.btn-sq {
  width: 32px; height: 32px; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rotate-stepper .btn { width: 32px; height: 32px; padding: 0; flex-shrink: 0; }

/* Scene group (align row in Text panel) */
.scene-group { margin-bottom: 0; }
.scene-group-label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.scene-group-row { display: flex; gap: 4px; }
.scene-group-row .icon-btn {
  flex: 1; height: 32px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.scene-group-row .icon-btn svg { width: 16px; height: 16px; }
.scene-group-row .icon-btn:hover { border-color: var(--bs-body-color); background: var(--bs-body-bg); }

/* B / I / color row in text layer cards */
.layer-style-row { display: flex; align-items: center; justify-content: space-between; }
.layer-align-row { display: flex; gap: 4px; margin-bottom: 8px; }

/* Animate + Shadow toggles side-by-side in text layer cards */
.layer-card-row { display: flex; align-items: center; justify-content: space-between; }

/* Layer card action icons (duplicate + delete) */
.layer-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 8px;
}
.layer-action-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #888);
  transition: border-color .15s, color .15s;
}
.layer-action-btn:hover { border-color: var(--tv-ink); color: var(--tv-ink); }
.layer-action-btn--danger:hover { border-color: var(--tv-danger); color: var(--tv-danger); }
.layer-action-btn svg { width: 13px; height: 13px; }

/* Breathing room inside control panels */
.control-group { padding-bottom: 4px; }
.slider-row { margin-bottom: 12px; }
.slider-row:last-child { margin-bottom: 0; }
.layer-card { padding: 0; }

/* Nav footer action buttons */
.editor-nav-preview .btn { font-size: .9rem; font-weight: 600; }

/* Separator between control groups inside settings pane */
.editor-settings-pane .control-group + .control-group { border-top: 1px solid var(--tv-line); }
#layerList { gap: 0 !important; }

/* Style button row — 7 equal-width buttons spanning full panel width */

/* Large color swatch in Style tab */
.color-picker-btn--lg { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; }

/* Slightly larger base text for the settings panel */
.editor-settings-pane { font-size: .95rem; }
.editor-settings-pane .text-muted.small,
.editor-settings-pane .form-check-label { font-size: .875rem; }
.editor-settings-pane .form-control,
.editor-settings-pane .form-select,
.editor-settings-pane textarea { font-size: 1rem; }

/* Account and Help: no border by default, border on hover/open */
#authBtn, #authBtn:hover, #authBtn:focus, #authBtn:active, #authBtn:focus-visible, #authBtn[aria-expanded="true"],
#helpBtn, #helpBtn:hover, #helpBtn:focus, #helpBtn:active, #helpBtn:focus-visible {
  box-shadow: none !important; outline: none !important;
  background: transparent !important;
  color: var(--bs-body-color) !important;
}
#authBtn, #helpBtn { border-color: transparent !important; }
#authBtn:hover, #authBtn[aria-expanded="true"],
#helpBtn:hover { border-color: var(--bs-body-color) !important; }


/* Scene top row: swatch + hex + actions all on one baseline */
.scene-color-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.scene-bg-picker-value { font-size: .875rem; font-family: monospace; color: var(--bs-body-color); }

/* [hidden] wins over any display property */
[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   HEADER  (Bootstrap navbar handles flex, bg, border — only override height)
══════════════════════════════════════════════════════════════════════════ */
/* v0 nav links and version pill */
.tv-navlink {
  color: var(--tv-ink-soft); font-size: 1rem; font-weight: 500;
  text-decoration: none; padding: 0.35rem 0.2rem; cursor: pointer;
}
.tv-navlink:hover { color: var(--tv-ink); }
.tv-ver-pill {
  font-size: .68rem; font-weight: 600; color: var(--tv-ink-soft);
  background: var(--tv-bg); border: 1px solid var(--tv-line);
  border-radius: 999px; padding: 1px 8px;
}

/* v0 frosted glass top bar */
header {
  flex-shrink: 0;
  background: rgba(255,255,255,.8);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--tv-line);
  position: sticky; top: 0; z-index: 100;
}
#headerNav { font-size: .875rem; }
.nav-hint { font-size: .78rem; color: var(--tv-ink-soft); padding-left: 4px; border-left: 1px solid var(--tv-line); }
#navPreviewBtn { min-width: 108px; justify-content: center; }
#navPreviewBtn .nav-preview-label { font-variant-numeric: tabular-nums; }
.brand-mark { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.brand-subtitle { font-size: .625rem; }
.header-compact,
.header-compact .btn,
.header-compact .nav-link { font-size: .75rem; }
/* Brand logo mark — v0 style */
.tv-brand-mark {
  width: 32px; height: 32px; border-radius: var(--tv-radius-xs);
  display: grid; place-items: center;
  background: var(--tv-ink); color: #fff; font-size: 17px; flex-shrink: 0;
}

/* Download button icon: outline normally, fill on hover */
#genBtn .gen-icon-hover { display: none; }
#genBtn:hover .gen-icon-default { display: none; }
#genBtn:hover .gen-icon-hover { display: inline; }

/* ══════════════════════════════════════════════════════════════════════════
   APP SHELL  (3-column CSS grid: nav | canvas | settings)
══════════════════════════════════════════════════════════════════════════ */
body { overflow: hidden; height: 100dvh; }
.app  { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; transition: opacity 0.15s ease; }
body.auth-pending .app { opacity: 0; pointer-events: none; }
.main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 320px 380px;
  gap: 1rem;
  padding: 1rem;
  background: var(--tv-bg);
  overflow: hidden;
  min-height: 0;
}

/* Layout-transparent wrappers — children become direct grid items */
.controls-col { display: contents; }
.editor-shell { display: contents; }

/* Panel card — v0 exact values */
.tv-panel,
.editor-nav-pane,
.editor-settings-pane,
.preview-col {
  background: var(--tv-surface);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
  box-shadow: var(--tv-shadow);
}

/* Grid column assignments: canvas LEFT | nav MIDDLE | settings RIGHT */
.preview-col {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.editor-nav-pane {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: .875rem;
}
.editor-settings-pane {
  grid-column: 3;
  grid-row: 1;
  overflow-y: auto;
  min-width: 0;
}

/* Canvas panel header — v0: px-3 py-2 border-bottom */
.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--tv-line);
}
.preview-toolbar-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tv-ink-soft);
}
.preview-format-pill {
  font-size: .8rem; font-weight: 600; color: var(--tv-ink-soft);
  background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  border: 1px solid var(--tv-line); border-radius: 999px;
  padding: 0.3rem 0.8rem; line-height: 1.4;
  cursor: pointer; transition: background .15s, color .15s;
}
button.preview-format-pill:hover { background: rgba(255,255,255,1); color: var(--tv-ink); }
.preview-format-pills { display: flex; align-items: center; gap: 8px; }
/* Hide old toolbar actions — nav has Preview/Export buttons */
#toolbarActions { display: none; }
.preview-format-host { display: none; }
/* Canvas stage — plain bg, no checker */
.preview-stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 1rem 1.25rem 1.25rem;
  overflow: hidden;
  min-height: 0;
  background: var(--tv-bg);
}
.stage-wrap      { position: relative; background: #000; flex-shrink: 0; border-radius: var(--tv-radius); overflow: hidden; box-shadow: 0 30px 70px -30px rgba(16,18,23,.55), 0 0 0 1px rgba(255,255,255,.4) inset; }
.stage-wrap canvas { display: block; width: 100%; height: 100%; }
.r-square   { aspect-ratio: 1/1;   max-height: 100%; max-width: 100%; }
.r-portrait { aspect-ratio: 4/5;  max-height: 100%; max-width: 100%; }
.r-story    { aspect-ratio: 9/16; max-height: 100%; max-width: 100%; }
.r-wide     { aspect-ratio: 16/9; max-height: 100%; max-width: 100%; }

/* Safe zone overlay */
.safe-zone-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.sz-band {
  position: absolute; left: 0; right: 0;
  background: rgba(255, 50, 50, 0.22);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px;
  border-bottom: 1px dashed rgba(255, 90, 90, 0.65);
}
.sz-band-bottom {
  bottom: 0; top: auto;
  border-bottom: none; border-top: 1px dashed rgba(255, 90, 90, 0.65);
  align-items: flex-start; padding-top: 3px;
}
.sz-label { font-size: 9px; color: rgba(255,255,255,0.7); letter-spacing: 0.05em; line-height: 1; }
.r-square   .sz-band           { height: 5%;  }
.r-portrait .sz-band           { height: 8%;  }
.r-story    .sz-band-top       { height: 14%; }
.r-story    .sz-band-bottom    { height: 20%; }

#hint { font-size: .75rem; line-height: 1.4; transition: color .15s; }
#hint:empty { display: none; }
#hint.hint--error  { color: var(--tv-danger); }
#hint.hint--success { color: #16a34a; }

/* Focus-visible rings for all custom interactive elements */
.tv-row:focus-visible,
.icon-btn:focus-visible,
.tab-btn:focus-visible,
.seg-btn:focus-visible,
.tv-eye:focus-visible,
.layer-drag-handle:focus-visible,
.drop-hint-btn:focus-visible,
.layer-action-btn:focus-visible,
.editor-add-layer-btn:focus-visible,
.upload-clear-btn:focus-visible {
  outline: 2px solid var(--tv-accent);
  outline-offset: 2px;
}
.btn-info-icon {
  background: none; border: none; padding: 0 0 0 3px;
  font-size: 0.72rem; color: var(--muted); cursor: pointer;
  line-height: 1; vertical-align: middle;
}
.btn-info-icon:hover { color: var(--text); }

/* ── Tooltip & Popover theme ─────────────────────────────────── */
.tooltip {
  --bs-tooltip-bg: #fff;
  --bs-tooltip-color: #0a0a0a;
  z-index: 9990 !important;
}
.tooltip-inner {
  border: 1px solid #0a0a0a;
  font-size: 0.78rem;
  text-align: left;
}
.tooltip .tooltip-arrow { display: none; }

.popover {
  --bs-popover-bg: var(--tv-surface);
  --bs-popover-border-color: var(--tv-line);
  --bs-popover-body-color: var(--tv-ink);
  --bs-popover-body-font-size: 0.82rem;
  border: 1px solid var(--tv-line) !important;
  border-radius: var(--tv-radius-sm) !important;
  box-shadow: var(--tv-shadow);
  overflow: hidden;
  z-index: 9988 !important;
}
.popover .popover-arrow { display: none; }
.popover-header {
  background: var(--tv-surface); color: var(--tv-ink-soft);
  border-bottom: 1px solid var(--tv-line);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  padding: .6rem .85rem;
}
.popover-body { padding: 6px; }

/* ── Modals — v0 rounded cards ─────────────────────────────────── */
.modal-content {
  background: var(--tv-surface);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius) !important;
  box-shadow: 0 24px 60px -20px rgba(16,18,23,.45);
  overflow: hidden;
}
.modal-header { padding: 1.15rem 1.25rem .5rem; }
.modal-body   { padding: .85rem 1.25rem; }
.modal-footer { padding: .65rem 1.25rem 1.15rem; gap: .5rem; }
.modal-footer > * { margin: 0; }
.modal-title  { color: var(--tv-ink); }
.modal .btn-close { border-radius: var(--tv-radius-xs); padding: .55rem; transition: background .12s; }
.modal .btn-close:hover { background: var(--tv-bg); }
/* Rounded input group inside modals (global bs radius is forced to 0) */
.modal .input-group > .form-control {
  border-top-left-radius: var(--tv-radius-sm) !important;
  border-bottom-left-radius: var(--tv-radius-sm) !important;
}
.modal .input-group > .btn:last-child {
  border-top-right-radius: var(--tv-radius-sm) !important;
  border-bottom-right-radius: var(--tv-radius-sm) !important;
}
/* Help-modal callout box */
.tv-callout {
  background: var(--tv-bg);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius-sm);
}

/* Danger button — matches tv-btn-ink/ghost family */
.tv-btn-danger {
  background: var(--tv-danger); color: #fff !important; border: 1px solid var(--tv-danger);
  border-radius: var(--tv-radius-sm) !important; font-weight: 600;
}
.tv-btn-danger:hover { background: color-mix(in srgb, var(--tv-danger) 80%, #000); color: #fff !important; }

.timeline-wrap {  border: 1px solid var(--tv-line); }
.timeline-wrap canvas { display: block; width: 100%; }
/* Progress bar only visible during active export */
.progress-bar      { height: 3px; background: var(--border); display: none; margin-bottom: 8px; }
.progress-bar.active { display: block; }
.progress-bar-fill { height: 100%; background: var(--accent); width: 0; transition: width .2s; }

.editor-nav-menu      { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
.editor-nav-preview   { padding: 0.75rem; border-top: 1px solid var(--tv-line); flex-shrink: 0; }
.editor-nav-status    { padding: 4px 0.75rem 8px; flex-shrink: 0; }

/* kept in .preview-dock rule above */

/* Format host section */
#editorNavFormatHost { padding: 0.75rem; flex-shrink: 0; }

/* ── v0 Segmented control ── */
.tv-segment {
  display: inline-flex; gap: 3px; padding: 3px;
  background: rgba(0,0,0,.06); border-radius: var(--tv-radius-md);
}
.tv-segment.w-100 { display: flex; }
.tv-segment .seg-btn {
  flex: 1 1 0; border: 0; background: transparent; color: var(--tv-ink-soft);
  font-weight: 500; font-size: .85rem; padding: 0.4rem 0.85rem;
  border-radius: calc(var(--tv-radius-md) - 3px); transition: all .14s; white-space: nowrap; cursor: pointer;
  font-family: var(--bs-font-sans-serif);
}
.tv-segment .seg-btn:hover { color: var(--tv-ink); }
.tv-segment .seg-btn.active,
.tv-segment .seg-btn[aria-pressed="true"] {
  background: var(--tv-surface); color: var(--tv-ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(16,18,23,.12), 0 2px 8px -4px rgba(16,18,23,.18);
}
.tv-segment .seg-btn.seg-icon { padding: 0.4rem 0.55rem; display: flex; align-items: center; justify-content: center; }
.tv-segment .seg-btn.seg-icon svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── v0 Tab bar (BG / Adjust / Motion / FX) ── */
.tv-tabs {
  display: flex; gap: 4px; padding: 5px;
  background: var(--tv-bg); border: 1px solid var(--tv-line); border-radius: var(--tv-radius-md);
  margin-bottom: 1.25rem;
}
.tv-tabs .tab-btn {
  flex: 1 1 0; border: 0; background: transparent; color: var(--tv-ink-soft);
  font-weight: 600; font-size: 1rem; padding: .5rem; border-radius: var(--tv-radius-xs);
  transition: all .14s; white-space: nowrap; cursor: pointer;
  font-family: var(--bs-font-sans-serif);
}
.tv-tabs .tab-btn:hover { color: var(--tv-ink); }
.tv-tabs .tab-btn.active { background: var(--tv-ink); color: #fff; box-shadow: 0 8px 18px -10px rgba(16,18,23,.8); }

/* ── v0 Buttons ── */
.tv-btn-ink {
  background: var(--tv-ink); color: #fff; border: 1px solid var(--tv-ink);
  border-radius: var(--tv-radius-sm) !important; font-weight: 600;
}
.tv-btn-ink:hover, .tv-btn-ink:focus { background: #000; color: #fff; border-color: #000; }
.tv-btn-ghost {
  background: var(--tv-surface); color: var(--tv-ink); border: 1px solid var(--tv-line-strong);
  border-radius: var(--tv-radius-sm) !important; font-weight: 600;
}
.tv-btn-ghost:hover, .tv-btn-ghost:focus { background: var(--tv-bg); border-color: var(--tv-ink-soft); color: var(--tv-ink); }

/* ── v0 Section label ── */
.tv-section-label,
.settings-section-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tv-ink-soft); display: block;
}

/* ── v0 Nav rows — Song, Scene, and layer items ── */
.tv-row {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  border: 1px solid transparent; background: transparent;
  border-radius: var(--tv-radius-md); padding: 0.62rem 0.7rem;
  color: var(--tv-ink); font-weight: 500; font-size: 0.92rem;
  text-align: left; cursor: pointer; font-family: var(--bs-font-sans-serif);
  transition: background .12s, border-color .12s;
}
.tv-row:hover { background: var(--tv-bg); }
.tv-row .flex-grow-1 { min-width: 0; }
.tv-row.is-active {
  background: var(--tv-accent-soft);
  border-color: color-mix(in srgb, var(--tv-accent) 35%, transparent);
}
.tv-row .tv-row-ic { background: var(--tv-bg); color: var(--tv-ink); }
.tv-row.is-active .tv-row-ic { background: #fff; color: var(--tv-accent); }

/* ── v0 Eye button ── */
.tv-eye {
  border: 0; background: transparent; color: var(--tv-ink-soft);
  border-radius: var(--tv-radius-xs); width: 30px; height: 30px;
  display: grid; place-items: center; flex-shrink: 0; cursor: pointer;
}
.tv-eye:hover { background: var(--tv-bg); color: var(--tv-ink); }
.tv-eye.off { color: #c2c5cf; }

/* ── v0 Drag grip ── */
.tv-grip { color: #c2c5cf; cursor: grab; font-size: 1rem; line-height: 1; }

/* ── Nav section headers ── */
.tv-nav-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 6px; flex-shrink: 0;
}

/* ── Tab list (flex column of tv-row items) ── */
.editor-tab-list { display: flex; flex-direction: column; flex-shrink: 0; gap: 6px;}

/* Add layer button (+ in elements header) */
.editor-add-layer-btn {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex-shrink: 0;
  background: none; border: none;
  color: var(--tv-ink-soft); cursor: pointer; font-size: .95rem; padding: 0; border-radius: var(--tv-radius-xs);
}
.editor-add-layer-btn:hover { color: var(--tv-ink); background: var(--tv-bg); }

.tv-row-ic {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center;
  border-radius: var(--tv-radius-xs); background: var(--tv-bg); font-size: .95rem; flex-shrink: 0;
}
.tv-row i.bi-chevron-right { opacity: .4; font-size: .7rem; flex-shrink: 0; }

/* Add layer popover menu */
.add-layer-popover { min-width: 168px; }
.add-layer-popover .dropdown-item {
  display: flex; align-items: center; width: 100%; padding: 9px 12px;
  font-size: 1rem; font-weight: 500; border-radius: var(--tv-radius-sm); border: none;
  color: var(--tv-ink); background: none; text-align: left; transition: background .12s;
}
.add-layer-popover .dropdown-item:hover,
.add-layer-popover .dropdown-item:focus { background: var(--tv-bg); color: var(--tv-ink); }
.add-layer-popover .dropdown-divider { margin: 4px 6px; border-top: 1px solid var(--tv-line); opacity: 1; }

/* ── Layer list (always visible in Elements section) ── */
.editor-layer-list { display: flex; flex-direction: column; overflow-y: auto; flex: 1; }
#editorNavLayers { display: flex; flex-direction: column; padding: 0 0.5rem 0.5rem; gap: 6px; }
#editorNavLayers .editor-nav-item-wrap { border-bottom: none; }

.editor-layer-item {
  display: flex; align-items: center; gap: 8px; width: 100%; flex: 1;
  padding: 7px 8px 7px 8px; background: transparent; border: 1px solid transparent;
  text-align: left; font-family: var(--bs-font-sans-serif); font-size: .8125rem;
  color: var(--muted); cursor: pointer; border-radius: var(--tv-radius-xs);
}
.editor-layer-item:hover { background: var(--tv-bg); color: var(--fg); }
.editor-layer-item.active, .editor-layer-item.is-active { background: var(--tv-accent-soft); border-color: color-mix(in srgb, var(--tv-accent) 35%, transparent); color: var(--tv-accent); font-weight: 500; }

/* ── Song upload drop zone ── */
.song-drop-zone {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 72px; border: 1px dashed var(--tv-line-strong); cursor: pointer;
  border-radius: var(--tv-radius-sm);
}
.song-drop-zone input[type=file] { display: none; }
.song-drop-zone.loaded { border-style: solid; border-color: var(--tv-line); }

.song-empty {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 0 16px;
}
.song-empty-icon { font-size: 1.25rem; color: var(--muted); }
.song-loaded {
  display: none; align-items: center; gap: 10px;
  padding: 0 36px 0 14px; width: 100%;
}
.song-drop-zone.loaded .song-empty { display: none; }
.song-drop-zone.loaded .song-loaded { display: flex; }

/* clip section hidden until song loads */
#clipSection { display: none; }
#clipSection.visible { display: block; }

.editor-nav-item-wrap { display: flex; align-items: center; gap: 2px; }
.editor-nav-item-wrap .tv-row { flex: 1; min-width: 0; overflow: hidden; }
.editor-nav-item-wrap .tv-eye { flex-shrink: 0; }
.editor-nav-layer.is-layer-empty .flex-grow-1 { color: var(--tv-warning, #f59e0b); }
.editor-nav-layer.is-layer-empty .tv-row-ic { opacity: 0.5; }

.tv-eye svg { width: 14px; height: 14px; }
.layer-drag-handle { cursor: grab; padding: 2px 4px; background: none; border: none; color: var(--tv-line-strong); font-size: .9rem; flex-shrink: 0; }
.layer-drag-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: 0; position: relative; }
.sortable-ghost::before {
  content: '';
  position: absolute;
  top: 0; left: 8px; right: 8px;
  height: 2px;
  background: var(--tv-accent);
  border-radius: 1px;
}
.sortable-chosen { background: var(--bs-body-bg); }

/* Upload zones — match song-drop-zone styling */
.header-upload, .logo-upload {
  position: relative; display: flex; align-items: center;
  height: 72px; padding: 0 12px; gap: 10px;
  border: 1px dashed var(--tv-line-strong); cursor: pointer;
  border-radius: var(--tv-radius-sm);
}
.header-upload.loaded, .logo-upload.loaded { border-style: solid; border-color: var(--tv-line); }
.header-upload input[type=file], .logo-upload input[type=file] { display: none; }

/* × clear button on upload zones */
.upload-clear-btn {
  position: absolute; top: 6px; right: 6px;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--tv-line-strong); border-radius: var(--tv-radius-xs);
  background: var(--tv-surface); color: var(--tv-ink-soft); cursor: pointer;
  font-size: .7rem; line-height: 1;
}
.upload-clear-btn:hover { background: var(--tv-bg); color: var(--tv-ink); border-color: var(--tv-ink-soft); }

/* ══════════════════════════════════════════════════════════════════════════
   SLIDER ROW  (label | track | value, 3-column grid)
══════════════════════════════════════════════════════════════════════════ */
.slider-row {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  align-items: center;
  column-gap: 10px;
  margin-bottom: 16px;
}
.slider-row .form-range { width: 100%; margin: 0; }
.slider-row .slider-value {
  color: var(--muted); font-size: .8rem; font-weight: 600;
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.control-group span.text-muted:not(.slider-value):not(.upload-sub):not(.text-nowrap) { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tv-ink-soft); }

/* Uniform range inputs — thick track, white-border thumb */
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--tv-track); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--tv-track); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px;
  border-radius: 50%; background: var(--tv-ink);
  border: 3px solid #fff; box-shadow: 0 2px 6px rgba(16,18,23,.35);
  cursor: pointer; transition: transform .1s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--tv-ink);
  border: 3px solid #fff; box-shadow: 0 2px 6px rgba(16,18,23,.35); cursor: pointer;
}


/* ══════════════════════════════════════════════════════════════════════════
   MOTION CARD GRID  (horizontal icon + label layout)
══════════════════════════════════════════════════════════════════════════ */
.motion-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 4px; }
.motion-card { display: flex; flex-direction: row; align-items: center; gap: 7px; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: var(--tv-radius-xs); background: none; cursor: pointer; font-size: .75rem; font-weight: 500; color: var(--muted); line-height: 1.2; text-align: left; transition: border-color .12s, color .12s, background .12s; }
.motion-card:hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); color: var(--fg); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.motion-card.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.motion-card-icon { flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
.motion-card-icon svg { width: 15px; height: 15px; }
.motion-settings-panel { padding: 8px 0 2px; }
.motion-settings-panel .slider-row { margin-bottom: 8px; }
.settings-tab-pane[hidden] { display: none !important; }

/* Section group spacing inside settings panes */
.settings-group { margin-bottom: 20px; }
.settings-group:last-child { margin-bottom: 0; }
.settings-section-label { margin-bottom: 12px; }
/* Divider between consecutive groups when the second starts with a section label */
.settings-group + .settings-group:has(> .settings-section-label:first-child) {
  border-top: 1px solid var(--tv-line);
  padding-top: 20px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGO  (no change)
══════════════════════════════════════════════════════════════════════════ */
/* Logo size: no label column (parent row supplies the label) */
.logo-field { display: grid; grid-template-columns: 76px 1fr; align-items: center; column-gap: 10px; }
.logo-field .slider-row { grid-template-columns: 1fr 42px; margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   ROTATE STEPPER  (no Bootstrap equivalent)
══════════════════════════════════════════════════════════════════════════ */
.rotate-control { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rotate-control > span { width: 76px; flex-shrink: 0; }
.rotate-stepper { display: flex; align-items: center; gap: 3px; }

/* ══════════════════════════════════════════════════════════════════════════
   SCENE ICON BUTTONS  (toolbar, no Bootstrap equivalent)
══════════════════════════════════════════════════════════════════════════ */
.icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; color: var(--muted); cursor: pointer; padding: 0; flex-shrink: 0; }
.icon-btn:hover { border-color: var(--border); color: var(--bs-body-color); }
.icon-btn.active { border-color: var(--bs-body-color); color: var(--bs-body-color); }
.icon-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ══════════════════════════════════════════════════════════════════════════
   COLOR SWATCHES  (circles, no Bootstrap equivalent)
══════════════════════════════════════════════════════════════════════════ */
.color-swatch, .color-picker-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--border); cursor: pointer; padding: 0; flex-shrink: 0;
}
.color-swatch:hover, .color-picker-btn:hover { border-color: var(--bs-body-color); }
#globalColorPicker { position: fixed; opacity: 0; pointer-events: none; }
.color-picker-popup { position: fixed; z-index: 9999; background: var(--surface); border: 1px solid var(--border); padding: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.15); }

/* ══════════════════════════════════════════════════════════════════════════
   CANVAS OVERLAYS
══════════════════════════════════════════════════════════════════════════ */
.gen-overlay { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(0,0,0,.7); color: #fff; }
.gen-overlay.active { display: flex; }
.gen-spinner { width: 30px; height: 30px; border: 2px solid rgba(255,255,255,.2); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.gen-cancel { font-size: .875rem; background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; padding: 5px 14px; cursor: pointer; font-family: var(--bs-font-sans-serif); }
.drop-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; color: #fff; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 18%, rgba(253,216,53,.10), rgba(0,0,0,0) 55%), linear-gradient(180deg, #16161a 0%, #0c0c0e 100%); }
.drop-hint.hidden { display: none; }
.drop-hint-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; max-width: 320px; pointer-events: auto; }
.drop-hint-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fdd835; opacity: .95; }
.drop-hint-title { font-size: 1.55rem; font-weight: 700; line-height: 1.15; color: #fff; }
.drop-hint-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 2px; }
.drop-hint-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.05); color: #fff; font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.drop-hint-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(253,216,53,.5); }
.drop-hint-btn:active { transform: translateY(1px); }
.drop-hint-btn .dhb-num { display: flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #fdd835; color: #16161a; font-size: .78rem; font-weight: 800; transition: background .2s; }
.drop-hint-btn .dhb-num.is-done { background: #22c55e; color: #fff; }
.drop-hint-btn .dhb-num.is-done .bi { font-size: .92rem; }
.drop-hint-btn .bi { font-size: 1.05rem; opacity: .9; }
.drop-hint-btn .dhb-label { flex: 1; text-align: left; }
.drop-hint-templates { font-size: .82rem; color: rgba(255,255,255,.62); text-decoration: none; margin-top: 2px; }
.drop-hint-templates:hover { color: #fff; text-decoration: underline; }
.rec-badge { position: absolute; top: 8px; right: 8px; display: none; align-items: center; gap: 5px; background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; padding: 3px 8px; }
.rec-badge.active { display: flex; }
.rec-dot { width: 7px; height: 7px; background: #f33; border-radius: 50%; }

/* ══════════════════════════════════════════════════════════════════════════
   EMBED MODE  (canvas-only iframe for templates preview page)
══════════════════════════════════════════════════════════════════════════ */
html.embed-mode, html.embed-mode body { overflow: hidden; height: 100%; background: #1a1918; }
html.embed-mode header,
html.embed-mode .drop-hint, html.embed-mode .rec-badge, html.embed-mode .gen-overlay,
html.embed-mode .preview-toolbar,
html.embed-mode #helpModal { display: none !important; }
html.embed-mode .main          { display: block !important; flex: 1; height: 100%; padding: 0 !important; background: #1a1918; }
html.embed-mode .preview-col   { position: relative; display: block !important; height: 100%; background: #1a1918; overflow: hidden; grid-column: unset; border: none; border-radius: 0; box-shadow: none; }
html.embed-mode .preview-stage { position: absolute; inset: 0; display: block !important; padding: 0 !important; background: #1a1918; border-radius: 0; border: none; }
html.embed-mode .stage-wrap    { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; max-height: none; aspect-ratio: unset !important; background: #1a1918; border-radius: 0; box-shadow: none; }

/* ══════════════════════════════════════════════════════════════════════════
   HIDDEN ELEMENTS
══════════════════════════════════════════════════════════════════════════ */
#mobileTools, #actionSheet, #elActionbar, #sheetHandle, #mobileStatus,
#mobileCanvasUpload, .mobile-canvas-upload, .mobile-scene-logo-btn,
.sheet-scrim, .el-deselect, .mobile-clip-controls, #mobileExportPanel { display: none !important; }

.is-pane-hidden, .is-layer-pane-hidden, .is-editor-group-hidden { display: none !important; }
.stage-booting .preview-stage { visibility: hidden; }

/* (responsive handled in the ── Responsive ── block below embed-mode) */

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .main { grid-template-columns: 1fr 300px 340px; }
}
@media (max-width: 1024px) {
  .main { grid-template-columns: 1fr 300px; }
  .editor-nav-pane { display: none !important; }
  .preview-col { grid-column: 1; }
  .editor-settings-pane { grid-column: 2; }
}
@media (max-width: 640px) {
  /* On mobile, revert to original flex layout so the mobile bottom-sheet works */
  .main { display: flex; flex-direction: column; gap: 0; padding: 0; background: var(--surface); }
  .controls-col { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
  .editor-shell { display: flex; flex: 1; overflow: hidden; min-height: 0; }
  .preview-col { display: none !important; }
  .editor-nav-pane { display: none !important; }
  .editor-settings-pane {
    flex: 1; border-radius: 0; border: none; box-shadow: none;
    grid-column: unset; grid-row: unset;
  }
}

/* ── Embed mode (hide side panels) ────────────────────────────── */
html.embed-mode .editor-nav-pane,
html.embed-mode .editor-settings-pane,
html.embed-mode .controls-col {
  display: none !important;
}

/* ─── Pexels picker ─────────────────────────────────────────── */
.pexels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pexels-item {
  position: relative;
  aspect-ratio: 16/9;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bs-border-color);
}
.pexels-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s;
}
.pexels-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.pexels-item:hover img { opacity: 0.82; }
.pexels-item:hover::after { opacity: 1; }
.pexels-duration {
  position: absolute;
  bottom: 4px;
  right: 5px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.68rem;
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
}

/* ─── Sticker picker ───────────────────────────────────────────── */
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.sticker-item {
  height: 100px;
  border: 2px solid transparent;
  border-radius: var(--tv-radius-sm);
  cursor: pointer;
  background: var(--tv-bg);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .12s, background .12s;
  overflow: hidden;
  position: relative;
}
.sticker-item:hover { border-color: var(--tv-accent); background: var(--tv-accent-soft); }
.sticker-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sticker-item-label {
  font-size: 0.6rem;
  line-height: 1.3;
  text-align: center;
  color: var(--tv-ink-muted);
  pointer-events: none;
  padding: 2px 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* ─── Dynamic layer card ───────────────────────────────────────── */
.layer-delete-btn { line-height: 1; }


/* ─── What's new dot ───────────────────────────────────────────── */
.whats-new-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
}

/* ── Busy banner (server under high demand) ─────────────────────────────────── */
.busy-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #000;
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.2;
  padding: 0.4rem 1rem;
  text-align: center;
}
.busy-banner[hidden] { display: none; }
.busy-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff8c1a;
  flex: 0 0 auto;
  animation: busyPulse 1.4s ease-in-out infinite;
}
@keyframes busyPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 140, 26, 0.55); }
  50%      { opacity: 0.55; transform: scale(0.78); box-shadow: 0 0 0 5px rgba(255, 140, 26, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .busy-dot { animation: none; }
}

/* Mobile "not ready yet" gate — see mobileGate in index.html */
.mobile-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(22, 24, 29, 0.72);
  backdrop-filter: blur(4px);
}

.mobile-gate-card {
  width: 100%;
  max-width: 340px;
  background: var(--tv-surface);
  border-radius: var(--tv-radius);
  box-shadow: var(--tv-shadow);
  padding: 24px 20px;
  text-align: center;
}

.mobile-gate-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tv-ink);
  margin-bottom: 8px;
}

.mobile-gate-body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--tv-ink-soft);
  margin-bottom: 18px;
}

.mobile-gate-send {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--tv-radius-sm);
  border: none;
  background: var(--tv-accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
}

.mobile-gate-send:active { transform: scale(0.98); }

.mobile-gate-email-link {
  display: block;
  cursor: pointer;
  margin-bottom: 18px;
}

/* Secondary: shown below the SMS button on an actual mobile device */
.mobile-gate-email-link--secondary {
  font-size: 0.8rem;
  color: var(--tv-ink-soft);
  text-decoration: underline;
}

/* Primary: SMS isn't offered (narrow desktop window, no phone attached) — this
   is the only/main action, so it should look like the .mobile-gate-send button. */
.mobile-gate-email-link--primary {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--tv-radius-sm);
  background: var(--tv-accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
.mobile-gate-email-link--primary:active { transform: scale(0.98); }

.mobile-gate-dismiss {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--tv-radius-sm);
  border: 1px solid var(--tv-line-strong);
  background: var(--tv-bg);
  color: var(--tv-ink);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.mobile-gate-dismiss:active { transform: scale(0.98); }