/* ========================================
   字轻 - 字体子集化工具样式表
   按照实际HTML结构从上到下、从外到内排列
   ======================================== */

/* ========================================
   1. 基础样式重置
   ======================================== */
/* 全局重置 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "PingFang SC";
}

/* 页面主体 */
body {
	background-color: #ffffff;
	color: #333333;
	line-height: 1.5;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* 链接样式 */
a {
	text-decoration: none;
	color: inherit;
	transition: all 0.3s ease;
}

/* 列表样式 */
ul {
	list-style: none;
}

/* 按钮样式 */
button {
	cursor: pointer;
	border: none;
	background: transparent;
	transition: all 0.3s ease;
}

/* ========================================
   2. 导航栏区域 (.tianyu-font-nav)
   ======================================== */
/* 导航栏主容器 */
.tianyu-font-nav {
	position: fixed;
	padding: 0 30px;
	top: 0;
	left: 0;
	width: 100%;
	height: 64px;
	display: flex;
	background: transparent;
	border-bottom: 1px solid transparent;
	z-index: 999;
	transition: all 0.3s ease;
}

/* 导航栏滚动状态 */
.tianyu-font-nav.tianyu-font-scrolled {
	background: #fff;
	box-shadow: 0 1px 24px 0 rgba(0, 85, 255, .08);
	border-bottom: 1px solid rgba(0, 0, 0, .06);
}

/* 导航栏内容包装器 (.tianyu-font-nav > .tianyu-font-wrap) */
.tianyu-font-wrap {
	max-width: 1400px;
	margin: 0 auto;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 64px;
	display: flex;
}

/* 导航栏左侧区域 (.tianyu-font-wrap > .tianyu-font-left) */
.tianyu-font-left {
	display: flex;
	align-items: center;
}

/* Logo容器 (.tianyu-font-left > .tianyu-font-logo) */
.tianyu-font-logo {
	display: flex;
	align-items: center;
	width: 160px;
	height: 30px;
	transition: opacity 0.3s ease;
}

/* Logo悬停效果 */
.tianyu-font-logo:hover {
	opacity: 0.8;
}

/* Logo图片 (.tianyu-font-logo > .tianyu-font-logo-img) */
.tianyu-font-logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 导航栏右侧区域 (.tianyu-font-wrap > .tianyu-font-right) */
.tianyu-font-right {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1;
	margin-left: 56px;
	min-width: 0;
}

/* 导航菜单容器 (.tianyu-font-right > .tianyu-font-menu) */
.tianyu-font-menu {
	display: flex;
	height: 64px;
	align-items: center;
}

/* 菜单项容器 (.tianyu-font-menu > div) */
.tianyu-font-menu div {
	padding: 0 18px;
	position: relative;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}

/* 菜单链接 (.tianyu-font-menu div > a) */
.tianyu-font-menu span {
	font-size: 16px;
	color: #28292e;
	font-weight: 500;
	transition: color 0.3s ease;
	position: relative;
	display: inline-block;
	cursor: pointer;
}

/* 菜单下划线效果 (.tianyu-font-menu span::after) */
.tianyu-font-menu span::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -8px;
	background: #05f;
	width: 80%;
	height: 4px;
	border-radius: 4px;
	opacity: 0;
	transition: opacity 0.3s ease;
	transform: translateX(-50%);
}

/* 菜单悬停文字颜色 */
.tianyu-font-menu div:hover span {
	color: #05f;
}

/* 菜单悬停下划线显示 */
.tianyu-font-menu div:hover span::after {
	opacity: 1;
}

/* 联系方式区域 (.tianyu-font-right > .tianyu-font-contact) */
.tianyu-font-contact {
	display: flex;
	align-items: center;
	position: relative;
}

/* 联系方式文字 (.tianyu-font-contact > span) */
.tianyu-font-contact span {
	font-size: 16px;
	color: #28292e;
	transition: color 0.3s ease;
	cursor: pointer;
}

/* 联系方式悬停效果 */
.tianyu-font-contact span:hover {
	color: #111111;
}

/* 联系方式悬停卡片 (.tianyu-font-contact-card) */
.tianyu-font-contact-card {
	position: absolute;
	top: 100%;
	right: 0;
	width: 180px;
	height: 180px;
	background: url('/img/nav_contact.png') center/cover no-repeat;
	border-radius: 12px;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s ease;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	margin-top: 8px;
}

