:root {
  --bg-base: #0A0A0A;
  --bg-sidebar: #000000;
  --bg-elevated: #181818;
  --bg-elevated-hover: #232323;
  --bg-elevated-highlight: #2A2A2A;
  --green: #1DB954;
  --green-bright: #1ED760;
  --text: #FFFFFF;
  --text-subdued: #A7A7A7;
  --text-faint: #6A6A6A;
  --border: rgba(255, 255, 255, 0.07);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.3, 0, 0.4, 1);
  --font-display: 'Manrope', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* Voorkomt dat je per ongeluk naar links/rechts kunt scrollen — bv. door
     de mobiele zijbalk die off-canvas staat via transform: translateX(),
     wat in sommige Android-webviews (o.a. Samsung Internet) toch meetelt
     voor de scrollbreedte van de pagina. */
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

button { font-family: inherit; }

/* Dunne, donkere scrollbars */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  border: 3px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

.app {
  display: grid;
  /* Voorheen 260px 1fr (zijbalk permanent naast de inhoud) alléén op
     brede schermen, en 1fr (zijbalk als uitschuifpaneel) alleen op
     smalle schermen. Nu overal hetzelfde: de zijbalk (.crate) is altijd
     een overlay die je met het hamburgermenu opent, dus de inhoud
     (.deck/.amp-bar) krijgt altijd de volle breedte. */
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  /* Op sommige toestellen (o.a. Android met dynamic island/gesture-balk)
     is 100vh net iets meer dan de écht zichtbare hoogte, waardoor de
     onderkant van de app onder de systeembalk uit "duwt" en je daar de
     kale (witte) achtergrond van de native shell ziet. 100dvh volgt de
     werkelijk zichtbare viewport; browsers die het niet kennen (oude
     WebViews) vallen gewoon terug op de 100vh hierboven. */
  height: 100dvh;
  gap: 8px;
  /* Combineert de normale 8px marge met de safe-area-inset (het gebied
     achter de statusbalk/notch bovenin en de navigatiebalk onderin), zodat
     de eigen (donkere) achtergrond van de app die randen zelf opvult i.p.v.
     dat daar de witte achtergrond van de Android-shell doorschemert. */
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

/* ==================== SIDEBAR ==================== */
/* Altijd een uitschuifpaneel (overlay) dat je met het hamburgermenu opent
   en sluit — voorheen alleen op smalle schermen, nu ook op grote. */
.crate {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 0;
  bottom: max(8px, env(safe-area-inset-bottom));
  width: min(80vw, 320px);
  z-index: 40;
  background: var(--bg-sidebar);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 20px 0 12px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.25s var(--ease);
  box-shadow: var(--shadow-lg);
}
.crate.open { transform: translateX(0); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 24px 24px;
  margin-bottom: 8px;
}

.brand-index {
    text-decoration: none;
    color: inherit;
}

/* Zorg dat de link ook bij interactie niet verandert */
.brand-index:hover, 
.brand-index:focus, 
.brand-index:active, 
.brand-index:visited {
    text-decoration: none;
    color: inherit;
}

.brand-mark {
  color: var(--green);
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(29, 185, 84, 0.5));
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.3px;
}

.artist-list { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }

.search-wrap { padding: 0 8px 16px; }
#zoekbalk {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 13px;
  padding: 9px 14px;
  outline: none;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
#zoekbalk::placeholder { color: var(--text-faint); }
#zoekbalk:focus { background: var(--bg-elevated-hover); border-color: rgba(255,255,255,0.2); }

.artist-item {
  background: none;
  border: none;
  color: var(--text-subdued);
  text-align: left;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.2s var(--ease), background 0.2s var(--ease), transform 0.15s var(--ease);
}

.artist-item:hover { color: var(--text); background: var(--bg-elevated); }
.artist-item:active { transform: scale(0.98); }

.artist-item.active {
  color: var(--text);
  background: var(--bg-elevated-highlight);
}

/* Playlist-knoppen in de sidebar tonen (indien aanwezig) een kleine
   hoes vóór de naam, i.p.v. alleen platte tekst. */
.playlist-item-met-cover {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.playlist-item-cover {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg-elevated);
}

.playlist-item-cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}

