refactor(np): now playing controls and icons

src/lib/components/NowPlayingPanel.svelte

@@ -48,7 +48,7 @@
       disabled={!hasTrack}
       title="Previous"
     >
-      <img src="/icons/prev.svg" alt="Previous" />
+      <img src="/icons/player-skip-back.svg" alt="Previous" />
     </button>
 
     <button
@@ -58,19 +58,28 @@
       title={$playback.isPlaying ? 'Pause' : 'Play'}
     >
       {#if $playback.isPlaying}
-        <img src="/icons/pause.svg" alt="Pause" />
+        <img src="/icons/player-pause.svg" alt="Pause" />
       {:else}
-        <img src="/icons/play.svg" alt="Play" />
+        <img src="/icons/player-play.svg" alt="Play" />
       {/if}
     </button>
 
+    <button
+      class="control-button"
+      onclick={() => playback.stop()}
+      disabled={!hasTrack}
+      title="Stop"
+    >
+      <img src="/icons/player-stop.svg" alt="Stop" />
+    </button>
+
     <button
       class="control-button"
       onclick={handleNext}
       disabled={!hasTrack}
       title="Next"
     >
-      <img src="/icons/next.svg" alt="Next" />
+      <img src="/icons/player-skip-forward.svg" alt="Next" />
     </button>
   </div>
 
@@ -123,32 +132,37 @@
 
   .controls {
     display: flex;
-    gap: 4px;
     flex-shrink: 0;
   }
 
   .control-button {
-    padding: 4px;
+    padding: 6px 20px;
     min-width: auto;
     min-height: auto;
     display: flex;
     align-items: center;
     justify-content: center;
+    border-radius: 0;
+    margin: 0 -1px 0 0;
+  }
+
+  .control-button:first-child {
+    margin-left: 0;
   }
 
   .control-button img {
-    width: 24px;
-    height: 24px;
+    width: 12px;
+    height: 12px;
     filter: light-dark(none, invert(1));
   }
 
   .play-pause {
-    padding: 6px;
+    padding: 6px 20px;
   }
 
   .play-pause img {
-    width: 28px;
-    height: 28px;
+    width: 12px;
+    height: 12px;
   }
 
   .track-info {