/* ==========================================================================
   逐项调整层 —— 每一项改动独立成块，便于单独回滚
   加载顺序：style.min.css 之后
   ========================================================================== */

/* ---------------------------------------------------------------- 01 顶栏
   悬浮胶囊条：离开页面顶部 10px，圆角 22px，毛玻璃背景 + 1px 描边 */
header.sticky-top {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 1030;
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 8px 30px -12px rgba(15, 23, 42, .18);
    overflow: visible;
    transition: background .3s ease, box-shadow .3s ease, top .3s ease;
}
header.sticky-top .container { height: 64px; }

/* logo：透明底矢量，完整落在胶囊顶栏内 */
header.sticky-top { overflow: visible; }
/* 胶囊内不再用 Bootstrap 居中容器，左右留等距内边距 */
header.sticky-top .container { max-width: none; padding-left: 20px !important; padding-right: 20px !important; }

/* 导航居中脱离布局流，logo 才能独立定位到「左沿 ~ 首页按钮」的中点 */
@media (min-width: 768px) {
    header.sticky-top .nav-pc {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
header.sticky-top .logo { margin-left: var(--logo-offset, 60px); }
header.sticky-top .logo { width: auto; height: auto; display: flex; align-items: center; flex: 0 0 auto; }
header.sticky-top .logo > a { display: flex; align-items: center; height: 100%; }
header.sticky-top .logo img {
    width: auto;
    height: 50px;
    max-height: 50px;
    max-width: none;
    object-fit: contain;
    border-radius: 0;
}
@media (max-width: 767px) {
    header.sticky-top .logo img { height: 38px; max-height: 38px; }
}

/* 滚动后略收紧、背景更实 */
body.scrolled header.sticky-top {
    top: 8px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 12px 34px -14px rgba(15, 23, 42, .26);
}
/* 滚动时只收紧 top 与背景，不改变高度，避免 logo 被压缩 */
body.scrolled header.sticky-top .container { height: 64px; }

/* 菜单项：选中/悬停为胶囊描边 */
header.sticky-top .menu ul > li > a {
    padding: 7px 14px;
    border-radius: 999px;
    transition: background .25s ease, color .25s ease;
}
header.sticky-top .menu ul > li > a:hover,
header.sticky-top .menu ul > li > a.active {
    background: rgba(15, 23, 42, .06);
}

/* ------------------------------------------------------- 02 移动端卡片堆叠
   参考 liukaidev.top：卡片 sticky，top 逐层 +34px，滚动时下一张压上来 */
@media (max-width: 767px) {

    .product-list {
        display: block !important;
    }

    .product-item {
        width: 100% !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
        position: -webkit-sticky;
        position: sticky;
    }

    .product-item .product-item-wrapper {
        position: relative;
        border-radius: 26px;
        box-shadow: 0 10px 30px -16px rgba(15, 23, 42, .35);
        overflow: hidden;
    }

    /* 卡片顶部的毛玻璃边条：叠起来时露出的就是这条玻璃边 */
    .product-item .product-item-wrapper::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 30px;
        z-index: 3;
        background: rgba(255, 255, 255, .55);
        -webkit-backdrop-filter: blur(12px) saturate(160%);
        backdrop-filter: blur(12px) saturate(160%);
        border-bottom: 1px solid rgba(15, 23, 42, .06);
        border-radius: 26px 26px 0 0;
        pointer-events: none;
    }

    /* 逐层偏移：每张卡停留的位置比上一张低 34px */
    .product-item:nth-child(1) { top: 84px;  z-index: 1; }
    .product-item:nth-child(2) { top: 118px; z-index: 2; }
    .product-item:nth-child(3) { top: 152px; z-index: 3; }
    .product-item:nth-child(4) { top: 186px; z-index: 4; }
    .product-item:nth-child(5) { top: 220px; z-index: 5; }
    .product-item:nth-child(6) { top: 254px; z-index: 6; }
    .product-item:nth-child(7) { top: 288px; z-index: 7; }
    .product-item:nth-child(8) { top: 322px; z-index: 8; }

    /* 移动端不做整卡放大（触屏无 hover），改成按下微缩 */
    .product-item .product-item-wrapper:hover {
        top: 0;
        -webkit-transform: none;
        transform: none;
        box-shadow: 0 -2px 0 rgba(255, 255, 255, .9) inset,
                    0 10px 30px -16px rgba(15, 23, 42, .35);
    }
    .product-item .product-item-wrapper:active {
        -webkit-transform: scale(.985);
        transform: scale(.985);
    }
}

/* ------------------------------------------------- 03 移动端菜单：悬浮圆角面板 */
@media (max-width: 767px) {
    .nav-pc .menu .show-on-mobile {
        top: 84px;
        left: 10px;
        right: 10px;
        width: auto;
        height: auto;
        max-height: calc(100vh - 104px);
        padding: 8px;
        border: 1px solid rgba(15, 23, 42, .08);
        border-top: 1px solid rgba(15, 23, 42, .08);
        border-radius: 22px;
        background: rgba(255, 255, 255, .86);
        -webkit-backdrop-filter: saturate(180%) blur(22px);
        backdrop-filter: saturate(180%) blur(22px);
        box-shadow: 0 24px 56px -24px rgba(15, 23, 42, .38);
        z-index: 1040;
        overflow-y: auto;
    }

    .nav-pc .menu .show-on-mobile > li {
        float: none;
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid rgba(15, 23, 42, .06);
    }
    .nav-pc .menu .show-on-mobile > li:last-child { border-bottom: 0; }

    .nav-pc .menu .show-on-mobile > li > a {
        display: block;
        padding: 15px 14px;
        border-radius: 14px;
        font-size: 15px;
        color: #0f172a;
        transition: background .2s ease;
    }
    .nav-pc .menu .show-on-mobile > li > a:hover,
    .nav-pc .menu .show-on-mobile > li > a.active {
        background: rgba(15, 23, 42, .05);
    }
}

/* ------------------------------------------------------- 04 搜索面板层级修复
   顶栏改为 fixed 胶囊后，搜索面板（absolute 覆盖整条 header）被内容盖住 */
header.sticky-top .search-wrapper {
    z-index: 1045;
    top: 0;
    height: 64px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
}

/* ==========================================================================
   05 圆角 + 毛玻璃语言全局铺开
   --------------------------------------------------------------------------
   毛玻璃要有"东西可透"才成立，所以先给页面铺一层柔和色晕，
   再让顶栏、卡片、留言区、页脚都变成半透明 + 模糊。
   ========================================================================== */

/* 页面底色：三层极淡色晕，固定不随滚动 */
html {
    background-color: #edf1f8;
    background-image:
        radial-gradient(760px 460px at 10% 4%, rgba(11, 95, 255, .10), transparent 62%),
        radial-gradient(680px 420px at 92% 26%, rgba(122, 92, 255, .10), transparent 62%),
        radial-gradient(820px 520px at 46% 96%, rgba(0, 176, 176, .08), transparent 62%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
body { background-color: transparent; }

/* 让各区块露出底色，卡片才能透出后面的色晕 */
.case-wrapper,
.custom-wrapper,
.news-wrapper { background-color: transparent !important; }

/* --------------------------------------------------------- 05-1 顶栏真毛玻璃 */
header.sticky-top {
    background-color: rgba(255, 255, 255, .66) !important;
    -webkit-backdrop-filter: saturate(180%) blur(26px);
    backdrop-filter: saturate(180%) blur(26px);
    border: 1px solid rgba(255, 255, 255, .62);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
                0 14px 40px -20px rgba(15, 23, 42, .38);
}
body.scrolled header.sticky-top {
    background-color: rgba(255, 255, 255, .84) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset,
                0 18px 46px -22px rgba(15, 23, 42, .45);
}
header.sticky-top .search-wrapper {
    background-color: rgba(255, 255, 255, .72) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
}

/* ------------------------------------------------------------ 05-2 首页大图 */
.main-slider.banner-pc {
    margin: 8px;
    border-radius: 30px;
    overflow: hidden;
}

/* ------------------------------------------------------------ 05-3 资讯卡 */
.news-item {
    background: rgba(255, 255, 255, .62) !important;
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 22px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset,
                0 20px 44px -26px rgba(15, 23, 42, .35) !important;
    overflow: hidden !important;
}
.news-item:hover {
    background: rgba(255, 255, 255, .8) !important;
}

/* ------------------------------------------------------------ 05-4 案例卡 */
.case-wrapper .swiper-slide > a {
    display: block;
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset,
                0 20px 44px -26px rgba(15, 23, 42, .35);
    transition: transform .4s ease, box-shadow .4s ease, background .3s ease;
}
.case-wrapper .swiper-slide > a:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .8);
}
.case-wrapper .swiper-slide-img { border-radius: 22px 22px 0 0; overflow: hidden; }
.case-wrapper .case-content-wrapper { padding: 18px 20px 22px; }

/* --------------------------------------------------------- 05-5 留言区玻璃面板 */
.contact-wrapper {
    margin: 0 8px 8px;
    border-radius: 30px;
    background:
        radial-gradient(680px 320px at 14% 0%, rgba(11, 95, 255, .46), transparent 62%),
        rgba(13, 20, 34, .93) !important;
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset,
                0 30px 70px -40px rgba(15, 23, 42, .6);
    overflow: hidden;
}
.contact-wrapper .contact-form input {
    border-radius: 16px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.contact-wrapper .contact-form button {
    border-radius: 16px;
}

/* ------------------------------------------------------------ 05-6 页脚 */
footer {
    margin: 0 8px 8px;
    border-radius: 30px;
    background: rgba(13, 18, 28, .94) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset,
                0 24px 60px -36px rgba(15, 23, 42, .6);
    overflow: hidden;
}

/* ---------------------------------------------------- 05-7 小屏：统一圆角尺度 */
@media (max-width: 767px) {
    .main-slider.banner-pc { margin: 6px; border-radius: 24px; }
    .contact-wrapper, footer { margin: 0 6px 6px; border-radius: 24px; }
    .news-item, .case-wrapper .swiper-slide > a { border-radius: 18px; }
}

/* ---------------------------------------------------- 05-8 产品卡圆角对齐 */
.product-item .product-item-wrapper {
    border-radius: 20px;
    overflow: hidden;
}

/* ------------------------------------------- 05-9 公司简介配图圆角 */
.custom-wrapper .custom-img img,
.custom-wrapper img.custom-img { border-radius: 24px; }
@media (max-width: 767px) {
    .product-item .product-item-wrapper { border-radius: 18px; }
    .custom-wrapper .custom-img img,
    .custom-wrapper img.custom-img { border-radius: 18px; }
}

/* ---------------------------------------------------------- 05-10 内页大图 */
.neibanner {
    margin: 10px 8px 0;
    border-radius: 30px;
    overflow: hidden;
}
@media (max-width: 767px) {
    .neibanner { margin: 6px 6px 0; border-radius: 24px; height: 240px; }
}

/* ------------------------------------------------------- 05-11 列表筛选面板 */
.product-filter {
    background: rgba(255, 255, 255, .62) !important;
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 22px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset,
                0 20px 44px -26px rgba(15, 23, 42, .35);
}
@media (max-width: 767px) {
    .product-filter { border-radius: 18px; }
}


/* ------------------------------------------------- 06 导航下拉箭头去白底 */
header.sticky-top .menu-dropdown-icon > a::after {
    content: "";
    display: inline-block;
    float: none;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    margin-bottom: 3px;
    background: none;
    border: 0;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    font-family: inherit;
    vertical-align: middle;
    transform: rotate(45deg);
    transition: transform .25s ease;
}
header.sticky-top .menu-dropdown-icon:hover > a::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

/* --------------------------------------- 07 桌面端产品横栏（滚轮横向滑动） */
@media (min-width: 768px) {
    .product-wrapper:not(.page-list) .product-list {
        /* 横栏铺满整屏：用负 margin 把容器「撕开」到视口两侧，
           左右各留 8px 余量，避免 100vw 含滚动条导致横向溢出 */
        --gutter: calc((100% - 100vw) / -2 - 8px);
        /* 从左内边距到视口右缘的可用宽度，三张刚好铺满，另留 24px 露出第四张 */
        --avail: calc(100% + var(--gutter) - 8px);
        --card: calc((var(--avail) - 2 * 24px) / 3 - 24px);

        display: flex;
        flex-wrap: nowrap;
        gap: 24px;
        width: auto;
        margin: 10px calc(-1 * var(--gutter)) 0;
        padding: 8px var(--gutter) 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        /* 隐藏滚动条：仍可滚轮/触控板/拖动横向滚动 */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .product-wrapper:not(.page-list) .product-list::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .product-wrapper:not(.page-list) .product-list .product-item {
        flex: 0 0 var(--card);
        width: var(--card);
        max-width: var(--card);
        margin: 0;
        padding: 0 !important;
    }
}

/* ------------------------------------------------- 06 导航下拉箭头去白底 */
header.sticky-top .menu-dropdown-icon > a::after {
    content: "";
    display: inline-block;
    float: none;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    margin-bottom: 3px;
    background: none;
    border: 0;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    font-family: inherit;
    vertical-align: middle;
    transform: rotate(45deg);
    transition: transform .25s ease;
}
header.sticky-top .menu-dropdown-icon:hover > a::after {
    transform: rotate(225deg) translate(-2px, -2px);
}


/* 顶栏改为 fixed 后脱离文档流，正文需要补上它的占位高度，
   否则首页大屏 / 内页大图会被胶囊盖住一截 */
main { padding-top: 78px; }          /* 10px 悬浮间距 + 60px 胶囊 + 8px 留白 */
@media (max-width: 767px) {
    main { padding-top: 74px; }
}

/* -------------------------------------------------- 08 横栏卡片等高对齐
   卡片标题/描述行数不同会拉出不同高度，这里让整卡拉伸对齐，
   价格与 MORE 固定在底部，图片区裁成等比高度 */
@media (min-width: 768px) {
    .product-list {
        align-items: stretch;
    }
    .product-list .product-item {
        display: flex;
    }
    .product-list .product-item-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    .product-list .pic {
        flex: 0 0 auto;
    }
    .product-list .content-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }
    .product-list .product-item-title {
        margin-bottom: 6px;
    }
    .product-list .product-item-info {
        flex: 1 1 auto;
    }
    .product-list .product-item-bottom {
        flex: 0 0 auto;
        margin-top: auto;
    }
}

/* ============================================ 09 右下角悬浮按钮：logo 收纳 + 气泡
   收起时只有一个圆形 logo；鼠标移上去，其余按钮从 logo 里依次弹出。
   单独 hover / focus 某一项时在左侧显示气泡（微信显示二维码）。
   注意：
   1. 老样式 #backTop span / #backTop span i 会连带命中气泡里的 <span>，
      所以这里只用 #backTop > .fb-item 限定直接子元素，气泡样式全部显式复位。
   2. 老样式有 !important（#backTop span#gttop、border-radius 等），对应处保持 !important。 */
#backTop {
    --fb-size: 52px;
    --fb-logo: 58px;
    --fb-icon: 17px;
    position: fixed !important;
    right: clamp(16px, 3vw, 26px);
    bottom: clamp(18px, 3vh, 30px);
    top: auto !important;
    transform: none !important;
    z-index: 900;
    display: flex;
    /* 注意：用 column 不用 column-reverse。DOM 里 logo 是最后一项，
       主轴上排在末尾 = 贴在容器底部；反过来会让 logo 跑到整列顶端、远离右下角 */
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none !important;
    /* 容器不吃点击，避免收起时挡住页面内容；按钮自己打开 */
    pointer-events: none;
}

/* ---------- 圆钮（只作用于直接子元素，别碰到气泡） ---------- */
#backTop > .fb-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--fb-size);
    height: var(--fb-size);
    margin: 0;
    padding: 0;
    right: auto;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 12px 26px -16px rgba(15, 23, 42, .55), 0 1px 2px rgba(15, 23, 42, .06);
    color: #0f172a;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    transition: transform .38s cubic-bezier(.16, 1, .3, 1),
                opacity .24s ease,
                box-shadow .28s ease,
                background .28s ease,
                visibility .38s;
    will-change: transform, opacity;
}
#backTop > .fb-item > i {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    line-height: 1;
    font-size: var(--fb-icon);
    color: var(--primary-color);
    transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 收起 / 展开：从 logo 位置依次弹出 ----------
   收起时用 visibility:hidden，避免 Tab 能聚焦到看不见的按钮 */
