/* =========================================================
   VAPE USTAD — ABSTRACT ERP LOGIN
   Scoped only to the Frappe login page
   ========================================================= */

html,
body[data-path="login"] {
	min-height: 100%;
}

body[data-path="login"] {
	--vu-pink: #ff1688;
	--vu-red: #ff3d5f;
	--vu-orange: #ff861f;
	--vu-yellow: #ffc928;
	--vu-purple: #9a32ff;
	--vu-blue: #178cff;
	--vu-green: #08c979;
	--vu-bg: #050619;

	margin: 0 !important;
	min-height: 100vh;
	overflow-x: hidden;
	position: relative;
	color: #fff;
	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;

	background:
		radial-gradient(
			ellipse 45% 55% at -5% 88%,
			rgba(255, 20, 126, 0.62) 0%,
			rgba(255, 75, 42, 0.30) 35%,
			transparent 70%
		),
		radial-gradient(
			ellipse 34% 48% at 102% 34%,
			rgba(196, 30, 255, 0.60) 0%,
			rgba(255, 38, 139, 0.30) 40%,
			transparent 72%
		),
		radial-gradient(
			ellipse 38% 42% at 91% 100%,
			rgba(0, 175, 255, 0.40) 0%,
			rgba(0, 220, 139, 0.18) 45%,
			transparent 72%
		),
		radial-gradient(
			ellipse 32% 36% at 19% 25%,
			rgba(100, 50, 255, 0.42) 0%,
			transparent 72%
		),
		linear-gradient(
			135deg,
			#02030d 0%,
			#080824 42%,
			#080628 72%,
			#02030d 100%
		) !important;
}

/* Large soft abstract shapes */
body[data-path="login"]::before {
	content: "";
	position: fixed;
	inset: -12%;
	z-index: 0;
	pointer-events: none;

	background:
		radial-gradient(
			ellipse 18% 15% at 18% 27%,
			rgba(157, 48, 255, 0.92) 0%,
			rgba(71, 43, 255, 0.55) 45%,
			transparent 72%
		),
		radial-gradient(
			ellipse 14% 21% at 84% 58%,
			rgba(255, 20, 151, 0.88) 0%,
			rgba(113, 49, 255, 0.50) 50%,
			transparent 74%
		),
		radial-gradient(
			ellipse 13% 16% at 95% 80%,
			rgba(0, 187, 255, 0.72) 0%,
			rgba(0, 212, 116, 0.38) 52%,
			transparent 75%
		),
		radial-gradient(
			ellipse 18% 22% at 10% 79%,
			rgba(255, 16, 131, 0.80) 0%,
			rgba(255, 113, 31, 0.40) 52%,
			transparent 75%
		),
		radial-gradient(
			circle at 78% 31%,
			rgba(255, 126, 28, 0.46) 0%,
			transparent 9%
		),
		radial-gradient(
			circle at 62% 75%,
			rgba(34, 118, 255, 0.35) 0%,
			transparent 12%
		);

	filter: blur(12px) saturate(135%);
	opacity: 0.95;
	transform: scale(1.03);
	animation: vu-background-drift 18s ease-in-out infinite alternate;
}

/* Small glowing particles */
body[data-path="login"]::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;

	background:
		radial-gradient(
			circle at 7% 35%,
			rgba(255, 41, 159, 0.95) 0 7px,
			transparent 8px
		),
		radial-gradient(
			circle at 17% 54%,
			rgba(138, 66, 255, 0.95) 0 6px,
			transparent 7px
		),
		radial-gradient(
			circle at 76% 10%,
			rgba(255, 133, 43, 0.95) 0 8px,
			transparent 9px
		),
		radial-gradient(
			circle at 93% 15%,
			rgba(197, 49, 255, 0.85) 0 5px,
			transparent 6px
		),
		radial-gradient(
			circle at 81% 92%,
			rgba(152, 36, 255, 0.85) 0 9px,
			transparent 10px
		),
		radial-gradient(
			circle at 27% 87%,
			rgba(255, 50, 119, 0.72) 0 4px,
			transparent 5px
		),
		radial-gradient(
			circle at 68% 17%,
			rgba(72, 97, 255, 0.86) 0 3px,
			transparent 4px
		),
		radial-gradient(
			circle at 35% 12%,
			rgba(188, 62, 255, 0.70) 0 4px,
			transparent 5px
		);

	filter: drop-shadow(0 0 10px rgba(153, 67, 255, 0.8));
	opacity: 0.78;
}

/* Hide original website header and footer */
body[data-path="login"] .navbar,
body[data-path="login"] .web-footer,
body[data-path="login"] footer,
body[data-path="login"] .page-footer,
body[data-path="login"] .page-breadcrumbs {
	display: none !important;
}

/* Remove all default white page backgrounds */
body[data-path="login"] #page-login,
body[data-path="login"] .page-container,
body[data-path="login"] .page-content-wrapper,
body[data-path="login"] .page-content,
body[data-path="login"] main {
	background: transparent !important;
}

body[data-path="login"] #page-login {
	min-height: 100vh;
	position: relative;
	z-index: 1;
	isolation: isolate;
}

/* Colorful company wordmark */
body[data-path="login"] #page-login::before {
	content: "Vape Ustad Pvt. Ltd.";
	position: fixed;
	top: 25px;
	left: 30px;
	z-index: 20;
	pointer-events: none;

	font-size: clamp(23px, 2vw, 34px);
	font-weight: 850;
	line-height: 1;
	letter-spacing: -1.2px;
	white-space: nowrap;

	background:
		linear-gradient(
			90deg,
			#ff1688 0%,
			#ff3c62 18%,
			#ff8b20 35%,
			#ffd022 48%,
			#08ca78 66%,
			#168cff 84%,
			#b634ff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	filter: drop-shadow(0 5px 18px rgba(111, 43, 255, 0.28));
}

