/* =====================================================
   mobile.css
   Mobile Navigation Foundation — max-width: 767px
   Loaded LAST (after overrides.css) in base.html.

   New mobile-only elements (.mobile-topbar, .mobile-bottom-nav,
   .mobile-overlay, .mobile-drawer-close, .mobile-search-bar-wrap)
   default to display:none here so they are invisible on desktop.
   All layout overrides live inside @media (max-width: 767px).
===================================================== */


/* -------------------------------------------------------
   DESKTOP DEFAULT
   Hide all mobile-only elements above 767px.
   These rules have no media query wrapper so they apply
   at every viewport width; the media block below then
   overrides display for small screens only.
------------------------------------------------------- */
.mobile-topbar,
.mobile-search-bar-wrap,
.mobile-drawer-close,
.mobile-overlay,
.mobile-bottom-nav {
  display: none;
}


/* -------------------------------------------------------
   MOBILE  @media (max-width: 767px)
------------------------------------------------------- */
@media (max-width: 767px) {

  /* ==================================================
     BODY — scroll-lock while drawer is open
  ================================================== */
  body.drawer-open {
    overflow: hidden;
  }


  /* ==================================================
     MOBILE TOP BAR
     Fixed 52 px strip at the top of the viewport.
     Three-column layout: hamburger | title | search icon.
     z-index 1050 — above overlay (1000) and search wrap (1049),
     below the drawer (1100).
  ================================================== */
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: #000;
    border-bottom: 1px solid rgba(255, 105, 180, 0.22);
    box-shadow: 0 1px 0 rgba(255, 0, 255, 0.06);
    padding: 0 12px;
    z-index: 1050;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-sizing: border-box;
  }

  /* Hamburger and search-toggle buttons */
  .mobile-hamburger,
  .mobile-search-toggle {
    background: transparent;
    border: none;
    color: #ffd9f7;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms ease, background 150ms ease;
  }

  .mobile-hamburger:hover,
  .mobile-hamburger:focus-visible {
    background: rgba(255, 20, 147, 0.1);
    color: #ff69b4;
    outline: none;
  }

  .mobile-search-toggle:hover,
  .mobile-search-toggle:focus-visible {
    background: rgba(255, 20, 147, 0.1);
    color: #ff69b4;
    outline: none;
  }

  /* When search is expanded, keep the icon highlighted */
  .mobile-topbar.search-expanded .mobile-search-toggle {
    color: #ff69b4;
    background: rgba(255, 20, 147, 0.12);
  }

  /* Centered brand title — matches desktop .brand-title gradient */
  .mobile-topbar-title {
    font-size: 1.1rem;
    font-weight: 900;
    background: linear-gradient(90deg, #ff69b4, #bf5fff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    flex-shrink: 0;
    user-select: none;
    animation: breatheDropGlow 2.2s ease-in-out infinite;
  }

  @keyframes breatheDropGlow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255,105,180,0.3)); }
    50%      { filter: drop-shadow(0 0 12px rgba(255,105,180,0.7)) drop-shadow(0 0 25px rgba(255,0,255,0.3)); }
  }


  /* ==================================================
     MOBILE SEARCH BAR WRAP
     Sits just below the 52 px top bar.
     Hidden by default; shown when .mobile-topbar has
     the .search-expanded class (CSS adjacent sibling).
     z-index 1049 — just under the top bar.
  ================================================== */
  .mobile-search-bar-wrap {
    display: none;
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    background: #0a0a0a;
    border-bottom: 1px solid rgba(255, 105, 180, 0.18);
    padding: 6px 16px;
    z-index: 1049;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    animation: mobileSearchSlideDown 150ms ease forwards;
  }

  /* Adjacent-sibling selector: when topbar has .search-expanded,
     show the search bar wrap that immediately follows it. */
  .mobile-topbar.search-expanded + .mobile-search-bar-wrap {
    display: block;
  }

  @keyframes mobileSearchSlideDown {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Pill-shaped search form inside the wrap — matches desktop proportions */
  .mobile-search-form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 34px !important;
    background: rgba(17, 17, 17, 0.95) !important;
    border: 1px solid rgba(255, 105, 180, 0.7) !important;
    border-radius: 50px !important;
    padding: 0 10px 0 14px !important;
    box-shadow: 0 0 8px rgba(255, 105, 180, 0.18) !important;
    transition: box-shadow 160ms ease, border-color 160ms ease;
    max-width: 520px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .mobile-search-form:focus-within {
    box-shadow: 0 0 14px rgba(255, 0, 255, 0.3) !important;
    border-color: #ff00ff !important;
  }

  .mobile-search-input {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    padding: 0 6px !important;
    font-family: inherit;
    min-width: 0 !important;
  }

  .mobile-search-input::placeholder {
    color: rgba(255, 217, 247, 0.55);
  }

  .mobile-search-submit {
    background: none !important;
    border: none !important;
    color: #ff69b4 !important;
    font-size: 0.9rem !important;
    cursor: pointer;
    padding: 0 0 0 6px !important;
    -webkit-tap-highlight-color: transparent;
    flex: 0 0 auto !important;
    align-self: center !important;
    height: auto !important;
    width: auto !important;
  }

  .mobile-search-submit:hover {
    color: #ff00ff;
  }


  /* ==================================================
     APP LAYOUT
     Override the desktop 2-column grid and the existing
     900 px tablet horizontal-sidebar row entirely.
     Push content below the fixed top bar and above the
     fixed bottom nav.
  ================================================== */
  .app-layout {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 0 !important;
    padding-top: 52px !important;
    padding-bottom: 64px !important;
  }


  /* ==================================================
     SIDEBAR → DRAWER
     The existing <aside class="sidebar"> becomes a
     fixed left-edge drawer.  It slides off-screen by
     default and slides in when body.drawer-open is set.

     !important flags override the 900 px rules in
     layout.css (which sets display:flex; flex-direction:row;
     overflow:auto) and sidebar.css theme overrides.
  ================================================== */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 82% !important;
    max-width: 300px !important;
    height: 100vh !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #0a0a0a !important;
    border-right: 1px solid rgba(255, 105, 180, 0.18) !important;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.85) !important;
    padding: 16px 14px 24px !important;
    gap: 0 !important;
    z-index: 1100 !important;
    /* Closed state: translated fully off-screen to the left */
    transform: translateX(-100%) !important;
    transition: transform 280ms cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    will-change: transform;
  }

  /* Open state: slide in */
  body.drawer-open .sidebar {
    transform: translateX(0) !important;
  }

  /* Theme overrides for the drawer background */
  body.theme-light .sidebar {
    background: #f5f5f5 !important;
    border-right-color: rgba(255, 105, 180, 0.25) !important;
  }

  body.theme-dark .sidebar {
    background: #0a0a0a !important;
  }

  body.theme-neon .sidebar {
    background: #000 !important;
  }


  /* ==================================================
     DRAWER CLOSE BUTTON
     Shown only on mobile (default display:none overridden).
     Aligned to the top-right of the drawer interior.
  ================================================== */
  .mobile-drawer-close {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    background: transparent;
    border: none;
    color: #ff69b4;
    font-size: 1.5rem;
    padding: 4px 2px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 2px;
    flex-shrink: 0;
    min-height: 44px;
    box-sizing: border-box;
  }

  .mobile-drawer-close:hover,
  .mobile-drawer-close:focus-visible {
    color: #ff69b4;
    outline: none;
  }


  /* ==================================================
     SIDEBAR INTERNALS INSIDE THE DRAWER
  ================================================== */

  /* Brand row */
  .sidebar .sidebar-brand {
    margin-bottom: 10px;
  }

  /* Nav link list: vertical column, INTERNAL scroll so items never overflow
     into the footer's zone. The list fills all remaining drawer height
     between brand and footer. */
  .sidebar .sidebar-links {
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 2px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
    padding-bottom: 8px !important;
  }

  /* Sidebar footer: fixed slot at the bottom of the drawer. Because the nav
     above has its own scroll, nothing can overlap the footer. */
  .sidebar .sidebar-footer {
    position: static !important;
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    border-top: 1px solid rgba(255, 105, 180, 0.14) !important;
    padding: 12px 0 4px !important;
    background: transparent !important;
    order: 99 !important;
  }

  /* Parent drawer: no outer scroll — the nav handles it. */
  .sidebar {
    overflow: hidden !important;
  }

  /* Hide the sidebar search — users search via the top bar */
  .sidebar .sidebar-search {
    display: none !important;
  }


  /* ==================================================
     SUBMENUS IN THE DRAWER
     Convert from absolute popover (left: calc(100% + 12px))
     to inline max-height accordion.
     !important needed because sidebar.css sets:
       .has-submenu .submenu { position:absolute; opacity:0; pointer-events:none; }
     and its 900 px block sets opacity:1 but keeps absolute.
  ================================================== */
  .sidebar .has-submenu .submenu {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    min-width: auto !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 0 28px !important;
    /* Closed: collapse height */
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: max-height 220ms ease, padding 220ms ease !important;
    will-change: max-height;
  }

  /* Open: expand height */
  .sidebar .has-submenu.open .submenu {
    max-height: 500px !important;
    pointer-events: auto !important;
    padding: 4px 0 6px 28px !important;
  }

  /* Submenu link style */
  .sidebar .has-submenu .submenu a {
    padding: 10px 12px !important;
    font-size: 0.95rem !important;
    border-left: 2px solid rgba(255, 105, 180, 0.15);
    border-radius: 8px !important;
    display: block !important;
    margin-bottom: 2px;
    color: #ffd9f7;
    text-decoration: none;
  }

  .sidebar .has-submenu .submenu a:hover,
  .sidebar .has-submenu .submenu a:focus {
    border-left-color: #ff69b4;
    background: rgba(255, 20, 147, 0.06) !important;
    color: #fff;
  }

  /* Show the submenu-toggle chevron button that sidebar.css
     hides at 900 px with display:none */
  .sidebar .submenu-toggle {
    display: inline-flex !important;
    width: 28px !important;
    height: 28px !important;
  }


  /* ==================================================
     OVERLAY BACKDROP
     Full-viewport semi-transparent layer behind the drawer.
     Invisible by default (opacity:0, pointer-events:none).
     Becomes opaque when body.drawer-open is set.
     z-index 1000 — above bottom nav (900), below drawer (1100)
     and top bar (1050).
  ================================================== */
  .mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  body.drawer-open .mobile-overlay {
    opacity: 1;
    pointer-events: auto;
  }


  /* ==================================================
     MOBILE BOTTOM NAVIGATION BAR
     Fixed 56 px bar at the bottom of the viewport.
     Five equally-spaced items: icon + label column.
     Includes iOS safe-area-inset so it clears the home
     indicator on notched devices.
     z-index 900 — below overlay and drawer.
  ================================================== */
  .mobile-bottom-nav {
    display: flex !important;
    align-items: stretch;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    background: #000;
    border-top: 1.5px solid #ff00ff;
    box-shadow: 0 -2px 18px rgba(255, 0, 255, 0.2);
    z-index: 900;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
  }

  /* Individual nav items (links and buttons share this style) */
  .mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 3px;
    color: rgba(255, 217, 247, 0.55);
    text-decoration: none;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: color 140ms ease;
    position: relative;
    box-sizing: border-box;
  }

  .mobile-bottom-nav-item i {
    font-size: 1.2rem;
    line-height: 1;
  }

  .mobile-bottom-nav-label {
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
  }

  /* Active / hover state */
  .mobile-bottom-nav-item.active {
    color: #ff69b4;
  }

  .mobile-bottom-nav-item.active i {
    text-shadow: 0 0 8px #ff69b4, 0 0 18px rgba(255, 105, 180, 0.4);
  }

  .mobile-bottom-nav-item:hover {
    color: #ff69b4;
  }

  .mobile-bottom-nav-item:focus-visible {
    outline: 2px solid rgba(255, 105, 180, 0.55);
    outline-offset: -2px;
    border-radius: 8px;
  }

  /* Notification badge on the bell icon in the bottom nav */
  .mobile-notif-badge {
    position: absolute;
    top: 5px;
    right: calc(50% - 22px);
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #ff69b4, #bf5fff);
    color: #000;
    font-weight: 800;
    font-size: 0.65rem;
    border-radius: 999px;
    padding: 0 4px;
    line-height: 1;
    pointer-events: none;
  }

  .mobile-notif-badge.hidden {
    display: none !important;
  }


  /* ==================================================
     MAIN CONTENT AREA
     Full-width, 16 px horizontal padding, no horizontal
     scroll leakage.
  ================================================== */
  .feed-container {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Hide the desktop header (title + search bar).
     The mobile top bar replaces its visual role. */
  .top-section {
    display: none !important;
  }

  /* Feed header: reset padding; the verification bar inside
     it must remain visible. */
  .feed-header {
    padding: 0 !important;
    margin-bottom: 8px !important;
  }

  /* Verification bar: bleed to the full content width */
  .verification-bar {
    margin-left: -16px !important;
    margin-right: -16px !important;
    border-radius: 0 !important;
    margin-bottom: 10px !important;
  }

  /* Main content block */
  .content-container.main-content {
    padding: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Footer: add enough bottom padding so nothing is hidden
     behind the fixed bottom nav bar + safe area. */
  .site-footer {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 20px) !important;
    margin-bottom: 0 !important;
  }

  /* Right sidebar (if any child template renders one):
     stack it full-width below the main content. */
  .right-sidebar,
  .sidebar-right,
  [class*="right-sidebar"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    position: static !important;
  }

  /* Prevent any child-template cards from causing
     horizontal overflow. */
  .card,
  .content-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ensure images inside cards don't overflow. */
  img {
    max-width: 100%;
  }

} /* end @media (max-width: 767px) — Phase 1 */


/* =====================================================
   PHASE 2 — Homepage content mobile styles
   All rules scoped to @media (max-width: 767px).
   Appended after Phase 1 so they load last and win
   over home.css and 52-home-features.css rules.
===================================================== */

