Canvas Studio — MANAVA  <div id="video-status-bar"> <span style="font-size:12px;color:#6b7280">🎬 Generating:</span> <div class="vsb-progress"> <div class="vsb-progress-inner" id="vsb-bar" style="width:0%"></div> </div> <span id="vsb-label" style="font-size:12px;color:#10b981;white-space:nowrap">0/0</span> <a href="/studio/videos" style="font-size:11px;color:#008542;text-decoration:none;white-space:nowrap">View All →</a> </div>  <div id="montage-modal" style="display:none;position:fixed;inset:0;z-index:2000; background:#00000099;align-items:center;justify-content:center;"> <div style="background:#13131f;border:1px solid #3a3a5e;border-radius:16px; width:480px;max-width:95vw;box-shadow:0 24px 80px #000000cc;padding:24px;"> <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px"> <h3 style="margin:0;font-size:17px;color:#fff">🎞 Choose Montage Style</h3> <button onclick="closeMontageModal()" style="background:none;border:none;color:#555;font-size:22px;cursor:pointer">×</button> </div> <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px"> <div class="montage-style-card" data-style="gaming_hype" onclick="selectMontageStyle('gaming_hype')" style="background:#0c0c18;border:2px solid #9a7fe0;border-radius:10px; padding:14px;cursor:pointer;transition:border-color .15s"> <div style="font-size:22px;margin-bottom:6px">🎮</div> <div class="msc-label" style="font-size:13px;font-weight:700;color:#9a7fe0">Gaming Hype</div> <div style="font-size:10px;color:#444;margin-top:3px;line-height:1.3"> Zoom transitions · Neon glow · Saturated </div> </div> <div class="montage-style-card" data-style="cinematic" onclick="selectMontageStyle('cinematic')" style="background:#0c0c18;border:1px solid #2a2a3e;border-radius:10px; padding:14px;cursor:pointer"> <div style="font-size:22px;margin-bottom:6px">🎬</div> <div class="msc-label" style="font-size:13px;font-weight:700;color:#555">Cinematic</div> <div style="font-size:10px;color:#444;margin-top:3px;line-height:1.3"> Slow dissolves · Speed ramp · Film grade </div> </div> <div class="montage-style-card" data-style="quick_cuts" onclick="selectMontageStyle('quick_cuts')" style="background:#0c0c18;border:1px solid #2a2a3e;border-radius:10px; padding:14px;cursor:pointer"> <div style="font-size:22px;margin-bottom:6px">⚡</div> <div class="msc-label" style="font-size:13px;font-weight:700;color:#555">Quick Cuts</div> <div style="font-size:10px;color:#444;margin-top:3px;line-height:1.3"> TikTok style · Fast cuts · Clean </div> </div> <div class="montage-style-card" data-style="viral_hook" onclick="selectMontageStyle('viral_hook')" style="background:#0c0c18;border:1px solid #2a2a3e;border-radius:10px; padding:14px;cursor:pointer"> <div style="font-size:22px;margin-bottom:6px">🔥</div> <div class="msc-label" style="font-size:13px;font-weight:700;color:#555">Viral Hook</div> <div style="font-size:10px;color:#444;margin-top:3px;line-height:1.3"> Zoom punch · Glitch hook · Max engagement </div> </div> </div> <div style="margin-bottom:14px"> <label style="font-size:11px;color:#555;display:block;margin-bottom:4px"> Text overlay (optional) </label> <input id="montage-overlay-text" type="text" maxlength="80" placeholder="e.g. Register on MANAVA" style="width:100%;background:#0c0c18;border:1px solid #2a2a3e; border-radius:8px;padding:8px 12px;color:#ccc;font-size:12px; box-sizing:border-box;outline:none"> </div> <div id="montage-progress" style="display:none;margin-bottom:14px"> <div style="background:#1e1e2e;border-radius:4px;height:6px;overflow:hidden"> <div id="montage-bar" style="height:100%;background:linear-gradient(90deg,#a78bfa,#7c3aed); width:15%;transition:width .5s ease;border-radius:4px; animation:montage-pulse 1.5s infinite"> </div> </div> <div id="montage-label" style="font-size:11px;color:#666;margin-top:4px;text-align:center"> Montage... </div> </div> <button onclick="startMontage()" id="montage-start-btn" style="width:100%;background:linear-gradient(135deg,#7c3aed,#4c1d95); border:none;color:white;padding:12px;border-radius:10px; font-size:14px;font-weight:700;cursor:pointer"> 🎬 Start Montage </button> </div> </div> <style> @keyframes montage-pulse { 0%,100% { opacity:1 } 50% { opacity:.6 } } </style>  <div id="footage-modal" style="display:none;position:fixed;inset:0;z-index:2000; background:#00000099;align-items:center;justify-content:center;"> <div style="background:#13131f;border:1px solid #3a3a5e;border-radius:16px; width:520px;max-width:95vw;box-shadow:0 24px 80px #000000cc;padding:24px;"> <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px"> <h3 style="margin:0;font-size:17px;color:#fff">📁 My Footage</h3> <button onclick="closeFootageModal()" style="background:none;border:none;color:#555;font-size:22px;cursor:pointer">×</button> </div>  <div style="margin-bottom:14px"> <div style="font-size:11px;color:#555;text-transform:uppercase; letter-spacing:.05em;margin-bottom:8px">Video type</div> <div style="display:flex;gap:8px"> <div id="ft-gameplay-label" onclick="selectFootageType('gameplay')" style="flex:1;background:#1a1a2e;border:2px solid #9a7fe0;border-radius:8px; padding:8px;text-align:center;font-size:12px;color:#9a7fe0;cursor:pointer"> 🎮 Gameplay </div> <div id="ft-talking-label" onclick="selectFootageType('talking_head')" style="flex:1;background:#1a1a2e;border:1px solid #2a2a3e;border-radius:8px; padding:8px;text-align:center;font-size:12px;color:#555;cursor:pointer"> 🎤 Talking Head </div> <div id="ft-broll-label" onclick="selectFootageType('broll')" style="flex:1;background:#1a1a2e;border:1px solid #2a2a3e;border-radius:8px; padding:8px;text-align:center;font-size:12px;color:#555;cursor:pointer"> 📸 B-roll </div> </div> </div>  <div id="footage-drop" style="border:2px dashed #2a2a3e;border-radius:12px;padding:32px; text-align:center;cursor:pointer;transition:border-color .15s;margin-bottom:16px" onclick="document.getElementById('footage-file-input').click()" ondragover="event.preventDefault();this.style.borderColor='#f59e0b'" ondragleave="this.style.borderColor='#2a2a3e'" ondrop="handleFootageDrop(event)"> <div style="font-size:32px;margin-bottom:8px">🎬</div> <div style="font-size:14px;color:#ccc;font-weight:600">Upload your video</div> <div style="font-size:11px;color:#444;margin-top:4px">MP4, MOV, AVI · up to 500 MB</div> <input type="file" id="footage-file-input" accept="video/*" style="display:none" onchange="uploadFootageFile(this.files[0])"> </div>  <div id="footage-progress" style="display:none;margin-bottom:16px"> <div style="background:#1e1e2e;border-radius:4px;height:6px;overflow:hidden"> <div id="footage-bar" style="height:100%;background:linear-gradient(90deg,#f59e0b,#d97706); width:0%;transition:width .3s ease;border-radius:4px"></div> </div> <div id="footage-label" style="font-size:11px;color:#666;margin-top:4px;text-align:center"> Uploading... </div> </div>  <div style="font-size:11px;color:#555;text-transform:uppercase; letter-spacing:.05em;margin-bottom:8px">Previous uploads</div> <div id="footage-list" style="max-height:200px;overflow-y:auto"> <div style="text-align:center;color:#444;padding:16px;font-size:12px">Loading...</div> </div> </div> </div>  <div id="video-import-modal" style="display:none;position:fixed;inset:0; z-index:2000;background:#00000099;align-items:center;justify-content:center"> <div style="background:#13131f;border:1px solid #3a3a5e;border-radius:16px; width:560px;max-width:95vw;max-height:80vh;display:flex;flex-direction:column; box-shadow:0 24px 80px #000000cc;"> <div style="padding:18px 22px 12px;border-bottom:1px solid #1e1e2e; display:flex;justify-content:space-between;align-items:center"> <h3 style="margin:0;font-size:16px;color:#fff">🎬 Import from Videos Library</h3> <button onclick="closeVideoImport()" style="background:none;border:none;color:#555;font-size:22px;cursor:pointer">×</button> </div> <div id="vi-list" style="overflow-y:auto;padding:12px 16px;flex:1"> <div style="text-align:center;color:#555;padding:30px;font-size:13px">Loading...</div> </div> </div> </div>