/* ===========================
   ROOT & BASE TYPOGRAPHY
   =========================== */ :root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 68px;
  --fab-d: 60px;
  --white: hsl(0, 0%, 100%);
  /* Brand palette */
  --c-gold-soft: #FBCA69;
  --c-ember: #E45E32;
  --c-ember-dark: #C94F2A;
  --c-wine: #692746;
  --c-plum: #331233;
  /* Neutrals */
  --c-bg: #0A070C;
  --c-bg-panel: #151019;
  --c-border-subtle: #2A222F;
  /* Text */
  --c-text: #F5F1F7;
  --c-text-soft: #D2C7D8;
  --c-text-muted: #9B8BA7;
  /* Gradients */
  --g-ember-wine: linear-gradient(135deg, #E45E32 0%, #692746 100%);
  --g-gold-ember-wine-plum: linear-gradient(135deg, #FBCA69 0%, #E45E32 30%, #692746 65%, #331233 100%);
  --g-wine-plum: linear-gradient(135deg, #692746 0%, #331233 100%);
  --g-solana90: linear-gradient(90deg, #03a9f4, #f441a5);
  --g-Radial: radial-gradient(at 88% 40%, hsla(240, 15%, 9%, 1) 0px, transparent 85%), radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%), radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%), radial-gradient(at 0% 64%, hsla(263, 93%, 56%, 1) 0px, transparent 85%), radial-gradient(at 41% 94%, hsla(284, 100%, 84%, 1) 0px, transparent 85%), radial-gradient(at 100% 99%, hsla(306, 100%, 57%, 1) 0px, transparent 85%);
}
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}
html, body {
  height: 100%;
  overscroll-behavior-y: none; /* stop iOS rubber-band bounce */
}
h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 600;
}
p {
  margin: 0;
}
button {
  font: inherit;
}
/* Global link styling */
a {
  color: var(--c-accent, #FBCA69);
  text-decoration: underline;
}
a:hover {
  color: #ffffff;
}
.topbar-logo {
  display: block;
  max-height: 56px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 768px) {
  .topbar-logo {
    max-height: 42px;
  }
}
/* Screen-reader only h1 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Links in dark cards & panels */
.card a, .help-panel__link {
  text-decoration: none;
  color: var(--c-accent, #FBCA69);
}
.card a:hover, .help-panel__link:hover {
  text-decoration: underline;
  color: #ffffff;
}
/*Links inside button-like elements:
   ensure they match the button label color and stay legible on desktop */
.btn a, .button a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.btn a:hover, .button a:hover {
  text-decoration: underline;
}
/* Slightly bolder buttons on desktop to help readability */
@media (min-width: 900px) {
  .btn, .button {
    font-weight: 600;
  }
}
.desktop-only {
  display: none;
}
@media (min-width: 900px) {
  .desktop-only {
    display: block;
  }
}
/* ===========================
   TOPBAR + STEPPER
   =========================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--c-border-subtle);
  background: radial-gradient(circle at top left, rgba(251, 202, 105, 0.08), #050307);
}
/* First row: title, record, tracking, help */
.topbar-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.topbar h1 {
  font-size: 18px;
  letter-spacing: 0.06em;
}
.topbar-subtitle {
  font-size: 12px;
  color: var(--c-text-muted);
}
.spacer {
  flex: 1;
}
/* Creation stepper row */
.topbar-steps {
  margin-top: 4px;
}
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(10, 7, 12, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.stepper-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--c-text-soft);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.stepper-step .step-index {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.5);
}
.stepper-step .step-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Active + complete states */
.stepper-step.is-active {
  background: radial-gradient(circle at 0 0, #fbca69, #e45e32);
  color: #0b0b0b;
}
.stepper-step.is-active .step-index {
  border-color: rgba(0, 0, 0, 0.85);
  background: rgba(250, 250, 250, 0.96);
}
.stepper-step.is-complete {
  color: var(--c-gold-soft);
}
.stepper-step.is-complete .step-index {
  border-color: var(--c-gold-soft);
}
/* Tracking chip */
.track-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  background: #111;
  font-size: 12px;
  color: #ddd;
}
.track-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #666;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
  transition: background 0.25s, box-shadow 0.25s;
}
.track-chip.on .dot {
  background: #00d97e;
  box-shadow: 0 0 8px #00d97e;
}
.track-chip.idle .dot {
  background: #ffbf00;
  box-shadow: 0 0 6px #ffbf00;
}
.track-chip.error .dot {
  background: #ff4757;
  box-shadow: 0 0 6px #ff4757;
}
/* Desktop-only record controls */
.desktop-rec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Small helper button styling (help, onboarding) */
.icon-btn, .btn.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Hide desktop-record on small screens */
@media (max-width: 1023px) {
  .desktop-rec {
    display: none !important;
  }
}
/* ===========================
   GLOBAL LAYOUT
   =========================== */
.app {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px;
  min-height: calc(95vh - 56px);
}
/* Stream Live mode � view for OBS/streaming */
body.live-mode {
  background: #000;
}
/* Hide most UI in live mode */
body.live-mode .topbar, body.live-mode .app-steps, body.live-mode .panels, body.live-mode #tabbar, body.live-mode #help-panel, body.live-mode #share-card {
  display: none !important;
}
body.live-mode main.app {
  padding: 0;
  min-height: 100vh;
}
/* Stage takes over the viewport */
body.live-mode .stage-wrap {
  width: 100vw;
  height: calc(100vh - var(--safe-top) - var(--safe-bottom));
  border-radius: 0;
  box-shadow: none;
  background: #000;
}
/* Keep the puppet view in a nice 16:9 window, centered */
body.live-mode .stage-frame {
  max-width: min(100vw, 100vh * (16 / 9));
  max-height: min(100vh, 100vw * (9 / 16));
  aspect-ratio: 16 / 9;
}
.live-toolbar {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 40;
  pointer-events: none; /* children re-enable */
}
.live-toolbar-actions {
  display: flex;
  gap: 6px;
  pointer-events: auto;
}
.live-pill {
  pointer-events: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.7);
  color: #ff4d6a;
}
#live-toolbar {
  display: none !important;
  visibility: hidden;
  opacity: 0;
}
body.live-mode #live-toolbar {
  display: flex !important;
  visibility: visible;
  opacity: 1;
}
/* Hide Live Toolbar on mobile/tablet */
@media (max-width: 899px) {
  .live-toolbar {
    display: none !important;
  }
}
/* Extra-small buttons for toolbar */
.btn-xs {
  padding: 3px 8px;
  font-size: 0.72rem;
  border-radius: 999px;
}
.btn-xs.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}
/* Stage area */
.stage-wrap {
  width: 100%;
  display: flex; /* was grid */
  align-items: center;
  justify-content: center;
  background: var(--g-Radial);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  padding: 8px 8px calc(env(safe-area-inset-bottom) + 8px);
}
.stage-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
/* Canvas */
.stage, #display-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  touch-action: none;
  will-change: filter;
  transform: translateZ(0);
  backface-visibility: hidden;
}
#display-canvas {
  display: block;
  margin: 0 auto;
  width: 100%; /* will be overridden by inline JS size, but keeps fallback sane */
  height: auto;
  max-width: 100%;
  border: 1px solid #404040;
  border-radius: 1rem;
}
@media (max-width: 768px) {
  .app {
    gap: 10px;
    padding: 12px 10px;
  }
  .stage-wrap {
    padding: 6px 6px calc(env(safe-area-inset-bottom) + 6px);
  }
}
/* Mobile / tablet layout with bottom sheet & tabbar */
@media (max-width: 1099px) {
  .app {
    grid-template-columns: 1fr;
    padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 8px);
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden; /* don't let the whole app scroll under the sheet */
  }
  .stage-wrap {
    /* Keep the canvas visible, avoid causing extra page scroll */
    max-height: calc(100dvh - var(--tabbar-h) - var(--safe-bottom) - 120px);
    overflow: hidden;
    overscroll-behavior: contain;
  }
}
/* Recording ring */
.stage-frame::after {
  --thick: 6px;
  --radius: 16px;
  --pct: 0;
  --color: #ff3b30;
  content: "";
  position: absolute;
  inset: calc(-1 * var(--thick));
  border-radius: calc(var(--radius) + var(--thick));
  background: conic-gradient(var(--color) calc(var(--pct) * 360deg), transparent 0 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 0);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2;
}
body.recording .stage-frame::after {
  opacity: 1;
}
/* Time chip */
.time-left {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: 600 12px / 1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  pointer-events: none;
  z-index: 3;
}
/* Centered countdown */
.record-hud {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
}
.record-hud.hidden {
  display: none !important;
}
.countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 clamp(32px, 8vw, 96px) / 1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
  width: clamp(96px, 22vw, 180px);
  height: clamp(96px, 22vw, 180px);
  border-radius: 50%;
  background: var(--g-Radial);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
