fixed visually

src/main.js

@@ -13,6 +13,8 @@ const audio = new Audio();
 const stationNameEl = document.getElementById('station-name');
 const stationSubtitleEl = document.getElementById('station-subtitle');
 const nowPlayingEl = document.getElementById('now-playing');
+const nowArtistEl = document.getElementById('now-artist');
+const nowTitleEl = document.getElementById('now-title');
 const statusTextEl = document.getElementById('status-text');
 const statusDotEl = document.querySelector('.status-dot');
 const playBtn = document.getElementById('play-btn');
@@ -215,12 +217,14 @@ function updateNowPlayingUI() {
   const station = stations[currentIndex];
   if (!station) return;
 
-  if (nowPlayingEl) {
+  if (nowPlayingEl && nowArtistEl && nowTitleEl) {
     if (station.currentSongInfo && station.currentSongInfo.artist && station.currentSongInfo.title) {
-      nowPlayingEl.textContent = `${station.currentSongInfo.artist} — ${station.currentSongInfo.title}`;
+      nowArtistEl.textContent = station.currentSongInfo.artist;
+      nowTitleEl.textContent = station.currentSongInfo.title;
       nowPlayingEl.classList.remove('hidden');
     } else {
-      nowPlayingEl.textContent = '';
+      nowArtistEl.textContent = '';
+      nowTitleEl.textContent = '';
       nowPlayingEl.classList.add('hidden');
     }
   }
@@ -419,10 +423,9 @@ function loadStation(index) {
   stationNameEl.textContent = station.name;
   stationSubtitleEl.textContent = currentMode === 'cast' ? `Casting to ${currentCastDevice}` : 'Live Stream';
   // clear now playing when loading a new station; will be updated by poller if available
-  if (nowPlayingEl) {
-    nowPlayingEl.textContent = '';
-    nowPlayingEl.classList.add('hidden');
-  }
+  if (nowPlayingEl) nowPlayingEl.classList.add('hidden');
+  if (nowArtistEl) nowArtistEl.textContent = '';
+  if (nowTitleEl) nowTitleEl.textContent = '';
 
   // Update Logo Text (First letter or number)
   // Simple heuristic: if name has a number, use it, else first letter