UI: Refactored Sync tab into a Remote Control interface

extension/popup.html

@@ -253,10 +253,6 @@
                 </div>
             </div>
 
-            <button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); margin-bottom: 12px;">
-                ⚡ Force Sync Everyone
-            </button>
-
             <button id="leaveBtn" class="secondary" style="color: var(--error); border-color: var(--error);">Leave Room</button>
         </div>
     </div>
@@ -270,11 +266,17 @@
             </select>
         </div>
         
-        <button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7);">
+        <label>Remote Control</label>
+        <div style="display: flex; gap: 8px; margin-bottom: 20px;">
+            <button id="playBtn" class="primary" style="flex: 1; background: var(--success);">▶ Play</button>
+            <button id="pauseBtn" class="primary" style="flex: 1; background: var(--error);">⏸ Pause</button>
+        </div>
+
+        <button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); margin-bottom: 20px;">
             ⚡ Force Sync Everyone
         </button>
 
-        <div style="margin-top: 20px;">
+        <div style="margin-bottom: 20px;">
             <label>Peers in Room</label>
             <div id="peerList" class="info-card">
                 <div style="text-align:center; color: var(--text-muted); font-size: 12px;">No peers connected</div>

extension/popup.js

@@ -38,7 +38,9 @@ const elements = {
     roomError: document.getElementById('roomError'),
     retryBtn: document.getElementById('retryBtn'),
     sectionJoin: document.getElementById('section-join'),
-    sectionActive: document.getElementById('section-active')
+    sectionActive: document.getElementById('section-active'),
+    playBtn: document.getElementById('playBtn'),
+    pauseBtn: document.getElementById('pauseBtn')
 };
 
 let localPeerId = null;
@@ -414,6 +416,22 @@ elements.forceSyncBtn.addEventListener('click', async () => {
     });
 });
 
+elements.playBtn.addEventListener('click', () => {
+    chrome.runtime.sendMessage({
+        type: 'CONTENT_EVENT',
+        action: EVENTS.PLAY,
+        payload: {}
+    });
+});
+
+elements.pauseBtn.addEventListener('click', () => {
+    chrome.runtime.sendMessage({
+        type: 'CONTENT_EVENT',
+        action: EVENTS.PAUSE,
+        payload: {}
+    });
+});
+
 elements.clearLogs.addEventListener('click', () => {
     chrome.runtime.sendMessage({ type: 'CLEAR_LOGS' }, () => {
         elements.logList.innerHTML = '';