/* Panels (desktop default) */
.panels {
  width: 100%;
}
/* Right-side panel column on large screens */
@media (min-width: 1100px) {
  .app {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: flex-start;
    padding-bottom: 16px;
  }
  .panels {
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 96px);
    overflow: auto;
    background: transparent;
    backdrop-filter: none;
  }
}
/* ===========================
   CARDS, GRIDS, TILES
   =========================== */
.card {
  position: relative;
  background: var(--c-bg-panel);
  border: 1px solid var(--c-border-subtle);
  border-radius: 16px;
  padding: 14px 12px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  margin-bottom: 16px;
}
.card h3 {
  font-size: 16px;
  margin-bottom: 4px;
}
.card h4 {
  font-size: 14px;
  margin: 8px 0 6px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  max-height: 38vh;
  overflow: auto;
  margin-top: 8px;
}
/* Panel close buttons (X in mobile bottom sheets) */
.card-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 999px;
  /* NEW: Brand gradient for visibility */
  background: linear-gradient(135deg, #fbca69 0%, /* soft gold */ #e45e32 40%, /* ember orange */ #692746 100% /* wine */
    );
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.45), 0 0 10px rgba(251, 202, 105, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}
.card-close .icon {
  width: 18px;
  height: 18px;
  color: #0b0b0b !important; /* high contrast on gradient */
  stroke-width: 2.4;
}
/* Desktop collapsible panels */
@media (min-width: 1100px) {
  .card[data-collapsible] .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .card-toggle {
    background: none;
    border: none;
    color: var(--c-text-muted);
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .card.is-collapsed .card-body {
    display: none;
  }
  .card.is-collapsed .card-toggle {
    transform: rotate(-90deg);
    color: var(--c-text-soft);
  }
}
/* Hide desktop panel chevrons on mobile & tablet */
@media (max-width: 1099px) {
  .card-toggle {
    display: none !important;
  }
}
/* Hover effect � subtle glow */
@media (hover: hover) {
  .card-close:hover {
    box-shadow:
      0 0 12px rgba(251, 202, 105, 0.55), 0 6px 14px rgba(0, 0, 0, 0.6);
    transform: translateY(-1px);
  }
}
/* ---------------------------------
   Horizontal scroll galleries (mobile)
   ---------------------------------- */
@media (max-width: 1099px) {
  /* Backgrounds, Puppets, Frames use .grid */
  .grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 8px;
    /* Horizontal scroll */
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .grid::-webkit-scrollbar {
    height: 4px;
  }
  .grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
  }
  /* Each tile becomes a snap-aligned "card" in the rail */
  .grid .tile, .grid .frame-item, .grid .ad-tile {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  /* Default width for gallery tiles on mobile */
  .grid .tile, .grid .frame-item {
    width: 120px;
  }
  /* Sponsored / ad tiles get a bit more width for copy */
  .grid .ad-tile {
    min-width: 70%;
  }
}
/* Frames card (sponsored overlays) */
.frames-card {
  margin-top: 12px;
}
.frames-card .card-subtitle {
  font-size: 0.8rem;
  color: var(--c-text-muted);
  margin-top: 4px;
}
/* Smaller tabs for Frames if you use them */
.tabs--frames {
  margin-top: 8px;
}
.tab--small {
  font-size: 0.78rem;
  padding-inline: 8px;
}
/* Frame grid and tiles reuse .grid / .tile base styles */
.frame-grid {
  max-height: 32vh; /* a bit shorter than backgrounds */
}
/* Overlay-style tile caption */
.frame-item .cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  font-size: 0.72rem;
}
.frame-item .cap-title {
  font-weight: 600;
  color: var(--c-text);
}
.frame-item .cap-meta {
  font-size: 0.68rem;
  color: var(--c-text-muted);
}
/* Frame actions row */
.frame-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.frame-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.tile {
  border: 1px solid var(--c-border-subtle);
  border-radius: 10px;
  background: #141016;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.tile img {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: cover;
  background: #222;
}
.tile .cap {
  font-size: 12px;
  padding: 6px 8px;
  color: var(--c-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
/* Sponsored tile in background grid */
.ad-tile {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, #1d1026, #2a1533);
  text-align: left;
}
.ad-pill {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.8);
}
.ad-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}
.ad-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}
.ad-copy strong {
  font-size: 13px;
}
.ad-copy span {
  opacity: 0.8;
}
.ad-cta {
  font-size: 11px;
  color: #FAF7F0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}
/* ===========================
   ROWS, BUTTONS, TABS
   =========================== */
.row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #1b131f;
  color: var(--c-text);
  border: 1px solid var(--c-border-subtle);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.06s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn.primary {
  background: var(--g-ember-wine);
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.btn.primary:hover {
  background: linear-gradient(135deg, var(--c-ember-dark), var(--c-wine));
}
.btn.danger {
  background: #ff4d4f;
  border: none;
}
.btn.ghost {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
.btn.file input {
  display: none;
}
.btn:hover {
  transform: translateY(-0.5px);
}
.btn:active {
  transform: translateY(0);
  box-shadow: none;
}
/* Generic small icon-only button */
.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
/* Tabs */
.tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.tab {
  background: #1b131f;
  border: 1px solid var(--c-border-subtle);
  color: var(--c-text-soft);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
/* Aspect ratio pill group */
.aspect {
  position: relative;
  display: flex;
  gap: 4px;
  margin-top: 6px;
  padding: 3px;
  background: linear-gradient(90deg, #03a9f4, #f441a5);
  border-radius: 0.9em;
}
.aspect button {
  flex: 1;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 0.7em;
  border: none;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  box-shadow: 2px 2px 3px #000000b4;
}
.aspect button.active {
  background: var(--g-ember-wine);
}
/* Inputs – avoid iOS zoom-on-focus */
input[type="search"], input[type="text"], input[type="email"], input[type="number"], input[type="url"], input[type="tel"], textarea {
  font-size: 16px;
}
/* ===========================
   EFFECTS PANEL
   =========================== */
.effects-card h3, .effects-card h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
}
.effects-card .group {
  padding: 10px 12px;
  border: 1px solid var(--c-border-subtle);
  border-radius: 12px;
  margin: 10px 0;
  background: #120c16;
}
.effects-card .controls {
  display: grid;
  gap: 10px;
}
.effects-card .control {
  display: grid;
  grid-template-columns: 110px 1fr min(48px, 12%);
  gap: 10px;
  align-items: center;
}
.effects-card .control > span {
  color: var(--c-text-soft);
  font-size: 12px;
  opacity: 0.9;
}
.effects-card .control output {
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
.effects-card .control.switch {
  grid-template-columns: 1fr;
  gap: 6px;
}
.effects-card .control.switch span {
  font-size: 13px;
}
/* Sliders */
.effects-card input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #1f1f1f;
  border-radius: 999px;
  outline: none;
}
.effects-card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111;
}
.effects-card input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111;
}
/* Preset chips */
.fx-preset-row {
  display: flex;
  gap: 8px;
  padding: 8px 12px 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.fx-preset-row::-webkit-scrollbar {
  height: 4px;
}
.fx-preset-row::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}
.fx-preset-chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 10, 10, 0.7);
  color: #f5f5f5;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.fx-preset-chip:active {
  transform: scale(0.96);
}
.fx-preset-chip.active {
  background: var(--g-ember-wine);
  border-color: transparent;
  color: #ffffff;
}
/* Sub-preset rows (Color / Style / Particles chips under sliders) */
.fx-subpreset-row {
  display: flex;
  gap: 8px;
  padding: 4px 12px 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Make sub-preset chips look like mini effect chips */
.fx-subpreset-chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 10, 10, 0.7);
  color: #f5f5f5;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.fx-subpreset-chip:active {
  transform: scale(0.96);
}
.fx-subpreset-chip.active {
  background: var(--g-ember-wine);
  border-color: transparent;
  color: #ffffff;
}
.fx-subpreset-row .fx-subpreset-chip {
  font-size: 11px;
  padding: 5px 10px;
}
/* Compact controls on very small phones */
@media (max-width: 420px) {
  .effects-card .control {
    grid-template-columns: 90px 1fr 44px;
  }
}
/* ===========================
   BOTTOM TABBAR + SHEET
   =========================== */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  backdrop-filter: blur(8px);
  background: var(--g-wine-plum);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.9);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  z-index: 80;
}
.tabbar::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 1px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(251, 202, 105, 0.55), transparent);
  opacity: 0.9;
}
.tabbar .tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #f3edf9;
  font-size: 11px;
  opacity: 0.9;
  background: none;
  border: 0;
  padding: 10px 0 4px;
  cursor: pointer;
  width: 100%;
  justify-content: center;
}
/* subtle separators between nav items */
.tabbar .tab::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: -0.5px;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.14), transparent);
  opacity: 0.9;
}
.tabbar .tab:last-of-type::after {
  display: none;
}
.tabbar .tab svg {
  opacity: 0.95;
}
.tabbar .tab.active {
  color: var(--c-gold-soft);
  opacity: 1;
}
#fab-record.fab {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* sit ABOVE the tabbar + safe area with a small gap */
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px);
  width: var(--fab-d);
  height: var(--fab-d);
  border-radius: 999px;
  border: 4px solid #050505;
  background: radial-gradient(circle at 50% 50%, #ff3b3b, #d11);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
  z-index: 90; /* higher than tabbar & cards */
}
#fab-record.fab.recording {
  background: radial-gradient(circle at 50% 50%, #00d97e, #08b067);
}
#fab-record .icon-slot.start[hidden], #fab-record .icon-slot.stop[hidden] {
  display: none !important;
}
/* FAB only on mobile/tablet */
@media (min-width: 992px) {
  #fab-record {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}
/* Bottom-sheet scrim */
#sheet-scrim[hidden] {
  display: none !important;
}
.sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 44;
}
/* Mobile panels as bottom sheet */
@media (max-width: 1099px) {
  .app {
    grid-template-columns: 1fr;
    padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 8px);
  }
  .panels {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    z-index: 800;
    max-height: calc(100dvh - var(--safe-top, 0px));
    overflow: hidden;
    pointer-events: none;
  }
  .panels.open {
    transform: translateY(0%);
    pointer-events: auto;
  }
  .panels .card {
    display: none;
    margin: 8px 12px;
    border-radius: 16px;
    background: var(--c-bg-panel);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100dvh - var(--tabbar-h) - var(--safe-bottom) - 32px);
    padding-bottom: calc(16px + var(--tabbar-h) + var(--safe-bottom));
    padding-right: 40px; /* space for the X button */
  }
  .panels .card.active {
    display: block;
  }
}
/* Hide tabbar on large screens */
@media (min-width: 1100px) {
  .tabbar, .sheet-scrim {
    display: none !important;
  }
  .app {
    padding-bottom: 16px;
    align-items: flex-start;
  }
  .stage-wrap {
    margin-top: 12px;
  }
  .panels .card {
    max-height: none;
    overflow: visible;
  }
  .panels .card .card-close {
    display: none !important;
  }
}
/* Presets tray row */
.bg-presets-row {
  display: flex;
  gap: .55rem;
  padding: .75rem .9rem .85rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  background: rgba(0, 0, 0, .14);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.bg-presets-row::-webkit-scrollbar {
  display: none;
}
.bg-presets-row {
  scrollbar-width: none;
}
/* Square selector tile */
.preset-tile {
  flex: 0 0 auto;
  width: 80px;
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.preset-tile:active {
  transform: scale(.98);
}
.preset-tile__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.preset-tile__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.preset-tile__label {
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.1;
  opacity: .92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Badge top-left */
.preset-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .92);
}
/* Lock overlay for Pro tiles */
.preset-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .35);
}
.preset-lock svg {
  width: 22px;
  height: 22px;
  opacity: .95;
}
/* Active selection */
.preset-tile.active {
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 0 0 1px rgba(251, 202, 105, .55), 0 12px 28px rgba(0, 0, 0, .36);
}
/* Featured emphasis */
.preset-tile.featured {
  border-color: rgba(251, 202, 105, .30);
}
/* ONBOARDING MODAL */
.onboarding[hidden], .onboarding.hidden {
  display: none !important;
}
.onboarding {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
}
/* Dimmed background, now animated in */
.onboarding::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle at top, rgba(251, 202, 105, 0.08), #000000e6);
  backdrop-filter: blur(4px);
  animation: onboardingOverlayFade 220ms ease-out;
}
/* Core card � glassy, branded, matches app cards */
.onboarding-card {
  position: relative;
  z-index: 1;
  width: min(380px, 92vw);
  max-width: 420px;
  max-height: 80vh;
  overflow: auto;
  background-image: var(--g-Radial);
  border-radius: 18px;
  border: 1px solid rgba(251, 202, 105, 0.38);
  padding: 20px 18px 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  color: var(--c-text);
  animation: onboardingSheetEnter 260ms ease-out;
  transform-origin: bottom center;
}
/* Gradient �aura� behind card for extra glow */
.onboarding-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--Radial) opacity: 0.22;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}
/* HERO */
.onboarding-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.onboarding-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fbca69, #e45e32);
  box-shadow: 0 0 22px rgba(251, 202, 105, 0.7);
}
.onboarding-icon .icon {
  width: 22px;
  height: 22px;
  color: #0b0b0b;
}
.onboarding-hero-text h2 {
  margin: 0 0 4px;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.onboarding-hero-text p {
  margin: 0;
  font-size: 13px;
  opacity: 0.92;
}
/* HOW IT WORKS SECTION */
.onboarding-steps h3 {
  margin: 6px 0 2px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
}
.onboarding-kicker {
  margin: 2px 0 6px;
  font-size: 12px;
  opacity: 0.85;
}
/* Step list styled like mini cards */
.onboarding-step-list {
  list-style: none;
  padding-left: 0;
  margin: 4px 0 12px;
  counter-reset: step;
}
.onboarding-step-list li {
  position: relative;
  padding: 8px 10px 8px 30px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(18, 10, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
/* Numbered pill */
.onboarding-step-list li::before {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  left: 8px;
  top: 9px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(251, 202, 105, 0.8);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold-soft, #fbca69);
}
.step-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}
.step-hint {
  display: inline;
  font-size: 11px;
  opacity: 0.86;
}
/* PRIVACY CALLOUT � trust tile */
.onboarding-privacy {
  margin: 6px 0 10px;
}
.privacy-callout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 10px;
  border-radius: 14px;
  background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.15), rgba(15, 23, 42, 0.94));
  border: 1px solid rgba(34, 197, 94, 0.75);
}
.privacy-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.privacy-icon .icon {
  width: 18px;
  height: 18px;
  color: #4ade80;
}
.privacy-text h3 {
  margin: 0 0 2px;
  font-size: 13px;
}
.privacy-text p {
  margin: 0;
  font-size: 12px;
  opacity: 0.9;
}
/* FOOTER */
.onboarding-footer {
  margin-top: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.onboarding-footer label {
  font-size: 12px;
  gap: 6px;
  display: inline-flex;
  align-items: center;
}
/* CTA � brand gradient */
#btn-close-onboarding {
  background: linear-gradient(135deg, #b331d5 0%, #7f17ec 28%, #5847f9 64%, #468af3 100%);
  color: #FAF7F0;
  border: none;
  transition: all 160ms ease-in-out;
  box-shadow: 0 4px 14px rgba(88, 71, 249, 0.35);
  font-weight: 600;
}
/* Desktop sizing */
@media (min-width: 769px) {
  #btn-close-onboarding {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
  }
}
/* Hover glow (desktop only) */
@media (hover: hover) {
  #btn-close-onboarding:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(88, 71, 249, 0.55);
  }
}
/* Active (tap/click) */
#btn-close-onboarding:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(88, 71, 249, 0.4);
}
/* So CTA visually dominates the checkbox */
.onboarding-footer label {
  opacity: 0.72;
}
/* ===========================
   BOTTOM SHEET VARIANT � MOBILE
   =========================== */
