/* ========== 全局CSS变量 ========== */
        :root {
            --font-primary: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
            
            /* 背景色 - 参考 dashboard-common.css */
            --bg-dark: linear-gradient(135deg, #0c1b33 0%, #1a3a5f 100%);
            --bg-panel: rgba(26, 44, 92, 0.8);
            --bg-card: rgba(26, 44, 92, 0.6);
            
            /* 主色调 - 参考 dashboard-common.css */
            --primary-blue: #339af0;
            --primary-cyan: #4dabf7;
            --accent-glow: rgba(77, 171, 247, 0.3);
            
            /* 状态色 - 参考 dashboard-common.css */
            --status-running: #51cf66;      /* 绿色 - 运行中 */
            --status-warning: #fcc419;      /* 黄色 - 警告 */
            --status-error: #ff6b6b;        /* 红色 - 故障 */
            --status-idle: #868e96;         /* 灰色 - 待机 */
            --status-maintenance: #ff922b;  /* 橙色 - 维护 */
            
            /* 文字颜色 - 参考 dashboard-common.css */
            --text-primary: #ffffff;
            --text-secondary: #a5d8ff;
            --text-muted: rgba(165, 216, 255, 0.7);
            
            /* 边框 - 参考 dashboard-common.css */
            --border-color: rgba(77, 171, 247, 0.3);
            --border-light: rgba(77, 171, 247, 0.2);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: var(--font-primary);
        }

        body {
            background: var(--bg-dark);
            color: var(--text-primary);
            overflow: hidden;
            height: 100vh;
        }

        /* 粒子画布（可选） */
        #particles-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }

        /* ========== 顶部工具栏 ========== */
        .top-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: var(--bg-panel);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            z-index: 1000;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        }

        .logo-section {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .logo-section:hover {
            opacity: 0.9;
            transform: scale(1.02);
        }

        .logo-icon {
            font-size: 28px;
            color: var(--primary-cyan);
            transition: all 0.3s ease;
            padding: 5px;
            border-radius: 6px;
        }

        .logo-section:hover .logo-icon {
            color: var(--text-secondary);
            background: rgba(77, 171, 247, 0.15);
            text-shadow: 0 0 10px var(--accent-glow);
        }

        .logo-text h1 {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .logo-text p {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .toolbar-actions {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 8px 16px;
            border: 1px solid var(--border-color);
            background: rgba(77, 171, 247, 0.15);
            color: var(--text-secondary);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: none;
        }

        .btn:hover {
            background: rgba(77, 171, 247, 0.3);
            border-color: var(--primary-cyan);
            color: var(--primary-cyan);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(77, 171, 247, 0.2);
        }

        .btn.active {
            background: var(--primary-cyan);
            color: var(--bg-dark);
            border-color: var(--primary-cyan);
        }

        /* ========== 3D画布区域 ========== */
        #renderCanvas {
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: calc(100vh - 60px);
            background: radial-gradient(circle at center, #0f1520 0%, #0a0e17 100%);
            z-index: 1;
            outline: none;
            touch-action: none; /* 阻止默认触摸行为（滚动、缩放） */
            display: block;
            -webkit-tap-highlight-color: transparent; /* 移除iOS点击高亮 */
        }

        /* 粒子动画层 */
        #particles-canvas {
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: calc(100vh - 60px);
            z-index: 0;
            pointer-events: none;
        }

        /* ========== KPI面板 ========== */
        .kpi-panel {
            position: fixed;
            top: 80px;
            right: 20px;
            left: auto;
            width: 280px;
            background: var(--bg-panel);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 14px;
            z-index: 100;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            transition: all 0.3s ease;
        }

        /* KPI折叠状态 */
        .kpi-panel.collapsed {
            width: 50px;
            height: 50px;
            padding: 0;
            overflow: hidden;
            cursor: pointer;
        }

        .kpi-panel.collapsed .kpi-title,
        .kpi-panel.collapsed .kpi-grid {
            opacity: 0;
            pointer-events: none;
        }

        .kpi-panel.collapsed .kpi-toggle-btn {
            transform: rotate(180deg);
        }

        /* KPI折叠按钮 */
        .kpi-toggle-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 28px;
            height: 28px;
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-cyan));
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            color: white;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            z-index: 10;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .kpi-toggle-btn:hover {
            transform: scale(1.1) translateY(-2px);
            box-shadow: 0 4px 12px rgba(77, 171, 247, 0.5);
        }

        .kpi-toggle-btn i {
            transition: transform 0.3s;
        }

        .kpi-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--primary-cyan);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .kpi-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .kpi-item {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 8px;
            padding: 10px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .kpi-item:hover {
            border-color: var(--primary-cyan);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }

        .kpi-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .kpi-label {
            font-size: 11px;
            color: var(--text-muted);
        }

        /* KPI指标看板操作按钮 */
        .kpi-actions {
            display: flex;
            justify-content: center;
            gap: 4px;
            margin-top: 6px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .kpi-item:hover .kpi-actions {
            opacity: 1;
        }

        .kpi-action-btn {
            width: 22px;
            height: 22px;
            border: 1px solid var(--border-light);
            background: rgba(77, 171, 247, 0.1);
            color: var(--text-muted);
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            transition: all 0.2s ease;
            padding: 0;
        }

        .kpi-action-btn:hover {
            background: rgba(77, 171, 247, 0.3);
            border-color: var(--primary-cyan);
            color: var(--primary-cyan);
            transform: scale(1.1);
        }

        .kpi-action-btn.btn-new-window:hover {
            background: rgba(81, 207, 102, 0.2);
            border-color: #51cf66;
            color: #51cf66;
        }

        .kpi-action-btn.btn-sub-window:hover {
            background: rgba(252, 196, 25, 0.2);
            border-color: #fcc419;
            color: #fcc419;
        }

        /* KPI子窗口（iframe弹窗） */
        .kpi-sub-window-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 9000;
            display: none;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
            animation: fadeIn 0.3s ease;
        }

        .kpi-sub-window-overlay.active {
            display: flex;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .kpi-sub-window {
            width: 85vw;
            height: 85vh;
            background: var(--bg-panel);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
            display: flex;
            flex-direction: column;
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .kpi-sub-window-header {
            height: 44px;
            background: linear-gradient(135deg, rgba(77, 171, 247, 0.15), transparent);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            flex-shrink: 0;
        }

        .kpi-sub-window-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--primary-cyan);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .kpi-sub-window-close {
            width: 28px;
            height: 28px;
            background: rgba(255, 107, 107, 0.1);
            border: 1px solid rgba(255, 107, 107, 0.3);
            color: #ff6b6b;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .kpi-sub-window-close:hover {
            background: rgba(255, 107, 107, 0.25);
            transform: scale(1.1);
        }

        .kpi-sub-window-body {
            flex: 1;
            position: relative;
            overflow: hidden;
        }

        .kpi-sub-window-body iframe {
            width: 100%;
            height: 100%;
            border: none;
            background: #0a0e17;
        }

        .kpi-sub-window-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--text-muted);
            font-size: 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .kpi-sub-window-loading .loading-spinner {
            width: 36px;
            height: 36px;
            border: 3px solid var(--border-color);
            border-top-color: var(--primary-cyan);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        /* ========== 图例面板 ========== */
        .legend-panel {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: var(--bg-panel);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 14px;
            z-index: 100;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            max-width: 280px;
            transition: all 0.3s ease;
        }

        /* 图例折叠状态 */
        .legend-panel.collapsed {
            width: 60px;
            height: auto;
            min-height: 80px;
            padding: 8px 4px;
            overflow: visible;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .legend-panel.collapsed .legend-title,
        .legend-panel.collapsed .legend-group-title,
        .legend-panel.collapsed .legend-item {
            opacity: 0;
            pointer-events: none;
            position: absolute;
        }

        /* 图例折叠按钮 */
        .legend-toggle-btn {
            position: relative;
            top: 0;
            right: 0;
            width: 28px;
            height: 28px;
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-cyan));
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            color: white;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            z-index: 10;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            margin-bottom: 8px;
        }

        .legend-toggle-btn:hover {
            transform: scale(1.1) translateY(-2px);
            box-shadow: 0 4px 12px rgba(77, 171, 247, 0.5);
        }

        .legend-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--primary-cyan);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* 分组标题（替代原来的折叠分区） */
        .legend-group-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 0;
            display: flex;
            align-items: center;
            gap: 6px;
            padding-bottom: 6px;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
            user-select: none;
            transition: color 0.2s;
        }

        .legend-group-title:hover {
            color: var(--primary-cyan);
        }

        /* ========== 图例子分类折叠 ========== */
        .legend-section {
            margin-top: 12px;
        }

        .legend-section:first-of-type {
            margin-top: 10px;
        }

        .legend-section-toggle {
            margin-left: auto;
            font-size: 10px;
            color: var(--text-muted);
            transition: transform 0.3s ease;
        }

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

        .legend-section-content {
            padding-top: 6px;
        }

        .legend-section.collapsed .legend-section-content {
            display: none;
        }

        /* 面板整体折叠时，隐藏所有 section */
        .legend-panel.collapsed .legend-section {
            opacity: 0;
            pointer-events: none;
            position: absolute;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
            font-size: 11px;
            color: var(--text-secondary);
            transition: all 0.3s ease;
        }

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

        .legend-item-toggle {
            cursor: pointer;
            justify-content: space-between;
            padding: 4px 8px;
            border-radius: 6px;
        }

        .legend-item-toggle:hover {
            background: rgba(77, 171, 247, 0.1);
        }

        .legend-item-toggle span:first-of-type {
            flex: 1;
        }

        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 3px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            flex-shrink: 0;
        }

        /* 可点击的等级图例项 */
        .legend-level-item {
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }

        .legend-level-item:hover {
            background: rgba(77, 171, 247, 0.15);
            border-color: rgba(77, 171, 247, 0.3);
            transform: translateX(2px);
        }

        .legend-level-item.active {
            background: rgba(77, 171, 247, 0.2);
            border-color: var(--primary-cyan);
            box-shadow: 0 0 8px rgba(77, 171, 247, 0.3);
        }

        .legend-level-item small {
            font-size: 10px;
            font-weight: 600;
        }

        /* 开关按钮样式 */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 20px;
            flex-shrink: 0;
        }

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

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(134, 142, 150, 0.5);
            transition: 0.3s;
            border-radius: 20px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }

        .toggle-switch input:checked + .toggle-slider {
            background-color: var(--primary-cyan);
        }

        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(20px);
        }

        .toggle-slider:hover {
            box-shadow: 0 0 8px rgba(77, 171, 247, 0.5);
        }

        /* ========== 调试信息 ========== */
        .debug-info {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: var(--bg-panel);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 14px;
            z-index: 100;
            max-width: 280px;
            min-width: 240px;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            transition: all 0.3s ease;
        }

        .debug-info:hover {
            box-shadow: 0 6px 20px rgba(77, 171, 247, 0.3);
            border-color: var(--primary-cyan);
        }

        /* 调试信息折叠状态 */
        .debug-info.collapsed {
            min-width: auto;
            padding: 8px 36px 8px 12px;
        }

        .debug-info.collapsed .debug-content {
            display: none;
        }

        .debug-info.collapsed .debug-toggle-btn i {
            transform: rotate(180deg);
        }

        /* 调试信息折叠按钮 */
        .debug-toggle-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 28px;
            height: 28px;
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-cyan));
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            color: white;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            z-index: 10;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .debug-toggle-btn:hover {
            transform: scale(1.1) translateY(-2px);
            box-shadow: 0 4px 12px rgba(77, 171, 247, 0.5);
        }

        .debug-toggle-btn i {
            transition: transform 0.3s;
        }

        .debug-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--primary-cyan);
            margin-bottom: 8px;
        }

        .debug-content {
            font-size: 11px;
            color: var(--text-muted);
            line-height: 1.6;
            max-height: 150px;
            overflow-y: auto;
        }

        /* ========== 加载动画 ========== */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-dark);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.5s ease;
        }

        .loading-overlay.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .loading-spinner {
            width: 60px;
            height: 60px;
            border: 4px solid var(--border-color);
            border-top-color: var(--primary-cyan);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .loading-text {
            margin-top: 20px;
            font-size: 14px;
            color: var(--text-secondary);
        }

        /* ========== 响应式设计 ========== */
        @media (max-width: 1024px) {
            .kpi-panel {
                width: 260px;
            }

            .kpi-value {
                font-size: 20px;
            }
        }

        @media (max-width: 768px) {
            /* 小屏默认折叠KPI面板 */
            .kpi-panel {
                width: 50px;
                height: 50px;
                padding: 0;
                overflow: hidden;
            }

            .kpi-panel.expanded {
                width: calc(100% - 40px);
                right: 20px;
                left: auto;
                height: auto;
                padding: 16px;
                overflow: visible;
            }

            .kpi-panel.expanded .kpi-title,
            .kpi-panel.expanded .kpi-grid {
                opacity: 1;
                pointer-events: auto;
            }

            .legend-panel {
                /* 小屏默认折叠可见 - 横向紧凑布局 */
                left: 10px;
                bottom: 20px;
                max-width: 70px;
                min-height: 90px;
                padding: 10px 5px;
            }

            /* 小屏展开状态 */
            .legend-panel:not(.collapsed) {
                width: 160px !important;
                max-width: 160px !important;
                max-height: 65vh;
                overflow-y: auto;
                padding: 10px 8px;
            }

            .legend-panel:not(.collapsed) .legend-item {
                font-size: 11px;
            }

            .legend-panel:not(.collapsed) .legend-group-title {
                font-size: 10px;
            }

            .legend-panel.collapsed {
                width: 60px;
                min-height: 80px;
                padding: 8px 4px;
                gap: 8px;
            }

            .legend-panel.collapsed .legend-toggle-btn {
                width: 28px;
                height: 28px;
                font-size: 12px;
            }

            .debug-info {
                /* 小屏默认折叠可见 */
                min-width: auto;
                max-width: 160px;
            }
            
            /* 窄屏模式下工具栏按钮只显示图标 */
            .toolbar-actions .btn {
                padding: 8px 10px;
                min-width: 36px;
            }
            
            .toolbar-actions .btn span {
                display: none;
            }
            
            .toolbar-actions .btn i {
                margin: 0;
            }
            
            /* 小屏指标卡：居中底部定位，确保屏幕内 */
            .department-metrics-panel {
                width: calc(100vw - 40px) !important;
                max-width: 360px !important;
                max-height: calc(100vh - 120px) !important;
                left: 50% !important;
                right: auto !important;
                bottom: 20px !important;
                top: auto !important;
                transform: translateX(-50%);
            }
        }

        @media (max-width: 480px) {
            .kpi-panel.expanded {
                width: calc(100% - 40px);
                right: 20px;
                top: 70px;
            }

            .kpi-grid {
                grid-template-columns: 1fr;
            }
            
            /* 超小屏图例折叠与PC保持一致 */

            .debug-title {
                font-size: 12px;
            }
        }
        
        /* ========== 部门指标面板 ========== */
        .department-metrics-panel {
            position: fixed;
            right: 320px;
            top: 80px;
            width: 320px;
            max-height: calc(100vh - 160px);
            background: var(--bg-panel);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            z-index: 200;
            display: none;
            overflow-y: auto;
            opacity: 0;
            transition: opacity 0.3s ease, left 0.4s ease, top 0.4s ease, right 0.4s ease;
        }
        
        .department-metrics-panel.slide-in {
            opacity: 1;
        }
        
        .panel-header {
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, rgba(77, 171, 247, 0.1), transparent);
            cursor: grab;
            user-select: none;
        }
        
        .panel-header:active:not(.dragging-active) {
            cursor: grabbing;
        }
        
        .panel-header.dragging-active {
            cursor: grabbing;
            background: linear-gradient(135deg, rgba(77, 171, 247, 0.2), rgba(77, 171, 247, 0.05));
        }
        
        .panel-header .drag-hint {
            color: var(--text-muted);
            font-size: 10px;
            opacity: 0;
            transition: opacity 0.3s;
            margin-left: 8px;
            white-space: nowrap;
        }
        
        .panel-header:hover .drag-hint {
            opacity: 0.6;
        }
        
        .panel-header h3 {
            color: var(--primary-cyan);
            font-size: 16px;
            margin: 0;
        }
        
        /* 数据源标识（实时/模拟） */
        .data-source-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 8px;
            line-height: 1.4;
            white-space: nowrap;
            vertical-align: middle;
        }
        .data-source-badge.real {
            color: #51cf66;
            background: rgba(81, 207, 102, 0.15);
            border: 1px solid rgba(81, 207, 102, 0.3);
        }
        .data-source-badge.mock {
            color: #ffc107;
            background: rgba(255, 193, 7, 0.15);
            border: 1px solid rgba(255, 193, 7, 0.3);
        }
        .data-source-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            display: inline-block;
        }
        .data-source-badge.real .data-source-dot {
            background: #51cf66;
            box-shadow: 0 0 4px rgba(81, 207, 102, 0.6);
        }
        .data-source-badge.mock .data-source-dot {
            background: #ffc107;
            box-shadow: 0 0 4px rgba(255, 193, 7, 0.6);
        }
        
        /* ✅ 部门数据筛选样式 */
        .dept-filter-section {
            margin: 0 8px 6px;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 6px;
            background: rgba(255,255,255,0.03);
            overflow: hidden;
        }
        .dept-filter-section .filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 10px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .dept-filter-section .filter-header:hover {
            background: rgba(255,255,255,0.05);
        }
        .dept-filter-section .filter-body {
            padding: 6px 10px 8px;
            border-top: 1px solid rgba(255,255,255,0.08);
            background: rgba(0,0,0,0.15);
        }
        .dept-filter-section .filter-checkbox-list::-webkit-scrollbar {
            width: 4px;
        }
        .dept-filter-section .filter-checkbox-list::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.2);
            border-radius: 2px;
        }
        .filter-apply-btn:hover { background: #339af0 !important; }
        .filter-clear-btn:hover { background: rgba(255,255,255,0.2) !important; }
        
        .close-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 24px;
            cursor: pointer;
            transition: all 0.3s;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
        }
        
        .close-btn:hover {
            color: var(--status-error);
            background: rgba(255, 107, 107, 0.1);
            transform: rotate(90deg);
        }
        
        /* 折叠/展开按钮 */
        .collapse-btn {
            background: none;
            border: 1px solid var(--border-light);
            color: var(--text-muted);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
        }
        
        .collapse-btn:hover {
            border-color: var(--primary-cyan);
            color: var(--primary-cyan);
            background: rgba(77, 171, 247, 0.15);
        }
        
        /* 标题栏操作按钮组（新窗口/子窗口） */
        .panel-header-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-right: 8px;
        }
        
        .panel-header-action-btn {
            background: none;
            border: 1px solid var(--border-light);
            color: var(--text-muted);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
        }
        
        .panel-header-action-btn:hover {
            border-color: var(--primary-cyan);
            color: var(--primary-cyan);
            background: rgba(77, 171, 247, 0.15);
        }
        
        .panel-header-action-btn.btn-new-tab:hover {
            border-color: #51cf66;
            color: #51cf66;
            background: rgba(81, 207, 102, 0.15);
        }
        
        .panel-header-action-btn.btn-sub-win:hover {
            border-color: #fcc419;
            color: #fcc419;
            background: rgba(252, 196, 25, 0.15);
        }
        
        /* 各区独立操作按钮组（section header内） */
        .section-actions {
            display: flex;
            align-items: center;
            gap: 3px;
            margin-left: 6px;
        }
        
        .section-action-btn {
            background: none;
            border: 1px solid var(--border-light);
            color: var(--text-muted);
            width: 24px;
            height: 24px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            padding: 0;
            transition: all 0.2s;
        }
        
        .section-action-btn:hover {
            border-color: var(--primary-cyan);
            color: var(--primary-cyan);
            background: rgba(77, 171, 247, 0.15);
        }
        
        .section-action-btn.btn-new-tab:hover {
            border-color: #51cf66;
            color: #51cf66;
            background: rgba(81, 207, 102, 0.15);
        }
        
        .section-action-btn.btn-sub-win:hover {
            border-color: #fcc419;
            color: #fcc419;
            background: rgba(252, 196, 25, 0.15);
        }
        
        /* 工序质量指标样式（绩效区） */
        .quality-metric-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 14px;
            margin-bottom: 6px;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 6px;
            transition: all 0.3s;
        }
        
        .quality-metric-row:hover {
            border-color: var(--primary-cyan);
            box-shadow: 0 2px 8px rgba(77, 171, 247, 0.15);
        }
        
        .quality-metric-label {
            color: var(--text-secondary);
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .quality-metric-label i {
            font-size: 14px;
        }
        
        .quality-metric-value {
            display: flex;
            align-items: baseline;
            gap: 8px;
        }
        
        .quality-rate {
            font-size: 16px;
            font-weight: 700;
            color: var(--primary-cyan);
        }
        
        .quality-count {
            font-size: 11px;
            color: var(--text-muted);
        }
        
        .quality-rate.rate-good { color: #51cf66; }
        .quality-rate.rate-warn { color: #fcc419; }
        .quality-rate.rate-bad { color: #ff6b6b; }
        
        /* 数据日期标签 */
        .quality-data-date {
            display: inline-block;
            font-size: 10px;
            padding: 2px 6px;
            background: rgba(77, 171, 247, 0.15);
            border: 1px solid var(--primary-cyan);
            border-radius: 3px;
            color: var(--primary-cyan);
            margin-left: 8px;
            cursor: help;
        }
        
        .panel-body {
            padding: 16px;
        }
        
        .metric-section {
            margin-bottom: 20px;
        }
        
        .metric-section:last-child {
            margin-bottom: 0;
        }
        
        .metric-section h4 {
            color: var(--text-secondary);
            font-size: 13px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .metric-section h4 i {
            color: var(--primary-cyan);
        }
        
        /* ========== 折叠面板样式 ========== */
        .metric-section.collapsible {
            margin-bottom: 16px;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            background: rgba(77, 171, 247, 0.05);
            border: 1px solid var(--border-light);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            user-select: none;
        }
        
        .section-header:hover {
            background: rgba(77, 171, 247, 0.1);
            border-color: var(--primary-cyan);
        }
        
        .header-left {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
            position: relative;  /* 为tooltip定位提供参考 */
        }
        
        .section-header h4 {
            margin: 0;
            padding: 0;
            border: none;
            flex: 1;
        }
        
        /* 内联等级徽章 */
        .level-badge-inline {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s;
            white-space: nowrap;
        }
        
        /* 作业等级 - 绿色系 */
        .level-badge-inline.level-high {
            background: rgba(81, 207, 102, 0.15);
            color: #2f9e44;
            border: 1px solid rgba(81, 207, 102, 0.3);
        }
        
        .level-badge-inline.level-high::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #51cf66;
            box-shadow: 0 0 4px rgba(81, 207, 102, 0.6);
        }
        
        .level-badge-inline.level-medium {
            background: rgba(252, 196, 25, 0.15);
            color: #e67700;
            border: 1px solid rgba(252, 196, 25, 0.3);
        }
        
        .level-badge-inline.level-medium::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #fcc419;
            box-shadow: 0 0 4px rgba(252, 196, 25, 0.6);
        }
        
        .level-badge-inline.level-low {
            background: rgba(255, 107, 107, 0.15);
            color: #c92a2a;
            border: 1px solid rgba(255, 107, 107, 0.3);
        }
        
        .level-badge-inline.level-low::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ff6b6b;
            box-shadow: 0 0 4px rgba(255, 107, 107, 0.6);
        }
        
        /* 绩效等级 - 蓝色系 */
        .level-badge-inline.level-excellent {
            background: rgba(81, 207, 102, 0.15);
            color: #2f9e44;
            border: 1px solid rgba(81, 207, 102, 0.3);
        }
        
        .level-badge-inline.level-excellent::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #51cf66;
            box-shadow: 0 0 4px rgba(81, 207, 102, 0.6);
        }
        
        .level-badge-inline.level-good {
            background: rgba(77, 171, 247, 0.15);
            color: #1971c2;
            border: 1px solid rgba(77, 171, 247, 0.3);
        }
        
        .level-badge-inline.level-good::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #4dabf7;
            box-shadow: 0 0 4px rgba(77, 171, 247, 0.6);
        }
        
        .level-badge-inline.level-normal {
            background: rgba(252, 196, 25, 0.15);
            color: #e67700;
            border: 1px solid rgba(252, 196, 25, 0.3);
        }
        
        .level-badge-inline.level-normal::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #fcc419;
            box-shadow: 0 0 4px rgba(252, 196, 25, 0.6);
        }
        
        .level-badge-inline.level-warning {
            background: rgba(255, 146, 43, 0.15);
            color: #d9480f;
            border: 1px solid rgba(255, 146, 43, 0.3);
        }
        
        .level-badge-inline.level-warning::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ff922b;
            box-shadow: 0 0 4px rgba(255, 146, 43, 0.6);
        }
        
        .level-badge-inline.level-critical {
            background: rgba(255, 107, 107, 0.15);
            color: #c92a2a;
            border: 1px solid rgba(255, 107, 107, 0.3);
        }
        
        .level-badge-inline.level-critical::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ff6b6b;
            box-shadow: 0 0 4px rgba(255, 107, 107, 0.6);
        }
        
        .toggle-icon {
            color: var(--primary-cyan);
            font-size: 12px;
            transition: transform 0.3s;
        }
        
        .section-content {
            margin-top: 8px;
            padding-left: 4px;
            animation: slideDown 0.3s ease;
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .metric-item {
            padding: 10px 12px;
            margin-bottom: 8px;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        
        .metric-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--primary-cyan);
            transform: scaleY(0);
            transition: transform 0.3s;
        }
        
        .metric-item:hover {
            border-color: var(--primary-cyan);
            transform: translateX(-4px);
            box-shadow: 0 2px 8px rgba(77, 171, 247, 0.2);
            background: rgba(77, 171, 247, 0.05);
        }
        
        .metric-item:hover::before {
            transform: scaleY(1);
        }
        
        .metric-item span {
            color: var(--text-secondary);
            font-size: 12px;
            flex: 1;
        }
        
        .metric-item strong {
            color: var(--primary-cyan);
            font-size: 16px;
            margin-left: 8px;
        }
        
        .metric-item i {
            color: var(--text-muted);
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s;
            margin-left: 8px;
        }
        
        .metric-item:hover i {
            opacity: 1;
        }

        /* 组合指标样式（零部制造部物料流转指标） */
        .metric-item-combined {
            padding: 12px 14px;
            margin-bottom: 8px;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 6px;
            transition: all 0.3s;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        
        .metric-item-combined::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(to bottom, var(--primary-cyan), #51cf66);
            transform: scaleY(0);
            transition: transform 0.3s;
        }
        
        .metric-item-combined:hover {
            border-color: var(--primary-cyan);
            transform: translateX(-4px);
            box-shadow: 0 2px 8px rgba(77, 171, 247, 0.2);
            background: rgba(77, 171, 247, 0.05);
        }
        
        .metric-item-combined:hover::before {
            transform: scaleY(1);
        }
        
        .combined-label {
            color: var(--text-secondary);
            font-size: 12px;
            flex: 1;
            max-width: 50%;
        }
        
        .combined-values {
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }
        
        .value-primary {
            color: var(--primary-cyan);
            font-size: 15px;
            font-weight: 600;
        }
        
        .value-separator {
            color: var(--text-muted);
            font-size: 14px;
            font-weight: 300;
        }
        
        .value-secondary {
            color: #51cf66;
            font-size: 15px;
            font-weight: 600;
        }

        /* 等级Tooltip样式 */
        .level-tooltip {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            padding: 12px 16px;
            background: rgba(20, 30, 50, 0.98);
            border: 1px solid var(--primary-cyan);
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(77, 171, 247, 0.2);
            color: #fff;
            font-size: 12px;
            line-height: 1.6;
            z-index: 1000;
            max-width: 300px;
            min-width: 260px;
            pointer-events: auto;
        }
        
        .level-badge-inline:hover ~ .level-tooltip,
        .level-tooltip:hover {
            display: block;
        }
        
        .level-tooltip strong {
            display: block;
            margin-bottom: 8px;
            color: var(--primary-cyan);
            font-size: 13px;
        }
        
        .level-tooltip ul {
            margin: 0;
            padding-left: 18px;
            list-style-type: disc;
        }
        
        .level-tooltip li {
            margin-bottom: 6px;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .level-tooltip b {
            color: #fff;
            font-weight: 600;
        }

        /* 部门指标项操作按钮 */
        .metric-item-actions {
            display: flex;
            gap: 4px;
            margin-left: 8px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .metric-item:hover .metric-item-actions {
            opacity: 1;
        }

        .metric-action-btn {
            width: 20px;
            height: 20px;
            border: 1px solid var(--border-light);
            background: rgba(77, 171, 247, 0.1);
            color: var(--text-muted);
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            transition: all 0.2s ease;
            padding: 0;
        }

        .metric-action-btn:hover {
            background: rgba(77, 171, 247, 0.3);
            border-color: var(--primary-cyan);
            color: var(--primary-cyan);
            transform: scale(1.15);
        }

        .metric-action-btn.btn-new-window:hover {
            background: rgba(81, 207, 102, 0.2);
            border-color: #51cf66;
            color: #51cf66;
        }

        .metric-action-btn.btn-sub-window:hover {
            background: rgba(252, 196, 25, 0.2);
            border-color: #fcc419;
            color: #fcc419;
        }
        
        .level-indicators {
            display: flex;
            gap: 10px;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--border-light);
        }
        
        .level-badge {
            flex: 1;
            padding: 12px;
            border-radius: 8px;
            text-align: center;
            border: 2px solid;
            transition: all 0.3s;
        }
        
        .level-badge span {
            display: block;
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }
        
        .level-badge strong {
            display: block;
            font-size: 14px;
            font-weight: 700;
        }
        
        /* 绩效等级颜色 */
        .level-excellent { border-color: #51cf66; color: #51cf66; }
        .level-good { border-color: #4dabf7; color: #4dabf7; }
        .level-normal { border-color: #fcc419; color: #fcc419; }
        .level-warning { border-color: #ff922b; color: #ff922b; }
        .level-critical { border-color: #ff6b6b; color: #ff6b6b; }
        
        /* 作业等级颜色 */
        .ops-level.level-high { border-color: #51cf66; color: #51cf66; }
        .ops-level.level-medium { border-color: #fcc419; color: #fcc419; }
        .ops-level.level-low { border-color: #ff6b6b; color: #ff6b6b; }
        
        .level-badge:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        
        /* ========== 底部关闭按钮 ========== */
        .panel-footer {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid var(--border-light);
            text-align: center;
        }
        
        .close-panel-btn {
            background: rgba(134, 142, 150, 0.1);
            border: 1px solid rgba(134, 142, 150, 0.3);
            color: #adb5bd;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        
        .close-panel-btn:hover {
            background: rgba(255, 107, 107, 0.1);
            border-color: #ff6b6b;
            color: #ff6b6b;
            transform: translateY(-1px);
        }
        
        .close-panel-btn:active {
            transform: translateY(0);
        }
        
        .close-panel-btn i {
            font-size: 13px;
        }