{% extends "base.html" %}

{% block title %}Image Tools{% endblock %}
{% block nav_images %}active{% endblock %}

{% block head %}
<style>
    /* images2: range sliders, before/after compare, key/value tables, ASCII output, color picker */
    .field input[type="range"] { padding: 0; height: 28px; border: none; background: transparent; box-shadow: none; accent-color: var(--accent); cursor: pointer; }
    .field input[type="range"]:focus { box-shadow: none; }
    .range-value { float: right; font-variant-numeric: tabular-nums; color: var(--text-muted); text-transform: none; letter-spacing: normal; }
    .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .compare-pane { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; min-height: 80px; }
    .compare-pane img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
    .compare-label { position: absolute; top: 8px; left: 8px; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); background: rgba(0,0,0,.55); color: #fff; }
    .kv-wrap { max-height: 480px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
    .kv-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
    .kv-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); position: sticky; top: 0; }
    .kv-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: top; word-break: break-word; }
    .kv-table tr:last-child td { border-bottom: none; }
    .kv-table td.kv-key { width: 34%; color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
    .kv-table td.kv-section { background: var(--surface-3); color: var(--text); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
    .kv-table td.kv-val { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: .78rem; }
    .ascii-output { background: #111; color: #e6e6e6; padding: 14px; border-radius: var(--radius-md); font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 9px; line-height: 1.05; overflow: auto; max-height: 520px; white-space: pre; margin: 0; }
    .cp-canvas-wrap { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); line-height: 0; }
    #colorpicker-canvas { max-width: 100%; height: auto; display: block; cursor: crosshair; image-rendering: auto; }
    .cp-hover { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .82rem; color: var(--text-secondary); font-family: "SF Mono", Menlo, Consolas, monospace; }
    .cp-swatch { display: inline-block; width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border); background: transparent; flex-shrink: 0; }
    .cp-swatch.lg { width: 28px; height: 28px; }
    @media (max-width: 640px) { .compare-grid { grid-template-columns: 1fr; } }
</style>
{% endblock %}

{% block content %}
    <main>

        <!-- Resize -->
        <div id="tab-resize" class="pdf-section card active">
            <div class="card-body">
                <h2>Resize Image</h2>
                <p class="meta">Upload an image and resize it by dimensions or percentage.</p>

                <div class="drop-zone" id="resize-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <circle cx="8.5" cy="8.5" r="1.5"/>
                        <polyline points="21 15 16 10 5 21"/>
                    </svg>
                    <label class="drop-browse">Select images<input type="file" id="resize-input" accept="image/*" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; PNG, JPG, WebP, GIF &middot; batch supported &middot; resize by dimensions or %</p>
                </div>

                <div id="resize-file-list" class="file-list"></div>

                <div id="resize-file-info" class="split-info" hidden>
                    <img id="resize-thumb" class="img-thumb" src="" alt="">
                    <span id="resize-file-name" class="split-name"></span>
                    <span id="resize-dimensions" class="count-badge"></span>
                    <span id="resize-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearResizeFile()">&times;</button>
                </div>

                <div id="resize-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Mode</label>
                            <select id="resize-mode" onchange="toggleResizeMode()">
                                <option value="dimensions">Width / Height</option>
                                <option value="percentage">Percentage</option>
                            </select>
                        </div>
                    </div>

                    <div id="resize-dim-fields" class="field-row" style="margin-top: 10px;">
                        <div class="field">
                            <label>Width (px)</label>
                            <input type="number" id="resize-width" placeholder="e.g. 800" min="1">
                        </div>
                        <div class="field">
                            <label>Height (px)</label>
                            <input type="number" id="resize-height" placeholder="e.g. 600" min="1">
                        </div>
                    </div>

                    <div id="resize-pct-field" class="field" style="margin-top: 10px;" hidden>
                        <label>Percentage (%)</label>
                        <input type="number" id="resize-percentage" placeholder="e.g. 50" min="1" max="1000" value="50">
                    </div>

                    <div style="margin-top: 12px;">
                        <label class="check-label">
                            <input type="checkbox" id="resize-aspect" checked>
                            Maintain aspect ratio
                        </label>
                    </div>
                </div>

                <div id="resize-actions" class="pdf-actions" hidden>
                    <button id="resize-btn" class="btn-download" onclick="doResize()">
                        <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 Image
                    </button>
                </div>

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

        <!-- Compress -->
        <div id="tab-compress" class="pdf-section card">
            <div class="card-body">
                <h2>Compress Images</h2>
                <p class="meta">Reduce image file sizes. Drag to reorder.</p>

                <div class="drop-zone" id="compress-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <circle cx="8.5" cy="8.5" r="1.5"/>
                        <polyline points="21 15 16 10 5 21"/>
                    </svg>
                    <label class="drop-browse">Select images<input type="file" id="compress-input" accept="image/*" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; batch supported &middot; choose High / Medium / Low quality</p>
                </div>

                <div id="compress-list" class="file-list"></div>

                <div id="compress-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Quality</label>
                            <select id="compress-quality">
                                <option value="high">High (85%)</option>
                                <option value="medium" selected>Medium (60%)</option>
                                <option value="low">Low (30%)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="compress-actions" class="pdf-actions" hidden>
                    <button id="compress-btn" class="btn-download" onclick="doCompress()">
                        <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 Images
                    </button>
                </div>

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

        <!-- Convert Format -->
        <div id="tab-imgconvert" class="pdf-section card">
            <div class="card-body">
                <h2>Convert Image Format</h2>
                <p class="meta">Convert images between PNG, JPG, and WebP.</p>

                <div class="drop-zone" id="iconvert-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <circle cx="8.5" cy="8.5" r="1.5"/>
                        <polyline points="21 15 16 10 5 21"/>
                    </svg>
                    <label class="drop-browse">Select images<input type="file" id="iconvert-input" accept="image/*,.heic,.heif" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; converts PNG ↔ JPG ↔ WebP &middot; HEIC input supported &middot; batch supported</p>
                </div>

                <div id="iconvert-list" class="file-list"></div>

                <div id="iconvert-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Target Format</label>
                            <select id="iconvert-format">
                                <option value="png">PNG</option>
                                <option value="jpg">JPG</option>
                                <option value="webp">WebP</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="iconvert-actions" class="pdf-actions" hidden>
                    <button id="iconvert-btn" class="btn-download" onclick="doImageConvert()">
                        <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 Images
                    </button>
                </div>

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

        <!-- Crop -->
        <div id="tab-crop" class="pdf-section card">
            <div class="card-body">
                <h2>Crop Image</h2>
                <p class="meta">Crop an image to a specific region by specifying pixel coordinates.</p>

                <div class="drop-zone" id="crop-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polyline points="6 2 6 22"/><polyline points="2 6 6 6"/><polyline points="2 18 6 18"/>
                        <polyline points="18 2 18 22"/><polyline points="22 6 18 6"/><polyline points="22 18 18 18"/>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="crop-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; PNG, JPG, WebP &middot; enter pixel crop bounds below</p>
                </div>

                <div id="crop-file-info" class="split-info" hidden>
                    <img id="crop-thumb" class="img-thumb" src="" alt="">
                    <span id="crop-file-name" class="split-name"></span>
                    <span id="crop-dimensions" class="count-badge"></span>
                    <button class="split-remove" onclick="clearCropFile()">&times;</button>
                </div>

                <div id="crop-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="field">
                            <label>Left (px)</label>
                            <input type="number" id="crop-left" value="0" min="0">
                        </div>
                        <div class="field">
                            <label>Top (px)</label>
                            <input type="number" id="crop-top" value="0" min="0">
                        </div>
                        <div class="field">
                            <label>Right (px)</label>
                            <input type="number" id="crop-right" placeholder="full width" min="1">
                        </div>
                        <div class="field">
                            <label>Bottom (px)</label>
                            <input type="number" id="crop-bottom" placeholder="full height" min="1">
                        </div>
                    </div>
                </div>

                <div id="crop-actions" class="pdf-actions" hidden>
                    <button id="crop-btn" class="btn-download" onclick="doCrop()">
                        <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 Image
                    </button>
                </div>

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

        <!-- Rotate -->
        <div id="tab-rotate" class="pdf-section card">
            <div class="card-body">
                <h2>Rotate Image</h2>
                <p class="meta">Rotate an image clockwise by a set angle.</p>

                <div class="drop-zone" id="rotate-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polyline points="23 4 23 10 17 10"/>
                        <path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/>
                    </svg>
                    <label class="drop-browse">Select images<input type="file" id="rotate-input" accept="image/*" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; PNG, JPG, WebP &middot; batch supported &middot; choose rotation angle</p>
                </div>

                <div id="rotate-file-list" class="file-list"></div>

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

                <div id="rotate-actions" class="pdf-actions" hidden>
                    <button id="rotate-btn" class="btn-download" onclick="doRotate()">
                        <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 Image
                    </button>
                </div>

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

        <!-- Strip EXIF -->
        <div id="tab-stripexif" class="pdf-section card">
            <div class="card-body">
                <h2>Strip EXIF Data</h2>
                <p class="meta">Remove all metadata (EXIF, GPS, camera info) from an image before sharing it.</p>

                <div class="drop-zone" id="stripexif-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <line x1="9" y1="9" x2="15" y2="15"/>
                        <line x1="15" y1="9" x2="9" y2="15"/>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="stripexif-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; JPEG, PNG, WebP &middot; strips all metadata</p>
                </div>

                <div id="stripexif-file-info" class="split-info" hidden>
                    <img id="stripexif-thumb" class="img-thumb" src="" alt="">
                    <span id="stripexif-file-name" class="split-name"></span>
                    <span id="stripexif-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearStripExifFile()">&times;</button>
                </div>

                <div id="stripexif-actions" class="pdf-actions" hidden>
                    <button id="stripexif-btn" class="btn-download" onclick="doStripExif()">
                        <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>
                        Strip EXIF
                    </button>
                </div>

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

        <!-- To ICO -->
        <div id="tab-toico" class="pdf-section card">
            <div class="card-body">
                <h2>Convert to ICO</h2>
                <p class="meta">Convert any image to a Windows .ico icon file with multiple sizes.</p>

                <div class="drop-zone" id="toico-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <circle cx="8.5" cy="8.5" r="1.5"/>
                        <polyline points="21 15 16 10 5 21"/>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="toico-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; any image format &middot; choose icon sizes</p>
                </div>

                <div id="toico-file-info" class="split-info" hidden>
                    <img id="toico-thumb" class="img-thumb" src="" alt="">
                    <span id="toico-file-name" class="split-name"></span>
                    <button class="split-remove" onclick="clearToIcoFile()">&times;</button>
                </div>

                <div id="toico-options" hidden>
                    <div style="margin-top: 16px;">
                        <label style="display:block; margin-bottom: 8px; font-size: 0.875rem; color: var(--text-secondary);">Sizes to include</label>
                        <div style="display:flex; gap:12px; flex-wrap:wrap;">
                            <label class="check-label"><input type="checkbox" class="ico-size" value="16" checked> 16×16</label>
                            <label class="check-label"><input type="checkbox" class="ico-size" value="32" checked> 32×32</label>
                            <label class="check-label"><input type="checkbox" class="ico-size" value="48" checked> 48×48</label>
                            <label class="check-label"><input type="checkbox" class="ico-size" value="64" checked> 64×64</label>
                            <label class="check-label"><input type="checkbox" class="ico-size" value="128" checked> 128×128</label>
                            <label class="check-label"><input type="checkbox" class="ico-size" value="256" checked> 256×256</label>
                        </div>
                    </div>
                </div>

                <div id="toico-actions" class="pdf-actions" hidden>
                    <button id="toico-btn" class="btn-download" onclick="doToIco()">
                        <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 ICO
                    </button>
                </div>

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

        <!-- Flip -->
        <div id="tab-flip" class="pdf-section card">
            <div class="card-body">
                <h2>Flip Image</h2>
                <p class="meta">Mirror an image horizontally or vertically.</p>

                <div class="drop-zone" id="flip-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polyline points="7 2 7 22"/><polyline points="17 2 17 22"/>
                        <polyline points="3 6 7 2 11 6"/><polyline points="13 6 17 2 21 6"/>
                    </svg>
                    <label class="drop-browse">Select images<input type="file" id="flip-input" accept="image/*" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; PNG, JPG, WebP &middot; batch supported &middot; flip horizontally or vertically</p>
                </div>

                <div id="flip-file-list" class="file-list"></div>

                <div id="flip-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Direction</label>
                            <select id="flip-direction">
                                <option value="horizontal">Horizontal (mirror)</option>
                                <option value="vertical">Vertical (upside down)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="flip-actions" class="pdf-actions" hidden>
                    <button id="flip-btn" class="btn-download" onclick="doFlip()">
                        <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>
                        Flip Image
                    </button>
                </div>

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

        <!-- Grayscale -->
        <div id="tab-grayscale" class="pdf-section card">
            <div class="card-body">
                <h2>Grayscale</h2>
                <p class="meta">Convert an image to black and white.</p>

                <div class="drop-zone" id="grayscale-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <circle cx="12" cy="12" r="10"/>
                        <path d="M12 2a10 10 0 010 20V2z" fill="currentColor" opacity=".3"/>
                    </svg>
                    <label class="drop-browse">Select images<input type="file" id="grayscale-input" accept="image/*" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; PNG, JPG, WebP &middot; batch supported &middot; converts to B&amp;W</p>
                </div>

                <div id="grayscale-file-list" class="file-list"></div>

                <div id="grayscale-actions" class="pdf-actions" hidden>
                    <button id="grayscale-btn" class="btn-download" onclick="doGrayscale()">
                        <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 Grayscale
                    </button>
                </div>

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

        <!-- Blur -->
        <div id="tab-blur" class="pdf-section card">
            <div class="card-body">
                <h2>Blur Image</h2>
                <p class="meta">Apply Gaussian blur with adjustable intensity.</p>

                <div class="drop-zone" id="blur-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <circle cx="12" cy="12" r="4" stroke-dasharray="2 2"/>
                    </svg>
                    <label class="drop-browse">Select images<input type="file" id="blur-input" accept="image/*" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; PNG, JPG, WebP &middot; batch supported &middot; adjustable blur radius</p>
                </div>

                <div id="blur-file-list" class="file-list"></div>

                <div id="blur-options" hidden>
                    <div class="field" style="margin-top: 16px;">
                        <label>Blur Radius</label>
                        <input type="number" id="blur-radius" value="5" min="1" max="50" step="1">
                    </div>
                </div>

                <div id="blur-actions" class="pdf-actions" hidden>
                    <button id="blur-btn" class="btn-download" onclick="doBlur()">
                        <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 Blur
                    </button>
                </div>

                <div id="blur-error" class="error" hidden></div>
            </div>
        </div>
        <!-- QR Code Generator -->
        <div id="tab-qrcode" class="pdf-section card">
            <div class="card-body">
                <h2>QR Code Generator</h2>
                <p class="meta">Generate a QR code from any text or URL.</p>

                <div class="field" style="margin-top: 16px;">
                    <label>Text or URL</label>
                    <textarea id="qr-text" rows="3" placeholder="https://example.com" style="width:100%;font-family:inherit;resize:vertical;"></textarea>
                </div>

                <div class="field-row" style="margin-top: 12px;">
                    <div class="select-wrap">
                        <label>Size</label>
                        <select id="qr-size">
                            <option value="8">Small</option>
                            <option value="10" selected>Medium</option>
                            <option value="15">Large</option>
                            <option value="20">Extra Large</option>
                        </select>
                    </div>
                    <div class="select-wrap">
                        <label>Error Correction</label>
                        <select id="qr-ec">
                            <option value="L">Low (7%)</option>
                            <option value="M" selected>Medium (15%)</option>
                            <option value="Q">Quartile (25%)</option>
                            <option value="H">High (30%)</option>
                        </select>
                    </div>
                </div>

                <div class="field-row" style="margin-top: 12px;">
                    <div class="field">
                        <label>Foreground</label>
                        <input type="color" id="qr-fill" value="#000000" style="height:36px;width:60px;padding:2px;border:1px solid var(--border);border-radius:4px;cursor:pointer;">
                    </div>
                    <div class="field">
                        <label>Background</label>
                        <input type="color" id="qr-back" value="#ffffff" style="height:36px;width:60px;padding:2px;border:1px solid var(--border);border-radius:4px;cursor:pointer;">
                    </div>
                </div>

                <div class="pdf-actions" style="margin-top: 16px;">
                    <button id="qr-btn" class="btn-download" onclick="doQrGenerate()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
                        Generate QR Code
                    </button>
                </div>

                <div id="qr-preview" hidden style="text-align:center;margin-top:20px;">
                    <img id="qr-img" src="" alt="QR Code" style="max-width:300px;border:1px solid var(--border);border-radius:8px;">
                    <div class="pdf-actions" style="margin-top:12px;">
                        <button class="btn-download" onclick="downloadQr()">
                            <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 PNG
                        </button>
                    </div>
                </div>

                <div id="qr-error" class="error" hidden></div>
            </div>
        </div>
        <!-- Image Watermark -->
        <div id="tab-watermark" class="pdf-section card">
            <div class="card-body">
                <h2>Watermark Image</h2>
                <p class="meta">Add text watermark to an image with adjustable opacity and position.</p>

                <div class="drop-zone" id="imgwm-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <path d="M7 17l4-4 2 2 4-4 4 4"/>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="imgwm-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; PNG, JPG, WebP &middot; add text watermark</p>
                </div>

                <div id="imgwm-file-info" class="split-info" hidden>
                    <img id="imgwm-thumb" class="img-thumb" src="" alt="">
                    <span id="imgwm-file-name" class="split-name"></span>
                    <button class="split-remove" onclick="clearImgWmFile()">&times;</button>
                </div>

                <div id="imgwm-options" hidden>
                    <div class="field" style="margin-top: 16px;">
                        <label>Watermark Text</label>
                        <input type="text" id="imgwm-text" placeholder="e.g. CONFIDENTIAL">
                    </div>
                    <div class="field-row" style="margin-top: 12px; gap: 12px;">
                        <div class="select-wrap">
                            <label>Position</label>
                            <select id="imgwm-position">
                                <option value="center" selected>Center</option>
                                <option value="top-left">Top Left</option>
                                <option value="top-right">Top Right</option>
                                <option value="bottom-left">Bottom Left</option>
                                <option value="bottom-right">Bottom Right</option>
                            </select>
                        </div>
                        <div class="field" style="width: 100px;">
                            <label>Font Size</label>
                            <input type="number" id="imgwm-fontsize" value="36" min="8" max="200">
                        </div>
                        <div class="field" style="width: 100px;">
                            <label>Opacity</label>
                            <input type="number" id="imgwm-opacity" value="128" min="1" max="255">
                        </div>
                    </div>
                </div>

                <div id="imgwm-actions" class="pdf-actions" hidden>
                    <button id="imgwm-btn" class="btn-download" onclick="doImgWatermark()">
                        <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 Watermark
                    </button>
                </div>

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

        <!-- Placeholder Image -->
        <div id="tab-placeholder" class="pdf-section card">
            <div class="card-body">
                <h2>Placeholder Image</h2>
                <p class="meta">Generate a placeholder image of any size with custom colors and text.</p>

                <div class="field-row" style="margin-top: 16px; gap: 12px;">
                    <div class="field">
                        <label>Width (px)</label>
                        <input type="number" id="ph-width" value="800" min="1" max="4000">
                    </div>
                    <div class="field">
                        <label>Height (px)</label>
                        <input type="number" id="ph-height" value="600" min="1" max="4000">
                    </div>
                </div>

                <div class="field-row" style="margin-top: 12px; gap: 12px;">
                    <div class="field">
                        <label>Background</label>
                        <input type="color" id="ph-bg" value="#cccccc" style="height:36px;width:60px;padding:2px;border:1px solid var(--border);border-radius:4px;cursor:pointer;">
                    </div>
                    <div class="field">
                        <label>Text Color</label>
                        <input type="color" id="ph-text-color" value="#666666" style="height:36px;width:60px;padding:2px;border:1px solid var(--border);border-radius:4px;cursor:pointer;">
                    </div>
                    <div class="field" style="flex: 1;">
                        <label>Custom Text (optional)</label>
                        <input type="text" id="ph-text" placeholder="e.g. Hero Banner">
                    </div>
                </div>

                <div class="pdf-actions" style="margin-top: 16px;">
                    <button id="ph-btn" class="btn-download" onclick="doPlaceholder()">
                        <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>
                        Generate Image
                    </button>
                </div>

                <div id="ph-preview" hidden style="text-align:center;margin-top:20px;">
                    <img id="ph-img" src="" alt="Placeholder" style="max-width:100%;border:1px solid var(--border);border-radius:8px;">
                </div>

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

        <!-- HEIC to JPG -->
        <div id="tab-heic" class="pdf-section card">
            <div class="card-body">
                <h2>HEIC to JPG</h2>
                <p class="meta">Convert iPhone HEIC / HEIF photos to JPG or PNG.</p>

                <div class="drop-zone" id="heic-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <circle cx="8.5" cy="8.5" r="1.5"/>
                        <polyline points="21 15 16 10 5 21"/>
                    </svg>
                    <label class="drop-browse">Select HEIC files<input type="file" id="heic-input" accept=".heic,.heif,image/heic,image/heif" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; HEIC, HEIF &middot; batch supported &middot; output JPG or PNG</p>
                </div>

                <div id="heic-file-list" class="file-list"></div>

                <div id="heic-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Output Format</label>
                            <select id="heic-format" onchange="toggleHeicQuality()">
                                <option value="jpg" selected>JPG</option>
                                <option value="png">PNG</option>
                            </select>
                        </div>
                        <div class="field" id="heic-quality-field" style="max-width: 140px;">
                            <label>JPG Quality</label>
                            <input type="number" id="heic-quality" value="90" min="1" max="100">
                        </div>
                    </div>
                </div>

                <div id="heic-actions" class="pdf-actions" hidden>
                    <button id="heic-btn" class="btn-download" onclick="doHeic()">
                        <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 HEIC
                    </button>
                </div>

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

        <!-- Adjust -->
        <div id="tab-adjust" class="pdf-section card">
            <div class="card-body">
                <h2>Adjust Image</h2>
                <p class="meta">Tune brightness, contrast, saturation and sharpness with a live preview.</p>

                <div class="drop-zone" id="adjust-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="6" x2="20" y2="6"/><circle cx="9" cy="6" r="2" fill="var(--surface)"/>
                        <line x1="4" y1="12" x2="20" y2="12"/><circle cx="15" cy="12" r="2" fill="var(--surface)"/>
                        <line x1="4" y1="18" x2="20" y2="18"/><circle cx="7" cy="18" r="2" fill="var(--surface)"/>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="adjust-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; PNG, JPG, WebP &middot; 100% = unchanged</p>
                </div>

                <div id="adjust-file-info" class="split-info" hidden>
                    <img id="adjust-thumb" class="img-thumb" src="" alt="">
                    <span id="adjust-file-name" class="split-name"></span>
                    <span id="adjust-dimensions" class="count-badge"></span>
                    <span id="adjust-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearAdjustFile()">&times;</button>
                </div>

                <div id="adjust-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="field">
                            <label>Brightness <span class="range-value" id="adjust-brightness-val">100%</span></label>
                            <input type="range" id="adjust-brightness" min="0" max="200" value="100" oninput="updateAdjustPreview()">
                        </div>
                        <div class="field">
                            <label>Contrast <span class="range-value" id="adjust-contrast-val">100%</span></label>
                            <input type="range" id="adjust-contrast" min="0" max="200" value="100" oninput="updateAdjustPreview()">
                        </div>
                    </div>
                    <div class="field-row">
                        <div class="field">
                            <label>Saturation <span class="range-value" id="adjust-saturation-val">100%</span></label>
                            <input type="range" id="adjust-saturation" min="0" max="200" value="100" oninput="updateAdjustPreview()">
                        </div>
                        <div class="field">
                            <label>Sharpness <span class="range-value" id="adjust-sharpness-val">100%</span></label>
                            <input type="range" id="adjust-sharpness" min="0" max="200" value="100" oninput="updateAdjustPreview()">
                        </div>
                    </div>
                    <div style="margin-top: 8px;">
                        <button type="button" class="btn-copy" onclick="resetAdjust()">Reset</button>
                    </div>

                    <div class="compare-grid" style="margin-top: 16px;">
                        <div class="compare-pane">
                            <span class="compare-label">Before</span>
                            <img id="adjust-before" src="" alt="Original">
                        </div>
                        <div class="compare-pane">
                            <span class="compare-label">After (preview)</span>
                            <img id="adjust-after" src="" alt="Preview">
                        </div>
                    </div>
                    <p class="drop-hint" style="margin-top: 8px;">Preview is approximate; sharpness is applied on download.</p>
                </div>

                <div id="adjust-actions" class="pdf-actions" hidden>
                    <button id="adjust-btn" class="btn-download" onclick="doAdjust()">
                        <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 &amp; Download
                    </button>
                </div>

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

        <!-- EXIF Viewer -->
        <div id="tab-exif" class="pdf-section card">
            <div class="card-body">
                <h2>EXIF Viewer</h2>
                <p class="meta">Read camera, lens, date and GPS metadata embedded in a photo.</p>

                <div class="drop-zone" id="exif-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <line x1="7" y1="8" x2="17" y2="8"/><line x1="7" y1="12" x2="17" y2="12"/><line x1="7" y1="16" x2="13" y2="16"/>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="exif-input" accept="image/*,.heic,.heif" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; JPG, PNG, WebP, HEIC, TIFF &middot; read only, nothing is modified</p>
                </div>

                <div id="exif-file-info" class="split-info" hidden>
                    <img id="exif-thumb" class="img-thumb" src="" alt="">
                    <span id="exif-file-name" class="split-name"></span>
                    <span id="exif-file-size" class="file-size"></span>
                    <button class="split-remove" onclick="clearExifFile()">&times;</button>
                </div>

                <div id="exif-result" hidden style="margin-top: 16px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                        <span id="exif-count" class="drop-hint"></span>
                        <button class="btn-copy" id="exif-copy-btn" onclick="copyExifJson(this)"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> Copy JSON</button>
                    </div>
                    <div class="kv-wrap"><table class="kv-table" id="exif-table"></table></div>
                </div>

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

        <!-- Border / Padding -->
        <div id="tab-border" class="pdf-section card">
            <div class="card-body">
                <h2>Border / Padding</h2>
                <p class="meta">Add a solid frame or padding around an image, with optional rounded corners.</p>

                <div class="drop-zone" id="border-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="1"/>
                        <rect x="7" y="7" width="10" height="10" rx="1" stroke-dasharray="2 2"/>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="border-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; PNG, JPG, WebP &middot; padding is transparent for PNG</p>
                </div>

                <div id="border-file-info" class="split-info" hidden>
                    <img id="border-thumb" class="img-thumb" src="" alt="">
                    <span id="border-file-name" class="split-name"></span>
                    <span id="border-dimensions" class="count-badge"></span>
                    <button class="split-remove" onclick="clearBorderFile()">&times;</button>
                </div>

                <div id="border-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Mode</label>
                            <select id="border-mode" onchange="toggleBorderMode()">
                                <option value="border" selected>Border (solid frame)</option>
                                <option value="padding">Padding (transparent if PNG)</option>
                            </select>
                        </div>
                        <div class="field" style="max-width: 120px;">
                            <label>Size (px)</label>
                            <input type="number" id="border-size" value="20" min="0" max="2000">
                        </div>
                        <div class="field" style="max-width: 120px;">
                            <label>Radius (px)</label>
                            <input type="number" id="border-radius" value="0" min="0" max="2000">
                        </div>
                        <div class="field" style="max-width: 90px;" id="border-color-field">
                            <label>Color</label>
                            <input type="color" id="border-color" value="#ffffff" style="height:36px;width:60px;padding:2px;border:1px solid var(--border);border-radius:4px;cursor:pointer;">
                        </div>
                    </div>
                    <p class="drop-hint" id="border-mode-hint" style="margin-top: 8px;">Border: a solid colored frame around the image.</p>
                </div>

                <div id="border-actions" class="pdf-actions" hidden>
                    <button id="border-btn" class="btn-download" onclick="doBorder()">
                        <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 Border
                    </button>
                </div>

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

        <!-- Favicon Set -->
        <div id="tab-favicon" class="pdf-section card">
            <div class="card-body">
                <h2>Favicon Set</h2>
                <p class="meta">Generate a complete favicon package (ICO, PNG sizes, Apple touch icon, manifest) from one image.</p>

                <div class="drop-zone" id="favicon-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="18" height="18" rx="4"/>
                        <path d="M12 7l1.5 3.2 3.5.4-2.6 2.4.7 3.5L12 14.8 8.9 16.5l.7-3.5L7 10.6l3.5-.4z"/>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="favicon-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; square images work best (512&times;512 or larger) &middot; center-cropped to square</p>
                </div>

                <div id="favicon-file-info" class="split-info" hidden>
                    <img id="favicon-thumb" class="img-thumb" src="" alt="">
                    <span id="favicon-file-name" class="split-name"></span>
                    <span id="favicon-dimensions" class="count-badge"></span>
                    <button class="split-remove" onclick="clearFaviconFile()">&times;</button>
                </div>

                <div id="favicon-options" hidden>
                    <p class="drop-hint" style="margin-top: 12px;">ZIP includes: favicon.ico (16/32/48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, snippet.html</p>
                </div>

                <div id="favicon-actions" class="pdf-actions" hidden>
                    <button id="favicon-btn" class="btn-download" onclick="doFaviconSet()">
                        <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>
                        Generate Favicon Set
                    </button>
                </div>

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

        <!-- Upscale -->
        <div id="tab-upscale" class="pdf-section card">
            <div class="card-body">
                <h2>Upscale Image</h2>
                <p class="meta">Enlarge an image 2&times;, 3&times; or 4&times; using Lanczos resampling with light sharpening (not AI).</p>

                <div class="drop-zone" id="upscale-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 image<input type="file" id="upscale-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; PNG, JPG, WebP &middot; resampling upscale, output capped at 80 MP</p>
                </div>

                <div id="upscale-file-info" class="split-info" hidden>
                    <img id="upscale-thumb" class="img-thumb" src="" alt="">
                    <span id="upscale-file-name" class="split-name"></span>
                    <span id="upscale-dimensions" class="count-badge"></span>
                    <button class="split-remove" onclick="clearUpscaleFile()">&times;</button>
                </div>

                <div id="upscale-options" hidden>
                    <div class="control-row" style="margin-top: 16px;">
                        <div class="select-wrap">
                            <label>Scale Factor</label>
                            <select id="upscale-factor" onchange="updateUpscaleHint()">
                                <option value="2" selected>2&times;</option>
                                <option value="3">3&times;</option>
                                <option value="4">4&times;</option>
                            </select>
                        </div>
                    </div>
                    <p class="drop-hint" id="upscale-hint" style="margin-top: 8px;"></p>
                </div>

                <div id="upscale-actions" class="pdf-actions" hidden>
                    <button id="upscale-btn" class="btn-download" onclick="doUpscale()">
                        <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>
                        Upscale Image
                    </button>
                </div>

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

        <!-- Collage / Sprite Sheet -->
        <div id="tab-collage" class="pdf-section card">
            <div class="card-body">
                <h2>Collage / Sprite Sheet</h2>
                <p class="meta">Arrange multiple images into a grid, optionally with CSS sprite positions. Drag to reorder.</p>

                <div class="drop-zone" id="collage-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
                        <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
                    </svg>
                    <label class="drop-browse">Select images<input type="file" id="collage-input" accept="image/*" multiple hidden></label>
                    <p class="drop-hint">or drop files here &middot; PNG, JPG, WebP &middot; grid order follows the list</p>
                </div>

                <div id="collage-list" class="file-list"></div>

                <div id="collage-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="field">
                            <label>Columns</label>
                            <input type="number" id="collage-columns" placeholder="auto" min="1" max="100">
                        </div>
                        <div class="field">
                            <label>Cell Size (px)</label>
                            <input type="number" id="collage-cell" value="256" min="8" max="2048">
                        </div>
                        <div class="field">
                            <label>Gap (px)</label>
                            <input type="number" id="collage-gap" value="0" min="0" max="512">
                        </div>
                    </div>
                    <div class="field-row">
                        <div class="select-wrap">
                            <label>Fit</label>
                            <select id="collage-fit">
                                <option value="contain" selected>Contain (whole image)</option>
                                <option value="cover">Cover (fill &amp; crop)</option>
                            </select>
                        </div>
                        <div class="select-wrap">
                            <label>Output</label>
                            <select id="collage-output">
                                <option value="image" selected>PNG image</option>
                                <option value="zip">ZIP (sprite.png + sprite.css)</option>
                            </select>
                        </div>
                        <div class="field" style="max-width: 90px;">
                            <label>Background</label>
                            <input type="color" id="collage-bg" value="#ffffff" style="height:36px;width:60px;padding:2px;border:1px solid var(--border);border-radius:4px;cursor:pointer;">
                        </div>
                    </div>
                    <div style="margin-top: 12px;">
                        <label class="check-label">
                            <input type="checkbox" id="collage-transparent">
                            Transparent background
                        </label>
                    </div>
                    <p class="drop-hint" id="collage-hint" style="margin-top: 8px;"></p>
                </div>

                <div id="collage-actions" class="pdf-actions" hidden>
                    <button id="collage-btn" class="btn-download" onclick="doCollage()">
                        <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>
                        Build Collage
                    </button>
                </div>

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

        <!-- Image to ASCII -->
        <div id="tab-ascii" class="pdf-section card">
            <div class="card-body">
                <h2>Image to ASCII</h2>
                <p class="meta">Turn an image into ASCII art you can paste into a terminal, README, or comment.</p>

                <div class="drop-zone" id="ascii-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <text x="12" y="16" text-anchor="middle" font-size="10" font-family="monospace" fill="currentColor" stroke="none">@#:</text>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="ascii-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; PNG, JPG, WebP &middot; choose width in characters</p>
                </div>

                <div id="ascii-file-info" class="split-info" hidden>
                    <img id="ascii-thumb" class="img-thumb" src="" alt="">
                    <span id="ascii-file-name" class="split-name"></span>
                    <span id="ascii-dimensions" class="count-badge"></span>
                    <button class="split-remove" onclick="clearAsciiFile()">&times;</button>
                </div>

                <div id="ascii-options" hidden>
                    <div class="field-row" style="margin-top: 16px;">
                        <div class="field" style="max-width: 140px;">
                            <label>Width (chars)</label>
                            <input type="number" id="ascii-width" value="100" min="10" max="400">
                        </div>
                        <div class="select-wrap">
                            <label>Character Set</label>
                            <select id="ascii-charset">
                                <option value="standard" selected>Standard (70 levels)</option>
                                <option value="simple">Simple (@%#*+=-:. )</option>
                                <option value="blocks">Blocks (&#9608;&#9619;&#9618;&#9617;)</option>
                            </select>
                        </div>
                    </div>
                    <div style="margin-top: 12px;">
                        <label class="check-label">
                            <input type="checkbox" id="ascii-invert">
                            Invert (for dark terminals / light-on-dark)
                        </label>
                    </div>
                </div>

                <div id="ascii-actions" class="pdf-actions" hidden>
                    <button id="ascii-btn" class="btn-download" onclick="doAscii()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/></svg>
                        Convert to ASCII
                    </button>
                </div>

                <div id="ascii-result" hidden style="margin-top: 16px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px;">
                        <span id="ascii-meta" class="drop-hint"></span>
                        <div style="display: flex; gap: 8px;">
                            <button class="btn-copy" onclick="copyAscii(this)"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> Copy</button>
                            <button class="btn-copy" onclick="downloadAscii()"><svg width="12" height="12" 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 .txt</button>
                        </div>
                    </div>
                    <pre id="ascii-output" class="ascii-output"></pre>
                </div>

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

        <!-- Color Picker -->
        <div id="tab-colorpicker" class="pdf-section card">
            <div class="card-body">
                <h2>Color Picker</h2>
                <p class="meta">Hover to sample colors from an image, click to save them, or extract the dominant palette. Runs entirely in your browser.</p>

                <div class="drop-zone" id="colorpicker-drop">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M3 21l3-1 11-11-2-2L4 18z"/><path d="M14 4l2-2 4 4-2 2"/><path d="M13 7l4 4"/>
                    </svg>
                    <label class="drop-browse">Select image<input type="file" id="colorpicker-input" accept="image/*" hidden></label>
                    <p class="drop-hint">or drop a file here &middot; PNG, JPG, WebP, GIF &middot; nothing is uploaded</p>
                </div>

                <div id="colorpicker-file-info" class="split-info" hidden>
                    <img id="colorpicker-thumb" class="img-thumb" src="" alt="">
                    <span id="colorpicker-file-name" class="split-name"></span>
                    <span id="colorpicker-dimensions" class="count-badge"></span>
                    <button class="split-remove" onclick="clearColorPickerFile()">&times;</button>
                </div>

                <div id="colorpicker-work" hidden style="margin-top: 16px;">
                    <div class="cp-canvas-wrap">
                        <canvas id="colorpicker-canvas"></canvas>
                    </div>
                    <div class="cp-hover" id="colorpicker-hover">
                        <span class="cp-swatch" id="colorpicker-hover-swatch"></span>
                        <span id="colorpicker-hover-text">Hover over the image to sample a color; click to add it to the palette.</span>
                    </div>

                    <div style="display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;">
                        <button class="btn-copy" onclick="extractPalette()">Extract palette (8 colors)</button>
                        <button class="btn-copy" onclick="clearPalette()">Clear</button>
                        <button class="btn-copy" onclick="copyPaletteAll(this)">Copy all HEX</button>
                    </div>

                    <div class="kv-wrap" style="margin-top: 12px;">
                        <table class="kv-table" id="colorpicker-table">
                            <thead><tr><th></th><th>HEX</th><th>RGB</th><th>HSL</th><th></th></tr></thead>
                            <tbody id="colorpicker-palette"></tbody>
                        </table>
                    </div>
                    <p class="drop-hint" id="colorpicker-empty" style="margin-top: 8px;">No colors saved yet.</p>
                </div>

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

    </main>
{% endblock %}

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