body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f5f5f7;
    min-height: 100vh;
    position: relative;
}
#map {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}
.control-panel {
    position: fixed;
    left: 16px;
    top: 16px;
    bottom: 24px;
    width: 300px; /* 更紧凑的宽度 */
    z-index: 1200;
    background: rgba(255, 255, 255, 0.3); /* 更强的毛玻璃效果 */
    backdrop-filter: blur(40px) saturate(280%); /* 增强毛玻璃效果 */
    -webkit-backdrop-filter: blur(40px) saturate(280%);
    padding: 16px; /* 更紧凑的内边距 */
    border-radius: 18px; /* 更圆润的苹果风格 */
    box-shadow:
        0 8px 40px rgba(0,0,0,0.15),
        0 0 0 1px rgba(255,255,255,0.2),
        inset 0 1px 0 rgba(255,255,255,0.4); /* 苹果风格内阴影 */
    border: 0.5px solid rgba(0,0,0,0.06); /* 添加微妙边框 */
    display: flex;
    flex-direction: column;
    gap: 12px; /* 更紧凑的间距 */
    overflow-y: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.control-panel::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}
.control-panel > * {
    position: relative;
    z-index: 1;
}
.control-section {
    padding: 0;  /* 移除内边距 */
}
.control-section-title {
    font-size: 15px; /* 稍微增大字体 */
    font-weight: 590; /* 苹果风格字重 */
    color: rgba(0, 0, 0, 0.85); /* 更深的颜色 */
    margin: 0;
    margin-right: auto;
    letter-spacing: -0.01em; /* 苹果风格字间距 */
}
.search-box {
    width: 100%;
    display: flex;
    gap: 8px;
}
.search-box input {
    flex: 1;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.3) !important;
}
.button-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 三列布局更紧凑 */
    gap: 6px; /* 更小的间距 */
    background: rgba(255, 255, 255, 0.3); /* 与控制面板一致的毛玻璃效果 */
    backdrop-filter: blur(40px) saturate(280%); /* 增强毛玻璃效果 */
    -webkit-backdrop-filter: blur(40px) saturate(280%);
    border-radius: 12px;
    padding: 8px;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    box-shadow: 
        0 8px 40px rgba(0,0,0,0.15),
        0 0 0 1px rgba(255,255,255,0.2),
        inset 0 1px 0 rgba(255,255,255,0.4); /* 苹果风格多层阴影 */
}
.button-group button {
    height: 32px; /* 更紧凑的高度 */
    padding: 0 12px; /* 更小的内边距 */
    font-size: 12px; /* 更小的字体 */
    font-weight: 500;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.05);
}
.button-group button:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-0.5px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.button-group button:active {
    transform: translateY(0);
    box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.1);
}

/* 两个按钮的专用样式 - 居中对齐 */
.button-group-two {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列等宽布局 */
    gap: 8px; /* 适中的间距 */
    background: rgba(255, 255, 255, 0.3); /* 与控制面板一致的毛玻璃效果 */
    backdrop-filter: blur(40px) saturate(280%); /* 增强毛玻璃效果 */
    -webkit-backdrop-filter: blur(40px) saturate(280%);
    border-radius: 12px;
    padding: 8px;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    box-shadow: 
        0 8px 40px rgba(0,0,0,0.15),
        0 0 0 1px rgba(255,255,255,0.2),
        inset 0 1px 0 rgba(255,255,255,0.4); /* 苹果风格多层阴影 */
}

.button-group-two button {
    height: 32px; /* 与原button-group一致的高度 */
    padding: 0 12px; /* 与原button-group一致的内边距 */
    font-size: 12px; /* 与原button-group一致的字体 */
    font-weight: 500;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.05);
}

.button-group-two button:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-0.5px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.button-group-two button:active {
    transform: translateY(0);
    box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.1);
}
.style-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}
.style-control {
    width: 100%;
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 12px;
}
.style-control label {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 500;
}
.style-control input[type="range"] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    outline: none;
}
.style-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.style-control .unit {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
    margin-left: 4px;
}
.style-control input[type="color"] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent !important;
    margin-left: auto;  /* 将颜色选择器推到右边 */
    margin-right: 20px;
}
.waypoints-container {
    width: 100%;
    padding: 0;  /* 移除内边距 */
}
.waypoint-input,
.waypoint-item {
    width: calc(100% - 48px);  /* 减去左右各24px的边距 */
    margin: 0 24px 12px 24px;  /* 使用margin来控制边距 */
}
.waypoint-input input,
.waypoint-item input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.3) !important;
    font-size: 14px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}
