/* ─────────────────────────────────────────────────────────────
   bbs-light-center.css — original adonis design restored:
   WHITE center content, dark header/footer/player (theme color).
   Loaded AFTER bbs-mobile.css + bbs-themes.css so it wins.

   Dark-design inline text colors are remapped for white bg via
   [style*=] attribute selectors; dark hero sections (.bbs-hero,
   .bbs-dark-hero) are exempted and keep light text.
   ───────────────────────────────────────────────────────────── */

/* ── Center = white (all themes) ────────────────────────────── */
#site-content,
html[data-bbs-theme] #site-content {
    background: #fff !important;
    padding-bottom: 48px;
}

/* ── Remap dark-design text colors → readable on white ─────── */
#site-content [style*="color:#fff"]     { color: #1e1e3a !important; }
#site-content [style*="color: #fff"]    { color: #1e1e3a !important; }
#site-content [style*="color:#b0b0d0"]  { color: #4a4a6a !important; }
#site-content [style*="color:#707090"]  { color: #8888aa !important; }
#site-content [style*="color:#707090"]  { color: #8888aa !important; }

/* headings inherit adonis dark on white */
#site-content h1, #site-content h2, #site-content h3,
#site-content h4, #site-content h5, #site-content h6 { color: #1e1e3a; }

/* ── EXEMPT: dark hero sections keep light text ─────────────── */
#site-content .bbs-hero [style*="color:#fff"],
#site-content .bbs-hero [style*="color: #fff"],
#site-content .bbs-dark-hero [style*="color:#fff"],
#site-content .bbs-dark-hero [style*="color: #fff"] { color: #fff !important; }

#site-content .bbs-hero [style*="color:#b0b0d0"],
#site-content .bbs-dark-hero [style*="color:#b0b0d0"] { color: #b0b0d0 !important; }

#site-content .bbs-hero [style*="color:#707090"],
#site-content .bbs-dark-hero [style*="color:#707090"] { color: #aab4c0 !important; }

#site-content .bbs-hero [style*="color:#707090"],
#site-content .bbs-dark-hero [style*="color:#707090"] { color: #98a1ab !important; }

#site-content .bbs-hero h1, #site-content .bbs-hero h2,
#site-content .bbs-dark-hero h1, #site-content .bbs-dark-hero h2 { color: #fff !important; }

/* ── EXEMPT: accent buttons / badges keep white text ────────── */
#site-content .bbs-album-play-btn,
#site-content .bbs-artist-play-btn,
#site-content .bbs-category-play-btn { color: #fff !important; }

#site-content [style*="background:#6c5ce7"]      { color: #fff !important; } /* rank badges */
#site-content [style*="background:rgba(0,0,0"]   { color: #fff !important; } /* play-count badges on covers */
#site-content [style*="font-size:2rem"]          { color: #fff !important; } /* hover play arrows */

/* ── Surfaces: hover rows & pills tuned for white ───────────── */
#site-content .bbs-home-track:hover { background: #f0f2f8 !important; }
#site-content .adonis-album-list .hover-bg-item:hover { background: #f0f2f8 !important; }

/* category pills: dark border → light */
#site-content [style*="border:1px solid #333355"] {
    border-color: #e6ecf5 !important;
    color: #4a4a6a !important;
}

/* category pills — logo dual-tone: blue #3c64dc + dark-navy #3c3c50 */
#site-content .bbs-cat-pill {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .22s;
    /* default: dark-navy text, blue border */
    color: #3c3c50;
    border: 1.5px solid #3c64dc;
    background: transparent;
}
/* alternate pills: blue text, dark-navy border */
#site-content .bbs-cat-pill:nth-child(even) {
    color: #3c64dc;
    border-color: #3c3c50;
}
/* hover — swap to filled logo-blue */
#site-content .bbs-cat-pill:hover {
    background: #3c64dc;
    border-color: #3c64dc;
    color: #fff;
}
#site-content .bbs-cat-pill:nth-child(even):hover {
    background: #3c3c50;
    border-color: #3c3c50;
    color: #fff;
}

/* ── Infinite marquee — trending tracks + browse categories ─────────── */
@keyframes bbs-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.bbs-mq-outer {
    overflow: hidden;
    position: relative;
    padding-bottom: 8px;
}
.bbs-mq-track {
    display: flex;
    width: max-content;
    will-change: transform;
}
.bbs-mq-outer:hover .bbs-mq-track {
    animation-play-state: paused !important;
}

