/* =============================================================================
   优益优 全站导航栏设计系统  nav.css   v1.1 (2026-10-08)
   -----------------------------------------------------------------------------
   加载位置：theme/qinxue/pc/frame.blade.php 与 m/frame.blade.php 的 headAppend 末尾
             （晚于 style.css / mobile.css / origin-style.css，改这里即可覆盖）
   回滚方法：删掉两个 frame 里的 <link> 即可，本文件不动任何原始规则。

   设计取向「科技感」的落点（与站点品牌蓝 + 条幅视觉语言统一）：
     · 品牌蓝 #0062c0 → 科技青 #22b6e6 的渐变，用于：底部扫描线 / 悬停下划线 / 强调条
     · 玻璃拟态（半透明 + backdrop-filter）的吸顶栏，滚动时自动收窄变成「紧凑态」
     · 全部动效只跑 transform / opacity（合成层），不触发布局重排
     · 悬停有下划线由中心展开 + 底部冷光晕；下拉用位移+缩放+逐项错峰入场
     · prefers-reduced-motion 下全部动效降为瞬时

   配套 JS：theme/qinxue/js/nav.js（滚动紧凑态、当前项标记、入场动画编排）
   ============================================================================= */

/* ---------- 设计令牌 ---------- */
header.ub-header-b,
header.m-header,
nav.m-drawer {
    --nav-brand: #0062c0;
    --nav-brand-2: #22b6e6;          /* 科技青（与品牌蓝同色系，提亮用） */
    --nav-brand-dark: #004e96;
    --nav-brand-lit: #0b74d4;
    --nav-text: #16233a;             /* 比原 #333 更冷的深蓝黑，层级更清晰 */
    --nav-text-sub: #4a5a70;
    --nav-line: rgba(0, 98, 192, .10);
    --nav-ease: cubic-bezier(.22, 1, .36, 1);   /* 收尾缓出，回弹感 */
    --nav-ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --nav-h: 68px;
    --nav-h-sm: 56px;
    --nav-radius: 11px;
}

/* =============================================================================
   一、PC 端（≥801px）
   ============================================================================= */
