/* 圆润图标样式增强 */

/* 为所有图标添加圆润效果 */
.modern-action-btn i,
.modern-meta-item i,
.stat-footer i,
.user-stats-grid i,
.stat-icon i,
.stat-icon .icon {
    border-radius: 50%;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 14px;
}

/* 文章列表图标样式已移至style.css，采用参考设计的简洁风格 */

/* 点赞按钮特殊样式 */
.like-btn i {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.like-btn.active i,
.like-btn:hover i {
    background: linear-gradient(135deg, #ff4757, #ff6b6b);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

/* 收藏按钮特殊样式 */
.favorite-btn i {
    background: linear-gradient(135deg, #ffa502, #ffb142);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 165, 2, 0.3);
}

.favorite-btn.active i,
.favorite-btn:hover i {
    background: linear-gradient(135deg, #ff9500, #ffa502);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 165, 2, 0.4);
}

/* 分享按钮特殊样式 */
.share-btn i {
    background: linear-gradient(135deg, #3742fa, #5352ed);
    color: white;
    box-shadow: 0 4px 15px rgba(55, 66, 250, 0.3);
}

.share-btn:hover i {
    background: linear-gradient(135deg, #2f3542, #3742fa);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(55, 66, 250, 0.4);
}

/* 评论按钮特殊样式 */
.comment-toggle i {
    background: linear-gradient(135deg, #1dd1a1, #55efc4);
    color: white;
    box-shadow: 0 4px 15px rgba(29, 209, 161, 0.3);
}

.comment-toggle:hover i {
    background: linear-gradient(135deg, #10ac84, #1dd1a1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(29, 209, 161, 0.4);
}

/* 用户头像图标 */
.user-profile-trigger i {
    background: linear-gradient(135deg, #a55eea, #c44569);
    color: white;
    box-shadow: 0 4px 15px rgba(165, 94, 234, 0.3);
}

.user-profile-trigger:hover i {
    background: linear-gradient(135deg, #8854d0, #a55eea);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(165, 94, 234, 0.4);
}

/* 日期图标 */
.modern-meta-item i.far.fa-calendar-alt {
    background: linear-gradient(135deg, #26de81, #20bf6b);
    color: white;
    box-shadow: 0 4px 15px rgba(38, 222, 129, 0.3);
}

/* 查看数图标 */
.modern-meta-item i.far.fa-eye,
.meta-item.views i {
    background: linear-gradient(135deg, #fd79a8, #e84393);
    color: white;
    box-shadow: 0 4px 15px rgba(253, 121, 168, 0.3);
}

/* 文章列表点赞图标 */
.meta-item.likes i {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.meta-item.likes:hover i {
    background: linear-gradient(135deg, #ff4757, #ff6b6b);
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(255, 107, 107, 0.4);
}

/* 文章列表评论图标 */
.meta-item.comments i {
    background: linear-gradient(135deg, #1dd1a1, #55efc4);
    color: white;
    box-shadow: 0 2px 8px rgba(29, 209, 161, 0.3);
}

.meta-item.comments:hover i {
    background: linear-gradient(135deg, #10ac84, #1dd1a1);
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(29, 209, 161, 0.4);
}

/* 文章列表分类标签图标 */
.meta-item.priority i {
    background: linear-gradient(135deg, #74b9ff, #0984e3);
    color: white;
    box-shadow: 0 2px 8px rgba(116, 185, 255, 0.3);
}

.meta-item.priority:hover i {
    background: linear-gradient(135deg, #0984e3, #74b9ff);
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(116, 185, 255, 0.4);
}

/* 统计数据图标样式 */


.stat-footer i.fas.fa-heart,
.stat-icon .icon.icon-heart {
    background: linear-gradient(135deg, #ff7675, #d63031);
}

.stat-footer i.fas.fa-bookmark,
.stat-icon .icon.icon-star {
    background: linear-gradient(135deg, #fdcb6e, #e17055);
}

.stat-footer i.fas.fa-comment,
.stat-icon .icon.icon-comment {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
}

/* 悬停效果 */
.modern-action-btn:hover,
.modern-meta-item:hover {
    transform: translateY(-2px);
}

/* 按钮组整体样式 */
.modern-action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 30px 0;
    flex-wrap: wrap;
}

.modern-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 24px;
    border: none;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 15px;
    color: #333;
}

.modern-action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .modern-meta-item i,
    .meta-item i {
        width: 24px;
        height: 24px;
        font-size: 11px;
        padding: 5px;
    }
    
    .modern-action-buttons {
        gap: 6px;
        margin: 16px 0;
        padding: 16px 0;
    }
    
    .modern-action-btn {
        padding: 5px 12px;
        font-size: 12px;
        gap: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        white-space: nowrap;
        border-radius: 20px;
    }

    .modern-action-btn i {
        width: 24px;
        height: 24px;
        font-size: 11px;
        padding: 5px;
        box-shadow: none;
    }

    .modern-action-btn .action-text {
        font-size: 12px;
    }

    .modern-action-btn .modern-action-count,
    .modern-action-btn .action-count {
        font-size: 10px;
        min-width: auto;
        padding: 0 4px;
    }
}

/* 动画效果 */
@keyframes heartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.like-btn.active i {
    animation: heartbeat 0.6s ease-in-out;
}

/* 统计数据图标样式增强 */
.stat-footer i.fas.fa-file-alt {
    background: linear-gradient(135deg, #74b9ff, #0984e3) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(116, 185, 255, 0.3) !important;
}

.stat-footer i.fas.fa-heart {
    background: linear-gradient(135deg, #ff7675, #d63031) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(255, 118, 117, 0.3) !important;
}

.stat-footer i.fas.fa-bookmark {
    background: linear-gradient(135deg, #fdcb6e, #e17055) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(253, 203, 110, 0.3) !important;
}

.stat-footer i.far.fa-comments {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3) !important;
}

/* 统计数据图标悬停效果 */
.stat-item:hover .stat-footer i {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
}

/* 深色模式适配 */
body.dark-mode .modern-action-btn {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

body.dark-mode .modern-action-btn i,
body.dark-mode .modern-meta-item i,
body.dark-mode .meta-item i {
    background: rgba(255, 255, 255, 0.2);
}