* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	width: 100%;
	height: 100%;
	overflow: hidden !important;
	scrollbar-gutter: auto !important;
	scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}
body {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	max-height: 100vh;
	background: var(--bg);
	font-family:
		-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
		Arial, sans-serif;
	color: var(--text);
	padding: 20px;
	overflow: hidden !important;
	scrollbar-gutter: auto !important;
	position: relative;
	user-select: none;
	-webkit-user-select: none;
}
body::before {
	content: '';
	position: fixed;
	inset: -18%;
	pointer-events: none;
	z-index: 0;
	background:
		linear-gradient(color-mix(in srgb, var(--text-muted) 10%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--text-muted) 8%, transparent) 1px, transparent 1px);
	background-size: 92px 92px;
	mask-image: radial-gradient(circle at center, #000 0 32%, transparent 68%);
	opacity: 0.5;
	animation: none;
}
body::after {
	content: '';
	position: fixed;
	inset: -18%;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(circle at 22% 26%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 26%),
		radial-gradient(circle at 78% 76%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 29%),
		 radial-gradient(circle at 48% 55%, color-mix(in srgb, var(--accent) 12%, #38bdf8), transparent 34%);
	animation: none;
	opacity: 0;
}
html.gradient-enabled body::after {
	opacity: 1;
}
html.gradient-live body::after {
	animation: loginSoftAura 18s ease-in-out infinite alternate;
	will-change: transform;
}
.login-aurora {
	display: none;
	position: fixed;
	inset: -48% -28%;
	z-index: 0;
	pointer-events: none;
	filter: blur(18px) saturate(1.22);
	opacity: 0.62;
	background:
		conic-gradient(
			from 90deg at 48% 52%,
			transparent 0deg,
			color-mix(in srgb, var(--accent) 44%, transparent) 34deg,
			color-mix(in srgb, var(--accent) 30%, #0ea5e9) 72deg,
			transparent 112deg,
			color-mix(in srgb, var(--accent) 18%, #22c55e) 176deg,
			color-mix(in srgb, var(--accent) 36%, #9c14b8) 236deg,
			color-mix(in srgb, var(--accent) 16%, #f472b6) 284deg,
			transparent 326deg,
			transparent 360deg
		);
	transform: rotate(-11deg) scale(1.08);
	animation: auroraFlow 18s ease-in-out infinite alternate;
	mix-blend-mode: screen;
}
.login-aurora::before {
	content: '';
	position: absolute;
	inset: 20% 9%;
	background:
		linear-gradient(105deg, transparent 12%, rgba(99, 102, 241, 0.3) 34%, transparent 58%),
		linear-gradient(74deg, transparent 28%, color-mix(in srgb, var(--accent) 22%, transparent) 49%, transparent 72%);
	border-radius: 46% 54% 48% 52%;
	filter: blur(14px);
	animation: none;
}
.login-aurora::after {
	content: '';
	position: absolute;
	inset: 12% 4%;
	background:
		linear-gradient(118deg, transparent 0 18%, color-mix(in srgb, var(--accent) 42%, #38bdf8) 28%, transparent 42% 100%),
		linear-gradient(62deg, transparent 0 38%, color-mix(in srgb, var(--accent) 38%, #a78bfa) 52%, transparent 66% 100%),
		linear-gradient(100deg, transparent 0 55%, color-mix(in srgb, var(--accent) 22%, #22c55e) 68%, transparent 82% 100%);
	border-radius: 38% 62% 44% 56%;
	filter: blur(12px);
	animation: none;
}
.login-ribbons {
	display: none;
	position: fixed;
	inset: -20%;
	z-index: 1;
	pointer-events: none;
	filter: blur(10px);
	opacity: 0.38;
	mix-blend-mode: screen;
}
.login-ribbons span {
	position: absolute;
	left: -12%;
	width: 125%;
	height: 90px;
	border-radius: 999px;
	background:
		linear-gradient(90deg, transparent 0%, rgba(125, 211, 252, 0.04) 12%, rgba(99, 102, 241, 0.34) 42%, rgba(34, 197, 94, 0.16) 63%, transparent 100%);
	transform: rotate(-16deg);
	animation: none;
}
.login-ribbons span:nth-child(1) {
	top: 24%;
	--r: -16deg;
	animation-delay: -1s;
}
.login-ribbons span:nth-child(2) {
	top: 47%;
	--r: 14deg;
	height: 66px;
	background:
		linear-gradient(90deg, transparent 0%, rgba(244, 114, 182, 0.05) 18%, rgba(14, 165, 233, 0.28) 45%, rgba(156, 20, 184, 0.24) 68%, transparent 100%);
	transform: rotate(14deg);
	animation-delay: -3s;
	animation-duration: 10s;
}
.login-ribbons span:nth-child(3) {
	top: 69%;
	--r: -9deg;
	height: 78px;
	background:
		linear-gradient(90deg, transparent 0%, rgba(34, 197, 94, 0.06) 12%, rgba(34, 197, 94, 0.24) 38%, rgba(99, 102, 241, 0.24) 62%, transparent 100%);
	transform: rotate(-9deg);
	animation-delay: -5s;
	animation-duration: 12s;
}
.login-light-sweep {
	display: none;
	position: fixed;
	inset: -40%;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(115deg, transparent 0 43%, rgba(255, 255, 255, 0.09) 49%, transparent 56% 100%);
	filter: blur(10px);
	opacity: 0.62;
	transform: translateX(-18%) rotate(4deg);
	animation: none;
	mix-blend-mode: soft-light;
}
.login-sparkles {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.18;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.34) 0 1px, transparent 1.8px),
		radial-gradient(circle, rgba(125, 211, 252, 0.26) 0 1px, transparent 1.8px);
	background-size: 92px 92px, 137px 137px;
	background-position: 0 0, 34px 52px;
	animation: none;
	mask-image: radial-gradient(circle at center, #000 0 34%, transparent 74%);
}
.login-pointer-glow {
	display: none;
	position: fixed;
	inset: -10%;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(
			circle at 48% 44%,
			rgba(255, 255, 255, 0.1) 0%,
			color-mix(in srgb, var(--accent) 22%, transparent) 14%,
			transparent 44%
		),
		radial-gradient(
			circle at 70% 68%,
			color-mix(in srgb, var(--accent-2) 16%, transparent) 0%,
			transparent 38%
		);
	filter: blur(14px) saturate(1.08);
	opacity: 0.38;
	mix-blend-mode: screen;
}
.login-pointer-glow::after {
	display: none;
}
@keyframes auroraFlow {
	0% {
		transform: translate3d(-4%, -3%, 0) rotate(-15deg) scale(1.08);
		background-position: 0% 50%;
	}
	50% {
		transform: translate3d(3%, 4%, 0) rotate(-6deg) scale(1.2);
		background-position: 70% 50%;
	}
	100% {
		transform: translate3d(5%, -2%, 0) rotate(-17deg) scale(1.12);
		background-position: 100% 50%;
	}
}
@keyframes auroraHue {
	0% {
		filter: blur(28px) saturate(1.5) hue-rotate(-10deg);
	}
	50% {
		filter: blur(30px) saturate(1.68) hue-rotate(18deg);
	}
	100% {
		filter: blur(28px) saturate(1.55) hue-rotate(38deg);
	}
}
@keyframes ribbonShift {
	from {
		transform: translateX(-4%) skewX(-8deg);
	}
	to {
		transform: translateX(5%) skewX(7deg);
	}
}
@keyframes ribbonSweep {
	from {
		transform: translate3d(-5%, -2%, 0) rotate(-4deg) scaleX(0.96);
	}
	to {
		transform: translate3d(7%, 3%, 0) rotate(5deg) scaleX(1.05);
	}
}
@keyframes ribbonRun {
	from {
		transform: translate3d(-8%, -8px, 0) rotate(var(--r, -16deg)) scaleX(0.95);
	}
	to {
		transform: translate3d(8%, 10px, 0) rotate(var(--r, -16deg)) scaleX(1.06);
	}
}
@keyframes lightSweep {
	0%,
	18% {
		transform: translateX(-35%) rotate(4deg);
		opacity: 0;
	}
	45% {
		opacity: 0.7;
	}
	82%,
	100% {
		transform: translateX(35%) rotate(4deg);
		opacity: 0;
	}
}
@keyframes gridDrift {
	to {
		background-position: 92px 92px;
	}
}
@keyframes sparkleDrift {
	to {
		background-position: 92px 46px, -34px 137px;
	}
}
@keyframes ambiencePulse {
	from {
		opacity: 0.62;
	}
	to {
		opacity: 1;
	}
}
@keyframes cursorBlob {
	from {
		transform: translate(-50%, -50%) rotate(-10deg) scale(0.92);
	}
	to {
		transform: translate(-50%, -50%) rotate(18deg) scale(1.08);
	}
}
@keyframes loginSoftAura {
	0% {
		transform: translate3d(-4%, -3%, 0) scale(1);
	}
	50% {
		transform: translate3d(4%, 3%, 0) scale(1.08);
	}
	100% {
		transform: translate3d(-1%, 5%, 0) scale(1.04);
	}
}
@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after,
	.login-aurora,
	.login-aurora::before,
	.login-aurora::after,
	.login-ribbons span,
	.login-light-sweep,
	.login-sparkles,
	.login-pointer-glow::after {
		animation: none !important;
	}
}
.login-card {
	position: relative;
	z-index: 2;
	background: color-mix(in srgb, var(--modal-bg) 86%, transparent);
	border: 1px solid var(--card-border);
	border-radius: 16px;
	padding: 40px 32px;
	width: 100%;
	max-width: 400px;
	box-shadow:
		0 24px 54px rgba(0, 0, 0, 0.28),
		0 0 46px var(--accent-shadow),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	text-align: center;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.login-title {
	font-size: 26px;
	font-weight: 800;
	margin-bottom: 6px;
	color: var(--text);
	letter-spacing: -0.5px;
}
.login-subtitle {
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: 28px;
}
.login-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: left;
}
.form-group label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-muted);
	margin-bottom: 8px;
}
.form-input {
	width: 100%;
	padding: 12px 14px;
	background: var(--input-bg);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	color: var(--text);
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s;
	user-select: text;
	-webkit-user-select: text;
}
.form-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.login-btn {
	width: 100%;
	padding: 13px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: var(--accent-text);
	border: 1px solid var(--accent-border);
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition:
		background 0.2s,
		opacity 0.2s,
		box-shadow 0.2s,
		transform 0.2s;
	margin-top: 6px;
	box-shadow: 0 10px 22px var(--accent-shadow);
}
.login-btn:hover {
	filter: brightness(1.02);
	transform: translateY(-1px);
	box-shadow: 0 14px 28px var(--accent-shadow);
}
.login-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.login-error {
	background: rgba(239, 68, 68, 0.15);
	border: 1px solid #ef4444;
	color: #fca5a5;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	margin-bottom: 16px;
	display: none;
	text-align: left;
}
.login-hint-box {
	margin-top: 24px;
	padding: 14px;
	border-radius: 8px;
	border: 1px dashed var(--card-border);
	background: color-mix(in srgb, var(--card-bg) 34%, transparent);
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
	text-align: center;
}
.login-legal-link {
	color: var(--text-muted);
	text-decoration: none;
}

.login-legal-wrap {
	margin-top: 14px;
	text-align: center;
	font-size: 12px;
}
.login-legal-link:hover,
.login-legal-link:focus,
.login-legal-link:visited {
	color: var(--text-muted);
	text-decoration: none;
}