/**
 * 文章详情页 V3 样式（Apple 编辑风改版，2026-06-19）
 * 作用域：template/pc/view_article.htm（.hs-* 命名空间）
 *
 * 设计原则（对照 品牌资料/DESIGN.md）：
 *   - 全站默认 Apple HIG 工艺：大留白、系统无衬线、平铺优先、毛玻璃浮层
 *   - 珊瑚红通过 --husir-coral-* 公共模块统一调用（进度条/Drop Cap/链接/标题hover/标签/分享按钮/分类胶囊/引用块）
 *   - 所有颜色消费全局 --dm-* token，本文件只定义 --hs-* 语义映射，不硬编码色值
 *   - 暗黑模式自动跟随 --dm-* 变量，无需重复覆盖
 *
 * 历史：V2 为暖灰+琥珀金编辑风，V3 改为 Apple 编辑风（白底文字+圆角大图+系统字体+珊瑚点缀）
 */

/* ============================================================
   设计令牌：--hs-* 映射到全局 --dm-*（语义层，便于后续换肤）
   ============================================================ */
:root {
    /* 颜色（全部映射全局 token） */
    --hs-bg: var(--dm-bg);                      /* 页面底 */
    --hs-bg-secondary: var(--dm-bg-secondary);  /* 区块底 */
    --hs-surface: var(--dm-bg-elevated);        /* 卡片表面 */
    --hs-text: var(--dm-text);                  /* 正文 */
    --hs-text-secondary: var(--dm-text-secondary); /* 次要 */
    --hs-text-tertiary: var(--dm-text-tertiary);   /* 三级 */
    --hs-border: var(--dm-border);              /* 发丝边框 */
    --hs-divider: var(--dm-divider);            /* 分隔线 */

    /* 珊瑚强调色（广泛使用） */
    --hs-accent: var(--husir-coral, var(--dm-accent, #ff6b6b));
    --hs-accent-hover: var(--husir-coral-hover, var(--dm-accent-hover, #ff5252));
    --hs-accent-soft: var(--husir-coral-soft, var(--dm-accent-soft, rgba(255, 107, 107, 0.12)));
    --hs-accent-glow: var(--husir-coral-glow, var(--dm-accent-glow, rgba(255, 107, 107, 0.15)));
    --hs-on-accent: var(--husir-on-coral, var(--dm-on-accent, #ffffff));

    /* 阴影（三层软阴影体系） */
    --hs-shadow-sm: var(--dm-shadow-sm);
    --hs-shadow-md: var(--dm-shadow-md);
    --hs-shadow-lg: var(--dm-shadow-lg);

    /* 间距（补全原 V2 缺失的间距令牌） */
    --hs-space-xs: 8px;
    --hs-space-sm: 16px;
    --hs-space-md: 24px;
    --hs-space-lg: 32px;
    --hs-space-xl: 48px;
    --hs-space-section: 64px;

    /* 圆角 */
    --hs-radius-sm: 12px;
    --hs-radius-md: 16px;
    --hs-radius-lg: 20px;
    --hs-radius-xl: 28px;
    --hs-radius-full: 9999px;

    /* 动效 */
    --hs-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
    --hs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --hs-dur-fast: 0.2s;
    --hs-dur: 0.3s;
    --hs-dur-slow: 0.6s;

    /* 列宽
       正文列宽：小屏保持 680px（阅读优化），大屏 clamp 到 50vw、封顶 820px
       （680px 纯文字阅读最佳，但 1920px 大屏占比仅 35% 显空旷；
        820px 时中文字约 51 字/行，仍属窄列阅读，未变宽列营销页） */
    --hs-max-content: clamp(680px, 50vw, 820px);
    --hs-max-wide: 1200px;      /* Hero/相关/特性宽列 */

    /* 字体（The System Stack Rule，不引入新字体） */
    --hs-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

/* ============================================================
   基础重置（作用域：.hs-main 内）
   ============================================================ */
.hs-main {
    font-family: var(--hs-font);
    color: var(--hs-text);
    background: var(--hs-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    padding-top: 0;
}
/* 暗黑基线会统一给所有 main 设为 --dm-bg-secondary；详情页主舞台应沿用页面底色 --hs-bg，避免正文与 body 形成色差。 */
body.hs-article-page main.hs-main {
    background: var(--hs-bg);
}
/* 归零全局 app.core.min.css 注入到 main:not(.md-home) 的 padding-top（修复 iPad 留白过大）
   根因：header.htm 在 body 内重复加载 app.core.min.css（带 version 参数，EyouCMS 不去重），
   加载顺序晚于 article-detail-v2.css，导致 @media(max-width:1280px) 的 calc(env+40+56)≈112px
   和 @media(max-width:900px) 的 20px 覆盖了文章页 main 的 padding。
   解法：用 body.custom-override main.hs-main（特异性 0-2-1，远高于 main:not(.md-home) 的 0-1-1），
   无视加载顺序稳定胜出。V3 Hero 是文档流布局，导航栏已通过 body padding-top 推开，
   main 无需再预留空间 */
@media (max-width: 1280px) {
    body.custom-override main.hs-main { padding-top: 0; }
}
@media (max-width: 900px) {
    body.custom-override main.hs-main { padding-top: 0; }
}
.hs-main *,
.hs-main *::before,
.hs-main *::after { box-sizing: border-box; }
.hs-main a { color: inherit; text-decoration: none; }
.hs-main img { max-width: 100%; height: auto; display: block; }

/* 屏幕阅读器专用 */
.hs-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   阅读进度条（顶部珊瑚细条）
   ============================================================ */
.hs-reading-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--hs-accent), var(--hs-accent-hover));
    z-index: var(--dm-z-sticky, 9100);
    transition: width 0.05s linear;
    box-shadow: 0 0 8px var(--hs-accent-glow);
}

/* ============================================================
   Toast 提示（替代 alert，非阻塞；自动反相适配亮/暗）
   ============================================================ */
.hs-toast {
    position: fixed;
    left: 50%;
    bottom: max(32px, env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 20px);
    z-index: var(--dm-z-toast, 10500);
    padding: 12px 22px;
    background: var(--hs-text);
    color: var(--hs-bg);
    font-size: 14px;
    line-height: 1.5;
    border-radius: var(--hs-radius-full);
    box-shadow: var(--hs-shadow-md);
    opacity: 0;
    transition: opacity var(--hs-dur) var(--hs-ease-out), transform var(--hs-dur) var(--hs-ease-out);
    pointer-events: none;
    max-width: calc(100vw - 32px);
}
.hs-toast--visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ============================================================
   Hero 区：白底文字 + 下方圆角大图（apple.com/newsroom 标准布局）
   ============================================================ */
.hs-hero {
    max-width: var(--hs-max-wide);
    margin: 0 auto;
    padding: var(--hs-space-xl) var(--hs-space-md) var(--hs-space-md);
}

/* 元信息条（栏目胶囊 + 图标化日期/来源/阅读量，标题上方）
   清新版设计：分类标签突出 + 三项元信息带图标 + 竖线分隔 + 阅读量珊瑚强调 */
.hs-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hs-space-sm);
    margin-bottom: var(--hs-space-md);
}

/* 栏目分类胶囊（珊瑚软底 + 脉冲点，最左侧视觉锚点） */
.hs-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--hs-accent-soft);
    color: var(--hs-accent);
    border-radius: var(--hs-radius-full);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.hs-hero-eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--hs-accent);
    animation: hs-dotPulse 2.2s ease-in-out infinite;
}
@keyframes hs-dotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* 元信息组：日期 / 来源 / 阅读量，水平排列 */
.hs-hero-meta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hs-space-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--hs-text-secondary);
}

/* 单个元信息项：图标 + 文字 */
.hs-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}
.hs-hero-meta-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
}
.hs-hero-meta-item time {
    font-variant-numeric: tabular-nums; /* 日期数字等宽对齐 */
}

