/**
 * 普通文章详情页：头版（hero）+ 侧栏让位
 *
 * 形态参考 zibll 文章页 —— 特色图铺满整幅 + 分类标签 + 居中白色大标题 + meta 行，
 * 正文区整体上浮压住 hero 底边；原来卡片头部的「标题 + 发布时间」改成作者条。
 *
 * 两个关键约定：
 * 1. hero 上沿顶到浏览器最上沿，被固定导航栏覆盖（`--qm-hero-lift` 抵消 header 预留的 padding-top）；
 * 2. 特色图上面盖的是**毛玻璃**遮罩（backdrop-filter 模糊），不是纯暗色层。
 *
 * 侧栏内容不在这里定义 —— 它由「页面布局 → 侧边栏模块」那套配置驱动
 * （single.php 里调 qimeng_get_sidebar_layout_enabled_keys / qimeng_render_sidebar_module），
 * 与首页、单页共用同一份模块列表。本文件只负责侧栏的让位问题。
 *
 * 仅作用于 .qm-article-detail-refined（普通文章详情页），
 * 素材 / 软件详情页走 templates/parts/*-detail-page.php，不受影响。
 */

/* ============================================================
   1. hero 容器
   ============================================================ */

.qm-article-detail-refined > .qm-article-hero {
    /* 顶到浏览器最上沿、被固定导航栏覆盖。
       lift 必须等于 header.css 给 main 预留的那段 padding-top
       （`calc(--qm-header-offset + --qm-header-gap)`），否则顶部会露一条缝。 */
    --qm-hero-lift: calc(
        var(--qm-header-offset, var(--qm-header-height, 68px)) +
        var(--qm-header-gap, 1.5rem)
    );
    --qm-hero-pad-top: 36px;
    --qm-hero-pad-bottom: 56px;

    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 高度要把被头部盖住的那一段也算进去，可见高度才和之前一致 */
    min-height: calc(var(--qm-hero-lift) + clamp(200px, 21vw, 290px));
    margin-top: calc(-1 * var(--qm-hero-lift));
    padding: calc(var(--qm-hero-lift) + var(--qm-hero-pad-top)) 24px var(--qm-hero-pad-bottom);
    /* 无特色图时的兜底：品牌红系渐变，保证任何文章都有像样的头版 */
    background: linear-gradient(135deg, #7a1410 0%, #b81f18 46%, #d9554c 100%);
    color: #fff;
    text-align: center;
}

.qm-article-hero.has-image {
    background: #14161a;
}

/* 特色图图层 */
.qm-article-hero__bg {
    position: absolute;
    inset: 0;
    background-image: var(--qm-hero-image, none);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 42%;
}

/* 毛玻璃遮罩：把背景图糊成柔和的色块，再压一点暗度。
   白字在任何图上都读得清，同时保留图片的色彩氛围（而不是被一层灰糊死）。 */
.qm-article-hero.has-image .qm-article-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 11, 16, 0.34) 0%,
        rgba(10, 11, 16, 0.18) 44%,
        rgba(10, 11, 16, 0.5) 100%
    );
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
}

.qm-article-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}

/* ============================================================
   2. 分类标签
   ============================================================ */

.qm-article-hero__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

.qm-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.qm-hero-tag i {
    font-size: 11px;
    opacity: 0.9;
}

.qm-hero-tag:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.36);
    color: #fff;
}

