{% extends "base.html" %}

{% block title %}AV Tools{% endblock %}
{% block nav_av %}active{% endblock %}

{% block content %}
    <main>

        <!-- Convert Audio -->
        <div id="tab-av-convert-audio" class="pdf-section card active">
            <div class="card-body">
                <h2>Convert Audio</h2>
                <p class="meta">Convert an audio file to a different format.</p>

                <div class="drop-zone" id="av-convert-audio-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
                        <path d="M15.54 8.46a5 5 0 010 7.07"/>
                    </svg>
                    <label class="drop-browse">Select audio file<input type="file" id="av-convert-audio-input" accept="audio/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; MP3, WAV, OGG, FLAC, AAC, M4A, and more</p>
                </div>

                <div id="av-convert-audio-info" class="split-info" hidden>
                    <span id="av-convert-audio-name" class="split-name"></span>
                    <span id="av-convert-audio-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('av-convert-audio')">&times;</button>
                </div>

                <div id="av-convert-audio-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Output Format</label>
                            <select id="av-convert-audio-format">
                                <option value="mp3">MP3</option>
                                <option value="wav">WAV</option>
                                <option value="ogg">OGG</option>
                                <option value="flac">FLAC</option>
                                <option value="aac">AAC</option>
                                <option value="m4a">M4A</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="av-convert-audio-actions" class="pdf-actions" hidden>
                    <button id="av-convert-audio-btn" class="btn-download" onclick="doAvConvertAudio()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Convert Audio
                    </button>
                </div>

                <div id="av-convert-audio-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Trim Audio -->
        <div id="tab-av-trim-audio" class="pdf-section card">
            <div class="card-body">
                <h2>Trim Audio</h2>
                <p class="meta">Cut audio to a specific start and end time.</p>

                <div class="drop-zone" id="av-trim-audio-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
                        <line x1="15" y1="9" x2="21" y2="9"/>
                        <line x1="15" y1="15" x2="21" y2="15"/>
                    </svg>
                    <label class="drop-browse">Select audio file<input type="file" id="av-trim-audio-input" accept="audio/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; specify start and end times below</p>
                </div>

                <div id="av-trim-audio-info" class="split-info" hidden>
                    <span id="av-trim-audio-name" class="split-name"></span>
                    <span id="av-trim-audio-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('av-trim-audio')">&times;</button>
                </div>

                <div id="av-trim-audio-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="field">
                            <label>Start time</label>
                            <input type="text" id="av-trim-audio-start" placeholder="00:00:30">
                        </div>
                        <div class="field">
                            <label>End time (optional)</label>
                            <input type="text" id="av-trim-audio-end" placeholder="00:01:30">
                        </div>
                    </div>
                </div>

                <div id="av-trim-audio-actions" class="pdf-actions" hidden>
                    <button id="av-trim-audio-btn" class="btn-download" onclick="doAvTrimAudio()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Trim Audio
                    </button>
                </div>

                <div id="av-trim-audio-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Change Speed -->
        <div id="tab-av-speed" class="pdf-section card">
            <div class="card-body">
                <h2>Change Speed</h2>
                <p class="meta">Speed up or slow down an audio file without changing its pitch.</p>

                <div class="drop-zone" id="av-speed-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
                        <path d="M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07"/>
                    </svg>
                    <label class="drop-browse">Select audio file<input type="file" id="av-speed-input" accept="audio/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; choose a playback speed</p>
                </div>

                <div id="av-speed-info" class="split-info" hidden>
                    <span id="av-speed-name" class="split-name"></span>
                    <span id="av-speed-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('av-speed')">&times;</button>
                </div>

                <div id="av-speed-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Speed</label>
                            <select id="av-speed-value">
                                <option value="0.5">0.5× (half speed)</option>
                                <option value="0.75">0.75×</option>
                                <option value="1.25">1.25×</option>
                                <option value="1.5" selected>1.5×</option>
                                <option value="2">2× (double speed)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="av-speed-actions" class="pdf-actions" hidden>
                    <button id="av-speed-btn" class="btn-download" onclick="doAvSpeed()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Change Speed
                    </button>
                </div>

                <div id="av-speed-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Extract Audio -->
        <div id="tab-av-extract-audio" class="pdf-section card">
            <div class="card-body">
                <h2>Extract Audio</h2>
                <p class="meta">Pull the audio track out of a video file.</p>

                <div class="drop-zone" id="av-extract-audio-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/>
                        <line x1="7" y1="2" x2="7" y2="22"/>
                        <line x1="17" y1="2" x2="17" y2="22"/>
                        <line x1="2" y1="12" x2="22" y2="12"/>
                        <line x1="2" y1="7" x2="7" y2="7"/>
                        <line x1="2" y1="17" x2="7" y2="17"/>
                        <line x1="17" y1="17" x2="22" y2="17"/>
                        <line x1="17" y1="7" x2="22" y2="7"/>
                    </svg>
                    <label class="drop-browse">Select video file<input type="file" id="av-extract-audio-input" accept="video/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; MP4, MKV, MOV, AVI, and more</p>
                </div>

                <div id="av-extract-audio-info" class="split-info" hidden>
                    <span id="av-extract-audio-name" class="split-name"></span>
                    <span id="av-extract-audio-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('av-extract-audio')">&times;</button>
                </div>

                <div id="av-extract-audio-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Audio Format</label>
                            <select id="av-extract-audio-format">
                                <option value="mp3">MP3</option>
                                <option value="wav">WAV</option>
                                <option value="aac">AAC</option>
                                <option value="flac">FLAC</option>
                                <option value="ogg">OGG</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="av-extract-audio-actions" class="pdf-actions" hidden>
                    <button id="av-extract-audio-btn" class="btn-download" onclick="doAvExtractAudio()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Extract Audio
                    </button>
                </div>

                <div id="av-extract-audio-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Trim Video -->
        <div id="tab-av-trim-video" class="pdf-section card">
            <div class="card-body">
                <h2>Trim Video</h2>
                <p class="meta">Cut a video to a specific start and end time.</p>

                <div class="drop-zone" id="av-trim-video-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="23 7 16 12 23 17 23 7"/>
                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                    </svg>
                    <label class="drop-browse">Select video file<input type="file" id="av-trim-video-input" accept="video/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; specify start and end times below</p>
                </div>

                <div id="av-trim-video-info" class="split-info" hidden>
                    <span id="av-trim-video-name" class="split-name"></span>
                    <span id="av-trim-video-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('av-trim-video')">&times;</button>
                </div>

                <div id="av-trim-video-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="field">
                            <label>Start time</label>
                            <input type="text" id="av-trim-video-start" placeholder="00:00:30">
                        </div>
                        <div class="field">
                            <label>End time (optional)</label>
                            <input type="text" id="av-trim-video-end" placeholder="00:01:30">
                        </div>
                    </div>
                </div>

                <div id="av-trim-video-actions" class="pdf-actions" hidden>
                    <button id="av-trim-video-btn" class="btn-download" onclick="doAvTrimVideo()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Trim Video
                    </button>
                </div>

                <div id="av-trim-video-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Compress Video -->
        <div id="tab-av-compress-video" class="pdf-section card">
            <div class="card-body">
                <h2>Compress Video</h2>
                <p class="meta">Re-encode a video at a lower bitrate to reduce file size.</p>

                <div class="drop-zone" id="av-compress-video-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="23 7 16 12 23 17 23 7"/>
                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                    </svg>
                    <label class="drop-browse">Select video file<input type="file" id="av-compress-video-input" accept="video/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; outputs H.264 MP4 &middot; may take a few minutes</p>
                </div>

                <div id="av-compress-video-info" class="split-info" hidden>
                    <span id="av-compress-video-name" class="split-name"></span>
                    <span id="av-compress-video-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('av-compress-video')">&times;</button>
                </div>

                <div id="av-compress-video-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Quality</label>
                            <select id="av-compress-video-quality">
                                <option value="high">High (larger file, better quality)</option>
                                <option value="medium" selected>Medium (balanced)</option>
                                <option value="low">Low (smallest file)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="av-compress-video-actions" class="pdf-actions" hidden>
                    <button id="av-compress-video-btn" class="btn-download" onclick="doAvCompressVideo()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Compress Video
                    </button>
                </div>

                <div id="av-compress-video-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Convert Video -->
        <div id="tab-av-convert-video" class="pdf-section card">
            <div class="card-body">
                <h2>Convert Video</h2>
                <p class="meta">Convert a video to a different container format.</p>

                <div class="drop-zone" id="av-convert-video-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="23 7 16 12 23 17 23 7"/>
                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                    </svg>
                    <label class="drop-browse">Select video file<input type="file" id="av-convert-video-input" accept="video/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; MP4, WebM, AVI, MOV</p>
                </div>

                <div id="av-convert-video-info" class="split-info" hidden>
                    <span id="av-convert-video-name" class="split-name"></span>
                    <span id="av-convert-video-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('av-convert-video')">&times;</button>
                </div>

                <div id="av-convert-video-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Output Format</label>
                            <select id="av-convert-video-format">
                                <option value="mp4">MP4</option>
                                <option value="webm">WebM</option>
                                <option value="avi">AVI</option>
                                <option value="mov">MOV</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="av-convert-video-actions" class="pdf-actions" hidden>
                    <button id="av-convert-video-btn" class="btn-download" onclick="doAvConvertVideo()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Convert Video
                    </button>
                </div>

                <div id="av-convert-video-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Merge Audio -->
        <div id="tab-av-merge-audio" class="pdf-section card">
            <div class="card-body">
                <h2>Merge Audio</h2>
                <p class="meta">Concatenate multiple audio files into one.</p>

                <div class="drop-zone" id="av-merge-audio-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
                        <path d="M15.54 8.46a5 5 0 010 7.07"/>
                    </svg>
                    <label class="drop-browse">Select audio files<input type="file" id="av-merge-audio-input" accept="audio/*" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; add 2+ audio files &middot; drag to reorder</p>
                </div>

                <div id="av-merge-audio-list" class="file-list"></div>

                <div id="av-merge-audio-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Output Format</label>
                            <select id="av-merge-audio-format">
                                <option value="mp3">MP3</option>
                                <option value="wav">WAV</option>
                                <option value="ogg">OGG</option>
                                <option value="flac">FLAC</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="av-merge-audio-actions" class="pdf-actions" hidden>
                    <button id="av-merge-audio-btn" class="btn-download" data-label="Merge Audio" onclick="doAvMergeAudio()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Merge Audio
                    </button>
                </div>

                <div id="av-merge-audio-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Normalize Volume -->
        <div id="tab-av-normalize" class="pdf-section card">
            <div class="card-body">
                <h2>Normalize Volume</h2>
                <p class="meta">Level out volume to a consistent loudness standard (EBU R128).</p>

                <div class="drop-zone" id="av-normalize-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
                        <path d="M19.07 4.93a10 10 0 010 14.14"/>
                        <path d="M15.54 8.46a5 5 0 010 7.07"/>
                    </svg>
                    <label class="drop-browse">Select audio file<input type="file" id="av-normalize-input" accept="audio/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; uses loudnorm filter for broadcast-quality levels</p>
                </div>

                <div id="av-normalize-info" class="split-info" hidden>
                    <span id="av-normalize-name" class="split-name"></span>
                    <span id="av-normalize-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('av-normalize')">&times;</button>
                </div>

                <div id="av-normalize-options" hidden></div>

                <div id="av-normalize-actions" class="pdf-actions" hidden>
                    <button id="av-normalize-btn" class="btn-download" data-label="Normalize Volume" onclick="doAvNormalize()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Normalize Volume
                    </button>
                </div>

                <div id="av-normalize-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Video to GIF -->
        <div id="tab-av-video-to-gif" class="pdf-section card">
            <div class="card-body">
                <h2>Video to GIF</h2>
                <p class="meta">Convert a video clip to an animated GIF.</p>

                <div class="drop-zone" id="av-video-to-gif-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="23 7 16 12 23 17 23 7"/>
                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                    </svg>
                    <label class="drop-browse">Select video file<input type="file" id="av-video-to-gif-input" accept="video/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; choose FPS and width below</p>
                </div>

                <div id="av-video-to-gif-info" class="split-info" hidden>
                    <span id="av-video-to-gif-name" class="split-name"></span>
                    <span id="av-video-to-gif-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('av-video-to-gif')">&times;</button>
                </div>

                <div id="av-video-to-gif-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>FPS</label>
                            <select id="av-video-to-gif-fps">
                                <option value="5">5 fps (small file)</option>
                                <option value="10" selected>10 fps (balanced)</option>
                                <option value="15">15 fps (smooth)</option>
                                <option value="24">24 fps (cinematic)</option>
                            </select>
                        </div>
                        <div class="select-wrap">
                            <label>Width</label>
                            <select id="av-video-to-gif-width">
                                <option value="320">320px</option>
                                <option value="480" selected>480px</option>
                                <option value="640">640px</option>
                                <option value="800">800px</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="av-video-to-gif-actions" class="pdf-actions" hidden>
                    <button id="av-video-to-gif-btn" class="btn-download" data-label="Convert to GIF" onclick="doAvVideoToGif()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Convert to GIF
                    </button>
                </div>

                <div id="av-video-to-gif-error" class="error" hidden></div>
            </div>
        </div>
        <!-- Reverse Audio -->
        <div id="tab-reverse-audio" class="pdf-section card">
            <div class="card-body">
                <h2>Reverse Audio</h2>
                <p class="meta">Play an audio file backwards.</p>

                <div class="drop-zone" id="reverse-audio-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
                        <polyline points="19 1 15 5 19 9"/>
                        <path d="M15 5h4a2 2 0 012 2v10"/>
                    </svg>
                    <label class="drop-browse">Select audio file<input type="file" id="reverse-audio-input" accept="audio/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; reverses the entire audio track</p>
                </div>

                <div id="reverse-audio-info" class="split-info" hidden>
                    <span id="reverse-audio-name" class="split-name"></span>
                    <span id="reverse-audio-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('reverse-audio')">&times;</button>
                </div>

                <div id="reverse-audio-options" hidden></div>

                <div id="reverse-audio-actions" class="pdf-actions" hidden>
                    <button id="reverse-audio-btn" class="btn-download" onclick="doReverseAudio()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Reverse Audio
                    </button>
                </div>

                <div id="reverse-audio-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Change Pitch -->
        <div id="tab-pitch" class="pdf-section card">
            <div class="card-body">
                <h2>Change Pitch</h2>
                <p class="meta">Shift the pitch of an audio file up or down by semitones.</p>

                <div class="drop-zone" id="pitch-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
                        <path d="M15 3v18"/>
                        <polyline points="12 6 15 3 18 6"/>
                        <polyline points="12 18 15 21 18 18"/>
                    </svg>
                    <label class="drop-browse">Select audio file<input type="file" id="pitch-input" accept="audio/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; adjust pitch in semitones</p>
                </div>

                <div id="pitch-info" class="split-info" hidden>
                    <span id="pitch-name" class="split-name"></span>
                    <span id="pitch-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('pitch')">&times;</button>
                </div>

                <div id="pitch-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="field">
                            <label>Semitones (-12 to 12)</label>
                            <input type="number" id="pitch-semitones" min="-12" max="12" value="0" step="1">
                        </div>
                    </div>
                </div>

                <div id="pitch-actions" class="pdf-actions" hidden>
                    <button id="pitch-btn" class="btn-download" onclick="doPitch()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Change Pitch
                    </button>
                </div>

                <div id="pitch-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Audio Equalizer -->
        <div id="tab-equalizer" class="pdf-section card">
            <div class="card-body">
                <h2>Audio Equalizer</h2>
                <p class="meta">Adjust bass, mid, and treble frequency bands.</p>

                <div class="drop-zone" id="equalizer-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <line x1="4" y1="21" x2="4" y2="14"/>
                        <line x1="4" y1="10" x2="4" y2="3"/>
                        <line x1="12" y1="21" x2="12" y2="12"/>
                        <line x1="12" y1="8" x2="12" y2="3"/>
                        <line x1="20" y1="21" x2="20" y2="16"/>
                        <line x1="20" y1="12" x2="20" y2="3"/>
                        <line x1="1" y1="14" x2="7" y2="14"/>
                        <line x1="9" y1="8" x2="15" y2="8"/>
                        <line x1="17" y1="16" x2="23" y2="16"/>
                    </svg>
                    <label class="drop-browse">Select audio file<input type="file" id="equalizer-input" accept="audio/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; tweak bass, mid, and treble</p>
                </div>

                <div id="equalizer-info" class="split-info" hidden>
                    <span id="equalizer-name" class="split-name"></span>
                    <span id="equalizer-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('equalizer')">&times;</button>
                </div>

                <div id="equalizer-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="field">
                            <label>Bass <span id="eq-bass-val">0</span> dB</label>
                            <input type="range" id="eq-bass" min="-10" max="10" value="0" step="1" oninput="document.getElementById('eq-bass-val').textContent=this.value">
                        </div>
                        <div class="field">
                            <label>Mid <span id="eq-mid-val">0</span> dB</label>
                            <input type="range" id="eq-mid" min="-10" max="10" value="0" step="1" oninput="document.getElementById('eq-mid-val').textContent=this.value">
                        </div>
                        <div class="field">
                            <label>Treble <span id="eq-treble-val">0</span> dB</label>
                            <input type="range" id="eq-treble" min="-10" max="10" value="0" step="1" oninput="document.getElementById('eq-treble-val').textContent=this.value">
                        </div>
                    </div>
                </div>

                <div id="equalizer-actions" class="pdf-actions" hidden>
                    <button id="equalizer-btn" class="btn-download" onclick="doEqualizer()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Apply Equalizer
                    </button>
                </div>

                <div id="equalizer-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Audio Fade -->
        <div id="tab-fade" class="pdf-section card">
            <div class="card-body">
                <h2>Audio Fade</h2>
                <p class="meta">Add fade-in and fade-out effects to an audio file.</p>

                <div class="drop-zone" id="fade-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
                        <path d="M15 12h7"/>
                        <path d="M15 12l3-4"/>
                        <path d="M22 12l-3 4"/>
                    </svg>
                    <label class="drop-browse">Select audio file<input type="file" id="fade-input" accept="audio/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; set fade-in and fade-out durations</p>
                </div>

                <div id="fade-info" class="split-info" hidden>
                    <span id="fade-name" class="split-name"></span>
                    <span id="fade-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('fade')">&times;</button>
                </div>

                <div id="fade-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="field">
                            <label>Fade in (seconds)</label>
                            <input type="number" id="fade-in" min="0" step="0.5" value="0" placeholder="0">
                        </div>
                        <div class="field">
                            <label>Fade out (seconds)</label>
                            <input type="number" id="fade-out" min="0" step="0.5" value="0" placeholder="0">
                        </div>
                        <div class="field">
                            <label>Duration (seconds, optional)</label>
                            <input type="number" id="fade-duration" min="0" step="0.1" placeholder="auto">
                        </div>
                    </div>
                </div>

                <div id="fade-actions" class="pdf-actions" hidden>
                    <button id="fade-btn" class="btn-download" onclick="doFade()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Apply Fade
                    </button>
                </div>

                <div id="fade-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Crop Video -->
        <div id="tab-crop-video" class="pdf-section card">
            <div class="card-body">
                <h2>Crop Video</h2>
                <p class="meta">Crop a video to a specific region.</p>

                <div class="drop-zone" id="crop-video-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M6.13 1L6 16a2 2 0 002 2h15"/>
                        <path d="M1 6.13L16 6a2 2 0 012 2v15"/>
                    </svg>
                    <label class="drop-browse">Select video file<input type="file" id="crop-video-input" accept="video/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; specify crop dimensions below</p>
                </div>

                <div id="crop-video-info" class="split-info" hidden>
                    <span id="crop-video-name" class="split-name"></span>
                    <span id="crop-video-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('crop-video')">&times;</button>
                </div>

                <div id="crop-video-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="field">
                            <label>Width (px)</label>
                            <input type="number" id="crop-video-width" min="1" placeholder="640">
                        </div>
                        <div class="field">
                            <label>Height (px)</label>
                            <input type="number" id="crop-video-height" min="1" placeholder="480">
                        </div>
                        <div class="field">
                            <label>X offset (px)</label>
                            <input type="number" id="crop-video-x" min="0" value="0">
                        </div>
                        <div class="field">
                            <label>Y offset (px)</label>
                            <input type="number" id="crop-video-y" min="0" value="0">
                        </div>
                    </div>
                </div>

                <div id="crop-video-actions" class="pdf-actions" hidden>
                    <button id="crop-video-btn" class="btn-download" onclick="doCropVideo()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Crop Video
                    </button>
                </div>

                <div id="crop-video-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Rotate Video -->
        <div id="tab-rotate-video" class="pdf-section card">
            <div class="card-body">
                <h2>Rotate Video</h2>
                <p class="meta">Rotate a video by 90, 180, or 270 degrees.</p>

                <div class="drop-zone" id="rotate-video-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polyline points="1 4 1 10 7 10"/>
                        <path d="M3.51 15a9 9 0 102.13-9.36L1 10"/>
                    </svg>
                    <label class="drop-browse">Select video file<input type="file" id="rotate-video-input" accept="video/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; choose rotation angle</p>
                </div>

                <div id="rotate-video-info" class="split-info" hidden>
                    <span id="rotate-video-name" class="split-name"></span>
                    <span id="rotate-video-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('rotate-video')">&times;</button>
                </div>

                <div id="rotate-video-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Angle</label>
                            <select id="rotate-video-angle">
                                <option value="90">90° clockwise</option>
                                <option value="180">180°</option>
                                <option value="270">270° clockwise</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="rotate-video-actions" class="pdf-actions" hidden>
                    <button id="rotate-video-btn" class="btn-download" onclick="doRotateVideo()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Rotate Video
                    </button>
                </div>

                <div id="rotate-video-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Resize Video -->
        <div id="tab-resize-video" class="pdf-section card">
            <div class="card-body">
                <h2>Resize Video</h2>
                <p class="meta">Change the resolution of a video.</p>

                <div class="drop-zone" id="resize-video-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polyline points="15 3 21 3 21 9"/>
                        <polyline points="9 21 3 21 3 15"/>
                        <line x1="21" y1="3" x2="14" y2="10"/>
                        <line x1="3" y1="21" x2="10" y2="14"/>
                    </svg>
                    <label class="drop-browse">Select video file<input type="file" id="resize-video-input" accept="video/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; specify new dimensions</p>
                </div>

                <div id="resize-video-info" class="split-info" hidden>
                    <span id="resize-video-name" class="split-name"></span>
                    <span id="resize-video-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('resize-video')">&times;</button>
                </div>

                <div id="resize-video-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="field">
                            <label>Width (px)</label>
                            <input type="number" id="resize-video-width" min="1" placeholder="1280">
                        </div>
                        <div class="field">
                            <label>Height (px)</label>
                            <input type="number" id="resize-video-height" min="1" placeholder="720">
                        </div>
                    </div>
                </div>

                <div id="resize-video-actions" class="pdf-actions" hidden>
                    <button id="resize-video-btn" class="btn-download" onclick="doResizeVideo()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Resize Video
                    </button>
                </div>

                <div id="resize-video-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Reverse Video -->
        <div id="tab-reverse-video" class="pdf-section card">
            <div class="card-body">
                <h2>Reverse Video</h2>
                <p class="meta">Play a video backwards.</p>

                <div class="drop-zone" id="reverse-video-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="23 7 16 12 23 17 23 7"/>
                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                        <polyline points="10 8 6 12 10 16"/>
                    </svg>
                    <label class="drop-browse">Select video file<input type="file" id="reverse-video-input" accept="video/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; reverses the entire video</p>
                </div>

                <div id="reverse-video-info" class="split-info" hidden>
                    <span id="reverse-video-name" class="split-name"></span>
                    <span id="reverse-video-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('reverse-video')">&times;</button>
                </div>

                <div id="reverse-video-options" hidden></div>

                <div id="reverse-video-actions" class="pdf-actions" hidden>
                    <button id="reverse-video-btn" class="btn-download" onclick="doReverseVideo()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Reverse Video
                    </button>
                </div>

                <div id="reverse-video-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Loop Video -->
        <div id="tab-loop-video" class="pdf-section card">
            <div class="card-body">
                <h2>Loop Video</h2>
                <p class="meta">Repeat a video a specified number of times.</p>

                <div class="drop-zone" id="loop-video-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polyline points="17 1 21 5 17 9"/>
                        <path d="M3 11V9a4 4 0 014-4h14"/>
                        <polyline points="7 23 3 19 7 15"/>
                        <path d="M21 13v2a4 4 0 01-4 4H3"/>
                    </svg>
                    <label class="drop-browse">Select video file<input type="file" id="loop-video-input" accept="video/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; choose how many times to loop</p>
                </div>

                <div id="loop-video-info" class="split-info" hidden>
                    <span id="loop-video-name" class="split-name"></span>
                    <span id="loop-video-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('loop-video')">&times;</button>
                </div>

                <div id="loop-video-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="field">
                            <label>Loop count</label>
                            <input type="number" id="loop-video-count" min="2" value="2" step="1">
                        </div>
                    </div>
                </div>

                <div id="loop-video-actions" class="pdf-actions" hidden>
                    <button id="loop-video-btn" class="btn-download" onclick="doLoopVideo()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Loop Video
                    </button>
                </div>

                <div id="loop-video-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Mute Video -->
        <div id="tab-mute-video" class="pdf-section card">
            <div class="card-body">
                <h2>Mute Video</h2>
                <p class="meta">Remove the audio track from a video file.</p>

                <div class="drop-zone" id="mute-video-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
                        <line x1="23" y1="9" x2="17" y2="15"/>
                        <line x1="17" y1="9" x2="23" y2="15"/>
                    </svg>
                    <label class="drop-browse">Select video file<input type="file" id="mute-video-input" accept="video/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; strips all audio from the video</p>
                </div>

                <div id="mute-video-info" class="split-info" hidden>
                    <span id="mute-video-name" class="split-name"></span>
                    <span id="mute-video-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAvFile('mute-video')">&times;</button>
                </div>

                <div id="mute-video-options" hidden></div>

                <div id="mute-video-actions" class="pdf-actions" hidden>
                    <button id="mute-video-btn" class="btn-download" onclick="doMuteVideo()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Mute Video
                    </button>
                </div>

                <div id="mute-video-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Add Audio to Video -->
        <div id="tab-add-audio" class="pdf-section card">
            <div class="card-body">
                <h2>Add Audio to Video</h2>
                <p class="meta">Replace or add an audio track to a video file.</p>

                <div class="drop-zone" id="add-audio-video-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="23 7 16 12 23 17 23 7"/>
                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                    </svg>
                    <label class="drop-browse">Select video file<input type="file" id="add-audio-video-input" accept="video/*" hidden></label>
                    <p class="drop-hint">or drop a video file here</p>
                </div>

                <div id="add-audio-video-info" class="split-info" hidden>
                    <span id="add-audio-video-name" class="split-name"></span>
                    <span id="add-audio-video-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAddAudioVideo()">&times;</button>
                </div>

                <div class="drop-zone" id="add-audio-audio-drop" style="margin-top: 16px;">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
                        <path d="M15.54 8.46a5 5 0 010 7.07"/>
                    </svg>
                    <label class="drop-browse">Select audio file<input type="file" id="add-audio-audio-input" accept="audio/*" hidden></label>
                    <p class="drop-hint">or drop an audio file here</p>
                </div>

                <div id="add-audio-audio-info" class="split-info" hidden>
                    <span id="add-audio-audio-name" class="split-name"></span>
                    <span id="add-audio-audio-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAddAudioAudio()">&times;</button>
                </div>

                <div id="add-audio-actions" class="pdf-actions" hidden>
                    <button id="add-audio-btn" class="btn-download" onclick="doAddAudio()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Add Audio
                    </button>
                </div>

                <div id="add-audio-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Burn Subtitles -->
        <div id="tab-burn-subs" class="pdf-section card">
            <div class="card-body">
                <h2>Burn Subtitles</h2>
                <p class="meta">Hardcode subtitles from an SRT file into a video.</p>

                <div class="drop-zone" id="burn-subs-video-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="23 7 16 12 23 17 23 7"/>
                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                    </svg>
                    <label class="drop-browse">Select video file<input type="file" id="burn-subs-video-input" accept="video/*" hidden></label>
                    <p class="drop-hint">or drop a video file here</p>
                </div>

                <div id="burn-subs-video-info" class="split-info" hidden>
                    <span id="burn-subs-video-name" class="split-name"></span>
                    <span id="burn-subs-video-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearBurnSubsVideo()">&times;</button>
                </div>

                <div class="drop-zone" id="burn-subs-srt-drop" style="margin-top: 16px;">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="16" y1="13" x2="8" y2="13"/>
                        <line x1="16" y1="17" x2="8" y2="17"/>
                    </svg>
                    <label class="drop-browse">Select SRT file<input type="file" id="burn-subs-srt-input" accept=".srt" hidden></label>
                    <p class="drop-hint">or drop an .srt subtitle file here</p>
                </div>

                <div id="burn-subs-srt-info" class="split-info" hidden>
                    <span id="burn-subs-srt-name" class="split-name"></span>
                    <span id="burn-subs-srt-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearBurnSubsSrt()">&times;</button>
                </div>

                <div id="burn-subs-actions" class="pdf-actions" hidden>
                    <button id="burn-subs-btn" class="btn-download" onclick="doBurnSubs()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Burn Subtitles
                    </button>
                </div>

                <div id="burn-subs-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Voice Recorder -->
        <div id="tab-av-record-audio" class="pdf-section card">
            <div class="card-body">
                <h2>Voice Recorder</h2>
                <p class="meta">Record audio from your microphone. No data leaves your machine.</p>

                <div class="recorder-area">
                    <canvas id="recorder-audio-waveform" class="recorder-waveform" width="600" height="100"></canvas>
                    <div class="recorder-timer" id="recorder-audio-timer">00:00</div>
                    <div class="recorder-controls">
                        <button id="recorder-audio-start" class="btn-download recorder-btn-start" onclick="startAudioRecording()">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
                            Start Recording
                        </button>
                        <button id="recorder-audio-pause" class="btn-secondary" onclick="pauseAudioRecording()" hidden>Pause</button>
                        <button id="recorder-audio-stop" class="btn-danger" onclick="stopAudioRecording()" hidden>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>
                            Stop
                        </button>
                    </div>
                </div>

                <div id="recorder-audio-result" hidden>
                    <audio id="recorder-audio-player" controls style="width:100%;margin:16px 0;"></audio>
                    <div class="control-row" style="margin-bottom:12px;">
                        <div class="select-wrap">
                            <label>Format</label>
                            <select id="recorder-audio-format">
                                <option value="webm" selected>WebM (original)</option>
                                <option value="wav">WAV</option>
                                <option value="mp3">MP3</option>
                            </select>
                        </div>
                    </div>
                    <div class="pdf-actions">
                        <button id="recorder-audio-download" class="btn-download" onclick="downloadAudioRecording()">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                            Download Recording
                        </button>
                        <button class="btn-secondary" onclick="resetAudioRecording()">New Recording</button>
                    </div>
                </div>

                <div id="recorder-audio-error" class="error" hidden></div>
            </div>
        </div>

        <!-- Screen Recorder -->
        <div id="tab-av-record-screen" class="pdf-section card">
            <div class="card-body">
                <h2>Screen Recorder</h2>
                <p class="meta">Record your screen, window, or browser tab. Stays 100% local.</p>

                <div class="recorder-area">
                    <div class="recorder-timer" id="recorder-screen-timer">00:00</div>
                    <div class="recorder-controls">
                        <button id="recorder-screen-start" class="btn-download recorder-btn-start" onclick="startScreenRecording()">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                            Start Recording
                        </button>
                        <button id="recorder-screen-stop" class="btn-danger" onclick="stopScreenRecording()" hidden>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>
                            Stop
                        </button>
                    </div>
                    <div style="margin-top:12px;">
                        <label class="check-label">
                            <input type="checkbox" id="recorder-screen-audio"> Include system audio (if supported)
                        </label>
                    </div>
                </div>

                <div id="recorder-screen-result" hidden>
                    <video id="recorder-screen-player" controls style="width:100%;max-height:400px;margin:16px 0;border-radius:8px;background:#000;"></video>
                    <div class="pdf-actions">
                        <button id="recorder-screen-download" class="btn-download" onclick="downloadScreenRecording()">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                            Download Recording
                        </button>
                        <button class="btn-secondary" onclick="resetScreenRecording()">New Recording</button>
                    </div>
                </div>

                <div id="recorder-screen-error" class="error" hidden></div>
            </div>
        </div>
    </main>
{% endblock %}

{% block scripts %}
    <script src="/static/av.js?v={{ version }}"></script>
{% endblock %}