* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 新增：确保元素尺寸包含边框和内边距 */
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%; /* 让 html/body 高度充满视口 */
}

html {
    overflow: hidden; /* 禁止整个页面滚动 */
}

body {
    font-family: "Lato", sans-serif;
    /*transition: background-color .5s;*/
    /*background: url("../img/contain_bg.png");*/
    /*从上到下*/
    background: linear-gradient(to bottom, #0A0A0A, #1D1D22);
    color: #f1f1f1;
    height: 100vh;
    margin: 0;
    overflow: hidden; /* 防止页面滚动 */
}

.container {
    height: 100vh;
    overflow: auto; /* 改为允许容器内部滚动 */
    position: relative; /* 为固定定位元素提供参照 */
}

img {
    width: 100%;
    height: 100%;
}

/*侧边栏 star*/
.expansionField {
    position: fixed; /* 修改为固定定位 */
    width: 62px; /* 明确侧边栏宽度 */
    left: -62px;
    height: 100vh;
    z-index: 1002; /* 确保侧边栏在最上层 */
    background: rgba(124, 124, 124, 0.2);
    /*background-color: #0E0E10;*/
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.flexBtn {
    position: fixed; /* 改为固定定位 */
    left: 0; /* 初始位置与侧边栏对齐 */
    top: 50%;
    z-index: 1000; /* 比侧边栏高一级 */
    cursor: pointer;
}

#flexBtn.hidden {
    display: none; /* 隐藏按钮 */
}

.openbtn, .closebtn {
    position: fixed;
    top: 50%;
    width: 18px;
    height: 48px;
}

.openbtn:hover {
    width: 18px; /* 固定尺寸 */
    height: 48px;
    content: url("../img/nav/sidebar-open-active.png");
}

.closebtn_active {
    content: url("../img/nav/sidebar-close.png");
}

.closebtn_active:hover {
    content: url("../img/nav/sidebar-close-active.png");
}

/*公司logo*/
/*.logodiv{*/
/*    width: 71%;*/
/*    height: 36px;*/
/*    margin: 20px 0 0 8px;*/

/*}*/
.logodiv {
    width: 56%;
    height: 31px;
    margin: 20px 0 0 13px;
    opacity: 0.85;
}

/*侧边栏图标 start*/
.nav_icon {
    margin-top: 28px;
}

.nav_icon_text {
    display: none;
    /*width: 100%;*/
    font-size: 12px;
    color: rgb(255, 255, 255);
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    border-radius: 8px;
    white-space: nowrap;
    position: absolute;
    left: 57px;
}

#eqSetting_text{
    top: 87px;
}

#encBtn_text{
    top: 154px;
}

#voicebtn_text{
    top: 221px;
}
#spAbtn_text{
    top: 286px;
}
#AIhelperbtn_text{
    top:351px;
}


.sidebar-btn {
    padding: 8px 0;
    margin: 8px auto;
    /*margin:auto;*/
    transition: transform 0.1s ease, box-shadow 0.1s ease;

}

.sidebar-btn:hover {
    padding: 8px 0;
    margin: 8px auto;
    /*margin:auto;*/
    background: url("../img/nav/sidebar-btn-bg.png");
    background-size: 98% 98%;
    transform: scale(1.05);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    cursor: pointer;

}
.sidebar-btn:hover .nav_icon_text{
    display: block;
    /*width: 100%;*/
    font-size: 12px;
    color: rgb(255, 255, 255);
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    position: absolute;
    left: 57px;
}

.sidebar-btn:hover #eqSetting_text,.sidebar-btn:hover #encBtn_text,.sidebar-btn:hover #voicebtn_text
,.sidebar-btn:hover #spAbtn_text,:hover #AIhelperbtn_text{
    top: 10px;
}

.sidebar-btn-icon {
    width: 42px;
    height: 42px;
    margin: auto;
    cursor: pointer;
}


/*.shareSetting:hover, .specialAudio:hover, .ENC:hover,*/
/*.EQ:hover, .voice:hover, .AIhelper:hover {*/
/*    width: 40px;*/
/*    height: 40px;*/
/*    margin: auto;*/
/*    cursor: pointer;*/
/*}*/

.sidebar-btn.iconactive{
    background: url("../img/nav/sidebar-btn-bg.png");
    background-size: 100% 100%;
}

.sidebar-btn:hover .sidebar-btn-icon.shareSetting img,
.shareSetting.iconactive .sidebar-btn-icon.shareSetting img {
    content: url("../img/nav/shareSetting_hover.png"); /* 悬停或激活时的图片 */
}

/*.sidebar-btn:hover .EQ img,*/
/*.EQ.iconactive img {*/
/*    content: url("../img/nav/EQ_hover.png"); !* 悬停或激活时的图片 *!*/
/*}*/
.sidebar-btn:hover .sidebar-btn-icon.EQ img,
.sidebar-btn.iconactive .sidebar-btn-icon.EQ img {
    content: url("../img/nav/EQ_hover.png");
}




.sidebar-btn:hover .sidebar-btn-icon.ENC img,
.sidebar-btn.iconactive .sidebar-btn-icon.ENC img {
    content: url("../img/nav/ENC_hover.png");
}


.sidebar-btn:hover .sidebar-btn-icon.voice img,
.sidebar-btn.iconactive .sidebar-btn-icon.voice img {
    content: url("../img/nav/voice_hover.png");
}

.sidebar-btn:hover .sidebar-btn-icon.specialAudio img,
.sidebar-btn.iconactive .sidebar-btn-icon.specialAudio img {
    content: url("../img/nav/specialAudio7.1_hover.png");
}

 .sidebar-btn:hover .sidebar-btn-icon.AIhelper img,
 .sidebar-btn.iconactive .sidebar-btn-icon.AIhelper img {
     content: url("../img/nav/AIhelper_hover.png");
 }

/*侧边栏图标 end*/

/*侧边栏弹窗*/
.popup, .popup_ss {
    position: fixed;
    top: 8%;
    left: -900px; /* 初始隐藏在左侧 */
    width: 800px;
    height: 500px;
    /*transform: translateY(-2%);*/
    background: #0E0E10;
    color: white;
    /*text-align: center;*/
    line-height: 100px;
    border: 1px solid #2F2F37;
    border-radius: 12px;
    transition: left 0.5s ease-in-out, opacity 0.3s ease-in-out; /* 添加 opacity 过渡 */
    will-change: left, opacity; /* 优化性能 */
    z-index: 1001;
    opacity: 0; /* 初始透明度为 0 */
    overflow: hidden; /* 防止全局滚动条出现 */
}


.sp_type_content {
    max-height: 434px;
    overflow-y: scroll;
    padding-right: 10px;


    /*scrollbar-width: thin; !* Firefox 的细滚动条 *!*/
    scrollbar-width: none; /* Firefox 的细滚动条 */
    scrollbar-color: rgb(40, 40, 43) transparent;
}

/* 整个滚动条 */
.sp_type_content::-webkit-scrollbar {
    width: 6px; /* 滚动条宽度 */
}


/* 隐藏上下按钮（三角箭头） */
/*.sp_type_content::-webkit-scrollbar-button {*/
/*    display: none !important;*/
/*    height: 0 !important;*/
/*}*/

/* 上下按钮，直接设置透明或去除 */
.sp_type_content::-webkit-scrollbar-button:start:decrement,
.sp_type_content::-webkit-scrollbar-button:end:increment {
    display: none;
    height: 0;
}

/* 滚动条轨道（背景） */
.sp_type_content::-webkit-scrollbar-track {
    background: transparent; /* 或 rgba(255,255,255,0.05) 更微弱的轨道 */
    border-radius: 10px;
}


/* 滚动条滑块（thumb） */
.sp_type_content::-webkit-scrollbar-thumb {
    background: rgb(40, 40, 43); /* 半透明白色 */
    border-radius: 10px;
    transition: background 0.3s;
}

.sp_type_content::-webkit-scrollbar-thumb:hover {
    background: rgb(40, 40, 43);; /* 鼠标悬停时更明显 */
}

/* 弹窗滑入动画 */
.popup.slide-in {
    left: 70px; /* 弹出后距离左边 70px */
    opacity: 1; /* 完全显示 */
    animation: bounce 0.5s ease-in-out; /* 回弹效果 */
    /*animation: bounce 0.8s ease-in-out; !* 回弹效果 *!*/
}

/* 弹窗滑出动画 */
.popup.slide-out {
    left: -900px; /* 滑出到左侧 */
    opacity: 0; /* 透明度变为 0 */
    transition: left 0.5s ease-in-out, opacity 0.5s ease-in-out; /* 滑出动画 */
    /*transition: left 0.8s ease-in-out, opacity 0.8s ease-in-out; !* 滑出动画 *!*/
}

