/* 1. 全局 CSS 变量与暗黑模式配置 */
        :root {
            --primary-color: #4285f4;
            --primary-hover: #3367d6;
            --danger-color: #e74c3c;
            --text-main: #2c3e50;
            --text-sub: #666;
            --text-light: #999;
            --bg-color: #f4f6f9;
            --card-bg: #fffffff7;
            --border-color: #eee;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            --radius: 8px;
            --header-height: 60px;
            --bg-svg: url(img/w.svg);
            /*--bg-svg: url(https://img.alicdn.com/imgextra/i1/2448436640/O1CN01OVltXy1yvB1TxevOt_!!2448436640.jpg);*/ 
        }

        body.dark-mode {
            --text-main: #e0e0e0;
            --text-sub: #aaa;
            --text-light: #777;
            --bg-color: #121212;
            --card-bg: #1e1e1e;
            --border-color: #333;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            --bg-svg: url(img/b.svg);
        }

        * { margin: 0; padding: 0; text-decoration: none;box-sizing: border-box; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
     /* ========== 亮色模式下的全局链接 ========== */
a {
    color: #000; /* 默认黑色 */
    text-decoration: none; /* 去除默认下划线 */
    transition: color 0.3s ease; /* 颜色过渡动画 */
}

a:hover {
    color: #333; /* 悬停时变为深灰色，提供交互反馈 */
}

a:visited {
    color: #000; /* 访问后保持黑色 */
}

/* ========== 暗黑模式下的全局链接 ========== */
/* 假设你的暗黑模式是通过 body 添加 .dark-mode 类来触发的 */
.dark-mode a {
    color: #e0e0e0; /* 暗黑模式下使用柔和的浅灰色，避免纯白刺眼 */
}

.dark-mode a:hover {
    color: #ffffff; /* 悬停时变为纯白色 */
}

.dark-mode a:visited {
    color: #e0e0e0; /* 访问后保持浅灰色 */
}
        
        

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: var(--text-main);
            background-color: var(--bg-color);
            line-height: 1.6;
            padding: 20px;
            padding-top: calc(var(--header-height) + 20px); 
        }
        
       body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: transparent;
    background-image: var(--bg-svg);
    background-repeat: repeat;
    background-position: top left;
    background-size: 260px 260px;
    pointer-events: none;
    z-index: -1;
}

 
        /* 2. 头部固定悬浮样式 */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--header-height);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: var(--shadow);
            z-index: 50;
        }
        
        
             /* 1. 基础样式（适用于所有设备，包括手机端） */
