.qc-header-nav {
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	z-index: 9999;
 	background: #fff;
 	box-sizing: border-box;
 	height: 80px;
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 .qc-protect-mode {
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
 	margin: 0;
 	padding-top: 80px;
 }

 .qc-debug-tip {
 	position: fixed;
 	bottom: 20px;
 	right: 20px;
 	background: #333;
 	color: #fff;
 	padding: 8px 15px;
 	border-radius: 5px;
 	font-size: 12px;
 	z-index: 9999;
 	display: none;
 }

 .qc-nav-container {
 	width: 92%;
 	max-width: 1200px;
 	margin: 0 auto;
 	padding: 0 8px;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	height: 100%;
 	position: relative;
 }

 .qc-nav-logo {
 	font-size: clamp(16px, 4vw, 24px);
 	font-weight: 700;
 	color: #3185FE;
 	letter-spacing: 1px;
 	z-index: 997;
 	white-space: nowrap;
 	padding: 0 10px;
 }

 .qc-nav-logo a {
 	color: #3185FE;
 	text-decoration: none;
 	font-size: inherit;
 }

 .qc-nav-right {
 	display: flex;
 	align-items: center;
 	gap: clamp(8px, 2vw, 16px);
 	z-index: 997;
 }

 .qc-nav-contact {
 	font-size: clamp(12px, 2vw, 14px);
 	color: #757575;
 	line-height: 1.4;
 }

 .qc-nav-btn {
 	padding: clamp(4px, 1.5vw, 8px) clamp(8px, 2vw, 16px);
 	border-radius: 4px;
 	font-size: clamp(12px, 2vw, 14px);
 	font-weight: 500;
 	border: none;
 	cursor: pointer;
 	transition: all 0.3s ease;
 	white-space: nowrap;
 	text-decoration: none;
 	display: inline-block;
 }

 .qc-btn-demo {
 	background: #e3f2fd;
 	color: #3185FE;
 }

 .qc-btn-login {
 	background: #3185FE;
 	color: #fff;
 }

 .qc-btn-profile {
 	background: #263238;
 	color: #fff;
 	position: relative;
 }

 /* 新增：退出按钮样式 */
 .qc-btn-logout {
 	position: absolute;
 	top: 100%;
 	right: 0;
 	background: #fff;
 	color: #ff4757;
 	border: 1px solid #eee;
 	border-radius: 4px;
 	padding: 8px 12px;
 	font-size: 12px;
 	display: none;
 	z-index: 9999;
 	min-width: 80px;
 	text-align: center;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .qc-btn-profile:hover .qc-btn-logout {
 	display: block;
 }

 .qc-nav-menu {
 	display: flex;
 	gap: clamp(16px, 2vw, 24px);
 	margin: 0 clamp(16px, 3vw, 32px);
 	align-items: center;
 }

 .qc-nav-menu a {
 	position: relative;
 	transition: color 0.3s ease !important;
 	text-decoration: none;
 	color: #263238;
 	padding-bottom: 4px;
 	display: inline-block;
 }

 .qc-nav-menu a::after {
 	content: '';
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	width: 0;
 	height: 2px;
 	background: #3185FE;
 	transition: width 0.3s ease-in-out !important;
 }

 .qc-nav-menu a.has-child {
 	padding-right: 15px;
 	position: relative;
 }

 .qc-nav-menu a.has-child .qc-nav-arrow {
 	position: absolute;
 	right: 0;
 	top: 50%;
 	transform: translateY(-50%);
 	margin-left: 0;
 }

 .qc-nav-menu a.qc-active {
 	color: #3185FE !important;
 	font-weight: 500 !important;
 }

 .qc-nav-menu a.qc-active::after {
 	width: 100% !important;
 	background: #3185FE !important;
 }

 .qc-nav-menu a:not(.qc-active):hover::after {
 	width: 100% !important;
 }

 .qc-nav-menu a:not(.qc-active):not(:hover)::after {
 	width: 0 !important;
 }

 .qc-submenu {
 	position: absolute;
 	top: 100%;
 	left: 0;
 	background: #fff;
 	min-width: 200px;
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 	border-radius: 4px;
 	overflow: hidden;
 	z-index: 9999;
 	display: none;
 	opacity: 0;
 	transform: translateY(10px);
 	transition: all 0.3s ease;
 }

 .qc-submenu a {
 	display: block;
 	padding: 12px 15px;
 	transition: background 0.3s ease, color 0.3s ease;
 	padding-bottom: 4px;
 }

 .qc-hamburger {
 	display: none;
 	flex-direction: column;
 	justify-content: space-between;
 	width: 24px;
 	height: 20px;
 	cursor: pointer;
 	z-index: 1000;
 	transition: all 0.3s ease;
 	position: relative;
 }

 .qc-hamburger span {
 	display: block;
 	width: 100%;
 	height: 2px;
 	background: #3185FE;
 	border-radius: 1px;
 	transition: all 0.3s ease;
 	position: absolute;
 	left: 0;
 }

 .qc-hamburger span:nth-child(1) {
 	top: 0;
 }

 .qc-hamburger span:nth-child(2) {
 	top: 50%;
 	transform: translateY(-50%);
 }

 .qc-hamburger span:nth-child(3) {
 	bottom: 0;
 }

 .qc-hamburger.qc-active span:nth-child(1) {
 	transform: rotate(45deg) translate(5px, 5px);
 }

 .qc-hamburger.qc-active span:nth-child(2) {
 	opacity: 0;
 }

 .qc-hamburger.qc-active span:nth-child(3) {
 	transform: rotate(-45deg) translate(5px, -5px);
 }

 @media (min-width: 1101px) {
 	.qc-nav-menu .qc-nav-item {
 		position: relative;
 		display: inline-block;
 		margin-top: 9px;
 	}

 	.qc-nav-menu .qc-nav-item:hover .qc-submenu {
 		display: block;
 		opacity: 1;
 		transform: translateY(0);
 	}

 	.qc-nav-menu .qc-nav-item:hover .qc-nav-arrow {
 		transform: translateY(-50%) rotate(180deg);
 	}

 	.qc-nav-contact {
 		display: block;
 	}
 }

 @media (max-width: 1100px) {
 	.qc-hamburger {
 		display: flex !important;
 	}

 	.qc-nav-menu {
 		position: fixed;
 		top: 0;
 		right: 0 !important;
 		left: auto !important;
 		width: 80%;
 		max-width: 300px;
 		height: 100vh;
 		background: #fff;
 		flex-direction: column;
 		padding: 80px 20px 20px;
 		gap: 16px;
 		box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
 		transform: translateX(100%);
 		transition: transform 0.3s ease-in-out !important;
 		z-index: 998;
 		margin: 0 !important;
 		visibility: hidden;
 		opacity: 0;
 	}

 	.qc-nav-menu.qc-show {
 		transform: translateX(0);
 		visibility: visible;
 		opacity: 1;
 	}

 	.qc-nav-menu .qc-nav-item {
 		padding: 0;
 		width: 100%;
 		line-height: normal;
 	}

 	.qc-nav-menu a {
 		width: 100%;
 		display: block;
 		left: 0;
 		font-size: 16px;
 	}

 	.qc-submenu {
 		position: static;
 		display: block !important;
 		opacity: 1 !important;
 		transform: none !important;
 		box-shadow: none;
 		border-radius: 0;
 		min-width: auto;
 		margin-left: 15px;
 		background: none;
 	}

 	.qc-nav-arrow {
 		display: none !important;
 	}

 	.qc-nav-contact {
 		display: none !important;
 	}

 	.qc-nav-right {
 		max-width: 20%;
 		justify-content: flex-end;
 	}

 	.qc-nav-btn {
 		padding: 4px 8px;
 		font-size: 12px;
 		max-width: 80px;
 	}

 	.qc-menu-mask {
 		position: fixed;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 100%;
 		background: rgba(0, 0, 0, 0.3);
 		z-index: 997;
 		display: none;
 		opacity: 0;
 		transition: opacity 0.3s ease;
 	}

 	.qc-menu-mask.show {
 		display: block;
 		opacity: 1;
 	}
 }

 @media (max-width: 480px) {
 	.qc-nav-right {
 		max-width: 25%;
 	}

 	.qc-nav-btn {
 		padding: 6px 8px;
 		font-size: 11px;
 		max-width: 70px;
 	}

 	.qc-nav-logo {
 		font-size: 16px;
 		padding: 0 5px;
 	}

 	.qc-nav-menu {
 		width: 90%;
 		max-width: 280px;
 	}
 }

 .demo-modal,
 .login-modal {
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	z-index: 10000;
 	display: none;
 	justify-content: center;
 	align-items: center;
 }

 .demo-modal.show,
 .login-modal.show {
 	display: flex;
 }

 .modal-overlay {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background: rgba(0, 0, 0, 0.5);
 	cursor: pointer;
 }

 .modal-content {
 	position: relative;
 	background: #fff;
 	border-radius: 8px;
 	padding: 20px;
 	max-width: 90%;
 	width: 420px;
 	z-index: 10001;
 	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }

 .modal-close {
 	position: absolute;
 	top: 9px;
 	right: 15px;
 	background: transparent;
 	border: none;
 	font-size: 18px;
 	color: #999;
 	cursor: pointer;
 	width: 30px;
 	height: 30px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	border-radius: 50%;
 	transition: background 0.3s ease;
 }

 .modal-close:hover {
 	background: #f5f5f5;
 	color: #333;
 }

 .qrcode-box {
 	text-align: center;
 	padding: 15px 0;
 }

 .qrcode-box img {
 	max-width: 200px;
 	height: auto;
 	border: 1px solid #eee;
 	padding: 5px;
 	border-radius: 8px;
 }

 .qrcode-tip {
 	text-align: center;
 	color: #666;
 	font-size: 14px;
 	margin-top: 10px;
 }

 .login-tabs {
 	display: flex;
 	margin-bottom: 20px;
 	border-bottom: 1px solid #eee;
 }

 .login-tab {
 	flex: 1;
 	text-align: center;
 	padding: 10px 0;
 	cursor: pointer;
 	color: #999;
 	transition: all 0.3s ease;
 }

 .login-tab.active {
 	color: #3185FE;
 	border-bottom: 2px solid #3185FE;
 	font-weight: 500;
 }

 .login-form,
 .register-form {
 	display: none;
 }

 .login-form.active,
 .register-form.active {
 	display: block;
 }

 .form-group {
 	margin-bottom: 15px;
 }

 .form-group label {
 	display: block;
 	margin-bottom: 5px;
 	color: #333;
 	font-size: 14px;
 	display: flex;
 	align-items: center;
 	gap: 5px;
 }

 .form-group input {
 	width: 100%;
 	padding: 10px 12px;
 	border: 1px solid #ddd;
 	border-radius: 4px;
 	font-size: 14px;
 	transition: border 0.3s ease;
 }

 .form-group input:focus {
 	border-color: #3185FE;
 	outline: none;
 }

 /* 验证码核心样式（强制显示） */
 .form-group.code-row {
 	display: flex !important;
 	gap: 10px !important;
 	align-items: flex-end !important;
 	width: 100% !important;
 	margin-bottom: 15px !important;
 }

 .code-input {
 	flex: 1 !important;
 	width: calc(100% - 130px) !important;
 }

 .code-img {
 	width: 120px !important;
 	height: 38px !important;
 	cursor: pointer !important;
 	border-radius: 4px !important;
 	display: block !important;
 	flex-shrink: 0 !important;
 	border: 1px solid #ddd !important;
 }

 .send-email-code {
 	width: 120px;
 	padding: 10px 0;
 	background: #3185FE;
 	color: #fff;
 	border: none;
 	border-radius: 4px;
 	cursor: pointer;
 	font-size: 14px;
 	/* 新增：加载状态的过渡 */
 	transition: all 0.2s ease;
 }

 .send-email-code.disabled,
 .send-email-code.loading {
 	background: #999;
 	cursor: not-allowed;
 }

 /* 新增：加载动画样式 */
 .send-email-code.loading::after {
 	content: '';
 	display: inline-block;
 	width: 12px;
 	height: 12px;
 	margin-left: 5px;
 	border: 2px solid #fff;
 	border-top: 2px solid transparent;
 	border-radius: 50%;
 	animation: spin 0.8s linear infinite;
 }

 @keyframes spin {
 	0% {
 		transform: rotate(0deg);
 	}

 	100% {
 		transform: rotate(360deg);
 	}
 }

 .form-options {
 	margin-bottom: 15px;
 	font-size: 13px;
 }

 .form-links a {
 	color: #3185FE;
 	text-decoration: none;
 	margin-right: 15px;
 }

 .form-submit {
 	width: 100%;
 	padding: 12px 0;
 	background: #3185FE;
 	color: #fff;
 	border: none;
 	border-radius: 4px;
 	font-size: 16px;
 	cursor: pointer;
 	transition: background 0.3s ease;
 }

 .form-submit:hover {
 	background: #2578e6;
 }

 .form-switch {
 	text-align: center;
 	margin-top: 15px;
 	font-size: 13px;
 }

 .form-switch a {
 	color: #3185FE;
 	text-decoration: none;
 }

 .qc-nav-arrow {
 	font-size: 10px;
 	transition: transform 0.3s ease;
 	display: inline-block;
 	color: #263238;
 }

 #loginStatusHidden {
 	display: none;
 }

 /* ========== 新增：多系统演示二维码弹窗样式 ========== */
 /* 弹窗基础样式（与原有弹窗风格统一） */
 .multi-demo-modal {
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	z-index: 10002;
 	/* 高于原有弹窗，确保显示 */
 	display: none;
 	justify-content: center;
 	align-items: center;
 	padding: 20px;
 	box-sizing: border-box;
 }

 .multi-demo-modal.show {
 	display: flex;
 }

 .multi-demo-modal-overlay {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background: rgba(0, 0, 0, 0.7);
 	backdrop-filter: blur(2px);
 	cursor: pointer;
 }

 .multi-demo-modal-content {
 	position: relative;
 	background: #ffffff;
 	border-radius: 16px;
 	box-shadow: 0 10px 50px rgba(0, 0, 0, 0.15);
 	padding: 30px;
 	max-width: 90%;
 	width: 420px;
 	box-sizing: border-box;
 	z-index: 1;
 	overflow: hidden;
 	animation: modalFadeIn 0.3s ease;
 }

 @keyframes modalFadeIn {
 	from {
 		opacity: 0;
 		transform: translateY(20px) scale(0.95);
 	}

 	to {
 		opacity: 1;
 		transform: translateY(0) scale(1);
 	}
 }

 .multi-demo-close {
 	position: absolute;
 	top: 20px;
 	right: 20px;
 	background: transparent;
 	border: none;
 	font-size: 24px;
 	color: #999999;
 	cursor: pointer;
 	width: 36px;
 	height: 36px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	border-radius: 50%;
 	transition: all 0.2s ease;
 }

 .multi-demo-close:hover {
 	background: #f5f5f5;
 	color: #333333;
 }

 .multi-demo-header {
 	text-align: center;
 	margin-bottom: 25px;
 }

 .multi-demo-header h3 {
 	font-size: 22px;
 	color: #1a1a1a;
 	margin: 0 0 10px 0;
 	font-weight: 600;
 }

 .multi-demo-header p {
 	font-size: 14px;
 	color: #666666;
 	margin: 0;
 	line-height: 1.5;
 }

 .multi-demo-body {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 }

 /* 二维码容器样式 */
 .multi-qrcode-container {
 	background: #f9f9f9;
 	padding: 20px;
 	border-radius: 12px;
 	margin-bottom: 20px;
 	width: 200px;
 	height: 200px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	overflow: hidden;
 	box-sizing: border-box;
 }

 #multi-qrcode-generator {
 	width: 100% !important;
 	height: 100% !important;
 	position: relative;
 }

 /* 二维码中间Logo */
 .multi-qrcode-logo {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	width: 40px;
 	height: 40px;
 	border-radius: 8px;
 	background: #ffffff;
 	padding: 2px;
 	box-sizing: border-box;
 	z-index: 10;
 }

 .multi-qrcode-desc {
 	text-align: center;
 	width: 100%;
 }

 .multi-qrcode-text {
 	font-size: 14px;
 	color: #666666;
 	margin: 0 0 15px 0;
 	text-align: center;
 }

 .multi-demo-site-link {
 	display: inline-block;
 	background: #2563eb;
 	color: #ffffff;
 	text-decoration: none;
 	padding: 12px 24px;
 	border-radius: 8px;
 	font-size: 14px;
 	font-weight: 500;
 	transition: all 0.2s ease;
 	width: 100%;
 	box-sizing: border-box;
 	cursor: pointer;
 	text-align: center;
 	/* 新增：确保点击区域完整 */
 	pointer-events: auto;
 }

 .multi-demo-site-link:hover {
 	background: #1d4ed8;
 	transform: translateY(-2px);
 	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
 }

 .multi-demo-site-link i {
 	margin-right: 8px;
 }

 /* 系统选择下拉框 */
 .system-selector {
 	width: 100%;
 	margin-bottom: 20px;
 	padding: 10px 15px;
 	border: 1px solid #ddd;
 	border-radius: 8px;
 	font-size: 14px;
 	color: #333;
 	background: #fff;
 	cursor: pointer;
 	/* 优化边框和焦点样式 */
 	outline: none;
 	transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }

 .system-selector:focus {
 	border-color: #3185FE;
 	box-shadow: 0 0 0 2px rgba(49, 133, 254, 0.1);
 }

 /* 移除下拉框默认样式，消除黑色边框 */
 .system-selector::-webkit-focus-ring-color {
 	outline: none;
 }

 .system-selector::-moz-focus-inner {
 	border: 0;
 }

 /* 移动端适配 */
 @media (max-width: 480px) {
 	.multi-demo-modal-content {
 		padding: 20px;
 		max-width: 90%;
 	}

 	.multi-qrcode-container {
 		width: 180px;
 		height: 180px;
 	}

 	.multi-qrcode-logo {
 		width: 36px;
 		height: 36px;
 	}

 	.multi-demo-header h3 {
 		font-size: 20px;
 	}

 	.multi-demo-site-link {
 		padding: 10px 20px;
 	}
 }