/* 移动端首屏优化 - 遵循移动端其他部分的设计模式 */

@media screen and (max-width: 768px) {
    
    /* 🎯 首屏容器优化 - 保持正常文档流，参照其他部分 */
    #lvFuYhxX {
        min-height: 100vh !important;
        /* 移除flex强制布局，保持原有结构 */
        padding-bottom: 20px !important;
    }
    
    /* 🎯 全新移动端导航设计 - 包含explore组件 */
    #lvFuYhxX #iGhTLSDZ {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95)) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 0 0 16px 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        padding: 16px 20px 12px 20px !important; /* 底部内边距减小 */
        margin: 0 12px 16px 12px !important;
        position: relative !important;
        z-index: 100 !important;
        overflow: visible !important; /* 确保内容可见 */
    }
    
    /* Logo区域 - 居中显示 */
    #lvFuYhxX #NEGNODiD {
        text-align: center !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
    }
    
    /* Logo图标缩放优化 */
    #lvFuYhxX #NEGNODiD .svg-viewer-box-b6f38 {
        margin: 0 auto !important;
        transform: scale(0.9) !important;
    }
    
    /* 导航菜单容器 - 优化的2x2网格布局 */
    #lvFuYhxX .btn-row-c58e4 {
        background: rgba(255, 255, 255, 0.9) !important;
        border-radius: 12px !important;
        padding: 10px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        gap: 8px !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* 导航按钮 - 2x2设计，允许文字换行显示 */
    #lvFuYhxX .btn-ece02 {
        background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
        border: 1px solid rgba(102, 112, 133, 0.15) !important;
        border-radius: 6px !important;
        padding: 6px 4px !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        color: #475569 !important;
        text-align: center !important;
        white-space: normal !important; /* 允许换行显示 */
        overflow: visible !important; /* 显示完整内容 */
        text-overflow: clip !important; /* 不截断文字 */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        position: relative !important;
        min-height: 44px !important; /* 增加高度容纳换行文字 */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.1 !important;
        word-break: break-word !important; /* 必要时断词 */
    }
    
    /* 导航按钮悬停效果 */
    #lvFuYhxX .btn-ece02:hover {
        background: linear-gradient(135deg, #f1f5f9, #e2e8f0) !important;
        border-color: rgba(102, 112, 133, 0.25) !important;
        transform: translateY(-1px) scale(1.02) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        color: #334155 !important;
    }
    
    /* 导航按钮文字 - 允许换行显示 */
    #lvFuYhxX .btn-text-d97c4 {
        font-size: 9px !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
        white-space: normal !important; /* 允许换行 */
        overflow: visible !important; /* 显示完整内容 */
        text-overflow: clip !important; /* 不截断 */
        max-width: 100% !important;
        text-align: center !important;
        word-break: break-word !important; /* 必要时断词 */
        display: block !important; /* 确保文字正常显示 */
    }
    
    /* 语言选择器区域 */
    #lvFuYhxX #language-selector-container {
        margin: 12px auto 0 auto !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* 语言选择器按钮 */
    #lvFuYhxX .language-selector-button {
        background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
        border: none !important;
        border-radius: 20px !important;
        padding: 8px 16px !important;
        color: white !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3) !important;
        transition: all 0.3s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    #lvFuYhxX .language-selector-button:hover {
        background: linear-gradient(135deg, #f59e0b, #d97706) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4) !important;
    }
    
    /* 📝 主标题区域 - 简洁无背景样式，避免与图片重叠 */
    #lvFuYhxX #jhVzzpCT {
        padding: 40px 15px 20px 15px !important; /* 大幅增加顶部和底部间距 */
        text-align: center !important;
        /* 移除背景和阴影 */
        background: transparent !important;
        backdrop-filter: none !important;
        margin: 20px 10px 15px 10px !important; /* 增加上下边距 */
        border-radius: 0 !important;
        box-shadow: none !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* 主标题文字 */
    #lvFuYhxX #wVLpdWJm [data-font-size="3.5vw"] {
        font-size: clamp(22px, 6vw, 28px) !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
        padding: 0 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* 副标题文字 */
    #lvFuYhxX #TImvexHe [data-font-size="1vw"] {
        font-size: clamp(15px, 3.5vw, 18px) !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0.9 !important;
    }
    
    /* 📱 App下载按钮区域 - 更清晰的布局，大幅增加间距 */
    #lvFuYhxX #blVhhzUh {
        padding: 25px 15px !important; /* 大幅增加上下间距 */
        margin-top: 25px !important; /* 大幅增加上边距 */
        margin-bottom: 25px !important; /* 大幅增加下边距避免与图片重叠 */
    }
    
    #lvFuYhxX #blVhhzUh .page-layout-row-inner-ab83f {
        display: flex !important;
        flex-direction: column !important; /* 垂直排列避免挤压 */
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 0 15px !important;
    }
    
    /* App Store 按钮样式增强 - 更大尺寸确保文字可见 */
    #lvFuYhxX .image_box-c5e00[style*="1e19de426ffc79bbe8c8086d1151e36d.png"],
    #lvFuYhxX .image_box-c5e00[style*="e7daf524dde62b6bafa316f03236d277.png"] {
        max-width: 160px !important; /* 增大尺寸 */
        min-width: 160px !important; /* 设置最小宽度 */
        height: auto !important;
        margin: 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    #lvFuYhxX .image_box-c5e00[style*="1e19de426ffc79bbe8c8086d1151e36d.png"]:hover,
    #lvFuYhxX .image_box-c5e00[style*="e7daf524dde62b6bafa316f03236d277.png"]:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* 🖼️ 手机图片区域 - 自然布局，远离上方内容 */
    #lvFuYhxX #kDYKaAXO {
        padding: 40px 15px 20px 15px !important; /* 大幅增加顶部内边距 */
        margin-top: 40px !important; /* 大幅增加上边距避免重叠 */
        text-align: center !important;
    }
    
    #lvFuYhxX #kDYKaAXO .image_item-ff7d7 {
        max-width: 280px !important;
        width: 65% !important;
        height: auto !important;
        margin: 0 auto !important;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15)) !important;
    }
    
    /* 🎨 布局容器统一优化 */
    #lvFuYhxX .layout-col-container-aa69d {
        padding: 0 10px !important;
    }
    
    /* 📐 间距精细调整 */
    #lvFuYhxX .layout_row-margin_top-e2d5e,
    #lvFuYhxX .layout_row-margin_bottom-b3e51 {
        height: 8px !important;
    }
}

