/* 网格背景配置 */
:root {
    --grid-color: rgba(0, 0, 0, 0.05); /* 浅色模式网格颜色 */
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 卡片阴影 */
    --card-border: rgba(0, 0, 0, 0.1); /* 卡片边框颜色（加深） */
    --entry: rgb(248, 248, 248); /* 卡片背景色：极淡灰，与纯白背景区分 */
}

/* 系统暗色模式偏好 */
@media (prefers-color-scheme: dark) {
    :root {
        --grid-color: rgba(255, 255, 255, 0.05); /* 暗色模式网格颜色 */
        --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* 暗色模式加深阴影 */
        --card-border: rgba(255, 255, 255, 0.1); /* 暗色模式亮色边框 */
        /* 暗色模式下保持主题默认的卡片颜色，不覆盖 */
    }
}

/* 强制暗色模式 (PaperMod 切换) */
:root[data-theme="dark"] {
    --grid-color: rgba(255, 255, 255, 0.05);
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    --card-border: rgba(255, 255, 255, 0.1);
}

/* 强制浅色模式 (PaperMod 切换) */
:root[data-theme="light"] {
    --grid-color: rgba(0, 0, 0, 0.05);
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --card-border: rgba(0, 0, 0, 0.1);
    --entry: rgb(248, 248, 248); /* 强制浅色模式下的卡片背景 */
}

/* 全站统一网格背景配置 */
body, body.list {
    /* 强制使用主题背景色（覆盖列表页默认的灰色），确保全站底色一致 */
    background-color: var(--theme) !important;
    
    /* 强制应用网格背景 */
    background-image: 
        linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}
/* 优化文章卡片显示 */
.post-entry {
    box-shadow: var(--card-shadow);
    border-color: var(--card-border) !important;
    transition: transform 0.1s, box-shadow 0.3s;
}

.post-entry:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* 悬停时加深阴影 */
}

/* 代码块与背景融合优化 - 仅针对外层容器 */
.post-content .highlight,
.post-content > pre {
    border-radius: var(--radius);
    transition: border-color 0.3s, box-shadow 0.3s;
    overflow: hidden !important; /* 核心修复：裁剪溢出的直角背景 */
}

