.wechat-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #07c160; /* WeChat green */
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 12px 16px;
	font: 600 16px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	cursor: pointer;
	transition: transform 0.05s ease, box-shadow 0.2s ease;
}
.wechat-btn:hover { box-shadow: 0 6px 16px rgba(7,193,96,0.35); }
.wechat-btn:active { transform: translateY(1px); }

.wechat-icon {
	width: 20px; height: 20px; display: inline-block;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g fill="%23fff"><circle cx="9" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/><path d="M8 18c-4 0-7-2.8-7-6.2C1 8 4.2 5.5 8.3 5.5c4.1 0 7.3 2.5 7.3 6.2 0 1-.3 2-1 2.9l1.8 2.1-3-.9c-1.7 1-3.5 1.2-5.4 1.2Z"/></g></svg>') no-repeat center / contain;
}

/* Modal */
.modal {
	position: fixed; inset: 0;
	display: none; align-items: center; justify-content: center;
	background: rgba(0,0,0,0.5); z-index: 1000;
}
.modal.open { display: flex; }
.modal-card {
	background: #fff; border-radius: 12px; max-width: 420px; width: 92%;
	box-shadow: 0 12px 28px rgba(0,0,0,0.25);
	overflow: hidden;
}
.modal-header {
	padding: 14px 16px; border-bottom: 1px solid #eee;
	font: 700 17px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.modal-body { padding: 16px; text-align: center; }
.qr {
	width: 260px; max-width: 80%; border: 8px solid #f5f5f5; border-radius: 12px;
}
.modal-footer {
	display: flex; justify-content: flex-end; gap: 8px;
	padding: 12px 16px; border-top: 1px solid #eee;
}
.close-btn {
	border: 1px solid #ddd; background: #fff; color: #333;
	border-radius: 8px; padding: 10px 14px; font-weight: 600; cursor: pointer;
}