:root {
	--ink: #0f172a;
	--muted: #64748b;
	--line: #e2e8f0;
	--card: #ffffff;
	--hero: #07111f;
	--accent: #6d5efc;
	--accent-2: #4f7cff;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	min-height: 100%;
	font-family: Manrope, "Segoe UI", sans-serif;
	color: var(--ink);
	background: #eef3fb;
}

button, input { font: inherit; }

.login-page {
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
}

.login-hero {
	position: relative;
	overflow: hidden;
	padding: 48px 64px;
	color: #fff;
	background:
		radial-gradient(900px 420px at 80% 110%, rgba(79, 124, 255, 0.35), transparent 60%),
		radial-gradient(700px 380px at 10% 0%, rgba(124, 92, 252, 0.28), transparent 55%),
		linear-gradient(160deg, #081422 0%, #101a33 48%, #1a2748 100%);
}

.login-hero::after {
	content: "";
	position: absolute;
	right: -80px;
	bottom: -40px;
	width: 420px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	filter: blur(2px);
}

.login-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	z-index: 1;
}

.login-brand strong {
	display: block;
	font-size: 28px;
	letter-spacing: -0.04em;
}

.login-brand small {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
}

.login-hero h1 {
	position: relative;
	z-index: 1;
	max-width: 560px;
	margin: 92px 0 18px;
	font-size: 52px;
	line-height: 1.05;
	letter-spacing: -0.045em;
	font-weight: 800;
}

.login-hero h1 span {
	background: linear-gradient(90deg, #8b7cff, #7eb6ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.login-lead {
	position: relative;
	z-index: 1;
	max-width: 460px;
	margin: 0 0 42px;
	color: rgba(255, 255, 255, 0.74);
	font-size: 16px;
	line-height: 1.55;
}

.login-benefits {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}

.login-benefits li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.login-benefits strong,
.login-benefits small {
	display: block;
}

.login-benefits small {
	margin-top: 2px;
	color: rgba(255, 255, 255, 0.62);
}

.benefit-icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.08);
	flex: 0 0 auto;
}

.benefit-icon svg,
.campo svg,
.ver-senha svg,
.login-seguro svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.login-panel-wrap {
	display: grid;
	place-items: center;
	padding: 32px 24px;
	background:
		radial-gradient(500px 240px at 80% 0%, rgba(109, 94, 252, 0.16), transparent 70%),
		#f4f7fc;
}

.login-card {
	width: min(440px, 100%);
	background: var(--card);
	border-radius: 28px;
	padding: 36px 36px 28px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.login-card-brand {
	text-align: center;
	margin-bottom: 26px;
}

.login-card-brand h2 {
	margin: 10px 0 0;
	font-size: 32px;
	letter-spacing: -0.04em;
}

.login-card-brand p {
	margin: 4px 0 0;
	color: var(--muted);
}

.login-form label {
	display: block;
	margin: 14px 0 6px;
	font-size: 13px;
	font-weight: 700;
}

.campo {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 0 12px;
	background: #fff;
	color: #94a3b8;
}

.campo:focus-within {
	border-color: #b7b2ff;
	box-shadow: 0 0 0 4px rgba(109, 94, 252, 0.12);
	color: var(--accent);
}

.campo input {
	width: 100%;
	border: 0;
	outline: 0;
	padding: 13px 0;
	background: transparent;
	color: var(--ink);
}

.ver-senha {
	border: 0;
	background: transparent;
	color: #94a3b8;
	padding: 0;
	cursor: pointer;
}

.login-opcoes {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 16px 0 18px;
}

.lembrar {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
}

.lembrar input {
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
}

.btn-entrar,
.btn-conta {
	width: 100%;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
}

.btn-entrar {
	height: 48px;
	color: #fff;
	font-weight: 700;
	background: linear-gradient(90deg, #6d5efc, #5b7cfa);
	box-shadow: 0 10px 20px rgba(93, 98, 252, 0.28);
}

.btn-entrar:disabled {
	opacity: 0.7;
	cursor: progress;
}

.btn-conta {
	margin-top: 10px;
	height: 46px;
	background: #f8fafc;
	border: 1px solid var(--line);
	color: #334155;
	font-weight: 700;
}

.login-erro {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fef2f2;
	color: #b91c1c;
	font-size: 14px;
}

.fornecedores {
	margin-top: 8px;
}

.fornecedores p {
	color: var(--muted);
	font-size: 14px;
}

.fornecedor-item {
	width: 100%;
	text-align: left;
	margin-bottom: 8px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: #fff;
	cursor: pointer;
	font-weight: 700;
}

.fornecedor-item small {
	display: block;
	font-weight: 500;
	color: var(--muted);
}

.login-seguro {
	margin-top: 22px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px;
	border-radius: 14px;
	background: #f8fafc;
	border: 1px solid #eef2f7;
	color: #475569;
}

.login-seguro strong,
.login-seguro small {
	display: block;
}

.login-seguro small {
	color: var(--muted);
	margin-top: 2px;
}

@media (max-width: 980px) {
	.login-page { grid-template-columns: 1fr; }
	.login-hero { padding: 32px 24px 40px; }
	.login-hero h1 { margin-top: 36px; font-size: 36px; }
}

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