/* ─────────────────────────────────────────────────────────────────
   EMITR Mobile · Swipeable Cards Bottom Sheet
   Reference: handoff "design_handoff_mobile_settings"
   All hue values come from existing --color-*-rgb tokens.
   Activates only at (max-width: 768px) or coarse pointer.
   ───────────────────────────────────────────────────────────────── */

/* User-selectable UI scale (hamburger menu → Display → UI Size).
   Inherited by mobile-sheet AND desktop-sidebar elements via calc().
   The :root rules apply globally; rules inside the mobile media query
   target only the mobile sheet primitives. */
:root { --ui-scale: 1; }
:root[data-ui-scale="small"]  { --ui-scale: 0.75; }
:root[data-ui-scale="medium"] { --ui-scale: 1.00; }
:root[data-ui-scale="large"]  { --ui-scale: 1.35; }

/* ─────────── Desktop scaling ───────────
   These rules are intentionally NOT gated by the mobile media query —
   they affect the desktop sidebar + panel chrome. On mobile, the
   selectors target elements that are display:none/offscreen, so the
   rules have no visible effect there. */

/* Panel container left offset tracks the sidebar width. The 68px legacy
   value sits inside a desktop media query in app.html, so this just
   scales it. */
.settings-panel-container {
  left: calc(68px * var(--ui-scale));
}
.settings-panel-container .panel {
  width: calc(340px * var(--ui-scale));
}

/* Panel chrome */
.settings-panel-container .panel-header {
  padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale)) !important;
}
.settings-panel-container .panel-header span {
  font-size: calc(13px * var(--ui-scale));
}
.settings-panel-container .panel-content {
  padding: calc(12px * var(--ui-scale)) calc(14px * var(--ui-scale)) calc(16px * var(--ui-scale)) !important;
  gap: calc(12px * var(--ui-scale)) !important;
}
.settings-panel-container .control {
  gap: calc(7px * var(--ui-scale)) !important;
}
.settings-panel-container .control label {
  font-size: calc(12px * var(--ui-scale));
}
.settings-panel-container .panel-content input[type="number"],
.settings-panel-container .panel-content input[type="text"],
.settings-panel-container .panel-content select,
.settings-panel-container .panel-content button:not(.reset-btn) {
  font-size: calc(13px * var(--ui-scale));
}

/* Range slider thumb in the desktop panel — visually anchors the scale. */
.settings-panel-container input[type="range"]::-webkit-slider-thumb {
  width: calc(16px * var(--ui-scale)) !important;
  height: calc(16px * var(--ui-scale)) !important;
}
.settings-panel-container input[type="range"]::-moz-range-thumb {
  width: calc(16px * var(--ui-scale)) !important;
  height: calc(16px * var(--ui-scale)) !important;
}

