feat(web): align the web UI with the design prototype

- Ambient background in the app shell: three drifting blurred blobs,
  the third one tinted with the current track's cover; can be turned off
  in settings and stays still with reduced motion.
- Island player variant (floating glass panel) next to the bar, chosen
  in settings; player source line ("Album · …", "My Wave"), reactions
  around the transport controls, queue drawer.
- Sidebar: like / dislike counters, pending uploads badge on Queue,
  admin Settings page holding the upload queue limits.
- Collection: header tile with kicker, underline tabs, time / number
  lead column with an equalizer for the current track, album column,
  dimmed dislikes with undo, Play all / Shuffle pills.
- Album: cover-tinted header and Play / Shuffle; artist: artist wave,
  Play and popular tracks (new GET /artists/{id}/top-tracks).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/widgets/PlayerBar.module.css

@@ -10,6 +10,45 @@
   backdrop-filter: blur(20px);
 }
 
+.bar.island {
+  position: fixed;
+  left: 50%;
+  bottom: 16px;
+  z-index: 5;
+  width: min(1040px, calc(100% - 32px));
+  height: 84px;
+  transform: translateX(-50%);
+  border: 1px solid var(--line2);
+  border-radius: var(--radius-xl);
+  background: var(--glass);
+  backdrop-filter: blur(28px) saturate(1.3);
+  box-shadow: var(--shadow);
+}
+
+.source {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--text3);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+a.source {
+  text-decoration: none;
+}
+
+a.source:hover {
+  color: var(--text);
+}
+
+.sourceWave {
+  color: var(--accent2);
+}
+
 .empty {
   display: flex;
   align-items: center;
@@ -192,3 +231,61 @@
     display: none;
   }
 }
+
+.drawer {
+  position: fixed;
+  right: 16px;
+  bottom: 100px;
+  z-index: 6;
+  display: flex;
+  flex-direction: column;
+  width: min(380px, calc(100% - 32px));
+  max-height: min(560px, calc(100% - 180px));
+  border: 1px solid var(--line2);
+  border-radius: var(--radius-xl);
+  background: var(--glass);
+  backdrop-filter: blur(28px) saturate(1.3);
+  box-shadow: var(--shadow);
+  animation: pipuIn 0.2s ease-out;
+}
+
+.drawerIsland {
+  bottom: 112px;
+}
+
+.drawerHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 12px 10px 18px;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.drawerList {
+  overflow-y: auto;
+  padding: 0 8px 10px;
+}
+
+.queueRow {
+  display: grid;
+  grid-template-columns: 40px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 6px 10px;
+  border-radius: 12px;
+  text-align: left;
+}
+
+.queueRow:hover {
+  background: var(--hover);
+}
+
+.queueCurrent {
+  background: var(--accent-soft);
+}
+
+.queueCurrent .title {
+  color: var(--accent2);
+}