/* ─────────────────────────────────────────────────────────────────
   EMITR · Floating Layout (v3)
   Loaded after emtir-design-v2.css. Repositions and restyles the
   EXISTING chrome to match the design's floating-panels look:
     · Site header → floating pill toolbar at top
     · Icon-rail sidebar → floating glass column on the left
     · Active panel container → floating glass card on the right
     · Random / fullscreen / save / compositions buttons stay floating
   FUNCTION IS UNCHANGED. Sidebar icons still switch which panel is
   active. Presets, export, get-started, save, compositions, and
   sign-in flows all behave exactly as before.
   ───────────────────────────────────────────────────────────────── */

@media (min-width: 769px) {

  body { background: var(--bvc-bg-deep); }

  /* Canvas fills the viewport. Original stage was offset 48px down to
     leave room for the old fixed header bar; the new pill toolbar
     floats over the canvas (z-index 200) so the offset is dead space.
     Removing it also fixes fullscreen mode, where the offset rendered
     as a black strip at the top making it look like fullscreen didn't
     engage. */
  #stageWrap {
    inset: 0 !important;
  }
  #stageInner {
    width: 100% !important;
    height: 100% !important;
  }

  /* ── Top header → floating pill ──────────────────────────────── */
  .siteHeader {
    top: 18px !important;
    left: 18px !important;
    right: 18px !important;
    height: 44px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: rgba(10, 15, 20, 0.6) !important;
    border: 1px solid var(--bvc-line) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
  }
  .headerWordmark {
    font-size: 13px !important;
    color: var(--bvc-text);
  }
  .emitrNav a {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }

  /* ── Sidebar icon rail → floating glass column, vertically centered
     so onboarding tooltips next to the buttons have headroom above
     and below to land in. ──────────────────────────────────────── */
  .settings-sidebar {
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 18px !important;
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100vh - 100px) !important;
    padding: 8px !important;
    gap: 4px !important;
    border-radius: 14px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
      linear-gradient(180deg, var(--bvc-bg-panel), var(--bvc-bg-panel-2)) !important;
    border: 1px solid var(--bvc-card-border) !important;
    -webkit-backdrop-filter: var(--bvc-blur-card);
    backdrop-filter: var(--bvc-blur-card);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
  }
  .sidebar-btn {
    width: calc(32px * var(--ui-scale, 1)) !important;
    height: calc(32px * var(--ui-scale, 1)) !important;
    min-height: calc(32px * var(--ui-scale, 1)) !important;
    padding: calc(6px * var(--ui-scale, 1)) !important;
    border-radius: calc(8px * var(--ui-scale, 1)) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    color: var(--bvc-muted-2) !important;
    transition: background var(--bvc-dur-fast) var(--bvc-ease-out),
                border-color var(--bvc-dur-fast) var(--bvc-ease-out),
                color var(--bvc-dur-fast) var(--bvc-ease-out);
  }
  .sidebar-btn:hover {
    background: var(--bvc-bg-glass-hi) !important;
    border-color: var(--bvc-line-hi) !important;
    color: var(--bvc-text) !important;
  }
  .sidebar-btn[data-panel].active,
  .sidebar-btn.active {
    background: var(--bvc-bg-glass-hi) !important;
    border-color: var(--bvc-line-hi) !important;
    color: var(--bvc-text) !important;
  }

  /* Active sidebar button picks up the matching panel's category color
     (the same hue used inside that panel's collapse indicators, accent
     borders, etc.) so the user can see at a glance which panel is open. */
  .sidebar-btn[data-panel="particles"].active {
    background: rgba(var(--color-red-rgb), 0.14) !important;
    border-color: rgba(var(--color-red-rgb), 0.55) !important;
    color: rgba(var(--color-red-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-red-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="emitter"].active {
    background: rgba(var(--color-pink-rgb), 0.14) !important;
    border-color: rgba(var(--color-pink-rgb), 0.55) !important;
    color: rgba(var(--color-pink-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-pink-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="forces"].active {
    background: rgba(var(--color-violet-rgb), 0.14) !important;
    border-color: rgba(var(--color-violet-rgb), 0.55) !important;
    color: rgba(var(--color-violet-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-violet-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="shading"].active {
    background: rgba(var(--color-purple-rgb), 0.14) !important;
    border-color: rgba(var(--color-purple-rgb), 0.55) !important;
    color: rgba(var(--color-purple-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-purple-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="camera"].active {
    background: rgba(var(--color-indigo-rgb), 0.14) !important;
    border-color: rgba(var(--color-indigo-rgb), 0.55) !important;
    color: rgba(var(--color-indigo-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-indigo-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="background"].active {
    background: rgba(var(--color-blue-rgb), 0.14) !important;
    border-color: rgba(var(--color-blue-rgb), 0.55) !important;
    color: rgba(var(--color-blue-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-blue-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="animation"].active {
    background: rgba(var(--color-sky-rgb), 0.14) !important;
    border-color: rgba(var(--color-sky-rgb), 0.55) !important;
    color: rgba(var(--color-sky-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-sky-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="export"].active {
    background: rgba(var(--color-teal-rgb), 0.14) !important;
    border-color: rgba(var(--color-teal-rgb), 0.55) !important;
    color: rgba(var(--color-teal-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-teal-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="presets"].active {
    background: rgba(var(--color-green-rgb), 0.14) !important;
    border-color: rgba(var(--color-green-rgb), 0.55) !important;
    color: rgba(var(--color-green-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-green-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="save"].active,
  .sidebar-btn[data-panel="compositions"].active {
    background: rgba(var(--color-yellow-rgb), 0.14) !important;
    border-color: rgba(var(--color-yellow-rgb), 0.55) !important;
    color: rgba(var(--color-yellow-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-yellow-rgb), 0.35) !important;
  }

  /* ── Panel container → floating glass card on the right,
     vertically centered to mirror the sidebar. ────────────────── */
  .settings-panel-container {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;
    max-height: calc(100vh - 100px) !important;
    height: auto !important;
    width: auto !important;
    z-index: 99 !important;
  }

  /* Active panel = single floating glass card with fixed width. */
  .settings-panel-container .panel.active {
    width: calc(320px * var(--ui-scale, 1));
    max-height: 100%;
    overflow-y: auto;
    border-radius: 16px !important;
    border: 1px solid var(--bvc-card-border) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
      linear-gradient(180deg, var(--bvc-bg-panel), var(--bvc-bg-panel-2)) !important;
    -webkit-backdrop-filter: var(--bvc-blur-card);
    backdrop-filter: var(--bvc-blur-card);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
    filter: none !important;
  }

  /* Panel header eyebrow */
  .settings-panel-container .panel .panel-header {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--bvc-line-soft) !important;
    padding: calc(14px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) !important;
    margin: 0 !important;
  }
  .settings-panel-container .panel .panel-header span {
    font-family: var(--bvc-font-title) !important;
    font-size: calc(9px * var(--ui-scale, 1)) !important;
    font-weight: var(--bvc-fw-bold) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--bvc-muted-2) !important;
    background: none !important;
    -webkit-text-fill-color: var(--bvc-muted-2) !important;
  }

  /* ── Random button: lives inside the sidebar icon rail, styled
     to match the other panel-toggle buttons. ─────────────────── */
  .settings-sidebar .random-btn {
    position: static !important;
    width: calc(32px * var(--ui-scale, 1)) !important;
    height: calc(32px * var(--ui-scale, 1)) !important;
    min-height: calc(32px * var(--ui-scale, 1)) !important;
    padding: calc(6px * var(--ui-scale, 1)) !important;
    border-radius: calc(8px * var(--ui-scale, 1)) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    color: var(--bvc-muted-2) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background var(--bvc-dur-fast) var(--bvc-ease-out),
                border-color var(--bvc-dur-fast) var(--bvc-ease-out),
                color var(--bvc-dur-fast) var(--bvc-ease-out);
  }
  .settings-sidebar .random-btn:hover {
    background: var(--bvc-bg-glass-hi) !important;
    border-color: var(--bvc-line-hi) !important;
    color: var(--bvc-text) !important;
  }
  .settings-sidebar .random-btn svg {
    width: calc(18px * var(--ui-scale, 1)) !important;
    height: calc(18px * var(--ui-scale, 1)) !important;
  }

  /* ── Slider track + thumb ─────────────────────────────────────
     Override existing per-panel red/pink/violet gradient tracks. */
  .settings-panel-container .panel input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 16px !important;
    background: transparent !important;
    border: 0 !important;
    margin: 4px 0 !important;
    outline: none !important;
    cursor: pointer;
  }
  .settings-panel-container .panel input[type="range"]::-webkit-slider-runnable-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: var(--bvc-bg-chip) !important;
    border: 1px solid var(--bvc-line) !important;
    box-shadow: none !important;
  }
  .settings-panel-container .panel input[type="range"]::-moz-range-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: var(--bvc-bg-chip) !important;
    border: 1px solid var(--bvc-line) !important;
    box-shadow: none !important;
  }
  .settings-panel-container .panel input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 2px solid var(--bvc-sky) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    margin-top: -5px !important;
    cursor: pointer;
  }
  .settings-panel-container .panel input[type="range"]::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 2px solid var(--bvc-sky) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    cursor: pointer;
  }
  .settings-panel-container .panel input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  }
  .settings-panel-container .panel input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  }

  /* ── Pill toggle ─────────────────────────────────────────────── */
  .settings-panel-container .panel .pill-toggle {
    width: 30px !important;
    height: 16px !important;
    border-radius: 999px !important;
    background: var(--bvc-bg-chip) !important;
    border: 1px solid var(--bvc-line) !important;
  }
  .settings-panel-container .panel .pill-toggle::before {
    width: 12px !important;
    height: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  }

  /* ── Selects + text inputs: chip surface ─────────────────────── */
  .settings-panel-container .panel select,
  .settings-panel-container .panel input[type="text"],
  .settings-panel-container .panel input[type="number"] {
    background: var(--bvc-bg-chip) !important;
    border: 1px solid var(--bvc-line) !important;
    color: var(--bvc-text) !important;
    border-radius: 8px !important;
    padding: 8px 32px 8px 10px !important;
    font-family: var(--bvc-font-body) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    transition: border-color var(--bvc-dur-fast) var(--bvc-ease-out);
  }
  /* Hide the underlying <select> when chips are rendered above it.
     The chips dispatch change events on the select so all bindings
     keep working unchanged. */
  .settings-panel-container .panel select.bvc-chips-source {
    display: none !important;
  }

  /* Chip group: design-system pattern for picking between options. */
  .settings-panel-container .panel .bvc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .settings-panel-container .panel .bvc-chip {
    padding: 6px 12px;
    font-family: var(--bvc-font-title);
    font-size: 10px;
    font-weight: var(--bvc-fw-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bvc-muted-2);
    background: var(--bvc-bg-chip);
    border: 1px solid var(--bvc-line);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--bvc-dur-fast) var(--bvc-ease-out),
                border-color var(--bvc-dur-fast) var(--bvc-ease-out),
                color var(--bvc-dur-fast) var(--bvc-ease-out);
    white-space: nowrap;
  }
  .settings-panel-container .panel .bvc-chip:hover {
    color: var(--bvc-muted);
    border-color: var(--bvc-line-hi);
  }
  .settings-panel-container .panel .bvc-chip.is-active {
    background: var(--bvc-bg-glass-hi);
    border-color: var(--bvc-line-hi);
    color: var(--bvc-text);
  }
  .settings-panel-container .panel .bvc-chip.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  /* Native dropdown options: keep popup sized like the trigger.
     Chrome on macOS inherits font from the select; force it small. */
  .settings-panel-container .panel select option,
  .settings-panel-container .panel select optgroup {
    font-family: var(--bvc-font-body) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    padding: 4px 8px !important;
    background: var(--bvc-bg-deep) !important;
    color: var(--bvc-text) !important;
  }
  .settings-panel-container .panel select:focus,
  .settings-panel-container .panel input[type="text"]:focus,
  .settings-panel-container .panel input[type="number"]:focus {
    outline: none;
    border-color: var(--bvc-sky) !important;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15);
  }

  /* Control labels: eyebrow type */
  .settings-panel-container .panel .control > label,
  .settings-panel-container .panel .control-shape > label {
    font-family: var(--bvc-font-title);
    font-size: 9px;
    font-weight: var(--bvc-fw-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bvc-muted-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Modal compliance (Plan / Upgrade, errors, general gate cards)
   Override gate-ui.js inline styling so all modal cards use the
   floating-panels glass treatment. Composition modals already paint
   themselves directly — this layer only changes things that aren't
   custom-styled.
   ───────────────────────────────────────────────────────────────── */

/* ── Plan modal: glass card, no pink landing border ─────────────── */
#planModal .gate-card {
  border-radius: 22px !important;
  border: 1px solid var(--bvc-line-hi) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, var(--bvc-bg-panel), var(--bvc-bg-panel-2)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 60px 200px rgba(0, 0, 0, 0.6), 0 20px 60px rgba(0, 0, 0, 0.4) !important;
  filter: none !important;
  padding: 28px !important;
}

/* Title "EMITR" → sky→violet gradient (design system) */
#planModal .gate-title,
#planModal .gate-title span,
#planModal h1,
#planModal h2 {
  background: var(--bvc-gradient) !important;
  background-image: var(--bvc-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Tier cards (Free / Pro) */
#planModal .plan-tier-card {
  border-radius: 16px !important;
  border: 1px solid var(--bvc-card-border) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    var(--bvc-bg-chip) !important;
  box-shadow: none !important;
}
#planModal .plan-tier-card.pro-card {
  border-color: rgba(14, 165, 233, 0.28) !important;
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.06), inset 0 0 32px rgba(14, 165, 233, 0.04) !important;
}
#planModal .plan-tier-card.pro-card::before {
  /* Tone down the rotating multi-color glow */
  background:
    radial-gradient(340px 200px at 10% 10%, rgba(14, 165, 233, 0.12), transparent 65%),
    radial-gradient(300px 200px at 90% 20%, rgba(168, 139, 250, 0.10), transparent 65%) !important;
}

/* Tier label: eyebrow style. Pro keeps gradient text. */
#planModal .plan-tier-card > div:first-child {
  font-family: var(--bvc-font-title) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--bvc-muted-2) !important;
}
#planModal .plan-tier-card.pro-card > div:first-child {
  background: var(--bvc-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Section labels inside tier cards */
#planModal .plan-section-label {
  color: var(--bvc-muted-3) !important;
}
#planModal .pro-card .plan-section-label {
  color: rgba(14, 165, 233, 0.55) !important;
}

/* Tier feature rows */
#planModal .plan-feat-row {
  color: var(--bvc-muted) !important;
  border-bottom-color: var(--bvc-line-soft) !important;
}
#planModal .plan-feat-row.is-locked {
  color: var(--bvc-muted-3) !important;
}
#planModal .plan-feat-icon.yes {
  background: rgba(14, 165, 233, 0.12) !important;
  color: var(--bvc-sky) !important;
}
#planModal .plan-feat-icon.no {
  background: var(--bvc-bg-chip) !important;
  color: var(--bvc-muted-3) !important;
}

