:root {
            --primary-color: #0078d4;
            --secondary-color: #107c10;
            --dark-color: #1e1e1e;
            --light-color: #f3f2f1;
            --gray-color: #8a8886;
            --border-radius: 4px;
        }
		@font-face {
			font-family: 'pingfang0';
			src: url('hos.ttf') format('ttf');
			font-weight: normal;
			font-style: normal;
		}
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #faf9f8;
            color: #323130;
            line-height: 1.6;
        }
        
        .container {
            width: 100%;
            max-width: 1250px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 头部样式 */
        header {
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

		.logo {
			display: flex;
			align-items: center;
			gap: 0;
		}

        .logo img {
            height: 70px;
            width: auto;
            margin-right: 0;
            object-fit: contain;
        }

        .logo-text {
            font-size: 26px;
            font-weight: 600;
            color: var(--primary-color);
        }

        .nav-right {
            display: flex;
            align-items: center;
        }

        nav ul {
            display: flex;
            list-style: none;
        }

        nav ul li {
            margin-left: 30px;
        }

        nav ul li a {
            text-decoration: none;
            color: var(--dark-color);
            font-weight: 500;
            transition: color 0.3s;
        }

        nav ul li a:hover {
            color: var(--primary-color);
        }
        
        .cta-button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .cta-button:hover {
            background-color: #106ebe;
        }
        
        .more {
            background-color: transparent;
            color: white;
            border: 2px solid white;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .more:hover {
            background-color: #dcdcdc
        }
        
        .more {
            background-color: whitesmoke;
            color: var(--primary-color);
        }

        .mainD {
            background-color: transparent;
            color: white;
            border: 2px solid white;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .mainD:hover {
            background-color: #dcdcdc
        }
        
        .mainD {
            background-color: whitesmoke;
            color: var(--primary-color);
        }
        
        .Wait {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .Wait:hover {
            background-color: #f43030;
        }
        
        /* Hero区域样式 */
        .hero {
            background: url('https://pic1.zhimg.com/v2-ddd9a3d4bf866155ea1a22a876fc0f40_r.jpg') center/cover no-repeat;
            color: white;
            padding: 100px 0;
            text-align: center;
            position: relative;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

        .hero .container {
            position: relative;
            z-index: 2;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        .hero p {
            font-size: 20px;
            max-width: 700px;
            margin: 0 auto 30px;
        }
        
        .hero-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
        
        .secondary-button {
            background-color: transparent;
            color: white;
            border: 2px solid white;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .secondary-button:hover {
            background-color: white;
            color: var(--primary-color);
        }
        
        /* Fea区域样式 */
        .features {
            padding: 80px 0;
            position: relative;
        }
        
        .features::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.85);
            z-index: 1;
        }

        .features .container {
            position: relative;
            z-index: 2;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-title h2 {
            font-size: 36px;
            color: var(--dark-color);
            margin-bottom: 15px;
        }
        
        .section-title p {
            color: var(--gray-color);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .feature-card {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            background-color: #e1f5fe;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .feature-icon svg {
            width: 30px;
            height: 30px;
            fill: var(--primary-color);
        }
        
        .feature-card h3 {
            font-size: 22px;
            margin-bottom: 15px;
            color: var(--dark-color);
        }
        
        .feature-card p {
            color: var(--gray-color);
        }
        
        /* Sys区域样式 */
        .system-requirements {
            background-color: var(--dark-color);
            color: white;
            padding: 80px 0;
        }
        
        .system-requirements .section-title h2 {
            color: white;
        }
        
        .system-requirements .section-title p {
            color: #d2d0ce;
        }
        
        .requirements-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 40px;
        }
        
        .requirement-item {
            background-color: #2b2b2b;
            border-radius: 8px;
            padding: 25px;
            width: 250px;
            text-align: center;
        }
        
        .requirement-icon {
            margin-bottom: 15px;
        }
        
        .requirement-item h3 {
            font-size: 20px;
            margin-bottom: 10px;
            color: white;
        }
        
        .requirement-item p {
            color: #d2d0ce;
        }
        
        
        .download {
            padding: 80px 0;
            text-align: center;
            position: relative;
			background: url('https://pic1.zhimg.com/v2-ddd9a3d4bf866155ea1a22a876fc0f40_r.jpg') center/cover no-repeat;
        }
        
        .download::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.3);
            z-index: 1;
        }

        .download .container {
            position: relative;
            z-index: 2;
        }
        
        .dark-mode .features::before {
            background: rgba(30, 30, 30, 0.85);
        }

        .dark-mode .download::before {
            background: rgba(30, 30, 30, 0.6);
        }
        
        .download-options {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 40px;
            margin-top: 50px;
        }

        .download-card {
            background-color: white;
            border-radius: 8px;
            padding: 40px 35px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            width: 450px;
            min-height: 650px;
            transition: box-shadow 0.3s;
            display: flex;
            flex-direction: column;
        }

        .download-card:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

        .download-card h3 {
            font-size: 24px;
            margin-bottom: 20px;
            color: var(--dark-color);
            line-height: 1.3;
            text-align: left;
        }

        .download-card .price {
            font-size: 20px;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 20px;
            text-align: left !important;
            width: 100%;
            display: block;
        }

        .download-card ul {
            list-style: none;
            margin-bottom: 30px;
            flex-grow: 1;
            text-align: left;
        }

        .download-card ul li {
            margin-bottom: 10px;
            color: var(--gray-color);
            font-size: 15px;
            line-height: 1.5;
            text-align: left;
        }

        @media (max-width: 768px) {
            .download-card {
                width: 340px;
                min-height: auto;
                padding: 30px 25px;
            }
        }

        /* Faq区域样式 */
        .faq {
            background-color: #f3f2f1;
            padding: 80px 0;
        }
        
        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .faq-item {
            background-color: white;
            border-radius: 8px;
            margin-bottom: 15px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .faq-question {
            padding: 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
        }
        
        .faq-answer {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s, padding 0.3s;
        }
        
        .faq-item.active .faq-answer {
            padding: 0 20px 20px;
            max-height: 500px;
        }
        
        .faq-toggle {
            font-size: 20px;
            transition: transform 0.3s;
        }
        
        .faq-item.active .faq-toggle {
            transform: rotate(180deg);
        }
        
        /* 页脚样式 */
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: 60px 0 30px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-column h3 {
            font-size: 18px;
            margin-bottom: 20px;
            color: white;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 10px;
        }
        
        .footer-column ul li a {
            color: #d2d0ce;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-column ul li a:hover {
            color: white;
        }
        
        .copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid #3b3a39;
            color: #d2d0ce;
            font-size: 14px;
        }
        
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                padding: 15px 0;
            }
            
            nav ul {
                margin-top: 15px;
            }
            
            nav ul li {
                margin-left: 15px;
                margin-right: 15px;
            }
            
            .hero h1 {
                font-size: 36px;
            }
            
            .hero p {
                font-size: 18px;
            }
            
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .section-title h2 {
                font-size: 30px;
            }
        }
        
        /* B站按钮样式 */
        .bilibili-button {
            background-color: #fb7299;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 10px;
        }

        .bilibili-button:hover {
            background-color: #ff9db5;
        }
        
        .modal-download-card .cta-button,
        .modal-download-card .bilibili-button {
            width: 100%;
            padding: 12px 24px;
            font-size: 16px;
            margin-top: 10px;
        }

        /* 嵌套窗口内按钮容器布局 */
        .modal-download-card > div {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: auto;
        }
        
        .download-card .cta-button,
        .download-card .bilibili-button,
        .download-card .more,
        .download-card .Wait {
            width: 100%;
            padding: 12px 24px;
            font-size: 16px;
            margin-top: 10px;
        }

        .download-card > div {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: auto;
        }
        
        .author-button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .author-button:hover {
            background-color: #0d6b0d;
        }
        
        /* 按钮图标样式 */
        .cta-button i,
        .bilibili-button i,
        .more i,
        .mainD i,
        .Wait i,
        .author-button i,
        .secondary-button i,
        .back-button i,
        .author-link i {
            margin-right: 8px;
        }

        button, .author-link {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-download-card .cta-button {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-download-card .Wait {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .download-card > div,
        .modal-download-card > div {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: auto;
            align-items: center;
            width: 100%;
        }

        .download-card .cta-button,
        .download-card .bilibili-button,
        .download-card .more,
        .download-card .Wait,
        .modal-download-card .cta-button,
        .modal-download-card .bilibili-button {
            width: 100%;
            max-width: 300px;
            padding: 12px 24px;
            font-size: 16px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .author-links {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
            width: 100%;
            flex-wrap: wrap;
        }

        .author-link {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: var(--border-radius);
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            max-width: 150px;
            min-width: 100px;
            flex: 1;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .hero-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .download-card .cta-button,
            .download-card .bilibili-button,
            .download-card .more,
            .download-card .Wait,
            .modal-download-card .cta-button,
            .modal-download-card .bilibili-button {
                max-width: 100%;
            }
            
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
			.bilibili-button {
				font-size: 16px !important;
				padding: 12px 24px !important;
				min-height: 48px !important;
				min-width: 120px !important;
			}
			.bilibili-button i {
				font-size: 18px !important;
				margin-right: 8px !important;
			}
            .hero-buttons button {
                width: 100%;
                max-width: 280px;
            }
        }
        
        .system-requirements .section-title > div {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .system-requirements .cta-button {
            width: auto;
            min-width: 200px;
            padding: 12px 30px;
            font-size: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }

        .system-requirements .section-title > div .cta-button {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 0 auto !important;
        }

        .cta-button i,
        .bilibili-button i,
        .more i,
        .Wait i,
        .author-button i,
        .secondary-button i,
        .back-button i,
        .author-link i {
            margin-right: 8px;
        }
        
                /* 加载动画样式 */
        #loading-animation {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.45);
			backdrop-filter: blur(20px);
			-webkit-backdrop-filter: blur(20px);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9999;
			transition: opacity 0.6s ease, visibility 0.6s ease;
		}

		#loading-animation.loaded {
			opacity: 0;
			visibility: hidden;
		}

		.loading-spinner {
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 18px;
			padding: 0;
			background: transparent;
			border: none;
			box-shadow: none;
			backdrop-filter: none;
		}

		/* ---------- SVG 圆环容器 ---------- */
		.spinner-svg {
			width: 60px;
			height: 60px;
			animation: spin-rotate 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
		}

		/* ---------- 白色弧线 ---------- */
		.spinner-path {
			fill: none;
			stroke: #ffffff;
			stroke-width: 4;
			stroke-linecap: round;
			stroke-dasharray: 1, 125;
			stroke-dashoffset: 0;
			animation: stroke-dash 3.5s ease-in-out infinite;
		}

		/* 旋转动画 */
		@keyframes spin-rotate {
			100% {
				transform: rotate(360deg);
			}
		}

		/* 白条先变大后变小 + 在轨道上滑行 */
		@keyframes stroke-dash {
			0% {
				stroke-dasharray: 1, 125;
				stroke-dashoffset: 0;
			}
			50% {
				stroke-dasharray: 85, 125;
				stroke-dashoffset: -20;
			}
			100% {
				stroke-dasharray: 1, 125;
				stroke-dashoffset: -125;
			}
		}

		/* ---------- 下方文字 ---------- */
		.loading-text {
			color: rgba(255, 255, 255, 0.85);
			font-size: 15px;
			font-weight: 300;
			letter-spacing: 0.6px;
			margin: 0;
			animation: text-pulse 3.6s ease-in-out infinite;
		}

		@keyframes text-pulse {
			0%, 100% {
				opacity: 0.5;
				transform: scale(1);
			}
			50% {
				opacity: 1;
				transform: scale(1.02);
			}
		}
		.dark-mode #loading-animation {
			background: rgba(0, 0, 0, 0.65);
		}

		.dark-mode .loading-text {
			color: rgba(255, 255, 255, 0.9);
		}
        
        /* 黑色模式样式 */
        body.dark-mode {
            background-color: #121212;
            color: #e0e0e0;
        }

        .dark-mode header {
            background-color: rgba(30, 30, 30, 0.9);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .dark-mode .logo-text {
            color: var(--primary-color);
        }

        .dark-mode nav ul li a {
            color: #e0e0e0;
        }

        .dark-mode nav ul li a:hover {
            color: var(--primary-color);
        }

        .dark-mode .features {
            background-color: #121212;
        }

        .dark-mode .section-title h2 {
            color: #e0e0e0;
        }

        .dark-mode .section-title p {
            color: #b0b0b0;
        }

        .dark-mode .feature-card {
            background-color: #1e1e1e;
            color: #e0e0e0;
        }

        .dark-mode .feature-card p {
            color: #b0b0b0;
        }

        .dark-mode .faq {
            background-color: #1a1a1a;
        }

        .dark-mode .faq-item {
            background-color: #2a2a2a;
            color: #f0f0f0;
        }

        .dark-mode .download-card,
        .dark-mode .modal-download-card {
            background-color: #2a2a2a;
            color: #f0f0f0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        
        .dark-mode .download-card .price,
        .dark-mode .modal-download-card .price {
            color: var(--primary-color);
        }

        .dark-mode .download-card h3,
        .dark-mode .modal-download-card h3 {
            color: #ffffff;
        }

        .dark-mode .download-card ul li,
        .dark-mode .modal-download-card ul li {
            color: #d0d0d0;
        }

        .dark-mode .about-content-card,
        .dark-mode .author-card {
            background-color: #2a2a2a;
            color: #f0f0f0;
        }

        .dark-mode .about-content-card h3,
        .dark-mode .author-card h3 {
            color: #ffffff;
        }

        .dark-mode .about-content-card p,
        .dark-mode .author-description {
            color: #d0d0d0;
        }

        .dark-mode .component-article {
            background-color: #2a2a2a;
            color: #f0f0f0;
        }

        .dark-mode .component-article h3 {
            color: #ffffff;
        }

        .dark-mode .component-article p,
        .dark-mode .component-article li {
            color: #d0d0d0;
        }

        .dark-mode .file-tree-container {
            background-color: #2d2d2d;
        }

        .dark-mode .file-tree li {
            color: #e0e0e0;
        }

        .dark-mode .file-tree li:hover {
            background-color: #3d3d3d;
        }

        .dark-mode .file-tree li.active {
            background-color: var(--primary-color);
            color: white;
        }

        .theme-toggle {
            background: none;
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            cursor: pointer;
            font-size: 18px;
            padding: 8px;
            border-radius: 50%;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            margin-left: 20px;
        }

        .theme-toggle:hover {
            background-color: var(--primary-color);
            color: white;
        }

        .dark-mode .theme-toggle {
            border-color: #e0e0e0;
            color: #e0e0e0;
        }

        .dark-mode .theme-toggle:hover {
            background-color: #e0e0e0;
            color: #121212;
        }

        @media (max-width: 768px) {
            .theme-toggle {
                margin-left: 10px;
                width: 40px;
                height: 40px;
                font-size: 16px;
            }
        }
        
        /* 嵌套窗口的黑色模式 */
        .dark-mode .modal-content,
        .dark-mode .about-modal-content,
        .dark-mode .author-modal-content {
            background-color: #1e1e1e;
            color: #e0e0e0;
        }

        .dark-mode .modal-title h2,
        .dark-mode .about-modal-title h2,
        .dark-mode .author-modal-title h2 {
            color: #e0e0e0;
        }

        .dark-mode .modal-title p,
        .dark-mode .about-modal-title p,
        .dark-mode .author-modal-title p {
            color: #b0b0b0;
        }

        .dark-mode .close-modal,
        .dark-mode .about-close-modal,
        .dark-mode .author-close-modal {
            color: #b0b0b0;
        }

        .dark-mode .close-modal:hover,
        .dark-mode .about-close-modal:hover,
        .dark-mode .author-close-modal:hover {
            color: var(--primary-color);
        }

        .dark-mode .timeline-content {
            background-color: #2d2d2d;
            color: #e0e0e0;
        }

        .dark-mode .timeline-content h4 {
            color: #e0e0e0;
        }

        .dark-mode .back-button {
            background-color: #555;
            color: #e0e0e0;
        }

        .dark-mode .back-button:hover {
            background-color: #666;
        }
        
        .dark-mode .cta-button {
            background-color: var(--primary-color);
            color: white;
        }

        .dark-mode .cta-button:hover {
            background-color: #106ebe;
        }

        .dark-mode .secondary-button {
            border: 2px solid #e0e0e0;
        }

        .dark-mode .secondary-button:hover {
            border-color: var(--primary-color);
            background-color: #e0e0e0;
            color: #121212;
        }

        .dark-mode .more {
            background-color: #2d2d2d;
            color: #e0e0e0;
            border: 2px solid #555;
        }

        .dark-mode .more:hover {
            background-color: #3d3d3d;
            border-color: #666;
        }

        .dark-mode .mainD {
            background-color: #2d2d2d;
            color: #e0e0e0;
            border: 2px solid #555;
        }

        .dark-mode .mainD:hover {
            background-color: #3d3d3d;
            border-color: #666;
        }

        .dark-mode .Wait {
            background-color: #106ebe;
            color: white;
        }

        .dark-mode .Wait:hover {
            background-color: #f43030;
        }

        .dark-mode .author-button {
            background-color: var(--secondary-color);
            color: white;
        }

        .dark-mode .author-button:hover {
            background-color: #0d6b0d;
        }
        
        .dark-mode .author-contributions h4 {
            color: #ffffff;
        }
        
        .dark-mode .modal-title h4 {
            color: #ffffff;
        }
    
        @media (max-width: 768px) {
            .dark-mode .header-content {
                flex-direction: column;
            }
            
            .dark-mode .nav-right {
                margin-top: 15px;
                width: 100%;
                justify-content: space-between;
            }
            
            .dark-mode nav ul {
                margin-top: 0;
            }
        }
        
        /* 主题切换过渡动画 */
        body,
        header,
        .features,
        .faq,
        .download,
        .system-requirements,
        footer {
            transition: background-color 0.4s ease;
        }

        .feature-card,
        .download-card,
        .modal-download-card,
        .faq-item,
        .about-content-card,
        .author-card,
        .component-article,
        .file-tree li,
        .timeline-content,
        .cta-button,
        .secondary-button,
        .more,
        .Wait,
        .author-button,
        .bilibili-button,
        .theme-toggle {
            transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        h1, h2, h3, h4, h5, h6, p, span, li, a, button, input, textarea, select, label {
            transition: color 0.4s ease;
        }

        .dark-mode .feature-card,
        .dark-mode .download-card,
        .dark-mode .modal-download-card,
        .dark-mode .faq-item,
        .dark-mode .about-content-card,
        .dark-mode .author-card,
        .dark-mode .component-article,
        .dark-mode .file-tree li,
        .dark-mode .timeline-content,
        .dark-mode .cta-button,
        .dark-mode .secondary-button,
        .dark-mode .more,
        .dark-mode .mainD,
        .dark-mode .Wait,
        .dark-mode .author-button,
        .dark-mode .bilibili-button,
        .dark-mode .theme-toggle {
            transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        body.theme-transitioning {
            transition: background-color 0.4s ease !important;
        }

        body.theme-transitioning .feature-card,
        body.theme-transitioning .download-card,
        body.theme-transitioning .modal-download-card,
        body.theme-transitioning .faq-item,
        body.theme-transitioning .about-content-card,
        body.theme-transitioning .author-card,
        body.theme-transitioning .component-article {
            transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
        }

        @media (max-width: 768px) {
            .nav-right {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                margin-top: 15px;
                flex-wrap: nowrap;
                position: relative;
            }
            
            nav ul {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                margin-top: 0;
                flex-grow: 1;
                margin-right: 60px;
            }
            
            nav ul li {
                margin-left: 15px;
                margin-right: 15px;
                flex-shrink: 0;
            }
            
            .theme-toggle {
                margin-left: 15px;
                flex-shrink: 0;
                order: 2;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    
        /* 公告栏样式 */
        .announcement {
            background-color: #ffc107;
            color: #856404;
            padding: 10px 0;
            text-align: center;
            border-bottom: 1px solid #ffb300;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .announcement p {
            margin: 0;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .announcement i {
            font-size: 18px;
        }

        .dark-mode .announcement {
            background-color: #333;
            color: #ffc107;
            border-bottom: 1px solid #555;
        }

        .dark-mode .announcement p {
            color: #ffc107;
        }

        @media (max-width: 768px) {
            .announcement p {
                font-size: 14px;
                padding: 0 10px;
            }
        }
        
        .floating-announcement {
            position: sticky;
            top: 80px;
            left: 0;
            right: 0;
            background-color: #ffc107;
            color: #856404;
            padding: 8px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid #ffb300;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            z-index: 90;
            transition: all 0.3s ease;
            margin-top: -1px;
        }
        
        .floating-announcement .container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .announcement-content {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
        }

        .close-announcement {
            background: none;
            border: none;
            color: #856404;
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: background-color 0.3s;
            position: absolute;
            right: 0;
        }

        .close-announcement:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .dark-mode .floating-announcement {
            background-color: #333;
            color: #ffc107;
            border-bottom: 1px solid #555;
        }

        .dark-mode .close-announcement {
            color: #ffc107;
        }

        .dark-mode .close-announcement:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        @media (max-width: 768px) {
            .floating-announcement {
                padding: 8px 15px;
                font-size: 14px;
            }
        }
        
        /* 分类卡片 */
        .category-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s, box-shadow 0.3s;
            width: 450px;
            height: 350px;
            display: flex;
            flex-direction: column;
            background-color: rgba(255, 255, 255) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }

        .category-card:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .category-image {
            height: 180px;
            width: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .category-content {
            padding: 25px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .category-content h3 {
            font-size: 24px;
            margin-bottom: 10px;
            color: var(--dark-color);
        }

        .category-content p {
            margin-bottom: 20px;
            flex-grow: 1;
        }

        .category-button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .category-button:hover {
            background-color: #106ebe;
        }

        /* 黑色模式适配 */
        .dark-mode .category-card {
            background-color: #2a2a2a;
            background-color: rgba(42, 42, 42) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        .dark-mode .category-content h3 {
            color: #ffffff;
        }

        .dark-mode .category-content p {
            color: #d0d0d0;
        }

        @media (max-width: 768px) {
            .category-card {
                width: 340px;
                height: 320px;
            }
            
            .category-image {
                height: 150px;
            }
            
            .category-content {
                padding: 20px;
            }
        }

        /* 官方Windows分类模态窗口样式 */
        .official-windows-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            overflow-y: auto;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .official-windows-modal.show {
            opacity: 1;
        }

        .official-modal-content {
            background-color: white;
            margin: 40px auto;
            padding: 30px;
            border-radius: 8px;
            width: 95%;
            max-width: 1200px;
            position: relative;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transform: translateY(-30px);
            opacity: 0;
            transition: all 0.3s ease;
        }

        .official-windows-modal.show .official-modal-content {
            transform: translateY(0);
            opacity: 1;
        }

        .official-close-modal {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            color: var(--gray-color);
            transition: color 0.3s;
        }

        .official-close-modal:hover {
            color: var(--primary-color);
        }

        .official-modal-title {
            text-align: center;
            margin-bottom: 20px;
            color: var(--dark-color);
        }

        .official-modal-title h2 {
            font-size: 25px;
            margin-bottom: 10px;
        }

        .official-modal-title p {
            color: var(--gray-color);
            max-width: 600px;
            margin: 0 auto;
        }
		
		.official-tip {
			background-color: #e6f2ff;
			border: 2px solid #0078d4;
			border-radius: 8px;
			padding: 20px;
			margin-top: 40px;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 15px;
		}

		.official-tip i {
			color: #0078d4;
			font-size: 32px;
		}

		.official-tip h3 {
			color: #0078d4;
			margin-bottom: 5px;
			font-size: 20px;
		}

		.official-tip p {
			color: #005a9e;
			margin-bottom: 0;
			font-size: 16px;
		}

		.dark-mode .official-tip {
			background-color: #1a365d;
			border-color: #2b579a;
		}

		.dark-mode .official-tip i,
		.dark-mode .official-tip h3,
		.dark-mode .official-tip p {
			color: #60a5fa;
		}

		@media (max-width: 768px) {
			.official-tip {
				padding: 15px;
				margin-top: 30px;
			}
			
			.official-tip i {
				font-size: 28px;
			}
			
			.official-tip h3 {
				font-size: 18px;
			}
			
			.official-tip p {
				font-size: 15px;
			}
		}

        /* 官方Windows版本卡片 */
        .official-versions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }

        .official-version-card {
            background-color: white;
            border-radius: 8px;
            padding: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            border-top: 4px solid var(--primary-color);
            display: flex;
            flex-direction: column;
        }

        .official-version-card:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

        .official-version-card h3 {
            font-size: 20px;
            margin-bottom: 15px;
            color: var(--dark-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .official-version-card h3 i {
            color: var(--primary-color);
        }

        .official-version-info {
            margin-bottom: 20px;
            flex-grow: 1;
        }

        .official-version-info p {
            color: var(--gray-color);
            line-height: 1.6;
            margin-bottom: 10px;
        }

        .official-version-details {
            background-color: #f8f9fa;
            border-radius: 6px;
            padding: 15px;
            margin-top: 15px;
        }

        .official-version-details h4 {
            font-size: 16px;
            margin-bottom: 10px;
            color: var(--dark-color);
        }

        .official-version-details ul {
            list-style-type: disc;
            padding-left: 20px;
            color: var(--gray-color);
        }

        .official-version-details li {
            margin-bottom: 5px;
            font-size: 14px;
        }

        /* 维护通知 */
        .maintenance-notice {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 8px;
            padding: 20px;
            margin-top: 40px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .maintenance-notice i {
            color: #856404;
            font-size: 32px;
        }

        .maintenance-notice h3 {
            color: #856404;
            margin-bottom: 10px;
        }

        .maintenance-notice p {
            color: #856404;
            margin-bottom: 15px;
            max-width: 600px;
        }

        .maintenance-features {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
        }

        .maintenance-feature {
            background-color: #ffecb5;
            padding: 8px 15px;
            border-radius: 4px;
            color: #856404;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .maintenance-feature i {
            font-size: 16px;
        }

        /* 下载按钮样式 */
        .official-download-button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            margin-top: 15px;
        }

        .official-download-button:hover {
            background-color: #106ebe;
        }

        .official-download-button.disabled {
            background-color: var(--gray-color);
            cursor: not-allowed;
        }

        .official-download-button.disabled:hover {
            background-color: var(--gray-color);
        }

        /* 黑色模式适配 */
        .dark-mode .official-modal-content {
            background-color: #1e1e1e;
            color: #e0e0e0;
        }

        .dark-mode .official-modal-title h2 {
            color: #e0e0e0;
        }

        .dark-mode .official-modal-title p {
            color: #b0b0b0;
        }

        .dark-mode .official-version-card {
            background-color: #2a2a2a;
            border-top-color: var(--primary-color);
        }

        .dark-mode .official-version-card h3 {
            color: #ffffff;
        }

        .dark-mode .official-version-card h3 i {
            color: var(--primary-color);
        }

        .dark-mode .official-version-info p {
            color: #d0d0d0;
        }

        .dark-mode .official-version-details {
            background-color: #3d3d3d;
        }

        .dark-mode .official-version-details h4 {
            color: #ffffff;
        }

        .dark-mode .official-version-details ul {
            color: #d0d0d0;
        }

        .dark-mode .maintenance-notice {
            background-color: #333;
            border-color: #555;
        }

        .dark-mode .maintenance-notice i,
        .dark-mode .maintenance-notice h3,
        .dark-mode .maintenance-notice p {
            color: #ffc107;
        }

        .dark-mode .maintenance-feature {
            background-color: #444;
            color: #ffc107;
        }

        .dark-mode .maintenance-feature i {
            color: #ffc107;
        }

        @media (max-width: 768px) {
            .official-modal-content {
                padding: 20px;
                margin: 20px auto;
            }
            
            .official-versions-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .official-version-card {
                padding: 20px;
            }
            
            .maintenance-notice {
                padding: 15px;
            }
        }

        /* 隐藏主界面的FAQ区域 */
        #faq {
            display: none !important;
        }

        nav a[href="#faq"]::after {
            content: " (弹窗)";
            font-size: 0.8em;
            opacity: 0.7;
        }
        
        /* 评论系统样式 */
        .comments-section {
            margin-top: 0;
            padding-top: 0;
            margin-bottom: 60px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 40px;
        }
        
        .system-requirements .comments-section {
            border-bottom-color: rgba(255, 255, 255, 0.1);
        }
        
        .system-requirements .comments-section .section-title h2 {
            color: white !important;
        }
        
        .system-requirements .comments-section .section-title p {
            color: #d2d0ce !important;
        }
        
        /* 确保评论系统所有文字在深色背景下可见 */
        .system-requirements .comment-form-container,
        .system-requirements .comment-form-header h3,
        .system-requirements .comment-form-header p,
        .system-requirements .comment-item,
        .system-requirements .comment-author-name,
        .system-requirements .comment-author-name a,
        .system-requirements .comment-date,
        .system-requirements .comment-body,
        .system-requirements .comment-body p,
        .system-requirements .comment-body li,
        .system-requirements .comment-link,
        .system-requirements .comments-empty,
        .system-requirements .comments-loading p {
            color: white !important;
        }
        
        .system-requirements .comment-form-header p,
        .system-requirements .comment-date,
        .system-requirements .comments-empty,
        .system-requirements .comments-loading p {
            color: #d2d0ce !important;
        }
        
        .system-requirements .comment-body {
            color: #e0e0e0 !important;
        }
        
        .system-requirements .comment-body p,
        .system-requirements .comment-body li {
            color: #e0e0e0 !important;
        }
        
        .system-requirements .comment-link {
            color: #60a5fa !important;
        }
        
        .system-requirements .comment-link:hover {
            color: var(--primary-color) !important;
        }
        
        .comments-container {
            max-width: 900px;
            margin: 0 auto;
        }
        
        .comment-form-container {
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            padding: 30px;
            margin-bottom: 40px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .comment-form-header {
            text-align: center;
            margin-bottom: 25px;
        }
        
        .comment-form-header h3 {
            font-size: 24px;
            margin-bottom: 10px;
            color: white;
        }
        
        .comment-form-header p {
            color: #d2d0ce;
            font-size: 14px;
        }
        
        .comment-form-actions {
            display: flex;
            justify-content: flex-start;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .comments-loading {
            text-align: center;
            padding: 40px 20px;
        }
        
        .loading-spinner-small {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }
        
        .spinner-small {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255, 255, 255, 0.2);
            border-top: 3px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        .comments-loading p {
            color: #d2d0ce;
            font-size: 16px;
        }
        
        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .comments-empty {
            text-align: center;
            color: #d2d0ce;
            padding: 40px 20px;
            font-size: 16px;
        }
        
        .comment-item {
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            padding: 25px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .comment-item:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        .comment-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .comment-author {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .comment-author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 16px;
        }
        
        .comment-author-avatar-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255, 255, 255, 0.2);
        }
        
        .comment-author-info {
            display: flex;
            flex-direction: column;
        }
        
        .comment-author-name {
            font-weight: 600;
            color: white;
            font-size: 16px;
        }
        
        .comment-author-name a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .comment-author-name a:hover {
            color: var(--primary-color);
        }
        
        .comment-date {
            color: #d2d0ce;
            font-size: 12px;
            margin-top: 2px;
        }
        
        .comment-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .comment-badge.open {
            background-color: #28a745;
            color: white;
        }
        
        .comment-badge.closed {
            background-color: #6c757d;
            color: white;
        }
        
        .comment-body {
            color: #e0e0e0;
            line-height: 1.6;
            margin-bottom: 15px;
            word-wrap: break-word;
        }
        
        .comment-body p {
            margin-bottom: 10px;
        }
        
        .comment-body code {
            background-color: rgba(0, 0, 0, 0.3);
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
        }
        
        .comment-body pre {
            background-color: rgba(0, 0, 0, 0.3);
            padding: 15px;
            border-radius: 6px;
            overflow-x: auto;
            margin: 10px 0;
        }
        
        .comment-body pre code {
            background: none;
            padding: 0;
        }
        
        .comment-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .comment-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .comment-link {
            color: var(--primary-color);
            text-decoration: none;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: color 0.3s;
        }
        
        .comment-link:hover {
            color: #106ebe;
        }
        
        .comment-labels {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }
        
        .comment-label {
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
            background-color: rgba(0, 120, 212, 0.2);
            color: #60a5fa;
            border: 1px solid rgba(0, 120, 212, 0.3);
        }

        .comment-form-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            width: 100%;
        }

        .comment-form-actions .left-buttons {
            display: flex;
            gap: 15px;
        }

        .comment-form-actions .right-buttons {
            display: flex;
            gap: 15px;
            margin-left: auto;
        }


        @media (max-width: 768px) {
            .comment-form-actions {
                flex-direction: column;
                align-items: stretch;
                gap: 15px;
            }
            
            .comment-form-actions .right-buttons {
                margin-left: 0;
                order: 2;
            }
            
            .comment-form-actions .left-buttons {
                order: 1;
            }
        }
        
        .dark-mode .system-requirements .comments-section,
        .system-requirements .comments-section {
            border-bottom-color: rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .system-requirements .comment-form-container,
        .system-requirements .comment-form-container {
            background-color: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .system-requirements .comment-form-header h3,
        .system-requirements .comment-form-header h3 {
            color: #ffffff !important;
        }
        
        .dark-mode .system-requirements .comment-form-header p,
        .system-requirements .comment-form-header p {
            color: #d2d0ce !important;
        }
        
        .dark-mode .system-requirements .comment-item,
        .system-requirements .comment-item {
            background-color: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .system-requirements .comment-author-name,
        .dark-mode .system-requirements .comment-author-name a,
        .system-requirements .comment-author-name,
        .system-requirements .comment-author-name a {
            color: #ffffff !important;
        }
        
        .dark-mode .system-requirements .comment-author-name a:hover,
        .system-requirements .comment-author-name a:hover {
            color: var(--primary-color) !important;
        }
        
        .dark-mode .system-requirements .comment-date,
        .system-requirements .comment-date {
            color: #d2d0ce !important;
        }
        
        .dark-mode .system-requirements .comment-body,
        .system-requirements .comment-body {
            color: #e0e0e0 !important;
        }
        
        .dark-mode .system-requirements .comment-body p,
        .dark-mode .system-requirements .comment-body li,
        .system-requirements .comment-body p,
        .system-requirements .comment-body li {
            color: #e0e0e0 !important;
        }
        
        .dark-mode .system-requirements .comment-body code,
        .system-requirements .comment-body code {
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .dark-mode .system-requirements .comment-body pre,
        .system-requirements .comment-body pre {
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .dark-mode .system-requirements .comment-footer,
        .system-requirements .comment-footer {
            border-top-color: rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .system-requirements .comment-link,
        .system-requirements .comment-link {
            color: #60a5fa !important;
        }
        
        .dark-mode .system-requirements .comment-link:hover,
        .system-requirements .comment-link:hover {
            color: var(--primary-color) !important;
        }
        
        .dark-mode .system-requirements .comments-empty,
        .dark-mode .system-requirements .comments-loading p,
        .system-requirements .comments-empty,
        .system-requirements .comments-loading p {
            color: #d2d0ce !important;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .comments-section {
                margin-top: 0;
                margin-bottom: 40px;
                padding-top: 0;
                padding-bottom: 30px;
            }
            
            .comment-form-container {
                padding: 20px;
            }
            
            .comment-form-header h3 {
                font-size: 20px;
            }
            
            .comment-form-actions {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .comment-form-actions button {
                width: 100%;
                max-width: 300px;
                text-align: left;
            }
            
            .comment-item {
                padding: 20px;
            }
            
            .comment-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .comment-footer {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        .third-party-windows-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            overflow-y: auto;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .third-party-windows-modal.show {
            opacity: 1;
        }

        .third-party-modal-content {
            background-color: white;
            margin: 40px auto;
            padding: 30px;
            border-radius: 8px;
            width: 95%;
            max-width: 1200px;
            position: relative;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transform: translateY(-30px);
            opacity: 0;
            transition: all 0.3s ease;
        }

        .third-party-windows-modal.show .third-party-modal-content {
            transform: translateY(0);
            opacity: 1;
        }

        .third-party-close-modal {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            color: var(--gray-color);
            transition: color 0.3s;
        }

        .third-party-close-modal:hover {
            color: var(--primary-color);
        }

        .third-party-modal-title {
            text-align: center;
            margin-bottom: 20px;
            color: var(--dark-color);
        }

        .third-party-modal-title h2 {
            font-size: 25px;
            margin-bottom: 10px;
        }

        .third-party-modal-title p {
            color: var(--gray-color);
            max-width: 600px;
            margin: 0 auto;
        }

        .third-party-tip {
            background-color: #fff3cd;
            border: 2px solid #ffeaa7;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
            margin-bottom: 30px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .third-party-tip i {
            color: #856404;
            font-size: 32px;
        }

        .third-party-tip h3 {
            color: #856404;
            margin-bottom: 5px;
            font-size: 20px;
        }

        .third-party-tip p {
            color: #856404;
            margin-bottom: 0;
            font-size: 16px;
        }

        .third-party-versions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }

        .third-party-version-card {
            background-color: white;
            border-radius: 8px;
            padding: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            border-top: 4px solid var(--primary-color);
            display: flex;
            flex-direction: column;
        }

        .third-party-version-card:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

        .third-party-version-card h3 {
            font-size: 20px;
            margin-bottom: 15px;
            color: var(--dark-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .third-party-version-card h3 i {
            color: var(--primary-color);
        }

        .third-party-version-info {
            margin-bottom: 20px;
            flex-grow: 1;
        }

        .third-party-version-info p {
            color: var(--gray-color);
            line-height: 1.6;
            margin-bottom: 10px;
        }

        .third-party-version-details {
            background-color: #f8f9fa;
            border-radius: 6px;
            padding: 15px;
            margin-top: 15px;
        }

        .third-party-version-details h4 {
            font-size: 16px;
            margin-bottom: 10px;
            color: var(--dark-color);
        }

        .third-party-version-details ul {
            list-style-type: disc;
            padding-left: 20px;
            color: var(--gray-color);
        }

        .third-party-version-details li {
            margin-bottom: 5px;
            font-size: 14px;
        }

        .third-party-download-button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            margin-top: 15px;
        }

        .third-party-download-button:hover {
            background-color: #106ebe;
        }

        .third-party-download-button.disabled {
            background-color: var(--gray-color);
            cursor: not-allowed;
        }

        .third-party-download-button.disabled:hover {
            background-color: var(--gray-color);
        }

        /* 黑色模式适配 */
        .dark-mode .third-party-modal-content {
            background-color: #1e1e1e;
            color: #e0e0e0;
        }

        .dark-mode .third-party-modal-title h2 {
            color: #e0e0e0;
        }

        .dark-mode .third-party-modal-title p {
            color: #b0b0b0;
        }

        .dark-mode .third-party-version-card {
            background-color: #2a2a2a;
            border-top-color: var(--primary-color);
        }

        .dark-mode .third-party-version-card h3 {
            color: #ffffff;
        }

        .dark-mode .third-party-version-card h3 i {
            color: var(--primary-color);
        }

        .dark-mode .third-party-version-info p {
            color: #d0d0d0;
        }

        .dark-mode .third-party-version-details {
            background-color: #3d3d3d;
        }

        .dark-mode .third-party-version-details h4 {
            color: #ffffff;
        }

        .dark-mode .third-party-version-details ul {
            color: #d0d0d0;
        }

        .dark-mode .third-party-tip {
            background-color: #333;
            border-color: #555;
        }

        .dark-mode .third-party-tip i,
        .dark-mode .third-party-tip h3,
        .dark-mode .third-party-tip p {
            color: #ffc107;
        }

        @media (max-width: 768px) {
            .third-party-modal-content {
                padding: 20px;
                margin: 20px auto;
            }
            
            .third-party-versions-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .third-party-version-card {
                padding: 20px;
            }
        }

        /* 其他组件下载模态窗口样式 */
        .components-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            overflow-y: auto;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .components-modal.show {
            opacity: 1;
        }

        .components-modal-content {
            background-color: white;
            margin: 40px auto;
            padding: 30px;
            border-radius: 8px;
            width: 95%;
            max-width: 1400px;
            position: relative;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transform: translateY(-30px);
            opacity: 0;
            transition: all 0.3s ease;
        }

        .components-modal.show .components-modal-content {
            transform: translateY(0);
            opacity: 1;
        }

        .components-close-modal {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            color: var(--gray-color);
            transition: color 0.3s;
        }

        .components-close-modal:hover {
            color: var(--primary-color);
        }

        .components-modal-title {
            text-align: center;
            margin-bottom: 30px;
            color: var(--dark-color);
        }

        .components-modal-title h2 {
            font-size: 25px;
            margin-bottom: 10px;
        }

        .components-modal-title p {
            color: var(--gray-color);
            max-width: 600px;
            margin: 0 auto;
        }

        .components-layout {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 30px;
            margin-top: 20px;
        }

        .components-tree-container {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            max-height: 600px;
            overflow-y: auto;
        }

        .components-search {
            margin-bottom: 20px;
        }

        .components-search input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .components-tree {
            list-style: none;
            padding-left: 0;
        }

        .components-tree li {
            margin-bottom: 8px;
            cursor: pointer;
            padding: 12px 15px;
            border-radius: 4px;
            transition: background-color 0.2s;
            display: flex;
            align-items: center;
        }

        .components-tree li:hover {
            background-color: #e9ecef;
        }

        .components-tree li.active {
            background-color: var(--primary-color);
            color: white;
        }

        .components-tree .component-item {
            font-weight: 500;
            color: var(--dark-color);
        }

        .components-tree .component-icon {
            margin-right: 8px;
            font-size: 16px;
            width: 20px;
            text-align: center;
        }

        .components-content {
            display: flex;
            flex-direction: column;
        }

        .components-article {
            background-color: white;
            border-radius: 8px;
            padding: 25px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            flex-grow: 1;
        }

        .components-article h3 {
            font-size: 22px;
            margin-bottom: 15px;
            color: var(--dark-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .components-article p {
            margin-bottom: 15px;
            line-height: 1.6;
            color: var(--gray-color);
        }

        .components-article h4 {
            font-size: 18px;
            margin: 20px 0 10px;
            color: var(--dark-color);
        }

        .components-article ul {
            list-style-type: disc;
            padding-left: 20px;
            margin-bottom: 15px;
        }

        .components-article li {
            margin-bottom: 8px;
            color: var(--gray-color);
        }

        .components-actions {
            text-align: center;
        }

        /* 黑色模式适配 */
        .dark-mode .components-modal-content {
            background-color: #1e1e1e;
            color: #e0e0e0;
        }

        .dark-mode .components-modal-title h2 {
            color: #e0e0e0;
        }

        .dark-mode .components-modal-title p {
            color: #b0b0b0;
        }

        .dark-mode .components-tree-container {
            background-color: #2d2d2d;
        }

        .dark-mode .components-search input {
            background-color: #3d3d3d;
            color: #e0e0e0;
            border-color: #555;
        }

        .dark-mode .components-tree li {
            color: #e0e0e0;
        }

        .dark-mode .components-tree li:hover {
            background-color: #3d3d3d;
        }

        .dark-mode .components-tree li.active {
            background-color: var(--primary-color);
            color: white;
        }

        .dark-mode .components-tree .component-item {
            color: #e0e0e0;
        }

        .dark-mode .components-article {
            background-color: #2a2a2a;
            color: #f0f0f0;
        }

        .dark-mode .components-article h3 {
            color: #ffffff;
        }

        .dark-mode .components-article p {
            color: #d0d0d0;
        }

        .dark-mode .components-article h4 {
            color: #ffffff;
        }

        .dark-mode .components-article li {
            color: #d0d0d0;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .components-layout {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .components-tree-container {
                max-height: 300px;
                order: 1;
            }
            
            .components-content {
                order: 2;
            }
            
            .components-tree li {
                padding: 10px 12px;
                font-size: 14px;
            }
            
            .components-article {
                padding: 20px;
            }
            
            .components-article h3 {
                font-size: 20px;
            }
        }

        @media (max-width: 480px) {
            .components-tree-container {
                max-height: 250px;
            }
            
            .components-tree li {
                padding: 8px 10px;
                font-size: 13px;
            }
            
            .components-article {
                padding: 15px;
            }
            
            .components-article h3 {
                font-size: 18px;
            }
            
            .components-modal-content {
                padding: 20px 15px;
                margin: 20px auto;
            }
        }

        /* 子卡片暗色模式适配 */
        .dark-mode .custom-modal-content {
            background-color: #1e1e1e;
            color: #e0e0e0;
        }

        .dark-mode .custom-modal-title h3 {
            color: #e0e0e0;
        }

        .dark-mode .custom-modal-title p {
            color: #b0b0b0;
        }

        .dark-mode .custom-modal-body p {
            color: #e0e0e0;
        }
		
		/* 汉堡菜单按钮样式 */
        .hamburger-button {
            display: none;
            background: rgba(255, 255, 255, 0.322);
            border: 2px solid rgba(255, 255, 255, 0.363);
            color: rgba(75, 75, 75);
            font-size: 20px;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;
            position: fixed;
            left: 15px;
            top: 20px;
            z-index: 1000;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            width: 44px;
            height: 44px;
            align-items: center;
            justify-content: center;
            z-index: 10000 !important;
        }

        .hamburger-button:hover {
            background: rgba(255, 255, 255, 0.921);
            border-color: var(--primary-color);
            box-shadow: 0 6px 16px rgba(255, 255, 255, 0.88);
            transform: scale(1.05);
        }

        .hamburger-button:active {
            background: rgba(190, 190, 190, 0.575);
            transform: scale(0.95);
        }

        .dark-mode .hamburger-button {
            background: rgba(30, 30, 30, 0.534);
            border: 1px solid rgba(224, 224, 224, 0.017);
            color: #e0e0e0;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            box-shadow: 0 4px 12px rgba(214, 214, 214, 0);
        }

        .dark-mode .hamburger-button:hover {
            background: rgba(212, 212, 212, 0.9);
            border-color: rgba(224, 224, 224, 0.5);
        }

	
		.close-menu {
			display: none !important;
		}

		.mobile-nav-container {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(226, 226, 226, 0.195);
			backdrop-filter: blur(30px);
			-webkit-backdrop-filter: blur(30px);
			z-index: 999;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			opacity: 0;
			visibility: hidden;
			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		}

        .dark-mode .mobile-nav-container {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.568);
			backdrop-filter: blur(20px);
			-webkit-backdrop-filter: blur(20px);
			z-index: 999;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			opacity: 0;
			visibility: hidden;
			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		}

		.mobile-nav-container.active {
			opacity: 1;
			visibility: visible;
		}

		/* 菜单内容容器 */
		.mobile-nav-content {
			width: 100%;
			max-width: 320px;
			padding: 30px;
			background: rgba(255, 255, 255, 0.298);
			border-radius: 20px;
			backdrop-filter: blur(30px);
			-webkit-backdrop-filter: blur(30px);
			border: 1px solid rgba(255, 255, 255, 0.247);
			box-shadow: 0 20px 60px rgba(255, 255, 255, 0.394);
			transform: translateY(10px);
			transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		}

		.mobile-nav-container.active .mobile-nav-content {
			transform: translateY(0);
		}

		.mobile-nav-menu {
			list-style: none;
			text-align: center;
			width: 100%;
			padding: 10px 0;
		}

		.mobile-nav-menu li {
			margin: 12px 0;
			opacity: 0;
			transform: translateY(10px);
			transition: all 0.3s ease;
		}

		.mobile-nav-container.active .mobile-nav-menu li {
			opacity: 1;
			transform: translateY(0);
		}

		/* 为每个菜单项添加延迟动画 */
		.mobile-nav-menu li:nth-child(1) { transition-delay: 0.1s; }
		.mobile-nav-menu li:nth-child(2) { transition-delay: 0.2s; }
		.mobile-nav-menu li:nth-child(3) { transition-delay: 0.3s; }
		.mobile-nav-menu li:nth-child(4) { transition-delay: 0.4s; }
		.mobile-nav-menu li:nth-child(5) { transition-delay: 0.5s; }
		.mobile-nav-menu li:nth-child(6) { transition-delay: 0.6s; }
		.mobile-nav-menu li:nth-child(7) { transition-delay: 0.7s; }

		.mobile-nav-menu li a {
			color: rgb(35, 35, 35);
			text-decoration: none;
			font-size: 18px;
			font-weight: 500;
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 16px 24px;
			border-radius: 12px;
			background: rgba(161, 161, 161, 0.394);
			border: 1px solid rgba(255, 255, 255, 0.1);
			position: relative;
			overflow: hidden;
		}

		.mobile-nav-menu li a::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.822), transparent);
			transition: left 0.5s ease;
		}

		.mobile-nav-menu li a:hover {
			background: rgba(228, 228, 228, 0.767);
			border-color: rgba(255, 255, 255, 0.952);
			transform: translateX(8px);
			box-shadow: 0 8px 20px rgba(206, 206, 206, 0.2);
		}

		.mobile-nav-menu li a:hover::before {
			left: 100%;
		}

		.mobile-nav-menu li a i {
			margin-right: 12px;
			font-size: 20px;
			width: 24px;
			text-align: center;
			transition: transform 0.3s ease;
		}

		.mobile-nav-menu li a:hover i {
			transform: scale(1.2);
		}

		/* 图标颜色 */
		.mobile-nav-menu li:nth-child(1) a i { color: #4fc3f7; }
		.mobile-nav-menu li:nth-child(2) a i { color: #81c784; }
		.mobile-nav-menu li:nth-child(3) a i { color: #ffb74d; }
		.mobile-nav-menu li:nth-child(4) a i { color: #e57373; }
		.mobile-nav-menu li:nth-child(5) a i { color: #9575cd; }
		.mobile-nav-menu li:nth-child(6) a i { color: #fb7299; }
		.mobile-nav-menu li:nth-child(7) a i { color: #64b5f6; }

		/* 黑色模式适配 */
		.dark-mode .mobile-nav-container {
			background: rgba(18, 18, 18, 0.92);
		}

		.dark-mode .mobile-nav-content {
			background: rgba(30, 30, 30, 0.6);
			border: 1px solid rgba(255, 255, 255, 0.08);
		}

		.dark-mode .mobile-nav-menu li a {
			color: rgba(255, 255, 255, 0.873);
            background: rgba(255, 255, 255, 0.03);
			border: 1px solid rgba(255, 255, 255, 0.08);
		}

		.dark-mode .mobile-nav-menu li a:hover {
			background: rgba(255, 255, 255, 0.08);
			border-color: rgba(255, 255, 255, 0.15);
		}

		/* 菜单标题 */
		.menu-title {
			text-align: center;
			color: white;
			font-size: 14px;
			margin-bottom: 25px;
			opacity: 0.8;
			letter-spacing: 2px;
			text-transform: uppercase;
			font-weight: 500;
		}

		/* 移动端适配 */
		@media (max-width: 768px) {
            header {
                z-index: 99;
            }

            .theme-toggle {
                position: absolute;
                right: 15px;
                top: 50%;
                transform: translateY(-50%);
                margin-left: 0;
                z-index: 10001;
            }

            nav ul {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                margin-top: 0;
                flex-grow: 1;
                margin-right: 60px; /* 为主题按钮留出空间 */
                -ms-overflow-style: none;  /* IE and Edge */
                scrollbar-width: none;  /* Firefox */
            }

            .mobile-nav-container {
                z-index: 9999 !important;
            }

            .header-content .logo {
                display: none !important;
            }
            
            .hamburger-button {
                display: flex !important;
            }
            
            .header-content {
                min-height: 70px;
                padding-top: 10px;
                padding-bottom: 10px;
            }

            .header-content .logo {
                display: none !important;
            }
            
            .nav-right nav {
                display: none !important;
            }
            
            .nav-right {
                position: relative;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 0;
                padding-right: 60px;
            }
        }

        body {
            position: relative;
        }

        .service-modal-body {
            max-height: 70vh;
            overflow-y: auto;
            padding: 20px;
            text-align: left;
        }

        .service-modal-body h3 {
            font-size: 22px;
            margin-bottom: 20px;
            color: var(--primary-color);
            text-align: center;
        }

        .service-modal-body h4 {
            font-size: 18px;
            margin: 25px 0 15px;
            color: var(--dark-color);
            padding-bottom: 5px;
            border-bottom: 1px solid #eee;
        }

        .service-modal-body p {
            margin-bottom: 15px;
            line-height: 1.6;
            color: var(--gray-color);
        }

        .service-modal-body ul {
            margin-left: 20px;
            margin-bottom: 15px;
        }

        .service-modal-body li {
            margin-bottom: 8px;
            color: var(--gray-color);
            line-height: 1.5;
        }

        .service-note {
            margin-top: 30px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid var(--primary-color);
        }

        .service-note p {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }

        /* 深色模式适配 */
        .dark-mode .service-modal-body h4 {
            color: #e0e0e0;
            border-bottom-color: #444;
        }

        .dark-mode .service-modal-body p,
        .dark-mode .service-modal-body li {
            color: #d0d0d0;
        }

        .dark-mode .service-note {
            background-color: #2a2a2a;
        }

        .dark-mode .service-note p {
            color: #b0b0b0;
        }
		
		/* 回复评论样式 */
		.comment-replies {
			margin-left: 40px;
			border-left: 3px solid rgba(0, 120, 212, 0.2);
			padding-left: 20px;
			margin-top: 20px;
			padding-top: 10px;
		}

		.comment-reply {
			background-color: rgba(255, 255, 255, 0.03);
			border: 1px solid rgba(255, 255, 255, 0.08);
			margin-bottom: 15px;
		}

		.comment-reply:last-child {
			margin-bottom: 0;
		}

		.dark-mode .comment-reply {
			background-color: rgba(255, 255, 255, 0.02);
			border-color: rgba(255, 255, 255, 0.05);
		}

		/* 回复指示器 */
		.reply-indicator {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			font-size: 12px;
			color: #60a5fa;
			margin-left: 5px;
		}

		.reply-indicator i {
			font-size: 10px;
		}

		/* 回复按钮样式 */
		.reply-button {
			background-color: transparent;
			color: #60a5fa;
			border: none;
			padding: 5px 10px;
			border-radius: 4px;
			font-size: 12px;
			cursor: pointer;
			transition: background-color 0.3s;
			display: inline-flex;
			align-items: center;
			gap: 5px;
		}

		.reply-button:hover {
			background-color: rgba(0, 120, 212, 0.1);
		}

		/* 回复表单样式 */
		.reply-form {
			background-color: rgba(255, 255, 255, 0.05);
			border-radius: 8px;
			padding: 20px;
			margin-top: 15px;
			border: 1px solid rgba(255, 255, 255, 0.1);
			display: none;
		}

		.reply-form.active {
			display: block;
		}

		.reply-form-header {
			margin-bottom: 15px;
			padding-bottom: 10px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		}

		.reply-form-header h4 {
			font-size: 16px;
			color: white;
			margin-bottom: 5px;
		}

		.reply-form-header p {
			font-size: 12px;
			color: #d2d0ce;
		}

		.reply-form-actions {
			display: flex;
			justify-content: flex-end;
			gap: 10px;
			margin-top: 15px;
		}

		.reply-cancel {
			background-color: transparent;
			color: #d2d0ce;
			border: 1px solid rgba(255, 255, 255, 0.2);
			padding: 8px 15px;
			border-radius: 4px;
			cursor: pointer;
		}

		.reply-cancel:hover {
			background-color: rgba(255, 255, 255, 0.1);
		}

		.reply-submit {
			background-color: var(--primary-color);
			color: white;
			border: none;
			padding: 8px 20px;
			border-radius: 4px;
			cursor: pointer;
		}

		.reply-submit:hover {
			background-color: #106ebe;
		}

		/* 加载更多回复按钮 */
		.load-more-replies {
			background-color: rgba(0, 120, 212, 0.1);
			color: #60a5fa;
			border: 1px solid rgba(0, 120, 212, 0.3);
			padding: 8px 15px;
			border-radius: 4px;
			font-size: 12px;
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			gap: 5px;
			margin-top: 10px;
			transition: all 0.3s;
		}

		.load-more-replies:hover {
			background-color: rgba(0, 120, 212, 0.2);
		}

		/* 回复数量指示器 */
		.reply-count {
			font-size: 12px;
			color: #d2d0ce;
			margin-left: 5px;
			display: inline-flex;
			align-items: center;
			gap: 3px;
		}

		/* Markdown工具栏样式 */
		.markdown-toolbar {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			margin-bottom: 10px;
			padding: 10px;
			background-color: rgba(255, 255, 255, 0.03);
			border-radius: 6px;
			border: 1px solid rgba(255, 255, 255, 0.1);
		}

		.markdown-button {
			background-color: rgba(255, 255, 255, 0.08);
			color: #d2d0ce;
			border: none;
			padding: 6px 12px;
			border-radius: 4px;
			font-size: 12px;
			cursor: pointer;
			transition: all 0.3s;
			display: inline-flex;
			align-items: center;
			gap: 5px;
		}

		.markdown-button:hover {
			background-color: rgba(0, 120, 212, 0.2);
			color: white;
		}

		.markdown-button.active {
			background-color: var(--primary-color);
			color: white;
		}

		.markdown-preview {
			background-color: rgba(0, 0, 0, 0.2);
			border-radius: 6px;
			padding: 15px;
			margin-top: 10px;
			border: 1px solid rgba(255, 255, 255, 0.1);
			display: none;
		}

		.markdown-preview.active {
			display: block;
		}

		.markdown-preview h4 {
			font-size: 14px;
			margin-bottom: 10px;
			color: white;
		}

		.markdown-help {
			font-size: 11px;
			color: #d2d0ce;
			margin-top: 5px;
			padding: 8px;
			background-color: rgba(0, 0, 0, 0.3);
			border-radius: 4px;
			border-left: 3px solid var(--primary-color);
		}

		/* 响应式调整 */
		@media (max-width: 768px) {
			.comment-replies {
				margin-left: 20px;
				padding-left: 15px;
			}
			
			.markdown-toolbar {
				gap: 5px;
			}
			
			.markdown-button {
				padding: 5px 8px;
				font-size: 11px;
			}
		}
		
		.community-buttons {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 15px;
		}

		@media (max-width: 768px) {
			.community-buttons {
				flex-direction: column;
				align-items: center;
			}
			
			.community-buttons .cta-button {
				margin-left: 0 !important;
				width: 100%;
				max-width: 300px;
			}
		}
		
		@media (max-width: 768px) {
			/* 隐藏原有的Header区域—代码 */
			header {
				display: none !important;
			}
			
			.hamburger-button {
				display: flex !important;
				z-index: 10000 !important;
			}
			
			.container {
				padding-top: 20px;
			}
			
			.hero {
				padding: 120px 0 100px;
			}
			
			.mobile-nav-container {
				display: flex;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(226, 226, 226, 0.647);
				backdrop-filter: blur(10px);
				-webkit-backdrop-filter: blur(10px);
				z-index: 999;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				opacity: 0;
				visibility: hidden;
				transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
			}
			
			.dark-mode .mobile-nav-container {
				background: rgba(18, 18, 18, 0.25);
			}
			
			.theme-toggle {
				position: fixed;
				right: 15px;
				top: 15px;
				z-index: 10001;
				margin-left: 0;
			}
			
			/* 调整页面滚动行为 */
			body {
				padding-top: 0;
			}
		}
		
		/* 移动端主题切换按钮样式 */
		.mobile-theme-toggle {
			display: none !important;
			background: rgba(255, 255, 255, 0.12);
			border: 1px solid rgba(255, 255, 255, 0.1);
			color: rgba(75, 75, 75);
			font-size: 20px;
			cursor: pointer;
			padding: 8px;
			border-radius: 50%;
			transition: all 0.4s ease;
			position: fixed;
			left: 70px;
			top: 20px;
			z-index: 10000 !important;
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			box-shadow: 0 4px 12px rgba(255, 255, 255, 0);
			width: 44px;
			height: 44px;
			align-items: center;
			justify-content: center;
		}

		.mobile-theme-toggle:hover {
			background: rgba(255, 255, 255, 0.127);
			border-color: rgba(0, 0, 0, 0.05);
			box-shadow: 0 6px 16px rgba(255, 255, 255, 0.1);
			transform: scale(1.05);
		}

		.mobile-theme-toggle:active {
			background: rgba(255, 255, 255, 0);
			transform: scale(0.95);
		}

		.dark-mode .mobile-theme-toggle {
			background: rgba(255, 255, 255, 0);
			border: 1px solid rgba(255, 255, 255, 0);
			color: #e0e0e0;
			backdrop-filter: blur(15px);
			-webkit-backdrop-filter: blur(15px);
			box-shadow: 0 4px 12px rgba(255, 255, 255, 0);
		}

		.dark-mode .mobile-theme-toggle:hover {
			background: rgba(0, 0, 0, 0);
			border-color: rgba(0, 0, 0, 0);
		}

		/* 移动端适配--导航栏 */
		@media (max-width: 768px) {
			.mobile-theme-toggle {
				display: flex !important;
			}
			
			.theme-toggle {
				display: none !important;
			}
		}
		
		/* 打赏弹窗样式 */
		.donation-modal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.7);
			z-index: 1000;
			overflow-y: auto;
			opacity: 0;
			transition: opacity 0.3s ease;
		}
		.donation-modal.show {
			opacity: 1;
		}
		.donation-modal-content {
			background-color: white;
			margin: 100px auto;
			padding: 30px;
			border-radius: 8px;
			width: 95%;
			max-width: 500px;
			position: relative;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
			transform: translateY(-30px);
			opacity: 0;
			transition: all 0.3s ease;
		}
		.donation-modal.show .donation-modal-content {
			transform: translateY(0);
			opacity: 1;
		}
		.donation-close-modal {
			position: absolute;
			top: 15px;
			right: 20px;
			font-size: 28px;
			font-weight: bold;
			cursor: pointer;
			color: var(--gray-color);
			transition: color 0.3s;
		}
		.donation-close-modal:hover {
			color: var(--primary-color);
		}
		.donation-modal-title {
			text-align: center;
			margin-bottom: 20px;
			color: var(--dark-color);
		}
		.donation-modal-title h3 {
			font-size: 24px;
			margin-bottom: 10px;
		}
		.donation-body {
			text-align: center;
		}
		.donation-body button {
			margin: 20px 0;
		}
		.donation-body label {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			color: var(--gray-color);
			cursor: pointer;
		}
		/* 深色模式适配 */
		.dark-mode .donation-modal-content {
			background-color: #1e1e1e;
			color: #e0e0e0;
		}
		.dark-mode .donation-modal-title h3 {
			color: #e0e0e0;
		}
		.dark-mode .donation-body label {
			color: #b0b0b0;
		}
		/* 移动端适配 */
		@media (max-width: 768px) {
			.donation-modal-content {
				margin: 50px auto;
				width: 90%;
				padding: 20px;
			}
		}
		
		/* 打赏弹窗按钮增强样式 */
		.donation-body button.cta-button {
			width: 100%;
			max-width: 280px;
			margin: 20px auto;
			display: block;
			box-sizing: border-box;
		}

		/* 复选框区域样式优化 */
		.donation-body label {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			margin-top: 15px;
			padding: 8px;
			border-radius: 4px;
			background-color: rgba(0, 0, 0, 0.02);
			cursor: pointer;
			transition: background-color 0.2s;
		}

		.donation-body label:hover {
			background-color: rgba(0, 120, 212, 0.05);
		}

		.donation-body input[type="checkbox"] {
			width: 16px;
			height: 16px;
			cursor: pointer;
		}

		/* 深色模式适配 */
		.dark-mode .donation-body label {
			background-color: rgba(255, 255, 255, 0.05);
		}

		.dark-mode .donation-body label:hover {
			background-color: rgba(0, 120, 212, 0.2);
		}
		

		/* 可读性处理 */
		.section-with-bg,
		.section-with-bg .section-title h1,
        .section-with-bg .section-title h2,
		.section-with-bg .section-title p {
			color: #131918;
		}

        .dark-mode .section-with-bg,
		.dark-mode .section-with-bg .section-title h1,
        .dark-mode .section-with-bg .section-title h2,
		.dark-mode .section-with-bg .section-title p {
			color: #d2d2d2;
		}

		/* 标题添加阴影 */
		.section-with-bg .section-title h1,
		.section-with-bg .section-title p {
			text-shadow: 0 2px 6px rgba(162, 162, 162, 0.777);
		}
		.dark-mode .section-with-bg .section-title h1,
		.dark-mode .section-with-bg .section-title p {
			text-shadow: 0 2px 6px rgba(255,255,255,0.3);
		}
				
		/* 通用-带背景图的区域样式 */
		.section-with-bg {
			position: relative;
			padding: 80px 0;
			text-align: center;
			    background: url('https://wallpapers.com/images/hd/windows-11-sunset-river-p338ziv0ywmtwlnd.jpg') center/cover fixed no-repeat;
			color: #323130;
		}

		.section-with-bg::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.2); /* 浅色遮罩 */
			z-index: 1;
		}

		.section-with-bg .container {
			position: relative;
			z-index: 2;
		}

		/* 深色模式适配 */
		.dark-mode .section-with-bg::before {
			background: rgba(30, 30, 30, 0.1); /* 深色遮罩 */
		}

		.dark-mode .section-with-bg {
			color: #e0e0e0;
		}
		
		/* 通用带背景图的区域样式（特殊） */
        .section-with-ts,
		.section-with-ts .section-title h1,
        .section-with-ts .section-title h2,
		.section-with-ts .section-title p {
			color: #131918;
		}

        .dark-mode .section-with-ts,
		.dark-mode .section-with-ts .section-title h1,
        .dark-mode .section-with-ts .section-title h2,
		.dark-mode .section-with-ts .section-title p {
			color: #d2d2d2;
		}

		/* 标题添加阴影 */
		.section-with-ts .section-title h1,
		.section-with-ts .section-title p {
			text-shadow: 0 2px 6px rgba(162, 162, 162, 0.2);
		}
		.dark-mode .section-with-ts .section-title h1,
		.dark-mode .section-with-ts .section-title p {
			text-shadow: 0 2px 6px rgba(255,255,255,0.3);
		}

		.section-with-ts {
			position: relative;
			padding: 80px 0;
			text-align: center;
			background: url('https://c.53326.com/d/file/lan20200121/yh1zzzepjl0.jpg') center/cover fixed no-repeat;
			color: #323130;
		}

		.section-with-ts::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.3); /* 浅色遮罩 */
			z-index: 1;
		}

		.section-with-ts .container {
			position: relative;
			z-index: 2;
		}

		/* 深色模式适配 */
		.dark-mode .section-with-ts::before {
			background: rgba(30, 30, 30, 0.3); /* 深色遮罩 */
		}

		.dark-mode .section-with-ts {
			color: #e0e0e0;
		}


        /* 标题添加阴影 */
		.section-with-ta .section-title h1,
		.section-with-ta .section-title p {
			text-shadow: 0 2px 6px rgba(162, 162, 162, 0.777);
		}
		.dark-mode .section-with-ta .section-title h1,
		.dark-mode .section-with-ta .section-title p {
			text-shadow: 0 2px 6px rgba(255,255,255,0.3);
		}

		.section-with-ta {
			position: relative;
			padding: 80px 0;
			text-align: center;
			background: url('https://c.53326.com/d/file/lan20200121/yh1zzzepjl0.jpg') center/cover fixed no-repeat;
			color: #323130;
		}

		.section-with-ta::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.1); /* 浅色遮罩 */
			z-index: 1;
		}

		.section-with-ta .container {
			position: relative;
			z-index: 2;
            text-align: left;
		}

		/* 深色模式适配 */
		.dark-mode .section-with-ta::before {
			background: rgba(30, 30, 30, 0.1); /* 深色遮罩 */
		}

		.dark-mode .section-with-ta {
			color: #e0e0e0;
		}

        /* 打赏弹窗复选框标签样式覆写 */
        .donation-body label {
            color: var(--primary-color); 
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .donation-body input[type="checkbox"] {
            accent-color: var(--primary-color);
            width: 16px;
            height: 16px;
            margin-right: 6px;   
            cursor: pointer;
        }

        /* 深色模式适配 */
        .dark-mode .donation-body label {
            color: #60a5fa;
        }

        .dark-mode .donation-body input[type="checkbox"] {
            accent-color: #60a5fa;
        }

        .modal-content {
            box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3);
        }

        /* 服务弹窗段落文字颜色重写 */
        .service-modal-body p,
        .service-modal-body li,
        .service-modal-body .service-note p {
            color: #07121e !important;
            font-weight: 400;
            line-height: 1.6;
        }

        .dark-mode .service-modal-body p,
        .dark-mode .service-modal-body li,
        .dark-mode .service-modal-body .service-note p {
            color: #e0e0e0 !important;
        }

        .dark-mode .service-modal-body h3,
        .dark-mode .service-modal-body h4 {
            color: #ffffff !important;
        }

        /* 所有弹窗标题文字颜色重覆写 */
        .modal-title p,
        .official-modal-title p,
        .third-party-modal-title p,
        .components-modal-title p,
        .service-modal-title p,
        .about-modal-title p,
        .donation-modal-title p,
        .custom-modal-title p {
            color: #091522 !important;
            font-weight: 400;
            margin-top: 5px;
        }

        /* 深色模式 */
        .dark-mode .modal-title p,
        .dark-mode .official-modal-title p,
        .dark-mode .third-party-modal-title p,
        .dark-mode .components-modal-title p,
        .dark-mode .service-modal-title p,
        .dark-mode .about-modal-title p,
        .dark-mode .donation-modal-title p,
        .dark-mode .custom-modal-title p {
            color: #e0e0e0 !important;
        }

        /* iOS修复 */
        @supports (-webkit-overflow-scrolling: touch) {
            .section-with-bg,
            .section-with-ts,
            .section-with-ta {
                background-attachment: scroll !important;
            }
        }

        /* 悬浮按钮-老机器卡顿点我 */
        .floating-slow-btn {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background-color: #006eff;
            color: white;
            padding: 12px 20px;
            border-radius: 40px;
            font-weight: 600;
            text-decoration: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            z-index: 100;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.3s, transform 0.2s;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .floating-slow-btn:hover {
            background-color: #0150b6;
            transform: scale(1.05);
            box-shadow: 0 6px 16px rgba(0,0,0,0.1);
        }

        .floating-slow-btn i {
            font-size: 18px;
        }

        .dark-mode .floating-slow-btn {
            background-color: #002d69;
            color: #eee;
            border-color: rgba(255,255,255,0.2);
        }

        .dark-mode .floating-slow-btn:hover {
            background-color: #00459f;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .floating-slow-btn {
                bottom: 15px;
                left: 20px;
                padding: 10px 16px;
                font-size: 14px;
            }
        }

        /* 视图切换按钮 */
        .view-toggle {
            position: relative;
            display: flex;
            justify-content: flex-start;
            gap: 12px;
            margin: 20px 0 10px;
        }
        .view-toggle-btn {
            background-color: var(--gray-color);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .view-toggle-btn i {
            font-size: 16px;
        }
        .view-toggle-btn.active {
            background-color: var(--primary-color);
        }
        .view-toggle-btn:hover {
            background-color: #106ebe;
            transform: scale(1.02);
        }
        /* 列表视图样式 */
        .list-view-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 20px;
        }
        .list-item {
            display: flex;
            align-items: center;
            background-color: white;
            border-radius: 8px;
            padding: 15px 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            border-left: 4px solid var(--primary-color);
            transition: box-shadow 0.2s;
        }
        .list-item:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .list-item-icon {
            font-size: 24px;
            color: var(--primary-color);
            width: 50px;
            text-align: center;
        }
        .list-item-info {
            flex: 1;
            margin: 0 15px;
        }
        .list-item-title {
            font-weight: 600;
            font-size: 18px;
            color: var(--dark-color);
            margin-bottom: 4px;
        }
        .list-item-version {
            font-size: 14px;
            color: var(--gray-color);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .list-item-actions {
            display: flex;
            gap: 10px;
            flex-shrink: 0;
        }
        .list-item-actions button {
            padding: 8px 16px;
            font-size: 14px;
            white-space: nowrap;
        }
        /* 深色模式适配 */
        .dark-mode .list-item {
            background-color: #2a2a2a;
        }
        .dark-mode .list-item-title {
            color: #ffffff;
        }
        .dark-mode .list-item-version {
            color: #d0d0d0;
        }
        /* 移动端适配 */
        @media (max-width: 768px) {
            .list-item {
                flex-wrap: wrap;
                padding: 12px;
            }
            .list-item-icon {
                width: 40px;
                font-size: 20px;
            }
            .list-item-info {
                margin: 0 10px 0 0;
            }
            .list-item-actions {
                width: 100%;
                margin-top: 10px;
                justify-content: flex-end;
            }
        }

        /* 官方视图切换按钮 */
        .official-view-toggle {
            position: relative;
            display: flex;
            justify-content: flex-start;
            gap: 12px;
            margin: 20px 0 10px;
        }
        .official-view-toggle-btn {
            background-color: var(--gray-color);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .official-view-toggle-btn i {
            font-size: 16px;
        }
        .official-view-toggle-btn.active {
            background-color: var(--primary-color);
        }
        .official-view-toggle-btn:hover {
            background-color: #106ebe;
            transform: scale(1.02);
        }

        /* 官方列表视图容器 */
        .official-list-view-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 20px;
        }

        /* 官方列表项 */
        .official-list-item {
            display: flex;
            align-items: center;
            background-color: white;
            border-radius: 8px;
            padding: 15px 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            border-left: 4px solid var(--primary-color);
            transition: box-shadow 0.2s;
        }
        .official-list-item:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .official-list-item-icon {
            font-size: 24px;
            color: var(--primary-color);
            width: 50px;
            text-align: center;
        }
        .official-list-item-info {
            flex: 1;
            margin: 0 15px;
        }
        .official-list-item-title {
            font-weight: 600;
            font-size: 18px;
            color: var(--dark-color);
            margin-bottom: 4px;
        }
        .official-list-item-version {
            font-size: 14px;
            color: var(--gray-color);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .official-list-item-actions {
            display: flex;
            gap: 10px;
            flex-shrink: 0;
        }
        .official-list-item-actions button {
            padding: 8px 16px;
            font-size: 14px;
            white-space: nowrap;
        }

        /* 深色模式适配 */
        .dark-mode .official-list-item {
            background-color: #2a2a2a;
        }
        .dark-mode .official-list-item-title {
            color: #ffffff;
        }
        .dark-mode .official-list-item-version {
            color: #d0d0d0;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .official-list-item {
                flex-wrap: wrap;
                padding: 12px;
            }
            .official-list-item-icon {
                width: 40px;
                font-size: 20px;
            }
            .official-list-item-info {
                margin: 0 10px 0 0;
            }
            .official-list-item-actions {
                width: 100%;
                margin-top: 10px;
                justify-content: flex-end;
            }
        }
        .view-slider {
            position: absolute;
            bottom: -3px;
            left: 0;
            height: 3px;
            background-color: #00ffff;
            border-radius: 3px;
            transition: left 0.3s ease, width 0.3s ease;
            pointer-events: none;
            z-index: 2;
        }
        /* 官方滑块样式 */
        .official-view-slider {
            position: absolute;
            bottom: -3px;
            left: 0;
            height: 3px;
            background-color: #00ffff;
            border-radius: 3px;
            transition: left 0.3s ease, width 0.3s ease;
            pointer-events: none;
            z-index: 2;
        }
        .view-toggle-btn,
        .official-view-toggle-btn {
            position: relative;
            z-index: 1;
            background-color: var(--primary-color);
			color: white;
        }
        .dark-mode .view-slider,
        .dark-mode .official-view-slider {
            background-color: var(--primary-color);
			color: white;
        }

        /* 覆写原本的视图切换动画 */
        .view-toggle,
        .official-view-toggle {
            position: relative;
            display: inline-flex;
            background-color: #626262;
            border-radius: 30px;
            padding: 4px;
            gap: 4px; 
            justify-content: flex-start;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }
        .dark-mode .view-toggle,
        .dark-mode .official-view-toggle {
            background-color: #091522;
            justify-content: flex-start;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }

        /* 按钮样式调整 */
        .view-toggle-btn,
        .official-view-toggle-btn {
            background: transparent;
            border: none;
            color: #f0f0f0;
            padding: 8px 20px;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            transition: color 0.3s, background-color 0.3s;
            z-index: 1;
        }
        .view-slider,
        .official-view-slider {
            position: absolute;
            bottom: 4px;
            height: calc(100% - 8px);
            background-color: #ffffff;
            border-radius: 30px;
            transition: left 0.3s ease, width 0.3s ease;
            pointer-events: none;
            z-index: 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

		/* 评论反馈区域纯黑背景覆写 */
		.system-requirements .comment-form-container,
		.system-requirements .comment-item,
		.system-requirements .comment-reply,
		.system-requirements .reply-form {
			background-color: #222222 !important;
			backdrop-filter: none !important;
			-webkit-backdrop-filter: none !important;
			border-color: rgba(255, 255, 255, 0.2) !important;
		}

		/* 同时调整文字颜色以保证可读性（白色） */
		.system-requirements .comment-form-header h3,
		.system-requirements .comment-form-header p,
		.system-requirements .comment-author-name,
		.system-requirements .comment-author-name a,
		.system-requirements .comment-date,
		.system-requirements .comment-body,
		.system-requirements .comment-body p,
		.system-requirements .comment-link,
		.system-requirements .reply-form-header h4,
		.system-requirements .reply-form-header p {
			color: #ffffff !important;
		}

		/* 输入框背景也改为深色 */
		.system-requirements textarea,
		.system-requirements input[type="text"] {
			background-color: #1a1a1a !important;
			color: #ffffff !important;
			border-color: #444 !important;
		}
		
		/* 紧急通知样式 */
		.floating-notice {
			position: fixed;
			top: 130px;
			right: 0;
			width: 320px;
			background: rgba(34,34,34);
			border-radius: 12px;
			box-shadow: -2px 4px 2px rgba(34,34,34);
			z-index: 102;
			border-right: none;
			opacity: 0;
			visibility: hidden;
			transform: translateX(50px);
			transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
			cursor: default;
		}

		.floating-notice.show {
			opacity: 1;
			visibility: visible;
			transform: translateX(0);
		}

		/* 移动端适配 */
		@media (max-width: 768px) {
			.floating-notice {
				width: 280px;
				top: 15px;
				right: 0;
			}
		}

		/* 头部样式 */
		.notice-header {
			padding: 12px 15px;
			background: transparent;
			border-radius: 12px 12px 0 0;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: space-between;
			cursor: pointer;
		}

		.notice-title {
			font-size: 15px;
			color: white;
		}

		/* 关闭按钮 */
		.notice-close {
			background: none;
			border: none;
			color: white;
			font-size: 20px;
			cursor: pointer;
			padding: 0;
			width: 24px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			transition: background-color 0.2s;
		}

		.notice-content {
			padding: 15px;
			font-size: 14px;
			color: #f0f0f0;
			line-height: 1.5;
		}

		/* 深色模式下头部也不变色 */
		.dark-mode .notice-header {
			background: transparent;
			border-bottom-color: rgba(255, 255, 255);
		}

		/* 深色模式适配 */
		.dark-mode ::-webkit-scrollbar,
		.dark-mode ::-webkit-scrollbar-track,
		.dark-mode ::-webkit-scrollbar-corner {
			background-color: rgba(0, 0, 0, 0);
		}
		.dark-mode ::-webkit-scrollbar-thumb {
			background-color: rgba(0, 0, 0, 0);
		}
		.dark-mode ::-webkit-scrollbar-thumb:hover {
			background-color: #7a7a7a;
		}

		/* Firefox 兼容 (现代版本) */
		* {
			scrollbar-width: thin;
			scrollbar-color: #c0c0c0 #f0f0f0;
		}
		.dark-mode * {
			scrollbar-color: #5a5a5a #2a2a2a;
		}

        /* 语言支持 */
        .lang-toggle {
            background: none;
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            cursor: pointer;
            font-size: 14px;
            padding: 8px 12px;
            border-radius: 30px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
            margin-left: 10px;
        }
        .lang-toggle:hover {
            background-color: var(--primary-color);
            color: white;
        }
        .dark-mode .lang-toggle {
            border-color: #e0e0e0;
            color: #e0e0e0;
        }
        .dark-mode .lang-toggle:hover {
            background-color: #e0e0e0;
            color: #121212;
        }
		
		/* =============================================
		   重写全局样式（别问为何，看到这里证明你在偷看我代码）
		   ============================================= */

		body {
			background-color: #f7f5f0 !important;
			background-image: radial-gradient(circle at 25% 40%, rgba(0,0,0,0.02) 1.5%, transparent 2%),
							  repeating-linear-gradient(45deg, rgba(0,0,0,0.004) 0px, rgba(0,0,0,0.004) 2px, transparent 2px, transparent 8px);
			color: #2c2a28;
			font-feature-settings: "palt";
			letter-spacing: 0.01em;
		}

		/* 主容器 */
		.container {
			max-width: 1280px;
		}

		/* 导航链接 */
		nav ul li a {
			font-weight: 450;
			transition: all 0.2s ease;
			border-bottom: 1px solid transparent;
			padding-bottom: 4px;
		}
		nav ul li a:hover {
			border-bottom-color: var(--primary-color);
			color: var(--primary-color);
		}

		/* ========== 统一按钮 hover 效果（与“浏览卡顿点我”一致） ========== */
		.cta-button,
		.secondary-button,
		.more,
		.Wait,
		.mainD,
		.category-button,
		.official-download-button,
		.third-party-download-button,
		.back-button,
		.author-link,
		.comment-link,
		.reply-button,
		.reply-submit,
		.reply-cancel,
		.markdown-button,
		.load-more-replies,
		.bilibili-button {
			transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1) !important;
		}

		/* 所有按钮 hover 统一缩放 + 阴影增强 + 背景微调 */
		.cta-button:hover,
		.secondary-button:hover,
		.more:hover,
		.Wait:hover,
		.mainD:hover,
		.category-button:hover,
		.official-download-button:hover,
		.third-party-download-button:hover,
		.back-button:hover,
		.author-link:hover,
		.comment-link:hover,
		.reply-button:hover,
		.reply-submit:hover,
		.reply-cancel:hover,
		.markdown-button:hover,
		.load-more-replies:hover,
		.bilibili-button:hover {
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
		}

		/* 各按钮特有背景色 hover 微调（保持品牌色，仅变亮/变暗） */
		.cta-button:hover {
			background: linear-gradient(105deg, #1a86df, #0071c2) !important;
		}
		.secondary-button:hover {
			background-color: rgba(0,0,0,0.06) !important;
			border-color: var(--primary-color) !important;
		}
		.category-button:hover {
			background-color: #106ebe !important;
		}
		.official-download-button:hover,
		.third-party-download-button:hover {
			background-color: #106ebe !important;
		}
		.bilibili-button:hover {
			background-color: #ff9db5 !important;
			border-color: rgba(255, 255, 255, 0.35) !important;
		}
		.more:hover,
		.mainD:hover {
			background-color: #e6e6e6 !important;
			color: var(--primary-color) !important;
		}
		.Wait:hover {
			background-color: #f43030 !important;
		}
		.back-button:hover {
			background-color: #6c757d !important;
		}
		.author-link:hover {
			background-color: #106ebe !important;
		}
		.reply-submit:hover {
			background-color: #106ebe !important;
		}
		.reply-cancel:hover {
			background-color: rgba(255,255,255,0.15) !important;
		}
		.markdown-button:hover {
			background-color: rgba(0,120,212,0.2) !important;
			color: white !important;
		}
		.load-more-replies:hover {
			background-color: rgba(0,120,212,0.2) !important;
		}

		/* 深色模式下适配 */
		.dark-mode .cta-button:hover {
			background: linear-gradient(105deg, #2b8fdf, #0e6aae) !important;
		}
		.dark-mode .secondary-button:hover {
			background-color: rgba(255,255,255,0.12) !important;
		}
		.dark-mode .category-button:hover {
			background-color: #2b8fdf !important;
		}
		.dark-mode .official-download-button:hover,
		.dark-mode .third-party-download-button:hover {
			background-color: #2b8fdf !important;
		}
		.dark-mode .bilibili-button:hover {
			background-color: #ff9db5 !important;
			box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important;
		}
		.dark-mode .more:hover,
		.dark-mode .mainD:hover {
			background-color: #3d3d3d !important;
			color: white !important;
		}
		.dark-mode .back-button:hover {
			background-color: #888 !important;
		}
		.dark-mode .author-link:hover {
			background-color: #2b8fdf !important;
		}
		.dark-mode .reply-submit:hover {
			background-color: #2b8fdf !important;
		}
		.dark-mode .markdown-button:hover {
			background-color: rgba(0,120,212,0.3) !important;
		}

		/* ========== 基础圆角按钮样式 ========== */
		.cta-button,
		.secondary-button,
		.more,
		.Wait,
		.mainD,
		.category-button,
		.official-download-button,
		.third-party-download-button,
		.back-button,
		.author-link,
		.comment-link,
		.reply-button,
		.reply-submit,
		.reply-cancel,
		.markdown-button,
		.load-more-replies,
		.bilibili-button {
			border-radius: 12px !important;
			position: relative;
			overflow: hidden;
			transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1),
						box-shadow 0.25s ease,
						background 0.25s ease,
						border-color 0.25s ease,
						color 0.25s ease;
		}
		
		/* hover */
		.cta-button:hover,
		.secondary-button:hover,
		.Wait:hover,
		.mainD:hover,
		.category-button:hover,
		.official-download-button:hover,
		.third-party-download-button:hover,
		.back-button:hover,
		.author-link:hover,
		.comment-link:hover,
		.reply-button:hover,
		.reply-submit:hover,
		.reply-cancel:hover,
		.markdown-button:hover,
		.load-more-replies:hover,
		.bilibili-button:hover {
			color: #1a86df !important;
			background: rgba(255, 255, 255, 0.25) !important;
			backdrop-filter: blur(12px) !important;
			-webkit-backdrop-filter: blur(12px) !important;
			border-color: rgba(255, 255, 255, 0.5) !important;
			transform: scale(1.01) !important;
		}

		.dark-mode .cta-button:hover,
		.dark-mode .secondary-button:hover,
		.dark-mode .more:hover,
		.dark-mode .Wait:hover,
		.dark-mode .mainD:hover,
		.dark-mode .category-button:hover,
		.dark-mode .official-download-button:hover,
		.dark-mode .third-party-download-button:hover,
		.dark-mode .back-button:hover,
		.dark-mode .author-link:hover,
		.dark-mode .comment-link:hover,
		.dark-mode .reply-button:hover,
		.dark-mode .reply-submit:hover,
		.dark-mode .reply-cancel:hover,
		.dark-mode .markdown-button:hover,
		.dark-mode .load-more-replies:hover,
		.dark-mode .bilibili-button:hover {
			background: rgba(255, 255, 255, 0.25) !important;
			backdrop-filter: blur(12px) !important;
			-webkit-backdrop-filter: blur(12px) !important;
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
			color: #35b5ff !important;
		}
		
		/* 伪元素：光带扫过（从左到右） */
		.cta-button::before,
		.secondary-button::before,
		.more::before,
		.Wait::before,
		.mainD::before,
		.category-button::before,
		.official-download-button::before,
		.third-party-download-button::before,
		.back-button::before,
		.author-link::before,
		.comment-link::before,
		.reply-button::before,
		.reply-submit::before,
		.reply-cancel::before,
		.markdown-button::before,
		.load-more-replies::before,
		.bilibili-button::before,
		#refreshCommentsBtn::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
			transition: left 0.5s ease;
			pointer-events: none;
			z-index: 1;
		}
		/* 悬停 */
		.cta-button:hover,
		.secondary-button:hover,
		.more:hover,
		.Wait:hover,
		.mainD:hover,
		.category-button:hover,
		.official-download-button:hover,
		.third-party-download-button:hover,
		.back-button:hover,
		.author-link:hover,
		.comment-link:hover,
		.reply-button:hover,
		.reply-submit:hover,
		.reply-cancel:hover,
		.markdown-button:hover,
		.load-more-replies:hover,
		.bilibili-button:hover,
		#refreshCommentsBtn:hover {
			transform: translateX(4px) scale(1.02); /* 右移 + 轻微放大 */
			transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
		}

		.cta-button:hover::before,
		.secondary-button:hover::before,
		.more:hover::before,
		.Wait:hover::before,
		.mainD:hover::before,
		.category-button:hover::before,
		.official-download-button:hover::before,
		.third-party-download-button:hover::before,
		.back-button:hover::before,
		.author-link:hover::before,
		.comment-link:hover::before,
		.reply-button:hover::before,
		.reply-submit:hover::before,
		.reply-cancel:hover::before,
		.markdown-button:hover::before,
		.load-more-replies:hover::before,
		.bilibili-button:hover::before,
		#refreshCommentsBtn:hover::before {
			left: 100%;
		}

		/* 深色模式下光带颜色调整 */
		.dark-mode .cta-button::before,
		.dark-mode .secondary-button::before,
		.dark-mode .more::before,
		.dark-mode .Wait::before,
		.dark-mode .mainD::before,
		.dark-mode .category-button::before,
		.dark-mode .official-download-button::before,
		.dark-mode .third-party-download-button::before,
		.dark-mode .back-button::before,
		.dark-mode .author-link::before,
		.dark-mode .comment-link::before,
		.dark-mode .reply-button::before,
		.dark-mode .reply-submit::before,
		.dark-mode .reply-cancel::before,
		.dark-mode .markdown-button::before,
		.dark-mode .load-more-replies::before,
		.dark-mode .bilibili-button::before,
		.dark-mode #refreshCommentsBtn::before {
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		}
		
		.hero-buttons .mainD:hover,
		.hero-buttons .secondary-button:hover,
		/* 刷新评论按钮 */
		#refreshCommentsBtn:hover,
		/* B站按钮（所有位置的 B站按钮） */
		.bilibili-button:hover {
			background: rgba(255, 255, 255, 0.25) !important;
			backdrop-filter: blur(12px) !important;
			-webkit-backdrop-filter: blur(12px) !important;
			border-color: rgba(255, 255, 255, 0.5) !important;
			color: inherit !important;
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
		}

		/* 深色模式适配 */
		.dark-mode .hero-buttons .mainD:hover,
		.dark-mode .hero-buttons .secondary-button:hover,
		.dark-mode #refreshCommentsBtn:hover,
		.dark-mode .bilibili-button:hover {
			background: rgba(30, 30, 30, 0.6) !important;
			backdrop-filter: blur(12px) !important;
			-webkit-backdrop-filter: blur(12px) !important;
			border-color: rgba(255, 255, 255, 0.3) !important;
			color: #e0e0e0 !important;
		}

		.bilibili-button:hover {
			background: rgba(255, 255, 255, 0.25) !important;
		}
		.dark-mode .bilibili-button:hover {
			background: rgba(30, 30, 30, 0.6) !important;
		}

		/* 卡片类圆角 */
		.feature-card,
		.download-card,
		.modal-download-card,
		.official-version-card,
		.third-party-version-card,
		.author-card,
		.comment-item,
		.comment-form-container,
		.faq-item,
		.about-content-card,
		.timeline-content,
		.component-article {
			border-radius: 16px !important;
		}

		.category-card {
			border-radius: 20px !important;
		}

		.file-tree-container,
		.components-tree-container {
			border-radius: 14px !important;
		}

		.components-search input,
		.reply-form textarea {
			border-radius: 12px;
		}

		.comment-badge,
		.comment-label,
		.official-tip,
		.third-party-tip,
		.maintenance-notice,
		.maintenance-feature {
			border-radius: 20px;
		}

		/* ========== 头部 Hero 等区域（无圆角） ========== */
		.hero::before {
			background: linear-gradient(125deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.45) 100%);
		}
		.hero h1 {
			font-weight: 620;
			letter-spacing: -0.3px;
			text-shadow: 2px 2px 12px rgba(0,0,0,0.2);
		}
		.hero h3 {
			font-weight: 440;
			max-width: 800px;
			margin: 0 auto;
			line-height: 1.45;
			text-shadow: 0 1px 4px rgba(0,0,0,0.2);
		}

		/* 标题装饰 */
		.section-title h2 {
			font-weight: 600;
			letter-spacing: -0.2px;
			position: relative;
			display: inline-block;
			background: linear-gradient(120deg, #1e1e1e 30%, #4a4a4a 80%);
			background-clip: text;
			-webkit-background-clip: text;
			color: transparent;
			text-shadow: none;
		}
		.section-title h2::after {
			content: '';
			display: block;
			width: 60px;
			height: 2px;
			background: #0078d4;
			margin: 12px auto 0;
			border-radius: 4px;
			opacity: 0.65;
		}
		.dark-mode .section-title h2::after {
			background: #60a5fa;
		}

		/* Feature 卡片 */
		.feature-card {
			background: rgba(255, 255, 255, 0.92);
			padding: 28px 24px;
			border: 1px solid rgba(0,0,0,0.04);
			box-shadow: 0 8px 18px -8px rgba(0,0,0,0.08);
			transition: all 0.3s ease;
		}
		.feature-card:hover {
			transform: translateY(-6px);
			box-shadow: 0 18px 28px -12px rgba(0,0,0,0.12);
			border-color: rgba(0,120,212,0.2);
		}
		.feature-icon {
			background: #eef3fc;
			border-radius: 28px;
		}

		/* 下载分类卡片 */
		.category-content h3 {
			font-weight: 620;
			letter-spacing: -0.2px;
		}

		/* 下载卡片 */
		.download-card {
			background: rgba(255,255,255,0.96);
			backdrop-filter: blur(1px);
			box-shadow: 0 10px 22px -10px rgba(0,0,0,0.08);
			transition: all 0.3s;
			border: 1px solid #eee;
		}
		.download-card:hover {
			box-shadow: 0 20px 30px -12px rgba(0,0,0,0.12);
		}

		/* 官方/第三方卡片 */
		.official-version-card,
		.third-party-version-card {
			backdrop-filter: blur(2px);
			transition: all 0.25s;
		}
		/* 底部 */
		footer {
			background: #1a1c1e;
			border-top: 1px solid rgba(255,255,255,0.05);
		}
		.footer-column h3 {
			font-weight: 520;
			letter-spacing: 0.5px;
		}
		.copyright {
			font-size: 13px;
			opacity: 0.75;
		}

		/* 移动端适配 */
		@media (max-width: 768px) {
			.bilibili-button {
				padding: 10px 18px !important;
				font-size: 14px !important;
				width: 100% !important;
				max-width: 280px !important;
			}
			.feature-card,
			.download-card,
			.official-version-card,
			.third-party-version-card {
				border-radius: 14px !important;
			}
			.category-card {
				border-radius: 18px !important;
			}
			.cta-button,
			.secondary-button,
			.category-button {
				border-radius: 10px !important;
			}
		}
		/* 去除所有下载卡片顶部的蓝色配色（边框、渐变等） */
		.download-card,
		.modal-download-card,
		.official-version-card,
		.third-party-version-card,
		.category-card {
			border-top: none !important;
			border-top-color: transparent !important;
		}

		/* 针对官方和第三方卡片原有的顶部蓝色边框 */
		.official-version-card,
		.third-party-version-card {
			border-top: none !important;
		}
		.official-list-item,
		.list-item {
			border-left: none !important;
		}
		
		/* 弹窗关闭按钮重写 */
        .close-modal,
        .about-close-modal,
        .official-close-modal,
        .third-party-close-modal,
        .components-close-modal,
        .service-close-modal,
        .donation-close-modal,
        .custom-close-modal {
            color: #2b2b2b !important;
        }
        .dark-mode .close-modal,
        .dark-mode .about-close-modal,
        .dark-mode .official-close-modal,
        .dark-mode .third-party-close-modal,
        .dark-mode .components-close-modal,
        .dark-mode .service-close-modal,
        .dark-mode .donation-close-modal,
        .dark-mode .custom-close-modal {
            color: #ffffff!important;
        }
		
		/* ---------- 弹窗遮罩 (毛玻璃背景) ---------- */
        .slide-captcha-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 30000;
            display: none;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        .slide-captcha-modal.show {
            display: flex;
            opacity: 1;
        }

        /* ---------- 弹窗卡片---------- */
        .captcha-card {
            width: 90%;
            max-width: 460px;
            background: rgba(20, 25, 35, 0.55);
            background-image: url('https://images.pexels.com/photos/747964/pexels-photo-747964.jpeg?auto=compress&cs=tinysrgb&w=600&h=800&dpr=2');
            background-size: cover;
            background-position: center 30%;
            background-blend-mode: overlay;
            border-radius: 1rem;
            box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            padding: 2rem 1.5rem 2rem;
            transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            transform: scale(1.4);
            color: white;
            text-align: center;
        }

        .slide-captcha-modal.show .captcha-card {
            transform: scale(1);
        }

        /* 头部说明 */
        .captcha-header {
            margin-bottom: 1.5rem;
        }
        .captcha-header h3 {
            font-size: 1.8rem;
            font-weight: 700;
            background: linear-gradient(135deg, #FFF, #b3d9ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: inline-flex;
            align-items: center;
            gap: 12px;
        }
        .captcha-header p {
            font-size: 0.9rem;
            opacity: 0.9;
            margin-top: 8px;
            letter-spacing: 0.3px;
        }

		/* 懒得写所以放这 */
        .dark-mode .captcha-card {
            background: rgba(8, 12, 22, 0.65);
            background-image: url('https://images.pexels.com/photos/747964/pexels-photo-747964.jpeg?auto=compress&cs=tinysrgb&w=600&h=800&dpr=2');
            background-blend-mode: overlay;
        }
		
		/* 去掉该死的Ai写的顶部的蓝色边框 */
		.author-card {
			border-top: none !important;
		}
		.about-content-card {
			border-left: none !important;
		}
		.service-note {
			border-left: none !important;
		}
		
		/* 新版滚动条样式 */
		::-webkit-scrollbar-button {
			display: none !important;
			width: 0 !important;
			height: 0 !important;
			background: transparent !important;
		}
		::-webkit-scrollbar-corner {
			background: transparent !important;
			display: none !important;
		}
		::-webkit-scrollbar {
			width: 2px;
			height: 2px;
			background: transparent !important;
		}
		::-webkit-scrollbar-track {
			background: transparent !important;
		}
		::-webkit-scrollbar-thumb {
			background: rgba(255, 255, 255, 0.1) !important;
			border-radius: 5px !important;
		}
		::-webkit-scrollbar-thumb:hover {
			background: rgba(255, 255, 255, 0.2) !important;
		}
		/* Firefox 兼容 */
		* {
			scrollbar-width: thin;
			scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
		}

		/* 修复强迫症 */
		.official-list-item {
			border-radius: 16px !important;
		}
		.list-item {
			border-radius: 16px !important;
		}
		
		/* ========== 所有弹窗的全新动画！！！ ========== */
		.version-modal .modal-content,
		.about-modal .about-modal-content,
		.official-windows-modal .official-modal-content,
		.third-party-windows-modal .third-party-modal-content,
		.components-modal .components-modal-content,
		.service-modal .service-modal-content,
		.donation-modal .donation-modal-content,
		.custom-modal .custom-modal-content {
			transform: rotateX(-18deg) rotateY(-8deg) scale(0.86) translateY(25px);
			opacity: 0;
			transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1),
						opacity 0.4s ease-out;
			transform-origin: center center;
			will-change: transform, opacity;
		}

		/* 弹窗显示时的最终状态：平面、完全可见 */
		.version-modal.show .modal-content,
		.about-modal.show .about-modal-content,
		.official-windows-modal.show .official-modal-content,
		.third-party-windows-modal.show .third-party-modal-content,
		.components-modal.show .components-modal-content,
		.service-modal.show .service-modal-content,
		.donation-modal.show .donation-modal-content,
		.custom-modal.show .custom-modal-content {
			transform: rotateX(0deg) rotateY(0) scale(1) translateY(0);
			opacity: 1;
		}
		
		/* 圆角 */
		.components-tree li {
			border-radius: 12px !important;
			transition: all 0.25s ease;
		}
		.components-tree li:hover,
		.components-tree li.active {
			border-radius: 12px !important;
		}
		/* 文件管理新UI */
		.components-tree li::before {
			content: "|";
			margin-right: 8px;
			color: transparent;
			transition: color 0.25s ease;
		}
		.components-tree li.active::before {
			color: #0078d4;
		}

		.dark-mode .components-tree li.active::before {
			color: #60a5fa;
		}
		.components-tree li.active {
			background-color: #e9ecef !important;
			color: #2c3e50 !important;
		}
		.dark-mode .components-tree li.active {
			background-color: #3d3d3d !important;
			color: #e0e0e0 !important;
		}
		.components-search {
			position: relative;
			margin-bottom: 20px;
		}
		/* 搜索图标样式 */
		.components-search .search-icon {
			position: absolute;
			right: 15px; 
			left: auto;
			top: 50%;
			transform: translateY(-50%);
			color: #8a8886;
			pointer-events: none;
			font-size: 16px;
			z-index: 1;
			transition: color 0.4s ease;
		}
		.components-search .search-input {
			width: 100%;
			padding: 10px 40px 10px 15px;
			border: 1px solid #ddd;
			border-radius: 12px;
			font-size: 14px;
			background-color: rgba(255, 255, 255, 0.9);
			transition: all 0.3s ease;
			box-sizing: border-box;
		}
		.dark-mode .components-search .search-icon {
			color: #b0b0b0;
		}
		.dark-mode .components-search .search-input {
			background-color: #3d3d3d;
			color: #e0e0e0;
			border-color: #555;
		}
		.component-slider {
			font-weight: bold;
			font-size: 22px;
			color: #0078d4;
		}
		/* 移除切换器容器的背景和阴影 */
		.view-toggle,
		.official-view-toggle {
			background-color: #626262;
			box-shadow: none !important;
			padding: 0;
			gap: 8px;
		}
		/* 圆角 */
		.components-tree li {
			border-radius: 12px !important;
			transition: all 0.25s ease;
		}
		.components-tree li:hover,
		.components-tree li.active {
			border-radius: 12px !important;
		}
		/* 文件管理新UI */
		.components-tree li::before {
			content: "|";
			margin-right: 8px;
			color: transparent;
			transition: color 0.25s ease;
		}
		.components-tree li.active::before {
			color: #0078d4;
		}

		.dark-mode .components-tree li.active::before {
			color: #60a5fa;
		}
		.components-tree li.active {
			background-color: #e9ecef !important;
			color: #2c3e50 !important;
		}
		.dark-mode .components-tree li.active {
			background-color: #3d3d3d !important;
			color: #e0e0e0 !important;
		}
		.components-search {
			position: relative;
			margin-bottom: 20px;
		}
		
		/* 1. 恢复滑块显示，并改为蓝色 */
		.view-slider,
		.official-view-slider {
			display: block !important;
			position: absolute !important;
			bottom: 4px !important;
			height: calc(100% - 8px) !important;
			background-color: var(--primary-color) !important;
			border-radius: 30px !important;
			box-shadow: 0 2px 8px rgba(0, 120, 212, 0.25) !important;
			transition: left 0.35s cubic-bezier(0.2, 0.9, 0.4, 1),
						width 0.35s cubic-bezier(0.2, 0.9, 0.4, 1) !important;
			z-index: 0 !important;
			pointer-events: none !important;
		}

		/* 2. 容器：浅灰色背景 + 相对定位（让滑块绝对定位生效） */
		.view-toggle,
		.official-view-toggle {
			background-color: #e8e8e8 !important;
			box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.06) !important;
			padding: 4px !important;
			border-radius: 30px !important;
			display: inline-flex !important;
			position: relative !important;
		}

		/* 3. 按钮：透明背景，深色文字，相对定位高于滑块 */
		.view-toggle-btn,
		.official-view-toggle-btn {
			background-color: transparent !important;
			color: #323130 !important;
			padding: 8px 20px !important;
			border-radius: 30px !important;
			border: none !important;
			font-weight: 600 !important;
			cursor: pointer !important;
			position: relative !important;
			z-index: 1 !important;
			transition: color 0.2s ease !important;
		}

		/* 4. 激活时，文字变为白色（与蓝色滑块形成高对比） */
		.view-toggle-btn.active,
		.official-view-toggle-btn.active {
			color: #ffffff !important;
		}

		/* 5. 悬停效果（非激活时） */
		.view-toggle-btn:not(.active):hover,
		.official-view-toggle-btn:not(.active):hover {
			background-color: rgba(0, 0, 0, 0.06) !important;
		}

		/* ===== 深色模式适配 ===== */
		.dark-mode .view-toggle,
		.dark-mode .official-view-toggle {
			background-color: #3a3a3a !important;
		}

		.dark-mode .view-toggle-btn,
		.dark-mode .official-view-toggle-btn {
			color: #d0d0d0 !important;
		}

		.dark-mode .view-toggle-btn.active,
		.dark-mode .official-view-toggle-btn.active {
			color: #ffffff !important;
		}

		.dark-mode .view-toggle-btn:not(.active):hover,
		.dark-mode .official-view-toggle-btn:not(.active):hover {
			background-color: rgba(255, 255, 255, 0.08) !important;
		}

		.dark-mode .view-slider,
		.dark-mode .official-view-slider {
			box-shadow: 0 2px 12px rgba(0, 120, 212, 0.4) !important;
		}
		
		/* ===== 全局卡片阴影加深 ===== */
		.feature-card,
		.download-card,
		.modal-download-card,
		.official-version-card,
		.third-party-version-card,
		.category-card,
		.about-content-card,
		.author-card,
		.faq-item,
		.list-item,
		.official-list-item,
		.component-article,
		.components-article {
			box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15) !important;
		}

		/* 悬停状态阴影也加深 */
		.feature-card:hover,
		.download-card:hover,
		.modal-download-card:hover,
		.official-version-card:hover,
		.third-party-version-card:hover,
		.category-card:hover,
		.list-item:hover,
		.official-list-item:hover {
			box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22) !important;
		}

		/* 弹窗大背景（Modal 外层）加深 */
		.modal-content,
		.about-modal-content,
		.official-modal-content,
		.third-party-modal-content,
		.components-modal-content,
		.service-modal-content,
		.donation-modal-content,
		.custom-modal-content {
			box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
		}

		/* 评论卡片、文件树容器也补上阴影 */
		.comment-item,
		.file-tree-container,
		.components-tree-container {
			box-shadow: 0 14px 16px rgba(0, 0, 0, 0.09) !important;
		}
		
		/* 通用按钮增加禁用样式 */
		.cta-button.disabled,
		.Wait.disabled {
			background-color: var(--gray-color) !important;
			cursor: not-allowed !important;
			opacity: 0.65;
			pointer-events: none;
		}
		
		/* ========== 安全提醒 Toast ========== */
		#versionWarningToast {
			display: none;
			position: fixed;
			bottom: 30px;
			right: 30px;
			z-index: 10001;
			max-width: 440px;
			width: 90%;
			background: rgba(42,42,42,0.95);
			color: #f5f5f5;
			padding: 20px 24px;
			border-radius: 14px;
			box-shadow: 0 12px 40px rgba(0,0,0,0.35);
			border: 1px solid rgba(255,255,255,0.08);
			
			/* 入场：从右侧滑入 + 轻微放大 + 透明度渐变 */
			transform: translateX(calc(100% + 30px)) scale(0.96);
			opacity: 0;
			pointer-events: none;
			
			/* 缓出曲线 + 更长的持续时间让动画更从容 */
			transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
						opacity 0.4s ease;
			
			/* 开启 GPU 加速 */
			will-change: transform, opacity;
		}

		#versionWarningToast.show {
			transform: translateX(0) scale(1) !important;
			opacity: 1 !important;
			pointer-events: auto !important;
		}

		/* 深色模式适配 */
		.dark-mode #versionWarningToast {
			background: rgba(42,42,42 ,0.95);
			border-color: rgba(255,255,255,0.06);
		}


		/* ========== 折叠内容展开/收起 ========== */
		#downloadSection {
			opacity: 0;
			transform: translateY(-6px) scale(0.98);
			max-height: 0;
			overflow: hidden;
			transition: opacity 0.35s ease,
						transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
						max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
						margin 0.3s ease,
						padding 0.3s ease;
			will-change: transform, opacity, max-height;
		}

		#downloadSection[style*="display: block"] {
			opacity: 1;
			transform: translateY(0) scale(1);
			max-height: 600px;
		}
		
        /* ===== 第三方工具栏 ===== */
		.third-party-toolbar {
			display: flex;
			align-items: center;
			gap: 12px;
			margin: 20px 0 10px;
			flex-wrap: nowrap;
			width: 100%;
		}

		.view-toggle-wrapper {
			flex: 0 0 auto;
			display: flex;
			align-items: center;
		}
		.filter-wrapper {
			flex: 0 0 auto;
			position: relative;
			display: flex;
			align-items: center;
		}

		/* 视图切换容器 */
		.view-toggle {
			display: inline-flex;
			background-color: #e8e8e8;
			padding: 4px;
			border-radius: 30px;
			position: relative;
			width: auto;
		}

		.view-toggle-btn {
			background: transparent;
			border: none;
			color: #323130;
			padding: 8px 20px;
			border-radius: 30px;
			font-weight: 600;
			cursor: pointer;
			position: relative;
			z-index: 1;
			transition: color 0.2s ease;
		}

		.view-toggle-btn.active {
			color: #ffffff;
		}

		.view-toggle-btn:not(.active):hover {
			background-color: rgba(0, 0, 0, 0.06);
		}

		.view-slider {
			position: absolute;
			bottom: 4px;
			left: 4px;
			height: calc(100% - 8px);
			background-color: var(--primary-color, #0078d4);
			border-radius: 30px;
			transition: left 0.35s cubic-bezier(0.2, 0.9, 0.4, 1),
						width 0.35s cubic-bezier(0.2, 0.9, 0.4, 1);
			z-index: 0;
			pointer-events: none;
			box-shadow: 0 2px 8px rgba(0, 120, 212, 0.25);
		}

		/* ===== 筛选按钮 ===== */
		.filter-btn {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 8px 16px;
			background: rgba(255, 255, 255, 0.3);
			backdrop-filter: blur(16px);
			-webkit-backdrop-filter: blur(8px);
			border: 1px solid rgba(255, 255, 255, 0.18);
			border-radius: 30px;
			color: #000000;
			font-size: 14px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.25s ease;
			white-space: nowrap;
			user-select: none;
            justify-content: flex-end;
		}

		.filter-btn:hover {
			background: rgba(255, 255, 255, 0.28);
			border-color: rgba(255, 255, 255, 0.4);
			transform: scale(1.02);
		}

		.filter-btn:active {
			transform: scale(0.96);
		}

		.filter-btn .filter-arrow {
			font-size: 11px;
			transition: transform 0.3s ease;
		}

		.filter-btn .filter-arrow.open {
			transform: rotate(180deg);
		}

		/* ===== 下拉菜单 ===== */
		.filter-dropdown {
			position: absolute;
			top: calc(100% + 8px);
			left: 0;
			min-width: 170px;
			background: rgba(255,255,255);
			border: 1px solid rgba(255, 255, 255, 0.02);
			border-radius: 14px;
			padding: 6px;
			box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
			opacity: 0;
			visibility: hidden;
			transform: translateY(-6px) scale(0.96);
			transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
			transform-origin: top left;
			z-index: 100;
		}

		.filter-dropdown.open {
			opacity: 10;
			visibility: visible;
			transform: translateY(0) scale(1);
		}

		/* ===== 筛选项 ===== */
		.filter-option {
			display: block;
			width: 100%;
			padding: 10px 16px;
			background: transparent;
			border: none;
			border-radius: 10px;
			color: #000000;
			font-size: 14px;
			font-weight: 450;
			text-align: left;
			cursor: pointer;
			transition: all 0.2s ease;
			white-space: nowrap;
		}

		.filter-option:hover {
			background: rgba(50,120,213,0.1);
			color: #3278D5;
		}

		.filter-option.active {
			background: rgba(0, 120, 212, 0.25);
			color: #3278D5;
			font-weight: 600;
		}

		.filter-option.active::after {
			content: ' ✓';
			color: #3278D5;
			font-weight: 700;
		}

		/* ===== 深色模式适配 ===== */
		.dark-mode .view-toggle {
			background-color: #3a3a3a;
		}
		.dark-mode .view-toggle-btn.active {
			color: #ffffff;
		}

		.dark-mode .view-toggle-btn:not(.active):hover {
			background-color: rgba(255, 255, 255, 0.08);
		}

		.dark-mode .view-slider {
			box-shadow: none;
		}

		.dark-mode .filter-btn {
			border-color: rgba(58,58,58, 0.08);
			color: #e0e0e0;
		}

		.dark-mode .filter-btn:hover {
			background: rgba(58, 58, 58, 0.14);
			border-color: rgba(255, 255, 255, 0.2);
		}

		.dark-mode .filter-dropdown {
			background: rgba(42, 42, 42);
			border-color: rgba(255, 255, 255, 0.06);
		}

		.dark-mode .filter-option {
			color: #b0b0b0;
		}

		.dark-mode .filter-option:hover {
			background: rgba(255, 255, 255, 0.06);
			color: #e0e0e0;
		}

		.dark-mode .filter-option.active {
			background: rgba(0, 120, 212, 0.2);
			color: #e0e0e0;
		}

		/* ===== 移动端适配 ===== */
		@media (max-width: 768px) {
			.third-party-toolbar {
				gap: 8px;
			}

			.view-toggle-btn {
				padding: 6px 14px;
				font-size: 13px;
			}

			.filter-btn {
				padding: 6px 14px;
				font-size: 13px;
			}

			.filter-btn .filter-label {
				display: inline;
			}

			.filter-dropdown {
				right: 0;
				min-width: 150px;
			}

			.filter-option {
				padding: 8px 14px;
				font-size: 13px;
			}
		}

		@media (max-width: 480px) {
			.third-party-toolbar {
				gap: 6px;
			}

			.view-toggle-btn {
				padding: 5px 10px;
				font-size: 12px;
			}

			.filter-btn {
				padding: 5px 12px;
				font-size: 12px;
			}

			.filter-btn .filter-label {
				display: none;
			}

			.filter-dropdown {
				min-width: 130px;
				right: -8px;
			}

			.filter-option {
				padding: 8px 12px;
				font-size: 12px;
			}
		}
        /* ===== 半周年纪念弹窗 ===== */
        .anniversary-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(34,34,34, 0.1);
            z-index: 10001;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .anniversary-modal.show {
            display: flex;
            opacity: 1;
        }
        .anniversary-modal-content {
            background: rgba(30, 30, 35);
            border-radius: 20px;
            padding: 40px 35px;
            max-width: 600px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transform: scale(0.9) translateY(20px);
            transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1);
        }
        .anniversary-modal.show .anniversary-modal-content {
            transform: scale(1) translateY(0);
        }
        .anniversary-modal-title {
            text-align: center;
            margin-bottom: 20px;
        }
        .anniversary-modal-title h2 {
            font-size: 28px;
            font-weight: 700;
            color: #ffffff;
            text-shadow: 0 2px 12px rgba(0,0,0,0.3);
        }
        .anniversary-modal-title p {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.85);
            margin-top: 8px;
        }
        .anniversary-modal-body {
            color: #f0f0f0;
            line-height: 1.7;
            font-size: 16px;
            text-shadow: 0 1px 4px rgba(0,0,0,0.2);
        }
        .anniversary-modal-body p {
            margin-bottom: 15px;
        }
        .anniversary-modal-body .cta-button {
            background: #0078d4;
            color: white;
            border: none;
            padding: 12px 36px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 4px 16px rgba(0, 120, 212, 0.25);
        }
        .anniversary-modal-body .cta-button:hover {
            background: #106ebe;
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 120, 212, 0.3);
        }
        /* 深色模式适配 */
        .dark-mode .anniversary-modal-content {
            background: rgba(34,34,34);
            border-color: rgba(255, 255, 255, 0.1);
        }
        .dark-mode .anniversary-modal-title h2 {
            color: #e0e0e0;
        }
        .dark-mode .anniversary-modal-body {
            color: #d0d0d0;
        }
        /* 移动端适配 */
        @media (max-width: 768px) {
            .anniversary-modal-content {
                padding: 30px 20px;
            }
            .anniversary-modal-title h2 {
                font-size: 24px;
            }
            .anniversary-modal-body {
                font-size: 15px;
            }
            .anniversary-modal-body .cta-button {
                padding: 10px 28px;
                font-size: 15px;
            }
        }
        /* 图片网格容器 */
        .anniversary-image-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 24px;
            width: 100%;
            box-sizing: border-box;
        }

        /* 每个图片项 */
        .anniversary-image-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
        }

        /* 图片本身 */
        .anniversary-image-item img {
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            border-radius: 10px;
            display: block;
            max-width: 100%;
        }

        /* 图片说明文字 */
        .image-caption {
            margin-top: 6px;
            font-size: 13px;
            opacity: 0.8;
            text-align: center;
        }
        .anniversary-image-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 20px 0;
        }

        .anniversary-image-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .anniversary-image-item img {
            width: 100%;
            max-width: 280px;
            border-radius: 12px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transition: transform 0.3s ease;
        }
        .click-hint {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
            margin: 6px 0 2px 0;
            letter-spacing: 0.5px;
        }
        .image-caption {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
            margin: 0;
            font-weight: 500;
        }

        /* 移动端适配 */
        @media (max-width: 600px) {
            .anniversary-image-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }
        /* ===== 图片灯箱 ===== */
        .image-lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
            z-index: 99999;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .image-lightbox.active {
            display: flex;
            opacity: 1;
        }

        .lightbox-close {
            position: absolute;
            top: 30px;
            right: 40px;
            font-size: 30px;
            font-weight: 300;
            color: #fff;
            cursor: pointer;
            transition: transform 0.2s;
            z-index: 10;
        }

        .lightbox-close:hover {
            color: #3AD2F9;
        }

        .lightbox-image {
            max-width: 90vw;
            max-height: 90vh;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
            animation: lightboxZoom 0.3s ease;
        }

        @keyframes lightboxZoom {
            from {
                transform: scale(0.9);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }
		
		/* ===== 搜索按钮（右下角悬浮） ===== */
		.search-toggle-btn {
			position: fixed;
			right: 24px;
			bottom: 14px;
			z-index: 9999;
			width: 56px;
			height: 56px;
			border-radius: 50%;
			border: none;
			background: rgba(255, 255, 255);
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
			color: #1c1c1e;
			font-size: 22px;
			cursor: pointer;
			transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid rgba(255, 255, 255, 0.1);
		}

		.search-toggle-btn:hover {
			transform: scale(1.09);
			box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
			background: rgba(255, 255, 255, 0.6);
		}

		.search-toggle-btn:active {
			transform: scale(0.92);
		}

		/* 深色模式适配 */
		.dark-mode .search-toggle-btn {
			background: rgba(44, 44, 46);
			border-color: rgba(255, 255, 255, 0.08);
			color: #f5f5f7;
			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
		}

		.dark-mode .search-toggle-btn:hover {
			background: rgba(58, 58, 60, 0.5);
		}

		/* ===== 搜索模态框 ===== */
		.search-modal-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 10000;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			padding: 20px 20px 40px 20px;
			background: rgba(0, 0, 0, 0.3);
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.35s ease, visibility 0.35s ease;
			pointer-events: none;
		}

		.search-modal-overlay.active {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}

		.search-modal {
			width: 92%;
			max-width: 540px;
			background: rgba(255, 255, 255, 0.9999);
			border-radius: 20px;
			box-shadow: 0 4px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
			transform: translateY(30px) scale(0.91);
			transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
						opacity 0.35s ease;
			opacity: 0;
			max-height: 80vh;
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

		.search-modal-overlay.active .search-modal {
			transform: translateY(0) translateX(0) scale(1);
			opacity: 1;
		}
		/* 深色模式适配 */
		.dark-mode .search-modal {
			background: rgba(34, 34, 34, 0.9999);
			box-shadow: 0 4px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
		}

		/* ===== 搜索框头部 ===== */
		.search-modal-header {
			padding: 16px 20px 12px 20px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.06);
		}

		.dark-mode .search-modal-header {
			border-bottom-color: rgba(255, 255, 255, 0.06);
		}

		.search-input-wrapper {
			display: flex;
			align-items: center;
			gap: 12px;
			position: relative;
		}

		.search-input-icon {
			color: rgba(0, 0, 0, 0.35);
			font-size: 18px;
			flex-shrink: 0;
			transition: color 0.3s ease;
		}

		.dark-mode .search-input-icon {
			color: rgba(255, 255, 255, 0.35);
		}

		.search-input {
			flex: 1;
			border: none;
			background: transparent;
			font-size: 18px;
			font-weight: 400;
			color: #1c1c1e;
			outline: none;
			padding: 6px 0;
			font-family: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
			letter-spacing: 0.2px;
		}

		.search-input::placeholder {
			color: rgba(0, 0, 0, 0.3);
			font-weight: 350;
		}

		.dark-mode .search-input {
			color: #f5f5f7;
		}

		.dark-mode .search-input::placeholder {
			color: rgba(255, 255, 255, 0.3);
		}

		.search-close-btn {
			background: rgba(0, 0, 0, 0.0000001);
			border: none;
			border-radius: 50%;
			width: 32px;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgba(0, 0, 0, 0.5);
			font-size: 16px;
			cursor: pointer;
			transition: all 0.25s ease;
			flex-shrink: 0;
		}

		.search-close-btn:hover {
			background: rgba(0, 0, 0, 0.05);
			color: #1c1c1e;
		}

		.dark-mode .search-close-btn {
			background: rgba(255, 255, 255, 0.0000001);
			color: rgba(255, 255, 255, 0.5);
		}

		.dark-mode .search-close-btn:hover {
			background: rgba(255, 255, 255, 0.05);
			color: #f5f5f7;
		}

		/* ===== 搜索结果容器 ===== */
		.search-results-container {
			flex: 1;
			overflow-y: auto;
			padding: 0;
			min-height: 0;
			max-height: 55vh;
		}

		.search-results-container::-webkit-scrollbar {
			width: 4px;
		}

		.search-results-container::-webkit-scrollbar-track {
			background: transparent;
		}

		.search-results-container::-webkit-scrollbar-thumb {
			background: rgba(0, 0, 0, 0.15);
			border-radius: 4px;
		}

		.dark-mode .search-results-container::-webkit-scrollbar-thumb {
			background: rgba(255, 255, 255, 0.15);
		}

		/* ===== 空状态 ===== */
		.search-results-empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 40px 20px 32px;
			color: rgba(0, 0, 0, 0.4);
			text-align: center;
		}

		.dark-mode .search-results-empty {
			color: rgba(255, 255, 255, 0.35);
		}

		.search-results-empty p {
			margin: 0;
			font-size: 15px;
		}

		/* ===== 结果列表 ===== */
		.search-results-list {
			display: none;
			flex-direction: column;
			gap: 2px;
			padding: 0 8px;
		}

		.search-results-list.has-results {
			display: flex;
		}

		/* ===== 单个结果项 ===== */
		.search-result-item {
			display: flex;
			align-items: center;
			gap: 14px;
			padding: 10px 16px;
			border-radius: 12px;
			cursor: pointer;
			transition: all 0.2s ease;
			border: none;
			background: transparent;
			width: 100%;
			text-align: left;
			color: #1c1c1e;
		}

		.search-result-item:hover {
			background: rgba(0, 0, 0, 0.04);
		}

		.search-result-item:active {
			transform: scale(0.98);
		}

		.dark-mode .search-result-item {
			color: #f5f5f7;
		}

		.dark-mode .search-result-item:hover {
			background: rgba(255, 255, 255, 0.06);
		}

		.search-result-icon {
			width: 36px;
			height: 36px;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			background: rgba(0, 0, 0, 0.04);
			color: var(--primary-color, #0078d4);
			font-size: 18px;
		}

		.dark-mode .search-result-icon {
			background: rgba(255, 255, 255, 0.06);
		}

		.search-result-info {
			flex: 1;
			min-width: 0;
		}

		.search-result-title {
			font-size: 15px;
			font-weight: 500;
			line-height: 1.3;
			color: #1c1c1e;
		}

		.dark-mode .search-result-title {
			color: #f5f5f7;
		}

		.search-result-desc {
			font-size: 13px;
			color: rgba(0, 0, 0, 0.45);
			line-height: 1.4;
			margin-top: 2px;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.dark-mode .search-result-desc {
			color: rgba(255, 255, 255, 0.4);
		}

		.search-result-category {
			font-size: 11px;
			font-weight: 500;
			padding: 2px 12px;
			border-radius: 12px;
			background: rgba(0, 120, 212, 0.10);
			color: var(--primary-color, #0078d4);
			flex-shrink: 0;
			white-space: nowrap;
		}

		.dark-mode .search-result-category {
			background: rgba(0, 120, 212, 0.18);
			color: #60a5fa;
		}

		/* ===== 搜索结果分组标题 ===== */
		.search-result-group-title {
			font-size: 12px;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.9);
			padding: 12px 16px 6px 16px;
			letter-spacing: 0.5px;
			text-transform: uppercase;
		}

		.dark-mode .search-result-group-title {
			color: rgba(255, 255, 255, 0.9);
		}

		/* ===== 移动端适配 ===== */
		@media (max-width: 768px) {
			.search-toggle-btn {
				right: 16px;
				bottom: 14px;
				width: 48px;
				height: 48px;
				font-size: 18px;
			}

			.search-modal-overlay {
				padding-top: 6vh;
				align-items: center;
			}

			.search-modal {
				width: 96%;
				max-height: 85vh;
				border-radius: 16px;
			}

			.search-modal-header {
				padding: 14px 16px 10px 16px;
			}

			.search-input {
				font-size: 16px;
			}

			.search-result-item {
				padding: 8px 12px;
				gap: 12px;
			}

			.search-result-title {
				font-size: 14px;
			}

			.search-result-desc {
				font-size: 12px;
				-webkit-line-clamp: 2;
			}

			.search-result-icon {
				width: 32px;
				height: 32px;
				font-size: 15px;
			}

			.search-results-container {
				max-height: 50vh;
				min-height: 100px;
			}

			.search-modal-footer {
				padding: 8px 16px 12px 16px;
			}

			.search-hint {
				font-size: 11px;
			}
		}

		@media (max-width: 480px) {
			.search-toggle-btn {
				right: 12px;
				bottom: 14px;
				width: 44px;
				height: 44px;
				font-size: 16px;
			}

			.search-modal {
				width: 98%;
				border-radius: 14px;
			}

			.search-modal-overlay {
				padding-top: 4vh;
			}

			.search-input {
				font-size: 15px;
			}

			.search-result-item {
				padding: 6px 10px;
				gap: 10px;
			}

			.search-result-title {
				font-size: 13px;
			}

			.search-result-desc {
				font-size: 11px;
				-webkit-line-clamp: 2;
			}

			.search-result-icon {
				width: 28px;
				height: 28px;
				font-size: 13px;
				border-radius: 6px;
			}

			.search-result-category {
				font-size: 10px;
				padding: 1px 10px;
			}

			.search-results-container {
				max-height: 45vh;
				min-height: 80px;
			}
		}
		/* ===== 高亮脉冲动画 ===== */
		@keyframes searchPulse {
			0%, 100% {
				transform: scale(1);
				box-shadow: 0 0 0 0 rgba(0, 120, 212, 0.9);
			}
			50% {
				transform: scale(1);
				box-shadow: 0 0 0 0 rgba(0, 120, 212, 0.55);
			}
		}

		.search-highlight {
			animation: searchPulse 1.2s ease 3 !important;
			border: 1px solid var(--primary-color) !important;
			border-radius: 14px !important;
			background-color: rgba(240,248,255, 0.3) !important;
			box-shadow: 0 0 3px rgba(0, 120, 212, 0.15) !important;
			transition: all 0.2s ease;
		}

		/* 深色模式高亮适配 */
		.dark-mode .search-highlight {
			background-color: rgba(42, 42, 42, 0.3) !important;
			box-shadow: 0 0 30px rgba(0, 120, 212, 0.25) !important;
		}

		/* 结果加载时的微光效果 */
		.search-results-list.has-results .search-result-item {
			animation: resultFadeIn 0.25s ease forwards;
			opacity: 0;
		}

		.search-results-list.has-results .search-result-item:nth-child(1) { animation-delay: 0.02s; }
		.search-results-list.has-results .search-result-item:nth-child(2) { animation-delay: 0.04s; }
		.search-results-list.has-results .search-result-item:nth-child(3) { animation-delay: 0.06s; }
		.search-results-list.has-results .search-result-item:nth-child(4) { animation-delay: 0.08s; }
		.search-results-list.has-results .search-result-item:nth-child(5) { animation-delay: 0.10s; }
		.search-results-list.has-results .search-result-item:nth-child(6) { animation-delay: 0.12s; }
		.search-results-list.has-results .search-result-item:nth-child(7) { animation-delay: 0.14s; }
		.search-results-list.has-results .search-result-item:nth-child(8) { animation-delay: 0.16s; }
		.search-results-list.has-results .search-result-item:nth-child(9) { animation-delay: 0.18s; }
		.search-results-list.has-results .search-result-item:nth-child(10) { animation-delay: 0.20s; }


		@keyframes resultFadeIn {
			from { opacity: 0; transform: translateY(6px); }
			to { opacity: 1; transform: translateY(0); }
		}