/* =====================================================
   PAGE RESET
===================================================== */

html:has(.cn-auth-page),
body:has(.cn-auth-page) {
	background: #02040a !important;
}


body:has(.cn-auth-page) {
	margin: 0 !important;
}


.cn-auth-page,
.cn-auth-page * {
	box-sizing: border-box;
}


.cn-auth-page {

	--cn-bg: #02040a;

	--cn-card: #070b14;

	--cn-text: #ffffff;

	--cn-soft: #c4cada;

	--cn-muted: #8c96aa;

	--cn-muted-2: #606b80;

	--cn-line:
		rgba(255,255,255,.075);

	--cn-line-strong:
		rgba(255,255,255,.12);

	--cn-blue:
		#2A00FF;

	width: 100%;

	min-height: 100svh;

	display: flex;

	flex-direction: column;

	position: relative;

	overflow: hidden;

	color: var(--cn-text);

	font-family:
		"Outfit",
		Inter,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;

	background:

		radial-gradient(
			circle at 50% -5%,
			rgba(42,0,255,.18),
			transparent 34%
		),

		radial-gradient(
			circle at 86% 35%,
			rgba(61,82,255,.055),
			transparent 27%
		),

		#02040a;

}


.cn-auth-page::before {

	content: "";

	position: absolute;

	inset: 0;

	pointer-events: none;

	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:
		72px 72px;

	-webkit-mask-image:
		linear-gradient(
			to bottom,
			#000,
			transparent 80%
		);

	mask-image:
		linear-gradient(
			to bottom,
			#000,
			transparent 80%
		);

}



/* =====================================================
   MAIN
===================================================== */

.cn-auth-main {

	position: relative;

	z-index: 1;

	flex: 1;

	width: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	padding:
		62px 24px
		52px;

}


.cn-auth-shell {

	width: 100%;

	max-width: 470px;

	margin: 0 auto;

}



/* =====================================================
   HEADER
===================================================== */

.cn-auth-header {

	text-align: center;

	margin-bottom: 27px;

}


.cn-auth-logo-link {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	margin-bottom: 17px;

	text-decoration: none !important;

}


.cn-auth-logo {

	display: block;

	width: 70px;

	height: 70px;

	object-fit: contain;

	filter:
		drop-shadow(
			0 12px 30px
			rgba(42,0,255,.20)
		);

	transition:
		transform .2s ease,
		filter .2s ease;

}


.cn-auth-logo-link:hover
.cn-auth-logo {

	transform:
		translateY(-1px);

	filter:
		drop-shadow(
			0 15px 34px
			rgba(42,0,255,.28)
		);

}


.cn-auth-badge {

	width: max-content;

	margin:
		0 auto 15px;

	padding:
		7px 11px;

	border:
		1px solid
		rgba(97,84,255,.20);

	border-radius:
		999px;

	background:
		rgba(42,0,255,.075);

	color:
		#b9b2ff;

	font-size:
		10px;

	line-height:
		1;

	font-weight:
		700;

	letter-spacing:
		.14em;

}


.cn-auth-header h1 {

	margin:
		0 !important;

	color:
		#ffffff !important;

	font-size:
		clamp(
			2.15rem,
			5vw,
			2.8rem
		);

	line-height:
		1.05;

	font-weight:
		650;

	letter-spacing:
		-.045em;

}


.cn-auth-header p {

	max-width:
		390px;

	margin:
		13px auto 0 !important;

	color:
		var(--cn-muted) !important;

	font-size:
		15px;

	line-height:
		1.65;

	font-weight:
		400;

}



/* =====================================================
   CARD
===================================================== */

.cn-auth-card {

	position: relative;

	width: 100%;

	padding:
		27px;

	overflow:
		hidden;

	border:
		1px solid
		var(--cn-line);

	border-radius:
		22px;

	background:

		linear-gradient(
			145deg,
			rgba(10,15,28,.975),
			rgba(5,9,18,.985)
		);

	box-shadow:

		0 30px 90px
		rgba(0,0,0,.43),

		inset 0 1px 0
		rgba(255,255,255,.025);

}


.cn-auth-card::before {

	content: "";

	position: absolute;

	top:
		-165px;

	left:
		50%;

	width:
		250px;

	height:
		250px;

	transform:
		translateX(-50%);

	border-radius:
		50%;

	background:
		rgba(42,0,255,.15);

	filter:
		blur(88px);

	pointer-events:
		none;

}



/* =====================================================
   SOCIAL LOGIN
===================================================== */