/* 📱 小屏幕特殊处理 - 更紧凑布局 */
@media screen and (max-width: 480px) {
    
    /* 小屏幕导航区域调整 */
    #lvFuYhxX #iGhTLSDZ {
        padding: 12px 16px !important;
        margin: 0 8px 12px 8px !important;
        border-radius: 0 0 12px 12px !important;
    }
    
    /* 小屏幕导航按钮容器 */
    #lvFuYhxX .btn-row-c58e4 {
        gap: 6px !important;
        padding: 10px !important;
    }
    
    /* 小屏幕导航按钮 */
    #lvFuYhxX .btn-ece02 {
        padding: 5px 3px !important;
        font-size: 8px !important;
        min-height: 44px !important; /* 保持足够高度容纳换行 */
        border-radius: 6px !important;
    }
    
    /* 小屏幕按钮文字 */
    #lvFuYhxX .btn-text-d97c4 {
        font-size: 8px !important;
        line-height: 1.1 !important;
    }
    
    /* 小屏幕语言选择器 */
    #lvFuYhxX .language-selector-button {
        padding: 6px 12px !important;
        font-size: 11px !important;
        border-radius: 16px !important;
    }
    
    /* 小屏幕Logo缩放 */
    #lvFuYhxX #NEGNODiD .svg-viewer-box-b6f38 {
        transform: scale(0.8) !important;
    }
    
    /* 主标题区域更紧凑但保持足够间距 */
    #lvFuYhxX #jhVzzpCT {
        padding: 25px 10px 15px 10px !important; /* 保持顶部间距避免重叠 */
        margin: 15px 8px 10px 8px !important; /* 保持上下边距 */
        border-radius: 10px !important;
    }
    
    /* 主标题文字 */
    #lvFuYhxX #wVLpdWJm [data-font-size="3.5vw"] {
        font-size: clamp(20px, 6.5vw, 26px) !important;
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
    }
    
    /* 副标题文字 */
    #lvFuYhxX #TImvexHe [data-font-size="1vw"] {
        font-size: clamp(14px, 3.5vw, 16px) !important;
        line-height: 1.3 !important;
    }
    
    /* App按钮区域调整 - 大幅增加间距避免重叠 */
    #lvFuYhxX #blVhhzUh {
        padding: 20px 12px !important; /* 大幅增加上下间距 */
        margin-top: 20px !important; /* 大幅增加上边距 */
        margin-bottom: 20px !important; /* 大幅增加下边距 */
    }
    
    #lvFuYhxX #blVhhzUh .page-layout-row-inner-ab83f {
        gap: 10px !important;
    }
    
    /* App Store 按钮更小但保持文字可见 */
    #lvFuYhxX .image_box-c5e00[style*="1e19de426ffc79bbe8c8086d1151e36d.png"],
    #lvFuYhxX .image_box-c5e00[style*="e7daf524dde62b6bafa316f03236d277.png"] {
        max-width: 140px !important; /* 保持合适大小 */
        min-width: 140px !important;
        border-radius: 8px !important;
    }
    
    /* 手机图片适配小屏 - 大幅增加间距 */
    #lvFuYhxX #kDYKaAXO {
        padding: 30px 10px 15px 10px !important; /* 增加顶部内边距 */
        margin-top: 25px !important; /* 增加上边距避免重叠 */
    }
    
    #lvFuYhxX #kDYKaAXO .image_item-ff7d7 {
        width: 55% !important;
        max-width: 240px !important;
    }
    
    /* 布局容器更紧凑 */
    #lvFuYhxX .layout-col-container-aa69d {
        padding: 0 6px !important;
    }
}

/* 🔄 横屏模式 - 遵循mobile-display-fix.css */
@media screen and (max-height: 600px) and (orientation: landscape) {
    
    /* 减少垂直间距 - 遵循其他部分的模式 */
    #lvFuYhxX #iGhTLSDZ, 
    #lvFuYhxX #jhVzzpCT, 
    #lvFuYhxX #blVhhzUh {
        padding: 8px 0 !important;
    }
    
    #lvFuYhxX #kDYKaAXO {
        padding: 12px 0 !important;
        margin-top: 10px !important;
    }
    
    /* 主标题更紧凑 - 遵循mobile-display-fix.css */
    #lvFuYhxX #wVLpdWJm [data-font-size="3.5vw"] {
        font-size: clamp(18px, 6vw, 24px) !important;
        line-height: 1.1 !important;
        margin-bottom: 5px !important;
    }
    
    /* 副标题更紧凑 */
    #lvFuYhxX #TImvexHe [data-font-size="1vw"] {
        font-size: clamp(14px, 3.5vw, 16px) !important;
        margin-top: 5px !important;
    }
    
    /* 手机图片适应横屏 - 遵循mobile-display-fix.css */
    #lvFuYhxX #kDYKaAXO .image_item-ff7d7 {
        width: 40% !important;
        max-width: 200px !important;
    }
}