:root {
	--lux-login-bg: #051326;
	--lux-login-panel: rgba(10, 29, 53, .9);
	--lux-login-line: rgba(142, 199, 239, .22);
	--lux-login-blue: #37b9ee;
	--lux-login-blue-soft: #8bddff;
	--lux-login-purple: #9b7cff;
	--lux-login-white: #f7fbff;
	--lux-login-muted: #a9bed2;
}

html { min-height: 100%; background: var(--lux-login-bg); }

body.login.luxcrm-native-login {
	position: relative;
	min-height: 100vh;
	background:
		radial-gradient(circle at 8% 4%, rgba(40, 166, 227, .23), transparent 33%),
		radial-gradient(circle at 92% 94%, rgba(161, 124, 255, .2), transparent 34%),
		linear-gradient(125deg, #0b2a4f 0, #051326 46%, #18163a 100%);
	color: var(--lux-login-white);
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.login.luxcrm-native-login::before {
	position: fixed;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
	background-size: 52px 52px;
	content: "";
	pointer-events: none;
}

.luxcrm-native-login #login {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: min(440px, calc(100% - 32px));
	padding: clamp(36px, 7vh, 72px) 0 34px;
}

.luxcrm-native-login #login h1 a {
	width: 210px;
	height: 62px;
	margin-bottom: 26px;
	background-image: url("logo.webp");
	background-position: center;
	background-size: contain;
}

.luxcrm-native-login__intro {
	margin: 0 0 15px;
	text-align: center;
}

.luxcrm-native-login__intro > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: #c9dcf0;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.luxcrm-native-login__intro > span::before {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lux-login-blue-soft);
	box-shadow: 0 0 16px var(--lux-login-blue-soft);
	content: "";
}

.luxcrm-native-login__intro strong {
	display: block;
	color: var(--lux-login-white);
	font-size: 25px;
	letter-spacing: -.025em;
	line-height: 1.2;
}

.luxcrm-native-login__intro p {
	margin: 9px 0 0;
	color: var(--lux-login-muted);
	font-size: 13px;
	line-height: 1.55;
}

.luxcrm-native-login #loginform,
.luxcrm-native-login #lostpasswordform,
.luxcrm-native-login #resetpassform,
.luxcrm-native-login #registerform,
.luxcrm-native-login #login > form {
	box-sizing: border-box;
	margin-top: 18px;
	padding: 28px;
	border: 1px solid var(--lux-login-line);
	border-radius: 20px;
	background: var(--lux-login-panel);
	box-shadow: 0 28px 80px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
	backdrop-filter: blur(24px);
}

.luxcrm-native-login #login form .input,
.luxcrm-native-login #login input[type="text"],
.luxcrm-native-login #login input[type="email"],
.luxcrm-native-login #login input[type="password"],
.luxcrm-native-login #login input[type="number"] {
	box-sizing: border-box;
	min-height: 50px;
	padding: 8px 14px;
	border: 1px solid rgba(151, 190, 222, .28);
	border-radius: 11px;
	outline: 0;
	background: rgba(2, 13, 27, .72);
	box-shadow: none;
	color: #fff;
	font-size: 16px;
}

.luxcrm-native-login #login form .input:focus,
.luxcrm-native-login #login input[type="text"]:focus,
.luxcrm-native-login #login input[type="email"]:focus,
.luxcrm-native-login #login input[type="password"]:focus,
.luxcrm-native-login #login input[type="number"]:focus {
	border-color: var(--lux-login-blue);
	box-shadow: 0 0 0 4px rgba(40, 166, 227, .14);
}

.luxcrm-native-login #login label,
.luxcrm-native-login #login form p,
.luxcrm-native-login #login form .description {
	color: #dce9f5;
}

.luxcrm-native-login #login form label {
	font-size: 13px;
	font-weight: 650;
}

.luxcrm-native-login #login .forgetmenot label { color: var(--lux-login-muted); font-weight: 500; }
.luxcrm-native-login #login input[type="checkbox"] { accent-color: var(--lux-login-blue); }

.luxcrm-native-login #login .button-primary,
.luxcrm-native-login #login button[id*="passkey"],
.luxcrm-native-login #login .wfls-login-with-passkey,
.luxcrm-native-login #login [class*="passkey"] .button:not(.wp-hide-pw) {
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(100deg, #49c7f6, #7aa9ff 58%, #a27cff);
	box-shadow: 0 12px 28px rgba(65, 169, 238, .2);
	color: #061426;
	font-weight: 800;
	text-shadow: none;
}

.luxcrm-native-login #login .button-primary:hover,
.luxcrm-native-login #login button[id*="passkey"]:hover,
.luxcrm-native-login #login .wfls-login-with-passkey:hover {
	background: linear-gradient(100deg, #74d7fb, #91baff 58%, #b292ff);
	color: #061426;
}

.luxcrm-native-login #login .wp-hide-pw {
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--lux-login-blue-soft);
}

.luxcrm-native-login #login .message,
.luxcrm-native-login #login .success,
.luxcrm-native-login #login #login_error {
	margin: 15px 0;
	padding: 13px 15px;
	border: 1px solid rgba(142, 199, 239, .26);
	border-left-width: 4px;
	border-radius: 10px;
	background: rgba(10, 29, 53, .9);
	box-shadow: none;
	color: #dce9f5;
	font-size: 13px;
	line-height: 1.5;
}

.luxcrm-native-login #login #login_error {
	border-color: rgba(255, 120, 120, .48);
	color: #ffd7dc;
}

.luxcrm-native-login #login a,
.luxcrm-native-login #login #nav a,
.luxcrm-native-login #login #backtoblog a {
	color: var(--lux-login-blue-soft);
}

.luxcrm-native-login #login a:hover,
.luxcrm-native-login #login #nav a:hover,
.luxcrm-native-login #login #backtoblog a:hover {
	color: #fff;
}

.luxcrm-native-login #login #nav { margin-top: 20px; text-align: center; }
.luxcrm-native-login #login #backtoblog { display: none; }
.luxcrm-native-login .privacy-policy-page-link a,
.luxcrm-native-login .language-switcher label { color: var(--lux-login-muted); }

.luxcrm-native-login__footer {
	position: relative;
	z-index: 1;
	margin: -12px auto 28px;
	color: var(--lux-login-muted);
	font-size: 11px;
	text-align: center;
}

.luxcrm-native-login__secure {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 50%;
	background: #59dfa1;
	box-shadow: 0 0 12px rgba(89, 223, 161, .7);
}

@media (max-width: 520px) {
	.luxcrm-native-login #login { padding-top: 28px; }
	.luxcrm-native-login #login h1 a { width: 175px; height: 52px; margin-bottom: 20px; }
	.luxcrm-native-login__intro strong { font-size: 22px; }
	.luxcrm-native-login #loginform,
	.luxcrm-native-login #lostpasswordform,
	.luxcrm-native-login #resetpassform,
	.luxcrm-native-login #registerform,
	.luxcrm-native-login #login > form { padding: 23px 20px; border-radius: 17px; }
}

@media (prefers-reduced-motion: reduce) {
	.luxcrm-native-login #login .button { transition: none; }
}