/* Decorative neon ring */
body[data-path="login"] #page-login::after {
	content: "";
	position: fixed;
	width: 290px;
	height: 290px;
	left: 7%;
	top: 28%;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;

	border: 2px solid rgba(255, 34, 152, 0.16);
	border-top-color: rgba(255, 50, 158, 0.58);
	border-right-color: rgba(130, 51, 255, 0.30);
	transform: rotate(24deg);
	box-shadow:
		0 0 45px rgba(255, 30, 150, 0.14),
		inset 0 0 35px rgba(111, 41, 255, 0.08);
}

/* Full-screen centered layout */
body[data-path="login"] #page-login .page-content-wrapper,
body[data-path="login"] #page-login .page-content {
	width: 100%;
	min-height: 100vh;
}

body[data-path="login"] #page-login main.container {
	width: 100% !important;
	max-width: none !important;
	min-height: 100vh;
	margin: 0 !important;
	padding: 92px 24px 40px !important;

	display: grid;
	place-items: center;
	position: relative;
	z-index: 3;
}

/* Glass login card: all Frappe login modes */
body[data-path="login"] #page-login section.for-login,
body[data-path="login"] #page-login section.for-forgot,
body[data-path="login"] #page-login section.for-signup,
body[data-path="login"] #page-login section.for-login-with-email-link {
	position: relative;
	width: min(465px, calc(100vw - 36px));
	margin: 0 !important;
	padding: 38px 40px 34px;
	border-radius: 30px;
	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			rgba(73, 32, 117, 0.62) 0%,
			rgba(19, 23, 78, 0.78) 42%,
			rgba(24, 23, 83, 0.72) 100%
		) !important;

	border: 1px solid rgba(255, 255, 255, 0.19);

	box-shadow:
		0 30px 90px rgba(0, 0, 0, 0.50),
		0 0 0 1px rgba(211, 68, 255, 0.15),
		-14px 22px 50px rgba(255, 20, 133, 0.15),
		16px 20px 55px rgba(36, 93, 255, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		inset 0 -1px 0 rgba(255, 255, 255, 0.06);

	-webkit-backdrop-filter: blur(30px) saturate(150%);
	backdrop-filter: blur(30px) saturate(150%);
}

/* Gradient border glow */
body[data-path="login"] #page-login section.for-login::before,
body[data-path="login"] #page-login section.for-forgot::before,
body[data-path="login"] #page-login section.for-signup::before,
body[data-path="login"] #page-login section.for-login-with-email-link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;

	padding: 1.5px;

	background:
		linear-gradient(
			135deg,
			rgba(255, 76, 213, 0.90),
			rgba(157, 56, 255, 0.30) 34%,
			rgba(48, 105, 255, 0.80) 78%,
			rgba(255, 56, 145, 0.70)
		);

	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;

	opacity: 0.78;
}

/* Soft internal card glow */
body[data-path="login"] #page-login section.for-login::after,
body[data-path="login"] #page-login section.for-forgot::after,
body[data-path="login"] #page-login section.for-signup::after,
body[data-path="login"] #page-login section.for-login-with-email-link::after {
	content: "";
	position: absolute;
	inset: -35%;
	z-index: 0;
	pointer-events: none;

	background:
		radial-gradient(
			circle at 18% 16%,
			rgba(255, 48, 170, 0.25),
			transparent 32%
		),
		radial-gradient(
			circle at 92% 86%,
			rgba(58, 89, 255, 0.28),
			transparent 34%
		);
}

body[data-path="login"] #page-login section > * {
	position: relative;
	z-index: 2;
}

/* Header and logo */
body[data-path="login"] #page-login .page-card-head {
	margin: 0 0 27px !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

body[data-path="login"] #page-login img.app-logo {
	display: block !important;
	width: 82px !important;
	height: 72px !important;
	max-height: none !important;
	margin: 0 auto 18px !important;
	object-fit: contain;

	content: url("/assets/vu_web/img/vu-logo.png");

	filter:
		drop-shadow(0 9px 19px rgba(21, 139, 255, 0.22))
		drop-shadow(0 5px 17px rgba(255, 31, 145, 0.20));
}

body[data-path="login"] #page-login .page-card-head h4 {
	margin: 0 !important;
	color: #fff !important;
	font-size: 31px !important;
	font-weight: 760 !important;
	line-height: 1.25;
	letter-spacing: -0.75px;
	text-transform: none !important;
	text-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

/* Remove the original inner white card */
body[data-path="login"] #page-login .page-card {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Forms */
body[data-path="login"] #page-login form {
	margin: 0 !important;
}

body[data-path="login"] #page-login .form-group {
	margin-bottom: 16px !important;
}

body[data-path="login"] #page-login .form-control {
	height: 57px !important;
	padding: 0 48px !important;
	border-radius: 16px !important;

	color: #fff !important;
	font-size: 16px !important;
	font-weight: 450;
	caret-color: #fff;

	background: rgba(255, 255, 255, 0.065) !important;
	border: 1px solid rgba(255, 255, 255, 0.17) !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 8px 30px rgba(1, 2, 25, 0.11) !important;

	transition:
		border-color 180ms ease,
		background 180ms ease,
		box-shadow 180ms ease,
		transform 180ms ease;
}

