/* ==========================================
   1. 基础变量与全局重置 (Variables & Base)
   ========================================== */
:root {
    /* 亮色模式变量 */
    --bg-color: #f3f4f6; 
    --card-bg: rgba(255, 255, 255, 0.42); 
    --sidebar-bg: rgba(255, 255, 255, 0.15);
    --text-main: #1f2937; 
    --text-muted: #6b7280; 
    --accent: #3b82f6; 
    --border: rgba(229, 231, 235, 0.8);
    --bg-overlay: rgba(255,255,255,0.73);
}

[data-theme="dark"] {
    /* 暗色模式变量 */
    --bg-color: #111827; 
    --card-bg: rgba(31, 41, 55, 0.75); 
    --sidebar-bg: rgba(31, 41, 55, 0.35);
    --text-main: #f9fafb; 
    --text-muted: #9ca3af; 
    --accent: #60a5fa; 
    --border: rgba(55, 65, 81, 0.8);
    --bg-overlay: rgba(0,0,0,0.66);
}

body {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color); 
    color: var(--text-main);
    line-height: 1.6; 
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden; /* 彻底禁用横向滚动条 */
}

/* ==========================================
   2. 全局背景与布局框架 (Layout & Grid)
   ========================================== */
/* PC端动态背景 */
.app-bg { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; 
    background-size: cover; background-position: center; transition: filter 0.8s ease; display: none; 
}
.app-bg::after { content: ''; position: absolute; inset: 0; background: var(--bg-overlay); transition: background 0.3s; }
.app-bg.is-loading { filter: blur(60px) scale(1.05); }

/* 主容器与侧边栏布局 */
.container { max-width: 1280px; padding: 40px 20px; margin: 0 auto; min-height: calc(100vh - 160px); }
.blog-layout { display: flex; gap: 30px; align-items: flex-start; }
.blog-layout.sidebar-right { flex-direction: row-reverse; }
.blog-main { flex: 1; min-width: 0; }

/* 侧边栏与个人名片 */
.blog-sidebar { 
    width: 280px; 
    flex-shrink: 0; 
    position: sticky; 
    top: 80px; /* 距离顶部的安全间隙 */
    height: calc(100vh - 100px); /* 【核心修复】：强行限制侧边栏总高度，永远不超过屏幕 */
    display: flex; 
    flex-direction: column; 
    gap: 20px; /* 卡片和目录之间的间距 */
}

.profile-card { 
    background: var(--sidebar-bg); 
    border-radius: 12px; 
    border: 1px solid var(--border); 
    padding: 30px 20px; 
    text-align: center; 
    flex-shrink: 0; /* 【核心修复】：防止个人卡片被下方目录挤压变形 */
}
.profile-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; border: 2px solid var(--border); padding: 4px; background: var(--bg-color); }
.profile-name { margin: 0 0 10px 0; font-size: 1.4rem; color: var(--text-main); }
.profile-bio { font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 20px; }
.profile-social { display: flex; justify-content: center; gap: 15px; }
.profile-social a { color: var(--text-muted); transition: color 0.2s, transform 0.2s; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-color); }
.profile-social a:hover { color: var(--accent); transform: translateY(-3px); }

/* ==========================================
   3. 头部导航与操作栏 (Header & Navigation)
   ========================================== */
.blog-header { 
    border-bottom: 1px solid var(--border); 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    background: transparent !important; /* 核心：让父容器彻底透明 */
    backdrop-filter: none !important;   /* 核心：剥夺父容器的模糊效果 */
    /* transition: border-color 0.3s; */
}
.blog-header:has(.blog-nav.is-active) {
    border-bottom-color: transparent !important;
}
/* 新增：利用伪元素专门负责头部栏的模糊和底色 */
.blog-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; /* 严丝合缝地贴合 header 的大小 */
    background: var(--card-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: -1; /* 沉到底部，不影响上面的文字和按钮 */
}
.header-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 1.5rem; font-weight: bold; cursor: pointer; letter-spacing: -0.5px; }

