#graphite-boot-loader {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	background: 
		radial-gradient(circle at 10% 20%, rgba(19, 76, 169, 0.08) 0%, transparent 40%),
		radial-gradient(circle at 90% 80%, rgba(65, 180, 95, 0.06) 0%, transparent 40%),
		radial-gradient(circle at 50% 50%, rgba(247, 181, 0, 0.03) 0%, transparent 35%),
		linear-gradient(135deg, #f8fafc 0%, #edf3fb 50%, #e2e8f0 100%);
	background-size: 200% 200%;
	background-position: 0% 0%;
	z-index: 2147483647;
	transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	animation: graphite-aurora-flow 20s ease infinite alternate;
}

html.graphite-preload-dark #graphite-boot-loader {
	background: 
		radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.12) 0%, transparent 45%),
		radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 45%),
		radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.06) 0%, transparent 35%),
		linear-gradient(135deg, #090d16 0%, #0b0f19 50%, #111827 100%);
	background-size: 200% 200%;
	background-position: 0% 0%;
	animation: graphite-aurora-flow 20s ease infinite alternate;
}

#graphite-boot-loader[data-state='hidden'] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.graphite-boot-loader-card {
	position: relative;
	width: min(var(--graphite-auth-panel-width, 31.5rem), 100%);
	padding: var(--graphite-auth-panel-padding-y, 1.5rem) var(--graphite-auth-panel-padding-x, 1.5rem);
	border-radius: var(--graphite-auth-card-radius, 1.5rem);
	background: var(--graphite-auth-panel-bg, rgba(255, 255, 255, 0.34));
	border: 1px solid var(--graphite-auth-panel-border, rgba(255, 255, 255, 0.5));
	backdrop-filter: blur(24px) saturate(120%);
	-webkit-backdrop-filter: blur(24px) saturate(120%);
	box-shadow: var(--graphite-auth-panel-shadow, 0 4px 30px rgba(15, 23, 42, 0.03), 0 30px 70px rgba(15, 23, 42, 0.08));
	overflow: hidden;
	animation: graphite-card-fade-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

html.graphite-preload-dark .graphite-boot-loader-card {
	background: var(--graphite-auth-panel-bg-dark, rgba(26, 32, 44, 0.45));
	border-color: var(--graphite-auth-panel-border-dark, rgba(255, 255, 255, 0.08));
	box-shadow: var(--graphite-auth-panel-shadow-dark, 0 4px 30px rgba(0, 0, 0, 0.2), 0 30px 70px rgba(0, 0, 0, 0.4));
}

.graphite-boot-loader-card::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, #134ca9 0%, #1f7ae0 50%, #41b45f 100%);
	opacity: 0.8;
}

html.graphite-preload-dark .graphite-boot-loader-card::before {
	background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #10b981 100%);
}

.graphite-boot-loader-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	text-align: center;
}

.graphite-boot-loader-logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(100%, var(--graphite-auth-logo-width, 21rem));
	height: auto;
	transition: transform 0.3s ease;
	animation: graphite-logo-breath 4s ease-in-out infinite alternate;
}

html.graphite-preload-dark .graphite-boot-loader-logo-wrap {
	background: none;
	border-color: transparent;
	box-shadow: none;
}

.graphite-boot-loader-logo {
	width: 100%;
	height: auto;
	filter: none;
}

.graphite-boot-loader-logo-theme-dark {
	display: none;
}

html.graphite-preload-dark .graphite-boot-loader-logo-theme-light {
	display: none;
}

html.graphite-preload-dark .graphite-boot-loader-logo-theme-dark {
	display: block;
}

.graphite-boot-loader-title {
	font-family: 'Outfit', sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #0f172a;
	margin: 0;
}

html.graphite-preload-dark .graphite-boot-loader-title {
	color: #f8fafc;
}

.graphite-boot-loader-text {
	font-family: 'Outfit', sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.5;
	color: #475569;
	max-width: 22rem;
	margin: 0 0 0.5rem 0;
}

html.graphite-preload-dark .graphite-boot-loader-text {
	color: #cbd5e1;
}

.graphite-boot-loader-progress-track {
	width: 100%;
	max-width: 16rem;
	height: 6px;
	background: rgba(19, 76, 169, 0.08);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
	margin-top: 0.5rem;
}

html.graphite-preload-dark .graphite-boot-loader-progress-track {
	background: rgba(255, 255, 255, 0.1);
}

.graphite-boot-loader-progress-bar {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, #134ca9 0%, #1f7ae0 50%, #41b45f 100%);
	border-radius: 999px;
	position: absolute;
	left: -100%;
	animation: graphite-progress-slide 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

html.graphite-preload-dark .graphite-boot-loader-progress-bar {
	background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #10b981 100%);
}

@media (max-width: 640px) {
	#graphite-boot-loader {
		padding: 1rem;
	}

	.graphite-boot-loader-card {
		padding: var(--graphite-auth-panel-padding-y, 1rem) var(--graphite-auth-panel-padding-x, 1rem);
		border-radius: var(--graphite-auth-card-radius, 1.25rem);
	}

	.graphite-boot-loader-logo-wrap {
		width: min(100%, var(--graphite-auth-logo-width, 17rem));
	}
	
	.graphite-boot-loader-logo {
		width: 100%;
		height: auto;
	}
}

@keyframes graphite-aurora-flow {
	0% {
		background-position: 0% 0%;
	}
	50% {
		background-position: 100% 100%;
	}
	100% {
		background-position: 0% 100%;
	}
}

@keyframes graphite-card-fade-in {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes graphite-logo-breath {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.04);
	}
}

@keyframes graphite-progress-slide {
	0% {
		left: -100%;
		width: 30%;
	}
	50% {
		width: 40%;
	}
	100% {
		left: 100%;
		width: 20%;
	}
}