/* 首个分类用品牌色强调 */
.qm-hero-tag--primary {
    background: var(--qm-primary, #d9261d);
    border-color: var(--qm-primary, #d9261d);
}

.qm-hero-tag--primary:hover {
    background: var(--qm-primary-dark, #b81f18);
    border-color: var(--qm-primary-dark, #b81f18);
    color: #fff;
}

/* ============================================================
   3. 标题 + meta
   ============================================================ */

.qm-article-detail-refined .qm-article-hero__title {
    margin: 0;
    max-width: 100%;
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.36);
    text-wrap: balance;
}

.qm-article-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    line-height: 1.6;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42);
}

.qm-article-hero__meta > span {
    white-space: nowrap;
}

/* 分隔点由伪元素承担，避免 flex gap 把间距加两次 */
.qm-article-hero__meta > span + span::before {
    content: "·";
    display: inline-block;
    margin: 0 9px;
    opacity: 0.55;
}

/* ============================================================
   4. 正文区上浮，压住 hero 底边
   ============================================================ */

.qm-article-detail-refined:has(> .qm-article-hero) > .qm-article-shell {
    position: relative;
    z-index: 2;
    margin-top: -48px;
}

/* hero 已经承担了「我在哪」，隐藏旧的面包屑避免重复 */
.qm-article-detail-refined:has(> .qm-article-hero) .qm-article-breadcrumb-bar {
    display: none;
}

/* ============================================================
   5. 卡片头部 → 作者条
   ============================================================ */

.qm-article-detail-refined .qm-article-content-head {
    padding: 20px 30px;
}

.qm-article-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.qm-article-byline__avatar {
    display: inline-flex;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--qm-color-surface-muted, #f5f6f8);
    text-decoration: none;
}

.qm-article-byline__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qm-article-byline__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.qm-article-byline__name {
    color: var(--qm-article-title-color, #1d2939);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.2s ease;
}

.qm-article-byline__name:hover {
    color: var(--qm-primary, #d9261d);
}

.qm-article-byline__time {
    color: var(--qm-article-meta-color, #667085);
    font-size: 12.5px;
    line-height: 1.3;
}

html.dark .qm-article-detail-refined .qm-article-byline__name,
body.dark .qm-article-detail-refined .qm-article-byline__name {
    color: var(--qm-text-primary);
}

/* 卡片头部的「编辑」按钮推到最右侧 */
.qm-article-detail-refined .qm-article-byline .qm-article-content-edit {
    margin-left: auto;
}

/* ============================================================
   6. 响应式
   ============================================================ */

@media (max-width: 991.98px) {
    .qm-article-detail-refined > .qm-article-hero {
        --qm-hero-pad-top: 28px;
        --qm-hero-pad-bottom: 46px;

        min-height: calc(var(--qm-hero-lift) + clamp(180px, 32vw, 230px));
        padding-left: 18px;
        padding-right: 18px;
    }

    .qm-article-detail-refined .qm-article-hero__title {
        font-size: clamp(1.25rem, 4.4vw, 1.75rem);
    }

    .qm-article-detail-refined:has(> .qm-article-hero) > .qm-article-shell {
        margin-top: -34px;
    }

    .qm-article-detail-refined .qm-article-content-head {
        padding: 18px 20px;
    }
}

@media (max-width: 575.98px) {
    .qm-article-hero__inner {
        gap: 11px;
    }

    .qm-article-hero__tags {
        gap: 6px;
    }

    .qm-hero-tag {
        height: 24px;
        padding: 0 9px;
        font-size: 12px;
    }

    .qm-article-hero__meta {
        font-size: 12px;
    }

    .qm-article-hero__meta > span + span::before {
        margin: 0 7px;
    }

    .qm-article-byline__avatar {
        width: 36px;
        height: 36px;
    }
}

/* ============================================================
   7. 左侧浮条：合成一张卡片 + 圆形图标底 + 数字角标
   ============================================================ */

/* 配色向右侧服务工具条看齐：白底卡片 + 中性深灰图标（原来整条是品牌粉 #FF1493）。
   整条浮条（头像 + 操作按钮）收进同一张卡片里，不再是一颗颗散着的图标。 */
.qm-article-detail-refined .qm-article-rail-inner {
    --qm-rail-surface: rgba(255, 255, 255, 0.96);
    --qm-rail-border: rgba(15, 23, 42, 0.06);
    --qm-rail-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    --qm-rail-icon: #33363a;
    --qm-rail-icon-bg: rgba(15, 23, 42, 0.05);
    --qm-rail-icon-bg-hover: rgba(15, 23, 42, 0.09);
    --qm-rail-icon-bg-active: rgba(15, 23, 42, 0.13);
    --qm-rail-divider: rgba(15, 23, 42, 0.07);

    align-items: center;
    gap: 8px;
    padding: 12px 0;
    border: 1px solid var(--qm-rail-border);
    border-radius: 14px;
    background: var(--qm-rail-surface);
    box-shadow: var(--qm-rail-shadow);
}

html.dark .qm-article-detail-refined .qm-article-rail-inner,
body.dark .qm-article-detail-refined .qm-article-rail-inner {
    --qm-rail-surface: rgba(24, 26, 31, 0.88);
    --qm-rail-border: rgba(255, 255, 255, 0.1);
    --qm-rail-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    --qm-rail-icon: #d9dee7;
    --qm-rail-icon-bg: rgba(255, 255, 255, 0.07);
    --qm-rail-icon-bg-hover: rgba(255, 255, 255, 0.13);
    --qm-rail-icon-bg-active: rgba(255, 255, 255, 0.18);
    --qm-rail-divider: rgba(255, 255, 255, 0.1);
}

/* ⚠️ article-detail.css 里有一条
   `html.dark .qm-article-detail-refined :is(…, .qm-post-actions-float-refined .qm-action-btn, …)
    { background: var(--qm-detail-dark-surface-alt) }`，
   特异性 (0,4,1) 压过上面那条只带 `.qm-article-detail-refined` 的按钮规则。
   这里用同特异性的 dark 选择器（靠 article-hero.css 后加载取胜）把它顶回去。 */
html.dark .qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn,
body.dark .qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn {
    background: transparent;
    color: var(--qm-rail-icon);
}

html.dark .qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn:hover,
body.dark .qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn:hover {
    background: var(--qm-rail-icon-bg-hover);
    color: var(--qm-rail-icon);
}

html.dark .qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn.active,
body.dark .qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn.active {
    background: var(--qm-rail-icon-bg-hover);
    color: var(--qm-rail-icon);
}

html.dark .qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn .qm-hero-stat-number,
body.dark .qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn .qm-hero-stat-number {
    background: var(--qm-rail-icon);
    color: var(--qm-rail-surface);
}

/* 头像与操作按钮之间拉一条分隔线，和参考图的分组方式一致 */
.qm-article-detail-refined .qm-article-rail-author-card {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--qm-rail-divider);
}

.qm-article-detail-refined .qm-post-actions-float-refined {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    /* `.qm-post-actions-float` 原本是 `position: sticky; top: calc(header + 16px)`（=84px）；
       这里把 position 改成 relative 却没清 top，相对定位就会老老实实下移 84px，
       按钮组直接掉出卡片底部。以前浮条是透明的所以看不出来。 */
    position: relative;
    top: auto;
}

/* 每个操作 = 44px 圆形浅灰底 + 中性色图标 */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* 图标本身不带底色（hover 时才出现反馈） */
    background: transparent;
    box-shadow: none;
    color: var(--qm-rail-icon);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn i {
    margin: 0;
    color: inherit;
    font-size: 17px;
    line-height: 1;
}

.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn:hover {
    background: var(--qm-rail-icon-bg-hover);
    color: var(--qm-rail-icon);
}

.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn:active {
    background: var(--qm-rail-icon-bg-active);
}

/* 操作图标统一细线条：把按钮里的 Font Awesome 字形换成 mask 线性图形。
 * 模板里 heart / star 是 far（空心），share-alt / file-export 是 fas（实心），
 * 混在一起不统一 —— 这里统一盖成同一套线宽。 */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn > i[class*='fa-'] {
    display: inline-block;
    width: 19px;
    height: 19px;
    font-size: 0 !important;
    line-height: 1;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn > i[class*='fa-']::before {
    content: none !important;
}

/* 点赞 */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn > i.fa-heart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.4%205.6a5%205%200%200%200-7.07%200L12%206.93%2010.67%205.6a5%205%200%201%200-7.07%207.07l8.4%208.4%208.4-8.4a5%205%200%200%200%200-7.07z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.4%205.6a5%205%200%200%200-7.07%200L12%206.93%2010.67%205.6a5%205%200%201%200-7.07%207.07l8.4%208.4%208.4-8.4a5%205%200%200%200%200-7.07z'/%3E%3C/svg%3E");
}

/* 收藏 */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn > i.fa-star {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.6l2.65%205.37%205.93.86-4.29%204.18%201.01%205.9L12%2017.12%206.7%2019.9l1.01-5.9L3.42%209.83l5.93-.86z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.6l2.65%205.37%205.93.86-4.29%204.18%201.01%205.9L12%2017.12%206.7%2019.9l1.01-5.9L3.42%209.83l5.93-.86z'/%3E%3C/svg%3E");
}

/* 分享 */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn > i.fa-share-alt {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='18'%20cy='5'%20r='2.6'/%3E%3Ccircle%20cx='6'%20cy='12'%20r='2.6'/%3E%3Ccircle%20cx='18'%20cy='19'%20r='2.6'/%3E%3Cpath%20d='m8.4%2010.7%207.2-4.3M8.4%2013.3l7.2%204.3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='18'%20cy='5'%20r='2.6'/%3E%3Ccircle%20cx='6'%20cy='12'%20r='2.6'/%3E%3Ccircle%20cx='18'%20cy='19'%20r='2.6'/%3E%3Cpath%20d='m8.4%2010.7%207.2-4.3M8.4%2013.3l7.2%204.3'/%3E%3C/svg%3E");
}

/* 导出 */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn > i.fa-file-export {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%203v4a1%201%200%200%200%201%201h4'/%3E%3Cpath%20d='M17%2021H7a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h7l5%205v11a2%202%200%200%201-2%202z'/%3E%3Cpath%20d='M9.5%2014h5M12%2011.5%2014.5%2014%2012%2016.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%203v4a1%201%200%200%200%201%201h4'/%3E%3Cpath%20d='M17%2021H7a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h7l5%205v11a2%202%200%200%201-2%202z'/%3E%3Cpath%20d='M9.5%2014h5M12%2011.5%2014.5%2014%2012%2016.5'/%3E%3C/svg%3E");
}

/* 举报 */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn > i.fa-flag {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.5%203.5v17'/%3E%3Cpath%20d='M4.5%204.6h13.4l-2.4%203.9%202.4%203.9H4.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.5%203.5v17'/%3E%3Cpath%20d='M4.5%204.6h13.4l-2.4%203.9%202.4%203.9H4.5'/%3E%3C/svg%3E");
}

/* 评论 */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn > i.fa-comment {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.5%2014.5a2.5%202.5%200%200%201-2.5%202.5H8l-4.5%204V6.5A2.5%202.5%200%200%201%206%204h12a2.5%202.5%200%200%201%202.5%202.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.5%2014.5a2.5%202.5%200%200%201-2.5%202.5H8l-4.5%204V6.5A2.5%202.5%200%200%201%206%204h12a2.5%202.5%200%200%201%202.5%202.5z'/%3E%3C/svg%3E");
}

/* 书签 */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn > i.fa-bookmark {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%204.5h12a1%201%200%200%201%201%201V21l-7-4.2L5%2021V5.5a1%201%200%200%201%201-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%204.5h12a1%201%200%200%201%201%201V21l-7-4.2L5%2021V5.5a1%201%200%200%201%201-1z'/%3E%3C/svg%3E");
}

/* 下载 */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn > i.fa-cloud-download {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.5v11'/%3E%3Cpath%20d='M7.5%2010%2012%2014.5%2016.5%2010'/%3E%3Cpath%20d='M4%2017.5v1.5a1.5%201.5%200%200%200%201.5%201.5h13a1.5%201.5%200%200%200%201.5-1.5v-1.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.5v11'/%3E%3Cpath%20d='M7.5%2010%2012%2014.5%2016.5%2010'/%3E%3Cpath%20d='M4%2017.5v1.5a1.5%201.5%200%200%200%201.5%201.5h13a1.5%201.5%200%200%200%201.5-1.5v-1.5'/%3E%3C/svg%3E");
}

/* 打印 */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn > i.fa-print {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%209V4h10v5'/%3E%3Cpath%20d='M5%209h14a1%201%200%200%201%201%201v6h-3v4H7v-4H4v-6a1%201%200%200%201%201-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%209V4h10v5'/%3E%3Cpath%20d='M5%209h14a1%201%200%200%201%201%201v6h-3v4H7v-4H4v-6a1%201%200%200%201%201-1z'/%3E%3C/svg%3E");
}

/* 链接 */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn > i.fa-link {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%2013.5a4%204%200%200%200%205.7%200l2.8-2.8a4%204%200%201%200-5.7-5.7l-1.3%201.3'/%3E%3Cpath%20d='M14%2010.5a4%204%200%200%200-5.7%200l-2.8%202.8a4%204%200%201%200%205.7%205.7l1.3-1.3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%2013.5a4%204%200%200%200%205.7%200l2.8-2.8a4%204%200%201%200-5.7-5.7l-1.3%201.3'/%3E%3Cpath%20d='M14%2010.5a4%204%200%200%200-5.7%200l-2.8%202.8a4%204%200%201%200%205.7%205.7l1.3-1.3'/%3E%3C/svg%3E");
}

/* 数字挪到右上角做角标。
   注意定位基准是「图标」而不是按钮 —— 按钮是 44px 的点击区、图标只有 19px，
   贴着按钮角会让角标飘在离图标很远的地方。
   ⚠️ 暗色下有条全局规则 `html.dark .qm-article-detail-refined :is(…, span, …) { color: … !important }`，
   角标是 <span> 会被它命中，所以这里的 color 也必须带 !important。 */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn .qm-hero-stat-number {
    position: absolute;
    /* 贴按钮右上角：图标只有 19px，往内收会把角标盖在图形上 */
    top: -2px;
    right: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--qm-rail-icon);
    color: var(--qm-rail-surface) !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* 「导出 / 举报」这类文字标签不再占位，只留图标（aria-label 仍在，无障碍不受影响） */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn .qm-action-label {
    display: none;
}

/* 点赞 / 收藏的已激活态：底色加深即可，不再变粉 */
.qm-article-detail-refined .qm-post-actions-float-refined .qm-action-btn.active {
    background: var(--qm-rail-icon-bg-hover);
    color: var(--qm-rail-icon);
}

/* ============================================================
   8. 让位：左侧固定客服栏 + 右侧固定服务工具条
   ============================================================ */

/* 屏幕左侧固定着一条「客服 / 意见反馈」栏（left:0 / 宽 46px / z-index 80），
   而 shell 的左右内边距只有 12px —— 浮条卡片铺上白底后左上角会被它盖住。
   整个网格往右让 34px（中间列是 minmax(0,1fr)，会自动收窄，总宽不变）。 */
@media (min-width: 992px) and (max-width: 1512px) {
    .qm-article-detail-refined .qm-article-layout {
        padding-left: 34px;
    }
}

/* 工具条是 fixed / right:16px / 宽 60px（z-index 1200），
   而 shell 在 1360px 以内是撑满的 —— 于是视口窄于约 1512px 时，
   侧栏最右约 64px 会被它压住（关注按钮、第三列统计都会被挡）。
   这里给侧栏整体留出一条通道，卡片才完整可见。 */
@media (min-width: 992px) and (max-width: 1512px) {
    .qm-article-detail-refined .qm-article-aside {
        padding-right: 68px;
    }
}