@media (max-width: 768px) {
  .onboarding {
    align-items: flex-end;
  }
  .onboarding-card.onboarding-card--sheet {
    width: 100%;
    max-width: 100%;
    max-height: 70vh;
    border-radius: 18px 18px 0 0;
    padding: 16px 16px 14px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9);
  }
  /* Drag handle at top */
  .onboarding-card.onboarding-card--sheet::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }
  .onboarding-card--sheet .onboarding-hero {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .onboarding-card--sheet .onboarding-step-list {
    max-height: 34vh;
    overflow-y: auto;
  }
  .onboarding-card--sheet .onboarding-footer {
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .onboarding-card--sheet #btn-close-onboarding {
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
    border-radius: 14px;
  }
}
/* ===========================
   ONBOARDING ANIMATIONS
   =========================== */
@keyframes onboardingOverlayFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes onboardingSheetEnter {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* ============================================
   ONBOARDING � FULL-WIDTH CTA + BRAND COLORS
   ============================================ */
/* Mobile: make the CTA full-width */
@media (max-width: 768px) {
  .onboarding-card--sheet .onboarding-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .onboarding-card--sheet #btn-close-onboarding {
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 600;
    border-radius: 14px;
  }
}
/* Desktop: keep it nicely sized but tighter */
@media (min-width: 769px) {
  #btn-close-onboarding {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
  }
}
/* BRAND GRADIENT BUTTON */
#btn-close-onboarding {
  background: linear-gradient(135deg, #b331d5 0%, #7f17ec 28%, #5847f9 64%, #468af3 100%);
  color: #FAF7F0;
  border: none;
  transition: all 160ms ease-in-out;
  box-shadow: 0 4px 14px rgba(88, 71, 249, 0.35);
}
/* Hover glow (desktop only) */
@media (hover: hover) {
  #btn-close-onboarding:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(88, 71, 249, 0.55);
  }
}
/* Active (tap/click) feedback */
#btn-close-onboarding:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(88, 71, 249, 0.4);
}
/* CHECKBOX ROW toned down so CTA stands out */
.onboarding-card--sheet .onboarding-footer label {
  font-size: 12px;
  opacity: 0.7;
}
/* Desktop sizing */
@media (min-width: 769px) {
  #btn-close-onboarding {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
  }
}
/* Hover glow (desktop only) */
@media (hover: hover) {
  #btn-close-onboarding:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(88, 71, 249, 0.55);
  }
}
/* Active (tap/click) */
#btn-close-onboarding:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(88, 71, 249, 0.4);
}
/* So CTA visually dominates the checkbox */
.onboarding-footer label {
  opacity: 0.72;
}
/* ===========================
   BOTTOM SHEET VARIANT � MOBILE
   =========================== */