@media (min-width: 50.0625rem) {

    /* ---------- 1.1 吸顶栏本体 ---------- */
    header.ub-header-b {
        position: sticky;
        top: 0;                       /* 覆盖 core 的 top:-3.75rem（原来滚一点就消失、滚过 180px 再弹回，很跳） */
        z-index: 2000;
        height: var(--nav-h);
        background: rgba(255, 255, 255, .86);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        box-shadow:
            inset 0 -1px 0 var(--nav-line),
            0 6px 24px -14px rgba(3, 35, 74, .20);
        transition:
            height .3s var(--nav-ease),
            background-color .3s var(--nav-ease),
            box-shadow .3s var(--nav-ease);
        will-change: height;
    }

    /* 浏览器不支持毛玻璃时退回纯白，避免内容透出来变糊 */
    @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
        header.ub-header-b { background: #fff; }
    }

    /* 底部品牌渐变扫描线（静态基线） */
    header.ub-header-b::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 1.5px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(0, 98, 192, .32) 16%,
            rgba(34, 182, 230, .85) 50%,
            rgba(0, 98, 192, .32) 84%,
            transparent 100%);
        opacity: .5;
        transition: opacity .3s var(--nav-ease);
        pointer-events: none;
    }

    /* 首次加载时沿扫描线扫过一道高光（一次性）
       类名与「导航项入场」的 .is-nav-ready 分开，避免两者时间轴互相打断 */
    header.ub-header-b::before {
        content: '';
        position: absolute;
        left: 0; bottom: 0;
        height: 1.5px;
        width: 26%;
        background: linear-gradient(90deg, transparent, rgba(34, 182, 230, .95), transparent);
        opacity: 0;
        pointer-events: none;
    }
    header.ub-header-b.nav-scan::before {
        animation: navScan 1.05s var(--nav-ease) .16s 1 both;
    }
    @keyframes navScan {
        0%   { opacity: 0; transform: translateX(-40%); }
        18%  { opacity: 1; }
        82%  { opacity: 1; }
        100% { opacity: 0; transform: translateX(420%); }
    }

    /* 滚动紧凑态 */
    header.ub-header-b.is-nav-scrolled {
        height: var(--nav-h-sm);
        background: rgba(255, 255, 255, .94);
        box-shadow:
            inset 0 -1px 0 var(--nav-line),
            0 12px 32px -16px rgba(3, 35, 74, .34);
    }
    header.ub-header-b.is-nav-scrolled::after { opacity: 1; }

    /* core 里有一条 `html.body-scroll-far .ub-header-b{top:0;box-shadow:var(--box-shadow)}`
       （选择器权重 0,2,1），一旦页面滚过 180px，它会把我上面写好的阴影整条替换掉。
       这里用权重更高的写法（0,2,2）把它按回本设计系统的阴影。 */
    html.body-scroll-far header.ub-header-b {
        top: 0;
        box-shadow:
            inset 0 -1px 0 var(--nav-line),
            0 6px 24px -14px rgba(3, 35, 74, .20);
    }
    html.body-scroll-far header.ub-header-b.is-nav-scrolled {
        box-shadow:
            inset 0 -1px 0 var(--nav-line),
            0 12px 32px -16px rgba(3, 35, 74, .34);
    }

    /* ---------- 1.2 容器：与内页条幅 .pb-hero .pb-in 完全对齐（同 1550/40） ---------- */
    header.ub-header-b .ub-container {
        display: flex;
        align-items: center;
        height: 100%;
        max-width: 1550px;
        margin: 0 auto;
        padding: 0 40px;
    }

    /* ---------- 1.3 Logo ---------- */
    header.ub-header-b .logo {
        float: none;
        margin: 0;
        padding: 0;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }
    header.ub-header-b .logo > a {
        height: auto;
        line-height: 1;
        display: flex;
        align-items: center;
    }
    header.ub-header-b .logo img {
        height: 44px;
        width: auto;
        display: block;
        transition: height .3s var(--nav-ease), transform .45s var(--nav-ease), filter .3s ease;
    }
    header.ub-header-b.is-nav-scrolled .logo img { height: 36px; }
    header.ub-header-b .logo > a:hover img {
        transform: translateY(-1px) scale(1.02);
        filter: drop-shadow(0 4px 10px rgba(0, 98, 192, .28));
    }

    /* ---------- 1.4 导航条：改为 flex、右对齐、禁止换行 ---------- */
    header.ub-header-b .nav {
        display: flex;
        align-items: center;
        justify-content: flex-end;    /* 原来靠左、右侧空 400+px，右对齐后与内容右缘齐平 */
        flex-wrap: nowrap;
        gap: 2px;
        height: 100%;
        padding: 0;
        margin-left: auto;
        min-width: 0;
    }

    /* 顶层项统一为一套尺寸：高度一致、左右内边距一致（原来「首页」60px 内边距、其余 14px，宽窄不齐） */
    header.ub-header-b .nav > a,
    header.ub-header-b .nav .nav-item {
        position: relative;
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        height: 42px;
        padding: 0 18px;
        border-radius: var(--nav-radius);
        font-size: 15.5px;
        font-weight: 600;
        letter-spacing: .012em;
        line-height: 1;
        color: var(--nav-text);
        background: transparent;
        white-space: nowrap;
        transition:
            color .22s ease,
            background-color .26s ease,
            transform .3s var(--nav-ease);
    }

    /* 干掉 core 给子项的 line-height:2.5rem / 内边距，全部由外层统一控制 */
    header.ub-header-b .nav .nav-item > .sub-title {
        display: flex;
        align-items: center;
        height: 100%;
        line-height: 1;
        cursor: pointer;
    }
    header.ub-header-b .nav .nav-item > .sub-title > a {
        padding: 0;
        margin: 0;
        height: auto;
        line-height: 1;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
        color: inherit;
        border-radius: 0;
        background: transparent;
    }

    /* ---------- 1.5 下划线「光条」+ 冷光晕（悬停由中心展开） ----------
       注意：这条光条只给「没有下拉」的顶层项（.nav > a）。
       有下拉的项（.nav-item）不要这条蓝线 —— 用户反馈「只要有下拉的导航条上
       都多显示一条蓝色的线」，属于多余装饰。带下拉的项靠 1.7 节的淡蓝底 +
       品牌蓝文字 + 加粗来表达当前页与悬停态，不需要再叠一条线。 */
    header.ub-header-b .nav > a::after {
        content: '';
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 7px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--nav-brand), var(--nav-brand-2));
        box-shadow: 0 0 10px rgba(0, 98, 192, .50), 0 0 3px rgba(34, 182, 230, .85);
        transform: scaleX(0);
        transform-origin: 50% 50%;
        opacity: 0;
        pointer-events: none;
        transition: transform .36s var(--nav-ease), opacity .24s ease;
    }


    /* 悬停桥接：让鼠标从导航项落到下拉卡片时不会「掉出」hover 区 */
    header.ub-header-b .nav .nav-item::before {
        content: '';
        position: absolute;
        left: -4px;
        right: -4px;
        top: 100%;
        height: 18px;
        background: transparent;
    }

    /* 悬停：文字转品牌蓝 + 底部冷光晕 + 上浮 1px + 下划线展开 */
    header.ub-header-b .nav > a:hover,
    header.ub-header-b .nav .nav-item:hover {
        color: var(--nav-brand);
        background:
            radial-gradient(130% 105% at 50% 118%,
                rgba(0, 98, 192, .11) 0%,
                rgba(34, 182, 230, .05) 42%,
                rgba(0, 98, 192, 0) 68%);
        transform: translateY(-1px);
    }
    header.ub-header-b .nav > a:hover::after {
        transform: scaleX(1);
        opacity: 1;
    }

    /* 当前页：常亮下划线 + 淡底 + 加粗，与悬停态形成「强/弱」两级 */
    header.ub-header-b .nav > a.active,
    header.ub-header-b .nav .nav-item.is-active {
        color: var(--nav-brand);
        font-weight: 700;
        background: linear-gradient(180deg, rgba(0, 98, 192, .085), rgba(0, 98, 192, .015));
    }
    header.ub-header-b .nav > a.active::after {
        transform: scaleX(1);
        opacity: 1;
    }


    /* ---------- 1.6 父项指示箭头：core 的实心三角 → 细线 chevron，悬停翻转 ---------- */
    header.ub-header-b .nav .nav-item > .sub-title > a::after {
        content: '';
        display: inline-block;
        width: 5px;
        height: 5px;
        margin-left: 7px;
        margin-bottom: 2px;
        border: 0;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        border-radius: 0 0 1px 0;
        transform: rotate(45deg);
        vertical-align: middle;
        opacity: .55;
        transition: transform .3s var(--nav-ease), opacity .22s ease;
    }
    header.ub-header-b .nav .nav-item:hover > .sub-title > a::after {
        transform: rotate(225deg);
        opacity: 1;
    }
    header.ub-header-b .nav .nav-item.is-active > .sub-title > a::after { opacity: 1; }

    /* ---------- 1.7 下拉卡片：玻璃质感 + 渐变顶条 + 位移缩放入场 ---------- */
    header.ub-header-b .nav .nav-item .sub-nav {
        /* 隐藏态必须是 display:none 而不是 opacity:0 —— 否则这块绝对定位的面板
           即使看不见，也会参与「可滚动溢出区」计算：最后一个导航项（线上预约）
           的下拉会伸出视口右缘，把整页撑出横向滚动条（实测 1566px 越 10px、
           1024px 越 73px）。display:none 时它彻底不参与布局，从根上消除该问题。 */
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        min-width: 178px;
        padding: 10px;
        z-index: 99999;
        border-radius: 16px;
        border: 1px solid var(--nav-line);
        background-color: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        backdrop-filter: blur(16px) saturate(180%);
        box-shadow:
            0 1px 2px rgba(16, 24, 40, .04),
            0 12px 28px -8px rgba(16, 24, 40, .16),
            0 32px 60px -22px rgba(3, 35, 74, .26);
        transform-origin: 22px 0;
    }
    @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
        header.ub-header-b .nav .nav-item .sub-nav { background-color: #fff; }
    }

    /* 卡片顶部品牌渐变条 + 指向父项的小箭头 —— 两者都已移除。
       原先这里有两条装饰：
         ::before  卡片顶部 2px 蓝渐变条（绝对 y=64~66，紧贴导航文字下方的光条）
         ::after   指向父项的 10px 白色方块（绝对 y=58.5~68.5，视觉上是个「白点」）
       用户反馈「有下拉的导航条上多出一条蓝线和一个白点」，均属多余，已去掉。
       现在下拉卡片只保留玻璃卡片本身（圆角 + 描边 + 多层投影），
       顶边与导航之间靠 10px 间距 + 投影自然分隔。 */

    /* 展开：display 切到 block 的同时跑一段入场动画（display 不能 transition，只能上 animation） */
    header.ub-header-b .nav .nav-item:hover .sub-nav {
        display: block;
        animation: subNavIn .3s var(--nav-ease) both;
    }
    @keyframes subNavIn {
        from { opacity: 0; transform: translateY(10px) scale(.97); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ---------- 1.8 下拉项：13.5px / 左侧强调条 / 悬停右移 + 逐项错峰入场 ---------- */
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-item,
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-group-item {
        position: relative;
        display: flex;
        align-items: center;
        height: 38px;
        line-height: 38px;
        margin: 0;
        padding: 0 14px 0 16px;
        border-radius: 9px;
        font-size: 13.5px;
        font-weight: 500;
        letter-spacing: .015em;
        color: var(--nav-text-sub);
        background: transparent;
        white-space: nowrap;
        transition:
            color .2s ease,
            background-color .2s ease,
            padding-left .3s var(--nav-ease);
    }
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-item::before,
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-group-item::before {
        content: '';
        position: absolute;
        left: 6px;
        top: 50%;
        width: 2.5px;
        height: 0;
        border-radius: 2px;
        background: linear-gradient(180deg, var(--nav-brand), var(--nav-brand-2));
        transform: translateY(-50%);
        transition: height .3s var(--nav-ease);
    }
    /* 展开时逐项错峰滑入 */
    header.ub-header-b .nav .nav-item:hover .sub-nav > .sub-nav-item,
    header.ub-header-b .nav .nav-item:hover .sub-nav > .sub-nav-group {
        animation: subItemIn .34s var(--nav-ease) both;
    }
    @keyframes subItemIn {
        from { opacity: 0; transform: translateX(-7px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-item:hover,
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-group-item:hover {
        color: var(--nav-brand);
        background: rgba(0, 98, 192, .075);
        padding-left: 23px;
    }
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-item:hover::before,
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-group-item:hover::before {
        height: 15px;
    }
    /* 当前页子项 */
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-item.active {
        color: var(--nav-brand);
        font-weight: 600;
        background: rgba(0, 98, 192, .06);
    }
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-item.active::before { height: 15px; }

    /* 逐项错峰（最多 9 项，够用） */
    header.ub-header-b .nav .nav-item:hover .sub-nav > *:nth-child(1) { animation-delay: .02s; }
    header.ub-header-b .nav .nav-item:hover .sub-nav > *:nth-child(2) { animation-delay: .05s; }
    header.ub-header-b .nav .nav-item:hover .sub-nav > *:nth-child(3) { animation-delay: .08s; }
    header.ub-header-b .nav .nav-item:hover .sub-nav > *:nth-child(4) { animation-delay: .11s; }
    header.ub-header-b .nav .nav-item:hover .sub-nav > *:nth-child(5) { animation-delay: .14s; }
    header.ub-header-b .nav .nav-item:hover .sub-nav > *:nth-child(6) { animation-delay: .17s; }
    header.ub-header-b .nav .nav-item:hover .sub-nav > *:nth-child(7) { animation-delay: .20s; }
    header.ub-header-b .nav .nav-item:hover .sub-nav > *:nth-child(8) { animation-delay: .23s; }
    header.ub-header-b .nav .nav-item:hover .sub-nav > *:nth-child(9) { animation-delay: .26s; }

    /* 三级菜单（本站暂无，留结构兜底） */
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-group { position: relative; }
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-group > .sub-nav-group-item::after {
        border-color: var(--nav-text-sub) transparent transparent transparent;
    }
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-group-nav {
        display: none;
        position: absolute;
        left: calc(100% + 4px);
        top: -10px;
        min-width: 160px;
        padding: 10px;
        border-radius: 14px;
        border: 1px solid var(--nav-line);
        background-color: #fff;
        box-shadow: 0 18px 40px -14px rgba(3, 35, 74, .3);
    }
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-group:hover > .sub-nav-group-nav { display: block; }

    /* ---------- 1.9 首屏入场：逐项错峰淡入上浮（JS 加 is-nav-ready 触发，动画结束后摘除避免与 hover 冲突） ---------- */
    header.ub-header-b.is-nav-ready .nav > a,
    header.ub-header-b.is-nav-ready .nav .nav-item {
        animation: navItemIn .5s var(--nav-ease) both;
    }
    header.ub-header-b.is-nav-ready .nav > *:nth-child(1) { animation-delay: .04s; }
    header.ub-header-b.is-nav-ready .nav > *:nth-child(2) { animation-delay: .09s; }
    header.ub-header-b.is-nav-ready .nav > *:nth-child(3) { animation-delay: .14s; }
    header.ub-header-b.is-nav-ready .nav > *:nth-child(4) { animation-delay: .19s; }
    header.ub-header-b.is-nav-ready .nav > *:nth-child(5) { animation-delay: .24s; }
    header.ub-header-b.is-nav-ready .nav > *:nth-child(6) { animation-delay: .29s; }
    header.ub-header-b.is-nav-ready .nav > *:nth-child(7) { animation-delay: .34s; }
    header.ub-header-b.is-nav-ready .nav > *:nth-child(8) { animation-delay: .39s; }
    header.ub-header-b.is-nav-ready .nav > *:nth-child(9) { animation-delay: .44s; }
    @keyframes navItemIn {
        from { opacity: 0; transform: translateY(-11px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    /* 动画播完就把 animation 摘掉，交还给 transition 管 hover 的 transform */
    header.ub-header-b.nav-anim-done .nav > a,
    header.ub-header-b.nav-anim-done .nav .nav-item { animation: none; }

    /* ---------- 1.10 中等屏宽收紧内边距，保证 801~1200px 一行排得下、绝不换行 ---------- */
    @media (max-width: 1400px) {
        header.ub-header-b .ub-container { padding: 0 28px; }
        header.ub-header-b .nav { gap: 0; }
        header.ub-header-b .nav > a,
        header.ub-header-b .nav .nav-item { padding: 0 14px; font-size: 15px; }
        header.ub-header-b .nav > a::after { left: 14px; right: 14px; }
        header.ub-header-b .nav .nav-item .sub-nav .sub-nav-item,
        header.ub-header-b .nav .nav-item .sub-nav .sub-nav-group-item { padding-left: 14px; }
    }
    @media (max-width: 1200px) {
        header.ub-header-b .ub-container { padding: 0 22px; max-width: 100%; }
        header.ub-header-b .logo img { height: 40px; }
        header.ub-header-b.is-nav-scrolled .logo img { height: 34px; }
        header.ub-header-b .nav > a,
        header.ub-header-b .nav .nav-item { padding: 0 11px; font-size: 14.5px; }
        header.ub-header-b .nav > a::after { left: 11px; right: 11px; }
        header.ub-header-b .nav .nav-item > .sub-title > a::after { margin-left: 5px; }
    }
    @media (max-width: 1040px) {
        header.ub-header-b .ub-container { padding: 0 16px; }
        header.ub-header-b .logo img { height: 36px; }
        header.ub-header-b.is-nav-scrolled .logo img { height: 31px; }
        header.ub-header-b .nav > a,
        header.ub-header-b .nav .nav-item { padding: 0 8px; font-size: 14px; }
        header.ub-header-b .nav > a::after { left: 8px; right: 8px; }
        header.ub-header-b .nav .nav-item > .sub-title > a::after {
            width: 4px; height: 4px; margin-left: 4px;
        }
    }

    /* 展开态下的遮罩层（PC 下 core 未启用，留空避免误触发） */
    header.ub-header-b .nav-toggle { display: none; }

    /* ---------- 1.9 兜底：显式压制下拉处的「蓝线 + 白点」 ----------
       为什么要显式写 content:none，而不是只在 1.5/1.7 里"删除"规则：

       1) ModStart 的 getPathWithHash() 会把 crc32(md5_file()) 用
          Cache::put($key, $hash, 0) 写入缓存，0 = 永不过期。
          一旦 nav.css 改动，这个哈希不会自动更新，页面输出的 ?哈希
          停在旧值；而 Apache 对 .css 返回 Cache-Control: max-age=2592000
          （30 天），浏览器就一直复用旧副本 —— 表现就是"代码改了、
          刷新也没变化"。本次用户反馈的白点就是这个原因（哈希 531955080
          停留在删除前的版本）。既然这套缓存机制随时可能再次让旧 CSS
          复活，这里的压制就必须写成"显式覆盖"而不是"依赖不存在"。

       2) core 主题（asset/theme/default/style.css）与站点基础样式里，
          任何一次升级都可能重新引入 .sub-nav 的顶部条 / 箭头 / 下划线。
          显式覆盖比"希望上游别加回来"可靠。

       3) 用 !important 是刻意的：这些伪元素不承载任何功能语义，
          关掉它们没有任何副作用，不值得为"权重打架"留下隐患。

       注意这里只压制 ::after 和 .sub-nav 的 ::before/::after，
       **不动** .nav-item::before —— 那是 1.5 节里的"悬停桥接"，
       鼠标从导航项移到下拉卡片时靠它不断开 hover，删掉会导致下拉闪断。 */
    header.ub-header-b .nav .nav-item::after,
    header.ub-header-b .nav .nav-item .sub-nav::before,
    header.ub-header-b .nav .nav-item .sub-nav::after,
    header.ub-header-b .nav a .sub-nav::before,
    header.ub-header-b .nav a .sub-nav::after {
        content: none !important;
    }
}

/* =============================================================================
   二、PC 模板的窄窗兜底（≤800px，正常手机走 m/ 模板，这里只保证不崩）
   ============================================================================= */
@media (max-width: 50rem) {
    /* core 的吸顶规则写在 min-width:50rem 里，800px 这个临界值会漏掉；
       这里补齐，窄窗下也始终吸顶可见，不再「滚一点就消失」。 */
    header.ub-header-b {
        position: sticky;
        top: 0;
        z-index: 2000;
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        box-shadow: inset 0 -1px 0 var(--nav-line), 0 6px 22px -14px rgba(3, 35, 74, .22);
    }
    header.ub-header-b::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 1.5px;
        background: linear-gradient(90deg, transparent, rgba(34, 182, 230, .8), transparent);
        pointer-events: none;
    }
    header.ub-header-b .nav-toggle { color: var(--nav-brand); }
    header.ub-header-b .nav .nav-item > .sub-title a::after { border-color: var(--nav-text-sub) transparent transparent transparent; }
    header.ub-header-b .nav .nav-item .sub-nav .sub-nav-item { font-size: 14px; font-weight: 500; }
}

/* =============================================================================
   三、移动端模板（header.m-header + nav.m-drawer）
   ============================================================================= */

/* ---------- 3.1 顶部栏 ---------- */
header.m-header {
    position: sticky;
    top: 0;
    z-index: 900;
    height: 58px;
    padding: 0 14px;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: inset 0 -1px 0 var(--nav-line), 0 6px 20px -14px rgba(3, 35, 74, .24);
    transition: height .28s var(--nav-ease), box-shadow .28s var(--nav-ease), background-color .28s var(--nav-ease);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    header.m-header { background: #fff; }
}
/* 移动端也保留一条品牌渐变扫描线，和 PC 视觉语言一致 */
header.m-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(0, 98, 192, 0) 0%,
        rgba(34, 182, 230, .85) 50%,
        rgba(0, 98, 192, 0) 100%);
    opacity: .55;
    pointer-events: none;
    transition: opacity .28s var(--nav-ease);
}
header.m-header.is-nav-scrolled {
    height: 52px;
    background: rgba(255, 255, 255, .96);
    box-shadow: inset 0 -1px 0 var(--nav-line), 0 10px 26px -16px rgba(3, 35, 74, .34);
}
header.m-header.is-nav-scrolled::after { opacity: 1; }

header.m-header .logo img {
    height: 30px;
    width: auto;
    transition: height .28s var(--nav-ease);
}
header.m-header.is-nav-scrolled .logo img { height: 27px; }

header.m-header .acts { gap: 7px; }

/* 导航内的电话键维持品牌蓝（fa-compat 里 .fa-phone-alt 的默认色是 logo 黄，
   这里是浅蓝底按键，黄字对比度太低，故显式回退为品牌蓝） */
header.m-header .act-tel i,
nav.m-drawer .d-tel i { color: var(--nav-brand); }
header.m-header .act-tel:active i { color: var(--nav-brand-dark); }

/* 电话：圆形 → 圆角方块，与整体几何语言统一 */
header.m-header .act-tel {
    width: 36px;
    height: 36px;
    border-radius: var(--nav-radius);
    background: rgba(0, 98, 192, .08);
    color: var(--nav-brand);
    font-size: 15px;
    transition: transform .22s var(--nav-ease), background-color .22s ease, color .22s ease;
}
header.m-header .act-tel:active {
    transform: scale(.9);
    background: rgba(0, 98, 192, .18);
    color: var(--nav-brand-dark);
}

/* 电话图标：assets/vendor/font-awesome/css/fa-compat.min.css 是个人工写的
   「FA6→FA4 兼容层」，里面 .fa-phone-alt:before 被定义了两次，后一条把 content
   覆盖成了字面 emoji「📞」（该文件自称 unicode fallbacks，共 10 个图标这样做）。
   彩色 emoji 字形会无视 CSS 的 color，所以原来这个电话键是粉红色的，跟品牌蓝不搭；
   而且该文件没有 @font-face，改回 \f095 也没字体可用。
   这里在导航这两处改用自带 mask 图形，用 currentColor 上色，不依赖任何图标字体。
   （其它页面的 emoji 图标不受影响，属既有问题，未在本次改动范围内。） */
header.m-header .act-tel i,
nav.m-drawer .d-tel i {
    display: flex;
    align-items: center;
    justify-content: center;
}
header.m-header .act-tel i::before,
nav.m-drawer .d-tel i::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.34 24.34 0 0 0-14.01-27.6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.34 24.34 0 0 0-14.01-27.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 在线报名：加高光内阴影 + 冷光投影，按下有回弹 */
header.m-header .act-apply {
    height: 34px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--nav-radius);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    background: linear-gradient(135deg, var(--nav-brand-lit), var(--nav-brand-dark));
    box-shadow:
        0 5px 14px -6px rgba(0, 98, 192, .85),
        inset 0 1px 0 rgba(255, 255, 255, .24);
    transition: transform .22s var(--nav-ease), box-shadow .22s var(--nav-ease);
}
header.m-header .act-apply:active {
    transform: scale(.95);
    box-shadow: 0 2px 8px -4px rgba(0, 98, 192, .9), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* 汉堡键：带底色的圆角按钮，三根线用品牌渐变 */
header.m-header .burger {
    width: 36px;
    height: 36px;
    gap: 5px;
    border-radius: var(--nav-radius);
    background: rgba(0, 98, 192, .06);
    transition: background-color .22s ease, transform .22s var(--nav-ease);
}
header.m-header .burger:active { transform: scale(.92); background: rgba(0, 98, 192, .16); }
header.m-header .burger i {
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--nav-brand-lit), var(--nav-brand-dark));
    transition: transform .34s var(--nav-ease), opacity .2s ease, width .34s var(--nav-ease);
}
body.m-nav-open header.m-header .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.m-nav-open header.m-header .burger i:nth-child(2) { opacity: 0; width: 0; }
body.m-nav-open header.m-header .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 3.2 遮罩 ---------- */
div.m-nav-mask {
    background: rgba(6, 22, 44, .46);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity .34s var(--nav-ease), visibility .34s;
}
body.m-nav-open div.m-nav-mask { opacity: 1; visibility: visible; }

/* ---------- 3.3 抽屉：改用 transform 位移（走合成层，比改 right 更顺） ---------- */
nav.m-drawer {
    position: fixed;
    top: 0;
    right: 0 !important;                 /* 覆盖 mobile.css 的 right:-78% 定位方式 */
    width: 82%;
    max-width: 340px;
    height: 100%;
    z-index: 950;
    display: flex;
    flex-direction: column;
    padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    /* 只写 overflow-y:auto 时浏览器会把 overflow-x 一并算成 auto。
       关闭态里 .d-link 有 translateX(16px) 的入场位移，会因此产生 4px 的横向可滚动溢出
       （抽屉关着看不见，但会给抽屉挂上一条横向滚动条）。显式裁掉。 */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: rgba(255, 255, 255, .985);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow: -26px 0 64px -26px rgba(3, 35, 74, .38);
    transform: translateX(102%);
    transition: transform .42s var(--nav-ease);
    will-change: transform;
}
body.m-nav-open nav.m-drawer { transform: translateX(0); }

/* 抽屉头：淡蓝渐变 + 扫描线 */
nav.m-drawer .d-head {
    position: relative;
    flex: 0 0 auto;
    height: 58px;
    padding: 0 14px 0 18px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--nav-line);
    background: linear-gradient(135deg, rgba(0, 98, 192, .075), rgba(34, 182, 230, .035) 58%, transparent);
}
nav.m-drawer .d-head::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(0, 98, 192, 0), rgba(34, 182, 230, .85), rgba(0, 98, 192, 0));
}
nav.m-drawer .d-head img { height: 26px; }
nav.m-drawer .d-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 20px;
    line-height: 1;
    color: #7b8a9e;
    background: rgba(0, 98, 192, .06);
    transition: transform .24s var(--nav-ease), background-color .22s ease, color .22s ease;
}
nav.m-drawer .d-close:active {
    transform: scale(.9) rotate(90deg);
    background: rgba(0, 98, 192, .15);
    color: var(--nav-brand);
}