.waypoint-controls {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 12px 0;
}
.add-waypoint-btn {
    margin: 8px 0;  /* 调整上下间距 */
}
.transport-mode {
    width: 120px;  /* 设置合适的宽度 */
}
#waypoints-list {
    padding: 0;  /* 移除内边距 */
}
.waypoint-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 0px);  /* 减去左右padding */
    /*margin: 0 0px 0px 0px;*/
}
.waypoint-item input {
    flex: 1;
    width: calc(100% - 28px);  /* 减去删除按钮的宽度和间距 */
}
.waypoint-label {
    font-size: 14px;
    color: #1d1d1f;
    margin-bottom: 8px;
    font-weight: 500;
}
.remove-waypoint {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.1) !important;
    color: #ff3b30;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    line-height: 1;
}
.remove-waypoint:hover {
    background: rgba(255, 59, 48, 0.2) !important;
}
input, button, select {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(8px);
}
input::placeholder {
    font-size: 11px;
}
.search-box input {
    height: 16px;
    font-size: 14px;
    padding: 12px 16px;
}
button {
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.primary-button {
    background: #0071e3;
    color: rgb(0, 0, 0);
}
.primary-button:hover {
    background: #0077ED;
    transform: translateY(-1px);
}
.secondary-button {
    background: #e8e8ed;
    color: #1d1d1f;
}
.secondary-button:hover {
    background: #d8d8dd;
    transform: translateY(-1px);
}
#pathModeBtn.active {
    background: #000000;
    color: white;
}
#path-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    z-index: 1000;
}
#path-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.map-style-switch {
    width: 40%;
    margin: 0;
}
.map-style-switch select {
    width: 100%;
    height: 36px;
    text-align: center;
    padding-right: 28px;
}
.export-panel {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none;
}
.export-header {
    padding: 16px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.export-content {
    padding: 16px;
}
.export-preview {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    height: 500px;
}
.export-settings {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.setting-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.setting-group label {
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1f;
}
.setting-group input {
    width: 100%;
    height: 40px;
}
.export-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}
.export-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 更轻的遮罩，苹果风格 */
    backdrop-filter: blur(8px); /* 添加背景模糊 */
    -webkit-backdrop-filter: blur(8px);
    z-index: 5000;
}
.export-overlay.visible {
    display: block;
}
.route-info {
    display: none;
}
.route-normal {
    animation: none;
}
.route-highlight {
    animation: pathPulse 2s infinite;
    stroke-dasharray: 8, 8;
}
@keyframes pathPulse {
    0% {
        stroke-width: 6;
        stroke: #0071e3;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-width: 8;
        stroke: #00a3ff;
        stroke-dashoffset: -8;
    }
    100% {
        stroke-width: 6;
        stroke: #0071e3;
        stroke-dashoffset: -16;
    }
}
.path-mode .mapboxgl-canvas {
    filter: none;
}
.loading-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}
.loading-indicator.visible {
    display: flex;
}
.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0071e3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.navigation-mode {
    margin-left: 12px;
}
.navigation-mode select {
    height: 44px;
    padding: 0 12px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-size: 14px;
    color: #1d1d1f;
    background: #ffffff;
    cursor: pointer;
}
@media (max-width: 768px) {
    .waypoint-group {
        flex-direction: column;
        width: 80%;
    }

    .waypoint-input {
        width: 100%;
    }

    .add-waypoint {
        margin: 8px 0;
    }
}
/* Removed mobile-debug related styles */
.mobile-view {
    max-width: 375px;
    margin: 0 auto;
    border: 10px solid #333;
    border-radius: 20px;
    height: 100vh;
    overflow: auto;
}
.waypoint-input:first-child input {
    padding-right: 40px;
}
.waypoint-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.waypoint {
    width: 100%;
    min-width: 0;
}
/* Removed unused copy-modal related styles */
.modal {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
}

.modal-content {
    position: relative;
    background-color: #f8f8f8;
    padding: 30px 20px 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 500px;
    min-height: 180px; /* 增加高度 */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #888;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

.modal-close-btn:hover {
    color: #000;
}

#coordinate-result {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 18px;
    padding: 20px;
    margin: 15px 0 25px;
    background-color: #f8f8f8;
    border-radius: 8px;
    word-break: break-all;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: #000;
    font-weight: 500;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

#copyCoordBtn {
    margin: 0 auto;
    min-width: 140px;
    font-size: 15px;
    padding: 10px 20px;
}
/* 弹窗标题样式 */
.modal-title {
    position: static; /* 改为静态定位，在 flex 布局中 */
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.2;
    text-align: left;
    flex-grow: 1; /* 让标题占据剩余空间 */
    padding-right: 30px; /* 避免与关闭按钮重叠 */
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 8px; /* 标题和内容的间距 */
}
.coordinate-converter {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    width: 100%;
}
.coordinate-converter input {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.3) !important;
    font-size: 14px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.coordinate-converter button {
    height: 40px;
    padding: 0 16px;
    white-space: nowrap;
}
/* 顶部控制区域布局 */
.top-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0;  /* 移除内边距 */
}
/* 统一输入框和选择框样式 */
.waypoint-input input,
.map-style-switch select,
#path-mode {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.3) !important;
    font-size: 14px;
    color: #1d1d1f;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
/* 途经点样式 */
.waypoint-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 0px);  /* 减去左右padding */
    /*margin: 0 24px 12px 24px;*/
}
.waypoint-item input {
    flex: 1;
    width: calc(100% - 28px);  /* 减去删除按钮的宽度和间距 */
}
.remove-waypoint {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}
/* 驾驶模式选择框样式 */
#path-mode {
    width: 80px;  /* 减小宽度 */
    text-align: center;
    padding: 0 24px 0 8px;  /* 调整内边距，为下拉箭头留出空间 */
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h10L5 6z' fill='%23000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 6px;
}
.export-preview-window {
    position: fixed;
    left: 16px;  /* 与新控制面板对齐 */
    bottom: 24px; /* 与新控制面板底部对齐 */
    width: 300px;  /* 与新控制面板宽度一致 */
    background: rgba(255, 255, 255, 0.3); /* 与控制面板一致的毛玻璃效果 */
    backdrop-filter: blur(40px) saturate(280%); /* 增强毛玻璃效果 */
    -webkit-backdrop-filter: blur(40px) saturate(280%);
    border-radius: 18px; /* 与控制面板一致的圆角 */
    box-shadow:
        0 8px 40px rgba(0,0,0,0.15),
        0 0 0 1px rgba(255,255,255,0.2),
        inset 0 1px 0 rgba(255,255,255,0.4); /* 苹果风格内阴影 */
    border: 0.5px solid rgba(0,0,0,0.06); /* 与控制面板一致的边框 */
    padding: 16px; /* 与控制面板一致的内边距 */
    z-index: 6000;
    transform: translateY(120%);
    transition: transform 0.3s ease;
}
.export-preview-window.visible {
    transform: translateY(0);  /* 显示时滑入 */
}
.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px; /* 更紧凑的间距 */
    padding-bottom: 8px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06); /* 添加分隔线 */
}
.preview-header h3 {
    font-size: 16px;
    font-weight: 590; /* 苹果风格字重 */
    color: rgba(0, 0, 0, 0.85);
    margin: 0;
    letter-spacing: -0.01em;
}
.preview-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    background: rgba(248, 249, 250, 0.9); /* 与控制面板一致的背景 */
    border-radius: 10px;
    padding: 8px 12px;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
}
.preview-control label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
}
.preview-control input {
    width: 70px;
    height: 28px; /* 更紧凑 */
    padding: 0 8px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}