/* Tagline */
#planModal .plan-tagline,
#planModal [class*="tagline"] {
  color: var(--bvc-muted-2) !important;
}

/* Choice buttons (yearly / monthly / continue / sign-in) */
#planModal .plan-choose-btn {
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-family: var(--bvc-font-title) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}
/* Force readable text on every choice button — the inline JS sets
   sky/violet inner label colors which collide with the new pill bg. */
#planModal .plan-choose-btn > div { color: inherit !important; }
#planModal .plan-choose-btn > div > div {
  font-family: var(--bvc-font-title) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: inherit !important;
}

/* Highlight (yearly / start trial) → sky→violet gradient pill */
#planModal .pro-card .plan-choose-btn[style*="14,165,233"],
#planModal .pro-card .plan-choose-btn[style*="14, 165, 233"] {
  background: var(--bvc-gradient) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: 0 0 24px rgba(14, 165, 233, 0.4) !important;
}
#planModal .pro-card .plan-choose-btn[style*="14,165,233"]:hover,
#planModal .pro-card .plan-choose-btn[style*="14, 165, 233"]:hover {
  filter: none !important;
  box-shadow: 0 0 32px rgba(14, 165, 233, 0.55) !important;
  transform: none !important;
}
/* Inside the highlight pill, savings tag uses subtle white-on-gradient */
#planModal .pro-card .plan-choose-btn[style*="14,165,233"] > div > div:nth-child(2),
#planModal .pro-card .plan-choose-btn[style*="14, 165, 233"] > div > div:nth-child(2) {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