.playlist-item-naam {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==================== MAIN DECK ==================== */
.deck {
  grid-row: 2 / 3;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(29,185,84,0.25) 0%, var(--bg-base) 340px, var(--bg-base) 100%);
  padding: 32px 32px 24px;
}

.deck-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
}

.deck-header h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  letter-spacing: -1px;
  margin: 0;
}

.deck-count {
  color: var(--text-subdued);
  font-size: 13px;
  font-weight: 600;
}

.tracklist {
  width: 100%;
  border-collapse: collapse;
  /* Zonder dit baseert de browser de breedte van de titel-kolom op de
     langste (ongebroken) titel in de lijst, waardoor de hele tabel — en
     dus de pagina — breder kan worden dan het scherm. Met table-layout:
     fixed bepalen alléén de kolommen met een expliciete breedte (col-nr,
     col-duur, col-dl) hun eigen breedte; de titel-kolom (col-titel, geen
     breedte opgegeven) krijgt automatisch de rest van de ruimte, en lange
     titels worden afgekapt door .track-titel hieronder i.p.v. de tabel op
     te rekken. */
  table-layout: fixed;
}

.tracklist thead th {
  text-align: left;
  color: var(--text-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--border);
}

/* ==================== ALBUM GRID ==================== */
/* Genre-kopje boven elke groep albums op de homepage (renderGrid() in
   app.js). Eerste kopje krijgt geen extra ruimte boven zich, de rest wel
   — zodat de groepen duidelijk gescheiden blijven zonder een dubbele
   marge tussen kopje en de vorige album-grid eronder. */
.genre-kop {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.3px;
  margin: 32px 0 16px;
}
.genre-kop:first-of-type {
  margin-top: 0;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 22px;
  margin-bottom: 8px;
}

.album-card {
  cursor: pointer;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  transition: background 0.2s var(--ease), transform 0.15s var(--ease);
}
.album-card:hover { background: var(--bg-elevated-hover); }
.album-card:active { transform: scale(0.98); }

.album-card-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.album-card-art img { width: 100%; height: 100%; object-fit: cover; }

.album-card-letter {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 46px;
  color: rgba(255, 255, 255, 0.85);
}

.album-card-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), background 0.15s var(--ease);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.album-card:hover .album-card-play { opacity: 1; transform: translateY(0); }
.album-card-play:hover { background: var(--green-bright); transform: scale(1.07); }

/* ==================== OFFLINE DOWNLOAD-KNOPPEN ==================== */
.dl-btn {
  background: none;
  border: none;
  color: var(--text-subdued);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
  flex-shrink: 0;
}
.dl-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.dl-btn svg { width: 16px; height: 16px; }
.dl-btn.downloaded { color: var(--green-bright); }
.dl-btn.downloading { color: var(--text-subdued); pointer-events: none; }
.dl-btn.downloading svg { animation: dl-spin 0.9s linear infinite; }
@keyframes dl-spin { to { transform: rotate(360deg); } }

.col-dl { width: 40px; text-align: center; }

.album-card-dl {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
  cursor: pointer;
}
.album-card:hover .album-card-dl { opacity: 1; transform: translateY(0); }
.album-card-dl:hover { background: rgba(0, 0, 0, 0.8); }
.album-card-dl.downloaded { color: var(--green-bright); opacity: 1; transform: translateY(0); }
.album-card-dl.downloading svg { animation: dl-spin 0.9s linear infinite; }
.album-card-dl svg { width: 15px; height: 15px; }

.album-detail-dlbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: none;
  border-radius: 20px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 10px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.album-detail-dlbtn:hover { background: rgba(255, 255, 255, 0.16); }
.album-detail-dlbtn.downloaded { color: var(--green-bright); }
.album-detail-dlbtn.downloading svg { animation: dl-spin 0.9s linear infinite; }
.album-detail-dlbtn svg { width: 14px; height: 14px; }

.offline-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #000;
  background: var(--green-bright);
  padding: 4px 10px;
  border-radius: 20px;
  margin-left: 10px;
}

