/* ==========================================================================
   login.css — Mall user login page
   Loaded by frontend/views/default/mall/login.html
   Scoped under .lg-wrap. Style: clean, airy, floating glass card on a brand-tinted
   photo background. Single accent #28A271.
   ========================================================================== */

:root {
	/* Surfaces */
	--lg-bg:            #f4f6f5;
	--lg-surface:       #ffffff;
	--lg-line:          #ececef;
	--lg-line-strong:   #d9d9de;

	/* Text */
	--lg-text-1:        #1a1a1a;
	--lg-text-2:        #555560;
	--lg-text-3:        #8a8a93;

	/* Brand */
	--lg-accent:        #28A271;
	--lg-accent-hover:  #239263;
	--lg-accent-soft:   #ecf8ed;
	--lg-accent-deep:   #1e7a55;

	/* Type scale */
	--lg-fs-xs:         12px;
	--lg-fs-sm:         13px;
	--lg-fs-base:       14px;
	--lg-fs-md:         15px;
	--lg-fs-lg:         16px;
	--lg-fs-xl:         20px;
	--lg-fs-2xl:        28px;

	/* Rhythm */
	--lg-r-1:           4px;
	--lg-r-2:           8px;
	--lg-r-3:           12px;
	--lg-r-4:           16px;
	--lg-r-5:           20px;
	--lg-r-6:           24px;
	--lg-r-7:           32px;
	--lg-r-8:           48px;

	/* Radius */
	--lg-radius-sm:     4px;
	--lg-radius:        8px;
	--lg-radius-lg:     16px;
	--lg-radius-xl:     20px;

	--lg-ease:          cubic-bezier(0.2, 0, 0, 1);

	/* Background image (right-side photo used as full-bleed backdrop) */
	/*--lg-bg-image:      url('/aiimg/login.png');*/
}

/* --------------------------------------------------------------------------
   1. Local reset
   -------------------------------------------------------------------------- */
.lg-wrap,
.lg-wrap *,
.lg-wrap *::before,
.lg-wrap *::after { box-sizing: border-box !important; }

.lg-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
	font-size: var(--lg-fs-base) !important;
	line-height: 1.55 !important;
	color: var(--lg-text-1) !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
	display: flex !important;
	flex-direction: column !important;
	/* 用右侧图片作为整页背景：浅色叠加保证可读性 */
	background:
			linear-gradient(110deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 38%, rgba(255, 255, 255, 0.35) 60%, rgba(40, 162, 113, 0.25) 100%),
			var(--lg-bg-image) center right / cover no-repeat,
			linear-gradient(135deg, var(--lg-accent-soft) 0%, #e7f1ec 100%) !important;
	background-attachment: fixed !important;
	position: relative !important;
	overflow: hidden !important;
}

#widgets-xxp .block img{
	position: absolute;
	z-index: -1;
	width: 100%;
	filter: blur(3em);
	min-height: 100vh !important;
	min-height: 100dvh !important;
	overflow: hidden !important;
}

.lg-wrap a { color: inherit; text-decoration: none !important; transition: color .15s var(--lg-ease) !important; }
.lg-wrap a:hover { color: var(--lg-accent) !important; }
.lg-wrap img { display: block; max-width: 100%; }
.lg-wrap input,
.lg-wrap button { font: inherit; color: inherit; }
.lg-wrap button { cursor: pointer; }
.lg-wrap ul,
.lg-wrap ol { list-style: none; margin: 0; padding: 0; }

/* Decorative blurred orbs to add depth without stealing focus */
.lg-wrap::before,
.lg-wrap::after {
	content: "" !important;
	position: absolute !important;
	border-radius: 50% !important;
	filter: blur(80px) !important;
	opacity: .35 !important;
	pointer-events: none !important;
	z-index: 2 !important;
}
.lg-wrap::before {
	width: 380px; height: 380px;
	background: var(--lg-accent) !important;
	top: -120px; left: -120px;
}
.lg-wrap::after {
	width: 460px; height: 460px;
	background: #6fd0a8 !important;
	bottom: -180px; right: -160px;
	opacity: .25 !important;
}

/* ==========================================================================
   2. Header (logo + welcome text)
   ========================================================================== */
