/* =====================================================================
   mobile.css — phone & tablet-portrait responsive overrides for SESSION
   Loaded LAST so it can override desktop rules. Three breakpoints:
     - phone:        max-width: 767px
     - tabletP:      768px — 1023px (auto-collapses sidebar)
     - desktop:      >= 1024px (untouched)
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* Mobile design tokens                                               */
/* ------------------------------------------------------------------ */
:root {
  --m-tabbar-h: 64px;
  --m-topbar-h: 60px;
  --m-mini-h: 60px;
  --m-player-tab-gap: 2px;
  --m-sheet-radius: 18px;
  --m-touch: 44px;
  --m-safe-top: env(safe-area-inset-top, 0px);
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  --m-safe-left: env(safe-area-inset-left, 0px);
  --m-safe-right: env(safe-area-inset-right, 0px);
}

/* Hide the mobile shell host on desktop so it never reserves space. */
#__mobile-shell { display: contents; }

/* =====================================================================
   TABLET PORTRAIT (768 — 1023px)
   - The mobile-shell adds .is-sidebar-collapsed automatically; we just
     polish a few details and ensure the table stays usable.
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tighten topbar padding so the install + feedback buttons don't crowd */
  .topbar { padding: 0 12px; gap: 10px; }
  .topbar__search { max-width: 360px; }
  /* Player bar: hide the speed pills past 1.0x and the share button to make
     room for the transport controls */
  .playerbar--full .speedpills__pill:nth-child(2),
  .playerbar--full .speedpills__pill:nth-child(3),
  .playerbar--full .speedpills__pill:nth-child(4) { display: none; }
  /* Modal cards: max width with comfortable margin */
  .cmodal__card,
  .paywall__card,
  .modal__card { max-width: calc(100vw - 32px); }
}

/* =====================================================================
   PHONE  (max-width: 767px)
   ===================================================================== */
