/* ===========================
   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;
}
/* 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: rgba(0,0,0,0.60); }
.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.60);
  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;
}