Add up-next queue panel

Shows upcoming videos in the autoplay queue below now-playing meta.
Clickable to jump to any video. Hidden when queue has 1 item or empty.
Updates on playFromList, playNext, playPrev. Hidden in empty player state.

Files:
- frontend/index.html: upnext section in player pane
- frontend/app.js: renderUpNext(), wired into playFromList/playNext/playPrev
- frontend/styles.css: .upnext, .upnext-item, .upnext-list styles

frontend/app.js

@@ -578,13 +578,40 @@ function playFromList(list, index) {
   queue = list;
   queueIndex = index;
   Player.loadVideo(list[index]);
+  renderUpNext();
+}
+
+function renderUpNext() {
+  const upcoming = queue.slice(queueIndex + 1);
+  if (!upcoming.length) { $('upnext').classList.add('hidden'); return; }
+  $('upnext').classList.remove('hidden');
+  $('upnextCount').textContent = String(upcoming.length);
+  const list = $('upnextList');
+  list.innerHTML = '';
+  upcoming.forEach((v) => {
+    const item = document.createElement('div');
+    item.className = 'upnext-item';
+    item.innerHTML = `
+      <img src="${v.thumbnail || ''}" alt="" loading="lazy" />
+      <div class="upnext-info">
+        <div class="upnext-title">${v.title}</div>
+        <div class="upnext-channel">${v.channel || ''}</div>
+      </div>`;
+    item.addEventListener('click', () => {
+      const idx = queue.findIndex((x) => x.id === v.id);
+      if (idx >= 0) { queueIndex = idx - 1; playNext(); }
+    });
+    list.appendChild(item);
+  });
 }
 function playNext() {
   if (queueIndex >= 0 && queueIndex < queue.length - 1) {
     queueIndex++;
     Player.loadVideo(queue[queueIndex]);
+    renderUpNext();
   } else {
     updatePlayBtn();
+    $('upnext').classList.add('hidden');
   }
 }
 function playPrev() {
@@ -592,6 +619,7 @@ function playPrev() {
   if (queueIndex > 0) {
     queueIndex--;
     Player.loadVideo(queue[queueIndex]);
+    renderUpNext();
   }
 }