* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: "Microsoft Yahei", sans-serif;
			}

			.text-white {
				color: #FFF !important;
			}

			textarea::-webkit-input-placeholder {
				color: #fff;
			}

			/* WebKit浏览器 */
			textarea::-moz-placeholder {
				color: #fff;
			}

			/* Firefox 19+ */
			textarea:-moz-placeholder {
				color: #fff;
			}

			/* Firefox 4-18 */
			textarea::-ms-input-placeholder {
				color: #fff;
			}

			/* IE 10+ */
			input {
				background: none;
				border: 0px;
				outline: none;
			}

			.top-banner {
				padding: 10px 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto;
				height: 80px;
				position: relative;
				z-index: 1;
				padding: 0 100px;
			}

			.logo-area {
				display: flex;
				align-items: center;
			}

			.logo {
				width: 571px;
				height: 50px;
			}

			.logo-text {
				font-weight: bold;
				color: #fff;
			}

			.nav-links {
				display: flex;
				gap: 20px;
			}

			.link-a {
				display: block;
				color: #fff;
				text-decoration: none;
				font-size: 14px;
				width: 80px;
				height: 36px;
				border-radius: 30px 30px 30px 30px;
				text-align: center;
				line-height: 36px;
				border: none;
				font-weight: bold;
				letter-spacing: 1px;
				text-transform: uppercase;
				cursor: pointer;
				transition: all 1000ms;
				position: relative;
				overflow: hidden;
				outline: 2px solid #FFFFFF;

			}

			/* 导航按钮样式 - 来自 Uiverse.io */

			.link-a:hover {
				color: #000;
				transform: scale(1.1);
				outline: 2px solid #FFFFFF;
				box-shadow: 4px 5px 17px -4px #FFFFFF;
			}

			.link-a::before {
				content: "";
				position: absolute;
				left: -50px;
				top: 0;
				width: 0;
				height: 100%;
				background-color: #FFFFFF;
				transform: skewX(45deg);
				z-index: -1;
				transition: width 500ms;
			}

			.link-a:hover::before {
				width: 250%;
			}


			.header-content {
				position: relative;
				padding-bottom: 100px;
			}

			.bg {
				position: absolute;
				left: 0;
				right: 0;
				top: -80px;
				width: 100%;
				height: calc(100% + 80px);
			}

			.header-mian {
				position: relative;
				z-index: 1;
				width: 1400px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				padding-top: 40px;
			}

			.header-left {
				flex: 6;
				background: rgba(255, 255, 255, 0.5);
				box-shadow: 11px 10px 22px 0px rgba(184, 163, 123, 0.3);
				border-radius: 20px 20px 20px 20px;
				display: flex;
				overflow: hidden;
			}

			/* 左侧主内容区域样式在.header-left中定义 */

			.champion-img {
				height: 700px;
				display: block;
			}

			.header-middle {
				flex: 1;
				padding: 120px 40px 0;
				width: 300px;
			}

			.header-middle h2 {
				margin-bottom: 10px;
				font-size: 36px;
			}

			.header-middle p {
				font-size: 15px;
				line-height: 1.5;
				margin-bottom: 5px;
				color: #777777;
			}

			.header-right {
				background: rgba(255, 255, 255, 0.5);
				box-shadow: 11px 10px 22px 0px rgba(184, 163, 123, 0.3);
				border-radius: 20px 20px 20px 20px;
				padding: 20px;
				text-align: center;
				flex: 3;
				margin-left: 20px;
				position: relative;
			}

			.coupon {
				position: absolute;
				right: 0;
				top: 0;
				width: 130px;
				height: 130px;
			}

			.logoTwo {
				width: 280px;
				margin-top: 80px;

			}

			.qr-code {
				width: 280px;
				height: 280px;
				background-color: #FFF;
				margin: 20px auto 20px;
				border-radius: 10px;
			}

			.input-area {
				margin: 18px auto;
				width: 280px;
				display: flex;
				align-items: center;
				border-radius: 100px;
				border: 2px solid rgba(255, 89, 125, 0.4);
				padding: 0 5px;
			}

			.input-area input {
				padding: 10px 10px;
				border-radius: 100px;
				flex: 1;
			}

			.input-area input::placeholder {
				color: #9e9ea7;
			}

			.input-area:focus,
			.input-area:hover {
				outline: none;
				border-color: rgba(255, 89, 125, 0.4);
				box-shadow: 0 0 0 4px rgb(234 76 137 / 10%);
			}

			.input-area button {
				padding: 8px 15px;
				background-color: #ff9966;
				color: #fff;
				border: none;
				border-radius: 4px;
				cursor: pointer;
			}

			.input-area-code {
				width: 85px;
				height: 26px;
				background: #FFEFED;
				border-radius: 20px 20px 20px 20px;
				font-size: 11px;
				line-height: 26px;
				color: #ED0A23;
				white-space: nowrap;
				padding: 0 10px;
				text-align: center;
				user-select: none;
			}

			.input-area-code.disabled {
				background: #f0f0f0;
				color: #999;
				cursor: not-allowed;
			}

			.register-btn:disabled {
				opacity: 0.6;
				cursor: not-allowed;
			}

			.error-tip {
				color: #ED0A23;
				font-size: 12px;
				margin-top: 5px;
				text-align: center;
				min-height: 18px;
			}

			.success-tip {
				color: #52c41a;
				font-size: 12px;
				margin-top: 5px;
				text-align: center;
				min-height: 18px;
			}

			/* 弹窗提示样式 */
			.tip-modal {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.5);
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 9999;
				opacity: 0;
				visibility: hidden;
				transition: opacity 0.3s ease, visibility 0.3s ease;
			}

			.tip-modal.show {
				opacity: 1;
				visibility: visible;
			}

			.tip-modal-content {
				background: #fff;
				border-radius: 12px;
				padding: 30px 40px;
				min-width: 280px;
				max-width: 400px;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
				transform: scale(0.8);
				transition: transform 0.3s ease;
				text-align: center;
			}

			.tip-modal-content.has-qrcode {
				max-width: 320px;
			}

			.tip-modal.show .tip-modal-content {
				transform: scale(1);
			}

			.tip-modal-icon {
				width: 60px;
				height: 60px;
				margin: 0 auto 20px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32px;
				font-weight: bold;
			}

			.tip-modal-icon.error {
				background: #FFEFED;
				color: #ED0A23;
			}

			.tip-modal-icon.success {
				background: #F0F9FF;
				color: #52c41a;
			}

			.tip-modal-message {
				font-size: 16px;
				color: #333;
				line-height: 1.5;
				margin-bottom: 20px;
			}

			.tip-modal-btn {
				padding: 10px 30px;
				background: linear-gradient(90deg, #FF597D 0%, #FF7055 100%);
				color: #fff;
				border: none;
				border-radius: 20px;
				cursor: pointer;
				font-size: 14px;
				transition: all 0.3s ease;
			}

			.tip-modal-btn:hover {
				background: linear-gradient(90deg, #dc4d6e 0%, #de604a 100%);
				transform: translateY(-2px);
				box-shadow: 0 4px 12px rgba(255, 89, 125, 0.3);
			}

			.tip-modal-qrcode {
				width: 200px;
				height: 200px;
				background-color: #FFF;
				margin: 15px auto 20px;
				border-radius: 10px;
				display: block;
			}

			/* 右侧悬浮二维码样式 */
			.floating-qrcode {
				position: fixed;
				right: 20px;
				top: 50%;
				width: 230px;
				background: #fff;
				border-radius: 12px;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
				padding: 15px;
				z-index: 9998;
				opacity: 0;
				visibility: hidden;
				transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
				transform: translateY(-50%) translateX(100px);
			}

			.floating-qrcode.show {
				opacity: 1;
				visibility: visible;
				transform: translateY(-50%) translateX(0);
			}

			.floating-qrcode-title {
				text-align: center;
				font-size: 16px;
				font-weight: bold;
				color: #333;
				margin-bottom: 10px;
			}

			.floating-qrcode-img {
				width: 200px;
				height: 200px;
				background-color: #FFF;
				border-radius: 8px;
				display: block;
			}

			.floating-qrcode-close {
				position: absolute;
				top: 5px;
				right: 10px;
				width: 24px;
				height: 24px;
				line-height: 24px;
				text-align: center;
				font-size: 20px;
				color: #999;
				cursor: pointer;
				border-radius: 50%;
				transition: all 0.3s ease;
			}

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

			.register-btn {
				display: block;
				width: 280px;
				margin: 0 auto;
				padding: 8px;
				background: linear-gradient(90deg, #FF597D 0%, #FF7055 100%);
				color: #fff;
				border: none;
				border-radius: 20px 20px 20px 20px;
				cursor: pointer;
				height: 40px;
				border: transparent;
				box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
			}

			.register-btn:hover {
				background: rgb(2, 0, 36);
				background: linear-gradient(90deg, #dc4d6e 0%, #de604a 100%);
			}

			.register-btn:active {
				transform: translate(0em, 0.2em);
			}

			.service-section-wrap {
				background: linear-gradient(to right, #E0F2FF 0%, #FFE3DE 100%);
			}

			.service-section {
				width: 1400px;
				margin: 0 auto;
				padding: 40px 0 0;
			}

			.service-title {
				margin-bottom: 10px;
				font-size: 36px;
			}

			.service-grid {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 40px;
				margin-top: 20px;
			}

			.service-item {
				background-color: #fff;
				border-radius: 20px;
				overflow: hidden;
				height: 500px;
				position: relative;
			}

			/* 卡片样式 - 来自 Uiverse.io */
			.card {
				width: 100%;
				height: 500px;
				transition: all 0.4s;
				border-radius: 10px;
				font-size: 30px;
				font-weight: 900;
			}


			.first-content {
				height: 100%;
				width: 100%;
				transition: all 0.4s;
				display: flex;
				justify-content: center;
				align-items: center;
				opacity: 1;
				border-radius: 15px;
			}


			.second-content {
				height: 0%;
				width: 100%;
				opacity: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 15px;
				transition: all 0.4s;
				font-size: 0px;
				transform: rotate(90deg) scale(-1);
			}



			.service-img {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 500px;
				object-fit: cover;
			}

			.service-desc {
				padding: 10px;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				color: #FFF;
				background: linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, #000000 100%);
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
			}

			/* 服务描述左侧区域样式在.service-desc中定义 */

			.service-desc-left h3 {
				font-size: 20px;
				margin-bottom: 6px;
			}

			.service-desc-right {
				width: 76px;
				height: 76px;
				padding: 3px;
				background-color: #FFF;
			}

			.service-desc-left p {
				font-size: 12px;
			}

			.price {
				margin-top: 6px;
			}

			.price-one {
				color: #FD2D39;
				font-size: 14px;
			}

			.price-two {
				color: #FD2D39;
				font-size: 20px;
			}

			.price-three {
				font-size: 12px;
				margin-left: 6px;
			}

			.guarantee-section-warp {
				padding-top: 40px;
				background: linear-gradient(to right, #E0F2FF 0%, #FFE3DE 100%);
			}

			.guarantee-section {
				width: 1400px;
				margin: 0 auto;
				padding: 20px 0;
			}

			.guarantee-section-title {
				margin-bottom: 10px;
				font-size: 36px;
			}

			.guarantee-content {
				display: flex;
				align-items: center;
				flex-direction: column;
				background-color: #f5f5f5;
				border-radius: 8px;
				overflow: hidden;
				margin-top: 30px;
			}

			.guarantee-img {
				width: 1400px;
				height: 787px;
				object-fit: cover;
			}

			.guarantee-text {
				padding: 25px 60px;
				width: 1400px;
				background: linear-gradient(90deg, #FF597D 0%, #FF7055 100%);
				border-radius: 0px 0px 20px 20px;
				color: #FFF;
				letter-spacing: 5px;
			}

			.question-section-wrap {
				padding-top: 20px;
				padding-bottom: 100px;
				background: linear-gradient(to right, #E0F2FF 0%, #FFE3DE 100%);
			}

			.question-section {
				width: 1400px;
				margin: 0 auto;
				padding: 20px 0;
			}

			.question-title {
				margin-bottom: 10px;
				font-size: 36px;
			}

			.question-content {
				display: flex;
				gap: 20px;
				margin-top: 10px;
			}

			.question-img {
				flex: 1;
				height: 200px;
				background-color: #ccc;
			}

			.question-answers {
				flex: 2;
			}

			.answer-item {
				margin-bottom: 10px;
				padding: 10px;
				background-color: #fff;
				border-radius: 4px;
			}

			.ask-btn {
				display: block;
				width: 200px;
				margin: 20px auto;
				padding: 10px;
				background-color: #ff9966;
				color: #fff;
				border: none;
				border-radius: 4px;
				cursor: pointer;
			}

			.footer {
				width: 100%;
				background: linear-gradient(90deg, #FF597D 0%, #FF7055 100%);
				border-radius: 0px 0px 0px 0px;
				opacity: 1;
				box-sizing: border-box;
				position: relative;
				padding-bottom: 40px;
			}

			.footer-main {
				width: 1400px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
			}

			.footer1 {
				width: 300px;
				padding: 0 30px 0 0;
				box-sizing: border-box;
			}

			.footer1-text1 {
				height: 18px;
				font-size: 18px;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 18px;
				margin-top: 44px;
			}

			.footer1-text2 {
				margin-top: 20px;
				font-size: 14px;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 20px;
			}

			.footer1-text3 {
				margin-top: 10px;
				font-size: 14px;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 20px;
			}

			.footer1-text4 {
				margin-top: 13px;
				width: 150px;
				height: 28px;
				background: #FFFFFF;
				border-radius: 5px 5px 5px 5px;
				font-size: 12px;
				font-weight: normal;
				color: #FA0135;
				line-height: 28px;
				text-align: center;
			}

			.footer4 {
				border-top: 1px solid #FFFFFF;
				box-sizing: border-box;
				text-align: start;
				width: 1400px;
				margin: 0 auto;
			}

			.footer4-text1 {
				height: 18px;
				font-size: 18px;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 18px;
				margin-top: 44px;
			}

			.footer4-text2 {
				font-size: 14px;
				font-weight: normal;
				line-height: 16px;
			}

			.footer4-text2 a {
				color: #FFFFFF !important;
			}

			.footer4-text2 a:hover {
				color: blue !important;
			}


			.footer2-text1 {
				height: 18px;
				font-size: 18px;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 18px;
				margin-top: 44px;
			}

			.footer2-text2 {
				margin-top: 20px;
				width: 509px;
				height: 80px;
				font-size: 14px;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 20px;
			}

			.footer3 {
				padding: 0 0 0 60px;
				box-sizing: border-box;
			}

			.footer3-text1 {
				height: 18px;
				font-size: 18px;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 18px;
				margin-top: 44px;
			}

			.footer3-code {
				display: flex;
				align-items: center;
				margin-top: 20px;
			}

			.footer3-code-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 30px;
			}

			.footer3-code-item img {
				width: 70px;
				height: 70px;
			}

			.footer3-code-item span {
				height: 20px;
				font-size: 14px;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 20px;
				margin-top: 8px;
			}

			.banquanInfo {
				font-size: 12px;
				margin-top: 20px;
			}

			.banquan {
				width: 100%;
				background: linear-gradient(90deg, #FF597D 0%, #FF7055 100%);
				border-radius: 0px 0px 0px 0px;
				font-size: 14px;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 50px;
				text-align: center;
			}

			.banquan span {
				color: white;
				margin-right: 10px;
			}

			.banquan img {
				vertical-align: middle;
			}

			.banquan a {
				color: white;
				text-decoration: none;

			}

			.banquan a:hover {
				color: blue;
			}


			/* 聊天界面容器 */
			.chat-container {
				width: 1400px;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				border-radius: 16px;
				overflow: hidden;
			}

			/* 聊天内容区域 */
			.chat-messages {
				flex: 1;
				overflow-y: auto;
				display: flex;
				flex-direction: column;
				gap: 1.5rem;
			}

			/* 消息气泡 */
			.message-bubble {
				max-width: 70%;
				padding: 1rem 1.5rem;
				border-radius: 18px;
				position: relative;
				word-wrap: break-word;
				animation: fadeIn 0.3s ease-out;
			}

			/* 机器人消息 */
			.bot-message {
				background-color: #f9f0f0;
				border-bottom-left-radius: 4px;
				align-self: flex-start;
			}

			/* 用户消息 */
			.user-message {
				background: linear-gradient(135deg, #ff9e9e 0%, #ff7a7a 100%);
				color: white;
				border-bottom-right-radius: 4px;
				align-self: flex-end;
			}

			/* 输入区域 */
			.chat-input-area {
				padding: 30px 2rem;
				background: linear-gradient(90deg, #FF597D 0%, #FF7055 100%);
			}

			/* 渐变按钮 */
			.gradient-button {
				background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
				color: white;
				transition: all 0.3s ease;
				border: none;
				padding: 0.75rem 2rem;
				border-radius: 50px;
				font-weight: 600;
				cursor: pointer;
				box-shadow: 0 4px 15px rgba(255, 122, 122, 0.2);
				color: #000;
				height: 40px;
				position: absolute;
				right: 20px;
				bottom: 20px;
			}

			.gradient-button:hover {
				transform: translateY(-2px);
			}

			.gradient-button:active {
				transform: translateY(0);
			}

			/* 输入框样式 */
			.chat-input {
				border: 1px solid #f0e6e6;
				border-radius: 5px;
				padding: 0.75rem 150px 0.75rem 1rem;
				outline: none;
				transition: all 0.3s ease;
				flex: 1;
				background: rgba(255, 255, 255, 0.1);
				min-height: 100px;
				color: #FFF;
			}

			.chat-input:focus {
				border-color: #ff9e9e;
				box-shadow: 0 0 0 3px rgba(255, 158, 158, 0.1);
			}

			/* 图标样式 */
			.message-icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 32px;
				height: 32px;
				border-radius: 50%;
				background-color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			}

			.bot-message .message-icon {
				left: -40px;
				color: #ff7a7a;
			}

			.user-message .message-icon {
				right: -40px;
				color: #666;
			}

			/* 动画效果 */
			@keyframes fadeIn {
				from {
					opacity: 0;
					transform: translateY(10px);
				}

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

			/* 滚动条样式 */
			.chat-messages::-webkit-scrollbar {
				width: 6px;
			}

			.chat-messages::-webkit-scrollbar-track {
				background: #fcf8f8;
			}

			.chat-messages::-webkit-scrollbar-thumb {
				background: #ffc0c0;
				border-radius: 3px;
			}

			.chat-messages::-webkit-scrollbar-thumb:hover {
				background: #ff9e9e;
			}

			.chatContainer {
				height: 566px;
				overflow-y: auto;
				padding: 0 30px;
			}

			/* 常见问题卡片 */
			.mycontent {
				background: #FFF !important;
				color: #000 !important;
				border-radius: 20px 0px 20px 20px !important;
				margin-left: 100px !important;
				margin-right: 0 !important;
			}

			.faq-card {
				background: linear-gradient(90deg, #FF597D 0%, #FF7055 100%);
				border-radius: 0px 20px 20px 20px;
				padding: 20px 30px;
				margin-bottom: 1rem;
				transition: all 0.3s ease;
				cursor: pointer;
				color: #FFF;
				margin-right: 100px;
			}

			.faq-card:hover {
				transform: translateY(-2px);
				box-shadow: 0 4px 15px rgba(220, 180, 180, 0.1);
			}

			.flex {
				display: flex;
			}

			.loading {
				display: flex;
				gap: 0.5rem;
				padding: 0.5rem;
				color: #fff;
			}

			.loading span {
				width: 8px;
				height: 8px;
				background: currentColor;
				border-radius: 50%;
				animation: bounce 1.4s infinite ease-in-out both;
			}

			.loading span:nth-child(1) {
				animation-delay: -0.32s;
			}

			.loading span:nth-child(2) {
				animation-delay: -0.16s;
			}

			@keyframes bounce {

				0%,
				80%,
				100% {
					transform: scale(0);
				}

				40% {
					transform: scale(1);
				}
			}

			.top-banner {
				position: sticky;
				top: 0px;
				left: 0;
				right: 0;
				z-index: 10;
				backdrop-filter: blur(10px);
			}

			/* 滚动触发动画核心样式 */
			.animate-on-scroll {
				opacity: 0;
				transform: translateY(30px);
				transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
					transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
				will-change: opacity, transform;
			}

			.animate-on-scroll.animated {
				opacity: 1;
				transform: translateY(0);
			}

			/* 延迟序列动画 */
			.delay-1 {
				transition-delay: 0.1s;
			}

			.delay-2 {
				transition-delay: 0.2s;
			}

			.delay-3 {
				transition-delay: 0.3s;
			}

			.delay-4 {
				transition-delay: 0.4s;
			}

			.delay-5 {
				transition-delay: 0.5s;
			}

			.delay-6 {
				transition-delay: 0.6s;
			}

			.delay-7 {
				transition-delay: 0.7s;
			}

			.delay-8 {
				transition-delay: 0.8s;
			}

			/* 微交互效果增强 */
			.link-a {
				transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
			}

			.service-item {
				transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
					box-shadow 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
			}

			.service-item:hover {
				transform: translateY(-8px);
				box-shadow: 0 12px 30px rgba(184, 163, 123, 0.2);
			}

			.register-btn,
			.gradient-button {
				transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
			}

			/* 加载动画 */
			@keyframes fadeIn {
				from {
					opacity: 0;
				}

				to {
					opacity: 1;
				}
			}

			/* 工具提示样式 - 来自 Uiverse.io */
			/* 容器样式 */
			.tooltip-container {
				position: relative;
				overflow: visible;
			}

			/* 按钮样式在.link-a中定义 */

			.text {
				font-size: 18px;
				font-weight: 600;
				margin-right: 12px;
				white-space: nowrap;
				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
				transition: letter-spacing 0.3s ease;
			}


			.share-icon {
				fill: white;
				transition:
					transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
					fill 0.3s ease;
				filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
			}

			/* Tooltip Styles */
			.tooltip-content {
				position: absolute;
				top: 150%;
				left: 50%;
				transform: translateX(-50%) scale(0.8);
				background: white;
				border-radius: 15px;
				padding: 22px;
				opacity: 0;
				visibility: hidden;
				transition:
					opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
					transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
					visibility 0.5s ease;
				z-index: 100;
				pointer-events: none;
			}

			.tooltip-container:hover .tooltip-content {
				opacity: 1;
				visibility: visible;
				transform: translateX(-50%) scale(1);
				pointer-events: auto;
			}

			.loginCodeWrap.show {
				opacity: 1;
				visibility: visible;
				transform: translateX(-50%) scale(1);
				pointer-events: auto;
			}

			/* Social Icons Styles */
			.social-icons {
				display: flex;
				justify-content: space-between;
				gap: 12px;
			}

			.social-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 48px;
				height: 48px;
				border-radius: 50%;
				background: #f0f0f0;
				transition:
					transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
					background 0.3s ease,
					box-shadow 0.4s ease;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
				position: relative;
				overflow: hidden;
			}

			.social-icon::before {
				content: "";
				position: absolute;
				inset: 0;
				background: radial-gradient(circle at center,
						rgba(255, 255, 255, 0.8) 0%,
						rgba(255, 255, 255, 0) 70%);
				opacity: 0;
				transition: opacity 0.3s ease;
			}

			.social-icon:hover::before {
				opacity: 1;
			}

			.social-icon svg {
				width: 24px;
				height: 24px;
				fill: #333;
				transition:
					transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
					fill 0.3s ease;
				z-index: 1;
			}

			.social-icon:hover {
				transform: translateY(-5px) scale(1.1);
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
			}

			.social-icon:active {
				transform: translateY(-2px) scale(1.05);
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
			}

			.social-icon:hover svg {
				transform: scale(1.2);
				fill: white;
			}

			.social-icon.twitter:hover {
				background: linear-gradient(135deg, #1da1f2, #1a91da);
			}

			.social-icon.facebook:hover {
				background: linear-gradient(135deg, #1877f2, #165ed0);
			}

			.social-icon.linkedin:hover {
				background: linear-gradient(135deg, #0077b5, #005e94);
			}

			/* Animation for Pulse Effect */
			@keyframes pulse {
				0% {
					box-shadow: 0 0 0 0 rgba(110, 142, 251, 0.4);
				}

				70% {
					box-shadow: 0 0 0 20px rgba(110, 142, 251, 0);
				}

				100% {
					box-shadow: 0 0 0 0 rgba(110, 142, 251, 0);
				}
			}


			/* Hover Ripple Effect */
			@keyframes ripple {
				0% {
					transform: scale(0);
					opacity: 1;
				}

				100% {
					transform: scale(4);
					opacity: 0;
				}
			}



			/* Tooltip Arrow */
			.tooltip-content::before {
				content: "";
				position: absolute;
				top: -10px;
				left: 50%;
				transform: translateX(-50%);
				border-width: 0 10px 10px 10px;
				border-style: solid;
				border-color: transparent transparent rgba(255, 255, 255, 0.9) transparent;
				filter: drop-shadow(0 -3px 3px rgba(0, 0, 0, 0.1));
			}

			/* 无障碍访问支持 */


			/* Responsive Design */
			@media (max-width: 768px) {

				.text {
					font-size: 16px;
				}

				.tooltip-content {
					width: 240px;
					padding: 18px;
				}

				.social-icon {
					width: 44px;
					height: 44px;
				}

				.social-icon svg {
					width: 20px;
					height: 20px;
				}
			}

			@media (max-width: 480px) {

				.text {
					font-size: 14px;
				}

				.tooltip-content {
					width: 200px;
					padding: 15px;
				}

				.social-icon {
					width: 40px;
					height: 40px;
				}

				.social-icon svg {
					width: 18px;
					height: 18px;
				}
			}

			/* Dark Mode Support */
			@media (prefers-color-scheme: dark) {
				.tooltip-content {
					background: rgba(30, 30, 30, 0.9);
					color: white;
				}

				.tooltip-content::before {
					border-color: transparent transparent rgba(30, 30, 30, 0.9) transparent;
				}

				.social-icon {
					background: #2a2a2a;
				}

				.social-icon svg {
					fill: #e0e0e0;
				}
			}

			/* 打印样式 - 打印时工具提示会自动隐藏 */

			/* Reduced Motion */
			@media (prefers-reduced-motion: reduce) {

				.share-icon,
				.social-icon,
				.tooltip-content {
					transition: none;
				}

			}

			/* Custom Scrollbar for Tooltip Content */
			.tooltip-content::-webkit-scrollbar {
				width: 6px;
			}

			.tooltip-content::-webkit-scrollbar-track {
				background: #f1f1f1;
				border-radius: 3px;
			}

			.tooltip-content::-webkit-scrollbar-thumb {
				background: #888;
				border-radius: 3px;
			}

			.tooltip-content::-webkit-scrollbar-thumb:hover {
				background: #555;
			}