/* 主要样式文件 */
body {
	padding: 0px;
	margin: 0px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-family: "JinBu";
	overflow-x: hidden;
}

/* 动态头部背景样式 */
.dynamic-header {
	position: relative;
	overflow: hidden;
}

.dynamic-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(-45deg, #3366FF, #6699FF, #33CCFF, #66DDFF, #3366FF);
	background-size: 400% 400%;
	animation: gradientShift 8s ease infinite;
	z-index: 1;
}

.dynamic-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
	animation: floatingBubbles 12s ease-in-out infinite;
}

.header-content {
	position: relative;
	z-index: 2;
}

@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes floatingBubbles {

	0%,
	100% {
		transform: translateY(0px) rotate(0deg);
		opacity: 1;
	}

	33% {
		transform: translateY(-10px) rotate(120deg);
		opacity: 0.8;
	}

	66% {
		transform: translateY(-5px) rotate(240deg);
		opacity: 0.9;
	}
}

.main {
	padding: 0px;
	margin: 0px;
}

/* 修复右侧空白问题 */
.layui-row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.layui-col-space30>[class*="layui-col-"] {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

/* 移动端优化 */
@media (max-width: 768px) {
	body {
		/* padding: 8px; */
		font-size: 14px;
		/* 移动端触摸优化 */
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}

	/* 表单行间距优化 */
	.layui-form .layui-col-xs12 {
		margin-bottom: 10px;
	}

	.layui-form .layui-col-xs12:last-child {
		margin-bottom: 0;
	}

	/* 按钮组优化 */
	.layui-col-xs12[style*="display: flex"] {
		flex-wrap: wrap;
		gap: 5px;
		justify-content: space-between;
	}

	.layui-col-xs12[style*="display: flex"] .layui-btn {
		flex: 1;
		min-width: 60px;
		font-size: 12px;
		padding: 0px 0px;
		height: auto;
		min-height: 40px;
		border-radius: 8px;
		/* 触摸友好 */
		cursor: pointer;
	}

	/* 输入框优化 */
	.layui-input,
	.layui-textarea {
		height: 40px;
		font-size: 14px;
		border-radius: 8px;
		padding: 0 12px;
	}

	.layui-textarea {
		height: auto;
		padding: 12px;
	}

	/* 选择框优化 */
	select {
		height: 40px;
		font-size: 14px;
	}

	/* 头像和输入框容器优化 */
	.layui-input-wrap[style*="display: flex"] {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.layui-input-wrap[style*="display: flex"] #head {
		height: 32px;
		width: 32px;
		flex-shrink: 0;
		border-radius: 50%;
	}

	/* 分隔线优化 */
	hr {
		margin: 15px 0;
	}

	/* 行间距优化 */
	.layui-row {
		margin: 0 -5px;
	}

	.layui-row>[class*="layui-col-"] {
		padding: 0 5px;
		margin: 4px 0px;
	}
}

.title {
	font-size: 28px;
	font-weight: 800;
	text-align: center;
	color: #3366FF;
}

.layui-card {
	text-align: center;
	transition: .2s;
}

.layui-card:hover {
	border-radius: 8px;
	box-shadow: -1px 0 10px #3366FF;
	cursor: pointer;
}

.layui-card:active {
	box-shadow: 6px 6px 10px #3366FF;
}

.price {
	color: #ff7300;
	font-size: 12px;
	font-weight: 800;
}


#hooyoocode {
	height: 320px;
}

/* 移动端代码编辑区优化 */
@media (max-width: 768px) {
	#hooyoocode {
		height: 200px;
		font-size: 12px;
	}

	/* 单选按钮组优化 */
	#radio-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
	}

	#radio-container .layui-form-radio {
		margin-right: 0;
		font-size: 12px;
	}

	/* 操作按钮优化 */
	#run-code,
	#save-code {
		width: 48%;
		margin: 1%;
		font-size: 14px;
	}

	/* 示例代码区域优化 */
	pre {
		font-size: 10px;
		overflow-x: auto;
		padding: 8px;
		background-color: #f8f8f8;
		border-radius: 5px;
	}
}

#userList {
	height: calc(100vh - 80px);
	overflow: auto;
}

#gifList {
	height: calc(100vh - 80px);
	overflow: auto;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 1);
	border-radius: 3px;
}

::-webkit-scrollbar-thumb {
	background: rgba(51, 102, 255, 0.6);
	border-radius: 3px;
	transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(51, 102, 255, 0.8);
}

::-webkit-scrollbar-corner {
	background: transparent;
}

::-webkit-scrollbar-button {
	display: none;
}

/* Firefox滚动条样式 */
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(51, 102, 255, 0.6) rgba(0, 0, 0, 0.1);
}

/* 移动端列表优化 */
@media (max-width: 768px) {
	#userList {
		height: calc(30vh - 40px);
		margin-bottom: 15px;
	}

	#gifList {
		height: calc(50vh - 40px);
	}

	/* 用户列表项优化 */
	.user-item {
		margin-bottom: 2px;
		font-size: 12px;
	}

	.user-item .layui-input-group {
		width: 60px !important;
		height: 25px !important;
	}

	.user-item .layui-input-group .layui-input {
		height: 25px;
		font-size: 12px;
	}

	.uindex {
		width: 25px;
		font-size: 11px;
		margin-right: 5px;
	}

	#userList img {
		height: 28px !important;
		margin-right: 5px;
	}
}

#userList img {
	height: 36px;
	border-radius: 50%;
	margin-right: 10px;
}

.uindex {
	width: 30px;
	display: inline-block;
	text-align: center;
	background-color: #3366FF;
	color: #fff;
	border-radius: 4px;
	margin-right: 10px;
}

.user-item {
	/*    手形状的鼠标*/
	cursor: pointer;
	border-radius: 8px;
	/*    添加阴影过渡效果*/
	transition: .3s;
}

.user-item:hover {
	/*    浅灰色的阴影*/
	box-shadow: 0 0 10px #3366FF;
}

.layui-btn {
	background-color: #3366FF;
}

.layui-form-radio:hover>*,
.layui-form-radioed,
.layui-form-radioed>i {
	color: #3366FF;
}

.layui-btn-primary {
	color: #fff;
}

/* 礼物筛选按钮样式 */
.gift-filter-btn {
	margin: 2px;
	border-radius: 15px;
	transition: all 0.3s;
}

.gift-filter-btn.active {
	background-color: #3366FF;
	color: #fff;
	border-color: #3366FF;
}

.gift-filter-btn:not(.active) {
	background-color: #f8f8f8;
	color: #666;
	border-color: #ddd;
}

.gift-filter-btn:not(.active):hover {
	background-color: #e6f2ff;
	color: #3366FF;
	border-color: #3366FF;
}

/* 移动端礼物筛选按钮优化 */
@media (max-width: 768px) {
	.layui-btn-group {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 10px !important;
	}

	.gift-filter-btn {
		flex: 1;
		min-width: 70px;
		max-width: 90px;
		font-size: 11px;
		margin: 1px;
		height: auto;
		border-radius: 12px;
	}

	/* 礼物卡片优化 */
	.gifItem {
		margin-bottom: 8px;
		border-radius: 8px;
	}

	.gifItem .layui-card-header {
		font-size: 11px;
		line-height: 28px;
		height: auto;
	}

	.gifItem .layui-card-body {
		padding: 8px;
	}

	.gifItem .img {
		width: 36px !important;
		height: 36px !important;
	}

	.price {
		font-size: 10px;
	}
}