body{
    user-select: none; /* Chrome, Opera, Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}
.fl-al{
	display: flex;
	align-items: center;
}
.fl-sp{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.fl-asp{
	display: flex;
	justify-content: space-between;
}
.fl-wr{
	display: flex;
	flex-wrap: wrap;
}
.flex{
	display: flex;
}
.fl-cen{
	display: flex;
	justify-content: center;
	align-items: center;
}
.fl-fs{
	display: flex;
	justify-content: space-between;
}
.fl-end{
	display: flex;
	justify-content: flex-end;
}
.fs12{
	font-size: 0.12rem;
}
.fs14{
	font-size: 0.14rem;
}
.fs16{
	font-size: 0.16rem;
}
.fs18{
	font-size: 0.18rem;
}
.fs20{
	font-size: 0.2rem;
}
.fs22{
	font-size: 0.22rem;
}
.fs24{
	font-size: 0.24rem;
}
.fs26{
	font-size: 0.26rem;
}
.fs28{
	font-size: 0.28rem;
}
.fs30{
	font-size: 0.3rem;
}
.fs32{
	font-size: 0.32rem;
}
.fs34{
	font-size: 0.34rem;
}
.fs36{
	font-size: 0.36rem;
}
.fs38{
	font-size: 0.38rem;
}
.fs40{
	font-size: 0.4rem;
}
.fs46{
	font-size: 0.38rem;
}
.fs52{
	font-size: 0.52rem;
}
.te-al{
	text-align: center;
}
.ml5{
	margin-left: 0.05rem;
}
.ml10{
	margin-left: 0.1rem;
}
.ml15{
	margin-left: 0.15rem;
}
.ml20{
	margin-left: 0.2rem;
}
.ml25{
	margin-left: 0.25rem;
}
.ml30{
	margin-left: 0.3rem;
}
.mt5{
	margin-top: 0.05rem;
}
.mt10{
	margin-top: 0.1rem;
}
.mt15{
	margin-top: 0.15rem;
}
.mt20{
	margin-top: 0.2rem;
}
.mt25{
	margin-top: 0.25rem;
}
.mt30{
	margin-top: 0.3rem;
}
.mt40{
	margin-top: 0.4rem;
}
.mt50{
	margin-top: 0.5rem;
}
.mt60{
	margin-top: 0.6rem;
}
.cl-wh{
	color: white;
}
.fl-bd{
	font-weight: bold;
}
.wt100{width: 100%;}
body{
	padding: 0;
	margin: 0;
}
.footer_btn_cj{
	display: none;
}
/* 富文本 start*/
/* .ql-align-right{
	text-align: right;
}
.ql-indent-1{
    padding-left: 3em;
}
pre {
    white-space: pre-wrap;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px 10px;
}
.ql-syntax{
    background-color: #23241f;
    color: #f8f8f2;
    overflow: visible;
}
.rule_area p{
	margin: 0!important;
}
h1,h2,h3,h4,h5,h6{
	margin: 0!important;
}
.ql-size-large{
	font-size:1.5em
}
.ql-size-huge{
	font-size:2.5em
}
.ql-size-small{
	font-size:0.75em
} */
.ql-editor{
	white-space: normal!important;
	padding: 0 0.7rem!important;
}
/* 富文本 end*/
/* 公共弹窗 */
.commonAlert{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: transparent;
}

.tipAlert{
    display: none;
}

.confirmAlert{
    display: none;
}

.screenAlert{
	display: none;
	z-index: 99;
}

.alertBox{
    width: 5rem;
    background-color: #fff;
    border-radius: 0.2rem;
    margin-top: 15%;
    margin-left: 50%;
    transform: translateX(-50%);
    position: relative;
    box-sizing: border-box;
    padding: 0.2rem;
}

.alertBox .alertTip{
    width: 100%;
    font-size: 0.2rem;
    font-weight: 700;
}

.alertBox .alertMsg{
    width: 100%;
    padding: 0.4rem 0;
    white-space: wrap;
}

.alertBox .alertWrap{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    
}

.alertBox .alertBtn{
    background-color: #4605CB;
    color: #fff;
    font-size: 0.18rem;
    padding: 0.1rem 0.3rem;
    border-radius: 0.1rem;
    cursor: pointer;
}
.screenalertBtn{
	background-color: #4605CB;
    color: #fff;
    font-size: 0.18rem;
    padding: 0.1rem 0.3rem;
    border-radius: 0.1rem;
    cursor: pointer;
}
.alertBox .alertCancel{
    background-color: #f56c6c;
    color: #fff;
    font-size: 0.18rem;
    padding: 0.1rem 0.3rem;
    border-radius: 0.1rem;
    cursor: pointer;
    margin-right: 0.1rem;
}

.hide {
    display: none!important;
}
.show {
    display: block!important;
}

/* 预览图片 */
.bigScreen_html{
	width: 100%;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	bottom: 0;
	left: 0;
	z-index:99;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
}
.bigScreen_img{
	max-width: 90%;
	height: 80vh;
	height: 80vh;
	display: block;
	margin: auto;
    box-shadow: 0 2px 0.1rem 0 #f6f6f6;
    border-radius: 0.1rem;
}

.music_question{
    margin-top: 0.1rem;
}

.hide{
	display: none!important;
}
/* 键盘控制选中 */
.control_selected{
	box-shadow: 0 4px 8px rgba(128, 16, 53, 0.8); /* 凸起效果 */
}

.c_dw_scroll{
	overflow-y: auto;
}

.all_music{
    position: relative;
    overflow: visible!important;
}
.allmusic_pop{
    width: 100%;
    position: absolute;
    bottom: 0.3rem;
    left: 0;
    display: none;
	z-index: 99;
	padding-bottom: 0.3rem;
}
.allmusic_pop .unit{
    width: 1.44rem;
    height: 0.4rem;
    background: rgb(0, 0, 0, 0.7);
    border-radius: 0.2rem;
    margin-bottom: 0.1rem;
    text-align: center;
    line-height: 0.4rem;
}
.all_music:hover .allmusic_pop{
    display: block;
}
/* .allmusic_pop .cell_music:last-child{
	margin-bottom: -0.1rem;
} */

/* 公共按钮鼠标移入展示更多 */
.footer_btn_more{
    position: relative;
    overflow: visible!important;
    /* 保证父元素不会遮挡弹出层 */
    display: inline-block;
}
.footer_btn_more_pop{
    /* 移除固定100%宽度，改为自适应内容宽度 */
    width: auto;
    min-width: 1.44rem; /* 保留最小宽度，保证美观 */
    position: absolute;
    bottom: 0.3rem;
    /* 调整定位，实现水平居中 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    padding-bottom: 0.3rem;
    /* 防止内容溢出 */
    overflow: visible;
}
.footer_btn_more_pop .unit{
    /* 移除固定宽度，改为自适应文字宽度 */
    width: auto;
    min-width: 1.44rem; /* 保留最小宽度，与原有样式兼容 */
    height: 0.4rem;
    background: rgba(0, 0, 0, 0.7); /* 修正 rgba 写法（原有写法兼容性略差） */
    border-radius: 0.2rem;
    margin-bottom: 0.1rem;
    text-align: center;
    line-height: 0.4rem;
    /* 关键：强制文字单行显示，不换行 */
    white-space: nowrap;
    /* 增加左右内边距，避免文字紧贴边框 */
    padding: 0 0.2rem;
    /* 防止文字溢出时出现省略号（可选，根据需求调整） */
    /* overflow: hidden;
    text-overflow: ellipsis; */
}
.footer_btn_more:hover .footer_btn_more_pop{
    display: block;
}
/* 初始隐藏弹出层（补充原有注释掉的样式） */
.footer_btn_more_pop{
    display: none;
}

/* 弹窗容器：取消固定高度，改为 min/max 限制 */
.morePic {
    position: fixed;
    left: 5%;
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 配合 top 50% 实现绝对居中 */
    width: 90%;
    min-height: 86vh;
    max-height: 90vh; /* 最高不超过屏幕 90% */
    z-index: 99999999;
    background: #FFF;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    overflow: visible; 
}

/* 图片包装层 */
.showSome {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
    /* 允许内部滚动以防万一，但配合 max-height 限制图片大小 */
    overflow-y: auto; 
}

/* 图片通用样式 */
.morePic .show_img {
    cursor: pointer;
    object-fit: contain; /* 确保图片完整 */
    /* background: #f7f7f7; */
    /* background: #FFF; */
    border-radius: 8px;
    transition: transform 0.2s;
    
    /* 默认布局：3列 */
    flex: 0 1 calc(33.33% - 15px);
    /* 关键：限制单张图片的最大高度，防止只有1-2张时撑得太大 */
    max-height: 40vh; 
    min-width: 150px;
    position: relative;
}

/* --- 核心修复：根据数量自动调整大小 --- */

/* 当只有 1-2 张图时，限制它们的宽度，不要横跨全屏 */
.show_img:first-child:nth-last-child(-n+2),
.show_img:first-child:nth-last-child(-n+2) ~ .show_img {
    flex: 0 1 45%; /* 宽度减小 */
    max-height: 60vh; /* 高度可以适当放宽，但不要充满全屏 */
}

/* 当只有 1 张图时，更加收紧 */
.show_img:only-child {
    flex: 0 1 80%;
    max-height: 70vh;
}

/* 7张及以上：4列布局，缩小单图高度 */
.show_img:first-child:nth-last-child(n+7),
.show_img:first-child:nth-last-child(n+7) ~ .show_img {
    flex: 0 1 calc(25% - 15px); /* 4列 */
    max-height: 28vh;            /* 3行 × 28vh + 2个gap ≈ 90vh 以内 */
    min-width: 100px;
    margin-top: 0.2rem;
}

/* 可选：如果到10张以上还想更紧凑，可以进一步缩小 */
.show_img:first-child:nth-last-child(n+10),
.show_img:first-child:nth-last-child(n+10) ~ .show_img {
    flex: 0 1 calc(25% - 15px);
    max-height: 22vh;            /* 3行 × 22vh + 2个gap，留更多余量 */
    min-width: 80px;
}

/* 多图时让容器不出现滚动条（覆盖原有的 overflow-y: auto） */
.show_img:first-child:nth-last-child(n+7) {
    /* 当图片≥7张时，容器内改用 grid/flex 紧凑排列，不滚动 */
}

/* 配合：showSome 容器本身在多图时禁止纵向滚动 */
.morePic:has(.show_img:nth-child(7)) .showSome {
    /* overflow-y: hidden; */
    align-content: center; /* 垂直居中所有图片 */
}

/* 关闭按钮 */
.closeCus {
    width: 0.6rem;
    height: 0.6rem;
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    cursor: pointer;
    z-index: 1000;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* 全屏大图 */
.showBigImgWrap{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
}

.showBigImg {
    max-width: 100%;
    max-height: 100%;
    min-height: 80%;
    object-fit: contain;
    border-radius: 12px;
    z-index: 500;
}

.showBigVideo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    z-index: 500;
}

.maskHide{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.fristVideoWrap{
    height: 2rem;
    position: relative;
}

.fristVideoWrap .fristVideo{
    height: 2rem;
}
.fristVideoWrap .showImg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
}

.showImg{
    box-shadow: 0 2px 0.1rem 0 #f6f6f6;
    border-radius: 0.1rem;
}

.js_digital{
	position: relative;
	overflow: visible!important;
}
.digital_pop{
	width: 100%;
	position: absolute;
	bottom: 0.1rem;
	left: 0;
	display: none;
}
.digital_pop .unit{
    width: 1.44rem;
    height: 0.4rem;
    background: rgb(0, 0, 0, 0.7);
    border-radius: 0.2rem;
    margin-bottom: 0.1rem;
    text-align: center;
    line-height: 0.4rem;
}
.js_digital:hover .digital_pop{
    display: block;
}
.digital_pop .unit:last-child{
	margin-bottom: 0.5rem;
}
.digital_pop .digital_common_pop .unit:last-child{
	margin-bottom: 0.1rem;
}

 /* 数字人位置 */
 .digital-human-widget {
    position: fixed;
    top: 0;
    right: 0;
    width: 1.8rem;  
    height: 1.8rem; 
    z-index: 999;
    border: 2px dashed #ccc; 
    border-radius: 50%;
    overflow: hidden;
}

/* 实际显示给用户的画布：背景天然透明 */
#humanCanvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 数字人主容器过渡效果 */
#digital-human-container {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.35s ease, 
                visibility 0.35s !important;
}