@media (max-width: 767px) {
  /* Disable horizontal page bounce on iOS while still allowing vertical.
     These rules intentionally apply before `body.is-mobile` is present, so
     the first paint and any shell crash still get iPhone-safe behavior. */
  html, body {
    min-height: 100dvh;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
  }
  body.is-mobile {
    min-height: 100dvh;
    touch-action: manipulation;
  }
  button,
  [role="button"],
  a,
  input,
  textarea,
  select,
  .pl-row,
  .row {
    touch-action: manipulation;
  }
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
  body.is-mobile button,
  body.is-mobile [role="button"],
  body.is-mobile a,
  body.is-mobile input,
  body.is-mobile textarea,
  body.is-mobile select,
  body.is-mobile .pl-row,
  body.is-mobile .row {
    touch-action: manipulation;
  }
  body.is-mobile input,
  body.is-mobile textarea,
  body.is-mobile select {
    font-size: 16px !important;
  }
  /* Switch the root grid to a single-column flow so .main fills width.
     The sidebar is still rendered but pulled out of layout (we lift it
     into the drawer when .is-mobile-drawer-open is on body). */
  .app {
    grid-template-columns: 1fr !important;
    grid-template-rows: 100dvh;
    height: 100dvh;
  }
  body.is-mobile .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    z-index: 9000;
    transform: translateX(-105%);
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0.24, 1), box-shadow 320ms;
    border-right: 1px solid var(--line);
    box-shadow: none;
    padding-top: calc(14px + var(--m-safe-top));
    padding-bottom: calc(12px + var(--m-safe-bottom));
  }
  body.is-mobile.is-mobile-drawer-open .sidebar {
    transform: translateX(0);
    box-shadow: 24px 0 60px rgba(0,0,0,0.55);
  }
  body.is-mobile .ptray,
  body.is-mobile .ptray-backdrop,
  body.is-mobile .plb-tray,
  body.is-mobile .te-tray {
    display: none !important;
  }
  /* Force expanded form when the drawer is open even if desktop had it
     collapsed for tablet portrait. */
  body.is-mobile.is-mobile-drawer-open.is-sidebar-collapsed .sidebar {
    /* override the collapsed-rail width */
    width: min(86vw, 320px) !important;
  }
  body.is-mobile.is-mobile-drawer-open.is-sidebar-collapsed
    .sidebar :is(.sidebar__logo-img, .sidebar__tier-pill, .sidebar__logo-badge,
                  .navitem__label, .navitem__badge, .navitem__kbd,
                  .sidebar__section, .sidebar__foot-counts) {
    display: revert !important;
  }

  /* Main content: room at top for our app bar, room at bottom for mini
     player + tab bar, and respect safe-area insets. */
  /* ---------------- Shared page (and Playlists shell) ----- */
  /* Desktop uses a grid: list on the left, preview aside on the right.
     On phone, stack the list full-width and present the preview as a
     full-screen overlay (only when an item is selected). */
  body.is-mobile .pl-shell {
    display: block !important;
    grid-template-columns: none !important;
  }
  body.is-mobile .pl-list {
    width: 100% !important;
    padding: 8px 0 24px !important;
  }
  /* Empty preview state: hide entirely so the list is visible. */
  body.is-mobile .pl-preview.pl-preview--empty { display: none !important; }
  /* Populated preview becomes a full-bleed sheet over the list. */
  body.is-mobile .pl-preview:not(.pl-preview--empty) {
    position: fixed !important;
    inset: calc(var(--m-topbar-h) + var(--m-safe-top)) 0
           calc(var(--m-tabbar-h) + 16px + var(--m-safe-bottom)) 0 !important;
    width: auto !important;
    max-width: none !important;
    z-index: 7900;
    overflow-y: auto !important;
    border-left: 0 !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
      rgba(14,14,16,0.96) !important;
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border-top: 1px solid rgba(255,255,255,0.08);
    animation: m-pv-rise 240ms cubic-bezier(0.32, 0.72, 0.24, 1);
  }
  :root[data-theme="light"] body.is-mobile .pl-preview:not(.pl-preview--empty) {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.95), rgba(252,252,253,0.88)) !important;
  }
  @keyframes m-pv-rise {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  /* Make the close button bigger / easier to hit on touch. */
  body.is-mobile .pl-pv__close {
    width: 40px !important; height: 40px !important;
    font-size: 22px !important;
  }
  /* Cover image height tames itself on small screens. */
  body.is-mobile .pl-pv__cover { min-height: 180px !important; }
  /* Buttons stack with full width when crowded. */
  body.is-mobile .pl-pv__btns { flex-wrap: wrap !important; gap: 8px !important; }
  body.is-mobile .pl-pv__btns .pl-btn { flex: 1 1 calc(50% - 4px); }
  body.is-mobile .pl-pv__btns .pl-btn--play { flex: 1 1 100%; }

  /* Page header on phone: stack the action buttons under the title block. */
  body.is-mobile .pl-pageheader {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  body.is-mobile .pl-pageheader__r {
    width: 100%;
    display: flex; gap: 8px;
  }
  body.is-mobile .pl-pageheader__r .pl-btn { flex: 1; }

  /* Shared tabs: allow horizontal scroll if they don't fit. */
  body.is-mobile .shr-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.is-mobile .shr-tabs::-webkit-scrollbar { display: none; }
  body.is-mobile .shr-tabs > * { flex-shrink: 0; }

  /* Dense rows: collapse desktop-only meta cells, keep title + status. */
  body.is-mobile .pl-row__main {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 12px 14px !important;
  }
  body.is-mobile .pl-row__cell { padding: 0 !important; }
  /* Hide low-priority cells on phone (sparkline, watermark, email, etc.). */
  body.is-mobile .pl-row .pl-row__cell:nth-child(n+3):not(.pl-row__cell--right) {
    display: none !important;
  }
  body.is-mobile .pl-row__cell--right {
    align-self: flex-end !important;
    margin-top: -28px;
  }

  /* When real player is loaded, .main padding-bottom must clear: floating tab bar (8 + 64) + player (~70 + 6 gap). */
  body.is-mobile .main {
    border-left: 0;
    padding-top: calc(var(--m-topbar-h) + var(--m-safe-top));
    padding-bottom: calc(var(--m-tabbar-h) + 16px + var(--m-safe-bottom));
  }
  body.is-mobile.has-mini-player .main {
    padding-bottom: calc(var(--m-tabbar-h) + 86px + var(--m-safe-bottom));
  }

  /* ---------------- Theme consistency for secondary mobile surfaces -----
     These pages used bespoke mobile polish with hard-coded dark/white
     surfaces, so changing theme could leave the header and tab bar in one
     mode while the page body stayed in another. Keep the pages tied to the
     shared tokens that the theme switch already updates. */
  body.is-mobile .main,
  body.is-mobile .pl-grid,
  body.is-mobile .pl-content,
  body.is-mobile .pl-grid.pl-grid--mobile-detail,
  body.is-mobile .pl-grid--mobile-detail .pl-content,
  body.is-mobile .pl-md,
  body.is-mobile .shared-app,
  body.is-mobile .shared,
  body.is-mobile .trash-page {
    background: var(--bg) !important;
    color: var(--text) !important;
  }
  body.is-mobile .pl-preview,
  body.is-mobile .pl-rail,
  body.is-mobile .pl-table,
  body.is-mobile .trash-table,
  body.is-mobile .sm-modal,
  body.is-mobile .sm-section__body {
    background: var(--bg-2) !important;
    color: var(--text) !important;
  }
  body.is-mobile .pl-md__actions {
    background: linear-gradient(180deg, var(--bg) 0%, color-mix(in oklch, var(--bg) 84%, transparent) 100%) !important;
  }
  body.is-mobile .pl-md__meta h1,
  body.is-mobile .pl-md-protection strong,
  body.is-mobile .shr-row__topline,
  body.is-mobile .shr-badge--nda {
    color: var(--text) !important;
  }
  body.is-mobile .pl-md__meta p,
  body.is-mobile .pl-md__owner,
  body.is-mobile .shr-row__recipient {
    color: var(--text-dim) !important;
  }
  body.is-mobile .shr-row__type,
  body.is-mobile .shr-row__meta,
  body.is-mobile .shr-badge,
  body.is-mobile .trash-search input::placeholder {
    color: var(--text-mute) !important;
  }
  body.is-mobile .shr-row,
  body.is-mobile .shr-empty {
    background: color-mix(in oklch, var(--bg-2) 86%, transparent) !important;
    border-color: var(--line) !important;
    box-shadow: 0 10px 28px color-mix(in oklch, #000 18%, transparent) !important;
  }
  body.is-mobile .shr-row.is-selected {
    background: color-mix(in oklch, var(--accent) 10%, var(--bg-2)) !important;
    box-shadow: inset 2px 0 0 var(--accent), 0 10px 28px color-mix(in oklch, #000 18%, transparent) !important;
  }
  body.is-mobile .shr-row__more-btn,
  body.is-mobile .shr-badge {
    background: var(--bg-3) !important;
  }
  body.is-mobile .sm-backdrop {
    background: color-mix(in oklch, var(--bg) 68%, transparent) !important;
  }
  body.is-mobile .sm-tabs {
    background: var(--bg-2) !important;
  }
  body.is-mobile .sm-tab {
    background: var(--bg-3) !important;
    color: var(--text-dim) !important;
  }
  body.is-mobile .sm-tab.is-on {
    background: var(--accent) !important;
    color: #1a0e02 !important;
  }
  body.is-mobile .sm-tab.is-on svg {
    color: #1a0e02 !important;
  }

  /* Hide the desktop topbar; the desktop playerbar is fully hidden on mobile —
     we render our own MobileDockPlayer (.m-dock) that dispatches the same
     session: events the audio engine listens to. */
  body.is-mobile .topbar { display: none !important; }
  body.is-mobile .playerbar,
  body.is-mobile .playerbar.playerbar--full { display: none !important; }

  /* ===== Mobile dock player (.m-dock) =====
     Matches the iOS-bound reference: art tile + meta + star top row, full-width
     dotted waveform with a duration label, share / prev / [rainbow play] / next
     bottom row. Sits above the tab bar. */
  .m-dock {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom) + var(--m-player-tab-gap));
    z-index: 9000;
    padding: 12px 18px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background:
      linear-gradient(180deg, rgba(20,20,24,0.92), rgba(14,14,18,0.96)),
      rgba(14,14,18,0.96);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-top: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.45);
    color: rgba(255,255,255,0.92);
    transform: translateY(0);
    transition: transform 240ms ease-out, opacity 200ms ease-out;
    touch-action: pan-y;
  }
  :root[data-theme="light"] .m-dock {
    background:
      linear-gradient(180deg, rgba(252,252,253,0.96), rgba(248,248,250,0.98));
    border-top-color: rgba(0,0,0,0.06);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.10);
    color: rgba(20,20,24,0.92);
  }
  /* Top row — art + meta + star */
  .m-dock__top {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
  }
  .m-dock__art {
    width: 64px; height: 64px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.55);
  }
  :root[data-theme="light"] .m-dock__art {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
    color: rgba(0,0,0,0.45);
  }
  .m-dock__art svg { width: 28px; height: 28px; }
  .m-dock__meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .m-dock__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-dock__sub {
    font-size: 13px;
    line-height: 1.2;
    color: rgba(255,255,255,0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :root[data-theme="light"] .m-dock__sub { color: rgba(0,0,0,0.55); }
  .m-dock__star {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="light"] .m-dock__star { color: rgba(0,0,0,0.65); }
  .m-dock__star svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .m-dock__star.is-on { color: var(--accent); }
  .m-dock__star.is-on svg { fill: currentColor; stroke: currentColor; }

  /* Wave row — elapsed | dotted waveform | total */
  .m-dock__wave-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 2px;
  }
  .m-dock__time {
    font-family: "JetBrains Mono", "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.55);
    flex: 0 0 auto;
    min-width: 18px;
    text-align: center;
  }
  :root[data-theme="light"] .m-dock__time { color: rgba(0,0,0,0.55); }
  .m-dock__time--total { min-width: 36px; text-align: right; }
  .m-dock__wave {
    flex: 1 1 auto;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  .m-dock__bar {
    flex: 1 1 0;
    min-width: 1px;
    border-radius: 999px;
    background: rgba(255,255,255,0.30);
    transition: background 0.08s linear;
  }
  :root[data-theme="light"] .m-dock__bar { background: rgba(0,0,0,0.30); }
  .m-dock__bar.is-played { background: var(--accent); }
  :root[data-theme="light"] .m-dock__bar.is-played { background: var(--accent); }

  /* Controls row — share | prev | rainbow play | next | spacer */
  .m-dock__ctrls {
    display: grid;
    grid-template-columns: 36px 1fr 36px 56px 36px 1fr 36px;
    align-items: center;
    margin-top: 2px;
  }
  /* Share button moved to the RIGHT (col 7), spacer moved to LEFT (col 1) per Tommy 2026-05-19. */
  .m-dock__ctrls > .m-dock__ctrl--side:first-child { grid-column: 7; justify-self: end; }
  .m-dock__ctrls > .m-dock__ctrl:nth-of-type(2) { grid-column: 3; justify-self: end; }
  .m-dock__ctrls > .m-dock__play { grid-column: 4; justify-self: center; }
  .m-dock__ctrls > .m-dock__ctrl:nth-of-type(3) { grid-column: 5; justify-self: start; }
  .m-dock__ctrls > .m-dock__ctrl--spacer { grid-column: 1; }
  .m-dock__ctrl {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.78);
    cursor: pointer;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
  }
  :root[data-theme="light"] .m-dock__ctrl { color: rgba(0,0,0,0.7); }
  .m-dock__ctrl svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .m-dock__ctrl--side svg { width: 22px; height: 22px; }
  .m-dock__ctrl--spacer { background: transparent; border: 0; pointer-events: none; }

  /* Mobile play buttons intentionally reuse the desktop .player__play conic disc. */
  .m-dock__play.player__play {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
  }
  /* Match desktop: the React ring <span> is hidden, the actual rainbow ring
     is the button's ::before pseudo. Without this rule the ring span sits as a
     sibling grid item, pushing the glyph into a second row (visually too low). */
  .m-dock__play .player__play-ring { display: none; }
  /* Literal copy of desktop .playerbar--full .player__play-glyph rules — same DOM, same centering. */
  .m-dock__play.player__play .player__play-glyph {
    position: relative; z-index: 1;
    width: auto; height: auto;
    border-radius: 0;
    background: transparent;
    display: grid; place-items: center;
  }
  .m-dock__play.player__play .player__play-glyph.is-glyph-play { transform: translateX(1.5px); }
  .m-dock__play.player__play .player__play-glyph.is-glyph-pause { transform: none; }
  .m-dock__play.player__play .player__play-glyph .icon {
    width: 20px; height: 20px;
    color: #fff;
  }
  /* Body class so .main reserves space for our custom dock */
  body.has-mobile-dock .main { padding-bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom) + 244px) !important; }
  body.has-mobile-dock.has-mobile-dock-mini .main { padding-bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom) + 72px) !important; }

  .m-mini-player {
    position: fixed;
    z-index: 8000;
    left: 12px;
    bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom) + 12px);
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    padding: 3px;
    background:
      conic-gradient(#fff 0 var(--mini-progress, 0%), rgba(255,255,255,0.22) var(--mini-progress, 0%) 100%),
      #000;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    animation: m-mini-pop 240ms ease-out both;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .m-mini-player::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #000;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  }

  .m-mini-player__core {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
  }

  .m-mini-player__core .icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: currentColor;
  }

  .m-mini-player:active {
    transform: scale(0.96);
  }

  @keyframes m-mini-pop {
    from { opacity: 0; transform: translateY(18px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Karaoke = full-screen takeover on mobile, hides the dock + tab bar. */
  body.is-mobile:has(.karaoke-bar) .m-dock,
  body.is-mobile:has(.karaoke-bar) .m-mini-player,
  body.is-mobile:has(.karaoke-bar) .m-tabbar { display: none !important; }

  /* Karaoke = full-screen takeover on mobile, NOT covered by the dock. */
  body.is-mobile .karaoke-bar {
    position: fixed !important;
    inset: 0 !important;
    bottom: 0 !important;
    padding: 0 !important;
    z-index: 9000 !important;
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
      rgba(8,8,10,0.96);
    backdrop-filter: blur(40px) saturate(1.4);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    display: flex !important; align-items: center; justify-content: center;
  }
  :root[data-theme="light"] body.is-mobile .karaoke-bar {
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,0.06), transparent 60%),
      rgba(252,252,253,0.97);
  }
  body.is-mobile .karaoke-bar__inner {
    width: 100% !important; height: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: calc(28px + var(--m-safe-top)) 24px calc(28px + var(--m-safe-bottom)) 24px !important;
    display: flex !important; flex-direction: column !important; justify-content: center !important;
  }
  body.is-mobile .karaoke-bar__head {
    position: absolute; top: calc(12px + var(--m-safe-top));
    left: 16px; right: 16px;
  }
  body.is-mobile .karaoke-bar__close {
    width: 44px !important; height: 44px !important;
    font-size: 24px !important;
  }
  body.is-mobile .karaoke-bar__lines {
    text-align: center !important;
    align-items: center !important;
    gap: 16px !important;
  }
  body.is-mobile .karaoke-bar__line { font-size: 18px !important; }
  body.is-mobile .karaoke-bar__line.is-current {
    font-size: 30px !important;
    line-height: 1.2 !important;
    text-wrap: balance;
  }
  /* When karaoke is open on mobile, hide the playerbar so it doesn't overlap. */
  body.is-mobile:has(.karaoke-bar) .playerbar.playerbar--full,
  body.is-mobile:has(.karaoke-bar) .m-tabbar { display: none !important; }

  /* Filter bar: horizontal pill scroller, edge-fade. */
  body.is-mobile .filterbar {
    height: auto;
    padding: 8px 12px;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
    mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
  }
  body.is-mobile .filterbar::-webkit-scrollbar { display: none; }
  body.is-mobile .filterbar .chip { flex-shrink: 0; height: 32px; padding: 0 12px; }
  /* Hover-preview and Columns chips are desktop-only — hide on phone.
     The flat library (app.jsx) renders the hover-preview chip as a plain
     `.chip` (first child of .filterbar) with no modifier class, so we
     target by position. The nested-tracks page uses `.chip--hover-preview`. */
  body.is-mobile .filterbar > .chip:first-child,
  body.is-mobile .filterbar > .chip:first-of-type,
  body.is-mobile .chip--hover-preview,
  body.is-mobile .filter-chip--hover-preview,
  body.is-mobile [class*="hover-preview"].chip,
  body.is-mobile .sm-row--hover-preview,
  body.is-mobile .cols-wrap,
  body.is-mobile .chip--columns,
  body.is-mobile .filter-chip--columns { display: none !important; }

  /* ---------------- Track table → card list ---------------- */
  body.is-mobile .table-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
  body.is-mobile .thead { display: none !important; }
  body.is-mobile .tbody { overflow: visible; }
  body.is-mobile .row {
    height: auto;
    min-height: 56px;
    padding: 8px 16px 8px 14px;
    display: grid;
    grid-template-columns: 32px 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    border-bottom: 1px solid var(--line);
  }
  body.is-mobile[data-mobile-cols]:not([data-mobile-cols=""]) .row {
    grid-template-rows: auto auto;
    min-height: 64px;
    padding-top: 12px;
    padding-bottom: 12px;
    row-gap: 2px;
  }
  body.is-mobile .row.row--has-mobile-artist {
    grid-template-rows: auto auto;
    min-height: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
    row-gap: 1px;
  }
  /* Star sits in the leftmost column, full vertical span. */
  body.is-mobile .row .cell--star {
    grid-column: 1; grid-row: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
  }
  body.is-mobile[data-mobile-cols]:not([data-mobile-cols=""]) .row .cell--star {
    grid-row: 1 / span 2;
  }
  body.is-mobile .row.row--has-mobile-artist .cell--star {
    grid-row: 1 / span 2;
  }
  /* Title spans the middle column on row 1. */
  body.is-mobile .row .cell--title {
    grid-column: 2; grid-row: 1;
    min-width: 0; padding: 0;
    font-size: 15px; font-weight: 500;
    color: var(--text);
    gap: 8px;
    flex-wrap: wrap;
  }
  body.is-mobile .row .cell--title .row__title {
    overflow: hidden; text-overflow: ellipsis; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    flex: 1 1 0; min-width: 0;
    line-height: 1.18;
    overflow-wrap: anywhere;
  }
  .row__mobile-artist { display: none; }
  body.is-mobile .row__mobile-artist {
    display: block;
    flex: 0 0 100%;
    margin-left: 28px;
    margin-top: 1px;
    color: var(--text-mute);
    font-size: 12px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* End cell (pencil) anchors to the right edge, full vertical span. */
  body.is-mobile .row .cell--end {
    grid-column: 3; grid-row: 1;
    width: auto; padding: 0;
    z-index: 3;
    pointer-events: auto;
  }
  body.is-mobile[data-mobile-cols]:not([data-mobile-cols=""]) .row .cell--end {
    grid-row: 1 / span 2;
  }
  body.is-mobile .row.row--has-mobile-artist .cell--end {
    grid-row: 1 / span 2;
  }
  body.is-mobile .row .cell__edit {
    opacity: 1;
    margin: 0;
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    pointer-events: auto;
    touch-action: manipulation;
  }
  /* Hide every column except title/star/end by default on phone. The
     Tweaks panel can opt-in 1–3 columns via body[data-mobile-cols].
     The opted-in cells re-flow inline as a meta strip under the title. */
  body.is-mobile .row > .cell:not(.cell--star):not(.cell--title):not(.cell--end) {
    display: none;
  }
  /* When the user has picked columns to surface, those cells re-appear
     in row 2 as compact text. data-mobile-cols is a space-separated list
     of column ids. */
  body.is-mobile[data-mobile-cols~="bpm"] .row .cell--bpm,
  body.is-mobile[data-mobile-cols~="key"] .row .cell--key,
  body.is-mobile[data-mobile-cols~="duration"] .row .cell--duration,
  body.is-mobile[data-mobile-cols~="genre"] .row .cell--genre,
  body.is-mobile[data-mobile-cols~="status"] .row .cell--status,
  body.is-mobile[data-mobile-cols~="writer"] .row .cell--writer,
  body.is-mobile[data-mobile-cols~="tags"] .row .cell--tags,
  body.is-mobile[data-mobile-cols~="updated"] .row .cell--updated,
  body.is-mobile[data-mobile-cols~="version"] .row .cell--version {
    display: inline-flex !important;
    grid-column: auto !important; grid-row: 2 !important;
    width: auto !important;
    padding: 0 !important;
    color: var(--text-mute);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
  }
  /* Wrap meta cells in a flex row by giving the row's row 2 a contents
     container — simplest is to use the row itself with inline-flex for
     visible meta cells separated by middle dots via ::before. */
  body.is-mobile .row .cell--bpm + .cell::before,
  body.is-mobile .row > .cell[grid-row="2"] + .cell::before { content: " · "; opacity: 0.6; padding: 0 6px; }
  body.is-mobile .row:hover { background: transparent; }
  body.is-mobile .row.row--hover,
  body.is-mobile .row:active { background: var(--bg-row-hover); }
  body.is-mobile .row__star { width: var(--m-touch); height: var(--m-touch); }

  /* ---------------- Liquid glass: top bar, tab bar, sheets, drawer ----- */
  .m-topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: calc(var(--m-topbar-h) + var(--m-safe-top));
    padding-top: var(--m-safe-top);
    padding-left: max(12px, var(--m-safe-left));
    padding-right: max(12px, var(--m-safe-right));
    display: flex; align-items: center; gap: 8px;
    /* 2026-05-11 iOS visibility fix: backdrop-filter sometimes fails to
       apply on iOS Safari (or applies but renders translucent over the
       app), leaving the previous rgba(14,14,16,0.55) fallback visually
       indistinguishable from the page bg. Bumped solid base to 0.92
       alpha + brighter top-edge gradient so the bar is always visible
       even when blur is rejected. Real-device fix pending Tommy's debug
       session, this keeps the chrome readable until then. */
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
      rgba(14,14,16,0.92);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border-bottom: 1px solid rgba(255,255,255,0.14);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.10);
    z-index: 8000;
    color: var(--text);
  }
  :root[data-theme="light"] .m-topbar {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6)),
      rgba(252,252,253,0.7);
    border-bottom-color: rgba(0,0,0,0.06);
  }
  .m-topbar__menu {
    width: 40px; height: 40px;
    display: inline-grid; place-items: center;
    border-radius: 10px;
    background: transparent; border: 0;
    position: relative;
  }
  .m-topbar__menu:active { background: var(--bg-3); }
  .m-topbar__menu span {
    position: absolute;
    left: 10px; right: 10px; height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 220ms ease, top 220ms ease, opacity 220ms ease;
  }
  .m-topbar__menu span:nth-child(1) { top: 13px; }
  .m-topbar__menu span:nth-child(2) { top: 19px; }
  .m-topbar__menu span:nth-child(3) { top: 25px; }
  .is-mobile-drawer-open .m-topbar__menu span:nth-child(1) { top: 19px; transform: rotate(45deg); }
  .is-mobile-drawer-open .m-topbar__menu span:nth-child(2) { opacity: 0; }
  .is-mobile-drawer-open .m-topbar__menu span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
  .m-topbar__title {
    flex: 1;
    font-size: 17px; font-weight: 600;
    margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text);
  }
  .m-topbar__actions { display: flex; gap: 4px; }
  .m-topbar__icon {
    width: 40px; height: 40px;
    display: inline-grid; place-items: center;
    border-radius: 10px; background: transparent; border: 0;
    color: var(--text-dim);
  }
  .m-topbar__icon:active { background: var(--bg-3); color: var(--text); }
  .m-topbar__icon .icon { width: 20px; height: 20px; }

  /* ---------------- Drawer scrim ---------------- */
  .m-drawer { position: fixed; inset: 0; z-index: 8500; pointer-events: none; }
  .m-drawer__scrim {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55);
    opacity: 0; transition: opacity 220ms ease;
    border: 0;
  }
  .m-drawer--open { pointer-events: auto; }
  .m-drawer--open .m-drawer__scrim { opacity: 1; }

  /* Liquid glass tab bar */
  .m-tabbar {
    position: fixed;
    left: 8px; right: 8px;
    bottom: calc(8px + var(--m-safe-bottom));
    height: var(--m-tabbar-h);
    padding-left: var(--m-safe-left);
    padding-right: var(--m-safe-right);
    display: grid; grid-template-columns: repeat(5, 1fr);
    /* 2026-05-11 iOS visibility fix: same as .m-topbar, raised the solid
       base alpha so the bar stays visible when iOS rejects backdrop-filter. */
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
      rgba(14,14,16,0.92);
    backdrop-filter: blur(32px) saturate(1.7);
    -webkit-backdrop-filter: blur(32px) saturate(1.7);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 22px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -1px 0 rgba(0,0,0,0.30),
      0 18px 40px rgba(0,0,0,0.55);
    z-index: 8000;
  }
  :root[data-theme="light"] .m-tabbar {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65)),
      rgba(252,252,253,0.7);
    border-color: rgba(0,0,0,0.06);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.9),
      0 18px 40px rgba(0,0,0,0.10);
  }
  /* Push .main padding to clear the floating bar. */
  .m-tabbar__btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    background: transparent; border: 0;
    color: var(--text-mute);
    font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.01em;
    padding: 6px 4px;
    transition: color 140ms ease, transform 120ms ease;
    position: relative;
  }
  .m-tabbar__btn:active { transform: scale(0.94); }
  .m-tabbar__btn[draggable="true"] { -webkit-user-drag: element; }
  .m-tabbar.is-editing .m-tabbar__btn {
    animation: m-tab-jiggle 420ms ease-in-out infinite alternate;
    cursor: grab;
  }
  .m-tabbar.is-editing .m-tabbar__btn:nth-child(2n) { animation-delay: -180ms; }
  .m-tabbar.is-editing .m-tabbar__btn--vault,
  .m-tabbar.is-editing .m-tabbar__btn:last-child {
    cursor: default;
    opacity: 0.82;
  }
  .m-tabbar.is-editing .m-tabbar__btn:active { cursor: grabbing; }
  .m-nav-done {
    position: fixed;
    top: calc(12px + var(--m-safe-top));
    right: calc(14px + var(--m-safe-right));
    z-index: 9102;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    background: rgba(20,20,22,0.72);
    color: #fff;
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 0 12px 34px rgba(0,0,0,0.36);
    font: 700 14px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", system-ui, sans-serif;
  }
  @keyframes m-tab-jiggle {
    from { transform: rotate(-1.6deg) translateY(0); }
    to { transform: rotate(1.6deg) translateY(-1px); }
  }
  .m-tabbar__btn.is-nav-drop,
  .m-more-list__btn.is-nav-drop {
    background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
  }
  .m-tabbar__icon { display: inline-grid; place-items: center; }
  .m-tabbar__icon .icon { width: 22px; height: 22px; }
  .m-tabbar__label { line-height: 1; }
  .m-tabbar__btn--active { color: var(--accent); }
  .m-tabbar__btn--active::before {
    content: "";
    position: absolute; top: 4px; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 3px;
    background: var(--accent);
    border-radius: 999px;
    box-shadow: 0 0 12px var(--accent-glow);
  }

  /* ---------------- Mini player ---------------- */
  .m-mini {
    position: fixed;
    left: 8px; right: 8px;
    bottom: calc(var(--m-tabbar-h) + 4px + var(--m-safe-bottom));
    height: var(--m-mini-h);
    z-index: 7999;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 8px;
    background: rgba(20,20,24,0.92);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.45);
    overflow: hidden;
    color: var(--text);
    text-align: left;
  }
  :root[data-theme="light"] .m-mini { background: rgba(252,252,253,0.92); }
  .m-mini__art {
    width: 44px; height: 44px; border-radius: 8px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, oklch(0.40 0.14 var(--accent-hue)), oklch(0.20 0.06 var(--accent-hue)));
    color: #fff;
    flex-shrink: 0;
  }
  .m-mini__art .icon { width: 18px; height: 18px; }
  .m-mini__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .m-mini__title {
    font-size: 14px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text);
  }
  .m-mini__sub {
    font-size: 11.5px; color: var(--text-mute);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .m-mini__play {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: var(--accent); color: #0a0a0a; border: 0;
    box-shadow: 0 4px 12px var(--accent-glow);
  }
  .m-mini__play:active { transform: scale(0.94); }
  .m-mini__play .icon { width: 16px; height: 16px; }
  .m-mini__progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: rgba(255,255,255,0.06);
  }
  .m-mini__progress-fill {
    height: 100%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
    transition: width 80ms linear;
  }
  /* Mark body when a track is loaded so .main can grow padding-bottom. */
  body.has-mini-player {} /* set by JS — see hook below */

  /* ---------------- Sheets (generic) ---------------- */
  .m-sheet {
    position: fixed; inset: 0; z-index: 9500;
    pointer-events: none;
  }
  .m-sheet__scrim {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55);
    opacity: 0; transition: opacity 240ms ease;
    border: 0;
  }
  .m-sheet--open { pointer-events: auto; }
  .m-sheet--open .m-sheet__scrim { opacity: 1; }
  /* Sheets get liquid glass too */
  .m-sheet__card {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 88dvh;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)),
      rgba(20,20,24,0.72);
    backdrop-filter: blur(36px) saturate(1.7);
    -webkit-backdrop-filter: blur(36px) saturate(1.7);
    color: var(--text);
    border-top-left-radius: var(--m-sheet-radius);
    border-top-right-radius: var(--m-sheet-radius);
    border: 1px solid rgba(255,255,255,0.10);
    border-bottom: 0;
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0.24, 1);
    padding-bottom: var(--m-safe-bottom);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      0 -16px 50px rgba(0,0,0,0.55);
  }
  :root[data-theme="light"] .m-sheet__card {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78)),
      rgba(252,252,253,0.85);
    border-color: rgba(0,0,0,0.06);
  }
  .m-sheet__card.is-dragging { transition: none; }
  .m-sheet--open .m-sheet__card { transform: translateY(0); }
  .m-sheet--full .m-sheet__card { max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .m-sheet--full .m-sheet__head {
    padding-top: calc(16px + var(--m-safe-top));
  }
  .m-sheet--full .m-sheet__handle {
    top: calc(8px + var(--m-safe-top));
  }
  .m-sheet__head {
    position: relative;
    flex-shrink: 0;
    padding: 14px 56px 12px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    cursor: grab;
    touch-action: none;
  }
  .m-sheet__handle {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px;
    background: var(--text-mute);
    opacity: 0.4;
    border-radius: 999px;
  }
  .m-sheet__title {
    font-size: 15px; font-weight: 600;
    color: var(--text);
    margin-top: 6px;
  }
  .m-sheet__close {
    position: absolute;
    top: 50%; right: 12px;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    display: inline-grid; place-items: center;
    background: var(--bg-3);
    border: 0; border-radius: 50%;
    color: var(--text);
    font-size: 18px; line-height: 1;
  }
  .m-sheet__body {
    flex: 1; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
  }

  /* "More" sheet list */
  .m-more-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  .m-more-list__btn {
    width: 100%;
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    background: var(--bg-3);
    border: 0; border-radius: 12px;
    color: var(--text);
    font-size: 15px;
    text-align: left;
  }
  .m-more-list__btn:active { background: var(--line); transform: scale(0.99); }
  .m-more-list__icon { display: inline-grid; place-items: center; color: var(--text-dim); }
  .m-more-list__icon .icon { width: 18px; height: 18px; }
  .m-more-list__chev { color: var(--text-mute); font-size: 22px; line-height: 1; }

  /* More sheet: dark iOS liquid-glass variant. */
  .m-sheet--more .m-sheet__scrim {
    background: rgba(0,0,0,0.40);
    transition: opacity 200ms ease;
  }
  .m-sheet--more .m-sheet__card {
    max-height: 86dvh;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-bottom: 0;
    background: rgba(20,20,22,0.55);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    box-shadow: 0 -16px 48px rgba(0,0,0,0.55);
    color: #fff;
  }
  :root[data-theme="light"] .m-sheet--more .m-sheet__card {
    background: rgba(20,20,22,0.55);
    border-color: rgba(255,255,255,0.08);
    color: #fff;
  }
  .m-sheet--more .m-sheet__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
    pointer-events: none;
  }
  .m-sheet--more .m-sheet__head {
    min-height: 50px;
    padding: 20px 56px 10px;
    border-bottom: 0;
    cursor: grab;
  }
  .m-sheet--more .m-sheet__handle {
    top: 8px;
    width: 36px;
    height: 5px;
    background: rgba(255,255,255,0.25);
    opacity: 1;
  }
  .m-sheet--more .m-sheet__title {
    color: rgba(255,255,255,0.86);
    font-size: 15px;
  }
  .m-sheet--more .m-sheet__close {
    top: 12px;
    right: 12px;
    transform: none;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.60);
  }
  .m-sheet--more .m-sheet__body {
    padding: 12px 16px calc(16px + var(--m-safe-bottom));
  }
  .m-sheet--more .m-more-list {
    gap: 12px;
  }
  .m-sheet--more .m-more-list__item {
    margin: 0;
  }
  .m-sheet--more .m-more-list__item--group2,
  .m-sheet--more .m-more-list__item--group3 {
    margin-top: 4px;
  }
  .m-sheet--more .m-more-list__item--group4 {
    margin-top: 10px;
  }
  .m-sheet--more .m-more-list__btn {
    min-height: 56px;
    grid-template-columns: 24px 1fr auto 12px;
    gap: 12px;
    padding: 0 16px;
    border-radius: 16px;
    border: 0;
    background: rgba(255,255,255,0.06);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: rgba(255,255,255,0.92);
    font: 400 17px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", system-ui, sans-serif;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background 160ms ease;
  }
  .m-sheet--more .m-more-list__btn:active {
    background: rgba(255,255,255,0.12);
    transform: scale(0.98);
  }
  .m-sheet--more .m-more-list__icon {
    color: rgba(255,255,255,0.80);
  }
  .m-sheet--more .m-more-list__icon .icon {
    width: 24px;
    height: 24px;
  }
  .m-sheet--more .m-more-list__chev {
    width: 12px;
    color: rgba(255,255,255,0.35);
    font-size: 20px;
    text-align: right;
  }
  .m-sheet--more .m-more-list__btn--logout {
    color: #FF453A;
    font-weight: 500;
  }
  .m-sheet--more .m-more-list__btn--logout .m-more-list__icon,
  .m-sheet--more .m-more-list__btn--logout .m-more-list__chev {
    color: #FF453A;
  }
  .m-sheet--more .m-more-list__btn.is-locked {
    cursor: default;
  }
  .m-sheet--more .m-more-list__lock {
    padding: 4px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.55);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  @media (prefers-contrast: more) {
    .m-sheet--more .m-sheet__card { background: rgba(20,20,22,0.82); }
    .m-sheet--more .m-more-list__btn { background: rgba(255,255,255,0.12); }
  }

  /* Now-Playing sheet content — landscape layout */
  .m-np {
    display: flex; flex-direction: column; gap: 22px;
    padding: 8px 4px 24px;
    height: 100%;
  }
  .m-np--landscape { justify-content: center; }
  .m-np__head {
    display: grid;
    grid-template-columns: 56px 1fr 40px;
    gap: 14px; align-items: center;
    padding: 0 4px;
  }
  .m-np__art-sm {
    width: 56px; height: 56px; border-radius: 12px;
    background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
    border: 1px solid var(--line);
    display: grid; place-items: center;
  }
  .m-np__art-sm .icon { width: 22px; height: 22px; color: var(--text-mute); }
  .m-np__meta-h { min-width: 0; }
  .m-np__meta-h .m-np__title {
    font-size: 16px; font-weight: 700;
    color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: left;
    margin: 0;
  }
  .m-np__meta-h .m-np__sub {
    font-size: 12px; color: var(--text-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: left;
  }
  .m-np__star {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: transparent; border: 0; color: var(--text-dim);
    cursor: pointer;
  }
  .m-np__star.is-on { color: var(--accent); }
  .m-np__star .icon { width: 22px; height: 22px; }

  .m-np__wave-row {
    display: grid; grid-template-columns: 1fr auto;
    gap: 14px; align-items: center;
    padding: 0 8px;
  }
  .m-np__scrub.player__scrub--full {
    height: 36px;
    min-width: 0;
  }
  .m-np__time {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px; color: var(--text-mute);
    min-width: 40px; text-align: right;
  }

  .m-np__controls--row {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    padding: 8px 4px 0;
  }
  .m-np__send {
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: transparent; border: 0; color: var(--text-dim);
    cursor: pointer;
  }
  .m-np__send:active { background: var(--bg-3); color: var(--text); }
  .m-np__send .icon { width: 22px; height: 22px; }
  .m-np__send-spacer { display: block; }

  .m-np__transport {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 18px;
  }

  .m-np__play.player__play {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    background: transparent;
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  }
  .m-np__play.player__play .player__play-glyph {
    width: 20px;
    height: 20px;
    line-height: 0;
  }
  .m-np__play.player__play .player__play-glyph .icon {
    display: block;
    width: 20px;
    height: 20px;
    aspect-ratio: 1 / 1;
  }

  /* Hide legacy elements still referenced by old CSS */
  .m-np__art {
    display: none;
    aspect-ratio: 1 / 1;
    width: min(72vw, 320px);
    margin: 12px auto 4px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 30% 30%, oklch(0.55 0.16 var(--accent-hue)) 0%, oklch(0.16 0.06 var(--accent-hue)) 70%),
      var(--bg-3);
    display: grid; place-items: center;
    box-shadow: 0 24px 60px -8px oklch(0.20 0.10 var(--accent-hue) / 0.55);
    position: relative;
    overflow: hidden;
  }
  .m-np__art-ring {
    position: absolute; inset: 12%;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
  }
  .m-np__art-ring::before {
    content: "";
    position: absolute; inset: 16%;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .m-np__art-glyph .icon { width: 48px; height: 48px; color: rgba(255,255,255,0.85); }
  .m-np__meta { text-align: center; padding: 0 8px; }
  .m-np__title {
    font-size: 19px; font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    text-wrap: balance;
  }
  .m-np__sub { font-size: 13px; color: var(--text-mute); }
  .m-np__scrub { padding: 0 6px; }
  .m-np__scrub-track {
    position: relative;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    cursor: pointer;
  }
  .m-np__scrub-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--accent);
    border-radius: 999px;
  }
  .m-np__scrub-thumb {
    position: absolute; top: 50%;
    width: 14px; height: 14px;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  }
  .m-np__times {
    display: flex; justify-content: space-between;
    margin-top: 6px;
    font-size: 11px; font-variant-numeric: tabular-nums;
    color: var(--text-mute);
    font-family: "JetBrains Mono", monospace;
  }
  .m-np__controls {
    display: flex; align-items: center; justify-content: space-around;
    padding: 4px 0;
  }
  .m-np__ctrl {
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: transparent; border: 0;
    color: var(--text-dim);
  }
  .m-np__ctrl:active { background: var(--bg-3); color: var(--text); }
  .m-np__ctrl.is-on { color: var(--accent); }
  .m-np__ctrl .icon { width: 22px; height: 22px; }
  .m-np__play:active { transform: scale(0.96); }
  .m-np__row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
  }
  .m-np__pill {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    height: 44px;
    border-radius: 12px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 14px; font-weight: 500;
  }
  .m-np__pill:active { background: var(--line); }
  .m-np__pill .icon { width: 16px; height: 16px; }

  /* ---------------- Modals → bottom sheets on phones ---------------- */
  /* The desktop modals all use position: fixed + center-grid. On phones
     we re-style their cards to slide up from the bottom and span the
     full width. We avoid changing JS so the modal lifecycle stays. */
  body.is-mobile :is(.cmodal, .paywall, .modal, .pwm, .sm-overlay, .um-overlay, .smm-overlay, .pfv-overlay) {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  body.is-mobile :is(
    .cmodal__card,
    .paywall__card,
    .modal__card,
    .pwm__card,
    .um-modal,
    .smm-modal,
    .pfv-modal
  ) {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 92dvh !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: var(--m-sheet-radius) !important;
    border-top-right-radius: var(--m-sheet-radius) !important;
    padding-bottom: max(20px, var(--m-safe-bottom)) !important;
    transform: translateY(0) !important;
    animation: m-sheet-up 320ms cubic-bezier(0.32, 0.72, 0.24, 1);
  }
  @keyframes m-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  /* Modals with side-panel layouts: stack vertically. */
  body.is-mobile :is(.sm-grid, .um-grid, .smm-grid) {
    grid-template-columns: 1fr !important;
  }

  /* ---------- Settings modal: full-screen on phones, drill-down style ----------
     Desktop uses a 2-col grid (220px tabs | 1fr body). On phones we collapse to a
     single column with the tab list rendered as a horizontal chip rail above
     the body, and rows stack title-over-control. */
  body.is-mobile .sm-backdrop {
    place-items: end stretch !important;
    padding: var(--m-safe-top) 10px 0 !important;
  }
  body.is-mobile .sm-modal {
    grid-template-columns: 1fr !important;
    grid-template-rows: 58px auto minmax(0, 1fr) !important;
    grid-template-areas: "head" "tabs" "body" !important;
    height: calc(100dvh - var(--m-safe-top)) !important;
    max-height: calc(100dvh - var(--m-safe-top)) !important;
    border-radius: var(--m-sheet-radius) var(--m-sheet-radius) 0 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  body.is-mobile .sm-head {
    padding: 0 16px !important;
    border-bottom: 1px solid var(--line);
  }
  body.is-mobile .sm-tabs {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    padding: 10px 12px !important;
    gap: 6px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  body.is-mobile .sm-tabs::-webkit-scrollbar { display: none; }
  body.is-mobile .sm-tab {
    flex-shrink: 0 !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: var(--bg-3);
    scroll-snap-align: start;
    font-size: 13px !important;
  }
  body.is-mobile .sm-tab.is-on {
    background: var(--accent) !important;
    color: #1a0e02 !important;
    box-shadow: none !important;
  }
  body.is-mobile .sm-tab.is-on svg { color: #1a0e02 !important; }
  body.is-mobile .sm-body {
    padding: 18px 14px calc(84px + var(--m-safe-bottom)) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
  }
  /* Row: stack title above control, full-width control below. */
  body.is-mobile .sm-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  body.is-mobile .sm-row__ctrl {
    justify-content: flex-start !important;
    width: 100%;
  }
  body.is-mobile .sm-row__sub { max-width: none !important; }
  body.is-mobile .sm-slider { width: 100% !important; flex: 1; }
  body.is-mobile .sm-toggle {
    width: 52px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }
  body.is-mobile .sm-toggle__knob {
    top: 2px !important;
    left: 2px !important;
    width: 24px !important;
    height: 24px !important;
  }
  body.is-mobile .sm-toggle.is-on .sm-toggle__knob { transform: translateX(22px) !important; }
  body.is-mobile .sm-input,
  body.is-mobile .sm-select { min-width: 0 !important; width: 100%; box-sizing: border-box; }
  body.is-mobile .sm-stack { width: 100%; }
  body.is-mobile .sm-section + .sm-section { margin-top: 22px !important; }
  body.is-mobile .sm-segments { flex-wrap: wrap; }
  body.is-mobile .sm-audit { margin: 0 !important; }
  body.is-mobile .sm-audit__row { flex-wrap: wrap; padding: 10px 14px !important; white-space: normal !important; }
  /* Settings/Mixer/Share dialogs typically have a left sidebar of tabs;
     turn that into a horizontal scroller above the body on phones. */
  body.is-mobile :is(.sm-side, .um-side, .smm-side) {
    width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
    display: flex !important;
    overflow-x: auto;
    flex-direction: row !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    scrollbar-width: none;
  }
  body.is-mobile :is(.sm-side, .um-side, .smm-side)::-webkit-scrollbar { display: none; }
  body.is-mobile :is(.sm-side button, .um-side button, .smm-side button) {
    flex-shrink: 0 !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
  }

  /* ---------------- Search overlay (⌘K) ---------------- */
  body.is-mobile .search-overlay,
  body.is-mobile .cmdk,
  body.is-mobile .cmdk-root {
    top: calc(var(--m-topbar-h) + var(--m-safe-top) + 8px) !important;
    right: 0 !important;
    bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom) + 18px) !important;
    left: 0 !important;
    height: calc(100dvh - var(--m-topbar-h) - var(--m-tabbar-h) - var(--m-safe-top) - var(--m-safe-bottom) - 26px) !important;
    max-height: calc(100dvh - var(--m-topbar-h) - var(--m-tabbar-h) - var(--m-safe-top) - var(--m-safe-bottom) - 26px) !important;
    padding: 0 12px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    z-index: 7900 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
  }
  body.is-mobile :is(.search-modal, .search-overlay__card, .cmdk__card, .cmdk-panel) {
    width: min(600px, calc(100vw - 24px)) !important;
    max-width: min(600px, calc(100vw - 24px)) !important;
    height: auto !important;
    max-height: min(100%, calc(100dvh - var(--m-topbar-h) - var(--m-tabbar-h) - var(--m-safe-top) - var(--m-safe-bottom) - 26px)) !important;
    border-radius: 20px !important;
    padding-top: 0 !important;
    pointer-events: auto !important;
  }
  body.is-mobile .cmdk-root {
    align-items: flex-start !important;
    background: transparent !important;
  }
  body.is-mobile .cmdk-backdrop {
    background: rgba(0,0,0,0.40) !important;
    backdrop-filter: blur(8px) saturate(0.9) !important;
    -webkit-backdrop-filter: blur(8px) saturate(0.9) !important;
    pointer-events: auto !important;
  }
  :root[data-theme="light"] body.is-mobile .cmdk-backdrop {
    background: rgba(0,0,0,0.28) !important;
  }
  body.is-mobile .cmdk-panel {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(600px, calc(100vw - 24px)) !important;
    height: auto !important;
    max-height: 100% !important;
    padding-top: 0 !important;
    box-sizing: border-box !important;
    color: var(--text) !important;
  }
  body.is-mobile .cmdk-head {
    position: relative !important;
    top: auto !important;
    z-index: 3;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding: 16px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--line) !important;
  }
  body.is-mobile .cmdk-input {
    position: relative;
    min-height: 56px !important;
    height: auto;
    padding: 0 16px !important;
    border-radius: 14px !important;
  }
  body.is-mobile .cmdk-input .icon {
    width: 20px;
    height: 20px;
    color: oklch(0.74 0.14 var(--accent-hue) / 0.85) !important;
  }
  body.is-mobile .cmdk-input input {
    min-width: 0;
    color: var(--text) !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }
  body.is-mobile .cmdk-input input::placeholder {
    color: var(--text-mute) !important;
  }
  body.is-mobile .cmdk-clear {
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: var(--text-dim) !important;
  }
  body.is-mobile .cmdk-cancel {
    grid-column: 2;
    min-height: 44px;
    padding: 0 2px;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.82);
    font-size: 15px;
    font-weight: 600;
  }
  body.is-mobile .cmdk-save {
    display: none !important;
  }
  body.is-mobile .cmdk-loading {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #58e6d9, transparent);
    transform: scaleX(0);
    opacity: 0;
    transform-origin: left center;
    transition: opacity 120ms ease, transform 180ms ease;
  }
  body.is-mobile .cmdk-loading.is-active {
    opacity: 1;
    transform: scaleX(1);
  }
  body.is-mobile .cmdk-live,
  body.is-mobile .cmdk-save-form {
    grid-column: 1 / -1;
  }
  body.is-mobile .cmdk-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: var(--cmdk-mobile-body-h, auto) !important;
    max-height: calc(100dvh - var(--m-topbar-h) - var(--m-tabbar-h) - var(--m-safe-top) - var(--m-safe-bottom) - 180px) !important;
    padding: 8px 8px 12px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: transparent !important;
  }
  body.is-mobile .cmdk-section {
    padding: 10px 14px 6px !important;
    color: var(--text-mute) !important;
    font-size: 11px !important;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  body.is-mobile .cmdk-section--with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  body.is-mobile .cmdk-section__clear {
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }
  body.is-mobile .cmdk-list {
    margin: 0 !important;
  }
  body.is-mobile .cmdk-row {
    min-height: 44px;
    grid-template-columns: 28px minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 3px;
    margin: 1px 4px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text) !important;
    transition: transform 120ms ease, background 120ms ease;
  }
  body.is-mobile .cmdk-row:active,
  body.is-mobile .cmdk-row.is-active {
    background: oklch(0.74 0.14 var(--accent-hue) / 0.10) !important;
    box-shadow: inset 2px 0 0 oklch(0.74 0.14 var(--accent-hue) / 0.85) !important;
    transform: scale(0.99);
  }
  :root[data-theme="light"] body.is-mobile .cmdk-row:active,
  :root[data-theme="light"] body.is-mobile .cmdk-row.is-active {
    background: oklch(0.55 0.16 var(--accent-hue) / 0.10) !important;
    box-shadow: inset 2px 0 0 oklch(0.55 0.16 var(--accent-hue)) !important;
  }
  body.is-mobile .cmdk-row__icon {
    color: var(--text-mute) !important;
  }
  body.is-mobile .cmdk-row__main {
    color: var(--text) !important;
    font-size: 14px;
    line-height: 18px;
  }
  body.is-mobile .cmdk-row__meta {
    color: var(--text-mute) !important;
    font-size: 12px;
    line-height: 16px;
  }
  body.is-mobile .cmdk-row__kind,
  body.is-mobile .cmdk-row__shortcut {
    display: inline-flex !important;
  }
  body.is-mobile .cmdk-empty {
    padding: 34px 16px !important;
    color: var(--text-mute) !important;
    font-size: 14px !important;
    line-height: 1.35;
    text-align: center;
  }
  body.is-mobile .cmdk-foot {
    display: flex !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    background: transparent !important;
    border-top: 1px solid var(--line) !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 4 !important;
  }
  body.is-mobile .cmdk-keys {
    display: none !important;
  }
  body.is-mobile .cmdk-close-mobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid var(--line-strong) !important;
    background: var(--bg-3) !important;
    color: var(--text) !important;
    font: inherit !important;
    font-weight: 700 !important;
  }

  /* ---------------- Onboarding / signup flow ---------------- */
  body.is-mobile :is(.ob-shell, .signup-flow, .onboard) {
    width: 100vw !important; max-width: 100vw !important;
    height: 100dvh !important; max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: max(20px, var(--m-safe-top)) 18px max(20px, var(--m-safe-bottom)) !important;
    overflow-y: auto;
  }

  /* ---------------- Pricing page ---------------- */
  body.is-mobile .pricing,
  body.is-mobile .pricing-app {
    padding: 16px !important;
  }
  body.is-mobile .pricing__grid,
  body.is-mobile .pricing-grid,
  body.is-mobile [class*="pricing__tiers"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ---------------- Analytics / contacts / activity / shared ---------------- */
  body.is-mobile :is(.analytics, .analytics-app, .contacts-app, .activity-app, .shared-app, .shared) {
    padding: 12px 14px !important;
  }
  body.is-mobile :is(.analytics__grid, .analytics-grid, .a-grid) {
    grid-template-columns: 1fr !important;
  }
  body.is-mobile .analytics__kpi-row,
  body.is-mobile .a-kpis {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* Generic: any 2+ column grid with explicit column counts collapses to 1. */
  body.is-mobile [style*="grid-template-columns"] { /* hint only — explicit ones win */ }

  /* ---------------- Track editor (full-screen sheet) ---------------- */
  body.is-mobile :is(.te-overlay, .track-editor) {
    padding: 0 !important;
  }
  body.is-mobile :is(.te-card, .track-editor__card) {
    width: 100vw !important; max-width: 100vw !important;
    height: 100dvh !important; max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-top: max(16px, var(--m-safe-top)) !important;
    padding-bottom: max(20px, var(--m-safe-bottom)) !important;
  }

  /* ---------------- Walkthrough / tooltips ---------------- */
  body.is-mobile .walkthrough__tip {
    left: 12px !important; right: 12px !important;
    width: auto !important; max-width: none !important;
  }

  /* ---------------- General touch hygiene ---------------- */
  body.is-mobile button,
  body.is-mobile .iconbtn,
  body.is-mobile .navitem {
    min-height: var(--m-touch);
  }
  body.is-mobile .iconbtn { width: var(--m-touch); height: var(--m-touch); }
  body.is-mobile input,
  body.is-mobile select,
  body.is-mobile textarea {
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }

  /* Hide the desktop sidebar's collapse chev — drawer doesn't need it. */
  body.is-mobile .sidebar__collapse-chev { display: none !important; }

  /* The desktop sidebar's foot (quota + collapse) can still show, but
     trim it so the drawer doesn't waste vertical space. */
  body.is-mobile .sidebar__foot { padding: 10px 12px; }

  /* Drawer-mode sidebar should look expanded even if the global
     is-sidebar-collapsed is set (tablet portrait carry-over). */
  body.is-mobile.is-mobile-drawer-open.is-sidebar-collapsed .sidebar__nav .navitem {
    width: auto !important; justify-content: flex-start !important;
    padding: 7px 10px !important; gap: 10px !important;
  }

  /* When tweaks/settings panels render fixed at bottom-right, give them
     room above the tab bar. */
  body.is-mobile .m-topbar__icon {
    width: var(--m-touch) !important;
    height: var(--m-touch) !important;
  }
  body.is-mobile .m-topbar__brand {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 6px 8px;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    height: 40px;
  }
  body.is-mobile .m-topbar__brand:active { opacity: 0.85; }
  /* Use the same sidebar wordmark stack (bar + SESSION img) but scaled to
     fit the mobile top bar. The desktop sidebar CSS provides bar/tinting/
     vault visuals — we just override the image height and gap. */
  body.is-mobile .m-topbar__wordmark-stack {
    gap: 3px;
    width: fit-content;
    flex-shrink: 1;
    min-width: 0;
  }
  body.is-mobile .m-topbar__brand .sidebar__logo-img {
    height: 22px;
    width: auto;
  }
  body.is-mobile .m-topbar__brand .sidebar__logo-bar {
    height: 3px;
    width: 94%;
  }
  /* Tier pill on mobile: smaller, sits to the right of the wordmark. */
  body.is-mobile .m-topbar__tier-pill {
    flex-shrink: 0;
    font-size: 9px;
    padding: 2px 7px;
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  /* Vault state: shrink the SVG mark to fit the mobile bar height. */
  /* Override sidebar collapsed-state hiders so the mobile top-bar wordmark
     + tier pill stay visible regardless of any `is-sidebar-collapsed` flag
     that might be sticky from a previous tablet-portrait session. We
     re-implement theme-aware show/hide here instead of using `revert`,
     because revert dropped the theme rules and showed BOTH variants. */
  body.is-mobile .m-topbar__brand .sidebar__logo-bar { display: flex !important; }
  body.is-mobile .m-topbar__tier-pill { display: inline-flex !important; }
  /* Default (dark): show the dark variant, hide the light one. */
  body.is-mobile .m-topbar__brand .sidebar__logo-img--dark { display: inline-block !important; }
  body.is-mobile .m-topbar__brand .sidebar__logo-img--light { display: none !important; }
  /* Light theme: flip. */
  :root[data-theme="light"] body.is-mobile .m-topbar__brand .sidebar__logo-img--dark { display: none !important; }
  :root[data-theme="light"] body.is-mobile .m-topbar__brand .sidebar__logo-img--light { display: inline-block !important; }
  /* Vault state hides both bar + img regardless of theme. Bumped specificity
     by chaining both variant classes so this wins over the theme-show
     rules above (which match a single variant class). */
  body.is-mobile .m-topbar__brand.is-vault .sidebar__logo-img.sidebar__logo-img--dark,
  body.is-mobile .m-topbar__brand.is-vault .sidebar__logo-img.sidebar__logo-img--light,
  body.is-mobile .m-topbar__brand.is-vault .sidebar__logo-bar {
    display: none !important;
  }
  /* Force the "Session Vault" text inside the SVG to render even when
     `is-sidebar-collapsed` is sticky on the body (which hides it on
     desktop). On mobile we have room for the full lockup. */
  body.is-mobile .m-topbar__brand .sidebar__vault-text { display: inline !important; }
  /* Bar-hidden state hides the colourful bar but keeps the wordmark. */
  body.is-mobile .m-topbar__brand.is-bar-hidden .sidebar__logo-bar {
    display: none !important;
  }
  body.is-mobile .m-topbar__brand .sidebar__vault-mark {
    height: 32px;
    width: auto;
    display: none;
  }
  body.is-mobile .m-topbar__brand.is-vault .sidebar__vault-mark { display: block !important; }
  body.is-mobile [class*="tweaks-panel"],
  body.is-mobile [class*="TweaksPanel"] {
    bottom: calc(var(--m-tabbar-h) + 16px + var(--m-safe-bottom)) !important;
  }

  body.is-mobile .m-topbar,
  body.is-mobile .m-tabbar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body.is-mobile .m-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9002 !important;
    min-height: calc(60px + var(--m-safe-top)) !important;
  }
  body.is-mobile .m-tabbar {
    position: fixed !important;
    left: max(8px, var(--m-safe-left)) !important;
    right: max(8px, var(--m-safe-right)) !important;
    bottom: 0 !important;
    z-index: 9001 !important;
    pointer-events: auto !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }
  body.is-mobile .m-tabbar__btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    pointer-events: auto !important;
  }
  body.is-mobile .m-tabbar__label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.is-mobile #__mobile-shell { display: block !important; }
  .m-portrait-lock {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    padding: max(18px, var(--m-safe-top)) max(18px, var(--m-safe-right)) max(18px, var(--m-safe-bottom)) max(18px, var(--m-safe-left));
    background: var(--bg);
    color: var(--text);
  }
  .m-portrait-lock__card {
    width: min(360px, calc(100vw - 36px));
    padding: 22px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--bg-2);
    box-shadow: 0 24px 80px rgba(0,0,0,0.22);
    text-align: center;
  }
  .m-portrait-lock__mark {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: color-mix(in oklab, var(--accent) 18%, var(--bg-3));
    color: var(--accent);
    font: 800 16px/1 "Geist", "Inter", system-ui, sans-serif;
  }
  .m-portrait-lock__title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .m-portrait-lock__body {
    margin-top: 6px;
    color: var(--text-mute);
    font-size: 13px;
    line-height: 1.35;
  }
}

