/* 1. 基础重置 */
.types{
	width: 100%;
	height:100%;
	/* height:200px; */
	display:flex;
	align-items:center;      /* 整体垂直居中 */
	/* border:1px solid #333; */
	border-radius:10px;

	/* border:1px solid rgb(243, 199, 77); */
	/* border-radius: 10px; */
	
	/* background-color:rgba(221, 204, 46, 0.3) ; */
}

/* 类别标签基本样式 */
.types_name{
	display:inline-block;
	margin:4px 6px;
	padding:4px 8px;
	cursor:pointer;
	vertical-align:middle;   /* 垂直居中关键 */
}

.active{
	color:red;
}

.types_current{
	flex:0 0 200px;
	display:flex;            /* 用 flex 垂直居中文字 */
	align-items:center;
	justify-content:center;
	height:100%;
	position: relative;
	/* z-index:5; */
}
.types_current::before{
	content: "";
	width:300px;
	height: 100%; 
	/* height: 200px; */
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1; /* 关键修改：负值使伪元素沉到父元素背景层 */
	
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;

	background: linear-gradient(to left bottom, #fff 20%,rgba(139, 235, 219, 0.8) );
	/* background: linear-gradient(to left bottom, #fff 20%,rgba(255, 200, 227, 0.8) ); */
}

/* .types_current::after{
	content: "";
	background-color: red;
	width:500px;
	height: 500px;
	position: absolute;
	left: -250px;
	top: -200px;
	border-radius: 50%;
} */

.types_item{
	flex:1;
	height:100%;
	padding:2%;
	display:flex;            /* 让所有 .types_name 垂直居中 */
	align-items:center;
	flex-wrap:wrap;          /* 允许换行 */
	overflow-y:auto;         /* 溢出可滚动 */
	background: linear-gradient(to left bottom, #fff 20%,rgb(255, 253, 149) );
	/* background: linear-gradient(to left bottom, #fff 20%,rgba(226, 212, 87, 0.3) ); */
	/* background:#0ca678; */
	/* border-top-left-radius:10px; */
	border-top-right-radius:10px;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:10px;

	z-index:10;
	
}

/* 1px 宽自定义滚动条（仅垂直方向） */
.types_item::-webkit-scrollbar{width:1px}
.types_item::-webkit-scrollbar-thumb{background:#666}
.types_item{scrollbar-width:thin;scrollbar-color:#666 transparent}

/* 响应式设计 */
@media(max-width:800px){

	.types_current{
		flex:0 0 120px;
	}

	.types_item{
		padding:1%;
	}
}

/* 3. 小屏幕：上下布局（≤500px） */
@media(max-width:500px){
	.types{
		flex-direction: column; /* 变为垂直布局 */

		/* background-color: red; */
		background: linear-gradient(to top left, #fff 10%,rgb(121, 206, 245) );
		
		-webkit-mask: radial-gradient(circle at left 40px, #0000 5px, red 0), radial-gradient(circle at right 40px, #0000 5px, red 0);
			mask-repeat: repeat, repeat;
			mask-position-x: 0%, 0%;
			mask-position-y: 0%, 0%;
			mask-size: auto, auto;
		-webkit-mask-size: 51%;
		-webkit-mask-position: 0, 100%;
		-webkit-mask-repeat: no-repeat;
	}
	
	/* 调整当前分类容器 */
	.types_current {
		flex: 0 0 40px;
		width: 100%; /* 新增：填满容器宽度 */
		border-bottom: 1px dashed #fff;
	}
	/* 关键修复：重写伪元素样式 */
	.types_current::before {
		width: 100%; /* 宽度填满容器 */
		height: 100%; /* 高度跟随父元素 */

		/* 调整圆角为顶部圆角 */
		border-radius: 10px 10px 0 0 !important;
		background: none;

		/* 可选：调整渐变方向 */
		/* background: linear-gradient(to left bottom, #fff 20%, rgba(139, 235, 219, 0.8)); */
	}

	.types_item{
		flex:1;
		overflow-y:auto;
		border-bottom-left-radius: 10px;
		background: none;
	}


	/* 1px 宽自定义滚动条 */
	/* .types_item::-webkit-scrollbar{width:1px}
	.types_item::-webkit-scrollbar-thumb{background:#666}
	.types_item{scrollbar-width:thin;scrollbar-color:#666 transparent} */
}