body[data-path="login"] #page-login .form-control::placeholder {
	color: rgba(235, 235, 249, 0.66) !important;
	opacity: 1;
}

body[data-path="login"] #page-login .form-control:hover {
	border-color: rgba(255, 255, 255, 0.28) !important;
	background: rgba(255, 255, 255, 0.085) !important;
}

body[data-path="login"] #page-login .form-control:focus {
	border-color: rgba(161, 81, 255, 0.78) !important;
	background: rgba(255, 255, 255, 0.10) !important;

	box-shadow:
		0 0 0 4px rgba(143, 61, 255, 0.13),
		0 0 32px rgba(51, 91, 255, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;

	outline: none !important;
}

/* Browser auto-fill */
body[data-path="login"] #page-login input:-webkit-autofill,
body[data-path="login"] #page-login input:-webkit-autofill:hover,
body[data-path="login"] #page-login input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow:
		0 0 0 1000px rgba(28, 27, 86, 0.94) inset !important;
	transition: background-color 9999s ease-out;
}

/* Field icons */
body[data-path="login"] #page-login .field-icon,
body[data-path="login"] #page-login .password-field .input-group-text,
body[data-path="login"] #page-login .email-field .input-group-text,
body[data-path="login"] #page-login .form-group svg {
	color: rgba(255, 255, 255, 0.86) !important;
	stroke: currentColor !important;
}

body[data-path="login"] #page-login .field-icon {
	left: 17px !important;
}

/* Password show/hide */
body[data-path="login"] #page-login .toggle-password,
body[data-path="login"] #page-login .password-field .btn {
	color: rgba(255, 255, 255, 0.88) !important;
	font-size: 14px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Forgot password */
body[data-path="login"] #page-login .forgot-password-message {
	margin: 4px 1px 18px !important;
	text-align: right !important;
}

body[data-path="login"] #page-login .forgot-password-message a,
body[data-path="login"] #page-login a {
	color: rgba(255, 255, 255, 0.88) !important;
	text-decoration: none !important;
	transition:
		color 160ms ease,
		text-shadow 160ms ease;
}

body[data-path="login"] #page-login a:hover {
	color: #fff !important;
	text-shadow: 0 0 18px rgba(185, 77, 255, 0.65);
}

/* Buttons */
body[data-path="login"] #page-login .btn {
	min-height: 54px !important;
	border-radius: 15px !important;
	font-size: 16px !important;
	font-weight: 680 !important;
	letter-spacing: 0.05px;
	box-shadow: none;
	transition:
		transform 170ms ease,
		box-shadow 170ms ease,
		filter 170ms ease,
		border-color 170ms ease;
}

/* Main Login button */
body[data-path="login"] #page-login .btn-login,
body[data-path="login"] #page-login .for-login .btn-primary {
	color: #fff !important;
	border: 0 !important;

	background:
		linear-gradient(
			100deg,
			#f900a9 0%,
			#ff225f 37%,
			#ff7926 70%,
			#ffc72c 100%
		) !important;

	box-shadow:
		0 14px 35px rgba(255, 34, 112, 0.25),
		0 8px 30px rgba(255, 152, 25, 0.16) !important;
}

body[data-path="login"] #page-login .btn-login:hover,
body[data-path="login"] #page-login .for-login .btn-primary:hover {
	transform: translateY(-2px);
	filter: brightness(1.07) saturate(1.08);
	box-shadow:
		0 18px 42px rgba(255, 34, 112, 0.32),
		0 10px 34px rgba(255, 152, 25, 0.22) !important;
}

body[data-path="login"] #page-login .btn-login:active,
body[data-path="login"] #page-login .for-login .btn-primary:active {
	transform: translateY(0);
}

/* Email-link and secondary buttons */
body[data-path="login"] #page-login .btn-login-with-email-link,
body[data-path="login"] #page-login .btn-default,
body[data-path="login"] #page-login .btn-secondary {
	color: #fff !important;

	background:
		linear-gradient(
			135deg,
			rgba(122, 52, 190, 0.25),
			rgba(54, 66, 164, 0.24)
		) !important;

	border: 1px solid rgba(186, 92, 255, 0.42) !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		0 9px 26px rgba(0, 0, 0, 0.13) !important;
}

body[data-path="login"] #page-login .btn-login-with-email-link:hover,
body[data-path="login"] #page-login .btn-default:hover,
body[data-path="login"] #page-login .btn-secondary:hover {
	transform: translateY(-2px);
	border-color: rgba(214, 139, 255, 0.66) !important;
	background:
		linear-gradient(
			135deg,
			rgba(151, 65, 218, 0.33),
			rgba(65, 82, 194, 0.31)
		) !important;
}

/* Divider and helper text */
body[data-path="login"] #page-login .text-muted,
body[data-path="login"] #page-login .sign-up-message,
body[data-path="login"] #page-login .page-card p {
	color: rgba(241, 239, 255, 0.72) !important;
}

body[data-path="login"] #page-login .sign-up-message {
	margin-top: 18px !important;
}

/* Validation/error messages */
body[data-path="login"] #page-login .invalid-feedback,
body[data-path="login"] #page-login .text-danger,
body[data-path="login"] #page-login .alert-danger {
	color: #ffb5ce !important;
}

body[data-path="login"] #page-login .alert {
	border-radius: 14px;
	background: rgba(255, 54, 116, 0.12) !important;
	border: 1px solid rgba(255, 94, 143, 0.25) !important;
}

/* Prevent odd default spacing */
body[data-path="login"] #page-login .page-card-body {
	padding: 0 !important;
}