@media (max-width: 768px) {
  .onboarding {
    align-items: flex-end;
  }
  .onboarding-card.onboarding-card--sheet {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 12px);
    border-radius: 18px 18px 0 0;
    padding: 16px 16px 14px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* Drag handle at top */
  .onboarding-card.onboarding-card--sheet::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }
  .onboarding-card--sheet .onboarding-hero {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .onboarding-card--sheet .onboarding-steps {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .onboarding-card--sheet .onboarding-step-list {
    max-height: none; /* remove the vh clamp */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    padding-bottom: 6px;
  }
  .onboarding-card--sheet .onboarding-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    flex: 0 0 auto;
  }
  .onboarding-card--sheet #btn-close-onboarding {
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
    border-radius: 14px;
  }
}
/* ONBOARDING ANIMATIONS */
@keyframes onboardingOverlayFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes onboardingSheetEnter {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.onboarding-kicker {
  margin: 2px 0 6px;
  font-size: 12px;
  opacity: 0.85;
}
/* Onboarding animations */
@keyframes onboardingOverlayFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes onboardingSheetEnter {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Apply fade to the dimmed background when visible */
.onboarding::before {
  animation: onboardingOverlayFade 220ms ease-out;
}
/* Default card entrance (desktop & sheet variant) */
.onboarding-card {
  animation: onboardingSheetEnter 260ms ease-out;
  transform-origin: bottom center;
}
/* MODALS: PREFLIGHT, PREVIEW, SHARE */
.modal[hidden] {
  display: none !important;
}
.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1000;
}
.modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.modal .modal-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 720px);
  max-height: 90vh;
  overflow: auto;
  background: var(--c-bg-panel);
  color: var(--c-text);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  padding: 20px;
}
.preview, .share {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 900;
  overflow: auto;
}
.preview.hidden, .share.hidden {
  display: none !important;
}
.preview-card, .share-card {
  width: min(720px, 92vw);
  max-height: 92vh;
  background: var(--c-bg-panel);
  color: var(--c-text);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  padding: 16px;
  overflow: auto;
}
/* Preview video */
.preview-video, .share-video {
  width: 100%;
  height: auto;
  max-height: 50vh;
  display: block;
  background: #000;
  border-radius: 10px;
}
@media (max-width: 480px) {
  .share-video {
    max-height: 180px;
  }
}
/* Sponsor strips */
.preview-card .preview-sponsor, .share-sponsor {
  margin: 6px 0 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: linear-gradient(120deg, #692746, #331233);
  position: relative;
  overflow: hidden;
}
.preview-sponsor::before, .share-sponsor::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.18), transparent 55%);
  opacity: 0.5;
  pointer-events: none;
}
.preview-sponsor-inner, .share-sponsor-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
}
.preview-sponsor-logo, .share-sponsor-logo {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.35);
}
.preview-sponsor-kicker, .share-sponsor-kicker {
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.9;
}
.preview-sponsor-headline, .share-sponsor-headline {
  margin: 1px 0 2px;
  font-size: 13px;
  font-weight: 600;
}
.preview-sponsor-copy, .share-sponsor-copy {
  margin: 0;
  font-size: 11px;
  opacity: 0.9;
}
.preview-sponsor-cta, .share-sponsor-cta {
  flex: 0 0 auto;
  font-size: 11px;
  padding-inline: 10px;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .preview-sponsor-inner, .share-sponsor-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .preview-sponsor-cta, .share-sponsor-cta {
    margin-top: 4px;
  }
}
/* Preview Modal � Icon Action Row */
.preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  gap: 8px;
}
.preview-actions .icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.preview-actions .icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.preview-actions .icon-btn:active {
  background: rgba(255, 255, 255, 0.18);
}
.preview-actions .icon {
  width: 20px;
  height: 20px;
}
/* Copy caption pill button */
.btn-copy-caption {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-left: 6px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.16), transparent 60%), rgba(12, 12, 12, 0.96);
  color: #f4f5f7;
  opacity: 0.95;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, opacity 0.15s ease-out, transform 0.08s ease-out;
}
.btn-copy-caption .icon {
  width: 14px;
  height: 14px;
}
.btn-copy-caption:hover, .btn-copy-caption:focus-visible {
  opacity: 1;
  border-color: rgba(125, 179, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(125, 179, 255, 0.35);
  transform: translateY(-0.5px);
}
.btn-copy-caption.copied {
  border-color: rgba(144, 238, 144, 0.95);
  box-shadow: 0 0 0 1px rgba(144, 238, 144, 0.4);
}
/* Toast */
.toast[hidden] {
  display: none !important;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 24px);
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.9);
  color: var(--c-text);
  font-size: 12px;
  z-index: 1200;
}
/* HELP MENU DROPDOWN */
.topbar-help {
  position: relative;
}
.help-trigger {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.help-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 220px;
  background: #120d18;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  padding: 8px 0;
  z-index: 200;
}
.help-menu[hidden] {
  display: none;
}
.help-menu-header {
  padding: 8px 12px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
}
.help-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.help-menu-item {
  width: 100%;
  border: 0;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  background: transparent;
  color: var(--c-text-soft);
  cursor: pointer;
}
.help-menu-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--c-text);
}
.help-menu-item .icon {
  width: 16px;
  height: 16px;
}
/* Lock scroll when modals open */
body.modal-open {
  overflow: hidden;
}
.help-panel[hidden] {
  display: none !important;
}
.help-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  pointer-events: none; /* card will re-enable */
}
/* dimmed background */
.help-panel__scrim {
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}
/* card slides in from the right */
.help-panel__card {
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  margin-left: auto;
  width: min(420px, 100%);
  max-height: calc(100dvh - 16px); /* a bit of breathing room at top/bottom */
  background: var(--c-bg-panel, #151019);
  border-left: 1px solid var(--c-border-subtle, #2a222f);
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.6);
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
  transform: translateX(100%);
  transition: transform 0.22s ease-out;
  /* 🔑 Make long content scrollable inside the card */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}
/* when panel is active (handled by JS) */
.help-panel.open .help-panel__card {
  transform: translateX(0%);
}
/* header */
.help-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.help-panel__header h2 {
  margin: 0;
  font-size: 16px;
}
.help-panel__section {
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.help-panel__section:first-of-type {
  border-top: 0;
}
.help-panel__section h3 {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
}
.help-panel__steps, .help-panel__tips {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.4;
}
.help-panel__tips li + li, .help-panel__steps li + li {
  margin-top: 4px;
}
.help-panel__copy {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.4;
}
.help-panel__link {
  color: var(--c-gold-soft, #fbca69);
  text-decoration: none;
}
.help-panel__link:hover, .help-panel__link:focus-visible {
  text-decoration: underline;
}
@media (max-width: 600px) {
  .help-panel__card {
    padding: 14px 14px 18px;
    max-height: calc(100dvh - 8px);
  }
}
/* topbar help button readability on small screens */
.topbar-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: 8px;
}
.topbar-help .icon {
  width: 16px;
  height: 16px;
}
/* hide the "Help" text label on very narrow phones, keep icon only */
@media (max-width: 420px) {
  .topbar-help-label {
    display: none;
  }
}
/* CREATION STEPPER (under topbar) */
.app-steps {
  margin-top: 4px;
}
/* Pill rail container */
.app-steps-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: rgba(10, 7, 12, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Individual step pill */
.app-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--c-text-soft);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Step index badge */
.app-step-index {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.5);
}
/* Step label text */
.app-step-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Active + complete states (hooked to main.js classes) */
.app-step--active {
  background: radial-gradient(circle at 0 0, #fbca69, #e45e32);
  color: #0b0b0b;
}
.app-step--active .app-step-index {
  border-color: rgba(0, 0, 0, 0.85);
  background: rgba(250, 250, 250, 0.96);
}
.app-step--complete {
  color: var(--c-gold-soft);
}
.app-step--complete .app-step-index {
  border-color: var(--c-gold-soft);
}
/* Slim horizontal scrollbar for stepper */
.app-steps-list::-webkit-scrollbar {
  height: 4px;
}
.app-steps-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}
/* Help panel: social + CTA links */
.help-panel__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.help-panel__social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12px;
  text-decoration: none;
  color: var(--c-text-soft);
  white-space: nowrap;
}
.help-panel__social-link .icon {
  width: 14px;
  height: 14px;
}
.help-panel__social-link:hover, .help-panel__social-link:focus-visible {
  color: var(--c-text);
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.8);
}
/* Help Panel Titles */
.help-panel__section h3 {
  font-size: 16px; /* Slight bump up */
  font-weight: 600; /* More authority */
  background: -webkit-linear-gradient(#3F8EFC, #eee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 18px 0 8px; /* More air above, less below */
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Add a subtle accent bar to the left of each title */
.help-panel__section h3::before {
  content: "";
  width: 3px;
  height: 1.4em;
  border-radius: 4px;
  background: linear-gradient(180deg, #f0caff 0%, #8a5fff 100%); /* Soft purple BTG-style */
  opacity: 0.85;
}
/* Optional: more spacing between sections for cleaner separation */
.help-panel__section {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.help-panel__section:last-of-type {
  border-bottom: none;
}
/* =========================================================
   Creation Stepper (under topbar)
   ======================================================= */
.app-steps {
  padding: 4px 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: radial-gradient(circle at top left, rgba(251, 202, 105, 0.08), #050307);
}
.app-steps {
  position: sticky;
  top: 56px; /* height of your topbar + spacing */
  z-index: 49; /* slightly under topbar's z-index: 50 */
  background: var(--c-bg); /* prevents text from showing through */
  padding: 6px 16px;
  border-bottom: 1px solid var(--c-border-subtle);
}
.app-steps-list {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
  padding: 6px 0 8px;
  list-style: none;
}
.app-step {
  position: relative;
  flex: 1 1 0;
  min-height: 40px; /* touch target */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--c-text-soft, #d2c7d8);
  font-size: 11px;
}
.app-step-index {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.app-step-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* active step */
.app-step--active {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(251, 202, 105, 0.7);
  color: var(--c-text, #f5f1f7);
}
.app-step--active .app-step-index {
  background: var(--g-ember-wine);
  border-color: transparent;
}
/* completed step */
.app-step--complete {
  background: rgba(0, 0, 0, 0.7);
  border-style: solid;
  border-width: 1px;
  border-color: rgba(0, 217, 126, 0.7);
  color: var(--c-text-soft, #d2c7d8);
}
.app-step--complete .app-step-index {
  background: rgba(0, 217, 126, 0.18);
  border-color: rgba(0, 217, 126, 0.85);
  position: relative;
}
/* checkmark for completed step (simple tick) */
.app-step--complete .app-step-index::before {
  content: "✓";
  font-size: 11px;
  color: #00d97e;
}
/* very small devices: compress */
@media (max-width: 420px) {
  .app-steps-list {
    gap: 4px;
  }
  .app-step {
    padding-inline: 6px;
  }
  .app-step-label {
    font-size: 10px;
  }
}
/* ===========================
   MOBILE TYPOGRAPHY TUNING
   =========================== */
@media (max-width: 768px) {
  /* Slightly larger base for readability */
  html, body {
    font-size: 15px; /* was 14px */
  }
  /* Top bar */
  .topbar h1 {
    font-size: 19px; /* was 18px */
  }
  .topbar-subtitle {
    font-size: 13px; /* was 12px */
  }
  /* Stepper under header */
  .app-steps {
    padding-inline: 16px;
  }
  .app-steps-list {
    overflow-x: hidden !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    border-radius: 16px; /* looks better when it becomes multi-line */
    padding: 8px;
    gap: 6px;
  }
  .app-step {
    flex: 1 1 calc(33.333% - 6px);
    justify-content: center;
    padding: 6px 8px;
  }
  .app-step-index {
    font-size: 12px;
  }
  .app-step-label {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  /* Cards & headings */
  .card h3 {
    font-size: 16px; /* keep strong but not huge */
  }
  .card h4 {
    font-size: 14px;
  }
  /* Buttons & tabs */
  .btn {
    font-size: 14px; /* was 13px */
    padding: 9px 16px; /* tiny bump for thumb comfort */
  }
  .btn.primary, .btn.danger {
    font-size: 14px;
  }
  .tabbar .tab {
    font-size: 12px; /* keep compact but readable */
  }
  /* Background & puppet tiles */
  .tile .cap {
    font-size: 13px; /* was 12px */
  }
  /* Panel labels (sliders etc.) */
  .effects-card .control > span, .group .control > span {
    font-size: 13px; /* was 12px */
  }
  .effects-card .control.switch span {
    font-size: 13px; /* keep consistent */
  }
  /* Tracking chip and small status text */
  .track-chip {
    font-size: 13px; /* was 12px */
  }
  /* Help panel body text */
  .help-panel__steps, .help-panel__tips, .help-panel__copy {
    font-size: 14px;
    line-height: 1.5;
  }
  .help-panel__section h3 {
    font-size: 13px;
  }
  /* Onboarding step hints – just a nudge up */
  .step-title {
    font-size: 13px;
  }
  .step-hint {
    font-size: 12.5px;
  }
}
/* Smaller phones: tighten layout slightly but keep 15–16px text */
@media (max-width: 420px) {
  .app {
    padding-inline: 12px;
  }
  .card {
    padding-inline: 10px;
  }
  .effects-card .control {
    grid-template-columns: 90px 1fr 44px;
  }
}
/* ===========================
   Effects panel – accordion UX
   =========================== */
.effects-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.effects-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.effects-card__header h3 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.effects-card__reset {
  white-space: nowrap;
}
.effects-card__intro {
  font-size: 13px;
  opacity: 0.85;
  margin: 0 0 4px;
}
/* Preset chips are already styled – just keep them snug */
.fx-icon {
  color: #FAF7F0;
}
.fx-preset-row {
  margin-bottom: 4px;
}
/* Accordion groups */
.fx-group {
  border-radius: 12px;
  margin: 6px 0;
  background: #120c16;
  border: 1px solid var(--c-border-subtle);
  overflow: hidden;
}
.fx-group-header {
  width: 100%;
  padding: 10px 10px 8px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  gap: 8px;
}
.fx-group-header-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fx-group-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fx-group-title {
  font-size: 14px;
  font-weight: 500;
  color: #FAF7F0;
}
.fx-group-subtitle {
  font-size: 11px;
  opacity: 0.75;
  color: #FAF7F0;
}
.fx-group .chevron {
  transition: transform 0.22s ease;
  color: #FAF7Fa0;
}
.fx-group--open .chevron {
  transform: rotate(180deg);
  color: #FAF7Fa0;
}
/* Smooth expand/collapse */
.fx-group-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 10px;
  transition: max-height 0.22s ease, padding-bottom 0.22s ease;
}
.fx-group--open .fx-group-body {
  padding-bottom: 10px;
  max-height: 600px; /* big enough to fit content */
}
/* Category-level sub-presets inside each FX group */
.fx-subpreset-row {
  display: flex;
  gap: 6px;
  padding: 4px 12px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.fx-subpreset-row::-webkit-scrollbar {
  height: 4px;
}
.fx-subpreset-row::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}
.fx-subpreset-chip {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 8, 8, 0.75);
  color: #f5f5f5;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.9;
  transition:
    background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}
.fx-subpreset-chip:active {
  transform: scale(0.96);
}
.fx-subpreset-chip.active {
  background: var(--g-ember-wine);
  border-color: transparent;
  opacity: 1;
}
/* Controls inside groups */
.effects-card .controls {
  display: grid;
  gap: 8px;
}
.effects-card .control {
  display: grid;
  grid-template-columns: 110px 1fr min(52px, 14%);
  gap: 8px;
  align-items: center;
}
.effects-card .control > span {
  color: var(--c-text-soft);
  font-size: 12px;
  opacity: 0.9;
}
.effects-card .control output {
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
.effects-card .control.switch {
  grid-template-columns: 1fr;
  gap: 4px;
}
.effects-card .control.switch span {
  font-size: 13px;
}
/* Sliders */
.effects-card input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #1f1f1f;
  border-radius: 999px;
  outline: none;
}
.effects-card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #f7f7f7;
  margin-top: -6px;
}
.effects-card input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #f7f7f7;
}
/* Select in particles */
.effects-card select {
  width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--c-border-subtle);
  background: #070509;
  color: inherit;
  font-size: 13px;
}
/* Mobile refinements */
@media (max-width: 768px) {
  .effects-card__header {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .effects-card__reset {
    font-size: 13px;
    padding-inline: 10px;
  }
  .effects-card .control {
    grid-template-columns: 96px 1fr 48px;
  }
}
.personality-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.personality-chip {
  flex: 1 1 calc(50% - 6px);
  min-width: 0;
  font-size: 0.75rem;
  padding: 6px 8px;
  border-radius: 999px;
  color: #E1CBC3;
  border: 1px solid var(--c-border-subtle, #2a222f);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.personality-chip.active {
  border-color: var(--c-accent, #ff5c9a);
  background:
    radial-gradient(circle at top left, rgba(255, 92, 154, 0.28), transparent), rgba(255, 255, 255, 0.04);
}
/* Puppet secondary tabs */
.tabs-sub {
  margin-top: 6px;
  display: flex;
  gap: 6px;
}
/* Puppet subpanels */
.pu-subpanel {
  margin-top: 10px;
}
/* Rows of preset chips (reuse personality-chip look) */
.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}
/* Optional: slightly tweak preset chips if you want them a bit smaller */
.preset-chip {
  font-size: 0.72rem;
  padding-inline: 10px;
}
/* Secondary tabs for effects */
.tabs-sub[data-fx-tabs] {
  margin-top: 6px;
  display: flex;
  gap: 6px;
}
.fx-subpanel {
  margin-top: 10px;
}
@media (max-width: 768px) {
  .app-steps-list {
    overflow-x: hidden !important; /* overrides overflow-x:auto */
    overflow-y: visible;
    -webkit-overflow-scrolling: auto;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    padding: 8px;
    gap: 8px;
    border-radius: 16px;
  }
  .app-step {
    flex: 0 0 calc(33.333% - 8px) !important; /* 3 per row */
    white-space: normal !important; /* allow wrapping */
    justify-content: center;
    padding: 8px 10px;
    min-height: 44px;
  }
  .app-step-label {
    white-space: normal !important; /* overrides nowrap */
    overflow: visible;
    text-overflow: unset;
    text-align: center;
    line-height: 1.1;
  }
}
/* ===== Mobile: force the creation stepper to ONE row (3 across), no scroll, no wrap ===== */
@media (max-width: 768px) {
  .app-steps-list {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important; /* <-- prevents 2-row wrap */
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 16px !important;
  }
  .app-step {
    box-sizing: border-box !important; /* <-- fixes calc/padding wrap issues */
    flex: 1 1 0 !important; /* <-- each step takes 1/3 */
    min-width: 0 !important; /* <-- allows label ellipsis */
    justify-content: center !important;
    padding: 8px 10px !important;
    min-height: 44px !important;
  }
  .app-step-label {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }
}
/* NO step-list scrolling */
@media (max-width: 420px), (max-height: 700px) {
  /* tighten the sheet overall */
  .onboarding-card.onboarding-card--sheet {
    padding: 12px 12px 10px !important;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 8px) !important;
  }
  /* reduce hero footprint */
  .onboarding-card--sheet .onboarding-hero {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    gap: 10px !important;
  }
  .onboarding-hero-text h2 {
    font-size: 16px !important;
  }
  .onboarding-hero-text p {
    font-size: 12px !important;
  }
  /* tighten headings + kicker */
  .onboarding-steps h3 {
    margin: 4px 0 2px !important;
    font-size: 12px !important;
  }
  .onboarding-kicker {
    margin: 0 0 6px !important;
    font-size: 11px !important;
  }
  /* IMPORTANT: remove scroll from the list */
  .onboarding-card--sheet .onboarding-step-list {
    overflow: visible !important; /* was overflow-y:auto on mobile */
    padding-bottom: 0 !important;
    margin: 2px 0 8px !important;
  }
  /* tighten each step tile */
  .onboarding-step-list li {
    padding: 6px 8px 6px 28px !important;
    margin-bottom: 6px !important;
    border-radius: 10px !important;
  }
  .onboarding-step-list li::before {
    top: 7px !important;
    left: 7px !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
  }
  .step-title {
    font-size: 12px !important;
    margin-bottom: 1px !important;
  }
  /* Clamp hints so the list stays short (prevents overflow on iPhone 6) */
  .step-hint {
    font-size: 11px !important;
    line-height: 1.15 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important; /* <= key */
    overflow: hidden !important;
  }
  /* privacy callout: compress */
  .privacy-callout {
    padding: 8px 8px !important;
    gap: 8px !important;
  }
  .privacy-text h3 {
    font-size: 12px !important;
  }
  .privacy-text p {
    font-size: 11px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
  /* footer: keep CTA visible */
  .onboarding-card--sheet .onboarding-footer {
    margin-top: 8px !important;
    padding-top: 8px !important;
    gap: 8px !important;
  }
  #btn-close-onboarding {
    padding: 10px 14px !important;
  }
}
/* Presets row (horizontal "tab strip") */
.bg-presets-row {
  display: flex;
  gap: .5rem;
  padding: .6rem .9rem .75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  /* mimic iOS tabbar spacing */
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  /* optional: panel glass backing */
  background: rgba(0, 0, 0, .14);
  backdrop-filter: blur(14px);
}
.bg-presets-row::-webkit-scrollbar {
  display: none;
}
.bg-presets-row {
  scrollbar-width: none;
}
/* ===========================
   BACKGROUNDS: PRESET LOOKS TRAY
   (matches Background thumbnail sizing)
   =========================== */
.bg-presets-section {
  margin-top: 10px;
  border: 1px solid var(--c-border-subtle);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, .10);
}
.bg-presets-head {
  padding: 10px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bg-presets-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text);
}
.bg-presets-sub {
  font-size: 12px;
  color: var(--c-text-muted);
}
/* Row: iOS-ish horizontal rail */
.bg-presets-section .bg-presets-row {
  padding: 8px 10px 12px;
  gap: 8px;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 0;
}
/* Make preset tiles match Background tiles (120w + 80h thumb) */
.bg-presets-section .preset-tile {
  width: 120px;
  padding: 0;
  border-radius: 10px;
  background: #141016; /* same as .tile */
  border: 1px solid var(--c-border-subtle);
  box-shadow: none;
  backdrop-filter: none;
  gap: 0;
}
.bg-presets-section .preset-tile__thumb {
  border-radius: 0;
  aspect-ratio: auto;
  height: 80px; /* matches .tile img height */
}
.bg-presets-section .preset-tile__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #222;
}
.bg-presets-section .preset-tile__label {
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-soft);
}
/* Keep featured + active states */
.bg-presets-section .preset-tile.active {
  border-color: rgba(251, 202, 105, .55);
  box-shadow: 0 0 0 1px rgba(251, 202, 105, .35);
}
.bg-presets-section .preset-tile.featured {
  border-color: rgba(251, 202, 105, .30);
}
/* onboarding V3 */
.onboarding {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: end center;
}
.onboarding[hidden] {
  display: none !important;
}
.onboarding::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 10%, rgba(127, 23, 236, 0.22), transparent 45%), radial-gradient(circle at 80% 20%, rgba(70, 138, 243, 0.18), transparent 40%), rgba(0, 0, 0, 0.60);
  backdrop-filter: blur(6px);
}
.onboarding-card {
  position: relative;
  z-index: 1;
  width: min(720px, 94vw);
  background: rgba(12, 10, 18, 0.92);
  color: var(--c-text, #FAF7F0);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.78);
  border-radius: 18px 18px 0 0;
  padding: 14px 14px 12px;
  overflow: hidden;
}
/* Make the onboarding content layout resilient on small phones */
.onboarding-card--sheet {
  max-height: min(82vh, 740px);
  display: flex;
  flex-direction: column;
}
.onboarding-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px; /* avoids scrollbar overlaying content */
}
/* Topbar */
.onboarding-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.onboarding-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.95;
}
.onboarding-mark {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fbca69, #e45e32, #7f17ec, #468af3);
  box-shadow: 0 0 18px rgba(88, 71, 249, 0.35);
}
.onboarding-brandname {
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 12px;
}
.onboarding-x {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.onboarding-x:hover {
  background: rgba(255, 255, 255, 0.10);
}
.onboarding-x .icon {
  width: 18px;
  height: 18px;
}
/* Hero */
.onboarding-hero--v2 {
  align-items: flex-start;
  margin-bottom: 12px;
}
#onboarding-title {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: none;
}
.onboarding-subtitle {
  margin: 0 0 10px;
  font-size: 12.8px;
  opacity: 0.9;
}
.onboarding-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
}
.badge-pill .icon {
  width: 14px;
  height: 14px;
  opacity: 0.95;
}
/* Preview simulator (lightweight, no assets needed) */
.onboarding-preview {
  margin: 2px 0 12px;
}
.preview-sim {
  position: relative;
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background:
    radial-gradient(circle at 10% 10%, rgba(251, 202, 105, 0.20), transparent 45%), radial-gradient(circle at 90% 10%, rgba(88, 71, 249, 0.18), transparent 50%), linear-gradient(180deg, rgba(20, 14, 30, 0.90), rgba(10, 8, 14, 0.95));
  overflow: hidden;
}
.preview-sim__bg {
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(circle at 30% 30%, rgba(228, 94, 50, 0.25), transparent 45%), radial-gradient(circle at 70% 40%, rgba(70, 138, 243, 0.18), transparent 42%), radial-gradient(circle at 50% 90%, rgba(127, 23, 236, 0.18), transparent 55%);
  filter: blur(2px);
  opacity: 0.9;
}
.preview-sim__frame {
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  border: 1px solid rgba(251, 202, 105, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.preview-sim__puppet {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  margin: 8px 0 34px 8px;
  background: linear-gradient(135deg, rgba(251, 202, 105, 0.85), rgba(228, 94, 50, 0.85));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: previewPuppetFloat 2.6s ease-in-out infinite;
}
.preview-sim__puppet::before {
  content: "";
  position: absolute;
  inset: 16px 14px 22px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
}
.preview-sim__puppet::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.40);
  animation: previewMouth 0.85s ease-in-out infinite;
}
@keyframes previewPuppetFloat {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-6px) rotate(1deg);
  }
}
@keyframes previewMouth {
  0%, 100% {
    transform: scaleX(0.75);
    opacity: 0.70;
  }
  50% {
    transform: scaleX(1.08);
    opacity: 1;
  }
}
.preview-sim__spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(251, 202, 105, 0.9);
  filter: blur(0.2px);
  opacity: 0.0;
  animation: previewSpark 2.2s ease-in-out infinite;
}
.preview-sim__spark {
  top: 18px;
  right: 24px;
}
.preview-sim__spark.s2 {
  top: 46px;
  right: 56px;
  animation-delay: .35s;
  background: rgba(70, 138, 243, 0.9);
}
.preview-sim__spark.s3 {
  top: 26px;
  right: 92px;
  animation-delay: .7s;
  background: rgba(127, 23, 236, 0.9);
}
@keyframes previewSpark {
  0% {
    transform: translateY(6px) scale(0.6);
    opacity: 0.0;
  }
  35% {
    opacity: 0.85;
  }
  55% {
    opacity: 0.15;
  }
  100% {
    transform: translateY(-18px) scale(1.0);
    opacity: 0.0;
  }
}
.preview-sim__caption {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.cap-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.45);
}
.cap-text {
  font-size: 12px;
  opacity: 0.92;
}
/* Tiles */
.onboarding-steps--tiles h3 {
  margin: 2px 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.92;
}
.onboarding-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.onboarding-tile {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.tile-ic {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(88, 71, 249, 0.16);
  border: 1px solid rgba(88, 71, 249, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile-ic .icon {
  width: 18px;
  height: 18px;
}
.tile-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 1px;
}
.tile-sub {
  font-size: 12px;
  opacity: 0.86;
}
.onboarding-microtip {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  opacity: 0.9;
}
.onboarding-microtip .icon {
  width: 14px;
  height: 14px;
  opacity: 0.95;
}
/* Footer */
.onboarding-footer--v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  flex: 0 0 auto;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.onboarding-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.btn-onboarding-primary {
  flex: 1 1 auto;
  width: 100%;
  padding: 14px 0;
  font-size: 16px;
  border-radius: 14px;
}
.btn-onboarding-secondary {
  flex: 0 0 auto;
  padding: 12px 14px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.onboarding-optout {
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  opacity: 0.92;
}
/* Wider layouts: tiles can sit 3-up */
@media (min-width: 520px) {
  .onboarding-tiles {
    grid-template-columns: repeat(3, 1fr);
  }
  .onboarding-tile {
    align-items: flex-start;
  }
  .tile-ic {
    margin-top: 2px;
  }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .preview-sim__puppet, .preview-sim__spark, .onboarding-card {
    animation: none !important;
  }
}
/* One-shot pulse hint (used by onboarding demo) */
.pulse-once {
  animation: btgPulseOnce 1.1s ease-out 1;
}
@keyframes btgPulseOnce {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(88, 71, 249, 0);
  }
  35% {
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 0 0 10px rgba(88, 71, 249, 0.15);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(88, 71, 249, 0);
  }
}
.onboarding-card {
  position: relative;
  overflow: hidden;
}
.onboarding-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.onboarding-x .icon {
  width: 18px;
  height: 18px;
  opacity: 0.9;
}
.onboarding-preview {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.preview-stage {
  position: relative;
  height: 118px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(251, 202, 105, 0.12), rgba(0, 0, 0, 0.25)), linear-gradient(135deg, rgba(105, 39, 70, 0.35), rgba(51, 18, 51, 0.65));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.preview-bg {
  position: absolute;
  inset: -20px;
  background: conic-gradient(from 180deg, rgba(251, 202, 105, 0.18), rgba(228, 94, 50, 0.12), rgba(105, 39, 70, 0.20), rgba(51, 18, 51, 0.26));
  filter: blur(12px);
  animation: obSpin 7s linear infinite;
  opacity: 0.85;
}
.preview-puppet {
  position: absolute;
  left: 18px;
  bottom: 14px;
  width: 78px;
  height: 78px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(251, 202, 105, 0.95), rgba(228, 94, 50, 0.85));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 65%;
  animation: obBob 2.2s ease-in-out infinite;
}
.preview-puppet::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.75);
  box-shadow: 30px 0 0 rgba(0, 0, 0, 0.75);
}
.preview-puppet::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 42px;
  width: 42px;
  height: 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.70);
  transform: scaleX(0.9);
  animation: obTalk 0.32s ease-in-out infinite;
}
.preview-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 40%, rgba(251, 202, 105, 0.20), transparent 50%), radial-gradient(circle at 85% 80%, rgba(228, 94, 50, 0.16), transparent 55%);
  pointer-events: none;
}
.preview-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ob-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.88);
}
.ob-pill .icon {
  width: 14px;
  height: 14px;
  opacity: 0.95;
}
.onboarding-body {
  margin-top: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.onboarding-step-list {
  list-style: none;
  padding: 10px 0 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.ob-step {
  display: flex;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.16);
}
.ob-step-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(251, 202, 105, 0.95), rgba(228, 94, 50, 0.75));
  color: #0b0b0b;
  flex: 0 0 auto;
}
.ob-step-ico .icon {
  width: 18px;
  height: 18px;
}
.ob-step-txt .step-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
}
.ob-step-txt .step-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.25;
}
.ob-tip {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(251, 202, 105, 0.22);
  background: rgba(251, 202, 105, 0.08);
  color: rgba(255, 255, 255, 0.90);
  font-size: 12px;
}
.ob-tip .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  opacity: 0.95;
}
.onboarding-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
}
.onboarding-optout {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
}
.onboarding-optout input {
  transform: translateY(1px);
}
.onboarding-actions {
  display: flex;
  gap: 10px;
}
.onboarding-actions .btn {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 768px) {
  .onboarding-card.onboarding-card--sheet {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .onboarding-actions {
    flex-direction: column;
  }
}
@keyframes obSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes obBob {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-3px) rotate(1.2deg);
  }
}
@keyframes obTalk {
  0%, 100% {
    transform: scaleX(0.85);
  }
  50% {
    transform: scaleX(1.05);
  }
}
/* ===== Guided Tour spotlight (robust across overflow) ===== */
.tour-layer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}
.tour-layer.is-on {
  display: block;
}
.tour-dim {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.tour-spot {
  position: fixed;
  border-radius: 16px;
  outline: 2px solid rgba(251, 202, 105, 0.55);
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.50), 0 0 0 4px rgba(251, 202, 105, 0.25), 0 10px 34px rgba(0, 0, 0, 0.55);
  background: rgba(251, 202, 105, 0.04);
  pointer-events: none;
}
.tour-tip {
  position: fixed;
  width: min(380px, calc(100vw - 24px));
  background: rgba(12, 10, 18, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
}
.tour-tip .tour-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.tour-tip .tour-title {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.2px;
}
.tour-tip .tour-skip {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 12px;
}
.tour-tip .tour-body {
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 10px;
}
.tour-tip .tour-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tour-tip .tour-progress {
  margin-left: auto;
  font-size: 12px;
  opacity: 0.75;
}
/* Sheet should be a flex column; footer always visible */
.onboarding-card--sheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px);
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
/* Only the body scrolls */
.onboarding-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* Footer is fixed in the sheet */
.onboarding-footer {
  flex: 0 0 auto;
}
/* Animated preview (onboarding) */
.onboarding-preview {
  width: 100%;
  margin-left: -18px;
  margin-right: -18px;
  width: calc(100% + 36px);
}
.onboarding-preview video, .onboarding-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Video or GIF fills the frame */
.onboarding-previewMedia__asset {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: translateZ(0); /* reduce shimmer on iOS */
}
/* Caption overlay */
.onboarding-previewMedia__caption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.onboarding-previewMedia__caption .cap-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--c-gold-soft);
  box-shadow: 0 0 10px rgba(251, 202, 105, 0.55);
  flex: 0 0 auto;
}
.onboarding-previewMedia__caption .cap-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Extra-small phones: keep it tighter */
@media (max-width: 380px) {
  .onboarding-previewMedia {
    max-height: clamp(170px, 30vh, 220px);
  }
  .onboarding-previewMedia__caption {
    height: 38px;
    font-size: 12px;
  }
}
.onboarding-previewMedia {
  aspect-ratio: 16 / 9;
  max-height: clamp(160px, 28vh, 220px);
}
/* =========================
   Product Tour v1 (spotlight)
   ========================= */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.tour-overlay.is-open {
  display: block;
}
.tour-overlay .tour-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .25);
}
.tour-overlay .tour-spotlight {
  position: absolute;
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62);
  outline: 2px solid rgba(251, 202, 105, .95);
  outline-offset: 2px;
  pointer-events: none;
}
.tour-overlay .tour-pop {
  position: absolute;
  max-width: min(360px, calc(100vw - 24px));
  background: rgba(20, 20, 24, .92);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  padding: 14px 14px 12px;
  box-shadow: 0 14px 50px rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tour-pop h4 {
  margin: 0 0 6px;
  font-size: 15px;
}
.tour-pop p {
  margin: 0 0 10px;
  color: var(--c-text-soft);
  font-size: 13px;
  line-height: 1.35;
}
.tour-pop .tour-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--c-text-muted);
  font-size: 12px;
}
.tour-pop .tour-actions {
  display: flex;
  gap: 8px;
}
.tour-pop .tour-actions .btn {
  flex: 1;
  justify-content: center;
}
.tour-pop .tour-actions .btn.ghost {
  border: 1px solid rgba(255, 255, 255, .14);
}
body.tour-lock {
  overflow: hidden !important;
  touch-action: none;
}

.group .controls{
  display: grid;
  gap: 12px;
  padding-block: 4px;
}

/* Give each control row vertical padding so sliders aren't stacked tight */
.group .controls .control{
  padding: 6px 0;
}

/* Switch controls get a touch more space */
.group .controls .control.switch{
  padding: 8px 0;
}

/* Mobile: increase separation + make slider sit on its own line (much nicer on phones) */
@media (max-width: 520px){
  .group .controls{
    gap: 14px;
  }

  .group .controls .control{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 8px;
    align-items: center;
    padding: 10px 0;
  }

  /* Put the actual control (range/select) on its own full-width row */
  .group .controls .control input[type="range"],
  .group .controls .control select{
    grid-column: 1 / -1;
    width: 100%;
  }

  /* Keep the value readout tucked to the right when present (Effects panel) */
  .group .controls .control output{
    justify-self: end;
  }

  /* Switch rows stay single-column */
  .group .controls .control.switch{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}