/* Non-highlight (monthly / "or" buttons) → ghost card */
#planModal .pro-card .plan-choose-btn[style*="168,85,247"],
#planModal .pro-card .plan-choose-btn[style*="168, 85, 247"] {
  background: var(--bvc-bg-chip) !important;
  border: 1px solid var(--bvc-line) !important;
  color: var(--bvc-text) !important;
}
#planModal .pro-card .plan-choose-btn[style*="168,85,247"]:hover,
#planModal .pro-card .plan-choose-btn[style*="168, 85, 247"]:hover {
  border-color: var(--bvc-line-hi) !important;
}
/* Inside ghost card, secondary text */
#planModal .pro-card .plan-choose-btn[style*="168,85,247"] > div > div:nth-child(2),
#planModal .pro-card .plan-choose-btn[style*="168, 85, 247"] > div > div:nth-child(2) {
  color: var(--bvc-muted-2) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

/* Free card buttons */
#planModal .plan-tier-card:not(.pro-card) .plan-choose-btn {
  background: transparent !important;
  border: 1px solid var(--bvc-line) !important;
  color: var(--bvc-muted) !important;
}
#planModal .plan-tier-card:not(.pro-card) .plan-choose-btn:hover {
  border-color: var(--bvc-line-hi) !important;
  color: var(--bvc-text) !important;
}

