/* Custom enhanced code block theme */

/* 1. 基础代码块：统一变量 -- 亮/暗配色方案 */
/* Tokyo Night 配色变量（light 采用淡化版，dark 采用原主题风格） */
:root {
	--code-bg-light: #f5f7fa; /* 浅背景防刺眼 */
	--code-border-light: #e2e8f0;
	--code-text-light: #1f2937; /* 提升对比度 */
	--code-inline-bg: #eef2f7;
	--code-inline-text: #c7254e;
	--code-accent: #7aa2f7; /* 关键色 */
	--code-add: #449d48;
	--code-del: #c34043;
	/* 亮色模式更高对比的 token 颜色 */
	--code-keyword: #5b21b6; /* 深靛紫 */
	--code-string: #047857; /* 深绿 */
	--code-func: #0ea5e9;   /* 青蓝 */
	--code-number: #b45309; /* 琥珀棕 */
	--code-operator: #dc2626; /* 红 */
	--code-punctuation: #334155; /* 标点/符号（更可见） */
	--code-comment: #475569; /* 深灰蓝，提升可读性 */

	--code-bg-dark: #1a1b26; /* Tokyo Night 深背景 */
	--code-border-dark: #2e3240;
	--code-text-dark: #c0caf5;
	--code-inline-bg-dark: #24283b;
	--code-inline-text-dark: #ff9e64;
	--code-shadow-dark: 0 2px 8px rgba(0,0,0,.6);
	--tokyo-red: #f7768e;
	--tokyo-orange: #ff9e64;
	--tokyo-yellow: #e0af68;
	--tokyo-green: #9ece6a;
	--tokyo-cyan: #7dcfff;
	--tokyo-blue: #7aa2f7;
	--tokyo-magenta: #bb9af7;
	--tokyo-comment: #565f89;

	/* 深色模式下符号/运算符更亮一些 */
	--code-operator-dark: #ff6b6b; /* 更亮的红，提升对比 */
	--code-punctuation-dark: #cbd5e1; /* 亮灰蓝，保证可读性 */
}

/* 2. 去除主题默认“Mac 三色圆点” */
.code-area::after { display: none !important; }

/* 3. 块级代码整体样式 */
#articleContent pre { 
	padding: 1rem 1.2rem !important;
	margin: 1.2rem 0;
	background: var(--code-bg-light);
	border: 1px solid var(--code-border-light);
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,.06);
	line-height: 1.55;
	overflow: auto;
}
#articleContent pre code {
	background: transparent !important;
	color: var(--code-text-light);
	font-size: 0.92rem;
	font-family: 'JetBrainsMono','Fira Code', Menlo, Consolas, Monaco, 'Courier New', monospace;
	font-weight: 450;
}

/* 避免某些主题把代码块内的 class/def 解析成 h1/h2 样式导致“大字” */
#articleContent pre h1,
#articleContent pre h2,
#articleContent pre h3,
#articleContent pre h4,
#articleContent pre h5,
#articleContent pre h6 {
	font-size: inherit !important;
	line-height: inherit !important;
	font-weight: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* 4. 行内代码 */
#articleContent p code,
#articleContent li code,
#articleContent h2 code,
#articleContent h3 code,
#articleContent table code {
	background: var(--code-inline-bg);
	color: var(--code-inline-text);
	padding: 2px 6px;
	border: 1px solid #f2e2c5;
	border-radius: 4px;
	font-size: 0.85rem;
}

/* 5. 仅隐藏不需要的语言 / 展开按钮，恢复复制按钮 */
.code_lang, .code-expand { display: none !important; }