.preview-control input:focus {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.2);
    outline: none;
}
.preview-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}
.preview-actions button {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.preview-tip {
    text-align: center;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    background: rgba(248, 249, 250, 0.8);
    border-radius: 8px;
    padding: 8px 12px;
    border: 0.5px solid rgba(0, 0, 0, 0.04);
}
.loading-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}
.loading-indicator.visible {
    display: flex;
}
.loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #e5e5e5;
    border-top-color: #0071e3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
/* Ensure modal-content is defined only once */
/* .modal-content { ... already defined ... } */
.modal-content p {
    font-size: 16px;
    color: #1d1d1f;
    padding: 12px;
    background: #f5f5f7;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: center;
}
/* 确保所有输入框和按钮对齐 */
.waypoint-input,
.waypoint-item,
#start,
#end {
    width: calc(100% - 0px);  /* 减去左右padding */
    /*margin: 0 24px 12px 24px;*/
    box-sizing: border-box;
}
/* 缩放等级显示器样式 */
.zoom-level {
    background: rgba(255, 255, 255, 0.8);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 8px;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
/* 导出预览中心十字架样式 */
.center-crosshair {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* 低于控制面板(z-index: 2)，高于地图(隐式或z-index: 1) */
    display: none;
}
.center-crosshair::before,
.center-crosshair::after {
    content: '';
    position: absolute;
    background: transparent;
    border: 1px dashed rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.center-crosshair::before {
    left: 50%;
    top: 0;
    width: 0;
    height: 100%;
    transform: translateX(-50%);
}
.center-crosshair::after {
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    transform: translateY(-50%);
}

.gis-export-section {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    margin-top: 10px;
}

.gis-export-type-selector {
    margin-bottom: 10px;
}

.gis-export-type-selector select {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    font-size: 14px;
}

.gis-export-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.gis-export-buttons button {
    margin: 0 4px 8px 0;
    height: 32px;
    padding: 0 12px;
    min-width: 80px;
}

.gis-export-buttons button.active {
    background: #000000 !important;
    color: white;
}

.gis-export-buttons button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* GIS导出按钮样式增强 */
.gis-export-buttons button {
    position: relative;
    overflow: hidden;
}

.gis-export-buttons button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.2s;
}

.gis-export-buttons button:not(:disabled):active::after,
.gis-export-buttons button.active::after {
    opacity: 1;
}

/* Web Worker加载提示 */
.worker-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s;
}

.worker-loading.visible {
    opacity: 1;
}

