/* ============================================================================
 * xs_store 应用商城（PC 端）全局响应式适配层
 * ----------------------------------------------------------------------------
 * 断点定义（与需求一致）：
 *   桌面 Desktop :  >= 1200px   （设计基准，布局保持 1200 栅格）
 *   平板 Tablet :  768px – 1199px
 *   移动 Mobile :  <= 767px
 *
 * 设计原则：
 *   1. 本文件在所有页面样式之后加载（见 _base.html），对“内联 style / 页面
 *      <style> / 外部 css”使用 !important 进行覆盖，保证全站统一生效。
 *   2. 覆盖所有必需元素类型：导航栏 / 表格 / 表单 / 弹窗(模态框) / 图片 /
 *      列表 / 按钮 / 侧边栏 / 分页器 / 面包屑。
 *   3. 采用 Flexbox / Grid + 媒体查询，避免水平滚动条与错位。
 *   4. 桌面端(>=1200)基本沿用原布局，仅做兜底；平板与移动端做重排。
 * ========================================================================== */

/* ============================ 1. 基础安全规则 ============================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 媒体元素自适应，杜绝图片把页面撑宽 */
img,
video,
iframe,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* 允许 flex 子项收缩，避免内容过宽导致溢出 */
.flex,
.flex-row,
.flex-between,
.flex-around,
.flex-evenly,
.flex-wrap,
.flex-column,
.flex-column-between,
.flex-column-around,
.flex-column-evenly,
.flex1,
.flex2,
.flex3 {
    min-width: 0;
}

/* ============================ 2. 容器流体化 ============================ */
/* 原 common.css 用 --main-width 把 .container 锁成固定宽度(1200/992/768)，
 * 这里在所有断点改为流体容器，最大 1200，并保留左右内边距。 */
.container {
    width: 100% !important;
    max-width: 1200px;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 部分页面用 .main 充当外层包裹（如首页），
 * 注意：.main 本身不应限制最大宽度！
 * 宽度约束由内层 .container 负责（max-width:1200px）。
 * 若给 .main 设 max-width 会截断全宽背景（轮播图等）。 */
.main {
    width: 100% !important;
    box-sizing: border-box;
}

/* ============================ 3. 导航栏 ============================ */
/* 原 _nav.html 在 768–1199 直接隐藏菜单项（无汉堡入口），属于缺陷。
 * 统一策略：<=1199px 折叠为汉堡抽屉菜单，所有菜单项收进抽屉，移动端可访问。 */
@media (max-width: 1199px) {
    .navbar-inverse .navbar-header {
        float: none !important;
    }

    .navbar-inverse .navbar-brand {
        float: left !important;
    }

    /* 显示汉堡按钮（覆盖 Bootstrap 仅在 <=767 显示的限制）
     * 【修复 #1】必须显式设置深色背景，否则继承 navbar 的白色背景导致图标不可见 */
    .navbar-inverse .navbar-toggle {
        display: block !important;
        float: right !important;
        margin-right: 0;
        background-color: #333 !important;
        border-color: #555 !important;
        border-radius: 4px !important;
    }

    .navbar-inverse .navbar-toggle .icon-bar {
        background-color: #fff !important;
    }

    /* 折叠面板默认隐藏，展开(.in)或过渡(.collapsing)时显示
     * 【修复 #3】确保背景不透明，防止下方内容穿透可见 */
    .navbar-inverse .navbar-collapse {
        display: none !important;
        width: 100% !important;
        border-top: 1px solid #eee;
        box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
        background: #fff !important;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .navbar-inverse .navbar-collapse.in,
    .navbar-inverse .navbar-collapse.collapsing {
        display: block !important;
    }

    .navbar-inverse .navbar-nav,
    .navbar-inverse .navbar-nav.navbar-right {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: left;
    }

    .navbar-inverse .navbar-nav > li {
        float: none !important;
        display: block !important;
    }

    .navbar-inverse .navbar-nav > li > a {
        height: auto !important;
        line-height: normal !important;
        padding: 12px 20px !important;
    }

    /* 下拉菜单在抽屉内改为静态展开 */
    .navbar-inverse .navbar-nav .dropdown-menu {
        position: static !important;
        width: 100% !important;
        float: none !important;
        box-shadow: none !important;
        background: #fafafa !important;
        border: 0 !important;
    }

    .navbar-inverse .navbar-nav .dropdown-menu > li > a {
        padding-left: 32px !important;
        text-align: left !important;
    }

    /* 还原被原 _nav.html 媒体查询隐藏的菜单项，抽屉中全部可见 */
    .navbar-nav li:nth-child(n+5),
    .navbar-nav li:nth-child(n+6) {
        display: block !important;
    }

    .developer-btn {
        display: block !important;
    }

    .nav-member.dropdown {
        display: flex !important;
    }
}

/* 移动端进一步细化导航抽屉视觉 */
@media (max-width: 767px) {
    nav.navbar-inverse {
        height: 56px !important;
    }

    nav.navbar-inverse .navbar-brand {
        height: 56px !important;
        padding: 8px 0 8px 12px !important;
    }

    nav.navbar-inverse .navbar-brand .logo {
        width: 26px !important;
    }

    nav.navbar-inverse .navbar-brand .title {
        font-size: 16px !important;
    }

    nav.navbar-inverse .navbar-toggle {
        padding: 10px 8px !important;
    }

    body {
        padding-top: 56px !important;
    }
}

/* ============================ 4. 面包屑 ============================ */
.bread-crumb {
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-all;
}

.bread-crumb .detail-path {
    white-space: normal !important;
    word-break: break-all;
}

/* ============================ 5. 分页器 ============================ */
/* 原 pager 为 46px 圆形固定元素，页数多时移动端溢出。改为可换行 + 缩小。 */
@media (max-width: 767px) {
    .pager,
    .pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center;
        gap: 6px;
    }

    .pager a,
    .page-item .page-link,
    .page-item span {
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        margin: 0 !important;
        font-size: 13px !important;
    }

    .pagination-box .pagination .page-item {
        width: 36px !important;
        height: 36px !important;
        margin-left: 4px !important;
    }
}

/* ============================ 6. 表格 ============================ */
/* 表格在移动端改为容器横向滚动，避免撑破页面；桌面/平板保持原样。 */
@media (max-width: 991px) {
    .modal-body {
        overflow-x: auto;
    }
}

@media (max-width: 767px) {
    table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table th,
    table td {
        white-space: nowrap;
    }
}

/* ============================ 7. 表单 ============================ */
/* 输入框/选择框/文本域最大宽度限制在容器内，移动端占满。 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea,
.form-control {
    max-width: 100% !important;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .form-control,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    select,
    textarea {
        width: 100% !important;
    }

    /* 行内表单（label + input 同行）在移动端改为纵向堆叠 */
    .form-group,
    .form-horizontal .form-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .form-horizontal .control-label {
        text-align: left !important;
        margin-bottom: 6px;
        width: 100% !important;
    }
}

