@layer custom {

	:root {
		--page-background: var(--color-background) !important;
	}

	.custom__general-container {
		border: 2px solid transparent !important;
		background:
			linear-gradient(rgb(var(--color-background)), rgb(var(--color-background))) padding-box,
			linear-gradient(135deg, rgb(119 42 190 / 0.6) 10%, rgb(4 138 191 / 0.6), rgb(72 197 255 / 0.3)) border-box !important;

		@media (max-width: 39.999rem) {
			border: 0 !important;
		}
	}

	.custom__panel {
		background: #06295e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon fill='%2305224d' points='0,75 100,69.6 100,100 0,100'/%3E%3Cpolygon fill='%23041a38' points='0,75.9 100,77.6 100,100 0,100'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;

		--color-background: 226 232 240 !important;
		color: rgb(226 232 240) !important;
		isolation: isolate !important;

		&::after {
			content: '' !important;
			position: absolute !important;
			inset: 0 !important;
			z-index: -1 !important;
			border-radius: inherit !important;
			clip-path: polygon(0 85%, 100% 78%, 100% 100%, 0 100%) !important;
			background: rgb(var(--page-background)) !important;
			pointer-events: none !important;
		}

		@media (max-width: 39.999rem) {
			--panel-padding-bottom: 9rem;
			padding-bottom: var(--panel-padding-bottom) !important;
			margin-bottom: -3rem !important;
			box-shadow: none !important;

			& ~ section {
				position: relative !important;
				z-index: 1 !important;
			}

			& .custom__powered-by {
				bottom: calc(var(--panel-padding-bottom) * 0.45) !important;
			}
		}
	}

	.custom__button-primary {
		--df-gradient: linear-gradient(-45deg, #772abe, #48c5ff);
		position: relative !important;
		isolation: isolate !important;
		border-color: transparent !important;
		border-radius: 18px !important;
		background: var(--df-gradient) !important;

		background-origin: border-box !important;
		color: #fff !important;
		font-weight: 600 !important;
		letter-spacing: 0.01em !important;
		box-shadow: 0 0 18px 1px rgb(1 6 12 / 0.2) !important;
		transition:
			transform 0.14s cubic-bezier(0.4, 0, 0.2, 1),
			filter 0.18s cubic-bezier(0.4, 0, 0.2, 1),
			box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;

		&:hover:not(:disabled),
		&:active:not(:disabled) {
			border-color: transparent !important;
			background: var(--df-gradient) !important;
			background-origin: border-box !important;
		}

		&:hover:not(:active):not(:disabled)::after {
			content: '' !important;
			position: absolute !important;
			inset: 0 !important;
			z-index: -1 !important;
			border-radius: 50% !important;
			background: var(--df-gradient) !important;
			opacity: 0.6 !important;
			filter: blur(12px) !important;
		}

		&:active:not(:disabled) {
			transform: scale(0.995) !important;
		}
	}

	.custom__button-secondary {
		position: relative !important;
		isolation: isolate !important;
		border-radius: 18px !important;
		background: rgb(1 6 12 / 0.1) !important;
		color: rgb(var(--color-text)) !important;
		font-weight: 600 !important;
		letter-spacing: 0.01em !important;
		box-shadow: 0 0 24px rgb(1 6 12 / 0.4) !important;
		transition:
			transform 0.14s cubic-bezier(0.4, 0, 0.2, 1),
			box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;

		&::before {
			content: '' !important;
			position: absolute !important;
			inset: 0 !important;
			border-radius: inherit !important;
			padding: 2px !important;
			background: linear-gradient(135deg, #772abe 10%, #048abf, #48c5ff) !important;

			-webkit-mask:
				linear-gradient(#fff 0 0) content-box,
				linear-gradient(#fff 0 0) !important;
			-webkit-mask-composite: xor !important;
			mask:
				linear-gradient(#fff 0 0) content-box exclude,
				linear-gradient(#fff 0 0) !important;
			pointer-events: none !important;
		}

		&:hover:not(:disabled),
		&:active:not(:disabled) {
			background: rgb(1 6 12 / 0.1) !important;
			color: rgb(var(--color-text)) !important;
		}

		&:hover:not(:active):not(:disabled)::after {
			content: '' !important;
			position: absolute !important;
			inset: 0 !important;
			z-index: -1 !important;
			border-radius: 50% !important;
			background: linear-gradient(-45deg, #772abe, #48c5ff) !important;
			opacity: 0.4 !important;
			filter: blur(12px) !important;
		}

		&:active:not(:disabled) {
			transform: scale(0.995) !important;
		}
	}
}