/* 阅读量强调：珊瑚色（让数据有视觉权重） */
.hs-hero-meta-item--accent {
    color: var(--hs-accent);
    font-weight: 600;
}
.hs-hero-meta-item--accent .hs-hero-meta-icon {
    opacity: 1;
}

/* 竖线分隔符（比圆点更精致，Apple 系统风） */
.hs-hero-meta-sep {
    width: 1px;
    height: 12px;
    background: var(--hs-divider);
    flex-shrink: 0;
}

/* 标题（Apple HIG：系统无衬线、墨玉色、大字粗体、紧字距）
   字距 -0.022em 对标 apple.com/newsroom 实测值；
   中文比拉丁字距应略松，-0.03em 过紧影响可读性。
   宽度填满父容器（.hs-hero 内容宽，与头图同宽），不设 max-width。
   text-wrap: pretty（非 balance）：左对齐长标题优先填满前面的行，
   只让末行自然缩短，避免 balance 模式下每行都留白不填满。
   margin-bottom 收紧到 sm（16px），让标题与下方作者卡片视觉更紧凑 */
.hs-hero-title {
    font-size: clamp(30px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: 0;
    color: var(--hs-text);
    margin: 0 0 var(--hs-space-sm);
    text-wrap: pretty;
}

/* 导语摘要（Apple HIG：深色而非灰色，字号大于正文，行高紧凑）
   对标 apple.com 文章副标题：颜色用正文色（次要灰会让导语显得不重要），
   字号 19-22px（比正文 16px 大，体现层次），行高 1.5（比正文 1.75 紧凑）。
   宽度填满父容器（与标题/头图同宽），不设 max-width；
   text-wrap: pretty 让长导语前面的行优先填满，只让末行自然缩短 */
.hs-hero-lead {
    font-size: clamp(19px, 2vw, 22px);
    line-height: 1.5;
    font-weight: 400;
    color: var(--hs-text);
    margin: 0 0 var(--hs-space-lg);
    text-wrap: pretty;
}

/* 头图区（全宽圆角大图，放在标题下方白底区） */
.hs-hero-figure {
    margin: 0 0 var(--hs-space-lg);
    border-radius: var(--hs-radius-lg);
    overflow: hidden;
    box-shadow: var(--hs-shadow-md);
    background: var(--hs-bg-secondary);
}
.hs-hero-image {
    position: relative;
    overflow: hidden;
    /* 容器不固定比例，高度由图片原生比例撑开，确保图片完整显示不被裁切 */
    display: flex;
    justify-content: center;  /* 横向居中兜底（图片窄于容器时） */
    align-items: center;
    will-change: transform;
}
.hs-hero-image img {
    display: block;
    width: 100%;         /* 宽度撑满容器，高度按图片原生比例自动计算 */
    height: auto;        /* 保持原生比例，完整显示，不裁切 */
    max-height: 70vh;    /* 极端高图封顶，避免占满首屏（不裁切，等比缩放） */
    object-fit: contain; /* 万一 width/height 受其他规则干扰，contain 兜底不裁切 */
    transition: transform var(--hs-dur-slow) var(--hs-ease-out);
}
.hs-hero-image:hover img {
    transform: scale(1.02);
}
.hs-hero-figcaption {
    padding: var(--hs-space-sm) var(--hs-space-md);
    font-size: 13px;
    color: var(--hs-text-secondary);
    line-height: 1.5;
    text-align: center;
}

/* Hero 入场动画 */
.hs-hero-eyebrow,
.hs-hero-title,
.hs-hero-lead,
.hs-hero-figure {
    opacity: 0;
    transform: translateY(20px);
    animation: hs-heroIn 0.8s var(--hs-ease-out) forwards;
}
.hs-hero-eyebrow { animation-delay: 0.1s; }
.hs-hero-title { animation-delay: 0.2s; }
.hs-hero-lead { animation-delay: 0.35s; }
.hs-hero-figure { animation-delay: 0.5s; }
@keyframes hs-heroIn {
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hs-hero-eyebrow,
    .hs-hero-title,
    .hs-hero-lead,
    .hs-hero-figure,
    .hs-hero-author {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .hs-hero-eyebrow-dot { animation: none; }
}

/* ============================================================
   文章正文区（680px 居中，Apple 阅读体验）
   ============================================================ */
.hs-article-wrap {
    /* 宽度跟随头图（与 Hero/figure 同宽 var(--hs-max-wide)），位置一致（居中容器） */
    max-width: var(--hs-max-wide);
    margin: 0 auto;
    padding: 0 var(--hs-space-md) var(--hs-space-xl);
}
.hs-article-body {
    font-size: 16px;
    line-height: 1.75;
    color: var(--hs-text);
    letter-spacing: 0.01em;
}
.hs-article-body > *:first-child { margin-top: 0; }
.hs-article-body p {
    margin: 0 0 var(--hs-space-md);
}
.hs-article-body .hs-content-tags-source {
    display: none;
}
.hs-article-body h2 {
    font-size: clamp(22px, 2.8vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--hs-text);
    margin: var(--hs-space-xl) 0 var(--hs-space-sm);
}
.hs-article-body h3 {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 600;
    color: var(--hs-text);
    margin: var(--hs-space-lg) 0 var(--hs-space-sm);
}
.hs-article-body a {
    color: var(--hs-accent);
    text-decoration: underline;
    text-decoration-color: var(--hs-accent-soft);
    text-underline-offset: 3px;
    transition: color var(--hs-dur-fast) var(--hs-ease-out), text-decoration-color var(--hs-dur-fast) var(--hs-ease-out);
}
.hs-article-body a:hover {
    color: var(--hs-accent-hover);
    text-decoration-color: var(--hs-accent);
}
.hs-article-body strong,
.hs-article-body b {
    font-weight: 600;
    color: var(--hs-text);
}

/* Drop Cap 首字下沉（珊瑚色大字，编辑感） */
.hs-article-body > p:first-of-type::first-letter {
    font-size: 3.5em;
    font-weight: 700;
    line-height: 0.85;
    float: left;
    margin: 0.05em 0.1em 0 0;
    color: var(--hs-accent);
}

/* 图片 + 图注 */
.hs-article-body figure {
    margin: var(--hs-space-lg) 0;
    border-radius: var(--hs-radius-md);
    overflow: hidden;
    background: var(--hs-bg-secondary);
}
.hs-article-body figure img {
    width: 100%;
    border-radius: var(--hs-radius-md);
    transition: transform var(--hs-dur-slow) var(--hs-ease-out);
}
.hs-article-body figure:hover img {
    transform: scale(1.02);
}
.hs-article-body figcaption {
    padding: var(--hs-space-xs) var(--hs-space-sm);
    font-size: 13px;
    color: var(--hs-text-secondary);
    line-height: 1.5;
    text-align: center;
}
.hs-article-body img {
    border-radius: var(--hs-radius-md);
}

/* 引用块（左侧珊瑚条 + 软底，广泛应用珊瑚） */
.hs-article-body blockquote,
.hs-article-body .pullquote {
    margin: var(--hs-space-lg) 0;
    padding: var(--hs-space-md) var(--hs-space-lg);
    background: var(--hs-accent-soft);
    border-left: 3px solid var(--hs-accent);
    border-radius: 0 var(--hs-radius-md) var(--hs-radius-md) 0;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.6;
    font-weight: 500;
    color: var(--hs-text);
}
.hs-article-body blockquote p,
.hs-article-body .pullquote p {
    margin: 0;
}

/* 列表 */
.hs-article-body ul,
.hs-article-body ol {
    margin: 0 0 var(--hs-space-md);
    padding-left: var(--hs-space-lg);
}
.hs-article-body li {
    margin-bottom: var(--hs-space-xs);
    line-height: 1.75;
}

/* 富文本行内 width 约束（覆盖后台编辑器残留的 style="width:1275px" 等硬编码宽度）
   原因：后台富文本编辑器会给 ul/ol/table/img 插入固定像素 width（如 1275.75px），
   这些值在窄屏或当前正文列宽下会溢出容器，产生横向滚动条和边框断裂。
   用 !important 强制约束在正文容器内，box-sizing 确保 padding 含在宽度内。
   按项目规范，此处 !important 已加中文注释说明原因 */
.hs-article-body ul,
.hs-article-body ol,
.hs-article-body table,
.hs-article-body img {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.hs-article-body ul[style*="width"],
.hs-article-body ol[style*="width"],
.hs-article-body table[style*="width"] {
    width: 100% !important; /* 行内 width 的 ul/table 改为满容器宽 */
}
.hs-article-body img[style*="width"] {
    width: auto !important; /* 行内 width 的图片改为自适应，配合 max-width:100% 等比缩放 */
    height: auto !important;
}

/* 富文本行内字体/字号覆盖（覆盖后台编辑器残留的微软雅黑、自定义字号）
   原因：UEditor 粘贴时给 span 加 style="font-family:微软雅黑"，与全站系统字体冲突，
   导致同页两种字体混排；字号行内定义也与 CSS 梯度打架。
   强制 inherit 让文字继承 .hs-article-body 的字体和字号。
   按项目规范，此处 !important 已加中文注释说明原因 */
.hs-article-body [style*="font-family"] {
    font-family: inherit !important;
}
.hs-article-body [style*="font-size"] {
    font-size: inherit !important;
}
.hs-article-body [style*="line-height"] {
    line-height: inherit !important;
}
/* h2/h3/h4 标题的行内字号也覆盖（让标题用 CSS 定义的 clamp 字号） */
.hs-article-body h2[style*="font-size"],
.hs-article-body h3[style*="font-size"],
.hs-article-body h4[style*="font-size"] {
    font-size: inherit !important;
}
/* color 保留（品牌红强调等行内颜色有意为之，不覆盖） */

/* 表格（补全原 V2 缺失的表格样式：发丝边框 + 斑马纹 + 珊瑚表头） */
.hs-article-body table {
    width: 100%;
    margin: var(--hs-space-lg) 0;
    border-collapse: collapse;
    border-radius: var(--hs-radius-md);
    overflow: hidden;
    box-shadow: var(--hs-shadow-sm);
    font-size: 15px;
}
.hs-article-body thead {
    background: var(--hs-accent);
    color: var(--hs-on-accent);
}
.hs-article-body th {
    padding: var(--hs-space-sm);
    text-align: left;
    font-weight: 600;
}
.hs-article-body td {
    padding: var(--hs-space-sm);
    border-top: 1px solid var(--hs-border);
    color: var(--hs-text);
}
.hs-article-body tbody tr:nth-child(even) {
    background: var(--hs-bg-secondary);
}
.hs-article-body tbody tr:hover {
    background: var(--hs-accent-soft);
}

/* 分隔线 */
.hs-article-body hr {
    border: none;
    height: 1px;
    background: var(--hs-divider);
    margin: var(--hs-space-xl) 0;
}

/* 代码块（兼容富文本） */
.hs-article-body code {
    font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
    padding: 2px 6px;
    background: var(--hs-bg-secondary);
    border-radius: 4px;
    color: var(--hs-accent);
}
.hs-article-body pre {
    margin: var(--hs-space-md) 0;
    padding: var(--hs-space-md);
    background: var(--hs-bg-secondary);
    border-radius: var(--hs-radius-md);
    overflow-x: auto;
}
.hs-article-body pre code {
    padding: 0;
    background: none;
    color: var(--hs-text);
}

/* ============================================================
   文章底部：标签 + 分享 + 作者
   ============================================================ */
.hs-article-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hs-space-sm);
    margin-top: 0;
    padding-top: var(--hs-space-lg);
    border-top: 1px solid var(--hs-divider);
}
/* 标签区和分享区各占一侧；移动端窄屏自动折行 */
.hs-article-footer .hs-article-tags {
    margin-bottom: 0;
}
.hs-article-footer .hs-article-share {
    margin-bottom: 0;
}

.hs-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hs-space-xs);
    margin-bottom: var(--hs-space-md);
}
.hs-article-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--hs-bg-secondary);
    color: var(--hs-text-secondary);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--hs-radius-full);
    transition: background var(--hs-dur-fast) var(--hs-ease-out), color var(--hs-dur-fast) var(--hs-ease-out);
}
a.hs-article-tag { cursor: pointer; }
a.hs-article-tag:hover {
    background: var(--hs-accent);
    color: var(--hs-on-accent);
}

