/* static/loader.css - Enhanced LoaderFive-style multi-ring loader */
.loader-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: radial-gradient(900px 900px at 50% 50%, rgba(10, 16, 24, 0.96), rgba(6, 9, 14, 0.82));
	backdrop-filter: blur(12px) saturate(120%);
	transition: opacity 0.25s ease, visibility 0.25s ease;
	opacity: 1;
	visibility: visible;
}

.loader-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.loader-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: 2.25rem 2.5rem;
	border-radius: 16px;
	background: color-mix(in oklab, var(--panel) 85%, rgba(0, 0, 0, 0.2));
	border: 1px solid color-mix(in oklab, var(--mint) 25%, var(--border));
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
	color: var(--text);
	min-width: min(320px, 90vw);
}

/* Sleek single spinner */
.loader-spinner {
	width: 48px;
	height: 48px;
	border: 3px solid color-mix(in oklab, var(--panel-2) 60%, transparent);
	border-top-color: var(--mint);
	border-radius: 50%;
	animation: loader-spin-modern 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.loader-text {
	font-weight: 600;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	text-align: center;
}

.loader-sub {
	font-size: 0.9rem;
	line-height: 1.4;
	color: color-mix(in oklab, var(--muted) 85%, var(--text));
	text-align: center;
	max-width: 26ch;
}

@keyframes loader-spin-modern {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


/* ========================================
   Light Mode Overrides
   ======================================== */

html.light .loader-overlay {
	background: rgba(248, 250, 252, 0.95);
}

html.light .loader-spinner {
	border-color: rgba(16, 185, 129, 0.2);
	border-top-color: var(--mint);
}

html.light .loader-text {
	color: rgba(10, 30, 28, 0.85);
}


/* ========================================
   Light Mode Overrides
   ======================================== */

html.light .loader-overlay {
	background: rgba(248, 250, 252, 0.95);
}

html.light .loader-card {
	background: rgba(255, 255, 255, 0.9);
	border-color: rgba(15, 23, 42, 0.08);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}

html.light .loader-spinner {
	border-color: rgba(16, 185, 129, 0.2);
	border-top-color: var(--mint);
}

html.light .loader-text {
	color: rgba(10, 30, 28, 0.85);
}