/* =====================================================================
   COMPACT PHONE (≤390px) — extra polish for the smallest viewports
   ===================================================================== */
@media (max-width: 390px) {
  .m-tabbar__label { font-size: 9.5px; }
  .m-mini__sub { font-size: 11px; }
  .m-topbar__title { font-size: 16px; }
}

/* =====================================================================
   PHONE SAFE AREAS — notch/home-indicator spacing
   ===================================================================== */
@media (max-width: 767px) {
  /* Notch safety: top bar adopts the safe-area inset, so the title
     never collides with a Dynamic Island / notch. */
  body.is-mobile .m-topbar {
    padding-top: var(--m-safe-top) !important;
    height: calc(var(--m-topbar-h) + var(--m-safe-top)) !important;
  }
  /* Tab bar: respect bottom inset (home indicator). */
  body.is-mobile .m-tabbar {
    padding-bottom: var(--m-safe-bottom) !important;
    height: calc(var(--m-tabbar-h) + var(--m-safe-bottom)) !important;
  }

  /* Sign-in page (signin.html) — tighter logo lockup on phones so the
     wordmark + product name fit one viewport without scroll. */
  .sv-lockup__brand { font-size: 18px !important; }
  .sv-lockup__product { font-size: 28px !important; }
  .sv-logo-row { margin-bottom: 18px !important; }
}