@keyframes vu-background-drift {
	0% {
		transform: scale(1.03) translate3d(-0.5%, -0.5%, 0);
	}
	100% {
		transform: scale(1.07) translate3d(1.3%, 1%, 0);
	}
}

/* Short desktop screens */
@media (min-width: 601px) and (max-height: 780px) {
	body[data-path="login"] #page-login main.container {
		padding-top: 72px !important;
		padding-bottom: 24px !important;
	}

	body[data-path="login"] #page-login section.for-login,
	body[data-path="login"] #page-login section.for-forgot,
	body[data-path="login"] #page-login section.for-signup,
	body[data-path="login"] #page-login section.for-login-with-email-link {
		padding: 27px 36px 26px;
	}

	body[data-path="login"] #page-login img.app-logo {
		width: 66px !important;
		height: 58px !important;
		margin-bottom: 10px !important;
	}

	body[data-path="login"] #page-login .page-card-head {
		margin-bottom: 19px !important;
	}

	body[data-path="login"] #page-login .page-card-head h4 {
		font-size: 27px !important;
	}

	body[data-path="login"] #page-login .form-control {
		height: 51px !important;
	}

	body[data-path="login"] #page-login .btn {
		min-height: 49px !important;
	}
}

/* Mobile */
@media (max-width: 600px) {
	body[data-path="login"] {
		overflow-y: auto;
	}

	body[data-path="login"] #page-login::before {
		top: 22px;
		left: 50%;
		transform: translateX(-50%);
		font-size: 23px;
		letter-spacing: -0.7px;
	}

	body[data-path="login"] #page-login::after {
		width: 230px;
		height: 230px;
		left: -95px;
		top: 18%;
	}

	body[data-path="login"] #page-login main.container {
		min-height: 100svh;
		padding: 83px 17px 28px !important;
	}

	body[data-path="login"] #page-login section.for-login,
	body[data-path="login"] #page-login section.for-forgot,
	body[data-path="login"] #page-login section.for-signup,
	body[data-path="login"] #page-login section.for-login-with-email-link {
		width: 100%;
		padding: 29px 22px 27px;
		border-radius: 25px;
	}

	body[data-path="login"] #page-login img.app-logo {
		width: 68px !important;
		height: 60px !important;
		margin-bottom: 13px !important;
	}

	body[data-path="login"] #page-login .page-card-head {
		margin-bottom: 23px !important;
	}

	body[data-path="login"] #page-login .page-card-head h4 {
		font-size: 26px !important;
		letter-spacing: -0.5px;
	}

	body[data-path="login"] #page-login .form-control {
		height: 54px !important;
		font-size: 15px !important;
		padding-left: 45px !important;
		padding-right: 46px !important;
	}

	body[data-path="login"] #page-login .btn {
		min-height: 52px !important;
		font-size: 15px !important;
	}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	body[data-path="login"]::before {
		animation: none;
	}

	body[data-path="login"] #page-login *,
	body[data-path="login"] #page-login *::before,
	body[data-path="login"] #page-login *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}


/* =========================================================
   VU LOGIN — FINAL SIZE, HEADER AND LAYOUT CORRECTIONS
   ========================================================= */

/* Completely remove old Frappe/custom top and bottom bars */
body[data-path="login"] > nav,
body[data-path="login"] > header,
body[data-path="login"] nav,
body[data-path="login"] header,
body[data-path="login"] .navbar,
body[data-path="login"] .web-header,
body[data-path="login"] .vu-header,
body[data-path="login"] .vu-navbar,
body[data-path="login"] .vu-topbar,
body[data-path="login"] #vu-brand-header,
body[data-path="login"] footer,
body[data-path="login"] .web-footer,
body[data-path="login"] .page-footer {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
}

/* Exact viewport fit — remove scrollbar */
html,
body[data-path="login"] {
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

body[data-path="login"] {
	height: 100vh !important;
	height: 100dvh !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
	overflow: hidden !important;
}

body[data-path="login"] #page-login,
body[data-path="login"] .page-container,
body[data-path="login"] .page-content-wrapper,
body[data-path="login"] .page-content {
	width: 100% !important;
	height: 100vh !important;
	height: 100dvh !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* Correct company wordmark */
body[data-path="login"] #page-login::before {
	content: "Vape\00a0 Ustad\00a0 Pvt.\00a0 Ltd." !important;
	top: 26px !important;
	left: 30px !important;
	font-size: clamp(25px, 2.1vw, 36px) !important;
	font-weight: 850 !important;
	letter-spacing: -1.1px !important;
	line-height: 1 !important;
}

/* Proper centered screen */
body[data-path="login"] #page-login main.container {
	width: 100% !important;
	height: 100vh !important;
	height: 100dvh !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 76px 24px 28px !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	overflow: hidden !important;
}

/* Larger premium glass card */
body[data-path="login"] #page-login section.for-login,
body[data-path="login"] #page-login section.for-forgot,
body[data-path="login"] #page-login section.for-signup,
body[data-path="login"] #page-login section.for-login-with-email-link {
	width: min(560px, calc(100vw - 40px)) !important;
	max-width: 560px !important;
	min-width: 0 !important;

	margin: 0 auto !important;
	padding: 42px 44px 38px !important;
	border-radius: 31px !important;

	flex: 0 0 auto !important;

	box-shadow:
		0 35px 110px rgba(0, 0, 0, 0.58),
		0 0 0 1px rgba(210, 68, 255, 0.17),
		-18px 24px 65px rgba(255, 20, 133, 0.16),
		18px 24px 65px rgba(36, 93, 255, 0.20),
		inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* Hide unsuitable existing image */
