body {
            transition: background-color 0.3s ease, color 0.3s ease;
            -webkit-tap-highlight-color: transparent;
        }

        /* Neumorphism Utilities */
        .neu-flat {
            border-radius: 20px;
            background: #e0e5ec;
            box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5);
            border: 1px solid rgba(255,255,255,0.2);
        }
        
        .neu-pressed {
            border-radius: 20px;
            background: #e0e5ec;
            box-shadow: inset 6px 6px 10px 0 rgba(163,177,198, 0.7), inset -6px -6px 10px 0 rgba(255,255,255, 0.8);
            border: 1px solid rgba(255,255,255,0.0);
        }

        /* Dark Mode Neumorphism */
        .dark .neu-flat {
            background: #212529;
            box-shadow: 8px 8px 16px #16191c, -8px -8px 16px #2c3136;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .dark .neu-pressed {
            background: #212529;
            box-shadow: inset 8px 8px 16px #16191c, inset -8px -8px 16px #2c3136;
            border: none;
        }

        /* Animations */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeDown {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes floatPoints {
            0% { opacity: 0; transform: translateY(0) scale(0.5); }
            50% { opacity: 1; transform: translateY(-20px) scale(1.2); }
            100% { opacity: 0; transform: translateY(-40px) scale(1); }
        }

        .animate-fade-up { animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .animate-fade-down { animation: fadeDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .animate-float-points { animation: floatPoints 1s ease-out forwards; }

        /* Custom Scrollbar */
        .snap-x::-webkit-scrollbar { display: none; }
        .snap-x { -ms-overflow-style: none; scrollbar-width: none; }
        
        /* Modal Scrollbar - UPDATED: BLACK THUMB FOR LIGHT MODE */
        .thin-scroll::-webkit-scrollbar { width: 5px; } /* Sedikit diperlebar agar makin jelas */
        .thin-scroll::-webkit-scrollbar-track { background: transparent; }
        
        /* Light Mode: Hitam Pekat agar kontras */
        .thin-scroll::-webkit-scrollbar-thumb { background: #000000; border-radius: 4px; } 
        
        /* Dark Mode: Tetap abu-abu */
        .dark .thin-scroll::-webkit-scrollbar-thumb { background: #475569; }

        /* Input Reset */
        input:focus { outline: none; }
        
        /* Video Controls Customization */
        video::-webkit-media-controls-fullscreen-button {
            display: inline-block;
        }

        /* Modal Backdrop */
        .modal-backdrop {
            background-color: rgba(0,0,0,0.6); /* Slightly darker backdrop */
            backdrop-filter: blur(5px);
        }