/* 弹窗渐隐动画 */
.popup.fade-out {
    opacity: 0; /* 透明度变为 0 */
    /*transition: opacity 0.5s ease-in-out; !* 渐隐动画 *!*/
    transition: opacity 10s ease-in-out; /* 渐隐动画 */
}

.spApopupdiv {
    left: -900px; /* 初始隐藏在左侧 */
    width: 800px;
    height: 500px;
}

.ENCpopupdiv {
    left: -500px; /* 初始隐藏在左侧 */
    width: 450px;
    height: 200px;
}

.EQpopupdiv {
    left: -900px; /* 初始隐藏在左侧 */
    width: 800px;
    height: 500px;
}

.voicepopupdiv {
    left: -550px; /* 初始隐藏在左侧 */
    width: 450px;
    height: 354px;
}

@keyframes bounce {
    0% {
        left: -900px;
    }
    60% {
        left: 100px; /* 稍微超过目标位置 */
    }
    80% {
        left: 80px; /* 回弹 */
    }
    100% {
        left: 70px; /* 最终位置 */
    }
}

/*侧边栏弹窗内容样式*/
.sp_header {
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    height: 53px;
}

.sp_header .sp_tit {
    margin-top: -25px;
    font-size: 16px;
}

/*ai降噪样式*/
.ainoise{
    display: flex;
}

.ainoise .layui-input-block {
    margin-left: 20px !important;
}

/*弹出关闭按钮*/
.closeButton {
    display: block;
    width: 22px;
    height: 22px;
}

.closeButton:hover {
    margin-top: 41px;
    content: url("../img/nav/nav_popup_closebtn_hover.png");
}

.sp_type_tit {
    height: 26px;
    margin-top: -28px;
    margin-left: 20px;
    font-size: 14px;
}
/*ai降噪 规格调节*/
.ainoisetit{
    color: rgba(255, 255, 255, 0.7);
}


/*.sp_type_content_radio{*/
/*    !*width: 97%;*!*/
/*    height:40px;*/
/*    padding-left: 20px;*/
/*    margin-left: 12px;*/
/*    margin-top: 45px;*/
/*    border-radius: 8px;*/
/*    background-color: #1C1C21;*/
/*    color: #FFF;*/
/*    opacity: 0.75;*/
/*    line-height: 30px;*/
/*}*/

.sp_type_content_voice {
    display: flex;
    margin-left: 10px;
    margin-top: 17px;
}

/*更多*/
.morebtn {
    margin-left: 22px;
    cursor: pointer;
}

.morebtn.more_disabled {
    cursor: not-allowed;
}

.moretxt {
    margin-top: -32px;
    margin-left: 4px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.moreimg {
    width: 80px;
    height: 80px;
    margin-top: 10px;
    /*border: 1px solid #fff;*/
}


.moreimg img {
    margin-top: -24px;
}

/*魔幻音效 单选框 radio start*/
/* 主体 */
.layui-form-checkbox > .lay-skin-checkcard,
.layui-form-radio > .lay-skin-checkcard {
    /*display: table;*/
    /*display: flex;*/
    padding: 12px;
    white-space: normal;
    border-radius: 10px;
    /*border: 1px solid #e5e5e5;*/
    color: #000;
    /*background-color: #fff;*/
    text-align: center;
}

/*魔幻音效 开*/
.lay-skin-checkcard-avatar.boy_init_on {
    content: url("../img/nav/boy_init_on.png");
}

.lay-skin-checkcard-avatar.girl_init_on {
    content: url("../img/nav/girl_init_on.png");
}

.lay-skin-checkcard-avatar.child_init_on {
    content: url("../img/nav/child_init_on.png");
}

.lay-skin-checkcard-avatar.robot_init_on {
    content: url("../img/nav/robot_init_on.png");
}

.moreimg.more_init_on {
    content: url("../img/nav/more_init_on.png");
}

/* 悬停 */
/*帅气男声*/
.lay-skin-checkcard-avatar.boyhover:hover {
    content: url("../img/nav/boy_hover.png");
}

/*温柔女声*/
.lay-skin-checkcard-avatar.girlhover:hover {
    content: url("../img/nav/girl_hover.png");
}

/*可爱童声*/
.lay-skin-checkcard-avatar.childhover:hover {
    content: url("../img/nav/child_hover.png");
}

/*机器人声*/
.lay-skin-checkcard-avatar.robothover:hover {
    content: url("../img/nav/robot_hover.png");
}

.moreimg.morehover:hover {
    /*border: 1px solid #fff;*/
    content: url("../img/nav/more_hover.png");
}


/* 选中 */
.layui-form-checked > .lay-skin-checkcard,
.layui-form-radioed[lay-skin="none"] > .lay-skin-checkcard {
    /*margin-top: 6px;*/
    background-color: #0E0E10 !important;
    /* box-shadow: 0 0 0 3px rgba(22, 183, 119, 0.08); */
}

/*帅气男生*/
.lay-skin-checkcard-avatar.boychecked {
    content: url("../img/nav/boy_checked.png");
}

/*温柔女声*/
.lay-skin-checkcard-avatar.girlchecked {
    content: url("../img/nav/girl_checked.png");
}

/*可爱童声*/
.lay-skin-checkcard-avatar.childchecked {
    content: url("../img/nav/child_checked.png");
}

/*机器人*/
.lay-skin-checkcard-avatar.robotchecked {
    content: url("../img/nav/robot_checked.png");
}


/* 禁用选中 */
/*帅气男生*/
.lay-skin-checkcard-avatar.boy_disabled_checked {
    content: url("../img/nav/boy_disabled_checked.png");
}

/*温柔女声*/
.lay-skin-checkcard-avatar.girl_disabled_checked {
    content: url("../img/nav/girl_disabled_checked.png");
}

/*可爱童声*/
.lay-skin-checkcard-avatar.child_disabled_checked {
    content: url("../img/nav/child_disabled_checked.png");
}

/*机器人*/
.lay-skin-checkcard-avatar.robot_disabled_checked {
    content: url("../img/nav/robot_disabled_checked.png");
}

/* card 布局 */
.lay-skin-checkcard-avatar {
    /*padding-right: 8px;*/
    width: 80px;
    height: 80px;
}

.lay-skin-checkcard-description {
    font-size: 13px;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.5);
}

.layui-disabled .lay-skin-checkcard-description {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.5) !important;
}

/*魔幻音效 单选框 radio end*/

/*switch 开关 start*/
.layui-form-switch {
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
    /*height: 18px !important;*/
    /*line-height: 22px;*/
    /*min-width: 36px !important;*/
    height: 27px !important;
    line-height: 31px;
    min-width: 48px !important;
    padding: 0 5px !important;
    margin-top: -2px !important;
    border: 1px solid #2F2F37 !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    /*background-color: #1C1C21 !important;*/
    background-color: rgba(73, 73, 73, 1) !important;
    -webkit-transition: .1s linear !important;
    transition: .1s linear !important;
}

/*position: relative !important;*/
/*display: inline-block !important;*/
/*vertical-align: middle !important;*/
/*height: 27px !important;*/
/*line-height: 31px;*/
/*min-width: 48px !important;*/
/*padding: 0 5px !important;*/
/*margin-top: -2px !important;*/
/*margin-left: 10px !important;*/
/*border: 1px solid #2F2F37 !important;*/
/*border-radius: 20px !important;*/
/*cursor: pointer !important;*/
/*box-sizing: border-box !important;*/
/*!*background-color: #1C1C21 !important;*!*/
/*background-color: rgba(73, 73, 73, 1) !important;*/
/*-webkit-transition: .1s linear !important;*/
/*transition: .1s linear !important;*/

.layui-form-onswitch {
    border-color: #376BED !important;
    background-color: #376BED !important;
}

.layui-form-onswitch > i {
    left: 100% !important;
    /*margin-left: -17px !important;*/
    margin-left: -22px !important;
    background-color: #fff !important;
}

.layui-form-switch > i {
    position: absolute !important;
    /*top: 1px !important;*/
    /*width: 15px !important;*/
    /*height: 15px !important;*/
    top: 3px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 20px !important;
    background-color: #d2d2d2;
    -webkit-transition: .1s linear !important;
    transition: .1s linear !important;
}

.layui-form-radio > i {
    margin-right: 8px;
    font-size: 16px !important;
}

.layui-form-radio > * {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px !important;
}

/*switch 开关 end*/


/*一键吃鸡 滑动条 start*/
#total_width .layui-slider-wrap, #diyin .layui-slider-wrap, #depth .layui-slider-wrap, #jiexi .layui-slider-wrap, #space_strength .layui-slider-wrap, #diyinpidian .layui-slider-wrap {
    width: 36px !important;
    height: 36px !important;
    position: absolute !important;
    top: -50px !important;
    -webkit-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    text-align: center !important;
}