/* ============================================================
   分享功能（主按钮 + 展开面板，Apple/Medium 风格）
   ============================================================ */
.hs-article-share {
    position: relative;
    margin-bottom: var(--hs-space-lg);
}

/* 分享主按钮（珊瑚填充，Apple 胶囊按钮风格） */
.hs-share-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: none;
    border-radius: var(--hs-radius-full);
    background: var(--hs-accent);
    color: var(--hs-on-accent);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--hs-dur-fast) var(--hs-ease-out), transform var(--hs-dur-fast) var(--hs-ease-out), box-shadow var(--hs-dur-fast) var(--hs-ease-out);
    box-shadow: var(--hs-shadow-sm);
}
.hs-share-trigger-icon {
    width: 18px;
    height: 18px;
}
.hs-share-trigger:hover {
    background: var(--hs-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--hs-shadow-md);
}
.hs-share-trigger:focus-visible {
    outline: 2px solid var(--hs-accent);
    outline-offset: 3px;
}
/* 展开状态：图标旋转 */
.hs-share-trigger[aria-expanded="true"] .hs-share-trigger-icon {
    transform: rotate(90deg);
    transition: transform var(--hs-dur) var(--hs-ease-out);
}

/* 展开面板（绝对定位，浮在按钮上方） */
.hs-share-panel {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    z-index: var(--dm-z-dropdown, 9000);
    min-width: 340px;
    padding: var(--hs-space-md);
    background: var(--hs-surface);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-lg);
    box-shadow: var(--hs-shadow-lg);
    /* 展开动画 */
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transform-origin: bottom left;
    transition: opacity var(--hs-dur) var(--hs-ease-out), transform var(--hs-dur) var(--hs-ease-out);
    pointer-events: none;
}
.hs-share-panel:not([hidden]) {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* 微信二维码区 */
.hs-share-qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: var(--hs-space-sm);
    margin-bottom: var(--hs-space-sm);
    border-bottom: 1px solid var(--hs-divider);
}
.hs-share-qrcode-img {
    width: 140px;
    height: 140px;
    background: var(--hs-bg-secondary);
    border-radius: var(--hs-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hs-share-qrcode-img img,
.hs-share-qrcode-img canvas {
    width: 100%;
    height: 100%;
}
.hs-share-qrcode-tip {
    margin: var(--hs-space-xs) 0 0;
    font-size: 12px;
    color: var(--hs-text-secondary);
}

/* 社交平台图标网格（3 列） */
.hs-share-channels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hs-space-xs);
    margin-bottom: var(--hs-space-sm);
}
.hs-share-channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--hs-space-xs) 4px;
    border: none;
    background: transparent;
    color: var(--hs-text);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    border-radius: var(--hs-radius-sm);
    transition: background var(--hs-dur-fast) var(--hs-ease-out);
}
.hs-share-channel:hover {
    background: var(--hs-bg-secondary);
}
.hs-share-channel:focus-visible {
    outline: 2px solid var(--hs-accent);
    outline-offset: 2px;
}
.hs-share-channel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
}
.hs-share-channel-icon svg {
    width: 22px;
    height: 22px;
}
/* 各平台品牌色 */
.hs-share-channel-icon--wechat { background: #07c160; }
.hs-share-channel-icon--weibo { background: #e6162d; }
.hs-share-channel-icon--qq { background: #12b7f5; }
.hs-share-channel-icon--qzone { background: #fece00; color: #1d1d1f; }
.hs-share-channel-icon--copy { background: var(--hs-text); }
.hs-share-channel-icon--native { background: var(--hs-text-secondary); }
.hs-share-channel-name {
    color: var(--hs-text-secondary);
    font-weight: 500;
}

/* 复制链接快捷框 */
.hs-share-copybox {
    display: flex;
    gap: var(--hs-space-xs);
    padding-top: var(--hs-space-sm);
    border-top: 1px solid var(--hs-divider);
}
.hs-share-copybox-input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-sm);
    background: var(--hs-bg-secondary);
    color: var(--hs-text-secondary);
    font-size: 13px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.hs-share-copybox-input:focus {
    outline: none;
    border-color: var(--hs-accent);
}
.hs-share-copybox-btn {
    flex-shrink: 0;
    padding: 8px 18px;
    border: none;
    border-radius: var(--hs-radius-sm);
    background: var(--hs-accent);
    color: var(--hs-on-accent);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--hs-dur-fast) var(--hs-ease-out);
}
.hs-share-copybox-btn:hover {
    background: var(--hs-accent-hover);
}

/* 移动端：隐藏整个分享功能（按钮 + 面板），仅保留标签 */
@media (max-width: 767px) {
    .hs-article-share {
        /* 整个分享区域不展示，DOM 保留供 PC 端与降级 */
        display: none;
    }
    .hs-share-panel {
        /* 兼容性兜底：面板同样隐藏 */
        display: none;
    }
}

/* 作者卡片 */
.hs-author-card {
    display: flex;
    align-items: center;
    gap: var(--hs-space-md);
    padding: var(--hs-space-md);
    background: var(--hs-bg-secondary);
    border-radius: var(--hs-radius-lg);
}
.hs-author-card-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.hs-author-card-info { flex: 1; min-width: 0; }
.hs-author-card-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--hs-text);
    margin: 0 0 2px;
}
.hs-author-card-role {
    font-size: 13px;
    color: var(--hs-accent);
    font-weight: 600;
    margin: 0 0 var(--hs-space-xs);
}
.hs-author-card-bio {
    font-size: 14px;
    color: var(--hs-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* 作者卡片 + 元信息 并排容器（左作者 + 右元信息，各自独立卡片，stretch 等高） */
.hs-hero-author-row {
    display: flex;
    align-items: stretch;  /* 左右等高对齐 */
    gap: var(--hs-space-md);
    margin-bottom: var(--hs-space-md);
}
.hs-hero-author-row .hs-hero-author {
    flex: 1;            /* 左侧作者卡片弹性宽度 */
    margin: 0;          /* 移除独立时的 margin（由 row 容器统一控制） */
}

/* 元信息竖排变体（放在作者卡片右侧，与作者卡片等高对齐）
   改 flex-direction 为 column，竖线分隔符隐藏（改用 gap 间距） */
.hs-hero-meta--side {
    flex: 0 0 200px;    /* 固定窄列 */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hs-space-sm);
    margin: 0;          /* 移除独立时的 margin */
    padding: 20px;      /* 与作者卡片同 padding */
    background: var(--hs-surface);
    border-radius: var(--hs-radius-lg);
    box-shadow: var(--hs-shadow-sm);
    font-size: 13px;
}
.hs-hero-meta--side .hs-hero-meta-group {
    flex-direction: column;
    align-items: flex-start;  /* 覆盖基础规则的 center：竖排下交叉轴改横向左对齐，避免短文本居中导致左边缘不齐 */
    gap: var(--hs-space-sm);
}
.hs-hero-meta--side .hs-hero-meta-sep {
    display: none;      /* 竖排时隐藏竖线分隔符 */
}

/* Hero 区作者卡片（移至标题下方，1:1 复刻设计稿卡片样式）
   白色背景 + 圆角 + 轻阴影卡片；横向排列（logo 左、文字右）；
   align-items: center 让 logo 和文字在卡片高度内垂直居中。
   跟随 Hero 入场动画（在 lead 之后淡入） */
.hs-hero-author {
    align-items: center;
    gap: var(--hs-space-sm);
    padding: 20px;
    margin: 0 0 var(--hs-space-md);
    background: var(--hs-surface);
    border-radius: var(--hs-radius-lg);
    box-shadow: var(--hs-shadow-sm);
    opacity: 0;
    transform: translateY(20px);
    animation: hs-heroIn 0.8s var(--hs-ease-out) 0.45s forwards;
}
/* 品牌 logo 容器（横版圆角矩形，适配 1408×768 透明背景品牌主视觉）
   解法：容器自带背景色（日间白/暗黑深）+ 圆角 + 边框，
   img 设为透明背景的覆盖层（background:none），让容器背景透过图片透明像素显示。
   注意：不能给 img 设 background，因为 object-fit:contain 时图片会覆盖 img 的 background，
   即使图片像素透明也不会显示 img 背景色（浏览器用透明像素"遮住"了 background）。
   正确做法是容器有背景 + 图片本身 background:none 透明覆盖。 */
.hs-hero-author .hs-author-card-logo {
    flex-shrink: 0;
    width: 200px;
    height: 110px;
    /* 容器背景：日间白底、暗黑自动跟随 --dm-bg 变深底，让透明 logo 可见 */
    background: var(--dm-bg);
    border: 1px solid var(--dm-border);
    border-radius: var(--hs-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}
.hs-hero-author .hs-author-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 图片本身不设背景，让容器背景透过透明像素显示 */
    background: none;
    border: none;
    border-radius: 0;
}

/* 手机端 logo 克隆：桌面/平板默认隐藏，仅 ≤767px 在 meta 容器右侧居中显示。
   用克隆而非物理移动：原 logo 必须留在 aside.hs-author-card 内，桌面端作者卡片是
   logo左+文字右 横向布局，物理移走会让桌面/平板永久丢 logo。 */
.hs-mobile-logo {
    display: none;
}
.hs-hero-author .hs-author-card-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--hs-text);
    margin: 0 0 2px;
}
.hs-hero-author .hs-author-card-role {
    font-size: 15px;
    color: var(--hs-accent);
    font-weight: 600;
    margin: 0 0 var(--hs-space-xs);
}
.hs-hero-author .hs-author-card-bio {
    display: block;
    font-size: 15px;
    color: var(--hs-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* 平板与 PC：恢复上图下文卡片，手机端才使用左图右文列表。 */
@media (min-width: 768px) {
    .hs-related-card-inner {
        display: block;
    }
    .hs-related-card-image {
        height: auto;
        aspect-ratio: 3 / 2;
    }
}

/* ============================================================
   特性卡区（3 列，Apple 简洁卡片）
   ============================================================ */
.hs-feature-band {
    max-width: var(--hs-max-wide);
    margin: 0 auto;
    padding: 60px var(--hs-space-md) 0;
}
.hs-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hs-space-md);
}
.hs-feature-card {
    padding: var(--hs-space-lg) var(--hs-space-md);
    background: var(--hs-surface);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-lg);
    text-align: left;
    transition: transform var(--hs-dur) var(--hs-ease-out), box-shadow var(--hs-dur) var(--hs-ease-out);
}
.hs-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hs-shadow-md);
}
.hs-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    margin: 0 auto var(--hs-space-sm);
    background: var(--hs-accent-soft);
    color: var(--hs-accent);
    border-radius: var(--hs-radius-sm);
}
.hs-feature-icon svg { width: 26px; height: 26px; }
.hs-feature-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--hs-text);
    margin: 0 0 var(--hs-space-xs);
    text-align: center;
}
.hs-feature-text {
    font-size: 14px;
    color: var(--hs-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   上下篇导航（两等分卡片）
   ============================================================ */
.hs-nav-wrap {
    max-width: var(--hs-max-wide);
    margin: 0 auto;
    padding: 0 var(--hs-space-md) 0;
}
.hs-nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hs-space-md);
}
.hs-nav-link {
    display: flex;
    flex-direction: column;
    gap: var(--hs-space-xs);
    padding: var(--hs-space-md);
    background: var(--hs-surface);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-lg);
    transition: transform var(--hs-dur) var(--hs-ease-out), box-shadow var(--hs-dur) var(--hs-ease-out);
    min-height: 44px;
}
.hs-nav-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--hs-shadow-md);
}
.hs-nav-link--next { text-align: right; }
.hs-nav-link--disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}
.hs-nav-link-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--hs-accent);
    text-transform: uppercase;
}
.hs-nav-link-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--hs-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   相关阅读（3 列简洁卡片，保留 3D 倾斜 DOM 结构）
   ============================================================ */
