<div class="report-hint">
        Click an allele segment to open the detailed report and genome browser. Tooltip content updates after rename edits.
    </div>
    <div class="controls">
        <label>
            Font size
            <input id="plot-font-size" type="number" min="6" max="72" value="__INITIAL_FONT_SIZE__">
        </label>
        <div class="controls__actions">
            <button class="apply-btn" id="plot-style-apply">Apply</button>
            <button class="reset-btn" id="plot-style-reset">Reset</button>
        </div>
    </div>
    <div class="color-controls">
        <div class="color-controls__title">Bar colors (click label to open picker)</div>
        <div class="color-controls__list" id="color-picker-list"></div>
    </div>
    <div class="allele-editor">
        <div class="allele-editor__title">Allele editor</div>
        <div class="allele-editor__hint">Select one or more alleles to rename them in batch.</div>
        <div class="allele-editor__list" id="allele-group-list"></div>
        <div class="allele-editor__actions">
            <label>
                Rename selected alleles
                <input id="allele-rename-input" type="text" placeholder="e.g. Others">
            </label>
            <button id="allele-rename-apply" type="button">Rename</button>
            <button id="allele-editor-reset" type="button">Reset allele edits</button>
        </div>
        <div class="allele-editor__status" id="allele-editor-status"></div>
    </div>
    <div class="export-controls" id="export-controls"></div>
