/* 移动端适配样式 */

/* 基础优化 */
* {
    box-sizing: border-box;
}

/* 移动端主样式 */
@media (max-width: 768px) {
    /* 基础响应式设置 */
    .min-w-1200px,
    .min-w-1392px {
        min-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    .w-1200px {
        width: 100% !important;
        padding: 0 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* 修复body和html的宽度 */
    body, html {
        width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 修复section容器的偏移 */
    section.min-w-1200px, section.w-1200px {
        margin: 0 !important;
        padding: 0 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* 修复div容器的偏移 */
    div.min-w-1200px, div.w-1200px {
        margin: 0 !important;
        padding: 0 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* 修复所有section的宽度 */
    section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }
    
    /* 导航栏移动端适配 */
    .h-80px {
        height: 60px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    
    .px-40 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* 隐藏移动端不需要的元素 */
    .w-80px {
        display: none !important;
    }
    
    /* 主标题移动端适配 */
    .text-48px\/80px {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    
    .text-64px\/80px {
        font-size: 32px !important;
        line-height: 40px !important;
    }
    
    /* 移动端功能介绍标题字体适配 */
    .text-48px\/68px {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    
    .text-32px\/68px {
        font-size: 16px !important;
        line-height: 24px !important;
    }
    
    /* 移动端功能介绍section位置调整 */
    section.mt-180px.min-w-1200px.w-1200px.mx-auto {
        position: relative !important;
        top: 150px !important;
    }
    
    /* 按钮移动端适配 */
    .w-200px {
        width: 160px !important;
    }
    
    .h-48px {
        height: 44px !important;
    }
    
    .ml-24px {
        margin-left: 12px !important;
    }
    
    /* 图标区域移动端适配 */
    .w-220px {
        width: 120px !important;
    }
    
    .scale-60 {
        transform: scale(0.8) !important;
    }
    
    /* 视频区域移动端适配 */
    .w-978px {
        width: 100% !important;
    }
    
    .w-960px {
        width: 100% !important;
    }
    
    .h-550px {
        height: auto !important;
    }
    
    /* 视频响应式 */
    video {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 移动端隐藏特定视频 */
    video[src="https://data.shendun.io/shendun.mp4"] {
        display: none !important;
    }
    
    /* 图片响应式 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 移动端减少icon显示数量 */
    .icon1, .icon2, .icon3, .icon4, .icon5, .icon6, .icon7, .icon8, .icon9, .icon10 {
        display: none !important;
    }
    
    /* 移动端显示前6个icon */
    .icon1, .icon2, .icon3, .icon4, .icon5, .icon6 {
        display: block !important;
    }
    
    /* 小屏幕移动端显示前5个icon */
    @media (max-width: 480px) {
        .icon1, .icon2, .icon3, .icon4, .icon5, .icon6, .icon7, .icon8, .icon9, .icon10 {
            display: none !important;
        }
        
        .icon1, .icon2, .icon3, .icon4, .icon5 {
            display: block !important;
        }
        
        .w-220px.object-contain.scale-60 {
            width: 100px !important;
            height: auto !important;
        }
        
            /* 小屏幕顶部文字额外间距 */
    .text-primary.text-center.font-900.whitespace-pre-line {
        padding-top: 0 !important;
    }
    }
    
    /* 中等屏幕移动端显示前7个icon */
    @media (min-width: 481px) and (max-width: 768px) {
        .icon1, .icon2, .icon3, .icon4, .icon5, .icon6, .icon7, .icon8, .icon9, .icon10 {
            display: none !important;
        }
        
        .icon1, .icon2, .icon3, .icon4, .icon5, .icon6, .icon7 {
            display: block !important;
        }
    }
    
    /* 移动端icon布局优化 */
    .mt-64.flex.justify-content.flex-wrap.gap-y-48 {
        justify-content: center !important;
        gap: 20px !important;
    }
    
    /* 移动端icon尺寸优化 */
    .w-220px.object-contain.scale-60 {
        width: 120px !important;
        height: auto !important;
    }
    
    /* 移动端隐藏功能介绍图片 */
    .w-600px.h-400px.rounded-24px.cursor-pointer.group.overflow-hidden {
        display: none !important;
    }
    
    /* 移动端隐藏AI引流体系背景图片 */
    .flex.h-372px.mt-60.rounded-24px.shadow-\[--shadow-1\].blur-16.overflow-hidden.relative.before\:absolute.before\:content-\[\'\'\].before\:top-0.before\:left-0.before\:w-full.before\:h-full.before\:bg-home-1,
    .flex.h-372px.mt-40.rounded-24px.shadow-\[--shadow-1\].blur-16.overflow-hidden.relative.before\:absolute.before\:content-\[\'\'\].before\:top-0.before\:left-0.before\:w-full.before\:h-full.before\:bg-home-2 {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    }
    
    .flex.h-372px.mt-60.rounded-24px.shadow-\[--shadow-1\].blur-16.overflow-hidden.relative.before\:absolute.before\:content-\[\'\'\].before\:top-0.before\:left-0.before\:w-full.before\:h-full.before\:bg-home-1::before,
    .flex.h-372px.mt-40.rounded-24px.shadow-\[--shadow-1\].blur-16.overflow-hidden.relative.before\:absolute.before\:content-\[\'\'\].before\:top-0.before\:left-0.before\:w-full.before\:h-full.before\:bg-home-2::before {
        display: none !important;
    }
    
    /* 移动端隐藏"为什么我们是最好的选择"部分的图片 */
    .w-100px.h-100px.object-contain {
        display: none !important;
    }
    
    /* 移动端隐藏升级套餐图片 */
    .upgrade-li img {
        display: none !important;
    }
    
    /* 移动端功能介绍布局优化 */
    .w-1120px.h-520px.bg-linear-20.wechat-shadow.tooltip-filter.tooltip-border.rounded-24px.flex.mt-60px.ml-80px {
        flex-direction: column !important;
        margin-left: 0 !important;
        padding: 24px !important;
    }
    
    /* 移动端功能介绍文字区域优化 */
    .flex-1.my-auto.ml-120px {
        margin-left: 0 !important;
        margin-top: 24px !important;
    }
    
    /* 移动端AI引流体系布局优化 */
    .flex.h-372px.mt-60.rounded-24px.shadow-\[--shadow-1\].blur-16.overflow-hidden.relative.before\:absolute.before\:content-\[\'\'\].before\:top-0.before\:left-0.before\:w-full.before\:h-full.before\:bg-home-1 .flex.flex-col.gap-56px.my-auto.ml-120px,
    .flex.h-372px.mt-40.rounded-24px.shadow-\[--shadow-1\].blur-16.overflow-hidden.relative.before\:absolute.before\:content-\[\'\'\].before\:top-0.before\:left-0.before\:w-full.before\:h-full.before\:bg-home-2 .flex.flex-col.gap-56px.my-auto.ml-700px {
        margin-left: 0 !important;
        padding: 24px !important;
        text-align: center !important;
    }
    
    /* 移动端"为什么我们是最好的选择"布局优化 */
    .grid.grid-cols-2.gap-x-129.gap-y-100.mt-80 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        margin-top: 40px !important;
    }
    
    .flex.justify-center {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    
    .ml-24px.w-300px {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* 功能介绍区域移动端适配 */
    .w-1120px {
        width: 100% !important;
        flex-direction: column !important;
    }
    
    .h-520px {
        height: auto !important;
        padding: 20px !important;
    }
    
    .ml--80px {
        margin-left: 0 !important;
    }
    
    .ml-120px {
        margin-left: 0 !important;
    }
    
    .w-600px {
        width: 100% !important;
    }
    
    .h-400px {
        height: 250px !important;
    }
    
    /* 视频展示区域移动端适配 */
    .w-738px {
        width: 100% !important;
    }
    
    .w-720px {
        width: 100% !important;
    }
    
    .h-380\.6px,
    .h-377px {
        height: auto !important;
    }
    
    /* 功能列表移动端适配 */
    .flex.justify-between {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .flex.items-center {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
    }
    
    .ml-32px,
    .mr-32px {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 优势展示区域移动端适配 */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .gap-x-129 {
        gap: 20px !important;
    }
    
    .gap-y-100 {
        gap: 20px !important;
    }
    
    .w-300px {
        width: 100% !important;
    }
    
    /* 价格套餐区域移动端适配 */
    .modal-body-bg {
        flex-direction: column !important;
        padding: 40px 16px !important;
    }
    
    .upgrade-li {
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        height: auto !important;
        min-height: 400px !important;
    }
    
    .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .modal-content {
        border-radius: 0 !important;
    }
    
    /* 底部区域移动端适配 */
    .h-480px {
        height: auto !important;
        padding: 40px 16px !important;
    }
    
    /* 文字大小移动端适配 */
    .text-20px\/32px {
        font-size: 18px !important;
        line-height: 26px !important;
    }
    
    .text-14px\/24px {
        font-size: 12px !important;
        line-height: 18px !important;
    }
    
    .text-16px\/28px {
        font-size: 14px !important;
        line-height: 22px !important;
    }
    
    /* 间距移动端适配 */
    .mt-60px {
        margin-top: 30px !important;
    }
    
    .mt-120px {
        margin-top: 60px !important;
    }
    
    .mt-180px {
        margin-top: 160px !important;
    }
    
    .mt-200px {
        margin-top: 180px !important;
    }
    
    .gap-36px {
        gap: 20px !important;
    }
    
    .gap-56px {
        gap: 30px !important;
    }
    
    /* 背景图片移动端适配 */
    .after\:h-960px:after {
        height: 800px !important;
    }
    
    /* 功能展示卡片移动端适配 */
    .h-372px {
        height: auto !important;
        min-height: 300px !important;
        padding: 20px !important;
    }
    
    .ml-700px {
        margin-left: 0 !important;
    }
    
    .ml-120px {
        margin-left: 0 !important;
    }
    
    /* 布局优化 */
    .flex.justify-center {
        justify-content: center !important;
    }
    
    .text-center {
        text-align: center !important;
    }
    
    /* 容器内边距 */
    .p-40 {
        padding: 20px !important;
    }
    
    .py-48 {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    
    /* 图标大小移动端适配 */
    .w-32px {
        width: 24px !important;
    }
    
    .h-32px {
        height: 24px !important;
    }
    
    .w-100px {
        width: 60px !important;
    }
    
    .h-100px {
        height: 60px !important;
    }
    
    /* 桌面导航隐藏 */
    .desktop-nav {
        display: none !important;
    }
    

    

    
    /* 移动端顶部文字显示修复 */
    .text-primary.text-center.font-900.whitespace-pre-line {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* 移动端第一个板块高度自适应 */
    .relative.z-0.pt-100.after\:absolute.after\:top-0.after\:left-0.after\:w-full.after\:h-960px.after\:bg-primary-image.after\:content-\[\'\'\].after\:z--2.min-w-1392px {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: 80px !important;
        padding-bottom: 60px !important;
        box-sizing: border-box !important;
    }
    
    /* 移动端价格栏背景优化 */
    .modal-body-bg {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    
    .upgrade-li {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border-radius: 16px !important;
        padding: 24px !important;
        margin: 12px 0 !important;
    }
    
    /* 移动端升级套餐section背景宽度适应 */
    #upgradePackage {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }
    
    #upgradePackage .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #upgradePackage .modal-content {
        width: 100% !important;
        border-radius: 16px !important;
        margin: 0 !important;
    }
    
    #upgradePackage .modal-body {
        width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    
    /* 移动端底部section背景宽度适应 */
    .bg-home-end {
        width: 100% !important;
        margin: 0 !important;
        padding: 60px 16px !important;
        box-sizing: border-box !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    
    .bg-home-end .text-48px\/68px {
        font-size: 32px !important;
        line-height: 40px !important;
        padding: 0 16px !important;
    }
    
    .bg-home-end .mx-auto.flex.items-center.justify-center {
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }
    
    .bg-home-end .w-200px {
        width: 100% !important;
        max-width: 280px !important;
    }
    
    /* 移动端升级套餐section背景宽度适应 */
    #upgradePackage {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }
    
    #upgradePackage .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #upgradePackage .modal-content {
        width: 100% !important;
        border-radius: 16px !important;
        margin: 0 !important;
    }
    
    #upgradePackage .modal-body {
        width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    
    /* 移动端底部section背景宽度适应 */
    .bg-home-end {
        width: 100% !important;
        margin: 0 !important;
        padding: 60px 16px !important;
        box-sizing: border-box !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    
    .bg-home-end .text-48px\/68px {
        font-size: 32px !important;
        line-height: 40px !important;
        padding: 0 16px !important;
    }
    
    .bg-home-end .mx-auto.flex.items-center.justify-center {
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }
    
    .bg-home-end .w-200px {
        width: 100% !important;
        max-width: 280px !important;
    }
    

}

/* 平板端适配 */
@media (min-width: 769px) and (max-width: 1024px) {
    .min-w-1200px,
    .min-w-1392px {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    .w-1200px {
        width: 100% !important;
        padding: 0 32px;
    }
    
    .text-64px\/80px {
        font-size: 48px !important;
        line-height: 56px !important;
    }
    
    .text-48px\/80px {
        font-size: 36px !important;
        line-height: 44px !important;
    }
    
    .w-978px {
        width: 90% !important;
    }
    
    .w-960px {
        width: 100% !important;
    }
    
    .w-1120px {
        width: 100% !important;
    }
    
    .grid.grid-cols-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 40px !important;
    }
}

    /* 超小屏幕适配 */
    @media (max-width: 480px) {
        .px-40 {
            padding-left: 12px !important;
            padding-right: 12px !important;
        }
        
        .text-64px\/80px {
            font-size: 28px !important;
            line-height: 36px !important;
        }
        
        .text-48px\/80px {
            font-size: 20px !important;
            line-height: 28px !important;
        }
        
        /* 超小屏幕功能介绍标题字体适配 */
        .text-48px\/68px {
            font-size: 18px !important;
            line-height: 26px !important;
        }
        
        .text-32px\/68px {
            font-size: 14px !important;
            line-height: 20px !important;
        }
        
        /* 超小屏幕顶部文字更多间距 */
        .text-primary.text-center.font-900.whitespace-pre-line {
            padding-top: 0 !important;
        }
    
    .w-200px {
        width: 140px !important;
    }
    
    .h-48px {
        height: 40px !important;
    }
    
    .text-16px\/48px {
        font-size: 14px !important;
        line-height: 40px !important;
    }
    
    .upgrade-li {
        min-height: 350px !important;
    }
    
    /* 小屏幕升级套餐section优化 */
    #upgradePackage {
        padding: 0 12px !important;
    }
    
    #upgradePackage .modal-body {
        padding: 12px !important;
    }
    
    .upgrade-li {
        padding: 16px !important;
        margin: 8px 0 !important;
    }
    
    /* 小屏幕底部section优化 */
    .bg-home-end {
        padding: 40px 12px !important;
    }
    
    .bg-home-end .text-48px\/68px {
        font-size: 24px !important;
        line-height: 32px !important;
        padding: 0 12px !important;
    }
    
    .bg-home-end .w-200px {
        max-width: 240px !important;
    }
    
    /* 小屏幕按钮对齐居中优化 */
    .mx-auto.flex.items-center.justify-center {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .mx-auto.flex.items-center.justify-center .w-200px {
        width: 100% !important;
        max-width: 240px !important;
        margin: 0 !important;
    }
    
    .mx-auto.flex.items-center.justify-center .ml-24px {
        margin-left: 0 !important;
    }
    
    /* 小屏幕logo对齐居中优化 */
    .h-80px.flex.items-center.px-40 {
        justify-content: space-between !important;
        align-items: center !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    
    .h-80px.flex.items-center.px-40 .inline-flex.items-center {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    /* 移动端logo尺寸优化 */
    .h-80px.flex.items-center.px-40 .inline-flex.items-center img {
        height: 40px !important;
        width: auto !important;
    }
    
    .h-80px.flex.items-center.px-40 .inline-flex.items-center span {
        font-size: 22px !important;
        margin-left: 10px !important;
    }
    
    .h-80px.flex.items-center.px-40 .desktop-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
    }
    
    .h-80px.flex.items-center.px-40 .desktop-nav a {
        min-width: 50px !important;
        height: 32px !important;
        font-size: 12px !important;
        line-height: 32px !important;
        padding: 0 8px !important;
    }
    
    /* 小屏幕logo尺寸优化 */
    .h-80px.flex.items-center.px-40 .inline-flex.items-center img {
        height: 36px !important;
        width: auto !important;
    }
    
    .h-80px.flex.items-center.px-40 .inline-flex.items-center span {
        font-size: 20px !important;
        margin-left: 8px !important;
    }
    
    /* 通用按钮对齐居中优化 */
    .flex.items-center.justify-center {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .flex.items-center.justify-center .w-200px {
        width: 100% !important;
        max-width: 240px !important;
        margin: 0 !important;
    }
    
    .flex.items-center.justify-center .ml-24px {
        margin-left: 0 !important;
    }
}

        /* 横屏模式适配 */
    @media (max-width: 768px) and (orientation: landscape) {
        .h-80px {
            height: 50px !important;
            padding-top: 8px !important;
            padding-bottom: 8px !important;
        }
        
        .pt-100 {
            padding-top: 60px !important;
        }
        
        .after\:h-960px:after {
            height: 500px !important;
        }
        
        .mt-180px {
            margin-top: 120px !important;
        }
        
        .mt-200px {
            margin-top: 140px !important;
        }
    }

/* 高分辨率屏幕适配 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .w-220px img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

    /* 触摸设备优化 */
    @media (hover: none) and (pointer: coarse) {
        .cursor-pointer {
            min-height: 44px !important;
            min-width: 44px !important;
        }
        
        .btn, button {
            min-height: 44px !important;
            padding: 12px 20px !important;
        }
        
        .w-200px {
            min-height: 44px !important;
        }
        
        /* 触摸反馈 */
        .btn:active, button:active {
            transform: scale(0.95);
            transition: transform 0.1s ease;
        }
        
        /* 防止双击缩放 */
        input, textarea, select {
            font-size: 16px !important;
        }
    }
    
    /* 移动端滚动优化 */
    html {
        scroll-behavior: smooth;
    }
    
    /* 移动端字体优化 */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    /* 移动端图片懒加载优化 */
    img {
        loading: lazy;
    }
    
    /* 移动端视频优化 */
    video {
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }
    
    /* 移动端表单优化 */
    input, textarea, select {
        -webkit-appearance: none;
        border-radius: 8px;
        font-size: 16px;
    }
    
    /* 移动端按钮优化 */
    button, .btn {
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    
    /* 移动端性能优化 */
    .blur-16 {
        backdrop-filter: blur(8px);
    }
    
    /* 移动端阴影优化 */
    .wechat-shadow, .tooltip-shadow {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    /* 移动端渐变优化 */
    .bg-linear-17, .bg-linear-16, .bg-linear-20 {
        background-attachment: scroll;
    }
    
    /* 移动端动画优化 */
    .transition-case {
        transition: transform 0.3s ease;
    }
    
    /* 移动端加载状态 */
    .loading {
        position: relative;
        overflow: hidden;
    }
    
    .loading::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        animation: loading 1.5s infinite;
    }
    
    @keyframes loading {
        0% { left: -100%; }
        100% { left: 100%; }
    }
    
    /* 移动端卡片悬停效果 */
    .upgrade-li {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .upgrade-li:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    
    /* 移动端滚动指示器 */
    .scroll-indicator {
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 3px;
        background: linear-gradient(90deg, #7b61ff, #9581ff);
        z-index: 1000;
        transition: width 0.3s ease;
    }
    
    /* 移动端返回顶部按钮 */
    .back-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        background: rgba(123, 97, 255, 0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-decoration: none;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 999;
    }
    
    .back-to-top.visible {
        opacity: 1;
        visibility: visible;
    }
    
    .back-to-top:hover {
        background: rgba(123, 97, 255, 1);
        transform: translateY(-3px);
    }

/* 减少动画以提高性能 */
@media (prefers-reduced-motion: reduce) {
    .transition-case,
    .animate-\[cubic-bezier\(0\.16\,1\,0\.3\,1\)\],
    .animate-\[ease_200ms\] {
        transition: none !important;
        animation: none !important;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    /* 保持原有的深色主题，无需额外调整 */
}

/* 打印样式 */
@media print {
    .h-80px,
    button,
    .btn {
        display: none !important;
    }
    
    .pt-100 {
        padding-top: 0 !important;
    }
    
    .text-primary {
        color: #000 !important;
    }
    
    .bg-linear-17,
    .bg-linear-16,
    .bg-linear-20 {
        background: #fff !important;
    }
} 

/* 移动端触摸手势优化 */
@media (hover: none) and (pointer: coarse) {
    /* 触摸反馈效果 */
    .btn:active, button:active, .cursor-pointer:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    /* 长按菜单 */
    .long-press-menu {
        position: fixed;
        background: rgba(0,0,0,0.8);
        border-radius: 8px;
        padding: 8px 0;
        z-index: 10000;
        display: none;
    }
    
    .long-press-menu.show {
        display: block;
    }
    
    .long-press-menu a {
        display: block;
        padding: 8px 16px;
        color: white;
        text-decoration: none;
        font-size: 14px;
    }
    
    .long-press-menu a:hover {
        background: rgba(255,255,255,0.1);
    }
}

/* 移动端图片懒加载优化 */
.lazy {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lazy.loaded {
    opacity: 1;
}

/* 移动端加载动画 */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 移动端下拉刷新指示器 */
.pull-to-refresh {
    position: fixed;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: rgba(123, 97, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 1000;
    transition: top 0.3s ease;
}

.pull-to-refresh.active {
    top: 20px;
}

/* 移动端网络状态指示器 */
.network-status {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ff6b6b;
    color: white;
    text-align: center;
    padding: 8px;
    font-size: 12px;
    z-index: 1001;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.network-status.show {
    transform: translateY(0);
}

/* 移动端深色模式支持 */
@media (prefers-color-scheme: dark) {
    .back-to-top {
        background: rgba(123, 97, 255, 0.8);
    }
    
    .scroll-indicator {
        background: linear-gradient(90deg, #7b61ff, #9581ff);
    }
}

/* 移动端高对比度模式支持 */
@media (prefers-contrast: high) {
    .back-to-top {
        border: 2px solid white;
    }
    

}