/* Music library, playlists and track rows. */

/* Playlist rows follow common mobile music patterns: artwork, metadata and a quiet action affordance. */
.music-track-row { grid-template-columns: 18px 38px minmax(0,1fr) auto; min-height: 54px; gap: 8px; padding: 7px; border: 1px solid transparent; }
.music-track-index { width: 18px; display: grid; place-items: center; }
.music-track-index svg { width: 13px; height: 13px; }
.music-track-art { position: relative; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: var(--music-muted); background: var(--music-soft); }
.music-track-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.music-track-art-state { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; color: var(--music-accent-ink); background: var(--music-accent); transition: opacity .18s ease; }
.music-track-art-state svg { width: 15px; height: 15px; fill: currentColor; }
.music-track-row:hover .music-track-art-state, .music-track-row.is-current .music-track-art-state { opacity: .92; }
.music-track-actions { display: inline-flex; align-items: center; gap: 5px; min-width: 42px; justify-content: flex-end; }
.music-track-actions small { color: var(--music-muted); font-size: 8px; }
.music-track-actions > svg { width: 15px; height: 15px; color: var(--music-muted); }
.music-track-row.is-current .music-track-actions small { color: var(--music-accent-strong); }
@media (max-width: 360px) {
  .music-track-row { grid-template-columns: 16px 34px minmax(0,1fr) auto; gap: 6px; min-height: 50px; }
  .music-track-art { width: 34px; height: 34px; }
  .music-track-actions small { display: none; }
}

/* Online playlist and personal library screens. */
.music-library-header { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 9px; padding: 10px 14px 12px; border-bottom: 1px solid var(--music-border); background: color-mix(in srgb, var(--music-surface) 94%, transparent); }
.music-library-header > div { min-width: 0; }
.music-library-header h2 { margin: 3px 0 0; color: var(--music-text); font-size: 17px; }
.music-library-back, .music-library-action { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--music-border); border-radius: 11px; color: var(--music-muted); background: var(--music-soft); }
.music-library-back:hover, .music-library-action:hover { color: var(--music-text); border-color: var(--music-accent); background: var(--music-row-active); }
.music-library-back svg, .music-library-action svg { width: 15px; height: 15px; }
.music-playlists-screen, .music-playlist-screen, .music-favorites-screen, .music-together-history-screen { position: relative; height: 100%; max-height: 100%; overflow-y: auto; scrollbar-width: none; background: var(--music-bg, var(--qixi-bg, #f4f8fb)); }
.music-playlists-screen::-webkit-scrollbar, .music-playlist-screen::-webkit-scrollbar, .music-favorites-screen::-webkit-scrollbar, .music-together-history-screen::-webkit-scrollbar { display: none; }
.music-playlists-detail { padding: 15px 14px 86px; }
.music-playlists-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.music-playlist-library-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) 14px; align-items: center; gap: 9px; min-width: 0; min-height: 82px; padding: 9px; border: 1px solid var(--music-border); border-radius: 16px; color: var(--music-text); background: var(--music-surface); text-align: left; box-shadow: 0 7px 16px color-mix(in srgb, var(--music-accent-strong) 8%, transparent); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.music-playlist-library-card:hover { border-color: var(--music-accent); background: var(--music-row-active); transform: translateY(-1px); }
.music-playlist-library-cover { position: relative; width: 58px; height: 58px; overflow: hidden; border-radius: 14px; background: var(--music-soft); }
.music-playlist-library-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.music-playlist-library-cover::after { content: ''; position: absolute; inset: 0; background: rgba(18, 28, 36, .18); pointer-events: none; }
.music-playlist-library-cover > i { position: absolute; z-index: 1; right: 5px; bottom: 5px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: var(--music-accent-ink); background: color-mix(in srgb, var(--music-accent) 90%, transparent); }
.music-playlist-library-cover > i svg { width: 12px; height: 12px; }
.music-playlist-library-copy { min-width: 0; display: grid; gap: 4px; }
.music-playlist-library-copy strong, .music-playlist-library-copy small, .music-playlist-library-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-playlist-library-copy strong { font-size: 11px; }
.music-playlist-library-copy small { color: var(--music-muted); font-size: 8px; line-height: 1.35; }
.music-playlist-library-copy em { color: var(--music-accent-strong); font-size: 8px; font-style: normal; }
.music-playlist-library-card > svg { width: 14px; height: 14px; color: var(--music-muted); }
.music-scroll-top { position: sticky; z-index: 3; left: calc(100% - 47px); bottom: 18px; width: 34px; height: 34px; display: grid; place-items: center; margin: 0 13px 17px auto; border: 1px solid var(--music-border); border-radius: 50%; color: var(--music-accent-ink); background: var(--music-accent); box-shadow: 0 8px 18px color-mix(in srgb, var(--music-accent-strong) 22%, transparent); }
.music-scroll-top:hover { filter: brightness(1.04); transform: translateY(-1px); }
.music-scroll-top svg { width: 15px; height: 15px; }
.music-playlist-detail, .music-favorites-detail { padding: 15px 14px 34px; }
.music-playlist-hero { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 14px; padding: 4px 0 16px; }
.music-playlist-hero > img { width: 104px; aspect-ratio: 1; border-radius: 17px; object-fit: cover; box-shadow: 0 10px 22px color-mix(in srgb, var(--music-accent-strong) 18%, transparent); }
.music-playlist-meta { min-width: 0; display: grid; gap: 5px; }
.music-playlist-meta h3, .music-favorites-hero h3 { margin: 0; overflow: hidden; color: var(--music-text); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.music-playlist-meta p, .music-playlist-meta small, .music-favorites-hero p { margin: 0; overflow: hidden; color: var(--music-muted); font-size: 9px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.music-playlist-meta small { color: var(--music-accent-strong); }
.music-playlist-actions { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; }
.music-playlist-actions .music-primary-button { min-height: 34px; padding: 0 14px; border-radius: 12px; font-size: 10px; }
.music-playlist-actions .music-icon-button { width: 34px; height: 34px; border-radius: 11px; }
.music-playlist-song-list { border-top: 1px solid var(--music-border); }
.music-playlist-song-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) 20px; align-items: center; gap: 8px; width: 100%; min-height: 53px; padding: 5px 1px; border-bottom: 1px solid color-mix(in srgb, var(--music-border) 75%, transparent); color: var(--music-text); background: transparent; text-align: left; }
.music-playlist-song-row:hover { background: var(--music-row-active); }
.music-playlist-song-row > span:first-child { color: var(--music-muted); font-size: 9px; text-align: center; font-variant-numeric: tabular-nums; }
.music-playlist-song-row > svg { width: 15px; height: 15px; color: var(--music-muted); }
.music-playlist-song-copy { min-width: 0; display: grid; gap: 3px; }
.music-playlist-song-copy strong, .music-playlist-song-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-playlist-song-copy strong { font-size: 10px; }
.music-playlist-song-copy small { color: var(--music-muted); font-size: 8px; }
.music-favorites-hero { display: grid; grid-template-columns: 63px minmax(0, 1fr); align-items: center; gap: 13px; padding: 14px 0 16px; }
.music-favorites-hero-icon { width: 63px; height: 63px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--music-accent) 45%, var(--music-border)); border-radius: 18px; color: var(--music-accent-ink); background: var(--music-accent); box-shadow: 0 10px 22px color-mix(in srgb, var(--music-accent-strong) 18%, transparent); }
.music-favorites-hero-icon svg { width: 25px; height: 25px; }
.music-favorites-hero > div { display: grid; gap: 5px; min-width: 0; }

