/* 移动端响应式样式 */

/* 防止滚动穿透 */
body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* 全局移动端基础优化（限定到移动端断点内） */

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 移动端滚动优化（限定到移动端断点内） */

/* 移动端视口优化 */
@viewport {
    width: device-width;
    initial-scale: 1.0;
    maximum-scale: 1.0;
    user-scalable: no;
}

/* 触摸优化（限定到移动端断点内） */

input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* 平滑滚动（限定到移动端断点内） */

/* 触摸目标最小尺寸（已限定到移动端查询，不再全局应用） */

/* 移动端断点 */
@media screen and (max-width: 768px) {
    /* 触摸目标最小尺寸（仅移动设备） */
    a, button, input, select, textarea { min-height: 44px; min-width: 44px; }
    /* 移动端滚动优化（仅移动） */
    html, body { height: 100%; overflow-x: hidden; }
    /* 触摸优化（仅移动） */
    * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
    /* 平滑滚动（仅移动） */
    html { -webkit-overflow-scrolling: touch; }
    /* 盒模型（仅移动） */
    * { box-sizing: border-box; }
    /* 基础样式调整 */
    html {
        font-size: 14px;
    }

    body {
        font-size: 14px;
    }

    /* ========== 首页头部移动端优化 ========== */

    /* 确保 header 的 z-index 不会遮盖侧滑菜单，且不限制子元素显示 */
    header {
        z-index: 9999 !important; /* header 的 z-index 应该低于侧滑菜单 */
        overflow: visible !important; /* 确保不裁剪子元素 */
        height: auto !important; /* 不限制高度 */
        max-height: none !important; /* 不限制最大高度 */
    }

    /* 确保侧滑菜单不受 header 堆叠上下文影响，且能完全显示 */
    header .mobile-sidebar {
        /* 重置定位上下文，确保相对于 viewport 定位 */
        position: fixed !important;
        /* 确保能够突破父元素的堆叠上下文 */
        z-index: 99999 !important;
        /* 确保不受父元素限制 */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* 头部容器重置 */
    header .header {
        width: 100% !important;
        min-width: auto !important;
        max-width: none !important;
        padding: 0 1rem !important;
        box-sizing: border-box !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 60px !important;
        box-shadow: 0 2px 12px rgba(139, 92, 246, 0.1) !important;
    }

    /* 隐藏PC端导航 */
    header .top-nav {
        display: none !important;
    }

    /* Logo区域 */
    header .header .logo {
        flex: 0 0 auto !important;
        max-width: 120px !important;
        margin-right: 1rem !important;
    }

    header .header .logo img {
        width: 100% !important;
        height: auto !important;
        max-width: 120px !important;
    }

    /* 汉堡菜单按钮 */
    .mobile-menu-btn {
        display: block !important;
        position: static !important;
        font-size: 1.5rem !important;
        color: #333 !important;
        cursor: pointer !important;
        padding: 0.5rem !important;
        margin-left: auto !important;
        margin-right: 0.5rem !important;
        flex: 0 0 auto !important;
    }

    /* 右侧用户区域 */
    header .other {
        display: flex !important;
        align-items: center !important;
        gap: 0.3rem !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        float: none !important;
        height: 100% !important;
    }

    /* 搜索按钮 */
    header .other .search {
        padding: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        flex: 0 0 auto !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        line-height: 1 !important;
    }

    header .other .search .search-text {
        display: none !important;
    }

    header .other .search i {
        font-size: 1.1rem !important;
        color: #333 !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }

    /* 移动端用户头像显示 */
    header .other .user-box {
        display: flex !important;
        align-items: center !important;
        gap: 0.3rem !important;
        flex: 0 0 auto !important;
        float: none !important;
        height: 100% !important;
    }

    /* 移动端隐藏消息按钮，只显示头像 */
    header .other .user-box .message {
        display: none !important;
    }

    /* 移动端用户头像 - 与搜索按钮尺寸一致 */
    header .other .user-box .userinfo {
        padding: 0 !important; /* 移除内边距，确保居中 */
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 2.5rem !important; /* 与搜索按钮一致 */
        height: 2.5rem !important; /* 与搜索按钮一致 */
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    header .other .user-box .userinfo img {
        width: 2.5rem !important; /* 与搜索按钮尺寸一致 */
        height: 2.5rem !important; /* 与搜索按钮尺寸一致 */
        border: 1px solid #ddd !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        display: block !important;
        margin: 0 auto !important; /* 确保图片居中 */
        object-fit: cover !important; /* 确保图片比例正确 */
    }

    /* 移动端用户头像点击效果 */
    header .other .user-box .userinfo:active img {
        transform: scale(0.95) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }

    /* 移动端用户头像链接 - 允许点击但阻止默认跳转 */
    header .other .user-box .userinfo a {
        pointer-events: auto !important; /* 允许点击事件 */
        text-decoration: none !important;
        display: flex !important; /* 使用 flex 确保居中 */
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 移动端隐藏用户下拉菜单 */
    header .other .user-box .userinfo .ucenter-nav {
        display: none !important;
    }

    /* 确保 userinfo 元素可以接收点击事件，并保持居中 */
    header .other .user-box .userinfo {
        pointer-events: auto !important;
        position: relative !important;
        z-index: 10 !important;
        /* 确保居中显示 */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 未登录状态 */
    header .other .userLogin {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        font-size: 0.9rem !important;
        flex: 0 0 auto !important;
        float: none !important;
    }

    /* 移动端隐藏注册按钮 */
    header .other .userLogin .js-register {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* 移动端隐藏分隔符 */
    header .other .userLogin .js-register::before {
        display: none !important;
    }

    /* 移动端登录按钮样式优化（方案A：胶囊按钮） */
    header .other .userLogin .login {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        line-height: 1 !important;
        padding: 0.5rem 1rem !important;
        min-height: 2.2rem !important;
        min-width: 3.5rem !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        color: #fff !important;
        background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%) !important;
        border: none !important;
        border-radius: 999px !important;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3) !important;
        transition: all 0.3s ease !important;
    }

    /* 移动端登录按钮悬停效果 */
    header .other .userLogin .login:active {
        transform: translateY(1px) !important;
        box-shadow: 0 1px 4px rgba(139, 92, 246, 0.4) !important;
    }

    /* 中等屏幕优化 */
    @media screen and (min-width: 481px) and (max-width: 768px) {
        header .other .userLogin .login {
            padding: 0.5rem 1rem !important;
            font-size: 0.85rem !important;
            min-height: 2.2rem !important;
            min-width: 3.5rem !important;
        }

        /* 确保中等屏幕下注册按钮隐藏 */
        header .other .userLogin .js-register {
            display: none !important;
        }

        /* 中等屏幕下隐藏分隔符 | */
        header .other .userLogin {
            font-size: 0 !important;
        }

        header .other .userLogin .login {
            font-size: 0.85rem !important;
        }
    }

    /* 超小屏幕优化 */
    @media screen and (max-width: 480px) {
        header .header {
            padding: 0 0.5rem !important;
            height: 50px !important;
        }

        header .header .logo {
            max-width: 100px !important;
        }

        header .header .logo img {
            max-width: 100px !important;
        }

        .mobile-menu-btn {
            font-size: 1.3rem !important;
            padding: 0.3rem !important;
        }

        header .other {
            gap: 0.3rem !important;
        }

        header .other .search {
            padding: 0.3rem !important;
        }

        header .other .search i {
            font-size: 1.1rem !important;
        }

        header .other .user-box .message {
            padding: 0.3rem !important;
        }

        header .other .user-box .message i {
            font-size: 1.1rem !important;
        }

        header .other .user-box .userinfo {
            width: 2.5rem !important;
            height: 2.5rem !important;
        }

        header .other .user-box .userinfo img {
            width: 2.5rem !important;
            height: 2.5rem !important;
        }

        header .other .userLogin .login {
            padding: 0.3rem 0.7rem !important;
            font-size: 0.75rem !important;
            min-height: 1.8rem !important;
            min-width: 2.8rem !important;
        }

        /* 确保小屏幕下注册按钮隐藏 */
        header .other .userLogin .js-register {
            display: none !important;
        }

        /* 小屏幕下隐藏分隔符 | */
        header .other .userLogin {
            font-size: 0 !important;
        }

        header .other .userLogin .login {
            font-size: 0.75rem !important;
        }

        /* 超小屏幕下调整内容区域上边距 */
        .main .main-article-content {
            margin-top: 3.5rem !important; /* 头部高度50px + 间距 */
        }
    }

    /* 移动端通用注册按钮隐藏（方案A：保留头部登录按钮） */
    @media screen and (max-width: 768px) {
        header .other .userLogin .js-register {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            width: 0 !important;
            height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
            position: absolute !important;
            left: -9999px !important;
        }

        /* 隐藏分隔符“|”，仅显示登录按钮 */
        header .other .userLogin {
            font-size: 0 !important;
        }

        /* 恢复登录按钮的字体以显示文案 */
        header .other .userLogin .login {
            font-size: 0.85rem !important;
        }
    }

    /* 移动端侧滑菜单样式 */
    .mobile-sidebar-overlay {
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-sidebar-content {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        box-shadow: -4px 0 24px rgba(139, 92, 246, 0.15) !important;
        border-left: 1px solid rgba(139, 92, 246, 0.2) !important;
    }

    /* 侧滑菜单 - 确保不受父元素影响，突破堆叠上下文 */
    .mobile-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important; /* 使用视口宽度，不受父元素限制 */
        height: 100vh !important; /* 使用视口高度，不受父元素限制 */
        z-index: 99999 !important; /* 确保在所有元素之上 */
        display: none !important;
        /* 确保不受父元素 header 的堆叠上下文影响 */
        isolation: isolate !important;
        /* 确保不被裁剪 */
        overflow: visible !important;
        max-width: none !important;
        max-height: none !important;
    }

    /* 覆盖 .hide 类，确保显示 */
    .mobile-sidebar.show,
    .mobile-sidebar.show.hide {
        display: block !important;
    }

    .mobile-sidebar-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        z-index: 1 !important;
    }

    .mobile-sidebar-content {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 80% !important;
        max-width: 300px !important;
        height: 100vh !important; /* 使用视口高度，确保完整显示 */
        min-height: 100vh !important; /* 确保最小高度 */
        background-color: #fff !important;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1) !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 2 !important; /* 确保内容在遮罩层之上 */
    }

    .mobile-sidebar.show .mobile-sidebar-content {
        transform: translateX(0) !important;
    }

    .mobile-sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid #eee;
    }

    .mobile-logo img {
        height: 2rem;
        width: auto;
    }

    .mobile-close {
        font-size: 1.5rem;
        color: #666;
        cursor: pointer;
    }

    .mobile-sidebar-nav {
        padding: 1rem 0;
    }

    .mobile-nav-item {
        display: block;
        padding: 1rem 1.5rem;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid #f5f5f5;
        font-size: 1rem;
    }

    .mobile-nav-item.active {
        color: #8B5CF6;
        background-color: #f0f9f5;
    }

    .mobile-sidebar-user {
        padding: 1rem;
        border-top: 1px solid #eee;
        margin-top: auto;
    }

    .mobile-user-info {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
    }

    .mobile-user-info img {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        margin-right: 1rem;
    }

    .mobile-user-menu {
        display: flex;
        flex-direction: column;
    }

    .mobile-user-menu a {
        padding: 0.8rem 0;
        color: #666;
        text-decoration: none;
        border-bottom: 1px solid #f5f5f5;
    }

    .mobile-login-btns {
        display: flex;
        gap: 1rem;
    }

    .mobile-login-btns a {
        flex: 1;
        padding: 0.8rem;
        text-align: center;
        border: 1px solid #8B5CF6;
        border-radius: 0.25rem;
        text-decoration: none;
        color: #8B5CF6;
    }

    .mobile-login-btns a:first-child {
        background-color: #8B5CF6;
        color: #fff;
    }

    /* 移动端消息区域样式 */
    .mobile-message-section {
        margin: 1.5rem 0;
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 0.5rem;
    }

    .mobile-message-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }

    .mobile-message-header h3 {
        font-size: 1rem;
        font-weight: bold;
        color: #333;
        margin: 0;
    }

    .mobile-message-total {
        background: #FF3C2C;
        color: #fff;
        padding: 0.2rem 0.5rem;
        border-radius: 0.3rem;
        font-size: 0.8rem;
        min-width: 1.2rem;
        text-align: center;
    }

    .mobile-message-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .mobile-message-item {
        display: flex;
        align-items: center;
        padding: 0.8rem;
        background: #fff;
        border-radius: 0.3rem;
        text-decoration: none;
        color: #333;
        transition: background-color 0.2s ease;
    }

    .mobile-message-item:hover {
        background: #f0f9f5;
    }

    .mobile-message-item i {
        font-size: 1.2rem;
        color: #8B5CF6;
        margin-right: 0.8rem;
        width: 1.5rem;
        text-align: center;
    }

    .mobile-message-item span:first-of-type {
        flex: 1;
        font-size: 0.9rem;
    }

    .mobile-message-num {
        background: #FF3C2C;
        color: #fff;
        padding: 0.1rem 0.4rem;
        border-radius: 0.3rem;
        font-size: 0.7rem;
        min-width: 1rem;
        text-align: center;
    }

    /* ========== 首页主内容区域移动端优化 ========== */

    /* 主容器 */
    /* 确保页面内容不会遮盖侧滑菜单 */
    .main,
    .layui-container {
        position: relative !important;
        z-index: 1 !important; /* 确保内容层级低于侧滑菜单 */
    }

    .main {
        width: 100% !important;
        margin: 4rem auto 0 !important;
        min-width: auto !important;
        max-width: none !important;
        padding: 0 1rem !important;
        box-sizing: border-box !important;
    }

    /* 轮播图区域 */
    .main .banner {
        width: 100% !important;
        float: none !important;
        margin: 0.5rem 0 !important;
        padding: 0 !important;
        border-radius: 0.5rem !important;
        overflow: hidden !important;
    }

    .main .banner .banner-item {
        padding-bottom: 50% !important;
        position: relative !important;
        margin: 0 !important;
        min-height: 200px !important;
    }

    .main .banner .banner-item img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 轮播图指示器移动端优化 */
    .main .banner .banner-index {
        width: calc(100% - 2rem) !important;
        text-align: center !important;
        position: absolute !important;
        bottom: 1rem !important;
        z-index: 9 !important;
        left: 1rem !important;
        right: 1rem !important;
    }

    .main .banner .banner-index .swiper-pagination-bullet {
        width: 0.5rem !important;
        height: 0.5rem !important;
        background-color: rgba(255, 255, 255, 0.6) !important;
        border-radius: 50% !important;
        opacity: 1 !important;
        margin: 0 0.25rem !important;
        transition: all 0.3s ease !important;
    }

    .main .banner .banner-index .swiper-pagination-bullet-active {
        width: 1.5rem !important;
        background-color: #8B5CF6 !important;
        border-radius: 0.25rem !important;
        opacity: 1 !important;
    }

    /* 轮播图触摸优化 */
    .main .banner .swiper-container {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 覆盖 PC 固定高度，使用按比例自适应高度 */
    .banner.swiper-container {
        height: auto !important;
    }

    .main .banner .swiper-slide {
        height: auto !important;
    }

    /* 小屏幕轮播图高度优化 */
    @media screen and (max-width: 480px) {
        .main .banner .banner-item {
            padding-bottom: 60% !important;
            min-height: 180px !important;
        }

        .main .banner .banner-index {
            bottom: 0.8rem !important;
        }

        .main .banner .banner-index .swiper-pagination-bullet {
            width: 0.4rem !important;
            height: 0.4rem !important;
            margin: 0 0.2rem !important;
        }

        .main .banner .banner-index .swiper-pagination-bullet-active {
            width: 1.2rem !important;
        }
    }

    /* 中等屏幕轮播图高度优化 */
    @media screen and (min-width: 481px) and (max-width: 768px) {
        .main .banner .banner-item {
            padding-bottom: 45% !important;
            min-height: 220px !important;
        }
    }

    /* 隐藏侧边图片 */
    .main .img-box {
        display: none !important;
    }

    /* 主内容区域 */
    .main-index-article-content {
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0.5rem !important;
        padding: 0 !important;
    }

    .main-index-article-content .large-part {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }

    .main-index-article-content .small-part {
        width: 100% !important;
        margin-top: 0 !important;
    }

    /* 文章列表区域 */
    .main-index-article-content .article-box {
        background: #fff !important;
        border-radius: 0.5rem !important;
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }

    .main-index-article-content .article-box .layui-tab-title {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 1rem !important;
        margin: 0 -1rem !important;
        background: #fff !important;
        border-radius: 0.5rem 0.5rem 0 0 !important;
    }

    .main-index-article-content .article-box .layui-tab-title li {
        display: inline-block !important;
        padding: 1rem 0.8rem !important;
        margin-right: 0.5rem !important;
        font-size: 0.9rem !important;
        border-bottom: 2px solid transparent !important;
        white-space: nowrap !important;
    }

    .main-index-article-content .article-box .layui-tab-title .layui-this {
        color: #8B5CF6 !important;
        border-bottom-color: #8B5CF6 !important;
    }

    .main-index-article-content .article-box .article-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 1rem !important;
    }

    .main-index-article-content .article-box .article-list .article-item {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        background: #fff !important;
        border-radius: 0.5rem !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }

    .main-index-article-content .article-box .article-list .article-item .article-img {
        width: 100% !important;
        height: 200px !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .main-index-article-content .article-box .article-list .article-item .article-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 1rem !important;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-title {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
        color: #333 !important;
        font-weight: 500 !important;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-desc {
        font-size: 0.9rem !important;
        color: #666 !important;
        line-height: 1.4 !important;
        margin-bottom: 1rem !important;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-info {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        margin-top: 0.5rem !important;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-info .user-info {
        display: flex !important;
        align-items: center !important;
        flex: 1 !important;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-info .user-info img {
        width: 1.5rem !important;
        height: 1.5rem !important;
        border-radius: 50% !important;
        margin-right: 0.5rem !important;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-info .user-info .info {
        font-size: 0.8rem !important;
        color: #666 !important;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-info .time {
        font-size: 0.8rem !important;
        color: #999 !important;
        margin-left: auto !important;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-info .other-info {
        display: flex !important;
        align-items: center !important;
        gap: 0.8rem !important;
        margin-top: 0.5rem !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-info .other-info i {
        font-size: 0.8rem !important;
        color: #999 !important;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-info .other-info .info {
        font-size: 0.8rem !important;
        color: #999 !important;
    }

    /* 更多按钮 */
    .main-index-article-content .article-box .more {
        position: static !important;
        width: 100% !important;
        height: 3rem !important;
        line-height: 3rem !important;
        text-align: center !important;
        background: #f8f9fa !important;
        border: 1px solid #e9ecef !important;
        border-radius: 0 0 0.5rem 0.5rem !important;
        margin-top: 0 !important;
    }

    .main-index-article-content .article-box .more i {
        font-size: 1.2rem !important;
        color: #8B5CF6 !important;
    }

    /* 推荐列表移动端优化 */
    .main .main-content .large-part .floor .recommend-list {
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0 -0.5rem;
    }

    .main .main-content .large-part .floor .recommend-list .recommend-item {
        width: 50%;
        padding: 0 0.5rem;
        margin-bottom: 1rem;
        box-sizing: border-box;
    }

    .main .main-content .large-part .floor .recommend-list .recommend-item + .recommend-item {
        margin-left: 0;
    }

    /* 视频列表移动端优化 */
    .main .main-content .large-part .floor .video-list {
        flex-direction: column;
    }

    .main .main-content .large-part .floor .video-list .video-item {
        width: 100%;
        margin-bottom: 1rem;
    }

    .main .main-content .large-part .floor .video-list .video-item + .video-item {
        margin-left: 0;
    }

    /* 热门讨论移动端优化 */
    .main .main-content .large-part .floor .hot-list .hot-item .item-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .main .main-content .large-part .floor .hot-list .hot-item .item-info .time {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    /* 侧边栏移动端优化 */
    .main .main-content .small-part .floor {
        margin-bottom: 1rem;
    }

    .main .main-content .small-part .user-box {
        margin-top: 0;
    }

    /* 页脚移动端优化 */
    footer .footer {
        width: 100%;
        min-width: auto;
        max-width: none;
        padding: 2rem 1rem;
    }

    footer .footer .large-part,
    footer .footer .small-part {
        width: 100%;
        margin-bottom: 2rem;
    }

    footer .footer .small-part ul {
        display: flex;
        justify-content: center;
        margin: 2rem 0;
    }

    footer .footer .small-part ul .code-item {
        margin: 0 0.5rem;
    }

    /* 搜索框移动端优化（全屏弹层） */
    header .header .search-box {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        min-width: auto !important;
        padding: 1rem 1rem 2rem !important;
        box-shadow: none !important;
        background: #fff !important;
        z-index: 10001 !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
    }

    header .header .search-box .close {
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        font-size: 1.5rem !important;
        color: #999 !important;
    }

    header .header .search-box .title {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
        margin: 0 0 0.75rem !important;
        font-weight: bold !important;
    }

    header .header .search-box .search-inner {
        margin-top: 0.5rem !important;
        position: static !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        line-height: normal !important;
    }

    header .header .search-box .search-inner input {
        width: 100% !important;
        height: 2.75rem !important;
        padding-left: 0.75rem !important;
        padding-right: 1rem !important;
        background: #f6f6f6 !important;
        border: 1px solid #e9e9e9 !important;
        border-radius: 999px !important;
        font-size: 1rem !important;
    }

    header .header .search-box .search-inner a.search-btn {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 5.5rem !important;
        height: 2.75rem !important;
        text-align: center !important;
        background: #8B5CF6 !important;
        border-radius: 999px !important;
        font-size: 1rem !important;
        color: #fff !important;
        padding: 0 1rem !important;
        box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3) !important;
    }

    header .header .search-box .search-inner a.search-btn i {
        font-size: 1rem !important;
        margin-right: 0.25rem !important;
    }

    header .header .search-box .search-list {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-top: 1rem !important;
    }

    header .header .search-box .hot-test-text {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        margin-top: 1rem !important;
    }

    header .header .search-box .test-list {
        margin-top: 1rem !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    header .header .search-box .test-list .test-item {
        width: 100% !important;
        margin-bottom: 0 !important;
        background: #fff !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
        padding: 0.5rem !important;
    }

    header .header .search-box .test-list .test-item + .test-item {
        margin-left: 0 !important;
    }

    /* 分页移动端优化 */
    /* 全局分页器优化 */
    .pageination {
        padding: 1.5rem 0.5rem !important;
        margin-top: 1rem !important;
    }

    .pageination .layui-laypage {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pageination a,
    .pageination span {
        min-width: 2.75rem !important;
        height: 2.75rem !important;
        line-height: 2.75rem !important;
        font-size: 0.9rem !important;
        padding: 0 0.3rem !important;
        margin: 0 !important;
        border: 1px solid #E9E9E9 !important;
        border-radius: 0.375rem !important;
        box-sizing: border-box !important;
        color: #666 !important;
        background-color: #fff !important;
        transition: all 0.3s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
    }

    .pageination a:hover {
        background-color: #f5f5f5 !important;
        border-color: #8B5CF6 !important;
        color: #8B5CF6 !important;
    }

    .pageination .layui-laypage .layui-laypage-curr {
        background-color: #8B5CF6 !important;
        border-color: #8B5CF6 !important;
        color: #fff !important;
    }

    .pageination .layui-laypage .layui-laypage-curr em {
        background-color: transparent !important;
        color: #fff !important;
        font-style: normal !important;
        font-weight: 500 !important;
    }

    .pageination .layui-laypage .layui-disabled,
    .pageination .layui-laypage .layui-disabled:hover {
        background-color: #f5f5f5 !important;
        border-color: #E9E9E9 !important;
        color: #ccc !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }

    .pageination .layui-laypage .layui-laypage-spr {
        border: none !important;
        background: transparent !important;
        color: #999 !important;
        padding: 0 0.2rem !important;
        min-width: auto !important;
    }

    /* 按钮移动端优化 */
    .btn {
        min-height: 44px;
        padding: 0.8rem 1.5rem;
    }

    /* 表单移动端优化 */
    .layui-form-item {
        margin-bottom: 1rem;
    }

    .layui-input,
    .layui-textarea {
        font-size: 16px; /* 防止iOS缩放 */
    }

    /* 文章详情页移动端优化 */
    .main-article {
        width: 100%;
        margin: 4rem auto 0;
        min-width: auto;
        max-width: none;
        padding: 0 1rem;
        box-sizing: border-box;
    }

    .main-article .detail-content {
        flex-direction: column;
    }

    .main-article .detail-content .large-part {
        width: 100%;
    }

    .main-article .detail-content .small-part {
        width: 100%;
        margin-top: 2rem;
    }

    .main-article .detail-content .content-box {
        padding: 1.5rem;
    }

    .main-article .detail-content .content-box .content-title {
        font-size: 1.3rem;
        line-height: 1.5;
    }

    .main-article .detail-content .content-box .content-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .main-article .detail-content .content-box .content-info .user-info {
        margin-top: 1rem;
    }

    .main-article .detail-content .content-box .content-info .other-info {
        margin-top: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .main-article .detail-content .content-box .other-box {
        flex-direction: column;
    }

    .main-article .detail-content .content-box .other-box .keywords-box {
        width: 100%;
        margin-bottom: 1rem;
    }

    .main-article .detail-content .content-box .other-box .keywords-box .keywords-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 1.88rem;
        line-height: 1;
        background-color: #F0F3F6;
        padding: 0 0.56rem;
        font-size: 0.88rem;
        color: #666;
        border-radius: 0.19rem;
        margin-bottom: 0.63rem;
        margin-left: 0.63rem;
        box-sizing: border-box;
    }

    /* 热门文章区域的热门标签移动端样式 */
    .main-article .detail-content .hot-article .keywords-box .keywords-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 1.88rem;
        line-height: 1;
        background-color: #F0F3F6;
        padding: 0 0.56rem;
        font-size: 0.88rem;
        color: #666;
        border-radius: 0.19rem;
        margin-bottom: 0.63rem;
        margin-left: 0.63rem;
        box-sizing: border-box;
    }

    .main-article .detail-content .content-box .other-box .operate-box {
        text-align: left;
    }

    .main-article .detail-content .recommend-box .recommend-list {
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0 -0.5rem;
    }

    .main-article .detail-content .recommend-box .recommend-list .recommend-item {
        width: 50%;
        padding: 0 0.5rem;
        margin-bottom: 1rem;
        box-sizing: border-box;
    }

    .main-article .detail-content .recommend-box .recommend-list .recommend-item + .recommend-item {
        margin-left: 0;
    }

    /* 评论区域移动端优化 */
    .main-article .detail-content .comment-box .comment-input-box {
        padding: 0 1rem 1.5rem;
    }

    .main-article .detail-content .comment-box .comment-list-box {
        padding: 1.5rem;
    }

    .main-article .detail-content .comment-box .comment-list .comment-item {
        flex-direction: column;
    }

    .main-article .detail-content .comment-box .comment-list .comment-item .comment-info {
        margin-left: 0;
        margin-top: 1rem;
        width: 100%;
    }

    .main-article .detail-content .comment-box .comment-list .comment-item .reply-list {
        margin-left: 0;
        margin-top: 1rem;
    }

    /* 用户中心移动端优化 */
    .main .main-content .small-part .user-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .main .main-content .small-part .user-box .userinfo {
        width: 100% !important;
        margin-left: 0;
        margin-top: 1rem;
    }

    /* 登录页面移动端优化 */
    .login-layer-box .layer-box {
        flex-direction: column;
        padding: 2rem 1rem;
    }

    .login-layer-box .layer-box .qrcode-box {
        width: 100%;
        margin-bottom: 2rem;
    }

    .login-layer-box .layer-box .split-line {
        display: none;
    }

    .login-layer-box .layer-box .form-box {
        width: 100%;
        margin-top: 0;
    }

    /* 首页轮播图移动端优化 */
    .main .banner {
        width: 100% !important;
        margin-bottom: 1rem;
        float: none !important;
    }

    .main .img-box {
        display: none;
    }

    /* 首页主内容区域移动端优化 */
    .main-index-article-content {
        flex-direction: column;
        margin-top: 1rem;
    }

    .main-index-article-content .large-part {
        width: 100%;
        margin-bottom: 2rem;
    }

    .main-index-article-content .small-part {
        width: 100%;
    }

    /* 首页文章列表移动端优化 */
    .main-index-article-content .article-box .article-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .main-index-article-content .article-box .article-list .article-item {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 0.5rem;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .main-index-article-content .article-box .article-list .article-item .article-img {
        width: 100%;
        height: 200px;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content {
        width: 100%;
        margin-left: 0;
        padding: 1rem;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-title {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-desc {
        font-size: 0.9rem;
        color: #666;
        line-height: 1.4;
        margin-bottom: 1rem;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-info .user-info {
        display: flex;
        align-items: center;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-info .user-info img {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.5rem;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-info .time {
        font-size: 0.8rem;
        color: #999;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-info .other-info {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 0.5rem;
        width: 100%;
    }

    .main-index-article-content .article-box .article-list .article-item .article-content .article-info .other-info i {
        font-size: 0.9rem;
        color: #999;
    }

    /* 首页热门讨论移动端优化 */
    .main-index-article-content .hot-box {
        background: #fff;
        border-radius: 0.5rem;
        padding: 1.5rem;
        margin-top: 1rem;
    }

    .main-index-article-content .hot-box .hot-list .hot-item {
        padding: 1rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .main-index-article-content .hot-box .hot-list .hot-item:last-child {
        border-bottom: none;
    }

    .main-index-article-content .hot-box .hot-list .hot-item .item-title {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
    }

    .main-index-article-content .hot-box .hot-list .hot-item .tag-box {
        margin: 0.5rem 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .main-index-article-content .hot-box .hot-list .hot-item .tag-box .item-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1;
        background: #f0f9f5;
        color: #8B5CF6;
        padding: 0.2rem 0.5rem;
        border-radius: 0.2rem;
        font-size: 0.8rem;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
        box-sizing: border-box;
    }

    .main-index-article-content .hot-box .hot-list .hot-item .item-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .main-index-article-content .hot-box .hot-list .hot-item .item-info .user-info {
        display: flex;
        align-items: center;
    }

    .main-index-article-content .hot-box .hot-list .hot-item .item-info .user-info img {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.5rem;
    }

    .main-index-article-content .hot-box .hot-list .hot-item .item-info .other-info {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 0.5rem;
        width: 100%;
    }

    /* 首页侧边栏移动端优化 */
    .main-index-article-content .small-part .floor {
        background: #fff;
        border-radius: 0.5rem;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    .main-index-article-content .small-part .floor .floor-title {
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #8B5CF6;
    }

    /* 最新快讯移动端优化 */
    .main-index-article-content .small-part .new-box .new-list .new-item {
        padding: 0.8rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .main-index-article-content .small-part .new-box .new-list .new-item:last-child {
        border-bottom: none;
    }

    .main-index-article-content .small-part .new-box .new-list .new-item .item-title {
        font-size: 0.9rem;
        line-height: 1.4;
        margin-bottom: 0.3rem;
    }

    .main-index-article-content .small-part .new-box .new-list .new-item .item-time {
        font-size: 0.8rem;
        color: #999;
    }

    /* 爱宅达人移动端优化 */
    .main-index-article-content .small-part .user-box .user-list .user-item {
        display: flex;
        align-items: center;
        padding: 1rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .main-index-article-content .small-part .user-box .user-list .user-item:last-child {
        border-bottom: none;
    }

    .main-index-article-content .small-part .user-box .user-list .user-item .user-img {
        width: 3rem;
        height: 3rem;
        margin-right: 1rem;
    }

    .main-index-article-content .small-part .user-box .user-list .user-item .user-img img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .main-index-article-content .small-part .user-box .user-list .user-item .userinfo {
        flex: 1;
        margin-left: 0;
    }

    .main-index-article-content .small-part .user-box .user-list .user-item .userinfo .info-title {
        font-size: 0.9rem;
        font-weight: bold;
        margin-bottom: 0.3rem;
    }

    .main-index-article-content .small-part .user-box .user-list .user-item .userinfo .info-desc {
        font-size: 0.8rem;
        color: #666;
        line-height: 1.3;
    }

    .main-index-article-content .small-part .user-box .user-list .user-item .attention-btn {
        width: 4rem;
        height: 2rem;
        line-height: 2rem;
        font-size: 0.8rem;
        margin-top: 0;
    }

    /* 热点图集移动端优化 */
    .main-index-article-content .small-part .hot-box .hot-list .img-item {
        margin-bottom: 1rem;
    }

    .main-index-article-content .small-part .hot-box .hot-list .img-item img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 0.5rem;
    }

    .main-index-article-content .small-part .hot-box .hot-list .img-item .img-title {
        padding: 0.5rem;
        background: rgba(0,0,0,0.7);
        color: #fff;
        font-size: 0.9rem;
        line-height: 1.3;
        margin-top: -2rem;
        position: relative;
        z-index: 2;
        border-radius: 0 0 0.5rem 0.5rem;
    }

    .main-index-article-content .small-part .hot-box .hot-list .article-item {
        display: flex;
        align-items: center;
        padding: 0.8rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .main-index-article-content .small-part .hot-box .hot-list .article-item:last-child {
        border-bottom: none;
    }

    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-img {
        width: 4rem;
        height: 0;
        padding-bottom: 150%;
        margin-right: 1rem;
    }

    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0.3rem;
    }

    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-info {
        flex: 1;
        margin-left: 0;
    }

    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-info .news-title {
        font-size: 0.9rem;
        line-height: 1.3;
        margin-bottom: 0.3rem;
    }

    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-info .news-time {
        font-size: 0.8rem;
        color: #999;
    }

    /* 文章列表页面移动端优化 */
    .main .main-article-content {
        flex-direction: column;
        margin-top: 4rem !important; /* 为固定头部留出空间，避免重叠 */
        padding: 0 !important;
    }

    .main .main-article-content .full-part {
        width: 100%;
    }

    /* 文章列表页容器优化 */
    .main .main-article-content .article-box {
        overflow: visible !important;
        background: #fff !important;
        border-radius: 0.5rem !important;
        padding: 0 !important;
        margin-bottom: 1rem !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }

    /* 文章列表页 Tab 标题左右滑动 */
    .main .main-article-content .article-box .layui-tab-title {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;       /* Firefox */
        -ms-overflow-style: none !important;    /* IE/Edge */
        padding: 0 1rem !important;
        margin: 0 !important;
        background: #fff !important;
        border-bottom: 1px solid #E9E9E9 !important;
        height: auto !important;
        line-height: normal !important;
    }

    .main .main-article-content .article-box .layui-tab-title::-webkit-scrollbar {
        display: none !important;               /* Chrome/Safari */
        height: 0 !important;
        width: 0 !important;
        background: transparent !important;
    }

    .main .main-article-content .article-box .layui-tab-title li {
        display: inline-block !important;
        padding: 0.75rem 0.8rem !important;
        margin-right: 0.5rem !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        border-bottom: 2px solid transparent !important;
        white-space: nowrap !important;
    }

    .main .main-article-content .article-box .layui-tab-title .layui-this {
        color: #8B5CF6 !important;
        border-bottom-color: #8B5CF6 !important;
    }

    /* 文章列表改为两列网格布局 */
    .main .main-article-content .article-box .article-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
        margin-top: 0 !important;
        background-color: #fff !important;
        box-sizing: border-box !important;
    }

    .main .main-article-content .article-box .article-list .article-item {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border-radius: 0.5rem !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        cursor: pointer !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 图片使用固定宽高比 */
    .main .main-article-content .article-box .article-list .article-item .article-img {
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 150% !important; /* 2:3 比例 */
        position: relative !important;
        margin: 0 !important;
        border-radius: 0.5rem 0.5rem 0 0 !important;
        overflow: hidden !important;
    }

    .main .main-article-content .article-box .article-list .article-item .article-img img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 文章内容区域 */
    .main .main-article-content .article-box .article-list .article-item .article-content {
        padding: 0.6rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .main .main-article-content .article-box .article-list .article-item .article-content .article-title {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        margin: 0 0 0.4rem 0 !important;
        color: #333 !important;
        font-weight: 500 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .main .main-article-content .article-box .article-list .article-item .article-content .article-info {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-top: auto !important;
        padding-top: 0.4rem !important;
    }

    .main .main-article-content .article-box .article-list .article-item .article-content .article-info .user-info {
        display: flex !important;
        align-items: center !important;
        flex: 1 !important;
    }

    .main .main-article-content .article-box .article-list .article-item .article-content .article-info .user-info img {
        width: 1.2rem !important;
        height: 1.2rem !important;
        border-radius: 50% !important;
        margin-right: 0.4rem !important;
    }

    .main .main-article-content .article-box .article-list .article-item .article-content .article-info .user-info .info {
        font-size: 0.75rem !important;
        color: #666 !important;
    }

    .main .main-article-content .article-box .article-list .article-item .article-content .article-info .time {
        font-size: 0.75rem !important;
        color: #999 !important;
    }

    /* 分页器优化 - 占据所有列，单独一行显示 */
    .main .main-article-content .article-box .article-list .pageination {
        grid-column: 1 / -1 !important; /* 占据所有列 */
        width: 100% !important;
        padding: 1rem 0.5rem !important;
        margin-top: 0.5rem !important;
        text-align: center !important;
        box-sizing: border-box !important;
        clear: both !important;
        display: block !important;
    }

    .main .main-article-content .article-box .article-list .pageination .layui-laypage {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 分页器按钮基础样式 */
    .main .main-article-content .article-box .article-list .pageination .layui-laypage a,
    .main .main-article-content .article-box .article-list .pageination .layui-laypage span {
        min-width: 2.5rem !important;
        height: 2.5rem !important;
        line-height: 2.5rem !important;
        font-size: 0.85rem !important;
        padding: 0 0.5rem !important;
        margin: 0 !important;
        border: 1px solid #E9E9E9 !important;
        border-radius: 0.375rem !important;
        box-sizing: border-box !important;
        color: #666 !important;
        background-color: #fff !important;
        transition: all 0.3s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
    }

    /* 分页器按钮悬停效果 */
    .main .main-article-content .article-box .article-list .pageination .layui-laypage a:hover {
        background-color: #f5f5f5 !important;
        border-color: #8B5CF6 !important;
        color: #8B5CF6 !important;
    }

    /* 当前页样式 */
    .main .main-article-content .article-box .article-list .pageination .layui-laypage .layui-laypage-curr {
        position: relative !important;
        background-color: #8B5CF6 !important;
        border-color: #8B5CF6 !important;
        color: #fff !important;
    }

    .main .main-article-content .article-box .article-list .pageination .layui-laypage .layui-laypage-curr em {
        background-color: transparent !important;
        color: #fff !important;
        font-style: normal !important;
        font-weight: 500 !important;
    }

    /* 上一页/下一页按钮 */
    .main .main-article-content .article-box .article-list .pageination .layui-laypage .layui-laypage-prev,
    .main .main-article-content .article-box .article-list .pageination .layui-laypage .layui-laypage-next {
        min-width: 2.5rem !important;
        font-size: 0.9rem !important;
    }

    /* 禁用状态 */
    .main .main-article-content .article-box .article-list .pageination .layui-laypage .layui-disabled,
    .main .main-article-content .article-box .article-list .pageination .layui-laypage .layui-disabled:hover {
        background-color: #f5f5f5 !important;
        border-color: #E9E9E9 !important;
        color: #ccc !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }

    /* 省略号样式 */
    .main .main-article-content .article-box .article-list .pageination .layui-laypage .layui-laypage-spr {
        border: none !important;
        background: transparent !important;
        color: #999 !important;
        padding: 0 0.2rem !important;
        min-width: auto !important;
    }

    /* 跳转输入框和按钮（如果有） */
    .main .main-article-content .article-box .article-list .pageination .layui-laypage input,
    .main .main-article-content .article-box .article-list .pageination .layui-laypage button {
        height: 2.5rem !important;
        font-size: 0.85rem !important;
        border-radius: 0.375rem !important;
        border: 1px solid #E9E9E9 !important;
    }

    .main .main-article-content .article-box .article-list .pageination .layui-laypage input {
        width: 3.5rem !important;
        padding: 0 0.5rem !important;
        text-align: center !important;
    }

    .main .main-article-content .article-box .article-list .pageination .layui-laypage button {
        padding: 0 1rem !important;
        background-color: #8B5CF6 !important;
        color: #fff !important;
        border-color: #8B5CF6 !important;
    }

    /* 用户中心页面移动端优化 */
    .main.layui-container {
        width: 100%;
        padding: 0 1rem;
        box-sizing: border-box;
    }

    .main .main-content {
        flex-direction: column;
    }

    .main .main-content .small-part {
        width: 100%;
        margin-bottom: 2rem;
    }

    .main .main-content .large-part {
        width: 100%;
    }

    /* 登录页面移动端优化 */
    .main .box {
        width: 100%;
        margin: 2rem auto;
        padding: 2rem 1rem;
        box-sizing: border-box;
    }

    .main .box .layui-form-item {
        margin-bottom: 1.5rem;
    }

    .main .box .layui-input {
        height: 3rem;
        font-size: 16px;
    }

    .main .box .layui-btn {
        height: 3rem;
        font-size: 1.1rem;
    }

        /* 通用移动端优化 */
    .layui-tab-title {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 0 1rem;
        margin: 0 -1rem;
    }

    .layui-tab-title li {
        display: inline-block;
        margin-right: 1rem;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    /* 首页标签页移动端优化 */
    .main-index-article-content .article-box .layui-tab-title {
        background: #fff;
        border-radius: 0.5rem 0.5rem 0 0;
        margin: 0;
        padding: 0 1rem;
    }

    .main-index-article-content .article-box .layui-tab-title li {
        padding: 1rem 0.8rem;
        margin-right: 0.5rem;
        font-size: 0.9rem;
        border-bottom: 2px solid transparent;
    }

    .main-index-article-content .article-box .layui-tab-title .layui-this {
        color: #8B5CF6;
        border-bottom-color: #8B5CF6;
    }

    /* 更多按钮移动端优化 */
    .main-index-article-content .article-box .more {
        position: static;
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 0 0 0.5rem 0.5rem;
        margin-top: 0;
    }

    .main-index-article-content .article-box .more i {
        font-size: 1.2rem;
        color: #8B5CF6;
    }

    /* 楼层标题移动端优化 */
    .main-index-article-content .floor .floor-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #8B5CF6;
    }

    .main-index-article-content .floor .floor-more,
    .main-index-article-content .floor .more-link {
        font-size: 0.8rem;
        color: #8B5CF6;
        text-decoration: none;
        float: none !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        align-self: center;
        margin-left: auto;
        line-height: 1;
    }

    /* 图片懒加载优化 */
    img {
        max-width: 100%;
        height: auto;
    }

    /* 表格移动端优化 */
    .layui-table {
        font-size: 0.8rem;
    }

    .layui-table th,
    .layui-table td {
        padding: 0.5rem;
    }

    /* 弹窗移动端优化 */
    .layui-layer {
        width: 90% !important;
        max-width: 400px;
        margin: 0 auto;
    }

    .layui-layer-content {
        padding: 1rem;
    }

    /* 首页热门讨论区域 */
    .main-index-article-content .hot-box {
        background: #fff !important;
        border-radius: 0.5rem !important;
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }

    .main-index-article-content .hot-box .floor-title {
        font-size: 1.1rem !important;
        font-weight: bold !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 2px solid #8B5CF6 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .main-index-article-content .hot-box .floor-more {
        font-size: 0.8rem !important;
        color: #8B5CF6 !important;
        text-decoration: none !important;
        padding: 0.3rem 0.8rem !important;
        border: 1px solid #8B5CF6 !important;
        border-radius: 0.3rem !important;
        background: #fff !important;
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        margin-left: auto !important;
        line-height: 1 !important;
    }

    .main-index-article-content .hot-box .hot-list .hot-item {
        padding: 1rem 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .main-index-article-content .hot-box .hot-list .hot-item:last-child {
        border-bottom: none !important;
    }

    .main-index-article-content .hot-box .hot-list .hot-item .item-title {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
    }

    .main-index-article-content .hot-box .hot-list .hot-item .tag-box {
        margin: 0.5rem 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    .main-index-article-content .hot-box .hot-list .hot-item .tag-box .item-tag {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1 !important;
        background: #f0f9f5 !important;
        color: #8B5CF6 !important;
        padding: 0.2rem 0.5rem !important;
        border-radius: 0.3rem !important;
        font-size: 0.7rem !important;
        margin: 0.2rem 0.3rem 0.2rem 0 !important;
        box-sizing: border-box !important;
    }

    .main-index-article-content .hot-box .hot-list .hot-item .item-info {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    .main-index-article-content .hot-box .hot-list .hot-item .item-info .user-info {
        display: flex !important;
        align-items: center !important;
    }

    .main-index-article-content .hot-box .hot-list .hot-item .item-info .user-info img {
        width: 1.5rem !important;
        height: 1.5rem !important;
        border-radius: 50% !important;
        margin-right: 0.5rem !important;
    }

    .main-index-article-content .hot-box .hot-list .hot-item .item-info .other-info {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        margin-top: 0.5rem !important;
        width: 100% !important;
    }

    /* 首页侧边栏内容 */
    .main-index-article-content .small-part .floor {
        background: #fff !important;
        border-radius: 0.5rem !important;
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }

    .main-index-article-content .small-part .floor .floor-title {
        font-size: 1.1rem !important;
        font-weight: bold !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 2px solid #8B5CF6 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .main-index-article-content .small-part .floor .floor-more,
    .main-index-article-content .small-part .floor .more-link {
        font-size: 0.8rem !important;
        color: #8B5CF6 !important;
        text-decoration: none !important;
        padding: 0.3rem 0.8rem !important;
        border: 1px solid #8B5CF6 !important;
        border-radius: 0.3rem !important;
        background: #fff !important;
    }

    /* 最新快讯 */
    .main-index-article-content .small-part .new-box .new-list .new-item {
        padding: 0.8rem 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .main-index-article-content .small-part .new-box .new-list .new-item:last-child {
        border-bottom: none !important;
    }

    .main-index-article-content .small-part .new-box .new-list .new-item .item-title {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.3rem !important;
    }

    .main-index-article-content .small-part .new-box .new-list .new-item .item-time {
        font-size: 0.8rem !important;
        color: #999 !important;
    }

    /* 爱宅达人 */
    .main-index-article-content .small-part .user-box .user-list .user-item {
        display: flex !important;
        align-items: center !important;
        padding: 1rem 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .main-index-article-content .small-part .user-box .user-list .user-item:last-child {
        border-bottom: none !important;
    }

    .main-index-article-content .small-part .user-box .user-list .user-item .user-img {
        width: 3rem !important;
        height: 3rem !important;
        margin-right: 1rem !important;
    }

    .main-index-article-content .small-part .user-box .user-list .user-item .user-img img {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
    }

    .main-index-article-content .small-part .user-box .user-list .user-item .userinfo {
        flex: 1 !important;
        margin-left: 0 !important;
    }

    .main-index-article-content .small-part .user-box .user-list .user-item .userinfo .info-title {
        font-size: 0.9rem !important;
        font-weight: bold !important;
        margin-bottom: 0.3rem !important;
    }

    .main-index-article-content .small-part .user-box .user-list .user-item .userinfo .info-desc {
        font-size: 0.8rem !important;
        color: #666 !important;
        line-height: 1.3 !important;
    }

    .main-index-article-content .small-part .user-box .user-list .user-item .attention-btn {
        width: 4rem !important;
        height: 2rem !important;
        min-height: 2rem !important; /* 覆盖 .btn 的 44px 最小高度 */
        line-height: 1 !important;   /* 配合 flex 垂直居中 */
        font-size: 0.8rem !important;
        margin-top: 0 !important;
        padding: 0 !important;       /* 覆盖 .btn 的上下 0.8rem 内边距 */
        float: none !important;      /* 覆盖 fr 浮动以参与父级 flex 对齐 */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* 热点图集 */
    .main-index-article-content .small-part .hot-box .hot-list .img-item {
        margin-bottom: 1rem !important;
    }

    .main-index-article-content .small-part .hot-box .hot-list .img-item img {
        width: 100% !important;
        height: 150px !important;
        object-fit: cover !important;
        border-radius: 0.5rem !important;
    }

    .main-index-article-content .small-part .hot-box .hot-list .img-item .img-title {
        padding: 0.5rem !important;
        background: rgba(0,0,0,0.7) !important;
        color: #fff !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 0 0.5rem 0.5rem !important;
    }

    .main-index-article-content .small-part .hot-box .hot-list .article-item {
        display: flex !important;
        align-items: center !important;
        padding: 1rem 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .main-index-article-content .small-part .hot-box .hot-list .article-item:last-child {
        border-bottom: none !important;
    }

    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-img {
        width: 4rem !important;
        height: 0 !important;
        padding-bottom: 150% !important;
        margin-right: 1rem !important;
    }

    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0.3rem !important;
    }

    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-info {
        flex: 1 !important;
        margin-left: 0 !important;
    }

    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-info .news-title {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.3rem !important;
    }

    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-info .news-time {
        font-size: 0.8rem !important;
        color: #999 !important;
    }
}

/* 平板端优化 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .main {
        width: 95%;
        padding: 0 1rem;
    }

    .main .main-content .large-part {
        width: 70%;
    }

    .main .main-content .small-part {
        width: 28%;
    }

    .main .main-content .large-part .floor .recommend-list .recommend-item {
        width: 48%;
    }

    .main .main-content .large-part .floor .video-list .video-item {
        width: 48%;
    }
}

/* 大屏优化 */
@media screen and (min-width: 1200px) {
    .main {
        width: 80%;
        max-width: 1980px;
    }
}

/* 首页 Tab 内容：移动端两列布局优化 */
@media screen and (max-width: 768px) {
    /* 容器改为网格，两列卡片 */
    .layui-tab-content .article-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.375rem !important; /* 6px */
        padding: 0.5rem !important;
        box-sizing: border-box !important;
    }

    /* 卡片填满网格单元，去除多余外边距 */
    .layui-tab-content .article-list .article-item {
        width: 100% !important;
        margin: 0 !important;
        background: #fff !important;
        border-radius: 0.5rem !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    }

    /* 使用 200x300 竖向比例（高:宽=300:200 = 150%） */
    .layui-tab-content .article-list .article-item .article-img {
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 150% !important; /* 300/200 */
        position: relative !important;
        margin: 0 !important;
    }

    .layui-tab-content .article-list .article-item .article-img img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* 文本区域压缩内边距，提高信息密度 */
    .layui-tab-content .article-list .article-item .article-content {
        padding: 0.5rem 0.6rem !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .layui-tab-content .article-list .article-item .article-content .article-title {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        margin: 0 0 0.3rem 0 !important;
        color: #333 !important;
    }

    /* 摘要不隐藏，展示完整内容（由后端/数据长度控制） */
    .layui-tab-content .article-list .article-item .article-content .article-desc {
        font-size: 0.78rem !important;
        color: #666 !important;
        line-height: 1.4 !important;
        margin: 0 0 0.5rem 0 !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
        max-height: none !important;
        white-space: normal !important;
    }

    /* 底部信息行紧凑化 */
    .layui-tab-content .article-list .article-item .article-content .article-info {
        margin-top: 0.3rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
    }

    .layui-tab-content .article-list .article-item .article-content .article-info .user-info img {
        width: 1.2rem !important;
        height: 1.2rem !important;
        margin-right: 0.35rem !important;
    }

    .layui-tab-content .article-list .article-item .article-content .article-info .user-info .info,
    .layui-tab-content .article-list .article-item .article-content .article-info .time,
    .layui-tab-content .article-list .article-item .article-content .article-info .other-info .info {
        font-size: 0.72rem !important;
    }

    .layui-tab-content .article-list .article-item .article-content .article-info .other-info {
        gap: 0.5rem !important;
        width: auto !important;
        margin-top: 0 !important;
        margin-left: auto !important;
    }

    .layui-tab-content .article-list .article-item .article-content .article-info .other-info i {
        font-size: 0.85rem !important;
    }

    /* 针对 .main-content 下的资讯列表移动端优化 - 两列布局 */
    .main .main-content .article-box .article-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
        box-sizing: border-box !important;
    }

    .main .main-content .article-box .article-list .article-item {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border-radius: 0.5rem !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 分页单独一行显示在所有article-item下面 */
    .main .main-content .article-box .article-list .pageination {
        grid-column: 1 / -1 !important; /* 占据所有列 */
        width: 100% !important;
        padding: 1rem 0.5rem !important;
        margin-top: 0.5rem !important;
        text-align: center !important;
        box-sizing: border-box !important;
        clear: both !important;
        display: block !important;
    }

    .main .main-content .article-box .article-list .pageination .layui-laypage {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .main .main-content .article-box .article-list .pageination .layui-laypage a,
    .main .main-content .article-box .article-list .pageination .layui-laypage span {
        min-width: 2.5rem !important;
        height: 2.5rem !important;
        line-height: 2.5rem !important;
        font-size: 0.85rem !important;
        padding: 0 0.5rem !important;
        margin: 0 !important;
        border: 1px solid #E9E9E9 !important;
        border-radius: 0.375rem !important;
        box-sizing: border-box !important;
        color: #666 !important;
        background-color: #fff !important;
        transition: all 0.3s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
    }

    .main .main-content .article-box .article-list .pageination .layui-laypage a:hover {
        background-color: #f5f5f5 !important;
        border-color: #8B5CF6 !important;
        color: #8B5CF6 !important;
    }

    .main .main-content .article-box .article-list .pageination .layui-laypage .layui-laypage-curr {
        background-color: #8B5CF6 !important;
        border-color: #8B5CF6 !important;
        color: #fff !important;
    }

    .main .main-content .article-box .article-list .pageination .layui-laypage .layui-laypage-curr em {
        background-color: transparent !important;
        color: #fff !important;
        font-style: normal !important;
        font-weight: 500 !important;
    }

    .main .main-content .article-box .article-list .pageination .layui-laypage .layui-disabled,
    .main .main-content .article-box .article-list .pageination .layui-laypage .layui-disabled:hover {
        background-color: #f5f5f5 !important;
        border-color: #E9E9E9 !important;
        color: #ccc !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }

    .main .main-content .article-box .article-list .article-item .article-img {
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 150% !important; /* 2:3比例 */
        position: relative !important;
        margin: 0 !important;
        border-radius: 0.5rem 0.5rem 0 0 !important;
        overflow: hidden !important;
    }

    .main .main-content .article-box .article-list .article-item .article-img img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }

    .main .main-content .article-box .article-list .article-item .article-content {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0.75rem !important;
        box-sizing: border-box !important;
    }

    .main .main-content .article-box .article-list .article-item .article-content .article-title {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
        color: #333 !important;
        font-weight: 500 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .main .main-content .article-box .article-list .article-item .article-content .article-desc {
        font-size: 0.85rem !important;
        color: #666 !important;
        line-height: 1.5 !important;
        margin-bottom: 0.75rem !important;
        overflow: visible !important;
        max-height: none !important;
    }

    .main .main-content .article-box .article-list .article-item .article-content .article-info {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        margin-top: 0.5rem !important;
    }

    .main .main-content .article-box .article-list .article-item .article-content .article-info .user-info {
        display: flex !important;
        align-items: center !important;
        flex: 1 !important;
    }

    .main .main-content .article-box .article-list .article-item .article-content .article-info .user-info img {
        width: 1.5rem !important;
        height: 1.5rem !important;
        border-radius: 50% !important;
        margin-right: 0.5rem !important;
    }

    .main .main-content .article-box .article-list .article-item .article-content .article-info .time {
        font-size: 0.75rem !important;
        color: #999 !important;
    }

    .main .main-content .article-box .article-list .article-item .article-content .article-info .other-info {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }

    .main .main-content .article-box .article-list .article-item .article-content .article-info .other-info i {
        font-size: 0.9rem !important;
        color: #999 !important;
    }

    .main .main-content .article-box .article-list .article-item .article-content .article-info .other-info .info {
        font-size: 0.75rem !important;
        color: #999 !important;
    }
}

/* Tab 文章列表两列布局高优先级覆盖（确保不同结构下生效） */
@media screen and (max-width: 768px) {
    .main-index-article-content .article-box .layui-tab-content .article-list,
    .layui-tab-content.article-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.375rem !important; /* 6px */
    }
}

/* 高优先级覆盖：Tab 内文章卡片使用 200x300 比例（覆盖早先固定高度） */
@media screen and (max-width: 768px) {
    .main-index-article-content .article-box .layui-tab-content .article-list .article-item .article-img {
        height: 0 !important;
        padding-bottom: 150% !important; /* 300/200 */
        position: relative !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .main-index-article-content .article-box .layui-tab-content .article-list .article-item .article-img img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* 移动端：强化选择器并使用位移外扩，确保生效可见 */
@media screen and (max-width: 768px) {
	/* 更高优先级：下移激活下划线，避免被默认样式覆盖 */
	.main-index-article-content .article-box.layui-tab-brief > .layui-tab-title .layui-this:after {
		bottom: -4px !important;
	}

	/* 容器允许内容外扩可见 */
	.main-index-article-content .article-box {
		overflow: visible !important;
	}

	/* 仅内容区外扩：使用位移+宽度扩展，避免父级剪裁与 margin 抵消问题 */
	.main-index-article-content .article-box > .layui-tab-content {
		position: relative !important;
		left: -0.5rem !important;
		width: calc(100% + 1rem) !important;
		padding: 0.375rem !important;
		box-sizing: border-box !important;
	}
}

@media screen and (max-width: 375px) {
	.main-index-article-content .article-box > .layui-tab-content {
		left: -0.625rem !important;
		width: calc(100% + 1.25rem) !important;
	}
}

/* 移动端隐藏 Layui 顶部 Tab 切换按钮（左右切换箭头） */
@media screen and (max-width: 768px) {
    .layui-unselect.layui-tab-bar {
        display: none !important;
    }

    /* 提高当前激活标签高度，避免遮挡 */
    .layui-this.translation-text-wrapper {
        min-height: 2.6rem !important;
        line-height: 1.3 !important;
        padding: 0.6rem 0.8rem !important;
    }

    /* 隐藏首页 Tab 标题横向滚动条（不影响滚动），防止覆盖文字 */
    .main-index-article-content .article-box .layui-tab-title {
        scrollbar-width: none !important;       /* Firefox */
        -ms-overflow-style: none !important;    /* IE/Edge */
    }
    .main-index-article-content .article-box .layui-tab-title::-webkit-scrollbar {
        display: none !important;               /* Chrome/Safari */
        height: 0 !important;
        width: 0 !important;
        background: transparent !important;
    }
}

/* 移动端：恢复并下移 Tab 标题的横向滚动条，避免遮挡文字 */
@media screen and (max-width: 768px) {
    .main-index-article-content .article-box .layui-tab-title {
        padding-bottom: 0.6rem !important;            /* 为滚动条留出下方空间 */
        scrollbar-width: thin !important;             /* Firefox 显示细滚动条 */
        -ms-overflow-style: auto !important;          /* IE/Edge 恢复滚动条 */
        scrollbar-gutter: stable both-edges !important; /* 现代浏览器保留滚动条空间 */
    }
    .main-index-article-content .article-box .layui-tab-title::-webkit-scrollbar {
        height: 6px !important;                       /* WebKit 滚动条高度 */
        display: block !important;                    /* 覆盖先前的隐藏 */
        background: transparent !important;
    }
    .main-index-article-content .article-box .layui-tab-title::-webkit-scrollbar-thumb {
        background: rgba(139, 92, 246, 0.6) !important; /* 品牌色半透明 */
        border-radius: 999px !important;
    }
    .main-index-article-content .article-box .layui-tab-title::-webkit-scrollbar-track {
        background: transparent !important;
    }

    /* 提升标签项底部留白，让文字远离滚动条 */
    .main-index-article-content .article-box .layui-tab-title li {
        padding-bottom: 0.9rem !important;
        line-height: 1.3 !important;
    }

    /* 下划线同步下移，避免与滚动条重叠 */
    .main-index-article-content .article-box.layui-tab-brief > .layui-tab-title .layui-this:after {
        bottom: -6px !important;
    }
}

/* 移动端：首页整体更紧凑的间距覆盖 */
@media screen and (max-width: 768px) {
    /* 页面容器左右留白与顶部间距更紧凑 */
    .main {
        margin: 3.25rem auto 0 !important;
        padding-left: 0.75rem !important;  /* 12px */
        padding-right: 0.75rem !important; /* 12px */
    }

    /* Banner 与周边间距更小 */
    .main .banner {
        margin: 0.375rem 0 !important;
    }

    /* 首页主容器与区块间距更小 */
    .main-index-article-content {
        margin-top: 0.375rem !important;
    }

    /* 区块卡片内边距更小（文章区、热门区、右侧区） */
    .main-index-article-content .article-box,
    .main-index-article-content .hot-box,
    .main-index-article-content .small-part .floor {
        padding: 0.875rem !important; /* 14px */
    }

    /* 楼层标题与内容间距更小 */
    .main-index-article-content .floor .floor-title {
        margin-bottom: 0.5rem !important;
        padding-bottom: 0.25rem !important;
    }

    /* Tabs 标题左右内边距与外扩幅度更小 */
    .main-index-article-content .article-box .layui-tab-title {
        padding: 0 0.5rem !important;
        margin: 0 -0.5rem !important;
    }
    .main-index-article-content .article-box .layui-tab-title li {
        padding: 0.75rem 0.6rem 0.9rem !important;
        margin-right: 0.375rem !important;
    }

    /* 列表栅格间距与容器内边距更小 */
    .main-index-article-content .article-box .article-list {
        gap: 0.5rem !important;
        padding: 0.5rem !important;
    }

    /* 卡片正文内边距更小 */
    .main-index-article-content .article-box .article-list .article-item .article-content {
        padding: 0.6rem !important;
    }

    /* 侧栏/热门列表项上下间距更小 */
    .main-index-article-content .small-part .user-box .user-list .user-item,
    .main-index-article-content .small-part .hot-box .hot-list .article-item,
    .main-index-article-content .hot-box .hot-list .hot-item {
        padding: 0.6rem 0 !important;
    }

    /* 页脚更紧凑 */
    footer { margin-top: 0 !important; }
    footer .footer {
        padding: 1.25rem 0.75rem !important;
    }
}

/* 移动端：首页移除区块阴影与圆角，统一用外层间距体现分隔 */
@media screen and (max-width: 768px) {
    /* 主要区块与卡片去除圆角/阴影 */
    .main .banner,
    .main .banner .banner-item,
    .main .banner .banner-item img,
    .main-index-article-content .article-box,
    .main-index-article-content .hot-box,
    .main-index-article-content .small-part .floor,
    .main-index-article-content .article-box .article-list .article-item,
    .main-index-article-content .article-box .article-list .article-item .article-img,
    .main-index-article-content .hot-box .hot-list .img-item img,
    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-img img {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* 区块内部留白更小，分隔主要依赖外层（容器/区块）间距 */
    .main-index-article-content .article-box,
    .main-index-article-content .hot-box,
    .main-index-article-content .small-part .floor {
        padding: 0.5rem !important;
    }
}

/* 移动端：Banner 取消圆角并压缩与上下模块的间距 */
@media screen and (max-width: 768px) {
    .main .banner {
        border-radius: 0 !important;
        margin: 0.25rem 0 !important; /* 上下更紧凑 */
    }
    .main .banner .banner-item,
    .main .banner .banner-item img {
        border-radius: 0 !important;
    }
    .main-index-article-content {
        margin-top: 0.25rem !important; /* 与 Banner 拉近 */
    }
}

/* 移动端：hot-box 适配 200x300 竖图与紧凑布局 */
@media screen and (max-width: 768px) {
    /* 热点图集：两列网格，列间距 6px */
    .main-index-article-content .small-part .hot-box .hot-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.375rem !important; /* 6px */
    }

    /* 顶部大图卡：占单列，图下放标题，不叠字 */
    .main-index-article-content .small-part .hot-box .hot-list .img-item {
        margin: 0 !important;
    }
    .main-index-article-content .small-part .hot-box .hot-list .img-item img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 2 / 3 !important; /* 200x300 */
        object-fit: cover !important;
        display: block !important;
    }
    .main-index-article-content .small-part .hot-box .hot-list .img-item .img-title {
        position: static !important;
        background: transparent !important;
        color: #333 !important;
        margin-top: 0.25rem !important;
        padding: 0 !important;
        display: block !important;
        line-height: 1.35 !important;
        /* 两行显示，超出省略 */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: break-word !important;
    }
    .main-index-article-content .small-part .hot-box .hot-list .img-item .img-title a {
        color: inherit !important;
    }

    /* 后续文章条目：占满两列，缩略图 2:3，宽 72px */
    .main-index-article-content .small-part .hot-box .hot-list .article-item {
        grid-column: 1 / -1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.5rem 0 !important;
    }
    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-img {
        width: 72px !important;
        height: auto !important;
        aspect-ratio: 2 / 3 !important;
        flex: 0 0 auto !important;
        padding-bottom: 0 !important;
        margin-right: 0.5rem !important;
    }
    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-img img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 2 / 3 !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }
    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-info {
        margin-left: 0 !important;
    }
    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-info .news-title {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.25rem !important;
    }
    .main-index-article-content .small-part .hot-box .hot-list .article-item .news-info .news-time {
        font-size: 0.75rem !important;
        color: #999 !important;
    }

    /* 每 6 条穿插 1 张精选卡（跨整行），考虑前两张大图占位，选用第 8、14、20... 个子项 */
    .main-index-article-content .small-part .hot-box .hot-list .article-item:nth-child(6n+8) {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 40% 1fr !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.5rem 0 !important;
    }
    .main-index-article-content .small-part .hot-box .hot-list .article-item:nth-child(6n+8) .news-img {
        width: 100% !important;
        margin-right: 0 !important;
        aspect-ratio: 2 / 3 !important;
    }
    .main-index-article-content .small-part .hot-box .hot-list .article-item:nth-child(6n+8) .news-img img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 2 / 3 !important;
        object-fit: cover !important;
    }
    .main-index-article-content .small-part .hot-box .hot-list .article-item:nth-child(6n+8) .news-info {
        margin-left: 0 !important;
    }
    .main-index-article-content .small-part .hot-box .hot-list .article-item:nth-child(6n+8) .news-info .news-title {
        font-size: 1rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.25rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .main-index-article-content .small-part .hot-box .hot-list .article-item:nth-child(6n+8) .news-info .news-time {
        font-size: 0.8rem !important;
        color: #999 !important;
    }

    /* ============================================
       个人中心页面 H5 全面优化
       ============================================ */

    /* 主容器布局优化 */
    .main {
        margin-top: 3.5rem !important; /* 减少顶部间距 */
        padding: 0 0.75rem !important; /* 添加左右内边距 */
    }

    /* 用户信息卡片优化 */
    .main .person-info-box {
        border-radius: 0.5rem !important;
        margin-bottom: 1rem !important;
        overflow: hidden !important;
    }

    .main .person-info-box .person-info {
        padding-bottom: 25% !important; /* 调整背景图高度 */
        min-height: 120px !important;
    }

    .main .person-info-box .person-info .user-icon {
        width: 4rem !important;
        height: 4rem !important;
        margin-left: -2rem !important;
        border-width: 2px !important;
    }

    .main .person-info-box .person-info .info-item {
        height: 2.5rem !important;
        margin-top: -1.25rem !important;
        padding: 0 5% !important;
    }

    .main .person-info-box .person-info .info-item .item-item .item-info {
        font-size: 0.75rem !important;
        line-height: 1rem !important;
    }

    .main .person-info-box .person-info .info-item .item-item .item-num {
        font-size: 1.2rem !important;
        line-height: 1.2rem !important;
        margin-top: 0.5rem !important;
    }

    .main .person-info-box .other-info {
        width: 90% !important;
        padding-top: 2.5rem !important;
    }

    .main .person-info-box .other-info .username {
        font-size: 1.2rem !important;
        line-height: 1.2rem !important;
    }

    .main .person-info-box .other-info .user-desc {
        font-size: 0.8rem !important;
        line-height: 1.2rem !important;
        margin-top: 0.5rem !important;
        padding: 0 1rem !important;
    }

    .main .person-info-box .other-info .btn-box {
        margin-top: 1rem !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
    }

    .main .person-info-box .other-info .btn-box .btn {
        width: auto !important;
        min-width: 5rem !important;
        height: 2rem !important;
        line-height: 2rem !important;
        padding: 0 1rem !important;
        font-size: 0.85rem !important;
    }

    /* 主内容区域布局优化 */
    .main .main-content {
        flex-direction: column !important;
        margin-top: 1rem !important;
        gap: 1rem !important;
    }

    .main .main-content .small-part,
    .main .main-content .large-part {
        width: 100% !important;
        margin: 0 !important;
    }

    /* 区块卡片优化 */
    .main .main-content .part-floor {
        margin-bottom: 1rem !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.08) !important;
        overflow: hidden !important;
    }

    .main .main-content .part-floor .floor-header {
        font-size: 0.9rem !important;
        padding-left: 1rem !important;
        line-height: 2.5rem !important;
        font-weight: 600 !important;
    }

    /* 文章列表优化 */
    .main .main-content .part-floor .article-list {
        padding: 0.75rem 1rem 1rem !important;
    }

    .main .main-content .part-floor .article-list .article-item {
        margin-top: 0.75rem !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        border-bottom: 1px solid rgba(139, 92, 246, 0.05) !important;
    }

    .main .main-content .part-floor .article-list .article-item:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .main .main-content .part-floor .article-list .article-item .news-img {
        width: 4.5rem !important; /* 72px */
        height: 0 !important;
        padding-bottom: 6.75rem !important; /* 108px (72px * 1.5 = 108px, 保持 2:3 比例) */
        position: relative !important;
        border-radius: 0.3rem !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .main .main-content .part-floor .article-list .article-item .news-img img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .main .main-content .part-floor .article-list .article-item .news-info {
        flex: 1 !important;
        margin: 0 !important;
        min-width: 0 !important; /* 允许文本截断 */
    }

    .main .main-content .part-floor .article-list .article-item .news-info .news-title {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        height: auto !important;
        max-height: 2.6rem !important; /* 约2行 */
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        margin-bottom: 0.25rem !important;
    }

    .main .main-content .part-floor .article-list .article-item .news-info .news-title a {
        color: #333 !important;
        text-decoration: none !important;
    }

    .main .main-content .part-floor .article-list .article-item .news-info .news-title a:active {
        color: #8B5CF6 !important;
    }

    /* 查看更多链接优化 */
    .main .main-content .part-floor .floor-footer {
        font-size: 0.8rem !important;
        line-height: 2.2rem !important;
        text-align: center !important;
    }

    .main .main-content .part-floor .floor-footer a {
        color: #8B5CF6 !important;
        text-decoration: none !important;
    }

    /* 访客列表优化 */
    .main .main-content .part-floor .user-list {
        padding: 0.75rem 1rem 1rem !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 0.75rem !important;
    }

    .main .main-content .part-floor .user-list .user-item {
        width: calc(33.333% - 0.5rem) !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .main .main-content .part-floor .user-list .user-item img {
        width: 70% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
    }

    .main .main-content .part-floor .user-list .user-item .username {
        width: 100% !important;
        font-size: 0.75rem !important;
        margin-top: 0.5rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* 右侧内容区域优化（动态/文章/收藏） */
    .main .main-content .large-part {
        margin-top: 0 !important;
    }

    .main .main-content .large-part .content-box {
        background: #fff !important;
        border-radius: 0.5rem !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.08) !important;
    }

    .main .main-content .large-part .content-box .content-title {
        height: 2.5rem !important;
        line-height: 2.5rem !important;
        padding-left: 0.75rem !important;
        border-bottom: 1px solid rgba(139, 92, 246, 0.1) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .main .main-content .large-part .content-box .content-title li {
        font-size: 0.85rem !important;
        padding: 0 1rem !important;
        line-height: 2.5rem !important;
        min-width: auto !important;
    }

    .main .main-content .large-part .content-box .content-title li.layui-this:after {
        width: 40% !important;
        height: 2px !important;
        border-bottom: 2px solid #8B5CF6 !important;
        border-radius: 0 !important;
        bottom: 0 !important;
        left: 30% !important;
    }

    .main .main-content .large-part .content-box .layui-tab-content {
        padding: 0.75rem !important;
    }

    .main .main-content .large-part .content-box .content-list {
        padding: 0.75rem !important;
    }

    /* 内容列表项优化 */
    .main .main-content .large-part .content-box .content-list .content-item {
        padding-top: 1rem !important;
        margin-bottom: 1rem !important;
        padding-bottom: 1rem !important;
        border-bottom: 1px solid rgba(139, 92, 246, 0.05) !important;
    }

    .main .main-content .large-part .content-box .content-list .content-item:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }

    .main .main-content .large-part .content-box .content-list .content-item .img-box {
        width: 2.5rem !important;
        height: 2.5rem !important;
        margin-right: 0.75rem !important;
    }

    .main .main-content .large-part .content-box .content-list .content-item .item-content {
        width: calc(100% - 3.5rem) !important;
        font-size: 0.85rem !important;
    }

    /* 动态内容中的 article-img 优化 */
    .main .main-content .large-part .content-box .content-list .content-item .item-content .content-content {
        padding: 0.75rem !important;
    }

    .main .main-content .large-part .content-box .content-list .content-item .item-content .content-content .article-img {
        width: 4.5rem !important; /* 72px */
        height: 0 !important;
        padding-bottom: 6.75rem !important; /* 108px (72px * 1.5 = 108px, 保持 2:3 比例) */
        position: relative !important;
        border-radius: 0.3rem !important;
        overflow: hidden !important;
        margin-right: 0.75rem !important;
        flex-shrink: 0 !important;
    }

    .main .main-content .large-part .content-box .content-list .content-item .item-content .content-content .article-img img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .main .main-content .large-part .content-box .content-list .content-item .item-content .content-content .article-content {
        width: calc(100% - 5.25rem) !important; /* 调整宽度以适应移动端图片尺寸 (4.5rem + 0.75rem) */
    }

    .main .main-content .large-part .content-box .content-list .content-item .item-content .item-desc {
        line-height: 2.5rem !important;
        font-size: 0.85rem !important;
    }

    .main .main-content .large-part .content-box .content-list .content-item .item-content .item-desc .time {
        font-size: 0.75rem !important;
        margin-left: 0.5rem !important;
    }

    /* 响应式调整 - 小屏幕 */
    @media screen and (max-width: 375px) {
        .main .main-content .part-floor .article-list .article-item .news-img {
            width: 4rem !important; /* 64px */
            padding-bottom: 6rem !important; /* 96px */
        }

        .main .person-info-box .person-info .user-icon {
            width: 3.5rem !important;
            height: 3.5rem !important;
            margin-left: -1.75rem !important;
        }

        .main .main-content .part-floor .user-list .user-item {
            width: calc(50% - 0.375rem) !important;
        }
    }
}