/* 复制按钮：增强可见性（带文字“复制”）*/
.code_copy {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 11px; /* 显示短文本“复制” */
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 6px;
	cursor: pointer;
	line-height: 1;
	letter-spacing: .5px;
	user-select: none;
	background: linear-gradient(135deg,#eef4ff,#d9e7ff 55%,#cddfff);
	border: 1px solid #b2c4ff;
	color: #1f2937; /* 强制文本与背景对比 */
	box-shadow: 0 2px 5px rgba(0,0,0,.06), 0 4px 12px -4px rgba(0,0,0,.12);
	transition: background .25s ease, box-shadow .25s ease, transform .2s ease, color .25s, border-color .25s;
	backdrop-filter: blur(4px);
}
.code_copy::before { content: ""; }
.code_copy::after { content: ""; }
.code_copy:hover {
	background: linear-gradient(135deg,#fff,#e8eeff);
	box-shadow: 0 4px 10px -2px rgba(0,0,0,.18);
	transform: translateY(-2px);
}
.code_copy:active { transform: translateY(0) scale(.95); }
.code_copy:focus-visible { outline: 2px solid #7aa2f7; outline-offset: 2px; }

/* Dark mode copy button */
body.DarkMode .code_copy { 
	background: linear-gradient(135deg,#283144,#303b52); 
	border: 1px solid #3d4a60; 
	color: #d3d9e5; 
	box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
body.DarkMode .code_copy:hover { 
	background: linear-gradient(135deg,#334154,#3b4860); 
	box-shadow: 0 4px 12px -2px rgba(0,0,0,.55);
	color: #eef4ff;
}

@media (prefers-color-scheme: dark) {
	body:not(.force-light) .code_copy { 
		background: linear-gradient(135deg,#283144,#303b52); 
		border: 1px solid #3d4a60; 
		color: #d3d9e5; 
	}
	body:not(.force-light) .code_copy:hover { 
		background: linear-gradient(135deg,#334154,#3b4860); 
		color: #eef4ff; 
	}
}

/* 复制提示浮层 */
.codecopy_notice {
	position: absolute;
	top: 6px;
	right: 56px; /* 仅图标按钮后进一步收紧 */
	z-index: 21;
	background: rgba(0,0,0,.55);
	color: #fff;
	padding: 3px 8px 4px;
	border-radius: 5px;
	font-size: 11px;
	line-height: 1.1;
	font-weight: 500;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-4px) scale(.95);
	backdrop-filter: blur(4px);
	transition: opacity .35s ease, transform .35s ease;
	white-space: nowrap;
}
.codecopy_notice.is-active { opacity: 1; transform: translateY(0) scale(1); }
body.DarkMode .codecopy_notice { background: rgba(50,55,70,.7); }
@media (prefers-color-scheme: dark) { body:not(.force-light) .codecopy_notice { background: rgba(50,55,70,.7); } }

/* 6. 语法高亮（针对 Prism 或 highlight.js 的常见类） */
/* 6. 亮色模式高对比语法配色 */
code .token.comment, code .hljs-comment { color: var(--code-comment); font-style: italic; }
code .token.keyword, code .hljs-keyword { color: var(--code-keyword); font-weight: 600; }
code .token.string, code .hljs-string { color: var(--code-string); }
code .token.function, code .hljs-function { color: var(--code-func); }
code .token.number, code .hljs-number { color: var(--code-number); }
code .token.boolean { color: var(--code-number); }
code .token.operator, code .hljs-operator { color: var(--code-operator); }
code .token.punctuation, code .hljs-punctuation { color: var(--code-punctuation); }
code .token.class-name { color: #1d4ed8; }
code .token.constant { color: #0891b2; }
code .token.builtin { color: #0ea5e9; }
code .token.deleted { color: var(--code-del); }
code .token.inserted { color: var(--code-add); }

/* 7. Diff 行提示（可选）*/
pre code .diff-add, pre code .hljs-addition { background: rgba(46,160,67,.12); display: block; margin: 0 -1.2rem; padding: 0 1.2rem; }
pre code .diff-del, pre code .hljs-deletion { background: rgba(248,81,73,.12); display: block; margin: 0 -1.2rem; padding: 0 1.2rem; }

/* 8. 深色模式（主题暗色 class 可能是 .DarkMode；也兼容用户系统偏好） */
/* 深色模式：主题自身 DarkMode 类 和 系统偏好 dark */
body.DarkMode #articleContent pre {
	background: var(--code-bg-dark);
	border-color: var(--code-border-dark);
	box-shadow: var(--code-shadow-dark);
}
body.DarkMode #articleContent pre code { color: var(--code-text-dark); }
/* 深色模式下的 token 颜色（通过 DarkMode 类直接启用） */
body.DarkMode code .token.comment, body.DarkMode code .hljs-comment { color: var(--tokyo-comment); }
body.DarkMode code .token.keyword, body.DarkMode code .hljs-keyword { color: var(--tokyo-magenta); }
body.DarkMode code .token.string, body.DarkMode code .hljs-string { color: var(--tokyo-green); }
body.DarkMode code .token.function, body.DarkMode code .hljs-function { color: var(--tokyo-blue); }
body.DarkMode code .token.number, body.DarkMode code .hljs-number { color: var(--tokyo-orange); }
body.DarkMode code .token.operator, body.DarkMode code .hljs-operator { color: var(--code-operator-dark); }
body.DarkMode code .token.punctuation, body.DarkMode code .hljs-punctuation { color: var(--code-punctuation-dark); }
body.DarkMode code .token.class-name { color: var(--tokyo-yellow); }
body.DarkMode #articleContent p code,
body.DarkMode #articleContent li code,
body.DarkMode #articleContent h2 code,
body.DarkMode #articleContent h3 code,
body.DarkMode #articleContent table code {
	background: var(--code-inline-bg-dark);
	color: var(--code-inline-text-dark);
	border-color: #3a3a3a;
}

@media (prefers-color-scheme: dark) {
	body:not(.force-light) #articleContent pre {
		background: var(--code-bg-dark);
		border-color: var(--code-border-dark);
		box-shadow: var(--code-shadow-dark);
	}
	body:not(.force-light) #articleContent pre code {
		color: var(--code-text-dark);
	}
	body:not(.force-light) #articleContent p code,
	body:not(.force-light) #articleContent li code,
	body:not(.force-light) #articleContent h2 code,
	body:not(.force-light) #articleContent h3 code,
	body:not(.force-light) #articleContent table code {
		background: var(--code-inline-bg-dark);
		color: var(--code-inline-text-dark);
		border-color: #3a3a3a;
	}
	/* 深色高亮颜色微调 */
		body:not(.force-light) code .token.comment, body:not(.force-light) code .hljs-comment { color: var(--tokyo-comment); }
		body:not(.force-light) code .token.keyword, body:not(.force-light) code .hljs-keyword { color: var(--tokyo-magenta); }
		body:not(.force-light) code .token.string, body:not(.force-light) code .hljs-string { color: var(--tokyo-green); }
		body:not(.force-light) code .token.function, body:not(.force-light) code .hljs-function { color: var(--tokyo-blue); }
		body:not(.force-light) code .token.number, body:not(.force-light) code .hljs-number { color: var(--tokyo-orange); }
		body:not(.force-light) code .token.operator, body:not(.force-light) code .hljs-operator { color: var(--code-operator-dark); }
		body:not(.force-light) code .token.punctuation, body:not(.force-light) code .hljs-punctuation { color: var(--code-punctuation-dark); }
		body:not(.force-light) code .token.class-name { color: var(--tokyo-yellow); }
}

/* 9. 滚动条（代码块内）精致化 */
#articleContent pre::-webkit-scrollbar { height: 10px; }
#articleContent pre::-webkit-scrollbar-track { background: transparent; }
#articleContent pre::-webkit-scrollbar-thumb { background: #c2c2c2; border-radius: 6px; }
body.DarkMode #articleContent pre::-webkit-scrollbar-thumb { background: #4a4a4a; }

/* 10. 避免已有主题给 code 再次加的 filter */
body.DarkMode pre code { filter: none !important; }

/* 11. 复制提示优化（主题已有 .codecopy_notice）*/
.codecopy_notice { background: rgba(0,0,0,.65); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 11px; }

/* 12. 如果 highlight.js 没有按 token 分行，可以追加行高 */
#articleContent pre code { line-height: 1.5; }

/* 13. 防止内联 code 被暗色主题全局 filter 洗掉颜色 */
body.DarkMode #articleContent p code { filter: none !important; }

/* ========================================
   清新色彩主题 - 覆盖主题原有艳丽颜色
   ======================================== */

/* 主色调：白色、灰色 */
:root {
    --fresh-primary: #FFFFFF;      /* 白色 */
    --fresh-secondary: #F8F9FA;    /* 极浅灰色 */
    --fresh-accent: #D0D0D0;       /* 灰色 */
    --fresh-light: #FFFFFF;        /* 白色 */
    --fresh-pale: #F5F5F5;         /* 浅灰背景 */
    --fresh-text: #475569;         /* 柔和文字色 */
}

/* 覆盖主题的紫色渐变 -> 薄荷绿渐变 */
.bg-gradient-primary,
.card-gradient-primary,
.bg-color-primary {
    background: linear-gradient(to right, var(--fresh-primary) 0%, var(--fresh-secondary) 100%) !important;
}

/* 覆盖文章引用块的紫色边框 -> 白色 */
blockquote {
    border-left: 5px solid #E8E8E8 !important;
    background-color: #FAFAFA !important;
}

/* 覆盖按钮的紫/橙渐变 -> 薄荷绿渐变 */
.btn-primary,
.btn-default,
button[type="submit"] {
    background: linear-gradient(to right, var(--fresh-primary) 0%, var(--fresh-secondary) 100%) !important;
}

.btn-primary:hover,
.btn-default:hover,
button[type="submit"]:hover {
    background: linear-gradient(to right, var(--fresh-secondary) 0%, var(--fresh-primary) 100%) !important;
}

/* 覆盖标签的颜色 -> 灰白色 */
.badge,
.tag,
.post-category,
.post-tag {
    background-color: #E8E8E8 !important;
    color: #666 !important;
}

/* 覆盖首页卡片的高亮颜色 -> 白色系 */
.card {
    border-top: 3px solid #E8E8E8 !important;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* 覆盖code区域的背景色 -> 更柔和的淡蓝灰 */
pre {
    background-color: #F5F5F5 !important;
    border-left: 4px solid #D0D0D0 !important;
}

/* 覆盖复制按钮的颜色 */
.code_copy {
    background: linear-gradient(135deg, #F5F5F5, #E8E8E8) !important;
    border: 1px solid #E8E8E8 !important;
    color: #666 !important;
}

.code_copy:hover {
    background: linear-gradient(135deg, #FFFFFF, #F5F5F5) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 覆盖滚动条颜色 -> 白色系 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #D0D0D0, #E0E0E0) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #C0C0C0 !important;
}

/* 覆盖阅读进度条颜色 */
.read-progress {
    background: linear-gradient(to right, #D0D0D0, #B0B0B0) !important;
}

/* 覆盖返回顶部按钮的颜色 */
#scrollUp {
    background: #F0F0F0 !important;
}

#scrollUp:hover {
    background: #E0E0E0 !important;
}

/* 覆盖分页按钮颜色 */
.pagination li.active a {
    background-color: #E0E0E0 !important;
}

.pagination li a:hover {
    background-color: #F5F5F5 !important;
    color: #333 !important;
}

/* 淡化学术色彩，让整体更清爽 */
body {
    background-color: #FFFFFF !important; /* 纯白背景 */
}

/* 覆盖footer背景色 */
footer {
    background-color: #FAFAFA !important;
}