/* login.css */

*{box-sizing:border-box}

body{
	margin:0;
	font-family:"Segoe UI",Arial,sans-serif;
	background:
		radial-gradient(circle at top left,rgba(124,58,237,.18),transparent 28%),
		radial-gradient(circle at bottom right,rgba(6,182,212,.14),transparent 24%),
		linear-gradient(135deg,#f5f7ff,#eef2ff);
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	color:#111827;
	position:relative
}

body:before{
	content:"";
	position:absolute;
	width:520px;
	height:520px;
	background:rgba(124,58,237,.10);
	filter:blur(90px);
	border-radius:50%;
	top:-180px;
	left:-140px
}

body:after{
	content:"";
	position:absolute;
	width:460px;
	height:460px;
	background:rgba(6,182,212,.10);
	filter:blur(90px);
	border-radius:50%;
	bottom:-180px;
	right:-120px
}

.login-wrapper{
	position:relative;
	z-index:2;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px
}

.login-card{
	width:430px;
	background:rgba(255,255,255,.78);
	backdrop-filter:blur(18px);
	border:1px solid rgba(255,255,255,.65);
	border-radius:30px;
	padding:34px;
	box-shadow:0 25px 60px rgba(15,23,42,.12),0 0 80px rgba(124,58,237,.10)
}

.login-badge{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 14px;
	border-radius:999px;
	background:#ede9fe;
	color:#6d28d9;
	font-size:12px;
	font-weight:700;
	margin-bottom:18px
}

.brand{
	display:flex;
	align-items:center;
	gap:16px;
	margin-bottom:28px
}

.brand-logo{
	width:78px;
	height:78px;
	border-radius:26px;
	background:linear-gradient(135deg,#7c3aed,#4f46e5,#06b6d4);
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 15px 35px rgba(124,58,237,.22);
	flex-shrink:0
}

.brand-logo img{
	width:102px;
	height:102px;
	object-fit:contain
}

.brand h1{
	margin:0;
	font-size:32px;
	font-weight:900;
	letter-spacing:-.03em;
	line-height:1;
	color:#111827
}

.brand small{
	display:block;
	margin-top:6px;
	color:#64748b;
	font-size:14px;
	font-weight:500
}

.field{margin-bottom:18px}

.field label{
	display:block;
	font-size:13px;
	font-weight:800;
	margin-bottom:8px;
	color:#374151
}

.field input{
	width:100%;
	border:1px solid #dbe3ee;
	border-radius:16px;
	padding:14px 16px;
	font-size:14px;
	background:#fff;
	outline:none;
	transition:.18s;
	color:#111827
}

.field input::placeholder{color:#9ca3af}

.field input:focus{
	border-color:#8b5cf6;
	box-shadow:0 0 0 4px rgba(124,58,237,.12)
}

.btn{
	width:100%;
	border:0;
	border-radius:16px;
	background:linear-gradient(135deg,#7c3aed,#4f46e5);
	color:#fff;
	padding:15px;
	font-weight:800;
	cursor:pointer;
	font-size:15px;
	box-shadow:0 12px 28px rgba(124,58,237,.22);
	transition:.18s;
	margin-top:8px
}

.btn:hover{
	transform:translateY(-1px);
	box-shadow:0 18px 36px rgba(124,58,237,.28)
}

.btn i{margin-right:8px}

.error{
	display:none;
	background:#fee2e2;
	color:#991b1b;
	border-radius:14px;
	padding:12px 14px;
	font-size:13px;
	margin-bottom:16px;
	border:1px solid #fecaca;
	font-weight:600
}

.footer{
	text-align:center;
	color:#64748b;
	font-size:12px;
	margin-top:22px;
	line-height:1.5
}

.version{
	margin-top:10px;
	font-size:11px;
	color:#9ca3af
}

@media(max-width:520px){

	.login-card{
		width:100%;
		padding:28px;
		border-radius:24px
	}

	.brand{
		flex-direction:column;
		text-align:center
	}

	.brand h1{
		font-size:26px
	}
}