/*
 * Apple-Inspired & Modern Redesign (最终调整与创意微调 - 液态玻璃效果增强)
 *
 * 本CSS文件旨在创建一个灵感来源于Apple macOS界面的现代、优雅设计。
 * 核心特性包括：
 * - 液态玻璃（Frosted Glass）效果：应用于主容器、卡片和部分交互元素。
 * - 深浅模式（Dark/Light Mode）切换：通过CSS变量实现无缝主题切换。
 * - 响应式设计：在不同屏幕尺寸下提供流畅的用户体验。
 * - 精细的间距、字体和阴影调整，以达到更精致的视觉效果。
 */

/* ========================================================================= */
/* 1. 全局变量与基本设置 (Global Variables & Base Settings) */
/* ========================================================================= */
:root {
    /* Apple风格配色方案 (Light Mode) */
    --accent-color: #6a9ac9; /* 强调色: 柔和优雅的蓝色 */
    --accent-color-light: rgba(106, 154, 201, 0.15); /* 强调色浅变体: 用于背景或微弱阴影 */
    --accent-color-hover: #507ea6; /* 强调色悬停状态 */

    /* 亮色模式 - 液态玻璃效果调整 (85% 不透明度) */
    --color-bg-base: 240, 243, 247; /* 基础背景色的RGB值 */
    --color-bg: rgba(var(--color-bg-base), 0.85); /* 页面基础背景: 灰白色，带透明度 */

    --color-fg: #212529; /* 前景色: 深色文本 */
    --color-fg-muted: #6c757d; /* 柔和前景色: 次要文本/图标 */
    --color-fg-subtle: #adb5bd; /* 微妙前景色: 更浅的灰色 */
    --color-border: #e6eaf0; /* 边框色: 极浅、干净的边框 */

    --color-card-base: 255, 255, 255; /* 卡片背景色的RGB值 */
    --color-card-bg: rgba(var(--color-card-base), 0.85); /* 卡片背景: 近乎不透明的白色，实现“磨砂玻璃”效果 */

    --color-shadow-light: rgba(0, 0, 0, 0.04); /* 阴影: 极浅，用于微弱的浮动感 */
    --color-shadow-medium: rgba(0, 0, 0, 0.08); /* 阴影: 中等，用于悬停/活动状态 */
    --color-shadow-strong: rgba(0, 0, 0, 0.12); /* 阴影: 强，用于突出元素 */

    /* 字体设置 (Typography) */
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'SF Pro Display', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* 标题字体: 优先Apple系统字体 */
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; /* 等宽字体 */

    /* 间距与尺寸 (Spacing & Dimensions) */
    --sidebar-width: 280px; /* 侧边栏宽度 */
    --sidebar-width-compact: 230px; /* 侧边栏紧凑宽度 (备用) */
    --transition-speed: 0.3s; /* 过渡动画速度 */
    --border-radius-large: 16px; /* 大圆角 */
    --border-radius-medium: 10px; /* 中圆角 */
    --border-radius-small: 6px; /* 小圆角 */

    /* 背景图片 (Background Images) */
    --bg-light-image: url('../img/background/light-bg.jpg');
    --bg-dark-image: url('../img/background/dark-bg.jpg');
}

/* 媒体查询：深色模式 (Dark Mode) */
[data-scheme="dark"] {
    /* 深色模式强调色 */
    --accent-color: #8bbce0; /* 更亮但柔和的蓝色 */
    --accent-color-light: rgba(139, 188, 224, 0.15);
    --accent-color-hover: #72a2cc;

    /* 深色模式 - 液态玻璃效果调整 (85% 不透明度) */
    --color-bg-base: 26, 30, 36;
    --color-bg: rgba(var(--color-bg-base), 0.85); /* 深色、去饱和背景，带透明度 */

    --color-fg: #e0e6eb; /* 亮色文本 */
    --color-fg-muted: #9ba7b4;
    --color-fg-subtle: #5f6c77;
    --color-border: #3b424d;

    --color-card-base: 34, 39, 46;
    --color-card-bg: rgba(var(--color-card-base), 0.85); /* 深色“磨砂玻璃”卡片 */

    --color-shadow-light: rgba(0, 0, 0, 0.1);
    --color-shadow-medium: rgba(0, 0, 0, 0.2);
    --color-shadow-strong: rgba(0, 0, 0, 0.3);
}

/* ========================================================================= */
/* 2. 核心布局与全局样式 (Core Layout & Global Styles) */
/* ========================================================================= */
/* 统一盒模型 */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 14px; /* 全局字体大小调整，为内容留出更多空间 */
}

body {
    font-family: var(--font-body), serif;
    color: var(--color-fg);
    line-height: 1.7; /* 行高 */
    margin: 0;
    transition: color var(--transition-speed); /* 字体颜色过渡 */
    z-index: 0; /* 确保内容在背景之上 */
    min-height: 100%; /* 确保body至少占据视口高度 */
}