body[data-path="login"] #page-login img.app-logo {
	display: none !important;
}

/* Create large colorful VU mark */
body[data-path="login"] #page-login .page-card-head::before {
	content: "VU";
	display: block;

	margin: 0 auto 16px;

	font-size: 49px;
	font-weight: 950;
	line-height: 0.95;
	letter-spacing: -6px;

	background:
		linear-gradient(
			115deg,
			#ff1688 0%,
			#ff315f 23%,
			#ff9d1d 43%,
			#ffd022 51%,
			#08c979 67%,
			#168cff 85%,
			#9335ff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	filter:
		drop-shadow(0 8px 17px rgba(255, 37, 137, 0.20))
		drop-shadow(0 9px 20px rgba(31, 105, 255, 0.22));
}

body[data-path="login"] #page-login .page-card-head {
	margin-bottom: 30px !important;
}

body[data-path="login"] #page-login .page-card-head h4 {
	font-size: 33px !important;
	font-weight: 790 !important;
	letter-spacing: -0.85px !important;
}

/* Larger inputs */
body[data-path="login"] #page-login .form-control {
	height: 61px !important;
	border-radius: 17px !important;
	font-size: 16.5px !important;
}

/* Larger buttons */
body[data-path="login"] #page-login .btn {
	min-height: 58px !important;
	border-radius: 16px !important;
	font-size: 16.5px !important;
}

/* Better vertical spacing */
body[data-path="login"] #page-login .form-group {
	margin-bottom: 17px !important;
}

body[data-path="login"] #page-login .forgot-password-message {
	margin-top: 5px !important;
	margin-bottom: 20px !important;
	font-size: 14.5px !important;
}

/* Mobile correction */
@media (max-width: 600px) {
	body[data-path="login"] {
		overflow-y: auto !important;
	}

	body[data-path="login"] #page-login,
	body[data-path="login"] .page-container,
	body[data-path="login"] .page-content-wrapper,
	body[data-path="login"] .page-content {
		height: auto !important;
		min-height: 100dvh !important;
		overflow: visible !important;
	}

	body[data-path="login"] #page-login::before {
		top: 22px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		font-size: 23px !important;
	}

	body[data-path="login"] #page-login main.container {
		height: auto !important;
		min-height: 100dvh !important;
		padding: 82px 17px 25px !important;
		overflow: visible !important;
	}

	body[data-path="login"] #page-login section.for-login,
	body[data-path="login"] #page-login section.for-forgot,
	body[data-path="login"] #page-login section.for-signup,
	body[data-path="login"] #page-login section.for-login-with-email-link {
		width: 100% !important;
		padding: 30px 23px 28px !important;
		border-radius: 25px !important;
	}

	body[data-path="login"] #page-login .page-card-head::before {
		font-size: 42px;
		margin-bottom: 14px;
	}

	body[data-path="login"] #page-login .page-card-head h4 {
		font-size: 27px !important;
	}

	body[data-path="login"] #page-login .form-control {
		height: 55px !important;
		font-size: 15px !important;
	}

	body[data-path="login"] #page-login .btn {
		min-height: 53px !important;
		font-size: 15px !important;
	}
}


/* =========================================================
   VU LOGIN CARD — PREMIUM FINAL PROPORTIONS
   Background and top branding remain unchanged
   ========================================================= */

