/* ==========================================================================
   BeatsHouse — Beats Library v2 Visual Layer
   Scoped to .bh-v2 modifier. Loaded after beats-page.css (bh-full-page.php +
   home.php both enqueue it in <head>, so it SURVIVES WP Compress warm-cache
   stripping and the ?bh_spa=1 content-swap).
   Layout: PREMIUM CARD GRID (v4). The authoritative vault layout lives HERE,
   not in beats_page.php's inline <style> — the inline block used to win when
   present and vanish when stripped, which is exactly what made the grid "flip
   to a row list" on some refreshes. Card rules use the (0,6,0) prefix
   .bh-library-v3.bh-library--neutral.bh-v2 … so they beat both the base
   .track-row rules in beats-page.css AND any leftover inline block.
   ========================================================================== */

.bh-library-v3.bh-v2 {
  --bh-v2-amber:        #C8FF00;
  --bh-v2-amber-glow:   rgba(200,255,0,.22);
  --bh-v2-amber-dim:    rgba(200,255,0,.10);
  --bh-v2-amber-border: rgba(200,255,0,.38);
  --bh-v2-periw:        rgba(255,255,255,.06);
  --bh-v2-periw-b:      rgba(255,255,255,.12);
  --bh-v2-surface:      rgba(255,255,255,.03);
  --bh-v2-ease:         cubic-bezier(0.22,1,0.36,1);
  /* Purple accent — the vault's real identity (matches the global player + rest of page) */
  --bh-v2-accent:       #22B6FF;
  --bh-v2-accent-2:     #0e7fd6;
  --bh-v2-accent-lite:  #7FD0FF;
}

/* ════════════════════════════════════════════════════════
   HEADER — editorial typography
   ════════════════════════════════════════════════════════ */

.bh-library-v3.bh-v2 .bh-picker-head__kicker {
  color: var(--bh-v2-accent-lite);
  letter-spacing: .28em;
}

.bh-library-v3.bh-v2 .bh-picker-head__title {
  font: 800 clamp(28px,4.5vw,48px)/1 'Syne',system-ui,sans-serif !important;
  letter-spacing: -.03em;
  color: #F2EDE4;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.bh-library-v3.bh-v2 .bh-count-display {
  font: 700 clamp(14px,2vw,18px)/1 'DM Mono',monospace;
  color: var(--bh-v2-accent-lite);
  letter-spacing: .04em;
  opacity: .85;
}
.bh-library-v3.bh-v2 .bh-count-display::before {
  content: '/ ';
  color: rgba(255,255,255,.2);
}

/* ════════════════════════════════════════════════════════
   GENRE PILL STRIP
   ════════════════════════════════════════════════════════ */

.bh-library-v3.bh-v2 .bh-genre-pill-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 2px 14px;
  margin-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.bh-library-v3.bh-v2 .bh-genre-pill-strip::-webkit-scrollbar { display: none; }

.bh-library-v3.bh-v2 .bh-genre-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--bh-v2-periw);
  background: rgba(255,255,255,.04);
  color: rgba(242,237,228,.65);
  font: 600 10px/1 'Manrope',sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s, border-color .18s, color .18s;
}
.bh-library-v3.bh-v2 .bh-genre-pill:hover {
  background: rgba(255,255,255,.07);
  border-color: var(--bh-v2-periw-b);
  color: #F2EDE4;
}
.bh-library-v3.bh-v2 .bh-genre-pill.is-active {
  background: rgba(34, 182, 255,.14);
  border-color: rgba(34, 182, 255,.45);
  color: var(--bh-v2-accent-lite);
}

/* ════════════════════════════════════════════════════════
   GENRE CARDS — accent active state
   ════════════════════════════════════════════════════════ */

.bh-library-v3.bh-v2 .bh-genre-card--catalog.is-active .bh-genre-card__cover {
  box-shadow: inset 0 0 0 2px var(--bh-v2-accent), 0 0 20px rgba(34, 182, 255,.3) !important;
}
.bh-library-v3.bh-v2 .bh-genre-card--catalog.is-active .bh-genre-card__title {
  color: var(--bh-v2-accent-lite) !important;
}

/* ════════════════════════════════════════════════════════
   MAKERS PICKER — 2-row horizontal scroll
   ════════════════════════════════════════════════════════ */

.bh-library-v3.bh-v2 .js-bh-makers-picker .bh-genre-cards--catalog {
  display: grid !important;
  grid-template-rows: repeat(2, auto) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 86px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  gap: 8px !important;
  padding-bottom: 4px !important;
  -webkit-overflow-scrolling: touch !important;
}
.bh-library-v3.bh-v2 .js-bh-makers-picker .bh-genre-cards--catalog::-webkit-scrollbar { display: none; }
.bh-library-v3.bh-v2 .js-bh-makers-picker .bh-makers-section-head { display: none !important; }

/* ════════════════════════════════════════════════════════
   TRACK CATALOG — premium CARD GRID (v4, purple)
   ════════════════════════════════════════════════════════ */

.bh-library-v3.bh-v2 .beats-panel { display: block; }

/* Panel → responsive grid: tablet 2-3 col, desktop 4-6 col.
   .active + !important overrides the inline style="display:block" the PHP puts
   on the active panel; the JS only ever toggles .track-row-container display
   (filtering) and .active (tab switch) — never the grid, so both keep working. */
@media (min-width:600px){
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"].active{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(158px,1fr)) !important;
    gap:14px !important; align-items:start !important;
  }
}
@media (min-width:861px){
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"].active{
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) !important; gap:16px !important;
  }
}
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-row-container{
  min-width:0 !important; margin:0 !important; padding:0 !important;
}

