:root {
        --background-body: linear-gradient(
            135deg, 
                rgba(30, 58, 138, 0.2) 0%,   
                rgba(88, 28, 135, 0.2) 50%,  
                rgba(19, 78, 74, 0.2) 100%   
            );
            /* --background-body: linear-gradient(
            135deg, 
                rgba(68, 209, 13, 0.767) 0%,   
                rgba(212, 34, 87, 0.685) 50%,  
                rgba(25, 223, 209, 0.63) 100%   
            ); */

        --gradient-text: linear-gradient(to right, #60a5fa, #a78bfa, #2dd4bf);
        --default-text: rgb(209, 209, 209);
        --default-button: linear-gradient(to right, #3b82f6, #14b8a6);
        --default-button-hover: linear-gradient(to right, #2563eb, #0f766e);
        --bg-cards: rgba(31, 41, 55, 0.4);
        --text-mini-description: rgb(156, 163, 175, 1);
        --bg-email-section: rgba(191, 219, 254, 0.05);
        --bg-email-form: rgba(255, 255, 255, 0.05);
        --product-text: #6366f1;
        --product-text-gradient-line: linear-gradient(to right, #6366f1, transparent);
        --result-text: #07ae07;
        --task-gradient-text: linear-gradient(to right, #6366f1, #c084fc, #3b82f6);
        }
    
    
    

    .background-body {
        margin: 0;
        /* min-height: 100vh; */
        /* Ставим черный фон основой, так как в оригинале градиент полупрозрачный */
        background-color: #000; 
        
       
        background-image: var(--background-body);
        
        background-attachment: fixed;

            
    }



        /* Добавим кастомную анимацию вращения, которой нет в стандартном Tailwind */
        @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .animate-spin-slow {
            animation: spin-slow 20s linear infinite;
        }
        .animate-spin-medium {
            animation: spin-slow 8s linear infinite;
        }


        /* Кастомная анимация покачивания (плавный bounce) */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        .animate-float {
            animation: float 3s ease-in-out infinite;
        }


        /* Плавное появление карточек при загрузке */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .reveal-card {
            animation: fadeInUp 0.6s ease-out forwards;
        }



        .gradient-text {
            background: var(--gradient-text);
            /* background: linear-gradient(to right, #53f133, #210672, #e0a80b); */
            /* 2. Обрезка фона по тексту (нужен префикс -webkit- для Chrome/Safari) */
            -webkit-background-clip: text;
            background-clip: text;
            
            /* 3. Делаем сам текст прозрачным, чтобы видеть фон */
            color: transparent; 
        }

        .default-text {
            color: var(--default-text);
            font-weight: 500; 
            /* color: rgb(31, 31, 31); */
        }


        .default-button {
            background: var(--default-button);
            /* background: linear-gradient(to right, #19f763, #e9ec10); */
            color: white;
            padding: 16px 32px;
            min-width: 100px;
            border-radius: 16px;
            font-size: 18px;
            font-weight: 600;
            box-shadow: 0 10px 15px -3px rgb(59 130 246 / 0.25);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            border: none;
            cursor: pointer;
        }

        .default-button:hover {
            background: var(--default-button-hover);
            box-shadow: 0 15px 25px -5px rgb(59 130 246 / 0.35);
            transform: translateY(-2px);
            /* background: rgb(0, 255, 21); */
        }

        .bg-cards {
            background-color: var(--bg-cards);
            /* background-color: rgba(23, 24, 24, 0.4); */
        }

        .text-mini-description {
            color: var(--text-mini-description);
            /* color: rgb(71, 71, 71); */
            
        }

        .background-email-section {
            background-color: var(--bg-email-section);
            /* background-color: yellow; */
        }

        .background-email-form {
            /* background-color: red; */
            background-color: var(--bg-email-form);   
        }

        .product-text {
           color: var(--product-text);
        }

        .product-text-gradient-line {
            background: var(--product-text-gradient-line);
        }

        .result-text {
            color: var(--result-text);
        }




        /* 03 ЗАДАЧА */
        .task-gradient-text {
            /* Цвета из палитры Tailwind (Indigo 500 -> Purple 400 -> Blue 500) */
            background-image: var(--task-gradient-text);
            
            /* Делаем текст прозрачным, чтобы проявить фон под ним */
            color: transparent;
            
            /* Обрезаем фон по контуру текста */
            -webkit-background-clip: text; /* Для Safari и Chrome */
            background-clip: text;
            
            /* Убираем возможные конфликты */
            display: inline-block; 
        }

                @keyframes text-gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .animate-task-text-gradient {
            background-size: 200% auto;
            animation: text-gradient 4s linear infinite;
        }







/* МОДАЛЬНОЕ ОКНО */

/* Анимация появления */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Затемнение фона */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease-out;
}

/* Само окно */
.modal-content {
    background: var(--bg-cards, rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2.5rem;
    border-radius: 2rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* МОДАЛЬНОЕ ОКНО КОНЕЦ */

















/* СТИЛИ ДЛЯ КОНСТРУКТОРА */
 

        .controls {
            background: white;
            padding: 25px;
            border-radius: 30px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.38);
            max-width: 600px;
            margin-bottom: 20px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 40px;
            width: calc(100% - 70px);
        }
        label {  
            display: block;
            margin-bottom: 5px;
            margin-top: 5px;
            padding-top: 6px;
            padding-top: 0px;
        }

            label1 {
                display: block;
                margin-bottom: 15px;
                font-weight: bold;
                font-size: 20px;
                margin-top: 10px;
            }
        
        /* Стили для jscolor */
        .color-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 16px;
            margin-bottom: 20px;
            box-sizing: border-box;
        }

        .add-btn {
        padding: 10px 15px;
        background: #6e6be9;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        box-sizing: border-box;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

        .add-btn:hover { 
            
            filter: brightness(1.08);
        }

        textarea.color-input { resize: vertical; font-family: Arial; font-size: 15px; }



    .button-row {
        display: flex;
        gap: 5px;
        margin-bottom: 8px;
        align-items: center;
    }
    .remove-field-btn {
        background: #ff4d4d;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        padding: 5px 10px;
        font-weight: bold;
    }



        /* Базовый стиль кнопки удаления */
    .delete-faq-btn {
        position: absolute;
        right: 5px;
        top: 5px;
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: all 0.2s ease;
        border-radius: 50px;
        padding-top: 1px;
        padding-right: 5px;
        padding-bottom: 3px;
    }

    /* Эффект при наведении */
    .delete-faq-btn:hover {
        background-color: rgba(0, 0, 0, 0.07);
        color: #bf0a0a;
    }



    .toast {
        visibility: hidden;
        min-width: 250px;
        background-color: #28a745; /* Зеленый цвет успеха */
        color: #fff;
        text-align: center;
        border-radius: 8px;
        padding: 16px;
        position: fixed;
        z-index: 1000;
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        font-size: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    /* Анимация появления */
    .toast.show {
        visibility: visible;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    @keyframes fadein {
        from {bottom: 0; opacity: 0;}
        to {bottom: 30px; opacity: 1;}
    }

    @keyframes fadeout {
        from {bottom: 30px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
    }

    /* .text-white {
        color: black !important;
    } */