/* ============================================================
   商户端登录 / 注册 / 找回密码 统一视觉
   设计与 theme-flat.css 的 token 保持一致（主色 #1677ff / 圆角 12）
   仅在 login.php、reg.php、findpwd.php 三个页面引用
   ============================================================ */

:root {
	--a-primary: #1677ff;
	--a-primary-dark: #0b57d0;
	--a-primary-light: #e8f3ff;
	--a-text: #1f2329;
	--a-sub: #4e5969;
	--a-muted: #86909c;
	--a-border: #e5e6eb;
	--a-line: #eef0f4;
	--a-bg: #f4f6f9;
	--a-danger: #f05050;
	--a-success: #0fa44a;
	--a-radius: 12px;
}

body.auth-body {
	margin: 0;
	min-height: 100vh;
	background-color: var(--a-bg);
	color: var(--a-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.auth-body a {
	text-decoration: none;
}

/* ---------- 两栏骨架 ---------- */
.auth-page {
	display: flex;
	min-height: 100vh;
}

/* ---------- 左侧品牌区（≥1080px 显示） ---------- */
.auth-brand {
	display: none;
}

@media (min-width: 1080px) {
	.auth-brand {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 42%;
		max-width: 560px;
		padding: 48px 56px 36px;
		color: #fff;
		background: radial-gradient(900px 520px at 18% 8%, rgba(58, 128, 214, .55) 0%, rgba(58, 128, 214, 0) 62%),
			linear-gradient(160deg, #0a1b30 0%, #10294a 58%, #0b1f3a 100%);
	}
}

.auth-mark {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.auth-mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.auth-brand h1 {
	margin: 22px 0 8px;
	font-size: 26px;
	font-weight: 600;
	color: #fff;
	letter-spacing: .5px;
}

.auth-slogan {
	margin: 0 0 34px;
	font-size: 14px;
	color: rgba(255, 255, 255, .72);
	letter-spacing: .5px;
}

.auth-points {
	margin: 0;
	padding: 0;
	list-style: none;
}

.auth-points li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 20px;
	font-size: 13px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .66);
}

.auth-points li b {
	display: block;
	margin-bottom: 2px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

.auth-points li i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .12);
	color: #8fc3ff;
	font-size: 13px;
}

.auth-brand-bottom {
	font-size: 12px;
	color: rgba(255, 255, 255, .42);
}

.auth-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.auth-trust span {
	padding: 5px 10px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 20px;
	font-size: 12px;
	color: rgba(255, 255, 255, .78);
}

/* ---------- 右侧表单区 ---------- */
.auth-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px 28px;
}

.auth-card {
	width: 100%;
	max-width: 420px;
	padding: 36px 32px 30px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(31, 35, 41, .08);
}

.auth-mobile-logo {
	display: none;
	text-align: center;
	margin-bottom: 20px;
}

.auth-mobile-logo img {
	width: 46px;
	height: 46px;
	border-radius: 13px;
}

.auth-mobile-logo strong {
	display: block;
	margin-top: 8px;
	font-size: 17px;
	font-weight: 600;
	color: var(--a-text);
}

.auth-card-head {
	margin-bottom: 22px;
}

.auth-card-head h2 {
	margin: 0 0 6px;
	font-size: 23px;
	font-weight: 600;
	color: var(--a-text);
	letter-spacing: .3px;
}

.auth-card-head p {
	margin: 0;
	font-size: 13px;
	color: var(--a-muted);
	line-height: 1.6;
}

/* ---------- 分段控件（替代 nav-tabs） ---------- */
.auth-seg {
	display: flex;
	margin: 0 0 20px;
	padding: 4px;
	background: #f2f4f7;
	border-radius: 10px;
}

.auth-seg a {
	flex: 1;
	height: 36px;
	line-height: 36px;
	text-align: center;
	font-size: 13px;
	color: var(--a-sub);
	border-radius: 8px;
	transition: all .15s ease;
}

.auth-seg a:hover {
	color: var(--a-text);
}

.auth-seg a.is-active {
	background: #fff;
	color: var(--a-text);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* ---------- 表单字段 ---------- */
.auth-field {
	display: block;
	margin-bottom: 16px;
}

.auth-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 500;
	color: var(--a-sub);
}

.auth-label a {
	font-size: 13px;
	font-weight: 400;
	color: var(--a-primary);
}

.auth-label a:hover {
	color: var(--a-primary-dark);
}

.auth-input {
	display: flex;
	align-items: center;
	height: 46px;
	border: 1px solid var(--a-border);
	border-radius: 10px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-input > i {
	flex: 0 0 40px;
	text-align: center;
	font-size: 15px;
	color: var(--a-muted);
}

.auth-input input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 10px 0 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	color: var(--a-text);
	box-shadow: none !important;
	-webkit-appearance: none;
}