#total_width .layui-slider-input, #diyin .layui-slider-input, #depth .layui-slider-input, #jiexi .layui-slider-input, #space_strength .layui-slider-input, #diyinpidian .layui-slider-input {
    width: 70px !important;
    height: 32px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 3px !important;
    font-size: 16px !important;
    line-height: 32px !important;
    position: absolute !important;
    right: 0 !important;
    top: -14px !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.4) !important;
}


#total_width .layui-slider-input-txt input, #diyin .layui-slider-input-txt input,
#depth .layui-slider-input-txt input, #jiexi .layui-slider-input-txt input,
#space_strength .layui-slider-input-txt input, #diyinpidian .layui-slider-input-txt input {
    height: 100% !important;
    border: none !important;
    padding-right: 21px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    color: #fff !important;
}

#total_width .layui-slider-input-btn, #diyin .layui-slider-input-btn, #depth .layui-slider-input-btn, #jiexi .layui-slider-input-btn, #space_strength .layui-slider-input-btn, #diyinpidian .layui-slider-input-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 20px !important;
    height: 100% !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#total_width .layui-slider-input-btn i:first-child, #diyin .layui-slider-input-btn i:first-child,
#depth .layui-slider-input-btn i:first-child, #jiexi .layui-slider-input-btn i:first-child, #space_strength .layui-slider-input-btn i:first-child, #diyinpidian .layui-slider-input-btn i:first-child {
    top: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#total_width, #diyin, #depth, #jiexi, #space_strength, #diyinpidian {
    margin-top: -20px;
}

.diyin, .jiexi, .diyinpidian {
    margin-left: 50px !important;
}


.sp_type_item {
    width: 280px;
    margin: 15px;
    margin-top: -3px;
}

.sp_type_content_div {
    margin-left: 28px;
    display: flex;
    justify-content: flex-start;
    padding-bottom: 30px;
    flex-wrap: wrap;
    flex-direction: row;
}

/*一键吃鸡 end*/

/*通话降噪 滑块*/
/*滑块*/

/* 档位标记样式 */
/* 档位竖条样式 */
/* 竖条容器 - 从12.5%开始到87.5%结束（避开两端） */
/*.slider-ticks {*/
/*    position: absolute;*/
/*    width: 75%; !* 覆盖75%宽度 *!*/
/*    left: 20%; !* 从12.5%位置开始 *!*/
/*    height: 100%;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    pointer-events: none;*/
/*}*/

.slider-ticks .tick {
    width: 2.5px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    /*margin-top: -5px; !* 向上偏移 *!*/
    position: relative;
    top: 2.5px;
}

/* 选择第一个子元素 */
.slider-ticks :nth-child(1) {
    background-color: rgba(0, 0, 0, 0);
    height: 2px;
}

/* 选择最后一个子元素 */
.slider-ticks :nth-last-child(1) {
    background-color: rgba(0, 0, 0, 0);
    height: 2px;
}


/* 档位竖条 */
.slider-ticks {
    position: absolute;
    width: 100%; /* 覆盖全部宽度 */
    height: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

/*.slider-ticks .tick {*/
/*    width: 2px;*/
/*    height: 10px;*/
/*    background: rgba(0,0,0,0.3);*/
/*    margin-top: -5px;*/
/*    position: relative;*/
/*}*/

/* 数字标签位置调整 */
/*.slider-ticks .tick::after {*/
/*    content: attr(data-value);*/
/*    position: absolute;*/
/*    top: 15px;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    font-size: 10px;*/
/*    color: #fff;*/
/*}*/

/* 当前值显示 */
.value-display {
    min-width: 7px;
    text-align: center;
    font-weight: bold;
    font-family: Arial, sans-serif;
    /*margin-top: 10px;*/
    color: #fff;
}

/* 悬停时显示数字 */
.slider-ticks:hover .tick::after {
    font-size: 10px;
}

/*!* 调整滑块轨道高度 *!*/
/*.slider-track {*/
/*    height: 12px; !* 原10px增加2px *!*/
/*    margin: 10px 0; !* 增加上下边距 *!*/
/*}*/
/* 禁用时滑动条的背景色 */
.slider-track[disabled] {
    background-color: #dcdcdc; /* 浅灰色 */
}

/* 禁用时滑块的背景色 */
.slider-thumb[disabled] {
    background-color: #a9a9a9; /* 灰色 */
    border-color: #b0b0b0; /* 灰色边框 */
}

/* 禁用时按钮的颜色 */
.slider-button:disabled {
    background-color: #f0f0f0;
    color: #a0a0a0;
    cursor: not-allowed;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 37px 19px;
    background-color: #1C1C21;
    border-radius: 10px;
    max-width: 500px;
    width: 98%;
    height: 70px;
    margin: 54px auto;
    margin-left: 9px;
}

.slider-button {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #000;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 30px;
    transition: opacity 0.2s;
    line-height: 3px;
}

#decrement {
    padding-bottom: 21px;
    font-size: 73px;
    font-weight: 200;
}

#increment {
    padding-bottom: 3px;
}

.slider-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.slider-track {
    flex: 1;
    height: 15px; /* 加粗轨道高度 */
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px; /* 同步调整圆角 */
    position: relative;
    margin-left: 11px;
}


.slider-progress {
    height: 100%;
    background-color: #376BED;
    border-radius: 8px; /* 同步调整圆角 */
    position: absolute;
    left: 0;
}

.slider-thumb {
    width: 20px; /* 加大滑块尺寸 */
    height: 20px;
    background-color: #376BED;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s;
    border: 3px solid #fff;

}

.slider-thumb:hover {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);

}

.slider-thumb:active {
    cursor: grabbing;
}

.slider-thumb:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.1);
}


.slider-track,
.slider-thumb {
    user-select: none;
}

/*侧边栏 end*/

/*主界面内容样式 start*/
/*头部*/
.layui-header {
    position: relative;
    z-index: 1000;
    height: 60px;
    background: rgba(14, 14, 16, 1) !important;
}

.main_header .layui-nav-child {
    background: rgba(34, 34, 36, 1) !important;
    border: 1px solid rgba(34, 34, 36, 1) !important;
    border-radius: 8px !important;
    text-align: center !important;
    min-width: 50% !important;
    left: 60px !important;
}

.main_header .layui-nav-child a {
    color: rgba(255, 255, 255, 0.6) !important;
}

.main_header .layui-nav-child a:hover {
    background-color: rgba(57, 57, 63, 1) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.layui-nav .layui-nav-item a {
    display: block !important;
    padding: 0 23px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all .3s !important;
    -webkit-transition: all .3s !important;
}

.main_header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    /*margin: 0 23px;*/
    height: 60px;
    background-color: #2D2D36;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.75);
}

.main_header .layui-nav .layui-nav-more {
    position: absolute;
    top: 0;
    right: -19px !important;
    left: auto !important;
    margin-top: 0;
    font-size: 12px;
    cursor: pointer;
    transition: all .2s;
    -webkit-transition: all .2s;
}

/*登录前按钮样式*/
/*注册/登录按钮*/
.register_btn a {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.75);
    /*letter-spacing: 2px;*/
}

.register_btn {
    /*margin-top: 1px;*/
    padding: 8px 18px;
    /*width: 60px;*/
    /*height: 29px;*/
    border-radius: 20px;
    /*margin-right: 12px;*/
    margin: 0 0 0 10px;
    background: #2F2F37;
    text-align: center;
}

.register_btn:hover {
    background-color: rgba(55, 107, 237, 1);
}


/*状态按钮*/
.head_li {
    display: flex;
    align-items: center;
    margin: 0 2px;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: default;
    font-size: 12px !important;
}

.head_li_a:hover {
    border-radius: 20px;
    background-color: rgba(42, 42, 44, 1);
}

.head_li span {
    font-size: 12px !important;
}

.head_icon_img {
    margin-right: 8px;
}

.head_icon_img img {
    width: 15px;
    height: 15px;
}

/* 电池指示器样式 */
.battery-container {
    display: flex;
    align-items: center;
    position: relative;
}

.battery-icon {
    width: 24px;
    height: 12px;
    border: 1px solid #FFFFFF;
    border-radius: 2px;
    margin-right: 5px;
    position: relative;
}

.battery-icon::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 3px;
    width: 2px;
    height: 6px;
    background-color: #FFFFFF;
    border-radius: 0 1px 1px 0;
}

.battery-level {
    height: 100%;
    background-color: #FFFFFF;
    border-radius: 1px;
    width: 55%; /* 初始电量55% */
}

.battery-text {
    font-size: 14px;
}

/* 语言选择器样式 */
.language-selector {
    cursor: pointer;
    position: relative;
}

