/* ==========================================================================
   拓锦云 工厂3DVR 展示系统 —— 独立样式表
   --------------------------------------------------------------------------
   跨主题可移植性保证（重要）：
     · 本文件不引用任何主题 CSS 变量（不使用 var(--primary) 等主题令牌）
     · 所有颜色 / 字号 / 间距 / 圆角均为本插件自定义，写在 :root 下并带
       afx- 前缀，避免与目标主题的变量冲突
     · 所有选择器均以 .afx- / #af-main 开头，不污染目标主题的通用类名
     · 不使用任何主题的栅格系统（自带 CSS Grid / Flex）
     · 唯一继承自主题的是页面基准字体（有意如此，使页面与目标站点协调）
   ========================================================================== */


/* ==========================================================================
   1. 设计令牌（插件私有，afx- 前缀）
   ========================================================================== */
.afx-archive,
.afx-single,
#af-main {
    --afx-blue:        #2563EB;
    --afx-blue-dark:   #1D4ED8;
    --afx-blue-deep:   #1E3A8A;
    --afx-blue-tint:   #EFF6FF;
    --afx-blue-line:   #BFDBFE;

    --afx-ink:         #0F172A;
    --afx-ink-2:       #1E293B;
    --afx-body:        #334155;
    --afx-muted:       #64748B;
    --afx-faint:       #94A3B8;

    --afx-line:        #E2E8F0;
    --afx-line-soft:   #F1F5F9;
    --afx-surface:     #FFFFFF;
    --afx-surface-2:   #F8FAFC;

    --afx-radius-sm:   4px;
    --afx-radius:      6px;
    --afx-radius-lg:   10px;

    --afx-shadow-sm:   0 1px 3px rgba(15, 23, 42, .08);
    --afx-shadow:      0 4px 16px rgba(15, 23, 42, .08);
    --afx-shadow-lg:   0 18px 48px rgba(15, 23, 42, .16);
    --afx-shadow-blue: 0 8px 24px rgba(37, 99, 235, .28);

    --afx-ease:        cubic-bezier(.22, .61, .36, 1);
    --afx-t:           all .28s var(--afx-ease);

    --afx-shell:       1320px;
    --afx-gutter:      24px;

    /* 首屏最小高度：2026-09-30 由 620 改 560，配合 .afx-stage 顶部 padding 收窄
       （原 148px 是按"主题 header 占位"的历史假设预留的，实际由 af-header-guard 撑开补偿，
         两层叠加导致面包屑离页头 148px；现改为 guard 补偿 + 64px 呼吸，min 需同步收缩） */
    --afx-stage-min:   560px;
}

/* 兜底：若页面外层容器限制了宽度，本区域自行撑满 */
#af-main {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    color: var(--afx-body);
    -webkit-font-smoothing: antialiased;
}

/* 容器 */
.afx-shell {
    width: 100%;
    max-width: var(--afx-shell);
    margin: 0 auto;
    padding: 0 var(--afx-gutter);
}

/* 统一盒模型，避免主题差异导致溢出 */
#af-main *,
#af-main *::before,
#af-main *::after {
    box-sizing: border-box;
}

#af-main img {
    max-width: 100%;
    display: block;
}

#af-main h1,
#af-main h2,
#af-main h3 {
    margin: 0;
    line-height: 1.2;
    letter-spacing: -.02em;
}

#af-main p {
    margin: 0;
}

#af-main ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* ==========================================================================
   2. 按钮体系
   ========================================================================== */
#af-main .afx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 26px;
    border: 2px solid transparent;
    border-radius: var(--afx-radius);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: var(--afx-t);
    white-space: nowrap;
}

#af-main .afx-btn svg {
    flex: none;
    transition: transform .28s var(--afx-ease);
}

#af-main .afx-btn-block {
    display: flex;
    width: 100%;
}

#af-main .afx-btn-lg {
    padding: 16px 30px;
    font-size: 16px;
}

/* 主按钮 */
#af-main .afx-btn-primary {
    background: var(--afx-blue);
    border-color: var(--afx-blue);
    color: #FFFFFF;
    box-shadow: var(--afx-shadow-blue);
}

#af-main .afx-btn-primary:hover {
    background: var(--afx-blue-dark);
    border-color: var(--afx-blue-dark);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 99, 235, .38);
}

#af-main .afx-btn-primary:hover svg {
    transform: translateX(3px);
}

/* 首屏主行动按钮（更大、更亮） */
#af-main .afx-btn-hero {
    background: var(--afx-blue);
    border-color: var(--afx-blue);
    color: #FFFFFF;
    padding: 17px 34px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 10px 32px rgba(37, 99, 235, .48);
}

#af-main .afx-btn-hero:hover {
    background: var(--afx-blue-dark);
    border-color: var(--afx-blue-dark);
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(37, 99, 235, .55);
}

#af-main .afx-btn-hero-disabled {
    background: rgba(148, 163, 184, .28);
    border-color: rgba(226, 232, 240, .35);
    color: #E2E8F0;
    box-shadow: none;
    cursor: not-allowed;
}

/* 幽灵按钮（深色背景上用） */
#af-main .afx-btn-ghost {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .38);
    color: #FFFFFF;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#af-main .afx-btn-ghost:hover {
    background: rgba(255, 255, 255, .18);
    border-color: #FFFFFF;
    color: #FFFFFF;
    transform: translateY(-3px);
}

/* 描边按钮 */
#af-main .afx-btn-outline {
    background: transparent;
    border-color: var(--afx-line);
    color: var(--afx-ink-2);
}

#af-main .afx-btn-outline:hover {
    border-color: var(--afx-blue);
    color: var(--afx-blue);
    background: var(--afx-blue-tint);
}

