/* 容器样式 */

.types_site {
	border-radius:10px;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: 35px 1fr;
}
 
/* .intro {
	border-radius:10px;
	background: linear-gradient(to right bottom, #fff 10%,#23b34e);
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: 35px 1fr;
} */

/* 横向卡片区 - 响应式设计 */
.tabs {
	display: flex;
	/* gap: 4px; */
	margin-bottom: -1px;
	/* 与内容区重叠1px避免双边框 */
	overflow-x: auto;
	/* 小屏幕允许横向滚动 */
	scrollbar-width: none;
	/* 隐藏滚动条 - Firefox */
	-ms-overflow-style: none;
	/* 隐藏滚动条 - IE/Edge */
}

.tabs::-webkit-scrollbar {
	display: none;
	/* 隐藏滚动条 - Chrome/Safari */
}

.tab {
	padding: 6px 20px;
	background: #fff;
	border: 1px solid #ddd;
	/* border-radius: 10px 10px 0 0; */
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
	/* 防止文字换行 */
	flex-shrink: 0;
	/* 防止标签缩小 */
	font-size: 14px;
	color: #333;
	position: relative;
}

.tab:first-of-type{
	border-top-left-radius: 10px;
}

.tab:last-of-type{
	border-top-right-radius: 10px;
}

.tab:hover {
	cursor: pointer;
	background: #f0f7ff;
	color:rgb(0, 78, 156);
}

.tab.active {
	/* color: #fff; */
	/* border-bottom: 2px solid #fff; */	
	background: #7bd195;
	z-index: 1; /* 确保活动标签在上层 */
	border:1px solid #7bd195;
}

.tab.active::after {
	content: "";
	width:5px;
	height:5px;
	border-radius: 50%;
	background-color: #ff0000;
	position: absolute;
	top: 10px;
	left:10px;
}

/* 内容区 */
.panels {
	position: relative;
	background-color: #fff;
	scrollbar-width: none; /* Firefox */
	border-radius: 0 0 10px 10px;
	border: 2px solid #7bd195;
	/* border-top: none; */
	/* overflow-y: scroll; */
}

/* .panels::-webkit-scrollbar {
	width: 0; 
} */
.panel {
	/* position: relative; */
	display: none;
	background: #fff;
	/* border: 1px solid #ddd; */
	border-radius: 0 0 10px 10px;
	height: 100%;
	max-height: 200px;
	overflow-x: hidden; /* 滚动内容区域 */
	overflow-y: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.panel.active {
	display: block;
	/* animation: fadeIn 0.3s ease; */
	/* border:1px solid #23b34e; */
}

.panel-content{
	/* background-color: #ffc400; */
	padding:10px 10px 10px 20px;
	width: 100%;
	max-height: 170px;
	/* max-height: 100px; */
	overflow-x: hidden; /* 滚动内容区域 */
	overflow-y: scroll; /* 滚动内容区域 */
}
.panel-content::-webkit-scrollbar {
  height: 100%;
  overflow-y: scroll; /* 滚动内容区域 */
  padding-bottom: 30px; /* 给 .more 留空间，避免遮挡 */
}

.panel-content > a{
	height:30px;
	
	margin-right:20px;
	/* padding-right:10px; */
	border-radius: 5px;
	align-items: center;
	align-content: center;
	justify-items: center;
	/* background-color: #7bd195; */

	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	
	/* border:1px solid #23b34e; */
}

.panel> .more{
	position: absolute;
	right:0;
	bottom:0;

	text-align: center;
	vertical-align:middle;
	font-size: 14px;
	width:70px;
	height:25px;
	line-height:25px;

	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	border-top-left-radius: 15px;
	border-bottom-right-radius: 10px;

	color:#fff;
	background-color: #ffc400;
}

.panel-content > a > img{
	width:20px;
	height:20px;
	/* background-color:rgb(250, 66, 66); */
}

.panel-content > a > span{
	padding-left:5px;
}

.types_icon{
	width: 20px;
	height: 20px;
	/* background-color: #d1d1d1; */
}
/* 字符容器的替代样式 */
.types_icon_fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	color:#fff;
	background-color:rgb(82, 82, 82); 
	/* border:1px solid #000; */
	/* border-radius: 5px;      */
	font-weight: bold;         /* 字符加粗 */
	font-size:12px;
	/* line-height:100%; */
	/* font-style: italic; */
}

/* 动画效果 */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(5px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 响应式调整 */
@media (max-width: 768px) {
	body {
		padding: 10px;
	}

	.tab {
		padding: 10px 16px;
		font-size: 13px;
	}

	.panel {
		padding: 15px;
		min-height: 100px;
	}
}

@media (max-width: 480px) {
	.tab {
		padding: 8px 12px;
	}

	.panel {
		padding: 12px;
		border-radius: 0 0 10px 10px;
	}

	.tabs {
		border-radius: 10px 10px 0 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* iOS平滑滚动 */
	}
}