.auth-input input::placeholder {
	color: #a9b0bd;
	font-size: 14px;
}

.auth-input:focus-within {
	border-color: var(--a-primary);
	box-shadow: 0 0 0 3px rgba(22, 119, 255, .12);
}

.auth-field.is-error .auth-input,
.auth-input.is-error {
	border-color: var(--a-danger);
	box-shadow: 0 0 0 3px rgba(240, 80, 80, .10);
}

.auth-hint {
	display: none;
	margin-top: 6px;
	font-size: 12px;
	color: var(--a-danger);
	line-height: 1.5;
}

.auth-field.is-error .auth-hint {
	display: block;
}

.auth-field .auth-extra {
	margin-top: 7px;
	font-size: 12px;
	color: var(--a-muted);
	line-height: 1.5;
}

/* 密码可见切换 */
.auth-eye {
	flex: 0 0 42px;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--a-muted);
	font-size: 14px;
	cursor: pointer;
	transition: color .15s ease;
}

.auth-eye:hover {
	color: var(--a-primary);
}

/* 输入框内的验证码按钮 */
.auth-code-btn {
	flex: 0 0 auto;
	height: 32px;
	margin-right: 6px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: var(--a-primary-light);
	color: var(--a-primary);
	font-family: inherit;
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s ease;
}

.auth-code-btn:hover {
	background: #d8e9ff;
}

.auth-code-btn:disabled {
	background: #f2f4f7;
	color: var(--a-muted);
	cursor: not-allowed;
}

/* ---------- 主按钮 / 次按钮 ---------- */
.auth-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	margin-top: 22px;
	border: 0;
	border-radius: 10px;
	background: var(--a-primary);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .5px;
	cursor: pointer;
	transition: background .15s ease, box-shadow .15s ease;
}

.auth-btn:hover {
	background: var(--a-primary-dark);
	color: #fff;
	box-shadow: 0 6px 16px rgba(22, 119, 255, .22);
}

.auth-btn:disabled {
	background: #9dc4fb;
	box-shadow: none;
	cursor: not-allowed;
}

.auth-btn .auth-spin {
	display: none;
	width: 15px;
	height: 15px;
	margin-right: 8px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: auth-spin .8s linear infinite;
}

.auth-btn.is-loading .auth-spin {
	display: inline-block;
}

@keyframes auth-spin {
	to { transform: rotate(360deg); }
}

.auth-btn-ghost {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	margin-top: 10px;
	border: 1px solid var(--a-border);
	border-radius: 10px;
	background: #fff;
	color: var(--a-sub);
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: all .15s ease;
}

.auth-btn-ghost:hover {
	border-color: var(--a-primary);
	color: var(--a-primary);
}

/* ---------- 提示条 ---------- */
.auth-alert {
	display: none;
	margin-bottom: 16px;
	padding: 10px 12px;
	border: 1px solid #ffd6d6;
	border-radius: 10px;
	background: #fff2f2;
	color: #c93a3a;
	font-size: 13px;
	line-height: 1.55;
	word-break: break-word;
}

.auth-alert.is-show {
	display: block;
}

.auth-alert.is-success {
	border-color: #c6efd8;
	background: #eefaf2;
	color: #08783f;
}

/* ---------- 分隔线 + 三方登录 ---------- */
.auth-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0 16px;
	font-size: 12px;
	color: var(--a-muted);
}

.auth-divider::before,
.auth-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--a-border);
}

.auth-social {
	display: flex;
	justify-content: center;
	gap: 14px;
}

.auth-social button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--a-border);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transition: all .15s ease;
}

.auth-social button:hover {
	border-color: var(--a-primary);
	box-shadow: 0 0 0 3px rgba(22, 119, 255, .10);
	transform: translateY(-1px);
}

.auth-social img {
	width: 22px;
	height: 22px;
	border-radius: 50%;
}

.auth-social i {
	font-size: 20px;
}

/* ---------- 底部切换链接 ---------- */
.auth-switch {
	margin: 22px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--a-sub);
}

.auth-switch a {
	margin-left: 4px;
	color: var(--a-primary);
	font-weight: 500;
}

.auth-switch a:hover {
	color: var(--a-primary-dark);
}

/* ---------- 页面页脚 ---------- */
.auth-foot {
	width: 100%;
	max-width: 420px;
	margin-top: 26px;
	text-align: center;
	font-size: 12px;
	line-height: 1.9;
	color: var(--a-muted);
}

.auth-foot .auth-secure {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	padding: 6px 12px;
	border-radius: 20px;
	background: #eef4ff;
	color: #3a6ea8;
	font-size: 12px;
}

.auth-foot .auth-links {
	margin-bottom: 6px;
}

.auth-foot a {
	color: var(--a-sub);
}

.auth-foot a:hover {
	color: var(--a-primary);
}

.auth-foot .auth-split {
	margin: 0 6px;
	color: #c9ced6;
}