/* 禁用态 */
#af-main .afx-btn-disabled {
    background: var(--afx-line-soft);
    border-color: var(--afx-line);
    color: var(--afx-faint);
    cursor: not-allowed;
}


/* ==========================================================================
   3. 面包屑
   ========================================================================== */
#af-main .afx-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    margin: 0 0 26px;
}

#af-main .afx-breadcrumb a {
    color: var(--afx-muted);
    text-decoration: none;
    transition: color .15s ease;
}

#af-main .afx-breadcrumb a:hover {
    color: var(--afx-blue);
}

#af-main .afx-breadcrumb-sep {
    color: var(--afx-faint);
    opacity: .7;
}

#af-main .afx-breadcrumb-current {
    color: var(--afx-ink-2);
    font-weight: 700;
}

/* 深色底上的面包屑 */
#af-main .afx-breadcrumb-onDark a {
    color: rgba(226, 232, 240, .82);
}

#af-main .afx-breadcrumb-onDark a:hover {
    color: #FFFFFF;
}

#af-main .afx-breadcrumb-onDark .afx-breadcrumb-sep {
    color: rgba(226, 232, 240, .45);
}

#af-main .afx-breadcrumb-onDark .afx-breadcrumb-current {
    color: #FFFFFF;
}


/* ==========================================================================
   4. 列表页 —— 页头横幅
   ========================================================================== */
.afx-archive {
    background: var(--afx-surface-2);
}