.hs-related {
    background: var(--hs-bg-secondary);
    padding: 60px var(--hs-space-md);
}
.hs-related-inner {
    max-width: var(--hs-max-wide);
    margin: 0 auto;
}
.hs-related-header {
    text-align: center;
    margin-bottom: var(--hs-space-lg);
}
.hs-related-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hs-accent);
    margin-bottom: var(--hs-space-xs);
}
.hs-related-title {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: var(--hs-text);
    margin: 0;
}
/* 相关阅读轨道：单列布局，Swiper 轮播占满宽度
   桌面端无导航按钮，用户靠鼠标拖拽（grabCursor）切换 */
.hs-related-track {
    display: grid;
    grid-template-columns: 1fr;  /* 单列，swiper 占满宽度 */
    align-items: center;
    gap: 12px;
}
/* 相关阅读 Swiper 容器：只负责轮播区域，overflow:hidden 截断溢出的卡片
   按钮已在容器外（track 的兄弟节点），不再需要为按钮留 padding。
   关键：作为 grid 的 1fr 列子元素，必须同时设 width/max-width/min-width，
   否则内容（flex wrapper + flex-shrink:0 的 slides）会把容器撑爆到天文数字 px，
   导致 Swiper 按 3355万px 计算每张 slide 宽度（实测 bug，2026-06-19） */
