:root {
			--bg: #ffffff;
			--muted: #6b7280;
			--accent: #0f62fe;
			--shadow: 0 8px 24px rgba(15, 22, 40, 0.08);
			--container: 1200px;
			--border: #e5e7eb;
			--light-bg: #f9fafb;
		}
	
	
		/* 页眉容器 */
		.site-header {
			background: #1d54a1;
			box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
			position: sticky;
			top: 0;
			z-index: 100;
		}
	
		.wrap {
			max-width: var(--container);
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			/* padding: 12px 18px; */
			position: relative;
		}
	
		/* 导航区域 */
		.nav-container {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
		}
	
		.desktop-nav {
			display: flex;
			gap: 0;
			list-style: none;
			margin: 0;
			padding: 0;
			width: 100%;
			position: relative;
		}
	
		.nav-item {
			position: relative;
			flex: 1;
			text-align: center;
		}
	
		.nav-item:not(:last-child)::after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			height: 20px;
			width: 1px;
			background: rgba(255, 255, 255, 0.3);
		}
	
		.top-link {
			padding: 20px 16px;
			display: inline-flex;
			align-items: center;
			color: #ffffff;
			text-decoration: none;
			font-size: 16px;
			transition: all 0.2s;
			white-space: nowrap;
			width: 100%;
			justify-content: center;
			background: transparent;
		}
	
		.top-link:hover,
		.top-link:focus {
			background: #4872ad;
			color: #ffffff;
			outline: none;
		}
	
		.top-link i {
			margin-left: 6px;
			font-size: 14px;
			color: #ffffff;
			transition: transform 0.3s;
		}
	
		.nav-item:hover .top-link i {
			transform: rotate(180deg);
		}
	
		/* 鼠标悬停过渡区域 */
		.mega-container {
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			height: 16px;
			z-index: 95;
		}
	
		/* Mega menu */
		.mega {
			position: absolute;
			top: calc(100% + 16px);
			left: 0;
			display: none;
			/* width: min(920px, 80vw); */
			background: var(--bg);
			padding: 20px;
			grid-template-columns: repeat(4, 1fr);
			gap: 20px;
			box-shadow: var(--shadow);
			border-radius: 12px;
			z-index: 90;
			opacity: 0;
			/* 这里去掉 transform: translateY(10px); 避免看起来"横向出现" */
			transition: opacity 0.25s ease, top 0.25s ease;
		}
	
		.nav-item:hover .mega {
			display: grid;
			opacity: 1;
			/* 用 top 微调产生轻微的下拉感 */
			top: calc(100% + 12px);
		}
	
		.mega h4 {
			margin: 0 0 5px 0;
			font-size: 16px;
			color: #0f172a;
			font-weight: 600;
			padding-bottom: 5px;
			border-bottom: 1px solid var(--border);
		}
	
		.mega ul {
			margin: 0;
			padding: 0;
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
	
		.mega a {
			text-decoration: none;
			color: var(--muted);
			font-size: 16px;
			transition: color 0.2s;
			display: block;
			padding: 3px 0;
		}
	
		.mega a:hover {
			color: var(--accent);
		}
	
		.col {
			min-width: 160px;
		}
	
		.mega .col .sub {
			font-size: 13px;
			color: #374151;
			margin-top: 8px;
			margin-bottom: 8px;
			font-weight: 500;
		}
	
		/* 手机菜单按钮 */
		.mobile-menu-button {
			display: none;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 40px;
			cursor: pointer;
			color: #ffffff;
			border-radius: 8px;
			margin-left: 10px;
		}
	
		.mobile-menu-button:hover {
			background: #4872ad;
		}
	
		/* 手机面板 */
		#mobile-toggle {
			display: none;
		}
	
		.mobile-panel {
			position: fixed;
			left: 0;
			top: 0;
			height: 100vh;
			width: 84%;
			max-width: 360px;
			background: var(--bg);
			transform: translateX(-100%);
			transition: transform 0.3s ease;
			z-index: 200;
			box-shadow: 10px 0 30px rgba(11, 15, 22, 0.12);
			padding: 20px;
			overflow: auto;
			display: flex;
			flex-direction: column;
		}
	
		#mobile-toggle:checked+.mobile-panel {
			transform: translateX(0);
		}
	
		.mobile-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20px;
			padding-bottom: 15px;
			border-bottom: 1px solid var(--border);
		}
	
		.close-menu {
			background: none;
			border: none;
			font-size: 20px;
			cursor: pointer;
			color: var(--muted);
		}
	
		.mobile-list {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
		}
	
		.mobile-item {
			border-bottom: 1px solid var(--border);
		}
	
		.mobile-item>a {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 14px 10px;
			text-decoration: none;
			color: #111827;
			font-weight: 500;
			position: relative;
		}
	
		.mobile-item>a i {
			transition: transform 0.3s ease;
			font-size: 14px;
		}
	
		.mobile-item.open>a i {
			transform: rotate(90deg);
		}
	
		.mobile-sub {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease;
			background: var(--light-bg);
		}
	
		.mobile-sub.open {
			max-height: 1000px;
		}
	
		.mobile-sub .mobile-item {
			border-bottom: 1px solid #edf2f7;
			padding-left: 20px;
		}
	
		.mobile-sub-2 {
			background: #f3f4f6;
		}
	
		.mobile-sub-2 .mobile-item {
			padding-left: 30px;
		}
	
		.mobile-sub-3 {
			background: #e5e7eb;
		}
	
		/* 最下级分类样式优化 */
		.mobile-sub-3 .mobile-item {
			padding-left: 40px;
			border-bottom: none;
		}
	
		.mobile-sub-3 a {
			font-weight: normal;
			color: #4b5563;
			padding: 12px 8px;
			text-decoration: none;
			display: block;
			position: relative;
			transition: all 0.2s;
			border-bottom: none !important;
		}
	
		.mobile-sub-3 a:before {
			content: "•";
			color: var(--accent);
			margin-right: 8px;
			font-size: 16px;
		}
	
		.mobile-sub-3 a:hover {
			color: var(--accent);
			background-color: rgba(15, 98, 254, 0.05);
		}
	
		/* 页面内容 */
		.content {
			max-width: var(--container);
			margin: 30px auto;
			padding: 0 20px;
		}
	
		.demo-section {
			background: #fff;
			padding: 25px;
			border-radius: 12px;
			box-shadow: var(--shadow);
		}
	
		.demo-section h2 {
			margin-bottom: 15px;
			color: #1f2937;
		}
	
		.demo-section p {
			color: var(--muted);
			line-height: 1.6;
		}
	
		/* 响应式设计 */
		@media (max-width: 1024px) {
			.mega {
				width: min(800px, 85vw);
				grid-template-columns: repeat(3, 1fr);
			}
		}
	
		@media (max-width: 900px) {
			.desktop-nav {
				display: none;
			}
	
			.mobile-menu-button {
				display: flex;
			}
	
			.nav-container {
				justify-content: flex-end;
			}
		}
	
		@media (max-width: 600px) {
			.wrap {
				padding: 10px 15px;
			}
		}
	
		/* 遮罩层 */
		.overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			z-index: 150;
			opacity: 0;
			visibility: hidden;
			transition: all 0.3s ease;
		}
	
		#mobile-toggle:checked~.overlay {
			opacity: 1;
			visibility: visible;
		}
	
		/* 默认显示 */
		.desktop-only {
			display: block;
		}
	
		/* 小于 900px 隐藏（对应你的移动端断点） */
		@media (max-width: 900px) {
			.desktop-only {
				display: none !important;
			}
		}
		/* ========== 导航区域 ========== */
			.site-nav-wrapper {
				background-color: #f8f9fa;
				border-bottom: 1px solid #eaeaea;
				padding: 15px 0;
			}

			.site-nav-inner {
				width: 100%;
				max-width: 1200px;
				margin: 0 auto;
				padding: 0 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				gap: 16px;
			}

			.site-breadcrumb {
				display: flex;
				align-items: center;
				font-size: 14px;
				color: #666;
			}

			.site-breadcrumb span {
				display: inline-block;
				margin-right: 8px;
			}

			.site-breadcrumb span::after {
				content: ">";
				margin: 0 8px;
				color: #ccc;
			}

			.site-breadcrumb span:last-child {
				color: #0066cc;
			}

			.site-breadcrumb span:last-child::after {
				content: "";
			}

			.site-subnav-list {
				display: flex;
				background: white;
				border: 1px solid #e9ecef;
				border-radius: 4px;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
				overflow: hidden;
			}

			.site-subnav-item {
				padding: 10px 13px;
				font-size: 14px;
				color: #333;
				cursor: pointer;
				transition: all 0.2s ease;
			}

			.site-subnav-item:hover,
			.site-subnav-item.active {
				background-color: #0066cc;
				color: white;
			}

			/* ========== 内容区域 ========== */
			.site-content-wrapper {
				width: 100%;
				max-width: 1200px;
				margin: 0 auto;
				padding: 30px 0px 40px;
			}

			.site-content-title {
				font-size: 24px;
				font-weight: bold;
				color: #222;
				margin-bottom: 20px;
				padding-bottom: 12px;
				border-bottom: 1px solid #eee;
			}

			.site-content-body {
				font-size: 16px;
				line-height: 1.7;
				color: #444;
			}

			.site-content-body p {
				margin-bottom: 16px;
			}




			.site-subnav-item a {
				color: inherit;
				/* 继承父级 .site-subnav-item 的文字颜色 */
				text-decoration: none;
				/* 去掉下划线 */
			}

			/* 如果 active 项也要可点击，也加上 */
			.site-subnav-item.active a {
				color: inherit;
			}

			/* ========== 返回顶部按钮（避免类名冲突） ========== */
			.site-back-to-top {
				position: fixed;
				bottom: 30px;
				right: 30px;
				width: 44px;
				height: 44px;
				background-color: #0066cc;
				color: white;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				text-decoration: none;
				opacity: 0;
				visibility: hidden;
				transition: all 0.3s ease;
				box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
				z-index: 9999;
				font-family: Arial, sans-serif !important;
				font-size: 18px !important;
				line-height: 1 !important;
				text-align: center !important;
			}

			/* 使用新类名 site-show，避免与 .show 冲突 */
			.site-back-to-top.site-show {
				opacity: 1;
				visibility: visible;
			}

			.site-back-to-top:hover {
				background-color: #0052a3;
				transform: translateY(-2px);
			}

			/* ========== 响应式 ========== */
			@media (max-width: 768px) {
				.site-nav-inner {
					flex-direction: column;
					align-items: flex-start;
				}

				.site-subnav-list {
					width: 100%;
					flex-wrap: wrap;
				}

				.site-subnav-item {
					flex: 1;
					text-align: center;
					padding: 10px 8px;
					min-width: 100px;
				}

				.site-page-actions {
					flex-direction: column;
					gap: 16px;
					align-items: stretch;
				}

				.site-back-link,
				.site-prev-next {
					text-align: center;
				}

				.site-prev-next {
					justify-content: center;
				}
			}