/* =========================================
   1. 基础全局设置 (Base)
   ========================================= */
:root { 
    --bg-color: #fafafa; 
    --text-color: #1c1c1e; 
    --input-bg: #f0f2f5; 
}
@media (prefers-color-scheme: dark) { 
    :root { 
        --bg-color: #000000; 
        --text-color: #f5f5f7; 
        --input-bg: #1c1c1e; 
    } 
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    margin: 0; padding: 0; 
    background-color: var(--bg-color); 
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}

/* =========================================
   2. 顶部导航 (Navbar)
   ========================================= */
.section-title {
    position: sticky; top: 0; z-index: 100;
    width: 100%; margin: 0 auto; 
    padding: 10px 20px 0 20px; 
    background-color: var(--bg-color);
    display: flex; flex-direction: column; gap: 10px; 
    border-bottom: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0; 
}

/* 第一行：返回键 + 搜索框 */
.header-top-row { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.inline-back-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: flex-start; cursor: pointer; color: var(--text-color); margin-right: 15px; flex-shrink: 0; }
.search-bar-wrapper { flex: 1; width: 100%; }
.search-input-box { width: 100%; height: 36px; background-color: var(--input-bg); border-radius: 18px; display: flex; align-items: center; padding: 0 12px; color: var(--text-color); transition: background 0.2s; }
.search-input-box:focus-within { background-color: rgba(0,0,0,0.05); }
.search-input-box input { border: none; background: transparent; width: 100%; height: 100%; font-size: 0.9rem; color: var(--text-color); outline: none; }
.search-input-box input::placeholder { color: #999; }

/* 第二行：导航 Tab */
.nav-row { width: 100%; display: flex; padding-bottom: 10px; }
.nav-center { flex: 1; display: flex; align-items: center; overflow-x: auto; gap: 5px; }
.nav-center::-webkit-scrollbar { display: none; }
.section-item { flex: 1; font-size: 0.9rem; font-weight: 600; padding: 8px 0; margin: 0 2px; border-radius: 8px; cursor: pointer; text-align: center; color: #8e8e93; transition: all 0.2s; white-space: nowrap; display: flex; justify-content: center; align-items: center; }
.section-item.active-nav { background-color: #ffffff; color: var(--text-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }

/* =========================================
   3. 主布局与侧边栏 (Layout)
   ========================================= */
.main-container {
    display: flex; width: 100%; flex: 1; 
    height: auto; min-height: 0; 
    gap: 15px; overflow: hidden; padding: 0 20px;
}

/* 左侧 Sidebar */
.sidebar {
    position: sticky; top: 0; width: 86px; flex-shrink: 0;
    display: flex; flex-direction: column; gap: 12px; 
    z-index: 50; padding-top: 10px;
    height: 100%; overflow-y: auto; 
    padding-bottom: 140px !important; /* 底部防遮挡 */
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar-item { padding: 12px 4px; border-radius: 12px; cursor: pointer; font-size: 0.85rem; color: #9e9e9e; font-weight: 500; display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; flex-shrink: 0; }
.sidebar-item.active { background-color: #ffffff; color: var(--text-color); font-weight: 600; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); }

/* 右侧内容区 */
.menu-grid { 
    flex: 1; 
    /* 👇 新增这两行关键代码 👇 */
    min-width: 0;      /* 关键！允许 flex 子元素压缩到比内容更小，强制触发换行 */
    overflow-x: hidden; /* 双重保险：禁止左右滚动 */
    overflow-y: auto; 
    padding-right: 0; 
    padding-bottom: 140px !important; 
     /* 👇👇👇 新增这 3 行：彻底隐藏滚动条，但保留滑动功能 👇👇👇 */
    scrollbar-width: none; /* 针对 Firefox */
    -ms-overflow-style: none; /* 针对 IE/Edge */
}
/* 👇👇👇 必须加在外面：针对 Chrome/Safari/iOS 的隐藏规则 👇👇👇 */
.menu-grid::-webkit-scrollbar {
    display: none;
}
.menu-section-title { font-size: 0.85rem; color: #8e8e93; margin-bottom: 10px; font-weight: 600; margin-top: 22px; }

/* =========================================
   4. 图文卡片样式 (Cards) - 无框大图版
   ========================================= */
.article-card {
    display: flex; flex-direction: column;
    width: 100%; padding: 0; margin-bottom: 24px;
    /* 核心：完全透明，无边框 */
    background-color: transparent; border: none; box-shadow: none;
    border-radius: 0; cursor: pointer; overflow: visible;
    transition: all 0.2s ease;
}
.article-card:active { transform: scale(0.98); }

/* 图片容器 */
.article-cover {
    width: 100%; aspect-ratio: 16 / 9;
    background-color: #f0f2f5; /* 默认浅灰底 */
    position: relative;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.3s; }

/* 标题容器 */
.article-title-box {
    padding: 0 2px 8px 2px; /* 上右下左 */
    background-color: transparent; /* 确保透明 */
}

/* 标题文字 */
.article-title {
    font-size: 0.85rem; font-weight: 400; color: var(--text-color);
    margin: 0; line-height: 1.4; text-align: left;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}

/* =========================================
   5. 文章阅读页 (Reader)
   ========================================= */
.reader-header { 
    height: auto; min-height: 50px; flex-shrink: 0; 
    display: flex; align-items: center; justify-content: flex-start; 
    padding: 10px 20px 10px 55px; 
    background-color: var(--bg-color) !important; 
    z-index: 10; border-bottom: 1px solid rgba(0,0,0,0.03); position: relative; 
}
.reader-back-wrapper { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; cursor: pointer; color: var(--text-color); }
.header-title { font-size: 1.2rem; font-weight: 600; color: var(--text-color); width: 100%; line-height: 1.4; text-align: left; white-space: normal; }
.progress-bar-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: transparent; }
.progress-bar { width: 0%; height: 100%; background-color: var(--text-color); transition: width 0.1s linear; }
.reader-body { flex: 1; overflow-y: auto; padding: 20px 25px 80px; text-align: left !important; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.reader-body::-webkit-scrollbar { display: none; }
.html-content { font-size: 0.95rem; line-height: 1.8; color: var(--text-color); text-align: justify; }
.html-content { 
    font-size: 0.95rem; 
    line-height: 1.8; 
    color: var(--text-color); 
    text-align: justify; 
}
/* 👇👇👇 在这里粘贴你刚才的代码 👇👇👇 */
/* 文章发布日期的小字 */
.article-meta {
    font-size: 0.8rem;
    color: #8e8e93; 
    margin-top: 0px;
    margin-bottom: 15px; 
    letter-spacing: 0.5px;
}
/* 暗黑模式自动适配 - 放在这里是为了方便管理，不用特意跑到文件底部的 Section 7 去写 */
@media (prefers-color-scheme: dark) {
    .article-meta {
        color: #98989d;
    }
}
/* 弹窗遮罩 (保留样式以防万一，但主页HTML已删除结构) */
.reader-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color) !important; z-index: 2000; transform: translateX(100%); transition: transform 0.3s ease; }
.reader-overlay.active { display: block !important; transform: translateX(0); }

/* =========================================
   6. 底部合规栏 (Footer)
   ========================================= */
.app-footer { 
    position: fixed; bottom: 0; left: 0; width: 100%; 
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); 
    background-color: var(--bg-color); border-top: 1px solid rgba(0,0,0,0.05); 
    text-align: center; z-index: 90; font-size: 0.7rem; 
    display: flex; justify-content: center; align-items: center; 
    backdrop-filter: blur(10px); background: rgba(250, 250, 250, 0.85); 
}
.app-footer a { color: #999; text-decoration: none; margin: 0 8px; transition: color 0.2s; }
.app-footer a:hover { color: var(--text-color); }
.app-footer .divider { color: #ddd; font-size: 0.6rem; }

/* =========================================
   7. 暗黑模式适配 (Dark Mode)
   ========================================= */
@media (prefers-color-scheme: dark) {
    /* 通用 */
    .section-title { border-color: rgba(255,255,255,0.1); }
    .search-input-box:focus-within { background-color: rgba(255,255,255,0.1); }
    .reader-header { background-color: var(--bg-color) !important; }
    .content-html { color: #e0e0e0; }
    
    /* 激活项 */
    .section-item.active-nav, .sidebar-item.active { background-color: #1c1c1e !important; color: #fff !important; }

    /* 卡片与图片 - 彻底修复色差 */
    .article-card { background-color: transparent !important; }
    .article-title-box { background-color: transparent !important; }
    .article-title { background-color: transparent !important; }
    .article-cover { background-color: #2c2c2e; box-shadow: 0 4px 12px rgba(0,0,0,0.3); border: none !important; }

    /* 底部栏 */
    .app-footer { background-color: rgba(0,0,0,0.85); border-top: 1px solid rgba(255,255,255,0.1); }
    .app-footer .divider { color: #444; }
}

/* =========================================
   8. PC端适配 (Responsive)
   ========================================= */
@media (min-width: 768px) {
    .section-title, .main-container { width: 100%; max-width: 1100px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
    .section-title { border-bottom: 1px solid rgba(0,0,0,0.1); padding-top: 30px; padding-bottom: 20px; margin-bottom: 30px !important; justify-content: space-between; }
    .nav-center { flex: 1; width: 100%; padding: 0 40px; justify-content: center; }
    .section-item { flex: 1; text-align: center; padding: 10px 0; margin: 0 10px; font-size: 1rem; margin-left: 10px !important; }
    .section-item:first-child { margin-left: 10px; }
    :root { --sidebar-width: 200px; }
    .sidebar { height: 100%; overflow-y: auto; align-items: flex-start; gap: 15px; }
    .sidebar-item { width: 100%; text-align: left; padding-left: 20px; font-size: 0.95rem; height: 46px; display: flex; align-items: center; justify-content: flex-start; }
    .menu-grid { padding-left: 40px; }
    .reader-header { max-width: 1100px; width: 100%; margin: 0 auto; padding: 10px 40px; }
    .reader-body { 
        /* 1. 限制最大宽度，和标题栏保持一致 */
        max-width: 1100px; 
        /* 2. 也是居中 */
        margin: 0 auto; 
        /* 3. 宽度占满容器 */
        width: 100%;
        /* 原有的内边距保持不变 */
        padding: 0 40px 80px; 
    }
    
    /* PC端卡片微调 */
    .article-card { margin-bottom: 25px; }
    .article-card:hover .article-cover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); transition: all 0.2s ease; }
    .article-title { font-size: 1.1rem; }
}

/* =========================================
   9. 文章内链接美化 (无下划线纯净版)
   ========================================= */

/* 您之前选的颜色（蔚蓝色） */
:root {
    --link-color: #0099ff;      
    --link-bg-hover: rgba(0, 153, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --link-color: #69c0ff;  
        --link-bg-hover: rgba(105, 192, 255, 0.15);
    }
}

/* 针对正文区域的链接 */
.html-content a {
    color: var(--link-color);
    
    /* 👇 关键修改：彻底去掉所有下划线 */
    text-decoration: none !important; 
    border-bottom: none !important;
    
    font-weight: 500;
    transition: all 0.2s ease;
    
    /* 增加一点点击区域，防手抖 */
    padding: 2px 4px;
    margin: 0 -4px;
    border-radius: 4px;
}

/* 鼠标悬停 / 手指按下时，只显示淡淡的背景色，不加线 */
.html-content a:active,
.html-content a:hover {
    background-color: var(--link-bg-hover);
    opacity: 0.8;
}

/* =========================================
   10. 修复长代码/链接撑开屏幕的问题 (Fix Overflow)
   ========================================= */

/* 1. 给正文容器加强制换行规则 */
.html-content {
    /* 允许在单词内换行 (针对长URL) */
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    
    /* 防止某些浏览器不听话 */
    word-break: break-word; 
    
    /* 确保容器本身不会溢出 */
    max-width: 100%;
}

/* 2. 专门针对代码块 (code 标签) */
code {
    /* 允许代码保留格式的同时换行 */
    white-space: pre-wrap !important; 
    
    /* 暴力打断长链接 (比如 git clone 那一串) */
    word-break: break-all !important; 
    
    /* 稍微美化一下代码块背景，让它看起来更像代码 */
    background: rgba(127, 127, 127, 0.15);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace; /* 等宽字体 */
    font-size: 0.85em; /* 稍微小一点 */
}

/* =========================================
   11. 全局隐藏滚动条 (沉浸式阅读模式)
   ========================================= */

/* 针对 Firefox */
html, body {
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

/* 针对 Chrome, Safari, Edge, iOS, Android */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}