/* Delicate macOS Style Scrollbars */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 999px;
            border: 1px solid transparent;
            background-clip: padding-box;
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: rgba(255, 255, 255, 0.25);
        }
        .dark ::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.12);
        }
        .dark ::-webkit-scrollbar-thumb:hover {
            background-color: rgba(255, 255, 255, 0.28);
        }

        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        body { 
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        body.dark {
            background: var(--body-bg, radial-gradient(ellipse at top, #141123 0%, #09080d 60%, #020203 100%)) !important;
            background-attachment: fixed !important;
            color: #f3f4f6;
        }

        /* Apple Vision Pro style premium glassmorphism blur-card */
        .blur-card { 
            backdrop-filter: blur(24px) saturate(190%) !important; 
            -webkit-backdrop-filter: blur(24px) saturate(190%) !important; 
            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5), 
                        inset 0 1px 0 rgba(255, 255, 255, 0.08),
                        inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        .blur-card:hover {
            border-color: rgba(139, 92, 246, 0.18) !important;
            box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.65), 
                        inset 0 1px 0 rgba(255, 255, 255, 0.12),
                        inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
        }

        /* Navigation active pills */
        .nav-pill-active {
            background-image: linear-gradient(135deg, #4f46e5, #8b5cf6, #ec4899) !important;
            color: #ffffff !important;
            border-color: transparent !important;
            box-shadow: 0 6px 20px -3px rgba(139, 92, 246, 0.45),
                        inset 0 1px 0 rgba(255, 255, 255, 0.2);
            transform: scale(1.02);
        }

        /* Tactile button, option and select feedback (Elastic Spring Transition) */
        button, select, input, textarea, .ratio-btn-img, .ratio-btn-vid, .quality-btn, .dur-btn {
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        /* Springy hover states */
        button:not(:disabled):hover,
        .ratio-btn-img:not(:disabled):hover,
        .ratio-btn-vid:not(:disabled):hover,
        .quality-btn:not(:disabled):hover,
        .dur-btn:not(:disabled):hover {
            transform: translateY(-1px) scale(1.02);
            box-shadow: 0 6px 20px rgba(139, 92, 246, 0.12);
            filter: brightness(1.06);
        }

        /* Tactile compression feedback */
        button:not(:disabled):active,
        .ratio-btn-img:not(:disabled):active,
        .ratio-btn-vid:not(:disabled):active,
        .quality-btn:not(:disabled):active,
        .dur-btn:not(:disabled):active {
            transform: translateY(0.5px) scale(0.96) !important;
            filter: brightness(0.92) contrast(1.04);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        /* High-fidelity glowing action buttons */
        #generate-img-btn, #generate-vid-btn, #btn-checkin-action {
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 25px -5px rgba(139, 92, 246, 0.4), 
                        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        #generate-img-btn:hover, #generate-vid-btn:hover, #btn-checkin-action:hover {
            transform: translateY(-1.5px) scale(1.02);
            box-shadow: 0 12px 32px -4px rgba(139, 92, 246, 0.55), 
                        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
            filter: brightness(1.12);
        }
        #generate-img-btn:active, #generate-vid-btn:active, #btn-checkin-action:active {
            transform: translateY(0.5px) scale(0.97) !important;
            box-shadow: 0 4px 12px -2px rgba(139, 92, 246, 0.3), 
                        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
            filter: brightness(0.94);
        }

        /* Premium Input Border Focus & Highlight Glows */
        input:focus, textarea:focus, select:focus {
            border-color: var(--apple-blue, #8b5cf6) !important;
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2), 
                        inset 0 1.5px 2px rgba(0, 0, 0, 0.2) !important;
        }

        /* Navbar active pill animation correction */
        nav.blur-card {
            box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in { animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

        @keyframes slowSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .animate-slow-spin { animation: slowSpin 10s linear infinite; }