/* 抽屉链接：圆角块 + 左侧强调条 + 逐项错峰滑入 */
nav.m-drawer a.d-link {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    margin: 2px 12px;
    padding: 0 12px 0 16px;
    border-bottom: none;
    border-radius: var(--nav-radius);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--nav-text);
    opacity: 0;
    transform: translateX(16px);
    transition:
        opacity .3s ease,
        transform .46s var(--nav-ease),
        background-color .24s ease,
        color .24s ease,
        padding-left .3s var(--nav-ease);
}
nav.m-drawer a.d-link::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--nav-brand), var(--nav-brand-2));
    transform: translateY(-50%);
    transition: height .3s var(--nav-ease);
}
body.m-nav-open nav.m-drawer a.d-link { opacity: 1; transform: translateX(0); }

/* 入场错峰（第 1~9 项）；第 10 项是底部电话块 */
body.m-nav-open nav.m-drawer a.d-link:nth-of-type(1) { transition-delay: .07s; }
body.m-nav-open nav.m-drawer a.d-link:nth-of-type(2) { transition-delay: .11s; }
body.m-nav-open nav.m-drawer a.d-link:nth-of-type(3) { transition-delay: .15s; }
body.m-nav-open nav.m-drawer a.d-link:nth-of-type(4) { transition-delay: .19s; }
body.m-nav-open nav.m-drawer a.d-link:nth-of-type(5) { transition-delay: .23s; }
body.m-nav-open nav.m-drawer a.d-link:nth-of-type(6) { transition-delay: .27s; }
body.m-nav-open nav.m-drawer a.d-link:nth-of-type(7) { transition-delay: .31s; }
body.m-nav-open nav.m-drawer a.d-link:nth-of-type(8) { transition-delay: .35s; }
body.m-nav-open nav.m-drawer a.d-link:nth-of-type(9) { transition-delay: .39s; }

