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);
 }
 

src/styles/layout.css

@@ -2066,6 +2066,93 @@ html[data-platform="windows"] .player-bar.floating {
   line-height: 1;
 }
 
+/* ─── Mobile More Sheet ─── */
+.mobile-more-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 200;
+}
+
+.mobile-more-sheet {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--bg-app);
+  border-radius: 16px 16px 0 0;
+  border-top: 1px solid var(--border);
+  z-index: 201;
+  padding: 0.5rem 0.75rem calc(0.75rem + var(--bottom-nav-height, 62px));
+  animation: more-sheet-up 0.22s ease;
+}
+
+@keyframes more-sheet-up {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+.mobile-more-handle {
+  width: 36px;
+  height: 4px;
+  background: var(--border);
+  border-radius: 2px;
+  margin: 0 auto 0.75rem;
+}
+
+.mobile-more-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.25rem 0;
+}
+
+.mobile-more-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.65rem 0.25rem;
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  background: none;
+  border: none;
+  transition: color var(--transition-fast), background var(--transition-fast);
+}
+
+.mobile-more-item:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.mobile-more-item.active {
+  color: var(--accent);
+}
+
+.mobile-more-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.75;
+}
+
+.mobile-more-item.active .mobile-more-icon,
+.mobile-more-item:hover .mobile-more-icon {
+  opacity: 1;
+}
+
+.mobile-more-label {
+  line-height: 1.2;
+  text-align: center;
+  max-width: 72px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* ─── Grid Overrides ─── */
 .app-shell[data-mobile] {
   grid-template-columns: 1fr;