/* ── Generic gate-card (errors, web-gpu, gate screens) ──────────── */
.gate-overlay:not(#saveCompositionModal):not(#compositionsModal):not(#deleteCompositionConfirm) .gate-card:not(.gate-card--error) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, var(--bvc-bg-panel), var(--bvc-bg-panel-2)) !important;
  border: 1px solid var(--bvc-line-hi) !important;
  border-radius: 22px !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 60px 200px rgba(0, 0, 0, 0.6), 0 20px 60px rgba(0, 0, 0, 0.4) !important;
  filter: none !important;
}

/* Error card: same glass, red accent border */
.gate-card.gate-card--error {
  background:
    linear-gradient(180deg, rgba(244, 63, 94, 0.05), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, var(--bvc-bg-panel), var(--bvc-bg-panel-2)) !important;
  border: 1px solid rgba(244, 63, 94, 0.4) !important;
  border-radius: 22px !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 60px 200px rgba(0, 0, 0, 0.6), 0 0 32px rgba(244, 63, 94, 0.18) !important;
  filter: none !important;
}

/* Modal overlay scrim (consistent across all gate overlays) */
.gate-overlay {
  background: rgba(2, 6, 15, 0.6) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

/* ── Hamburger button + account menu compliance ──────────────── */
/* Hamburger trigger: just the three lines, no surrounding chrome. */
.headerHamburger,
#accountMenuBtn,
.account-menu-btn {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--bvc-muted-2) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 6px !important;
  transition: color var(--bvc-dur-fast) var(--bvc-ease-out) !important;
}
.headerHamburger:hover,
#accountMenuBtn:hover,
.account-menu-btn:hover {
  background: transparent !important;
  border: 0 !important;
  color: var(--bvc-text) !important;
}

/* Upgrade-to-Pro button: pill shape, keep the brand rainbow gradient
   border + text since that's the established BVC identity for upgrade. */
.headerUpgradeBtn {
  border-radius: 999px !important;
  height: 32px !important;
  padding: 0 16px !important;
}

