Make the menu dark mode and give it minimize/restore transitions:

// ==UserScript==
// @name         Custom Draggable Debug Menu
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds a custom draggable debug menu with styled checkboxes.
// @author       YSSF
// @match        https://zty.pe/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Create the menu container
    const menu = document.createElement('div');
    menu.id = 'custom-debug-menu';
    menu.innerHTML = `
        <div id="debug-menu-header">
            <span>Debug Menu</span>
            <button id="debug-menu-toggle">−</button>
        </div>
        <div id="debug-menu-content">
            <label class="switch">
                <input type="checkbox" id="option1">
                <span class="slider"></span>
                <span class="label-text">Option 1</span>
            </label>
            <label class="switch">
                <input type="checkbox" id="option2">
                <span class="slider"></span>
                <span class="label-text">Option 2</span>
            </label>
            <label class="switch">
                <input type="checkbox" id="option3">
                <span class="slider"></span>
                <span class="label-text">Option 3</span>
            </label>
        </div>
    `;
    document.body.appendChild(menu);

    // Add styles
    const styles = document.createElement('style');
    styles.innerHTML = `
        #custom-debug-menu {
            position: fixed;
            top: 100px;
            left: 100px;
            width: 200px;
            background-color: #fff;
            border: 1px solid #ccc;
            z-index: 9999;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            border-radius: 8px;
            overflow: hidden;
            user-select: none;
            font-family: Arial, sans-serif;
        }
        #debug-menu-header {
            background-color: #f1f1f1;
            padding: 10px;
            cursor: move;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #debug-menu-header span {
            font-weight: bold;
        }
        #debug-menu-header button {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
        }
        #debug-menu-content {
            padding: 10px;
            display: block;
            transition: all 0.3s ease;
        }
        .switch {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .switch input {
            display: none;
        }
        .slider {
            position: relative;
            width: 40px;
            height: 20px;
            background-color: #ccc;
            border-radius: 20px;
            margin-right: 10px;
            transition: background-color 0.3s;
            cursor: pointer;
        }
        .slider::before {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            left: 2px;
            top: 2px;
            background-color: #fff;
            border-radius: 50%;
            transition: transform 0.3s;
        }
        input:checked + .slider {
            background-color: #2196F3;
        }
        input:checked + .slider::before {
            transform: translateX(20px);
        }
        .label-text {
            flex-grow: 1;
        }
    `;
    document.head.appendChild(styles);

    // Make the menu draggable
    dragElement(menu);

    function dragElement(el) {
        const header = document.getElementById('debug-menu-header');
        let posX = 0, posY = 0, mouseX = 0, mouseY = 0;
        if (header) {
            header.onmousedown = dragMouseDown;
        } else {
            el.onmousedown = dragMouseDown;
        }

        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            mouseX = e.clientX;
            mouseY = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            posX = mouseX - e.clientX;
            posY = mouseY - e.clientY;
            mouseX = e.clientX;
            mouseY = e.clientY;
            el.style.top = (el.offsetTop - posY) + "px";
            el.style.left = (el.offsetLeft - posX) + "px";
        }

        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

    // Minimize/Restore functionality
    const toggleButton = document.getElementById('debug-menu-toggle');
    const content = document.getElementById('debug-menu-content');
    let isMinimized = false;

    toggleButton.addEventListener('click', () => {
        if (isMinimized) {
            content.style.display = 'block';
            toggleButton.innerHTML = '−';
            isMinimized = false;
        } else {
            content.style.display = 'none';
            toggleButton.innerHTML = '+';
            isMinimized = true;
        }
    });
})();