:root{
--bg-overlay: rgba(10,12,20,0.45);
--card-bg: rgba(250,250,250,0.90);
--primary: #0b6efd;
--primary-contrast: #fff;
--secondary: #00ca8e;
--secondary-contrast: #161212;
--muted: #303236;
--shadow: 0 8px 30px rgba(12,18,30,0.18);
--radius: 12px;
--max-width: 420px;
--gap: 14px;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
color-scheme: light;
}

* {
	box-sizing:border-box
}

html, body {
	height:100%
}

body {
	margin:0;
	min-height:100%;
	background:#0f1724;
	overflow:hidden;
}

/* Fullscreen background image (in folder assets/background.jpg) */
.bg {
	position:fixed;
	inset:0;
	background-image: url("../assets/images/WP1.png");
	background-size:cover;
	background-position:center;
	filter:contrast(0.95) saturate(1.05);
	z-index:0;
}

/* subtle overlay for readability */
.bg::after {
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.36));
	pointer-events:none;
}

/* center container */
.center-wrap {
	position:relative;
	z-index:2;
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:32px;
}

/* card */
.login-card {
	width: 100%;
	max-width: var(--max-width);
	background: var(--card-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: stretch;
	backdrop-filter: blur(6px);
}

/* brand */
.brand {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	margin-bottom:4px;
}

.logo {
	width:64px;
	height:64px;
	object-fit:contain;
}

.brand-title {
	margin:0;
	font-size:1.125rem;
	font-weight:600;
	color:#0f1724;
}

/* form */
.login-form {
	display:flex;
	flex-direction:column;
	gap:var(--gap);
}

.label {
	font-size:1rem;
	color:var(--muted);
	margin-bottom:0px;
}

.input {
	width: 100%;
	margin-top: 0px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid rgba(15,23,42,0.56);
	background: #fff;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
	font-size: 0.98rem;
	color: #0b1220;
	outline: none;
	transition: box-shadow .15s ease, border-color .15s ease, transform .05s;
}

.input:focus {
	border-color: color-mix(in srgb, var(--primary) 70%, black 20%);
	box-shadow: 0 6px 18px rgba(11,110,253,0.12);
}

/* buttons */
.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:12px 14px;
	border-radius:10px;
	font-weight:300;
	font-size:0.98rem;
	border:none;
	cursor:pointer;
}

.btn:active {
	transform:translateY(1px)
}

.primary {
	background:var(--primary);
	color:var(--primary-contrast);
	box-shadow: 0 8px 20px rgba(11,110,253,0.14);
}

/* SSO button style */
.sso {
	background: var(--secondary);
	color: var(--secondary-contrast);
	border:1px solid rgba(15,23,42,0.06);
}

/* or separator */
.or {
	display:flex;
	align-items:center;
	gap:12px;
	justify-content:center;
	margin-top:4px;
}

.or span {
	background:transparent;
	color:var(--muted);
	font-size:0.9rem;
	padding:0 8px;
}

/* small line to left/right */
.or::before, .or::after {
	content:"";
	flex:1;
	height:1px;
	background:linear-gradient(90deg, transparent, rgba(15,23,42,0.06), transparent);
}

/* forgot link */
.forgot {
	margin-top:6px;
	font-size:0.9rem;
	color:var(--primary);
	text-align:center;
	display:block;
	text-decoration:none;
}

.forgot:hover {
	text-decoration:underline
}

/* responsive tweaks */
@media (max-width:480px){
.login-card{padding:20px;border-radius:10px}
.logo{width:56px;height:56px}
:root{--max-width:360px}
}