:root{
	--bg: #0f1724;
	--card: #0b1220;
	--muted: #9aa4b2;
	--accent: #7c3aed;
	--accent-2: #ffb86b;
	--glass: rgba(255,255,255,0.03);
	--radius: 12px;
	font-family: Inter, system-ui, -apple-system, "Helvetica Neue", Arial;
	color-scheme: dark;
}

*{box-sizing:border-box}
/* body{
	margin:0;
	min-height:100vh;
	background: linear-gradient(180deg, #071228 0%, #071028 60%);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	color:#e6eef8;
	-webkit-font-smoothing:antialiased;
} */

.form-container{
	width:100%;
	max-width:980px;
	display:grid;
	grid-template-columns: 1fr 420px;
	gap:28px;
	align-items:center;
}

/* left: illustration / pitch */
.hero{
	padding:32px;
}
.logo{
	display:inline-flex;
	gap:12px;
	align-items:center;
	margin-bottom:18px;
}
.logo .mark{
	width:48px;
	height:48px;
	border-radius:10px;
	background: linear-gradient(135deg,var(--accent), var(--accent-2));
	display:inline-block;
	box-shadow: 0 6px 18px rgba(124,58,237,0.24), inset 0 -6px 18px rgba(255,184,107,0.06);
}
h1{
	margin:0 0 14px 0;
	font-size:28px;
	line-height:1.05;
}
p.lead{
	margin:0;
	color:var(--muted);
	max-width:60ch;
	font-size:15px;
}

/* right: card */
.card{
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border-radius: var(--radius);
	padding: 26px;
	box-shadow: 0 8px 40px rgba(2,6,23,0.6), 0 1px 0 rgba(255,255,255,0.02) inset;
	border: 1px solid rgba(255,255,255,0.03);
}

form { display:flex; flex-direction:column; gap:12px; }
label{ font-size:13px; color:var(--muted); display:block; margin-bottom:6px; }
.field{
	display:flex;
	flex-direction:column;
}
input[type="text"].bayoula,
input[type="email"].bayoula,
input[type="password"].bayoula{
	background: var(--glass);
	border: 1px solid rgba(255,255,255,0.04);
	padding:12px 14px;
	border-radius:10px;
	color:inherit;
	outline:none;
	font-size:15px;
}
input.bayoula:focus{
	box-shadow: 0 6px 18px rgba(124,58,237,0.12);
	border-color: rgba(124,58,237,0.8);
}

.row{
	display:flex;
	gap:12px;
	align-items:center;
	justify-content:space-between;
}

.remember{
	display:flex;
	gap:8px;
	align-items:center;
	font-size:14px;
	color:var(--muted);
}

button[type="submit"]{
	background: linear-gradient(90deg,var(--accent), #5b21b6);
	border: none;
	color: white;
	padding:12px 14px;
	border-radius:10px;
	font-weight:600;
	cursor:pointer;
	font-size:15px;
	box-shadow: 0 8px 18px rgba(124,58,237,0.18);
}
button[type="submit"]:hover{ transform: translateY(-1px); }

.alt{
	margin-top:6px;
	font-size:13px;
	color:var(--muted);
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.error{
	background: rgba(255,60,60,0.08);
	color: #ffb3b3;
	border: 1px solid rgba(255,60,60,0.12);
	padding:10px 12px;
	border-radius:8px;
	font-size:13px;
}

.divider{
	height:1px;
	background:linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
	margin:12px 0;
	border-radius:2px;
}

.socials{ display:flex; gap:8px; }
.socials button{
	background:transparent;
	border:1px solid rgba(255,255,255,0.04);
	padding:10px 12px;
	border-radius:10px;
	cursor:pointer;
	color:var(--muted);
	font-size:14px;
}

/* password toggle */
.pw-row{ position:relative; }
.pw-toggle{
	position:absolute;
	right:10px;
	top:50%;
	transform:translateY(-50%);
	background:transparent;
	border:none;
	color:var(--muted);
	cursor:pointer;
	font-size:13px;
}

.flex-center {
	min-height: 100vh;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* small screens */
@media (max-width:900px){
	.form-container{ grid-template-columns: 1fr; padding:0; max-width:520px; }
	.hero{ order:2; padding:14px 6px 0 6px; }
	.card{ order:1; }
}