/* ── Card shell (≥600 = tile; ≤599 handled in the phone block below) ── */
@media (min-width:600px){
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-row{
    display:flex !important; flex-direction:column !important; align-items:stretch !important;
    gap:0 !important; max-width:none !important; margin:0 !important; padding:0 !important;
    min-height:0 !important; height:100% !important; overflow:hidden !important; border-radius:16px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014)) !important;
    border:1px solid rgba(255,255,255,.07) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 4px 18px -12px rgba(0,0,0,.7) !important;
    transition:transform .3s var(--bh-v2-ease),border-color .3s,box-shadow .3s,background .3s !important;
  }
  @media (hover:hover) and (pointer:fine){
    .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-row:hover{
      transform:translateY(-5px) !important;
      background:linear-gradient(180deg,rgba(34, 182, 255,.11),rgba(34, 182, 255,.02)) !important;
      border-color:rgba(34, 182, 255,.34) !important;
      box-shadow:0 22px 44px -16px rgba(0,0,0,.72),0 0 0 1px rgba(34, 182, 255,.16),0 12px 34px -18px rgba(14,127,214,.6) !important;
    }
  }
  /* Cover — full-bleed square, cinematic zoom + scrim (scrim also hides the list number) */
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-cover{
    width:100% !important; height:auto !important; aspect-ratio:1/1 !important;
    border-radius:0 !important; position:relative !important; overflow:hidden !important;
  }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-cover::before{
    content:'' !important; display:block !important; position:absolute !important; inset:0 !important;
    background:linear-gradient(180deg,transparent 42%,rgba(8,6,14,.5)) !important; opacity:1 !important; z-index:1 !important;
  }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-cover img{
    position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important;
    transition:transform .55s var(--bh-v2-ease),filter .3s !important;
  }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-row:hover .track-cover img{
    transform:scale(1.07) !important; filter:brightness(.74) !important;
  }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-cover__init{ font-size:44px !important; z-index:0 !important; }
  /* Play orb — springs up on hover */
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .master-play{
    position:absolute !important; inset:auto !important; top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
    width:56px !important; height:56px !important; border-radius:50% !important;
    background:linear-gradient(135deg,rgba(184,158,255,.97),rgba(14,127,214,.97)) !important;
    border:1px solid rgba(255,255,255,.42) !important; color:#fff !important;
    box-shadow:0 12px 30px -8px rgba(14,127,214,.72),0 0 0 6px rgba(34, 182, 255,.12),inset 0 1px 0 rgba(255,255,255,.4) !important;
    /* Always visible (works on touch too, where there is no hover) — pops on hover below */
    opacity:1 !important; transform:translate(-50%,-50%) scale(.92) !important;
    transition:opacity .2s ease,transform .24s cubic-bezier(.34,1.56,.64,1),background .18s,box-shadow .18s !important;
    z-index:3 !important;
  }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-row:hover .master-play,
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .master-play.is-playing,
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .master-play:focus-visible{
    opacity:1 !important; transform:translate(-50%,-50%) scale(1.05) !important;
  }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .master-play:hover{
    background:linear-gradient(135deg,#4fc3ff,#1a92e8) !important;
    box-shadow:0 16px 36px -6px rgba(14,127,214,.85),0 0 0 8px rgba(34, 182, 255,.16),inset 0 1px 0 rgba(255,255,255,.45) !important;
  }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .master-play .bh-play-icon{ font-size:17px !important; transform:translateX(1px) !important; }
  /* Info — tighter hierarchy; drop the redundant "PROD BY x" line (producer card already shows it) */
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-info{
    padding:12px 13px 4px !important; flex:1 1 auto !important; min-width:0 !important;
    display:flex !important; flex-direction:column !important; gap:0 !important;
  }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-sub:not(.track-sub--credits){ display:none !important; }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-title{
    font:700 14px/1.25 'Syne',system-ui,sans-serif !important; letter-spacing:-.01em !important; color:#f4f1ea !important;
    white-space:normal !important; display:-webkit-box !important; -webkit-line-clamp:1 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-card-producer{ margin-top:6px !important; gap:6px !important; }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-card-producer__avatar{ width:19px !important; height:19px !important; border:1px solid rgba(255,255,255,.14) !important; }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-card-producer__name{ font:600 11px/1 'Manrope',system-ui,sans-serif !important; color:rgba(242,237,228,.58) !important; max-width:118px !important; }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-meta{ margin-top:9px !important; gap:5px !important; flex-wrap:wrap !important; }
  /* Footer: price + fav, split by a hairline */
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-right{
    flex-direction:row !important; align-items:center !important; justify-content:space-between !important;
    gap:8px !important; padding:9px 13px 12px !important; margin-top:auto !important; width:auto !important;
    border-top:1px solid rgba(255,255,255,.05) !important;
  }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .bh-lib-fav{ flex-shrink:0 !important; transition:color .15s,background .15s,transform .12s !important; }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .bh-lib-fav:hover{ color:#ff6b9d !important; transform:scale(1.12) !important; }
}

/* Playing state — purple accent (JS toggles .is-card-playing on the container, .is-playing on the row) */
.bh-library-v3.bh-v2 .beats-panel[data-panel="instrumentals"] .track-row-container.is-card-playing .track-row,
.bh-library-v3.bh-v2 .beats-panel[data-panel="instrumentals"] .track-row.is-playing{
  border-color:rgba(34, 182, 255,.5) !important;
  background:linear-gradient(180deg,rgba(34, 182, 255,.14),rgba(34, 182, 255,.03)) !important;
  box-shadow:0 0 0 1px rgba(34, 182, 255,.25),0 14px 34px -16px rgba(14,127,214,.6) !important;
}
.bh-library-v3.bh-v2 .beats-panel[data-panel="instrumentals"] .track-row.is-playing .master-play,
.bh-library-v3.bh-v2 .beats-panel[data-panel="instrumentals"] .track-row-container.is-card-playing .master-play{
  opacity:1 !important; transform:translate(-50%,-50%) scale(1) !important;
}
.bh-library-v3.bh-v2 .bh-eq span{ background:var(--bh-v2-accent-lite) !important; }
.bh-library-v3.bh-v2 .bh-lib-fav.is-fav,
.bh-library-v3.bh-v2 .bh-lib-fav.is-active{ color:#ff5c8a !important; }

/* ── PHONE (≤599): distinct stacked cards — not a flat text wall.
   Panel falls back to block (no grid rule at this width), so the horizontal
   rows stack; each row gets its own card surface. ── */
@media (max-width:599px){
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-row{
    display:grid !important; grid-template-columns:58px minmax(0,1fr) auto !important; align-items:center !important; gap:13px !important;
    padding:9px 12px 9px 9px !important; margin:0 0 9px !important;
    border-radius:15px !important; border:1px solid rgba(255,255,255,.07) !important;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)) !important;
    box-shadow:0 2px 12px -8px rgba(0,0,0,.6) !important; min-height:0 !important;
  }
  .bh-library-v3.bh-v2 .beats-panel[data-panel="instrumentals"] .track-row:active{ transform:scale(.985) !important; border-color:rgba(34, 182, 255,.28) !important; }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-cover{
    width:58px !important; height:58px !important; aspect-ratio:unset !important; border-radius:11px !important; position:relative !important; overflow:hidden !important;
  }
  .bh-library-v3.bh-v2 .beats-panel[data-panel="instrumentals"] .track-cover::before{ display:none !important; }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-cover img{ position:absolute !important; inset:0 !important; }
  /* Lighter tap overlay so the cover art / gradient + monogram show through on phone (full cover stays tappable) */
  .bh-library-v3.bh-v2 .beats-panel[data-panel="instrumentals"] .master-play{ background:rgba(0,0,0,.26) !important; opacity:1 !important; }
  .bh-library-v3.bh-v2 .beats-panel[data-panel="instrumentals"] .bh-play-icon{ filter:drop-shadow(0 1px 3px rgba(0,0,0,.7)); }
  .bh-library-v3.bh-v2 .beats-panel[data-panel="instrumentals"] .track-info{ padding:0 !important; min-width:0 !important; }
  .bh-library-v3.bh-v2 .beats-panel[data-panel="instrumentals"] .track-title{ font:700 14.5px/1.25 'Syne',system-ui,sans-serif !important; color:#F2EDE4 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; -webkit-line-clamp:unset !important; }
  .bh-library-v3.bh-v2 .beats-panel[data-panel="instrumentals"] .track-right{ flex-direction:column !important; align-items:flex-end !important; gap:6px !important; padding:0 !important; margin:0 !important; border:0 !important; }
}

/* ════════════════════════════════════════════════════════
   FOR-YOU SHELF TRIM (price pill markup removed at the source —
   one price system now: the .bh-card-price cover badge).
   Scoped to .bh-library-v3.bh-v2 so the single-beat page + home are untouched.
   ════════════════════════════════════════════════════════ */
.bh-library-v3.bh-v2 .bh-vault-foryou .track-right{ display:none !important; } /* only held the (now hidden) price */

/* ── BEATS card: price gone → fav (+ admin edit) become glass icons on the cover's
      top-right corner; the footer row is pulled onto the cover so the card ends clean ── */
@media (min-width:600px){
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-row{ position:relative !important; }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-info{ padding:12px 13px 14px !important; }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .track-right{
    position:absolute !important; top:9px !important; right:9px !important; left:auto !important; bottom:auto !important;
    width:auto !important; padding:0 !important; margin:0 !important; border:0 !important; background:none !important;
    flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; gap:6px !important; z-index:4 !important;
  }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .bh-lib-fav,
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="instrumentals"] .bh-track-edit-btn{
    width:32px !important; height:32px !important; padding:0 !important; border-radius:50% !important;
    background:rgba(8,6,14,.5) !important; -webkit-backdrop-filter:blur(6px) !important; backdrop-filter:blur(6px) !important;
    border:1px solid rgba(255,255,255,.2) !important; color:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important;
    opacity:1 !important; /* always visible glass icon on the cover (overrides the base hover-reveal) — works on touch too */
    transition:color .15s,background .15s,transform .12s !important;
  }
  .bh-library-v3.bh-v2 .beats-panel[data-panel="instrumentals"] .bh-lib-fav:hover{ color:#ff6b9d !important; background:rgba(8,6,14,.65) !important; transform:scale(1.08) !important; }
  .bh-library-v3.bh-v2 .beats-panel[data-panel="instrumentals"] .bh-lib-fav.is-fav,
  .bh-library-v3.bh-v2 .beats-panel[data-panel="instrumentals"] .bh-lib-fav.is-active{ color:#ff5c8a !important; }
}

/* ════════════════════════════════════════════════════════
   SONGS VAULT (/songs/ = beats_page with type=canciones → panel [data-panel=songs]).
   Kept artist-grouped, but the rows get the same premium card-surface treatment as the
   beats catalog (purple, rounded, hover lift, rounded cover) — and it lives HERE in the
   enqueued file so it survives WP Compress + ?bh_spa=1 like the beats grid (this is the
   "fix /songs too"). Songs stay LIST rows (cover | info | actions) because each song has
   richer actions (Derechos / YouTube) + ft. credits that read better in a row than a tile.
   ════════════════════════════════════════════════════════ */
.bh-library-v3.bh-v2 .beats-panel[data-panel="songs"]{ display:block; }
.bh-library-v3.bh-v2 .beats-panel[data-panel="songs"] .songs-artist-group{ display:block; margin-bottom:24px; }
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row-container{ margin:0 0 11px !important; padding:0 !important; }
/* ── Songs card shape: "stacked sleeve" ──────────────────────────────
   A second sheet, tinted by genre, sits behind the cover and peeks out
   bottom-right — like one record sleeve resting on the next in a stack.
   The peek color is the same genre code already used on the BPM/genre
   chip below, so the shape carries real information (what it is) rather
   than decorating an otherwise generic row. Everything else on the row
   (type, spacing, actions) stays quiet on purpose. */
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row{
  display:grid !important; grid-template-columns:64px minmax(0,1fr) auto !important; align-items:center !important; gap:16px !important;
  position:relative !important; isolation:isolate !important;
  padding:11px 16px 11px 20px !important; margin:0 !important; min-height:0 !important; border-radius:5px 16px 16px 5px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)) !important;
  border:1px solid rgba(255,255,255,.07) !important; border-left-width:0 !important;
  box-shadow:0 2px 12px -8px rgba(0,0,0,.55) !important;
  transition:transform .22s var(--bh-v2-ease),border-color .22s,box-shadow .22s,background .22s !important;
}
/* Spine — the genre code, restated as a solid edge instead of a pill,
   flush with the card's own (asymmetric) corner radius. */
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row::after{
  content:'' !important; position:absolute !important; left:0 !important; top:0 !important; bottom:0 !important; width:4px !important;
  border-radius:5px 0 0 5px !important; background:rgba(34, 182, 255,.55) !important; z-index:2 !important;
}
/* Estas líneas colorean el 'spine' de 4px del panel songs. Su regla hermana de
   geometría (arriba) ya estaba acotada a [data-panel="songs"], pero ellas habían
   perdido ese scope: alcanzaban también al panel instrumentals —el visible por
   defecto—, donde el ::after conserva el inset:0 que le da el CSS inline de
   beats_page.php. Al pasar el mouse, .track-row:hover::after{opacity:1} lo volvía
   opaco y la tarjeta ENTERA se pintaba del color del género, tapando título,
   productor, chips y favorito (reportado 2026-09-20; 71 de 83 filas afectadas).
   De paso, la shorthand `background:` borraba el patrón de puntos que era el
   efecto original. El bloque ::before de abajo tiene el mismo scope faltante,
   pero no renderiza porque queda con content:none fuera de songs. */
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row[data-genre="trap"]::after{ background:#f87171 !important; }
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row[data-genre="drill"]::after{ background:#fb923c !important; }
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row[data-genre="rnb"]::after,.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row[data-genre="r&b"]::after{ background:#c084fc !important; }
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row[data-genre="reggaeton"]::after{ background:#4ade80 !important; }
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row[data-genre="dancehall"]::after{ background:#facc15 !important; }
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row[data-genre="afrobeats"]::after,.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row[data-genre="afrobeat"]::after{ background:#2dd4bf !important; }
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row[data-genre="pop"]::after{ background:#fb7185 !important; }
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row[data-genre="latin"]::after{ background:#fbbf24 !important; }
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row[data-genre="hip-hop"]::after,.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row[data-genre="hip hop"]::after{ background:#818cf8 !important; }
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row[data-genre="lo-fi"]::after,.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row[data-genre="lofi"]::after{ background:#94a3b8 !important; }
/* The peeking sleeve itself, positioned to sit under the cover column. */
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row::before{
  content:'' !important; position:absolute !important; left:20px !important; top:11px !important; width:64px !important; height:64px !important;
  border-radius:11px !important; background:rgba(34, 182, 255,.28) !important;
  transform:translate(5px,5px) !important; z-index:0 !important; transition:transform .22s var(--bh-v2-ease) !important;
}
.bh-library-v3.bh-v2 .track-row[data-genre="trap"]::before{ background:rgba(239,68,68,.32) !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="drill"]::before{ background:rgba(249,115,22,.32) !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="rnb"]::before,.bh-library-v3.bh-v2 .track-row[data-genre="r&b"]::before{ background:rgba(168,85,247,.32) !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="reggaeton"]::before{ background:rgba(34,197,94,.32) !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="dancehall"]::before{ background:rgba(234,179,8,.32) !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="afrobeats"]::before,.bh-library-v3.bh-v2 .track-row[data-genre="afrobeat"]::before{ background:rgba(20,184,166,.32) !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="pop"]::before{ background:rgba(244,63,94,.32) !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="latin"]::before{ background:rgba(245,158,11,.32) !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="hip-hop"]::before,.bh-library-v3.bh-v2 .track-row[data-genre="hip hop"]::before{ background:rgba(99,102,241,.32) !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="lo-fi"]::before,.bh-library-v3.bh-v2 .track-row[data-genre="lofi"]::before{ background:rgba(148,163,184,.32) !important; }
@media (hover:hover) and (pointer:fine){
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row:hover{
    transform:translateY(-2px) !important; border-color:rgba(34, 182, 255,.3) !important;
    background:linear-gradient(180deg,rgba(34, 182, 255,.08),rgba(34, 182, 255,.02)) !important;
    box-shadow:0 14px 30px -16px rgba(0,0,0,.7),0 0 0 1px rgba(34, 182, 255,.12) !important;
  }
  /* The sleeve slides further out on hover — the stack "fans" open. */
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row:hover::before{ transform:translate(8px,8px) !important; }
}
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-cover{
  width:64px !important; height:64px !important; aspect-ratio:unset !important; border-radius:11px !important; position:relative !important; z-index:1 !important; overflow:hidden !important;
}
.bh-library-v3.bh-v2 .beats-panel[data-panel="songs"] .track-cover::before{ display:none !important; }
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-cover img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; }
.bh-library-v3.bh-v2 .beats-panel[data-panel="songs"] .master-play{ background:rgba(0,0,0,.26) !important; opacity:1 !important; border-radius:11px !important; }
/* Play centrado y llenando la portada (el icono quedaba en la esquina sup-izq con caja desfasada) */
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-cover .master-play{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important; transform:none !important; z-index:3 !important;
}
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-cover .master-play .bh-play-icon{
  position:static !important; margin:0 !important; font-size:16px !important; line-height:1 !important; transform:translateX(1px) !important;
}
.bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-cover .master-play .bh-eq{ position:absolute !important; inset:0 !important; margin:auto !important; }
.bh-library-v3.bh-v2 .beats-panel[data-panel="songs"] .bh-play-icon{ filter:drop-shadow(0 1px 3px rgba(0,0,0,.7)); }
.bh-library-v3.bh-v2 .beats-panel[data-panel="songs"] .track-info{ min-width:0 !important; position:relative !important; z-index:1 !important; }
.bh-library-v3.bh-v2 .beats-panel[data-panel="songs"] .track-card-producer{ display:none !important; } /* artist already shown in the group header */
.bh-library-v3.bh-v2 .beats-panel[data-panel="songs"] .track-right{ position:relative !important; z-index:1 !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; padding:0 !important; margin:0 !important; border:0 !important; width:auto !important; }

/* ════════════════════════════════════════════════════════
   FOR YOU — personalized shelf of compact mini-cards.
   display:grid must stay NON-important so the JS's inline
   `fyEl.style.display='none'` (hide when a filter is active) still wins.
   ════════════════════════════════════════════════════════ */
.bh-library-v3.bh-v2 .bh-vault-foryou{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  padding:14px 14px 16px; margin:0 0 20px;
  background:linear-gradient(180deg,rgba(34, 182, 255,.09),rgba(34, 182, 255,.02));
  border:1px solid rgba(34, 182, 255,.2); border-radius:18px;
}
@media (min-width:600px){ .bh-library-v3.bh-v2 .bh-vault-foryou{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } }
.bh-library-v3.bh-v2 .bh-vault-foryou[data-dismissed="1"]{ display:none !important; }
.bh-library-v3.bh-v2 .bh-vault-fy-hd{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 2px 2px; }
.bh-library-v3.bh-v2 .bh-vault-fy-titles{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.bh-library-v3.bh-v2 .bh-vault-fy-label{ font:800 12px/1 'Syne',system-ui,sans-serif; letter-spacing:.01em; text-transform:none; color:var(--bh-v2-accent-lite); display:inline-flex; align-items:center; gap:6px; }
.bh-library-v3.bh-v2 .bh-vault-fy-sub{ font:500 10px/1.3 'Manrope',system-ui,sans-serif; letter-spacing:.02em; color:rgba(242,237,228,.5); }
.bh-library-v3.bh-v2 .bh-vault-fy-dismiss{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.55); width:24px; height:24px; border-radius:50%; font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s,color .15s; }
.bh-library-v3.bh-v2 .bh-vault-fy-dismiss:hover{ background:rgba(255,255,255,.12); color:#fff; }
/* For-you mini card = cover + title + price only (busy bits hidden) */
.bh-library-v3.bh-v2 .bh-vault-foryou .track-row-container{ min-width:0 !important; margin:0 !important; padding:0 !important; }
.bh-library-v3.bh-library--neutral.bh-v2 .bh-vault-foryou .track-row{
  display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:0 !important; padding:0 !important; margin:0 !important;
  border:1px solid rgba(255,255,255,.07) !important; border-radius:12px !important; overflow:hidden !important; height:100% !important;
  background:rgba(255,255,255,.04) !important; transition:transform .22s var(--bh-v2-ease),border-color .22s,box-shadow .22s !important;
}
@media (hover:hover) and (pointer:fine){
  .bh-library-v3.bh-library--neutral.bh-v2 .bh-vault-foryou .track-row:hover{ transform:translateY(-3px) !important; border-color:rgba(34, 182, 255,.35) !important; box-shadow:0 14px 30px -14px rgba(14,127,214,.6) !important; }
}
.bh-library-v3.bh-library--neutral.bh-v2 .bh-vault-foryou .track-cover{ width:100% !important; height:auto !important; aspect-ratio:1/1 !important; border-radius:0 !important; position:relative !important; overflow:hidden !important; }
.bh-library-v3.bh-v2 .bh-vault-foryou .track-cover::before{ display:none !important; }
.bh-library-v3.bh-library--neutral.bh-v2 .bh-vault-foryou .track-cover img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; }
.bh-library-v3.bh-v2 .bh-vault-foryou .master-play{
  position:absolute !important; inset:auto !important; top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
  width:42px !important; height:42px !important; border-radius:50% !important;
  background:linear-gradient(135deg,rgba(184,158,255,.97),rgba(14,127,214,.97)) !important; border:1px solid rgba(255,255,255,.4) !important; color:#fff !important;
  opacity:1 !important; transform:translate(-50%,-50%) scale(.9) !important; box-shadow:0 8px 20px -6px rgba(14,127,214,.7) !important;
  transition:opacity .2s,transform .22s cubic-bezier(.34,1.56,.64,1) !important; z-index:3 !important;
}
.bh-library-v3.bh-v2 .bh-vault-foryou .track-row:hover .master-play,
.bh-library-v3.bh-v2 .bh-vault-foryou .master-play.is-playing{ opacity:1 !important; transform:translate(-50%,-50%) scale(1.06) !important; }
.bh-library-v3.bh-v2 .bh-vault-foryou .master-play .bh-play-icon{ font-size:13px !important; }
.bh-library-v3.bh-v2 .bh-vault-foryou .track-info{ padding:8px 9px 4px !important; }
.bh-library-v3.bh-v2 .bh-vault-foryou .track-title{ font:700 12px/1.2 'Syne',system-ui,sans-serif !important; color:#f4f1ea !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; display:block !important; -webkit-line-clamp:unset !important; }
.bh-library-v3.bh-v2 .bh-vault-foryou .track-sub,
.bh-library-v3.bh-v2 .bh-vault-foryou .track-card-producer,
.bh-library-v3.bh-v2 .bh-vault-foryou .track-meta,
.bh-library-v3.bh-v2 .bh-vault-foryou .bh-lib-fav,
.bh-library-v3.bh-v2 .bh-vault-foryou .track-yt-badge{ display:none !important; }
.bh-library-v3.bh-v2 .bh-vault-foryou .track-right{ flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; padding:0 9px 9px !important; margin-top:auto !important; border:0 !important; width:auto !important; }

/* ════════════════════════════════════════════════════════
   FILTER DECK — moved here from beats_page.php's inline <style> so it
   survives WP Compress + ?bh_spa=1 (the inline copy vanished on those loads,
   leaving the filters unstyled / "deficient"). Scoped .bh-library-v3 (catalog
   root, present in every beats context) at (0,2,0)+ so it beats the inline copy.
   ════════════════════════════════════════════════════════ */
/* height:auto !important — the bar was rendering height-frozen at its collapsed
   value (186/257px) and did NOT reflow when the "More" panel / producer-chips row
   un-hid, so that content spilled (overflow:visible) and painted ON TOP of the
   sibling .beats-panel cards ("producer buttons + beat cards in the same position",
   worse when logged out / on a stripped-CSS load). Forcing height:auto makes the bar
   grow with its content so the cards below reflow down instead of being overlapped. */
.bh-library-v3 .bh-filter-bar{ padding:0 0 8px; display:flex; flex-direction:column; gap:10px; height:auto !important; min-height:0; }
.bh-library-v3 .bh-filter-bar__top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Search — full width, premium */
.bh-library-v3 .bh-filter-bar > .search-modular-vault{ display:flex; align-items:center; gap:10px; width:100%; padding:12px 15px; margin:0; border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); transition:border-color .15s,background .15s,box-shadow .15s; box-sizing:border-box; }
.bh-library-v3 .bh-filter-bar > .search-modular-vault:focus-within{ border-color:rgba(34, 182, 255,.55); background:rgba(34, 182, 255,.05); box-shadow:0 0 0 3px rgba(34, 182, 255,.1); }
.bh-library-v3 .bh-filter-bar > .search-modular-vault .search-modular-vault__icon{ color:rgba(34, 182, 255,.75); flex-shrink:0; }
.bh-library-v3 .bh-filter-bar > .search-modular-vault input[name="bh_s"]{ flex:1; min-width:0; background:none; border:0; color:#f0f0f4; font:600 13.5px/1 'Manrope',system-ui,sans-serif; outline:none; }
.bh-library-v3 .bh-filter-bar > .search-modular-vault input[name="bh_s"]::placeholder{ color:rgba(255,255,255,.4); }
/* Sort pills */
.bh-library-v3 .bh-sort-btns{ display:flex; flex-wrap:wrap; gap:6px; flex:1; min-width:0; align-items:center; }
.bh-library-v3 .bh-sort-label{ font:700 9px/1 'DM Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-right:3px; flex-shrink:0; }
.bh-library-v3 .bh-sort-btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:22px; color:rgba(255,255,255,.6); font:600 11px/1 'Manrope',system-ui,sans-serif; cursor:pointer; white-space:nowrap; transition:background .14s,color .14s,border-color .14s,box-shadow .14s,transform .1s; }
.bh-library-v3 .bh-sort-btn:hover{ background:rgba(255,255,255,.09); color:#fff; border-color:rgba(255,255,255,.22); }
.bh-library-v3 .bh-sort-btn:active{ transform:scale(.96); }
.bh-library-v3 .bh-sort-btn svg{ flex-shrink:0; opacity:.65; }
.bh-library-v3 .bh-sort-btn.is-active{ background:linear-gradient(135deg,rgba(34, 182, 255,.3),rgba(14,127,214,.2)); border-color:rgba(34, 182, 255,.6); color:#fff; box-shadow:0 5px 16px -7px rgba(14,127,214,.6),0 0 0 1px rgba(34, 182, 255,.22); }
.bh-library-v3 .bh-sort-btn.is-active svg{ opacity:1; }
/* More toggle + count badge */
.bh-library-v3 .bh-filter-toggle{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:22px; color:rgba(255,255,255,.6); font:600 11px/1 'Manrope',system-ui,sans-serif; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background .14s,color .14s,border-color .14s,box-shadow .14s; }
.bh-library-v3 .bh-filter-toggle:hover,.bh-library-v3 .bh-filter-toggle[aria-expanded="true"]{ background:rgba(34, 182, 255,.14); border-color:rgba(34, 182, 255,.4); color:#fff; box-shadow:0 0 0 1px rgba(34, 182, 255,.18); }
.bh-library-v3 .bh-filter-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px; background:linear-gradient(135deg,#4fc3ff,#0e7fd6); border-radius:9px; color:#fff; font:700 9px/1 'DM Mono',monospace; }
/* Producer chips row */
.bh-library-v3 .bh-filter-row--producer{ display:none; flex-wrap:wrap; align-items:center; gap:6px; padding:2px 0 0; }
.bh-library-v3 .bh-filter-label-sm{ font:700 9px/1 'DM Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); flex-shrink:0; margin-right:2px; }
.bh-library-v3 .bh-producer-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.bh-library-v3 .bh-producer-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 5px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:22px; color:rgba(255,255,255,.6); font:600 11px/1 'Manrope',system-ui,sans-serif; cursor:pointer; white-space:nowrap; transition:background .14s,color .14s,border-color .14s,box-shadow .14s; }
.bh-library-v3 .bh-producer-chip:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.22); }
.bh-library-v3 .bh-producer-chip.is-active{ background:linear-gradient(135deg,rgba(34, 182, 255,.3),rgba(14,127,214,.2)); border-color:rgba(34, 182, 255,.6); color:#fff; box-shadow:0 0 0 1px rgba(34, 182, 255,.22); }
.bh-library-v3 .bh-producer-chip__av{ width:20px; height:20px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid rgba(255,255,255,.18); }
.bh-library-v3 .bh-producer-chip.is-active .bh-producer-chip__av{ border-color:rgba(255,255,255,.55); }
/* Active-filter chips (surfaced outside the More panel) */
.bh-library-v3 .bh-filter-active-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.bh-library-v3 .bh-filter-active-chips:empty{ display:none; }
.bh-library-v3 .bh-filter-chip{ display:inline-flex; align-items:center; gap:5px; padding:4px 8px 4px 11px; background:rgba(34, 182, 255,.14); border:1px solid rgba(34, 182, 255,.3); border-radius:20px; font:600 10px/1 'DM Mono',monospace; letter-spacing:.04em; color:#e9e2ff; white-space:nowrap; }
.bh-library-v3 .bh-filter-chip__rm{ background:none; border:none; padding:0 0 0 2px; color:rgba(255,255,255,.55); cursor:pointer; font-size:13px; line-height:1; display:flex; align-items:center; }
.bh-library-v3 .bh-filter-chip__rm:hover{ color:#fff; }
/* Advanced panel (BPM / Key / Price) */
.bh-library-v3 .bh-filter-panel{ padding:12px 0 4px; border-top:1px solid rgba(255,255,255,.07); }
.bh-library-v3 .bh-filter-adv-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.bh-library-v3 .bh-filter-group{ display:flex; flex-direction:column; gap:6px; }
.bh-library-v3 .bh-filter-label{ font:700 9px/1 'DM Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.42); }
.bh-library-v3 .bh-filter-pair{ display:flex; align-items:center; gap:6px; }
.bh-library-v3 .bh-filter-sep{ color:rgba(255,255,255,.3); font-size:11px; }
.bh-library-v3 .bh-filter-input{ width:64px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:9px; color:#f0f0f4; padding:7px 9px; font:400 12px/1 'Manrope',system-ui,sans-serif; -moz-appearance:textfield; appearance:textfield; }
.bh-library-v3 .bh-filter-input::-webkit-outer-spin-button,.bh-library-v3 .bh-filter-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.bh-library-v3 .bh-filter-input:focus,.bh-library-v3 .bh-filter-select:focus{ outline:none; border-color:rgba(34, 182, 255,.5); background:rgba(34, 182, 255,.06); box-shadow:0 0 0 3px rgba(34, 182, 255,.1); }
.bh-library-v3 .bh-filter-select{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:9px; color:#f0f0f4; padding:7px 28px 7px 9px; font:400 12px/1 'Manrope',system-ui,sans-serif; appearance:none; -webkit-appearance:none; min-width:96px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; }
.bh-library-v3 .bh-filter-select option{ background:#1a1a28; color:#f0f0f4; }
.bh-library-v3 .bh-filter-actions{ display:flex; justify-content:flex-end; margin-top:10px; }
.bh-library-v3 .bh-filter-reset{ background:none; border:none; color:rgba(255,255,255,.4); font:700 10px/1 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; padding:5px 2px 5px 8px; }
.bh-library-v3 .bh-filter-reset:hover{ color:rgba(255,255,255,.8); }
.bh-library-v3 .bh-sort-btn:focus-visible,.bh-library-v3 .bh-filter-toggle:focus-visible,.bh-library-v3 .bh-filter-reset:focus-visible,.bh-library-v3 .bh-producer-chip:focus-visible,.bh-library-v3 .bh-filter-input:focus-visible,.bh-library-v3 .bh-filter-select:focus-visible{ outline:2px solid rgba(34, 182, 255,.6); outline-offset:2px; }
@media (max-width:560px){
  .bh-library-v3 .bh-sort-btns{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .bh-library-v3 .bh-sort-btns::-webkit-scrollbar{ display:none; }
  .bh-library-v3 .bh-sort-label{ display:none; }
  .bh-library-v3 .bh-filter-input{ width:54px; }
  .bh-library-v3 .bh-filter-adv-row{ gap:12px; }
}

/* SPA stage: disable sticky search */
#bh-home-app-stage .bh-library-v3.bh-v2 .search-modular-vault{ position:relative !important; top:0 !important; }

/* ════════════════════════════════════════════════════════
   VAULT CHROME — moved into the enqueued layer so it SURVIVES WP Compress +
   ?bh_spa=1. These bits were inline-only in beats_page.php, so on a stripped/SPA
   load the /songs/ artist headers, credit pills, genre-chip colours and the mobile
   action collapse all vanished (the mock of that stripped state proved it). Values
   mirror the inline block; scoped .bh-v2 so they win even when the inline is gone.
   ════════════════════════════════════════════════════════ */

/* Genre chip → violet default (beats-page.css:1881 hard-codes it lime #C8FF00 !important — override) + per-genre accents */
.bh-library-v3.bh-v2 .track-chip--genre{ background:rgba(34, 182, 255,.12) !important; border-color:rgba(34, 182, 255,.2) !important; color:rgba(34, 182, 255,.85) !important; font-family:'dm mono',"dm mono Fallback",monospace !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="trap"] .track-chip--genre{ background:rgba(239,68,68,.1) !important; border-color:rgba(239,68,68,.22) !important; color:#f87171 !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="drill"] .track-chip--genre{ background:rgba(249,115,22,.1) !important; border-color:rgba(249,115,22,.22) !important; color:#fb923c !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="rnb"] .track-chip--genre,.bh-library-v3.bh-v2 .track-row[data-genre="r&b"] .track-chip--genre{ background:rgba(168,85,247,.1) !important; border-color:rgba(168,85,247,.22) !important; color:#c084fc !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="reggaeton"] .track-chip--genre{ background:rgba(34,197,94,.1) !important; border-color:rgba(34,197,94,.2) !important; color:#4ade80 !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="dancehall"] .track-chip--genre{ background:rgba(234,179,8,.1) !important; border-color:rgba(234,179,8,.2) !important; color:#facc15 !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="afrobeats"] .track-chip--genre,.bh-library-v3.bh-v2 .track-row[data-genre="afrobeat"] .track-chip--genre{ background:rgba(20,184,166,.1) !important; border-color:rgba(20,184,166,.2) !important; color:#2dd4bf !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="pop"] .track-chip--genre{ background:rgba(244,63,94,.1) !important; border-color:rgba(244,63,94,.2) !important; color:#fb7185 !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="latin"] .track-chip--genre{ background:rgba(245,158,11,.1) !important; border-color:rgba(245,158,11,.2) !important; color:#fbbf24 !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="hip-hop"] .track-chip--genre,.bh-library-v3.bh-v2 .track-row[data-genre="hip hop"] .track-chip--genre{ background:rgba(99,102,241,.1) !important; border-color:rgba(99,102,241,.2) !important; color:#818cf8 !important; }

/* Credit pills (PROD / ft. / BEAT) */
.bh-library-v3.bh-v2 .track-sub--credits{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.bh-library-v3.bh-v2 .track-credit{ display:inline-flex; align-items:center; gap:3px; font:400 10px/1 'DM Mono',monospace; letter-spacing:.03em; color:rgba(242,237,228,.62); }
.bh-library-v3.bh-v2 .track-credit__tag{ font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:1px 4px; border-radius:3px; color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); }

/* Songs artist-group header (sticky, avatar + name + role pill + count + view-profile) */
.bh-library-v3.bh-v2 .songs-artist-head{ display:flex; align-items:center; gap:13px; padding:10px 12px; margin-bottom:10px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.07); border-radius:13px; position:sticky; top:0; z-index:3; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.bh-library-v3.bh-v2 .songs-artist-head__avwrap{ display:block; flex-shrink:0; line-height:0; border-radius:50%; }
.bh-library-v3.bh-v2 .songs-artist-head__av{ width:50px; height:50px; border-radius:50%; object-fit:cover; display:block; border:2px solid rgba(255,255,255,.14); background:#1a1a1a; box-shadow:0 4px 14px rgba(0,0,0,.45); transition:transform .18s,border-color .18s; }
.bh-library-v3.bh-v2 .songs-artist-head__avwrap:hover .songs-artist-head__av{ transform:scale(1.05); border-color:rgba(34, 182, 255,.55); }
.bh-library-v3.bh-v2 .songs-artist-head__meta{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.bh-library-v3.bh-v2 .songs-artist-head__namerow{ display:flex; align-items:center; gap:8px; min-width:0; }
.bh-library-v3.bh-v2 .songs-artist-head__name{ font:800 16px/1.05 'Manrope',system-ui,sans-serif; color:#f6f2ea; text-decoration:none; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bh-library-v3.bh-v2 a.songs-artist-head__name:hover{ color:#fff; }
.bh-library-v3.bh-v2 .songs-artist-head__role{ flex-shrink:0; font:800 8px/1 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; padding:3px 7px; border-radius:5px; }
.bh-library-v3.bh-v2 .songs-artist-head__role.is-artist{ color:#7FD0FF; background:rgba(34, 182, 255,.16); border:1px solid rgba(34, 182, 255,.4); }
.bh-library-v3.bh-v2 .songs-artist-head__role.is-producer{ color:#7dd3fc; background:rgba(56,189,248,.13); border:1px solid rgba(56,189,248,.38); }
.bh-library-v3.bh-v2 .songs-artist-head__count{ font:600 9.5px/1 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:rgba(242,237,228,.4); }
.bh-library-v3.bh-v2 .songs-artist-head__link{ flex-shrink:0; font:700 9.5px/1 'DM Mono',monospace; letter-spacing:.05em; text-transform:uppercase; color:rgba(34, 182, 255,.9); text-decoration:none; white-space:nowrap; transition:color .15s; }
.bh-library-v3.bh-v2 .songs-artist-head__link:hover{ color:#7FD0FF; }

/* Song action buttons (Derechos / YouTube) */
.bh-library-v3.bh-v2 .bh-song-acts{ display:flex; align-items:center; gap:6px; }
.bh-library-v3.bh-v2 .bh-song-act{ display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 11px; border-radius:999px; font:700 10px/1 'Manrope',system-ui,sans-serif; letter-spacing:.02em; text-decoration:none; cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:background .15s,border-color .15s,color .15s,transform .1s; -webkit-appearance:none; }
.bh-library-v3.bh-v2 .bh-song-act:active{ transform:scale(.95); }
.bh-library-v3.bh-v2 .bh-song-act svg{ flex-shrink:0; }
.bh-library-v3.bh-v2 .bh-song-act--rights{ background:rgba(34, 182, 255,.14); border-color:rgba(34, 182, 255,.36); color:#7FD0FF; }
.bh-library-v3.bh-v2 .bh-song-act--rights:hover{ background:rgba(34, 182, 255,.24); border-color:rgba(34, 182, 255,.6); color:#fff; }
.bh-library-v3.bh-v2 .bh-song-act--yt{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); color:rgba(242,237,228,.62); }
.bh-library-v3.bh-v2 .bh-song-act--yt:hover{ background:rgba(255,0,0,.12); border-color:rgba(255,60,60,.4); color:#fff; }
.bh-library-v3.bh-v2 .bh-song-act--yt svg{ color:#ff4444; }

/* Songs mobile: collapse action text to icons + smaller header/cover so titles stay readable */
@media (max-width:560px){
  .bh-library-v3.bh-v2 .bh-song-act span{ display:none; }
  .bh-library-v3.bh-v2 .bh-song-act{ padding:0; width:30px; height:30px; justify-content:center; }
  .bh-library-v3.bh-v2 .songs-artist-head{ padding:8px 10px; gap:10px; }
  .bh-library-v3.bh-v2 .songs-artist-head__av{ width:42px; height:42px; }
  .bh-library-v3.bh-v2 .songs-artist-head__name{ font-size:14px; }
  .bh-library-v3.bh-v2 .songs-artist-head__link{ display:none; }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row{ grid-template-columns:56px minmax(0,1fr) auto !important; gap:11px !important; padding:9px 13px 9px 17px !important; }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-cover{ width:56px !important; height:56px !important; }
  .bh-library-v3.bh-library--neutral.bh-v2 .beats-panel[data-panel="songs"] .track-row::before{ left:17px !important; top:9px !important; width:56px !important; height:56px !important; transform:translate(4px,4px) !important; }
}

/* Hidden song groups (JS marks filtered/empty groups with [hidden]) must stay hidden
   even though the songs panel sets display:block above — otherwise on a stripped load
   (no inline .songs-artist-group[hidden] rule) display:block would beat the UA hidden. */
.bh-library-v3.bh-v2 .songs-artist-group[hidden]{ display:none !important; }
.bh-library-v3.bh-v2 .track-row[data-genre="lo-fi"] .track-chip--genre,.bh-library-v3.bh-v2 .track-row[data-genre="lofi"] .track-chip--genre{ background:rgba(148,163,184,.08) !important; border-color:rgba(148,163,184,.16) !important; color:#94a3b8 !important; }