.language-dropdown {
    position: absolute;
    top: 133%;
    right: -4px;
    background-color: rgba(34, 34, 36, 1);
    border-radius: 8px;
    /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);*/
    display: none;
    min-width: 100px;
    z-index: 1200 !important;
    padding: 5px 0;
}

.current-language {
    margin: 0 5px 0 0;
}

.current-language-down {
    width: 15px;
    height: 15px;
    line-height: 1;
}

.language-dropdown.show {
    display: block;
}

.language-option {
    padding: 8px 15px;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    align-items: center;
    text-align: center;
}

.language-option:hover {
    background-color: rgba(57, 57, 63, 1);
    color: rgba(255, 255, 255, 0.85);
}

.language-option .head_icon_img {
    margin-right: 8px;
}

/*连接方式*/
.link_way_usb {
    content: url("../img/header/link_USB.png");
}

.link_way_24G {
    content: url("../img/header/link_2.4G.png");
}


/*设备区*/
/*.main{*/
/*    width: 500px;*/
/*    height: calc(100vh - 100px); !* 动态计算高度 *!*/
/*    margin: 50px auto;*/
/*    overflow: hidden;*/
/*    position: relative;*/
/*    z-index: 999;*/
/*}*/

/*.main img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: contain; !* 保持图片比例并适应容器 *!*/
/*}*/

/*.main_logodiv{*/
/*    width: 42px;*/
/*    height: 18px;*/
/*    margin: 14px 0 0 12px;*/

/*}*/
/* 新增动画样式 */
/* 修改后的动画样式 */

/* 新增动画样式 */
.main {
    width: 500px;
    height: calc(100vh - 120px);
    margin: 65px auto;
    overflow: hidden;
    position: fixed; /* 改为固定定位 */
    z-index: 999;
    bottom: -100%; /* 初始位置在屏幕下方 */
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}


.main.active {
    bottom: 5px; /* 弹出后位置 */
    opacity: 1; /* 完全显示 */
    animation: bounceUp 0.6s ease-in-out; /* 回弹效果 */
}

.main_none.hide {
    display: none;
}

.main_btn.show {
    display: block;
    /* opacity: 1; !* 目标透明度为1，即完全可见 *!*/
    /* transition: opacity 0.1s ease-in-out;*/
}

.main_btn {
    display: none;
    /*opacity: 0;*/
    /*transition: opacity 0.5s ease-in-out;*/
}


@keyframes bounceUp {
    0% {
        bottom: -100%;
    }
    70% {
        bottom: 50px; /* 超过目标位置 */
    }
    85% {
        bottom: 40px; /* 第一次回弹 */
    }
    92% {
        bottom: 20px; /* 第二次回弹 */
    }
    100% {
        bottom: 10px; /* 最终位置 */
    }
}

.main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*.main_logodiv {*/
/*    width: 42px;*/
/*    height: 18px;*/
/*    margin: 14px 0 0 12px;*/
/*}*/
.main_logodiv {
    width: 40px;
    height: 36px;
    margin: 20px 0 0 10px;
    opacity: 0.85;
}

/*主界面内容样式 end*/


/*底部菜单样式 start */
/*footer {*/
/*    position: fixed;*/
/*    bottom:0;*/
/*    !*left: 240px; !* 默认与侧边栏同宽 *!*!*/
/*    !*right:110px;*!*/
/*    !*width: 72%;*!*/
/*    !*height: 60px;*!*/
/*    margin: 15px 250px;*/
/*    background: rgba(19,19,22,0.7);*/
/*    border: 1px solid rgba(255, 255, 255, 0.15);*/
/*    border-radius: 8px;*/
/*    transition: all 0.3s;*/
/*    z-index: 1100;*/
/*}*/

/*footer {*/
/*    position: fixed;*/
/*    bottom: 0;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    margin: 15px auto;*/
/*    background: rgba(19,19,22,0.7);*/
/*    border: 1px solid rgba(255, 255, 255, 0.15);*/
/*    border-radius: 8px;*/
/*    z-index: 1100;*/

/*    !* 响应式宽度控制 *!*/
/*    width: auto;*/
/*    min-width: 500px; !* 适当的最小宽度 *!*/
/*    max-width: 1200px; !* 最大宽度限制 *!*/
/*    padding: 0 25px;*/

/*    !* 确保在大屏幕上不会过宽 *!*/
/*    box-sizing: border-box;*/
/*}*/
footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 10px auto; /* 减少底部外边距 */
    background: rgba(19, 19, 22, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    z-index: 1100;

    /* 紧凑宽度 */
    width: auto;
    min-width: 480px; /* 稍微减小最小宽度 */
    max-width: 1000px;
    /*padding: 0 15px; !* 减少内边距 *!*/
}


/*footer:hover {*/
/*    bottom: 30px;*/
/*}*/

/*主菜单图标*/
.footer-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    flex-wrap: nowrap; /* 默认不换行 */
    /*gap: 15px; !* 合适的间距 *!*/
    /*overflow-x: auto; !* 水平滚动而不是堆叠 *!*/
    /*overflow-y: hidden;*/
}

.footer-menu-item {
    /*width: 70px;*/
    /*margin: 0px 16px;*/
    cursor: pointer;
    transition: transform 0.2s;
}

.on_icon_box_on {
    background: url(../img/footer/on_icon_bg.png) no-repeat;
    background-size: 100% 100%;
}

.on_icon_box_on:hover {
    background: url(../img/footer/on_icon_bg_hover.png) no-repeat;
    background-size: 100% 100%;
}

.iocn_box_default {
    background: url(../img/footer/footer_icon.png) no-repeat;
    background-size: 100% 100%;
}

.iocn_box_default:hover {
    background: url(../img/footer/footer_icon_hover.png) no-repeat;
    background-size: 100% 100%;
}

.iocn_box_selected {
    background: url(../img/footer/on_icon_bg.png) no-repeat;
    background-size: 100% 100%;
}

.iocn_box_selected:hover {
    background: url(../img/footer/on_icon_bg_hover.png) no-repeat;
    background-size: 100% 100%;
}


.iocn_box {
    margin-left: 6px;
    padding-top: 12px;
}

.on_icon_box {
    padding: 12px;
}

.iocn_box, .on_icon_box {
    width: 96px;
    height: 72px;
    padding: 12px 10px;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    font-size: 10px;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.2s;
}

.iocn_box a, .on_icon_box a {
    display: block;
    margin: auto;
    width: 28px;
    height: 28px;
    margin-bottom: 5px;
}

.on_icon_box .footer_kaiguan {
    width: 30px;
    height: 30px;
    margin-top: 10px;
}

/*.iocn_box:hover{*/
/*    background: url(../img/footer/footer_icon_hover.png) no-repeat;*/
/*    background-size: 100% 100%;*/
/*}*/


.footer_voice, .footer_voice_select {
    width: 50px;
}

/*喇叭静音效果*/
.footer_voice:hover {
    content: url("../img/footer/footer_voice_hover.png");
}

.footer_voice_select {
    content: url("../img/footer/footer_voice_off.png");
}

.footer_voice_select:hover {
    content: url("../img/footer/footer_voice_hover_off.png");
}

/*麦克风静音效果*/
/* 麦克风容器样式 */
.mic-container {
    position: relative;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50px;
    padding: 10px;
    cursor: pointer; /* 设置为可点击状态 */
}

/* 能量条外框样式 */
.energy-bar {
    position: absolute;
    left: 23px;
    top: 14.6px;
    width: 6px;
    height: 13.2px;
    background-color: transparent;
    border-radius: 3px;
    overflow: hidden;
    z-index: 0;
}

/* 能量条填充样式 */
.energy-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #376BED; /* 填充颜色为蓝色 */
}

/* 麦克风外框图像样式 */
.mic-outline {
    /*margin: -5px auto 0;*/
    width: 25px;
    height: 25px;
    margin: 2px 3.5px;
}

.mic-container:hover {
    position: relative;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.09);
    border-radius: 50px;
    padding: 10px;
    cursor: pointer; /* 设置为可点击状态 */
}

.mic-container.mic-container_select {
    position: relative;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50px;
    padding: 10px;
    cursor: pointer; /* 设置为可点击状态 */
}

.mic-container.mic-container_select_hover:hover {
    position: relative;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.09);
    border-radius: 50px;
    padding: 10px;
    cursor: pointer; /* 设置为可点击状态 */
}

.footer_mic:hover {
    content: url("../img/footer/footer_mic_hover.png");
}


.footer_mic_select {
    content: url("../img/footer/footer_mic_off.png");
}

.footer_mic_select:hover {
    content: url("../img/footer/footer_mic_hover_off.png");
}

/* 确保非静音状态的悬浮样式 */
.mic-container:hover .footer_mic {
    content: url("../img/footer/footer_mic_hover.png");
}