/* artist avatar ring on white */
#site-content [style*="border:2px solid #252540"] { border-color: #e6ecf5 !important; }

/* dark image placeholders soften */
#site-content [style*="background:#1e1e32"] { background: #eef1f5 !important; }

/* hero (image-backed) placeholders stay dark */
#site-content .bbs-hero [style*="background:#1e1e32"],
#site-content .bbs-dark-hero [style*="background:#1e1e32"] { background: #1e1e32 !important; }

/* ── Listing toolbars: sort dropdown + grid/list toggle (light) ─────────
   Albums/Categories/Artists/Tracks pages had dark-theme inline colors
   (#252540/#b0b0d0/#333355) left over → unreadable black box on white.
   !important beats the leftover inline styles; .is-active set by JS. */
#site-content select[onchange] {
    background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7480' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E") no-repeat right 10px center !important;
    color: #1e1e3a !important;
    border: 1px solid #e6ecf5 !important;
    border-radius: 8px !important;
    padding: 7px 32px 7px 12px !important;
    font-size: .82rem;
    cursor: pointer;
    outline: none;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
#site-content select[onchange]:hover { border-color: #6c5ce7 !important; }
#site-content select[onchange]:focus {
    border-color: #6c5ce7 !important;
    box-shadow: 0 0 0 3px rgba(108,92,231,.15);
}
#site-content select[onchange] option { background: #fff; color: #1e1e3a; }

#site-content .bbs-view-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 7px 10px !important;
    border: 1px solid #e6ecf5 !important;
    background: #fff !important;
    color: #5a6470 !important;
    border-radius: 8px !important;
    cursor: pointer; line-height: 1;
    transition: background .15s, color .15s, border-color .15s;
}
#site-content .bbs-view-btn:hover { border-color: #6c5ce7 !important; color: #6c5ce7 !important; }
#site-content .bbs-view-btn.is-active {
    background: #6c5ce7 !important;
    border-color: #6c5ce7 !important;
    color: #fff !important;
}

/* leftover dark pills → light: pagination links + Load More buttons */
#site-content a[style*="background:#252540"],
#site-content button[style*="background:#252540"],
#site-content .bbs-load-more-btn[style*="#252540"] {
    background: #fff !important;
    color: #5a6470 !important;
    border-color: #e6ecf5 !important;
}
#site-content a[style*="background:#252540"]:hover,
#site-content button[style*="background:#252540"]:hover,
#site-content .bbs-load-more-btn[style*="#252540"]:hover {
    background: #6c5ce7 !important;
    color: #fff !important;
    border-color: #6c5ce7 !important;
}
/* dark dividers / avatar rings → soft light */
#site-content [style*="border:1px solid #252540"] { border-color: #e9edf2 !important; }
#site-content [style*="border:3px solid #252540"] { border-color: #e6ecf5 !important; }

/* ── Now-playing right actions: Like + More (professional) ──────────────
   Two equal circular icon-buttons, vertically centred, subtle hover bg.
   Fixes: heart(15px) vs 3-dot(22px) size mismatch + misaligned "1" count. */