@media (min-width: 701px) {

	/* Main glass card */
	body[data-path="login"] #page-login section.for-login {
		width: min(640px, calc(100vw - 64px)) !important;
		max-width: 640px !important;

		padding:
			52px
			52px
			48px !important;

		border-radius: 34px !important;

		background:
			radial-gradient(
				circle at 9% 5%,
				rgba(255, 34, 155, 0.20),
				transparent 32%
			),
			radial-gradient(
				circle at 100% 100%,
				rgba(39, 88, 255, 0.23),
				transparent 38%
			),
			linear-gradient(
				145deg,
				rgba(82, 28, 108, 0.64) 0%,
				rgba(22, 23, 77, 0.88) 43%,
				rgba(20, 30, 103, 0.76) 100%
			) !important;

		border:
			1px solid
			rgba(255, 255, 255, 0.20) !important;

		box-shadow:
			0 38px 115px rgba(0, 0, 0, 0.58),
			-18px 28px 65px rgba(255, 18, 139, 0.17),
			18px 28px 70px rgba(31, 83, 255, 0.22),
			0 0 0 1px rgba(184, 62, 255, 0.18),
			inset 0 1px 0 rgba(255, 255, 255, 0.17),
			inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;

		-webkit-backdrop-filter:
			blur(34px)
			saturate(155%) !important;

		backdrop-filter:
			blur(34px)
			saturate(155%) !important;
	}

	/* Stronger gradient edge */
	body[data-path="login"]
	#page-login
	section.for-login::before {
		padding: 2px !important;

		background:
			linear-gradient(
				135deg,
				rgba(255, 51, 195, 0.94) 0%,
				rgba(152, 55, 255, 0.43) 31%,
				rgba(53, 88, 255, 0.78) 73%,
				rgba(19, 155, 255, 0.82) 100%
			) !important;

		opacity: 0.82 !important;
	}

	/* Ensure inner content uses full card width */
	body[data-path="login"] #page-login .page-card,
	body[data-path="login"] #page-login .page-card-body,
	body[data-path="login"] #page-login form,
	body[data-path="login"] #page-login .page-card-actions {
		width: 100% !important;
		max-width: none !important;
	}

	/* Larger VU mark */
	body[data-path="login"]
	#page-login
	.page-card-head::before {
		font-size: 72px !important;
		font-weight: 950 !important;
		line-height: 0.92 !important;
		letter-spacing: -10px !important;

		margin:
			0
			auto
			20px !important;

		filter:
			drop-shadow(
				0 10px 22px
				rgba(255, 29, 137, 0.24)
			)
			drop-shadow(
				0 12px 25px
				rgba(27, 105, 255, 0.25)
			) !important;
	}

	body[data-path="login"] #page-login .page-card-head {
		margin-bottom: 38px !important;
	}

	/* Main heading */
	body[data-path="login"]
	#page-login
	.page-card-head h4 {
		font-size: 36px !important;
		font-weight: 790 !important;
		line-height: 1.2 !important;
		letter-spacing: -1px !important;
	}

	/* Inputs */
	body[data-path="login"] #page-login .form-group {
		margin-bottom: 19px !important;
	}

	body[data-path="login"] #page-login .form-control {
		height: 66px !important;

		padding:
			0
			58px !important;

		border-radius: 19px !important;

		font-size: 17.5px !important;
		font-weight: 450 !important;

		background:
			linear-gradient(
				135deg,
				rgba(255, 255, 255, 0.085),
				rgba(255, 255, 255, 0.055)
			) !important;

		border:
			1px solid
			rgba(255, 255, 255, 0.19) !important;

		box-shadow:
			inset 0 1px 0
				rgba(255, 255, 255, 0.07),
			0 10px 30px
				rgba(1, 2, 28, 0.14) !important;
	}

	body[data-path="login"]
	#page-login
	.form-control:focus {
		border-color:
			rgba(178, 79, 255, 0.84) !important;

		box-shadow:
			0 0 0 4px
				rgba(153, 61, 255, 0.14),
			0 0 32px
				rgba(56, 91, 255, 0.19),
			inset 0 1px 0
				rgba(255, 255, 255, 0.10) !important;
	}

	/* Input icons */
	body[data-path="login"] #page-login .field-icon {
		left: 20px !important;
	}

	body[data-path="login"]
	#page-login
	.field-icon svg {
		width: 20px !important;
		height: 20px !important;
	}

	/* Password show control */
	body[data-path="login"]
	#page-login
	.toggle-password,
	body[data-path="login"]
	#page-login
	.password-field .btn {
		font-size: 15px !important;
		right: 15px !important;
	}

	/* Forgot password */
	body[data-path="login"]
	#page-login
	.forgot-password-message {
		margin:
			7px
			3px
			24px !important;

		font-size: 15.5px !important;
		line-height: 1.4 !important;
	}

	/* Buttons */
	body[data-path="login"] #page-login .btn {
		min-height: 62px !important;
		border-radius: 18px !important;

		font-size: 17.5px !important;
		font-weight: 720 !important;
	}

	body[data-path="login"]
	#page-login
	.btn-login,
	body[data-path="login"]
	#page-login
	.for-login .btn-primary {
		box-shadow:
			0 16px 42px
				rgba(255, 28, 120, 0.30),
			0 10px 35px
				rgba(255, 144, 25, 0.20) !important;
	}

	body[data-path="login"]
	#page-login
	.btn-login:hover {
		transform: translateY(-3px) !important;

		box-shadow:
			0 21px 50px
				rgba(255, 28, 120, 0.38),
			0 13px 40px
				rgba(255, 144, 25, 0.26) !important;
	}

	/* OR divider */
	body[data-path="login"] #page-login .login-divider {
		display: flex !important;
		align-items: center !important;
		gap: 17px !important;

		margin:
			25px
			0
			21px !important;

		color:
			rgba(244, 240, 255, 0.72) !important;

		font-size: 15px !important;
	}

	body[data-path="login"]
	#page-login
	.login-divider::before,
	body[data-path="login"]
	#page-login
	.login-divider::after {
		content: "" !important;
		display: block !important;
		flex: 1 !important;
		height: 1px !important;

		background:
			linear-gradient(
				90deg,
				transparent,
				rgba(255, 255, 255, 0.22)
			) !important;
	}

	body[data-path="login"]
	#page-login
	.login-divider::after {
		background:
			linear-gradient(
				90deg,
				rgba(255, 255, 255, 0.22),
				transparent
			) !important;
	}

	/* Email-link button */
	body[data-path="login"]
	#page-login
	.btn-login-with-email-link {
		min-height: 60px !important;

		border-color:
			rgba(185, 83, 255, 0.51) !important;

		background:
			linear-gradient(
				135deg,
				rgba(130, 49, 190, 0.27),
				rgba(45, 66, 170, 0.29)
			) !important;
	}
}


/* Medium-height laptop displays */
@media
	(min-width: 701px)
	and (max-height: 820px) {

	body[data-path="login"]
	#page-login
	section.for-login {
		width: min(
			570px,
			calc(100vw - 50px)
		) !important;

		padding:
			31px
			42px
			30px !important;

		border-radius: 29px !important;
	}

	body[data-path="login"]
	#page-login
	.page-card-head::before {
		font-size: 53px !important;
		margin-bottom: 12px !important;
	}

	body[data-path="login"]
	#page-login
	.page-card-head {
		margin-bottom: 23px !important;
	}

	body[data-path="login"]
	#page-login
	.page-card-head h4 {
		font-size: 30px !important;
	}

	body[data-path="login"]
	#page-login
	.form-control {
		height: 55px !important;
		font-size: 16px !important;
	}

	body[data-path="login"]
	#page-login
	.form-group {
		margin-bottom: 14px !important;
	}

	body[data-path="login"]
	#page-login
	.forgot-password-message {
		margin-bottom: 17px !important;
		font-size: 14px !important;
	}

	body[data-path="login"] #page-login .btn {
		min-height: 52px !important;
		font-size: 16px !important;
	}

	body[data-path="login"]
	#page-login
	.login-divider {
		margin:
			17px
			0
			15px !important;
	}
}