/* Off by default; flipped on inside the mobile media query below.  */
.m-shell {
  display: none;
  pointer-events: none;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {

  /* ───────── Site header trim ─────────
     Only the wordmark, the Share icon, and the hamburger stay in the
     row. Site nav, Sign In, and the (large) Upgrade pill move into the
     hamburger menu or to the floating stage button. Wordmark gets a
     tighter track + nowrap so it never wraps. */
  .siteHeader {
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
  }
  .headerWordmark {
    font-size: 13px;
    letter-spacing: 0.22em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    min-width: 0;
  }
  .headerActions {
    gap: 6px;
  }
  .emitrNav,
  .headerSignInBtn {
    display: none !important;
  }
  /* Restore the share button as a proper pill on mobile — icon + label,
     rounded fully. The base style in emitr-floating.css already does this;
     we just nudge the size for a touch target. */
  .headerShareBtn {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    gap: 6px;
  }

  /* Hide legacy mobile chrome — the new shell replaces it. We keep
     the panel container in the layout (offscreen + invisible) so the
     existing ui-bindings can still toggle per-control display:none on
     conditional groups; the mobile sheet probes offsetParent on each
     source to mirror that visibility. */
  .settings-sidebar,
  .random-btn {
    display: none !important;
  }
  .settings-panel-container {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }
  .settings-panel-container .panel,
  .settings-panel-container .panel-header,
  .settings-panel-container .panel-content,
  .settings-panel-container .panel-content > .control,
  .settings-panel-container .control-body {
    display: block !important;
  }

  /* iOS Safari 17+ doesn't reliably report URL bar height via
     safe-area-inset-bottom OR innerHeight-visualViewport. Hardcode an
     ~90px inset so the dock always clears the URL bar + home indicator,
     whichever signal a given browser supports. */
  .m-shell {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: max(env(safe-area-inset-bottom, 0px) + 4px, 30px);
    z-index: 1000;
    pointer-events: none;
  }
  .m-shell > * { pointer-events: auto; }

  /* ───────── Bottom sheet shell ───────── */
  .m-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    /* Shell already clears the URL bar + home indicator; this is just a
       small interior gap so the tab strip doesn't hug the sheet's edge. */
    padding: 0 14px 14px;
    border-radius: 26px 26px 0 0;
    background:
      linear-gradient(180deg,
        rgba(var(--hue, 255, 255, 255), 0.16),
        rgba(var(--hue, 255, 255, 255), 0.05)),
      rgba(10, 12, 16, 0.92);
    border-top: 1px solid rgba(var(--hue, 255, 255, 255), 0.30);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 -18px 48px rgba(0, 0, 0, 0.50),
      0 0 60px -8px rgba(var(--hue, 255, 255, 255), 0.30);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform var(--bvc-dur-panel, 280ms) cubic-bezier(0.4, 0, 0.2, 1);
    /* Sheet height scales with --ui-scale so the UI-to-drawer ratio is
       the same at S/M/L. Anchored so large (×1.35) = 420px (the
       known-good size); medium and small scale down proportionally. */
    --m-sheet-h: calc(312px * var(--ui-scale));
    height: var(--m-sheet-h);
    max-height: 88vh;       /* fallback */
    max-height: 88dvh;      /* respects iOS Safari dynamic chrome */
  }
  .m-sheet[data-state="peek"] {
    transform: translateY(calc(var(--m-sheet-h) - calc(56px * var(--ui-scale))));
  }

  /* Drag handle pill */
  .m-sheet-handle {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.36);
    margin: 8px auto 0;
    flex-shrink: 0;
    touch-action: none;
  }

  /* ───────── Dock ───────── */
  .m-dock {
    display: flex;
    gap: 8px;
    padding: 4px 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    flex-shrink: 0;
    scroll-behavior: smooth;
  }
  .m-dock::-webkit-scrollbar { display: none; }
  .m-dock-btn {
    flex-shrink: 0;
    width: calc(42px * var(--ui-scale));
    height: calc(42px * var(--ui-scale));
    border-radius: calc(12px * var(--ui-scale));
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(var(--bhue, 255, 255, 255), 0.18);
    color: rgba(var(--bhue, 255, 255, 255), 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
  }
  .m-dock-btn svg {
    width: calc(22px * var(--ui-scale));
    height: calc(22px * var(--ui-scale));
  }
  .m-dock-btn.is-active {
    background: rgba(var(--bhue, 255, 255, 255), 0.20);
    border-color: rgba(var(--bhue, 255, 255, 255), 0.65);
    color: rgba(255, 255, 255, 0.98);
    box-shadow:
      0 0 14px rgba(var(--bhue, 255, 255, 255), 0.40),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }

  /* ───────── Sheet body ───────── */
  .m-sheet-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
  }

  /* Pager dots */
  .m-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-shrink: 0;
  }
  .m-dots .m-dot {
    width: 20px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.20);
    cursor: pointer;
    transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1), background 220ms ease;
  }
  .m-dots .m-dot.is-active {
    width: 32px;
    background: rgba(var(--hue, 255, 255, 255), 0.95);
    box-shadow: 0 0 8px rgba(var(--hue, 255, 255, 255), 0.55);
  }

  /* Stack — pager viewport */
  .m-stack {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
    touch-action: pan-y;
  }
  .m-strip {
    height: 100%;
    display: flex;
    will-change: transform;
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .m-strip.is-dragging { transition: none; }
  .m-page {
    flex: 0 0 auto;
    height: 100%;
    padding: 0 2px;
    box-sizing: border-box;
  }

  /* Card chrome */
  .m-card {
    height: 100%;
    border-radius: 18px;
    border: 1px solid rgba(var(--hue, 255, 255, 255), 0.28);
    background:
      linear-gradient(180deg,
        rgba(var(--hue, 255, 255, 255), 0.16),
        rgba(var(--hue, 255, 255, 255), 0.04)),
      rgba(14, 16, 20, 0.94);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 8px 28px -8px rgba(var(--hue, 255, 255, 255), 0.40);
    padding: 16px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .m-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .m-card-head .label {
    font-family: var(--bvc-font-title);
    font-weight: 600;
    font-size: calc(11px * var(--ui-scale));
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
  }
  .m-card-head .value {
    font-family: var(--bvc-font-title);
    font-weight: 300;
    font-size: calc(28px * var(--ui-scale));
    letter-spacing: 0.01em;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .m-card-head .value .unit {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 500;
    font-size: calc(11px * var(--ui-scale));
    color: rgba(255, 255, 255, 0.50);
    margin-left: 3px;
  }
  .m-caption {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.50);
    text-align: center;
    letter-spacing: 0.02em;
    margin-top: auto;
  }

  /* Animation — animate toggle on slider cards + composite per-param cards.
     Letting the label flex keeps the value (and animate toggle) pinned right
     even when a third element is present in the head. */
  .m-card-head .label { flex: 1 1 auto; min-width: 0; }
  .m-anim-toggle {
    align-self: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid rgba(var(--hue, 255, 255, 255), 0.30);
    background: rgba(var(--hue, 255, 255, 255), 0.08);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .m-anim-toggle svg { width: 18px; height: 18px; }
  .m-anim-toggle.is-active {
    background: rgba(var(--hue, 255, 255, 255), 0.85);
    border-color: rgba(var(--hue, 255, 255, 255), 0.95);
    color: #0b0d11;
  }
  .m-card.is-anim {
    justify-content: flex-start;
    overflow-y: auto;
    gap: 14px;
  }
  .m-anim-remove {
    align-self: center;
    flex: 0 0 auto;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
  }
  .m-anim-remove:active { transform: scale(0.96); }
  .m-anim-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .m-anim-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  .m-anim-row-label {
    font-family: var(--bvc-font-title);
    font-weight: 600;
    font-size: calc(10px * var(--ui-scale));
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
  }
  .m-anim-row-val {
    font-family: var(--bvc-font-title);
    font-weight: 300;
    font-size: calc(18px * var(--ui-scale));
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .m-anim-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .m-anim-type {
    flex: 1 1 auto;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
    background: rgba(var(--hue, 255, 255, 255), 0.06);
    border: 1px solid rgba(var(--hue, 255, 255, 255), 0.22);
    border-radius: 10px;
    padding: 9px 6px;
    cursor: pointer;
    text-align: center;
  }
  .m-anim-type.is-active {
    color: #0b0d11;
    background: rgba(var(--hue, 255, 255, 255), 0.85);
    border-color: rgba(var(--hue, 255, 255, 255), 0.95);
  }

  /* Tabs */
  .m-tabs {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    flex-shrink: 0;
    padding: 0 8px 4px;
    margin: 0 -8px;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .m-tabs:active { cursor: grabbing; }
  .m-tabs::-webkit-scrollbar { display: none; }
  .m-tab {
    font-family: var(--bvc-font-title);
    font-weight: 500;
    font-size: calc(11px * var(--ui-scale));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding: 6px 0 8px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 160ms ease, border-color 160ms ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }
  .m-tab.is-active {
    color: rgba(255, 255, 255, 0.96);
    border-bottom-color: rgba(var(--hue, 255, 255, 255), 1);
  }

  /* ───────── Card · slider primitive ───────── */
  .m-nudge-row {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    gap: 12px;
    align-items: center;
  }
  .m-nudge-btn {
    width: calc(36px * var(--ui-scale));
    height: calc(36px * var(--ui-scale));
    border-radius: 10px;
    border: 1px solid rgba(var(--hue, 255, 255, 255), 0.30);
    background: rgba(var(--hue, 255, 255, 255), 0.10);
    color: #fff;
    font-family: var(--bvc-font-title);
    font-weight: 500;
    font-size: calc(18px * var(--ui-scale));
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: background 120ms ease, transform 80ms ease;
  }
  .m-nudge-btn:active { transform: scale(0.94); background: rgba(var(--hue, 255, 255, 255), 0.22); }

  .m-slider-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    touch-action: none;
  }
  /* Give the whole nudge row some vertical breathing room so a touch
     near (but not on) the 8px track still lands inside the slider zone.
     The slider's pointer handlers are attached to the row, so any tap
     within this expanded hit area drives the slider — and never the
     pager. */
  .m-nudge-row {
    padding: 14px 0;
    touch-action: none;
  }
  .m-slider-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg,
      rgba(var(--hue, 255, 255, 255), 0.6),
      rgba(var(--hue, 255, 255, 255), 1));
    box-shadow: 0 0 10px rgba(var(--hue, 255, 255, 255), 0.65);
    pointer-events: none;
  }
  .m-slider-thumb {
    position: absolute;
    top: 50%;
    width: calc(22px * var(--ui-scale));
    height: calc(22px * var(--ui-scale));
    border-radius: 999px;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow:
      0 0 0 5px rgba(var(--hue, 255, 255, 255), 0.18),
      0 0 12px rgba(var(--hue, 255, 255, 255), 0.60),
      0 2px 6px rgba(0, 0, 0, 0.40);
    pointer-events: none;
  }

  /* ───────── Card · select primitive ───────── */
  .m-select-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  .m-select-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(12px * var(--ui-scale)) calc(14px * var(--ui-scale));
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--bvc-font-body);
    font-weight: 500;
    font-size: calc(14px * var(--ui-scale));
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  }
  .m-select-opt.is-active {
    background: rgba(var(--hue, 255, 255, 255), 0.18);
    border-color: rgba(var(--hue, 255, 255, 255), 0.65);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
      0 0 14px rgba(var(--hue, 255, 255, 255), 0.30);
  }
  .m-select-opt .m-tick {
    width: 18px; height: 18px;
    opacity: 0;
    transition: opacity 160ms ease;
  }
  .m-select-opt.is-active .m-tick { opacity: 1; }

  /* ───────── Card · toggle primitive ───────── */
  .m-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px;
  }
  .m-toggle-caption {
    font-family: var(--bvc-font-body);
    font-weight: 400;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.4;
  }
  .m-toggle-pill {
    position: relative;
    width: 56px; height: 32px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
    flex-shrink: 0;
  }
  .m-toggle-pill::after {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 24px; height: 24px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.40);
    transition: left 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .m-toggle-pill[data-state="on"] {
    background: rgba(var(--hue, 255, 255, 255), 0.55);
    border-color: rgba(var(--hue, 255, 255, 255), 0.85);
    box-shadow: 0 0 12px rgba(var(--hue, 255, 255, 255), 0.45);
  }
  .m-toggle-pill[data-state="on"]::after {
    left: calc(100% - 27px);
  }

  /* ───────── Card · color primitive ───────── */
  .m-color-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0;
  }
  .m-color-swatch {
    width: 100%;
    max-width: 220px;
    height: 88px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 6px 18px rgba(0, 0, 0, 0.40),
      0 0 14px rgba(var(--hue, 255, 255, 255), 0.25);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    transition: transform 120ms ease;
  }
  .m-color-swatch:active { transform: scale(0.98); }

  /* ───────── Card · action button primitive ───────── */
  .m-action-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
  }
  .m-action-btn {
    min-width: 180px;
    height: 48px;
    padding: 0 22px;
    border-radius: 14px;
    border: 1px solid rgba(var(--hue, 255, 255, 255), 0.55);
    background:
      linear-gradient(180deg,
        rgba(var(--hue, 255, 255, 255), 0.30),
        rgba(var(--hue, 255, 255, 255), 0.14));
    color: #fff;
    font-family: var(--bvc-font-title);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.04em;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 0 18px rgba(var(--hue, 255, 255, 255), 0.40);
    transition: transform 120ms ease, background 120ms ease;
  }
  .m-action-btn:active { transform: scale(0.97); }

  /* ───────── Card · curve primitive (visual only for phase 1) ───────── */
  .m-curve {
    aspect-ratio: 2.2 / 1;
    width: 100%;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--hue, 255, 255, 255), 0.18);
    overflow: hidden;
    touch-action: none;
  }
  .m-curve svg { width: 100%; height: 100%; display: block; }

  /* ───────── Card · 2D wheel primitive (visual only) ───────── */
  .m-wheel-wrap { display: flex; justify-content: center; }
  .m-wheel-2d { width: 180px; height: 180px; touch-action: none; }
  .m-wheel-2d svg { width: 100%; height: 100%; display: block; }

  /* ───────── Card · 3D rotation primitive (visual only) ───────── */
  .m-rot-3d {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .m-rot-axis {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--hue, 255, 255, 255), 0.18);
  }
  .m-rot-axis-name {
    font-family: var(--bvc-font-title);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.60);
  }
  .m-rot-axis-wheel { width: 64px; height: 64px; touch-action: none; }
  .m-rot-axis-wheel svg { width: 100%; height: 100%; display: block; }
  .m-rot-axis-val {
    font-family: var(--bvc-font-title);
    font-weight: 300;
    font-size: 16px;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }
  .m-rot-axis-val .unit {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 500;
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 2px;
  }

  /* ───────── Locked card · Pro feature gate ───────── */
  .m-card.is-locked {
    position: relative;
  }
  .m-card.is-locked > :not(.m-pro-overlay) {
    opacity: 0.35;
    pointer-events: none;
    filter: saturate(0.6);
  }
  .m-pro-overlay {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    z-index: 2;
    background:
      linear-gradient(180deg,
        rgba(244, 61, 155, 0.10),
        rgba(168, 85, 247, 0.10) 60%,
        rgba(10, 12, 16, 0.62));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
    cursor: pointer;
  }
  .m-pro-lock {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: rgba(244, 61, 155, 0.90);
    background: rgba(244, 61, 155, 0.12);
    border: 1px solid rgba(244, 61, 155, 0.45);
    box-shadow: 0 0 14px rgba(244, 61, 155, 0.30);
  }
  .m-pro-lock svg { width: 20px; height: 20px; }
  .m-pro-title {
    font-family: var(--bvc-font-title);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.96);
  }
  .m-pro-desc {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
    max-width: 240px;
  }
  .m-pro-cta {
    margin-top: 4px;
    padding: 9px 22px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-pink), var(--color-violet));
    color: #fff;
    font-family: var(--bvc-font-title);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 0 14px rgba(244, 61, 155, 0.45);
    transition: transform 120ms ease;
  }
  .m-pro-cta:active { transform: scale(0.96); }

  /* Pro badge on locked select options */
  .m-pro-badge {
    font-family: var(--bvc-font-title);
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 61, 155, 0.95);
    background: rgba(244, 61, 155, 0.12);
    border: 1px solid rgba(244, 61, 155, 0.45);
    border-radius: 999px;
    padding: 3px 8px;
    flex-shrink: 0;
  }
  .m-select-opt.is-locked .m-select-opt-label {
    color: rgba(255, 255, 255, 0.50);
  }
  .m-select-opt.is-locked {
    background: rgba(244, 61, 155, 0.06);
    border-color: rgba(244, 61, 155, 0.22);
  }

  /* Whole-category Pro gate card */
  .m-card.is-pro-gate {
    background:
      linear-gradient(180deg,
        rgba(244, 61, 155, 0.10),
        rgba(168, 85, 247, 0.06) 60%,
        rgba(14, 16, 20, 0.94));
    border-color: rgba(244, 61, 155, 0.40);
  }
  .m-pro-gate-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 18px;
    text-align: center;
  }
  .m-pro-gate-title {
    font-family: var(--bvc-font-title);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #fff;
  }
  .m-pro-gate-desc {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.76);
    max-width: 280px;
  }

  /* ───────── Info card ───────── */
  .m-card.is-info {
    background:
      linear-gradient(180deg,
        rgba(var(--hue, 255, 255, 255), 0.10),
        rgba(var(--hue, 255, 255, 255), 0.02)),
      rgba(14, 16, 20, 0.94);
  }
  .m-info-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 18px;
    text-align: center;
  }
  .m-info-icon {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: rgba(var(--hue, 255, 255, 255), 0.95);
    background: rgba(var(--hue, 255, 255, 255), 0.10);
    border: 1px solid rgba(var(--hue, 255, 255, 255), 0.35);
    box-shadow: 0 0 12px rgba(var(--hue, 255, 255, 255), 0.25);
  }
  .m-info-icon svg { width: 22px; height: 22px; }
  .m-info-title {
    font-family: var(--bvc-font-title);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.96);
  }
  .m-info-body {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.74);
    max-width: 280px;
  }

  /* ───────── Empty state card ───────── */
  .m-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    padding: 24px 12px;
  }
  .m-empty .m-empty-title {
    font-family: var(--bvc-font-title);
    font-weight: 500;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.04em;
  }
  .m-empty .m-empty-sub {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.45;
    max-width: 280px;
  }

  /* ───────── Landscape variant: right-side panel ───────── */
  @media (orientation: landscape) {
    .m-sheet {
      top: 0;
      bottom: 0;
      right: 0;
      left: auto;
      width: 56%;
      max-width: 460px;
      height: auto;
      max-height: none;
      border-radius: 26px 0 0 26px;
      border-top: none;
      border-left: 1px solid rgba(var(--hue, 255, 255, 255), 0.30);
      padding:
        calc(14px + var(--safe-top, 0px)) 14px
        calc(14px + var(--safe-bottom, 0px));
    }
    .m-sheet[data-state="peek"] {
      transform: translateX(calc(100% - 64px));
    }
    .m-sheet-handle {
      width: 4px;
      height: 38px;
      margin: 0;
      position: absolute;
      top: 50%;
      left: 8px;
      transform: translateY(-50%);
    }
  }
}