/* ============================================================================
 * NeonWave — 2026 design language, applied to every remaining surface.
 * Deep surfaces, soft glass, 16–20px radii, inner top highlight, brand glow,
 * sheen on hover. Loaded last. Purely visual.
 * ========================================================================== */
:root {
    --n26-r: 18px; --n26-r-sm: 12px;
    --n26-glass: rgba(255, 255, 255, 0.05);
    --n26-glass-2: rgba(255, 255, 255, 0.085);
    --n26-line: rgba(255, 255, 255, 0.10);
    --n26-line-2: rgba(255, 255, 255, 0.20);
    --n26-hi: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --n26-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    --n26-brand: linear-gradient(135deg, #5b9aff 0%, #8b5cf6 100%);
    --n26-accent: rgba(var(--clr-primary-rgb, 91, 154, 255), 1);
    --n26-accent-soft: rgba(var(--clr-primary-rgb, 91, 154, 255), 0.35);
}

/* ── 1. Cards ───────────────────────────────────────────────────────────── */
body .track-card, body .album-card, body .shortcut-card, body .artist-card, body .home-card {
    border-radius: var(--n26-r) !important; border: 1px solid var(--n26-line) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.03)) !important;
    box-shadow: var(--n26-hi), 0 10px 30px rgba(0, 0, 0, 0.35) !important; padding: 12px !important;
}
body .track-card:hover, body .album-card:hover, body .artist-card:hover, body .shortcut-card:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05)) !important;
    border-color: var(--n26-line-2) !important;
}
body .track-card .thumb, body .album-card .thumb, body .album-card .album-card-cover, body .shortcut-card .thumb { border-radius: var(--n26-r-sm) !important; overflow: hidden; }
body .track-card .title, body .album-card .title, body .album-card .album-card-title { font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.01em; margin-top: 12px !important; }
body .track-card .artist, body .album-card .artist, body .album-card .album-card-meta { font-size: 12.5px !important; color: rgba(255, 255, 255, 0.62) !important; }
body .track-card .play-overlay, body .shortcut-play-btn {
    background: var(--n26-brand) !important; color: #fff !important; border: 0 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 24px var(--n26-accent-soft) !important;
}
body .track-card .track-favorite-btn { background: rgba(0, 0, 0, 0.45) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 50% !important; }

/* ── 2. Rows (search results, playlists, albums) ────────────────────────── */
body .track-row { border-radius: var(--n26-r-sm) !important; transition: background 0.18s ease, transform 0.18s ease !important; }
body .track-row:hover { background: var(--n26-glass-2) !important; }
body .track-row-index { color: rgba(255, 255, 255, 0.45) !important; font-variant-numeric: tabular-nums; }
body .track-row-title { font-weight: 600 !important; }
body .track-row-duration, body .track-col-meta { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.55) !important; }
body .track-list-header { font-size: 11px !important; letter-spacing: 0.10em !important; text-transform: uppercase; color: rgba(255, 255, 255, 0.5) !important; border-bottom: 1px solid var(--n26-line) !important; }
body .track-row img, body .track-row .track-row-main img { border-radius: 8px !important; }

/* ── 3. Section titles ──────────────────────────────────────────────────── */
body .section-title, body .search-block-title { position: relative; letter-spacing: -0.025em !important; }
body #homeView .section-title::after { content: ""; display: block; width: 36px; height: 3px; margin-top: 8px; border-radius: 3px; background: var(--n26-brand); opacity: 0.9; }

