@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
	--bg:#fdece0;
	--bg-2:#fbe0cd;
	--accent:#f6b48c;
	--accent-dark:#e8935c;
	--ink:#2b2320;
	--muted:#a08d82;
	--line:#e7d3c4;
	--radius-md:12px;
}

*{box-sizing:border-box;}

html,body{
	height:100%;
	margin:0;
	font-family:'Inter',sans-serif;
	background:var(--bg);
}

.ml-wrapper{
	min-height:100vh;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:40px 24px;
}

.ml-shell{
	width:100%;
	max-width:980px;
	display:flex;
	align-items:center;
	gap:40px;
}

/* ---------- brand strip (top-left, like reference header) ---------- */
.ml-topbar{
	position:fixed;
	top:28px;
	left:36px;
	right:36px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	z-index:5;
}
.ml-brand{
	display:flex;
	align-items:center;
	gap:12px;
}
.ml-brand-icon{
	height:44px;
	width:44px;
	border-radius:50%;
	background:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 4px 14px -4px rgba(232,147,92,.35);
	overflow:hidden;
}
.ml-brand-icon img{height:26px;width:26px;object-fit:contain;}
.ml-brand-text .name{
	font-family:'Poppins',sans-serif;
	font-weight:700;
	font-size:15px;
	color:var(--ink);
}
.ml-brand-text .tag{
	font-size:11px;
	color:var(--muted);
}

/* ---------- LEFT: form ---------- */
.ml-form-side{
	flex:1;
	min-width:300px;
	max-width:420px;
}
.ml-form-side h2{
	font-family:'Poppins',sans-serif;
	font-weight:700;
	font-size:26px;
	color:var(--ink);
	margin:0 0 26px;
}

.ml-field{
	margin-bottom:18px;
}
.ml-field-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:6px;
}
.ml-field-top label{
	font-size:12.5px;
	font-weight:600;
	color:var(--ink);
	letter-spacing:.02em;
}
.ml-field select.ml-role{
	border:none;
	background:transparent;
	color:var(--accent-dark);
	font-size:12px;
	font-weight:600;
	cursor:pointer;
}