#backTop > .fb-item:not(.fb-logo) {
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px) scale(.35);
    pointer-events: none;
}
#backTop > .fb-item:not(.fb-logo):nth-child(1) { --fb-i: 3; }
#backTop > .fb-item:not(.fb-logo):nth-child(2) { --fb-i: 2; }
#backTop > .fb-item:not(.fb-logo):nth-child(3) { --fb-i: 1; }

#backTop:hover > .fb-item:not(.fb-logo),
#backTop.is-open > .fb-item:not(.fb-logo) {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition-delay: calc(var(--fb-i, 0) * 45ms);
}
/* 键盘 Tab 进来也展开。单独放 @supports 里：
   不支持 :has 的老浏览器只会少这一条，上面的 hover 不受影响 */
@supports selector(:has(*)) {
    #backTop:has(> .fb-item:focus-visible) > .fb-item:not(.fb-logo) {
        visibility: visible;
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        transition-delay: calc(var(--fb-i, 0) * 45ms);
    }
    #backTop:has(> .fb-item:focus-visible) > #gttop::before {
        opacity: 1;
        transform: scale(1);
    }
    #backTop:has(> .fb-item:focus-visible) > #gttop {
        box-shadow: 0 18px 34px -16px rgba(15, 23, 42, .55);
    }
    #backTop:has(> .fb-item:focus-visible) > #gttop img {
        transform: scale(1.05);
    }
}

