@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .scrollbar-hide {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .transition-height {
        transition: max-height 0.3s ease-in-out;
    }
    .file-item-hover {
        @apply hover:bg-gray-100 dark:hover:bg-dark-100 transition-all duration-200;
    }
    .btn-primary {
        @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all duration-200 shadow-md hover:shadow-lg;
    }
    .btn-secondary {
        @apply bg-white dark:bg-dark-200 text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-dark-100 px-4 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-dark-100 transition-all duration-200;
    }
    .page {
        @apply transition-all duration-300 ease-in-out transform;
        opacity: 0;
        transform: translateY(20px);
    }
    
    .page.active {
        @apply opacity-100 translate-y-0;
    }
    
    /* 模态框动画 */
    .modal-enter {
        @apply opacity-0 scale-95;
    }
    
    .modal-enter-active {
        @apply opacity-100 scale-100 transition-all duration-300 ease-out;
    }
    
    .modal-exit {
        @apply opacity-100 scale-100;
    }
    
    .modal-exit-active {
        @apply opacity-0 scale-95 transition-all duration-300 ease-in;
    }
    
    /* 侧边栏动画 */
    .sidebar-enter {
        @apply -translate-x-full;
    }
    
    .sidebar-enter-active {
        @apply translate-x-0 transition-transform duration-300 ease-out;
    }
    
    .sidebar-exit {
        @apply translate-x-0;
    }
    
    .sidebar-exit-active {
        @apply -translate-x-full transition-transform duration-300 ease-in;
    }
}