/* 顶部菜单与高亮状态 */
.blog-nav { display: flex; gap: 24px; flex: 1; margin-left: 40px; }
.blog-nav a { 
    text-decoration: none; color: var(--text-main); font-weight: 500; 
    transition: color 0.2s; white-space: nowrap; position: relative; 
}
.blog-nav a:hover { color: var(--accent); }

/* 【新增】：当前页面的高亮下划线效果 */
.blog-nav a.active { color: var(--accent); font-weight: bold; }
.blog-nav a.active::after { 
    content: ''; position: absolute; bottom: -6px; left: 50%; 
    transform: translateX(-50%); width: 20px; height: 3px; 
    background: var(--accent); border-radius: 2px; 
}
/* 头部右侧操作区 (搜索+主题+汉堡菜单) */
.header-actions { display: flex; align-items: center; gap: 8px; }
.action-btn { 
    width: 38px; height: 38px; border-radius: 8px; display: flex; 
    align-items: center; justify-content: center; cursor: pointer; 
    color: var(--text-main); transition: background 0.2s, color 0.2s; 
}
.action-btn:hover { background: var(--bg-color); color: var(--accent); }

/* 搜索框 (桌面端形态) */
.search-box { position: relative; display: flex; align-items: center; background: transparent; border: none; padding: 0; }
.search-box input { 
    background: var(--bg-color); border: 1px solid var(--border); padding: 8px 16px; 
    border-radius: 20px; outline: none; margin-left: 8px; width: 180px; 
    font-size: 14px; color: var(--text-main); transition: all 0.2s; 
}
.search-box input:focus { border-color: var(--accent); }

/* 默认隐藏移动端专属图标 */
.mobile-menu-toggle, .search-icon { display: none !important; }

/* ==========================================
   4. 内容组件：文章列表、标签、归档、分页
   ========================================== */
.post-list { display: flex; flex-direction: column; gap: 24px; }
.post-card { background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; display: flex; overflow: hidden; }
.post-card:not(.has-cover) { padding: 24px; flex-direction: column; }
.post-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }

.post-cover { width: 280px; flex-shrink: 0; background-size: cover; background-position: center; }
.post-card.cover-right .post-cover { border-left: 1px solid var(--border); }
.post-card.cover-left .post-cover { border-right: 1px solid var(--border); }

.post-info { flex: 1; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.post-card:not(.has-cover) .post-info { padding: 0; }
.post-info h2 { margin: 0 0 8px 0; font-size: 1.4rem; color: var(--text-main); line-height: 1.3; }
.post-info .meta { display: flex; align-items: center; font-size: 0.9rem; color: var(--text-muted); }
.post-info .excerpt { color: var(--text-muted); font-size: 14px; margin-top: 10px; line-height: 1.6; }

/* 标签体系 */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; margin-bottom: 8px; }
.tag { background: rgba(59, 130, 246, 0.1); color: var(--accent); font-size: 12px; padding: 2px 10px; border-radius: 12px; font-weight: 500; }
/* 卡片内嵌标签点击动画 */
.clickable-tag { cursor: pointer; transition: all 0.2s; position: relative; z-index: 2; }
.clickable-tag:hover { 
    background: var(--accent) !important; 
    color: white !important; 
    transform: translateY(-2px); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}