/* 背景液态玻璃效果：更深度的模糊与缩放 */
body::before {
    content: '';
    position: fixed; /* 固定在视口 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--color-bg-base)); /* 主题背景色的RGB值作为回退/初始加载颜色 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1; /* 置于内容下方 */
    transition: background-image var(--transition-speed), filter var(--transition-speed), transform var(--transition-speed);
    filter: blur(15px) brightness(0.85); /* 模糊和亮度调整 */
    -webkit-filter: blur(15px) brightness(0.85); /* WebKit兼容 */
    transform: scale(1.05); /* 轻微放大以避免模糊边缘 */
    pointer-events: none; /* 允许点击穿透 */
    background-image: var(--bg-light-image); /* 亮色模式背景图 */
}

/* 深色模式背景图片和滤镜 */
[data-scheme="dark"] body::before {
    background-image: var(--bg-dark-image);
    filter: blur(15px) brightness(0.65) grayscale(0.2);
    -webkit-filter: blur(15px) brightness(0.65) grayscale(0.2);
}

/* 链接样式 */
a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-speed), text-decoration var(--transition-speed);
}
a:hover {
    color: var(--accent-color-hover);
    text-decoration: none;
}

/* 主容器 - 核心液态玻璃应用窗口 */
.container {
    display: flex;
    max-width: 1500px;
    height: 96vh; /* 保持96%视口高度 */
    margin: 2vh auto; /* 垂直居中 */
    background-color: var(--color-card-bg); /* 使用卡片背景色，带透明度 */
    backdrop-filter: blur(30px) saturate(1.8) brightness(1.05); /* 强烈的背景模糊效果 */
    -webkit-backdrop-filter: blur(30px) saturate(1.8) brightness(1.05); /* WebKit兼容 */
    border-radius: var(--border-radius-large);
    box-shadow: 0 10px 40px var(--color-shadow-strong), 0 5px 15px var(--color-shadow-medium); /* 多层阴影 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    border: 1px solid var(--color-border);
    transition: all var(--transition-speed) ease; /* 所有属性平滑过渡 */
}

/* ========================================================================= */
/* 3. 左侧边栏 (Left Sidebar) - 导航面板与液态玻璃元素 */
/* ========================================================================= */
.left-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0; /* 不压缩侧边栏宽度 */
    background-color: var(--color-card-bg); /* 侧边栏背景 */
    backdrop-filter: blur(0px); /* 明确不模糊自身背景，只依赖父容器的backdrop-filter */
    -webkit-backdrop-filter: blur(0px);
    border-right: 1px solid var(--color-border); /* 右侧边框 */
    padding: 2.5rem 2rem; /* 侧边栏内边距调整 */
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* 垂直滚动 */
    position: relative;
    z-index: 2; /* 确保在内容之上 */
}

.left-sidebar header {
    text-align: center;
    margin-bottom: 1.5rem; /* 调整头部外边距 */
}

/* 站点头像 */
.site-avatar .site-logo {
    border-radius: 50%;
    border: 4px solid var(--color-border);
    transition: transform var(--transition-speed), border-color var(--transition-speed);
    box-shadow: 0 4px 12px var(--color-shadow-light);
}
.site-avatar:hover .site-logo {
    transform: scale(1.08); /* 悬停放大效果 */
    border-color: var(--accent-color);
}

/* 站点元信息 */
.site-meta .site-name a {
    color: var(--color-fg);
    font-family: var(--font-heading);
    font-size: 1.7rem; /* 站点名称字体大小调整 */
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-top: 0.8rem;
    display: inline-block;
}
.site-meta .site-description {
    font-size: 0.9rem; /* 站点描述字体大小调整 */
    color: var(--color-fg-muted);
    margin: 0.4rem 0 0;
}

/* 搜索栏 - 磨砂输入框与按钮 */
.search-form {
    display: flex;
    margin: 2rem 0; /* 搜索栏外边距调整 */
    position: relative;
}
.search-input {
    flex-grow: 1;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    backdrop-filter: blur(10px) brightness(1.1); /* 磨砂玻璃效果 */
    -webkit-backdrop-filter: blur(10px) brightness(1.1);
    color: var(--color-fg);
    padding: 0.6rem 1rem; /* 输入框内边距调整 */
    border-radius: var(--border-radius-medium);
    font-size: 0.9rem; /* 字体大小调整 */
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    width: 100%;
    -webkit-appearance: none; /* 移除默认样式 */
}
.search-input::placeholder {
    color: var(--color-fg-subtle);
    opacity: 0.8;
}
.search-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color-light); /* 聚焦光圈效果 */
}

/* 修复：隐藏type="search"输入框在WebKit浏览器中默认的清除按钮(x)，防止与自定义搜索图标重叠 */
.search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