/* 内部静止与说话视频切换时的淡入淡出（防闪烁） */
#dh-video-stop, #dh-video-speak {
    transition: opacity 0.3s ease-in-out, z-index 0.3s ease !important;
}


/* SVG 连线画板 */
#line-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* 匹配容器 */
.matching-area {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    margin-top: 0.2rem;
}

.matching-area .column {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 35%;
}

/* 卡片样式 - 支持内容自适应，同时保证左右对称 */
.matching-area .card {
    min-height: 0.8rem; /* 最小高度，保证视觉一致性 */
    border: 2px solid #e0e0e0;
    border-radius: 0.12rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.2rem; /* 增加内边距，让内容更舒适 */
    text-align: center;
    position: relative;
    transition: border-color 0.4s ease, background-color 0.4s ease;
    color: #333;
    box-sizing: border-box;
    word-break: break-word; /* 长文本自动换行 */
    line-height: 1.4; /* 增加行高，提升可读性 */
}

/* 左右列卡片高度对齐 - 使用 flex 布局确保每行高度一致 */
.matching-area {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    margin-top: 0.2rem;
    align-items: stretch; /* 确保左右列高度一致 */
}

.matching-area .column {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 35%;
    justify-content: flex-start; /* 卡片从顶部开始排列 */
}

.matching-area .card img {
    max-width: 100%;
    max-height: 1.5rem; /* 增加图片最大高度，让图片更清晰 */
    object-fit: contain;
    display: block;
}

/* SVG 贝塞尔曲线平滑绘制动画 */
.matching-area .connection-line {
    fill: none; /* 必须设为 none，否则 SVG 路径会被黑色填充 */
    stroke-width: 0.1rem; /* 连线粗细 */
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}

/* 强制所有连线取消内部填充 */
#line-svg path,
.connection-line {
    fill: none !important;        /* 解决黑色大块填充的核心 */
    stroke-linecap: round;        /* 让线条两端变为圆角 */
    stroke-linejoin: round;
}

.w100{
    width: 100%;
}

.jx_btn{
    padding: 0.1rem 0.3rem;
    font-size: 0.24rem;
    border-radius: 0.6rem;
    background: #FFF;
    margin-left: 0.1rem;
    cursor: pointer;
}