.hs-related-swiper {
    position: relative;
    overflow: hidden;
    width: 100%;        /* 填满 grid 的 1fr 列（track 中间列） */
    max-width: 100%;    /* 双保险：内容再宽也不超过列宽 */
    min-width: 0;       /* 允许内容收缩，防止 grid item 撑破 */
}
.hs-related-grid {
    /* Swiper wrapper 由 JS 接管为 flex，这里只兜底 */
    display: flex;
    gap: 0;  /* Swiper 用 spaceBetween 控制间距，不用 gap */
}

/* 相关卡：作为 Swiper slide + 3D 倾斜容器（角度由 JS 控制降到 4°） */
.hs-related-card {
    height: auto;  /* Swiper slide 默认等高 */
    perspective: 800px;
}
.hs-related-card-inner {
    position: relative;
    background: var(--hs-surface);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-lg);
    overflow: hidden;
    transition: transform 0.4s var(--hs-ease-out), box-shadow var(--hs-dur) var(--hs-ease-out);
    transform-style: preserve-3d;
}
.hs-related-card:hover .hs-related-card-inner {
    box-shadow: var(--hs-shadow-md);
}
.hs-related-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--hs-bg-secondary);
}
.hs-related-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--hs-dur-slow) var(--hs-ease-out);
}
.hs-related-card:hover .hs-related-card-image img {
    transform: scale(1.05);
}
.hs-related-card-category {
    position: absolute;
    top: var(--hs-space-xs);
    left: var(--hs-space-xs);
    padding: 4px 10px;
    background: var(--hs-accent);
    color: var(--hs-on-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: var(--hs-radius-full);
    backdrop-filter: blur(8px);
}
.hs-related-card-body {
    padding: var(--hs-space-md);
}
.hs-related-card-date {
    font-size: 12px;
    color: var(--hs-text-secondary);
    margin-bottom: var(--hs-space-xs);
}
.hs-related-card-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--hs-text);
    margin: 0 0 var(--hs-space-xs);
    /* 相关阅读标题统一单行，溢出省略，避免卡片高度被长标题撑乱 */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--hs-dur-fast) var(--hs-ease-out);
}
.hs-related-card:hover .hs-related-card-title {
    color: var(--hs-accent);
}
.hs-related-card-excerpt {
    font-size: 14px;
    color: var(--hs-text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Swiper 分页圆点（默认隐藏，仅移动端可见）
   覆盖 Swiper 默认蓝色圆点，改为珊瑚色激活态 */
.hs-related-pagination {
    position: relative;
    margin-top: var(--hs-space-md);
    display: none;  /* 默认隐藏：桌面端用左右导航按钮 */
    justify-content: center;
    gap: 6px;
    line-height: 0;
}
.hs-related-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: var(--hs-border);
    opacity: 1;  /* 未激活圆点也保持可见 */
    border-radius: 50%;
    margin: 0 !important;  /* 覆盖 Swiper 默认 margin */
    transition: background var(--hs-dur-fast) var(--hs-ease-out),
                width var(--hs-dur-fast) var(--hs-ease-out);
    cursor: pointer;
}
.hs-related-pagination .swiper-pagination-bullet-active {
    background: var(--hs-accent);  /* 珊瑚色激活态 */
    width: 20px;  /* 激活态拉长为胶囊，强化"当前位置"视觉 */
    border-radius: 4px;
}

/* ============================================================
   滚动揭示动画（IntersectionObserver 触发 .hs-visible）
   ============================================================ */
.hs-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--hs-ease-out), transform 0.8s var(--hs-ease-out);
}
.hs-reveal.hs-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .hs-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   响应式断点
   ============================================================ */

/* 平板 768-1023px：Hero 上间距收紧
   （平板下导航栏较矮，hero padding-top 从 48px 收到 28px，
    避免 nav 让位 + hero padding 叠加导致 gap 过大）
   注意：相关卡列数由 Swiper JS breakpoints 控制（768→2张），不在 CSS 处理，
   .hs-related-grid 即 .swiper-wrapper，禁止用 grid 覆盖 Swiper 的 flex 布局 */
@media (max-width: 1023px) {
    .hs-hero {
        padding-top: 28px;
    }
}