/* ============================ 8. 弹窗 / 模态框 ============================ */
/* 覆盖页面内联 style="width:600px/900px" 等固定宽度，移动端流体化。 */
@media (max-width: 767px) {
    .modal {
        padding: 10px !important;
    }

    .modal-dialog {
        width: auto !important;
        max-width: 100% !important;
        margin: 10px auto !important;
    }

    .modal-content {
        width: 100% !important;
    }
}

/* ============================ 9. 按钮 ============================ */
/* 防止按钮在窄屏溢出，允许换行，移动端操作按钮占满宽度。 */
.btn {
    white-space: normal;
    max-width: 100%;
}

@media (max-width: 767px) {
    .btn {
        padding: 8px 16px !important;
    }

    /* 一组并排操作按钮在移动端换行并占满 */
    .btn-group,
    .btn-toolbar {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-group .btn,
    .btn-toolbar .btn {
        flex: 1 1 auto;
    }

    /* 列表/卡片中的“操作”按钮换行可点 */
    .operate-btns,
    .action-btns {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ============================ 10. 图片 / 媒体通用 ============================ */
/* 已在基础规则中设置 img{max-width:100%}；这里补充背景图容器与封面图 */
.good-cover,
.img-box img,
.card-inner .img-box img {
    max-width: 100%;
    height: auto;
}

/* ============================ 11. 侧边栏（用户中心等） ============================ */
/* .user-inner 为 flex 两栏：.user-aside(280) + .user-content。
 * 平板：侧栏收窄；移动：侧栏堆叠到顶部并横向排列菜单。 */
@media (max-width: 1199px) {
    .user-inner {
        flex-wrap: wrap;
    }

    .user-aside {
        width: 240px !important;
        flex: 0 0 240px;
    }
}

@media (max-width: 991px) {
    .user-inner {
        flex-direction: column;
    }

    .user-aside {
        width: 100% !important;
        flex: 1 1 100% !important;
        margin-bottom: 16px;
    }

    /* 菜单改为横向可滚动，避免被挤到不可见 */
    .user-aside .menu-block {
        display: inline-block;
        vertical-align: top;
        margin-right: 16px;
        min-width: 140px;
    }

    .user-aside {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .user-content {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .user-content .item,
    .user-content .item.user-info {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .user-content .item .label {
        width: 100% !important;
        margin-bottom: 4px;
    }

    /* 用户中心信息表格类布局纵向排列 */
    .user-content .item.text-info,
    .params-list .param-item {
        flex-wrap: wrap;
    }
}

/* ============================ 12. 列表 / 卡片 ============================ */
/* 应用卡片（.app-card 等）在移动端改为单列；平板多列自适应。 */
@media (max-width: 1199px) {
    .app-list {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .app-card {
        width: calc((100% - 32px) / 3) !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 991px) {
    .app-card {
        width: calc((100% - 16px) / 2) !important;
    }
}

@media (max-width: 767px) {
    .app-card {
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }

    .app-card .card-inner .img-box {
        height: 200px !important;
    }
}

/* ============================ 13. 电梯(侧边悬浮工具条) ============================ */
/* hover 弹层在触屏无效，移动端隐藏弹层，仅保留图标条。 */
@media (max-width: 767px) {
    .elevator {
        padding: 0 8px !important;
        top: auto !important;
        bottom: 12px !important;
        margin-top: 0 !important;
    }

    .elevator .elevator-app-box,
    .elevator .elevator-weixin-box {
        display: none !important;
    }

    .elevator a {
        width: 22px !important;
        padding: 10px 0 !important;
        font-size: 18px !important;
    }
}

/* ============================ 14. 页脚 ============================ */
/* 页脚列使用 Bootstrap 栅格，已较友好；补充版权区在移动端换行。 */
@media (max-width: 767px) {
    footer.footer .copyright {
        flex-direction: column !important;
        text-align: center;
    }

    footer.footer .copyright .right {
        margin-left: 0 !important;
        margin-top: 10px;
    }

    footer.footer ul li {
        white-space: normal !important;
    }
}

/* 页脚：平板断点补充（≤991px）确保页脚内容不贴边 */
@media (max-width: 991px) {
    .footer-main {
        padding: 30px 20px !important;
    }

    .footer-main .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 确保页脚链接列不超出屏幕 */
    footer.footer ul {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* ============================ 15. 页面级特有修复 ============================ */
/* --- 商品详情 detail.html / style2 --- */
@media (max-width: 1199px) {
    .product {
        flex-wrap: wrap;
    }

    .left-box {
        width: 100% !important;
    }

    .right-box {
        width: 320px !important;
        margin: 20px auto 0;
    }
}

@media (max-width: 991px) {
    .product {
        flex-direction: column;
    }

    .left-box,
    .right-box {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 767px) {
    .brief {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .brief > .good-cover {
        width: 110px !important;
        height: 110px !important;
        margin-bottom: 12px;
    }

    .brief > .right {
        margin-left: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .good-intro {
        width: 100% !important;
    }

    .purchase {
        position: static !important;
        justify-content: flex-start !important;
        margin-top: 12px;
    }

    .top-info {
        padding: 16px !important;
    }

    .tab-content {
        padding: 16px !important;
    }
}

/* --- 订单详情进度条（内联 width:851px / 850px） --- */
.order-detail .line,
.line {
    max-width: 100% !important;
    width: 100% !important;
}

.order-detail .arrow,
.arrow {
    max-width: 100% !important;
}

/* --- 需求方案弹窗（.form-box left:770 right:270） --- */
@media (max-width: 991px) {
    .form-box {
        flex-wrap: wrap !important;
    }

    .form-box .left,
    .form-box .right {
        width: 100% !important;
        height: auto !important;
        margin: 0 0 16px 0 !important;
    }
}

/* --- 关于我们 about.html（min/max-width:900 已存在，补充内边距） --- */
@media (max-width: 900px) {
    .about-wrap,
    .about-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* --- 首页 home.html 轮播高度在移动端收敛 --- */
@media (max-width: 767px) {
    .swiper-box {
        height: 220px !important;
    }

    .swiper-box .swiper,
    .swiper-box .swiper-wrapper {
        height: 220px !important;
    }
}

/* --- 订单确认 / 购物车（order.css） --- */
@media (max-width: 1199px) {
    .order-confirm .wrapper .order {
        width: 100% !important;
        padding: 20px 16px !important;
    }
}

@media (max-width: 767px) {
    .order-confirm .wrapper .order .message .selet,
    .order-confirm .wrapper .order .message .confirm input,
    .order-confirm .wrapper .order .message .textarea {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .order-confirm .address .list .item {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .order-confirm .wrapper .order .list .item .txtPic {
        flex-wrap: wrap;
    }

    .order-confirm .wrapper .order .list .item .txtPic .goods-info {
        width: auto !important;
        flex: 1 1 auto;
    }
}

/* --- 实名认证（verify.css）：min-width:1080px 会强制横向滚动，必须清零 --- */
.verify .step1-box {
    min-width: 0 !important;
}

@media (max-width: 1199px) {
    .verify .selects .choice,
    .verify .selects .choice-infos {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .verify .steps-box {
        max-width: 100% !important;
    }

    .verify .steps-box .steps {
        flex-wrap: wrap;
        justify-content: center;
    }

    .verify .steps-box .steps .lineIcon {
        width: auto !important;
        flex: 1 1 auto;
    }

    .verify .selects .choice,
    .verify .selects .choice-infos {
        width: 100% !important;
    }

    .verify .selects .choice {
        flex-direction: column !important;
    }
}

/* --- 需求大厅（demand/index.html）：.search 固定 860px --- */
@media (max-width: 1199px) {
    .demand .search,
    .search {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

/* ============================ 16. 安全兜底 ============================ */
/* 防止任何残留固定宽度元素产生横向滚动条。 */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

/* ============================ 17. 首页 home.html 特有响应式修复 ============================
 *
 * 修复 5 个具体问题（基于截图实证）：
 *   #5  apps-block 在移动端 padding-top 过大（340px），导致轮播与应用商城标题间
 *       出现巨大空白（红框区域）。根因：advantage-wrapper 在移动端已改为 position:relative，
 *       但 apps-block 的 padding-top 未同步缩减。
 *   #1-3 热门/免费/最新应用卡片在小屏下布局错乱。
 *       根因：卡片用 float:left + 固定宽度，与 .goods-list(flex 容器) 布局模型冲突；
 *       home.html 内联 <style> 中的媒体查询与 responsive.css 规则互相覆盖。
 *   #4 页面头部（advantage 区域）在平板断点下内容溢出遮挡导航下方内容。
 *       根因：advantage-wrapper 为 absolute 定位，断点切换后高度变化未正确约束。
 */

/* --- 平板 & 以下：统一收拢 apps-block padding，消除死区 --- */
@media (max-width: 991px) {
    /* advantage-wrapper 已在 home.html 的 768-991 断点变为 height:auto;bottom:-140px
     * 此时它仍然 absolute，需要给 apps-block 足够空间但不要过多 */
    .apps-block {
        padding-top: 180px !important;
        padding-bottom: 60px !important;
    }

    /* advantage-wrapper 高度不再固定，确保不溢出 swiper-box */
    .swiper-box {
        overflow: hidden !important;
    }

    .advantage-wrapper {
        height: auto !important;
        position: relative !important;
        bottom: auto !important;
    }
}

/* --- 移动端 ≤767px：关键修复区 --- */
@media (max-width: 767px) {
    /* 【修复 #5】apps-block padding 从 340px 降到合理值
     * home.html 内联样式在此断点设了 padding:340px 0 50px，但此时
     * advantage-wrapper 已经 position:relative（home.html line 821），
     * 不再需要用 padding 来"让位"，必须大幅缩减 */
    .apps-block {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* advantage-wrapper 在移动端已 relative，去掉负 margin */
    .advantage-wrapper {
        margin-top: 0 !important;
        bottom: auto !important;
    }

    /* 【修复 #4】swiper-box 高度收敛（home.html 内联设 300px，这里兜底） */
    .swiper-box {
        height: 260px !important;
    }
    .swiper-box .swiper,
    .swiper-box .swiper-wrapper,
    .swiper-box .swiper-slide {
        height: 260px !important;
    }

    /* slide-info 内容缩小居中 */
    .swiper-box .swiper-slide .slide-info {
        top: 15px !important;
    }
    .swiper-box .swiper-slide .slide-info .title {
        font-size: 16px !important;
        line-height: 24px !important;
        text-align: center !important;
    }
    .swiper-box .swiper-slide .slide-info .desc {
        font-size: 12px !important;
        margin-top: 8px !important;
        margin-bottom: 14px !important;
        text-align: center !important;
    }
    .swiper-box .swiper-slide .slide-info .desc p {
        font-size: 12px !important;
        line-height: 20px !important;
    }
    .swiper-box .swiper-slide .slide-info .btn-list .btn {
        height: 32px !important;
        line-height: 32px !important;
        font-size: 12px !important;
        padding: 0 10px !important;
    }

    /* 分页指示器位置上移 */
    .swiper-container-horizontal > .swiper-pagination-bullets {
        bottom: 30px !important;
    }
    .swiper-pagination-bullet {
        width: 36px !important;
        height: 2px !important;
    }

    /* 【修复 #1-3】应用列表容器：强制 flex 布局，替代 float
     * 【关键】使用 :not(.hide) 选择器，避免 display:flex!important
     * 覆盖 Bootstrap 的 .hide{display:none!important}，导致分类切换（JS show/hide）失效 */
    .goods-list:not(.hide),
    .app-list:not(.hide) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center !important;
    }

    /* 确保 .hide 状态的列表确实隐藏（防御性强化） */
    .goods-list.hide,
    .app-list.hide {
        display: none !important;
    }

    /* 卡片：去 float，改 flex 子项，单列或双列自适应 */
    .app-card {
        float: none !important;
        width: calc(50% - 5px) !important;
        max-width: 220px !important;
        height: auto !important;
        margin: 0 !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
    }

    /* 清除 nth-child 的 margin 残留（home.html 用 nth-child(2n)/nth-child(4n) 控制间距） */
    .app-list .app-card:nth-child(2n),
    .app-list .app-card:nth-child(3n),
    .app-list .app-card:nth-child(4n),
    .goods-list .app-card:nth-child(2n),
    .goods-list .app-card:nth-child(3n),
    .goods-list .app-card:nth-child(4n) {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* 卡片图片区域 */
    .app-card .card-inner {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }
    .app-card .card-inner .img-box {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        min-height: 140px;
    }

    /* 卡片文字信息紧凑化 */
    .app-card .app-info {
        padding: 8px !important;
    }
    .app-card .app-info .title {
        height: auto !important;
        max-height: 40px !important;
        font-size: 12px !important;
        line-height: 18px !important;
    }
    .app-card .app-info .money .price {
        font-size: 14px !important;
    }
    .app-card .app-info .money .sales {
        font-size: 10px !important;
    }
    .app-card .app-info .info-row {
        height: auto !important;
        min-height: 20px !important;
        font-size: 11px !important;
    }
    .app-card .app-info .info-row .info-row-name {
        width: 36px !important;
        font-size: 11px !important;
    }
    .app-card .app-info .score-row .info-row-name {
        width: 52px !important;
        font-size: 11px !important;
    }

    /* 标签页按钮组：横向滚动换行 */
    .goods-box .type-list {
        justify-content: center !important;
        gap: 6px !important;
    }
    .goods-box .type-list .type-item {
        width: auto !important;
        min-width: 72px !important;
        padding: 0 10px !important;
        height: 38px !important;
        line-height: 38px !important;
        margin: 0 !important;
        margin-bottom: 6px !important;
    }

    /* advantage-block 内边距收紧 */
    .advantage-block {
        padding: 30px 0 !important;
    }
    .grid-box-head {
        padding: 8px 0 20px !important;
    }
    .grid-box-head .title {
        font-size: 18px !important;
        height: auto !important;
        line-height: 26px !important;
    }
    .grid-box-head .desc {
        font-size: 12px !important;
        margin-top: 10px !important;
        line-height: 20px !important;
    }
}

/* --- 小屏手机 ≤479px：进一步收紧 --- */
@media (max-width: 479px) {
    /* 【修复 #5 终极】apps-block 进一步缩减 */
    .apps-block {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /* swiper 更矮 */
    .swiper-box {
        height: 220px !important;
    }
    .swiper-box .swiper,
    .swiper-box .swiper-wrapper,
    .swiper-box .swiper-slide {
        height: 220px !important;
    }
    .swiper-box .swiper-slide .slide-info {
        top: 10px !important;
    }
    .swiper-box .swiper-slide .slide-info .title {
        font-size: 14px !important;
        line-height: 22px !important;
    }
    .swiper-box .swiper-slide .slide-info .desc {
        font-size: 11px !important;
        margin-top: 6px !important;
        margin-bottom: 10px !important;
    }
    .swiper-box .swiper-slide .slide-info .desc p {
        font-size: 11px !important;
        line-height: 18px !important;
    }

    /* 【修复 #1-3】卡片改为单列全宽 */
    .app-card {
        width: 100% !important;
        max-width: 300px !important;
    }

    /* 标签页按钮更小 */
    .goods-box .type-list .type-item {
        min-width: 64px !important;
        height: 34px !important;
        line-height: 34px !important;
        font-size: 12px !important;
        padding: 0 8px !important;
    }

    /* advantage 区块更紧凑 */
    .advantage-block {
        padding: 20px 0 !important;
    }
    .grid-box-head .title {
        font-size: 16px !important;
    }
}

/* ============================ 18. 需求大厅 & 开发者中心 & 底部页脚 移动端修复 ============================
 *
 * 修复 3 个页面/区域的小屏幕显示问题（基于截图实证）：
 *   #1 需求大厅 demand/index.html：hero 文字挤压（font-size 28px 太大、height 固定溢出）
 *   #2 开发者中心 developer/index.html：
 *       a) 同样 hero 文字挤压
 *       b) 收益模式卡片：前3张(col-md-4)与后2张(col-md-6+inline float)在移动端不对齐
 *   #3 底部页脚 _footer.html：内容贴左边缘，缺少左边距
 */

/* --- 18a. 平板断点 ≤991px --- */
@media (max-width: 991px) {

    /* 需求大厅 + 开发者中心：hero 区域收敛 */
    .one-screen {
        height: auto !important;
        min-height: 320px;
    }

    .one-screen .info {
        top: 50px !important;
        padding: 0 15px;
    }

    .one-screen .info .title {
        height: auto !important;
        font-size: 22px !important;
        line-height: 1.4 !important;
        padding: 0 10px;
    }

    .one-screen .info .desc {
        height: auto !important;
        margin-top: 12px !important;
        width: auto !important;
    }

    .one-screen .info .desc p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .one-screen .info .options {
        margin-top: 15px !important;
    }

    .btn-confirm {
        width: 160px !important;
        height: 42px !important;
        line-height: 42px !important;
        font-size: 16px !important;
        margin-left: 0 !important;
    }

    /* 开发者中心：收益模式卡片对齐 */
    .three-screen {
        padding: 50px 0 !important;
        min-height: auto !important;
    }

    .three-screen .content-box .item {
        padding: 15px !important;
        height: auto !important;
    }

    .three-screen .content-box .info {
        max-width: 100% !important;
        padding: 20px 24px !important;
        opacity: 1 !important;
    }

    /* 清除第二排卡片的 inline float，统一流式布局 */
    .three-screen .content-box .list:last-child .info[style*="float"] {
        float: none !important;
    }
}

/* --- 18b. 手机断点 ≤767px --- */
@media (max-width: 767px) {

    /* 需求大厅 + 开发者中心：hero 文字进一步收敛 */
    .one-screen {
        min-height: 280px;
    }

    .one-screen .info {
        top: 35px !important;
        padding: 0 10px;
    }

    .one-screen .info .title {
        font-size: 18px !important;
        line-height: 1.45 !important;
        padding: 0 8px;
    }

    .one-screen .info .desc {
        margin-top: 10px !important;
    }

    .one-screen .info .desc p {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    .btn-confirm {
        width: 140px !important;
        height: 38px !important;
        line-height: 38px !important;
        font-size: 15px !important;
    }

    /* 开发者中心：收益模式卡片全宽+等宽 */
    .three-screen {
        padding: 35px 0 !important;
    }

    .three-screen .content-box .item {
        padding: 10px !important;
        margin-bottom: 12px;
    }

    .three-screen .content-box .info {
        padding: 18px 18px !important;
    }

    .three-screen .content-box .info .logo {
        width: 36px !important;
        height: 36px !important;
    }

    .three-screen .content-box .info .item-title {
        font-size: 17px !important;
        height: auto !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
    }

    .three-screen .content-box .info .item-desc {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .screen .title {
        font-size: 20px !important;
        height: auto !important;
        line-height: 1.4 !important;
        margin-bottom: 30px !important;
    }

    /* 底部页脚：防止内容贴边（覆盖所有小屏/中屏） */
    .footer-main {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .footer-main .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    footer.footer ul li {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* 页脚列标题也加左边距 */
    footer.footer ul li.title {
        padding-left: 0 !important;
    }

    /* 需求大厅：搜索框适配 */
    .search .btn {
        width: 80px !important;
        font-size: 14px !important;
    }

    .app-search .menu-list .menu-item .type {
        width: 70px !important;
        flex-shrink: 0;
    }
}

/* --- 18c. 极小屏 ≤479px --- */
@media (max-width: 479px) {

    .one-screen .info .title {
        font-size: 16px !important;
    }

    .one-screen .info .desc p {
        font-size: 12px !important;
    }

    .three-screen .content-box .info {
        padding: 14px 14px !important;
    }

    .three-screen .content-box .info .item-title {
        font-size: 16px !important;
    }

    .three-screen .content-box .info .item-desc {
        font-size: 12px !important;
    }
}

/* ============================ 19. 创客中心 affiliate.html 移动端修复 ============================
 *
 * 修复截图实证问题：
 *   #1 hero 标题文字挤压（height:40px 固定 + font-size:28px，长标题溢出）
 *   #2 4 张角色卡片（运维型/订单型/推广员/区域合伙人）在移动端挤成窄条
 *      （每个 advantage-item 固定 width:280px，4 张共 1120px 远超移动屏宽度）
 *   #3 second-screen 区域 padding/height 过大（padding-top:250px, height:462px）
 *   #4 描述文字字号偏大（18px / line-height:36px）
 *   #5 【关键】"我要成为创客"按钮被上方角色卡片遮挡（absolute 定位溢出 + z-index 问题）
 */

/* --- 19-base: 全屏尺寸按钮可见性修复 --- */
/* advantage-wrapper 绝对定位向下溢出 350px+200px=550px，覆盖 second-screen 内的按钮。
 * 解决方案：(a) 给按钮容器提升 z-index；(b) 给 .second-screen 首个子元素留出上边距 */
.affiliate .second-screen > div:first-child,
.second-screen > div[style*="height: 50px"] {
    position: relative;
    z-index: 10;
    margin-top: 20px;
}

.affiliate .btn-confirm,
.second-screen .btn-confirm {
    position: relative;
    z-index: 100;
    /* 文字垂直居中 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- 19a. 平板 ≤991px --- */
@media (max-width: 991px) {

    /* affiliate: hero 标题收敛 */
    .affiliate .one-screen .info,
    .one-screen .info {
        top: 100px !important;
        padding: 0 15px;
    }

    .affiliate .one-screen .info .title,
    .one-screen .info .title {
        height: auto !important;
        font-size: 22px !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }

    /* affiliate: 描述文字收敛 */
    .affiliate .one-screen .info .desc p,
    .one-screen .info .desc p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    /* affiliate: 4 角色卡片 → 2x2 网格 */
    .advantage-wrapper {
        position: relative !important;
        bottom: auto !important;
        height: auto !important;
        margin-top: 30px;
        /* 确保卡片不遮挡按钮：按钮在 .info 内，卡片在 .info 后 */
        clear: both;
    }

    .advantage-wrapper .container .advantage-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        justify-content: center !important;
    }

    .advantage-wrapper .container .advantage-item {
        width: calc(50% - 8px) !important;
        max-width: 360px !important;
        height: auto !important;
        min-height: 180px;
        overflow: hidden;              /* 防止内容溢出遮挡相邻卡片 */
    }

    /* 【平板遮挡修复】按钮容器与卡片之间留出足够间距 */
    .affiliate .one-screen .info .options,
    .one-screen .info .options {
        margin-bottom: 20px !important;
    }

    /* affiliate: second-screen 收敛 */
    .second-screen {
        padding: 80px 0 60px 0 !important;
    }

    /* 【修复 #5】按钮被卡片遮挡：确保 second-screen 首个子元素（含按钮）在卡片下方 */
    .second-screen > div:first-child,
    .second-screen > div[style*="height: 50px"] {
        position: relative !important;
        z-index: 10 !important;
        margin-top: 20px !important;
    }

    /* 【修复 #5】按钮自身提升层级 + 确保可点击 */
    .affiliate .btn-confirm,
    .second-screen .btn-confirm {
        position: relative !important;
        z-index: 100 !important;
    }

    .second-screen .title {
        height: auto !important;
        font-size: 22px !important;
        margin-bottom: 40px !important;
    }

    .second-screen .content-box {
        height: auto !important;
        padding: 30px 20px !important;
    }

    .second-screen .content-box .content {
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 30px;
    }

    .second-screen .content-box .popularize-box {
        position: static !important;
        width: 100% !important;
        max-width: 400px;
        margin: 0 auto;
        height: auto !important;
    }
}

/* --- 19b. 手机 ≤767px（全面重构，消除所有遮挡） --- */
@media (max-width: 767px) {

    /* ---- 1. Hero 区域：防止标题被截断、文字挤压 ---- */
    .affiliate .one-screen,
    .one-screen {
        height: auto !important;
        min-height: 200px;
    }

    .affiliate .one-screen .info,
    .one-screen .info {
        position: static !important;     /* 关键：取消绝对定位，让内容正常流式排列 */
        width: 100% !important;
        top: auto !important;
        padding: 20px 10px !important;
    }

    .affiliate .one-screen .info .title,
    .one-screen .info .title {
        height: auto !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        padding: 0 5px !important;
        text-align: center !important;
    }

    .affiliate .one-screen .info .desc,
    .one-screen .info .desc {
        margin-top: 12px !important;
        height: auto !important;
    }

    .affiliate .one-screen .info .desc p,
    .one-screen .info .desc p {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    /* ---- 2. 按钮：确保在卡片上方可见 ---- */
    .affiliate .one-screen .info .options,
    .one-screen .info .options {
        height: auto !important;
        margin: 18px 0 0 0 !important;
        text-align: center;
    }

    .btn-confirm {
        width: 150px !important;
        height: 42px !important;
        line-height: 42px !important;
        font-size: 15px !important;
        margin-left: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative;
        z-index: 100;
    }

    /* ---- 3. 4 角色卡片：单列堆叠 + 彻底脱离绝对定位 ---- */
    .advantage-wrapper {
        position: static !important;      /* 覆盖内联 style="position:absolute" */
        bottom: auto !important;           /* 覆盖内联 style="bottom:-350px" */
        height: auto !important;           /* 覆盖内联 style="height:200px" */
        width: 100% !important;
        margin-top: 15px !important;
        margin-bottom: 0 !important;
        padding: 0 10px !important;
        z-index: auto !important;
        overflow: visible !important;
    }

    .advantage-wrapper .container {
        height: auto !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .advantage-wrapper .container .advantage-list {
        display: flex !important;
        flex-direction: column !important; /* 单列堆叠 */
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
    }

    .advantage-wrapper .container .advantage-item {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 14px 16px !important;
        box-sizing: border-box !important;
        border-radius: 6px !important;
    }

    .advantage-wrapper .container .advantage-item .title {
        font-size: 15px !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    .advantage-wrapper .container .advantage-item .desc {
        font-size: 12px !important;
        line-height: 1.65 !important;
    }

    .advantage-wrapper .container .advantage-item .desc p {
        font-size: 12px !important;
        line-height: 1.65 !important;
    }

    /* ---- 4. second-screen：步骤区域收敛 ---- */
    .second-screen {
        padding: 30px 0 40px 0 !important;
    }

    .second-screen > div[style*="height"] {
        height: auto !important;
        margin: 20px 0 !important;
    }

    .second-screen .title {
        height: auto !important;
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
    }

    .second-screen .content-box {
        height: auto !important;
        padding: 20px 12px !important;
        display: block;
    }

    .second-screen .content-box .content {
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 20px !important;
    }

    .second-screen .content-box .content .tip {
        font-size: 16px !important;
        height: auto !important;
        line-height: 1.4 !important;
        margin-bottom: 16px !important;
    }

    .second-screen .content-box .content .step {
        margin-bottom: 14px !important;
    }

    .second-screen .content-box .content .step::before {
        top: 6px !important;
    }

    .second-screen .content-box .content .step p {
        font-size: 13px !important;
        line-height: 1.55 !important;
        padding-left: 26px !important;
    }

    .second-screen .content-box .content .btn-confirm {
        width: 130px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 14px !important;
        margin-left: 0 !important;
        margin-top: 10px !important;
    }

    .second-screen .content-box .popularize-box {
        position: static !important;
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 auto;
        display: block;
    }

    /* ---- 5. 右侧悬浮组件：不遮挡主体 ---- */
    /* 右侧固定工具栏（邮件/用户/手机等图标）确保不覆盖核心内容 */
    body > div[style*="fixed"],
    body > div[style*="position: fixed"] {
        z-index: 999 !important;
    }
}

/* --- 19c. 极小屏 ≤479px --- */
@media (max-width: 479px) {

    .affiliate .one-screen .info .title,
    .one-screen .info .title {
        font-size: 15px !important;
    }

    .affiliate .one-screen .info .desc p,
    .one-screen .info .desc p {
        font-size: 12px !important;
    }
}