.afx-archive-hero {
    position: relative;
    padding: 74px 0 62px;
    background:
        radial-gradient(1200px 420px at 12% -10%, rgba(37, 99, 235, .16), transparent 62%),
        linear-gradient(160deg, #0B1220 0%, #14244A 52%, #0F172A 100%);
    overflow: hidden;
}

/* 静态封面版：用内置网格纹理 */
.afx-archive-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .07) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(900px 380px at 20% 0%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(900px 380px at 20% 0%, #000 0%, transparent 78%);
    pointer-events: none;
}

/* 嵌入版：静态纹理让位给 iframe，整块变成"横幅"舞台
   ★ 高度改为固定像素（不再跟随视口）。
     依据：文字组实测 373px（桌面，字号不变），上下各留 13px 呼吸 → 400px；
     2026-09-20 徐哥看过后调到 428px（呼吸更宽松，全景更舒展）。
     固定像素的好处：换屏幕、换显示器高度都一致，不会忽高忽低。
     ⚠️ 如需调整横幅高度，只改下面这一个数字（平板在 1100 档、手机在 620 档）。 */
.afx-archive-hero--embed {
    height: 428px;
    min-height: 0;
    max-height: none;
    padding: 0;
    display: flex;
    align-items: center;                  /* 文字组垂直居中（原为 flex-end 贴底） */
    /* 2026-09-23：与 .afx-hero-embed 同步改为渐变底（原纯色 #0B1220） */
    background:
        radial-gradient(1200px 420px at 12% -10%, rgba(37, 99, 235, .16), transparent 62%),
        linear-gradient(160deg, #0B1220 0%, #14244A 52%, #0F172A 100%);
    isolation: isolate;
    overflow: hidden;                     /* 兜底：任何情况都不让 iframe 撑破横幅 */
}

.afx-archive-hero--embed::after {
    display: none;                        /* 嵌入版自带网格层，去掉伪元素纹理 */
}

/* ---------- iframe 嵌入层 ---------- */
.afx-hero-embed {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    /* 2026-09-23：改用与静态封面一致的深蓝渐变（原为纯色 #0B1220）。
       iframe 加载期间（实测可达 5s）原先是「纯色裸奔」，容易被误判为加载失败；
       渐变底不新增任何请求，iframe 就位后自然覆盖。 */
    background:
        radial-gradient(1200px 420px at 12% -10%, rgba(37, 99, 235, .16), transparent 62%),
        linear-gradient(160deg, #0B1220 0%, #14244A 52%, #0F172A 100%);
}

.afx-hero-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #0B1220;
    /* ★ 2026-09-20 徐哥定案：全景常驻可交互，不再需要点击「拖动查看」才接管。
       理由：首屏是 428px 横幅、不是全屏，上下都有大把可滚动区域。
             鼠标在全景上就听全景的（拖拽/滚轮归它），挪开就滚页面——
             这是地图/全景嵌入的通用直觉，不必用按钮教用户。
       旧做法是 pointer-events:none + JS 点击切换，那套逻辑已删除。 */
    pointer-events: auto;
    transition: opacity .5s ease;
}

/* 外部加载失败时的兜底静态层（由 JS 控制显隐） */
.afx-hero-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 2;
}

.afx-hero-embed.is-fallback .afx-hero-frame { opacity: 0; }
.afx-hero-embed.is-fallback .afx-hero-fallback { display: block; }

/* ---------- 压暗层：只做"整体降噪"，不做文字背板 ----------
   2026-09-20 更新：文字背板已整体移除，文字可读性现在完全由
   text-shadow（见 .afx-archive-title / .afx-archive-sub / .afx-eyebrow）承担。
   这里仅把整幅全景的亮度压低一点，避免亮部刺眼，幅度刻意很轻，
   以免又把全景压回"灰蒙蒙"。 */
/* 2026-09-20 徐哥定案：首屏不做压暗。
   全景本身就足够好看，压暗是用"画面通透度"换"文字确定性"，不划算。
   文字可读性改由 text-shadow 承担（见 .afx-archive-title / .afx-archive-sub
   / .afx-eyebrow）—— 那是更精准的手段：只作用在文字笔画周围，
   而不是把整块画面一起压灰。
   ★ 保留这个规则块（不删 DOM 结构），是为了：
     · 避免模板 archive-factory.php:70 的 <div class="afx-hero-scrim"> 变成无样式裸节点
     · 万一以后要恢复压暗，改回 background 即可，无需动模板
   ⚠️ 不要给这个元素加回任何 background —— 除非同时确认 text-shadow 不足。 */
.afx-hero-scrim {
    display: none;
}

/* 2026-09-20 原「.is-live 交互态压暗层减弱」规则已删除 ——
   全景现在常驻可交互，不存在"进入/退出交互"两种状态了。 */

/* ---------- 装饰网格 ---------- */
.afx-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: .16;
    background-image:
        linear-gradient(rgba(96, 165, 250, .22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 165, 250, .22) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 90% 70% at 20% 40%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 20% 40%, #000 0%, transparent 72%);
}

/* ---------- 交互开关按钮：2026-09-20 已整体删除 ----------
   原来有个「拖动查看」悬浮胶囊（含 .afx-hero-toggle-dot / .is-live 状态），
   配合 JS 的分层激活逻辑使用。徐哥定案去掉：全景常驻可交互，不需要开关。
   同时删除的还有「已进入交互模式…」那条常驻提示（.is-live .afx-hero-hint）。 */

/* ---------- 状态提示（仅加载失败时出现） ----------
   现在这个元素只有一个用途：嵌入加载失败、切到静态封面时提示一下，
   由 JS 写入文案并淡入，几秒后自动淡出。
   所以默认 opacity:0，不做任何常驻显示。 */
.afx-hero-hint {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    margin: 0;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: #DBEAFE;
    background: rgba(13, 22, 40, .78);
    border: 1px solid rgba(148, 183, 255, .26);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

/* ---------- 嵌入版的内容层 ---------- */
.afx-archive-hero--embed .afx-shell {
    position: relative;
    z-index: 5;
    width: 100%;
    display: block;              /* 覆盖旧的 flex 布局 */
    padding-bottom: 0;           /* ★ 原 84px：文字贴底用；改居中后不再需要 */

    /* ★★ 2026-09-20 徐哥要求（重要）
       文字层在 iframe 之上（z-index:5），鼠标移进文字区域时会被文字「抓走」——
       表现为光标变成 I 形、拖动变成框选文字，全景完全控制不了。
       解决：让整个文字层对鼠标「透明」，事件直接穿到下面的 iframe 全景。
         - pointer-events:none  → 浏览器忽略本层，鼠标穿透到全景
         - user-select:none     → 彻底禁掉文字选中/复制（含拖动框选）
       注意：这两条只对【嵌入版】生效。静态版（没全景可交互）不加，
             保留正常的文字可选中能力，对 SEO 与可访问性无影响
             （pointer-events 不影响爬虫抓取，也不影响屏幕阅读器）。 */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 嵌入版文字层的所有后代一并放开鼠标（防止子元素重新把事件抓回来）
   背景：.afx-archive-title 等元素自身若显式声明 pointer-events 会覆盖父级，
   这里统一用 * 兜底，确保没有任何一处把鼠标截住。 */
.afx-archive-hero--embed .afx-shell,
.afx-archive-hero--embed .afx-shell * {
    pointer-events: none;
}

/* 例外：嵌入版里若将来需要可点击的元素（如数据条改造成链接、
   或出现「查看全部工厂」按钮），加 .afx-pe-auto 类即可恢复交互。 */
.afx-archive-hero--embed .afx-pe-auto,
.afx-archive-hero--embed .afx-pe-auto * {
    pointer-events: auto;
}

/* ★ 文字容器（宽度约束，保持不变）
   max-width:880px 决定文字排布宽度 —— 这是「文字排版不变」的关键，不可改。
   isolation:isolate 建立独立层叠上下文，让 ::before 背板位于本元素内容之下、
   同时仍高于 iframe / 压暗层，不会掉到最底层。 */
.afx-archive-hero--embed .afx-hero-inner {
    position: relative;
    max-width: 880px;
    isolation: isolate;
}

/* ★ 文字专属背板 — 已于 2026-09-20 按徐哥要求移除
   原因：原本这层半透明深色地基「严重遮住了全景」，全景是主角，不该被压住。
   影响：文字改为直接压在全景上，可读性全部由 text-shadow 承担，
         所以下面几处文字的阴影都做了加强（见 .afx-eyebrow / 标题 / 副标题）。
   如需恢复：把 .afx-hero-inner::before 的那段 background 加回来即可
             （负 margin 全宽带展开的写法见本文件 git 历史 / 备份）。 */
.afx-archive-hero--embed .afx-hero-inner::before {
    content: none;
    display: none;
}

.afx-archive-hero .afx-shell {
    position: relative;
    z-index: 2;
    display: block;              /* 内容全部左对齐堆叠（数据条已并入 inner） */
}

.afx-archive-hero-inner {
    max-width: 720px;
}

/* 静态版数据条与标题同宽，形成一致的左对齐视觉基线 */
.afx-archive-hero:not(.afx-archive-hero--embed) .afx-hero-inner {
    max-width: 760px;
}

/* 嵌入版下的面包屑（深色背景上） */
.afx-archive-hero--embed .afx-breadcrumb {
    margin-bottom: 26px;
}

.afx-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #93C5FD;
    margin-bottom: 16px;
}

.afx-archive-title {
    font-size: 46px;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: -.03em;
    margin: 0 0 14px;
}

/* 嵌入版标题：更大、带投影，保证压在全景上依然清晰。
   ★ 2026-09-20 背板移除后阴影加强：原来是「1px 硬边 + 34px 柔光」，
     无背板时遇到全景里的浅色区域（天空、白墙）会糊掉。
     现在改为三层：硬边提轮廓 + 中距固形 + 大范围柔光压底，四个方向都铺开。 */
#af-main .afx-archive-hero--embed .afx-archive-title {
    font-size: clamp(34px, 4.6vw, 60px);
    line-height: 1.1;
    margin: 0 0 20px;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, .85),
        0 2px 6px rgba(0, 0, 0, .70),
        0 8px 30px rgba(0, 0, 0, .60);
}