.worker-spinner {
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top: 6px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

.worker-loading span {
    color: white;
    font-size: 18px;
    margin-bottom: 20px;
}

.cancel-export-btn {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cancel-export-btn:hover {
    background-color: #c0392b;
}
.layer-toggle-controls {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.layer-toggle-controls h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 600;
}
.layer-toggle-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.layer-toggle-group label {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.8);
}
.layer-toggle-group input[type="checkbox"] {
    margin-right: 6px;
}
/* 等高线标签样式 */
.mapboxgl-ctrl-attrib {
    /* 调整以避免与新控件重叠 */
    bottom: 50px;
}
.zoom-control-container {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fine-tune-container {
    display: flex;
    align-items: center;
    gap: 8px;
}
.zoom-fine-tune-btn {
    width: 40px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background-color: #f0f0f0;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}
.zoom-fine-tune-btn:hover {
    background-color: #e0e0e0;
}
.zoom-level-input {
    width: 60px;
    height: 28px;
    margin-right: 5px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    -moz-appearance: textfield;
}
.zoom-level-input::-webkit-outer-spin-button,
.zoom-level-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mapboxgl-ctrl-group {
    width: 30px !important; /* 强制宽度 */
    box-shadow: none !important; /* 移除默认阴影 */
    display: flex; /* 确保 flex 布局 */
    flex-direction: column; /* 强制垂直布局 */
}
.zoom-level-input {
    width: 100%; /* 宽度占满容器 */
    height: 28px;
    box-sizing: border-box; /* 确保 padding 和 border 在宽度内 */
    padding: 0 2px; /* 稍微留点内边距 */
    margin-bottom: 1px; /* 和按钮的间距 */
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px 4px 0 0; /* 只给顶部加圆角 */
    font-size: 12px;
    -moz-appearance: textfield;
}
.zoom-level-input::-webkit-outer-spin-button,
.zoom-level-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mapboxgl-ctrl-group > button {
    width: 100% !important; /* 让Mapbox按钮也占满宽度 */
    border-radius: 0 !important; /* 移除按钮圆角 */
    box-shadow: none !important;
    margin-top: -1px; /* 移除按钮间默认的小间隙 */
}
/* 调整最后一个按钮（Compass）的下边框圆角 */
.mapboxgl-ctrl-group > button.mapboxgl-ctrl-compass {
     border-bottom-left-radius: 4px !important;
     border-bottom-right-radius: 4px !important;
}

/* 坐标转换结果文本样式 */
.convert-result {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    color: #333;
    margin: 10px 0;
    padding: 8px;
    background-color: rgba(240, 240, 240, 0.9);
    border-radius: 4px;
    word-break: break-all;
}

/* 中心十字准星 */
.crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
}

.crosshair::before,
.crosshair::after {
    content: '';
    position: absolute;
    background-color: rgba(255, 0, 0, 0.8);
    /* 添加白色虚线边框 */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 
                0 0 0 2px rgba(0, 0, 0, 0.4);
}

.crosshair::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

.crosshair::after {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

/* 用户信息和积分面板样式 */
.user-credits-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.credits-info {
    display: flex;
    align-items: baseline; /* 改为基线对齐 */
    gap: 6px; /* 稍微调整间距 */
}

.credits-amount {
    font-size: 20px; /* 从22px减小，为更多位数留空间 */
    font-weight: 600;
    color: #0071e3;
    line-height: 1;
    margin-right: 4px; /* 积分数字和"积分"文字间的间距 */
}

.credits-label {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1;
    margin-bottom: 3px;
    white-space: nowrap;
}

/* 积分信息按钮 */
.credits-info-button {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #555;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    margin-left: 6px; /* 问号与"积分"文字的间距，从8px减小 */
    padding: 0;
    line-height: 1;
}

.credits-info-button:hover {
    background-color: #ccc;
}

/* 积分说明模态窗口和分享模态窗口通用样式 */
.credits-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.credits-modal.visible {
    opacity: 1;
}

.credits-modal-content {
    background-color: rgba(255, 255, 255, 0.97);
    width: 90%;
    max-width: 480px;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 
}

.credits-modal.visible .credits-modal-content {
    transform: scale(1);
}

.credits-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #999;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.credits-modal-close:hover {
    color: #000;
    background-color: rgba(0, 0, 0, 0.05);
}

.credits-modal h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

.credits-modal-body {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.credits-modal-body p {
    margin: 12px 0;
}

.credits-modal-body strong {
    color: #000;
}

.credits-modal-body ul {
    padding-left: 20px;
    margin: 10px 0 20px;
}

.credits-modal-body li {
    margin-bottom: 8px;
    position: relative;
}

.credits-modal-body li::before {
    content: '•';
    position: absolute;
    left: -15px;
    color: #0071e3;
}

.user-actions {
    display: flex;
    align-items: center;
    margin-left: 8px; /* 从12px减小，使问号更靠近分享按钮 */
    flex-shrink: 0; /* 防止此容器因积分数字变长而被压缩 */
}

/* 可以移除旧的tooltip相关样式 */
.tooltip-trigger, .tooltip-content, .tooltip-trigger:hover::after {
    display: none;
}

/* 历史记录项目样式 */
.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.history-time {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    width: 60px;
}

.history-desc {
    flex-grow: 1;
    font-size: 13px;
    padding: 0 10px;
}

.history-amount {
    font-size: 13px;
    font-weight: 500;
}

.credit-use {
    color: #ff3b30;
}

.credit-add {
    color: #34c759;
}

.history-empty {
    text-align: center;
    color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
    padding: 10px 0;
}

/* 分层设色控制样式 */
.hypsometric-tint-controls h4 {
    color: rgba(0, 0, 0, 0.7);
    font-weight: 600;
}

/* 开关样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 40px; /* 开关宽度 */
  height: 22px; /* 开关高度 */
  margin-left: auto; /* 尝试让开关靠右 */
  justify-self: end; /* 网格布局中靠右 */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc; /* 关闭时的背景色 */
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px; /* 滑块高度 */
  width: 16px; /* 滑块宽度 */
  left: 3px; /* 滑块左边距 */
  bottom: 3px; /* 滑块底边距 */
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #0071e3; /* 打开时的背景色 (苹果蓝) */
}

input:focus + .slider {
  box-shadow: 0 0 1px #0071e3;
}

input:checked + .slider:before {
  transform: translateX(18px); /* 滑块移动距离 */
}

/* 圆角样式 */
.slider.round {
  border-radius: 22px;
}

.slider.round:before {
  border-radius: 50%;
}

/* 配色方案下拉框调整 */
#hypsometric-scheme {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.3) !important;
    font-size: 14px;
    color: #1d1d1f;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h10L5 6z' fill='%23000'/%3E%3C/svg%3E"); /* 添加下拉箭头 */
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    padding-right: 30px; /* 为箭头留出空间 */
}

/* 分层设色自定义控件样式 */
.hypsometric-customization-controls h4 {
    color: rgba(0, 0, 0, 0.7);
    font-weight: 600;
}

#hypsometric-interpolation,
#hypsometric-preset-schemes {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.3) !important;
    font-size: 14px;
    color: #1d1d1f;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h10L5 6z' fill='%23000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    padding-right: 30px; /* 为箭头留出空间 */
}

/* 颜色阶梯编辑器行 */
.color-stop-row {
    display: grid;
    grid-template-columns: 70px 1fr 30px 20px; /* 海拔输入框 | 颜色选择器 | 颜色预览 | 删除按钮 */
    gap: 8px;
    align-items: center;
}

