/* ============================================================================
 * NeonWave × Lucid — polish pass on the remaining screens.
 * Loaded last.
 * ========================================================================== */

/* ── Home: filter chips float on the page (no dark strip) ── */
body .main-filters {
    background: transparent !important; border: 0 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    padding: 16px 24px 8px !important; gap: 8px !important;
}
body .section-title { font-size: 24px !important; margin: 24px 0 12px !important; }
body .empty-state, body .home-empty, body #homeView .error-state, body #homeView p.muted {
    color: var(--text-subdued) !important;
}

/* ── Generic empty state (Spotify) ── */
.sp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 64px 24px; color: var(--text-base); }
.sp-empty-icon { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--background-elevated-highlight); color: var(--text-base); }
.sp-empty-icon svg { width: 40px; height: 40px; }
.sp-empty h3 { font-size: 24px; font-weight: 800; margin: 12px 0 0; letter-spacing: -0.02em; }
.sp-empty p { font-size: 14px; color: var(--text-subdued); margin: 0 0 12px; }

/* ── Liked songs hero (purple → blue cover with the heart) ── */
.sp-liked-art { display: flex !important; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, #450af5, #8e8ee5 70%, #c4efd9) !important; }
.sp-liked-art svg { width: 38%; height: 38%; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.3)); }
.sp-liked .sp-pl-hero h2 { font-size: clamp(36px, 5.5vw, 88px) !important; font-weight: 800 !important; letter-spacing: -0.04em !important; line-height: 1.02; margin: 6px 0 !important; }
.sp-liked { padding-bottom: 24px; }
.sp-liked #likedRows { padding: 0 16px; }
#favoriteTracks[data-display="hero"] { display: block !important; padding: 0 !important; }

/* ── Search "Browse all" tiles ── */
#searchCategories { padding: 8px 24px 24px; }
.sp-browse-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 16px 0 16px; color: var(--text-base); }
.sp-browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.sp-browse-tile {
    position: relative; overflow: hidden; aspect-ratio: 1.6 / 1; border-radius: var(--br); border: 0; cursor: pointer; text-align: left;
    background: var(--tile); padding: 16px; color: #fff; transition: transform 0.2s ease, filter 0.2s ease;
}
.sp-browse-tile span { position: relative; z-index: 1; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.15); }
.sp-browse-tile i {
    position: absolute; right: -14%; bottom: -10%; width: 52%; aspect-ratio: 1; border-radius: 6px; transform: rotate(25deg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0.25)); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.sp-browse-tile:hover { filter: brightness(1.08); transform: scale(1.02); }