/* ── 4. Buttons ─────────────────────────────────────────────────────────── */
body .btn-glow, body .premium-action-btn.is-primary, body .updater-install-btn, body .weekly-recap-open-btn, body .hes-btn.is-primary, body .lib-empty .hes-btn.is-primary {
    background: var(--n26-brand) !important; color: #fff !important; border: 0 !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), 0 0 24px rgba(139, 92, 246, 0.35) !important;
}
body .sp-pl-play, body .artist-profile-hero .sp-pl-play {
    background: var(--n26-brand) !important; color: #fff !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 30px rgba(139, 92, 246, 0.45) !important;
}
body .sp-pl-play svg { fill: #fff !important; color: #fff !important; }
body .premium-action-btn:not(.is-primary), body .sp-pill, body .pod-more, body .np-box-action, body .st-btn:not(.is-primary) {
    background: var(--n26-glass) !important; border: 1px solid var(--n26-line) !important; color: #fff !important; border-radius: 500px !important;
}
body .premium-action-btn:not(.is-primary):hover, body .sp-pill:hover, body .pod-more:hover, body .np-box-action:hover, body .st-btn:not(.is-primary):hover { background: var(--n26-glass-2) !important; border-color: var(--n26-line-2) !important; }

/* ── 5. Chips / filter pills ────────────────────────────────────────────── */
body .main-filter-btn, body .sidebar-filter-btn, body .lib-filter-pill, body .artist-filter-chip {
    height: 34px; padding: 0 14px !important; border-radius: 500px !important;
    background: var(--n26-glass) !important; border: 1px solid var(--n26-line) !important; color: rgba(255, 255, 255, 0.86) !important;
    font-weight: 600 !important; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease !important;
}
body .main-filter-btn:hover, body .sidebar-filter-btn:hover, body .lib-filter-pill:hover, body .artist-filter-chip:hover { background: var(--n26-glass-2) !important; border-color: var(--n26-line-2) !important; border-radius: 500px !important; }
body .main-filter-btn.active, body .lib-filter-pill.active, body .artist-filter-chip.active, body .artist-filter-chip.is-active, body .sidebar-filter-btn.is-accent {
    background: #fff !important; color: #000 !important; border-color: #fff !important;
}

/* ── 6. Heroes (playlist / album / artist) ──────────────────────────────── */
body .sp-pl-hero, body .playlist-hero { position: relative; isolation: isolate; border-radius: 20px !important; overflow: hidden; }
body .sp-pl-hero::before, body .playlist-hero::before {
    content: "" !important; display: block !important; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(70% 90% at 15% 0%, rgba(var(--nw-cover-r, 91), var(--nw-cover-g, 154), var(--nw-cover-b, 255), 0.45), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 70%);
}
body .playlist-hero-art, body .sp-pl-hero .playlist-hero-art { border-radius: 16px !important; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.10) !important; }
body .sp-pl-meta { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 500px; background: var(--n26-glass); border: 1px solid var(--n26-line); }
body .artist-profile-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75)); }
body .artist-profile-hero-content, body .artist-profile-copy { position: relative; z-index: 1; }

