body[data-path="login"] {
	background-color: #020206;
	background-image:
		url("/assets/helpdesk/desk/app-background.png"),
		radial-gradient(
			ellipse 120% 90% at 0% 45%,
			rgba(72, 38, 130, 0.35) 0%,
			transparent 52%
		),
		radial-gradient(
			ellipse 90% 70% at 100% 25%,
			rgba(28, 38, 110, 0.22) 0%,
			transparent 48%
		),
		linear-gradient(105deg, #020206 0%, #010104 45%, #000000 100%);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	color-scheme: dark;
}

body[data-path="login"] .navbar,
body[data-path="login"] .web-footer {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

body[data-path="login"] .navbar .navbar-brand,
body[data-path="login"] .navbar .nav-link {
	color: rgba(255, 255, 255, 0.72) !important;
}

body[data-path="login"] .for-login .page-card,
body[data-path="login"] .for-forgot .page-card,
body[data-path="login"] .for-signup .page-card,
body[data-path="login"] .for-email-login .page-card,
body[data-path="login"] .for-login-with-email-link .page-card {
	background: rgba(2, 2, 6, 0.72);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

body[data-path="login"] .page-card-head h4,
body[data-path="login"] .sign-up-message,
body[data-path="login"] .login-divider {
	color: rgba(255, 255, 255, 0.72);
}

body[data-path="login"] .sign-up-message a,
body[data-path="login"] .forgot-password-message a {
	color: rgba(255, 255, 255, 0.88);
}

body[data-path="login"] .page-card-body input[type="text"],
body[data-path="login"] .page-card-body input[type="email"],
body[data-path="login"] .page-card-body input[type="password"] {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.92);
}

body[data-path="login"] .page-card-body input::placeholder {
	color: rgba(255, 255, 255, 0.42);
}

body[data-path="login"] .field-icon {
	fill: rgba(255, 255, 255, 0.45);
}

body[data-path="login"] .toggle-password {
	color: rgba(255, 255, 255, 0.55) !important;
}

body[data-path="login"] .btn-login-option {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.88);
}

.caia-login-head {
	text-align: center;
}

.caia-login-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.35rem;
	margin: 0;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.caia-login-title-muted {
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.5rem;
	line-height: 1.2;
}

.caia-gradient-text {
	background-image: linear-gradient(
		90deg,
		#7c3aed 0%,
		#a855f7 18%,
		#d946ef 42%,
		#ec4899 58%,
		#f97316 78%,
		#fbbf24 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 1.5rem;
	line-height: 1.2;
}