/* 手机 ≤767px：单列布局 */
@media (max-width: 767px) {
    .hs-hero {
        padding: var(--hs-space-md) var(--hs-space-sm) var(--hs-space-sm);
    }
    .hs-hero-title {
        font-size: clamp(26px, 7vw, 36px);
    }
    .hs-hero-lead {
        font-size: 17px;
    }
    .hs-hero-figure {
        border-radius: var(--hs-radius-md);
    }

    /* 元信息条：窄屏下栏目胶囊独占一行，元信息组折到下一行；竖线分隔符隐藏改用 gap */
    .hs-hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--hs-space-xs);
    }
    .hs-hero-meta-group {
        gap: var(--hs-space-xs);
        font-size: 12px;
    }
    .hs-hero-meta-sep {
        display: none;
    }

    /* 作者+元信息并排容器：窄屏折回上下排列 */
    .hs-hero-author-row {
        flex-direction: column;
        gap: 0;
    }
    .hs-hero-author-row .hs-hero-author {
        margin-bottom: 15px;
    }
    .hs-hero-author .hs-author-card-bio {
        text-align: left;
    }
    .hs-hero-meta--side {
        flex: none;   /* 折行后不再固定宽度 */
        /* 方案a：顶行 [胶囊左 + logo右] 顶部对齐，下方 [元信息组左列] 竖排（用 grid）。
           元信息组由 .hs-hero-meta-group wrapper 包裹成单个 grid item，免疫项数变化。 */
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: var(--hs-space-sm);
        padding: 12px;  /* 手机端收紧 meta 内边距（桌面 20px），缩短 author↔meta 内容的视觉间距 */
    }
    /* 栏目胶囊：左列第一行，顶部对齐（与 logo 同行顶端齐平） */
    .hs-hero-meta--side .hs-hero-eyebrow {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        justify-self: start;
    }
    /* 元信息组：左列第二行，竖排 */
    .hs-hero-meta--side .hs-hero-meta-group {
        display: contents;
    }
    .hs-hero-meta--side .hs-hero-meta-group > .hs-hero-meta-item:nth-child(1),
    .hs-hero-meta--side .hs-hero-meta-group > .hs-hero-meta-item:nth-child(2) {
        grid-column: 1;
        align-self: center;
    }
    .hs-hero-meta--side .hs-hero-meta-group > .hs-hero-meta-item:nth-child(1) {
        grid-row: 2;
    }
    .hs-hero-meta--side .hs-hero-meta-group > .hs-hero-meta-item:nth-child(2) {
        grid-row: 3;
        white-space: nowrap;
    }
    .hs-hero-meta--side .hs-hero-meta-group > .hs-hero-meta-item--accent {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        justify-self: end;
    }
    /* logo 克隆：右列跨 row2+row3，阅读数独占右上角，避免与 logo 重叠。 */
    .hs-hero-meta--side .hs-mobile-logo {
        display: flex;
        flex-shrink: 0;
        grid-column: 2;
        grid-row: 2 / span 2;
        align-self: center;      /* 在跨行的右列中垂直居中 */
        justify-self: end;
        width: 132px;
        height: 72px;
        background: var(--dm-bg);
        border: 1px solid var(--dm-border);
        border-radius: var(--hs-radius-sm);
        align-items: center;
        justify-content: center;
        overflow: hidden;
        box-sizing: border-box;
    }
    .hs-hero-meta--side .hs-mobile-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: none;
        border: none;
    }

    /* 手机端隐藏作者卡片内的原 logo：避免与新克隆的 meta 内 logo 同屏重复显示。
       文字信息（胡sir/主理人/简介）保留，原 logo 仅在桌面/平板作者卡片内显示。 */
    .hs-hero-author .hs-author-card-logo {
        display: none;
    }

    .hs-article-wrap {
        /* 小屏覆盖桌面 1200px 宽度，避免正文宽于视口 */
        max-width: 100%;
        padding: 0 var(--hs-space-sm) var(--hs-space-lg);
    }
    .hs-article-body {
        font-size: 15px;
    }
    /* Drop Cap 移动端缩小 */
    .hs-article-body > p:first-of-type::first-letter {
        font-size: 2.8em;
    }

    .hs-author-card {
        flex-direction: column;
        text-align: center;
        gap: var(--hs-space-sm);
    }

    /* 手机端 3 列紧凑卡片：上下留白收紧到 16px，避免卡片矮而留白过大 */
    .hs-feature-band {
        padding-top: var(--hs-space-sm);
        padding-bottom: var(--hs-space-sm);
    }

    /* 手机端保持 3 列自适应：收紧间距，卡片内容随屏宽缩放 */
    .hs-feature-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(6px, 2vw, 10px);
    }
    .hs-feature-card {
        padding: clamp(8px, 3vw, 14px) clamp(4px, 1.5vw, 8px);
    }
    .hs-feature-icon {
        width: clamp(32px, 9vw, 44px);
        height: clamp(32px, 9vw, 44px);
        margin-bottom: clamp(4px, 1.5vw, 8px);
    }
    .hs-feature-icon svg {
        width: clamp(16px, 4.5vw, 22px);
        height: clamp(16px, 4.5vw, 22px);
    }
    .hs-feature-title {
        font-size: clamp(12px, 3.2vw, 15px);
        margin-bottom: clamp(2px, 1vw, 4px);
    }
    .hs-feature-text {
        font-size: clamp(10px, 2.6vw, 12px);
        line-height: 1.45;
    }
    /* 手机端取消轮播，按新闻列表展示最新 3 条。 */
    .hs-related-swiper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
    }
    .hs-related-grid {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
        min-width: 0;
        margin-bottom: 20px;
        transform: none !important;
    }
    .hs-related-card {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        flex-shrink: 1;
    }
    .hs-related-card:nth-child(n + 4) {
        display: none;
    }
    .hs-related-card-inner {
        display: grid;
        grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: auto;
    }
    .hs-related-card-inner > .hs-card-shine {
        display: none;
    }
    .hs-related-card-image {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        align-self: start;
        aspect-ratio: 2 / 1;
    }
    .hs-related-card-body {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        padding: 16px;
    }
    .hs-related-card-image img {
        display: block;
        max-width: 100%;
        height: 100%;
    }
    .hs-related-pagination {
        display: none;
    }
    /* 手机端：收紧导航底部留白 48px → 24px，与下方紧凑区块衔接 */
    .hs-nav-wrap {
        padding-bottom: var(--hs-space-md);
    }
    /* 手机端：收紧延伸阅读区上方留白 64px → 24px，与上方紧凑区块衔接 */
    .hs-related {
        padding-top: var(--hs-space-md);
    }
    .hs-nav-links {
        grid-template-columns: 1fr;
    }
    .hs-nav-link--next {
        text-align: left;
    }
}

/* ============================================================
   B 站视频嵌入（响应式 16:9，圆角，与正文图片风格统一）
   由 article-detail-v2.js 的 convertBilibiliLinks() 自动生成
   ============================================================ */
.hs-bilibili-embed {
    margin: var(--hs-space-lg) 0;
    border-radius: var(--hs-radius-md);
    overflow: hidden;
    box-shadow: var(--hs-shadow-sm);
    background: var(--hs-bg-secondary);
}
.hs-bilibili-ratio {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;  /* 16:9 比例锁定，防止加载抖动（CLS） */
    height: 0;
}
.hs-bilibili-ratio iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* 移动端缩小外边距 */
@media (max-width: 767px) {
    .hs-bilibili-embed {
        margin: var(--hs-space-md) 0;
        border-radius: var(--hs-radius-sm);
    }
}

/* ============================================================
   内容页 V3 最终收口：固定字号、72ch 阅读轨、8px 卡片与自然比例主媒体。
   ============================================================ */
.hs-main {
    --hs-radius-sm: 8px;
    --hs-radius-md: 8px;
    --hs-radius-lg: 8px;
    --hs-radius-xl: 8px;
    /* 详情页底部与页脚衔接：不再额外垫 24px，避免延伸阅读与 footer 之间出现空带 */
    padding-bottom: 0;
    font-size: 16px;
    line-height: 1.7;
}

.hs-hero-title {
    max-width: var(--hs-rail-prose, 72ch);
    font-size: var(--hs-fs-display, 32px);
    line-height: 1.15;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.hs-hero-figure,
.hs-hero-image {
    aspect-ratio: auto;
    border-radius: 8px;
}

.hs-hero-image img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}

.hs-article-wrap {
    /* 外层与头图共用宽列，正文在桌面端沿用同一内容区边界。 */
    max-width: var(--hs-max-wide);
    padding-bottom: 0;
}

.hs-article-body {
    width: min(100%, var(--hs-rail-prose, 72ch));
    max-width: var(--hs-rail-prose, 72ch);
    margin-inline: auto;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0;
}

/* 横排导航端：正文铺满文章外层的内容区，和头图保持同一条左右边界。 */
@media (min-width: 834px) {
    .hs-article-body {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }
}

.hs-article-body p,
.hs-article-body li {
    font-size: 16px;
    line-height: 1.7;
}

