@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .hover-cell {
        @apply transition-all duration-200 hover:bg-primary/5;
    }
    .input-focus {
        @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
    }
    .auto-save-indicator {
        @apply h-2 w-2 rounded-full inline-block mr-1.5;
    }
    .card-transition {
        @apply transition-all duration-300 hover:shadow-card-hover hover:-translate-y-1;
    }
    .table-header-gradient {
        background: linear-gradient(90deg, rgba(22, 93, 255, 0.03) 0%, rgba(22, 93, 255, 0) 100%);
    }
    .login-input {
        @apply w-full px-4 py-3 border border-gray-300 rounded-lg input-focus bg-white transition-all shadow-sm hover:shadow;
    }
    .btn-primary {
        @apply w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all flex items-center justify-center font-medium shadow-sm hover:shadow;
    }
    .btn-danger {
        @apply px-3 py-1.5 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-all flex items-center justify-center text-sm shadow-sm hover:shadow;
    }
    .btn-import {
        @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all flex items-center shadow-sm hover:shadow;
    }
}

/* 动画效果 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}