/* =====================================================================
   PRINT — reset mobile chrome so saving as PDF looks like the deck
   ===================================================================== */

/* Hover-preview is a desktop-only feature — kill the floating tooltip
   and any preview waveform on touch devices regardless of viewport. */
@media (hover: none), (pointer: coarse) {
  .preview-tooltip, .preview-tooltip--nested { display: none !important; }
}
body.is-mobile .preview-tooltip,
body.is-mobile .preview-tooltip--nested,
body.is-mobile .row__waveform,
body.is-mobile .row__progress { display: none !important; }

@media print {
  .m-topbar, .m-tabbar, .m-mini, .m-sheet, .m-drawer { display: none !important; }
}

/* =====================================================================
   Native confirm/prompt → bottom sheet on phones
   The host renders .confirm-modal__panel; on phone widths we re-skin it
   as a sheet so it matches the rest of the mobile UI.
   ===================================================================== */
@media (max-width: 767px) {
  .confirm-modal__panel {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    animation: cm-sheet-rise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }
  @keyframes cm-sheet-rise {
    from { transform: translateY(100%); opacity: 0.6; }
    to   { transform: translateY(0); opacity: 1; }
  }
  .confirm-modal__panel::before {
    content: "";
    position: absolute; top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    border-radius: 999px;
    background: var(--text-mute);
    opacity: 0.4;
  }
  .confirm-modal__title { padding-top: 8px; font-size: 18px; }
  .confirm-modal__actions { flex-direction: column-reverse !important; gap: 10px !important; }
  .confirm-modal__actions .confirm-modal__btn {
    width: 100% !important;
    height: var(--m-touch) !important;
    justify-content: center !important;
    font-size: 15px !important;
  }
}

