/* ===== Music Pro (Spotify × YT Music mix — gold/black theme) ===== */
.mp-wrap{max-width:80rem;margin:0 auto}
.mp-hero{display:flex;gap:1.5rem;align-items:flex-end;background:linear-gradient(180deg,rgba(212,175,55,.16),rgba(0,0,0,0) 100%);border-radius:1.25rem;padding:1.75rem;margin-bottom:2rem;border:1px solid rgba(212,175,55,.18)}
.mp-hero-art{width:11rem;height:11rem;border-radius:.9rem;overflow:hidden;flex:none;box-shadow:0 18px 45px -12px rgba(0,0,0,.85);position:relative;background:linear-gradient(135deg,#1a1a1f,#0b0b0e)}
.mp-hero-art img{width:100%;height:100%;object-fit:cover;display:block}
.mp-hero-art .mp-hero-glow{position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 0%,rgba(252,209,22,.22),transparent 60%);mix-blend-mode:screen}
.mp-hero-meta{min-width:0;flex:1}
.mp-hero-eyebrow{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:#D4AF37;font-weight:700;margin-bottom:.4rem;display:flex;align-items:center;gap:.5rem}
.mp-hero-title{font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:900;color:#fff;line-height:1.08;margin:0 0 .35rem}
.mp-hero-sub{color:#9ca3af;font-size:.85rem;margin:0}
.mp-hero-actions{margin-top:1.1rem;display:flex;gap:.75rem;align-items:center}
.mp-btn-play{display:inline-flex;align-items:center;gap:.55rem;background:#D4AF37;color:#0b0b0e;font-weight:800;border:none;border-radius:999px;padding:.7rem 1.5rem;font-size:.9rem;cursor:pointer;transition:transform .18s var(--ease-smooth),box-shadow .18s;box-shadow:0 8px 24px -6px rgba(212,175,55,.55)}
.mp-btn-play:hover{transform:scale(1.04);box-shadow:0 12px 30px -6px rgba(212,175,55,.7)}
.mp-btn-ghost{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:#e5e7eb;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.65rem 1.25rem;font-size:.85rem;cursor:pointer;transition:border-color .2s,color .2s}
.mp-btn-ghost:hover{border-color:#D4AF37;color:#FCD116}
.mp-section-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 1rem}
.mp-section-title h3{font-size:1.15rem;font-weight:800;color:#fff;margin:0;letter-spacing:.01em}
.mp-section-title .mp-see-all{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#9ca3af;cursor:pointer;background:none;border:none}
.mp-section-title .mp-see-all:hover{color:#FCD116}
/* Collection tiles (Spotify card) */
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:1rem}
.mp-card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:.9rem;padding:.9rem;cursor:pointer;transition:background .25s var(--ease-smooth),transform .25s var(--ease-smooth);position:relative;overflow:hidden}
.mp-card:hover{background:rgba(255,255,255,.08);transform:translateY(-3px)}
.mp-card-art{position:relative;width:100%;aspect-ratio:1;border-radius:.55rem;overflow:hidden;margin-bottom:.8rem;box-shadow:0 10px 26px -8px rgba(0,0,0,.7)}
.mp-card-art .mp-art-bg{position:absolute;inset:0}
.mp-card-play{position:absolute;right:.6rem;bottom:.6rem;width:2.75rem;height:2.75rem;border-radius:999px;background:#D4AF37;color:#0b0b0e;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:all .25s var(--ease-smooth);box-shadow:0 10px 22px -6px rgba(0,0,0,.6);border:none;cursor:pointer;z-index:2}
.mp-card:hover .mp-card-play{opacity:1;transform:translateY(0)}
.mp-card-play:hover{transform:scale(1.06)!important;background:#FCD116}
.mp-card-name{font-weight:700;color:#fff;font-size:.9rem;line-height:1.25;margin:0 0 .15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-card-sub{font-size:.72rem;color:#9ca3af;margin:0;letter-spacing:.06em;text-transform:uppercase}
.mp-back{display:inline-flex;align-items:center;gap:.5rem;color:#D4AF37;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem;background:none;border:none;cursor:pointer}
.mp-back:hover{color:#FCD116}
/* Track rows (Spotify dense list) */
.mp-rows{display:flex;flex-direction:column;gap:.1rem}
.mp-row{display:grid;grid-template-columns:2rem 3rem 1fr auto;gap:.9rem;align-items:center;padding:.55rem .75rem;border-radius:.55rem;cursor:pointer;background:transparent;border:none;width:100%;text-align:left;transition:background .18s}
.mp-row:hover{background:rgba(255,255,255,.06)}
.mp-row.active{background:rgba(212,175,55,.12)}
.mp-row-index{color:#9ca3af;font-size:.82rem;font-variant-numeric:tabular-nums;text-align:center}
.mp-row-art{width:3rem;height:3rem;border-radius:.45rem;overflow:hidden;position:relative;flex:none;background:linear-gradient(135deg,var(--mp-h1,#1f2937),var(--mp-h2,#111827))}
.mp-row-art img{width:100%;height:100%;object-fit:cover}
.mp-row-art .mp-row-note{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85)}
.mp-row-title{font-weight:700;color:#fff;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.mp-row-sub{font-size:.75rem;color:#9ca3af;margin:.1rem 0 0}
.mp-row-badge{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#D4AF37;border:1px solid rgba(212,175,55,.35);border-radius:999px;padding:.15rem .55rem}
.mp-row-eq{display:flex;align-items:flex-end;gap:2px;height:1rem}
.mp-row-eq span{width:3px;background:#D4AF37;border-radius:2px;animation:mpeq 1s ease-in-out infinite}
.mp-row-eq span:nth-child(2){animation-delay:.2s}.mp-row-eq span:nth-child(3){animation-delay:.4s}
@keyframes mpeq{0%,100%{height:4px}50%{height:14px}}
.mp-empty{color:#9ca3af;text-align:center;padding:3rem 0}
@media(max-width:640px){.mp-hero{flex-direction:column;align-items:flex-start}.mp-hero-art{width:9rem;height:9rem}.mp-row{grid-template-columns:1.6rem 2.6rem 1fr;padding:.5rem .4rem}.mp-row-badge{display:none}}

.mp-updated-badge{display:inline-flex;align-items:center;gap:.3rem;background:rgba(252,209,22,.15);border:1px solid rgba(252,209,22,.4);color:#FCD116;border-radius:999px;padding:.15rem .6rem;font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-left:.4rem}

/* Light mode: the library was still painting white type on a cream canvas. */
html.light-mode #view-music .mp-hero { background: linear-gradient(115deg,#e1eadc,#fbf7e9); border-color:#b7c8b7; }
html.light-mode #view-music .mp-hero-title,
html.light-mode #view-music .mp-section-title h3,
html.light-mode #view-music .mp-card-name,
html.light-mode #view-music .mp-row-title { color:#193625; }
html.light-mode #view-music .mp-hero-sub,
html.light-mode #view-music .mp-hero-sub strong,
html.light-mode #view-music .mp-card-sub,
html.light-mode #view-music .mp-row-sub,
html.light-mode #view-music .mp-section-title .mp-see-all,
html.light-mode #view-music .mp-row-index,
html.light-mode #view-music .mp-empty { color:#40584a; }
html.light-mode #view-music .mp-hero-sub strong { color:#274b35 !important; }
html.light-mode #view-music .mp-hero-eyebrow,
html.light-mode #view-music .mp-back,
html.light-mode #view-music .mp-row-badge { color:#785819; }
html.light-mode #view-music .mp-updated-badge { color:#654b18; border-color:#a98734; }
html.light-mode #view-music .mp-btn-ghost { color:#193625; border-color:#54705c; }
html.light-mode #view-music .mp-card { background:#fffdf8; border-color:#cbd4c8; }
html.light-mode #view-music .mp-card:hover,
html.light-mode #view-music .mp-row:hover { background:#e7eddf; }
html.light-mode #view-music .mp-row.active { background:#e2e9d8; }
html.light-mode #view-music .music-search-wrapper { background:#fffdf8; border-color:#809988; }
html.light-mode #view-music .music-search-wrapper:focus-within { background:#fff; border-color:#37664a; }
html.light-mode #view-music .music-search-wrapper input { color:#193625 !important; }
html.light-mode #view-music .music-search-wrapper input::placeholder,
html.light-mode #view-music .music-search-icon,
html.light-mode #view-music .music-search-stats { color:#4b6252; }
html.light-mode #view-music .music-search-clear { color:#193625; background:#e8eee6; }
html.light-mode #view-music .mp-hero .mp-btn-play { color:#101c13; }
/* Light music experience: warm paper and forest-green controls around the
   existing church artwork, in both the compact dock and immersive player. */
html.light-mode #view-music #music-player-bar {
  background:linear-gradient(115deg,rgba(255,253,246,.98),rgba(231,239,224,.98)) !important;
  border-top:1px solid #aabdac;
  box-shadow:0 -7px 32px rgba(24,58,37,.16);
}
html.light-mode #music-player-bar #player-title { color:#193625 !important; }
html.light-mode #music-player-bar #player-artist,
html.light-mode #music-player-bar #current-time,
html.light-mode #music-player-bar #total-duration { color:#465e4c !important; }
html.light-mode #music-player-bar .player-control-btn,
html.light-mode #music-player-bar #player-like-btn,
html.light-mode #music-player-bar #mute-btn { color:#315b3e !important; }
html.light-mode #music-player-bar .player-control-btn:hover,
html.light-mode #music-player-bar #player-like-btn:hover,
html.light-mode #music-player-bar #mute-btn:hover { color:#806019 !important; }
html.light-mode #music-player-bar .player-album-art { border-color:#aabdac; box-shadow:0 3px 12px rgba(24,58,37,.18); }
/* Real track artwork should not be covered by the generic music glyph. */
#music-player-bar .player-album-art.has-track-art > svg { display:none; }
#music-player-bar .player-album-art.has-track-art img { opacity:1; }
html.light-mode #music-player-bar .player-play-btn { color:#123821; }

html.light-mode #view-music #full-music-player { color:#193625; background:#f6f1e5; }
html.light-mode #full-music-player .full-player-backdrop { opacity:.19; filter:blur(32px) brightness(1.8) saturate(.8); }
html.light-mode #full-music-player::before {
  background:radial-gradient(ellipse at 14% 45%,rgba(23,91,48,.12),transparent 42%),
             linear-gradient(105deg,rgba(250,247,238,.76),rgba(246,241,229,.94));
}
html.light-mode #full-music-player .full-player-light { opacity:.09; }
html.light-mode #full-music-player .full-player-art { box-shadow:0 32px 70px rgba(24,58,37,.23),0 0 0 1px rgba(24,58,37,.16); }
html.light-mode #full-music-player .full-player-header span,
html.light-mode #full-music-player .full-player-track-meta p,
html.light-mode #full-music-player .full-player-timeline > div,
html.light-mode #full-music-player .full-player-queue-label { color:#4a6550; }
html.light-mode #full-music-player .full-player-header strong,
html.light-mode #full-music-player .full-player-track-meta h2 { color:#193625 !important; }
html.light-mode #full-music-player .full-player-overline { color:#765616; }
html.light-mode #full-music-player .full-player-icon-btn,
html.light-mode #full-music-player .full-player-like { color:#255039; background:rgba(255,255,255,.68); border-color:#a7bca9; }
html.light-mode #full-music-player .full-player-icon-btn:hover,
html.light-mode #full-music-player .full-player-like:hover { background:#e4ebda; border-color:#65866d; }
html.light-mode #full-music-player .full-player-like[aria-pressed="true"] { color:#765616; border-color:#a48639; }
html.light-mode #full-music-player .full-player-main-controls > button:not(.full-player-play),
html.light-mode #full-music-player .full-player-volume { color:#2f5740; }
html.light-mode #full-music-player .full-player-main-controls > button.active { color:#795816; }
html.light-mode #full-music-player .full-player-main-controls .full-player-play { color:#102e1c; }
html.light-mode #full-music-player .full-player-menu { background:#fffdf5; border-color:#afc2ac; box-shadow:0 18px 45px rgba(24,58,37,.16); }
html.light-mode #full-music-player .full-player-menu button { color:#254734; }
html.light-mode #full-music-player .full-player-menu button:hover { color:#112e1d; background:#e5eddc; }
html.light-mode #full-music-player .full-player-icon-btn:focus-visible,
html.light-mode #full-music-player button:focus-visible,
html.light-mode #full-music-player input:focus-visible,
html.light-mode #music-player-bar button:focus-visible,
html.light-mode #music-player-bar input:focus-visible { outline:3px solid #806019; outline-offset:3px; }

/* The fixed theme switch must not cover playback or the time labels. */
body:has(#music-player-bar:not(.translate-y-full)) .theme-toggle { bottom:calc(7rem + env(safe-area-inset-bottom)) !important; }
@media (max-width:767px) {
  body:has(#music-player-bar:not(.translate-y-full)) .theme-toggle { bottom:calc(10rem + env(safe-area-inset-bottom)) !important; }
}