.color-stop-row input[type="number"] {
    width: 100%;
    height: 28px;
    padding: 0 6px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    text-align: right;
     -moz-appearance: textfield; /* Firefox */
}
.color-stop-row input[type="number"]::-webkit-outer-spin-button,
.color-stop-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Chrome, Safari, Edge, Opera */
    margin: 0;
}

.color-stop-row input[type="color"] {
    width: 100%;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* 颜色预览小方块 (可选) */
.color-stop-preview {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    justify-self: center;
}

.delete-stop-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.1) !important;
    color: #ff3b30;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.delete-stop-btn:hover {
    background: rgba(255, 59, 48, 0.2) !important;
}

/* 微信联系方式面板样式 */
.wechat-contact-panel {
    display: flex;
    justify-content: space-around; /* 图片左右分布 */
    align-items: flex-start; /* 如果文字长度不一，顶部对齐 */
    margin-top: 20px; /* 与上方内容的间距 */
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.05); /* 分隔线 */
    text-align: center; /* 内部文字居中 */
}

.wechat-item {
    display: flex;
    flex-direction: column; /* 图片和文字垂直排列 */
    align-items: center; /* 交叉轴居中 */
    max-width: 100px; /* 每个项目的最大宽度，避免过宽 */
}

.wechat-item img {
    width: 80px; /* 图片宽度 */
    height: 80px; /* 图片高度 */
    border-radius: 8px; /* 轻微圆角 */
    margin-bottom: 8px; /* 图片与下方文字的间距 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 轻微阴影增加立体感 */
}

.wechat-item .contact-label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-top: 0; /* 重置外边距 */
    margin-bottom: 4px;
    line-height: 1.3;
}

.wechat-item .contact-sublabel {
    font-size: 11px;
    color: #777; /* 浅色文字 */
    margin: 0;
    line-height: 1.2;
}

.crosshair-toggle-label {
    align-items: center;
    font-size: 13px;
    color: rgba(0,0,0,0.8);
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    display: flex; /* 确保复选框和文字在同一行 */
} 

/* -------------------- 等时圈专用布局 -------------------- */
.iso-section .style-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.iso-time-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.iso-time-inputs input[type="number"] {
    width: 100%;
}

.iso-line-settings {
    display: grid;
    grid-template-columns: 60px 1fr 40px;
    row-gap: 6px;
    column-gap: 8px;
    align-items: center;
    padding: 6px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 12px;
}

.iso-line-settings input[type="range"] {
    width: 100%;
}

.iso-center-row { display: grid; grid-template-columns: 1fr 110px; gap: 8px; max-width: 100%; }
.iso-section #isochrone-profile {
    text-align: center;
    text-align-last: center;
}

.iso-color-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 12px;
}

.iso-row { display: flex; align-items: center; gap: 8px; }
.iso-row label { min-width: 70px; color: #555; }
.iso-row input[type="range"] { width: 120px; }
.iso-row .value { min-width: 36px; text-align: right; }
.iso-color-block input[type="color"] { width: 30px; height: 20px; border: none; border-radius: 3px; }
.iso-color-block input[type="number"] {
    height: 26px;
    width: 60px !important;
    text-align: center;
    font-size: 14px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: rgba(255, 255, 255, 0.5) !important;
    padding: 0 6px;
}

/* 苹果风格折叠区域 - 提高优先级，添加毛玻璃效果 */
.collapsible {
    background: rgba(255, 255, 255, 0.3) !important; /* 与控制面板一致的毛玻璃效果 */
    backdrop-filter: blur(40px) saturate(280%) !important; /* 增强毛玻璃效果 */
    -webkit-backdrop-filter: blur(40px) saturate(280%) !important;
    border-radius: 14px !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 
        0 8px 40px rgba(0,0,0,0.15),
        0 0 0 1px rgba(255,255,255,0.2),
        inset 0 1px 0 rgba(255,255,255,0.4) !important; /* 苹果风格多层阴影 */
    overflow: visible !important; /* 允许内容显示 */
    transition: all 0.3s ease !important;
    padding: 0 !important; /* 重置subgroup的padding */
    margin: 0 !important; /* 重置subgroup的margin */
    display: block !important; /* 确保容器显示 */
    min-height: auto !important; /* 确保有最小高度 */
}

/* 分组容器样式被折叠区域覆盖 */
.subgroup:not(.collapsible) {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    padding: 12px;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.35),
        0 0 0 1px rgba(255,255,255,0.12);
    margin: 0 0; /* 默认与父容器有自然内边距 */
}

.collapsible .section-header {
    display: flex !important; /* 确保标题区域始终显示 */
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important; /* 苹果风格内边距 */
    margin: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    opacity: 1 !important; /* 确保始终可见 */
    visibility: visible !important; /* 确保始终可见 */
    position: relative !important;
    z-index: 10 !important; /* 确保在最上层 */
    height: auto !important;
    min-height: 44px !important; /* 确保足够的点击区域 */
}

.collapsible .section-header:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* 展开状态的区域背景区分 */
.collapsible.expanded {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(52, 199, 89, 0.2); /* 淡绿色边框提示展开状态 */
    box-shadow: 
        0 2px 12px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(52, 199, 89, 0.1); /* 微妙的绿色光晕 */
}

.collapsible.expanded .section-header {
    background: rgba(52, 199, 89, 0.05); /* 展开时header有淡绿色背景 */
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}