/* 归档时间轴 */
.archives-container { padding: 20px; background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border); }
.archive-title { font-size: 2rem; margin-top: 0; margin-bottom: 30px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
.archive-year h2 { font-size: 1.5rem; color: var(--accent); margin: 30px 0 16px 0; position: relative; padding-left: 24px; }
.archive-year h2::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.archive-item { display: flex; align-items: baseline; padding: 14px 0 14px 22px; border-left: 2px solid var(--border); margin-left: 4px; cursor: pointer; transition: all 0.2s; }
.archive-item:hover { background: rgba(59, 130, 246, 0.05); border-left-color: var(--accent); }
.archive-item:hover .archive-title-link { color: var(--accent); }
.archive-date { font-family: "Fira Code", monospace; color: var(--text-muted); width: 65px; flex-shrink: 0; font-size: 14px; }
.archive-title-link { font-size: 1.1rem; color: var(--text-main); font-weight: 500; transition: color 0.2s; }

/* 高级分页控件 */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 50px; padding-bottom: 20px; }
.page-btn { padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text-main); font-size: 14px; text-decoration: none; transition: all 0.2s; cursor: pointer; }
.page-btn:hover:not(.disabled) { border-color: var(--accent); color: var(--accent); }
.page-btn.disabled { opacity: 0.5; cursor: not-allowed; background: var(--bg-color); }
.page-info { font-size: 14px; color: var(--text-muted); font-weight: 500; margin: 0 10px; }
.page-jump { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-muted); margin-left: 10px; }
.page-jump-input { width: 50px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; text-align: center; outline: none; }
.page-jump-input:focus { border-color: var(--accent); }
.page-jump-btn { padding: 6px 12px; background: var(--accent); color: white; border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s; }
.page-jump-btn:hover { background: #2563eb; }
.limit-select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text-main); font-size: 14px; outline: none; cursor: pointer; margin-left: 10px; }

/* 分类与标签云 */
.category-section { margin-bottom: 40px; }
.category-section h2 { border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 20px; font-size: 1.5rem; }
.cloud-container { display: flex; flex-wrap: wrap; gap: 12px; }
.cloud-item { padding: 8px 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; color: var(--text-main); text-decoration: none; transition: all 0.2s; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; }
.cloud-item:hover { background: rgba(59, 130, 246, 0.1); border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.cloud-item .count { background: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 10px; font-size: 12px; margin-left: 8px; font-weight: bold; }
.filter-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }

/* ==========================================
   5. 文章正文排版 (Markdown & TOC)
   ========================================== */