.cn-auth-social {

	position: relative;

	z-index: 2;

	display:
		grid;

	gap:
		10px;

}


.cn-auth-social
.nsl-container {

	width:
		100% !important;

	margin:
		0 !important;

}


.cn-auth-social
.nsl-container > div {

	width:
		100% !important;

	margin:
		0 !important;

}


.cn-auth-social
.nsl-button {

	width:
		100% !important;

	min-height:
		50px !important;

	border-radius:
		13px !important;

	box-shadow:
		none !important;

}



/* =====================================================
   DIVIDER
===================================================== */

.cn-auth-divider {

	position:
		relative;

	z-index:
		2;

	display:
		grid;

	grid-template-columns:
		1fr auto 1fr;

	align-items:
		center;

	gap:
		14px;

	margin:
		22px 0;

}


.cn-auth-divider span {

	height:
		1px;

	background:

		linear-gradient(
			90deg,
			transparent,
			rgba(255,255,255,.09)
		);

}


.cn-auth-divider
span:last-child {

	background:

		linear-gradient(
			90deg,
			rgba(255,255,255,.09),
			transparent
		);

}


.cn-auth-divider p {

	margin:
		0 !important;

	color:
		#677287 !important;

	font-size:
		12px;

	line-height:
		1;

	font-weight:
		500;

}



/* =====================================================
   ERROR
===================================================== */

.cn-auth-error {

	position:
		relative;

	z-index:
		2;

	display:
		flex;

	align-items:
		flex-start;

	gap:
		10px;

	margin:
		0 0 19px;

	padding:
		12px 14px;

	border:
		1px solid
		rgba(255,90,90,.17);

	border-radius:
		12px;

	background:
		rgba(255,70,70,.055);

	color:
		#ffcaca;

	font-size:
		13px;

	line-height:
		1.5;

}


.cn-auth-error[hidden] {
	display:
		none !important;
}


.cn-auth-error-icon {

	flex:
		0 0 18px;

	width:
		18px;

	height:
		18px;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	margin-top:
		1px;

	border-radius:
		50%;

	background:
		rgba(255,100,100,.12);

	font-size:
		11px;

	font-weight:
		700;

}



/* =====================================================
   FORM
===================================================== */

.cn-auth-form {

	position:
		relative;

	z-index:
		2;

}


.cn-auth-field {

	margin-bottom:
		17px;

}


.cn-auth-field > label,
.cn-auth-label-row label {

	display:
		block;

	margin:
		0 0 8px !important;

	color:
		#d9deea !important;

	font-size:
		13px;

	line-height:
		1.2;

	font-weight:
		500;

}


.cn-auth-label-row {

	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		18px;

	margin-bottom:
		8px;

}


.cn-auth-label-row label {

	margin:
		0 !important;

}


.cn-auth-label-row a {

	color:
		#8993aa !important;

	font-size:
		12px;

	line-height:
		1.2;

	text-decoration:
		none !important;

	transition:
		color .18s ease;

}


.cn-auth-label-row a:hover {

	color:
		#ffffff !important;

}



/* =====================================================
   INPUTS
===================================================== */

.cn-auth-field input {

	width:
		100%;

	height:
		52px;

	margin:
		0 !important;

	padding:
		0 15px !important;

	outline:
		none !important;

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

	border-radius:
		13px !important;

	background:
		rgba(255,255,255,.035)
		!important;

	color:
		#ffffff !important;

	font-family:
		inherit !important;

	font-size:
		14px !important;

	font-weight:
		400;

	box-shadow:
		inset 0 1px 0
		rgba(255,255,255,.015)
		!important;

	transition:

		border-color .18s ease,

		background .18s ease,

		box-shadow .18s ease;

}


.cn-auth-field
input::placeholder {

	color:
		#596276 !important;

	opacity:
		1;

}


.cn-auth-field
input:hover {

	border-color:
		rgba(255,255,255,.13)
		!important;

}


.cn-auth-field
input:focus {

	border-color:
		rgba(79,55,255,.68)
		!important;

	background:
		rgba(255,255,255,.045)
		!important;

	box-shadow:
		0 0 0 3px
		rgba(42,0,255,.10)
		!important;

}



/* =====================================================
   PASSWORD
===================================================== */

.cn-auth-password-wrap {

	position:
		relative;

}


.cn-auth-password-wrap input {

	padding-right:
		52px !important;

}