/* Mobile card proportions */
@media (max-width: 700px) {

	body[data-path="login"]
	#page-login
	section.for-login {
		width: calc(100vw - 28px) !important;
		max-width: 440px !important;

		padding:
			34px
			24px
			30px !important;

		border-radius: 27px !important;
	}

	body[data-path="login"]
	#page-login
	.page-card-head::before {
		font-size: 49px !important;
		letter-spacing: -7px !important;
		margin-bottom: 14px !important;
	}

	body[data-path="login"]
	#page-login
	.page-card-head {
		margin-bottom: 27px !important;
	}

	body[data-path="login"]
	#page-login
	.page-card-head h4 {
		font-size: 28px !important;
	}

	body[data-path="login"]
	#page-login
	.form-control {
		height: 57px !important;
		border-radius: 17px !important;
		font-size: 15.5px !important;
	}

	body[data-path="login"] #page-login .btn {
		min-height: 55px !important;
		border-radius: 16px !important;
		font-size: 15.5px !important;
	}
}


/* =========================================================
   VU LOGIN — BRANDING REFINEMENT
   Match top-left name and VU logo closer to reference
   ========================================================= */

/* Disable old generated top-left text */
body[data-path="login"] #page-login::before {
	content: none !important;
}

/* Disable fake text-based VU logo */
body[data-path="login"] #page-login .page-card-head::before {
	content: none !important;
	display: none !important;
}

/* Injected top-left brand block */
body[data-path="login"] #vu-login-brand {
	position: fixed;
	top: 24px;
	left: 28px;
	z-index: 40;
	display: flex;
	align-items: flex-end;
	gap: 12px;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

body[data-path="login"] #vu-login-brand .vu-brand-main,
body[data-path="login"] #vu-login-brand .vu-brand-sub {
	display: inline-block;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -1px;

	background:
		linear-gradient(
			90deg,
			#ff2f8e 0%,
			#ff5a3d 18%,
			#ffad1f 34%,
			#ffd83a 46%,
			#14d06f 63%,
			#18a8ff 82%,
			#a539ff 100%
		);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	filter:
		drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18))
		drop-shadow(0 4px 18px rgba(111, 43, 255, 0.15));
}

body[data-path="login"] #vu-login-brand .vu-brand-main {
	font-size: clamp(34px, 2.7vw, 60px);
	letter-spacing: -1.8px;
}

body[data-path="login"] #vu-login-brand .vu-brand-sub {
	font-size: clamp(20px, 1.5vw, 34px);
	letter-spacing: -0.8px;
	transform: translateY(-2px);
}

/* Use actual VU logo image inside the login card */
body[data-path="login"] #page-login img.app-logo {
	display: block !important;
	content: url("/assets/vu_web/img/vu-logo.png");
	width: 124px !important;
	height: 96px !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 auto 18px !important;
	object-fit: contain;

	filter:
		drop-shadow(0 10px 24px rgba(255, 34, 144, 0.18))
		drop-shadow(0 10px 24px rgba(22, 140, 255, 0.22));
}

body[data-path="login"] #page-login .page-card-head {
	margin-bottom: 30px !important;
}

body[data-path="login"] #page-login .page-card-head h4 {
	font-size: 35px !important;
	font-weight: 790 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.9px !important;
}

/* Mobile */
@media (max-width: 700px) {
	body[data-path="login"] #vu-login-brand {
		top: 18px;
		left: 50%;
		transform: translateX(-50%);
		gap: 8px;
	}

	body[data-path="login"] #vu-login-brand .vu-brand-main {
		font-size: 28px;
	}

	body[data-path="login"] #vu-login-brand .vu-brand-sub {
		font-size: 17px;
		transform: translateY(-1px);
	}

	body[data-path="login"] #page-login img.app-logo {
		width: 100px !important;
		height: 78px !important;
		margin-bottom: 14px !important;
	}
}


/* =========================================================
   VU LOGIN — BRANDING REFINEMENT
   Match top-left name and VU logo closer to reference
   ========================================================= */

/* Disable old generated top-left text */
body[data-path="login"] #page-login::before {
	content: none !important;
}

/* Disable fake text-based VU logo */
body[data-path="login"] #page-login .page-card-head::before {
	content: none !important;
	display: none !important;
}

/* Injected top-left brand block */
body[data-path="login"] #vu-login-brand {
	position: fixed;
	top: 24px;
	left: 28px;
	z-index: 40;
	display: flex;
	align-items: flex-end;
	gap: 12px;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

body[data-path="login"] #vu-login-brand .vu-brand-main,
body[data-path="login"] #vu-login-brand .vu-brand-sub {
	display: inline-block;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -1px;

	background:
		linear-gradient(
			90deg,
			#ff2f8e 0%,
			#ff5a3d 18%,
			#ffad1f 34%,
			#ffd83a 46%,
			#14d06f 63%,
			#18a8ff 82%,
			#a539ff 100%
		);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;

	filter:
		drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18))
		drop-shadow(0 4px 18px rgba(111, 43, 255, 0.15));
}