.afx-archive-sub {
    font-size: 17px;
    font-weight: 500;
    color: rgba(226, 232, 240, .84);
    line-height: 1.7;
    margin: 0 0 24px;
}

#af-main .afx-archive-hero--embed .afx-archive-sub {
    max-width: 620px;
    font-size: clamp(14px, 1.4vw, 16.5px);
    margin: 0 0 32px;
    color: rgba(238, 244, 255, .94);
    /* ★ 背板移除后加强：细字在复杂背景上最容易糊，用较实的硬边兜住 */
    text-shadow:
        0 1px 2px rgba(0, 0, 0, .90),
        0 2px 8px rgba(0, 0, 0, .70),
        0 4px 20px rgba(0, 0, 0, .55);
}

/* 嵌入版 eyebrow 也加投影（背板移除后加强） */
.afx-archive-hero--embed .afx-eyebrow {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, .90),
        0 2px 8px rgba(0, 0, 0, .65);
}

.afx-archive-hero--embed .afx-breadcrumb,
.afx-archive-hero--embed .afx-breadcrumb a,
.afx-archive-hero--embed .afx-breadcrumb-current {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* ---------- 静态版（未设置嵌入地址）的垂直节奏 ----------
   标题与副标题之间留出呼吸，与嵌入版观感拉开区别。

   ★ 两点必须同时满足，否则会被前面的规则吃掉：
     1) 写在 .afx-archive-title / .afx-archive-sub 基础规则之后；
     2) 必须带 #af-main 前缀。因为文件前面有
        「#af-main h1, #af-main h2, #af-main h3 { margin: 0 }」这条重置，
        ID 选择器特异性 (1,0,1) 高于任何纯类选择器，不加 ID 前缀无法覆盖。 */
#af-main .afx-archive-hero:not(.afx-archive-hero--embed) .afx-archive-title {
    margin: 0 0 20px;
}

#af-main .afx-archive-hero:not(.afx-archive-hero--embed) .afx-archive-sub {
    margin: 0 0 30px;
}

#af-main .afx-archive-hero:not(.afx-archive-hero--embed) .afx-eyebrow {
    margin-bottom: 20px;
}

.afx-archive-hero .afx-breadcrumb {
    margin-bottom: 0;
}

/* ---------- 首屏数据条（三格） ---------- */
.afx-archive-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.afx-archive-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 18px 26px;
    border: 1px solid rgba(148, 163, 184, .25);
    border-left: 3px solid var(--afx-blue);
    border-radius: var(--afx-radius);
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 嵌入版数据条：更紧凑的玻璃胶囊，背景加深保证在亮背景上可读 */
.afx-archive-hero--embed .afx-archive-stat {
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-left: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(10, 18, 33, .55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .28);
}

.afx-archive-stat-num {
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    color: #FFFFFF;
    letter-spacing: -.02em;
}

.afx-archive-hero--embed .afx-archive-stat-num {
    font-size: 22px;
}

.afx-archive-stat-label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(226, 232, 240, .8);
}

.afx-archive-hero--embed .afx-archive-stat-label {
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(219, 234, 254, .78);
}


/* ==========================================================================
   5. 列表页 —— 网格与卡片
   ========================================================================== */
.afx-archive-body {
    padding: 56px 0 88px;
}

.afx-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.afx-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#af-main .afx-card {
    display: flex;
    flex-direction: column;
    background: var(--afx-surface);
    border: 1px solid var(--afx-line);
    border-radius: var(--afx-radius-lg);
    overflow: hidden;
    box-shadow: var(--afx-shadow-sm);
    transition: transform .34s var(--afx-ease), box-shadow .34s var(--afx-ease), border-color .34s var(--afx-ease);
}

#af-main .afx-card:hover {
    transform: translateY(-8px);
    border-color: var(--afx-blue-line);
    box-shadow: var(--afx-shadow-lg);
}

#af-main .afx-card-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--afx-line-soft);
}

#af-main .afx-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--afx-ease);
}

#af-main .afx-card:hover .afx-card-img {
    transform: scale(1.07);
}

#af-main .afx-card-media-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 42%, rgba(15, 23, 42, .58) 100%);
    opacity: .85;
    transition: opacity .34s var(--afx-ease);
    pointer-events: none;
}

#af-main .afx-card:hover .afx-card-media-veil {
    opacity: 1;
}

#af-main .afx-card-industry {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    /* 超长行业名：最多两行，超出省略，避免撑破或压住画面 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: fit-content;
    max-width: calc(100% - 28px);
    padding: 6px 13px;
    background: rgba(37, 99, 235, .94);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.4;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#af-main .afx-card-vr-flag {
    position: absolute;
    right: 14px;
    top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: rgba(15, 23, 42, .68);
    border: 1px solid rgba(226, 232, 240, .28);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#af-main .afx-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 24px;
}

#af-main .afx-card-title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--afx-ink);
    margin: 0 0 10px;
}

#af-main .afx-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color .18s ease;
}

#af-main .afx-card-title a:hover {
    color: var(--afx-blue);
}

#af-main .afx-card-region {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--afx-muted);
    margin: 0 0 12px;
}

#af-main .afx-card-region svg {
    flex: none;
    color: var(--afx-blue);
}

#af-main .afx-card-intro {
    font-size: 14px;
    line-height: 1.68;
    color: var(--afx-body);
    margin: 0 0 22px;
    flex: 1;
}

/* 卡片按钮统一贴底 */
#af-main .afx-card .afx-btn {
    margin-top: auto;
}