/* ---------- 注册：说明 / 价格 / 协议 ---------- */
.auth-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 18px;
	padding: 12px;
	border: 1px solid var(--a-border);
	border-radius: 10px;
	background: #f7f9fc;
	font-size: 12px;
	line-height: 1.65;
	color: var(--a-sub);
}

.auth-notice i {
	margin-top: 3px;
	color: var(--a-primary);
	font-size: 13px;
}

.auth-notice a {
	color: var(--a-primary);
}

.auth-price {
	margin-bottom: 18px;
	padding: 9px 12px;
	border: 1px solid #ffe7bf;
	border-radius: 9px;
	background: #fffaf0;
	font-size: 13px;
	color: #a96b00;
}

.auth-price b {
	font-size: 15px;
}

.auth-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 2px 0 4px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--a-sub);
	cursor: pointer;
	user-select: none;
}

.auth-check input {
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--a-primary);
	cursor: pointer;
}

.auth-check a {
	color: var(--a-primary);
}

.auth-check-error {
	display: none;
	margin: -2px 0 0 24px;
	font-size: 12px;
	color: var(--a-danger);
}

.auth-check-error.is-show {
	display: block;
}

/* 密码强度 */
.auth-strength {
	display: flex;
	gap: 6px;
	margin-top: 8px;
}

.auth-strength span {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var(--a-line);
	transition: background .2s ease;
}

.auth-strength-text {
	margin-top: 6px;
	font-size: 12px;
	color: var(--a-muted);
}

.auth-strength.lv1 span:nth-child(1) { background: #f05050; }
.auth-strength.lv2 span:nth-child(-n+2) { background: #ff9a2e; }
.auth-strength.lv3 span:nth-child(-n+3) { background: var(--a-success); }
.auth-strength.lv4 span { background: var(--a-success); }

/* ---------- 找回密码：步骤条 ---------- */
.auth-steps {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
}

.auth-step {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--a-muted);
	white-space: nowrap;
}

.auth-step-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #eef0f4;
	color: var(--a-muted);
	font-size: 12px;
	font-weight: 600;
}

.auth-step.is-active {
	color: var(--a-primary);
	font-weight: 500;
}

.auth-step.is-active .auth-step-dot {
	background: var(--a-primary);
	color: #fff;
}

.auth-step.is-done .auth-step-dot {
	background: var(--a-primary-light);
	color: var(--a-primary);
}

.auth-step-line {
	flex: 1;
	height: 1px;
	background: var(--a-border);
}

.auth-pane {
	display: none;
}

.auth-pane.is-show {
	display: block;
}

/* 成功态 */
.auth-result {
	text-align: center;
	padding: 8px 0 4px;
}

.auth-result .auth-result-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: #eefaf2;
	color: var(--a-success);
	font-size: 28px;
}

.auth-result h3 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	color: var(--a-text);
}

.auth-result p {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--a-muted);
	line-height: 1.7;
}

/* 密钥登录提示 */
.auth-keytip {
	margin-top: 7px;
	font-size: 12px;
	color: var(--a-muted);
	line-height: 1.6;
}

/* ---------- 极验容器 ---------- */
.auth-captcha {
	margin-bottom: 4px;
}

.auth-captcha #captcha {
	width: 100%;
}

.auth-captcha #captcha_text,
.auth-captcha #captcha_wait {
	height: 44px;
	border-radius: 10px;
	background: #f7f9fc;
	line-height: 44px;
}

/* ---------- 移动端 ---------- */
@media (max-width: 1079px) {
	.auth-mobile-logo {
		display: block;
	}
}

@media (max-width: 767px) {
	.auth-main {
		padding: 22px 16px 20px;
		justify-content: flex-start;
	}

	.auth-card {
		max-width: 100%;
		padding: 4px 2px 0;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
	}

	.auth-card-head h2 {
		font-size: 22px;
	}

	.auth-input input {
		font-size: 16px;
	}

	.auth-foot {
		margin-top: 22px;
		padding-bottom: 16px;
	}
}

/* ---------- 注册须知弹窗（沿用 Bootstrap modal，仅统一外观） ---------- */
.auth-modal .modal-content {
	border: 0;
	border-radius: 14px;
	box-shadow: 0 20px 48px rgba(31, 35, 41, .18);
}

.auth-modal .modal-header {
	padding: 18px 22px;
	border-bottom: 1px solid var(--a-line);
}

.auth-modal .modal-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--a-text);
}

.auth-modal .modal-body {
	max-height: 60vh;
	overflow-y: auto;
	padding: 20px 22px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--a-sub);
}

.auth-modal .modal-footer {
	padding: 14px 22px;
	border-top: 1px solid var(--a-line);
}

.auth-modal .modal-footer .btn {
	height: 38px;
	padding: 0 20px;
	border-radius: 9px;
	font-size: 14px;
}