/* 内容区域样式 - 修复显示逻辑 */
.collapsible .section-content { 
    max-height: 0; /* 默认收起，不显示详细内容 */
    overflow: hidden; /* 只隐藏内容区域 */
    opacity: 0;
    padding: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
    display: block; /* 确保内容区域结构存在 */
}

.collapsible.expanded .section-content { 
    max-height: 2000px; /* 展开时显示详细内容 */
    opacity: 1;
    padding: 8px 16px 16px 16px;
}
.section-toggle-btn {
    height: 32px; /* 增大高度 */
    padding: 0 16px; /* 增大内边距 */
    font-size: 13px; /* 稍微增大字体 */
    position: relative;
    z-index: 5; /* 确保在任何覆盖元素之上可点击 */
    min-width: 60px; /* 设置最小宽度 */
    border-radius: 8px !important; /* 强制圆角 */
    cursor: pointer;
    transition: all 0.2s ease; /* 添加过渡动画 */
    user-select: none; /* 防止文字选中 */
}

/* 添加更明显的hover效果 */
.section-toggle-btn:hover {
    background: #d8d8dd !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* 添加点击效果 */
.section-toggle-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    background: #c8c8cd !important;
}

/* 防止有透明层覆盖导致按钮点不开 */
.section-header { 
    position: relative; 
    z-index: 4; 
    cursor: pointer; /* 整个header可点击 */
    padding: 4px 0; /* 增加垂直点击区域 */
    border-radius: 8px; /* 添加圆角 */
    transition: background-color 0.2s ease; /* 添加过渡效果 */
}

/* header的hover效果 */
.section-header:hover {
    background-color: rgba(0,0,0,0.03);
}

.collapsible .section-content { position: relative; z-index: 1; }

/* 若有地图面板或十字参考线层覆盖到面板，禁用其指针事件 */
#centerCrosshair { pointer-events: none; }

/* iOS风格开关按钮样式 */
.ios-toggle-switch {
    display: inline-block;
    position: relative;
    z-index: 100 !important; /* 大幅提高层级，解决点击问题 */
}

.ios-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    z-index: 101 !important;
    pointer-events: auto !important; /* 确保可点击 */
}

.ios-toggle-label {
    display: inline-block;
    width: 42px; /* 更紧凑的宽度 */
    height: 24px; /* 更紧凑的高度 */
    background-color: #d1d1d6; /* 苹果系统的灰色 */
    border-radius: 24px;
    position: relative;
    cursor: pointer !important;
    transition: background-color 0.25s ease;
    z-index: 102 !important;
    pointer-events: all !important; /* 强制确保可点击 */
}

.ios-toggle-label:hover {
    background-color: #b8b8bd;
}

.ios-toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px; /* 更小的滑块 */
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 0 0 0.5px rgba(0,0,0,0.05);
}

.ios-toggle-input:checked + .ios-toggle-label {
    background-color: #34c759; /* iOS绿色 */
}

.ios-toggle-input:checked + .ios-toggle-label:hover {
    background-color: #30b355;
}

.ios-toggle-input:checked + .ios-toggle-label .ios-toggle-slider {
    transform: translateX(18px); /* 调整为新尺寸 */
    box-shadow: 0 1px 4px rgba(0,0,0,0.2), 0 0 0 0.5px rgba(0,0,0,0.05);
}

.ios-toggle-input:focus + .ios-toggle-label {
    box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.3);
}

/* 禁用状态 */
.ios-toggle-input:disabled + .ios-toggle-label {
    opacity: 0.5;
    cursor: not-allowed;
}

.ios-toggle-input:disabled + .ios-toggle-label:hover {
    background-color: #ccc;
}

/* 🌍 智能坐标系输入界面样式 */
.coordinate-input-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coordinate-input-item {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 0;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden; /* 这个很重要，确保子元素不会超出圆角 */
    min-height: 48px;
}

.coordinate-input-item:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.coordinate-input-item.active {
    border-color: rgba(0, 122, 255, 0.3);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

.coordinate-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 85px;
    padding: 8px 12px 8px 12px; /* 减少左边距，让指示条更好覆盖 */
    background: rgba(248, 249, 250, 0.9);
    border-right: 2px solid rgba(0, 0, 0, 0.06);
    border-radius: 0 !important; /* 强制无圆角 */
    position: relative;
    z-index: 2;
    margin-left: 6px; /* 为指示条留空间 */
}

.coord-name {
    font-weight: 600;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.2;
}

.coord-desc {
    font-size: 10px;
    color: rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    margin-top: 2px;
}

.coordinate-input {
    flex: 1;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    color: rgba(0, 0, 0, 0.8);
    outline: none;
    padding: 8px 16px;
    margin: 0;
    border-radius: 0 8px 8px 0; /* 右边圆角，匹配容器 */
}

.coordinate-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
}

.coordinate-input:focus {
    color: rgba(0, 0, 0, 0.9);
}

/* 实时坐标显示区域 */
.realtime-coords-container {
    background: rgba(248, 249, 250, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 10px;
    margin-top: 4px;
}

.coord-display-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
    min-height: 18px;
}

.coord-display-row:last-child {
    margin-bottom: 0;
}

.coord-system {
    font-weight: 500;
    min-width: 50px;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.7);
    text-align: right; /* 右对齐，冒号对齐 */
}

.coord-value {
    flex: 1;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.9);
    margin: 0 8px;
    text-align: left;
    line-height: 1.3;
    font-weight: 500;
}

.copy-coord-btn {
    background: rgba(0, 122, 255, 0.1);
    border: none;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 10px;
    cursor: pointer;
    color: rgba(0, 122, 255, 0.8);
    transition: all 0.2s ease;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
}

