feat: add processor toggles and enlarge video in advanced mode

Advanced Mode Enhancements:
- Processor visibility toggles (ASRX/OCR/Face/Pose)
- Toggle switches to show/hide each processor type
- Larger video size in advanced mode (1200px vs 720px)
- Video max-height increased to 75vh

Features:
- showAsrxInPlayer/showOcrInPlayer/showFaceInPlayer/showPoseInPlayer refs
- visibleTags computed respects toggle state
- ms-proc-toggles UI with colored labels
- ms-modal-video-advanced CSS class

src/components/VideoPlayer.vue

@@ -133,6 +133,26 @@
         <button v-if="markingStart !== null" class="ms-fm-btn ms-mark-btn ms-mark-end" @click="endMark">End F{{ currentFrame }}</button>
         <button v-if="markingStart !== null" class="ms-fm-btn ms-mark-btn ms-mark-cancel" @click="cancelMark">✕</button>
         
+        <!-- Processor toggles -->
+        <div class="ms-proc-toggles">
+          <label class="ms-proc-toggle">
+            <input type="checkbox" v-model="showAsrxInPlayer" @change="toggleProcessorMarks('asrx')">
+            <span class="ms-proc-toggle-label" style="color: #34a853;">ASRX</span>
+          </label>
+          <label class="ms-proc-toggle">
+            <input type="checkbox" v-model="showOcrInPlayer" @change="toggleProcessorMarks('ocr')">
+            <span class="ms-proc-toggle-label" style="color: #fbbc04;">OCR</span>
+          </label>
+          <label class="ms-proc-toggle">
+            <input type="checkbox" v-model="showFaceInPlayer" @change="toggleProcessorMarks('face')">
+            <span class="ms-proc-toggle-label" style="color: #4285f4;">Face</span>
+          </label>
+          <label class="ms-proc-toggle">
+            <input type="checkbox" v-model="showPoseInPlayer" @change="toggleProcessorMarks('pose')">
+            <span class="ms-proc-toggle-label" style="color: #9c27b0;">Pose</span>
+          </label>
+        </div>
+        
         <!-- Tag filter -->
         <select v-model="tagFilter" class="ms-mark-filter">
           <option value="">All Tags</option>
@@ -273,6 +293,12 @@ const newMarkTag = ref('')
 const newMarkNote = ref('')
 let nextMarkId = 1
 
+// Processor visibility toggles (advanced mode)
+const showAsrxInPlayer = ref(props.showAsrx)
+const showOcrInPlayer = ref(props.showOcr)
+const showFaceInPlayer = ref(props.showFace)
+const showPoseInPlayer = ref(props.showPose)
+
 // Convert face traces to marks
 function loadTracesAsMarks() {
   if (!props.allTraces.length) return
@@ -430,10 +456,30 @@ const currentFaceMarks = computed(() => {
 const currentPoseMarks = computed(() => {
   const frame = currentFrame.value
   return marks.value.filter(m => 
-    m.tag === 'pose' && m.startFrame === frame
+    m.tag === 'pose' && m.startFrame === frame && showPoseInPlayer.value
   )
 })
 
+function toggleProcessorMarks(tag: string) {
+  // Marks will be filtered by the computed properties based on toggle state
+}
+
+const visibleTags = computed(() => {
+  const tags = new Set<string>()
+  for (const mark of marks.value) {
+    if (mark.tag === 'asrx' && !showAsrxInPlayer.value) continue
+    if (mark.tag === 'ocr' && !showOcrInPlayer.value) continue
+    if (mark.tag === 'face' && !showFaceInPlayer.value) continue
+    if (mark.tag === 'pose' && !showPoseInPlayer.value) continue
+    if (mark.tag === 'user') tags.add(mark.tag)
+    else if (mark.tag === 'asrx') tags.add(mark.tag)
+    else if (mark.tag === 'ocr') tags.add(mark.tag)
+    else if (mark.tag === 'face') tags.add(mark.tag)
+    else if (mark.tag === 'pose') tags.add(mark.tag)
+  }
+  return Array.from(tags)
+})
+
 function startMark() {
   markingStart.value = currentFrame.value
 }
@@ -1126,6 +1172,8 @@ onUnmounted(() => {
 .ms-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; display: flex; justify-content: center; align-items: flex-start; padding-top: 140px; }
 .ms-modal { background: #fff; border-radius: 20px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); }
 .ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #1a1a1a; position: relative; }
+.ms-modal-video-advanced { max-width: 1200px; max-height: 90vh; }
+.ms-modal-video-advanced .video { max-height: 75vh; }
 .ms-modal-video-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
 .ms-modal-video-title { font-size: 14px; font-weight: 600; color: #e8eaed; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #9aa0a6; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; }
@@ -1326,7 +1374,41 @@ onUnmounted(() => {
 .ms-video-mark-tl-mark.ms-mark-active { opacity: 1; box-shadow: 0 0 6px currentColor; }
 
 /* Mark Controls */
-.ms-video-mark-controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
+.ms-video-mark-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+
+.ms-proc-toggles {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: 12px;
+  padding-left: 12px;
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.ms-proc-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+}
+
+.ms-proc-toggle input {
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+}
+
+.ms-proc-toggle-label {
+  font-size: 11px;
+  font-weight: 500;
+  user-select: none;
+} display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
 .ms-mark-btn { padding: 6px 14px; font-size: 12px; background: #34a853; border: none; border-radius: 6px; color: white; cursor: pointer; }
 .ms-mark-btn:hover { background: #3cb85c; }
 .ms-mark-btn.active { background: #ea4335; }