.lg-wrap .lg-header {
	position: relative !important;
	z-index: 2 !important;
	max-width: 1240px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 24px 32px !important;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	background: transparent !important;
	border: 0 !important;
}
.lg-wrap .lg-header .lg-logo {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	text-decoration: none !important;
}
.lg-wrap .lg-header .lg-logo img {
	height: 44px !important;
	width: auto !important;
}
.lg-wrap .lg-header .lg-welcome {
	color: var(--lg-text-2) !important;
	font-size: var(--lg-fs-md) !important;
	padding-left: 14px !important;
	margin-left: 4px !important;
	border-left: 1px solid var(--lg-line-strong) !important;
	letter-spacing: 1px !important;
}

/* ==========================================================================
   3. Main layout (flex: stage on left, floating card on right)
   ========================================================================== */
.lg-wrap .lg-stage {
	position: relative !important;
	z-index: 2 !important;
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 40px !important;
	max-width: 1240px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 16px 32px 56px !important;
}

/* Left side copy / decorative text */
.lg-wrap .lg-hero {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	max-width: 560px !important;
	color: var(--lg-text-1) !important;
	padding-right: 24px !important;
}
.lg-wrap .lg-hero .lg-hero-eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 14px !important;
	background: var(--lg-accent-soft) !important;
	color: var(--lg-accent-deep) !important;
	font-size: var(--lg-fs-sm) !important;
	font-weight: 500 !important;
	border-radius: 999px !important;
	margin-bottom: 18px !important;
}
.lg-wrap .lg-hero .lg-hero-eyebrow::before {
	content: "" !important;
	width: 6px !important; height: 6px !important;
	border-radius: 50% !important;
	background: var(--lg-accent) !important;
}
.lg-wrap .lg-hero h1 {
	margin: 0 0 14px 0 !important;
	font-size: 36px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.5px !important;
	color: var(--lg-text-1) !important;
}
.lg-wrap .lg-hero h1 em {
	font-style: normal !important;
	color: var(--lg-accent) !important;
}
.lg-wrap .lg-hero p {
	margin: 0 0 22px 0 !important;
	font-size: var(--lg-fs-lg) !important;
	line-height: 1.7 !important;
	/*color: var(--lg-text-2) !important;*/
	max-width: 460px !important;
}
.lg-wrap .lg-hero .lg-hero-points {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px 18px !important;
}
.lg-wrap .lg-hero .lg-hero-points span {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: var(--lg-fs-sm) !important;
	/*color: var(--lg-text-2) !important;*/
}
.lg-wrap .lg-hero .lg-hero-points span::before {
	content: "✓" !important;
	color: var(--lg-accent) !important;
	font-weight: 700 !important;
}

/* ==========================================================================
   4. Floating login card
   ========================================================================== */
.lg-wrap .lg-card-wrap {
	flex: 0 0 400px !important;
	max-width: 400px !important;
	width: 100% !important;
	display: flex !important;
	justify-content: flex-end !important;
}
.lg-wrap .lg-card {
	position: relative !important;
	width: 100% !important;
	background: rgba(255, 255, 255, 0.88) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
	backdrop-filter: saturate(180%) blur(20px) !important;
	border: 1px solid rgba(255, 255, 255, 0.6) !important;
	border-radius: var(--lg-radius-xl) !important;
	padding: 36px 36px 28px !important;
	box-shadow:
			0 1px 2px rgba(16, 24, 40, 0.04),
			0 8px 24px rgba(16, 24, 40, 0.06),
			0 24px 56px rgba(40, 162, 113, 0.10) !important;
	transition: box-shadow .25s var(--lg-ease), transform .25s var(--lg-ease) !important;
}
.lg-wrap .lg-card:hover {
	box-shadow:
			0 1px 2px rgba(16, 24, 40, 0.04),
			0 12px 32px rgba(16, 24, 40, 0.08),
			0 32px 72px rgba(40, 162, 113, 0.14) !important;
	transform: translateY(-2px) !important;
}
.lg-wrap .lg-card::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: var(--lg-radius-xl) !important;
	padding: 1px !important;
	background: linear-gradient(135deg, rgba(40, 162, 113, 0.4) 0%, rgba(255, 255, 255, 0) 50%, rgba(40, 162, 113, 0.15) 100%) !important;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
	-webkit-mask-composite: xor !important;
	mask-composite: exclude !important;
	pointer-events: none !important;
}

