#top-mobile-menu-modal {
    display: none;
}

@media (max-width: 1200px) {
    /* 移动菜单模态框基础样式 */
    #top-mobile-menu-modal {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, .90);
        z-index: 9998;
        color: #fff;
        line-height: 1.6;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        visibility: hidden;
        pointer-events: none; /* 隐藏时不可点击 */
        transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* 动画效果 */
    }

    /* 菜单内容区域 */
    .top-mobile-menu-wrapper {
        padding-top: var(--topnav-height);
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 0;
        height: 100vh;
        overflow-y: auto;
    }

    .top-mobile-menu-content {
        padding-top: 10px;
        padding-bottom: 20px;
    }

    /* 菜单项 DL/DT/DD 结构 */
    .top-mobile-menu-wrapper dl {
        padding: 15px 0;
        line-height: 1.6;
    }

    .top-mobile-menu-wrapper dl:not(:first-child) {
        border-top: 1px solid #555;
    }

    /* 一级菜单标题 (dt) */
    .top-mobile-menu-wrapper dt {
        color: #fff;
        font-size: var(--font-size-h2);
        font-weight: 700;
        text-align: left;
    }

    /* 二级/三级菜单容器 (dd) */
    .top-mobile-menu-wrapper dd {
        overflow: hidden;
        margin-top: 10px;
        padding-left: 0;
        margin-left: 0;
    }

    /* 二级菜单标题 */
    .top-mobile-menu-wrapper .top-mobile-menu-column-title {
        color: #e0e0e0;
        font-size: var(--font-size-h3);
        margin-top: 10px;
        margin-bottom: 5px;
        font-weight: 500;
    }

    /* 第三级菜单容器 */
    .top-mobile-menu-items-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0 15px; /* 垂直间距0, 水平间距15px */
        padding-left: 0; /* 覆盖可能存在的父级缩进 */
    }

    /* 第三级菜单项 (a) */
    .top-mobile-menu-wrapper dd a {
        display: inline-block; /* 改为 inline-block 以便水平排列 */
        padding: 0;
        font-size: var(--font-size-p);
        color: #ccc;
        text-decoration: none;
        transition: color 0.2s;
        border-bottom: 1px solid transparent; /* 占位 */
    }

    .top-mobile-menu-wrapper dd a:hover {
        color: #fff;
        border-bottom-color: #fff; /* 悬停时显示下划线 */
    }

    .top-mobile-menu-wrapper dd a:visited {
        color: #ccc; /* 保持与未访问时一样的颜色 */
    }

    .top-mobile-menu-wrapper dd a i {
        margin-left: 8px;
        font-size: var(--font-size-p);
    }

    /* 用于JS控制页面滚动的类 */
    body.top-mobile-menu-open, html.top-mobile-menu-open {
        overflow: hidden;
    }

    #top-mobile-user-actions {
        border-top: 1px solid #555;
        padding: 15px 0;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .top-mobile-user-action-btn {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #ccc !important;  /* 避免a:visited被改色 */
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: color 0.2s;
    }

    .top-mobile-user-action-btn:hover {
        color: #fff;
    }

    .top-mobile-user-action-btn:hover svg {
        stroke: #fff; /* 悬停时SVG描边变色 */
    }

    .top-mobile-user-action-btn:hover .top-mobile-user-icon {
        color: #fff; /* 悬停时用户图标变色 */
    }

    #top-mobile-lang-toggle svg {
        stroke: #ccc; /* 默认SVG描边颜色 */
        transition: stroke 0.2s;
    }

    /* 通用：按钮内文字样式 */
    .top-mobile-user-action-btn span {
        font-size: var(--font-size-p);
        margin-left: 8px; /* 图标与文字的间距 */
    }

    .top-mobile-user-action-btn .top-mobile-user-icon {
        font-size: 18px; /* 调整图标大小 */
        transition: color 0.2s;
    }

    /* 当菜单激活时，显示模态框 */
    body.top-mobile-menu-active #top-mobile-menu-modal {
        opacity: 1;
        visibility: visible;
        pointer-events: auto; /* 显示时可点击 */
        transition: opacity 0.3s ease, visibility 0s linear 0s;
    }

    /* 当菜单激活时，锁定背景滚动 */
    body.top-mobile-menu-active {
        overflow: hidden;
    }

    /* 当菜单激活时，切换汉堡包图标为关闭图标 */
    body.top-mobile-menu-active .navbar-toggle i::before {
        content: "\f00d"; /* FontAwesome "times" (close) icon */
        font-family: "Font Awesome 5 Free"; /* 确保使用正确的字体 */
        font-weight: 900; /* FontAwesome 5+ 需要这个 */
    }
}