.search-button {
    background: transparent;
    border: none;
    color: var(--color-fg-muted);
    padding: 0.6rem; /* 按钮内边距调整 */
    cursor: pointer;
    font-size: 0.9rem; /* 按钮图标大小调整 */
    position: absolute;
    right: 10px; /* 按钮位置调整 */
    top: 50%;
    transform: translateY(-50%);
    transition: color var(--transition-speed), transform var(--transition-speed);
}
.search-button:hover {
    color: var(--accent-color);
    transform: translateY(-50%) scale(1.1); /* 悬停放大 */
}

/* 站点导航 - 高亮活动状态 */
.site-nav { margin: 1rem 0; } /* 导航外边距调整 */
.site-nav .menu { list-style: none; padding: 0; }
.site-nav .nav-link {
    display: flex;
    align-items: center;
    padding: 0.7rem 0.8rem; /* 导航链接内边距调整 */
    color: var(--color-fg-muted);
    font-weight: 500;
    font-size: 1rem; /* 字体大小调整 */
    border-radius: var(--border-radius-small);
    transition: all var(--transition-speed);
    will-change: background-color, color; /* 优化动画性能 */
}
.site-nav .nav-link:hover {
    background-color: var(--color-bg);
    backdrop-filter: blur(10px) brightness(1.05); /* 磨砂玻璃效果 */
    -webkit-backdrop-filter: blur(10px) brightness(1.05);
    color: var(--accent-color);
    transform: translateX(5px); /* 悬停位移效果 */
}
.site-nav .nav-link.active {
    background-color: var(--accent-color); /* 活动状态填充背景 */
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px var(--accent-color-light);
    backdrop-filter: none; /* 活动状态不应用模糊 */
    -webkit-backdrop-filter: none;
}
.site-nav .nav-link.active:hover {
    background-color: var(--accent-color-hover);
    color: white;
    transform: none; /* 活动状态悬停无位移 */
}
.nav-separator {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 1rem 0; /* 分隔线外边距调整 */
}

/* 菜单底部区域 */
.menu-bottom-section {
    margin-top: auto; /* 推到底部 */
    padding-top: 1.5rem;
    text-align: center;
}

/* 社交链接 */
.social-links {
    margin-bottom: 1rem; /* 社交链接外边距调整 */
}
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; /* 社交图标尺寸调整 */
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-bg);
    backdrop-filter: blur(10px) brightness(1.1); /* 磨砂玻璃效果 */
    -webkit-backdrop-filter: blur(10px) brightness(1.1);
    color: var(--color-fg-muted);
    margin: 0 0.3rem; /* 社交图标间距调整 */
    font-weight: bold;
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 6px var(--color-shadow-light);
    transition: all var(--transition-speed) cubic-bezier(0.2, 0.8, 0.2, 1); /* 动画曲线 */
}
.social-links a:hover {
    background-color: var(--accent-color);
    backdrop-filter: none; /* 悬停时不应用模糊 */
    -webkit-backdrop-filter: none;
    color: white;
    transform: translateY(-4px) scale(1.05); /* 悬停浮动与放大效果 */
    box-shadow: 0 8px 20px var(--accent-color-light), 0 2px 4px var(--color-shadow-medium);
    border-color: var(--accent-color);
}

/* 深色模式切换器 */
.dark-mode-toggle { margin: 1.5rem 0; } /* 切换器外边距调整 */
.dark-mode-toggle label { display: inline-flex; align-items: center; cursor: pointer; }
.dark-mode-toggle span { color: var(--color-fg-muted); font-size: 0.9rem; } /* 字体大小调整 */
.dark-mode-toggle input { display: none; } /* 隐藏原生checkbox */
.dark-mode-toggle .slider {
    width: 44px; /* 滑块宽度调整 */
    height: 24px;
    background-color: var(--color-fg-subtle);
    border-radius: 12px;
    position: relative;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
    margin: 0 0.6rem;
    border: 1px solid var(--color-border);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* 内阴影 */
}
.dark-mode-toggle .slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px; /* 滑块手柄尺寸调整 */
    height: 16px;
    background-color: white;
    border-radius: 50%;
    transition: transform var(--transition-speed) cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.dark-mode-toggle input:checked + .slider {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}
.dark-mode-toggle input:checked + .slider::before {
    transform: translateX(20px); /* 滑块手柄位移调整 */
}

/* 版权信息 */
.copyright {
    font-size: 0.75rem; /* 版权文本字体大小调整 */
    color: var(--color-fg-muted);
    opacity: 0.8;
    margin-top: 1rem; /* 版权文本上边距调整 */
}
.copyright a{
	font-size: 0.85rem; /* 版权链接字体大小调整 */
}

/* ========================================================================= */
/* 4. 主内容区域 (Main Content Area) - 透明，依赖.container的backdrop-filter */
/* ========================================================================= */
.main-content {
    flex-grow: 1; /* 占据剩余空间 */
    overflow-y: auto; /* 垂直滚动 */
    min-width: 0; /* 允许内容区域收缩 */
    padding: 0 2.5rem; /* 水平内边距调整 */
    background-color: transparent; /* 背景透明，透出.container的模糊效果 */
    position: relative;
    z-index: 1;
}

/* 加载器样式 */
.loader {
    text-align: center;
    font-size: 1.2rem;
    color: var(--color-fg-muted);
    margin: 4rem; /* 外边距调整 */
}

/* 内容包裹器 */
#main-content-wrapper {
    transition: opacity var(--transition-speed) ease-out; /* 透明度过渡 */
    min-height: 80vh; /* 最小高度 */
    padding-top: 1px; /* 防止外边距折叠 */
}
#main-content-wrapper.fade-out { opacity: 0; }

/* ========================================================================= */
/* 5. 文章摘要卡片 (Post Summary Cards) - 磨砂玻璃效果 */
/* ========================================================================= */
.post-summary {
    background: var(--color-card-bg); /* 卡片背景 */
    backdrop-filter: blur(0px); /* 明确不模糊自身背景 */
    -webkit-backdrop-filter: blur(0px);
    padding: 1.8rem 2.2rem; /* 内边距调整，使卡片更紧凑 */
    margin: 1.5rem 0; /* 垂直外边距调整 */
    border-radius: var(--border-radius-large);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 16px var(--color-shadow-light), 0 2px 6px var(--color-shadow-light);
    transition: all var(--transition-speed) cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
}
.post-summary:hover {
    transform: translateY(-6px); /* 悬停上浮效果 */
    box-shadow: 0 10px 30px var(--color-shadow-medium), 0 4px 10px var(--color-shadow-light);
    border-color: var(--accent-color); /* 悬停边框强调 */
}
.post-summary h2 {
    font-family: var(--font-heading);
    margin: 0 0 0.6rem; /* 标题外边距调整 */
    font-size: 1.5rem; /* 标题字体大小调整 */
    font-weight: 600;
    letter-spacing: -0.03em;
}
.post-summary h2 a { color: var(--color-fg); text-decoration: none; }
.post-summary .meta {
    font-size: 0.85rem; /* 元信息字体大小调整 */
    color: var(--color-fg-muted);
    margin-bottom: 0.8rem; /* 元信息外边距调整 */
    display: flex;
    align-items: center;
    gap: 0.6rem; /* 元信息项间距调整 */
}
.post-summary .meta span {
    display: inline-flex;
    align-items: center;
}
.post-summary p {
    margin: 0;
    font-size: 0.9rem; /* 摘要文本字体大小调整 */
    line-height: 1.6; /* 行高调整 */
    color: var(--color-fg-muted);
}

/* ========================================================================= */
/* 6. 单篇文章内容 (Single Post Content) - 磨砂玻璃效果 */
/* ========================================================================= */
.post-content {
    background: var(--color-card-bg); /* 文章内容背景 */
    backdrop-filter: blur(0px); /* 明确不模糊自身背景 */
    -webkit-backdrop-filter: blur(0px);
    padding: 3rem 3rem; /* 内边距调整 */
    margin: 1.5rem 0; /* 外边距调整 */
    border-radius: var(--border-radius-large);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 16px var(--color-shadow-light), 0 2px 6px var(--color-shadow-light);
}
.post-content p {
    line-height: 1.7; /* 行高调整 */
    margin-bottom: 1.2em; /* 段落外边距调整 */
    font-size: 1rem; /* 正文文本大小 */
}
.post-content > h1:first-child {
    font-family: var(--font-heading);
    margin-top: 0;
    font-size: 2.5rem; /* 主标题字体大小调整 */
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.2;
    margin-bottom: 0.7rem; /* 主标题外边距调整 */
}
.post-content .meta {
    font-size: 0.9rem; /* 元信息字体大小调整 */
    color: var(--color-fg-muted);
    margin-bottom: 2rem; /* 元信息外边距调整 */
}

/* 各级标题 - 简洁，无边框，基于间距 */
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
    font-family: var(--font-heading);
    padding-bottom: 0.2rem; /* 内边距调整 */
    border-bottom: none; /* 移除下边框 */
    margin-top: 2.5rem; /* 上外边距调整 */
    margin-bottom: 0.8rem; /* 下外边距调整 */
    letter-spacing: -0.03em;
    line-height: 1.3;
}
.post-content h1 { font-size: 2.2rem; font-weight: 700; } /* 标题字体大小调整 */
.post-content h2 { font-size: 1.8rem; font-weight: 600; }
.post-content h3 { font-size: 1.5rem; font-weight: 600; }
.post-content h4 { font-size: 1.3rem; font-weight: 500; color: var(--color-fg); }
.post-content h5 { font-size: 1.1rem; font-weight: 500; color: var(--color-fg-muted); }
.post-content h6 { font-size: 0.95rem; font-weight: 500; color: var(--color-fg-subtle); }

