/* 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.5rem;
	padding: 2.5rem 2.8rem;
	border-radius: 20px;
	background: color-mix(in oklab, var(--panel) 70%, rgba(255, 255, 255, 0.06));
	border: 1px solid color-mix(in oklab, var(--mint) 30%, var(--border));
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
	color: var(--text);
	min-width: min(340px, 90vw);
}

/* LoaderFive-style multi-ring container */
.loader-five-container {
	position: relative;
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Three concentric spinning rings */
.loader-ring {
	position: absolute;
	border-radius: 50%;
	border-style: solid;
	border-color: transparent;
}

.loader-ring-1 {
	width: 100%;
	height: 100%;
	border-width: 3px;
	border-top-color: var(--mint);
	border-right-color: var(--mint);
	animation: loader-spin-1 2.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
	filter: drop-shadow(0 0 8px var(--mint));
}

.loader-ring-2 {
	width: 75%;
	height: 75%;
	border-width: 3px;
	border-bottom-color: rgba(34, 197, 94, 0.7);
	border-left-color: rgba(34, 197, 94, 0.7);
	animation: loader-spin-2 1.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite reverse;
	filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.5));
}

.loader-ring-3 {
	width: 50%;
	height: 50%;
	border-width: 2.5px;
	border-top-color: rgba(34, 197, 94, 0.5);
	border-right-color: rgba(34, 197, 94, 0.5);
	animation: loader-spin-3 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
	filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.3));
}

/* Pulsing core */
.loader-core {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--mint) 0%, rgba(34, 197, 94, 0.4) 100%);
	animation: loader-pulse 1.5s ease-in-out infinite;
	filter: drop-shadow(0 0 12px var(--mint));
}

.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-1 {
	0% { transform: rotate(0deg) scale(1); }
	50% { transform: rotate(180deg) scale(1.05); }
	100% { transform: rotate(360deg) scale(1); }
}

@keyframes loader-spin-2 {
	0% { transform: rotate(0deg) scale(1); }
	50% { transform: rotate(-180deg) scale(0.95); }
	100% { transform: rotate(-360deg) scale(1); }
}

@keyframes loader-spin-3 {
	0% { transform: rotate(0deg) scale(1); }
	50% { transform: rotate(180deg) scale(1.1); }
	100% { transform: rotate(360deg) scale(1); }
}

@keyframes loader-pulse {
	0%, 100% { 
		transform: scale(1); 
		opacity: 1;
	}
	50% { 
		transform: scale(1.3); 
		opacity: 0.7;
	}
}


/* ========================================
   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-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);
}