:root {
    color-scheme: light dark;
    --bg: #fff;
    --fg: #111;
    --muted: #777;
    --card: #eee;
    --accent: #d6336c;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #111;
        --fg: #eee;
        --muted: #999;
        --card: #222;
        --accent: #ff6b9a;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 1.5rem;
    background: var(--bg);
    color: var(--fg);
    font: 15px/1.4 system-ui, sans-serif;
}

header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

h1 { margin: 0; font-size: 1.5rem; }
h1 .rss { color: var(--muted); font-weight: normal; font-size: .85rem; }
h1 .eink-toggle { padding: 0; font-size: 1.1rem; vertical-align: -.1em; }
h1 .eink-toggle svg { display: block; }
h1 .eink-toggle[aria-pressed="true"] svg { transform: rotate(180deg); }

input,
select {
    padding: .5rem .75rem;
    border: 1px solid var(--card);
    border-radius: 6px;
    background: var(--card);
    color: inherit;
    font: inherit;
}

/* Trois familles de commandes, les mêmes partout :
   - .btn : bouton (ou lien d'action) à fond de carte, bordure d'accent au survol ; .primary pour l'action principale (▶, lien
     direct), en accent plein ; .small dans la fenêtre d'un album ;
   - .link : lien ou bouton dans le texte, souligné discrètement, en accent au survol ;
   - .icon : symbole seul (×, ‹ ›, ⏮ ⏭), gris, en couleur du texte au survol. */
.btn {
    display: inline-block;
    padding: .5rem .75rem;
    border: 1px solid var(--card);
    border-radius: 6px;
    background: var(--card);
    color: var(--fg);
    font: inherit;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.btn:hover,
.btn:focus-visible { border-color: var(--accent); }
.btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.btn.primary { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.btn.primary:hover:not(:disabled),
.btn.primary:focus-visible { filter: brightness(1.1); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:disabled:hover { border-color: var(--card); }
.btn.primary:disabled:hover { border-color: var(--accent); }
.btn.small { padding: .25rem .75rem; font-size: .85rem; }
.btn[hidden] { display: none; }

.link {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: .2em;
    cursor: pointer;
}

.link:hover,
.link:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
.link[hidden] { display: none; }

.icon {
    padding: 0 .4rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
}

.icon:hover:not(:disabled),
.icon:focus-visible { color: var(--fg); }
.icon:disabled { opacity: .3; cursor: default; }

.btn:focus-visible,
.link:focus-visible,
.icon:focus-visible,
nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

nav {
    display: flex;
    gap: .5rem;
}

/* Outils propres à un onglet : tirages et tri (Albums), mix (Playlists, Titres), export (Titres) */
.tools {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.tools[hidden] { display: none; }
.mix-status { color: var(--muted); font-size: .85rem; }

/* Mode mix de l'onglet Playlists : une case sur chaque pochette, cochée pour les playlists choisies */
#playlists.mixing .card::after {
    content: "";
    position: absolute;
    top: .4rem;
    right: .4rem;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgb(0 0 0 / .35);
    color: #fff;
    font-size: .9rem;
}

#playlists.mixing .card[aria-pressed="true"]::after {
    content: "✓";
    border-color: var(--accent);
    background: var(--accent);
}

#playlists.mixing .card[aria-pressed="true"] img,
#playlists.mixing .card[aria-pressed="true"] .cover { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Filtre exact posé depuis la fenêtre d'un album (artiste ou année) : un clic le retire */
.chip { border-color: var(--accent); }

nav button {
    padding: .4rem .9rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}

nav button[aria-selected="true"] {
    background: var(--card);
    color: var(--fg);
}

nav small { font-size: .85em; }

main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.25rem;
}

main[hidden] { display: none; }

/* Mes favoris : trois colonnes (albums, playlists, titres), une seule sur écran étroit. Les cartes y sont plus petites que dans
   leurs onglets, pour en tenir au moins deux de front par colonne. */
main.favorites:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    align-items: start;
}

.favorites > .status { grid-column: 1 / -1; }
.favorites section[hidden] { display: none; }
.favorites h2 { margin: 0 0 .75rem; font-size: 1rem; }
.favorites h2 small { color: var(--muted); font-weight: normal; }
.favorites .empty { margin: 0; color: var(--muted); font-size: .85rem; }
.favorites .empty[hidden] { display: none; }

.fav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr));
    gap: 1rem;
}