/* =====================================================================
   Playlist swipe-to-delete — ONLY inside playlist views, never Library.
   The .pfv-row (playlist flow view row) gets touch-action: pan-y so
   horizontal drags don't scroll, and the swipe layer is provided by JS.
   We render the underlay via CSS so even unscripted environments show
   intent.
   ===================================================================== */
@media (max-width: 767px) {
  .pfv-row, [data-mobile-swipeable="playlist-row"] {
    position: relative;
    touch-action: pan-y;
    transition: transform 0.18s ease;
    background: var(--bg-2);
  }
  .pfv-row[data-swiping="true"], [data-mobile-swipeable="playlist-row"][data-swiping="true"] {
    transition: none;
  }
  .pfv-row::after, [data-mobile-swipeable="playlist-row"]::after {
    content: "Remove";
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 96px;
    display: flex; align-items: center; justify-content: center;
    background: oklch(58% 0.20 25);
    color: #fff;
    font-size: 13px; font-weight: 600;
    transform: translateX(100%);
    pointer-events: none;
    z-index: -1;
  }
  .pfv-row[data-swipe-revealed="true"]::after,
  [data-mobile-swipeable="playlist-row"][data-swipe-revealed="true"]::after {
    transform: translateX(0);
  }
}

/* =====================================================================
   Library: smarter column collapse on narrow widths
   Hide low-priority columns automatically before the full mobile card
   layout kicks in (covers ~600–767px landscape phones / phablets).
   ===================================================================== */