/* ==================== ACCOUNT-BALK (SIDEBAR) ==================== */
.account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin: 0 0 8px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.account-naam {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.account-naam-klikbaar {
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.15s var(--ease);
}
.account-naam-klikbaar:hover { color: var(--green-bright); }

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-subdued);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  cursor: default;
  transition: background 0.3s var(--ease);
}
.streak-badge svg { display: block; transition: fill 0.3s var(--ease); }
.streak-badge-getal { line-height: 1; }
.streak-badge-veilig {
  background: rgba(255, 122, 24, 0.18);
  color: #FF9D4D;
}
.account-uitloggen {
  color: var(--text-subdued);
  text-decoration: none;
  flex-shrink: 0;
  margin-left: 10px;
}
.account-uitloggen:hover { color: var(--text); text-decoration: underline; }

/* ==================== APPARATEN-OVERZICHT (DOWNLOADS-WEERGAVE) ==================== */
.apparaten-overzicht {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 22px;
}
.apparaat-item {
  /* als dit nog niet zo was: zorgt dat de knop rechts uitlijnt */
  display: flex;
  align-items: center;
  gap: 12px;
}
.sync-status {
  font-size: 13px;
  color: var(--text-subdued, #b3b3b3);
  min-height: 18px;
  margin: 4px 0 12px;
}
.apparaat-item.dit-apparaat { color: var(--text); border: 1px solid rgba(30, 215, 96, 0.35); }
.apparaat-tag {
  font-size: 11px;
  font-weight: 700;
  color: #000;
  background: var(--green-bright);
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 6px;
}
.apparaat-aantal { color: var(--text-subdued); font-variant-numeric: tabular-nums; }

/* ==================== INLOG-PAGINA ==================== */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  padding: 20px;
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-lg);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  color: var(--green-bright);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
}
.auth-titel {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 20px;
  color: var(--text);
}
.auth-fout {
  background: rgba(196, 69, 58, 0.15);
  color: #ff8b81;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 18px;
}
.auth-form { display: flex; flex-direction: column; }
.auth-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-subdued);
  margin: 14px 0 6px;
}
.auth-label:first-of-type { margin-top: 0; }
.auth-input {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body);
}
.auth-input:focus { outline: none; border-color: var(--green-bright); }
.auth-submit {
  margin-top: 24px;
  background: var(--green-bright);
  color: #000;
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease);
}
.auth-submit:hover { background: var(--green); transform: scale(1.01); }

