/* =========================================================
 * PostStats：文章浏览数 + 点赞
 * 只在文章详情页加载；颜色/圆角/过渡全部走主题变量，取不到时用兜底值
 * ========================================================= */

.ps-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 14px 0 22px;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-secondary, #888);
}

.ps-views,
.ps-like {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ps-views svg,
.ps-like svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.ps-views svg {
    fill: currentColor;
}

/* 未赞：描边心形；已赞：实心 + 黑底 */
.ps-like {
    padding: 6px 12px;
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--radius, 2px);
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.ps-like svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linejoin: round;
}

.ps-like:hover {
    color: var(--color-text, #111);
    border-color: var(--color-text, #111);
}

.ps-like.is-busy {
    opacity: .55;
    pointer-events: none;
}

.ps-bar.is-liked .ps-like,
.ps-bar.is-liked .ps-like:hover {
    background: var(--color-text, #111);
    border-color: var(--color-text, #111);
    color: #fff;
    cursor: default;
}

.ps-bar.is-liked .ps-like svg {
    fill: currentColor;
    stroke: currentColor;
}

/* 数字变化时轻微上跳，给点反馈 */
.ps-like-num.is-bump {
    animation: ps-bump .32s ease;
}

@keyframes ps-bump {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

@media (max-width: 480px) {
    .ps-bar {
        gap: 12px;
        font-size: 12px;
    }

    .ps-like {
        padding: 5px 10px;
    }
}