.copy-coord-btn:hover {
    background: rgba(0, 122, 255, 0.2);
    color: rgba(0, 122, 255, 1);
    transform: scale(1.05);
}

.copy-coord-btn:active {
    transform: scale(0.95);
}

/* 坐标转换结果弹窗 */
.coord-conversion-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.coord-conversion-modal.show {
    display: flex;
}

.coord-conversion-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 24px;
    width: 90%;
    max-width: 500px;
    max-height: 80%;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.coord-conversion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.coord-conversion-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    margin: 0;
}

.coord-close-btn {
    background: rgba(255, 59, 48, 0.1);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 59, 48, 0.8);
    font-size: 18px;
    transition: all 0.2s ease;
}

.coord-close-btn:hover {
    background: rgba(255, 59, 48, 0.2);
    color: rgba(255, 59, 48, 1);
}

.coord-result-section {
    margin-bottom: 20px;
}

.coord-result-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 8px;
}

.coord-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(248, 249, 250, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
}

.coord-result-label {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
    min-width: 80px;
}

.coord-result-value {
    flex: 1;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.9);
    margin: 0 12px;
}

.coord-result-copy {
    background: rgba(0, 122, 255, 0.1);
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    color: rgba(0, 122, 255, 0.8);
    transition: all 0.2s ease;
}

.coord-result-copy:hover {
    background: rgba(0, 122, 255, 0.2);
    color: rgba(0, 122, 255, 1);
}

/* 输入框状态指示 */
.coordinate-input-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px; /* 增加宽度，更明显 */
    border-radius: 8px 0 0 8px !important; /* 强制左边圆角 */
    transition: all 0.2s ease;
    z-index: 3; /* 确保在最上层 */
}

.coordinate-input-item[data-coord-type="WGS84"]::before {
    background: rgba(52, 199, 89, 0.9); /* 使用纯色，更好覆盖 */
}

.coordinate-input-item[data-coord-type="GCJ02"]::before {
    background: rgba(255, 149, 0, 0.9); /* 使用纯色，更好覆盖 */
}

.coordinate-input-item[data-coord-type="BD09"]::before {
    background: rgba(255, 59, 48, 0.9); /* 使用纯色，更好覆盖 */
}

.coordinate-input-item.active::before {
    width: 6px; /* 保持与非激活状态相同的宽度 */
    z-index: 4; /* 提高层级，确保覆盖 */
}

.coordinate-input-item.active[data-coord-type="WGS84"]::before {
    background: rgba(52, 199, 89, 1); /* 使用纯色，完全不透明 */
}

.coordinate-input-item.active[data-coord-type="GCJ02"]::before {
    background: rgba(255, 149, 0, 1); /* 使用纯色，完全不透明 */
}

.coordinate-input-item.active[data-coord-type="BD09"]::before {
    background: rgba(255, 59, 48, 1); /* 使用纯色，完全不透明 */
}

/* ===== 增强的路径规划样式 ===== */

.route-profile-section {
    margin-bottom: 16px;
}

.route-profile-section-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.control-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 8px;
}

.control-label-inline {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.route-profile-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 32px;
}

.route-profile-select-inline {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 32px;
}

.route-profile-select:focus,
.route-profile-select-inline:focus {
    outline: none;
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}

.add-points-help {
    background: rgba(0, 113, 227, 0.05);
    border: 1px solid rgba(0, 113, 227, 0.1);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.add-points-help-inline {
    background: rgba(0, 113, 227, 0.05);
    border: 1px solid rgba(0, 113, 227, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    text-align: center;
}

.help-text-small {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.7);
}

.help-item {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.help-item:last-child {
    margin-bottom: 0;
}

.help-icon {
    font-size: 14px;
    margin-right: 8px;
    width: 20px;
    text-align: center;
}

.help-text {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
}

.waypoints-container-enhanced {
    margin-bottom: 16px;
}

.waypoint-item-enhanced {
    display: grid; /* 使用网格确保列对齐 */
    grid-template-columns: 36px 1fr auto; /* 标记区域 | 输入 | 操作/占位 */
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 8px 12px; /* 减小上下内边距，保持左右内边距 */
    margin-bottom: 8px;
    transition: all 0.3s ease;
    position: relative;
    gap: 0; /* 移除网格间距，手动控制 */
}

.waypoint-item-enhanced:hover {
    border-color: rgba(0, 113, 227, 0.3);
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.1);
}

.waypoint-marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: white;
    margin-right: 0; /* 交由grid gap控制 */
    flex-shrink: 0;
}

