#modulesList {
    margin-left: 18px;
}
#module-settings {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
/* Prevent shifting in levelling settings box */
/* Prevent shifting in levelling settings box */
.levelling-xp-setting {
    min-height: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 1em;
    box-sizing: border-box;
    padding: 0;
    margin: 0 !important;
    border: 1px solid red;
    transition: none !important;
}
.levelling-xp-setting .form-label {
    margin-bottom: 0 !important;
    min-width: 80px;
    height: 100%;
    display: flex;
    align-items: center;
}
.levelling-xp-setting .form-input {
    max-width: 200px;
    height: 36px;
    margin: 0 !important;
    box-sizing: border-box;
}
/* Emoji Picker White Box Style */
.emoji-btn {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0.2em 0.1em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emoji-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px #0002;
    font-size: 1.7em;
    transition: box-shadow 0.18s, border 0.18s;
    border: 1px solid #e0e0e0;
    user-select: none;
}
.emoji-btn:focus .emoji-box, .emoji-btn:hover .emoji-box {
    box-shadow: 0 4px 16px #0003, 0 0 0 2px var(--primary) inset;
    border-color: var(--primary);
}
/* Modern circular color picker input */
#colorPickerInput {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    border: 4px solid var(--bg-input) !important;
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.18), 0 0 0 2px var(--primary) inset;
    outline: none !important;
    cursor: pointer;
    transition: box-shadow 0.18s, border 0.18s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    position: relative;
}
#colorPickerInput:focus {
    box-shadow: 0 0 0 4px var(--primary), 0 4px 16px 0 rgba(0,0,0,0.18);
    border-color: var(--primary);
}
/* Hide default color swatch for a cleaner look */
#colorPickerInput::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}
#colorPickerInput::-webkit-color-swatch {
    border-radius: 50%;
    border: none;
}
#colorPickerInput::-moz-color-swatch {
    border-radius: 50%;
    border: none;
}
#colorPickerInput::-ms-color-swatch {
    border-radius: 50%;
    border: none;
}

                                        /* Consistent font for all builder inputs */
                                        .embedBuilder .form-input,
                                        .embedBuilder textarea.form-input,
                                        .embedBuilder select.form-input,
                                        .embedBuilder label,
                                        .embedBuilder .form-label,
                                        .embedBuilder .btn,
                                        .embedBuilder,
                                        #msgContent,
                                        #embedsList,
                                        #msgComponents,
                                        #messagePreview,
                                        #messageJson {
                                            font-family: inherit !important;
                                            font-size: 1rem !important;
                                            letter-spacing: 0.01em;
                                        }
                                /* Darker input style for embed builder */
                                .embedBuilder .form-input,
                                .embedBuilder textarea.form-input,
                                .embedBuilder select.form-input {
                                    background: #232b3a !important; /* blue-tinted dark */
                                    color: #fff !important;
                                    border: 1px solid #181a20 !important;
                                }
                                .embedBuilder .form-input:focus,
                                .embedBuilder textarea.form-input:focus {
                                    background: #263043 !important; /* slightly lighter blue tint on focus */
                                    border-color: var(--primary) !important;
                                    color: #fff !important;
                                }
                                .embedBuilder .toggle-switch input[type="checkbox"] + .toggle-slider {
                                    background: #232b3a !important;
                                    border: 1px solid #181a20 !important;
                                }
                                .embedBuilder .toggle-switch input[type="checkbox"] + .toggle-slider {
                                    background: #23272e !important;
                                    border: 1px solid #181a20 !important;
                                }
                                .embedBuilder .toggle-switch input[type="checkbox"]:checked + .toggle-slider {
                                    background: var(--primary) !important;
                                }
                        /* Tools Sidebar */
                        .tools-layout {
                            display: flex;
                            min-height: 80vh;
                            background: var(--bg-card);
                            border-radius: var(--radius);
                            box-shadow: 0 4px 24px 0 rgba(0,0,0,0.12);
                            margin-top: 2.5rem;
                        }
                        .tools-sidebar {
                            width: 220px;
                            background: var(--bg-secondary);
                            border-right: 1px solid var(--border);
                            border-radius: var(--radius) 0 0 var(--radius);
                            display: flex;
                            flex-direction: column;
                            padding: 1.5rem 0.5rem 1.5rem 1.5rem;
                            gap: 0.5rem;
                        }
                        .tools-sidebar .tool-nav {
                            display: flex;
                            flex-direction: column;
                            gap: 0.5rem;
                        }
                        .tools-sidebar .tool-link {
                            background: none;
                            border: none;
                            color: var(--text-muted);
                            font-size: 1.05rem;
                            font-weight: 500;
                            text-align: left;
                            padding: 0.7rem 1rem;
                            border-radius: var(--radius);
                            cursor: pointer;
                            transition: background 0.18s, color 0.18s;
                        }
                        .tools-sidebar .tool-link.active, .tools-sidebar .tool-link:hover {
                            background: var(--bg-input);
                            color: var(--primary);
                        }
                        .tools-content {
                            flex: 1;
                            padding: 2.5rem 2.5rem 2.5rem 2rem;
                            min-width: 0;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            align-items: flex-start;
                            position: relative;
                            overflow: hidden;
                        }
                        .tool-section-page {
                            width: 100%;
                            max-width: 700px;
                            margin: 0 auto;
                            background: none;
                            border: none;
                            box-shadow: none;
                            animation: fadeIn 0.35s cubic-bezier(.4,0,.2,1);
                        }
                        @keyframes fadeIn {
                            from { opacity: 0; transform: translateY(20px); }
                            to { opacity: 1; transform: none; }
                        }
                textarea.form-input {
                    appearance: none !important;
                    -webkit-appearance: none !important;
                    -moz-appearance: none !important;
                    background-image: none !important;
                    resize: none !important;
                    overflow-y: hidden !important;
                    min-height: 2.5em;
                    max-height: 300px;
                    transition: height 0.15s;
                    box-sizing: border-box;
                }
        /* Remove all native calendar icons/triangles from date input */
        input[type="date"]::-webkit-calendar-picker-indicator {
            opacity: 0 !important;
            display: none !important;
        }
        input[type="date"]::-ms-expand {
            display: none !important;
        }
        input[type="date"]::-moz-focus-inner { border: 0 !important; }
        input[type="date"]::-webkit-inner-spin-button,
        input[type="date"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
            display: none !important;
        }
        input[type="date"] {
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: textfield !important;
            background: var(--bg-input);
            color: var(--text);
            position: relative;
        }
        /* Prevent scroll on number/text inputs */
        input[type="number"], input[type="text"] {
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            background-image: none !important;
        }
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        :root {
                                    /* Advanced timezone dropdown improvements */
                                    #htAdvTz {
                                        transition: opacity 0.25s cubic-bezier(.4,0,.2,1), max-height 0.25s cubic-bezier(.4,0,.2,1);
                                        opacity: 0 !important;
                                        max-height: 0 !important;
                                        overflow: hidden !important;
                                        pointer-events: none !important;
                                    }
                                    #htAdvTz.show {
                                        opacity: 1 !important;
                                        max-height: 600px !important;
                                        pointer-events: auto !important;
                                    }
                                    /* Smooth dropdowns for all selects */
                                    select.form-input, select.form-select {
                                        background: var(--bg-input);
                                        color: var(--text);
                                        border: 1px solid var(--border);
                                        border-radius: var(--radius);
                                        font-size: 0.95rem;
                                        transition: background 0.2s, box-shadow 0.2s;
                                        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08);
                                    }
                                    select.form-input:focus, select.form-select:focus {
                                        background: var(--bg-input);
                                        border-color: var(--primary);
                                        outline: none;
                                    }
                                    select.form-input option, select.form-select option {
                                        background: var(--bg-input);
                                        color: var(--text);
                                    }
        /* Remove duplicate/contradictory date input rules above */
                                    #htTzAll {
                                        background: var(--bg-input);
                                        color: var(--text);
                                        border: 1px solid var(--border);
                                        border-radius: var(--radius);
                                        font-size: 0.95rem;
                                        transition: background 0.2s;
                                    }
                                    #htTzAll option {
                                        background: var(--bg-input);
                                        color: var(--text);
                                        padding-left: 0.5em;
                                    }
                                    #htTzAll option.selected {
                                        background: var(--primary);
                                        color: #fff;
                                    }
                                    #htTzAll option .tz-check {
                                        color: var(--success);
                                        margin-right: 0.5em;
                                    }
                            /* Hide time input dropdown arrow/triangle in all browsers */
                            input[type="time"]::-webkit-calendar-picker-indicator,
                            input[type="time"]::-webkit-inner-spin-button,
                            input[type="time"]::-webkit-clear-button {
                                display: none !important;
                                -webkit-appearance: none;
                            }
                            input[type="time"]::-ms-expand {
                                display: none;
                            }
                            input[type="time"]::-moz-focus-inner { border: 0; }
                            input[type="time"] {
                                background: var(--bg-input);
                            }
                    /* Hide time input dropdown arrow (Chrome, Edge, Safari) */
                    input[type="time"]::-webkit-calendar-picker-indicator {
                        opacity: 0;
                        display: none;
                    }
                    /* Hide time input dropdown arrow (Firefox) */
                    input[type="time"]::-moz-focus-inner { border: 0; }
                    input[type="time"]::-ms-clear { display: none; }
            --bg: #1a1a2e;
            --bg-secondary: #16213e;
            --bg-card: #1f2940;
            --bg-input: #2a3550;
            --text: #e0e0e0;
            --text-muted: #8892a4;
            --primary: #e74c3c;
            --primary-hover: #c0392b;
            --success: #2ecc71;
            --danger: #e74c3c;
            --warning: #f39c12;
            --border: #2d3748;
            --sidebar-w: 260px;
            --header-h: 60px;
            --radius: 8px;
            --transition: 0.25s ease;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
        a { color: var(--primary); text-decoration: none; }
        a:hover { text-decoration: underline; }

        /* ── Header ── */
        .header {
            position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
            background: var(--bg-secondary); border-bottom: 1px solid var(--border);
            display: flex; align-items: center; padding: 0 1.5rem; z-index: 100;
            transition: transform 0.3s cubic-bezier(.4,0,.2,1);
        }
        .header.hide {
            transform: translateY(-100%);
        }
        .header-logo { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 700; color: var(--text); cursor: pointer; }
        .header-logo img { width: 36px; height: 36px; border-radius: 50%; }
        .header-nav { display: flex; gap: 1rem; margin-left: 2rem; }
        .header-nav a { color: var(--text-muted); font-weight: 500; padding: 0.5rem; border-radius: var(--radius); transition: var(--transition); }
        .header-nav a:hover, .header-nav a.active { color: var(--text); background: var(--bg-card); text-decoration: none; }
        .header-right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
        .btn { padding: 0.5rem 1rem; border: none; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: var(--transition); }
        .btn-primary { background: var(--primary); color: #fff; }
        .btn-primary:hover { background: var(--primary-hover); }
        .btn-secondary { background: var(--bg-input); color: var(--text); }
        .btn-secondary:hover { background: var(--border); }
        .btn-success { background: var(--success); color: #fff; }
        .btn-danger { background: var(--danger); color: #fff; }
        .avatar { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2px solid var(--border); }

        /* ── Layout ── */
        .app { margin-top: var(--header-h); display: flex; min-height: calc(100vh - var(--header-h)); }
        .sidebar {
            width: var(--sidebar-w); background: var(--bg-secondary); border-right: 1px solid var(--border);
            padding: 1rem 0; position: fixed; top: var(--header-h); bottom: 0; overflow-y: auto;
        }
        .sidebar-section { padding: 0.75rem 1rem 0.25rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
        .sidebar a {
            display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; margin: 1px 0.5rem;
            color: var(--text-muted); border-radius: var(--radius); transition: var(--transition); font-size: 0.9rem;
        }
        .sidebar a:hover { color: var(--text); background: var(--bg-card); text-decoration: none; }
        .sidebar a.active { color: var(--text); background: var(--bg-card); font-weight: 600; }
        .sidebar .guild-name { padding: 0.75rem 1rem; font-weight: 700; font-size: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; }
        .main { margin-left: var(--sidebar-w); flex: 1; padding: 2rem; max-width: 900px; padding-top: calc(var(--header-h) + 1.5rem); }

        /* ── Cards ── */
        .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
        .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
        .card-title { font-size: 1.1rem; font-weight: 700; }
        .card-desc { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem; }

        /* ── Form Controls ── */
        .form-group { margin-bottom: 1rem; }
        .form-label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-muted); }
        .form-input, .form-select {
            width: 100%; padding: 0.5rem 0.75rem; background: var(--bg-input); border: 1px solid var(--border);
            border-radius: var(--radius); color: var(--text); font-size: 0.9rem; transition: var(--transition);
            appearance: none; -webkit-appearance: none; -moz-appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg fill="%238892a4" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 1.25em;
        }
        .form-input:focus, .form-select:focus { outline: none; border-color: var(--primary); }
        .form-input::placeholder { color: var(--text-muted); }
        /* Custom dropdown arrow for select */
        select.form-input::-ms-expand { display: none; }

        /* ── Toggle Switch ── */
        .toggle { display: flex; align-items: center; gap: 0.75rem; }
        .toggle-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .toggle-slider {
            position: absolute; inset: 0; background: var(--bg-input); border-radius: 24px; cursor: pointer; transition: var(--transition);
        }
        .toggle-slider::before {
            content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px;
            background: #fff; border-radius: 50%; transition: var(--transition);
        }
        .toggle-switch input:checked + .toggle-slider { background: var(--success); }
        .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
        .toggle-label { font-size: 0.9rem; }

        /* ── Command List ── */
        .cmd-list { display: grid; gap: 0.5rem; }
        .cmd-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: var(--bg-input); border-radius: var(--radius); }
        .cmd-name { font-family: monospace; font-size: 0.9rem; }

        /* ── Guild Picker ── */
        .guild-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; padding: 2rem; max-width: 1000px; margin: 0 auto; }
        .guild-card {
            background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
            padding: 1.25rem; text-align: center; cursor: pointer; transition: var(--transition);
        }
        .guild-card:hover { border-color: var(--primary); transform: translateY(-2px); }
        .guild-card img { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 0.5rem; }
        .guild-card .guild-label { font-weight: 600; margin-bottom: 0.25rem; }
        .guild-card .guild-status { font-size: 0.75rem; color: var(--text-muted); }
        .guild-card.has-bot .guild-status { color: var(--success); }

        /* ── Home Page ── */
        .home-hero { text-align: center; padding: 7rem 2rem 3rem; }
        .home-hero h1 { font-size: 3rem; margin-bottom: 0.5rem; }
        .home-hero p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2rem; }
        .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; max-width: 1000px; margin: 0 auto; padding: 0 2rem 3rem; }
        .feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
        .feature-card h3 { margin-bottom: 0.5rem; }
        .feature-card p { color: var(--text-muted); font-size: 0.9rem; }

        /* ── Tools ── */
        .tool-section { margin-bottom: 2rem; }
        .timestamp-output { font-family: monospace; background: var(--bg-input); padding: 0.5rem; border-radius: var(--radius); margin-top: 0.5rem; cursor: pointer; user-select: all; }
        .embed-preview {
            border-left: 4px solid var(--primary); background: var(--bg-input); border-radius: 0 var(--radius) var(--radius) 0;
            padding: 1rem; margin-top: 1rem;
        }

        /* ── Toast ── */
        .toast {
            position: fixed; bottom: 1.5rem; right: 1.5rem; background: var(--success); color: #fff;
            padding: 0.75rem 1.25rem; border-radius: var(--radius); font-weight: 600; z-index: 200;
            transform: translateY(100px); opacity: 0; transition: all 0.3s ease;
        }
        .toast.show { transform: translateY(0); opacity: 1; }
        .toast.error { background: var(--danger); }

        /* ── Responsive ── */
        .no-sidebar .sidebar { display: none; }
        .no-sidebar .main { margin-left: 0; max-width: 100%; padding-top: calc(var(--header-h) + 1.5rem); }

        /* ── Scrollbar ── */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }