*,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "Roboto", sans-serif;
            font-weight: 500;
            font-size: 15px;
            line-height: 1.7;
            background: url(./images/bg2.gif) repeat;
            background-size: auto;
            background-attachment: fixed;
            overflow-x: hidden;
            min-height: 100vh;
            padding: 0;
            margin: 0;
            opacity: 0;
            animation: pageFadeIn 0.8s ease forwards;
        }

        @keyframes pageFadeIn {
            to {
                opacity: 1;
            }
        }

        /* 标题样式 */
        .title-container {
            display: flex;
            gap: 12px;
            margin-bottom: 15px;
            padding: 0 10px;
            align-items: flex-end;
            flex-wrap: wrap;
            width: 100%;
            border-bottom: 1px dashed #ff6f61;
            padding-bottom: 5px;
        }

        .route-path {
            font-size: 1rem;
            color: #4a5568;
            font-weight: 400;
            margin-left: auto;
            margin-right: 0;
            line-height: 1.5;
            word-break: break-all;
            max-width: 600px;
            align-self: flex-end;
            margin-bottom: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            /* 可选：若需要垂直居中，添加 align-self: center; */
            /* align-self: center; */
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .route-path {
                font-size: 0.9rem;
                margin-left: 0;
                margin-top: 8px;
                width: 100%;
                align-self: flex-start;
                margin-bottom: 0;
                /* 移动端调整最大宽度 */
                max-width: 100%;
            }
        }

        .title-main {
            font-size: 2.2rem;
            color: #2d3748;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .title-highlight {
            font-size: 3.0rem;
            font-weight: 800;
            background: linear-gradient(90deg, #4299e1, #38b2ac);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            line-height: 1;
            padding-bottom: 8px;
        }

        /* 侧边菜单 */
        #fl_menu {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 9999;
            width: fit-content; 
            min-width: 185px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

        /* 一键添加GeoJSON按钮样式 */
        #addGeojsonBtn {
            padding: 10px 20px;
            font-size: 13px;
            font-weight: bold;
            background: linear-gradient(135deg, #e53e3e, #dd6b20);
            color: #fff;
            border: none;
            width: 100%;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        #addGeojsonBtn:hover {
            background: linear-gradient(135deg, #c53030, #c05621);
        }

        /* 隐藏文件上传input */
        #geojsonFileInput {
            display: none;
        }

        #fl_menu .label {
            padding-left: 20px;
            line-height: 45px;
            font-size: 14px;
            font-weight: bold;
            background: linear-gradient(135deg, #2d3748, #4a5568);
            color: #fff;
            letter-spacing: 1px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        #fl_menu .label i {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.7;
            }
        }

        #fl_menu .menu {
            background-color: rgba(45, 55, 72, 0.95);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }

        #fl_menu:hover .menu {
            max-height: 300px;
        }

        #fl_menu .menu .menu_item {
            display: block;
            color: #e2e8f0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding: 12px 20px;
            font-size: 13px;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        #fl_menu .menu .menu_item:hover {
            background: linear-gradient(135deg, #4299e1, #38b2ac);
            color: #fff;
            padding-left: 25px;
        }

        /* 武康路和淮海路按钮爱心颜色 */
        #loadRouteBtn .bx-heart,
        #loadHuaihaiRouteBtn .bx-heart {
            color: #ff6f61;
        }

        /* 主容器 - 修改为90%宽度、靠右、圆角 */
        .container {
            width: 82%;
            /* 宽度90% */
            height: 100vh;
            margin: 0 20px 0 auto;
            /* 靠右显示（左外边距自动） */
            padding: 0;
            display: flex;
            flex-direction: column;
            border-radius: 20px;
            /* 圆角大小，可自行调整 */
            overflow: hidden;
            /* 隐藏内部溢出，保证圆角生效 */
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
            /* 可选：添加阴影增强视觉效果 */
        }

        .section-fluid-main {
            flex: 1;
            margin: 0;
            background-color: #fff;
            border-radius: 0;
            /* 继承container的圆角，此处设为0避免冲突 */
            padding: 30px 30px 10px 30px; 
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        /* 移除按钮相关样式 */
        .goal-btn,
        .section-row {
            display: none !important;
        }

        /* 地图容器 - 占满剩余空间 */
        .map-wrap {
            position: relative;
            width: 100%;
            flex: 1;
            border-radius: 16px;
            /* 地图容器也添加圆角，与整体呼应 */
            overflow: hidden;
            background: #eee;
        }

        #map-01 {
            width: 100%;
            height: 100%;
        }

        /* Popup 自定义样式 - 新增固定宽度 */
        .mapboxgl-popup {
            width: 250px;
            /* 固定宽度（替换原max-width），数值可自定义 */
            z-index: 1000;
        }

        /* 可选：如果想让内容区域也适配固定宽度，补充如下 */
        .mapboxgl-popup-content {
            width: 100%;
            /* 让内容区域占满Popup的固定宽度 */
            padding: 18px;
            border-radius: 10px;
            background: linear-gradient(135deg, #2d3748, #4a5568);
            color: #fff;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
            border: none;
            box-sizing: border-box;
            /* 确保padding不会超出固定宽度 */
        }

        .mapboxgl-popup-content {
            padding: 18px;
            border-radius: 10px;
            background: linear-gradient(135deg, #2d3748, #4a5568);
            color: #fff;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
            border: none;
        }

        .mapboxgl-popup-content h3 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #f6ad55;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .mapboxgl-popup-content p {
            font-size: 16px;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
        }

        .mapboxgl-popup-content h6 {
            font-size: 14px;
            opacity: 0.9;
            font-weight: 400;
            margin-top: 8px;
        }

        .mapboxgl-popup-tip {
            border-top-color: #2d3748 !important;
        }

        .mapboxgl-popup-close-button {
            color: #fff;
            font-size: 20px;
            padding: 5px 10px;
        }

        /* 响应式调整 */
        @media (max-width: 992px) {
            .title-main {
                font-size: 1.8rem;
            }

            .title-highlight {
                font-size: 2.8rem;
            }
        }

        @media (max-width: 768px) {
            #fl_menu {
                width: 150px;
                top: 15px;
                left: 15px;
            }

            .section-fluid-main {
                padding: 20px;
            }

            /* 移动端保持90%宽度+靠右，可根据需求调整 */
            .container {
                border-radius: 15px;
                /* 移动端适当减小圆角 */
            }
        }

        @media (max-width: 450px) {
            .title-main {
                font-size: 1.5rem;
            }

            .title-highlight {
                font-size: 2.2rem;
            }

            .mapboxgl-popup {
                max-width: 180px;
            }

            .container {
                border-radius: 10px;
                /* 小屏进一步减小圆角 */
            }
        }

        /* 路线文字箭头样式优化 */
        .path-item+.path-item::before {
            content: '→';
            margin: 0 4px;
            color: #666;
        }