/* 收藏和点赞按钮样式 */
.article-actions{display:flex;gap:20px;margin-top:25px;justify-content:center; padding-bottom: 10px;}
.action-btn{width:140px;height:45px;line-height:45px; background: #fff; display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #e0e0e0;border-radius:25px;font-size:16px;color:#666;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;outline:none;}
.action-btn:hover{background-color:#fff;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.1);}
.action-btn:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,0.1);}
.favorite-icon{display:inline-block;width:20px;height:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z'%3E%3C/path%3E%3C/svg%3E");transition:all 0.3s ease;}
.like-icon{display:inline-block;width:20px;height:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 9h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5'%3E%3C/path%3E%3C/svg%3E");transition:all 0.3s ease;}
.action-btn .btn-text{font-weight:500;}
.action-btn .like-count{font-size:13px;color:#999;margin-left:2px;transition:all 0.3s ease;}
.favorite-btn.liked{background-color:#fff0f0;border-color:#e60013;color:#e60013;}
.favorite-btn.liked .favorite-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e60013' viewBox='0 0 24 24' stroke='%23e60013'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z'%3E%3C/path%3E%3C/svg%3E");}
.favorite-btn:active .favorite-icon{animation:heartBeat 0.6s ease-in-out;}
@keyframes heartBeat{0%{transform:scale(1);}
25%{transform:scale(1.3);}
50%{transform:scale(1);}
75%{transform:scale(1.3);}
100%{transform:scale(1);}
}
.like-btn.liked{background-color:#fff0f0;border-color:#e60013;color:#e60013;}
.like-btn.liked .like-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e60013' viewBox='0 0 24 24' stroke='%23e60013'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 9h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5'%3E%3C/path%3E%3C/svg%3E");}
.like-btn.liked .like-count{color:#e60013;}
.like-btn:active .like-icon{animation:thumbUp 0.6s ease-in-out;}
@keyframes thumbUp{0%{transform:scale(1) rotate(0deg);}
50%{transform:scale(1.2) rotate(-10deg);}
100%{transform:scale(1) rotate(0deg);}
}
.action-btn:hover .favorite-icon{transform:scale(1.1);}
.action-btn:hover .like-icon{transform:scale(1.1);}
.action-btn.liked:hover{background-color:#ffebeb;box-shadow:0 4px 8px rgba(230,0,18,0.15);}
@keyframes likeCountAnimation{0%{transform:scale(1);}
50%{transform:scale(1.3);}
100%{transform:scale(1);}
}
.animate-like-count{animation:likeCountAnimation 0.6s ease-in-out;color:#e60013;font-weight:bold;}
@keyframes numberChange{0%{transform:translateY(0) scale(1);opacity:1;}
50%{transform:translateY(-5px) scale(1.2);}
100%{transform:translateY(0) scale(1);opacity:1;}
}
.animate-number-change{animation:numberChange 0.6s ease-in-out;color:#e60013;font-weight:bold;}
@keyframes floatUp{0%{transform:translateY(0) scale(0.5);opacity:1;}
100%{transform:translateY(-50px) scale(1);opacity:0;}
}
.floating-heart{position:absolute;pointer-events:none;z-index:1000;animation:floatUp 1s ease-out forwards;}
.floating-heart svg{width:20px;height:20px;filter:drop-shadow(0 0 3px rgba(230,0,18,0.5));}
@keyframes floatUpThumb{0%{transform:translateY(0) scale(0.5) rotate(0deg);opacity:1;}
100%{transform:translateY(-50px) scale(1) rotate(-10deg);opacity:0;}
}
.floating-thumb{position:absolute;pointer-events:none;z-index:1000;animation:floatUpThumb 1s ease-out forwards;}
.floating-thumb svg{width:20px;height:20px;filter:drop-shadow(0 0 3px rgba(230,0,18,0.5));}