/* 单项 hover / focus：轻微上浮 + 图标跟着放大一点 */
#backTop > .fb-item:not(.fb-logo):hover,
#backTop > .fb-item:not(.fb-logo):focus-visible {
    background: #fff;
    box-shadow: 0 16px 30px -14px rgba(15, 23, 42, .5);
    transform: translateY(-2px) scale(1.06) !important;
}
#backTop > .fb-item:hover > i,
#backTop > .fb-item:focus-visible > i {
    transform: scale(1.08);
}

/* ---------- logo 主按钮（返回顶部） ---------- */
#backTop > #gttop {
    width: var(--fb-logo);
    height: var(--fb-logo);
    background: #fff !important;
    border-color: rgba(15, 23, 42, .07) !important;
}
#backTop > #gttop img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}
/* 返回箭头：只在触屏展开后出现（桌面有 hover，不需要） */
#backTop > #gttop .fb-arrow { display: none; }
/* hover 时 logo 外圈浮出一道光环，暗示"里面还有东西" */
#backTop > #gttop::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid rgba(36, 96, 242, .25);
    opacity: 0;
    transform: scale(.86);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
#backTop:hover > #gttop::before,
#backTop.is-open > #gttop::before {
    opacity: 1;
    transform: scale(1);
}
#backTop:hover > #gttop,
#backTop.is-open > #gttop {
    box-shadow: 0 18px 34px -16px rgba(15, 23, 42, .55);
}
#backTop:hover > #gttop img,
#backTop.is-open > #gttop img {
    transform: scale(1.05);
}