/* 静音状态的悬浮样式 */
.mic-container.mic-container_select:hover .footer_mic_select {
    content: url("../img/footer/footer_mic_hover_off.png");
    position: relative;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.09);
    border-radius: 50px;
    padding: 10px;
    cursor: pointer; /* 设置为可点击状态 */
}

.voice-container {
    margin: 0 25px;
}

.mic-container {
    margin: 0 10px;
}

/*#footer_mic{*/
/*    width: 120px;*/
/*    margin-left: 12px;*/
/*}*/

/*ai降噪、变声开关*/
/*.footer_ENCSwitch,.footer_bianshengSwitch{*/
/*    width: 49px;*/
/*    height: 26px;*/
/*    !*margin-left: -5px;*!*/
/*}*/
/*主菜单-ai降噪选中效果*/
.footer_ENCSwitch_on {
    content: url("../img/footer/footer_ENCSwitch_on.png");
}

/*主菜单-魔幻音效选中效果*/
.footer_bianshengSwitch_on {
    content: url("../img/footer/footer_bianshengSwitch_on.png");
}

/*主菜单-RGB模式选中效果*/
.footer_RGB_on {
    content: url("../img/footer/footer_RGB_on.png");
}

/*主菜单-EQ模式选中效果*/
.footer_EQ_on {
    content: url("../img/footer/footer_EQ_on.png");
}


/*#noiseValue,#voiceSwitch_value{*/
/*    color: rgba(255, 255, 255, 0.5);*/
/*}*/

/*抗干扰*/
.footer_kangganrao,.footer_kangganrao:hover,.footer_kangganrao_select,.footer_kangganrao_select:hover{
    /*margin-left: 20px;*/
    display: flex;
    /*width: 60px;*/
    /*height: 22px;*/
    padding: 2px 9px;
    border-radius: 4px;
    font-family: "Noto Sans SC";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.footer_kangganrao{
    border: 1.3px solid rgba(169, 169, 171, 1);
    color: rgba(169, 169, 171, 1);
}

.footer_kangganrao:hover {
    border: 1.3px solid rgba(207, 207, 207, 1);
    color: rgba(207, 207, 207, 1);
}

.footer_kangganrao_select {
    border: 1.3px solid rgba(55, 107, 237, 1);
    color: rgba(55, 107, 237, 1);
}

.footer_kangganrao_select:hover {
    border: 1.3px solid rgba(44, 86, 190, 1);
    color: rgba(44, 86, 190, 1);
}
.checkEnlish,.footer_kangganrao:hover.checkEnlish,
.footer_kangganrao_select.checkEnlish,.footer_kangganrao_select:hover.checkEnlish{
    display: table-caption;
    white-space: break-spaces;
    text-align: center;
}

/*一键吃鸡*/
/*.footer_xuni7,.footer_xuni7_select{*/
/*    width: 70px;*/
/*}*/
.footer_xuni7,.footer_xuni7:hover,.footer_xuni7_select,.footer_xuni7_select:hover{
    display: grid;
    /*margin-left: 45px;*/
    /*margin-right: 10px;*/
    padding:10px;
    /*width: 60px;*/
    height: 65px;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.chiji_text,.chiji_text_youhua{
    font-family: "Noto Sans SC";
    letter-spacing: 1px;
}
.chiji_text{
    color: rgba(169, 169, 171, 1);
    font-size: 15px;
    font-weight: 700;
    line-height: 16px;
}
.chiji_text_youhua{
    color: rgba(169, 169, 171, 0.75);
    font-size: 7px;
    font-weight: 400;
    line-height: 30px;
    margin-top: -4px;
}

.footer_xuni7:hover {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.09);
}

.footer_xuni7:hover .chiji_text{
    color: rgba(207, 207, 207, 1);
}
.footer_xuni7:hover .chiji_text_youhua{
    color: rgba(207, 207, 207, 0.75);
}

.footer_xuni7_select {
    border-radius: 8px;
    background: rgba(55, 107, 237, 1);
}
.footer_xuni7_select .chiji_text{
    color:rgba(205, 218, 250, 1);
}
.footer_xuni7_select .chiji_text_youhua{
    color: rgba(205, 218, 250, 0.75);
}

.footer_xuni7_select:hover {
    border-radius: 8px;
    background:rgba(44, 86, 190, 1);
}
.footer_xuni7_select:hover .chiji_text{
    color: rgba(205, 218, 250, 1);
}
.footer_xuni7_select:hover .chiji_text_youhua{
    color: rgba(205, 218, 250, 0.75);
}

/*主菜单浮窗*/
.footer-menu-containe, .on_container, .mic-container {
    position: relative;
}

.f-m-popup-window.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.f-m-popup-window ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.f-m-popup-window ul li {
    width: 100%;
    padding: 8px 0px;
    margin: 5px 0px;
    display: block;
    cursor: pointer;
    transition: background-color 0.3s;
}

.f-m-popup-window ul li:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.f-m-popup-window ul li.choose {
    background-color: #376BED;
    color: #fff;
}

/*喇叭音量条 start*/
#footer_voice {

}

/* 统一设置所有悬浮窗的位置 */
.f-m-popup-window, .voice-popup-window, .mic-popup-window {
    position: absolute;
    bottom: 100%;
    left: 52%;
    transform: translateX(-50%);
    margin-bottom: 14px; /* 调整与按钮的距离 */
    /* 其他样式保持不变 */
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 4px;
    width: 88px;
    opacity: 1;
    visibility: hidden;
    transition: opacity 0.4s ease;
    z-index: 10;
    font-size: 12px;
    pointer-events: none;
}

/* 音量悬浮窗特殊宽度 */
.voice-popup-window, .mic-popup-window {
    width: 55px;
    border-radius: 13px;
    padding: 18px 25px;
    margin-bottom: 22px;
}

/* 显示状态 */
.f-m-popup-window.show, .voice-popup-window.show, .mic-popup-window.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 调整音量滑块容器的位置 */
.voice-popup-window ul, .mic-popup-window ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* 确保所有按钮容器使用相同的定位方式 */
.footer-menu-container, .on_container {
    position: relative;
    display: inline-block; /* 确保容器大小只包含内容 */
    cursor: pointer;

    white-space: nowrap;
    flex-shrink: 0; /* 防止收缩 */

}

.voice-popup-window ul .layui-slider-vertical, .mic-popup-window ul .layui-slider-vertical {
    width: 6px !important;
    margin-left: 0 !important;
    background-color: rgba(35, 35, 41, 1) !important;
}

.voice-popup-window ul .layui-slider-vertical .layui-slider-bar, .mic-popup-window ul .layui-slider-vertical .layui-slider-bar {
    width: 6px !important;
}

.voice-popup-window ul .layui-slider-wrap-btn, .mic-popup-window ul .layui-slider-wrap-btn {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #376BED !important;
    display: inline-block !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    transition: .1s !important;
    margin-left: 2px !important;
}

/* 修改滑块按钮的过渡，在悬浮窗隐藏时立即消失 */
.voice-popup-window:not(.show) ul .layui-slider-wrap-btn,
.mic-popup-window:not(.show) ul .layui-slider-wrap-btn {
    transition: none !important;
}

/* 或者更精确地控制滑块在隐藏状态下的行为 */
.voice-popup-window, .mic-popup-window {
    /* 确保悬浮窗隐藏时所有内容都立即隐藏 */
    pointer-events: none;
}

.voice-popup-window.show, .mic-popup-window.show {
    pointer-events: auto;
}

/* 修改滑块按钮的过渡，只在显示时有动画 */
.voice-popup-window.show ul .layui-slider-wrap-btn,
.mic-popup-window.show ul .layui-slider-wrap-btn {
    transition: .1s !important;
}

.rang-value {
    width: 29px;
    position: relative;
    top: 10px;
    left: -11px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 10px;
}


/*喇叭音量条 end*/

