/* e5eui 3.0 */
@import url("e5eui/e5eui.css");
@import url("font/iconfont.css");/* zhidao */
:root {
	color-scheme: light dark;
	--main_color: #0043ec;
	--main2_color:#3bb8ff;
	--main3_color:#dfe8fd;
	--main_light: #a4dbfb;/* 常用border */ 
	--main_lighter: #cedcfe; /*常用background */
	--main_extra_light: #f3f7ff; /*常用background */

	--main_bg: #292929;/* //顶部背景颜色*/
	--main_bg2: #424242;/* //左侧一级菜单背景颜色*/
	--web-bg: #424242;
	--on_color: #0043ec;
	--main_margin:10px;/* //站点整体外边距*/
	--main_radius:10px;/* //站点整体圆角*/
	
	--web_margin:15px;/* //站点整体外边距*/
	--web_padding:15px;/* //站点整体圆角*/
	--web_radius:15px;/* //站点整体圆角*/
	--inset_bottom:calc(constant(safe-area-inset-bottom)/2 + 2px);
	--inset_bottom:calc(env(safe-area-inset-bottom)/2 + 2px);
	
	/* 浅色 */
	--modebg:#fff;
	--modeC:#3b3d2c;
	--nva-bg:#dfe8fd;
	--js-icon-bg:linear-gradient(#fefefe, #eeeee8);
	--nva-c:#0a0a00;
	--editBox-bg:#fff;
	--edit-file-bg:#f5f7fa;
	--btn-bg:#f6f6f6;
	--btn-c:#333333;
	--viplayer-bg:#f5f5f5;
	--qy-bg:#fff;
	--border-c:#fff;
	--jf-bg:#fff;
	--jf-md-bg:#fbfaf8;
	--layer-bg:#fff;
	--yqlayer-bg:#fff url(yaoqing_bg1.png);
	--yqbox-bg:#f5f7fa;
	--qyTab-bg:#fff;
	--jftab-bg:#f5f7fa;
	--tab-on: #dfe8fd;
	--c-kaitong:#0043ec;
	--popover-bg:#fff;
}

/*深色*/
:root[theme=purple] {
	--modebg:#272727;
	--modeC:#fff;
	--nva-bg:#171717;
	--nva-c:#636363;
	--nva-c-on:#fff;
	--editBox-bg:#1f1f1f;
	--edit-file-bg:#272727;
	--btn-bg:#171717;
	--btn-c:#999999;
	--viplayer-bg:#2e3233;
	--qy-bg:#2e2e2e;
	--border-c:#2e2e2e;
	--jf-bg:#2e2e2e;
	--jf-md-bg:#171716;
	--layer-bg:#282828;
	--yqlayer-bg:#282828 url(yaoqing_bg2.png);
	--yqbox-bg:#171717;
	--qyTab-bg:#171717;
	--jftab-bg:#171717;
	--tab-on: #0043ec;
	--c-kaitong:rgba(255,255,255,.5);
	--popover-bg:#171717;
	.editBox,.yusheBox,.yusheBtn,.yinsheBox{
		box-shadow: none;
	}
	.login-form-item{
		background: #1d1d1d;
	}
	.login-form-item input{
		color: #fff;
	}
}
input[type="range"]{
	height: 4px;
	transition: all .1s;
	background:linear-gradient(to right,#10bbfd, var(--main_color)) no-repeat, #dbdfe5;  
}
input[type="range"]::-webkit-slider-thumb {
	width: 10px;
	height: 10px;
	border:none;
	background:  var(--main_color);
}
.e5e-popover-cont{
	background: var(--popover-bg);
}
.e5e-popover-arrow::after {
	background: var(--popover-bg);
}
.e5e-btn.ys1.is-plain {
	
    background:var(--btn-bg,#f6f6f6);
		color: var(--btn-c,#333);
}
.e5e-middle-layer{
	 background:var(--layer-bg);
}

.web-cont{
	padding-top: 60px;
}
html {
	font-size:14px;
}
body{
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	padding-left: constant(safe-area-inset-left);
	padding-left: env(safe-area-inset-left);
	padding-right: constant(safe-area-inset-right);
	padding-right: env(safe-area-inset-right);
	background: var(--modebg);
	line-height: 1.2;
	color: var(--modeC);
}
html,body,#app{
	height: 100%;
	/* font-family:"Source Han Sans CN", "Microsoft YaHei", 微软雅黑, "Microsoft YaHei", 宋体, SimSun, sans-serif; */
	
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.c-inherit{
	color: inherit;
}
.e5e-layer.open{
	height: 100%;
}
.scroll-ys{
	
}

.huiyanBox{
	border: 4px solid var(--border-c,#fff);
	border-radius: 30px;
	padding: 40px 36px 20px;
	width: calc(100vw - 100px);
	max-width: 1250px;
	height: calc(100% - 100px);
	/* background: #fff url(hy_bg.png) no-repeat; */
	background: var(--viplayer-bg,#f6f6f6);
	background-size: cover;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: unset;
}
.close-huiyanBox{
	position: absolute;
	top: 0px;
	right:0px;
	width: 50px;
	height: 50px;
	/* background: rgba(0, 0, 0, .2); */
	color: #666666;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	
}
.huiyuanquanyi{
	padding-top: 30px;
}
.huiyuanquanyi-item{
	--tw-shadow: 0px 4px 16px 0px rgba(0, 0, 0, .04);
	--tw-shadow-colored: 0px 4px 16px 0px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	height: 480px;
	padding: 20px;
	border: 2px solid var(--border-c,#fff);
	border-radius: 22px;
	background:var(--qy-bg,#fff) url(subscribe-free-bg-BKx1URcC.png) no-repeat;
}
.huiyuanquanyi-item.ys1{
	background:var(--qy-bg,#fff) url(subscribe-basic-bg-Cnvp0Gye.png) no-repeat;
}
.huiyuanquanyi-item.ys2{
	background:var(--qy-bg,#fff) url(subscribe-premium-bg-C3X6NgEp.png) no-repeat;
}
.huiyuanquanyi-item.ys3{
	background:var(--qy-bg,#fff) url(subscribe-custom-bg-5C2GGnEM.png) no-repeat;
}

.m1{
	
}
.huiyuanquanyi-item .content{
	padding: 10px 0;
}
.hydj-icon{
	margin-right: 8px;
	width: 32px;
	height: 32px;
	background: #fff;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.huiyuanquanyi-item .m2{
	padding: 20px 0 15px;
}
.quanyiTab{
	width: 600px;
	display: inline-flex;
	gap: 5px;
	padding: 5px;
	background: var(--qyTab-bg);
	border-radius: 40px;
}
.quanyiTab-item{
	flex: 1;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50px;
	font-weight: 600;
	cursor: pointer;
}
.quanyiTab-item.on,.quanyiTab-item:hover{
	background:var(--tab-on);
}
.quanyi-t{
	padding: 20px 0;
	font-weight: 500;
	font-size: 24px;
}
.jifenBox{
	margin-top: 15px;
	gap: 15px;
	grid-template-columns: repeat(3, minmax(0px, 1fr));
}
.jf-item{
	--tw-shadow: 0px 4px 16px 0px rgba(0, 0, 0, .04);
		--tw-shadow-colored: 0px 4px 16px 0px var(--tw-shadow-color);
		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
		border: 4px solid var(--border-c,#fff);
		border-radius: 22px;
		background:var(--jf-bg,#fff);
}
.jf-item-md{
	background:var(--jf-md-bg, #fbfaf8);
	overflow: hidden;
	height: 180px;
	border-radius: 16px;
	padding: 15px 20px;
}
.jf-item-bd{
	padding: 15px;
}
.jf-item-md-svg{
	right: 10px;
	bottom: -40px;
	color: #f0f0ef;
}
.jfjiesuan-item{
	flex: 1;
}
.jfjiesuan-item-icon{
	width: 30px;
	height: 30px;
	background-image:var(--js-icon-bg);
	/* border: solid 1px #e5e5e5; */
	border-radius: 8px;
}
.jfjiesuan-item-text{
	
}
.jfjiesuanTab{
	gap: 5px;
	padding: 5px;
	height: 40px;
	background:var(--jftab-bg);
	border-radius: 12px;
}
.jfjiesuanTab-item{
	flex: 1;
	height: 100%;
	
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	cursor: pointer;
}
.jfjiesuanTab-item:hover,.jfjiesuanTab-item.on{
	background: #fff;
	color: var(--main_color);
}
.jfjiesuanXX{
	margin: 0 15px;
	padding: 0 20px;
	height: 100%;
	background:var(--yqbox-bg);
	border-radius: 15px;
}
.payBox{
	border: 4px solid #fff;
	border-radius: 30px;
	padding: 40px 36px;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	text-align: center;
	background: #f6f6f6;

}
.paycode{
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	overflow: hidden;
}
.nav{
	/* border: 1px solid #e6e6e6; */
	width: 50px;
	padding: 5px;
	border-radius: 99px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	background:var(--nva-bg);
	/* box-shadow:0 8px 20px 5px #00000014; */
	position: relative;
}
.nav-item{
	position: relative;
	z-index: 5;
	width: 38px;
	height:38px;
	border-radius: 99px;
	cursor: pointer;
	position: relative;
	color: #7889b0;
	/* transition: all 0.4s ease; */
	user-select: none;
}
.nav-item:hover,.nav-item.on{
	background:var(--main_color);
	color: #fff;
}
.nav-item.on{
	/* color: #fff; */
}
.nav-underline {
	position: absolute;
	z-index: 0;
	height: 38px; 
	width: 38px; 
	background: var(--main_color); 
	border-radius: 99px; 
	transition: top 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.editBox{
	padding: 12px;

	/* border:1px solid #0002; */
	
	box-shadow: 0 0 10px 0px rgba(205, 205, 205, 0.5);
	min-height: 184px;
	border-radius: 20px;
	background:var(--editBox-bg,#fff);
}
.editBox:hover{
	/* border:1px solid #0003; */
}

.edit-file{
	margin-right: 10px;
	flex-shrink: 0;
	max-width: 200px;
	width: 85px;
	height: 114px;
	border:2px solid transparent;
 /* box-shadow:0 8px 20px 0 #00000014; */
	border-radius: 10px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var(--edit-file-bg,#f5f7fa);
	color: #849aac;
	transition: all .2s;
	cursor: pointer;
}
.edit-file:hover{
	background:var(--nva-bg);
	border-color: var(--main_color);
}

.contHd{
	padding: 25px 50px;
	width: 100%;
	max-width: 1200px;
	background: url(HomeTopBG-C4XaLL0e.png) top center no-repeat;
	/* background-size: contain; */
	
}
.contHd-t{
	padding: 55px 0 30px;
	font-size: 32px;
	text-align: center;
	/* color: #3b3d2c; */
}
.auto-height-textarea {
  width: 100%;
	min-width: 280px;
  min-height: 80px;
  max-height: 300px;
  padding: 8px;
  resize: none; /* 禁用手动调整大小 */
  overflow: hidden; /* 隐藏默认滚动条 */
	color: inherit;
}
.delete-btn{
	position: absolute;
	z-index: 999;
	top: 5px;
	right: 5px;
	background: rgba(0, 0, 0, .2);
	border-radius: 3px;
	color: #fff;
	width: 18px;
	height: 18px;
	/* opacity: 0; */
}
.edit-file:hover .delete-btn{
	opacity: 1;
}
.audio-info{
	background:var(--main3_color);
}
.sendBtn{
	background-color:var(--main_color);
	color: #fff;
	transition: all .2s;
	
}

.sendBtn .e5eicon-jiantou{
	display: inline-block;
	transform: rotate(-90deg);
}
.sendBtn:hover,.sendBtn.on{
	background-color: var(--main_color);
	color: #fff;
}
.e5e-btn-s{
	font-size: 14px;
}
.e5e-btn-s:hover{
	color: #333;
}
.loaderlayer{
	position: fixed;
	z-index: 9999;
	top: 16px;
	left: 50%;
	padding: 0 20px;
	min-height: 44px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 20px 0 #00000014;
	display: flex;
	align-items: center;
}
.loaderIcon {
	display: inline-flex;
  width: 24px;
  height: 24px;
  border: 2px solid #f3f3f3; /* 浅色边框 */
  border-top: 2px solid var(--main_color); /* 深色边框（旋转时形成动画） */
  border-radius: 50%; /* 圆形 */
  animation: spin 1s linear infinite; /* 旋转动画 */
}

/* 定义旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/*个人资料*/
.profileCont{
	min-width: 700px;
	width: 50%;
	margin: auto;
}
.profileBox{
	/* margin-top: 14px; */
	border-radius: 10px;
	padding: 18px;
	/* border: 1px solid rgba(223,224,229,.8); */
	background: var(--viplayer-bg, #f6f6f6);
}
/*资产*/
.zcBox{
	padding-top: 50px;
	margin: 0 150px;
}
.zcCont{
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 列等宽 */
	gap: 10px; /* 列间距 */
	width: 100%; /* 容器宽度自适应 */
}
.zc-item{
	aspect-ratio: 216 / 146;
	border:.7px solid var(--border-c, #fff);
	border-radius: 15px;
	/* background: rgba(238, 238, 238, 1); */
	background: var(--viplayer-bg, #f6f6f6);
	position: relative;
}
.zc-item-cziconbox{
	position: absolute;
	top: 7px;
	right: 7px;
	display: flex;
}
.zc-item-czicon{
	width: 40px;
	height: 40px;
	background: rgba(2, 10, 32, .5);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	cursor: pointer;
	font-size: 16px;
}
.zcxx-right{
	padding: 20px;
	width: 25%;
	min-width: 200px;
	max-width: 440px;
	display: flex;
	flex-direction: column;
}
.zcxx-text{
	line-height: 1.5;
}
.zcxx-video{
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	border-radius: 12px;
	transition: all .2s;
}
.zcxx-line{
	width: 1px;
	background-image: linear-gradient(to bottom, rgba(237,237,237,0),rgba(237,237,237,1),rgba(237,237,237,0));
}
.closezcxxBtn{
	position: absolute;
	top: 25px;
	left: 25px;
	width: 30px;
	height: 30px;
	background: #a6a6a680;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	cursor: pointer;
}
.zc-item-tag{
	background: rgba(0, 0, 0, .3);
	/* position: absolute; */
	left: 7px;
	bottom: 7px;
	color: #fff;
	font-size: 11px;
}

/*生成*/
.scBox{
	max-width:670px;
	margin:auto;
}
.sc-item{}
.sc-item-hd{
	margin: 20px 0 10px;
	display: flex;
	align-items: flex-end;
	position: relative;
	gap: 20px;
	padding-bottom: 20px;
}
.sc-item-hd-yinhao{
	position: absolute;
	left: 0;
	bottom:0px;
}
.sc-item-hd-pic{
	margin-left: 10px;
	width: 56px;
	height: 74px;
	border-radius: 6px;
	border:solid 2px #fff;
	box-shadow:  0 8px 20px 0 rgba(0, 0, 0, .08);
	transform: rotate(-10deg);
}
.sc-item-cont{
	aspect-ratio: 504 / 285;
	border:.7px solid rgb(232 232 232);
	border-radius: 15px;
	background: rgba(238, 238, 238, 1);
	position: relative;
	overflow: hidden;
}
.Failure{
	background: url('TaskGenFailedBg-SEXsAr1O.png') no-repeat;
	background-size: cover;
}

/* //登录 */
.login{
	width: 45.1389vw;
	min-width: 800px;
	max-width: 1024px;
	aspect-ratio: 800 / 518;
	background-image: url(LoginTopBG-C2W442tT.png);
	background-size: contain;
	background-position: center top;
	background-repeat: no-repeat;
	display: flex !important;
	border-radius: 20px;
}
.login-form-item.is-border {
	margin-top: 10px;
	padding:5px 10px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	border:1px solid #0000001a;
	display: flex;
	align-items: center;
}
.e5e-input-box{
	flex: 1;
}

.p-family{
	font-family: Space Grotesk, PingFang SC, sans-serif;
}


/*底部上传区域*/
.fixededitBox{
	position: fixed;
	left: 75px;
	right: 0;
	bottom: -600px;
	z-index: 888;
	margin: auto;
	max-width: 750px;
	transition: all .4s;
}
.scroll-active {
	bottom: 20px;
 /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}
.xxeditbox{
	margin: auto;
	padding-top: 20px;
	max-width: 960px;
	transition: all .4s;
	animation: heightAnimate .3s;
}
.heightAnimate{
	animation: heightAnimate .3s;
}
@keyframes heightAnimate {
	0% {
		min-height: 0;
		height: 0;
	}
	100% {
		min-height: 200px;
		height: auto;
	}
}
.xxeditbox.open{
	height: auto;
}


/*首页瀑布流*/
.masonry {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 3 列 */
  grid-gap: 16px;
  align-items: start; /* 避免项目被拉伸 */
}
.itemBox{
	break-inside: avoid; /* 防止内容被分割到不同列 */
	aspect-ratio: 821 / 462; /* 高度自动按比例计算 */
	background: #f0f0f0;
}
.item {
  padding: 16px;
  background: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.item:hover {
  transform: translateY(-2px);
}
.masonry {
  display: flex;
  gap: 16px;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.masonry-column {
  flex: 1; /* 列宽平均分配 */
  display: flex;
  flex-direction: column;
  gap: 16px; /* 列内项目间距 */
}
.item {
  padding: 16px;
  background: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.item:hover {
  transform: translateY(-2px);
}

/* 瀑布流容器 */
.masonry-container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 0;
  display: grid; /* 用grid实现列布局 */
  grid-template-columns: repeat(var(--column-count, 4), 1fr); /* 动态列数 */
  gap: 20px; /* 列间距 */
}

/* 列容器 */
.masonry-column {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 内容块间距 */
}

/* 内容块样式 */
.masonry-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.masonry-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 图片样式（宽度自适应，高度保持比例） */
.item-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 内容信息区 */
.item-info {
  padding: 16px;
}

.item-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #333;
}

.item-desc {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* 加载提示 */
.loading {
  grid-column: 1 / -1; /* 跨所有列居中 */
  text-align: center;
  padding: 30px 0;
  color: #666;
  font-size: 14px;
}
/*邀请有礼*/
.yaoqingBox{
	border: 2px solid rgba(255,255,255,.8);
	border-radius: 30px;
	width: 600px;
	height: calc(100% - 100px);
	background: var(--yqlayer-bg) no-repeat;
	background-size: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: unset;
}
.yaoqing_hd{
	padding:15px 25px;
	border-radius: inherit;
	height: 330px;
	background: url(bg-invite-friends-light-DJ-Y6d8g.png);
	background-size: 100%;
}
.yaoqingBtn{
	margin:10px auto;
	width: 223px;
	height: 67px;
	background: url(btn-invite-friends-iV8PGDtK.png);
	background-size: 100% 100%;
	cursor: pointer;	
}
.bziconBox{
	width: 28px;
	height: 28px;
	margin-bottom: 5px;
	border-radius: 15px;
	/* border:solid 1px #ddd; */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(to bottom,#5c98ff,#f3f6fa);
}
.bzbox{
	gap: 5px;
	border-radius: 15px;
	background:var(--yqbox-bg);
	
}
.bz-item{
	padding: 12px;
	height: 105px;
	/* border-radius: 15px;
	background: #f4f4f0; */
	display: flex;
	flex-direction: column;
	text-align: center;
}
.jiangliBox{
	padding:5px;
	border-radius: 15px;
	background:var(--yqbox-bg);
}
.jiangli_hd{
	padding: 20px;
	background: #fff;
	border-radius: 10px;
}
.jiangli_line{
	width: 16px;
	height: 1px;
	background: #e5e7eb;
}
.yusheBtn{
	box-shadow: 0 0 10px 0px rgba(205, 205, 205, 0.35);
	background:var(--editBox-bg,#fff) !important;
	cursor: pointer;
}
.yusheBox{
	position: absolute;
	bottom: -5px;
	left: 0;
	right: 0;
	z-index: 999;
	margin-bottom: 12px;
	padding: 12px;
		box-shadow:0 2px 20px 0 #3B3D2C0D;
		box-shadow: 0 0 10px 0px rgba(205, 205, 205, 0.35);
	
		border-radius: 20px;
		background:var(--editBox-bg,#fff);
}
.yushe{
	padding-top: 10px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.yushe-item{
	border-radius: 10px;
	height: 120px;
	background: var(--edit-file-bg, #fff);
	cursor: pointer;
}
.c-kaitong{
	color: var(--c-kaitong);
}
.yun-item{
	width: 100px;
	text-align: center;
}

.yun-item-pic{
	width: 80px;
	height: 80px;
	border-radius: 10px;
	overflow: hidden;
}
.yun-item.on .yun-item-pic{
	border:solid 2px var(--on_color);
}
.yun-item-t{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 3px;
	font-size: 14px;
	/* opacity: .8; */
	color: #fff;
	 background: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,.5));
}
/*音色弹框*/
.yinpinBox2{
	background: var(--editBox-bg, #fff);
	width: 960px;
	padding: 0 20px;
	/* height: 632px; */
	display: flex;
	flex-direction: column;
}
.yinsheBox{
	bottom: 125%;
	left: 0;
	right: 0;
	position: absolute;
	z-index: 99;
	padding: 12px;
	box-shadow: 0 2px 20px 0 #3B3D2C0D;
	box-shadow: 0 0 10px 0px rgba(205, 205, 205, 0.35);
	border-radius: 20px;
	background: var(--editBox-bg, #fff);
}
.yinshe{
	grid-template-columns: repeat(4, 1fr);
	padding-top: 10px;
	flex: 1;
	align-content:start;
}
.grid5{
	grid-template-columns: repeat(5, 1fr);
}
.yinshe-item{
	height: 40px;

	padding:0 10px;
	cursor: pointer;
	position: relative;
	border-radius: 10px;
	display: flex;
	align-items: center;
	background: #f5f7fa;
	border:1px transparent solid;
	font-size: 14px;
}

.yinshe-item.is-dashed{
	border-color:#eef1f5 ;
	background: #fff;
}
.yinshe-item.is-dashed:hover{
	border-color:var(--main_color);
}
.yinshe-item-tx{
	width: 23px;
	height: 23px;
	border-radius: 20px;
	margin-right: 5px;
}
.yinshe-item:hover,.yinshe-item.on{
	background: var(--main_lighter);
}

.case{
	padding: 0 130px;
}
/* 响应式列数（通过CSS变量控制） */
@media (max-width: 1440px) {
	.case{
		padding: 0 30px;
	}
	.zcCont{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 1200px) {
  .masonry-container {
    --column-count: 3;
  }
	.zcCont{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.jifenBox{
		grid-template-columns: repeat(2, minmax(0px, 1fr));
	}
}

@media (max-width: 768px) {
  .masonry-container {
    --column-count: 2;
    width: 95%;
  }
	.zcCont{
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.jifenBox{
		grid-template-columns: repeat(1, minmax(0px, 1fr));
	}
}

@media (max-width: 480px) {
  .masonry-container {
    --column-count: 1;
  }

}

.file-yinpingBox{
	position: relative;
}
.file-yinping{
	display: none;
	position: absolute;
	z-index: 1;
	left: 0;bottom: 100%;
	right: 0;
}
.e5e-btn:hover .file-yinping{
	display: block;
}

/*首页搜索*/
.home-search{
	 height: 34px;
	 border-radius: 20px;
	 border: 1px solid #eff1f3;
	 border-radius: 99px;
	 padding: 3px;
	 transform: all .2s;
	 display: flex;
	 align-items: center;
}
.home-search .icon-sousuo1{
	color: #93a6b6;
}
.home-search:hover{
	border-color: var(--main_light);
	background: var(--main_extra_light);
}
.home-search:hover .home-search-btn{
	background: var(--main_color) !important;
	color: #fff  !important;
}
.switch{
	background: #f5f7fa;
	height: 40px;
	padding: 2px;
	font-size: 14px;
	border-radius: 999px;
}
.switch-item{
	position: relative;
	z-index: 2;
	width: 56px;
	text-align: center;
	cursor: pointer;
	color: #6f7c87;
	transition: all .2s;
}
.switch-item.on{
	color: #0043ec;
}
.switch .label{
	position: absolute;
	z-index:0;
	top: 2px;
	bottom: 2px;
	left: 2px;
	display: block;
	width: 56px;
	border-radius: 50px;
	background: #ffffff;
	margin: auto;
	transition: all .2s;
}
.switch .label.yes{
	left: 54px;
}
.edit-file:hover .pc-popup{
	display: block;
}
.pc-popup{
	position: absolute;
	border-radius: 20px;
	left: 100%;
	padding: 0 5px;
	position: absolute;
	z-index: 99;
	box-shadow: 0 2px 20px 0 #3B3D2C0D;
	box-shadow: 0 0 10px 0px rgba(205, 205, 205, 0.35);
	border-radius: 20px;
	background: var(--editBox-bg, #fff);
}
.yinshecontBox{
	padding: 10px;
	background:var(--edit-file-bg, #f5f7fa);
	border-radius: 10px;
	border: solid 1px #e4e5e7 ;
}
.form-item-lab{
	padding-left: 3px;
	font-size: 15px;
	margin-bottom:10px;
}
.form-itemBox{
	padding:10px 15px;
	background: #f6f7fb;
	border-radius: 10px;
}
.form-itemBox .e5e-input{
	color:#849aac;
}
.xz-item{
	/* margin: 0 10px; */
	padding: 10px;
}
.xz-item:hover{
	border-radius: 10px;
	background: #f5f7fa;
}
select option[disabled] {
  color: #999 !important; /* 灰色提示文字 */
}
.edit-file:hover .web-cosle{
	opacity: .8;
}
.web-cosle{
	display: none;
	position: absolute;
	z-index: 9;
	top: -4px;
	right: -4px;
	width: 20px;
	height: 20px;
	border-radius: 99px;
	background:#282828;
	border: solid 1px #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	opacity: 0;
}
.web-cosle:hover{
	opacity: 1;
}
.web-cosle .icon-dengluzhuceguanbi{
	font-size: 13px;
}
.zp-more{
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom:-200px;
	background-image: linear-gradient( rgba(0,0,0,0),rgba(0,0,0,.3));
	color: #fff;
	padding: 12px;
	transition: all .2s;
}
.is-pointer:hover .zp-more{
	bottom: 0;
}
.sale{
	width: 72px;
	border: 1px solid var(--main_color);
	border-radius: 15px;
	text-align: center;
	overflow: hidden;
}
.sale-hd{
	height: 24px;
	background:var(--main_color) ;
	color: #fff;
}
.jianBox{
	width:720px;
	height: auto;
	background: var(--editBox-bg, #fff);
	padding: 0 20px;
}

/* 容器：模拟音频条整体 */
.audio-bar {
		height: 40px;
		background-color: #91a8de; /* 蓝色背景 */
		border-radius: 6px;
		position: relative;
		overflow: hidden;
		cursor: pointer;
}

/* 两端波形图：用背景图模拟 */
.wave-start, .wave-end {
		position: absolute;
		height: 100%;
		width: 120px;
		background-image: url("data:image/svg+xml,%3Csvg t='1766973005447' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='20667' width='24' height='24'%3E%3Cpath fill='%23007aff' d='M128 558.08c-15.36 0-25.6-10.24-25.6-25.6V414.72c0-15.36 10.24-25.6 25.6-25.6s25.6 15.36 25.6 25.6v112.64c0 20.48-10.24 30.72-25.6 30.72zM235.52 670.72c-15.36 0-25.6-10.24-25.6-25.6V302.08c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v343.04c0 15.36-10.24 25.6-25.6 25.6zM455.68 660.48c-15.36 0-25.6-10.24-25.6-25.6V317.44c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v317.44c0 10.24-10.24 25.6-25.6 25.6zM675.84 614.4c-15.36 0-25.6-10.24-25.6-25.6V358.4c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v230.4c0 15.36-15.36 25.6-25.6 25.6zM348.16 773.12c-15.36 0-25.6-10.24-25.6-25.6V199.68c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v552.96c0 10.24-10.24 20.48-25.6 20.48zM783.36 563.2c-15.36 0-25.6-10.24-25.6-25.6V409.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v133.12c0 10.24-10.24 20.48-25.6 20.48zM896 512c-15.36 0-25.6-10.24-25.6-25.6V460.8c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v25.6c0 15.36-10.24 25.6-25.6 25.6zM568.32 527.36c-15.36 0-25.6-10.24-25.6-25.6v-51.2c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v51.2c0 10.24-15.36 25.6-25.6 25.6z' p-id='20668'/%3E%3C/svg%3E");
		background-repeat: repeat-x;
		background-position:center;
}
.wave-start { left: 0; }
.wave-end { right: 0; }

/* 白色选区：可拖动、调整大小 */
.selection-bar {
		position: absolute;
		right: 100px; /* 初始位置 */
		width: 200px; /* 初始宽度 */
		height: 100%;
		background-color: #0043ec;
		border-radius: 6px;
		cursor: move;
		/* 选区右侧波形（白色背景+灰色波形） */
		/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cpath d='M0,30 L5,20 L10,35 L15,25 L20,40 L25,28 L30,38 L35,22 L40,32 L45,18 L50,35 L55,20 L60,30 L65,25 L70,40 L75,28 L80,38 L85,22 L90,32 L95,18 L100,35 L105,20 L110,30 L115,25 L120,30' stroke='%23888' stroke-width='2' fill='none'/%3E%3C/svg%3E"); */
		background-image: url("data:image/svg+xml,%3Csvg t='1766973005447' fill="#fff" class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='20667' width='24' height='24'%3E%3Cpath fill='%23007aff' d='M128 558.08c-15.36 0-25.6-10.24-25.6-25.6V414.72c0-15.36 10.24-25.6 25.6-25.6s25.6 15.36 25.6 25.6v112.64c0 20.48-10.24 30.72-25.6 30.72zM235.52 670.72c-15.36 0-25.6-10.24-25.6-25.6V302.08c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v343.04c0 15.36-10.24 25.6-25.6 25.6zM455.68 660.48c-15.36 0-25.6-10.24-25.6-25.6V317.44c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v317.44c0 10.24-10.24 25.6-25.6 25.6zM675.84 614.4c-15.36 0-25.6-10.24-25.6-25.6V358.4c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v230.4c0 15.36-15.36 25.6-25.6 25.6zM348.16 773.12c-15.36 0-25.6-10.24-25.6-25.6V199.68c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v552.96c0 10.24-10.24 20.48-25.6 20.48zM783.36 563.2c-15.36 0-25.6-10.24-25.6-25.6V409.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v133.12c0 10.24-10.24 20.48-25.6 20.48zM896 512c-15.36 0-25.6-10.24-25.6-25.6V460.8c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v25.6c0 15.36-10.24 25.6-25.6 25.6zM568.32 527.36c-15.36 0-25.6-10.24-25.6-25.6v-51.2c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v51.2c0 10.24-15.36 25.6-25.6 25.6z' p-id='20668'/%3E%3C/svg%3E");
		background-repeat: repeat-x;
		background-position: center;
		
		
}

/* 选区拖动/调整的手柄 */
.handle {
		position: absolute;
		z-index: 3;
		width: 4px;
		top: 6px;
		height: 28px;
		border-radius: 4px;
		background-color: #fff;
		cursor: ew-resize;
}
.handle-left { left: 4px; }
.handle-right { right: 4px; }