fix(ui): lighten and align player controls

docs/redesign/README.md

@@ -11,3 +11,5 @@ Run the frontend with `cd web && bun install --frozen-lockfile && bun run dev`.
 The chromatic artwork material, artist accents and rounded controls have been restored following visual feedback. The drop button has a centered row beneath the waveform, no arrow, and a 44px minimum height. Chart selectors have dedicated clearance on short mobile screens.
 
 The player now uses one waveform-aligned action console on desktop and mobile, with drop centered. A track without detected drops keeps that control disabled to preserve the layout. Primary controls use pl8list's public Pico lime colors (`#a5d601`, hover `#b2e51a`); artist colors still drive the artwork and waveform. Checked desktop and short-mobile layouts with chart selectors visible; the synthetic Chromium fixture reported no page errors.
+
+Control-row refinement: removed the enclosing panel, aligned icons with their labels/counts, and replaced the solid drop fill with a subdued lime outline. The row retains 48px control heights. Updated desktop/mobile Chromium fixture screenshots; build and TypeScript checks pass.

web/src/style.css

@@ -1349,16 +1349,6 @@ body.zen .content { gap: 0.3rem; }
 .time .cur { grid-column: 1; grid-row: 1; justify-self: start; }
 .time .counts { grid-column: 2; grid-row: 1; text-align: center; overflow-wrap: anywhere; }
 .time .dur { grid-column: 3; grid-row: 1; justify-self: end; }
-.time .to-drop {
-  grid-column: 1 / -1; grid-row: 2; justify-self: center;
-  margin: 0.25rem 0 0; min-width: 8rem; min-height: 44px;
-  justify-content: center; padding: 0.5rem 1.5rem;
-  font: 600 1rem/1.2 var(--font); border-radius: 999px;
-  background: color-mix(in oklab, var(--card-accent) 18%, #111);
-  border-color: color-mix(in oklab, var(--card-accent) 65%, #555);
-  color: var(--fg);
-}
-.time .to-drop:hover { background: color-mix(in oklab, var(--card-accent) 35%, #111); color: var(--fg); }
 @media (max-width: 640px) {
   .bar-end { gap: 0.45rem; }
   .bar-end .icon-btn, .avatar-btn { width: 2.75rem; height: 2.75rem; }
@@ -1392,23 +1382,25 @@ button.danger:not(.link) { background: var(--danger); color: #111; }
 /* One listening console, aligned to the waveform on every screen. */
 .content .actions {
   position: relative; inset: auto; translate: none; transform: none;
-  width: 100%; display: grid; grid-template-columns: 1fr 1fr 1.6fr 1fr 1fr;
-  align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.75rem;
-  border: 1px solid var(--line); border-radius: 16px;
-  background: #141416d9; backdrop-filter: blur(16px);
+  width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
+  align-items: center; gap: 0.5rem; margin-top: 0.35rem; padding: 0.75rem 0 0;
+  border: none; border-top: 1px solid #ffffff26; border-radius: 0;
+  background: none;
 }
-.content .act { min-width: 0; min-height: 56px; justify-content: center; gap: 0.25rem; border-radius: 8px; }
-.content .act .ring { width: 2rem; height: 2rem; background: none; box-shadow: none; border: none; backdrop-filter: none; }
-.content .act:hover { background: var(--glass); }
+.content .act { min-width: 0; min-height: 48px; flex-direction: row; justify-content: center; gap: 0.4rem; border-radius: 999px; font-size: 0.85rem; color: var(--fg); }
+.content .act .ring { width: 1.25rem; height: 1.25rem; background: none; box-shadow: none; border: none; backdrop-filter: none; }
+.content .act svg { width: 1.15rem; height: 1.15rem; }
+.content .act .n { min-height: 0; line-height: 1.2; text-shadow: none; }
+.content .act:hover { background: #ffffff0d; }
 .content .act.like.on { color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
 .content .act.like.on .ring { color: inherit; background: none; }
 .content .actions .to-drop {
   margin: 0; min-width: 0; min-height: 48px; padding: 0.5rem;
-  border-radius: 10px; background: var(--accent); border: 1px solid transparent;
-  color: #111; justify-content: center; font: 600 1rem/1.2 var(--font);
+  border-radius: 999px; background: color-mix(in oklab, var(--accent) 8%, #121412); border: 1px solid color-mix(in oklab, var(--accent) 55%, #333);
+  color: var(--accent); justify-content: center; font: 600 1rem/1.2 var(--font);
 }
-.content .actions .to-drop:hover { background: var(--accent-hover); }
-.content .actions .to-drop:disabled { background: #292b28; border-color: var(--line); color: var(--muted); cursor: default; }
+.content .actions .to-drop:hover { background: color-mix(in oklab, var(--accent) 18%, #121412); border-color: var(--accent); }
+.content .actions .to-drop:disabled { background: #ffffff05; border-color: var(--line); color: var(--muted); cursor: default; }
 .content .time { gap: 0.5rem; }
 .byline .pill { min-height: 32px; padding: 0.3rem 0.7rem; border-radius: 8px; border-color: var(--line); background: #ffffff09; }
 body.zen .content .actions { display: none; }
@@ -1418,7 +1410,8 @@ body.zen .content .actions { display: none; }
 }
 @media (max-width: 640px) {
   .content { margin-bottom: 4.5rem; }
-  .content .actions { padding: 0.45rem; gap: 0.25rem; margin-top: 0.5rem; }
+  .content .actions { padding: 0.5rem 0 0; gap: 0.25rem; margin-top: 0.25rem; }
+  .content .act { gap: 0.25rem; font-size: 0.75rem; }
   #up-next { bottom: max(0.8rem, env(safe-area-inset-bottom)); }
   #toast { bottom: calc(max(0.8rem, env(safe-area-inset-bottom)) + 4.6rem); }
 }