.favorites .tracklist { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 60rem) {
    main.favorites:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    content-visibility: auto; /* ne rend que les cartes visibles */
    contain-intrinsic-size: auto 260px;
    container-type: inline-size; /* la pastille ★ se place en bas de la pochette, carrée : à 100cqw du haut */
}

.card[hidden] { display: none; }

/* Album ou playlist : ouvre la fenêtre de ses titres */
.card.album,
.card.playlist { cursor: pointer; }
.card.album:hover img,
.card.album:hover .cover,
.card.playlist:hover img,
.card.playlist:hover .cover { opacity: .85; }
.card.album:focus-visible,
.card.playlist:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.card img,
.card .cover {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    background: var(--card);
}

/* Pastille « ♥ aimés/total » sur la pochette, affichée seulement quand les albums sont triés par proportion ou par nombre de titres aimés */
.card .score {
    display: none;
    position: absolute;
    top: .4rem;
    left: .4rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.card .score::before {
    content: "♥ ";
    color: var(--accent);
}

#albums[data-sort=ratio] .score,
#albums[data-sort=count] .score { display: block; }

/* Pastille ★ : album ou playlist dans mes favoris (ceux du visiteur), en bas à droite de la pochette. Simple repère : on l'ajoute ou
   le retire depuis sa fenêtre. */
.card.faved::before {
    content: "★";
    position: absolute;
    top: calc(100cqw - 2rem);
    right: .4rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    color: var(--accent);
    font-size: .9rem;
}

/* Favori qui a quitté le site : pochette estompée, pas de fenêtre, mais une recherche ailleurs et de quoi le retirer */
.card.gone { cursor: default; }
.card.gone img,
.card.gone .cover { opacity: .4; }
.card.gone:hover img,
.card.gone:hover .cover { opacity: .4; }
.gone-actions { margin: .25rem 0 0; font-size: .8rem; color: var(--muted); }

/* Vue compacte (body.compact, bouton « Compact ») : albums et playlists en lignes, petite pochette à gauche, en autant de colonnes que la
   largeur le permet, comme la liste des titres. La pastille ♥ (selon le tri) passe à droite ; la ★ de mes favoris, au coin de la pochette. */
body.compact #albums,
body.compact #playlists,
body.compact .fav-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: .1rem 2rem;
}

body.compact .card {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    grid-template-areas:
        "cover title score"
        "cover sub   score";
    column-gap: .75rem;
    align-items: center;
    padding: .3rem .5rem;
    border-radius: 6px;
    contain-intrinsic-size: auto 3.6rem;
}

body.compact .card:hover { background: var(--card); }

body.compact .card img,
body.compact .card .cover {
    grid-area: cover;
    width: 3rem;
    height: 3rem;
    border-radius: 4px;
}

body.compact .card .cover { font-size: 1.2rem; }
body.compact .card strong { grid-area: title; margin-top: 0; }
body.compact .card span { grid-area: sub; }

body.compact .card .score {
    position: static;
    grid-area: score;
    background: none;
    color: var(--muted);
}

body.compact .card.faved::before {
    top: 2.1rem;
    right: auto;
    left: 2.8rem;
    width: 1.1rem;
    height: 1.1rem;
    font-size: .65rem;
}

/* Mode mix de l'onglet Playlists : la case, à droite de la ligne */
body.compact #playlists.mixing .card::after {
    top: 50%;
    right: .5rem;
    translate: 0 -50%;
    border-color: var(--muted);
    background: transparent;
}

body.compact #playlists.mixing .card[aria-pressed="true"]::after {
    border-color: var(--accent);
    background: var(--accent);
}

body.compact #playlists.mixing .card { padding-right: 2.75rem; }

/* Favori qui a quitté le site : ses liens sous la ligne d'infos */
body.compact .card.gone { grid-template-areas: "cover title score" "cover sub score" "cover actions score"; }
body.compact .gone-actions { grid-area: actions; margin: 0; }

/* Album ou playlist sans pochette (Navidrome n'a que son image par défaut) */
.card .cover {
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 3rem;
}

.card strong,
.card span,
.track strong,
.track span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card strong { margin-top: .5rem; }
.card span { color: var(--muted); font-size: .85rem; }

/* Titres : liste à plat, du plus récemment aimé au plus ancien, en autant de colonnes que la largeur le permet.
   Les lignes sont ajoutées par script.js au fil du défilement. */
main.tracks:not([hidden]) { display: block; }

.tracklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
    column-gap: 2rem;
}

.status { margin: 0; color: var(--muted); }

.track {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    grid-template-areas:
        "title time deezer fav play"
        "sub   time deezer fav play";
    column-gap: .75rem;
    align-items: center;
    padding: .3rem .5rem;
    border-radius: 6px;
}

.track:hover { background: var(--card); }

.track strong { grid-area: title; font-weight: 400; }

.track span {
    grid-area: sub;
    color: var(--muted);
    font-size: .85rem;
}

.track time {
    grid-area: time;
    color: var(--muted);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

/* Fenêtre d'un album ou d'une playlist : liste de ses titres, ceux d'un album aimés en gras avec un cœur */
dialog {
    width: min(34rem, calc(100% - 2rem));
    max-height: min(85vh, 50rem);
    padding: 1.25rem;
    border: 1px solid var(--card);
    border-radius: 10px;
    background: var(--bg);
    color: var(--fg);
}

dialog::backdrop { background: rgb(0 0 0 / .6); }

dialog .close {
    position: absolute;
    top: .5rem;
    right: .75rem;
    font-size: 1.6rem;
}

.album-head {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 0 1.5rem 1rem 0;
}

.album-head img {
    width: 6rem;
    height: 6rem;
    flex: none;
    object-fit: cover;
    border-radius: 6px;
    background: var(--card);
}

.album-head img[hidden] { display: none; }

.album-head h2 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.album-head p { margin: .25rem 0 0; }
.album-sub { color: var(--muted); }

.listen {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 1rem;
    font-size: .85rem;
}

.listen[hidden] { display: none; }

.listen span {
    flex-basis: 100%;
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Deezer, seul lien direct vers l'album, est en .primary ; les autres ne sont que des recherches */

.album-head .btn { margin: .5rem .4rem 0 0; }

/* Carte précédente / suivante : en haut à gauche, à l'opposé du bouton de fermeture */
.dialog-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin: -.25rem 0 .5rem -.4rem;
    color: var(--muted);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.dialog-nav .icon { font-size: 1.4rem; }

/* « Un autre au hasard » est un bouton, « Album du jour » une simple étiquette d'accent : on ne les confond pas */
.dialog-nav .daily {
    margin-left: .75rem;
    color: var(--accent);
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dialog-nav .random { margin-left: .75rem; }

.album-tracks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.album-tracks li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto auto auto auto;
    grid-template-areas:
        "num title time deezer fav play"
        "num by    time deezer fav play";
    column-gap: .5rem;
    align-items: center;
    padding: .3rem .5rem;
    border-radius: 6px;
}

.album-tracks .num {
    grid-area: num;
    color: var(--muted);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.album-tracks strong { grid-area: title; font-weight: 400; }
.album-tracks .by { grid-area: by; color: var(--muted); font-size: .85rem; }

.album-tracks time {
    grid-area: time;
    color: var(--muted);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

/* ▶ d'un titre : discret, en évidence au survol de la ligne ou au clavier */
.track .play,
.album-tracks .play {
    grid-area: play;
    padding: 0 .25rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .8rem;
    text-decoration: none;
    opacity: .5;
    cursor: pointer;
}

.track:hover .play,
.album-tracks li:hover .play,
.play:hover,
.play:focus-visible { color: var(--accent); opacity: 1; }

/* Lien Deezer d'un titre : discret comme le ▶, en évidence au survol de la ligne */
.track .deezer,
.album-tracks .deezer {
    grid-area: deezer;
    color: var(--muted);
    font-size: .75rem;
    text-decoration: none;
    opacity: .5;
}

.track:hover .deezer,
.album-tracks li:hover .deezer { opacity: 1; }
.deezer:hover,
.deezer:focus-visible { color: var(--accent); opacity: 1; }

/* ▶ d'un titre qui se lit dans la page : en couleur d'accent. Le ↗ d'un titre absent du lecteur (recherche sur YouTube Music) reste
   gris et estompé. Titre en cours de lecture : ▶ et titre en accent. */
.track button.play,
.album-tracks button.play { color: var(--accent); opacity: .85; font-size: .85rem; }
.play.playing { color: var(--accent); opacity: 1; }
.track:has(.playing) strong,
.album-tracks li:has(.playing) strong { color: var(--accent); }

/* ☆ / ★ : mes favoris, ceux du visiteur (gardés dans son navigateur), à ne pas confondre avec le ♥ des coups de cœur du site.
   ☆ discrète comme le ▶, ★ toujours visible, en accent ; dans le lecteur, une .icon. */
.track .fav,
.album-tracks .fav {
    grid-area: fav;
    padding: 0 .25rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .95rem;
    opacity: .5;
    cursor: pointer;
}

.track:hover .fav,
.album-tracks li:hover .fav,
.fav:focus-visible { opacity: 1; }
.track .fav:hover,
.album-tracks .fav:hover { color: var(--accent); }
.fav[aria-pressed="true"] { color: var(--accent); opacity: 1; }
.player-controls .player-fav { margin-right: .5rem; }

.album-tracks .liked strong { font-weight: 600; }
.album-tracks .heart { margin-left: .4rem; color: var(--accent); }

.album-tracks .bonus { opacity: .55; }

.album-tracks .disc {
    display: block;
    margin-top: .75rem;
    padding-bottom: 0;
    color: var(--muted);
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.error { color: #d33; }

/* Lecteur YouTube Music : une barre fine fixée en bas de page, d'une seule ligne. Le lecteur de YouTube (200 × 200 px, le minimum
   qu'il demande) est posé à gauche et dépasse de la barre vers le haut, comme une pochette. */
#player {
    --frame: 200px;
    --bar: 3.5rem;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    gap: 1rem;
    align-items: center;
    height: var(--bar);
    padding: 0 1rem 0 calc(1.5rem + var(--frame) + 1rem);
    border-top: 1px solid var(--card);
    background: var(--bg);
}

#player[hidden] { display: none; }
/* La fin de la page reste accessible au-dessus du lecteur */
body.with-player { padding-bottom: calc(var(--bar, 3.5rem) + 200px - 2rem); }

.player-frame {
    position: absolute;
    bottom: .5rem;
    left: 1.5rem;
}

.player-frame iframe {
    display: block;
    width: var(--frame);
    height: var(--frame);
    border: 0;
    border-radius: 8px;
    background: #000;
    box-shadow: 0 6px 24px rgb(0 0 0 / .35), 0 0 0 1px var(--card);
}

.player-info { flex: 1; min-width: 0; line-height: 1.25; }

.player-info strong,
.player-info span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-info span { color: var(--muted); font-size: .85rem; }
.player-status { margin: 0; color: var(--muted); font-size: .8rem; }
.player-status:empty { display: none; }

.player-controls {
    display: flex;
    flex: none;
    gap: .25rem;
    align-items: center;
    color: var(--muted);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.player-controls .icon { font-size: 1.1rem; }
.player-controls .player-close { margin-left: .5rem; font-size: 1.4rem; }
.player-controls .link { margin-left: .5rem; }

/* Écran étroit : lecteur plus petit, barre sur deux lignes (titre, puis boutons), sans le lien YouTube Music (le lecteur y mène aussi) */
@media (max-width: 40rem) {
    /* Onglet Mes favoris réduit à sa ★ pour que les quatre onglets tiennent sur une ligne (le libellé reste lu par les lecteurs d'écran) */
    .tab-long {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    #player {
        --frame: 128px;
        --bar: 4.25rem;
        flex-wrap: wrap;
        align-content: center;
        gap: .1rem .5rem;
        padding: 0 .5rem 0 calc(1rem + var(--frame) + .75rem);
    }
    body.with-player { padding-bottom: calc(4.25rem + 128px - 1.5rem); }
    .player-frame { left: 1rem; }
    .player-info { flex-basis: 100%; }
    .player-controls { width: 100%; margin-left: -.4rem; }
    .player-controls .player-open { display: none; }
    .player-controls .player-close { margin-left: auto; }
}

/* Écran tactile, sans survol (téléphone, tablette, liseuse) : le ▶, le lien Deezer et la ☆ d'un titre, discrets d'ordinaire jusqu'au
   survol de la ligne, sont toujours visibles, avec des cibles assez grandes pour le doigt. Pas de fond ni d'estompage au survol : ils
   resteraient affichés après un appui. */
@media (hover: none) {
    .track .play,
    .album-tracks .play,
    .track .deezer,
    .album-tracks .deezer,
    .track .fav,
    .album-tracks .fav {
        display: grid;
        place-items: center;
        min-width: 2.25rem;
        min-height: 2.25rem;
        border-radius: 50%;
        opacity: 1;
    }

    .track,
    .album-tracks li { column-gap: .25rem; padding-right: 0; }

    .track:hover,
    body.compact .card:hover { background: none; }
    .card:not(.gone):hover img,
    .card:not(.gone):hover .cover { opacity: 1; }
}

/* Thème e-ink (html.eink : bouton ◐ devant le titre, ou ?eink=1 dans l'adresse), pour un écran à encre électronique en niveaux de
   gris et sans survol, comme le Mudita Kompakt (4,3″, 800 × 480). Noir et blanc francs, sans gris intermédiaire ni transparence (rendus
   en trame) ; les états passent par l'inversion noir/blanc, le gras ou le soulignement plutôt que par la couleur d'accent. Les
   commandes tactiles viennent de la règle (hover: none) ci-dessus. Le thème sombre du système reste suivi, en blanc sur noir. */
html.eink {
    color-scheme: light;
    --bg: #fff;
    --fg: #000;
    --muted: #333;
    --card: #ddd;
    --accent: #000;
}

@media (prefers-color-scheme: dark) {
    html.eink {
        color-scheme: dark;
        --bg: #000;
        --fg: #fff;
        --muted: #ccc;
        --card: #333;
        --accent: #fff;
    }
}

.eink body { padding: .75rem; font-size: 16px; }
.eink header { gap: .75rem; margin-bottom: 1rem; }

/* Deux pochettes de front sur un écran de téléphone, plutôt qu'une seule */
.eink main { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem .75rem; }

/* Commandes : contour noir sur fond blanc, inversées quand elles sont actives ou principales */
.eink input,
.eink select,
.eink .btn { border-color: var(--fg); background: var(--bg); }
.eink .btn[aria-pressed="true"],
.eink .btn.primary { background: var(--fg); color: var(--bg); }
.eink .btn:disabled { opacity: 1; border-style: dashed; color: var(--muted); }
.eink .btn:disabled:hover { border-color: var(--fg); }
.eink .btn.primary:disabled { background: var(--bg); color: var(--muted); }
.eink .btn.primary:hover:not(:disabled),
.eink .btn.primary:focus-visible { filter: none; }
.eink .link { text-decoration-color: currentColor; }
.eink .icon { color: var(--fg); }
.eink .icon:disabled { opacity: 1; color: var(--card); }

.eink nav { gap: .25rem; }
.eink nav button { border: 1px solid transparent; color: var(--fg); }
.eink nav button[aria-selected="true"] { border-color: var(--fg); background: var(--fg); color: var(--bg); }

/* Pastilles sur les pochettes : fond plein et contour */
.eink .card .score,
.eink .card.faved::before { border: 1px solid var(--fg); background: var(--bg); }
.eink body.compact .card .score { border: 0; }

.eink #playlists.mixing .card::after { border-color: var(--fg); background: var(--bg); }
.eink #playlists.mixing .card[aria-pressed="true"]::after { background: var(--fg); color: var(--bg); }

/* ▶, Deezer et ☆ d'un titre : en noir franc, sans estompage (un gris s'affiche tramé) */
.eink .track .play,
.eink .album-tracks .play,
.eink .track .deezer,
.eink .album-tracks .deezer,
.eink .track .fav,
.eink .album-tracks .fav {
    color: var(--fg);
    font-size: 1rem;
    opacity: 1;
}

.eink .track .deezer,
.eink .album-tracks .deezer { font-size: .85rem; }
.eink .track a.play,
.eink .album-tracks a.play { color: var(--muted); }

/* Titre en cours de lecture : ▶ inversé, titre en gras souligné */
.eink .play.playing { background: var(--fg); color: var(--bg); }
.eink .track:has(.playing) strong,
.eink .album-tracks li:has(.playing) strong { font-weight: 700; text-decoration: underline; }
.eink .album-tracks .liked strong { font-weight: 700; }
.eink .album-tracks .bonus { opacity: 1; font-style: italic; }

/* Fenêtre d'un album : presque plein écran, sur fond uni plutôt qu'un voile tramé */
.eink dialog {
    width: calc(100% - 1rem);
    max-height: calc(100% - 1rem);
    padding: 1rem;
    border: 2px solid var(--fg);
}

.eink dialog::backdrop { background: var(--bg); }

.eink .error { color: var(--fg); font-weight: 700; }

.eink #player { border-top: 2px solid var(--fg); }
.eink .player-frame iframe { box-shadow: none; outline: 1px solid var(--fg); }