/* ===================================================== */
/* 1. 分类目录样式优化：墨绿色大厂风格 */
/* ===================================================== */

/* 全局配色变量，后面想改颜色只改这里 */

:root {
    --cb-primary: #3b3430;        /* 主色：暖灰黑 */
    --cb-primary-light: #8a8178;
    --cb-accent: #b98b5f;         /* 强调色：香槟金 */

    --cb-page-bg: #f3efe8;
    --cb-page-bg-2: #fbfaf7;

    --cb-card-bg: #fffdf8;
    --cb-card-bg-side: #f6f1e9;

    --cb-text: #2f2a26;
    --cb-muted: #7a7169;
    --cb-border: rgba(59, 52, 48, 0.14);
    --cb-line: rgba(59, 52, 48, 0.16);
    --cb-bg-soft: rgba(185, 139, 95, 0.12);
}


/* 分类页：分类名称 */
.category-lists .category-list a {
    font-size: 1.16rem;
    font-weight: 700;
    color: var(--cb-text) !important;
    transition: color 0.25s ease, transform 0.25s ease;
}

/* 分类页：文章数量 */
.category-lists .category-list .category-list-count {
    font-size: 1rem;
    color: var(--cb-muted) !important;
    font-weight: 500;
}

/* 分类项整体间距 */
.category-lists .category-list .category-list-item {
    line-height: 1.65 !important;
    margin-bottom: 9px !important;
}

/* 分类 hover：更像产品站，不用亮蓝色 */
.category-lists .category-list a:hover,
#aside-content .card-categories a:hover {
    color: var(--cb-primary) !important;
}

/* ===================================================== */
/* 2. 父级目录图标：墨绿色开启文件夹 */
/* ===================================================== */

.category-lists .category-list > .category-list-item > a::before,
#aside-content .card-categories ul > .card-category-list-item > a::before {
    content: '\f07c' !important; 
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: var(--cb-primary) !important;
    opacity: 0.95;
}

/* ===================================================== */
/* 3. 子级目录图标：高级灰闭合文件夹 */
/* ===================================================== */

.category-lists .category-list-child .category-list-item > a::before,
#aside-content .card-categories ul .child .card-category-list-item > a::before {
    content: '\f07b' !important;
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: var(--cb-muted) !important;
    opacity: 0.85;
}

/* 子级目录 hover 时，图标也变成墨绿色 */
.category-lists .category-list-child .category-list-item > a:hover::before,
#aside-content .card-categories ul .child .card-category-list-item > a:hover::before {
    color: var(--cb-primary) !important;
}

/* ===================================================== */
/* 4. 层级缩进与树状引导线 */
/* ===================================================== */

.category-lists .category-list-child,
#aside-content .card-categories ul .child {
    padding-left: 16px !important;
    margin-top: 7px !important;
    margin-left: 7px !important;
    border-left: 2px solid var(--cb-line) !important;
}

/* 子级分类文字稍微收一点，更有层级感 */
.category-lists .category-list-child .category-list-item > a,
#aside-content .card-categories ul .child .card-category-list-item > a {
    font-size: 1.04rem;
    font-weight: 600;
    color: var(--cb-muted) !important;
}

/* ===================================================== */
/* 5. 侧边栏分类卡片优化 */
/* ===================================================== */

#aside-content .card-categories .card-category-list-item {
    border-radius: 10px;
    transition: background 0.25s ease, transform 0.25s ease;
}

/* 侧边栏分类 hover 背景 */
#aside-content .card-categories .card-category-list-item:hover {
    background: var(--cb-bg-soft);
    transform: translateX(3px);
}

/* 侧边栏分类文字 */
#aside-content .card-categories .card-category-list-item a {
    color: var(--cb-text) !important;
    font-weight: 600;
}

/* 侧边栏分类数量 */
#aside-content .card-categories .card-category-list-count {
    color: var(--cb-muted) !important;
    font-weight: 500;
}

/* ===================================================== */
/* 6. 分类页整体更柔和 */
/* ===================================================== */

.category-lists {
    color: var(--cb-text);
}

/* 分类页标题、侧边栏标题统一墨绿色 */
.category-lists .category-title,
.card-widget .item-headline span,
.card-widget .item-headline i {
    color: var(--cb-primary) !important;
}


/* ===== Cloud & Byte 自定义大厂风格美化 ===== */

