/* ========== 强制移动端样式（仅在桌面端生效，不影响真实移动设备）========== */

/* 只在屏幕宽度大于 1024px 时生效（桌面端/笔记本） */
@media (min-width: 1024px) {
    /* 1. 强制页面使用移动端宽度 */
    html {
        max-width: 480px !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
    }

    body {
        max-width: 480px !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.3) !important;
    }

    /* 2. 确保所有容器使用移动端宽度 */
    .wrapper,
    .container,
    .container-fluid,
    [class*="wrapper"],
    [class*="container"] {
        max-width: 480px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 3. 确保所有弹窗也使用移动端尺寸 */
@media (min-width: 1024px) {
    .modal,
    .modal-dialog,
    .layui-m-layer,
    .dialog-container {
        max-width: 480px !important;
        margin: 0 auto !important;
    }
}

/* 4. 背景色在桌面端居中显示时的处理 */
@media (min-width: 1024px) {
    html::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000;
        z-index: -1;
    }
}

/* 5. 底部导航栏固定在移动端宽度内（仅桌面端） */
@media (min-width: 1024px) {
    .footer {
        max-width: 480px !important;
        left: 50% !important;
        margin-left: -240px !important;
        position: fixed !important;
        bottom: 0 !important;
    }
}