.album-card-titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-card-sub {
  color: var(--text-subdued);
  font-size: 12px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================== ALBUM DETAILWEERGAVE ==================== */
.back-btn {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.75;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.back-btn:hover { opacity: 1; transform: translateX(-2px); }

.album-detail-header {
  display: flex;
  gap: 28px;
  align-items: flex-end;
  margin-bottom: 36px;
}

.album-detail-info {
  /* Zelfde reden als bij .deck hierboven: zonder min-width: 0 mag deze
     flex-item niet krimpen onder de breedte van zijn ongebroken inhoud
     (bv. een lange albumtitel of artiestnaam), wat de hele header — en
     dus de pagina — breder kon duwen dan het scherm. */
  min-width: 0;
}

.album-detail-cover {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.album-detail-info .eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-subdued);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.album-detail-info h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -1px;
  margin: 8px 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-detail-meta {
  color: var(--text-subdued);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.album-detail-playbtn {
  background: var(--green);
  color: #000;
  border: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  margin-top: 20px;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}
.album-detail-playbtn:hover { background: var(--green-bright); transform: scale(1.06); }
.album-detail-playbtn:active { transform: scale(0.96); }

.col-nr { width: 44px; text-align: center; }
.col-duur { width: 60px; text-align: right; }
.col-album { color: var(--text-subdued); }

.track-row {
  cursor: pointer;
  transition: background 0.15s var(--ease);
  border-radius: var(--radius-sm);
}
.track-row:hover { background: var(--bg-elevated); }
.track-row.playing .track-titel { color: var(--green-bright); }
.track-row.playing .col-nr { color: var(--green-bright); }

.track-row td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: middle;
}
.track-row:last-child td { border-bottom: none; }

/* Albumgroep-header binnen de tracklist */
.album-header td {
  padding: 28px 12px 10px;
  border-bottom: none;
}
.album-header:first-child td { padding-top: 8px; }

.album-play-btn {
  background: var(--green);
  color: #000;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 12px;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}
.album-play-btn:hover { background: var(--green-bright); transform: scale(1.08); }
.album-play-btn:active { transform: scale(0.94); }

.album-header-titel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  vertical-align: middle;
}
.album-header-artiest {
  color: var(--text-subdued);
  font-size: 13px;
  margin-left: 10px;
  vertical-align: middle;
}

.track-titel {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  transition: color 0.15s var(--ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-artiest { color: var(--text-subdued); font-size: 12.5px; margin-top: 2px; }
.col-duur { text-align: right; color: var(--text-subdued); font-variant-numeric: tabular-nums; }

/* Track-nummer <-> play-icoon wissel bij hover (signature Spotify-detail) */
.col-nr { position: relative; color: var(--text-subdued); font-variant-numeric: tabular-nums; }
.track-num { display: inline-block; }
.track-play-icon { display: none; color: var(--text); }
.track-row:hover .track-num { display: none; }
.track-row:hover .track-play-icon { display: inline-block; }

/* Animerende equalizer-balkjes voor het nummer dat nu speelt */
.eq-bars { display: none; align-items: flex-end; gap: 2px; height: 14px; margin: 0 auto; width: 14px; }
.track-row.playing .track-num,
.track-row.playing .track-play-icon { display: none; }
.track-row.playing .eq-bars { display: flex; }
.track-row:hover.playing .track-num,
.track-row:hover.playing .track-play-icon { display: none; }
.track-row:hover.playing .eq-bars { display: flex; }

.eq-bars span {
  width: 3px;
  background: var(--green-bright);
  border-radius: 1px;
  animation: eq 0.9s ease-in-out infinite;
}
.eq-bars span:nth-child(1) { animation-delay: -0.6s; }
.eq-bars span:nth-child(2) { animation-delay: -0.3s; }
.eq-bars span:nth-child(3) { animation-delay: 0s; }

@keyframes eq {
  0%, 100% { height: 3px; }
  50% { height: 14px; }
}

/* ==================== PLAYER BAR ==================== */
.amp-bar {
  grid-row: 3 / 4;
  grid-column: 1 / -1;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 240px 1fr 220px;
  align-items: center;
  gap: 24px;
  padding: 12px 20px;
}

.now-playing { min-width: 0; }
.np-titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-artiest { color: var(--text-subdued); font-size: 12px; margin-top: 3px; }

.transport { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.transport-buttons { display: flex; align-items: center; gap: 20px; }

.transport-btn {
  background: none;
  border: none;
  color: var(--text-subdued);
  font-size: 17px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.15s var(--ease), transform 0.15s var(--ease);
}
.transport-btn:hover { color: var(--text); transform: scale(1.08); }
.transport-btn:active { transform: scale(0.94); }
.transport-btn.actief { color: var(--green-bright); }
.transport-btn.actief:hover { color: var(--green-bright); }
/* Volledig-random shuffle krijgt bewust een andere kleur dan slimme
   shuffle (die de gewone groene "actief"-kleur houdt), zodat je in één
   oogopslag ziet welke van de twee standen actief is — los van het
   icoonverschil (vinkje) dat app.js toevoegt. Zelfde warme kleur als de
   streak-vlam elders in de app, dus geen nieuw kleuraccent nodig. */
.transport-btn.shuffle-random.actief { color: #FF7A18; }
.transport-btn.shuffle-random.actief:hover { color: #FF7A18; }
.transport-btn svg { display: block; }

.transport-btn-main {
  background: var(--text);
  color: #000;
  width: 34px;
  height: 34px;
}
.transport-btn-main:hover { background: var(--text); transform: scale(1.08); color: #000; }

.seek-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 560px;
}

.time-label { font-size: 11px; color: var(--text-faint); width: 36px; text-align: center; font-variant-numeric: tabular-nums; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-pill);
  flex: 1;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
input[type="range"]:hover { background: rgba(255,255,255,0.3); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text);
  margin-top: -4px;
  box-shadow: 0 0 0 0 rgba(255,255,255,0);
  transition: box-shadow 0.15s var(--ease);
}
#seek::-webkit-slider-thumb { background: var(--green-bright); }
input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text);
  border: none;
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); }

.vu-section { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }

.loudness-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--text-subdued, #a7a7a7);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.loudness-toggle:hover { color: var(--text); border-color: var(--text-subdued, #a7a7a7); }
.loudness-toggle.actief {
  color: var(--green-bright, #1ED760);
  border-color: var(--green-bright, #1ED760);
  background: rgba(30, 215, 96, 0.1);
}
.loudness-toggle svg { width: 14px; height: 14px; }

.volume-bar { width: 90px; }

/* ==================== TOASTS (eigen meldingen) ==================== */
.toast-container {
  position: fixed;
  bottom: 116px; /* boven de amp-bar */
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  max-width: min(360px, calc(100vw - 32px));
}

.toast {
  background: var(--bg-elevated-highlight);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-subdued);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.toast.zichtbaar { opacity: 1; transform: translateY(0); }

.toast-fout { border-left-color: #F15E6C; }
.toast-succes { border-left-color: var(--green-bright); }
.toast-info { border-left-color: var(--text-subdued); }

@media (max-width: 760px) {
  .toast-container { right: 8px; left: 8px; max-width: none; bottom: 150px; }
}

/* ==================== MODAL (eigen confirm/prompt) ==================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 210;
  padding: 16px;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: var(--bg-elevated-highlight);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  width: 100%;
  max-width: 340px;
}

.modal-tekst {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 12px;
}

.modal-input {
  display: none;
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.modal-input:focus { outline: 1px solid var(--green-bright); }

.modal-knoppen { display: flex; justify-content: flex-end; gap: 8px; }

.modal-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-subdued);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.modal-btn:hover { background: var(--bg-elevated-hover); color: var(--text); }

.modal-btn-primary { background: var(--green-bright); border-color: var(--green-bright); color: #05210F; }
.modal-btn-primary:hover { background: var(--green); color: #05210F; }
.modal-btn-primary.gevaar { background: #F15E6C; border-color: #F15E6C; color: #2A0709; }
.modal-btn-primary.gevaar:hover { background: #d94854; }

/* ==================== WRAPPED (PERSOONLIJKE LUISTERSTATS) ==================== */
.wrapped-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 220;
  padding: 16px;
}
.wrapped-overlay.open { display: flex; }

.wrapped-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: min(680px, 90vh);
  overflow-y: auto;
  background: linear-gradient(160deg, #14532F 0%, #0D1B33 55%, #0A0A0A 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px 20px 20px;
}

.wrapped-sluiten {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: var(--text);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.wrapped-sluiten:hover { background: rgba(0, 0, 0, 0.5); }

.wrapped-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  padding-right: 34px;
}
.wrapped-tab {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--text-subdued);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.wrapped-tab:hover { color: var(--text); }
.wrapped-tab.actief { background: var(--green-bright); color: #05210F; }

.wrapped-laden, .wrapped-leeg {
  color: var(--text-subdued);
  font-size: 13.5px;
  text-align: center;
  padding: 40px 10px;
  line-height: 1.5;
}

.wrapped-hero {
  text-align: center;
  padding: 10px 6px 24px;
}
.wrapped-hero-label {
  color: var(--text-subdued);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-bottom: 6px;
}
.wrapped-hero-getal {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  color: var(--text);
  line-height: 1.1;
}
.wrapped-hero-sub {
  color: var(--text-subdued);
  font-size: 12.5px;
  margin-top: 8px;
}

.wrapped-sectie { margin-top: 22px; }
.wrapped-sectie-titel {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 10px;
}

.wrapped-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.wrapped-rang {
  width: 20px;
  flex-shrink: 0;
  text-align: center;
  color: var(--text-faint);
  font-weight: 800;
  font-size: 13px;
}
.wrapped-cover {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.wrapped-rij-tekst { min-width: 0; }
.wrapped-rij-titel {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wrapped-rij-sub {
  color: var(--text-subdued);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrapped-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wrapped-chip {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
}
.wrapped-chip-groot {
  display: inline-block;
  font-size: 13.5px;
  padding: 10px 16px;
}

/* ==================== PLAYLISTS (SIDEBAR) ==================== */
.playlist-sectie { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }

.playlist-sectie-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 6px;
  color: var(--text-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.playlist-nieuw-btn {
  background: none;
  border: none;
  color: var(--text-subdued);
  font-size: 16px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.playlist-nieuw-btn:hover { background: var(--bg-elevated); color: var(--text); }

.playlist-leeg-hint {
  color: var(--text-faint);
  font-size: 12px;
  padding: 4px 8px 8px;
}

/* Inline naam-invoer, verschijnt zowel bij "nieuwe playlist" in de sidebar
   als bovenaan de popover. */
.playlist-naam-form {
  display: flex;
  gap: 6px;
  padding: 2px 8px 8px;
}
.playlist-naam-input {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  padding: 6px 8px;
}
.playlist-naam-input:focus { outline: 1px solid var(--green-bright); }

/* ---- Knopje "toevoegen aan playlist" op elke tracklist-rij / albumkaart ---- */
.playlist-add-btn {
  background: none;
  border: none;
  color: var(--text-subdued);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.playlist-add-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.playlist-add-btn svg { width: 16px; height: 16px; }

/* ---- Popover: klik op het +-knopje opent dit lijstje playlists ---- */
.playlist-popover {
  position: fixed;
  width: 240px;
  background: var(--bg-elevated-highlight);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 60;
}
.playlist-popover.open { display: flex; }

.playlist-popover-titel {
  color: var(--text-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  padding: 4px 8px 8px;
}

.playlist-popover-lijst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}

.playlist-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--text-subdued);
  text-align: left;
  padding: 9px 8px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.playlist-popover-item:hover { background: var(--bg-elevated-hover); color: var(--text); }
.playlist-popover-item.bevat::after { content: '\2713'; margin-left: auto; color: var(--green-bright); }

.playlist-popover-nieuw {
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding: 10px 8px 2px;
  color: var(--green-bright);
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.playlist-popover-nieuw:hover { color: var(--text); }

.playlist-popover-leeg {
  color: var(--text-faint);
  font-size: 12px;
  padding: 8px;
}

/* ---- Playlist-detailweergave: kop met acties, verwijder-knop per rij ---- */
.playlist-detail-acties {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 4px 0 32px;
}

/* Hoofdactie: dezelfde ronde groene knop als bij een album, zodat "afspelen"
   in één oogopslag de belangrijkste actie is. */
.playlist-play-btn {
  background: var(--green);
  color: #000;
  border: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}
.playlist-play-btn:hover { background: var(--green-bright); transform: scale(1.06); }
.playlist-play-btn:active { transform: scale(0.96); }
.playlist-play-btn svg { width: 22px; height: 22px; margin-left: 3px; } /* driehoek oogt gecentreerder iets naar rechts */

/* Bijkomende acties: klein, terughoudend, alleen een icoon — precies zoals
   Spotify "hernoemen"/"verwijderen" ook niet als evenwaardige knoppen naast
   play zet. Kleur springt pas naar voren bij hover. */
.playlist-icoon-btn {
  background: none;
  border: none;
  color: var(--text-subdued);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.playlist-icoon-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.playlist-icoon-btn.gevaar:hover { color: #F15E6C; }
.playlist-icoon-btn svg { width: 19px; height: 19px; }

.playlist-verwijder-btn {
  background: none;
  border: none;
  color: var(--text-subdued);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.playlist-verwijder-btn:hover { color: #F15E6C; background: rgba(255, 255, 255, 0.08); }
.playlist-verwijder-btn svg { width: 16px; height: 16px; }

/* ==================== APPARAATMENU (SONOS) ==================== */
.apparaat-wrap { position: relative; }

.apparaat-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 240px;
  background: var(--bg-elevated-highlight);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 30;
}
.apparaat-menu.open { display: flex; }

.apparaat-menu-titel {
  color: var(--text-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  padding: 4px 8px 8px;
}

.apparaat-lijst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}

.apparaat-optie {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--text-subdued);
  text-align: left;
  padding: 9px 8px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.apparaat-optie:hover { background: var(--bg-elevated-hover); color: var(--text); }
.apparaat-optie.actief { color: var(--green-bright); }
.apparaat-optie.actief::after { content: '\2713'; margin-left: auto; }
.apparaat-icoon { width: 16px; text-align: center; flex-shrink: 0; }

.apparaat-laden, .apparaat-leeg {
  color: var(--text-faint);
  font-size: 12px;
  padding: 8px;
}

#btn-apparaat.actief { color: var(--green-bright); }

@media (max-width: 760px) {
  .apparaat-menu { right: -8px; }
}

/* ==================== WACHTRIJ-PANEEL ==================== */
.queue-panel {
  position: fixed;
  top: 8px;
  right: 8px;
  bottom: 92px;
  width: 340px;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(calc(100% + 16px));
  opacity: 0;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
  z-index: 20;
  overflow: hidden;
}
.queue-panel.open {
  transform: translateX(0);
  opacity: 1;
}

.queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.queue-header h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  margin: 0;
}
.queue-close {
  background: none;
  border: none;
  color: var(--text-subdued);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.queue-close:hover { color: var(--text); background: var(--bg-elevated-hover); }

.queue-list { overflow-y: auto; padding: 8px 8px 16px; flex: 1; }

.queue-leeg {
  color: var(--text-faint);
  font-size: 13px;
  padding: 24px 12px;
  text-align: center;
}

.queue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.queue-item:hover { background: var(--bg-elevated-hover); }
.queue-item.playing .queue-item-titel { color: var(--green-bright); }

.queue-item-status {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.queue-item-status .eq-bars { display: flex; margin: 0 auto; }

.queue-item-info { min-width: 0; flex: 1; }
.queue-item-titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-item-artiest {
  color: var(--text-subdued);
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-item-duur {
  color: var(--text-subdued);
  font-size: 12px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .queue-panel { width: calc(100% - 16px); bottom: 140px; }
}

/* ==================== FOCUS STATES ==================== */
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 2px;
}

/* ==================== TOPBAR & UITSCHUIFMENU (altijd, ook op grote schermen) ==================== */
.mobile-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  grid-row: 1 / 2;
  padding: 4px 4px 0;
}
.mobile-menu-btn {
  background: var(--bg-elevated);
  border: none;
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mobile-topbar-titel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
}

.crate-sluiten {
  display: block;
  position: absolute;
  top: 16px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-subdued);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.crate-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
  z-index: 35;
}
.crate-backdrop.open { opacity: 1; pointer-events: auto; }

@media (max-width: 760px) {
  .amp-bar { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 10px; }
  .vu-section { justify-content: center; }
  .deck-header h1 { font-size: 30px; }

  /* Titel + telling (bv. "Downloads" + "12 nummers · 84,3 MB op dit
     apparaat") onder elkaar i.p.v. naast elkaar: op een smal scherm
     paste dat niet naast elkaar en kwamen ze knel/in elkaar te staan. */
  .deck-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 20px;
  }
  .deck-count {
    font-size: 12px;
  }

  /* Minder padding rondom, zodat de tracklist meer breedte overhoudt. */
  .deck { padding: 20px 14px 20px; }

  /* De vaste kolommen (tracknummer, tijd, download-/playlistknopje) zo
     smal mogelijk, zodat de titel-kolom zoveel mogelijk ruimte krijgt. */
  .col-nr { width: 26px; padding-left: 0; padding-right: 0; }
  .col-duur { width: 40px; }
  .col-dl { width: 32px; }
  .track-row td { padding: 8px 4px; }
  .track-row td.col-titel { padding-left: 8px; }

  /* Volledige titel tonen i.p.v. afkappen met "…": op mobiel is er geen
     ruimte om altijd op één regel te passen, dus laten we 'm gewoon
     doorlopen naar een tweede (of derde) regel. */
  .track-titel {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
  }

  /* Album-/playlist-kop: cover náást tekst past niet lekker op een smal
     scherm (de titel werd dan afgekapt of alles kwam heel gedrongen te
     staan). Op mobiel daarom cover bovenaan, gecentreerd, met de titel
     en knoppen eronder — en de titel mag gewoon doorlopen i.p.v. worden
     afgekapt. */
  .album-detail-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    margin-bottom: 24px;
  }
  .album-detail-cover {
    width: 150px;
    height: 150px;
  }
  .album-detail-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .album-detail-info h1 {
    font-size: 24px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .album-detail-meta {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ---- Cover-veld in de modal (playlist bewerken) ---- */
.modal-cover-veld {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 20px;
}

.modal-cover-preview-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a1a;
}

.modal-cover-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #333, #111);
  color: rgba(255, 255, 255, 0.45);
}

.modal-cover-kiesknop {
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.modal-cover-kiesknop:hover {
  background: rgba(255, 255, 255, 0.14);
}

.modal-cover-input {
  /* Het lelijke, niet-stijlbare browser-bestandsveld zelf blijft
     onzichtbaar; het label hierboven (.modal-cover-kiesknop) fungeert
     als de eigenlijke, mooie knop. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}