/**
 * 移动端响应式适配样式
 * 针对手机和小屏幕设备的样式覆盖
 */

/* ========================================
   全局基础样式
   ======================================== */

/* 防止水平溢出 */
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* 图片和视频自适应 */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* ========================================
   汉堡菜单修复
   ======================================== */

/* 确保汉堡菜单在移动端可见 */
@media (max-width: 1399px) {

    /* 汉堡菜单按钮始终显示 */
    .QhZGV {
        display: flex !important;
    }

    /* 滚动后导航栏变白时，菜单横线变为深色 */
    .fPTAHN.scrolled .QhZGV span {
        background-color: #333 !important;
    }

    /* 未滚动时（在有色背景上），菜单横线保持白色 */
    .fPTAHN:not(.scrolled) .QhZGV span {
        background-color: #fff;
    }
}

/* ========================================
   移动端菜单面板样式
   ======================================== */

/* 移动端菜单面板 */
.mobile-menu-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background: #fff;
    z-index: 1000;
    transition: right 0.3s ease-in-out;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

.mobile-menu-panel.open {
    right: 0;
}

/* 菜单头部 */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.mobile-menu-header img {
    height: 32px;
}

.mobile-menu-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    color: #333;
}

/* 菜单导航 */
.mobile-menu-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-nav>ul>li {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-menu-nav>ul>li>a,
.mobile-menu-nav>ul>li>.menu-toggle {
    display: block;
    padding: 16px 20px;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.mobile-menu-nav>ul>li>a:hover,
.mobile-menu-nav>ul>li>.menu-toggle:hover {
    background: #f8f8f8;
}

/* 子菜单 */
.mobile-menu-nav .submenu {
    display: none;
    background: #f8f8f8;
    padding: 0;
}

.mobile-menu-nav .has-submenu.expanded .submenu {
    display: block;
}

.mobile-menu-nav .submenu li a {
    display: block;
    padding: 12px 20px 12px 36px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
}

.mobile-menu-nav .submenu li a:hover {
    background: #f0f0f0;
    color: #333;
}

/* ========================================
   小型手机 (< 480px)
   ======================================== */
@media (max-width: 479px) {

    /* 基础字体调整 - 注意：不修改 html font-size，避免影响其他页面 */
    body {
        font-size: 14px;
        line-height: 1.6;
    }

    /* 标题字体缩小 */
    h1 {
        font-size: 28px !important;
        line-height: 36px !important;
    }

    h2 {
        font-size: 24px !important;
        line-height: 32px !important;
    }

    h3 {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    /* Hero 区域适配 */
    .eGLpvC {
        padding: 100px 16px 0 16px !important;
        background-size: 150px 140px, 200px 170px, auto !important;
    }

    .daNhqK h1 {
        font-size: 28px !important;
        line-height: 36px !important;
    }

    .fiOjhz {
        font-size: 14px !important;
        line-height: 22px !important;
        max-width: 100% !important;
    }

    /* 首页 #screen1 移动端适配 */
    #screen1 {
        height: auto !important;
        min-height: auto !important;
        padding: 80px 16px 40px 16px !important;
    }

    #screen1 #hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        min-height: auto !important;
        height: auto !important;
    }

    #screen1 .left-content {
        position: static !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    #screen1 h1 {
        font-size: 24px !important;
        margin-bottom: 16px !important;
        text-align: center !important;
    }

    #screen1 p {
        font-size: 14px !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    #screen1 button {
        float: none !important;
        display: inline-block !important;
        margin: 8px !important;
    }

    #screen1 .animation-area {
        position: static !important;
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        min-height: 200px !important;
        transform: none !important;
        margin: 20px auto 0 !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
    }

    #screen1 .animation-area video {
        width: 100% !important;
        height: auto !important;
        max-height: 400px !important;
        object-fit: contain !important;
    }

    /* 导航栏适配 */
    .fPTAHN {
        padding: 0 12px !important;
    }

    .NDhqQ {
        gap: 12px !important;
    }

    .fmyafy>a,
    .fmyafy>a>img {
        height: 36px !important;
    }

    /* Team section 网格改为单列 */
    .product-features {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

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

    #team h2 {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }

    .feature-item {
        padding: 16px !important;
    }

    .feature-icon span {
        font-size: 40px !important;
        margin-right: 12px !important;
    }

    .feature-item h3 {
        font-size: 16px !important;
    }

    .feature-item p {
        font-size: 13px !important;
    }

    /* Build section 适配 */
    #build {
        padding: 40px 0 !important;
    }

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

    .build-features {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .build-feature-item {
        padding: 12px 0 !important;
    }

    .build-feature-item h3 {
        font-size: 16px !important;
    }

    /* 功能对比区域 */
    .feature-comparison {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .feature-side {
        width: 100% !important;
    }

    .feature-side h3 {
        font-size: 20px !important;
    }

    .vs-divider {
        font-size: 24px !important;
        margin: 16px 0 !important;
    }

    /* Footer 适配 */
    .jqcUsE {
        padding: 16px 0 0 0 !important;
    }

    .jKMMcF {
        flex-direction: column !important;
    }

    .kDJeaK {
        padding: 20px 16px !important;
    }

    .jDxQiI {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .kRdZQO {
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* 轮播控制按钮 */
    .eqRLRC,
    .kKuAhD {
        width: 40px !important;
        height: 40px !important;
    }

    /* Logo 区域 */
    .lmfwaC {
        height: 50px !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .lmfwaC img {
        height: 24px !important;
    }

    /* 按钮适配 */
    .juhSIQ {
        padding: 6px 24px !important;
        font-size: 14px !important;
        height: 36px !important;
    }

    .hSijkv {
        min-width: 100px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    /* 下拉菜单面板 */
    .hjLztF {
        width: calc(100vw - 24px) !important;
        left: 12px !important;
        flex-direction: column !important;
    }

    .eLZOnL {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid #e1e1e1 !important;
    }

    .iUUsBk li,
    .iUUtFN li {
        width: 100% !important;
    }

    /* user_guide.html 移动端适配 */
    .user-guide-container {
        position: relative !important;
        top: 0 !important;
        height: auto !important;
        flex-direction: column !important;
        margin-top: 60px !important;
    }

    .user-guide-container .sidebar {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        padding: 16px 0 !important;
        border-right: none !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    .user-guide-container .sidebar h2 {
        padding: 0 0 12px !important;
        font-size: 18px !important;
    }

    .user-guide-container .sidebar .menu li a {
        padding: 10px 0 !important;
        font-size: 14px !important;
    }

    .user-guide-container .content-area {
        padding: 16px !important;
        height: auto !important;
        overflow-y: visible !important;
    }

    /* play_video.html 移动端适配 */
    .hero-section {
        height: auto !important;
        min-height: 60vh !important;
        padding: 80px 16px 40px 16px !important;
    }

    .hero-section h1 {
        font-size: 28px !important;
    }

    .hero-section p {
        font-size: 16px !important;
    }

    .hero-play-button {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   大型手机 / 小平板 (480px - 767px)
   ======================================== */
@media (min-width: 480px) and (max-width: 767px) {

    h1 {
        font-size: 32px !important;
        line-height: 42px !important;
    }

    h2 {
        font-size: 26px !important;
        line-height: 34px !important;
    }

    /* Hero 区域 */
    .eGLpvC {
        padding: 120px 20px 0 20px !important;
    }

    .daNhqK h1 {
        font-size: 34px !important;
        line-height: 44px !important;
    }

    .fiOjhz {
        font-size: 15px !important;
        max-width: 90% !important;
    }

    /* 导航栏 */
    .fPTAHN {
        padding: 0 16px !important;
    }

    /* Team section 改为双列 */
    .product-features {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

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

    /* Build section */
    #build {
        padding: 50px 0 !important;
    }

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

    .build-features {
        flex-wrap: wrap !important;
    }

    .build-feature-item {
        flex: 1 1 45% !important;
    }

    /* 功能对比 */
    .feature-comparison {
        flex-direction: column !important;
        gap: 24px !important;
    }

    .feature-side {
        width: 100% !important;
    }

    .vs-divider {
        font-size: 28px !important;
        margin: 20px 0 !important;
    }

    /* Footer */
    .kDJeaK {
        padding: 24px 20px !important;
    }

    .jDxQiI {
        flex-direction: column !important;
    }

    /* Logo */
    .lmfwaC {
        height: 56px !important;
    }

    .lmfwaC img {
        height: 28px !important;
    }
}

/* ========================================
   平板竖屏 (768px - 833px)
   ======================================== */
@media (min-width: 768px) and (max-width: 833px) {

    /* Hero 区域微调 */
    .eGLpvC {
        padding: 130px 40px 0 40px !important;
    }

    /* Team section 保持双列 */
    .product-features {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Build section */
    .build-features {
        flex-wrap: wrap !important;
    }

    .build-feature-item {
        flex: 1 1 45% !important;
    }

    /* 功能对比 - 仍然垂直布局 */
    .feature-comparison {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .feature-side {
        width: 100% !important;
    }
}

/* ========================================
   触摸设备优化
   ======================================== */
@media (hover: none) and (pointer: coarse) {

    /* 增大点击区域 */
    a,
    button {
        min-height: 44px;
        min-width: 44px;
    }

    /* 禁用 hover 效果造成的粘滞 */
    .bElClt:hover,
    .drmxbQ:hover,
    .drZHaX:hover,
    .jwxDuG:hover {
        background-color: transparent;
    }

    /* 点击时才显示效果 */
    .bElClt:active,
    .drmxbQ:active,
    .drZHaX:active,
    .jwxDuG:active {
        background-color: rgba(0, 0, 0, 0.06);
    }
}

/* ========================================
   暗色模式适配（如果系统开启）
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* 可根据需要添加暗色模式样式 */
}

/* ========================================
   减少动画（用户偏好）
   ======================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   横屏模式优化
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {

    /* Hero 区域减少顶部间距 */
    .eGLpvC {
        padding-top: 80px !important;
    }

    /* 导航栏高度减小 */
    .NDhqQ {
        height: 60px !important;
    }

    .QhZGV {
        height: 60px !important;
    }

    .iiTsSz {
        height: 60px !important;
        line-height: 60px !important;
    }
}