/* 强制内部元素（包括内部的 pre）复位：无圆角、无背景、无边框 */
.post-content .highlight table,
.post-content .highlight tr,
.post-content .highlight td,
.post-content .highlight pre,
.post-content .highlight code {
    background-color: transparent !important;
    background: transparent !important;
    border-radius: 0 !important; /* 关键：移除内部圆角，防止分离成块 */
    border: 0 !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 暴力覆盖 Hugo Chroma 生成的内联样式 */
.post-content .highlight > div,
.post-content .highlight > pre,
.post-content .highlight table pre {
    background-color: transparent !important;
    background: transparent !important;
}

/* 浅色模式下：保持深色背景但增加圆角和阴影，使其更像一个组件 */
:root[data-theme="light"] .post-content .highlight,
:root[data-theme="light"] .post-content > pre {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* 暗色模式下：增加透明度和毛玻璃效果，使背景纹理隐约可见 */
:root[data-theme="dark"] .post-content .highlight,
:root[data-theme="dark"] .post-content > pre {
    background-color: rgba(46, 46, 51, 0.6) !important; /* 覆盖默认实色背景 */
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] {
    --code-line-number: rgba(255, 255, 255, 0.35);
    --code-line-border: rgba(255, 255, 255, 0.08);
    --code-line-background: rgba(255, 255, 255, 0.04);
}

:root[data-theme="light"] {
    --code-line-number: rgba(0, 0, 0, 0.45);
    --code-line-border: rgba(0, 0, 0, 0.12);
    --code-line-background: rgba(0, 0, 0, 0.06);
    --code-scrollbar-track: rgba(0, 0, 0, 0.06);
    --code-scrollbar-thumb: rgba(0, 0, 0, 0.28);
    --code-scrollbar-thumb-hover: rgba(0, 0, 0, 0.38);
    --code-scrollbar-thumb-border: rgba(246, 248, 250, 0.9);
    --code-light-keyword: #1d4ed8;
    --code-light-string: #b45309;
    --code-light-number: #15803d;
    --code-light-literal: #1d4ed8;
    --code-light-attr: #1f6feb;
    --code-light-title: #111827;
}

.post-content pre code.hljs {
    background: #1e1e1e !important;
    color: #d4d4d4;
    font-size: 14px !important;
    line-height: 0.8 !important; 
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    display: block !important;
    padding: 10px !important;
    white-space: pre !important;
    word-break: normal !important;
}

.post-content pre {
    line-height: 0.8 !important;
}

.post-content pre code {
    display: block !important;
    font-size: 14px !important;
    line-height: 0.8 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    white-space: pre !important;
    word-break: normal !important;
}

:root[data-theme="dark"] .post-content pre code.hljs .hljs-keyword,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-literal,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-name,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-symbol,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-link {
    color: #569cd6;
}

:root[data-theme="dark"] .post-content pre code.hljs .hljs-built_in,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-type {
    color: #4ec9b0;
}

:root[data-theme="dark"] .post-content pre code.hljs .hljs-class,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-number {
    color: #b8d7a3;
}

:root[data-theme="dark"] .post-content pre code.hljs .hljs-string,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-meta .hljs-string {
    color: #d69d85;
}

:root[data-theme="dark"] .post-content pre code.hljs .hljs-regexp,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-template-tag {
    color: #9a5334;
}

:root[data-theme="dark"] .post-content pre code.hljs .hljs-function,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-params,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-subst,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-title {
    color: #dcdcdc;
}

:root[data-theme="dark"] .post-content pre code.hljs .hljs-comment,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-quote {
    color: #57a64a;
}

:root[data-theme="dark"] .post-content pre code.hljs .hljs-doctag {
    color: #608b4e;
}

:root[data-theme="dark"] .post-content pre code.hljs .hljs-meta,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-meta .hljs-keyword,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-tag {
    color: #9b9b9b;
}

:root[data-theme="dark"] .post-content pre code.hljs .hljs-template-variable,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-variable {
    color: #bd63c5;
}

:root[data-theme="dark"] .post-content pre code.hljs .hljs-attr,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-attribute {
    color: #9cdcfe;
}

:root[data-theme="dark"] .post-content pre code.hljs .hljs-section {
    color: gold;
}

:root[data-theme="dark"] .post-content pre code.hljs .hljs-bullet,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-selector-attr,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-selector-class,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-selector-id,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-selector-pseudo,
:root[data-theme="dark"] .post-content pre code.hljs .hljs-selector-tag {
    color: #d7ba7d;
}

.post-content pre code.hljs.hljs-line-numbers {
    counter-reset: hljs-line;
    padding-left: 0;
    background-image: linear-gradient(to right, var(--code-line-background) 0, var(--code-line-background) 2.6em, transparent 2.6em);
    line-height: 0.8 !important;
}

.post-content pre code.hljs.hljs-line-numbers .hljs-line {
    display: block;
    position: relative;
    padding-left: 2.6em;
    font-size: 14px !important;
    line-height: 0.8 !important; 
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.post-content pre code.hljs.hljs-line-numbers .hljs-line::before {
    counter-increment: hljs-line;
    content: counter(hljs-line);
    position: absolute;
    left: 0;
    width: 2.2em;
    padding-right: 0.4em;
    text-align: right;
    color: var(--code-line-number);
    border-right: 1px solid var(--code-line-border);
}

:root[data-theme="light"] .post-content pre code.hljs {
    background: #f6f8fa !important;
    color: #1f2937;
}

:root[data-theme="light"] .post-content pre code.hljs .hljs-keyword,
:root[data-theme="light"] .post-content pre code.hljs .hljs-name,
:root[data-theme="light"] .post-content pre code.hljs .hljs-symbol,
:root[data-theme="light"] .post-content pre code.hljs .hljs-built_in,
:root[data-theme="light"] .post-content pre code.hljs .hljs-type {
    color: var(--code-light-keyword);
}

:root[data-theme="light"] .post-content pre code.hljs .hljs-string,
:root[data-theme="light"] .post-content pre code.hljs .hljs-meta .hljs-string {
    color: var(--code-light-string);
}

:root[data-theme="light"] .post-content pre code.hljs .hljs-number {
    color: var(--code-light-number);
}

:root[data-theme="light"] .post-content pre code.hljs .hljs-comment,
:root[data-theme="light"] .post-content pre code.hljs .hljs-quote {
    color: #6b7280;
}

:root[data-theme="light"] .post-content pre code.hljs .hljs-doctag,
:root[data-theme="light"] .post-content pre code.hljs .hljs-meta,
:root[data-theme="light"] .post-content pre code.hljs .hljs-meta .hljs-keyword,
:root[data-theme="light"] .post-content pre code.hljs .hljs-tag {
    color: #6b7280;
}

:root[data-theme="light"] .post-content pre code.hljs .hljs-template-variable,
:root[data-theme="light"] .post-content pre code.hljs .hljs-variable {
    color: #9333ea;
}

:root[data-theme="light"] .post-content pre code.hljs .hljs-regexp,
:root[data-theme="light"] .post-content pre code.hljs .hljs-template-tag {
    color: #9a5334;
}

:root[data-theme="light"] .post-content pre code.hljs .hljs-literal {
    color: var(--code-light-literal);
}

:root[data-theme="light"] .post-content pre code.hljs .hljs-attr,
:root[data-theme="light"] .post-content pre code.hljs .hljs-attribute {
    color: var(--code-light-attr);
}

:root[data-theme="light"] .post-content pre code.hljs .hljs-section {
    color: #b45309;
}

:root[data-theme="light"] .post-content pre code.hljs .hljs-bullet,
:root[data-theme="light"] .post-content pre code.hljs .hljs-selector-attr,
:root[data-theme="light"] .post-content pre code.hljs .hljs-selector-class,
:root[data-theme="light"] .post-content pre code.hljs .hljs-selector-id,
:root[data-theme="light"] .post-content pre code.hljs .hljs-selector-pseudo,
:root[data-theme="light"] .post-content pre code.hljs .hljs-selector-tag {
    color: #b45309;
}

:root[data-theme="light"] .post-content pre code.hljs .hljs-title,
:root[data-theme="light"] .post-content pre code.hljs .hljs-function,
:root[data-theme="light"] .post-content pre code.hljs .hljs-params {
    color: var(--code-light-title);
}

:root[data-theme="light"] .post-content pre code.hljs::-webkit-scrollbar {
    height: 10px;
}

:root[data-theme="light"] .post-content pre code.hljs::-webkit-scrollbar-track {
    background: var(--code-scrollbar-track);
    border-radius: 999px;
}

:root[data-theme="light"] .post-content pre code.hljs::-webkit-scrollbar-thumb {
    background: var(--code-scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid var(--code-scrollbar-thumb-border);
}

:root[data-theme="light"] .post-content pre code.hljs::-webkit-scrollbar-thumb:hover {
    background: var(--code-scrollbar-thumb-hover);
}

/* 调整复制按钮的圆角，使其匹配 */
.copy-code {
    border-top-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}
