/* 核心变量定义 */
		:root {
			--color-primary: rgba(86, 34, 206, 1.0);
			--color-primary-light: rgba(110, 43, 255, 0.15);
			--color-secondary: rgba(235, 12, 255, 1.0);
			--color-dark: rgba(15, 23, 42, 0.95);
			--color-dark2: rgba(20, 30, 48, 1);
			--color-dark-card: rgba(30, 41, 59, 0.9);
			--color-sidebar-bg: rgba(10, 15, 25, 0.95);
			--z-header: 90;
			--z-sidebar: 80;
			--z-content: 70;
			--z-toggle: 85;
		}
		
		body {
			background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
			color: #fff;
			font-family: 'Inter', system-ui, sans-serif;
			height: 100vh;      /* 主页面高度撑满视口 */
			overflow-x: hidden;
			margin: 0;
			overflow-y: hidden; /* 禁止主页面Y轴滚动 */
		}
		        
		
		/* 主页面的 iframe 样式 */
		/* 主页面引入iframe后 当iframe页超过100vh的情况下，隐藏主页滚动条，不然主页和加载页会出现2条滚动条 */
		iframe {
		  width: 100%;
		 /* 如果必须用 100vh，可通过 calc() 减去主页Header高度： */
		  height: calc(100vh - 70px);      /* iframe 高度撑满主页面视口 */
		  overflow-y: auto;
		  border: none;       /* 清除默认边框（可选） */
		  display: block;     /* 清除iframe默认行内间隙，避免高度溢出 */
		}
		
		
		/* 头部样式 */
		.main-header {
			background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(20, 30, 48, 0.95) 100%);
			backdrop-filter: blur(10px);
			border-bottom: 1px solid rgba(110, 43, 255, 0.2);
			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
			position: sticky;
			top: 0;
			z-index: var(--z-header);
		}
		
		/* Logo样式 */
		.logo-container {
			background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
			box-shadow: 0 0 20px rgba(110, 43, 255, 0.4);
		}
		/* 侧边栏 - 重新设计为科技感风格 */
		.left-aside {
			 background: linear-gradient(90deg, rgba(6, 9, 17, 1.0) 0%, rgba(15, 23, 42, 0.98) 100%);
			backdrop-filter: blur(10px);
		  /*  border-right: 1px solid rgba(110, 43, 255, 0.2); */
			box-shadow: 
				0 0 30px rgba(110, 43, 255, 0.15),
				inset 0 0 50px rgba(110, 43, 255, 0.05);
			position: fixed;
			top: 72px;
			left: 0;
			/* 修改点1：侧边栏宽度从260px改为220px */
			width: 220px;  /* 修改前：260px */
			height: calc(100vh - 72px);
			z-index: var(--z-sidebar);
			transition: left 0.3s ease-in-out;
			overflow-y: hidden; /* 隐藏Y轴滚动条 */
			overflow-x: hidden;
		}
		
		/* 导航项科技感设计 */
		.nav-link {
			position: relative;
			margin: 8px 16px;
			padding: 14px 18px;
			border-radius: 12px;
			background: rgb(0 103 179 / 30%);
			backdrop-filter: blur(5px);
			border: 1px solid rgba(110, 43, 255, 0.1);
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		}
		
		.nav-link:hover {
			background: rgba(110, 43, 255, 0.15);
			border-color: rgba(110, 43, 255, 0.4);
			transform: translateX(4px);
			box-shadow: 
				0 4px 20px rgba(110, 43, 255, 0.2),
				inset 0 0 0 1px rgba(255, 255, 255, 0.1);
		}
		
		.nav-item-active {
			background: linear-gradient(135deg, rgba(110, 43, 255, 0.2), rgba(162, 89, 255, 0.15));
			border-color: rgba(110, 43, 255, 0.5);
			box-shadow: 
				0 0 20px rgba(110, 43, 255, 0.25),
				inset 0 0 0 1px rgba(255, 255, 255, 0.15);
			position: relative;
		}
		
		.nav-item-active::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 4px;
			height: 60%;
			background: linear-gradient(to bottom, var(--color-primary), var(--color-secondary));
			border-radius: 0 4px 4px 0;
			box-shadow: 0 0 10px rgba(110, 43, 255, 0.7);
		}
		
		/* 图标容器设计 */
		.nav-icon-container {
			width: 40px;
			height: 40px;
			border-radius: 10px;
			background: linear-gradient(135deg, rgba(110, 43, 255, 0.2), rgba(30, 41, 59, 0.4));
			backdrop-filter: blur(5px);
			border: 1px solid rgba(110, 43, 255, 0.2);
			transition: all 0.3s ease;
		}
		
		.nav-link:hover .nav-icon-container {
			background: linear-gradient(135deg, rgba(110, 43, 255, 0.3), rgba(162, 89, 255, 0.2));
			border-color: rgba(110, 43, 255, 0.4);
			transform: scale(1.05);
		}
		
		.nav-item-active .nav-icon-container {
			background: linear-gradient(135deg, rgba(110, 43, 255, 0.3), rgba(162, 89, 255, 0.25));
			border-color: rgba(110, 43, 255, 0.5);
			box-shadow: 0 0 15px rgba(110, 43, 255, 0.3);
		}
		
		/* 切换按钮 */
		.toggle-button {
			width: 40px;
			height: 40px;
			border-radius: 12px;
			background: transparent;
			backdrop-filter: blur(10px);
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.3s ease;
			position: fixed;
			top: 50%;
			transform: translateY(-50%);
			z-index: var(--z-toggle);
			/* 修改点2：切换按钮位置调整（从242px改为202px） */
			left: 202px; /* 修改前：242px */
		}
		
		.toggle-button:hover {
			background: rgba(110, 43, 255, 0.2);
			border-color: rgba(110, 43, 255, 0.5);
			box-shadow: 
				0 6px 25px rgba(110, 43, 255, 0.25),
				inset 0 0 0 1px rgba(255, 255, 255, 0.1);
		}
		
		.toggle-button.collapsed {
			left: 12px;
			background: rgba(30, 41, 59, 0.95);
			border-color: rgba(110, 43, 255, 0.5);
		}
		
		.toggle-button i {
			color: rgba(162, 89, 255, 1);
			font-size: 16px;
			transition: color 0.3s ease;
		}
		
		/* 主内容区 */
		#main-content {
			/* 修改点3：主内容区边距和宽度调整 */
			margin-left: 220px; /* 修改前：260px */
			width: calc(100vw - 220px); /* 修改前：calc(100vw - 260px) */
			min-height: calc(100vh - 72px);
			transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
		}
		
		/* 内容区域 */
		.content-section {
			opacity: 0;
			transition: opacity 0.3s ease-in-out;
		}
		
		.content-section.active {
			opacity: 1;
		}
		
		/* 加载动画 */
		.loading-spinner {
			width: 48px;
			height: 48px;
			border: 3px solid rgba(110, 43, 255, 0.1);
			border-top: 3px solid rgba(110, 43, 255, 1);
			border-radius: 50%;
			animation: spin 1s linear infinite;
		}
		
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
		
		/* 占位页面 */
		.page-placeholder {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: calc(100vh - 72px);
			text-align: center;
			padding: 40px;
		}
		
		.code-gif {
			max-width: 280px;
			border-radius: 16px;
			margin-bottom: 30px;
			box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
		}  
		
		
		/* 跑马灯效果 */
		.content-auto {
			content-visibility: auto;
		}
		.marquee-container {
			overflow: hidden;
			position: relative;
		}
		.marquee-content {
			display: flex;
			animation: marquee 20s linear infinite;
		}
		.marquee-content-reverse {
			display: flex;
			animation: marquee-reverse 20s linear infinite;
		}
		.marquee-vertical {
			animation: marquee-up 15s linear infinite;
		}
		@keyframes marquee {
			0% { transform: translateX(0); }
			100% { transform: translateX(-50%); }
		}
		@keyframes marquee-reverse {
			0% { transform: translateX(-50%); }
			100% { transform: translateX(0); }
		}
		@keyframes marquee-up {
			0% { transform: translateY(0); }
			100% { transform: translateY(-50%); }
		}
		.hover-scale {
			transition: transform 0.3s ease;
		}
		.hover-scale:hover {
			transform: scale(1.05);
		}
		.gradient-overlay {
			background: linear-gradient(90deg, 
				rgba(255,255,255,0) 0%, 
				rgba(255,255,255,0.8) 10%, 
				rgba(255,255,255,0.8) 90%, 
				rgba(255,255,255,0) 100%);
		}
		.text-shadow {
			text-shadow: 0 2px 4px rgba(0,0,0,0.1);
		}