/* ── Artist page: Spotify banner (full-bleed image, huge name, verified) ── */
body .artist-profile-hero {
    position: relative; min-height: 0 !important; height: clamp(280px, 40vh, 420px); margin: 0 !important; padding: 0 !important;
    border-radius: 0 !important; border: 0 !important; background: none !important; overflow: hidden; display: flex; align-items: flex-end;
}
body .artist-profile-hero-backdrop {
    position: absolute; inset: 0; background-size: cover !important; background-position: center 25% !important;
    filter: none !important; transform: none !important; opacity: 1 !important;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
body .artist-profile-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.55)); pointer-events: none; }
body .artist-profile-topbar, body .artist-profile-avatar { display: none !important; }
body .artist-profile-hero-content { position: relative; z-index: 1; padding: 0 32px 24px !important; display: block !important; width: 100%; }
body .artist-profile-kicker {
    display: inline-flex !important; align-items: center; gap: 8px; background: none !important; border: 0 !important; padding: 0 !important;
    font-size: 14px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; color: #fff !important;
}
body .artist-profile-kicker::before {
    content: ""; width: 24px; height: 24px; border-radius: 50%;
    background: #4cb3ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M10.6 15.6 6.4 11.4l1.4-1.4 2.8 2.8 6-6 1.4 1.4z'/%3E%3C/svg%3E") center / 16px no-repeat;
}
body .artist-profile-kicker { font-size: 0 !important; }
body .artist-profile-kicker::after { content: "Artiste vérifié"; font-size: 14px; }
body .artist-profile-name { font-size: clamp(48px, 7vw, 96px) !important; font-weight: 800 !important; letter-spacing: -0.04em !important; line-height: 1.02 !important; margin: 4px 0 8px !important; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
body .artist-profile-meta { color: #fff !important; font-size: 16px !important; }
body .artist-profile-meta span { background: none !important; border: 0 !important; padding: 0 !important; }
body .artist-profile-actions { margin-top: 20px !important; gap: 16px !important; }
body .artist-profile-actions .btn-glow { width: 56px; height: 56px; min-height: 56px; padding: 0 !important; font-size: 0 !important; border-radius: 8px !important; }
body .artist-profile-actions .btn-glow::before {
    content: ""; width: 22px; height: 22px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7.05 3.606 13.49 7.788a.7.7 0 0 1 0 1.212L7.05 20.394A.7.7 0 0 1 6 19.788V4.212a.7.7 0 0 1 1.05-.606z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7.05 3.606 13.49 7.788a.7.7 0 0 1 0 1.212L7.05 20.394A.7.7 0 0 1 6 19.788V4.212a.7.7 0 0 1 1.05-.606z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .artist-profile-follow-btn { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: 500px !important; }
body .artist-profile-follow-btn:hover { border-color: #fff !important; transform: scale(1.04) !important; border-radius: 500px !important; }
body .artist-profile-section { padding: 0 24px !important; }

/* ── Settings / profile modal on Lucid surfaces ── */
body .weekly-recap-card, body .settings-recap-card, body .profile-recap-card, body [class*="recap-card"] {
    background: var(--background-highlight) !important; background-image: none !important;
    border: var(--default-border) !important; border-radius: var(--m-br) !important; box-shadow: none !important;
}
body [class*="recap-card"] [class*="orbit"], body [class*="recap-card"]::before, body [class*="recap-card"]::after { display: none !important; }
body .settings-logout-btn, body #logoutBtn, body .logout-btn {
    background: transparent !important; color: var(--clr-error, #ffb4ab) !important; border: 1px solid rgba(var(--clr-error-rgb, 255, 180, 171), 0.45) !important;
    border-radius: var(--br) !important; box-shadow: none !important;
}
body .settings-logout-btn:hover, body #logoutBtn:hover, body .logout-btn:hover { background: var(--clr-error-container, #93000a) !important; color: var(--clr-on-error-container, #ffdad6) !important; border-radius: var(--l-br) !important; }
body .profile-recap-panel { background: var(--background-highlight) !important; background-image: none !important; border: var(--default-border) !important; border-radius: var(--m-br) !important; box-shadow: none !important; }
body .profile-recap-panel::before, body .profile-recap-panel::after { display: none !important; }

/* Retouches */
body .sp-pl-hero .playlist-hero-art.sp-liked-art { background: linear-gradient(135deg, #450af5, #8e8ee5 70%, #c4efd9) !important; }
body .artist-profile-actions .artist-profile-follow-btn,
body .artist-profile-actions .artist-profile-follow-btn:not(.is-following):not(.followed) {
    background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 500px !important; min-height: 32px !important; padding: 0 16px !important; font-size: 14px !important;
}
body .artist-profile-actions .artist-profile-follow-btn:hover { border-color: #fff !important; background: transparent !important; color: #fff !important; transform: scale(1.04) !important; }
body .artist-profile-shell { padding: 0 !important; margin: 0 !important; }
body #artistViewContent, body #artistView { padding: 0 !important; }
body .artist-profile-hero { width: 100% !important; max-width: none !important; }

/* Spotify import modal */
.sp-import { display: flex; flex-direction: column; gap: 12px; padding: 28px !important; }
.sp-import-head { display: flex; align-items: center; gap: 12px; }
.sp-import-head h2 { font-size: 20px; font-weight: 800; margin: 0; color: var(--text-base); letter-spacing: -0.01em; }
.sp-import-help { margin: 0; font-size: 14px; color: var(--text-subdued); }
.sp-import #spotifyImportUrl { height: 44px; padding: 0 14px !important; }
.sp-import-status { min-height: 18px; font-size: 13px; color: var(--text-subdued); }
.sp-import .btn-glow { margin-top: 4px !important; }
.nw-select {
    background: var(--background-base) !important; color: var(--text-base) !important; border: var(--default-border) !important;
    border-radius: var(--br) !important; height: 34px; padding: 0 10px; font-size: 13px; font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.nw-select option { background: #181818; color: #fff; }

/* Library filter chips: one tidy row */
body .sidebar.sk-expanded .sidebar-filters {
    display: flex !important; flex-wrap: wrap; gap: 6px !important; padding: 0 8px 8px !important;
}
body .sidebar.sk-expanded .sidebar-filters .sidebar-filter-btn {
    white-space: nowrap !important; min-height: 30px !important; height: 30px; padding: 0 12px !important;
    font-size: 13px !important; line-height: 1 !important; width: auto !important; flex: 0 0 auto;
}
body .sidebar.sk-expanded .sidebar-filters { flex-wrap: nowrap !important; gap: 4px !important; }
body .sidebar.sk-expanded .sidebar-filters .sidebar-filter-btn { padding: 0 10px !important; font-size: 12.5px !important; }

.sp-import-skip { display: block; width: 100%; margin-top: 8px; height: 40px; border: 0; border-radius: 500px; background: none; color: #b3b3b3; font: 700 14px Inter, "Segoe UI", sans-serif; cursor: pointer; }
.sp-import-skip:hover { color: #fff; }
.sp-import-skip[hidden] { display: none; }

/* Artist names: inline links, clickable everywhere (panel included) */
.artist-links { display: inline; white-space: normal; }
.artist-link { cursor: pointer; pointer-events: auto; }
.artist-link:hover { text-decoration: underline; color: #fff; }
.np-track-info { position: relative; z-index: 5; pointer-events: auto; }
.np-track-info .artist { pointer-events: auto; }

/* ── Weekly recap card: tinted by the app accent, real stats, stacked cover sleeves ── */
body .weekly-recap-section { margin: 8px 0 28px !important; }
body .wr-card {
    position: relative; display: flex !important; align-items: center; gap: 32px; min-height: 0 !important;
    padding: 28px 32px !important; border-radius: 12px !important; overflow: hidden; cursor: pointer; border: 0 !important;
    background: linear-gradient(120deg, rgba(var(--clr-primary-rgb, 91, 154, 255), 0.32), rgba(var(--clr-tertiary-rgb, 122, 77, 255), 0.18) 55%, rgba(255, 255, 255, 0.03)) , #121212 !important;
    box-shadow: none !important; transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), background 0.3s;
}
body .wr-card::before, body .wr-card::after { display: none !important; }
body .wr-card:hover { transform: translateY(-2px); }
body .wr-card .weekly-recap-orbit { display: none !important; }

body .wr-art { position: relative; flex: 0 0 210px; height: 170px; }
body .wr-art.is-empty { display: none; }
body .wr-sleeve {
    position: absolute; top: 50%; width: 132px; height: 132px; border-radius: 6px; object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transition: transform 0.4s cubic-bezier(.2, .8, .2, 1);
}
body .wr-sleeve-0 { left: 0; z-index: 4; transform: translateY(-50%) rotate(-6deg); }
body .wr-sleeve-1 { left: 28px; z-index: 3; transform: translateY(-50%) rotate(2deg); }
body .wr-sleeve-2 { left: 56px; z-index: 2; transform: translateY(-50%) rotate(8deg); }
body .wr-sleeve-3 { left: 78px; z-index: 1; transform: translateY(-50%) rotate(14deg); opacity: 0.85; }
body .wr-card:hover .wr-sleeve-0 { transform: translateY(-52%) rotate(-9deg) translateX(-6px); }
body .wr-card:hover .wr-sleeve-2 { transform: translateY(-48%) rotate(11deg) translateX(8px); }
body .wr-card:hover .wr-sleeve-3 { transform: translateY(-46%) rotate(17deg) translateX(14px); }

body .wr-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
body .wr-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clr-primary, #5b9aff); }
body .wr-title { margin: 6px 0 0 !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -0.03em; line-height: 1.1; color: #fff; }
body .wr-meta { margin: 6px 0 0 !important; font-size: 14px; color: rgba(255, 255, 255, 0.7) !important; }
body .wr-stats { display: flex; gap: 28px; margin-top: 18px; }
body .wr-stats div { display: flex; flex-direction: column; }
body .wr-stats b { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
body .wr-stats span { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
body .wr-btn {
    margin-top: 20px; height: 40px; padding: 0 22px; border: 0; border-radius: 500px; cursor: pointer;
    background: #fff; color: #000; font: 700 14px Inter, "Segoe UI", sans-serif; transition: transform 0.15s;
}
body .wr-card:hover .wr-btn { transform: scale(1.04); }
@media (max-width: 760px) { body .wr-art { display: none; } body .wr-title { font-size: 24px !important; } }

/* Search inside a playlist (opens next to the magnifier, like Spotify) */
.sp-pl-find { width: 0; flex: 0 0 auto; min-width: 0; overflow: hidden; transition: width 0.25s cubic-bezier(.2, .8, .2, 1); }
.sp-pl-find.open { width: 220px !important; flex: 0 0 220px; }
.sp-pl-find input {
    width: 220px; height: 32px; padding: 0 12px; border: 0; border-radius: 4px; outline: none;
    background: rgba(255, 255, 255, 0.1); color: #fff; font: 500 13px Inter, "Segoe UI", sans-serif;
}
.sp-pl-find input::placeholder { color: rgba(255, 255, 255, 0.55); }
.sp-pl-find-empty { padding: 24px 16px; color: rgba(255, 255, 255, 0.6); font-size: 14px; }
/* Library: playlists sit right under "Titres likés", and the floating next-song card never hides the last row */
.library-section-playlists { margin-top: -6px; }
#sidebarLibraryList { padding-bottom: 90px; }

/* Playlist download button: progress ring while downloading, accent when downloaded */
.sp-dl-btn { position: relative; }
.sp-dl-ring { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); transform: rotate(-90deg); pointer-events: none; opacity: 0; }
.sp-dl-ring circle { fill: none; stroke: var(--clr-primary, #5b9aff); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100.5; stroke-dashoffset: calc(100.5 * (1 - var(--dl, 0))); transition: stroke-dashoffset 0.4s ease; }
.sp-dl-btn.is-downloading .sp-dl-ring { opacity: 1; }
.sp-dl-btn.is-downloading > svg:not(.sp-dl-ring) { animation: dlPulse 1.4s ease-in-out infinite; }
@keyframes dlPulse { 50% { opacity: 0.45; } }
body .sp-dl-btn.is-downloaded { color: var(--clr-primary, #5b9aff) !important; }
.sp-offline { display: inline-flex; color: var(--clr-primary, #5b9aff); margin-right: 5px; vertical-align: -1px; }

body #playlistTracks .track-row.pl-filtered-out { display: none !important; }

/* ── Offline mode ── */
.offline-banner {
    position: fixed; left: 50%; bottom: 104px; z-index: 9000; transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 500px;
    background: rgba(20, 20, 24, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-size: 13px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    animation: offIn 0.4s cubic-bezier(.2, .8, .2, 1);
}
.offline-banner svg { color: #ffb4ab; flex-shrink: 0; }
.offline-banner button { height: 30px; padding: 0 14px; border: 0; border-radius: 500px; background: #fff; color: #000; font: 700 12.5px Inter, "Segoe UI", sans-serif; cursor: pointer; }
@keyframes offIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
body.is-offline #playlistTracks .track-row.is-unavailable { opacity: 0.35; cursor: not-allowed; }

/* ── Download: header progress + per-track states ── */
.pl-dl-status { display: flex; flex-direction: column; gap: 6px; min-width: 150px; margin-left: -8px; }
.pl-dl-text { font-size: 12.5px; font-weight: 700; color: var(--clr-primary, #5b9aff); font-variant-numeric: tabular-nums; }
.pl-dl-track { position: relative; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.pl-dl-track i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--clr-primary, #5b9aff); transition: width 0.5s ease; }
.pl-dl-track i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); animation: upSweep 1.4s ease-in-out infinite; }
.pl-dl-status.is-done { animation: dlFade 2.2s ease forwards; }
@keyframes dlFade { 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes upSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

#playlistTracks .track-row .track-row-index { position: relative; }
#playlistTracks .track-row.dl-wait { opacity: 0.55; transition: opacity 0.3s; }
#playlistTracks .track-row.dl-active .track-row-index { color: transparent !important; }
#playlistTracks .track-row.dl-active .track-row-index::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15); border-top-color: var(--clr-primary, #5b9aff); animation: dlSpin 0.8s linear infinite;
}
@keyframes dlSpin { to { transform: rotate(360deg); } }
#playlistTracks .track-row.dl-active { background: rgba(var(--clr-primary-rgb, 91, 154, 255), 0.08); }
#playlistTracks .track-row.dl-done .track-row-thumb { position: relative; }
#playlistTracks .track-row.dl-done .track-row-thumb::after {
    content: ""; position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--clr-primary, #5b9aff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8.75 3v6.2l2.47-2.47 1.06 1.06L8 12.06 3.72 7.79l1.06-1.06L7.25 9.2V3h1.5z'/%3E%3C/svg%3E") center / 12px no-repeat;
    box-shadow: 0 0 0 2px #121212; animation: dlPop 0.4s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes dlPop { from { transform: scale(0); } to { transform: scale(1); } }
#playlistTracks .track-row.dl-failed { opacity: 0.4; }

html[lang="en"] body .artist-profile-kicker::after { content: "Verified artist"; }