:root{
	--linq-blue:#3A6EF5;
	--linq-blue-dark:#2B55C4;
	--linq-bg:#F4F7FD;
	--linq-bg-soft:#EAF1FF;
	--linq-text:#1A2340;
	--linq-muted:#5B6785;
	--linq-border:#E3E9F5;
	--linq-card:#FFFFFF;
	--linq-radius:16px;
	--linq-shadow:0 20px 60px rgba(58,110,245,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--linq-text);
	background:var(--linq-bg);
	-webkit-font-smoothing:antialiased;
	font-size:15px;
	line-height:1.5;
}

a{color:var(--linq-blue);text-decoration:none}
a:hover{color:var(--linq-blue-dark);text-decoration:underline}

.login-shell{
	min-height:100vh;
	display:grid;
	grid-template-columns:1.1fr 1fr;
}

.login-brand{
	position:relative;
	padding:56px 56px 40px;
	background:
		radial-gradient(1200px 600px at -10% -10%,#D7E3FF 0%,transparent 60%),
		radial-gradient(900px 500px at 110% 110%,#EAF1FF 0%,transparent 60%),
		linear-gradient(180deg,#EAF1FF 0%,#FFFFFF 100%);
	display:flex;
	flex-direction:column;
	border-right:1px solid var(--linq-border);
}

.wordmark{
	font-weight:800;
	font-size:28px;
	letter-spacing:-.02em;
	color:var(--linq-text);
}
.wordmark .dot{color:var(--linq-blue)}

.brand-hero h1{
	margin:48px 0 16px;
	font-size:40px;
	line-height:1.15;
	letter-spacing:-.02em;
	font-weight:800;
}
.brand-hero p{
	margin:0 0 32px;
	color:var(--linq-muted);
	font-size:17px;
	max-width:520px;
}

.hero-illustration{
	margin-top:24px;
	max-width:560px;
}
.hero-illustration img{
	width:100%;
	height:auto;
	display:block;
}

.access-info{
	background:var(--linq-bg-soft);
	border:1px solid var(--linq-border);
	border-radius:12px;
	padding:16px 18px;
	margin-bottom:18px;
	font-size:14px;
	color:var(--linq-text);
}
.access-info h4{
	margin:0 0 6px;
	font-size:15px;
	font-weight:700;
}
.access-info p{margin:0;color:var(--linq-muted)}
.access-info strong{color:var(--linq-text)}

.login-panel{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:56px 40px;
	background:var(--linq-bg);
	position:relative;
}
.panel-footer{
	margin-top:24px;
	font-size:13px;
	color:var(--linq-muted);
	display:flex;
	gap:14px;
	align-items:center;
	flex-wrap:wrap;
	justify-content:center;
}
.panel-footer a{font-weight:600}
.panel-footer .copyright{opacity:.85}
.login-card{
	width:100%;
	max-width:440px;
	background:var(--linq-card);
	border-radius:var(--linq-radius);
	box-shadow:var(--linq-shadow);
	padding:40px 40px 32px;
	border:1px solid var(--linq-border);
}
.login-card h2{
	margin:0 0 6px;
	font-size:24px;
	font-weight:700;
	letter-spacing:-.01em;
}
.login-card .sub{
	margin:0 0 28px;
	color:var(--linq-muted);
	font-size:14px;
}

.field{margin-bottom:16px}
.field label{
	display:block;
	font-size:13px;
	font-weight:600;
	margin-bottom:6px;
	color:var(--linq-text);
}
.field input[type=text],
.field input[type=email],
.field input[type=password]{
	width:100%;
	padding:12px 14px;
	border:1px solid var(--linq-border);
	border-radius:10px;
	font-size:15px;
	background:#fff;
	color:var(--linq-text);
	transition:border-color .15s,box-shadow .15s;
	font-family:inherit;
}
.field input:focus{
	outline:none;
	border-color:var(--linq-blue);
	box-shadow:0 0 0 4px rgba(58,110,245,.12);
}

.row-between{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin:8px 0 20px;
	font-size:14px;
}
.checkbox{display:flex;align-items:center;gap:8px;color:var(--linq-muted);cursor:pointer}
.checkbox input{accent-color:var(--linq-blue);width:16px;height:16px}

.btn-primary{
	width:100%;
	padding:13px 16px;
	border:none;
	border-radius:10px;
	background:var(--linq-blue);
	color:#fff;
	font-size:15px;
	font-weight:600;
	cursor:pointer;
	transition:background .15s,transform .05s;
	font-family:inherit;
}
.btn-primary:hover{background:var(--linq-blue-dark)}
.btn-primary:active{transform:translateY(1px)}

.flash-messages{margin:0 0 16px}
.flash-messages .message{
	padding:12px 14px;
	border-radius:10px;
	font-size:14px;
	margin-bottom:8px;
	border:1px solid;
}
.flash-messages .message.error,
.flash-messages .error-message{
	background:#FEF2F2;border-color:#FECACA;color:#991B1B;
}
.flash-messages .message.success,
.flash-messages .success-message{
	background:#ECFDF5;border-color:#A7F3D0;color:#065F46;
}

.footer-note{
	margin-top:22px;
	text-align:center;
	font-size:12px;
	color:var(--linq-muted);
}

.forgot-view,.access-view{display:none}
.forgot-view.active,.access-view.active{display:block}
.login-view.hidden{display:none}

.field-error{
	color:#991B1B;
	font-size:12px;
	margin-top:6px;
}

.pw-strength{
	margin:4px 0 18px;
}
.pw-bar{
	height:6px;
	background:var(--linq-border);
	border-radius:3px;
	overflow:hidden;
	margin-bottom:10px;
}
.pw-bar span{
	display:block;
	height:100%;
	width:0;
	transition:width .2s ease,background .2s ease;
	background:#DC2626;
}
.pw-bar span.weak     {background:#DC2626;}
.pw-bar span.medium   {background:#F59E0B;}
.pw-bar span.strong   {background:#3A6EF5;}
.pw-bar span.excellent{background:#16A34A;}

.pw-rules{
	list-style:none;
	padding:0;
	margin:0;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:4px 14px;
	font-size:12px;
	color:var(--linq-muted);
}
.pw-rules li{
	position:relative;
	padding-left:20px;
	line-height:1.4;
}
.pw-rules li::before{
	content:"";
	position:absolute;
	left:0;
	top:2px;
	width:14px;
	height:14px;
	border-radius:50%;
	border:1.5px solid var(--linq-border);
	background:#fff;
	box-sizing:border-box;
}
.pw-rules li.ok{color:#16A34A;}
.pw-rules li.ok::before{
	background:#16A34A;
	border-color:#16A34A;
	background-image:
		linear-gradient(45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%),
		linear-gradient(-45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%);
}
.pw-rules li.bad::before{
	border-color:#E5E7EB;
}

button.btn-primary:disabled{
	opacity:.5;
	cursor:not-allowed;
}

@media(max-width:480px){
	.pw-rules{grid-template-columns:1fr;}
}

.form-links{
	display:flex;
	justify-content:space-between;
	gap:12px;
	margin-top:16px;
	font-size:13px;
}

@media(max-width:960px){
	.login-shell{grid-template-columns:1fr}
	.login-brand{padding:32px 24px 20px;border-right:none;border-bottom:1px solid var(--linq-border)}
	.brand-hero h1{font-size:26px;margin:16px 0 12px}
	.brand-hero p{font-size:15px;margin-bottom:0}
	.hero-illustration{margin-top:16px}
	.login-panel{padding:20px 20px 28px}
	.login-card{padding:28px 22px 22px}
}