/* Card title row */
.lg-wrap .lg-card-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin: 0 0 24px 0 !important;
}
.lg-wrap .lg-card-head h2 {
	margin: 0 !important;
	font-size: var(--lg-fs-xl) !important;
	font-weight: 600 !important;
	color: var(--lg-text-1) !important;
	letter-spacing: 0.2px !important;
}
.lg-wrap .lg-card-head h2 small {
	display: block !important;
	margin-top: 4px !important;
	font-size: var(--lg-fs-sm) !important;
	font-weight: 400 !important;
	color: var(--lg-text-3) !important;
	letter-spacing: 0 !important;
}
.lg-wrap .lg-card-head .lg-register {
	font-size: var(--lg-fs-sm) !important;
	color: var(--lg-text-2) !important;
}
.lg-wrap .lg-card-head .lg-register a {
	color: var(--lg-accent) !important;
	font-weight: 500 !important;
}
.lg-wrap .lg-card-head .lg-register a:hover {
	color: var(--lg-accent-hover) !important;
}

/* ==========================================================================
   5. Form
   ========================================================================== */
.lg-wrap form { margin: 0 !important; padding: 0 !important; }

.lg-wrap .lg-field {
	position: relative !important;
	margin: 0 0 20px 0 !important;
}

/* Input wrapper: keeps the icon anchored to the input even when
   the field grows (e.g. jQuery validate appends an <label.error>) */
.lg-wrap .lg-input-wrap {
	position: relative !important;
	display: block !important;
}
.lg-wrap .lg-field input {
	width: 100% !important;
	height: 48px !important;
	padding: 14px 14px 14px 44px !important;
	background: rgba(255, 255, 255, 0.7) !important;
	border: 1px solid var(--lg-line) !important;
	border-radius: var(--lg-radius) !important;
	font-size: var(--lg-fs-md) !important;
	color: var(--lg-text-1) !important;
	outline: none !important;
	box-shadow: 0 0 0 0 rgba(40, 162, 113, 0) !important;
	transition: border-color .15s var(--lg-ease), background .15s var(--lg-ease), box-shadow .15s var(--lg-ease) !important;
}
.lg-wrap .lg-field input::placeholder { color: var(--lg-text-3) !important; }
.lg-wrap .lg-field input:hover {
	border-color: var(--lg-line-strong) !important;
}
.lg-wrap .lg-field input:focus,
.lg-wrap .lg-field input:focus-visible {
	border-color: var(--lg-accent) !important;
	background: #fff !important;
	box-shadow: 0 0 0 4px rgba(40, 162, 113, 0.12) !important;
}
.lg-wrap .lg-input-wrap .lg-icon {
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 18px !important;
	height: 18px !important;
	color: var(--lg-text-3) !important;
	pointer-events: none !important;
	transition: color .15s var(--lg-ease) !important;
}
.lg-wrap .lg-input-wrap input:focus ~ .lg-icon,
.lg-wrap .lg-input-wrap .lg-icon.is-focus {
	color: var(--lg-accent) !important;
}

/* Field icons (SVG mask) */
.lg-wrap .lg-icon-user {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center / contain !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center / contain !important;
	background: currentColor !important;
}
.lg-wrap .lg-icon-lock {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain !important;
	background: currentColor !important;
}
.lg-wrap .lg-icon-shield {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") no-repeat center / contain !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") no-repeat center / contain !important;
	background: currentColor !important;
}

/* Captcha row (image overlay) */
.lg-wrap .lg-field-captcha { display: flex !important; gap: 10px !important; }
.lg-wrap .lg-field-captcha .lg-input-wrap { flex: 1 1 auto !important; }
.lg-wrap .lg-field-captcha .lg-captcha-img {
	flex: 0 0 auto !important;
	width: 110px !important;
	height: 48px !important;
	border-radius: var(--lg-radius) !important;
	border: 1px solid var(--lg-line) !important;
	overflow: hidden !important;
	cursor: pointer !important;
	background: #f0f0f0 !important;
	display: inline-block !important;
	text-decoration: none !important;
	transition: border-color .15s var(--lg-ease) !important;
}
.lg-wrap .lg-field-captcha .lg-captcha-img:hover { border-color: var(--lg-accent) !important; }
.lg-wrap .lg-field-captcha .lg-captcha-img img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* Extras row (remember + forgot) */
.lg-wrap .lg-extras {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin: 6px 0 18px 0 !important;
	font-size: var(--lg-fs-sm) !important;
	color: var(--lg-text-2) !important;
}
.lg-wrap .lg-extras .lg-remember {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	user-select: none !important;
}
.lg-wrap .lg-extras .lg-remember input { display: none !important; }
.lg-wrap .lg-extras .lg-remember .lg-switch {
	position: relative !important;
	width: 34px !important;
	height: 20px !important;
	border-radius: 999px !important;
	background: #d9d9de !important;
	transition: background .2s var(--lg-ease) !important;
	flex: 0 0 auto !important;
}
.lg-wrap .lg-extras .lg-remember .lg-switch::after {
	content: "" !important;
	position: absolute !important;
	left: 2px !important;
	top: 2px !important;
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
	transition: transform .2s var(--lg-ease) !important;
}
.lg-wrap .lg-extras .lg-remember input:checked + .lg-switch {
	background: var(--lg-accent) !important;
}
.lg-wrap .lg-extras .lg-remember input:checked + .lg-switch::after {
	transform: translateX(14px) !important;
}
.lg-wrap .lg-extras .lg-forgot {
	color: var(--lg-text-2) !important;
}
.lg-wrap .lg-extras .lg-forgot:hover {
	color: var(--lg-accent) !important;
}