/* 引用块 (Blockquote) */
.post-content blockquote {
    margin: 1.8em 0; /* 外边距调整 */
    padding: 1em 1.8em; /* 内边距调整 */
    border-left: 5px solid var(--accent-color);
    background-color: var(--accent-color-light);
    backdrop-filter: blur(10px) brightness(1.1); /* 磨砂玻璃效果 */
    -webkit-backdrop-filter: blur(10px) brightness(1.1);
    color: var(--color-fg);
    border-radius: var(--border-radius-medium);
    font-style: italic;
    line-height: 1.6;
}

/* 代码块 (Preformatted Code) */
.post-content pre {
    position: relative;
    background-color: var(--hljs-background);
    padding: 1.8rem;
    border-radius: var(--border-radius-medium);
    overflow-x: auto;
    margin: 1.8em 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: background-color var(--transition-speed);
}
.post-content code { font-family: var(--font-mono); font-size: 0.85em; } /* 代码字体大小调整 */

/* 行内代码 */
.post-content :not(pre) > code {
    background-color: var(--accent-color-light);
    backdrop-filter: blur(3px) brightness(1.1); /* 轻微磨砂效果 */
    -webkit-backdrop-filter: blur(3px) brightness(1.1);
    color: var(--accent-color);
    padding: 0.2em 0.4em; /* 内边距调整 */
    border-radius: var(--border-radius-small);
}

/*
 * --- START OF MODIFICATION ---
 *
 * 优化了复制按钮的样式，使其在浅色和深色模式下都清晰可见。
 * - 浅色模式（默认）：使用半透明的深色背景，搭配浅色文字。
 * - 深色模式：恢复原有的半透明浅色背景，搭配白色文字。
 *
 * ---
 */
/* 代码复制按钮 */
.copy-code-button {
    position: absolute; top: 12px; right: 12px;
    /* 默认样式 (适用于浅色模式) */
    background: rgba(90, 90, 90, 0.6); /* 半透明深灰色背景，形成对比 */
    color: #f0f0f0; /* 浅色文字，保证可读性 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 微妙的亮边框 */
    padding: 5px 10px;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    font-size: 0.75em;
    opacity: 0;
    /* 为主题切换添加平滑过渡 */
    transition: opacity var(--transition-speed), background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
    backdrop-filter: blur(8px) brightness(1.2); /* 磨砂玻璃效果 */
    -webkit-backdrop-filter: blur(8px) brightness(1.2);
}
.post-content pre:hover .copy-code-button { opacity: 1; } /* 悬停显示 */

/* 深色模式下的复制按钮样式 */
[data-scheme="dark"] .copy-code-button {
    background: rgba(255, 255, 255, 0.15); /* 恢复原有的半透明浅色背景 */
    color: white; /* 白色文字在深色模式下清晰 */
    border: 1px solid rgba(255, 255, 255, 0.25); /* 恢复原有的浅色边框 */
}
/* --- END OF MODIFICATION --- */


/* ========================================================================= */
/* 7. 分页导航 (Pagination) - 磨砂玻璃效果 */
/* ========================================================================= */
#pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem; /* 上外边距调整 */
    padding-bottom: 2.5rem; /* 下内边距调整 */
}
#pagination-container a {
    padding: 0.6rem 1.1rem; /* 内边距调整 */
    margin: 0 0.3rem; /* 间距调整 */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    background: var(--color-card-bg);
    backdrop-filter: blur(10px) brightness(1.1); /* 磨砂玻璃效果 */
    -webkit-backdrop-filter: blur(10px) brightness(1.1);
    color: var(--color-fg-muted);
    font-weight: 500;
    transition: all var(--transition-speed) ease-out;
    box-shadow: 0 2px 8px var(--color-shadow-light);
}
#pagination-container a:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow: 0 4px 12px var(--color-shadow-medium);
    transform: translateY(-2px); /* 悬停上浮 */
    background: var(--color-card-bg); /* 悬停背景 */
    backdrop-filter: blur(15px) brightness(1.2); /* 悬停模糊效果增强 */
    -webkit-backdrop-filter: blur(15px) brightness(1.2);
}
#pagination-container a.active {
    background-color: var(--accent-color); /* 活动状态背景 */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: white;
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px var(--accent-color-light);
    transform: none;
    cursor: default;
}
#pagination-container a.disabled {
    color: var(--color-fg-subtle);
    pointer-events: none; /* 禁用点击 */
    opacity: 0.5;
    box-shadow: none;
    backdrop-filter: blur(5px) brightness(0.9); /* 禁用状态模糊效果 */
    -webkit-backdrop-filter: blur(5px) brightness(0.9);
}