@media (max-width: 900px) and (min-width: 768px) {
  .col-tags, .col-genre, .col-updated, .col-bitrate, .col-explicit { display: none !important; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .col-tags, .col-bitrate { display: none !important; }
}

/* =====================================================================
   Library mobile in-place filter
   ===================================================================== */
@media (max-width: 767px) {
  .m-lib-filter {
    position: sticky;
    top: calc(var(--m-topbar-h, 60px) + var(--m-safe-top, env(safe-area-inset-top, 0px)));
    z-index: 820;
    display: grid;
    gap: 8px;
    padding: 8px 16px 10px;
    background: linear-gradient(180deg, #0a0a0c 0%, rgba(10,10,12,0.92) 76%, rgba(10,10,12,0) 100%);
    transform: translateY(0);
    transition: transform 180ms ease, opacity 180ms ease;
  }
  .m-lib-filter.is-hidden {
    transform: translateY(calc(-100% - 4px));
    opacity: 0;
    pointer-events: none;
  }
  .m-lib-filter__field {
    min-height: 44px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    color: #fff;
  }
  .m-lib-filter__field:focus-within {
    border-color: rgba(255,255,255,0.25);
  }
  .m-lib-filter__field svg {
    width: 18px;
    height: 18px;
    color: rgba(255,255,255,0.60);
  }
  .m-lib-filter__field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: 500 15px/1.2 "Geist", "Inter", system-ui, sans-serif;
  }
  .m-lib-filter__field input::placeholder {
    color: rgba(255,255,255,0.45);
  }
  .m-lib-filter__clear {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 0;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.82);
    font: 700 18px/1 system-ui, sans-serif;
  }
  :root[data-theme="light"] .m-lib-filter {
    background: linear-gradient(180deg, rgba(246,247,250,0.98) 0%, rgba(246,247,250,0.88) 76%, rgba(246,247,250,0) 100%);
  }
  :root[data-theme="light"] .m-lib-filter__field {
    border-color: rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.86);
    color: #111114;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  }
  :root[data-theme="light"] .m-lib-filter__field:focus-within {
    border-color: rgba(0,0,0,0.22);
  }
  :root[data-theme="light"] .m-lib-filter__field svg {
    color: rgba(0,0,0,0.52);
  }
  :root[data-theme="light"] .m-lib-filter__field input {
    color: #111114;
  }
  :root[data-theme="light"] .m-lib-filter__field input::placeholder {
    color: rgba(0,0,0,0.44);
  }
  :root[data-theme="light"] .m-lib-filter__clear {
    background: rgba(0,0,0,0.08);
    color: rgba(0,0,0,0.70);
  }
  .m-lib-filter__chips {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    min-height: 36px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .m-lib-filter__chips::-webkit-scrollbar { display: none; }
  .m-lib-filter__chip,
  .m-lib-sort__button {
    flex: 0 0 auto;
    min-height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    color: rgba(255,255,255,0.70);
    padding: 0 12px;
    font: 650 12px/1 "Geist", "Inter", system-ui, sans-serif;
  }
  .m-lib-filter__chip.is-active {
    background: #000;
    color: #fff;
    border-color: #000;
  }
  .m-lib-sort {
    position: relative;
    flex: 0 0 auto;
    margin-left: 2px;
  }
  .m-lib-sort__button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.06);
  }
  .m-lib-sort__button span {
    color: #fff;
  }
  .m-lib-sort__sheet {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(var(--m-tabbar-h, 72px) + var(--m-safe-bottom, env(safe-area-inset-bottom, 0px)) + 14px);
    z-index: 9300;
    padding: 10px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(20,20,22,0.66);
    -webkit-backdrop-filter: blur(34px) saturate(180%);
    backdrop-filter: blur(34px) saturate(180%);
    box-shadow: 0 18px 48px rgba(0,0,0,0.44);
    display: grid;
    gap: 8px;
  }
  .m-lib-sort__item {
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.78);
    text-align: left;
    padding: 0 14px;
    font: 550 15px/1 "Geist", "Inter", system-ui, sans-serif;
  }
  .m-lib-sort__item.is-active {
    background: #000;
    color: #fff;
  }
}

