:root { --sidebar-w: 250px; --primary: #2c3e50; --accent: #3498db; }
        body { background-color: #f0f2f5; 
		/*font-family: 'Inter', system-ui, -apple-system, sans-serif; */
		--font-main: 'Inter', 'Segoe UI', 'SF Pro Display', -apple-system, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', sans-serif;
		}
        body { 
            background-color: #f9fafb; 
            font-family: var(--font-main);
            color: #1f2937;
            -webkit-font-smoothing: antialiased; /* 字体抗锯齿优化 */
            -moz-osx-font-smoothing: grayscale;
        }
        /* 侧边栏优化 */
        .sidebar { 
            width: var(--sidebar-w);height:100vh;  background: #441f54; 
            padding: 20px; color: #ecf0f1; position: fixed; overflow-y: auto; 
        }
        .sidebar::-webkit-scrollbar { width: 5px; }
        .sidebar::-webkit-scrollbar-thumb { background: #3e4f5f; border-radius: 10px; }
        
        .filter-group { margin-bottom: 10px; border-bottom: 1px solid #2c3e50; padding-bottom: 15px; }
        .filter-label { font-size: 0.85rem; font-weight: 600; color: #bdc3c7; margin-bottom: 10px; display: block; text-transform: uppercase; letter-spacing: 1px; }
        
        .form-select-sm, .form-control-sm { color: #6c757d; border: 1px solid #3e4f5f; font-size: 0.8rem; }
        .form-select-sm:focus, .form-control-sm:focus {   border-color: var(--accent); box-shadow: none; }
        
        /* 主体内容 */
        .main-content { margin-left: var(--sidebar-w); padding: 25px; transition: all 0.3s; }
        .page-header { background: #fff; padding: 15px 25px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 20px; }
        
        /* 表格优化 */
        .table-card { background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden; }
        .table { font-size: 0.82rem; margin-bottom: 0; }
        .table thead { background: #f8f9fa; border-bottom: 2px solid #edf2f7; }
        .table th { padding: 12px 8px; font-weight: 600; color: #4a5568; white-space: nowrap; }
        .table td { padding: 10px 8px; vertical-align: middle; border-bottom: 1px solid #f1f4f8; }
        
        /* 范围数值美化 */
        .range-badge { background: #ebf8ff; color: #2b6cb0; padding: 2px 6px; border-radius: 4px;/* font-family: monospace; font-weight: 600;*/ display: inline-block;font-size:0.825rem }
        .model-text { color: #2d3748; font-weight: 700; }
        .tag-pill { font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; background: #edf2f7; color: #4a5568; margin-right: 4px; }
        
        /* 滑块样式自定义 */
        .noUi-connect { background: var(--accent); }
        .slider-val-box { display: flex; justify-content: space-between; font-size: 0.75rem; margin-top: 8px; color: #95a5a6; }
		
		/* 复选框滚动列表 */
        .checkbox-list { 
            max-height: 160px; overflow-y: auto; background: #2c3e50; 
            padding: 10px; border-radius: 6px; border: 1px solid #3e4f5f;
        }
        .checkbox-list::-webkit-scrollbar { width: 4px; }
        .checkbox-list::-webkit-scrollbar-thumb { background: #4e6a85; border-radius: 10px; }
        .form-check { margin-bottom: 5px; font-size: 0.85rem; }
        .form-check-input { cursor: pointer; background-color: #1a252f; border-color: #4e6a85; }
        .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
	/*	.main-search-box {
            max-width: 350px;
            margin-bottom: 20px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
         .main-search-box .filter-label {
            font-size: 0.85rem;
            font-weight: bold;
            color: #6c757d;
            margin-bottom: 6px;
            display: block;
        } */
		
		
		/*new style*/
		.main-search-box { max-width: 450px; margin-bottom: 20px; }
        .main-search-box .filter-label { font-size: 0.85rem; font-weight: bold; color: #6c757d; margin-bottom: 6px; display: block; }
        
        .media-dropdown-menu { 
    max-height: 250px; 
    overflow-y: auto; 
    padding: 6px 0; 
    min-width: 240px; 
    background-color: #ffffff;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	}
	.media-dropdown-item { 
    display: flex; 
    align-items: center; 
    padding: 6px 16px; 
    font-size: 0.875rem; 
    cursor: pointer; 
    color: #333333;
    white-space: nowrap; /* 防止文字在下拉框内尴尬换行 */
	}
	.media-dropdown-item:hover {
    background-color: #f8f9fa; /* 鼠标悬停变色 */
	}
	.media-dropdown-item input[type="checkbox"] { 
    cursor: pointer; 
    margin-right: 10px; /* 让复选框和文字保持优雅的间距 */
    width: 15px;
    height: 15px;
    flex-shrink: 0; /* 防止复选框被文字挤压变形 */
	}
	.media-dropdown-item label {
    cursor: pointer;
    margin: 0;
    flex-grow: 1;
    display: block;
	}
	.dropdown-toggle-custom { text-align: left; display: flex; justify-content: space-between; align-items: center; background-color: #fff; color: #212529; border: 1px solid #ced4da; }
	.dropdown-toggle-custom:hover, .dropdown-toggle-custom:focus { background-color: #fff; color: #212529; border-color: #86b7fe; }
	/* 静态层级与分类样式 —— 你可以随心所欲在这里调整设计 */
	.filter-section-title { font-size: 0.9rem; color: #0dcaf0; font-weight: bold; margin-top: 15px; margin-bottom: 8px; border-bottom: 1px solid #444; padding-bottom: 3px; }
	.filter-group { margin-bottom: 12px; }
	/* ==================== 适配 #441f54 侧边栏的滑块高级定制 ==================== */

/* 1. 基础滑块底条 */
.sidebar .noUi-target {
    background-color: rgba(255, 255, 255, 0.15) !important; /* 半透明纯白，透出底部的紫色，显得非常通透 */
    border: none !important;                                /* 删掉原生丑边框 */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important; /* 微微的内阴影增强立体感 */
    height: 6px !important;                                 /* 纤细线条设计 */
    margin-top: 12px;
    margin-bottom: 4px;
}

/* 2. 激活部分的进度条（选中的区间） */
.sidebar .noUi-connect {
    /* 采用高亮青色（Cyan），在暗紫色背景下对比度极高，非常清晰 */
    background: #0dcaf0 !important; 
    /* 如果你喜欢更柔和一点的科技感，也可以用下面这个“霓虹粉紫”渐变色（把下面一行的注释删掉，用这行就行）： */
    /* background: linear-gradient(90deg, #b23cfd, #0dcaf0) !important; */
}

/* 3. 圆形滑块按钮（Handle） */
.sidebar .noUi-handle {
    background-color: #441f54 !important;  /* 核心：滑块内部颜色与侧边栏完全一致，形成“悬浮镂空”感 */
    border: 2px solid #0dcaf0 !important;   /* 边框颜色与激活进度条严格一致 */
    border-radius: 50% !important;          /* 强制变成标准小圆点 */
    width: 16px !important;                 /* 精致的小尺寸 */
    height: 16px !important;
    right: -8px !important;                 /* 完美居中对齐 */
    top: -5px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; /* 给小圆点加深阴影，使其立体浮起 */
    transition: transform 0.15s ease, background-color 0.15s ease !important;
}

/* 4. 去掉原生滑块中间那两道尴尬的竖线 */
.sidebar .noUi-handle::before,
.sidebar .noUi-handle::after {
    display: none !important;
}

/* 5. 鼠标悬停（Hover）及激活时的动态交互反馈 */
.sidebar .noUi-handle:hover,
.sidebar .noUi-target .noUi-active {
    transform: scale(1.25);                /* 鼠标移上去或者正在拖拽时，圆点平滑放大 25% */
    background-color: #0dcaf0 !important;  /* 变为实心的青色圆点，交互感极强 */
}

/* 6. 联动调整下方的“设定值”数字文字 */
.sidebar .slider-val-box {
    margin-top: 4px;
}
.sidebar .slider-val-box span {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);       /* “设定值:” 标签用淡淡的半透明白 */
}
.sidebar .slider-val-box span[id$="-v"] {
    color: #0dcaf0 !important;             /* 动态变化的数字用亮青色加粗高亮，和滑块呼应 */
    font-weight: bold;
    font-size: 0.85rem;
    margin-left: 3px;
}