@charset "UTF-8";

/* ============================================================
   生活服务登录 — 居民日常 / 物业 / 停车 · #31AB46
   ============================================================ */

:root{
	--lf-green:#31AB46;
	--lf-green-soft:#5BC46B;
	--lf-green-deep:#27963A;
	--lf-mist:#F3FAF4;
	--lf-ink:#1E3322;
	--lf-muted:#5F7A64;
	--lf-line:rgba(49,171,70,.2);
}

html{scroll-behavior:smooth;}

body.login-life-page{
	margin:0;
	min-height:100vh;
	overflow-x:hidden;
	background:var(--lf-mist);
	color:var(--lf-ink);
	font-family:"Nunito","PingFang SC","Microsoft YaHei",sans-serif;
	-webkit-font-smoothing:antialiased;
	position:relative;
}

/* 顶部 logo 栏：置于背景之上，避免被 lf-bg 遮挡 */
body.login-life-page .mheader{
	position:relative;
	z-index:2;
	width:100%;
	padding:18px 0 8px;
	background:transparent;
}
body.login-life-page .mhead{
	width:100%;
	max-width:1080px;
	margin:0 auto;
	padding:0 24px;
	height:auto;
	overflow:visible;
	display:flex;
	justify-content:space-between;
	align-items:center;
	box-sizing:border-box;
}
body.login-life-page .mhead .logo{
	float:none;
	flex-shrink:0;
}
body.login-life-page .mhead .logo img{
	max-height:48px;
	width:auto;
	display:block;
}
body.login-life-page .mhead .tit{
	float:none;
	width:auto;
	margin-top:0;
	text-align:right;
	overflow:visible;
	font-size:14px;
	color:var(--lf-muted);
	font-weight:600;
}
body.login-life-page .mhead .tit span a{
	color:var(--lf-green)!important;
	font-weight:700;
	text-decoration:none;
}
body.login-life-page .mhead .tit span a[href*="post"],
body.login-life-page .mhead .tit span a[style]{
	color:var(--lf-green-deep)!important;
}