/* 文章头部特化 */
.article-inner-cover { width: 100%; max-height: 450px; object-fit: cover; border-radius: 12px 12px 0 0; margin: -40px -40px 30px -40px; width: calc(100% + 80px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.article-inner-header { text-align: center; margin-bottom: 30px; }
.article-inner-header h1 { font-size: 2.2rem; margin: 0 0 12px 0; color: var(--text-main); border-bottom: none; padding: 0; }
.article-inner-header .meta { color: var(--text-muted); font-size: 0.95rem; display: flex; justify-content: center; gap: 15px; }
.article-divider { border: 0; height: 1px; background: var(--border); margin: 30px 0; }

/* Markdown 核心样式 */
.markdown-body { background: var(--card-bg); padding: 40px; border-radius: 12px; border: 1px solid var(--border); }
.markdown-body h1 { margin-top: 0; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.markdown-body img { max-width: 100%; border-radius: 8px; margin: 16px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.markdown-body pre { border-radius: 8px; padding: 16px; overflow-x: auto; background: #282c34; }
.markdown-body code { font-family: "Fira Code", Consolas, monospace; font-size: 14px; }
.markdown-body p code { background: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 4px; color: #eb5757; }
.markdown-body blockquote { border-left: 4px solid var(--accent); margin: 0; padding-left: 16px; color: var(--text-muted); background: var(--bg-color); padding: 10px 16px; border-radius: 0 8px 8px 0; }

/* 表格样式支持与修复 */
.markdown-body table { width: 100%; border-collapse: collapse; margin: 16px 0; display: block; overflow-x: auto; white-space: nowrap; }
.markdown-body tr:nth-child(2n) { background-color: rgba(0,0,0,0.02); } 
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 8px 12px; }
.markdown-body th { background: var(--bg-color); font-weight: bold; }
.markdown-body th[align="center"], .markdown-body td[align="center"] { text-align: center; }
.markdown-body th[align="right"], .markdown-body td[align="right"] { text-align: right; }
.markdown-body th[align="left"], .markdown-body td[align="left"] { text-align: left; }

/* ==========================================
   新增：面包屑导航与可点击 Meta/标签
   ========================================== */
.breadcrumb { 
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; 
    margin-bottom: 30px; font-size: 14px; color: var(--text-muted); 
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .separator { color: var(--border); margin: 0 4px; }
.breadcrumb .current { color: var(--text-main); font-weight: 500; }

/* 正文标题下方的分类链接 hover 效果 */
.article-inner-header .meta a:hover { color: var(--accent) !important; }

/* 修复内部标题标签的悬停动画 */
.article-inner-header .post-tags .tag { transition: transform 0.2s, background 0.2s; cursor: pointer; }
.article-inner-header .post-tags .tag:hover { transform: translateY(-2px); background: rgba(59, 130, 246, 0.2); }
/* 文章目录 (TOC) */
.toc-container { 
    background: var(--sidebar-bg); 
    border-radius: 12px; 
    border: 1px solid var(--border); 
    padding: 20px; 
    display: none; 
    flex: 1; /* 【核心修复】：让目录自动占据侧边栏下方的所有剩余空间 */
    min-height: 0; /* 【核心秘诀】：允许容器缩小到比内容更小，从而成功触发内部滚动条 */
    overflow-y: auto; /* 内容超出时，在内部产生精美的滚动条 */
}
.toc-container h3 { margin: 0 0 12px 0; font-size: 1.1rem; color: var(--text-main); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-item { margin-bottom: 8px; font-size: 0.9rem; }
.toc-link { color: var(--text-muted); text-decoration: none; display: block; transition: all 0.2s; border-left: 2px solid transparent; padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc-link:hover, .toc-link.active { color: var(--accent); font-weight: bold; border-left-color: var(--accent); }
.toc-h1 .toc-link { padding-left: 8px; }
.toc-h2 .toc-link { margin-left: 12px; }
.toc-h3 .toc-link { margin-left: 24px; }

/* ==========================================
   6. 悬浮组件 (Float Actions & Toast)
   ========================================== */
.floating-actions { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 12px; z-index: 1000; }
.float-btn { width: 44px; height: 44px; background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all 0.3s ease; }
.float-btn:hover { background: var(--accent); color: white; transform: translateY(-3px); border-color: var(--accent); }
#back-to-top { opacity: 0; visibility: hidden; transform: translateY(20px); }
#back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

.sys-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--card-bg); color: var(--text-main); padding: 10px 24px; border-radius: 30px; border: 1px solid var(--border); box-shadow: 0 4px 15px rgba(0,0,0,0.1); font-size: 14px; opacity: 0; visibility: hidden; transition: all 0.3s; z-index: 9999; }
.sys-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.loading { text-align: center; color: var(--text-muted); padding: 40px; }
.blog-footer { text-align: center; padding: 24px; color: var(--text-muted); font-size: 14px; border-top: 1px solid var(--border); }

/* ==========================================
   7. 响应式与移动端深度适配 (Media Queries)
   ========================================== */
/* [桌面端增强保障] */
@media screen and (min-width: 801px) {
    .blog-nav { display: flex !important; }
    .app-bg { display: block; }
    .post-card, .markdown-body, .archives-container, .profile-card, .toc-container { 
        backdrop-filter: blur(10px); 
        -webkit-backdrop-filter: blur(10px);
    }
}

/* [平板与移动端核心适配] (<= 800px) */
@media screen and (max-width: 800px) {
    /* .blog-header{ backdrop-filter: blur(10px); } */
    .blog-header:has(.blog-nav.is-active) {
        border-bottom-color: transparent !important; 
    }
    /* ==========================================
       修复 1：强制子元素拉伸占满 100% 宽度，解决消失和挤压问题
       ========================================== */
    .blog-layout { 
        flex-direction: column !important; /* 【核心修复】：必须加 !important 破解桌面端高优先级 */
        display: flex; 
        align-items: stretch; 
        gap: 20px; 
    }
    .blog-main { 
        width: 100%; 
        box-sizing: border-box; 
        flex: 1 0 auto !important; /* 强制不允许收缩到0，拯救消失的正文 */
        min-height: 50vh;
    }
    
    /* ==========================================
       修复 2：控制侧边栏在主页和文章页的上下位置
       ========================================== */
    .blog-sidebar { 
        display: flex; flex-direction: column; width: 100%; 
        position: static; height: auto; 
        order: -1; /* 默认在顶部 */
        margin: 0; 
    }
    /* 为了不让卡片在手机端挡住文章正文的阅读视线，我把它挪到了文章的【最底部】。*/
    /* 下面这行 `order: 2` 控制了位置。如果你非要它在文章顶部显示，把 order 改成 -1 即可 */
    body.page-post .blog-sidebar {
        order: 2 !important; 
        margin-top: 40px !important; 
    }
    /* ==========================================
        新增：精准控制侧边栏（个人卡片）的显示范围
        需求：在分类页、归档页彻底隐藏侧边栏
    ========================================== */
    body.page-category .blog-sidebar,
    body.page-archives .blog-sidebar {
        display: none !important;
    }
    .toc-container { display: none !important; }
    /* ==========================================
       修复 3：使用 Grid 将个人卡片重构为超紧凑的横向名片
       ========================================== */
    .profile-card { 
        width: 100%; box-sizing: border-box; 
        padding: 16px;
        display: grid;
        grid-template-columns: 64px 1fr; /* 左侧 64px 给头像，右侧自适应 */
        grid-template-areas: 
            "avatar name"
            "avatar bio"
            "social social";
        text-align: left;
        align-items: center;
        row-gap: 4px;
        column-gap: 16px;
    }
    .profile-avatar { grid-area: avatar; width: 64px; height: 64px; margin: 0; border-width: 1px; }
    .profile-name { grid-area: name; margin: 0; font-size: 1.2rem; align-self: flex-end; }
    .profile-bio { grid-area: bio; margin: 0; font-size: 0.85rem; line-height: 1.4; align-self: flex-start; }
    
    /* 底部社交图标缩小并靠左对齐 */
    .profile-social { grid-area: social; justify-content: flex-start; margin-top: 8px; gap: 10px; }
    .profile-social a { width: 32px; height: 32px; }

    /* Header 按钮切换 */
    .mobile-menu-toggle, .search-icon { display: flex !important; }
    
    /* 搜索框漂移修复 */
    .search-box input { 
        position: absolute; top: 60px; left: 16px; right: 16px; width: auto; 
        background: var(--card-bg); box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
        opacity: 0; visibility: hidden; transform: translateY(-10px); z-index: 1000;
    }
    .search-box.is-active input { opacity: 1; visibility: visible; transform: translateY(0); }
    
    /* 【修复】：汉堡菜单下拉面板增加强力模糊遮罩，并完美向下对齐 */
    .blog-nav { 
        position: absolute !important; 
        left: 0 !important; 
        right: 0 !important; 
        width: 100vw !important; 
        box-sizing: border-box !important;
        
        top: 100% !important; 
        padding: 24px 20px !important; 
        margin: 0 !important; 
        
        background: var(--card-bg) !important;
        /* 核心修复 1：模糊度必须和父级 header 完全一致 (15px) */
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        
        border-radius: 0 0 16px 16px !important; 
        border: none !important; 
        border-bottom: 1px solid var(--border) !important; 
        
        z-index: -1 !important; 
        /* 核心修复 2：调整阴影参数，让偏移量等同于模糊半径，彻底杜绝阴影向上溢出 */
        box-shadow: 0 20px 20px rgba(0,0,0,0.12) !important;
        
        /* 核心修复 3：物理级安全锁！用 clip-path 把顶部的溢出区域一刀切掉，左右和下方保留阴影 */
        clip-path: inset(0px -50px -50px -50px) !important;
        
        display: none; 
        grid-template-columns: 1fr 1fr !important; 
        gap: 12px !important;
    }
    .blog-nav.is-active { display: grid; }
    .blog-nav a { 
        text-align: center; font-size: 1rem; padding: 12px; margin: 0;
        border-radius: 10px; 
        color: var(--text-main); font-weight: 500;
        background: var(--card-bg) !important;
        border: 1px solid var(--border) !important; /* 增加细微的实体边框 */
        box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important; /* 增加微浮雕阴影 */
        font-weight: 600 !important; /* 字体加粗 */
        letter-spacing: 2px; /* 增加字距，提升阅读清晰度 */
    }
    .blog-nav a:hover { background: rgba(59, 130, 246, 0.1); color: var(--accent); }
    .blog-nav a.active {
        background: var(--accent) !important; /* 采用主题强调色填充 */
        color: #ffffff !important; /* 文字反白 */
        border-color: var(--accent) !important;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important; /* 增加发光感阴影 */
    }
    .blog-nav a.active::after {
        display: none !important; /* 隐藏以前的下划线 */
    }
    /* 浮动控件位置调整 */
    .floating-actions { bottom: 20px; right: 20px; }
    
    /* 平板端缩减正文留白 */
    .markdown-body { padding: 24px; }
    .article-inner-cover { margin: -24px -24px 24px -24px; width: calc(100% + 48px); max-height: 400px; }

    /* 2. 修复归档页滑动残留高亮：屏蔽手机端 hover 效果，改为点击(active)时才高亮 */
    .archive-item:hover {
        background: transparent !important;
        border-left-color: var(--border) !important;
    }
    .archive-item:hover .archive-title-link {
        color: var(--text-main) !important;
    }
    .archive-item:active {
        background: rgba(59, 130, 246, 0.05) !important;
        border-left-color: var(--accent) !important;
    }
    .archive-item:active .archive-title-link {
        color: var(--accent) !important;
    }

    /* 3. 修复搜索框变成小圆圈：解除父级定位限制，撑满屏幕宽度 */
    .search-box {
        position: static !important; 
    }
    .search-box input {
        position: absolute !important;
        top: 70px !important;
        left: 16px !important;
        width: calc(100vw - 32px) !important; /* 屏幕总宽减去两侧留白 */
        box-sizing: border-box !important;
        background: var(--bg-color) !important;
        border-radius: 12px !important;
        padding: 14px 20px !important;
        font-size: 16px !important; /* 字体设为16px可防止 iOS 点击输入框时自动放大屏幕 */
    }
}

/* [小屏幕手机微调] (<= 600px) */
@media screen and (max-width: 600px) {
    .header-inner { padding: 0 12px; }
    .logo { font-size: 1.2rem; }
    
    /* 文章卡片垂直排列 */
    .post-card.has-cover { flex-direction: column !important; }
    .post-cover { width: 100%; height: 200px; order: -1 !important; border: none !important; border-bottom: 1px solid var(--border) !important; }
    
    /* 文章内页大标题微调 */
    .article-inner-cover { margin: -20px -20px 20px -20px; width: calc(100% + 40px); max-height: 250px; }
    .article-inner-header h1 { font-size: 1.6rem; }
    
    /* 分页在超窄屏下的换行 */
    .pagination { gap: 6px; }
    .page-btn { padding: 6px 10px; }
    
    /* 归档列表间距缩小 */
    .archives-container { padding: 16px; }
    .archive-item { padding: 12px 0 12px 16px; flex-direction: column; gap: 4px; }
    .archive-date { width: auto; font-size: 13px; }
    
    /* 手机端极限压缩边距，让封面更大更显眼 */
    .markdown-body { padding: 16px; }
    .article-inner-cover { 
        margin: -16px -16px 20px -16px; 
        width: calc(100% + 32px); 
        max-height: 350px; /* 大幅提升高度上限 */
        border-radius: 12px 12px 0 0; 
    }
}

/* ==========================================
   全局滚动条美化 (修复右侧异常白边)
   ========================================== */
::-webkit-scrollbar { width: 9px; height: 8px; }
/* 轨道使用背景色填充，防止透明导致的渲染异常 */
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: #abaeb4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* 暗黑模式适配 */
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-color); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }