/* ========================================
   移动端通用样式 - Header、Swiper导航、Footer
   适用于所有页面
   ======================================== */

/* ========== 中等屏幕适配 - 1081px 到 1400px 之间 ========== */
@media screen and (min-width: 1081px) and (max-width: 1400px) {
    /* 全局宽度容器 */
    .tx-wide {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        box-sizing: border-box;
    }

    /* Header 适配 */
    .header .tx-wide {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 30px !important;
        box-sizing: border-box;
    }

    /* 导航菜单 - 桌面端正常显示 */
    .header .wap-nav {
        position: static !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        overflow: visible !important;
        z-index: auto !important;
    }

    .header .wap-nav .nav {
        display: flex !important;
        position: static !important;
    }

    /* 隐藏移动端导航 */
    .mobile-nav-swiper {
        display: none !important;
    }

    /* 隐藏汉堡菜单按钮 */
    .header .nav-on,
    .header .nav-on.pchide {
        display: none !important;
    }

    /* Footer 适配 */
    .footer .tx-wide {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        box-sizing: border-box;
    }

    /* 主内容区域 */
    .main.tx-wide {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        box-sizing: border-box;
    }

    /* Row 布局 */
    .main.tx-wide .row,
    .row.row-space10 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 内容容器 */
    .container,
    .container .content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 30px;
        padding-right: 30px;
        box-sizing: border-box;
    }
}

/* ========== Header 移动端适配 ========== */
@media screen and (max-width: 1080px) {
    /* Header 基础样式 - 只保留 logo 和 search */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        padding: 0 15px;
        height: 50px;
        background: #FFFFFF !important;
    }

    .header .tx-wide {
        height: 50px;
        gap: 0;
        justify-content: space-between;
        align-items: center;
        padding: 0;
    }

    .header .logo {
        flex-shrink: 0;
        margin-right: 0;
    }

    .header .logo img {
        height: auto;
        width: auto;
        max-height: 36px;
        object-fit: contain;
    }

    /* 隐藏导航菜单 */
    .header .wap-nav .nav {
        display: none !important;
    }

    /* 搜索框直接显示在 header 右侧 */
    .header .wap-nav {
        display: flex !important;
        position: static;
        background: transparent;
        padding: 0;
        gap: 0;
        width: auto;
        flex: 0 0 auto;
    }

    .header .wap-nav .search {
        float: none;
        margin: 0;
    }

    .header .wap-nav .search form {
        /* 基于1080px设计稿: 361px x 80px */
        width: 33.43vw;
        height: 7.41vw;
        border-radius: 40px;
        padding: 0 3vw;
        background: #EEEEEE;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .header .wap-nav .search input {
        font-size: 2.8vw;
        padding: 0;
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        height: 100%;
    }

    .header .wap-nav .search .search-submit {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
    }

    .header .wap-nav .search .search-submit i {
        font-size: 3.5vw;
        color: #999;
    }

    /* 隐藏汉堡菜单按钮 */
    .header .nav-on,
    .header .nav-on.pchide {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .header {
        height: 48px;
        padding: 0 12px;
    }

    .header .tx-wide {
        height: 48px;
    }

    .header .logo img {
        max-height: 32px;
    }
}

/* ========== 移动端 Swiper 导航栏 ========== */
.mobile-nav-swiper {
    display: none;
}