/* =====================================================================
   VAULT HOME — mobile dashboard above the Library list
   ===================================================================== */
@media (max-width: 767px) {
  .m-vh-host {
    display: block;
    padding: 16px 16px 24px;
    background: var(--bg-1);
    /* When body.is-mobile-vault, this host overlays the app shell so the
       dashboard is its own full-bleed view, not just a header above the
       library list. */
  }
  body.is-mobile-vault main.main > *:not(.m-vh-host) {
    display: none !important;
  }
  body.is-mobile-vault main.main {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .m-vh {
    display: flex; flex-direction: column; gap: 18px;
  }
  .m-vh__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 6px 0 0;
  }
  .m-vh__hello-eyebrow {
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-mute);
  }
  .m-vh__hello-title {
    font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
    color: var(--text); margin: 4px 0 0;
    font-family: "Geist", "Inter", sans-serif;
  }
  .m-vh__head-link {
    background: transparent; border: 0; color: var(--text-dim);
    font-size: 13px; font-weight: 500;
    padding: 6px 0; cursor: pointer;
  }
  .m-vh__head-link:active { color: var(--text); }

  /* Stats row */
  .m-vh__stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .m-vh__stat {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 14px 12px;
    display: flex; flex-direction: column; gap: 6px;
    min-height: 96px;
    position: relative; overflow: hidden;
    color: var(--text);
    text-align: left;
  }
  button.m-vh__stat {
    appearance: none;
    font: inherit;
    cursor: pointer;
  }
  button.m-vh__stat:active {
    opacity: 0.9;
    transform: translateY(1px);
  }
  button.m-vh__stat:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--accent) 74%, white);
    outline-offset: 2px;
  }
  .m-vh__stat--accent {
    background: linear-gradient(155deg,
      color-mix(in oklab, var(--accent) 22%, var(--bg-2)) 0%,
      var(--bg-2) 70%);
    border-color: color-mix(in oklab, var(--accent) 35%, var(--line));
  }
  .m-vh__stat-num {
    font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
    color: var(--text); line-height: 1;
    font-family: "Geist", "Inter", sans-serif;
  }
  .m-vh__stat-lbl {
    font-size: 12px; color: var(--text-mute);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .m-vh__stat-spark {
    margin-top: auto;
    display: flex; align-items: flex-end; gap: 3px;
    height: 28px;
  }
  .m-vh__stat-spark span {
    flex: 1; background: color-mix(in oklab, var(--accent) 60%, transparent);
    border-radius: 2px;
    min-height: 4px;
  }
  .m-vh__stat-foot {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text);
  }
  .m-vh__pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #16c784;
    box-shadow: 0 0 0 0 rgba(22, 199, 132, 0.6);
    animation: m-vh-pulse 1.6s ease-out infinite;
  }
  @keyframes m-vh-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(22, 199, 132, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(22, 199, 132, 0); }
    100% { box-shadow: 0 0 0 0   rgba(22, 199, 132, 0); }
  }

  /* Section heads */
  .m-vh__section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 2px 0;
  }
  .m-vh__section-title {
    font-size: 13px; font-weight: 600;
    color: var(--text);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin: 0;
  }
  .m-vh__section-meta {
    font-size: 11px; color: var(--text-mute);
    font-family: "JetBrains Mono", monospace;
  }
  .m-vh__section-head--catalog {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }

  /* Recent shares rail */
  .m-vh__rail {
    display: flex; gap: 10px;
    overflow-x: auto; overflow-y: hidden;
    padding: 2px 16px 6px;
    margin: 0 -16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .m-vh__rail::-webkit-scrollbar { display: none; }
  .m-vh__share {
    flex: 0 0 230px;
    scroll-snap-align: start;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
    display: flex; flex-direction: column; gap: 8px;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    position: relative;
  }
  .m-vh__share:active { background: var(--bg-3); }
  .m-vh__share.is-live {
    border-color: color-mix(in oklab, #16c784 50%, var(--line));
    background: linear-gradient(160deg,
      color-mix(in oklab, #16c784 14%, var(--bg-2)) 0%,
      var(--bg-2) 60%);
  }
  .m-vh__share-top {
    display: flex; align-items: center; justify-content: space-between;
  }
  .m-vh__share-art {
    width: 36px; height: 36px; border-radius: 9px;
    background: linear-gradient(135deg, var(--bg-3), var(--bg-1));
    border: 1px solid var(--line);
    display: grid; place-items: center;
  }
  .m-vh__share-art .icon { width: 16px; height: 16px; color: var(--text-mute); }
  .m-vh__share-ago {
    font-size: 11px; color: var(--text-mute);
    font-family: "JetBrains Mono", monospace;
  }
  .m-vh__live {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600;
    color: #16c784;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .m-vh__share-title {
    font-size: 14px; font-weight: 600;
    white-space: normal; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    line-height: 1.2;
  }
  .m-vh__share-recip {
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0;
  }
  .m-vh__share-name { font-size: 12px; color: var(--text); }
  .m-vh__share-role { font-size: 11px; color: var(--text-mute); }
  .m-vh__share-stats {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 2px;
    font-size: 11px; color: var(--text-mute);
  }
  .m-vh__share-lock {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
  }
  .m-vh__share-lock .icon { width: 11px; height: 11px; }
  .m-vh__share-pct {
    display: flex; align-items: center; gap: 8px;
    margin-top: 4px;
  }
  .m-vh__share-pct-track {
    flex: 1;
    height: 4px; border-radius: 999px;
    background: var(--bg-3);
    overflow: hidden;
  }
  .m-vh__share-pct-fill {
    height: 100%; background: #16c784;
    border-radius: inherit;
  }
  .m-vh__share-pct-num {
    font-size: 11px;
    font-family: "JetBrains Mono", monospace;
    color: #16c784;
  }

  /* For-you matches */
  .m-vh__matches {
    display: flex; flex-direction: column; gap: 8px;
  }
  .m-vh__match {
    display: grid; grid-template-columns: 40px 1fr auto;
    gap: 12px; align-items: center;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer; text-align: left;
    color: var(--text);
  }
  .m-vh__match:active { background: var(--bg-3); }
  .m-vh__match-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: color-mix(in oklab, var(--accent) 18%, var(--bg-3));
    color: var(--accent);
    display: grid; place-items: center;
  }
  .m-vh__match-icon .icon { width: 18px; height: 18px; }
  .m-vh__match-label {
    font-size: 11px; color: var(--text-mute);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .m-vh__match-title {
    font-size: 14px; font-weight: 500;
    white-space: normal; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    line-height: 1.2;
  }
  .m-vh__match-count {
    font-size: 13px; font-weight: 700;
    color: var(--accent);
    font-family: "JetBrains Mono", monospace;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--accent) 12%, transparent);
  }

  /* FAB — Generate secure link */
  .m-vault-fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--m-tabbar-h, 64px) + env(safe-area-inset-bottom, 0px) + 14px);
    z-index: 8060;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    border: 0;
    font-size: 14px; font-weight: 600;
    box-shadow:
      0 10px 24px color-mix(in oklab, var(--accent) 35%, transparent),
      0 2px 6px rgba(0,0,0,0.2);
    cursor: pointer;
  }
  body.has-mini-player .m-vault-fab {
    bottom: calc(var(--m-tabbar-h, 64px) + var(--m-mini-h, 64px) + env(safe-area-inset-bottom, 0px) + 14px);
  }
  .m-vault-fab .icon { width: 18px; height: 18px; }
  .m-vault-fab:active { transform: scale(0.97); }

  /* Light theme tweaks */
  :root[data-theme="light"] .m-vault-fab { color: #fff; }

  /* Drawer sidebar alignment. Mobile.css loads after styles.css, so keep the
     expanded drawer explicitly left-aligned here too. */
  body.is-mobile.is-mobile-drawer-open .sidebar,
  body.is-mobile.is-mobile-drawer-open .sidebar__nav,
  body.is-mobile.is-mobile-drawer-open .sidebar__group {
    align-items: stretch !important;
    text-align: left !important;
  }
  body.is-mobile.is-mobile-drawer-open .sidebar__brand,
  body.is-mobile.is-mobile-drawer-open .sidebar__section,
  body.is-mobile.is-mobile-drawer-open .navitem {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  body.is-mobile.is-mobile-drawer-open .navitem__label {
    flex: 1 1 auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }
}