/* 富文本行内字号规则带 !important，标题层级必须同级覆盖才能稳定落到 V3。 */
.hs-article-body h2,
.hs-article-body h2[style*="font-size"],
.hs-article-body h2[style*="line-height"] {
    font-size: var(--hs-fs-title-l, 26px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0;
    text-wrap: balance;
}

.hs-related-title {
    font-size: var(--hs-fs-title-l, 26px);
    line-height: 1.25;
    letter-spacing: 0;
    text-wrap: balance;
}

.hs-article-body figure,
.hs-article-body figure img,
.hs-article-body img,
.hs-article-body table,
.hs-article-body pre,
.hs-bilibili-embed,
.hs-author-card,
.hs-hero-meta--side,
.hs-feature-card,
.hs-nav-link,
.hs-related-card-inner {
    border-radius: 8px;
}

.hs-article-body blockquote,
.hs-article-body .pullquote {
    border: 1px solid color-mix(in srgb, var(--hs-accent) 28%, var(--hs-border));
    border-radius: 8px;
}

.hs-related-card-image {
    aspect-ratio: 3 / 2;
}

.hs-related-empty {
    display: grid;
    min-height: 180px;
    align-content: center;
    gap: 4px;
    padding: 32px 24px;
    border: 1px solid var(--hs-border);
    border-radius: 8px;
    color: var(--hs-text-secondary);
    background: var(--hs-surface);
    font-size: 16px;
    line-height: 1.7;
    text-align: center;
}

.hs-related-empty strong {
    color: var(--hs-text);
    font-size: 20px;
}

/* 系统暗黑与手动暗黑显式对称，颜色值继续来自全站 --dm-*。 */
@media (prefers-color-scheme: dark) {
    html:not(.husir-light) .hs-main {
        --hs-bg: var(--dm-bg);
        --hs-bg-secondary: var(--dm-bg-secondary);
        --hs-surface: var(--dm-bg-elevated);
        --hs-text: var(--dm-text);
        --hs-text-secondary: var(--dm-text-secondary);
        --hs-text-tertiary: var(--dm-text-tertiary);
        --hs-border: var(--dm-border);
        --hs-divider: var(--dm-divider);
        --hs-accent: var(--dm-accent);
        --hs-accent-hover: var(--dm-accent-hover);
        --hs-accent-soft: var(--dm-accent-soft);
        --hs-on-accent: var(--dm-on-accent);
    }

    /* 延伸阅读与详情主舞台同属页面底色，避免与上方特性区出现横向色带；卡片仍使用 --hs-surface 保留层级。 */
    html:not(.husir-light) .hs-related {
        background: var(--dm-bg);
    }
}

html.husir-dark .hs-main {
    --hs-bg: var(--dm-bg);
    --hs-bg-secondary: var(--dm-bg-secondary);
    --hs-surface: var(--dm-bg-elevated);
    --hs-text: var(--dm-text);
    --hs-text-secondary: var(--dm-text-secondary);
    --hs-text-tertiary: var(--dm-text-tertiary);
    --hs-border: var(--dm-border);
    --hs-divider: var(--dm-divider);
    --hs-accent: var(--dm-accent);
    --hs-accent-hover: var(--dm-accent-hover);
    --hs-accent-soft: var(--dm-accent-soft);
    --hs-on-accent: var(--dm-on-accent);
}

/* 手动暗黑与系统暗黑对称，延伸阅读外层跟随页面底色。 */
html.husir-dark .hs-related {
    background: var(--dm-bg);
}

@media (max-width: 833px) {
    .hs-hero {
        /* 首模块背景贴顶，正文从胶囊底部以下 8px 开始。 */
        padding-top: calc(env(safe-area-inset-top, 0px) + 66px);
    }

    .hs-hero-title {
        font-size: var(--hs-fs-display, 32px);
    }

    .hs-article-body {
        font-size: 16px;
        line-height: 1.7;
    }

    .hs-article-body h2,
    .hs-article-body h2[style*="font-size"],
    .hs-article-body h2[style*="line-height"],
    .hs-related-title {
        font-size: var(--hs-fs-title-l, 26px) !important;
    }

    .hs-toast {
        bottom: calc(var(--mob-nav-page-reserve, 80px) + 12px);
    }
}

/* 竖屏平板：紧凑导航高度更大，Hero 需单独下移，避免标题贴近导航胶囊。 */
@media (min-width: 600px) and (max-width: 833px) and (orientation: portrait) {
    .hs-hero-title {
        max-width: none;
        text-wrap: wrap;
    }
    .hs-nav-wrap {
        padding-top: 40px;
    }
    .hs-feature-band {
        padding-top: 40px;
    }
    .hs-related {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    /* 竖屏平板相关阅读：取消轮播，最新三篇按一行三列展开。 */
    .hs-related-swiper {
        overflow: visible;
    }
    .hs-related-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--hs-space-md);
        width: 100%;
        min-width: 0;
        transform: none !important;
    }
    .hs-related-card {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        flex: none;
        display: flex;
        flex-direction: column;
    }
    .hs-related-card:nth-child(n + 4) {
        display: none;
    }
    .hs-related-card-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        height: 100%;
    }
    .hs-related-card-image {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }
    .hs-related-card-image img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }
    .hs-related-card-body {
        grid-column: auto;
        grid-row: auto;
        display: flex;
        flex-direction: column;
        gap: var(--hs-space-xs);
        padding: 12px;
    }
    .hs-related-card-date {
        margin: 0;
        font-size: 12px;
        line-height: 1.4;
    }
    .hs-related-card-title {
        min-height: 0;
        margin: 0;
        font-size: 15px;
        line-height: 1.45;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hs-related-pagination {
        display: none;
    }
    .hs-hero {
        padding-top: calc(env(safe-area-inset-top, 0px) + 110px);
    }

    /* 文章结束操作栏：标签占据主列，分享作为固定触控按钮贴齐右上角。 */
    .hs-article-footer {
        position: relative;
        /* 不建立高于顶部导航的 stacking context；展开的分享面板保留自身 dropdown 层级。 */
        z-index: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 48px;
        align-items: start;
        gap: var(--hs-space-md);
        padding-top: var(--hs-space-md);
    }
    .hs-article-footer .hs-article-tags {
        align-content: start;
        gap: var(--hs-space-xs);
        min-width: 0;
    }
    .hs-article-footer .hs-article-share {
        display: block;
        justify-self: end;
        margin: 0;
    }
    .hs-article-tag {
        min-height: 36px;
        padding: 0 12px;
        border: 1px solid var(--hs-border);
        background: var(--hs-surface);
    }
    .hs-share-trigger {
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 1px solid var(--hs-border);
        border-radius: 50%;
        background: var(--hs-surface);
        color: var(--hs-accent);
        box-shadow: none;
    }
    .hs-share-trigger-icon {
        width: 20px;
        height: 20px;
    }
    .hs-share-trigger-text {
        display: none;
    }
    .hs-share-trigger:hover,
    .hs-share-trigger:focus-visible {
        background: var(--hs-accent-soft);
        color: var(--hs-accent);
        transform: none;
        box-shadow: none;
    }
    .hs-share-trigger[aria-expanded="true"] {
        border-color: var(--hs-accent);
        background: var(--hs-accent);
        color: var(--hs-on-accent);
    }
    .hs-share-panel {
        top: calc(100% + 12px);
        right: 0;
        bottom: auto;
        left: auto;
        grid-template-columns: 140px minmax(0, 1fr);
        grid-template-areas:
            "qrcode channels"
            "copy copy";
        gap: var(--hs-space-md);
        width: 420px;
        min-width: 0;
        max-width: calc(100vw - 48px);
        transform-origin: top right;
    }
    .hs-share-qrcode {
        grid-area: qrcode;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }
    .hs-share-channels {
        grid-area: channels;
        align-self: center;
        margin-bottom: 0;
    }
    .hs-share-copybox {
        grid-area: copy;
    }
    /* 覆盖旧的 ≤767px 隐藏规则，保留 hidden 对关闭状态的语义控制。 */
    .hs-share-panel[hidden] {
        display: none;
    }
    .hs-share-panel:not([hidden]) {
        display: grid;
    }
}