/*轻提示*/
.layui-layer {
    /*width: 377px !important;*/
    /*background-color:rgba(85, 91, 97, 0.8) !important;*/
    background-color: rgba(40, 40, 43, 1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(47, 47, 55, 1);
    padding: 10px 0px !important;
}


.layui-layer.custom-small-style {
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    background-color: rgba(85, 91, 97, 0.8) !important;
    border-radius: 4px !important;
    backdrop-filter: blur(4px) !important;
}

.layui-layer.custom-eqloginTips-style {
    min-width: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(28, 28, 28, 0.8) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(20px) !important;
}

.eq_login {
    color: rgba(95, 137, 241, 1);
    margin-left: 5px;
}

.eq_login:hover {
    text-decoration: underline;
}

.layui-layer-title {
    color: #fff !important;
}

.layui-layer-dialog .layui-layer-content .layui-layer-face {
    font-size: 26px !important;
}

/*取消*/
.layui-layer-btn0 {
    height: 35px !important;
    line-height: 35px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(217, 217, 217, 0.4) !important;
    background-color: #28282b !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/*确定*/
.layui-layer-btn1 {
    height: 35px !important;
    line-height: 35px !important;
    border-radius: 4px !important;
    background-color: #376BED !important;
    border: 1px solid #376BED !important;
    color: #ffffff !important;

}

/*关机弹窗*/
.layui-icon-tips:before {
    content: "\e702" !important;
    color: #376BED !important;
    font-size: 24px !important;
    margin-left: 6px !important;
    margin-top: 2px !important;
}

/*底部菜单样式 end */

/*遮罩--启动页 start*/
.start_content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #0A0A0A;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 确保遮罩层在最顶层 */
    display: flex; /* 添加此行，确保子元素居中 */
}

.start_tips {
    text-align: center;
}


/*.start_main{*/
/*    margin-top:170px ;*/
/*}*/
#start_main {
    width: 680px;
    height: 280px;
    margin: 3% auto;
}

.link_text {
    text-align: center;
    /*margin-top: -44px;*/
    margin-top: 44px;
    margin-bottom: 30px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.55);
    position: relative;
    z-index: 1000;
}

.link_status_tips {
    display: inline-block; /* 使宽度适应内容 */
    padding: 12px 18px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    background: rgba(85, 91, 97, 0.80); /* 背景色 */
    backdrop-filter: blur(4px);
    color: rgba(255, 255, 255, 0.85); /* 文字颜色 */
    text-align: center; /* 文字居中 */
    max-width: 90%; /* 防止过长内容溢出屏幕 */
    width: auto; /* 或者可以给一个固定宽度, 如 300px */
    /*margin-top: 20px; !* 如果需要距上方有些间距 *!*/
    /*width: 22%;*/
    margin: 40px auto;
    white-space: nowrap; /* 防止文字换行 */
}

/* 加载状态动画 */
.loading-indicator {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    vertical-align: middle;
    margin-right: 8px;
}

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


.start_link_tips {
    display: inline-block;
    width: auto !important;
    min-width: 156px;
    padding: 12px 24px;
    height: 50px;
    margin: auto;
    cursor: pointer;
    margin-top: -37px;
    color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 8px;
    line-height: 20px;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
}

#startbtn_img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

#startbtn_text {
    margin-left: 8px;
    letter-spacing: 2px;
    vertical-align: middle;
}

.start_link_tips:hover {
    background: rgba(55, 107, 237, 1);
    border: 1px solid rgba(55, 107, 237, 1);
}

/* 确保加载动画容器居中 */
.start_link_tips .sk-circle {
    margin: 0 auto;
}


.start_tips {
    display: none;
}

/*加载动画 start*/
.sk-circle {
    margin: 100px auto;
    width: 40px;
    height: 40px;
    position: relative;
}

.sk-circle .sk-child {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.sk-circle .sk-child:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #333;
    border-radius: 100%;
    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}

.sk-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

.sk-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}

.sk-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sk-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

.sk-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}

.sk-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.sk-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
}

.sk-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
}

.sk-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.sk-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
}

.sk-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}

.sk-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.sk-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.sk-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.sk-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.sk-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.sk-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.sk-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.sk-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.sk-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.sk-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.sk-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/*加载动画 end*/

/*.start_top_logo,.start_middle,.start_link_btn{*/
/*    margin: auto;*/
/*    text-align: center;*/
/*}*/
/*.start_top_logo{*/
/*    width: 400px;*/
/*    height: 63px;*/
/*}*/
/*.start_middle{*/
/*    margin-top: 86px;*/
/*}*/
/*.start_link_btn{*/
/*    width: 108px;*/
/*    height: 37px;*/
/*    border-radius: 4px;*/
/*    border: 1px solid #2F2F37;*/
/*    background: rgba(40, 40, 43, 0.85);*/
/*    color: #FFF;*/
/*    font-family: "Noto Sans SC";*/
/*    font-size: 14px;*/
/*    font-style: normal;*/
/*    font-weight: 400;*/
/*    padding-top:6px;*/
/*    letter-spacing: 0.28px;*/
/*    margin-left: 10px;*/
/*    cursor: pointer;*/
/*}*/

/*.start_link_tips{*/
/*    font-size: 16px;*/
/*    color: rgba(255, 255, 255, 0.75);*/
/*    margin-top: 23px;*/
/*}*/
/*.sm_data{*/
/*    display: inline-flex;*/
/*}*/

/*#devices{*/
/*    width: 300px;*/
/*    border-radius: 4px;*/
/*    border: 1px solid #2F2F37;*/
/*    !*background: #131316;*!*/
/*    color: #fff;*/
/*    !*appearance:none;*!*/
/*    !*-moz-appearance:none;*!*/
/*    !*-webkit-appearance:none;*!*/
/*    background: url("../img/startpage_select_down.png") no-repeat scroll right center transparent;*/
/*    background-position-x: 266px;*/
/*    line-height: 24px;*/
/*}*/

/* 自定义箭头 */
/*.layui-form-select .layui-edge {*/
/*    right: 15px;*/
/*    border-top-color: #FF5722; !* 橙色箭头 *!*/
/*}*/
/*遮罩--启动页 end*/

/*侧边栏 分享库、一键吃鸡、eq设置页面 start*/
.main-content {
    flex: 1;
    height: 100vh;
    margin: 0;
    padding: 0;
    /*background-color: #ecf0f1;*/
}

/*.content-section {*/
/*    padding: 20px;*/
/*    background-color: white;*/
/*    border-radius: 5px;*/
/*    box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/
/*}*/

/*eq设置 start*/
/*.eq_container{*/
/*    background: rgba(40, 40, 43, 0.85);*/
/*    margin-left: 62px;*/
/*    height: 100vh;*/
/*}*/
.eq_container {
    flex: 1; /* 占满剩余宽度 */
    background: rgba(40, 40, 43, 0.85);
    margin-left: 62px;
    height: 100%; /* 改为 100%，继承父元素 #chijiPage 的高度 */
    box-sizing: border-box; /* 避免 padding/border 导致溢出 */
    overflow: auto; /* 内容过多时内部滚动，不影响整体铺满 */
}

.eq_tit {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 17px 22px;
    display: flex;
}

.eq_content {

}

/*游戏模式，音乐模式，电影模式选项卡*/
.custom-tab {
    margin: 15px 0;
}

.custom-tab .layui-tab-title {
    border: none !important;
    /*text-align: center;*/
    padding: 0;
    margin: 0 0 15px 0;
    font-size: 0; /* 消除inline-block间隙 */
}

.custom-tab .layui-tab-title li {
    display: inline-block;
    padding: 0 25px;
    height: 40px;
    line-height: 40px;
    color: rgba(255, 255, 255, 0.6);
    position: relative;
    margin: 0;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 16px; /* 恢复字体大小 */
}

.custom-tab .layui-tab-title li:hover {
    color: #fff;
}

.custom-tab .layui-tab-title .layui-this {
    color: #fff;
}

/* 最终修正的下划线样式 */
.custom-tab .layui-tab-title .layui-this:after {
    content: "" !important;
    position: absolute !important;
    top: 118% !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 23px !important; /* 固定短横长度 */
    height: 3px !important;
    border-radius: 8px !important;
    background: #fff !important;
    transform: translateX(-50%) !important; /* 精准居中 */
}

.custom-tab .layui-tab .layui-tab-title:after {
    border-style: none;
}

.custom-tab .layui-tab-content {
    padding: 10px 20px;
    border: none !important;
    color: #666;
    text-align: center;
}

/*游戏模式二级分类选项卡*/
.tab-container, .mstab-container, .mvtab-container, .cjtab-container {
    /*max-width: 1000px;*/
    margin: 0 auto;
    /*background: white;*/
    /*border-radius: 8px;*/
    /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
    /*overflow: hidden;*/
}

.cjtab-container {
    padding: 10px 30px;
}

.cjmark {
    margin: 18px 8px;
    display: none;
}

.markone {
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
}

.marktwo {
    color: rgba(255, 255, 255, 0.50);
    font-size: 16px;
    margin-top: 5px;
}

.tab-header, .mstab-header, .mvtab-header, .cjtab-header {
    display: flex;
    flex-wrap: wrap;
    /*border-bottom: 1px solid #ddd;*/
    /*background-color: #f1f1f1;*/
    padding: 5px 5px 0;
    position: relative;
}

.tab-item, .mstab-item, .mvtab-item, .cjtab-item {
    padding: 8px 15px;
    margin-right: 10px;
    margin-bottom: 5px;
    cursor: pointer;
    border: 1px solid rgba(51, 51, 53, 1);
    border-radius: 4px;
    background: rgba(51, 51, 53, 1);
    position: relative;
    user-select: none;
    transition: all 0.2s;
    color: #fff;
}

