<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="River Visual 3D Mockup Studio — Design, animate and export 3D mockups in real-time.">
  <link rel="icon" type="image/png" href="/favicon.png">
  <link rel="apple-touch-icon" href="/icon.png">

  <!-- Google Fonts: DM Sans -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">

  <!-- Core Stylesheets -->
  <script type="module" crossorigin src="/assets/index-v2-DUkbrQv3.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-v2-BjLIeSqE.css">
</head>
<body>

  <div id="app">
    
    <!-- ====================================================================
         1. TOP BAR BENTO
         ==================================================================== -->
    <header class="top-bar">
      <div class="top-bar-left">
        <div class="brand-logo" id="btn-home">
          <div class="brand-icon">
            <img src="/icon.png" alt="River Visual Logo" class="brand-icon-img" />
          </div>
          <span>River Visual</span>
        </div>

        <div class="project-meta">
          <input type="text" class="project-title-input" value="iPhone 16 Pro Showcase" spellcheck="false" title="Click to rename project" />
          <div class="save-badge">
            <span class="save-dot"></span>
            <span>Saved</span>
          </div>
        </div>
      </div>

      <div class="top-bar-center">
        <button class="btn btn-ghost btn-icon-sm" id="btn-undo" title="Undo (Ctrl+Z)" data-icon="undo"></button>
        <button class="btn btn-ghost btn-icon-sm" id="btn-redo" title="Redo (Ctrl+Y)" data-icon="redo"></button>
      </div>

      <div class="top-bar-right">
        <!-- Path Tracing Render Settings (Dropdown) -->
        <button
          class="btn btn-ghost btn-icon"
          id="btn-render-settings"
          title="Path Tracing Render Settings"
          aria-expanded="false"
          aria-controls="render-settings-dropdown"
          data-icon="setting-2"
        ></button>

        <div class="render-settings-dropdown" id="render-settings-dropdown" hidden>
          <div class="rsd-header">
            <div>
              <strong>Render Settings</strong>
              <span>Path tracing — applied live to viewport</span>
            </div>
            <button type="button" class="btn btn-secondary btn-sm" id="btn-reset-render-settings">Reset</button>
          </div>

          <div class="rsd-presets">
            <span class="rsd-label">Quality Preset</span>
            <div class="pt-segmented" id="pt-quality-presets" aria-label="Path tracing quality presets">
              <button type="button" data-pt-quality="draft" title="Fast: for editing and camera orbiting">Draft</button>
              <button type="button" data-pt-quality="balanced" title="Balanced: default">Balanced</button>
              <button type="button" data-pt-quality="high" title="Best quality: higher GPU load">High</button>
            </div>
          </div>

          <section class="rsd-section">
            <h3>Global Illumination</h3>
            <label class="rsd-row">
              <span>Mode</span>
              <select data-setting="giMode" class="rsd-select">
                <option value="screen-space">Screen Space (SSGI)</option>
                <option value="hybrid">Hybrid (Fused SSGI + PT)</option>
                <option value="path-traced">Path Traced</option>
                <option value="studio-ambient">Studio Ambient</option>
              </select>
            </label>
            <div id="gi-hybrid-controls">
              <label class="rsd-row">
                <span>Motion SSGI Blend <output data-output="hybridMotionSSGIWeight"></output></span>
                <input data-setting="hybridMotionSSGIWeight" type="range" min="0" max="100" step="5" />
              </label>
              <label class="rsd-row">
                <span>Stable SSGI Blend <output data-output="hybridStableSSGIWeight"></output></span>
                <input data-setting="hybridStableSSGIWeight" type="range" min="0" max="100" step="5" />
              </label>
            </div>
            <div id="gi-ssgi-controls">
              <label class="rsd-row">
                <span>Bounce Intensity <output data-output="ssgiBounceStrength"></output></span>
                <input data-setting="ssgiBounceStrength" type="range" min="0" max="300" step="5" />
              </label>
              <label class="rsd-row">
                <span>Contact AO (GTAO) <output data-output="ssgiGtaoStrength"></output></span>
                <input data-setting="ssgiGtaoStrength" type="range" min="0" max="150" step="5" />
              </label>
              <label class="rsd-row">
                <span>AO Radius <output data-output="ssgiGtaoRadius"></output></span>
                <input data-setting="ssgiGtaoRadius" type="range" min="2" max="30" step="1" />
              </label>
              <label class="rsd-row">
                <span>Ray Steps <output data-output="ssgiSteps"></output></span>
                <input data-setting="ssgiSteps" type="range" min="8" max="48" step="4" />
              </label>
              <label class="rsd-row">
                <span>Max Distance <output data-output="ssgiMaxDistance"></output></span>
                <input data-setting="ssgiMaxDistance" type="range" min="2" max="30" step="1" />
              </label>
              <label class="rsd-row">
                <span>Hit Thickness <output data-output="ssgiThickness"></output></span>
                <input data-setting="ssgiThickness" type="range" min="2" max="50" step="1" />
              </label>
              <label class="rsd-row">
                <span>Temporal Smoothing <output data-output="ssgiTemporalWeight"></output></span>
                <input data-setting="ssgiTemporalWeight" type="range" min="50" max="98" step="1" />
              </label>
            </div>
            <div id="gi-pt-controls">
              <label class="rsd-row">
                <span>Resolution <output data-output="giScale"></output></span>
                <input data-setting="giScale" type="range" min="25" max="100" step="25" />
              </label>
              <label class="rsd-row">
                <span>Max SPP <output data-output="maxGISPP"></output></span>
                <input data-setting="maxGISPP" type="range" min="1" max="512" step="1" />
              </label>
              <label class="rsd-row">
                <span>Blur Strength <output data-output="giBlurStrength"></output></span>
                <input data-setting="giBlurStrength" type="range" min="0" max="100" step="1" />
              </label>
              <label class="rsd-row">
                <span>A-Trous Passes <output data-output="giAtrousIterations"></output></span>
                <input data-setting="giAtrousIterations" type="range" min="1" max="8" step="1" />
              </label>
              <label class="rsd-row">
                <span>Temporal History <output data-output="giMaxHistorySPP"></output></span>
                <input data-setting="giMaxHistorySPP" type="range" min="8" max="256" step="8" />
              </label>
              <label class="rsd-row">
                <span>Firefly Clamp <output data-output="giHardClampLuminance"></output></span>
                <input data-setting="giHardClampLuminance" type="range" min="2" max="32" step="1" />
              </label>
            </div>
          </section>

          <section class="rsd-section">
            <h3>Reflection</h3>
            <label class="rsd-row">
              <span>Mode</span>
              <select data-setting="reflectionMode" class="rsd-select">
                <option value="path-traced">Path Traced</option>
                <option value="screen-space">Screen Space</option>
              </select>
            </label>
            <div id="reflection-pt-controls">
              <label class="rsd-row">
                <span>Resolution <output data-output="reflectionScale"></output></span>
                <input data-setting="reflectionScale" type="range" min="25" max="100" step="25" />
              </label>
              <label class="rsd-row">
                <span>Max SPP <output data-output="maxReflectionSPP"></output></span>
                <input data-setting="maxReflectionSPP" type="range" min="1" max="512" step="1" />
              </label>
              <label class="rsd-row">
                <span>Blur Strength <output data-output="reflectionBlurStrength"></output></span>
                <input data-setting="reflectionBlurStrength" type="range" min="0" max="100" step="1" />
              </label>
              <label class="rsd-row">
                <span>A-Trous Passes <output data-output="reflectionAtrousIterations"></output></span>
                <input data-setting="reflectionAtrousIterations" type="range" min="1" max="8" step="1" />
              </label>
              <label class="rsd-row">
                <span>Temporal History <output data-output="reflectionMaxHistorySPP"></output></span>
                <input data-setting="reflectionMaxHistorySPP" type="range" min="8" max="256" step="8" />
              </label>
              <label class="rsd-row">
                <span>Firefly Clamp <output data-output="reflectionHardClampLuminance"></output></span>
                <input data-setting="reflectionHardClampLuminance" type="range" min="0.5" max="32" step="0.5" />
              </label>
            </div>
            <div id="reflection-ssr-controls" style="display: none;">
              <label class="rsd-row">
                <span>Ray Steps <output data-output="ssrSteps"></output></span>
                <input data-setting="ssrSteps" type="range" min="16" max="96" step="8" />
              </label>
              <label class="rsd-row">
                <span>Hit Thickness <output data-output="ssrThickness"></output></span>
                <input data-setting="ssrThickness" type="range" min="0.02" max="0.50" step="0.02" />
              </label>
              <label class="rsd-row">
                <span>Temporal Smoothing <output data-output="ssrTemporalWeight"></output></span>
                <input data-setting="ssrTemporalWeight" type="range" min="50" max="98" step="2" />
              </label>
              <label class="rsd-row">
                <span>Max Roughness <output data-output="ssrMaxRoughness"></output></span>
                <input data-setting="ssrMaxRoughness" type="range" min="10" max="100" step="5" />
              </label>
            </div>
          </section>

          <section class="rsd-section">
            <h3>Direct Lighting</h3>
            <label class="rsd-row">
              <span>Max SPP <output data-output="maxDirectLightingSPP"></output></span>
              <input data-setting="maxDirectLightingSPP" type="range" min="1" max="64" step="1" />
            </label>
            <label class="rsd-row">
              <span>Blur Strength <output data-output="directLightingBlurStrength"></output></span>
              <input data-setting="directLightingBlurStrength" type="range" min="0" max="100" step="1" />
            </label>
            <label class="rsd-row">
              <span>A-Trous Passes <output data-output="directLightingAtrousIterations"></output></span>
              <input data-setting="directLightingAtrousIterations" type="range" min="1" max="8" step="1" />
            </label>
            <label class="rsd-row">
              <span>Temporal History <output data-output="directLightingMaxHistorySPP"></output></span>
              <input data-setting="directLightingMaxHistorySPP" type="range" min="1" max="128" step="1" />
            </label>
            <label class="rsd-row">
              <span>Firefly Clamp <output data-output="directLightingHardClampLuminance"></output></span>
              <input data-setting="directLightingHardClampLuminance" type="range" min="1" max="32" step="1" />
            </label>
          </section>
        </div>

        <!-- Theme Switcher (Dark Grey Ash / Light) -->
        <button class="btn btn-ghost btn-icon" id="btn-theme-toggle" title="Toggle Dark Ash / Light Mode" data-icon="moon"></button>
        
        <div class="top-bar-divider"></div>

        <!-- Upload 3D Model (.rvh / Admin GLB) Button -->
        <button class="btn btn-secondary" id="btn-top-bar-upload-model" title="Upload 3D Asset (.rvh)">
          <span class="isax" data-icon="box"></span>
          <span>Upload 3D</span>
        </button>
        <input type="file" id="top-bar-model-file-input" accept=".glb,.gltf,.rvh" style="display: none;" />

        <!-- Save / Export .RVH Asset Dropdown (Admin Only) -->
        <div class="dropdown-wrapper" id="save-rvh-dropdown-wrapper" style="display: none;">
          <button class="btn btn-secondary dropdown-trigger" id="btn-top-bar-save-rvh" title="Save / Export 3D Asset or Complete Scene (.rvh)" aria-expanded="false" aria-haspopup="true">
            <span class="isax" data-icon="cube"></span>
            <span>Save .RVH</span>
            <span class="isax isax-chevron" data-icon="arrow-down"></span>
          </button>
          <div class="dropdown-menu save-rvh-dropdown-menu" id="save-rvh-menu" hidden>
            <button type="button" class="dropdown-item" id="btn-save-rvh-object">
              <div class="dropdown-item-icon">
                <span class="isax" data-icon="box"></span>
              </div>
              <div class="dropdown-item-content">
                <span class="dropdown-item-title">Save as 3D Object</span>
                <span class="dropdown-item-desc">3D Model & material settings only</span>
              </div>
            </button>
            <div class="dropdown-divider"></div>
            <button type="button" class="dropdown-item" id="btn-save-rvh-scene">
              <div class="dropdown-item-icon">
                <span class="isax" data-icon="layer"></span>
              </div>
              <div class="dropdown-item-content">
                <span class="dropdown-item-title">Save as Scene</span>
                <span class="dropdown-item-desc">Complete scene, lighting & animation</span>
              </div>
            </button>
            <div class="dropdown-divider"></div>
            <button type="button" class="dropdown-item" id="btn-save-rvh-cloud">
              <div class="dropdown-item-icon" style="color: var(--color-accent);">
                <span class="isax" data-icon="cloud-upload"></span>
              </div>
              <div class="dropdown-item-content">
                <div style="display: flex; align-items: center; justify-content: space-between;">
                  <span class="dropdown-item-title" style="color: var(--color-accent); font-weight: 600;">Publish to Cloud</span>
                  <span class="tier-badge tier-pro" style="font-size: 8.5px; padding: 1px 4px;">R2 + D1</span>
                </div>
                <span class="dropdown-item-desc">Save directly to Cloudflare Catalog</span>
              </div>
            </button>
          </div>
        </div>

        <!-- Render / Export Button -->
        <button class="btn btn-primary" id="btn-top-bar-export">
          <span class="isax" data-icon="document-download"></span>
          <span>Export Video</span>
        </button>

        <!-- User Profile & D1 Auth Session -->
        <div class="dropdown-wrapper" id="user-account-dropdown-wrapper">
          <button class="btn btn-ghost user-profile-btn" id="btn-user-profile" title="Account & RBAC Tier" aria-expanded="false" aria-haspopup="true">
            <div class="user-avatar-pill" id="topbar-user-avatar">GU</div>
            <span id="topbar-user-name" style="font-size: 11.5px; font-weight: 500;">Guest</span>
            <span class="tier-badge tier-free" id="topbar-tier-badge">FREE</span>
          </button>
          <div class="dropdown-menu user-account-dropdown-menu" id="user-account-menu" hidden>
            <div class="user-profile-header">
              <div class="user-avatar-pill" id="menu-user-avatar" style="width: 32px; height: 32px; font-size: 12px;">GU</div>
              <div class="user-profile-info">
                <span class="user-profile-name" id="menu-user-name">Guest User</span>
                <span class="user-profile-email" id="menu-user-email">Koneksi D1 Offline</span>
              </div>
            </div>
            
            <div class="user-menu-actions" style="display: flex; flex-direction: column; gap: 6px; margin-top: 8px;">
              <!-- Sign In Button (Shown when not authenticated) -->
              <button type="button" class="btn btn-primary btn-sm" id="btn-menu-signin" style="width: 100%; justify-content: center; gap: 6px; font-size: 11.5px;">
                <span class="isax isax-sm" data-icon="login"></span>
                <span>Sign In to Account</span>
              </button>

              <!-- Admin Console Link (Shown only for authenticated admin) -->
              <a href="http://localhost:5175" target="_blank" class="btn btn-ghost btn-sm" id="btn-menu-admin-link" style="width: 100%; justify-content: flex-start; gap: 8px; font-size: 11px; padding: 6px 8px; display: none;">
                <span class="isax isax-sm" data-icon="setting-2"></span>
                <span>Open Admin Console</span>
              </a>

              <!-- Sign Out Button (Shown when authenticated) -->
              <button type="button" class="btn btn-ghost btn-sm" id="btn-menu-signout" style="width: 100%; justify-content: flex-start; gap: 8px; font-size: 11px; padding: 6px 8px; color: var(--color-danger, #ef4444); display: none;">
                <span class="isax isax-sm" data-icon="logout"></span>
                <span>Sign Out</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- ====================================================================
         2. TOP BENTO: 3D PREVIEW VIEWPORT
         ==================================================================== -->
    <section class="bento-card viewport-panel" id="viewport-panel">
      
      <!-- Three.js Canvas Root -->
      <div id="viewport-canvas-container"></div>

      <!-- Empty State Viewport Placeholder (Zero Initial Load) -->
      <div class="viewport-empty-state" id="viewport-empty-state">
        <div class="empty-state-card">
          <div class="empty-state-icon">
            <span class="isax" data-icon="box-add"></span>
          </div>
          <h3>Ready for 3D Creation</h3>
          <p>Choose an asset from the <strong>Gallery Catalog</strong> or drop your <code>.rvh</code> file anywhere.</p>
          <div class="empty-state-actions">
            <button class="btn btn-primary btn-sm" onclick="document.getElementById('top-bar-model-file-input').click()">
              <span class="isax" data-icon="document-upload"></span>
              <span>Upload 3D Asset</span>
            </button>
          </div>
        </div>
      </div>

      <!-- Floating Viewport Controls (Top Left) -->
      <div class="viewport-top-controls">
        <div class="floating-pill">
          <span class="isax isax-sm" data-icon="camera"></span>
          <select id="select-camera-preset" class="select-input" style="padding: 2px 6px; font-size: 11px; width: auto; background: transparent; border: none;">
            <option value="perspective">Perspective</option>
            <option value="front">Front View</option>
            <option value="top">Top View</option>
            <option value="iso">Isometric</option>
            <option value="side">Side View</option>
          </select>
        </div>

        <button class="btn btn-ghost btn-icon-sm floating-pill" id="btn-toggle-grid" title="Toggle Ground Grid" data-icon="grid-1"></button>

        <div class="floating-pill" id="viewport-ratio-badge" title="Viewport Aspect Ratio">
          <span class="isax isax-sm" data-icon="monitor"></span>
          <span id="viewport-ratio-text" style="font-size: 11px; font-weight: 500;">16:9</span>
        </div>
      </div>

      <!-- Floating Viewport Controls (Top Right) -->
      <div class="viewport-top-right-controls">
        <button class="btn btn-ghost btn-icon-sm floating-pill" id="btn-reset-camera" title="Reset View" data-icon="maximize-4"></button>
      </div>

      <!-- Drop Overlay Active Indicator (Drag & Drop onto Screen Material or 3D Scene) -->
      <div class="viewport-drop-overlay" id="viewport-drop-overlay">
        <div class="drop-overlay-content">
          <div class="screen-dropzone-icon" id="viewport-drop-overlay-icon">
            <span class="isax" data-icon="box-add"></span>
          </div>
          <h4 id="viewport-drop-overlay-title">Drop 3D Model or Media</h4>
          <p id="viewport-drop-overlay-desc">Drop 3D model into scene or media onto <strong>Screen</strong> material</p>
        </div>
      </div>

      <!-- Viewport Model Loading Overlay -->
      <div class="viewport-loading-overlay" id="viewport-loading-overlay">
        <div class="viewport-loading-spinner"></div>
        <div class="viewport-loading-text" id="viewport-loading-text">Loading 3D Model...</div>
        <div class="viewport-loading-bar-wrap">
          <div class="viewport-loading-bar" id="viewport-loading-bar"></div>
        </div>
      </div>

    </section>

    <!-- ====================================================================
         3. BOTTOM BENTO: SWIPEABLE CARDS DOCK (MOBILE) / WORKSPACE PANELS (DESKTOP)
         ==================================================================== -->
    <div class="app-cards-container" id="app-cards-container">
      
      <!-- Mobile Card Switcher Navigation (Pill Tabs) -->
      <nav class="mobile-card-nav" id="mobile-card-nav" aria-label="Mobile Cards Navigation">
        <button class="mobile-card-nav-btn active" data-target-card="timeline" title="Timeline">
          <span class="isax isax-sm" data-icon="video-play"></span>
          <span>Timeline</span>
        </button>
        <button class="mobile-card-nav-btn" data-target-card="editor" title="Editor">
          <span class="isax isax-sm" data-icon="brush-2"></span>
          <span>Editor</span>
        </button>
        <button class="mobile-card-nav-btn" data-target-card="gallery" title="Gallery">
          <span class="isax isax-sm" data-icon="cube"></span>
          <span>Gallery</span>
        </button>
      </nav>

      <!-- Swipeable Cards Deck -->
      <div class="cards-deck-wrapper" id="cards-deck-wrapper">

        <!-- CARD 1: VIDEO TIMELINE -->
        <footer class="bento-card card-item timeline-container" id="card-timeline" data-card="timeline">
          
          <!-- Tier 1 Top: Timeline Control Bar -->
          <div class="timeline-top-bar">
            
            <!-- Playback Buttons -->
            <div class="timeline-playback-controls">
              <button class="btn btn-ghost btn-icon-sm" id="btn-timeline-prev" title="Step Back 1 Frame" data-icon="backward-10-seconds"></button>
              <button class="btn btn-primary btn-icon-sm" id="btn-timeline-play" title="Play / Pause (Space)" data-icon="video-play"></button>
              <button class="btn btn-ghost btn-icon-sm" id="btn-timeline-next" title="Step Forward 1 Frame" data-icon="forward-10-seconds"></button>
              <button class="btn btn-ghost btn-icon-sm active" id="btn-timeline-loop" title="Toggle Loop" data-icon="repeat"></button>
            </div>

            <!-- Timecode Display & Duration Control -->
            <div style="display: flex; align-items: center; gap: 8px;">
              <div class="timeline-timecode-box">
                <span id="timeline-timecode-current">00:00:00</span>
                <span class="separator">/</span>
                <span class="total-time" id="timeline-timecode-total">00:05:00</span>
              </div>

              <!-- Duration Input -->
              <div class="timeline-duration-box" style="display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.03); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border-subtle);" title="Set Total Video Duration (0.5s - 60s)">
                <span class="isax isax-sm" data-icon="clock" style="color: var(--text-secondary); font-size: 13px;"></span>
                <span style="font-size: 11px; color: var(--text-secondary); font-weight: 500;">Duration:</span>
                <input type="number" id="timeline-duration-input" min="0.5" max="60" step="0.5" value="5.0" style="width: 48px; height: 22px; padding: 0 4px; font-size: 11.5px; font-family: 'DM Mono', monospace; font-weight: 600; text-align: center; border-radius: 4px; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--color-accent);" />
                <span style="font-size: 10.5px; color: var(--text-muted); font-weight: 500;">s</span>
              </div>
            </div>

            <!-- Track Action Buttons -->
            <div style="display: flex; align-items: center; gap: 6px;">
              <button class="btn btn-ghost btn-icon-sm" id="btn-delete-keyframe" title="Delete Selected Keyframe" data-icon="trash"></button>
              <span style="font-size: 11px; font-weight: 600; color: var(--text-muted);">30 FPS</span>
            </div>

          </div>

          <!-- Timeline Multi-Layer Body Area -->
          <div class="timeline-body-wrap">
            
            <!-- Left: Track Headers -->
            <div class="timeline-track-headers" id="timeline-track-headers">
              <div class="timeline-ruler-header-spacer">Tracks</div>
              
              <!-- Master Header: All Keyframes (Top Summary) -->
              <div class="track-header-item master-track-header" id="master-track-header">
                <div class="master-header-left">
                  <button class="btn-toggle-layers active" id="btn-timeline-toggle-layers" title="Toggle Property Sub-Layers" data-icon="arrow-down-1">
                    <span class="isax isax-sm" data-icon="arrow-down-1"></span>
                  </button>
                  <span class="isax isax-sm" data-icon="diamond"></span>
                  <span>All Keyframes</span>
                </div>
                <span class="active-layers-badge" id="active-layers-badge">0 Layers</span>
              </div>

              <!-- Dynamic Sub-track Headers Container (Populated dynamically when tracks have keyframes) -->
              <div class="timeline-subtrack-headers" id="timeline-subtrack-headers"></div>
            </div>

            <!-- Right: Scrollable Tracks & Ruler Area -->
            <div class="timeline-scroll-area" id="timeline-scroll-area">
              <div class="timeline-view">
                
                <!-- Time Ruler Bar -->
                <div class="timeline-ruler-track" id="timeline-ruler-track">
                  <canvas id="timeline-ruler-canvas" class="ruler-ticks-canvas"></canvas>
                  
                  <!-- Playhead Needle & Draggable Cursor -->
                  <div class="timeline-playhead-cursor" id="timeline-playhead-cursor">
                    <div class="playhead-head"></div>
                  </div>
                </div>

                <!-- Master Summary Keyframe Lane -->
                <div class="timeline-tier-keyframes" id="timeline-tier-keyframes">
                  <div class="keyframe-track-lane master-track-lane" id="track-lane-keyframes"></div>
                  
                  <!-- Dynamic Sub-track Lanes Container (Populated dynamically) -->
                  <div class="timeline-subtrack-lanes" id="timeline-subtrack-lanes"></div>
                </div>

              </div>
            </div>

          </div>

        </footer>

        <!-- CARD 2: TAB EDITOR -->
        <aside class="bento-card card-item editor-panel" id="card-editor" data-card="editor">
          
          <!-- Editor Tabs Navigation -->
          <nav class="editor-tabs-nav">
            <button class="editor-tab-btn active" data-tab="object" title="Mesh & Material">
              <span class="isax isax-sm" data-icon="brush-2"></span>
              <span>Object</span>
            </button>
            <button class="editor-tab-btn" data-tab="transform" title="Transform & Keyframing">
              <span class="isax isax-sm" data-icon="direct-right"></span>
              <span>Transform</span>
            </button>
            <button class="editor-tab-btn" data-tab="world" title="Environment & Lighting">
              <span class="isax isax-sm" data-icon="sun-1"></span>
              <span>World</span>
            </button>
            <button class="editor-tab-btn" data-tab="export" title="Render Settings">
              <span class="isax isax-sm" data-icon="document-download"></span>
              <span>Export</span>
            </button>
          </nav>

          <!-- Editor Content Body -->
          <div class="panel-content">
            
            <!-- TAB 1: OBJECT & MATERIAL -->
            <div class="tab-pane active" id="tab-pane-object">
              
              <!-- Selected Mesh Header -->
              <div class="editor-section">
                <div class="editor-section-header">
                  <div class="editor-section-title">
                    <span class="isax isax-sm" data-icon="cube"></span>
                    <span>Active Material</span>
                  </div>
                </div>
                <div class="form-row">
                  <span class="form-label">Material Name</span>
                  <span style="color: var(--color-accent);" id="selected-material-name">Screen</span>
                </div>

                <!-- Material Type Selector -->
                <div class="form-group" style="margin-top: 4px;">
                  <span class="form-label">Material Type</span>
                  <div class="segmented-control" id="material-type-segmented">
                    <button type="button" class="segmented-btn active" data-type="standard" id="mat-type-standard-btn">
                      <span class="isax isax-sm" data-icon="box"></span>
                      <span>Standard</span>
                    </button>
                    <button type="button" class="segmented-btn" data-type="glass" id="mat-type-glass-btn">
                      <span class="isax isax-sm" data-icon="glass"></span>
                      <span>Glass</span>
                    </button>
                    <button type="button" class="segmented-btn" data-type="emissive" id="mat-type-emissive-btn">
                      <span class="isax isax-sm" data-icon="sun-1"></span>
                      <span>Emissive</span>
                    </button>
                  </div>
                </div>
              </div>

              <!-- Material Color Customizer -->
              <div class="editor-section">
                <div class="editor-section-header">
                  <div class="editor-section-title">
                    <span class="isax isax-sm" data-icon="colorfilter"></span>
                    <span>Mesh Color</span>
                  </div>
                </div>

                <div class="form-row">
                  <div class="color-picker-wrap">
                    <div class="color-preview-box" id="material-color-preview" style="background-color: #27272a;">
                      <input type="color" id="material-color-input" value="#27272a" />
                    </div>
                    <input type="text" id="material-color-hex" class="input-text" value="#27272A" style="width: 90px; text-transform: uppercase;" />
                  </div>
                </div>

                <!-- Color Preset Swatches -->
                <div class="form-group">
                  <span class="form-label">Color Presets</span>
                  <div class="color-swatches-preset">
                    <div class="color-swatch-dot active" data-color="#27272a" style="background-color: #27272a;" title="Dark Titanium"></div>
                    <div class="color-swatch-dot" data-color="#606068" style="background-color: #606068;" title="Natural Titanium"></div>
                    <div class="color-swatch-dot" data-color="#f2f2f5" style="background-color: #f2f2f5;" title="White Titanium"></div>
                    <div class="color-swatch-dot" data-color="#0079fe" style="background-color: #0079fe;" title="River Blue"></div>
                    <div class="color-swatch-dot" data-color="#d4af37" style="background-color: #d4af37;" title="Desert Gold"></div>
                    <div class="color-swatch-dot" data-color="#18181b" style="background-color: #18181b;" title="Deep Charcoal"></div>
                  </div>
                </div>

                <!-- Roughness & Metalness -->
                <div class="form-group">
                  <div class="form-row">
                    <span class="form-label">Roughness</span>
                    <input type="number" id="mat-roughness-num" class="slider-number-input" min="0" max="1" step="0.01" value="0.25" />
                  </div>
                  <input type="range" id="mat-roughness-slider" class="slider-input" min="0" max="1" step="0.01" value="0.25" />
                </div>

                <div class="form-group" id="mat-metalness-group">
                  <div class="form-row">
                    <span class="form-label">Metalness</span>
                    <input type="number" id="mat-metalness-num" class="slider-number-input" min="0" max="1" step="0.01" value="0.85" />
                  </div>
                  <input type="range" id="mat-metalness-slider" class="slider-input" min="0" max="1" step="0.01" value="0.85" />
                </div>

                <div class="form-group" id="mat-normal-scale-group">
                  <div class="form-row">
                    <span class="form-label">Normal Map Strength</span>
                    <input type="number" id="mat-normal-scale-num" class="slider-number-input" min="0" max="10" step="0.05" value="1.00" />
                  </div>
                  <input type="range" id="mat-normal-scale-slider" class="slider-input" min="0" max="10" step="0.05" value="1.00" />
                </div>

                <!-- Glass Specific Properties -->
                <div id="glass-properties-section" style="display: none; border-top: 1px solid var(--border-subtle); padding-top: 10px; margin-top: 4px; flex-direction: column; gap: 10px;">
                  <!-- Transmission Slider -->
                  <div class="form-group">
                    <div class="form-row">
                      <span class="form-label">Transmission (Transparency)</span>
                      <input type="number" id="mat-transmission-num" class="slider-number-input" min="0" max="1" step="0.01" value="1.00" />
                    </div>
                    <input type="range" id="mat-transmission-slider" class="slider-input" min="0" max="1" step="0.01" value="1.00" />
                  </div>

                  <!-- IOR Slider -->
                  <div class="form-group">
                    <div class="form-row">
                      <span class="form-label">Refraction Index (IOR)</span>
                      <input type="number" id="mat-ior-num" class="slider-number-input" min="1.0" max="2.5" step="0.01" value="1.50" />
                    </div>
                    <input type="range" id="mat-ior-slider" class="slider-input" min="1.0" max="2.5" step="0.01" value="1.50" />
                  </div>

                  <!-- Glass Presets -->
                  <div class="form-group">
                    <span class="form-label">Glass Presets</span>
                    <div style="display: flex; gap: 5px; flex-wrap: wrap;">
                      <button type="button" class="btn btn-ghost glass-preset-btn" data-preset="clear" style="padding: 4px 8px; font-size: 11px; flex: 1; min-width: 60px;">Clear</button>
                      <button type="button" class="btn btn-ghost glass-preset-btn" data-preset="frosted" style="padding: 4px 8px; font-size: 11px; flex: 1; min-width: 60px;">Frosted</button>
                      <button type="button" class="btn btn-ghost glass-preset-btn" data-preset="smoked" style="padding: 4px 8px; font-size: 11px; flex: 1; min-width: 60px;">Smoked</button>
                      <button type="button" class="btn btn-ghost glass-preset-btn" data-preset="blue" style="padding: 4px 8px; font-size: 11px; flex: 1; min-width: 60px;">Blue</button>
                    </div>
                  </div>
                </div>

                <!-- Iridescent / Thin-Film Specific Properties -->
                <div id="iridescent-properties-section" style="display: none; border-top: 1px solid var(--border-subtle); padding-top: 10px; margin-top: 4px; flex-direction: column; gap: 10px;">
                  <!-- Iridescence Strength Slider -->
                  <div class="form-group">
                    <div class="form-row">
                      <span class="form-label">Iridescence Strength</span>
                      <input type="number" id="mat-iridescence-num" class="slider-number-input" min="0" max="1" step="0.01" value="1.00" />
                    </div>
                    <input type="range" id="mat-iridescence-slider" class="slider-input" min="0" max="1" step="0.01" value="1.00" />
                  </div>

                  <!-- Thin-Film Thickness Slider -->
                  <div class="form-group">
                    <div class="form-row">
                      <span class="form-label">Film Thickness</span>
                      <div style="display: flex; align-items: center; gap: 3px;">
                        <input type="number" id="mat-iridescence-thickness-num" class="slider-number-input" min="100" max="1000" step="5" value="400" />
                        <span class="slider-number-unit">nm</span>
                      </div>
                    </div>
                    <input type="range" id="mat-iridescence-thickness-slider" class="slider-input" min="100" max="1000" step="5" value="400" />
                  </div>

                  <!-- Thin-Film IOR Slider -->
                  <div class="form-group">
                    <div class="form-row">
                      <span class="form-label">Film Refraction (IOR)</span>
                      <input type="number" id="mat-iridescence-ior-num" class="slider-number-input" min="1.1" max="2.5" step="0.01" value="1.30" />
                    </div>
                    <input type="range" id="mat-iridescence-ior-slider" class="slider-input" min="1.1" max="2.5" step="0.01" value="1.30" />
                  </div>

                  <!-- Iridescent Presets -->
                  <div class="form-group">
                    <span class="form-label">Iridescent Presets</span>
                    <div style="display: flex; gap: 5px; flex-wrap: wrap;">
                      <button type="button" class="btn btn-ghost iridescent-preset-btn" data-preset="off" style="padding: 4px 8px; font-size: 11px; flex: 1; min-width: 50px;">Off</button>
                      <button type="button" class="btn btn-ghost iridescent-preset-btn" data-preset="oilslick" style="padding: 4px 8px; font-size: 11px; flex: 1; min-width: 60px;">Oil Slick</button>
                      <button type="button" class="btn btn-ghost iridescent-preset-btn" data-preset="titanium" style="padding: 4px 8px; font-size: 11px; flex: 1; min-width: 60px;">Titanium</button>
                      <button type="button" class="btn btn-ghost iridescent-preset-btn" data-preset="bubble" style="padding: 4px 8px; font-size: 11px; flex: 1; min-width: 60px;">Bubble</button>
                      <button type="button" class="btn btn-ghost iridescent-preset-btn" data-preset="dichroic" style="padding: 4px 8px; font-size: 11px; flex: 1; min-width: 60px;">Dichroic</button>
                      <button type="button" class="btn btn-ghost iridescent-preset-btn" data-preset="pearl" style="padding: 4px 8px; font-size: 11px; flex: 1; min-width: 55px;">Pearl</button>
                    </div>
                  </div>
                </div>

                <!-- Emissive Specific Properties -->
                <div id="emissive-properties-section" style="display: none; border-top: 1px solid var(--border-subtle); padding-top: 10px; margin-top: 4px; flex-direction: column; gap: 10px;">
                  <!-- Emissive Intensity Slider -->
                  <div class="form-group">
                    <div class="form-row">
                      <span class="form-label">Emissive Intensity (Glow)</span>
                      <input type="number" id="mat-emissive-num" class="slider-number-input" min="0" max="5" step="0.05" value="1.00" />
                    </div>
                    <input type="range" id="mat-emissive-slider" class="slider-input" min="0" max="5" step="0.05" value="1.00" />
                  </div>
                </div>
              </div>

              <!-- Screen Texture Dropzone (Only for Screen / Edit Material) -->
              <div class="editor-section" id="screen-dropzone-section">
                <div class="editor-section-header">
                  <div class="editor-section-title">
                    <span class="isax isax-sm" data-icon="image"></span>
                    <span>Screen Texture Media</span>
                  </div>
                  <span class="material-badge">Video / Image</span>
                </div>

                <input type="file" id="screen-file-input" accept="image/*,video/*" style="display: none;" />

                <div class="screen-dropzone" id="screen-dropzone">
                  <div id="screen-dropzone-prompt" style="display: flex; flex-direction: column; align-items: center; gap: 6px;">
                    <div class="screen-dropzone-icon">
                      <span class="isax" data-icon="image"></span>
                    </div>
                    <span class="screen-dropzone-title">Click or Drag & Drop Media</span>
                    <span class="screen-dropzone-desc">MP4, WebM, PNG, JPG supported</span>
                  </div>

                  <div class="screen-media-preview-container" id="screen-media-preview-container">
                    <div class="screen-media-preview-box" id="screen-media-preview-box"></div>
                    <span style="font-size: 11px; color: var(--text-muted);">Click to change media</span>
                  </div>
                </div>

                <!-- Screen Texture Orientation & Crop Tools -->
                <div class="screen-texture-tools" style="display: flex; flex-direction: column; gap: 6px; margin-top: 8px;">
                  <button class="btn btn-primary btn-sm" id="btn-edit-virtual-canvas" type="button" style="width: 100%; font-size: 11.5px; padding: 7px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;" title="Adjust Crop, Fit, Pan & Zoom">
                    <span class="isax isax-sm" data-icon="crop"></span>
                    <span>Crop & Transform Media</span>
                  </button>
                  <div style="display: flex; gap: 8px;">
                    <button class="btn btn-secondary btn-sm" id="btn-flip-screen-x" type="button" style="flex: 1; font-size: 11px; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;" title="Flip Texture Horizontally">
                      <span>⇄ Flip Horizontal</span>
                    </button>
                    <button class="btn btn-secondary btn-sm" id="btn-flip-screen-y" type="button" style="flex: 1; font-size: 11px; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;" title="Flip Texture Vertically">
                      <span>⇅ Flip Vertical</span>
                    </button>
                  </div>
                </div>
              </div>

            </div>

            <!-- TAB 2: TRANSFORM & KEYFRAMING -->
            <div class="tab-pane" id="tab-pane-transform">
              
              <!-- Transform Mode Control (Global vs Object) -->
              <div class="editor-section" style="padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border-subtle);">
                <div class="form-row" style="margin-bottom: 8px;">
                  <span class="form-label" style="font-weight: 600; color: var(--text-primary);">Transform Mode</span>
                  <span class="material-badge" id="transform-target-badge" style="font-size: 10px;">Scene Root</span>
                </div>
                <div class="segmented-control" id="transform-mode-segmented">
                  <button type="button" class="segmented-btn active" data-transform-space="global" id="btn-tf-mode-global" title="Control entire scene (World Space)">
                    <span class="isax isax-sm" data-icon="global"></span>
                    <span>Global</span>
                  </button>
                  <button type="button" class="segmented-btn" data-transform-space="object" id="btn-tf-mode-object" title="Control selected 3D mesh relative to parent">
                    <span class="isax isax-sm" data-icon="cube"></span>
                    <span>Object</span>
                  </button>
                </div>
                <div id="transform-object-hint" style="font-size: 10.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.3;">
                  Transforming: <strong>Entire Scene Root</strong> (all models).
                </div>
              </div>

              <!-- Location (X, Y, Z) -->
              <div class="editor-section">
                <div class="editor-section-header">
                  <div class="editor-section-title">
                    <span class="isax isax-sm" data-icon="direct-right"></span>
                    <span>Location (Position)</span>
                  </div>
                  <button class="btn-keyframe-toggle" id="btn-kf-position" title="Record Position Keyframe ◆">
                    <span data-icon="diamond"></span>
                  </button>
                </div>

                <div class="vector-inputs">
                  <div class="vector-field">
                    <span class="vector-tag tag-x">X</span>
                    <input type="number" id="transform-pos-x" step="0.05" value="0.00" />
                  </div>
                  <div class="vector-field">
                    <span class="vector-tag tag-y">Y</span>
                    <input type="number" id="transform-pos-y" step="0.05" value="0.00" />
                  </div>
                  <div class="vector-field">
                    <span class="vector-tag tag-z">Z</span>
                    <input type="number" id="transform-pos-z" step="0.05" value="0.00" />
                  </div>
                </div>
              </div>

              <!-- Rotation (X, Y, Z) -->
              <div class="editor-section">
                <div class="editor-section-header">
                  <div class="editor-section-title">
                    <span class="isax isax-sm" data-icon="rotate-right"></span>
                    <span>Rotation (Degrees)</span>
                  </div>
                  <button class="btn-keyframe-toggle" id="btn-kf-rotation" title="Record Rotation Keyframe ◆">
                    <span data-icon="diamond"></span>
                  </button>
                </div>

                <!-- Rot X -->
                <div class="form-group">
                  <div class="form-row">
                    <span class="form-label"><span class="vector-tag tag-x" style="border:none; border-radius: 2px;">X</span> Pitch</span>
                    <div style="display: flex; align-items: center; gap: 3px;">
                      <input type="number" id="transform-rot-x" class="slider-number-input" min="-180" max="180" step="1" value="0" />
                      <span class="slider-number-unit">°</span>
                    </div>
                  </div>
                  <input type="range" id="slider-rot-x" class="slider-input" min="-180" max="180" step="1" value="0" />
                </div>

                <!-- Rot Y -->
                <div class="form-group">
                  <div class="form-row">
                    <span class="form-label"><span class="vector-tag tag-y" style="border:none; border-radius: 2px;">Y</span> Yaw</span>
                    <div style="display: flex; align-items: center; gap: 3px;">
                      <input type="number" id="transform-rot-y" class="slider-number-input" min="-180" max="180" step="1" value="0" />
                      <span class="slider-number-unit">°</span>
                    </div>
                  </div>
                  <input type="range" id="slider-rot-y" class="slider-input" min="-180" max="180" step="1" value="0" />
                </div>

                <!-- Rot Z -->
                <div class="form-group">
                  <div class="form-row">
                    <span class="form-label"><span class="vector-tag tag-z" style="border:none; border-radius: 2px;">Z</span> Roll</span>
                    <div style="display: flex; align-items: center; gap: 3px;">
                      <input type="number" id="transform-rot-z" class="slider-number-input" min="-180" max="180" step="1" value="0" />
                      <span class="slider-number-unit">°</span>
                    </div>
                  </div>
                  <input type="range" id="slider-rot-z" class="slider-input" min="-180" max="180" step="1" value="0" />
                </div>
              </div>

              <!-- Screen Opening Angle (MacScreenHandle Hinge) -->
              <div class="editor-section" id="section-screen-angle">
                <div class="editor-section-header">
                  <div class="editor-section-title">
                    <span class="isax isax-sm" data-icon="monitor"></span>
                    <span>Screen Angle (Hinge)</span>
                  </div>
                  <button class="btn-keyframe-toggle" id="btn-kf-screen-angle" title="Record Screen Angle Keyframe ◆">
                    <span data-icon="diamond"></span>
                  </button>
                </div>

                <div class="form-group">
                  <div class="form-row">
                    <span class="form-label">Opening Angle</span>
                    <div style="display: flex; align-items: center; gap: 3px;">
                      <input type="number" id="transform-screen-angle" class="slider-number-input" min="0" max="180" step="1" value="0" />
                      <span class="slider-number-unit">°</span>
                    </div>
                  </div>
                  <input type="range" id="slider-screen-angle" class="slider-input" min="0" max="180" step="1" value="0" />
                </div>
              </div>

              <!-- Camera Framing & Keyframing -->
              <div class="editor-section">
                <div class="editor-section-header">
                  <div class="editor-section-title">
                    <span class="isax isax-sm" data-icon="camera"></span>
                    <span>Camera Framing</span>
                  </div>
                  <button class="btn-keyframe-toggle" id="btn-kf-camera" title="Record Camera Keyframe ◆">
                    <span data-icon="diamond"></span>
                  </button>
                </div>

                <!-- Camera Distance / Zoom -->
                <div class="form-group">
                  <div class="form-row">
                    <span class="form-label">Distance (Zoom)</span>
                    <div style="display: flex; align-items: center; gap: 3px;">
                      <input type="number" id="slider-cam-distance-num" class="slider-number-input" min="0.5" max="8.0" step="0.05" value="2.20" />
                      <span class="slider-number-unit">m</span>
                    </div>
                  </div>
                  <input type="range" id="slider-cam-distance" class="slider-input" min="0.5" max="8.0" step="0.05" value="2.2" />
                </div>

                <!-- Camera FOV -->
                <div class="form-group">
                  <div class="form-row">
                    <span class="form-label">Field of View (FOV)</span>
                    <div style="display: flex; align-items: center; gap: 3px;">
                      <input type="number" id="slider-cam-fov-num" class="slider-number-input" min="20" max="90" step="1" value="50" />
                      <span class="slider-number-unit">°</span>
                    </div>
                  </div>
                  <input type="range" id="slider-cam-fov" class="slider-input" min="20" max="90" step="1" value="50" />
                </div>

                <!-- Camera Azimuth / Orbit H -->
                <div class="form-group">
                  <div class="form-row">
                    <span class="form-label">Orbit Angle (Azimuth)</span>
                    <div style="display: flex; align-items: center; gap: 3px;">
                      <input type="number" id="slider-cam-azimuth-num" class="slider-number-input" min="-180" max="180" step="1" value="0" />
                      <span class="slider-number-unit">°</span>
                    </div>
                  </div>
                  <input type="range" id="slider-cam-azimuth" class="slider-input" min="-180" max="180" step="1" value="0" />
                </div>

                <!-- Camera Elevation / Orbit V -->
                <div class="form-group">
                  <div class="form-row">
                    <span class="form-label">Elevation (Height Angle)</span>
                    <div style="display: flex; align-items: center; gap: 3px;">
                      <input type="number" id="slider-cam-elevation-num" class="slider-number-input" min="-80" max="80" step="1" value="15" />
                      <span class="slider-number-unit">°</span>
                    </div>
                  </div>
                  <input type="range" id="slider-cam-elevation" class="slider-input" min="-80" max="80" step="1" value="15" />
                </div>

                <!-- Target Height -->
                <div class="form-group">
                  <div class="form-row">
                    <span class="form-label">Focus Height (Target Y)</span>
                    <div style="display: flex; align-items: center; gap: 3px;">
                      <input type="number" id="slider-cam-target-y-num" class="slider-number-input" min="-1.5" max="3.5" step="0.05" value="0.00" />
                      <span class="slider-number-unit">m</span>
                    </div>
                  </div>
                  <input type="range" id="slider-cam-target-y" class="slider-input" min="-1.5" max="3.5" step="0.05" value="0.0" />
                </div>
              </div>

            </div>

            <!-- TAB 3: WORLD & LIGHTING -->
            <div class="tab-pane" id="tab-pane-world">
              
              <!-- ==========================================================
                   1. VIEWPORT BACKDROP (Camera Visual Backdrop)
                   ========================================================== -->
              <div class="editor-section" style="margin-bottom: 12px;">
                <div class="editor-section-header">
                  <div class="editor-section-title">
                    <span class="isax isax-sm" data-icon="image"></span>
                    <span>Viewport Backdrop</span>
                  </div>
                  <span style="font-size: 10px; color: var(--text-muted);">Visual Background</span>
                </div>

                <!-- Backdrop Mode Selector -->
                <div class="segmented-control" id="backdrop-mode-segmented" style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;">
                  <button type="button" class="segmented-btn active" data-backdrop="hdri" id="btn-backdrop-hdri" title="HDRI Environment Panorama">
                    <span>HDRI</span>
                  </button>
                  <button type="button" class="segmented-btn" data-backdrop="solid" id="btn-backdrop-solid" title="Solid Color">
                    <span>Solid</span>
                  </button>
                  <button type="button" class="segmented-btn" data-backdrop="gradient" id="btn-backdrop-gradient" title="Studio Gradient">
                    <span>Grad</span>
                  </button>
                  <button type="button" class="segmented-btn" data-backdrop="image" id="btn-backdrop-image" title="Custom Backplate Image">
                    <span>Image</span>
                  </button>
                  <button type="button" class="segmented-btn" data-backdrop="transparent" id="btn-backdrop-transparent" title="Transparent Alpha">
                    <span>Alpha</span>
                  </button>
                </div>

                <!-- Solid Color Controls -->
                <div class="form-group" id="backdrop-solid-controls" style="display: none; margin-top: 8px;">
                  <div class="form-row">
                    <span class="form-label">Backdrop Color</span>
                    <div class="color-picker-wrap">
                      <div class="color-preview-box" id="backdrop-solid-preview" style="background-color: #121214;">
                        <input type="color" id="backdrop-solid-input" value="#121214" />
                      </div>
                      <input type="text" id="backdrop-solid-hex" class="input-text" value="#121214" style="width: 80px; text-transform: uppercase;" />
                    </div>
                  </div>
                  <div class="color-swatches-preset" id="backdrop-solid-swatches" style="margin-top: 4px;">
                    <div class="color-swatch-dot active" data-color="#121214" style="background-color: #121214;" title="Dark Charcoal"></div>
                    <div class="color-swatch-dot" data-color="#1e1e24" style="background-color: #1e1e24;" title="Dark Ash"></div>
                    <div class="color-swatch-dot" data-color="#f8fafc" style="background-color: #f8fafc;" title="Pure White"></div>
                    <div class="color-swatch-dot" data-color="#0f172a" style="background-color: #0f172a;" title="Midnight Slate"></div>
                    <div class="color-swatch-dot" data-color="#0079fe" style="background-color: #0079fe;" title="River Blue"></div>
                  </div>
                </div>

                <!-- Gradient Controls -->
                <div class="form-group" id="backdrop-gradient-controls" style="display: none; margin-top: 8px;">
                  <div class="form-row">
                    <span class="form-label">Top Sky Color</span>
                    <div class="color-picker-wrap">
                      <div class="color-preview-box" id="backdrop-grad-top-preview" style="background-color: #2a2b32;">
                        <input type="color" id="backdrop-grad-top-input" value="#2a2b32" />
                      </div>
                      <input type="text" id="backdrop-grad-top-hex" class="input-text" value="#2A2B32" style="width: 80px; text-transform: uppercase;" />
                    </div>
                  </div>
                  <div class="form-row" style="margin-top: 4px;">
                    <span class="form-label">Bottom Floor Color</span>
                    <div class="color-picker-wrap">
                      <div class="color-preview-box" id="backdrop-grad-bot-preview" style="background-color: #0e0f13;">
                        <input type="color" id="backdrop-grad-bot-input" value="#0e0f13" />
                      </div>
                      <input type="text" id="backdrop-grad-bot-hex" class="input-text" value="#0E0F13" style="width: 80px; text-transform: uppercase;" />
                    </div>
                  </div>
                </div>

                <!-- Custom Image Upload Controls -->
                <div class="form-group" id="backdrop-image-controls" style="display: none; margin-top: 8px;">
                  <div class="form-row">
                    <span class="form-label">Backplate Image</span>
                    <label class="btn btn-secondary btn-sm" style="cursor: pointer; margin: 0;">
                      <span class="isax isax-sm" data-icon="gallery-add"></span>
                      <span>Upload Image</span>
                      <input type="file" id="backdrop-file-input" accept="image/*" style="display: none;" />
                    </label>
                  </div>
                  <div id="backdrop-image-preview-wrap" style="display: none; margin-top: 4px; align-items: center; justify-content: space-between; padding: 4px 8px; background: var(--bg-surface); border-radius: var(--radius-sm);">
                    <span id="backdrop-image-name" style="font-size: 11px; color: var(--text-secondary); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">backdrop.jpg</span>
                    <button type="button" class="btn btn-ghost btn-icon-sm" id="btn-backdrop-clear-image" title="Remove Image" style="color: var(--color-danger); cursor: pointer;"><span class="isax isax-sm" data-icon="close"></span></button>
                  </div>
                </div>

                <div style="font-size: 10px; color: var(--text-muted); margin-top: 6px; line-height: 1.3; display: flex; align-items: flex-start; gap: 5px;">
                  <span class="isax isax-sm" data-icon="lamp-on" style="flex-shrink: 0; margin-top: 1px; color: var(--color-accent);"></span>
                  <em>Model lighting & reflections are powered by HDRI Studio below.</em>
                </div>
              </div>

              <!-- ==========================================================
                   2. LIGHTING & ENVIRONMENT SOURCE
                   ========================================================== -->
              <div class="editor-section-title" id="section-title-lighting" style="margin: 8px 0 6px 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); display: none;">
                <span>Lighting & Reflections</span>
              </div>

              <!-- Mode Switcher (Sun vs HDRI) - Hidden -->
              <div class="segmented-control" style="display: none;">
                <button class="segmented-btn" id="btn-world-mode-sun">
                  <span class="isax isax-sm" data-icon="sun-1"></span>
                  <span>Sun Light</span>
                </button>
                <button class="segmented-btn active" id="btn-world-mode-hdri">
                  <span class="isax isax-sm" data-icon="image"></span>
                  <span>HDRI Texture</span>
                </button>
              </div>

              <!-- Sun Lighting Controls - Hidden (preserved) -->
              <div class="editor-section" id="world-section-sun" style="display: none;">
                <div class="editor-section-header">
                  <div class="editor-section-title">
                    <span class="isax isax-sm" data-icon="sun-1"></span>
                    <span>Sun Direction & Intensity</span>
                  </div>
                  <button class="btn-keyframe-toggle" id="btn-kf-sun" title="Record Lighting Keyframe ◆">
                    <span data-icon="diamond"></span>
                  </button>
                </div>

                <!-- Sun Azimuth / Rotation -->
                <div class="form-group">
                  <div class="form-row">
                    <span class="form-label">Sun Rotation (Azimuth)</span>
                    <div style="display: flex; align-items: center; gap: 3px;">
                      <input type="number" id="sun-rotation-num" class="slider-number-input" min="0" max="360" step="1" value="45" />
                      <span class="slider-number-unit">°</span>
                    </div>
                  </div>
                  <input type="range" id="sun-rotation-slider" class="slider-input" min="0" max="360" step="1" value="45" />
                </div>

                <!-- Sun Elevation -->
                <div class="form-group">
                  <div class="form-row">
                    <span class="form-label">Sun Elevation (Height)</span>
                    <div style="display: flex; align-items: center; gap: 3px;">
                      <input type="number" id="sun-elevation-num" class="slider-number-input" min="5" max="89" step="1" value="55" />
                      <span class="slider-number-unit">°</span>
                    </div>
                  </div>
                  <input type="range" id="sun-elevation-slider" class="slider-input" min="5" max="89" step="1" value="55" />
                </div>

                <!-- Sun Intensity -->
                <div class="form-group">
                  <div class="form-row">
                    <span class="form-label">Light Intensity</span>
                    <input type="number" id="sun-intensity-num" class="slider-number-input" min="0" max="4" step="0.1" value="1.6" />
                  </div>
                  <input type="range" id="sun-intensity-slider" class="slider-input" min="0" max="4" step="0.1" value="1.6" />
                </div>

                <!-- Shadow Softness -->
                <div class="form-group">
                  <div class="form-row">
                    <span class="form-label">Shadow Softness</span>
                    <input type="number" id="sun-shadow-softness-num" class="slider-number-input" min="0" max="1" step="0.01" value="0.35" />
                  </div>
                  <input type="range" id="sun-shadow-softness-slider" class="slider-input" min="0" max="1" step="0.01" value="0.35" />
                </div>
              </div>

              <!-- HDRI Environment Studio (KeyShot Style) - Visible -->
              <div class="editor-section hdri-editor-container" id="world-section-hdri">
                
                <!-- Mode Switcher: Light Editor vs Gobos Editor -->
                <div class="segmented-control" id="hdri-mode-segmented" style="margin-bottom: 8px;">
                  <button type="button" class="segmented-btn active" id="btn-hdri-mode-light" data-mode="light">
                    <span class="isax isax-sm" data-icon="lamp-on"></span>
                    <span>Light Editor</span>
                  </button>
                  <button type="button" class="segmented-btn" id="btn-hdri-mode-gobo" data-mode="gobo">
                    <span class="isax isax-sm" data-icon="mask"></span>
                    <span>Gobos Editor</span>
                  </button>
                </div>

                <!-- HDRI 2D Panorama Canvas Dome Preview -->
                <div class="hdri-canvas-wrapper">
                  <canvas id="hdri-preview-canvas" width="480" height="240"></canvas>
                </div>
                <div class="hdri-canvas-tip" id="hdri-canvas-tip-text">Double-click on canvas to add pin • Drag pin to rotate</div>

                <!-- 1. LIGHT EDITOR PANE (Visible when in Light Mode) -->
                <div id="hdri-light-pane" style="display: flex; flex-direction: column; gap: 10px;">
                  
                  <!-- HDRI Preset Recipes -->
                  <div class="form-group" id="hdri-recipe-group">
                    <div class="form-row">
                      <span class="form-label">Studio Recipe</span>
                      <select id="hdri-preset-select" class="select-input" style="width: 170px;">
                        <option value="studio_3point">3-Point Studio Pro</option>
                        <option value="tropical_foliage">🌿 Tropical Foliage Sun</option>
                        <option value="venetian_blinds_studio">🪟 Venetian Blinds Studio</option>
                        <option value="apple_clean">Apple Minimal High-Key</option>
                        <option value="dark_rim">Dark Hero Rim</option>
                        <option value="cyber_neon">Cyber Neon Dual-Tone</option>
                        <option value="warm_sunset">Warm Sunset Window</option>
                      </select>
                    </div>
                  </div>

                  <!-- Toolbar: Add Circular / Add Rectangular / Duplicate / Delete -->
                  <div class="hdri-toolbar">
                    <div class="hdri-toolbar-left">
                      <button type="button" class="btn btn-ghost btn-icon-sm" id="btn-hdri-add-circ" title="Add Circular Pin">
                        <span class="isax isax-sm" data-icon="record-circle"></span>
                      </button>
                      <button type="button" class="btn btn-ghost btn-icon-sm" id="btn-hdri-add-rect" title="Add Rectangular Stripbox">
                        <span class="isax isax-sm" data-icon="stop"></span>
                      </button>
                    </div>
                    <div class="hdri-toolbar-right">
                      <button type="button" class="btn btn-ghost btn-icon-sm" id="btn-hdri-duplicate" title="Duplicate Selected Light">
                        <span class="isax isax-sm" data-icon="copy"></span>
                      </button>
                      <button type="button" class="btn btn-ghost btn-icon-sm" id="btn-hdri-delete" title="Delete Selected Light">
                        <span class="isax isax-sm" data-icon="trash"></span>
                      </button>
                    </div>
                  </div>

                  <!-- Layers Stack (Pins List) -->
                  <div class="hdri-layers-card">
                    <div class="form-row" style="margin-bottom: 2px;">
                      <span class="form-label" style="font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);">Light Layers</span>
                      <span style="font-size: 10px; color: var(--text-muted);" id="hdri-pin-count-badge">3 Lights</span>
                    </div>
                    <div class="hdri-layers-box" id="hdri-pins-list">
                      <!-- Dynamic Layer Items rendered by JS -->
                    </div>
                  </div>

                  <!-- Active Pin Inspector -->
                  <div id="hdri-pin-inspector" style="display: flex; flex-direction: column; gap: 10px;">
                    
                    <!-- Section Header with Keyframe Toggle -->
                    <div class="editor-section-header" style="margin-bottom: 2px;">
                      <div class="editor-section-title">
                        <span class="isax isax-sm" data-icon="lamp-on"></span>
                        <span id="hdri-pin-title-label">Light Pin Settings</span>
                      </div>
                      <button class="btn-keyframe-toggle" id="btn-kf-hdri-pin" title="Record HDRI Light Keyframe ◆">
                        <span data-icon="diamond"></span>
                      </button>
                    </div>

                    <!-- Directional Shadow Caster Card -->
                    <div class="form-group" style="background: rgba(0, 121, 254, 0.08); padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0, 121, 254, 0.25);">
                      <label style="display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--text-primary); margin: 0;">
                        <span style="display: flex; align-items: center; gap: 6px;">
                          <span class="isax isax-sm" data-icon="sun-1" style="color: #f59e0b;"></span>
                          <span>Cast 3D Shadow (Key Light)</span>
                        </span>
                        <input type="checkbox" id="hdri-pin-shadow-caster-toggle" style="cursor: pointer; width: 15px; height: 15px; accent-color: var(--color-accent);" />
                      </label>
                      <span style="font-size: 10px; color: var(--text-muted); margin-top: 3px; display: block; line-height: 1.3;">
                        Directs 3D ground & contact shadows from this light pin
                      </span>
                    </div>

                    <!-- Shape & Half -->
                    <div class="form-group">
                      <div class="form-row">
                        <span class="form-label">Pin Shape</span>
                        <label style="display: flex; align-items: center; gap: 4px; font-size: 11px; cursor: pointer; color: var(--text-secondary);">
                          <input type="checkbox" id="hdri-pin-half-toggle" />
                          <span>Half</span>
                        </label>
                      </div>
                      <div class="segmented-control" id="hdri-pin-shape-segmented">
                        <button type="button" class="segmented-btn active" data-shape="circular" id="btn-shape-circular">
                          <span class="isax isax-sm" data-icon="record-circle"></span>
                          <span>Circular</span>
                        </button>
                        <button type="button" class="segmented-btn" data-shape="rectangular" id="btn-shape-rectangular">
                          <span class="isax isax-sm" data-icon="stop"></span>
                          <span>Rectangular</span>
                        </button>
                      </div>
                    </div>

                    <!-- Dimensions (Radius for circular, Width/Height/Rotation for rect) -->
                    <div class="form-group" id="hdri-group-radius">
                      <div class="form-row">
                        <span class="form-label">Radius</span>
                        <input type="number" id="hdri-pin-radius-num" class="slider-number-input" min="5" max="90" step="1" value="28" />
                      </div>
                      <input type="range" id="hdri-pin-radius-slider" class="slider-input" min="5" max="90" step="1" value="28" />
                    </div>

                    <div class="form-group" id="hdri-group-rect-dims" style="display: none;">
                      <div class="form-row">
                        <span class="form-label">Width & Height</span>
                        <div style="display: flex; align-items: center; gap: 3px;">
                          <input type="number" id="hdri-pin-width-num" class="slider-number-input" style="width: 48px;" min="4" max="180" step="1" value="20" title="Width" />
                          <span style="font-size: 11px; color: var(--text-muted);">×</span>
                          <input type="number" id="hdri-pin-height-num" class="slider-number-input" style="width: 48px;" min="4" max="90" step="1" value="50" title="Height" />
                        </div>
                      </div>
                      <div style="display: flex; gap: 6px;">
                        <input type="range" id="hdri-pin-width-slider" class="slider-input" min="4" max="180" step="1" value="20" title="Width" />
                        <input type="range" id="hdri-pin-height-slider" class="slider-input" min="4" max="90" step="1" value="50" title="Height" />
                      </div>
                      <div class="form-row" style="margin-top: 4px;">
                        <span class="form-label">Rotation Angle</span>
                        <div style="display: flex; align-items: center; gap: 3px;">
                          <input type="number" id="hdri-pin-rotation-num" class="slider-number-input" min="-180" max="180" step="1" value="0" />
                          <span class="slider-number-unit">°</span>
                        </div>
                      </div>
                      <input type="range" id="hdri-pin-rotation-slider" class="slider-input" min="-180" max="180" step="1" value="0" />
                    </div>

                    <!-- Color & Brightness -->
                    <div class="form-group">
                      <div class="form-row">
                        <span class="form-label">Pin Color</span>
                        <div class="color-picker-wrap">
                          <div class="color-preview-box" id="hdri-pin-color-preview" style="background-color: #ffffff;">
                            <input type="color" id="hdri-pin-color-input" value="#ffffff" />
                          </div>
                          <input type="text" id="hdri-pin-color-hex" class="input-text" value="#FFFFFF" style="width: 80px; text-transform: uppercase;" />
                        </div>
                      </div>
                    </div>

                    <div class="form-group">
                      <div class="form-row">
                        <span class="form-label">HDR Brightness (Boost)</span>
                        <input type="number" id="hdri-pin-brightness-num" class="slider-number-input" min="0.1" max="10.0" step="0.1" value="2.5" />
                      </div>
                      <input type="range" id="hdri-pin-brightness-slider" class="slider-input" min="0.1" max="10.0" step="0.1" value="2.5" />
                    </div>

                    <div class="form-group">
                      <div class="form-row">
                        <span class="form-label">Blend Mode</span>
                        <select id="hdri-pin-blend-select" class="select-input" style="width: 140px;">
                          <option value="add" selected>Add (Lighting)</option>
                          <option value="normal">Normal (Alpha)</option>
                          <option value="screen">Screen</option>
                        </select>
                      </div>
                    </div>

                    <!-- Falloff & Softness -->
                    <div class="form-group">
                      <div class="form-row">
                        <span class="form-label">Edge Falloff (Softness)</span>
                        <input type="number" id="hdri-pin-falloff-num" class="slider-number-input" min="0.0" max="1.0" step="0.01" value="0.25" />
                      </div>
                      <input type="range" id="hdri-pin-falloff-slider" class="slider-input" min="0.0" max="1.0" step="0.01" value="0.25" />
                    </div>

                    <div class="form-group">
                      <div class="form-row">
                        <span class="form-label">Falloff Mode</span>
                        <select id="hdri-pin-falloff-mode-select" class="select-input" style="width: 140px;">
                          <option value="from_edge">From Edge</option>
                          <option value="gaussian">Gaussian Smooth</option>
                          <option value="linear">Linear</option>
                        </select>
                      </div>
                    </div>

                    <!-- Transforms (Azimuth & Elevation) -->
                    <div class="form-group">
                      <div class="form-row">
                        <span class="form-label">Azimuth (H Angle)</span>
                        <div style="display: flex; align-items: center; gap: 3px;">
                          <input type="number" id="hdri-pin-azimuth-num" class="slider-number-input" min="-180" max="180" step="0.1" value="42" />
                          <span class="slider-number-unit">°</span>
                        </div>
                      </div>
                      <input type="range" id="hdri-pin-azimuth-slider" class="slider-input" min="-180" max="180" step="0.5" value="42" />
                    </div>

                    <div class="form-group">
                      <div class="form-row">
                        <span class="form-label">Elevation (V Angle)</span>
                        <div style="display: flex; align-items: center; gap: 3px;">
                          <input type="number" id="hdri-pin-elevation-num" class="slider-number-input" min="-90" max="90" step="0.1" value="28" />
                          <span class="slider-number-unit">°</span>
                        </div>
                      </div>
                      <input type="range" id="hdri-pin-elevation-slider" class="slider-input" min="-90" max="90" step="0.5" value="28" />
                    </div>

                  </div>
                </div>

                <!-- 2. GOBOS EDITOR PANE (Visible when in Gobos Mode) -->
                <div id="hdri-gobo-pane" style="display: none; flex-direction: column; gap: 10px;">
                  
                  <!-- Gobo Toolbar: Add Blocker / Duplicate / Delete -->
                  <div class="hdri-toolbar">
                    <div class="hdri-toolbar-left" style="display: flex; gap: 6px;">
                      <button type="button" class="btn btn-secondary btn-sm" id="btn-gobo-add" style="font-size: 11px; padding: 4px 8px; display: inline-flex; align-items: center; gap: 5px;">
                        <span class="isax isax-sm" data-icon="add-circle"></span>
                        <span>Add Blocker</span>
                      </button>
                    </div>
                    <div class="hdri-toolbar-right">
                      <button type="button" class="btn btn-ghost btn-icon-sm" id="btn-gobo-duplicate" title="Duplicate Selected Blocker">
                        <span class="isax isax-sm" data-icon="copy"></span>
                      </button>
                      <button type="button" class="btn btn-ghost btn-icon-sm" id="btn-gobo-delete" title="Delete Selected Blocker">
                        <span class="isax isax-sm" data-icon="trash"></span>
                      </button>
                    </div>
                  </div>

                  <!-- Gobos Layers Stack -->
                  <div class="hdri-layers-card">
                    <div class="form-row" style="margin-bottom: 2px;">
                      <span class="form-label" style="font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);">Hold-Out Gobo Blockers</span>
                      <span style="font-size: 10px; color: var(--text-muted);" id="hdri-gobo-count-badge">0 Blockers</span>
                    </div>
                    <div class="hdri-layers-box" id="hdri-gobos-list">
                      <!-- Dynamic Gobo Items rendered by JS -->
                    </div>
                  </div>

                  <!-- Active Gobo Blocker Inspector -->
                  <div id="hdri-gobo-inspector" style="display: flex; flex-direction: column; gap: 10px;">
                    
                    <!-- Section Header with Keyframe Toggle -->
                    <div class="editor-section-header" style="margin-bottom: 2px;">
                      <div class="editor-section-title">
                        <span class="isax isax-sm" data-icon="mask"></span>
                        <span id="hdri-gobo-title-label">Gobo Blocker Settings</span>
                      </div>
                      <button class="btn-keyframe-toggle" id="btn-kf-gobo" title="Record Gobo Keyframe ◆">
                        <span data-icon="diamond"></span>
                      </button>
                    </div>

                    <!-- Hold-Out Info Banner -->
                    <div class="form-group" style="background: rgba(168, 85, 247, 0.08); padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(168, 85, 247, 0.25);">
                      <div style="display: flex; align-items: center; justify-content: space-between;">
                        <span style="display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-primary);">
                          <span class="isax isax-sm" data-icon="mask" style="color: #a855f7;"></span>
                          <span>Light Blocker / Shadow Flag</span>
                        </span>
                        <span style="font-size: 10px; background: rgba(168, 85, 247, 0.2); color: #c084fc; padding: 2px 6px; border-radius: 4px; font-weight: 600;">Hold-Out</span>
                      </div>
                      <span style="font-size: 10px; color: var(--text-muted); margin-top: 3px; display: block; line-height: 1.3;">
                        Blocks and shapes light passing from this direction to cast genuine shadows
                      </span>
                    </div>

                    <!-- Holdout Opacity / Density -->
                    <div class="form-group">
                      <div class="form-row">
                        <span class="form-label">Hold-Out Opacity</span>
                        <div style="display: flex; align-items: center; gap: 3px;">
                          <input type="number" id="gobo-opacity-num" class="slider-number-input" min="0" max="100" step="1" value="100" />
                          <span class="slider-number-unit">%</span>
                        </div>
                      </div>
                      <input type="range" id="gobo-opacity-slider" class="slider-input" min="0" max="1" step="0.02" value="1.0" />
                    </div>

                    <!-- Edge Blur / Softness -->
                    <div class="form-group">
                      <div class="form-row">
                        <span class="form-label">Shadow Softness (Blur)</span>
                        <div style="display: flex; align-items: center; gap: 3px;">
                          <input type="number" id="gobo-blur-num" class="slider-number-input" min="0" max="15" step="0.5" value="2.0" />
                          <span class="slider-number-unit">px</span>
                        </div>
                      </div>
                      <input type="range" id="gobo-blur-slider" class="slider-input" min="0" max="15" step="0.5" value="2.0" />
                    </div>

                    <!-- Gobo Pattern Selector -->
                    <div class="form-group">
                      <div class="form-row" style="margin-bottom: 6px;">
                        <span class="form-label">Blocker Pattern Shape</span>
                      </div>
                      <div class="gobo-presets-grid" id="hdri-gobo-preset-grid">
                        <button type="button" class="gobo-preset-chip active" data-gobo-type="foliage">
                          <span class="gobo-icon">🌿</span>
                          <span class="gobo-label">Foliage</span>
                        </button>
                        <button type="button" class="gobo-preset-chip" data-gobo-type="blinds">
                          <span class="gobo-icon">🪟</span>
                          <span class="gobo-label">Blinds</span>
                        </button>
                        <button type="button" class="gobo-preset-chip" data-gobo-type="window_grid">
                          <span class="gobo-icon">🏢</span>
                          <span class="gobo-label">Window</span>
                        </button>
                        <button type="button" class="gobo-preset-chip" data-gobo-type="caustics">
                          <span class="gobo-icon">🌊</span>
                          <span class="gobo-label">Caustics</span>
                        </button>
                        <button type="button" class="gobo-preset-chip" data-gobo-type="stripes">
                          <span class="gobo-icon">🏁</span>
                          <span class="gobo-label">Stripes</span>
                        </button>
                        <button type="button" class="gobo-preset-chip" data-gobo-type="dots">
                          <span class="gobo-icon">🔘</span>
                          <span class="gobo-label">Dots</span>
                        </button>
                        <button type="button" class="gobo-preset-chip" data-gobo-type="custom">
                          <span class="gobo-icon">📁</span>
                          <span class="gobo-label">Custom</span>
                        </button>
                      </div>
                    </div>

                    <!-- 1. Parametric Controls: Foliage -->
                    <div class="gobo-type-params" id="gobo-params-foliage">
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Foliage Density</span>
                          <input type="number" id="gobo-foliage-density-num" class="slider-number-input" min="4" max="40" step="1" value="18" />
                        </div>
                        <input type="range" id="gobo-foliage-density-slider" class="slider-input" min="4" max="40" step="1" value="18" />
                      </div>
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Leaf Scale</span>
                          <input type="number" id="gobo-leaf-scale-num" class="slider-number-input" min="0.4" max="2.5" step="0.1" value="1.0" />
                        </div>
                        <input type="range" id="gobo-leaf-scale-slider" class="slider-input" min="0.4" max="2.5" step="0.1" value="1.0" />
                      </div>
                      <div class="form-group">
                        <button type="button" class="btn btn-secondary btn-sm" id="btn-gobo-foliage-random" style="width: 100%; justify-content: center; gap: 6px;">
                          <span class="isax isax-sm" data-icon="refresh"></span>
                          <span>Randomize Leaves Variant (Seed)</span>
                        </button>
                      </div>
                    </div>

                    <!-- 2. Parametric Controls: Blinds -->
                    <div class="gobo-type-params" id="gobo-params-blinds" style="display: none;">
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Slat Count</span>
                          <input type="number" id="gobo-slat-count-num" class="slider-number-input" min="3" max="36" step="1" value="12" />
                        </div>
                        <input type="range" id="gobo-slat-count-slider" class="slider-input" min="3" max="36" step="1" value="12" />
                      </div>
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Slat Thickness</span>
                          <input type="number" id="gobo-slat-thickness-num" class="slider-number-input" min="0.1" max="0.9" step="0.02" value="0.50" />
                        </div>
                        <input type="range" id="gobo-slat-thickness-slider" class="slider-input" min="0.1" max="0.9" step="0.02" value="0.50" />
                      </div>
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Slat Tilt Angle</span>
                          <div style="display: flex; align-items: center; gap: 3px;">
                            <input type="number" id="gobo-slat-tilt-num" class="slider-number-input" min="-45" max="45" step="1" value="0" />
                            <span class="slider-number-unit">°</span>
                          </div>
                        </div>
                        <input type="range" id="gobo-slat-tilt-slider" class="slider-input" min="-45" max="45" step="1" value="0" />
                      </div>
                    </div>

                    <!-- 3. Parametric Controls: Window Grid -->
                    <div class="gobo-type-params" id="gobo-params-window_grid" style="display: none;">
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Window Panes (X × Y)</span>
                          <div style="display: flex; align-items: center; gap: 3px;">
                            <input type="number" id="gobo-panes-x-num" class="slider-number-input" style="width: 48px;" min="1" max="6" step="1" value="2" title="Columns" />
                            <span style="font-size: 11px; color: var(--text-muted);">×</span>
                            <input type="number" id="gobo-panes-y-num" class="slider-number-input" style="width: 48px;" min="1" max="6" step="1" value="3" title="Rows" />
                          </div>
                        </div>
                        <div style="display: flex; gap: 6px;">
                          <input type="range" id="gobo-panes-x-slider" class="slider-input" min="1" max="6" step="1" value="2" title="Columns" />
                          <input type="range" id="gobo-panes-y-slider" class="slider-input" min="1" max="6" step="1" value="3" title="Rows" />
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Mullion Thickness</span>
                          <input type="number" id="gobo-mullion-num" class="slider-number-input" min="0.02" max="0.2" step="0.01" value="0.06" />
                        </div>
                        <input type="range" id="gobo-mullion-slider" class="slider-input" min="0.02" max="0.2" step="0.01" value="0.06" />
                      </div>
                      <div class="form-group">
                        <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11px; color: var(--text-secondary);">
                          <input type="checkbox" id="gobo-arch-top-toggle" />
                          <span>Arched Top (Cathedral Window)</span>
                        </label>
                      </div>
                    </div>

                    <!-- 4. Parametric Controls: Caustics -->
                    <div class="gobo-type-params" id="gobo-params-caustics" style="display: none;">
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Caustic Scale</span>
                          <input type="number" id="gobo-caustic-scale-num" class="slider-number-input" min="0.5" max="3.0" step="0.1" value="1.5" />
                        </div>
                        <input type="range" id="gobo-caustic-scale-slider" class="slider-input" min="0.5" max="3.0" step="0.1" value="1.5" />
                      </div>
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Wave Turbulence</span>
                          <input type="number" id="gobo-caustic-turb-num" class="slider-number-input" min="0.2" max="2.5" step="0.1" value="1.0" />
                        </div>
                        <input type="range" id="gobo-caustic-turb-slider" class="slider-input" min="0.2" max="2.5" step="0.1" value="1.0" />
                      </div>
                    </div>

                    <!-- 5. Parametric Controls: Stripes -->
                    <div class="gobo-type-params" id="gobo-params-stripes" style="display: none;">
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Stripe Count</span>
                          <input type="number" id="gobo-stripe-count-num" class="slider-number-input" min="2" max="30" step="1" value="8" />
                        </div>
                        <input type="range" id="gobo-stripe-count-slider" class="slider-input" min="2" max="30" step="1" value="8" />
                      </div>
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Stripe Angle</span>
                          <div style="display: flex; align-items: center; gap: 3px;">
                            <input type="number" id="gobo-stripe-angle-num" class="slider-number-input" min="-90" max="90" step="1" value="45" />
                            <span class="slider-number-unit">°</span>
                          </div>
                        </div>
                        <input type="range" id="gobo-stripe-angle-slider" class="slider-input" min="-90" max="90" step="1" value="45" />
                      </div>
                    </div>

                    <!-- 6. Parametric Controls: Dots -->
                    <div class="gobo-type-params" id="gobo-params-dots" style="display: none;">
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Dot Grid Count</span>
                          <input type="number" id="gobo-dot-count-num" class="slider-number-input" min="3" max="25" step="1" value="10" />
                        </div>
                        <input type="range" id="gobo-dot-count-slider" class="slider-input" min="3" max="25" step="1" value="10" />
                      </div>
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Dot Radius Ratio</span>
                          <input type="number" id="gobo-dot-radius-num" class="slider-number-input" min="0.1" max="0.48" step="0.01" value="0.35" />
                        </div>
                        <input type="range" id="gobo-dot-radius-slider" class="slider-input" min="0.1" max="0.48" step="0.01" value="0.35" />
                      </div>
                    </div>

                    <!-- 7. Custom Mask Upload -->
                    <div class="gobo-type-params" id="gobo-params-custom" style="display: none;">
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Custom Mask Image</span>
                          <label class="btn btn-secondary btn-sm" style="cursor: pointer; margin: 0;">
                            <span class="isax isax-sm" data-icon="gallery-add"></span>
                            <span>Upload Mask</span>
                            <input type="file" id="gobo-custom-file-input" accept=".png,.jpg,.jpeg,.svg,.webp" style="display: none;" />
                          </label>
                        </div>
                        <div id="gobo-custom-preview-wrap" style="display: none; margin-top: 6px; align-items: center; justify-content: space-between; padding: 4px 8px; background: var(--bg-surface); border-radius: var(--radius-sm);">
                          <span id="gobo-custom-file-name" style="font-size: 11px; color: var(--text-secondary); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">custom-gobo.png</span>
                        </div>
                      </div>
                    </div>

                    <!-- Universal Gobo Positioning & Scale Modifiers -->
                    <div style="border-top: 1px solid var(--border-color); padding-top: 10px; display: flex; flex-direction: column; gap: 10px;">
                      
                      <!-- Positioning: Azimuth & Elevation -->
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Azimuth (H Angle)</span>
                          <div style="display: flex; align-items: center; gap: 3px;">
                            <input type="number" id="gobo-azimuth-num" class="slider-number-input" min="-180" max="180" step="0.1" value="35" />
                            <span class="slider-number-unit">°</span>
                          </div>
                        </div>
                        <input type="range" id="gobo-azimuth-slider" class="slider-input" min="-180" max="180" step="0.5" value="35" />
                      </div>

                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Elevation (V Angle)</span>
                          <div style="display: flex; align-items: center; gap: 3px;">
                            <input type="number" id="gobo-elevation-num" class="slider-number-input" min="-90" max="90" step="0.1" value="25" />
                            <span class="slider-number-unit">°</span>
                          </div>
                        </div>
                        <input type="range" id="gobo-elevation-slider" class="slider-input" min="-90" max="90" step="0.5" value="25" />
                      </div>

                      <!-- Scale & Dimensions -->
                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Blocker Scale</span>
                          <div style="display: flex; align-items: center; gap: 3px;">
                            <input type="number" id="gobo-scale-num" class="slider-number-input" min="0.2" max="3.5" step="0.05" value="1.0" />
                            <span class="slider-number-unit">×</span>
                          </div>
                        </div>
                        <input type="range" id="gobo-scale-slider" class="slider-input" min="0.2" max="3.5" step="0.05" value="1.0" />
                      </div>

                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Width & Height</span>
                          <div style="display: flex; align-items: center; gap: 3px;">
                            <input type="number" id="gobo-width-num" class="slider-number-input" style="width: 48px;" min="10" max="180" step="1" value="50" title="Width" />
                            <span style="font-size: 11px; color: var(--text-muted);">×</span>
                            <input type="number" id="gobo-height-num" class="slider-number-input" style="width: 48px;" min="10" max="120" step="1" value="50" title="Height" />
                          </div>
                        </div>
                        <div style="display: flex; gap: 6px;">
                          <input type="range" id="gobo-width-slider" class="slider-input" min="10" max="180" step="1" value="50" title="Width" />
                          <input type="range" id="gobo-height-slider" class="slider-input" min="10" max="120" step="1" value="50" title="Height" />
                        </div>
                      </div>

                      <div class="form-group">
                        <div class="form-row">
                          <span class="form-label">Rotation Angle</span>
                          <div style="display: flex; align-items: center; gap: 3px;">
                            <input type="number" id="gobo-rotation-num" class="slider-number-input" min="-180" max="180" step="1" value="0" />
                            <span class="slider-number-unit">°</span>
                          </div>
                        </div>
                        <input type="range" id="gobo-rotation-slider" class="slider-input" min="-180" max="180" step="1" value="0" />
                      </div>

                      <!-- Invert Mask -->
                      <div class="form-group">
                        <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11px; color: var(--text-secondary);">
                          <input type="checkbox" id="gobo-invert-toggle" />
                          <span>Invert Shadow / Transmission Areas</span>
                        </label>
                      </div>

                    </div>

                  </div>

                </div>

                <!-- Background Inspector (Visible when Background layer is selected) -->
                <div id="hdri-bg-inspector" style="display: none; flex-direction: column; gap: 10px;">
                  <!-- Section Header with Keyframe Toggle -->
                  <div class="editor-section-header" style="margin-bottom: 2px;">
                    <div class="editor-section-title">
                      <span class="isax isax-sm" data-icon="image"></span>
                      <span>HDRI Background</span>
                    </div>
                    <button class="btn-keyframe-toggle" id="btn-kf-hdri-bg" title="Record Background Keyframe ◆">
                      <span data-icon="diamond"></span>
                    </button>
                  </div>

                  <div class="form-group">
                    <div class="form-row">
                      <span class="form-label">Background Type</span>
                      <select id="hdri-bg-type-select" class="select-input" style="width: 145px;">
                        <option value="gradient">Studio Gradient</option>
                        <option value="solid">Solid Color</option>
                        <option value="image">HDRI / Image File</option>
                      </select>
                    </div>
                  </div>

                  <!-- Gradient Group -->
                  <div class="form-group" id="hdri-bg-gradient-group">
                    <div class="form-row">
                      <span class="form-label">Top Sky Color</span>
                      <input type="color" id="hdri-bg-top-color" value="#242730" style="width: 32px; height: 24px; border: none; border-radius: 4px; cursor: pointer; background: transparent;" />
                    </div>
                    <div class="form-row" style="margin-top: 4px;">
                      <span class="form-label">Bottom Floor Color</span>
                      <input type="color" id="hdri-bg-bottom-color" value="#0e0f13" style="width: 32px; height: 24px; border: none; border-radius: 4px; cursor: pointer; background: transparent;" />
                    </div>
                  </div>

                  <!-- Solid Group -->
                  <div class="form-group" id="hdri-bg-solid-group" style="display: none;">
                    <div class="form-row">
                      <span class="form-label">Solid Color</span>
                      <input type="color" id="hdri-bg-solid-color" value="#121316" style="width: 32px; height: 24px; border: none; border-radius: 4px; cursor: pointer; background: transparent;" />
                    </div>
                  </div>

                  <!-- Base HDRI / Image File Group -->
                  <div class="form-group" id="hdri-bg-image-group" style="display: none;">
                    <div class="form-row">
                      <span class="form-label">Base Environment</span>
                      <label class="btn btn-secondary btn-sm" style="cursor: pointer; margin: 0;">
                        <span class="isax isax-sm" data-icon="gallery-add"></span>
                        <span>Upload .hdr / img</span>
                        <input type="file" id="hdri-bg-file-input" accept=".hdr,.exr,.jpg,.jpeg,.png,.webp" style="display: none;" />
                      </label>
                    </div>
                    <div id="hdri-bg-image-preview-wrap" style="display: none; margin-top: 6px; align-items: center; justify-content: space-between; padding: 4px 8px; background: var(--bg-surface); border-radius: var(--radius-sm);">
                      <span id="hdri-bg-image-name" style="font-size: 11px; color: var(--text-secondary); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">environment.hdr</span>
                      <button type="button" class="btn btn-ghost btn-icon-sm" id="btn-hdri-bg-clear-image" title="Reset Image" style="color: var(--color-danger); cursor: pointer;"><span class="isax isax-sm" data-icon="close"></span></button>
                    </div>

                    <!-- Base HDRI Rotation -->
                    <div class="form-group" style="margin-top: 8px;">
                      <div class="form-row">
                        <span class="form-label">Base Rotation (Shift)</span>
                        <div style="display: flex; align-items: center; gap: 3px;">
                          <input type="number" id="hdri-bg-rotation-num" class="slider-number-input" min="0" max="360" step="1" value="0" />
                          <span class="slider-number-unit">°</span>
                        </div>
                      </div>
                      <input type="range" id="hdri-bg-rotation-slider" class="slider-input" min="0" max="360" step="1" value="0" />
                    </div>

                    <!-- Base HDRI Brightness -->
                    <div class="form-group" style="margin-top: 6px;">
                      <div class="form-row">
                        <span class="form-label">Base Brightness</span>
                        <div style="display: flex; align-items: center; gap: 3px;">
                          <input type="number" id="hdri-bg-brightness-num" class="slider-number-input" min="0.1" max="4.0" step="0.1" value="1.0" />
                          <span class="slider-number-unit">x</span>
                        </div>
                      </div>
                      <input type="range" id="hdri-bg-brightness-slider" class="slider-input" min="0.1" max="4.0" step="0.1" value="1.0" />
                    </div>

                    <div style="font-size: 10px; color: var(--text-muted); margin-top: 6px; line-height: 1.3; display: flex; align-items: flex-start; gap: 5px;">
                      <span class="isax isax-sm" data-icon="lamp-on" style="flex-shrink: 0; margin-top: 1px; color: var(--color-accent);"></span>
                      <em>Procedural pins in the canvas above will be composited on top of this HDRI map.</em>
                    </div>
                  </div>
                </div>

              </div>

            </div>

            <!-- TAB 4: EXPORT -->
            <div class="tab-pane" id="tab-pane-export">
              
              <div class="editor-section">
                <div class="editor-section-header">
                  <div class="editor-section-title">
                    <span class="isax isax-sm" data-icon="document-download"></span>
                    <span>Render Output</span>
                  </div>
                </div>

                <div class="form-group">
                  <span class="form-label">Resolution</span>
                  <select class="select-input" id="export-resolution-select">
                    <option value="1080p" selected>16:9 Full HD (1920×1080)</option>
                    <option value="4k">16:9 4K Ultra HD (3840×2160)</option>
                    <option value="story">9:16 Vertical Story (1080×1920)</option>
                    <option value="square">1:1 Square (1080×1080)</option>
                    <option value="custom">Custom Resolution...</option>
                  </select>
                </div>

                <!-- Custom Resolution Inputs -->
                <div class="form-group" id="custom-resolution-container" style="display: none; background: var(--bg-card); padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-top: -6px; margin-bottom: 12px;">
                  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
                    <div>
                      <span class="form-label" style="font-size: 10px; margin-bottom: 4px; color: var(--text-secondary);">Width (px)</span>
                      <input type="number" class="text-input" id="export-custom-width" value="1920" min="256" max="7680" step="2" style="font-size: 12px; padding: 6px 8px;" />
                    </div>
                    <div>
                      <span class="form-label" style="font-size: 10px; margin-bottom: 4px; color: var(--text-secondary);">Height (px)</span>
                      <input type="number" class="text-input" id="export-custom-height" value="1080" min="256" max="7680" step="2" style="font-size: 12px; padding: 6px 8px;" />
                    </div>
                  </div>
                  <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 8px;">
                    <span id="custom-aspect-ratio-label" style="font-size: 11px; color: var(--color-accent); font-weight: 500;">16:9 (1.78)</span>
                    <button type="button" class="btn btn-ghost" id="btn-swap-resolution" title="Tukar Lebar & Tinggi (Landscape ↔ Portrait)" style="padding: 3px 8px; font-size: 11px; height: 24px; gap: 4px;">
                      <span class="isax isax-sm" data-icon="refresh-2"></span>
                      <span>Swap (W ↔ H)</span>
                    </button>
                  </div>
                </div>

                <div class="form-group">
                  <span class="form-label">Frame Rate</span>
                  <select class="select-input" id="export-fps-select">
                    <option value="60">60 FPS (Ultra Smooth)</option>
                    <option value="30" selected>30 FPS (Standard)</option>
                    <option value="24">24 FPS (Cinematic)</option>
                  </select>
                </div>

                <div class="form-group">
                  <span class="form-label">Motion Blur (Temporal Accumulation)</span>
                  <select class="select-input" id="export-motionblur-select">
                    <option value="1" selected>Off (Real-time Look)</option>
                    <option value="4">4 Samples (Light)</option>
                    <option value="8">8 Samples (Cinematic 180°)</option>
                    <option value="12">12 Samples (Heavy)</option>
                  </select>
                </div>

                <div class="form-group">
                  <label class="form-row" style="cursor: pointer;">
                    <span class="form-label">Watermark "River Visual"</span>
                    <input type="checkbox" id="export-watermark-check" style="width: 16px; height: 16px; accent-color: var(--color-accent);" />
                  </label>
                </div>

                <div class="form-group" style="font-size: 11px; color: var(--text-muted);">
                  Durasi export mengikuti durasi timeline
                  (<span id="export-duration-label">5.0</span>s). Render berjalan
                  offline frame-perfect via WebCodecs — bukan real-time.
                </div>

                <button class="btn btn-primary" id="btn-export-video" style="margin-top: 8px;">
                  <span class="isax" data-icon="video-play"></span>
                  <span>Render Video (MP4)</span>
                </button>

                <button class="btn btn-secondary" id="btn-export-snapshot" style="margin-top: 8px;">
                  <span class="isax" data-icon="image"></span>
                  <span>Export 4K PNG Snapshot</span>
                </button>
              </div>

            </div>

          </div>
        </aside>

        <!-- CARD 3: ASSET & SCENE CATALOG (DYNAMIC D1 / R2) -->
        <aside class="bento-card card-item gallery-panel" id="card-gallery" data-card="gallery">
          <div class="panel-header">
            <div class="panel-title">
              <span class="isax" data-icon="cube"></span>
              <span id="gallery-panel-title">Asset Catalog</span>
            </div>
            <div class="panel-actions">
              <span class="material-badge" id="gallery-items-count-badge">4 Models</span>
            </div>
          </div>

          <!-- Catalog Mode Tab Switcher (3D Models vs Scene Presets) -->
          <div class="gallery-tab-switcher">
            <button type="button" class="gallery-tab-btn active" id="tab-btn-models" data-catalog-tab="models">
              <span class="isax isax-sm" data-icon="cube"></span>
              <span>3D Models</span>
            </button>
            <button type="button" class="gallery-tab-btn" id="tab-btn-scenes" data-catalog-tab="scenes">
              <span class="isax isax-sm" data-icon="layer"></span>
              <span>Scene Presets</span>
            </button>
          </div>

          <div class="gallery-search">
            <div class="search-wrap">
              <span class="isax isax-sm" data-icon="search-normal"></span>
              <input type="text" id="gallery-search-input" class="input-search" placeholder="Search models or scenes..." />
            </div>

            <!-- Model Category Chips -->
            <div class="category-chips" id="models-category-chips">
              <button class="category-chip active" data-category="all" data-tooltip="All Mockups" title="All">
                <span class="isax isax-sm" data-icon="grid-1"></span>
              </button>
              <button class="category-chip" data-category="mobile" data-tooltip="Phones" title="Phones">
                <span class="isax isax-sm" data-icon="mobile"></span>
              </button>
              <button class="category-chip" data-category="laptop" data-tooltip="Laptops" title="Laptops">
                <span class="isax isax-sm" data-icon="laptop"></span>
              </button>
              <button class="category-chip" data-category="monitor" data-tooltip="Displays" title="Displays">
                <span class="isax isax-sm" data-icon="monitor"></span>
              </button>
              <button class="category-chip" data-category="tablet" data-tooltip="Tablets" title="Tablets">
                <span class="isax isax-sm" data-icon="tablet"></span>
              </button>
              <button class="category-chip" data-category="scene" data-tooltip="Scene / Rooms" title="Scene / Rooms">
                <span class="isax isax-sm" data-icon="cube"></span>
              </button>
            </div>

            <!-- Scene Preset Category Chips -->
            <div class="category-chips" id="scenes-category-chips" style="display: none;">
              <button class="category-chip active" data-scene-category="all" title="All Presets">
                <span class="isax isax-sm" data-icon="grid-1"></span>
              </button>
              <button class="category-chip" data-scene-category="Camera Motion" title="Camera Motion">
                <span class="isax isax-sm" data-icon="video-play"></span>
              </button>
              <button class="category-chip" data-scene-category="Object Motion" title="Object Motion">
                <span class="isax isax-sm" data-icon="layer"></span>
              </button>
              <button class="category-chip" data-scene-category="Lighting & Camera" title="Lighting & Camera">
                <span class="isax isax-sm" data-icon="sun-1"></span>
              </button>
              <button class="category-chip" data-scene-category="Studio Turn" title="Studio Turn">
                <span class="isax isax-sm" data-icon="cube"></span>
              </button>
            </div>
          </div>

          <!-- Dynamic 3D Models Grid Container -->
          <div class="mockup-grid" id="mockup-grid-container">
            <!-- Injected dynamically by app.js via apiClient -->
          </div>

          <!-- Dynamic Scene Presets Grid Container -->
          <div class="mockup-grid" id="presets-grid-container" style="display: none;">
            <!-- Injected dynamically by app.js via apiClient -->
          </div>
        </aside>

      </div>
    </div>

  </div>

  <!-- Video Export Progress Overlay (WebCodecs Pipeline) -->
  <div class="export-overlay" id="export-overlay" aria-hidden="true">
    <div class="export-modal bento-card">
      <div class="export-modal-header">
        <div class="export-modal-title">
          <span class="isax" data-icon="video-play"></span>
          <span id="export-phase-label">Menyiapkan...</span>
        </div>
        <span class="material-badge" id="export-progress-percent">0%</span>
      </div>

      <div class="export-progress-bar-wrap">
        <div class="export-progress-bar" id="export-progress-bar"></div>
      </div>

      <p class="export-phase-desc" id="export-phase-desc">Inisialisasi pipeline export...</p>

      <div class="export-stats-row">
        <div class="export-stat">
          <span class="export-stat-label">Frame</span>
          <span class="export-stat-value" id="export-stats-frames">—</span>
        </div>
        <div class="export-stat">
          <span class="export-stat-label">ETA</span>
          <span class="export-stat-value" id="export-stats-eta">—</span>
        </div>
        <div class="export-stat">
          <span class="export-stat-label">Resolusi</span>
          <span class="export-stat-value" id="export-stats-resolution">—</span>
        </div>
      </div>

      <button class="btn btn-secondary" id="btn-export-cancel" style="margin-top: 12px;">Cancel Export</button>
    </div>
  </div>

  <!-- Virtual Canvas Modal (Crop / Fit / Fill / Pan / Zoom) -->
  <div class="virtual-canvas-modal-backdrop" id="virtual-canvas-modal-backdrop" aria-hidden="true">
    <div class="virtual-canvas-modal">
      
      <!-- Modal Header -->
      <div class="virtual-canvas-header">
        <div class="virtual-canvas-title-group">
          <div class="virtual-canvas-title">
            <span class="isax" data-icon="crop"></span>
            <span>Virtual Canvas Editor</span>
          </div>
          <span class="virtual-canvas-badge" id="vc-resolution-label">1024 × 1024 px</span>
        </div>
        <button class="btn btn-ghost btn-icon-sm" id="vc-btn-close" title="Close"><span class="isax isax-sm" data-icon="close"></span></button>
      </div>

      <!-- Modal Body (Preview Canvas) -->
      <div class="virtual-canvas-body">
        <div class="virtual-canvas-preview-wrapper" id="vc-preview-wrapper">
          <canvas id="vc-preview-canvas" class="virtual-canvas-preview-canvas"></canvas>
        </div>

        <div class="virtual-canvas-hint">
          <span class="isax isax-sm" data-icon="direct-right"></span>
          <span>Drag to Pan &bull; Scroll to Zoom</span>
        </div>

        <!-- Loading Overlay -->
        <div class="virtual-canvas-loading" id="vc-loading-overlay">
          <div class="virtual-canvas-spinner"></div>
          <span style="font-size: 12px; color: var(--text-secondary);">Loading media preview...</span>
        </div>
      </div>

      <!-- Modal Footer / Toolbar -->
      <div class="virtual-canvas-footer">
        <div class="virtual-canvas-controls-group">
          <!-- Mode Segmented -->
          <div class="virtual-canvas-mode-group">
            <button type="button" class="vc-mode-btn active" id="vc-mode-cover" title="Cover (Fill entire screen)">
              <span class="isax isax-sm" data-icon="maximize-4"></span>
              <span>Cover</span>
            </button>
            <button type="button" class="vc-mode-btn" id="vc-mode-contain" title="Contain (Fit inside with background)">
              <span class="isax isax-sm" data-icon="minimize-4"></span>
              <span>Contain</span>
            </button>
          </div>

          <!-- Background color for Contain mode -->
          <div class="virtual-canvas-bg-control" id="vc-bg-control">
            <span style="font-size: 11.5px; color: var(--text-secondary);">Background:</span>
            <div class="vc-color-swatch-wrapper">
              <input type="color" id="vc-bg-input" class="vc-color-input" value="#000000" />
              <div class="vc-color-preview" id="vc-bg-preview" style="background-color: #000000;"></div>
            </div>
          </div>

          <!-- Zoom Slider -->
          <div class="virtual-canvas-zoom-control">
            <span style="font-size: 11.5px; color: var(--text-secondary);">Zoom:</span>
            <input type="range" class="virtual-canvas-zoom-slider" id="vc-zoom-slider" min="0.5" max="3.0" step="0.05" value="1.0" />
            <span class="virtual-canvas-zoom-val" id="vc-zoom-val">1.0x</span>
          </div>

          <button class="btn btn-ghost btn-sm" id="vc-btn-reset" type="button" title="Reset Position & Scale">
            <span class="isax isax-sm" data-icon="rotate-left"></span>
            <span>Reset</span>
          </button>
        </div>

        <div class="virtual-canvas-actions">
          <button class="btn btn-secondary btn-sm" id="vc-btn-cancel" type="button">Cancel</button>
          <button class="btn btn-primary btn-sm" id="vc-btn-apply" type="button">
            <span class="isax isax-sm" data-icon="tick-circle"></span>
            <span>Apply to Mockup</span>
          </button>
        </div>
      </div>

    </div>
  </div>

  <!-- Pro Upgrade Modal Dialog (RBAC Access Gate) -->
  <div class="pro-modal-backdrop" id="pro-modal-backdrop" aria-hidden="true">
    <div class="pro-modal-card">
      <div class="pro-modal-glow"></div>
      
      <div class="pro-modal-header">
        <div>
          <span class="pro-badge-pill">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
            <span>PRO ASSET</span>
          </span>
          <div class="pro-modal-title" id="pro-modal-item-title">Unlock iPhone 17 Pro Max</div>
          <div class="pro-modal-desc">This asset is exclusive to <strong>Pro Creator</strong> & <strong>Agency</strong> members. Upgrade your account to unlock instant access.</div>
        </div>
        <button class="btn btn-ghost btn-icon-sm" id="btn-close-pro-modal" title="Close" style="margin-top: -4px;">
          <span class="isax isax-sm" data-icon="close"></span>
        </button>
      </div>

      <div class="pro-features-list">
        <div class="pro-feature-item">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <span>Access <strong>50+ 3D Models (.rvh)</strong> &amp; Realistic PBR Materials</span>
        </div>
        <div class="pro-feature-item">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <span>Holistic .rvh Camera Motion &amp; Lighting Presets</span>
        </div>
        <div class="pro-feature-item">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <span>Cloudflare R2 High-Speed Global CDN Storage</span>
        </div>
        <div class="pro-feature-item">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17L4 12" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <span>Watermark-free 4K 60 FPS Video Exports</span>
        </div>
      </div>

      <div class="pro-modal-actions">
        <button type="button" class="btn-pro-action" id="btn-simulate-pro-upgrade">
          <span>Simulate Upgrade to PRO Creator (Instant)</span>
        </button>
        <button type="button" class="btn btn-ghost btn-sm" id="btn-cancel-pro-modal">
          <span>Maybe Later</span>
        </button>
      </div>
    </div>
  </div>

  <!-- Modal: Publish to Cloud (R2 & D1) -->
  <div class="virtual-canvas-modal-backdrop" id="modal-publish-cloud" style="z-index: 10000;">
    <div class="virtual-canvas-modal" style="max-width: 480px; width: 92vw; border-radius: 14px; padding: 22px; background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 24px 48px rgba(0,0,0,0.6);">
      
      <!-- Modal Header -->
      <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
        <div style="display: flex; align-items: center; gap: 10px;">
          <div style="width: 34px; height: 34px; border-radius: 8px; background: var(--color-accent-subtle); display: flex; align-items: center; justify-content: center; color: var(--color-accent);">
            <span class="isax" data-icon="cloud-upload" style="font-size: 18px;"></span>
          </div>
          <div>
            <h3 style="font-size: 15px; font-weight: 600; margin: 0; color: var(--text-primary);">Publish to Cloud</h3>
            <span style="font-size: 11.5px; color: var(--text-secondary);">Save .rvh directly to Cloudflare R2 & D1</span>
          </div>
        </div>
        <button type="button" class="btn btn-ghost btn-icon-sm" id="btn-close-publish-modal" data-icon="close-circle"></button>
      </div>

      <!-- Asset Type Selector (Tabs) -->
      <div style="display: flex; background: var(--bg-surface); padding: 3px; border-radius: 8px; margin-bottom: 14px; border: 1px solid var(--border-subtle);">
        <button type="button" class="btn btn-sm active" id="tab-publish-model" style="flex: 1; border-radius: 6px; font-size: 11.5px; font-weight: 600;">
          <span class="isax isax-sm" data-icon="box"></span> 3D Model Catalog
        </button>
        <button type="button" class="btn btn-sm btn-ghost" id="tab-publish-preset" style="flex: 1; border-radius: 6px; font-size: 11.5px; font-weight: 600;">
          <span class="isax isax-sm" data-icon="layer"></span> Scene / Motion Preset
        </button>
      </div>

      <!-- Preview Thumbnail & Auto Metrics -->
      <div style="display: flex; gap: 12px; margin-bottom: 14px; background: rgba(255,255,255,0.02); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-subtle); align-items: center;">
        <div style="width: 72px; height: 72px; border-radius: 8px; background: #000; border: 1px solid var(--border-color); overflow: hidden; position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center;">
          <img id="publish-preview-thumb" src="" alt="Thumbnail" style="width: 100%; height: 100%; object-fit: contain; display: none;" />
          <span id="publish-thumb-placeholder" class="isax" data-icon="image" style="color: var(--text-muted); font-size: 22px;"></span>
        </div>
        <div style="flex: 1; display: flex; flex-direction: column; gap: 3px;">
          <span style="font-size: 10px; font-weight: 600; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.5px;" id="publish-auto-type-label">Auto Detected</span>
          <div style="font-size: 12px; color: var(--text-primary); font-weight: 500;" id="publish-meta-metrics">Polygons: Calculating...</div>
          <div style="font-size: 11px; color: var(--text-secondary);" id="publish-meta-details">Format: .rvh Holistic 3D Package</div>
        </div>
      </div>

      <!-- Form Inputs -->
      <div style="display: flex; flex-direction: column; gap: 11px;">
        
        <!-- Name Input -->
        <div class="form-group">
          <label style="font-size: 11px; font-weight: 500; color: var(--text-secondary); margin-bottom: 3px; display: block;">Asset Name</label>
          <input type="text" id="publish-input-name" class="input-text" placeholder="e.g. iPhone 16 Pro Desert Titanium" style="width: 100%; height: 32px; border-radius: 6px; padding: 0 10px; font-size: 12px; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-primary);" />
        </div>

        <!-- Category Dropdown -->
        <div class="form-group">
          <label style="font-size: 11px; font-weight: 500; color: var(--text-secondary); margin-bottom: 3px; display: block;">Category</label>
          <select id="publish-select-category" style="width: 100%; height: 32px; border-radius: 6px; padding: 0 8px; font-size: 12px; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-primary);">
            <option value="Mobile">Mobile / Smartphone</option>
            <option value="Laptop">Laptop / MacBook</option>
            <option value="Tablet">Tablet / iPad</option>
            <option value="Monitor">Monitor / Display</option>
            <option value="Packaging">Packaging / Box</option>
            <option value="Apparel">Apparel / Fashion</option>
            <option value="Scene / Room">Scene / Room / Environment</option>
            <option value="Camera Motion">Camera Motion (Preset)</option>
            <option value="Object Motion">Object Motion (Preset)</option>
            <option value="Other">Other / Miscellaneous</option>
          </select>
        </div>

        <!-- Tier & Status Row -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
          <div class="form-group">
            <label style="font-size: 11px; font-weight: 500; color: var(--text-secondary); margin-bottom: 3px; display: block;">Access Tier</label>
            <select id="publish-select-tier" style="width: 100%; height: 32px; border-radius: 6px; padding: 0 8px; font-size: 12px; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-primary);">
              <option value="free">FREE (All Users)</option>
              <option value="pro">PRO (Pro Creators Only)</option>
            </select>
          </div>
          <div class="form-group">
            <label style="font-size: 11px; font-weight: 500; color: var(--text-secondary); margin-bottom: 3px; display: block;">Publish Status</label>
            <select id="publish-select-status" style="width: 100%; height: 32px; border-radius: 6px; padding: 0 8px; font-size: 12px; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-primary);">
              <option value="published">Published (Live in Catalog)</option>
              <option value="draft">Draft (Admin Only)</option>
            </select>
          </div>
        </div>

      </div>

      <!-- Action Buttons -->
      <div style="display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; border-top: 1px solid var(--border-subtle); padding-top: 12px;">
        <button type="button" class="btn btn-secondary btn-sm" id="btn-cancel-publish-modal">Cancel</button>
        <button type="button" class="btn btn-primary btn-sm" id="btn-confirm-publish-cloud">
          <span class="isax" data-icon="cloud-upload"></span>
          <span id="btn-publish-label">Publish to Cloudflare</span>
        </button>
      </div>

    </div>
  </div>

  <!-- Modal: Firebase Google Authentication Only -->
  <div class="virtual-canvas-modal-backdrop" id="modal-signin" style="z-index: 10000; display: none;">
    <div class="virtual-canvas-modal" style="position: relative; max-width: 380px; width: 92vw; height: auto; border-radius: 20px; padding: 32px 24px 28px; background: var(--bg-card, #141418); border: 1px solid var(--border-color); box-shadow: 0 24px 48px rgba(0,0,0,0.75); text-align: center; display: flex; flex-direction: column; align-items: center;">
      
      <!-- Close Button (Top-Right Absolute) -->
      <button type="button" class="btn btn-ghost btn-icon-sm" id="btn-close-signin-modal" data-icon="close-circle" style="position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; color: var(--text-muted); cursor: pointer;" title="Close"></button>

      <!-- Icon & Title (Centered) -->
      <div style="width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, rgba(0, 102, 255, 0.2), rgba(0, 102, 255, 0.05)); border: 1px solid rgba(0, 102, 255, 0.3); display: flex; align-items: center; justify-content: center; color: var(--color-accent, #0066ff); margin-bottom: 14px;">
        <span class="isax" data-icon="user" style="font-size: 26px;"></span>
      </div>

      <h3 style="font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--text-primary, #ffffff); width: 100%;">Welcome to River Visual</h3>
      <p style="font-size: 12px; color: var(--text-secondary, #8e8e93); margin: 0 0 20px; line-height: 1.5; width: 100%;">Sign in with your Google account to access all 3D mockups, scenes, and cloud assets.</p>

      <!-- Auth Error / Status Alert -->
      <div id="auth-alert-box" style="display: none; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 12px; margin-bottom: 16px; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; text-align: left; box-sizing: border-box;"></div>

      <!-- Google 1-Click Sign-In Button -->
      <button type="button" class="btn btn-primary" id="btn-google-auth" style="width: 100%; height: 44px; justify-content: center; gap: 12px; font-size: 13.5px; font-weight: 600; background: #ffffff; color: #1f2937; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 18px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform 0.15s ease, box-shadow 0.15s ease;">
        <svg width="20" height="20" viewBox="0 0 24 24">
          <path fill="#4285F4" d="M23.745 12.27c0-.7-.06-1.4-.19-2.07H12v4.51h6.6c-.29 1.52-1.14 2.82-2.4 3.68v3.05h3.88c2.27-2.09 3.66-5.17 3.66-9.17z"/>
          <path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.88-3.05c-1.08.72-2.45 1.16-4.05 1.16-3.12 0-5.77-2.1-6.72-4.93H1.25v3.15C3.26 21.36 7.33 24 12 24z"/>
          <path fill="#FBBC05" d="M5.28 14.27c-.25-.72-.38-1.49-.38-2.27s.13-1.55.38-2.27V6.58H1.25C.45 8.18 0 9.99 0 12s.45 3.82 1.25 5.42l4.03-3.15z"/>
          <path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.33 0 3.26 2.64 1.25 6.58l4.03 3.15c.95-2.83 3.6-4.98 6.72-4.98z"/>
        </svg>
        <span>Continue with Google</span>
      </button>

      <!-- Value Props / Feature Checklist -->
      <div style="width: 100%; background: var(--bg-surface, #1b1b22); border-radius: 12px; padding: 12px 14px; text-align: left; margin-bottom: 18px; border: 1px solid var(--border-subtle, rgba(255,255,255,0.06)); font-size: 11.5px; color: var(--text-secondary, #a1a1aa); display: flex; flex-direction: column; gap: 8px; box-sizing: border-box;">
        <div style="display: flex; align-items: center; gap: 8px;">
          <span style="color: #22c55e; font-weight: bold;">✓</span>
          <span>Instant 1-click access without passwords</span>
        </div>
        <div style="display: flex; align-items: center; gap: 8px;">
          <span style="color: #22c55e; font-weight: bold;">✓</span>
          <span>Automatic cloud sync across devices</span>
        </div>
        <div style="display: flex; align-items: center; gap: 8px;">
          <span style="color: #22c55e; font-weight: bold;">✓</span>
          <span>Unlock PRO 3D models &amp; motion templates</span>
        </div>
      </div>

      <!-- Footer Disclaimer -->
      <p style="font-size: 10.5px; color: var(--text-muted, #71717a); margin: 0; line-height: 1.5; width: 100%;">
        By continuing, you agree to River Visual's<br />
        <a href="https://rivervisual.app/terms.html" target="_blank" style="color: var(--text-secondary); text-decoration: underline;">Terms of Service</a> and <a href="https://rivervisual.app/privacy.html" target="_blank" style="color: var(--text-secondary); text-decoration: underline;">Privacy Policy</a>.
      </p>

    </div>
  </div>

  <!-- Toast Notification Container -->
  <div class="toast-container" id="toast-container"></div>

  <!-- Application Scripts -->
</body>
</html>
