/* 导入在线字体（已禁用，使用font-loader.js加载）*/
        /* @import url("https://fontsapi.zeoseven.com/292/main/result.css"); */
        
        * {
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        body, html, div, span, p, h1, h2, h3, h4, h5, h6, button, input, select, textarea {
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
            font-weight: normal;
        }

        
        :root {
            --primary-color: #0099ff;
            --secondary-color: #00b3ff;
            --accent-color: #00d2ff;
            --bg-dark: #121212;
            --bg-medium: #1e1e1e;
            --bg-light: #2b2b2b;
            --text-primary: #ffffff;
            --text-secondary: #b0b0b0;
            --border-radius: 8px;
            --box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            --player-hp-offset: 10px; /* 新增血量偏移量变量 */
            --player-name-spacing: 15px; /* 名称与其他元素的间距 */
            --global-font: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif; /* 全局字体变量 */
        }

        body {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            background-color: var(--bg-dark);
            color: var(--text-primary);
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
            padding: 2px;
            padding-top: 20px;
            position: relative;
            background-image: linear-gradient(to bottom, #121212, #161616);
            overflow-x: hidden;
        }

        #main-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        #input-container {
            position: fixed;
            z-index: 1000;
            top: 20px;
            right: 20px;
            width: 100%;
            max-width: 300px;
            padding: 15px;
            background-color: rgba(18, 18, 24, 0.85); /* 增加不透明度 */
            border-radius: 12px;
            box-sizing: border-box;
            flex-shrink: 0;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 6px 10px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(66, 153, 225, 0.3);
            max-height: 85vh;
            overflow-y: auto;
        }

        #input-container.container-collapsed {
            max-width: 60px;
            padding: 10px;
            overflow: hidden;
            background-color: rgba(18, 18, 24, 0.75);
        }

        #input-container.container-expanded {
            max-width: 300px;
            overflow-y: auto;
        }

        #button-container {
            width: 100%;
            text-align: right;
            margin-bottom: 5px;
        }

        .gradient-button {
            width: 100%;
            font-size: 15px;
            color: white;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            padding: 14px;
            margin: 8px 0 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            box-shadow: 0 4px 15px rgba(66, 153, 225, 0.3);
            transition: all 0.3s ease;
            background: linear-gradient(45deg, #4299e1, #63b3ed);
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        /* 菜单按钮特殊样式 */
        #toggleButton {
            width: 40px;
            height: 40px;
            padding: 0;
            margin: 0;
            font-size: 24px;
            line-height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #3182ce, #63b3ed);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }
        
        #toggleButton.button-collapsed {
            transform: rotate(0deg);
            font-size: 24px;
            font-weight: bold;
            background: linear-gradient(135deg, #4299e1, #3182ce);
        }

        .gradient-button:hover {
            background: linear-gradient(45deg, #63b3ed, #90cdf4);
            box-shadow: 0 6px 20px rgba(66, 153, 225, 0.5);
            transform: translateY(-2px);
        }

        .gradient-button:active {
            transform: translateY(1px);
        }

        .option-box {
            display: flex;
            align-items: center;
            margin: 10px 0;
            justify-content: space-between;
            border: 1px solid rgba(66, 153, 225, 0.2);
            padding: 8px 10px;
            border-radius: 8px;
            width: 100%;
            transition: all 0.3s ease;
            background-color: rgba(26, 32, 44, 0.4);
            box-sizing: border-box;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        .option-box-checkbox {
            margin-bottom: 8px;
            width: 100%;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        /* 两列显示的复选框容器 */
        .checkbox-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            width: 100%;
        }
        
        .checkbox-grid .option-box-checkbox {
            width: 100%;
            margin-bottom: 0;
        }
        
        .custom-checkbox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 10px;
            background-color: rgba(26, 32, 44, 0.4);
            border: 1px solid rgba(66, 153, 225, 0.2);
            border-radius: 8px;
            cursor: pointer;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        .checkbox-text {
            font-size: 12px;
            color: #e2e8f0;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        /* 在网格布局中的复选框文本稍微小一点以避免换行 */
        .checkbox-grid .checkbox-text {
            font-size: 11px;
        }
        
        /* 在网格布局中的复选框指示器稍微小一点 */
        .checkbox-grid .checkbox-indicator {
            width: 18px;
            height: 18px;
        }
        
        .checkbox-grid .custom-checkbox {
            padding: 6px 8px;
        }
        
        .checkbox-indicator {
            width: 20px;
            height: 20px;
            background-color: rgba(26, 32, 44, 0.7);
            border: 1px solid rgba(66, 153, 225, 0.3);
            border-radius: 4px;
            position: relative;
        }
        
        .option-box-checkbox input[type="checkbox"] {
            position: absolute;
            opacity: 0;
        }
        
        .checkbox-indicator::after {
            content: '';
            position: absolute;
            display: none;
            left: 6px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        
        .option-box-checkbox input[type="checkbox"]:checked + .custom-checkbox .checkbox-indicator {
            background-color: #4299e1;
        }
        
        .option-box-checkbox input[type="checkbox"]:checked + .custom-checkbox .checkbox-indicator::after {
            display: block;
        }
        
        .option-box:hover, .option-box-checkbox:hover {
            border-color: rgba(66, 153, 225, 0.4);
            background-color: rgba(44, 82, 130, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        label {
            font-size: 14px;
            font-weight: 500;
            margin-right: 8px;
            min-width: 60px;
            width: auto;
            text-align: left;
            color: #e2e8f0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }

        input[type="checkbox"],
        select {
            width: 140px;
            font-size: 13px;
            background-color: rgba(26, 32, 44, 0.7);
            color: #e2e8f0;
            border-radius: 8px;
            padding: 8px 10px;
            box-sizing: border-box;
            border: 1px solid rgba(66, 153, 225, 0.2);
            transition: all 0.3s ease;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        select {
            background-image: url("data:image/svg+xml;utf8,<svg fill='%234299e1' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
            background-repeat: no-repeat;
            background-position: right 5px center;
            padding-right: 25px;
        }
        
        select:hover, select:focus {
            border-color: #4299e1;
            box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.2);
            outline: none;
            background-color: rgba(44, 82, 130, 0.3);
        }

        input[type="checkbox"] {
            width: 22px;
            height: 22px;
            margin-right: 5px;
            accent-color: var(--primary-color);
            cursor: pointer;
        }

        .inline-section {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-top: 8px;
            align-items: center;
        }

        .color-section {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 4px;
            margin: 5px 0;
            padding: 6px 4px;
            background-color: rgba(26, 32, 44, 0.4);
            border-radius: 8px;
            border: 1px solid rgba(66, 153, 225, 0.15);
            transition: all 0.3s ease;
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
        }

        .color-section:hover {
            background-color: rgba(44, 82, 130, 0.3);
            border-color: rgba(66, 153, 225, 0.3);
        }

        .color-label {
            font-size: 12px;
            margin-bottom: 6px;
            color: #a0aec0;
            font-weight: 500;
            text-align: center;
            transition: all 0.3s ease;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }

        .color-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 3px;
            position: relative;
            padding: 3px;
            transition: all 0.3s ease;
            width: 100%;
            box-sizing: border-box;
        }
        
        .color-item::after {
            content: '';
            position: absolute;
            top: 24px;
            left: 50%;
            transform: translateX(-50%);
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: transparent;
            z-index: 0;
            box-shadow: 0 0 0 0 rgba(66, 153, 225, 0);
            transition: all 0.3s ease;
        }
        
        .color-item:hover::after {
            box-shadow: 0 0 10px 2px rgba(66, 153, 225, 0.3);
        }
     
        input[type="color"]:hover {
            transform: scale(1.15);
            border-color: rgba(66, 153, 225, 0.6);
            box-shadow: 0 0 12px rgba(66, 153, 225, 0.4);
        }
        
        input[type="color"]:active {
            transform: scale(1.05);
        }

        #canvas-container {
            position: relative;
            width: 4096px;
            height: 4096px;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.3);
        }

        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            /* 硬件加速，减少闪烁 */
            transform: translateZ(0);
            will-change: contents;
            backface-visibility: hidden;
        }
        
        /* 地图背景层 */
        .map-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 4096px;
            height: 4096px;
            background-size: 4096px 4096px; /* 修复：强制背景图为4096x4096，与坐标系统匹配 */
            background-position: 0 0; /* 修复：从左上角(0,0)开始，与transform-origin一致 */
            background-repeat: no-repeat;
            z-index: 0;
            opacity: 0.9; /* 恢复原有的透明度 */
            pointer-events: none; /* 确保点击事件可以穿透到下层 */
            transform-origin: top left; /* 确保从左上角开始缩放 */
            display: block !important; /* 强制显示 */
            visibility: visible !important; /* 确保可见性 */
        }

        /* 最外层容器固定定位 */
        .canvas-outer-container {
            width: 4096px;
            height: 4096px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 5;
            pointer-events: none;
        }
        /* 中间缩放层 */
        .canvas-zoom-container {
            width: 100%;
            height: 100%;
            transform-origin: center center;
            position: relative;
            pointer-events: all;
            user-select: none; /* 防止拖拽时选择文本 */
            cursor: grab; /* 添加抓取光标 */
        }
        
        /* TV容器样式 */
        #tv-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            background-color: black;
            border: 3px solid rgba(0, 153, 255, 0.5);
            border-radius: var(--border-radius);
            box-shadow: 0 0 20px rgba(0, 153, 255, 0.3);
            transition: var(--transition);
        }
        
        #tv-container:hover {
            box-shadow: 0 0 30px rgba(0, 153, 255, 0.5);
        }

        /* 菜单内的缩放控制样式 */
        .menu-zoom-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }
        
        .menu-zoom-button {
            width: 30px;
            height: 30px;
            border-radius: 6px;
            border: 1px solid rgba(66, 153, 225, 0.3);
            background-color: rgba(26, 32, 44, 0.6);
            color: #e2e8f0;
            font-size: 18px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        .menu-zoom-value {
            min-width: 60px;
            text-align: center;
            color: #e2e8f0;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }

        #resetView {
            font-size: 14px;
        }

        /* 显示子页面样式 */
        .display-sub-tabs {
            display: flex;
            margin-bottom: 15px;
            border-bottom: 1px solid rgba(66, 153, 225, 0.3);
        }
        
        .display-sub-tab {
            padding: 8px 16px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            color: #a0aec0;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 500;
        }
        
        .display-sub-tab:hover {
            color: #63b3ed;
            background-color: rgba(66, 153, 225, 0.1);
        }
        
        .display-sub-tab.active {
            color: #63b3ed;
            border-bottom-color: #63b3ed;
            background-color: rgba(66, 153, 225, 0.15);
        }
        
        .display-sub-content {
            display: none;
        }
        
        .display-sub-content.active {
            display: block;
        }
        
        /* 价值范围设置样式 */
        .value-range-group {
            background: rgba(66, 153, 225, 0.05);
            border: 1px solid rgba(66, 153, 225, 0.2);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
        }
        
        /* 价值分类显示控制样式 */
        .value-category-controls {
            margin-bottom: 20px;
        }
        
        .value-category-controls .option-box-checkbox {
            margin-bottom: 12px;
        }
        
        .value-category-controls .checkbox-text {
            font-weight: 600;
        }
        
        .value-range-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .value-range-title {
            font-weight: 600;
            color: #2d3748;
            font-size: 16px;
            transition: all 0.3s ease;
            padding: 4px 8px;
            border-radius: 4px;
            position: relative;
        }
        
        .value-range-title:hover {
            background-color: rgba(66, 153, 225, 0.1);
            transform: translateY(-1px);
        }
        
        .value-range-title:active {
            transform: translateY(0);
        }
        
        /* 颜色选择器样式 */
        input[type="color"] {
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        
        input[type="color"]:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        
        /* 颜色选择器面板样式 */
        .color-panel {
            position: absolute !important;
            top: 100% !important;
            left: 0 !important;
            margin-top: 5px !important;
            z-index: 1000 !important;
            background: rgba(30, 30, 30, 0.95) !important;
            border-radius: 12px !important;
            padding: 20px !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            backdrop-filter: blur(10px) !important;
            max-width: 200px !important;
            width: 200px !important;
            box-sizing: border-box !important;
            overflow: visible !important;
        }
        
        /* 确保父容器不会裁剪面板 */
        .value-range-label > div[style*="position: relative"] {
            overflow: visible !important;
        }
        
        /* 确保整个设置区域不会裁剪面板 */
        .tab-section {
            overflow: visible !important;
        }
        
        /* 确保子页面内容不会裁剪面板 */
        .display-sub-content {
            overflow: visible !important;
        }
        
        /* 确保所有可能的父容器都不会裁剪 */
        .tab-content, .display-tab, .settings-container, .menu-content {
            overflow: visible !important;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        /* 强制颜色面板始终可见 */
        .color-panel[style*="display: block"] {
            visibility: visible !important;
            opacity: 1 !important;
            clip: auto !important;
            clip-path: none !important;
        }
        
        /* 确保颜色面板在z-index层级中最高 */
        .color-panel {
            z-index: 9999 !important;
        }
        
        /* 确保UI容器不会裁剪颜色面板 */
        .menu-content, .tab-content, .display-sub-content {
            overflow: visible !important;
        }
        
        /* 但保持滚动条功能 */
        body, html {
            overflow: auto !important;
        }
        
        /* 确保颜色面板完全可见 */
        .color-panel {
            position: absolute !important;
            transform: none !important;
            will-change: auto !important;
        }
        
        /* 颜色网格样式 */
        .color-grid {
            display: grid !important;
            grid-template-columns: repeat(5, 1fr) !important;
            gap: 6px !important;
            margin-bottom: 15px !important;
        }
        
        .color-swatch {
            width: 20px !important;
            height: 20px !important;
            border-radius: 6px !important;
            cursor: pointer !important;
            border: 2px solid #ddd !important;
            transition: all 0.2s !important;
        }
        
        .color-swatch:hover {
            transform: scale(1.2) !important;
            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3) !important;
            border-color: #fff !important;
        }
        
        .value-range-display {
            background: rgba(66, 153, 225, 0.1);
            padding: 4px 12px;
            border-radius: 6px;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
            font-weight: 600;
            color: #2b6cb0;
            font-size: 14px;
        }
        
        .value-range-sliders {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .slider-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .slider-container label {
            min-width: 60px;
            font-size: 14px;
            color: #4a5568;
        }
        
        .slider-container input[type="range"] {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            background: #e2e8f0;
            outline: none;
            -webkit-appearance: none;
        }
        
        .slider-container input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #4299e1;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: all 0.2s ease;
        }
        
        .slider-container input[type="range"]::-webkit-slider-thumb:hover {
            background: #3182ce;
            transform: scale(1.1);
        }
        
        .slider-container input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #4299e1;
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .slider-value {
            min-width: 80px;
            text-align: right;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
            font-weight: 600;
            color: #2b6cb0;
            font-size: 14px;
            background: rgba(66, 153, 225, 0.1);
            padding: 4px 8px;
            border-radius: 4px;
        }
        
        /* 添加菜单图标 */
        .section-title::before {
            margin-right: 10px;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
            font-size: 14px;
            opacity: 0.9;
        }

        .section-title[onclick*="radarControl"]::before {
            content: "📡";
        }

        .section-title[onclick*="displayOptions"]::before {
            content: "👁️";
        }

        .section-title[onclick*="colorSettings"]::before {
            content: "🎨";
        }

        /* 按钮宽度缩小状态样式 */
        .button-collapsed {
            padding: 12px 10px !important;
            width: auto !important; 
            min-width: 44px !important;
            margin: 4px auto 12px !important;
            border-radius: 8px;
        }

        /* 容器在菜单隐藏时的样式 */
        .container-collapsed {
            padding: 15px 10px !important;
            max-width: 65px !important;
            background-color: rgba(18, 18, 24, 0.85);
        }

        /* 添加标题样式 */
        .section-title {
            font-size: 16px;
            color: #63b3ed;
            margin-top: 12px;
            margin-bottom: 8px;
            padding-bottom: 0;
            border: none;
            text-align: left;
            font-weight: 600;
            letter-spacing: 0.5px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            border-radius: 8px;
            background-color: rgba(26, 32, 44, 0.7);
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .section-title:hover {
            background-color: rgba(44, 82, 130, 0.4);
            transform: translateY(-1px);
        }
        
        .section-title::after {
            content: "▼";
            font-size: 10px;
            color: #63b3ed;
            transition: transform 0.3s ease;
        }
        
        .section-title.collapsed::after {
            transform: rotate(-90deg);
        }
        
        .section-content {
            max-height: 1000px;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            padding: 0 5px;
            margin-bottom: 10px;
        }
        
        .section-content.collapsed {
            max-height: 0;
        }

        /* ==================== 地图操作按钮样式 ==================== */
        .map-controls-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
            padding: 2px 0;
        }
        
        .map-control-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 4px;
            background: linear-gradient(135deg, rgba(66, 153, 225, 0.2), rgba(66, 153, 225, 0.1));
            border: 1px solid rgba(66, 153, 225, 0.3);
            border-radius: 8px;
            color: #e0e0e0;
            cursor: pointer;
            transition: all 0.2s ease;
            min-height: 45px;
        }
        
        .map-control-btn:hover {
            background: linear-gradient(135deg, rgba(66, 153, 225, 0.4), rgba(66, 153, 225, 0.2));
            border-color: rgba(66, 153, 225, 0.6);
            transform: translateY(-1px);
        }
        
        .map-control-btn:active {
            transform: translateY(0);
            background: linear-gradient(135deg, rgba(66, 153, 225, 0.5), rgba(66, 153, 225, 0.3));
        }
        
        .map-control-btn .btn-icon {
            font-size: 18px;
            margin-bottom: 2px;
        }
        
        .map-control-btn .btn-label {
            font-size: 10px;
            opacity: 0.8;
        }

        /* ==================== 到期时间显示样式 ==================== */
        .expire-info-box {
            display: none;
            margin-top: 8px;
            padding: 10px;
            border-radius: 8px;
            background: rgba(30, 30, 40, 0.6);
            border-left: 3px solid #4a9eff;
            transition: all 0.3s ease;
        }
        
        .expire-info-box.show {
            display: block;
        }
        
        .expire-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .expire-title {
            font-size: 13px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .expire-badge {
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
        }
        
        .expire-date {
            font-size: 10px;
            color: #a0aec0;
            margin-bottom: 4px;
        }
        
        .expire-remaining {
            font-size: 13px;
            font-weight: bold;
        }

        /* 移动设备响应式适配 */
        @media (max-width: 768px) {
            #input-container {
                max-width: 250px;
                top: 10px;
                right: 10px;
            }
            
            #tv-container {
                border: 2px solid rgba(0, 153, 255, 0.5);
            }
            
            .gradient-button {
                padding: 10px;
                font-size: 14px;
            }
            
            .message-history {
                width: 280px;
                max-height: 350px;
                bottom: 10px;
                left: 10px;
            }
            
            #mouse-coords {
                bottom: 5px;
                left: 5px;
                font-size: 12px;
            }
        }
        
        /* 美化滚动条样式 */
        ::-webkit-scrollbar {
            width: 12px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(66, 153, 225, 0.1);
            border-radius: 6px;
            margin: 4px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
            border-radius: 6px;
            border: 2px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%);
            transform: scaleX(1.1);
            box-shadow: 0 2px 8px rgba(66, 153, 225, 0.4);
        }
        
        ::-webkit-scrollbar-thumb:active {
            background: linear-gradient(135deg, #2c5aa0 0%, #1a365d 100%);
        }
        
        ::-webkit-scrollbar-corner {
            background: transparent;
        }
        
        * {
            scrollbar-width: thin;
            scrollbar-color: #4299e1 rgba(66, 153, 225, 0.1);
        }
        
        .tab-content::-webkit-scrollbar {
            width: 10px;
        }
        
        .tab-content::-webkit-scrollbar-track {
            background: rgba(66, 153, 225, 0.05);
            border-radius: 5px;
            margin: 2px;
        }
        
        .tab-content::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #4299e1 0%, #3182ce 100%);
            border-radius: 5px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            min-height: 40px;
        }
        
        .tab-content::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #3182ce 0%, #2c5aa0 100%);
            box-shadow: 0 2px 6px rgba(66, 153, 225, 0.5);
        }
        
        /* 主面板滚动条样式 */
        .control-panel::-webkit-scrollbar {
            width: 14px;
        }
        
        .control-panel::-webkit-scrollbar-track {
            background: rgba(66, 153, 225, 0.08);
            border-radius: 7px;
            margin: 3px;
            border: 1px solid rgba(66, 153, 225, 0.1);
        }
        
        .control-panel::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #4299e1 0%, #3182ce 50%, #2c5aa0 100%);
            border-radius: 7px;
            border: 2px solid rgba(255, 255, 255, 0.15);
            min-height: 50px;
            transition: all 0.3s ease;
        }
        
        .control-panel::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #3182ce 0%, #2c5aa0 50%, #1a365d 100%);
            box-shadow: 0 4px 12px rgba(66, 153, 225, 0.6);
            transform: scaleX(1.05);
        }
        
        .control-panel::-webkit-scrollbar-thumb:active {
            background: linear-gradient(180deg, #2c5aa0 0%, #1a365d 50%, #0f2027 100%);
        }
        
        /* 滚动条动画效果 */
        @keyframes scrollbarGlow {
            0%, 100% {
                box-shadow: 0 2px 6px rgba(66, 153, 225, 0.3);
            }
            50% {
                box-shadow: 0 4px 12px rgba(66, 153, 225, 0.6);
            }
        }
        
        .control-panel::-webkit-scrollbar-thumb:hover {
            animation: scrollbarGlow 2s ease-in-out infinite;
        }
        
        /* 小屏幕手机适配 */
        @media (max-width: 480px) {
            #input-container {
                max-width: 200px;
            }
            
            #input-container.container-collapsed {
                max-width: 50px;
            }
            
            .tab-button {
                padding: 8px 0;
                font-size: 12px;
                min-width: 45px;
            }
            
            .menu-zoom-button {
                width: 25px;
                height: 25px;
            }
            
            .option-box {
                padding: 6px 8px;
            }
            
            .section-title {
                font-size: 15px;
                padding: 10px 12px;
            }
            
            .color-section {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* 竖屏模式适配 */
        @media (orientation: portrait) {
            .canvas-outer-container {
                transform: translate(-50%, -50%) scale(0.9);
            }
            
            #input-container {
                top: 10px;
                right: 10px;
                max-height: 70vh;
            }
        }
        
        /* 横屏模式适配 */
        @media (orientation: landscape) and (max-height: 600px) {
            #input-container {
                top: 5px;
                right: 5px;
                max-height: 85vh;
            }
            
            .menu-header {
                margin: 2px 0 10px 0;
                font-size: 16px;
            }
            
            .tab-content {
                max-height: 60vh;
                overflow-y: auto;
            }
            
            .canvas-outer-container {
                transform: translate(-50%, -50%) scale(0.95);
            }
        }
        
        /* 触摸设备优化 */
        @media (hover: none) and (pointer: coarse) {
            .option-box,
            .custom-checkbox,
            .menu-zoom-button,
            .tab-button {
                padding-top: 10px;
                padding-bottom: 10px;
            }
            
            #toggleButton {
                width: 44px;
                height: 44px;
            }
            
            .dialog-button,
            .connect-button,
            .connect-button-full {
                min-height: 40px;
            }
        }

        /* 添加WebSocket连接相关样式 */
        .websocket-connect {
            margin: 12px 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        .connect-input-group {
            display: flex;
            width: 100%;
            height: 36px;
            gap: 4px;
        }
        
        .key-input {
            flex: 1;
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid rgba(0, 153, 255, 0.2);
            background-color: #1a1a1a;
            color: var(--text-primary);
            font-size: 14px;
            outline: none;
            height: 100%;
            box-sizing: border-box;
        }
        
        .key-input:focus {
            border-color: var(--primary-color);
        }
        
        .connect-button {
            padding: 0 12px;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition);
            min-width: 60px;
            height: 100%;
            font-size: 14px;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        .connect-button:hover {
            background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
            box-shadow: 0 4px 12px rgba(0, 153, 255, 0.4);
            transform: translateY(-2px);
        }
        
        .connection-status {
            width: 100%;
            text-align: center;
            padding: 6px 0;
            margin-top: 10px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            background-color: rgba(26, 32, 44, 0.6);
            transition: all 0.3s ease;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        .connection-status.connected {
            color: #68d391;
            background-color: rgba(56, 161, 105, 0.2);
        }
        
        .connection-status.connecting {
            color: #f6e05e;
            background-color: rgba(183, 148, 28, 0.2);
        }
        
        .connection-status.error {
            color: #fc8181;
            background-color: rgba(197, 48, 48, 0.2);
        }

        /* 鼠标坐标显示区域样式 */
        #mouse-coords {
            position: fixed;
            bottom: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            color: #ffffff;
            padding: 5px 10px;
            border-radius: 4px;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
            font-size: 14px;
            z-index: 1000;
            pointer-events: none; /* 避免干扰鼠标事件 */
            border: 1px solid var(--primary-color);
            box-shadow: 0 0 10px rgba(0, 153, 255, 0.5);
        }
        /* 添加自定义消息对话框 */
        .custom-dialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .custom-dialog.visible {
            opacity: 1;
        }
        
        .dialog-content {
            background-color: rgba(30, 41, 59, 0.95);
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            transform: scale(0.9) translateY(-20px);
            transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }
        
        .custom-dialog.visible .dialog-content {
            transform: scale(1) translateY(0);
        }
        
        .dialog-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(44, 82, 130, 0.6);
            padding: 12px 15px;
            border-bottom: 1px solid rgba(66, 153, 225, 0.3);
        }
        
        .dialog-title {
            font-weight: bold;
            font-size: 16px;
            color: #63b3ed;
        }
        
        .close-button {
            cursor: pointer;
            font-size: 20px;
            color: #a0aec0;
            transition: color 0.2s;
        }
        
        .close-button:hover {
            color: white;
        }
        
        .dialog-body {
            padding: 15px;
            color: #e2e8f0;
            font-size: 14px;
            line-height: 1.6;
            max-height: 50vh;
            overflow-y: auto;
        }
        
        .dialog-footer {
            padding: 10px 15px;
            text-align: right;
            background-color: rgba(26, 32, 44, 0.4);
            border-top: 1px solid rgba(66, 153, 225, 0.2);
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        /* 对话框按钮样式 */
        .dialog-button {
            padding: 8px 15px;
            margin: 0 5px;
            border-radius: 6px;
            border: none;
            font-size: 14px;
            cursor: pointer;
            background-color: rgba(44, 82, 130, 0.7);
            color: white;
            transition: all 0.2s ease;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        .dialog-button:hover {
            background-color: rgba(66, 153, 225, 0.8);
            transform: translateY(-1px);
        }
        
        .dialog-button:active {
            transform: translateY(1px);
        }
        
        .dialog-confirm {
            background-color: rgba(72, 187, 120, 0.7);
            font-weight: bold;
        }
        
        .dialog-confirm:hover {
            background-color: rgba(72, 187, 120, 0.9);
        }
        
        .dialog-cancel {
            background-color: rgba(160, 174, 192, 0.7);
        }
        
        .dialog-cancel:hover {
            background-color: rgba(160, 174, 192, 0.9);
        }
        
        #showHistoryBtn {
            background-color: #555;
        }
        
        #showHistoryBtn:hover {
            background-color: #666;
        }
        
        /* 消息历史记录样式 - 升级版UI */
        .message-history {
            display: none;
            position: fixed;
            bottom: 20px;
            left: 20px;
            width: 320px;
            max-height: 420px;
            background-color: rgba(0, 0, 0, 0.75);
            border: 1px solid rgba(0, 255, 0, 0.4);
            border-radius: 10px;
            padding: 12px;
            z-index: 999;
            overflow-y: auto;
            box-shadow: 0 0 15px rgba(0, 255, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.5);
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
            transition: all 0.3s ease;
            backdrop-filter: blur(3px);
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 255, 0, 0.5) rgba(0, 0, 0, 0.3);
        }
        
        .message-history::-webkit-scrollbar {
            width: 6px;
        }
        
        .message-history::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 3px;
        }
        
        .message-history::-webkit-scrollbar-thumb {
            background: rgba(0, 255, 0, 0.5);
            border-radius: 3px;
        }
        
        .message-history.visible {
            display: block;
            animation: historyFadeIn 0.3s ease;
        }
        
        @keyframes historyFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0, 255, 0, 0.3);
            padding-bottom: 10px;
            margin-bottom: 12px;
        }
        
        .history-title {
            font-weight: bold;
            color: #00FF00;
            font-size: 16px;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
            letter-spacing: 0.5px;
        }
        
        .history-close {
            color: #00FF00;
            cursor: pointer;
            font-size: 18px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s ease;
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .history-close:hover {
            background-color: rgba(255, 0, 0, 0.3);
            color: #fff;
            transform: rotate(90deg);
        }
        
        .message-item {
            margin-bottom: 12px;
            padding: 8px 10px;
            border-radius: 6px;
            background-color: rgba(0, 0, 0, 0.3);
            border-left: 3px solid rgba(0, 255, 0, 0.5);
            transition: all 0.2s ease;
        }
        
        .message-item:hover {
            background-color: rgba(0, 40, 0, 0.4);
            border-left: 3px solid rgba(0, 255, 0, 0.8);
        }
        
        .message-title {
            font-weight: bold;
            color: #00FF00;
            margin-bottom: 6px;
            font-size: 13px;
            display: flex;
            justify-content: space-between;
        }
        
        .message-content {
            color: #CCFFCC;
            font-size: 13px;
            line-height: 1.5;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
            word-break: break-word;
        }
        
        .message-time {
            font-size: 11px;
            color: rgba(0, 255, 0, 0.6);
            margin-top: 6px;
            text-align: right;
        }
        
        .clear-history {
            text-align: center;
            padding: 8px;
            margin-top: 12px;
            background-color: rgba(0, 50, 0, 0.5);
            color: #00FF00;
            border-radius: 5px;
            cursor: pointer;
            font-size: 13px;
            font-weight: bold;
            transition: all 0.2s ease;
            border: 1px solid rgba(0, 255, 0, 0.2);
        }
        
        .clear-history:hover {
            background-color: rgba(0, 80, 0, 0.7);
            box-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
        }
        
        /* 消息计数样式 */
        .message-count {
            background-color: rgba(0, 255, 0, 0.3);
            border-radius: 10px;
            padding: 2px 6px;
            font-size: 12px;
            margin-left: 5px;
        }
        
        /* 搜索框样式 */
        .history-search-container {
            margin-bottom: 10px;
        }
        
        .history-search {
            width: 100%;
            padding: 8px;
            border: 1px solid rgba(0, 255, 0, 0.3);
            border-radius: 5px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #00FF00;
            font-size: 13px;
            outline: none;
            transition: all 0.2s ease;
        }
        
        .history-search:focus {
            border-color: rgba(0, 255, 0, 0.7);
            box-shadow: 0 0 5px rgba(0, 255, 0, 0.4);
        }
        
        .history-search::placeholder {
            color: rgba(0, 255, 0, 0.5);
        }
        
        /* 突出显示搜索结果 */
        .highlight-text {
            background-color: rgba(255, 255, 0, 0.3);
            color: #FFFFFF;
            border-radius: 2px;
            padding: 0 2px;
        }

        /* 优化按钮文字 */
        #toggleButton.button-collapsed {
            font-weight: bold;
        }

        /* 添加菜单标题 */
        .menu-header {
            text-align: center;
            margin: 5px 0 15px 0;
            padding-right: 40px; /* 为右侧按钮留出空间 */
            color: #63b3ed;
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 0.5px;
            display: none; /* 初始隐藏 */
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
            text-shadow: 0 0 10px rgba(99, 179, 237, 0.4);
            position: relative;
        }
        
        /* 添加标题装饰元素 */
        .menu-header:before, .menu-header:after {
            content: '';
            position: absolute;
            height: 2px;
            width: 30px;
            background: linear-gradient(90deg, transparent, #63b3ed, transparent);
            bottom: -5px;
        }
        
        .menu-header:before {
            left: 50px;
        }
        
        .menu-header:after {
            right: 50px;
        }

        #menuContent {
            opacity: 0;
            transform: translateY(-10px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        /* 重写标签页样式，修复UI错乱 */
        .tabs-container {
            width: 100%;
            margin-top: 10px;
            box-sizing: border-box;
        }

        .tabs-header {
            display: flex;
            border-bottom: 2px solid rgba(66, 153, 225, 0.4);
            margin-bottom: 12px;
            overflow-x: auto;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* IE and Edge */
            padding: 0;
            background-color: rgba(15, 15, 20, 0.5);
            border-radius: 10px;
        }
        
        .tabs-header::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }
        
        .tab-button {
            padding: 10px 0;
            flex: 1;
            min-width: 55px;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
            text-align: center;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            color: #a0aec0;
            background-color: transparent;
            border: none;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            user-select: none;
            white-space: nowrap;
        }

        .tab-button.active {
            color: #63b3ed;
            border-bottom: 3px solid #4299e1;
            background-color: rgba(44, 82, 130, 0.3);
            font-weight: 600;
        }

        /* 简化标签内容样式，确保只显示活动标签 */
        .tab-content {
            display: none; /* 默认隐藏所有标签内容 */
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .tab-content.active {
            display: block; /* 只显示激活的标签内容 */
            opacity: 1;
        }
        
        /* 基本样式 */
        .tab-section {
            margin-bottom: 15px;
            padding: 10px;
            background-color: rgba(26, 32, 44, 0.3);
            border: 1px solid rgba(66, 153, 225, 0.15);
            border-radius: 8px;
        }
        
        .tab-section-title {
            font-size: 15px;
            color: #63b3ed;
            margin-bottom: 10px;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
            padding-bottom: 5px;
            border-bottom: 1px solid rgba(66, 153, 225, 0.25);
            font-weight: 500;
        }
        
        /* 连接部分样式 */
        .connection-section {
            background: linear-gradient(to bottom, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.5));
            border: 1px solid rgba(66, 153, 225, 0.4);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
        }
        
        .connection-form {
            display: flex;
            gap: 10px;
            margin: 10px 0;
            width: 100%;
        }
        
        /* 垂直布局的连接表单样式 */
        .connection-form-vertical {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin: 10px 0;
            width: 100%;
        }
        
        .enhanced-input {
            flex: 1;
            padding: 10px;
            border-radius: 8px;
            border: 1px solid rgba(66, 153, 225, 0.3);
            background-color: rgba(26, 32, 44, 0.6);
            color: #e2e8f0;
            font-size: 14px;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        .enhanced-button {
            padding: 10px 15px;
            border-radius: 8px;
            border: none;
            background: linear-gradient(135deg, #4299e1, #3182ce);
            color: white;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            min-width: 60px;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        /* 修复连接按钮样式，确保不超出UI边界 */
        .connect-button {
            padding: 10px;
            background: linear-gradient(135deg, #4299e1, #3182ce);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition);
            min-width: 60px;
            font-size: 14px;
            flex-shrink: 0;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        /* 全宽连接按钮样式 */
        .connect-button-full {
            padding: 10px;
            background: linear-gradient(135deg, #4299e1, #3182ce);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition);
            width: 100%;
            font-size: 14px;
            font-family: "LXGW WenKai", 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', '黑体', 'SimHei', Arial, sans-serif !important;
        }
        
        .connect-button-full:hover {
            background: linear-gradient(135deg, #63b3ed, #4299e1);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 153, 255, 0.4);
        }
        
        .connection-status-wrapper {
            background-color: rgba(26, 32, 44, 0.5);
            border-radius: 8px;
            padding: 8px;
            margin-top: 10px;
            text-align: center;
        }
        
        .connection-status {
            font-size: 14px;
            color: #a0aec0;
        }
        
        .connection-status.connected {
            color: #48bb78;
        }
        
        /* 选项样式 */
        .option-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 10px;
            background-color: rgba(26, 32, 44, 0.4);
            border: 1px solid rgba(66, 153, 225, 0.2);
            border-radius: 8px;
            margin-bottom: 8px;
        }
        
        /* 颜色选择样式 */
        .color-section {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .color-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .color-label {
            font-size: 12px;
            margin-bottom: 5px;
            color: #a0aec0;
        }
        
        input[type="color"] {
            width: 30px;
            height: 30px;
            border: 2px solid rgba(66, 153, 225, 0.3);
            border-radius: 50%;
            cursor: pointer;
            background: transparent;
        }

        #toggleButton:hover {
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
            transform: translateY(-2px);
        }

        #toggleButton:active {
            transform: translateY(1px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }

        /* 消息历史面板样式 */
        #messageHistory {
            position: fixed;
            bottom: 20px;
            left: 20px;
            width: 100%;
            max-width: 320px;
            max-height: 420px;
            background-color: rgba(0, 20, 0, 0.9);
            z-index: 1500;
            display: none; /* 默认不显示 */
            flex-direction: column;
            padding: 15px;
            box-sizing: border-box;
            border-radius: 10px;
            border: 1px solid rgba(0, 255, 0, 0.4);
            box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
            overflow-y: auto;
            backdrop-filter: blur(3px);
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        
        #messageHistory.visible {
            display: flex; /* 可见时使用flex布局 */
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 修复搜索框UI超出问题 */
        .history-search-container {
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 10px;
        }
        
        .history-search {
            width: 100%;
            box-sizing: border-box;
            padding: 8px;
            background-color: rgba(0, 30, 0, 0.8);
            border: 1px solid rgba(0, 255, 0, 0.3);
            border-radius: 5px;
            color: #00ff00;
            font-size: 14px;
            outline: none;
        }
        
        .history-search:focus {
            border-color: rgba(0, 255, 0, 0.6);
            box-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
        }
        
        /* 消息历史标题栏样式 */
        .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(0, 255, 0, 0.3);
        }
        
        .history-title {
            font-size: 16px;
            color: #00ff00;
            font-weight: bold;
        }
        
        .history-close {
            cursor: pointer;
            color: #00ff00;
            font-size: 18px;
            padding: 0 5px;
            transition: color 0.2s;
        }
        
        .history-close:hover {
            color: #ff0000;
        }
        
        /* 消息容器样式 */
        .history-messages-container {
            flex: 1;
            overflow-y: auto;
            margin-bottom: 10px;
        }

        /* 悬浮全屏按钮 */
        .floating-fullscreen-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: rgba(66, 153, 225, 0.8);
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }
        
        .floating-fullscreen-button:hover {
            background-color: rgba(66, 153, 225, 1);
            transform: scale(1.1);
        }
        
        /* 在全屏模式下调整按钮样式 */
        .fullscreen-active .floating-fullscreen-button {
            background-color: rgba(237, 100, 166, 0.8);
        }
        
        /* 在小屏幕上隐藏浮动按钮 */
        @media (max-width: 768px) {
            .floating-fullscreen-button {
                bottom: 70px;
            }
        }
        
        /* 距离控制样式 */
        .distance-controls {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 15px 0;
        }
        
        .distance-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .distance-label {
            font-size: 14px;
            font-weight: 600;
            color: #e0e0e0;
            margin-bottom: 5px;
        }
        
        .distance-slider-container {
            display: flex;
            align-items: center;
            gap: 15px;
            background: rgba(255, 255, 255, 0.05);
            padding: 12px 15px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .distance-slider {
            flex: 1;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            outline: none;
            cursor: pointer;
            -webkit-appearance: none;
            appearance: none;
        }
        
        .distance-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            background: linear-gradient(135deg, #4a9eff, #2d7dd2);
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(74, 158, 255, 0.3);
            transition: all 0.2s ease;
        }
        
        .distance-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
        }
        
        .distance-slider::-moz-range-thumb {
            width: 18px;
            height: 18px;
            background: linear-gradient(135deg, #4a9eff, #2d7dd2);
            border-radius: 50%;
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 6px rgba(74, 158, 255, 0.3);
            transition: all 0.2s ease;
        }
        
        .distance-slider::-moz-range-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
        }
        
        .distance-slider::-webkit-slider-track {
            background: linear-gradient(to right, #4a9eff 0%, #4a9eff var(--slider-fill, 50%), rgba(255, 255, 255, 0.1) var(--slider-fill, 50%), rgba(255, 255, 255, 0.1) 100%);
            border-radius: 3px;
            height: 6px;
        }
        .distance-value {
            min-width: 60px;
            text-align: center;
            font-size: 13px;
            font-weight: 600;
            color: #4a9eff;
            background: rgba(74, 158, 255, 0.1);
            padding: 4px 8px;
            border-radius: 4px;
            border: 1px solid rgba(74, 158, 255, 0.2);
        }
        
        /* 距离输入框样式 */
        .distance-input {
            width: 60px;
            text-align: center;
            font-size: 13px;
            font-weight: 600;
            color: #4a9eff;
            background: rgba(74, 158, 255, 0.1);
            padding: 4px 6px;
            border-radius: 4px;
            border: 1px solid rgba(74, 158, 255, 0.3);
            outline: none;
            transition: all 0.2s ease;
            cursor: pointer;
            box-sizing: border-box;
        }
        
        .distance-input:hover {
            background: rgba(74, 158, 255, 0.15);
            border-color: rgba(74, 158, 255, 0.5);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(74, 158, 255, 0.2);
        }
        
        .distance-input:focus {
            background: rgba(74, 158, 255, 0.2);
            border-color: #4a9eff;
            box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.3);
            transform: translateY(-1px);
        }
        
        /* 隐藏数字输入框的上下箭头 */
        .distance-input::-webkit-outer-spin-button,
        .distance-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        
        .distance-input[type=number] {
            -moz-appearance: textfield;
        }
        
        /* 距离输入框包装器 */
        .distance-input-wrapper {
            display: flex;
            align-items: center;
            gap: 2px;
        }
        
        /* 距离单位样式 */
        .distance-unit {
            font-size: 12px;
            font-weight: 600;
            color: #4a9eff;
            margin-left: 2px;
        }
        
        /* 距离提示文本样式 */
        .distance-hint {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.5);
            margin-top: 5px;
            padding-left: 5px;
            font-style: italic;
        }
        
        /* 说明按钮样式 */
        .help-button {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4a9eff, #2d7dd2);
            color: white;
            border: none;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            margin-left: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(74, 158, 255, 0.3);
        }
        
        .help-button:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(74, 158, 255, 0.4);
            background: linear-gradient(135deg, #5aaeff, #3d8de2);
        }
        
        .help-button:active {
            transform: scale(0.95);
        }
        
        /* 重置按钮样式 */
        .reset-button {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 4px 12px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            margin-left: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .reset-button:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            background: linear-gradient(135deg, #ff5252 0%, #d63031 100%);
        }
        
        .reset-button:active {
            transform: scale(0.95);
        }
        
        /* 说明对话框样式 */
        .help-dialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 3000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .help-dialog.visible {
            opacity: 1;
        }
        
        .help-content {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
            border-radius: 12px;
            width: 90%;
            max-width: 500px;
            max-height: 80vh;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
            overflow: hidden;
            transform: scale(0.9) translateY(-20px);
            transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            border: 1px solid rgba(74, 158, 255, 0.3);
        }
        
        .help-dialog.visible .help-content {
            transform: scale(1) translateY(0);
        }
        
        .help-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, rgba(74, 158, 255, 0.2), rgba(45, 125, 210, 0.2));
            padding: 15px 20px;
            border-bottom: 1px solid rgba(74, 158, 255, 0.3);
        }
        
        .help-title {
            font-weight: bold;
            font-size: 18px;
            color: #4a9eff;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .help-close {
            cursor: pointer;
            font-size: 18px;
            line-height: 30px;
            color: #a0aec0;
            transition: color 0.2s;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
        }
        
        .help-close:hover {
            color: white;
            background: rgba(255, 255, 255, 0.2);
        }
        
        .help-body {
            padding: 20px;
            color: #e2e8f0;
            font-size: 14px;
            line-height: 1.6;
            max-height: 60vh;
            overflow-y: auto;
        }
        
        .help-item {
            margin-bottom: 20px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            border-left: 4px solid #4a9eff;
        }
        
        .help-item-title {
            font-weight: bold;
            color: #4a9eff;
            margin-bottom: 8px;
            font-size: 16px;
        }
        
        .help-item-desc {
            color: #cbd5e0;
            font-size: 13px;
        }