body {
	min-height: 100vh;
	background: #100d17;
	color: #eeeaf5;
}

:root,
[data-bs-theme="dark"] {
	--bs-primary: #9b6cff;
	--bs-primary-rgb: 155, 108, 255;
	--bs-link-color: #b99aff;
	--bs-link-hover-color: #d0bcff;
	--bs-body-bg: #100d17;
	--bs-body-bg-rgb: 16, 13, 23;
	--bs-secondary-bg: #191522;
	--bs-secondary-bg-rgb: 25, 21, 34;
	--bs-tertiary-bg: #211b2c;
	--bs-tertiary-bg-rgb: 33, 27, 44;
	--bs-border-color: #3c324d;
}

.navbar {
	background: #15111d;
}

.card {
	--bs-card-bg: #191522;
	border-color: #3c324d;
}

.btn-success {
	--bs-btn-bg: #8b5cf6;
	--bs-btn-border-color: #8b5cf6;
	--bs-btn-hover-bg: #7c4ee3;
	--bs-btn-hover-border-color: #7c4ee3;
	--bs-btn-active-bg: #7044d2;
	--bs-btn-active-border-color: #7044d2;
	--bs-btn-disabled-bg: #55456f;
	--bs-btn-disabled-border-color: #55456f;
}

.btn-outline-success {
	--bs-btn-color: #b99aff;
	--bs-btn-border-color: #8b5cf6;
	--bs-btn-hover-bg: #8b5cf6;
	--bs-btn-hover-border-color: #8b5cf6;
}

.text-bg-success {
	background-color: #8b5cf6 !important;
}

.service-nav .nav-link {
	border-bottom: 2px solid transparent;
}

.service-nav .nav-link.active {
	border-bottom-color: var(--bs-primary);
	color: var(--bs-emphasis-color);
}

.credit-balance {
	color: #d0bcff;
	background: #2a1f3d;
	border: 1px solid #634b8c;
	border-radius: var(--bs-border-radius);
	padding: 0.35rem 0.65rem;
}

.auth-card {
	max-width: 430px;
	margin-top: 8vh;
}

.convert-form .form-label {
	font-weight: 650;
}

.substitution-row {
	padding: 0.75rem;
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	background: var(--bs-light-bg-subtle);
}

.job strong {
	max-width: 13rem;
}

.bloxd-picker {
	position: fixed;
	z-index: 1080;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.empty-state {
	border: 1px dashed var(--bs-border-color);
	border-radius: var(--bs-border-radius);
}

.credit-price {
	background: #211b2c;
	border-color: #4b3d61 !important;
}

.credit-price.is-insufficient {
	color: #ffb4b4;
	background: #32191f;
	border-color: #a94757 !important;
}

.credit-price.is-insufficient a {
	color: #ffd0d0;
	font-weight: 600;
}

.upload-status-panel {
	border: 1px solid #514169;
	border-radius: var(--bs-border-radius);
	background: linear-gradient(180deg, #211b2c 0%, #191522 100%);
	padding: 1.25rem;
}

.upload-percent {
	color: #d0bcff;
	font-size: 1.35rem;
	line-height: 1;
}

.block-morph {
	display: flex;
	justify-content: center;
	margin: 0.75rem 0 1.5rem;
	overflow: hidden;
}

.block-morph-track {
	position: relative;
	width: min(100%, 18rem);
	height: 5.25rem;
	border-bottom: 2px solid #514169;
	perspective: 38rem;
}

.block-morph-shape {
	position: absolute;
	left: 0.4rem;
	bottom: 0.95rem;
	width: 3rem;
	height: 3rem;
	transform-style: preserve-3d;
	transform-origin: 50% 100%;
	animation: block-roll 3.2s ease-in-out infinite;
}

.block-face {
	position: absolute;
	inset: 0;
	border: 1px solid #d0bcff;
	border-radius: 0.18rem;
	box-shadow: inset 0 0 0.85rem rgba(255, 255, 255, 0.12);
	animation: block-face 3.2s ease-in-out infinite;
}

.block-face-front {
	background: linear-gradient(135deg, #b99aff 0%, #8b5cf6 58%, #6541bc 100%);
	box-shadow: 0 0.5rem 1.4rem rgba(139, 92, 246, 0.45), inset 0 0 0.85rem rgba(255, 255, 255, 0.14);
	transform: translateZ(1.5rem);
}

.block-face-top {
	background: linear-gradient(135deg, #d9ccff 0%, #a987ff 100%);
	transform: rotateX(90deg) translateZ(1.5rem);
	transform-origin: 50% 50%;
}

.block-face-right {
	background: linear-gradient(135deg, #7854dc 0%, #4d358f 100%);
	transform: rotateY(90deg) translateZ(1.5rem);
	transform-origin: 50% 50%;
}

@keyframes block-roll {
	0% {
		transform: translateX(0) rotateX(-18deg) rotateY(32deg) rotateZ(0deg) scaleY(1);
	}

	42% {
		transform: translateX(7.2rem) rotateX(-18deg) rotateY(32deg) rotateZ(315deg) scaleY(1);
	}

	50% {
		transform: translateX(7.8rem) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleY(0.12);
	}

	58% {
		transform: translateX(8.4rem) rotateX(-18deg) rotateY(32deg) rotateZ(405deg) scaleY(1);
	}

	100% {
		transform: translateX(14rem) rotateX(-18deg) rotateY(32deg) rotateZ(720deg) scaleY(1);
	}
}

@keyframes block-face {
	0%,
	42%,
	58%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.18;
	}
}

@media (max-width: 767.98px) {
	.navbar .container-fluid {
		flex-wrap: wrap;
		gap: 0.5rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	.service-nav {
		order: 3;
		width: 100%;
		margin-left: 0 !important;
		justify-content: space-around;
	}

	.block-morph-track {
		width: min(100%, 15rem);
	}

	@keyframes block-roll {
		0% {
			transform: translateX(0) rotateX(-18deg) rotateY(32deg) rotateZ(0deg) scaleY(1);
		}

		42% {
			transform: translateX(5.8rem) rotateX(-18deg) rotateY(32deg) rotateZ(315deg) scaleY(1);
		}

		50% {
			transform: translateX(6.4rem) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleY(0.12);
		}

		58% {
			transform: translateX(7rem) rotateX(-18deg) rotateY(32deg) rotateZ(405deg) scaleY(1);
		}

		100% {
			transform: translateX(11rem) rotateX(-18deg) rotateY(32deg) rotateZ(720deg) scaleY(1);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.block-morph-shape,
	.block-face {
		animation: none;
	}
}