/* ===== 正式简约风格 - 全局变量 极简配色 ===== */
 :root {
     --primary-color: #2563eb;
     --secondary-color: #1e293b;
     --pcwlib-color: #7c3aed;
     --light-color: #ffffff;
     --light-gray: #f3f4f6;
     --mid-gray: #e5e7eb;
     --dark-gray: #9ca3af;
     --text-color: #111827;
     --text-light: #4b5563;
     --text-muted: #6b7280;
     --success-color: #16a34a;
     --warning-color: #d97706;
     --danger-color: #dc2626;
     --sidebar-width: 250px;
     --header-height: 60px;
     --border-radius: 6px;
     --border-radius-sm: 4px;
     --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
     --transition: all 0.2s ease;
     --code-bg: #1f2937;
     --code-text: #f9fafb;
     --footer-bg: #1e293b;
     --footer-text: #e5e7eb;
     --footer-light-text: #9ca3af;
 }

 /* 全局统一盒模型，彻底解决宽度错位问题 */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
 }

 /* ✅ 核心重构：body主布局 - 根治所有问题的关键 */
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     line-height: 1.6;
     color: var(--text-color);
     font-size: 15px;
     /* 弹性布局 让footer永远在文档流最底部 */
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     /* 给侧边栏留出宽度，核心！左侧空间释放 */
     padding-left: var(--sidebar-width);
     margin: 0;
 }

 /* 滚动条 简约美化 */
 ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
 }

 ::-webkit-scrollbar-track {
     background: var(--light-gray);
     border-radius: 3px;
 }

 ::-webkit-scrollbar-thumb {
     background: var(--dark-gray);
     border-radius: 3px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: var(--text-muted);
 }

 /* ✅ 重构侧边栏：悬浮左侧+正常滚动+彻底释放底部空间 无任何副作用 */
 .sidebar {
     width: var(--sidebar-width);
     background: var(--light-color);
     position: fixed;
     top: 0;
     left: 0;
     /* 关键：高度到浏览器可视区，不锁死底部，配合滚动 */
     height: 100vh;
     overflow-y: auto;
     z-index: 200;
     border-right: 1px solid var(--mid-gray);
     /* 防止内容贴边 */
     padding-bottom: 30px;
 }

 .sidebar-header {
     padding: 15px;
     border-bottom: 1px solid var(--mid-gray);
 }

 .sidebar-title {
     font-size: 16px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 8px;
     color: var(--secondary-color);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .nav-menu {
     padding: 15px 0;
 }

 .nav-item {
     margin-bottom: 2px;
     padding: 0 8px;
 }

 .nav-link {
     display: flex;
     align-items: center;
     padding: 10px 14px;
     color: var(--text-light);
     text-decoration: none;
     transition: var(--transition);
     border-radius: var(--border-radius-sm);
     border-left: 3px solid transparent;
     cursor: pointer;
     font-weight: 600;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 16px;
 }

 .nav-link:hover {
     background-color: var(--light-gray);
     color: var(--primary-color);
 }

 .nav-link.active {
     background-color: rgba(37, 99, 235, 0.05);
     color: var(--primary-color);
     border-left-color: var(--primary-color);
 }

 .nav-link i {
     width: 18px;
     margin-right: 10px;
     color: var(--text-muted);
 }

 .nav-link.active i {
     color: inherit;
 }

 /* 二级菜单 无背景色+圆角+边框 无任何底色 */
 .submenu {
     margin-left: 26px;
     padding: 2px 0;
     background: transparent !important;
     border-radius: 0;
 }

 .submenu-link {
     padding: 8px 14px;
     font-size: 14px;
     color: var(--text-light);
     text-decoration: none;
     display: flex;
     align-items: center;
     border-radius: var(--border-radius-sm);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .submenu-link:hover {
     color: var(--primary-color);
     background-color: var(--mid-gray);
 }

 .submenu-link.active {
     color: var(--primary-color);
     background-color: rgba(37, 99, 235, 0.05);
 }

 .category-tag {
     display: inline-block;
     padding: 0px 6px;
     background: var(--mid-gray);
     border-radius: 4px;
     font-size: 12px;
     color: var(--text-muted);
     margin-left: 6px;
 }

 /* 顶部导航 */
 header {
     position: fixed;
     top: 0;
     left: var(--sidebar-width);
     right: 0;
     height: var(--header-height);
     background: var(--light-color);
     border-bottom: 1px solid var(--mid-gray);
     z-index: 100;
     display: flex;
     align-items: center;
     padding: 0 25px;
 }

 .header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
 }

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

 .logo i {
     font-size: 20px;
     color: var(--primary-color);
 }

 .logo h1 {
     font-size: 18px;
     font-weight: 700;
     color: var(--secondary-color);
 }

 .logo span {
     color: var(--primary-color);
 }

 .version {
     font-size: 12px;
     color: var(--text-muted);
     margin-left: 8px;
 }

 /* 搜索框 简约 */
 .search-container {
     position: relative;
     width: 280px;
 }

 .search-box {
     width: 100%;
     padding: 8px 12px 8px 36px;
     border: 1px solid var(--mid-gray);
     border-radius: var(--border-radius);
     font-size: 14px;
     outline: none;
     transition: var(--transition);
 }

 .search-box:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
 }

 .search-icon {
     position: absolute;
     left: 12px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--text-muted);
 }

 /* ✅ 重构主内容区：布局适配，无错位 */
 .main-content {
     flex: 1;
     width: 100%;
     margin-top: var(--header-height);
     padding: 30px;
 }

 .module-section {
     margin-bottom: 40px;
 }

 .module-header {
     margin-bottom: 25px;
     padding-bottom: 15px;
     border-bottom: 1px solid var(--mid-gray);
 }

 .module-title {
     font-size: 24px;
     font-weight: 700;
     color: var(--secondary-color);
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 8px;
 }

 .module-icon {
     width: 40px;
     height: 40px;
     background-color: var(--primary-color);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
 }

 .module-icon.pcwlib {
     background-color: var(--pcwlib-color);
 }

 .module-icon.download {
     background-color: var(--success-color);
 }

 .module-description {
     color: var(--text-light);
     font-size: 16px;
     line-height: 1.7;
 }

 /* 类卡片 简约无花哨样式 */
 .class-section {
     background: var(--light-color);
     border-radius: var(--border-radius);
     margin-bottom: 25px;
     min-width: 800px;
 }

 .class-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 16px;
     padding-bottom: 12px;
     border-bottom: 1px solid var(--mid-gray);
 }

 .class-name {
     font-size: 20px;
     font-weight: 600;
     color: var(--secondary-color);
     font-family: Consolas, Monaco, monospace;
 }

 .class-type {
     font-size: 12px;
     padding: 4px 10px;
     border-radius: 12px;
     text-transform: uppercase;
     font-weight: 600;
     background: rgba(37, 99, 235, 0.08);
     color: var(--primary-color);
 }

 .class-type.pcwlib {
     background: rgba(124, 58, 237, 0.08);
     color: var(--pcwlib-color);
 }

 .class-description {
     color: var(--text-light);
     margin-bottom: 20px;
 }

 /* 构造函数区 */
 .constructor-section {
     background-color: var(--light-gray);
     border-radius: var(--border-radius);
     padding: 18px;
     margin-bottom: 20px;
 }

 .constructor-title {
     font-size: 16px;
     font-weight: 600;
     color: var(--success-color);
     display: flex;
     align-items: center;
     gap: 6px;
     margin-bottom: 12px;
 }

 .constructor-code {
     background-color: var(--code-bg);
     color: var(--code-text);
     padding: 14px;
     border-radius: var(--border-radius-sm);
     font-family: Consolas, Monaco, monospace;
     font-size: 14px;
     margin-bottom: 14px;
     overflow-x: auto;
 }

 /* 方法区 */
 .methods-section {
     margin-top: 25px;
 }

 .methods-title {
     font-size: 18px;
     color: var(--secondary-color);
     margin: 16px 0;
     padding-bottom: 8px;
     border-bottom: 1px solid var(--mid-gray);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .methods-title i {
     color: var(--primary-color);
 }

 .methods-title.pcwlib i {
     color: var(--pcwlib-color);
 }

 /* 方法项 核心样式 简约清晰 */
 .method-item {
     background: var(--light-color);
     border-radius: var(--border-radius);
     padding: 18px;
     margin-bottom: 16px;
     border: 1px solid var(--mid-gray);
 }

 .method-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 12px;
 }

 .method-name {
     font-size: 17px;
     font-weight: 600;
     color: var(--secondary-color);
     font-family: Consolas, Monaco, monospace;
 }

 .method-type {
     font-size: 11px;
     padding: 3px 8px;
     border-radius: 10px;
     text-transform: uppercase;
     background: rgba(22, 163, 74, 0.08);
     color: var(--success-color);
 }

 .method-signature {
     background-color: var(--light-gray);
     padding: 10px 14px;
     border-radius: var(--border-radius-sm);
     font-family: Consolas, Monaco, monospace;
     font-size: 14px;
     margin-bottom: 12px;
     border-left: 2px solid var(--primary-color);
 }

 .method-signature.pcwlib {
     border-left-color: var(--pcwlib-color);
 }

 .method-description {
     color: var(--text-light);
     margin-bottom: 12px;
 }

 /* 参数表格 正式技术文档样式 */
 .params-table {
     width: 100%;
     margin: 16px 0;
     border-collapse: collapse;
     background: var(--light-color);
     border-radius: var(--border-radius-sm);
     overflow: hidden;
 }

 .params-table th {
     background-color: var(--light-gray);
     padding: 10px 14px;
     text-align: left;
     font-weight: 600;
     color: var(--secondary-color);
     border-bottom: 1px solid var(--mid-gray);
 }

 .params-table td {
     padding: 10px 14px;
     border-bottom: 1px solid var(--mid-gray);
     vertical-align: top;
 }

 .params-table tr:last-child td {
     border-bottom: none;
 }

 .param-name-cell {
     font-family: Consolas, Monaco, monospace;
     font-weight: 600;
     color: var(--secondary-color);
     width: auto;
     width: 300px;
 }

 .param-type-cell {
     color: var(--primary-color);
     font-style: italic;
     width: 150px;
     white-space: pre-wrap;
 }

 .param-desc-cell {
     color: var(--text-light);
     white-space: pre-wrap;
     width: auto;
 }

 /* 徽章 简约小样式 */
 .optional-badge {
     display: inline-block;
     background: rgba(217, 119, 6, 0.08);
     color: var(--warning-color);
     padding: 2px 6px;
     border-radius: 3px;
     font-size: 11px;
     margin-left: 4px;
 }

 .default-badge {
     display: inline-block;
     background: rgba(107, 114, 128, 0.08);
     color: var(--text-muted);
     padding: 2px 6px;
     border-radius: 3px;
     font-size: 11px;
     margin-left: 4px;
 }

 /* 返回值/示例/库信息 简约配套样式 */
 .return-section {
     margin-top: 14px;
     padding: 10px 14px;
     background: rgba(22, 163, 74, 0.08);
     border-radius: var(--border-radius-sm);
     border-left: 2px solid var(--success-color);
 }

 .return-title {
     font-size: 13px;
     font-weight: 600;
     color: var(--success-color);
     margin-bottom: 4px;
 }

 .return-type {
     font-family: Consolas, Monaco, monospace;
     color: var(--success-color);
     font-weight: 600;
 }

 .example-section {
     margin-top: 16px;
     padding: 16px;
     background-color: var(--code-bg);
     border-radius: var(--border-radius);
     position: relative;
 }

 .example-title {
     font-size: 13px;
     font-weight: 600;
     color: var(--light-gray);
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .example-code {
     color: var(--code-text);
     font-family: Consolas, Monaco, monospace;
     font-size: 14px;
     white-space: pre-wrap;
     overflow-x: auto;
     line-height: 1.6;
 }

 .copy-btn {
     position: absolute;
     top: 12px;
     right: 12px;
     background: rgba(255, 255, 255, 0.1);
     color: white;
     border: none;
     padding: 4px 8px;
     border-radius: var(--border-radius-sm);
     cursor: pointer;
     font-size: 12px;
 }

 .copy-btn:hover {
     background: rgba(255, 255, 255, 0.2);
 }

 .library-info {
     background-color: var(--light-gray);
     border-radius: var(--border-radius);
     padding: 18px;
     margin: 8px 0;
 }

 .library-info h3 {
     color: var(--pcwlib-color);
     margin-bottom: 8px;
     font-size: 15px;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 /* 常量/枚举样式 */
 .constants-section {
     background-color: var(--light-gray);
     border-radius: var(--border-radius);
     padding: 16px;
     margin: 16px 0;
 }

 .constants-title {
     font-size: 15px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .constants-list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 8px;
 }

 .constant-item {
     padding: 6px 10px;
     background: var(--light-color);
     border-radius: var(--border-radius-sm);
     font-family: Consolas, Monaco, monospace;
     font-size: 14px;
 }

 .constant-item .name {
     color: var(--secondary-color);
     font-weight: 600;
 }

 .constant-item .desc {
     font-size: 12px;
     color: var(--text-muted);
     margin-top: 2px;
 }

 /* 空状态/高亮 简约 */
 .empty-state {
     text-align: center;
     padding: 60px 20px;
     color: var(--text-muted);
 }

 .empty-state i {
     font-size: 40px;
     color: var(--mid-gray);
     margin-bottom: 15px;
 }

 .empty-state h3 {
     font-size: 18px;
     color: var(--text-light);
     margin-bottom: 8px;
 }

 .highlight {
     background: rgba(217, 119, 6, 0.2);
     color: var(--warning-color);
     padding: 0 2px;
     border-radius: 2px;
 }

 /* 下载页面专属样式 */
 .download-card {
     background: var(--light-color);
     border-radius: var(--border-radius);
     padding: 10px;
     margin-bottom: 10px;
 }

 .download-title {
     font-size: 18px;
     font-weight: 600;
     color: var(--secondary-color);
     margin-bottom: 15px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .download-title i {
     color: var(--success-color);
 }

 .download-list {
     margin: 10px 0;
 }

 .download-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 0;
     border-bottom: 1px solid var(--mid-gray);
 }

 .download-item:last-child {
     border-bottom: none;
 }

 .download-version {
     font-weight: 600;
     color: var(--secondary-color);
 }

 .download-btn {
     padding: 6px 12px;
     background: var(--success-color);
     color: white;
     border: none;
     border-radius: var(--border-radius-sm);
     cursor: pointer;
     transition: var(--transition);
 }

 .download-btn:hover {
     opacity: 0.9;
 }

 .install-step {
     padding: 4px 0;
     margin-left: 20px;
     color: var(--text-light);
 }

 .changelog {
     padding: 10px;
     background: var(--light-gray);
     border-radius: var(--border-radius-sm);
     color: var(--text-light);
     font-size: 14px;
     margin-top: 10px;
     line-height: 2;
 }

 /* ✅ 最终完美版 footer：全屏铺满整个浏览器最底部 + 友情链接2列2行 */
 footer {
     width: 100%;
     background: var(--footer-bg);
     color: var(--footer-text);
     padding: 30px;
     font-size: 14px;
     border-top: 1px solid #334155;
     margin-top: 20px;
 }

 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     gap: 25px;
     max-width: 100%;
 }

 .footer-links {}

 .footer-links h3 {
     font-size: 16px;
     color: var(--light-color);
     margin-bottom: 15px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .footer-links h3 i {
     color: var(--primary-color);
 }

 /* 核心：友情链接 2列2行 布局 */
 .footer-links ul {
     list-style: none;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 8px 16px;
     padding: 0;
     margin: 0;
     max-width: 400px;
 }

 .footer-links li {
     margin: 0;
 }

 .footer-links a {
     color: var(--footer-light-text);
     text-decoration: none;
     transition: var(--transition);
     display: inline-block;
 }

 .footer-links a:hover {
     color: var(--primary-color);
     padding-left: 4px;
 }

 .footer-copyright {
     flex: 1;
     text-align: right;
     line-height: 1.8;
     color: var(--footer-light-text);
 }

 .footer-copyright p {
     margin: 4px 0;
 }

 .footer-copyright strong {
     color: var(--footer-text);
 }

 /* 响应式适配 */
 @media (max-width: 768px) {
     :root {
         --sidebar-width: 100%;
     }

     body {
         padding-left: 0;
     }

     .sidebar {
         position: relative;
         height: auto;
         border-right: none;
         border-bottom: 1px solid var(--mid-gray);
     }

     header {
         left: 0;
         position: relative;
     }

     .main-content {
         margin-top: 0;
         padding: 20px;
     }

     .header-content {
         flex-direction: column;
         gap: 10px;
         padding: 10px 0;
     }

     .search-container {
         width: 100%;
     }

     .params-table {
         display: block;
         overflow-x: auto;
     }

     .constants-list {
         grid-template-columns: 1fr;
     }

     footer {
         padding: 20px;
     }

     .footer-content {
         flex-direction: column;
         gap: 20px;
     }

     .footer-copyright {
         text-align: left;
     }
 }

 /* ===== 新增：二级菜单折叠样式 ===== */
 .submenu {
     display: none;
     transition: all 0.2s ease;
 }

 .submenu.show {
     display: block;
 }

 .nav-arrow {
     margin-left: auto;
     font-size: 12px;
     transition: transform 0.2s ease;
 }

 .nav-arrow.rotate {
     transform: rotate(90deg);
 }