/* ========================================================================= */
/* 8. 移动端汉堡菜单 (Mobile Hamburger Menu) */
/* ========================================================================= */
.hamburger { display: none; } /* 默认隐藏，在移动端显示 */

/* ========================================================================= */
/* 9. 滚动条样式 (Scrollbar Styling - WebKit & Firefox) */
/* ========================================================================= */
/* WebKit 浏览器 (Chrome, Safari, Edge) */
.left-sidebar::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.post-content pre::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.left-sidebar::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track,
.post-content pre::-webkit-scrollbar-track {
    background: transparent; /* 轨道透明 */
}
.left-sidebar::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb,
.post-content pre::-webkit-scrollbar-thumb {
    background-color: var(--color-fg-subtle); /* 滚动条手柄颜色 */
    border-radius: 10px;
    border: 3px solid rgba(var(--color-card-base), 0.5); /* 边框与背景融合 */
}
.left-sidebar::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover,
.post-content pre::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-color); /* 悬停手柄颜色 */
    border-color: var(--accent-color-light);
}

/* Firefox 浏览器 */
.left-sidebar,
.main-content,
.post-content pre {
    scrollbar-width: thin; /* 细滚动条 */
    scrollbar-color: var(--color-fg-subtle) transparent; /* 手柄颜色 轨道颜色 */
}

/* ========================================================================= */
/* 10. 响应式设计 (Responsive Design - Apple-like adaptability) */
/* ========================================================================= */

/* 屏幕宽度小于1200px时的调整 (适用于小型桌面和大部分平板电脑) */
@media (max-width: 1200px) {
    .container {
        max-width: 100%; /* 全宽显示 */
        margin: 0;
        height: 100vh; /* 撑满视口高度 */
        border-radius: 0; /* 移除圆角 */
        box-shadow: none; /* 移除阴影 */
        border: none; /* 移除边框 */
    }
    .main-content {
        padding: 0 2rem; /* 主内容区水平内边距调整 */
    }
    .post-summary {
        padding: 1.5rem 1.8rem; /* 文章摘要卡片内边距进一步调整 */
    }
    .post-content {
        padding: 2.5rem 2.5rem; /* 单篇文章内容内边距进一步调整 */
    }
}