/* Submit button */
.lg-wrap .lg-submit {
	width: 100% !important;
	height: 48px !important;
	border: 0 !important;
	border-radius: var(--lg-radius) !important;
	background: var(--lg-accent) !important;
	color: #fff !important;
	font-size: var(--lg-fs-lg) !important;
	font-weight: 500 !important;
	letter-spacing: 1px !important;
	box-shadow: 0 6px 16px rgba(40, 162, 113, 0.28) !important;
	cursor: pointer !important;
	transition: background .15s var(--lg-ease), transform .1s var(--lg-ease), box-shadow .15s var(--lg-ease) !important;
}
.lg-wrap .lg-submit:hover {
	background: var(--lg-accent-hover) !important;
	box-shadow: 0 8px 20px rgba(40, 162, 113, 0.35) !important;
}
.lg-wrap .lg-submit:active { transform: translateY(1px) !important; }
.lg-wrap .lg-submit:disabled {
	background: #9fd9c0 !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
}

/* ==========================================================================
   6. Partner login
   ========================================================================== */
.lg-wrap .lg-partner {
	margin-top: 22px !important;
	padding-top: 18px !important;
	border-top: 1px dashed var(--lg-line) !important;
}
.lg-wrap .lg-partner-title {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	font-size: var(--lg-fs-sm) !important;
	color: var(--lg-text-3) !important;
	margin: 0 0 12px 0 !important;
}
.lg-wrap .lg-partner-list {
	display: flex !important;
	gap: 10px !important;
}
.lg-wrap .lg-partner-list a {
	width: 36px !important;
	height: 36px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	background: #f3f4f5 !important;
	color: var(--lg-text-2) !important;
	transition: background .15s var(--lg-ease), color .15s var(--lg-ease), transform .15s var(--lg-ease) !important;
}
.lg-wrap .lg-partner-list a:hover {
	background: var(--lg-accent-soft) !important;
	color: var(--lg-accent) !important;
	transform: translateY(-1px) !important;
}
.lg-wrap .lg-partner-list svg { width: 18px !important; height: 18px !important; }

/* ==========================================================================
   7. Validation error styling (jQuery validate) — overrides legacy red
   ========================================================================== */
/* The error <label> is appended to .lg-field; make it an inline alert bar
   that does not overlap the icon and respects the field's vertical rhythm. */
.lg-wrap .lg-field .error,
.lg-wrap .lg-field label.error {
	position: static !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 6px 0 0 0 !important;
	/*padding: 6px 10px !important;*/
	background: #fef2f2 !important;
	border: 0 !important;
	/*border-left: 3px solid #e5484d !important;*/
	/*border-radius: 6px !important;*/
	color: #b42318 !important;
	font-size: var(--lg-fs-sm) !important;
	line-height: 1.4 !important;
	/*width: auto !important;*/
	/*height: auto !important;*/
	left: auto !important; top: auto !important;
	float: none !important;
	box-sizing: border-box !important;
	min-height: 0 !important;
	max-width: 100% !important;
	word-break: break-word !important;
}
/* Small "!" icon prefix (rendered as a CSS shape so we don't pull a font) */
.lg-wrap .lg-field label.error::before {
	content: "!" !important;
	flex: 0 0 16px !important;
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background: #e5484d !important;
	color: #fff !important;
	font: 700 11px/16px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
	text-align: center !important;
	display: inline-block !important;
}
.lg-wrap .lg-field input.error {
	border-color: #e5484d !important;
	background: #fff !important;
	box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.10) !important;
}
.lg-wrap .lg-input-wrap input.error ~ .lg-icon {
	color: #e5484d !important;
}
.lg-wrap .lg-field input.valid ~ .lg-icon,
.lg-wrap .lg-input-wrap .lg-icon.is-ok {
	color: var(--lg-accent) !important;
}