.cn-auth-password-toggle {

	position:
		absolute;

	top:
		50%;

	right:
		8px;

	transform:
		translateY(-50%);

	width:
		36px;

	height:
		36px;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	padding:
		0 !important;

	border:
		0 !important;

	border-radius:
		9px !important;

	background:
		transparent !important;

	color:
		#727d94 !important;

	box-shadow:
		none !important;

	cursor:
		pointer;

	transition:

		color .18s ease,

		background .18s ease;

}


.cn-auth-password-toggle:hover {

	color:
		#ffffff !important;

	background:
		rgba(255,255,255,.05)
		!important;

}


.cn-auth-password-toggle svg {

	width:
		19px;

	height:
		19px;

	display:
		block;

}


.cn-auth-eye-closed {

	display:
		none !important;

}


.cn-auth-password-toggle.is-visible
.cn-auth-eye-open {

	display:
		none !important;

}


.cn-auth-password-toggle.is-visible
.cn-auth-eye-closed {

	display:
		block !important;

}



/* =====================================================
   REMEMBER
===================================================== */

.cn-auth-remember {

	position:
		relative;

	width:
		max-content;

	display:
		flex;

	align-items:
		center;

	gap:
		9px;

	margin:
		2px 0 20px;

	color:
		#929caf !important;

	font-size:
		13px;

	line-height:
		1.3;

	cursor:
		pointer;

	user-select:
		none;

}


.cn-auth-remember input {

	position:
		absolute;

	width:
		1px;

	height:
		1px;

	opacity:
		0;

	pointer-events:
		none;

}


.cn-auth-check {

	position:
		relative;

	flex:
		0 0 17px;

	width:
		17px;

	height:
		17px;

	border:
		1px solid
		rgba(255,255,255,.16);

	border-radius:
		5px;

	background:
		rgba(255,255,255,.035);

	transition:

		border-color .18s ease,

		background .18s ease;

}


.cn-auth-remember
input:checked
+ .cn-auth-check {

	border-color:
		var(--cn-blue);

	background:
		var(--cn-blue);

}


.cn-auth-remember
input:checked
+ .cn-auth-check::after {

	content:
		"";

	position:
		absolute;

	left:
		5px;

	top:
		2px;

	width:
		4px;

	height:
		8px;

	border:
		solid #ffffff;

	border-width:
		0 2px 2px 0;

	transform:
		rotate(45deg);

}



/* =====================================================
   PRIMARY BUTTON
===================================================== */

.cn-auth-primary {

	width:
		100%;

	height:
		52px;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		10px;

	padding:
		0 20px !important;

	border:
		0 !important;

	border-radius:
		13px !important;

	background:

		linear-gradient(
			135deg,
			#2A00FF,
			#4325ff
		)
		!important;

	color:
		#ffffff !important;

	font-family:
		inherit !important;

	font-size:
		14px !important;

	font-weight:
		600 !important;

	line-height:
		1 !important;

	text-decoration:
		none !important;

	cursor:
		pointer;

	box-shadow:
		0 12px 30px
		rgba(42,0,255,.22)
		!important;

	transition:

		transform .17s ease,

		box-shadow .17s ease,

		background .17s ease,

		opacity .17s ease;

}


.cn-auth-primary:hover {

	transform:
		translateY(-1px);

	background:

		linear-gradient(
			135deg,
			#3008ff,
			#5033ff
		)
		!important;

	box-shadow:
		0 16px 34px
		rgba(42,0,255,.29)
		!important;

}


.cn-auth-primary:active {

	transform:
		translateY(0)
		scale(.995);

}



/* =====================================================
   LOADING
===================================================== */

.cn-auth-spinner {

	width:
		15px;

	height:
		15px;

	display:
		none;

	border:
		2px solid
		rgba(255,255,255,.35);

	border-top-color:
		#ffffff;

	border-radius:
		50%;

	animation:
		cn-auth-spin
		.7s linear infinite;

}


.cn-auth-primary.is-loading {

	pointer-events:
		none;

	opacity:
		.88;

}


.cn-auth-primary.is-loading
.cn-auth-spinner {

	display:
		block;

}


@keyframes cn-auth-spin {

	to {
		transform:
			rotate(360deg);
	}

}



/* =====================================================
   HELP
===================================================== */

.cn-auth-help {

	position:
		relative;

	z-index:
		2;

	display:
		flex;

	justify-content:
		center;

	align-items:
		center;

	flex-wrap:
		wrap;

	gap:
		5px;

	margin-top:
		20px;

	color:
		#737d91;

	font-size:
		12px;

	line-height:
		1.4;

}


.cn-auth-help a {

	color:
		#a9b1c3 !important;

	font-weight:
		500;

	text-decoration:
		none !important;

	transition:
		color .18s ease;

}