/* 1. 全局背景：避免纯白 */
body {
  background:
    radial-gradient(circle at top left, rgba(185, 139, 95, 0.12), transparent 30%),
    linear-gradient(180deg, #fbfaf7 0%, #f3efe8 100%) !important;
  color: #2f3437;
}

/* 2. 主体宽度：减少左右大空白 */
.layout {
  max-width: 1320px !important;
}

/* 3. 首页文章区域更宽一些 */
@media screen and (min-width: 900px) {
  #recent-posts {
    width: calc(100% - 310px) !important;
  }

  #aside-content {
    width: 290px !important;
  }
}

/* 4. 卡片质感：不要死白，增加轻微玻璃感 */
#recent-posts > .recent-post-item,
.card-widget,
#post,
#page,
#archive,
#tag,
#category {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(47, 93, 80, 0.08);
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(31, 41, 55, 0.08) !important;
    /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* 5. 鼠标悬浮时卡片更有产品感 */
#recent-posts > .recent-post-item:hover,
.card-widget:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(31, 41, 55, 0.12) !important;
  transition: all 0.25s ease;
}

/* 6. 链接颜色：去掉默认亮蓝 */
a {
  color: var(--cb-primary);
}

a:hover {
  color: var(--cb-accent) !important;
}

/* 7. 首页文章标题 */
#recent-posts > .recent-post-item > .recent-post-info > .article-title {
  color: #1f2937 !important;
  font-weight: 700;
}

/* 8. 侧边栏标题更稳重 */
.card-widget .item-headline span,
.card-widget .item-headline i {
  color: var(--cb-primary) !important;
}

/* 9. 标签不要太花，统一风格 */
.card-tag-cloud a {
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(47, 93, 80, 0.08);
  color: var(--cb-primary) !important;
  margin: 4px;
}

/* 10. 顶部导航栏更干净 */
#nav {
  background: rgba(255, 255, 255, 0.72) !important;
    /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#nav a {
  color: #1f2937 !important;
}

#nav a:hover {
  color: var(--cb-primary) !important;
}

/* ===================================================== */
/* 代码块样式优化：暖灰黑 + 香槟金 */
/* ===================================================== */

/* 整个代码块外壳 */
figure.highlight {
    margin: 1.4rem 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #f7f3ec !important;
    border: 1px solid rgba(59, 52, 48, 0.12) !important;
    box-shadow: 0 10px 28px rgba(47, 42, 38, 0.08) !important;
}

/* 顶部语言栏 */
figure.highlight .highlight-tools {
    background: #ece5da !important;
    border-bottom: 1px solid rgba(59, 52, 48, 0.10) !important;
    height: 38px !important;
    line-height: 38px !important;
}

/* 左上角语言名称，比如 PYTHON */
figure.highlight .code-lang {
    color: #3b3430 !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
}

/* 折叠箭头 */
figure.highlight .expand {
    color: #8a8178 !important;
}

/* 复制按钮 */
figure.highlight .copy-button {
    color: #8a8178 !important;
}

figure.highlight .copy-button:hover {
    color: #b98b5f !important;
}

/* 代码主体背景 */
figure.highlight table,
figure.highlight pre,
figure.highlight .code,
figure.highlight .gutter {
    background: #f7f3ec !important;
}

/* 代码主体 */
figure.highlight pre {
    padding: 14px 0 !important;
    margin: 0 !important;
    color: #2f2a26 !important;
    font-size: 0.92rem !important;
    line-height: 1.85 !important;
    font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace !important;
}

/* 行号区域 */
figure.highlight .gutter {
    width: 48px !important;
    color: #a79d92 !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    border-right: 1px solid rgba(59, 52, 48, 0.08) !important;
}

/* 行号文字 */
figure.highlight .gutter pre {
    color: #a79d92 !important;
    text-align: right !important;
    padding-right: 12px !important;
}

/* 代码区域 */
figure.highlight .code pre {
    padding-left: 16px !important;
    padding-right: 18px !important;
}

/* 代码选中效果 */
figure.highlight ::selection {
    background: rgba(185, 139, 95, 0.28) !important;
}

/* 行内代码，比如 `print()` */
#article-container code {
    color: #8a5a2b !important;
    background: rgba(185, 139, 95, 0.12) !important;
    border: 1px solid rgba(185, 139, 95, 0.16) !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
    font-size: 0.88em !important;
}

/* 代码块里的 code 不要套行内代码样式 */
figure.highlight code {
    color: inherit !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* 代码块 hover 时稍微浮起 */
figure.highlight:hover {
    box-shadow: 0 14px 34px rgba(47, 42, 38, 0.11) !important;
    transform: translateY(-1px);
    transition: all 0.22s ease;
}

/* 12. 页脚不要太突兀 */
#footer {
  background: transparent !important;
  color: #6b7280;
}