.tab-item.editable, .mstab-item.mseditable, .mvtab-item.mveditable, .cjtab-item.cjeditable {
    border: 1px solid #5B5B5C;
    background: #242426;
}

.tab-item:hover, .mstab-item:hover, .mvtab-item:hover, .cjtab-item:hover {
    background-color: #2E374E;
    border: 1px solid #376BED;
    color: #376BED;
    padding: 8px 15px;
    margin-right: 10px;
    margin-bottom: 5px;
}

.tab-item.active, .mstab-item.active, .mvtab-item.active, .cjtab-item.active {
    border: 1px solid #376BED;
    background-color: #376BED;
    color: #fff;
    padding: 8px 15px;
    margin-right: 10px;
    margin-bottom: 5px;
}

.tab-item.active.disabled, .mstab-item.active.disabled, .mvtab-item.active.disabled, .cjtab-item.active.disabled {
    border: 1px solid rgba(115, 151, 242, 1);
    background-color: rgba(115, 151, 242, 1);
    color: #fff;
    padding: 8px 15px;
    margin-right: 10px;
    margin-bottom: 5px;
}

.tab-item.fixed, .mstab-item.fixed, .mvtab-item.fixed, .cjtab-item.fixed {
    background-color: #333335;
    border: 1px solid #333335;
    padding: 8px 15px;
    margin-right: 10px;
    margin-bottom: 5px;
}

.tab-item.fixed:hover, .mstab-item.fixed:hover, .mvtab-item.fixed:hover, .cjtab-item.fixed:hover {
    background-color: #2E374E;
    border: 1px solid #376BED;
    color: #376BED;
    padding: 8px 15px;
    margin-right: 10px;
    margin-bottom: 5px;
}


.tab-item.fixed.active, .mstab-item.fixed.active, .mvtab-item.fixed.active, .cjtab-item.fixed.active {
    border: 1px solid #376BED;
    background-color: #376BED;
    color: #fff;
    padding: 8px 15px;
    margin-right: 10px;
    margin-bottom: 5px;
}

.tab-item.fixed.active:hover {
    /*background-color: #1e88e5;*/
}

.add-tab, .msadd-tab, .mvadd-tab, .cjadd-tab {
    padding: 8px 15px;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #5B5B5C;
    background: #242426;
    color: #FFF;
    transition: all 0.2s;
}

.add-tab:hover, .msadd-tab:hover, .mvadd-tab:hover, .cjadd-tab:hover {
    background-color: #d0d0d0;
    color: #000;
}

.tab-content, .mstab-content, .mvtab-content, .cjtab-content {
    padding: 2px;
    margin-top: 10px;
    /*min-height: 200px;*/
}

.cjtab-content {
    margin-top: 10px;
}

.tab-pane, .mstab-pane, .mvtab-pane {
    display: none;
    animation: fadeIn 0.3s ease;
    width: 100%;
    background: #161616;
    border-radius: 8px;
}

.cjtab-pane {
    display: none;
    animation: fadeIn 0.3s ease;
    width: 100%;
    background: #fff;
    border-radius: 8px;
}

.tab-pane.active, .mstab-pane.active, .mvtab-pane.active, .cjtab-pane.active {
    display: block;
}

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

.edit-input, .msedit-input, .mvedit-input, .cjedit-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 8px 15px;
    background-color: #fff;
    border-radius: 4px;
    outline: 2px solid #376BED;
}

.cjtab-item.cjeditable {
    border: 1px dashed #666;
}

.cjtab-rename-input {
    width: 100%;
    height: 100%;
    background: #fff;
    border: none;
    color: #000;
    outline: none;
}

.slider-unit.fixed > :not(:first-child), .msslider-unit.fixed > :not(:first-child),
.mvslider-unit.fixed > :not(:first-child), .cjslider-unit.fixed > :not(:first-child) {
    margin-top: 28px;
}

.slider-unit.fixed, .msslider-unit.fixed, .mvslider-unit.fixed, .cjslider-unit.fixed {
    margin-top: 41px;
}

.gains, .msgains, .mvgains {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    display: flex;
}

.gains span, .msgains span, .mvgains span {
    margin-left: 15px;
    color: rgba(255, 255, 255, 0.25);
}

.eq-container, .mseq-container, .mveq-container, .cjeq-container {
    display: flex;
    justify-content: center;
    gap: 25px;
    padding: 30px 0;
}


/* 每个独立的滑块单元 */
.slider-unit, .msslider-unit, .mvslider-unit {
    display: flex;
    flex-direction: column;
    align-items: end;
    width: 40px;
}

/* 滑块容器 */
.slider-container, .msslider-container, .mvslider-container {
    /*width: 30px;*/
    display: flex;
    justify-content: center;
}

.eq-slider, .mseq-slider, .mveq-slider, .mveq-slider {
    height: 200px;
    width: 30px;
    position: relative;
}

/* 滑轨样式 */
.eq-slider .layui-slider-vertical, .mseq-slider .layui-slider-vertical, .mveq-slider .layui-slider-vertical {
    background: #2e2e2e;
    border-radius: 3px;
    width: 6px !important;
    margin: 0 auto;
}

/* 蓝色有效值条 */
.eq-slider .layui-slider-bar, .mseq-slider .layui-slider-bar, .mveq-slider .layui-slider-bar {
    background-color: #3A8BFF !important;
    width: 6px !important;
    left: 0 !important;
}

/* 滑块点样式 */
.eq-slider .layui-slider-wrap-btn, .mseq-slider .layui-slider-wrap-btn, .mveq-slider .layui-slider-wrap-btn {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #376BED !important;
    margin-left: 2px !important;
}