/* Together history mirrors the compact, date-led listening records layout. */
.music-together-history-screen img { display: block; box-sizing: border-box; width: 49px; min-width: 0; max-width: 100%; height: 49px; min-height: 0; max-height: 49px; object-fit: cover; }
.music-together-history-summary { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 13px; margin: 15px 14px 11px; padding: 13px; border: 1px solid color-mix(in srgb, var(--music-accent) 32%, var(--music-border)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--music-accent) 16%, var(--music-surface)), var(--music-surface)); box-shadow: 0 9px 21px color-mix(in srgb, var(--music-accent-strong) 10%, transparent); }
.music-history-summary-avatars { position: relative; display: flex; align-items: center; min-height: 52px; padding-left: 8px; }
.music-history-summary-avatar { position: relative; flex: 0 0 auto; display: grid; width: 49px; height: 49px; margin-left: 0; overflow: hidden; border: 3px solid var(--music-surface); border-radius: 50%; box-shadow: 0 5px 12px rgba(45,66,76,.16); }
.music-history-summary-avatar + .music-history-summary-avatar { margin-left: -17px; }
.music-history-summary-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.music-history-summary-copy { display: grid; gap: 4px; min-width: 0; }
.music-history-summary-copy > strong { overflow: hidden; color: var(--music-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.music-history-stats { display: flex; align-items: center; gap: 10px; }
.music-history-stats > span { display: grid; gap: 2px; min-width: 0; }
.music-history-stats b { color: var(--music-accent-strong); font-size: 10px; font-variant-numeric: tabular-nums; }
.music-history-stats small { color: var(--music-muted); font-size: 7px; }
.music-history-stats > i { width: 1px; height: 20px; background: var(--music-border); }
.music-together-history-list { display: grid; gap: 8px; padding: 3px 14px 86px; }
.music-together-history-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; }
.music-together-history-row > time { color: var(--music-muted); font-size: 8px; line-height: 1.35; text-align: center; }
.music-together-history-card { display: grid; grid-template-columns: 37px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 57px; padding: 7px 8px; border: 1px solid var(--music-border); border-radius: 14px; background: var(--music-surface); }
.music-history-row-avatar { position: relative; flex: 0 0 auto; display: grid; width: 37px; height: 37px; margin: 0; overflow: hidden; border-radius: 12px; }
.music-history-row-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.music-together-history-copy { display: grid; gap: 3px; min-width: 0; }
.music-together-history-copy strong, .music-together-history-copy span, .music-together-history-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-together-history-copy strong { color: var(--music-text); font-size: 10px; }
.music-together-history-copy span, .music-together-history-copy small { color: var(--music-muted); font-size: 8px; }
.music-together-history-copy span { color: var(--music-accent-strong); font-variant-numeric: tabular-nums; }
.music-together-history-invite { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 56px; min-height: 28px; padding: 0 8px; border: 1px solid var(--music-border); border-radius: 8px; color: var(--music-accent-strong); background: var(--music-soft); font-family: inherit; font-size: 11px !important; font-weight: 600 !important; line-height: 1; white-space: nowrap; }
.music-together-history-invite svg { width: 11px; height: 11px; flex: 0 0 auto; }
.music-together-history-invite:disabled { cursor: wait; opacity: .65; }
.music-history-loading { margin: 10px 0; color: var(--music-muted); font-size: 9px; text-align: center; }
@media (max-width: 360px) {
  .music-together-history-row { grid-template-columns: 37px minmax(0, 1fr); gap: 5px; }
  .music-together-history-card { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px; padding-inline: 6px; }
  .music-history-row-avatar { width: 34px; height: 34px; }
  .music-together-history-invite { min-width: 52px; min-height: 26px; gap: 3px; padding-inline: 7px; font-size: 10px !important; }
  .music-together-history-invite svg { width: 10px; height: 10px; }
}