* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			min-height: 100vh;
			/* 白色系渐变背景，柔和不刺眼 */
			background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			color: #1e293b;
			padding: 20px 0;
		}
		/* 头部导航（白色系适配） */
		.site-header {
			width: 90%;
			max-width: 1200px;
			margin: 0 auto 30px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px 20px;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 12px;
			backdrop-filter: blur(10px);
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			border: 1px solid rgba(226, 232, 240, 0.8);
		}
		.logo-wrapper img {
			height: 40px;
			border-radius: 6px;
		}
		.main-menu ul {
			display: flex;
			list-style: none;
			gap: 25px;
		}
		.main-menu a {
			color: #1e293b;
			text-decoration: none;
			padding: 8px 12px;
			border-radius: 6px;
			transition: all 0.3s ease;
		}
		.main-menu a:hover {
			background: rgba(64, 158, 255, 0.1);
			color: #409eff;
		}
		/* 核心内容容器（白色系卡片风格） */
		#app {
			width: 90%;
			max-width: 1200px;
			margin: 0 auto;
			background: rgba(255, 255, 255, 0.95);
			border-radius: 16px;
			padding: 30px;
			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(12px);
			border: 1px solid rgba(226, 232, 240, 0.9);
		}
		/* 标题样式 */
		.page-title {
			text-align: center;
			margin-bottom: 30px;
			color: #409eff;
			font-weight: 600;
			font-size: 22px;
		}
		/* 文件上传区域 */
		.file-input {
			margin-bottom: 25px;
			text-align: center;
		}
		.file-input input[type="file"] {
			padding: 10px;
			background: rgba(255, 255, 255, 0.8);
			border: 1px solid rgba(64, 158, 255, 0.3);
			border-radius: 8px;
			color: #1e293b;
			cursor: pointer;
			transition: all 0.3s ease;
		}
		.file-input input[type="file"]:hover {
			border-color: #409eff;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0 0 8px rgba(64, 158, 255, 0.1);
		}
		/* 预览容器（双列布局，响应式） */
		.preview-container {
			display: flex;
			gap: 20px;
			flex-wrap: wrap;
			margin-bottom: 25px;
		}
		.preview-column {
			flex: 1;
			min-width: 300px;
		}
		/* 文本域样式（白色系适配） */
		.preview-content {
			border: 1px solid rgba(64, 158, 255, 0.3);
			padding: 15px;
			height: 300px;
			width: 100%;
			max-height: 400px;
			overflow: auto;
			white-space: pre-wrap;
			background: rgba(255, 255, 255, 0.8);
			color: #1e293b;
			border-radius: 8px;
			resize: vertical;
			transition: all 0.3s ease;
		}
		.preview-content:focus {
			outline: none;
			border-color: #409eff;
			box-shadow: 0 0 8px rgba(64, 158, 255, 0.2);
			background: #ffffff;
		}
		/* 转换结果标题 */
		.preview-title h5 {
			color: #409eff;
			margin-bottom: 10px;
			font-weight: 500;
		}
		/* 按钮容器（统一样式，带动效） */
		.button-container {
			display: flex;
			gap: 10px;
			justify-content: center;
			flex-wrap: wrap;
			margin-bottom: 25px;
		}
		.button {
			background: rgba(64, 158, 255, 0.9);
			color: #fff;
			border: none;
			padding: 10px 15px;
			text-align: center;
			border-radius: 8px;
			font-size: 14px;
			cursor: pointer;
			transition: all 0.3s ease;
			display: inline-flex;
			align-items: center;
			gap: 5px;
		}
		.button:hover {
			transform: translateY(-2px);
			background: #409eff;
			box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
		}
		/* 功能按钮区分色 */
		.button:nth-child(1) {
			background: rgba(67, 181, 129, 0.9);
		}
		.button:nth-child(1):hover {
			background: #43b581;
		}
		.button:nth-child(2) {
			background: rgba(247, 143, 29, 0.9);
		}
		.button:nth-child(2):hover {
			background: #f78f1d;
		}
		.button:nth-child(3) {
			background: rgba(235, 77, 75, 0.9);
		}
		.button:nth-child(3):hover {
			background: #eb4d4b;
		}
		/* 使用说明区域 */
		.instructions {
			margin-top: 30px;
			padding: 20px;
			background: rgba(255, 255, 255, 0.8);
			border-radius: 12px;
			border: 1px solid rgba(64, 158, 255, 0.2);
		}
		.instructions h5, .instructions h6 {
			color: #409eff;
			margin-bottom: 15px;
		}
		.instructions h6 {
			color: #64748b;
			font-weight: 500;
		}
		.instructions p, .instructions pre {
			color: #1e293b;
			line-height: 1.6;
		}
		.instructions pre {
			padding: 15px;
			background: rgba(248, 250, 252, 0.9);
			border: 1px solid rgba(226, 232, 240, 0.8);
			border-radius: 8px;
			overflow-x: auto;
			margin: 10px 0;
		}
		/* 页脚样式 */
		.site-footer {
			width: 90%;
			max-width: 1200px;
			margin: 30px auto 0;
			text-align: center;
			color: #64748b;
			font-size: 14px;
		}
		/* 响应式适配（白色系统一） */
		@media (max-width: 768px) {
			.site-header {
				flex-direction: column;
				gap: 15px;
			}
			.main-menu ul {
				gap: 15px;
				flex-wrap: wrap;
				justify-content: center;
			}
			#app {
				padding: 20px 15px;
			}
			.preview-container {
				flex-direction: column;
			}
			.button-container {
				flex-direction: column;
				align-items: center;
			}
			.button {
				width: 100%;
				max-width: 300px;
			}
			.preview-content {
				max-height: 250px;
			}
		}