/* 加减按钮样式 */
.slider-control-btn, .msslider-control-btn, .mvslider-control-btn {
    /*width: 30px;*/
    /*height: 30px;*/
    /*border-radius: 4px;*/
    /*background: rgba(0, 0, 0, 0.4);*/
    /*color: #fff;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*cursor: pointer;*/
    /*margin: 10px 0;*/
    /*font-size: 16px;*/
    /*transition: all 0.3s;*/
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(39, 39, 39, 1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 10px 0;
    font-size: 24px;
    transition: all 0.3s;
}

/*加号*/
.plus-btn {
    padding-bottom: 2px;
}

/*减号*/
.minus-btn {
    font-size: 43px;
    padding-bottom: 12px;
}

.slider-control-btn:hover, .msslider-control-btn:hover, .mvslider-control-btn:hover {
    background: #444;
}

.slider-control-btn:active, .msslider-control-btn:active, .mvslider-control-btn:active {
    background: #555;
}


.frequency-point, .msfrequency-point, .mvfrequency-point {
    /*margin-top: 10px;*/
    padding: 4px 8px;
    /*background: rgba(255, 255, 255, 0.1);*/
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    /*color: #fff;*/
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s;
    /*width: 100%;*/
}

.frequency-point:hover, .msfrequency-point:hover, .mvfrequency-point:hover {
    background: rgba(255, 255, 255, 0.2);
}

.frequency-input, .msfrequency-input, .mvfrequency-input {
    width: 50px;
    padding: 4px;
    text-align: center;
    border: 1px solid #376BED;
    border-radius: 4px;
    background: #161616;
    color: #fff;
    outline: none;
    font-size: 12px;
}

.eq-data-display, .mseq-data-display, .mveq-data-display {
    background: #1e1e1e;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    color: #ddd;
    font-family: monospace;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
}

/* 控制按钮容器样式 */
.controls-container, .mscontrols-container, .mvcontrols-container, .cjcontrols-container, .chiji-control-buttons {
    display: flex;
    gap: 10px;
    margin: 5px 0;
    padding: 10px;
    /*background: rgba(0, 0, 0, 0.1);*/
    border-radius: 4px;
    justify-content: flex-end;
}

.control-btn, .mscontrol-btn, .mvcontrol-btn, .cjcontrol-btn, .chiji-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.control-btn:hover, .mscontrol-btn:hover, .mvcontrol-btn:hover, .cjcontrol-btn:hover, .chiji-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* 不同功能按钮颜色  */

/*删除按钮*/
.delete-btn, .msdelete-btn, .mvdelete-btn, .cjdelete-btn {
    padding: 9px 24px;
    letter-spacing: 2px;
    background-color: rgba(255, 71, 71, 0.1);
    border: 1px solid rgba(255, 71, 71, 0.2);
    color: rgba(255, 71, 71, 0.7);
}

/*重置按钮*/
.reset-btn, .msreset-btn, .mvreset-btn, .cjreset-btn {
    /*padding: 9px 24px;*/
    /*letter-spacing: 2px;*/
    /*background-color: #69c0ff;*/
    /*color: white;*/
    padding: 9px 24px;
    letter-spacing: 2px;
    background-color: rgba(73, 73, 73, 0);
    border: 1px solid rgba(73, 73, 73, 1);
    color: rgba(255, 255, 255, 0.7);
}

/*置顶按钮*/
.pin-btn, .mspin-btn, .mvpin-btn, .cjpin-btn {
    padding: 9px 24px;
    letter-spacing: 2px;
    background-color: rgba(56, 56, 56, 1);
    border: 1px solid rgba(73, 73, 73, 1);
    color: rgba(255, 255, 255, 0.7);
}

/*另存为按钮*/
.saveas-btn, .mssaveas-btn, .mvsaveas-btn, .cjsaveas-btn {
    padding: 9px 24px;
    letter-spacing: 2px;
    background-color: rgba(56, 56, 56, 1);
    border: 1px solid rgba(73, 73, 73, 1);
    color: rgba(255, 255, 255, 0.7);
}

/* 默认标签的特殊样式 */
.tab-item.default, .mstab-item.default, .mvtab-item.default, .cjtab-item.default {
    content: "★";
    color: #ffcc00;
    font-weight: bold;
}

/* 新增CSS样式（需要添加到样式表中）*/
/* 在CSS文件中添加以下样式 */

.tab-item.disabled {
    /*opacity: 0.6;*/
    cursor: not-allowed;
    pointer-events: none;
}

.slider-unit.slider-disabled, .msslider-unit.slider-disabled {
    opacity: 0.7;
}

.slider-control-btn.disabled, .msslider-control-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.slider-disabled {
    opacity: 0.6;
}

/* EQ关闭状态下选中标签的样式 - 根据第二张图的颜色设置 */
.tab-item.eq-disabled-active {
    /* 请根据第二张图的实际颜色调整以下值 */
    background-color: #4a5568; /* 示例：深灰色背景 */
    color: #e2e8f0; /* 示例：浅灰色文字 */
    border-color: #6b7280; /* 示例：中灰色边框 */
}

/* 禁用状态下的通用样式 */
.tab-item.disabled {
    cursor: not-allowed;
    pointer-events: none;
}

/* 确保激活状态样式不会干扰 */
.tab-item.active {
    /* 正常激活状态的样式 */
    background-color: #3b82f6;
    color: white;
    border-color: #2563eb;
}

.closePageButton {
    display: block;
    width: 30px;
    height: 30px;
}

.eqbtn_tit {
    width: 95%;
}


/*eq设置 end*/

/*一键吃鸡 start*/
.chijitit .layui-form-switch {
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
    height: 27px !important;
    line-height: 31px;
    min-width: 48px !important;
    padding: 0 5px !important;
    margin-top: -2px !important;
    margin-left: 10px !important;
    border: 1px solid #2F2F37 !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    /*background-color: #1C1C21 !important;*/
    background-color: rgba(73, 73, 73, 1) !important;
    -webkit-transition: .1s linear !important;
    transition: .1s linear !important;
}

.chijitit .layui-form-onswitch {
    border-color: #376BED !important;
    background-color: #376BED !important;
}

.chijitit .layui-form-onswitch > i {
    left: 100% !important;
    margin-left: -22px !important;
    background-color: #fff !important;
}

.chijitit .layui-form-switch > i {
    position: absolute !important;
    top: 3px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 20px !important;
    background-color: #d2d2d2;
    -webkit-transition: .1s linear !important;
    transition: .1s linear !important;
}

.chijitab_content {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between; !* 或者使用 space-around *!*/
    gap: 15px; /* 可选，用于增加项目之间的间距 */
}

.chijitab-item {
    display: flex;
    width: calc(50% - 20px); /* 减去gap的一半，如果使用了gap */
    background: #161616;
    padding: 22px 25px;
    border-radius: 8px;
    box-sizing: border-box; /* 确保padding不会增加元素的总宽度 */
}

.chijitab-tit {
    width: 25%;
    font-size: 16px;
    text-align: center;
}

.txt-box-word {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin-left: -6px;
    color: rgba(255, 255, 255, 0.45);
    text-align: right;
    font-size: 12px;
    letter-spacing: 2px;
}

.chijitab-txt {
    margin-left: 30px;
}

.voice-desc {
    color: rgba(255, 255, 255, 0.50);
    font-size: 13px;
    font-weight: 400;
}

.seconddesc {
    margin-top: 10px;
}

/* 右键菜单样式 */
.context-menu {
    position: fixed;
    z-index: 1000;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    min-width: 120px;
    color: #0A0A0A;
}

.context-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
}

.context-menu-item:hover {
    background: #f5f5f5;
}

/* 标签编辑输入框 */
.tab-edit-input {
    position: absolute;
    width: 80px;
    height: 24px;
    border: 1px solid #1890ff;
    border-radius: 2px;
    padding: 0 5px;
    font-size: 12px;
    outline: none;
    box-shadow: 0 0 3px rgba(24, 144, 255, 0.3);
}

/* 自定义标签视觉区分 */
.tab-item.custom {
    color: #fff;
    /*font-weight: bold;*/
}

/*.tab-name-input {*/
/*    width: 80px;*/
/*    height: 20px;*/
/*    border: 1px solid #ddd;*/
/*    padding: 2px 5px;*/
/*    font-size: 12px;*/
/*}*/

/*#chijiPage{*/
/*    height: 100vh;*/
/*}*/
#chijiPage {
    height: 100vh;
    overflow: hidden; /* 可选：禁止内部滚动，确保完全铺满 */
}

#spaceDepth {
    width: 81%;
}

/*#spaceDepth .layui-slider {*/
/*    height: 4px !important;*/
/*    background: #444 !important;*/
/*    border-radius: 3px !important;*/
/*    position: relative !important;*/
/*    cursor: pointer !important;*/
/*}*/

#spaceDepth .layui-slider {
    height: 10px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border-radius: 8px !important;
    position: relative !important;
    cursor: pointer !important;
}

#spaceDepth .layui-slider-wrap-btn {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #fff !important;
    display: inline-block !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    transition: .3s !important;
}

#spaceDepth .layui-slider-wrap {
    width: 36px !important;
    height: 36px !important;
    position: absolute !important;
    top: -13px !important;
    -webkit-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    text-align: center !important;
}

#spaceDepth .layui-slider-bar {
    border-radius: 8px !important;
    position: absolute !important;
    height: 100% !important;
}

.spaceDepthbox {
    display: flex;
}

.spaceDepthbox span {
    margin-left: 32px;
    margin-top: 7px;
    color: #fff;
    font-size: 17px;
}

/* 滑动条样式 */
.chijitab-rang {
    width: 100%;
    height: 30px;
    position: relative;
    margin: 15px 0;
}

/*.chijitab-rang-slider {*/
/*    -webkit-appearance: none;*/
/*    width: 81%;*/
/*    height: 4px;*/
/*    background: #444;*/
/*    outline: none;*/
/*    border-radius: 2px;*/
/*}*/

/*.chijitab-rang-slider::-webkit-slider-thumb {*/
/*    -webkit-appearance: none;*/
/*    appearance: none;*/
/*    width: 16px;*/
/*    height: 16px;*/
/*    border-radius: 50%;*/
/*    background: #FFF;*/
/*    cursor: pointer;*/
/*}*/

.rang-tips {
    position: absolute;
    top: -9px;
    right: 5%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 17px;
}

/*.chiJi-container {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    gap: 10px;*/
/*    padding: 20px 0;*/
/*}*/

.chiJi-slider {
    width: 300px;
    height: 10px;
    position: relative;
}

.chiJi-slider-track {
    position: absolute;
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.chiJi-slider-fill-left {
    position: absolute;
    height: 10px;
    background-color: rgba(55, 107, 237, 1);
    border-radius: 5px;
    top: 50%;
    transform: translateY(-50%);
    right: 50%;
    width: 0;
}

.chiJi-slider-fill-right {
    position: absolute;
    height: 10px;
    background-color: rgba(55, 107, 237, 1);
    border-radius: 5px;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    width: 0;
}

.chiJi-slider-handle {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 1);
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.chiJi-slider-tooltip {
    position: absolute;
    background: #3A8BFF;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    display: none;
}

.chiJi-slider-tooltip:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #3A8BFF transparent transparent transparent;
}

.chiJi-slider-handle:hover .chiJi-slider-tooltip {
    display: block;
}

/* 选项卡样式增强 */
.cjtab-item {
    position: relative;
}

.cjtab-item.active {
    color: #FFF;
    border-bottom: 2px solid #376BED;
}

/*一键吃鸡 end*/

/*侧边栏 分享库、一键吃鸡、eq设置页面 end*/