.cn-auth-help a:hover {

	color:
		#ffffff !important;

}



/* =====================================================
   ALREADY LOGGED IN
===================================================== */

.cn-auth-card-logged {

	text-align:
		center;

}


.cn-auth-success-icon {

	width:
		50px;

	height:
		50px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	margin:
		0 auto 19px;

	border:
		1px solid
		rgba(92,75,255,.22);

	border-radius:
		50%;

	background:
		rgba(42,0,255,.11);

	color:
		#afa7ff;

}


.cn-auth-success-icon svg {

	width:
		22px;

	height:
		22px;

}


.cn-auth-card-logged h1 {

	margin:
		0 !important;

	color:
		#ffffff !important;

	font-size:
		24px;

	font-weight:
		600;

	letter-spacing:
		-.03em;

}


.cn-auth-card-logged p {

	margin:
		10px 0 22px !important;

	color:
		var(--cn-muted) !important;

	font-size:
		14px;

	line-height:
		1.6;

}



/* =====================================================
   FOOTER
===================================================== */

.cn-auth-footer {

	position:
		relative;

	z-index:
		1;

	width:
		100%;

	padding:
		22px 24px
		max(
			28px,
			env(safe-area-inset-bottom)
		);

}


.cn-auth-footer-inner {

	width:
		min(100%, 960px);

	margin:
		0 auto;

	padding-top:
		20px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		20px;

	border-top:
		1px solid
		rgba(255,255,255,.055);

}


.cn-auth-footer-copy {

	flex:
		0 0 auto;

	color:
		#5f687c;

	font-size:
		11px;

	line-height:
		1.4;

}


.cn-auth-footer-links {

	display:
		flex;

	justify-content:
		flex-end;

	align-items:
		center;

	flex-wrap:
		wrap;

	gap:
		8px 20px;

}


.cn-auth-footer-links a {

	color:
		#646e82 !important;

	font-size:
		11px;

	line-height:
		1.4;

	text-decoration:
		none !important;

	transition:
		color .18s ease;

}


.cn-auth-footer-links a:hover {

	color:
		#b3bbca !important;

}



/* =====================================================
   ACCESSIBILITY
===================================================== */

.cn-auth-page a:focus-visible,
.cn-auth-page button:focus-visible {

	outline:
		2px solid
		rgba(93,72,255,.95)
		!important;

	outline-offset:
		3px;

}


.cn-auth-remember
input:focus-visible
+ .cn-auth-check {

	outline:
		2px solid
		rgba(93,72,255,.95);

	outline-offset:
		3px;

}



/* =====================================================
   MOBILE
===================================================== */

@media
(max-width: 600px) {


	.cn-auth-main {

		align-items:
			flex-start;

		padding:
			38px 16px
			34px;

	}


	.cn-auth-shell {

		max-width:
			100%;

	}


	.cn-auth-header {

		margin-bottom:
			23px;

	}


	.cn-auth-logo {

		width:
			62px;

		height:
			62px;

	}


	.cn-auth-logo-link {

		margin-bottom:
			15px;

	}


	.cn-auth-header h1 {

		font-size:
			2rem;

	}


	.cn-auth-header p {

		max-width:
			330px;

		font-size:
			14px;

	}


	.cn-auth-card {

		padding:
			22px 18px;

		border-radius:
			19px;

	}


	.cn-auth-field input,
	.cn-auth-primary {

		height:
			50px;

	}


	.cn-auth-footer {

		padding:
			18px 16px
			max(
				24px,
				env(safe-area-inset-bottom)
			);

	}


	.cn-auth-footer-inner {

		flex-direction:
			column;

		justify-content:
			center;

		gap:
			13px;

		text-align:
			center;

	}


	.cn-auth-footer-links {

		justify-content:
			center;

		gap:
			10px 16px;

	}

}



/* =====================================================
   REDUCED MOTION
===================================================== */

@media
(prefers-reduced-motion: reduce) {

	.cn-auth-page *,
	.cn-auth-page *::before,
	.cn-auth-page *::after {

		scroll-behavior:
			auto !important;

		animation-duration:
			.01ms !important;

		animation-iteration-count:
			1 !important;

		transition-duration:
			.01ms !important;

	}

}

.cn-auth-page .cn-auth-logo { width: var(--cashly-logo-focused, 60px); height: var(--cashly-logo-focused, 60px); object-fit: contain; }
@media (max-width: 768px) { .cn-auth-page .cn-auth-logo { width: var(--cashly-logo-focused, 46px); height: var(--cashly-logo-focused, 46px); } }