@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #fff7ed;
        }
        
        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .rotate-180 {
            transform: rotate(180deg);
            transition: transform 0.3s ease;
        }
        
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #ffedd5;
            border-radius: 10px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #f97316;
            border-radius: 10px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #ea580c;
        }
        
        #advancedOptions {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease;
            opacity: 0;
        }
        
        #advancedOptions.show {
            max-height: 500px;
            opacity: 1;
        }
        
        .input-field {
            transition: all 0.3s ease;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            background-color: #1e293b;
        }
        
        .input-field:focus {
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3);
            border-color: #f97316;
        }
        
        .btn-primary {
            background-image: linear-gradient(to right, #f97316, #ea580c);
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.2), 0 2px 4px -1px rgba(249, 115, 22, 0.1);
        }
        
        .btn-primary:hover {
            background-image: linear-gradient(to right, #ea580c, #c2410c);
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.3), 0 4px 6px -2px rgba(249, 115, 22, 0.2);
        }
        
        .btn-primary:active {
            transform: translateY(0);
        }
        
        .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #fed7aa;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(249, 115, 22, 0.1), 0 10px 10px -5px rgba(249, 115, 22, 0.04);
        }
        
        .glow {
            animation: glow 1.5s infinite alternate;
        }
        
        @keyframes glow {
            from {
                box-shadow: 0 0 5px -5px #f97316;
            }
            to {
                box-shadow: 0 0 20px -5px #f97316;
            }
        }
        
        .glass-header {
            background: rgba(249, 115, 22, 0.15);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        .info-box {
            background: rgba(249, 115, 22, 0.08);
            border-left: 3px solid #f97316;
        }
        
        .text-primary {
            color: #7c2d12;
        }
        
        /* Mobile-specific adjustments */
        @media (max-width: 640px) {
            .container {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            
            .glass-header {
                padding: 1.25rem;
            }
            
            .info-box {
                padding: 0.75rem;
                font-size: 0.875rem;
            }
            
            textarea, input, select {
                font-size: 0.875rem;
                padding: 0.75rem;
            }
            
            button {
                font-size: 0.875rem;
                padding: 0.75rem;
            }
            
            #outputResult {
                font-size: 0.75rem;
                line-height: 1.4;
            }
            
            .text-3xl {
                font-size: 1.5rem;
            }
            
            .grid-cols-1 {
                grid-template-columns: 1fr;
            }
        }
        
        /* Tablet adjustments */
        @media (min-width: 641px) and (max-width: 1024px) {
            .container {
                max-width: 90%;
            }
        }
        
        /* Prevent zoom on input focus for mobile */
        @media screen and (max-width: 480px) {
            input, textarea, select {
                font-size: 16px !important;
            }
        }
.fancy-button {
    padding: 10px 20px;
    background: linear-gradient(180deg, #FF4500, #FFA500);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s ease-in-out, box-shadow 0.3s ease, background 0.3s ease;
}

/* Hover effect - scale up, shadow and background color change */
.fancy-button:hover {
    transform: scale(1.1); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background: linear-gradient(180deg, #FF6347, #FF7F50); /* Change hover gradient */
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}
#toggleAdvanced {
        background-color: #fbe8a6; /* Kuning lembut untuk latar belakang */
        border-color: #f5c26b; /* Warna oranye pastel untuk garis tepi */
        color: #5a5a5a; /* Abu-abu gelap untuk teks */
        transition: all 0.3s ease; /* Transisi halus */
    }

    #toggleAdvanced:hover {
        background-color: #f5c26b; /* Oranye pastel saat hover */
        border-color: #e4a054; /* Oranye yang sedikit lebih gelap untuk garis tepi hover */
        color: #ffffff; /* Teks putih agar kontras */
    }

    #toggleIcon {
        color: #d27b3e; /* Warna oranye lembut untuk ikon */
    }