.mattock-forum {
	// Forum-specific styles
	.forum-bg {
		background-color: #f8fafc;
	}
	
	.forum-card {
		background-color: #ffffff;
	}
	
	.forum-border {
		border-color: #e2e8f0;
	}
	
	.forum-tag {
		background-color: #dbeafe;
	}
	
	.forum-expert {
		background-color: #fef3c7;
	}
	
	.forum-beginner {
		background-color: #dcfce7;
	}
	
	.forum-popular {
		background-color: #fce7f3;
	}
	
	// Button hover effect
	.btn-hover-effect {
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			transform: translate(-50%, -50%);
			transition: width 0.6s, height 0.6s;
		}
		
		&:hover::before {
			width: 300px;
			height: 300px;
		}
	}
	
	// Progress line animation
	@keyframes progress {
		0% {
			width: 0;
		}
		100% {
			width: 100%;
		}
	}
	
	.progress-line {
		animation: progress 1s ease-out forwards;
	}
	
	// Slide in animation
	@keyframes slideIn {
		from {
			transform: translateX(100px);
			opacity: 0;
		}
		to {
			transform: translateX(0);
			opacity: 1;
		}
	}
	
	.animate-slide-in {
		animation: slideIn 0.5s ease-out;
	}
	
	// Highlight animation
	@keyframes highlight {
		0% {
			background-color: #fbbf24;
		}
		100% {
			background-color: #f8fafc;
		}
	}
	
	.animate-highlight {
		animation: highlight 2s ease-in-out;
	}
	
	// Rotate animations
	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	
	@keyframes rotate-reverse {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(-360deg);
		}
	}
	
	.animate-rotate {
		animation: rotate 30s linear infinite;
	}
	
	.animate-rotate-reverse {
		animation: rotate-reverse 40s linear infinite;
	}
	
	// Gentle float animation
	@keyframes gentleFloat {
		0%, 100% {
			transform: translate(0, 0) scale(1);
		}
		50% {
			transform: translate(-20px, -30px) scale(1.1);
		}
	}
	
	.animate-gentle-float {
		animation: gentleFloat 20s infinite ease-in-out;
	}
	
	.hero-section {
		padding-bottom: 60px;
	}
	
	.bg-gradient-to-br {
		background-image: linear-gradient(to bottom right, #1e3a8a, #3b82f6);
	}
	
	.bg-gradient-to-br-2 {
		background-image: linear-gradient(to bottom right, #0a6027, #3b82f6);
	}
	
	.from-primary {
		--tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
		--tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
		--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
	}
	
	.to-primary-light {
		--tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
	}
	
	.text-white {
		--tw-text-opacity: 1;
		color: rgb(255 255 255 / var(--tw-text-opacity, 1));
	}
}

#recent {
	.el-form-item__error {
		font-size: 12px!important;
	}
}