.bbs-np-actions { gap: 2px; }
.bbs-np-actions .bbs-player-like-btn,
.bbs-np-actions .bbs-np-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 34px;
    padding: 0 9px;
    border: none;
    background: transparent;
    color: #707090;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    transition: background .18s, color .18s, transform .12s;
}
.bbs-np-actions .bbs-np-more { width: 34px; padding: 0; }
.bbs-np-actions .bbs-player-like-btn:hover,
.bbs-np-actions .bbs-np-more:hover { background: rgba(108,92,231,.14); color: #a29bfe; }
.bbs-np-actions .bbs-player-like-btn:active,
.bbs-np-actions .bbs-np-more:active { transform: scale(.9); }
/* heart icon + count: perfectly centred, line-height 1 (kills "1 down") */
.bbs-np-actions .bbs-like-icon { display: inline-flex; align-items: center; }
.bbs-np-actions .bbs-like-icon svg { display: block; width: 16px; height: 16px; }
.bbs-np-actions .bbs-like-count {
    font-size: .72rem; font-weight: 700; line-height: 1; margin-left: 6px;
}
.bbs-np-actions .bbs-like-count:empty { display: none; margin-left: 0; }
.bbs-np-actions .bbs-player-like-btn.bbs-liked { color: #6c5ce7; }
/* 3-dot sized to match heart */
.bbs-np-actions .bbs-np-more svg { display: block; height: 16px; width: auto; fill: currentColor; }

/* ── Side playlist panel: always-visible scrollbar ──────────────────────
   Theme set .jp-playlist overflow:hidden + used perfect-scrollbar (rails
   hover-only → invisible, only mouse-wheel worked). Force native scroll
   with a styled, always-visible scrollbar that appears when tracks overflow. */
.adonis-player-wrap .adonis-playlist { overflow: hidden; }      /* panel clips, child scrolls */
.adonis-player-wrap .adonis-playlist .jp-playlist {
    flex: 1 1 auto;
    min-height: 0;                  /* allow flex child to shrink → enables scroll */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;                              /* Firefox */
    scrollbar-color: #6c5ce7 rgba(255,255,255,.10);     /* Firefox: thumb track */
}
/* using native scroll → hide leftover perfect-scrollbar rails */
.adonis-player-wrap .adonis-playlist .ps__rail-x,
.adonis-player-wrap .adonis-playlist .ps__rail-y { display: none !important; }
/* WebKit (Chrome/Edge/Safari) — visible track + accent thumb */
.adonis-player-wrap .adonis-playlist .jp-playlist::-webkit-scrollbar { width: 10px; }
.adonis-player-wrap .adonis-playlist .jp-playlist::-webkit-scrollbar-track {
    background: rgba(255,255,255,.08);
    border-radius: 8px;
}
.adonis-player-wrap .adonis-playlist .jp-playlist::-webkit-scrollbar-thumb {
    background: #6c5ce7;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.adonis-player-wrap .adonis-playlist .jp-playlist::-webkit-scrollbar-thumb:hover {
    background: #5a4bd4;
    background-clip: content-box;
}

/* ═══════════════════════════════════════════════════════════════
   ADONIS REFERENCE THEME — color palette + glass player
   Source: AdonisMusicSite-2/AdonisMusicSite/assets/css/styles.css
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS variables (reference palette) ──────────────────────── */
:root {
    --bbs-bg-body:    #ffffff;
    --bbs-bg-surface: #ffffff;
    --bbs-bg-glass:   rgba(255,255,255,0.72);
    --bbs-bg-card:    #ffffff;
    --bbs-bg-hover:   #f0f2f8;
    --bbs-text-pri:   #1e1e3a;
    --bbs-text-sec:   #4a4a6a;
    --bbs-text-muted: #8888aa;
    --bbs-border:     #e6ecf5;
    --bbs-accent:     #6c5ce7;
    --bbs-accent-gr:  linear-gradient(135deg,#6c5ce7,#a29bfe);
    --bbs-shadow-sm:  0 2px 8px rgba(0,0,0,.05);
    --bbs-shadow-md:  0 8px 30px rgba(0,0,0,.08);
    --bbs-shadow-lg:  0 20px 60px rgba(0,0,0,.12);
    --bbs-radius-card: 20px;
    --bbs-transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ── Page body background ────────────────────────────────────── */
body,
#page-wrapper,
.page-wrapper,
#site-wrapper { background: var(--bbs-bg-body) !important; }

/* site-content stays white (cards sit on f4f6fb body) */
#site-content,
html[data-bbs-theme] #site-content { background: #fff !important; }

/* ── Album / Artist / Track cards — hover lift ───────────────── */
#site-content .adonis-album-list .item-card,
#site-content .adonis-artist-list .item-card,
#site-content .adonis-track-list .item-card,
#site-content [class*="col-"] .card,
#site-content .thumbnail {
    border-radius: var(--bbs-radius-card) !important;
    box-shadow: var(--bbs-shadow-sm);
    transition: transform var(--bbs-transition), box-shadow var(--bbs-transition) !important;
}
#site-content .adonis-album-list .item-card:hover,
#site-content .adonis-artist-list .item-card:hover,
#site-content .thumbnail:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--bbs-shadow-md) !important;
}

/* ── Track rows — reference .song-item style ─────────────────── */
#site-content .bbs-home-track,
#site-content .bbs-album-track,
#site-content .bbs-cat-track,
#site-content .bbs-search-track,
#site-content .adonis-album-list .hover-bg-item,
#site-content .adonis-track-list .hover-bg-item {
    border-radius: 14px !important;
    box-shadow: var(--bbs-shadow-sm);
    transition: transform var(--bbs-transition), box-shadow var(--bbs-transition), background var(--bbs-transition) !important;
}
#site-content .bbs-home-track:hover,
#site-content .bbs-album-track:hover,
#site-content .bbs-cat-track:hover,
#site-content .bbs-search-track:hover,
#site-content .adonis-album-list .hover-bg-item:hover,
#site-content .adonis-track-list .hover-bg-item:hover {
    transform: translateX(4px);
    box-shadow: var(--bbs-shadow-md) !important;
    background: var(--bbs-bg-hover) !important;
}

