/* 全局重置 & 字体 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        body {
            height: 100vh;
            width: 100vw;
            background: linear-gradient(145deg, #f0f4fa 0%, #e9eff5 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.25s;
        }

        /* ---------- 登录容器 (居中卡片) ---------- */
        .login-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 20px;
        }

        .login-card {
            max-width: 440px;
            width: 100%;
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background: #ffffff;
            border-radius: 36px;
            box-shadow: 0 25px 45px -10px rgba(10, 40, 80, 0.15);
            padding: 48px 44px;
            border: 1px solid rgba(255,255,255,0.5);
            transition: all 0.3s;
        }

        .login-header {
            margin-bottom: 32px;
            text-align: left;
        }

        .login-header h1 {
            font-size: 38px;
            font-weight: 700;
            letter-spacing: -0.5px;
            background: linear-gradient(145deg, #0b1e3a, #1f3a5f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 12px;
        }

        .login-header p {
            color: #4a667e;
            font-size: 16px;
            font-weight: 400;
            border-left: 4px solid #0a58ca;
            padding-left: 16px;
            background: #f0f7ff;
            padding: 12px 18px;
            border-radius: 14px;
            color: #1e3b5c;
        }

        .input-group {
            margin-bottom: 24px;
            position: relative;
        }

        .input-label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #1e2f44;
            margin-bottom: 8px;
        }

        .input-field {
            width: 100%;
            padding: 16px 20px;
            background: #f8fcff;
            border: 1.5px solid #e1ecf5;
            border-radius: 20px;
            font-size: 16px;
            transition: 0.2s;
            outline: none;
            color: #0c1f33;
        }

        .input-field:focus {
            border-color: #0a58ca;
            background: #ffffff;
            box-shadow: 0 6px 14px rgba(10, 88, 202, 0.08);
        }

        .login-btn {
            width: 100%;
            background: #0a58ca;
            border: none;
            border-radius: 30px;
            padding: 16px 28px;
            font-size: 18px;
            font-weight: 600;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            transition: 0.2s;
            border: 1px solid rgba(255,255,255,0.2);
            margin-top: 16px;
            box-shadow: 0 10px 22px -8px #0a58ca70;
        }

        .login-btn:hover {
            background: #0a4ab0;
            transform: translateY(-2px);
            box-shadow: 0 16px 26px -8px #0a58ca90;
        }

        .demo-hint {
            margin-top: 30px;
            background: #edf3fa;
            border-radius: 20px;
            padding: 14px 20px;
            color: #2e506e;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px dashed #9bb8da;
        }

        /* ---------- 主应用界面 ---------- */
        .app-container {
            display: none;
            width: 100vw;
            height: 100vh;
            background: #f5f7fb;
            overflow: hidden;
        }

        .sidebar {
            width: 300px;
            background-color: #ffffff;
            border-right: 1px solid rgba(0,0,0,0.08);
            box-shadow: 2px 0 8px rgba(0,0,0,0.02);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            flex-shrink: 0;
        }

        .tree-header {
            padding: 24px 20px 12px 20px;
            font-size: 15px;
            font-weight: 600;
            color: #1e293b;
            letter-spacing: 0.3px;
            border-bottom: 1px solid #e9edf2;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .tree-header span {
            background: #eef2f6;
            padding: 4px 10px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 400;
            color: #3c4b5c;
        }

        .tree {
            padding: 16px 12px 24px 12px;
            flex: 1;
            overflow-y: auto;
        }

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

        .tree ul ul {
            padding-left: 24px;
            border-left: 1px dashed #dce3eb;
            margin-left: 8px;
        }

        .tree li {
            margin: 2px 0;
            line-height: 1.5;
            position: relative;
        }

        .tree-item {
            display: flex;
            align-items: center;
            padding: 8px 12px 8px 8px;
            border-radius: 10px;
            cursor: pointer;
            color: #2c3e50;
            font-size: 14px;
            transition: background 0.15s, color 0.1s;
            gap: 6px;
        }

        .tree-item:hover {
            background-color: #f1f5f9;
        }

        .tree-item.active {
            background: #e6f0ff;
            color: #0a58ca;
            font-weight: 500;
            border-left: 4px solid #0a58ca;
            border-radius: 10px 6px 6px 10px;
        }

        .toggle-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            font-size: 16px;
            color: #6b7a8a;
            border-radius: 6px;
            transition: background 0.1s;
            flex-shrink: 0;
        }

        .toggle-icon:hover {
            background-color: #dce3eb;
        }

        .doc-icon {
            margin-right: 4px;
            font-size: 16px;
        }

        .content-panel {
            flex: 1;
            background-color: #ffffff;
            padding: 32px 40px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        .content-card {
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
            background: #ffffff;
            border-radius: 24px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.02);
            padding: 32px 40px;
            border: 1px solid #f0f3f7;
        }

        .content-title {
            font-size: 32px;
            font-weight: 600;
            color: #0b1e2e;
            margin-bottom: 20px;
            border-bottom: 3px solid #eef2f6;
            padding-bottom: 18px;
        }

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

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

        /* ===== 实线表格样式 ===== */
        /* 所有边框均为实线，清晰硬边界 */
        .color-table {
            width: 100%;
            border-collapse: collapse;  /* 边框合并，实线相接 */
            margin: 24px 0;
            background: white;
            border: 1px solid #d0d9e4;  /* 表格外边框实线 */
        }

        .color-table th {
            background-color: #f5f9ff;
            color: #1e3a5f;
            font-weight: 600;
            font-size: 15px;
            padding: 16px 20px;
            text-align: left;
            border: 1px solid #cbd5e1;  /* 实线边框 */
            border-bottom: 2px solid #9aa9b9;  /* 底部更粗实线，区分表头 */
        }

        .color-table td {
            padding: 14px 20px;
            border: 1px solid #d4dce6;  /* 单元格实线边框 */
            vertical-align: middle;
        }

        /* 移除hover背景，保持实线严肃感（保留轻微效果） */
        .color-table tr:hover td {
            background-color: #fafcfe;
        }

        .color-swatch {
            display: inline-block;
            width: 28px;
            height: 28px;
            border-radius: 6px;
            margin-right: 12px;
            vertical-align: middle;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.08);  /* 色块边框也是实线 */
        }

        .color-code {
            font-family: 'SF Mono', 'Fira Code', monospace;
            font-weight: 500;
            background: #f1f5f9;
            padding: 4px 10px;
            border-radius: 30px;
            font-size: 13px;
            color: #0b3b5c;
            border: 1px solid #d7e0e8;  /* 代码标签增加实线边框，更统一 */
        }

        .content-meta {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #d0d9e4;  /* 实线分隔 */
            color: #62748b;
            font-size: 14px;
        }

        .sidebar::-webkit-scrollbar, .content-panel::-webkit-scrollbar {
            width: 6px;
        }
        .sidebar::-webkit-scrollbar-track {
            background: #f1f3f5;
        }
        .sidebar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        .logout-area {
            padding: 16px 20px 20px 20px;
            border-top: 1px solid #edf2f7;
            font-size: 13px;
            color: #5f7d9c;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .logout-link {
            background: none;
            border: 1px solid #d4e0e9;
            padding: 6px 16px;
            border-radius: 50px;
            color: #3d5a78;
            font-size: 13px;
            cursor: pointer;
            transition: 0.1s;
        }
        .logout-link:hover {
            background: #edf2f9;
            border-color: #9bb5cc;
        }

        .hidden {
            display: none !important;
        }
        .flex-show {
            display: flex !important;
        }
		
		
		        /* ===== 完全复刻截图的代码块 ===== */
		        .screenshot-code-block {
		            margin: 24px 0;
		            background: #0D1B2A;  /* 深蓝黑背景，完全复刻截图 */
		            border-radius: 12px;
		            border: 1px solid #1E3A5F;
		            overflow: hidden;
		            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
		        }
		
		        .screenshot-header {
		            display: flex;
		            align-items: center;
		            justify-content: space-between;
		            padding: 12px 20px;
		            background: #0D1B2A;  /* 与主体同色，保持一体 */
		            border-bottom: 1px solid #1E3A5F;
		        }
		
		        .screenshot-header-left {
		            display: flex;
		            align-items: center;
		            gap: 8px;
		        }
		
		        .file-icon {
		            color: #5DC9E2;  /* 青色文件图标 */
		            font-size: 16px;
		        }
		
		        .file-name {
		            color: #CCDDEA;
		            font-size: 14px;
		            font-weight: 400;
		        }
		
		        .copy-btn-screenshot {
		            background: transparent;
		            border: 1px solid #3A5A7A;
		            color: #E0EFFF;
		            padding: 6px 18px;
		            border-radius: 6px;
		            font-size: 13px;
		            font-weight: 400;
		            cursor: pointer;
		            display: flex;
		            align-items: center;
		            gap: 6px;
		            transition: all 0.2s;
		            letter-spacing: 0.3px;
		        }
		
		        .copy-btn-screenshot:hover {
		            background: #1E3A5F;
		            border-color: #5A9EC2;
		            color: white;
		        }
		
		        .copy-btn-screenshot.copied {
		            background: #0E5A3A;
		            border-color: #2A9D6E;
		            color: white;
		        }
		
		        .screenshot-pre {
		            margin: 0;
		            padding: 20px 24px;
		            background: #0D1B2A;
		            color: #E6F1FF;
		            font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
		            font-size: 15px;
		            line-height: 1.7;
		            overflow-x: auto;
		            white-space: pre;
		            word-wrap: normal;
		            tab-size: 2;
		        }
		
		        .screenshot-code {
		            font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
		            color: #E6F1FF;
		        }
		
		        /* JSON 语法高亮（可选，更接近截图） */
		        .json-key {
		            color: #FFA07A;  /* 橙色键名 */
		        }
		        .json-number {
		            color: #B5E8B5;  /* 绿色数字 */
		        }
		        .json-string {
		            color: #A5D6FF;  /* 蓝色字符串 */
		        }
		
		        .content-meta {
		            margin-top: 40px;
		            padding-top: 20px;
		            border-top: 1px solid #d0d9e4;
		            color: #62748b;
		            font-size: 14px;
		        }
		
		        .sidebar::-webkit-scrollbar, .content-panel::-webkit-scrollbar {
		            width: 6px;
		        }
		        .sidebar::-webkit-scrollbar-track {
		            background: #f1f3f5;
		        }
		        .sidebar::-webkit-scrollbar-thumb {
		            background: #cbd5e1;
		            border-radius: 10px;
		        }
		
		        .logout-area {
		            padding: 16px 20px 20px 20px;
		            border-top: 1px solid #edf2f7;
		            font-size: 13px;
		            color: #5f7d9c;
		            display: flex;
		            align-items: center;
		            justify-content: space-between;
		        }
		        .logout-link {
		            background: none;
		            border: 1px solid #d4e0e9;
		            padding: 6px 16px;
		            border-radius: 50px;
		            color: #3d5a78;
		            font-size: 13px;
		            cursor: pointer;
		            transition: 0.1s;
		        }
		        .logout-link:hover {
		            background: #edf2f9;
		            border-color: #9bb5cc;
		        }
		
		        .hidden {
		            display: none !important;
		        }
		        .flex-show {
		            display: flex !important;
		        }
				  /* 通知提示 */
				        .copy-toast {
				            position: fixed;
				            bottom: 30px;
				            left: 50%;
				            transform: translateX(-50%) translateY(10px);
				            background: #1e3b5c;
				            color: white;
				            padding: 12px 28px;
				            border-radius: 50px;
				            font-size: 15px;
				            font-weight: 500;
				            box-shadow: 0 12px 28px rgba(0,0,0,0.2);
				            z-index: 9999;
				            opacity: 0;
				            transition: opacity 0.2s, transform 0.25s;
				            pointer-events: none;
				            border: 1px solid #3a79a6;
				        }
				        .copy-toast.show {
				            opacity: 1;
				            transform: translateX(-50%) translateY(0);
				        }
						
					 /* ===== 仿生代码区 ===== */
					        .bionic-pre {
					            margin: 0;
					            padding: 28px 28px;
					            background: #0D1B2A;
					            font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
					            font-size: 15px;
					            line-height: 1.8;
					            overflow-x: auto;
					            white-space: pre;
					            tab-size: 4;
					            text-align: left;
					            color: #E6F1FF;
					        }
					
					        /* 基础span重置 - 完全靠左 */
					        .bionic-pre span {
					            display: inline;
					            white-space: pre;
					            text-align: left;
					            float: none;
					            margin: 0;
					            padding: 0;
					            vertical-align: baseline;
					        }
					
					        /* ===== 仿生阅读核心样式 ===== */
					        .bionic-bold {
					            font-weight: 700;
					            color: #FFFFFF;
					        }
					        
					        .bionic-light {
					            font-weight: 450;
					            color: #C9E2FF;
					        }
					
					        /* PHP 语法高亮 - HMAC-SHA256 专用配色 */
					        .php-keyword { 
					            color: #FF79C6; 
					        }
					        .php-keyword .bionic-bold {
					            color: #FFB2E0;
					        }
					        
					        .php-function { 
					            color: #50FA7B; 
					        }
					        .php-function .bionic-bold {
					            color: #A3FFB0;
					        }
					        
					        .php-variable { 
					            color: #9EFFFF; 
					        }
					        .php-variable .bionic-bold {
					            color: #D6FFFF;
					        }
					        
					        .php-string { 
					            color: #F1FA8C; 
					        }
					        .php-string .bionic-bold {
					            color: #FFFFC2;
					        }
					        
					        .php-comment { 
					            color: #6272A4; 
					        }
					        .php-comment .bionic-bold {
					            color: #8A9FD0;
					        }
					
					        .toast {
					            position: fixed;
					            bottom: 30px;
					            left: 50%;
					            transform: translateX(-50%) translateY(10px);
					            background: #122B3F;
					            color: white;
					            padding: 14px 32px;
					            border-radius: 60px;
					            font-size: 15px;
					            font-weight: 500;
					            opacity: 0;
					            transition: 0.25s;
					            pointer-events: none;
					            border: 1px solid #368AC0;
					            box-shadow: 0 12px 30px rgba(0,30,50,0.7);
					            backdrop-filter: blur(8px);
					            letter-spacing: 0.5px;
					            z-index: 9999;
					        }
							
							   /* ===== 仿生代码区 ===== */
							        .bionic-pre {
							            margin: 0;
							            padding: 28px 28px;
							            background: #0D1B2A;
							            font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
							            font-size: 15px;
							            line-height: 1.8;
							            overflow-x: auto;
							            white-space: pre;
							            tab-size: 4;
							            text-align: left;
							            color: #E6F1FF;
							        }
							
							        /* 基础span重置 - 完全靠左 */
							        .bionic-pre span {
							            display: inline;
							            white-space: pre;
							            text-align: left;
							            float: none;
							            margin: 0;
							            padding: 0;
							            vertical-align: baseline;
							        }
							
							        /* ===== 仿生阅读核心样式 ===== */
							        .bionic-bold {
							            font-weight: 700;
							            color: #FFFFFF;
							        }
							        
							        .bionic-light {
							            font-weight: 450;
							            color: #C9E2FF;
							        }
							
							        /* Golang 语法高亮 - HMAC-SHA256 专用配色 */
							        .go-keyword { 
							            color: #FF79C6; 
							        }
							        .go-keyword .bionic-bold {
							            color: #FFB2E0;
							        }
							        
							        .go-function { 
							            color: #50FA7B; 
							        }
							        .go-function .bionic-bold {
							            color: #A3FFB0;
							        }
							        
							        .go-variable { 
							            color: #9EFFFF; 
							        }
							        .go-variable .bionic-bold {
							            color: #D6FFFF;
							        }
							        
							        .go-string { 
							            color: #F1FA8C; 
							        }
							        .go-string .bionic-bold {
							            color: #FFFFC2;
							        }
							        
							        .go-comment { 
							            color: #6272A4; 
							        }
							        .go-comment .bionic-bold {
							            color: #8A9FD0;
							        }
							
							        .go-package { 
							            color: #BD93F9; 
							        }
							        .go-package .bionic-bold {
							            color: #D7B9FF;
							        }
							
							        .go-import { 
							            color: #FFB86C; 
							        }
							        .go-import .bionic-bold {
							            color: #FFD9A3;
							        }
							
							        .go-type { 
							            color: #8BE9FD; 
							        }
							        .go-type .bionic-bold {
							            color: #C2F2FF;
							        }
									
									    /* ===== 仿生代码区 ===== */
									        .bionic-pre {
									            margin: 0;
									            padding: 28px 28px;
									            background: #0D1B2A;
									            font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
									            font-size: 15px;
									            line-height: 1.8;
									            overflow-x: auto;
									            white-space: pre;
									            tab-size: 4;
									            text-align: left;
									            color: #E6F1FF;
									        }
									
									        /* 基础span重置 - 完全靠左 */
									        .bionic-pre span {
									            display: inline;
									            white-space: pre;
									            text-align: left;
									            float: none;
									            margin: 0;
									            padding: 0;
									            vertical-align: baseline;
									        }
									
									        /* ===== 仿生阅读核心样式 ===== */
									        .bionic-bold {
									            font-weight: 700;
									            color: #FFFFFF;
									        }
									        
									        .bionic-light {
									            font-weight: 450;
									            color: #C9E2FF;
									        }
									
									        /* C# 语法高亮 - HMAC-SHA256 专用配色 */
									        .cs-keyword { 
									            color: #FF79C6; 
									        }
									        .cs-keyword .bionic-bold {
									            color: #FFB2E0;
									        }
									        
									        .cs-type { 
									            color: #8BE9FD; 
									        }
									        .cs-type .bionic-bold {
									            color: #C2F2FF;
									        }
									        
									        .cs-class { 
									            color: #50FA7B; 
									        }
									        .cs-class .bionic-bold {
									            color: #A3FFB0;
									        }
									        
									        .cs-method { 
									            color: #FFB86C; 
									        }
									        .cs-method .bionic-bold {
									            color: #FFD9A3;
									        }
									        
									        .cs-variable { 
									            color: #9EFFFF; 
									        }
									        .cs-variable .bionic-bold {
									            color: #D6FFFF;
									        }
									        
									        .cs-string { 
									            color: #F1FA8C; 
									        }
									        .cs-string .bionic-bold {
									            color: #FFFFC2;
									        }
									        
									        .cs-comment { 
									            color: #6272A4; 
									        }
									        .cs-comment .bionic-bold {
									            color: #8A9FD0;
									        }
									
									        .cs-namespace { 
									            color: #BD93F9; 
									        }
									        .cs-namespace .bionic-bold {
									            color: #D7B9FF;
									        }
											
											
					   /* ===== 仿生代码区 ===== */
							.bionic-pre {
								margin: 0;
								padding: 28px 28px;
								background: #0D1B2A;
								font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
								font-size: 15px;
								line-height: 1.8;
								overflow-x: auto;
								white-space: pre;
								tab-size: 4;
								text-align: left;
								color: #E6F1FF;
							}
					
							/* 基础span重置 - 完全靠左 */
							.bionic-pre span {
								display: inline;
								white-space: pre;
								text-align: left;
								float: none;
								margin: 0;
								padding: 0;
								vertical-align: baseline;
							}
					
							/* ===== 仿生阅读核心样式 ===== */
							.bionic-bold {
								font-weight: 700;
								color: #FFFFFF;
							}
							
							.bionic-light {
								font-weight: 450;
								color: #C9E2FF;
							}
					
							/* Java 语法高亮 - HMAC-SHA256 专用配色 */
							.java-keyword { 
								color: #FF79C6; 
							}
							.java-keyword .bionic-bold {
								color: #FFB2E0;
							}
							
							.java-type { 
								color: #8BE9FD; 
							}
							.java-type .bionic-bold {
								color: #C2F2FF;
							}
							
							.java-class { 
								color: #50FA7B; 
							}
							.java-class .bionic-bold {
								color: #A3FFB0;
							}
							
							.java-method { 
								color: #FFB86C; 
							}
							.java-method .bionic-bold {
								color: #FFD9A3;
							}
							
							.java-variable { 
								color: #9EFFFF; 
							}
							.java-variable .bionic-bold {
								color: #D6FFFF;
							}
							
							.java-string { 
								color: #F1FA8C; 
							}
							.java-string .bionic-bold {
								color: #FFFFC2;
							}
							
							.java-comment { 
								color: #6272A4; 
							}
							.java-comment .bionic-bold {
								color: #8A9FD0;
							}
					
							.java-import { 
								color: #BD93F9; 
							}
							.java-import .bionic-bold {
								color: #D7B9FF;
							}
					
							.java-annotation {
								color: #FF9580;
							}
							.java-annotation .bionic-bold {
								color: #FFB8AA;
							}