/* ==========================================================================
   8. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.lg-wrap .lg-stage { gap: 24px !important; padding: 16px 24px 48px !important; }
	.lg-wrap .lg-hero h1 { font-size: 30px !important; }
	.lg-wrap .lg-card-wrap { flex: 0 0 360px !important; max-width: 360px !important; }
}

@media (max-width: 768px) {
	.lg-wrap {
		background:
				linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.92) 100%),
				var(--lg-bg-image) center top / cover no-repeat !important;
	}
	.lg-wrap .lg-header { padding: 16px 20px !important; }
	.lg-wrap .lg-header .lg-welcome { display: none !important; }
	.lg-wrap .lg-stage {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 20px !important;
		padding: 0 16px 32px !important;
	}
	.lg-wrap .lg-hero {
		text-align: center !important;
		max-width: none !important;
		padding: 0 4px !important;
	}
	.lg-wrap .lg-hero h1 { font-size: 24px !important; }
	.lg-wrap .lg-hero p { font-size: var(--lg-fs-base) !important; margin-bottom: 0 !important; }
	.lg-wrap .lg-hero .lg-hero-points { justify-content: center !important; }
	.lg-wrap .lg-card-wrap {
		flex: 0 0 auto !important;
		max-width: none !important;
	}
	.lg-wrap .lg-card { padding: 24px 20px 20px !important; border-radius: var(--lg-radius-lg) !important; }
	.lg-wrap .lg-card-head { margin-bottom: 18px !important; }
	.lg-wrap .lg-card-head h2 { font-size: var(--lg-fs-lg) !important; }
	.lg-wrap .lg-card-head h2 small { display: none !important; }
	.lg-wrap .lg-field input { height: 44px !important; font-size: var(--lg-fs-base) !important; }
	.lg-wrap .lg-submit { height: 44px !important; }
}

@media (max-width: 380px) {
	.lg-wrap .lg-card { padding: 20px 16px 16px !important; }
	.lg-wrap .lg-field-captcha .lg-captcha-img { width: 92px !important; height: 44px !important; }
}

/* ==========================================================================
   9. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.lg-wrap .lg-card,
	.lg-wrap .lg-card:hover,
	.lg-wrap .lg-field input,
	.lg-wrap .lg-submit,
	.lg-wrap .lg-extras .lg-remember .lg-switch,
	.lg-wrap .lg-extras .lg-remember .lg-switch::after,
	.lg-wrap .lg-partner-list a {
		transition: none !important;
		transform: none !important;
	}
	.lg-wrap .lg-card:hover { transform: none !important; }
}

/* ==========================================================================
   10. Footer override — keep simple (no extra colors)
   ========================================================================== */
.lg-wrap + #footer,
.lg-wrap #footer {
	background: transparent !important;
	color: var(--lg-text-3) !important;
}
.lg-wrap + #footer a,
.lg-wrap #footer a { color: var(--lg-text-3) !important; }
.lg-wrap + #footer a:hover,
.lg-wrap #footer a:hover { color: var(--lg-accent) !important; }

/* ==========================================================================
   11. Register-page extensions
   Reuses the .lg-* tokens above. Loaded together with login.css.
   ========================================================================== */

/* Extra field icons (mail, phone) — reuses .lg-icon-* mask pattern */
.lg-wrap .lg-icon-mail {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E") no-repeat center / contain !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E") no-repeat center / contain !important;
	background: currentColor !important;
}
.lg-wrap .lg-icon-phone {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain !important;
	background: currentColor !important;
}

/* Register hero copy tweaks */
.lg-wrap.lg-register-page .lg-hero h1 { font-size: 32px !important; }
.lg-wrap.lg-register-page .lg-hero p { font-size: var(--lg-fs-base) !important; margin-bottom: 18px !important; }

/* Wider card on the register page (more fields) */
@media (min-width: 1025px) {
	.lg-wrap.lg-register-page .lg-card-wrap {
		flex: 0 0 460px !important;
		max-width: 460px !important;
	}
}