.lf-bg{
	position:fixed;
	inset:0;
	z-index:0;
	pointer-events:none;
	background:
		radial-gradient(ellipse 70% 50% at 12% 10%,rgba(49,171,70,.14),transparent 55%),
		radial-gradient(ellipse 55% 40% at 90% 20%,rgba(91,196,107,.16),transparent 50%),
		linear-gradient(180deg,#F7FCF8 0%,#EAF7EC 50%,#DFF3E2 100%);
	overflow:hidden;
}
.lf-wash{
	position:absolute;
	border-radius:50%;
	filter:blur(70px);
	-webkit-filter:blur(70px);
}
.lf-wash--1{
	width:40vw;height:40vw;
	top:-12%;left:-8%;
	background:rgba(49,171,70,.18);
	animation:lfDrift 18s ease-in-out infinite;
}
.lf-wash--2{
	width:32vw;height:32vw;
	bottom:6%;right:-8%;
	background:rgba(91,196,107,.22);
	animation:lfDrift 22s ease-in-out infinite reverse;
}
.lf-wash--3{
	width:22vw;height:22vw;
	top:42%;left:40%;
	background:rgba(49,171,70,.1);
	animation:lfDrift 14s ease-in-out infinite;
}
@keyframes lfDrift{
	0%,100%{transform:translate(0,0);}
	50%{transform:translate(3vw,2vh);}
}
.lf-wave{
	position:absolute;
	left:0;right:0;bottom:0;
	width:100%;
	height:120px;
}
.lf-wave__a{fill:rgba(49,171,70,.08);}
.lf-wave__b{fill:rgba(49,171,70,.12);}

.lf-main{
	position:relative;
	z-index:1;
	display:grid;
	grid-template-columns:1.05fr .95fr;
	gap:clamp(24px,4vw,48px);
	align-items:center;
	max-width:1080px;
	min-height:calc(100vh - 160px);
	margin:0 auto;
	padding:28px 24px 48px;
	box-sizing:border-box;
}

/* ---------- 左侧品牌 / 场景 ---------- */
.lf-hero{padding:8px 4px;}
.lf-hero__brand{
	margin:0 0 12px;
	font-family:"ZCOOL XiaoWei","PingFang SC",serif;
	font-size:clamp(28px,3.2vw,40px);
	color:var(--lf-green);
	letter-spacing:.04em;
	line-height:1.2;
}
.lf-hero__title{
	margin:0 0 14px;
	font-size:clamp(26px,2.8vw,34px);
	font-weight:800;
	line-height:1.3;
	color:var(--lf-ink);
}
.lf-hero__title em{
	font-style:normal;
	color:var(--lf-green);
}
.lf-hero__desc{
	margin:0 0 26px;
	font-size:14px;
	line-height:1.75;
	color:var(--lf-muted);
	max-width:360px;
	font-weight:500;
}
.lf-hero__tags{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin:24px 0 0;
	padding:0;
	list-style:none;
}
.lf-hero__tags li{
	padding:6px 14px;
	font-size:12px;
	font-weight:700;
	color:var(--lf-green-deep);
	background:rgba(49,171,70,.1);
	border:1px solid rgba(49,171,70,.18);
	border-radius:999px;
}

/* 场景插画：楼宇 + 车 + 钥匙 */
.lf-scene{
	position:relative;
	width:280px;
	height:180px;
	margin:4px 0 0;
}
.lf-building{
	position:absolute;
	left:36px;
	bottom:18px;
	width:88px;
	animation:lfBob 5s ease-in-out infinite;
}
.lf-building__roof{
	display:block;
	width:0;height:0;
	margin:0 auto;
	border-left:48px solid transparent;
	border-right:48px solid transparent;
	border-bottom:22px solid var(--lf-green);
}
.lf-building__body{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
	padding:12px 14px 14px;
	background:linear-gradient(180deg,#fff 0%,#E8F8EB 100%);
	border:1.5px solid rgba(49,171,70,.3);
	border-radius:0 0 12px 12px;
	box-shadow:8px 14px 28px rgba(49,171,70,.16);
}
.lf-building__body i{
	display:block;
	height:14px;
	border-radius:3px;
	background:rgba(49,171,70,.35);
}
.lf-car{
	position:absolute;
	right:48px;
	bottom:28px;
	width:92px;
	height:36px;
	animation:lfDrive 4.5s ease-in-out infinite;
}
.lf-car__body{
	display:block;
	width:88px;
	height:24px;
	margin-top:6px;
	background:linear-gradient(135deg,var(--lf-green-soft),var(--lf-green));
	border-radius:10px 18px 8px 8px;
	box-shadow:4px 8px 16px rgba(49,171,70,.25);
	position:relative;
}
.lf-car__body::before{
	content:"";
	position:absolute;
	left:18px;top:-10px;
	width:42px;height:14px;
	background:rgba(255,255,255,.55);
	border:1.5px solid rgba(49,171,70,.35);
	border-radius:8px 12px 2px 2px;
}
.lf-car__wheel{
	position:absolute;
	bottom:-2px;
	width:14px;height:14px;
	border-radius:50%;
	background:#1E3322;
	border:2px solid #fff;
	box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.lf-car__wheel--l{left:12px;}
.lf-car__wheel--r{right:8px;}
.lf-key{
	position:absolute;
	right:24px;
	top:28px;
	transform:rotate(-28deg);
	animation:lfKey 3.8s ease-in-out infinite;
}
.lf-key__head{
	display:block;
	width:22px;height:22px;
	border:3px solid var(--lf-green);
	border-radius:50%;
	background:rgba(255,255,255,.7);
}
.lf-key__shaft{
	display:block;
	width:36px;height:5px;
	margin:-4px 0 0 18px;
	background:var(--lf-green);
	border-radius:2px;
	position:relative;
}
.lf-key__shaft::after{
	content:"";
	position:absolute;
	right:0;top:5px;
	width:8px;height:8px;
	border-right:3px solid var(--lf-green);
	border-bottom:3px solid var(--lf-green);
}
.lf-scene__dots i{
	position:absolute;
	border-radius:50%;
	background:rgba(49,171,70,.35);
	animation:lfPop 3.2s ease-in-out infinite;
}
.lf-scene__dots i:nth-child(1){width:8px;height:8px;left:140px;top:24px;}
.lf-scene__dots i:nth-child(2){width:12px;height:12px;left:200px;top:60px;animation-delay:.5s;}
.lf-scene__dots i:nth-child(3){width:6px;height:6px;left:120px;top:80px;animation-delay:1s;}
.lf-scene__dots i:nth-child(4){width:10px;height:10px;left:250px;top:40px;animation-delay:1.4s;}
@keyframes lfBob{
	0%,100%{transform:translateY(0);}
	50%{transform:translateY(-6px);}
}
@keyframes lfDrive{
	0%,100%{transform:translateX(0);}
	50%{transform:translateX(8px);}
}
@keyframes lfKey{
	0%,100%{transform:rotate(-28deg) translateY(0);}
	50%{transform:rotate(-18deg) translateY(-4px);}
}
@keyframes lfPop{
	0%,100%{opacity:.35;transform:translateY(0);}
	50%{opacity:1;transform:translateY(-8px);}
}

/* ---------- 右侧表单 ---------- */
.lf-panel{
	padding:36px 34px 28px;
	background:rgba(255,255,255,.8);
	backdrop-filter:blur(16px);
	-webkit-backdrop-filter:blur(16px);
	border:1px solid rgba(255,255,255,.95);
	border-radius:28px;
	box-shadow:0 20px 56px rgba(49,171,70,.12);
}
.lf-panel__head{margin-bottom:24px;}
.lf-panel__label{
	display:block;
	margin-bottom:6px;
	font-size:11px;
	font-weight:800;
	letter-spacing:.16em;
	color:var(--lf-green-soft);
}
.lf-panel__head h2{
	margin:0 0 6px;
	font-size:26px;
	font-weight:800;
	color:var(--lf-ink);
}
.lf-panel__head p{
	margin:0;
	font-size:13px;
	color:var(--lf-muted);
	font-weight:500;
	line-height:1.6;
}

.lf-field{margin-bottom:14px;}
.lf-field label{
	display:block;
	margin-bottom:8px;
	font-size:13px;
	font-weight:700;
	color:var(--lf-muted);
}
.lf-field input[type="text"],
.lf-field input[type="password"]{
	width:100%;
	height:48px;
	padding:0 16px;
	border:1.5px solid var(--lf-line);
	border-radius:14px;
	background:rgba(247,252,248,.95);
	color:var(--lf-ink);
	font-size:14px;
	font-family:inherit;
	box-sizing:border-box;
	outline:none;
	transition:border-color .2s,box-shadow .2s,background .2s;
}
.lf-field input:focus{
	border-color:rgba(49,171,70,.55);
	background:#fff;
	box-shadow:0 0 0 4px rgba(49,171,70,.12);
}
.lf-field input::placeholder{color:rgba(95,122,100,.55);}

.lf-captcha{
	display:flex;
	align-items:center;
	gap:12px;
}
.lf-captcha input{flex:1;min-width:0;}
.lf-captcha .authcode,
.lf-captcha img{
	flex-shrink:0;
	height:46px;
	width:118px;
	border-radius:12px;
	border:1px solid var(--lf-line);
	cursor:pointer;
	object-fit:cover;
	background:#fff;
}

.lf-meta{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin:4px 0 18px;
	font-size:13px;
}
.lf-remember{
	display:inline-flex;
	align-items:center;
	gap:8px;
	cursor:pointer;
	color:var(--lf-muted);
	font-weight:600;
	margin:0;
}
.lf-remember input{
	width:16px;height:16px;
	accent-color:var(--lf-green);
}
.lf-forgot{
	color:var(--lf-green)!important;
	font-weight:700;
	text-decoration:none;
}
.lf-forgot:hover{color:var(--lf-green-deep)!important;}

.lf-submit{
	display:block;
	width:100%;
	height:52px;
	border:0;
	border-radius:14px;
	font-size:15px;
	font-weight:800;
	letter-spacing:.08em;
	color:#fff;
	cursor:pointer;
	font-family:inherit;
	background:linear-gradient(135deg,var(--lf-green-soft),var(--lf-green));
	box-shadow:0 12px 28px rgba(49,171,70,.3);
	transition:transform .22s,box-shadow .22s;
}
.lf-submit:hover{
	transform:translateY(-2px);
	box-shadow:0 16px 36px rgba(49,171,70,.38);
}

.lf-register{
	margin-top:18px;
	text-align:center;
	font-size:13px;
	color:var(--lf-muted);
	font-weight:600;
}
.lf-register a{
	color:var(--lf-green)!important;
	font-weight:800;
	text-decoration:none;
	margin-left:4px;
}
.lf-register a:hover{color:var(--lf-green-deep)!important;}

.lf-third{margin-top:22px;padding-top:18px;border-top:1px solid var(--lf-line);}
.lf-third__title{
	text-align:center;
	font-size:12px;
	font-weight:700;
	color:var(--lf-muted);
	margin-bottom:12px;
}
.lf-third__btns{
	display:flex;
	justify-content:center;
	gap:12px;
}
.lf-qq,
.lf-wx{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:10px 18px;
	border-radius:999px;
	border:1.5px solid var(--lf-line);
	background:#fff;
	color:var(--lf-ink)!important;
	text-decoration:none!important;
	font-size:13px;
	font-weight:700;
	transition:border-color .2s,background .2s;
}
.lf-qq:hover,
.lf-wx:hover{
	border-color:rgba(49,171,70,.45);
	background:rgba(49,171,70,.06);
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
	.lf-panel{background:rgba(255,255,255,.94);}
}

@media (max-width:900px){
	.lf-main{
		grid-template-columns:1fr;
		gap:20px;
		min-height:0;
		padding:20px 16px 40px;
	}
	.lf-hero{text-align:center;}
	.lf-hero__desc{max-width:none;margin-left:auto;margin-right:auto;}
	.lf-scene{margin:0 auto;}
	.lf-hero__tags{justify-content:center;}
	.lf-panel{padding:28px 22px 22px;}
	.lf-wave{height:70px;}
}