/* ---------- 气泡（左侧弹出） ---------- */
#backTop .fb-tip {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    left: auto;
    bottom: auto;
    width: auto;
    height: auto;
    display: block;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, .94);
    box-shadow: 0 12px 28px -14px rgba(15, 23, 42, .6);
    color: #fff;
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(6px, -50%);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
#backTop .fb-tip::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 2px;
    background: rgba(15, 23, 42, .94);
    transform: rotate(45deg);
}
/* 只有 hover 或键盘 Tab 到按钮上才出气泡；鼠标点过不保持（焦点不算） */
#backTop > .fb-item:hover > .fb-tip,
#backTop > .fb-item:focus-visible > .fb-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}
/* logo 的气泡晚一点出来，避免和展开动画抢戏 */
#backTop > #gttop:hover > .fb-tip,
#backTop > #gttop:focus-visible > .fb-tip {
    transition-delay: .5s, .5s, .5s;
}

/* 微信二维码气泡 */
#backTop .fb-tip.fb-qr {
    padding: 8px;
    line-height: 0;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 16px 34px -16px rgba(15, 23, 42, .55);
}
#backTop .fb-tip.fb-qr::after { background: #fff; }
#backTop .fb-tip.fb-qr img {
    width: 132px;
    height: 132px;
    object-fit: contain;
    border-radius: 8px;
}

