@media (max-width: 768px) {

    /* 移动端样式 */
    .header {
        padding: 12px 15px;
        position: relative;
        z-index: 1000;
    }

    .nav-container {
        justify-content: space-between;
        width: 100%;
    }

    /* 隐藏桌面导航 */
    .nav-menu {
        display: none !important;
    }

    /* 显示汉堡按钮 */
    .mobile-menu-toggle {
        right: 25px !important;
        display: block !important;
        color: white;
        font-size: 24px;
        order: 2;
        z-index: 1001;
    }


    /* 移动端菜单样式 */
    .mobile-menu {
        padding: 8px 0;
        /* 减少上下间距 */
        position: fixed;
        top: 60px;
        left: auto;
        right: 0;
        width: 160px;
        background: var(--primary-color);
        border-radius: 8px 0 0 8px;
        /* 左侧保留圆角 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform-origin: top right;
        /* 修改动画基点 */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out,
            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.2s ease;
        ;
        /* 添加缩放动画 */
        transform: scale(0.95);
        opacity: 0;
    }

    /* 新增关闭按钮定位 */
    .mobile-menu-toggle.active {
        position: fixed;
        right: 15px;
        transform: none;
        top: 12px;
        z-index: 1002;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-menu a {
        text-decoration: none !important;
        display: block;
        color: white !important;
    }

    /* 悬停效果 */
    .mobile-menu a:hover {
        color: var(--secondary-color) !important;
    }

    .mobile-menu.active {
        max-height: 400px;
        /* 根据内容高度调整 */
        opacity: 1;
        transform: scale(1);
        overflow-y: auto;
    }

    .mobile-menu li {
        padding: 8px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 15px;
        /* 缩小字体 */
        line-height: 1.4;
    }

    /* 移动端下拉菜单 */
    .mobile-menu .submenu {
        min-width: 180px;
        padding: 4px 0;
        padding-left: 0;
        position: static;
        display: none;
        box-shadow: none;
        margin-left: -8px;
        /* 增加缩进层级 */
        background: rgba(0, 0, 0, 0.2) !important;
        /* 加深背景色 */
        border-left: 2px solid var(--secondary-color);
        /* 添加左侧装饰线 */
    }

    .mobile-menu .submenu a {
        font-size: 12px !important;
        /* 调小字体 */
        padding: 4px 6px !important;
        /* 调小内边距 */
        line-height: 1.4;
        /* 增加行高 */
    }

    /* 下拉箭头颜色 */
    .mobile-menu .fa-chevron-down {
        color: white !important;
    }

    /* 二级菜单悬停效果 */
    .mobile-menu .submenu li:hover {
        background: rgba(255, 255, 255, 0.1);
        /* 弱化悬停效果 */
    }

    /* 去除下拉菜单项的下划线 */
    .mobile-menu .submenu li a {
        border-bottom: none !important;
    }

    /* 保持激活状态可视性 */
    .mobile-menu .dropdown.active {
        background: rgba(255, 255, 255, 0.05);
        /* 添加激活背景 */
    }

    .mobile-menu .dropdown.active .submenu {
        display: block;
    }
}

/* 桌面端保障样式 */
@media (min-width: 769px) {
    .mobile-menu {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .nav-menu {
        display: flex !important;
    }
}