/* Two-column field row (e.g. captcha, sms) — already covers captcha; reuse for sms */
.lg-wrap .lg-field-sms { display: flex !important; gap: 10px !important; align-items: stretch !important; }
.lg-wrap .lg-field-sms .lg-input-wrap { flex: 1 1 auto !important; }
.lg-wrap .lg-field-sms .lg-sms-btn {
	flex: 0 0 auto !important;
	height: 48px !important;
	padding: 0 16px !important;
	background: var(--lg-accent-soft) !important;
	border: 1px solid var(--lg-accent-soft) !important;
	border-radius: var(--lg-radius) !important;
	color: var(--lg-accent-deep) !important;
	font-size: var(--lg-fs-sm) !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	transition: background .15s var(--lg-ease), color .15s var(--lg-ease), border-color .15s var(--lg-ease) !important;
}
.lg-wrap .lg-field-sms .lg-sms-btn:hover {
	background: var(--lg-accent) !important;
	color: #fff !important;
	border-color: var(--lg-accent) !important;
}
.lg-wrap .lg-field-sms .lg-sms-btn:disabled,
.lg-wrap .lg-field-sms .lg-sms-btn[disabled] {
	background: #f3f4f5 !important;
	color: var(--lg-text-3) !important;
	border-color: var(--lg-line) !important;
	cursor: not-allowed !important;
}

/* Agreement checkbox row */
.lg-wrap .lg-agree {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	margin: 15px 0 15px 0 !important;
	font-size: var(--lg-fs-sm) !important;
	color: var(--lg-text-2) !important;
	line-height: 1.5 !important;
	cursor: pointer !important;
	user-select: none !important;
}
.lg-wrap .lg-agree input[type="checkbox"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
}
.lg-wrap .lg-agree .lg-agree-box {
	flex: 0 0 16px !important;
	width: 16px !important;
	height: 16px !important;
	margin-top: 2px !important;
	border: 1.5px solid var(--lg-line-strong) !important;
	border-radius: 4px !important;
	background: #fff !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background .15s var(--lg-ease), border-color .15s var(--lg-ease) !important;
}
.lg-wrap .lg-agree .lg-agree-box::after {
	content: "" !important;
	width: 9px !important;
	height: 5px !important;
	border-left: 2px solid #fff !important;
	border-bottom: 2px solid #fff !important;
	transform: rotate(-45deg) translate(1px, -1px) !important;
	opacity: 0 !important;
	transition: opacity .12s var(--lg-ease) !important;
}
.lg-wrap .lg-agree input:checked + .lg-agree-box {
	background: var(--lg-accent) !important;
	border-color: var(--lg-accent) !important;
}
.lg-wrap .lg-agree input:checked + .lg-agree-box::after { opacity: 1 !important; }
.lg-wrap .lg-agree a {
	color: var(--lg-accent) !important;
}
.lg-wrap .lg-agree a:hover {
	color: var(--lg-accent-hover) !important;
}

/* Agreement error state */
.lg-wrap .lg-agree.has-error .lg-agree-box {
	border-color: #e5484d !important;
	background: #fef2f2 !important;
}

/* Two-field row helper (e.g. side-by-side if needed in future) */
.lg-wrap .lg-field-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 10px !important;
}

/* ==========================================================================
   12. Register page — reduced motion (extend login set)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.lg-wrap .lg-field-sms .lg-sms-btn,
	.lg-wrap .lg-agree .lg-agree-box,
	.lg-wrap .lg-agree .lg-agree-box::after {
		transition: none !important;
	}
}

/*自定义背景颜******片*/
.xxp-login-bg{
	width: 100%;opacity:0.6;min-height: 100vh !important;min-height: 100dvh !important;position: absolute;top: 0;z-index: 1;background: #ffffff;
}

.xxp-login-bg-img{
	position: absolute;z-index: -1;width: 100%;min-height: 100vh !important;min-height: 100dvh !important;filter: blur(3em);min-height: 100vh !important;min-height: 100dvh !important;overflow: hidden !important;background: url(/static/images/index2_bg.jpg);background-size: cover;
}




/* ==========================================================================
   seller.login.css — Mall seller-center login page
   Loaded by frontend/views/default/mall/seller.login.html AFTER login.css
   Inherits all .lg-* tokens and base components from login.css.
   Mirrors the register page so buyer and seller flows share the same
   visual language; the only difference is the hero copy and a small
   "商家" eyebrow badge that signals the seller-center context.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Background — same layered organic-shape gradient as register.css
   -------------------------------------------------------------------------- */
.lg-wrap.lg-seller-page {
	background:
			linear-gradient(110deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.82) 38%, rgba(255, 255, 255, 0.10) 60%, rgba(40, 162, 113, 0.08) 100%),
			radial-gradient(circle at 12% 28%, rgba(40, 162, 113, 0.55) 0%, rgba(40, 162, 113, 0) 38%),
			radial-gradient(circle at 22% 78%, rgba(111, 208, 168, 0.45) 0%, rgba(111, 208, 168, 0) 32%),
			radial-gradient(circle at 78% 18%, rgba(40, 162, 113, 0.35) 0%, rgba(40, 162, 113, 0) 28%),
			radial-gradient(circle at 92% 65%, rgba(111, 208, 168, 0.30) 0%, rgba(111, 208, 168, 0) 24%),
			radial-gradient(circle at 50% 50%, rgba(40, 162, 113, 0.18) 0%, rgba(40, 162, 113, 0) 55%),
			linear-gradient(135deg, #d6f0e2 0%, #aee0c4 55%, #7fcfa6 100%) !important;
}