.afx-card-compact .afx-card-body {
    padding: 18px 18px 20px;
}

.afx-card-compact .afx-card-title {
    font-size: 17px;
}


/* ==========================================================================
   6. 空态
   ========================================================================== */
#af-main .afx-empty {
    text-align: center;
    padding: 96px 24px;
    background: var(--afx-surface);
    border: 1px dashed var(--afx-line);
    border-radius: var(--afx-radius-lg);
}

#af-main .afx-empty-icon {
    color: var(--afx-faint);
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

#af-main .afx-empty-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--afx-ink);
    margin-bottom: 10px;
}

#af-main .afx-empty-text {
    font-size: 15px;
    color: var(--afx-muted);
    margin-bottom: 26px;
}


/* ==========================================================================
   7. 分页
   ========================================================================== */
#af-main .afx-pagination {
    margin-top: 56px;
}

#af-main .afx-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

#af-main .afx-pagination li {
    list-style: none;
}

#af-main .afx-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--afx-line);
    border-radius: var(--afx-radius);
    background: var(--afx-surface);
    color: var(--afx-ink-2);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--afx-t);
}

#af-main .afx-pagination a.page-numbers:hover {
    border-color: var(--afx-blue);
    color: var(--afx-blue);
    background: var(--afx-blue-tint);
}

#af-main .afx-pagination .page-numbers.current {
    background: var(--afx-blue);
    border-color: var(--afx-blue);
    color: #FFFFFF;
    box-shadow: var(--afx-shadow-blue);
}


/* ==========================================================================
   8. 详情页 —— 首屏主舞台
   ========================================================================== */
.afx-single {
    background: var(--afx-surface-2);
}

.afx-stage {
    position: relative;
    isolation: isolate;
    /* 2026-09-30：顶部 148→64。原值按"主题 header 为 sticky 占位"的假设预留，
       实际 header 是 absolute（由 mu-plugins/af-header-guard.php 撑开补偿），
       两层叠加导致面包屑离页头 148px、与行距 20~26px 失衡。
       现 64px（略小于底部 72px，内容贴底布局下"顶轻底重"更稳）。 */
    padding: 64px 0 72px;
    min-height: var(--afx-stage-min);
    display: flex;
    align-items: flex-end;
    background: #0B1220;
    overflow: hidden;
}

.afx-stage-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

#af-main .afx-stage-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.03);
    animation: afxStageDrift 24s ease-in-out infinite alternate;
}

@keyframes afxStageDrift {
    from { transform: scale(1.03) translate3d(0, 0, 0); }
    to   { transform: scale(1.10) translate3d(-1.2%, -1%, 0); }
}

.afx-stage-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 18, 32, .82) 0%, rgba(11, 18, 32, .48) 34%, rgba(11, 18, 32, .90) 100%),
        linear-gradient(92deg, rgba(11, 18, 32, .92) 0%, rgba(11, 18, 32, .34) 62%, rgba(11, 18, 32, .58) 100%);
}

.afx-stage-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .06) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
    pointer-events: none;
}

.afx-stage-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.afx-stage-content {
    max-width: 780px;
    animation: afxRise .9s var(--afx-ease) both;
}

@keyframes afxRise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.afx-stage-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 22px;
}

#af-main .afx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border: 1px solid rgba(226, 232, 240, .26);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #E2E8F0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#af-main .afx-chip-live {
    background: rgba(37, 99, 235, .92);
    border-color: rgba(147, 197, 253, .5);
    color: #FFFFFF;
}

#af-main .afx-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #86EFAC;
    box-shadow: 0 0 0 0 rgba(134, 239, 172, .7);
    animation: afxPulse 2.1s ease-out infinite;
}

@keyframes afxPulse {
    0%   { box-shadow: 0 0 0 0 rgba(134, 239, 172, .65); }
    70%  { box-shadow: 0 0 0 9px rgba(134, 239, 172, 0); }
    100% { box-shadow: 0 0 0 0 rgba(134, 239, 172, 0); }
}

#af-main .afx-stage-title {
    font-size: 58px;
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -.035em;
    color: #FFFFFF;
    text-shadow: 0 3px 24px rgba(0, 0, 0, .42);
    margin: 0 0 20px;
}

#af-main .afx-stage-lead {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.72;
    color: rgba(226, 232, 240, .9);
    max-width: 640px;
    margin: 0 0 34px;
}

.afx-stage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* 首屏悬浮信息卡 */
#af-main .afx-stage-panel {
    position: absolute;
    right: var(--afx-gutter);
    bottom: 72px;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    min-width: 460px;
    background: rgba(15, 23, 42, .72);
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: var(--afx-radius-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
    overflow: hidden;
    animation: afxRise .9s var(--afx-ease) .18s both;
}

#af-main .afx-fact {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 20px 22px;
    border-right: 1px solid rgba(148, 163, 184, .16);
}

#af-main .afx-fact:last-child {
    border-right: none;
}

#af-main .afx-fact-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(147, 197, 253, .82);
}

#af-main .afx-fact-value {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.45;
}


/* ==========================================================================
   9. 详情页 —— 正文区
   ========================================================================== */
.afx-body {
    padding: 72px 0 80px;
    background: var(--afx-surface-2);
}

.afx-body-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 44px;
    align-items: start;
}

.afx-body-main {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

/* 内容板块 */
#af-main .afx-block {
    background: var(--afx-surface);
    border: 1px solid var(--afx-line);
    border-radius: var(--afx-radius-lg);
    padding: 36px 38px 38px;
    box-shadow: var(--afx-shadow-sm);
}

#af-main .afx-block-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

#af-main .afx-block-mark {
    width: 4px;
    height: 24px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--afx-blue), var(--afx-blue-deep));
    flex: none;
}

