* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin: 0;
}

body {
	font-family: "Segoe UI", Arial, sans-serif;
	overflow: hidden;
	background: #0f172a;
}

/* =========================
   Animated Background
========================= */

.login-wrapper {
	min-height: 100vh;
	position: relative;
	overflow: hidden;

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

	background:
		linear-gradient(
			135deg,
			#0f172a,
			#172554,
			#1e1b4b,
			#0f172a
		);

	background-size: 400% 400%;
	animation: gradientMove 15s ease infinite;
}

@keyframes gradientMove {

	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}


/* =========================
   Floating Circles
========================= */

.circle {
	position: absolute;
	border-radius: 50%;
	filter: blur(1px);
	opacity: .35;
	animation: float 12s infinite ease-in-out;
}

.circle-1 {
	width: 300px;
	height: 300px;
	background: #6366f1;
	top: -100px;
	left: -100px;
}

.circle-2 {
	width: 220px;
	height: 220px;
	background: #06b6d4;
	bottom: -80px;
	right: -50px;
	animation-delay: 2s;
}

.circle-3 {
	width: 130px;
	height: 130px;
	background: #a855f7;
	top: 20%;
	right: 15%;
	animation-delay: 4s;
}

@keyframes float {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}

	50% {
		transform: translate(30px, -40px) scale(1.1);
	}
}


/* =========================
   Login Card
========================= */

.login-card {

	width: 420px;
	max-width: calc(100% - 30px);

	padding: 42px 38px;

	border-radius: 24px;

	background: rgba(255, 255, 255, 0.10);

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

	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);

	box-shadow:
		0 25px 70px rgba(0, 0, 0, .35);

	position: relative;
	z-index: 5;

	animation: cardAppear .8s ease forwards;
}

@keyframes cardAppear {

	from {
		opacity: 0;
		transform: translateY(40px) scale(.96);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}


/* =========================
   Logo
========================= */

.login-logo {

	width: 75px;
	height: 75px;

	margin: 0 auto 18px;

	border-radius: 20px;

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

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

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

	color: white;

	font-size: 32px;

	box-shadow:
		0 10px 30px rgba(0, 0, 0, .25);

	animation: logoPulse 3s infinite ease-in-out;
}

@keyframes logoPulse {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}


.login-title {

	text-align: center;
	color: #fff;

	font-size: 28px;
	font-weight: 700;

	margin-bottom: 5px;
}

.login-subtitle {

	text-align: center;

	color: rgba(255, 255, 255, .65);

	font-size: 14px;

	margin-bottom: 30px;
}


/* =========================
   Form
========================= */

.form-label {

	color: rgba(255, 255, 255, .85);

	font-size: 14px;
	font-weight: 500;

	margin-bottom: 8px;
}

.input-group-custom {

	position: relative;

	margin-bottom: 20px;
}

.input-icon {

	position: absolute;

	left: 15px;
	top: 70%;

	transform: translateY(-50%);

	color: rgba(255, 255, 255, .55);

	z-index: 3;

	font-size: 17px;
}

.form-control-custom {

	height: 52px;

	border-radius: 12px !important;

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

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

	color: #fff;

	padding-left: 45px;
	padding-right: 45px;

	transition: all .3s ease;
}

.form-control-custom::placeholder {

	color: rgba(255, 255, 255, .4);
}

.form-control-custom:focus {

	color: #fff;

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

	border-color: #818cf8;

	box-shadow:
		0 0 0 4px rgba(99, 102, 241, .15);
}


/* Password eye */

.password-toggle {

	position: absolute;

	right: 15px;
	top: 70%;

	transform: translateY(-50%);

	border: 0;
	background: transparent;

	color: rgba(255, 255, 255, .55);

	cursor: pointer;

	z-index: 5;

	font-size: 18px;

	transition: .2s;
}

.password-toggle:hover {

	color: #fff;
}


/* =========================
   Login Button
========================= */

.btn-login {

	width: 100%;

	height: 52px;

	border: none;

	border-radius: 12px;

	background:
		linear-gradient(
			135deg,
			#6366f1,
			#8b5cf6
		);

	color: #fff;

	font-weight: 600;

	font-size: 15px;

	box-shadow:
		0 10px 25px rgba(99, 102, 241, .35);

	transition: all .3s ease;

	position: relative;
	overflow: hidden;
}

.btn-login:hover {

	transform: translateY(-2px);

	box-shadow:
		0 15px 30px rgba(99, 102, 241, .45);
}

.btn-login:active {

	transform: translateY(0);
}


/* =========================
   Notification
========================= */

#loginAlert {

	display: none;

	border-radius: 12px;

	margin-bottom: 20px;

	animation: alertAppear .4s ease;
}

@keyframes alertAppear {

	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* =========================
   Footer
========================= */

.login-footer {

	text-align: center;

	color: rgba(255, 255, 255, .45);

	font-size: 12px;

	margin-top: 25px;
}


/* =========================
   Loading
========================= */

.btn-loader {

	display: none;
}


/* =========================
   Mobile
========================= */

@media (max-width: 576px) {

	.login-card {

		padding: 35px 25px;

		border-radius: 20px;
	}

	.login-title {

		font-size: 24px;
	}

	.circle-1 {

		width: 200px;
		height: 200px;
	}

	.circle-2 {

		width: 150px;
		height: 150px;
	}
}