body[data-path="login"] #vu-login-brand .vu-brand-main {
	font-size: clamp(34px, 2.7vw, 60px);
	letter-spacing: -1.8px;
}

body[data-path="login"] #vu-login-brand .vu-brand-sub {
	font-size: clamp(20px, 1.5vw, 34px);
	letter-spacing: -0.8px;
	transform: translateY(-2px);
}

/* Use actual VU logo image inside the login card */
body[data-path="login"] #page-login img.app-logo {
	display: block !important;
	content: url("/assets/vu_web/img/vu-logo.png");
	width: 124px !important;
	height: 96px !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 auto 18px !important;
	object-fit: contain;

	filter:
		drop-shadow(0 10px 24px rgba(255, 34, 144, 0.18))
		drop-shadow(0 10px 24px rgba(22, 140, 255, 0.22));
}

body[data-path="login"] #page-login .page-card-head {
	margin-bottom: 30px !important;
}

body[data-path="login"] #page-login .page-card-head h4 {
	font-size: 35px !important;
	font-weight: 790 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.9px !important;
}

/* Mobile */
@media (max-width: 700px) {
	body[data-path="login"] #vu-login-brand {
		top: 18px;
		left: 50%;
		transform: translateX(-50%);
		gap: 8px;
	}

	body[data-path="login"] #vu-login-brand .vu-brand-main {
		font-size: 28px;
	}

	body[data-path="login"] #vu-login-brand .vu-brand-sub {
		font-size: 17px;
		transform: translateY(-1px);
	}

	body[data-path="login"] #page-login img.app-logo {
		width: 100px !important;
		height: 78px !important;
		margin-bottom: 14px !important;
	}
}

/* VU BRAND ASSET PATCH START */

/* The previous JS-created text brand is no longer used. */
body[data-path="login"] #vu-login-brand {
	display: none !important;
}

/* Real uploaded abstract company wordmark at top-left. */
body[data-path="login"] #page-login::before {
	content: "" !important;
	display: block !important;
	position: fixed !important;
	top: 26px !important;
	left: 24px !important;
	width: clamp(350px, 27vw, 530px) !important;
	height: auto !important;
	aspect-ratio: 1200 / 194 !important;
	z-index: 45 !important;
	pointer-events: none !important;
	user-select: none !important;
	white-space: normal !important;
	background-image: url("/assets/vu_web/img/vu-wordmark-abstract.png") !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	background-size: contain !important;
	filter:
		drop-shadow(0 8px 22px rgba(0, 0, 0, 0.20))
		drop-shadow(0 7px 24px rgba(89, 48, 255, 0.12)) !important;
	transform: none !important;
}

/* Remove any text-generated VU mark. */
body[data-path="login"] #page-login .page-card-head::before {
	content: none !important;
	display: none !important;
}

/* Real uploaded abstract VU logo inside the glass card. */
body[data-path="login"] #page-login img.app-logo {
	display: block !important;
	content: url("/assets/vu_web/img/vu-logo-abstract.png") !important;
	width: 126px !important;
	height: auto !important;
	max-width: 126px !important;
	max-height: none !important;
	margin: 0 auto 20px !important;
	object-fit: contain !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	filter:
		drop-shadow(0 10px 22px rgba(255, 30, 139, 0.18))
		drop-shadow(0 12px 26px rgba(21, 136, 255, 0.22)) !important;
}

body[data-path="login"] #page-login .page-card-head {
	margin-bottom: 31px !important;
}

@media (min-width: 701px) and (max-height: 820px) {
	body[data-path="login"] #page-login img.app-logo {
		width: 102px !important;
		max-width: 102px !important;
		margin-bottom: 13px !important;
	}

	body[data-path="login"] #page-login .page-card-head {
		margin-bottom: 23px !important;
	}
}

@media (max-width: 700px) {
	body[data-path="login"] #page-login::before {
		top: 19px !important;
		left: 50% !important;
		width: min(340px, calc(100vw - 34px)) !important;
		transform: translateX(-50%) !important;
		background-position: center !important;
	}

	body[data-path="login"] #page-login img.app-logo {
		width: 96px !important;
		max-width: 96px !important;
		margin-bottom: 14px !important;
	}
}

/* VU BRAND ASSET PATCH END */

/* VU REAL WORDMARK PATCH START */

/* Disable all previous text/pseudo wordmarks */
body[data-path="login"] #page-login::before {
	content: none !important;
	display: none !important;
}

body[data-path="login"] #vu-login-brand {
	display: none !important;
}

/* Actual uploaded company wordmark */
body[data-path="login"] #vu-login-wordmark {
	display: block !important;
	position: fixed !important;
	top: 23px !important;
	left: 22px !important;
	z-index: 9999 !important;

	width: clamp(390px, 25.5vw, 475px) !important;
	height: auto !important;
	max-width: calc(100vw - 44px) !important;

	object-fit: contain !important;
	object-position: left center !important;

	background: transparent !important;
	border: 0 !important;

	pointer-events: none !important;
	user-select: none !important;

	filter:
		drop-shadow(0 6px 18px rgba(0, 0, 0, 0.22))
		drop-shadow(0 8px 25px rgba(73, 61, 255, 0.12)) !important;
}

@media (max-width: 700px) {
	body[data-path="login"] #vu-login-wordmark {
		top: 18px !important;
		left: 50% !important;
		width: min(350px, calc(100vw - 34px)) !important;
		transform: translateX(-50%) !important;
		object-position: center !important;
	}
}

/* VU REAL WORDMARK PATCH END */