.container {
    max-width: 1200px;
    margin: 0 auto;
}


 
               
               
               
                .header-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
     }
       
       
       .herotx {
    background-size: cover;
    }

      .herotx img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
     }
         
        body.dark-mode header {
            background-color: rgba(30, 30, 30, 0.8);
        }

        .logo { font-size: 22px; font-weight: 800; color: var(--danger-color); letter-spacing: 1px; z-index: 10; }

        /* 桌面端导航 */
        .nav-links { display: flex; gap: 25px; align-items: center; }
        .nav-links a { text-decoration: none; color: var(--text-sub); font-size: 15px; font-weight: 500; }
        .nav-links a:hover { color: var(--primary-color); }

        /* 右侧操作区 */
        .header-actions { display: flex; align-items: center; gap: 10px; z-index: 10; }

        /* 图标按钮通用样式 */
        .icon-btn {
            background: none; border: none; cursor: pointer; color: var(--text-sub);
            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
            border-radius: 50%; transition: all 0.3s ease;
        }
        .icon-btn:hover { background-color: rgba(66, 133, 244, 0.1); color: var(--primary-color); }
        .icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

        /* 汉堡菜单按钮 (默认隐藏) */
        .hamburger {
            display: none; flex-direction: column; justify-content: space-between;
            width: 28px; height: 20px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 10;
        }
        .hamburger span {
            display: block; width: 100%; height: 3px; background-color: var(--text-main);
            border-radius: 3px; transition: all 0.3s ease; transform-origin: center;
        }
        .hamburger.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
        .hamburger.active span:nth-child(2) { opacity: 0; }
        .hamburger.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

        /* 3. 搜索弹窗 (Modal) */
        .search-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
            display: none; justify-content: center; align-items: flex-start;
            padding-top: 15vh; z-index: 100;
        }
        .search-overlay.active { display: flex; }
        .search-box {
            background: var(--card-bg); width: 90%; max-width: 600px;
            border-radius: var(--radius); padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        .search-input {
            width: 100%; padding: 15px; font-size: 18px; border: 2px solid var(--border-color);
            border-radius: var(--radius); outline: none; background: var(--bg-color); color: var(--text-main);
        }
        .search-input:focus { border-color: var(--primary-color); }
        .search-hint { margin-top: 10px; font-size: 12px; color: var(--text-light); text-align: right; }

        /* 4. 主体布局 */
        .main-content { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
        .content-left { display: flex; flex-direction: column; gap: 20px; }

        .card { background: var(--card-bg); padding: 25px; border-radius: var(--radius); box-shadow: var(--shadow); }
        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); }
        .card-title { font-size: 18px; font-weight: 700; }
        .card-more { font-size: 13px; color: var(--text-light); text-decoration: none; }

        .hero { text-align: center; padding: 40px 20px;  background-image: url(https://img.alicdn.com/imgextra/i3/2448436640/O1CN01g9H4t21yvB1CO6nZq_!!2448436640.jpg);
    background-size: cover;
    background-position: center; }
        .hero h1 { font-size: 32px; margin-bottom: 12px; }
        .hero p { color: var(--text-sub); margin-bottom: 25px; }
        .hero-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
        .btn { padding: 10px 24px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: none; display: inline-block; }
        .btn-primary { background-color: #c0d3c4; color: white; }
        .btn-outline { 
background: linear-gradient(to right, #fff8e1, #ffffff); color: var(--primary-color); border: 1px solid var(--primary-color); }

        .announcement { background-color: #c0d3c4; padding: 10px; border-left: 4px solid #ffc107; font-size: 14px; color: #5d4037; border-radius:  var(--radius) var(--radius) 0; }
        body.dark-mode .announcement { background-color: #3e2723; color: #ffcc80; border-left-color: #ff9800; }

        .doc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
        .doc-item { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }
        .doc-image { width: 100%; height: 130px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); display: flex; align-items: center; justify-content: center; color: var(--text-light); }
        body.dark-mode .doc-image { background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%); }
        .doc-content { padding: 15px; }
        .doc-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
        .doc-desc { font-size: 12px; color: var(--text-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

        .list-group { list-style: none; }
        .list-item { padding: 6px 0; border-bottom: 1px dashed var(--border-color); display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
        .list-item:last-child { border-bottom: none; }
        .list-item a { color: var(--text-main); text-decoration: none; flex: 1; }
        .list-item span { color: var(--text-light); font-size: 12px; white-space: nowrap; margin-left: 15px; }

        .sidebar { display: flex; flex-direction: column; gap: 20px; }
        .sidebar-title { font-size: 16px; font-weight: 700; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-color); display: inline-block; }
        .friend-link { display: flex; align-items: center; padding: 12px 0; text-decoration: none; color: var(--text-main); border-bottom: 1px dashed var(--border-color); }
        .friend-link:last-child { border-bottom: none; }
        .link-logo { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; margin-right: 12px; flex-shrink: 0; }
        .link-name { font-size: 14px; font-weight: 600; }
        .link-desc { font-size: 12px; color: var(--text-light); margin-top: 2px; }

        footer {background: var(--card-bg); text-align: center; padding: 30px 20px; color: var(--text-light); font-size: 12px; margin-top: 40px; }
        footer a { color: var(--primary-color); text-decoration: none; }
        
        
        /* 5. 分页样式 */
    /* 分页 */
.pagination {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.pagination a {
    color: var(--text-color);
    text-decoration: none;
    border: 1px solid #4a4d50;
    padding: 10px 20px;
    transition: all 0.2s;
}

.pagination a:hover {
    background: var(--text-color);
    color: #1a1b1e;
}





            /* 分页容器 */
.pagination { 
    display: flex; 
    justify-content: center; 
    align-items: center;
    gap: 15px; 
    margin-top: 0px; 
    margin-bottom: 0px;
    padding: 5px;
}

.page-navigator{margin:0;flex:1}
.page-navigator .current a{text-decoration:underline;color:inherit;pointer-events:none}
.page-navigator a:focus{background-color:var(--pico-text-selection-color)}
.page-navigator .prev{margin-right:auto}
.page-navigator .prev a:before{content:" ";margin-right:0.25rem}
.page-navigator .next{margin-left:auto;text-align:right}.page-navigator .next a:after{content:" ";margin-left:0.25rem}

/* 分页容器 (Typecho 1.3 默认生成 ul.page-navigator) */
.page-navigator { 
    display: flex; 
    justify-content: center; 
    align-items: center;
    gap: 10px; 
    margin-top: 10px; 
    margin-bottom: 10px;
    padding: 5px; /* 去掉默认列表内边距 */
    list-style: none; /* 去掉列表默认圆点 */
}

/* 列表项 (li) */
.page-navigator li { 
    margin: 0; /* 去掉默认边距 */
}

/* 链接样式 (a 标签) */
.page-navigator a {
    background: transparent;
    border: 2px solid #ebf3ff;
    padding: 6px 6px;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s;
    text-transform: uppercase;
    font-weight: bold;
    display: inline-block;
    border-radius: 10px;
    
}

/* 鼠标悬停效果 */
.page-navigator a:hover { 
    background: #b1dd83; /* 绿色 */
    color: #2c3e50; 
    border-color: #5c6c7a2b;
    transform: translateY(-2px); /* 悬停时轻微上浮 */
}

/* 当前激活的页面 (Typecho 会自动给 li 添加 current 类) */
.page-navigator .current a {
    background: #c0d3c4;
    border-color: #ffffff;
    color: white;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
    cursor: default;
}

/* 禁用状态 (上一页/下一页在首尾页时) */
.page-navigator .disabled a { 
    border-color: #ccc; 
    color: #ccc; 
    cursor: not-allowed; 
    box-shadow: none;
}
.page-navigator .disabled a:hover {
    background: transparent;
    color: #ccc;
    transform: none;
}
        
  /* 1. 页面主体容器：必须提供高度基准 */
.main-content {
    display: flex;
    min-height: 100vh; /* 关键：确保父容器至少占满整个屏幕高度 */
}

/* 2. 左侧内容区：继承高度并防止被挤压 */
.content-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;           /* 关键：占据父容器剩余宽度 */
    height: 100%;      /* 关键：高度继承父容器 */
    flex-shrink: 0;    /* 防止被右侧内容挤压 */
    min-width: 0;      /* 防止内部长文本/图片撑破布局 */
}

/* 3. 卡片与内容区：让内容区自动撑满并允许滚动 */
.content-left .card {
    flex: 1;           /* 关键：让 card 撑满 .content-left 的剩余高度 */
    display: flex;
    flex-direction: column;
    min-height: 0;     /* 关键：允许 flex 子元素收缩，触发滚动 */
    overflow: hidden;  /* 配合 min-height: 0 使用 */
}

.entry-content {
    flex: 1;           /* 关键：内容区占满 card 剩余空间 */
    overflow-y: auto;  /* 关键：内容过多时，只在左侧区域出现滚动条 */
    min-height: 0;     /* 防止内容撑破父容器 */
}

/* 4. 手机端适配 */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column; /* 手机端改为垂直布局 */
        height: auto;           /* 手机端高度随内容撑开 */
    }
    .content-left {
        width: 100%;
        height: auto;           /* 手机端取消固定高度 */
    }
    .content-left .card,
    .entry-content {
        flex: none;             /* 手机端取消 flex 撑满，随内容自然撑开 */
        overflow: visible;      /* 手机端允许内容自然溢出，由浏览器整体滚动 */
    }
    
    
    

    
    
}

.entry-content strong {
    background-color: rgb(235 235 235);
    padding: 2px 4px; /* 增加一点内边距，让背景不紧贴文字 */
    border-radius: 3px; /* 边缘圆角，更自然 */
    font-weight: bold;
    
}

   /* ====================
   🎨 美化 entry-content a
   ==================== */
  /* 基础链接样式 */
.entry-content a {
    color: #007bff; /* 链接主色调，可根据主题修改 */
    text-decoration: none; /* 去除默认下划线 */
    position: relative;
    transition: color 0.3s ease;
}

/* 伪元素实现下划线动画 */
.entry-content a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s ease;
}

/* 鼠标悬停效果 */
.entry-content a:hover {
    color: #0056b3; /* 悬停时的颜色加深 */
}

.entry-content a:hover::after {
    width: 100%; /* 下划线从左向右展开 */
}
  
  /* ====================
   🎨 美化 <pre> 代码块
   ==================== */
.entry-content pre {
    /* 布局与换行：保留格式并防止撑破容器 */
    position: relative;
    white-space: pre-wrap;       
    word-wrap: break-word;       
    word-break: break-all;       
    max-width: 100%;             
    overflow-x: auto;            /* 内容过长时显示横向滚动条 */
    
    /* 视觉外观：深色极客风 */
    background-color: #2d2d2d;   /* 深灰背景 */
    color: #f8f8f2;              /* 浅色文字，高对比度 */
    padding: 1.2em;              /* 舒适的内部留白 */
    border-radius: 8px;          /* 8像素圆角 */
    margin: 1.5em 0;             /* 上下外边距，与其他内容隔开 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微的底部阴影，增加层次感 */
}

.entry-content pre code {
    /* 确保代码使用专业的等宽字体 */
    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.95em;           /* 稍微调小字号，显得更精致 */
    line-height: 1.6;            /* 增加行高，提升阅读舒适度 */
    background: none !important; /* 清除可能存在的默认背景 */
    padding: 0 !important;       /* 清除内边距，由 pre 统一控制 */
    color: inherit;              /* 继承 pre 的文字颜色 */
}




/* 让 pre 相对定位，方便按钮绝对定位到右上角 */


/* 复制按钮的基础样式 */
.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    font-size: 12px;
    color: #ccc;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0; /* 默认隐藏，鼠标悬停时显示 */
}

/* 鼠标悬停在 pre 上时，显示复制按钮 */
.entry-content pre:hover .copy-btn {
    opacity: 1;
}

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

/* 复制成功时的样式 */
.copy-btn.copied {
    background-color: #4CAF50;
    color: white;
    border-color: #4CAF50;
}


/* 手机端始终显示复制按钮，并增大点击区域 */
@media (max-width: 768px) {
    .entry-content pre .copy-btn {
        background-color: rgb(0 0 0);
        opacity: 1 !important;
        padding: 6px 12px;      /* 增大按钮尺寸，方便手指点击 */
        font-size: 13px;
    }
}





  
  
  .entry-content img {
    max-width: 100%; /* 确保图片宽度不会超过父容器，且小图不会被强制拉伸 */
    height: auto;    /* 高度根据宽度自动计算，保持原始纵横比 */
    display: block;  /* 消除图片底部默认的 inline 留白 */
}

  .entry-content {
    word-wrap: break-word;      /* 允许长单词在边界处换行 */
    overflow-wrap: break-word;  /* 现代浏览器标准属性，效果同上 */
    word-break: break-all;      /* 极端情况：允许在任意字符间断行（慎用，可能破坏英文单词） */
}
  
  
  
   /* 版权信息 */
  
   .linup-me {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    margin-bottom: 5px;
}  
   .linup-me .badge-subject {
    display: inline-block;
    background-color: #ff0000;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
} 
.linup-me .bg-blue {
    background-image: -webkit-linear-gradient(0deg, #000000 0%, #000000 100%);
}
.linup-me .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}



/* --- 全局容器限制 --- */
.entry-content {
    max-width: 100%;
    overflow-x: hidden; /* 防止内容溢出 */
}

/* --- 1. 基础样式组件 --- */
/* 提示框与警告框 */
.entry-content .tip,
.entry-uput .warning {
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
    border-left: 4px solid;
    position: relative;
}
.entry-content .tip {
    background-color: #e6f7ff;
    border-color: #17a2b8;
    color: #0c5460;
}
.entry-content .warning {
    background-color: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

/* 高亮、删除线、下划线 */
.entry-content .highlight {
    background-color: #fff3cd;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
}
.entry-content s { text-decoration: line-through; color: #6c757d; }
.entry-content u { text-decoration: underline; text-underline-offset: 2px; }

/* --- 2. 布局与分割线 --- */
/* 折叠面板 (默认展开状态) */
.entry-content .collapse-box {
    margin: 15px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}
.collapse-title {
    background: #f8f9fa;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 1px solid #eee;
}
.collapse-content { padding: 15px; }

/* 卡片组件 */
.entry-content .card {
    display: flex;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    margin: 15px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.card-img { width: 120px; background: #eee; object-fit: cover; }
.card-body { padding: 15px; flex: 1; }

/* 网格布局 */
.entry-content .grid-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 15px 0;
}
.entry-content .col-item {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
}

/* 分割线 */
.entry-content hr.custom-hr {
    border: 0;
    height: 1px;
    background: #eee;
    margin: 30px 0;
}

/* --- 3. 媒体与嵌入 --- */
/* 视频容器 (保持比例) */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    margin: 15px 0;
    background: #000;
}
.video-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* 图片画廊 */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}
.gallery-grid img {
    max-width: 100%;
    border-radius: 4px;
    height: auto;
}

/* --- 4. 交互与信息 --- */
/* 隐藏内容 */
.hide-content {
    padding: 20px;
    background: #f0f0f0;
    border: 1px dashed #ccc;
    text-align: center;
    color: #666;
    margin: 15px 0;
    border-radius: 4px;
}

/* 表格 */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    margin: 15px 0;
}
.shortcode-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}
.shortcode-table th, .shortcode-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
}
.shortcode-table th { background-color: #f2f2f2; }

/* 时间轴 */
.timeline-box {
    border-left: 2px solid #ddd;
    margin-left: 10px;
    padding-left: 20px;
    margin: 15px 0;
}
.timeline-item { margin-bottom: 15px; position: relative; }
.timeline-date {
    font-size: 0.85em;
    color: #007bff;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

/* 代码块 */
pre.code-block {
    background: #282c34;
    color: #abb2bf;
    padding: 15px;
    border-radius: 4px;
    overflow-x: auto;
    font-family: Consolas, Monaco, monospace;
    margin: 15px 0;
    line-height: 1.5;
}



  
  
  
        /* ================= 响应式手机端适配 ================= */
        @media (max-width: 768px) {
            body { padding: 10px; padding-top: calc(var(--header-height) + 10px); }
            header { padding: 0 15px; }
            
            /* 手机端显示汉堡按钮，隐藏桌面端导航 */
            .hamburger { display: flex; order: 2; } 
            .nav-links { display: none; } 
            
             /* 手机端，隐藏右侧 */
             .sidebar {
        display: none; /* 直接隐藏，DOM不参与渲染流 */
                }
         /* 手机端 3列网格菜单 */
            .nav-links.mobile-active {
                display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
                position: absolute; top: 100%; left: 0; right: 0;
                background: var(--card-bg); padding: 15px;
                box-shadow: var(--shadow); border-radius: 0 0 var(--radius) var(--radius);
                z-index: 8;
            }
            .nav-links.mobile-active a {
                text-align: center; padding: 10px 0; background: var(--bg-color);
                border-radius: 6px; font-size: 14px; color: var(--text-main);
            }
            .container{ width: 100%; /* 主内容区撑满宽度 */}
             .main-content { grid-template-columns: 1fr; gap: 15px; max-width: 100%; /* 主内容区撑满宽度 */}
             
           
            
            .card { padding: 20px; }
            .hero { padding: 30px 15px; }
            .hero h1 { font-size: 26px; }
            .doc-list { grid-template-columns: repeat(2, 1fr);/*grid-template-columns: 1fr;*/ }
            .list-item {  align-items: flex-start; gap: 4px; }
            .list-item span { margin-left: 0; }
        }