/* Sign In pill: ghost variant of the design's primary CTA, sits to
   the left of the Upgrade pill in the header for anonymous users. */
.headerSignInBtn {
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--bvc-line);
  background: transparent;
  color: var(--bvc-muted);
  font-family: var(--bvc-font-title);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--bvc-dur-fast) var(--bvc-ease-out),
              border-color var(--bvc-dur-fast) var(--bvc-ease-out);
}
.headerSignInBtn:hover {
  color: var(--bvc-text);
  border-color: var(--bvc-line-hi);
}

/* Account menu dropdown: glass card. */
#accountMenu {
  border-radius: 16px !important;
  border: 1px solid var(--bvc-line-hi) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, var(--bvc-bg-panel), var(--bvc-bg-panel-2)) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  -webkit-backdrop-filter: var(--bvc-blur-card) !important;
  backdrop-filter: var(--bvc-blur-card) !important;
  color: var(--bvc-text) !important;
}

#accountMenuHeader {
  border-bottom: 1px solid var(--bvc-line-soft) !important;
}
#accountMenuName {
  font-family: var(--bvc-font-title) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--bvc-text-strong) !important;
}

/* Avatar: neutralize the random palette colors with the design accent. */
.account-avatar {
  border: 1px solid var(--bvc-line-hi) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
    var(--bvc-bg-chip) !important;
  box-shadow: none !important;
  filter: none !important;
  color: var(--bvc-text) !important;
  text-shadow: none !important;
}

/* Plan badge */
.account-plan-badge {
  font-family: var(--bvc-font-title) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
}
.account-plan-free {
  background: var(--bvc-bg-chip) !important;
  border: 1px solid var(--bvc-line) !important;
  color: var(--bvc-muted) !important;
}
.account-plan-pro {
  background: var(--bvc-gradient) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.4) !important;
}

/* Section headers (eyebrow labels separating Site/App/Account/Legal). */
.account-menu-section {
  font-family: var(--bvc-font-title) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--bvc-muted-3) !important;
  padding: 14px 14px 6px !important;
}
.account-menu-section:first-child {
  padding-top: 6px !important;
}

/* Menu items: text only, no icons, tighter rhythm. */
.account-menu-item {
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-family: var(--bvc-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--bvc-text) !important;
}
.account-menu-item:hover {
  background: var(--bvc-bg-glass-hi) !important;
  color: var(--bvc-text-strong) !important;
  transform: none !important;
}
/* Hide icons (we keep them in the DOM in case other paths add them
   programmatically; CSS just suppresses them so the menu reads as a
   text-only list). */
.account-menu-item svg {
  display: none !important;
}

/* ── Sign-in / sign-up modals (#emailAuth, #upgradeAuth) ──────── */
.email-auth-input {
  border-radius: 8px !important;
  border: 1px solid var(--bvc-line) !important;
  background: var(--bvc-bg-chip) !important;
  color: var(--bvc-text) !important;
  padding: 10px 14px !important;
  font-family: var(--bvc-font-body) !important;
  font-size: 13px !important;
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
}
.email-auth-input::placeholder {
  color: var(--bvc-muted-3) !important;
}
.email-auth-input:focus {
  border-color: var(--bvc-sky) !important;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15) !important;
}

.email-auth-tabs {
  border-bottom: 1px solid var(--bvc-line-soft) !important;
}
.email-auth-tab {
  font-family: var(--bvc-font-title) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--bvc-muted-2) !important;
  padding: 12px !important;
}
.email-auth-tab:hover {
  color: var(--bvc-muted) !important;
}
.email-auth-tab.active {
  color: var(--bvc-text) !important;
  background: none !important;
}
.email-auth-tab.active::after {
  background: var(--bvc-gradient) !important;
  height: 2px !important;
}

/* Gate-button family (Google, accent, primary) → design system pills */
.gate-btn {
  border-radius: 999px !important;
  padding: 11px 18px !important;
  font-family: var(--bvc-font-title) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}

/* "Continue with Google": keep white surface (Google brand requirement)
   but adopt the design's pill shape, line border, and type. */
.gate-btn-google {
  background: #fff !important;
  color: #1f2937 !important;
  border: 1px solid #dadce0 !important;
}
.gate-btn-google:hover {
  background: #f9fafb !important;
}

/* Accent (default submit): sky→violet gradient pill, glow shadow.
   Exclude close (×) buttons — they're square 32px chrome controls. */
.gate-btn:not(.gate-btn-google):not(.gate-btn-primary):not([aria-label="Close"]):not([aria-label="close"]) {
  background: var(--bvc-gradient) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: 0 0 24px rgba(14, 165, 233, 0.4) !important;
}
.gate-btn:not(.gate-btn-google):not(.gate-btn-primary):not([aria-label="Close"]):not([aria-label="close"]):hover {
  box-shadow: 0 0 32px rgba(14, 165, 233, 0.55) !important;
}

/* Close button: square 32px icon button with chip surface. */
.gate-btn[aria-label="Close"],
.gate-btn[aria-label="close"] {
  border-radius: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--bvc-muted-2) !important;
  font-family: inherit !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.gate-btn[aria-label="Close"]:hover,