/* ===================================================== */
/* 2. 首页整体布局与背景层次优化 */
/* ===================================================== */
/* 页面整体背景：不要纯白 */
html,
body,
#body-wrap {
    background:
        radial-gradient(circle at 8% 20%, rgba(185, 139, 95, 0.12), transparent 26%),
        radial-gradient(circle at 92% 34%, rgba(214, 167, 92, 0.12), transparent 24%),
        linear-gradient(180deg, var(--cb-page-bg-2) 0%, var(--cb-page-bg) 100%) !important;
    color: var(--cb-text);
}

/* 内容区宽度：略微加宽，但不失控 */
.layout {
    max-width: 1360px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}

/* 大屏下，主内容和右侧栏重新分配比例 */
@media screen and (min-width: 1200px) {
    #recent-posts {
        width: calc(100% - 350px) !important;
    }

    #aside-content {
        width: 320px !important;
    }
}

/* 超宽屏再稍微放开一点 */
@media screen and (min-width: 1600px) {
    .layout {
        max-width: 1480px !important;
    }
}

/* 文章卡片：从纯白改成米白 */
#recent-posts > .recent-post-item {
    background: var(--cb-card-bg) !important;
    border: 1px solid var(--cb-border);
    border-radius: 20px !important;
    box-shadow: 0 14px 34px rgba(31, 41, 55, 0.07) !important;
    min-height: 168px;
    transition: all 0.25s ease;
}

/* 文章卡片 hover 增加左侧强调线 */
#recent-posts > .recent-post-item:hover {
    transform: translateY(-3px);
    border-left: 5px solid var(--cb-primary);
    box-shadow: 0 20px 46px rgba(31, 41, 55, 0.12) !important;
}

/* 右侧栏卡片：比文章卡片略深，形成层次 */
.card-widget {
    background: var(--cb-card-bg-side) !important;
    border: 1px solid var(--cb-border);
    border-radius: 20px !important;
    box-shadow: 0 12px 30px rgba(31, 41, 55, 0.06) !important;
}

/* ===================================================== */
/* 作者头像：从圆形头像改为 3:4 方角照片 */
/* ===================================================== */

#aside-content .card-info .avatar-img,
#aside-content .card-info img.avatar-img {
    width: 126px !important;
    height: 168px !important;
    border-radius: 16px !important;
    object-fit: cover !important;
    box-shadow: 0 10px 24px rgba(47, 42, 38, 0.14) !important;
    border: 3px solid rgba(255, 253, 248, 0.9) !important;
}

/* 去掉 Butterfly 默认圆形头像效果 */
#aside-content .card-info .avatar-img img {
    border-radius: 16px !important;
    object-fit: cover !important;
}

/* 鼠标悬浮时不旋转，只轻微放大 */
#aside-content .card-info .avatar-img:hover,
#aside-content .card-info img.avatar-img:hover,
#aside-content .card-info .avatar-img:hover img,
#aside-content .card-info img.avatar-img:hover img {
    transform: scale(1.02) !important;
    rotate: 0deg !important;
}


/* 右侧栏标题颜色统一 */
.card-widget .item-headline span,
.card-widget .item-headline i {
    color: var(--cb-primary) !important;
}

/* 链接颜色：去掉默认蓝色 */
a {
    color: var(--cb-primary);
}

a:hover {
    color: var(--cb-accent) !important;
}

/* 文章标题更稳重 */
#recent-posts > .recent-post-item > .recent-post-info > .article-title {
    color: #1f2933 !important;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* 文章摘要文字不要太淡 */
#recent-posts .content {
    color: #4b5563 !important;
    line-height: 1.9;
}

/* 顶部导航栏：轻微半透明 */
#nav {
    background: rgba(247, 248, 243, 0.78) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#nav a,
#nav #site-name {
    color: #1f2933 !important;
    font-weight: 600;
}

#nav a:hover,
#nav #site-name:hover {
    color: var(--cb-primary) !important;
}

/* ===================================================== */
/* 3. 首页 Hero 区域优化：降低高度，增加质感 */
/* ===================================================== */

/* 首页顶部大图不要占满一整屏 */
#page-header.full_page {
    height: 58vh !important;
    min-height: 440px !important;
}

/* 顶部遮罩颜色调柔和，不要整片发绿 */
#page-header::before {
    background: rgba(45, 39, 35, 0.38) !important;
}

/* 首页标题 */
#site-title {
    font-size: 3rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