.lg-wrap.lg-seller-page::before {
	width: 480px !important; height: 480px;
	top: -160px !important; left: -180px;
	background: var(--lg-accent) !important;
	opacity: .30 !important;
}
.lg-wrap.lg-seller-page::after {
	width: 540px !important; height: 540px;
	bottom: -200px !important; right: -200px;
	background: #6fd0a8 !important;
	opacity: .25 !important;
}

/* --------------------------------------------------------------------------
   2. Header — add a small "商家中心" pill next to the logo so this page is
   immediately recognizable as the seller-center entry point.
   -------------------------------------------------------------------------- */
.lg-wrap.lg-seller-page .lg-welcome {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: var(--lg-text-1) !important;
	font-weight: 500 !important;
}
.lg-wrap.lg-seller-page .lg-welcome::before {
	content: "商家中心" !important;
	display: inline-flex !important;
	align-items: center !important;
	height: 22px !important;
	padding: 0 10px !important;
	background: linear-gradient(135deg, #ff8a3d 0%, #ff6a13 100%) !important;
	color: #ffffff !important;
	font-size: var(--lg-fs-xs) !important;
	font-weight: 600 !important;
	letter-spacing: 1px !important;
	border-radius: 999px !important;
	box-shadow: 0 2px 6px rgba(255, 106, 19, 0.25) !important;
}

/* --------------------------------------------------------------------------
   3. Hero — large white display headline, gradient-highlight <em>, two pill
   CTAs that target the seller-center audience.
   -------------------------------------------------------------------------- */
.lg-wrap.lg-seller-page .lg-hero {
	max-width: 600px !important;
}
.lg-wrap.lg-seller-page .lg-hero h1 {
	font-size: 40px !important;
	font-weight: 700 !important;
	letter-spacing: -0.5px !important;
	line-height: 1.18 !important;
	margin-bottom: 18px !important;
	text-shadow: 0 2px 18px rgba(20, 60, 45, 0.18) !important;
}
.lg-wrap.lg-seller-page .lg-hero h1 em {
	font-style: normal !important;
	background: linear-gradient(120deg, #ffffff 0%, #d6f5e6 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	/*-webkit-text-fill-color: transparent !important;*/
}
.lg-wrap.lg-seller-page .lg-hero p {
	font-size: var(--lg-fs-lg) !important;
	max-width: 480px !important;
	margin-bottom: 28px !important;
	text-shadow: 0 1px 6px rgba(20, 60, 45, 0.10) !important;
}
.lg-wrap.lg-seller-page .lg-hero .lg-hero-eyebrow {
	background: rgba(255, 255, 255, 0.85) !important;
	color: var(--lg-accent-deep) !important;
	box-shadow: 0 2px 8px rgba(20, 60, 45, 0.08) !important;
}
.lg-wrap.lg-seller-page .lg-hero .lg-hero-eyebrow::before {
	background: var(--lg-accent) !important;
}

/* Hide the small ✓ feature chips (replaced by pills) */
.lg-wrap.lg-seller-page .lg-hero-points {
	display: none !important;
}

/* Pill-shaped CTAs (visual twin of register.css for consistency) */
.lg-wrap.lg-seller-page .lg-hero-pills {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 14px !important;
}
.lg-wrap.lg-seller-page .lg-hero-pills a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	height: 44px !important;
	padding: 0 22px !important;
	background: #28a271 !important;
	-webkit-backdrop-filter: blur(6px) !important;
	backdrop-filter: blur(6px) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
	border-radius: 999px !important;
	color: #ffffff !important;
	font-size: var(--lg-fs-md) !important;
	font-weight: 500 !important;
	letter-spacing: 0.5px !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background .2s var(--lg-ease), color .2s var(--lg-ease), transform .15s var(--lg-ease) !important;
}
.lg-wrap.lg-seller-page .lg-hero-pills a::before {
	content: "" !important;
	width: 8px !important; height: 8px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25) !important;
}
.lg-wrap.lg-seller-page .lg-hero-pills a:hover {
	background: #ffffff !important;
	color: var(--lg-accent-deep) !important;
	transform: translateY(-1px) !important;
}
.lg-wrap.lg-seller-page .lg-hero-pills a:hover::before {
	background: var(--lg-accent) !important;
	box-shadow: 0 0 0 4px rgba(40, 162, 113, 0.20) !important;
}

