/* 文章收藏按钮状态层，需在 public.css 之后加载。 */
.article-tit .collect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 88px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #dfe6ef;
    border-radius: 17px;
    box-sizing: border-box;
    overflow: visible;
    background: #f5f7fa !important;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    line-height: 32px;
    box-shadow: none;
    transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s;
}

.article-tit .collect i {
    padding: 0;
    color: #8b98aa;
    font-size: 14px;
    line-height: 1;
}

.article-tit .collect:not(.cover) i:before {
    content: "\f006";
}

.article-tit .collect:hover {
    border-color: #75a7f5;
    background: #edf4ff !important;
    color: #3275df;
    box-shadow: 0 5px 14px -9px rgba(50, 117, 223, .7);
}

.article-tit .collect:hover i {
    color: #3275df;
}

.article-tit .collect.cover,
.article-tit .collect.cover:hover {
    border-color: #3275df;
    background: #3275df !important;
    color: #fff;
    box-shadow: 0 7px 16px -10px rgba(50, 117, 223, .9);
}

.article-tit .collect.cover i,
.article-tit .collect.cover:hover i {
    color: #ffd166;
}

.article-tit .collect:focus-visible,
.article-share .social-share .collect:focus-visible {
    outline: 3px solid rgba(50, 117, 223, .24);
    outline-offset: 2px;
}

.article-tit .collect.is-pending,
.article-share .social-share .collect.is-pending {
    opacity: .58;
    cursor: wait !important;
    pointer-events: none;
}

.article-share .social-share .collect {
    border: 0;
    background-color: #3275df !important;
    box-shadow: none;
    transition: background-color .2s, box-shadow .2s, transform .2s;
}

.article-share .social-share .collect:hover {
    background-color: #2364c8 !important;
    transform: translateY(-1px);
}

.article-share .social-share .collect.cover,
.article-share .social-share .collect.cover:hover {
    background-color: #e6a317 !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .38), 0 5px 12px -8px rgba(168, 104, 0, .9);
}

body.night .article-tit .collect {
    border-color: #454b55;
    background: #32353a !important;
    color: #b6beca;
}

body.night .article-tit .collect i {
    color: #9aa4b2;
}

body.night .article-tit .collect:hover {
    border-color: #638fd6;
    background: #2f405b !important;
    color: #a9c7fb;
}

body.night .article-tit .collect.cover,
body.night .article-tit .collect.cover:hover {
    border-color: #4d83dc;
    background: #356fcf !important;
    color: #fff;
}

body.night .article-tit .collect.cover i,
body.night .article-tit .collect.cover:hover i {
    color: #ffd166;
}

@media screen and (max-width: 800px) {
    .article-tit .collect,
    .soft-detail .article-tit .collect {
        position: static !important;
        top: auto !important;
        right: auto !important;
        min-width: 86px;
        height: 34px;
        margin-top: 12px;
        padding: 0 13px;
        line-height: 32px;
    }
}