/* 容器 */
.single-3cols {
    max-width: 1440px; /* 版心 1440px */
    margin: 0 auto;
    padding: 32px 0 64px; /* 按需留上下内边距，左右为 0 以保证版心精确 */
    box-sizing: border-box;
    display: block;
    font-size: 16px;
    line-height: 1.8;
  }
  
  /* --- 全局锚点滚动偏移，避免被头部遮挡/滚动过头 --- */
  :root { --anchor-offset: 180px; }
  html { scroll-padding-top: var(--anchor-offset); }
  /* 仅对正文内的锚点标题生效 */
  .col-middle.entry h2[id],
  .col-middle.entry h3[id] { scroll-margin-top: var(--anchor-offset); }
  @media (max-width: 992px) {
    :root { --anchor-offset: 120px; }
  }
  
  /* 标题区 - 标题置于中栏，信息条通栏 */
  .single-header { margin: 0 auto 28px; }
  /* 第一行：标题 + 返回按钮，宽度严格 1440px（不使用三列网格） */
  .single-header .head-row {
    max-width: 1440px;
    margin: 0 auto 16px;
    position: relative;
    padding-left: 0px; /* 左 400 + 间距 60，与中栏左边对齐 */
    padding-right: 0px; /* 右栏宽度，给返回按钮留位 */
    min-height: 72px;
    display: flex;
    align-items: center;
    padding-top: 8px; /* 为按钮与标题留上下外边距效果 */
    padding-bottom: 8px;
  }
  .single-header .entry-title { margin: 0; }
  .single-header .back-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 80px; height: 80px; border-radius: 50%;
    background: #DA251C; /* 红色圆按钮 */
    display: inline-flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
    text-decoration: none;
  }
  /* 上：白色箭头图标（24×24） */
  .single-header .back-btn::before{
    content: '';
    width: 24px; height: 24px;
    -webkit-mask: url('https://test5.geekdance.cn/wp-content/uploads/2025/08/SVG-24.svg') center/contain no-repeat;
    mask: url('https://test5.geekdance.cn/wp-content/uploads/2025/08/SVG-24.svg') center/contain no-repeat;
    background-color: #ffffff;
  }
  /* 下：白色“返回”文字（14/24） */
  .single-header .back-btn::after{
    content: '返回';
    color: #ffffff; font-size: 14px; line-height: 24px;
  }
  .single-header .back-btn:hover { filter: brightness(0.95); }
  .single-header .back-btn svg, .single-header .back-btn .text { display: none; }

  /* 信息条 */
  .single-header .meta-bar {
    width: 100%;
    background: rgba(0,0,0,0.02);
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    height: 84px; /* 贴近UI高度 */
  }
  .single-header .meta-bar .meta-inner {
    max-width: 1440px;
    margin: 0 auto;
    height: 100%;
    padding-left: 0px; /* 内容左对齐到中栏 */
    padding-right: 0px; /* 预留右侧空间 */
    display: flex;
    align-items: center;
  }
  .single-header .meta-bar .meta-content { display: flex; align-items: center; gap: 24px; }
  .single-header .meta-bar .author { display: inline-flex; align-items: center; gap: 12px; }
  .single-header .meta-bar .author img { width: 40px; height: 40px; border-radius: 50%; }
  .single-header .meta-bar .author-text { display: flex; flex-direction: column; line-height: 1.05; }
  .single-header .meta-bar .author-text .name { font-weight: 700; color: #ff2a2a; }
  .single-header .meta-bar .author-text .role { color: #a0a0a0; font-size: 12px; margin-top: 4px; }
  .single-header .meta-bar .meta-divider { width: 1px; height: 36px; background: #e8e8e8; }
  .single-header .meta-bar .posted { color: #666; display: inline-flex; align-items: center; gap: 10px; }
  .single-header .meta-bar .posted .label { color: #9a9a9a; }
  .single-header .meta-bar .entry-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #333;
    font-size: 14px;
  }
  .single-header .meta-bar .author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .single-header .meta-bar .author img { width: 40px; height: 40px; border-radius: 50%; }
  .single-header .meta-bar .name { font-weight: 700; color: #d11; }
  .single-header .meta-bar .meta-divider {
    width: 1px; height: 28px; background: #e9e9e9; margin: 0 8px;
  }
  .single-header .meta-bar .date { color: #666; }
  .entry-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.25;
    margin: 0 0 12px;
  }
  .entry-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #666;
    font-size: 14px;
  }
  .entry-meta .author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 999px;
  }
  .entry-meta .author img {
    width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  }
  .entry-meta .date {
    padding: 6px 10px;
    background: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 999px;
  }
  .entry-meta .dot { opacity: .6; }
  
  /* 三列布局：400 / 780 / 140，间距 60，总宽 1440 */
  .single-3cols.wrap {
    display: grid;
    grid-template-columns: 400px 780px 140px; /* 左/中/右 固定列宽 */
    column-gap: 60px;
    row-gap: 0;
    align-items: start;
  }
  
  /* 左侧 */
  .col-left { display: flex; flex-direction: column; gap: 20px; }
  .side-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 16px;
  }
  /* 目录与推荐阅读：移除边框（保持间距不变） */
  .side-card.toc,
  .side-card.related { border: none; background: transparent; }
  .side-title {
    font-size: 18px; /* 推荐阅读标题尺寸 */
    line-height: 24px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
  }
  .toc .toc-list,
  .toc .toc-sub {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  .toc .toc-item { margin: 6px 0; }
  /* 目录项：默认灰色小圆点 + 16/26 文案 */
  .toc .toc-item a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 14px; /* 给圆点留位 */
    text-decoration: none;
    color: #999;
    font-size: 16px;
    line-height: 26px;
    transition: color .2s ease, font-size .2s ease;
  }
  .toc .toc-item a::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor; /* 跟随文字颜色变化 */
    transform: translateY(-50%);
  }
  /* hover 或 激活状态：品牌红 + 18/26 */
  .toc .toc-item a:hover,
  .toc .toc-item a:focus,
  .toc .toc-item a.active {
    color: #DA251C;
    font-size: 18px;
    line-height: 26px;
  }
  .toc .toc-empty, .muted { color: #aaa; font-size: 14px; }
  
  .related-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .related-list li { margin: 8px 0; }
  .related-list a { color: #333; text-decoration: none; }
  .related-list a:hover { color: #0073aa; }

  /* 推荐阅读采用与目录“同款”文字交互，但不显示圆点 */
  .side-card.related ul { list-style: none; padding-left: 0; margin: 0; }
  .side-card.related li { margin: 6px 0; }
  .side-card.related li a {
    display: inline-block;
    text-decoration: none;
    color: #999;
    font-size: 16px;
    line-height: 26px;
    transition: color .2s ease, font-size .2s ease;
  }
  .side-card.related li a:hover,
  .side-card.related li a:focus { color: #DA251C; font-size: 18px; line-height: 26px; }
  
  /* 中间正文 */
  .col-middle.entry {
    min-width: 0;
  }
  .col-middle.entry h2 { font-size: 24px; margin: 28px 0 12px; }
  .col-middle.entry h3 { font-size: 20px; margin: 22px 0 10px; }
  .col-middle.entry img { max-width: 100%; height: auto; }
  .page-links { margin-top: 20px; color: #666; }
  
  /* 右侧（固定） */
  .col-right { position: relative; }
  .right-sticky { position: sticky; top: 100px; }
  
  /* 右侧操作栏（按UI尺寸） */
  .right-rail {
    width: 140px;
    height: 650px;
    border-left: 1px solid #f4f4f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding-top: 16px;
  }
  .right-rail .like-box { margin-top: 6px; }
  .right-rail .right-sep {
    width: 80px; height: 2px; background: #f0f0f0; border-radius: 1px; margin: 8px 0;
  }
  .right-rail .right-share-title {
    color: #c7c7c7; font-size: 16px; line-height: 1; margin: 4px 0 2px;
  }
  .right-rail .share-box { display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .right-rail .share-btn {
    width: 64px; height: 64px; border-radius: 50%; border: 1px solid #eee; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  }
  .right-rail .share-btn:hover { border-color: #e0e0e0; }

  /* 统一使用 CSS mask 填充单色，彻底避免叠色问题 */
  .right-rail .share-icon { width: 28px; height: 28px; display: inline-block; background-color: #cfcfcf; transition: background-color .2s ease; }
  .right-rail .share-icon.wechat { -webkit-mask: url('https://test5.geekdance.cn/wp-content/uploads/2025/08/SVG-21.svg') center/contain no-repeat; mask: url('https://test5.geekdance.cn/wp-content/uploads/2025/08/SVG-21.svg') center/contain no-repeat; }
  .right-rail .share-icon.weibo  { -webkit-mask: url('https://test5.geekdance.cn/wp-content/uploads/2025/08/SVG-22.svg') center/contain no-repeat; mask: url('https://test5.geekdance.cn/wp-content/uploads/2025/08/SVG-22.svg') center/contain no-repeat; }
  .right-rail .share-btn:hover .share-icon { background-color: #DA251C; }
  .right-rail .right-back {
    display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: #c10d2a; gap: 8px; margin-top: 8px;
  }
  .right-rail .right-back .back-icon { width: 28px; height: 28px; background: url('https://test5.geekdance.cn/wp-content/uploads/2025/08/SVG-23.svg') center/contain no-repeat; display: inline-block; }
  .right-rail .right-back .txt { color: #999; }

  /* ===== 右栏点赞（WP ULike）按设计稿样式 ===== */
  .right-rail .like-box { display: flex; flex-direction: column; align-items: center; }
  /* 容器对齐，兼容不同插件输出类名 */
  .right-rail .like-box .wpulike,
  .right-rail .like-box .wp_ulike,
  .right-rail .like-box .wp_ulike_general_class,
  .right-rail .like-box .wp_ulike_is_active { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  /* 点赞按钮外观：64px 圆形描边 */
  .right-rail .like-box .wpulike .wp_ulike_btn,
  .right-rail .like-box .wp_ulike .wp_ulike_btn,
  .right-rail .like-box .wp_ulike_general_class .wp_ulike_btn,
  .right-rail .like-box .wp_ulike_is_active .wp_ulike_btn,
  .right-rail .like-box .wpulike .button,
  .right-rail .like-box .wp_ulike .button { /* 兜底选择器 */
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 1px solid #eeeeee;
    background: #ffffff !important;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: none; outline: none;
  }
  /* 更强兼容：匹配任意包含“ulike”的 a/button */
  .right-rail .like-box :is(a,button)[class*="ulike"] {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 1px solid #eeeeee;
    background: #ffffff !important;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: none; outline: none; cursor: pointer;
    position: relative;
  }
  .right-rail .like-box :is(a,button)[class*="ulike"] svg,
  .right-rail .like-box :is(a,button)[class*="ulike"] img,
  .right-rail .like-box :is(a,button)[class*="ulike"] i { display: none !important; }
  /* 取消通用 ::before，避免与专用图标叠加导致重复 */
  .right-rail .like-box :is(a,button)[class*="ulike"]::before { content: none !important; }
  .right-rail .like-box :is(a,button)[class*="ulike"]:hover { border-color: #DA251C; transform: scale(1.04); transition: transform .15s ease, border-color .2s ease; }
  /* 按钮内图标（SVG 或 i）统一为品牌红 */
  .right-rail .like-box .wp_ulike_btn svg { width: 28px; height: 28px; }
  .right-rail .like-box .wp_ulike_btn svg [stroke] { stroke: #DA251C; }
  .right-rail .like-box .wp_ulike_btn svg [fill]:not([fill="none"]) { fill: #DA251C; }
  .right-rail .like-box .wp_ulike_btn i,
  .right-rail .like-box .wp_ulike_btn span.icon { color: #DA251C; }
  /* 针对你提供的结构：.wp_ulike_general_class > .wp_ulike_btn + .count-box */
  .right-rail .like-box .wp_ulike_general_class { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .right-rail .like-box .wp_ulike_general_class .wp_ulike_btn {
    width: 64px; height: 64px; border-radius: 50%; border: 1px solid #eeeeee;
    background: #ffffff !important; background-image: none !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* 使用你提供的 Button.svg 作为掩膜图标，并隐藏插件自带图标，统一交互 */
  .right-rail .like-box .wp_ulike_btn { position: relative; cursor: pointer; transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease; }
  .right-rail .like-box .wp_ulike_btn svg,
  .right-rail .like-box .wp_ulike_btn i,
  .right-rail .like-box .wp_ulike_btn img { display: none !important; }
  /* 使用 ::after 作为唯一图标 */
  .right-rail .like-box .wp_ulike_btn::before { content: none !important; }
  .right-rail .like-box .wp_ulike_btn::after {
    content: '';
    width: 28px; height: 28px; display: inline-block;
    -webkit-mask: url('https://test5.geekdance.cn/wp-content/uploads/2025/08/Button.svg') center/contain no-repeat;
    mask: url('https://test5.geekdance.cn/wp-content/uploads/2025/08/Button.svg') center/contain no-repeat;
    background-color: #DA251C;
  }
  /* 统一图标：无论 like/unlike 状态都禁止插件的背景图，并使用同一掩膜 */
  .wpulike-default .wp_ulike_put_image.wp_ulike_btn_is_active:after { filter: none!important; }
  .wpulike-default .wp_ulike_put_image:after { background-image: none!important;}
  .right-rail .like-box .wp_ulike_btn:hover { border-color: #DA251C; transform: scale(1.04); }
  .right-rail .like-box .wp_ulike_is_active .wp_ulike_btn,
  .right-rail .like-box .wp_ulike_btn.wp_ulike_btn_is_active { border-color: #DA251C; }
  /* 点赞数字弹跳动画 */
  @keyframes likeCountBump { 0%{transform:translateZ(0) scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }
  .right-rail .like-box .count.bump,
  .right-rail .like-box .wp_ulike_count.bump,
  .right-rail .like-box .wpulike-count.bump { animation: likeCountBump .35s ease; }
  /* 数字样式（343） */
  .right-rail .like-box [class*="counter"],
  .right-rail .like-box .wpulike-counter,
  .right-rail .like-box .wp_ulike_counter_up,
  .right-rail .like-box .wp_ulike_counter_down { display: none!important; }
  .wpulike-default .count-box:before { content: none; }
  .right-rail .like-box .like-total { display: flex; justify-content: center; }
  .right-rail .like-box .like-total .wp_ulike_count { font-size: 36px; line-height: 36px; color: #DA251C; font-weight: 600; }
  /* 兼容插件把数字放在 .count-box/.wpulike-updated-box 里的情况 */
  .right-rail .like-box .count-box,
  .right-rail .like-box .wpulike-updated-box { background: none; border: 0; padding: 0; box-shadow: none; }
  .like-share .like-wrap { margin-bottom: 16px; }
  .like-share .share-wrap { margin-bottom: 12px; }
  .back-btn {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #f7f7f7;
    cursor: pointer;
  }
  
  /* 响应式 */
  @media (max-width: 1500px) {
    /* 在 1440 以下，给容器两侧增加最小的呼吸内边距避免贴边 */
    .single-3cols { padding-left: 16px; padding-right: 16px; }
  }
  @media (max-width: 1200px) {
    .single-3cols.wrap {
      grid-template-columns: 1fr; /* 堆叠 */
      row-gap: 24px;
    }
  }
  @media (max-width: 992px) {
    .col-right .right-sticky { top: 20px; }
    .col-left { order: -1; } /* 移动端把目录放到正文上方 */
  }