/* --------------------------------------------------------------------------
   4. Card — accent strip and copy adjustments
   -------------------------------------------------------------------------- */
.lg-wrap.lg-seller-page .lg-card {
	padding: 32px 32px 26px !important;
}
.lg-wrap.lg-seller-page .lg-card::after {
	content: "" !important;
	position: absolute !important;
	left: 20px !important; right: 20px !important;
	top: 0 !important;
	height: 3px !important;
	border-radius: 0 0 3px 3px !important;
	background: linear-gradient(90deg, var(--lg-accent) 0%, #6fd0a8 100%) !important;
}
.lg-wrap.lg-seller-page .lg-card-head h2 {
	font-size: 22px !important;
}
.lg-wrap.lg-seller-page .lg-card-head h2 small {
	color: var(--lg-text-2) !important;
}

/* --------------------------------------------------------------------------
   5. Form spacing
   -------------------------------------------------------------------------- */
.lg-wrap.lg-seller-page .lg-field {
	margin-bottom: 16px !important;
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.lg-wrap.lg-seller-page .lg-hero h1 { font-size: 32px !important; }
	.lg-wrap.lg-seller-page .lg-card-wrap { flex: 0 0 360px !important; max-width: 360px !important; }
}

@media (max-width: 768px) {
	.lg-wrap.lg-seller-page {
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.94) 100%),
			radial-gradient(circle at 20% 0%, rgba(40, 162, 113, 0.30) 0%, rgba(40, 162, 113, 0) 45%),
			linear-gradient(135deg, #d6f0e2 0%, #aee0c4 100%) !important;
	}
	.lg-wrap.lg-seller-page .lg-welcome::before { display: none !important; }
	.lg-wrap.lg-seller-page .lg-hero {
		text-align: center !important;
		padding: 0 8px !important;
	}
	.lg-wrap.lg-seller-page .lg-hero h1 {
		font-size: 24px !important;
		text-shadow: none !important;
		color: var(--lg-text-1) !important;
	}
	.lg-wrap.lg-seller-page .lg-hero h1 em {
		color: var(--lg-accent) !important;
		background: none !important;
		-webkit-text-fill-color: var(--lg-accent) !important;
	}
	.lg-wrap.lg-seller-page .lg-hero p {
		color: var(--lg-text-2) !important;
		text-shadow: none !important;
		font-size: var(--lg-fs-base) !important;
		margin-bottom: 16px !important;
	}
	.lg-wrap.lg-seller-page .lg-hero-pills { justify-content: center !important; }
	.lg-wrap.lg-seller-page .lg-hero-pills a {
		height: 38px !important;
		padding: 0 18px !important;
		font-size: var(--lg-fs-sm) !important;
		background: var(--lg-accent-soft) !important;
		border-color: var(--lg-accent-soft) !important;
		color: var(--lg-accent-deep) !important;
	}
	.lg-wrap.lg-seller-page .lg-hero-pills a::before { background: var(--lg-accent) !important; box-shadow: 0 0 0 4px rgba(40, 162, 113, 0.15) !important; }
	.lg-wrap.lg-seller-page .lg-hero-pills a:hover { background: var(--lg-accent) !important; color: #fff !important; }
	.lg-wrap.lg-seller-page .lg-hero-eyebrow { display: none !important; }
	.lg-wrap.lg-seller-page .lg-card { padding: 22px 18px 18px !important; }
	.lg-wrap.lg-seller-page .lg-card-head h2 { font-size: var(--lg-fs-lg) !important; }
	.lg-wrap.lg-seller-page .lg-field input { height: 44px !important; }
	.lg-wrap.lg-seller-page .lg-submit { height: 44px !important; }
}

@media (max-width: 380px) {
	.lg-wrap.lg-seller-page .lg-card { padding: 18px 14px 14px !important; }
	.lg-wrap.lg-seller-page .lg-field-captcha .lg-captcha-img { width: 92px !important; height: 44px !important; }
}

/* --------------------------------------------------------------------------
   7. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.lg-wrap.lg-seller-page .lg-hero-pills a,
	.lg-wrap.lg-seller-page .lg-hero-pills a:hover {
		transition: none !important;
		transform: none !important;
	}
}