nav.m-drawer a.d-link:active {
    background: rgba(0, 98, 192, .085);
    color: var(--nav-brand);
    padding-left: 21px;
    transform: scale(.985);
    transition-delay: 0s;             /* 按下必须立刻反馈，不吃入场延迟 */
}
nav.m-drawer a.d-link:active::before { height: 20px; }
nav.m-drawer a.d-link .arr {
    color: #b9c6d6;
    font-size: 15px;
    transition: transform .3s var(--nav-ease), color .22s ease;
}
nav.m-drawer a.d-link:active .arr { transform: translateX(3px); color: var(--nav-brand); }

/* 当前页高亮（nav.js 依据 location.pathname 打 .is-current） */
nav.m-drawer a.d-link.is-current {
    color: var(--nav-brand);
    background: linear-gradient(90deg, rgba(0, 98, 192, .10), rgba(0, 98, 192, .015));
}
nav.m-drawer a.d-link.is-current::before { height: 20px; }
nav.m-drawer a.d-link.is-current .arr { color: var(--nav-brand); }

/* 底部电话块：推到最下方，带冷光投影 */
nav.m-drawer .d-tel {
    flex: 0 0 auto;
    margin: auto 16px 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(135deg, var(--nav-brand-lit), var(--nav-brand-dark));
    box-shadow: 0 12px 26px -12px rgba(0, 98, 192, .85), inset 0 1px 0 rgba(255, 255, 255, .2);
    transition: transform .22s var(--nav-ease), box-shadow .22s var(--nav-ease);
}
nav.m-drawer .d-tel:active {
    transform: scale(.97);
    box-shadow: 0 4px 12px -6px rgba(0, 98, 192, .9), inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* 抽屉打开时锁住背景滚动 */
body.m-nav-open { overflow: hidden; }

/* 超窄屏（≤340px）进一步收，避免 logo 与按钮挤在一起 */
@media (max-width: 340px) {
    header.m-header { padding: 0 10px; }
    header.m-header .logo img { height: 27px; }
    header.m-header .act-apply { padding: 0 11px; font-size: 12px; }
    header.m-header .act-tel,
    header.m-header .burger { width: 33px; height: 33px; }
}

/* =============================================================================
   三·五、移动端兜底：同样压制下拉/抽屉里的多余装饰
   -----------------------------------------------------------------------------
   与 1.9 节同理 —— 写成显式覆盖而不是"依赖上游没有"，
   防止 core 升级或静态资源哈希缓存复活旧 CSS 时白点再出现。 */
header.m-header .nav-item::after,
header.m-header .nav-item .sub-nav::before,
header.m-header .nav-item .sub-nav::after,
nav.m-drawer .nav-item::after,
nav.m-drawer .nav-item .sub-nav::before,
nav.m-drawer .nav-item .sub-nav::after {
    content: none !important;
}
/* 抽屉里真正的「当前项」指示条是 .d-link::before（在 core 里有定义），
   它是导航语义的一部分，必须保留 —— 所以上面的选择器不含 d-link。
   同理 .d-head::after 是抽屉头部的品牌渐变分隔线（3.4 节自己画的），
   属于视觉语言的一部分，也不在压制范围内。 */

/* =============================================================================
   四、无障碍：用户系统开启「减少动态效果」时全部降为瞬时
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    header.ub-header-b,
    header.ub-header-b *,
    header.ub-header-b *::before,
    header.ub-header-b *::after,
    header.m-header,
    header.m-header *,
    header.m-header *::before,
    header.m-header *::after,
    nav.m-drawer,
    nav.m-drawer *,
    nav.m-drawer *::before,
    nav.m-drawer *::after,
    div.m-nav-mask {
        animation: none !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
    }
    nav.m-drawer { transform: none; right: -100% !important; }
    body.m-nav-open nav.m-drawer { right: 0 !important; }
    nav.m-drawer a.d-link { opacity: 1; transform: none; }
}