/* ── 7. Modals ──────────────────────────────────────────────────────────── */
body .modal-content {
    border-radius: 20px !important; border: 1px solid var(--n26-line) !important;
    background: linear-gradient(180deg, rgba(32, 32, 40, 0.92), rgba(14, 14, 20, 0.96)) !important;
    box-shadow: var(--n26-hi), 0 30px 90px rgba(0, 0, 0, 0.7) !important; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    position: relative; overflow: hidden;
}
body .modal-content::before { content: ""; position: absolute; inset: -40% -20% auto -20%; height: 60%; pointer-events: none; background: radial-gradient(50% 60% at 50% 0%, rgba(var(--clr-primary-rgb, 91, 154, 255), 0.28), transparent 70%); }
body .modal-content > :not(.modal-close) { position: relative; }
body .modal-close { width: 34px; height: 34px; border-radius: 50% !important; background: var(--n26-glass) !important; border: 1px solid var(--n26-line) !important; color: #fff !important; display: inline-grid; place-items: center; }
body .modal-close:hover { background: var(--n26-glass-2) !important; }
body .modal-content input[type="text"], body .modal-content input[type="url"], body .modal-content input[type="search"], body .modal-content .neon-input {
    border-radius: 12px !important; background: rgba(0, 0, 0, 0.35) !important; border: 1px solid var(--n26-line-2) !important; color: #fff !important;
}
body .modal-content input:focus { border-color: #fff !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important; }

/* ── 8. Settings ────────────────────────────────────────────────────────── */
body .st-window {
    border-radius: 22px !important; border: 1px solid var(--n26-line) !important;
    background: linear-gradient(180deg, rgba(26, 26, 34, 0.94), rgba(12, 12, 18, 0.97)) !important;
    box-shadow: var(--n26-hi), 0 40px 100px rgba(0, 0, 0, 0.7) !important;
}
body .st-nav { background: rgba(0, 0, 0, 0.25) !important; border-right: 1px solid var(--n26-line) !important; }
body .st-nav-title { letter-spacing: -0.03em; }
body .st-nav-item { border-radius: 12px !important; transition: background 0.18s ease, color 0.18s ease !important; }
body .st-nav-item:hover { background: var(--n26-glass) !important; }
body .st-nav-item.active { background: var(--n26-brand) !important; color: #fff !important; box-shadow: 0 8px 22px rgba(139, 92, 246, 0.35); }
body .st-card { border-radius: 16px !important; border: 1px solid var(--n26-line) !important; background: var(--n26-glass) !important; box-shadow: var(--n26-hi) !important; }
body .st-row { border-color: var(--n26-line) !important; }
body .st-segment { border-radius: 500px !important; background: rgba(0, 0, 0, 0.35) !important; border: 1px solid var(--n26-line) !important; padding: 3px !important; }
body .st-segment button { border-radius: 500px !important; }
body .st-segment button.active { background: #fff !important; color: #000 !important; }
body .st-input, body .st-select { border-radius: 12px !important; background: rgba(0, 0, 0, 0.35) !important; border: 1px solid var(--n26-line-2) !important; }
body .st-logout { border-radius: 500px !important; border: 1px solid rgba(255, 90, 106, 0.35) !important; color: #ff8a95 !important; background: rgba(255, 90, 106, 0.08) !important; }
body .st-logout:hover { background: rgba(255, 90, 106, 0.16) !important; }
body .st-keys kbd, body .st-keys .st-value { border-radius: 8px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--n26-line); padding: 3px 8px; font-weight: 700; }

/* ── 9. Now-playing panel ───────────────────────────────────────────────── */
body .np-box, body .np-lyrics-container {
    border-radius: 16px !important; border: 1px solid var(--n26-line) !important;
    background: var(--n26-glass) !important; box-shadow: var(--n26-hi) !important;
}
body .np-box-title, body .sp-lyrics-card-title { font-weight: 800 !important; letter-spacing: -0.01em; }
body .np-stage-btn, body .np-icon-btn, body .sp-lc-btn { border-radius: 50% !important; background: var(--n26-glass) !important; border: 1px solid var(--n26-line) !important; color: #fff !important; }
body .np-stage-btn:hover, body .np-icon-btn:hover, body .sp-lc-btn:hover { background: var(--n26-glass-2) !important; border-color: var(--n26-line-2) !important; }
body .np-queue-preview .np-queue-item, body .np-queue-preview > div { border-radius: 10px; }

/* ── 10. Rail, top bar, player: one family ──────────────────────────────── */
body .sidebar, body .main-content, body .now-playing-panel.visible { box-shadow: var(--n26-hi) !important; }
body .sp-search.top-search-wrap, body .sp-home-btn, body .sp-avatar { border-radius: 14px !important; }
body .player-footer.sp-footer { border-top: 1px solid var(--n26-line) !important; }
body .sp-footer .thumb { border-radius: 10px !important; }

/* ── 11. Inputs & sliders ───────────────────────────────────────────────── */
body #progressSlider::-webkit-slider-thumb, body #volumeSlider::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.5); }

/* ── 12. Empty states & skeletons share the same glass ──────────────────── */
body .sp-empty-icon { background: var(--n26-glass-2) !important; border: 1px solid var(--n26-line); }
body .home-empty-shortcuts, body .lib-empty { border-radius: var(--n26-r) !important; background: var(--n26-glass) !important; border: 1px dashed var(--n26-line-2) !important; box-shadow: var(--n26-hi); }

/* ── 13. Login page card ────────────────────────────────────────────────── */
body .lg-card { border-radius: 22px !important; border: 1px solid var(--n26-line) !important; box-shadow: var(--n26-hi), 0 30px 90px rgba(0, 0, 0, 0.65) !important; }
body .lg-card .neon-input { border-radius: 12px !important; background: rgba(0, 0, 0, 0.35) !important; }
body .login-btn { background: var(--n26-brand) !important; color: #fff !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 26px rgba(139, 92, 246, 0.4) !important; }
body .login-btn.is-ok { background: #fff !important; color: #000 !important; }

/* ── 14. Horizontal shelves: no native scrollbar, faded edges, glass arrows ── */
body .mu-row, body .pod-row, body .mu-artists, body .nw-hscroll {
    scrollbar-width: none !important; -ms-overflow-style: none; overflow-y: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    padding-left: 2px; padding-right: 2px; scroll-behavior: smooth;
}
body .mu-row::-webkit-scrollbar, body .pod-row::-webkit-scrollbar, body .mu-artists::-webkit-scrollbar, body .nw-hscroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.nw-shelf-nav { display: inline-flex; gap: 6px; margin-left: auto; }
.pod-shelf-head .nw-shelf-nav { margin-left: 8px; }
.nw-shelf-nav button {
    width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--n26-line); background: var(--n26-glass); color: #fff;
    display: grid; place-items: center; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}
.nw-shelf-nav button:hover { background: var(--n26-glass-2); border-color: var(--n26-line-2); transform: scale(1.06); }
.nw-shelf-nav button:disabled { opacity: 0.28; cursor: default; transform: none; }
.nw-shelf-nav svg { width: 14px; height: 14px; }
/* vertical scroll areas keep the thin overlay scrollbar of the theme (never the classic arrows) */
body .main-content, body .sidebar, body .st-body { scrollbar-width: auto !important; } /* lets the thin webkit style below apply */
body .np-scroll, body .spl-lyrics { scrollbar-width: none !important; }
body .main-content::-webkit-scrollbar { width: 6px; }
body .main-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 6px; }
body .main-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); }
body .main-content::-webkit-scrollbar-track, body .main-content::-webkit-scrollbar-button { background: transparent; display: none; }
body .st-body::-webkit-scrollbar, body .sidebar::-webkit-scrollbar { width: 6px; }
body .st-body::-webkit-scrollbar-thumb, body .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 6px; }

/* ── 15. Genre tiles, editorial edition (overrides the emoji version) ───── */
body .sp-browse-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; grid-auto-rows: 120px; gap: 12px !important; }
body .sp-browse-grid > :nth-child(1), body .sp-browse-grid > :nth-child(6), body .sp-browse-grid > :nth-child(11) { grid-column: span 1; }
body .sp-browse-tile {
    --g1: #5b5b7a; --g2: #16161f; --ink: rgba(255, 255, 255, 0.08);
    padding: 16px 18px 14px !important; border-radius: 16px !important; align-items: flex-end;
    background:
        radial-gradient(90% 120% at 100% 0%, var(--g1) 0%, rgba(0, 0, 0, 0) 62%),
        linear-gradient(160deg, var(--g2) 0%, #0a0a12 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 26px rgba(0, 0, 0, 0.40) !important;
}
/* ghost word in the background instead of a picto */
body .sp-browse-tile::before {
    content: attr(data-q); position: absolute; right: -6px; top: -14px; z-index: 0;
    font: 900 64px/1 Inter, "Segoe UI", system-ui, sans-serif; letter-spacing: -0.06em; text-transform: uppercase; white-space: nowrap;
    color: var(--ink); filter: none; opacity: 1; transform: none;
    -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 100%); mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
    transition: transform 0.5s cubic-bezier(.2, .8, .2, 1), color 0.3s ease;
}
body .sp-browse-tile:hover::before { transform: translateX(-6px); color: rgba(255, 255, 255, 0.13); }
/* small label top-left + arrow bottom-right */
body .sp-browse-tile span { position: static !important; font-size: 19px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; gap: 0; }
body .sp-browse-tile span::after { z-index: 2; }
body .sp-browse-tile span::before { content: "Genre"; display: block; margin-bottom: 26px; font: 700 10px/1 Inter, "Segoe UI", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
body .sp-browse-tile span::after {
    content: "→"; position: absolute; right: 16px; bottom: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    font: 700 14px/1 Inter, "Segoe UI", sans-serif; color: #fff; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 1; transform: none; transition: background 0.2s ease, transform 0.25s ease;
}
body .sp-browse-tile:hover span::after { background: #fff; color: #000; transform: translateX(2px); }
body .sp-browse-tile:hover { transform: translateY(-3px) !important; border-color: rgba(255, 255, 255, 0.22) !important; }
/* muted, grown-up palette per genre */
body .sp-browse-tile[data-q="Rap FR"]      { --g1: #c2410c; --g2: #2a1208; }
body .sp-browse-tile[data-q="Drill"]       { --g1: #1d4ed8; --g2: #0b1230; }
body .sp-browse-tile[data-q="Pop"]         { --g1: #7c3aed; --g2: #1d1030; }
body .sp-browse-tile[data-q="Afro"]        { --g1: #be123c; --g2: #2a0a16; }
body .sp-browse-tile[data-q="R&B"]         { --g1: #9d174d; --g2: #230a1a; }
body .sp-browse-tile[data-q="Hip-hop US"]  { --g1: #b45309; --g2: #261404; }
body .sp-browse-tile[data-q="Électro"]     { --g1: #0e7490; --g2: #071a22; }
body .sp-browse-tile[data-q="Rap belge"]   { --g1: #0369a1; --g2: #071826; }
body .sp-browse-tile[data-q="Amapiano"]    { --g1: #047857; --g2: #061c15; }
body .sp-browse-tile[data-q="Reggaeton"]   { --g1: #b91c1c; --g2: #250909; }
body .sp-browse-tile[data-q="Chill"]       { --g1: #4c1d95; --g2: #150c26; }
body .sp-browse-tile[data-q="Soirée"]      { --g1: #a21caf; --g2: #220a26; }
body .sp-browse-tile[data-q="Sport"]       { --g1: #15803d; --g2: #081a0e; }
body .sp-browse-tile[data-q="Love"]        { --g1: #be185d; --g2: #26081a; }
body .sp-browse-tile[data-q="Années 2010"] { --g1: #1e40af; --g2: #0b1230; }
body .sp-browse-tile[data-q="Nouveautés"]  { --g1: #4d7c0f; --g2: #121a06; }