/* 屏幕宽度小于768px时的调整 (适用于移动设备) */
@media (max-width: 768px) {
    /* **关键修改：在移动端，将背景伪元素也设置为固定定位，实现内容滚动背景不变的效果** */
    body::before {
        position: fixed; /* 恢复为固定定位，使其相对于视口固定，内容滚动时背景保持不变 */
        height: 100%; /* 高度覆盖整个视口 */
        filter: blur(8px) brightness(0.9); /* 减弱背景模糊 */
        -webkit-filter: blur(8px) brightness(0.9);
        transform: scale(1.02); /* 轻微放大以避免模糊边缘 */
    }
    [data-scheme="dark"] body::before {
        background-image: var(--bg-dark-image);
        filter: blur(8px) brightness(0.7) grayscale(0.2);
        -webkit-filter: blur(8px) brightness(0.7) grayscale(0.2);
    }

    /* 修复：隐藏移动端可能出现的水平滚动条 */
    body {
        overflow-x: hidden;
    }

    .container {
        flex-direction: column; /* 布局改为垂直堆叠 */
        height: auto;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        border: none;
        background-color: transparent; /* 容器背景透明 */
        backdrop-filter: none; /* 移除容器的背景模糊 */
        -webkit-backdrop-filter: none;
    }
    .main-content {
        overflow-y: visible; /* 允许主内容区内容溢出（不需要内部滚动条） */
        padding: 0; /* 移除内边距 */
    }

    /* 左侧边栏在移动端变为顶部导航栏 */
    .left-sidebar {
        width: 100%;
        height: auto;
        overflow-y: visible;
        border-right: none;
        border-bottom: 1px solid var(--color-border); /* 底部边框 */
        flex-direction: row; /* 水平布局 */
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap; /* 允许内容换行 */
        padding: 1rem 1.5rem;
        border-radius: 0;
        box-shadow: 0 2px 8px var(--color-shadow-medium);
        background-color: var(--color-card-bg); /* 顶部栏背景 */
        backdrop-filter: blur(15px) brightness(1.1); /* 顶部栏的磨砂效果 */
        -webkit-backdrop-filter: blur(15px) brightness(1.1);
    }
    .left-sidebar header {
        text-align: left;
        margin-bottom: 0;
        flex-grow: 1; /* 占据可用空间 */
        min-width: 120px; /* 最小宽度，防止被挤压 */
    }
    .site-avatar { display: none; } /* 移动端隐藏头像 */
    .site-meta .site-name { font-size: 1.3rem; } /* 站点名称字体调整 */
    .site-meta .site-description { display: none; } /* 移动端隐藏描述 */

    /* 移动端隐藏元素，由汉堡菜单控制显示 */
    .search-form, .site-nav, .menu-bottom-section {
        display: none; /* 默认隐藏 */
        width: 100%; /* 展开后占据全宽 */
        background: var(--color-card-bg); /* 展开部分的背景 */
        backdrop-filter: blur(15px) brightness(1.1); /* 展开部分的磨砂效果 */
        -webkit-backdrop-filter: blur(15px) brightness(1.1);
        border-top: 1px solid var(--color-border); /* 顶部边框 */
        padding: 1rem 1.5rem;
        margin: 0;
        border-radius: 0;
        flex-direction: column; /* 内部元素垂直堆叠 */
    }
    /* 汉堡菜单激活时显示对应区域 */
    .left-sidebar.is-active .search-form,
    .left-sidebar.is-active .site-nav,
    .left-sidebar.is-active .menu-bottom-section {
        display: flex;
    }
    .left-sidebar.is-active .search-input {
        border-radius: var(--border-radius-medium);
        margin-bottom: 0.8rem;
    }
    .left-sidebar.is-active .search-button {
        position: static; /* 恢复静态定位 */
        transform: none;
        width: 100%; /* 占据全宽 */
        padding: 0.6rem;
        background-color: var(--color-bg);
        border-radius: var(--border-radius-medium);
        border: 1px solid var(--color-border);
        backdrop-filter: blur(10px) brightness(1.1);
        -webkit-backdrop-filter: blur(10px) brightness(1.1);
    }
    .left-sidebar.is-active .site-nav .nav-link {
        padding: 0.7rem 0.5rem;
    }
    .left-sidebar.is-active .menu-bottom-section {
        border-bottom: none; /* 底部无边框 */
    }

    /* 汉堡菜单按钮样式 */
    .hamburger {
        display: block; /* 移动端显示 */
        background: transparent;
        border: none;
        padding: 0;
        width: 30px;
        height: 24px;
        position: relative;
        z-index: 11; /* 确保在最顶层 */
        cursor: pointer;
    }
    .hamburger .hamburger-box { width: 100%; height: 100%; display: inline-block; position: relative; right:30px}
    .hamburger .hamburger-inner,
    .hamburger .hamburger-inner::before,
    .hamburger .hamburger-inner::after {
        width: 100%; height: 3px; background-color: var(--color-fg); border-radius: 3px;
        position: absolute; transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    }
    .hamburger .hamburger-inner { top: 50%; transform: translateY(-50%); }
    .hamburger .hamburger-inner::before { content: ''; top: -10px; }
    .hamburger .hamburger-inner::after { content: ''; bottom: -10px; }
    /* 汉堡菜单激活时的动画 */
    .left-sidebar.is-active .hamburger-inner { transform: rotate(45deg); }
    .left-sidebar.is-active .hamburger-inner::before { top: 0; opacity: 0; }
    .left-sidebar.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); }

    /* 移动端卡片全宽显示 - 简化液态玻璃效果 */
    .post-summary, .post-content {
        margin: 0; /* 移除外边距 */
        border-radius: 0; /* 移除圆角 */
        border-left: none;
        border-right: none;
        box-shadow: none; /* 移除阴影 */
        border-bottom: 1px solid var(--color-border); /* 底部边框 */
        padding: 1.5rem; /* 内边距调整 */
        background-color: var(--color-card-bg);
        backdrop-filter: blur(15px) brightness(1.1); /* 移动端卡片磨砂效果 */
        -webkit-backdrop-filter: blur(15px) brightness(1.1);
    }
    /* 文章摘要卡片之间的间隔 */
    .post-summary:not(:last-child) {
        border-bottom: 6px solid var(--color-bg); /* 更明显的间隔 */
    }
    .post-content .meta {
        margin-bottom: 1.5rem;
    }
    .post-content h1, .post-content h2, .post-content h3 {
        margin-top: 2rem;
    }
    .post-content h1 { font-size: 2rem; }
    .post-content h2 { font-size: 1.7rem; }
    .post-content h3 { font-size: 1.4rem; }
    .post-content p {
        font-size: 0.95rem;
    }
}

