html, body {
	max-width: 100%;
	overflow-x: hidden;
}
.auth-page {
	max-width: 100%;
	overflow-x: hidden;
}
.login-title {
	background: linear-gradient(90deg, #f8fafc 0%, #7dd3fc 40%, #c4b5fd 70%, #f8fafc 100%);
	background-size: 220% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: extraTitleShine 4.5s ease-in-out infinite;
}
.auth-modal {
	animation: extraCardFloat 6s ease-in-out infinite;
}
.panda-peek .pupils {
	transform-origin: center;
	animation: extraPandaBlink 5.5s ease-in-out infinite;
}
.login-pills em {
	animation: extraPillBob 3.2s ease-in-out infinite;
}
.login-pills em:nth-child(2) { animation-delay: 0.5s; }
.auth-dust {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	contain: strict;
}
.auth-dust span {
	position: absolute;
	bottom: -10px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(125, 211, 252, 0.55);
	box-shadow: 0 0 10px rgba(56, 189, 248, 0.45);
	animation: extraDustUp 12s linear infinite;
}
.auth-dust span:nth-child(3n) { background: rgba(196, 181, 253, 0.5); width: 3px; height: 3px; }
.auth-dust span:nth-child(4n) { background: rgba(251, 191, 36, 0.4); }
.auth-orbit {
	position: absolute;
	inset: 10px 4px 4px;
	pointer-events: none;
	z-index: 3;
	overflow: hidden;
	contain: strict;
	animation: extraSpin 10s linear infinite;
}
.auth-orbit i {
	position: absolute;
	top: 0;
	left: 50%;
	width: 7px;
	height: 7px;
	margin-left: -3px;
	border-radius: 50%;
	background: #38bdf8;
	box-shadow: 0 0 10px #38bdf8;
}
.auth-orbit i:nth-child(2) {
	top: auto;
	bottom: 0;
	background: #c4b5fd;
	box-shadow: 0 0 10px #c4b5fd;
}
.form-control:focus,
.form-select:focus {
	animation: extraFieldGlow 1.6s ease-in-out infinite;
}
@keyframes extraTitleShine {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}
@keyframes extraCardFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
@keyframes extraPandaBlink {
	0%, 40%, 46%, 100% { opacity: 1; }
	43% { opacity: 0; }
}
@keyframes extraPillBob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}
@keyframes extraDustUp {
	0% { transform: translateY(0) scale(0.6); opacity: 0; }
	15% { opacity: 0.8; }
	100% { transform: translateY(-110vh) scale(1); opacity: 0; }
}
@keyframes extraSpin {
	to { transform: rotate(360deg); }
}
@keyframes extraFieldGlow {
	0%, 100% { box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15), 0 8px 24px rgba(56, 189, 248, 0.08); }
	50% { box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.22), 0 10px 28px rgba(129, 140, 248, 0.16); }
}
@media (max-width: 768px) {
	html, body {
		overflow-x: hidden;
		overscroll-behavior-x: none;
	}
	.auth-dust,
	.auth-orbit,
	.auth-bg-ring {
		display: none !important;
	}
	.auth-modal {
		animation: none;
	}
	.login-pills em {
		animation: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.login-title, .auth-modal, .panda-peek .pupils, .login-pills em, .auth-dust span, .auth-orbit, .form-control:focus {
		animation: none !important;
	}
}