/* 悬停时显示卡片 */
.tianyu-font-contact:hover .tianyu-font-contact-card {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* 二维码图片 (.tianyu-font-qr-code) */
.tianyu-font-qr-code {
	width: 120px;
	height: 120px;
	border-radius: 8px;
	background: #fff;
	padding: 8px;
}

/* 移动端菜单按钮 (.tianyu-font-wrap > .tianyu-font-mobile) */
.tianyu-font-mobile {
	display: none;
	font-size: 20px;
	color: #111111;
	transition: color 0.3s ease;
}

/* ========================================
   3. Hero区域 (.tianyu-font-hero)
   ======================================== */
/* Hero区域主容器 */
.tianyu-font-hero {
	padding: 200px 30px 116px;
	background-color: #fafafa;
	transition: background-color 0.3s ease;
	background: url(img/bg_banner.webp) 60%/auto 700px;
}

/* Hero内容容器 (.tianyu-font-hero > .tianyu-font-container) */
.tianyu-font-container {
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
}

/* Hero内容区域 (.tianyu-font-container > .tianyu-font-content) */
.tianyu-font-content {
	flex: 1;
}

/* Hero主标题 (.tianyu-font-content > .tianyu-font-title) */
.tianyu-font-title {
	font-size: 80px;
	font-weight: 600;
	color: #111111;
	line-height: 1.2;
	margin-bottom: 24px;
	transition: color 0.3s ease;
	background: linear-gradient(90deg,#2051ff 0% ,#6ae2ff 50%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Hero描述文字 (.tianyu-font-content > .tianyu-font-desc) */
.tianyu-font-desc {
	font-size: 20px;
	color: #091221;
	margin-bottom: 30px;
	font-weight: 500;
	width: 628px;
	transition: color 0.3s ease;
	line-height: 1.6;
}

/* ========================================
   4. 统计数据区域 (.tianyu-font-content > .tianyu-font-stats)
   ======================================== */
/* 统计数据容器 */
.tianyu-font-stats {
	display: flex;
	align-items: center;
	gap: 35px;
	margin-bottom: 60px;
}

/* 单个统计项 (.tianyu-font-stats > .tianyu-font-stat) */
.tianyu-font-stat {
	display: flex;
	flex-direction: column;
}

/* 统计数字 (.tianyu-font-stat > .tianyu-font-num) */
.tianyu-font-num {
	font-family: DingTalk JinBuTi;
	font-weight: 400;
	font-size: 24px;
	color: #091221;
	line-height: 26px;
	margin-bottom: 8px;
}

/* 统计文字说明 (.tianyu-font-stat > .tianyu-font-text) */
.tianyu-font-text {
	font-weight: 500;
	font-size: 16px;
	color: #091221;
	line-height: 19px;
}

/* ========================================
   5. 按钮操作区域 (.tianyu-font-content > .tianyu-font-actions)
   ======================================== */
/* 按钮组容器 */
.tianyu-font-actions {
	display: flex;
	gap: 20px;
}

/* 主要按钮 (.tianyu-font-actions > .tianyu-font-btn) */
.tianyu-font-btn {
	font-size: 16px;
	background: linear-gradient(92deg,#008eff,#0038ff 52%,#05f);
	color: #fff;
	padding: 13px 35px;
	border-radius: 32px;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* 按钮箭头 (.tianyu-font-btn > .tianyu-font-arrow) */
.tianyu-font-arrow {
	font-size: 16px;
	transition: transform 0.3s ease;
}

/* 按钮悬停箭头右移效果 */
.tianyu-font-btn:hover .tianyu-font-arrow {
	transform: translateX(4px);
}

/* ========================================
   7. 核心功能区域 (.tianyu-font-features)
   ======================================== */
/* 核心功能区域主容器 */
.tianyu-font-features {
	padding: 80px 30px;
	background: url(img/advantage2880.webp) center/cover no-repeat;
	background-color: #f8f9fa;
}

/* 功能区域标题 (.tianyu-font-features .tianyu-font-section-title) */
.tianyu-font-section-title {
	font-size: 52px;
	font-weight: 600;
	color: #111111;
	text-align: center;
	margin-bottom: 16px;
	transition: color 0.3s ease;
}

/* 功能区域副标题 (.tianyu-font-section-subtitle) */
.tianyu-font-section-subtitle {
	font-size: 20px;
	font-weight: 400;
	color: #666;
	text-align: center;
	margin-bottom: 50px;
	line-height: 1.5;
}

/* 卡片容器 (.tianyu-font-features .tianyu-font-cards) */
.tianyu-font-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

/* 单个卡片 (.tianyu-font-cards .tianyu-font-card) */
.tianyu-font-card {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 32px rgba(56,123,255,.1);
	display: flex;
	flex-direction: column;
}

/* 卡片图片容器 (.tianyu-font-card .tianyu-font-card-img) */
.tianyu-font-card-img {
	width: 100%;
	height: 200px;
	overflow: hidden;
}

/* 卡片图片 (.tianyu-font-card-img img) */
.tianyu-font-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

/* 卡片内容区域 (.tianyu-font-card .tianyu-font-card-content) */
.tianyu-font-card-content {
	padding: 24px;
	background: #ffffff;
	border: 1.5px solid #EEEEEE;
	border-radius: 12px;
	margin: 10px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* 卡片标题 (.tianyu-font-card-content .tianyu-font-card-title) */
.tianyu-font-card-title {
	font-size: 22px;
	font-weight: 600;
	color: #0B1220;
	margin-bottom: 12px;
	transition: color 0.3s ease;
}

/* 卡片描述 (.tianyu-font-card-content .tianyu-font-card-desc) */
.tianyu-font-card-desc {
	font-size: 15px;
	color: #484e61;
	line-height: 1.5;
	transition: color 0.3s ease;
	flex: 1;
}

/* ========================================
   8. 适用场景区域 (.tianyu-font-scenarios)
   ======================================== */
/* 适用场景区域主容器 */
.tianyu-font-scenarios {
	padding: 80px 30px;
	background-color: #ffffff;
}

/* Tab标签容器 (.tianyu-font-scenarios .tianyu-font-tabs) */
.tianyu-font-tabs {
	width: fit-content;
	display: flex;
	align-items: center;
	padding: 8px;
	background: linear-gradient(0deg, hsla(0,0%,100%,.6) -54.35%, rgba(217,239,255,.6) 138.41%);
	border-radius: 20px;
	border: 1.5px solid #fff;
	margin: 0 auto 36px;
	backdrop-filter: blur(2px);
}

/* Tab项容器 (.tianyu-font-tabs .tianyu-font-tab-items) */
.tianyu-font-tab-items {
	margin-right: 10px;
}

/* 最后一个Tab项不需要右边距 */
.tianyu-font-tab-items:last-child {
	margin-right: 0;
}

/* Tab项 (.tianyu-font-tab-items .tianyu-font-tab-item) */
.tianyu-font-tab-item {
	padding: 12px 36px;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s ease;
}

/* Tab项悬停效果 */
.tianyu-font-tab-item:hover .tianyu-font-tab-name {
	color: #2268f0;
}

/* 激活状态的Tab项 */
.tianyu-font-tab-item.active {
	background: linear-gradient(168deg, #2f74fd, #072bff);
	box-shadow: 0 7px 13px 0 rgba(0,111,255,.2), inset 0 0 29px 0 #07f, inset 0 0 4px 0 hsla(0,0%,100%,.7);
}

/* 激活状态的Tab项文字 */
.tianyu-font-tab-item.active .tianyu-font-tab-name {
	color: #fff;
}

/* Tab项文字 (.tianyu-font-tab-item .tianyu-font-tab-name) */
.tianyu-font-tab-name {
	font-family: "PingFang SC";
	font-weight: 600;
	font-size: 18px;
	color: #28292e;
	line-height: 25px;
	transition: color 0.3s ease;
}

/* Tab内容区域 (.tianyu-font-tab-content) */
.tianyu-font-tab-content {
	margin-top: 40px;
}

/* Tab面板 (.tianyu-font-tab-panel) */
.tianyu-font-tab-panel {
	display: none;
	animation: fadeIn 0.3s ease-in-out;
}

/* 激活的Tab面板 */
.tianyu-font-tab-panel.active {
	display: block;
	padding: 0 100px;
}

/* 场景布局容器 (.tianyu-font-scenario-layout) */
.tianyu-font-scenario-layout {
	display: flex;
	align-items: center;
	gap: 60px;
	margin-top: 50px;
}

/* 场景文字内容 (.tianyu-font-scenario-text) */
.tianyu-font-scenario-text {
	flex: 1;
	max-width: 600px;
}

/* 场景标题 (.tianyu-font-scenario-title) */
.tianyu-font-scenario-title {
	font-size: 34px;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 20px;
	line-height: 1.2;
}

/* 场景描述 (.tianyu-font-scenario-desc) */
.tianyu-font-scenario-desc {
	font-size: 18px;
	font-weight: 500;
	color: #2f343f;
	line-height: 1.7;
	margin-bottom: 24px;
}

/* 优势列表容器 (.tianyu-font-scenario-advantages) */
.tianyu-font-scenario-advantages {
	margin-bottom: 40px;
}

/* 优势项 (.tianyu-font-advantage-item) */
.tianyu-font-advantage-item {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
	font-size: 16px;
}

/* 优势圆点 (.tianyu-font-advantage-icon) */
.tianyu-font-advantage-icon {
	width: 6px;
	height: 6px;
	background: #bcbcbc;
	border-radius: 50%;
	margin-right: 10px;
	flex-shrink: 0;
}

/* 优势文字 (.tianyu-font-advantage-text) */
.tianyu-font-advantage-text {
	color: #28292e;
}

/* 场景按钮 (.tianyu-font-scenario-btn) */
.tianyu-font-scenario-btn {
	font-size: 16px;
	background: #28292e;
	color: #fff;
	padding: 13px 35px;
	border-radius: 32px;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

/* 场景按钮悬停效果 */
.tianyu-font-scenario-btn:hover {
	text-decoration: none;
	color: #fff;
	opacity: .8
}

/* 场景按钮悬停箭头右移效果 */
.tianyu-font-scenario-btn:hover .tianyu-font-arrow {
	transform: translateX(4px);
}

/* 场景图片容器 (.tianyu-font-scenario-image) */
.tianyu-font-scenario-image {
	flex: 1;
	text-align: center;
}

/* 场景图片 */
.tianyu-font-scenario-image img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	/* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); */
}

/* 淡入动画 */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ========================================
   9. 功能支持区域 (.tianyu-font-support)
   ======================================== */
/* 功能支持区域主容器 */
.tianyu-font-support {
	padding: 80px 30px;
	    background: url(img/advantage2880.webp) center / cover no-repeat;
	background-color: #ffffff;
}

/* 功能支持背景容器 (.tianyu-font-support-container) */
.tianyu-font-support-container {
	background: url('/img/voice@2x.webp') center/cover no-repeat;
	border-radius: 20px;
	padding: 60px 40px;
	box-shadow: 0 4px 32px rgba(56, 123, 255, .1);
}

/* 功能支持卡片网格 (.tianyu-font-support-cards) */
.tianyu-font-support-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* 功能支持小卡片 (.tianyu-font-support-card) */
.tianyu-font-support-card {
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 100%);
	border-radius: 100px;
	padding: 10px 35px;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 功能支持小卡片悬停效果 */
.tianyu-font-support-card:hover {
	transform: translateY(-4px);
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.4) 100%);
}

/* 功能支持卡片标题 (.tianyu-font-support-card-title) */
.tianyu-font-support-card-title {
	font-size: 22px;
	font-weight: 600;
	background: linear-gradient(41.42979deg, #005be3, #2f82ff 61%, #51c0ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 10px;
	line-height: 1.2;
}

/* 功能支持卡片描述 (.tianyu-font-support-card-desc) */
.tianyu-font-support-card-desc {
	font-size: 15px;
	color: #28292e;
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ========================================
   10. 帮助中心区域 (.tianyu-font-help)
   ======================================== */
/* 帮助中心区域主容器 */
.tianyu-font-help {
	padding: 80px 30px;
	background-color: #f8f9fa;
}

/* FAQ列表容器 (.tianyu-font-faq-list) */
.tianyu-font-faq-list {
	max-width: 1200px;
	margin: 0 auto;
}

/* FAQ项 (.tianyu-font-faq-item) */
.tianyu-font-faq-item {
	background: #fff;
	border-radius: 12px;
	margin-bottom: 16px;
	    box-shadow: 0 4px 8px rgba(56, 123, 255, .05);
	transition: all 0.3s ease;
	overflow: hidden;
}

/* FAQ项悬停效果 */
.tianyu-font-faq-item:hover {
	    box-shadow: 0 4px 32px rgba(56, 123, 255, .1);
}

/* FAQ问题区域 (.tianyu-font-faq-question) */
.tianyu-font-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 28px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* FAQ问题悬停效果 */
.tianyu-font-faq-question:hover {
	background-color: #FEFEFE;
}

/* FAQ问题标题 */
.tianyu-font-faq-question h3 {
	font-size: 18px;
	font-weight: 600;
	color: #1a1a1a;
	margin: 0;
	line-height: 1.4;
}

/* FAQ展开图标 (.tianyu-font-faq-icon) */
.tianyu-font-faq-icon {
	font-size: 20px;
	color: #666;
	font-weight: 300;
	transition: all 0.3s ease;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* FAQ答案区域 (.tianyu-font-faq-answer) */
.tianyu-font-faq-answer {
	padding: 0 28px 24px;
	display: none;
}

/* FAQ答案文字 */
.tianyu-font-faq-answer p {
	font-size: 16px;
	color: #666;
	line-height: 1.6;
	margin: 0;
}

/* 展开状态的FAQ项 */
.tianyu-font-faq-item.active .tianyu-font-faq-icon {
	transform: rotate(45deg);
	color: #2268f0;
}

.tianyu-font-faq-item.active .tianyu-font-faq-answer {
	display: block;
	animation: fadeInDown 0.3s ease;
}

/* FAQ展开动画 */
@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ========================================
   11. 底部区域 (.tianyu-font-footer)
   ======================================== */
/* 底部主容器 */
.tianyu-font-footer {
	background-color: #000000;
	color: #fff;
	padding: 60px 0 0;
}

/* 底部顶部区域 (.tianyu-font-footer-top) */
.tianyu-font-footer-top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.2fr;
	gap: 60px;
	margin-bottom: 40px;
}

/* 底部品牌区域 (.tianyu-font-footer-brand) */
.tianyu-font-footer-brand {
	max-width: 300px;
}

/* 底部Logo (.tianyu-font-footer-logo) */
.tianyu-font-footer-logo {
	display: inline-block;
	text-decoration: none;
	margin-bottom: 16px;
}

.tianyu-font-footer-logo img {
	height: 40px;
	width: auto;
}

/* 底部品牌描述 */
.tianyu-font-footer-brand p {
	font-size: 14px;
	color: #969799;
	line-height: 1.6;
	margin: 0;
}

/* 底部链接区域 (.tianyu-font-footer-link) */
.tianyu-font-footer-link h4 {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 20px;
}

.tianyu-font-footer-link ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tianyu-font-footer-link li {
	margin-bottom: 12px;
}

.tianyu-font-footer-link a,
.tianyu-font-footer-link span {
	font-size: 14px;
	color: #969799;
	text-decoration: none;
	transition: color 0.3s ease;
	cursor: pointer;
}

.tianyu-font-footer-link a:hover,
.tianyu-font-footer-link span:hover {
	color: #667eea;
}

/* 底部联系区域 (.tianyu-font-footer-contact) */
.tianyu-font-footer-contact h4 {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 20px;
}

.tianyu-font-footer-contact p {
	font-size: 14px;
	color: #969799;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
}

.tianyu-font-footer-contact i {
	margin-right: 8px;
	width: 16px;
}

/* 底部底部区域 (.tianyu-font-footer-bottom) */
.tianyu-font-footer-bottom {
	border-top: 1px solid #333;
	padding: 24px 0;
	text-align: center;
}

.tianyu-font-footer-bottom p {
	font-size: 14px;
	color: #666;
	margin: 0;
}

.tianyu-font-footer-bottom a {
	color: #999;
	text-decoration: none;
	transition: color 0.3s ease;
}

.tianyu-font-footer-bottom a:hover {
	color: #667eea;
}

/* ========================================
   6. 响应式适配 - 移动端样式
   ======================================== */

/* 平板设备 (1024px及以下) */
@media (max-width: 1024px) {
	/* Hero区域标题适配 */
	.tianyu-font-title {
		font-size: 60px;
	}
	
	/* Hero描述文字适配 */
	.tianyu-font-desc {
		width: 100%;
	}
	
	/* 核心功能区域适配 */
	.tianyu-font-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	
	/* 适用场景内容区域适配 */
	.tianyu-font-scenario-layout {
		flex-direction: column;
		gap: 40px;
		margin-top: 40px;
	}
	
	.tianyu-font-scenario-title {
		font-size: 28px;
	}
	
	.tianyu-font-scenario-desc {
		font-size: 16px;
	}
	
	/* 功能支持区域适配 */
	.tianyu-font-support-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	
	/* 底部区域适配 */
	.tianyu-font-footer-top {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}
}

/* 中等屏幕 (900px及以下) - 防止菜单挤压 */
@media (max-width: 900px) {
	/* 隐藏联系方式，为菜单留出空间 */
	.tianyu-font-contact {
		display: none;
	}
	
	/* 右侧区域改为左对齐 */
	.tianyu-font-right {
		justify-content: flex-start;
	}
}

/* 移动设备 (768px及以下) */
        @media (max-width: 768px) {
	/* 导航栏适配 */
	.tianyu-font-nav {
		padding: 0 20px;
	}
	
	/* 导航栏右侧间距调整 */
	.tianyu-font-right {
		margin-left: 20px;
	}
	
	/* 隐藏桌面端菜单 */
	.tianyu-font-menu {
		display: none;
	}
	
	/* 隐藏联系方式 */
	.tianyu-font-contact {
		display: none;
	}
	
	/* 显示移动端菜单按钮 */
	.tianyu-font-mobile {
		display: block;
	}
	
	/* 右侧区域调整为右对齐 */
	.tianyu-font-right {
		justify-content: flex-end;
	}
	
	/* Hero区域适配 */
	.tianyu-font-hero {
		padding: 120px 20px 80px;
		text-align: center;
	}
	
	/* Hero标题适配 */
	.tianyu-font-title {
		font-size: 42px;
		margin-bottom: 20px;
	}
	
	/* Hero描述适配 */
	.tianyu-font-desc {
		font-size: 18px;
		width: 100%;
		margin-bottom: 25px;
	}
	
	/* 统计数据适配 */
	.tianyu-font-stats {
		justify-content: center;
		gap: 20px;
		margin-bottom: 40px;
	}
	
	/* 统计项适配 */
	.tianyu-font-stat {
		align-items: center;
		text-align: center;
	}
	
	/* 背景图适配 */
	.tianyu-font-hero {
		background: url(img/bg_banner.webp) 18%/2880px 840px;
	}
	
	/* 统计数字适配 */
	.tianyu-font-num {
		font-size: 20px;
		line-height: 22px;
		margin-bottom: 6px;
	}
	
	/* 统计文字适配 */
	.tianyu-font-text {
		font-size: 14px;
		line-height: 16px;
	}
	
	/* 按钮组适配 */
	.tianyu-font-actions {
		justify-content: center;
	}
	
	/* 核心功能区域适配 */
	.tianyu-font-features {
		padding: 50px 20px;
	}
	
	.tianyu-font-section-title {
		font-size: 32px;
		margin-bottom: 12px;
	}
	
	.tianyu-font-section-subtitle {
		font-size: 16px;
		margin-bottom: 30px;
	}
	
	/* 移动端轮播效果 */
	.tianyu-font-cards {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 20px;
		padding: 0 20px;
		-webkit-overflow-scrolling: touch;
	}
	
	.tianyu-font-card {
		flex: 0 0 280px;
		scroll-snap-align: start;
	}
	
	.tianyu-font-card-content {
		margin: 10px;
		padding: 18px;
	}
	
	/* 隐藏滚动条但保持功能 */
	.tianyu-font-cards::-webkit-scrollbar {
		display: none;
	}
	
	.tianyu-font-cards {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	
	.tianyu-font-card-img {
		height: 180px;
	}
	
	.tianyu-font-card-content {
		padding: 20px;
	}
	
	.tianyu-font-card-title {
		font-size: 16px;
		margin-bottom: 10px;
	}
	
	.tianyu-font-card-desc {
		font-size: 13px;
	}
	
	/* 适用场景区域适配 */
	.tianyu-font-scenarios {
		padding: 50px 20px;
	}
	
	.tianyu-font-tabs {
		flex-wrap: wrap;
		justify-content: center;
		padding: 6px;
		margin-bottom: 24px;
	}
	
	.tianyu-font-tab-items {
		margin: 4px;
	}
	
	.tianyu-font-tab-item {
		padding: 10px 20px;
	}
	
	.tianyu-font-tab-name {
		font-size: 16px;
		line-height: 22px;
	}
	
	/* 适用场景内容区域移动端适配 */
	.tianyu-font-tab-content {
		margin-top: 30px;
	}
	
	.tianyu-font-tab-panel.active {
		padding: 0 20px;
	}
	
	.tianyu-font-scenario-layout {
		flex-direction: column;
		gap: 30px;
		margin-top: 30px;
	}
	
	.tianyu-font-scenario-text {
		max-width: 100%;
	}
	
	.tianyu-font-scenario-title {
		font-size: 24px;
		margin-bottom: 16px;
	}
	
	.tianyu-font-scenario-desc {
		font-size: 16px;
		margin-bottom: 24px;
	}
	
	.tianyu-font-scenario-advantages {
		margin-bottom: 30px;
	}
	
	.tianyu-font-scenario-image {
		display: none;
	}
	
	/* 底部区域移动端适配 */
	.tianyu-font-footer {
		padding: 40px 0 0;
	}
	
	.tianyu-font-footer-top {
		grid-template-columns: 1fr;
		gap: 30px;
		margin-bottom: 30px;
	}
	
	.tianyu-font-footer-brand {
		max-width: 100%;
	}
	
	.tianyu-font-footer-logo {
		margin-bottom: 12px;
	}
	
	.tianyu-font-footer-logo img {
		height: 36px;
	}
	
	.tianyu-font-footer-link h4,
	.tianyu-font-footer-contact h4 {
		font-size: 15px;
		margin-bottom: 16px;
	}
	
	.tianyu-font-footer-bottom {
		padding: 20px 0;
	}
	
	.tianyu-font-footer-bottom p {
		font-size: 13px;
		line-height: 1.5;
	}
	
	/* 帮助中心区域移动端适配 */
	.tianyu-font-help {
		padding: 50px 20px;
	}
	
	.tianyu-font-faq-question {
		padding: 20px;
	}
	
	.tianyu-font-faq-question h3 {
		font-size: 16px;
	}
	
	.tianyu-font-faq-answer {
		padding: 0 20px 20px;
	}
	
	.tianyu-font-faq-answer p {
		font-size: 15px;
	}
	
	/* 功能支持区域移动端适配 */
	.tianyu-font-support {
		padding: 50px 20px;
	}
	
	.tianyu-font-support-container {
		padding: 40px 20px;
	}
	
	.tianyu-font-support-cards {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	
	.tianyu-font-support-card {
		padding: 20px 18px;
	}
	
	.tianyu-font-support-card-title {
		font-size: 18px;
		margin-bottom: 10px;
	}
	
	.tianyu-font-support-card-desc {
		font-size: 14px;
	}

	.tianyu-font-advantage-item {
		font-size: 15px;
		margin-bottom: 12px;
	}
	
	.tianyu-font-scenario-btn {
		padding: 8px 30px;
		font-size: 15px;
	}
	
	.tianyu-font-scenario-image {
		max-width: 100%;
	}
	
	/* 工具区域移动端适配 */
	.tianyu-font-tool {
		padding: 60px 20px;
	}
	
	.tianyu-font-tool .tianyu-font-title {
		font-size: 32px;
	}
	
	.tianyu-font-steps {
		flex-direction: column;
		width: 100%;
		gap: 30px;
		padding: 0 10px;
	}
	
	.tianyu-font-step:not(:last-child)::after {
		display: none;
	}
	
	.tianyu-font-step-id {
		font-size: 20px;
	}
	
	.tianyu-font-step-name {
		font-size: 18px;
	}
	
	.tianyu-font-step-desc {
		font-size: 14px;
	}
	
	.tianyu-font-upload-zone {
		padding: 40px 20px;
	}
	
	.tianyu-font-guide-content {
		padding: 30px 20px;
	}
	
	.tianyu-font-preset-grid {
		grid-template-columns: 1fr;
	}
	
	.tianyu-font-format-grid {
		gap: 10px;
	}
	
	.tianyu-font-format-label {
		padding: 14px 16px;
		gap: 12px;
	}
	
	.tianyu-font-format-icon {
		width: 32px;
		height: 32px;
	}
	
	.tianyu-font-format-info h5 {
		font-size: 14px;
		margin-bottom: 2px;
	}
	
	.tianyu-font-format-info p {
		font-size: 12px;
	}
	
	.tianyu-font-format-checkbox:checked + .tianyu-font-format-label::after {
		right: 16px;
		width: 18px;
		height: 18px;
		font-size: 10px;
	}
	
	.tianyu-font-tool-actions {
		flex-direction: column;
		align-items: center;
	}
	
	.tianyu-font-tool .tianyu-font-btn {
		width: 100%;
		max-width: 300px;
	}
	
	/* 标签切换移动端适配 */
	.tianyu-tool-tabs {
		flex-direction: column;
		gap: 20px;
		margin: 30px 0;
	}
	
	.tianyu-tool-tab-item {
		margin-right: 0;
		width: 200px;
		padding-bottom: 12px;
	}
	
	.tianyu-tool-tab-item span {
		font-size: 16px;
		margin-left: 12px;
	}
	
	.tianyu-tool-tab-icon {
		width: 32px;
		height: 32px;
	}
	
	.tianyu-tool-tab-placeholder {
		padding: 60px 20px;
	}
	
	.tianyu-tool-placeholder-icon {
		font-size: 3rem;
	}
	
	.tianyu-tool-tab-placeholder h3 {
		font-size: 20px;
	}
	
	.tianyu-font-download-item {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}
	
	.tianyu-font-download-info {
		flex-direction: column;
		text-align: center;
	}
}

/* ========================================
   字体工具区域 (.tianyu-font-tool)
   ======================================== */
/* 工具区域主容器 */
.tianyu-font-tool {
	padding: 80px 30px;
	background: linear-gradient(180deg, #e8f3ff, #ebf7ff);
	background-color: #f8f9fa;
}



/* 工具标题区域 */

.tianyu-font-tool .tianyu-font-title {
	font-size: 52px;
	font-weight: 600;
	color: #111111;
	margin-bottom: 16px;
	transition: color 0.3s ease;
}

/* 步骤指示器 */
.tianyu-font-steps {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	margin: 0 auto 30px;
	gap: 200px;
	padding: 0 20px;
}

.tianyu-font-step {
	display: flex;
	flex-direction: column;
	position: relative;
	text-align: center;
}

.tianyu-font-step:not(:last-child)::after {
	content: "";
	width: 120px;
	height: 10px;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAAYCAYAAABa3SD0AAAAAXNSR0IArs4c6QAAAixJREFUeF7t3M9PgmAcx3Fh5Lp1yoP/gFyqc9fO/bn9Ad5ayy1tyJC5OuRcbVkzmW4qPI0WDhJ4+KFzi7c3led5xouvHx8eGEqNFwIIIHAgAeVA4zIsAgj8AwFdP7tUlNrRdDrpjMfjed5dIoDyirE9AghsBHT94tp/43liUa97hmEYb3l4CKA8WmyLAAIRgSCAQh/altWzszIRQFml2A4BBLYEYgKoJoT7Opt9mFlOyQggigoBBAoLxAVQcErmOO+3shAigArT0xABBJIC6FdmJYSwB4PH5yQpAogaQgCBwgKSAPrpV1XVJ9N8MOMGIYAK09MQAQSyBFDaKRkBRA0hgEBhgawBFISQqi67lmVNggEJoML0NEQAgTwBFNLaXKpXZB1YVu9GxkwfUSE88Ej7zVSpPpIcPG/90mye9gmgP0JVKg7+XKIHH4/de6QFsaa59wQQAZQ6wSWQmc2Vmc0ltQ2ujBFABBAB9CvADGj/MyAhxFxRlr1gIZpFaNkCF98jgECigGyGHG3oTRznszsajRZcBaOoEECgtEDGAEq8I5oZUOlDQAcIVFdAFkD+KZfrzjvD4fArTokAqm7tsOcIlBZICyB/obnROLHb7fY6aSACqPQhoAMEqiuQEEArTTvuGsad9OFkBFB1a4c9R6C0wHYAbS80pw1CAJU+BHSAQHUFwgEkhOinPXqDNaDq1gl7jsBeBFqt8yu/4/C9PXkGYgaUR4ttEUBgpwLffUGyh/JEBPUAAAAASUVORK5CYII=') no-repeat;
	background-size: 100% 100%;
	position: absolute;
	left: calc(100% + 40px);
	top: 15px;
}

.tianyu-font-step-top {
	margin-bottom: 10px;
}

.tianyu-font-step-id {
	font-size: 24px;
	font-family: "PingFang SC", sans-serif;
	font-weight: 600;
	color: #28292e;
	line-height: 24px;
	text-shadow: 0 4px 10px rgba(134, 162, 255, 0.14);
	margin-right: 8px;
}

.tianyu-font-step-name {
	font-size: 22px;
	font-family: "PingFang SC", sans-serif;
	font-weight: 600;
	color: #28292e;
	line-height: 34px;
}

.tianyu-font-step-bottom {
	line-height: 20px;
	font-family: "PingFang SC", sans-serif;
	font-weight: 400;
}

.tianyu-font-step-desc {
	font-size: 15px;
	color: #28292e;
	margin-bottom: 5px;
}


.tianyu-font-step.active .tianyu-font-step-id,
.tianyu-font-step.active .tianyu-font-step-name {
	color: #0066ff;
}

/* 步骤内容区域 */
.tianyu-font-step-content {
	display: none;
	flex-direction: column;
	gap: 20px;
}

#step1-content {
	display: flex;
}

#convert-step1-content {
	display: flex;
}

#info-step1-content {
	display: flex;
}

/* 文件上传区域 */
.tianyu-font-upload-zone {
	border: 2px dashed #d1d5db;
	border-radius: 12px;
	padding: 60px 40px;
	text-align: center;
	background: #fff;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.tianyu-font-upload-zone:hover {
	border-color: #0066ff;
	background: #f8faff;
}

.tianyu-font-upload-zone.dragging {
	border-color: #0066ff;
	background: #f0f7ff;
	transform: scale(1.02);
}

.tianyu-font-upload-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.tianyu-font-upload-icon {
	width: 80px;
	height: 80px;
	color: #9ca3af;
	transition: color 0.3s ease;
}

.tianyu-font-upload-zone:hover .tianyu-font-upload-icon {
	color: #0066ff;
}

.tianyu-font-svg-icon {
	width: 100%;
	height: 100%;
}

.tianyu-font-primary-text {
	font-size: 20px;
	font-weight: 600;
	color: #1f2937;
	margin: 0;
}

.tianyu-font-secondary-text {
	font-size: 14px;
	color: #6b7280;
	margin: 0;
}

/* 指南区域 */
.tianyu-font-guide-section {
	margin-top: 40px;
}

.tianyu-font-guide-content {
	background: #fff;
	padding: 30px;
	border-radius: 12px;
	box-shadow: 0 4px 32px rgba(56, 123, 255, .1);
}

.tianyu-font-guide-steps,
.tianyu-font-guide-notes {
	margin-bottom: 30px;
}

.tianyu-font-guide-steps:last-child,
.tianyu-font-guide-notes:last-child {
	margin-bottom: 0;
}

.tianyu-font-guide-content h4 {
	font-size: 18px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 15px;
	border-bottom: 2px solid #f3f4f6;
	padding-bottom: 8px;
}

.tianyu-font-guide-content p {
	color: #6b7280;
	line-height: 1.6;
	margin-bottom: 15px;
}

.tianyu-font-guide-list {
	color: #6b7280;
	line-height: 1.6;
}

.tianyu-font-guide-list li {
	margin-bottom: 8px;
	padding-left: 20px;
	position: relative;
}

.tianyu-font-guide-list li::before {
	content: "•";
	color: #0066ff;
	font-weight: bold;
	position: absolute;
	left: 0;
}

/* 编辑区域 */
.tianyu-font-edit-section {
	display: flex;
	flex-direction: column;
	gap: 20px;
}


.tianyu-font-section {
	display: flex;
	flex-direction: column;
}

.tianyu-font-section-block {
	background: #fff;
	border: 1px solid #e5e7eb;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 4px 32px rgba(56, 123, 255, .1);
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.tianyu-font-section-block h4 {
	font-size: 18px;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 15px 0;
}

.tianyu-font-section-block h4 span {
	color: #6b7280;
	font-weight: 400;
	font-size: 14px;
}

/* 文件信息区域 */
.tianyu-font-basic-info {
	display: flex;
	align-items: center;
	gap: 20px;
}

.tianyu-font-icon {
	width: 50px;
	height: 50px;
	border-radius: 8px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.tianyu-font-icon.woff2 {
	background-image: url(img/filetype-woff-2.png);
}

.tianyu-font-icon.woff {
	background-image: url(img/filetype-woff.png);
}

.tianyu-font-icon.ttf {
	background-image: url(img/filetype-ttf.png);
}

.tianyu-font-icon.otf {
	background-image: url(img/filetype-otf.png);
}

.tianyu-font-info {
	flex: 1;
}

.tianyu-font-info-item span,
.tianyu-font-info-item label {
	font-size: 16px;
	color: #1f2937;
	font-weight: 500;
}

.tianyu-font-reselect-btn {
	padding: 8px 16px;
	background: #f3f4f6;
	color: #6b7280;
	border-radius: 6px;
	font-size: 14px;
	transition: all 0.3s ease;
}

.tianyu-font-reselect-btn:hover {
	background: #e5e7eb;
	color: #374151;
}

/* 预设选择器 */
.tianyu-font-preset-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
}

.tianyu-font-preset-item {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 15px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.tianyu-font-preset-item:hover {
	border-color: #0066ff;
	background: #f8faff;
}

.tianyu-font-preset-item.active {
	border-color: #0066ff;
	background: #f0f7ff;
}

.tianyu-font-preset-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.tianyu-font-preset-checkbox {
	width: 16px;
	height: 16px;
}

.tianyu-font-preset-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
}

.tianyu-font-preset-title {
	font-weight: 600;
	color: #1f2937;
}

.tianyu-font-preset-count {
	font-size: 12px;
	color: #6b7280;
	background: #f3f4f6;
	padding: 2px 8px;
	border-radius: 4px;
}

.tianyu-font-preset-desc {
	font-size: 14px;
	color: #6b7280;
	margin: 0;
}

/* 文本输入区域 */
.tianyu-font-textarea {
	width: 100%;
	min-height: 120px;
	padding: 15px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
	resize: vertical;
	transition: border-color 0.3s ease;
}

.tianyu-font-textarea:focus {
	outline: none;
	border-color: #0066ff;
}

.tianyu-font-help-text {
	font-size: 14px;
	color: #6b7280;
	margin: 10px 0 0 0;
	line-height: 1.5;
}

/* 工具区域操作按钮 */
.tianyu-font-tool-actions {
	display: flex;
	gap: 15px;
	justify-content: center;
}

.tianyu-font-tool .tianyu-font-btn {
	padding: 12px 45px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
	border: none;
}

.tianyu-font-tool .tianyu-font-btn-primary {
	background: #0066ff;
	color: #fff;
}

.tianyu-font-tool .tianyu-font-btn-primary:hover {
	transform: translateY(-2px);
}

.tianyu-font-tool .tianyu-font-btn-secondary {
	background: #FFFFFF;
	color: #6b7280;
}

.tianyu-font-tool .tianyu-font-btn-secondary:hover {
	color: #374151;
	transform: translateY(-2px);
}

/* 工具主内容容器 */
.tianyu-tool-main-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* 工具标签切换样式 */
.tianyu-tool-tabs {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.tianyu-tool-tabs::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(218, 236, 254, 0), #daecfe 10%, #daecfe 90%, rgba(218, 236, 254, 0));
}

.tianyu-tool-tab-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 120px;
    width: 240px;
    padding-bottom: 18px;
    z-index: 2;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tianyu-tool-tab-item:last-of-type {
    margin-right: 0;
}

.tianyu-tool-tab-item:hover span {
    color: #0066ff;
}

.tianyu-tool-tab-item.active span {
    color: #0066ff;
}

.tianyu-tool-tab-item.active::after {
    content: "";
    width: 100%;
    height: 5px;
    background: #0066ff;
    border-radius: 10px;
    position: absolute;
    bottom: -1px;
    left: 0;
}

.tianyu-tool-tab-icon {
    width: 40px;
    height: 40px;
}

.tianyu-tool-tab-item span {
    font-family: PingFang SC, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #282930;
    line-height: 21px;
    margin-left: 16px;
    transition: color 0.3s ease;
}

/* 标签内容区域 */
.tianyu-tool-tab-content {
    width: 100%;
}

.tianyu-tool-tab-panel {
    display: none;
}

.tianyu-tool-tab-panel.active {
    display: block;
}

/* 占位符样式 */
.tianyu-tool-tab-placeholder {
    text-align: center;
    padding: 80px 20px;
    background: #f8fafc;
    border-radius: 16px;
    border: 2px dashed #e2e8f0;
}

.tianyu-tool-placeholder-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.tianyu-tool-tab-placeholder h3 {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
}

.tianyu-tool-tab-placeholder p {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 20px;
    line-height: 1.6;
}

.tianyu-tool-placeholder-note {
    display: inline-block;
    padding: 8px 16px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}


.tianyu-font-format-grid {
	display: flex;
	flex-direction: row;
	gap: 12px;
}

.tianyu-font-format-item {
	position: relative;
}

.tianyu-font-format-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tianyu-font-format-label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 10px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	background: #fff;
	position: relative;
}

.tianyu-font-format-label:hover {
	border-color: #0066ff;
	background: #f8faff;
}

.tianyu-font-format-checkbox:checked + .tianyu-font-format-label {
	border-color: #0066ff;
	background: #f0f7ff;
}

.tianyu-font-format-checkbox:checked + .tianyu-font-format-label::after {
	content: "✓";
	position: absolute;
	top: 25%;
	right: 20px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: #0066ff;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
}

.tianyu-font-format-icon {
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.tianyu-font-format-icon.woff2 {
	background-image: url('img/filetype-woff-2.png');
}

.tianyu-font-format-icon.woff {
	background-image: url('img/filetype-woff.png');
}

.tianyu-font-format-icon.ttf {
	background-image: url('img/filetype-ttf.png');
}

.tianyu-font-format-icon.otf {
	background-image: url('img/filetype-otf.png');
}

.tianyu-font-format-info {
	flex: 1;
	min-width: 0;
}

.tianyu-font-format-info h5 {
	font-size: 16px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.tianyu-font-format-info p {
	font-size: 14px;
	color: #6b7280;
	margin: 0;
	line-height: 1.4;
}

.tianyu-font-format-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 500;
	background: #f3f4f6;
	color: #6b7280;
}

.tianyu-font-format-badge.recommended {
	background: #dcfce7;
	color: #16a34a;
}

.tianyu-font-format-badge.compatible {
	background: #fef3c7;
	color: #d97706;
}

.tianyu-font-format-badge.universal {
	background: #e0e7ff;
	color: #4338ca;
}

/* 处理进度区域 */
.tianyu-font-process-section {
	display: none;
	text-align: center;
	background: #fff;
	padding: 50px 30px;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tianyu-font-process-icon {
	margin-bottom: 20px;
}

.tianyu-font-loading-spinner {
	width: 60px;
	height: 60px;
	border: 4px solid #f3f4f6;
	border-top: 4px solid #0066ff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 0 auto;
}

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

.tianyu-font-process-title {
	font-size: 24px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 10px;
}

.tianyu-font-process-desc {
	font-size: 16px;
	color: #6b7280;
	margin-bottom: 30px;
}

.tianyu-font-progress-bar {
	width: 100%;
	height: 8px;
	background: #f3f4f6;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 10px;
}

.tianyu-font-progress-fill {
	height: 100%;
	background: #0066ff;
	border-radius: 4px;
	transition: width 0.3s ease;
	width: 0%;
}

.tianyu-font-progress-text {
	font-size: 14px;
	color: #6b7280;
	margin: 0;
}

/* 下载区域 */
.tianyu-font-download-section {
	display: none;
	text-align: center;
	background: #fff;
	padding: 50px 90px;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	border: 1px solid #e5e7eb;
}

.tianyu-font-success-title {
	font-size: 24px;
	font-weight: 600;
	color: #16a34a;
	margin-bottom: 10px;
}

.tianyu-font-success-desc {
	font-size: 16px;
	color: #6b7280;
	margin-bottom: 30px;
}

.tianyu-font-download-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.tianyu-font-download-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
}

.tianyu-font-download-info {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 1;
}

.tianyu-font-download-icon {
	width: 50px;
	height: 50px;
	border-radius: 8px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.tianyu-font-download-icon.woff2 {
	background-image: url(img/filetype-woff-2.png);
}

.tianyu-font-download-icon.woff {
	background-image: url(img/filetype-woff.png);
}

.tianyu-font-download-icon.ttf {
	background-image: url(img/filetype-ttf.png);
}

.tianyu-font-download-icon.otf {
	background-image: url(img/filetype-otf.png);
}

.tianyu-font-download-icon.css {
	background-image: url(img/filetype-css.png);
}

.tianyu-font-download-details {
	text-align: left;
}

.tianyu-font-download-details h4 {
	font-size: 16px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 5px;
	text-align: left;
}

.tianyu-font-download-details p {
	font-size: 14px;
	color: #6b7280;
	margin: 0;
}

.tianyu-font-download-btn {
	padding: 8px 16px;
	background: #0066ff;
	color: #fff;
	border-radius: 6px;
	font-size: 14px;
	transition: all 0.3s ease;
}

.tianyu-font-download-btn:hover {
	background: #0052cc;
}

.tianyu-font-batch-download {
	overflow: hidden;
	background: #0066ff;
	position: relative;
	display: block;
	margin: auto;
	padding: 12px 55px;
	border-radius: 50px;
	text-align: center;
	font-size: 16px;
	color: white;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.tianyu-font-batch-download:hover {
	background: #2c2c34;
}

.tianyu-font-batch-download div {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tianyu-font-batch-download span {
	transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.tianyu-font-batch-download svg {
	position: absolute;
	top: 18px;
	left: 10px;
	height: 14px;
	width: 14px;
	fill: white;
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 0.3s 0.05s cubic-bezier(0.455, 0.03, 0.515, 0.955), 
	transform 0.3s 0.05s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.tianyu-font-batch-download:hover span {
	transform: translateX(16px);
}

.tianyu-font-batch-download:hover svg {
	opacity: 1;
	transform: translateX(40px);
}

/* ========================================
   字体信息查询功能样式
   ======================================== */

/* 信息区域 */
.tianyu-font-info-section {
	display: none;
}

.tianyu-font-info-section.active {
	display: block;
}


/* 字体信息展示区域 */
.tianyu-font-info-header {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 30px;
}

.tianyu-font-info-basic {
	display: flex;
	align-items: center;
	gap: 20px;
}

.tianyu-font-info-title {
	flex: 1;
}

.tianyu-font-info-title h3 {
	font-size: 24px;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 8px 0;
}

.tianyu-font-info-title p {
	font-size: 16px;
	color: #6b7280;
	margin: 0;
}

.tianyu-font-info-actions {
	display: flex;
	gap: 12px;
}

/* 信息内容区域 */
.tianyu-font-info-content {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
}

/* 信息导航标签 */
.tianyu-font-info-nav {
	display: flex;
	border-bottom: 1px solid #e5e7eb;
	background: #f8f9fa;
}

.tianyu-font-info-nav-item {
	padding: 16px 24px;
	cursor: pointer;
	font-weight: 500;
	color: #6b7280;
	transition: all 0.3s ease;
	border-bottom: 3px solid transparent;
}

.tianyu-font-info-nav-item.active {
	color: #0066ff;
	border-bottom-color: #0066ff;
	background: #fff;
}

.tianyu-font-info-nav-item:hover:not(.active) {
	color: #374151;
	background: #f3f4f6;
}

/* 信息面板 */
.tianyu-font-info-panel {
	display: none;
	padding: 30px;
}

.tianyu-font-info-panel.active {
	display: block;
}

/* CSS 生成选项样式 */
.tianyu-font-css-option {
	background: #f8f9fa;
	border-radius: 12px;
	padding: 20px;
	border: 2px solid #e5e7eb;
}

.tianyu-font-css-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	user-select: none;
}

.tianyu-font-css-checkbox {
	width: 20px;
	height: 20px;
	cursor: pointer;
	margin-top: 2px;
	flex-shrink: 0;
}

.tianyu-font-css-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tianyu-font-css-text strong {
	font-size: 16px;
	color: #1f2937;
}

.tianyu-font-css-text small {
	font-size: 13px;
	color: #6b7280;
	line-height: 1.5;
}

.tianyu-font-css-advanced {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #e5e7eb;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.tianyu-font-css-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tianyu-font-css-field label {
	font-size: 14px;
	font-weight: 600;
	color: #374151;
}

.tianyu-font-css-field .tianyu-font-input {
	margin: 0;
}

/* 信息显示网格 */
.tianyu-font-info-display-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 10px;
}

.tianyu-font-info-display-item {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 10px;
	background: #f8f9fa;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
}

.tianyu-font-info-display-item label {
	font-size: 13px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tianyu-font-info-display-item span {
	font-size: 15px;
	color: #1f2937;
	word-break: break-word;
	line-height: 1.5;
}

/* 保留原有的信息网格样式（其他地方可能还在使用） */
.tianyu-font-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.tianyu-font-info-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tianyu-font-info-item label {
	font-size: 14px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tianyu-font-info-item span {
	font-size: 16px;
	color: #1f2937;
	word-break: break-all;
}


/* 加载动画 */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 统计数据区域 */
.tianyu-font-data-stats {
	text-align: center;
	background: url(img/footer-content-bg.jpg) no-repeat 55%;
}

.datas-box {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px;
	border-radius: 20px;
}


.datas-box h4 {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: #FFFFFF;
}

.datas-box h4 .tianyu-font-data-logo-img {
	filter: brightness(0) invert(1);
	height: 18px;
}


.datas-box h5 {
	font-size: 32px;
	font-weight: 600;
	margin-bottom: 15px;
	color: #FFFFFF;
}

.datas-box .orange {
	font-weight: 600;
	margin: 0 5px;
	background: linear-gradient(180deg, #fff, #29a9ff);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.datas-box .green {
	font-weight: 700;
	margin: 0 5px;
	background: linear-gradient(180deg, #fff, #30d1cb);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.datas-box p {
	font-size: 16px;
    color: #999999;
}

@keyframes shimmer {
	0% { left: -100%; }
	100% { left: 100%; }
}

/* 移动端适配 */
@media (max-width: 768px) {
	.tianyu-font-info-display-grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	
	.tianyu-font-info-display-item {
		padding: 12px;
	}
	
	.tianyu-font-data-stats {
		padding: 60px 0;
	}
	
	.datas-box {
		margin: 0 20px;
		padding: 30px 20px;
	}
	
	.datas-box h4 {
		font-size: 1.4rem;
		flex-direction: column;
		gap: 8px;
	}
	
	.datas-box h5 {
		font-size: 1.2rem;
	}
}

/* ============================================================================
   字符集覆盖统计样式
   ============================================================================ */

.tianyu-font-charset-coverage {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}

.tianyu-font-charset-item {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.tianyu-font-charset-item:hover {
    background: #f1f3f5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tianyu-font-charset-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.tianyu-font-charset-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.tianyu-font-charset-ratio {
    font-size: 20px;
    font-weight: 700;
    color: #0066ff;
}

.tianyu-font-charset-stats {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}

.tianyu-font-charset-progress {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.tianyu-font-charset-progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease, background-color 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .tianyu-font-charset-item {
        padding: 15px;
    }
    
    .tianyu-font-charset-title {
        font-size: 14px;
    }
    
    .tianyu-font-charset-ratio {
        font-size: 18px;
    }
    
    .tianyu-font-charset-stats {
        font-size: 12px;
    }
}