@layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .image-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
                gap: 1rem;
            }
            .fade-in {
                animation: fadeIn 0.3s ease-in-out;
            }
            .scale-hover {
                transition: transform 0.2s ease-in-out;
            }
            .scale-hover:hover {
                transform: scale(1.03);
            }
            .loader {
                border-top-color: #3B82F6;
                animation: spinner 0.6s linear infinite;
            }
            .filter-active {
                background-color: rgba(59, 130, 246, 0.1); color: #3B82F6; border-color: #3B82F6;
            }
            .key-hint {
                display: inline-block; padding-left: 0.375rem; padding-right: 0.375rem; padding-top: 0.125rem; padding-bottom: 0.125rem; font-size: 0.75rem; background-color: #f3f4f6; color: #4b5563; border-radius: 0.25rem; margin-left: 0.375rem;
            }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes spinner {
            to { transform: rotate(360deg); }
        }