/* ========================================================================= */
/* 11. 打印样式 (Print Styles) */
/* ========================================================================= */
@media print {
    /* --- 1. 全局重置与基础设置 --- */
    * {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        transition: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body {
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: 12pt;
        line-height: 1.5;
        margin: 0;
        padding: 1.5cm !important; /* 保留打印边距 */
        color: #000; /* 为没有指定颜色的正文设置默认黑色 */
    }

    /* --- 2. 隐藏所有非内容元素 --- */
    .left-sidebar,
    .hamburger,
    #pagination-container,
    .copy-code-button,
    .dark-mode-toggle,
    .social-links,
    .copyright,
    .search-form,
    .loader {
        display: none !important;
    }

    /* --- 3. 重置布局容器，释放内容 --- */
    .container,
    .main-content,
    #main-content-wrapper {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* --- 4. 优化文章内容排版 --- */
    .post-summary,
    .post-content {
        margin: 0 0 2em 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    .post-content .meta {
        display: none;
    }

    /* 标题样式 */
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Helvetica Neue', Arial, sans-serif;
        page-break-after: avoid;
        page-break-inside: avoid;
        margin-top: 1.5em;
        margin-bottom: 0.5em;
    }
    h1 { font-size: 24pt; }
    h2 { font-size: 20pt; }
    h3 { font-size: 16pt; }

    /* 段落 */
    p {
        orphans: 3;
        widows: 3;
    }

    /* 链接处理 */
    a, a:visited {
        color: #0000ee !important; /* 打印时为链接设置一个统一的蓝色，使其可辨认 */
        text-decoration: underline;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        font-weight: normal;
        font-style: italic;
        color: #555 !important; /* URL文本使用灰色，与链接正文区分 */
    }
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    /* 引用块 */
    blockquote {
        margin: 1.5em 0;
        padding: 1em;
        border-left: 3px solid #ccc !important;
        font-style: italic;
        page-break-inside: avoid;
    }

    /* 代码块 */
    pre {
        /*
         * [主要修改]
         * 移除了 background 属性，使其完全透明，不打印背景色。
         * 保留边框以在视觉上将代码块与正文分开。
         */
        border: 1px solid #ddd !important;
        padding: 1em !important;
        margin: 1.5em 0;
        font-size: 10pt;
        white-space: pre-wrap;
        word-wrap: break-word;
        page-break-inside: avoid;
    }
    code {
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    }
    :not(pre) > code {
        font-size: 11pt;
        border: 1px solid #ddd;
        padding: 0.1em 0.3em;
        color: #c7254e !important; /* 为行内代码设置一个统一颜色 */
    }

    /* 图像 */
    img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
    }
}

/* ========================================================================= */
/* 12. 代码高亮样式 (Code Highlighting Styles) - 动态主题切换 */
/* ========================================================================= */
/*
 * 通过CSS变量定义亮色和暗色两套主题。
 * highlight.js 生成的 HTML 结构是固定的 (如 <span class="hljs-keyword">)，
 * 我们只需要改变这些 class 的颜色即可。
 */

:root {
    /* -- Atom One Light Theme -- */
    --hljs-background: #fafafa;
    --hljs-text: #383a42;
    --hljs-comment: #a0a1a7;
    --hljs-keyword: #a626a4;
    --hljs-name: #e45649;
    --hljs-literal: #0184bb;
    --hljs-string: #50a14f;
    --hljs-number: #986801;
    --hljs-title: #4078f2;
    --hljs-class: #c18401;
    --hljs-emphasis: italic;
    --hljs-strong: bold;
}

[data-scheme="dark"] {
    /* -- Atom One Dark Theme -- */
    --hljs-background: #282c34;
    --hljs-text: #abb2bf;
    --hljs-comment: #5c6370;
    --hljs-keyword: #c678dd;
    --hljs-name: #e06c75;
    --hljs-literal: #56b6c2;
    --hljs-string: #98c379;
    --hljs-number: #d19a66;
    --hljs-title: #61aeee;
    --hljs-class: #e6c07b;
    --hljs-emphasis: italic;
    --hljs-strong: bold;
}

/* 应用这些变量到 highlight.js 的类上 */
.hljs {
    display: block;
    overflow-x: auto;
    color: var(--hljs-text);
}

.hljs-comment,
.hljs-quote {
    color: var(--hljs-comment);
    font-style: var(--hljs-emphasis);
}

.hljs-doctag,
.hljs-formula,
.hljs-keyword {
    color: var(--hljs-keyword);
}

.hljs-deletion,
.hljs-name,
.hljs-section,
.hljs-selector-tag,
.hljs-subst {
    color: var(--hljs-name);
}

.hljs-literal {
    color: var(--hljs-literal);
}

.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
    color: var(--hljs-string);
}

.hljs-attr,
.hljs-number,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-type,
.hljs-variable {
    color: var(--hljs-number);
}

.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-symbol,
.hljs-title {
    color: var(--hljs-title);
}

.hljs-built_in,
.hljs-class .hljs-title,
.hljs-title.class_ {
    color: var(--hljs-class);
}

.hljs-emphasis {
    font-style: var(--hljs-emphasis);
}

.hljs-strong {
    font-weight: var(--hljs-strong);
}

.hljs-link {
    text-decoration: underline;
}