:root {
	--bg-start: #f4f7fb;
	--bg-end: #eef3f9;
	--card-bg: #ffffff;
	--primary: #1565c0;
	--muted: #6b7a90;
}

/* Fullscreen background image (fallback to gradient if image missing) */
html, body {
	height: 100%;
	overflow: hidden;
}

body {
	background-image: url('/images/bg-login.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: var(--bg-start);
	font-family: Inter, Arial, sans-serif;
	margin: 0;
}

.login-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* Overlay for contrast */
.login-wrapper::before {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.35);
	pointer-events: none;
	z-index: 0;
}

.login-card {
	width: 100%;
	max-width: 420px;
	background: var(--card-bg);
	padding: 28px;
	border-radius: 12px;
	box-shadow: 0 6px 24px rgba(19,35,47,0.08);
	position: relative;
	z-index: 1; /* ensure card is above overlay */
}

.brand h1{
	font-size: 20px;
	margin: 0 0 16px;
	color: var(--primary);
}

.alert{
	padding: 10px 12px;
	border-radius: 8px;
	margin-bottom: 12px;
	font-size: 14px;
}
.alert-error{ background:#fff0f0; color:#9b1b1b; border:1px solid #ffd6d6 }
.alert-success{ background:#f0fff4; color:#176f3b; border:1px solid #d7f3db }

.form-group{ margin-bottom:12px }
.form-group label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px }
.form-control{ width:100%; padding:10px 12px; border-radius:8px; border:1px solid #e6eef6; outline:none; font-size:14px; box-sizing:border-box }
.form-control:focus{ box-shadow:0 0 0 3px rgba(21,101,192,0.08); border-color:var(--primary) }

.form-actions{ margin-top:18px }
.btn-primary{ display:inline-block; width:100%; padding:10px 12px; background:var(--primary); color:white; border:none; border-radius:8px; cursor:pointer; font-weight:600 }
.btn-primary:hover{ filter:brightness(0.95) }

@media (max-width:480px){
	.login-card{ padding:20px }
}