.ml-input-wrap{
	display:flex;
	align-items:center;
	border-bottom:1.5px solid var(--line);
	padding-bottom:9px;
	transition:border-color .18s ease;
}
.ml-input-wrap:focus-within{
	border-color:var(--accent-dark);
}
.ml-input-wrap i{
	color:var(--muted);
	font-size:14px;
	margin-right:10px;
	width:16px;
	text-align:center;
}
.ml-input-wrap input{
	flex:1;
	border:none;
	outline:none;
	background:transparent;
	font-size:14.5px;
	color:var(--ink);
	font-family:'Inter',sans-serif;
}
.ml-input-wrap input::placeholder{color:#c9b6a8;}
.ml-input-wrap .ml-toggle-pass{
	cursor:pointer;
	margin-right:0;
}
.ml-field .error{
	color:#c0392b;
	font-size:11.5px;
	margin-top:5px;
	display:inline-block;
}
.ml-field.has-error .ml-input-wrap{border-color:#c0392b;}

.ml-forgot-row{
	text-align:right;
	margin:2px 0 22px;
}
.ml-forgot-row a{
	font-size:12px;
	font-weight:600;
	color:var(--muted);
	text-decoration:none;
}
.ml-forgot-row a:hover{color:var(--accent-dark);}

.ml-check-row{
	display:flex;
	align-items:center;
	gap:8px;
	margin:2px 0 22px;
	font-size:12.5px;
	color:var(--muted);
}
.ml-check-row input{accent-color:var(--accent-dark);width:14px;height:14px;cursor:pointer;}

.ml-btn{
	width:100%;
	border:none;
	cursor:pointer;
	padding:14px;
	border-radius:999px;
	font-family:'Poppins',sans-serif;
	font-weight:600;
	font-size:14.5px;
	color:#7a3c14;
	background:linear-gradient(135deg, var(--accent), var(--accent-dark));
	box-shadow:0 10px 22px -10px rgba(232,147,92,.6);
	transition:transform .15s ease, box-shadow .15s ease;
}
.ml-btn:hover{transform:translateY(-2px);}
.ml-btn:active{transform:translateY(0);}

.ml-install-row{
	text-align:center;
	margin-top:18px;
}
.ml-install-link{
	display:none;
	align-items:center;
	justify-content:center;
	gap:6px;
	font-size:12px;
	font-weight:600;
	color:var(--accent-dark);
	text-decoration:none;
	cursor:pointer;
}

.ml-form-foot{
	margin-top:20px;
	text-align:center;
	font-size:11.5px;
	color:var(--muted);
}

/* ---------- RIGHT: illustration ---------- */
.ml-illus-side{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	min-width:300px;
}
.ml-illus-arch{
	position:absolute;
	width:340px;
	height:420px;
	background:linear-gradient(180deg, var(--bg-2), var(--accent));
	border-radius:170px 170px 30px 30px;
	opacity:.9;
	z-index:0;
}
.ml-illus-side svg{
	position:relative;
	z-index:1;
	width:100%;
	max-width:340px;
}

/* ================= MOBILE APP-STYLE LAYOUT ================= */
@media (max-width: 760px){

	html,body{background:var(--accent);}

	.ml-topbar{
		position:static;
		padding:18px 20px 0;
		z-index:3;
	}
	.ml-brand-icon{background:rgba(255,255,255,.9);}
	.ml-brand-text .name{color:#fff;}
	.ml-brand-text .tag{color:rgba(255,255,255,.8);}

	.ml-wrapper{
		padding:0;
		min-height:100vh;
		display:block;
	}

	.ml-shell{
		display:flex;
		flex-direction:column;
		max-width:100%;
		gap:0;
		align-items:stretch;
		min-height:100vh;
	}

	/* Hero banner up top, like a native app login screen */
	.ml-illus-side{
		order:-1;
		min-width:0;
		flex:none;
		height:250px;
		background:linear-gradient(160deg, var(--accent) 0%, var(--accent-dark) 100%);
		border-radius:0 0 36px 36px;
		padding-top:6px;
		overflow:hidden;
	}
	.ml-illus-arch{
		width:220px;
		height:220px;
		border-radius:50%;
		background:rgba(255,255,255,.18);
		top:auto;
	}
	.ml-illus-side svg{
		max-width:210px;
	}

	/* Form sheet, overlapping the hero like a bottom sheet */
	.ml-form-side{
		flex:1;
		max-width:100%;
		width:100%;
		background:#fff9f4;
		border-radius:28px 28px 0 0;
		margin-top:-26px;
		padding:32px 26px 40px;
		box-shadow:0 -10px 30px -18px rgba(43,35,32,.18);
		position:relative;
		z-index:2;
	}

	.ml-form-side h2{
		font-size:22px;
		text-align:center;
		margin-bottom:24px;
	}

	.ml-field{margin-bottom:20px;}

	.ml-input-wrap{
		background:#fff;
		border:1.5px solid var(--line);
		border-radius:14px;
		padding:13px 14px;
	}
	.ml-input-wrap:focus-within{
		border-color:var(--accent-dark);
		box-shadow:0 0 0 4px rgba(232,147,92,.14);
	}
	.ml-input-wrap input{
		font-size:15.5px;
	}

	.ml-forgot-row{margin:0 0 20px;}
	.ml-forgot-row a{font-size:12.5px;}

	.ml-check-row{margin:0 0 24px;font-size:13px;}

	.ml-btn{
		padding:16px;
		font-size:15.5px;
		border-radius:14px;
		box-shadow:0 12px 24px -10px rgba(232,147,92,.55);
	}

	.ml-install-row{margin-top:20px;}
	.ml-form-foot{margin-top:24px;font-size:11px;}
}

@media (max-width: 380px){
	.ml-illus-side{height:215px;}
	.ml-illus-arch{width:180px;height:180px;}
	.ml-illus-side svg{max-width:170px;}
	.ml-form-side{padding:26px 20px 32px;}
}