/* 手机窄屏：标题字号收至 24px，并与紧凑导航保留 20px 顶部呼吸空间。 */
@media (max-width: 599px) {
    .hs-hero {
        padding-bottom: 0;
    }
    .hs-nav-wrap {
        padding-top: 20px;
        padding-bottom: 0;
    }
    .hs-feature-band {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .hs-feature-text {
        width: 100%;
        text-align: left;
    }
    .hs-related {
        padding-top: 0;
        padding-bottom: 0;
    }
    .hs-related-header {
        margin-bottom: 20px;
    }
    .hs-related-card-image {
        height: 100%;
        min-height: 100%;
        align-self: stretch;
        aspect-ratio: auto;
    }
    .hs-related-card-body {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .hs-nav-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
    }
    .hs-nav-link {
        min-width: 0;
        min-height: 44px;
        padding: 16px;
        border: 1px solid color-mix(in srgb, var(--hs-border) 72%, transparent);
        background: var(--hs-surface);
        background: color-mix(in srgb, var(--hs-surface) 66%, transparent);
        box-shadow: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), 0 8px 24px color-mix(in srgb, var(--hs-bg) 30%, transparent);
        -webkit-backdrop-filter: blur(18px) saturate(135%);
        backdrop-filter: blur(18px) saturate(135%);
    }
    .hs-nav-link--next {
        text-align: right;
    }
    .hs-nav-link:hover,
    .hs-nav-link:focus-visible {
        border-color: color-mix(in srgb, var(--hs-accent) 42%, transparent);
        background: color-mix(in srgb, var(--hs-accent) 12%, transparent);
        transform: none;
        box-shadow: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), 0 10px 28px color-mix(in srgb, var(--hs-bg) 36%, transparent);
    }
    .hs-nav-link:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--hs-accent) 72%, transparent);
        outline-offset: 2px;
    }
    .hs-nav-link--disabled:hover {
        background: var(--hs-surface);
        border-color: color-mix(in srgb, var(--hs-border) 72%, transparent);
        transform: none;
        box-shadow: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), 0 8px 24px color-mix(in srgb, var(--hs-bg) 30%, transparent);
    }
    @media (hover: none) {
        .hs-nav-link:hover {
            transform: none;
        }
    }
    @supports not ((backdrop-filter: blur(1px))) {
        .hs-nav-link {
            background: var(--hs-surface);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .hs-nav-link {
            transition: none;
            transform: none !important;
        }
    }
    .hs-hero-title {
        font-size: 24px;
        padding-top: 20px;
        text-align: left;
        text-wrap: wrap;
    }
    .hs-article-footer {
        padding-top: 15px;
    }
    .hs-article-tags {
        gap: 8px;
        padding: 10px 12px;
        margin-bottom: 0;
        border: 1px solid color-mix(in srgb, var(--hs-border) 72%, transparent);
        border-radius: 20px;
        background: var(--hs-surface);
        background: color-mix(in srgb, var(--hs-surface) 66%, transparent);
        box-shadow: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), 0 8px 24px color-mix(in srgb, var(--hs-bg) 35%, transparent);
        -webkit-backdrop-filter: blur(18px) saturate(135%);
        backdrop-filter: blur(18px) saturate(135%);
    }
    .hs-article-tag {
        min-height: 36px;
        padding: 0 12px;
        border: 1px solid color-mix(in srgb, var(--hs-border) 70%, transparent);
        background: var(--hs-surface);
        background: color-mix(in srgb, var(--hs-bg-secondary) 62%, transparent);
        box-shadow: inset 0 1px 0 color-mix(in srgb, white 16%, transparent), 0 2px 8px color-mix(in srgb, var(--hs-bg) 24%, transparent);
        color: var(--hs-text);
        -webkit-backdrop-filter: blur(12px) saturate(125%);
        backdrop-filter: blur(12px) saturate(125%);
    }
    .hs-article-tag::before {
        width: 5px;
        height: 5px;
        margin-right: 7px;
        border-radius: 50%;
        background: var(--hs-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--hs-accent) 16%, transparent);
        content: "";
    }
    a.hs-article-tag:hover,
    a.hs-article-tag:focus-visible {
        background: color-mix(in srgb, var(--hs-accent) 12%, transparent);
        border-color: color-mix(in srgb, var(--hs-accent) 42%, transparent);
        color: var(--hs-text);
        transform: translateY(-1px);
    }
    a.hs-article-tag:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--hs-accent) 72%, transparent);
        outline-offset: 2px;
    }
    @media (hover: none) {
        a.hs-article-tag:hover {
            transform: none;
        }
    }
    @supports not ((backdrop-filter: blur(1px))) {
        .hs-article-tags,
        .hs-article-tag {
            background: var(--hs-surface);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .hs-article-tag {
            transition: none;
            transform: none !important;
        }
    }

    /* 手机端保留分享入口：标签占主列，按钮使用 44px 图标触控区。 */
    .hs-article-footer {
        position: relative;
        /* 标签本体不能盖住 fixed 顶栏，分享面板的 z-index 由自身规则单独控制。 */
        z-index: auto;
        display: block;
    }
    .hs-article-footer .hs-article-tags {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        width: 100%;
        box-sizing: border-box;
        padding-right: 64px;
    }
    .hs-article-footer .hs-article-tag {
        justify-content: center;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        white-space: nowrap;
    }
    .hs-article-footer .hs-article-share {
        display: block;
        position: absolute;
        top: 15px;
        right: 12px;
        margin: 0;
    }
    .hs-share-trigger {
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-top: 10px;
        padding: 0;
        border: 1px solid var(--hs-border);
        border-radius: 50%;
        background: var(--hs-surface);
        color: var(--hs-accent);
        box-shadow: none;
    }
    .hs-share-trigger-icon {
        width: 19px;
        height: 19px;
    }
    .hs-share-trigger-text {
        display: none;
    }
    .hs-share-trigger:hover,
    .hs-share-trigger:focus-visible {
        background: var(--hs-accent-soft);
        color: var(--hs-accent);
        transform: none;
        box-shadow: none;
    }
    .hs-share-trigger[aria-expanded="true"] {
        border-color: var(--hs-accent);
        background: var(--hs-accent);
        color: var(--hs-on-accent);
    }
    /* 不支持 navigator.share 时，站内面板按手机视口收缩并向下展开。 */
    .hs-share-panel {
        top: calc(100% + 10px);
        right: 0;
        bottom: auto;
        left: auto;
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-areas:
            "qrcode channels"
            "copy copy";
        gap: 12px;
        width: 360px;
        min-width: 0;
        max-width: calc(100vw - 32px);
        padding: 12px;
        transform-origin: top right;
    }
    .hs-share-qrcode {
        grid-area: qrcode;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }
    .hs-share-qrcode-img {
        width: 112px;
        height: 112px;
    }
    .hs-share-channels {
        grid-area: channels;
        align-self: center;
        margin-bottom: 0;
    }
    .hs-share-copybox {
        grid-area: copy;
    }
    .hs-share-panel[hidden] {
        display: none;
    }
    .hs-share-panel:not([hidden]) {
        display: grid;
    }
}

/* PC 文章阅读流一级模块边界统一为单侧 60px。 */
@media (min-width: 901px) {
    .hs-main {
        --inner-page-module-gap: 60px;
    }

    .hs-main > .hs-hero {
        margin-bottom: 0 !important;
    }

    .hs-main > .hs-related {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .hs-main > .hs-feature-band,
    .hs-main > .hs-article-wrap,
    .hs-main > .hs-nav-wrap {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .hs-main > .hs-nav-wrap {
        padding-top: 60px;
    }
}