#af-main .afx-block-title {
    font-size: 24px;
    font-weight: 900;
    color: var(--afx-ink);
    letter-spacing: -.02em;
}

/* 长文本排版 */
#af-main .afx-prose {
    font-size: 16px;
    line-height: 1.86;
    color: var(--afx-body);
}

#af-main .afx-prose p {
    margin: 0 0 16px;
}

#af-main .afx-prose p:last-child {
    margin-bottom: 0;
}

#af-main .afx-prose strong {
    color: var(--afx-ink-2);
    font-weight: 700;
}

/* 亮点列表 */
#af-main .afx-highlights {
    display: grid;
    gap: 14px;
}

#af-main .afx-highlight {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 18px;
    background: var(--afx-surface-2);
    border: 1px solid var(--afx-line-soft);
    border-left: 3px solid var(--afx-blue);
    border-radius: var(--afx-radius);
    transition: var(--afx-t);
}

#af-main .afx-highlight:hover {
    background: var(--afx-blue-tint);
    border-left-color: var(--afx-blue-dark);
    transform: translateX(4px);
}

#af-main .afx-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--afx-blue);
    color: #FFFFFF;
}

#af-main .afx-highlight-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.65;
    color: var(--afx-ink-2);
}


/* ==========================================================================
   10. 详情页 —— 侧栏行动卡（粘性跟随）
   ========================================================================== */
.afx-body-side {
    position: sticky;
    top: 100px;
}

#af-main .afx-cta-card {
    background: linear-gradient(158deg, #101E3C 0%, #1E3A8A 58%, #1D4ED8 100%);
    border-radius: var(--afx-radius-lg);
    padding: 34px 30px 30px;
    box-shadow: 0 22px 56px rgba(30, 58, 138, .34);
    position: relative;
    overflow: hidden;
}

#af-main .afx-cta-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147, 197, 253, .30), transparent 68%);
    pointer-events: none;
}

#af-main .afx-cta-eyebrow {
    position: relative;
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #93C5FD;
    margin-bottom: 14px;
}

#af-main .afx-cta-title {
    position: relative;
    font-size: 27px;
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: -.025em;
    color: #FFFFFF;
    margin: 0 0 14px;
}

#af-main .afx-cta-text {
    position: relative;
    font-size: 14px;
    line-height: 1.72;
    color: rgba(219, 234, 254, .9);
    margin: 0 0 24px;
}

#af-main .afx-cta-card .afx-btn {
    position: relative;
}

/* 深色卡上的白底主按钮 */
#af-main .afx-cta-card .afx-btn-primary {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--afx-blue-deep);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .26);
}

#af-main .afx-cta-card .afx-btn-primary:hover {
    background: #F8FAFC;
    border-color: #F8FAFC;
    color: var(--afx-blue-deep);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
}

#af-main .afx-cta-card .afx-btn-disabled {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .26);
    color: rgba(255, 255, 255, .68);
}

#af-main .afx-cta-notes {
    position: relative;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(147, 197, 253, .26);
    display: grid;
    gap: 11px;
}

#af-main .afx-cta-notes li {
    position: relative;
    padding-left: 22px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    color: rgba(219, 234, 254, .88);
}

#af-main .afx-cta-notes li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #86EFAC;
}

#af-main .afx-cta-notes a {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ==========================================================================
   11. 相关工厂
   ========================================================================== */
.afx-related {
    padding: 64px 0 88px;
    background: var(--afx-surface);
    border-top: 1px solid var(--afx-line);
}

.afx-related-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

#af-main .afx-related-title {
    font-size: 30px;
    font-weight: 900;
    color: var(--afx-ink);
    letter-spacing: -.025em;
}

#af-main .afx-related-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--afx-blue);
    text-decoration: none;
    transition: var(--afx-t);
}

#af-main .afx-related-more:hover {
    gap: 10px;
    color: var(--afx-blue-dark);
}


/* ==========================================================================
   12. 滚动出场动画（由 js/factory.js 添加 .is-in 触发）
   ========================================================================== */
#af-main .afx-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--afx-ease), transform .7s var(--afx-ease);
    will-change: opacity, transform;
}

#af-main .afx-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}

/* 无 JS 时立即显示，避免内容永久隐藏 */
.no-js #af-main .afx-reveal {
    opacity: 1;
    transform: none;
}

/* 尊重"减少动态效果"偏好 */
@media (prefers-reduced-motion: reduce) {
    #af-main .afx-reveal,
    #af-main .afx-stage-content,
    #af-main .afx-stage-panel,
    #af-main .afx-stage-img {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ★ 2026-09-23：首屏内容不参与「滚动入场」动画
   背景：.afx-reveal 初始 opacity:0，要等 js/factory.js（defer）执行加上 is-in 才显示。
   实测移动端 4G：H1 进 DOM 5074ms，直到 5674ms 才可见 —— 白等 599ms。
   滚动出场动画是给下方卡片设计的（滚进视口才出现）；首屏一进页面就该看见，
   不该被它锁住。本规则只作用于首屏区域，下方卡片的动画完全不受影响。
   特异性：#af-main .afx-archive-hero .afx-reveal（1 ID + 2 类）
          > #af-main .afx-reveal（1 ID + 1 类），靠特异性胜出，无需 !important。 */
#af-main .afx-archive-hero .afx-reveal,
#af-main .afx-archive-hero .afx-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}


/* ==========================================================================
   13. 响应式 —— 平板
   ========================================================================== */
@media (max-width: 1100px) {
    .afx-grid,
    .afx-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .afx-body-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .afx-body-side {
        position: static;
    }

    #af-main .afx-stage-panel {
        position: static;
        min-width: 0;
        width: 100%;
        margin-top: 34px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #af-main .afx-stage {
        padding: 56px 0 60px;
        min-height: 0;
    }

    #af-main .afx-stage-title {
        font-size: 44px;
    }

    .afx-archive-title {
        font-size: 38px;
    }

    /* 嵌入版：平板档固定高度（文字组实测约 236px + 上下呼吸 ≈ 290px） */
    .afx-archive-hero--embed {
        height: 290px;
        min-height: 0;
        max-height: none;
    }

    .afx-archive-hero--embed .afx-shell {
        padding-bottom: 0;              /* ★ 原 64px：改居中后不再需要 */
    }

    .afx-archive-hero--embed .afx-archive-stat {
        padding: 10px 16px;
    }

    .afx-archive-hero--embed .afx-archive-stat-num {
        font-size: 19px;
    }
}


