(function() {
    'use strict';

    window.IDVE = window.IDVE || {};

    IDVE.Panel = {
        overlay: null,
        isOpen: false,
        currentId: null,
        currentType: null,
        _pendingEditors: [],
        _activeEditorIds: [],
        _pendingColorPickers: [],

        init: function() {},

        openModal: function(type, id) {
            this.closeModal();
            this.currentType = type;
            this.currentId = id;
            this._pendingEditors = [];
            this._activeEditorIds = [];
            this._pendingColorPickers = [];

            var found = IDVE.Editor.findElement(id);
            if (!found) return;

            this.isOpen = true;
            this.overlay = document.createElement('div');
            this.overlay.className = 'idve-modal-overlay idve-settings-modal-overlay';

            var title = this.getTitle(type, found.element);
            var tabs = this.getTabs(type);

            var html = '<div class="idve-modal idve-settings-modal">';
            html += '<div class="idve-modal-header">';
            html += '<h3>' + title + '</h3>';
            html += '<button type="button" class="idve-modal-close">&times;</button>';
            html += '</div>';
            html += '<div class="idve-modal-tabs">';
            for (var i = 0; i < tabs.length; i++) {
                html += '<button type="button" class="idve-modal-tab' + (i === 0 ? ' active' : '') + '" data-tab="' + tabs[i].key + '">' + tabs[i].label + '</button>';
            }
            html += '</div>';
            html += '<div class="idve-modal-body idve-settings-modal-body">';
            for (var j = 0; j < tabs.length; j++) {
                html += '<div class="idve-tab-content' + (j === 0 ? ' active' : '') + '" data-tab="' + tabs[j].key + '"></div>';
            }
            html += '</div>';
            html += '<div class="idve-modal-footer">';
            if (type === 'block' && window.idveData && idveData.aiEnabled) {
                html += '<button type="button" class="idve-btn idve-btn-ai idve-settings-ai-btn"><span class="dashicons dashicons-admin-generic"></span> AI Edit</button>';
            }
            html += '<button type="button" class="idve-btn idve-btn-primary idve-settings-done">Done</button>';
            html += '</div>';
            html += '</div>';

            this.overlay.innerHTML = html;
            document.body.appendChild(this.overlay);

            this.bindModalEvents();
            this.renderTabContents(found.element);
            this._initRichtextEditors();
            this._initColorPickers();
        },

        closeModal: function() {
            this._destroyRichtextEditors();
            if (this.overlay) {
                jQuery(this.overlay).remove();
            }
            this.overlay = null;
            this.isOpen = false;
            this.currentId = null;
            this.currentType = null;
            this._pendingColorPickers = [];
        },

        close: function() {
            this._syncAllEditors();
            this.closeModal();
            IDVE.Editor.clearSelection();
        },

        getTitle: function(type, element) {
            switch (type) {
                case 'section': return 'Section Settings';
                case 'row': return 'Row Settings';
                case 'column': return 'Column Settings';
                case 'block':
                    var def = IDVE.Blocks.get(element.type);
                    return (def ? def.label : 'Block') + ' Settings';
                default: return 'Settings';
            }
        },

        getTabs: function(type) {
            switch (type) {
                case 'section':
                    return [
                        { key: 'content', label: 'General' },
                        { key: 'style', label: 'Style' },
                        { key: 'advanced', label: 'Advanced' }
                    ];
                case 'row':
                    return [
                        { key: 'content', label: 'Layout' },
                        { key: 'style', label: 'Style' },
                        { key: 'advanced', label: 'Advanced' }
                    ];
                case 'column':
                    return [
                        { key: 'content', label: 'General' },
                        { key: 'style', label: 'Style' },
                        { key: 'advanced', label: 'Advanced' }
                    ];
                case 'block':
                    return [
                        { key: 'content', label: 'Content' },
                        { key: 'style', label: 'Style' },
                        { key: 'advanced', label: 'Advanced' }
                    ];
                default:
                    return [{ key: 'content', label: 'Settings' }];
            }
        },

        bindModalEvents: function() {
            var self = this;
            var modal = this.overlay.querySelector('.idve-settings-modal');

            // Close button
            this.overlay.querySelector('.idve-modal-close').addEventListener('click', function() {
                self.close();
            });

            // Done button
            this.overlay.querySelector('.idve-settings-done').addEventListener('click', function() {
                self.close();
            });

            // AI Edit button
            var aiBtn = this.overlay.querySelector('.idve-settings-ai-btn');
            if (aiBtn) {
                aiBtn.addEventListener('click', function() {
                    IDVE.AI.openBlockPrompt();
                });
            }

            // Tab switching
            var tabBtns = this.overlay.querySelectorAll('.idve-modal-tab');
            for (var i = 0; i < tabBtns.length; i++) {
                tabBtns[i].addEventListener('click', function() {
                    var key = this.getAttribute('data-tab');
                    var allTabs = self.overlay.querySelectorAll('.idve-modal-tab');
                    var allContents = self.overlay.querySelectorAll('.idve-tab-content');
                    for (var j = 0; j < allTabs.length; j++) {
                        allTabs[j].classList.remove('active');
                        allContents[j].classList.remove('active');
                    }
                    this.classList.add('active');
                    self.overlay.querySelector('.idve-tab-content[data-tab="' + key + '"]').classList.add('active');
                    self._initColorPickers();
                });
            }
        },

        renderTabContents: function(element) {
            var type = this.currentType;

            switch (type) {
                case 'section': this.renderSectionTabs(element); break;
                case 'row': this.renderRowTabs(element); break;
                case 'column': this.renderColumnTabs(element); break;
                case 'block': this.renderBlockTabs(element); break;
            }
        },

        // ── Section Tabs ──
        renderSectionTabs: function(section) {
            var self = this;
            var s = section.settings || {};

            // General tab
            var contentTab = this.overlay.querySelector('.idve-tab-content[data-tab="content"]');
            var group = this.createGroup('Background');
            group.appendChild(this.renderColorField('backgroundColor', 'Background Color', s.backgroundColor || '', function(v) {
                section.settings.backgroundColor = v; self.onFieldChange();
            }, true));
            group.appendChild(this.renderBackgroundImageFields(section.settings, function() { self.onFieldChange(); }));
            contentTab.appendChild(group);

            group = this.createGroup('Section Width');
            var stretchWrap = document.createElement('div');
            stretchWrap.className = 'idve-field';
            stretchWrap.innerHTML = '<label>Stretch' + this._tooltipHtml('Default keeps section in content area. Full Width stretches edge-to-edge. Stretch Background Only stretches the background while constraining content.') + '</label>';
            var stretchSelect = document.createElement('select');
            var stretchOpts = [
                { value: 'default', label: 'Default' },
                { value: 'full', label: 'Full Width' },
                { value: 'full-bg', label: 'Stretch Background Only' }
            ];
            for (var si = 0; si < stretchOpts.length; si++) {
                var sopt = document.createElement('option');
                sopt.value = stretchOpts[si].value;
                sopt.textContent = stretchOpts[si].label;
                if (stretchOpts[si].value === (s.stretch || 'default')) sopt.selected = true;
                stretchSelect.appendChild(sopt);
            }
            var contentMaxWidthWrap = document.createElement('div');
            contentMaxWidthWrap.className = 'idve-field';
            contentMaxWidthWrap.style.display = (s.stretch === 'full-bg') ? '' : 'none';
            contentMaxWidthWrap.innerHTML = '<label>Content Max Width' + this._tooltipHtml('Limits content width when background is stretched.') + '</label>';
            var contentMaxWidthInput = document.createElement('input');
            contentMaxWidthInput.type = 'text';
            contentMaxWidthInput.value = s.contentMaxWidth || '1200px';
            contentMaxWidthInput.placeholder = '1200px';
            contentMaxWidthInput.addEventListener('input', function() {
                section.settings.contentMaxWidth = this.value;
                self.onFieldChange();
            });
            contentMaxWidthWrap.appendChild(contentMaxWidthInput);

            var maxWidthWrap = document.createElement('div');
            maxWidthWrap.className = 'idve-field';
            maxWidthWrap.style.display = (!s.stretch || s.stretch === 'default') ? '' : 'none';
            maxWidthWrap.innerHTML = '<label>Max Width' + this._tooltipHtml('Limits the section content width. Any CSS value, e.g. 1200px or 80%.') + '</label>';
            var maxWidthInput = document.createElement('input');
            maxWidthInput.type = 'text';
            maxWidthInput.value = s.maxWidth || '';
            maxWidthInput.placeholder = 'e.g. 1200px';
            maxWidthInput.addEventListener('input', function() {
                section.settings.maxWidth = this.value;
                self.onFieldChange();
            });
            maxWidthWrap.appendChild(maxWidthInput);

            stretchSelect.addEventListener('change', function() {
                section.settings.stretch = this.value;
                contentMaxWidthWrap.style.display = (this.value === 'full-bg') ? '' : 'none';
                maxWidthWrap.style.display = (this.value === 'default') ? '' : 'none';
                self.onFieldChange();
            });
            stretchWrap.appendChild(stretchSelect);
            group.appendChild(stretchWrap);
            group.appendChild(contentMaxWidthWrap);
            group.appendChild(maxWidthWrap);
            contentTab.appendChild(group);

            // Style tab
            var styleTab = this.overlay.querySelector('.idve-tab-content[data-tab="style"]');
            group = this.createGroup('Spacing');
            group.appendChild(this.renderSpacingField('padding', 'Padding', s.padding || {top:0,right:0,bottom:0,left:0}, function(v) {
                section.settings.padding = v; self.onFieldChange();
            }));
            group.appendChild(this.renderSpacingField('margin', 'Margin', s.margin || {top:0,right:0,bottom:0,left:0}, function(v) {
                section.settings.margin = v; self.onFieldChange();
            }));
            styleTab.appendChild(group);

            group = this.createGroup('Border');
            if (!section.settings.border) section.settings.border = {width:{top:0,right:0,bottom:0,left:0},color:'#000000',style:'solid',radius:{topLeft:0,topRight:0,bottomRight:0,bottomLeft:0}};
            group.appendChild(this.renderBorderField('Border', section.settings.border, function(v) {
                section.settings.border = v; self.onFieldChange();
            }));
            styleTab.appendChild(group);

            // Advanced tab
            var advancedTab = this.overlay.querySelector('.idve-tab-content[data-tab="advanced"]');
            group = this.createGroup('Advanced');
            group.appendChild(this.renderClassField('cssClass', 'CSS Class', s.cssClass || '', function(v) {
                section.settings.cssClass = v; self.onFieldChange();
            }, 'Add CSS classes for custom styling. Separate multiple with spaces.'));
            group.appendChild(this.renderTextField('cssId', 'CSS ID', s.cssId || '', function(v) {
                section.settings.cssId = v; self.onFieldChange();
            }, 'A unique ID for anchor links or CSS targeting.'));
            advancedTab.appendChild(group);
        },

        // ── Row Tabs ──
        renderRowTabs: function(row) {
            var self = this;
            if (!row.settings) {
                row.settings = { backgroundColor: '', padding: {top:0,right:0,bottom:0,left:0}, margin: {top:0,right:0,bottom:0,left:0}, border: {width:{top:0,right:0,bottom:0,left:0},color:'#000000',style:'solid',radius:{topLeft:0,topRight:0,bottomRight:0,bottomLeft:0}}, equalHeight: false, gap: '' };
            }
            var s = row.settings;

            var layoutTab = this.overlay.querySelector('.idve-tab-content[data-tab="content"]');
            var layoutGroup = this.createGroup('Layout');
            layoutGroup.appendChild(this.renderToggleField('equalHeight', 'Equal Height Columns', !!s.equalHeight, function(v) {
                row.settings.equalHeight = v; self.onFieldChange();
            }, 'Forces all columns in this row to match the tallest column\'s height.'));
            layoutGroup.appendChild(this.renderTextField('gap', 'Column Gap (e.g. 20px)', s.gap || '', function(v) {
                row.settings.gap = v; self.onFieldChange();
            }, 'Space between columns. Any CSS value, e.g. 20px or 2%.'));
            layoutTab.appendChild(layoutGroup);

            var styleTab = this.overlay.querySelector('.idve-tab-content[data-tab="style"]');
            var group = this.createGroup('Background');
            group.appendChild(this.renderColorField('backgroundColor', 'Background Color', s.backgroundColor || '', function(v) {
                row.settings.backgroundColor = v; self.onFieldChange();
            }, true));
            group.appendChild(this.renderBackgroundImageFields(row.settings, function() { self.onFieldChange(); }));
            styleTab.appendChild(group);

            group = this.createGroup('Spacing');
            group.appendChild(this.renderSpacingField('padding', 'Padding', s.padding || {top:0,right:0,bottom:0,left:0}, function(v) {
                row.settings.padding = v; self.onFieldChange();
            }));
            group.appendChild(this.renderSpacingField('margin', 'Margin', s.margin || {top:0,right:0,bottom:0,left:0}, function(v) {
                row.settings.margin = v; self.onFieldChange();
            }));
            styleTab.appendChild(group);

            group = this.createGroup('Border');
            if (!row.settings.border) row.settings.border = {width:{top:0,right:0,bottom:0,left:0},color:'#000000',style:'solid',radius:{topLeft:0,topRight:0,bottomRight:0,bottomLeft:0}};
            group.appendChild(this.renderBorderField('Border', row.settings.border, function(v) {
                row.settings.border = v; self.onFieldChange();
            }));
            styleTab.appendChild(group);

            // Advanced tab
            var advancedTab = this.overlay.querySelector('.idve-tab-content[data-tab="advanced"]');
            group = this.createGroup('Advanced');
            group.appendChild(this.renderClassField('cssClass', 'CSS Class', s.cssClass || '', function(v) {
                row.settings.cssClass = v; self.onFieldChange();
            }, 'Add CSS classes for custom styling. Separate multiple with spaces.'));
            group.appendChild(this.renderTextField('cssId', 'CSS ID', s.cssId || '', function(v) {
                row.settings.cssId = v; self.onFieldChange();
            }, 'A unique ID for anchor links or CSS targeting.'));
            advancedTab.appendChild(group);
        },

        // ── Column Tabs ──
        renderColumnTabs: function(column) {
            var self = this;
            var s = column.settings || {};
            var parentRow = IDVE.Editor.findParentRow(column.id);
            var isEqualHeight = parentRow && parentRow.settings && parentRow.settings.equalHeight;

            // General tab
            var contentTab = this.overlay.querySelector('.idve-tab-content[data-tab="content"]');
            var group = this.createGroup('Width');
            var widths = ['1/1','1/2','1/3','2/3','1/4','3/4','1/5','2/5','3/5','4/5'];
            group.appendChild(this.renderSelectField('width', 'Column Width', column.width || '1/1', widths, function(v) {
                column.width = v; self.onFieldChange();
            }));
            contentTab.appendChild(group);

            group = this.createGroup('Layout');
            group.appendChild(this.renderSelectField('verticalAlign', 'Vertical Alignment', s.verticalAlign || 'top', ['top','center','bottom'], function(v) {
                column.settings.verticalAlign = v; self.onFieldChange();
            }, 'Aligns blocks within this column when the row uses Equal Height.'));
            contentTab.appendChild(group);

            group = this.createGroup('Background');
            group.appendChild(this.renderColorField('backgroundColor', 'Background Color', s.backgroundColor || '', function(v) {
                column.settings.backgroundColor = v; self.onFieldChange();
            }, true));
            group.appendChild(this.renderBackgroundImageFields(column.settings, function() { self.onFieldChange(); }));
            contentTab.appendChild(group);

            // Style tab
            var styleTab = this.overlay.querySelector('.idve-tab-content[data-tab="style"]');
            group = this.createGroup('Spacing');
            group.appendChild(this.renderSpacingField('padding', 'Padding', s.padding || {top:0,right:0,bottom:0,left:0}, function(v) {
                column.settings.padding = v; self.onFieldChange();
            }));
            if (!isEqualHeight) {
                group.appendChild(this.renderSpacingField('margin', 'Margin', s.margin || {top:0,right:0,bottom:0,left:0}, function(v) {
                    if (!column.settings) column.settings = {};
                    column.settings.margin = v; self.onFieldChange();
                }));
            } else {
                var notice = document.createElement('div');
                notice.className = 'idve-field';
                notice.innerHTML = '<label>Margin</label><p style="color:#999;font-size:12px;margin:4px 0">Disabled when Equal Height is on.</p>';
                group.appendChild(notice);
                // Reset margin to zero when equal height is active
                if (column.settings && column.settings.margin) {
                    var m = column.settings.margin;
                    if (m.top || m.right || m.bottom || m.left) {
                        column.settings.margin = {top:0, right:0, bottom:0, left:0};
                        self.onFieldChange();
                    }
                }
            }
            styleTab.appendChild(group);

            group = this.createGroup('Border');
            if (!column.settings.border) column.settings.border = {width:{top:0,right:0,bottom:0,left:0},color:'#000000',style:'solid',radius:{topLeft:0,topRight:0,bottomRight:0,bottomLeft:0}};
            group.appendChild(this.renderBorderField('Border', column.settings.border, function(v) {
                column.settings.border = v; self.onFieldChange();
            }));
            styleTab.appendChild(group);

            // Advanced tab
            var advancedTab = this.overlay.querySelector('.idve-tab-content[data-tab="advanced"]');
            group = this.createGroup('Advanced');
            group.appendChild(this.renderClassField('cssClass', 'CSS Class', s.cssClass || '', function(v) {
                column.settings.cssClass = v; self.onFieldChange();
            }, 'Add CSS classes for custom styling. Separate multiple with spaces.'));
            group.appendChild(this.renderTextField('cssId', 'CSS ID', s.cssId || '', function(v) {
                column.settings.cssId = v; self.onFieldChange();
            }, 'A unique ID for anchor links or CSS targeting.'));
            advancedTab.appendChild(group);
        },

        // ── Block Tabs ──
        renderBlockTabs: function(block) {
            var self = this;
            var s = block.settings || {};
            var data = block.data || {};

            // Content tab
            var contentTab = this.overlay.querySelector('.idve-tab-content[data-tab="content"]');
            var blockDef = IDVE.Blocks.get(block.type);
            if (blockDef && blockDef.fields) {
                this._currentBlockData = data;
                var group = this.createGroup('Content');
                for (var i = 0; i < blockDef.fields.length; i++) {
                    var field = blockDef.fields[i];
                    var value = data[field.name] !== undefined ? data[field.name] : field.defaultValue;
                    group.appendChild(this.renderField(field, value, (function(fname) {
                        return function(v) {
                            block.data[fname] = v;
                            self.onFieldChange();
                        };
                    })(field.name)));
                }
                contentTab.appendChild(group);
            }

            if (block.type === 'group') {
                var layoutGroup = this.createGroup('Layout');
                layoutGroup.appendChild(this.renderSelectField('verticalAlign', 'Vertical Alignment', s.verticalAlign || 'top', ['top','center','bottom'], function(v) {
                    block.settings.verticalAlign = v; self.onFieldChange();
                }, 'Aligns child blocks vertically within this group.'));
                contentTab.appendChild(layoutGroup);
            }

            // Style tab
            var styleTab = this.overlay.querySelector('.idve-tab-content[data-tab="style"]');
            var group2 = this.createGroup('Spacing');
            group2.appendChild(this.renderSpacingField('margin', 'Margin', s.margin || {top:0,right:0,bottom:0,left:0}, function(v) {
                block.settings.margin = v; self.onFieldChange();
            }));
            group2.appendChild(this.renderSpacingField('padding', 'Padding', s.padding || {top:0,right:0,bottom:0,left:0}, function(v) {
                block.settings.padding = v; self.onFieldChange();
            }));
            styleTab.appendChild(group2);

            var group3 = this.createGroup('Background');
            group3.appendChild(this.renderColorField('backgroundColor', 'Background Color', s.backgroundColor || '', function(v) {
                block.settings.backgroundColor = v; self.onFieldChange();
            }, true));
            if (block.type === 'group') {
                group3.appendChild(this.renderBackgroundImageFields(block.settings, function() { self.onFieldChange(); }));
            }
            styleTab.appendChild(group3);

            var group5 = this.createGroup('Border');
            if (!block.settings.border) block.settings.border = {width:{top:0,right:0,bottom:0,left:0},color:'#000000',style:'solid',radius:{topLeft:0,topRight:0,bottomRight:0,bottomLeft:0}};
            group5.appendChild(this.renderBorderField('Border', block.settings.border, function(v) {
                block.settings.border = v; self.onFieldChange();
            }));
            styleTab.appendChild(group5);

            // Advanced tab
            var advancedTab = this.overlay.querySelector('.idve-tab-content[data-tab="advanced"]');
            var group4 = this.createGroup('Advanced');
            group4.appendChild(this.renderClassField('cssClass', 'CSS Class', s.cssClass || '', function(v) {
                block.settings.cssClass = v; self.onFieldChange();
            }, 'Add CSS classes for custom styling. Separate multiple with spaces.'));
            group4.appendChild(this.renderTextField('cssId', 'CSS ID', s.cssId || '', function(v) {
                block.settings.cssId = v; self.onFieldChange();
            }, 'A unique ID for anchor links or CSS targeting.'));
            group4.appendChild(this.renderToggleField('visible', 'Visible', s.visible !== false, function(v) {
                block.settings.visible = v; self.onFieldChange();
            }, 'When off, this block is hidden on the frontend but still visible in the editor.'));
            advancedTab.appendChild(group4);
        },

        renderField: function(fieldDef, value, onChange) {
            var tip = fieldDef.tooltip;
            switch (fieldDef.type) {
                case 'hidden':   return document.createDocumentFragment();
                case 'text':     return this.renderTextField(fieldDef.name, fieldDef.label, value, onChange, tip);
                case 'textarea': return this.renderTextareaField(fieldDef.name, fieldDef.label, value, onChange, tip);
                case 'richtext': return this.renderRichtextField(fieldDef.name, fieldDef.label, value, onChange, tip);
                case 'select':   return this.renderSelectField(fieldDef.name, fieldDef.label, value, fieldDef.options, onChange, tip);
                case 'color':    return this.renderColorField(fieldDef.name, fieldDef.label, value, onChange, /background/i.test(fieldDef.name), tip);
                case 'number':   return this.renderNumberField(fieldDef.name, fieldDef.label, value, onChange, fieldDef.min, fieldDef.max, fieldDef.step, tip);
                case 'toggle':   return this.renderToggleField(fieldDef.name, fieldDef.label, value, onChange, tip);
                case 'range':    return this.renderRangeField(fieldDef.name, fieldDef.label, value, onChange, fieldDef.min, fieldDef.max, fieldDef.step, tip);
                case 'image':    return this.renderImageField(fieldDef.name, fieldDef.label, value, onChange, tip, this._currentBlockData);
                case 'image_id': return this.renderImageIdField(fieldDef.name, fieldDef.label, value, onChange, tip);
                case 'audio':    return this.renderAudioField(fieldDef.name, fieldDef.label, value, onChange, tip);
                case 'icon':     return this.renderIconField(fieldDef.name, fieldDef.label, value, onChange, tip);
                default:         return this.renderTextField(fieldDef.name, fieldDef.label, value, onChange, tip);
            }
        },

        // ── Field Renderers ──

        createGroup: function(title) {
            var div = document.createElement('div');
            div.className = 'idve-field-group';
            var h4 = document.createElement('h4');
            h4.textContent = title;
            div.appendChild(h4);
            return div;
        },

        renderTextField: function(name, label, value, onChange, tooltip) {
            var wrap = document.createElement('div');
            wrap.className = 'idve-field';
            wrap.innerHTML = '<label>' + label + this._tooltipHtml(tooltip) + '</label>';
            var input = document.createElement('input');
            input.type = 'text';
            input.value = value || '';
            input.addEventListener('input', function() { onChange(this.value); });
            wrap.appendChild(input);
            return wrap;
        },

        renderTextareaField: function(name, label, value, onChange, tooltip) {
            var wrap = document.createElement('div');
            wrap.className = 'idve-field';
            wrap.innerHTML = '<label>' + label + this._tooltipHtml(tooltip) + '</label>';
            var ta = document.createElement('textarea');
            ta.value = value || '';
            ta.addEventListener('input', function() { onChange(this.value); });
            wrap.appendChild(ta);
            return wrap;
        },

        renderSelectField: function(name, label, value, options, onChange, tooltip) {
            var wrap = document.createElement('div');
            wrap.className = 'idve-field';
            wrap.innerHTML = '<label>' + label + this._tooltipHtml(tooltip) + '</label>';
            var select = document.createElement('select');
            for (var i = 0; i < options.length; i++) {
                var opt = document.createElement('option');
                opt.value = options[i];
                opt.textContent = options[i];
                if (options[i] === value) opt.selected = true;
                select.appendChild(opt);
            }
            select.addEventListener('change', function() { onChange(this.value); });
            wrap.appendChild(select);
            return wrap;
        },

        _hexToRgb: function(hex) {
            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null;
        },

        _parseColor: function(val) {
            if (!val || val === 'transparent') return { hex: '#000000', opacity: 0 };
            var m = val.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/);
            if (m) {
                var rr = parseInt(m[1]).toString(16).padStart(2, '0');
                var gg = parseInt(m[2]).toString(16).padStart(2, '0');
                var bb = parseInt(m[3]).toString(16).padStart(2, '0');
                var aa = m[4] !== undefined ? parseFloat(m[4]) : 1;
                return { hex: '#' + rr + gg + bb, opacity: Math.round(aa * 100) };
            }
            return { hex: val, opacity: 100 };
        },

        _tooltipHtml: function(text) {
            if (!text) return '';
            var safe = text.replace(/</g, '&lt;').replace(/"/g, '&quot;');
            return '<span class="idve-tooltip-trigger">?<span class="idve-tooltip-text">' + safe + '</span></span>';
        },

        _buildColorValue: function(hex, opacity) {
            if (!hex || opacity <= 0) return 'transparent';
            if (opacity >= 100) return hex;
            var rgb = this._hexToRgb(hex);
            if (!rgb) return hex;
            return 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + (opacity / 100).toFixed(2) + ')';
        },

        renderColorField: function(name, label, value, onChange, isBackground, tooltip) {
            var self = this;
            var wrap = document.createElement('div');
            wrap.className = 'idve-field idve-iris-field';
            wrap.innerHTML = '<label>' + label + this._tooltipHtml(tooltip) + '</label>';

            var parsed;
            if (!value || value === 'transparent') {
                parsed = isBackground ? { hex: '#000000', opacity: 0 } : { hex: '#000000', opacity: 100 };
            } else {
                parsed = this._parseColor(value);
            }

            var input = document.createElement('input');
            input.type = 'text';
            input.className = 'idve-iris-input';
            input.value = parsed.hex;
            wrap.appendChild(input);

            var opacityRow = document.createElement('div');
            opacityRow.className = 'idve-opacity-row';
            var opacityLabel = document.createElement('span');
            opacityLabel.className = 'idve-opacity-label';
            opacityLabel.textContent = 'Opacity';
            var opacityRange = document.createElement('input');
            opacityRange.type = 'range';
            opacityRange.min = 0;
            opacityRange.max = 100;
            opacityRange.value = parsed.opacity;
            var opacityVal = document.createElement('span');
            opacityVal.className = 'idve-opacity-value';
            opacityVal.textContent = parsed.opacity + '%';

            opacityRow.appendChild(opacityLabel);
            opacityRow.appendChild(opacityRange);
            opacityRow.appendChild(opacityVal);
            wrap.appendChild(opacityRow);

            this._pendingColorPickers.push({
                input: input,
                opacityRange: opacityRange,
                opacityVal: opacityVal,
                hex: parsed.hex,
                opacity: parsed.opacity,
                isBackground: !!isBackground,
                onChange: onChange
            });

            return wrap;
        },

        _initColorPickers: function() {
            var self = this;
            var still = [];
            for (var i = 0; i < this._pendingColorPickers.length; i++) {
                var cfg = this._pendingColorPickers[i];
                var tab = cfg.input.closest('.idve-tab-content');
                if (tab && !tab.classList.contains('active')) {
                    still.push(cfg);
                    continue;
                }
                (function(c) {
                    var currentHex = c.hex;
                    var currentOpacity = c.opacity;

                    function update() {
                        var val = self._buildColorValue(currentHex, currentOpacity);
                        if (c.opacityVal) c.opacityVal.textContent = currentOpacity + '%';
                        c.onChange(val === 'transparent' ? '' : val);
                    }

                    jQuery(c.input).wpColorPicker({
                        defaultColor: false,
                        palettes: ['#000000','#ffffff','#dd3333','#dd9933','#eeee22','#81d742','#1e73be','#8224e3'],
                        change: function(event, ui) {
                            currentHex = ui.color.toString();
                            if (currentOpacity <= 0) {
                                currentOpacity = 100;
                                if (c.opacityRange) c.opacityRange.value = 100;
                            }
                            update();
                        },
                        clear: function() {
                            currentHex = '#000000';
                            currentOpacity = c.isBackground ? 0 : 100;
                            if (c.opacityRange) c.opacityRange.value = currentOpacity;
                            if (c.opacityVal) c.opacityVal.textContent = currentOpacity + '%';
                            c.onChange('');
                        }
                    });

                    if (c.opacityRange) {
                        c.opacityRange.addEventListener('input', function() {
                            currentOpacity = parseInt(this.value);
                            update();
                        });
                    }
                })(cfg);
            }
            this._pendingColorPickers = still;
        },

        renderNumberField: function(name, label, value, onChange, min, max, step, tooltip) {
            var wrap = document.createElement('div');
            wrap.className = 'idve-field';
            wrap.innerHTML = '<label>' + label + this._tooltipHtml(tooltip) + '</label>';
            var input = document.createElement('input');
            input.type = 'number';
            input.value = value || 0;
            if (min !== undefined) input.min = min;
            if (max !== undefined) input.max = max;
            if (step !== undefined) input.step = step;
            input.addEventListener('input', function() { onChange(parseFloat(this.value) || 0); });
            wrap.appendChild(input);
            return wrap;
        },

        renderToggleField: function(name, label, value, onChange, tooltip) {
            var wrap = document.createElement('div');
            wrap.className = 'idve-field';
            var row = document.createElement('div');
            row.className = 'idve-toggle';
            var lbl = document.createElement('label');
            lbl.innerHTML = label + this._tooltipHtml(tooltip);
            var toggle = document.createElement('div');
            toggle.className = 'idve-toggle-switch' + (value ? ' active' : '');
            toggle.addEventListener('click', function() {
                var active = this.classList.toggle('active');
                onChange(active);
            });
            row.appendChild(lbl);
            row.appendChild(toggle);
            wrap.appendChild(row);
            return wrap;
        },

        renderRangeField: function(name, label, value, onChange, min, max, step, tooltip) {
            var wrap = document.createElement('div');
            wrap.className = 'idve-field';
            wrap.innerHTML = '<label>' + label + this._tooltipHtml(tooltip) + '</label>';
            var row = document.createElement('div');
            row.className = 'idve-range-field';
            var range = document.createElement('input');
            range.type = 'range';
            range.value = value || 0;
            range.min = min || 0;
            range.max = max || 100;
            range.step = step || 1;
            var display = document.createElement('span');
            display.className = 'idve-range-value';
            display.textContent = value || 0;
            range.addEventListener('input', function() {
                display.textContent = this.value;
                onChange(parseFloat(this.value));
            });
            row.appendChild(range);
            row.appendChild(display);
            wrap.appendChild(row);
            return wrap;
        },

        renderImageField: function(name, label, value, onChange, tooltip, blockData) {
            var wrap = document.createElement('div');
            wrap.className = 'idve-field idve-image-field';
            wrap.innerHTML = '<label>' + label + this._tooltipHtml(tooltip) + '</label>';

            var preview;
            if (value) {
                preview = document.createElement('img');
                preview.src = value;
                preview.className = 'idve-image-preview';
            } else {
                preview = document.createElement('div');
                preview.className = 'idve-image-placeholder';
                preview.textContent = 'Click to select image';
            }

            var btnRow = document.createElement('div');
            btnRow.style.display = 'flex';
            btnRow.style.gap = '4px';
            btnRow.style.justifyContent = 'center';

            var selectBtn = document.createElement('button');
            selectBtn.type = 'button';
            selectBtn.className = 'idve-btn';
            selectBtn.textContent = 'Select Image';

            var removeBtn = document.createElement('button');
            removeBtn.type = 'button';
            removeBtn.className = 'idve-btn idve-btn-danger';
            removeBtn.textContent = 'Remove';
            removeBtn.style.display = value ? '' : 'none';

            selectBtn.addEventListener('click', function() {
                if (!wp || !wp.media) return;
                var frame = wp.media({
                    title: (window.idveData && idveData.mediaTitle) || 'Select Image',
                    button: { text: (window.idveData && idveData.mediaButton) || 'Use Image' },
                    multiple: false
                });
                frame.on('select', function() {
                    var attachment = frame.state().get('selection').first().toJSON();
                    onChange(attachment.url);
                    if (blockData && attachment.id) {
                        blockData.imageId = attachment.id;
                    }
                    if (IDVE.Panel.isOpen) {
                        IDVE.Panel.refreshModal();
                    }
                });
                frame.open();
            });

            removeBtn.addEventListener('click', function() {
                onChange('');
                if (blockData) {
                    blockData.imageId = 0;
                }
                if (IDVE.Panel.isOpen) {
                    IDVE.Panel.refreshModal();
                }
            });

            preview.addEventListener('click', function() { selectBtn.click(); });

            wrap.appendChild(preview);
            btnRow.appendChild(selectBtn);
            btnRow.appendChild(removeBtn);
            wrap.appendChild(btnRow);
            return wrap;
        },

        renderImageIdField: function(name, label, value, onChange, tooltip) {
            var self = this;
            var wrap = document.createElement('div');
            wrap.className = 'idve-field idve-image-field';
            wrap.innerHTML = '<label>' + label + this._tooltipHtml(tooltip) + '</label>';

            var imageId = parseInt(value) || 0;

            var preview = document.createElement('div');
            if (imageId) {
                preview.className = 'idve-image-placeholder';
                preview.textContent = 'Loading image #' + imageId + '...';
                // Fetch thumbnail via WP REST API
                var wpBase = idveData.restUrl.replace(/idve\/v1\/$/, '');
                fetch(wpBase + 'wp/v2/media/' + imageId, {
                    headers: { 'X-WP-Nonce': idveData.nonce }
                })
                .then(function(r) { return r.ok ? r.json() : null; })
                .then(function(data) {
                    if (data && data.source_url) {
                        var thumbUrl = data.source_url;
                        if (data.media_details && data.media_details.sizes && data.media_details.sizes.thumbnail) {
                            thumbUrl = data.media_details.sizes.thumbnail.source_url;
                        }
                        var img = document.createElement('img');
                        img.src = thumbUrl;
                        img.className = 'idve-image-preview';
                        preview.className = '';
                        preview.textContent = '';
                        preview.appendChild(img);
                    } else {
                        preview.textContent = 'Image #' + imageId;
                    }
                })
                .catch(function() {
                    preview.textContent = 'Image #' + imageId;
                });
            } else {
                preview.className = 'idve-image-placeholder';
                preview.textContent = 'Click to select image';
            }

            var btnRow = document.createElement('div');
            btnRow.style.cssText = 'display:flex;gap:4px;justify-content:center';

            var selectBtn = document.createElement('button');
            selectBtn.type = 'button';
            selectBtn.className = 'idve-btn';
            selectBtn.textContent = 'Select Image';

            var removeBtn = document.createElement('button');
            removeBtn.type = 'button';
            removeBtn.className = 'idve-btn idve-btn-danger';
            removeBtn.textContent = 'Remove';
            removeBtn.style.display = imageId ? '' : 'none';

            selectBtn.addEventListener('click', function() {
                if (!wp || !wp.media) return;
                var frame = wp.media({
                    title: (window.idveData && idveData.mediaTitle) || 'Select Image',
                    button: { text: (window.idveData && idveData.mediaButton) || 'Use Image' },
                    multiple: false,
                    library: { type: 'image' }
                });
                frame.on('select', function() {
                    var attachment = frame.state().get('selection').first().toJSON();
                    onChange(attachment.id);
                    if (IDVE.Panel.isOpen) {
                        IDVE.Panel.refreshModal();
                    }
                });
                frame.open();
            });

            removeBtn.addEventListener('click', function() {
                onChange('');
                if (IDVE.Panel.isOpen) {
                    IDVE.Panel.refreshModal();
                }
            });

            preview.style.cursor = 'pointer';
            preview.addEventListener('click', function() { selectBtn.click(); });

            wrap.appendChild(preview);
            btnRow.appendChild(selectBtn);
            btnRow.appendChild(removeBtn);
            wrap.appendChild(btnRow);
            return wrap;
        },

        renderAudioField: function(name, label, value, onChange, tooltip) {
            var wrap = document.createElement('div');
            wrap.className = 'idve-field idve-image-field';
            wrap.innerHTML = '<label>' + label + this._tooltipHtml(tooltip) + '</label>';

            var preview = document.createElement('div');
            preview.className = 'idve-audio-preview';
            if (value) {
                var filename = value.split('/').pop();
                preview.innerHTML = '<span class="dashicons dashicons-media-audio" style="font-size:20px;color:#0073aa;vertical-align:middle;margin-right:6px"></span><span>' + filename + '</span>';
            } else {
                preview.innerHTML = '<span class="dashicons dashicons-media-audio" style="font-size:20px;color:#999;vertical-align:middle;margin-right:6px"></span><span style="color:#999">No audio file selected</span>';
            }

            var btnRow = document.createElement('div');
            btnRow.style.display = 'flex';
            btnRow.style.gap = '4px';
            btnRow.style.justifyContent = 'center';

            var selectBtn = document.createElement('button');
            selectBtn.type = 'button';
            selectBtn.className = 'idve-btn';
            selectBtn.textContent = 'Select Audio';

            var removeBtn = document.createElement('button');
            removeBtn.type = 'button';
            removeBtn.className = 'idve-btn idve-btn-danger';
            removeBtn.textContent = 'Remove';
            removeBtn.style.display = value ? '' : 'none';

            selectBtn.addEventListener('click', function() {
                if (!wp || !wp.media) return;
                var frame = wp.media({
                    title: 'Select Audio',
                    button: { text: 'Use Audio' },
                    multiple: false,
                    library: { type: 'audio' }
                });
                frame.on('select', function() {
                    var attachment = frame.state().get('selection').first().toJSON();
                    onChange(attachment.url);
                    if (IDVE.Panel.isOpen) {
                        IDVE.Panel.refreshModal();
                    }
                });
                frame.open();
            });

            removeBtn.addEventListener('click', function() {
                onChange('');
                if (IDVE.Panel.isOpen) {
                    IDVE.Panel.refreshModal();
                }
            });

            preview.style.cursor = 'pointer';
            preview.addEventListener('click', function() { selectBtn.click(); });

            wrap.appendChild(preview);
            btnRow.appendChild(selectBtn);
            btnRow.appendChild(removeBtn);
            wrap.appendChild(btnRow);
            return wrap;
        },

        renderRichtextField: function(name, label, value, onChange, tooltip) {
            var wrap = document.createElement('div');
            wrap.className = 'idve-field idve-richtext-field';
            wrap.innerHTML = '<label>' + label + this._tooltipHtml(tooltip) + '</label>';
            var editorId = 'idve_rte_' + Math.random().toString(36).substr(2, 8);
            var ta = document.createElement('textarea');
            ta.id = editorId;
            ta.className = 'idve-richtext-textarea';
            ta.style.width = '100%';
            ta.style.minHeight = '200px';
            ta.value = value || '';
            wrap.appendChild(ta);

            this._pendingEditors.push({ id: editorId, onChange: onChange });
            return wrap;
        },

        _initRichtextEditors: function() {
            var self = this;
            if (!this._pendingEditors.length) return;
            if (!window.wp || !wp.editor || !wp.editor.initialize) return;

            for (var i = 0; i < this._pendingEditors.length; i++) {
                var ed = this._pendingEditors[i];
                this._activeEditorIds.push(ed.id);
                (function(editorId, onChange) {
                    wp.editor.initialize(editorId, {
                        tinymce: {
                            wpautop: true,
                            toolbar1: 'bold,italic,underline,strikethrough,|,bullist,numlist,|,link,unlink,|,alignleft,aligncenter,alignright,|,removeformat',
                            toolbar2: '',
                            plugins: 'lists,link,paste,wordpress,wplink',
                            menubar: false,
                            statusbar: false,
                            height: 250,
                            setup: function(editor) {
                                editor.on('change keyup', function() {
                                    onChange(editor.getContent());
                                });
                            }
                        },
                        quicktags: true,
                        mediaButtons: false
                    });
                })(ed.id, ed.onChange);
            }
            this._pendingEditors = [];
        },

        _syncAllEditors: function() {
            for (var i = 0; i < this._activeEditorIds.length; i++) {
                var edId = this._activeEditorIds[i];
                if (window.tinymce) {
                    var editor = tinymce.get(edId);
                    if (editor) editor.save();
                }
            }
        },

        _destroyRichtextEditors: function() {
            if (!window.wp || !wp.editor || !wp.editor.remove) return;
            for (var i = 0; i < this._activeEditorIds.length; i++) {
                try { wp.editor.remove(this._activeEditorIds[i]); } catch(e) {}
            }
            this._activeEditorIds = [];
        },

        _renderLinkedInputs: function(keys, labels, values, allowNeg, onChangeValues) {
            var frag = document.createDocumentFragment();

            // Determine if linked (all values equal)
            var allEqual = true;
            var firstVal = (values && values[keys[0]] !== undefined) ? values[keys[0]] : 0;
            for (var i = 1; i < keys.length; i++) {
                var v = (values && values[keys[i]] !== undefined) ? values[keys[i]] : 0;
                if (v !== firstVal) { allEqual = false; break; }
            }
            var linked = allEqual;

            // Label row with link toggle
            var labelRow = document.createElement('div');
            labelRow.className = 'idve-spacing-label-row';

            var toggleBtn = document.createElement('button');
            toggleBtn.type = 'button';
            toggleBtn.className = 'idve-link-toggle' + (linked ? ' linked' : '');
            toggleBtn.title = linked ? 'Unlink sides' : 'Link sides';
            toggleBtn.innerHTML = '&#128279;';

            labelRow.appendChild(toggleBtn);
            frag.appendChild(labelRow);

            // Simple (linked) input
            var simpleWrap = document.createElement('div');
            simpleWrap.className = 'idve-spacing-simple';
            simpleWrap.style.display = linked ? '' : 'none';
            var simpleInput = document.createElement('input');
            simpleInput.type = 'number';
            simpleInput.value = firstVal;
            simpleInput.min = allowNeg ? -999 : 0;
            simpleWrap.appendChild(simpleInput);
            frag.appendChild(simpleWrap);

            // Expanded (unlinked) row
            var expandedRow = document.createElement('div');
            expandedRow.className = 'idve-spacing-row';
            expandedRow.style.display = linked ? 'none' : '';

            var expandedInputs = [];
            for (var j = 0; j < keys.length; j++) {
                var cell = document.createElement('div');
                cell.className = 'idve-spacing-cell';
                var lbl = document.createElement('span');
                lbl.className = 'idve-spacing-label';
                lbl.textContent = labels[j];
                var input = document.createElement('input');
                input.type = 'number';
                input.value = (values && values[keys[j]] !== undefined) ? values[keys[j]] : 0;
                input.min = allowNeg ? -999 : 0;
                expandedInputs.push(input);
                (function(idx) {
                    input.addEventListener('input', function() {
                        values[keys[idx]] = parseInt(this.value) || 0;
                        onChangeValues(values);
                    });
                })(j);
                cell.appendChild(lbl);
                cell.appendChild(input);
                expandedRow.appendChild(cell);
            }
            frag.appendChild(expandedRow);

            // Simple input handler — sets all values
            simpleInput.addEventListener('input', function() {
                var val = parseInt(this.value) || 0;
                for (var k = 0; k < keys.length; k++) {
                    values[keys[k]] = val;
                    expandedInputs[k].value = val;
                }
                onChangeValues(values);
            });

            // Toggle handler
            toggleBtn.addEventListener('click', function() {
                linked = !linked;
                this.classList.toggle('linked', linked);
                this.title = linked ? 'Unlink sides' : 'Link sides';
                simpleWrap.style.display = linked ? '' : 'none';
                expandedRow.style.display = linked ? 'none' : '';
                if (linked) {
                    // Set all to the first value
                    var val = parseInt(expandedInputs[0].value) || 0;
                    simpleInput.value = val;
                    for (var k = 0; k < keys.length; k++) {
                        values[keys[k]] = val;
                        expandedInputs[k].value = val;
                    }
                    onChangeValues(values);
                }
            });

            return frag;
        },

        renderSpacingField: function(name, label, value, onChange) {
            var wrap = document.createElement('div');
            wrap.className = 'idve-field';
            wrap.innerHTML = '<label>' + label + '</label>';

            var vals = value || { top: 0, right: 0, bottom: 0, left: 0 };
            wrap.appendChild(this._renderLinkedInputs(
                ['top', 'right', 'bottom', 'left'],
                ['T', 'R', 'B', 'L'],
                vals,
                name === 'margin',
                function(v) { onChange(v); }
            ));

            return wrap;
        },

        renderBorderField: function(label, borderObj, onChange) {
            var self = this;
            var wrap = document.createElement('div');
            wrap.className = 'idve-field';
            wrap.innerHTML = '<label>' + label + '</label>';

            var b = borderObj || { width: {top:0,right:0,bottom:0,left:0}, color: '#000000', style: 'solid', radius: {topLeft:0,topRight:0,bottomRight:0,bottomLeft:0} };

            // Border width
            var widthLabel = document.createElement('div');
            widthLabel.className = 'idve-field-sublabel';
            widthLabel.textContent = 'Width (px)';
            wrap.appendChild(widthLabel);

            if (!b.width) b.width = {top:0,right:0,bottom:0,left:0};
            wrap.appendChild(this._renderLinkedInputs(
                ['top','right','bottom','left'],
                ['T','R','B','L'],
                b.width,
                false,
                function() { onChange(b); }
            ));

            // Border style + color row
            var styleColorRow = document.createElement('div');
            styleColorRow.className = 'idve-border-style-row';

            var styleWrap = document.createElement('div');
            styleWrap.className = 'idve-border-style-cell';
            var styleLbl = document.createElement('div');
            styleLbl.className = 'idve-field-sublabel';
            styleLbl.textContent = 'Style';
            styleWrap.appendChild(styleLbl);
            var select = document.createElement('select');
            var styles = ['solid','dashed','dotted','double','groove','ridge','inset','outset','none'];
            for (var j = 0; j < styles.length; j++) {
                var opt = document.createElement('option');
                opt.value = styles[j];
                opt.textContent = styles[j];
                if (styles[j] === (b.style || 'solid')) opt.selected = true;
                select.appendChild(opt);
            }
            select.addEventListener('change', function() { b.style = this.value; onChange(b); });
            styleWrap.appendChild(select);
            styleColorRow.appendChild(styleWrap);

            var colorWrap = document.createElement('div');
            colorWrap.className = 'idve-border-color-cell idve-iris-field';
            var colorLbl = document.createElement('div');
            colorLbl.className = 'idve-field-sublabel';
            colorLbl.textContent = 'Color';
            colorWrap.appendChild(colorLbl);

            var parsed = this._parseColor(b.color || '#000000');
            var colorInput = document.createElement('input');
            colorInput.type = 'text';
            colorInput.className = 'idve-iris-input';
            colorInput.value = parsed.hex;
            colorWrap.appendChild(colorInput);

            this._pendingColorPickers.push({
                input: colorInput,
                opacityRange: null,
                opacityVal: null,
                hex: parsed.hex,
                opacity: 100,
                isBackground: false,
                onChange: function(v) { b.color = v || '#000000'; onChange(b); }
            });

            styleColorRow.appendChild(colorWrap);
            wrap.appendChild(styleColorRow);

            // Border radius
            var radiusLabel = document.createElement('div');
            radiusLabel.className = 'idve-field-sublabel';
            radiusLabel.textContent = 'Radius (px)';
            wrap.appendChild(radiusLabel);

            if (!b.radius) b.radius = {topLeft:0,topRight:0,bottomRight:0,bottomLeft:0};
            wrap.appendChild(this._renderLinkedInputs(
                ['topLeft','topRight','bottomRight','bottomLeft'],
                ['TL','TR','BR','BL'],
                b.radius,
                false,
                function() { onChange(b); }
            ));

            return wrap;
        },

        renderBackgroundImageFields: function(settings, onFieldChange) {
            var self = this;
            var frag = document.createDocumentFragment();

            frag.appendChild(this.renderImageField('backgroundImage', 'Background Image', settings.backgroundImage || '', function(v) {
                settings.backgroundImage = v;
                onFieldChange();
            }));

            var extraWrap = document.createElement('div');
            extraWrap.className = 'idve-bg-image-extras';
            extraWrap.style.display = settings.backgroundImage ? '' : 'none';

            var sizeOpts = ['cover', 'contain', 'auto'];
            extraWrap.appendChild(this.renderSelectField('backgroundSize', 'Background Size', settings.backgroundSize || 'cover', sizeOpts, function(v) {
                settings.backgroundSize = v; onFieldChange();
            }));

            var posOpts = ['center', 'top', 'bottom', 'left', 'right', 'top left', 'top right', 'bottom left', 'bottom right'];
            extraWrap.appendChild(this.renderSelectField('backgroundPosition', 'Background Position', settings.backgroundPosition || 'center', posOpts, function(v) {
                settings.backgroundPosition = v; onFieldChange();
            }));

            var repOpts = ['no-repeat', 'repeat', 'repeat-x', 'repeat-y'];
            extraWrap.appendChild(this.renderSelectField('backgroundRepeat', 'Background Repeat', settings.backgroundRepeat || 'no-repeat', repOpts, function(v) {
                settings.backgroundRepeat = v; onFieldChange();
            }));

            frag.appendChild(extraWrap);
            return frag;
        },

        renderClassField: function(name, label, value, onChange, tooltip) {
            var self = this;
            var wrap = document.createElement('div');
            wrap.className = 'idve-field';
            wrap.innerHTML = '<label>' + label + this._tooltipHtml(tooltip) + '</label>';
            var input = document.createElement('input');
            input.type = 'text';
            input.value = value || '';
            input.addEventListener('input', function() { onChange(this.value); });
            wrap.appendChild(input);

            var browseBtn = document.createElement('button');
            browseBtn.type = 'button';
            browseBtn.className = 'idve-btn idve-browse-classes-btn';
            browseBtn.textContent = 'Browse';
            browseBtn.addEventListener('click', function() {
                self.showClassBrowser(function(className) {
                    var current = input.value.trim();
                    if (current && current.indexOf(className) === -1) {
                        input.value = current + ' ' + className;
                    } else if (!current) {
                        input.value = className;
                    }
                    onChange(input.value);
                });
            });
            wrap.appendChild(browseBtn);
            return wrap;
        },

        showClassBrowser: function(onInsert) {
            var overlay = document.createElement('div');
            overlay.className = 'idve-modal-overlay';

            var html = '<div class="idve-modal idve-class-browser-modal">';
            html += '<div class="idve-modal-header">';
            html += '<h3>Browse Classes</h3>';
            html += '<button type="button" class="idve-modal-close">&times;</button>';
            html += '</div>';
            html += '<div class="idve-modal-body">';
            html += '<input type="text" class="idve-class-browser-search" placeholder="Search classes...">';
            html += '<div class="idve-class-browser-list"><div style="text-align:center;color:#999;padding:20px;">Loading...</div></div>';
            html += '</div>';
            html += '</div>';

            overlay.innerHTML = html;
            document.body.appendChild(overlay);

            var listEl = overlay.querySelector('.idve-class-browser-list');
            var searchInput = overlay.querySelector('.idve-class-browser-search');
            var classes = [];

            function closeModal() {
                document.body.removeChild(overlay);
            }

            overlay.querySelector('.idve-modal-close').addEventListener('click', closeModal);
            overlay.addEventListener('click', function(e) {
                if (e.target === overlay) closeModal();
            });

            function extractColor(props) {
                var m = props.match(/(?:background-color|background|color)\s*:\s*([^;]+)/i);
                return m ? m[1].trim() : '';
            }

            function renderList(filter) {
                var filtered = classes;
                if (filter) {
                    var q = filter.toLowerCase();
                    filtered = classes.filter(function(c) { return c.name.toLowerCase().indexOf(q) !== -1; });
                }

                if (filtered.length === 0) {
                    if (classes.length === 0) {
                        listEl.innerHTML = '<div style="text-align:center;color:#999;padding:20px;">No classes defined yet. Use Global Styles in the toolbar to add CSS classes.</div>';
                    } else {
                        listEl.innerHTML = '<div style="text-align:center;color:#999;padding:20px;">No matching classes.</div>';
                    }
                    return;
                }

                var itemsHtml = '';
                for (var i = 0; i < filtered.length; i++) {
                    var c = filtered[i];
                    var propsPreview = c.properties.length > 60 ? c.properties.substring(0, 60) + '...' : c.properties;
                    var color = extractColor(c.properties);
                    var swatchHtml = color ? '<div class="idve-class-swatch" style="background:' + color + '"></div>' : '';

                    itemsHtml += '<div class="idve-class-browser-item" data-class="' + c.name + '">';
                    itemsHtml += '<span class="idve-class-browser-name">.' + c.name + '</span>';
                    itemsHtml += '<span class="idve-class-browser-props">' + propsPreview.replace(/</g, '&lt;') + '</span>';
                    itemsHtml += swatchHtml;
                    itemsHtml += '<button type="button" class="idve-btn idve-class-insert-btn">Insert</button>';
                    itemsHtml += '</div>';
                }
                listEl.innerHTML = itemsHtml;
            }

            // Fetch classes
            fetch(idveData.restUrl + 'global-classes', {
                headers: { 'X-WP-Nonce': idveData.nonce }
            })
            .then(function(res) { return res.json(); })
            .then(function(data) {
                if (data.success && data.classes) {
                    classes = data.classes;
                }
                renderList('');
            })
            .catch(function() {
                listEl.innerHTML = '<div style="text-align:center;color:#dc3232;padding:20px;">Failed to load classes.</div>';
            });

            searchInput.addEventListener('input', function() {
                renderList(this.value);
            });

            listEl.addEventListener('click', function(e) {
                var insertBtn = e.target.closest('.idve-class-insert-btn');
                if (insertBtn) {
                    var item = insertBtn.closest('.idve-class-browser-item');
                    if (item) {
                        onInsert(item.getAttribute('data-class'));
                        closeModal();
                    }
                }
            });
        },

        renderIconField: function(name, label, value, onChange, tooltip) {
            var self = this;
            var wrap = document.createElement('div');
            wrap.className = 'idve-field idve-icon-field';
            wrap.innerHTML = '<label>' + label + this._tooltipHtml(tooltip) + '</label>';

            var preview = document.createElement('div');
            preview.className = 'idve-icon-preview';
            preview.innerHTML = '<i class="' + (value || 'fa-solid fa-star') + '" style="font-size:24px"></i>';
            preview.title = value || 'fa-solid fa-star';
            wrap.appendChild(preview);

            var input = document.createElement('input');
            input.type = 'text';
            input.value = value || '';
            input.placeholder = 'fa-solid fa-star';
            input.addEventListener('input', function() {
                onChange(this.value);
                preview.innerHTML = '<i class="' + this.value + '" style="font-size:24px"></i>';
            });
            wrap.appendChild(input);

            var browseBtn = document.createElement('button');
            browseBtn.type = 'button';
            browseBtn.className = 'idve-btn';
            browseBtn.textContent = 'Browse Icons';
            browseBtn.addEventListener('click', function() {
                self.showIconPicker(function(iconClass) {
                    input.value = iconClass;
                    onChange(iconClass);
                    preview.innerHTML = '<i class="' + iconClass + '" style="font-size:24px"></i>';
                });
            });
            wrap.appendChild(browseBtn);
            return wrap;
        },

        showIconPicker: function(onSelect) {
            var icons = IDVE.Panel.FA_ICONS;

            var overlay = document.createElement('div');
            overlay.className = 'idve-modal-overlay';

            var html = '<div class="idve-modal idve-icon-picker-modal">';
            html += '<div class="idve-modal-header"><h3>Choose Icon</h3>';
            html += '<button type="button" class="idve-modal-close">&times;</button></div>';
            html += '<div class="idve-modal-body">';
            html += '<input type="text" class="idve-icon-search" placeholder="Search icons...">';
            html += '<div class="idve-icon-grid"></div>';
            html += '</div></div>';

            overlay.innerHTML = html;
            document.body.appendChild(overlay);

            var grid = overlay.querySelector('.idve-icon-grid');
            var search = overlay.querySelector('.idve-icon-search');

            function renderGrid(filter) {
                var filtered = filter
                    ? icons.filter(function(ic) { return ic.name.indexOf(filter.toLowerCase()) !== -1; })
                    : icons;
                var h = '';
                for (var i = 0; i < filtered.length; i++) {
                    h += '<div class="idve-icon-picker-item" data-class="' + filtered[i].class + '" title="' + filtered[i].name + '">';
                    h += '<i class="' + filtered[i].class + '"></i>';
                    h += '<span>' + filtered[i].name + '</span></div>';
                }
                grid.innerHTML = h || '<div style="padding:20px;color:#999;text-align:center">No matching icons.</div>';
            }
            renderGrid('');

            search.addEventListener('input', function() { renderGrid(this.value); });
            search.focus();

            function close() { document.body.removeChild(overlay); }
            overlay.querySelector('.idve-modal-close').addEventListener('click', close);
            overlay.addEventListener('click', function(e) { if (e.target === overlay) close(); });

            grid.addEventListener('click', function(e) {
                var item = e.target.closest('.idve-icon-picker-item');
                if (item) {
                    onSelect(item.getAttribute('data-class'));
                    close();
                }
            });
        },

        refreshModal: function() {
            if (!this.isOpen || !this.currentId) return;
            var found = IDVE.Editor.findElement(this.currentId);
            if (!found) return;
            this._pendingColorPickers = [];
            var contents = this.overlay.querySelectorAll('.idve-tab-content');
            for (var i = 0; i < contents.length; i++) {
                jQuery(contents[i]).empty();
            }
            this.renderTabContents(found.element);
            this._initColorPickers();
        },

        onFieldChange: function() {
            IDVE.History.push();
            IDVE.Editor.renderCanvas();
            IDVE.Editor.markDirty();
        }
    };

    // ── Curated FontAwesome 6 Free icon list ──
    IDVE.Panel.FA_ICONS = [
        // ── Solid: Common UI ──
        { name: 'star', class: 'fa-solid fa-star' },
        { name: 'heart', class: 'fa-solid fa-heart' },
        { name: 'check', class: 'fa-solid fa-check' },
        { name: 'xmark', class: 'fa-solid fa-xmark' },
        { name: 'plus', class: 'fa-solid fa-plus' },
        { name: 'minus', class: 'fa-solid fa-minus' },
        { name: 'circle-check', class: 'fa-solid fa-circle-check' },
        { name: 'circle-xmark', class: 'fa-solid fa-circle-xmark' },
        { name: 'circle-info', class: 'fa-solid fa-circle-info' },
        { name: 'circle-exclamation', class: 'fa-solid fa-circle-exclamation' },
        { name: 'circle-question', class: 'fa-solid fa-circle-question' },
        { name: 'triangle-exclamation', class: 'fa-solid fa-triangle-exclamation' },
        { name: 'bell', class: 'fa-solid fa-bell' },
        { name: 'bookmark', class: 'fa-solid fa-bookmark' },
        { name: 'flag', class: 'fa-solid fa-flag' },
        { name: 'thumbs-up', class: 'fa-solid fa-thumbs-up' },
        { name: 'thumbs-down', class: 'fa-solid fa-thumbs-down' },
        { name: 'trophy', class: 'fa-solid fa-trophy' },
        { name: 'award', class: 'fa-solid fa-award' },
        { name: 'medal', class: 'fa-solid fa-medal' },
        { name: 'crown', class: 'fa-solid fa-crown' },
        { name: 'gem', class: 'fa-solid fa-gem' },
        { name: 'fire', class: 'fa-solid fa-fire' },
        { name: 'bolt', class: 'fa-solid fa-bolt' },
        { name: 'shield-halved', class: 'fa-solid fa-shield-halved' },
        { name: 'lock', class: 'fa-solid fa-lock' },
        { name: 'unlock', class: 'fa-solid fa-unlock' },
        { name: 'key', class: 'fa-solid fa-key' },
        { name: 'eye', class: 'fa-solid fa-eye' },
        { name: 'eye-slash', class: 'fa-solid fa-eye-slash' },

        // ── Solid: Communication ──
        { name: 'phone', class: 'fa-solid fa-phone' },
        { name: 'envelope', class: 'fa-solid fa-envelope' },
        { name: 'comment', class: 'fa-solid fa-comment' },
        { name: 'comments', class: 'fa-solid fa-comments' },
        { name: 'message', class: 'fa-solid fa-message' },
        { name: 'paper-plane', class: 'fa-solid fa-paper-plane' },
        { name: 'inbox', class: 'fa-solid fa-inbox' },
        { name: 'at', class: 'fa-solid fa-at' },
        { name: 'share', class: 'fa-solid fa-share' },
        { name: 'share-nodes', class: 'fa-solid fa-share-nodes' },
        { name: 'reply', class: 'fa-solid fa-reply' },

        // ── Solid: Navigation ──
        { name: 'arrow-right', class: 'fa-solid fa-arrow-right' },
        { name: 'arrow-left', class: 'fa-solid fa-arrow-left' },
        { name: 'arrow-up', class: 'fa-solid fa-arrow-up' },
        { name: 'arrow-down', class: 'fa-solid fa-arrow-down' },
        { name: 'chevron-right', class: 'fa-solid fa-chevron-right' },
        { name: 'chevron-left', class: 'fa-solid fa-chevron-left' },
        { name: 'chevron-up', class: 'fa-solid fa-chevron-up' },
        { name: 'chevron-down', class: 'fa-solid fa-chevron-down' },
        { name: 'angles-right', class: 'fa-solid fa-angles-right' },
        { name: 'angles-left', class: 'fa-solid fa-angles-left' },
        { name: 'circle-arrow-right', class: 'fa-solid fa-circle-arrow-right' },
        { name: 'circle-arrow-left', class: 'fa-solid fa-circle-arrow-left' },
        { name: 'up-right-from-square', class: 'fa-solid fa-up-right-from-square' },
        { name: 'link', class: 'fa-solid fa-link' },

        // ── Solid: Location ──
        { name: 'location-dot', class: 'fa-solid fa-location-dot' },
        { name: 'map', class: 'fa-solid fa-map' },
        { name: 'map-pin', class: 'fa-solid fa-map-pin' },
        { name: 'compass', class: 'fa-solid fa-compass' },
        { name: 'globe', class: 'fa-solid fa-globe' },
        { name: 'earth-americas', class: 'fa-solid fa-earth-americas' },

        // ── Solid: People & Users ──
        { name: 'user', class: 'fa-solid fa-user' },
        { name: 'users', class: 'fa-solid fa-users' },
        { name: 'user-plus', class: 'fa-solid fa-user-plus' },
        { name: 'user-group', class: 'fa-solid fa-user-group' },
        { name: 'people-group', class: 'fa-solid fa-people-group' },
        { name: 'person', class: 'fa-solid fa-person' },
        { name: 'children', class: 'fa-solid fa-children' },
        { name: 'handshake', class: 'fa-solid fa-handshake' },
        { name: 'hand', class: 'fa-solid fa-hand' },
        { name: 'hands-clapping', class: 'fa-solid fa-hands-clapping' },

        // ── Solid: Business & Finance ──
        { name: 'briefcase', class: 'fa-solid fa-briefcase' },
        { name: 'building', class: 'fa-solid fa-building' },
        { name: 'chart-line', class: 'fa-solid fa-chart-line' },
        { name: 'chart-bar', class: 'fa-solid fa-chart-bar' },
        { name: 'chart-pie', class: 'fa-solid fa-chart-pie' },
        { name: 'dollar-sign', class: 'fa-solid fa-dollar-sign' },
        { name: 'credit-card', class: 'fa-solid fa-credit-card' },
        { name: 'wallet', class: 'fa-solid fa-wallet' },
        { name: 'money-bill', class: 'fa-solid fa-money-bill' },
        { name: 'coins', class: 'fa-solid fa-coins' },
        { name: 'receipt', class: 'fa-solid fa-receipt' },
        { name: 'file-invoice', class: 'fa-solid fa-file-invoice' },
        { name: 'tags', class: 'fa-solid fa-tags' },
        { name: 'tag', class: 'fa-solid fa-tag' },
        { name: 'percent', class: 'fa-solid fa-percent' },
        { name: 'cart-shopping', class: 'fa-solid fa-cart-shopping' },
        { name: 'bag-shopping', class: 'fa-solid fa-bag-shopping' },
        { name: 'basket-shopping', class: 'fa-solid fa-basket-shopping' },
        { name: 'store', class: 'fa-solid fa-store' },

        // ── Solid: Technology ──
        { name: 'laptop', class: 'fa-solid fa-laptop' },
        { name: 'desktop', class: 'fa-solid fa-desktop' },
        { name: 'mobile-screen', class: 'fa-solid fa-mobile-screen' },
        { name: 'tablet-screen-button', class: 'fa-solid fa-tablet-screen-button' },
        { name: 'server', class: 'fa-solid fa-server' },
        { name: 'database', class: 'fa-solid fa-database' },
        { name: 'cloud', class: 'fa-solid fa-cloud' },
        { name: 'cloud-arrow-up', class: 'fa-solid fa-cloud-arrow-up' },
        { name: 'cloud-arrow-down', class: 'fa-solid fa-cloud-arrow-down' },
        { name: 'wifi', class: 'fa-solid fa-wifi' },
        { name: 'code', class: 'fa-solid fa-code' },
        { name: 'terminal', class: 'fa-solid fa-terminal' },
        { name: 'microchip', class: 'fa-solid fa-microchip' },
        { name: 'robot', class: 'fa-solid fa-robot' },
        { name: 'gears', class: 'fa-solid fa-gears' },
        { name: 'gear', class: 'fa-solid fa-gear' },
        { name: 'wrench', class: 'fa-solid fa-wrench' },
        { name: 'screwdriver-wrench', class: 'fa-solid fa-screwdriver-wrench' },
        { name: 'plug', class: 'fa-solid fa-plug' },
        { name: 'download', class: 'fa-solid fa-download' },
        { name: 'upload', class: 'fa-solid fa-upload' },

        // ── Solid: Media ──
        { name: 'image', class: 'fa-solid fa-image' },
        { name: 'camera', class: 'fa-solid fa-camera' },
        { name: 'video', class: 'fa-solid fa-video' },
        { name: 'music', class: 'fa-solid fa-music' },
        { name: 'headphones', class: 'fa-solid fa-headphones' },
        { name: 'microphone', class: 'fa-solid fa-microphone' },
        { name: 'play', class: 'fa-solid fa-play' },
        { name: 'pause', class: 'fa-solid fa-pause' },
        { name: 'volume-high', class: 'fa-solid fa-volume-high' },
        { name: 'film', class: 'fa-solid fa-film' },

        // ── Solid: Files & Documents ──
        { name: 'file', class: 'fa-solid fa-file' },
        { name: 'file-lines', class: 'fa-solid fa-file-lines' },
        { name: 'file-pdf', class: 'fa-solid fa-file-pdf' },
        { name: 'folder', class: 'fa-solid fa-folder' },
        { name: 'folder-open', class: 'fa-solid fa-folder-open' },
        { name: 'clipboard', class: 'fa-solid fa-clipboard' },
        { name: 'pen', class: 'fa-solid fa-pen' },
        { name: 'pencil', class: 'fa-solid fa-pencil' },
        { name: 'pen-to-square', class: 'fa-solid fa-pen-to-square' },
        { name: 'copy', class: 'fa-solid fa-copy' },
        { name: 'trash', class: 'fa-solid fa-trash' },
        { name: 'magnifying-glass', class: 'fa-solid fa-magnifying-glass' },
        { name: 'print', class: 'fa-solid fa-print' },
        { name: 'book', class: 'fa-solid fa-book' },
        { name: 'book-open', class: 'fa-solid fa-book-open' },
        { name: 'newspaper', class: 'fa-solid fa-newspaper' },
        { name: 'quote-left', class: 'fa-solid fa-quote-left' },
        { name: 'quote-right', class: 'fa-solid fa-quote-right' },

        // ── Solid: Time ──
        { name: 'clock', class: 'fa-solid fa-clock' },
        { name: 'calendar', class: 'fa-solid fa-calendar' },
        { name: 'calendar-days', class: 'fa-solid fa-calendar-days' },
        { name: 'hourglass-half', class: 'fa-solid fa-hourglass-half' },
        { name: 'stopwatch', class: 'fa-solid fa-stopwatch' },

        // ── Solid: Nature & Weather ──
        { name: 'sun', class: 'fa-solid fa-sun' },
        { name: 'moon', class: 'fa-solid fa-moon' },
        { name: 'cloud-sun', class: 'fa-solid fa-cloud-sun' },
        { name: 'snowflake', class: 'fa-solid fa-snowflake' },
        { name: 'leaf', class: 'fa-solid fa-leaf' },
        { name: 'seedling', class: 'fa-solid fa-seedling' },
        { name: 'tree', class: 'fa-solid fa-tree' },
        { name: 'water', class: 'fa-solid fa-water' },
        { name: 'mountain-sun', class: 'fa-solid fa-mountain-sun' },

        // ── Solid: Transport ──
        { name: 'car', class: 'fa-solid fa-car' },
        { name: 'truck', class: 'fa-solid fa-truck' },
        { name: 'plane', class: 'fa-solid fa-plane' },
        { name: 'ship', class: 'fa-solid fa-ship' },
        { name: 'bicycle', class: 'fa-solid fa-bicycle' },
        { name: 'rocket', class: 'fa-solid fa-rocket' },
        { name: 'road', class: 'fa-solid fa-road' },

        // ── Solid: Health & Science ──
        { name: 'heart-pulse', class: 'fa-solid fa-heart-pulse' },
        { name: 'stethoscope', class: 'fa-solid fa-stethoscope' },
        { name: 'pills', class: 'fa-solid fa-pills' },
        { name: 'syringe', class: 'fa-solid fa-syringe' },
        { name: 'flask', class: 'fa-solid fa-flask' },
        { name: 'atom', class: 'fa-solid fa-atom' },
        { name: 'dna', class: 'fa-solid fa-dna' },
        { name: 'brain', class: 'fa-solid fa-brain' },

        // ── Solid: Food & Drink ──
        { name: 'utensils', class: 'fa-solid fa-utensils' },
        { name: 'mug-hot', class: 'fa-solid fa-mug-hot' },
        { name: 'wine-glass', class: 'fa-solid fa-wine-glass' },
        { name: 'pizza-slice', class: 'fa-solid fa-pizza-slice' },
        { name: 'apple-whole', class: 'fa-solid fa-apple-whole' },

        // ── Solid: Education ──
        { name: 'graduation-cap', class: 'fa-solid fa-graduation-cap' },
        { name: 'school', class: 'fa-solid fa-school' },
        { name: 'chalkboard-user', class: 'fa-solid fa-chalkboard-user' },
        { name: 'book-open-reader', class: 'fa-solid fa-book-open-reader' },
        { name: 'lightbulb', class: 'fa-solid fa-lightbulb' },

        // ── Solid: Home & Lifestyle ──
        { name: 'house', class: 'fa-solid fa-house' },
        { name: 'couch', class: 'fa-solid fa-couch' },
        { name: 'bed', class: 'fa-solid fa-bed' },
        { name: 'bath', class: 'fa-solid fa-bath' },
        { name: 'shirt', class: 'fa-solid fa-shirt' },
        { name: 'palette', class: 'fa-solid fa-palette' },
        { name: 'paintbrush', class: 'fa-solid fa-paintbrush' },
        { name: 'scissors', class: 'fa-solid fa-scissors' },

        // ── Solid: Sports & Fitness ──
        { name: 'futbol', class: 'fa-solid fa-futbol' },
        { name: 'basketball', class: 'fa-solid fa-basketball' },
        { name: 'baseball', class: 'fa-solid fa-baseball' },
        { name: 'dumbbell', class: 'fa-solid fa-dumbbell' },
        { name: 'person-running', class: 'fa-solid fa-person-running' },
        { name: 'person-swimming', class: 'fa-solid fa-person-swimming' },
        { name: 'person-biking', class: 'fa-solid fa-person-biking' },

        // ── Solid: Miscellaneous ──
        { name: 'gift', class: 'fa-solid fa-gift' },
        { name: 'cake-candles', class: 'fa-solid fa-cake-candles' },
        { name: 'puzzle-piece', class: 'fa-solid fa-puzzle-piece' },
        { name: 'wand-magic-sparkles', class: 'fa-solid fa-wand-magic-sparkles' },
        { name: 'infinity', class: 'fa-solid fa-infinity' },
        { name: 'recycle', class: 'fa-solid fa-recycle' },
        { name: 'circle-half-stroke', class: 'fa-solid fa-circle-half-stroke' },
        { name: 'spinner', class: 'fa-solid fa-spinner' },
        { name: 'bars', class: 'fa-solid fa-bars' },
        { name: 'ellipsis', class: 'fa-solid fa-ellipsis' },
        { name: 'grip', class: 'fa-solid fa-grip' },
        { name: 'list', class: 'fa-solid fa-list' },
        { name: 'table', class: 'fa-solid fa-table' },
        { name: 'sliders', class: 'fa-solid fa-sliders' },
        { name: 'filter', class: 'fa-solid fa-filter' },
        { name: 'circle', class: 'fa-solid fa-circle' },
        { name: 'square', class: 'fa-solid fa-square' },

        // ── Regular (outline) ──
        { name: 'star (outline)', class: 'fa-regular fa-star' },
        { name: 'heart (outline)', class: 'fa-regular fa-heart' },
        { name: 'bell (outline)', class: 'fa-regular fa-bell' },
        { name: 'bookmark (outline)', class: 'fa-regular fa-bookmark' },
        { name: 'comment (outline)', class: 'fa-regular fa-comment' },
        { name: 'envelope (outline)', class: 'fa-regular fa-envelope' },
        { name: 'eye (outline)', class: 'fa-regular fa-eye' },
        { name: 'file (outline)', class: 'fa-regular fa-file' },
        { name: 'folder (outline)', class: 'fa-regular fa-folder' },
        { name: 'image (outline)', class: 'fa-regular fa-image' },
        { name: 'clock (outline)', class: 'fa-regular fa-clock' },
        { name: 'calendar (outline)', class: 'fa-regular fa-calendar' },
        { name: 'user (outline)', class: 'fa-regular fa-user' },
        { name: 'circle-check (outline)', class: 'fa-regular fa-circle-check' },
        { name: 'circle (outline)', class: 'fa-regular fa-circle' },
        { name: 'square (outline)', class: 'fa-regular fa-square' },
        { name: 'thumbs-up (outline)', class: 'fa-regular fa-thumbs-up' },
        { name: 'lightbulb (outline)', class: 'fa-regular fa-lightbulb' },
        { name: 'gem (outline)', class: 'fa-regular fa-gem' },
        { name: 'hand (outline)', class: 'fa-regular fa-hand' },
        { name: 'handshake (outline)', class: 'fa-regular fa-handshake' },
        { name: 'face-smile', class: 'fa-regular fa-face-smile' },
        { name: 'face-grin', class: 'fa-regular fa-face-grin' },
        { name: 'face-meh', class: 'fa-regular fa-face-meh' },
        { name: 'face-frown', class: 'fa-regular fa-face-frown' },
        { name: 'newspaper (outline)', class: 'fa-regular fa-newspaper' },
        { name: 'clipboard (outline)', class: 'fa-regular fa-clipboard' },
        { name: 'copy (outline)', class: 'fa-regular fa-copy' },
        { name: 'pen-to-square (outline)', class: 'fa-regular fa-pen-to-square' },
        { name: 'credit-card (outline)', class: 'fa-regular fa-credit-card' },
        { name: 'compass (outline)', class: 'fa-regular fa-compass' },
        { name: 'message (outline)', class: 'fa-regular fa-message' },
        { name: 'paper-plane (outline)', class: 'fa-regular fa-paper-plane' },
        { name: 'snowflake (outline)', class: 'fa-regular fa-snowflake' },
        { name: 'sun (outline)', class: 'fa-regular fa-sun' },
        { name: 'moon (outline)', class: 'fa-regular fa-moon' },

        // ── Brands ──
        { name: 'facebook', class: 'fa-brands fa-facebook' },
        { name: 'facebook-f', class: 'fa-brands fa-facebook-f' },
        { name: 'twitter', class: 'fa-brands fa-twitter' },
        { name: 'x-twitter', class: 'fa-brands fa-x-twitter' },
        { name: 'instagram', class: 'fa-brands fa-instagram' },
        { name: 'linkedin', class: 'fa-brands fa-linkedin' },
        { name: 'linkedin-in', class: 'fa-brands fa-linkedin-in' },
        { name: 'youtube', class: 'fa-brands fa-youtube' },
        { name: 'tiktok', class: 'fa-brands fa-tiktok' },
        { name: 'pinterest', class: 'fa-brands fa-pinterest' },
        { name: 'snapchat', class: 'fa-brands fa-snapchat' },
        { name: 'whatsapp', class: 'fa-brands fa-whatsapp' },
        { name: 'telegram', class: 'fa-brands fa-telegram' },
        { name: 'discord', class: 'fa-brands fa-discord' },
        { name: 'slack', class: 'fa-brands fa-slack' },
        { name: 'reddit', class: 'fa-brands fa-reddit' },
        { name: 'github', class: 'fa-brands fa-github' },
        { name: 'gitlab', class: 'fa-brands fa-gitlab' },
        { name: 'bitbucket', class: 'fa-brands fa-bitbucket' },
        { name: 'stack-overflow', class: 'fa-brands fa-stack-overflow' },
        { name: 'codepen', class: 'fa-brands fa-codepen' },
        { name: 'npm', class: 'fa-brands fa-npm' },
        { name: 'docker', class: 'fa-brands fa-docker' },
        { name: 'wordpress', class: 'fa-brands fa-wordpress' },
        { name: 'wordpress-simple', class: 'fa-brands fa-wordpress-simple' },
        { name: 'html5', class: 'fa-brands fa-html5' },
        { name: 'css3', class: 'fa-brands fa-css3-alt' },
        { name: 'js', class: 'fa-brands fa-js' },
        { name: 'php', class: 'fa-brands fa-php' },
        { name: 'python', class: 'fa-brands fa-python' },
        { name: 'java', class: 'fa-brands fa-java' },
        { name: 'react', class: 'fa-brands fa-react' },
        { name: 'angular', class: 'fa-brands fa-angular' },
        { name: 'vuejs', class: 'fa-brands fa-vuejs' },
        { name: 'node-js', class: 'fa-brands fa-node-js' },
        { name: 'aws', class: 'fa-brands fa-aws' },
        { name: 'google', class: 'fa-brands fa-google' },
        { name: 'apple', class: 'fa-brands fa-apple' },
        { name: 'microsoft', class: 'fa-brands fa-microsoft' },
        { name: 'amazon', class: 'fa-brands fa-amazon' },
        { name: 'shopify', class: 'fa-brands fa-shopify' },
        { name: 'stripe', class: 'fa-brands fa-stripe' },
        { name: 'paypal', class: 'fa-brands fa-paypal' },
        { name: 'cc-visa', class: 'fa-brands fa-cc-visa' },
        { name: 'cc-mastercard', class: 'fa-brands fa-cc-mastercard' },
        { name: 'cc-amex', class: 'fa-brands fa-cc-amex' },
        { name: 'spotify', class: 'fa-brands fa-spotify' },
        { name: 'soundcloud', class: 'fa-brands fa-soundcloud' },
        { name: 'dribbble', class: 'fa-brands fa-dribbble' },
        { name: 'behance', class: 'fa-brands fa-behance' },
        { name: 'figma', class: 'fa-brands fa-figma' },
        { name: 'sketch', class: 'fa-brands fa-sketch' },
        { name: 'medium', class: 'fa-brands fa-medium' },
        { name: 'vimeo', class: 'fa-brands fa-vimeo-v' },
        { name: 'twitch', class: 'fa-brands fa-twitch' },
        { name: 'airbnb', class: 'fa-brands fa-airbnb' },
        { name: 'uber', class: 'fa-brands fa-uber' },
        { name: 'android', class: 'fa-brands fa-android' },
        { name: 'app-store', class: 'fa-brands fa-app-store' },
        { name: 'google-play', class: 'fa-brands fa-google-play' },
        { name: 'chrome', class: 'fa-brands fa-chrome' },
        { name: 'firefox', class: 'fa-brands fa-firefox-browser' },
        { name: 'safari', class: 'fa-brands fa-safari' },
        { name: 'edge', class: 'fa-brands fa-edge' },
        { name: 'dropbox', class: 'fa-brands fa-dropbox' },
        { name: 'google-drive', class: 'fa-brands fa-google-drive' },
        { name: 'threads', class: 'fa-brands fa-threads' },
        { name: 'mastodon', class: 'fa-brands fa-mastodon' },
        { name: 'bluesky', class: 'fa-brands fa-bluesky' }
    ];
})();