.origin-marker {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.destination-marker {
    background: linear-gradient(135deg, #dc3545, #fd7e14);
}

.waypoint-marker.intermediate {
    background: linear-gradient(135deg, #6c757d, #adb5bd);
}

.waypoint-content {
    margin-left: 8px; /* 统一的左边距，确保坐标对齐 */
}

/* 起点和终点的输入框容器特殊处理 - 仅设置最小宽度，不改变grid对齐 */
.waypoint-item-enhanced[data-type="origin"] .waypoint-content,
.waypoint-item-enhanced[data-type="destination"] .waypoint-content {
    min-width: 200px; /* 给起点和终点更大的最小宽度 */
}

.waypoint-input-enhanced {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 14px; /* 保持用户选择的字体大小 */
    color: rgba(0, 0, 0, 0.85);
    padding: 0;
    margin-bottom: 4px;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace, system-ui; /* 使用等宽字体帮助显示坐标 */
}

.waypoint-input-enhanced:focus {
    outline: none;
}

.waypoint-input-enhanced::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.waypoint-coordinates {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
}

.waypoint-actions {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}

.waypoint-action-btn {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px; /* 调大一点以适应表情符号 */
    padding: 0;
    margin: 0;
    line-height: 1;
}

.waypoint-action-btn:hover {
    background: rgba(0, 113, 227, 0.1);
    color: #0071e3;
}

.waypoint-actions-compact {
    display: flex;
    margin-left: 8px; /* 与输入框的左边距保持一致 */
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 2px;
    height: 24px;
}

.waypoint-actions-placeholder {
    width: 66px; /* 保持与操作按钮组相同宽度 */
    margin-left: 8px; /* 与操作按钮组的左边距保持一致 */
    flex-shrink: 0;
    opacity: 0; /* 完全透明但保持占位 */
}

.add-waypoint-section {
    margin-bottom: 16px;
    text-align: center;
}

.add-waypoint-btn-enhanced {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 113, 227, 0.08);
    border: 1px dashed rgba(0, 113, 227, 0.3);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: rgba(0, 113, 227, 0.8);
    font-size: 14px;
    margin-bottom: 8px;
}

.add-waypoint-btn-enhanced:hover {
    background: rgba(0, 113, 227, 0.12);
    border-color: rgba(0, 113, 227, 0.5);
    color: #0071e3;
}

.add-icon {
    font-size: 16px;
    margin-right: 6px;
}

.add-text {
    font-weight: 500;
}

.waypoint-count {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}

.route-options {
    background: rgba(248, 249, 250, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.option-row {
    margin-bottom: 8px;
}

.option-row:last-child {
    margin-bottom: 0;
}

.option-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding-left: 28px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.8);
}

.option-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    width: 18px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    transition: all 0.2s ease;
}

.option-checkbox:checked ~ .checkmark {
    background: #0071e3;
    border-color: #0071e3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.option-checkbox:checked ~ .checkmark:after {
    display: block;
}

.route-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.route-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon {
    font-size: 16px;
}

.route-results {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.route-summary {
    margin-bottom: 16px;
}

.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.summary-title {
    font-size: 16px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    margin: 0;
}

.feedback-btn {
    background: rgba(255, 149, 0, 0.1);
    border: none;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

.feedback-btn:hover {
    background: rgba(255, 149, 0, 0.2);
}

.summary-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(248, 249, 250, 0.8);
    border-radius: 8px;
    padding: 12px 16px;
    gap: 16px;
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 4px;
}

.stat-value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
}

.route-directions {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 16px;
}

.directions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.directions-header h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
}

.directions-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.copy-directions-btn {
    background: rgba(0, 113, 227, 0.1);
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    color: #0071e3;
}

.copy-directions-btn:hover {
    background: rgba(0, 113, 227, 0.2);
}

.directions-toggle {
    background: none;
    border: none;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.directions-toggle.collapsed {
    transform: rotate(-90deg);
}

.directions-list {
    max-height: 200px;
    overflow-y: auto;
}

.direction-item {
    display: flex;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.direction-item:last-child {
    border-bottom: none;
}

.direction-icon {
    width: 24px;
    height: 24px;
    background: rgba(0, 113, 227, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 12px;
    color: #0071e3;
    flex-shrink: 0;
}

.direction-content {
    flex: 1;
}

.direction-instruction {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 2px;
}

.direction-distance {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
}

.route-style-section {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 16px;
}

.style-section-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
    margin: 0 0 12px 0;
}

.style-controls-enhanced {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.style-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.style-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
}

.range-control {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.style-range {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.1);
    outline: none;
    appearance: none;
}

.style-range::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0071e3;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.style-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0071e3;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.range-value {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.7);
    min-width: 40px;
}

.color-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-control-simple {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

.style-color {
    width: 40px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: none;
    padding: 0;
}

.color-presets {
    display: flex;
    gap: 6px;
}

.color-preset {
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-preset:hover {
    border-color: rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

.color-preset.active {
    border-color: #0071e3;
    box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.2);
}

/* 途经点中间节点的样式 */
.waypoint-item-enhanced[data-type="waypoint"] .waypoint-marker {
    background: linear-gradient(135deg, #6c757d, #adb5bd);
}

/* 拖拽排序相关样式 */
.waypoint-item-enhanced.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.waypoint-item-enhanced.drag-over {
    border-color: #0071e3;
    background: rgba(0, 113, 227, 0.05);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .summary-stats {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    .route-actions {
        flex-direction: column;
    }
    
    .style-control {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .range-control,
    .color-control-simple {
        justify-content: center;
    }
}

/* 反馈模态框样式 */
.route-feedback-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.route-feedback-modal.show {
    display: flex;
}

.feedback-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.feedback-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    margin: 0;
}

.feedback-close {
    background: none;
    border: none;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.feedback-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.8);
}

.feedback-category {
    margin-bottom: 16px;
}

.feedback-category label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 8px;
    display: block;
}

.feedback-category select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: white;
    font-size: 14px;
}

.feedback-comment {
    margin-bottom: 20px;
}

.feedback-comment label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 8px;
    display: block;
}

.feedback-comment textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    resize: vertical;
    font-size: 14px;
    font-family: inherit;
}

.feedback-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.feedback-submit,
.feedback-cancel {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-submit {
    background: #0071e3;
    color: white;
    border: none;
}

.feedback-submit:hover {
    background: #005bb5;
}

.feedback-cancel {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.feedback-cancel:hover {
    background: rgba(0, 0, 0, 0.1);
}
}