/* 首页副标题 */
#site-subtitle {
    font-size: 1.15rem !important;
    margin-top: 14px !important;
    opacity: 0.92;
}

/* 下滑箭头不要太突兀 */
.scroll-down-effects {
    color: rgba(255, 255, 255, 0.82) !important;
}


/* ===================================================== */
/* 4. 文章底部：上一篇/下一篇 + Related Articles 浅色化 */
/*    适配 Butterfly 的 pagination-related 结构 */
/* ===================================================== */

/* 外层容器不要带深色背景 */
#pagination,
#pagination.pagination-post,
.relatedPosts,
.relatedPosts .relatedPosts-list {
    background: transparent !important;
    box-shadow: none !important;
}

/* 上一篇/下一篇、相关文章的真正卡片 */
#pagination.pagination-post > a,
#pagination.pagination-post > a.pagination-related,
#pagination .pagination-related,
.relatedPosts > .relatedPosts-list > a,
.relatedPosts > .relatedPosts-list > a.pagination-related,
.relatedPosts > .relatedPosts-list > div,
.relatedPosts > .relatedPosts-list > div > a,
.relatedPosts .pagination-related {
    background: #fbfaf5 !important;
    background-color: #fbfaf5 !important;
    background-image: none !important;
    border: 1px solid var(--cb-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 26px rgba(31, 41, 55, 0.08) !important;
    color: #263238 !important;
    text-shadow: none !important;
    overflow: hidden !important;
}

/* 清除主题自带深色遮罩 */
#pagination.pagination-post > a::before,
#pagination.pagination-post > a::after,
#pagination .pagination-related::before,
#pagination .pagination-related::after,
.relatedPosts > .relatedPosts-list > a::before,
.relatedPosts > .relatedPosts-list > a::after,
.relatedPosts > .relatedPosts-list > div::before,
.relatedPosts > .relatedPosts-list > div::after,
.relatedPosts > .relatedPosts-list > div > a::before,
.relatedPosts > .relatedPosts-list > div > a::after,
.relatedPosts .pagination-related::before,
.relatedPosts .pagination-related::after {
    content: none !important;
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
    filter: none !important;
}

/* 关键：隐藏封面层。深色通常就是 cover 层造成的 */
#pagination .cover,
#pagination img.cover,
#pagination [class*="cover"],
.relatedPosts .cover,
.relatedPosts img.cover,
.relatedPosts [class*="cover"] {
    display: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    filter: none !important;
}

/* 文字层改为深色 */
#pagination .pagination-related,
#pagination .pagination-related *,
.relatedPosts .pagination-related,
.relatedPosts .pagination-related *,
.relatedPosts .relatedPosts-list a,
.relatedPosts .relatedPosts-list a *,
.relatedPosts .relatedPosts-list div,
.relatedPosts .relatedPosts-list div * {
    color: #263238 !important;
    text-shadow: none !important;
}

/* PREVIOUS / NEXT / 日期等弱化文字 */
#pagination .pagination-related .label,
#pagination .pagination-related .info-item-1,
.relatedPosts .pagination-related .info-item-1,
.relatedPosts .date {
    color: #6b7280 !important;
    font-weight: 600 !important;
}

/* 标题加粗 */
#pagination .pagination-related .info-item-2,
.relatedPosts .pagination-related .info-item-2,
.relatedPosts .title {
    color: #263238 !important;
    font-weight: 700 !important;
}

/* hover 时保持浅色，不回到深色 */
#pagination.pagination-post > a:hover,
#pagination .pagination-related:hover,
.relatedPosts > .relatedPosts-list > a:hover,
.relatedPosts > .relatedPosts-list > div:hover,
.relatedPosts > .relatedPosts-list > div > a:hover,
.relatedPosts .pagination-related:hover {
    background: #ffffff !important;
    background-image: none !important;
    border-color: rgba(185, 139, 95, 0.38) !important;
    box-shadow: 0 16px 34px rgba(31, 41, 55, 0.12) !important;
    transform: translateY(-3px);
}


/* ===================================================== */
/* About 页面：技术栈徽标 */
/* ===================================================== */

/* ===================================================== */
/* About 页面：技术栈徽标 */
/* ===================================================== */

#page .about-tech-stack {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px 10px !important;
    align-items: center !important;
    margin: 14px 0 30px 0 !important;
}

#page .about-tech-stack span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(59, 52, 48, 0.16) !important;
    background: rgba(246, 241, 233, 0.92) !important;
    color: #2f2a26 !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.1px !important;
    box-shadow: 0 4px 12px rgba(47, 42, 38, 0.045) !important;
    white-space: nowrap !important;
}