/* ==========================================================================
   14. 响应式 —— 手机横屏 / 小平板
   ========================================================================== */
@media (max-width: 820px) {
    #af-main {
        --afx-gutter: 18px;
    }

    /* 静态封面版：窄屏收窄上下留白（原本给纯文字版用） */
    .afx-archive-hero {
        padding: 54px 0 46px;
    }

    /* ★ 2026-09-20 补：嵌入版必须把 hero 自身 padding 归零。
       背景：本媒体查询内原本只写了 `.afx-archive-hero--embed .afx-shell{padding:0}`，
             那是清【内层 shell】的，没清【外层 hero】的 —— 于是上面这条
             `padding:54px 0 46px` 漏到了嵌入版身上。
       影响面：iframe 是 position:absolute;inset:0，不受 padding 影响（实测改前改后
               位置/高度均为 0 变化）；真正受影响的是【静态封面版之外】的布局基准
               与后续若增删兄弟元素时的间距一致性。属于隐患清理，顺手修掉。
       注意：不可写 !important —— 会有损后续维护时的覆盖能力，靠特异性即可胜出。 */
    .afx-archive-hero--embed {
        padding: 0;
    }

    .afx-archive-hero .afx-shell {
        flex-direction: column;
        align-items: flex-start;
        gap: 26px;
    }

    .afx-archive-title {
        font-size: 32px;
    }

    .afx-archive-sub {
        font-size: 15px;
    }

    .afx-archive-stat {
        padding: 14px 20px;
    }

    .afx-archive-stat-num {
        font-size: 32px;
    }

    .afx-archive-body {
        padding: 40px 0 64px;
    }

    /* 嵌入版：中间档（≤820px）
       ⚠️ 高度不在此设定 —— 高度只在两处定义：
          · @media(max-width:1100px) → 290px（平板）
          · @media(max-width:620px)  → 400px（手机）
          这里重复设高度会覆盖平板档，导致 768px 拿到错误值（曾踩坑）。 */
    .afx-archive-hero--embed .afx-shell {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* 移动端压暗层覆写（2026-09-20 徐哥定案：首屏不做压暗）
       压暗层已整体 display:none（见文件上方 .afx-hero-scrim）。
       这里保留占位说明：移动端窄屏文字占比大，是全站最需要压暗的场景，
       如果徐哥在某个特别亮（晴空/雪景）的全景上发现标题看不清，
       优先在移动端这一档单独加"左侧渐隐地基"，而不是恢复整幅压暗。
       ⚠️ 加回时记得同步检查桌面档观感。 */

    /* 移动端文字容器本就无宽度约束 */
    .afx-archive-hero--embed .afx-hero-inner {
        max-width: none;
    }

    /* 2026-09-20 背板已整体移除，移动端这段覆写一并删掉。
       如果以后要恢复背板，记得在这里补回「margin 归零」的写法：
       移动端父级 .afx-hero-inner 已是 max-width:none，
       桌面版的负 margin 会二次外扩撑出横向滚动条。 */

    /* 移动端状态提示（仅加载失败时用）：贴底整宽，文字居中可换行 */
    .afx-archive-hero--embed .afx-hero-hint {
        left: 16px;
        right: 16px;
        bottom: 22px;
        transform: none;
        text-align: center;
        white-space: normal;
        line-height: 1.5;
    }

    .afx-archive-hero--embed .afx-archive-title {
        font-size: 30px;
        /* 背板移除后同步加强（与桌面档一致的三层阴影，略收紧半径） */
        text-shadow:
            0 1px 2px rgba(0, 0, 0, .90),
            0 2px 6px rgba(0, 0, 0, .72),
            0 6px 22px rgba(0, 0, 0, .60);
    }

    .afx-archive-hero--embed .afx-archive-sub {
        font-size: 14.5px;
        line-height: 1.68;
        color: rgba(240, 245, 255, .96);
    }

    .afx-archive-hero--embed .afx-archive-stats {
        gap: 9px;
    }

    /* 移动端数据条改回较实的底：玻璃感在窄屏上会让文字发虚 */
    .afx-archive-hero--embed .afx-archive-stat {
        padding: 9px 14px;
        gap: 7px;
        background: rgba(8, 15, 28, .78);
        border-color: rgba(255, 255, 255, .22);
    }

    .afx-archive-hero--embed .afx-archive-stat-num {
        font-size: 17px;
        color: #FFFFFF;
    }

    .afx-archive-hero--embed .afx-archive-stat-label {
        font-size: 11.5px;
        color: rgba(226, 238, 255, .92);
    }

    .afx-grid,
    .afx-grid-3 {
        gap: 20px;
    }

    #af-main .afx-stage {
        padding: 48px 0 52px;
    }

    #af-main .afx-stage-title {
        font-size: 36px;
    }

    #af-main .afx-stage-lead {
        font-size: 16px;
    }

    #af-main .afx-stage-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #af-main .afx-fact:nth-child(2) {
        border-right: none;
    }

    #af-main .afx-fact:nth-child(3) {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(148, 163, 184, .16);
    }

    #af-main .afx-block {
        padding: 28px 24px 30px;
    }

    #af-main .afx-block-title {
        font-size: 21px;
    }

    .afx-body {
        padding: 52px 0 64px;
    }

    #af-main .afx-cta-card {
        padding: 28px 24px 26px;
    }

    #af-main .afx-related-title {
        font-size: 25px;
    }

    .afx-related {
        padding: 48px 0 68px;
    }
}


