:root {
	--addClass_primary-gradient-start: #4AA9FE;
	--addClass_primary-gradient-end: #76DCFE;
	--addClass_background-color: #F5F5F7;
	--addClass_shadow-color: rgba(0, 0, 0, 0.1);
	--addClass_text-color: #333;
	--addClass_border-radius: 8px;
	--addClass_transition-time: 0.3s;
}

#page_addClass{
	margin: 0;
	padding: 0 0 66px 0;
	box-sizing: border-box;
	font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
	background-color: var(--addClass_background-color);
	color: var(--addClass_text-color);
	min-height: 100vh;
	width: 100%;
	overflow-x: hidden;
}

.addClass_container {
	width: 100%;
	margin: 0 auto;
	padding: 20px;
}

.addClass_grade-section {
	background: white;
	border-radius: var(--addClass_border-radius);
	margin-bottom: 20px;
	padding: 25px;
	box-shadow: 0 4px 12px var(--addClass_shadow-color);
	transition: all var(--addClass_transition-time);
	border-left: 4px solid var(--addClass_primary-gradient-start);
}

.addClass_grade-section:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px var(--addClass_shadow-color);
}

.addClass_grade-title {
	font-size: 1.5rem;
	margin-bottom: 15px;
	color: var(--addClass_primary-gradient-start);
	display: flex;
	align-items: center;
	border-bottom: 2px solid rgba(74, 169, 254, 0.2);
	padding-bottom: 10px;
}

.addClass_grade-title i {
	margin-right: 10px;
	background: linear-gradient(to right, var(--addClass_primary-gradient-start), var(--addClass_primary-gradient-end));
	color: white;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.addClass_input-group {
	display: flex;
	margin-bottom: 15px;
	flex-wrap: wrap;
	align-items: center;
}

.addClass_input-group label {
	margin-right: 10px;
	font-weight: 600;
	width: 120px;
}

.addClass_input {
	flex: 1;
	padding: 12px 15px;
	border: 2px solid #eee;
	border-radius: var(--addClass_border-radius);
	margin-right: 15px;
	min-width: 80px;
	max-width: 150px;
	transition: all var(--addClass_transition-time);
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.addClass_input:focus {
	outline: none;
	border-color: var(--addClass_primary-gradient-start);
	box-shadow: 0 0 0 3px rgba(74, 169, 254, 0.2);
}

.addClass_btn {
	background: linear-gradient(to right, var(--addClass_primary-gradient-start), var(--addClass_primary-gradient-end));
	color: white;
	border: none;
	padding: 12px 25px;
	border-radius: var(--addClass_border-radius);
	cursor: pointer;
	font-weight: 600;
	transition: all var(--addClass_transition-time);
	box-shadow: 0 3px 8px var(--addClass_shadow-color);
	position: relative;
	overflow: hidden;
}

.addClass_btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.2);
	transition: width 0.3s ease;
}

.addClass_btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 12px var(--addClass_shadow-color);
}

.addClass_btn:hover::after {
	width: 100%;
}

.addClass_btn:active {
	transform: translateY(0);
}

.addClass_btn i {
	margin-right: 8px;
}

.addClass_classes-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 15px;
}

.addClass_class-tag {
	background: linear-gradient(135deg, var(--addClass_primary-gradient-start), var(--addClass_primary-gradient-end));
	color: white;
	padding: 10px 18px;
	border-radius: var(--addClass_border-radius);
	display: inline-flex;
	align-items: center;
	margin-right: 10px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: all var(--addClass_transition-time);
	box-shadow: 0 3px 8px var(--addClass_shadow-color);
}

.addClass_class-tag i {
	margin-right: 8px;
}

.addClass_class-tag:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 5px 12px var(--addClass_shadow-color);
	background: linear-gradient(135deg, var(--addClass_primary-gradient-end), var(--addClass_primary-gradient-start));
}

.addClass_toast-container {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 9999;
}

.addClass_toast {
	background: linear-gradient(135deg, var(--addClass_primary-gradient-start), var(--addClass_primary-gradient-end));
	color: white;
	padding: 15px 25px;
	border-radius: var(--addClass_border-radius);
	margin-bottom: 10px;
	box-shadow: 0 4px 15px var(--addClass_shadow-color);
	animation: addClass_fadeIn 0.3s, addClass_fadeOut 0.3s 2.7s;
	opacity: 0;
	max-width: 300px;
	display: flex;
	align-items: center;
}

.addClass_toast::before {
	content: '✓';
	margin-right: 10px;
	font-weight: bold;
}

@keyframes addClass_pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(74, 169, 254, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(74, 169, 254, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(74, 169, 254, 0);
	}
}

@keyframes addClass_fadeIn {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes addClass_fadeOut {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(30px);
	}
}

/* 响应式调整 */
@media (max-width: 768px) {
	.addClass_input-group {
		flex-direction: column;
		align-items: flex-start;
	}

	.addClass_input-group label {
		margin-bottom: 8px;
		width: 100%;
	}

	.addClass_input {
		width: 100%;
		max-width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}

	.addClass_btn {
		width: 100%;
	}
	
	.addClass_header h1 {
		font-size: 1.8rem;
	}
	
	.addClass_header p {
		font-size: 1rem;
	}
	
	.addClass_grade-title {
		font-size: 1.3rem;
	}
}

/* 额外添加的动画效果 */
.addClass_grade-section {
	animation: addClass_fadeIn 0.5s ease-out;
	animation-fill-mode: both;
}

/* 让每个年级区域按顺序显示 */
#addClass_gradeContainer .addClass_grade-section:nth-child(1) { animation-delay: 0.1s; }
#addClass_gradeContainer .addClass_grade-section:nth-child(2) { animation-delay: 0.2s; }
#addClass_gradeContainer .addClass_grade-section:nth-child(3) { animation-delay: 0.3s; }
#addClass_gradeContainer .addClass_grade-section:nth-child(4) { animation-delay: 0.4s; }
#addClass_gradeContainer .addClass_grade-section:nth-child(5) { animation-delay: 0.5s; }
#addClass_gradeContainer .addClass_grade-section:nth-child(6) { animation-delay: 0.6s; }
#addClass_gradeContainer .addClass_grade-section:nth-child(7) { animation-delay: 0.7s; }
#addClass_gradeContainer .addClass_grade-section:nth-child(8) { animation-delay: 0.8s; }
#addClass_gradeContainer .addClass_grade-section:nth-child(9) { animation-delay: 0.9s; }
#addClass_createClass{display:none}