/* 键盘可见焦点圈 */
#backTop > .fb-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ---------- 触屏：没有 hover，改由 JS 接管点击 ----------
   html.fb-touch 由 tweaks.js 在触屏设备上加上；
   万一 JS 没跑，这个类就不存在，退回“按钮常显”，至少还能点到 */
@media (hover: none) {
    html.fb-touch #backTop:not(.is-open) > .fb-item:not(.fb-logo) {
        visibility: hidden;
        opacity: 0;
        transform: translateY(12px) scale(.35);
        pointer-events: none;
    }
    /* 展开后 logo 换成返回箭头，点它就是回顶 */
    html.fb-touch #backTop.is-open > #gttop img { display: none; }
    html.fb-touch #backTop.is-open > #gttop .fb-arrow { display: block; }
    /* 点微信弹出二维码浮层 */
    html.fb-touch #backTop.show-qr .fb-wx .fb-tip {
        opacity: 1;
        visibility: visible;
        transform: translate(0, -50%);
        pointer-events: auto;
    }
    #backTop > .fb-item:not(.fb-logo):active {
        transform: scale(.94) !important;
    }
}

/* ---------- 窄屏 ---------- */
@media (max-width: 767px) {
    #backTop {
        --fb-size: 44px;
        --fb-logo: 50px;
        --fb-icon: 16px;
        right: 14px;
        /* iPhone 底部小横条不被捂住 */
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        gap: 10px;
        -webkit-tap-highlight-color: transparent;
    }
    #backTop > #gttop img { width: 26px; height: 26px; }
    /* 窄屏二维码小一号，保证气泡不出视口 */
    #backTop .fb-tip.fb-qr img { width: 112px; height: 112px; }
    #backTop .fb-tip { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    #backTop > .fb-item,
    #backTop > .fb-item > i,
    #backTop > #gttop img,
    #backTop .fb-tip { transition: none !important; }
}