/* ======================================================
   登录/注册弹窗  login_register_popup.css
   主色：#02b58f（与项目全局风格保持一致）
   说明：纯CSS切换（:target）、输入框聚焦高亮、内联SVG第三方图标
   ====================================================== */

/* ---------- 弹窗遮罩 ---------- */
.lr-popup-mask {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(8, 28, 22, .52);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}
.lr-popup-mask.is-open { display: flex; }
body.lr-popup-open { overflow: hidden; }
.lr-popup-mask,
.lr-popup-mask * { box-sizing: border-box; }

/* ---------- 弹窗卡片 ---------- */
.lr-popup-card {
	position: relative;
	width: 380px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	background: #fff;
	border-radius: 16px;
	overflow-x: hidden;
	overflow-y: auto;
	box-shadow: 0 24px 64px rgba(5, 58, 43, .20), 0 6px 20px rgba(5, 58, 43, .10);
	display: none;
}

/* ---------- 面板切换 ---------- */
.lr-popup-card.is-active {
	display: block;
	animation: lrPanelIn .32s ease;
}

@keyframes lrPanelIn {
	from { opacity: 0; transform: translateY(16px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

/* ---------- 关闭按钮 ---------- */
.lr-popup-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #F2F2F2;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .25s ease, transform .25s ease;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}
.lr-popup-close span {
	position: relative;
	display: block;
	width: 14px;
	height: 14px;
}
.lr-popup-close span::before,
.lr-popup-close span::after {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: #5b6b65;
	transition: background-color .25s ease;
}
.lr-popup-close span::before { transform: rotate(45deg); }
.lr-popup-close span::after  { transform: rotate(-45deg); }
.lr-popup-close:hover {
	background: #E5E5E5;
	transform: rotate(90deg);
}
.lr-popup-close:hover span::before,
.lr-popup-close:hover span::after { background: #5b6b65; }

/* ======================================================
   弹窗头部（登录/注册共用，简洁居中）
   ====================================================== */
.lr-login-head,
.lr-panel-head {
	padding: 28px 30px 18px;
	text-align: center;
}
.lr-login-title,
.lr-panel-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #14201b;
}
.lr-login-sub,
.lr-panel-sub {
	margin-top: 6px;
	font-size: 12px;
	color: #8a9490;
}
.lr-login-sub .lr-hl,
.lr-login-sub > span,
.lr-panel-sub .lr-hl { color: #02b58f; font-weight: 600; }

/* ======================================================
   表单
   ====================================================== */
.lr-panel-body {
	padding: 0 30px 10px;
}

/* 登录方式切换 */
.lr-login-mode-switch {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin: -2px 0 14px;
}
.lr-login-mode-switch button {
	position: relative;
	padding: 0 0 7px;
	border: 0;
	background: transparent;
	color: #8a9490;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: color .2s ease;
}
.lr-login-mode-switch button::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: #02b58f;
	transform: translateX(-50%);
	transition: width .2s ease;
}
.lr-login-mode-switch button:hover,
.lr-login-mode-switch button.is-active { color: #02b58f; }
.lr-login-mode-switch button.is-active { font-weight: 600; }
.lr-login-mode-switch button.is-active::after { width: 24px; }
.lr-login-section[hidden] { display: none; }

/* 输入框容器（聚焦高亮） */
.lr-field {
	position: relative;
	display: flex;
	align-items: center;
	height: 44px;
	margin-bottom: 14px;
	border: 1px solid #e3e9e7;
	border-radius: 10px;
	background: #fff;
	transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.lr-field:hover { border-color: #cde5dd; }
.lr-field:focus-within {
	border-color: #02b58f;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(2, 181, 143, .12);
}

/* 输入框左侧图标 */
.lr-field-icon {
	flex: none;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9aa8a3;
	transition: color .25s ease;
}
.lr-field:focus-within .lr-field-icon { color: #02b58f; }
.lr-field-icon svg {
	width: 18px;
	height: 18px;
}

/* 输入框本体 */
.lr-field input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: none;
	outline: none;
	background: transparent;
	font-size: 13px;
	color: #14201b;
	padding-right: 12px;
}
.lr-field input::placeholder { color: #b6c0bc; }

/* 验证码行：输入框与按钮并列 */
.lr-code-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.lr-code-row .lr-field-code {
	flex: 1;
	margin-bottom: 0;
}

.lr-password-meta {
	display: flex;
	justify-content: flex-end;
	margin: -6px 0 12px;
	font-size: 12px;
}
.lr-password-meta a { color: #7d8a85; }
.lr-password-meta a:hover { color: #02b58f; }

/* 获取验证码按钮 */
.lr-code-row .lr-get-code {
	flex: none;
	padding: 0 12px;
	height: 44px;
	line-height: 42px;
	border: 1px solid #02b58f;
	border-radius: 10px;
	background: #fff;
	color: #02b58f;
	font-size: 12px;
	white-space: nowrap;
	transition: all .2s ease;
	text-align: center;
	min-width: 90px;
	box-sizing: border-box;
}
.lr-code-row .lr-get-code:hover {
	background: #E6F9F3;
	color: #02b58f;
}

/* 倒计时中（灰色禁用态） */
.lr-code-row .lr-get-code.is-counting,
.lr-code-row .lr-get-code.is-counting:hover {
	border-color: #dfe5e2;
	background: #F7F8FA;
	color: #b6c0bc;
	cursor: not-allowed;
}

/* 手机号校验失败提示 */
.lr-field.is-invalid { border-color: #f56c6c; }
.lr-field.is-invalid:focus-within {
	border-color: #f56c6c;
	box-shadow: 0 0 0 3px rgba(245, 108, 108, .12);
}
.lr-field.is-invalid .lr-field-icon { color: #f56c6c; }

/* ---------- 主按钮 ---------- */
.lr-submit-btn {
	display: block;
	height: 44px;
	line-height: 44px;
	margin-top: 6px;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 2px;
	color: #fff;
	background: linear-gradient(90deg, #04c79e, #02b58f);
	border-radius: 10px;
	box-shadow: none;
	cursor: pointer;
	transition: all .25s ease;
	width: 100%;
	border: 0;
	padding: 0;
	font-family: inherit;
}
.lr-submit-btn:hover {
	background: linear-gradient(90deg, #03b28d, #019a7b);
	box-shadow: 0 5px 8px rgba(2, 181, 143, .38);
	transform: translateY(-1px);
}
.lr-submit-btn:disabled,
.lr-submit-btn.is-loading {
	opacity: .7;
	cursor: not-allowed;
	transform: none;
}

/* ---------- 协议提示 ---------- */
.lr-agree {
	margin-top: 10px;
	text-align: center;
	font-size: 12px;
	color: #9aa8a3;
}
.lr-agree a { color: #02b58f; }
.lr-agree a:hover { text-decoration: underline; }

/* ======================================================
   第三方登录
   ====================================================== */
/* 分隔线 */
.lr-divider {
	display: flex;
	align-items: center;
	margin: 18px 0 6px;
	font-size: 12px;
	color: #b6c0bc;
}
.lr-divider::before,
.lr-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #edf1f0;
}
.lr-divider span { padding: 0 14px; }

/* 微信登录 */
.lr-wechat-login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	border-radius: 50%;
	background: transparent;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}
.lr-wechat-login:hover {
	background: rgba(7, 193, 96, .08);
	transform: translateY(-1px);
}
.lr-wechat-login:active {
	background: rgba(7, 193, 96, .13);
	transform: translateY(0);
}
.lr-wechat-login-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	height: 28px;
}
.lr-wechat-login-icon svg {
	width: 28px;
	height: 28px;
	fill: #07C160;
}

/* ======================================================
   底部切换栏
   ====================================================== */
.lr-panel-footer {
	margin-top: 6px;
	padding: 14px 30px 16px;
	text-align: center;
	border-top: 1px solid #f0f3f2;
	background: #F7F8FA;
	font-size: 13px;
	color: #7d8a85;
}
.lr-panel-footer a,
.lr-panel-footer button {
	color: #02b58f;
	font-weight: 600;
	margin-left: 4px;
}
.lr-panel-footer button {
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
}
.lr-panel-footer a:hover,
.lr-panel-footer button:hover { text-decoration: underline; }

.lr-get-code {
	cursor: pointer;
	font-family: inherit;
}
.lr-get-code:disabled { cursor: not-allowed; }

.lr-popup-close:focus-visible,
.lr-login-mode-switch button:focus-visible,
.lr-get-code:focus-visible,
.lr-submit-btn:focus-visible,
.lr-panel-footer button:focus-visible,
.lr-wechat-login:focus-visible,
.lr-agree a:focus-visible {
	outline: 2px solid #02b58f;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.lr-popup-card.is-active { animation: none; }
	.lr-popup-close,
	.lr-login-mode-switch button,
	.lr-field,
	.lr-submit-btn,
	.lr-wechat-login { transition: none; }
}