/* ── Section headings ────────────────────────────────────────── */
#site-content .adonis-section-title,
#site-content h2.section-title,
#site-content .panel-heading h3,
#site-content .bbs-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bbs-text-pri);
    letter-spacing: -0.02em;
}

/* ── Glass widget panels (sidebar) ──────────────────────────────
   Sidebar cards get frosted glass look from reference template  */
#site-content .widget,
#site-content .panel,
#site-content .card-box {
    background: var(--bbs-bg-glass) !important;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-radius: var(--bbs-radius-card) !important;
    box-shadow: var(--bbs-shadow-sm) !important;
    transition: background var(--bbs-transition), box-shadow var(--bbs-transition) !important;
}

/* ════════════════════════════════════════════════════════════════
   PLAYER — ORIGINAL Adonis layout (top sticky bar + right off-canvas
   drawer, identical to demo-03 template). We DO NOT reposition the
   player or the drawer — the theme's own JS + adonis.css drive the
   layout/slide exactly like the template. We ONLY recolor to PURE
   WHITE so it reads on a light site.
   ════════════════════════════════════════════════════════════════ */

/* Player bar surface → frosted glass via ::before so the off-canvas
   drawer (position:fixed child) is NOT trapped by a backdrop-filter
   containing block on the parent. The pseudo-element gets the blur;
   the real .adonis-player-wrap stays filter-free. */