@media (max-width: 767px) {

  /* ==================================================
     HERO BANNER
     home.css: .hero-row flex row, gap 48px
     home.css: .hero-box padding 56px 46px, h1 4rem
     home.css: .hero-content max-width 980px, width min(980px,92%)
     Goal: full-width banner, tighter padding, scaled heading,
     full-width CTA button.
  ================================================== */
  .hero-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding-top: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-box {
    padding: 28px 20px 24px !important;
    border-radius: 10px !important;
    text-align: center !important;
  }

  .hero-box h1 {
    font-size: 2.2rem !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 10px !important;
  }

  .hero-box p {
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
  }

  /* CTA button: full-width, comfortable tap target */
  .hero-box .cta-button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 16px !important;
    padding: 14px 20px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    text-align: center !important;
    min-height: 44px !important;
  }

  /* Community card: home.css puts it as a flex sibling of hero-content.
     On mobile it appears below the hero (order:2) and should be hidden
     since it duplicates sidebar stats. Already hidden at 1000px in
     home.css, but reinforce at 767px. */
  .community-card {
    display: none !important;
  }


  /* ==================================================
     SOCIAL FEED ROOT
     home.css: #social-feed-root max-width 1200px, padding 0 20px
  ================================================== */
  #social-feed-root {
    max-width: 100% !important;
    margin-top: 20px !important;
    padding: 0 !important;
  }


  /* ==================================================
     WHY RATE MUSIC + NEW HERE — features section
     52-home-features.css:
       .features-card — 2-col grid (1fr 340px)
       .features-card .right — flex row at 880px
       .features-badge — display:none at 880px
     Goal: single column, tighten padding, keep badge visible.
  ================================================== */
  .features {
    margin: 20px 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  .features-card {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 16px !important;
    border-radius: 10px !important;
  }

  .features-card .left h2 {
    font-size: 1.3rem !important;
    margin-bottom: 6px !important;
  }

  .features-card .left p.lead {
    font-size: 0.9rem !important;
    margin-bottom: 10px !important;
  }

  .features-list {
    gap: 10px !important;
  }

  .features-list li {
    padding-left: 36px !important;
    font-size: 0.9rem !important;
  }

  .features-list li .muted {
    font-size: 0.85rem !important;
  }

  /* Right column stacks vertically on mobile */
  .features-card .right {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .features-cta {
    padding: 14px !important;
  }

  .features-cta h4 {
    font-size: 1rem !important;
  }

  .features-cta p {
    font-size: 0.88rem !important;
  }

  /* CTA small link: full-width, 44px touch target */
  .features-cta a.cta-small {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    text-align: center !important;
    min-height: 44px !important;
    line-height: 1.2 !important;
  }

  /* Restore badge visibility — hidden at 880px in 52-home-features.css */
  .features-badge {
    display: block !important;
    padding: 10px !important;
    font-size: 0.88rem !important;
  }


  /* ==================================================
     FEED CONTROLS (tabs + period pills)
     home.css: .feed-controls flex-direction column, centered
     home.css: .feed-tabs gap 12px, .period-pills gap 6px
     Goal: tabs scrollable in one row so they don't wrap
     awkwardly; period pills scroll horizontally too.
  ================================================== */
  .feed-controls {
    margin-bottom: 14px !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .feed-tabs {
    gap: 6px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 2px !important;
    /* Hide scrollbar visually but keep it functional */
    scrollbar-width: none !important;
  }

  .feed-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .feed-tabs > button[data-filter] {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    padding: 9px 14px !important;
    font-size: 0.9rem !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }

  .period-pills {
    gap: 5px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }

  .period-pills::-webkit-scrollbar {
    display: none !important;
  }

  .period-pills button {
    flex-shrink: 0 !important;
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
    min-height: 36px !important;
    white-space: nowrap !important;
  }


  /* ==================================================
     HYBRID COMPOSER
     hybrid-composer.css: .hybrid-composer padding 20px,
       .composer-actions flex-wrap wrap,
       .composer-submit margin-left auto
     Goal: compact padding, full-width submit, action bar
     scrolls horizontally so it doesn't wrap to 3 rows.
  ================================================== */
  .hybrid-composer {
    padding: 14px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }

  .composer-header {
    gap: 10px !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }

  .composer-avatar {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    font-size: 1rem !important;
  }

  .composer-textarea {
    min-height: 72px !important;
    font-size: 1rem !important;
    padding: 10px !important;
  }

  /* Actions row: wraps so the song-attach field drops to its own full-width
     row instead of being squished in a horizontal-scroll strip. Order keeps
     Add Media + Public + NSFW together (1), then the song field (2), then the
     full-width Post button (3). */
  .composer-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 10px 0 !important;
  }
  .composer-actions .file-input-wrapper,
  .composer-actions .composer-visibility-pill,
  .composer-actions .composer-nsfw-toggle {
    order: 1 !important;
    flex: 0 0 auto !important;
  }

  .composer-actions::-webkit-scrollbar {
    display: none !important;
  }

  .media-btn,
  .emoji-btn,
  .gif-btn {
    flex-shrink: 0 !important;
    padding: 7px 10px !important;
    font-size: 0.88rem !important;
    min-height: 36px !important;
    white-space: nowrap !important;
  }

  .aspect-toggle {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Submit button: full width below the actions row (order 3 = last). */
  .composer-submit {
    order: 3 !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    min-height: 44px !important;
    border-radius: 12px !important;
  }

  /* Rating widget inside composer — its own full-width row (order 2), never squished. */
  .rating-creation-container {
    order: 2 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  .rating-search-group {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .rating-input-group {
    flex-shrink: 0 !important;
    width: auto !important;
  }

  .rating-input {
    width: 60px !important;
  }

  /* GIF picker full-width on mobile */
  .gif-picker {
    width: 100% !important;
    right: 0 !important;
    left: 0 !important;
  }

  /* Emoji picker: keep within viewport */
  .emoji-picker {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 28px) !important;
  }

  /* Media preview grid: 2 columns */
  .media-preview-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    max-height: 220px !important;
  }


  /* ==================================================
     FEED ITEMS (posts)
     home.css: .feed-item padding 20px, border-radius 16px
     home.css: .post-header gap 16px
     home.css: .post-actions gap 16px, button padding 10px 16px
     Goal: full-width posts, tighter padding,
     actions row scrollable so buttons don't stack.
  ================================================== */
  .feed-list {
    gap: 14px !important;
  }

  .feed-item {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    /* Disable the hover lift — it jitters on touch */
    transition: none !important;
  }

  .feed-item:hover {
    transform: none !important;
  }

  .post-header {
    gap: 10px !important;
    margin-bottom: 8px !important;
    align-items: flex-start !important;
  }

  .post-avatar {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
  }

  .post-avatar .default-avatar {
    border-radius: 10px !important;
    font-size: 1rem !important;
  }

  .post-meta .post-user {
    font-size: 0.98rem !important;
  }

  .post-meta .post-time {
    font-size: 0.8rem !important;
  }

  .post-body {
    font-size: 0.95rem !important;
    margin: 8px 0 !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
  }

  /* Post media: full width, reasonable max-height */
  .post-media {
    margin: 10px 0 !important;
  }

  .post-media img {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 320px !important;
    border-radius: 10px !important;
  }

  /* Photo overlay (song + score + quote): keeps desktop's absolute-positioned
     card on the image. The bug on mobile was that the global
     `.post-media img { width:100%; max-height:320px }` rule was stretching
     the overlay's 28px cover thumbnail, pushing the song title / artist /
     score off-screen and making the overlay appear "cut off". Override the
     cover thumbnail's size so it stays small inside the overlay. */
  .feed-photo-overlay .feed-overlay-cover,
  .post-media img.feed-overlay-cover {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
  }

  .post-media video {
    width: 100% !important;
    max-height: 400px !important;
    border-radius: 10px !important;
  }

  /* Post actions: scrollable row so all buttons stay visible */
  .post-actions {
    gap: 6px !important;
    margin-top: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
  }

  .post-actions::-webkit-scrollbar {
    display: none !important;
  }

  .post-actions button {
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    min-height: 44px !important;
    white-space: nowrap !important;
    border-radius: 14px !important;
  }

  /* Flag button: stay at top-right corner but smaller */
  .btn-flag {
    top: 10px !important;
    right: 10px !important;
    padding: 4px 6px !important;
    font-size: 1rem !important;
    min-width: 34px !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Comment section: tighten inputs */
  .post-comments {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  .comment-form {
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .comment-form input[type="text"] {
    padding: 8px 10px !important;
    font-size: 0.9rem !important;
    min-height: 44px !important;
  }

  .comment-form .btn-comment-submit {
    padding: 8px 10px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Pinned announcement post */
  .pinned-post {
    border-width: 1.5px !important;
  }

  /* Hashtag links: slightly bigger tap area */
  .hashtag-link {
    display: inline-block !important;
    padding: 2px 0 !important;
    min-height: 28px !important;
    line-height: 28px !important;
  }

} /* end @media (max-width: 767px) — Phase 2 */


/* =====================================================
   PHASE 3 — PROFILE PAGE  max-width: 767px
   Appended after Phase 1 + Phase 2.

   Desktop layout:  3-column grid (260px | 1fr | 300px)
   Mobile layout:   single column, stacked order:
     1. Banner + avatar + username/bio/actions
     2. Stats row (Songs Rated / Reviews / Playlists)
     3. XP bar
     4. Tab bar (horizontally scrollable)
     5. Tab panels
     6. Left-column content (Stats box, Rated Songs,
        Recent Activity, Top Artists) — stacked below tabs
     7. Right-column content (Now Playing, Recently
        Listened, Top Tracks) — stacked below left content
===================================================== */

@media (max-width: 767px) {

  /* ==================================================
     3-COLUMN GRID  →  SINGLE COLUMN STACK
     The grid has 3 template columns. Collapse to block
     so children stack in DOM order.
     left-column sits before middle-column in the DOM,
     so we use order to move it below the middle.
  ================================================== */
  .profile-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 0 !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* DOM order: left-column (1) → middle-column (2) → right-column (3)
     Desired visual order: middle → left → right
     Use flexbox order property. */
  .left-column {
    order: 2 !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .middle-column {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .right-column {
    order: 3 !important;
    gap: 12px !important;
    width: 100% !important;
  }


  /* ==================================================
     PROFILE BACKGROUND IMAGE
     Full-width, behind banner, no clipping.
  ================================================== */
  .profile-background {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }


  /* ==================================================
     PROFILE CONTAINER
     No horizontal padding waste; full-width on mobile.
  ================================================== */
  .profile-container {
    max-width: 100% !important;
    padding: 0 0 16px 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }


  /* ==================================================
     BANNER
     Shorter on mobile (150px vs 200px desktop).
     Remove the bottom margin that pulls avatar up —
     we handle the avatar overlap separately.
  ================================================== */
  .profile-banner {
    height: 150px !important;
    border-radius: 12px 12px 0 0 !important;
    margin-bottom: 0 !important;
  }

  .banner-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }


  /* ==================================================
     PROFILE HEADER
     Mobile layout:
       Row 1: [avatar (overlapping banner)] [name + username + socials]
       Row 2: [followers pills                               ]
       Row 3: [spotify badge] [Edit Profile btn] [gear icon]
     Mirrors desktop spirit in a compact two-column top row.
  ================================================== */
  .profile-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    padding: 0 12px 14px 12px !important;
    border-bottom: 1px solid rgba(255, 105, 180, 0.15) !important;
    margin-top: 0 !important;
    position: relative !important;
    gap: 0 10px !important;
  }

  /* Ring wrapper: pull up over banner edge (ring has 3px padding so pull 43px) */
  .profile-pic-ring {
    margin-top: -43px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
  }

  /* Avatar inside ring — ring handles the pull-up, reset avatar's own margin */
  .profile-pic-ring .profile-pic {
    margin-top: 0 !important;
  }

  /* Bare avatar (no ring) — pull it up itself */
  .profile-pic {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    border-radius: 50% !important;
    margin-right: 0 !important;
    margin-top: -40px !important;
    border: 3px solid #111 !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
  }

  .default-avatar.profile-pic {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    margin-top: -40px !important;
    font-size: 1.8em !important;
  }

  .profile-pic-ring .default-avatar.profile-pic {
    margin-top: 0 !important;
  }

  /* Profile info: takes remaining width next to avatar, sits in the top row */
  .profile-info {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin-top: 6px !important;
  }

  .profile-info h2 {
    font-size: clamp(1rem, 4vw, 1.3rem) !important;
    margin-bottom: 2px !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
  }

  /* Username line */
  .profile-info h2 + div,
  .profile-info > div[style*="color:#aaa"] {
    font-size: 0.8rem !important;
    margin-bottom: 0 !important;
  }

  /* Bio interactive placeholder */
  .bio-interactive {
    font-size: 0.85rem !important;
    display: inline-flex !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  /* Social links row / add social links area — tighten margin on mobile */
  .profile-info .social-links-row,
  .profile-info div[style*="margin-top:26px"],
  .profile-info div[style*="margin-top:32px"] {
    margin-top: 8px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  /* Profile actions: full-width row below the avatar+info row */
  .profile-actions {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-top: 10px !important;
    width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Followers/following pills — horizontal row, full width */
  .profile-actions .pf-inline-follow-stats {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Inner buttons row: [Spotify badge] [Edit Profile] [Gear] */
  .profile-actions > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    margin-right: 0 !important;
  }

  /* Spotify badge — fixed size, don't grow */
  .profile-actions .spotify-connected-badge {
    flex: 0 0 auto !important;
    font-size: clamp(0.68rem, 2.8vw, 0.78rem) !important;
    padding: clamp(3px, 1vw, 5px) clamp(6px, 2vw, 10px) !important;
    white-space: nowrap !important;
  }

  /* Edit Profile — fills remaining space */
  .edit-profile-btn {
    flex: 1 1 auto !important;
    width: auto !important;
    min-height: 40px !important;
    justify-content: center !important;
    text-align: center !important;
    padding: clamp(7px, 1.8vw, 10px) clamp(10px, 3vw, 16px) !important;
    font-size: clamp(0.8rem, 3.5vw, 0.95rem) !important;
  }

  /* Gear button — fixed square */
  .gear-btn {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Follow / Unfollow / Requested */
  .pf-follow-btn {
    flex: 1 1 auto !important;
    min-height: 40px !important;
    padding: clamp(7px, 1.8vw, 10px) clamp(10px, 3vw, 16px) !important;
    font-size: clamp(0.8rem, 3.5vw, 0.95rem) !important;
  }

  /* Message button */
  .pf-msg-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
  }

  /* More / ellipsis button */
  .pf-more-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
  }

  /* More menu: anchor left to avoid viewport overflow */
  .pf-more-menu {
    right: auto !important;
    left: 0 !important;
  }

  /* Spotify Connect button */
  .spotify-btn {
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 0.88rem !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Connect Spotify wrapper */
  .profile-info div[style*="margin-top:12px"] {
    margin-top: 8px !important;
  }


  /* ==================================================
     PROFILE STATS ROW (Songs Rated / Reviews / Playlists)
     Mobile: horizontal strip with dividers.
  ================================================== */
  .profile-stats {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255,105,180,0.12) !important;
    border-bottom: 1px solid rgba(255,105,180,0.12) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .profile-stats::-webkit-scrollbar { display: none !important; }

  .stat-box {
    flex: 1 0 auto !important;
    padding: 12px 10px !important;
    border-radius: 0 !important;
    text-align: center !important;
    background: transparent !important;
    border-right: 1px solid rgba(255,105,180,0.1) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .stat-box:last-child { border-right: none !important; }

  .stat-box h3 {
    font-size: 1.05rem !important;
    margin: 0 0 2px 0 !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .stat-box p {
    font-size: 0.65rem !important;
    margin: 0 !important;
    color: rgba(255,255,255,0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }


  /* ==================================================
     XP BAR
     Already full-width; just tighten the wrapper margin.
  ================================================== */
  .xp-section {
    margin: 10px 12px 0 12px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
  }

  .xp-section h3 {
    font-size: 0.95rem !important;
    margin-bottom: 4px !important;
  }

  .xp-text {
    font-size: 0.8rem !important;
  }


  /* ==================================================
     PROFILE TABS — TAB BAR
     Desktop: flex-wrap, sticky top:10px.
     Mobile: single scrollable row, no wrapping,
     sticky at 52px (below mobile topbar).
  ================================================== */
  .profile-tabs {
    margin: 12px 0 0 0 !important;
    padding: 0 12px !important;
  }

  .tab-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 10px !important;
    /* Sticky below mobile topbar (52px) */
    position: sticky !important;
    top: 52px !important;
    z-index: 20 !important;
    /* Prevent gap from allowing inner scroll to show content behind */
    background: #0b0b0b !important;
  }

  .tab-bar::-webkit-scrollbar {
    display: none !important;
  }

  .tab-btn {
    flex-shrink: 0 !important;
    padding: 7px 11px !important;
    font-size: 0.82rem !important;
    border-radius: 8px !important;
    min-height: 36px !important;
    white-space: nowrap !important;
  }

  /* Active underline indicator: keep but shrink */
  .tab-btn.active::after {
    left: 6px !important;
    right: 6px !important;
    bottom: -4px !important;
  }


  /* ==================================================
     TAB PANELS
  ================================================== */
  .tab-panels {
    margin-top: 10px !important;
  }

  .tab-panel {
    padding: 14px 10px !important;
    border-radius: 10px !important;
  }

  .tab-title {
    font-size: 1rem !important;
    margin-bottom: 10px !important;
  }


  /* ==================================================
     STATISTICS TAB — music-stats-grid
     Desktop: flex row (nowrap, up to 4 cards in a row).
     Mobile: 2×2 grid.
  ================================================== */
  .music-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    justify-content: unset !important;
  }

  .music-stat {
    max-width: none !important;
    min-width: 0 !important;
    padding: 10px !important;
    flex: none !important;
  }

  .music-stat .label {
    font-size: 0.78rem !important;
  }

  .music-stat .value {
    font-size: 1.1rem !important;
  }

  /* View buttons inside stat cards: smaller, don't overflow */
  .music-stat a.btn[style] {
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
  }


  /* ==================================================
     TOPLISTS ROW (Most Loved / Most Hated inside Stats tab)
     Already collapses at 900px; keep it column on mobile.
  ================================================== */
  .toplists-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .toplist-card {
    padding: 12px !important;
  }

  .top-item {
    padding: 8px !important;
    gap: 8px !important;
  }


  /* ==================================================
     RATINGS TAB  (#tab-ratings)
     Already has a 640px breakpoint in profile-ratings.css
     (collapses to 3 cols + status under score).
     Ensure it fills the panel at 767px too.
  ================================================== */
  #tab-ratings .ratings-list.ratings-full {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #tab-ratings .ratings-list-header,
  #tab-ratings .ratings-list-row {
    grid-template-columns: 52px 1fr 88px !important;
    padding: 10px 8px !important;
    gap: 8px !important;
  }

  #tab-ratings .ratings-list-row .song-cell img {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
  }

  #tab-ratings .ratings-list-row .status-cell {
    grid-column: 3 / -1 !important;
  }

  #tab-ratings .ratings-list-row .status-cell .rating-date {
    font-size: 0.8rem !important;
    margin-left: 0 !important;
    white-space: normal !important;
    color: #aaa !important;
    font-weight: normal !important;
    text-shadow: none !important;
  }


  /* ==================================================
     MOST LOVED / MOST HATED TABS
     top-list items: tighter, thumbnails 44px.
  ================================================== */
  .top-list {
    gap: 8px !important;
  }

  .top-thumb {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 6px !important;
  }

  .top-thumb.small {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 5px !important;
  }

  /* Override the toplist-card !important rules from 51-profile-statistics-tab.css */
  .toplist-card .top-thumb,
  .toplist-card img.top-thumb {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }

  .toplist-card .top-thumb.small,
  .toplist-card img.top-thumb.small {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }

  .top-title {
    font-size: 0.9rem !important;
  }

  .top-sub {
    font-size: 0.78rem !important;
  }

  /* Score pills inside loved/hated lists */
  .score-pill {
    font-size: 0.82rem !important;
    padding: 4px 8px !important;
    min-width: 48px !important;
    text-align: center !important;
  }


  /* ==================================================
     REVIEWS TAB
     review-row: wrap thumbnail + text to single column
     on very narrow screens.
  ================================================== */
  .review-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .review-row img.thumb-56 {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 6px !important;
  }

  /* Score + date column: don't overflow to right on narrow */
  .review-row > div[style*="flex-direction:column"] {
    align-items: center !important;
    flex-shrink: 0 !important;
  }


  /* ==================================================
     PLAYLISTS TAB
     2-column grid on desktop → 1-column on mobile.
  ================================================== */
  #tab-playlists > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Playlist card thumbnail: smaller on mobile */
  #tab-playlists .playlist-card div[style*="width:120px"] {
    width: 80px !important;
    height: 80px !important;
  }


  /* ==================================================
     SOCIALS / POSTS TAB
     (.tab-posts .feed-item etc. already handled in Phase 2
      feed-item rules above — they apply globally.
      Only override if .tab-posts scoping needs adjustment.)
  ================================================== */
  .tab-posts .feed-item {
    padding: 12px 10px !important;
  }

  .tab-posts .post-header {
    gap: 10px !important;
  }

  .tab-posts .post-actions {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  .tab-posts .post-actions::-webkit-scrollbar {
    display: none !important;
  }

  .tab-posts .post-actions button {
    flex-shrink: 0 !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
  }


  /* ==================================================
     LEFT COLUMN BOXES
     (.left-box, .stats-grid, .rated-preview, etc.)
  ================================================== */
  .left-box {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  .left-box h3 {
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
  }

  /* Stats grid inside left-box (Followers/Following/Posts/Badges) */
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .stat-card {
    padding: 10px 8px !important;
    border-radius: 8px !important;
    text-align: center !important;
    min-height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .stat-card__value {
    font-size: 1.15rem !important;
  }

  .stat-card__label {
    font-size: 0.72rem !important;
  }

  .stat-card__icon {
    font-size: 0.9rem !important;
  }

  /* Rated songs preview inside left-box */
  .rated-preview .ratings-list-row {
    padding: 8px 4px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .rated-preview .thumb-56 {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 5px !important;
  }

  .rated-preview .preview-score-pill {
    font-size: 0.78rem !important;
    padding: 3px 7px !important;
  }

  /* Truncate long titles / artist names in the rated preview so they
     can't overlap the score pill on narrow mobile widths. */
  .rated-preview .song-text {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }
  .rated-preview .song-text strong,
  .rated-preview .song-text span {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  /* Give the score cell reserved space and a tiny gap so the ellipsis
     kicks in before the text reaches the pill. */
  .rated-preview .score-cell {
    flex: 0 0 auto !important;
    padding-left: 8px !important;
    min-width: 60px !important;
  }

  /* Recent Activity links */
  .left-box .song-card-link {
    padding: 5px 0 !important;
    font-size: 0.9rem !important;
  }

  /* "Go to Music" / "View Full List" buttons inside left-box */
  .left-box .btn {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    padding: 8px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }


  /* ==================================================
     RIGHT COLUMN BOXES
     now-playing-box, recently-played-box, top-tracks-box
     are loaded via JS; their wrapper is .right-box.
  ================================================== */
  .right-box {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  .right-box h3 {
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
  }

  .right-box li {
    font-size: 0.9rem !important;
    margin: 5px 0 !important;
  }

  /* Right-column containers */
  #now-playing-box,
  #recently-played-box,
  #top-tracks-box {
    width: 100% !important;
    box-sizing: border-box !important;
  }


  /* ==================================================
     PROFILE COMMENTS SECTION
     (included via _profile_comments_partial.html)
  ================================================== */
  .profile-comments-section {
    padding: 0 12px !important;
    margin-top: 16px !important;
  }


  /* ==================================================
     HOVER LIFT SUPPRESSION ON TOUCH
     Profile tab panels re-use .feed-item hover lift
     already disabled in Phase 2. Also disable
     .top-item hover transform on mobile.
  ================================================== */
  .top-item:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .playlist-card:hover,
  .playlist-card[onmouseover] {
    transform: none !important;
  }

  .ratings-list-row:hover {
    transform: none !important;
  }

  /* ==================================================
     PROFILE MOBILE OVERHAUL  (appended fix)
     Problems seen in screenshots:
       1. Left column (Rated Songs preview, Recent Activity,
          Top Artists) renders as a long block AFTER all tab
          content — redundant and adds huge scroll length.
       2. Right column (Now Playing, Recently Listened, Top
          Tracks) also dumps at the very bottom.
       3. Tab bar cuts off ("Most Lo…") even though it should
          scroll horizontally.
       4. Overall feels like a desktop page squished, not a
          native profile (Instagram / TikTok style).

     Fix strategy — CSS only, no template changes:
       - Hide .left-column entirely on mobile.
         Its content (Rated Songs preview, Recent Activity)
         is duplicated inside the Ratings / Activity tabs
         anyway. Removing it cuts ~40% of the page height.
       - Hide .right-column entirely on mobile.
         Now Playing / Recently Listened / Top Tracks are
         Spotify widgets that make sense as a separate
         bottom section only on desktop. On mobile the tab
         system already surfaces listening data.
       - Lock the profile header to a compact Instagram-
         style card: banner 130px, avatar 72px, name + bio
         tight, stats row inline, XP bar slim.
       - Tab bar: enforce nowrap + smooth horizontal scroll
         with the active tab always visible (JS scroll on
         activation already exists in profile-tabs.css/js).
       - Tab panels: no min-height forcing empty space.
  ================================================== */

  /* Hide left and right sidebars — reduces page to:
     header → stats → XP → tabs → active tab content */
  .profile-layout > .left-column {
    display: none !important;
  }

  .profile-layout > .right-column {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  /* Hide all right column children EXCEPT now-playing */
  .profile-layout > .right-column > *:not(#now-playing-box) {
    display: none !important;
  }

  /* Middle column takes full width with no extra padding */
  .profile-layout > .middle-column {
    order: 1 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Tighter banner — 130px like Instagram */
  .profile-banner {
    height: 130px !important;
  }

  /* Avatar: 72px, overlapping banner by 36px */
  .profile-pic {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    margin-top: -36px !important;
    border: 3px solid #0a0a0a !important;
  }

  .default-avatar.profile-pic {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    margin-top: -36px !important;
    font-size: 1.5em !important;
  }

  /* Username: tighter */
  .profile-info h2 {
    font-size: 1.15rem !important;
    margin-bottom: 2px !important;
  }

  /* Bio: limit to 3 lines on initial view */
  .profile-info p:not([style*="color:var(--color-accent)"]) {
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Header: tighter padding, no border-bottom gap */
  .profile-header {
    padding: 0 12px 12px 12px !important;
  }

  /* Inline followers/following under bio */
  .pf-inline-follow-stats { display: flex !important; }
  .pf-inline-follow-stats .stat-card {
    flex-direction: row !important;
    padding: 5px 12px !important;
    min-height: unset !important;
    border-radius: 20px !important;
    gap: 6px !important;
  }
  .pf-inline-follow-stats .stat-card__value { font-size: 0.9rem !important; }
  .pf-inline-follow-stats .stat-card__label { font-size: 0.6rem !important; }
  .pf-inline-follow-stats .stat-card__icon { font-size: 0.65rem !important; }

  /* Stats row: single horizontal strip with dividers, no card backgrounds */
  .profile-stats {
    display: flex !important;
    flex-direction: row !important;
    justify-content: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255,105,180,0.12) !important;
    border-bottom: 1px solid rgba(255,105,180,0.12) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .profile-stats::-webkit-scrollbar { display: none !important; }

  .stat-box {
    flex: 1 0 auto !important;
    min-width: 0 !important;
    padding: 12px 10px !important;
    text-align: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255,105,180,0.1) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .stat-box:last-child {
    border-right: none !important;
  }

  .stat-box h3 {
    font-size: 1.05rem !important;
    margin: 0 0 2px 0 !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1 !important;
  }

  .stat-box p {
    font-size: 0.65rem !important;
    margin: 0 !important;
    color: rgba(255,255,255,0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }

  /* XP bar: compact, flush */
  .xp-section {
    padding: 8px 12px !important;
    margin: 0 !important;
  }

  .xp-section h3 {
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgba(255,255,255,0.5) !important;
    margin: 0 0 5px 0 !important;
    font-weight: 600 !important;
  }

  .xp-bar {
    height: 4px !important;
    border-radius: 2px !important;
    margin-bottom: 3px !important;
  }

  .xp-text {
    font-size: 0.75rem !important;
    color: rgba(255,255,255,0.4) !important;
    margin: 0 !important;
  }

  /* ---- TAB BAR ---- */
  /* Enforce horizontal scroll, no wrapping, sticky below topbar */
  .profile-tabs .tab-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    position: sticky !important;
    top: 52px !important; /* mobile topbar height */
    z-index: 200 !important;
    background: #0a0a0a !important;
    border-bottom: 1px solid rgba(255,105,180,0.15) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .profile-tabs .tab-bar::-webkit-scrollbar {
    display: none !important;
  }

  /* Each tab button: compact, no shrink */
  .profile-tabs .tab-btn {
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: none !important;
    color: rgba(255,255,255,0.55) !important;
    min-height: 40px !important;
    transition: color 150ms ease, border-color 150ms ease !important;
  }

  .profile-tabs .tab-btn[aria-selected="true"],
  .profile-tabs .tab-btn.active {
    color: #ff69b4 !important;
    border-bottom: 2px solid #ff69b4 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    opacity: 1 !important;
  }

  /* Remove the ::after pseudo underline the desktop uses
     (we're doing it with border-bottom directly) */
  .profile-tabs .tab-btn.active::after {
    display: none !important;
  }

  /* Tab panels: no forced min-height */
  .profile-tabs .tab-panel {
    min-height: 0 !important;
    padding: 12px !important;
  }

  /* Tab panel title */
  .profile-tabs .tab-title {
    font-size: 1rem !important;
    margin-bottom: 12px !important;
  }

} /* end @media (max-width: 767px) — Phase 3 */


/* =====================================================
   PHASE 4 — SONG & ALBUM DETAIL PAGES  max-width: 767px
   Appended after Phase 1 + Phase 2 + Phase 3.

   Both pages share .music-detail-grid (3-col grid:
   260px | 1fr | 300px) defined in music-detail.css.
   On mobile: collapse to single column, reorder so
   cover art appears above title, scores inline,
   then rating/actions, then reviews, then sidebar.

   Album-specific: tracklist <table> converted to
   scrollable card-like rows via CSS (no template edit).
===================================================== */

@media (max-width: 767px) {

  /* ==================================================
     Song/Album/Artist detail: 3-column → single column.
     Flatten all sub-columns with display:contents so we can
     reorder INDIVIDUAL cards (cover, title, scores, rating,
     spotify, etc.) into a mobile-optimized sequence that
     matches how music apps present a detail page:
        1. Cover art (hero)
        2. Title + artist
        3. Critic / Audience scores (side-by-side)
        4. Your Rating / actions
        5. Listen on Spotify
        6. Synopsis
        7. Song Info
        8. Preview player
        9. Takes / comments
       10. Right sidebar (Now Playing / Highest Rated)
  ================================================== */
  /* Use CSS grid with 2 columns so critic + audience can sit
     side-by-side while everything else spans the full width. */
  .music-detail-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 10px !important;
    margin: 8px 0 0 0 !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* Flatten columns: their children become direct grid items. */
  .music-detail-grid > .song-left-col,
  .music-detail-grid > .song-center-col,
  .music-detail-grid > main.song-center-col {
    display: contents !important;
  }

  /* By default every card spans the full grid width. */
  .music-detail-grid > div,
  .song-left-col > *,
  .song-center-col > * {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Critic + Audience: pin explicitly to columns 1 and 2 so they
     share a row regardless of grid auto-placement + order interaction. */
  .song-left-col > [aria-labelledby="critic-label"] {
    grid-column: 1 !important;
  }
  .song-left-col > [aria-labelledby="audience-label"] {
    grid-column: 2 !important;
  }
  /* Also ensure they share the same grid row so order:3 on both
     doesn't accidentally split them across rows. */
  .song-left-col > [aria-labelledby="critic-label"],
  .song-left-col > [aria-labelledby="audience-label"] {
    grid-row: auto !important;
  }

  /* Mobile display order for each card */
  .song-left-col > .card-dark-cover        { order: 1 !important; }
  .song-center-col > .card-dark-25:first-child { order: 2 !important; }  /* title card */
  .song-left-col > .card-dark-20.card-breathe  { order: 3 !important; }  /* critic + audience row */
  .song-center-col > .card-dark-25:nth-of-type(2) { order: 4 !important; } /* synopsis or next */
  .song-center-col > *                     { order: 5 !important; }
  .song-left-col > .btn-spotify,
  .song-left-col > a.btn-spotify           { order: 6 !important; }
  .song-left-col > .song-preview-player    { order: 7 !important; }
  .song-left-col > .card-dark-20:not(.card-breathe) { order: 8 !important; } /* Song Info */
  .music-detail-grid > div:last-child      { order: 99 !important; }      /* Right sidebar last */


  /* ==================================================
     COVER ART
     Desktop: left sidebar card, fills 260px column.
     Mobile: centered, max 200px, rounded.
  ================================================== */
  .card-dark-cover {
    padding: 14px !important;
    border-radius: 12px !important;
    text-align: center !important;
  }

  .cover-art {
    max-width: 200px !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    margin: 0 auto !important;
    display: block !important;
    box-shadow: 0 4px 24px rgba(255, 0, 255, 0.18) !important;
  }


  /* Spotify button: full width */
  .btn-spotify, .btn.btn-spotify {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Score card inner layout: compact */
  .card-dark-20 {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  .card-dark-20 h3 {
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
    margin: 0 0 4px 0 !important;
  }

  /* The big score number */
  .card-dark-20 > div[style*="font-size:1.8rem"],
  .card-dark-20 > div[style*="font-size: 1.8rem"] {
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
  }

  /* Song/Album Info: compact paragraphs */
  .card-dark-20 p {
    font-size: 0.88rem !important;
    margin: 4px 0 !important;
    line-height: 1.4 !important;
  }


  /* ==================================================
     CENTER COLUMN CARDS
  ================================================== */
  .card-dark-25 {
    padding: 14px 12px !important;
    border-radius: 10px !important;
  }

  /* Song / album title */
  .card-dark-25 h1 {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    margin-bottom: 6px !important;
  }

  /* "By [Artist]" */
  .card-dark-25 h2 {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }

  /* YouTube views row */
  #songMetrics {
    font-size: 0.88rem !important;
    margin-top: 8px !important;
  }


  /* ==================================================
     SYNOPSIS CARD
     Collapse to 3 lines with a "Read more" expand.
     Pure CSS: use a checkbox hack — but since we can't
     add HTML without template changes, use max-height
     transition with the :focus-within trick instead.

     Simplest no-JS approach: cap at 80px with a fade,
     and let the user tap/scroll to read the rest.
     The inner div already has background+padding, so
     just clamp it and add a gradient fade overlay.
  ================================================== */
  .card-dark-25 > div[style*="background:#1a1a1a"] {
    max-height: 80px !important;
    overflow: hidden !important;
    position: relative !important;
    cursor: pointer !important;
    /* Fade out the bottom */
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%) !important;
    transition: max-height 0.35s ease, -webkit-mask-image 0.35s ease, mask-image 0.35s ease !important;
  }

  /* When the synopsis container itself is focused/active, expand */
  .card-dark-25 > div[style*="background:#1a1a1a"]:focus,
  .card-dark-25 > div[style*="background:#1a1a1a"]:active {
    max-height: 600px !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* "Synopsis" label: add a tap-to-expand hint */
  .card-dark-25 h3[style*="color:#ff69b4"] ~ div[style*="background:#1a1a1a"]::after {
    content: "Tap to expand" !important;
    display: block !important;
    color: #ff69b4 !important;
    font-size: 0.75rem !important;
    margin-top: 4px !important;
    font-weight: 600 !important;
  }


  /* ==================================================
     YOUR RATING SLIDER
     Make the track taller, thumb larger (44px touch).
  ================================================== */
  #ratingSlider {
    width: 100% !important;
    height: 6px !important;
    cursor: pointer !important;
    margin: 8px 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 3px !important;
  }

  /* Webkit thumb: enlarge to 44px for easy touch */
  #ratingSlider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    margin-top: -11px !important;
    cursor: pointer !important;
    border: 3px solid rgba(0, 0, 0, 0.3) !important;
  }

  /* Firefox thumb */
  #ratingSlider::-moz-range-thumb {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
  }

  /* Rating value display */
  #ratingSlider + p {
    font-size: 1.1rem !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }

  /* Action buttons row: stack to vertical, all full-width */
  .card-dark-25 > div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .save-rating-btn,
  .plan-btn,
  .delete-rating-btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.95rem !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Add to Playlist button (uses .btn class with inline style) */
  #addToPlaylistBtn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.95rem !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Log in to Rate link */
  .card-dark-25 > div[style*="display:flex"] > a.btn {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-size: 0.95rem !important;
  }


  /* ==================================================
     REVIEWS / COMMENTS TABS (song page)
     The tab bar is an inline-styled div with two buttons.
     Make sure tabs are accessible and full-width.
  ================================================== */
  .card-dark-25 > div[style*="border-bottom:1px solid #333"] {
    gap: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
  }

  .card-dark-25 > div[style*="border-bottom:1px solid #333"]::-webkit-scrollbar {
    display: none !important;
  }

  /* Review / comment tab buttons: equal-width, 44px tall */
  #reviews-tab-btn,
  #comments-tab-btn {
    flex: 1 !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    text-align: center !important;
  }


  /* ==================================================
     REVIEWS PANEL (reviews.css)
  ================================================== */
  .reviews-panel {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  /* Individual review row */
  .review-row {
    padding: 10px 8px !important;
    gap: 8px !important;
  }

  /* Multiline clamp: relax on mobile so text is readable */
  .multiline-clamp,
  .multiline-clamp--3 {
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
  }

  /* Load more reviews button */
  .load-more-reviews-btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.95rem !important;
    margin-top: 10px !important;
    border-radius: 10px !important;
  }


  /* ==================================================
     RIGHT SIDEBAR (song + album)
     now-playing-box already handles its own layout.
     Highest-Rated / Trending lists: the items are
     inline-styled anchor tags. Ensure they don't
     overflow and images are right-sized.
  ================================================== */

  /* Right sidebar */
  .music-detail-grid > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .song-sidebar-card {
    padding: 12px !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .song-sidebar-heading {
    font-size: 0.88rem !important;
    margin-bottom: 8px !important;
  }

  .song-sidebar-link {
    gap: 8px !important;
    padding: 6px 0 !important;
    min-height: 44px !important;
    align-items: center !important;
  }

  /* .thumb-44 thumbnails */
  .thumb-44 {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  .thumb-44 img {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }

  .text-truncate-bold {
    font-size: 0.88rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .text-truncate-muted {
    font-size: 0.78rem !important;
  }


  /* ==================================================
     ALBUM PAGE: TRACKLIST TABLE
     Desktop: 4-column <table> (# | Title | Duration | Rating).
     Mobile approach: keep the table but use
     card-style row layout via CSS display overrides.
     Each <tr> becomes a card; columns reflow inside.
  ================================================== */
  .card-dark-18 {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  /* Remove the horizontal-scroll wrapper overflow
     since we're reformatting the table as cards */
  .card-dark-18 > div[style*="overflow:auto"] {
    overflow: visible !important;
  }

  /* Collapse the <table> to block flow */
  .card-dark-18 table {
    display: block !important;
    width: 100% !important;
  }

  .card-dark-18 thead {
    display: none !important;
  }

  .card-dark-18 tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Each row: card */
  .card-dark-18 tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
    padding: 10px 10px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 8px !important;
    border-bottom: none !important;
    border: 1px solid rgba(255, 105, 180, 0.06) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* # column: small badge */
  .card-dark-18 tbody td:nth-child(1) {
    flex: 0 0 auto !important;
    min-width: 28px !important;
    color: #888 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* Title column: takes remaining space on first row */
  .card-dark-18 tbody td:nth-child(2) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .card-dark-18 tbody td:nth-child(2) a {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .card-dark-18 tbody td:nth-child(2) div {
    font-size: 0.78rem !important;
    color: #9b9b9b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Duration column: right-aligned, same row as # and title */
  .card-dark-18 tbody td:nth-child(3) {
    flex: 0 0 auto !important;
    font-size: 0.8rem !important;
    color: #888 !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* Rating column: full second row */
  .card-dark-18 tbody td:nth-child(4) {
    flex: 1 1 100% !important;
    padding: 4px 0 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  /* Rating input inside tracklist */
  .song-rating-input {
    width: 64px !important;
    min-height: 36px !important;
    padding: 4px 8px !important;
    font-size: 0.9rem !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  /* Save / Remove rating buttons inside tracklist */
  .rate-song-btn,
  .remove-rating-btn {
    min-height: 36px !important;
    padding: 4px 12px !important;
    font-size: 0.85rem !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Rated score span inside tracklist */
  .card-dark-18 tbody td:nth-child(4) span[style*="color:#ff69b4"] {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
  }


  /* ==================================================
     ALBUM PAGE: YOUR ALBUM RATING card
  ================================================== */
  .card-dark-25 > div[style*="font-size:1.8rem"] {
    font-size: 1.5rem !important;
  }


  /* ==================================================
     HOVER SUPPRESSION ON TOUCH
  ================================================== */
  .card-dark-25:hover,
  .card-dark-20:hover,
  .card-dark-18:hover {
    transform: none !important;
  }

  .music-detail-grid > div:last-child a:hover {
    transform: none !important;
  }

} /* end @media (max-width: 767px) — Phase 4 */


/* =====================================================
   PHASE 4B — ARTIST DETAIL PAGE  max-width: 767px

   Template: artist_new.html
   Desktop: 3-column grid (260px | 1fr | 320px)
   Mobile:  single stacked column matching native app:
     1. Artist hero (image + name/stats row)
     2. Critic / Audience scores side-by-side
     3. Spotify button
     4. Your Picks (if any)
     5. Vault (albums grid)
     6. Popular songs table
     7. Takes
     8. Sidebar content (Highest Rated, Trending)
===================================================== */

@media (max-width: 767px) {

  /* --------------------------------------------------
     Grid → single column
  -------------------------------------------------- */
  .artist-detail-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 8px 0 0 0 !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* All children fill full width */
  .artist-detail-grid > aside,
  .artist-detail-grid > main,
  .artist-detail-grid > div {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    grid-column: auto !important;
  }

  /* --------------------------------------------------
     Left aside (artist info card):
     Horizontal hero layout matching native app —
     image on left, name + stats + scores on right
  -------------------------------------------------- */
  .artist-detail-grid > aside {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 12px !important;
  }

  /* Artist image container: fixed size, not full width */
  .artist-detail-grid > aside > div:first-child {
    width: 110px !important;
    height: 110px !important;
    flex: 0 0 110px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  .artist-detail-grid > aside > div:first-child img {
    width: 110px !important;
    height: 110px !important;
    object-fit: cover !important;
  }

  /* Fallback placeholder (no image) */
  .artist-detail-grid > aside > div:first-child > div[style*="height:260px"] {
    width: 110px !important;
    height: 110px !important;
  }

  .artist-detail-grid > aside > div:first-child > div[style*="height:260px"] i {
    font-size: 2.5rem !important;
  }

  /* Artist name: next to image */
  .artist-detail-grid > aside > h2 {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 1.25rem !important;
    margin: 0 !important;
    align-self: flex-start !important;
    padding-top: 4px !important;
  }

  /* Stats row (Songs/Vault counts): full width below hero */
  .artist-detail-grid > aside > div[style*="color:#aaa"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 0 !important;
  }

  /* Score boxes row (Critic/Audience): full width, side-by-side */
  .artist-detail-grid > aside > div[style*="display:flex"][style*="gap:10px"][style*="margin-bottom:14px"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 8px !important;
  }

  /* Score box inner: compact */
  .artist-detail-grid > aside > div[style*="gap:10px"] > div[style*="background:#111"][style*="flex:1"] {
    padding: 10px !important;
    border-radius: 8px !important;
  }

  .artist-detail-grid > aside > div[style*="gap:10px"] > div[style*="flex:1"] > div[style*="font-size:1.6rem"] {
    font-size: 1.3rem !important;
  }

  /* Spotify button: full width */
  .artist-detail-grid > aside > a.btn {
    width: 100% !important;
    text-align: center !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 100% !important;
  }

  /* Your Picks section: full width */
  .artist-detail-grid > aside > div[style*="background:#111"][style*="margin-top:12px"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 0 !important;
  }

  /* Admin edit button: smaller */
  .admin-edit-artist-btn {
    padding: 2px 6px !important;
    font-size: 0.65rem !important;
  }

  /* --------------------------------------------------
     Center column: Vault + Songs + Takes
  -------------------------------------------------- */

  /* Vault albums grid: 3 columns on mobile */
  .albums-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  /* Vault card text: smaller */
  .vault-card div[style*="padding:8px 10px"] {
    padding: 6px 8px 8px !important;
  }

  .vault-card div[style*="padding:8px 10px"] div[style*="font-size:0.85rem"] {
    font-size: 0.72rem !important;
  }

  /* Album type badge: smaller */
  .vault-card span[style*="position:absolute"][style*="top:6px"] {
    font-size: 0.55rem !important;
    padding: 1px 4px !important;
  }

  /* Songs table: hide Album and Duration columns */
  .songs-table thead th:nth-child(3),
  .songs-table tbody td:nth-child(3),
  .songs-table thead th:nth-child(4),
  .songs-table tbody td:nth-child(4) {
    display: none !important;
  }

  /* Songs table: tighter padding */
  .songs-table th,
  .songs-table td {
    padding: 8px 6px !important;
    font-size: 0.85rem !important;
  }

  /* Score pill in table: smaller */
  .songs-table .score-pill {
    min-width: 44px !important;
    font-size: 0.75rem !important;
    padding: 3px 8px !important;
  }

  /* Collapsible headers: slightly smaller */
  .collapsible-header h3 {
    font-size: 0.95rem !important;
  }

  .collapsible-header h3 span[style*="font-size:0.85rem"] {
    font-size: 0.72rem !important;
  }

  /* --------------------------------------------------
     Right sidebar: show below main content
     (Highest Rated, Trending sections)
  -------------------------------------------------- */
  .artist-detail-grid > div[style*="grid-column:3"] {
    grid-column: auto !important;
  }

  /* Sidebar cards: slightly compact */
  .artist-detail-grid > div[style*="grid-column:3"] > div[style*="background:#111"] {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  /* Takes section on artist page */
  .artist-detail-grid #artist-reviews-list .ar-card {
    padding: 10px !important;
  }

  .artist-detail-grid #artist-reviews-list .ar-card img {
    width: 44px !important;
    height: 44px !important;
  }

  /* Discography import chip: smaller on mobile */
  #disco-import-chip {
    padding: 8px 14px 8px 10px !important;
    font-size: 0.75rem !important;
    bottom: 80px !important;
  }

} /* end @media (max-width: 767px) — Phase 4B */


/* =====================================================
   PHASE 5 — LIST PAGES  max-width: 767px
   Covers: Top Charts, Trending, Leaderboards,
           Community Reviews, User Ratings List.

   Common pattern: filter/tab pill rows → scrollable row.
   Track cards: inline-styled flex rows → tighten,
   hide Duration, rank badge inline, Listen icon-only.
   Leaderboards: reuses .ratings-list/.ratings-full
   already handled below; tab-bar already done Phase 3.
   Community Reviews: card layout, 3-line text clamp.
   Ratings List: JS-rendered rows with inline grid
   style → override via .ratings-full rules.
===================================================== */

@media (max-width: 767px) {

  /* ==================================================
     SHARED PAGE WRAPPER
     Both top_charts and trending use:
       <div class="card" style="max-width:1200px;margin:40px auto;">
     On mobile remove the large top margin and let it
     fill the width with the standard 12px side padding.
  ================================================== */
  .tracks-list,
  .tracks-list ~ * {
    box-sizing: border-box !important;
  }

  /* The outer .card wrapper for charts/trending */
  .card[style*="max-width:1200px"],
  .card[style*="max-width: 1200px"] {
    margin: 8px 0 0 0 !important;
    padding: 14px 12px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Page title */
  .card[style*="max-width:1200px"] h1,
  .card[style*="max-width: 1200px"] h1 {
    font-size: 1.6rem !important;
    margin-bottom: 4px !important;
  }


  /* ==================================================
     CATEGORY BUTTONS  (.category-btn)
     Desktop: flex-wrap row, padding 12px 24px.
     Mobile: single horizontal scrollable row,
             compact pills.
  ================================================== */

  /* The wrapper div that holds category buttons */
  div[style*="display:flex"][style*="flex-wrap:wrap"] > .category-btn,
  div[style*="display:flex"][style*="flex-wrap: wrap"] > .category-btn {
    flex-shrink: 0 !important;
  }

  /* Make any flex-wrap:wrap filter row into a scrollable row */
  div[style*="flex-wrap:wrap"]:has(> .category-btn),
  div[style*="flex-wrap: wrap"]:has(> .category-btn) {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    gap: 6px !important;
  }

  div[style*="flex-wrap:wrap"]:has(> .category-btn)::-webkit-scrollbar,
  div[style*="flex-wrap: wrap"]:has(> .category-btn)::-webkit-scrollbar {
    display: none !important;
  }

  .category-btn {
    padding: 8px 14px !important;
    font-size: 0.82rem !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    /* Disable the shine sweep — costs paint on scroll */
    overflow: hidden !important;
  }

  /* Suppress hover lift on touch */
  .category-btn:hover {
    transform: none !important;
  }

  .category-btn.active:hover {
    transform: none !important;
  }


  /* ==================================================
     TIME FILTER BUTTONS  (.time-filter-btn)
     trending.html wraps these in a flex div too.
  ================================================== */

  /* Trending: the flex row that holds both category + time divs
     stacks on mobile */
  div[style*="justify-content:space-between"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* Time filter wrapper row → scrollable */
  div[style*="flex-wrap:wrap"]:has(> .time-filter-btn) {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    gap: 6px !important;
  }

  div[style*="flex-wrap:wrap"]:has(> .time-filter-btn)::-webkit-scrollbar {
    display: none !important;
  }

  .time-filter-btn {
    padding: 7px 12px !important;
    font-size: 0.8rem !important;
    min-width: 0 !important;
    min-height: 34px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border-radius: 16px !important;
  }

  .time-filter-btn:hover {
    transform: none !important;
  }


  /* ==================================================
     TRACK CARDS  (.track-card)
     Each card uses an inline-styled <article> with
     a .flex-row-start-12 inner wrapper.

     Desktop structure (simplified):
       .flex-row-start-12
         .flex-min-0          ← left: art + title + meta
           [44px art + title row]
           [Avg Rating + Duration row]
         div[flex-end]        ← right: rank badge + Listen btn

     Mobile changes:
     - Card padding tighter
     - Duration row: hide Duration, keep Avg Rating only
     - Rank badge: smaller circle (28px), move inline
     - Listen btn: icon only (hide text "Listen")
     - Hover lift: suppress
  ================================================== */

  .track-card {
    padding: 10px 10px !important;
    border-radius: 10px !important;
    cursor: default !important;
  }

  /* Suppress JS inline hover lift — onmouseover fires on tap too */
  .track-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* The outer flex row inside the card */
  .flex-row-start-12 {
    gap: 8px !important;
    align-items: center !important;
  }

  /* Left content block */
  .flex-row-start-12 > .flex-min-0 {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }

  /* Art + title inner row: art 44px already fine, tighten gap */
  .flex-row-start-12 > .flex-min-0 > div[style*="display:flex"][style*="align-items:center"] {
    gap: 8px !important;
    margin-bottom: 4px !important;
  }

  /* Track title */
  .track-title {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* "by [artist]" subtitle */
  .flex-row-start-12 > .flex-min-0 div[style*="color:rgba(255,255,255,0.7)"] {
    font-size: 0.78rem !important;
    margin-top: 2px !important;
  }

  /* Avg Rating + Duration meta row:
     Hide Duration on mobile — it's low-priority info.
     Keep Avg Rating. */
  .flex-row-start-12 > .flex-min-0 > div[style*="gap:20px"][style*="margin-top:12px"] {
    gap: 10px !important;
    margin-top: 6px !important;
    font-size: 0.8rem !important;
  }

  /* Hide the Duration div — it's always the second child of the meta row */
  .flex-row-start-12 > .flex-min-0 > div[style*="gap:20px"] > div:nth-child(2) {
    display: none !important;
  }

  /* Right column: rank + Listen button
     Matches both the legacy inline-style variant AND the newer
     .track-rank-col class used on The Top 100 / Trending pages. */
  .flex-row-start-12 > div[style*="flex-direction:column"][style*="align-items:flex-end"],
  .flex-row-start-12 > .track-rank-col,
  .track-rank-col {
    gap: 6px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    flex-direction: row !important;
  }

  /* Rank badge: shrink from 40px to 28px circle */
  .track-rank {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.72rem !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  /* Listen button: icon-only.
     The template renders: <a ...>Listen</a>
     We hide the text via font-size:0 on the element
     and show a play icon via ::before pseudo-element. */
  .flex-row-start-12 a.app-btn[href*="spotify"],
  .track-rank-col a.app-btn {
    padding: 6px 8px !important;
    font-size: 0 !important;           /* hides "Listen" text */
    min-width: 34px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  .flex-row-start-12 a.app-btn[href*="spotify"]::before,
  .track-rank-col a.app-btn::before {
    content: "\f144" !important;       /* Font Awesome play icon unicode */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 0.85rem !important;
    display: block !important;
  }

  /* Tracks list grid: single column, full width */
  .tracks-list {
    gap: 8px !important;
    margin-top: 14px !important;
  }


  /* ==================================================
     LEADERBOARDS PAGE
     Uses .leaderboards-page wrapper and profile-tabs
     tab system (already handled in Phase 3).
     The inner .ratings-list rows are handled below
     in the .ratings-full section.
     Just fix the page wrapper margin.
  ================================================== */
  .leaderboards-page {
    margin: 8px 0 0 0 !important;
    padding: 0 12px !important;
  }

  .leaderboards-page h1 {
    font-size: 1.6rem !important;
    margin-bottom: 16px !important;
  }

  /* The leaderboard uses .profile-tabs → .tab-bar which is
     already made scrollable in Phase 3. Nothing extra needed
     for the tab bar. The .ratings-list-row grid layout is
     handled below in the ratings-full block. */


  /* ==================================================
     RATINGS-FULL LIST ROWS
     Used by: Leaderboards (all 4 tabs), profile Ratings
     tab, and ratings_list.html page.
     ratings-full.css already handles 880px and 640px.
     At 767px enforce our narrowest card layout.
  ================================================== */
  .ratings-full .ratings-list-header,
  .ratings-full .ratings-list-row,
  /* ratings_list.html uses JS-rendered rows with inline grid style */
  #ratings-tbody .ratings-list-row {
    grid-template-columns: 48px 1fr 80px !important;
    gap: 8px !important;
    padding: 10px 10px !important;
  }

  /* Status column header: hide (show just Score at narrow width) */
  .ratings-full .ratings-list-header .col-status,
  .ratings-full .ratings-list-header #_rstatuscol {
    display: none !important;
  }

  /* Status cell in rows: hide on very narrow */
  .ratings-full .ratings-list-row .status-cell {
    display: none !important;
  }

  /* Song cell: spans cover + title */
  .ratings-full .ratings-list-row .song-cell,
  #ratings-tbody .ratings-list-row .song-cell {
    grid-column: 1 / 3 !important;
    gap: 8px !important;
  }

  /* Thumbnails */
  .ratings-full .ratings-list-row .song-cell img,
  .ratings-full .ratings-list-row .song-cell .no-cover,
  #ratings-tbody .ratings-list-row .song-cell img {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 5px !important;
  }

  /* Score cell */
  .ratings-full .ratings-list-row .score-cell,
  #ratings-tbody .ratings-list-row .score-cell {
    grid-column: 3 !important;
    justify-self: center !important;
  }

  /* Score pill: smaller */
  .ratings-full .ratings-list-row .score-pill {
    font-size: 0.78rem !important;
    padding: 4px 7px !important;
    min-width: 44px !important;
  }

  /* Song text: allow wrapping on narrow screens */
  .ratings-full .ratings-list-row .song-cell .song-text {
    white-space: normal !important;
  }

  .ratings-full .ratings-list-row .song-cell .song-text strong {
    font-size: 0.88rem !important;
    white-space: nowrap !important;
  }

  .ratings-full .ratings-list-row .song-cell .song-text span {
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }

  /* Hover row highlight: no lift on touch */
  .ratings-full .ratings-list-row:hover {
    transform: none !important;
  }


  /* ==================================================
     RATINGS LIST PAGE  (ratings_list.html)
     JS renders rows with `style="display:grid;
     grid-template-columns:72px 1fr 100px 100px;..."`
     Those inline styles have higher specificity than
     class-only rules, but NOT higher than !important.
     So our .ratings-full overrides above cover it.

     Additionally fix the page wrapper and filter bar.
  ================================================== */

  /* Page section wrapper */
  .home-discovery-section {
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* Back to profile link + title row: stack on very narrow */
  .home-discovery-section > div[style*="align-items:center"][style*="gap:16px"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  /* View tabs (Songs / Albums / Artists) */
  .home-discovery-section > div[style*="border-bottom"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 10px !important;
    gap: 4px !important;
  }

  .home-discovery-section > div[style*="border-bottom"]::-webkit-scrollbar {
    display: none !important;
  }

  /* Filter bar (._rbar): scrollable row on mobile */
  ._rbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  ._rbar::-webkit-scrollbar {
    display: none !important;
  }

  /* Divider between Sort and Status groups: vertical line breaks
     the horizontal flow — hide it on mobile */
  ._rbar-divider {
    display: none !important;
  }

  /* Filter group: no wrapping */
  ._rbar-group {
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
  }

  /* Filter label ("Sort", "Status"): shrink */
  ._rbar-label {
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Filter pill buttons */
  ._rfbtn {
    padding: 4px 10px !important;
    font-size: 0.78rem !important;
    min-height: 32px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* List header: hide the 4th column (Status) since we don't show it */
  #_rheader {
    grid-template-columns: 48px 1fr 80px !important;
    gap: 8px !important;
    padding: 10px 10px !important;
  }

  #_rstatuscol {
    display: none !important;
  }

  /* Pagination */
  #ratings-pagination {
    gap: 4px !important;
    margin: 12px 0 24px !important;
  }

  #ratings-pagination .page-btn {
    padding: 5px 10px !important;
    font-size: 0.8rem !important;
    min-height: 34px !important;
  }


  /* ==================================================
     COMMUNITY REVIEWS PAGE  (reviews.html)
     .discussions-page wrapper, sort-tabs, time-filter-tabs,
     and individual review-row cards.
  ================================================== */

  /* Page wrapper */
  .discussions-page {
    margin: 8px 0 0 0 !important;
    padding: 0 12px !important;
  }

  .discussions-card {
    padding: 12px 0 !important;
  }

  .discussions-card h1 {
    font-size: 1.5rem !important;
    margin-bottom: 10px !important;
  }

  /* Sort tabs (.sort-tabs with .sort-link) → scrollable row */
  .sort-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    padding-bottom: 2px !important;
  }

  .sort-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .sort-link {
    flex-shrink: 0 !important;
    padding: 7px 14px !important;
    font-size: 0.82rem !important;
    min-height: 36px !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
  }

  /* Time filter tabs (.time-filter-tabs) → scrollable row */
  .time-filter-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    padding-bottom: 2px !important;
  }

  .time-filter-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .time-filter-link {
    flex-shrink: 0 !important;
    padding: 5px 12px !important;
    font-size: 0.76rem !important;
    min-height: 28px !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

  .sort-link {
    flex-shrink: 0 !important;
    padding: 5px 14px !important;
    font-size: 0.78rem !important;
    min-height: 30px !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

  /* Reviews list grid: tighter gap */
  .discussions-card .reviews-list {
    gap: 8px !important;
  }

  /* Individual review row card:
     Desktop: flex row — [56px thumb] [flex-min-0 text] [score+date col]
     Mobile: allow text block to use more space; score col stays right. */
  .review-row {
    padding: 10px 8px !important;
    border-radius: 8px !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* Album art thumbnail */
  .review-row > img.thumb-56,
  .review-row .thumb-56 {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 6px !important;
  }

  /* Text block: allow it to shrink */
  .review-row > .flex-min-0 {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }

  /* Song title truncation */
  .review-row .text-truncate-bold {
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Artist name */
  .review-row .flex-min-0 > div > div > div[style*="font-size:0.85rem"],
  .review-row .flex-min-0 > div > div > div[style*="font-size: 0.85rem"] {
    font-size: 0.78rem !important;
  }

  /* Reviewer avatar + username row */
  .review-row .flex-min-0 > div[style*="margin-top:8px"] {
    margin-top: 6px !important;
    gap: 6px !important;
  }

  /* Review content: enforce 3-line clamp (reviews.css already has it;
     this ensures it's active on mobile in case it was overridden) */
  .review-content.multiline-clamp,
  .review-content.multiline-clamp--3 {
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    margin-top: 6px !important;
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
  }

  /* Score + date right column: compact */
  .review-row > div[style*="flex-direction:column"][style*="align-items:flex-end"] {
    flex-shrink: 0 !important;
    gap: 6px !important;
    align-items: flex-end !important;
  }

  /* Score badge: slightly smaller */
  .review-row > div[style*="flex-direction:column"] > div[style*="border-radius:24px"] {
    padding: 5px 10px !important;
    font-size: 0.82rem !important;
    border-radius: 16px !important;
    white-space: nowrap !important;
  }

  /* Timestamp */
  .review-timestamp {
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }

  /* Suppress hover card lift on touch */
  .review-row-link:hover .review-row {
    transform: none !important;
    box-shadow: none !important;
  }

} /* end @media (max-width: 767px) — Phase 5 */


/* =====================================================
   MESSAGES PAGE — PANEL VISIBILITY FIX (768px–900px)
   messages.css already collapses the grid to 1 column
   at 900px, but both panels remain in the DOM and
   the empty right column takes the full grid height,
   making inbox items invisible/unclickable.
   Fix: hide the right column when no thread is open,
   and make the left column properly fill + scroll.
   This block must be scoped to max-width:900px so it
   also covers tablet / narrow browser widths.
===================================================== */

@media (max-width: 900px) {

  /* Left column: flex column, fills height, scrolls */
  .messages-grid > div:first-child {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  /* Inbox list fills remaining space */
  .inbox-section {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  /* Hide right column when no thread open.
     Covers both server-rendered and AJAX fragment classes. */
  .messages-grid > div:last-child:not(:has(.thread-card-header)):not(:has(.thread-messages)):not(:has(.thread-header)):not(:has(.thread-fragment)) {
    display: none;
  }

  /* When thread IS open: hide inbox, show thread full height */
  .messages-grid:has(.thread-card-header) > div:first-child,
  .messages-grid:has(.thread-messages) > div:first-child,
  .messages-grid:has(.thread-header) > div:first-child,
  .messages-grid:has(.thread-fragment) > div:first-child {
    display: none;
  }

  .messages-grid:has(.thread-card-header) > div:last-child,
  .messages-grid:has(.thread-messages) > div:last-child,
  .messages-grid:has(.thread-header) > div:last-child,
  .messages-grid:has(.thread-fragment) > div:last-child {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  /* thread-container and fragment must be flex column */
  #thread-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .thread-fragment {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  #messages-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .thread-send-area {
    flex-shrink: 0;
  }

  /* Inbox rows: reliable touch targets */
  .thread-summary {
    min-height: 44px;
    position: relative;
    z-index: 1;
  }

} /* end @media (max-width: 900px) — messages panel fix */


/* =====================================================
   PHASE 6 — MESSAGES · NOTIFICATIONS · SETTINGS
             EXPLORE · STATIC PAGES · SHOWCASE EDIT
             max-width: 767px

   Pages covered:
   - messages.html      (.messages-page / .messages-grid)
   - notifications.html (.notifications-page)
   - settings.html      (settings-layout.css already has
                         a mobile drawer; we supplement it)
   - explore.html       (.discovery-grid / .cta-button row)
   - faq.html           (.faq-container / .faq-item)
   - help.html          (.help-container) — mostly done in
                         help.css; minor guard here
   - legal.html         (.legal-cards) — mostly done in
                         legal.css; minor guard here
   - showcase_edit.html (.showcase-edit-columns / .editable-item)

   All rules inside a single @media (max-width: 767px)
   block appended after Phase 5.
===================================================== */

@media (max-width: 767px) {

  /* ====================================================
     MESSAGES PAGE
     Desktop: 320px left inbox panel + 1fr right chat.
     The existing 900px rule already collapses the grid
     to 1fr, but both panels still stack visibly and the
     empty right column prevents clicking the inbox items.

     Mobile behaviour we want:
       A. When only the inbox is showing (no thread open),
          show the inbox panel full-width, hide the right
          column placeholder.
       B. When a thread IS open (.thread-card-header exists
          inside #thread-container), hide the inbox column
          and show only the chat full-width.
       C. The "Back" link inside .thread-card-header is
          already in the template — make it prominent.

     DOM structure:
       .messages-grid
         div (left col — contains .inbox-section)
         div (right col — contains #thread-container)
           div#thread-container
             .thread-card-header  ← exists only when thread open
  ==================================================== */

  /* Full viewport chat height
     (account for topbar 52px + bottom nav 56px) */
  .messages-page {
    height: calc(100vh - 52px - 56px) !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  .messages-card {
    border-radius: 0 !important;
    border: none !important;
    padding: 12px !important;
    box-shadow: none !important;
  }

  /* Collapse grid to single column, full height */
  .messages-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Left column (inbox): fills the grid, scrollable */
  .messages-grid > div:first-child {
    min-height: 0 !important;
    overflow: auto !important;   /* was hidden — made inbox items unclickable */
    display: flex !important;
    flex-direction: column !important;
  }

  /* Right column (thread): hidden when no thread is loaded.
     Detects BOTH the server-rendered (messages.html thread={})
     classes AND the AJAX fragment (_thread_fragment.html) classes:
       Server-rendered: .thread-card-header, .thread-messages
       AJAX fragment:   .thread-header, .thread-fragment, #messages-list */
  .messages-grid > div:last-child:not(:has(.thread-card-header)):not(:has(.thread-messages)):not(:has(.thread-header)):not(:has(.thread-fragment)) {
    display: none !important;
  }

  /* When a thread IS open: hide inbox, show thread full-screen.
     Covers both server-rendered and AJAX-loaded fragment. */
  .messages-grid:has(.thread-card-header) > div:first-child,
  .messages-grid:has(.thread-messages) > div:first-child,
  .messages-grid:has(.thread-header) > div:first-child,
  .messages-grid:has(.thread-fragment) > div:first-child {
    display: none !important;
  }

  .messages-grid:has(.thread-card-header) > div:last-child,
  .messages-grid:has(.thread-messages) > div:last-child,
  .messages-grid:has(.thread-header) > div:last-child,
  .messages-grid:has(.thread-fragment) > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  /* #thread-container itself needs to fill its parent and flex */
  #thread-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* .thread-fragment (AJAX): fill container, flex column */
  .thread-fragment {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Thread header (fragment): sticky header row */
  .thread-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(255,105,180,0.08) !important;
    background: rgba(12,12,12,0.95) !important;
    flex-shrink: 0 !important;
  }

  /* Back button in fragment header */
  #thread-back-btn {
    min-height: 38px !important;
    min-width: 60px !important;
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
  }

  /* Messages list (fragment): scrollable, fills available space */
  #messages-list {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 8px !important;
  }

  /* Send area (fragment): pinned to bottom */
  .thread-send-area {
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
    border-top: 1px solid rgba(255,105,180,0.08) !important;
  }

  .thread-send-form {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .thread-send-input {
    flex: 1 !important;
    padding: 10px 16px !important;
    font-size: 0.92rem !important;
    min-height: 44px !important;
    border-radius: 22px !important;
  }

  .btn-send-msg {
    min-height: 44px !important;
    min-width: 64px !important;
    padding: 10px 14px !important;
    font-size: 0.88rem !important;
    flex-shrink: 0 !important;
  }

  /* Word count bar */
  .word-count-bar {
    font-size: 0.72rem !important;
    color: rgba(255,255,255,0.35) !important;
    text-align: right !important;
    padding-top: 3px !important;
  }

  /* --------------------------------------------------
     Fragment bubble layout fixes
     thread-fragment.css sets .message-wrap max-width:65%
     which is too narrow on a 360px screen — short words
     like "heya" stack vertically. Widen it and tighten
     the messages-list padding so bubbles have more room.
  -------------------------------------------------- */

  /* Give bubbles more horizontal room */
  .message-wrap {
    max-width: 78% !important;
  }

  /* Tighter list padding so bubbles aren't squeezed */
  .messages-list {
    padding: 10px 8px !important;
    min-height: 0 !important;
  }

  /* Thread header: compress actions so avatar+name fit */
  .thread-header {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .thread-header-actions {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }


  #thread-back-btn {
    padding: 6px 12px !important;
    font-size: 0.82rem !important;
    min-height: 36px !important;
  }

  /* Other avatar: slightly smaller on mobile */
  .thread-other-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .thread-title {
    font-size: 0.92rem !important;
  }

  .thread-sub {
    font-size: 0.72rem !important;
  }

  /* Message bubbles (fragment) */
  .message-bubble {
    font-size: 0.88rem !important;
    padding: 8px 12px !important;
  }

  /* Server-rendered thread header: back button prominent */
  .thread-card-header {
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(255,105,180,0.08) !important;
    background: rgba(12,12,12,0.9) !important;
    border-radius: 8px 8px 0 0 !important;
    flex-shrink: 0 !important;
  }

  .thread-card-header a.btn-send {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.85rem !important;
    padding: 8px 14px !important;
    min-height: 40px !important;
  }

  /* Server-rendered bubbles */
  .msg-bubble {
    max-width: 82% !important;
    font-size: 0.88rem !important;
  }

  /* Server-rendered thread input */
  .thread-input {
    padding: 8px 0 !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  .thread-input input[type="text"],
  .thread-input textarea {
    font-size: 0.92rem !important;
    padding: 10px 16px !important;
    min-height: 44px !important;
  }

  .thread-input .btn-send {
    min-width: 64px !important;
    min-height: 44px !important;
    font-size: 0.88rem !important;
    padding: 10px 14px !important;
    flex-shrink: 0 !important;
  }

  /* Server-rendered thread message scroll area */
  .thread-messages {
    padding-right: 8px !important;
    padding-left: 8px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-bottom: 8px !important;
  }

  .thread-inner {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Inbox list: fill available space, scroll internally */
  .inbox-section {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* Inbox conversation rows: full-width, 44px min touch target */
  .thread-summary {
    padding: 12px 10px !important;
    border-radius: 8px !important;
    gap: 12px !important;
    min-height: 44px !important;
    /* Ensure pointer events work — nothing clips them */
    position: relative !important;
    z-index: 1 !important;
  }

  .thread-summary-avatar {
    width: 48px !important;
    height: 48px !important;
  }

  .thread-summary-name {
    font-size: 0.95rem !important;
  }

  .thread-summary-preview {
    font-size: 0.82rem !important;
  }

  /* "Messages" heading + new message button row */
  .messages-card > h2 {
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
  }

  .new-message-plus-btn {
    width: 44px !important;
    height: 44px !important;
  }

  /* Suppress hover lifts in inbox on touch */
  .thread-summary:hover {
    background: transparent !important;
    border-color: transparent !important;
  }

  /* New message modal: sheet-style at bottom on mobile */
  .new-msg-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }

  .new-msg-modal-overlay {
    align-items: flex-end !important;
  }


  /* ====================================================
     NOTIFICATIONS PAGE
     Already a single column. Just tighten padding,
     make "Mark all read" full-width, ensure avatars
     and timestamps don't overflow.
  ==================================================== */

  .notifications-page {
    padding: 12px !important;
  }

  .notifications-page h1 {
    font-size: 1.3rem !important;
    margin-bottom: 8px !important;
  }

  /* "Mark all read" button: full-width */
  #page-mark-all-read {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  /* Notification list: remove overflow-causing padding */
  .notifications-list {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Each notification row */
  .notification-entry {
    padding: 12px 8px !important;
    border-radius: 8px !important;
    margin-bottom: 2px !important;
  }

  /* Unread highlight */
  .notification-entry.unread {
    background: rgba(255,105,180,0.04) !important;
  }

  /* Avatar: keep at 44px, already good */
  .notification-entry img,
  .notification-entry .default-avatar {
    flex-shrink: 0 !important;
  }

  /* Timestamp: smaller, no wrapping */
  .notif-time {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    align-self: flex-start !important;
    flex-shrink: 0 !important;
    margin-left: 6px !important;
  }

  /* Notification text block: allow wrapping */
  .notification-entry .flex-row-12 {
    flex: 1 !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  .notification-entry .flex-row-12 > div:last-child {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .notification-entry strong {
    font-size: 0.85rem !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .notification-entry .flex-row-12 > div > div {
    font-size: 0.82rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Pagination controls */
  .notifications-page > div[style*="text-align:center"] {
    margin-top: 20px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    align-items: center !important;
  }


  /* ====================================================
     SETTINGS PAGE
     settings-layout.css already implements a mobile
     drawer at max-width:767px (sidebar slides from left,
     overlay backdrop, drawer-toggle button visible).
     We only need to:
     - Ensure the drawer-toggle button clears the mobile
       topbar (position below it, not covered)
     - Tighten the panel padding on very small screens
     - Make sure form inputs / connected-account buttons
       are full-width and touch-friendly
  ==================================================== */

  /* Drawer toggle: sits just below the fixed mobile topbar */
  .settings-drawer-toggle {
    margin: 8px 12px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
  }

  /* Panel inner padding: tighter on phone */
  .settings-panel {
    padding: 16px 12px !important;
  }

  .settings-panel__inner {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Settings headings */
  .settings-panel__inner h1 {
    font-size: 1.4rem !important;
    margin-bottom: 12px !important;
  }

  .settings-panel__inner h2 {
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
  }

  /* All text inputs and selects inside settings: full-width */
  .settings-panel input[type="text"],
  .settings-panel input[type="email"],
  .settings-panel input[type="password"],
  .settings-panel input[type="url"],
  .settings-panel select,
  .settings-panel textarea {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    font-size: 0.92rem !important;
  }

  /* All buttons inside settings panel: full-width + touch target */
  .settings-panel .btn,
  .settings-panel button[type="submit"],
  .settings-panel button[type="button"]:not(.settings-drawer-toggle) {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
  }

  /* Connected accounts section:
     OAuth provider row (icon + label + button) stacks vertically */
  .settings-panel .connected-account-row,
  .settings-panel [class*="connected"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Sidebar z-index: must be above the 767px drawer
     (settings drawer is z-index:200 which is already
     below the mobile topbar at 1050 — acceptable) */

  /* Settings sidebar overlay: must cover bottom nav too */
  .settings-sidebar-overlay {
    z-index: 199 !important;
  }


  /* ====================================================
     EXPLORE PAGE
     Desktop: .discovery-grid is CSS Grid auto-fit
     minmax(220px,1fr) — at 375px that yields 1 column.
     We force an explicit 2-column grid so cards are
     more browsable. The hero CTA buttons are already
     flex-wrap:wrap, so they reflow naturally.
  ==================================================== */

  /* Hero section: tighten */
  .page-hero {
    margin: 12px 0 !important;
    padding: 0 4px !important;
  }

  .page-hero h1 {
    font-size: 1.6rem !important;
    margin-bottom: 6px !important;
  }

  .page-hero p.muted {
    font-size: 0.88rem !important;
  }

  /* CTA button row: scroll horizontally, no wrap */
  .page-hero > div[style*="flex-wrap:wrap"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    gap: 8px !important;
  }

  .page-hero > div[style*="flex-wrap:wrap"]::-webkit-scrollbar {
    display: none !important;
  }

  /* CTA buttons: don't shrink */
  .cta-button {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Discovery grid: 2 columns on mobile */
  .discovery-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }

  /* Discovery card: compact */
  .discovery-card {
    padding: 14px 12px !important;
    border-radius: 10px !important;
  }

  .discovery-card h3 {
    font-size: 0.88rem !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }

  .discovery-card p {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }

  /* Optional track list (recommended/trending sections) */
  .track-row a {
    font-size: 0.88rem !important;
    display: block !important;
    padding: 4px 0 !important;
  }


  /* ====================================================
     FAQ PAGE
     Single column, just needs horizontal padding guard
     and touch-friendly hover removal.
  ==================================================== */

  .faq-container {
    padding: 12px !important;
    max-width: 100% !important;
  }

  .faq-title {
    font-size: 1.4rem !important;
    margin-bottom: 12px !important;
  }

  .faq-item {
    padding: 14px 12px !important;
    margin-bottom: 10px !important;
    border-left-width: 3px !important;
    border-radius: 0 6px 6px 0 !important;
  }

  .faq-item h2 {
    font-size: 1rem !important;
    margin-bottom: 6px !important;
  }

  .faq-item p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  /* Suppress hover background on touch devices */
  .faq-item:hover {
    background: transparent !important;
  }


  /* ====================================================
     HELP PAGE
     help.css already has a 768px breakpoint that handles
     most adjustments. We just guard padding on phones.
  ==================================================== */

  .help-container {
    padding: 12px !important;
    max-width: 100% !important;
  }

  .help-section {
    padding: 14px 12px !important;
    border-radius: 8px !important;
  }


  /* ====================================================
     LEGAL PAGE  (privacy policy, terms, etc.)
     legal.css already has a 768px rule collapsing the
     grid to 1 column. We guard container padding.
  ==================================================== */

  .legal-container {
    padding: 12px !important;
    max-width: 100% !important;
  }

  .legal-card {
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  /* Terms-of-service page: nav sidebar stacks above content */
  .legal-content {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .terms-content {
    padding: 14px 12px !important;
    border-radius: 8px !important;
  }


  /* ====================================================
     SHOWCASE EDIT PAGE  (.showcase-edit-page)
     Desktop: 2-column flex (.showcase-edit-columns).
     showcase-edit.css uses flex-wrap:wrap + min-width:280px
     so columns already stack at ~560px. We tighten
     further and ensure buttons are touch-friendly.
  ==================================================== */

  .showcase-edit-page {
    padding: 12px !important;
    margin: 8px 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Stack columns vertically */
  .showcase-edit-columns {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .showcase-edit-column {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Column headings */
  .showcase-edit-column h2,
  .showcase-edit-column h3 {
    font-size: 1.05rem !important;
    margin-bottom: 10px !important;
  }

  /* Search row: stack input + button vertically */
  .showcase-edit-page .search-scope {
    margin-bottom: 10px !important;
  }

  /* Scope button: full-width */
  .scope-btn {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    font-size: 0.9rem !important;
  }

  /* Search input + button row: full-width */
  .showcase-edit-page > div[style*="display:flex"][style*="gap"],
  .showcase-edit-page form > div[style*="display:flex"] {
    flex-direction: column !important;
    gap: 8px !important;
  }

  #showcase-search-input {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    font-size: 0.9rem !important;
  }

  #showcase-search-btn {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  /* Editable item rows */
  .editable-item {
    padding: 10px 8px !important;
    gap: 10px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.02) !important;
    margin-bottom: 4px !important;
  }

  .editable-item img {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }

  /* Move/Remove buttons: larger touch target */
  .move-up,
  .move-down,
  .remove-item {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-shrink: 0 !important;
  }

  /* Title/subtitle text: allow truncation */
  .editable-item .flex-min-0 {
    min-width: 0 !important;
    flex: 1 !important;
  }

  .editable-item .flex-min-0 > div:first-child {
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .editable-item .flex-min-0 > div:last-child {
    font-size: 0.78rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Results list (search results for showcase) */
  #showcase-search-results {
    max-height: 260px !important;
    overflow-y: auto !important;
    border-radius: 10px !important;
  }

  /* Hover suppression on touch */
  .move-up:hover,
  .move-down:hover {
    background: rgba(255,255,255,0.06) !important;
    transform: none !important;
  }

  .editable-item:hover {
    background: rgba(255,255,255,0.02) !important;
    transform: none !important;
  }

  /* ====================================================
     EDIT PROFILE PAGE
     Problems on mobile:
       - margin:70px auto on container wastes vertical space
       - profile pic frame 160×160px, banner/bg frames
         360px wide — all hardcoded inline, overflow screen
       - card padding too generous
       - file upload button needs full width
  ==================================================== */

  .edit-profile-container {
    margin: 8px auto !important;
    padding: 0 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .edit-profile-card {
    padding: 20px 16px !important;
    border-radius: 14px !important;
  }

  .edit-profile-title {
    font-size: 1.3rem !important;
    margin-bottom: 20px !important;
  }

  /* Profile pic frame: square, fills available width up to 160px */
  #profile-frame {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important; /* circle, like the actual profile pic */
  }

  /* Banner frame: full width of card, proportional height */
  #banner-frame {
    width: 100% !important;
    height: 110px !important;
    border-radius: 10px !important;
  }

  /* Background frame: full width, taller aspect */
  #background-frame {
    width: 100% !important;
    height: 160px !important;
    border-radius: 10px !important;
  }

  /* The wrapper divs with inline width:360px also need overriding */
  #banner-frame,
  #background-frame,
  #banner-frame + *,
  #background-frame + * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Parent divs of the frames have inline width:360px */
  .form-group > div[style*="width:360px"],
  .form-group > div[style*="width: 360px"] {
    width: 100% !important;
  }

  /* File upload button: full width, comfortable touch target */
  .file-upload-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 46px !important;
    font-size: 0.95rem !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  /* Suppress hover lift on touch */
  .file-upload-btn:hover {
    transform: none !important;
  }

  /* Bio textarea */
  .account-form textarea {
    font-size: 0.92rem !important;
    padding: 12px !important;
    min-height: 90px !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Save button: already 100% width in base CSS, just enforce height */
  .save-profile-btn {
    min-height: 50px !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
  }

  /* Form gap: tighter on mobile */
  .account-form {
    gap: 20px !important;
  }

} /* end @media (max-width: 767px) — Phase 6 */


/* =====================================================
   PHASE 7 — APP-LIKE FEEL  (mobile only)

   Goals:
   1. Native-feeling page transitions via the View
      Transitions API (Chrome 111+) — zero JS needed
      for the animation itself; mobile-transitions.js
      triggers document.startViewTransition() on link
      clicks so the browser animates the swap.
   2. CSS fallback: .page-exit / .page-enter keyframe
      animations for browsers without View Transitions.
   3. Touch feedback on bottom-nav items, drawer links,
      and feed cards (scale + opacity on :active).
   4. Momentum feel: subtle spring easing on the drawer
      already in Phase 1; this phase adds it to the
      bottom-nav icon tap.

   Desktop: all rules below are inside
   @media (max-width: 767px) so desktop is untouched.
===================================================== */


/* --------------------------------------------------
   VIEW TRANSITIONS API
   When document.startViewTransition() is called by
   mobile-transitions.js, the browser:
     1. Takes a screenshot of the current page
     2. Navigates / swaps content
     3. Animates old screenshot out, new content in
   We define the animation for both directions here.
   These rules are harmless on non-supporting browsers
   (the @view-transition at-rule and ::view-transition
   pseudo-elements are simply ignored).
-------------------------------------------------- */

/* NOTE: cross-document view transitions were disabled because they
   fought with page-specific fixed-position backgrounds (see
   .profile-background which is position:fixed 100vw/100vh). When the
   root snapshot captured fixed elements, the transition could leave
   the old-page overlay stuck on top of the new page, locking the user
   out of the UI. We rely on the JS-driven fallback transition
   (page-exit / page-enter classes) instead. */
/* @view-transition { navigation: auto; } */

/* Custom slide animation for same-app navigation.
   Old page slides out left; new page slides in from right.
   Feels like iOS/Android app navigation. */
@keyframes vt-slide-out-left {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(-28px); opacity: 0; }
}

@keyframes vt-slide-in-right {
  from { transform: translateX(28px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Back navigation (browser back button or our back links):
   old slides out right, new slides in from left */
@keyframes vt-slide-out-right {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(28px);  opacity: 0; }
}

@keyframes vt-slide-in-left {
  from { transform: translateX(-28px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Apply to the root view-transition pseudo-elements */
::view-transition-old(root) {
  animation: vt-slide-out-left 160ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
  animation: vt-slide-in-right 160ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Back navigation: body gets .nav-back class from JS */
.nav-back::view-transition-old(root) {
  animation: vt-slide-out-right 160ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.nav-back::view-transition-new(root) {
  animation: vt-slide-in-left 160ms cubic-bezier(0.4, 0, 0.2, 1) both;
}


/* --------------------------------------------------
   CSS FALLBACK TRANSITIONS
   For browsers without View Transitions API, JS adds
   .page-exit to .main-content before navigation.
   After the animation completes (~150ms), JS navigates.
   On the new page, .page-enter is added and removed
   so the content fades in cleanly.
-------------------------------------------------- */

@keyframes page-fade-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-18px); }
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 767px) {

  .main-content.page-exit {
    animation: page-fade-out 140ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
  }

  .main-content.page-enter {
    animation: page-fade-in 180ms cubic-bezier(0.0, 0, 0.2, 1) both;
  }


  /* ------------------------------------------------
     BOTTOM NAV TOUCH FEEDBACK
     Scale down slightly on tap — identical to how
     TikTok / Instagram bottom tabs feel.
  ------------------------------------------------ */

  .mobile-bottom-nav-item:active {
    transform: scale(0.88) !important;
    opacity: 0.75 !important;
    transition: transform 80ms ease, opacity 80ms ease !important;
  }

  /* Release spring: slightly overshoot back to 1 */
  .mobile-bottom-nav-item {
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity   120ms ease,
                color      150ms ease !important;
    will-change: transform;
  }

  /* Active (current page) item: magenta icon + label */
  .mobile-bottom-nav-item.active {
    color: #ff69b4 !important;
  }

  .mobile-bottom-nav-item.active i {
    filter: drop-shadow(0 0 6px rgba(255, 105, 180, 0.7)) !important;
  }


  /* ------------------------------------------------
     DRAWER LINK TOUCH FEEDBACK
     Sidebar nav links depress on tap.
  ------------------------------------------------ */

  #mobile-drawer a:active,
  #mobile-drawer button:active {
    opacity: 0.6 !important;
    transform: scale(0.97) !important;
    transition: transform 60ms ease, opacity 60ms ease !important;
  }

  #mobile-drawer a,
  #mobile-drawer button {
    transition: transform 180ms cubic-bezier(0.34, 1.4, 0.64, 1),
                opacity   100ms ease !important;
  }


  /* ------------------------------------------------
     FEED CARD TOUCH FEEDBACK
     Feed items depress on tap like native list items.
  ------------------------------------------------ */

  .feed-item:active,
  .track-card:active,
  .thread-summary:active,
  .notification-entry:active,
  .discovery-card:active,
  .review-row-link:active {
    transform: scale(0.985) !important;
    opacity: 0.88 !important;
    transition: transform 60ms ease, opacity 60ms ease !important;
  }

  .feed-item,
  .track-card,
  .thread-summary,
  .notification-entry,
  .discovery-card,
  .review-row-link {
    transition: transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1),
                opacity   150ms ease !important;
  }


  /* ------------------------------------------------
     HAMBURGER BUTTON TOUCH FEEDBACK
  ------------------------------------------------ */

  #mobile-hamburger-btn:active {
    transform: scale(0.9) !important;
    opacity: 0.7 !important;
    transition: transform 60ms ease !important;
  }

  #mobile-hamburger-btn {
    transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }


  /* ------------------------------------------------
     SEARCH TOGGLE TOUCH FEEDBACK
  ------------------------------------------------ */

  #mobile-search-toggle-btn:active,
  #mobile-bottom-search-btn:active {
    transform: scale(0.88) !important;
    opacity: 0.7 !important;
    transition: transform 60ms ease !important;
  }


  /* ------------------------------------------------
     TOPBAR TITLE — subtle brand polish
     Matches TikTok/X style: bold, centered, clean.
  ------------------------------------------------ */

  .mobile-topbar-title {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    font-size: 1.05rem !important;
  }


  /* ------------------------------------------------
     DRAWER SLIDE — spring overshoot
     Phase 1 uses transform:translateX(-100%) → 0.
     Adding a subtle spring to the open state makes it
     feel snappier, like native iOS sheets.
  ------------------------------------------------ */

  .sidebar {
    transition: transform 280ms cubic-bezier(0.34, 1.28, 0.64, 1) !important;
  }

  body.drawer-open .sidebar {
    transition: transform 300ms cubic-bezier(0.34, 1.28, 0.64, 1) !important;
  }


  /* ------------------------------------------------
     OVERLAY FADE — smoother than linear
  ------------------------------------------------ */

  .mobile-overlay {
    transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }


  /* ------------------------------------------------
     SEARCH BAR SLIDE — smooth reveal
  ------------------------------------------------ */

  .mobile-search-bar-wrap {
    transition: max-height 220ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity    180ms ease !important;
  }

  .mobile-topbar.search-expanded + .mobile-search-bar-wrap {
    animation: search-slide-down 200ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
  }

} /* end @media (max-width: 767px) — Phase 7 */

@keyframes search-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* -------------------------------------------------------
   TOPBAR AVATAR BUTTON
   The hamburger button is replaced with the user's
   profile picture (or initials fallback) on mobile.
   Scoped outside the media query so the gradient
   JS-init (data-gradient) works on any viewport,
   but the button itself is hidden on desktop via the
   .mobile-topbar { display:none } rule above.
------------------------------------------------------- */

/* Strip default button chrome, show avatar */
.mobile-avatar-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

/* Profile picture */
.mobile-topbar-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255, 105, 180, 0.55) !important;
  display: block !important;
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
}

/* Initials fallback */
.mobile-topbar-avatar--initials {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  border: 2px solid rgba(255, 105, 180, 0.55) !important;
  flex-shrink: 0 !important;
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
}

/* Tap glow */
@media (max-width: 767px) {
  .mobile-avatar-btn:active .mobile-topbar-avatar,
  .mobile-avatar-btn:active .mobile-topbar-avatar--initials {
    border-color: #ff69b4 !important;
    box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.35) !important;
    transition: border-color 60ms ease, box-shadow 60ms ease !important;
  }
}


/* =======================================================
   MUSIC PAGE — MOBILE POLISH
   Targets music.html. Collapses the outer 2-col grid,
   tightens the hero, Quick Rate card, Discover grid,
   and For You / Trending track lists.
======================================================= */

@media (max-width: 767px) {

  /* --------------------------------------------------
     Hero wrapper: strip inline max-width / margin so
     it fills the full content area
  -------------------------------------------------- */
  .page-hero[style*="max-width:1200px"],
  .page-hero[style*="max-width: 1200px"] {
    max-width: 100% !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
  }

  /* Hero text block: left-align, tight */
  .page-hero > div[style*="text-align:center"],
  .page-hero > div[style*="text-align: center"] {
    text-align: left !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  .page-hero h1[style] {
    font-size: 1.5rem !important;
    margin-bottom: 3px !important;
    line-height: 1.15 !important;
  }

  /* Subtitle: one line, muted */
  .page-hero p[style] {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* CTA pill row: scroll horizontally, no wrap */
  .page-hero > div[style*="flex-wrap"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding: 2px 0 4px !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .page-hero > div[style*="flex-wrap"]::-webkit-scrollbar {
    display: none !important;
  }

  /* music-cta-btn: compact pill, never truncate */
  .music-cta-btn {
    flex-shrink: 0 !important;
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    min-height: 36px !important;
    gap: 5px !important;
    box-shadow: 0 2px 8px rgba(255, 105, 180, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .music-cta-btn i {
    font-size: 0.82rem !important;
    margin-right: 0 !important;
  }


  /* --------------------------------------------------
     Outer layout: collapse 2-col grid to single col
  -------------------------------------------------- */
  .page-hero ~ div[style*="grid-template-columns"] {
    display: block !important;
    margin-top: 0 !important;
  }

  /* Hide right sidebar (Your Summary / Explore Genres) */
  .page-hero ~ div[style*="grid-template-columns"] > aside {
    display: none !important;
  }

  .page-hero ~ div[style*="grid-template-columns"] > main {
    width: 100% !important;
  }


  /* --------------------------------------------------
     Quick Rate card
  -------------------------------------------------- */
  .modern-card[style*="padding:20px"][style*="margin-bottom:24px"] {
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 105, 180, 0.15) !important;
    background: rgba(255, 105, 180, 0.03) !important;
  }

  /* "Quick Rate" label */
  .modern-card h2[style*="margin:0 0 16px"] {
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 105, 180, 0.65) !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
  }

  /* Inner flex row */
  .modern-card > div[style*="display:flex"][style*="gap:16px"] {
    gap: 12px !important;
    align-items: center !important;
  }

  /* Album art */
  .modern-card > div[style*="display:flex"][style*="gap:16px"] > div:first-child {
    width: 68px !important;
    height: 68px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  /* Song title */
  .modern-card a[style*="font-weight:700"][style*="font-size:1.1rem"] {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
    overflow: hidden !important;
  }

  /* Artist name */
  .modern-card div[style*="color:rgba(255,255,255,0.7)"][style*="font-size:1rem"] {
    font-size: 0.78rem !important;
    margin-bottom: 8px !important;
  }

  /* Rate now / Listen buttons */
  .modern-card .flex-gap-8 .app-btn[style] {
    padding: 6px 13px !important;
    font-size: 0.78rem !important;
    border-radius: 14px !important;
    min-height: 32px !important;
  }


  /* --------------------------------------------------
     Discover Music section
  -------------------------------------------------- */
  .home-discovery-section {
    margin-top: 16px !important;
  }

  .home-discovery-section .section-title,
  .home-discovery-section h2 {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
    text-align: left !important;
  }

  /* 2-column grid, uniform height rows */
  .discovery-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    margin-top: 0 !important;
  }

  /* Card */
  .discovery-card {
    padding: 11px 10px !important;
    border-radius: 11px !important;
    background: rgba(255, 105, 180, 0.04) !important;
    border: 1px solid rgba(255, 105, 180, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .discovery-card h3 {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.2 !important;
    color: #ffd9f7 !important;
  }

  .discovery-card p {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin: 0 !important;
    /* clamp to 2 lines to keep cards equal height */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
  }


  /* --------------------------------------------------
     For You & Trending headings
  -------------------------------------------------- */
  section > h2[style*="color:#ffd9f7"] {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
  }


  /* --------------------------------------------------
     For You track grid — 2 columns
  -------------------------------------------------- */
  section > div[style*="minmax(220px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  a.modern-discovery-card[style*="padding:16px"] {
    padding: 9px !important;
    border-radius: 10px !important;
    background: rgba(255, 105, 180, 0.03) !important;
    border: 1px solid rgba(255, 105, 180, 0.08) !important;
  }

  a.modern-discovery-card .flex-row-12 > div:first-child {
    width: 42px !important;
    height: 42px !important;
    border-radius: 7px !important;
    flex-shrink: 0 !important;
  }

  a.modern-discovery-card div[style*="font-weight:700"][style*="font-size:1rem"] {
    font-size: 0.8rem !important;
    margin-bottom: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  a.modern-discovery-card div[style*="font-size:0.9rem"] {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  a.modern-discovery-card:active {
    transform: scale(0.97) !important;
    opacity: 0.82 !important;
    transition: transform 55ms ease, opacity 55ms ease !important;
  }

  a.modern-discovery-card {
    transition: transform 180ms cubic-bezier(0.34, 1.4, 0.64, 1),
                opacity 120ms ease !important;
  }


  /* --------------------------------------------------
     Trending track list — single column, row cards
  -------------------------------------------------- */
  section > div[style*="minmax(280px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-top: 6px !important;
  }

  a.trending-card[style*="padding:16px"] {
    padding: 9px 11px !important;
    border-radius: 10px !important;
    background: rgba(255, 105, 180, 0.03) !important;
    border: 1px solid rgba(255, 105, 180, 0.08) !important;
  }

  a.trending-card div[style*="width:60px"] {
    width: 44px !important;
    height: 44px !important;
    border-radius: 7px !important;
    flex-shrink: 0 !important;
  }

  a.trending-card div[style*="font-size:1.1rem"] {
    font-size: 0.88rem !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  a.trending-card div[style*="font-size:0.9rem"][style*="color:rgba(255,255,255,0.7)"] {
    font-size: 0.76rem !important;
  }

  a.trending-card:active {
    transform: scale(0.985) !important;
    opacity: 0.82 !important;
    transition: transform 55ms ease, opacity 55ms ease !important;
  }

  a.trending-card {
    transition: transform 180ms cubic-bezier(0.34, 1.4, 0.64, 1),
                opacity 120ms ease !important;
  }


  /* --------------------------------------------------
     Empty state text
  -------------------------------------------------- */
  section > p[style*="color:rgba(255,255,255,0.7)"] {
    font-size: 0.82rem !important;
    margin-top: 6px !important;
  }

  /* ============================================================================
     NATIVE APP PARITY — Values from React Native app source code
     Every dimension, color, and spacing matches the native app exactly.
  ============================================================================ */

  /* ── GLOBAL ── */
  div[style*="margin:40px"], div[style*="margin: 40px"],
  div[style*="margin:40px auto"], div[style*="margin: 40px auto"] {
    margin: 12px auto !important;
  }
  div[style*="max-width:1200px"] {
    padding: 0 12px !important;
  }
  h1[style*="font-size:2"], h1[style*="font-size: 2"],
  h1[style*="font-size:3"], h1[style*="font-size: 3"] {
    font-size: 1.25rem !important;
  }

  /* ── ALL CARDS — native: bg=#0a0a0a, border=1px rgba(255,105,180,0.35), radius=12, shadow ── */
  .card-dark-20, .card-dark-25, .card-dark-18 {
    background: #0a0a0a !important;
    border: 1px solid rgba(255,105,180,0.2) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    box-shadow: 0 0 12px rgba(255,105,180,0.08) !important;
  }
  .left-box, .right-box {
    background: #111 !important;
    border: 1px solid rgba(255,105,180,0.2) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    box-shadow: 0 0 8px rgba(255,105,180,0.06) !important;
  }
  .score-display-glow {
    text-shadow: 0 0 12px currentColor !important;
  }


  /* ── POSTCARD — native: bg=c.surface(#000), radius=15, border=1px rgba(255,105,180,0.35), padding=16 ── */
  .feed-post, .post, article.post,
  #social-feed-root article,
  #social-feed-root > div > article {
    background: #000 !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255,105,180,0.35) !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 0 12px rgba(255,105,180,0.12) !important;
  }
  /* Author avatar — native: 28x28, radius=14, border=1px borderPink */
  .post .post-author img, .feed-post .post-author img, article .post-author img {
    width: 28px !important; height: 28px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,105,180,0.2) !important;
  }
  /* Media — native: width=100%, height=200, radius=12 */
  .post-media img, .feed-post img.post-image,
  article img[style*="border-radius"],
  .post img[style*="max-height"] {
    width: 100% !important; max-width: 100% !important;
    max-height: 400px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
  }
  /* Attached song — native: bg=#161616, radius=10, padding=10, gap=10, border=1px */
  .post [style*="border-radius:10px"][style*="display:flex"],
  article [style*="border-radius:10px"][style*="display:flex"] {
    background: #161616 !important;
    border-radius: 10px !important;
    padding: 10px !important;
    border: 1px solid rgba(255,105,180,0.2) !important;
  }
  /* Action row — native: row, gap=16, icons=15px */
  .post-actions, footer.post-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    margin-top: 10px !important;
  }
  .post-actions .heart-btn, .post-actions .btn-comment,
  .post-actions .btn-repost, .post-actions .btn-shelf, .post-actions .btn-share {
    padding: 4px 5px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: none !important;
    border: none !important;
  }
  .post-actions .fav-count, .post-actions .hate-count,
  .post-actions .repost-count, .post-actions .shelf-count,
  .post-actions .share-count { font-size: 12px !important; }
  .post-actions .btn-comment .btn-text { display: none !important; }


  /* ── TAKECARD — native: radius=15, overflow=hidden, blurred bg + rgba(0,0,0,0.65) overlay ── */
  .take-card, [class*="take-card"], .feed-take {
    border-radius: 15px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,105,180,0.35) !important;
    box-shadow: 0 0 12px rgba(255,105,180,0.12) !important;
  }


  /* ── PROFILE — native: banner=200px, avatar=76px radius=38, name=20px bold ── */
  .profile-layout [style*="minmax(280px"] {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 10px !important;
  }
  /* Stat boxes — native: flex=1, bg=#000, radius=10, border=1px, py=12 */
  .profile-stat-box, .stat-box,
  .middle-column [style*="display:flex"][style*="gap:8px"] > div {
    background: #000 !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,105,180,0.2) !important;
    padding: 12px 8px !important;
    text-align: center !important;
    box-shadow: 0 0 12px rgba(255,105,180,0.08) !important;
  }
  /* Tab bar — native: radius=20, active=gradient pink→purple */
  .profile-tabs .tab-bar .tab-btn {
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
  }
  .profile-tabs .tab-bar .tab-btn.active,
  .profile-tabs .tab-bar .tab-btn[aria-selected="true"] {
    background: linear-gradient(90deg, #ff69b4, #8b00ff) !important;
    color: #000 !important;
  }


  /* ── SONG/ALBUM DETAIL — native: cover=120x120 radius=10, scores side-by-side ── */
  .cover-art {
    max-width: 160px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(255,105,180,0.15) !important;
  }
  .card-dark-25 h1 { font-size: 1.25rem !important; margin-bottom: 4px !important; }
  .card-dark-25 h2 { font-size: 0.88rem !important; margin-bottom: 6px !important; }
  /* Score label — native: fontSize=10, bold, letterSpacing=1 */
  .card-dark-20 h3 {
    font-size: 10px !important; font-weight: 700 !important;
    letter-spacing: 1px !important; color: #ff69b4 !important;
    margin: 0 0 4px 0 !important;
  }
  /* Score number — native: fontSize=28, bold */
  .card-dark-20 .score-display-glow { font-size: 1.75rem !important; }
  /* All buttons in rating card — native: radius=8, minHeight=44, full-width */
  .card-dark-25 button, .card-dark-25 .btn, .card-dark-25 a.btn {
    border-radius: 8px !important;
    min-height: 44px !important;
    font-weight: 700 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }


  /* ── SEARCH — form stacks vertically, results 2-col ── */
  form[action*="search"] { flex-wrap: wrap !important; gap: 8px !important; }
  form[action*="search"] input[name="q"] {
    width: 100% !important; min-width: 0 !important;
    flex: 1 1 100% !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
  }
  form[action*="search"] select,
  form[action*="search"] button[type="submit"] {
    flex: 1 1 auto !important;
    min-height: 40px !important;
    border-radius: 8px !important;
  }
  #static-results > div[style*="minmax(260px"],
  #static-results > div[style*="minmax(200px"],
  #static-results > div[style*="minmax(220px"] {
    grid-template-columns: repeat(auto-fill, minmax(44%, 1fr)) !important;
    gap: 10px !important;
  }
  #static-results > div[style*="minmax(320px"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .search-result-card {
    background: #111 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,105,180,0.2) !important;
    box-shadow: 0 0 8px rgba(255,105,180,0.06) !important;
  }


  /* ── PLAYLIST TABLE → CARD ROWS ── */
  .playlist-tracks-table thead { display: none !important; }
  .playlist-tracks-table tbody tr {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(255,105,180,0.15) !important;
  }
  .playlist-tracks-table td[data-label="Album"],
  .playlist-tracks-table td[data-label="Duration"] { display: none !important; }
  .playlist-tracks-table td[data-label="#"] {
    flex: 0 0 auto !important; padding: 0 !important;
    font-size: 12px !important; color: #666 !important; min-width: 18px !important;
  }
  .playlist-tracks-table td[data-label="Title"] {
    flex: 1 1 auto !important; padding: 0 !important; min-width: 0 !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }
  .playlist-tracks-table td[data-label="Artist"] {
    flex: 0 1 auto !important; padding: 0 !important; font-size: 12px !important;
    max-width: 100px !important; overflow: hidden !important;
    text-overflow: ellipsis !important; white-space: nowrap !important;
  }
  .playlist-tracks-table td[data-label="Rating"],
  .playlist-tracks-table td[data-label="Actions"] {
    padding: 0 4px !important; flex: 0 0 auto !important;
  }


  /* ── BOTTOM NAV — native: borderTop=1px borderPink, bg=#000, shadow ── */
  .mobile-bottom-nav {
    border-top: 1px solid rgba(255,105,180,0.35) !important;
    box-shadow: 0 -2px 12px rgba(255,105,180,0.1) !important;
    background: #000 !important;
  }

  /* ── BUTTONS — native: radius=8, minHeight=44, bold ── */
  .btn-primary, .app-btn.btn-primary,
  button[style*="background:#ff69b4"], button[style*="background: #ff69b4"],
  .btn-spotify {
    border-radius: 8px !important;
    min-height: 44px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── TAKES FILTER — hide "Filter:" label, tighter pills ── */
  .takes-filter-label { display: none !important; }
  .takes-filter-btn { font-size: 0.72rem !important; padding: 3px 10px !important; }

  /* ── SONG/ALBUM — native layout overrides for new semantic classes ── */
  .song-left-col { gap: 10px !important; }
  .song-center-col { gap: 14px !important; }
  .song-sidebar-card { padding: 12px !important; margin-top: 8px !important; }
  .song-sidebar-link { padding: 8px 6px !important; min-height: 44px !important; }
  .song-action-buttons { gap: 8px !important; }
  .song-action-buttons > * { flex: 1 1 auto !important; min-height: 44px !important; }
  .detail-synopsis-body { padding: 14px !important; }
  .album-tracklist { font-size: 0.85rem !important; }
  .album-th, .album-td, .album-td-title, .album-td-center, .album-td-rating { padding: 8px 6px !important; }
  .album-rate-notice { font-size: 0.78rem !important; }

  /* ── SEARCH — native layout ── */
  .search-page-container { margin: 12px auto !important; padding: 0 12px !important; }
  .search-form-row { flex-wrap: wrap !important; }
  .search-page-input { width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; }
  .search-scope-label { display: none !important; }
  .search-scope-select, .search-submit-btn { flex: 1 1 auto !important; min-height: 40px !important; }
  .search-result-card { padding: 12px !important; }

  /* ── FEED — native PostCard/TakeCard classes ── */
  .feed-author-row { gap: 8px !important; margin-bottom: 8px !important; }
  .feed-author-avatar { width: 28px !important; height: 28px !important; border-radius: 14px !important; object-fit: cover !important; }
  /* Real uploaded avatars fill their box like the CSS fallback does (was sized
     28px with no object-fit, so photos sat small / distorted in the 40px box). */
  .feed-post-avatar-img { width: 100% !important; height: 100% !important; border-radius: inherit !important; object-fit: cover !important; display: block !important; }
  .feed-attached-song { padding: 10px !important; border-radius: 10px !important; }
  .feed-score-badge { border-radius: 8px !important; font-size: 12px !important; }
  .feed-action-row, .feed-actions-bar { gap: 6px !important; }
  .feed-take-card { border-radius: 15px !important; }
  .feed-back-to-top { bottom: 80px !important; right: 12px !important; }

  /* ── PROFILE — native profile screen classes ── */
  .profile-stat-box, .stat-box { padding: 10px 6px !important; }
  .profile-social-btn { min-width: 34px !important; min-height: 34px !important; }

  /* ── PERFORMANCE ── */
  .feed-post, .post, article.post, .take-card, .feed-post-card { will-change: transform; }

} /* end @media (max-width: 767px) — Native App Parity */