.gate-btn[aria-label="close"]:hover {
  background: var(--bvc-bg-glass-hi) !important;
  border-color: var(--bvc-line-hi) !important;
  color: var(--bvc-text) !important;
  box-shadow: none !important;
}

/* Primary success state: same gradient (no green border). */
.gate-btn-primary {
  background: var(--bvc-gradient) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: 0 0 24px rgba(14, 165, 233, 0.4) !important;
}
.gate-btn-primary:hover {
  box-shadow: 0 0 32px rgba(14, 165, 233, 0.55) !important;
}

/* ── Onboarding tooltips (.tip-tooltip and children) ──────────── */
/* The tip-tooltip is built procedurally with inline styles keyed
   off a single accent (now sky). These rules tighten typography
   and surface chrome to match the rest of the design system. */
.tip-tooltip {
  border-radius: 14px !important;
  border: 1px solid var(--bvc-line-hi) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, var(--bvc-bg-panel), var(--bvc-bg-panel-2)) !important;
  -webkit-backdrop-filter: var(--bvc-blur-card) !important;
  backdrop-filter: var(--bvc-blur-card) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.3) !important;
  color: var(--bvc-text) !important;
  font-family: var(--bvc-font-body) !important;
  padding: 14px !important;
  max-height: calc(100vh - 32px) !important;
  overflow-y: auto !important;
  filter: none !important;
}
.tip-tooltip::-webkit-scrollbar { width: 4px; }
.tip-tooltip::-webkit-scrollbar-track { background: transparent; }
.tip-tooltip::-webkit-scrollbar-thumb { background: var(--bvc-line); border-radius: 2px; }

