@font-face {
			font-family: 'MyCustomFont';
			src: url('./fonts/main.woff2') format('woff2');
			font-weight: normal;
			font-style: normal;
		}
	   * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,body{
            height:100vh;
            overflow:hidden;
        }
		body {
			background-image: url("https://s41.ax1x.com/2026/01/24/pZgqk7R.png");
			background-size: 100% 100%;
			background-position: center;
			background-repeat: no-repeat;
			background-attachment: fixed;
			scroll-behavior: smooth;
			font-family: 'MyCustomFont';
			font-size: 24px;
		}
        .sidebar{
            width:180px;
            height:100vh;
            position:fixed;
            top:0;
            left:0;
            background:rgba(98, 220, 183, 0.4);
            padding-top:30px;
            overflow-y:auto;
			font-size:20px;
        }
        .sidebar a{
			display:block;
			margin:4px 10px;
			padding:14px 16px;
			text-decoration:none;
			color:#222;
			font-size:20px;
			border-radius:8px;
			/* 光效基础 */
			position: relative;
			overflow: hidden;
			transition: transform 0.1s ease;
		}
		.sidebar a:hover{
			background:rgba(255,255,255,0.35);
			border-radius:8px;
		}
		/* 点击缩小 */
		.sidebar a:active {
			transform: scale(0.97);
		}
        
        .main{
            margin-left:180px;
            height:100vh;
            padding:30px;
            overflow-y:auto;
        }
        .header {
            text-align: center;
            margin: 20px 0 40px;
        }
        .header h1 {
            font-size: 32px;
            margin-bottom: 18px;
        }
        /* 搜索框样式 */
        .search-box{
            width: 60%;
            max-width: 500px;
            margin: 0 auto;
            position: relative;
        }
        .search-box input{
            width: 100%;
            padding: 12px 18px;
            border: 1px solid #ddd;
            border-radius: 30px;
            outline: none;
            font-size: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        .search-box input:focus{
            border-color: #62dcb7;
        }
        /* 清空按钮 */
        .clear-btn {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #ddd;
            border: none;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            display: none;
        }
        .clear-btn:hover {
            background: #ccc;
        }
        .category {
            margin: 40px 0 20px;
            font-size: 26px;
            padding-left: 12px;
            border-left: 5px solid #82aaff;
            scroll-margin-top:30px;
            transition: opacity 0.2s;
        }
        .nav-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 24px;
            margin-bottom:20px;
        }
		.nav-item {
			padding:32px 12px;
			text-align: center;
			text-decoration:none;
			color: #333;
			border-radius: var(--win-radius-card);
			box-shadow: 0 4px 14px rgba(0,0,0,0.07);
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 14px;

			background: transparent;
			border: 1px solid var(--border-base-color);

			position: relative;
			overflow: hidden;
			transition: box-shadow 0.2s ease, transform 0.1s ease;
		}
		/* 卡片内部白色柔光 */
		.nav-item::before {
		  content: "";
		  position: absolute;
		  width: var(--reveal-size);
		  height: var(--reveal-size);
		  border-radius: 50%;
		  background: radial-gradient(circle, var(--reveal-inner-light) 0%, transparent 70%);
		  left: var(--mouse-x);
		  top: var(--mouse-y);
		  transform: translate(-50%, -50%);
		  opacity: 0;
		  pointer-events: none;
		  transition: opacity 0.15s ease;
		  z-index: 1;
		}
		/* 卡片边框跟随蓝光 */
		.nav-item::after {
		  content: "";
		  position: absolute;
		  inset: 0;
		  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--border-glow-color) 0%, transparent 65%);
		  background-origin: border-box;
		  background-clip: border-box;
		  border-radius: var(--win-radius-card);
		  opacity: 0;
		  pointer-events: none;
		  transition: opacity 0.15s ease;
		  z-index: 0;
		}
		.nav-item > * {
		  position: relative;
		  z-index: 2;
		}
		.nav-item:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 22px rgba(0,0,0,0.11);
		}
		.nav-item:hover::before { opacity: 1; }
		.nav-item:hover::after { opacity: 1; }
		.nav-item:active {
			transform: translateY(-5px) scale(0.97);
		}

        .ico {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .ico img {
            width: 80px;
            object-fit: contain;
        }
        /* 搜索隐藏类 */
        .hide{
            display: none !important;
        }
        .category-hide {
			opacity:0;
			height:0;
			margin:0 !important;
			overflow:hidden;
		}
        @media (max-width:768px){
            .sidebar{
                width:100%;
                height:auto;
                position:static;
				font-size:20px;
            }
            .main{
                margin-left:0;
                height:auto;
                overflow:visible;
            }
            html,body{overflow:auto;}
            .nav-grid{grid-template-columns: repeat(auto-fill,minmax(140px,1fr))}
            .header h1{font-size:28px;}
            .search-box{width: 90%;}
        }
        .sub-category{
            margin:24px 0 16px 40px;
            font-size:26px;
            padding-left:12px;
            border-left:5px solid #62dcb7;
            transition: opacity 0.2s;
        }
		.loading-overlay {
			position: fixed;        /* 固定定位，覆盖整个视口 */
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #0f1117;    /* 深色背景，可根据需要调整 */
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9999;          /* 确保在最上层 */
			transition: opacity 0.5s ease, visibility 0.5s ease;
		}

		/* 隐藏状态 */
		.loading-overlay.hidden {
			opacity: 0;
			visibility: hidden;
		}
		.conic-spinner {
			width: 56px;
			height: 56px;
			border-radius: 50%;
			background: conic-gradient(from 0deg, transparent 0%, #6c8cff 40%, #ff6cb4 70%, transparent 100%);
			animation: conicSpin 1s linear infinite;
			position: relative;
		}

		.conic-spinner::after {
			content: "";
			position: absolute;
			top: 6px;
			left: 6px;
			right: 6px;
			bottom: 6px;
			background: #1a1d2e;
			border-radius: 50%;
		}

		@keyframes conicSpin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
		h1.type-fade {
		  font-size: 26px;
		  letter-spacing: 2px;
		  font-weight: 600;
		}
		h1.type-fade span {
		  display: inline-block;
		  opacity: 0;
		  transform: translateY(8px);
		  animation: fadeUp 0.4s ease forwards;
		}

		/* 淡入上浮关键帧 */
		@keyframes fadeUp {
		  to {
			opacity: 1;
			transform: translateY(0);
		  }
		}
		/* 全局变量统一控制光效参数，方便改亮度/大小 */
		:root {
  --win-radius-card: 16px;
  --win-radius-sidebar: 8px;
  --reveal-size: 260px;
  --reveal-inner-light: rgba(22,119,179,0.18);
  --color-blue: #6db1ff;
  --border-glow-color: rgba(109, 177, 255, 0.25);
  --border-base-color: rgba(109, 177, 255, 0.15);
  --mouse-x: 0px;
  --mouse-y: 0px;
}

		/* 开启Reveal光效的基础类，所有需要光效的元素加这个class */
		.reveal {
		  position: relative;
		  overflow: hidden;
		  /* 预留变量，JS动态赋值 */
		  --mouse-x: 0px;
		  --mouse-y: 0px;
		}

		/* 光晕伪元素 */
		.reveal::before {
		  content: "";
		  position: absolute;
		  width: var(--reveal-size);
		  height: var(--reveal-size);
		  border-radius: 50%;
		  /* 径向渐变，中心亮向外透明 */
		  background: radial-gradient(circle, var(--reveal-light) 0%, transparent 70%);
		  /* 绑定鼠标坐标变量，居中对齐光标 */
		  left: var(--mouse-x);
		  top: var(--mouse-y);
		  transform: translate(-50%, -50%);
		  opacity: 0;
		  pointer-events: none; /* 不遮挡鼠标点击 */
		  transition: opacity 0.15s ease;
		  z-index: 1;
		}

		/* 深色模式自动切换柔光亮度 */
		html.dark .reveal::before {
		  background: radial-gradient(circle, var(--reveal-dark-light) 0%, transparent 70%);
		}

		/* 鼠标悬浮时显示光晕 */
		.reveal:hover::before {
		  opacity: 1;
		}

		/* 容器内文字/内容提升层级，防止被光晕盖住 */
		.reveal > * {
		  position: relative;
		  z-index: 2;
		}