/**
 * 移动端响应式自适应样式库
 * Responsive CSS for Mobile Adaption
 */

@media screen and (max-width: 768px) {
    /* 1. 全局重置与防溢出 */
    html, body {
        min-width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-size: 14px !important;
    }

    /* 防止 iOS 输入框聚焦时页面自动放大偏移 */
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* 2. 全局主容器自适应 */
    .content {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding: 0 !important;
    }

    .t-main {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        margin-top: 10px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        padding: 12px !important;
        flex-shrink: 1 !important;
    }

    /* 头部 Banner */
    .t-main.bg-dlan.h15 {
        height: auto !important;
        min-height: 80px !important;
        padding: 20px 15px !important;
        text-align: center !important;
    }

    .t-main.bg-dlan.h15 h1 {
        font-size: 20px !important;
        margin: 0 !important;
    }

    .t-main.bg-dlan.h15 p {
        font-size: 12px !important;
        margin-top: 6px !important;
    }

    /* 公告条 */
    .t-main.f4.o-h {
        padding: 6px 10px !important;
    }

    .in-list dl a dd p.w30 {
        width: calc(100vw - 160px) !important;
    }

    /* 用户主功能卡片 */
    .t-main.p6.pb0 {
        padding: 10px 10px 15px 10px !important;
    }

    /* 页脚 */
    .t-main.mb7.h14 {
        height: auto !important;
        padding: 15px 10px !important;
        margin-bottom: 20px !important;
        text-align: center !important;
        font-size: 12px !important;
    }

    /* 3. 顶部横向滚动导航菜单 (Tab) */
    .c-title {
        height: auto !important;
        padding: 4px 0 10px 0 !important;
        margin-bottom: 8px !important;
        border-bottom: 1px solid hsl(220, 25%, 95%) !important;
        display: block !important;
        overflow: hidden !important;
    }

    .click-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        padding: 4px 2px 8px 2px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        scrollbar-width: none; /* Firefox */
    }

    .click-nav::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    .click-nav li {
        flex-shrink: 0 !important;
        margin-left: 6px !important;
        margin-right: 0 !important;
        display: inline-block !important;
    }

    .click-nav li:first-child {
        margin-left: 0 !important;
    }

    .click-nav li a {
        padding: 6px 12px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
    }

    /* 4. 原子宽度类转换为流式自适应 */
    .w20, .w22, .w25, .w26, .w27, .w28, .w30, .w35, .w40, .w50 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5. 首页解析页面适配 */
    .t-v.bold.tc {
        width: 100% !important;
    }

    .t-v span.pl4.pr4 {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 12px !important;
    }

    .in-text {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .in-text dd {
        width: 100% !important;
    }

    .in-text input.form {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 解析结果区 */
    .w26.bt0.dc.wrap.mt7 {
        margin-top: 15px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .w26.bt0.dc.wrap.mt7 .col-10,
    .w26.bt0.dc.wrap.mt7 .col-2,
    .w26.bt0.dc.wrap.mt7 .col-12 {
        width: 100% !important;
        padding-right: 0 !important;
        margin-top: 10px !important;
    }

    .w26.bt0.dc.wrap.mt7 video {
        width: 100% !important;
        max-height: 400px !important;
        border-radius: 8px !important;
    }

    /* 图集瀑布流：移动端改为 2 列 */
    .grid-container {
        column-count: 2 !important;
        column-gap: 8px !important;
    }

    .grid-item {
        width: 100% !important;
        margin-bottom: 8px !important;
        border-radius: 6px !important;
    }

    /* 6. 在线商城/下单页面适配 */
    .select-data {
        width: 100% !important;
        min-width: unset !important;
    }

    /* 付费包卡片自适应：双列网格 */
    .box_list.box_cheng {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .box_list.box_cheng div[box-type] {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
    }

    /* 套餐详细介绍卡片 */
    .shop .dsmall .w26 {
        width: 100% !important;
    }

    /* 支付方式选择 */
    .box_list.d.f2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .box_list.d.f2 .box_sm {
        width: 100% !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        padding: 10px 14px !important;
    }

    /* 7. 用户中心页面适配 */
    .w28.h14.bg-lan {
        height: auto !important;
        padding: 14px 10px !important;
        display: flex !important;
        align-items: center !important;
    }

    .w28.h14.bg-lan dt.w15 {
        width: 60px !important;
        flex-shrink: 0 !important;
    }

    .w28.h14.bg-lan dt.w15 img {
        width: 48px !important;
        height: 48px !important;
    }

    .w28.h14.bg-lan dd {
        padding-left: 10px !important;
    }

    .w28 .in-list dl dd .w20,
    .w28 .in-text a dd .w20 {
        width: auto !important;
        min-width: 80px !important;
    }

    /* 8. 支持平台列表适配 */
    #bodyhtml_content .w.h12.dc.rx3 {
        height: auto !important;
        padding: 10px 0 !important;
    }

    /* 9. 解析列表历史记录表格 */
    .c54.ptb7.in-text {
        width: 100% !important;
        padding: 10px 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .c54.ptb7.in-text dd {
        flex: 1 1 180px !important;
    }

    .c54.ptb7.in-text dt {
        flex-shrink: 0 !important;
    }

    .c23 {
        display: none !important;
    }

    /* 列表表格区域横向滚动支撑 */
    .in-list.in-b.rx3 {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .in-list.in-b.rx3 dl,
    .in-list.in-b.rx3 .delall > dl {
        min-width: 480px !important;
    }

    /* 分页控制器 */
    .c-footer {
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
        margin-top: 15px !important;
    }

    .c-footer .mr5.hui {
        width: 100% !important;
        text-align: center !important;
        margin-right: 0 !important;
        margin-bottom: 6px !important;
    }

    .page-minhide {
        display: none !important;
    }

    /* 10. 登录、注册、修改密码等页面适配 */
    .main {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        padding: 20px 0 !important;
        box-sizing: border-box !important;
    }

    .main .bg-bai.rx3.bx {
        padding: 10px !important;
    }

    /* 11. 支付弹窗与结果通知页 */
    .btnneiye {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .btnneiye .btn {
        margin-left: 0 !important;
        flex: 1 !important;
        max-width: 140px !important;
    }

    .i-squeren .w25 {
        width: 100% !important;
        padding: 20px 10px !important;
        box-sizing: border-box !important;
    }

    /* 12. Layer 弹窗在移动端适配 */
    .layui-layer {
        max-width: 90vw !important;
        left: 5vw !important;
        border-radius: 8px !important;
    }

    .layui-layer-btn {
        padding: 10px 15px !important;
    }

    .layui-layer-btn a {
        height: 36px !important;
        line-height: 36px !important;
        padding: 0 18px !important;
        font-size: 14px !important;
        border-radius: 4px !important;
    }
}