.tab-main{
    width: calc(100%);
    height: calc(100% - 90px);
    padding: 5px 25px 0 25px;
    margin-top:0;
}
.select-main{
    width: 100%;
    margin-top:1%;
    height: 6%;
}
.content-main{
    height: calc(100% - 200px);
}

.timbre-scroll{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden; 
  }
.timbre-scroll .scroll-item{
    /*margin-bottom:1%;*/
    width:100%;
    /*height:78px;*/
    display: flex;
    /*background-color: #0b09ed0a;*/
    border-radius: 10px;
    padding:10px;
    border: 1px solid transparent;
}
.timbre-scroll .scroll-item:hover{
    cursor: pointer;
    background-color: aliceblue;
    border-radius: 10px;
}
.scroll-item .item-left{
    width: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scroll-item .item-left img{
    width: 60px;
    height: 60px;
    border-radius: 10px;
}
.scroll-item .item-main{
    width: 100%;
    /*display: flex;
    flex-direction: column;
    justify-content: center;*/
    padding: 0 12px;
    gap:10px;
}
.scroll-item .item-main .main-title{
    margin-bottom:0.2%; font-weight: 700;
}
.scroll-item .item-main .desc{color: #74747c;font-size: 12px;margin-top:8px;}
.scroll-item .item-main .tags{
    margin-top:5px;font-size: 12px;
}
.scroll-item .item-main .tags span{
    border-radius: 5px;
    background-color: #806d6d;
    color:#fff;
    padding:2px;
}
.scroll-item .item-main .main-tag{
    margin-top:0.2%;min-width: 160px;
}
.scroll-item .item-main .main-tag span{
    margin-right: 0.2%;
    background-color: #806d6d;
    color:#fff;
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 12px;
}
.scroll-item .item-right{
    width: auto;
    min-width: 180px;
    display: flex;
    justify-content: end;
    align-items: center;
}
.scroll-item .item-right .item-right-ctrl{
    margin:0 5%;
}
.scroll-item .item-right button{
    width: 100px;
    height: 50%;
    background-color: #1e9fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scroll-item .item-right svg{
    /*width: 100%;
    height: 100%;*/
}
.scroll-item .item-right svg:hover{
    /*background-color: #d7e2eb;*/
}

.current-play-active {
    background-color: aliceblue;
    border-radius: 10px;
}
.scroll-item-select{
    border:1px solid #1e9fff !important;
}

/* 修改选择框样式 */
.layui-form-select .layui-input:focus{
    border-color: #1e9fff !important;
}
.layui-form-select dl dd.layui-this {
    background-color: #1e9fff !important; 
    color: #fff !important; 
}

/* 重写tab样式 */
.layui-tab-brief > .layui-tab-title .layui-this{
    color: #1e9fff !important;
    border-bottom: 2px solid #1e9fff !important;
    font-weight: 700; font-size: 18px;
}
.layui-tab .layui-tab-title li{ font-size: 16px}
.layui-tab-brief > .layui-tab-title .layui-this::after {
    content: none !important; /* 彻底移除生成内容 */
}
.layui-tab[overflow]>.layui-tab-title{ height: 43px}
.layui-layer{ border-radius: 10px}
.layui-layer-title{font-size: 20px;padding: 10px 25px 5px 25px;height: auto;border-bottom: unset;}

.item-right-ctrl .iconfont{ font-size: 24px !important;}
/* 删除按钮：图标略小，悬停变红 */
.scroll-item .item-right .voice_delete .iconfont{ font-size: 16px !important;}
.scroll-item .item-right .voice_delete:hover{ color: #f5222d;}

/* 遮罩层基础样式 */
.audio-overlay{ display: none}
.audio-overlay{ position: absolute; left: 18px; top: 12px;}
.audio-overlay .iconfont{ font-size: 24px; color: #fff;}
.scroll-item {
    position: relative;
    transition: transform 0.2s ease;
}
.select-item:hover .item-left img, .scroll-item-select .item-left img{
    filter: blur(2px); /* 模糊程度 */
    -webkit-filter: blur(2px); /* Safari 浏览器兼容 */
    -moz-filter: blur(2px);    /* Firefox 浏览器兼容 */
}
.select-item:hover .audio-overlay, .scroll-item-select .audio-overlay{ display: block;}
.voice_create{ width: 100%; letter-spacing:.28px; margin-bottom: 32px;}
.scroll-item .video_selsct.selected{background-color: #1676bd;cursor: not-allowed;}
.voice_create_box{ width: 620px;
    transition-duration: .3s;
    padding: 24px 46px;
    background-color: #0b09ed0a;
    border: 1px solid #ffffff0a;
    border-radius: 12px;
    display: flex;
    justify-content:space-between;
    align-items:center;
    cursor:  pointer;
}
.create_left{
    gap: 34px;
    align-items:center;
    display: flex;
}
.create_right_btn{
    padding: 4px 12px;
}
.voice_create_box .iconfont{ font-size: 30px; color: #1980fa}
.voice_create_box:hover{
    border: 1px solid #baadf5;
}
.create_logo{
    gap:34px;
    display: flex;
    align-items: center ;
}
.create_logo img{ width: 78px; height: 57px;}
.create_info{
    gap: 8px;
    align-items: center;
}
.create_title{
    color: #333;letter-spacing:.4px; line-height: 26px; font-weight: 500; font-size: 18px ; align-items: center; display: flex;
}
.create_desc{
    color: #635e5e; letter-spacing:.32px; line-height: 20px; font-weight: 400; font-size: 14px; align-items: center;; display: flex;
}
.collect_select{color: var(--primary-color);}
.collect_select:hover{color: var(--primary-color);}

.timbre_list_tab .layui-unselect{display: none;}
.filter_box{display: grid;grid-template-columns: auto 80px;gap: 10px;align-items: center;margin-bottom: 8px;}
.filter_box .search_box{border: 1px solid #e5e5eb;border-radius: 8px;padding: 6px 10px;height: 38px;}
.filter_box .search_box .kw_input{width: calc(100% - 25px);}
.filter_box .search_btn{color:#5a5e68;border: 1px solid #e5e5eb;border-radius: 8px;padding: 6px 10px;height: 38px;cursor: pointer;}
.tags_filter_box{gap:12px;margin-bottom: 20px;}
.tags_filter_box .label{color: #5a5e68;font-size: 12px;}
.tags_filter_box .tag{font-size:12px;border:1px dotted #e5e5eb;padding:2px 8px;color: #5a5e68;cursor: pointer;}
.tags_filter_box .tag:hover{border:1px dotted var(--primary-color);color:var(--primary-color);}
.tags_filter_box .tag.active{border:1px dotted var(--primary-color);color:var(--primary-color);}
.filter_conditions{gap:10px;margin-bottom: 20px;}
.filter_conditions .condition{font-size:12px;border:1px dotted #e5e5eb;padding:2px 8px;color: #5a5e68;cursor: pointer;}
.filter_conditions .condition:hover{color: var(--primary-color);}
.filter_conditions .condition .split_line{height: 10px;width: 1px;background-color: #c1c5cb;}
.filter_conditions .condition i{font-size: 10px;cursor: pointer;margin-left:5px;}
.filter_conditions .condition i:hover{color: #000;font-weight: bold;}
.filter_conditions .clean_all{cursor: pointer;color: #74747c;width:23px;height:23px;border-radius: 100px;border:1px solid #e5e5eb;}
.filter_conditions .clean_all:hover{background-color: #e1e1e360;}
.filter_conditions .clean_all i{font-size: 12px;}
/*音色筛选弹窗*/
.mask_box .audio_filter_box{padding:20px 28px;border-radius: 12px;}
.mask_box .audio_filter_box .header{padding:0;}
.mask_box .audio_filter_box .content_box{margin-top:15px;}
.mask_box .audio_filter_box .content_box .operate_box{margin-top:25px;gap:8px;}
.mask_box .audio_filter_box .content_box .operate_box .op_btn{padding:6px 25px;background-color:#0000000d;color: #00000099;}
.mask_box .audio_filter_box .content_box .operate_box .apply_btn{background-color: var(--primary-color);color: #fff;}
.mask_box .audio_filter_box .select_group{display: grid;grid-template-columns: repeat(2,1fr);row-gap: 15px;column-gap: 8px;}
.mask_box .audio_filter_box .select_group .label{margin-bottom:5px;font-size: 12px;}
.mask_box .audio_filter_box .group_box{margin-top:18px;}
.mask_box .audio_filter_box .group_box .label{margin-bottom:5px;font-size: 12px;}
.mask_box .audio_filter_box .group_box .items{gap:8px;display: grid;grid-template-columns: repeat(5, 1fr);}
.mask_box .audio_filter_box .group_box .group{padding:5px 12px;border:1px solid #e5e5eb;font-size: 12px;cursor: pointer;text-align: center;}
.mask_box .audio_filter_box .group_box .group.active{border:1px solid var(--primary-color);color: var(--primary-color);}