@media screen and (max-width: 1080px) {
    .mobile-nav-swiper {
        display: block;
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        z-index: 999;
        background: #404553;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        /* 基于1080px设计稿: height 121px, padding 44px */
        height: 11.204vw;
        /*padding: 4.074vw 0;*/
        box-sizing: border-box;
    }

    .mobile-nav-swiper .swiper-container,
    .mobile-nav-swiper .swiper {
        width: 100%;
        padding: 0 10px;
        height: 100%;
    }

    .mobile-nav-swiper .swiper-slide {
        width: auto !important;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    .mobile-nav-swiper .swiper-slide a {
        /*display: block;*/
        padding: 0 15px;
        font-size: 14px;
        color: #FFFFFF;
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.3s;
        align-items: center;
        display: flex;
    }

    .mobile-nav-swiper .swiper-slide a:hover,
    .mobile-nav-swiper .swiper-slide.active a,
    .mobile-nav-swiper .swiper-slide a.on {
        color: #0076FF;
    }

    /* 当前页面高亮 */
    .mobile-nav-swiper .swiper-slide.on a {
        color: #0076FF;
        font-weight: 500;
    }

    /* 主内容区域需要留出顶部空间给固定导航 */
    /* 通用主内容区域 */
    .main,
    .main.tx-wide {
        padding-top: calc(50px + 11.2vw + 15px);
        margin-top: 0;
    }

    /* 排行榜页面 */
    .rank-page {
        padding-top: calc(50px + 11.2vw);
    }

    .rank-page .rank-banner {
        padding-top: 30px;
    }
}

@media screen and (max-width: 768px) {
    .main,
    .main.tx-wide {
        padding-top: calc(48px + 11.2vw + 15px);
    }

    .rank-page {
        padding-top: calc(48px + 11.2vw);
    }
}

/* ========== 文章详情页移动端适配 ========== */
@media screen and (max-width: 1080px) {
    /* 修复 row 布局溢出问题 */
    .main.tx-wide {
        padding: 0 4vw;
        padding-top: calc(50px + 11.2vw + 4vw) !important;
        overflow: hidden;
        box-sizing: border-box;
        width: 100%;
    }

    .main.tx-wide > .row,
    .main.tx-wide .row.row-space10,
    .row.row-space10.row-p-space0 {
        display: flex;
        flex-direction: column;
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        overflow: hidden;
    }

    /* 主内容列 - 全宽 */
    .main.tx-wide .col-18,
    .main.tx-wide .col-18.col-p-24,
    .row.row-space10 > .col-18 {
        width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 面包屑导航 */
    .place {
        font-size: 3.33vw;
        padding: 3vw 4vw;
        background: #f5f5f5;
        border-radius: 2vw;
        margin-bottom: 4vw;
    }

    .place a {
        color: #666;
    }

    /* 文章主容器 */
    .main.tx-wide .tx-box {
        border-radius: 2vw;
        padding: 0;
        margin-bottom: 4vw;
    }

    /* 文章标题区域 */
    .info-title {
        padding: 5vw 4vw !important;
    }

    .info-title h1 {
        font-size: 5vw !important;
        line-height: 1.4;
        margin-bottom: 3vw !important;
    }

    .info-title p {
        font-size: 3vw !important;
    }

    .info-title p span {
        margin-right: 3vw !important;
    }

    /* 分隔线 */
    .tx-hr {
        margin: 0;
    }

    /* 文章正文内容 */
    .tx-text {
        padding: 4vw !important;
        font-size: 4vw !important;
        line-height: 1.8;
    }

    .tx-text p {
        margin-bottom: 4vw;
    }

    .tx-text img {
        max-width: 100%;
        height: auto;
        border-radius: 2vw;
    }

    .tx-text h2, .tx-text h3 {
        font-size: 4.5vw;
        margin: 5vw 0 3vw 0;
    }

    /* 版权信息 */
    .info-copy {
        padding: 4vw !important;
        background: #f9f9f9;
        font-size: 3vw;
        color: #888;
        line-height: 1.6;
    }

    .info-copy p {
        margin-bottom: 2vw;
    }

    .info-copy a {
        color: #0076FF;
        word-break: break-all;
    }

    /* 上一篇/下一篇 */
    .info-next {
        padding: 4vw !important;
    }

    .info-next ul.row {
        flex-direction: column;
        gap: 3vw;
    }

    .info-next ul.row > li {
        width: 100% !important;
        text-align: left !important;
        font-size: 3.5vw;
        padding: 3vw;
        background: #f5f5f5;
        border-radius: 2vw;
        display: flex;
    }

    .info-next ul.row > li a {
        color: #333;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 底部推荐区域 */
    .bottom-recommend-app,
    .bottom-recommend-article {
        margin-bottom: 4vw;
    }

    .bottom-recommend-app .tx-title,
    .bottom-recommend-article .tx-title {
        font-size: 4.5vw;
        padding: 4vw;
    }

    /* 底部推荐App - 2列布局 */
    .bottom-recommend-app .row > li {
        width: 50% !important;
        flex: 0 0 50% !important;
        padding: 2vw;
    }

    /* 底部推荐文章 - 单列布局 */
    .bottom-recommend-article .row > li {
        width: 100% !important;
        flex: 0 0 100% !important;
        padding: 2vw;
    }

    /* 广告图片 */
    .da-box {
        margin: 4vw !important;
    }

    .da-box img {
        border-radius: 2vw;
    }

    /* 分享弹窗 */
    .share-box .pop-con {
        width: 90vw;
        max-width: 90vw;
        border-radius: 3vw;
    }

    .share-box h2 {
        font-size: 4.5vw;
    }

    .social-share a {
        width: 12vw;
        height: 12vw;
        line-height: 12vw;
        font-size: 5vw;
        margin: 0 2vw;
    }
}

/* ========== App详情页移动端适配 ========== */
@media screen and (max-width: 1080px) {
    /* App信息卡片整体 */
    .tx-box.pd20-3 {
        background: #fff;
        border-radius: 4vw;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        padding: 0 !important;
        overflow: hidden;
    }

    .tx-box.pd20-3 > dl.row {
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    /* 顶部区域：图标 + 基本信息 */
    .tx-box.pd20-3 .col-4.col-p-5.mb20 {
        width: 100% !important;
        display: flex;
        justify-content: center;
        padding: 6vw 4vw 4vw !important;
        margin: 0 !important;
        background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
    }

    .tx-box.pd20-3 .col-4.col-p-5 .img-box {
        width: 20vw !important;
        height: 20vw !important;
        padding-top: 0 !important;
        border-radius: 4vw;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }

    .tx-box.pd20-3 .col-4.col-p-5 .img-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
        background: #f5f5f5;
    }

    /* App详情区域 */
    .tx-box.pd20-3 .col-16.col-p-19 {
        width: 100% !important;
        padding: 4vw !important;
        margin: 0 !important;
    }

    /* App标题 */
    .tx-box.pd20-3 h1.f-22.mb10.txt-ov {
        font-size: 5vw;
        font-weight: 600;
        color: #222;
        margin-bottom: 2vw !important;
        text-align: center;
        white-space: normal;
        line-height: 1.4;
    }

    .tx-box.pd20-3 h1.f-22 a.titleurl {
        color: #222;
    }

    .tx-box.pd20-3 h1.f-22 span {
        display: none;
    }

    /* 日期/分类信息 */
    .tx-box.pd20-3 p.pchide.padshow.f-12.f-gray1.txt-ov.mb10 {
        display: flex !important;
        justify-content: center;
        gap: 4vw;
        font-size: 3vw !important;
        color: #999;
        margin-bottom: 4vw !important;
        padding-bottom: 4vw;
        border-bottom: 1px solid #f0f0f0;
    }

    .tx-box.pd20-3 p.pchide.padshow span {
        margin: 0 !important;
    }

    /* App简介摘要 */
    .tx-box.pd20-3 .tx-flex-gr {
        padding: 0 !important;
    }

    .tx-box.pd20-3 .tx-flex-gr > p.mb10 {
        font-size: 3.5vw;
        line-height: 1.8;
        color: #555;
        text-indent: 0 !important;
        margin-bottom: 4vw !important;
        padding: 0 2vw;
    }

    /* App元信息 - 标签样式 */
    .tx-box.pd20-3 .ul-18 {
        margin-bottom: 0 !important;
        padding: 0 2vw;
    }

    .tx-box.pd20-3 .ul-18 li {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3vw;
    }

    .tx-box.pd20-3 .ul-18 li span {
        display: inline-block;
        font-size: 2.8vw;
        color: #666;
        background: #f5f5f5;
        padding: 1.5vw 3vw;
        border-radius: 1vw;
    }

    /* 下载按钮 */
    .soft-down {
        display: flex !important;
        justify-content: center;
        margin-top: 5vw !important;
        padding: 0 4vw 6vw;
        width: 100%;
        box-sizing: border-box;
    }

    .soft-down .tx-btn {
        display: flex;
        width: 100%;
        padding: 3.5vw 0;
        font-size: 4vw;
        font-weight: 500;
        border-radius: 12vw;
        text-align: center;
        background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
        color: #fff;
        box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4);
    }

    /* 隐藏二维码区域 */
    .tx-box.pd20-3 .col-4.waphide {
        display: none !important;
    }

    /* 简介区域 */
    .tx-box h2.tx-title {
        font-size: 4vw;
        padding: 4vw;
        border-bottom: 1px solid #eee;
    }

    .tx-box .tx-flex-gr {
        padding: 4vw !important;
    }

    .tx-box .tx-flex-gr p {
        font-size: 3.5vw;
        line-height: 1.8;
        text-indent: 0 !important;
    }

    /* 截图区域 */
    .soft-screenshot {
        padding: 3vw !important;
        overflow: hidden;
    }

    .soft-screenshot .swiper-container {
        overflow: visible;
    }

    .soft-screenshot .swiper-wrapper {
        display: flex;
        align-items: flex-start;
    }

    .soft-screenshot .swiper-slide {
        width: 30vw !important;
        height: auto;
        flex-shrink: 0;
    }

    .soft-screenshot .swiper-slide a {
        display: block;
    }

    .soft-screenshot .swiper-slide img {
        width: 100%;
        height: auto;
        max-height: 50vw;
        object-fit: contain;
        border-radius: 2vw;
    }

    .soft-screenshot .swiper-button-prev,
    .soft-screenshot .swiper-button-next {
        display: none;
    }

    /* 正文内容 */
    .tx-box-detail {
        padding: 4vw;
        font-size: 3.5vw;
        line-height: 1.8;
    }

    .tx-box-detail img {
        max-width: 100%;
        height: auto;
        border-radius: 2vw;
    }
}

/* ========== 侧边栏移动端隐藏 ========== */
/* 隐藏排行榜、栏目热文、本站热文等侧边栏内容 */
@media screen and (max-width: 1080px) {
    .side-box,
    .side-box.col-6 {
        display: none !important;
    }
}

/* ========== Footer 移动端适配 ========== */
@media screen and (max-width: 1080px) {
    .footer {
        padding: 0;
    }

    /* 隐藏 footer 的 tx-wide（包含 footer-wrapper） */
    .footer > .tx-wide {
        display: none;
    }

    .copy {
        margin-top: 0;
        /* 基于1080px设计稿: 120px 171px 120px 163px，使用vw换算 */
        padding: 11.11vw 15.83vw 11.11vw 15.09vw;
        border-top: none;
        background: #2c3e50;
    }

    .copy .tx-wide {
        padding: 0;
        display: block;
        text-align: center;
        /* 基于1080px设计稿: 28px */
        font-size: 2.59vw;
        color: #989DA8;
        line-height: 1.6;
    }

    .copy a {
        font-size: 2.59vw !important;
        color: #989DA8;
    }

    .copy a:hover {
        color: #0076FF;
    }
}