feat(ui): unify player controls with pl8list lime

web/index.html

@@ -318,14 +318,15 @@
           <canvas class="wave" aria-hidden="true"></canvas>
           <span class="wave-tip"></span>
         </div>
-        <div class="time"><span class="cur">0:00</span><button type="button" class="to-drop" title="jump to the next marked drop (d)">drop</button><span class="counts"></span><span class="dur"></span></div>
-      </div>
-      <nav class="actions">
+        <div class="time"><span class="cur">0:00</span><span class="counts"></span><span class="dur"></span></div>
+      <nav class="actions" aria-label="track controls">
         <button type="button" class="act like" title="like (l)" aria-label="like"><span class="ring"><svg><use href="#i-heart"/></svg></span><span class="n saves"></span></button>
         <button type="button" class="act share" title="share (s)" aria-label="share"><span class="ring"><svg><use href="#i-share"/></svg></span><span class="n">share</span></button>
+        <button type="button" class="to-drop" title="jump to the next marked drop (d)">drop</button>
         <a class="act open" target="_blank" rel="noopener" title="open on pl8list" aria-label="open on pl8list"><span class="ring"><svg><use href="#i-comment"/></svg></span><span class="n comments"></span></a>
         <button type="button" class="act next" title="next (j)" aria-label="next"><span class="ring"><svg><use href="#i-down"/></svg></span><span class="n">next</span></button>
       </nav>
+      </div>
     </section>
   </template>
 

web/public/legal.css

@@ -1,6 +1,6 @@
 /* Impressum and privacy pages. Plain CSS outside the app bundle, so the server's
    templates can link it by a fixed name. */
-:root { color-scheme: dark; --fg: #f2f2f2; --muted: #9a9a9a; --accent: #e9e8e3; }
+:root { color-scheme: dark; --fg: #f2f2f2; --muted: #9a9a9a; --accent: #a5d601; }
 * { box-sizing: border-box; }
 body {
   margin: 0;

web/src/cards.ts

@@ -195,7 +195,8 @@ export class Card {
     $(".follow").addEventListener("click", () => this.actions.follow(this));
     $(".radio").addEventListener("click", () => this.actions.radio(this));
     const toDrop = $(".to-drop");
-    toDrop.hidden = !this.drops.length;
+    (toDrop as HTMLButtonElement).disabled = !this.drops.length;
+    if (!this.drops.length) toDrop.title = "no marked drops in this track";
     toDrop.addEventListener("click", () => this.actions.toDrop(this));
 
     this.el = el;

web/src/style.css

@@ -9,7 +9,9 @@
   --fg: #f2f2f2;
   --muted: #b5b5b8;
   --faint: #96969a;
-  --accent: #ff4d6d;
+  --accent: #a5d601;
+  --accent-hover: #b2e51a;
+  --danger: #ff8585;
   --panel: rgba(18, 18, 20, 0.94);
   --line: #ffffff1f;
   --line-strong: #333;
@@ -1144,8 +1146,8 @@ button.primary:disabled { opacity: 0.35; cursor: default; }
   place-items: center;
   padding: 1rem;
   background:
-    radial-gradient(60rem 40rem at 20% 10%, #ff4d6d33, transparent 60%),
-    radial-gradient(50rem 40rem at 90% 90%, #4d6dff2e, transparent 60%),
+    radial-gradient(60rem 40rem at 20% 10%, #a5d60120, transparent 60%),
+    radial-gradient(50rem 40rem at 90% 90%, #a5d6010c, transparent 60%),
     #050507;
 }
 
@@ -1379,3 +1381,44 @@ body.zen .content { gap: 0.3rem; }
 @media (max-width: 640px) and (max-height: 700px) {
   body:has(#discovery-options:not([hidden])) .art { width: min(8rem, 18dvh, 44vw); }
 }
+
+/* pl8list brand controls; artist accents remain local to each track. */
+#mode-tabs button[aria-pressed="true"] { background: var(--accent); color: #111; }
+.login-box button[type=submit], .help-box button { color: #111; }
+button.primary:hover, .login-box button[type=submit]:hover { background: var(--accent-hover); }
+.link.danger, #login-error { color: var(--danger); }
+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);
+}
+.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.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);
+}
+.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 .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; }
+@media (min-width: 900px) and (pointer: fine) {
+  .art { width: min(calc(14 * var(--u)), 35vh); }
+  .content { gap: 0.65rem; }
+}
+@media (max-width: 640px) {
+  .content { margin-bottom: 4.5rem; }
+  .content .actions { padding: 0.45rem; gap: 0.25rem; margin-top: 0.5rem; }
+  #up-next { bottom: max(0.8rem, env(safe-area-inset-bottom)); }
+  #toast { bottom: calc(max(0.8rem, env(safe-area-inset-bottom)) + 4.6rem); }
+}