function my_colors_palette_wheel_alpha_shortcode() {
    ob_start();
    ?>
    <div class="my-palette-wrapper">
        <h2>Выбор цвета с прозрачностью</h2>
        <p>Кликните по цветовому кругу, чтобы выбрать оттенок. Настройте прозрачность и скопируйте нужный формат.</p>

        <div class="palette-grid">
            <!-- Колесо -->
            <div class="wheel-cell">
                <canvas id="colorWheel" width="300" height="300"></canvas>
            </div>

            <!-- Панель значений и кнопок -->
            <div class="controls-cell">
                <div class="selected-color-display">
                    <span class="label">Выбранный цвет:</span>
                    <div class="swatch" id="selectedSwatch"></div>

                    <div class="color-values">
                        <div class="value-row">
                            <label>HEX:</label>
                            <input type="text" id="hexInput" value="#FFFFFF" readonly>
                        </div>
                        <div class="value-row">
                            <label>RGBA:</label>
                            <input type="text" id="rgbaInput" value="rgba(255,255,255,1)" readonly>
                        </div>
                    </div>

                    <div class="alpha-control">
                        <label>Прозрачность (α):</label>
                        <input type="range" id="alphaRange" min="0" max="1" step="0.01" value="1">
                        <span id="alphaValue">1.00</span>
                    </div>

                    <div class="copy-btns">
                        <button id="copyHexBtn" class="copy-btn btn-hex">Копировать HEX</button>
                        <button id="copyRgbBtn" class="copy-btn btn-rgba">Копировать RGBA</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .my-palette-wrapper {
            max-width: 960px;
            margin: 30px auto;
            padding: 0 15px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
        }
        /* Адаптивная сетка */
        .palette-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            align-items: start;
        }

        /* На мобильных — одна колонка */
        @media (max-width: 768px) {
            .palette-grid { grid-template-columns: 1fr; }
        }

        .wheel-cell {
            display: flex;
            justify-content: center;
        }
        #colorWheel {
            width: 100%;
            max-width: 300px;
            height: auto;
            aspect-ratio: 1;
            border-radius: 50%;
            box-shadow: 0 4px 12px rgba(0,0,0,.15);
        }

        .controls-cell {
            min-width: 280px;
        }

        .selected-color-display {
            background: #fff;
            padding: 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,.08);
        }

        .swatch {
            width: 40px; height: 40px;
            border-radius: 6px;
            box-shadow: inset 0 2px 4px rgba(0,0,0,.2);
            display: inline-block;
            vertical-align: middle;
            margin-left: 12px;
        }

        .value-row {
            display: flex; align-items: center; gap: 10px; margin-top: 8px;
        }
        .value-row label {
            min-width: 42px; font-size: 13px; color: #444;
        }
        #hexInput, #rgbaInput {
            border: 1px solid #ccc; padding: 6px 10px; border-radius: 4px;
            font-family: monospace; font-size: 13px; width: 100%; box-sizing: border-box;
        }

        .alpha-control {
            margin-top: 14px;
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        }
        .alpha-control label {
            font-size: 13px; color: #444; flex: 1; min-width: 110px;
        }
        #alphaRange {
            flex: 1; min-width: 140px; cursor: pointer;
        }
        #alphaValue {
            width: 50px; text-align: right; font-family: monospace;
        }

        .copy-btns {
            margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap;
        }
        .copy-btn {
            cursor: pointer; border: none; padding: 10px 16px; border-radius: 6px;
            font-size: 14px; transition: background .2s; flex: 1; min-width: 130px;
        }
        .btn-hex { background: #f5f5f5; color: #333; }
        .btn-hex:hover { background: #e5e5e5; }
        .btn-rgba { background: #fafafa; color: #444; border: 1px solid #ddd; }
        .btn-rgba:hover { background: #eaeaea; }
        .copy-btn.copied { background: #27ae60; color: #fff; }
    </style>

    <script>
        (function() {
            const canvas = document.getElementById('colorWheel');
            const ctx = canvas.getContext('2d');
            // Радиус по реальному размеру canvas (для ресайза)
            let radius = canvas.width / 2;

            function drawWheel() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                for (let y = 0; y < canvas.height; y++) {
                    for (let x = 0; x < canvas.width; x++) {
                        const dx = x - radius;
                        const dy = y - radius;
                        const dist = Math.sqrt(dx*dx + dy*dy);
                        if (dist <= radius) {
                            const angle = Math.atan2(dy, dx);
                            const hue = ((angle + Math.PI) / (Math.PI * 2)) * 360;
                            const saturation = (dist / radius) * 100;
                            ctx.fillStyle = `hsl(${hue}, ${saturation}%, 50%)`;
                            ctx.fillRect(x, y, 1, 1);
                        }
                    }
                }
            }
            drawWheel();

            const swatch = document.getElementById('selectedSwatch');
            const hexInput = document.getElementById('hexInput');
            const rgbaInput = document.getElementById('rgbaInput');
            const alphaRange = document.getElementById('alphaRange');
            const alphaValue = document.getElementById('alphaValue');
            const copyHexBtn = document.getElementById('copyHexBtn');
            const copyRgbBtn = document.getElementById('copyRgbBtn');

            let currentRgb = { r: 255, g: 255, b: 255 };
            let currentAlpha = 1;

            function updateDisplay() {
                const hex = rgbToHex(currentRgb.r, currentRgb.g, currentRgb.b);
                hexInput.value = hex.toUpperCase();
                rgbaInput.value = `rgba(${currentRgb.r}, ${currentRgb.g}, ${currentRgb.b}, ${currentAlpha.toFixed(2)})`;
                swatch.style.backgroundColor = rgbaInput.value;
                alphaValue.textContent = currentAlpha.toFixed(2);
            }

            alphaRange.addEventListener('input', (e) => {
                currentAlpha = parseFloat(e.target.value);
                updateDisplay();
            });

            // Обработка клика/тача по колесу
            function handleColorSelect(e) {
                // Для тач-событий координаты могут быть в clientX/clientY, как у мыши
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;

                // Пересчитываем радиус под текущий размер canvas
                radius = canvas.width / 2;
                const dx = x - radius;
                const dy = y - radius;
                const dist = Math.sqrt(dx*dx + dy*dy);

                if (dist > radius) return;

                const angle = Math.atan2(dy, dx);
                const hue = ((angle + Math.PI) / (Math.PI * 2)) * 360;
                const saturation = (dist / radius) * 100;

                const rgb = hslToRgb(hue, saturation, 50);
                currentRgb = rgb;
                updateDisplay();
            }

            canvas.addEventListener('mousedown', handleColorSelect);
            canvas.addEventListener('mousemove', (e) => { if (e.buttons === 1) handleColorSelect(e); });
            canvas.addEventListener('touchstart', (e) => {
                e.preventDefault();
                const touch = e.touches[0];
                handleColorSelect({ clientX: touch.clientX, clientY: touch.clientY });
            }, { passive: false });
            canvas.addEventListener('touchmove', (e) => {
                if (e.touches.length === 1) {
                    e.preventDefault();
                    const touch = e.touches[0];
                    handleColorSelect({ clientX: touch.clientX, clientY: touch.clientY });
                }
            }, { passive: false });

            copyHexBtn.addEventListener('click', () => {
                copyToClipboard(hexInput.value, copyHexBtn);
            });
            copyRgbBtn.addEventListener('click', () => {
                copyToClipboard(rgbaInput.value, copyRgbBtn);
            });

            function copyToClipboard(text, btn) {
                navigator.clipboard.writeText(text).then(() => {
                    const original = btn.innerText;
                    btn.classList.add('copied');
                    btn.innerText = 'Скопировано';
                    setTimeout(() => {
                        btn.classList.remove('copied');
                        btn.innerText = original;
                    }, 2000);
                }).catch(err => console.error('Copy failed', err));
            }

            function hslToRgb(h, s, l) {
                s /= 100; l /= 100;
                const c = (1 - Math.abs(2 * l - 1)) * s;
                const x = c * (1 - Math.abs((h / 60) % 2 - 1));
                const m = l - c / 2;
                let r = 0, g = 0, b = 0;
                if (h >= 0 && h < 60) { r = c; g = x; }
                else if (h < 120) { r = x; g = c; }
                else if (h < 180) { g = c; b = x; }
                else if (h < 240) { g = x; b = c; }
                else if (h < 300) { b = c; r = x; }
                else { b = x; r = c; }
                return {
                    r: Math.round((r + m) * 255),
                    g: Math.round((g + m) * 255),
                    b: Math.round((b + m) * 255)
                };
            }

            function rgbToHex(r, g, b) {
                return '#' + [r, g, b].map(x => {
                    const hex = x.toString(16);
                    return hex.length === 1 ? '0' + hex : hex;
                }).join('').toUpperCase();
            }
        })();
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('my_colors_palette_wheel_alpha', 'my_colors_palette_wheel_alpha_shortcode');

function my_colors_grid_shortcode() {
    ob_start();

    $colors = [
        // Красные тона
        ['name' => 'IndianRed', 'hex' => '#CD5C5C', 'rgb' => '205, 92, 92'],
        ['name' => 'LightCoral', 'hex' => '#F08080', 'rgb' => '240, 128, 128'],
        ['name' => 'Salmon', 'hex' => '#FA8072', 'rgb' => '250, 128, 114'],
        ['name' => 'DarkSalmon', 'hex' => '#E9967A', 'rgb' => '233, 150, 122'],
        ['name' => 'LightSalmon', 'hex' => '#FFA07A', 'rgb' => '255, 160, 122'],
        ['name' => 'Crimson', 'hex' => '#DC143C', 'rgb' => '220, 20, 60'],
        ['name' => 'Red', 'hex' => '#FF0000', 'rgb' => '255, 0, 0'],
        ['name' => 'FireBrick', 'hex' => '#B22222', 'rgb' => '178, 34, 34'],
        ['name' => 'DarkRed', 'hex' => '#8B0000', 'rgb' => '139, 0, 0'],

        // Розовые тона
        ['name' => 'Pink', 'hex' => '#FFC0CB', 'rgb' => '255, 192, 203'],
        ['name' => 'LightPink', 'hex' => '#FFB6C1', 'rgb' => '255, 182, 193'],
        ['name' => 'HotPink', 'hex' => '#FF69B4', 'rgb' => '255, 105, 180'],
        ['name' => 'DeepPink', 'hex' => '#FF1493', 'rgb' => '255, 20, 147'],
        ['name' => 'MediumVioletRed', 'hex' => '#C71585', 'rgb' => '199, 21, 133'],
        ['name' => 'PaleVioletRed', 'hex' => '#DB7093', 'rgb' => '219, 112, 147'],

        // Оранжевые тона
        ['name' => 'Coral', 'hex' => '#FF7F50', 'rgb' => '255, 127, 80'],
        ['name' => 'Tomato', 'hex' => '#FF6347', 'rgb' => '255, 99, 71'],
        ['name' => 'OrangeRed', 'hex' => '#FF4500', 'rgb' => '255, 69, 0'],
        ['name' => 'DarkOrange', 'hex' => '#FF8C00', 'rgb' => '255, 140, 0'],
        ['name' => 'Orange', 'hex' => '#FFA500', 'rgb' => '255, 165, 0'],

        // Жёлтые тона
        ['name' => 'Gold', 'hex' => '#FFD700', 'rgb' => '255, 215, 0'],
        ['name' => 'Yellow', 'hex' => '#FFFF00', 'rgb' => '255, 255, 0'],
        ['name' => 'LightYellow', 'hex' => '#FFFFE0', 'rgb' => '255, 255, 224'],
        ['name' => 'LemonChiffon', 'hex' => '#FFFACD', 'rgb' => '255, 250, 205'],
        ['name' => 'LightGoldenrodYellow', 'hex' => '#FAFAD2', 'rgb' => '250, 250, 210'],
        ['name' => 'PapayaWhip', 'hex' => '#FFEFD5', 'rgb' => '255, 239, 213'],
        ['name' => 'Moccasin', 'hex' => '#FFE4B5', 'rgb' => '255, 228, 181'],
        ['name' => 'PeachPuff', 'hex' => '#FFDAB9', 'rgb' => '255, 218, 185'],
        ['name' => 'PaleGoldenrod', 'hex' => '#EEE8AA', 'rgb' => '238, 232, 170'],
        ['name' => 'Khaki', 'hex' => '#F0E68C', 'rgb' => '240, 230, 140'],
        ['name' => 'DarkKhaki', 'hex' => '#BDB76B', 'rgb' => '189, 183, 107'],

        // Фиолетовые тона
        ['name' => 'Lavender', 'hex' => '#E6E6FA', 'rgb' => '230, 230, 250'],
        ['name' => 'Thistle', 'hex' => '#D8BFD8', 'rgb' => '216, 191, 216'],
        ['name' => 'Plum', 'hex' => '#DDA0DD', 'rgb' => '221, 160, 221'],
        ['name' => 'Violet', 'hex' => '#EE82EE', 'rgb' => '238, 130, 238'],
        ['name' => 'Orchid', 'hex' => '#DA70D6', 'rgb' => '218, 112, 214'],
        ['name' => 'Fuchsia', 'hex' => '#FF00FF', 'rgb' => '255, 0, 255'],
        ['name' => 'Magenta', 'hex' => '#FF00FF', 'rgb' => '255, 0, 255'],
        ['name' => 'MediumOrchid', 'hex' => '#BA55D3', 'rgb' => '186, 85, 211'],
        ['name' => 'MediumPurple', 'hex' => '#9370DB', 'rgb' => '147, 112, 219'],
        ['name' => 'BlueViolet', 'hex' => '#8A2BE2', 'rgb' => '138, 43, 226'],
        ['name' => 'DarkViolet', 'hex' => '#9400D3', 'rgb' => '148, 0, 211'],
        ['name' => 'DarkOrchid', 'hex' => '#9932CC', 'rgb' => '153, 50, 204'],
        ['name' => 'DarkMagenta', 'hex' => '#8B008B', 'rgb' => '139, 0, 139'],
        ['name' => 'Purple', 'hex' => '#800080', 'rgb' => '128, 0, 128'],
        ['name' => 'Indigo', 'hex' => '#4B0082', 'rgb' => '75, 0, 130'],
        ['name' => 'SlateBlue', 'hex' => '#6A5ACD', 'rgb' => '106, 90, 205'],
        ['name' => 'DarkSlateBlue', 'hex' => '#483D8B', 'rgb' => '72, 61, 139'],

        // Коричневые тона
        ['name' => 'Cornsilk', 'hex' => '#FFF8DC', 'rgb' => '255, 248, 220'],
        ['name' => 'BlanchedAlmond', 'hex' => '#FFEBCD', 'rgb' => '255, 235, 205'],
        ['name' => 'Bisque', 'hex' => '#FFE4C4', 'rgb' => '255, 228, 196'],
        ['name' => 'NavajoWhite', 'hex' => '#FFDEAD', 'rgb' => '255, 222, 173'],
        ['name' => 'Wheat', 'hex' => '#F5DEB3', 'rgb' => '245, 222, 179'],
        ['name' => 'BurlyWood', 'hex' => '#DEB887', 'rgb' => '222, 184, 135'],
        ['name' => 'Tan', 'hex' => '#D2B48C', 'rgb' => '210, 180, 140'],
        ['name' => 'RosyBrown', 'hex' => '#BC8F8F', 'rgb' => '188, 143, 143'],
        ['name' => 'SandyBrown', 'hex' => '#F4A460', 'rgb' => '244, 164, 96'],
        ['name' => 'Goldenrod', 'hex' => '#DAA520', 'rgb' => '218, 165, 32'],
        ['name' => 'DarkGoldenRod', 'hex' => '#B8860B', 'rgb' => '184, 134, 11'],
        ['name' => 'Peru', 'hex' => '#CD853F', 'rgb' => '205, 133, 63'],
        ['name' => 'Chocolate', 'hex' => '#D2691E', 'rgb' => '210, 105, 30'],
        ['name' => 'SaddleBrown', 'hex' => '#8B4513', 'rgb' => '139, 69, 19'],
        ['name' => 'Sienna', 'hex' => '#A0522D', 'rgb' => '160, 82, 45'],
        ['name' => 'Brown', 'hex' => '#A52A2A', 'rgb' => '165, 42, 42'],
        ['name' => 'Maroon', 'hex' => '#800000', 'rgb' => '128, 0, 0'],

        // Основные цвета
        ['name' => 'Black', 'hex' => '#000000', 'rgb' => '0, 0, 0'],
        ['name' => 'Gray', 'hex' => '#808080', 'rgb' => '128, 128, 128'],
        ['name' => 'Silver', 'hex' => '#C0C0C0', 'rgb' => '192, 192, 192'],
        ['name' => 'White', 'hex' => '#FFFFFF', 'rgb' => '255, 255, 255'],
        ['name' => 'Olive', 'hex' => '#808000', 'rgb' => '128, 128, 0'],
        ['name' => 'Lime', 'hex' => '#00FF00', 'rgb' => '0, 255, 0'],
        ['name' => 'Green', 'hex' => '#008000', 'rgb' => '0, 128, 0'],
        ['name' => 'Aqua', 'hex' => '#00FFFF', 'rgb' => '0, 255, 255'],
        ['name' => 'Teal', 'hex' => '#008080', 'rgb' => '0, 128, 128'],
        ['name' => 'Navy', 'hex' => '#000080', 'rgb' => '0, 0, 128'],

        // Зелёные тона
        ['name' => 'GreenYellow', 'hex' => '#ADFF2F', 'rgb' => '173, 255, 47'],
        ['name' => 'Chartreuse', 'hex' => '#7FFF00', 'rgb' => '127, 255, 0'],
        ['name' => 'LawnGreen', 'hex' => '#7CFC00', 'rgb' => '124, 252, 0'],
        ['name' => 'LimeGreen', 'hex' => '#32CD32', 'rgb' => '50, 205, 50'],
        ['name' => 'PaleGreen', 'hex' => '#98FB98', 'rgb' => '152, 251, 152'],
        ['name' => 'LightGreen', 'hex' => '#90EE90', 'rgb' => '144, 238, 144'],
        ['name' => 'MediumSpringGreen', 'hex' => '#00FA9A', 'rgb' => '0, 250, 154'],
        ['name' => 'SpringGreen', 'hex' => '#00FF7F', 'rgb' => '0, 255, 127'],
        ['name' => 'MediumSeaGreen', 'hex' => '#3CB371', 'rgb' => '60, 179, 113'],
        ['name' => 'SeaGreen', 'hex' => '#2E8B57', 'rgb' => '46, 139, 87'],
        ['name' => 'ForestGreen', 'hex' => '#228B22', 'rgb' => '34, 139, 34'],
        ['name' => 'DarkGreen', 'hex' => '#006400', 'rgb' => '0, 100, 0'],
        ['name' => 'YellowGreen', 'hex' => '#9ACD32', 'rgb' => '154, 205, 50'],
        ['name' => 'OliveDrab', 'hex' => '#6B8E23', 'rgb' => '107, 142, 35'],
        ['name' => 'DarkOliveGreen', 'hex' => '#556B2F', 'rgb' => '85, 107, 47'],
        ['name' => 'MediumAquamarine', 'hex' => '#66CDAA', 'rgb' => '102, 205, 170'],
        ['name' => 'DarkSeaGreen', 'hex' => '#8FBC8F', 'rgb' => '143, 188, 143'],
        ['name' => 'LightSeaGreen', 'hex' => '#20B2AA', 'rgb' => '32, 178, 170'],
        ['name' => 'DarkCyan', 'hex' => '#008B8B', 'rgb' => '0, 139, 139'],

        // Синие тона
        ['name' => 'Cyan', 'hex' => '#00FFFF', 'rgb' => '0, 255, 255'],
        ['name' => 'LightCyan', 'hex' => '#E0FFFF', 'rgb' => '224, 255, 255'],
        ['name' => 'PaleTurquoise', 'hex' => '#AFEEEE', 'rgb' => '175, 238, 238'],
        ['name' => 'Aquamarine', 'hex' => '#7FFFD4', 'rgb' => '127, 255, 212'],
        ['name' => 'Turquoise', 'hex' => '#40E0D0', 'rgb' => '64, 224, 208'],
        ['name' => 'MediumTurquoise', 'hex' => '#48D1CC', 'rgb' => '72, 209, 204'],
                ['name' => 'DarkTurquoise', 'hex' => '#00CED1', 'rgb' => '0, 206, 209'],
        ['name' => 'CadetBlue', 'hex' => '#5F9EA0', 'rgb' => '95, 158, 160'],
        ['name' => 'SteelBlue', 'hex' => '#4682B4', 'rgb' => '70, 130, 180'],
        ['name' => 'LightSteelBlue', 'hex' => '#B0C4DE', 'rgb' => '176, 196, 222'],
        ['name' => 'PowderBlue', 'hex' => '#B0E0E6', 'rgb' => '176, 224, 230'],
        ['name' => 'LightBlue', 'hex' => '#ADD8E6', 'rgb' => '173, 216, 230'],
        ['name' => 'SkyBlue', 'hex' => '#87CEEB', 'rgb' => '135, 206, 235'],
        ['name' => 'LightSkyBlue', 'hex' => '#87CEFA', 'rgb' => '135, 206, 250'],
        ['name' => 'DeepSkyBlue', 'hex' => '#00BFFF', 'rgb' => '0, 191, 255'],
        ['name' => 'DodgerBlue', 'hex' => '#1E90FF', 'rgb' => '30, 144, 255'],
        ['name' => 'CornflowerBlue', 'hex' => '#6495ED', 'rgb' => '100, 149, 237'],
        ['name' => 'MediumSlateBlue', 'hex' => '#7B68EE', 'rgb' => '123, 104, 238'],
        ['name' => 'RoyalBlue', 'hex' => '#4169E1', 'rgb' => '65, 105, 225'],
        ['name' => 'Blue', 'hex' => '#0000FF', 'rgb' => '0, 0, 255'],
        ['name' => 'MediumBlue', 'hex' => '#0000CD', 'rgb' => '0, 0, 205'],
        ['name' => 'DarkBlue', 'hex' => '#00008B', 'rgb' => '0, 0, 139'],
        ['name' => 'Navy', 'hex' => '#000080', 'rgb' => '0, 0, 128'],
        ['name' => 'MidnightBlue', 'hex' => '#191970', 'rgb' => '25, 25, 112'],

        // Белые тона
        ['name' => 'WhiteSmoke', 'hex' => '#F5F5F5', 'rgb' => '245, 245, 245'],
        ['name' => 'Seashell', 'hex' => '#FFF5EE', 'rgb' => '255, 245, 238'],
        ['name' => 'FloralWhite', 'hex' => '#FFFAF0', 'rgb' => '255, 250, 240'],
        ['name' => 'Ivory', 'hex' => '#FFFFF0', 'rgb' => '255, 255, 240'],

        // Серые тона
        ['name' => 'LightGrey', 'hex' => '#D3D3D3', 'rgb' => '211, 211, 211'],
        ['name' => 'DarkGray', 'hex' => '#A9A9A9', 'rgb' => '169, 169, 169'],
        ['name' => 'DimGray', 'hex' => '#696969', 'rgb' => '105, 105, 105'],
        ['name' => 'LightSlateGray', 'hex' => '#778899', 'rgb' => '119, 136, 153'],
        ['name' => 'SlateGray', 'hex' => '#708090', 'rgb' => '112, 128, 144'],
        ['name' => 'DarkSlateGray', 'hex' => '#2F4F4F', 'rgb' => '47, 79, 79']
    ];

    ?>
    <div class="my-palette-wrapper">
        <h2>Цветовая палитра (полная)</h2>
        <strong><p>Кликните по HEX‑коду, чтобы скопировать его. RGB — для справки.</p></strong>

        <div class="colors-grid-container">
            <!-- Заголовки -->
            <div class="grid-header"></div>
            <div class="grid-header">Название</div>
            <div class="grid-header">RGBA</div>
            <div class="grid-header">HEX</div>

            <?php foreach ($colors as $c): ?>
                <div class="color-swatch" style="background-color: <?php echo esc_attr($c['hex']); ?>;"></div>
                <div class="color-name"><?php echo esc_html($c['name']); ?></div>
                <div class="color-rgba">rgba(<?php echo esc_html($c['rgb']); ?>, 1)</div>
                <div class="color-hex copy-trigger" data-value="<?php echo esc_attr($c['hex']); ?>">
                    <?php echo esc_html($c['hex']); ?>
                </div>
            <?php endforeach; ?>
        </div>
    </div>

    <style>
        .my-palette-wrapper {
            font-family: system-ui, Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .colors-grid-container {
            display: grid;
            grid-template-columns: 50px 2fr 2fr 1fr;
            gap: 1px;
            background-color: #ccc;
            border: 1px solid #ccc;
        }
        .grid-header,
        .color-swatch,
        .color-name,
        .color-rgba,
        .color-hex {
            background-color: #fff;
            padding: 10px 12px;
            color: #333;
        }
        .grid-header {
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.85rem;
            border-bottom: 1px solid #ccc;
            background-color: #f5f5f5;
        }
        .color-swatch {
            width: 50px;
            height: 50px;
            border-right: 1px solid #ccc;
        }
        .color-hex {
            cursor: pointer;
            user-select: none;
            font-family: monospace;
            font-weight: 600;
        }
        .color-hex:hover {
            background-color: #f0f0f0;
        }

        @media (max-width: 768px) {
            .colors-grid-container {
                grid-template-columns: 40px 1fr;
                gap: 0;
            }
            .grid-header:nth-child(3),
            .grid-header:nth-child(4),
            .color-rgba,
            .color-hex {
                display: none;
            }
            .color-swatch, .color-name {
                border-bottom: 1px solid #ccc;
                padding: 8px 10px;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const triggers = document.querySelectorAll('.copy-trigger');
            triggers.forEach(el => {
                el.addEventListener('click', function() {
                    const val = this.getAttribute('data-value');
                    navigator.clipboard.writeText(val).then(() => {
                        const oldText = this.textContent;
                        this.textContent = '✓';
                        setTimeout(() => this.textContent = oldText, 1200);
                    }).catch(err => console.error('Не удалось скопировать:', err));
                });
            });
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('my_colors_grid', 'my_colors_grid_shortcode');