/* ==========================================================================
   15. 响应式 —— 手机竖屏
   ========================================================================== */
@media (max-width: 620px) {
    #af-main {
        --afx-gutter: 16px;
    }

    /* 嵌入版：手机档固定高度（2026-09-20 徐哥定案：降低，不再与桌面一致）
       原值 428px（与桌面同高），但手机屏窄，428px 占屏 50.7%，
       叠加页头后首屏几乎看不到下方工厂卡片，观感偏"高"。
       现取 360px，让首屏能露出更多内容。
       ★ 高度与全景取景【无关】—— krpano 用 fovtype=MFOV，view.fov 恒为 140，
         容器变矮只是画面变小，不会裁掉天空（已实测五种尺寸验证）。
       ⚠️ 高度只在此处和 @media(max-width:1100px) 定义，别在 820 档重复设。 */
    .afx-archive-hero--embed {
        height: 360px;
        min-height: 0;
        max-height: none;
    }

    /* 卡片单列 */
    .afx-grid,
    .afx-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    #af-main .afx-stage {
        padding: 40px 0 46px;
    }

    #af-main .afx-stage-title {
        font-size: 30px;
        letter-spacing: -.025em;
    }

    #af-main .afx-stage-lead {
        font-size: 15px;
        margin-bottom: 26px;
    }

    #af-main .afx-stage-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 11px;
    }

    #af-main .afx-stage-actions .afx-btn {
        width: 100%;
    }

    #af-main .afx-stage-panel {
        grid-template-columns: minmax(0, 1fr);
        border-radius: var(--afx-radius);
    }

    #af-main .afx-fact {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 15px 18px;
        border-right: none;
        border-bottom: 1px solid rgba(148, 163, 184, .16);
    }

    #af-main .afx-fact:last-child {
        border-bottom: none;
    }

    #af-main .afx-fact:nth-child(3) {
        grid-column: auto;
        border-top: none;
    }

    #af-main .afx-fact-label {
        flex: none;
    }

    #af-main .afx-fact-value {
        font-size: 14px;
        text-align: right;
    }

    #af-main .afx-chip {
        padding: 6px 12px;
        font-size: 11.5px;
    }

    #af-main .afx-block {
        padding: 24px 20px 26px;
        border-radius: var(--afx-radius);
    }

    #af-main .afx-prose {
        font-size: 15px;
    }

    #af-main .afx-highlight {
        padding: 13px 15px;
    }

    #af-main .afx-highlight-text {
        font-size: 14px;
    }

    #af-main .afx-cta-title {
        font-size: 23px;
    }

    #af-main .afx-empty {
        padding: 64px 20px;
    }

    #af-main .afx-empty-title {
        font-size: 20px;
    }

    .afx-archive-title {
        font-size: 27px;
    }

    #af-main .afx-related-title {
        font-size: 22px;
    }

    #af-main .afx-pagination .page-numbers {
        min-width: 38px;
        height: 38px;
        padding: 0 11px;
        font-size: 13px;
    }
}


/* ==========================================================================
   16. 超窄屏（< 380px）
   ========================================================================== */
@media (max-width: 380px) {
    #af-main .afx-stage-title {
        font-size: 26px;
    }

    #af-main .afx-card-body {
        padding: 18px 16px 20px;
    }

    #af-main .afx-card-title {
        font-size: 17px;
    }
}


/* ==========================================================================
   17. 打印样式
   ========================================================================== */
@media print {
    #af-main .afx-stage-panel,
    #af-main .afx-body-side,
    #af-main .afx-related,
    #af-main .afx-card-vr-flag {
        display: none !important;
    }

    #af-main .afx-stage {
        min-height: 0 !important;
        padding: 24px 0 !important;
        background: #FFFFFF !important;
        color: #000 !important;
    }

    #af-main .afx-stage-title,
    #af-main .afx-stage-lead {
        color: #000 !important;
        text-shadow: none !important;
    }
}


/* ==========================================================================
   18. 首屏文字层「鼠标穿透」值守（2026-09-20 徐哥要求）

   问题：首屏是 iframe 全景 + 上层文字的结构。文字层 z-index 高于 iframe，
        鼠标移进文字区域就被文字抓走（光标变 I 形、拖动变框选），
        全景完全收不到鼠标事件 —— 表现为「文字挡住了全景的交互区」。

   要求：鼠标在任何位置（包括文字正上方）都应归全景控制；
        文字本身不可选中、不可复制。

   做法：嵌入版文字层整体 pointer-events:none + user-select:none，
        事件直接穿透到下面的 iframe。

   本节点放在文件最末，作为权威兜底 —— 无论前面各断点（1100 / 820 / 620 /
   380）怎么写，这里的声明都排在最后，同特异性下必定生效。
   若哪天要做「文字上的可点击元素」，给该元素加 .afx-pe-auto 类即可。
   ========================================================================== */
.afx-archive-hero--embed .afx-shell,
.afx-archive-hero--embed .afx-shell * {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;       /* iOS 长按不弹「拷贝」菜单 */
}

.afx-archive-hero--embed .afx-pe-auto,
.afx-archive-hero--embed .afx-pe-auto * {
    pointer-events: auto;
    user-select: auto;
    -webkit-user-select: auto;
}

/* 静态版（无全景）不做穿透，保留正常文字可选中能力。 */