feat(mobile): comprehensive mobile UI overhaul (#238)

RandomMix: filters and genre mix panels collapse on mobile
- RandomAlbums / album grids: auto-fill favouring 3 columns at narrow widths
- BottomNav: More button opens a bottom sheet with remaining nav items
- MobileMoreOverlay: new sheet component with backdrop and slide-up animation
- Tracklist: mobile Title / Artist two-line stacked layout (Apple Music style)
- ArtistDetail: centred header (photo → name → buttons), icon-only buttons
  except Play All, collapsible Similar Artists (5 default), 2-column album
  grid, avatar glow derived from dominant cover colour
- Settings: fixed overflow in ReplayGain, Crossfade, mix rating filters,
  theme scheduler, and Next Track Buffering sections

Co-authored-by: kilyabin <65072190+kilyabin@users.noreply.github.com>

src/styles/components.css

@@ -6815,9 +6815,111 @@ html.no-compositing .fs-seekbar-played {
    MOBILE COMPONENT OVERRIDES  (< 800px)
    ═══════════════════════════════════════════════════════════════════════════ */
 
+/* ─── Tracklist — compact Title + Artist rows ─── */
+.app-shell[data-mobile] .tracklist-header {
+  display: none;
+}
+
+.app-shell[data-mobile] .track-row {
+  display: grid !important;
+  grid-template-columns: 44px 1fr 50px !important;
+  grid-template-rows: auto auto;
+  column-gap: 8px;
+  row-gap: 0;
+  min-height: 52px;
+  padding: 6px 0;
+}
+
+/* play button / number */
+.app-shell[data-mobile] .track-row > :nth-child(1) {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+  align-self: center;
+}
+
+/* title cell */
+.app-shell[data-mobile] .track-row > :nth-child(2) {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: end;
+  padding-bottom: 1px;
+}
+
+/* artist cell — shown as subtitle */
+.app-shell[data-mobile] .track-row > :nth-child(3) {
+  grid-column: 2;
+  grid-row: 2;
+  align-self: start;
+  overflow: hidden;
+}
+
+/* duration — last child, right column */
+.app-shell[data-mobile] .track-row > :last-child {
+  grid-column: 3;
+  grid-row: 1 / span 2;
+  align-self: center;
+  justify-self: end;
+  display: flex !important;
+}
+
+/* hide album, genre, star and any extra columns */
+.app-shell[data-mobile] .track-row > :nth-child(n+4):not(:last-child) {
+  display: none !important;
+}
+
+/* artist button/span as subtitle */
+.app-shell[data-mobile] .track-row .track-artist-cell .rm-artist-btn,
+.app-shell[data-mobile] .track-row .track-artist-cell .track-artist {
+  font-size: 12px !important;
+  color: var(--text-secondary) !important;
+  padding: 0 !important;
+  background: none !important;
+  border: none !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  width: 100%;
+  text-align: left;
+  cursor: default;
+}
+
+/* ─── Artist Detail page ─── */
+.app-shell[data-mobile] .artist-detail-header {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.app-shell[data-mobile] .artist-detail-avatar {
+  width: 150px;
+  height: 150px;
+  flex-shrink: 0;
+}
+
+.app-shell[data-mobile] .artist-detail-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding-top: 0;
+}
+
+.app-shell[data-mobile] .artist-detail-entity-rating {
+  justify-content: center;
+}
+
+.app-shell[data-mobile] .artist-detail-links {
+  justify-content: center;
+}
+
+.app-shell[data-mobile] .album-grid-wrap--artist {
+  grid-template-columns: repeat(2, 1fr);
+}
+
 /* ─── Album / Artist Grid — fewer columns ─── */
 .app-shell[data-mobile] .album-grid-wrap {
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(140px, 30%), 1fr));
   gap: var(--space-3);
 }