#page .about-tech-stack span:hover {
    border-color: rgba(185, 139, 95, 0.42) !important;
    background: rgba(185, 139, 95, 0.13) !important;
    transform: translateY(-1px) !important;
    transition: all 0.2s ease !important;
}


/* ===================================================== */
/* 夜间模式适配：修复浅色卡片上白字不可见问题 */
/* ===================================================== */

[data-theme="dark"] {
    --cb-primary: #d8c3a5;
    --cb-accent: #c9a46b;

    --cb-page-bg: #181614;
    --cb-page-bg-2: #211e1b;

    --cb-card-bg: #24211e;
    --cb-card-bg-side: #2b2723;

    --cb-text: #eee6da;
    --cb-muted: #b7ada2;
    --cb-border: rgba(216, 195, 165, 0.16);
    --cb-line: rgba(216, 195, 165, 0.18);
    --cb-bg-soft: rgba(201, 164, 107, 0.14);
}

/* 夜间模式整体背景 */
[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] #body-wrap {
    background:
        radial-gradient(circle at 8% 20%, rgba(201, 164, 107, 0.08), transparent 26%),
        linear-gradient(180deg, #211e1b 0%, #181614 100%) !important;
    color: var(--cb-text) !important;
}

/* 夜间模式：文章页、页面、侧边栏、卡片 */
[data-theme="dark"] #post,
[data-theme="dark"] #page,
[data-theme="dark"] #archive,
[data-theme="dark"] #tag,
[data-theme="dark"] #category,
[data-theme="dark"] .card-widget,
[data-theme="dark"] #recent-posts > .recent-post-item {
    background: var(--cb-card-bg) !important;
    border-color: var(--cb-border) !important;
    color: var(--cb-text) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24) !important;
}

/* 夜间模式：正文文字 */
[data-theme="dark"] #article-container,
[data-theme="dark"] #article-container p,
[data-theme="dark"] #article-container li,
[data-theme="dark"] #article-container span,
[data-theme="dark"] #article-container div {
    color: var(--cb-text) !important;
}

/* 夜间模式：标题 */
[data-theme="dark"] #article-container h1,
[data-theme="dark"] #article-container h2,
[data-theme="dark"] #article-container h3,
[data-theme="dark"] #article-container h4,
[data-theme="dark"] #article-container h5,
[data-theme="dark"] #article-container h6 {
    color: #f4ecdf !important;
}

/* 夜间模式：弱化文字 */
[data-theme="dark"] #article-container blockquote,
[data-theme="dark"] #article-container .post-meta,
[data-theme="dark"] #article-container .post-copyright,
[data-theme="dark"] #aside-content {
    color: var(--cb-muted) !important;
}

/* 夜间模式：链接 */
[data-theme="dark"] a {
    color: #d8c3a5 !important;
}

[data-theme="dark"] a:hover {
    color: #c9a46b !important;
}

/* 夜间模式：代码块 */
[data-theme="dark"] figure.highlight {
    background: #1f1c19 !important;
    border-color: rgba(216, 195, 165, 0.14) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28) !important;
}

/* 夜间模式：代码块顶部语言栏 */
[data-theme="dark"] figure.highlight .highlight-tools {
    background: #2b2723 !important;
    border-bottom: 1px solid rgba(216, 195, 165, 0.12) !important;
}

[data-theme="dark"] figure.highlight .code-lang {
    color: #eee6da !important;
}

/* 夜间模式：代码主体 */
[data-theme="dark"] figure.highlight table,
[data-theme="dark"] figure.highlight pre,
[data-theme="dark"] figure.highlight .code,
[data-theme="dark"] figure.highlight .gutter {
    background: #1f1c19 !important;
}

/* 夜间模式：代码文字 */
[data-theme="dark"] figure.highlight pre,
[data-theme="dark"] figure.highlight code {
    color: #eee6da !important;
}

/* 夜间模式：行号 */
[data-theme="dark"] figure.highlight .gutter,
[data-theme="dark"] figure.highlight .gutter pre {
    color: #8f857b !important;
    border-right-color: rgba(216, 195, 165, 0.10) !important;
}

/* 夜间模式：行内代码 */
[data-theme="dark"] #article-container code {
    color: #f0c987 !important;
    background: rgba(201, 164, 107, 0.14) !important;
    border-color: rgba(201, 164, 107, 0.22) !important;
}

/* 代码块里的 code 不要套行内代码样式 */
[data-theme="dark"] figure.highlight code {
    color: inherit !important;
    background: transparent !important;
    border: none !important;
}