.gradient-decoration {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
}

.animated-gradient {
	background: linear-gradient(45deg, var(--color-primary), var(--color-primary-hover), var(--color-primary));
	background-size: 200% 200%;
	animation: gradientShift 3s ease infinite;
}
.fade-in {
	opacity: 0;
	animation: fadeIn 0.8s ease-in-out forwards;
}

.slide-up {
	opacity: 0;
	transform: translateY(30px);
	animation: slideUp 0.8s ease-out forwards;
}

.slide-up-delay {
	opacity: 0;
	transform: translateY(30px);
	animation: slideUp 0.8s ease-out 0.2s forwards;
}

.scale-in {
	opacity: 0;
	transform: scale(0.9);
	animation: scaleIn 0.6s ease-out forwards;
}

.stagger-1 {
	animation-delay: 0.1s;
}
.stagger-2 {
	animation-delay: 0.2s;
}
.stagger-3 {
	animation-delay: 0.3s;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

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

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.form-input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(147, 0, 180, 0.1), 0 0 20px rgba(147, 0, 180, 0.1);
}

.form-input {
	transition: all 0.3s ease;
}

/* Enhanced button hover effects with pulse and scale */
.btn-primary {
	background-color: var(--color-primary);
	transform: translateY(0) scale(1);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.btn-primary::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s;
}

.btn-primary:hover::before {
	left: 100%;
}

.btn-primary:hover {
	background-color: var(--color-primary-hover);
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 10px 25px -5px rgba(147, 0, 180, 0.3);
}

.btn-primary:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Enhanced CTA button with pulse animation */
.cta-button {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
	transform: translateY(0) scale(1);
	box-shadow: 0 8px 25px -5px rgba(147, 0, 180, 0.3);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.cta-button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.cta-button:hover::after {
	width: 300px;
	height: 300px;
}

.cta-button:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 15px 35px -5px rgba(147, 0, 180, 0.4);
}

.pulse {
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 8px 25px -5px rgba(147, 0, 180, 0.3);
	}
	50% {
		box-shadow: 0 8px 25px -5px rgba(147, 0, 180, 0.5);
	}
	100% {
		box-shadow: 0 8px 25px -5px rgba(147, 0, 180, 0.3);
	}
}

/* Success animation */
.success-checkmark {
	animation: checkmark 0.6s ease-in-out;
}

@keyframes checkmark {
	0% {
		transform: scale(0);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

/* Enhanced dark mode toggle animation */
.dark-mode-toggle {
	transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
	transform: scale(1.1);
}

.icon-rotate {
	transition: transform 0.3s ease;
}

.rotating {
	transform: rotate(720deg);
}
.hover-lift {
	transition: all 0.2s ease;
}

.hover-lift:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

html.dark .hover-lift:hover {
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.skeleton {
	background: linear-gradient(90deg, var(--muted) 25%, var(--border) 50%, var(--muted) 75%);
	background-size: 200px 100%;
	animation: shimmer 1.5s infinite;
	border-radius: 0.75rem;
}
.modal-backdrop {
	backdrop-filter: blur(8px);
	background: rgba(0, 0, 0, 0.6);
}
.excel-preview {
	font-family: "Times New Roman", monospace;
}

.pdf-preview {
	font-family: "Times New Roman", serif;
}

.word-preview {
	font-family: "Times New Roman", sans-serif;
}
.tab-active {
	background-color: var(--color-primary) !important;
	color: white;
}
.table-wrapper {
	overflow-x: auto;
	--webkit-overflow-scrolling: touch;
}