.adonis-player-wrap {
    background: transparent !important;
    box-shadow: 0 -4px 24px rgba(108,92,231,0.08), 0 2px 18px rgba(30,20,60,0.07) !important;
}
.adonis-player-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.76);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255,255,255,0.55);
    pointer-events: none;
    z-index: 0;
}
.adonis-player-wrap .adonis-player-horizontal,
.adonis-player-wrap .master-container-holder,
.adonis-player-wrap #adonis_jp_container,
.adonis-player-wrap .jp-interface,
.adonis-player-wrap .jp-gui {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* Track title / artist / time → dark readable on white */
.adonis-player-wrap .current-item .jp-title,
.adonis-player-wrap .current-item .jp-title a {
    color: #1e1e3a !important; font-weight: 600 !important;
}
.adonis-player-wrap .current-item .artist-name,
.adonis-player-wrap .current-item .artist-name a,
.adonis-player-wrap .jp-time,
.adonis-player-wrap .jp-duration,
.adonis-player-wrap .jp-current-time { color: #8888aa !important; }

/* Control icons → dark, accent on hover. Play = accent. */
.adonis-player-wrap .jp-previous svg,
.adonis-player-wrap .jp-next svg,
.adonis-player-wrap .jp-shuffle svg,
.adonis-player-wrap .jp-repeat svg,
.adonis-player-wrap .toggle-off-canvas svg,
.adonis-player-wrap .adonis-mute-control svg {
    fill: #1e1e3a !important; transition: fill .2s !important;
}
.adonis-player-wrap .jp-controls a:hover svg,
.adonis-player-wrap .jp-shuffle:hover svg,
.adonis-player-wrap .jp-repeat:hover svg,
.adonis-player-wrap .toggle-off-canvas:hover svg { fill: #6c5ce7 !important; }
.adonis-player-wrap .jp-play svg { fill: #6c5ce7 !important; }

/* Progress + volume → accent on light track */
.adonis-player-wrap .jp-play-bar { background: #6c5ce7 !important; }
.adonis-player-wrap .jp-seek-bar { background: #e6ecf5 !important; }
.adonis-player-wrap .jp-volume-bar-value { background: #6c5ce7 !important; }
/* volume wrapper is 30px tall — a bg here made a visible box. Keep it
   transparent; the thin 4px ::before is the real track. */
.adonis-player-wrap .jp-volume-bar,
.adonis-player-wrap .jp-volume-controls .jp-volume-bar { background: transparent !important; }
.adonis-player-wrap .jp-volume-controls .jp-volume-bar::before { background: #e6ecf5 !important; }

/* DRAWER — frosted glass, high opacity so track list text stays
   readable even when warm/dark page content is behind it. */
.adonis-player-wrap .adonis-playlist,
.adonis-player-wrap .adonis-playlist-player,
.adonis-player-wrap .adonis-playlist-player.player-bg-yellow {
    background: rgba(255,255,255,0.94) !important;
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-left: 1px solid rgba(230,236,245,0.80) !important;
    box-shadow: -8px 0 40px rgba(108,92,231,0.10) !important;
}
.adonis-player-wrap .adonis-playlist .jp-title,
.adonis-player-wrap .adonis-playlist .jp-title a,
.adonis-player-wrap .adonis-playlist .player-details h3 { color: #1e1e3a !important; }
.adonis-player-wrap .adonis-playlist .artist-name,
.adonis-player-wrap .adonis-playlist .artist-name a { color: #8888aa !important; }
.adonis-player-wrap .adonis-playlist .close-offcanvas svg,
.adonis-player-wrap .adonis-playlist .jp-previous svg,
.adonis-player-wrap .adonis-playlist .jp-next svg { fill: #1e1e3a !important; }
.adonis-player-wrap .adonis-playlist .jp-play svg { fill: #6c5ce7 !important; }

/* ── Global smooth transitions on interactive elements ───────── */
#site-content a,
#site-content button,
#site-content .btn {
    transition: color var(--bbs-transition),
                background var(--bbs-transition),
                border-color var(--bbs-transition),
                box-shadow var(--bbs-transition),
                transform var(--bbs-transition) !important;
}

/* ── Page scrollbar — reference style ───────────────────────── */
html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: var(--bbs-bg-body); }
html::-webkit-scrollbar-thumb { background: var(--bbs-accent); border-radius: 10px; }
html { scrollbar-width: thin; scrollbar-color: #6c5ce7 var(--bbs-bg-body); }

/* ═══════════════════════════════════════════════════════════════
   TRACK LIST / GRID — reference .song-item card style
   All pages: Tracks, Albums, Artists, Categories, Home
   Classes: .hover-bg-item (all listing pages) + .bbs-home-track (home list)
   ═══════════════════════════════════════════════════════════════ */

/* Base card style for ALL track/list rows (reference .song-item) */
#site-content .hover-bg-item,
#site-content li.hover-bg-item,
#site-content .item.hover-bg-item {
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: var(--bbs-shadow-sm) !important;
    margin-bottom: 8px !important;
    border: 1px solid var(--bbs-border) !important;
    transition: transform var(--bbs-transition),
                box-shadow var(--bbs-transition),
                background var(--bbs-transition) !important;
    list-style: none !important;
    overflow: hidden !important;
}
#site-content .hover-bg-item:hover,
#site-content li.hover-bg-item:hover,
#site-content .item.hover-bg-item:hover {
    transform: translateX(4px) !important;
    box-shadow: var(--bbs-shadow-md) !important;
    background: #faf9ff !important;
}

/* Home track LIST rows only (NOT grid cards) — slide-right hover */
#site-content .bbs-home-track:not(.bbs-grid-card) {
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: var(--bbs-shadow-sm) !important;
    border: 1px solid var(--bbs-border) !important;
    margin-bottom: 6px !important;
    transition: transform var(--bbs-transition),
                box-shadow var(--bbs-transition),
                background var(--bbs-transition) !important;
}
#site-content .bbs-home-track:not(.bbs-grid-card):hover {
    transform: translateX(4px) !important;
    box-shadow: var(--bbs-shadow-md) !important;
    background: #faf9ff !important;
}

/* ═══════════════════════════════════════════════════════════════
   UNIFORM GRID CARD — every landing/grid item (trending, new
   albums, hot albums, same-artist, similar tracks). One bordered
   white card, equal width, equal text alignment.
   ═══════════════════════════════════════════════════════════════ */
#site-content .bbs-grid-card {
    background: #ffffff !important;
    border: 1px solid var(--bbs-border) !important;
    border-radius: 14px !important;
    padding: 10px 10px 12px !important;
    box-shadow: var(--bbs-shadow-sm) !important;
    min-width: 172px !important;
    max-width: 172px !important;
    flex-shrink: 0 !important;
    transition: transform .25s cubic-bezier(.4,0,.2,1),
                box-shadow .25s cubic-bezier(.4,0,.2,1) !important;
}
#site-content .bbs-grid-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--bbs-shadow-md) !important;
}
/* image wrapper (first child) — even gap to text */
#site-content .bbs-grid-card > div:first-child {
    margin-bottom: 10px !important;
    border-radius: 10px !important;
}
/* text block — left aligned, equal spacing across all cards */
#site-content .bbs-grid-card p,
#site-content .bbs-grid-card a { text-align: left !important; }
/* title: 2 lines max, fixed height → every card bottom aligns */
#site-content .bbs-grid-card .bbs-grid-title,
#site-content .bbs-grid-card > a > p,
#site-content .bbs-grid-card > p:first-of-type {
    font-size: .84rem !important;
    font-weight: 600 !important;
    color: #1e1e3a !important;
    line-height: 1.3 !important;
    margin: 0 0 3px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.18em !important;
    white-space: normal !important;
}
/* sub-line (artist / plays) muted, single line */
#site-content .bbs-grid-card > p:last-of-type {
    font-size: .73rem !important;
    color: #8888aa !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Listing-page grid cards (albums/artists pages) — hover lift */
#site-content .adonis-album-list .item:hover,
#site-content .adonis-artist-list .item:hover {
    transform: translateY(-4px) !important;
}
#site-content .adonis-album-list .thumb img,
#site-content .adonis-artist-list .thumb img,
#site-content .img-album-thumb img,
#site-content .album-cover img {
    border-radius: 12px !important;
    transition: box-shadow var(--bbs-transition), transform var(--bbs-transition) !important;
}
#site-content .adonis-album-list .thumb:hover img,
#site-content .adonis-artist-list .thumb:hover img {
    box-shadow: var(--bbs-shadow-md) !important;
    transform: scale(1.03) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PLAYER BARS → force brand purple (beats theme accent e.g. amber).
   Higher specificity than bbs-themes.css html[data-bbs-theme] rules.
   ═══════════════════════════════════════════════════════════════ */
.adonis-player-wrap .jp-progress .jp-play-bar,
.adonis-player-wrap .jp-volume-controls .jp-volume-bar-value,
.adonis-player-wrap .jp-volume-bar .jp-volume-bar-value,
.adonis-playlist-player .jp-progress .jp-play-bar,
.adonis-playlist-player .jp-volume-bar .jp-volume-bar-value {
    background: #6c5ce7 !important;
    background-image: none !important;
}
.adonis-player-wrap .jp-volume-bar-value::after,
.adonis-player-wrap .jp-play-bar::after,
.adonis-playlist-player .jp-play-bar::after {
    background: #6c5ce7 !important;
    box-shadow: none !important;   /* kill blue halo glow around the knob */
}

/* ═══════════════════════════════════════════════════════════════
   HOME "Most Played Artists" — bordered card, centered (matches grid)
   ═══════════════════════════════════════════════════════════════ */
#site-content .bbs-grid-artist {
    background: #ffffff !important;
    border: 1px solid var(--bbs-border) !important;
    border-radius: 14px !important;
    padding: 14px 10px 12px !important;
    box-shadow: var(--bbs-shadow-sm) !important;
    min-width: 150px !important;
    max-width: 150px !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    transition: transform .25s cubic-bezier(.4,0,.2,1),
                box-shadow .25s cubic-bezier(.4,0,.2,1) !important;
}
#site-content .bbs-grid-artist:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--bbs-shadow-md) !important;
}
#site-content .bbs-grid-artist > p:first-of-type {
    color: #1e1e3a !important; font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
   LISTING PAGES (Albums / Artists) — responsive bordered grid cards.
   Categories tiles excluded (a.d-block.box-rounded = image tile).
   ═══════════════════════════════════════════════════════════════ */
#site-content .bbs-view-grid-items > div > a.d-block:not(.box-rounded) {
    display: block !important;
    background: #ffffff !important;
    border: 1px solid var(--bbs-border) !important;
    border-radius: 14px !important;
    padding: 10px 10px 12px !important;
    box-shadow: var(--bbs-shadow-sm) !important;
    text-decoration: none !important;
    height: 100% !important;
    transition: transform .25s cubic-bezier(.4,0,.2,1),
                box-shadow .25s cubic-bezier(.4,0,.2,1) !important;
}
#site-content .bbs-view-grid-items > div > a.d-block:not(.box-rounded):hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--bbs-shadow-md) !important;
}
/* dark-theme leftover text → readable on white */
#site-content .bbs-view-grid-items h6 { color: #1e1e3a !important; }
#site-content .bbs-view-grid-items small,
#site-content .bbs-view-grid-items .inactive-color { color: #8888aa !important; }