.tip-tooltip .tip-tooltip-arrow {
  border-right-color: var(--bvc-line-hi) !important;
  border-left-color: var(--bvc-line-hi) !important;
}
/* Panel label (uppercase eyebrow at top, no class) */
.tip-tooltip > div[style*="0.28em"] {
  color: var(--bvc-muted-2) !important;
  letter-spacing: 0.18em !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  font-family: var(--bvc-font-title) !important;
  margin-bottom: 4px !important;
}
.tip-tooltip-title {
  font-family: var(--bvc-font-title) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: var(--bvc-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 6px !important;
}
.tip-tooltip-desc {
  color: var(--bvc-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}
.tip-tooltip-desc + .tip-tooltip-desc,
.tip-tooltip-desc + div[style*="font-size"] {
  margin-top: 6px !important;
}
.tip-tooltip-control {
  margin-top: 10px !important;
  margin-bottom: 8px !important;
}
.tip-tooltip-step {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 11px !important;
  color: var(--bvc-muted-3) !important;
  letter-spacing: 0.04em !important;
}
.tip-tooltip-footer {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--bvc-line-soft) !important;
}
/* Buttons inside the footer: Back (ghost) + Next/Done (gradient).
   They have no class so we target by inline style heuristics. */
.tip-tooltip-footer button {
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-family: var(--bvc-font-title) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}
.tip-tooltip-footer button[style*="linear-gradient"] {
  background: var(--bvc-gradient) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: 0 0 24px rgba(14, 165, 233, 0.35) !important;
}
.tip-tooltip-footer button[style*="linear-gradient"]:hover {
  filter: none !important;
  transform: none !important;
  box-shadow: 0 0 32px rgba(14, 165, 233, 0.5) !important;
}
.tip-tooltip-footer button:not([style*="linear-gradient"]) {
  background: transparent !important;
  border: 1px solid var(--bvc-line) !important;
  color: var(--bvc-muted) !important;
}
.tip-tooltip-footer button:not([style*="linear-gradient"]):hover {
  background: var(--bvc-bg-glass-hi) !important;
  border-color: var(--bvc-line-hi) !important;
  color: var(--bvc-text) !important;
}

/* Generic gate body text + section labels */
.gate-card .gate-message,
.gate-card p {
  color: var(--bvc-muted) !important;
}
.gate-error-text {
  color: rgba(252, 165, 165, 0.95) !important;
  background: rgba(244, 63, 94, 0.08) !important;
  border: 1px solid rgba(244, 63, 94, 0.25) !important;
  border-radius: 8px !important;
  font-family: var(--bvc-font-body) !important;
  font-size: 12px !important;
}

/* ─────────────────────────────────────────────────────────────────
   Mobile compliance (≤768px)
   The mobile layout uses a horizontal sidebar at the bottom and a
   full-width panel container above it. These rules apply the
   floating-panels glass treatment and design-system atoms without
   changing the existing layout structure.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  body { background: var(--bvc-bg-deep); }

  /* Site header pill on mobile — narrower padding, same chrome. */
  .siteHeader {
    background: rgba(10, 15, 20, 0.6) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    border-bottom: 1px solid var(--bvc-line) !important;
  }

  /* Hide the in-header nav pills on mobile. The same Home / Visuals /
     SCRYR links live in the hamburger menu now. */
  .emitrNav { display: none !important; }

  /* Sidebar (horizontal bar at bottom): glass treatment. */
  .settings-sidebar {
    background:
      linear-gradient(0deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
      linear-gradient(0deg, var(--bvc-bg-panel), var(--bvc-bg-panel-2)) !important;
    border-top: 1px solid var(--bvc-line) !important;
    -webkit-backdrop-filter: var(--bvc-blur-card);
    backdrop-filter: var(--bvc-blur-card);
  }

  /* Sidebar buttons → chip-surface icon buttons. */
  .sidebar-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--bvc-line) !important;
    border-radius: 10px !important;
    color: var(--bvc-muted-2) !important;
    box-shadow: none !important;
  }
  .sidebar-btn:hover,
  .sidebar-btn:active {
    background: var(--bvc-bg-glass-hi) !important;
    border-color: var(--bvc-line-hi) !important;
    color: var(--bvc-text) !important;
  }
  .sidebar-btn[data-panel].active,
  .sidebar-btn.active {
    background: var(--bvc-bg-glass-hi) !important;
    border-color: var(--bvc-line-hi) !important;
    color: var(--bvc-text) !important;
  }

  /* Per-panel category color on the active sidebar button (mobile). */
  .sidebar-btn[data-panel="particles"].active {
    background: rgba(var(--color-red-rgb), 0.14) !important;
    border-color: rgba(var(--color-red-rgb), 0.55) !important;
    color: rgba(var(--color-red-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-red-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="emitter"].active {
    background: rgba(var(--color-pink-rgb), 0.14) !important;
    border-color: rgba(var(--color-pink-rgb), 0.55) !important;
    color: rgba(var(--color-pink-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-pink-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="forces"].active {
    background: rgba(var(--color-violet-rgb), 0.14) !important;
    border-color: rgba(var(--color-violet-rgb), 0.55) !important;
    color: rgba(var(--color-violet-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-violet-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="shading"].active {
    background: rgba(var(--color-purple-rgb), 0.14) !important;
    border-color: rgba(var(--color-purple-rgb), 0.55) !important;
    color: rgba(var(--color-purple-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-purple-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="camera"].active {
    background: rgba(var(--color-indigo-rgb), 0.14) !important;
    border-color: rgba(var(--color-indigo-rgb), 0.55) !important;
    color: rgba(var(--color-indigo-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-indigo-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="background"].active {
    background: rgba(var(--color-blue-rgb), 0.14) !important;
    border-color: rgba(var(--color-blue-rgb), 0.55) !important;
    color: rgba(var(--color-blue-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-blue-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="animation"].active {
    background: rgba(var(--color-sky-rgb), 0.14) !important;
    border-color: rgba(var(--color-sky-rgb), 0.55) !important;
    color: rgba(var(--color-sky-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-sky-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="export"].active {
    background: rgba(var(--color-teal-rgb), 0.14) !important;
    border-color: rgba(var(--color-teal-rgb), 0.55) !important;
    color: rgba(var(--color-teal-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-teal-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="presets"].active {
    background: rgba(var(--color-green-rgb), 0.14) !important;
    border-color: rgba(var(--color-green-rgb), 0.55) !important;
    color: rgba(var(--color-green-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-green-rgb), 0.35) !important;
  }
  .sidebar-btn[data-panel="save"].active,
  .sidebar-btn[data-panel="compositions"].active {
    background: rgba(var(--color-yellow-rgb), 0.14) !important;
    border-color: rgba(var(--color-yellow-rgb), 0.55) !important;
    color: rgba(var(--color-yellow-rgb), 1) !important;
    box-shadow: 0 0 16px rgba(var(--color-yellow-rgb), 0.35) !important;
  }

  /* Random button: glass icon button. */
  .random-btn {
    border-radius: 10px !important;
    border: 1px solid var(--bvc-card-border) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
      linear-gradient(180deg, var(--bvc-bg-panel), var(--bvc-bg-panel-2)) !important;
    color: var(--bvc-muted-2) !important;
    -webkit-backdrop-filter: var(--bvc-blur-card);
    backdrop-filter: var(--bvc-blur-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  }

  /* Active panel: glass card, no per-category color. */
  .settings-panel-container .panel,
  .settings-panel-container .panel.active {
    border-radius: 16px !important;
    border: 1px solid var(--bvc-card-border) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
      linear-gradient(180deg, var(--bvc-bg-panel), var(--bvc-bg-panel-2)) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    -webkit-backdrop-filter: var(--bvc-blur-card);
    backdrop-filter: var(--bvc-blur-card);
  }

  /* Sticky panel header: drop the category gradient, use eyebrow type. */
  .settings-panel-container .panel .panel-header {
    background: linear-gradient(180deg, var(--bvc-bg-panel), var(--bvc-bg-panel-2)) !important;
    border-bottom: 1px solid var(--bvc-line-soft) !important;
  }
  .settings-panel-container .panel .panel-header span {
    font-family: var(--bvc-font-title) !important;
    font-size: calc(9px * var(--ui-scale, 1)) !important;
    font-weight: var(--bvc-fw-bold) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--bvc-muted-2) !important;
    background: none !important;
    -webkit-text-fill-color: var(--bvc-muted-2) !important;
  }

  /* Mobile control cards: kill the per-panel category glow. */
  .panel-content > .control,
  .panel[data-panel="particles"] > .panel-content > .control,
  .panel[data-panel="emitter"] > .panel-content > .control,
  .panel[data-panel="forces"] > .panel-content > .control,
  .panel[data-panel="shading"] > .panel-content > .control,
  .panel[data-panel="camera"] > .panel-content > .control,
  .panel[data-panel="background"] > .panel-content > .control,
  .panel[data-panel="animation"] > .panel-content > .control,
  .panel[data-panel="export"] > .panel-content > .control {
    background: var(--bvc-bg-chip) !important;
    border: 1px solid var(--bvc-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* Atom restyling: slider, toggle, chip, select — same as desktop. */
  .settings-panel-container .panel input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 16px !important;
    background: transparent !important;
    border: 0 !important;
    margin: 4px 0 !important;
    outline: none !important;
  }
  .settings-panel-container .panel input[type="range"]::-webkit-slider-runnable-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: var(--bvc-bg-chip) !important;
    border: 1px solid var(--bvc-line) !important;
    box-shadow: none !important;
  }
  .settings-panel-container .panel input[type="range"]::-moz-range-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: var(--bvc-bg-chip) !important;
    border: 1px solid var(--bvc-line) !important;
    box-shadow: none !important;
  }
  .settings-panel-container .panel input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 2px solid var(--bvc-sky) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    margin-top: -8px !important;
  }
  .settings-panel-container .panel input[type="range"]::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 2px solid var(--bvc-sky) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  }

  .settings-panel-container .panel .pill-toggle {
    width: 38px !important;
    height: 22px !important;
    border-radius: 999px !important;
    background: var(--bvc-bg-chip) !important;
    border: 1px solid var(--bvc-line) !important;
  }
  .settings-panel-container .panel .pill-toggle::before {
    width: 16px !important;
    height: 16px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  }

  .settings-panel-container .panel select.bvc-chips-source {
    display: none !important;
  }
  .settings-panel-container .panel .bvc-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .settings-panel-container .panel .bvc-chip {
    padding: 8px 14px !important;
    font-family: var(--bvc-font-title) !important;
    font-size: 11px !important;
    font-weight: var(--bvc-fw-medium) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--bvc-muted-2) !important;
    background: var(--bvc-bg-chip) !important;
    border: 1px solid var(--bvc-line) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
  }
  .settings-panel-container .panel .bvc-chip.is-active {
    background: var(--bvc-bg-glass-hi) !important;
    border-color: var(--bvc-line-hi) !important;
    color: var(--bvc-text) !important;
  }

  .settings-panel-container .panel select,
  .settings-panel-container .panel input[type="text"],
  .settings-panel-container .panel input[type="number"] {
    background: var(--bvc-bg-chip) !important;
    border: 1px solid var(--bvc-line) !important;
    color: var(--bvc-text) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-family: var(--bvc-font-body) !important;
    font-size: 14px !important;
  }
  .settings-panel-container .panel select option,
  .settings-panel-container .panel select optgroup {
    background: var(--bvc-bg-deep) !important;
    color: var(--bvc-text) !important;
    font-family: var(--bvc-font-body) !important;
    font-size: 14px !important;
  }

  /* Tooltip on mobile: full-width minus margins, scroll if too tall. */
  .tip-tooltip {
    max-width: calc(100vw - 24px) !important;
  }
}

/* ── Backdrop-filter unsupported fallback ─────────────────────── */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .siteHeader,
  .settings-sidebar,
  .settings-panel-container .panel.active,
  .random-btn {
    background: rgba(10, 15, 20, 0.92) !important;
  }
}

/* ── Viewer mode — ?viewer=1&share=... hides editor UI ─────────── */
body.viewer-mode .siteHeader,
body.viewer-mode .settings-sidebar,
body.viewer-mode .perf-hud,
body.viewer-mode #uiContainer { display: none !important; }

.viewer-overlay {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 12px; padding: 14px 18px; pointer-events: none;
  z-index: 100;
}
.viewer-overlay[hidden] { display: none; }
.viewer-mark { font-size: 11px; letter-spacing: .18em; opacity: .6; text-transform: uppercase; pointer-events: auto; color: #fff; }
.viewer-mark a { color: inherit; text-decoration: none; }
.viewer-actions { display: flex; gap: 8px; pointer-events: auto; }
.viewer-btn {
  padding: 9px 14px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #fff;
  text-decoration: none; cursor: pointer; font-family: inherit;
}
.viewer-btn.primary { background: linear-gradient(135deg,#7c5cff,#22d3ee); color: #0b0b10; border: 0; }

.headerShareBtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.06); color: var(--bvc-text);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 12px; font-weight: 500; cursor: pointer;
  font-family: inherit;
}
.headerShareBtn:hover { background: rgba(255,255,255,.12); }
/* Hide the toolbar Share button in viewer mode (the bottom overlay has its own) */
body.viewer-mode .headerShareBtn { display: none !important; }